@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,700|Montserrat:400,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    font-family: 'Libre Franklin', sans-serif;
    height: 100%;
    color: #023146;
      scroll-behavior: smooth;


    /*    background-color: lightgreen;*/
}



/* ============ H2s ============ */

h2 {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
}

/*ENGLISH FRENCH*/

div#enFr {
    position:absolute;
    left:0;
    margin:8px;
    color:black;
    z-index:10;
    top:3px;
    display:flex;
    width:55px;
    margin-left:2.5vw;
    justify-content: space-around;
    font-size:9px;
    font-weight:600;
    color:lightgrey;
    
}

div#enFr a {
    font-size:9px;
    font-weight:700;
    text-decoration:none;
    color:lightslategrey;
   
}

div#enFr a:hover {
   color: #023146;
    transition:all 0.23s;
    text-decoration:underline;

   
}
/* ============ NAV ============ */

nav {
    background-color: rgba(255, 255, 255, .97);
    height: 80px;
    position: fixed;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px 0px 30px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, .08);

}

nav div#logo {
    /*    background-color: burlywood;*/
    width: 290px;
    height: auto;
    margin-top:10px;
}

nav div#logo img {
    width: 100%;
}

nav div#links {
    display: flex;
    align-items: center;

}

nav div#links a {
    padding: 4px;
    margin: 0px 1.3vw;
    font-size: 11px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    /*    max-width: 130px;*/
    transition: all .13s;

}

/* unvisited link */
nav div#links a:link {
    color: #457c9f;

}

/* visited link */
nav div#links a:visited {
    color: #457c9f;
}

/* mouse over link */
nav div#links a:hover {
    color: #759391;
}

/* selected link */
nav div#links a:active {
    color: #759391;
}



/* ============ NAV MOBILE ============ */

div#ham {
    z-index: 2;
    position: fixed;
    height: 60px;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80px;
    right: 0;
    padding: 30px;
    margin-top:16px;
    margin-right:10px;
    cursor: pointer;
    font-size: 11px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
        max-width: 130px;
}

div#ham p {
    border:solid 1px #023146;
    border-radius:30px;
    padding: 10px;
    transition: all .13s;
        background-color: white;

}

div#ham p:hover {
    background-color: #023146;
    color: #f8f4e3;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    background-color: #457c9f;
    overflow-x: hidden;
    transition: all 0.5s;
    padding-top: 60px;
    box-shadow: -4px 0px 12px rgba(2, 49, 70, .1);
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    font-size: 16px;
    margin-bottom: 70px;
    padding-left: 50px;
    color: #f8f4e3;
    display: block;
    transition: 0.3s;
    font-family: 'Montserrat';
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;

}

.sidenav a:hover {
    color: #023146;
}

.sidenav .closebtn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #023146;
}

.sidenav .closebtn:hover {
    color: #f8f4e3;
}

/* ============ OVERLAY ============ */

#overlay {
    position: fixed;
    display:none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(2, 49, 70, 0.8);
    z-index: 2;
    cursor: pointer;
    transition: all 1s;}

#overlay::-webkit-scrollbar { 
       width: 0;
    height: 0;
}


#x {
    color: white;
    left: 0;
    position: absolute;
    margin: 55px;
    font-size: 38px;
    font-weight: 900;
    text-shadow: 1px 1px 0px rgba(2, 49, 70, 1);
}

#x a:hover {
    color: #ecba34;
    transition: all 0.75s;
}

iframe {
    margin-top: 75px;
}

/* ============ SECTIONS LINKS ============ */

section p {
    line-height: 1.6;
}

section a {
    transition: all .13s;
}

/* unvisited link */
section a:link {
    color: #759391;
}

/* visited link */
section a:visited {
    color: #759391;
}

/* mouse over link */
section a:hover {
    color: #ecba34;
}

/* selected link */
section a:active {
    color: #ecba34;
}


/* ============ SECTION 1 - HEADER ============ */

section#s1 {
    /*    background-color: crimson;*/
    height: 50%;
    min-height: 430px;
    margin-bottom: 50px;
}

section#s1 div#headerimg {
    height: 60%;
    /*    border: 3px solid orange;*/
    background-image: url(../images/header.svg);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

