@import url("https://fonts.googleapis.com/css?family=Roboto:400,700|Special+Elite|Source+Sans+Pro:300,400,500,700,900");


body {
	margin: 0;
	padding: 0;
	color: #21587B;
	background-color: #fff;
	font: 1em/1.2 Roboto, Helvetica, sans-serif;
}

/* top shadow */
body:before { content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; }

.container {
	max-width: 900px;
	margin: 20px auto;
	background-color: #fff;
}

.img-responsive { max-width: 100%; }



/* -----------------------
SPLASH
------------------------*/

.headsplash {
position: relative;
color: #fff;
background: #68A28C url('../img/yw-logo.png') center no-repeat;
width: 100%;
height: 200px;
}

.headsplash2 {
position: relative;
color: #fff;
background: #68A28C url('../img/yw-logo.png') center no-repeat;
background-size: 256px 140px;
width: 100%;
height: 150px;

}

.navsplash { 
position: absolute;
border: 0px solid red;
background-color: transparent;
top: 155px;
left: 70%;
width: 190px;
height: 30px;
padding: 0em; 
text-align: left; 
margin: 0 auto;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 1.1em;
color: #fff;
}

.navsplash ul { margin: 0; padding: 0; list-style: none; }
.navsplash ul li { display: inline; margin: 0; color: #fff; }
.navsplash ul li:first-child::after { 
content: ':::';
color: #D7C9FF; 
font-weight: bold;
margin-left: 10px;
margin-right: 7px;}

.navsplash a:link, .navsplash a:visited, .navsplash a:active  {	
font-family: Roboto, sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff; 
border: 0; 
}

.navsplash a:hover {	
color: #D7C9FF;
border-bottom: 1px dotted #fafafa;
}

.splash { 
width: 100%;
height: 502px;
padding: 0; 
margin: 5px 0;
background: transparent url('../img/faro.jpg') center no-repeat;
}

.splash2 { 
width: 100%;
height: 439px;
padding: 0; 
margin: 5px 0;
background: transparent url('../img/faro2021.jpg') center no-repeat;
}

.splash::before , .splash2::before { clear: both; }

/* -----------------------
MEDIA
------------------------*/

@media  (max-width: 414px)  { 

body:before { content: ""; position: fixed; top: -10px; left: -10px; width: 0; height: 0; -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 0px rgba(0,0,0,.8); -ms-box-shadow: 0px 0px 0px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 0px rgba(0,0,0,.8); box-shadow: 0px 0px 0px rgba(0,0,0,.8); z-index: 100; }
.container { max-width: 360px; 	margin: 0px auto; }
.headsplash {
background: #68A28C url('../img/yw-logo2.png') center no-repeat; 
height: 155px; }
.navsplash { 
border: 0px solid red;
top: 115px;
left: 165px;
font-size: 1em;
}

.navsplash a:link, .navsplash a:visited, .navsplash a:active  { font-size: .9em; }

.splash { 
height: 250px;
margin: 5px 0;
background: transparent url('../img/faro2.jpg') center no-repeat;}

.splash2 { height: 280px;
background-size: 100% 100%;
}

}

/* -----------------------
CONTAINERS
------------------------*/

header {
position: relative;
color: #fff;
background: #68A28C url('../img/yw-logo2.png') 10px 10px no-repeat;
width: 100%;
height: 150px;
}

header img {
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 140px;
}

header img a {
border: 0;
}

.content { 
width: 100%;
position: relative; 
padding-top: 2em; 
border: 0px solid red; 
}

.content2 { 
width: 100%;
position: relative; 
padding-top: 5px; 
border: 0px solid red; 
}

.content::after {
  content: "";
  display: block;
  clear: both;
}

.footer {
width: 100%;
height: 40px; 
background: #68A28C;
padding: 2em 0 0 0;
text-align: center; 
font-family: Roboto, sans-serif;
font-size: .8em;
font-weight: bold;
letter-spacing: .04em;
color: #fff;
margin: 0;
text-transform: uppercase;
}



/* -----------------------
MEDIA
------------------------*/

@media  (max-width: 414px)  { 

header {
background: #68A28C url('../img/yw-logo2.png') 6px 2px no-repeat;
height: 135px;
}

header img {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 130px;
border: 0;
}

.footer { font-size: .7em; 	letter-spacing: 0em;
}

}


/* -----------------------
CONTENTS
------------------------*/

.col-uno { float:left; width: 45%; padding: 1em 2em ; margin-left: 1em; border: 0px solid #000; }
.col-unofaq { float:left; width: 54%; padding: 1em 0 0 .5em; border: 0px solid #000; margin-left: 0; }
.col-dos { float:right; width: 35%; padding: 1em 1em 1em 2.5em; border-left: 1px dotted #ccc; }

.clear { clear: both; }
p { margin: 0 0 1.5em; line-height: 1.5; }
p.one { font-size: 1.1em; margin: 0 0 2em; line-height: 1.5; font-weight: 500; font-family: Roboto, sans-serif;}

.thanks { width: 30%; text-align: center; margin: 1em auto; }

.frame-container, .frame-container2, .frame-container3 {
overflow: hidden;
width: 350px;
border: 0px solid #000;
} 

.frame-container { height: 520px; } 
.frame-container2 { height: 380px; } 
.frame-container3 { height: 300px; } 

iframe {
border: 0;
width: 100%;
height: 100%;
}

/* -----------------------
MEDIA
------------------------*/

@media  (max-width: 414px)  { 
.thanks { width: 100%; }
.col-uno { float: none; width: 85%; padding: 1.5em 1em 0 1em; border: 0px solid green;}
.col-unofaq { float: none; width: 90%; padding: 1.5em 0 1em 1em;}
.col-dos { float: none; width: 90%; padding: 1em 0 0 1em; border-left: 0px dotted #ccc; }
}


/* -----------------------
NAVIGATION
------------------------*/

#navtop {
float: right;
position: absolute;
bottom: 2px; 
right: 10px;
padding: 10px;
background: #68A28C;
color: #fff;
text-decoration: none;
width: 70%;
z-index: 2;
border: 0px solid black;
}

#navtop label, #boton { display: none; }

#navtop ul { 
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}

#navtop ul li { 
display: inline-block;
}

#navtop a {
color: #fff;
font-family: Roboto, sans-serif;
font-weight: bold;
letter-spacing: .04em;
text-decoration: none;
padding: 3px 5px; 
text-transform: uppercase;
font-size: .9em;
border: 1px solid #68A28C;

margin: 0 5px; 
position: relative;
}

#navtop a.here  { 
background: #F4B43E;
border: 1px solid #fff;
border-radius: 6px;
}

