@font-face{font-family:roboto_regular;src:url(asset('frontend/fonts/roboto/Roboto-Regular.ttf')); } @font-face { font-family:roboto_bold; src:url(asset('frontend/fonts/roboto/Roboto-Bold.ttf')); } @font-face { font-family:roboto_light; src:url(asset('frontend/fonts/roboto/Roboto-Light.ttf')); } @font-face { font-family:roboto_italic; src:url(asset('frontend/fonts/roboto/Roboto-Italic.ttf')); } @font-face { font-family:roboto_thin; src:url(asset('frontend/fonts/roboto/Roboto-Thin.ttf')); } @font-face { font-family:roboto_thinitalic; src:url(asset('frontend/fonts/roboto/Roboto-ThinItalic.ttf')); } @font-face { font-family:roboto_lightitalic; src:url(asset('frontend/fonts/roboto/Roboto-LightItalic.ttf')); } @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,400,600,700,800&display=swap'); * { margin:0; padding:0; outline:none; } html,body { font-family:roboto_regular!important; font-size:14px; color:#4D4D4D; opacity:1; margin:0px; overflow-x:hidden; } body { background:#fff; -webkit-transition:background 0.5s; transition:background 0.5s; } img { max-width:100%; } a { text-decoration:none; color:#4D4D4D; } a:hover,a:focus { text-decoration:none!important; color:inherit; } h1,h2,h3,h4,h5,h6 { font-family:roboto_bold!important; } .no-padding { padding:0px; } .form-control { color:#fff!important; } .svg { display:none; } #preloader { height:100vh; width:100vw; background:#fff; position:fixed; left:0; right:0; top:0; bottom:0; z-index:99999999999999; } .loader-block { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .logo-loader { display:block; } .lds-ring { display:inline-block; width:64px; height:64px; } .lds-ring div { -webkit-box-sizing:border-box; box-sizing:border-box; display:block; position:absolute; width:51px; height:51px; margin:6px; border:6px solid #D2AE6D; border-radius:50%; -webkit-animation:lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite; animation:lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite; border-color:#D2AE6D transparent transparent transparent; } .lds-ring div:nth-child(1) { -webkit-animation-delay:-0.45s; animation-delay:-0.45s; } .lds-ring div:nth-child(2) { -webkit-animation-delay:-0.3s; animation-delay:-0.3s; } .lds-ring div:nth-child(3) { -webkit-animation-delay:-0.15s; animation-delay:-0.15s; } @-webkit-keyframes lds-ring { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes lds-ring { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } .page-breadcrumb { list-style:none; display:none; justify-content:center; align-items:center; z-index:99; position:absolute; transform:translateX(-50%); left:50%; background:#f0f0f0; background:#1b5665; } .page-breadcrumb li a { color:#fff!important; } .page-breadcrumb li a:hover { color:#c1bfbf!important; } .page-breadcrumb li { position:relative; color:#c1bfbf!important; height:25px; padding:0px 20px 0 20px; display:flex; justify-content:center; align-items:center; line-height:1; } .page-breadcrumb li:last-child {} .page-breadcrumb li:first-child:before { content:"\f015"; font:normal normal normal 14px/1 FontAwesome; color:#fff; margin-right:5px; } .page-breadcrumb li a { font-size:12px!important; } .page-breadcrumb li::after { content:'>'; position:absolute; color:#959595; right:0px; } .page-breadcrumb li:last-child::after { content:none; } .page-breadcrumb li::before {} .page-wrapper { position:relative; } .home { height:100vh; overflow:hidden; padding:40px 0; -webkit-box-sizing:border-box; box-sizing:border-box; pointer-events:none } .home-wrapper { position:relative; z-index:9; width:100%; max-width:calc(100% - 160px); height:100%; margin:0 auto } .home-top { color:#222; position:relative; position:absolute; width:100%; } .home-top-title { display:block; font-size:18px!important; font-family:"roboto_regular"; font-weight:100; line-height:20px; text-transform:uppercase; font-weight:100; letter-spacing:0.05em } .home-top-brand { display:block; line-height:30px!important; font-size:50px; font-weight:800; } .home-top-year { display:block; font-size:16px; font-weight:200 } .home-top-year strong { display:inline-block; font-size:24px; font-weight:800; padding-left:50px; margin-left:10px; position:relative } .home-top-year strong:before { content:""; display:block; position:absolute; left:0; width:35px; height:2px; bottom:0; background-color:#222 } .home-top-left { float:left; position:absolute; padding:0px 0px; margin-top:0px; } .home-top-logo { position:absolute; top:10px; right:116px!important; width:124px; height:40px; pointer-events:auto; } .slider-block { height:80vh; width:100vw; overflow:hidden; } .home-actions { max-width:640px; font-size:0; line-height:0; position:absolute; bottom:0px; left:50%; z-index:2; margin-left:-320px } .home-actions.hidden .home-action-bt { -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); opacity:0 } .home-actions.hidden .home-action-desc { -webkit-transform:translate3d(0,20px,0); transform:translate3d(0,20px,0); opacity:0 } .home-actions.hidden .home-action-guide:after { -webkit-transform:scaleY(0); transform:scaleY(0); opacity:0 } .home-action { display:inline-block; width:50%; font-weight:800; text-align:center; position:relative; padding:0 40px; -webkit-box-sizing:border-box; box-sizing:border-box } .home-action-bt span { position:relative; display:block; color:#fff; font-family:'roboto_regular'; -webkit-transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .home-action-desc { font-size:16px; line-height:16px; font-weight:200; font-style:italic; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .home-action-guide .home-action-bt { border:none } .home-action-guide:after { content:""; display:block; position:absolute; right:0; top:8px; height:25px; width:1px; background-color:#dadada; background-color:#1b5665; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .home-action-grid .home-action-bt { -webkit-transition-delay:0.2s; transition-delay:0.2s } .home-action-grid .home-action-desc { -webkit-transition-delay:0.3s; transition-delay:0.3s } .home-bottom { position:absolute; bottom:0; left:0; width:100% } .home-bottom-left-item { display:inline-block; text-decoration:none; color:#adabab; font-size:14px; position:relative; padding:15px 15px; pointer-events:auto; -webkit-transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1) } .home-bottom-left-item:hover { color:#1B5665 } .home-bottom-right { position:absolute; right:-10px; bottom:0; font-size:0; line-height:0 } .home-bottom-right-item { position:relative; display:inline-block; text-decoration:none; color:#adabab; font-size:14px; top:-10px; padding:10px 10px; pointer-events:auto } .home-bottom-right-item .icon { width:15px; height:15px; fill:#1B5665; -webkit-transition:fill 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:fill 0.4s cubic-bezier(0.165,0.84,0.44,1) } .home-bottom-right-item:hover .icon { fill:#208f91 } .home-bottom-right-language { position:relative; white-space:nowrap; font-size:0; height:35px; vertical-align:middle; -webkit-transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:all 0.5s cubic-bezier(0.165,0.84,0.44,1); width:105px; margin-right:20px; margin-top:-4px } .home-bottom-right-language-inner { position:absolute; right:0; overflow:hidden; width:100%; height:100%; pointer-events:auto } .home-bottom-right-language-inner:hover .home-bottom-right-language-item { opacity:1; pointer-events:auto } .home-bottom-right-language-inner:hover .home-bottom-right-language-item.not-selected { -webkit-transform:translateY(0); transform:translateY(0) } .home-bottom-right-language-inner:hover .home-bottom-right-language-item.not-selected:nth-child(1) { -webkit-transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.24s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.24s; transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.24s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.24s; transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.24s,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.24s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.24s,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.24s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.24s } .home-bottom-right-language-inner:hover .home-bottom-right-language-item.not-selected:nth-child(2) { -webkit-transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.16s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.16s; transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.16s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.16s; transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.16s,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.16s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.16s,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0.16s,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0.16s } .home-bottom-right-language:after { content:""; display:block; width:1px; position:absolute; top:50%; right:-10px; height:10px; margin-top:-5px; background-color:#d2d2d2 } .home-bottom-right-language-item { font-size:14px; line-height:35px; width:35px; text-transform:uppercase; color:#d2d2d2; text-decoration:none; display:inline-block; text-align:center; opacity:0; pointer-events:auto; position:relative; z-index:5; -webkit-transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94),color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94),color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1),opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94),color 0.5s cubic-bezier(0.25,0.46,0.45,0.94); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1),opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94),color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) } .home-bottom-right-language-item.selected { line-height:35px; position:absolute; top:0; opacity:1; pointer-events:none; -webkit-transform:translateX(0px); transform:translateX(0px); right:0; width:30px; z-index:1 } .home-bottom-right-language-item.not-selected { -webkit-transform:translateY(22px); transform:translateY(22px); position:relative } .home-bottom-right-language-item.not-selected:nth-child(1) { -webkit-transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0; transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0; transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0 } .home-bottom-right-language-item.not-selected:nth-child(2) { -webkit-transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0; transition:opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0; transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94); transition:transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0,opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94) 0,color 0.5s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1) 0 } .home-bottom-right-language-item:hover.not-selected { color:#1B5665 } .home-bottom-right-language-item:hover:not(.not-selected) { cursor:default } .home-bottom-right-language { display:inline-block; font-size:14px; text-transform:uppercase } .home-bottom-right-language-item { color:#d2d2d2; text-decoration:none } .thickness { font-size:26px; font-weight:700; } .product-assets__item.dashed img { margin:0px auto; width:16px; margin-top:-20px; filter:invert(1); } .product-assets__item.dashed:hover img { filter:invert(1); } @media (max-width:1140px) { .home-wrapper { max-width:calc(100% - 80px) } .home-bottom-left-item { float:left; clear:both; top:0; padding:8px 15px } } @media (max-width:960px) { .home { padding:40px 0 } .home-slider-item-content { right:80px } .home-actions { bottom:130px } .home-bottom-right-language-item.selected { display:none } .home-bottom-right-language-item.not-selected { -webkit-transform:translateY(0px); transform:translateY(0px); opacity:1; float:right } } @media screen and (max-height:850px) { .home-wrapper { max-width:calc(100% - 80px) } .home { padding:40px 0 } .home-slider-item-content { top:80px } } .home-action-bt { position:relative; display:block; font-size:16px; width:240px; margin:0 auto 10px auto; text-decoration:none; text-align:center; color:#222; border-radius:40px; line-height:36px; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); pointer-events:auto; } .home-action-bt .btn-bg:before,button#store_enquiry_btn:before { background:#000000; color:#000000; } .home-action-desc { font-size:16px; line-height:16px; font-weight:200; font-style:italic; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .btn:hover .btn-bg,.guide-answer-item:hover .guide-answer-bt .btn-bg { -webkit-transform:scale(1); transform:scale(1.1); } .btn:hover .btn-bg:before,.guide-answer-item:hover .guide-answer-bt .btn-bg:before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1) } .btn-bg { position:absolute; top:0; left:0; border:none; width:100%; height:50px; border-radius:40px; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.6,0.295,0.15,1.645); transition:-webkit-transform 0.4s cubic-bezier(0.6,0.295,0.15,1.645); transition:transform 0.4s cubic-bezier(0.6,0.295,0.15,1.645); transition:transform 0.4s cubic-bezier(0.6,0.295,0.15,1.645),-webkit-transform 0.4s cubic-bezier(0.6,0.295,0.15,1.645); overflow:hidden; background:#1b5665; } .btn-bg:before { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:200px; border:none; width:100%; content:""; border-radius:50%; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0; } .btn-bg:after { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:calc(100% - 4px); height:calc(100% - 4px); border-radius:24px; content:""; } .btn.filled .btn-bg { background:#21bfc1 } .btn.btn-white { color:#fff } .btn.btn-white .btn-bg:before { background:white } .btn.btn-white .btn-bg:after { border:2px solid #fff } .custom-click { -webkit-transition-delay:0.2s; transition-delay:0.2s; border:none; } .custom-click span { position:relative; display:block; color:#222; -webkit-transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); line-height:33px; } .btn:hover .btn-bg,.guide-answer-item:hover .guide-answer-bt .btn-bg { -webkit-transform:scale(1.1); transform:scale(1.1) } .btn:hover .btn-bg:before,.guide-answer-item:hover .guide-answer-bt .btn-bg:before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1) } .shape1-bg { background:url('../images/home/slider/shape1.png'); background-size:contain; background-repeat:no-repeat; } .shape2-bg { background:url('../images/home/slider/shape2.png'); background-size:contain; background-repeat:no-repeat; } .shape3-bg { background:url('../images/home/slider/shape3.png'); background-size:contain; background-repeat:no-repeat; } .home-slider .item img { width:100%; height:80vh; object-fit:contain; } .home-slider .item .cover { padding:75px 0; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.1); display:flex; align-items:center; } .home-slider .item .cover .header-content { position:relative; padding:56px; overflow:hidden; } .home-slider .item .cover .header-content .line { content:""; display:inline-block; width:100%; height:100%; left:0; top:0; position:absolute; border:9px solid #fff; -webkit-clip-path:polygon(0 0,60% 0,36% 100%,0 100%); clip-path:polygon(0 0,60% 0,36% 100%,0 100%); } .home-slider .item .cover .header-content h2 { font-weight:300; font-size:35px; color:#fff; } .home-slider .item .cover .header-content h3 { font-size:24px; font-weight:300; line-height:36px; color:#fff; } .home-slider .owl-item.active h2 { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; animation-name:fadeInDown; animation-delay:0.3s; } .home-slider .owl-item.active h3 { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; animation-name:fadeInUp; animation-delay:0.3s; } .home-slider .owl-item.active .line { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; animation-name:fadeInLeft; animation-delay:0.3s; } .home-slider .owl-nav .owl-prev { position:absolute; left:15px; top:43%; opacity:0; -webkit-transition:all 0.4s ease-out; transition:all 0.4s ease-out; background:rgba(0,0,0,0.5)!important; width:40px; cursor:pointer; height:40px; position:absolute; display:block; z-index:1000; border-radius:0; } .home-slider .owl-nav .owl-prev span { font-size:1.6875rem; color:#fff; } .home-slider .owl-nav .owl-prev:focus { outline:0; } .home-slider .owl-nav .owl-prev:hover { background:#000!important; } .home-slider .owl-nav .owl-next { position:absolute; right:15px; top:43%; opacity:0; -webkit-transition:all 0.4s ease-out; transition:all 0.4s ease-out; background:rgba(0,0,0,0.5)!important; width:40px; cursor:pointer; height:40px; position:absolute; display:block; z-index:1000; border-radius:0; } .home-slider .owl-nav .owl-next span { font-size:1.6875rem; color:#fff; } .home-slider .owl-nav .owl-next:focus { outline:0; } .home-slider .owl-nav .owl-next:hover { background:#000!important; } .home-slider:hover .owl-prev { left:0px; opacity:1; } .home-slider:hover .owl-next { right:0px; opacity:1; } .btn-ctrl { display:block; width:80px; height:40px; background-color:#222; position:absolute; top:0; left:0; z-index:400; color:#fff; font-weight:800; text-align:center; line-height:40px; cursor:pointer } .btn-ctrl:hover { opacity:0.9 } .btn-ctrl.next { top:41px } .guide { width:100%; height:100vh; position:relative; background-color:#fff } .guide-step { visibility:hidden; pointer-events:none; position:absolute; top:0; left:0; width:100%; height:100% } .guide-step.active { visibility:visible; z-index:1; } .guide-step.active.can-hover { pointer-events:auto } .guide-answer-item { display:inline-block; height:100vh; overflow:hidden; position:relative; box-shadow:0px 0px 10px transparent; vertical-align:top } .guide-answer-item .guide-answer-icon .icon { -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .guide-answer-item .guide-answer-icon:before { -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .guide-answer-item:hover .guide-answer-icon .icon { -webkit-transform:scale(1); transform:scale(1) } .guide-answer-item:hover .guide-answer-icon:before { opacity:1; -webkit-transform:scale(1.2); transform:scale(1.2) } .guide-answer-item:hover .guide-answer-bt { color:#222 } .guide-answer-item:hover .guide-answer-bt .btn-bg:before { background-color:#fff } .guide-answer-item:hover .guide-answer-bt span { position:relative } .guide-answer-item:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.3; } .guide-answer-item.disabled { pointer-events:none; opacity:1 } .guide-answer-item.disabled .guide-answer-item-inner { opacity:0.4 } .guide-answer-item.disabled:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.4; z-index:50 } .guide-answer-wrapper { color:#fff; width:100%; text-align:center; max-width:350px; margin:0 auto; position:relative; top:35vh; z-index:10 } .guide-answer-title { font-size:30px; line-height:32px; font-weight:800; margin-bottom:15px } .guide-answer-desc { font-size:16px; line-height:16px; font-weight:200; font-style:italic; color:#bfbebe; } .guide-answer-icon { width:130px; height:130px; position:absolute; margin:0 auto; top:50%; left:50%; margin-left:-65px; margin-top:-50px; z-index:10 } .guide-answer-icon:before { content:""; display:block; position:absolute; width:100%; height:100%; opacity:0.4; -webkit-box-sizing:border-box; box-sizing:border-box; border:10px solid #fff; border-radius:100% } .guide-answer-icon .icon { fill:#fff; width:54px; height:54px; position:absolute; left:50%; top:50%; margin-top:-27px; margin-left:-27px } .guide-answer-bt { position:absolute; bottom:15vh; left:50%; z-index:10; height:50px; width:240px; margin:0 auto 0 -120px; font-size:16px; font-weight:800; line-height:36px; text-align:center } .guide-sun-container { position:absolute; top:0; right:0 } .guide-sun { position:absolute; width:170px; height:170px; top:0; right:0; border-radius:100%; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) } .guide-sun-inner { position:absolute; top:0; left:0; width:100%; height:100% } .guide-sun-inner:before,.guide-sun-inner:after { content:"" } .guide-sun-inner span,.guide-sun-inner:before,.guide-sun-inner:after { background-color:#fdffe8; width:100%; height:100%; border-radius:100%; position:absolute; top:0; left:0 } .guide-sun-inner:before { -webkit-transform:scale(1.2); transform:scale(1.2); opacity:0.5 } .guide-sun-inner:after { -webkit-transform:scale(1.4); transform:scale(1.4); opacity:0.3 } .guide-sun-inner span:after,.guide-sun-inner span:before { content:""; display:block; background-color:#fdffe8; border-radius:100%; width:100%; height:100%; position:absolute; top:0; left:0; -webkit-transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) } .guide-sun-inner span:before { -webkit-transform:scale(1.6); transform:scale(1.6); opacity:0 } .guide-sun-inner span:after { -webkit-transform:scale(4); transform:scale(4); opacity:0; background:radial-gradient(circle at center,#fdffe8 0,rgba(255,255,255,0) 70%) } .guide-sun-hover .guide-sun-inner,.guide-ashape-item:hover .guide-sun-inner { -webkit-animation:sunInner 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1s; animation:sunInner 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1s } .guide-sun-hover .guide-sun-inner span:before,.guide-ashape-item:hover .guide-sun-inner span:before,.guide-sun-hover .guide-sun-inner span:after,.guide-ashape-item:hover .guide-sun-inner span:after { -webkit-transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-sun-hover .guide-sun-inner:before,.guide-ashape-item:hover .guide-sun-inner:before { -webkit-animation:sunBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.2s; animation:sunBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.2s } .guide-sun-hover .guide-sun-inner:after,.guide-ashape-item:hover .guide-sun-inner:after { -webkit-animation:sunAfter 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.4s; animation:sunAfter 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.4s } .guide-sun-hover .guide-sun-inner span:before,.guide-ashape-item:hover .guide-sun-inner span:before { -webkit-animation:sunSpanBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.6s; animation:sunSpanBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.6s } .guide-sun-hover .guide-sun-inner span:before,.guide-ashape-item:hover .guide-sun-inner span:before { -webkit-transform:scale(1.6); transform:scale(1.6); opacity:0.15 } .guide-sun-hover .guide-sun-inner span:after,.guide-ashape-item:hover .guide-sun-inner span:after { -webkit-transform:translateX(0px) scale(4); transform:translateX(0px) scale(4); opacity:0.2 } @keyframes sunBefore { 0% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } 50% { opacity:0.2; -webkit-transform:scale(1.15); transform:scale(1.15) } 100% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } } @keyframes sunAfter { 0% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } 50% { opacity:0.1; -webkit-transform:scale(1.35); transform:scale(1.35) } 100% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } } @keyframes sunSpanBefore { 0% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } 50% { opacity:0.05; -webkit-transform:scale(1.55); transform:scale(1.55) } 100% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } } @-webkit-keyframes sunInner { 0% { -webkit-transform:scale(1); transform:scale(1) } 50% { -webkit-transform:scale(0.97); transform:scale(0.97) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @keyframes sunInner { 0% { -webkit-transform:scale(1); transform:scale(1) } 50% { -webkit-transform:scale(0.97); transform:scale(0.97) } 100% { -webkit-transform:scale(1); transform:scale(1) } } .guide-answer-item { z-index:3 } .guide-answer-item .guide-answer-title,.guide-answer-item .guide-answer-desc,.guide-answer-item .guide-answer-bt { opacity:0; -webkit-transform:translateY(100px); transform:translateY(100px) } .guide-answer-item .guide-answer-icon { opacity:0; -webkit-transform:scale(0.3); transform:scale(0.3) } .guide-answer-item .guide-answer-icon .icon { -webkit-transform:scale(0); transform:scale(0); opacity:0 } .guide-answer-item:nth-child(2) { z-index:2 } .guide-answer-item:nth-child(3) { z-index:1 } .guide-answer.active .guide-answer-title,.guide-answer.active .guide-answer-desc,.guide-answer.active .guide-answer-bt { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),transform 0.7s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1) } .guide-answer.active .guide-answer-icon,.guide-answer.active .guide-answer-icon .icon { opacity:1; -webkit-transform:scale(1); transform:scale(1); -webkit-transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),transform 0.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955),transform 0.7s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.7s cubic-bezier(0.165,0.84,0.44,1) } .guide-answer.active .guide-answer-icon .icon { -webkit-transition-delay:0.45s; transition-delay:0.45s; -webkit-transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275); transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),-webkit-transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275); transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275); transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275),-webkit-transform 0.7s cubic-bezier(0.175,0.885,0.32,1.275) } .guide-answer.active .guide-answer-item:nth-child(1) .guide-answer-title { -webkit-transition-delay:.8s; transition-delay:.8s } .guide-answer.active .guide-answer-item:nth-child(1) .guide-answer-desc { -webkit-transition-delay:.95s; transition-delay:.95s } .guide-answer.active .guide-answer-item:nth-child(1) .guide-answer-icon { -webkit-transition-delay:1.05s; transition-delay:1.05s } .guide-answer.active .guide-answer-item:nth-child(1) .guide-answer-icon .icon { -webkit-transition-delay:1.3s; transition-delay:1.3s } .guide-answer.active .guide-answer-item:nth-child(1) .guide-answer-bt { -webkit-transition-delay:1.3s; transition-delay:1.3s } .guide-answer.active .guide-answer-item:nth-child(2) .guide-answer-title { -webkit-transition-delay:1s; transition-delay:1s } .guide-answer.active .guide-answer-item:nth-child(2) .guide-answer-desc { -webkit-transition-delay:1.15s; transition-delay:1.15s } .guide-answer.active .guide-answer-item:nth-child(2) .guide-answer-icon { -webkit-transition-delay:1.25s; transition-delay:1.25s } .guide-answer.active .guide-answer-item:nth-child(2) .guide-answer-icon .icon { -webkit-transition-delay:1.5s; transition-delay:1.5s } .guide-answer.active .guide-answer-item:nth-child(2) .guide-answer-bt { -webkit-transition-delay:1.5s; transition-delay:1.5s } .guide-answer.active .guide-answer-item:nth-child(3) .guide-answer-title { -webkit-transition-delay:1.2s; transition-delay:1.2s } .guide-answer.active .guide-answer-item:nth-child(3) .guide-answer-desc { -webkit-transition-delay:1.35s; transition-delay:1.35s } .guide-answer.active .guide-answer-item:nth-child(3) .guide-answer-icon { -webkit-transition-delay:1.45s; transition-delay:1.45s } .guide-answer.active .guide-answer-item:nth-child(3) .guide-answer-icon .icon { -webkit-transition-delay:1.7s; transition-delay:1.7s } .guide-answer.active .guide-answer-item:nth-child(3) .guide-answer-bt { -webkit-transition-delay:1.7s; transition-delay:1.7s } .guide-answer.active .guide-answer-item:nth-child(4) .guide-answer-title { -webkit-transition-delay:1.4s; transition-delay:1.4s } .guide-answer.active .guide-answer-item:nth-child(4) .guide-answer-desc { -webkit-transition-delay:1.45s; transition-delay:1.45s } .guide-answer.active .guide-answer-item:nth-child(4) .guide-answer-icon { -webkit-transition-delay:1.65s; transition-delay:1.65s } .guide-answer.active .guide-answer-item:nth-child(4) .guide-answer-icon .icon { -webkit-transition-delay:1.9s; transition-delay:1.9s } .guide-answer.active .guide-answer-item:nth-child(4) .guide-answer-bt { -webkit-transition-delay:1.9s; transition-delay:1.9s } .guide-answer.active .guide-answer-item:nth-child(5) .guide-answer-title { -webkit-transition-delay:1.6s; transition-delay:1.6s } .guide-answer.active .guide-answer-item:nth-child(5) .guide-answer-desc { -webkit-transition-delay:1.65s; transition-delay:1.65s } .guide-answer.active .guide-answer-item:nth-child(5) .guide-answer-icon { -webkit-transition-delay:1.85s; transition-delay:1.85s } .guide-answer.active .guide-answer-item:nth-child(5) .guide-answer-icon .icon { -webkit-transition-delay:2.1s; transition-delay:2.1s } .guide-answer.active .guide-answer-item:nth-child(5) .guide-answer-bt { -webkit-transition-delay:2.1s; transition-delay:2.1s } .guide-answer.active .guide-answer-item:nth-child(6) .guide-answer-title { -webkit-transition-delay:1.8s; transition-delay:1.8s } .guide-answer.active .guide-answer-item:nth-child(6) .guide-answer-desc { -webkit-transition-delay:1.85s; transition-delay:1.85s } .guide-answer.active .guide-answer-item:nth-child(6) .guide-answer-icon { -webkit-transition-delay:2.05s; transition-delay:2.05s } .guide-answer.active .guide-answer-item:nth-child(6) .guide-answer-icon .icon { -webkit-transition-delay:2.3s; transition-delay:2.3s } .guide-answer.active .guide-answer-item:nth-child(6) .guide-answer-bt { -webkit-transition-delay:2.3s; transition-delay:2.3s } .guide-answer.active .guide-answer-item:nth-child(7) .guide-answer-title { -webkit-transition-delay:2.0s; transition-delay:2.0s } .guide-answer.active .guide-answer-item:nth-child(7) .guide-answer-desc { -webkit-transition-delay:2.05s; transition-delay:2.05s } .guide-answer.active .guide-answer-item:nth-child(7) .guide-answer-icon { -webkit-transition-delay:2.35s; transition-delay:2.35s } .guide-answer.active .guide-answer-item:nth-child(7) .guide-answer-icon .icon { -webkit-transition-delay:2.5s; transition-delay:2.5s } .guide-answer.active .guide-answer-item:nth-child(7) .guide-answer-bt { -webkit-transition-delay:2.5s; transition-delay:2.5s } .guide-answer.active .guide-answer-item:nth-child(8) .guide-answer-title { -webkit-transition-delay:2.2s; transition-delay:2.2s } .guide-answer.active .guide-answer-item:nth-child(8) .guide-answer-desc { -webkit-transition-delay:2.25s; transition-delay:2.25s } .guide-answer.active .guide-answer-item:nth-child(8) .guide-answer-icon { -webkit-transition-delay:2.55s; transition-delay:2.55s } .guide-answer.active .guide-answer-item:nth-child(8) .guide-answer-icon .icon { -webkit-transition-delay:2.7s; transition-delay:2.7s } .guide-answer.active .guide-answer-item:nth-child(8) .guide-answer-bt { -webkit-transition-delay:2.7s; transition-delay:2.7s } .guide-answer.active .guide-answer-item:nth-child(9) .guide-answer-title { -webkit-transition-delay:2.4s; transition-delay:2.4s } .guide-answer.active .guide-answer-item:nth-child(9) .guide-answer-desc { -webkit-transition-delay:2.45s; transition-delay:2.45s } .guide-answer.active .guide-answer-item:nth-child(9) .guide-answer-icon { -webkit-transition-delay:2.75s; transition-delay:2.75s } .guide-answer.active .guide-answer-item:nth-child(9) .guide-answer-icon .icon { -webkit-transition-delay:2.9s; transition-delay:2.9s } .guide-answer.active .guide-answer-item:nth-child(9) .guide-answer-bt { -webkit-transition-delay:2.9s; transition-delay:2.9s } .guide-answer.active .guide-answer-item:nth-child(10) .guide-answer-title { -webkit-transition-delay:2.6s; transition-delay:2.6s } .guide-answer.active .guide-answer-item:nth-child(10) .guide-answer-desc { -webkit-transition-delay:2.65s; transition-delay:2.65s } .guide-answer.active .guide-answer-item:nth-child(10) .guide-answer-icon { -webkit-transition-delay:2.95s; transition-delay:2.95s } .guide-answer.active .guide-answer-item:nth-child(10) .guide-answer-icon .icon { -webkit-transition-delay:3.1s; transition-delay:3.1s } .guide-answer.active .guide-answer-item:nth-child(10) .guide-answer-bt { -webkit-transition-delay:3.1s; transition-delay:3.1s } .guide-answer-item-inner { position:absolute; top:0; width:100%; height:100% } @media screen and (max-width:1120px) { .guide-answer-wrapper { padding-left:30px; padding-right:30px; -webkit-box-sizing:border-box; box-sizing:border-box } } @media screen and (max-width:1020px) { .guide-answer-item { display:block; width:100%!important; height:calc(100%/3) } .guide-ashape-item .guide-answer-item-inner,.guide-aglasses-item .guide-answer-item-inner { left:0px!important } .guide-aglasses-item,.guide-ashape-item { height:calc(100%/3) } .guide-aglasses-item .guide-answer-bt,.guide-ashape-item .guide-answer-bt { bottom:10% } .guide-aglasses-item .guide-answer-icon,.guide-ashape-item .guide-answer-icon { top:30% } .guide-aglasses-item { height:calc(100%/3) } .guide-aglasses-item .guide-answer-wrapper { top:52% } .guide-aglasses-item .guide-answer-bt { bottom:10% } .guide-aglasses-item .guide-answer-icon { top:35% } .guide-answer-title { margin-bottom:10px } .guide-answer-icon { width:100px; height:100px; margin-left:-50px; margin-top:-50px; top:25% } .guide-answer-icon:before { border-width:6px } .guide-answer-icon .icon { width:40px; height:40px; margin-top:-20px; margin-left:-20px } .guide-answer-bt { bottom:8% } .guide-answer-wrapper { max-width:440px; top:46% } } @media screen and (max-height:850px) { .guide-quest-wrapper { padding-top:15vh } } html.ie .grid-item { width:calc((100%/3) - 2px) } .grid { position:relative; z-index:10; font-size:0; min-height:100vh; padding-left:80px; } .grid-item { position:relative; display:inline-block; vertical-align:top; width:calc((100%/3) - 1px); border-bottom:1px solid #efefef; border-left:1px solid #efefef; cursor:pointer; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; overflow:hidden; pointer-events:none; background:white } .grid-item.shown { display:inline-block; pointer-events:auto; } .grid-item.shown { animation:moveup 0.6s; } @keyframes moveup { 0% { transform:translateY(20px); },100% { transform:translateY(0px); } } .grid-item.shown .grid-item__container { opacity:1 } .grid-item.hasEdge { border-right:1px solid #efefef } .grid-item:before { display:block; padding-top:70.33%; content:""; background:#f4f4f4; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); opacity:0 } .grid-item:after { position:absolute; z-index:0; top:-50%; right:-50%; bottom:-50%; left:-50%; margin:auto; width:100%; height:142%; border-radius:50%; background:#f8f8f8; content:""; -webkit-transition:-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(0); transform:scale(0) } .grid-item:hover:after { -webkit-transform:scale(1.5); transform:scale(1.5) } .grid-item:hover .grid-item__bg-gradient { opacity:1 } .grid-item:hover .grid-item__bg-gradient .colored { opacity:1 } .grid-item:hover .grid-item__bg-gradient .grey { opacity:0 } .grid-item:hover .grid-item__bg { opacity:1; -webkit-filter:grayscale(0%); filter:grayscale(0%) } .grid-item:hover .grid-item__bg-text { opacity:0 } .grid-item:hover .grid-item__bg-gradient:after { opacity:0 } .grid-item:hover .grid-item__visuals img { -webkit-transform:translate3d(0,-3px,0) scale(1.02); transform:translate3d(0,-3px,0) scale(1.02) } .grid-item__container,.grid-item__bg,.grid-item__visuals { position:absolute; top:0; left:0; height:100%; width:100% } .grid-item__container { z-index:1; opacity:0.3 } .grid-item__bg { overflow:hidden; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; font-size:120px; font-weight:800; color:#222; opacity:0.08; -webkit-filter:grayscale(100%); filter:grayscale(100%); -webkit-transition:all 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:all 1.4s cubic-bezier(0.165,0.84,0.44,1) } .grid-item__bg-gradient { position:absolute; z-index:1; top:0; left:0; right:0; margin:0 auto; width:90%; pointer-events:none } .grid-item__bg-gradient .colored { -webkit-transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1); opacity:0 } .grid-item__bg-gradient .grey { -webkit-transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1) } .grid-item__bg-text { position:absolute; z-index:2; left:0; width:100%; display:inline-block; vertical-align:middle; text-align:center; font-weight:600; font-size:7.5vw; line-height:12rem; color:#efefef; -webkit-transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 1.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,opacity 1.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s; -webkit-transform:translateY(-20%); transform:translateY(-20%); display:none } .grid-item__visuals img { position:absolute; z-index:3; top:15%; right:0; bottom:0; left:0; margin:auto; width:78.022%; -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); opacity:0 } .grid-item__visuals img.active { opacity:1; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .grid-item__visualsColors { position:absolute; bottom:40px; width:100%; text-align:center } .grid-item__visualsColors-item { position:relative; display:inline-block; width:12px; height:12px; margin:0 3px; border-radius:50%; cursor:auto; pointer-events:none; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .grid-item__visualsColors-item:hover { -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1.3); transform:scale(1.3) } .grid-item__title { position:relative; top:1.5%; text-align:center; line-height:3.6rem } .grid-item__name { display:inline-block; vertical-align:middle; font-size:2.3rem; font-weight:300; color:#222; font-family:roboto_regular; text-transform:uppercase } .grid-item__color { display:inline-block; vertical-align:middle; font-size:2rem; font-weight:600; line-height:2.8rem; color:white!important; background:#222; padding:0 8px; margin-left:10px; text-transform:uppercase } .grid-item__weatherIcon { position:absolute; bottom:40px; left:40px; width:30px; height:30px; border-radius:50%; background:#efefef } .grid-item__weatherIcon svg { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:13px; width:20px; fill:#222 } .grid-item__price { position:absolute; right:40px; bottom:40px; font-size:3rem; line-height:3rem; font-weight:600; color:#222 } .grid-reset { position:relative; display:none; vertical-align:top; width:calc((100%/3) - 1px); border-bottom:1px solid #efefef; border-left:1px solid #efefef; cursor:pointer; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1 } .grid-reset.shown { display:inline-block } .grid-reset.hasEdge { border-right:1px solid #efefef } .grid-reset:before { display:block; padding-top:70.33%; content:""; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); opacity:0 } .grid-reset:hover:before { opacity:0 } .grid-reset__container { position:absolute; top:0; height:100%; width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .grid-reset h4 { text-align:center; font-size:1.8rem; font-weight:600; color:#222; margin-bottom:2rem } .grid-reset__button { position:relative; display:block; margin:10px auto 0 auto; height:50px; border-radius:25px; padding:0 20px; -webkit-box-sizing:border-box; box-sizing:border-box; cursor:pointer; font-weight:600; width:180px; text-align:center } .grid-reset__button:hover span { color:white } .grid-reset__button .btn-bg:before { background:#1B5665 } .grid-reset__button:not(.disabled) { pointer-events:auto } .grid-reset__button span { position:relative; display:inline-block; vertical-align:middle; font-size:1.6rem; line-height:4.8rem; z-index:2; -webkit-transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1) } @media screen and (max-width:1440px) { .grid-item__color { line-height:2.6rem; font-size:1.8rem } .grid-item__visualsColors { bottom:30px } .grid-item__weatherIcon { left:30px; bottom:30px } .grid-item__price { right:30px; bottom:30px; font-size:2.6rem; line-height:2.6rem } } @media screen and (max-width:1100px) { .grid-item { width:calc(100% * (1/2) - 1px) } .grid-item__name { font-size:2rem } .grid-item__bg-text { font-size:12vw } .grid-reset { width:calc(100% * (1/2) - 1px) } } .sidebar { position:fixed; top:0; bottom:0; right:0; background-color:#ffffff; z-index:999; height:100vh; width:80px; overflow:hidden; -webkit-transform:translateX(-100%) translateX(80px); transform:translateX(-100%) translateX(80px); -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1) } .sidebar.open { -webkit-transform:translateX(0); transform:translateX(0) } .sidebar.open .sidebar-cat { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .sidebar.open .sidebar-right-filters { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0) } .sidebar.open .sidebar-right-filters-item { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0) } .sidebar.open .sidebar-right-valid { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .sidebar.hidden { -webkit-transform:translateX(-100%); transform:translateX(-100%) } .sidebar.hidden .sidebar-right-filters-item { -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0) } .sidebar.no-event { pointer-events:none } .sidebar.guide-mode .sidebar-right-filters-item { display:none } .sidebar.guide-mode .sidebar-right-filters-item.selected { display:block } .sidebar.guide-mode .sidebar-right-filters-item.selected:last-child { display:none } .sidebar-cat { display:block; width:calc(100% - 80px); font-size:0; white-space:nowrap; height:calc(100vh/3); -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0) } .sidebar-cat.col-2 .sidebar-cat-item { width:calc(100%/2) } .sidebar-cat.col-3 .sidebar-cat-item { width:calc(100%/3) } .sidebar-cat .sidebar-cat-item:last-child { border-right:0 } .sidebar-cat-item { border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; height:100%; display:inline-block; -webkit-box-sizing:border-box; box-sizing:border-box; text-align:center; line-height:calc(100vh/3); cursor:pointer; position:relative; padding-left:20px; padding-right:20px } .sidebar-cat-item:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; -webkit-transition:opacity 0.16s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.16s cubic-bezier(0.165,0.84,0.44,1); background:#333; } .sidebar-cat-item:before { content:""; display:block; position:absolute; top:0; left:-1px; width:calc(100% + 2px); height:calc(100% + 1px); opacity:0; background-color:#767676; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) } .sidebar-cat-item-title { font-size:25px; line-height:25px; font-weight:800; margin-top:22px; margin-bottom:5px } .sidebar-cat-item-icon { width:80px; height:80px; margin:0 auto; position:relative; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .sidebar-cat-item-icon:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; -webkit-box-sizing:border-box; box-sizing:border-box; border:6px solid #f3f3f3 } .sidebar-cat-item-icon .icon { width:32px; height:32px; position:absolute; top:50%; left:50%; margin-top:-16px; margin-left:-16px; fill:#222 } .sidebar-cat-item-desc { color:#fff; font-style:italic; font-size:14px; line-height:16px; position:absolute; width:100%; display:none } .sidebar-cat-item:hover:after { opacity:0.08 } .sidebar-cat-item.active .sidebar-cat-item-title,.sidebar-cat-item.selectAll .sidebar-cat-item-title { color:#fff } .sidebar-cat-item.active .sidebar-cat-item-icon:before,.sidebar-cat-item.selectAll .sidebar-cat-item-icon:before { border-color:#fff } .sidebar-cat-item.active .sidebar-cat-item-icon .icon,.sidebar-cat-item.selectAll .sidebar-cat-item-icon .icon { fill:#fff } .sidebar-cat-item.active .sidebar-cat-item-desc { display:block } .sidebar-cat-item.active:before,.sidebar-cat-item.selectAll:before { opacity:1 } .sidebar-cat-item.active:after,.sidebar-cat-item.selectAll:after { opacity:0.15 } .sidebar-cat-item.active:hover:before,.sidebar-cat-item.selectAll:hover:before { opacity:0.7 } .sidebar-cat-item.disable { background-color:#f3f3f3; pointer-events:none } .sidebar-cat-item.disable .sidebar-cat-item-inner { opacity:0.1 } .sidebar-cat-item.disable .sidebar-cat-item-title { color:#222 } .sidebar-cat-item.disable .sidebar-cat-item-icon:before { border-color:#222 } .sidebar-cat-item.disable .sidebar-cat-item-icon .icon { fill:#222 } .sidebar-cat-item-inner { display:inline-block; position:relative; margin:0 auto; max-width:350px; padding-top:20px; width:100%; white-space:normal; vertical-align:middle; line-height:1em; } } @media screen (max-width:320px) { .sidebar-cat-item-inner { vertical-align:inherit!important; } } .sidebar-right { width:80px; position:absolute; top:0; right:0; bottom:0; background-color:#222; overflow:hidden; } .sidebar-right-filters-icon { background:#2e6472!important; } .sidebar-right-valid { cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .sidebar-right-valid .icon { position:absolute; width:16px; height:16px; left:50%; top:50%; fill:#fff; margin-top:-8px; margin-left:-8px; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .sidebar-right-valid .icon.icon-check { -webkit-transform:rotate(15deg) scale(0); transform:rotate(15deg) scale(0) } .sidebar-right-valid .icon.close:before,.sidebar-right-valid .icon.close:after { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:16px; height:4px; background:white; border-radius:2px; content:""; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .sidebar-right-valid .icon.close:before { -webkit-transition-delay:0.2s; transition-delay:0.2s; -webkit-transform:rotate(45deg) scaleX(1); transform:rotate(45deg) scaleX(1) } .sidebar-right-valid .icon.close:after { -webkit-transform:rotate(-45deg) scaleX(1); transform:rotate(-45deg) scaleX(1); -webkit-transition-delay:0.3s; transition-delay:0.3s } .sidebar-right-valid:before { position:absolute; height:100%; width:98vh; content:""; background:#1B5665; -webkit-transition:opacity 0.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),opacity 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),opacity 0.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translateX(-50%) translateX(40px) scale(0); transform:translateX(-50%) translateX(40px) scale(0); border-radius:50%; opacity:0 } .sidebar-right-valid.active:before { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translateX(-50%) translateX(40px) scale(1.5); transform:translateX(-50%) translateX(40px) scale(1.5); opacity:1 } .sidebar-right-valid.active .icon-check { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1) } .sidebar-right-valid.active .icon.close:before { -webkit-transition-delay:0s; transition-delay:0s; -webkit-transform:rotate(45deg) scaleX(0); transform:rotate(45deg) scaleX(0) } .sidebar-right-valid.active .icon.close:after { -webkit-transition-delay:0s; transition-delay:0s; -webkit-transform:rotate(-45deg) scaleX(0); transform:rotate(-45deg) scaleX(0) } .sidebar-right-filters { cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; overflow:hidden; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1) } .sidebar-right-filters-item { width:100%; display:block; -webkit-box-sizing:border-box; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.05); position:relative; -webkit-box-flex:1; -ms-flex:1; flex:1; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1); transition:transform 0.8s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.8s cubic-bezier(0.77,0,0.175,1); -webkit-backface-visibility:hidden; backface-visibility:hidden } .sidebar-right-filters-item:hover .sidebar-right-filters-icon { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .sidebar-right-filters-item:hover .sidebar-right-filters-txt.no-selection { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .sidebar-right-filters-item:hover .sidebar-right-filters-txt.no-selection .sidebar-right-filters-txt-inner { -webkit-transform:translate(-50%,-50%) rotate(-90deg); transform:translate(-50%,-50%) rotate(-90deg) } .sidebar-right-filters-item.selected:hover .sidebar-right-filters-txt.selection { display:block; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .sidebar-right-filters-item.selected:hover .sidebar-right-filters-txt.selection .sidebar-right-filters-txt-inner { -webkit-transform:translate(-50%,-50%) rotate(-90deg); transform:translate(-50%,-50%) rotate(-90deg) } .sidebar-right-filters-item.selected .sidebar-right-filters-txt.no-selection { display:none } .sidebar-right-filters-item.selected .sidebar-right-filters-icon .icon:first-child { display:none!important } .sidebar-right-filters-item:nth-child(2) { -webkit-transition-delay:0.1s; transition-delay:0.1s } .sidebar-right-filters-item:nth-child(3) { -webkit-transition-delay:0.2s; transition-delay:0.2s } .sidebar-right-filters-icon { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#222; display:block } .sidebar-right-filters-icon .icon { fill:#fff; width:34px; height:34px; position:absolute; top:50%; left:50%; margin-top:-17px; margin-left:-17px; display:none } .sidebar-right-filters-icon .icon:first-child { display:block } .sidebar-right-filters-icon:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; } .sidebar-right-filters-txt { font-size:16px; color:#bbbbbb; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; line-height:0; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .sidebar-right-filters-txt strong { position:relative; font-weight:800; color:#222; line-height:0; display:block; margin-top:34px; margin-bottom:-24px } .sidebar-right-filters-txt-inner { position:absolute; top:50%; left:50%; width:calc(100vh/3); height:80px; line-height:80px; -webkit-transition:-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate(-50%,-50%) rotate(-90deg) translate3d(0,-20px,0); transform:translate(-50%,-50%) rotate(-90deg) translate3d(0,-20px,0) } .sidebar-right-filters-txt.no-selection { background-color:#eaeaea } .sidebar-right-filters-txt.selection { color:#fff } .sidebar-right-filters-txt.selection strong { color:#fff } .sidebar-right-filters-txt.selection:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100% } .sidebar-right-filters-txt.selection:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.1; } .sidebar-cat-item.good-weather:before,.sidebar-right-filters-item.good-weather:before { background:-webkit-gradient(linear,left bottom,right top,from(#e5e369),to(#53e1fb)); background:linear-gradient(to right top,#e5e369,#53e1fb) } .appall {} .sidebar-cat-item.good-weather .sidebar-right-filters-txt:before,.sidebar-right-filters-item.good-weather .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#e5e369),to(#53e1fb)); background:linear-gradient(to top,#e5e369,#53e1fb) } .sidebar-cat-item.good-weather .icon-good-weather,.sidebar-right-filters-item.good-weather .icon-good-weather { display:block } .sidebar-cat-item.bad-weather:before,.sidebar-right-filters-item.bad-weather:before { background:-webkit-gradient(linear,left bottom,right top,from(#839bae),to(#c9f1fb)); background:linear-gradient(to right top,#839bae,#c9f1fb) } .sidebar-cat-item.bad-weather .sidebar-right-filters-txt:before,.sidebar-right-filters-item.bad-weather .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#839bae),to(#c9f1fb)); background:linear-gradient(to top,#839bae,#c9f1fb) } .sidebar-cat-item.bad-weather .icon-bad-weather,.sidebar-right-filters-item.bad-weather .icon-bad-weather { display:block } .sidebar-cat-item.all-weather:before,.sidebar-right-filters-item.all-weather:before { background:-webkit-gradient(linear,left bottom,right top,from(#2978b9),to(#6adffb)); background:linear-gradient(to right top,#2978b9,#6adffb) } .sidebar-cat-item.all-weather .sidebar-right-filters-txt:before,.sidebar-right-filters-item.all-weather .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#2978b9),to(#6adffb)); background:linear-gradient(to top,#2978b9,#6adffb) } .sidebar-cat-item.all-weather .icon-all-weather,.sidebar-right-filters-item.all-weather .icon-all-weather { display:block } .sidebar-cat-item.glasses:before,.sidebar-right-filters-item.glasses:before { background:-webkit-gradient(linear,left bottom,right top,from(#2674ce),to(#67f2fb)); background:linear-gradient(to right top,#2674ce,#67f2fb) } .sidebar-cat-item.glasses .sidebar-right-filters-txt:before,.sidebar-right-filters-item.glasses .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#2674ce),to(#67f2fb)); background:linear-gradient(to top,#2674ce,#67f2fb) } .sidebar-cat-item.glasses .icon-glasses,.sidebar-right-filters-item.glasses .icon-glasses { display:block } .sidebar-cat-item.no-glasses:before,.sidebar-right-filters-item.no-glasses:before { background:-webkit-gradient(linear,left bottom,right top,from(#2674ce),to(#67f2fb)); background:linear-gradient(to right top,#2674ce,#67f2fb); } .sidebar-cat-item.no-glasses .sidebar-right-filters-txt:before,.sidebar-right-filters-item.no-glasses .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#4c62ba),to(#c693fa)); background:linear-gradient(to top,#4c62ba,#c693fa) } .sidebar-cat-item.no-glasses .icon-eye,.sidebar-right-filters-item.no-glasses .icon-eye { display:block } .sidebar-cat-item.cylindric:before,.sidebar-right-filters-item.cylindric:before { background:-webkit-gradient(linear,left bottom,right top,from(#4c62ba),to(#c693fa)); background:linear-gradient(to right top,#4c62ba,#c693fa); } .sidebar-cat-item.cylindric .sidebar-right-filters-txt:before,.sidebar-right-filters-item.cylindric .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#3567d6),to(#3ce9e0)); background:linear-gradient(to top,#3567d6,#3ce9e0) } .sidebar-cat-item.cylindric .icon-cylindric,.sidebar-right-filters-item.cylindric .icon-cylindric { display:block } .sidebar-cat-item.spheric:before,.sidebar-right-filters-item.spheric:before { background:-webkit-gradient(linear,left bottom,right top,from(#4c62ba),to(#c693fa)); background:linear-gradient(to right top,#4c62ba,#c693fa); } .sidebar-cat-item.spheric .sidebar-right-filters-txt:before,.sidebar-right-filters-item.spheric .sidebar-right-filters-txt:before { background:-webkit-gradient(linear,left bottom,left top,from(#6925d8),to(#c348ee)); background:linear-gradient(to top,#6925d8,#c348ee) } .sidebar-cat-item.spheric .icon-spheric,.sidebar-right-filters-item.spheric .icon-spheric { display:block } @media screen and (max-height:800px) { .sidebar-cat:nth-child(1) .sidebar-cat-item,.sidebar-cat:nth-child(3) .sidebar-cat-item { line-height:calc(83vh/3) } } .guide-quest { width:100%; height:100%; overflow:hidden; position:absolute; padding-left:40px; padding-right:40px; -webkit-box-sizing:border-box; box-sizing:border-box } .guide-quest.active .guide-quest-bgtitle span { opacity:0.6; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .guide-quest.active .guide-quest-bg:before { -webkit-animation:cycle 10s infinite 1s; animation:cycle 10s infinite 1s } .guide-quest.active .guide-quest-bg:after { -webkit-animation:cycle 10s infinite 2.5s; animation:cycle 10s infinite 2.5s } .guide-quest.active .guide-quest-icon-circle { stroke-dashoffset:0; -webkit-transition:all 3s cubic-bezier(0.455,0.03,0.515,0.955) 1s; transition:all 3s cubic-bezier(0.455,0.03,0.515,0.955) 1s } .guide-quest-weather .guide-quest-bg { background:-webkit-gradient(linear,left top,left bottom,from(#022B36),to( #022B36)); background:linear-gradient(to bottom,#022B36,#022B36); } .guide-quest-weather .guide-quest-bg:before { background:-webkit-gradient(linear,left bottom,right top,from(#00c4f9),to(#e6e66b)); background:linear-gradient(to top right,#00c4f9,#e6e66b) } .guide-quest-weather .guide-quest-bg:after { background:-webkit-gradient(linear,left top,right bottom,from(#022B36),to(#022B36)); background:linear-gradient(to bottom right,#022B36,#022B36) } .guide-quest-weather .guide-quest-steps-nums,.guide-quest-weather .guide-quest-steps-mask svg { -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0) } .guide-quest-weather .guide-quest-steps-mask { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .guide-quest-weather.active .guide-quest-steps-nums { -webkit-transform:translate3d(83%,0,0); transform:translate3d(83%,0,0) } .guide-quest-weather.active .guide-quest-steps-mask { -webkit-transform:translate3d(-83%,0,0); transform:translate3d(-83%,0,0) } .guide-quest-weather.active .guide-quest-steps-mask svg { -webkit-transform:translate3d(83%,0,0); transform:translate3d(83%,0,0) } .guide-quest-glasses .guide-quest-title { padding:0 80px; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:70px; margin-left:auto; margin-right:auto } .guide-quest-glasses .guide-quest-bg { background:-webkit-gradient(linear,left top,left bottom,from(#845fbd),to(#0A050B)); background:linear-gradient(to bottom,#845fbd,#0A050B); } .guide-quest-glasses .guide-quest-bg:before { background:-webkit-gradient(linear,left bottom,right top,from(#0A050B),to(#845fbd)); background:linear-gradient(to top right,#0A050B,#845fbd) } .guide-quest-glasses .guide-quest-bg:after { background:-webkit-gradient(linear,left top,right bottom,from( #845fbd),to(#0A050B)); background:linear-gradient(to bottom,#845fbd,#0A050B); } .guide-quest-glasses .guide-quest-steps-nums,.guide-quest-glasses .guide-quest-steps-mask svg { -webkit-transform:translate3d(83%,0,0); transform:translate3d(83%,0,0) } .guide-quest-glasses .guide-quest-steps-mask { -webkit-transform:translate3d(-83%,0,0); transform:translate3d(-83%,0,0) } .guide-quest-glasses.active .guide-quest-steps-nums { -webkit-transform:translate3d(44%,0,0); transform:translate3d(44%,0,0) } .guide-quest-glasses.active .guide-quest-steps-mask { -webkit-transform:translate3d(-44%,0,0); transform:translate3d(-44%,0,0) } .guide-quest-glasses.active .guide-quest-steps-mask svg { -webkit-transform:translate3d(44%,0,0); transform:translate3d(44%,0,0) } .guide-quest-shape .guide-quest-bg { background:-webkit-gradient(linear,left top,left bottom,from(#022B36),to(#022B36)); background:linear-gradient(to bottom,#022B36,#022B36); } .guide-quest-shape .guide-quest-bg:before { background:-webkit-gradient(linear,left bottom,right top,from(#00c4f9),to(#e6e66b)); background:linear-gradient(to top right,#00c4f9,#e6e66b); } .guide-quest-shape .guide-quest-bg:after { background:-webkit-gradient(linear,left top,right bottom,from(#022B36),to(#022B36)); background:linear-gradient(to bottom right,#022B36,#022B36); } .guide-quest-shape .guide-quest-steps-nums,.guide-quest-shape .guide-quest-steps-mask svg { -webkit-transform:translate3d(44%,0,0); transform:translate3d(44%,0,0) } .guide-quest-shape .guide-quest-steps-mask { -webkit-transform:translate3d(-44%,0,0); transform:translate3d(-44%,0,0) } .guide-quest-shape.active .guide-quest-steps-nums { -webkit-transform:translate3d(0%,0,0); transform:translate3d(0%,0,0) } .guide-quest-shape.active .guide-quest-steps-mask { -webkit-transform:translate3d(0%,0,0); transform:translate3d(0%,0,0) } .guide-quest-shape.active .guide-quest-steps-mask svg { -webkit-transform:translate3d(0%,0,0); transform:translate3d(0%,0,0) } .guide-quest.guide-result .guide-quest-bg { background:-webkit-gradient(linear,left top,left bottom,from(#170D18),to(#603d6f)); background:linear-gradient(to bottom,#170D18,#603d6f); } .guide-quest.guide-result .guide-quest-bg:before { background:-webkit-gradient(linear,left top,right bottom,from(#2f2d2f),to(#b993c7)); background:linear-gradient(to bottom right,#2f2d2f,#b993c7) } .guide-quest.guide-result .guide-quest-bg:after { background:-webkit-gradient(linear,left top,right bottom,from(#673973),to(#5b3c6b)); background:linear-gradient(to bottom right,#673973,#5b3c6b) } @-webkit-keyframes cycle { 0% { opacity:0 } 50% { opacity:1 } 100% { opacity:0 } } @keyframes cycle { 0% { opacity:0 } 50% { opacity:1 } 100% { opacity:0 } } .guide-quest-inner { position:absolute; left:0; top:0; width:100%; height:100% } .guide-quest-inner:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.15; } .guide-quest-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#e6e46a; background:-webkit-gradient(linear,left top,left bottom,from(#e6e46a),to(#57e5fd)); background:linear-gradient(to bottom,#e6e46a 0%,#57e5fd 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e46a',endColorstr='#57e5fd',GradientType=0) } .guide-quest-bg:before,.guide-quest-bg:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0 } .guide-quest-bgtitle { position:absolute; left:0; width:100%; font-size:0; line-height:60px; font-weight:800; opacity:0.1; color:#fff; display:block; text-align:center } .guide-quest-bgtitle span { position:relative; display:inline-block; font-size:16vw; opacity:0; -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate3d(0,-140px,0); transform:translate3d(0,-140px,0) } .guide-quest-bgtitle span:nth-child(1) { -webkit-transition-delay:.3s; transition-delay:.3s } .guide-quest-bgtitle span:nth-child(2) { -webkit-transition-delay:.4s; transition-delay:.4s } .guide-quest-bgtitle span:nth-child(3) { -webkit-transition-delay:.5s; transition-delay:.5s } .guide-quest-bgtitle span:nth-child(4) { -webkit-transition-delay:.6s; transition-delay:.6s } .guide-quest-bgtitle span:nth-child(5) { -webkit-transition-delay:.7s; transition-delay:.7s } .guide-quest-bgtitle span:nth-child(6) { -webkit-transition-delay:.8s; transition-delay:.8s } .guide-quest-bgtitle span:nth-child(7) { -webkit-transition-delay:.9s; transition-delay:.9s } .guide-quest-bgtitle span:nth-child(8) { -webkit-transition-delay:1s; transition-delay:1s } .guide-quest-bgtitle span:nth-child(9) { -webkit-transition-delay:1.1s; transition-delay:1.1s } .guide-quest-bgtitle span:nth-child(10) { -webkit-transition-delay:1.2s; transition-delay:1.2s } .guide-quest-bgtitle span:nth-child(11) { -webkit-transition-delay:1.3s; transition-delay:1.3s } .guide-quest-wrapper { text-align:center; position:absolute; width:100%; color:#fff; padding-top:30vh; z-index:2 } .guide-quest-icon { width:160px; height:160px; position:relative; margin:0 auto; margin-bottom:40px } .guide-quest-icon:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; -webkit-box-sizing:border-box; box-sizing:border-box; border:10px solid #fff; opacity:0.3 } .guide-quest-icon-circle { stroke:#fff; stroke-width:10px; fill:transparent; position:absolute; top:0; left:0; width:100%; height:100%; stroke-dasharray:471 471; stroke-dashoffset:471; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-transition:all 1s cubic-bezier(0.77,0,0.175,1) 0s; transition:all 1s cubic-bezier(0.77,0,0.175,1) 0s } .guide-quest-icon .icon { fill:#fff; position:absolute; top:50%; left:50%; width:52px; height:52px; margin-top:-26px; margin-left:-26px } .guide-quest-num { font-size:16px; line-height:16px; font-weight:200; letter-spacing:0.2em; margin-bottom:10px; text-transform:uppercase } .guide-quest-title { font-weight:800; font-size:80px; line-height:60px; margin-top:25px; margin-bottom:46px } .guide-quest-steps { line-height:0; font-size:0; position:relative; width:320px; height:45px; margin:0 auto } .guide-quest-step { display:inline-block; font-size:16px; font-weight:800; width:40px; height:40px; line-height:40px; border-radius:100%; position:relative; top:0px } .guide-quest-step:first-child { margin-right:100px } .guide-quest-step:last-child { margin-left:100px } .guide-quest-steps-bg { position:absolute; left:0; top:0; width:100%; color:#fff } .guide-quest-steps-bg .guide-quest-step:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; background-color:#222; opacity:0.1 } .guide-quest-steps-bg .guide-quest-step:after { content:""; display:block; width:100px; background-color:#222; opacity:0.1; height:5px; position:absolute; left:40px; top:18px } .guide-quest-steps-bg .guide-quest-step:last-child:after { display:none } .guide-quest-steps-shape { position:absolute; left:0; width:100%; height:100% } .guide-quest-steps-nums { position:absolute; top:40px; left:0; width:320px; height:100%; color:#222; text-align:center; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s,-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s } .guide-quest-steps-mask { border-radius:0 100% 100% 0%; overflow:hidden; width:100%; height:120px; text-align:right; position:relative; top:-40px; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s,-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s } .guide-quest-steps-mask svg { margin-top:40px; display:inline-block; -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s; transition:transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s,-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) 1.9s } .guide-result .guide-quest-wrapper { left:0 } .guide-result-title { font-weight:200; font-size:24px; line-height:26px; text-transform:uppercase; letter-spacing:0.2em } .guide-result-title span { display:block } .guide-result-title strong { font-weight:800; font-size:80px; line-height:80px; display:block; text-transform:none; letter-spacing:0em } .guide-result-nbr { font-size:150px; line-height:120px; height:115px; font-weight:800; margin-top:50px; overflow:hidden } .guide-result-nbr span { display:block; opacity:0 } .guide-result-nbr span.visible { opacity:1 } .guide-result-label { font-size:24px; line-height:28px; font-weight:200; position:relative; opacity:0.5; display:inline-block } .guide-result-label:after { content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#fff } .guide-quest .guide-quest-num,.guide-quest .guide-quest-title,.guide-quest .guide-quest-icon,.guide-quest .guide-quest-steps,.guide-quest .guide-result-title strong,.guide-quest .guide-result-title span,.guide-quest .guide-result-label,.guide-quest .guide-result-nbr { opacity:0; -webkit-transform:translate3d(0,100px,0); transform:translate3d(0,100px,0) } .guide-quest.active .guide-quest-num,.guide-quest.active .guide-quest-title,.guide-quest.active .guide-quest-icon,.guide-quest.active .guide-quest-steps,.guide-quest.active .guide-result-title,.guide-quest.active .guide-result-title strong,.guide-quest.active .guide-result-title span,.guide-quest.active .guide-result-label,.guide-quest.active .guide-result-nbr { opacity:1; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955) .3s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) .3s; transition:opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955) .3s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) .3s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) .3s,opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955) .3s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) .3s,opacity 0.6s cubic-bezier(0.455,0.03,0.515,0.955) .3s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) .3s } .guide-quest.active .guide-quest-icon { -webkit-transition-delay:0.9s; transition-delay:0.9s } .guide-quest.active .guide-quest-num { -webkit-transition-delay:1.05s; transition-delay:1.05s } .guide-quest.active .guide-quest-title { -webkit-transition-delay:1.2s; transition-delay:1.2s } .guide-quest.active .guide-quest-steps { -webkit-transition-delay:1.35s; transition-delay:1.35s } .guide-quest.active .guide-result-title strong { -webkit-transition-delay:0.9s; transition-delay:0.9s } .guide-quest.active .guide-result-title span { -webkit-transition-delay:1.05s; transition-delay:1.05s } .guide-quest.active .guide-result-label { -webkit-transition-delay:1.2s; transition-delay:1.2s } .guide-quest.active .guide-result-nbr { -webkit-transition-delay:1.05s; transition-delay:1.05s } @media screen and (max-width:1020px) { .guide-quest-bgtitle { line-height:30px; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%) } .guide-quest-bgtitle span { font-size:150px } .guide-quest-title { font-size:55px!important } } @media screen and (max-height:850px) { .guide-result .guide-quest-wrapper { padding-top:25vh } } .guide-aweather { font-size:0 } .guide-aweather-item { width:calc(100%/3) } .guide-aweather-mountain-bg { position:absolute; bottom:-40px; left:50%; margin-left:-640px; width:1280px; height:306px; opacity:0.03 } .guide-aweather-mountain-top { position:absolute; bottom:0; left:50%; margin-left:-560px; width:1120px; height:117px; opacity:0.05 } .guide-aweather-mountain-top-shadows-left,.guide-aweather-mountain-top-shadows-right { fill:white; opacity:0 } .guide-aweather-sun { position:absolute; width:170px; height:170px; border-radius:100%; top:37%; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-sun span:before,.guide-aweather-sun span:after { -webkit-transform:scale(1); transform:scale(1); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-sun-container { position:absolute; top:0; left:0; width:100%; height:100% } .guide-aweather-sun-container:before,.guide-aweather-sun-container:after { content:"" } .guide-aweather-sun-container span,.guide-aweather-sun-container:before,.guide-aweather-sun-container:after { background-color:#fdffe8; width:100%; height:100%; border-radius:100%; position:absolute; top:0; left:0 } .guide-aweather-sun-container:before { -webkit-transform:scale(1.2); transform:scale(1.2); opacity:0.5 } .guide-aweather-sun-container:after { -webkit-transform:scale(1.4); transform:scale(1.4); opacity:0.3 } .guide-aweather-sun-container span:after,.guide-aweather-sun-container span:before { content:""; display:block; background-color:#fdffe8; border-radius:100%; width:100%; height:100%; position:absolute; top:0; left:0 } .guide-aweather-sun-container span:before { -webkit-transform:scale(1.6); transform:scale(1.6); opacity:0 } .guide-aweather-sun-container span:after { -webkit-transform:scale(4); transform:scale(4); opacity:0; background:radial-gradient(circle at center,#fdffe8 0,rgba(255,255,255,0) 70%) } .guide-aweather-sun-hover .guide-aweather-sun-container,.guide-aweather-good:hover .guide-aweather-sun-container,.guide-aweather-all:hover .guide-aweather-sun-container { -webkit-animation:sunContainer 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1s; animation:sunContainer 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1s } .guide-aweather-sun-hover .guide-aweather-sun-container span:before,.guide-aweather-good:hover .guide-aweather-sun-container span:before,.guide-aweather-all:hover .guide-aweather-sun-container span:before,.guide-aweather-sun-hover .guide-aweather-sun-container span:after,.guide-aweather-good:hover .guide-aweather-sun-container span:after,.guide-aweather-all:hover .guide-aweather-sun-container span:after { -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-sun-hover .guide-aweather-sun-container:before,.guide-aweather-good:hover .guide-aweather-sun-container:before,.guide-aweather-all:hover .guide-aweather-sun-container:before { -webkit-animation:sunBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.2s; animation:sunBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.2s } .guide-aweather-sun-hover .guide-aweather-sun-container:after,.guide-aweather-good:hover .guide-aweather-sun-container:after,.guide-aweather-all:hover .guide-aweather-sun-container:after { -webkit-animation:sunAfter 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.4s; animation:sunAfter 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.4s } .guide-aweather-sun-hover .guide-aweather-sun-container span:before,.guide-aweather-good:hover .guide-aweather-sun-container span:before,.guide-aweather-all:hover .guide-aweather-sun-container span:before { -webkit-animation:sunSpanBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.6s; animation:sunSpanBefore 2s cubic-bezier(0.455,0.03,0.515,0.955) infinite 1.6s } .guide-aweather-sun-hover .guide-aweather-sun-container span:before,.guide-aweather-good:hover .guide-aweather-sun-container span:before,.guide-aweather-all:hover .guide-aweather-sun-container span:before { -webkit-transform:scale(1.6); transform:scale(1.6); opacity:0.15 } .guide-aweather-sun-hover .guide-aweather-sun-container span:after,.guide-aweather-good:hover .guide-aweather-sun-container span:after,.guide-aweather-all:hover .guide-aweather-sun-container span:after { -webkit-transform:translate3d(0,0,0) scale(4); transform:translate3d(0,0,0) scale(4); opacity:0.5 } .guide-aweather-reflects { display:block; position:absolute; border-radius:100%; z-index:0 } .guide-aweather-reflects span { display:block; position:absolute; border-radius:100%; top:0; left:0; width:100%; height:100% } .guide-aweather-reflects-1,.guide-aweather-reflects-2,.guide-aweather-reflects-3,.guide-aweather-reflects-4 { display:block; width:100%; height:100%; border-radius:100%; position:absolute; opacity:0.2; -webkit-box-sizing:border-box; box-sizing:border-box; opacity:0; -webkit-transform:translate3d(-80px,0,0) scale(0); transform:translate3d(-80px,0,0) scale(0); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s } .guide-aweather-reflects-1 { width:130px; height:130px; top:0; left:0; z-index:1 } .guide-aweather-reflects-1 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 48%,rgba(122,229,217,0.2) 47%,#fdffe8 100%) } .guide-aweather-reflects-2 { width:200px; height:200px; left:45px; top:20px; z-index:1 } .guide-aweather-reflects-2 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 58%,rgba(122,229,217,0.2) 57%,#fdffe8 100%) } .guide-aweather-reflects-3 { width:420px; height:420px; left:20px; top:-40px; z-index:0 } .guide-aweather-reflects-3 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 58%,rgba(122,229,217,0.2) 57%,#fdffe8 100%) } .guide-aweather-reflects-4 { width:70px; height:70px; left:62px; top:50px; z-index:0 } .guide-aweather-reflects-4 span { background-color:#fdffe8 } .guide-aweather-reflects.reverse .guide-aweather-reflects-1 { right:0; left:auto } .guide-aweather-reflects.reverse .guide-aweather-reflects-1 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 62%,rgba(122,229,217,0.2) 61%,#fdffe8 100%) } .guide-aweather-reflects.reverse .guide-aweather-reflects-2 { right:45px; left:auto } .guide-aweather-reflects.reverse .guide-aweather-reflects-2 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 62%,rgba(122,229,217,0.2) 61%,#fdffe8 100%) } .guide-aweather-reflects.reverse .guide-aweather-reflects-3 { right:20px; left:auto } .guide-aweather-reflects.reverse .guide-aweather-reflects-3 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 65%,rgba(122,229,217,0.2) 64%,#fdffe8 100%) } .guide-aweather-reflects.reverse .guide-aweather-reflects-4 { right:62px; left:auto } .guide-aweather-reflects-hover .guide-aweather-reflects-1,.guide-aweather-good:hover .guide-aweather-reflects-1,.guide-aweather-all:hover .guide-aweather-reflects-1,.guide-aweather-reflects-hover .guide-aweather-reflects-2,.guide-aweather-good:hover .guide-aweather-reflects-2,.guide-aweather-all:hover .guide-aweather-reflects-2,.guide-aweather-reflects-hover .guide-aweather-reflects-3,.guide-aweather-good:hover .guide-aweather-reflects-3,.guide-aweather-all:hover .guide-aweather-reflects-3,.guide-aweather-reflects-hover .guide-aweather-reflects-4,.guide-aweather-good:hover .guide-aweather-reflects-4,.guide-aweather-all:hover .guide-aweather-reflects-4 { -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1),opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1),opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-reflects-hover .guide-aweather-reflects-1,.guide-aweather-good:hover .guide-aweather-reflects-1,.guide-aweather-all:hover .guide-aweather-reflects-1 { -webkit-transform:scale(1); transform:scale(1); opacity:0.2 } .guide-aweather-reflects-hover .guide-aweather-reflects-2,.guide-aweather-good:hover .guide-aweather-reflects-2,.guide-aweather-all:hover .guide-aweather-reflects-2 { -webkit-transform:scale(1); transform:scale(1); opacity:0.2; -webkit-transition-delay:0.2s; transition-delay:0.2s } .guide-aweather-reflects-hover .guide-aweather-reflects-3,.guide-aweather-good:hover .guide-aweather-reflects-3,.guide-aweather-all:hover .guide-aweather-reflects-3 { -webkit-transform:scale(1); transform:scale(1); opacity:0.2; -webkit-transition-delay:0.15s; transition-delay:0.15s } .guide-aweather-reflects-hover .guide-aweather-reflects-4,.guide-aweather-good:hover .guide-aweather-reflects-4,.guide-aweather-all:hover .guide-aweather-reflects-4 { -webkit-transform:scale(1); transform:scale(1); opacity:0.1; -webkit-transition-delay:0.3s; transition-delay:0.3s } .guide-aweather-canvas { position:absolute; top:0; left:0; width:100%; height:100% } @-webkit-keyframes sunBefore { 0% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } 50% { opacity:0.2; -webkit-transform:scale(1.15); transform:scale(1.15) } 100% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } } @keyframes sunBefore { 0% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } 50% { opacity:0.2; -webkit-transform:scale(1.15); transform:scale(1.15) } 100% { opacity:0.5; -webkit-transform:scale(1.2); transform:scale(1.2) } } @-webkit-keyframes sunAfter { 0% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } 50% { opacity:0.1; -webkit-transform:scale(1.35); transform:scale(1.35) } 100% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } } @keyframes sunAfter { 0% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } 50% { opacity:0.1; -webkit-transform:scale(1.35); transform:scale(1.35) } 100% { opacity:0.3; -webkit-transform:scale(1.4); transform:scale(1.4) } } @-webkit-keyframes sunSpanBefore { 0% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } 50% { opacity:0.05; -webkit-transform:scale(1.55); transform:scale(1.55) } 100% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } } @keyframes sunSpanBefore { 0% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } 50% { opacity:0.05; -webkit-transform:scale(1.55); transform:scale(1.55) } 100% { opacity:0.15; -webkit-transform:scale(1.6); transform:scale(1.6) } } @-webkit-keyframes sunContainer { 0% { -webkit-transform:scale(1); transform:scale(1) } 50% { -webkit-transform:scale(0.97); transform:scale(0.97) } 100% { -webkit-transform:scale(1); transform:scale(1) } } @keyframes sunContainer { 0% { -webkit-transform:scale(1); transform:scale(1) } 50% { -webkit-transform:scale(0.97); transform:scale(0.97) } 100% { -webkit-transform:scale(1); transform:scale(1) } } .guide-aweather-good { background:-webkit-gradient(linear,left top,left bottom,from(#00617b),color-stop(#022B36),to(#00c1f5)); background:linear-gradient(to bottom,#00617b,#022B36,#00c1f5); } .guide-aweather-good .guide-aweather-mountain-bg { z-index:2 } .guide-aweather-good .guide-aweather-mountain-top { z-index:3 } .guide-aweather-good .guide-aweather-mountain-top-shadows-left { -webkit-transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955) 0s; transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955) 0s } .guide-aweather-good .guide-aweather-sun { -webkit-transform:scale(1); transform:scale(1); left:-85px; -webkit-transform-origin:120% 120%; transform-origin:120% 120% } .guide-aweather-good .guide-aweather-reflects { left:130px; top:50%; z-index:1 } .guide-aweather-good .guide-aweather-reflects-1,.guide-aweather-good .guide-aweather-reflects-2,.guide-aweather-good .guide-aweather-reflects-3,.guide-aweather-good .guide-aweather-reflects-4 { opacity:0; -webkit-transform:translate3d(-200px,-100px,0) scale(0.4); transform:translate3d(-200px,-100px,0) scale(0.4); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-good:hover .guide-aweather-sun { -webkit-transform:translate3d(0,15%,0) rotate(40deg) scale(1.15); transform:translate3d(0,15%,0) rotate(40deg) scale(1.15) } .guide-aweather-good:hover .guide-aweather-mountain-top-shadows-left { opacity:0.6 } .guide-answer-cloud { position:absolute; width:364px; height:272px; left:30% } .guide-answer-cloud-img { position:absolute; top:0; left:0; width:100% } .guide-aweather-bad { background:-webkit-gradient(linear,left top,left bottom,from(#000000),color-stop(#022B36),to(#1f2f33)); background:linear-gradient(to bottom,#000000,#022B36,#1f2f33); } .guide-aweather-bad .guide-aweather-mountain-top { opacity:1; fill:#859eb0 } .guide-aweather-bad .guide-answer-cloud-center { top:40%; left:30% } .guide-aweather-bad .guide-answer-cloud-mountain { bottom:-120px; left:0; z-index:0; opacity:0; -webkit-transform:translate3d(-120px,20px,0); transform:translate3d(-120px,20px,0); -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 0.8s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 0.8s; transition:transform 0s cubic-bezier(0.165,0.84,0.44,1) 0.8s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 0s cubic-bezier(0.165,0.84,0.44,1) 0.8s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 0.8s } .guide-aweather-bad .guide-aweather-mountain-top-gradient { z-index:4; opacity:0; -webkit-transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955); transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955) } .guide-aweather-bad:hover .guide-answer-cloud-mountain { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity:1; -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s,opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s,opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .guide-aweather-bad:hover .guide-aweather-mountain-top-gradient { opacity:1 } .guide-aweather-all { background:-webkit-gradient(linear,left top,left bottom,from(#00617b),color-stop(#022B36),to(#00c1f5)); background:linear-gradient(to bottom,#00617b,#022B36,#00c1f5); } .guide-aweather-all .guide-aweather-mountain-bg { z-index:2 } .guide-aweather-all .guide-aweather-mountain-top { z-index:9; opacity:1; fill:#2c7abc } .guide-aweather-all .guide-aweather-mountain-top-shadows-right { -webkit-transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955) 0s; transition:opacity 1.2s cubic-bezier(0.455,0.03,0.515,0.955) 0s } .guide-aweather-all .guide-answer-cloud-center { bottom:5%; left:3% } .guide-aweather-all .guide-answer-cloud-mountain { bottom:0px; left:10%; z-index:0; -webkit-transform:translate3d(0,120px,0); transform:translate3d(0,120px,0); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s } .guide-aweather-all .guide-aweather-sun { right:-57px; top:39%; width:115px; height:115px; -webkit-transform:scale(1); transform:scale(1); -webkit-transform-origin:0% 180%; transform-origin:0% 180% } .guide-aweather-all .guide-aweather-reflects { right:140px; top:45%; z-index:1 } .guide-aweather-all .guide-aweather-reflects-1,.guide-aweather-all .guide-aweather-reflects-2,.guide-aweather-all .guide-aweather-reflects-3,.guide-aweather-all .guide-aweather-reflects-4 { opacity:0; -webkit-transform:translate3d(200px,-100px,0) scale(0.4); transform:translate3d(200px,-100px,0) scale(0.4); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aweather-all:hover .guide-aweather-sun { -webkit-transform:translate3d(0%,-25%,0) rotate(-50deg) scale(1.25); transform:translate3d(0%,-25%,0) rotate(-50deg) scale(1.25) } .guide-aweather-all:hover .guide-aweather-mountain-top-shadows-right { opacity:0.1 } @media screen and (max-width:1020px) { .guide-aweather-good .guide-aweather-sun { top:10% } .guide-aweather-bad .guide-answer-cloud-center { top:20% } .guide-aweather-all .guide-aweather-sun { top:10% } } .guide-aglasses { font-size:0 } .guide-aglasses-item { width:calc(100%/3) } .guide-aglasses-item:nth-child(1) { width:calc((100% + 80px)/3) } .guide-aglasses-item:nth-child(1) .guide-answer-item-inner { left:40px } .guide-aglasses-item:nth-child(2) { width:calc((100% - 80px)/3) } .guide-aglasses-item:nth-child(3) { width:calc((100% - 0px)/3) } .col2-steps-item { width:calc(100%/2) } .col2-steps-item:nth-child(1) { width:calc((100% + 80px)/2) } .col2-steps-item:nth-child(1) .guide-answer-item-inner { left:40px } .col2-steps-item:nth-child(2) { width:calc((100% - 80px)/2) } .col4-steps-item { width:calc(100%/4) } .col4-steps-item:nth-child(1) { width:calc((100%)/4) } .col4-steps-item:nth-child(2) { width:calc((100%)/4) } .col4-steps-item:nth-child(3) { width:calc((100%)/4) } .col4-steps-item:nth-child(4) { width:calc((100%)/4) } .col5-steps-item { width:calc(100%/5); } .guide-answer { padding-right:80px; } .guide_page .guide-answer { padding-right:0px; } .guide_page .sidebar { display:none; } .sidebar {} .flex-container-laminate { display:flex; flex-wrap:wrap; width:100%; padding-right:80px; } .grid-item-laminates { background:linear-gradient(to bottom,#177086,#083d4a,#421a4e); width:20%; height:50%; } .lami-bg-1 { background:linear-gradient(to bottom,#2b9bb7,#205e6d,#103842); } .lami-bg-2 { background:linear-gradient(to bottom,#2f6872,#41c5da,#008598); } .grid-item-laminates .guide-answer-icon { width:80px; height:80px; position:absolute; margin:0 auto; top:50%; left:50%; margin-left:-50px; margin-top:-2px; z-index:10; } .grid-item-laminates .guide-answer-icon .icon { width:20px; height:20px; margin-top:-8px; margin-left:-8px; } .grid-item-laminates .guide-answer-title { font-size:18px; line-height:23px; } .grid-item-laminates .btn-bg { height:42px; } .grid-item-laminates .guide-answer-bt { width:147px; margin:0 auto 0 -76px; line-height:30px; } .grid-item-laminates .guide-answer-wrapper { top:18vh; } .grid-item-laminates .guide-answer-bt { bottom:9vh; height:42px; } .guide-aglasses-yes { background:-webkit-gradient(linear,left top,left bottom,from( #177086),color-stop( #083d4a),to(#421a4e)); background:linear-gradient(to bottom,#177086,#083d4a,#421a4e); } .guide-aglasses-yes:before { z-index:0; content:""; display:block; top:0; left:0; width:100%; height:100%; position:absolute; opacity:0; background:-webkit-gradient(linear,left top,left bottom,from(#266370),to(#0c323a)); background:linear-gradient(to bottom,#266370,#0c323a); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-yes:after { z-index:2 } .guide-aglasses-yes .guide-aglasses-sun { left:-85px } .guide-aglasses-yes .guide-aglasses-glasses { position:absolute; top:-15%; left:-30%; height:135%; -webkit-transition:-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-yes .guide-aglasses-glasses-shape-2,.guide-aglasses-yes .guide-aglasses-glasses-bg-2 { opacity:0; -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-yes .guide-aglasses-glasses-inner { opacity:0; -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-yes .guide-aglasses-reflect-1 { fill:#fff } .guide-aglasses-yes .guide-aglasses-reflects { opacity:0.1 } .guide-aglasses-yes .guide-aglasses-reflects-nohover { -webkit-transform:translate3d(100px,100px,0) scale(1.2); transform:translate3d(100px,100px,0) scale(1.2); -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-aglasses-yes .guide-aglasses-reflects-hover { opacity:0; -webkit-transform:translate3d(400px,400px,0) scale(2); transform:translate3d(400px,400px,0) scale(2); -webkit-transition:opacity 0.5s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.5s cubic-bezier(0.77,0,0.175,1); transition:opacity 0.5s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.5s cubic-bezier(0.77,0,0.175,1); transition:opacity 0.5s cubic-bezier(0.77,0,0.175,1),transform 0.5s cubic-bezier(0.77,0,0.175,1); transition:opacity 0.5s cubic-bezier(0.77,0,0.175,1),transform 0.5s cubic-bezier(0.77,0,0.175,1),-webkit-transform 0.5s cubic-bezier(0.77,0,0.175,1); -webkit-transition-delay:0s; transition-delay:0s } .guide-aglasses-yes .guide-aglasses-whiteshadow { opacity:0.8; -webkit-transform:translate3d(100%,100%,0) scale(2); transform:translate3d(100%,100%,0) scale(2); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 1s; transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 1s; transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 0s cubic-bezier(0.165,0.84,0.44,1) 1s; transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 0s cubic-bezier(0.165,0.84,0.44,1) 1s,-webkit-transform 0s cubic-bezier(0.165,0.84,0.44,1) 1s; -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-aglasses-yes:hover .guide-aglasses-glasses { -webkit-transform:scale(0.9); transform:scale(0.9) } .guide-aglasses-yes:hover .guide-aglasses-glasses-shape-2,.guide-aglasses-yes:hover .guide-aglasses-glasses-bg-2 { opacity:1 } .guide-aglasses-yes:hover .guide-aglasses-glasses-inner { opacity:1 } .guide-aglasses-yes:hover .guide-aglasses-reflects-nohover { -webkit-transform:translate3d(-200px,-200px,0) scale(0.6); transform:translate3d(-200px,-200px,0) scale(0.6); opacity:0; -webkit-transition:opacity 1s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1); transition:opacity 1s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1); transition:opacity 1s cubic-bezier(0.77,0,0.175,1),transform 1s cubic-bezier(0.77,0,0.175,1); transition:opacity 1s cubic-bezier(0.77,0,0.175,1),transform 1s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1) } .guide-aglasses-yes:hover .guide-aglasses-reflects-hover { opacity:0.5; -webkit-transform:translate3d(80px,80px,0) scale(1); transform:translate3d(80px,80px,0) scale(1); -webkit-transition:opacity 0.5s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.5s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.5s cubic-bezier(0.165,0.84,0.44,1),transform 0.5s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.5s cubic-bezier(0.165,0.84,0.44,1),transform 0.5s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.5s cubic-bezier(0.165,0.84,0.44,1); -webkit-transition-delay:0.6s; transition-delay:0.6s } .guide-aglasses-yes:hover .guide-aglasses-whiteshadow { -webkit-transform:translate3d(-150%,-150%,0) scale(5); transform:translate3d(-150%,-150%,0) scale(5); -webkit-transition:opacity 1.7s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.7s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.7s cubic-bezier(0.165,0.84,0.44,1),transform 1.7s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.7s cubic-bezier(0.165,0.84,0.44,1),transform 1.7s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.7s cubic-bezier(0.165,0.84,0.44,1); -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-aglasses-yes:hover:before { z-index:0; opacity:1 } .guide-aglasses-no { background:-webkit-gradient(linear,left top,left bottom,from(#293b4b),color-stop( #2c414b),to(#794d86)); background:linear-gradient(to bottom,#293b4b,#2c414b,#794d86); } .guide-aglasses-no .guide-aglasses-eye { position:absolute; top:0; left:0 } .guide-aglasses-no .guide-aglasses-eyelid { fill:#fff } .guide-aglasses-no .guide-aglasses-eyelid-top,.guide-aglasses-no .guide-aglasses-eyelid-bottom { position:absolute; width:100%; left:50%; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); width:1200px; margin-left:-600px } .guide-aglasses-no .guide-aglasses-eyelid-top svg,.guide-aglasses-no .guide-aglasses-eyelid-bottom svg { width:100% } .guide-aglasses-no .guide-aglasses-eyelid-top { opacity:0.5; top:-6.5% } .guide-aglasses-no .guide-aglasses-eyelid-top svg { fill:#758ce1 } .guide-aglasses-no .guide-aglasses-eyelid-bottom { bottom:-8%; opacity:0.3 } .guide-aglasses-no .guide-aglasses-eyelid-bottom svg { fill:#758ce1 } .guide-aglasses-no .guide-aglasses-eye-iris-big { opacity:0; -webkit-transform:scale(0.3) rotate(20deg); transform:scale(0.3) rotate(20deg); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no .guide-aglasses-eye-iris-small { opacity:0.2; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no .guide-aglasses-eye-iris-contour { opacity:0.12 } .guide-aglasses-no .guide-aglasses-eye-big-reflect { opacity:0.2 } .guide-aglasses-no .guide-aglasses-eye-small-reflect { opacity:0; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.2); transform:scale(0.2); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no .guide-aglasses-eye-round-reflect { fill:#FFF; opacity:0; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform:scale(0.5); transform:scale(0.5); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no .guide-aglasses-eye-container { position:absolute; left:50%; top:50%; width:420px; height:420px; -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0) } .guide-aglasses-no .guide-aglasses-eye-container:before { content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:100%; background:radial-gradient(transparent,rgba(0,0,0,0.6)); opacity:0; -webkit-transform:scale(0.8); transform:scale(0.8); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no .guide-aglasses-eye-container:after { content:""; display:block; width:160px; height:160px; position:absolute; top:50%; left:50%; margin-left:-80px; margin-top:-80px; border-radius:100%; background:#000; opacity:0; -webkit-transform:scale(1.3); transform:scale(1.3); -webkit-transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1s cubic-bezier(0.165,0.84,0.44,1),transform 1s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1s cubic-bezier(0.165,0.84,0.44,1) } .guide-aglasses-no:hover .guide-aglasses-eye-iris-big { opacity:0.05; -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition-delay:0s; transition-delay:0s } .guide-aglasses-no:hover .guide-aglasses-eye-iris-small { -webkit-transform:rotate(20deg) scale(1.2); transform:rotate(20deg) scale(1.2); -webkit-transition-delay:0s; transition-delay:0s } .guide-aglasses-no:hover .guide-aglasses-eye-container:before,.guide-aglasses-no:hover .guide-aglasses-eye-container:after { opacity:0.15; -webkit-transform:scale(1); transform:scale(1) } .guide-aglasses-no:hover .guide-aglasses-eyelid-top { -webkit-transform:translate3d(0,20%,0); transform:translate3d(0,20%,0) } .guide-aglasses-no:hover .guide-aglasses-eyelid-bottom { -webkit-transform:translate3d(0,-20%,0); transform:translate3d(0,-20%,0) } .guide-aglasses-no:hover .guide-aglasses-eye-small-reflect { opacity:0.2; -webkit-transform:scale(1); transform:scale(1); -webkit-transition-delay:0.2s; transition-delay:0.2s } .guide-aglasses-no:hover .guide-aglasses-eye-round-reflect { opacity:0.2; -webkit-transform:scale(1); transform:scale(1); -webkit-transition-delay:0.4s; transition-delay:0.4s } .ie .guide-aglasses-eyelid { height:253px } .ie .guide-aglasses-glasses { width:200% } .ie .guide-aglasses-whiteshadow { display:none } @media screen and (max-width:1020px) { .guide-aglasses-yes .guide-aglasses-glasses { left:0; height:157%; width:103%; top:-28%; left:-4px } .guide-aglasses-no .guide-aglasses-eye-container:before,.guide-aglasses-no .guide-aglasses-eye-container:after { opacity:0.15; -webkit-transform:scale(1); transform:scale(1) } .guide-aglasses-no .guide-aglasses-eyelid-top { top:-20% } .guide-aglasses-no .guide-aglasses-eyelid-bottom { bottom:-18% } } .guide-ashape { font-size:0 } .guide-ashape-item { width:calc(100%/3) } .guide-ashape-item:nth-child(1) { width:calc((100% + 80px)/3) } .guide-ashape-item:nth-child(1) .guide-answer-item-inner { left:50px } .guide-ashape-item:nth-child(2) { width:calc((100% - 80px)/3) } .guide-ashape-item:nth-child(3) { width:calc((100% - 0px)/3) } .guide-ashape-reflects { display:block; position:absolute; border-radius:100%; z-index:0; right:40px; top:40px } .guide-ashape-reflects span { display:block; position:absolute; border-radius:100%; top:0; left:0; width:100%; height:100%; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .guide-ashape-reflects-0,.guide-ashape-reflects-1,.guide-ashape-reflects-2,.guide-ashape-reflects-3,.guide-ashape-reflects-4,.guide-ashape-reflects-5,.guide-ashape-reflects-6,.guide-ashape-reflects-7 { display:block; width:100%; height:100%; border-radius:100%; position:absolute; opacity:0.2; -webkit-box-sizing:border-box; box-sizing:border-box; opacity:0; -webkit-transform:translate3d(80px,-80px,0) scale(0.5); transform:translate3d(80px,-80px,0) scale(0.5); -webkit-transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1) 0s; transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1) 0s; transition:transform 1s cubic-bezier(0.77,0,0.175,1) 0s,opacity 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1s cubic-bezier(0.77,0,0.175,1) 0s,opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1s cubic-bezier(0.77,0,0.175,1) 0s } .guide-ashape-reflects-0 { width:15px; height:15px; right:120px; top:120px; z-index:0 } .guide-ashape-reflects-0 span { background:radial-gradient(circle at center,#fdffe8 0%,#fdffe8 0%,rgba(122,229,217,0) 50%) } .guide-ashape-reflects-1 { width:15px; height:15px; right:170px; top:170px; z-index:0 } .guide-ashape-reflects-1 span { background:radial-gradient(circle at center,#fdffe8 0%,#fdffe8 0%,rgba(122,229,217,0) 50%) } .guide-ashape-reflects-2 { width:70px; height:70px; right:160px; top:160px; z-index:0 } .guide-ashape-reflects-2 span { background-color:#fdffe8 } .guide-ashape-reflects-3 { width:40px; height:40px; right:183px; top:183px; z-index:0 } .guide-ashape-reflects-3 span { background-color:#fdffe8 } .guide-ashape-reflects-4 { width:60px; height:60px; right:200px; top:200px; z-index:0 } .guide-ashape-reflects-4 span { background-color:#fdffe8 } .guide-ashape-reflects-5 { width:140px; height:140px; top:130px; right:130px; z-index:1 } .guide-ashape-reflects-5 span { background-color:#fdffe8 } .guide-ashape-reflects-6 { width:200px; height:200px; right:185px; top:185px; z-index:1 } .guide-ashape-reflects-6 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 48%,#fdffe8 100%) } .guide-ashape-reflects-7 { width:420px; height:420px; right:130px; top:130px; z-index:0 } .guide-ashape-reflects-7 span { background:radial-gradient(circle at center,rgba(255,255,255,0) 63%,#fdffe8 100%) } .guide-ashape-reflects-hover .guide-ashape-reflects-0,.guide-ashape-item:hover .guide-ashape-reflects-0,.guide-ashape-reflects-hover .guide-ashape-reflects-1,.guide-ashape-item:hover .guide-ashape-reflects-1,.guide-ashape-reflects-hover .guide-ashape-reflects-2,.guide-ashape-item:hover .guide-ashape-reflects-2,.guide-ashape-reflects-hover .guide-ashape-reflects-3,.guide-ashape-item:hover .guide-ashape-reflects-3,.guide-ashape-reflects-hover .guide-ashape-reflects-4,.guide-ashape-item:hover .guide-ashape-reflects-4,.guide-ashape-reflects-hover .guide-ashape-reflects-5,.guide-ashape-item:hover .guide-ashape-reflects-5,.guide-ashape-reflects-hover .guide-ashape-reflects-6,.guide-ashape-item:hover .guide-ashape-reflects-6,.guide-ashape-reflects-hover .guide-ashape-reflects-7,.guide-ashape-item:hover .guide-ashape-reflects-7 { -webkit-transform:scale(1); transform:scale(1); -webkit-transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1); transition:transform 1.2s cubic-bezier(0.77,0,0.175,1),opacity 1.2s cubic-bezier(0.77,0,0.175,1),-webkit-transform 1.2s cubic-bezier(0.77,0,0.175,1) } .guide-ashape-reflects-hover .guide-ashape-reflects-0,.guide-ashape-item:hover .guide-ashape-reflects-0 { opacity:0.6; -webkit-transition-delay:0s; transition-delay:0s } .guide-ashape-reflects-hover .guide-ashape-reflects-1,.guide-ashape-item:hover .guide-ashape-reflects-1 { opacity:0.6; -webkit-transition-delay:0.05s; transition-delay:0.05s } .guide-ashape-reflects-hover .guide-ashape-reflects-2,.guide-ashape-item:hover .guide-ashape-reflects-2 { opacity:0.05; -webkit-transition-delay:0.1s; transition-delay:0.1s } .guide-ashape-reflects-hover .guide-ashape-reflects-3,.guide-ashape-item:hover .guide-ashape-reflects-3 { opacity:0.07; -webkit-transition-delay:0.15s; transition-delay:0.15s } .guide-ashape-reflects-hover .guide-ashape-reflects-4,.guide-ashape-item:hover .guide-ashape-reflects-4 { opacity:0.08; -webkit-transition-delay:0.2s; transition-delay:0.2s } .guide-ashape-reflects-hover .guide-ashape-reflects-5,.guide-ashape-item:hover .guide-ashape-reflects-5 { opacity:0.06; -webkit-transition-delay:0.25s; transition-delay:0.25s } .guide-ashape-reflects-hover .guide-ashape-reflects-6,.guide-ashape-item:hover .guide-ashape-reflects-6 { opacity:0.08; -webkit-transition-delay:0.3s; transition-delay:0.3s } .guide-ashape-reflects-hover .guide-ashape-reflects-7,.guide-ashape-item:hover .guide-ashape-reflects-7 { opacity:0.3; -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-ashape-landscape .guide-aweather-mountain-top { opacity:0.08 } .guide-ashape-landscape .guide-aweather-mountain-top-gradient { -webkit-transition:opacity 1s cubic-bezier(0.25,0.46,0.45,0.94); transition:opacity 1s cubic-bezier(0.25,0.46,0.45,0.94) } .guide-ashape-landscape .guide-sun-container { right:10%; top:-40px; opacity:0; -webkit-transform:translate3d(120px,0,0) rotate(-10deg) scale(0.7); transform:translate3d(120px,0,0) rotate(-10deg) scale(0.7); -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0s } .guide-ashape-landscape:before { content:""; display:block; width:100%; height:100%; background-color:#000; opacity:0.05 } .guide-ashape-landscape .guide-aweather-mountain-top-shadows-right,.guide-ashape-landscape .guide-aweather-mountain-top-shadows-left { fill:white; opacity:0; -webkit-transition:opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94); transition:opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94) } .guide-ashape-landscape-transform .guide-aweather-mountain-top { -webkit-transform:scaleX(-1); transform:scaleX(-1) } .guide-ashape-landscape-transform .guide-aweather-mountain-bottom { -webkit-transform:scaleX(-1); transform:scaleX(-1) } .guide-ashape-item:hover .guide-sun-container { opacity:1; -webkit-transform:translate3d(80px,20px,0) rotate(0deg) scale(0.8); transform:translate3d(80px,20px,0) rotate(0deg) scale(0.8) } .guide-ashape-item:hover .guide-ashape-landscape-notransform .guide-aweather-mountain-top-shadows-right { opacity:1 } .guide-ashape-item:hover .guide-ashape-landscape-notransform .guide-sun-container { -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-ashape-item:hover .guide-ashape-landscape-transform .guide-aweather-mountain-top-shadows-left { opacity:1 } .guide-ashape-item:hover .guide-ashape-landscape-transform .guide-aweather-mountain-top-gradient { opacity:0.25 } .guide-ashape-item:hover .guide-ashape-landscape-transform .guide-sun-container { opacity:0.4; -webkit-transition-delay:0.55s; transition-delay:0.55s } .guide-ashape-item:hover .guide-aweather-mountain-top-gradient { opacity:1 } .guide-ashape-cyl { background:-webkit-gradient(linear,left top,left bottom,from(#000000),color-stop(#022B36),to(#1f2f33)); background:linear-gradient(to bottom,#000000,#022B36,#1f2f33); } .guide-ashape-cyl .guide-ashape-shape-cylindric { position:absolute; top:0; height:2500px; left:-5%; width:60%; top:50%; overflow:hidden; margin-top:-1250px; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); border-radius:100%; -webkit-transform:translate3d(-70%,0,0) perspective(1000px); transform:translate3d(-70%,0,0) perspective(1000px) } .guide-ashape-cyl .guide-ashape-shape-cylindric:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; opacity:0.1; background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(70%,rgba(255,255,255,0)),color-stop(99%,#fff)); background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,#fff 99%) } .guide-ashape-cyl .guide-ashape-shape-cylindric:before { content:""; display:block; position:absolute; top:50%; right:0; width:100%; height:100vh; margin-top:-50vh; background:-webkit-gradient(linear,left top,left bottom,from(#1f90a9),color-stop(#157588),to(#234d55)); background:linear-gradient(to bottom,#1f90a9,#157588,#234d55); } .guide-ashape-cyl .guide-ashape-landscape-notransform { position:absolute; height:500px; width:70%; right:-20%; top:50%; margin-top:-250px; overflow:hidden; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-ashape-cyl .guide-ashape-landscape-notransform svg { -webkit-transform:translate3d(200px,0,0); transform:translate3d(200px,0,0) } .guide-ashape-cyl .guide-ashape-landscape-transform { position:absolute; height:650px; width:120%; right:-15%; top:50%; margin-top:-325px; overflow:hidden; opacity:0; -webkit-transform:translate3d(190%,0,0) perspective(600px) rotateY(90deg) scaleY(0); transform:translate3d(190%,0,0) perspective(600px) rotateY(90deg) scaleY(0); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),opacity 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-ashape-cyl .guide-ashape-landscape-transform .guide-sun-container { right:25% } .guide-ashape-cyl:hover .guide-ashape-shape-cylindric { -webkit-transform:translate3d(0%,0,0) perspective(1000px); transform:translate3d(0%,0,0) perspective(1000px); -webkit-transform-style:preserve-3d; transform-style:preserve-3d } .guide-ashape-cyl:hover .guide-ashape-landscape { -webkit-transform:translate3d(-20%,0,0); transform:translate3d(-20%,0,0) } .guide-ashape-cyl:hover .guide-ashape-landscape .guide-sun { opacity:1; -webkit-transform:scale(1); transform:scale(1) } .guide-ashape-cyl:hover .guide-ashape-landscape-notransform .guide-sun { -webkit-transition-delay:0.4s; transition-delay:0.4s } .guide-ashape-cyl:hover .guide-ashape-landscape-transform { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translate3d(0%,0,0) perspective(600px) rotateY(20deg) scaleY(1); transform:translate3d(0%,0,0) perspective(600px) rotateY(20deg) scaleY(1); opacity:1 } .guide-ashape-sph { background:-webkit-gradient(linear,left top,left bottom,from( #00617b),color-stop(#022B36),to(#00c1f5)); background:linear-gradient(to bottom,#00617b,#022B36,#00c1f5); } .guide-ashape-sph .guide-ashape-shape-spheric { position:absolute; top:0; height:1200px; left:0%; width:50%; top:50%; overflow:hidden; margin-top:-600px; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); border-radius:0 100% 100% 0%; -webkit-transform:translate3d(-70%,0,0) perspective(1000px); transform:translate3d(-70%,0,0) perspective(1000px) } .guide-ashape-sph .guide-ashape-shape-spheric:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%; opacity:0.1; background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(70%,rgba(255,255,255,0)),color-stop(99%,#fff)); background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,#fff 99%); } .guide-ashape-sph .guide-ashape-shape-spheric:before { content:""; display:block; position:absolute; top:50%; right:0; width:100%; height:100vh; margin-top:-50vh; background:-webkit-gradient(linear,left top,left bottom,from( #36686f),color-stop(rgba(81,220,239,0.64)),to(rgba(49,141,153,0.7686274509803922))); background:linear-gradient(to bottom,#c145eb,#ae3ee7,#6925d8); background:linear-gradient(to bottom,#36686f,rgba(81,220,239,0.64),rgba(49,141,153,0.7686274509803922)); } .guide-ashape-sph .guide-ashape-landscape-notransform { position:absolute; height:500px; width:70%; right:-20%; top:50%; margin-top:-250px; overflow:hidden; -webkit-transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) } .guide-ashape-sph .guide-ashape-landscape-notransform svg { -webkit-transform:translate3d(200px,0,0); transform:translate3d(200px,0,0) } .guide-ashape-sph .guide-ashape-landscape-transform { position:absolute; height:800px; width:120%; right:-15%; top:50%; margin-top:-400px; overflow:hidden; opacity:0; -webkit-transform:translate3d(190%,0,0) perspective(600px) rotateY(90deg) scaleY(0); transform:translate3d(190%,0,0) perspective(600px) rotateY(90deg) scaleY(0); -webkit-transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s; transition:opacity 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s,-webkit-transform 1.2s cubic-bezier(0.165,0.84,0.44,1) 0s } .guide-ashape-sph .guide-ashape-landscape-transform-mask { border-radius:100% 100% 100% 100%; overflow:hidden; position:absolute; left:-40%; top:0; height:100%; width:300%; -webkit-backface-visibility:hidden; backface-visibility:hidden } .guide-ashape-sph .guide-ashape-landscape-transform-mask:before { content:""; display:block; width:100%; height:100%; background-color:#000; opacity:0.05; -webkit-backface-visibility:hidden; backface-visibility:hidden } .guide-ashape-sph .guide-ashape-landscape-transform-mask svg,.guide-ashape-sph .guide-ashape-landscape-transform-mask .guide-sun { -webkit-backface-visibility:hidden; backface-visibility:hidden } .guide-ashape-sph .guide-ashape-landscape-transform:before { display:none } .guide-ashape-sph .guide-ashape-landscape-transform .guide-sun-container { right:40% } .guide-ashape-sph:hover .guide-ashape-shape-spheric { -webkit-transform:translate3d(0%,0,0) perspective(1000px); transform:translate3d(0%,0,0) perspective(1000px); -webkit-transform-style:preserve-3d; transform-style:preserve-3d } .guide-ashape-sph:hover .guide-ashape-landscape { -webkit-transform:translate3d(-20%,0,0); transform:translate3d(-20%,0,0) } .guide-ashape-sph:hover .guide-ashape-landscape .guide-sun { opacity:1; -webkit-transform:scale(1); transform:scale(1) } .guide-ashape-sph:hover .guide-ashape-landscape-transform { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translate3d(0%,0,0) perspective(600px) rotateY(20deg) scaleY(1); transform:translate3d(0%,0,0) perspective(600px) rotateY(20deg) scaleY(1); opacity:1 } .guide-ashape-sph:hover .guide-ashape-landscape-transform .guide-sun-container { -webkit-transform:scale(1.3); transform:scale(1.3) } .firefox .guide-ashape-cyl .guide-ashape-landscape-transform { right:-20%; -webkit-transform:matrix3d(0,0,1,0.001,0,0.1,0,0,-1,0,0,0,800,0,0,1); transform:matrix3d(0,0,1,0.001,0,0.1,0,0,-1,0,0,0,800,0,0,1) } .firefox .guide-ashape-cyl:hover .guide-ashape-landscape-transform { -webkit-transform:matrix3d(0.94,0,0.34,0.001,0,1,0,0,-0.34,0,0.94,0,0,0,0,1); transform:matrix3d(0.94,0,0.34,0.001,0,1,0,0,-0.34,0,0.94,0,0,0,0,1) } .firefox .guide-ashape-sph .guide-ashape-landscape-transform { right:-20%; -webkit-transform:matrix3d(0,0,1,0.001,0,0.1,0,0,-1,0,0,0,800,0,0,1); transform:matrix3d(0,0,1,0.001,0,0.1,0,0,-1,0,0,0,800,0,0,1) } .firefox .guide-ashape-sph:hover .guide-ashape-landscape-transform { -webkit-transform:matrix3d(0.94,0,0.34,0.001,0,1,0,0,-0.34,0,0.94,0,0,0,0,1); transform:matrix3d(0.94,0,0.34,0.001,0,1,0,0,-0.34,0,0.94,0,0,0,0,1) } .product { overflow:hidden } .product-uiWrapper { position:fixed; z-index:10; top:0; height:100%; width:100%; pointer-events:none } .product-uiWrapper.hidden .product-backButton { -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0) } .product-uiWrapper.hidden .product-buyButton { -webkit-transform:translate3d(-10px,0,0); transform:translate3d(-10px,0,0); opacity:0 } .product-uiWrapper.hidden .product-buyButton>* { opacity:0 } .product-uiWrapper.hidden .product-noticeButton { -webkit-transform:translate3d(-10px,0,0); transform:translate3d(-10px,0,0); opacity:0 } .product-uiWrapper.white .product-backButton { border-color:rgba(255,255,255,0.1) } .product-uiWrapper.white .product-backButton svg { fill:white } .product-uiWrapper.white .product-noticeButton__wrapper:before { background:#fff } .product-backButton { position:fixed; top:150px; left:0; width:59px; height:46px; cursor:pointer } .product-backButton:not(.disabled) { pointer-events:auto } .product-backButton:hover .product-backButton__wrapper { -webkit-transform:matrix3d(0.98,0,0.17,0.001,0,1,0,0,-0.17,0,0.98,0,0,0,0,1); transform:matrix3d(0.98,0,0.17,0.001,0,1,0,0,-0.17,0,0.98,0,0,0,0,1) } .product-backButton:hover svg { -webkit-transform:scaleX(-1) translate3d(3px,0,0); transform:scaleX(-1) translate3d(3px,0,0) } .product-backButton__wrapper { position:absolute; height:100%; width:100%; border-style:solid; border-color:#efefef; border-width:2px 2px 2px 0; border-radius:0 25px 25px 0; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform-origin:0 center 0px; transform-origin:0 center 0px } .product-backButton svg { position:absolute; top:0; right:0; bottom:0; left:0; width:12px; height:11px; margin:auto; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.05s; transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.05s; transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.05s; transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.05s,-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.05s; -webkit-transform:scaleX(-1); transform:scaleX(-1); fill:#222 } .product-buyButton { position:absolute; right:150px; top:150px; height:50px; border-radius:25px; background:#1B5665; padding:0 25px; -webkit-box-sizing:border-box; box-sizing:border-box; cursor:pointer; font-weight:600; color:white; overflow:hidden } .product-buyButton:before { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:200px; width:100%; content:""; background:#1b5665; border-radius:50%; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0 } .product-buyButton:hover { color:#fff; } .product-buyButton:hover:before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1) } .product-buyButton:not(.disabled) { pointer-events:auto } .product-buyButton>* { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-buyButton__price { position:relative; display:inline-block; vertical-align:middle; font-size:1.2rem; line-height:3.6rem; z-index:2 } .product-buyButton__separator { position:relative; display:inline-block; vertical-align:middle; line-height:3.6rem; font-size:1.2rem; font-weight:300; margin:0 1.4rem; opacity:0.3; z-index:2 } .product-buyButton__text { position:relative; display:inline-block; vertical-align:middle; font-size:1.2rem; line-height:3.6rem; z-index:2 } .product-noticeButton { position:absolute; right:40px; top:30px; width:50px; height:50px; cursor:pointer } .product-noticeButton:before { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:100%; width:100%; background:#222; opacity:0; border-radius:50%; content:""; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(0); transform:scale(0) } .product-noticeButton:hover .product-noticeButton__wrapper:before { -webkit-transform:scale(1.1); transform:scale(1.1) } .product-noticeButton:hover:before { -webkit-transform:scale(1); transform:scale(1); opacity:0.05 } .product-noticeButton:hover svg { -webkit-transform:scale(1.1); transform:scale(1.1) } .product-noticeButton:not(.disabled) { pointer-events:auto } .product-noticeButton__wrapper { position:absolute; height:100%; width:100%; border-radius:50% } .product-noticeButton__wrapper:before { position:absolute; height:calc(100% - 1px); width:calc(100% - 1px); border-radius:50%; content:""; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-noticeButton svg { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:15px; width:13px; stroke:#fff; fill:#fff; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-fallbackVisual { position:absolute; left:0; right:0; top:0; margin:auto; height:calc(100vh - 125px); width:85%; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:contain; } .product-fallbackVisual__container { position:absolute; width:100%; height:100%; } .product-fallbackVisual__container img { margin:auto; height:calc(100vh - 300px); object-fit:contain; object-fit:contain; border-radius:20px; width:auto!important; margin-top:40px; } .product-fallbackVisual__container.hidden { opacity:0 } .product-assets { position:absolute; bottom:0px; left:0px; width:100%; display:flex; justify-content:space-evenly; align-items:center; height:130px; color:#fff; background:#1b5665; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) } .product-assets:not(.disabled) { pointer-events:auto } .product-assets__category { display:inline-block; vertical-align:top; } .product-assets__infotext {} .product-assets__size {} .hrt-icon { margin-top:10px; } .product-assets__catTitle { position:relative; font-size:1.6rem; font-weight:300; line-height:1.4rem; margin-left:45px; font-family:roboto_regular; font-weight:100; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); color:#ccc; } .product-assets__catTitle:before { position:absolute; right:calc(100% + 6px); bottom:2px; height:1px; width:40px; content:""; background:#bbbbbb; -webkit-transition:-webkit-transform 0.3s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.3s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.3s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.3s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.3s cubic-bezier(0.165,0.84,0.44,1) } .product-assets__list { display:block; margin-top:10px } .product-assets__item { position:relative; display:inline-block; width:40px; height:40px; border-radius:50%; margin-right:10px; font-size:1.6rem; font-weight:600; line-height:4rem; text-align:center; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-assets__item.full { background:rgba(208,208,208,0.4) } .product-assets__item.dashed { width:39px; height:39px; border:1px dashed white; } .product-assets__item:nth-child(2) { -webkit-transition-delay:0.1s; transition-delay:0.1s } .product-assets__item:nth-child(3) { -webkit-transition-delay:0.2s; transition-delay:0.2s } .product-assets__item:nth-child(4) { -webkit-transition-delay:0.3s; transition-delay:0.3s } .product-assets__item span { -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-assets__item svg { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:24px; height:17px; stroke-width:0; fill:#222; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-assets__item:hover { background:#222; color:white; cursor:pointer } .product-assets__item:hover svg { stroke:white; fill:white } .product-assets__item:hover .assetTooltip { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); opacity:1 } .product-assets__item .assetTooltip { position:absolute; left:-150px; right:-150px; bottom:calc(100% + 1rem); margin:0 auto; width:170px; border-radius:12px; padding:15px; -webkit-box-sizing:border-box; box-sizing:border-box; background:#222; text-align:center; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate3d(0,-15px,0); transform:translate3d(0,-15px,0); opacity:0; pointer-events:none } .product-assets__item .assetTooltip:before { position:absolute; top:calc(100% - 6px); left:0; right:0; margin:0 auto; height:10px; width:10px; background:#222; content:""; -webkit-transform:rotate(45deg) scaleX(0.7); transform:rotate(45deg) scaleX(0.7) } .product-assets__item .assetTooltip-title { font-size:1.1rem; font-weight:600; line-height:1.4rem; margin-bottom:0.8rem; color:white } .product-assets__item .assetTooltip-content { color:#767676; font-weight:300; font-size:1rem; line-height:1.4rem } .product-assets__item .assetTooltip-content strong { color:white } .product-helmetInfos { position:absolute; top:20%; right:80px; width:240px } .product-helmetInfos.hidden { pointer-events:none } .product-helmetInfos.hidden .product-title { opacity:0; -webkit-transform:translate3d(40px,0,0); transform:translate3d(40px,0,0); -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important } .product-helmetInfos.hidden .product-helmetInfos__content { opacity:0; -webkit-transform:translate3d(40px,0,0); transform:translate3d(40px,0,0); -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetInfos.hidden .product-buyButton { pointer-events:none; opacity:0; -webkit-transform:translate3d(40px,0,0); transform:translate3d(40px,0,0); -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetInfos .product-title { -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1)!important } .product-helmetInfos__content { margin-top:20px; color:#cacaca; font-size:1.6rem; line-height:2.4rem; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .product-helmetInfos .product-buyButton { margin-top:20px; position:relative; top:0; left:0; right:0; display:inline-block; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .product-helmetAction { position:absolute; bottom:80px; right:80px; width:220px; height:70px; cursor:pointer; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetAction:not(.disabled) { pointer-events:auto } .product-helmetAction.close .product-helmetAction__visual { opacity:0 } .product-helmetAction.close .product-helmetAction__surtitle { opacity:0 } .product-helmetAction.close .product-helmetAction__button { background:white } .product-helmetAction.close .product-helmetAction__button-mainContent { opacity:0 } .product-helmetAction.close .product-helmetAction__button-closeContent { opacity:1 } .product-helmetAction.close .product-helmetAction__button-closeContent:before { -webkit-transform:rotate(45deg) scaleY(1); transform:rotate(45deg) scaleY(1) } .product-helmetAction.close .product-helmetAction__button-closeContent:after { -webkit-transform:rotate(-45deg) scaleY(1); transform:rotate(-45deg) scaleY(1) } .product-helmetAction.loading { pointer-events:none } .product-helmetAction.loading .product-helmetAction__visual { opacity:0 } .product-helmetAction.loading .product-helmetAction__surtitle { opacity:0 } .product-helmetAction.loading .product-helmetAction__button { background:white } .product-helmetAction.loading .product-helmetAction__button-mainContent { opacity:0 } .product-helmetAction.loading .product-helmetAction__button-loadingContent { opacity:1 } .product-helmetAction.loading .product-helmetAction__button .simpleSpinner { opacity:1 } .product-helmetAction:hover .product-helmetAction__button-mainContent .product-helmetAction__button-icon { -webkit-transform:translate3d(5px,0,0); transform:translate3d(5px,0,0) } .product-helmetAction:hover.close .product-helmetAction__button-bg:before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1) } .product-helmetAction__visual { position:absolute; right:calc(100% - 45px); top:-35px; height:150px; min-width:120px; z-index:5; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetAction__visual img { width:100% } .product-helmetAction__visual.hidden { opacity:0; -webkit-transform:translate3d(0,10px,0); transform:translate3d(0,10px,0) } .product-helmetAction__surtitle { text-transform:uppercase; font-weight:300; font-size:1.6rem; letter-spacing:0.25rem; margin:0 0 0.8rem 5rem; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetAction__buttonWrapper { position:absolute; top:0; width:100%; height:100%; padding:5px } .product-helmetAction__button { position:relative; width:238px; height:51px; border-radius:25px; background:#1B5665 } .product-helmetAction__button-bg { position:absolute; height:100%; width:100%; border-radius:25px; overflow:hidden } .product-helmetAction__button-bg:before { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:200px; width:100%; content:""; z-index:1; background:rgba(0,0,0,0.04); border-radius:50%; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0 } .product-helmetAction__button:after { position:absolute; border:2px #1B5665 solid; height:100%; width:100%; top:-2px; left:-2px; z-index:1; border-radius:25px; content:"" } .product-helmetAction__button span { font-weight:600; font-size:1.2rem; color:white } .product-helmetAction__button span.small-text { font-size:0.6rem; font-weight:300 } .product-helmetAction__button-icon { position:absolute; top:0; right:30px; bottom:0; margin:auto; height:11px; width:12px; fill:white; -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-helmetAction__button-content { position:absolute; top:0; left:0; height:100%; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0.6rem 0 0 3rem; line-height:1.2rem } .dw-icon { color:#fff; margin:15px; } .product-helmetAction__button-loadingContent { opacity:0; padding-left:3.5rem } .product-helmetAction__button-loadingContent span { color:#222 } .product-helmetAction__button-loadingContent svg { left:25px; right:unset; fill:#cacaca } .product-helmetAction__button-closeContent { opacity:0; padding-left:6rem } .product-helmetAction__button-closeContent:before { position:absolute; top:0; bottom:0; margin:auto 0; left:25px; height:15px; width:3px; content:""; background-color:#cacaca; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:rotate(45deg) scaleY(0); transform:rotate(45deg) scaleY(0) } .product-helmetAction__button-closeContent:after { position:absolute; top:0; bottom:0; margin:auto 0; left:25px; height:15px; width:3px; content:""; background-color:#cacaca; -webkit-transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s; -webkit-transform:rotate(-45deg) scaleY(0); transform:rotate(-45deg) scaleY(0) } .product-helmetAction__button-closeContent span { color:#222 } .product-helmetAction__button-closeContent svg { left:25px; right:unset; fill:#cacaca } .product-helmetAction .simpleSpinner { left:unset; right:20px; opacity:0; height:30px; width:30px } .product-helmetAction .simpleSpinner .circle { stroke:#cacaca } .product-helmetAction .simpleSpinner .big { fill:white; opacity:0.5 } .product-heading { position:relative; z-index:4; top:0; height:100vh; width:100%; } .product-heading__logo { position:absolute; height:60%; width:65%; left:-8%; top:0; bottom:5%; margin:auto 0; fill:#232323 } .product-heading__uiWrapper { position:absolute; top:0; left:0; height:100%; width:100%; padding:80px 80px 0 80px; -webkit-box-sizing:border-box; box-sizing:border-box; pointer-events:none; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-heading__uiWrapper.fade { opacity:0; pointer-events:none } .product-heading__uiWrapper.hidden .product-assets { opacity:0 } .product-heading__uiWrapper.hidden .product-assets__catTitle { opacity:0 } .product-heading__uiWrapper.hidden .product-assets__catTitle:before { -webkit-transform:scaleX(0); transform:scaleX(0) } .product-heading__uiWrapper.hidden .product-assets__item { -webkit-transform:scale(0) rotate(-45deg); transform:scale(0) rotate(-45deg) } .product-heading__uiWrapper.hidden .product-assets__item span { -webkit-transform:scale(0); transform:scale(0) } .product-heading__uiWrapper.hidden .product-helmetAction { opacity:0; pointer-events:none } .product-heading__uiWrapper.hidden .scrollDown { opacity:0 } .product-viewerContainer { position:absolute; top:0; left:0; height:100%; width:100% } .product-viewerControls { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:calc(100% - 420px); min-height:300px; width:55%; pointer-events:auto; z-index:1 } .product-viewerControls.mouseDown { cursor:none } .product-viewerControls:hover { cursor:-webkit-grab; cursor:grab } .product-viewerControls.grabbing { cursor:-webkit-grabbing; cursor:grabbing } .product-viewerControls.hidden { pointer-events:none } .product-colors { position:relative } .product-colors.disabled .product-colors__item { pointer-events:none } .product-colors__text { font-size:1.2rem; color:#bbbbbb; margin-bottom:0.2rem } .product-colors__text span { position:relative; font-weight:600; color:#222; text-shadow:0px 0px 5px #fff; } .product-colors__text span:after { position:absolute; left:0; bottom:0; height:1px; width:100%; background-color:#222; content:"" } .product-colors__list { position:relative; z-index:99999; display:flex; flex-wrap:wrap; } .product-colors__list.changing { pointer-events:none } .product-colors__item { position:relative; display:block; color:white; cursor:pointer; height:30px; width:30px; margin:5px; box-shadow:1px 1px 9px #999; border-radius:50%; margin:0.3rem auto; pointer-events:auto } .product-colors__item:before { position:absolute; height:100%; width:100%; border-radius:50%; content:""; left:0px; background:rgba(0,0,0,0.2); z-index:-1; -webkit-transition:-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1) } .product-colors__item-bg { position:absolute; height:100%; width:100%; border-radius:50%; pointer-events:none; -webkit-transition:-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.2s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.2s cubic-bezier(0.165,0.84,0.44,1); background-position:center; } .product-colors__item.selected .product-colors__item-bg {} .product-mainContent { position:relative; z-index:6; background:#242424; } .product-vision { position:relative; max-width:1280px; margin:0 auto 0 auto; background:#9c9ca6 } .product-vision:before { display:block; padding-top:56.25%; content:"" } .product-visuals { position:relative; z-index:3; width:87.5%; margin:0 auto; padding:10.714% 0 8.036% 0 } .product-visuals.hidden .product-visuals__item { opacity:0; -webkit-transform:translate3d(0,80px,0); transform:translate3d(0,80px,0) } .product-visuals:before { display:block; content:""; padding-top:49.107% } .product-visuals__item { position:absolute; background:#9c9ca6; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); box-shadow:0 0 20px rgba(0,0,0,0.2); overflow:hidden; -webkit-transition:opacity 0.8s cubic-bezier(0.455,0.03,0.515,0.955); transition:opacity 0.8s cubic-bezier(0.455,0.03,0.515,0.955) } .product-visuals__item:before { display:block; content:"" } .product-visuals__item:nth-child(1) { top:35.065%; left:0; width:42.857% } .product-visuals__item:nth-child(1):before { padding-top:62.5% } .product-visuals__item:nth-child(2) { top:20.779%; left:35.714%; width:21.429%; -webkit-transition-delay:0.1s; transition-delay:0.1s } .product-visuals__item:nth-child(2):before { padding-top:141.667% } .product-visuals__item:nth-child(3) { top:31.169%; right:0; width:35.714%; -webkit-transition-delay:0.2s; transition-delay:0.2s } .product-visuals__item:nth-child(3):before { padding-top:95% } .product-visuals__item:nth-child(3) img { height:100%; width:unset } .product-visuals__item img { position:absolute; top:-50%; bottom:-50%; left:-50%; right:-50%; margin:auto; width:100%; -webkit-transition:-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1) translate3d(0,0,0); transform:scale(1) translate3d(0,0,0) } .product-visuals__item.hidden { opacity:0 } .product-visuals__item.hidden img { -webkit-transform:scale(1.05); transform:scale(1.05) } .product-description { position:relative; padding:6.25% 0; max-width:1280px; margin:0 auto; pointer-events:auto } .product-description.hidden .product-description__gamme-container { -webkit-transform:translate3d(0,-55vw,0); transform:translate3d(0,-55vw,0) } .product-description.hidden .product-description__number,.product-description.hidden .product-description__color,.product-description.hidden .product-description__content,.product-description.hidden .product-description__visual { -webkit-transform:translate3d(0,80px,0); transform:translate3d(0,80px,0); opacity:0 } .product-description__gamme { position:absolute; color:#2a2a2a; font-size:12vw; line-height:30rem; text-transform:uppercase; font-weight:600; padding-left:6.25%; z-index:1; -webkit-transform:translate3d(0,-35%,0); transform:translate3d(0,-35%,0) } .product-description__gamme-container { position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition:-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 1.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 1.4s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0) } .product-description__number { position:relative; display:inline-block; vertical-align:middle; font-size:8rem; line-height:8rem; font-weight:600; color:white; margin-left:18.75%; z-index:2; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.7s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.7s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.7s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.7s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s } .product-description__color { position:relative; z-index:2; display:inline-block; vertical-align:middle; font-size:6rem; font-weight:300; line-height:8rem; color:white; margin-left:1rem; padding:0 7rem 0 2rem; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s } .product-description__color-bg { position:absolute; top:0; left:0; height:100%; width:100%; background:#cacaca; z-index:1 } .product-description__color-text { position:relative; z-index:3 } .product-description__content { position:relative; margin-top:2.5rem; color:white; font-size:1.6rem; font-weight:300; line-height:2.4rem; max-width:320px; margin-left:18.75%; z-index:3; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.9s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.9s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.9s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.9s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s } .product-description__content strong { font-weight:600 } .product-description__visual { position:absolute; right:-18%; bottom:-40%; width:54.688%; z-index:3; overflow:hidden; -webkit-transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 1s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 1s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s; transition:opacity 0.8s cubic-bezier(0.165,0.84,0.44,1) 1s,transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s,-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.8s } .product-description__visual:before { display:block; padding-top:60.286%; content:"" } .product-description__visual img { position:absolute; top:0; width:100% } .product-details { position:relative; z-index:5; background:#f6f6f6; padding:95px 160px 45px 160px; -webkit-box-sizing:border-box; box-sizing:border-box; pointer-events:auto } .product-details__container { position:relative; max-width:720px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:left; -ms-flex-align:left; align-items:left } .info-text { line-height:12px; } .product-details__item { position:relative; width:50%; max-width:320px; margin-bottom:4rem } .product-details__item:nth-child(2) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.1s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .product-details__item:nth-child(2) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .product-details__item:nth-child(2) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .product-details__item:nth-child(2) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.25s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.25s } .product-details__item:nth-child(3) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.2s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .product-details__item:nth-child(3) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.2s } .product-details__item:nth-child(3) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s } .product-details__item:nth-child(3) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.35s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.35s } .product-details__item:nth-child(4) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.3s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.3s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.3s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.3s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.3s } .product-details__item:nth-child(4) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.3s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.3s } .product-details__item:nth-child(4) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s } .product-details__item:nth-child(4) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.45s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.45s } .product-details__item:nth-child(5) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.4s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.4s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.4s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.4s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.4s } .product-details__item:nth-child(5) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.4s } .product-details__item:nth-child(5) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s } .product-details__item:nth-child(5) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.55s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.55s } .product-details__item:nth-child(5) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.5s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.5s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.5s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.5s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.5s } .product-details__item:nth-child(5) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.5s } .product-details__item:nth-child(5) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s } .product-details__item:nth-child(5) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.65s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.65s } .product-details__item:nth-child(6) .product-details__item-icon .icon { -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.6s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.6s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.6s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1) 0.6s,transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s,-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.6s } .product-details__item:nth-child(6) .product-details__item-circle { -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s; transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) 0.6s } .product-details__item:nth-child(6) .product-details__item-title { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.7s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.7s } .product-details__item:nth-child(6) .product-details__item-content { -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.75s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.75s } .product-details__item-icon { position:relative; display:inline-block; vertical-align:top; width:50px; height:50px } .product-details__item-icon .icon { width:20px; height:20px; fill:#222; position:absolute; left:50%; top:50%; margin-top:-10px; margin-left:-10px; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1) } .product-details__item-circle { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:calc(100% - 4px); width:calc(100% - 4px); stroke:#cacaca; stroke-width:2px; stroke-dasharray:142; stroke-dashoffset:0; -webkit-transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:stroke-dashoffset 0.8s cubic-bezier(0.165,0.84,0.44,1) } .product-details__item-picto { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:20px; width:20px; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1),transform 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); stroke:#222; fill:#222 } .product-details__item-text { position:relative; display:inline-block; vertical-align:top; width:75%; margin-left:7.812% } .product-details__item-title { font-size:2rem; line-height:2.5rem; font-weight:600; margin-bottom:0.5rem; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.1s } .product-details__item-content { font-size:1.6rem; font-weight:300; line-height:2.2rem; color:#aaaaaa; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.15s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1) 0.15s } .product-details__item-content strong { font-weight:600 } .product-details.hidden .product-details__item-circle { stroke-dashoffset:142 } .product-details.hidden .product-details__item-icon .icon { -webkit-transform:scale(0.5); transform:scale(0.5); opacity:0 } .product-details.hidden .product-details__item-title { opacity:0 } .product-details.hidden .product-details__item-content { opacity:0 } .product-cta { position:relative; background:white; padding:95px 0 } .dg.ac { z-index:1000!important } @media screen and (max-width:960px) { .product-heading__uiWrapper { padding-top:0px } .product-heading__uiWrapper .disabled { opacity:0.01 } .product-fallbackVisual { width:90% } .product-assets { left:40px; bottom:40px } .product-helmetAction { right:40px; bottom:40px } .product-helmetAction.close .product-helmetAction__button-bg:before { content:none } .product-helmetAction__visual { top:-20px; height:110px; min-width:90px } .product-mainContent {} .product-visuals:before { padding-top:150% } .product-visuals__item:nth-child(1) { top:10%; width:80% } .product-visuals__item:nth-child(2) { top:30%; right:0; left:unset; width:45% } .product-visuals__item:nth-child(3) { left:7%; top:60%; width:60% } .product-description { padding-bottom:30%; text-align:center } .product-description__gamme { padding-left:0; width:100% } .product-description__number { margin-left:0 } .product-description__content { margin-left:auto; margin-right:auto } .product-description__visual { position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:75%; -webkit-transform:translate3d(0,35%,0); transform:translate3d(0,35%,0) } .product-details { padding-left:40px; padding-right:40px } .product-details__container { margin:0 auto } } @media screen and (max-width:960px) { .grid-item-laminates .guide-answer-icon .icon { width:35px; height:35px; margin-top:-8px; margin-left:-18px; } .product-uiWrapper .disabled { opacity:0.01 } .product-uiWrapper .product-noticeButton { top:40px } .product-uiWrapper .product-buyButton,.product-uiWrapper .product-backButton,{ top:100px } .product-uiWrapper .product-noticeButton { right:40px } .product-uiWrapper .product-buyButton { right:110px } .product-assets .product-assets__size { display:block; margin-bottom:20px } .product-assets .product-assets__item:first-child .assetTooltip { left:-90px } .product-assets .product-assets__item:first-child .assetTooltip:before { left:-60px } .product-helmetInfos { top:0; left:0; right:unset; width:100%; height:100%; padding:40px 80px; -webkit-box-sizing:border-box; box-sizing:border-box } .product-helmetInfos .product-title { vertical-align:top } .product-helmetInfos__content { display:inline-block; vertical-align:top; width:260px; margin-top:0; margin-left:40px } .product-helmetInfos .product-buyButton { margin-left:-15px } .product-colors__item { height:30px; width:30px } .product-colors__item:before { top:0; right:0; bottom:0; left:0; margin:auto; height:22px; width:22px } .product-colors__item-bg { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:16px; width:16px } } @media screen and (max-height:850px) { .product-uiWrapper .disabled { opacity:0.01 } .product-uiWrapper .product-backButton,.product-uiWrapper .product-buyButton,.product-uiWrapper .product-noticeButton { top:111px } .product-uiWrapper .product-noticeButton { right:40px } .product-uiWrapper .product-buyButton { right:110px } .product-heading__uiWrapper { padding-top:40px } .product-heading__uiWrapper .disabled { opacity:0.01 } .product-colors__item { height:30px; width:30px; height:30px; margin:8px; box-shadow:1px 1px 9px #999; } .product-colors__item:before { top:0; right:0; bottom:0; left:0; margin:auto; height:30px; width:30px } .product-colors__item-bg { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:20px; width:20px; } .logo-sarvha { width:110px; box-shadow:1px 1px 8px #999; } .logo-sarvha img { width:80px; } .product-assets {} .product-assets .product-assets__size .product-assets__item:first-child .assetTooltip { left:-90px } .product-assets .product-assets__size .product-assets__item:first-child .assetTooltip:before { left:-60px } .product-helmetAction { right:40px; bottom:40px } .product-helmetAction__visual { top:-20px; height:110px; min-width:90px } .product-mainContent {} } @media screen and (max-width:1440px) { .product-details { padding-top:223px } } @media screen and (min-width:1600px) and (min-height:850px) { .product-uiWrapper .product-noticeButton { right:120px } .product-uiWrapper .product-buyButton { right:190px } .product-heading__uiWrapper { padding:80px 120px 0 120px } .product-heading__uiWrapper .product-title {} .product-heading__uiWrapper .product-colors__item { height:35px; width:35px; margin:5px; box-shadow:1px 1px 5px #525151; } .product-assets {} .product-helmetAction { right:120px } } .product-title { display:inline-block; font-weight:600; margin-top:64px!important; } .nextProduct .product-title { margin-top:0px!important; } .wish-icon img { filter:invert(1); } .product-title__gamme { display:inline-block; font-size:2.5rem; line-height:4rem; letter-spacing:-0.11rem } .product-title__number { position:relative; display:inline-block; vertical-align:middle; text-transform:uppercase; font-size:3.6rem; line-height:3rem; margin-left:4rem; margin-right:0.7rem } .product-title__number:before { position:absolute; right:calc(100% + 6px); bottom:2px; height:1px; width:30px; content:""; background:#bbbbbb } .product-title__color { position:relative; display:none; vertical-align:middle; font-size:1.3rem; font-weight:300; line-height:2.3rem; padding:0 1.5rem 0 1.5rem; overflow:hidden; color:white; pointer-events:all; } .product-title__color-bg { position:absolute; height:100%; width:100%; left:0; top:0; background:#fff; z-index:0 } .divider-line { height:70px; width:1px; background:#dfdfdf; margin:0px 40px 0px 0px; } .product-title__color-bg.white { color:#222 } .product-title__color-text { position:relative; z-index:1 } .next-product { background:#1b5665; color:#fff; padding:10px 30px; border-radius:50px; } .next-product:hover { color:#fff; } .next-product i { transition:all 0.5s; margin-left:5px; } .next-product:hover i { transform:translateX(5px); } .fancybox-bg {} .fancybox-caption { background:#fff!important; color:#636363!important; font-size:25px!important; } .gd-sldm * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .gd-sldm .sldm { position:fixed; top:0; left:0; width:100%; z-index:150; } .gd-sldm .sldm a { text-decoration:none; } .gd-sldm .sldm a:hover { text-decoration:none; background-color:#ffffff; } .gd-sldm .sldm .sldm-overlay { display:none; } .gd-sldm .sldm-bg-image { width:100%; margin:43px 0 0; padding:0; -webkit-filter:blur(0) grayscale(0); filter:blur(0) grayscale(0); -webkit-transition:0.75s all; -moz-transition:0.75s all; -o-transition:0.75s all; -ms-transition:0.75s all; transition:0.75s all; } .gd-sldm .sldm-bg-image.active { -webkit-filter:blur(5px) grayscale(0.5); filter:blur(5px) grayscale(0.5); } .gd-sldm .sldm .sldm-bar { position:absolute; z-index:10; min-height:43px; padding:5px 0 0 48px; background:#f7f7f7; } .gd-sldm .sldm .sldm-bar .sldm-brand { color:#949494; line-height:43px; display:block; float:left; font-weight:500; font-size:20px; text-decoration:none; display:inline-block; padding-left:10px; -webkit-text-shadow:none; -moz-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; background-color:#f7f7f7; -webkit-backface-visibility:hidden; } .gd-sldm .sldm .sldm-bar .sldm-brand:hover { background:rgba(255,255,255,0.84); } .gd-sldm .sldm .sldm-bar .sldm-icons { float:right; } .gd-sldm .sldm .sldm-bar .sldm-icons a { width:43px; height:43px; display:block; float:left; color:##d0b985; font-size:18px; line-height:43px; text-align:center; -webkit-text-shadow:none; -moz-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; -webkit-backface-visibility:hidden; -webkit-transform:scale(0.9,0.9); -moz-transform:scale(0.9,0.9); -o-transform:scale(0.9,0.9); transform:scale(0.9,0.9); -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm .sldm-bar .sldm-icons a:hover { background:rgba(0,0,0,0.1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } .gd-sldm .sldm nav { z-index:30; position:fixed; top:0; width:310px; height:100%; background:#fff; -webkit-transform:translateX(-310px); -moz-transform:translateX(-310px); -o-transform:translateX(-310px); transform:translateX(-310px); -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm nav .sldm-nav-container { overflow-x:hidden; overflow-y:auto; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; } .gd-sldm .sldm nav .sldm-nav-container .sldm-header { height:110px; position:relative; } .gd-sldm .sldm nav .sldm-nav-container .sldm-header a { display:block; position:absolute; left:40%; top:90%; margin-top:-45px; width:95px; height:95px; overflow:hidden; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%; border-radius:100%; -khtml-border-radius:100%; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; z-index:999; -webkit-backface-visibility:hidden; -webkit-transform:scale(0.9,0.9); -moz-transform:scale(0.9,0.9); -o-transform:scale(0.9,0.9); transform:scale(0.9,0.9); -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm nav .sldm-nav-container .sldm-header a:hover { -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } .gd-sldm .sldm nav .sldm-nav-container .sldm-header a img { max-width:100%; display:block; border:6px solid #eeeeee; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%; border-radius:100%; -khtml-border-radius:100%; -moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; } .gd-sldm .sldm nav .sldm-nav-container .sldm-header .sldm-header-image-wrapper { height:110px; overflow:hidden; position:relative; } .gd-sldm .sldm nav .sldm-nav-container .sldm-header .sldm-header-background-image { position:absolute; top:0; left:0; max-width:100%; right:0; width:100%; height:100%; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav { padding:0 0 75px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul { margin:0; padding:0; list-style:none; position:relative; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li { line-height:1.3; font-size:14px; font-weight:300; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a { color:#000; display:block; text-decoration:none; position:relative; -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a:hover,.gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a:focus { background-color:rgba(0,0,0,0.15); } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li+li { border-top:1px solid #e9e9e9; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu>a:after { display:block; content:"\f107"; font-family:"FontAwesome"; height:20px; width:20px; line-height:20px; margin-top:-10px; position:absolute; top:50%; right:10px; text-align:center; -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu>a:hover:after,.gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu>a:active:after { right:10px; color:#394c53; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu>a.sldm-open:after { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu ul { display:none; padding-left:20px; border-top:1px solid #f2f2f2; background:#e5e5e5; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu ul li { background:#fff; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li.sldm-submenu ul li a { font-size:15px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default+ul { margin-top:43px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default+ul:before { content:""; display:block; width:60px; height:3px; background:#cfcfcf; position:absolute; top:-25px; left:50%; margin-left:-30px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social { border-top:1px solid #fff; border-bottom:1px solid #fff; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social:after,.gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social:before { clear:both; content:" "; display:table; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li { float:left; width:20%; font-size:24px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a { padding:12px 0; text-align:center; display:block; background:#dcdcdc; color:#585858; -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; margin-left:1px; margin-right:1px; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover { background:#fff; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover.sldm-facebook { color:#326477; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover.sldm-linkedin { color:#dd4b39; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover.sldm-twitter { color:#394c53; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover.sldm-instagram { color:#bd2125; } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-social li a:hover.sldm-youtube { color:#d22222; } .gd-sldm .sldm nav .sldm-toggle { position:absolute; top:10px; right:0px; width:48px; height:43px; overflow:hidden; display:block; cursor:pointer; color:#969696; background:#f7f7f7; -webkit-text-shadow:none; -moz-text-shadow:none; -o-text-shadow:none; -ms-text-shadow:none; text-shadow:none; -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .gd-sldm .sldm nav .sldm-toggle i { position:absolute; display:block; width:100%; height:100%; line-height:43px; font-size:24px; color:#fff; text-align:center; left:0; -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } i.sldm-close { font-size:13px; } .gd-sldm .sldm nav .sldm-toggle i.sldm-close { -webkit-transform:translateY(-43px); -moz-transform:translateY(-43px); -o-transform:translateY(-43px); transform:translateY(-43px); } .gd-sldm .sldm nav .sldm-toggle i:hover { background:rgba(0,0,0,0.1); } .gd-sldm .sldm.sldm-active nav .sldm-toggle i { -webkit-transform:translateY(43px); -moz-transform:translateY(43px); -o-transform:translateY(43px); transform:translateY(43px); } .gd-sldm .sldm.sldm-active nav .sldm-toggle i.sldm-close { -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } .gd-sldm .sldm.sldm-active .sldm-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:block; z-index:20; } .gd-sldm .sldm.sldm-active .sldm-overlay.sldm-white { background:rgba(255,255,255,0.6); } .gd-sldm .sldm.sldm-active nav { -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); -webkit-box-shadow:-1px 0 5px rgba(0,0,0,0.15); -moz-box-shadow:-1px 0 5px rgba(0,0,0,0.15); -o-box-shadow:-1px 0 5px rgba(0,0,0,0.15); -ms-box-shadow:-1px 0 5px rgba(0,0,0,0.15); box-shadow:-1px 0 5px rgba(0,0,0,0.15); } @media screen and (max-width:360px) { .gd-sldm .sldm.sldm-active nav .sldm-toggle { right:0; z-index:160; top:0; } } @media screen and (max-width:330px) { .gd-sldm .sldm.sldm-active nav { width:100%!important; } } .sldm-widget-container { position:fixed; top:65px; left:0; width:100%; z-index:5; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .sldm-widget-container * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .sldm-widget-container .sldm-widget { width:100%; background:#e8e8e8; height:60px; padding:10px; border-top:3px solid rgba(255,255,255,0.13); } .sldm-widget-container .sldm-widget.sldm-search-widget form { position:relative; margin:0; padding:0; } .sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-input { display:block; width:100%; font-size:14px; line-height:18px; padding:9px 145px 9px 10px; font-weight:100; background:#fff; color:#777; border:none; height:40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-input:focus { border:none; color:#444; outline:none; -webkit-box-shadow:none; -moz-box-shadow:none; -o-box-shadow:none; -ms-box-shadow:none; box-shadow:none; } .sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-button { display:block; width:130px; position:absolute; right:0; top:0; height:40px; line-height:37px; border:none; font-size:14px; text-transform:uppercase; font-weight:100; background:#D2AE6D; -webkit-text-shadow:0 0 0 #32b8e5; -moz-text-shadow:0 0 0 #32b8e5; -o-text-shadow:0 0 0 #32b8e5; -ms-text-shadow:0 0 0 #32b8e5; color:rgba(255,255,255,0.8); text-align:center; cursor:pointer; -webkit-transition:0.35s all; -moz-transition:0.35s all; -o-transition:0.35s all; -ms-transition:0.35s all; transition:0.35s all; } .sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-button:hover,.sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-button:focus { background-color:#b58500; } .sldm-widget-container .sldm-widget.sldm-search-widget form .sldm-button i { margin-left:10px; } .sldm-widget-container .sldm-widget.sldm-phone-widget .sldm-phone-widget-content { color:#ffffff; text-align:center; line-height:43px; } .sldm-clear { clear:both; overflow:hidden; } .sldm-hidden { display:none; } .navbar { position:absolute!important; } .home .product-noticeButton { right:0px; top:20px; } .modal-header { border-bottom:none; } .modal-content { background-color:#2e6472; color:#fff; } .close { color:#fff; opacity:0.9; } form#user-info-form { padding:20px 50px; } .form-control { background:transparent; border:none; border-bottom:1px solid #fff; box-shadow:none; border-radius:0px; } input.btn.btn-submit { background:transparent; border:2px solid #fff; border-radius:0px; border-radius:20px; padding:8px 40px; text-transform:uppercase; font-size:12px; } input.btn.btn-submit:hover { background:#fff; } .submit-block { text-align:center; } .modal-note { font-size:20px; padding:0px 20px; text-transform:capitalize; color:#efeaea; } label { text-transform:capitalize; } .sidebar-cat.col-2 .sidebar-cat-item { width:calc(100%/4)!important; } .scroll-cat { overflow-x:scroll; } .right-sidebar { flex-direction:column; position:fixed; z-index:99; background:#fff; right:-2px; width:50vw; height:100vh; } .single-right-block { display:flex; width:100%; align-items:center; justify-content:start; margin:0px; border-bottom:1px solid #ddd; position:relative; } .block-option { display:flex; flex-direction:column; justify-content:space-between; height:100%; } .single-right-block h4 { writing-mode:vertical-lr; padding:0px 20px; background:#222222; height:calc(100vh/3 - 1px); margin:0px; color:#fff; text-align:center; transform:rotate(180deg); } a.switch-link { align-self:flex-end; background:#26606b; color:#fff; padding:5px 10px; border-radius:50px; margin:10px; width:151px; text-align:center; position:absolute; right:0px; bottom:3px; } .choice-change { position:absolute; left:-40px; width:30px; top:0px; } .choice-change h3 { writing-mode:vertical-rl; font-size:19px; background:#24626e; line-height:40px; padding:20px 0px; margin:0px; color:#fff; text-transform:uppercase; top:21vh; position:relative; } .slide-right-sidebar { transform:translateX(100%); transition:all 0.5s; } .display-right-sidebar { transform:translateX(0%); } .close-right-sidebar { display:none; width:40px; text-align:center; line-height:40px!important; height:40px; background:#ffffff; box-shadow:0px 15px 15px -15px #000; } .display-right-sidebar .close-right-sidebar { display:block; } .display-right-sidebar .txt-sel { display:none; } .all-selected-block { display:flex; justify-content:left; align-self:left; flex-wrap:nowrap; overflow-x:auto; align-items:center; height:100%; } .sidebar-right-item { padding:0px 40px; } button.btn-floating { position:absolute; left:50%; border:2px solid #fff; z-index:9; bottom:2%; padding:8px 40px; background:transparent; border-radius:50px; color:#fff; overflow:hidden; top:auto; box-shadow:none; transform:translateX(-50%) scale(1); -webkit-transform:translateX(-50%) scale(1); } button.btn-floating:hover { transform:translateX(-50%) scale(1.1); -webkit-transform:translateX(-50%) scale(1.1); } button.btn-floating:before { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background:#fff; height:200px; border:none; width:100%; content:""; border-radius:50%; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0; z-index:-1; } button.btn-floating:hover::before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1); } .chooselaminates_page .btn-floating,.choosepreference_page .btn-floating { left:48%; transform:translateX(-50%); } button.btn-floating:hover { color:#000; } @keyframes next-btn { from { bottom:-100% },to { bottom:2% } } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li a img { width:32px; height:32px; position:absolute; top:50%; left:50%; margin-top:-16px; margin-left:-16px; fill:#222; filter:invert(1); } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul.sldm-default li:hover a img { filter:invert(1); } .selected.guide-answer-bt .btn-bg,.selectAll.guide-answer-bt .btn-bg { -webkit-transform:scale(1); transform:scale(1) } .selected.guide-answer-bt .btn-bg:before,.selectAll.guide-answer-bt .btn-bg:before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1) } .selected.guide-answer-bt span,.selectAll.guide-answer-bt span { position:relative!important; color:#000; } a.archi-line { position:absolute; right:130px; color:#999; border-bottom:1px solid #999; cursor:pointer; top:10px; pointer-events:auto; z-index:9; } a.archi-line:hover { color:#000; } .apply-btn-left-sidebar { position:absolute; right:80px; top:50%; transform:translateY(-50%); background:#53aece; z-index:999; text-align:center; padding:10px 10px; box-shadow:0px 15px 15px -15px #000; } .apply-link-sidebar { color:#fff; writing-mode:vertical-rl; text-orientation:upright; font-size:16px; } .apply-link-sidebar:hover,.apply-link-sidebar:focus { color:#fff; } p.modal-note { text-align:center; } .guide-quest-wrapper-architecture .guide-quest-icon { visibility:hidden; } #msg { text-align:center; } .homepage .home {} .homepage .footer { background:transparent!important; position:absolute; bottom:20px; } .homepage .footer-left-item { color:#8f8f8f; } .homepage .footer-left-item:hover { color:#1B5665; } .homepage .footer-right-item { color:#1B5665; } .homepage .footer-left { left:20px; } .homepage .footer-right { right:20px; } .home_copy_page .footer { background:transparent!important; position:absolute; bottom:20px; } .home_copy_page .footer-left-item { color:#8f8f8f; display:none; } .home_copy_page .footer-left-item:hover { color:#1B5665; } .home_copy_page .footer-right-item { color:#1B5665; } .home_copy_page .footer-left { left:20px; } .home_copy_page .footer-right { right:20px; } body.home_copy_page { overflow:hidden; } .back-img { position:absolute; top:0px; left:0px; z-index:-1; } .back-img img {} .owl-nav { display:none; } .slider-block { pointer-events:auto; } #right-form-block { position:absolute; width:350px; text-align:center; top:45%; transform:translateY(-50%); z-index:999; background:linear-gradient(to bottom,#f5f4f46e,#f5f4f4d1,#f5f4f4),url(asset('/frontend/images/chair.png'); box-shadow:0 0 black; background-color:#f5f4f4; background-size:50%; background-position:right bottom; background-repeat:no-repeat; box-shadow:0px 15px 15px -15px #000; pointer-events:auto; } .close-form-block { display:none; width:40px; text-align:center; line-height:40px!important; height:40px; color:#fff; background:#1b5665; box-shadow:0px 15px 15px -15px #000; } .right-form-block { right:-100%; transition:all 0.5s; } .right-form-block.open { right:0%; } .right-form-block.open .close-form-block { display:block; } .form-line { padding:10px 20px; } .right-form-block .form-control { border-bottom:1px solid #757474; } .right-form-block input.btn.btn-submit { color:#fff; border:none; background:rgba(0,0,0,0.8); } .gd-sldm .sldm nav .sldm-nav-container .sldm-nav ul .sidebar-cat-item-title { font-size:22px; line-height:22px; } .homepage .home-link-homepage { display:none; } .homepage .home-top-left { padding:0px 0px; } .productlisting_page .home-top-left,.search_page .home-top-left { padding:0px 90px; } .productlisting_page .sidebar { left:0px; width:initial; } .search_page .sidebar { left:0px; width:initial; } .guide-answer-bt { display:none; } .guide-answer-item.selected-grid-block { background:linear-gradient(to bottom,#4CAF50,#00e2fa,#499859); box-shadow:0px 0px 10px #1b5665; } .disabled,.disabled1 {} .disabled1 .guide-answer-wrapper,.disabled1 .guide-answer-wrapper {} .disabled1 .guide-answer-icon:before,.disabled .guide-answer-icon:before {} .disabled1 .guide-answer-icon .icon,.disabled .guide-answer-icon .icon {} .choosepreference_page .product-noticeButton,.chooselaminates_page .product-noticeButton { right:90px; } #main-container { position:relative; width:100%; z-index:2; } #main-container.hasSmoothScroll {} .productlisting_page footer,.search_page footer { padding-left:80px; } .grid-item:hover { cursor:pointer; } .next-product-name { color:#ccc!important; } .product_page .product-backButton svg { fill:#000; } .hover-next-pro-block { position:absolute; top:216px; height:100px; left:50%; opacity:0; transform:translateX(-50%); } h4.hover-next-pro-text { color:#fff; text-transform:uppercase; background:#1b5665; padding:10px 20px; transition:all 0.5s } .nextProduct-container:hover .hover-next-pro-block { opacity:1; } .mobile-answer-flex-block { display:contents; } .grid-item__weatherIcon .btn { border:none; } .grid-item-products { position:relative; overflow:hidden; } .grid-item-products img { transition:all 0.5s; width:100%; } .related-product-overlay { position:absolute; width:100%; top:0px; left:0px; vertical-align:middle; opacity:0; } span.rel-product-line { display:block; height:4px; width:100%; background:#fff; margin-top:12px; } .grid-item-products:hover img { opacity:1!important; } .grid-item-products:hover .related-product-overlay { opacity:1; } h3.rel-product-title { opacity:0; text-align:center; position:absolute; vertical-align:middle; top:0%; width:100px; margin:0px; background:#313131; font-size:12px; padding:10px 20px; left:50%; transform:translate(-50%,50%); color:#fff; transition:all 0.5s; z-index:99; } h3.rel-product-title:after { border-left:10px solid transparent; border-top:10px solid #313131; background:transparent; border-right:10px solid transparent; position:absolute; content:""; bottom:-9px; z-index:-5; display:none; } .grid-item-products:hover h3.rel-product-title { opacity:1; } #mob-filter-sidebar .accordion { width:calc(100% - 80px); max-width:360px; margin:0px 0px 0px; background:#FFF; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } #mob-filter-sidebar .accordion .link { cursor:pointer; display:block; padding:15px 15px 15px 42px; color:#4D4D4D; font-size:14px; font-weight:700; border-bottom:1px solid #CCC; position:relative; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease; } #mob-filter-sidebar .accordion li:last-child .link { border-bottom:0; } #mob-filter-sidebar .accordion li i { position:absolute; top:16px; left:12px; font-size:18px; color:#595959; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; transition:all 0.4s ease; } #mob-filter-sidebar .accordion li i.fa-chevron-down { right:12px; left:auto; font-size:16px; } #mob-filter-sidebar .accordion li.open .link { color:#1B5665; } #mob-filter-sidebar .accordion li.open i { color:#1B5665; } #mob-filter-sidebar .accordion li.open i.fa-chevron-down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } #mob-filter-sidebar .submenu { display:none; background:#fff; font-size:14px; } #mob-filter-sidebar .submenu label { margin-left:10px; } #mob-filter-sidebar .submenu li { padding:9px 10px 5px 50px; } #mob-filter-sidebar .submenu a { display:block; text-decoration:none; color:#d9d9d9; padding:12px; padding-left:42px; -webkit-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease; } #mob-filter-sidebar .submenu a:hover { background:#b63b4d; color:#FFF; } img.filter-img-mob { filter:invert(1); width:24px; margin-right:20px; } div#mob-filter-sidebar { height:100vh; overflow-y:scroll; } .logo-sarvha { display:inline-block; background:#1b5665; width:100px; text-align:center; } .product-carousel .owl-dots { text-align:center; display:table; width:100%; } .product-carousel .owl-dots img { width:60px!important; height:60px; object-fit:cover; margin:5px 10px; border-radius:10px; } .product-carousel .owl-dots button { border:none; background:transparent; } h2.img-caption-product { text-align:center; font-size:16px; text-transform:uppercase; } .store-listing ul { overflow-y:auto; overflow-x:hidden; max-height:50vh; padding-right:10px; } .store-listing ul li { list-style-type:none; } .store-listing ul li .flex-info-store { color:#fff; display:flex; padding:15px; align-items:center; text-align:left; } .info { width:95%; } .show-map-icon i { font-size:21px; } .store-locator form.search-form i { color:#fff; } .store-locator .btn-default { border:none; background:transparent; color:#fff; } .store-locator .btn-default:hover,.store-locator .btn-default:focus { background:transparent; box-shadow:none; outline:none; } .store-locator form.search-form input { border:none; width:100%; padding:8px; border-radius:20px; text-align:left; height:50px; font-size:22px; } .store-locator input:focus { outline:none; box-shadow:none; } .btn-set { background:#fff!important; color:#00626e!important; padding:5px 40px; border-radius:20px; height:34px; } .store-locator form.search-form input:focus { outline:none; box-shadow:none; } .store-locator .form-control { color:#fff; } button#store_enquiry_btn { background:transparent; border:2px solid #fff; border-radius:20px; padding:5px 20px; width:150px; margin:0px auto; } .store-locator-header.form-inline { display:flex; } .store-locator .form-inline .form-group { width:40%; margin:0px 10px; } .store-locator form.search-form { border-bottom:1px solid #fff; margin-bottom:30px; } .custom-container { width:80%; margin:0px auto; } section#storeLocator { width:100vw; min-height:100vh; color:#fff; padding:100px 0px; } .info a:hover { color:#1B5665; } .store-map { position:absolute; height:70vh!important; box-shadow:2px 2px 19px #adabab; } .store-locator .store-locator-details a { color:#fff!important; } h1.title-int-pages { font-size:54px; line-height:36px; color:#fff; text-transform:uppercase; letter-spacing:3px; margin-bottom:50px; } .show-map-icon { opacity:0; } .store-listing ul li .flex-info-store:hover,.store-listing ul li .flex-info-store:active,.store-listing ul li .flex-info-store:focus { background:#fff; color:#00626E; } .store-listing ul li .flex-info-store:hover .show-map-icon { opacity:1; } .store-listing ul::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); background-color:#F5F5F5; } .store-listing ul::-webkit-scrollbar { width:6px; background-color:#F5F5F5; } .store-listing ul::-webkit-scrollbar-thumb { background-color:#c6aa6a; } .store-locator-header { margin-bottom:20px; } .shape { animation:morph 8s ease-in-out infinite; border-radius:0% 40% 30% 70%/60% 30% 70% 40%; height:100%; transition:all 1s ease-in-out; width:65vw; z-index:5; left:0px; background:#00626E; position:absolute; z-index:-1; top:0px; left:0px; } @keyframes morph { 0% { border-radius:0% 20% 30% 0%/30% 30% 50% 40%; } 50% { border-radius:0% 50% 70% 0%/50% 60% 30% 60%; } 100% { border-radius:0% 20% 30% 0%/30% 30% 50% 40%; } } h3.producttitle { position:relative; left:0; width:100%; font-size:0; line-height:23px; font-weight:800; opacity:0.1; color:#1b5665; display:block; text-align:center; top:35px; font-size:5vw; } h3.producttitle span { font-size:10vw; } p.productcount { display:inline-block; font-family:roboto_bold; text-transform:uppercase; } .count-total { font-family:roboto_bold; } .result-block.text-center {} .count-total { color:#1b5665; border-radius:50%; line-height:103px; font-size:40px; display:inline-block; font-weight:700; height:120px; width:120px; border:8px solid #939393; margin-bottom:3px; } .career-page-full-block { background:#00626e; } .content-career { overflow-y:auto; overflow-x:hidden; max-height:50vh; padding-right:80px; } .hgvh-100 { width:100vw; height:100vh; color:#fff; padding:100px 0px; } .right-block-career { position:absolute; height:70vh!important; box-shadow:1px 1px 10px #adabab; padding:20px; text-align:center; background-color:#f5f4f4; display:flex; align-items:center; border-radius:20px; color:#313131; } .select2-container--default .select2-selection--single{ border:none; } .page-form-right .form-control { border-bottom:1px solid #757474; height:45px; margin-bottom:40px; } .page-form-right .form-control:focus { outline:none; box-shadow:none; } .black-submit-btn { color:#fff; border:none!important; background:rgba(0,0,0,0.8); border-radius:20px!important; padding:8px 40px!important; text-transform:uppercase; font-size:12px!important; } .black-submit-btn:hover { color:#fff; } .black-submit-btn:focus { outline:none; } .content-career::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); background-color:#F5F5F5; } .content-career::-webkit-scrollbar { width:6px; background-color:#F5F5F5; } .content-career::-webkit-scrollbar-thumb { background-color:#c6aa6a; } .product-details__item { opacity:0; -webkit-transform:translateX(-80px); -moz-transform:translateX(-80px); -ms-transform:translateX(-80px); -o-transform:translateX(-80px); transform:translateX(-80px); -webkit-transition:all 0.6s ease-out; -moz-transition:all 0.6s ease-out; -ms-transition:all 0.6s ease-out; -o-transition:all 0.6s ease-out; transition:all 0.6s ease-out; } .product-details__item.move { opacity:1; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } a.download-pro-img { position:absolute; left:50%; transform:translate(-50%,-50%); background:#fff; padding:10px 30px; border-radius:50px; box-shadow:0px 15px 15px -15px #000; opacity:0; } .pro-slider-img:hover .download-pro-img { opacity:1; transition:all 0.2s; } .pro-slider-img:hover img { transition:all 0.2s; } .search-btn { color:#fff; float:right; width:50px; height:50px; border-radius:50%; background:#1b5665; display:flex; justify-content:center; align-items:center; text-decoration:none; transition:0.4s; text-align:center; display:block; line-height:50px; } .search-txt { border:none; background:none; outline:none; float:left; padding:0; color:#fff; font-size:16px; transition:0.4s; line-height:50px; width:0px; } .search-txt:focus { background:#1b5665!important; border-radius:50px; } .search-txt:-webkit-autofill,.search-txt:-webkit-autofill:hover,.search-txt:-webkit-autofill:focus,{ border:1px solid green; -webkit-text-fill-color:green; -webkit-box-shadow:0 0 0px 1000px #000 inset; transition:background-color 5000s ease-in-out 0s; } .search-box:hover .search-txt { width:240px; padding:0 20px; } .search-box:hover>.search-btn { background:#ffffff; color:#1b5665; } .search-box { display:flex; } .search-container { position:absolute; right:100px; top:31px; background:#1b5665; z-index:99; border-radius:50px; } .choosepreference_page .search-container,.chooselaminates_page .search-container { right:150px; } .wrapper { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } footer { position:fixed; bottom:0px; } .grid .ajax-load { text-align:center; position:absolute; left:50%; height:40px; width:40px; bottom:50px; } .story-section { position:relative; background:#f6f6f6; } .shape-container { position:absolute; top:auto; left:0; right:0; width:100%; height:150px; z-index:2; transform:translateZ(0); overflow:hidden } .shape-container[data-shape-position="top"] { top:0; bottom:auto; transform:rotate(180deg) } .shape-container[data-shape-position="bottom"] { top:auto; bottom:0 } .shape-container .shape-item { fill:#FFF; width:100%; left:0; bottom:0; height:100%; position:absolute } .mainul { padding:40px; } .aboutus_page { background:#F6F6F6; } .catalogue-blob-4 { bottom:18rem; right:-32rem; width:43rem; -webkit-transform-origin:top right; transform-origin:top right } @media screen and (min-width:1440px) { .catalogue-blob-4 { bottom:22rem; right:-47rem; width:49rem; } } @media screen and (min-width:1800px) { .catalogue-blob-4 { -webkit-transform:scale(1.3); transform:scale(1.3) } } .catalog-blob { opacity:.2; top:1rem; width:20vw; } @media screen and (min-width:1440px) { .catalog-blob { width:24vw; } } .cmp-profile { background:#fff; position:relative; margin-top:-10px; } .cata-head.gradient-h2 { color:white; background:url('../images/catalog/catalogue-back.png') no-repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-transform:uppercase; font-weight:900; } .cata-head.typography-headline-super { font-size:80px; line-height:1.05; font-weight:600; margin-top:0px; padding-top:85px; text-align:center; letter-spacing:-.015em; font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; } @media screen and (max-width:1400px) { .cata-head.typography-headline-super { font-size:51px; } } @media screen and (max-width:1280px) { .cata-head.typography-headline-super { font-size:45px; padding-top:38px; } .items-wrapper { margin-top:5%!important; } } a.download-pro-img { position:absolute; bottom:29px; box-shadow:1px 1px 19px #999; padding:10px 13px 9px 13px; } .item.a4sheet a.download-pro-img {} textarea { resize:vertical!important; } form.search-box i.fa.fa-search { color:#ffffff; } form.search-box:hover i.fa.fa-search { color:#000000; } form.search-box:hover input { color:#ffffff; } .modal.in .modal-dialog { height:calc(100vh - 60px); } .modal-content { top:50%; transform:translateY(-50%); } .view-all-available { pointer-events:auto; background:#1b5665; color:#fff; padding:8px 20px; display:block; border:none; border-radius:50px; position:relative; overflow:hidden; z-index:1; } .view-all-available:hover { color:#fff; } .view-all-available:after { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background:#bea449; height:200px; border:none; width:100%; content:""; border-radius:50px; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0; z-index:-1; } .view-all-available:hover::after { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1); } .popuptext { font-size:16px; font-weight:normal; line-height:20px; padding:20px; background-color:black; background:linear-gradient(to bottom,#177086,#083d4a,#000000); border-radius:20px; color:white; text-align:center; } .popup { position:absolute; margin-left:128px; margin-top:-162px; width:320px; opacity:0; transition:all 0.6s; -webkit-transition:all 0.6s; } .popover-btn:hover { cursor:pointer; } .popover-btn:hover~.popup { margin-left:128px; margin-top:-172px; opacity:1; } .grid-item__visuals img { animation:zoomout 1s; transition-delay:4s; } @keyframes zoomout { 0% { transform:scale(0); },100% { transform:scale(1); } } .close-chara { display:none; } .slider { position:absolute; left:0px; top:0px; height:100%; width:100%; } .back-img { left:40%; top:50%; transform:translate(0%,-50%); z-index:55; } .back-img img { margin-left:40px; } .back-img img { z-index:99999; transform:scale(0.9); } .slider--item { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); } .slider--item:not(:first-child) { opacity:0; visibility:hidden; } .home-load-block { background:#fff; height:100vh; width:100vw; position:absolute; top:0; left:0; right:0; border:0; } .home-load-content { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); } .load-text { color:#000; opacity:0.6; text-align:center; font-size:70px; letter-spacing:10px; } button.btn.toggle-features.visible-xs.view-all-available { position:absolute; bottom:0px; left:50%; transform:translateX(-50%); border-radius:20px 20px 0px 0px; z-index:-1; } @media screen (max-width:767px) { .slider-block { transform:scale(1.5); } .slider-inner img { transform:translateX(10px); } } .right-block-career .form-control { color:#000!important; } .home-action-bt span h2,.home-action-bt.visible-xs span h3 { color:#ffffff!important; font-size:14px; margin:inherit; line-height:inherit; position:relative; display:block; color:#fff; font-family:'roboto_regular'; -webkit-transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.8s cubic-bezier(0.165,0.84,0.44,1),color 0.4s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.8s cubic-bezier(0.165,0.84,0.44,1) } h3.home-action-desc { color:#bea449!important; margin:0px 0px 10px 0px; } .about-head.typography-headline-super { margin-bottom:10px; } .guide-answer-title h2 { font-size:22px; margin-top:0px; font-family:roboto_regular!important; } .grid-item-laminates .guide-answer-title h2 { font-size:18px; line-height:23px; font-weight:800; } .choose-laminates_page .flex-container-laminate,.choose-preference_page .guide-answer { padding-right:0px!important; } .guide-quest-title h1 { font-weight:800; font-size:80px; line-height:60px; margin-top:25px; margin-bottom:46px; font-family:roboto_regular!important; } .guide-quest-num h2 { font-size:16px; line-height:16px; font-weight:200!important; letter-spacing:0.2em; margin-bottom:10px; text-transform:uppercase; font-family:roboto_regular!important; } .product-assets__catTitle h2 { position:relative; font-size:1.6rem; font-weight:300; line-height:1.4rem; margin-left:45px; font-family:roboto_regular; font-weight:100; -webkit-transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.4s cubic-bezier(0.165,0.84,0.44,1); color:#ccc; text-align:center!important; margin:0px; } .product-description__gamme h2 { position:absolute; color:#2a2a2a; font-size:12vw; line-height:30rem; text-transform:uppercase; font-weight:600; padding-left:6.25%; z-index:1; -webkit-transform:translate3d(0,-35%,0); transform:translate3d(0,-35%,0); font-size:7vw; font-weight:600; padding-left:0px; font-family:roboto_regular!important; line-height:7rem; } .result-block h1.custom-products-title { margin:0px; font-size:inherit; font-family:roboto_bold!important; text-transform:uppercase; line-height:initial; letter-spacing:inherit; } .result-block p.productcount { margin-bottom:2px; } h3.custom-filters-title { line-height:unset; font-size:inherit; font-weight:unset; font-family:roboto_regular!important; } .edit-num { display:block; border-bottom:1px solid #fff; line-height:2.428571; height:34px; font-size:15px; margin-right:6px; text-align:center; } .nopadding { padding-left:0px; padding-right:0px; } .footer-line { margin:0px; text-align:center; color:#9c9c9c; padding:10px 60px; background:#000; border-bottom:1px solid #0c0c0c; } .homepage .footer-line { text-align:center!important; color:#9c9c9c!important; padding:10px 60px!important; background:transparent!important; border-bottom:none!important; } .homepage .tagline-footer-block { position:absolute; bottom:17px; z-index:9; } .whatsappdesk { position:fixed; right:35px; top:100px; width:initial; line-height:28px; } img.icons-col { width:20px; height:20px; margin-right:5px; } .whatsappdesk.home-action-bt.btn.hidden-xs div { border:2px solid #bca148; background:transparent; height:40px; } .add-head { font-size:18px; } .pavimentofloors { position:absolute; bottom:0px; left:25px; color:#fff; } .pavimentofloors a { color:#fff; } .pavimentofloors a:hover { color:#fff!important; background:transparent!important; } @media screen and (max-width:767px) { .homepage .tagline-footer-block { position:fixed; bottom:0px; text-align:center; left:50%; width:100%; transform:translate(-50%); } .add-head { font-size:14px; } .pavimentofloors { bottom:24px; left:initial; right:15px; } .reach-us_page .tagline-footer-block { bottom:92px; top:initial; width:100%; } .store-map { position:relative!important; width:100%; } .whatsappmob { top:165px!important; } } .custom-container { display:table; } .cart-btn { position:absolute; right:100px; top:31px; background:#1b5665; z-index:12; color:#fff; text-align:center; display:flex; justify-content:center; align-items:center; border-radius:50px; width:50px; border:none; height:50px; } .cart-count{ position:absolute; z-index:200000; right:-7px; top:0px; font-size:12px; background:#bea449; border-radius:50%; width:25px; height:25px; line-height:25px; } .search-container{ right:220px; } a.archi-line{ right:290px!important; } .input-number { width:50px; padding:0 12px; vertical-align:top; text-align:center; outline:none; } .input-number,.input-number-decrement,.input-number-increment { background:#f1f1f1; border:none; height:40px; user-select:none; } .input-number-decrement,.input-number-increment { display:inline-block; width:30px; line-height:38px; background:transparent; color:#444; text-align:center; font-weight:bold; cursor:pointer; } .input-number-decrement:active,.input-number-increment:active { background:#fff; } .input-number-decrement { border-right:none; border-radius:4px 0 0 4px; } .input-number-increment { border-left:none; border-radius:0 4px 4px 0; } .e-product-intro { display:flex; align-items:center; justify-content:center; width:40%; } .single-row { display:flex; justify-content:space-around; align-items:center; padding:10px 10px; border-bottom:1px solid #e8e8e8; } .e-pro-info { text-align:center; padding:20px; width:70%; } .e-product-img { width:30%; } h2.e-pro-name { font-size:14px; } h2.e-pro-price { font-size:14px; } h6.e-pro-color { font-size:11px; color:#9c9c9c; font-weight:100; } .e-pro-price-block { justify-content:center; width:15%; text-align:center; } .tableHead h2 { font-size:16px; text-align:center; margin:5px 0px; } .tableHead .single-row { color:#fff; background:#00626e; align-items:center; } .e-pro-qty-block { width:20%; text-align:center; justify-content:center; } .e-pro-price-total-block { width:15%; justify-content:center; align-self:center; text-align:center; } .e-pro-remove-block { width:10%; text-align:center; } .subtotal-block { display:flex; justify-content:space-between; padding:20px; } .subtotal-right { } .grey-text { color:#a2a2a2; } .line-bottom {text-decoration:underline;} .pd-top-cart{ padding-top:150px; padding-bottom:100px; } .btn-green { background:#00626e; color:#fff; border-radius:50px; padding:10px 30px; z-index:9; bottom:2%; padding:8px 30px; border-radius:50px; color:#fff; overflow:hidden; top:auto; box-shadow:none; transform:translateX(-50%) scale(1); -webkit-transform:translateX(-50%) scale(1); transform:scale(1); } .btn-green:hover{ color:#fff; } .btn-green:before{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background:#000; height:200px; border:none; width:100%; content:""; border-radius:50%; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s,opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s; -webkit-transform:scale(0); transform:scale(0); opacity:0; z-index:-1; } .btn-green:hover::before { opacity:1; -webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1); transition:transform 0.6s cubic-bezier(0.165,0.84,0.44,1),opacity 0.6s cubic-bezier(0.165,0.84,0.44,1),-webkit-transform 0.6s cubic-bezier(0.165,0.84,0.44,1); -webkit-transform:scale(1); transform:scale(1); } .shipping-form-block .form-control{ border:1px solid #bdbdbd; color:#5f5f5f!important; } .btn-ship-submit { border-radius:0px; background:#000; padding:8px 0px; width:100%; } .cart-container { width:70%; margin:0px auto; display:table; } .cart-top { margin-bottom:20px; border:1px solid #efefef; } .shipping-form-block { padding:20px 0px; border:1px solid #efefef; } .checkout-page .form-control{ border:1px solid #ccc; border-radius:5px!important; color:#5f5f5f!important; } .checkout-page .form-control:focus{ border:1px solid #bea449; box-shadow:none!important; } .row-grp { margin:10px 0px; } .pd-rt-0{ padding-right:0px!important; } .pd-lt-0{ padding-left:0px!important; } .flex-center { display:flex; align-items:baseline; justify-content:space-between; } .link-orange { color:#bea449; } h3.title-cart { font-size:16px; } .checkout-page .e-pro-info{ padding:0px; padding-left:20px; text-align:left; } span.num-item { position:absolute; background:#797070; width:20px; height:20px; color:#ddd; text-align:center; font-size:10px; right:-10px; font-weight:600; top:-10px; line-height:20px; border-radius:50px; } .e-product-img{ position:relative; } .total-block { padding:10px 0px; border-top:1px solid #c1c1c1; border-bottom:1px solid #c1c1c1; margin:10px 0px; } .border-left-grey{ border-left:1px solid #c5c5c5; } .border-right-grey{ border-right:1px solid #c5c5c5; } .checkout-page{ min-height:95vh; } .visible-xs-cart{ display:none; } @media(min-width:768px){ .pd-left-50{ padding-left:50px; } .pd-right-50{ padding-right:50px; } } @media(min-width:1600px){ .cart-container{ width:60%; } } @media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) { .m-pd-left-0{ padding-left:0px; } .m-pd-right-0{ padding-right:0px; } .border-right-grey{ border-right:0px; border-bottom:1px solid #c5c5c5; padding-bottom:20px; margin-bottom:10px; } .checkout-page .form-control{ margin-bottom:10px; } } @media(max-width:767px){ .checkout_page h1.home-top-left,.cart_page h1.home-top-left{ background:#fff; } .flex-wrap-mob{ flex-wrap:wrap; } .mb-f-wd-100{ width:100%; } .border-right-grey{ border-right:0px; border-bottom:1px solid #c5c5c5; padding-bottom:20px; margin-bottom:20px; } .pd-top-cart{ padding-top:80px; padding-bottom:80px; } .btn-green{ font-size:12px; padding:6px 12px; } .m-pd-left-0{ padding-left:0px; } .m-pd-right-0{ padding-right:0px; } .row-grp{ margin:0px; } .checkout-page .form-control{ margin-bottom:10px; height:initial ; } .flex-center{ margin-top:10px; } .checkout_page h2{ letter-spacing:initial; } .cart-container{ width:90%; } .cart-btn{ position:fixed; right:75px; top:12px; width:40px; border:none; height:40px } .e-pro-qty-block{ float:right; } .single-row{ display:block; position:relative; } .trash_btn{ position:absolute; right:0px; top:15px; } .e-pro-info{ text-align:left; } .e-pro-price-block,.e-pro-price-total-block,.e-product-intro{ width:100%; text-align:left; } .e-pro-qty-block{ width:50%; } .visible-xs-cart{ display:inline-block; } .tableHead{ display:none; } i.fa.fa-times { color:#fff; padding:4px; } .subtotal-block{ flex-direction:column; } .m-mg-bott{ margin-bottom:10px; } } @media(max-width:1023px) and (orientation:landscape){ .cart-btn{ right:75px; top:12px; width:30px; border:none; height:30px } } .profile-card { position:fixed; width:500px; right:0px; top:0px; z-index:999; background:#ffffff; padding:15px; box-shadow:0px 15px 15px -15px #eaeaea; border:1px solid #eaeaea; transform:translateX(100%); transition:all 0.4s; border-radius:20px 0px 0px 20px; } .profile-card.open{ transform:translateX(0%); } .profile-block { display:inline-flex; margin:0px 0px 10px; align-items:center; width:100%; } .close-profile { width:25px; height:25px; position:absolute; right:10px; text-align:center; } ul.profile-cart-list li a { color:#4c4c4c; } .login-btn { color:#fff; float:right; width:50px; height:50px; border-radius:50%; background:#1b5665; text-decoration:none; transition:0.4s; text-align:center; display:block; line-height:50px; display:inline-block; position:absolute; right:160px; top:31px; z-index:12; } .user-img { width:50px; background:#e2e2e2; height:50px; border-radius:50%; margin:00px 20px; } ul.profile-cart-list { padding-left:0px; list-style-type:none; text-align:center; } ul.profile-cart-list li { font-size:18px; margin:5px 0px; display:inline-block; padding:5px 10px; background:transparent; color:#fff; border-right:1px solid #e8e8e8; text-align:center; } .log-link { color:#f39d00; padding:0px 10px; } .sp-20{ padding:10px 0px } .user-img span { font-size:20px; font-family:roboto_bold!important; text-align:center; display:block; line-height:50px; } .edit-profile { padding-left:10px; color:#1b5b83; } ul.profile-cart-list li a i { margin-right:8px; color:#888; } ul.profile-cart-list li a:hover { color:#daac07; } ul.profile-cart-list li:last-child { border-right:0px; } .login-block { padding:0px 30px; } @media(min-width:768px){ .login-block .form-control{ height:45px; } } @media(max-width:767px){ .profile-card{ width:initial; } .profile-block{ flex-direction:column; } ul.profile-cart-list li{ padding:2px 10px; text-align:left; margin:0px 0px; display:block; border-right:0px; } ul.profile-cart-list li a{ font-size:12px; } .user-details h3 { font-size:16px; } } .contact-msg-info{ color:#3e3e3e; } .contact-msg-info>i{ width:17px; height:17px; background:#22626e; text-align:center; line-height:17px; color:#fff; border-radius:50%; } .add-cpn-btn{ width:100%; } .homepage .cart-btn,.homepage .login-btn{ border:2px solid #c3a55b!important; } .add_to_cart { background:transparent; border:1px solid #bfbfbf!important; color:#9a9a9a; border-radius:0px; } .add_to_cart:hover { background:#4d4d4d; color:#fff; } .cal-ship-btn{ display:block; width:100%; } .subtotal-left textarea{ border:1px solid #dcdcdc; } .shipping-blok { margin:30px auto; } .v-emty-cart{ min-height:400px; background:#f3f3f3; display:flex; align-items:center; justify-content:center; flex-direction:column; } .bg-gradient-primary{ background-color:#1B5665!important; background-image:linear-gradient(180deg,#1B5665 10%,#1B5665 100%)!important; background-size:cover!important; } .coupon-btn { display:block; width:100%; } .subtotal-right { padding:20px 20px; background:#f1f1f1; width:50%; float:right } .block-amounts { display:flex; justify-content:space-between; margin:10px 0px; } .block-amounts p { font-size:20px; } .gray-block{ padding:20px; background:#f7f7f7; } .log-checked { position:absolute; z-index:2; right:-7px; top:0px; background:#bea449; width:25px; height:25px; border-radius:50%; color:#fff; font-size:10px!important; line-height:25px!important; } @media (max-width:767px){ button.login-btn { position:fixed; right:0; top:58px; width:40px; border:none; height:40px; line-height:40px; border-radius:0px; } } .login .text-danger { color:#bea449!important; } @media (min-width:767px){ .mini-height{ min-height:768px!important; } } @media (min-width:1400px){ .mini-height{ min-height:90vh; } } .e-product-img{ margin:5px 0px; } div#footer-read-more { background:#000; color:#fff; padding:40px 40px; } div#footer-read-more p { margin-bottom:20px; } div#footer-read-more a { color:#4f90ff; }}