@charset "utf-8";
/* CSS Document */

*{margin: 0px;
padding:0px;}
img{ max-width:100%}
a{text-decoration:none}
h1, h2, h3, h4{
	text-decoration:none;
	font-weight:normal}
body{
	font-family: 'ralewayregular';
	color:#333;
}

@font-face {
    font-family: 'ralewayregular';
    src: url('fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

header{
	background-color:#FFF;
	position:fixed;
	top:0;
	z-index:15;
	/*padding-top:25px;*/
	width:100%;
	border-top:solid 25px #6DB8C2;
}
.cabecero{
	width:60%;
	margin:auto;
}
.cc-nb-okagree {
  background-color: #6DB8C2!important;
}
.cc-nb-reject {
  background-color: #6DB8C2!important;
}
.cc-nb-main-container {
  border-color:#333!important;
	border-style: solid!important;
	border-width: 1pt!important;
	text-align:center;
}

h1{
	font-family: 'ralewayregular';
	display:inline-block;
	width:45%;
	text-decoration:none;
	font-weight:normal;
	margin:0.7em 0% 0.5em 1em;
	vertical-align:middle;
	font-size:1.6em;
}


h1 img{
	vertical-align:middle;
	width:60px;
	padding-bottom:10px;
}
	
	nav{
	vertical-align:middle;
	display:inline-block;
	text-align:center;

	}
	
ul.menu{
		font-size:1.1em;
		max-width:100%;
		/*width: 100%;*/
		list-style: none;
			
	}
	
	ul.menu li{
		position:relative;
		display: inline-block;
		text-align:center;
	}
	
	ul.menu li a{
		color:#6DB8C2;
		display: block;
		text-decoration:none;
		padding:0.7em;
		min-width:130px;
		-o-transition:all ease-in 0.3s;
		-moz-transition:all ease-in 0.3s;
		-ms-transition:all ease-in 0.3s;
		-webkit-transition:all ease-in 0.3s;
		transition:all ease-in 0.3s;



	}
	
	
	ul.menu li a:hover{
		color:#2c779a;
		
		-o-transition:all ease-out 0.3s;
		-moz-transition:all ease-out 0.3s;
		-ms-transition:all ease-out 0.3s;
		-webkit-transition:all ease-out 0.3s;
		transition:all ease-out 0.3s;
		
	}
	/*#inicio{
		width:100%;
		height:25px;
		background-color:#25BCA6;
		z-index:20;
		position:absolute;
		top:0;
		
	}*/
	.horariodireccion{
		width:60%;
		margin:auto;
		margin-top:140px;
	}
.wrapper{
	z-index: 1000;
  position: fixed;
  bottom: 30px;
  left: 30px;
  max-width: 365px;
  background: #fff;
  padding: 25px 25px 30px 25px;
  border-radius: 15px;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  text-align: center;
	border:thin #2c779a solid;
}
.wrapper.hide{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
::selection{
  color: #fff;
  background: #FCBA7F;
}
.wrapper img{
  max-width: 90px;
}
.content header{
  font-size: 25px;
  font-weight: 600;
}
.content{
  margin-top: 10px;
}
.content p{
  color: #858585;
  margin: 5px 0 20px 0;
}
.content .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
}
.buttons button{
  padding: 10px 20px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  background:#2c779a;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttons button:hover{
  transform: scale(0.97);
}
.buttons .item{
  margin: 0 10px;
}
.buttons a{
  color: #2c779a;
	text-decoration:underline
}
	#abajo{
		margin-top:1em;
		margin-bottom:1em;
	}
	.horariodireccion img{
		max-width:40px;
		margin: 0 10px;
		display:inline-block;
		vertical-align:middle;
	}
	#direccion{
		margin-right:5%;
	}
	.textohorario{
		font-size:0.9em;
		margin-left:10px;
		display:inline-block;
		vertical-align:middle;
	}
	.hd{
		display:inline-block;
		/*width:35%;*/
	}
