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

/* EFECTOS PAGINA */
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,700|Montserrat:400,700');

body,html,*{margin:0 auto;padding:0;} img{border:0;}
header{position:fixed; width:100%;z-index:50;}
.navi{background:rgba(9, 55, 29,.65); z-index:100;top:0; padding:0 10px; height:75px; box-shadow:#333 0 0 20px;}
.logo{position:absolute; left:0; padding:8px 30px;}
#ind{width:auto; height:63px; display:block; border:0;}

header nav {font-family: /*'Libre Franklin', sans-serif;*/ 'Montserrat', sans-serif;;  color:#FFF; float:right;}
header nav ul {overflow:hidden; list-style:none; }
header nav ul li {float:left;}
header nav ul li a {padding:28px 15px; /*modifica tamaño menu*/ display: block; color:#FFF; font-size:13px; text-decoration:none;}
header nav ul li a:hover {color:#CF0; background:rgba(0,0,0,.3); border-bottom:#CF0 3px solid;}
li.act a{color:#CF0; border-bottom:#CC0 3px solid;}  li.act a:hover{color:#CF0;}

.ubi{display:block;position:relative;margin:0 auto;}
.ubi::after{content: ""; background: url(img/01.jpg);opacity: 0.2;top: 0;left: 0;bottom: 0;right: 0;position: absolute;z-index: -1;}

/** RESPONSIVE **/
.menu_bar span{color:#FFF;float:right;right:0;padding:11px 30px;font-size:35px;position:fixed;cursor:pointer;visibility:hidden;}
.menu_bar span:hover{color:#FFC;} #iconx{display:none;color:#FFC;}

@media screen and (max-width:480px){.menu_bar span{visibility:visible;} 
header nav{width:60%;height:100%;background:rgba(0,51,0,.95);margin:0px;left:-105%;position:fixed;top:0;text-align:left;}
header nav ul li{display:block;float:none;border-bottom:#CF0 2px solid;}
header nav ul li a{padding:22px 20px 18px 20px;}
header nav ul li a:hover{border:0;} }



/** STYLE FORM CONTACTO **/
/**{ margin: 0px auto; padding:0px;}*/
#contact{display:block; padding:7% 0;}
#tx{font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:800; font-size:11px;	font-style:oblique}

/* Estilos del formulario */
form.contacto fieldset {border:#9F9F9F 0.1em solid;	width:80%; padding:30px; color: #262626; font: 11px sans-serif; box-shadow: 0 0 10px 0 #666;
    -webkit-box-shadow: 0 0 10px 0 #666; -moz-box-shadow: 0 0 10px 0 #666;}
form.contacto fieldset > div {clear: both; margin-bottom: 20px; overflow: hidden;}
form.contacto fieldset div label {display:block; float:left; margin-right:15px; margin-top:5px; text-align:right;text-transform:uppercase; width:64px;}

form.contacto input[type="text"], form.contacto textarea{background:#F5F5F5;border:1px solid #999;color:#626262;display:block;float:left;padding:8px;
    resize:none;width:80%; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s linear;}
form.contacto input[type="text"]:focus, form.contacto textarea:focus {background:#F9F9F9;border:1px solid #D3D3D3;outline:none;}
form.contacto .ultimo{margin-bottom:0;position:relative;}
form.contacto button {font-size:11px;background:#444444;border:0 none;color:#FFFFFF;float:right;font-weight:bold;height:32px;padding:0 10px;position:relative;
   text-transform:uppercase; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;}
form.contacto button:hover{background:#6A6A6A;}

/*fragmento de error de falta llenar campos*/
.error{float:right;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;background:#006600;color:#FFFFFF;padding:7px;height:17px;margin-top:1px;position:absolute;}

/* AJAX Gif y mensajes de exito o fracaso */
.hide{display: none;}  .ajaxgif{position:absolute;right:150px;top:5px;}
.msg{color:white;font-weight:bold;height:32px;line-height:32px;padding:0 10px;position:absolute;right:-155px;text-transform:uppercase;min-width:121px;}
.msg_ok{background:#589D05;}
.result{background: red;}

@media screen and (max-width:500px ) {form.contacto fieldset {width:85%; padding:15px;}	#contact{padding:20px 0;}}
@media screen and (max-width:450px ) {form.contacto fieldset {width:85%; padding:15px;}	form.contacto input[type="text"], form.contacto textarea{width:64%;}
	form.contacto fieldset, form.contacto button {font-size:11px;}}



/*** STYLE SLIDER ***/
.cb-slideshow, .cb-slideshow:after {margin:0; position:relative; width:100%; height:500px; top:0px; left:0px; z-index:0; overflow:hidden;}
.cb-slideshow:after {content: ''; opacity:0.6; position:absolute; background:transparent url(img/pattern.png) repeat top left;}
.cb-slideshow li span {width:100%; height:100%;top:0; left:0; opacity: 0; background-size:cover; color:transparent;
		background-position:50% 50%; background-repeat: none; position:absolute; animation: imageAnimation 15s linear infinite 0s;}
.cb-slideshow li div {
background: -moz-linear-gradient(top,  rgba(230,96,35,1) 10%, rgba(230,96,35,1) 8%, rgba(230,96,35,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(230,96,35,1) 10%,rgba(230,96,35,1) 8%,rgba(230,96,35,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(230,96,35,1) 10%,rgba(230,96,35,1) 8%,rgba(230,96,35,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e66023', endColorstr='#00e66023',GradientType=0 ); /* IE6-9 */
position:absolute;height:150px;width:100%;top:0; animation: titleAnimation 15s linear infinite 0s; color: #fff;left: 0px;opacity: 0;}

.cb-slideshow li div p{font-family: 'Roboto', sans-serif;font-size:32px;text-align:center; padding-top:20px;text-shadow:#930 0em 0em 0.3em;}
.cb-slideshow li div p img{width:auto; height:30px; padding:0 5px;} .cb-slideshow li div p #jp{display:none;}

@media screen and (max-width:700px ){.cb-slideshow li div p img{padding:10px 5px;} .cb-slideshow li div p #jp{display:block;}}
@media screen and (max-width:600px ){.cb-slideshow{height:350px;}}
@media screen and (max-width:420px ){.cb-slideshow{height:280px;}}
@media screen and (max-width:600px ){.cb-slideshow li div p{font-size:30px;} .cb-slideshow li div{height:120px;}}
@media screen and (max-width:420px ){.cb-slideshow li div p{font-size:20px;padding-top:5px;text-align:center;} .cb-slideshow li div{height:140px;}}
	
.cb-slideshow li:nth-child(1) span {background-image: url(img/slider/slider01.jpg);}
.cb-slideshow li:nth-child(2) span {background-image: url(img/slider/slider02.jpg); animation-delay: 5s;}
.cb-slideshow li:nth-child(3) span {background-image: url(img/slider/slider03.jpg); animation-delay: 10s;}
.cb-slideshow li:nth-child(3) div {animation-delay: 3s;}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    6% { opacity: 1; animation-timing-function: ease-out; }
    48% { opacity: 1 }
    55% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0; transform: translateY(-30px); }
    6% { opacity: 1;transform: translateY(0);}
    48% { opacity: 1 }
    54% { opacity: 0 }
    100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span{opacity: 1;}



/** STYLE LOGIN  **/
.login{position:fixed; width:100%; height:100%; background:rgba(51,51,51,0.5); z-index:50;}
#outlog{width:100%; height:100%; position:absolute; z-index:-3;}
.access{margin-top:10%; width:350px; height:320px;; padding:30px; background:RGBA(235, 240, 186, 0.7);	box-shadow:#333 0px 0px 15px 0px;}
#tabdat{font-family: "PT Sans", sans-serif; background-color:#F4F4F4; border:#000066 solid 0.1em; box-shadow:#333 0px 0px 8px 1px; border-radius: 0.4em; padding:5px;}
@media screen and (max-width:420px ) { .access{width:265px; height:340px; padding:15px; margin-top:5px;} #tabdat{padding:5px 0;}}

/*estilo de link olvido contraseña*/
.olvid{font-size:9px; color:#006666; text-decoration:none;}  .olvid:hover{color:#333; text-decoration:underline;}


/** STYLE FORM **/
.contact_form ul {width:150px; list-style-type:none; margin:0px; padding:0px;}  .contact_form li{border-bottom:1px solid #eee; position:relative; padding:3px 0px;} 
.contact_form label {color: #333; display: inline-block; float: left; font-family: sans-serif; font-size: 13px; font-weight: bold;
	margin-top: 3px; padding: 3px; padding-bottom:6px; width: 200px;}
.contact_form input {height:20px; width:230px; padding:5px 8px;} .contact_form textarea {padding:8px; width:205px;} .contact_form button {margin-left:20px;}

/*----- 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: #0000; font-size: 12px; padding-right:38px; -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:45px; color: #036;}

/* === Estilos del boton de Envio === */
button.submit {padding: 9px 10px; 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;}

/* === Estilos del boton de BORRAR === */
button.reset {padding: 9px 10px; 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.reset:hover {opacity:.55; cursor: pointer;  color: #fff;}  button.reset:active {border: 1px solid #222; box-shadow: 0 0 10px 5px #444 inset;} 

@media screen and (max-width:420px ) {.access{left:-6px;margin-top:11%;} button.submit, button.reset {padding:3px 5px;}  
	.contact_form input {width:200px; padding:5px 3px;} .contact_form input:focus{ padding-right:18px;} }