@font-face {
    font-family: BentonBold;
    src: url("../fonts/BentonSans-Bold.otf") format("opentype");
    }

      @font-face {
    font-family: BentonRegular;
    src: url("../fonts/BentonSans-Regular.otf") format("opentype");
    }


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
     #title, #intro {
       width:400px !important;
    }

    #title {
        font-size: 20px !important;
     line-height: 22px !important;
     }

     #intro {
        font-size: 10px !important;
     line-height: 13px !important;
     }

}




@media screen and (max-width: 600px) {
     #containerbackground1 {
         background-image: url(../images/background-portrait.jpg) !important;
    }
     #containerbackground2 {
         background-image: url(../images/background2-portrait.jpg) !important;
    }
     .hot-spot {
         width: 7% !important;
         height: 4% !important;
    }
     #greenbar {
         width:100% !important;
         height:80px !important;
    }
     #logo {
         width:22% !important;
         padding-top:7px !important;
    }

    #toggle {
        right:0px !important;
        position: absolute !important;
        top:50% !important;
        transform: translateY(-50%) !important;
        padding-right:20px !important;
        padding-top:0px !important;
    }
    
     #splashcopy {
         top:56% !important;
         left:50% !important;
         transform: translate(-50%,-50%) !important;
         
    }
    #title, #intro {
       width:305px !important;
    }
  
     #arrows-container {

          width:100% !important;
         height:30px !important;
         bottom:5.3% !important;
         
     }

     #button {
        font-size: 13px !important;
     }

     #title {
        font-size: 24px !important;
     line-height: 26px !important;
     }

     #intro {
        font-size: 11px !important;
     line-height: 13px !important;
     }

     #tagline {
        bottom:10px !important;
     }



#rightarrow, #leftarrow {
    top:50% !important;
     left:5% !important;
     transform: translate(-5%,-50%) !important;

}
      



      #one {
         top: 40% !important;
         left: 57% !important;
    }

    #two {
        top: 30% !important;
         left: 40% !important;

    }

     #three {
       top: 56% !important;
         left: 77% !important;

    }

    #four {
       top: 15% !important;
         left: 45% !important;

    }

    #nine {
    top: 70% !important;
    left: 20% !important;
}
}



 html, body {
     margin: 0;
     width: 100%;
     height: 100%;
}


 .container {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
     display:none;

     -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 #containerbackground1 {
     width: 100%;
     height: 100%;
     position: absolute;
     background-image: url(../images/back.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
     z-index: 2;
}
 #containerbackground2 {
     width: 100%;
     height: 100%;
     position: absolute;
     background-image: url(../images/back2.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     overflow: hidden;
     z-index: 1;
}
 .hot-spot--container {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 3;
}
 .hot-spot {
     background-color: red;
     position: absolute;
     width: 2.8%;
     height: 4%;
     border-radius:50%;
     opacity: 0;
     z-index: 400;
     cursor: pointer;
}
 .pop {
    position: absolute;
    z-index: 500;
    pointer-events: none;
    width:15px;
    height:15px;


    
}

.outerpop {
  width:21px;
     height:21px;
     background-color: rgba(255,0,0,0);
     border-radius: 50%;
     position: absolute;
     
     left:-5px;
     top:-5px;
     border: 2px solid;
     border-color: rgba(255,255,255,0.5);
     -webkit-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
-moz-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
     

}
 .innerpop {
  position: absolute;
     width:15px;
     height:15px;
     background-color: White;
     border-radius: 50%;
         -webkit-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
-moz-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
     
}
 #one {
     top: 36%;
     left: 73%;
}
 #two {
     top:25%;
     left:60%;
}
 #three {
     top:55%;
     left:85%;
}
 #four {
     top:35%;
     left:45%;
}
 #five {
     top:64%;
     left:58%;
}
 #six {
     top:70%;
     left:35%;
}
 #seven {
     top:50%;
     left:26%;
}
#eight {
    top: 25%;
    left: 56%;
}
 #nine {
    top: 78%;
    left: 37%;
}
#ten {
    top: 30%;
    left: 70%;
}
#eleven {
    top: 65%;
    left: 46%;
}
#twelve {
    top: 55%;
    left: 70%;
}
#thirteen {
    top: 30%;
    left: 20%;
}
#fourteen {
    top: 40%;
    left: 32%;
}
 #greenbar {
     width:140px;
     height:100%;
     background-color: #008c5a;
     position: absolute;
     z-index: 1000;
     text-align: center;
}
 #logo {
     width:80%;
     position: relative;
     padding-top:20px;
     margin: 0 auto;
}