section#s1 div#header1 {
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

section#s1 div#header1 h1 {
    width: 66%;
    font-size: 4.75vw;
    letter-spacing: .5px;
    font-family: 'Montserrat';
    font-weight: 700;
    text-align: center;
}



/* ============ SECTION 2 - ENERGY POVERTY ============ */

section#s2 {
    /*    background-color: darkorange;*/
    /*    height:70%;*/
    min-height: 400px;
    position: relative;
    width: 100%;

}

section#s2 div#rightmap {
    position: absolute;
    top: -5%;
    right: 0;
    /*    border: 3px solid blue;*/
    height: 150%;
    width: 20vmax;
    background-image: url(../images/rightmap.svg);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
}

section#s2 div#leftmap {
    position: absolute;
    top: 50%;
    /*    border: 3px solid blue;*/
    height: 195%;
    width: 15vmax;
    background-image: url(../images/leftmap.svg);
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
}

section#s2 div#s2content {
    width: 70%;
    max-width: 1000px;
    margin-left: 13%;
    padding: 3vmax 0 0vmax 0;
}

section#s2 div#s2content h2 {
    font-size: 27px;
    padding-bottom: 20px;
    color: #e25830;
}

section#s2 div#s2content p {
    font-size: 17px;
    padding-bottom: 20px;

}

section#s2 div#s2content b {
    font-size: 19px;
}

section#s2 div#s2content ul {
    font-size: 17px;
    margin-left: 40px;
}

section#s2 div#s2content li {
    padding: 0px 0px 10px 0px;
}


/* ============ SECTION 3 - MEASURING ENERGY POV. ============ */

section#s3 {
    /*    background-color: palegoldenrod;*/
    /*    height:120%;*/
    min-height: 600px;
}

section#s3 div#s3content {
    /*    background-color: aliceblue;*/
    width: 65%;
    max-width: 950px;
    margin-left: 23%;
    /*
    position: relative;
    top: 50%;
    transform: translateY(-50%);
*/
    padding: 5vmax 0;

}

section#s3 div#s3content h2 {
    font-size: 27px;
    padding-bottom: 20px;
    color: #ecba34;
}

section#s3 div#s3content p {
    font-size: 17px;
    padding-bottom: 25px;
}


/* ============ SECTION 4 - END IMG ============ */

section#s4 img {
    width: 100%;
}

section#s4 {
    /*    border: 5px solid yellowgreen;*/
    height: 1vh;
}



/* ============ VIDEOS ============ */



#fade1, #fade2, #fade3, #fade4, #fade5, #fade6 {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #023146;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=97);
}

#light1, #light2, #light3, #light4, #light5, #light6 {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

.vidh3 {
    padding: 15px;
}

#boxclose1, #boxclose2, #boxclose3, #boxclose4, #boxclose5, #boxclose6 {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade1:hover ~ #boxclose1 {
  display:none;
}


#fade2:hover ~ #boxclose2 {
  display:none;
}

#fade3:hover ~ #boxclose3 {
  display:none;
}

#fade4:hover ~ #boxclose4 {
  display:none;
}

#fade5:hover ~ #boxclose5 {
  display:none;
}

#fade6:hover ~ #boxclose6 {
  display:none;
}


.test:hover ~ .test2 {
  display: none;
}

video {
    width: 90vmin;
}





/* ============ TOOL ANCHOR ============ */

div#toolAnchor {
    height: 60px;
    top: -60px;
    position: absolute;
}


/* ============ SECTION 5 - MAPPING TOOL ============ */

section#s5 {
/*        background-color: skyblue;*/
    height: 35%;
    padding: 30px;
    position: relative;
    margin-bottom:0;
}



section#s5 div#toolBar {
    background-color: #e25830;
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
/*    align-items: center;*/
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px 20px 0px 20px;
    font-size: 11px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    /*    max-width: 130px;*/
    transition: all .13s;
/*        z-index: 5;*/
}

section#s5 div.toolSeparate {
    display: flex;
    align-items: center;
/*    background-color: blue;*/
    
}


section#s5 div#toolBar p {
    padding-right: 40px;
} 

section#s5 div#toolBar a {
    padding-right: 40px;
    color: white;
    text-decoration: none;
}


    section#s5 div.toolSeparate {
    padding: 15px 0px;

}   

