html{
        width :100%;
        height:100%;
       }
       body{
        width :100%;
        height:100%;
       }
       header{
        width :100%;
        height:100%;
       }

      #slideshow{
        position:relative;
        height  :100%;
        width   :100%;
        overflow:hidden;
        background-color   : black;
      }


		.in-slide-content {
			bottom:50px;
			left:50px;
			margin-right:10%;
			z-index:20;
			position:absolute;
			width:45%;
   	   max-width:460px;
			text-align:left;
		}

		.in-slide-content h1{
			z-index:20;
			color:#fff;
			margin :0px;
			font-size	  :60px;
			line-height	  :60px;
			text-transform:uppercase;
			float:left;
		}

		.in-slide-content p{
			border-top:#fff solid 1px;
			z-index:20;
			color:#fff;
			font-size:12px;
			padding-top:20px;
			float:left;
			-font-weight:bold;
	      text-align:justify;
   	}
         
      footer{
        width	:100%;
      }


      .slider{
        position:absolute;
        top     :0px;
        left    :0px;
        right   :0px;
        bottom  :114px;
        background-color   : black;
        background-position: center center;
        background-repeat  : no-repeat;
      }

      .slider .slide{
        position:absolute;
        width   :100%;
        height  :100%;
        opacity :0;
        z-index :-1;
        background-repeat  :no-repeat;
        background-color   : black;
        transition:all 1.5s ease-out;
        -webkit-transition:all :1.5s ease-out;
      }

      .slider figcaption {
      	position:absolute;
         display:block;
         width :100%;
         height:100%;
      }

      .slider figcaption a{
      
      }
      figure > img{/*the figure contains the same image as background but with better positioning.
         if the browser doesn't see the css the user will at least the image from the tag*/
         display:none;
      }
      figcaption a.prev{
        position: absolute;
        display : block;
        right	 : 92px;
        height  : 68px;
        width	 : 36px;
        bottom	 : 48px;
      }

      figcaption a.next{
        position: absolute;
        display : block;
        right	 : 48px;
        height  : 68px;
        width	 : 36px;
        bottom	 : 48px;
      }

      .slider figcaption a:active{
         transform: translate( 1px, 1px);
   		-ms-transform: translate( 1px, 1px); /* IE 9 */
	   	-webkit-transform: translate( 1px, 1px); /* Safari and Chrome */
      }


      /*the first slide is by default visible*/
      #index{
        opacity:1;
        z-index:1000;
      }
      /*unless one of the other slides is active*/
      .slider .slide:target ~ #index{
        opacity: 0;
        z-index:-1;
      }

      .slider .slide:target{
        opacity:1;
        z-index:1000;
      }


@media only screen and (max-width: 480px), only screen and (max-height: 480px) {

      figcaption a.prev{
        position:absolute;
        right	 : 64px;
        height  : 68px;
        width	 : 36px;
        bottom	 : 20px;
      }

      figcaption a.next{
        position:absolute;
        right	 : 20px;
        height  : 68px;
        width	 : 36px;
        bottom	 : 20px;
      }


 		.in-slide-content {
			bottom:auto;
			left:20px;
         top :20px;
			margin-right:10%;
			z-index:20;
			position:absolute;
			width:50%;
			text-align:left;
		}

		.in-slide-content h1{
			z-index:20;
			color:#fff;
			margin :0px;
			font-size	  :30px;
			line-height	  :30px;
			text-transform:uppercase;
			float:left;
		}

      .in-slide-content p{
         display:none;
			border-top:#fff solid 1px;
			z-index:20;
			color:#fff;
			font-size:12px;
			padding-top:8px;
			float:left;
			font-weight:normal;
	      text-align:left;
   	}

}

@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
   .slide .button-play-overlay{
       width :100px;
       height:100px;
       right :10px;
       top   :50%;
       margin-top:-50px;
   }
   .slider .share-menu{
     visibility	:hidden;
     position		:absolute;
     top	         :80px;
     left         :20px;
     z-index		:1100;/*don't disturb the video view @ 1200*/
     width :50px;
     margin:0px;
   }
   .slider .share-menu .share-container{
     margin:0px;
     margin-top:20px;
     float:right;
   }
   .slider:hover .share-menu{
     visibility:visible;
   }

}

@media only screen and (max-width: 340px), only screen and (max-height: 480px) {
   .slider{
      bottom:82px;
   }
}

@media only screen and (max-height: 470px) {
  .slider .share-menu{
      display:none;
  }
}
@media only screen and (max-height: 320px) {
  .slide .button-play-overlay{
      width :70px;
      height:70px;
      right :140px;
      bottom: 20px;
      left  :auto;
      top   :auto;  
      background-size:70%;
  }
  .slide .button-play-overlay:hover:after{
      content    :'click to play';
      position:absolute;     
      display    :block;
      width      :70px;
      height     :20px;
      top        :50%;
      left       :50%;
      margin-left:-35px;
      margin-top : 25px;
      font-size  : 12px;
      line-height: 14px;
      border-radius:4px;
   }
}
@media only screen and (max-height: 250px) {
   .slide .button-play-overlay{
      display:none;
   }
}