header {
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid transparent;
    background-color: white;
    -webkit-transition: height .3s ease-out,background-color .3s ease-out,border-bottom-color .3s ease-out;
    -o-transition: height .3s ease-out,background-color .3s ease-out,border-bottom-color .3s ease-out;
    transition: height .3s ease-out,background-color .3s ease-out,border-bottom-color .3s;
}

header.collapsed {
    background-color: white;
}

#myCabecera {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin: 0 .5em;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#hamburuesaMobil {
	width: 60px;
	height: 60px;
	padding-right: 10px;
	z-index: 9999;
}
.menu-btn {
  display: block;
  margin: 1rem 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: relative;
}
.menu-btn span {display:none;position: absolute;color:var(--neutro1); left: 100%; top: 5px;}
.menu-btn:before,
.menu-btn:after {
  background-color: var(--color1);
  content: '';
  display: block;
  height: 3px;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}
.menu-btn:before {
  box-shadow: 0 10px 0 var(--color1);
  margin-bottom: 16px;
}
.menu-btn.open:before {
  box-shadow: 0 0 0 var(--color1);
  transform: translateY(10px) rotate(45deg);
  cursor:pointer;
}
.menu-btn.open:after{
  transform: translateY(-10px) rotate(-45deg);
  cursor:pointer;
}
.menu-btn.open span {display:block;}

.header-left,
.header-right {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-basis: 33%;
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.header-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

a.logo {z-index: 9995;display: block;}
.logo_principal {
    height: 100%;
    z-index: 10;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    top: 0;
    -webkit-transition: top .2s ease-out,opacity .2s ease-out;
    -o-transition: top .2s ease-out,opacity .2s ease-out;
    transition: top .2s ease-out,opacity .2s ease-out;
}
.logo_isologo {
    position: absolute;
    top: 130px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    -webkit-transition: top .2s ease-out;
    -o-transition: top .2s ease-out;
    transition: top .2s ease-out;
    height: 100%;
}

.logo_isologo_menu img {
    max-height: 35px;
    min-height: 35px;
}

.logo_isologo_menu,
.logo_isologo.disable,
.logo_principal.disable {
	display: none;
}
.logo_isologo_menu.active {
	display: block;
}
.logo_principal img {width: 75%;margin:10px auto;}

.logo_isologo img {
	max-height: 60%;
    filter: grayscale(100%);
    min-height: 50px;
}

header.collapsed .logo_principal {
    position: relative;
    top: -100px;
    display: none;
}

header.collapsed .logo_isologo {
    top: 12.5px;
}

header.collapsed.color .logo_isologo img {
    filter: grayscale(0%);
}

nav {display:flex;justify-content:center;}

nav > ul {
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	list-style-type: none;
	padding-left: 0;
	padding-right: 40px;
}

nav > ul > li {
	margin: 0 10px;
	padding-bottom:0;
	border-bottom: unset;
}
/*nav > ul > li:after {
	content: '';
	position: relative;
    border-bottom: 1px solid white;
    width: 85%;
    margin: 0 auto;
}*/
nav > ul > li:before {
	display:none;
}

nav > ul > li.Marcas {
    padding-left: 10px;
    padding-right: 10px;
}

nav > ul > li > a {
	color:var(--neutro2);
	font-weight: 700;
	font-size: calc(var(--tamanio-base)*0.825rem);
}
nav > ul > li > a:hover{
	color:var(--color1);
}

nav > ul#menu_main > li.secundario {
	display: none;
}

nav > ul#menu_main > li > a {
	text-transform: uppercase;
}
nav > ul#menu_main > li.secundario.Titulo > a {
	pointer-events: none;
    cursor: default;
}
nav > ul#menu_main > li.secundario.Titulo.hidden > a {
	display: none;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 0;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li {
	list-style-type: none;
	background-color: white;
	border-radius: 5px;
	text-align: center;
	margin: 5px 0;
	padding: 3px 5px 3px;
    pointer-events:none;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li.sinfondo {
	background-color: transparent;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li:before {
	content: unset;
    color: unset;
    font-size: unset;
    font-weight: unset;
    display: unset;
    width: unset;
    margin-left: unset;
}
nav > ul#menu_main > li.secundario.Titulo.Combustible > ul.sub-menu > li {
	width: 45%;
}
nav > ul#menu_main > li.secundario.Titulo.Tipos > ul.sub-menu > li {
	width: 30%;
}

