@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

* { margin: 0px; padding: 0px; }
#header, #carousel, #about, #services, #control, #contact, #footer { width: 100%; font-family: 'Roboto Condensed', sans-serif; }
.title { text-align: center; font-size: 36px; font-weight: bold; }
.separator { width: 100px; height: 3px; margin: 25px auto; }

#header { background-color: #287bbf; border-bottom: 12px solid #1ecce9; }
#header .contact .mail, #header .contact .phone { display: inline-block; padding-left: 20px; color: #76aad5; }
#header .contact .mail { background: url('../images/icon-mail.png') no-repeat 0px 3px; margin-right: 20px; }
#header .contact .phone { background: url('../images/icon-phone.png') no-repeat 0px 3px; }

#carousel { background-color: #ffffff; margin: 30px auto 50px; }
#carousel .selectors { width: 200px; position: absolute; left: 50%; margin-left: -100px; margin-top: -50px; text-align: center; }
#carousel .selectors span { width: 18px; height: 18px; border-radius: 18px; background-color: #949494; display: inline-block; vertical-align:  middle; }
#carousel .selectors span.active { width: 25px; height: 25px; border-radius: 25px; background-color: #ffffff; margin: 0px 16px; }
#about { background-color: #ffffff; margin-top: 50px; margin-bottom: 80px; }
#about .left, #about .right { display: inline-block; vertical-align: top; }
#about .left .title, #about .right .title { font-size: 24px; color: #555555; }
#about .left p, #about .right p { font-size: 22px; color: #888888; line-height: 30px; text-align: justify; }
#about .left p { padding-right: 25px; }
#about .right p { padding-left: 25px; }
#about .left p:last-child { margin-top: 25px; }
#about .left { width: 50%; }
#about .right { width: 50%; }
#about .title { color: #333333; }
#about .separator { background-color: #c2c2c2; }
#about .left .separator, #about .right .separator { width: 10px; height: 10px; background-color: #c2c2c2; transform: rotate(45deg); }
#services { background-color: #fff; }
#services .separator { background-color: #c2c2c2; margin-bottom: 60px; }
#services .title { color: #333; margin-top: 50px; }
#services .service { width: 33%; display: inline-block; margin: 0 auto; vertical-align: top; }
#services .service .title { font-size: 18px; margin: 0px; padding: 0px; color: #555; text-align: left; padding-right: 40px; margin-bottom: 5px; }
#services .service .desc { color: #777; text-align: justify; padding-right: 30px; font-size: 14px; }
#services .service img { float: left; margin-right: 20px; }
#services .row { margin-bottom: 60px; }

#control .separator { background-color: #c2c2c2; margin-bottom: 60px; }
#control .title { color: #333; margin-top: 50px; }

#services .secondary.title { font-size: 28px; padding-top: 20px; }
#services .secondary.separator { margin: 30px auto; }
#services .secondary.row { padding-bottom: 100px; margin-bottom: 0px; }
#services .secondary .service p.title { font-size: 22px; margin-top:30px; }


#contact { background-color: #fff; }
#contact .separator { background-color: #929297; }
#contact .title { margin-top: 50px; }
#footer { padding: 30px 0; background-color: #d2d2d2; color: #666; font-size: 14px; }
#footer .copyright { font-size: 16px;  padding-top: 40px; }
#footer .col { display: inline-block; vertical-align: top; margin-right: 50px; }
#footer p { font-weight: bold; margin-bottom:5px;}
#footer span { display: block; }

.grupos { width: 1170px; margin: 0 auto; font-family: 'Roboto Condensed', sans-serif; margin-bottom: 60px; }
.grupos .grupo { display: inline-block; width: 350px; vertical-align:  top; }
.grupo p { font-size: 24px; font-weight: bold; margin-bottom: 10px;}
.grupo img { border-radius: 3px; margin-bottom: 15px;}
.grupo span { font-size: 14px; text-align: justify; display: block; }
.grupo ul {margin: 10px 0px 0px 20px;}
.grupo li {font-size: 14px;}

