body { background-color: #fff; margin: 0; padding: 0; font-family: 'Heebo', sans-serif; color: #000000; } @media(min-width: 1024px){ body#page_main{ /*overflow: hidden;*/ font-size: 1vw; } } body#page_main .container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-position: bottom center; animation: fadein 2s; background-color: #fff; background-repeat: no-repeat; } .scroll{ animation: bounce 1s infinite alternate; -webkit-animation: bounce 1s infinite alternate; position: fixed; bottom: 0; z-index: 9999; /* left: 0; */ right: 42%; margin: 0 auto; text-align: center; } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } @-webkit-keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } .container { min-height: 980px; height: 100vh; position: inherit; background-size: cover; background-position: center; } .fouronfour{ position: absolute; top: 40.1vw; left: 20.5vw; margin: 0 auto; text-align: center; width: 10vw; z-index: 1; display: none; } .fouronfour img{ width: auto !important; max-width: 100%; margin: 0 auto; height: auto; } ._logo_subaru{position: relative;text-align: center;z-index: 2;width: 47%;margin: 0 auto;margin-bottom: 5%;margin-top: 10%;} ._logo_subaru img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } ._logo_fiat{ position: absolute; right: 3.5%; top: 1%; display: none; } .lead { position: absolute; right: auto; top: 2.2vw; left: 1.2vw; z-index: 2; width: .5vw; display: none; } .lead img{ width: 100%; max-width: 1vw; } .samelet{ position: relative; left: 10.5vw; top: 0; margin: 0 auto; text-align: center; width: 15vw; z-index: 4; left: 0; } .samelet img{ width: auto; max-width: 100%; height: auto; margin: 0 auto; } #main_carousel{margin-bottom: 5vw;/* background: red; */width: 80%;} #main_carousel .item{width: 100%;/* height: 100vh;*/height: 84vh;position: relative;} #main_carousel ._bg { width: 100vw; height: 42vw; background-repeat: no-repeat; background-position: right top; background-color: #fff; } #main_carousel #bg1._bg { /* background-position: right center; */ } ._footer {/* position: fixed;*//*bottom: 1.5vw;*//* bottom: 0;*/background: #fff;width: 100%;right: 0;left: auto;z-index: 990;/* height: 5.5vw; */width: 100%;margin-top: 0;position: relative;} .small-letters, .polution { /* margin: 0 auto; */ /* font-size: 131.25%; */ /* text-align: justify; */ /* line-height: 1; */ /* padding: 8px 0; */ /* width: 95%; */ /* right: 0; */ /* top: 87.109375%; */ /* cursor: pointer; */ /* text-align: right; */ /* direction: rtl; */ direction: rtl; } .polution { /* margin: 0 auto; font-size: 131.25%; text-align: justify; line-height: 1; padding: 8px 0; width: 95%; left: 0; top: 87.109375%; cursor: pointer;*/ font-size: .8vw; text-align: right; /* background: red; */ width: 100%; position: relative; right: 1vw; top: 0; font-weight: normal; padding-bottom: 0.5vw; } .pol-container { display: flex; flex-wrap: wrap; max-width: 100%; margin: 0 auto; position: absolute; bottom: -100%; background-color: white; right: 0; left: 0; padding: 50px; padding: 0; box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.270588); transition: bottom 500ms; opacity: 0; z-index: -10; } .pol-container.on { bottom: 0; z-index: 970; opacity: 1; padding-bottom: 1%; } .pol-container>div.close-polution { position: absolute; top: 1.5%; left: 0.51%; display: block; display: none; } .pol-container>div { width: 50%; display: flex; align-items: flex-end; padding-bottom: 1vw; } table { direction: rtl } table.data { width: 35vw; margin: 2% 3% 01% } @media (max-width: 1023px) { table.data { width: 96%; margin: 2% 2% } } table.data td, table.data th { padding: 1% } table.grid tbody td { position: relative; font-size: 120%; text-align: center; border-right: 2px solid white; border-left: 2px solid white; width: 2.5vw; height: 2.5vw; line-height: 0.6; font-weight: 600; padding: 0 } table.grid tbody td.title { line-height: 0.8; text-align: right } table.grid.pol tbody td { width: 1.62vw; height: 1.62vw; font-size: 98% } table.grid.pol tbody td.title { line-height: 0.8; text-align: right } table.grid.pol tbody td.pollution-15-top { border-top: 3px solid #c32025; border-left: none !important; width: 10%; text-align: right } table.grid.pol tbody td.pollution-1-top { border-top: 3px solid #007c42; border-right: none !important; width: 10%; text-align: right; padding-right: 0.5%; line-height: 1; } table.data tbody td, table.data th { border: 1px solid; border-right: none; text-align: center; font-size: 100%; font-size: 1vw; } @media (max-width: 1023px) { table.data tbody td, table.data th { font-size: 3vw; padding: 0.5% } } table.data tbody td:first-child, table.data th:first-child { border-right: 1px solid } table.grid tfoot td { font-size: 92%; padding-top: 10px; letter-spacing: 0.02em; font-weight: 600; line-height: 1; text-align: right } @media (max-width: 1023px) { table.grid tfoot td { font-size: 2vw; width: 100%; padding-top: 1vw } } @media (max-width: 1023px) { table.grid { margin: 0 auto; max-width: 96% } } table.grid thead th { text-align: right; font-size: 100%; padding-bottom: 3% } @media (max-width: 1023px) { table.grid thead th { font-size: 4vw } } @media (max-width: 1023px) { table.grid tbody td { width: 6vw; height: 6vw; font-size: 3vw } } table.grid.pol thead th { padding-bottom: 0.5%; padding-bottom: 3% } @media (max-width: 1023px) { table.grid.pol tbody td { width: 3vw; height: 3vw; font-size: 2vw; border-width: 1px } } div.close-polution { background-color: #255a9b; width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 26px; color: white; z-index: 666666666; } ._title {position: relative;width: 100%;/* display: none; */font-size: 160%;padding-top: 13%;width: 67%;margin: 0;direction: rtl;margin-right: 5%;} ._title h1{ margin: 0; padding: 0; text-align: center; color: #fff; margin-top: -1%; } ._title h2{margin: 0;padding: 0;text-align: center;color: #fff;display: flex;flex-wrap: wrap;justify-content: space-evenly;/* flex-direction: row-reverse; */width: 100%;margin: 0 auto;font-weight: normal;} ._title h3{ margin: 0; padding: 0; text-align: center; color: #fff; font-size: 100%; font-weight: normal; /* border-top: 2px #fff solid; border-bottom: 2px #fff solid; */ width: 60%; margin: 0 auto; margin-top: 1.5%; line-height: 1.4; padding: 0.3%; border-top: 1px #fff solid; border-bottom: 1px #fff solid; } ._title h3 .gift { display: inline-block; color: #fff; background-color: #b41e39; padding: 0.3rem 0.8rem 0.3rem 0.8rem; margin-right: 0.5rem; font-size: 56%; vertical-align: middle; } ._title img{width: auto !important;/* width: auto ;*/max-width: 100%;/* height: auto;*//* max-height: 3rem;*//* margin: auto;*/position: relative;top: -.2vw;right: 0;} ._text { position: absolute; right: 2.5vw; top: .9vw; width: 7.6vw; } ._text img{ width: 100%; max-width: 50vw; } ._model { position: absolute; right: -.5vw; top: 22.3vw; width: 57vw; display: none; } ._model img{ width: auto !important; max-width: 100%; height: auto; display: block; } ._text1 { position: absolute; right: 5vw; top: 17.7vw; width: 63vw; display: none; } ._text1 img{ width: auto !important; max-width: 100%; height: auto; } ._flah3 { position: absolute; right: 61vw; top: 11.2vw; width: 8vw; display: none; } ._flah3 img{ width: auto !important; max-width: 100%; height: auto; } ._text2 { position: absolute; right: 11.9vw; top: 38vw; width: 37vw; display: none; } ._text2 img{ width: auto !important; max-width: 100%; height: auto; } ._text3 { position: absolute; top: 8.45vw; right: 24.5vw; width: 27vw; display: none; } ._text3 img{ width: auto !important; max-width: 100%; height: auto; } ._pass { position: absolute; top: 35.1vw; right: 0; width: 100vw; } ._pass img{ width: auto !important; max-width: 100%; height: auto; } .small-letters { font-size: 1vw; background: white; width: auto; position: relative; right: 0; top: 0; padding-top: .5vw; padding-bottom: .5vw; padding-right: 1vw; font-size: .7vw; font-weight: normal; padding-left: 1vw; } .small-letters a{ color: blue; } .safe{ position: relative; top: -20%; } .safty-0{ background-color: #a62a31; } .safty-1{ background-color: #f15925; } .safty-2{ background-color: #fecd0b; } .safty-3{ background-color: #20b88c; } .safty-4{ background-color: #2b8ba3; } .safty-5{ background-color: #268dcc; padding: 0 8px; } .safty-6{ background-color: #1271b9; padding: 0 5px; /* table.grid &{ &::after { content: ''; position: absolute; top: -0.8vw; width: 0; height: 0; border-style: solid; border-width: 0.7vw 1.3vw 0px 1.3vw; border-color: #1271b9 transparent transparent transparent; left: 0.1vw; @include breakpoint('mobile'){ border-width: 2vw 4vw 0px 4vw; top: -2.4vw; left: -0.7vw; } } }*/ } .safty-7{ background-color: #4270b7; padding: 0 8px; } .safty-8{ background-color: #435caa; } .pollution-1{ background-color: #007c42; border-left: none !important; } .pollution-2{ background-color: #007c42 ; } .pollution-3{ background-color:#00944c ; } .pollution-4{ background-color: #00a551; } .pollution-5{ background-color: #00a651; } .pollution-6{ background-color:#0faf4d ; } .pollution-7{ background-color: #8bc63f; } .pollution-8{ background-color:#ffd715 ; } .pollution-9{ background-color: #fec847; } .pollution-10{ background-color: #f9a146; } .pollution-11{ background-color: #f47c27; } .pollution-12{ background-color:#f26724; } .pollution-13{ background-color: #ed1d39; padding: 0 5px; } .pollution-14{ background-color: #ed1c24; padding: 0 5px; } .pollution-15{ background-color:#c32025 ; border-right: none !important; table.grid &{ &::after { content: ''; position: absolute; top: -0.8vw; width: 0; height: 0; border-style: solid; border-width: 0.7vw 1.3vw 0px 1.3vw; border-color: #c32025 transparent transparent transparent; left:-.25vw; @include breakpoint('mobile'){ border-width: 2vw 4vw 0px 4vw; top: -2.4vw; left: -0.7vw; } } } } .mouseover { position: absolute; /* bottom: -300px; */ bottom: 0; right: 0; width: 1470px; max-width: 100%; padding-top: 100px; transition: .3s all; opacity: 0; z-index: 9; direction: rtl; padding-top: 0; left: auto; width: 77vw; min-height: 18vw; opacity: 0; bottom: -40vw; padding-top: 0; bottom: 0; } @media(min-width: 1024px){ ._footer .polution{ overflow: hidden; } ._footer .polution:hover{ overflow: inherit; } } ._footer .polution:hover .mouseover{ bottom:0; padding-top: 0; opacity: 1; } ._mouse{ position: relative; right: 0.7vw; width: 100%; max-width: 63vw; } .thefooter{ position: relative; z-index: 25; float: right; } .step_pic { max-width: 100%; padding: 0; margin: 0; position: relative; /*height: 100vh;*/ } /*._video { position: absolute; width: 100%; left: auto; right: 0; top: 0; bottom: 0; background-color: #001938; background-repeat: no-repeat; background-color: #fff; background-position: 100% center; width: 100%; background-image: url('../images/main/bg1.jpg'); } */ ._video video{ width: 100%; position: relative; top: 0; } ._video a { display: block; width: 100%; height: 242px; position: absolute; left: 0; right: 0; text-align: center; bottom: 0; top: 0; margin: auto; outline: none; } ._video a img{ transition: .3s all } ._video a img:hover{ transform: scale(1.1); opacity: .7; } .step_pic h2 { color: red; font-size: 0px; margin: 0; } .step_pic ._bg { background-image: url(images/5008/steps/2.jpg); height: 100vh; background-position: right top; background-repeat: no-repeat; background-size: cover; } .step_pic img { max-width: inherit; height: inherit; } /*#page_108 .container { background-position: 89% top; } #page_208 .container { background-position: 46% top; } */ .inner { width: 1500px; position: absolute; right: 0; max-width: 100%; height: 100%; } .inner .container-title{ position: absolute; left: 0; right: 6%; margin: 0 auto; text-align: center; top: 6.5%; padding-right: 0; } .inner .container-img{ position: absolute; right: 5%; top: 27%; width: 70%; } .inner .container-img img{ max-width: 65%; } #page_main .inner .container-title{ top: 2%; left: auto; right: 26%; width: 49%; } #mobileCarousel{ } .owl-prev { position: absolute; width: 100px; z-index: 999; top: 33%; right: 70%; background: none !important; outline: none !important; } .owl-next { position: absolute; width: 100px; z-index: 999; top: 33%; right: 0; background: none !important; outline: none !important; } .owl-prev:hover,.owl-next:hover{ opacity: .7; } .inner .container-models { /*position: absolute;*/ /*left: 0;*/ /*right: 0;*/ /*bottom: 150px;*/ position: absolute; left: auto; right: 10%; bottom: 150px; width: 75%; } .inner .container-models ul{ list-style: none; margin: 0; padding: 0; display: block; text-align: center; direction: rtl; } .inner .container-models ul li{ display: inline-block; margin: 0 15px; } .container_mobileCarousel { width: 80%; margin:0 auto; left: 0; right: 0; top: 66%; position: absolute; } .container_mobileCarousel ul{ list-style: none; margin: 0; padding: 0; } .container_mobileCarousel .owl-item img{ width: auto; /*max-width: 172px;*/ height: 179px; margin: 0 auto; } .credit { position: absolute; right: 0.5%; top: 5%; z-index: 1; } .footer { background-color: white; width: 100%; height: 10%; position: fixed; bottom: 0; z-index: 99; text-align: right; overflow: hidden; display: none; } .footer > img { width: 1920px; max-width: 85%; float: right; padding: 8px; } .popup { z-index: 99999; position: absolute; bottom: 0; right: 0; opacity: 0; width: 100%; bottom: -440px; transition: 150ms; text-align: right; } .popup.active{ opacity: 1; bottom: -75px; } #page_108 .popup.active { bottom: 0; } #page_208 .popup.active{ bottom: 0; } #page_2008 .popup.active{ bottom: 0; } #page_3008 .popup.active{ bottom: 0; } #page_5008 .popup.active{ bottom: 0; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #000; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #000; } /*@media (min-width: 1024px){ .form-container { left: 0; max-width: 23.5vw; height: 100%; width: 100%; } }*/ .form-container {/* background-color: #fffef7; */position: relative;top: 0;z-index: 2;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: top;top: 0;left: 0vw;width: 24.5vw;height: 35.3vw;width: 26%;height: 84vh;background: white;height: 41vw;} .form-container:after{ content: 'x'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 94%; height: 95%; font-size: 0; } .logo { top: 10px; /* max-width: 119px; */ /* background-color: #fff; */ padding: 22px 6px 70px; margin: 0 auto; text-align: center; position: relative; max-width: 35%; width: 100%; margin: 0 auto; } .formtitle { margin: 0 auto 5%; position: relative; display: block; text-align: center; width: 78%; } #formTop h2{color: #000000;text-align: center;font-size: 1.2vw;direction: rtl;margin: 0;margin-bottom: 7.5%;/* background: red; */width: 100%;margin: 0 auto;padding-bottom: 0;margin: 0 auto;margin-bottom: 0.8vw;font-size: 1.4vw;border-radius: 20px;width: 20.5vw;line-height: 1;font-size: 170%;font-weight: 500;} .form-container.fix{ position: absolute; top: 2852px; } .form-container form { position: relative; position: relative; top: 0; margin-top: 10%; } .call { text-align: center; margin: 0vw auto; display: flex; flex-direction: column; align-items: center; /*display: none;*/ line-height: .5; position: absolute; left: 10.5vw; top: 33vw; /* display: none; */ z-index: 2; left: 0; position: relative; top: 0; display: none; } .mae { text-align: center; /* position: absolute; */ /* width: 100%; */ /* bottom: 115px; */ margin-top: 10px; } .mae img { max-width: 258px; } img { max-width: 100%; height: auto; } .call img { max-width: 151px; } .call a { font-size: 43px; text-decoration: none; line-height: 1; position: relative; letter-spacing: -1px; font-size: 2.5vw; font-weight: bold; margin-right: -0.4vw; } .call a sup { position: absolute; left: -25%; top: 25%; font-size: 100%; } .loader { background-color: #162133; height: 100%; left: 0; position: absolute; top: 0; width: 100%; opacity: 0; z-index: -1; display: flex; justify-content: center; align-items: center; } .mandatory { display: none; } .form-container .form-row {/* margin: 0 auto 5%; */width: 75%;margin-left: 17%;margin-bottom: 0;margin: 0 auto;} .form-container .form-row input, .form-container .form-row select { width: 100%; position: relative; display: block; border: none; background-color: white; font-size: 1.5em; padding: 8px; margin-bottom: 5%; color: #fff; } .form-container .form-row input, .form-container .form-row select {margin-bottom: .15vw;width: 100%;position: relative;display: block;border: none;background-color: #ffffff;font-size: 14pt;margin-bottom: .5vw;margin-bottom: .5vw;color: #000;text-indent: 0;font-size: 100%;padding: 0.5vw 0;margin-bottom: 0.75vw;border-bottom: 1px #000000 solid;color: #000000;} @media (max-height: 900px) and (min-width: 1550px){ .form-container .form-row input, .form-container .form-row select { font-size: 1.2em; margin-bottom: 0; } .form-container .form-row input, .form-container .form-row select { font-size: 1.2em; margin-bottom: 0; } } .rtl { text-align: right; direction: rtl; } .cb-container input:checked ~ .fake-cb { background-color: #8b0204 !important; } .cb-container span.fake-cb { width: 15px; height: 15px; border: 2px solid white; -ms-flex-negative: 0; flex-shrink: 0; margin: 1% 0 0 4%; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .form-container .form-row select { text-align: right; direction: rtl; } .form-container .form-row input, .form-container .form-row select { direction: rtl; } .form-container .form-row input[type=submit], .form-container .form-row select[type=submit] { background-color: #007edb; background-image: url(../images/send.png); background-position: center center; text-indent: -10000px; background-repeat: no-repeat; margin-left: 3px; width: 105%; margin-top: -3px; } .cb-container { display: block; flex-direction: row; direction: rtl; margin-bottom: 11%; margin-top: 3%; line-height: 1; width: 100%; position: relative; } #allowmailing{ background: red; position: absolute; right: 0; top: 5px; z-index: 9; } a { color: #ffffff; } @media (min-width: 1024px){ .square { width: 1.2vw; display: inline-flex; justify-content: center; height: 1.2vw; font-size: 85%; align-items: center; padding: 0 !important; } .form-container .form-row input[type=submit], .form-container .form-row select[type=submit] { cursor: pointer; } } .container-model { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; padding-right: 80px; display: none; } #page_108 .container-model{ top: 28%; } #page_208 .container-model{ top: 30%; } #page_2008 .container-model{ top: 25%; } #page_3008 .container-model{ top: 28%; width: 65%; } #page_5008 .container-model{ top: 26%; } #page_c1 .container-model {top: 28%;;} #page_c3 .container-model {top: 28%;;} #page_c3air .container-model {top: 28%;;} #page_c4 .container-model {top: 28%;;} #page_cactus .container-model {top: 28%;} #page_mgzs .container-model {top: 22%;} .container-text { position: absolute; top: 78%; left: 0; width: 100%; margin: 0 auto; text-align: center; right: 0; } .container-text ._text{ position: absolute; right: 1%; margin-top: -2%; } .container-text ._icons{ position: absolute; right: 1%; margin-top: 5%; } .arrow-left { width: 2vw; transition: .3s all; position: absolute; left: -12%; top: 0; } .arrow-right { width: 2vw; transition: .3s all; position: absolute; right: -12%; top: 0; } .arrow-left:hover, .arrow-right:hover{ transform: scale(1.05); } label.error { direction: rtl !important; color: white !important; width: 100%; display: block; position: relative; right: -16px; } #full_name-error, #phone-error, #agency-error, #model-error { /* display: none !important; */ text-align: right; right: 0; direction: rtl; float: right; font-size: .8vw; padding: .3vw 0; } input.error{ background-color: pink !important; margin-bottom: 0 !important; } @media(max-width: 1024px){ .square{ display: inline-block; text-indent: 0; padding: 0 5px; } .small-letters .one_mobile{ text-align: center; display: block; margin: 0; padding: 0; font-size: 3.2vw; /* padding: 0 5vw; */ margin-bottom: 1vw; } .small-letters br{ display: none; } ._footer { position: relative; margin-top: 0vh; top: 7vw; padding-bottom: 25vw; } .fouronfour{ position: absolute; top: 115vw; left: 0; margin: 0 auto; text-align: center; width: 16vw; display: none; } .owl-carousel .owl-item .fouronfour img{ width: auto; max-width: 100%; } #full_name-error, #phone-error, #agency-error, #model-error{ /* display: none !important; */ text-align: right; right: 0; direction: rtl; float: right; font-size: 3vw; padding: 1vw 0; } } select.error{ background-color: pink !important; margin-bottom: 0 !important; } ._thanks #formTop h2, ._thanks .form-container .form-row{ opacity: 0; visibility: hidden; } .thanks { position: absolute; transition: .3s all; background-position: center; height: 100%; /*display: none;*/ color: #fff; direction: rtl; text-align: center; top: 6vw; top: 0; left: 0; right: 0; font-size: 3vw; opacity: 0; visibility: hidden; color: #fff; height: auto; padding: 0; width: 90%; margin: 0 auto; top: 35%; } ._thanks .thanks{ opacity: 1; visibility: visible; } ._thanks .call{ display: none; } .inner-form{visibility: visible;opacity: 1;transition: .3s all;position: relative;z-index: 1;background: #fff;/* width: 85%; *//* margin: 0 auto; *//* margin-top: 25vw; */} ._thanks .inner-form{ /* opacity: 0; */ /* visibility: hidden; */ } .thanks h2{ font-weight: normal; font-size: 4.5vw; margin: 0; padding: 0; } .thanks p { margin: 0; padding: 0; font-size: 1.8vw; white-space: inherit; line-height: 1.2; font-size: 2vw; padding: 0; font-weight: lighter; } .feedback { text-align: center; margin-top: 55%; display: none; } ._thanks .feedback { display: block; position: absolute; z-index: 2; left: 0; right: 0; font-size: 150%; direction: rtl; } ._thanks .feedback h2 { font-size: 300%; margin: 0 auto; } ._thanks .feedback p{ margin: 0 auto; font-size: 100%; } /*.thanks.active{ visibility: inherit; opacity: 1; } */ #thanks_1 { width: 34%; height: 25%; position: absolute; left: 15%; top: 41%; /* BACKGROUND: RED; */ } #thanks_2 { width: 33%; height: 25%; position: absolute; left: 51%; top: 41%; /* BACKGROUND: RED; */ } #thanks_3 { width: 33%; height: 25%; position: absolute; left: 51%; top: 71%; /* BACKGROUND: RED; */ } #thanks_4 { width: 33%; height: 25%; position: absolute; left: 15%; top: 71%; /* BACKGROUND: RED; */ } .thanks[data-thanks="108"] #thanks_3, .thanks[data-thanks="c1"] #thanks_3, .thanks[data-thanks="c3"] #thanks_3, .thanks[data-thanks="c3air"] #thanks_3, .thanks[data-thanks="c4"] #thanks_3, .thanks[data-thanks="cactus"] #thanks_3, .thanks[data-thanks="mgzs"] #thanks_3 { left: 35%; } .thanks[data-thanks="108"] #thanks_4, .thanks[data-thanks="c1"] #thanks_4, .thanks[data-thanks="c3"] #thanks_4, .thanks[data-thanks="c3air"] #thanks_4, .thanks[data-thanks="c4"] #thanks_4, .thanks[data-thanks="cactus"] #thanks_4, .thanks[data-thanks="mgzs"] #thanks_4 { display: none; } #close_thanks { position: absolute; left: 1%; top: 2%; /* width: 3%; */ /* height: 5%; */ } .mandatory{display:none}.form-row input[type=checkbox]{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;width:15px;}.cb-container span{width:auto;height:auto;border:none;margin:0;-ms-flex-preferred-size:unset;flex-basis:unset;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size: 11pt;}.cb-container span.fake-cb{width:15px;height:15px;border: 2px solid #f3eded;-ms-flex-negative:0;flex-shrink:0;margin:1% 0 0 4%;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;}.cb-container label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin:0;-ms-flex-preferred-size:unset;flex-basis:unset;color: #fff;}.cb-container input:checked~.fake-cb{background-color:#8b0204;-webkit-transition:300ms;transition:300ms} ._side_menu { width: 300px; height: 100vh; position: fixed; right: 0; top: 0; z-index: 980; overflow-y: scroll; right: -100%; transition: 1s all; direction: ltr; background: #fff; } ._side_menu ul { list-style-type: none; margin: 0 auto; text-align: center; display: block; margin-top: 25%; padding: 0; } ._side_menu ul li { border-bottom: 2px #48d2df solid; width: 90%; margin: 0 auto; margin-bottom: 10%; padding-bottom: 5%; } ._side_menu ._list img{ /*height: 1080px;*/ } ._side_menu.active{ right: 0; } ._side_menu_hamburger { position: fixed; right: 2%; top: 3%; z-index: 978; } ._side_menu_hamburger img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } ._side_menu ._side_menu_hamburger { position: absolute; right: 10%; top: 2%; } ._side_menu::-webkit-scrollbar { width: 1em; } ._side_menu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ._side_menu::-webkit-scrollbar-thumb { background-color: #47d3df; outline: 1px solid slategrey; } .overlay { background: rgba(0, 0, 0, 0.5294117647058824); position: fixed; z-index: 979; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; /* display: none; */ transition: .3s all; opacity: 0; visibility: hidden; } .overlay.active{ /* display: block; */ opacity: 1; visibility: visible; } @media(max-width: 1440px) and (max-height: 900px ){ .fouronfour { } #formTop h2{ /* font-size: 17pt; */ } .cb-container span { font-size: 8pt; } .call { /* top: 71.5%; */ } .samelet { /* top: 33.5vw; */ } .call a { /* font-size: 30px; */ } .inner .container-models { width: 140%; transform: scale(.7); left: -18%; } .call { margin: 1vw auto; } .formtitle { margin: 1.5vw auto 1.5vw; width: 45%; } select.form-control { width: 106.5% !important; } #page_108 .container-model {width: 60%;} #page_208 .container-model {width: 60%;} #page_2008 .container-model {width: 60%;} #page_3008 .container-model {width: 60%;} #page_5008 .container-model {width: 60%;} #page_c1 .container-model {width: 60%;} #page_c3 .container-model {width: 60%;} #page_c3air .container-model {width: 60%;} #page_c4 .container-model {width: 60%;} #page_cactus .container-model {width: 60%;} #page_mgzs .container-model {width: 60%;top:26%;} .container-model img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } .step_pic ._bg { height: 100vh; } } @media(max-width: 1366px) and (max-height: 768px ){ body#page_main { overflow-y: inherit; } ._video { /* background-size: cover; */ } ._footer { /* bottom: 0; */ /* padding-bottom: 20%; */ } .fouronfour { } .small-letters { font-size: .9vw; } .polution { /*top: 46.5vw;*/ } .mouseover { width: 1250px; } .owl-prev { right: 68%; } /* .areas { margin-bottom: 5% !important; font-size: 1.5em; }*/ .scroll { bottom: 5px; } #formTop h2{ /* font-size: 16pt; */ } .cb-container span { font-size: 8pt; } .call { /* top: 79.5%; */ } .samelet { /* top: 85.5%; */ /* top: 32.5vw; */ } #page_108 .container-model {width: 50%;} #page_208 .container-model {width: 50%;} #page_2008 .container-model {width: 50%;} #page_3008 .container-model {width: 50%;} #page_5008 .container-model {width: 50%;} .container-model img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } .step_pic ._bg { height: 100vh; } select.form-control { width: 106.5% !important; } .formtitle { margin: 1.5vw auto 1.5vw; width: 45%; } .form-container .form-row input, .form-container .form-row select { font-size: 1em; } .mae { bottom: 75px; } .call a { /* font-size: 35px; */ } .call img { max-width: 130px; } .call { /* margin: 1.5vw auto; */ } .container-text { top: 76%; } .areas { margin-bottom: 15px; } .call a { /* font-size: 25px; */ } .call img { max-width: 93px; } .mae { margin-top: 5px; } } .mobile_hide{ display: block; } .desktop_hide{ display: none; } #page_108 .call, #page_208 .call, #page_2008 .call, #page_3008 .call, #page_5008 .call{ margin-top: 45px; } #page_108 .mae, #page_208 .mae, #page_2008 .mae, #page_3008 .mae, #page_5008 .mae{ margin-top: 60px; } @media(min-width: 1025px){ label#privacy-error { position: absolute; right: 0; width: 100%; display: block; top: 17px; right: 48%; color: red !important; } select.form-control { width: 104.5% !important; } label[for='privacy']{ position: relative; } .container-buttons{ display: none; } /* #page_208{ background-position: 24% top; }*/ } @media(max-width: 1680px) and (max-height: 1050px ){ ._video { width: 100%; /* background-position: bottom; */ /* height: 49.18vw; */ background-size: cover; } ._text2 { top: 44vw; width: 43vw; } .fouronfour { } /* #page_208{ background-position: 24% top; }*/ /* .popup { right: 0; width: 75%; bottom: -150px; } .popup.active { opacity: 1; bottom: 0; }*/ .mouseover { /* width: 1250px; */ /*bottom: -39vw;*/ } .owl-prev { right: 68%; } .inner .container-title { max-width: 85%; } .container-text ._text{ right: 1%; margin-top: -2%; width: 15%; text-align: right; } .container-text ._icons{ width: 60%; } .container_mobileCarousel { top: 64%; } .inner .container-img { right: 3%; } .inner .container-models { width: 140%; transform: scale(.85); left: -18%; } .inner { max-width: 80%; } .inner .container-models { bottom: 19%; } /* #main_carousel #bg1._bg { position: relative; right: -2%; width: 77.5%; float: right; background-size: contain; top: 5%; }*/ #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { /* background-color: #fff; */ /* position: relative; */ /* float: right; */ /* right: -9vw; */ /* background-size: contain; */ /* width: 78%; */ background-size: cover; height: 42vw; width: 80vw; right: 0; position: absolute; left: 0; left: 20vw; } } @media(max-width: 1440px) and (max-height: 900px ){ /* .popup { right: 0; width: 75%; bottom: -150px; }*/ ._text2 { top: 43vw; } .mouseover { /* width: 1068px; */ /*bottom: -39vw;*/ } .owl-prev { right: 66.5%; } .container { min-height: 750px; } #page_main .inner .container-title { top: 3%; right: 11%; width: 74%; } .container_mobileCarousel { top: 52%; right: -3%; } .inner .container-img { right: 1%; top: 21%; } .inner .container-models { width: 140%; transform: scale(.7); left: -18%; } .popup.active { opacity: 1; bottom: 0; } .inner .container-models { bottom: 29%; } .logo { max-width: 70%; padding: 4px 6px 1px; } .inner { max-width: 80%; } .inner .container-models ul li { margin: 10px 30px; } .inner .container-title img { max-width: 100%; } #page_main .inner .container-title img { max-width: 60%; } .inner .container-title { max-width: 50%; } #page_108 .mae, #page_208 .mae, #page_2008 .mae, #page_3008 .mae, #page_5008 .mae { margin-top: 25px; } .logo { max-width: 40%; } /* #main_carousel #bg1._bg { position: relative; right: -2%; width: 77.5%; float: right; background-size: contain; top: 5%; }*/ #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { /* background-color: #fff; */ /* position: relative; */ /* float: right; */ /* right: -7vw; */ /* background-size: contain; */ /* width: 77.5%; */ } } @media(max-width: 1366px) and (max-height: 768px ){ /* .popup { right: 0; width: 75%; bottom: -150px; } */ ._video { } ._text2 { top: 37vw; width: 31vw; right: 16vw; } .mouseover { /* width: 1013px; */ /*bottom: -40vw;*/ } #page_108 .call, #page_208 .call, #page_2008 .call, #page_3008 .call, #page_5008 .call { margin-top: 20px; } #page_108 .mae, #page_208 .mae, #page_2008 .mae, #page_3008 .mae, #page_5008 .mae { margin-top: 20px; } .inner .container-title { max-width: 50%; } .container { min-height: 720px; } #page_main .inner .container-title { top: 3%; right: 11%; width: 74%; } .container_mobileCarousel { top: 40%; right: -3%; } .inner .container-img { right: 17%; top: 20%; width: 46%; } .inner .container-models { width: 140%; transform: scale(.7); left: -18%; } .inner .container-models { width: 140%; transform: scale(.65); left: -18%; } #page_108 .mae, #page_208 .mae, #page_2008 .mae, #page_3008 .mae, #page_5008 .mae{ margin-top: 30px; } .popup.active { opacity: 1; bottom: 0; } .inner .container-models { /*bottom: 40%;*/ bottom: 38%; } .logo { max-width: 40%; padding: 4px 6px 1px; } select.form-control { width: 106.5% !important; } .cb-container { font-size: 8pt; } .inner { max-width: 80%; } .inner .container-models ul li { margin: 5px 30px; } .inner .container-title img { max-width: 100%; } #page_main .inner .container-title img { max-width: 60%; } .call { /* margin: 0 auto; */ } /* #main_carousel #bg1._bg { position: relative; right: -2%; width: 77.5%; float: right; background-size: cover; top: 0%; }*/ #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { /* background-color: #fff; */ /* position: relative; */ /* float: right; */ /* right: -20vw; */ /* background-size: cover; */ /* width: 75.5%; */ } } @media(max-width: 1280px) and (max-height: 1024px ){ ._video { } ._text2 { top: 45vw; } .fouronfour { } #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { right: -20vw; /* width: 78%; */ } .mouseover { /* width: 950px; */ /*bottom: -50vw;*/ } .owl-prev { right: 66.5%; } #page_mgzs .container-model {top: 30%; width: 75%; padding-right: 0;} .areas { font-size: 1.5em; } #formTop h2{ /* font-size: 15pt; */ } .cb-container span { font-size: 8pt; } .call { /* top: 65.5%; */ } .samelet { /* top: 71.5%; */ } /* .arrow-left { top: 59%; } .arrow-right { top: 59%; }*/ #page_main .inner .container-title { top: 3%; right: 17%; width: 61%; } .container_mobileCarousel { top: 53%; right: -3%; } .inner .container-img { right: 1%; top: 22%; width: 70%; } .inner .container-models { width: 140%; transform: scale(.7); left: -18%; } #page_108 .container-model {width: 52%;top:29%;} #page_208 .container-model {width: 55%;top:29%;} #page_2008 .container-model {width: 55%;top:29%;} #page_3008 .container-model {width: 55%;top:29%;} #page_5008 .container-model {width: 55%;top:29%;} .container-model img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } .formtitle { margin: 2.5vw auto 1.5vw; } .logo { max-width: 40%; padding: 4px 6px 1px; } select.form-control { width: 106.5% !important; } .arrow-right { right: -6%; } .arrow-left { left: -6%; } .container { background-color: #fff; } .inner .container-models ul li { margin: 5px 15px; } /* .mae { bottom: 225px; } */ /* .popup { right: 0; width: 75%; bottom: -150px; } */ body#page_main .container { background-color: #fff; } .popup.active { opacity: 1; bottom: 0; } .step_pic ._bg { height: 75vh; } } @media(max-width: 1280px) and (max-height: 800px ){ ._video { } ._text2 { top: 42.5vw; } .fouronfour { } .mouseover { /* width: 950px; */ /* bottom: -29vw; */ } .owl-prev { right: 67.5%; } .areas { font-size: 1.5em; } #formTop h2{ /* font-size: 15pt; */ } .cb-container span { font-size: 8pt; } .call { /* top: 79.5%; */ } .samelet { /* top: 85.5%; */ } #page_mgzs .container-model {top: 27%; width: 60%; padding-right: 0;} #page_main .inner .container-title { top: 2%; right: 10%; width: 79%; } /* #main_carousel #bg1._bg { position: relative; right: -3%; width: 78.5%; float: right; background-size: contain; top: 0%; } */ #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { /* background-color: #fff; */ /* position: relative; */ /* float: right; */ /* background-size: contain; */ /* right: -5vw; */ } .container_mobileCarousel { top: 43%; right: -3%; } .inner .container-img { right: 11%; top: 19%; width: 60%; } } @media(max-width: 1280px) and (max-height: 800px ){ .container-text { top: 75%; } .areas { margin-bottom: 15px; } .call a { /* font-size: 30px; */ } } @media(max-width: 1024px){ body { background-color: #fff; } .lead { top: 4vw; right: 0; left: auto; right: auto; left: 1vw; width: 2vw; display: none; } ._text { left: 0; right: 0; top: 90vw; max-width: 100vw; margin: 0 auto; } ._title {right: 0;width: 85vw;/* top: 5vw;*/top: 18vw;left: 0;right: 0;text-align: center;margin: 0 auto;width: 100%;font-size: 100%;} .owl-carousel .owl-item ._title img{ max-width: 100%; width: 100%; } .small-letters { font-size: 3.5vw; top: 0; width: 94%; margin: 0 auto; left: 0; right: 0; text-align: justify; margin-top: 0vw; width: 92%; font-weight: 100; font-size: 3.2vw; position: relative; right: ; text-align: justify; } .polution { top: 0; font-size: 2.5vw; width: 94%; margin: 0 auto; left: 0; right: 0; margin-top: 2vw; width: 100%; padding-top: 0vw; text-indent: 0; margin: 0 auto; width: 90%; } .container-text ._icons{ display: none; } #main_carousel #bg1._bg, #main_carousel #bg2._bg, #main_carousel #bg3._bg, #main_carousel #bg4._bg, #main_carousel #bg5._bg, #main_carousel #bg6._bg, #main_carousel #bg7._bg { background-size: cover; width: 100%; right: 0; left: 0; height: 136vw; } #main_carousel .item { width: 100%; height: 215vw; /*height: 185vw;*/ height: 121vw; } #formTop h2{ display: none; } .owl-prev { width: 8vw; left: 4vw; top: 25vw; } .owl-next { width: 8vw; right: 4vw; top: 25vw; } .mobile_hide{ display: none; } .desktop_hide{ display: block; } .credit { left: 1.5vw; top: 95vw; width: 3vw; } body#page_main .container-img { top: 0; z-index: 999; display: block; right: 0; left: 15vw; position: absolute; margin: 0 auto; top: 44vw; width: 99vw; } ._video { width: 100%; right: 0; } ._video a img { width: 50vw; margin-top: 15vw; } /* ._video { background-image: url('../images/main/mobile/bg1.jpg'); }*/ #main_carousel{ /* background-image: url('../images/main/mobile/bg.jpg'); */ height: 140vw; background-repeat: no-repeat; background-position: center top; background-size: cover; /* background-color: #0c0c14; */ height: 128vw; margin-bottom: 1vw; width: 100%; } ._video { /* background-color: transparent; */ /* top: -1vw; */ /* height: 121vw; */ /* background-position: 0; */ } ._side_menu_hamburger{ width: 11vw; right: 4vw; top: 6vw; } .container-img{ display: none; } ._text { left: auto; right: 8vw; top: 96vw; max-width: 100vw; margin: 0 auto; width: 24vw; } ._text1 img{} ._text2{ right: 7vw; top: 56vw; width: 40vw; } ._text2 img{} ._model{ right: 0; top: 71vw; width: 100vw; } ._model img{} ._text3{ right: 43vw; top: 112vw; width: 42vw; } ._text3 img{} .container_mobileCarousel .owl-item img { width: auto; height: 7vw; padding: 0 2vw; max-width: 75%; margin-top: 4.5vw; } .container_mobileCarousel { width: 90vw; top: 133vw; right: 0vw; } /* .owl-carousel .owl-item img { width: 15vw; height: 21vw; }*/ input.error{ /*margin-bottom: 5vw !important;*/ } select.error{ /*margin-bottom: 5vw !important;*/ } .container-text ._text{ display: none; } .form-row select.form-control { width: 105.5% !important; } .no_phone.mae{ bottom: -10vw; } .cb-container { font-size: 3.5vw !important; } .container-text { /*top: 3vw !important;*/ top: 8vw !important; width: 88vw; left: 0; right: 0; } .footer { height: auto; position: relative; margin-bottom: 35vw; } .footer > img { width: 1920px; max-width: 100%; float: none; padding: 0; margin: 0 auto; } body { overflow: inherit; } .container { background-position: center top; background-size: cover; height: 400vw; } .popup { display: none; } .arrow-left { width: 5vw; right: 90vw; top: 98vw; } .arrow-right { width: 5vw; right: 6vw; top: 98vw; } .form-container { position: relative; top: 0; z-index: 22; /* background: none; */ left: 0; right: 0; padding-bottom: 20vw; } .logo{ display: none; } .form-container .form-row { position: relative; width: 100%; margin-bottom: 3vw; } .form-container .form-row input, .form-container .form-row select { font-size: 4vw; padding: 1.5vw 0; margin-bottom: 1.5vw; background: #ffffff; } .form-container .form-row input[type=submit], .form-container .form-row select[type=submit] { margin-top: 7vw; } .call { margin: 0 auto; } .mae { bottom: -10vw; } .formtitle { margin: 3.5vw auto 6.5vw; width: 75vw; } .form-container .form-row input[type=submit], .form-container .form-row select[type=submit] { text-indent: 0; } .cb-container { margin-top: 3vw; } .thanks { top: 125vw; background-size: contain; position: absolute; height: 195vw; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; position: absolute; width: 90%; margin: 0 auto; /* height: 115vw; */ position: absolute; width: 100%; padding-top: 0vw; /* background-color: #332e32; */ height: auto; /* background-color: #332e32; */ } .thanks h2{ font-size: 20vw; } .thanks p { font-size: 7vw; white-space: inherit; padding: 0 10vw; } .form-container.active{ display: none; } #thanks_1 { width: 100%; right: 0; left: 0; top: 36vw; height: 30vw; } #thanks_2 { width: 100%; right: 0; left: 0; top: 78vw; height: 30vw; } #thanks_3 { width: 100%; right: 0; left: 0; top: 111vw; height: 30vw; } #thanks_4 { width: 100%; left: 0; right: 0; height: 30vw; top: 144vw; } .thanks[data-thanks="108"] #thanks_1, .thanks[data-thanks="c1"] #thanks_1, .thanks[data-thanks="c3"] #thanks_1, .thanks[data-thanks="c3air"] #thanks_1, .thanks[data-thanks="c4"] #thanks_1, .thanks[data-thanks="cactus"] #thanks_1, .thanks[data-thanks="mgzs"] #thanks_1 { top: 48vw; height: 37vw; left: 0; } .thanks[data-thanks="108"] #thanks_2, .thanks[data-thanks="c1"] #thanks_2, .thanks[data-thanks="c3"] #thanks_2, .thanks[data-thanks="c3air"] #thanks_2, .thanks[data-thanks="c4"] #thanks_2, .thanks[data-thanks="cactus"] #thanks_2, .thanks[data-thanks="mgzs"] #thanks_2 { top: 90vw; height: 37vw; left: 0; } .thanks[data-thanks="108"] #thanks_3, .thanks[data-thanks="c1"] #thanks_3, .thanks[data-thanks="c3"] #thanks_3, .thanks[data-thanks="c3air"] #thanks_3, .thanks[data-thanks="c4"] #thanks_3, .thanks[data-thanks="cactus"] #thanks_3, .thanks[data-thanks="mgzs"] #thanks_3 { top: 131vw; height: 37vw; left: 0; } label#privacy-error { float: none; display: block !important; width: 100%; /* background: red; */ float: left; flex-direction: column; position: absolute; right: 8vw; top: 8vw; color: red !important; } label.error { color: white !important; } label[for='privacy']{ position: relative; } #close_thanks{ display: none !important; } .btn1 {display: block;width: 45vw;position: relative;right: 0;float: none;top: 0;background: #ffffff;text-align: center;top: 0;text-decoration: none;/* right: 4vw; */font-size: 5vw;padding: 3.5vw 0;direction: rtl;color: #fff;background-size: cover;background-repeat: no-repeat;border-radius: 7px;background-image: url('../images/main/btn2.png');color: transparent;background-position: center;} .btn2 { display: block; width: 45vw; float: right; position: relative; right: 0; float: none; top: 0; /* background: #920b24; */ text-align: center; top: 0; text-decoration: none; /* right: 51vw; */ font-size: 5vw; padding: 3.5vw 0; direction: rtl; background-image: url('../images/main/btn1.png'); color: transparent; background-size: contain; background-repeat: no-repeat; border-radius: 7px; background-position: center; } .btn3 { display: block; width: 35vw; float: right; position: absolute; right: 0; float: none; top: 0; text-align: center; top: 114vw; text-decoration: none; right: 77vw; font-size: 5vw; padding: 1vw 0; direction: rtl; background-image: url(../images/main/btn3.png); color: transparent; background-size: contain; background-repeat: no-repeat; border-radius: 7px; background-position: center; width: 11vw; height: 11vw; display: none; } .btn4 { display: block; width: 35vw; float: right; position: absolute; right: 0; float: none; top: 0; text-align: center; top: 114vw; text-decoration: none; right: 88vw; font-size: 5vw; padding: 1vw 0; direction: rtl; background-image: url(../images/main/btn4.png); color: transparent; background-size: contain; background-repeat: no-repeat; border-radius: 7px; background-position: center; width: 11vw; height: 11vw; display: none; } .container-buttons { width: 100%; margin: 0 auto; background: #162133; margin-top: 0; padding: 1vw 0; overflow: hidden; z-index: 9999 !important; } #page_main .container-buttons{ top: -24vw; background: transparent; position: relative; } .is-sticky .container-buttons { top: auto !important; bottom: 0 !important; padding-top: 3vw !important; background: #172234 !important; } .container-buttons-inner{ width: 95%; margin: 0 auto; } .container-buttons.no_phone{ text-align: center; } .container-buttons.no_phone .btn1{ display: none; } .container-buttons.no_phone .btn2{ /*width: 100%;*/ float: none; margin:0 auto; } body#page_main .mobilelogo { text-align: center; width: 100%; background: transparent; padding-top: 0; padding-bottom: 10vw; position: absolute; z-index: 1; top: 4vw; } body#page_main .mobilelogo img{ width: 50vw; margin-top: -1vw; } body#page_main .container{ position: relative; min-height: 1px; min-height: 160vw; background-color: #ffffff; } body#page_main .inner{ max-width: 100%; width: 100%; overflow: hidden; } body#page_main .inner .container-title img { width: 75vw; max-width: 1000px; height: auto; } body#page_main .inner .container-title { padding-right: 0; top: -10vw; top: 0; top: 24vw; left: 0; right: 0; margin: 0 auto; text-align: center; width: 100%; } body#page_main .inner .container-models { bottom: auto; top: 55vw; /*width: 176vw;*/ width: 100vw; transform: scale(1); /*left: -38vw;*/ left: auto; right: auto; z-index: 25; overflow-x: hidden; } .mobilelogo { text-align: center; width: 100%; background: transparent; padding-top: 0; padding-bottom: 10vw; position: absolute; z-index: 1; top: 4vw; width: 20vw; left: 0; right: 0; margin: 0 auto; } .mobilelogo img{ width: 50vw; } .container{ position: relative; min-height: 1px; height: 70vw; /*height: 120vw;*/ height: 150vw; background-size: cover; background-repeat: no-repeat; margin-bottom: 15vw; margin-top: -1vw; } body#page_main .container{ /*height: 85vw;*/ margin-bottom: 0; } .arrow-left { width: 5vw; left: -4vw; top: 83vw; } .arrow-right { width: 5vw; right: -4vw; top: 83vw; } /* .container-text ._text { display: block; top: 89vw; position: absolute; width: 100vw; left: 0; right: 0; text-align: center; margin: 0 auto; }*/ .container-text ._text { display: block; top: 89vw; position: absolute; width: 100vw; left: -6vw; right: auto; text-align: center; margin: 0 auto; /* background: red; */ } #page_108 .container-model, #page_208 .container-model, #page_2008 .container-model, #page_3008 .container-model, #page_5008 .container-model { width: 75vw; padding: 0; top: 45vw; } #page_108 .container-model{ top: 48vw; } #page_208 .container-model{ top: 48vw; } #page_2008 .container-model{ top: 46vw; } #page_3008 .container-model{ top: 51vw; } #page_5008 .container-model{ top: 45vw; width: 90vw; right: -15vw; } #page_c1 .container-model {top: 45vw; width: 75vw; padding-right: 0;} #page_c3 .container-model {top: 45vw; width: 90vw; padding-right: 0;} #page_c3air .container-model {top: 45vw; width: 75vw; padding-right: 0;} #page_c4 .container-model {top: 45vw; width: 75vw; padding-right: 0;} #page_cactus .container-model {top: 45vw; width: 90vw; padding-right: 0;} #page_mgzs .container-model {top: 45vw; width: 90vw; padding-right: 0;} .container-text ._text{ width: 58vw; left: 14vw; top: 100vw; } .form-container{ top: 85vw; position: absolute; display: none; } .open_form .form-container{ display: block; /* background: #dadbdc; */ margin: 0 auto; top: 25vw; height: 85vw; z-index: 9999; width: 89vw; height: 100vh !important; width: 100vw; top: 0; } .open_form .btn1,.open_form .btn2{ display: none; } .open_thanks #formTop{ opacity: 0; visibility: hidden; /*transition: 1s all;*/ } .open_thanks .thanks{ display: block; background: none; text-align: center; direction: rtl; z-index: 0; /*transition: .5s all;*/ } .open_thanks .thanks h2{ padding: 0; margin: 0; font-size: 20vw; font-weight: bold; margin-top: 25vw; } .open_thanks .thanks p{ margin: 0; padding: 0; font-size: 7vw; line-height: 0; } .inner{ max-width: 100%; width: 100%; } .inner .container-title img { /*width: 75vw;*/ width: 65vw; max-width: 1000px; } .inner .container-title { padding-right: 0; /*top: -10vw;*/ top: 25vw; width: 100%; left: 0; right: 0; max-width: 100%; } .inner .container-models { bottom: auto; top: 50vw; width: 165vw; transform: scale(.63); left: -35vw; right: auto; z-index: 25; overflow-x:hidden; } #page_c3air .container-text ._text { top: 88vw; width: 78vw; left: 6vw; /* background: red; */ } .step_pic { max-width: 100%; padding: 0; margin: 0; /* height: 100vh; */ /*height: 130vw;*/ } .scroll{ display: none; right: 0; left: 0; bottom: 14vw; } .scroll img{ width: 10vw; } .step_pic img { max-width: inherit; height: inherit; width: 100%; height: auto; display: block; margin: 0 auto; } .show{ /*display: block !important;*/ transition: .3s all; opacity: 1 !important; } .hide{ /*display: none !important;*/ transition: .3s all; opacity: 0 !important; } .feedback { margin-top: 20vw; } } @media(max-width: 360px){ .inner .container-models ul li { margin: 5vw 2vw; } .inner .container-models ul li img { max-width: 85%; } } /*.areas { display: block; text-align: center; font-size: 26px; line-height: 1; width: 100%; }*/ .areas { background-color: #9f0c29; background-position: center center; text-indent: 0; background-repeat: no-repeat; margin-left: 3px; width: 105%; margin-top: -7px; color: #fff; text-decoration: none; display: block; width: 10vw; margin: 0 auto; font-size: 2em; color: #fff; text-align: center; padding-bottom: 1%; margin-top: 0.75vw; border: 0; direction: rtl; margin-bottom: 7%; font-size: 1.4vw; padding: 12px 0; line-height: 1.6; padding: 0.5vw 0; cursor: pointer; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008ed2+0,006daf+49,004f92+98,153b83+100&1+0,1+98,0.02+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 */ border-radius: 50px; width: 100%; font-weight: bold; } ._areas_img { background-image: url(../images/areas/d.jpg); position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; z-index: 9999; display: none; } .close_areas { background: red; width: 100px; height: 100px; position: absolute; left: 0; top: 0; height: 100px; opacity: 0; } @media(max-width: 1024px){ ._side_menu { z-index: 9999999; } ._areas_img { background-image: url(../images/areas/m.jpg); position: absolute; width: 100%; height: 1513vw; left: 0; right: 0; top: 0; bottom: 0; background-size: contain; z-index: 99; display: none; overflow: scroll; background-repeat: no-repeat; background-color: #ffffff; z-index: 99999; /* top: 0; */ /* background-position: 0; */ } .areas { margin-bottom: -1vw; padding: 0.5vw 0; font-size: 5vw; margin-top: 0vw; /* background: #0056ff; */ width: 100%; /* background: #d2232a; */ border-radius: 0; /* color: #fff; */ width: 33vw; border-radius: 7px; } .close_areas { right: 0; left: auto; /*top: 149vw;*/ } .samelet { top: 90vw; width: 14vw; } ._logo_fiat { top: 87.5vw; right: 15vw; width: 17vw; } .form-container form { top: 13vw; left: 0; right: 0; max-width: 80%; margin: 0 auto; } .x{ width: 8vw; top: -4vw; position: absolute; right: -1vw; } .form-container .samelet,.form-container ._logo_subaru{ display: none; } .form-container ._logo_subaru{ left: 0; right: 0; width: 17vw; display: block; z-index: 1; display: none; } .form-container .samelet { top: 80vw; width: 10vw; right: 0; left: 0; display: block; } #formTop h2 { display: block; font-size: 4vw; line-height: 1; font-weight: normal; margin-top: 5vw; margin-bottom: 3vw; width: 100%; font-size: 5vw; line-height: 1.7; padding-top: 1vw; line-height: 1; padding-bottom: 1vw; } .owl-carousel .owl-stage-outer{ /*overflow: inherit;*/ } .mouseover { opacity: 1; position: absolute; bottom: auto; top: 35vw; background: #fff; padding: 4vw 0; text-align: center; min-height: 7vw; display: none; top: auto; bottom: 0; padding-top: 10vw; padding-bottom: 25vw; } .show_pol .mouseover{ display: block; padding-top: 10vw; } .pol-container>div.close-polution { display: block; width: 9vw; top: -4vw; left: 0; top: 0; } ._mouse{ display: none !important; } .pol-container>div { width: 100%; display: flex; align-items: flex-end; padding-bottom: 1vw; } /* .mouseover:hover { bottom: auto; padding: 4vw 0; }*/ .owl-carousel .owl-item img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; max-width: 100%; } ._logo_subaru { top: 0; width: 20vw; left: 5vw; right: auto; } .samelet { top: 104vw; width: 10vw; right: auto; left: 1.5vw; display: none; } ._logo_subaru img{ margin: 0; max-width: 100% !important; } } .blockpage { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.6); z-index: 999; } .blockpage.active { visibility: visible; opacity: 1; } .blockpage i { position: absolute; left: 0; right: 0; top: 0; width: 100px; height: 100px; text-align: center; margin: 0 auto; top: 44%; font-size: 73pt; color: #fff; } /* Customize the label (the container) */ .container-checkbox {display: block;position: relative;margin-bottom: 19pt;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;color: #000;font-size: 10pt;text-align: right;padding-left: 0;padding-right: 21pt;margin-top: 9pt;font-size: 60%;} @media(min-width: 1024px){ .x{ display: none; } .samelet { /* display: none; */ } } @media(max-width: 1024px){ .container-checkbox {font-size: 2.5vw;color: #000;line-height: 1.5;margin-bottom: 4vw;} } /* Hide the browser's default checkbox */ .container-checkbox input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark {position: absolute;top: 6px;right: 0;height: 18px;width: 18px;/* background-color: #000; */border: 1px #4e4c4c solid;} @media(max-width: 1024px){ .container-checkbox input ~ .checkmark { transform: scale(.7); top: -1.1vw; } } /* On mouse-over, add a grey background color */ .container-checkbox:hover input ~ .checkmark { background-color: #fff; } /* When the checkbox is checked, add a blue background */ .container-checkbox input:checked ~ .checkmark { background-color: #fff; border: 1px #000 solid; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .container-checkbox input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container-checkbox .checkmark:after { left: 6px; top: 3px; width: 3px; height: 7px; border: solid black; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } ._formbg{ position: absolute; top: 0; left: -0.5vw; width: 25.5vw; z-index: 2; background-position: left top; background-repeat: no-repeat; background-size: cover; height: 51vw; background: #000; border-right: 4px #a72c32 solid; width: 25vw; display: none; } .closex{ display: none; } @media(max-width: 1680px) and (max-height: 1050px ){ ._formbg { height: 49.18vw; } } @media(max-width: 1366px) and (max-height: 768px ){ ._formbg { /* width: 30vw; */ } } @media(max-width: 1280px) and (max-height: 1024px ){ ._formbg { /* height: 51.2vw; */ } } @media(max-width: 1280px) and (max-height: 800px ){ ._formbg { /* height: 49.489vw; */ } } @media(max-width: 1024px){ .form-container form { padding-bottom: 15vw; } .inner-form {width: 85%;margin: 0 auto;margin-top: 10vw;border: 2px #d2232a solid;} .closex{ position: absolute; right: 0; top: 0; line-height: 0; padding: .5vw; z-index: 5; cursor: pointer; display: block; } ._formbg{ display: none; } /* ._logo_subaru{ display: none; }*/ .form-container ._logo_subaru{ display: block; width: 22vw; margin: 7vw auto; position: relative; margin: 0vw auto 25vw; display: none; } .form-container form { top: 0vw; margin-top: 10vw; } .x {width: 8vw;top: 6vw;position: absolute;right: auto;left: 3vw;width: 15vw;} ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #000; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #000; } .form-container .form-row input, .form-container .form-row select{ color: #000; } label.error { right: 0; } .open_form .form-container { height: auto; padding-bottom: 10vw; } .form-container .samelet { top: 0; width: 50vw; margin-top: 15vw; position: relative; display: none; } .thanks h2 { font-size: 18vw; margin-top: 35vw; } .thanks p { font-size: 7vw; white-space: inherit; padding: 0 4vw; } ._thanks #formTop h2 { opacity: 0; visibility: hidden; } ._thanks .form-container .form-row { opacity: 0; visibility: hidden; } .thanks p br{ display: none; } .x { z-index: 5; } } .form-container-2 { /* background-color: #fffef7; */ position: absolute; top: 0; z-index: 2; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: top; top: 4vw; left: 0vw; width: 24.5vw; height: 35.3vw; width: 28vw; } .form-container-2:after{ content: 'x'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 94%; height: 95%; font-size: 0; } .form-container-2.fix{ position: absolute; top: 2852px; } .form-container-2 form { position: relative; position: relative; top: 0; margin-top: 6.5vw; } .form-container-2 .form-row { /* margin: 0 auto 5%; */ width: 87%; margin-left: 17%; margin-bottom: 0; margin: 0 auto; } .form-container-2 .form-row input, .form-container-2 .form-row select { width: 100%; position: relative; display: block; border: none; background-color: white; font-size: 1.5em; padding: 8px; margin-bottom: 5%; color: #fff; } .form-container-2 .form-row input, .form-container-2 .form-row select { margin-bottom: .15vw; width: 100%; position: relative; display: block; border: none; background-color: #000000; font-size: 14pt; margin-bottom: .5vw; margin-bottom: .5vw; color: #000; text-indent: 10px; font-size: 1.3vw; padding: 0.5vw 0; margin-bottom: 0.75vw; border: 1px #f0f0f0 solid; color: #f0f0f0; } @media (max-height: 900px) and (min-width: 1550px){ .form-container-2 .form-row input, .form-container-2 .form-row select { font-size: 1.2em; margin-bottom: 0; } .form-container-2 .form-row input, .form-container-2 .form-row select { font-size: 1.2em; margin-bottom: 0; } } .form-container-2 .form-row select { text-align: right; direction: rtl; } .form-container-2 .form-row input, .form-container-2 .form-row select { direction: rtl; } .form-container-2 .form-row input[type=submit], .form-container-2 .form-row select[type=submit] { background-color: #007edb; background-image: url(../images/send.png); background-position: center center; text-indent: -10000px; background-repeat: no-repeat; margin-left: 3px; width: 105%; margin-top: -3px; } @media (min-width: 1024px){ .form-container-2 .form-row input[type=submit], .form-container-2 .form-row select[type=submit] { cursor: pointer; } } ._thanks .form-container-2 .form-row{ opacity: 0; visibility: hidden; } @media(max-width: 1366px) and (max-height: 768px ){ .form-container-2 .form-row input, .form-container-2 .form-row select { font-size: 1em; } } .form-container-2 { position: relative; top: 0; z-index: 22; /* background: none; */ left: 0; right: 0; padding-bottom: 20vw; } .form-container-2 .form-row { position: relative; width: 100%; margin-bottom: 3vw; } .form-container-2 .form-row input, .form-container-2 .form-row select { font-size: 4vw; padding: 1.5vw 0; margin-bottom: 1.5vw; background: #ffffff; } .form-container-2 .form-row input[type=submit], .form-container-2 .form-row select[type=submit] { margin-top: 7vw; } .form-container-2 .form-row input[type=submit], .form-container-2 .form-row select[type=submit] { text-indent: 0; } .form-container-2.active{ display: none; } .form-container-2{ top: 85vw; position: absolute; display: none; } .open_form2 .form-container-2{ display: block; /* background: #dadbdc; */ margin: 0 auto; top: 25vw; height: 85vw; z-index: 9999; width: 89vw; height: 100vh !important; width: 100vw; top: 0; } .form-container-2 form { top: 13vw; left: 0; right: 0; max-width: 80%; margin: 0 auto; } .form-container-2 .samelet,.form-container-2 ._logo_subaru{ display: none; } .form-container-2 ._logo_subaru{ left: 0; right: 0; width: 17vw; display: block; z-index: 1; display: none; } .form-container-2 .samelet { top: 80vw; width: 10vw; right: 0; left: 0; display: block; } @media(max-width: 1280px) and (max-height: 1024px ){ .form-container-2{ width: 32vw; } } @media(max-width: 1280px) and (max-height: 800px ){ .form-container-2{ width: 32vw; } } .form-container-2 form { padding-bottom: 15vw; } .form-container-2 form { top: 0vw; margin-top: 10vw; } .form-container-2 form { padding-bottom: 15vw; } .form-container-2 .form-row input, .form-container-2 .form-row select{ color: #000; } .open_form .form-container-2 { height: auto; padding-bottom: 10vw; } .form-container-2 .samelet { top: 0; width: 12vw; margin-top: 15vw; position: relative; display: none; } ._thanks .form-container-2 .form-row { opacity: 0; visibility: hidden; } .icons{ width: 13vw; margin: 0 auto; display: block; flex-flow: row-reverse; justify-content: space-between; } .call { align-self: center; margin-bottom: 1vw; } ._thanks .form-container .samelet { display: none; } @media(max-width: 1024px){ ._title img{width: auto !important;width: auto;max-width: 100%;height: auto;margin: auto;} .icons { width: 33vw; display: block; margin-top: 7vw; } .call a { font-size: 8vw; } .form-container .samelet { display: block; margin: 0 auto; margin-top: 4vw; } .form-container form { padding-bottom: 10vw; } .open_form ._thanks .form-container .samelet { display: none; } } .form-buttons{ display: flex; flex-wrap: wrap; justify-content: space-around; width: 1vw; margin: 0 auto; width: 22vw; width: 89%; color: #fff; font-size: 100%; text-align: center; top: 0; position: relative; margin: 2vw auto 2vw; } .form-buttons > div{ width: 25%; } .form-buttons span{ display: block; line-height: 1; font-size: 100%; } .form-buttons img{ max-width: 55%; height: auto; display: block; margin: 0 auto; } .form-row.last-row{margin-bottom: 10%;} .call-container { display: flex; justify-content: space-around; width: 100%; margin: .5vw auto; display: block; margin-top: 1vw; } @media(max-width: 1024px){ .form-buttons { width: 100%; } .call-container { width: 100%; margin-top: 10vw; } .form-buttons span { font-size: 4vw; } .form-buttons img { max-width: 60%; margin-top: 5vw; } } /*@media(max-width:1366px) and (max-height: 1024px) and (min-width: 1024px){ #main_carousel, ._formbg { margin-top: 3%; } ._logo_subaru { top: 9%; } .form-container { top: 13vw; } #main_carousel .samelet{ display: none; } .x{ display: none; } .form-container form { margin-top: 0; } body{ background-color: #000; } ._video { background-color: #000; } }*/ .mainContent{width: 100%;display: flex;flex-direction: row-reverse;position: absolute;width: 100%;left: auto;right: 0;top: 0;bottom: 0;background-repeat: no-repeat;background-position: top right;width: 100%;background-size: 100%;z-index: 1;height: 87vh;height: 41vw;position: relative;} #mySwiper { width: 95%; margin: 0 auto; position: relative; } .swiper-container{ position: absolute; right: 0; left: 0; top: 0; height: 84vh; width: 100%; z-index: 1; pointer-events: none; height: 41vw; } #swiper-slide1{ background-image: url('../images/main/bg1.jpg'); } #swiper-slide2{ background-image: url('../images/main/bg2.jpg'); } #swiper-slide3{ background-image: url('../images/main/bg3.jpg'); } @media(max-width: 1024px){ #swiper-slide1{ background-image: url('../images/main/mobile/bg1.jpg'); } #swiper-slide2{ background-image: url('../images/main/mobile/bg2.jpg'); } #swiper-slide3{ background-image: url('../images/main/mobile/bg3.jpg'); } } .swiper-container .swiper-slide{ background-size: cover; background-repeat: no-repeat; background-position: center top; } #mySwiper h4{ text-align: center; color: #fff; margin: 0; padding: 0; font-size: 135%; font-weight: normal; } ._prices {position: relative;display: flex;justify-content: space-between;width: 100%;margin: 0.5% auto;} ._bottom {position: absolute;width: 100%;left: 0;right: 0;bottom: auto;top: 22vw;} ._prices > div:nth-child(1){width: 20%;width: 23%;} ._prices > div:nth-child(2){width: 20%;width: 20%;} @media(max-width: 1024px){ ._prices { width: 90%; } ._prices > div:nth-child(1){width: 20%;width: 45%;} ._prices > div:nth-child(2){width: 20%;width: 35%;} .samelet-mobile { width: 90%; margin: 0 auto; margin-top: 5vw; } } ._buttons{ display: none; } :root { --swiper-theme-color: #fff; } .swiper-pagination-bullet { opacity: 1; border: 1px #fff solid; } .vote { position: absolute; width: 70vw; right: 9vw; top: 7.3vw; } .vote img { width: 100%; } @media(min-width: 1024px){ #mySwiper{ direction: rtl; } } @media(max-width: 1024px){ .vote { position: absolute; width: 192vw; right: -46vw; top: 19.3vw; } ._title .vote img { width: 100% !important; max-height: none !important; } body#page_main { font-size: 4vw; } .topHeader{ background: #000; height: 16vw; display: flex; } .topHeader > div{ width: 10%; align-self: center; position: relative; left: 2.5%; } .topHeader > div img{ max-width: 100%; height: auto; display: block; margin: 0 auto; } .mainContent{position: relative;/* background-image: url('../images/bg-vote-mob.jpg');*//* height: 178vw;*/height: 125vw;/* background-position: 0;*/background-position: center -8vw;background-size: cover;} ._title h1 { line-height: 1; padding-bottom: 1.5%; margin-top: 1.5%; font-size: 7vw; } ._title h2 {width: 55%;flex-direction: inherit;} ._title h3 { width: 80%; font-size: 185%; padding: 1.5% 0; margin-top: -1.5%; /* border-top: 1px #fff solid; border-bottom: 1px #fff solid; */ } ._title h3 .gift { display: inline-block; color: #fff; background-color: #b41e39; /* padding: 0.5rem 2.5rem 0.5rem 2.5rem;*/ padding: 0.4rem 2.3rem 0.4rem 2.3rem; margin-right: 0rem; margin-top: -2%; font-size: 60%; vertical-align: middle; } ._prices > div { width: 45%; } ._bottom {position: relative;bottom: 0;/* margin-top: 58vw;*/margin-top: 93vw;bottom: auto;top: 0;} #mySwiper { margin-top: 5%; } #mySwiper h4 { font-size: 120%; font-weight: normal; line-height: 1.2; margin-top: 5%; width: 85%; margin: 9% auto 0; } ._buttons{display: block;position: absolute;bottom: 0;z-index: 4;width: 100%;background: red;display: flex;justify-content: space-evenly;background: #fff;padding: 3% 0;position: fixed;z-index: 991;} .swiper-pagination{ width: 100%; margin-top: 2%; } .swiper-pagination-bullet { margin: 3px; } .swiper-container { height: 105vw; } } @media(max-width: 1440px) and (min-width: 1024px){ ._bottom { /* top: 48%; */ } } .click2call{ display: none; } @media(max-width: 1024px){ .open_form ._buttons { display: none; } }