/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
   box-sizing: border-box;
}


@font-face {
  font-family: GothamBold;
  src: url(../gothambold/Gotham-Bold.ttf);
}

@font-face {
  font-family: GothamBook;
  src: url(../gothambook/Gotham-Book.otf);
}

.cornerlogo {
   width: 120px;
   position: fixed;
   top: 10px;
   left: 10px;
   padding: 5px;
   z-index: 5;
} 

   .cornerlogo img {
      width: 100%;
   } 

.background {
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
}
   .background img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
   }

.mobilebackground {
   display: none;
}  

.gradient {
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0px;
   background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(249,249,249,0) 100%);
   z-index: -1;
}   


.title {
   position: relative;
   top: 0vh;
   font-family: GothamBold;
   width: 100%;
   margin: auto;
   color: white;
   text-align: center;
   text-shadow: 5px 5px 5px black;
   
}
   .title h1 {
      font-size: 10vw;
      padding: 10px;
      margin: 0px;
   }

   .title h2 {
      font-size: 4vw;
      padding: 10px;
      margin: 0px;
   }

.content {
   margin-top: 0vh;
   background-color: white;
   z-index: 1;
   padding: 5% 15%;
   overflow: hidden;
   width: 100%;
   text-align: center;

}

   .textbox {
      width: 100%;
      padding: 200px;
      text-align: justify;

   }


   .contentcontainer {
      overflow: hidden;
   }

.photobox {
   text-align: center;
   display: inline-block;
   width: 31.33333%;
   margin: 1%;
   position: relative;
} 
   .photobox img {
      width: 100%;
      display: block;
   } 


.caption {
   font-family: GothamBold;
   width: 100%;
   height: 100%;
   color: white;
   padding: 5%;
   font-size: 2.1vw;
   line-height: 3.1vw;
   position: absolute;
   bottom:0;
   left:0;
   background-color:rgba(0,135,252,0.7);
   text-align: center;
   text-shadow: 2px 2px 2px #242424;
   display: flex;
}  


   .caption p {
      margin: auto; 
      text-align: center;
   }



   .caption:hover {
      font-size: 2.2vw;
      line-height: 3.2vw;
   }

      .caption4 {
         font-size: 2.3vw;
         line-height: 3.6vw;
      }

            .caption4:hover {
               font-size: 2.4vw;
               line-height: 3.7vw;
            }

      .caption7 {
         font-size: 2.2vw;
         line-height: 3.5vw;
      }

            .caption7:hover {
               font-size: 2.3vw;
               line-height: 3.6vw;
            }      


   .modal {
      width: 100%;
      height: 100vh;
      background-color: rgba(0,0,0,0.8);
      display: none;
      position: fixed;
      top:0;
      left:0;
      z-index: 1;
      overflow: scroll;
      padding-top: 30px;
      padding-bottom: 30px;

   }

      .modalbox {
         margin: 0vh 250px;
         background-color: white;
         padding: 20px 35px;
         overflow: scroll;
      }

         .text {
            text-align: justify;
            font-family: 'Georgia';
            line-height: 27px;
            font-size: 19px;
            padding: 10px 150px;
         }

            .modal h1 {
               font-family: 'GothamBook';
               border-bottom: 2px solid rgba(0,0,255,1); 
            }


               .modalmapbox {
                  margin: 5vh 110px;
                  padding: 0px 0px;
               }


                  .worldmap {
                     display: none;
                  }

                  .map iframe {
                     width:100%;
                     height: 800px;
                  }

                     .button {
                        padding: 10px;
                        outline: none;
                        font-family: 'GothamBook';
                        font-size: 20px;

                     }

                     .usbutton {
                        background-color: rgba(0,135,252);
                        width: 50%
                     }

                     .worldbutton {
                        background-color: silver;
                        width: 50%
                     }

                     .tabs {
                        width: 50%;
                        margin: auto;
                        display: flex;
                        margin-top: 5px;
                     }




   .exitbutton {
      width: 35px;
      top: 5px;
      right: 5px;
      position: fixed;
      z-index: 2;
   }

      .exitbutton img {
         width: 100%;
      }


      .exitbutton:hover {
         width: 38px;
      }

      #video {
         margin: auto;
         width: 100%;
         padding: 20px 0px;
         padding-top: 53.5%;
         height: 0;
         margin-top: 40px;
         margin-bottom: 40px;
         position: relative;
      }

         #video iframe {
            display: block;
            margin: auto;
            position: absolute;
            height: 100%;
            width: 100%;
            top:0;
            bottom:0;
            left:0;
            right:0;
            overflow: hidden;
            border: none;
         }













