/* styles.css 
   Project: The Death of the Bondsmen
   Author: Shirsho Dasgupta
   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

*/

a {
  color: #900;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: darkred;
  background-color: blanchedalmond;
  text-decoration: underline;
}


.bigimage{
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: -1;
   margin: 0px;
/*   background-size: contain;
*/}

#headimg {
   filter: brightness(60%);
}


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


.byline {
   background-color: gold;
   padding: 7px;
   margin: 2px;
   font: 18px "Lato", sans-serif;
}

.words h1 {
  -webkit-animation: 1.1s fadeIn;
  -moz-animation: 1.1s fadeIn;
  -o-animation: 1.1s fadeIn;
  animation: 1.1s fadeIn;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  animation-delay: 1.1s;
  visibility: hidden;
   }

   @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
}



.words {
   background-color: none;
   text-align: center;
   position: relative;
} 

.words2 {
   background-color: white;
}

.words h1{
   position: absolute;
   top: -450px;
   left: 30%;
   padding: 20px;
/*   margin-top: -40%;
   margin-bottom: 20%;
   margin-left: 30%;
   margin-right: 5%;*/
   font: 70px "Lato", sans-serif;
   text-transform: uppercase;
   color: snow;
   filter: brightness(200%);
}

.title0 {
   background-color: white;
   padding-top: 5px;
   /*padding-bottom: 5px;*/
}

.title0 h2{
   font: 40px "Lato", sans-serif;
   text-transform: uppercase;
   display: none;
}

.words p{
   background-color: white;
   text-align: justify;
   margin: 0;
   padding-top: 10px;  
   padding-right: 30%;
   padding-left: 30%;
   font: 18px/1.5 "Georgia";
   padding-bottom: 10px;
}

.words h3 {
   font: 28px "Lato", sans-serif;
   text-align: center;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: solid black;
   background-color: white;
   margin: 0;
   padding-top: 5%;
}

.footer {
  background-color: black;
  color: blanchedalmond;
  padding: 2px 20px;
  min-height: 7px;
  text-align: left;
  font-size: 0.8em;
}

.footer p {
      font-size: 14px;
      color: white;
    }


/***** Gallery *****/

.bigGal{
   padding-left: 20px;
   padding-right: 20px;
   padding: 20px;
}

.gal {
   max-width: 800px;
   margin: auto;
   background-color: #D3D3D3;
   padding-top: 8px;
   margin-top: 15px;
   padding-left: 5px;
   padding-right: 6px;
   margin-bottom: 15px;
   border: 1px solid black;
   position: relative;
}


.capbox1 {
   position: absolute;
   bottom: 10;
   left: 0;
   width: 65%;
   background-color: snow;
   margin: auto;
   display: none;
   border-top: 1px solid black;

}

.capbox1 p {
   padding: 0px;
   padding-top: 2px;
   font: 12px/1.5 "Georgia";
}

.gal .disbox{
   width: 97%;
   background-color: gray;
   margin: auto;
   border: 1px solid black;
   margin-bottom: 10px;
}

.disbox {
   position: relative;
}

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

.discap p{
   background-color: rgba(0,0,0, 0.8);
   padding: 10px;
   text-align: left;
   position: absolute;
   bottom: 0;
   color: white;
   font: 15px/1.5 "Georgia";
}

.gal .galbox {
   width: 100%;
   background-color: #D3D3D3; 
   display: flex;
   margin-bottom: 5px;
}


.gallery {
   flex: 1;
   cursor: pointer;
   position: relative;
   border: 1px solid black;
}


.gallcap {
   position: absolute;
   top: 0px;
   left: 0px;
   border: 1px solid black;
   width: 100%;
   height: 100%;
   padding: 0px;
   overflow: hidden;
   background-color: rgba(0,0,0, 0.5);
   display: none;
}

.gallcap p{
   font: 15px/1 "Georgia";
   padding: 15%;   
   height: 100%;
   background-color: rgba(0,0,0, 0.2); 
   color: white;
}


.gallery img{
   width: 100%;
   padding: 0px;
   display: block;
}


