@font-face {
    font-family: 'painting_in_the_sunlightRg';
    src: url('../font/painting_in_the_sunlightwebfont.eot');
    src: url('../font/painting_in_the_sunlightwebfont.eot?#iefix') format('embedded-opentype'),
         url('../font/painting_in_the_sunlightwebfont.woff') format('woff'),
         url('../font/painting_in_the_sunlightwebfont.ttf') format('truetype'),
         url('../font/painting_in_the_sunlightwebfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'icomoon';
  src:  url('../font/icomoon.eot?m37cue');
  src:  url('../font/icomoon.eot?m37cue#iefix') format('embedded-opentype'),
    url('../font/icomoon.ttf?m37cue') format('truetype'),
    url('../font/icomoon.woff?m37cue') format('woff'),
    url('../font/icomoon.svg?m37cue#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icomoon-"], [class*=" icomoon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icomoon-arrow-19:before {
  content: "\e900";
}
.icomoon-arrow-192:before {
  content: "\e901";
}
.icomoon-facebook2:before {
  content: "\ea91";
}
.icomoon-instagram:before {
  content: "\ea92";
}
.icomoon-twitter:before {
  content: "\ea96";
}
.icomoon-youtube:before {
  content: "\ea9d";
}

/**************** GENERAL ****************/
.clear{
	clear: both;
    display: block;
}
.center{
	text-align: center;
}
.right{
	float:right;
}
.left{
	float:left;
}
.none{
	display:none;
}
.relative{
	position:relative;
}
.d-none{
	display:none;
}
.d-block{
	display:block;
}
.ocultar{
    display: none;
}

body{
	height: 100%;
	background-color: #000000;
    font-family: Lato;
}
/**************** HEADER ****************/

/* header */
header.top-gather .style-style1 .logo{
    width: 120px !important;
}
.gather-btn.navigation{
    float: right !important;
    margin-right: 25px;
}
.gather-rrss{
    position: absolute;
    right: 100px;
    top: 25px;
}
.gather-rrss ul li{
    display: inline-block;
    margin-right: 7px;
}
.gather-rrss ul li a{
    opacity: 0.4;
    transition: opacity .3s;
}
.gather-rrss ul li a:hover{
    opacity: 1;
}
@media (max-width : 480px) {
    .gather-rrss {
        right: 60px;
    }
}
@media (min-width : 481px) and (max-width: 767px) {
    .gather-rrss {
        right: 70px;
    }
}
@media (min-width : 768px) and (max-width: 991px) {
    .gather-rrss {
        right: 80px;
    }
}
@media (max-width: 1280px){
    header.top-gather{
        background-color: #000 !important;
    }
}
.navigation-mobile.header-dark .search-form{
  display: none;
}
@media (max-width: 1280px){
  body:not(.compose-mode) header:not(.retina-screen-header), body.compose-mode.responsive-mode header:not(.retina-screen-header){
    padding: 0 !important;
  }
}
.navigation-mobile.header-dark{
  background-color: #000;
}
.header-nav-flag{ 
    background-color: rgba(0, 0, 0, 0.62);
    border-radius: 0 0 5px 5px;
    padding: 0 12px 7px;
    position: absolute;
    right: 2.4%;
    top: 78px;
    z-index: 10;
}
.header-nav-flag .lang-item{
    display: inline-block;
}
.header-nav-flag .lang-item a{
    line-height: 10px;
    opacity: 0.8;
    width: 26px;
    height: 17px;
    display: block;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.header-nav-flag .lang-item a[lang="en-US"]{
  background-image: url("/wp-content/themes/massive-dynamic-child/images/languages/en.png");
}
.header-nav-flag .lang-item a[lang="es-ES"]{
  background-image: url("/wp-content/themes/massive-dynamic-child/images/languages/es.png");
}
.header-nav-flag .lang-item a:hover{
    opacity: 1;
}
.header-nav-flag .lang-item a img{
  display: none;
}
.header-nav-flag .lang-item.current-lang{
    display: none;
}
@media (max-width: 1280px){
  .header-nav-flag{
    top: 70px;
    right: 0px;
    background-color: #000;
    padding: 7px 12px;
    border-radius: 5px;
  }
  .header-nav-flag .lang-item a{
    width: 26px;
    height: 17px;
  }
}
/**************** LOADING ***************/
#box-relative{
	background-color: #000000;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
}
#content-loading{
	bottom: 15px;
    height: 80%;
    left: 50%;
    margin-left: -142px;
    min-height: 350px;
    position: absolute;
    top: 100px;
    width: 284px;
    display: none;
}
#logo-big{
	margin-top: -100px;
    position: relative;
    max-width: 100%;
    top: 30%;
    height: auto;
}
#content-counter{
	bottom: 20px;
    position: absolute;
}
#number-counter{
    background-position: -47px 0;
    border-radius: 50%;
    color: #000;
    font-size: 0.7em;
    height: 35px;
    margin: 0 auto 20px;
    padding-top: 12px;
    text-align: center;
    width: 35px;
    background-color: #fff;
}
#box-counter{
	border: 1px solid #fff;
    height: 10px;
    margin: 0 auto;
    width: 270px;
}
#box-counter div{
	background-color: #fff;
    height: 10px;
    width: 50%;
}
#skip{
	display: block;
    font-size: 0.9em;
    margin-top: 38px;
    text-align: center;
    text-decoration: underline;
}

