﻿body{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+27,1f4c96+100 */
	
}
.altura{
width:100%;
}
.altura p{
	padding:25px 0;
	font-weight:600;
	font-family:Arial;
	color:black;	
}
.altura h1{
	font-weight:200;
	font-family:Arial;
}

.altura img{
margin-top:150px;

}
p{
	font-weight:200;
	font-size:18px;
}

.footer{
	bottom:0;
	width:100%;
	height:30px;
	background-color:#28235d;
	position:absolute;
	}
/*********INICIO***********/
#item1{
	background-image:url('../images/fondo.jpg');
	background-size: cover;
}
.menu-inicio{
	margin: 20% auto;
    display: table;
    color:#fff;
    background:#c10f25;
    padding: 15px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.3em;
    -webkit-box-shadow: 5px 5px 10px 2px #4c4c4c;
    box-shadow: 5px 5px 10px 2px #4c4c4c;
}
.menu-inicio:hover{
	background:#282457;
	 -webkit-box-shadow: none;
    box-shadow: none;

	
}
.acordion-movil{
	display:none;
}
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
/******** INDEX *********/
.izq1{
	position: fixed;
    z-index: 999;
    left: 0;
}
.izq2{
	bottom: 0;
    position: fixed;
    left: 0;
    z-index: 999;height:214px;
}
.der1{
	right: 0;
    top: 0;
    z-index: 999;
    position:fixed;
}
.der2{
	position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
}
/***INFRAESTRUCTURA***/
.nl, .tx{
	float:left;
	width:50%;
	padding: 5px 8%;
}
.nl p, .tx p{
	padding:0!important;
}
.nl img, .tx img{
    width: 100%;
    height: auto;
}
.nl-1, .nl-2, .tx-1, .tx-2{
	float:left;
	width:50%;
	margin-top: 10px;
}
.nl-2, .tx-2{
	padding-left: 15px;
	margin-top: 10%;
}
.nl-2 p, .tx-2 p{
	font-weight: 700!important;
    text-align: center!important;
}
.nl{
	 padding: 5px 8% 5px 5%;
}
.tx{
	 padding: 5px 5% 5px 8%;
}
.nl-1, .tx-1{
	border: 3px solid #c10f25;
    padding: 5px 5px 3px 5px;
}
.nl p{
	margin-bottom: 45px;
}
/********CONTACTO********/
.oficinas, .forma{
	width:50%;
	float:left;
}
.contacto{
	padding: 50px 10% 10px 10%;
}
input, textarea{
    width: 100%;
    height: 40px;
    padding: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    -webkit-box-shadow: inset 2px 2px 5px 3px #CCCCCC;
    box-shadow: inset 2px 2px 5px 3px #CCCCCC;
    color: #292457;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    border: none;
    }
textarea{
	height:130px;
}
#formulario{
	    background: #c10f25;
    padding: 30px 45px 65px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
button{
	    float: right;
}
.boton_envio{
	background: #848282;
    border: none;
    color: #fff;
    padding: 15px;
    font-size: 1em;
}
.boton_envio:hover{
	background:#282457;
}
::-webkit-input-placeholder { font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:800; } /* WebKit */
:-moz-placeholder {     font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:800;  } /* Firefox 18- */
::-moz-placeholder {    font-family: 'Lato', Calibri, Arial, sans-serif; font-weight:800;  } /* Firefox 19+ */
:-ms-input-placeholder {     font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:800;  } /* IE 10+ */

/***RESPONSIVO***/
@media screen and (max-width: 490px) {
	.der1, .der2, .izq1{
		display:none;
	}
	.content h2 {
		font-size: 1.6em;
	}
	.contacto {
    	padding: 20px 10% 10px 10%;
    }
    #formulario{
	      padding: 15px 15px 60px;
	}
	.izq2 img{
	    width: 100%;
	    height: auto;
	    bottom: 0;
	    position: fixed;
	}
}
@media screen and (max-width: 700px) {
	/*infraestructura*/
	.nl, .tx, .nl-1, .nl-2, .tx-1, .tx-2, .oficinas, .forma{
		float:none;
		width:100%;
	}
	.nl-2, .tx-2 {
	    padding-left: 0;
	    margin-top: 10px;
	}
	.nl p{
	    margin-bottom: 0px;
	}
	.tx, .oficinas{
	    margin-bottom: 20px;
	}
	/*infraestructura*/

}
@media screen and (max-width: 700px) and (min-width: 490px) {
	.izq1 img {
	    width: 55%;
	}
	.der2 img{
		height:200px;
	}
}
@media screen and (max-width: 1100px) and (min-width: 490px)  {
	.izq2{
		height:auto;
	}
	.izq2 img{
	    height: auto;
    	width: 60%;
	}
	.der1 img{
		height: 160px;
	}
}
@media screen and (max-width: 1100px) and (min-width: 700px) {
	.nl-1, .nl-2, .tx-1, .tx-2{
		width:100%;
		float:none;
	}
	#formulario{
	    padding: 20px 20px;
	}
	.der2 img{
		height:300px;
	}.izq1 img{
	    width: 70%;
	}

}
@media screen and (max-width: 1400px) and (min-width: 1100px)  {
	.izq2{
		height:170px;
	}
	.izq2 img{
		width:80%;
	}
	.nl-2, .tx-2{
		margin-top: 10px;
    	font-size: .9em;
	}
	.izq1 img{
		width:70%;
	}
	.der2 img{
		height:300px;
	}
	.der1 img{
		height:165px;
	}
}
@media screen and (max-width: 1700px) and (min-width: 1300px)  {
	.nl-2, .tx-2{
		margin-top: 10px;
	}

}