section#s5 div#toolBar a:hover {
    color: #023146;
}


section#s5 div#toolBar a:visited  {
    color: white;
}



section#s5 div#toolContain {
    width: 100%;
    height: 100%;
    background: #023146;
    background-image: url(../images/map.jpg);
    background-size: cover;
    padding: 30px;
    position: relative;
    outline: 8px solid #e25830;
  outline-offset: -8px;

}



section#s5 div#toolContain h2 {
    text-align: center;
    font-size: 3vw;
    letter-spacing: .5px;
    font-family: 'Montserrat';
    font-weight: 700;
    color: white;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

section#s5 #mapOverlayButton {
    padding: 8px 15px;
    margin: 4% 0px;
    border: #457c9f solid 1px;
    border-radius: 30px;
    color: #457c9f;
    text-transform: uppercase;
    font-size: 10px;
    transition: all 0.5s;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

section#s5 #mapOverlayButton:hover {
    background-color: #e25830;
    border: white 1px solid;
    color: white;
}






/* ============ SECTION 6 - LIMITATIONS ============ */

section#s6 {
    background-color: #023146;
    color: #f8f4e3;
    min-height: 100px;
    height: auto;
    padding-bottom: 10px;
    margin-top:0;
    display: inline-block;
}


div#s6fade {
    height: 200px;
    width:100%;
    background-image: linear-gradient(white 10%, #023146);
    background-repeat: no-repeat;
    display: block;
    margin-top: 50px;
}

section#s6 div#s6content {
    width: 75%;
    margin: 0px 13%;
    padding: 10vmax 0px;
    position:relative;
}

section#s6 div#s6content h2 {
    font-size: 23px;
    padding-bottom: 5px;
    width: 75%;
/*    background-color:red;*/
}

section#s6 div#s6content div#s6columns {
    display: flex;
    font-size: 14px;
}

section#s6 div#s6content div#s6columns ul {
    padding: 0px 5%;
    width: 50%;
}

section#s6 div#s6content div#s6columns li {
    padding-top: 25px;
}

/* ============ SECTION 7 - RESOURCES AND PUBS. ============ */

section#s7 {
    /*    background-color: pink;*/
    min-height: 700px;
}

section#s7 div#s7content {
    /*    background-color: aliceblue;*/
    width: 66%;
    margin: 0px 17%;
    padding: 7vmax 0px;
}

section#s7 div#s7content h1 {
    font-size: 3.5vw;
    margin-top: 50px;
    margin-bottom: 70px;
    letter-spacing: .5px;
    font-family: 'Montserrat';
    font-weight: 700;
}


section#s7 div#s7content div#s7one {
    /*    background-color: lightyellow;*/
    margin-bottom: 80px;
}

section#s7 div#s7content h2 {
    margin-bottom: 30px;
}

section#s7 div#s7content h3 {
    background-color: #e25830;
    padding: 50px 30px;
    color: white;
    font-size: 3.2vmax;
    margin-top: 10vh;
    text-align: center;
}

section#s7 div#s7content div#s7one h2 {
    color: #ecba34;
    margin-top: 90px;
}

section#s7 div#s7content div#s7one div#highPubs {
    /*    background-color: green;*/
    display: flex;
    position: relative;
    margin-bottom: 30px;
}

section#s7 div#s7content div#s7one div#highPubs div#pubsImg {
    width: 30vmin;
    height: auto;
}

div#pubsImg img {
    width: 100%;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);

}

section#s7 div#s7content div#s7one div#highPubs p {
    align-self: flex-end;
    /*    background-color: papayawhip;*/
    margin-left: 20px;
    margin-bottom: 60px;
    width: 50%;
    /*    color:blue;*/
}

/*div#highPubs p {}*/

p#resAll {
    text-align: right;
    margin-top: 25px;
}

section#s7 div#s7content div#s7two {
    margin-top: 130px;
}

section#s7 div#s7content div#s7two div#resourcesBox {
    /*    background-color: cornflowerblue;*/
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

section#s7 div#s7content div#s7two div#resourcesBox div.r1 {
    /*    background-color: beige;*/
    width: 30%;
}