/**************** FONDO ****************/
.fondo{
	position: absolute;
    top: 0;
    height: 100%;
	z-index: -10;
	min-height: 200px;
}
#effects, .icons-arrow{
	height: 100%;
    position: absolute;
    z-index: 3;
}
#effects > div, .icons-arrow > div{
	height: 100%;
    width: 30%;
    position: fixed;
}

#effects #gradient-linear-right, .icons-arrow .icons-right{
    right: 0;
}

.icon-arrow{
    color: rgba(255, 255, 255, 0.6);
    font-size: 2.5em;
    position: absolute;
    text-shadow: 2px 2px 5px #000000;
    top: 60%;
    transition: opacity 1s;
}
.icons-left .icon-arrow{
    left: 18px;
    animation: moveArrowLeft 0.7s linear 5s 12 alternate;
    -webkit-animation: moveArrowLeft 0.7s linear 5s 12 alternate;
}
.icons-left:hover .icon-arrow, .icons-right:hover .icon-arrow{
    opacity: 0;
}
@-webkit-keyframes moveArrowLeft {
    from {
        left: 18px;
        }
    to {
        left: 10px;
    }
}

/* Standard syntax */
@keyframes moveArrowLeft {
    from {
        left: 18px;
        }
    to {
        left: 10px;
    }
}
.icons-right .icon-arrow{
    right: 18px;
    animation: moveArrowRight 0.7s linear 5s 12 alternate;
    -webkit-animation: moveArrowRight 0.7s linear 5s 12 alternate;
}
@-webkit-keyframes moveArrowRight {
    from {
        right: 18px;
        }
    to {
        right: 10px;
    }
}

/* Standard syntax */
@keyframes moveArrowRight {
    from {
        right: 18px;
        }
    to {
        right: 10px;
    }
}

.no-touchevents .icons-arrow{
    display: none;
}
.touchevents #effects{
    display: none;
}
/**************** ANIMATION IMG HOVER ****************/
#img-hover{
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 2;
}
#img-hover img{
    height: 100%;
    position: absolute;
    width: auto;
}
#img-hover #img-quesos{
    height: 100%;
    left: 0;
    bottom: 0;
}
#img-hover #img-quesos:hover{
    animation: animatequesos 2s ease-in 0s 4 alternate;
    -webkit-animation: animatequesos 2s ease-in 0s 4 alternate;
 }