nav.active>ul#menu_main>li.secundario.Marcas.Titulo.Tipos > ul.sub-menu > li {
	width: 11%;
	margin-left: 2px;
	margin-right: 2px;
}
nav.active>ul#menu_main>li.secundario.Marcas.Titulo.Tipos > ul.sub-menu > li.fullwidth {
	width: 100%;
}

nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li > a {
	color: black;
	display: block;
	width: 100%;
	cursor: pointer;	
	pointer-events: auto;
	z-index: 10;
}
nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu > li.sinfondo > a {
	color: white;
}

.contactosHeader {
	display:flex;
}

.contactosHeader a,
.contactosHeader span {
	color:var(--neutro2);
	font-weight: 700;
	font-size:calc(var(--tamanio-base)*1.2rem);
	margin:0 5px;
}

.telefonoCabecera {font-size:25px;}

.contactosHeader a:hover,
.contactosHeader span:hover {
	color:var(--color1);
}

header.collapsed a,
header.collapsed nav > ul > li > a,
header.collapsed nav > ul > li > span {
	color:var(--neutro2);
}

header.collapsed a:hover,
header.collapsed nav > ul > li > a:hover,
header.collapsed nav > ul > li > span:hover {
	color:var(--color1);
}

.telefonoCabecera svg {fill: black;}

.contactosHeader a.btn,
.contactosHeader span.btn {
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    border: none;
    margin: 0 5px;
    padding: calc(var(--tamanio-base)*.8rem);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1rem;
    -webkit-box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    background-color: white;
    font-size:calc(var(--tamanio-base)*.8rem);
    color: black;
}
.contactosHeader a.btn:hover,
.contactosHeader span.btn:hover {
	background-color: var(--color1);
	color:white;
}

header.collapsed.color a.btn,
header.collapsed.color span.btn {
	background-color: var(--color1);
	color:white;
}
header.collapsed.color a.btn:hover,
header.collapsed.color span.btn:hover {
	background-color: black;
}

.camuflaEnlace, .camuflaEnlaceBlank, .camuflaEnlaceBlankCompartir {padding:0 5px; cursor: pointer;}

article.page {margin-top:-16px; padding: 0 15px;}

.contactosHeader .xs-hidden {display:inline-block;}

.whatsappCabecera, .facebookCabecera, .instagramCabecera {
    min-height: 25px!important;
    width: auto!important;
    height: 25px!important;
}




@media (max-width: 1600px) {
	nav > ul {padding-right: 0px;}
}
@media (max-width: 1500px) {
	nav > ul > li {margin: 0 5px;}
}
@media (max-width: 1400px) {
	.logo_principal img {
	    min-width: unset;
	    max-width: 165px;
	}
}
@media (max-width: 1270px) {
	nav > ul > li > a {
	    font-size: calc(var(--tamanio-base)*0.7rem);
	}
}
@media (min-width: 1025px) {
	nav.active {
		display: flex;
	    padding-top: 65px;
	    padding-bottom:20px;
	    width: 100vw;
	    height: 100vh;
	    box-shadow: 0 2px 6px 0 rgb(146 145 145 / 36%);
	    border: solid 1px #c7c7c7;
	    background-color: rgba(0,0,0,.85);
	    position: absolute;
	    top: 0;
	    left: -8px;
	    z-index: 9990;
	}
	nav.active > ul {
		display: flex;
	    justify-content: flex-start;
	    flex-wrap: wrap;
	    align-items: center;
	    width: 98%;
	    margin: 0 auto;
	    border-bottom: none;
	    flex-direction: column;
	    padding-right: 0;
	    height: 100vw;
	}
	nav.active > ul > li {
	    width: 100%;
	    padding-left: 40px;
	    padding-right: 40px;
	    padding-top: 5px;
	    padding-bottom: 5px;
	    text-align: center;
	    margin: 0;
	}
	nav.active > ul > li > a {
	    color: var(--neutro1);
	    font-weight: 500;
	    font-size: calc(var(--tamanio-base)*1.2rem);
	}
	header.collapsed nav.active > ul > li > a, 
	header.collapsed nav.active > ul > li > span {
	    color: var(--neutro1);
	}
	nav.active > ul#menu_main > li.secundario {
	    display: inline-block;
	}
	nav.active > ul > li > a {
	    color: var(--neutro1);
	    font-weight: 700;
	    font-size: calc(var(--tamanio-base)*0.9rem);
	}
	nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {
	    width: 530px;	    
    	margin: 0 auto;    	
    	padding-left: 0;
	}

	nav.active>ul>li>a {
	    font-size: calc(var(--tamanio-base)*1.2rem);
	}
}

