* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0px;
	padding:0px;
}

body {
	background:#ffffff;
 /*color Fondo principal*/

	color:#333; /*color letra principal*/
	font-family:Arial, helvetica, sans-serif;
	
	  background: url(lb1.jpg) no-repeat center center fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	
	
	
	
}
 
a {
	text-decoration: none;
	color:#d5f0f4;
	color:#00000;
}
 
.wrapp {
	max-width: 1010px;
	-max-width: 100%;
	width:80%;
	margin:auto;
	overflow: hidden;
}
 
 
.header {
        position: fixed;
	width: 100%;
	height: 73px;
	padding:20px 0;
	background: #000000; /*color Fondo del header*/
	overflow: hidden;
}



rowmenu {
        position: fixed;
        z-index:1;
	width: 100%;
	height: 73px;
	padding:20px 0;
	background: #000; /*color Fondo del header*/
	overflow: hidden;


}

.slogan {

        font-family: "Techno Funk"; /*Tipo de letra del slogan*/
        font-size: small; /*Tamaño de letra del slogan*/   

}

 
.logo {
	width: 350px;
	float: left;
        font-family: "Techno Funk"; /*Tipo de letra del logo*/
        font-size: xx-large; /*Tamaño de letra del logo*/        
        background: #000000; /*color Fondo del logo*/
        color: #ffffff; /*color Letra del logo*/
        margin:0px 0px 80px 0px;
        

}
 
logo img {
	width:100%;
	vertical-align: initial;

}
 
nav {
	float: right;

}
 
nav ul li {
	display: inline-block;
	margin:0px 5px;

}
 
nav ul li a {
	display: block;
	color: #037E8C;
	background: #f2f2f2;
	padding:10px 20px;
	text-decoration: none;
	font-weight:bold;
        font-size: x-small;
        font-family: Arial Black;
        border-radius:20px;
	transition:all 300ms ease;
}
 
nav ul li a:hover {
	color: #fff;
	background: #b000ff;
}
 
.mensaje {
	-background:#b000ff;
	-padding:20px;
	-color:#fff;
	margin:30px 0px 10px 0px;
	-border-radius:5px;
}

.articulo img {
	border-radius: 20% 0; /*Borde redondeado */
	box-shadow: 0px 0px 15px #f2f2f2; /* Sombra */
	padding:5px 5px 5px 5px; /* Espacio entre la imagen y el borde */
	background:#fff; /* Color de fondo que se ve entre el espacio */
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
        max-width:100%;
}
.articulo img:hover {
	border-radius:0; /* Con esto quitamos el borde redondeado */
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	cursor:pointer;
}

.articulo {
	float: left;
	width: 110%;
	padding:0px 50px 20px 0px;
}

.articulo3 img:hover {
	border-radius:0; /* Con esto quitamos el borde redondeado */
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	cursor:pointer;


}

.articulo3 {
	float: left;
	width: 100%;
	padding:0px 20px 20px 0px;
	
}



.articulo2 li img {
	float: center;
	width: 70%;
	padding:20px 20px 20px 20px;
}


.articulo3 li:hover {
	float: center;
	width: 100%;
	padding:20px 20px 20px 20px;
	-position: absolute;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}





 
aside {
	float: left;
        margin:150px 100px -1000px 770px;
	width: 20%;
	background:#afcace;
	color:#fff;
	padding:20px;
	border-radius:20px;

}
 
.widget ul {
	margin-left:20px;
}
 
.widget ul li {
	margin:10px 0;
	width: 100%;
}
 
.widget ul li a {
	color:#fff;
}
 
.widget ul li a:hover {
	text-decoration: underline;
}
 
footer {
	max-width: 80%;
	background:#00006f; /*color de fondo del pie*/
	padding:5px 20px 5px 20px;
	color:#fff;
	border-radius:10px;
	margin:auto;

}

 
footer p {
	text-align:center;
}

social2 a {
	float: center;
}
	
.contact_form h2 {
    -background: none repeat scroll 0 0 #fff;
    border-radius: 5px;
    color: #5CD053;
    display: block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 0px;
    text-shadow: 1px 1px 1px #CCCCCC;
    margin: 10px 0px 0px 0px;


}

/*--- estilos para los ul y li del formulario ---*/
.contact_form ul {
    width:550px;
    max-width:100%;
    list-style-type:none;


}

.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
}

	
.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 90px;

}

.contact_form input {
    height:30px; 
    width:220px; 
    padding:5px 8px;
}
.contact_form textarea {
    padding:8px; 
    width:300px;
}
.contact_form button {
    margin-left:90px;
}

/*----- estilos visuales de los elementos --------*/
.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    color: #888;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:80px;
}

/* === Estilos de Validacion === */    
 
.contact_form input:required:valid, .contact_form textarea:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

/* === Estilos del boton de Envio === */
button.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit:hover {
    opacity:.55;
    cursor: pointer; 
    color: #fff;
}
button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}

    /* estilo de tabla mision ----------- */

    table.tabla,table.rwd_auto {border:1px solid #ccc;width:80%;margin:0 0 50px 0}
        .tabla th,.rwd_auto th {background:#ccc;padding:5px;text-align:center;}
        .tabla td,.rwd_auto td {border-bottom:1px solid #ccc;padding:5px;text-align:center}
        .tabla tr:last-child td, .rwd_auto tr:last-child td{border:0}
        
        
        .tabla {-webkit-box-shadow: 11px 10px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 11px 10px 5px -3px rgba(0,0,0,0.75);
box-shadow: -11px 10px 5px -3px rgba(0,0,0,0.75);
        }
    .rwd {width:100%;overflow:auto;}
        .rwd table.rwd_auto {width:auto;min-width:100%}
            .rwd_auto th,.rwd_auto td {white-space: nowrap;}
            
    @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px)  
    {
    
        table.tabla, .tabla thead, .tabla tbody, .tabla th, .tabla td, .tabla tr { display: block; }
        
        .tabla thead tr { position: absolute;top: -9999px;left: -9999px; }
        
        .tabla tr { border: 1px solid #ccc; }
        
        .tabla td { border: none;border-bottom: 1px solid #ccc; position: relative;padding-left: 50%;text-align:left }
        
        .tabla td:before {  position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
        
        .tabla td:nth-of-type(1):before { content: "Mision"; }
        .tabla td:nth-of-type(2):before { content: "Vision"; }
        .tabla td:nth-of-type(3):before { content: "Valores"; }

        
        .descarto {display:none;}
        .fontsize {font-size:10px}
    }
    
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-width : 320px) and (max-width : 480px) 
    {
        body { width: 100%; }
        .descarto {display:none;}
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) 
    {
        body { width: 100%; }
        .descarto {display:none;}
        .fontsize {font-size:10px}
    }


@font-face {
font-family:"Techno Funk";
src:url("Techno_Funk.eot?") format("eot"),
url("Techno_Funk.woff") format("woff"),
url("Techno_Funk.ttf") format("truetype"),
url("Techno_Funk.svg#TechnoFunk") format("svg");
font-weight:normal;font-style:normal;
}