/*Defaults*/
:root {
  --blue: #0054B1;
  --lightblue:#0054B170;
  --green: #7FBE42;
  --lightgreen:#7FBE4270;
  --grey:#707070;
  --lightgrey:#70707070;
  --start-here-text: "Start Here";
}

html, body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}

html {
    font-size: 16px;
}

h2 {
    font-family: 'Roboto Slab', serif;
    color: white;
    font-weight: 500;
    margin: 0;
    font-size: 1.2rem;
}

/*Intro Screen*/
#intro-screen {
    background: #fff;
    width: 100vw;
    height: 120vh;
    position: absolute;
    z-index: 999;
}

#logo{
    margin-top:100px;
    width:250px;
    max-width:50%;
}

#main-title h1{
    text-align:left;
    max-width: 500px;
    font-size:3rem;
    margin:auto;
}

#main-title h1 .indent{
    text-align:right;
}

h1 a{
    text-decoration:none;
    color:#000;
}

#main-title{
    margin-bottom: 30px;
}

.center {
    text-align: center;
}

button.enter {
    background: var(--green);
    margin-top:40px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size:0.8rem;
    border-radius:20px;
    padding:15px;
    filter: drop-shadow(0px 2px 2px #D3D3D3);
    transition: filter 0.4s;
    letter-spacing: .1rem;
}

button.enter:hover{
    filter: drop-shadow(0px 2px 2px #808080);

}

/*Home Screen*/
#home-screen {
    background: #fff;
}



h2.home {
    color: var(--blue);
    margin: 20px 0px 20px 0px;
    font-size:1.5rem;
}

nav{
    padding: 30px 0px 30px 0px;
    display:flex;
    align-items:stretch;
    justify-content:space-between;

}

nav a{
    cursor: pointer;
    aspect-ratio: 1 / 1;
    color: #fff;
    text-decoration: none;
    position:relative;
    transition: all 0.5s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    align-content: center;
    justify-content: center;    
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    flex-wrap: wrap;
    column-gap: 1px;
    padding:30px;
}

nav a div{
    flex-basis: 100%;
    margin-top:30px;
}

nav a:hover, .results-links a.enabled:hover{
  transition: all 0.5s ease;
  filter: drop-shadow(2px 2px 5px #aaa);
}

#home-screen nav .infrastructure:before{
  content: var(--start-here-text);
  position: absolute;
  left: -50px;
  top: 30px;
  color:var(--blue);
  font-weight:900;
  padding-bottom:60px;
  width:5vw;
  max-width:120px;
  background-image: url(img/starthere-sharrow.svg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 60px;
}

nav .infrastructure a:hover::after, nav .infrastructure a:hover::before{
  filter: drop-shadow(0 0 0 #00000000);
}

nav .feedstock{
    /*background: var(--green);*/
    background-image: url("img/feedstock-nav.svg");
}

nav .location{
    /*background: var(--grey);*/
    background-image: url("img/location-nav.svg");
}

nav a.infrastructure{
    /*background: var(--blue);*/
    background-image: url("img/infrastructure-nav.svg");
}

nav a .icon{
    width:30px;
    height:30px;
    margin-top:15px;
}

.on-top{
    z-index: 1;
    position: relative;
}

.results-links{
    display:flex;
    justify-content:center;
    align-items:stretch;
}

.results-links a{
    background:var(--lightgrey);
    text-decoration:none;
    margin:0.5vw;
    margin-bottom:30px;
    padding: 10px min(30px, 5vw) 10px min(30px, 5vw);
    border-radius: 100px;
    color:#fff;
}

#overall-results.enabled{
    background:#e0be04;
}

#infrastructure-results.enabled{
    background:var(--blue);
}

#feedstock-results.enabled{
    background:var(--green);
}


#location-results.enabled{
    background:var(--grey);
}


.results-links .icon{
    width:20px;
    height:20px;
}

/*Content*/

#content {
    max-width:1000px;
    margin: auto;
}

#content p{
    max-width:550px;
    margin:auto;
}

/*Header*/

header {
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
    margin-bottom: 30px;
}

.flex-child {
    flex: 1;
}

.flex-child.title {
    position: relative;
    background: #E3EFD6;
    border-radius: 999px 0 0 999px;
    padding: 10px 0px 10px 20px;
    flex-grow: 2;
}

.flex-child.title:before {
    content: "";
    position: absolute;
    /* fill vertically */
    top: 0;
    bottom: 0;
    width: 9600px;
    left: 100%;
    background: #E3EFD6;
}

h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    margin: 5px;
    font-size: 1.5rem;
    line-height: 85%;
}

h1 .smaller {
    font-size: 1rem;
}

#legal.smaller {
    font-size: 0.8rem;
}

