@charset "UTF-8";
/* CSS Document */
body {background:#FFF;
width:100%;
padding:0;
margin:0;}

.cbp-af-header { font-family:'Open sans', sans-serif;
	font-weight: normal; 
	font-style: normal; }

.cbp-af-header-shrink { border-bottom-color:#999;
border-bottom-style:solid;
border-bottom-width:medium;}



/* Video Overlay */

#overlay {
background-color:rgba(0,0,0,0.0);
height:100%;
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;
}

.fade { background-color:rgba(0,0,0,.85) !important; }


/* Hero Video + Fallback */

#hero-vid {
backface-visibility:hidden;
background:url("images/excimer.jpg") no-repeat scroll 0 0 #000;
background-size:100%;
top:70px;
height:auto;
min-height:400px;
min-width:100%;
perspective:1000;
position:fixed;
right:0;
width:auto;
z-index:-1;
}



#hero-pic {
	margin-top:80px;
display:block;
height:auto;
width:100%;
}


#state {
background-color:rgba(0,0,0,.5);
bottom:0;
cursor:pointer;
font-size:2.25em;
left:0;
padding:0.55em 1.05em 0.35em 1em;
position:absolute;
}

/* Visibility Helpers */

@media only screen and (min-width:769px) {
    .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
	
}

@media only screen and (min-width:480px) and (max-width:768px) {
    .visible-mobile,.visible-tablet,.visible-desktop { display:none !important; }
	
}

@media only screen and (max-width:479px) {
    .hidden-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}



.citas{padding-top:30px;
padding-bottom:30px;
background:#2a67b2;
margin-top:44%;
color:#FFF;
width:100%;}

.citas h4 {color:#FFF;
text-align:left;
float:left;
font-family:'Open sans', sans-serif;
font-weight:800;
font-size:1.2em;
letter-spacing:0.1em;
padding-bottom:10px;}

 
.citas h4:after {text-align:left;
float:left;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 3px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}


.mvv {width:100%;
background:#FFF;
padding-bottom:80px;
padding-top:80px;
text-align:center;}

.mvv h4 {color:#8799a5;
text-align:center;
font-family: 'Merriweather', serif;
font-weight:400;
font-size:1.5em;}

.mvv h3 {color:#8799a5;
text-align:center;
padding-bottom:15px;
font-family: 'Merriweather', serif;
font-style:italic;
font-weight:900;
font-size:1.5em;
letter-spacing:0.1em;}

.mvv a {text-align:center;
color:#00adef;
margin-top:0px;
font-size:1.2em;
font-family: 'Merriweather', serif;
font-style:italic;
font-weight:600;
text-decoration:none;}

.mvv h3:after {text-align:center;

    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 10%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}

.mvv h2 {color:#8799a5;
text-align:center;
padding-bottom:10px;
font-family: 'Merriweather', serif;
font-weight:600;
font-size:1.3em;

letter-spacing:0.1em;}

.mvv .fa{ color:#00adef;
margin-top:40px;}

.mvv p {color:#8799a5;
font-family: 'Open sans', serif;
font-size:1em;
margin-bottom:40px;}

.servicios {width:100%;
padding-bottom:80px;
padding-top:80px;
background-image:url(images/servicios.jpg);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}



.servicios h4 {color:#8799a5;
text-align:center;
font-family: 'Merriweather', serif;
font-weight:800;
font-size:1.2em;
letter-spacing:0.1em;
padding-bottom:10px;}

h4 {margin-bottom:20px;
margin-top:0;}
 
.servicios h4:after {text-align:center;

    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 5%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}

.servicios p {color:#8799a5;
text-align:center;
padding:0;
margin:0;
font-family:'Open sans', sans-serif;
font-size:1em;}


.servicios a {color:#00adef;
text-decoration:none;
text-align:center;
font-family:'Open sans', sans-serif;
font-style:italic;
font-weight:600;
font-size:1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;}

.servicios a:hover {color:#8799a5;
text-decoration:none;
text-align:center;
font-family:'Open sans', sans-serif;
font-style:italic;
font-weight:600;
font-size:1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;}

.tecnologia {width:100%;
background:#FFF;
padding-bottom:80px;
padding-top:80px;
text-align:center;}

.tecnologia h4 {color:#8799a5;
text-align:center;
padding-bottom:15px;
font-family: 'Merriweather', serif;
font-weight:900;
font-size:1.2em;
letter-spacing:0.1em;}

.tecnologia h4:after {text-align:center;

    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 5%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}

