/*
Theme Name: Zelai
Author: Agencia SOPA.
Author URI: http://www.agenciasopa.es
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none !important; color: inherit; }
a img { border: none; }
html { -webkit-text-size-adjust: none; }
body { font-family: BrandonReg; background: #ffffff; }
body strong { font-weight: normal; font-family: BrandonBold; font-size: inherit; }
body, html { display: block; width: 100%; height: 100%; }
:focus { outline: none; }
input { -webkit-appearance: none; }
.spacer { clear: both; }

img { display: block; padding: 0px; margin: 0px; }


@font-face {
    font-family: 'BrandonBold';
    src: url('docs/fonts/brandon_bld-webfont.eot');
    src: url('docs/fonts/brandon_bld-webfont.eot#iefix') format('embedded-opentype'),
         url('docs/fonts/brandon_bld-webfont.woff') format('woff'),
         url('docs/fonts/brandon_bld-webfont.ttf') format('truetype'),
         url('docs/fonts/brandon_bld-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonLight';
    src: url('docs/fonts/brandon_light-webfont.eot');
    src: url('docs/fonts/brandon_light-webfont.eot#iefix') format('embedded-opentype'),
         url('docs/fonts/brandon_light-webfont.woff') format('woff'),
         url('docs/fonts/brandon_light-webfont.ttf') format('truetype'),
         url('docs/fonts/brandon_light-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonMedium';
    src: url('docs/fonts/brandon_med-webfont.eot');
    src: url('docs/fonts/brandon_med-webfont.eot#iefix') format('embedded-opentype'),
         url('docs/fonts/brandon_med-webfont.woff') format('woff'),
         url('docs/fonts/brandon_med-webfont.ttf') format('truetype'),
         url('docs/fonts/brandon_med-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonReg';
    src: url('docs/fonts/brandon_reg-webfont.eot');
    src: url('docs/fonts/brandon_reg-webfont.eot#iefix') format('embedded-opentype'),
         url('docs/fonts/brandon_reg-webfont.woff') format('woff'),
         url('docs/fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('docs/fonts/brandon_reg-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BrandonBlack';
    src: url('docs/fonts/brandon_blk-webfont.eot');
    src: url('docs/fonts/brandon_blk-webfont.eot#iefix') format('embedded-opentype'),
         url('docs/fonts/brandon_blk-webfont.woff') format('woff'),
         url('docs/fonts/brandon_blk-webfont.ttf') format('truetype'),
         url('docs/fonts/brandon_blk-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "SSSocialRegular";
  src: url('docs/fonts/ss-social-regular.eot');
  src: url('docs/fonts/ss-social-regular.eot#iefix') format('embedded-opentype'),
       url('docs/fonts/ss-social-regular.woff') format('woff'),
       url('docs/fonts/ss-social-regular.ttf')  format('truetype'),
       url('docs/fonts/ss-social-regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}





@media screen and (min-width: 901px) {

	#contenedora, .ancho-general { width: 1000px; }
	#menu .contenedora-menu .contenedor-menu ul { width: 1000px; }
	.ancho-bloque-rotacion { width: 1200px; margin-left: -600px; }
	
	.bloque-superior { height: 830px; }
	.bloque-gris .padding, .bloque-gris .padding-right { width: 70%; }
	.bloque-superior .izquierdo .contenido .titular {  width: 558px; top: 460px; left: 40px; }
	.bloque-superior .derecho .contenido .titular { width: 458px; top: 300px; right: 40px; }
	
	
	.cycle-slideshow, .cycle-slideshow img { width: 1000px; }
	
	.hueco { display: block; width: 100%; height: 180px; }
	
	
	.bloque-imagen-partida { position: relative; height: 580px; margin-top: -20px !important; display: block; }
	
	.partida-izq { width: 610px; height: 580px; display: block; left: -130px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	.partida-der { width: 610px; height: 580px; display: block; right: -150px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	
	.partida-izq .interior { display: block; width: 592px; height: 580px; position: absolute; top: 0px; left: 150px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }
	.partida-der .interior { display: block; width: 592px; height: 580px; position: absolute; top: 0px; left: -130px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }

}

@media screen and (max-width: 900px) and (min-width: 730px)  {

	#contenedora, .ancho-general { width: 700px; }
	#menu .contenedora-menu .contenedor-menu ul { width: 700px; }
	.ancho-bloque-rotacion { width: 900px; margin-left: -450px; }
	
	.bloque-superior { height: 680px; margin-top: 90px; }
	.bloque-superior img, .izquierdo .contenido img { width: 770px; }
	.bloque-gris .padding, .bloque-gris .padding-right { width: 80%; }
	.bloque-superior .izquierdo .contenido .titular {  width: 558px; top: 360px; left: 40px; }
	.bloque-superior .derecho .contenido .titular { width: 358px; top: 170px; left: 300px; }
	
	
	.cycle-slideshow, .cycle-slideshow img { width: 700px; }
	.hueco { display: block; width: 100%; height: 180px; }
	
	.bloque-imagen-partida { position: relative; height: 430px; margin-top: -20px !important; display: block; }
	
	.partida-izq { width: 490px; height: 460px; display: block; left: -150px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	.partida-der { width: 490px; height: 460px; display: block; right: -180px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	
	.partida-izq .interior { display: block; width: 452px; height: 360px; position: absolute; top: 0px; left: 200px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }
	.partida-der .interior { display: block; width: 452px; height: 360px; position: absolute; top: 0px; left: -60px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }
	
	.partida-izq .interior img, .partida-der .interior img { width: 400px; }
	
	.partida-mapa { margin-left: -25px; }
	.iframe-mapa { top: -70px; }
}

@media screen and (max-width: 729px) {

	#contenedora, .ancho-general { width: 480px; }
	#menu .contenedora-menu .contenedor-menu ul { width: 480px; }
	.ancho-bloque-rotacion { width: 680px; margin-left: -340px; }
	
	#menu { height: 80px !important; }
	#menu .contenedora-menu { margin-top: -85px !important; height: 80px !important; }
	#menu .contenedora-menu .contenedor-menu { top: 70px !important; }
	#menu .contenedora-menu .contenedor-menu .logo { margin-top: 0px !important; }
	
	.bloque-superior { height: 515px; margin-top: -14px; }
	.bloque-superior img, .izquierdo .contenido img { width: 550px; }
	.bloque-superior .izquierdo .contenido .titular { width: 360px; top: 250px; left: 40px; }
	.bloque-superior .derecho .contenido .titular { width: 330px; top: 90px; left: 110px; }
	
	
	.bloque-gris .padding, .bloque-gris .padding-right {  }
	
	
	.cycle-slideshow, .cycle-slideshow img { width: 480px; }
	.hueco { display: block; width: 100%; height: 70px; }
	
	
	
	.bloque-imagen-partida { position: relative; height: 380px; margin-top: -20px !important; display: block; }
	
	.partida-izq { width: 390px; height: 400px; display: block; left: -150px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	.partida-der { width: 390px; height: 400px; display: block; right: -180px; position: absolute; top: 0px; overflow: hidden;
	-webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg); }
	
	.partida-izq .interior { display: block; width: 352px; height: 360px; position: absolute; top: 0px; left: 160px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }
	.partida-der .interior { display: block; width: 352px; height: 360px; position: absolute; top: 0px; left: -60px;
	-webkit-transform:skew(-30deg); -moz-transform:skew(-30deg); -o-transform:skew(-30deg); tranform:skew(-30deg); }
	
	.partida-izq .interior img, .partida-der .interior img { width: 350px; }
	
	.partida-mapa { display: none; }
	.iframe-mapa { top: -100px; }
}


h3 { display: block; font: 24px BrandonBold; text-align: center; text-transform: uppercase; color: #333333; }
h4 { display: block; font: 16px BrandonBlack; text-align: center; text-transform: uppercase; color: #333333; }



#contenedora { display: block; position: relative; margin: 0px auto 0px auto; padding: 80px 0px 0px 0px; overflow: hidden; }



/** menú **/

