@font-face{
	font-family: Open Sans;
    src: url(../fonts/OpenSans-Light.woff2),
         url(../fonts/OpenSans-Light.woff),
	     url(../fonts/OpenSans-Light.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: Open Sans;
    src: url(../fonts/OpenSans-Regular.woff2),
         url(../fonts/OpenSans-Regular.woff),
	     url(../fonts/OpenSans-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Open Sans;
	src: url(../fonts/OpenSans-Bold.woff2),
         url(../fonts/OpenSans-Bold.woff),
	     url(../fonts/OpenSans-Bold.ttf);
	font-weight: 700; font-display: swap;}
* { margin: 0;	padding: 0;}
body {    font-family: 'Open Sans', 'sans-serif'; font-weight: 300; font-display: auto; font-size: 1em; line-height: 1.9em;}
img{ height: auto;}
#logo{	margin: 20px 0 0 0; text-align: center;}
#presen #frase{	color: #fff;}
#presen p {        color: #222;   }
#imagen{	width: 100%;}
#imagen img{	width: 100%; height: auto;}
.menor{ line-height: 1.5em; margin-top: 10px;}
.pec a{ color: #000;}
img a{ text-decoration: none; border: none #fff;}
a img{ text-decoration: none; border: none #fff;}
.neg, strong{ font-weight: 700;}
.noneg{ font-weight: 300;}
#texto strong .noneg, .texto strong .noneg, #texto .noneg strong{color: #222; font-weight: 400;}
.inter{ display: block;}
.inf{ margin: 0 0 40px 0; color: #222;}
.noneg strong, #tags strong{ font-weight: 300;}
address{ font-style: normal;}	
.borra{ clear: both;}
a{ text-decoration: none;}
#info, .info{ background: #fff;}
#general{ padding: 60px 0 0 0;}
#general p{ margin: 0 0 15px 0;}
#colors #presen{ color: #fff;}
#sup{ margin: 0 0 0 0;}
.banda{ font-weight: 400;}
.verde{ background: #94b700;}
.azul{ background: #1ab6ba;}
.morado{ background: #7a6e96;}
.rosa{ background: #ce2469;}
.naranja{ background: #f39b11;}
.green, #menu nav ul .green a, #menu nav ul .mgreen a{ color: #94b700;}
.blue, #menu nav ul .blue a{ color: #1ab6ba;}
.purple, #menu nav ul .purple a, .preg{ color: #8065c1;}
.pink, #menu nav ul .pink a, #menu nav ul .mpink a{ color: #ce2469;}
.orange{ color: #ff8a0d;}
#faldon .tel-nuevo a{ color: #fff; font-size: 17px; letter-spacing: 0.2px; margin-top: 10px; padding: 10px 0;}
.preg{ font-weight: 400; margin: 30px 0 10px 0; font-size: 19px; max-width: 460px;}
.preguntas{ margin: 0 0 50px 0;}
#menu nav ul .pink a, #menu nav ul .purple a, #menu nav ul .blue a, #menu nav ul .green a{ font-weight: 400;}
.banda{ margin: 50px 0 70px 0;}
.servicios{ background: url(../imagenes/linea.jpg) 0 13px repeat-x; margin: 60px 0 0 0; color: #888; text-align: center;}
.servicios a{ color: #888; display: block;}
.servicios .b{ margin: 17px 0 15px;}
.servicios .a{ margin: 10px 0 10px;}
.serv{ background: #fff; width: 170px; margin: 0 auto 40px auto; display: block;}
.servicios h2{ font-size: 18px; font-weight: 300;}
.hover{ display: none; padding: 0 20px;}
a:hover .hover { display: block;}
a:hover h2{ font-size: 14px; font-weight: 700;}
#diseno a:hover h2{ color: #94b700;}
#posicionamiento a:hover h2{ color: #7a6e96;}
#responsive a:hover h2, .link-rwd{ color: #1ab6ba;}
#fotografia a:hover h2{ color: #ce2469;}
#grafico a:hover h2{ color: #F60;}
a:hover .a { width: auto; height: 50px; margin: 10px 0 0 0;}
a:hover .b { width: 20%; height: auto; margin: 20px 0 0 0;}
#video{ padding: 100px 0 0 0; }
#destacado, .destacado{ padding: 70px 0;}
.tit{ font-weight: 300; display: block;}
#titulo, .titulo{ color: #fff;}
#titulo h2, .titulo h2{ color: #000; font-size: 16px;}
#texto, .texto{ color: #000; line-height: 2.2em;}
#texto strong, .texto strong{ color: #fff; font-weight: 400;}
.pant img{ display: block;}
.mus{ display: block; border-bottom: 1px solid #fff; padding: 0 0 10px 0;}
.ges{ font-weight: 700; display: block; border-bottom: 1px solid #fff;
	padding: 0 0 10px 0; margin: 40px 0 10px 0;}
#redesder{ background: #ce2469; color: #fff; border-radius: 155px;
	text-align: center; border: 10px solid #fff;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
#visoder{ background: #7a6e96; color: #fff; padding: 20px;
	border-radius: 155px; text-align: center; border: 10px solid #fff;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
#visoder a{ width: 100px; padding: 5px 0; border: 1px solid #fff;
	font-size: 14px; color: #fff; display: block; margin: 10px auto 0 auto;}
#visoder a:hover{
	background: #fff; color: #7a6e96; font-size: 14px;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
#visoiz h2{ color: #7a6e96; font-weight: 400;}
.mov h3{ color: #1ab6ba; font-weight: 400;}
.nar h3{ color: #ff8a0d; font-weight: 400; font-size: 25px; margin: 40px 0 10px 0;}
#redesder ul li{ list-style-type: none;}
#tags{ padding: 40px 0 5px 0; }
#tags a{ padding: 5px 0; display: inline-block; color: #000;}
.linea, #tags h1, #tags h2{
	font-size: 14px; line-height: 1.8em; font-weight: 300; display: inline;}
#faldon{ background: #333; color: #fff; font-size: 0.9em;}
#faldon h3{ border-bottom: 1px solid #fff; margin: 0 0 5px 0; padding: 0 0 5px 0;
	font-weight: 400; width: 200px;}
#faldon a{ color: #fff; padding: 2px 0; display: block;}
#faldon a:hover{ font-weight: 700;}
.ejemplo a{ display: block;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
.ejemplo a:hover{
	background: #fff url(../imagenes/ver.svg) no-repeat center center; background-size: 105px auto;}
.ejemplo a:hover img{
	opacity: 0.1; -moz-opacity:0.1; -khtml-opacity: 0.1;
	-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.rwd a{ display: block;}
.rwd a:hover{
	background: #fff url(../imagenes/ver.jpg) no-repeat center center;}
.rwd a:hover img{
	opacity: 0.1; -moz-opacity:0.1; -khtml-opacity: 0.1;
	-webkit-transition: all 0.3s ease-in-out;  -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.num{font-size: 25px; width: 50px; background: #94b700; display: block; color: #fff; 
    text-align: center;}
.trio h3{ color: #94b700; font-weight: 300; margin-top: 20px;}
.trio h4{ font-size: 15px; font-weight: 400; margin-bottom: 20px;}
#gris{ background: #eee; margin: 0 0 50px 0;}
#gris a{ color: #000;}
#gris h4{ color: #7a6e96; font-weight: 400; font-size: 20px; padding: 0 0 15px 0;}
#proyectos ul{ margin: 0 0 0 20px;}
#proyectos h5{ color: #299000; font-weight: 400; margin: 0 0 10px 0;}
.boton-index{ border: #1ab6ba 1px solid; width: 140px; margin: 0 auto 40px auto; text-align: center;}
.boton-index a{ color: #1ab6ba; display: block; padding: 5px; font-size: 1em;}
.boton-index a:hover{ background: #1ab6ba; font-size: 1.1em; color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#ver a{ display: block; background: #299000; color: #fff; text-align: center;}
#ver a:hover{ background: #94b700; font-size: 1.1em;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#textoder a{ display: block; background: #fff; color: #ce2469;
	text-align: center; padding: 8px 0; margin: 10px 0 0 0; font-weight: 400;}
#textoder a:hover{ background: #93003c; color: #fff; font-size: 1.1em;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#textoder #mensaje a{ display: block; background: #fff; color: #ff8a0d;
	text-align: center; padding: 8px 0; margin: 10px 0 0 0; font-weight: 400;}
#textoder #mensaje a:hover{
	background: #666; color: #fff; font-size: 1.1em;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#pieder{ color: #ccc; font-size: 11px; line-height: 14px;}
#top a{ float: right; width: 45px; height: 32px; display: block;
	margin: 39px 0; text-align: center; padding: 13px 0 0 0; border-radius: 25px;}
#top a:hover{ background: #000;}
.cverde a{ background: #94b700;}
.crosa a{ background: #ce1e69;}
.cazul a{ background: #1ab6ba;}
.cmorado a{ background: #7a6e96;}
.cgris a{ background: #555;}
.cnaranja a{ background: #ff8a0d;}
.video{ border-bottom: 1px solid #ccc;}
.video img{ width: 100%; height: auto;}
.yout a{ width: 150px; color: #000; padding: 6px 0; text-align: center;
	display: block; border: 1px solid #ccc; margin: 10px 0 10px 0; font-size: 0.8em;}
.yout a:hover{ font-size: 0.9em;}
.video h3{ margin: 15px 0 0 0; font-weight: 400; font-size: 14px;}
#cont a{ display: block; padding: 10px 0; color: #fff; text-align: center; font-size: 15px; margin: 30px 0 0 0;}
#datos{ text-align: center; font-weight: 400; color: #666;}
#datos a{ color: #666;}
#datos a:hover{ color: #bbb;}
.lef{ width: 100px; margin: 0 auto; padding: 5px 0; color: #bbb; font-weight: 700; display: block; 
	font-size: 15px; line-height: 15px;}
#pro{ text-align: right; font-size: 0.8em;}
#vtexto p{ margin: 15px 0 0 0;}
#vtexto h1{ color: #ce2469;}
#vtexto h4{ font-weight: 300; font-size: 0.8em;}
#infoder a{ width: 30px; display: block; border: 1px solid #fff;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
#infoder a:hover{ opacity: 0.5; -moz-opacity:0.5; -khtml-opacity: 0.5;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#lanak a{ background: #94b700; font-weight: 400; color: #fff; display: block; width: 150px; 
	padding: 7px 0 8px 0; font-size: 15px; text-align: center; margin: 30px 0 0 0;}
#lanak a:hover{ color: #000;}
.grupo #lanak a{ background: #1ab6ba; float: right;}
.grupo .borra{ height: 100px;}
.boton-pos a{ display: block; background: #7a6e96; color: #fff; font-size: 0.9em;
	text-align: center; padding: 8px 0; margin: 20px 0 0 0; font-weight: 400;}
.boton-pos a:hover{ background: #efefef; color: #7a6e96;}
#configurar{ margin: 60px 0;}
#pop{ position:fixed; left:2%; right:2%; bottom:2%; border: 1px solid #ccc; width:96%; 
	min-height:90px; background: url(../imagenes/transpa.png); color:#000; z-index: 99999;}
#nota{  width:96%;  text-align: center; position:absolute;
	 padding-left:2%; padding-right: 2%; font-size:12px; font-weight: 400; top:10%;}
#inno{ margin-bottom: 10px;}
.aceptar{ font-size: 0.9em; padding:4px 8px; margin-top: 5px; background:#444; text-decoration:none; color:#fff;}
.configurar{ font-size: 0.9em; padding:4px 8px; margin-top: 5px; text-decoration: none; background: #fff; color:#444;}
.dato{ font-size: 1.2em; color: #999;}
.fuente{ text-align: right; margin: 0 0 30px 0; font-size: 0.9em;}
.som{ width: 100%; height: auto; border: 1px solid #fff;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
#visoder2{ text-align: center;}
#visoder2 a p{
	max-width: 200px; margin: 0 auto; display: block; background: #1ab6ba; color: #fff; padding: 10px; border: 1px solid #1ab6ba;}
#visoder2 a:hover p{ background: #fff; color: #1ab6ba;}
#visoder2 a:hover img{ opacity: 0.6;}
#opti{ padding: 20px; color: #fff;}
.port{ color: #94b700; font-weight: normal; font-size: 16px;}
.recientes{ background: #efefef; padding: 30px 0; margin: 30px 0 0 0;}
.recientes h3{ font-weight: normal; color: #1ab6ba; margin-top: 60px;}
.recientes h4{ font-weight: 300;  color: #666; font-size: 1em;}
.w-cliente h1{ font-size: 24px !important; line-height: 25px !important;}
.cliente{ font-size: 17px; line-height: 10px;}
.pant{ margin: 0 0 50px 0;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);	}
.nota{ font-size: 0.8em; line-height: 1.7em; font-weight: 400; margin: 20px 0 0 0;}
.green a{ color: #000;}
.aviso{ margin-top: 60px; text-align: right; font-size: 0.9em;}
#faldon .aviso a{ color: #aaa;}
#info #gris, .info .gris{ margin-top: 80px;}
.bajo{ margin-top: 40px; display: block;}
.envia{ font-size: 18px; background: #1ab6ba; color: #fff !important; padding: 10px 15px; border: 1px solid #1ab6ba;}
.envia:hover{ background: #fff; color: #1ab6ba !important;}
.farmacias h3{margin-top: 60px; font-weight: normal; color: #777;}
.m60{margin-top: 60px;}
.ejemplos-fotos{margin: 60px auto; width: 96%; max-width: 1600px;}
.ejemplos-fotos img{display: inline-block; margin: 0.2% 0 0.2% 0.5%; width: 49.2%;}
.ejemplos-fotos h2{margin-top: 100px; font-size: 20px; margin-bottom: 20px; font-weight: normal; margin-left: 0.5%;}
.interiores{background: url("../fotografia/interiores.svg") no-repeat center bottom; background-size: 80% auto;}
#imagen.interiores img{width: 36%; display: block; margin: 30% auto 0 auto;}
.boton.r a{ margin: 20px 0 0 0; padding: 15px 0; display: block; color: #fff; text-align: center; font-size: 15px; width: 250px;
background: #ce2469; border: 1px solid #ce2469;}
.boton.r a:hover{background: #fff; border: 1px solid #ccc; color: #666;}
@media only screen 
and (max-width : 520px){
body{ font-size: 1.2em; line-height: 2em;}
.container { width: 100%; margin: 0 auto;}
.intro { margin: 0 30px;}
#cabecera{	padding: 20px 0 0 0; margin: 0 0 20px 0;}
#logo{ text-align: center;}
#logo a{ padding: 10px 0; display: block;}
#menu{	width: 100%; margin: 30px 0 0 0;}
#presen{ margin: 40px 0 0 0; font-size: 1em; line-height: 2em;}
.cam{	padding: 20px 0 0 0;}
#presen p{	color: #000;}
#sup h1, #presen #frase{ font-size: 30px; font-weight: 400; line-height: 36px; margin: 0 0 20px 0;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia, .servicios #grafico{
	height: 160px;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia{width: 100%;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento{ border-bottom: 1px solid #ddd; margin: 0 0 30px 0;}
#titulo, .titulo{ width: 100%; padding: 0 0 50px 0; background: url(../imagenes/flecha-baja.png) no-repeat left bottom;}
.tit{ font-size: 25px; line-height: 30px; margin: 0 40px 0 0;}
#texto, .texto{	width: 100%; margin: 20px 0 0 0;}
#textoiz{ width: 100%; margin: 0 0 20px 0;}
#textoder{ width: 100%;}
.recientes h4{	font-size: 1em;}
#faldon{ padding: 0 0 40px 0;}
.ejemplo{ max-width: 290px; margin: 40px auto 0 auto;}
.ejemplo a{	height: 193px;}
.ejemplo a img{	width: 100%; height: auto;}
.logos .ejemplo{ margin: 60px auto; text-align: center;}
.logos .ejemplo img{ width: 90%; height: auto;}
.tipo{	width: 100%; border-bottom: 1px solid #94b700; padding: 0 0 20px 0;}
.tipoc{	width: 100%; border-bottom: 1px solid #94b700; padding: 0 0 20px 0; margin: 30px 0;}
.tipod{	width: 100%;}
.num{ font-size: 26px; padding: 5px 0 5px 0;}
.trio h3{ font-size: 21px; margin: 10px 0 0 0; font-weight: 400;}
.trio h4{ margin: 0 0 5px 0;}
#gris{	padding: 30px 20px;}
#proyectos h5{	font-size: 19px;}
#proyectos{	width: 100%;}
#ver{ max-width: 270px; margin: 50px auto 0 auto;}
#ver a{	margin: 10px 0 0 0; padding: 8px 0;}
#redesiz{ width: 100%; margin: 40px 0 50px 0;}
#redesiz h2{ background: url(../imagenes/redes-sociales2.jpg) top left no-repeat;
	color: #ce2469; font-weight: 400; font-size: 28px; padding: 80px 0 15px 0;}
#redesder, #visoder{ width:260px; height: 260px; border-radius: 220px; padding: 30px; margin: 70px auto 0 auto; 
	font-size: 15px; line-height: 28px;}
#viso, #redes{	margin: 0 0 50px 0;}
#visoiz{ margin: 0 0 50px 0;}
.mus{ font-size: 16px; margin: 5px 0 5px 0;}
.inter{	background: url(../imagenes/interrogantes.jpg) top left no-repeat;
	color: #7a6e96; font-weight: 400; font-size: 26px; padding: 120px 0 15px 0;}
mov.h3{	color: #7a6e96; font-weight: 400; font-size: 26px; padding: 120px 0 15px 0;}
.rwds, .trio{	margin: 0 0 40px 0;}
.rwd{	margin: 50px 0 20px 0;}
.rwd a img{	width: 100%; height: auto;}
#video{	display: none;}
.video{	margin: 0 0 50px 0; padding: 0 0 40px 0;}
.video h2{	font-weight: 700; font-size: 14px; margin: 0;}
#vtexto{	margin: 70px 0 60px 0;}
.videocu{	display: none;}
#pieizdo, #piecen{	display: none;}
#faldon h3{	font-size: 0.9em;}
#faldon a{	color: #fff; padding: 4px 0; display: block;}
#top a{	margin: 0 0 10px 0; padding: 13px 0 0 0;}
#pieder{	width: 100px; float: right; text-align: right; margin-top: 20px;}
#cont a{	padding: 12px 0; margin: 15px 0 0 0;}
#tags{	padding-top: 100px; }
.linea, #tags h1, #tags h2{	display: block;}
.guion{	display: none;}
.dec{	padding: 0 0 50px 0  !important; }
#datos{	font-size: 20px; padding: 30px 0 20px 0; margin: 0; line-height: 35px;	}
#infoder{	display: none;}
#pop{	min-height:110px; line-height: 19px;}
.som{	margin: 30px 0 0 0;}
.mov h3{	color: #1ab6ba; font-weight: 400; font-size: 23px; padding: 0 30px 10px 0;}
.bajo{	margin-top: 20px; margin-bottom: 10px;}
.grupo #lanak a {   float: none; width: 100%; max-width: 200px; font-size: 16px; margin: 0 auto;}
#imagen.interiores img{padding-top: 35%; margin-top: 0;}
#imagen.interiores{background-size: 90%;}
.ejemplos-fotos.interiores img{display: block; margin: 1% 0; width: 100%;}
}
@media only screen 
and (min-width : 521px)
and (max-width : 650px) {
.grupo{	width: 300px; margin: 0 auto;}
.container {	width: 100%; margin: 0 auto;}
.intro {	margin: 0 50px;}
#cabecera{	padding: 20px 0 0 0; margin: 0 0 40px 0;}
#menu{	margin: 13px 0 0 0;}
#presen{	margin: 20px 0 0 0; font-size: 1.0em; line-height: 2em;}
.dec{	margin: 0 0 50px 0;}
#sup h1, #presen #frase{
	font-size: 33px; font-weight: 400; line-height: 40px; margin: 0 0 10px 0;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia, .servicios #grafico{
	height: 140px;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia{ width: 50%; float: left;}
.servicios #posicionamiento, .servicios #fotografia{
	margin: 40px 0 0 0;}
#titulo, .titulo{	background: url(../imagenes/flecha-baja.png) no-repeat left bottom; padding: 0 0 50px 0; margin: 0 0 20px 0;}
.tit{	font-size: 25px; line-height: 30px; margin: 0;}
#textoiz{	width: 63%; float: left;}
#textoder{	width: 36%; float: right;}
#faldon{	padding: 0 0 30px 0; font-size: 0.8em;}
.ejemplo{	width: 330px; float: left; margin: 20px 5px;}
.ejemplo a{	height: 220px;}
	.ejemplo a img{width: 100%; }
.tipo{	border-bottom: 1px solid #94b700; padding: 0 0 20px 0;}
.tipoc{	border-bottom: 1px solid #94b700; padding: 20px 0 20px 0;}
.tipod{	padding: 20px 0 0 0;}
.num{	padding: 5px 0 5px 0;}
.trio h3{	font-size: 20px; margin: 10px 0 0 0; line-height: 17px;}
.trio h4{	margin: 0 0 5px 0;}
#gris{	padding: 40px;}
#proyectos h5{	font-size: 23px;}
#ver{	width: 300px; margin: 30px auto 0 auto;}
#ver a{	margin: 10px 0 0 0; padding: 8px 0;}
#redesiz{	margin: 40px 0 30px 0;}
#redesiz h2{	background: url(../imagenes/redes-sociales.jpg) 220px top  no-repeat;
	color: #ce2469; font-weight: 400; font-size: 30px; padding: 63px 0 15px 0;}
#redesder, #visoder{ width: 280px; height: 280px; border-radius: 220px; padding: 40px; margin: 70px auto 0 auto;}
#viso, #redes{	margin: 0 0 30px 0;}
.mus{	font-size: 22px; margin: 20px 0 10px 0;}
.inter{	background: url(../imagenes/interrogantes.jpg) top right no-repeat;
	color: #7a6e96; font-weight: 400; font-size: 26px; padding: 30px 180px 15px 0;}
.mov h3{	color: #1ab6ba; font-weight: 400; font-size: 26px; padding: 30px 180px 15px 0;}
.rwds, .trio{	margin: 0 0 30px 0;}
.rwd{	width: 350px; margin: 40px auto 20px auto;}
.video{	width: 384px; margin: 0 auto 60px auto; padding: 0 0 60px 0;}
.video h2{	font-weight: 300; font-size: 17px; margin: 0 0 10px 0;}
#vtexto{	margin: 100px 0 60px 0;}
#pieizdo{	width: 35%; float: left; margin: 30px 0;}
#piecen{	width: 35%; float: left; margin: 30px 0;}
#pieder{	width: 100px; float: right; text-align: right;}
#datos{	font-size: 30px; padding: 50px 0 20px 0; margin: 0; line-height: 50px;}
.linea, #tags h1{	display: block;}
.guion{	display: none;}
#infoiz{	width: 85%; float: left;}
#infoder{ width: 9%; float: right;}
#infoder img{ width: 30px; height: 116px;}
#pop{ min-height:100px; line-height: 20px;}
.som{ margin: 30px 0 0 0;}
#imagen.interiores img{padding-top: 30%; margin-top: 0;}
	.ejemplos-fotos.interiores img{display: block; margin: 1% 0; width: 100%;}
}
@media only screen 
and (min-width : 651px)
and (max-width : 800px) {
.grupo{ width: 300px; margin: 0 auto;}
.container { width: 100%; margin: 0 auto;}
.intro { margin: 0 60px;}
#cabecera{ padding: 20px 0 0 0; margin: 0 0 40px 0;}
#menu{ margin: 13px 0 0 0;}
#presen{	width: 80%; margin: 40px 0 0 0; font-size: 1.0em; line-height: 2em;}
.dec{	padding: 0 0 30px 0;}
.cam{	padding: 30px 0 0 0;}
#imagen{	text-align: center; }
#imagen.interiores img{padding-top: 30%; margin-top: 0;}
#sup h1, #presen #frase{	font-size: 35px; font-weight: 400; line-height: 40px; margin: 0 0 20px 0;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia, .servicios #grafico{
	height: 140px;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia{ width: 50%; float: left;}
.servicios #posicionamiento, .servicios #fotografia{	margin: 40px 0 0 0;}
#titulo, .titulo{	background: url(../imagenes/flecha-baja.png) no-repeat bottom left; padding: 0 0 60px 0; margin: 0 0 30px 0;}
#destacado #titulo h2, .destacado .titulo h2{margin: 5px 0;}
.tit{	font-size: 28px; line-height: 33px; margin: 0 100px 0 0;}
#textoder a{	width: 44%; float: left; margin: 20px 6% 0 0;}
#faldon{	padding: 0 0 30px 0;}
.ejemplo{	width: 290px; float: left; margin: 20px 5px;}
.ejemplo a{	height: 193px;}
.tipo{	border-bottom: 1px solid #94b700; padding: 0 0 20px 0;}
.tipoc{	border-bottom: 1px solid #94b700; padding: 20px 0 20px 0;}
.tipod{	padding: 20px 0 0 0;}
.num{	padding: 5px 0 5px 0; margin: 0 0 20px 0; }
.trio h3{	font-size: 20px; margin: 0; line-height: 17px;}
.trio h4{	margin: 0;}
.subbt{	display: block; width: 300px; float: left;}
#gris{	padding: 40px;}
#proyectos h5{	font-size: 23px;}
#ver{	margin: 30px 0 0 0; background: #fff; padding: 5%;}
#ver a{	margin: 0; padding: 14% 0 13% 0; width: 48%; float: right;}
#slider{
	width: 48%; float: left;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 15px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 15px 0px rgba(50, 50, 50, 0.5);}
.ges{	padding: 0 0 10px 0; margin: 20px 0 10px 0;}
#redesiz{	margin: 0;}
#redesiz h2{	background: url(../imagenes/redes-sociales2.jpg) top left no-repeat;
	color: #ce2469; font-weight: 400; font-size: 30px; padding: 80px 0 10px 0;}
#redesder, #visoder{ width: 300px; height: 300px; border-radius: 220px; padding: 40px; margin: 70px auto 0 auto;}
#viso, #redes{	margin: 0 0 50px 0;}
#visoder2{	width: 250px; float: right; font-size: 1.1em;}
.mus{	font-size: 23px; margin: 15px 0 10px 0;}
.inter{	background: url(../imagenes/interrogantes.jpg) top left no-repeat;
	background-size: 120px auto; color: #7a6e96; font-weight: 400; font-size: 26px; padding: 80px 0 15px 0;}
.mov h3{	font-size: 26px; padding: 80px 0 15px 0;}
.rwds, .trio{	margin: 0 0 40px 0;}
.rwd{	width: 44%; float: left; margin: 40px 3% 20px 3%;}
.rwd img{	width: 100%; height: auto;}
.video{	width: 384px; margin: 0 auto 60px auto; padding: 0 0 60px 0;}
#vtexto{	margin: 100px auto 60px auto;}
.video h2{	font-weight: 300; font-size: 17px; margin: 0 0 10px 0;}
#pieizdo{	width: 30%; float: left; margin: 30px 0;}
#piecen{	width: 30%; float: left; margin: 30px 0;}
#pieder{	width: 100px; float: right; text-align: right;}
#datos{	font-size: 33px; padding: 50px 0 20px 0; margin: 0; line-height: 65px;}
#infoiz{	width: 88%; float: left;}
#infoder{	width: 7%; float: right;}
#infoder img{	width: 30px; height: 116px;}
#pop{	min-height:100px; line-height: 20px;}
.som{	margin: 30px 0 0 0;}
.ejemplos-fotos.interiores img{display: block; margin: 1% 0; width: 100%;}}

@media only screen 
and (min-width : 801px)
and (max-width : 999px) {
.grupo{	width: 660px; margin: 0 auto;}
.container {	width: 100%; margin: 0 auto;}
.intro {	margin: 0 60px;}
#cabecera{	padding: 20px 0 0 0; margin: 0 0 40px 0;}
#logo{	width: 32%; float: left;}
#menu{	width: 68%; float: right; margin: 13px 0 0 0;}
#presen{	width: 34%; float: left; margin: 40px 0 0 0; font-size: 1.0em; line-height: 2em;}
.dec{	padding: 0 0 30px 0;}
.cam{	padding: 30px 0 0 0;}
#imagen{	width: 62%; float: right;}
#sup h1, #presen #frase{	font-size: 35px; font-weight: 400; line-height: 40px; margin: 0 0 20px 0;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia, .servicios #grafico{
	height: 180px;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia{ float: left; width: 24%;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento{
	border-left: 1px solid #fff; border-right: 1px solid #999;}
.servicios #fotografia{	border-left: 1px solid #fff; border-right: 1px solid #fff;}
#titulo, .titulo{	width: 38%; float: left; background: url(../imagenes/flecha-dcha.png) no-repeat right top;}
#destacado #titulo h2, .destacado .titulo h2{width: 85%; margin-top: 15px;}
.tit{	font-size: 28px; line-height: 33px; margin: 0 100px 0 0;}
#texto, .texto{	width: 60%; float: right;}
#textoiz{	width: 60%; float: left;}
#textoder{	width: 36%; float: right;}
#faldon{	padding: 0 0 20px 0; position: relative;}
.ejemplo{	width: 290px; float: left; margin: 20px 20px;}
.ejemplo a{	height: 193px;}
.tipo{	width: 26%; float: left; border-right: 1px solid #94b700; padding: 0 5% 0 0;}
.tipoc{	width: 27%; float: left; border-right: 1px solid #94b700; padding: 0 5% 0 0; margin: 0 5%;}
.tipod{	width: 26%; float: right;}
.num{	padding: 8px 0; margin: 0 20px 0 0;}
.trio h3{	font-size: 20px; margin: 20px 0 0 0; line-height: 17px;}
.trio h4{	margin: 10px 0 5px 0; line-height: 16px;}
#gris{	padding: 40px;}
#proyectos h5{	font-size: 23px;}
#proyectos{	width: 70%; float: left;}
#ver{	width: 29%; float: right; margin: 20px 0 0 0;}
#ver a{	margin: 10px 0 0 0; padding: 8px 0;}
#redesiz{	width: 50%; float: right; margin: 40px 0 40px 0;}
#redesiz h2{	background: url(../imagenes/redes-sociales.jpg) right 0 no-repeat;
	background-size: 42% auto; color: #ce2469; font-weight: 400; 
	font-size: 30px; padding: 16% 0 15px 0;}
#redesder{	width: 260px; float: left; height: 260px; padding: 20px;}
#redesder, .menor{ font-size: 0.9em;}
#viso, #redes{	margin: 0 0 40px 0;}
#visoiz{	width: 50%; float: left;}
#visoder{	width: 260px; float: right; height: 260px; font-size: 1em;}
#visoder2{	width: 260px; float: right; font-size: 1.1em;}
.mus{	font-size: 20px; margin: 25px 0 10px 0;}
.inter{	background: url(../imagenes/interrogantes.jpg) top right no-repeat;
	color: #7a6e96; font-weight: 400; font-size: 26px; padding: 0 190px 15px 0;}
.mov h3{	font-size: 26px; padding: 0 190px 15px 0;}
.rwds, .trio{	margin: 0 0 50px 0;}
.rwd{	width: 43%; float: left; margin: 40px 7% 20px 0;}
.rwd img{	width: 100%; height: auto;}
.video{	width: 68%; margin: 0 0 60px 36%; padding: 0 0 60px 0;}
#vtexto{	margin: 100px 0 60px 36%;}
.video h2{	font-weight: 300; font-size: 17px; margin: 0 0 10px 0;}
#pieizdo{	width: 22%; float: left; margin: 30px 0;}
#piecen{	width: 22%; float: left; margin: 30px 0;}
#pieder{	width: 100px; float: right; text-align: right; }
#datos{	font-size: 40px; padding: 50px 0 20px 0; margin: 0; line-height: 65px;}
#tags a{	padding: 6px 0;}
#infoiz{	width: 85%; float: left;}
#infoder{	width: 9%; float: right;}
#infoder img{	width: 30px; height: 116px;}
.som{	margin: 30px 0 0 0;}}
@media only screen 
and (min-width : 1000px){
.container {	width: 1000px; margin: 0 auto;}
.intro {	margin: 0 50px;}
#cabecera{	padding: 20px 0 0 0; margin: 0 0 40px 0;}
#logo{	width: 200px; float: left; }
#menu{	width: 550px; float: right; margin: 13px 0 0 0;}
#presen{	width: 250px; float: left; margin: 80px 0 0 0; font-size: 1.0em; line-height: 2em;}
#imagen{	width: 550px; float: right;}
.cam{	padding: 30px 0 30px 0;}
#sup h1, #presen #frase{	font-size: 40px; font-weight: 400; line-height: 42px; margin: 0 0 20px 0;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia, .servicios #grafico{
	height: 150px;}
	.servicios #grafico{padding-bottom: 40px;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento, .servicios #fotografia{float: left; width: 24%;}
.servicios #diseno, .servicios #responsive, .servicios #posicionamiento{
	border-left: 1px solid #fff; border-right: 1px solid #999;}
.servicios #fotografia{
	border-left: 1px solid #fff; border-right: 1px solid #fff;}
#titulo, .titulo{	width: 38%; float: left; background: url(../imagenes/flecha-dcha.png) no-repeat right top;}
.tit{	font-size: 28px; line-height: 33px; margin: 0 100px 0 0;}
#texto, .texto{	width: 60%; float: right;}
#textoiz{	width: 300px; float: left;}
#textoder{	width: 200px; float: right;}
#faldon{	padding: 0 0 30px 0; position: relative;}
.ejemplo{	width: 290px; float: left; margin: 20px 5px;}
.ejemplo a{	height: 193px;}
.num{	padding: 5px 0 5px 0;}
.tipo{	width: 265px; float: left;  border-right: 1px solid #94b700; padding: 0 30px 0 0;}
.tipoc{	width: 250px; float: left;  border-right: 1px solid #94b700; padding: 0 30px 0 0; margin: 0 35px;}
.tipod{	width: 250px; float: right;}
#gris{	padding: 40px;}
#proyectos h5{	font-size: 23px;}
#proyectos{	width: 500px; float: left;}
#ver{	width: 300px; float: right; margin: 20px 0 0 0;}
#ver a{	margin: 10px 0 0 0; padding: 8px 0;}
#redesiz{	width: 460px; float: right; margin: 40px 0 50px 0;}
#redesder .ges{margin-top: 20px;}
#redesiz h2{	background: url(../imagenes/redes-sociales.jpg) 270px 0 no-repeat;
	color: #ce2469; font-weight: 400; font-size: 35px; padding: 63px 0 15px 0;}
#redesder{	width: 300px; float: left; height: 300px; padding: 40px; border-radius: 220px;}
#viso, #redes{	margin: 0 0 50px 0;}
#visoiz{	width: 500px; float: left;}
#visoder{	width: 300px; float: right; height: 300px; line-height: 28px; padding: 40px; border-radius: 220px;}
#visoder2{	width: 300px; float: right; font-size: 1.1em;}
#visoder a { width: 130px; padding: 8px 0; margin-top: 20px;}
.mus{	font-size: 25px; margin: 25px 0 10px 0;}
.inter{	background: url(../imagenes/interrogantes.jpg) 320px 0 no-repeat;
	color: #7a6e96; font-weight: 400; font-size: 26px; padding: 50px 190px 15px 0;}
.mov h3{	font-size: 26px; padding: 50px 190px 15px 0;}
.rwds, .trio{	margin: 0 0 50px 0;}
.rwd{	width: 350px; float: left; margin: 40px 100px 20px 0;}
.video{	margin: 0 0 60px 375px; padding: 0 0 60px 0;}
.video h2{	font-weight: 300; font-size: 17px; margin: 0 0 10px 0;}
#pieizdo{	width: 22%; float: left; margin: 30px 0;}
#piecen{	width: 22%; float: left; margin: 30px 0;}
#pieder{	width: 140px; float: right; text-align: right; font-size: 14px; line-height: 18px; }
#pieder img{width: 140px; height: auto;}
#pieder a img{width: 25px !important; }
#datos{	font-size: 45px; padding: 50px 0 20px 0; margin: 0 0 0 360px; line-height: 65px;}
.tmov{	margin: 0 0 60px 0;}
#vtexto{	margin: 100px 0 60px 375px;}
#infoiz{	width: 500px; float: left;}
#infoder{	width: 32px; float: right;}
.som{	margin: 30px 0 0 0;}
#visoiz h2{	margin-top: 40px;}
#presen .donostia{	font-size: 34px;}
#cont a{	margin: 20px 0 0 0; padding: 15px 0;}
.aviso {margin-top: 50px;}
	.ej-ultima{margin: 30px auto !important; float: none; display: block; padding-bottom: 30px !important; clear: both;}}
@media only screen 
and (min-width : 1300px){
.container {	width: 1250px; margin: 0 auto; font-size: 1.1em; line-height: 2.1em;}
#presen{	width: 360px;}
.banda{	margin: 80px 0;}
#menu{	margin-right: 30px;}
#destacado, .destacado {    padding: 100px 0;}
#visoder{	margin-top: 50px;}
.tit {    font-size: 32px; line-height: 38px;}
#texto, .texto{	width: 53%;}
.tipo{	width: 300px; padding: 0 70px 0 0;}
.tipoc{	width: 300px; padding: 0 55px 0 0; margin: 0 65px;}
.tipod{	width: 290px; }
.trio h3{	font-size: 25px; margin-top: 10px;}
#tags {    padding: 120px 0 5px 0;}
.ejemplo{	margin: 30px 25px; width: 300px; height: 210px;}
.ejemplo img{	width: 100%; height: auto;}
.ejemplo a {	height: 220px;}
.grupo .ejemplo{	width: 330px; 	}
.rwds{	width: 900px; margin: 0 auto;}
.rwd{	margin: 50px;}
#piecen h3 {    width: 180px;}
#video{	width: 890px; margin: 0 auto;}
#video-boton a{	font-size: 0.8em;}}