/*Reset and HTML5 Stuff */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/*Resolución Grande*/
.display-great{
	display: inherit !important;
}

h1{
	font-weight: bold;
	font-size: 34px;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}


h2{
	color: white;
	font-weight: bold;
	font-size: 34px;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}


h3{
	color: white;
	font-weight: bold;
	font-size: 20px;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}

h3.black{
	color: black;
	font-weight: bold;
	font-size: 20px;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}

hr{
	border: 1px solid #D1782D;
	margin: 7px;
}

h6{
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
}

/*Contenedor de mensaje*/
#transparencia_mensaje{
	background:url(../images/lib/fondo-peticion.png);
	z-index:999999; 
	width:100%;
	height: 100%;
	position: fixed;
	display: none;
	text-align: center;
}

	#mensaje_mensaje{
		background-color: white;
		width: 100%;
		margin: 220px 0 0 0;
		padding: 50px;
		position: fixed;
	}

	.mensaje-error-input{
		background-color: #C10000;
		color: white;
		border-radius: 0 0 1em 1em;
		width:87%;
		font-size: 14px;
		float:right;
		margin: -15px 0 0 0;
		text-align: center;
	}
	.mensaje-error-textarea{
		background-color: #C10000;
		color: white;
		border-radius: 0 0 1em 1em;
		width:87%;
		font-size: 14px;
		margin: -45px 0 0 0;
		float:right;
		text-align: center;
	}
	.mensaje-error-captcha{
		background-color: #C10000;
		color: white;
		border-radius: 0 0 1em 1em;
		width:53%;
		float: right;
		font-size: 14px;
		margin: 0 1px 0 0;
		text-align: center;
	}


/*
##########################################################
##########################################################
##########									##############
##########		    HEADER					##############
##########		   							##############
##########################################################
##########################################################
*/

header, nav{
    display: block;
}

/* Definimos un ancho 100% y una altura fija para nuestro menú */
header{
    background-color: white;
    height:73px;
    position: fixed;
    width: 100%;
    z-index: 2;
    padding: 10px 0 10px 0;
    -webkit-box-shadow: -1px 11px 3px -7px rgba(0,0,0,0.53);
-moz-box-shadow: -1px 11px 3px -7px rgba(0,0,0,0.53);
box-shadow: -1px 11px 3px -7px rgba(0,0,0,0.53);
}

    /*Contenedor del Logo*/
    .logo{
        float: left;
        margin: 0 0 0 20px;
    }

        /*Propiedades del logo*/
        header img{
            width: 120px;
            float: left;
        }


/*
##########################################################
##########################################################
##########									##############
##########		    SLIDER					##############
##########		   							##############
##########################################################
##########################################################
*/

section#slider{
	width: 100%;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding: 0 0 3px 0;
}

.pikachoose {
	width: 100%; 
	margin: 0 auto;
}

/* Style the thumbnails */
.pika-thumbs{ 
	/*padding: 0 16px; */
	height: 75px;
	width: 980px;
	margin: 0 auto;
}
	.pika-thumbs li{ 
		width: 183px; 
		/*height:122px; */
		margin: 10px 0 0 17px; 
		padding: 0; 
		overflow: hidden;
		float: left; 
		list-style-type: none;
		/*padding: 3px; */
		margin: 0 5px; 
		background: #fafafa; 
		border: 1px solid #e5e5e5; 
		cursor: pointer;
	}
	.pika-thumbs li .clip {
		position:relative;
		height:100%;
		text-align: center; 
		vertical-align: middle; 
		overflow: hidden;
	}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {
	width: 100%;
}
.pika-stage {
	position: relative;
	/*border: 1px solid #e5e5e5; */
	/*padding: 10px 10px 40px 10px; */
	text-align:center; 
	width: 100%;
}

.pika-stage img{
	width: 100%;
}

