@media screen and (min-width: 400px) and (max-width: 700px) {   
body{  
background-color:#555;  
font-family: Times New Roman;  
}  
header h3{  
        text-align:center;  
    }  
 } 

body, html {
	background: #EFEFEF;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	font: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
	font-weight: normal;
	margin-bottom: 120px;
}

h1 {
	color: #333;
	font-size: 42px;	
	line-height: 36px;           
	-moz-text-shadow: 0 1px 1px #CCC;
    -webkit-text-shadow: 0 1px 1px #CCC;
    text-shadow: 0 1px 1px #CCC;  
	margin-bottom: 48px;	  	
}    

h1 span.author {
	font-size: 16px;	
}                   
h1 span a{
	color: #00BFFF;
}

h2 {               
	font-size: 18px;
	line-height: 36px;
	padding-bottom: 5px;
	-moz-text-shadow: 0 1px 1px #CCC;
    -webkit-text-shadow: 0 1px 1px #CCC;
    text-shadow: 0 1px 1px #CCC;    	

}

h3 {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -1px;
	font-weight: normal;
}

a.link, a:active, a:selected {
	border: none;
	outline: none;
	color: #00BFFF;	
}



a.link, a:visited{
	color: #00BFFF;  
}       


#wrap{
	width: 960px;     
	position: absolute;
	left: 50%;    
	margin-left: -480px;
	margin-top: 60px;   
}

#backstretch{

}                  


.bigImages{

}
.bigImages ul li{
	list-style: none;
}



.thumbContainer{
   position: absolute;
}  


.thumbnails{     
    position: absolute;
	/*
  	left: 50%;    
	width: 480px;
	margin-left: -240px;  	  

	background-color: rgba(100%, 100%, 100%, 0.5);
	color: #FFF;       
	font-family: helvetica, "Lucida Grande", "Lucida Sans Unicode", verdana, arial, sans-serif;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;	 	  
	*/  	
	
}    
.thumbParentContainer{
 	position: absolute;  
  	bottom: 0px;       
}
.thumbParentContainer div.nextArrow{
	cursor: pointer;
	position: absolute;  
	background: url(../images/assets/next.png) no-repeat; 
	width: 20px;
	height: 40px;      
	right: 16px;        
	top: 3px;
	z-index: 1005;     
}           
.thumbParentContainer div.prevArrow{
	cursor: pointer;
	position: absolute;  
	background: url(../images/assets/prev.png) no-repeat; 
	width: 20px;
	height: 40px;      
	left: -24px;        
	top: 3px;
	z-index: 1005;     
}           


.thumbnails a{
	color: #00BFFF;
}  

              
.thumbnails .blueNote{
	background: #00BDEE;
}                       

.thumbnails .redNote{
	background: #FF3333;
}
.thumbnails ul{
	display: block;        
	padding: 0;
	margin: 0;
}
.thumbnails ul li{
	display: block;
	float: left;
	border: 2px solid #FFF;
	margin: 1px;          
	width: 65px;
	height: 41px;
} 


.thumbnails ul li.active{
	border: 2px solid #00BFFF;
}                

 
#arrowButton{    
    cursor: pointer;   
	position: fixed;  
	width: 100%;
	z-index: 1003;
}            
#arrowButton .prevArrow{
    background: url(../images/assets/prev.png) no-repeat; 
    width: 40px;
    height: 80px;      
	position: absolute;
	left: 20px;
} 
#arrowButton .nextArrow{                 
    background: url(../images/assets/next.png) no-repeat;
    width: 40px;
    height: 80px;  
	position: absolute; 
	right: 20px;
}           




.animate0{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: 0s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: 0s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}         

