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

img {
   width: 100%;
   display: block;
}

body {
   background-color: seashell;
   font-family: 'Noto Sans JP', sans-serif;
   width: 100%;
   overflow-x: hidden;
   /*font-family: 'Montserrat', sans-serif;*/
}

.header {
   width: 100%;
   height: 100vh;
   position: relative;
   top: 0px;
   left: 0px;
   z-index: -1;
   position:fixed;
}

.headervid {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   z-index: -1;
/*   display: inline-flex;
*/}

/*video{
   display: inline-block;
   object-fit: contain;
}*/

.photocred1 {
   position: fixed;
   top: 0%;
   left: 0%;
   background: black;
   opacity: 0.8;
   color: snow;
   font-size: 1.25em;
   padding: .50% .50%
}

.maintext {
   background-color: white;
   position: relative;
   width: 100%;
   text-align: center;
   color: black;
   top: 100vh;
   z-index: 1;
}


.heading h1 {
   align-items: center;
   color: rgb(0 45 98);
   font-size: 3.4em;
   font-weight: bold;
   text-transform: uppercase;
   padding-top: 45px;
   text-align: center;
}

.heading h2 {
   align-items: center;
   color: rgb(0 45 98);
   font-size: 1.7em;
   padding-bottom: 10px;
   padding-left: 20px;
   padding-right: 20px;
}


.byline {
   background-color: rgb(179 8 56);
   color: white;
   padding: 3px;
   font-size: 1.1em;
   letter-spacing: 3px;
   text-transform: uppercase;
   width: 15%;
   position: relative;
   margin: auto;
   cursor: pointer;
}


.textbox1 {
   max-width: 1100px;
   margin: auto;
   font-size: 1.4em;
   line-height: 1.7em;
   padding-top: 20px;
   padding: 20px;
   text-align: justify;
   position: relative;
}

.infogram-embed{
   width: 807px; 
   height: 660px;
   margin: auto;
}

.textbox2 {
   max-width: 1100px;
   margin: auto;
   font-size: 1.4em;
   line-height: 1.7em;
   padding-top: 20px;
   text-align: justify;
   position: relative;
   padding: 20px;
   z-index: -1;
}


.timeline {
    font-family: 'PT Serif', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3em;
}

/*MAP*/

#mapid {
   border: 7px solid black;
   width: 90%;
   margin-left: 5%;
   height: 700px;
}
.info {
   width: 300px;
   display: flex;
   align-items: center;

}

.info img {
/*   border: 2px solid red;*/
   width: 125px;
   margin-right: 20px;
}

.infoflex p {
   color: darkslategray;
   font-weight: bold;
   font-size: 1.2em;
}


.photogallery {
   width: 100%;
   padding-left: 50px;
   overflow: hidden;
/*   padding: 5%;*/
}

.photogallery h2 {
   width: 90%;
/*   padding-left: 50px;
*/   font-weight: 2.5em;
}

.bigphoto, .lightbox {
   width: 60%;
   margin: auto;
}

.bigphoto {
   margin-bottom: 2%;
   position: relative;
   cursor:pointer;
}

.bigphoto img {
   width: 90%;
}

.caption {
   position: absolute;
   top: 0;
   left: 0;
   padding-left: 1%;
   color: linen;
   font-size: 0.8em;
   font-weight: bold;
   background-color: darkslategrey;
   padding-right: 1%;
   opacity: 0.9;
   width: 90%;

}

.smallphoto {
   float: left;
   width: 15%;
   position: relative;
   cursor: pointer;
}


.smallphoto img {
   width: 100%;
}

.youtube {
  max-width: 700px;
  align-content: center;
  margin: auto;
}

.clickhere {
  font-style: italic;
  font-size: 0.8em;
  text-align: center; 
  padding-right: 5%;
}



/*END OF MAP*/

/*logo gallery*/


h1 {
   text-align: center;
   margin: 0.25em;
}

h3 {
   text-align: center;
}

img {
   display: block;
}


.ourlist {
   border: 3px solid firebrick;
   background-color: gold;
   padding: 20px;
   width: 40%;
}

.teams img {
   width: 92%;
}

.mainlogo {
   width: 50%;
}

.innerphoto img {
   float: left;
   width: 23%;
}

.team {
   border: 3px solid firebrick;
   background-color: mistyrose;
   padding: 20px;
   margin: 5px;
   font-size: 1.7em;
   color: rebeccapurple;
}


/* popup */

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: skyblue;
   display: none;

}

.logos {
/*   border: 2px solid red;
*/   width: 15%;
   cursor: pointer;
   float: left;
}

.logos img {
   width: 100%;
}

.minorleaguelist {
   padding-left: 10%;
   z-index: 100;
/*   border: 2px solid blue;
*/   overflow: hidden;

}

.popup {
   position: absolute;
   top: 5%;
   left: 30%;
   width: 40%;
   min-height: 360px;
   border: 2px solid linen;
   background-color: black;
   padding: 10px;
}