.tecnologia p {color:#8799a5;
text-align: justify;
font-family:'Open sans', sans-serif;
font-size:1em;
padding:0;
margin:0 0 20px 0;
letter-spacing:0.05em;}

.tecnologia img {width:100%;
margin-bottom:20px;}

.galeria {float:right;
padding:0;
margin:0;
width:50%;}

#equipo {background-color:#2a67b2;}

#equipo2 {background-color:#2a67b2;}


.equipo {width:100%;
padding-top:20px;
background-image:url(images/eye.jpg);
background-position:left;
background-size:50%;
padding-bottom:20px;
background-repeat:no-repeat;}

.equipo p {
color:#FFF;
float:left;
padding-left:10px;
padding-right:10px;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;}

.bg-3 ul {
color:#FFF;
width:100%;
float:left;
padding-left:10px;
padding-bottom:0;
margin:0;
padding-right:0;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
list-style:inside disc;
letter-spacing:0.05em;}

 .bg-3 ul li{padding-bottom:10px; color:#FFF;
 font-family:'Open sans', sans-serif;}

.equipo h3 {color:#FFF;
text-align:left;
float:left;
padding-left:10px;
font-family: 'Merriweather', serif;
font-weight:800;
font-size:1.2em;
letter-spacing:0.1em;
padding-bottom:10px;}

 
.equipo h3:after {text-align:left;
float:left;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}


.equipo-mobile {width:100%;
padding-top:20px;
background-position:left;
background-size:50%;
padding-bottom:20px;}

.equipo-mobile p {
color:#FFF;
float:left;
padding-left:10px;
padding-right:10px;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;}

.equipo-mobile ul {
color:#FFF;
width:100%;
float:left;
padding-left:10px;
padding-bottom:0;
margin:0;
padding-right:0;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
list-style:inside disc;
letter-spacing:0.05em;}

.equipo-mobile ul li{padding-bottom:10px;}

.equipo-mobile h3 {color:#FFF;
text-align:left;
float:left;
padding-left:10px;
font-family: 'Merriweather', serif;
font-weight:800;
font-size:1.2em;
letter-spacing:0.1em;
padding-bottom:10px;}

 
.equipo-mobile h3:after {text-align:left;
float:left;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 10px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}


.map {width:100%;
height:400px;
background-color:#FFF;
z-index:-1;}

.map iframe{
	width: 100%;
	display: block;
	pointer-events: none;
	position: relative; /* IE needs a position other than static */
}
.map iframe.clicked{
	pointer-events: auto;
}

 #map {
                width: 100%;
                height: 400px;
				z-index:-1;
            }
			
			
			.contacto {width:100%;
			padding-bottom:40px;
			padding-top:40px;
			background-repeat:no-repeat;
			background-image:url(images/bg-contacto.jpg);
			background-size:100%;
			background-position:center left;}


.footer {width:100%;
background:#666;
padding-bottom:40px;
padding-top:40px;}

.footer img {width:50%;}

.footer address {color:#FFF;
font-family:'Open sans', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:600;
margin-top:30px;
font-size:1em;}

.footer .email {color:#FFF;
font-family:'Open sans', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:600;
margin-top:30px;
font-size:1em;}

.footer h4 {color:#FFF;
text-align:left;
font-family: 'Merriweather', serif;
font-weight:800;
font-size:1.8em;
letter-spacing:0.1em;}

.footer .telefono {color:#FFF;
font-family:'Open sans', sans-serif;
text-decoration:none;
font-style:normal;
font-weight:600;
margin-top:30px;
font-size:1em;}

.footer .fa {color:#FFF;
text-align:left;
margin-left:10px;}

.footer a {color:#FFF;
text-decoration:none;
text-align:left;}