section#s7 div#s7content div#s7two div#resourcesBox h4 {
    /*    background-color: beige;*/
   color: #ecba34;
    margin-bottom:10px;
    font-size: 18px;
}

section#s7 div#s7content div#s7two div#resourcesBox .noMarg {
    width: 30%;
}

section#s7 div#s7content div#s7two p#resAll {
    text-align: right;
    margin-top: 25px;
}

section#s7 div#s7content div#s7two h2 {
    color: #457c9f;
}

button#pubsCTA,
button#blogButton {
    padding: 8px 15px;
    margin-top: 20px;
    border: #457c9f solid 1px;
    border-radius: 30px;
    color: #457c9f;
    text-transform: uppercase;
    font-size: 10px;
    transition: all 0.5s;
}

button#pubsCTA a {
    color: #457c9f;
    text-decoration: none;
}

button#pubsCTA:hover,
button#blogButton:hover {
    background-color: #ecba34;
    border: white 1px solid;
    color: white;
}


button#pubsCTA:hover a {
    color: white;
}


/* ============ SECTION 8 - CONTACT ============ */

section#s8 {
      min-height: 300px;
    background-color:#457c9f;
}

section#s8 div#s8content {
/*    background-color: aliceblue;*/
    width: 66%;
    margin: 0px 17%;
    padding: 7vmax 0px 10vmax;
    
}

section#s8 div#s8content h1 {
    font-size: 3.5vw;
    margin-top: 50px;
    margin-bottom: 50px;
    letter-spacing: .5px;
    font-family: 'Montserrat';
    font-weight: 700;
    color:#033146;
}

section#s8 div#s8content p {
    color:beige;
}

section#s8 div#s8content b {
    font-weight:550;
    
}

section#s8 div#s8content p a{
    color:#ecba34;
    transform:all 0.13s;
}

section#s8 div#s8content p a:hover{
    color:#033146;
}


/* ============ SECTION 9 - FOOTER ============ */

section#s9 {
    background-color: beige;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding: 25px;
    margin-top: 0;
    font-size: 12px;
}

section#s9 p {
    padding:10px;
    margin:20px;   
}

section#s9 img {
    width:100%;
    max-width:190px;
    padding-right:40px;
    margin-top:10px;
}

section#s9 #cuspLogoStacked {
    width:65%;
    max-width:140px;
    margin-top:
}

section#s9 p#acknowl {
    flex-shrink:6;
    max-width: 1000px;
}
section#s9 #govLogo {
    width:60%;
    max-width:130px;    
}





/* ============ MEDIA QUERIES  ============ */


@media only screen and (max-width: 1100px) {



    nav div#links {
        display: none;
    }

    nav div#logo {
        /*    background-color: burlywood;*/
        width: 200px;
        height: auto;
        margin-left: -10px;
    }
    
    .sidenav a {
        font-size:14px;
        margin-bottom: 40px;
            padding-left: 35px;

    }
    
    iframe {
        margin-top:140px;
    }
    

    section#s1 div#header1 h1 {
        font-size: 7.6vmin;
        margin-top: 130px;
    }

    section#s2 div#s2content {
        width: 60%;
    }

    section#s2 div#s2content h2 {
        font-size: 24px;
    }

    section#s2 div#s2content p {
        font-size: 14px;
    }

    section#s2 div#s2content b {
        font-size: 18px;
    }

    section#s2 div#s2content ul {
        font-size: 14px;
    }

    section#s2 div#rightmap {
        width: 20vw;
        background-position: left;
        background-size: contain;
        top: -28%;
    }

    section#s2 div#leftmap {
        width: 18vw;
        background-position: right;
        background-size: contain;

    }


    section#s3 div#s3content {
        width: 60%;
        margin-left: 25%;
    }

    section#s3 div#s3content h2 {
        font-size: 24px;
    }

    section#s3 div#s3content p {
        font-size: 14px;
    }
    
    section#s5 {
    height: 60%;
    }
    
    
section#s5 div.toolSeparate {
    flex-wrap: wrap;
    }
    
    section#s5 div#toolContain { 
    padding: 10px 0px;
    }
    
    
    section#s5 div#toolContain h2 {
    font-size: 4vw;

}