.pika-stage .caption {
	background-color: rgba(237, 128, 38, 0.5);
	font-size: 20px; 
	color: white; 
	padding: 10px; 
	text-align: center;
	font-weight: bold;
	width: 100%;
	position: absolute; 
	margin-top: -360px;
}
	.pika-stage .caption p {
		padding: 0; 
		margin: 0; 
		line-height: 14px;
	}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(../images/slider/lib/prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(../images/slider/lib/next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(../images/slider/lib/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(../images/slider/lib/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{
	font-size:16px;
	position:absolute;
	color:white;
	padding:3px;
	background-color: rgba(237, 128, 38, 0.7);
}
.pika-counter{
	position: absolute;
	bottom: 45px;
	left:15px;
	display: none;
	color:white;
	font-size:18px;
	padding:3px;
	/*background-color: rgba(237, 128, 38, 0.7);*/
	background-color: red;
	-moz-border-radius: 5px;
	border-radius:5px;
}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ 
	background:url(../images/slider/lib/loading.gif) 3px 3px no-repeat #000; 
	background-color: rgba(237, 128, 38, 0.5); 
	color:white; 
	width:60px; 
	font-size:11px; 
	padding:5px 3px; 
	text-align:right; 
	position:absolute; 
	top:15px; 
	right:15px;
}



.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}




/*
##########################################################
##########################################################
##########									##############
##########		    NOSOTROS				##############
##########		   							##############
##########################################################
##########################################################
*/

section#nosotros{
	overflow: hidden;
	padding: 90px 20px 90px 20px;
	font-size: 18px;
}

article.nosotros{
	height: 180px;
	margin: 0 auto;
	padding: 10px;
}

	p.aliniado-left{
		width: 820px;
		text-align: justify;
		float: left;
		margin: 0 15px 0 0;
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-webkit-animation-delay: 0.4s;
		-moz-animation-delay: 0.4s;
	}

	p.aliniado-right{
		width: 820px;
		text-align: justify;
		float: right;
		margin: 20px 15px 0 0;
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-webkit-animation-delay: 0.4s;
		-moz-animation-delay: 0.4s;
	}


	article.nosotros img{
		width: 97%;
		height: 170px;
	}


	.imagen-nosotros1{
		width: 340px;
		float: right;
		text-align: center;
	}

	.imagen-nosotros2{
		width: 340px;
		float: left;
		text-align: center;
	}





/*
##########################################################
##########################################################
##########									##############
##########		    SERVICIOS				##############
##########		   							##############
##########################################################
##########################################################
*/

section#servicios{
	overflow: hidden;
	padding: 90px 20px 90px 20px;
	font-size: 18px;
	background-color: #333333;
}

article.servicios{
	height: 440px;
	margin: 0 auto;
	width: 97%;
	padding: 10px;
}

	.servicio{
		width: 23%;
		float: left;
		margin: 5px;
		text-align: center;
		overflow: hidden;
	}

		.img-servicio{
			background-color: #d4282a;
			border-radius: 50%;
			width: 95px;
			height: 95px;
			text-align: center;
			margin: 15px auto;
			-webkit-animation-duration: 3s;
			-moz-animation-duration: 3s;
			-webkit-animation-delay: 0.4s;
			-moz-animation-delay: 0.4s;

		}

		.img-servicio img{
			width: 70px;
			margin: 10px;
			-webkit-animation-duration: 3s;
			-moz-animation-duration: 3s;
			-webkit-animation-delay: 0.9s;
			-moz-animation-delay: 0.9s;
		}

	ul#servicios{
		text-align: left;
		padding: 20px 0 0 20px;
		list-style-image: url(../images/servicios/bullet-p.png);
		color: #F5F5F3;
		font-size: 16px;
	}

	ul#servicios li{
		margin: 13px 5px 5px 5px;
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-webkit-animation-delay: 2s;
		-moz-animation-delay: 2s;
		text-align: justify;
	}


/*
##########################################################
##########################################################
##########									##############
##########		    NORMAS				##############
##########		   							##############
##########################################################
##########################################################
*/

section#normatividad{
	overflow: hidden;
	padding: 90px 20px 90px 20px;
	font-size: 18px;
}

p.info-normas{
	margin: 10px 0 30px 0;
}

ul#normas{
		text-align: left;
		padding: 5px 0 50px 40px;
		list-style-image: url(../images/servicios/bullet-p.png);
		font-size: 16px;
		overflow: hidden;
	}

	ul#normas li{
		margin: 13px 5px 5px 5px;
		-webkit-animation-duration: 3s;
		-moz-animation-duration: 3s;
		-webkit-animation-delay: 2s;
		-moz-animation-delay: 2s;
		text-align: justify;
	}


/*
##########################################################
##########################################################
##########									##############
##########		    CONTACTO				##############
##########		   							##############
##########################################################
##########################################################
*/

section#contacto{
	overflow: hidden;
	padding: 90px 20px 90px 20px;
	font-size: 18px;
	background-color: #333333;
}

article.formas-contacto{
	width: 440px;
	height: 300px;
	padding: 10px;
	float: right;
	text-align: right;
	color: white;
}

	.forma-contacto{
		margin: 60px;
		-webkit-animation-duration: 2s;
		-moz-animation-duration: 2s;
		-webkit-animation-delay: 0.6s;
		-moz-animation-delay: 0.6s;
	}

	.forma-contacto img{
		width: 50px;
	}

	span{
		float: right;
		width: 230px;
	}

	span a{
		color: white;
	}


article.form-contacto{
	width: 560px;
	height: 680px;
	padding: 10px;
	float: left;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	color: white;
}

.componente-form{
	width: 590px;
	height: 90px;
	margin-top: 5px;
}

.componente-form-capt{
	width: 590px;
	height: 120px;
	margin-top: 5px;
	text-align:right;
}

.componente-form-msj{
	width: 590px;
	height: 260px;
	margin-top: 5px;
}

.componente-form-btn{
	width: 590px;
	height: 260px;
	margin-top: 5px;
	text-align:right;
}