.setdata {
   border: 2px solid rosybrown;
   background-color: darkslategrey;
   width: 100%;
   min-height: 500px;
   padding: 15px;
   /*padding-left: 50px;*/
   font-weight: 600;
}

.setdata h2 {
   color: white;
   font-size: 1.25em;
}

.close {
   border: 2px solid rosybrown;
   padding: 5px;
   background-color: linen;
   border-radius: 10px;
   position: absolute;
   top: -10px;
   right: -10px;
   font-size: 1.4em;
   /*transition: 2s all ease;*/
   cursor: pointer;
}

.close:hover{
   transform: scale(1.1);
   border-color: darkblue;
   color: blue;
}

.teamname {
   background-color: darkslategrey;
   color: linen;
}

.mainimage {
   margin: auto;
   width: 100%;
}

.mainimage img {
   width: 100%;
  /* margin-left: 125px;*/
}

.gallery {
   display: flex;
   width: 100%;
   margin: auto;
   cursor: pointer;
}

.minilogo {
   flex: 1;
   position: relative;
}

.galflex img {
   width: 100%;
}

.minitext {
   display: none;
   position: absolute;
   top: 0;
   z-index: 1;
   text-align: center;
   font-size: 0.68em;
   width: 100%;
   height: 100%;
   background-color: azure;
   opacity: 0.9;
   padding: 5px;
   padding-top: 15px;

}

/*END OF LOGO GALLERY
*/

.textbox3{
   max-width: 1100px;
   margin: auto;
   font-size: 1.4em;
   line-height: 1.7em;
   padding-top: 10px;
   text-align: justify;
   position: relative;
   padding: 20px;
   z-index: -1
}

.fighterjet{
   width:50%;
   float: right;
   padding-top: 30px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 0px;
}

.jetcap {
  position: relative;
  bottom: 0px;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  color: white;
  font-size: 0.58em;
  background-color: black;
  display:inline-block;
  line-height: 15px;
}

.fronthangar{
   width:50%;
   float: left;
   padding-top: 12px;
   padding-left: 0px;
   padding-right: 20px;
   padding-bottom: 0px;
}

.hangarcap {
  position: relative;
  bottom: 0px;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  color: white;
  font-size: 0.58em;
  background-color: black;
  display:inline-block;
  line-height: 15px;
}

.jasonpxp{
   width:50%;
   float: right;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 0px;
}

.jasoncap {
  position: relative;
  bottom: 0px;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  color: white;
  font-size: 0.58em;
  background-color: black;
  display:inline-block;
  line-height: 15px;
}

.elviento{
   width:35%;
   float: right;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 0px;
}

.windcap {
  position: relative;
  bottom: 0px;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  color: black;
  font-size: 0.58em;
  background-color: rgba(26,183,234,255);
  display:inline-block;
  line-height: 15px;
}

.praypic{
   width:35%;
   float: left;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 0px;
}

.praycap {
  position: relative;
  bottom: 0px;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  color: white;
  font-size: 0.58em;
  background-color: black;
  display:inline-block;
  line-height: 15px;
}


.footer {
  background-color: rgb(179 8 56);
  color: white;
  width: 100%;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1%;
  padding-right: 2%;
  text-align: right;
}

/*media query for responsive design */

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

/*body {
   background-color: pink;
}*/

   .minitext {
      font-size: 0.em;
      padding: 2px;
/*      padding-top: 8px;*/
   }

   .textbox1 {
      padding: 20px;
   }

   .textbox2 {
      padding: 20px;
   }

   .byline {
      width: 100px;
   }

   .maintext {
      overflow-x: hidden;
   }

   .headervid video {
      width: 80vh;   
   }

   .maintext {
      z-index: 1;
   }

   .setdata {
      margin: auto;
      width: 100%;
      padding: initial;   
   }

   .popup {
      width: 30vh;
   }

   .setdata h1 {
      font-size: 1.6em;
      padding-top: 25px;
   }

   .setdata h2 {
      font-size: 1.1em;
   }



   .youtube iframe {
      width: 100%;
   }

   .infogram-embed {
      width: 100%;
      height:0%;
   }

   .bigphoto {
      width: auto;
      padding-top: 69px;
   }

   .lightbox {
      width: auto;
   }

   .elviento {
      width: auto;
      padding-bottom: 20px;
   }

   .praypic {
      width: auto;
      padding-bottom: 20px;
   }

   .fighterjet {
      width: auto;
      padding-bottom: 20px;
   }

   .timeline {
      margin: auto;
   }

   .fronthangar {
      width: 100%;
      padding-bottom: 20px;
      padding-left:15px;
   }

   .map {
      width: 100%;
   }

   .jasonpxp{
      width: 100%;
      padding-bottom: 20px;
   }



}

/*media query for responsive design */

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

/*body {
   background-color: blue;
}*/

   .minitext {
     font-size: 0.40em;
     padding-top:10px;
   }


}

@media only screen and (min-width: 1200px) {

   .mainimage {
      width: 68%;
   }

   .gallery {
      width: 68%;
   }


}