﻿/*=========================
	      MENÚ TOP
=========================*/

.logo{max-width:210px; position:relative; text-align:center; margin:0 auto;}

@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: #1c1c1c; padding:10px 0; border-bottom:2px solid #c20000; height:84px;altura fondo top}*/

.home_menu {
	left: 0; top: 0; width: 100%; z-index: 999; background: #1c1c1c; padding:10px 0; border-bottom:2px solid #023b8a; height:84px;/*altura fondo top inicio*/ /*desguaces Turín*/
	position: -webkit-sticky;
    position: sticky;
    top: 0;
}


.menu_fixed {position: fixed; z-index: 999 !important; width: 100%; background-color: #1c1c1c; 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; background:blue}
.menu_fixed .zona-icostop{height:40px; margin-top:4px;}*/

.zona-icostop{display:block; height:auto; float:right; margin-top:18px;}/*iconos top*/
.menu_fixed .zona-icostop{height:40px; margin-top:8px;}/*iconos top cuando scroll*/



/*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ú 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;}

.menu_fixed *.menushare {top:46px;}

/*separatopmen*/
.septopmen{margin-top:84px;}



@media (max-width: 768px) {
	ul.menushare {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:20px; margin-left:15px; 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)}

.menu_fixed .hamburger{margin-top:10px;}

/*=========================
       MENÚ VERTICAL
=========================*/

.header-menu{padding:15px 5px 16px 5px;position:relative; background:#111111; background-image: linear-gradient(to bottom, #181818 0%, #000000 100%);}
.header-menu img{max-width:150px}

.sidenav > .content{width:280px;}

.verticalmenu,
.verticalmenu ul,
.verticalmenu ul li,
.verticalmenu ul li a {margin: 0; padding: 0; border: 0; list-style: none; font-family:'Open Sans',Arial, Helvetica, sans-serif; display: block; /*max-width:250px;tamaño zona sidenav*/ position: relative; font-size:1.0625em; line-height:130%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.verticalmenu ul:first-child{border-top:1px solid rgba(255,255,255,0.1);}

.verticalmenu {width: 100%;  color: #333; border:0px; background:#181818;/**/}
.verticalmenu ul ul {display: none;}
.verticalmenu > ul > li.active > ul {display: block;}


.verticalmenu > ul > li > a {padding: 16px 5px; cursor: pointer; z-index: 2; text-decoration: none; color: #ccc; background: #181818;/**/ -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;}
.verticalmenu > ul > li > a:hover {color: #c80000; }
.verticalmenu ul li.active > a {color:#ffffff;}

.verticalmenu ul li.has-sub.open > a {padding-bottom: 0px;}

.verticalmenu ul > li.has-sub > a:after {
	position: absolute; right: 20px; top: 22px; z-index: 5; display: block; height: 8px; width: 1px; background: none; content: "";
	-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out;
	-moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);  
}
.verticalmenu ul > li.has-sub > a:before {
	position: absolute; right: 15px; top: 26px; display: block; width: 8px; height: 1px; background: none; content: "";
	-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out;  
	-moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}

.verticalmenu ul > li.has-sub.open > a:after,
.verticalmenu ul > li.has-sub.open > a:before {-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}

/*.verticalmenu ul li.has-sub{text-transform:uppercase;}
.verticalmenu ul li.has-sub ul{text-transform:none;}*/

.verticalmenu ul ul > li.has-sub > a:after {right: 13px; top: 23px; background: #dddddd;}
.verticalmenu ul ul > li.has-sub > a:before {top: 26px; background: #dddddd;}

.verticalmenu ul li {border-bottom:1px solid rgba(255,255,255,0.1); padding-left:5px; padding-right:5px}
.verticalmenu ul li:last-child {border-bottom:0px solid #d8d8d8;}


/*submenu */
.verticalmenu ul ul li a {padding: 14px 5px; cursor: pointer; z-index: 2; font-size: 1em; text-decoration: none; color: #999; background: #181818;/*color fondo submenu*/ -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;}
.verticalmenu ul ul ul li a {padding-left: 5px;}
.verticalmenu ul ul li a:hover {color: #c80000;}
.verticalmenu ul ul li a:last-child{border-top:0px solid #ccc;}

.verticalmenu ul ul ul li.active a {color:#c80000;}
.verticalmenu ul ul li ul li a:first-child, .verticalmenu ul ul li ul li:first-child a:hover, .verticalmenu ul ul li ul li.active a:first-child{padding-top:0px;}

/*primera profundidad*/
.verticalmenu ul li {font-size:1em;}

/*segunda profundidad*/
.verticalmenu ul li ul li{font-size:0.875em; padding-left:3px}
.verticalmenu ul li ul li a::before{content:"\203A"; padding-right:3px; padding-left:0px; font-size:1.2em; font-weight:lighter; color:#ccc;}
.verticalmenu ul li ul li.active, .verticalmenu ul li ul li.active a{color:#ffffff;}
.verticalmenu ul li ul li.active a:hover{color:#ffffff;}

/*tercera produndidad*/
.verticalmenu ul li ul li ul li {border:0px; font-size:0.875em; padding-left:13px;}
.verticalmenu ul li ul li ul li a::before{content:"\203A"; padding-right:3px; padding-left:0px; font-size:1em; font-weight:lighter; color:#ccc;}
.verticalmenu ul li ul li ul li.active a,.verticalmenu ul li ul li ul li.active a:hover, .verticalmenu ul li ul li ul li.active a:focus, .verticalmenu ul li ul li ul li.active a::before{color:#c80000;}



/*==============================
		   		NUEVO 2022
==============================*/

.verticalmenu, .verticalmenu ul, .verticalmenu ul li, .verticalmenu ul li a {font-size: 1.03em;}

.verticalmenu > ul > li > a {color: #7e7e7e;}
.verticalmenu > ul > li > a:hover {color: #83add2;}
.verticalmenu ul ul ul li.active a {color:#83add2;}
.verticalmenu ul ul li a:hover {color: #83add2;}
.verticalmenu ul li.active > a {color: #cdcdcd;}