/* Chrome, Safari, Opera */
@-webkit-keyframes animatequesos {
    from {
        height: 100%;
        left: 0;
        bottom: 0;
        }
    to {
        bottom: -0.5%;
        height: 104%;
        left: -0.5%;
    }
}

/* Standard syntax */
@keyframes animatequesos {
    from {
        height: 100%;
        left: 0;
        bottom: 0;
        }
    to {
        bottom: -0.5%;
        height: 104%;
        left: -0.5%;
    }
}

#img-hover #img-gallo{
    left: 30%;
    height: 100%;
    bottom: 0;
    /**/
}
#img-hover #img-gallo:hover{
    animation: animategallo 2s ease-in-out 0s 4 alternate;
    -webkit-animation: animategallo 2s ease-in-out 0s 4 alternate;
}
@-webkit-keyframes animategallo {
    from {
        height: 100%;
        left: 30%;
        bottom: 0;
        }
    to {
        bottom: -7%;
        height: 110%;
        left: 28.9%;
    }
}
@keyframes animategallo {
    from {
        height: 100%;
        left: 30%;
        bottom: 0;
        }
    to {
        bottom: -7%;
        height: 110%;
        left: 28.9%;
    }
}

#img-hover #img-pisto{
    left: 54.5%;
    height: 100%;
    bottom: 0;
}
#img-hover #img-pisto:hover{
    animation: animatepisto 2s ease-in 0s 4 alternate;
    -webkit-animation: animatepisto 2s ease-in 0s 4 alternate;
 }
/* Chrome, Safari, Opera */
@-webkit-keyframes animatepisto {
    from {
        left: 54.5%;
        height: 100%;
        bottom: 0;
        }
    to {
        left: 53.5%;
        height: 103%;
        bottom: -2%;
    }
}

/* Standard syntax */
@keyframes animatepisto {
    from {
        left: 54.5%;
        height: 100%;
        bottom: 0;
        }
    to {
        left: 53.5%;
        height: 103%;
        bottom: -2%;
    }
}

#img-coctel{
    right: 7%;
    height: 100%;
    bottom: 0;
}
#img-hover #img-coctel:hover{
    animation: animatecoctel 2s ease-in-out 0s 4 alternate;
    -webkit-animation: animatecoctel 2s ease-in-out 0s 4 alternate;
 }
/* Chrome, Safari, Opera */
@-webkit-keyframes animatecoctel {
    from {
        right: 7%;
        height: 100%;
        bottom: 0;
        }
    to {
        bottom: -7%;
        height: 110%;
        right: 6.2%;
    }
}

/* Standard syntax */
@keyframes animatecoctel {
    from {
        right: 7%;
        height: 100%;
        bottom: 0;
        }
    to {
        bottom: -7%;
        height: 110%;
        right: 6.2%;
    }
}
/**************** INDICADOR ****************/
.content-indicator{
	left: 100px;
    position: absolute;
    top: 10px;
    cursor: pointer;
    z-index: 4;
}

.content-indicator .plus:hover .lineH, .content-indicator .plus:hover .lineV, .content-indicator .title:hover + div .lineH, .content-indicator .title:hover + div .lineV {
	opacity: 1;
}

.content-indicator .plus{
	background-color: rgba(0, 0, 0, 0.7);
    border: 4px solid #ffffff;
    height: 46px;
    left: 10px;
    position: relative;
    width: 46px;
}
.content-indicator .plus > div {
    background-color: #FFFFFF;
}
.content-indicator .plus .lineH{
	height: 6px;
    left: 7px;
    opacity: 0.8;
    position: absolute;
    top: 16px;
    width: 24px;
}
.content-indicator .plus .lineV{
	height: 24px;
    left: 16px;
    opacity: 0.8;
    position: absolute;
    top: 7px;
    width: 6px;
}
.arrow{
	background-color: #ffffff;
    height: 4px;
    left: 0;
    position: absolute;
    top: 37px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
    width: 15px;
    display: none;
}

