/*Defaults*/
:root {
  --mainblue: #0079C1;
  --maingreen: #7fbe42;
  --maingrey: #707070;
  --halfblue: #0079C150;
  --halfgreen: #7fbe4250;
  --halfgrey: #70707050;
  --lightblue:#E0EFF8;
  --green: #7FBE42;
  --lightgreen:#7FBE4270;
  --grey:#707070;
  --lightgrey:#70707070;
  --start-here-text: "Start Here";
  --blue: #0054B1;
  --white: #ffffff;
}

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;
}

#intro-screen{
    top: 0vh;
}

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

#main-title h1 .smaller {
    font-size: 0.7em;
    margin-left: -50%;
    line-height: 1.6;
}


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

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

h1 a{
    text-decoration:none;
    color: var(--mainblue);
}

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

.center {
    text-align: center;
}

button.enter {
    background: var(--mainblue);
    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(--mainblue);
    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(--mainblue);
  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 .connecting{
    background-image: url("img/connecting-nav.svg");
}

nav .building{
    background-image: url("img/building-nav.svg");
}

nav a.infrastructure{
    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(--mainblue);
}

#connecting-results.enabled{
    background:var(--maingreen);
}


#building-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.graphic {
    position: relative;
    max-width:200px;
}

.flex-child {
    flex: 1;
}

.flex-child.title {
    position: relative;
    background: var(--lightblue);
    border-radius: 999px 0 0 999px;
    padding: 10px 0px 10px 20px;
    margin-left: 20px;
    flex-grow: 2;
}

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

h1 {
    font-family: 'Roboto Slab', serif;
    color: var(--mainblue);
    font-weight: 500;
    margin: 5px;
    font-size: 1.1em;
    line-height: 85%;
}

h1 .smaller {
    font-size: 0.7em;
}

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

h1 .indent {
    margin-left: 1em;
}

/*Main Section*/

form {
    margin-top: 30px;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-around;
    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(--mainblue);
    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(--mainblue);
}

p#callout, .connecting-assessment .q4 p#text{
    background: var(--halfblue);
    padding:10px;
    margin-top:5px;
    margin-bottom:5px;
    border-radius: 5px;
}

.connecting-assessment p#callout, .connecting-assessment .q4 p#text {
    background: var(--halfgreen);
}

.connecting-assessment p#callout h3{
    color:var(--maingreen);
    font-size: 1.5rem;
    
}

.building-assessment p#callout {
    background: var(--halfgrey);
}

.callout{
    margin-top:10px;
}

p#callout:empty, .callout:has(p#callout:empty){ display: none; }

#callout::before {
    display:inline-block;
    content: "";
    width: 40px;
    height:40px;
    background-image: url('img/info.svg');
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

.connecting-assessment .subhead-title, .connecting .subhead-title{
    background: var(--maingreen);
}

.connecting-assessment .subhead-title:before, .connecting .subhead-title:before{
    background: var(--maingreen);
}

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

.building-assessment .subhead-title:before, .building .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(--maingreen);
    transition: color 0.3s ease;

}


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

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

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

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

.connecting h3, .connecting h3 {
    color: var(--white);
}

.building h3, .building h3 {
    color: var(--white);
}

p#progress-title{
    margin:auto;
    margin-top:30px;
    text-transform: uppercase;
    font-weight:bold;
}

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

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

.connecting #progress-border {
    border: 2px solid var(--maingreen);
}

.connecting #progress-bar {
    background: var(--halfgreen);
}

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

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

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

#questionContainer {
    display:flex;
    column-gap:10px;
}


#question {
    display:flex;
    flex-wrap: wrap;
    max-width: 680px;
    margin: auto;
    margin-bottom:30px;
    margin-top:30px;
    opacity: 1;
    transition: opacity 0.3s ease;
    align-content:flex-start;
}

#question.fadeout {
    opacity: 0;
}

button {
    background: none;
    color: var(--mainblue);
    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;
    max-width: 190px;
    min-width: 45px;
    height: 45px;
    padding: 8px;
    margin-top:5px;
    color: #fff;
    transition: background-color 0.5s ease;
}

#options label:hover,
#options input:checked+label {
    background: var(--mainblue);
}

.connecting-assessment #options label:hover,
.connecting-assessment #options input:checked+label {
    background: var(--maingreen);
}

.building-assessment #options label:hover,
.building-assessment #options input:checked+label {
    background: var(--maingreen);
}

#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="Outsource negotiations"]:hover,
#options input[value="Outsource negotiations"]:checked+label,#options label[for="Learn or hire the skills"]:hover, #options input[value="Learn or hire the skills"]:checked+label  {
    background: var(--mainblue);
    transition: background-color 1s ease;
}

.building-assessment .q3 #options label {
    width: 120px;
}

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

#options input{
    position: absolute;
}

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

#question .text, #question #text{
    margin-top: 30px;
}

.hover-icon{
    height:1em;
}

.hover-callout{
    display:none;
  position: absolute;
  background: #e0eff7;
  padding:10px;
  border-radius: 10px;
  z-index: 3;
box-shadow: 2.6px 5.3px 5.3px hsl(0deg 0% 0% / 0.42);
    max-width:540px;
}

.hover-text:hover + .hover-callout, .hover-text:active + .hover-callout {
  display: block;
}

/*#question .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: #0079C160;
    border-radius: 15vw 15vw 0 0;
    left: 10%;
}

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

#circle3 {
    width: 10vw;
    height: 5vw;
    max-width: 172px;
    max-height: 86px;
    background-color: #0079C130;
    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 .connecting{
    background-color: var(--halfgreen);
    background-image: url(img/connecting-icon.svg);
}

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

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

.assessment nav .connecting:hover, .connecting-assessment .assessment nav .connecting{
    background-color: var(--maingreen);
}

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

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

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

.language-toggle select {  
  background-color:var(--lightblue);
  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(--mainblue);
  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(--mainblue);
  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) {
    #questionContainer{
        flex-direction: column;
    }

    #content {
        max-width:96%;
    }
    
    #options {
    flex-wrap: wrap;
}

    #question {
    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:10px;
    margin-top:0px;
}

footer {
    flex-direction: column;
}

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