@media (max-width: 1024px) {

	.logo_principal img {width: 75%;margin:0 auto;min-width: 110px;max-width: 150px;}

	.contactosHeader .xs-hidden {display:none;}
	/*esto es común a todos*/
	#hamburuesaMobil {
		padding-top:3px;
		display: block;
		width:25%;
	}

	#myCabecera {
		overflow: visible;
	}

	.logo_isologo {
    position: absolute;
    top: -130px;
}

/* The animation code */
@keyframes apertura {
  from {left: -100%;}
  to {left: -10%;}
}
@keyframes cierre {
  from {left: -10%;}
  to {left: -100%;}
}

	nav:not(.rank-math-breadcrumb) {
		display: none;
	    padding-top: 65px;
	    padding-bottom:20px;
	    width: 100vw;
	    height: 100vh;
	    box-shadow: unset;
	    border: unset;
	    background-color: rgba(0,0,0,.85);
	    position: absolute;
	    top: 0;
	    left: -100%;
  		animation-name: cierre;
	    z-index: 9990;
	}

	nav.active {
		display: flex;
	    left: -8px;
  		animation-name: apertura;
	}

	nav>ul {
	    display: flex;
	    justify-content: flex-start;
	    flex-wrap: wrap;
	    align-items: center;
	    width: 98%;
	    margin: 0 auto;
	    border-bottom: none;
	    flex-direction: column;
	    padding-right: 0;
	}
	nav>ul>li {
		width: 100%;
	    padding-left: 40px;
	    padding-right: 40px;
	    padding-top:5px;
	    padding-bottom:5px;
	    text-align: center;
	    margin: 0;
	}

	nav>ul>li.secundario {
	    pointer-events: none;
	}

	nav > ul#menu_main > li.secundario.Titulo > ul.sub-menu {		
		justify-content: space-between;
		padding-top: 0;
	}
	
	nav > ul#menu_main > li.secundario.Titulo.Tipos > ul.sub-menu > li {
		width: 45%;
	}




	nav.active > ul > li > a {
	    color: var(--neutro1);
	    font-weight: 500;
	    font-size: calc(var(--tamanio-base)*0.9rem);
	}
	nav.active>ul#menu_main>li.secundario {
		display: inline-block;
	}



	header.collapsed a, 
	header.collapsed nav.active>ul>li>a, 
	header.collapsed nav.active>ul>li>span {
	    color: var(--neutro1);
	}
	
	.contactosHeader a.btn,
	.contactosHeader span.btn {
		margin: 0;
	    padding: calc(var(--tamanio-base)*.1rem);
	    font-size: calc(var(--tamanio-base)*.45rem);
	    max-width: 75%;
	}

	.header-left, .header-right {
	    height: 100%;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    -webkit-flex-basis: unset;
	    -ms-flex-preferred-size: unset;
	    flex-basis: unset;
	    -webkit-box-flex: 1;
	    -webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	    flex-grow: 1;
		width:25%;
	}
	a.logo {width: 50%;}
	

	header.collapsed #hamburuesaMobil {
		position: absolute;
		left: 0;
	}

	nav.active>ul#menu_main>li.secundario.Marcas.Titulo.Tipos > ul.sub-menu > li {
		width: 16%;
		margin-left: 10px;
		margin-right: 10px;
	}

}
@media (min-width:769px) and (max-width:1024px){
	.cabecera.video {min-height: 50vh;}
}
@media (max-height: 680px) {
	nav.active {
	    height: calc(100vh - 39px);
	}
	nav>ul {
	    display: flex;
	    overflow-y: scroll;
	    height: auto;
	}
}

