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

*{ margin:0; padding:0; border:0; outline:none}

body{ background: url(../images/bg.jpg); margin-bottom:25px}

#wrapper{ width:960px; height:auto; background:#FFF; padding:20px; margin:20px auto 0 auto;}
h1{ width:200px; height:79px; background:#000; padding-top:38px; padding-left:35px; float:left; font-family: 'Lato', sans-serif; font-weight:normal; line-height:25px}
h1 a{ color:#FFF; text-decoration:none}
#nav{ width:720px; float:left; margin:0; padding:0; font-family: 'Montserrat', sans-serif;}
#nav ul{ margin:0; padding:0}
#nav li{ float:left; margin:0; list-style:none; height:117px; text-align:center; background-image: linear-gradient(#02957b, #015941); /* Standard syntax (must be last) */; font-size:17px}
#nav li:hover{ background-image: linear-gradient(#017562, #024234);}
#nav .active{background-image: linear-gradient(#017562, #024234);} 
#nav .percent{ width:24.7%; padding-top:70px; height:47px}
#nav a{ color:#FFF; text-decoration:none}

.slides{font-family: 'Lato', sans-serif; height:auto }
.slides h2{ margin-top:-350px; margin-left:50px; text-transform:uppercase; font-weight:300; font-size:42px; color:#1b1a1a; text-shadow: 1px 1px 1px #373737}
.slides h2 span{color:#30967b; font-size:48px}
.slides p{ font-size:12px; width:350px; font-family:Arial, Helvetica, sans-serif; margin-left:53px; padding-top:15px}
.slides a{ text-decoration:none; color:#1b1a1a;font-size:16px; text-shadow: 1px 1px 1px #292929}
.slides a:hover{ color:#DDD; text-decoration:underline;}

.flex-control-nav{ width:168px;clear:both !important; bottom:-35px}
.section-slide{width:100%; height:420px; margin:20px 0; display:block}

.services { width:100%; clear:both !important; width:100%; height:150px; display:block}
.services li{ width:25%; font-family: 'Montserrat', sans-serif; font-size:17px; color:#FFF; float:left; list-style:none; border-bottom:solid 2px #0B3528; height:85px; padding-top:50px; text-align:center}
.services li a{ color:#FFF; text-decoration:none;}
.services li a:hover{ color:#CCC}
.services .service1{ background:#206251;}
.services .service2{ background:#287C66;}
.services .service3{ background:#30967B;}
.services .service4{ background:#3BB296;}

.desciptionsite{width:100%; height:auto; display:block;}
h3{color: #2e2220;font-family: "Lato",sans-serif;font-size: 20px; font-weight: 400; line-height: 20px; margin-bottom: 24px;}
.desciptionsite p{ font-family:Arial, Helvetica, sans-serif; font-size:15px; margin-bottom:8px; text-align:justify}
.desciptionsite a{ color:#006452; text-decoration:none}
.desciptionsite a:hover{ text-decoration:underline}
.footer{ width:960px; height:auto; margin:25px auto 0 auto; font-family: "Lato",sans-serif;font-size: 20px; font-weight: 400; line-height: 20px; margin-bottom:44px !important; margin-top:20px; margin-bottom:20px}
.footer p{ text-align:justify}
.footer ul{ list-style:none; float:left; width:50%}
.footer ul h3{ margin-bottom:7px}
.privacidad{ font-family:Arial, Helvetica, sans-serif; font-size:10px;color:#666; line-height:12px; margin-top:10px}
.privacidad a{ color:#666; text-decoration:none}
.privacidad a:hover{ text-decoration:underline}
.facebook{ width:25px; height:25px}
.readmore{ width:105px; height:29px}


/*Nosotros*/
.ContentGeneral{ width:1000px; height:auto !important; margin:0 auto 25px auto}
.contentId{width:960px; padding:20px;;float:left; height:auto; background:#FFF}
.contentId p{ font-family:Arial, Helvetica, sans-serif; font-size:15px; margin:0 0 12px 0; padding:0}
.contentId h3{ margin:0 0 13px 0; padding:0}
.main-left{width:650px; float:left}
.main-right{width:290px; float:left; padding-left:20px}
.main-right h4{ font-weight:normal; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:0 0 7px 0; padding:0}
.Areas{ width:50%; float:left; color:#287C66}
.Areas a{ text-decoration:none; color:#287C66}



/*Servicios*/
.main-content{ width:960px; float:left}
.servicio{ width:24%; float:left; height:330px; padding-right:1%; padding-bottom:15px}
.servicio p{ margin:15px 15px 7px 0; font-size:15px}
.content-img-service{ width:220px; height:160px}
.img-service{width:220px; height:160px; display:none}
.readmore{ width:105px; height:29px}
.Service-Img{ width:100%; height:25%; padding-bottom:25px;} 


/*Contacto*/
.main-middle{ width:465px; padding-right:15px; float:left}
.main-middle h4{ font-weight:normal; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:15px; margin:0 0 7px 0; padding:0}
.main-middle p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:0 0 12px 0; padding:0}
.main-middle ul{ list-style:none; width:100%; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px}
.main-middle ul li{ padding-bottom:10px}
.map{ width:100%; height:250px}
.data{border:solid 1px #CCC; background:#EEE; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:255px; height:25px; padding-left:10px}
.data2 { height:100px; padding:10px}


/* Noticias */
.date{ width:70px; height:55px; text-align:center; vertical-align:central; background-color:#ECEAE9; margin-bottom:15px; color:#307C66; padding-top:15px;font-family: "Lato",sans-serif;font-size: 20px; line-height:20px}
.titlenotice{font-family: "Lato",sans-serif; font-size:20px;margin-left:0; float:left; font-weight:normal; margin-bottom: 20px}
.imgnoticiaprev{ width:220px; height:auto; float:left; clear:left}
.imgnoticiaprev img{ width:100%; height: auto}
.intronoticia{float:left; padding-left:15px; width:400px; text-align:justify}
.noticia{float:left; width:100%; height:auto; padding-bottom:30px}
.fullnotice{ width:100%;margin-top:20px; height: auto; float:left}
.imagefullnotice{ width:100%; height:50%; float:left; margin-bottom:15px}
.main-right1{width:290px; float:left; padding-left:20px}
.main-right1 h4{ font-weight:normal; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:0 0 7px 0; padding:0}
.main-right1 P{ font-size:11px}
.main-right1 a{ color:#287C66; text-decoration:none}
.main-right1 a:hover{ text-decoration:underline}

.botones{
	background:linear-gradient(#017562, #024234);
	border-radius:10px;
	border:1px solid #4012920;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:10px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
.botones:hover{
	background: #024234;
}



@media screen and (max-width:1000px){
	#wrapper{ width:100%; padding:0}
	#nav{ width:740px; float:left; margin:0; padding:0; font-family: 'Montserrat', sans-serif;}
	#nav .percent{ width:24.7%; font-size:18px}
	#nav li{ height:50px;}
	.slides h2{ margin-top:0px; margin-left:0; text-transform:uppercase; font-weight:300; font-size:22px; color:#1b1a1a; text-shadow: 1px 1px 1px #373737}
	.slides h2 span{color:#287C7F; font-size:24px}
	.slides p{ font-size:18px; width:400px; margin-left:23px}
	.flex-control-nav{ display:none}
	.section-slide{ height:auto !important; clear:both !important}
	.services li{ width:25%; font-size:18px}
	h3{ font-size:18px; width:95% !important; margin:15px  auto}
	.desciptionsite{ background:#FFF; height:auto !important; padding-bottom:35px!important}
	.desciptionsite p{ font-size:15px; width:95%; margin:13px auto 0 auto}
	.section-slide{width:100%; height:auto; margin:20px 0; display:block; clear:both !important}
	section{ float:left; width:100%; height:auto !important; clear:both}
	.footer{ width:95%; margin:20px 0 0 2.5%}
	.footer h3{font-size:38px; line-height:40px; margin:0; padding:0}
	.privacidad { font-size:16px; line-height:25px}
	.facebook{ width:50px; height:50px}
	.main-left{width:100%; padding:25px 0}	
	.main-right{width:100%; padding-left:0; padding-bottom:25px}
	.ContentGeneral{ width:100%; margin:0; padding:0}
	.contentId{ width:96%;margin:0; padding:0 2%}
	.Areas{ width:100%; float:none}
	.main-right{ margin-top:45px}
	.main-content{ width:100%; padding:25px 0}
	.main-content h3{ width:100%; font-size:20px; padding-top:12px; padding-bottom:25px}
	.servicio{ width:50%; padding:0; height:600px; padding-bottom:45px; text-align: left}
	.servicio p{ font-size:16px; padding:0; margin: 0}
	.content-img-service{width: 100%; height:auto}
	.img-service{ width: 100%; height:auto}
	.readmore{ width:145px; height:40px}
	.map{ width:100%; height:450px}
	.main-middle{ padding-bottom:55px; width:100%; padding:0}
	.main-middle h3{ font-size:22px !important}
	.main-middle p{font-size:20px}
	
	.main-middle ul{font-size:15px}
	.data{width:80%; height:55px; font-size:20px; padding-left:15px}
	.data2 { height:180px; padding:15px}
	.main-middle-2{ font-family: Arial, Helvetica, sans-serif; font-size:15px !important}
	.main-middle-2 p{ font-size: 15px}
	.Service-Img { width:100%; height:25%}
	.titlenotice{font-family: "Lato",sans-serif; font-size:20px; margin-top:7px}
	.imgnoticiaprev{ width:300px; height:auto; margin: 0 auto 10px auto}
	.intronoticia{ font-size:30px !important; width:100%; padding-top:0; margin-top:0; padding-left: 0;}
	.intronoticia p{ font-size:15px}
	.noticia{ padding-bottom:50px}
	.fb-share-button{ width:200px !important; height:70px !important}
	.pluginButtonContainer{ width:200px; height:70px}
	.main-right1{width:100%; float:left; padding-left:20px}
.main-right1 h4{ font-weight:normal; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:0 0 7px 0; padding:0}
.main-right1 P{ font-size:12px}
	}
	
	
	
@media screen and (max-width:975px){
	#wrapper{ width:100%}
	h1{ width:100%; height:82px; background:#000; padding-top:35px; padding-left:0; float:left; text-align:center}
	#nav{ width:100%; float:left; margin:0; padding:0; font-family: 'Montserrat', sans-serif;}
	#nav .percent{ width:100%; font-size:18px;height:40px; background-position:bottom; padding-top:20px}
	.separator{ display:none}
	.slides h2{ margin-top:-290px; margin-left:20px; text-transform:uppercase; font-weight:300; font-size:42px; color:#1b1a1a; text-shadow: 1px 1px 1px #373737}
	.slides h2 span{color:#287C7F; font-size:66px}
	.slides p{ font-size:18px; width:400px; margin-left:23px; margin-bottom:-10px}
	.flex-control-nav{ display:none}
	.services li{ width:100%;}
	h3{ font-size:18px; width:95% !important; margin:15px  auto}
	.desciptionsite{ background:#FFF; height:auto !important; padding-bottom:35px!important}
	.desciptionsite p{ font-size:15px; width:95%; margin:13px auto 0 auto}
	.section-slide{width:100%; height:auto; margin:20px 0; display:block; clear:both !important}
	section{ float:left; width:100%; height:auto !important; clear:both}
	.servicio{ width:100%;}
	.servicio{ width:100%; text-align:center; height:auto}
	.servicio img{ margin:0 auto !important}
	}
	
@media screen and (max-width:860px){
	#wrapper{ width:100%}
	h1{ width:100%; height:82px; background:#000; padding-top:35px;float:left;padding-left:0; text-align:center}
	#nav{ width:100%; float:left; margin:0; padding:0; font-family: 'Montserrat', sans-serif;}
	#nav .percent{ width:100%; font-size:18px; height:40px; background-position:bottom; padding-top:20px }
	.separator{ display:none}
	.section-slide{ height:auto !important; clear:both !important}
	.slides h2{ margin-top:-250px; margin-left:20px; text-transform:uppercase; font-weight:300; font-size:38px; color:#1b1a1a; padding-bottom:70px; text-shadow: none; }
	.slides h2 span{color:#287C7F; font-size:42px}
	.slides p{ display:none}
	.flex-control-nav{ display:none}
	.services li{ width:50%;}
	h3{ font-size:18px; width:95% !important; margin:15px  auto;  line-height:30px}
	.desciptionsite{ background:#FFF; height:auto !important; padding-bottom:35px!important}
	.desciptionsite p{ font-size:15px; width:95%; margin:13px auto 0 auto}
	.section-slide{width:100%; height:auto; margin:20px 0; display:block; clear:both !important}
	section{ float:left; width:100%; height:auto !important; clear:both}
	.footer ul h3{ margin-bottom:7px; font-size:22px; line-height:22px}
	.privacidad{ font-size:10px}
	.servicio{ width:100%; text-align:center}
	.flexslider{background: none !important; border: none;}
	.imgnoticiaprev{ width:300px; height:auto; margin: 0 auto 10px auto}
	.main-right1{padding-left:0px}
	}
	
@media screen and (max-width:550px){
	#wrapper{ width:100%}
	h1{ width:100%; height:82px; background:#000; padding-top:35px; float:left;padding-left:0; text-align:center;}
	#nav{ width:100%; float:left; margin:0; padding:0; font-family: 'Montserrat', sans-serif;}
	#nav .percent{ width:100%; font-size:18px; height:40px; background-position:bottom; padding-top:20px}
	.separator{ display:none}
	.slides h2{ margin-top:0; margin-left:0; text-transform:uppercase; font-weight:300; font-size:22px; color:#1b1a1a; text-shadow: none; margin-bottom:-90px; text-align: center;}
	.slides h2 span{color:#287C7F; font-size:24px}
	.slides p{ display:none}
	.flex-control-nav{ display:none}
	.section-slide{ height:auto !important; clear:both !important}
	.services li{ width:100%;height:auto; padding-bottom:15px; padding-top:15px}
	h3{ font-size:18px; width:95% !important; margin:15px  auto;}
	.desciptionsite{ background:#FFF; height:auto !important; padding-bottom:35px !important}
	.desciptionsite p{ font-size:15px; width:95%; margin:13px auto 0 auto}
	.section-slide{width:100%; height:auto; margin:20px 0; display:block; clear:both !important}
	section{ float:left; width:100%; height:auto !important; clear:both}
	.footer ul h3{ margin-bottom:7px; font-size:22px; line-height:22px}
	.privacidad{ font-size:10px}
	.servicio{ width:100%; text-align:left}
	.imgnoticiaprev{ width:100%; height:auto; margin: 0 auto 10px auto}
	}