@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Poppins:wght@200;400;600&display=swap');
 

html { overflow-x:hidden; }

body { 
	color:#111;
	font-size:1.4rem;
     font-family: 'Poppins', sans-serif;
}


 
html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

img { width:100%;
	border: 0;
}
a { 
	color: #111;
	text-decoration: none;
}
a:hover {
	color: #111;
	text-decoration: underline;
}
.clear {
	clear: both;
}

.ir-arriba {
	display:none;
	padding:15px;
	background:#111;
	font-size:20px;
	color:#d5ba0a;
	cursor:pointer;
	position: fixed;
	bottom:20px;
	right:20px;
}
   @media ( max-width:480px){
.ir-arriba {
	display:none;
	padding:15px;
	background:#111;
	font-size:20px;
	color:#fff;
	cursor:pointer;
	position: fixed;
	bottom:100px;
	right: 0px; opacity:0.8
}   
   
}
 
.yellow{ color: #d5ba0a}
 
/*********** HEADER ****************************************************/
#header  { width:100%; height:100px; background: #fff;  position:fixed; z-index: 99999999999999;}
 


 .botones{    margin: 30px auto; display: block;  text-align: center} 

.botones a { display: inline; font-size: 1.1em; margin: 0 20px 0 20px;  border-radius: 10px; padding: 10px;}
 .botones a.tfno { background: #d5ba0a ; color: #fff} 
 .botones a.whats  { background: #fff; border:1px solid #d5ba0a ;  color: #d5ba0a} 


a.instagram { position: absolute; left: 30%; top: 20px; font-size: 2em; }
 
#header  a.logo img{   margin:  0 auto; display: block;    max-width:300px; height:auto;   width:100%}

 
 
 
nav { margin: 0; margin-top: 20px;   	padding: 0;  

 }
 

nav [type="checkbox"],  nav label {
	  display: none;
}

 
nav li { margin: 0  ; display: block; float: left; clear: none; }
nav li a { 
display: block;
  padding: 25px; text-transform: uppercase;
   font-size:1.1em;  ; 
  color:#222;     
   font-weight:400; 
     }
nav a:hover, nav ul li a.select  {  color:#d5ba0a  ;}


 

@media ( max-width: 1600px){ 
  nav li a {   font-size:1em; }
}

@media ( max-width: 1289px){ 
  nav li a { 
 	  padding: 15px;}
	
	
	
}

 @media ( max-width: 1024px){ 
 .botones{    margin: 3px auto; display: block;  text-align: center}
 .botones a { max-width: 170px; display: block; font-size: 1em; margin: 5px;  border-radius: 10px; padding: 5px;}

	 
	 a.instagram { position: absolute; left: 30%; top: 20px; font-size: 2em; }

	 
	 
	 
 nav ul {
		  display: none;
	}
	
	label#nav {
  		display: block;
  		background:  none;
		  width: 60px;  
		  padding:4px ;
  		height: 50px;
		margin:0; text-align:center;
  		z-index: 999999999999999999;
		color:#fff;
  		cursor: pointer; 
		  position: absolute;
		  right:2%;
  		top:20px;
	} 
 label#nav:after{
  content:'';
  display: block;
  width: 40px;
  height: 3px; 
  background: #caa523;
  margin:  8px;
  box-shadow: 0px 12px 0px #caa523, 0px 24px 0px #caa523
}
 
label#nav:hover { background:#b4931f}

	[type="checkbox"]:checked ~ ul {width:100%;
  		display: block;
  		z-index: 999999999999999999; left:0; top:60px;
  		position: absolute;
  		background: #caa523;
	}
	
 	
 nav   li   {    text-align:center; width:100%;
	padding:   6px  0 10px 0; border-top:1px solid #b4931f; color:#fff; 
}
 nav   li  a {   color:#fff; 
}
 nav ul li a.sel{ font-weight:600}
nav a:hover,nav ul li a.sel:hover { font-weight:600    ;}
nav li a:hover, nav ul li a.sel:hover {   font-weight:600  ;color:#fff;  background:none}

	 
	nav ul li,  #menu ul li{
		  display: block;
  		float: none;
  		width: 100%;  
		  text-indent:  0px;
	}

}





@media ( max-width: 768px){ 
  	 a.instagram { position: absolute; left: 80%; top: 20px; font-size: 2em; }

	
 [type="checkbox"]:checked ~ ul {  top:70px; 
	}

}
 
@media ( max-width: 480px){
	#header  { width:100%; height:160px; ;}
 
 
 .botones{    width: 100%  ; position: relative;  margin: 10px 0 10px 0} 

.botones a { display: inline; text-align: left;font-size: 1em; margin: 5px;  border-radius: 10px; padding: 5px;}
 
 
a.instagram { position: absolute; left: 90%;  top: 2px; font-size: 2em; }
 
	 
#header a.logo img{ max-width: 220px; margin: 20px;
	}
	
	
	
	
[type="checkbox"]:checked ~ ul {  top:120px; 
	}
.ir-arriba { 
	padding:5 15px 5px 15px; 
}

	label#nav {
		  width: 65px;  
		  padding:5px ;
  		height: 50px;
		top:75px;
}
 label#nav:after{
  content:'';
  display: block;
  width: 40px;
  height: 3px;  
  margin:  10px;}
  
  
  }




 
 /******************************************************************************/
  /**************HOME***************************************************/