/**************** INDICADOR PATIO ****************/
#patio #carro-quesos, #patio #cheese-cart {
	left: 8.8%;
    top: 54%;
}
#patio #vinos, #patio #wines{
    left: 17.3%;
    top: 47%;
}
#patio #speakeasy{
    left: 30%;
    top: 50%;
}
#patio #cocktail{
    left: 37.5%;
    top: 50%;
}
#patio #angelita{
	left: 51%;
    top: 47%;
}
#patio #nuestra-cocina, #patio #our-cuisine{
	left: 67.5%;
    top: 43%;
}
#patio #eventos, #patio #events{
	left: 79.5%;
    top: 57%;
}
#patio #reservas, #patio #booking{
	left: 91.5%;
    top: 39%;
}



/**************** DESCRIPTION COMMERCE ****************/
.description-commerce{
	background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    max-width: 650px;
    overflow-y: auto;
    position: fixed;
    right: 0;
    width: 50%;
    display:none;
    z-index:7;
    top: 0;
}
.stopPropagation{
	
}
.description-commerce h2{
    font-size: 4em;
    padding: 40px 0 80px;
    font-family: 'painting_in_the_sunlightRg';
}
.description-commerce .bg-description{
	position: relative;
	margin-top: 120px;
}
.description-commerce img.img-commerce{
	width: 100%;
    height: auto;
	max-width: 130px;
	z-index: 2;
	position: relative;
}
.description-commerce .text-commerce{
	color: #ffffff;
    font-size: 1.1em;
    line-height: 1.6em;
    margin: 0 auto 50px;
    max-width: 450px;
    position: relative;
    text-align: right;
    width: 90%;
    z-index: 2;
}
.description-commerce .text-commerce *{
	color: #ffffff;
}
.description-commerce .text-commerce p{
    margin-bottom: 15px;
    font-weight: 300;
    font-family: Lato;
}
.description-commerce .text-commerce b{
	color: #ffffff;
}
.description-commerce .text-commerce div{
	
}
.description-commerce .text-commerce .flecha{
	background-image: url("../images/icons-general.png");
    background-position: -80px 0;
    bottom: -30px;
    display: block;
    height: 19px;
    position: absolute;
    right: 0;
    width: 41px;
    display: none;
    
}
.description-commerce .text-commerce .flecha:hover{
	 opacity:0.6;
}
.des-social{
	margin-bottom: 15px;
    margin-right: 15px;
    text-align: right;
    display: none;
}
.des-social li{
	display: inline-block;
    margin-left: 7px;
}
.description-commerce .des-social li > a {
	background-image: url("../images/icons-general.png");
	display: block;
}
.description-commerce .ds-icon-fb{
	background-position: -98px -47px;
    height: 16px;
    width: 8px;
}
.description-commerce .ds-icon-tw{
	background-position: -80px -33px;
    height: 14px;
    width: 18px;
}
.description-commerce .close-commerce{
    cursor: pointer;
    font-size: 25px;
    left: 15px;
    opacity: 0.7;
    position: absolute;
    top: 15px;
    z-index: 1;
    color: #fff;
}

.description-commerce .close-commerce:hover{
	opacity: 1;
}



.fondoImg{
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    z-index: -10;
   
}

#posicion_cursor{
	background-color: white;
    position: fixed;
}
/******************* BUTTON *******************/
#button{
	bottom: 20px;
    left: 10%;
    max-width: 146px;
    position: fixed;
    width: 50%;
}
#button img{
	width: 100%;
}
/*********************************************************/
/******************* RESPONSIVE DESIGN *******************/
@media screen and (max-width: 900px){
		
	header#main-menu {
	    left: 0;
	    margin-top: 0px;
	    width: 100%;
	}
	#menu-link, #menu-social{
		display: none;
	}
	#menu-white{
		display: inline-block;
	}
	.description-commerce{
		max-width: none;
		width: 70%;
	}
}
@media screen and (max-width: 750px){
	#menu-link {
	    width: 70%;
	}
	.description-commerce{
		max-width: none;
		width: 100%;
	}
}