* {margin: 0; padding: 0; 
	-webkit-box-sizing: border-box; /*box-sizing sirve para que no aumente de ancho el contenedor*/
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

body { background-color:#f2f2f1; font-family: 'Roboto', sans-serif; width: 100% }

#wrapper-subh{ text-align: center; background-color: #3389d7;} 
#sub-header{ width: 100%; max-width:1024px; display: inline-block; height: 40px; }
#sloga-left{  float: left;  margin: 8px; padding: 4px; width: 40%; display: inline-block;}
#sloga-left h1{border-left: 1px solid #fff; float: left; padding-left: 8px;  color: #3c4142;  font-weight: 300; font-size: 14px; color:#fff; }

#sloga-right{  float: right;  margin: 8px; padding: 4px; width: 40%; display: inline-block; }
#sloga-right h2{ border-left: 1px solid #fff; float: right; padding-left: 8px;  color: #3c4142;  font-weight: 300; font-size: 13px; color:#fff; }

#wrapper-header{ background-color: rgba(27, 25, 25, 0.5); text-align: center; position: absolute; width: 100%; z-index: 5;}

header{
	/*background-color: yellow;*/
	display: inline-block;
	margin-bottom: -4px;
	width: 100%;	
	max-width:1024px;
	z-index: 5;
	position: relative;	
}

#logo{ float: left; width: 15%; padding: 20px; }

.menu-bar{ display: none; }

header nav { float: right; width: 70%; margin-top: 10px; padding: 15px; /*background-color: yellow;*/ }

header nav ul{ padding: 0; font-size: 0; float: right;  /*background-color: yellow;*/  }

header nav ul li{
	margin-left:8px;  
	display: inline-block;	
	font-size: 13px;	
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;  
	border-radius: 3px;
	height: 100%;  
}

.activate a{ color:#fff; background-color: #3389D7; -webkit-border-radius: 3px; 
	-moz-border-radius: 3px;  
	border-radius: 3px; }

header nav ul li:hover{ background-color: #3389D7; }

header nav ul li a{
	display: block; /*block para aplicar el padding arriba,abajo y a los extremos*/
	padding: 10px; 
	text-align: center; 
	color: #fff; text-decoration: none; 
	text-transform: uppercase;
	font-weight: 700;
}

@media screen and (max-width: 780px){
	#sub-header{ display: none; }
	#logo{display: none;}
	header nav{	
		left: -100%;	
		width: 50%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: fixed;
		background-color: #3389d7;
		
	}

	header nav ul{
		float: left;
		width: 100%		
	}

	header nav ul li{
		display:block; /*para que ocupen el 100% de ancho los botones*/
		float: none;
		margin: 8px;
	}
	header nav ul li a{
		color:#fff;
	}

	.menu-bar{		
		display: inline-block;		
		width: 99%; /*99% de 100% para evitar un margin bottom fantastama*/
		background-color: #fff;
	}

	#logo-resposive{
		float: left;
		padding: 20px;			 	
	}

	.btn-menu{ 
		float: right;
		padding: 20px;
		margin-top: 16px;
	 }
	
}

@media screen and (max-width: 460px){

	.menu-bar{		
		display: inline-block;		
		width: 98%; /*99% de 100% para evitar un margin bottom fantastama*/
		background-color: #fff;
	}
}
#b1-wrapper{ text-align: center; }
#banner1{ display: inline-block; }
#banner1 ul li img{ margin-bottom: -4px; }
.rslides li img{ margin-bottom: -4px; }
#text-banner{ display: none; }

@media screen and (max-width: 700px){
	#text-banner{ display: block; }
	#text-banner h2{ color: #3876ae; font-size: 20px; padding: 6px; }

}

#c-wrapper{ text-align: center; background-color: #fff;  }
#conocenos{ 
	/*border:3px solid black;	*/
	font-size: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	max-width:1024px;
	margin-top: 40px;
	margin-bottom: 40px;
}

#conocenos #intro{
	font-size: 14px;	
	float: left;
	width: 60%;
	/*background-color: yellow;*/
}

#conocenos #banner2 { 	
	float: right;
	/*background-color: yellow;*/
}

#conocenos #banner2 img{ 
	float: right;
	padding-top: 30px;
	max-width: 93%;
}

#conocenos #intro h2, p, h3, li{ 
	text-align: left; list-style: none; 
	color:#3c4142; line-height: 22px; 
	font-weight: 300; }

#conocenos #intro h2{ 
		font-size: 22px; padding-bottom: 6px; 
		color:#3876ae; border-bottom: 5px solid #fade03; 
		width: 130px; z-index: 2; position: relative;
		font-weight: 700; 
	}