/******************************************************************************/
#home  { 
  overflow: hidden;  
  position: relative; z-index: 0; min-height: 900px;
 width:100%; padding-top: 50px; padding-bottom:30px;background-size:100%; background-position:  300px 0; background: url("../images/banner_rodica.jpg")}
 
  
#home  .caption{  z-index: 99;
  position: absolute;
  top:38%;   right: 5% ;
  width:35%;    
	
}

#home  .caption h1{  font-size: 13rem; color: #d5ba0a; text-align: right;
     font-family: 'Gloock', sans-serif;
}

 
#home  .caption a{  font-size: 1.5rem; color: #fff; text-align: right; display:block; margin-top: 10%; margin-right: 25%}

@media ( max-width: 1600px){ 
 #home  .caption{  z-index: 99;
  position: absolute;
  top:38%;   right: 5% ;
  width:45%;    
	
}

}

@media ( max-width: 1289px){ 
 #home  .caption{  z-index: 99;
  position: absolute;
  top:28%;   right: 5% ;
  width:45%;  }
	
#home  .caption h1{  font-size: 9rem; color: #d5ba0a; text-align: right;
     font-family: 'Gloock', sans-serif;
}
}



@media ( max-width: 768px){ 


 #home  .caption{  z-index: 99;
  position: absolute;
  top:58%;   left: 5% ;
  width:55%;  }
	
	#home  .caption h1{   text-align: left;
	}
	
	
#home  .caption a{  font-size: 2rem; color: #333; text-align: left; display:block; margin-top: 10%; margin-left:20%}

}


@media ( max-width: 480px){ 
	
	
	#home  {   min-height: 750px;
 width:100%; padding-top: 50px; padding-bottom:30px;background-size:cover!important; background-position: -200px 0px!important;   background: url("../images/banner_rodica.jpg")}
 
  
#home  .caption{   top:68%;
  width:75%;    
	
}

#home  .caption h1{  font-size: 6rem;  color: #222;
}
	
	

}

/**************estilos comunes ***************************************************/

.row {  max-width:1400px; margin:0 auto; padding:30px 0 50px 0 }

p{ font-size:1.5rem; line-height: 1.8em}
/*col-2*/
.col-2{ float:left; width:50%;}
.col-3{ float:left; width:33.333%;}
.col-4{ float:left; width:25%;}


