@charset "utf-8";
/* CSS Document */


/* Fix social buttons */
.stButton .stFb, .stButton .stTwbutton, .stButton .stButton_gradient ,.stMainServices  {
    height: 23px !important;
}

/******************
	Header
******************/

.header{
	z-index:999;
	position: relative;
    background:url(../imgs/main/opit-header.jpg) 50% 0 no-repeat; 
	height: 1000px;
    
}

.header a{
	color:white;
	opacity:.5;
	text-align:center;
	-webkit-transition: opacity 1s ease;
  	transition: opacity 1s ease;
}

.header a:hover{
	text-decoration:none;
	opacity:.9;
	-webkit-transition: opacity .2s ease;
  	transition: opacity .2s ease;
}

#headline {
    position: relative; 
    margin-top: 20px;
    padding-top: 56.25%;
  }

.headline{
    z-index: 99999;
	font-family: 'Libre Baskerville', serif;
	font-weight: 800;
	font-size: 8em;
	letter-spacing:4px;
	color: white;
	position: absolute;
	text-align: center;
	width: 100%;
	top: 350px;
 }
 
 .hed-deck{
    z-index: 99998;
	font-family: 'Vollkorn', serif;
	font-weight: 600;
	font-size: 3em;
	letter-spacing:4px;
	color: white;
     position: absolute;
     text-align: center;
     width: 100%;
     top: 450px;
 }
 
.deck{
	font-family: 'Vollkorn', serif;
	font-size: 20px;
	text-align:center;
    padding: 9%;
	font-weight:600;
	color: black;
	line-height:30px;
    width: 70%;
    margin-left: auto;
    margin-right: auto
 }
 
 @media (max-width: 1025px) and (min-width: 680px) {
	 	 
.headline{
	font-family: 'Vollkorn', serif;
	font-size: 50px;
	font-weight:800;
	text-transform:uppercase;
	position:absolute;
	top: 300px;
	line-height:45px;
	text-align:center;
	margin-bottom:10px;
 }
 
 .hed-deck{
     z-index: 99998;
     font-family: 'Vollkorn', serif;
     font-weight: 600;
     font-size: 2em;
     letter-spacing:4px;
     color: white;
     position: absolute;
     text-align: center;
     width: 100%;
     top: 345px;
 }
 
.deck{
	font-family: 'Vollkorn', serif;
	font-weight:200;
	font-size: 25px;
	text-transform:capitalize;
 }
	 
 }
 
 @media (max-width: 680px) {
	 
.headline{
	font-family: 'Vollkorn', serif;
	font-size: 40px;
	font-weight:800;
	text-transform:uppercase;
	position:absolute;
	top:200px;
	line-height:44px;
	text-align:center;
 }
 
 .hed-deck{
     z-index: 99998;
     font-family: 'Vollkorn', serif;
     font-weight: 600;
     font-size: 2em;
     letter-spacing:4px;
     color: white;
     position: absolute;
     text-align: center;
     width: 100%;
     top: 245px;
 }
 
.deck{
	font-family: 'Vollkorn', serif;
	font-weight:200;
	font-size: 19px;
	line-height:22px;
	text-transform:capitalize;
 }
	 
 }
 
 .cover{width: 101%;}
 
 .byline{
	 font-size:30px;
	 
}
 

 
 /******************
	General
******************/

.rule{
	width: 100%;
}

/******************
	Typography
******************/

.drop { 
	float: left; 
	color: #3B3B3C;
	font-size: 70px; 
	line-height: 48px; 
	padding-top: 8px; 
	padding-right: 8px; 
	font-family: 'Libre Baskerville', serif;
}

.subhead{
	font-family: 'Libre Baskerville', serif;
	font-size: 40px;
	padding-top:40px;
	padding-bottom:20px;
	text-align:center;
	
}

@media (min-width: 1200px) {
    .subhead{
	  font-size: 60px;
	}
}

p {
	font-size:17px;
}

.ch-deck{
	font-family: 'Vollkorn', serif;
	font-weight:300;
	font-size:25px;
	color:#3B3B3C;
	margin-bottom: 90px;
	text-align:center;
}

.ch-title{
	font-family: 'Vollkorn', serif;
	font-weight:800;
	text-transform:uppercase;
	font-size:15px;
	color:#3B3B3C;
	margin-top:150px;
	margin-bottom:-40px;
	text-align:center;
	text-decoration:underline;
}

.subhead .active{
    color: #5AC5C7;
}

.pullquote{
	font-family: 'Vollkorn', serif;
	font-weight:300;
	font-size:27px;
	color:#3B3B3C;
    font-style: italic;
	margin-top:30px;
	margin-bottom:30px;
    position: relative;
    z-index: 1;
}

.source {
    font-style: normal;
    font-weight: bold;
}

.corner {
    width: 100px;
    height: 100px;
    background-image: url('../imgs/quotes/quo-tl.jpg');
    position: absolute;
    z-index: -1;
}

