// out: output/ec-product-updates.css, compress: true $xsmall: 420px; $small: 768px; $medium: 1024px; $large: 1100px; body { min-width: 350px !important; } header { .menu { > .menu-item { > .submenu-wrapper { > .sub-menu { > li { > .sub-menu { li { &.has_image { margin-bottom: 15px; a { display: flex; align-items: center; gap: 10px; > img { max-height: 18px; width: 25px; object-fit: contain; } } } } } } } .custom-menu-content { &.two-image, &.three-image { > a { img { width: 100% !important; } } } } } } } } .single-product { .summary { .pop-flash-circle { background: #000; width: 80px; height: 80px; position: absolute; font-size: 10px; text-transform: uppercase; font-weight: 600; font-family: inherit; color: #fff !important; display: flex; align-items: center; justify-content: center; border-radius: 100px; top: 10px; left: 10px; text-align: center; line-height: 1.1; } } .fit-guide__content { .fit-guide__maincontent { .front { &.size-legwear { .size-guide__img { span { &#waistband { right: 40%; top: 9%; } &#hip { top: 28%; right: 30%; } &#knee { bottom: 40%; left: 28%; } &#hem { bottom: 8%; left: 25%; } } } } &.size-fleece { .size-guide__img { span { &#front-seam { bottom: 40%; right: 40%; } &#chest { top: 42%; right: 26%; } &#hem { bottom: 16%; left: 36%; } &#armhole { left: 18%; top: 32%; } } } } &.size-bltops { .size-guide__img { span { &#front-seam { bottom: 38%; right: 44%; } &#armhole { left: 20%; top: 30%; } &#neck-cuff { right: 22%; top: 26%; } &#chest { top: 38%; right: 38%; } &#hem { bottom: 12%; right: 38%; } } } } &.size-blbottoms { .size-guide__img { span { &#waist-band { top: 6%; right: 38%; } &#waist-seam { top: 22%; right: 30%; } &#knee { bottom: 38%; left: 26%; } &#ankle { bottom: 8%; left: 24%; } } } } &.size-shirts { .size-guide__img { span { &#centre-front { bottom: 40%; right: 44%; } &#armhole { left: 24%; top: 24%; } &#arm-sleeve { top: 20%; right: 22%; } &#chest { top: 36%; right: 38%; } &#hem { bottom: 12%; right: 32%; } } } } &.size-shorts { .size-guide__img { span { &#waistband { top: 10%; right: 36%; } &#hip { top: 42%; right: 36%; } &#hem { bottom: 12%; left: 30%; } } } } &.size-poncho { .size-guide__img { span { &#front-centre { bottom: 42%; right: 42%; } &#arm-sleeve { right: 28%; top: 28%; } &#chest { top: 36%; right: 34%; } &#hem { bottom: 24%; right: 36%; } } } } &.size-salopettes { .size-guide__img { span { &#waistband { top: 38%; right: 34%; } &#hip { top: 46%; right: 34%; } &#knee { bottom: 30%; left: 38%; } &#ankle-hem { bottom: 6%; left: 36%; } } } } &.size-beanie { .size-guide__img { span { &#main-seam { top: 22%; right: 28%; } &#half-hem { bottom: 16%; right: 36%; } } } } &.size-braces { .size-guide__img { span { &#front-length { top: 34%; right: 20%; } &#back-length { top: 42%; left: 46%; } } } } &.size-neckwarmer { .size-guide__img { span { &#hem-circumference { top: 12%; right: 24%; } &#main-seam { top: 44%; right: 10%; } } } } &.size-expeditiontowel { .size-guide__img { span { &#length { left: 46%; top: 24%; } &#width { bottom: 46%; right: 4%; } } } } &.size-jacket-halkon { .size-guide__img { span { &#upper-body { left: 50%; top: 50%; } &#left-armpit { left: 25%; top: 26%; } &#right-shoulder { right: 24%; top: 22%; } &#chest { top: 38%; right: 32%; } &#waist { bottom: 18%; right: 34%; } } } } &.size-jacket-velez { .size-guide__img { span { &#upper-body { right: 50%; top: 40%; } &#right-full-arm { right: 12%; top: 46%; } &#right-inner-arm { bottom: 38%; right: 20%; } &#chest { bottom: 38%; right: 44%; } &#waist { bottom: 16%; right: 42%; } } } } &.size-fleece-bentu { .size-guide__img { span { &#upper-body{ bottom: 36%; right: 44%; } &#left-armpit { left: 26%; top: 30%; } &#right-shoulder { top: 30%; right: 22%; } &#chest { right: 40%; top: 40%; } &#waist { bottom: 18%; right: 38%; } } } } &.size-tee-cambia { .size-guide__img { span { &#front-seam { bottom: 38%; right: 44%; } &#armhole { left: 30%; top: 26%; } &#right-shoulder { top: 20%; right: 20%; } &#chest { top: 40%; right: 34%; } &#waist { bottom: 12%; right: 32%; } } } } &.size-gilet { .size-guide__img { span { &#upper-body { bottom: 40%; right: 44%; } &#chest { top: 40%; right: 34%; } &#waist { bottom: 12%; left: 36%; } &#left-arm-hole { left: 24%; top: 26%; } } } } &.size-jacket-windproof-velez { .size-guide__img { span { &#upper-body { bottom: 34%; right: 44%; } &#left-armpit { left: 24%; top: 28%; } &#right-shoulder { top: 28%; right: 24%; } &#chest { top: 40%; right: 38%; } &#waist { bottom: 14%; right: 36%; } } } } &.size-cap { .size-guide__img { span { &#top { top: 14%; left: 30%; } &#head-seam { top: 42%; right: 34%; } } } } &.size-jacket-travel-halkon { .size-guide__img { span { &#upper-body { top: 50%; right: 42%; } &#left-armpit { top: 28%; left: 22%; } &#right-shoulder { top: 24%; right: 26%; } &#chest { top: 38%; right: 34%; } &#waist { bottom: 18%; right: 36%; } } } } &.size-jacket-velez-grid { .size-guide__img { span { &#upper-body { bottom: 28%; right: 46%; } &#left-armpit { top: 40%; left: 28%; } &#right-shoulder { top: 32%; right: 24%; } &#chest { bottom: 42%; right: 38%; } &#waist { bottom: 8%; right: 40%; } } } } &.size-jacket-alondra { .size-guide__img { span { &#upper-body { top: 46%; right: 44%; } &#left-armpit { top: 28%; left: 26%; } &#right-shoulder { top: 22%; right: 26%; } &#chest { top: 36%; right: 40%; } &#waist { bottom: 20%; right: 34%; } } } } &.size-microshorts { .size-guide__img { span { &#waistband { top: 26%; left: 46%; } &#crotch { right: 50%; top: 44%; } &#hip { right: 28%; bottom: 42%; } } } } &.size-boxers { .size-guide__img { span { &#waistband { top: 26%; left: 46%; } &#crotch { left: 46%; top: 40%; } &#legband { bottom: 20%; left: 26%; } } } } &.size-darkcloth { .size-guide__img { span { &#top { right: 42%; top: 18%; } &#right-side { top: 24%; right: 16%; } &#bottom { bottom: 24%; right: 26%; } &#bottom-middle { bottom: 28%; right: 44%; } } } } } .back { &.size-legwear { .size-guide__img { span { &#outside-leg { top: 28%; left: 22%; } &#inside-leg { bottom: 36%; right: 34%; } } } } &.size-fleece { .size-guide__img { span { &#back-seam { bottom: 44%; right: 42%; } } } } &.size-bltops { .size-guide__img { span { &#back-seam { top: 48%; right: 48%; } } } } &.size-blbottoms { .size-guide__img { span { &#outside-leg { left: 14%; top: 22%; } &#inside-leg { bottom: 42%; right: 30%; } } } } &.size-shirts { .size-guide__img { span { &#centre-back { top: 50%; left: 44%; } &#arm-sleeve { left: 16%; top: 44%; } } } } &.size-shorts { .size-guide__img { span { &#outside-leg { left: 26%; top: 42%; } &#inside-leg { bottom: 30%; right: 42%; } } } } &.size-poncho { .size-guide__img { span { &#hood { top: 18%; right: 44%; } &#centre-back { bottom: 48%; left: 46%; } } } } &.size-salopettes { .size-guide__img { span { &#outside-leg { top: 46%; left: 34%; } &#inside-leg { bottom: 30%; right: 40%; } } } } &.size-jacket-halkon { .size-guide__img { span { &#back-seam { top: 44%; right: 48%; } &#left-inner-arm { left: 20%; top: 48%; } } } } &.size-jacket-velez { .size-guide__img { span { &#back-seam { bottom: 30%; right: 38%; } &#hood { right: 40%; top: 12%; } } } } &.size-fleece-bentu { .size-guide__img { span { &#back-seam { right: 46%; top: 44%; } &#inner-left-arm { left: 18%; bottom: 38%; } } } } &.size-tee-cambia { .size-guide__img { span { &#back-seam { right: 50%; top: 44%; } &#left-inner-arm { left: 18%; top: 36%; } } } } &.size-gilet { .size-guide__img { span { &#back-seam { right: 40%; top: 50%; } } } } &.size-jacket-windproof-velez { .size-guide__img { span { &#back-seam { bottom: 40%; right: 42%; } &#neck { top: 8%; right: 42%; } &#right-inside-arm { bottom: 30%; right: 20%; } } } } &.size-jacket-travel-halkon { .size-guide__img { span { &#back-seam { top: 44%; left: 44%; } &#left-inner-arm { left: 18%; top: 48%; } } } } &.size-jacket-velez-grid { .size-guide__img { span { &#back-seam { bottom: 32%; right: 44%; } &#hood { top: 16%; right: 44%; } &#inside-arm { left: 24%; bottom: 22%; } } } } &.size-jacket-alondra { .size-guide__img { span { &#back-seam { top: 46%; left: 48%; } &#left-inside-arm { bottom: 46%; left: 22%; } } } } &.size-microshorts { .size-guide__img { span { &#back-crotch { top: 42%; left: 46%; } &#outside-leg { left: 20%; top: 38%; } } } } &.size-boxers { .size-guide__img { span { &#back-crotch { left: 48%; top: 38%; } &#outside-leg { left: 28%; top: 20%; } &#inside-leg { bottom: 26%; right: 32%; } } } } } } } } .featured-product-wrapper { .featured__product-image { .featured__image-wrapper { .main-featured__image-wrapper { height: 100%; width: fit-content; position: relative; margin: auto; @media screen and (max-width: 768px){ height: -webkit-fill-available !important; img { height: -webkit-fill-available !important; } } } .featured__product-image-tools { .tool-content { text-align: left !important; } &.featured-jacket { .place-hood { position: absolute; top: 3%; left: 50%; transform: translate(-50%, 0px); } .place-armpit { position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); } .place-stomach { position: absolute; top: 60%; left: 70%; transform: translate(-50%, -50%); } .place-wrist { position: absolute; bottom: 10%; left: 10%; transform: translate(-50%, -50%); } .place-waist { position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, -50%); } } &.featured-legwear { .place-waist { position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%); } .place-hip { position: absolute; top: 10%; right: 0%; transform: translate(-50%, 0%); } .place-ankle { position: absolute; bottom: 0%; transform: translate(-50%, 0%); right: 15%; } .place-inside-leg { position: absolute; top: 50%; right: 30%; transform: translate(0%, -50%); } .place-outside-leg { position: absolute; top: 50%; left: 0%; transform: translate(0%, -50%); } } &.featured-tops { .place-armpit { position: absolute; top: 40%; left: 20%; transform: translate(0%, -50%); } .place-chest { position: absolute; top: 30%; left: 50%; transform: translate(0%, -50%); } .place-waist { position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, 0%); } .place-arm-sleeve { position: absolute; top: 10%; right: 20%; transform: translate(0%, 0%); } } } } } } // Home .home { .site-header { &--home { z-index: 9; background: #000; width: 150px; position: fixed !important; top: 0; height: 100vh; color: #fff; overflow-y: auto; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: inherit; @media screen and (max-width: $small) { display: block; width:100%; height: auto; top:0px; } .site-header__notice { display: none; } } } .wp-block-ntbs-interactive-hero .bem-content-wrapper { margin:0; .bem-content { @media screen and (max-width: $small) { margin: auto; } } } div#page { position: relative; width: calc(100% - 150px); right: -150px; @media screen and (max-width: $small) { width: 100%; right: 0px; } } .home-main-container { padding: 0; max-width: 100%; @media screen and (max-width: $small) { margin-top:65px; } .bem-ticker-text-seamless { @media screen and (max-width: $small) { position: fixed; } } } .wp-block-ntbs-image .bem-blocks-heading { opacity: 1; visibility: visible; @media (max-width: $small) { font-size: 2.5em; } @media (max-width: $xsmall) { font-size: 2em; } } .home-left { height: 100%; &__inner { display: flex; height: 100vh; padding: 20px 0; flex-direction: column; @media screen and (max-width: $small) { height:auto; padding:5px 10px; flex-wrap: wrap; flex-direction: row; min-height: 65px; } .home-left { &__menu { margin: 20px 0; padding: 0 15px; width: 100%; @media screen and (max-width: $small) { display: none; } } } .home-left { &__icons { margin-top: auto; padding: 0; margin-bottom: 0; width: 100%; @media screen and (max-width: $small) { width:auto; display: flex; flex-wrap: wrap; margin: 0; align-items: center; margin-left: auto; flex:none; flex-basis: 100%; justify-content: flex-end; } svg path { fill: #fff; } .home-left_analogy { margin: auto; display: none; @media screen and (max-width: $small) { margin:0 5px; } img { width: 100px; } } .home-left_newsletter { a { background: #cb9b70; display: block; text-align: center; font-weight: 700; padding: 10px; text-transform: uppercase; font-size: 12px; } } .site-header__search { margin:0 !important; .iws-search-container { margin: auto; display: block; border: 0; } } li { list-style-type: none; text-align: center; padding: 13px 0 0; @media screen and (max-width: $small) { margin:0 5px; padding:0; } a.cart-contents { path, line { stroke: #fff !important; } } svg { width: 3px; @media screen and (max-width: $small) { width: 30px !important; } } .site-header__counter { display: none; } img { width: 30px; margin: auto; display: block; @media screen and (max-width: $small) { width: 30px !important; } } .site-header__search { .iws-search-input-wrapper { background: transparent !important; border: 0; .iws-search-submit { background: transparent !important; @media screen and (max-width: $small) { right:-5px !important; } } .iws-search-icon { width: 30px !important; height: 30px !important; color: #fff !important; svg { display: none; } @media screen and (max-width: $small) { width: 30px !important; height: 30px !important; } } .iws-svg-icon:after { content: ''; background-image: url('wp-content/themes/paramo-child-theme/assets/images/icons/search-icon-white.svg'); display: block; position: relative; width: 34px; height: 30px; background-size: contain; background-repeat: no-repeat; } } } .site-header__account { a { margin: auto; width: auto; height: auto; } } } .mobile-nav { display: none; @media screen and (max-width: $small) { display: block; } span { @media screen and (max-width: $small) { background: #fff; } } } .iws-search-form { * { border-radius: 0 !important; } .iws-search-submit { img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(102%) contrast(103%); } } } .site-header__account { img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(102%) contrast(103%); } } .site-header__cart { img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(102%) contrast(103%); } } } } .home-left { &__logo { padding: 0 15px 20px; width: 100%; @media screen and (max-width: $small) { padding: 0; width: 60px; position:absolute; top: 50%; transform: translateY(-50%); } img { width: 80px; margin: auto; display: block; @media screen and (max-width: $small) { width: 100%; } } } &__list { padding: 0; margin: 0; @media screen and (max-width: $small) { display: flex; flex-wrap: wrap; justify-content: flex-end; } li { list-style-type: none; a { display: block; color: #fff; padding: 15px 10px; text-transform: uppercase; font-size: 12px; text-align: center; @media screen and (max-width: $small) { padding: 5px 10px; } } } } } } } .is-layout-grid { @media screen and (max-width: $small) { display: block; } } @media screen and (max-width: $small) { .wp-block-group { margin: 10px 0 !important; } } } // Home // Polylang .polylang-cta {cursor: pointer;} .polylang-selector { position: fixed; height: 100%; max-width: 450px; overflow: scroll; display: flex; width: 100%; top: 0; right: -500px; background: white; z-index: 99; box-shadow: 0px 0px 12px rgba(0, 0, 0, .5); padding: 30px; padding-top: 76px; flex-direction: column; transition: right .3s ease-in-out; select.site-header__language__select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; padding: 10px; color:#000; } &.active { right: 0; } .btn-close-filtering { line-height: 1; background: black; width: 30px; height: 30px; position: absolute; color: white; display: flex; justify-content: center; align-items: center; border-radius: 100px; transform: rotate(45deg); font-size: 31px; top: 30px; right: 30px; cursor: pointer; font-weight: 300; } .site-header__language__icon { display: none; } } .woocommerce { ul.products { .lmp_products_loading { display: none !important; } } } .main-container { .lmp_products_loading { > span { display: none !important; } } } .paramo-main-filter-wrapper { .btn-activate-filters { background: #000; color: #fff; border: 0; padding: 12px 15px; font-size: 16px; position: relative; width: 100%; max-width: none; border-radius: 0; font-weight: 600; font-family: Montserrat; margin-top: -10px; transform: none; left: 0; top: 0; height: auto; } }