/***** Infogram + Modal *****/

.infothumb {
   max-width: 400px;
   background-color: #D3D3D3;
   padding: 5px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
}

.infothumb img{
   width: 100%;
   filter: brightness(30%);
}

.infomob {
   max-width: 500px;
   background-color: #D3D3D3;
   padding: 5px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   position: relative;
   box-sizing: border-box;
   display: none;
}

.infomob img{
  width: 100%;
}

.overlay {
   background-color: rgba(0,0,0,0.7);
   width: 100%;
   height: 100%;
   position: fixed; 
   top: 0;
   left: 0; 
   z-index: 3;
   display: none;
   cursor: pointer; 
}

.modal {
   /*position: relative;
   /*  top: 50%;
   left: 50%; 
   transform: translate(-50%, -50%); */
   width: 70%;
   height: 80%;
   margin: auto;
   margin-top: 4%;
   overflow-y: scroll;
   cursor: pointer;
}


.content {
   max-width: 100%;
   max-height: 100%;
   cursor: pointer;

}

.content img {
   width: 100%;
   cursor: pointer;
   /*height: 100%;*/
}

/* #close {
   position: absolute;
   top: 0px;
   right: 0px;
   color: black;
   font-size: 1.5em;
   font-weight: bolder;
   height: 25px;
   width: 25px;
   background-color: snow;
   border-radius: 50%;
   text-align: center;
   cursor: pointer;
   border: 1px solid black;
   z-index: 4; 
   } */


.infocap {
   width: 100%;
   background-color: rgba(0,0,0, 0.5);
}

.infocap p {
   position: absolute;
   top: 0;
   background-color: rgba(0,0,0, 0);
   color: snow;
   max-width: 99%;
   padding-top: 240px; 
   padding-bottom: 0px;
   filter: brightness(500%);
   display:none;
   font: 15px/1 "Georgia";
}

.overlay ::-webkit-scrollbar { 
    display: none; 
} 

/***** TimeLine *****/

.timeline {
   max-width: 80%;
   background-color: #D3D3D3;
   padding: 5px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

/***** Map *****/

.map {
   width: 70%;
   background-color: #D3D3D3;
   padding: 5px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

/*** MOBILE VIEW ***/

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

   .words h1 {
      display: none;
   }

   .title0 h2{
   display: block;
   padding-right: 5%;
   padding-left: 5%;
   font: 30px "Lato", sans-serif;
   }

   .words p{ 
   padding-right: 20%;
   padding-left: 20%;
   font: 15px/1.5 "Georgia";
   }

    .discap p{
   background-color: rgba(0,0,0, 0.5);
   padding: 10px;
    }

   .byline {
   font: 15px "Lato", sans-serif;
   }

   .infocap p {
   left: 75px;
   display:none;
   }

   .infothumb {
    display: none;
   }

   .infomob {
    display: block;
   }

   .gallcap p{
   font: 12px/1 "Georgia";
   padding: 15%;   
    }

   
}

@media only screen and (max-width: 640px) {
   /* .gallcap {
      display: none;
   }

   .gallcap p {
      display: none;
   } */

   .words p{ 
   padding-right: 20%;
   padding-left: 20%;
   font: 15px/1.5 "Georgia";
   }

   .discap p{
   background-color: rgba(0,0,0, 0.5);
   padding: 10px;
    }

   .title0 h2{
   display: block;
   padding-right: 5%;
   padding-left: 5%;
   font: 30px "Lato", sans-serif;
   }

   .words h1 {
      display: none;
   }

   .gallery p{
      display: none;
   }
   .capbox1 {
      display: block;
   }

   .infocap p {
   left: 75px;
   display:none;
   }

   .capbox1 p{
   padding: 0px;
   padding-top: 2px;
   font: 12px "Georgia";
   padding: auto;
   }

   .byline {
   font: 15px "Lato", sans-serif;
   }

   .timeline {
    display: none;
   }

   .infothumb {
    display: none;
   }

   .infomob {
    display: block;
   }
}