@font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 47%; transform: rotate(45deg); } 50% { top: 47%; transform: none; } 100% { top: 37%; transform: none; } } @keyframes rotate_a2 { 0% { top: 47%; transform: rotate(-45deg); } 50% { top: 47%; transform: none; } 100% { top: 57%; transform: none; } } @keyframes rotate_b1 { 0% { top: 37%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 57%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(-45deg); } } @keyframes pulse { 0% { transform: translate(-50%,-50%) scale(0.5); filter: opacity(0); } 50% { transform: translate(-50%,-50%) scale(1); filter: opacity(0.5); } 100% { transform: translate(-50%,-50%) scale(1.5); filter: opacity(0); } } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 140px 0px 0px 0px; background: #000000; margin: 0px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } h4.texterror { color: #ff0000 } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square; text-align: left } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; text-align: left } img { border: none } b { font-weight: 700 } i { display: block; font-size: 12px; line-height: 18px } a { color: #000000; text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 33.3333%; padding: 10px; text-align: left; vertical-align: top } table tr td:nth-child(2), table tr td:nth-child(3) { width: 16.6666% } input[type=radio], input[type=checkbox] { display: none } input[type=radio] + label, input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 20px 50px; text-align: left } input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #afd2e9; border-radius: 50% } input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #afd2e9; border-radius: 5px } input[type=radio].error + label b, input[type=checkbox].error + label b { border-color: #ff0000 } input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #000000 } input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #000000 } select, textarea, input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px #afd2e9; border-radius: 5px; color: #000000; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: textfield } select.error, textarea.error, input[type=text].error { border-color: #ff0000 } select + label, textarea + label, input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #ffffff; font-size: 14px; line-height: 24px; pointer-events: none; transition: 0.4s ease-in-out } select:focus, textarea:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: #000000; outline: none } select:focus + label, textarea:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 5px 8px 5px 8px; color: #000000; font-size: 12px; line-height: 12px } select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain; -webkit-appearance: none } textarea { height: 320px; overflow: auto; resize: none } input[type=submit] { float: left; width: 100%; height: 80px; padding: 21px; background: #9d96b8; border: none; border-radius: 5px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; cursor: pointer; transition: 0.4s ease-in-out } input[type=submit]:hover { background: #000000 } div.preloader { position: fixed; z-index: 6000; left: 0%; top: 0%; width: 100%; height: 100%; background: #000000 } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; background: url(../images/layout/preloader.svg) no-repeat center; background-size: 50%; content: ''; transform: translate(-50%,-50%) } a.scrolltop { display: block; position: fixed; z-index: 1000; right: 40px; top: calc(100vh - 180px); width: 60px; height: 60px; background: url(../images/layout/up.svg) no-repeat center; background-size: 50%; border-radius: 5px; transition: 0.4s ease-in-out } a.scrolltop.white { background-color: #9d96b8 } a.scrolltop:hover { background-color: #000000 } a.scrollto { display: none } div.switch { display: none } nav { position: fixed; z-index: 4000; left: 50%; top: 0%; transform: translateX(-50%) } nav ul { float: left; padding: 30px; margin: 0px; list-style-type: none } nav ul li { display: block; float: left; margin: 20px } nav ul li a { display: block; position: relative; float: left; padding: 11px 0px 11px 0px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase; transition: 0.4s ease-in-out } nav ul li a:before { display: block; position: absolute; left: 50%; bottom: 0%; width: 0%; height: 2px; background: #ffffff; transform: translateX(-50%); content: ''; transition: 0.4s ease-in-out } nav ul li a:hover:before, nav ul li a.active:before { width: 100% } nav.white ul li a { color: #000000 } nav.white ul li a:before { background: #000000 } div.overlay { display: none; position: fixed; z-index: 3000; left: 0%; top: 0%; width: 100%; height: 100%; background: #000000cc } header { position: fixed; z-index: 2000; left: 0%; top: 0%; width: 100%; padding: 40px; transition: 0.4s ease-in-out } header a.start { display: block; float: left; padding: 5px 0px 5px 0px } header a.start svg { display: block; float: left; width: 250px; height: 50px } header a.start svg ellipse, header a.start svg path { fill: #ffffff; transition: 0.4s ease-in-out } header a.phone { display: block; float: right } header a.phone svg { display: block; float: left; width: 60px; height: 60px; padding: 15px } header a.phone svg path { fill: #ffffff; transition: 0.4s ease-in-out } header a.phone span { display: block; float: left; padding: 18px 0px 18px 0px; color: #ffffff; font-size: 24px; font-weight: 700; transition: 0.4s ease-in-out } header.grayblue { background: #9d96b8 } header.white { background: #ffffff } header.white a.start svg ellipse, header.white a.start svg path, header.white a.phone svg path { fill: #000000 } header.white a.phone span { color: #000000 } section.themes { position: relative; float: left; width: 100%; height: 100vh; max-height: 1280px; overflow: hidden; margin: -140px 0px 0px 0px } section.themes .scrolldown { position: absolute; z-index: 200; left: 0%; bottom: 0%; padding: 40px 40px 120px 40px } section.themes .scrolldown a { display: block; float: left; width: 60px; height: 60px; background: url(../images/layout/scrolldown.svg) no-repeat center; background-size: 50%; border-radius: 5px; transition: 0.4s ease-in-out } section.themes .scrolldown a:hover { background-color: #000000 } section.themes .bx-pager { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 100; left: 0%; width: 100%; padding: 60px 60px 140px 60px; margin: 0px; list-style-type: none } section.themes .bx-pager .bx-pager-item { display: block; float: left; margin: 5px } section.themes .bx-pager .bx-pager-item a { display: block; float: left; width: 10px; height: 10px; background: #ffffff; border-radius: 5px; color: transparent; font-size: 0px; line-height: 0px; transition: 0.4s ease-in-out } section.themes .bx-pager .bx-pager-item a.active { width: 40px } section.themes .bx-pager .bx-pager-item a:hover { background: #9d96b8 } section.themes .bx-prev { display: block; position: absolute; z-index: 200; left: 40px; top: 50%; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; color: transparent; font-size: 0px; line-height: 0px; transform: translateY(calc(-50% - 60px)) } section.themes .bx-next { display: block; position: absolute; z-index: 200; right: 40px; top: 50%; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; color: transparent; font-size: 0px; line-height: 0px; transform: translateY(calc(-50% - 60px)) } section.themes .bx-prev:before, section.themes .bx-next:before { display: block; position: absolute; z-index: 201; left: 0%; top: 0%; width: 100%; height: 100%; content: ''; transition: 0.4s ease-in-out } section.themes .bx-prev:hover:before, section.themes .bx-next:hover:before { background: #000000 } section.themes .bx-prev:after { display: block; position: absolute; z-index: 202; left: 0%; top: 0%; width: 100%; height: 100%; background: url(../images/layout/left.svg) no-repeat center; background-size: 50%; content: '' } section.themes .bx-next:after { display: block; position: absolute; z-index: 202; left: 0%; top: 0%; width: 100%; height: 100%; background: url(../images/layout/right.svg) no-repeat center; background-size: 50%; content: '' } section.themes .bx-wrapper, section.themes .bx-wrapper .bx-viewport { float: left; width: 100%; height: 100% } section.themes .bx-wrapper .bx-viewport .slider { float: left; width: 100%; height: 100%; padding: 0px; margin: 0px; list-style-type: none } section.themes .bx-wrapper .bx-viewport .slider li { position: relative; float: left; width: 100%; height: 100% } section.themes .bx-wrapper .bx-viewport .slider li:before { display: block; position: absolute; z-index: 2; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(#000000cc 0%, #00000000 33.3333%, #00000000 66.6666%, #000000cc 100%); content: '' } section.themes .bx-wrapper .bx-viewport .slider li div { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 2; left: 50%; width: 1080px; padding: 30px; transform: translate(-50%,calc(-50% - 60px)) } section.themes .bx-wrapper .bx-viewport .slider li div h4 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; line-height: 24px; text-transform: uppercase; letter-spacing: 0.4em; text-indent: 0.4em; text-align: center; transform: scaleX(1.2); filter: opacity(0) blur(10px); transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider li div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 48px; line-height: 60px; font-weight: 700; text-align: center; transform: scaleX(1.2); filter: opacity(0) blur(10px); transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider li div a { display: block; position: relative; z-index: 0; float: left; padding: 23px 30px 23px 30px; border-radius: 5px; overflow: hidden; margin: 20px 10px 10px 10px; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transform: scaleX(1.2); filter: opacity(0) blur(10px); transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider li div a:hover { color: #ffffff } section.themes .bx-wrapper .bx-viewport .slider li div a:before { display: block; position: absolute; z-index: -2; left: 0%; top: 0%; width: 100%; height: 100%; background: #ffffff; content: '' } section.themes .bx-wrapper .bx-viewport .slider li div a:after { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 10%; padding: 0% 0% 10% 0%; background: #9d96b8; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider li div a:hover:after { width: 100%; padding: 0% 0% 100% 0%; transform: translate(-50%,-50%) rotate(90deg); filter: none } section.themes .bx-wrapper .bx-viewport .slider li div.active h4, section.themes .bx-wrapper .bx-viewport .slider li div.active h2, section.themes .bx-wrapper .bx-viewport .slider li div.active a { transform: none; filter: none } section.themes .bx-wrapper .bx-viewport .slider li span { display: block; position: absolute; z-index: 1; left: 0%; width: 100%; height: 100%; transform: translateY(-50%) } section.themes .bx-wrapper .bx-viewport .slider li span img { display: block; float: left; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: left bottom; filter: brightness(0.6) grayscale(0.4); transition: 8s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider li span.active img { transform: none } section.themes #progress { position: absolute; z-index: 100; left: 50%; bottom: 0%; width: 1000px; height: 2px; transform: translate(-50%,-220px) } section.themes #progress svg { float: left; width: 100%; height: 100% } section.content { display: flex; flex-flow: row wrap; align-items: flex-end; float: left; width: 100%; background: linear-gradient(-10deg, #afd2e9, #ffffff); overflow: hidden } section.content:nth-child(even) { flex-direction: row-reverse } section.content .entry { float: left; width: 50%; padding: 80px 80px 80px calc(50% - 500px); text-align: right; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content:nth-child(even) .entry, section.content .entry:nth-child(even) { padding: 80px calc(50% - 500px) 80px 80px; text-align: left; transform: translateX(50%) } section.content .entry.active { transform: none !important; filter: none } section.content .entry h2 { color: #9d96b8; font-size: 48px; line-height: 72px; font-weight: 700 } section.content .entry .cta { display: flex; flex-flow: row wrap; justify-content: flex-end; float: left; width: calc(100% + 40px); padding: 10px; margin: -20px; list-style-type: none } section.content:nth-child(even) .entry .cta, section.content .entry:nth-child(even) .cta { justify-content: flex-start } section.content .entry .cta li { display: block; float: left; margin: 10px } section.content .entry .cta li a { display: block; position: relative; z-index: 0; float: left; padding: 23px 30px 23px 30px; border-radius: 5px; overflow: hidden; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em } section.content .entry .cta li a:before { display: block; position: absolute; z-index: -2; left: 0%; top: 0%; width: 100%; height: 100%; background: #9d96b8; content: '' } section.content .entry .cta li a:after { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 10%; padding: 0% 0% 10% 0%; background: #000000; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .entry .cta li a:hover:after { width: 100%; padding: 0% 0% 100% 0%; transform: translate(-50%,-50%) rotate(90deg); filter: none } section.content .pic { position: relative; float: left; width: 50%; padding: 0% 0% 33.3333% 0%; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-out } section.content:nth-child(odd) .pic { transform: translateX(50%) } section.content .pic.active { transform: none !important; filter: none } section.content .pic img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .gallery { position: relative; float: left; width: 100%; background: #000000; transform: scaleX(2); filter: opacity(0); transition: 0.4s ease-out } section.content .gallery.active { transform: none; filter: none } section.content .gallery .bx-prev { display: block; position: absolute; z-index: 200; left: 40px; top: 50%; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; color: transparent; font-size: 0px; line-height: 0px; transform: translateY(-50%) } section.content .gallery .bx-next { display: block; position: absolute; z-index: 200; right: 40px; top: 50%; width: 60px; height: 60px; border-radius: 5px; overflow: hidden; color: transparent; font-size: 0px; line-height: 0px; transform: translateY(-50%) } section.content .gallery .bx-prev:before, section.content .gallery .bx-next:before { display: block; position: absolute; z-index: 201; left: 0%; top: 0%; width: 100%; height: 100%; content: ''; transition: 0.4s ease-in-out } section.content .gallery .bx-prev:hover:before, section.content .gallery .bx-next:hover:before { background: #000000 } section.content .gallery .bx-prev:after { display: block; position: absolute; z-index: 202; left: 0%; top: 0%; width: 100%; height: 100%; background: url(../images/layout/left.svg) no-repeat center; background-size: 50%; content: '' } section.content .gallery .bx-next:after { display: block; position: absolute; z-index: 202; left: 0%; top: 0%; width: 100%; height: 100%; background: url(../images/layout/right.svg) no-repeat center; background-size: 50%; content: '' } section.content .gallery ul { float: left; padding: 0%; margin: 0% calc(50% - 960px) 0% calc(50% - 960px); list-style-type: none } section.content .gallery ul li { display: block; float: left; width: 480px !important } section.content .gallery ul li a { display: none } section.content .gallery ul li a:first-child { display: block; position: relative; float: left; width: 100% } section.content .gallery ul li a:first-child div { position: absolute; z-index: 2; left: 0%; bottom: 0%; width: 100%; padding: 40px; color: #ffffff } section.content .gallery ul li a:first-child div h4 { font-size: 14px; line-height: 18px } section.content .gallery ul li a:first-child div h3 { line-height: 30px; font-weight: 700 } section.content .gallery ul li a:first-child picture { display: block; position: relative; z-index: 1; float: left; width: 100%; overflow: hidden; padding: 0% 0% 56.25% 0% } section.content .gallery ul li a:first-child picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: brightness(0.6) grayscale(0.4); transition: 0.4s ease-in-out } section.content .gallery ul li a:first-child:hover picture img { transform: none; filter: none } section.content .column { float: left; width: 1000px; padding: 80px; background: #ffffff; margin: 0px calc(50% - 500px) 0px calc(50% - 500px); text-align: center; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column.active { transform: none !important; filter: none } section.content#start .column { background: none } section.content .column h1 { font-size: 48px; line-height: 72px; font-weight: 700 } section.icons { float: left; width: 100%; padding: 0px calc(50% - 500px) 0px calc(50% - 500px); background: #9d96b8 } section.icons ul { float: left; width: 100%; padding: 40px; margin: 0px; list-style-type: none } section.icons ul li { display: block; float: left; width: calc(33.3333% - 80px); margin: 40px; transform: scale(0.5); filter: opacity(0); transition: 0.4s ease-in-out } section.icons ul.active li { transform: none; filter: none } section.icons ul li a { display: block; float: left; width: 100%; padding: 30px } section.icons ul li a svg { float: left; width: calc(100% - 100px); margin: 10px 50px 10px 50px } section.icons ul li a svg path { fill: #000000; transition: 0.4s ease-in-out } section.icons ul li a:hover svg path { fill: #ffffff } section.icons ul li a h4 { float: left; width: calc(100% - 20px); margin: 10px; line-height: 18px; font-weight: 700; text-transform: uppercase; text-align: center; transition: 0.4s ease-in-out } section.icons ul li a:hover h4 { color: #ffffff } section.sitemap { float: left; width: 100%; padding: 20px calc(50% - 540px) 20px calc(50% - 540px); overflow: hidden } section.sitemap ul { float: left; width: calc(25% - 40px); padding: 10px; margin: 20px; list-style-type: none; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.sitemap ul.active { transform: none; filter: none } section.sitemap ul:first-child { width: calc(50% - 40px) } section.sitemap ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } section.sitemap ul li a { display: block; float: left; width: 100%; padding: 16px 0px 16px 0px; color: #9d96b8; font-size: 18px; line-height: 18px; font-weight: 700 } section.sitemap ul li a.start { padding: 0px 0px 60px 0px; background: url(../images/layout/logo_wm.svg) no-repeat left center; background-size: auto 50px } section.sitemap ul li a.phone { padding: 10px 0px 10px 58px; background: url(../images/layout/phone.svg) no-repeat 10px center; background-size: 30px; font-size: 30px; line-height: 30px } section.sitemap ul li a.email { padding: 11px 0px 11px 58px; background: url(../images/layout/email.svg) no-repeat 16px center; background-size: 18px } footer { float: left; width: 100%; padding: 20px calc(50% - 540px) 100px calc(50% - 540px); overflow: hidden; background: #ffffff } footer div { float: left; width: calc(100% - 80px); margin: 40px; text-align: center; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } footer div.active { transform: none; filter: none } @media only screen and (max-width: 1279px) { body { padding: 80px 0px 0px 0px; font-size: 9px; line-height: 14px; transition: 0.4s ease-in-out } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } i { font-size: 7px; line-height: 12px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100% !important; padding: 5px } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 10px 30px } input[type=radio] + label b { width: 20px; height: 20px; border-width: 1px } input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px; border-radius: 2.5px } select, textarea, input[type=text] { padding: 12px; border-width: 1px; border-radius: 2.5px; font-size: 9px; line-height: 14px } select + label, textarea + label, input[type=text] + label { left: 10px; top: 10px; font-size: 9px; line-height: 14px } select:focus + label, textarea:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { padding: 2px 8px 2px 8px; font-size: 7px; line-height: 7px } textarea { height: 240px } input[type=submit] { height: 60px; padding: 14px; border-radius: 2.5px; font-size: 12px; line-height: 12px } div.preloader:before { width: 100px; height: 100px } a.scrolltop { right: 20px; top: calc(100vh - 100px); width: 40px; height: 40px; border-radius: 2.5px } div.switch { display: block; position: fixed; z-index: 5000; right: 20px; top: 20px; width: 40px; height: 40px; cursor: pointer; transition: 0.4s ease-in-out } div.switch:before { display: block; position: absolute; left: 30%; width: 40%; height: 6%; background: #ffffff; content: ''; animation: rotate_a1 0.4s forwards; transition: 0.4s ease-in-out } div.switch:after { display: block; position: absolute; left: 30%; width: 25%; height: 6%; background: #ffffff; content: ''; animation: rotate_a2 0.4s forwards; transition: 0.4s ease-in-out } div.switch.white:before, div.switch.white:after { background: #000000 } div.switch.active:before { left: 30%; width: 40%; background: #9d96b8; animation: rotate_b1 0.4s forwards } div.switch.active:after { left: 30%; width: 40%; background: #9d96b8; animation: rotate_b2 0.4s forwards } nav { left: 100%; width: 240px; height: 100%; background: #000000; transform: none; transition: 0.4s ease-in-out } nav ul { width: 100%; padding: 20px } nav ul li { width: calc(100% - 10px); margin: 5px } nav ul li a { width: 100%; padding: 9px 0px 9px 0px; color: #9d96b8 !important; font-size: 12px; line-height: 12px } nav ul li a:before { left: 0%; height: 1px; background: #9d96b8 !important; transform: none } header { padding: 20px calc(50% - 80px) 20px 20px } header a.start { float: right; padding: 4px 0px 4px 0px } header a.start svg { width: 160px; height: 32px } header a.phone { float: left } header a.phone svg { width: 40px; height: 40px; padding: 10px } header a.phone span { display: none } section.themes { max-height: 800px; margin: -80px 0px 0px 0px } section.themes .scrolldown { padding: 20px 20px 60px 20px } section.themes .scrolldown a { width: 40px; height: 40px; border-radius: 2.5px } section.themes .bx-pager { padding: 35px 35px 75px 35px } section.themes .bx-pager .bx-pager-item { margin: 2.5px } section.themes .bx-pager .bx-pager-item a { width: 5px; height: 5px; border-radius: 2.5px } section.themes .bx-pager .bx-pager-item a.active { width: 20px } section.themes .bx-prev, section.themes .bx-next { display: none } section.themes .bx-wrapper .bx-viewport .slider li div { width: 320px; padding: 15px; transform: translate(-50%,calc(-50% - 30px)) } section.themes .bx-wrapper .bx-viewport .slider li div h4 { width: calc(100% - 10px); margin: 5px; font-size: 9px; line-height: 12px } section.themes .bx-wrapper .bx-viewport .slider li div h2 { width: calc(100% - 10px); margin: 5px; font-size: 24px; line-height: 30px } section.themes .bx-wrapper .bx-viewport .slider li div a { padding: 15.5px 20px 15.5px 20px; border-radius: 2.5px; margin: 10px 5px 5px 5px; line-height: 9px } section.themes .bx-wrapper .bx-viewport .slider li span img { object-position: 25% 50% } section.themes #progress { width: 280px; height: 1px; transform: translate(-50%,-120px) } section.content .entry { width: 100%; padding: 20px calc(50% - 140px) 20px calc(50% - 140px) !important; font-size: 12px; line-height: 18px; text-align: center !important } section.content .entry h2 { font-size: 24px; line-height: 36px } section.content .entry h3 { font-size: 18px; line-height: 30px } section.content .entry h4 { font-size: 14px; line-height: 24px } section.content .entry .cta { justify-content: center !important; width: calc(100% + 20px); padding: 5px; margin: -10px } section.content .entry .cta li { margin: 5px } section.content .entry .cta li a { padding: 15.5px 20px 15.5px 20px; border-radius: 2.5px; font-size: 9px; line-height: 9px } section.content .pic { width: 100%; padding: 0% 0% 66.6666% 0% } section.content .gallery .bx-prev { left: 20px; width: 40px; height: 40px; border-radius: 2.5px } section.content .gallery .bx-next { right: 20px; width: 40px; height: 40px; border-radius: 2.5px } section.content .gallery ul { margin: 0% calc(50% - 160px) 0% calc(50% - 160px) } section.content .gallery ul li { width: 320px !important } section.content .gallery ul li a:first-child div { bottom: 50%; padding: 20px; text-align: center; transform: translateY(50%) } section.content .gallery ul li a:first-child div h4 { font-size: 9px; line-height: 12px } section.content .gallery ul li a:first-child div h3 { line-height: 18px } section.content .column { width: 320px; padding: 40px 20px 40px 20px; margin: -20px calc(50% - 160px) -20px calc(50% - 160px); transform: translateY(40px) } section.content .column h1 { font-size: 24px; line-height: 36px } section.icons { padding: 0px calc(50% - 160px) 0px calc(50% - 160px) } section.icons ul { padding: 15px } section.icons ul li { width: calc(33.3333% - 10px); margin: 5px } section.icons ul li a { padding: 5px } section.icons ul li a svg { width: calc(100% - 50px); margin: 5px 25px 5px 25px } section.icons ul li a h4 { width: calc(100% - 10px); margin: 5px; font-size: 9px; line-height: 9px } section.sitemap { padding: 20px calc(50% - 150px) 20px calc(50% - 150px) } section.sitemap ul { width: 50%; padding: 5px; margin: 0px } section.sitemap ul:first-child { width: 100% } section.sitemap ul li { width: calc(100% - 10px); margin: 5px } section.sitemap ul li a { padding: 13px 0px 13px 0px; font-size: 12px; line-height: 12px } section.sitemap ul li a.start { padding: 0px 0px 40px 0px; background-size: auto 32px } section.sitemap ul li a.phone { padding: 8px 0px 8px 37px; background-position: 7px center; background-size: 18px; font-size: 18px; line-height: 18px } section.sitemap ul li a.email { padding: 8px 0px 8px 37px; background-position: 10px center; background-size: 12px } footer { padding: 10px calc(50% - 160px) 50px calc(50% - 160px) } footer div { width: calc(100% - 40px); margin: 20px; font-size: 7px; line-height: 12px; text-align: left } footer div h4 { font-size: 9px; line-height: 14px } }