h2{  font-size: 6rem; color: #333; text-align: center;     font-family: 'Gloock', sans-serif;}
h3{  font-size: 4rem; color: #d5ba0a; text-align: center;     font-family: 'Gloock', sans-serif;}
h4{  font-size: 4rem; color: #333; text-align: center;     font-family: 'Gloock', sans-serif;}
p{ padding: 10px}
.dark{ color:#333;}
.padding{ padding:5%  15%!important}
.padding h3{ text-align: left}

@media ( max-width: 768px){ 
h2{  font-size: 5rem; color: #333; text-align: center;     font-family: 'Gloock', sans-serif;}
h3{  font-size: 3rem; color: #d5ba0a; text-align: center;     font-family: 'Gloock', sans-serif;}
h4{  font-size: 3rem; color: #333; text-align: center;     font-family: 'Gloock', sans-serif;}

 
}


@media ( max-width: 480px){ 
.col-2{ float:left; width:100%;}
.col-3{ float:left; width:100%;}
.col-4{ float:left; width:50%;}

 
}

/******************************************************************************/
/**************conocenos***************************************************/
/******************************************************************************/

#conocenos{ position: relative; z-index: 0;  width:100%;  margin-top: 50px;
	padding-top:50px; padding-bottom:0px 
 }

 .presentacion  {  max-width:1024px; padding: 20px; margin:0 auto;  }
 .presentacion p { text-align: center}

 a.pide_cita{ display:block; max-width:220px;padding:20px;   color:#fff; background:#d5ba0a; border-radius:10px; font-weight:400; font-size:1.1em; text-align:center; text-transform:uppercase;  margin:20px auto;}



/******************************************************************************/
/**************servicios***************************************************/
/******************************************************************************/

 
 
#servicios  { 
  overflow: hidden; 
  position: relative; z-index: 0; 
 width:100%; padding-top:30px; padding-bottom:30px; }
 
  
  
 
 
    
.servicio img { float: left; max-width: 200px; width: 27%; padding: 10px;}
.servicio .info { float: left; width: 70%;padding: 30px; }
.servicio  H3{ color: #333; font-size: 3rem;  text-align: left;}
 
 

.galeria { padding-bottom: 60px}
.galeria img{  float: left; width: 24.6%; margin: 2px}


@media ( max-width: 768px){ 
	 
.servicio img, .servicio .info { float: left; width: 100%;padding:0 30px  0 30px; }
	.servicio img { margin: 0 auto; float: none;display: block;max-width: 180px; }

	.servicio  H3{ color: #333; font-size: 2.4rem;  text-align: center;}

	
	.galeria img{  float: left; width: 49%; margin: 2px}

}



@media ( max-width: 480px){ 
.galeria img{  float: left; width: 99%; margin: 2px}

.padding{ padding: 20px!important}
}

/******************************************************************************/
/**************contacto***************************************************/
/******************************************************************************/

#contacto{ position: relative; z-index: 0;  width:100%; 
	padding-top:10px; padding-bottom: 00px;	
 }



#contacto p {padding: 10px; font-size: 2rem;  font-family: 'Gloock', sans-serif;}

#contacto p.address {padding: 10px; font-size: 1.6rem; font-family: 'Poppins', sans-serif; }


#contacto p span{ font-size: 4rem;  }
 
 

.mapa iframe{width: 100%; min-height: 500px; max-width: 500px }

.mapa{ 	padding-top:40px; padding-bottom:40px;background-size:cover; background: url("../images/bg.jpg"); background-position: 400px 0}



@media ( max-width: 768px){ 
 
#contacto p span{ font-size: 3rem;  }
}



#legal { padding-top: 100px!important}

#legal h2{ font-size: 3rem; text-align: left}
#legal h3, #legal h4{ font-size: 2rem; text-align: left}







/******FOOTER*****************/
footer{ position: relative; z-index: 0;  width:100%; 
	padding-top:20px; padding-bottom:20px;background:url(../images/footer.jpg); background-size: cover)
 }

footer img{ max-width: 90px; display: block; margin: 0 auto}

footer h4{ font-size: 3rem; color: #fff;}
footer p { padding-top: 25px;text-align: center; font-size: 1.5rem;}


footer p.legal {   font-size: 1.2rem; color: #999}
footer p.legal  a{ padding: 15px; }


   .by{ float: right;font-weight: 800; text-transform: uppercase;
}