.animate1{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: .2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: .2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: .2s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate2{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: .4s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: .4s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: .4s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: .4s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate3{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: .6s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: .6s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: .6s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: .6s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}   

.animate4{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: .8s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: .8s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: .8s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: .8s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}  

.animate5{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: 1s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: 1s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: 1s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}              

.animate6{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: 1.2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: 1.2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: 1.2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}              

.animate7{
   	-webkit-animation-duration: .4s;
	-webkit-animation-delay: 1.4s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .4s;
	-moz-animation-delay: 1.4s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .4s;
	-ms-animation-delay: 1.4s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .4s;
	animation-delay: 1.4s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}      

				.info-box-obras {
				position: absolute; 
                bottom: 100px; 
                width: 400px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
				
				.texto-box-obras {
				color:#FFF;	
				font-family: Raleway;
				padding: 0px;
				font-size:12px;
					
					
					
				}
				
				.boton-obras {
				
				float:left;  top: 300px;  width:30px; height:60; padding:1px; position: fixed; border-radius:1px;
				
				
					
					
				}
				
				
				.boton-back {
				
				float:left;  top:345px; width:30px; height:40px; padding:1px; position: fixed; border-radius:1px;
				
				
					
					
				}
				
				button{
				  margin      : 0;
				  padding     : 10px;
				  border      :black solid 1px;
				  background-color: rgba(128, 128, 128, 0.7);
				  font-size   : 1em;
				  cursor      : pointer;
				  color:#FFF;
				  
				  
				  
				}

				button::-moz-focus-inner{
				  padding : 0;
				  border  : 0;
				}
				
				
			@media screen and (max-width: 520px) {   
			.boton-obras{  
			bottom: 400px;
			}  
			 } 
			 
			  @media screen and (min-width: 360px) {   
			
			.info-box-obras {
				position: absolute; 
                bottom: 420px; 
                width: 400px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
			
			
			
				} 
			 
				  @media screen and (min-width: 320px) {   
			
				.info-box-obras {
				position: absolute; 
                bottom: 320px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
			
				.texto-box-obras {
				color:#FFF;	
				font-family: Raleway;
				padding: 0px;
				font-size:10px;
					
					
					
				}
				} 
				
				 @media screen and (min-width: 375px) {   
			
				.info-box-obras {
				position: absolute; 
                bottom: 50px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
			
				.texto-box-obras {
				color:#FFF;	
				font-family: Raleway;
				padding: 0px;
				font-size:10px;
				}
				} 
				
				Phones and Handhelds

iPhones
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  
  
  
  
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

	
  }

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  
				.info-box-obras {
				position: absolute; 
                bottom: 280px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  
  
  }

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  .info-box-obras {
				position: absolute; 
                bottom: 50px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}	
  
				.boton-obras{  
				bottom: 700px;
				}  
  
  
  
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 


				.info-box-obras {
				position: absolute; 
                bottom: 50px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  }

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

				.info-box-obras {
				position: absolute; 
                bottom: 100px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  
  }

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Galaxy Phones

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

				.info-box-obras {
				position: absolute; 
                bottom: 50px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  
  
  }

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

				.info-box-obras {
				position: absolute; 
                bottom: 70px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  
  }

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (orientation: landscape) {

  
  .info-box-obras {
				position: absolute; 
                bottom: 50px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}	
  
				.boton-obras{  
				bottom: 500px;
				}  
  
}


Tablets

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

	.info-box-obras {
				position: absolute; 
                bottom: 140px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  }

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait Nexus 7*/
@media screen 
  and (device-width: 600px) 
  and (device-height: 960px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

				.info-box-obras {
				position: absolute; 
                bottom: 140px; 
                width: 300px; 
                height: 180px; 
				left:0%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}
  
  
  }
		

		



@media only screen and (max-width: 640px)  {
	
	
	.boton-obras {
    float: left;
    top: 100px;
    width: 30px;
    height: 60;
    padding: 1px;
    position: fixed;
    border-radius: 1px;
}


	.boton-back {
    float: left;
    top: 145px;
    width: 30px;
    height: 40px;
    padding: 1px;
    position: fixed;
    border-radius: 1px;
}

				.info-box-obras {
				position: absolute; 
                bottom: 100px; 
                width: 300px; 
                height: 180px; 
				left:10%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}

}

@media only screen and (max-width: 667px)  {
	
	
					.boton-obras {
					float: left;
					top: 100px;
					width: 30px;
					height: 60;
					padding: 1px;
					position: fixed;
					border-radius: 1px;
				}


					.boton-back {
					float: left;
					top: 145px;
					width: 30px;
					height: 40px;
					padding: 1px;
					position: fixed;
					border-radius: 1px;
				}

				.info-box-obras {
				position: absolute; 
                bottom: 100px; 
                width: 300px; 
                height: 180px; 
				left:10%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}

}

@media only screen and (max-width: 736px)  {
	
	
					.boton-obras {
					float: left;
					top: 100px;
					width: 30px;
					height: 60;
					padding: 1px;
					position: fixed;
					border-radius: 1px;
				}


					.boton-back {
					float: left;
					top: 145px;
					width: 30px;
					height: 40px;
					padding: 1px;
					position: fixed;
					border-radius: 1px;
				}

				.info-box-obras {
				position: absolute; 
                bottom: 100px; 
                width: 300px; 
                height: 180px; 
				left:10%;
                border: 1px solid black; 
				background-color: rgba(0, 0, 0, 0.6);
				color:#FFF;
				}

}