@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
* { margin: 0px; padding: 0px; vertical-align: top }
body { font-family: 'Lato', sans-serif; background-color: #f1f1f1 }
.clear { clear:both; }

.bar { width: 80px; height: 5px; border: 1px solid #3b516e; margin: 0 auto; }
.bar div { width: 40px; height: 5px; background-color: #3b516e; }

#loading { position: fixed; z-index: 999999999999999999999999999; width: 100%; height:100%; background-color: #f8f8f8; color: #000; }

.scrolled { 
	top: 3px;
	right: 15px;
}

h2, h3 { 
	text-transform: uppercase;
}

header { height: 600px; background-image: url(../img/header.jpg); background-position: top; background-size: cover; text-align: center; }
header #topbar { height: 60px; padding-top: 40px; width: 90%;  margin: 0 auto }
header #topbar img { float: left; height: 100% }
header #topbar section { float: right; height: 100%; color: #fff; }
header #topbar section div { display: inline-block; line-height: 60px; margin-left: 20px }
header #topbar section div i { line-height: 60px; font-size: 20px; width: 24px }
header #topbar section div span b { font-weight: 900 }
header #topbar section div  span { font-weight: 300 }
header nav { color: #fff; width: 90%; margin: 0 auto; height: 35px; line-height: 35px }
header nav .menu { float: left; text-transform: uppercase; margin-top: 20px }
header nav .menu li { display: inline-block; margin: 0px 2px 0px 0px; font-size: 14.5px; padding: 0px 10px 0px 10px;transition: .3s }
header nav .menu li:hover { background-color: rgba(255,255,255,.2); border-radius: 3px; transition: .3s }
header nav .redes { float: right; line-height: 35px }
.redes i { line-height: 35px; padding: 5px 10px; transition: .3s; margin: auto }
.redes i:hover { background-color: rgba(255,255,255,.1); border-radius: 3px; transition: .3s }
.redes li { display: inline-block; }
header a { color: #fff }
.responsive { display: none }
.menub { display: none }

.RTLIBadge { 
	position: absolute;
	right: 0;
	padding-top: 15px;
}

@media screen and (max-width: 630px) { 
	header #topbar section { display: none; }
	nav { top: 40px;right: 15px; }
}

@media screen and (max-width: 1060px) { 
	.RTLIBadge { width:0%; left: 0; padding-top: 20px; }
	nav .redes { display: none }
	header #topbar section div { display: block; text-align: right; line-height: 30px; }
	header #topbar section div i { line-height: 40px; }

	.menu { display: none }
	nav { position: absolute; z-index: 999999; width: 100%; right: 5% }
	.menub { display: block; float: right; margin-top: 10px; font-size: 30px; width: 50px; height: 50px; background-color: rgba(0,0,0,1); border-radius: 3px; transition: .3s }
	.menub i { line-height: 50px; }
	.responsive { width: 50%; position: absolute; z-index: 9999999;top: 60px; right: 0px }
	.responsive li { font-weight: 300;z-index: 99999; width: 100%; display: block; background-color: #fff; padding: 20px 0px 20px 0px; color: #000; border-bottom: 1px solid #ccc; transition: 0.2s; text-align: left; }
	.responsive li i { color: #3b516e; margin-top: 10px }
	.responsive li:hover { }
}

@media screen and (max-width:320px) { 
	.responsive { width: 70% }
	header #topbar img { float: left; height: 80% }
}

@media screen and (min-width:321px) and (max-width:420px) { 
	.responsive { width: 60% }
}

#topitems { width: 100%; max-width: 1200px; box-sizing: border-box; padding: 20px;  background-color: white; margin: 0 auto; margin-top: -100px; -webkit-box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1);-moz-box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1);box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1); text-align: center; }
#topitems ul { list-style: none; text-decoration: none }
#topitems ul li { display: inline-block; width: 363px; margin: 8px 10px 0px 10px; text-align: left; }
#topitems ul li img { width: 100%;  transition: .4s }
#topitems ul li img:hover { opacity: 0.85; transition: .4s }
#topitems ul li h2 { font-size: 18px; font-weight: 900; }
#topitems ul li div { height: 1px; width: 120px;opacity: .5; background-color: #325d7f; margin: 15px 0px 10px 0px }
#topitems ul li p { opacity: .7; text-align: justify; font-size: 14.5px }
#topitems ul li i { margin-top: 2px; color: #3b516e }

#nosotrosSection { 
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	background-color: white;
	margin: -10% auto 0;
	-webkit-box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1);-moz-box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1);box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.1); text-align: center;
}

.nos-container { 
	width: 100%;
	padding:5% 10%;
	text-align: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.nos-container p, .recomendaciones ul { 
	margin:auto;
	width:90%;
	padding: 5% 0 0;
	font-weight: 300;
}

.servicio { 
	background-color:#FFF;
	color:#111111;
}

.servicio h1 { 
	line-height: 36px;
	text-align: center;
	vertical-align: center;
	font-size: 30px;
	font-weight: 800;
}

.servicio h2 { 
	text-align: center;
	font-size: 30px;
	font-weight: 800;
}

.servicio h3, .recomendaciones h3 { 
	text-align: center;
	font-size:28px;
	font-weight: 800;
}

.servicio p { 
	font-size: 24px;
}

.disclaimer { 
	background-color: #3B516E;
	color:#fff;
}

.disclaimer p { 
	padding: 0;
	font-size: 20px;
	font-weight: 400;
}

.disclaimer-imagen { 
	width:65%;
	margin: auto;
	padding-bottom: 2%;	
}

.disclaimer-imagen img { 
	width:100%;
}

.servicio-imagen { 
	width:100%;
	padding: 0;
}

.servicio-imagen img { 
	width: 100%;
}

.analisis { 
	padding: 0;
	color:#fff;
}

.analisis .analisis-container { 
	width: 100%;
	background-color: #111;
}

.analisis .analisis-container h3 { 
	text-align: left;
	font-size:28px;
	font-weight: 800;
	margin: auto;
	width: 90%;
	padding:7% 0;
}

.analisis .analisis-container:nth-child(2) h3 { 
	text-align: right;
}

.analisis .analisis-radiofrecuencia, .analisis .analisis-telefonico { 
	background: no-repeat center;
	background-size: cover;
}

.analisis .analisis-radiofrecuencia { 
	background-image: url("../img/nosotros/analisis1.jpg")
}

.analisis .analisis-telefonico { 
	background-image: url("../img/nosotros/analisis2.jpg");
}

.analisis-telefonico { 
	display: flex;
	justify-content: flex-end;
}

.analisis .analisis-container div div { 
	width: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 3%;
}

.analisis p { 
	font-size: 18px;
	font-weight:400;
	padding-top:2%;
}

.recomendaciones { 
	background-color: #111111;
	color:#fff;
}

.recomendaciones ul { 
	list-style: circle;
	font-size: 18px;
	font-weight: 300;
	text-transform: uppercase;

}

.recomendaciones ul li { 
	padding-top:3%;
}

@media screen and (max-width: 540px) { 
	#nosotrosSection p { 
		font-size: 18px;
	 }

	.analisis .analisis-container div div { 
		width: 100%;
	 }
}

.boton { 
	padding: 10px 20px 10px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #3b516e;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 800;
}
.boton:hover { 
	background-color: #111111;
}

#nosotros { max-width: 1200px; width: 100%; margin: 0 auto; margin-top: 50px; padding: 50px 0px 50px 0px }
#nosotros article { float: left; width: 60%; }
#nosotros article h2 { font-weight: 400; }
#nosotros article h3 { font-weight: 900; text-transform: uppercase; font-size: 30px; margin-top: -5px }
#nosotros article h2 b { font-weight: 900 }
#nosotros article .bar { float: left;  margin: 10px 0px 10px 0px }
#nosotros article p { opacity: .7; text-align: justify; }
#nosotros img { float: right; width: 32% }

#porque { background-image: url("../img/porque.jpg"); background-position: center; background-size: cover }
#porque article { color: #fff; width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 0px 80px 0px }
#porque div { max-width: 800px; }
#porque div h2 { text-transform: uppercase; font-weight: 900; font-size: 30px }
#porque ul { margin-top: 20px }
#porque ul li { display: inline-block; border-radius: 5px; width: 250px; text-align: center; background-color: rgba(255,255,255,.1); min-height: 185px }
#porque ul li:hover { background-color: rgba(255,255,255,.12); transition: .2s }
#porque ul li div { width: auto; padding: 15px; min-height: 170px; }
#porque ul li h3 { margin-top: -10px; font-size: 14px }
#porque ul li i { font-size: 80px }
#porque div p { font-size: 12px; margin-top: 5px }
#porque div .p { font-size: 14px; margin-top: 10px }
#porque div ul { text-decoration: none; list-style: none }

#servicios { width:100%; max-width: 1200px; margin: 0 auto; padding: 80px 0px 80px 0px }
#servicios ul { text-decoration: none; list-style: none }
#servicios ul li { display: inline-block; width: 250px; text-align: center; margin: 20px }
#servicios ul li i { font-size: 55px; color: #3b516e }
#servicios ul li p { margin-top: 20px }

#pericia { text-align: center; background-color: #111; padding: 40px 0px 40px 0px; color: #fff }
#pericia i { display: inline-block; font-size: 60px; margin-right: 10px }
#pericia article { display: inline-block; text-align: left; }
#pericia article h2 { text-transform: uppercase; font-size: 30px }

@media screen and (max-width: 655px) { 
	#pericia i { display: block }
	#pericia article { display: block; text-align: center; }
}

.home-disclaimer p { 
	padding: 10% 5%;
	width: 80%;
	margin: auto;
	text-transform: uppercase;
}

#contacto { background-color: #fff; border-top: 10px solid #3b516e }
#contacto section { width:100%; max-width: 1200px; margin: 0 auto; padding: 80px 0px 80px 0px }

#contacto section form { width: 600px; float: left }
#contacto section form input, textarea { box-sizing: border-box; color: #000 }
#contacto section form input[type="text"], textarea { padding: 15px; border:1px solid #ccc; border-radius:5px;width: 100%; margin-top: 5px; background: transparent;  }
#contacto section form input[type="submit"] { border:1px solid #3b516e; background-color: #3b516e;padding: 15px 30px 15px 30px; color: #fff; font-weight: 300; font-size: 15px; transition: 0.2s; border-radius: 3px }
#contacto section form input[type="submit"]:hover { opacity: .8; transition: 0.2s; }
#contacto section form textarea { height: 200px; font-family: 'Lato', sans-serif; resize: none; }
.sectioncontacto { width: 870px; margin: 0 auto; }

#contacto section #form2 { float: left;  border-left:1px solid #ccc; margin-left: 80px; margin-top: 5px; color: #fff; font-weight: 400 }
#contacto section #form2 i { float: left; color: #3b516e; width: 50px;text-align: left; font-size:30px; padding-left:30px; }
#contacto section #form2 span { float: left; line-height: 30px; padding-left: 10px; color: #000 }
#contacto section #form2 .redes { margin-left: 25px; float: right; line-height: 35px }
#contacto section #form2 .redes i { padding: 5px; }

@media screen and (max-width: 1250px) { 
	#topitems ul li { width: 30%; }

	#nosotros { width: 90%; }

	#porque article { width: 90% }
	#porque div { max-width: 100%; }

	#servicios { width:90%; }
	#servicios ul { text-align: center; }
	#servicios ul li { width: 28%; }

	#contacto section { width:90%; }
	#contacto section #form2 { float: none; margin-top: 30px; margin-left: 0px }
	#contacto section form { float: none; width: 100% }
	#contacto section #form2 .redes { margin-left: 25px; float:left; }
}

@media screen and (max-width: 1060px) { 
	#porque ul { margin-top: 20px; text-align: center; }
	#porque ul li { width: 32.5%; min-height: 200px }
	#porque div h2 { text-align: center; }
}	
@media screen and (max-width: 850px) { 
	#topitems ul li { width: 30%;  margin: 8px 5px 0px 5px; }
	#topitems ul li h2 { font-size: 15px; }
	#topitems ul p { margin-top: 5px }

	#nosotros { margin-top: 10px; }
	#nosotros article { float: none; width: 100%; margin-top: 20px }
	#nosotros img { float: none; width: 100% }
}
@media screen and (max-width: 500px) { 
	#topitems ul li { width: 90%;  margin: 10px 0px 10px 0px; }

	#nosotros article h2 { font-weight: 400; font-size: 17px }
	#nosotros article h3 { font-weight: 900; text-transform: uppercase; font-size: 20px; margin-top: -5px }

	#porque ul li { width: 100%; min-height: auto; margin-top: 2px }
	#porque div h2 { font-size: 25px }
}

@media screen and (max-width: 450px) { 
	#servicios ul li { width: 100%; }
}

@media screen and (max-width: 350px) { 
	#nosotros article h2 { font-weight: 400; font-size: 17px }
	#nosotros article h3 { font-weight: 900; text-transform: uppercase; font-size: 18px; margin-top: -5px }

	#porque div h2 { font-size: 18px }
}

footer { background-color: #3b516e; height: 100px; line-height: 100px; color: #fff; text-align: center; }
footer a { color: #fff; }

a { text-decoration: none; }

.cssload-container { 
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -25px;
	text-align: center;
}

.cssload-speeding-wheel { 
	width: 49px;
	height: 49px;
	margin: 0 auto;
	border: 3px solid rgb(0,0,0);
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: cssload-spin 575ms infinite linear;
		-o-animation: cssload-spin 575ms infinite linear;
		-ms-animation: cssload-spin 575ms infinite linear;
		-webkit-animation: cssload-spin 575ms infinite linear;
		-moz-animation: cssload-spin 575ms infinite linear;
}

 .whatsapp-chat-wrapper {
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 3px;
	padding: 0px;
	border: 0px;
	background: transparent;
	overflow: hidden;
	position: fixed;
	z-index: 16000001;
	right: 10px;
	bottom: 0px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	display: block;
	width: 55px;
	height: 55px;
}

@keyframes cssload-spin { 
	100% { transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin { 
	100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin { 
	100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin { 
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin { 
	100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}