/* ANIMATION */ html.fullscreen_opened #top-header, html.fullscreen_opened #bottom-header, html.fullscreen_opened #ticker { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .xp_menu_container { position: relative; z-index: 400; height: 38px; } @media only screen and (max-width: 736px) { .xp_menu_container { height: 0px; } .fullscreen_opened .xp_menu_container { position: fixed; top: 0px; } } .xp_menu { position: relative; overflow: hidden; z-index: 201; background: #f6f6f6; height: 38px; line-height: 35px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .xp_menu.fixed, .fullscreen_opened .xp_menu { position: fixed; z-index: 206; top: 0px; width: 100%; } .xp_menu.fixed .menu_buttons .menu_social, .fullscreen_opened .xp_menu .menu_buttons .menu_social { padding-left: 0px; padding-right: 0px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } @media only screen and (max-width: 736px) { .xp_menu.fixed .menu_buttons .menu_social, .fullscreen_opened .xp_menu .menu_buttons .menu_social { display: none; } } .xp_menu.fixed .menu_logo, .fullscreen_opened .xp_menu .menu_logo { margin-left: 0px; } .xp_menu.fixed .menu_logo span, .fullscreen_opened .xp_menu .menu_logo span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } @media only screen and (max-width: 736px) { .xp_menu { position: fixed; width: 100%; top: 0px; z-index: 203; } } .xp_menu .menu_buttons, .xp_menu .menu_logo, .xp_menu .menu_social, .xp_menu .menu_open_menu, .xp_menu .menu_close, .xp_menu .menu_shop { cursor: pointer; text-transform: uppercase; vertical-align: top; display: inline-block; height: 36px; font-family: "hurme-reegular","Helvetica Neue","Helvetica",Arial,Segoe UI Symbol,sans-serif; } .xp_menu .menu_buttons_container { position: relative; top: 0px; float: right; font-size: 0px; height: 100%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 990px) { .xp_menu .menu_buttons_container { position: absolute; top: 0px; right: 0px; background: #f6f6f6; } } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons_container { background: #f6f6f6; font-size: 0px; float: none; position: absolute; right: 0px; } } .fullscreen_opened .xp_menu .menu_buttons_container, .menu_opened .xp_menu .menu_buttons_container { top: -101%; } .xp_menu .menu_buttons_container .menu_buttons { display: block; text-align: right; overflow: hidden; } .xp_menu .menu_buttons_container .menu_buttons div { padding-left: 25px; padding-right: 15px; text-align: left; border-left: 1px solid #e8e8e8; height: 101%; } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons_container .menu_buttons div { padding-left: 0px; padding-right: 0px; border-left: 0px; } } .xp_menu .menu_buttons_container .menu_buttons div span { width: 100%; vertical-align: top; display: inline-block; padding-right: 30px; font-size: 13px; letter-spacing: 0.05em; } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons_container .menu_buttons div span { background-position: center center; font-size: 12px; text-align: left; width: 20px; font-size: 0px; } } .xp_menu .menu_buttons_container div.menu_social { background: url(../img/menu/social.png) 12px center no-repeat; background-size: auto 55%; padding: 0px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .xp_menu .menu_buttons_container div.menu_social div { border-left: 0px; } .desktop .xp_menu .menu_buttons_container div.menu_social:hover, .xp_menu .menu_buttons_container div.menu_social.social_opened, .tablet .xp_menu .menu_buttons_container div.menu_social { padding-left: 0px; padding-right: 0px; } .desktop .xp_menu .menu_buttons_container div.menu_social:hover .menu-social-icons, .xp_menu .menu_buttons_container div.menu_social.social_opened .menu-social-icons, .tablet .xp_menu .menu_buttons_container div.menu_social .menu-social-icons { width: 132px; background: rgba(246, 246, 246, 0.7); } .desktop .xp_menu .menu_buttons_container div.menu_social:hover .menu-social, .xp_menu .menu_buttons_container div.menu_social.social_opened .menu-social, .tablet .xp_menu .menu_buttons_container div.menu_social .menu-social { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=70); -webkit-opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } .xp_menu .menu_buttons_container div.menu_social .menu-social-icons { width: 40px; padding: 0px; padding-left: 40px; overflow: hidden; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .xp_menu .menu_buttons_container div.menu_social .menu-social { width: 45px; display: inline-block; vertical-align: top; height: 100%; padding: 0px; background-repeat: no-repeat; background-position: center center; background-size: auto 55%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .xp_menu .menu_buttons_container div.menu_social .menu-social a { display: block; height: 100%; } .desktop .xp_menu .menu_buttons_container div.menu_social .menu-social:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .xp_menu .menu_buttons_container div.menu_social .menu-social.facebook { background-image: url(../img/menu/facebook.png); } .xp_menu .menu_buttons_container div.menu_social .menu-social.twitter { background-image: url(../img/menu/twitter.png); } .xp_menu .menu_buttons_container div.menu_social .menu-social.instagram { background-image: url(../img/menu/instagram.png); } .xp_menu .menu_buttons .menu_open_menu { position: relative; top: -1px; padding: 0px 10px 0px 20px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons .menu_open_menu { display: none !important; } } @media only screen and (max-width: 736px) { .resp-true .xp_menu .menu_buttons .menu_open_menu { display: none !important; } } .xp_menu .menu_buttons .menu_open_menu span { height: 36px; line-height: 37px; font-size: 13px; letter-spacing: 0.05em; background: url("../img/menu/open.png") right center no-repeat; background-position: calc(100% - 5px) center; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; color: #3d3d3d; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 736px), only screen and (min--moz-device-pixel-ratio: 1.5) and (max-width: 736px), only screen and (-o-min-device-pixel-ratio: 3 / 2) and (max-width: 736px), only screen and (min-device-pixel-ratio: 1.5) and (max-width: 736px), only screen and (min-resolution: 192dpi) and (max-width: 736px) { .xp_menu .menu_buttons .menu_open_menu span { background-image: url("../img/menu/open_mobile@2.png"); background-size: 25px auto; } } .desktop .xp_menu .menu_buttons .menu_open_menu:hover { background-color: #e0e0e0; } .desktop .xp_menu .menu_buttons .menu_open_menu:hover span { color: #000; } .xp_menu .menu_buttons div.menu_close { position: relative; top: -1px; height: 36px; line-height: 36px; padding-right: 8px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .desktop .xp_menu .menu_buttons div.menu_close:hover { background: #e0e0e0; } .xp_menu .menu_buttons div.menu_close .menu_close-arrow { display: none; } .xp_menu .menu_buttons div.menu_close span { background: url("../img/menu/close.png") right center no-repeat; background-position: calc(100% - 3px) center; color: #3d3d3d; padding-right: 28px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; height: 36px; line-height: 37px; font-size: 13px; letter-spacing: 0.05em; } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons div.menu_close span { font-size: 0px; } } .xp_menu .menu_buttons div.menu_shop { display: inline-block; overflow: hidden; width: auto; padding: 0px; background: black; white-space: nowrap; } .xp_menu .menu_buttons div.menu_shop span { padding: 0px; height: 100%; width: 100%; } .xp_menu .menu_buttons div.menu_shop.blockvisible { display: inline-block; } .xp_menu .menu_buttons div.menu_shop a { padding: 0px 30px; color: white; display: inline-block; font-size: 13px; letter-spacing: 0.05em; height: 100%; line-height: 36px; vertical-align: top; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 736px) { .xp_menu .menu_buttons div.menu_shop a { font-size: 12px; padding: 0px 17px; } } .desktop .xp_menu .menu_buttons div.menu_shop a:hover { background: white; color: black; } .xp_menu .menu_buttons div.menu_shop a span { width: auto; padding: 0px; } .xp_menu .menu_logo { vertical-align: top; margin-left: -50px; height: 38px; border-right: 1px solid #e8e8e8; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; } @media only screen and (max-width: 736px) { .xp_menu .menu_logo { margin-left: 0px; } } .xp_menu .menu_logo span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; display: inline-block; width: 46px; height: 35px; background: url(../img/menu/logo@2.png) center center no-repeat; background-size: auto 44%; -webkit-transition: all 0.5s ease 0.8s; -moz-transition: all 0.5s ease 0.8s; -o-transition: all 0.5s ease 0.8s; transition: all 0.5s ease 0.8s; } @media only screen and (max-width: 736px) { .xp_menu .menu_logo span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } } .desktop .xp_menu .menu_logo:hover { background-color: #e5e5e5; } .xp_menu .menu_title, .xp_menu .menu_title_mobile { position: relative; top: -1px; display: inline-block; text-transform: uppercase; display: inline-block; font-family: "hurme-regular","Helvetica Neue","Helvetica",Arial,Segoe UI Symbol,sans-serif; letter-spacing: 0.03em; font-size: 16px; letter-spacing: 0.05em; padding-left: 6px; line-height: 100%; white-space: nowrap; vertical-align: top; line-height: 36px; color: #000; } @media only screen and (orientation: portrait) and (max-width: 736px) { .xp_menu .menu_title, .xp_menu .menu_title_mobile { padding-left: 4px; font-size: 12px; height: 20px; margin-top: 0px; vertical-align: top; } } .xp_menu .menu_title h1, .xp_menu .menu_title_mobile h1 { font: inherit; letter-spacing: inherit; color: inherit; margin: inherit; padding: inherit; } @media only screen and (max-width: 736px) { .xp_menu .menu_title, .xp_menu .menu_title_mobile { display: none; } } .xp_menu .menu_title_mobile { display: none; } @media only screen and (max-width: 736px) { .xp_menu .menu_title_mobile { display: inline-block; } } .fullscreen_menu { display: none; position: fixed; z-index: 204; background-color: white; background: rgba(0, 0, 0, 0.95); left: 0px; width: 100%; top: 0px; bottom: 0px; padding-bottom: 20px; text-align: center; text-transform: uppercase; overflow: hidden; } @media only screen and (max-width: 736px) { .fullscreen_menu { position: fixed; } } .fullscreen_menu.visible { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .fullscreen_menu .fullscreen_menu-container { position: fixed; display: table; width: 100%; height: 100%; position: relative; top: 0px; margin: auto; } .fullscreen_menu .fullscreen_menu-spacer { width: 35px; margin: auto; height: 1px; background: #404040; } .fullscreen_menu .fullscreen_menu-items { display: table-cell; vertical-align: middle; margin-top: -40px; } .fullscreen_menu .fullscreen_menu-item { line-height: 35px; line-height: 9vh; } .fullscreen_menu .fullscreen_menu-item a { color: #626262; font-size: 20px; letter-spacing: 0.1em; display: block; text-align: center; } .desktop .fullscreen_menu .fullscreen_menu-item a:hover { color: #ccc; text-decoration: none; } .fullscreen_menu .fullscreen_menu-item.selected a span { /*font-weight:bold;*/ color: #ccc; } /* ANIMATION */ /*@import 'gallery.scss';*/ /*@import 'video.scss';*/ body { min-width: 0px; } #mini-site-category-landing .mini-site-slot { margin-top: 0px; } #footer-container { position: relative; z-index: 100; background: white; } html.zoom_opened #footer-container { display: none; } @media only screen and (max-width: 736px) { html.zoom_opened body { height: 100%; overflow: hidden; } html.zoom_opened body .slide_landing { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; pointer-events: none; } html.zoom_opened body .top-header-wrapper { display: none !important; } } .category-landing-main { top: 0px; } .mini_site_container { position: relative; text-align: left; min-height: 300px; font-size: 13px; color: #000; letter-spacing: 0.05em; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; } @media only screen and (max-width: 736px) { .mini_site_container { padding-bottom: 50px; } } .mini_site_container.visible { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .slides_container { position: relative; overflow: hidden; } .mini_site_container * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline: none; } .mini_site_container .button-cta { display: inline-block; background: transparent; text-transform: uppercase; padding: 10px 20px 10px 20px; font-size: 13px; line-height: 13px; border: 1px solid black; min-width: 200px; margin: 15px auto; letter-spacing: 0.10em; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; color: black; } @media only screen and (max-width: 736px) { .mini_site_container .button-cta { min-width: 100px; padding: 5px 10px; font-size: 11px; } } .desktop .mini_site_container .button-cta:hover { background: black; color: white; } .survival_valign { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* ANIMATION */ .mini_site_container .survival_main { position: relative; } .mini_site_container .survival_header { position: relative; height: 220px; text-align: center; text-transform: uppercase; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; letter-spacing: 0.15em; color: black; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header { height: 180px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_header { height: 200px; margin-bottom: 0px; } } .mini_site_container .survival_header li { position: relative; display: inline-block; vertical-align: top; } .mini_site_container .survival_header li .button-cta { padding: 7px 20px; margin: 15px 8px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_header li .button-cta { padding: 4px 20px; margin: 15px 4px; } } .mini_site_container .survival_header li > a:before { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); } .desktop .mini_site_container .survival_header li > a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .desktop .mini_site_container .survival_header li > a:hover .survival_header-menu div, .desktop .mini_site_container .survival_header li > a:hover .survival_header-description { color: white; } .mini_site_container .survival_header li .selected { height: 100%; } .mini_site_container .survival_header li .selected:after { content: ''; position: absolute; z-index: 10; bottom: -6px; left: 0px; width: 100%; height: 7px; content: ''; background: url(../img/landing/tick_menu2.png) center bottom no-repeat; background-size: auto 100%; } .mini_site_container .survival_header li .selected:before { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); } .mini_site_container .survival_header li .selected .survival_header-menu div { padding: 0px 8px; line-height: 1.5em; text-decoration: underline; } .mini_site_container .survival_header li .selected .survival_header-menu:after { position: absolute; bottom: -8px; left: 0px; width: 100%; height: 10px; content: ''; background: url(../img/landing/tick_menu.png) center bottom no-repeat; background-size: auto 100%; } .mini_site_container .survival_header li .selected .survival_header-menu:after { content: ''; } .mini_site_container .survival_header li > a { -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header li > a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=70); -webkit-opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } } .mini_site_container .survival_header.fixed .survival_header-fix { position: fixed; top: 37px; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header.fixed .survival_header-fix { position: absolute; top: 0px; } } .mini_site_container .survival_header .survival_valign { top: 43.5%; width: 90%; } .mini_site_container .survival_header-fix { width: 100%; height: 219px; background: url(../img/landing/background.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header-fix { height: 179px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_header-fix { height: 199px; } } .mini_site_container .survival_terms { position: absolute; bottom: 31px; right: 25px; left: 25px; text-align: center; text-transform: none; font-size: 12px; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_terms { bottom: 20px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_terms { font-size: 10px; bottom: 17px; left: 5px; right: 5px; } } .mini_site_container .survival_terms a { font-size: 11px; letter-spacing: 0.10em; color: #555; text-decoration: underline; } @media only screen and (max-width: 736px) { .mini_site_container .survival_terms a { font-size: 11px; } } .desktop .mini_site_container .survival_terms a:hover { text-decoration: none; } .mini_site_container .survival_title h1 { color: #f82363; font-size: 16px; padding: 0px 10px; margin-bottom: 3px; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .mini_site_container .survival_title h1 { font-size: 14px; letter-spacing: 0.05em; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_title h1 { font-size: 12px; } } .mini_site_container .survival_subtitle h2 { color: inherit; font-size: 26px; padding: 0px 10px; font-family: "hurme-bold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; letter-spacing: 0.05em; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_subtitle h2 { font-size: 24px; } } @media only screen and (max-width: 1024px) and (orientation: portrait) { .mini_site_container .survival_subtitle h2 { font-size: 19px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_subtitle h2 { font-size: 13px; letter-spacing: 0.05em; } } .mini_site_container .survival_container { position: relative; width: 100%; height: 100%; width: 60%; max-width: 958px; margin: auto; } @media only screen and (max-width: 736px) { .mini_site_container .survival_container { max-width: 100%; width: auto; margin: 0px 10px; top: 10%; height: 80%; } } .mini_site_container .survival_container:before { content: ''; background: rgba(0, 0, 0, 0.85); position: absolute; top: 0px; bottom: 0px; left: 0%; width: 100%; margin: auto; } .mini_site_container .survival_items-fix { position: relative; z-index: 3; width: 100%; height: 100%; background: #eee; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px); } .mini_site_container .survival_items-fix.fixed { position: fixed; z-index: 5; top: 37px; height: auto; } .mini_site_container .survival_items-container { position: relative; max-width: 1600px; height: 100%; margin: auto; } .mini_site_container .survival_items-container .survival_valign { width: 100%; } .mini_site_container .survival_items { position: relative; background: #eee; height: 30vh; } .mini_site_container .survival_items_gototop { cursor: pointer; position: absolute; top: 0px; right: 0px; width: 8%; height: 100%; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .mini_site_container .survival_items_gototop { display: none; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_items_gototop { display: none; } } .mini_site_container .survival_items_gototop:after { content: ''; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; pointer-events: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px; background: url(../img/landing/top.png) center center no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } .mini_site_container .survival_items_gototop.displayed:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; pointer-events: all; } .desktop .mini_site_container .survival_items_gototop.displayed:hover:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .survival_item { position: relative; display: inline-block; vertical-align: top; width: 20%; font-size: 20px; text-align: center; padding: 20px 10px 20px 10px; border-left: 1px solid #e0e0e0; -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .mini_site_container .survival_item { width: 25%; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_item { padding: 10px 5px 10px 5px; } .mini_site_container .survival_item.survival_gototop .survival_item-bottombar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .mini_site_container .survival_item.survival_gototop .survival_item-removemobile { color: #eee !important; pointer-events: none !important; } } .mini_site_container .survival_item:last-of-type, .mini_site_container .survival_item.survival_gototop { border-right: 1px solid #e0e0e0; } .mini_site_container .survival_item.survival_clickable { cursor: pointer; } .desktop .mini_site_container .survival_item.survival_clickable.hovered .survival_item-title { position: relative; } .desktop .mini_site_container .survival_item.survival_clickable.hovered .survival_item-title:before { width: 100%; } .desktop .mini_site_container .survival_item.survival_clickable.hovered .survival_item-imagecontainer { background-color: white; } .desktop .mini_site_container .survival_item.survival_clickable.hovered:not(.survival_empty) .survival_item-image { background-color: white; } .desktop .mini_site_container .survival_item.survival_clickable.hovered:not(.survival_empty) .survival_item-image span, .desktop .mini_site_container .survival_item.survival_clickable.hovered:not(.survival_empty) .survival_item-image:after { background-color: rgba(255, 255, 255, 0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .survival_items-titlemobile { position: absolute; z-index: 3; background: #eee; top: -50px; left: 0%; width: 100%; display: none; text-align: center; text-transform: uppercase; font-size: 13px; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; letter-spacing: 0.05em; padding: 13px 0px; height: 50px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } @media only screen and (max-width: 736px) { .mini_site_container .survival_items-titlemobile { display: none; } .mini_site_container .survival_items-titlemobile.minimalbar { pointer-events: none; } } .mini_site_container .survival_items_top { text-align: center; position: relative; } .mini_site_container .survival_items_top .survival_tick { position: absolute; bottom: 0px; left: 0%; width: 100%; height: 20px; overflow: hidden; } @media only screen and (max-width: 736px) { .mini_site_container .survival_items_top .survival_tick { height: 10px; } } .mini_site_container .survival_items_top .survival_tick:after { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; content: ''; background: url(../img/landing/tick.png) center bottom no-repeat; background-size: auto 100%; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .mini_site_container .survival_items_top.minimalbar .survival_item.selected { background: #e5e5e5; } .mini_site_container .survival_items_top.minimalbar .survival_item .survival_tick:after { -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .mini_site_container .survival_items_top.minimalbar .survival_item.selected .survival_tick:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .mini_site_container .survival_items_bottom { text-align: center; position: relative; overflow: hidden; height: 15vh; } .mini_site_container .survival_items_bottom ul { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mini_site_container .survival_items_bottom .survival_item { position: relative; padding: 0px 10px 0px 10px; height: 100%; } @media only screen and (max-width: 736px) { .mini_site_container .survival_items_bottom .survival_item { padding: 0px; } } .mini_site_container .survival_items_bottom .survival_item.middle:before, .mini_site_container .survival_items_bottom .survival_item.last:before { position: absolute; z-index: 3; top: calc(50% - 15px); left: 0%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); content: ''; width: 50px; height: 50px; background: url(../img/landing/plus.png) center center no-repeat; background-size: 17px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_items_bottom .survival_item.middle:before, .mini_site_container .survival_items_bottom .survival_item.last:before { top: 28.5%; top: calc(50% - 44px); } } .mini_site_container .survival_items_bottom .survival_item.last:before { background-image: url(../img/landing/egal.png); } .mini_site_container .survival_item.first { margin-left: 0%; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .mini_site_container .survival_item.first { margin-left: 0%; } } .mini_site_container .survival-scrolltop { position: absolute; top: 0px; right: 0px; width: 10%; } .mini_site_container .survival_item-imagecontainer { background: #fff; -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; overflow: hidden; height: calc(100% - 34px); } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-imagecontainer { left: 0px; right: 0px; height: calc(100% - 90px); } } .mini_site_container .survival_item-imagecontainer.default_product_image { overflow: hidden; background-color: #f3f3f3; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-imagecontainer.default_product_image { background: #fff; } } .mini_site_container .survival_item-imagecontainer.default_product_image .survival_item-image span, .mini_site_container .survival_item-imagecontainer.default_product_image .survival_item-image:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .survival_item-imagecontainer.hidden_effect .survival_item-image { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: translateY(-50%) scale(1.1); -moz-transform: translateY(-50%) scale(1.1); -o-transform: translateY(-50%) scale(1.1); -ms-transform: translateY(-50%) scale(1.1); transform: translateY(-50%) scale(1.1); } .mini_site_container .survival_item-imagecontainer.notransition .survival_item-image { -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; } .mini_site_container .survival_item-image { position: relative; top: 50%; margin: 0px auto 0px auto; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center center; background-repeat: no-repeat; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-transform: translateY(-50%) scale(1); -moz-transform: translateY(-50%) scale(1); -o-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .survival_item-image span, .mini_site_container .survival_item-image:after { content: ''; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background: transparent center center no-repeat; background-size: 35px; -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-image span, .mini_site_container .survival_item-image:after { background-color: #fff; background-size: 26px; } } .mini_site_container .survival_item-image span { z-index: 10; } .products_loading .mini_site_container .survival_item-image span, .products_loading .mini_site_container .survival_item-image:after { background: url(../img/loading.gif) center center no-repeat !important; background-size: auto 22px !important; } .mini_site_container .survival_item-image.no_selection { background-color: #f3f3f3; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-image.no_selection { background-color: #fff; } } .mini_site_container .survival_item-image .survival_valign { font-size: 40px; color: #aaa; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; letter-spacing: 0.05em; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_item-image .survival_valign { font-size: 44px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-image .survival_valign { font-size: 19px; } } .mini_site_container .survival_item-image .survival_valign .real_total { display: none; } .mini_site_container .survival_item-image .survival_valign.completed { color: #000; } .mini_site_container .survival_item-image .survival_valign.completed .real_total { display: block; color: #aaa; position: relative; font-size: 20px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-image .survival_valign.completed .real_total { font-size: 11px; } } .mini_site_container .survival_item-image .survival_valign.completed .real_total:before { content: ''; display: block; position: absolute; top: 50%; width: 100px; left: 50%; height: 1px; background: black; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-image .survival_valign.completed .real_total:before { width: 70%; } } .mini_site_container .survival_item-num { font-size: 18px; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; height: 24px; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_item-num { font-size: 16px; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-num { font-size: 11px; letter-spacing: 0.05em; line-height: 12px; padding: 4px 0px; height: auto; } } .mini_site_container .survival_item-num.filled { font-size: 0px; background: url(../img/landing/check.png) center center no-repeat; background-size: auto 100%; } .mini_site_container .survival_item-title, .mini_site_container .survival_remove { font-size: 12px; display: inline-block; vertical-align: top; text-transform: uppercase; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_item-title, .mini_site_container .survival_remove { font-size: 10px; letter-spacing: 0.05em; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-title, .mini_site_container .survival_remove { display: none; } } .mini_site_container .survival_empty.survival_clickable .survival_item-title { position: relative; } .mini_site_container .survival_empty.survival_clickable .survival_item-title:before { content: ''; display: block; position: absolute; bottom: -3px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; width: 0%; height: 1px; background: black; } .mini_site_container .survival_empty .survival_remove { display: none; } .mini_site_container .survival_remove { color: #aaa; text-decoration: none; } .desktop .mini_site_container .survival_remove:hover { text-decoration: underline; } .mini_site_container .survival_remove:before { content: ''; height: 1.2em; background: #aaa; width: 1px; display: inline-block; margin-right: 0.6em; vertical-align: middle; } .mini_site_container .survival_item-data { position: absolute; left: 20px; right: 20px; overflow: hidden; font-size: 13px; padding: 10px 0px; line-height: 14px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data { left: 0px; right: 0px; font-size: 10px; letter-spacing: 0.05em; line-height: 1em; padding: 0px; } } .mini_site_container .survival_item-data.survival_hidden { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data.survival_hidden { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .mini_site_container .survival_item-data.survival_hidden .survival_item-removemobile { color: #cfcfcf; pointer-events: none; } } .mini_site_container .survival_item-data .survival_item-price { float: left; } .mini_site_container .survival_item-data .survival_item-price span { display: inline-block; text-decoration: line-through; padding: 0px 3px; margin-right: 5px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data .survival_item-price { display: block; line-height: 15px; float: none; } } .mini_site_container .survival_item-data .survival_item-size { float: right; } .mini_site_container .survival_item-data .survival_item-size span { display: inline-block; padding: 0px 3px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data .survival_item-size { float: none; display: block; line-height: 13px; } .mini_site_container .survival_item-data .survival_item-size span { display: inline-block; font-size: 9px; font-weight: bold; } .mini_site_container .survival_item-data .survival_item-size span.item-size-text { display: none; } } .mini_site_container .survival_item-data .survival_item-removemobile { display: none; } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data .survival_item-removemobile { clear: both; display: block; background: #f3f3f3; text-transform: uppercase; font-size: 10px; color: #555; letter-spacing: 0.05em; padding: 15px 0px 15px 0px; background: #f3f3f3; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_item-data .survival_item-bottombar { position: relative; text-align: center; height: 50px; line-height: 50px; padding: 0px 2px; } .mini_site_container .survival_item-data .survival_item-bottombar .survival_item-bottombar-valign { position: absolute; top: 57%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } } .mini_site_container .survival_total { clear: both; position: relative; background: white; height: 70px; line-height: 70px; text-align: right; padding-right: 20px; border-bottom: 1px solid #e0e0e0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; } @media only screen and (max-width: 736px) { .mini_site_container .survival_total { padding: 10px 0px; height: auto; line-height: 25px; text-align: center; } } .mini_site_container .survival_total div { -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; } .mini_site_container .survival_total.disabled div { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=20); -webkit-opacity: 0.2; -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; } .mini_site_container .survival_total.disabled .survival_total-button button { color: #aaa; } .mini_site_container .survival_total-value { display: inline-block; vertical-align: top; color: #000; font-size: 17px; letter-spacing: 0.15em; padding-right: 10px; } @media only screen and (max-width: 736px) { .mini_site_container .survival_total-value { font-size: 13px; display: block; } } .mini_site_container .survival_total-button { display: inline-block; vertical-align: top; } @media only screen and (max-width: 736px) { .mini_site_container .survival_total-button { display: block; margin: 1px 20px 10px 20px; } } .mini_site_container .survival_total-button button { margin: 0px; background: #000; color: white; border-color: #000; } @media only screen and (max-width: 736px) { .mini_site_container .survival_total-button button { display: block; padding: 9px 10px 10px 10px; width: 100%; } } .desktop .mini_site_container .survival_total-button button:hover { background: white; color: black; } .mini_site_container .survival_header { font-size: 0px; } .mini_site_container .survival_header ul { display: block; height: 100%; max-width: 1600px; margin: auto; } .mini_site_container .survival_header li { display: inline-block; height: 100%; vertical-align: top; width: 50%; text-align: center; text-transform: uppercase; } .mini_site_container .survival_header li:first-of-type { border-right: 1px solid rgba(255, 255, 255, 0.3); } .mini_site_container .survival_header li a { display: block; height: 100%; } .mini_site_container .survival_header-menubar { position: absolute; width: 100%; top: 0px; height: 55px; background: #323232; } .mini_site_container .survival_header-menu { position: relative; height: 55px; line-height: 25px; background: #323232; color: white; font-size: 20px; letter-spacing: 0.10em; } @media only screen and (max-width: 736px) { .mini_site_container .survival_header-menu { font-size: 12px; } } .mini_site_container .survival_header-content { position: relative; height: calc(100% - 65px); } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header-content { height: calc(100% - 71px); } } .mini_site_container .survival_header-image { margin-top: 2px; height: 26px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=60); -webkit-opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header-image { display: none; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_header-image { display: none; } } .mini_site_container .survival_header-image img { height: 100%; } .mini_site_container .survival_header-image_portrait { display: none; width: 80%; height: auto; margin: 13px auto 0px auto; } .mini_site_container .survival_header-image_portrait img { width: 100%; height: auto; } @media only screen and (orientation: portrait) and (max-width: 736px) { .mini_site_container .survival_header-image_portrait { display: none; } } .mini_site_container .survival_header-description { color: #fff; font-size: 15px; padding: 0px 15px; letter-spacing: 0.05em; padding-bottom: 7px; } @media only screen and (max-width: 1024px) { .mini_site_container .survival_header-description { max-width: 350px; margin: auto; } } @media only screen and (max-width: 736px) { .mini_site_container .survival_header-description { max-width: 150px; margin: auto; padding: 0px 7px; font-size: 11px; } } .terms_content { width: 90%; margin: auto; max-width: 800px; padding: 50px; box-sizing: border-box; } @media only screen and (max-width: 736px) { .terms_content { padding: 50px 10px; } } .terms_content .terms_content-title { font-size: 20px; padding: 0px 0px 30px 0px; } .terms_content .terms_content-content { font-size: 12px; padding-bottom: 30px; } /* ANIMATION */ .slide_shop { position: relative; z-index: 3; background: white; } .slide_shop .shop_title { text-align: center; padding: 100px 0px 30px 0px; text-transform: uppercase; display: none; } @media only screen and (max-width: 736px) { .slide_shop .shop_title { padding-top: 50px; } } .slide_shop .shop_loading { height: 100px; background: url(../img/loading.gif) center center no-repeat; background-size: auto 30px; } .slide_shop h2 { font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 20px; } @media only screen and (max-width: 736px) { .slide_shop h2 { padding-top: 15px; } } .slide_shop h3 { font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 16px; margin: 0px; padding: 10px 0px 0px 0px; } .shop_list { position: relative; max-width: 1350px; padding-top: 90px; padding-bottom: 60px; margin: auto; text-align: left; } @media only screen and (max-width: 736px) { .shop_list { padding-top: 90px; padding-bottom: 50px; } } p.no_products { font-size: 15px; text-align: center; margin-top: 10px; } .shop_item.shop_item-template { display: none; } .shop_item { display: inline-block; cursor: pointer; width: 25%; max-width: 325px; vertical-align: top; font-size: 13px; } @media only screen and (max-width: 1024px) { .shop_item { width: 33.3333%; } } @media only screen and (max-width: 736px) { .shop_item { width: 50%; } } @media only screen and (orientation: landscape) and (max-width: 736px) { .shop_item { width: 33.33333%; } } .desktop .shop_item:hover .shop_item-content { border: 1px solid #dadada; } .desktop .shop_item:hover .shop_item-selector { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .shop_item.selected { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } .shop_item.selected .shop_item-content { border: 1px solid #dadada; } .shop_item-content { border: 1px solid #fff; padding: 5px 10px 15px 10px; margin: 5px 20px 30px 20px; } @media only screen and (max-width: 1024px) { .shop_item-content { margin: 5px 10px 30px 10px; } } @media only screen and (max-width: 736px) { .shop_item-content { margin: 5px 5px 20px 5px; } } .shop_item-image { margin-bottom: 15px; } @media only screen and (max-width: 1024px) { .shop_item-image { margin-bottom: 0px; } } .shop_item-image img { width: 100%; } .shop_item-selector { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; margin-top: -10px; } @media only screen and (max-width: 1024px) { .shop_item-selector { display: none; } } .shop_item-selector .shop_item-sizecontainer { width: 100%; margin-bottom: 8px; } .shop_item-selector .shop_item-size, .shop_item-selector .shop_item-button { padding: 5px 10px; height: 30px; text-transform: uppercase; font-size: 11px; background: white; line-height: 20px; } .shop_item-selector .shop_item-size { float: left; width: 40%; } .shop_item-selector .shop_item-button { width: 100%; } .shop_item-name { font-size: 13px; text-transform: capitalize; color: #333; letter-spacing: 1px; line-height: 16px; border-top: 1px solid #eee; margin: 0px 15px 0px 15px; padding: 10px 0px; height: 45px; } @media only screen and (max-width: 736px) { .shop_item-name { margin: 0px 10px 0px 10px; height: auto; min-height: 45px; } } .shop_item-price { color: #b3b3b3; font-size: 14px; padding: 0px 0px; margin: 0px 15px 0px 15px; } @media only screen and (max-width: 736px) { .shop_item-price { margin: 0px 10px 0px 10px; } } .shop_zooms { position: relative; height: 0px; margin-bottom: 0px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .shop_zooms.notransition { -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; } @media only screen and (max-width: 736px) { .shop_zooms { position: fixed; z-index: 10; top: 37px; bottom: 0px; width: 100%; background: white; } } .shop_zooms .shop_zoom-footermobile, .shop_zooms .shop_zoom-footer { position: absolute; bottom: 0px; left: -100%; right: -100%; text-align: center; padding: 0px; height: 0px; overflow: hidden; background: #eee; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 736px) { .shop_zooms .shop_zoom-footermobile, .shop_zooms .shop_zoom-footer { position: relative; top: 0px; left: 0px; right: 0px; margin-top: 0px; display: none; background: white; height: 90px; } } .shop_zooms .shop_zoom-footermobile ul, .shop_zooms .shop_zoom-footermobile p, .shop_zooms .shop_zoom-footer ul, .shop_zooms .shop_zoom-footer p { -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .shop_zooms .shop_zoom-footermobile p, .shop_zooms .shop_zoom-footer p { height: 35px; line-height: 35px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; color: #999; } .shop_zooms .shop_zoom-footermobile ul, .shop_zooms .shop_zoom-footer ul { padding: 4px 0px; position: absolute; top: 29px; bottom: 11px; left: 0px; width: 100%; } .shop_zooms .shop_zoom-footermobile li, .shop_zooms .shop_zoom-footer li { width: 52px; height: 100%; display: inline-block; vertical-align: top; margin: 0px 5px; padding: 3px; border: 1px solid transparent; background: white; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } @media only screen and (max-width: 736px) { .shop_zooms .shop_zoom-footermobile li, .shop_zooms .shop_zoom-footer li { width: 46px; margin: 0px 3px; } } .shop_zooms .shop_zoom-footermobile li img, .shop_zooms .shop_zoom-footer li img { height: 100%; } .shop_zooms .shop_zoom-footermobile li.selected, .shop_zooms .shop_zoom-footer li.selected { pointer-events: none; border: 1px solid #e9e9e9; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .desktop .shop_zooms .shop_zoom-footermobile li:not(.selected):hover, .desktop .shop_zooms .shop_zoom-footer li:not(.selected):hover { border: 1px solid #e9e9e9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .shop_zooms .shop_zoom-footermobile { display: none; } .shop_zooms .shop_zoom-footermobile ul { top: 30px; bottom: auto; height: calc(100% - 30px); } @media only screen and (max-width: 736px) { .shop_zooms .shop_zoom-footermobile { display: block; } } .shop_zooms.opened { height: 610px; margin-bottom: 50px; } @media only screen and (max-width: 736px) { .shop_zooms.opened { height: auto; margin-bottom: 0px; } } .shop_zooms.opened .shop_zoom-footer { height: 100px; } @media only screen and (max-width: 736px) { .shop_zooms.opened .shop_zoom-footer { height: 90px; } } .shop_zooms.opened .shop_zoom-footer p.empty, .shop_zooms.opened .shop_zoom-footer ul.empty { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } @media only screen and (max-width: 736px) { .shop_zooms.opened .shop_zoom-footer.empty { display: none; } } .shop_zooms.opened:before { content: ''; position: absolute; top: 0%; left: -100%; right: -100%; border-top: 1px solid #eee; } .shop_zooms-scroll { width: 100%; height: 100%; } @media only screen and (max-width: 736px) { .shop_zooms-scroll { overflow: auto; -webkit-overflow-scrolling: touch; } } .shop_zooms-container { position: relative; height: 100%; width: 100%; margin: auto; overflow: hidden; } @media only screen and (max-width: 736px) { .shop_zooms-container { height: auto; } } .shop_zoom.shop_zoom_old { position: absolute; z-index: 10; top: 0px; left: 0px; width: 100%; height: 100%; } .shop_zoom-footer .left, .shop_zoom.left { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .shop_zoom-footer .right, .shop_zoom.right { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .shop_zoom-footer ul.notransition, .shop_zoom.notransition { -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; } .shop_zoom-previous, .shop_zoom-next { position: absolute; z-index: 3; width: 50px; height: 50px; top: 40%; cursor: pointer; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 736px) { .shop_zoom-previous, .shop_zoom-next { top: 30%; } } .shop_zoom-previous:before, .shop_zoom-next:before { content: ''; display: block; position: absolute; top: 50%; width: 20px; height: 34px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../img/arrows.png) top left no-repeat; background-size: auto 200%; } .shop_zoom-next { right: 20px; } .shop_zoom-next:before { right: 0px; background-position: top right; } .desktop .shop_zoom-next:hover:before { background-position: bottom right; } .shop_zoom-previous { left: 20px; } .shop_zoom-previous:before { background-position: top left; } .desktop .shop_zoom-previous:hover:before { background-position: bottom left; } .shop_zoom-close { position: absolute; z-index: 3; top: 20px; right: 20px; width: 100px; height: 100px; cursor: pointer; } @media only screen and (max-width: 736px) { .shop_zoom-close { top: 20px; right: 20px; } } .shop_zoom-close:before { content: ''; position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background: url(../img/close.png) top left no-repeat; background-size: 100%; } @media only screen and (max-width: 736px) { .shop_zoom-close:before { background-position: bottom left; } } .desktop .shop_zoom-close:hover:before { background-position: bottom left; } .shop_zoom { position: relative; overflow: hidden; height: 610px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 736px) { .shop_zoom { height: auto; } } .shop_zoom .shop_zoom-content { height: calc(100% - 100px); position: relative; font-size: 0px; white-space: nowrap; max-width: 900px; margin: auto; text-align: left; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-content { white-space: normal; height: calc(100% - 90px); } } .shop_zoom .shop_zoom-margins { padding: 10px 60px 10px 60px; position: relative; height: 100%; overflow: hidden; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-margins { padding: 10px 20px 10px 20px; } } .shop_zoom .shop_zoom-overflow { position: relative; width: 100%; height: 100%; overflow: hidden; } .shop_zoom .shop_zoom-panes { position: relative; height: 100%; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-panes { display: flex; flex-direction: column; } } .shop_zoom .shop_zoom-panes.pinfo_opened { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-panes.pinfo_opened { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } .shop_zoom .shop_zoom-pane1, .shop_zoom .shop_zoom-pane2, .shop_zoom .shop_zoom-pane3 { position: relative; display: inline-block; height: 100%; width: 50%; vertical-align: top; font-size: 13px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane1, .shop_zoom .shop_zoom-pane2, .shop_zoom .shop_zoom-pane3 { width: 100%; font-size: 12px; height: auto; } } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane1 { order: 2; } } .shop_zoom .shop_zoom-slider { height: 320px; white-space: nowrap; display: none; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-slider { display: block; } } .shop_zoom .shop_zoom-slider .peppermint-slides { height: 100%; } .shop_zoom .shop_zoom-slider .shop_zoom-image { display: inline-block; vertical-align: top; width: 100%; height: 100%; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-image-desktop { display: none; } } .shop_zoom .shop_zoom-image { margin: 2% 0px; height: 96%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-image { margin: 0px; height: 320px; } } .shop_zoom .shop_zoom-pane1 .shop_zoom-panecontentmobile { display: none; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane1 .shop_zoom-panecontentmobile { display: block; } } .shop_zoom .shop_zoom-pane2 { position: relative; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane2 { order: 1; } } .shop_zoom .shop_zoom-pane2 .shop_zoom-panecontent { padding: 0px 30px; position: absolute; bottom: 17%; width: 100%; left: 0px; white-space: normal; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane2 .shop_zoom-panecontent { display: none; } } .shop_zoom .shop_zoom-pane3 { position: relative; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane3 { order: 3; } } .shop_zoom .shop_zoom-pane3 .shop_zoom-panecontent { position: absolute; top: 83px; left: 30px; right: 0px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-pane3 .shop_zoom-panecontent { position: relative; top: auto; left: auto; padding: 0px 10px 30px 10px; } } .shop_zoom .shop_zoom-title { margin-top: 14%; padding: 0px 30px; white-space: normal; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; text-transform: uppercase; font-size: 20px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-title { text-align: center; font-size: 18px; margin-top: 43px; padding: 0px 10px; } } .shop_zoom .shop_zoom-style { padding: 0px 30px; font-size: 14px; color: #888; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-style { text-align: center; font-size: 13px; } } .shop_zoom .shop_zoom-price { padding: 8px 30px 30px 30px; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 20px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-price { text-align: center; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 16px; padding-bottom: 5px; } } .shop_zoom .shop_zoom-thumbsmobile { display: none; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-thumbsmobile { display: block; margin-bottom: 17px; } .shop_zoom .shop_zoom-thumbsmobile ul { text-align: center; } .shop_zoom .shop_zoom-thumbsmobile li { display: inline-block; vertical-align: top; width: 5px; height: 5px; margin: 5px; background: #eee; border-radius: 100%; } .shop_zoom .shop_zoom-thumbsmobile li.selected { background: #555; } .shop_zoom .shop_zoom-thumbsmobile li img { display: none; } } .shop_zoom .shop_zoom-thumbs { white-space: nowrap; height: 89px; margin-top: 10px; overflow: hidden; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .shop_zoom .shop_zoom-thumbs { height: 80px; } } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-thumbs { display: none; } } .shop_zoom .shop_zoom-thumbs li { cursor: pointer; display: inline-block; vertical-align: top; width: 76px; padding: 5px; margin: 0px 9px 0px 0px; border: 1px solid white; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .shop_zoom .shop_zoom-thumbs li { margin-right: 4px; width: 62px; } } .shop_zoom .shop_zoom-thumbs li.selected { pointer-events: none; border: 1px solid #e9e9e9; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .desktop .shop_zoom .shop_zoom-thumbs li:not(.selected):hover { border: 1px solid #e9e9e9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .shop_zoom .shop_zoom-thumbs li img { width: 84%; } .shop_zoom .shop_zoom-links { text-decoration: underline; text-transform: uppercase; font-size: 12px; padding: 15px 0px; overflow: hidden; margin-bottom: 8px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-links { display: none; } } .shop_zoom .shop_zoom-links span { cursor: pointer; display: inline-block; } .shop_zoom .shop_zoom-links span.shop_zoom-linkphotos { float: left; pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=40); -webkit-opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4; cursor: default; } .shop_zoom .shop_zoom-links span.shop_zoom-linkinfos { float: right; } .desktop .shop_zoom .shop_zoom-links:hover { text-decoration: none; } .shop_zoom .pinfo_opened .shop_zoom-thumbs li { pointer-events: all; border: 1px solid transparent; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .desktop .shop_zoom .pinfo_opened .shop_zoom-thumbs li:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; border: 1px solid #eee; } .shop_zoom .pinfo_opened .shop_zoom-links span.shop_zoom-linkphotos { pointer-events: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; cursor: pointer; } .shop_zoom .pinfo_opened .shop_zoom-links span.shop_zoom-linkinfos { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=40); -webkit-opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4; cursor: default; } .shop_zoom .select_container_mobile, .shop_zoom .shop_zoom-button { width: 100%; padding: 5px 10px; height: 30px; } @media only screen and (max-width: 736px) { .shop_zoom .select_container_mobile, .shop_zoom .shop_zoom-button { font-size: 12px; padding: 10px 10px; height: 36px; background: #f0f0f0; } } .shop_zoom .shop_zoom-button { margin-top: 15px; } @media only screen and (max-width: 1024px) and (orientation: portrait) { .shop_zoom .shop_zoom-button { margin-top: 13px; } } .shop_zoom .shop_zoom-tinfo { margin-top: 14%; padding: 0px 30px; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; text-transform: uppercase; font-size: 20px; letter-spacing: 0.05em; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-tinfo { font-size: 18px; padding: 0px 10px; } } .shop_zoom .shop_zoom-charact { padding-top: 11px; text-transform: uppercase; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; padding-bottom: 10px; } @media only screen and (max-width: 736px) { .shop_zoom .shop_zoom-charact { padding-top: 16px; } } .shop_zoom .shop_zoom-pdescription ul { white-space: normal; } .shop_zoom .shop_zoom-tcomposition { padding-top: 20px; text-transform: uppercase; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; } .mini_site_container .shop-add { padding: 5px 10px; text-transform: uppercase; height: 30px; white-space: nowrap; background: black; color: white; text-align: center; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 11px; cursor: pointer; border: 1px solid black; } @media only screen and (max-width: 736px) { .mini_site_container .shop-add { padding: 9px 10px 10px 10px; height: 36px; } } .desktop .mini_site_container .shop-add:hover { background: black; color: white; } .mini_site_container .shop-add.disabled { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; cursor: default; color: #aaa; } .select_container { position: relative; display: block; } .select_container select { display: none; } @media only screen and (max-width: 736px) { .select_container select { display: inline-block; } } .select_container .select_container_mobile { display: none; margin-top: 20px; padding: 0px; text-transform: uppercase; } .select_container .select_container_mobile .fake_select-default { padding: 10px; font-size: 11px; letter-spacing: 0em; } .select_container .select_container_mobile select { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 10; display: block; width: 100%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } @media only screen and (max-width: 736px) { .select_container .select_container_mobile { display: block; } } .select_container .fake_select { display: block; } @media only screen and (max-width: 736px) { .select_container .fake_select { display: none; } } .select_container .fake_select-default { display: block; font-size: 10px; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; padding: 5px 5px 5px 10px; border: 1px solid #ebebeb; color: #000; cursor: pointer; text-transform: uppercase; } @media only screen and (max-width: 1024px) { .select_container .fake_select-default { font-size: 11px; } } .desktop .select_container .fake_select-default:hover { background: #f1f1f1; } .select_container .fake_select-default span { display: block; min-width: 123px; padding-right: 22px; font-weight: bold; font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; } .select_container .fake_select-default span:before { content: ''; display: block; position: absolute; top: 0%; right: 0px; width: 30px; height: 100%; background: url(../img/selector.png) center center no-repeat; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; background-size: auto 6px; } .select_container .fake_select-default.opened span:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .select_container .fake_select-items { display: none; position: absolute; z-index: 5; bottom: 29px; left: 0px; padding: 6px; width: 100%; background: #f1f1f1; } .select_container .fake_select-items.opened { display: block; } .select_container .fake_select-item { float: left; background-color: #fff; width: 33.33333%; border-left: solid 1px #efefef; border-bottom: solid 1px #efefef; height: 40px; text-align: center; } .select_container .fake_select-item.notorderable { pointer-events: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } .select_container .fake_select-item.notorderable a { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; color: rgba(0, 0, 0, 0.4); } .select_container .fake_select-item a { color: #000; background-color: #fff; width: 100%; height: 100%; padding: 0; line-height: 40px; font-size: 12px; display: block; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; text-transform: uppercase; } .desktop .select_container .fake_select-item a:hover { background: black; color: white; } .select_container .fake_select-item.selected a { background: black; color: white; } .shop_filters { text-transform: uppercase; text-align: left; padding: 0px 50px; margin-bottom: 90px; margin-top: -20px; line-height: 50px; } @media only screen and (max-width: 736px) { .shop_filters { padding: 0px 20px; margin-bottom: 50px; } } .shop_filters .shop_filter { display: block; vertical-align: top; line-height: 50px; padding: 0px 15px; text-align: center; font-family: "hurme-semibold", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 15px; margin-bottom: 51px; color: #959595; /* Second filter */ } @media only screen and (max-width: 736px) { .shop_filters .shop_filter { font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; font-size: 13px; line-height: 40px; padding: 0px 5px; margin-bottom: 25px; } } .shop_filters .shop_filter ~ .shop_filter { font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; text-align: left; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 13px; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter ~ .shop_filter { border-top: none; border-bottom: none; text-align: center; } } .shop_filters .shop_filter ~ .shop_filter .shop_filter-name { font-size: inherit; padding-right: 15px; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter ~ .shop_filter .shop_filter-name { font-size: 11px; color: #959595; letter-spacing: 0.05em; } } .shop_filters .shop_filter ~ .shop_filter .shop_filter-values { position: relative; display: inline-block; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter ~ .shop_filter .shop_filter-values { display: block; } } .shop_filters .shop_filter ~ .shop_filter .selected a:before { position: absolute; left: -11px; top: 0px; height: 100%; content: '>'; display: block; padding: 0px 15px; } .shop_filters .shop_filter select { display: none; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter select { display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } } .shop_filters .shop_filter .shop_filter-current_mobile { display: none; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter .shop_filter-current_mobile { display: block; border: 1px solid #ebebeb; color: black; height: 40px; padding-right: 40px; } .shop_filters .shop_filter .shop_filter-current_mobile:after { content: ''; position: absolute; top: 0%; right: 0px; width: 40px; border-left: 1px solid #ebebeb; height: 100%; background: url(../img/selector.png) center center no-repeat; background-size: 15px; } } .shop_filters .shop_filter-name { display: inline-block; font-size: 20px; letter-spacing: 0.05em; color: black; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter-name { font-size: 19px; letter-spacing: 0.05em; } } .shop_filters .shop_filter-values { position: relative; display: block; margin-top: -11px; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter-values { margin-top: 0px; } } .shop_filters select { display: none; } @media only screen and (max-width: 736px) { .shop_filters select { display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } } .shop_filters .shop_filter-value { position: relative; display: inline-block; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter-value { display: none; } } .shop_filters .shop_filter-value ~ .shop_filter-value:before { font-family: "hurme-regular", "Helvetica Neue", "Helvetica", Arial, Segoe UI Symbol, sans-serif; margin: 0px 10px; content: '|'; display: inline-block; margin: 0px 15px; } @media only screen and (max-width: 736px) { .shop_filters .shop_filter-value ~ .shop_filter-value:before { margin: 0px 5px; } } .shop_filters .shop_filter-value a { position: relative; padding: 0px 15px; background: none; font-size: inherit; display: inline-block; color: #959595; } .desktop .shop_filters .shop_filter-value a:hover { color: #000; } .shop_filters .shop_filter-value.selected a { color: black; }