#portada{
	position:relative;
	margin-top:30px;
	width:100%;
	background-image:url(img/clinica-dental-dentista-vitoria-achutegui-perez.jpg);
	height:700px;
	background-position: center;
	background-size:auto;
	/*border-top:solid 5px #25BCA6;*/
}
#overtext{
	position:absolute;
	top:30%;
	left:20%;
	width:40%;
}
h2{
	font-size:2.5em;
	font-family: 'ralewayregular';
	color:#2c779a;
	
}
.sub{
	margin-top:1.7em;
	font-size:1.5em;
	font-style:italic;
	color:#333333;
}
#cajas{
	position:relative;
	margin:auto;
	width:60%;
	margin-top:-100px;
}
.box{
	position:absolute;
	z-index:2;
	display:inline-block;
	
	-o-transition:all ease-in 0.2s;
		-moz-transition:all ease-in 0.2s;
		-ms-transition:all ease-in 0.2s;
		-webkit-transition:all ease-in 0.2s;
		transition:all ease-in 0.2s;
	
	
}
#boxuno{
	background-color:#2c779a;
	width:33%;
}
#boxdos{
	left:33%;
	background-color:#6DB8C2;
	width:33%;
}
#boxtres{
	left:66%;
	background-color:#71C8B3;
	width:33%;
}
.box:hover{
	transform:translateY(-10px);
	-o-transition:all ease-out 0.2s;
		-moz-transition:all ease-out 0.2s;
		-ms-transition:all ease-out 0.2s;
		-webkit-transition:all ease-out 0.2s;
		transition:all ease-out 0.2s;
}
.serdiv{
	display:inline-block;
	color:#FFF;
	padding:4em 0 4em 3em;
	width:50%;
	vertical-align:middle;
	
}
.serv{
	font-size:1.3em;
	margin-bottom:0.8em;
	}
.box img{
	display:inline-block;
	width:140px;
	vertical-align:middle;
	
	
}
#nosotros{
	margin:auto;
	margin-top:270px;
	width:60%;
	
}
h3{
	font-size:2.3em;
	margin-bottom:1.5em;
	font-family: 'ralewayregular';
}
.imgus{
	display:inline-block;
	width:30%;
	margin-right:3%;
	vertical-align:middle;
}
.textus{
	font-size:1.2em;
	display:inline-block;
	width:66%;
	vertical-align:top;
	line-height:2em;
	color:#666;
	vertical-align:middle;
}
#ventajas{
	background-color:#6DB8C2;
	margin-top:5em;
	width:100%;
}
.ventext{
	font-size:1.2em;
}
#advant{
	font-size:2.3em;
	padding-top:1.5em;
	margin-bottom:1em;
	color:#FFF;
	margin-left:20%;
}
#adv{
	margin:auto;
	width:60%;
	color:#FFF;
	text-align:center;
	
}
.vent{
	display:inline-block;
	width:20%;
	margin:2em 6%;
	vertical-align: top;
}
#ladoizq{
	margin:2em 0;!important;
}
#ladodch{
	margin:2em 0;!important;
}
#dch{
	margin:2em 6% 2em 0;!important;
}
.vent img{
	width:100px;
	margin-bottom:0.5em;
}
h4{
	font-size:2em;
	margin-bottom:0.6em;
}
.linea{
	margin-top:1em;
}
#servicios{
	width:60%;
	margin:auto;
	margin-top:50px;
}
.servis{
	margin-left:1em;
}
#equipo{
	background-color:#2c779a;
	margin-top:60px;
	width:100%;
	color:#FFF;
	padding-bottom:2em;
}
.tim{
	width:60%;
	margin:auto;
}
#eq{
	padding-top:1.5em;
}
.team{
	display:inline-block;
	width:20%;
	margin-left:6%;
	text-align:center;
	vertical-align:top;
}

#left{
	margin-left:0;
}
.team img{
	border-radius:50%;
	margin-bottom:1em;
}
h5{
	font-size:1.2em;
	margin-bottom:0.6em;
}
.colaboracion{
	width:60%;
	margin:auto;
	margin-top:50px;
	
}
.cola{
	display:inline-block;
	text-align:center;
	width:24%;
	vertical-align:middle;
	
}
.cola img{
	max-width:150px;
}
#contacto{
	margin-top:50px;
}
 #map {
        height: 400px;
        width: 100%;
		
 }
 #contacto iframe{
	 saturation:0;
 }
 footer{
	 /*height: 30px;
	 width: 100%;*/
	 text-align: center!important;
	 background-color: #2c779a;
	 color: #fff;
  	padding: 20px;
 }
