/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
   border-radius: 15px;
}

html{
  scroll-behavior: smooth;
}


body{
/*   background-color: #F5F5F5;*/
  background-color: white;
   font-family: 'Roboto', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

.scroller{
  position: fixed;
  right:0;
  height: 90%;
  text-align:center;
  writing-mode: vertical-lr;
  padding-top: 7%;
  padding-right: 2%;
  display: none;
}

.chapters{
  display: grid;
  align content: center;
  grid-template-columns: auto auto auto auto auto auto; 
  grid-gap: 5px;
  font-size: 1em;}

.c1{
  border-top: 2px solid black;
}

.c1 a{
  color: black;
/*  text-decoration: none;*/
}

.c1 a:hover {
    text-decoration: none; 
    font-weight: bold; 
}

.mainheader{
  height: 100%;
  width: 100%;
  position: relative;
}

.mainheader video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.mtitle{
  color: white;
  position: absolute;
  bottom: 10%;
  left: 10%;
  padding-top: 2%;
  width: 80%;
  text-align: center;
  background-color: rgb(0,0,0,.6);
  line-height: .5em;
}

.mtitle h{
  font-size: 3em;
}

.mtitle p{
  font-size: 1.5em;
}

.ititle{
  font-size: .6em;
  padding-left: 25%;
}

.maintext{
  padding-left: 25%;
  padding-right: 25%;
  font-size: 1.2em;
  line-height: 1.5;
/*  text-align: justify;
  text-justify: inter-word;*/
}

.bootcamppic{
  width: 100%;
}

.bootcamppic img{
  width: 100%;
}


.gallery{
  height: 100vh;
}

.gtitle{
  padding-top: 5%;
  text-align: center;
  font-size: 3em;
  width: 100%;
}

.rgallery{
   padding-bottom: 3%;
   padding-top: 5%;
   padding-right: 5%;
   padding-left: 5%;
   margin: auto;
   display: grid;
   grid-gap: 3%;
   grid-template-columns: 1fr 1fr 1fr 1fr;
}

.headshot{
  position: relative;
  width: 100%;
  height: 60vh;
  cursor: pointer;
}

.headshot img{
   width: 100%;
   height: 100%;
}


.milheadshot{
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
   height: 100%;
}

.milheadshotcaption{
   text-align: center;
   position: absolute;
   color: white;
   bottom: 0;
   height: 10%;
   width: 100%;
   line-height: 1.5;
   background-color: rgb(0,0,0,.7);
   display: none;
}

.micahheadshotcaption{
   text-align: center;
   position: absolute;
   color: white;
   bottom: 0;
   height: 10%;
   width: 100%;
   line-height: 1.5;
   background-color: rgb(0,0,0,.7);
   display: none;
}

.title{
  font-size: 1em;
  text-align: center;
  padding-top: 3%;
}

.mainimg{
  width: 60%;
  padding-top: 2%;
  margin-left: auto;
  margin-right: auto;
}

.mainimg img{
  width: 100%;
}

.trojanthen{
  width: 100%;
  position: relative;
  cursor: pointer;
}

.trojanthen img{
  width: 100%;
}

.trojannow{
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
   height: 100%;
}

.trojanhallcap{
  font-size: .8em;
  text-align: center;
  margin-top: 0;
}

.after{
  display: none;
}

.bigcap{
  margin-top: 0px;
  font-size:  .9em;
  text-align: center;
}

.sidepic{
  width: 45%;
}

.sidepic img{
  width: 100%;
}

.left{
  float: left;
  padding-right: 8%;
  margin-left: -15%;
}

.right {
  float: right;
  padding-left: 5%;
  margin-right: -15%;
}

.smallcap{
  margin-top: 0px;
  font-size:  .7em;
  text-align: center;
}

.sidepic3 p{
  margin-right: -10%;
}

.sidepic3 img{
  width: 110%;
}

.ymainimg img{
  width: 20%;
}
.podcast{
  padding-top: 2%;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0%;
}

/*World Map Stuff*/

.worldmap{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.china{
  fill: rgb(87,196,173);
  cursor: pointer;
}

.UnitedStates{
  fill: rgb(87,196,173);
  cursor: pointer;
}

.Indonesia{
  fill: rgb(87,196,173);
  cursor: pointer;
}

.India{
  fill: rgb(230,225,188);
  cursor: pointer;
}

.Canada{
  fill: rgb(230,225,188);
  cursor: pointer;
}

.SaudiArabia{
  fill: rgb(230,225,188);
  cursor: pointer;
}

.SouthKorea{
  fill: rgb(0,97,100);
  cursor: pointer;
}

.Mexico{
  fill: rgb(0,97,100);
  cursor: pointer;
}

.Taiwan{
  fill: rgb(0,97,100);
  cursor: pointer;
}

.Iran{
  fill: rgb(0,97,100);
  cursor: pointer;
}

.map{
  position: relative;
}

.mapcaption{
  position: absolute;
  text-align: center;
  background-color: rgb(0,0,0,.6);
  bottom: 0;
  width: 100%;
  color: white;
  font-size: .8em;
  display: none;
}

.mapcaption h{
  font-size: 1.5em;
}

.mapcaption a{
  text-decoration: none;
  color: white;
}

.mapcaption a:hover {
    text-decoration: underline; 
    font-weight: bold; 
}

.profileimg{
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.profileimg img{
  width: 100%;
}


/*media query for responsive design */

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


}