@import url('fresco.css');
@import url(https://fonts.googleapis.com/css?family=Felipa);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display);

.sprite{ background-image: url("../imagenes/tatuajes.png"); background-size: 486px 121px; background-repeat: no-repeat}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) {
    .sprite{ background-image: url("../imagenes/tatuajes@2x.png");}
}
body{background-color:#3b3b3b; margin:0px; padding:0px; font-size:18px; line-height:1.2; color:#fff; }
body, input[type="text"],textarea, button{font-family: 'Playfair Display', serif; font-weight:400} 
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
ol,ul,li{list-style:none; margin:0px; padding:0px}
h1,h2,h3,h4{font-weight:normal; margin:0px; padding:0px; font-weight:300; }
img{margin:0;padding:0; border:none; display:block}
a, a:hover { text-decoration:none}
p { margin:0px; padding:0px}
input[type="text"],textarea, button {outline:none;  -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:0px; font-size:18px}
input[type="text"],textarea {background-color:#ddd; border:solid 2px #000; width:100%; padding:10px}
input[type="text"], button { height:50px;}
input[type="text"]:focus, textarea:focus {border-color:#ff0000; background-color:#fff}

textarea { height:200px; resize:none;}
button { position:relative; margin:0 auto; background-color:#ff0000; color:#fff; border:solid 2px #ff0000; display:block; margin-top:20px; cursor:pointer}
.header { position:relative; background-color:#000; height:360px;}
.header .cabecera { position:relative; overflow:hidden; height:360px; background-color:#000 }
.header .cabecera > img { width:100%; opacity:0.75}
.header > i{ position:absolute; bottom:0px; left:0px; right:0px; height:243px; z-index:1; background-image:url('../imagenes/d.png');}

.header .cc { position:absolute; top:0px; left:0px; right:0px; botttom:0px; z-index:2; text-align:center} 
.header .cc .logo > img{ position:relative; margin:60px auto 0 auto; display:inline-block; width:440px; }

.redes { position:absolute; top:10px; right:10px; z-index:2}
.redes li {float:left; margin-left:15px}
.redes li a { display:block; }
.redes li a span { display:none}
.redes li i{ width:30px; height:30px; display:block; border-radius:50px; cursor:pointer; box-shadow:0 0 5px #000; cursor:pointer}
.redes li.twitter a i{ background-position:-118px -5px}
.redes li.facebook a i{ background-position:-149px -5px}
.redes li.blogger a i{ background-position:-211px -5px}
.redes li.instagram a i{ background-position:-180px -5px}
.redes li.favoritos span i{ background-position:-242px -5px}

.btm { position:absolute; top:10px; left:10px; width:38px; height:30px; background-position:-119px -42px; display:none; cursor:pointer; z-index:2}
.btr { position:absolute; top:10px; right:10px; width:27px; height:30px; background-position:-281px -5px; display:none; cursor:pointer; z-index:2}
.btr.movil + .redes, .btm.movil + .m{ display:block}
.m { position:absolute; bottom:0px; left:0px; right:0px; text-align:center; z-index:2; font-size:0}
.m > li { position:relative; display:inline-block; border-bottom:solid 4px transparent}
.redes li.cerrar, .m > li.cerrar { display:none; overflow:hidden; background-color:transparent; padding:0px}
.redes li.cerrar .x, .m > li.cerrar .x { float:right; width:46px; height:46px; margin:2px; background-position:-157px -35px;  display:block; cursor:pointer}
.m > li a, .m > li span { display:block; font-family: 'Felipa', cursive; padding:0px 15px; color:#fff; }
.m > li span { cursor:pointer}
.m > li > a, .m > li > span {margin:0px 10px 20px 10px; font-size:30px;}
.m > li > a:hover, .m > li > span:hover { color:#ff0000}
.m > li.sel { border-color:#ff0000; }
.m > li.sel > a, .m > li.sel > span{ color:#fff; cursor:default}

.m > li .sm { position:absolute; top:60px; left:9px; background-color:rgba(0,0,0,0.85); width:auto; min-width:300px; z-index:10; box-shadow:0px 0px 10px #000; display:none}
.m > li .sm > li { text-align:left; border-bottom:solid 1px #000; height:50px}
.m > li .sm > li:hover{ background-color:#ff0000}
.m > li .sm > li > a { display:block; font-size:26px; line-height:50px}
.m > li.ta.movil .sm, .m > li.pi.movil .sm {display:block}
.m > li.ta.movil > a, .m > li.ta.movil > span, .m > li.pi.movil > a, .m > li.pi.movil > span {color:#ff0000}
.m.movil, .redes.movil { display:block}

.principal > span{ background-position:-1px -1px; width:86px;}
.donde_estamos > span{ background-position:-93px -1px; width:160px;}
.tatuajes > span{ background-position:-259px -1px; width:84px;}
.piercings > span{ background-position:-350px -1px; width:84px;}
.reportajes > span{ background-position:-440px -1px; width:100px;}
.contactar > span{ background-position:-547px -1px; width:97px;}
.aviso_legal > span{ background-position:-650px -1px; width:108px;}
.principal:hover > span{ background-position:-1px -34px;}
.donde_estamos:hover > span{ background-position:-93px -34px;}
.tatuajes:hover > span{ background-position:-259px -34px;}
.piercings:hover > span{ background-position:-350px -34px;}
.reportajes:hover > span{ background-position:-440px -34px;}
.contactar:hover > span{ background-position:-547px -34px;}
.aviso_legal:hover > span{ background-position:-650px -34px;}


.contenido { position:relative; margin:5px 5px 5px 0px; overflow:hidden;}
.contenido > div { float:left; width:8.33%; margin-bottom:5px}
.contenido > div > a { display:block; margin-left:5px; position:relative; border:solid 2px #000; }
.contenido > div > a:hover { border-color:#ff0000}
.contenido > div > a > img { width:100%}

.contenidor { overflow:hidden; padding-right:10px}
.ds  {float:left; width:100%; height:100%}
.v {float:left; width:25%;height:100%;}
.v p {margin:5px 0px 10px 10px; font-size:20px;  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.v_iframe, .v > a {position:relative; margin:10px 0px 0px 10px}
.v_iframe .ratio {display:block;width:100%;height:auto;}
.v_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
.v > a { display:block}
.v > a > img{ width:100%}
.modal { position: fixed; top:0px; left:0px; bottom:0px; right: 0px; width: 100%; height: 100%; z-index: 9999; box-shadow:none; background-color: rgba(0,0,0,0.7); display:none}
.modal.on { display:block}
.modal .mo { margin:60px 20px 20px 20px}
.modal .mo > div { position:relative; max-width:720px; margin:0 auto; overflow-y: auto; box-sizing: border-box; background-color:#000; box-shadow:0px 0px 10px #000;}
.modal .mo > div .con { margin:20px; position:relative} 
.modal .mo > div .con > div { margin-bottom:15px}
.modal .cemo { position:absolute; top:2px; right:2px; width:46px; height:46px; background-position:-157px -35px; display:block }
#mubicacion .con { height:500px}
.modal h3 { line-height:50px; font-family: 'Felipa', cursive; padding:0px 20px; color:#fff; font-size:28px; color:#ff0000} 
.info { position:relative; margin-bottom:30px}
.info li { margin-bottom:10px} 
.dir, .tel, .ema { position:absolute; top:0px; width:22px; height:22px; }
.dir { background-position:-51px -81px}
.tel { background-position:-28px -81px}
.ema { background-position:-5px -81px}

.info > li { position:relative; }
.info > li > span { display:block; margin-left:32px; }
.av {line-height:1.3;}

ul.pag { position:relative; width:100%; max-width:1280px; margin: 20px auto; overflow:hidden; text-align:center}
ul.pag li { display:inline-block; vertical-align:top; height:40px;} 
ul.pag li a{ font-size:18px; background-color:#000; color:#fff; display:block; padding:8px 15px;}
ul.pag li a:hover { background-color:#ff0000}
ul.pag li .pact a, ul.pag li .pact a:hover { background-color:#ff0000;}
ul.pag li .pact a:hover { text-decoration:none}

#cargando { display:none; position:fixed; bottom:0px; z-index:9}

iframe { overflow:hidden; width:100%; height:100%}
.error_input input[type="text"]{ border-color:#ff0000; }
.errora { color:#ff0000; margin:0px 10px}

button.ok { background-color:#009e1d; border-color:#009e1d}
@media only screen and (max-width : 1920px){
    .contenido > div { width:10%; }
}

@media only screen and (max-width : 1600px){
    .contenido > div { width:12.5%; }
	.header, .header .cabecera { height:300px}
	.header .cc .logo > img { width:380px; margin-top:40px}
		.v { width:33.33%}
}

@media only screen and (max-width : 1280px){
    .contenido > div { width:16.66%; }
	.m > li > a, .m > li > span { font-size:28px;  margin:0px 5px 20px 5px}

	.v { width:50%}
}

@media only screen and (max-width : 1024px){
    .contenido > div { width:20%; }
	.m > li > a, .m > li > span { margin:0px 0px 20px 0px}
	
}

@media only screen and (max-width : 940px){
	.header, .header .cabecera  { height:160px}
	.header .cc .logo > img { margin-top:20px; width:300px;}
	.contenido > div { width:25%;}
	.btm, .btr { display:block}
	.m, .redes { display:none}

	.redes, .m { top:50px; background-color:#000; box-shadow: 0px 0px 10px #000; }
	.redes {position:absolute; }
	.m { bottom:inherit; right:inherit; left:10px}
	.redes { right:10px;}
	
	.redes li, .m > li { position:relative; margin:0px; float:none; padding:0px 10px; display:block}
	.m > li { border:none;}
	.m > li > a, .m > li > span { margin-bottom:0px; padding:0px; font-size:22px; }
	
	.m > li .sm { top:0px; left: 100%; border-left:solid 1px #333 }
	.m > li .sm > li > a { font-size:22px}
	.redes li.favoritos, .m > li.sel { display:none}
	.redes li a { overflow:hidden}
	.redes li a i { position:absolute; top:10px; background-color:transparent; box-shadow:none}
	.redes li a span, .m > li > a, .m > li > span { display:block; line-height:50px; color:#fff; white-space:nowrap; text-overflow: ellipsis; overflow:hidden }
	.redes li a span { margin-left:40px; font-size:18px}
	.redes li:hover a span, .m > li:hover > a { color:#ff0000}
	.redes li.twitter a i{ background-position:-203px -42px}
	.redes li.facebook a i{ background-position:-234px -42px}
	.redes li.blogger a i{ background-position:-296px -42px}
	.redes li.instagram a i{ background-position:-265px -42px}
	.modal .mo { margin:50px 10px 10px 10px}
}

@media only screen and (max-width : 720px){
	
	.btm, .btr { top:17px}
	.header > i { opacity:0.8}
	.header, .header .cabecera  { height:64px}
	.header .cc .logo > img { width:147px; margin-top:2px}
	.redes li.cerrar, .m > li.cerrar { display:block}
	.redes, .m {display:none; position: fixed; top:0px; left:0px; bottom:0px; right: 0px; width: 100%; height: 100%; z-index: 9999; box-shadow:none; background-color: rgba(0,0,0,0.8); overflow-y: auto; box-sizing: border-box; margin:0px}
	.redes li, .m > li { margin-bottom:1px; background-color:#000}
	.redes li a span { font-size:22px}
	.m > li > a, .m > li > span { font-size:28px;}
	.m > li .sm { position:relative; top: inherit; left: inherit; border-left:none; padding-bottom:20px; }
	.m > li .sm > li { text-align:center}
	.m > li .sm > li > a { color:#999}
	.m > li .sm > li:hover > a {color:#fff}
	/*.m { display:none; position: fixed; top:0px; left:0px; bottom:0px; right: 0px; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0,0,0,0.8); overflow-y: auto; box-sizing: border-box; margin:0px}
	
	*/
	
	
    .contenido > div { width:33.33%; }

}
@media only screen and (max-width : 720px){
.v { width:100%}
}

@media only screen and (max-width : 512px){ 
	.contenido > div { width:50%; }
}