#conocenos #intro p{ 
	margin-top: -1px;
	padding-top: 23px; 
	border-top: 1px solid #d8d8d8;
	z-index: 1; 
	position: relative; font-size: 15px;
	padding-bottom: 20px;
}

#conocenos #intro h3{
	color: #3876ae; font-weight: 400;
	padding-bottom: 8px;
}

#conocenos #intro ul{
	padding-left: 20px;
	border-left: 4px solid #acadad;
	margin-left: 20px;
}

#conocenos #intro ul li{
	margin-bottom: 4px;
}

#conocenos #intro span{
	font-weight: 500;
}

@media screen and (max-width: 880px){

	#conocenos h2{ margin: 0 auto; }

	#conocenos #intro ul{
		padding-left: 0;
		border-left: none;
		margin-left: 0;
	}

	#conocenos #intro{
		display: block;	/* Cuando el ancho sea inferior a 600px el elemento será un bloque */
		width: 100%;
		max-width: 100%;
		float: none;
		text-align: center;
		margin-bottom: 20px;
		padding: 10px;
	}
	#c-wrapper #conocenos #intro h2{ text-align: center; }
	#c-wrapper #conocenos #intro h3{ text-align: center; }
	#c-wrapper #conocenos #intro ul li{ text-align: center; }
	#conocenos #banner2 { float: none; }
	#conocenos #banner2 img{ float: none; padding-top: 0; margin-top: -10px; max-width: 322px; width: 100% }
}

/*===================== INSTALACIONES =========================*/

#i-wrapper{ text-align: center; margin: 0 auto; max-width:1424px;}
#instalaciones{ /*text-align: center;*/ max-width:1424px; } 

#instalaciones #encabezado-i{ display: inline-block; width: 1024px; border-bottom: 1px solid #d8d8d8; 
		margin-top: 40px; font-size: 0;}
#instalaciones #title-i{ float: left; }
#instalaciones #title-i h2{ font-size: 22px; padding-bottom: 6px; color:#3876ae; border-bottom: 5px solid #fade03; 
	width: 164px; z-index: 2; position: relative; font-weight: 700; }

#instalaciones #buttons-nav{ float: right; margin-top: 7px; }

#instalaciones #buttons-nav, #next, #prev{ display: inline-block; font-size: 0; }

#galery-wrapper{ margin-top: -5px; padding-top: 35px;  z-index: 1; 
	position: relative; margin-bottom: 40px; /*margin-top: -1px;*/ }

#galery-wrapper article a img { max-width: 95%; }

@media screen and (max-width: 1022px){
	
	#instalaciones #buttons-nav{
	display: none;
	}
}

@media screen and (max-width: 940px){

	#galery-wrapper{ border-top: 1px solid #d8d8d8; }
	#instalaciones #title-i{ width: 100%; }
	#instalaciones #title-i h2{ display: inline-block; text-align: center; }
	#instalaciones #buttons-nav #prev, #next{ float: left; }
}

@media screen and (max-width: 660px){
	#instalaciones #buttons-nav{ display: none; }
}
/*===================== FIN INSTALACIONES =========================*/

/*===================== SERVICIOS =========================*/
#wrapper-s{	text-align: center; background-color: #fff;}

#servicios{ 
	font-size: 0; 
	display: inline-block;
	width: 100%;
	max-width: 1024px;
	margin-bottom: 45px;
	/* border: 1px solid black*/ }

#servicios #encabezado-s{ margin-top: 35px;}

#servicios #encabezado-s #title-i h2{
	font-size: 22px; 
	padding-bottom: 6px; 
	color:#3876ae; 
	border-bottom: 5px solid #fade03; 
	width: 110px; 
	z-index: 2; 
	position: relative;
	font-weight: 700;
}

#intro-s{ 
	border-top: 1px solid #d8d8d8;
    margin-bottom: 25px;
    margin-top: -1px;
    /*padding-left: 23px;*/
    padding-top: 30px;
    position: relative;
    /*text-align: center;*/
    z-index: 1; }

#intro-s p{ 
	font-size: 15px; 
	color: #3c4142;
    font-weight: 300;
    line-height: 22px;
    list-style: none outside none;
    text-align: left;
    width: 78%; 
}

#s-incluidos{ float: left;   width: 50%;}
#s-adicionales{ float: right; width: 50%;}

#s-incluidos #title-i{
	display: block; 
	padding: 13px;
	border: 1px solid #3876ae;
	width: 100%;
	display: inline-block;
}
#s-adicionales #title-a{
	display: block; 
	padding: 13px;
	border: 1px solid #3876ae;
	width: 100%;
	display: inline-block;
}
#s-incluidos #title-i h2{
	font-size: 15px;
	float: left;
	padding-left: 13px;
	color:#3876ae;
	font-weight: 600;
	font-size: 18px;	
}