#control .item { width: 350px; display:inline-block;}
#control .item p { font-size: 24px; font-weight: bold; margin-bottom: 15px; text-align: center }
#control .item img { width: 80%; height: auto; display: block; margin: 0 auto;}
#control .item span {display: block; margin-top: 20px; text-align:center}
#control .row {margin-bottom: 50px;}

@media (max-width: 1169px)
{
	.wrapper { width: 100%; }
	#header .logo { margin: 0 auto !important; display: block; margin-top:0px; padding-top: 20px;padding-bottom:20px;}
	#header .nav a { color: #89bbe4; text-decoration: none; font-size: 24px; font-weight: bold; display: inline-block; margin: 10px 15px 30px 15px; }
	#header .nav { text-align: center; margin: 0px; padding: 0px; }
	#foote { margin: 0px; }
	.grupos { width: 100%; text-align: center; }
	.grupos .grupo {  width: 90%; margin: 0px auto 20px !important; padding: 0px !important; float: none !important; }
	.grupos .grupo img, .grupos .grupo p, .grupos .grupo span { width: 90%; margin: 10px auto; }
	.grupos .grupo span { text-align: justify;}
	#carousel img { width: 100%; }
	#footer { padding: 20px; }
	#footer .col { margin-top: 20px; }
	#footer {border-top: 20px solid #ff9300; }
	#header .nav a:hover { color: #fff; }
	#about img { width: 100%; }
	#about .left, #about .right { float: none; width: 100%;}
	#about .left p, #about .right p { padding: 0px 20px; }
	#services .header-image { width: 100%; }
	#services .service { width: 95%; display: block;  }
	#services .service img { margin-left: 10px; }
	#services .service p { padding: 0px !important; margin: 0px 0px 20px 0px !important; }
	#services .row { margin:0px !important; padding: 0px !important;}
	.row.secondary {}
	.service.secondary { display: block; width: 100%; }
	.service.secondary img.image-sec {width: 25%; float: none !important; display: inline-block;margin:0;padding:0; border-radius:100px; margin-bottom: 25px;}
	.service.secondary p.title {width: 65%; display: inline-block; margin: 0;padding:0; vertical-align: top;}
	#footer { font-size: 18px; }
	#about .right .title {margin-top: 25px; }
	#control .item { display: block; width: 100%;margin-left: 0px !important;margin-bottom: 30px;  }
	#control .item img { width: 50%; }
	#control .item span {padding:0px 20px;}
	.fix2 { clear: both; }
	#contact .contact-img { width: 100%; }
	#contact .left, #contact .right { width: 100% !important; display: block !important; margin: 0px 0px 0px 0px !important; }
	#contact .oficinas { margin:0px !important; }
	#contact .left p, #contact .left span {}
	.alert { width: 90%; display: block;font-family: 'Roboto Condensed', sans-serif; background-color: #ddd; border-radius: 5px; margin: 20px auto;}
	.alert p { padding: 20px;}

}

@media (min-width: 1170px)
{
	.wrapper { width: 1170px; margin: 0 auto; }
	#header { height: 210px; }
	#header .logo {margin-top:10px}
	#header .nav { float:right; }
	#header .nav a { color: #89bbe4; text-decoration: none; font-size: 24px; font-weight: bold; transition: 0.5s; display: inline-block; margin: 120px 15px 0px; }
	#header .nav a.active { color: #fff; }
	#header .nav a.active::before { content: ""; position: absolute; margin-left: 5px;margin-top: 81px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #1ecce9; }
	#header .nav a:hover { color: #fff; }
	#header .nav a:hover::before { content: ""; position: absolute; margin-left: 5px; margin-top: 81px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #1ecce9; }
	.image-sec {width:120px;border-radius:200px}
	#footer {border-top: 20px solid #ff9300; }
	#footer { font-size: 16px; }
	.alert { width: 1170px; display: block;font-family: 'Roboto Condensed', sans-serif; background-color: #ddd; border-radius: 5px; margin: 20px auto;}
	.alert p { padding: 20px;}
}