/***********/ /* Desktop */ /***********/ @media only screen and (max-width: 1366px) { } /************************/ /* Desktop Small Laptop */ /************************/ @media only screen and (max-width: 1280px) { #main-menu .menu-desktop >li.mainmenu_item >a, #main-menu .menu-desktop >li.has_submenu >button, #main-menu .menu-desktop >li.mainmenu_button a{ font-size: 15px; font-size: .8333rem; line-height: 15px; line-height: .8333rem; font-weight: 500; } #main-menu .menu-desktop{ gap:16px; } #main-menu .menu-desktop >li.mainmenu_item.topbar_search{ right:194px; } } @media only screen and (max-width: 1200px) { } /**************************/ /* Desktop Smaller Laptop */ /**************************/ @media only screen and (max-width: 1120px) { .footer_row_wrapper #mc_embed_signup_scroll { display:block; } .footer_row_wrapper .mc-field-group { margin-bottom:20px;} .footer_row_inner.signup { align-items: start; } } /**********/ /* Tablet */ /**********/ @media only screen and (max-width: 992px) { #main-menu ul.menu-desktop li.mainmenu_button.mobile.shop a{ display: inline-flex; gap: 0px; justify-content: flex-start; } #main-menu ul.menu-desktop li.mainmenu_button.mobile.shop a:before{ content: " "; display: inline-block; background-image: url(svg/icon-shopping-bag.svg); background-repeat: no-repeat; background-size: contain; width:16px; height:20px; margin-right:10px; } header.simple_header_footer #main-menu .menu-desktop li.menu-item:not(.mainmenu_home), header.simple_header_footer .menu-mobileb-btn, header.simple_header_footer .menu-mobile-hamb{ display: none!important; } header.simple_header_footer #main-menu .menu-mobile{ background-color: transparent; } header.simple_header_footer li.mainmenu_home a{ margin-left: auto; margin-right: auto; } header.simple_header_footer #main-menu .menu-desktop{ } header.half_header_footer .menu-mobileb-btn a.campaign{ display: inline!important; } header.half_header_footer .menu-mobileb-btn a:not(.campaign){ display: none!important; } header.half_header_footer .menu-mobile-hamb{ display: none!important; } .social_bar h3{ display: none!important; } .social_bar_box{ display: flex; list-style: none; padding-inline-start: 0; width: 100%; justify-content: space-between; align-items: center; margin-top: 18px; } .social_bar_box img{ width:32px; height:32px; object-fit: contain; } .searchbox.active{ display: none !important; } li.topbar_search.mainmenu_item { display: none !important; } #main-menu .menu-desktop >li.mainmenu_item.mobile{ display: flex; } #main-menu .menu-desktop li.mainmenu_item:not(.topbar_search, .mainmenu_home, .mainmenu_button.button){ padding-bottom: 0px; margin-top: 26px; } #main-menu .menu-desktop li.mainmenu_item:not(.topbar_search, .mainmenu_home, .mainmenu_button.button):nth-child(2){ margin-top: 0px; } :root { /* VARS */ --header-height: 66px; } #main-menu .menu-desktop >li.mainmenu_item.topbar_search{ display:none; } #main-menu { margin-left: 0; margin-right: 0; padding-left: 18px; padding-right: 18px; } .mainmenu_item.mainmenu_home{ display:none!important } #main-menu .menu-desktop >li.mainmenu_item >a, #main-menu .menu-desktop >li.has_submenu >button, #main-menu .menu-desktop >li.mainmenu_button a{ font-size:1.333rem; line-height: 1.333rem; } #main-menu .menu-desktop >li.mainmenu_item.mobile_only >a{ color:#C1BFBB; font-size: 0.889rem; line-height: 0.889rem; } #main-menu .menu-desktop >li.mainmenu_item.large_space:not(.has_submenu):not(.mainmenu_home){ margin-bottom:44px; } #main-menu .menu-desktop >.mainmenu_item.button :not(.has_submenu):not(.mainmenu_home){ display: flex; justify-content: center; margin-bottom:0px; } #main-menu .menu-desktop >.mainmenu_item.mega_image:not(.has_submenu):not(.mainmenu_home){ margin: auto; margin-top:66px; margin-bottom:26px; width: 100%; } #main-menu .menu-desktop >.mainmenu_item.mobile_only{ display:flex; } #main-menu .menu-desktop >.mainmenu_item.social_media:not(.has_submenu):not(.mainmenu_home) { width: 33%; float: left; } #main-menu .menu-desktop >.mainmenu_item.button:not(.has_submenu):not(.mainmenu_home) { width: 100%; } #main-menu .menu-desktop li.mainmenu_item.mega_image{ display: block; } #main-menu .menu-desktop >li.mainmenu_item.social_media >a{ padding:0; height:30px; display: flex; flex-direction: column; justify-content: center; } #main-menu .menu-desktop >li.mainmenu_item.social_media >a img{ height:100%; } .mainmenu_item:after{ display:none!important; } .mobile_menu_open .menu-mobile{ background-color: var(--charcoal); } #main-menu .menu-desktop { display: flex; flex-direction: column; left:0; width: 100%; overflow:hidden; height: initial; margin-top:0; border-radius: 0 0 6px 6px; padding: 0px 18px 0px; margin-top:-6px; max-height: 0px; opacity: 0; transition: all 0.25s ease; gap:0; align-items: stretch; top:-32px; position: relative; } #main-menu .menu-desktop.expanded { height: initial; overflow-y: auto; background:var(--charcoal); top:0; padding: 26px 18px 26px; max-height: 1000px; opacity: 1; } #main-menu .menu-desktop > *{ opacity: 0; transition: all 0.1s ease; } #main-menu .menu-desktop.expanded > *{ opacity: 1; transition: all 0.1s ease; } #main-menu .menu-desktop:after, #main-menu .menu-desktop:before { content:""; height:0px; display: none; } #main-menu .menu-desktop li.mainmenu_item { height: 50px; } #main-menu .menu-desktop >li.has_submenu >button:after, #main-menu .menu-desktop >li.mainmenu_button a:after { top: -5px; } #main-menu .menu_main_519 >a { margin-left: 0; top: 40px; } #main-menu .menu-desktop >li.mainmenu_button.button a { margin-left: 0; margin-top: 26px; width: 100%; } /* .menu_main_out header.fl-page-header { transform:translateY(0px); } */ #main-menu .menu-mobile { display:flex; padding: 0 8px; margin: 0; margin-top:16px; list-style: none; align-items: center; height: 46px; align-items: center; position: relative; z-index: 2; background-color: var(--charcoal); border-radius: 6px; } #main-menu .menu-mobile >li { margin:0; display: flex; } #main-menu .menu-mobile .mainmenu_home { display: flex; flex-grow: 1; } .mainmenu_home a{ display: inline-block; background: none!important; } #main-menu .mainmenu_home >a img { max-height: 26px; padding:0; } #main-menu .menu-mobile .mobile_menu_toggle { background:transparent; border:0; border-radius:none; padding:0; height:28px; } #main-menu .menu-mobile .mobile_menu_toggle:after { content:""; background:url(svg/group-10837.svg) center center / cover no-repeat; width:28px; height:28px; background-repeat: no-repeat; background-size: contain; display:inline-block; position: relative; transition:all .25s ease; } #main-menu .menu-mobile .mobile_menu_toggle[aria-pressed="true"]:after { background:url(svg/group-10840.svg) center center / cover no-repeat; width:28px; height:28px; background-repeat: no-repeat; background-size: 15px; transform:rotate(180deg); margin: 0px; } #main-menu ul.menu-desktop {background:var(--black)} #main-menu ul.menu-desktop li { text-align:center !important; } #main-menu .menu-desktop .mainmenu_home {display:none} #main-menu ul.menu-desktop li.has_submenu >button, #main-menu ul.menu-desktop li.mainmenu_button a{ border-radius: 0; color: var(--cream); font-size: 20px; font-size: 1.11rem; line-height: 20px; line-height:1.11rem; text-align: center; padding: 0px; display:flex; width: 100%; justify-content: space-between; } #main-menu ul.menu-desktop li.has_submenu >button:after, #main-menu ul.menu-desktop li.has_submenu >button:hover:after { display:none; } #main-menu .sub-menu[data-depth='0'] { position: relative; width: 80%; margin-top: -50px; margin-left: auto; margin-right: auto; padding: 60px 0 20px; transition:initial; } #main-menu .has_submenu >button[aria-expanded="false"] ~ .sub-menu[data-depth='0'] { margin-top: 0; padding:0; } #main-menu .has_submenu >button[aria-expanded="false"] ~ .sub-menu[data-depth='0'] { visibility: visible; opacity: 1; transform: initial; display:none; transition:initial; padding: 20px 0 20px; } #main-menu .sub-menu[data-depth='0'] { margin-top: 0; padding: 20px 0 20px; } #main-menu .menu-desktop >li.has_submenu >button:before { right: -25px; transform-origin: 5px 9px; } #main-menu .mainmenu_cont { padding: 0; } #main-menu .smib_desc { margin: 0; padding: 0 0 20px;} #main-menu .sub-menu[data-depth='0'] >.mainmenu_item >h3 { position: relative; top:0; padding: 0 20px; margin-bottom:20px; } #main-menu #mega-menu .sub-menu[data-depth='0'] >.mainmenu_item { padding: 22px 0; } .submenu_infobox { padding: 20px; } #main-menu .mainmenu_item:not(:last-child) >ul.sub-menu[data-depth='1'] { padding: 0; } #main-menu .mainmenu_item >ul.sub-menu[data-depth='1'] {height: 100%;} #main-menu .mainmenu_item >ul.sub-menu[data-depth='1'] { padding:0} #main-menu .mainmenu_item >ul.sub-menu[data-depth='1'] >li { padding: 10px 20px; margin: 0; } #main-menu .mainmenu_icon { display: block; width: 100%; height: 55px; border:0; border-bottom: 1px solid #ddd; } #main-menu .menu-desktop .mainmenu_home { display:none; } #main-menu .menu-mobile-header .mainmenu_home >a:before { width: 40vw; height: 37px; position: absolute; transform: translateX(-20vw); } #main-menu .menu-mobile-header { grid-template-columns: 25vw 53vw 17vw; } #main-menu .menu-desktop >li.mainmenu_item >a, #main-menu .menu-desktop >li.has_submenu >button, #main-menu .menu-desktop >li.mainmenu_button a { padding: 0px 0; color: var(--cream); } #main-menu .menu-desktop li.mainmenu_item { height:initial; } /* #main-menu .has_submenu >button[aria-expanded="false"] ~ .sub-menu[data-depth='0'] { */ #main-menu #menu-mega-menu .sub-menu[data-depth='0'] { visibility: visible; opacity: 1; transform: initial; transition: initial; } #main-menu #menu-mega-menu .sub-menu[data-depth='0'] { padding-top: 22px; padding-bottom: 22px; padding-left: 10px; padding-right: 10px; top: 0; display: none; } #main-menu #menu-mega-menu .sub-menu[data-depth='0'] { padding-top:0 ; padding-bottom: 0; margin: 0; } #main-menu .menu-desktop >li.has_submenu >button[aria-expanded="true"] { color: var(--white); } .mega_image { width:240px; } body.mobile_menu_open {overflow:hidden} /* Quick access top bar */ #main-menu, .top-bar-nav { padding-left: 18px; padding-right: 18px; } ul#menu-quickaccess { justify-content: space-around; margin-top:20px; padding: 0; } ul#menu-quickaccess li a, ul#menu-quickaccess li button { padding: 12px; } ul#menu-quickaccess li:not(:last-child) a, ul#menu-quickaccess li:not(:last-child) button { border:0; } ul#menu-quickaccess >li:last-child a, ul#menu-quickaccess >li:last-child button { padding:12px; } /* Search Box */ .searchbox, .joinusbox { top: 67px; } .search_inner { padding: 16px 18px; } .search_form_wrapper >img { width: 20px;} .search_form_wrapper .search_button { font-size: 0.7rem; width: 80px; padding: 17px 0; } .search_button img{ object-fit: contain; } #searchform input[type=text].search_input { font-size: 1rem; width: 95%; } .search_close { font-size: 2rem; } .search_form_wrapper { grid-template-columns: 30px auto 75px 40px; } .menu-mobileb-btn a, .menu-mobileb-btn a:focus{ color:var(--charcoal)!important; background-color: var(--turquoise); padding: 8px 8px; border-radius: 6px; font-size: 0.667rem; line-height:1; font-weight: 600; font-family: var(--roc); text-decoration: none!important; margin-right:8px; background-image:none!important; } .search_form_wrapper.mobile{ max-width: unset!important; width:100%; gap:12px; } .mobile .search_input{ border-radius: 6px!important; background-color: white; padding: 12px 15px; line-height: 16px; line-height: .8889rem; font-size: 16px; font-size: .8889rem; font-family: var(--roc); font-weight: 400; color:var(--charcoal); } .mobile .search_input::placeholder{ color:var(--charcoal); opacity: 1; } .search_form_wrapper.mobile .search_button{ flex-basis: 40px; height: 40px; border-radius: 80px !important; background-color: var(--turquoise); display: flex; flex-direction: column; align-content: center; align-items: center; padding: 0; justify-content: center; } /**********/ /* Footer */ /**********/ .footer_row { gap: 50px; } footer { position:relative; } footer:before { height: 66px; background-size: 66px 66px; } .footer_row_wrapper.mainfooter { margin-left: 28px; margin-right: 28px; padding: 44px 0; } footer .footer_col1 {margin-bottom:36px} footer .footer_col2 {margin-bottom:36px;padding-right: 40px;} .footer_row_inner.row1 { padding-bottom: 36px;} .footer_row_inner.row2 { padding-top: 36px;} .footer_row_inner.row2 .footer_col1 img {width:198px} .footer_row_inner.row2 .footer_col3 img {width:130px;margin-top:16px;} .footer_col.col1{ flex: 3; } .footer_col.col2{ flex: 2; padding-left: 26px; } footer h3{ margin-bottom: 44px !important; } .social_networks{ gap: 26px 16px; } .footer_logo{ margin-top: 26px; margin-bottom: 16px; height: unset; } } /**********/ /* Mobile */ /**********/ @media only screen and (max-width: 768px) { /* Footer */ footer.simple_header_footer .footer_row_wrapper.mainfooter{ margin-left: 0px; margin-right: 0px; padding: 16px 18px; } footer.simple_header_footer .footer_col.col2{ flex-direction: column; gap:16px; } footer.simple_header_footer .footer_col.col2 .copyright{ flex-basis: unset; } footer.simple_header_footer .footer_col.col2 .footer_logo { height: 42px; width: auto; } .footer_row_wrapper.mainfooter{ margin-left: 18px; margin-right: 18px; padding: 36px 0 16px; } .footer_row { display: block; } .footer_row_wrapper { position: relative; padding:20px; } .footer_col:not(:last-child) { margin-bottom:0px; } .footer_row { padding-bottom: 0; } .social_networks .social_text_desc{ display:none!important; } .social_networks li{ border: none; padding-top:0; } .social_networks{ gap:28px; display:flex; margin-bottom:36px; margin-top:26px; justify-content: space-between; } .social_networks .footer_social_icon{ height:unset; display:block; padding-bottom:0; } .social_networks li{ display:inline-block; } .social_networks li img{ display:block; width:36px; height:36px; object-fit: contain; } .footer_col.col2 .maxwidth350{ max-width: unset; } .footer_logo{ display: inline-block; margin-bottom: 16px; margin-top:16px; } .footer_col.col2 ul{ display: flex; gap:16px; } .footer_col.col2 .footer_menu { display: inline-block; float: unset; width:100%; } .footer_col.col2 ul li { margin-bottom: 0; display: block; margin-top:10px; flex: 1; } footer h3{ margin-bottom: 0!important; } .footer_col.col2{ border-left: none; padding-left: 0px; } } /****************/ /* Mobile Small */ /****************/ @media only screen and (max-width: 430px) { /* #main-menu .menu-mobile-header { grid-template-columns: 90px auto 60px; } #main-menu .mainmenu_home >a { width: 124px; height: 34px; } #main-menu .menu-mobile-header .mainmenu_home >a { margin-left: 10px !important; } #main-menu .mainmenu_home >a:before { width: 124px; height: 31px; } */ .menu-mobileb-btn a, .menu-mobileb-btn a:focus{ font-size: 0.58rem; padding: 8px 8px; } }