#s-adicionales #title-a h2{
	font-size: 15px;
	float: left;
	padding-left: 13px;
	color:#3876ae;
	font-weight: 600;
	font-size: 18px;
}

#descrip-i #list-1 ul li h3, #descrip-i #list-2 ul li h3{
	font-size: 15px;
	font-weight: 300;
	padding-left: 29px;
}

#descrip-i ul li{
	margin-top: 20px;
}

#descrip-i ul li span{
	float: left;
	margin-right: 18px;
	margin-top: 7px;
	width: 8px;
    height: 8px;
    background-color: #f35f06;
	border-radius: 10px 10px 10px 10px;
	}

#descrip-i #list-2 ul{	border-right: 1px solid #d8d8d8;}

#list-1{
	float: left;
	width: 47%;
	/*border: 1px solid black;*/
	padding-left: 29px;
}
#list-2{float: right;
	width: 46%;
	/*border: 1px solid black;*/
	padding-left: 15px;
}

/*---- adicionales ------*/

#descrip-a ul li h3{
	font-size: 15px;
	font-weight: 300;
	padding-left: 42px;
}

#descrip-a ul{
	padding-left: 27px;
	margin-top: 20px;
}

#descrip-a ul li{
	margin-bottom: 35px;
}

#descrip-a ul li span{
	float: left;
	margin-right: 18px;
	margin-top: 7px;
	width: 8px;
    height: 8px;
    background-color: #f35f06;
	border-radius: 10px 10px 10px 10px;
}

@media screen and (max-width: 940px) {

	#servicios{
		margin-bottom: 0;
	}

	#s-incluidos {
    /*float: none;*/
    width: 100%;
    display: block;
    margin-bottom: 30px;
	}

	#s-adicionales {
    /*float: none;*/
    width: 100%;
    display: block;
	}

	#servicios #encabezado-s #title-i{
		width: 100%
	}

	#servicios #encabezado-s #title-i h2{
		text-align: center;
		display: inline-block;
	}

	#intro-s {
    width: 100%;
    
	}

	#intro-s p {
    text-align: center;
    width: 100%;
}

	#s-incluidos #title-i h2{
    
    display: inline-block;
    width: 100%;
    text-align: center;
	}
	#descrip-i #list-2 ul {
    border-right: none;
	}
	#list-1{  width: 53%; }

	#list-1 ul{ padding-left: 70px; }

	#list-2 { padding-right: 57px; width: 47%; }	

	#descrip-i ul li { width: 100%; }

	#descrip-i #list-1 ul li h3, #descrip-i #list-2 ul li h3 { 
    	text-align: left;
	}

	/*----- adicionales ------*/

	#s-adicionales #title-a h2 {
    text-align: center;
    width: 100%;
	}
	
	#descrip-a ul {
    display: inline-block;
    margin-top: 20px;
    padding-left: 0;
    padding: 20px;
    text-align: center;
	}	
}

@media screen and (max-width: 600px){
	
	#list-1 {
    display: block;
    width: 100%;
    padding-left: 0;
	}

	#list-1 ul{ 
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
		padding-bottom: -20px;
		display: inline-block;
	    text-align: center;
	    width: 85%;
	    
	}
	#list-2 {
	display: block;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
	}
	#list-2 ul{ 
		padding-left: 20px;
		padding-right: 20px;
		padding-top: -20px;
		display: inline-block;
	    text-align: center;
	    width: 85%;
	    
	}
}

/*---- banner3 ----*/
#wrapper-b3{ text-align: center; }

#banner3{ display: inline-block; }

#banner3 img{ margin-bottom: -4px; width: 100%; max-width:1024px; height: auto; }

/*---- contacto ----*/

#wrapper-c{ text-align: center; background-color: #fff;}
#contacto{ 
	font-size: 0; 
	display: inline-block;
	width: 100%;
	max-width: 1024px;
	/*margin-bottom: 45px;*/
	}

#contacto #encabezado-c {
    margin-top: 35px;
}


#contacto #encabezado-c #title-i h2{ 
	border-bottom: 5px solid #fade03;
    color: #3876ae;
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 6px;
    position: relative;
    width: 113px;
    z-index: 3; 
	}

#content-form{
	width: 100%;
	border-top:1px solid #d8d8d8;
	position: relative;
	z-index: 1;
	margin-top: -2px;
}
#left-c{
	padding: 3%;
	width: 40%;
}
#left-c ul li h3{
	font-size: 15px;
}

.list-one{
	margin-bottom: 35px;
}

/*--- direccion ---*/
.direc { float: left; width: 30%;}

#left-c ul li span{ float: left; width: 24px;}