form input[type='text'],form input[type='number'],form input[type='email']{
	width: 85%;
	height: 30px;
	font-size: 17px;
	float: right;
	border-radius: 0.5em;
	/*box-shadow: 0 0 0 3px #CFD7DB; para poner sobra a un cuadro*/
	border: 1px solid #CED5D7; /* para  darle un borde*/
	padding: 2px 7px 2px 7px;
	margin: 0 0 20px 0;
	color: #797C69;
	/* Firefox */
	-moz-transition: all 300ms ease-out 20ms;
	/* Chrome / Safari */
	-webkit-transition: all 300ms ease-out 20ms;  /* para  darle animacion*/
	/* Opera */
	-o-transition: all 300ms ease-out 20ms;
	/* Default */
	transition: all 300ms ease-out 20ms;
}

form input[type='text']:focus,form input[type='number']:focus,form input[type='email']:focus{
	border: 1px solid #A0D0E6;
	color: #44463C;
	outline: none;
	border: 1px solid #545649;
}

form textarea{
	width: 85%;
	height: 220px;
	float: right;
	border-radius: 0.5em;
	/*box-shadow: 0 0 0 3px #CFD7DB; para poner sobra a un cuadro*/
	border: 1px solid #CED5D7; /* para  darle un borde*/
	padding: 2px 7px 2px 7px;
	margin: 0 0 50px 0;
	color: #797C69;
	/* Firefox */
	-moz-transition: all 300ms ease-out 20ms;
	/* Chrome / Safari */
	-webkit-transition: all 300ms ease-out 20ms;  /* para  darle animacion*/
	/* Opera */
	-o-transition: all 300ms ease-out 20ms;
	/* Default */
	transition: all 300ms ease-out 20ms;
}

form textarea:focus{
	border: 1px solid #A0D0E6;
	color: #44463C;
	outline: none;
	border: 1px solid #545649;
}

form input[type='submit']{
    text-decoration: inherit;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #eeb44f;
    padding: 9px;
    text-shadow: 1px 1px 0px #cc9f52;
    -webkit-box-shadow: inset 1px 1px 0px 0px #fce2c1;
    -moz-box-shadow: inset 1px 1px 0px 0px #fce2c1;
    box-shadow: inset 1px 1px 0px 0px #fce2c1;
    cursor: pointer;
    color: #ffffff;
    display: inline-block;
    background: -webkit-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: -moz-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: -ms-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: linear-gradient(180deg, #ffc477 5%, #fb9e25 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc477",endColorstr="#fb9e25");
    float: right;
    font-weight: bold;
    margin: 10px;
    width: 120px;
    height: 40px;
}

input[type='button']{
    text-decoration: inherit;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #eeb44f;
    padding: 9px;
    text-shadow: 1px 1px 0px #cc9f52;
    -webkit-box-shadow: inset 1px 1px 0px 0px #fce2c1;
    -moz-box-shadow: inset 1px 1px 0px 0px #fce2c1;
    box-shadow: inset 1px 1px 0px 0px #fce2c1;
    cursor: pointer;
    color: #ffffff;
    display: inline-block;
    background: -webkit-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: -moz-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: -ms-linear-gradient(90deg, #fb9e25 5%, #ffc477 100%);
    background: linear-gradient(180deg, #ffc477 5%, #fb9e25 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc477",endColorstr="#fb9e25");
    font-weight: bold;
    margin: 10px auto;
    width: 120px;
    height: 40px;
}

form input[type='submit']:hover,input[type='button']:hover{
	 background: -webkit-linear-gradient(90deg, #ffc477 5%, #fb9e25 100%);
    background: -moz-linear-gradient(90deg, #ffc477 5%, #fb9e25 100%);
    background: -ms-linear-gradient(90deg, #ffc477 5%, #fb9e25 100%);
    background: linear-gradient(180deg, #fb9e25 5%, #ffc477 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb9e25",endColorstr="#ffc477");
}

form input[type='button']:active,input[type='button']:active{
	position:relative;
	top:1px;
}

b{
	color: #FB0000;
}



/*
##########################################################
##########################################################
##########									##############
##########		    Privacidad				##############
##########		   							##############
##########################################################
##########################################################
*/

section#politica{
	width: 100%;
	overflow: hidden;
	margin: 0 0 90px 0;
	padding: 120px 0 0 0;
}

p.politicas{
	margin: 20px 20px 20px 20px;
	text-align: justify;
}


p.num-politicas{
	margin: 20px 20px 20px 20px;
	text-align: justify;
	font-weight: bold;
}

a.link-propio{
	color: #d0772c;
}


/*
##########################################################
##########################################################
##########									##############
##########		    FOOTER 					##############
##########		   							##############
##########################################################
##########################################################
*/

footer{
	overflow: hidden;
	padding: 20px;
	height: 20px;
	background-color: black;
	color: white;
	text-align: center;
}

h6 a{
	color: white;
}