h1 .indent {
    margin-left: 2rem;
}

/*Main Section*/

form {
    margin-top: 30px;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    flex-basis:100%;
}

#subheader{
    display: flex;
    align-items:center;
}

.subhead-title{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 20px;
    margin-left:150px;
    width: 50%;
    block-size: fit-content;
    background: var(--blue);
    border-radius: 0 999px 999px 0;
    text-align:right;
}

.subhead-title:before {
    content: "";
    position: absolute;
    /* fill vertically */
    top: 0;
    bottom: 0;
    width: 9600px;
    right: 100%;
    background: var(--blue);
}

.feedstock-assessment .subhead-title, .feedstock .subhead-title{
    background: var(--green);
}

.feedstock-assessment .subhead-title:before, .feedstock .subhead-title:before{
    background: var(--green);
}

.location-assessment .subhead-title, .location .subhead-title{
    background: var(--grey);
}

.location-assessment .subhead-title:before, .location .subhead-title:before{
    background: var(--grey);
}

.subhead-callout {
    position: relative;
    margin:auto;
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 40px;
    width:510px;
    background-image: url(img/circle-info-solid.svg);
    background-repeat: no-repeat;
    background-position: top 5px left;
    background-size: 30px;
    min-height:35px;
    line-height:1.5;
}

p#more-information{
    margin-top:20px;
}

.subhead-callout a, #more-information a{
    font-weight:900;
    color:#000;
    transition: color 0.3s ease;
}

.subhead-callout a:hover, #more-information a:hover{
    color:var(--green);
    transition: color 0.3s ease;

}


.subhead-callout:empty{
    visibility:hidden;
}

#questionHeader {
    display: flex;
    align-items: center;
    gap: 10px;
}

h3 {
    flex-shrink: 1;
    font-family: 'Roboto Slab', serif;
    color: var(--lightblue);
    font-size: 2rem;
    margin: 10px 0 10px 0;
    display: inline-block;
}

.status-icon{
    height:2em;
    margin:10px;
}

.feedstock-assessment h3, .feedstock h3 {
    color: var(--lightgreen);
}

.location-assessment h3, .location h3 {
    color: var(--lightgrey);
}

#progress-title{
    margin:1px;
    text-transform: uppercase;
}

#progress {
    flex-shrink: 1;
}

#progress-border {
    border: 2px solid var(--blue);
    width: 200px;
    height: 15px;
    border-radius: 999px;
}

#progress-bar {
    height: 15px;
    background: var(--lightblue);
    border-radius: 999px;
    min-width: 10%;
}

.feedstock-assessment #progress-border {
    border: 2px solid var(--green);
}

.feedstock-assessment #progress-bar {
    background: var(--lightgreen);
}

.location-assessment #progress-border {
    border: 2px solid var(--grey);
}

.location-assessment #progress-bar {
    background: var(--lightgrey);
}

.break {
  flex-basis: 100%;
  height: 1px;
}

#questionContainer {
    display:flex;
    flex-wrap: wrap;
    max-width: 700px;
    margin: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#questionContainer.fadeout {
    opacity: 0;
}

button {
    background: none;
    color: var(--green);
    font-size: inherit;
    font-weight: 900;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: inherit;
    margin-top: 25px;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
}


button.prev .icon {
    background-image: url(img/rew.svg);
}

button.download .icon {
    background-image: url(img/download.svg);
}

button.end .icon {
    background-image: url(img/ffw.svg);
}

button#next-section .icon {
    background-image: url(img/ffw.svg);
}

button.restart .icon {
    background-image: url(img/restart.svg);
}

button span.icon{
    width:20px;
    height:15px;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: center bottom -2px;;
}

input[type="radio"] {
    text-align: center;
    visibility: hidden;
}

.bottom{
    max-width:550px;
    display:flex;
    justify-content:space-between;
    margin:auto;
}


#options label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--grey);
    border-radius: 30px;
    width: 45px;
    height: 45px;
    padding: 8px;
    color: #fff;
    transition: background-color 0.5s ease;

}

#options label[for="maybe"]:hover,
#options input[value="maybe"]:checked+label {
    background: #F7D518;
    transition: background-color 0.5s ease;
}

#options label[for="no"]:hover,
#options input[value="no"]:checked+label, #options label[for="neither"]:hover,
#options input[value="neither"]:checked+label {
    background: #FF4501;
    transition: background-color 0.5s ease;
}

#options label[for="yes"]:hover,
#options input[value="yes"]:checked+label {
    background: #42BE43;
    transition: background-color 1s ease;
}

#options label[for="renewable natural gas"]:hover,
#options input[value="renewable natural gas"]:checked+label, #options label[for="renewable electricity"]:hover,
#options input[value="renewable electricity"]:checked+label {
    background: var(--blue);
    transition: background-color 1s ease;
}