#toggle {
    position: relative;
    color: White;
    padding-top:20px;
    font-family: Helvetica;
    font-weight: Bold;
    



}

#toggle div {
position: relative;
    display: inline-block;
    color: #195e3b;
}
#sep {
    padding:2px;
    
}

#englishtoggle, #frenchtoggle {
    
    cursor: pointer;
    border-radius: 50%;
    padding:2px;

    
    
}
 #hotpop {
     background-color: rgba(255,255,255,0.8);
     position: absolute;
     width:200px;
     z-index: 1100;
     display: none;
     color: #444444;
     padding:24px;
     border-radius: 10px;
          -webkit-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
-moz-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);
box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.69);

}
 #copy {
     font-family: Helvetica;
     font-size: 14px;
     line-height: 16px;
     position: relative;
}
 #backgroundclick {
     width:100%;
     height:100%;
     position: absolute;
     z-index: 0;
     background-color: Blue;
     opacity: 0.5;
}
 a {
     color: White;
}
 #splash {
     width:100%;
     height:100%;
     background-color:rgba(255,255,255,0.8);
     text-align: left;
     font-family: Helvetica;
     z-index: 900;
     position: absolute;
}
 #splashcopy {
     position: absolute;
     top:50%;
     left:180px;
     
     transform: translate(0%,-50%);
}
 #title {
     font-size: 30px;
     line-height: 32px;
     width:500px;
     color: #008c5a;
     text-align: left;
     font-family: BentonBold, Helvetica;
     position: relative;

}
 #intro {
     padding-top:20px;
     font-size: 12px;
     line-height: 16px;
     width:500px;
     color: #444444;
     position: relative;
     text-align: left;
     font-family: BentonRegular, Helvetica;
}
 #button {
     margin-top:20px;
     position: relative;
     height:30px;
     background-color: #008c5a;
     border-radius: 20px;
     color:White;
     font-size: 14px;
     cursor: pointer;
     font-weight: Bold;
     display: inline-block;
     padding-left:10px;
     padding-right:10px;
}
 #buttoncopy {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     text-align: center;
}

#arrows-container {
  width:140px;
  height:100vh;
  pointer-events: none;
  position: absolute;
  z-index: 1005;
}
#rightarrow {
  opacity: 0;
}
 #rightarrow, #leftarrow {
    pointer-events: auto;
     cursor: pointer;
     top:50%;
     left:50%;
     transform: translate(-50%,-50%);
     height:25px;
     width:105px;
     position: absolute;
     font-family: Helvetica;
     color:White;
     font-size: 12px;
     font-weight: Bold;
     z-index: 1005;
     border-radius: 20px;
     border: 1px solid;
     border-color: White;
}
 .arrowcopyright, .arrowcopyleft {
     text-align: center;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
}


.hotspot {
  position: absolute;
  width:100%;
  height:100%;
}

.hotspot.page2 {

}

#tagline {
    width:170px;
    height:80px;
    position: fixed;
    right:30px;
    bottom:20px;
   
    z-index: 1000;
    background-image: url("../images/tagline-dark.svg");
    background-repeat: no-repeat;
    
    background-position: center;
}

#shadow {
    position: fixed;
    right:0px;
    bottom:0px;
    z-index: 3;
    background-image: url("../images/shadow.png");
    background-repeat: no-repeat;
    width:500px;
    height:500px;
    background-size: 100%;
    opacity:0.5;

}

#loading {
    width:100%;
    height:100%;
    background-color: White;
    z-index: 5000;
    position: absolute;
}

#loading img {
    top:50%;
     left:50%;
     transform: translate(-50%,-50%);
     position: absolute;

}

#hot-spot-container-background {
    position: absolute;
    width:100%;
    height:100%;

}