@import 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap';:root{--light:#fff;--dark:#000;--grey:#272727;--lightgrey:#d0d0d0;--yellow:#FFB800;--icon-color:#848484}
.ng-hero-section{background-color:var(--grey);background-image:url(https://sdg7energyplanning.org/img/hero-nigeria.png);background-position:bottom right;background-repeat:no-repeat;padding:0 4.5rem}

.mdg-hero-section{background-color:var(--grey);background-image:url(https://sdg7energyplanning.org/img/hero-madagascar-web-attribution.png);background-position:bottom right;background-repeat:no-repeat;padding:0 4.5rem}

.ma-hero-section{background-color:var(--grey);background-image:url(https://sdg7energyplanning.org/img/hero-malawi.png);background-position:bottom right;background-repeat:no-repeat;padding:0 4.5rem}

.user__manual{padding:4.5rem;padding-bottom:0;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:space-between;color:var(--grey)}

.technical__data{padding:4.5rem;padding-bottom:0;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:space-between;color:var(--grey)}

.technical__data a {color: #FFB800;}
.technical__data a:hover {color: #272727;}

.hero-section{background-color:var(--grey);background-image:url(https://sdg7energyplanning.org/img/hero-home.png);background-position:bottom right;background-repeat:no-repeat;padding:0 4.5rem;padding-bottom:100px}
.hero-section__about{background-color:var(--grey);padding:2rem 4.5rem}

.primary__heading{color:var(--light);font-size:3.3rem;font-weight:700;margin-top:1rem;margin-bottom:18px;max-width:620px;line-height:1.15em;text-transform:capitalize}

.primary__heading__mad{color:var(--light);font-size:3.3rem;font-weight:700;margin-top:1rem;margin-bottom:18px;max-width:620px;line-height:1.15em;}

.secondary__heading{color:var(--grey);font-size:26pt;line-height:1.15em;font-weight:700;margin-top:16px;margin-bottom:16px;text-transform:capitalize}
.secondary__heading__mad{color:var(--grey);font-size:26pt;line-height:1.15em;font-weight:700;margin-top:16px;margin-bottom:16px;}
.logo{margin-bottom:4.5rem}
.svg__logo-home{margin:4.5rem 0 2.5rem;max-width:105px}
.svg__logo{margin:2.5rem 0;max-width:105px}
.country__flag{display:flex;justify-content:flex-start;align-items:center;color:var(--light);font-size:1.2rem;font-weight:400;text-transform:uppercase}
.flag{max-width:1.5rem;margin-right:.5rem}
.flag__icon{max-width:1.3rem}
.body-section{padding:4.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;color:var(--grey)}

.body-section__left{max-width:800px}
.body-section__right{flex-grow:1;display:inline-flex;justify-content:center;align-items:flex-start}
.sdg7{margin-top:2rem;width:100%;max-width:220px;height:max-content}
.bar{min-width:70px;width:70px;height:inherit;background-color:var(--light);box-shadow:2px 0 4px 0 #00000024}
.navbutton{padding-top:2rem;color:#fff;font-size:16pt;font-weight:550;text-transform:uppercase;text-align:center;position:fixed;display:flex;flex-direction:column;left:10px;top:-20px}
.navbar__icon{text-align:center;background-color:#fff;color:var(--yellow);border-radius:5px;border:0;width:48px;height:48px;margin:0 auto;opacity:1;transition:all .2s cubic-bezier(0.075,0.82,0.165,1)}
.navbar__icon>a:hover{color:#FFB800;opacity:1}
.navbar__icon>a>i{cursor:pointer;font-size:1.2rem;color:var(--icon-color)}
.active>a>i{color:var(--grey)}
.navbar__icon>a>i:hover{color:var(--yellow)}
.navbar__icon>a>i:focus-visible{color:var(--yellow)}
.flag__btn{position:relative}
.flag__btn>a{position:relative}


.lang__selection{min-width: 100px; position:absolute;background:#fff;padding:15px 15px 0;z-index:100;top:-30px;right:-145px;border:solid 2px var(--yellow);border-radius:2px;opacity:0;transition:all .4s cubic-bezier(0.25,0.1,0,1.01)}


.lang__selection:before{content:"";position:absolute;width:10px;background:#fff;height:10px;z-index:-22;transform:rotate(45deg);border-bottom:2px solid #ffb800;border-left:2px solid #ffb800;top:19px;left:-7px}


.lang__selection>li{color:var(--dark);font-size:14px;font-weight:600;font-family:'Mulish','Open Sans',sans-serif}


.lang__selection:hover{opacity:1}


.flag__btn:hover>.lang__selection{opacity:1}


.flag__link{display:flex;align-items:center;text-decoration:none;color:var(--grey);margin-bottom:10px;transition:all .2s cubic-bezier(0.075,0.82,0.165,1)}


.lang__selection>.country__flag:hover,.lang__selection>.country__flag>.flag__link:hover{color:var(--yellow);text-decoration:underline}
.flag__link>img{max-width:1.3rem}



.flag__selection{min-width: 130px; position:absolute;background:#fff;padding:15px 15px 0;z-index:100;top:-20px;right:-175px;border:solid 2px var(--yellow);border-radius:2px;opacity:0;transition:all .4s cubic-bezier(0.25,0.1,0,1.01)}


.flag__selection:before{content:"";position:absolute;width:10px;background:#fff;height:10px;z-index:-22;transform:rotate(45deg);border-bottom:2px solid #ffb800;border-left:2px solid #ffb800;top:19px;left:-7px}


.flag__selection>li{color:var(--dark);font-size:14px;font-weight:600;font-family:'Mulish','Open Sans',sans-serif}


.flag__selection:hover{opacity:1}


.flag__btn:hover>.flag__selection{opacity:1}


.flag__link{display:flex;align-items:center;text-decoration:none;color:var(--grey);margin-bottom:10px;transition:all .2s cubic-bezier(0.075,0.82,0.165,1)}


.flag__selection>.country__flag:hover,.flag__selection>.country__flag>.flag__link:hover{color:var(--yellow);text-decoration:underline}
.flag__link>img{max-width:1.3rem}


.flag__link>svg{max-width:1.3rem}
.countries__supported{font-size:1rem;text-transform:uppercase;line-height:1.15em;font-weight:600;background:#F7F7F7;padding:2rem;border:solid 1px #EFEFEF;border-radius:4px;margin-top:16px}
@media (max-width: 470px){.countries__supported{padding:1.3rem;padding:1rem}
}
.countries__supported>ul{display:inline;flex-wrap:wrap;align-items:center;justify-content:space-between;list-style:none;padding:0;margin:0}
.countries__supported>ul>li{font-size:1rem;font-weight:500;background-color:var(--light);border:solid 1px #f1f1f1;border-radius:4px;color:var(--grey);padding:1rem;margin-top:1rem;cursor:pointer}
.countries__supported>ul>li:hover{box-shadow:#000 0 3px 8px;transform:translateY(-5px);transition:.5s all cubic-bezier(0.25,0.1,0,1.01)}
.countries__supported>ul>li>a>svg,.countries__supported>ul>li>a>img{max-width:1.2rem}
.countries__supported>ul>li>.flag__link{display:flex;align-items:center;margin-bottom:0;text-decoration:none}
.current__countries{display:flex;flex-wrap:wrap;align-items:center;position:relative;top:-62px;font-size:1rem;color:#fff;text-transform:uppercase;line-height:1.15em;font-weight:600;background:#000;padding:1rem;margin-top:16px;padding:10px 4.5rem;margin-bottom:-100px}
.current__countries>ul{display:inline-flex;padding:0;margin:0}
.current__countries>ul>li{margin:0 2px 0 20px;font-size:1rem;font-weight:400}
.current__countries>ul>li>.flag__link{display:flex;align-items:center;color:#fff;margin-bottom:0;text-decoration:none;transition:all .5s cubic-bezier(0.25,0.1,0,1.01)}
.current__countries>ul>li>.flag__link:hover{color:var(--yellow);text-decoration:underline}
.pdf{color:var(--yellow);font-weight:600;text-decoration:none;margin:1rem 0}
.logos{padding-top:40px;display:flex;flex-wrap:wrap}

.mlogos{padding-top:40px;display:flex;flex-wrap:wrap}
.powered{width:100%;max-width:200px}
.sponsors{width:100%;}
.msponsors{width: 300px}
.light__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--light);background-color:var(--light);color:var(--grey);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.light__btn:hover{background-color:var(--grey);color:var(--light)}
.light-border__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--light);background-color:var(--grey);color:#fff;font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.light-border__btn:hover{background-color:var(--light);color:var(--grey)}
.grey__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--grey);background-color:var(--grey);color:var(--light);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.grey__btn:hover{background-color:var(--light);color:var(--grey)}
.grey-border__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--grey);background-color:var(--light);color:var(--grey);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.grey-border__btn:hover{background-color:var(--grey);color:var(--light)}
.yellow__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--yellow);background-color:var(--yellow);color:var(--grey);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.yellow__btn:hover{background-color:var(--grey);color:var(--yellow)}
.yellow__btn i{margin-right:10px}
.yellowlight-border__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--yellow);background-color:var(--light);color:var(--grey);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.yellowlight-border__btn:hover{background-color:var(--yellow);color:var(--light)}
.yellowdark-border__btn{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid var(--yellow);background-color:var(--grey);color:var(--light);font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px;transition:all .4s cubic-bezier(0.075,0.82,0.165,1)}
.yellowdark-border__btn:hover{background-color:var(--yellow);color:var(--grey)}
body{margin:0;padding:0;background:#fff;color:#444;font-family:'Mulish','Open Sans',sans-serif;}

h1,h2,h3,h4{font-family:'Barlow Condensed','Open Sans',sans-serif;}

body,html{height:100%}

p{font-weight:400; line-height: 1.5em;}

/* Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 


.big{color:var(--light);font-size:48pt;font-weight:600;margin-top:32px;margin-bottom:18px;max-width:620px;line-height:1.15em}
.mid{color:#045a89;font-size:24pt;line-height:1.15em;font-weight:600;margin-top:16px;margin-bottom:16px}
.smmid{color:#045a89;font-size:16pt;line-height:1.15em;font-weight:600;margin-top:16px;margin-bottom:16px}
.sml{color:#045a89;font-size:16pt;font-weight:550;margin-top:36px;margin-bottom:16px}
.top{font-size:1rem;max-width:900px}
.top p{color:var(--light);max-width:80%;line-height:1.5em}
.top p a{font-size:15pt;font-weight:550;text-decoration:none}
.top div a i{font-size:25pt;color:#045a89;margin-bottom:5px}
#root{height:100%}
.cont{display:flex;flex-direction:row}
.button{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;border:4px solid #045a89;background-color:#045a89;color:#fff;font-size:12pt;text-shadow:none;font-weight:700;margin-top:20px;margin-right:10px}
.button:hover{transition:background-color .2s linear,background-position .2s ease-in-out;background-color:#004469;border-color:#004469}
.button2{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;padding:16px 32px;color:#045a89;font-size:12pt;font-weight:700;border:4px solid #045a89;text-shadow:none;background-color:#fff;margin-top:20px}
.button2:hover{transition:background-color .2s linear,background-position .2s ease-in-out;background-color:#eceded}
.button3{text-decoration:none;display:inline-block;text-align:center;vertical-align:middle;min-width:156px;min-height:210px;max-width:156px;padding:16px 20px;border-radius:4px;color:#444;font-size:12pt;font-weight:600;border:1px solid #EFEFEF;text-shadow:none;background-color:#FFF;margin-top:20px;margin-right:15px;transition:1s all cubic-bezier(0.25,0.1,0,1.01)}
.button3:hover{box-shadow:#000 0 3px 8px;transform:translateY(-5px);transition:.5s all cubic-bezier(0.25,0.1,0,1.01)}
.main{margin:0;width:100%;overflow:auto}
.logos img{padding:0}

}
.mlogos img{padding:0}
.login{padding-bottom:70px;text-transform:uppercase}
.download{padding-bottom:50px}
.videoWrapper{position:relative;width:100%;height:100%}
.videoWrapper iframe{max-width:600px;width:100%}
.icon{height:100px;width:auto}
.summary{background:url(https://sdg7energyplanning.org/img/summary.png);background-repeat:no-repeat;background-position:center center}
.access{background:url(https://sdg7energyplanning.org/img/acs.png);background-repeat:no-repeat;background-position:center center}
.cooking{background:url(https://sdg7energyplanning.org/img/CC.png);background-repeat:no-repeat;background-position:center center}
.use{background:url(https://sdg7energyplanning.org/img/use.png);background-repeat:no-repeat;background-position:center center}
.summary-b{background:url(https://sdg7energyplanning.org/img/summary-b.png);background-repeat:no-repeat;background-position:center center}
.access-b{background:url(https://sdg7energyplanning.org/img/acs-b.png);background-repeat:no-repeat;background-position:center center}
.cooking-b{background:url(https://sdg7energyplanning.org/img/CC-b.png);background-repeat:no-repeat;background-position:center center}
.use-b{background:url(https://sdg7energyplanning.org/img/use-b.png);background-repeat:no-repeat;background-position:center center}
.health-b{background:url(https://sdg7energyplanning.org/img/health-vaccines-b.png);background-repeat:no-repeat;background-position:center center}

.data{background:url(https://sdg7energyplanning.org/img/icon-datacollection.png);background-repeat:no-repeat;background-position:center center}

.cold-chains{background:url(https://sdg7energyplanning.org/img/icon-coldchains.png);background-repeat:no-repeat;background-position:center center}

.body-section__full{background-color: #272727; color: #ffffff;padding: 0 4.5rem;}
.countryiep  p, .person p, .body-section__full .sponsors {color: #ffffff;margin-block-start:0em;}
.countryiep p, .person p {color: #ffffff;margin-block-start:0em;}
.navbutton button{margin-bottom: 40px;}
#coem li i{font-size: 21px;}
#coem { right: -200px;}
.tool p{margin-block-start:0em;}
.countryiep-flag {width: 100px; height: 100px;}
#tools .tool-banner {width: 200px; height: 100px;}
.tool-banner-text {background-color: #cccccc; align-content: center;text-align: center;}
#tools .section-titles {padding-bottom:40px;}
.countryiep-img, .tool img, .tool-img, .person img {float:left;width: 30%;}
.person img{background-color: #FFB800;border-radius: 100%;}
.person-name{font-weight: 700; color: #FFB800; font-size: 20px;}
.person-banner{border-radius: 100%;}
.person {width:50%; margin-bottom: 60px;}
.person-rule{position:relative;top:20px;float:none;width:90%;margin-bottom: 80px;}
.countryiep-desc, .tool-desc {float:right;width:70%;}
 .person-desc {float:right;width:60%;}
.countryiep-rule {position:relative;top:20px;float:none;width:100%;margin-bottom: 80px;}
.countryiep .countryiep-img a{color: #ffffff; text-decoration: none; font-size: 21px;font-weight: 700;font-family: Barlow Condensed;}
.countryiep p a, .countryiep p a, .body-one a{background-color: #ffffff; color: #272727; text-decoration: none; font-size: 18px; font-family: Barlow Condensed;padding:
5px 10px 7px 10px; margin-top: 8px; letter-spacing: 0.5px; display: inline-block;}
.tool-desc .tool-link, .countryiep .countryiep-link, .body-b { margin-top: 30px;}
.tool p a {background-color: #272727; color: #ffffff;  text-decoration: none; font-size: 18px; font-family: Barlow Condensed;padding:
5px 10px 7px 10px; margin-top: 8px; letter-spacing: 0.5px; display: inline-block;}
.person a {color: #ffffff; text-decoration: none; font-size: 13px;font-weight: 700;}
.countryiep-img a {position:relative;top:-50px;left:10px;}
.section-titles {color #ffffff;font-size: 3.3rem;font-weight: 700;padding-top: 5rem;margin-bottom: 18px;line-height: 1.15em;text-transform: capitalize;}
.body-one{width:25%;background-color: #272727; color: #ffffff;padding:3%;}
.body-one h3{font-size: 24px;font-weight: 700;}

@media only screen and (max-width: 1280px) {
.countryiep-img, .person {width:100%;}
#tools .tool-banner {width: 300px; height: 150px; padding-bottom: 20px;}
.countryiep-desc, .tool-desc {width:100%;}
.tool-banner-text {margin-bottom: 20px;}
}

@media (max-width: 692px){.geapp{padding-top:8px!important}
}
@media screen and (max-width: 1080px){.logos img{width:30%;height:auto}
.logos .powered img{width:50%;height:auto}
}
@media screen and (max-width: 780px){.logos .powered img{width:40%;height:auto}
}
@media screen and (max-width: 1340px){.ng-hero-section{background-image:linear-gradient(45deg,#272727db,#27272775),url(https://sdg7energyplanning.org/img/hero-nigeria.png)}
.ma-hero-section{background-image:linear-gradient(45deg,#272727db,#27272775),url(https://sdg7energyplanning.org/img/hero-malawi.png)}
.hero-section{padding-bottom:100px;background-image:linear-gradient(45deg,#272727db,#2727279c),url(https://sdg7energyplanning.org/img/hero-home.png)}
.body-section__right{justify-content:left}
}
@media (max-width: 768px){.primary__heading{font-size:2.3rem}
.secondary__heading{font-size:20pt}
secondary__heading__mad{font-size:20pt}
.bar{min-width:2rem}
.ng-hero-section{padding:0 2rem;background-image:linear-gradient(45deg,#272727db,#27272775),url(https://sdg7energyplanning.org/img/hero-nigeria.png)}
.ma-hero-section{padding:0 2rem;background-image:linear-gradient(45deg,#272727db,#27272775),url(https://sdg7energyplanning.org/img/hero-malawi.png)}
.hero-section{padding:0 2rem;padding-bottom:100px;background-image:linear-gradient(45deg,#272727db,#2727279c),url(https://sdg7energyplanning.org/img/hero-home.png)}
.hero-section__about{padding:2rem}
.body-section{padding:1rem 1rem 2rem;display:flex;flex-wrap:wrap;justify-content:space-between}
.body-section__right{justify-content:flex-start}
.current__countries{top:-60px;padding:10px 2rem;margin-bottom:-60px}

.user__manual{padding:1rem}
.technical__data{padding:1rem}
}

@media screen and (max-width: 650px){.current__countries{top:-100px;padding:10px 2rem}
.current__countries>ul{margin-top:1rem}
}
@media screen and (max-width: 368px){.current__countries{top:-115px}
.current__countries>ul{margin-top:1rem}
.navbutton{left:5px}
}
footer{width:100%;display:list-item;margin:0;min-height:45px;color:#FFF;background-color:#4c4c4c;border-top:3px solid #FFB800}
@media (min-width: 846px) and (max-width: 1340px){.copyright{width:70%!important}
.social{width:30%!important}
}
.copyright{width:85%}
.copyright p{float:left;color:#FFF;margin:14px 0 14px 20px;font-size:.85rem}
.copyright a{color:#FFB800;font-weight:500}
.copyright a:hover{color:#FFF;transition:all,.3s}
.copyright i{padding-right:7px}
@media (max-width: 845px){footer{display:inline-block}
.copyright{width:100%}
.copyright p{text-align:center;float:initial;margin-left:0;padding:0 10px}
}
.social{width:15%;float:right}
@media (max-width: 845px){.social{width:100%}
}
footer .social a{float:left;line-height:45px;text-decoration:none;color:#fff;text-align:center;font-weight:700}
footer .social a:hover{background-color:#FFB800;transition:all,.3s}
.linked{background-color:#0072b1;font-size:1em;width:20%}
.face{background-color:#3D5B94;font-size:1em;width:20%}
.tweet{background-color:#3DACDD;font-size:1em;width:20%}
.youtube{background-color:red;font-size:1.1em;width:20%}
.instagram{background-color:#C13584;font-size:1.1em;width:20%}