/*
CTC Separate Stylesheet
Updated: 2019-03-13 19:29:37
Theme Name: OHPIMA! Child
Theme URI: http://www.spab-rice.com/themes
Template: kona
Author: amnewell
Author URI: http://www.spab-rice.com
Description: OHPIMA!
Tags: portfolio
Version: 2.1.1552505377
*/


/* ====== CUSTOM FONTS (self-hosted, woff2) ======
   Servidas desde el theme: kona-child/assets/fonts/
   Reemplazan las que estaban en Personalizar > CSS adicional. */

@font-face {
    font-family: 'Gotham-Light';
    src: url('assets/fonts/Gotham-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Book';
    src: url('assets/fonts/Gotham-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('assets/fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linotype-Didot';
    src: url('assets/fonts/LinotypeDidot-Roman.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Fix: Isotope grid (shop) recalculates column width in px right after
   imagesLoaded fires; if a vertical scrollbar appears afterwards the
   container shrinks and the last column wraps (4 cols -> 3). Reserving
   the scrollbar gutter up front keeps container width stable. */
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

/* NEW CHANGES 01/10 */

div#showroom {
    float: left;
    z-index: 1503;
    position: relative;
    align-items: center;
    height: 32px;
    display: flex;
}

div#showroom span {
    font-family: 'Gotham-Light', 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

div#showroom svg {
    width: 20px;
    margin-right: 10px;
}

div#showroom a {
    display: flex;
}

#menu {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    border-top: 1px solid #d1d1d1 !important;
    border-bottom: 1px solid #d1d1d1 !important;
    padding: 5px;
	width: 100%;
}

#header .header-inner {
    padding: 25px 0;
}

#menu nav#main-nav > ul > li {
    position: inherit;
    margin-top: 3px !important;
}

#menu nav#main-nav > ul > li.megamenu3 > .sub-menu {
    z-index: -1;
}

#menu nav#main-nav > ul > li .sub-menu::before {
    bottom: -23px !important;
}

#menu nav#main-nav ul > li:hover > a::after, #menu nav#main-nav ul > li.current-menu-item > a::after{
	display: none;
}

#header {
	border-bottom: 0 !important;
}

#menu nav#main-nav > ul > li[class*='megamenu'] > .sub-menu > li li{
	padding-left: 35px;
	text-align: left;
}

#header.mega-hover #menu nav#main-nav::before{
	display: none;
}

.mobile-menu, #side-nav{
	display: none;
}

#menu nav#main-nav > ul {
    height: 35px;
    display: inline-flex;
    align-items: center;
}

	#nav-icon {
		display: none;
		z-index: 100;
		width: 25px;
		height: 20px;
		margin-left: 25px;
		position: relative;
		top: -4px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .35s cubic-bezier(1,0,0,1);
		-moz-transition: .35s cubic-bezier(1,0,0,1);
		-o-transition: .35s cubic-bezier(1,0,0,1);
		transition: .35s cubic-bezier(1,0,0,1);
		cursor: pointer;
		margin: 0;
		transform: translateY(50%);
	}


	#nav-icon span:nth-child(1) {
		top: 0px;
	}

	#nav-icon span:nth-child(2),
	#nav-icon span:nth-child(3) {
		top: 7px;
	}

	#nav-icon span:nth-child(4) {
		top: 14px;
	}

	#nav-icon span {
		display: block;
		position: absolute;
		z-index: 100;
		height: 1px;
		width: 100%;
		background: #032B5B;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#nav-icon.open span:nth-child(1) {
		top: 8px;
		width: 0%;
		left: 50%;
	}

	#nav-icon.open span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#nav-icon.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#nav-icon.open span:nth-child(4) {
		top: 8px;
		width: 0%;
		left: 50%;
	}


@media only screen and (min-width: 1023px){
	body.scrolled #header.sticky.break-1024 .header-inner {
		padding: 18px 0;
	}
}

@media only screen and (max-width: 1024px){
	
	.product .product-hero {
    	padding-top: calc(110px + 15px) !important;
	}
	
	#header.break-1024 #menu #menu-inner {
		position: static !important;
		height: auto !important;
		opacity: 1 !important;
	}
	
	ul#primary-menu{
		display: none !important;
	}
	
	.mobile-menu {
		display: block !important;
	}
	
	#header.break-1024 #menu nav#main-nav > ul > li {
		margin: 0 !important;
		padding: 5px 0px 0;
	}
	
	#menu .mobile-menu #main-nav ul>li a {
    	font-size: 10px !important;
    	padding: 0 12px;
	}
	
	
	div#side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    transform: translateX(-100%);
    transition: .5s cubic-bezier(1, 0, 0, 1);
	display: block;
}

div#side-nav.open {
    transform: translateX(0);
}

#side-nav nav#main-nav {
    position: absolute;
    top: 100px;
    left: 13px;
}

#side-nav nav#main-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
	
#side-nav nav#main-nav>ul>li .sub-menu{
		display: block !important;
}
	
#side-nav nav#main-nav>ul{
	display: block !important;
	text-align: left;
}
	
#side-nav #main-nav ul > li a {
    font-size: 13px !important;
    padding: 4px !important;
    color: #002e5d !important;
}
	
#header.break-1024 #menu #side-nav nav#main-nav>ul>li>a {
    color: #002e5d !important;
	font-family: 'Gotham-Book', 'Montserrat', sans-serif !important;
	font-size: 14px !important;
}
	
.menu-item-has-children > a:before, .menu-item-has-children > a:after{
	display: none !important;
}
	
	#side-nav #main-nav > ul > li .sub-menu{
		padding-left: 25px !important;
	}

#side-nav #main-nav > ul > li .sub-menu li {
    margin-top: 0 !important;
}

#side-nav nav#main-nav>ul>li .sub-menu>li:last-child {
    padding-bottom: 0px !important;
}

#side-nav>#main-nav>ul>li {
    padding: 15px 0 0 !important;
}
}


@media screen and (max-width: 480px){
	
	#nav-icon{
		display: block;
	}
	#showroom{
		display: none !important;
	}
}

/* Ícono de búsqueda duplicado para mobile (al lado del hamburger #nav-icon).
   Oculto por default (desktop); en mobile se muestra absolute dentro de
   .header-inner (position:relative) y se oculta el original de .menu-actions. */
body .ohpima-mobile-header-search {
	display: none !important;
}
@media screen and (max-width: 768px) {
	body .ohpima-mobile-header-search {
		display: block !important;
		position: absolute !important;
		left: 43px !important; /* ajustado en ohpima.es; revisar con screenshot real en AR */
		top: 50% !important;
		transform: translateY(-50%) !important;
		margin: 0 !important;
		z-index: 100 !important;
	}
	body #header .menu-actions > .menu-search {
		display: none !important;
	}
	body .ohpima-mobile-header-search svg {
		width: 18px !important;
	}
}