.icon-direc{margin-right: 11px; }

.direc-info{ text-align: right; display: inline-block; padding-left: 30px; }

.espacio1{ margin-bottom: 20px; }

/*--- tel ---*/
.icon-tel{margin-right: 11px; padding-top: 4px; }
.tel{ float: left; width: 30%; }
.tel-info { display: inline-block; padding-left: 30px; text-align: right; }
.list-two{margin-bottom: 38px; }

/*--- email ---*/
.icon-email{ margin-right: 11px; padding-top: 6px; }
.email{ float: left; width: 30%; }
.email-info {  float: left; padding-left: 33px; }
.list-tree{ width: 100%; display:inline-block; }
.list-tree{margin-bottom: 40px; }

/*--- site ---*/
.icon-site{ margin-right: 11px; padding-top: 6px; }
.site{ float: left; width: 30%; }
.site-info {  float: left; padding-left: 33px; }
.list-four{ width: 100%; display:inline-block; }

/*---- right-c ----*/
#left-c{ /*border: 1px solid black;*/  float: right; padding-left: 5%; width: 50%; padding-bottom: 0; }
#right-c{/*width: 40%;*/ /*padding-top: 40px;*/ /*border: 1px solid black;*/ float: left; padding-left: 5%;
    width: 50%;}
#content-form{ padding-top: 30px; display: inline-block; font-size: 0;}

/*===== Formulario =====*/

#formu{ width: 100%; display: inline-block; font-size: 0; /*border: 1px solid black;*/ }
#part1{ width: 100%; /*height: 180px;*/ /*position: relative;*/ padding: 5%; /*float: left;*/  }
#part2{ /*width: 100%;*/ /*height: 245px;*/ /*position: relative; padding: 5%;*/ /*float: left;*/ /*margin-left: 30px;*/  }

#part1 input{ font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; background-color:#fff;  
 margin-bottom: 30px; width: 100%; padding: 15px; border:1px solid #c6c4c4;}
#part1 input[type=text]{ color:#3c4142; font-weight: 300;}
::-webkit-input-placeholder { color:#3c4142;font-weight: 300; }
:-moz-placeholder { color:#3c4142; font-weight: 300;} /* firefox 19+ */
::-moz-placeholder { color:#3c4142; font-weight: 300;} /* firefox 19+ */
:-ms-input-placeholder { color:#3c4142; font-weight: 300;} /* ie */
input:-moz-placeholder { color:#3c4142; font-weight: 300;}

#part1 textarea{  font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 15px; background-color:#fff; 
border:1px solid #c6c4c4; min-height: 120px; width: 100%; padding: 15px; }

#part1 #submit{ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 15px; width: 100%; min-height: 45px;
 background-color:#fff;  color:#f44b10; margin-bottom: 0; cursor: pointer; padding:0; 
 border: 1px solid #f44b10; margin-top: 30px; }

 /*==== Responsive Contact ====*/

 @media screen and (max-width:880px){

 	#contacto #encabezado-c #title-i{ width: 100% }
 	#encabezado-c #title-i h2{ text-align: center; display: inline-block; }
 	#left-c { padding-left: 2%; }
 	#right-c {  padding-left: 3%;}

 	#direc-info li{ float: left; }

 	.direc-info, .tel-info, .email-info, .site-info {    
    padding-left: 8px;   
	}
	
}
@media screen and (max-width:765px){
	#left-c {
	    float: none;
	    width: 100%;
	    display: block;
	    padding-left:3%;
	}

	#right-c {
	    float: none;
	    display: block;
	    width: 100%;
	    padding-left: 0;
	    padding: 3%;
	}

	#left-c ul li span {
    float: left;
    /*text-align: left;*/
    width: 100%;
	}
	#conocenos #intro h2, p, h3, li {
    text-align: center;
	}
	.direc {
    /*float: left;*/
    width: 100%;
	}
	.tel {
	    float: left;
	    width: 100%;
	}
	.email {
	    float: left;
	    width: 100%;
	}
	.email-info {
	    float: none;
	}
	.site {
    float: left;
    width: 100%;
	}
	.site-info {
    float: none;
	}
}

#wrapper-mapa{ text-align: center; }
#mapa{ display: inline-block; }
#mapa img{ margin-bottom: -4px; width: 100%; max-width:1230px; height: auto; }

#wrapper-f{ background-color: #3389d7; height: 40px; width: 100%; text-align: center;}
#pie-pag{ display: inline-block; }
#pie-pag h2{ color: #3c4142;  font-weight: 300; font-size: 15px;color:#fff; padding: 10px; }

.fa-dot-circle-o:before{ font-size: 20px; }
.fa-diamond:before{ font-size: 23px; }