/*----------------------MEDIA QUERIES---------------------*/

@media only screen and (max-width: 1200px) {
   #video {
      padding-top: 52.5%;
   }

   .text {
      padding: 10px 75px;
   }

   .modalbox {
      margin: 0vh 180px;
   }

      .modalmapbox {
         margin: 5vh 90px;
         padding: 0px 0px;
      }
}

@media only screen and (max-width: 950px) {
   #video {
      padding-top: 51.5%;
   }

   .modalbox {
      margin: 0vh 140px;
   }

      .modalmapbox {
         margin: 5vh 50px;
         padding: 0px 0px;
      }



      .text {
       padding: 10px 45px;
      }
}

@media only screen and (max-width: 800px) {
   .modalbox {
      margin: 0vh 100px;
   }


}

@media only screen and (max-width: 800px) {
   /*.title h1{
      font-size: 11vw;
   }*/

   

   .title h2{
      font-size: 7vw;
   }

   .textbox {
      padding: 100px;
   }

   .photobox {
      width: 46%;
      margin: 2%;
   }

   .caption {
      font-size: 3.1vw;
      line-height: 4.1vw;
   }

   .modalbox {
      margin: 0vh 40px;
   }

   .modalmapbox {
         margin: 5vh 30px;
         padding: 0px 0px;
      }

      .caption:hover {
         font-size: 3.2vw;
         line-height: 4.2vw;
      } 

         .caption4 {
            font-size: 3.3vw;
            line-height: 4.3vw;
         }

               .caption4:hover {
                  font-size: 3.4vw;
                  line-height: 4.4vw;
               } 

                  /*.caption7 {
                     font-size: 3.2vw;
                     line-height: 5.2vw;
                  }

                        .caption7:hover {
                           font-size: 3.4vw;
                           line-height: 5.4vw;
                        } */  */   
}


@media only screen and (max-width: 600px) {
   #video {
      padding-top: 50.5%;
   }

   .map iframe {
      height: 600px;
   }

   .button {
      font-size: 13px;
   }
}

@media only screen and (max-width: 500px) {
   #video {
      padding-top: 47.5%;
   }

   .text {
       padding: 10px 25px;
      }

   .mobilebackground {
      display: block;
   }

   .normalbackground {
      display: none;
   }

   .gradient {
      display: none;
   }

}



@media only screen and (max-width: 600px) {
   /*.title {
      font-size: 15px;
      width: 80%;
   }*/

   .cornerlogo {
       width: 80px;
    }

   .textbox {
      padding: 30px;
   }

   .photobox {
      width: 90%;
      margin: 5%;
   }

   .modalbox {
      margin: 0vh 10px;

   }

      .modalmapbox {
         margin: 0vh 10px;
         padding: 0px 0px;
      }

      .text {
       padding: 10px 10px;
      }

   .caption {
      font-size: 6.1vw;
      line-height: 9.1vw;
   }

      .caption:hover {
         font-size: 6.2vw;
         line-height: 9.2vw;
      }


                  .caption4 {
                     font-size: 6.5vw;
                     line-height: 9.5vw;
                  }

                        .caption4:hover {
                           font-size: 6.6vw;
                           line-height: 9.6vw;
                        }

                  /*.caption7 {
                     font-size: 6.3vw;
                     line-height: 12.3vw;
                  }

                        .caption7:hover {
                           font-size: 6.5vw;
                           line-height: 12.5vw;
                        }  */    

}