#menu { position: fixed; width: 100%; height: 140px; display: block; z-index: 20000; }
#menu .contenedora-menu { display: block; margin: 0px auto; height: 140px; position: relative; background: #FFF; }
#menu .contenedora-menu .bloque-rotacion { position: absolute; z-index: -1; bottom: -100px; left: 50%; height: 200px; background: #FFF; display: block; -moz-transform: rotate(-6.5deg); -o-transform: rotate(-6.5deg); -webkit-transform: rotate(-6.5deg); -ms-transform: rotate(-6.5deg); transform: rotate(-6.5deg); outline: 1px solid transparent; }
#menu .contenedora-menu .contenedor-menu { display: block; position: absolute; top: 50%; left: 0px; text-align: center; height: 85px; margin: 30px 0px 0px 0px; font: 12px BrandonReg; letter-spacing: 1px; text-transform: uppercase; }
#menu .contenedora-menu .contenedor-menu ul { display: block; text-align: center; }
#menu .contenedora-menu .contenedor-menu ul li { display: inline-block; }
#menu .contenedora-menu .contenedor-menu ul li a { border-top: 1px solid #FFF; }
#menu .contenedora-menu .contenedor-menu ul li a:hover { border-top: 1px solid #333333; }
#menu .contenedora-menu .contenedor-menu ul li span.separador { padding: 0px 10px 0px 10px; }
#menu .contenedora-menu .contenedor-menu ul li:last-child span.separador { display: none; }
#menu .contenedora-menu .contenedor-menu .logo { width: 63px; height: 50px; display: block; position: relative; margin: 10px auto 0px auto; }
#menu .contenedora-menu .contenedor-menu .logo img.zelai { position: absolute; top: 16px; left: 13px; display: block; }
#menu .contenedora-menu .contenedor-menu .logo img.cucharas { position: absolute; top: 0px; left: 16px; display: none; }
#menu .contenedora-menu .contenedor-menu ul li.lang-es, #menu .contenedora-menu .contenedor-menu ul li.lang-en, #menu .contenedora-menu .contenedor-menu ul li.lang-fr { padding-right: 10px; }
#menu .contenedora-menu .contenedor-menu ul li.active { display: none; }
#menu .contenedora-menu .contenedor-menu ul li:last-child { padding-right: 0px; }
#menu .contenedora-menu .contenedor-menu ul li.active a { border-top: 1px solid #333333; }