#options label[for="renewable natural gas"],
#options label[for="renewable electricity"] {
    width: 100px;
}

#options {
    display: flex;
    justify-content: space-evenly;
    flex-basis: 100%;
}

#options input{
    position: absolute;
}

#content.final-results .text p{
    margin-top:30px;
    margin-bottom:30px;
}

/*#questionContainer .text li {
  list-style-type: none;
  background-image: url(img/sticky-note-solid.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
  padding-left: 30px;
  line-height: 1.5;
  padding-bottom:15px;
}*/

.next-section{
    text-align:center;
}

.semi-circle {
    position: fixed;
    bottom: 0;
    z-index:0;
}

#circle1 {
    width: 30vw;
    height: 15vw;
    max-width: 516px;
    max-height: 258px;
    background-color: #E2EED460;
    border-radius: 15vw 15vw 0 0;
    left: 10%;
}

#circle2 {
    width: 20vw;
    height: 20vw;
    max-width: 344px;
    max-height: 344px;
    background-color: #E2EED4;
    border-radius: 10vw 10vw 10vw 10vw;
    right: 10%;
    bottom: -5vw;
}

#circle3 {
    width: 10vw;
    height: 5vw;
    max-width: 172px;
    max-height: 86px;
    background-color: #C9E0AD;
    border-radius: 5vw 5vw 0 0;
    right: 25%;
}

p#final-results-intro{
    max-width:none;
    padding:10px 0px 20px 0px;
}

.infrastructure-callout{
    background: var(--lightblue);
    padding:15px;
    border-radius: 15px;
    margin-top:20px;
}

footer {
    display: flex;
    align-items: center;
    justify-content:space-around;
    flex-wrap: wrap;
}

.footerLogo{
    margin-top:30px;
    height:70px;
}

.footerLogo.canada{
    height:40px;
}

.assessment nav{
    display: block;
    text-align:center;
}

.assessment nav a{
    display: inline-block;
    margin:2px;
    cursor: pointer;
    border-radius:50%;
    width: 20px;
    height: 20px;
    padding: 10px;
    transition: all 0.5s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em;
}

.assessment nav a:hover{
  transition: all 0.5s ease;
  filter: drop-shadow(2px 2px 5px #aaa);
}

.assessment nav .feedstock{
    background-color: var(--lightgreen);
    background-image: url(img/feedstock-icon.svg);
}

.assessment nav .location{
    background-color: var(--lightgrey);
    background-image: url(img/location-icon.svg);
}

.assessment nav a.infrastructure{
    background-color: var(--lightblue);
    background-image: url(img/infrastructure-icon.svg);
}

.assessment nav .feedstock:hover, .feedstock-assessment .assessment nav .feedstock{
    background-color: var(--green);
}

.assessment nav .location:hover, .location-assessment .assessment nav .location{
    background-color: var(--grey);
}

.assessment nav a.infrastructure:hover, .infrastructure-assessment .assessment nav .infrastructure{
    background-color: var(--blue);
}

.language-toggle{
    margin-top:30px;
    font-size:0.8rem;
}

.language-toggle select {  
  background-color:var(--lightgreen);
  color:var(--grey);
  border-radius:3px;
  border:none;
  font-size:0.8rem;
  padding: 5px 5px 5px 5px;
    font-family: 'Montserrat', sans-serif;
  // disable default appearance
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  &::-ms-expand { display: none };
}

  img {
        page-break-before: auto;
        page-break-after: auto; 
        page-break-inside: avoid;
        position: relative;
    }

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

#home-screen nav .infrastructure:before{
  content: "";
  position: absolute;
  right: 120px;
  top: 30px;
  color:var(--blue);
  font-weight:900;
  padding-bottom:60px;
  width:10vw;
  max-width:120px;
  background:none;
}

#home-screen nav .infrastructure:after{
  content: var(--start-here-text);
  text-align:right;
  position: absolute;
  right: 0px;
  bottom: -20px;
  color:var(--blue);
  font-weight:900;
  padding-top:30px;
  width:12vw;
  max-width:120px;
  background-image: url(img/starthere-sharrow-flip.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 20px;
}

@media screen and (max-width: 740px) {
    #content {
        max-width:96%;
    }
    #questionContainer {
    max-width: 96%;
}

#home-screen nav {
      padding-top:10px;
}

#home-screen nav a{
      font-size:0.60rem;
}

.results-links a{
      font-size:0.60rem;
}

nav a .icon{
    width:10px;
    height:10x;
    margin-top:0px;
}

footer {
    flex-direction: column;
}

.language-toggle{
    order: -1;
}
}