footer nav {
  text-align: center!important;
}
footer nav ul {
  list-style: none;
	text-align: center!important;
display: inline-block;
  margin: 0;
  padding: 0;
}

footer nav li {
  display: inline-block!important;
  margin-right: 20px;
	text-align: center!important;
}

footer nav li:last-child {
  margin-right: 0;
}

footer nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer nav a:hover {
  color: #333;
}
 
 @media (max-width:2000px){
	 
h1{
		 font-size:1.4em;
		 width:45%;
	 }
	 h1 img{
		width:50px;
		
	}/*	 
	nav{
		width:50%;
	}*/
	 ul.menu li a{
		 min-width:80px;
	 }
	 .cabecero, #horariodireccion, #cajas, #nosotros, #adv, #servicios, .tim, .colaboracion{
		width:80%;
	
	}
	
		
	
	#advant{
		margin-left:10%;
	}
	#cajas img{
		width:30%;
	}
	.box{height:250px;}
 }

	@media (max-width:1366px){
		#cajas{width:100%;
		
		}
		
	}
	@media (max-width:1300px){
		.box{
			height:300px;}
		h1{
		 	font-size:1.2em;
		 	width:100%;
		 	margin:auto;
		 	text-align:center;
		
		}
		.cabecero{
			width:100%;
			}
		.menu li{
			
			margin:auto;
		}
		nav{
			margin:auto;
			margin-left:25%;
			
		}
		.menu{
			margin:auto;
			
		}
		h1 img{
			width:40px;
		}
		#overtext{
			left:10%;
			width:80%;
		}
		#nosotros{
			margin-top:350px;
		}
		.imgus{
			width: 60%;
			margin:auto;
			display:block;
		}
		
		.textus{
			width:100%;
			margin:auto;
			display:block;
			margin-top:30px;
		}
		.team{
			width:40%;
			margin-bottom:40px;
		}
		#left{
			margin-left:6%;
		}
		.colaboracion{
			width:90%;
		}
	}
	
	@media (max-width:850px){
		
		.horariodireccion img{
		max-width:30px;
		}
		nav{
			margin:auto;
			margin-left:18%;			
		}
		.horarios{
			font-size:0.8em;}
		.box img{
			display:none}
		.cola{
			width:32%;}
		.vent{
			width:40%;
			margin:2em 0;}
		#ventajas{
			padding-bottom:3em;}
	}
	@media (max-width:770px){
		nav{
			margin:auto;
			margin-left:10%;			
		}
		.horariodireccion{
			width:90%;
		}
		.cola{
			width:45%;
		}
	}
	@media (max-width:700px){
		nav{
			margin:auto;
			margin-left:5%;			
		}
		.team{
			width:80%;
			display:block;
			text-align:center;
			margin:auto;
			margin-bottom:40px;
			margin-left:6%;
		}
		.team img{
			width:80%;
		}
	/*	#left{
			margin-left:6%;
		}*/
		.box{
			position:static;
			width:100%!important;
			display:block;
			height:auto;
			
		}
		.box img{
			display:inline-block;
			max-width:100px;
		}
		#nosotros{
			margin-top:50px;
		}
		.imgus{
			width: 90%;
		}
}
		
	}
	@media (max-width:600px){
		nav{
			margin:auto;
			margin-left:0%;			
		}
		
	}
	@media (max-width: 550px) {
		#menu {
			width:1.6em;
			display: block;
			font-size:1.9em;
			text-align: center;
			cursor:pointer;
			margin-bottom:10px;
		}
		#nav.js {
			display: none;
		}
		ul#nav {
			width:100%;
		}
		ul#nav li {
			width:100%;
			border-right:none;
		}
		.vent{
			width:80%;
			margin:auto;
			margin:2em 0!important;}
		.cola{
			max-width:100%;
			width:80%;
			margin:auto;
			margin:1em 0 0 10%!important;}
		h1{
		 	font-size:1.1em;
		}
		h1 img{
			width:30px;
		}
		#overtext{
			top:15%;
		}
	
	}
	@media screen and (min-width: 550px) {
		#menu {
			display: none;
		}
	}