/** incio **/

.bloque-superior { width: 1000px; position: relative; overflow: hidden; }
.bloque-superior .izquierdo { width: 1150px; height: 775px; background: #FFF; -webkit-transform:skew(60deg); -moz-transform:skew(60deg); -o-transform:skew(60deg); tranform:skew(60deg); position: absolute; left: -700px; top: 0px; overflow: hidden; outline: 1px solid transparent; }
.bloque-superior .izquierdo .contenido { position: absolute; right: -442px; bottom: 0px; width: 1000px; height: 650px; display: block; }
.bloque-superior .izquierdo .contenido .titular { position: absolute; display: block; text-align: left; font: 12px/14px BrandonBold; color: #FFF; text-transform: uppercase; }
.bloque-superior .derecho { width: 1200px; height: 775px; background: #FFF; -webkit-transform:skew(60deg); -moz-transform:skew(60deg); -o-transform:skew(60deg); tranform:skew(60deg); position: absolute; left: 550px; top: 0px; overflow: hidden; outline: 1px solid transparent; }
.bloque-superior .derecho .contenido { position: absolute; left: -442px; top: 0px; width: 1000px; height: 650px; display: block; }
.bloque-superior .derecho .contenido .titular { position: absolute; display: block; text-align: right; font: 12px/14px BrandonBold; color: #FFF; text-transform: uppercase; }
.bloque-superior .izquierdo .contenido, .bloque-superior .derecho .contenido { -webkit-transform:skew(-60deg); -moz-transform:skew(-60deg); -o-transform:skew(-60deg); tranform:skew(-60deg);  }





.bloque-aislado { display: block; padding: 0px 0px 0px 0px; position: relative; z-index: 146; }
span.texto-cat { display: block; text-align: center; font: 14px BrandonReg; color: #333; margin: 8px 0px 0px 0px; }
span.texto-cat p { display: block; margin: 0px 0px 7px 0px; }



.bloque-gris { width: 100%; display: block; position: relative; background: #333333; color: #FFF; margin: 200px 0px 0px 0px; }
.bloque-gris .padding { display: block; padding: 25px 35px 25px 35px; min-height: 90px; font: 14px BrandonReg; }
.bloque-gris .padding-right { display: block; padding: 25px 35px 25px 35px; min-height: 90px; font: 14px BrandonReg; float: right; text-align: right; }
.bloque-gris .padding span.miga, .bloque-gris .padding-right span.miga { display: block; font: 12px BrandonReg; text-transform: uppercase; }
.bloque-gris .padding span.titulo, .bloque-gris .padding-right span.titulo { display: block; font: 18px BrandonBold; text-transform: uppercase; letter-spacing: 1px; margin: 0px 0px 14px 0px; }

.bloque-gris .bloque-rotacion-gris { position: absolute; background: #333; z-index: 115; bottom: -35px; left: 50%; height: 70px;  display: block;  outline: 1px solid transparent; }
.bloque-gris .bloque-rotacion-gris-top { position: absolute; background: #333; z-index: 115; top: -85px; left: 50%; height: 170px;  display: block;  outline: 1px solid transparent; }

.bloque-contenedora { position: relative; display: block; margin: 250px 0px 40px 0px; }
.bloque-contenedora .bloque-rotacion-blanca { position: absolute; background: #FFF; z-index: 115; bottom: -70px; left: 50%; height: 140px;  display: block;  outline: 1px solid transparent; }
.bloque-contenedora .bloque-rotacion-blanca-top { position: absolute; background: #FFF; z-index: 115; top: -70px; left: 50%; height: 140px;  display: block;  outline: 1px solid transparent; }

.movimiento-rotacion-4 { -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); }

.bloque-imagen-partida { position: relative; margin-top: -20px !important; display: block; }
.bloque-imagen-partida .imask0, .bloque-imagen-partida .imask1 { position: absolute !important; }





.formulario { width: 450px; display: block; margin: 0px auto; }
.formulario input[type=text], .formulario input[type=email] { border: 1px solid #333333; font: 14px BrandonReg; text-align: center; width: 350px; margin-top: 5px; }
.formulario textarea { border: 1px solid #333333; font: 14px BrandonReg; text-align: center; height: 100px; width: 350px; margin-top: 5px; }
.formulario .wpcf7-submit { display: block; width: 350px; background: #333; color: #fff; font: 14px BrandonReg; border: none; margin: 0px auto; }






.final { display: block; text-align: center; margin: 50px auto 100px auto; font: 14px BrandonReg; color: #333; }




/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"]{-ms-zoom: 1;}

.ss-icon, .ss-icon.ss-social-regular,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"].ss-social-regular:before, [class*=" ss-"].ss-social-regular:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"].ss-social-regular.right:after, [class*=" ss-"].ss-social-regular.right:after {
  font-family: "SSSocialRegular";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

[class^="ss-"].right:before,
[class*=" ss-"].right:before{display:none;content:'';}

.ss-facebook:before,.ss-facebook.right:after{content:''}.ss-twitter:before,.ss-twitter.right:after{content:''}.ss-linkedin:before,.ss-linkedin.right:after{content:''}.ss-googleplus:before,.ss-googleplus.right:after{content:''}.ss-appdotnet:before,.ss-appdotnet.right:after{content:''}.ss-zerply:before,.ss-zerply.right:after{content:''}.ss-reddit:before,.ss-reddit.right:after{content:''}.ss-steam:before,.ss-steam.right:after{content:''}.ss-tumblr:before,.ss-tumblr.right:after{content:''}.ss-wordpress:before,.ss-wordpress.right:after{content:''}.ss-blogger:before,.ss-blogger.right:after{content:''}.ss-posterous:before,.ss-posterous.right:after{content:''}.ss-quora:before,.ss-quora.right:after{content:''}.ss-youtube:before,.ss-youtube.right:after{content:''}.ss-vimeo:before,.ss-vimeo.right:after{content:''}.ss-vine:before,.ss-vine.right:after{content:''}.ss-letterboxd:before,.ss-letterboxd.right:after{content:''}.ss-flickr:before,.ss-flickr.right:after{content:''}.ss-instagram:before,.ss-instagram.right:after{content:''}.ss-500px:before,.ss-500px.right:after{content:''}.ss-etsy:before,.ss-etsy.right:after{content:''}.ss-pinterest:before,.ss-pinterest.right:after{content:''}.ss-svpply:before,.ss-svpply.right:after{content:''}.ss-readmill:before,.ss-readmill.right:after{content:''}.ss-dropbox:before,.ss-dropbox.right:after{content:''}.ss-pinboard:before,.ss-pinboard.right:after{content:''}.ss-delicious:before,.ss-delicious.right:after{content:''}.ss-dribbble:before,.ss-dribbble.right:after{content:''}.ss-behance:before,.ss-behance.right:after{content:''}.ss-github:before,.ss-github.right:after{content:''}.ss-octocat:before,.ss-octocat.right:after{content:''}.ss-stackoverflow:before,.ss-stackoverflow.right:after{content:''}.ss-paypal:before,.ss-paypal.right:after{content:''}.ss-kickstarter:before,.ss-kickstarter.right:after{content:''}.ss-foursquare:before,.ss-foursquare.right:after{content:''}.ss-yelp:before,.ss-yelp.right:after{content:''}.ss-skype:before,.ss-skype.right:after{content:''}.ss-rdio:before,.ss-rdio.right:after{content:''}.ss-spotify:before,.ss-spotify.right:after{content:''}.ss-lastfm:before,.ss-lastfm.right:after{content:''}.ss-soundcloud:before,.ss-soundcloud.right:after{content:''}.ss-link:before,.ss-link.right:after{content:'🔗'}.ss-phone:before,.ss-phone.right:after{content:'📞'}.ss-mail:before,.ss-mail.right:after{content:'✉'}.ss-like:before,.ss-like.right:after{content:'👍'}.ss-rss:before,.ss-rss.right:after{content:''}.ss-share:before,.ss-share.right:after{content:''}.ss-apple:before,.ss-apple.right:after{content:''}.ss-microsoft:before,.ss-microsoft.right:after{content:''}.ss-windows:before,.ss-windows.right:after{content:''}.ss-android:before,.ss-android.right:after{content:''}.ss-blackberry:before,.ss-blackberry.right:after{content:''}

/* Legacy */
.ss-fivehundredpx:before,.ss-fivehundredpx.right:after{content:''}