﻿/*=========================
	      MENÚ TOP
=========================*/

.logo{max-width:200px; position:relative;}

@media (max-width: 768px) {
	.logo, .home_menu img{max-width:150px; padding-top:10px}
	.logo, .menu_fixed img{max-width:150px; padding-top:0px}
}


/*menú top horizontal*/
.home_menu {position: absolute; left: 0; top: 0; width: 100%; z-index: 999; background: #000000; padding:10px 0; height:84px/*altura fondo top*/}
.menu_fixed {position: fixed; z-index: 999 !important; width: 100%; background-color: #000000; box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.3); top: 0; height:70px/*altura cuando se desplaza*/}
.menu_fixed img{max-width:150px;}

.zona-icostop{display:block; height:54px; float:right; margin-top:10px;}
.menu_fixed .zona-icostop{height:40px; margin-top:4px;}


/*animación aparece menú top*/
@keyframes fadeInDown {
  from {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInDown {-webkit-animation-name: fadeInDown; animation-name: fadeInDown;}
.animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

@media (print), (prefers-reduced-motion) {
  .animated {-webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important;}
}

/*menú desplegable*/

.d-block{display:block!important}

.filamenu {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}

.menutop{width:302px; position:absolute; top:64px; right:0px; background-color:#000; z-index:-1; opacity:0; /*transition:.2s all linear;*/ display:none; /*añadido:*/vertical-align:top;}
.menutop.show{display:block; z-index:1010; opacity:1;}

/*ul.menu-primary li a:hover{display:inline; background:aqua;}*/

.menutop .menu-primary{border-top:2px solid #fff; border-left:2px solid #fff; list-style:none; margin:0; padding:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.menutop .menu-primary .menu-item a{height:120px; width:150px; display:block; /*padding:4px 13px 0;*/ color:#fff; border-bottom:2px solid #fff; border-right:2px solid #fff; text-align:center;}/*tamaño bloques grandes*/

.menutop .menu-primary .menu-item a:hover, .menutop .menu-primary .menu-item a.active{text-decoration:none; color:#000; background:#fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.menutop .menu-primary .menu-letters{font-family:'Arial'; font-size:4em; line-height:1; padding-top:10px;}
.menutop .menu-primary .menu-label{font-family:'Arial'; font-size:.875em; line-height:1; padding:4px;}

.menu-container-secondary{border-right:2px solid #fff; border-left:2px solid #fff;}

ul.menu-secondary a{font-family:'Arial'; display:block; line-height:1; padding:8px 15px; font-size:1.25em; color:#fff; border-bottom:0px solid #fff;}
ul.menu-secondary a:hover{text-decoration:none; color:#000; background-color:#fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul.menu-secondary a.active{font-weight:bold;}

ul.menu-secondary li{border-bottom:2px solid #fff;}
ul.menu-secondary li ul{}
ul.menu-secondary li ul li{border-bottom:0px solid #fff; font-size:0.875em;}
ul.menu-secondary li ul li a{padding:10px 20px;}
ul.menu-secondary li ul li a.active{color:#000; background-color:#fff}


/*ul.menu-secondary li > ul li{border-bottom:0px solid #fff; background:aqua}*/

#menu-primary .menu-item{transition:all .2s linear; padding-right:0; padding-left:0; -ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%; width:100%; min-height:1px; -webkit-box-flex:0}
#menu-primary .sub-menu .menu-item{padding-right:0; padding-left:0; -ms-flex:0; flex:0; max-width:none; min-height:none; -webkit-box-flex:0}
#menu-primary .menu-item.hover{background-color:#fff; color:#000; transition:all .2s linear}
#menu-primary .menu-item.hover a{color:#000}

.menu_fixed *.menutop {top:55px;}

/*menú vertical redes sociales*/

ul.menushare {position:absolute; top:54px; right:20px; border:0px solid #fff; font-size: 0.625em; background: #000; border-left:2px solid #fff; border-right:2px solid #fff; display:none}
ul.menushare li a {display: block; color: #fff; padding: 5px 10px; text-decoration: none; border-top:2px solid #fff;}
ul.menushare li:last-child a {border-bottom:2px solid #fff;}
ul.menushare li a.active {background: #fff; color:#000000;}
ul.menushare li a:hover:not(.active){background: #fff; color:#000;}

ul.menushare li a i{color:white;}
ul.menushare li a:hover i, ul.menushare li a.active i{color:black;}


ul.menuidioma {position:absolute; top:54px; right:30px; border:0px solid #fff; font-size: 0.625em; background: #000; border-left:2px solid #fff; border-right:2px solid #fff; display:none}
ul.menuidioma li a {display: block; color: #fff; padding: 5px 10px; text-decoration: none; border-top:2px solid #fff;}
ul.menuidioma li:last-child a {border-bottom:2px solid #fff;}
ul.menuidioma li a.active {background: #fff; color:#000000;}
ul.menuidioma li a:hover:not(.active){background: #fff; color:#000;}

ul.menuidioma li a i{color:white;}
ul.menuidioma li a:hover i, ul.menuidioma li a.active i{color:black;}

.menu_fixed *.menushare, .menu_fixed *.menuidioma {top:46px;}


/*separatopmen*/
.septopmen{margin-top:84px;}

@media (max-width: 768px) {
	ul.menushare {right:10px;}
	ul.menuidioma {right:10px;}
	/*.septopmen{margin-top:70px;}*/
	.menutop.show{height:80vh; overflow-y:auto;}
}


/*=========================
	 ICONO HAMBURGUESA
=========================*/

.hamburger{font:inherit; display:inline-block; overflow:visible; margin:0; margin-top:10px; padding:0px; cursor:pointer; transition-timing-function:linear; transition-duration:.15s; transition-property:opacity,filter; text-transform:none; color:inherit; border:0; background-color:transparent;}
.hamburger.is-active:hover,.hamburger:hover{opacity:.7}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:#fff}
.hamburger-box{position:relative; display:inline-block; width:30px; height:20px}
.hamburger-inner{top:50%; display:block; margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute; width:30px; height:2px; transition-timing-function:ease; transition-duration:.15s; transition-property:transform; border-radius:0px; background-color:#fff}
.hamburger-inner:after,.hamburger-inner:before{display:block; content:""}
.hamburger-inner:before{top:-10px}
.hamburger-inner:after{bottom:-10px}

/*animación*/
.hamburger--spring .hamburger-inner{top:2px; transition:background-color 0s linear .13s}
.hamburger--spring .hamburger-inner:before{top:10px; transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}
.hamburger--spring .hamburger-inner:after{top:20px; transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)}
.hamburger--spring.is-active .hamburger-inner{transition-delay:.22s; background-color:transparent!important}
.hamburger--spring.is-active .hamburger-inner:before{top:0; transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s; transform:translate3d(0,10px,0) rotate(45deg)}
.hamburger--spring.is-active .hamburger-inner:after{top:0; transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s; transform:translate3d(0,10px,0) rotate(-45deg)}