section#s5 #mapOverlayButton {
    padding: 10px 18px;
    font-size: 13px;
    top: 65%;

}
    
    .toolSeparate a, .toolSeparate p {
     padding-bottom: 25px;
        
    }
    
    
    div#s6fade {

    margin-top: 200px;
}
    
    

    section#s6 div#s6content h2 {
        font-size: 19px;
        color:#ecba34;
    }
    
    


    section#s6 div#s6content div#s6columns {
        flex-direction: column;
    }

    section#s6 div#s6content h2 {
        width: 100%;
    }

    section#s6 div#s6content div#s6columns ul {
        width: 100%;
    }
    
    
    section#s7 div#s7content div#s7one div#highPubs div#pubsImg {
    box-shadow: none;
    }

    section#s7 div#s7content p {
        font-size: 14px;
    }

    section#s7 div#s7content h1 {
        font-size: 6vw;
    }

    section#s7 div#s7content h2 {
        font-size: 20px;
    }

    section#s7 div#s7content div#s7two div#resourcesBox {
        flex-direction: column;
    }

    section#s7 div#s7content div#s7two div#resourcesBox div.r1 {
        width: 100%;
        margin-top: 30px;
    }

    section#s7 div#s7content div#s7two div#resourcesBox .noMarg {
        width: 100%;
        margin-top: 0px;
    }

    
    section#s8 div#s8content h1 {
    font-size: 40px; }

    section#s8 p {
        flex: 1;
    }

    
    section#s8 div#s8content h1 {
    font-size: 36px; }
    
    section#s8 div#s8content p {
    font-size: 15px; }
    
        
    section#s9 {
        flex-wrap: wrap;
    }

    div#ham {
        display: flex;
    }


}



/* ========= SMALL SMALLS ========= */

@media only screen and (max-width: 340px) {

    
    div#rightmap {
        display: none;
    }
    
    div#leftmap {
        display: none;
    }
    
    section#s1 div#header1 h1 {
        font-size: 10vmin;
        margin-bottom: 40px;
    }
    
    section#s2 div#s2content {
        width: 80%;
        margin-left: 10%;
    }

    section#s2 div#s2content h2 {
        font-size: 20px;
    }

    section#s2 div#s2content p {
        font-size: 13px;
    }

    section#s2 div#s2content b {
        font-size: 16px;
    }

    section#s2 div#s2content ul {
        font-size: 13px;
    }

    
    
    
    section#s3 div#s3content {
        width: 80%;
        margin-left: 10%;
    }

    
    section#s3 div#s3content h2 {
        font-size: 20px;
    }

    section#s3 div#s3content p {
        font-size: 13px;
    }

    section#s3 div#s3content b {
        font-size: 16px;
    }

    section#s3 div#s3content ul {
        font-size: 13px;
    }
    
    
     section#s5 div#toolContain h2 {
    font-size: 4.5vw;

}
    
    section#s5 #mapOverlayButton {
        top: 65%;
    }
    
    
    .toolSeparate a, .toolSeparate p {
     padding-bottom: 25px;
        
    }
    
    section#s5 {
    padding: 25px; 
    }
    
    
    section#s5 div.toolSeparate {
    flex-wrap: wrap;
    }
    
    section#s6 div#s6content {
    width: 80%;
    margin: 0px 10%;
    padding: 7vmax 0px;
        height:auto;
    }
    
    div#s6fade {
        height: 130px;
    margin-top: 950px;
    }
    
    section#s6 div#s6content h2 {
        font-size: 16px;
       
    }
    
    section#s6 div#s6content ul {
        font-size: 13px;
    }
    

    

    section#s7 div#s7content p {
        font-size: 12px;
    }


     section#s7 div#s7content h1 {
        font-size: 8.4vw;
         margin-bottom: -30px;
    }

    section#s7 div#s7content h2 {
        font-size: 16px;
    }
    
    section#s7 div#s7content h3 {
        margin-top: 100px;
    }
    
    button#pubsCTA,
button#blogButton {
    padding: 6px 13px;
    font-size: 9px;
}


    section#s8 div#s8content h1 {
    font-size: 32px; }
    
    section#s8 div#s8content p {
    font-size: 13px; }

}