@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
body{background:#FFFFFF; }
div { max-width:960px; position:relative; margin: 0px auto 0px auto; }
header{ background-color: #FFFFFF; padding: 10px 10px 30px 10px;   }
header img {float:left; margin: 0px 0px 0px 10px;}
header div {float:right; margin: 150px 0px 0px 0px;}


nav{margin:20px auto 40px auto; display: table; width: 100%; }
nav ul li{ display: inline-table;
width: 19.6%;
text-align: center;
background: #F4F4F4; 
white-space: nowrap;
list-style-type:none; 
radius:-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
font-size:12px; padding-top:5px; padding-bottom:5px; }
nav ul li a{ color: #888888; font-family: Rosario; font-weight:400; text-decoration:none; }
.imgbienvenidos { max- width: 340px; float: right;  top: inherit;  }



.contain_image { width: 98%; margin: 0; padding: 0; position: relative ;  top: inherit; } 
.contain_image p { width: 100%; height: 100px; padding-right: 900%; margin: 0; background-color: #96dfd5 ; opacity: 0.7; bottom: 15px; left: 0; padding: 10px 0px 10px 20px; color: #FFF; } 
.titulocaption { font-size:70px; font-family: Oswald; font-weight:100; color:#FFF; } 

section div { margin: 20px 0px 0px 20px; }
section div p { width:40% ; font-size: 14px; font-family: Rosario; font-weight: 400; text-align:justify; color: #888888; }
section div p span {font-family: Oswald; font-weight: 400; font-size: 25px; color: #58585b; }





.divisor { color:#FF5353 ; max-width: 960px; height: 3px; background-color:#FF5353; border-style: none; margin-bottom: 20px;}
.titulotab { padding: 0px 0px 5px 20px; margin: 30px 0px 0px 0px; font-family: Oswald; font-weight:300; font-size:25px; color: #94E2D7;}

#box    {  width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel1-1.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box:hover #overlay {
           opacity:0.9;}
		   
#box2    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;
           background-image:url(img/nivel1-2.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box2:hover #overlay {
           opacity:0.9;}	
		   
#box3    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel1-3.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box3:hover #overlay {
           opacity:0.9;}
		   
#box4    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel1-4.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box4:hover #overlay {
           opacity:0.9;}	   

#box5    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel1-5.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box5:hover #overlay {
           opacity:0.9;}

#box6    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel1-6.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box6:hover #overlay {
           opacity:0.9;}

#box7    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-7.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box7:hover #overlay {
           opacity:0.9;}
		   
#box8    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-8.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box8:hover #overlay {
           opacity:0.9;}
		   
#box9    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-9.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box9:hover #overlay {
           opacity:0.9;}
		   
#box10    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-10.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box10:hover #overlay {
           opacity:0.9;}
		   
		   
#box11    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-11.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box11:hover #overlay {
           opacity:0.9;}
		   
#box12    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel1-12.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box12:hover #overlay {
           opacity:0.9;}
		   	
	   
#overlay    {  background:#f1655b;
			   width:148px;
           	   height:148px;
               text-align:left;
               padding:0px 0 0px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
			   padding-top:10px}

#plus1       { font-family:Oswald;
               font-weight:300;
			   margin-top:50px;
			   margin-left:10px;
               color:rgba(255,255,255,1);
               font-size:20px;}

#plus2		{ font-family:Rosario;
			  font-weight:200;
			  margin-top:10px;
			  margin-left:10px;
			  color:rgba(255,255,255,1);
			  font-size:12px;}	




#box13   { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;
           background-image:url(img/nivel2-1.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box13:hover #overlay2 {
           opacity:0.9;}
		   
#box14   { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;
           background-image:url(img/nivel2-2.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box14:hover #overlay2 {
           opacity:0.9;}	
		   
#box15    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel2-3.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box15:hover #overlay2 {
           opacity:0.9;}
		   
#box16    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel2-4.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box16:hover #overlay2 {
           opacity:0.9;}	   

#box17    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel2-5.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box17:hover #overlay2 {
           opacity:0.9;}

#box18   { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0; 
           background-image:url(img/nivel2-6.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box18:hover #overlay2 {
           opacity:0.9;}

#box19    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0px;; 
           background-image:url(img/nivel2-7.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box19:hover #overlay2 {
           opacity:0.9;}
		   
#box20    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel2-8.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box20:hover #overlay2 {
           opacity:0.9;}
		   
#box21    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel2-9.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box21:hover #overlay2 {
           opacity:0.9;}
		   
#box22    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel2-10.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box22:hover #overlay2 {
           opacity:0.9;}
		   
#box23    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel2-11.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box23:hover #overlay2 {
           opacity:0.9;}
		   
#box24    { width:148px;
           height:148px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
           margin:0px 12px 12px 0;; 
           background-image:url(img/nivel2-12.jpg);
  		   overflow:hidden;
		   opacity:0.9;
		   float:left}

#box24:hover #overlay2 {
           opacity:0.9;}
		   

		   
		   
		   
#overlay2    {  background:#9bd6ce;
			   	width:148px;
           	   	height:148px;
              	text-align:left;
               	padding:2px 0 2px 0;
               	opacity:0;
               -webkit-transition: opacity .25s ease; 
			   padding-top:10px; }

#plus3       { font-family:Oswald;
               font-weight:300;
			   margin-top:50px;
			   margin-left:10px;
               color:#58585b;
               font-size:20px;}

#plus4		{ font-family:Rosario;
			  font-weight:200;
			  margin-top:10px;
			  margin-left:10px;
			  color:#58585b;
			  font-size:12px;}
			  
			  
.nofloat { clear:both;}
footer{ width:100%;display:table; margin: 50px 0 10px 0; outline-color: #C63; }
footer hr { color: #888888; max-width: 100%; height: 3px; background-color: #888888; border-style:none; margin: 20px 0px 0px 0px ; }
footer p{ font-family: Rosario; font-size:10px; color:#888888; text-align: left; } 
footer span{ font-family: Rosario; font-size:12px; color:#888888; text-align: left; }