@import url("https://fonts.googleapis.com/css?family=Montserrat:300,500,600|Shadows+Into+Light+Two"); * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { overflow-x: hidden; font-size: 13px; font-weight: 300; font-family: 'Montserrat', serif; } @-webkit-keyframes animateClouds { 0% { -webkit-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } 50% { -webkit-transform: translate(-35px, -50%) rotate(2deg); transform: translate(-35px, -50%) rotate(2deg); } 80% { -webkit-transform: translate(35px, -50%) rotate(-2deg); transform: translate(35px, -50%) rotate(-2deg); } 100% { -webkit-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } } @keyframes animateClouds { 0% { -webkit-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } 50% { -webkit-transform: translate(-35px, -50%) rotate(2deg); transform: translate(-35px, -50%) rotate(2deg); } 80% { -webkit-transform: translate(35px, -50%) rotate(-2deg); transform: translate(35px, -50%) rotate(-2deg); } 100% { -webkit-transform: translate(0, -50%) rotate(0); transform: translate(0, -50%) rotate(0); } } @media (min-width: 1279px) { .container { width: 1280px; } } h1, h2, h3, h4, h5, h6 { font-family: 'Shadows Into Light Two', cursive; } h1 { font-size: 48px; } h2 { font-size: 40px; } h3 { font-size: 32px; } h4 { font-size: 22px; } img { max-width: 100%; } .container.narrow { max-width: 800px; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex.wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex.stretch, .flex .stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .flex.center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex.between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex.around { -ms-flex-pack: distribute; justify-content: space-around; } .flex.start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex.end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex.v-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .menucall { display: none; position: absolute; top: 50%; right: 15px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 9999; overflow: hidden; padding: 10px; } .menucall span { width: 25px; height: 3px; border-radius: 5px; margin: 4px 0; display: block; background-color: #cf79c1; -webkit-transition: .45s ease-in-out; transition: .45s ease-in-out; } .menucall.open span { background-color: #a1e1d1; -webkit-transform-origin: center center; transform-origin: center center; } .menucall.open span:first-of-type { -webkit-transform: translate(0px, 7px) rotate(45deg); transform: translate(0px, 7px) rotate(45deg); } .menucall.open span:nth-child(2) { -webkit-transform: translateX(-100px); transform: translateX(-100px); } .menucall.open span:last-of-type { -webkit-transform: translate(0px, -6px) rotate(-45deg); transform: translate(0px, -6px) rotate(-45deg); } .button { background-color: #cf79c1; border-radius: 15px; color: #ffffff; padding: 9px 15px; margin-right: 15px; border: none; font-weight: 600; } .button:hover, .button:active, .button:focus { color: #ffffff; background-color: #c253b0; } .topheader { background-color: #ffffff; text-align: right; color: #999999; font-weight: 600; text-transform: uppercase; padding: 15px 0; } .topcontact { width: 100%; padding-top: 20px; } .topcontact .wrap { padding-right: 40px; } .topcontact .wrap a { font-size: 14px; color: #000000; } .topcontact .wrap .icon { background-color: #ddd7ce; border-radius: 50%; margin-right: 20px; padding: 10px; width: 40px; height: 40px; text-align: center; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .topcontact .wrap:last-of-type { padding-right: 15px; } .topcontact .wrap:hover .icon, .topcontact .wrap:active .icon, .topcontact .wrap:focus .icon { background-color: #f7eaf5; } header { position: absolute; width: 100%; top: 0; left: 0; z-index: 100; } header .container { position: relative; } header .logo { position: relative; left: 0; top: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; z-index: 10; } header .logo:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; height: 100%; z-index: -1; -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); } header .flex.column.center.stretch { -webkit-box-flex: 5; -ms-flex: 5; flex: 5; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } header nav { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } header nav.on { display: block; position: absolute; top: 80px; opacity: 1; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } header ul { padding: 0; margin: 0; } header ul li { display: inline-block; list-style-type: none; } header ul li a { display: block; padding: 20px 15px; color: #000000; font-weight: 600; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } header ul li a:hover, header ul li a:active, header ul li a:focus { color: #cf79c1; text-decoration: none; } header ul li.dropdown:hover .dropdown, header ul li.dropdown:active .dropdown, header ul li.dropdown:focus .dropdown { display: block; } header ul.dropdown { display: none; position: absolute; left: 15px; min-width: 200px; background-color: #ffffff; -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1); } header ul.dropdown li { display: block; } .hero { height: 400px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .hero .container { position: relative; height: 400px; } .hero h1 { position: absolute; left: 85px; bottom: 80px; } .hero .content { position: absolute; left: 85px; bottom: 40px; } .hero .content a { color: #000000; } .slider .owl-carousel .owl-stage-outer { overflow: unset; } .slider .container { position: relative; height: 700px; } .slider .item { position: relative; min-height: 700px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .slider .text { position: absolute; left: 85px; bottom: 150px; } .slider .text h1 { font-family: 'Shadows Into Light Two', cursive; font-size: 48px; margin: 0 0 25px; } .slider .text .content { font-size: 15px; } .slider .button-wrapper { position: absolute; bottom: -60px; left: 85px; } .slider-effect { position: absolute; left: 0; top: 260px; width: 100%; } .slider-effect .cloud { display: inline-block; position: absolute; z-index: 5; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .slider-effect .c-2 { left: 2%; -webkit-animation: animateClouds 25s ease-in-out infinite; animation: animateClouds 25s ease-in-out infinite; } .slider-effect .c-3 { left: 20%; -webkit-animation: animateClouds 17s ease-in-out 0s infinite; animation: animateClouds 17s ease-in-out 0s infinite; } .slider-effect .c-4 { top: -20px; left: 35%; z-index: 0; -webkit-animation: animateClouds 13s ease-in-out .3s infinite; animation: animateClouds 13s ease-in-out .3s infinite; } .slider-effect .c-5 { left: 60%; -webkit-animation: animateClouds 21s ease-in-out 2s infinite; animation: animateClouds 21s ease-in-out 2s infinite; } .slider-effect .c-6 { top: -20px; left: 90%; z-index: 0; -webkit-animation: animateClouds 11s ease-in-out 1s infinite; animation: animateClouds 11s ease-in-out 1s infinite; } .slider-effect img { width: auto; } .s-button { margin-right: 40px; position: relative; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .s-button .more { position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .s-button .image { max-height: 100px; width: 100%; } .s-button .image img { width: 100%; height: 100px; -o-object-fit: cover; object-fit: cover; } .s-button .title { font-weight: 600; padding: 20px; width: 100%; font-size: 16px; text-transform: uppercase; } .s-button .title:after { content: ''; background-image: url(../img/arrow-right.png); width: 25px; height: 15px; background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; display: inline-block; margin-left: 5px; } .s-button:hover, .s-button:active, .s-button:focus { cursor: pointer; -webkit-transform: scale(1.05); transform: scale(1.05); } .motto { padding: 60px 0; background-size: contain; background-position: center center; background-repeat: no-repeat; background-origin: content-box; min-height: 520px; position: relative; } .motto .text { text-align: center; font-weight: 600; font-size: 35px; line-height: 1.5; } .picture-points { padding: 100px 80px 70px; } .picture-points .container { width: 100%; max-width: 1600px; } .picture-points .picture { -webkit-box-flex: 1; -ms-flex: 1 40%; flex: 1 40%; position: relative; } .picture-points .picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .picture-points .picture:after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; top: -25px; left: -25px; } .picture-points .content { -webkit-box-flex: 1; -ms-flex: 1 60%; flex: 1 60%; } .picture-points h2 { margin: 40px 0 55px; width: 100%; text-align: left; } .picture-points .content { padding: 0 80px; } .picture-points .point { position: relative; -webkit-box-flex: 0; -ms-flex: 0 45%; flex: 0 45%; margin-bottom: 50px; padding: 0 40px; } .picture-points .point .number { position: absolute; font-size: 80px; font-family: 'Shadows Into Light Two', cursive; color: #f7eaf5; left: -20px; top: -15px; width: 50px; text-align: right; } .picture-points .point .title { font-weight: 600; font-size: 20px; margin-bottom: 20px; } .picture-points .point .desc { font-size: 13px; color: #bbbbbb; } .gallery { padding: 50px 80px 0; } .gallery .text-center { padding-bottom: 45px; } .gallery .text-center h2 { margin-top: 0; } .gallery .text-center p { margin: 0; } .gallery .item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 5px; margin-bottom: 10px; position: relative; } .gallery .item:after { content: ''; background-color: #f0cbc8; opacity: 0; z-index: 10; position: absolute; top: 0; left: 50%; bottom: 0; right: 0; width: calc(100% - 10px); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .gallery .item:before { position: absolute; content: url(../img/plus.png); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 11; opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .gallery .item img { width: 100%; -o-object-fit: cover; object-fit: cover; } .gallery .item:hover:after, .gallery .item:active:after, .gallery .item:focus:after { opacity: .8; } .gallery .item:hover:before, .gallery .item:active:before, .gallery .item:focus:before { opacity: 1; } .dwn-button { position: relative; left: -35px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; color: #ffffff; text-transform: uppercase; padding: 10px 30px; background-color: #cf79c1; display: inline-block; margin-bottom: 20px; font-weight: 600; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .dwn-button:before { content: ''; display: block; position: absolute; top: 50%; left: -35px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); background-image: url(../img/download.png); background-size: 15px; background-position: center center; background-repeat: no-repeat; background-color: #ddd7ce; width: 45px; height: 45px; border-radius: 50%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .dwn-button:hover, .dwn-button:active, .dwn-button:focus { color: #ffffff; text-decoration: none; background-color: #c253b0; } .dwn-button:hover:before, .dwn-button:active:before, .dwn-button:focus:before { left: -27px; } .text-and-picture { padding-top: 40px; } .text-and-picture .content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #f3f3f3; padding: 55px 115px 55px 140px; } .text-and-picture .content a:not(.dwn-button) { color: #000000; } .text-and-picture .picture { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; position: relative; top: -25px; left: -25px; } .text-and-picture .picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .text-and-picture .picture:after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; top: -25px; right: -25px; } .section-news { padding: 50px 0; background-color: #f3f3f3f3; } .section-news .item:not(.fancybox) { -webkit-box-flex: 0; -ms-flex: 0 45%; flex: 0 45%; -ms-flex-item-align: start; align-self: flex-start; } .section-news .picture { height: 200px; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; } .section-news .picture.contain { background-size: contain; background-color: #ffffff; } .section-news .picture a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } .section-news .short-text { position: relative; top: -25px; right: -25px; padding: 15px 25px; width: calc(100% - 25px); background-color: #ffffff; margin-bottom: 30px; -webkit-box-shadow: -2px -2px 0px 0 #f4f4f4; box-shadow: -2px -2px 0px 0 #f4f4f4; } .section-news .title { color: #000000; font-size: 26px; margin-bottom: 20px; display: block; font-family: 'Shadows Into Light Two', cursive; } .blog-top.swap-order .blog-header { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; margin-bottom: 50px; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .blog-top.swap-order .main-picture { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; max-width: 100%; } .blog-top.swap-order .main-picture img { max-height: unset; } .blog-top .main-picture { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .blog-top .main-picture img { -o-object-fit: cover; object-fit: cover; max-height: 330px; width: 100%; } .blog-top .blog-header { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .blog-wrap h1 { font-family: 'Montserrat', serif; font-size: 22px; margin: 0 0 50px 0; font-weight: 600; } .blog-wrap datetime { font-size: 16px; color: #cbaf99; } .blog-wrap .blog-content { font-size: 16px; line-height: 2; } .blog-wrap .main-picture { max-width: 50%; margin-right: 30px; margin-bottom: 50px; } .blog-wrap .gallery { padding: 50px 10px; } .menu-subpage { padding: 50px 0; background-color: #f3f3f3f3; } .menu-subpage .container .container { max-width: 100%; } .menu-subpage .navigation { padding: 30px 20px; background-color: #ffffff; } .menu-subpage .navigation .elem { display: block; padding: 15px 25px; color: #000000; font-size: 16px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .menu-subpage .navigation .elem.active { font-weight: 600; } .menu-subpage .navigation .elem:hover, .menu-subpage .navigation .elem:active, .menu-subpage .navigation .elem:focus { color: #cf79c1; background-color: #f3f3f3f3; } .menu-subpage .modules { padding: 0 40px; } footer .contact { padding: 50px 0 60px; color: #bbbbbb; font-size: 13px; } footer .contact a { color: #bbbbbb; } footer .logo { margin: 0 50px; } .footer-menu { padding: 40px 0; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .footer-menu .title { font-family: 'Shadows Into Light Two', cursive; font-size: 28px; margin-bottom: 15px; } .footer-menu .group { -webkit-box-flex: 0; -ms-flex: 0 260px; flex: 0 260px; } .footer-menu ul { padding: 0 0 0 15px; margin: 0; } .footer-menu ul li { margin-bottom: 10px; } .footer-menu ul a { color: #000000; font-size: 12px; } .subfooter { padding: 32px 0; display: block; text-transform: uppercase; font-size: 10px; color: #bbbbbb; } .subfooter a { color: #bbbbbb; } .contact-form { background-color: #f4f4f4; padding: 50px 0; } .contact-form .box--inner { display: block; width: calc(100% - 30px); margin: 30px auto 0 auto; } form .ajaxInfo { display: none; background-color: #ffffff; border-radius: 5px; padding: 20px 40px; text-align: center; margin-bottom: 30px; font-size: 16px; font-weight: 600; } form .ajaxInfo.ok { color: #6ed668; } form .ajaxInfo.error { color: #ea3b3b; } form .ajaxInfo.error_send { color: #ffb541; } form .alert-info { display: none; } form .form__item { padding: 0; height: 100%; } form .form__label { font-weight: 600; margin-bottom: 8px; } form input, form textarea { border: 2px solid #f4f4f4; width: 100%; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; padding: 15px 25px; margin-bottom: 30px; } form input:hover, form input:active, form input:focus, form textarea:hover, form textarea:active, form textarea:focus { outline: none; -webkit-box-shadow: inset 0 0 0 2px #cf79c1; box-shadow: inset 0 0 0 2px #cf79c1; } form textarea { min-height: 217px; } form .recaptcha_error { display: none; text-align: center; background-color: #f44336; color: #fff; max-width: 300px; padding: 10px 0; border-radius: 5px; margin: 0 auto 15px; } form .g-recaptcha { margin: 30px 0; } form .g-recaptcha.confirmed > div { -webkit-box-shadow: 0 0 0 2px #23a521; box-shadow: 0 0 0 2px #23a521; } form .g-recaptcha.error > div { -webkit-box-shadow: 0 0 0 2px #f44336; box-shadow: 0 0 0 2px #f44336; } form .g-recaptcha > div { margin: 0 auto; } form .agreement-contact input { width: 85px; } form .agreement-contact .text { font-weight: 500; } form .tc { text-align: center; } form .group .form__item { -webkit-box-flex: 0; -ms-flex: 0 45%; flex: 0 45%; } form .button { padding: 20px 40px; } .section-with-picture { padding: 50px 0; } .section-with-picture .picture { background-size: cover; background-position: center center; } .section-with-picture .typical-content { padding: 15px 30px; } .recrutation { padding: 50px 0; } .recrutation .narrow { max-width: 700px; } .recrutation .content { text-align: center; font-weight: 600; font-family: 'Shadows Into Light Two', cursive; font-size: 22px; margin-bottom: 30px; } .recrutation .alert-info { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; } .recrutation input, .recrutation textarea { margin-bottom: 0; } .recrutation textarea { min-height: 100px; } .recrutation .form__item { margin-bottom: 30px; } .recrutation .form__item.big { margin: 0; padding: 10px; background-color: #a1e1d1; } .recrutation .form__item:not(.flex) .form__label { margin-bottom: 10px; } .recrutation .form__label { margin-bottom: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .recrutation .f-input { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; } .recrutation .radio input { width: unset; } .recrutation .radio label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } #cookieinfo { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99999; font-size: 19px; padding: 15px 50px; background-color: #a1e1d1; font-family: 'Shadows Into Light Two', cursive; } @media (max-width: 767px) { #cookieinfo { padding: 15px; } } #cookieinfo a { display: inline-block; padding: 10px; background-color: #cf79c1; color: #ffffff; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #cookieinfo a:hover, #cookieinfo a:active, #cookieinfo a:focus { background-color: #c253b0; } @media (max-width: 991px) { .menucall { display: block; } .topcontact { display: none; } .topheader { display: none; } header { position: fixed; top: 0; left: 0; z-index: 99; background-color: #ffffff; } header .logo { top: 0; width: 80px; min-width: 80px; max-width: 80px; } header .logo:before { -webkit-box-shadow: none; box-shadow: none; } header nav { display: none; opacity: 0; width: 100vw; top: 0; background-color: #ffffff; } header nav ul li { text-align: center; display: block; } } @media (max-width: 767px) { ol { padding: 0 15px; } .recrutation .form__item { -ms-flex-wrap: wrap; flex-wrap: wrap; } .recrutation .form__label { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; } .hero { height: 280px; } .hero .container { height: 280px; } .hero h1 { margin: 0; } .slider { overflow: hidden; } .slider .container { width: 100%; height: 80vh; max-height: 600px; } .slider .item { height: 80vh; max-height: 600px; min-height: unset; } .slider .text { left: 15px; bottom: unset; top: 60%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; z-index: 100; padding-right: 15px; } .slider .text h1 { font-size: 38px; } .slider .text .content { display: none; } .slider .button-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; bottom: 0; left: 0; width: 100%; } .motto { background-size: cover; min-height: auto; } .motto .text { font-size: 20px; } .slider-effect { top: 180px; } .s-button { margin-right: 0; } .s-button .image { display: none; } footer .contact { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 50px 15px; } footer .text-right, footer .logo, footer .text-left { text-align: center; margin: 0; -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; } footer .footer-menu .flex.v-top { -ms-flex-wrap: wrap; flex-wrap: wrap; } }