.TL {
    top: -10px;
    left: -39px;
}

.BR {
    bottom: -2px;
    right: -36px;
    transform:rotate(-180deg);
    -ms-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg);
}


/******************
	Content
******************/

.wrapper-comp { width: 100% }

.content{
	margin-top:20px;
}


@media (max-width: 767px)
{
    body {
        padding-right: 0px;
        padding-left: 0px;
    }
	
}

.photo{
	margin-top:20px;
	margin-bottom:30px;
    font-size: 13px;
}

.credits {
    background-color: #3B3B3C;
    color: white;
    font-family: 'Vollkorn', serif;
    font-size: 21px;
    padding: 40px 0 40px 20px;  
}

/*******************
	Come in
********************/

.come-in {
  transform: translateY(150px);
  animation: come-in 0.9s ease forwards;
  -webkit-animation: come-in 0.9s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.5s; /* So they look staggered */
  -webkit-animation-duration: 0.5s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); }
}

.module{opacity:0;}

 
/******************
	Interactives
******************/

.interactive{
	height:600px;
}

/******************
	Video
******************/

#vid-intro {
    display: block;
    position: absolute;
    top: 0; 
    width: 100% !important; 
}

.video {
    margin: 20px 0 20px 0;
    position: relative;
    padding-top: 56.25%;
}

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}


/******************
	Slideshow
******************/

/* Prevent the slideshow from flashing on load */
    #slides, #slides2 {
      display: none;
      width: 100%;
      position: relative;
    }
	
	#slides img, #slides2 img{background-position:center; width: 100%}

    
    /* Show active item in the pagination */
    .slidesjs-pagination .active {
      color:red;
    }
    
   #container {max-width: 940px;}
  

    .slideshow-nav:hover span {
        visibility: visible;
    }

    .slideshow-nav {
        position: absolute;
        top: 0;
        width: 24%;
        height: 100%;
        cursor: pointer;
        text-decoration: none;
        background: transparent url('blank.gif'); /* helps IE */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        z-index: 8040;
    }

    .slideshow-nav:hover {
        background-color:rgba(0, 0, 0, 0.3);
    }

    .slideshow-nav span {
        position: absolute;
        top: 50%;
        width: 25px;
        height: 45px;
        cursor: pointer;
        z-index: 8040;
        visibility: hidden;
    }

    .prev span, .next span {
    /* 	background-image: url('http://gazdata-assets.s3.amazonaws.com/js/img/arrow-next.png'); Old arrows */
        background-image: url('http://gazdata-assets.s3.amazonaws.com/js/img/Arrows.png');
    }
        
    .prev span {
        left: 10px;
        background-position: 0px -1px;
    }

    .next span {
        right: 10px;
        background-position: 25px -1px;
    }

    .prev {
        left: 0;
    }

    .next {
        right: 0;
        right: 0;
    }

    
    .caption {
      z-index:500;
      display:block!important;
      position:absolute;
      bottom:0;
      left:0;
      height:auto;
      padding:5px 20px 0 20px;
      background:#000;
      background:rgba(0,0,0,.5);
      width:100%;
      font-size:1.3em;
      line-height:1.33;
      color:#fff;
      border-top:1px solid #000;
      text-shadow:none;
}
    

/* Media quires for a responsive layout */

    /* For tablets & smart phones */
    @media (max-width: 940px) {
      body {
        padding-left: 10px;
        padding-right: 10px;
      }
      .container {
        width: auto
      }
      
      .module{opacity:1;}
           
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
        
      .module{opacity:1;}
      
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
          
   }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: auto;
      }
    }


.slide-bg{
	background:black;
	position:absolute;
	width:100%;
	height:auto;
	left:0;
	margin-top:-20px;
	z-index:-99999;

}

/*pagination styling*/

 .slidesjs-pagination {
      margin: 6px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image:url(../imgs/chap02/pagination.png);
        background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }
	
	.caption {
	  z-index:9999999;
	  display: block;
	  position:absolute;
	  width:100%;
	  left:0;
	  bottom:0;
	  background:#000;
	  background:rgba(0,0,0,.5);
	  font-size:1.3em;
	  color:#fff;
	  border-top:1px solid #000;
	  text-shadow:none;
	  padding:5px;
	}

    
/******************
	Audio portraits
******************/	

/* Style audio controls in IE */
@media screen and (min-width:0\0) { 
    audio {
        width: 300px;
        height: 36px;
    }   
}

.audio-portrait {
    width: 300px;    
}

 @media (max-width: 1000px) and (min-width: 460px) {
     .audio-portrait {
         margin-right: 30px;    
     } 
 }

 @media (min-width: 992px) { 
 
#audio-portraits div:nth-child(n+3) {
    margin-top: 30px;    
    }
}

@media (max-width: 992px) { 
 
#audio-portraits div:nth-child(n+4) {
    margin-top: 30px;    
}
 }