#navtop a.cliente {
border: 1px dotted white;
border-radius: 6px;
background: #7CB6A0;
}

#navtop a:hover, #navtop a.cliente:hover  { 
background: #B9C0C3; 
color: #fff;
border: 1px solid #fff;
border-radius: 5px; }

/**/

/* -----------------------
MEDIA
------------------------ */

@media (max-width: 414px) {

#navtop { padding: 0; width: 150px; top: 90px; right: 0px;}

#navtop label { 
display: inline-block; 
font-size: 2em; 
cursor: pointer;
float: right;
padding-right: 20px;
	}

#lista  {
height: 0;
opacity: 0;
transition: opacity 0.5s ease-out;
}

#boton:checked~#lista { opacity: 1; height: auto;}

#navtop ul { 
margin-top: 16px;
background: #68A28C;
}

#navtop ul li{ 
display: block; 
line-height: 1.8; 
	}

#navtop a {
padding: 3px 20px 3px 0; 
margin: 0px;
width: 130px;
float: right;
text-align: right;
border-radius: 0px;
	}

#navtop a.cliente {
border: 1px solid #7CB6A0;
border-radius: 0px;
background: #7CB6A0;
}
#navtop a:hover, #navtop a.cliente:hover, #navtop a.here { border-radius: 0px; }


}

/*/////////////// HAMBURGER  /////////////// */

@media (max-width: 414px) {


.hamburger .line{
  width: 20px;
  height: 3px;
  background-color: #ecf0f1;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}



#circulo{
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#circulo.is-active{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#circulo:before{
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 3px solid transparent;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  border-radius: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#circulo.is-active:before{
  border: 3px solid #ecf0f1;
}

#circulo.is-active .line{
  width: 20px;
}

#circulo.is-active .line:nth-child(2){
  opacity: 0;
}

#circulo.is-active .line:nth-child(1){
  -webkit-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  transform: translateY(8px);
}

#circulo.is-active .line:nth-child(3){
  -webkit-transform: translateY(-8px) rotate(90deg);
  -ms-transform: translateY(-8px) rotate(90deg);
  -o-transform: translateY(-8px) rotate(90deg);
  transform: translateY(-8px) rotate(90deg);
}

}


/* -----------------------
LINKS
------------------------*/


a:link, a:visited, a:active { 
	text-decoration: none; 
	color: #9B809B; 
	border-bottom: 1px dotted #487A9A; }
a:hover { color: #487A9A; }

.footer a:link, .footer a:visited, .footer a:active  { 
	text-decoration: none; 
	color: #b1dbcb; 
	border-bottom: 1px dotted #fafafa; }
.footer a:hover { color: #fff; }

a.head:link, a.head:visited, a.head:active, a.head:hover {
border: 0; 
text-decoration: none;
}

/* -----------------------
BASE STYLES
------------------------*/

.hi { color: #9B809B; font-weight: 600;}

h1 { 
font-family: Roboto, sans-serif;
font-size: 1.9em; 
color: #684D68;
text-transform: uppercase; 
font-weight: 500;
margin: 0 0 .5em 0;
}

h2 { 
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 1.75em; 
color: #684D68;
text-transform: uppercase; 
font-weight: 500;
margin: 0 0 .5em 0;
}

h2.dos {margin: 0 0 1em 0; }

h3 { 
font-size: 1.375em; 
font-family: 'Special Elite', cursive; 
color: #5E5E5E;
font-weight: normal;
margin: 0;
}

h3.dos { color: #307DB0;}


@media (max-width: 414px) {
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em;}
h3.dos { font-size: 1.125em;}
}



/* ////////////////// FRAMES COVERED ////////////////////////


-moz-box-shadow: 0px 3px 5px #555555;
-webkit-box-shadow: 0px 3px 5px #555555;
box-shadow: 0px 3px 5px #555555; */