.footer .telefono a{text-decoration:none;
color:#FFF;}

.footer .email a{text-decoration:none;
color:#FFF;}

.scrollToTop{
	width:auto; 
	height:auto;
	padding:0; 
	text-align:center; 
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	position:fixed;
	margin-top:120px;
	margin-right:20px;
	background-position:right;
	padding:20px 20px;
	border-radius:10px;
	right:0;
	display:none;
	background-color:#00adef;
	background-size:100px;
	opacity:0.8;
	z-index:99999;
-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;}

.scrollToTop i {color:#FFF;}
.scrollToTop:hover{
	opacity:0.4;
	text-decoration:none;
-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;}
#nosotros {padding:0;
	margin:0;}
	
	
	.nosotros-pag {width:100%;
	margin-top:80px;
	padding-left:0;
	padding-right:0;
	padding-top:80px;
	padding-bottom:0;
	background-color:#F4F4F4;}
	
	
	.nosotros-pag h4 {color:#8799a5;
text-align:center;
line-height:0.1em;
font-family: 'Merriweather', serif;
font-weight:400;
font-size:1.5em;
margin-bottom:40px;}


.nosotros-pag h4:after {text-align:center;

    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 10%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}






.nosotros-pag p {
color:#FFF;
padding-left:10px;
padding-right:10px;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
line-height:1.2em;}

#nosotros-pag {background-color:#2a67b2;}




.mobile-header {width:100%;
background:#FFF;
position:fixed;
padding-top:5px;
padding-bottom:5px;}

.mobile-header img {width:80px;}

.mobile-header nav a{color:#00aeef;
text-decoration:none;
font-family:'Open sans', sans-serif;
font-size:0.9em;
padding-left:5px;
padding-right:5px;}

.menu-button h3{text-align: center;
color: #000;
font-family:'Open sans', sans-serif;
line-height:1em;
font-size:0.8em;
margin-top: 0;
margin:0;
margin-bottom: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;}


.servicios-pag {width:100%;
	margin-top:80px;
	padding-left:0;
	padding-right:0;
	padding-top:80px;
	padding-bottom:0;
	background-color:#F4F4F4;}
	
	
	.servicios-pag h4 {color:#8799a5;
text-align:center;
line-height:0.1em;
font-family: 'Merriweather', serif;
font-weight:400;
font-size:1.5em;
margin-bottom:40px;}


.servicios-pag h4:after {text-align:center;

    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 10%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}


.portada {width:100%;
padding:0;
margin-bottom:0;}

.portada img {width:100%;}

.bg-1 .titulo-servicios { text-align:right;
font-family: 'Merriweather', serif;
font-weight:400;
width:100%;
}

.bg-1 .titulo-servicios h1{ text-align:right;
font-family: 'Merriweather', serif;
font-weight:600;
color:#FFF;
font-size:1.5em;
float:right;
border-top:thin #FFF;
}


.bg-1 .titulo-servicios h1:after {text-align:right;
float:right;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #00adef; /* This creates the border. Replace black with whatever color you want. */
}

.bg-2 .titulo-servicios h1{ text-align:left;
float:left;
font-family: 'Merriweather', serif;
font-weight:600;
color:#FFF;
font-size:1.5em;
}

.bg-2 .titulo-servicios h1:after {text-align:left;
float:left;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #2a67b2; /* This creates the border. Replace black with whatever color you want. */
}



.bg-3 .titulo-servicios h1{ text-align:right;
float:right;
font-family: 'Merriweather', serif;
font-weight:600;
color:#FFF;
font-size:1.5em;
}

.bg-3 .titulo-servicios h1:after {text-align:right;
float:right;
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 20%; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
   border-bottom: 2px solid #2a67b2; /* This creates the border. Replace black with whatever color you want. */
}






.bg-1 {background-color:#2a67b2;
padding-bottom:80px;
padding-top:40px;

}

.bg-1 p{padding-left:10px;
padding-right:10px;
text-align: left;
color:#FFF;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;
line-height:1.3em;}

.bg-2 {background-color:#00adef;
padding-bottom:80px;
padding-top:40px;}

.bg-2 p{padding-left:10px;
padding-right:10px;
color:#FFF;
text-align: right;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;
line-height:1.3em;}

.bg-2 ul li{padding-left:10px;
padding-right:10px;
color:#FFF;
list-style:none;
text-align: right;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;
line-height:2em;}


.bg-3 {background-color:#00adef;
padding-bottom:80px;
padding-top:40px;}

.bg-3 p{padding-left:10px;
padding-right:10px;
color:#FFF;
text-align: left;
font-family:'Open sans', sans-serif;
font-size:1em;
letter-spacing:0.05em;
line-height:1.3em;}

@media screen and (max-width: 767px) {.citas{padding-top:30px;
padding-bottom:30px;
background:#2a67b2;
margin-top:0;
color:#FFF;
width:100%;}}


 .aseguradoras {width:100%;
 padding:40px 0;
 margin:0;
 background:#FFF;
 }
 
  .aseguradoras p{font-family:'Open sans', sans-serif;
  line-height:1.3em;
  font-size:1em;
  color:#8799a5;}
  
  .aseguradoras ul{padding:0;}
  
    .aseguradoras ul li{font-family:'Open sans', sans-serif;
  line-height:1.5em;
  padding:0;
  font-size:1em;
  color:#8799a5;
  list-style:none;}