📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
kombiv1.demodesign.com.tr
/
css
📝
custom.css
← Geri Dön
/*------------------------------- [Table of contents] 1. Typography 1.1 Typography Styles 1.2 Page Preloader 1.3 Forms 1.4 Buttons 1.5 Social Icons 1.6 Tags 1.7 Nav Pills 2. Main Structure 2.1 Layout Styles 2.2 Header 2.3 Footer 2.4 Main Slider 3. Content 3.1 Breadcrumbs block 3.2 Text + Icon block 3.3 Testimonials block 3.4 Person Block 3.5 Banners 3.6 Services 3.7 News 3.8 Facts 3.9 Features text 3.10 Discounts 3.11 Prices 3.12 Question Box 3.13 Faq 3.14 Brands 4. Special Pages 4.1 Blog Page 4.2 Shop Pages 5. Custom Animation 6. Vendor overlay styles -----------------------------------*/ /*---------------------------------------*/ /*-------- 1. Typography --------*/ /*---------------------------------------*/ /*------- 1.1 Typography Styles --------*/ body { font-family: 'Roboto', sans-serif; color: #899198; font-size: 16px; line-height: 27px; font-weight: 400; overflow-x: hidden; } @media(min-width:1000px) { .sliderhizala{margin-top:-250px;} } @media(max-width:999px) { .sliderhizala{margin-top:130px;} } @media(min-width:1001px){ .mobil-menu-1{display:none;} } @media (max-width:1000px){ .mobil-menu-1{display:block;} } @media (max-width: 991px) { body { font-size: 15px; line-height: 22px; } } body.modal-open { padding-right: 0 !important; } a { text-decoration: underline; color: #899198; } a:hover, a:focus { text-decoration: none; color: #899198; } p { font-size: 16px; line-height: 27px; margin-bottom: 22px; } @media (max-width: 991px) { p { font-size: 15px; line-height: 22px; margin-bottom: 22px; } } @media (max-width: 479px) { p { font-size: 15px; line-height: 22px; margin-bottom: 18px; } } p.font-sm { font-size: 16px; line-height: 27px; } @media (max-width: 991px) { p.font-sm { font-size: 15px; line-height: 22px; } } p.p-lg { font-size: 16px; line-height: 27px; } @media (max-width: 991px) { p.p-lg { font-size: 15px; line-height: 22px; } } p.info { text-align: center; padding: 12px 20px; color: #3d4c58; font-size: 18px; font-weight: 600; font-family: 'Poppins', sans-serif; background-color: #f9f9fa; margin: 0 0 34px; } p.info [class*='icon'] { position: relative; top: 4px; font-size: 26px; color: #4ba0e8; padding-right: 10px; } @media (max-width: 991px) { p.info { position: relative; text-align: left; padding-left: 53px; font-size: 16px; font-weight: 500; } p.info [class*='icon'] { position: absolute; left: 15px; top: 14px; } } * + p.info { margin-top: 38px; } .max-700 { max-width: 710px; margin-left: auto; margin-right: auto; } @media (max-width: 991px) { .max-700 { max-width: 650px; } } .max-750 { max-width: 750px; margin-left: auto; margin-right: auto; } @media (max-width: 991px) { .max-750 { max-width: 650px; } } .max-800 { max-width: 800px; margin-left: auto; margin-right: auto; } .max-900 { max-width: 910px; margin-left: auto; margin-right: auto; } .color, a.color, a.color:hover, a.color:focus { color: #4ba0e8 !important; } .color-alt { color: #4ba0e8; } h1, h2.h-lg { font-size: 36px; line-height: 56px; font-family: 'Poppins', sans-serif; font-weight: 600; margin: -0.55em 0 18px; color: #3d4c58; } @media (max-width: 1199px) { h1, h2.h-lg { font-size: 32px; line-height: 40px; margin: -0.25em 0 18px; } } @media (max-width: 991px) { h1, h2.h-lg { font-size: 28px; line-height: 36px; } } @media (max-width: 479px) { h1, h2.h-lg { font-size: 24px; line-height: 34px; } } h1 + .container, h2.h-lg + .container, h1 + .row, h2.h-lg + .row, h1 + .block, h2.h-lg + .block, h1 + form, h2.h-lg + form, h1 + [class*="contact-info"], h2.h-lg + [class*="contact-info"] { margin-top: 30px; } h1.h-decor, h2.h-decor { margin: -0.55em 0 18px; } @media (max-width: 1199px) { h1.h-decor, h2.h-decor { margin: -0.25em 0 18px; } } @media (max-width: 767px) { h1.h-decor, h2.h-decor { margin-bottom: 15px; } } h1.h-decor + .container, h2.h-decor + .container, h1.h-decor + .row, h2.h-decor + .row, h1.h-decor + .block, h2.h-decor + .block, h1.h-decor + form, h2.h-decor + form, h1.h-decor + [class*="contact-info"], h2.h-decor + [class*="contact-info"] { margin-top: 30px; } @media (max-width: 479px) { h1.h-decor + .container, h2.h-decor + .container, h1.h-decor + .row, h2.h-decor + .row, h1.h-decor + .block, h2.h-decor + .block, h1.h-decor + form, h2.h-decor + form, h1.h-decor + [class*="contact-info"], h2.h-decor + [class*="contact-info"] { margin-top: 20px; } } h2, h1.h-sm { font-size: 36px; line-height: 56px; font-family: 'Poppins', sans-serif; font-weight: 600; margin: -0.4em 0 18px; color: #3d4c58; } @media (max-width: 1199px) { h2, h1.h-sm { font-size: 32px; line-height: 40px; margin: -0.2em 0 18px; } } @media (max-width: 991px) { h2, h1.h-sm { font-size: 28px; line-height: 36px; } } @media (max-width: 479px) { h2, h1.h-sm { font-size: 18px; line-height: 28px; margin-bottom: 12px; } } h2 + .container, h1.h-sm + .container, h2 + .block, h1.h-sm + .block, h2 + form, h1.h-sm + form, h2 + [class*="contact-info"], h1.h-sm + [class*="contact-info"] { margin-top: 30px; } @media (max-width: 479px) { h2 + .container, h1.h-sm + .container, h2 + .block, h1.h-sm + .block, h2 + form, h1.h-sm + form, h2 + [class*="contact-info"], h1.h-sm + [class*="contact-info"] { margin-top: 20px; } } h3 { font-size: 24px; line-height: 1.2em; font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0; margin: 0 0 20px; color: #3d4c58; } @media (max-width: 1199px) { h3 { font-size: 22px; } } @media (max-width: 991px) { h3 { font-size: 22px; } } @media (max-width: 767px) { h3 { font-size: 18px; } } @media (max-width: 479px) { h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; } } h4 { font-size: 20px; line-height: 30px; font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0; margin: 0 0 10px; color: #3d4c58; } @media (max-width: 991px) { h4 { font-size: 18px; line-height: 28px; } } @media (max-width: 479px) { h4 { font-size: 18px; line-height: 28px; margin-bottom: 8px; } } h5 { font-size: 18px; line-height: 28px; font-weight: 600; font-family: 'Poppins', sans-serif; padding: 0; margin: 0 0 15px; color: #3d4c58; } @media (max-width: 991px) { h5 { font-size: 16px; line-height: 24px; margin-bottom: 10px; } } h6 { font-size: 16px; line-height: 22px; font-weight: 600; font-family: 'Poppins', sans-serif; padding: 0; margin: 0 0 15px; color: #3d4c58; } h1.h-white, h2.h-white, h3.h-white, h4.h-white, h5.h-white, h6.h-white { color: #fff; } .divider-xl { clear: both; height: 60px; } @media (max-width: 479px) { .divider-xl { height: 30px; } } .divider-lg { clear: both; height: 45px; } @media (max-width: 479px) { .divider-lg { height: 20px; } } .divider-md { clear: both; height: 30px; } @media (max-width: 479px) { .divider-md { height: 15px; } } .divider { clear: both; height: 18px; } @media (max-width: 479px) { .divider { height: 10px; } } .divider-sm { clear: both; height: 10px; } .divider-line { height: 25px; border-bottom: 1px solid #e6e9ec; margin-bottom: 25px; } .text-center > img { display: inline-block; } .img-fullwidth { width: 100%; } .services-list-row .marker-list { margin-top: 5px; } @media (min-width: 768px) { .services-list-row .marker-list { margin-bottom: 0; } } .marker-list { margin: 0 0 25px; padding: 0; list-style: none; } @media (max-width: 991px) { .marker-list { margin-bottom: 10px; } } .marker-list > li { font-size: 16px; line-height: 26px; font-weight: 400; position: relative; padding-left: 22px; margin-bottom: 7px; } @media (max-width: 991px) { .marker-list > li { font-size: 15px; line-height: 22px; } } .marker-list > li:last-child { margin-bottom: 0; } .marker-list > li:after { position: absolute; top: 0; left: 0; display: block; font-family: 'cleaning'; content: "\e907"; font-size: 11px; color: #4ba0e8; } .marker-list a { text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .marker-list a:hover { text-decoration: none; color: #4ba0e8; } .social-list { margin: 15px 0 15px; padding: 0; list-style: none; } .social-list > li { display: inline-block; margin-right: 7px; } .social-list > li a { font-size: 40px; line-height: 40px; text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .social-list > li a:hover { color: #4ba0e8; } .social-list-sm { margin: 15px 0 10px; } .social-list-sm > li { display: inline-block; margin-right: 5px; } .social-list-sm > li a { font-size: 30px; line-height: 30px; } .services-list { padding: 0; margin-bottom: 50px; font-size: 16px; line-height: 19px; text-align: left; list-style: none; } @media (max-width: 767px) { .services-list { margin-bottom: 30px; } } .services-list li { position: relative; background-color: #f2f4f5; margin-bottom: 1px; } .services-list li a { display: block; text-decoration: none; color: #3d4c58; padding: 15px 0 15px 22px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .services-list li:after { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: #4ba0e8; opacity: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .services-list li:hover { background-color: #fff; } .services-list li:hover:after { opacity: 1; } .services-list li.active { background-color: #4ba0e8; } .services-list li.active a { color: #fff; } .services-list li.active a:before { display: inline-block; vertical-align: middle; font-size: 12px; color: #fff; font-family: 'cleaning'; content: "\e90a"; padding: 0 10px 0 0; } .category-list { margin: 0 0 55px; padding: 0; font-size: 16px; line-height: 18px; text-align: left; list-style: none; } .category-list li { position: relative; } .category-list li a { display: inline-block; padding: 10px 0px; font-size: 16px; line-height: 18px; font-weight: 600; color: #3d4c58; text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .category-list li:before { display: inline-block; vertical-align: middle; font-size: 12px; color: #4ba0e8; font-family: 'cleaning'; content: "\e90a"; padding: 0 12px 0 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .category-list li:hover a { color: #4ba0e8; } .category-list li:hover:before { padding: 0 16px 0 0; } .no-marker, .marker-list-arrow { margin: 0; padding: 0; list-style: none; } .no-marker > li, .marker-list-arrow > li { font-size: 15px; line-height: 17px; font-weight: 400; position: relative; padding: 10px 0; border-bottom: 1px solid #f0f2f4; } .no-marker > li { font-weight: 600; } .marker-list-arrow > li { padding-left: 22px; } .marker-list-arrow > li:after { position: absolute; top: 11px; left: 4px; display: block; font-family: 'cleaning'; content: "\e90a"; font-size: 8px; color: #4ba0e8; } .vert-wrap { display: table; height: 100%; width: 100%; position: relative; z-index: 1; } .vert { display: table-cell; vertical-align: middle; } .more-loader { display: none; position: relative; height: 50px; } .more-loader .loading-content { display: block !important; } .more-loader.visible { display: block; text-align: center; padding-bottom: 25px; } .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > th { padding: 15px 8px; border-top: 0; border-bottom: 3px solid #e5e5e5; } .table > tbody > tr > td { border-top: 1px solid #e5e5e5; padding: 10px 8px; } .table .cell-marker { background: #4ba0e8; border-color: #4ba0e8; padding-left: 12px; padding-right: 12px; } .table th.cell-marker { border-color: #fff; } .pagination { margin: 20px 0 0 0; } @media (max-width: 479px) { .pagination { margin-top: 5px; } } .pagination > li > a, .pagination > li > span { padding: 0; margin: 0; width: 56px; height: 56px; font-size: 16px; line-height: 56px; font-weight: 66; border: 0; text-align: center; border-radius: 50%; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .pagination > li > a, .pagination > li > span, .pagination > li > a:focus, .pagination > li > span:focus { color: #363636; background-color: #fff; } .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 50%; } .pagination > li > a:hover, .pagination > li > span:hover { background-color: #f7f7f7; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover { color: #fff; background-color: #4ba0e8; } .bg-text { padding: 20px 10px 20px 65px; } .bg-text-inside { width: 500px; } @media (max-width: 1199px) { .bg-text-inside { width: 445px; } } @media (max-width: 991px) { .bg-text-inside { width: 100%; } } @media (max-width: 1199px) { .bg-text { padding: 20px 15px 20px 45px; } } @media (max-width: 991px) { .bg-text { padding: 20px 15px; } } .bg-text p:last-child { margin-bottom: 0; } @media (min-width: 992px) { .row-flex-text { min-height: 460px; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; background-color: #f6f6f7; } .row-flex-text > .col-50 { flex: 0 1 50%; min-width: 50%; } } @media (max-width: 991px) { .row-flex-text { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .row-flex-text > .col-50 { flex: 1; } } .contact-box { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; background-color: #f3f3f3; padding: 26px 30px; color: #3d4c58; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 1199px) { .contact-box { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; padding: 15px 20px; } .contact-box > * { margin: 15px 0; } } .contact-info-wrap { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; flex: 1; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-align-items: center; align-items: center; margin-right: 50px; } @media (max-width: 1199px) { .contact-info-wrap { justify-content: space-around; margin-right: 0; width: 100%; } } @media (max-width: 600px) { .contact-info-wrap { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .contact-info-wrap > * { margin: 10px auto; width: 300px; } } .contact-info { padding-left: 35px; position: relative; font-size: 16px; line-height: 28px; text-align: left; } .contact-info > .icon { position: absolute; top: 4px; left: 0; font-size: 24px; line-height: 1em; color: #4ba0e8; } .contact-info-sm { margin: 0 0 40px; padding-left: 40px; position: relative; text-align: left; } .contact-info-sm:first-child { margin-top: 0; } .contact-info-sm > .icon { position: absolute; top: 0; left: 0; font-size: 26px; line-height: 1em; color: #4ba0e8; } .contact-info-sm > h5 { text-transform: none; margin-bottom: 10px; } .quote { margin-top: 25px; margin-bottom: 40px; font-style: italic; padding-left: 80px; position: relative; } .quote:before { font-size: 120px; line-height: 1em; font-style: normal; content: "“"; position: absolute; left: 20px; top: -15px; color: #c7d5e1; } .address-box { background-color: #f6f6f7; padding: 25px 35px 10px; } @media (max-width: 767px) { .address-box { margin-top: 25px; } } .address-box .contact-info-sm { margin-top: 15px; } .address-box b { font-weight: 600; } .address-box, .address-box a { color: #8091a0; } .address-box .social-list-sm { margin-top: 20px; } .google-map { min-height: 446px; width: 100%; } @media (max-width: 767px) { .google-map { min-width: 300px; } } @media (max-width: 767px) { .collapse-col.collapsed { display: none; } } @media (max-width: 480px) { .services-list-row .col-xs-6 { width: 100%; } .services-list-row .marker-list { width: 200px; margin-left: auto; margin-right: auto; } } .num-box { position: relative; padding: 0 40px 0 30px; } .num-box-title { font-size: 20px; margin-bottom: 15px; } @media (max-width: 1199px) { .num-box-title { font-size: 18px; margin-bottom: 8px; } } .num-box-num { position: absolute; left: 0; top: 0; font-size: 22px; font-weight: bold; color: #4ba0e8; } @media (max-width: 1199px) { .num-box-num { font-size: 20px; } } @media (max-width: 991px) { .num-box-num { top: 5px; } } .num-box + .num-box { margin-top: 35px; } @media (max-width: 1199px) { .num-box + .num-box { margin-top: 25px; } } .marker-box { position: relative; padding: 0 40px 0 30px; } @media (max-width: 991px) { .marker-box { padding: 0 0 0 28px; } } .marker-box-title { font-size: 20px; margin-bottom: 15px; } @media (max-width: 991px) { .marker-box-title { font-size: 18px; margin-bottom: 4px; } } .marker-box-marker { position: absolute; left: 0; top: 4px; font-size: 16px; font-weight: bold; color: #4ba0e8; } @media (max-width: 991px) { .marker-box-marker { top: 6px; } } .marker-box p:last-child { margin-bottom: 0; } .p-lg + .marker-box { margin-top: 27px; } @media (max-width: 991px) { .p-lg + .marker-box { margin-top: 22px; } } @media (max-width: 767px) { .p-lg + .marker-box { margin-top: 10px; } } .marker-box + .marker-box { margin-top: 27px; } @media (max-width: 991px) { .marker-box + .marker-box { margin-top: 22px; } } @media (max-width: 767px) { .marker-box + .marker-box { margin-top: 10px; } } .row-flex { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .row-flex .col-sm-6 { flex-basis: 50%; min-width: 50%; } .align-center { -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 767px) { .flex-column-sm { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-column-sm .col-sm-6 { flex-basis: 100%; min-width: 100%; } } @media (min-width: 1200px) { .pl-lg-40 { padding-left: 40px; } .pl-lg-20 { padding-left: 20px; } .p-lg-15 { padding: 0 15px; } } .img-with-shtamp { position: relative; } @media (max-width: 767px) { .img-with-shtamp { max-width: calc(100% - 100px); margin: 80px auto 0; } } @media (max-width: 479px) { .img-with-shtamp { max-width: calc(100% - 80px); margin: 70px auto 0; } } .img-with-shtamp .shtamp { position: absolute; z-index: 1; top: 0; left: 0; transform: translate(-50%, -50%); } .img-with-shtamp .shtamp img { max-width: 153px; } @media (max-width: 1199px) { .img-with-shtamp .shtamp img { max-width: 120px; } } @media (max-width: 767px) { .img-with-shtamp .shtamp img { max-width: 100px; } } @media (max-width: 479px) { .img-with-shtamp .shtamp img { max-width: 80px; } } .final-price { font-size: 48px; line-height: 1em; font-weight: bold; color: #4ba0e8; } @media (max-width: 767px) { .final-price { font-size: 36px; } } .d-flex { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .text-center > .d-flex { -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } .calendar__header { font-size: 16px; line-height: 22px; text-transform: uppercase; font-weight: 600; color: #425d74; padding: 0 0 15px; } .calendar__footer { font-size: 16px; color: #425d74; padding: 10px 0 0; } .calendar__footer a { text-decoration: none; color: #425d74; } .calendar__footer a:hover { color: #4ba0e8; } .calendar table { background: #fff; border-collapse: collapse; font-size: 14px; width: 100%; max-width: 350px; border-spacing: 1px; border-collapse: separate; } .calendar th, .calendar td { border: 1px solid #f7f7f7; color: #2c2c2c; cursor: pointer; line-height: 36px; text-align: center; font-weight: 400; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .calendar th:hover, .calendar td:hover { background-color: #f5f5f5; } .calendar th { background-color: #f5f5f5; } .calendar tr:first-child td { color: #2c2c2c; padding-bottom: 10px; } .calendar .selected, .calendar .selected:hover { background-color: #4ba0e8; color: #fff; } .btn-read-more { display: block; font-size: 15px; font-weight: 600; color: #6a7680; text-decoration: none; font-family: 'Poppins', sans-serif; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .btn-read-more [class*='icon'] { position: relative; top: 1px; font-size: 14px; padding: 0 4px; color: #4ba0e8; } .btn-read-more:hover { color: #4ba0e8; } .btn-read-more:not(:first-child) { margin-top: 24px; } @media (max-width: 1199px) { .btn-read-more:not(:first-child) { margin-top: 18px; } } @media (max-width: 991px) { .btn-read-more:not(:first-child) { margin-top: 18px; } } @media (max-width: 767px) { .btn-read-more { font-size: 12px; } .btn-read-more [class*='icon'] { top: 0; font-size: 10px; } } /*-------- 1.2 Page Preloader --------*/ body.is-loaded .loading-content { opacity: 0; visibility: hidden; } body > .loading-content { z-index: 10000; position: fixed; font-size: 30px; font-weight: 600; font-family: 'Poppins', sans-serif; } .loading-content .loaded-text { position: relative; font-size: 80px; line-height: 1em; font-family: 'Poppins', sans-serif; color: #4ba0e8; -webkit-text-fill-color: transparent; font-weight: 600; text-stroke: 1px #4ba0e8; -webkit-text-stroke: 1px #4ba0e8; } @media (max-width: 767px) { .loading-content .loaded-text { font-size: 50px; } } .loading-content .loaded-text:after, .loading-content .loaded-text:before { position: absolute; top: 0; left: 0; color: #4ba0e8; content: attr(data-text); -webkit-text-fill-color: #4ba0e8; } .loading-content .loaded-text:before { text-stroke: 1px #4ba0e8; -webkit-text-stroke: 1px #4ba0e8; font-weight: 600; clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); -webkit-animation: fill_text 7s; -moz-animation: fill_text 7s; animation: fill_text 7s; } .loading-content .loaded-text.loaded-text-loaded:after { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } .loading-content .loaded-text:after { text-stroke: 1px #4ba0e8; -webkit-text-stroke: 1px #4ba0e8; font-weight: 700!important; clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); -webkit-transition: 2s; -moz-transition: 2s; -ms-transition: 2s; -o-transition: 2s; } @keyframes fill_text { to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } } .loading-content { height: 100%; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 200; background-color: #fff; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; opacity: 1; pointer-events: none; visibility: visible; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } .loading-content.disable { opacity: 0; } .loading-dots { margin-left: -1.5em; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-animation: loading-dots-fadein 0.5s linear forwards; -moz-animation: loading-dots-fadein 0.5s linear forwards; -o-animation: loading-dots-fadein 0.5s linear forwards; -ms-animation: loading-dots-fadein 0.5s linear forwards; animation: loading-dots-fadein 0.5s linear forwards; } .loading-dots i { width: .5em; height: .5em; display: inline-block; vertical-align: middle; background: #e0e0e0; -webkit-border-radius: 50%; border-radius: 50%; margin: 0 .125em; -webkit-animation: loading-dots-middle-dots 0.5s linear infinite; -moz-animation: loading-dots-middle-dots 0.5s linear infinite; -o-animation: loading-dots-middle-dots 0.5s linear infinite; -ms-animation: loading-dots-middle-dots 0.5s linear infinite; animation: loading-dots-middle-dots 0.5s linear infinite; } .loading-dots.dark-gray i { background: #4ba0e8; } .loading-dots i:first-child { -webkit-animation: loading-dots-first-dot 0.5s infinite; -moz-animation: loading-dots-first-dot 0.5s linear infinite; -o-animation: loading-dots-first-dot 0.5s linear infinite; -ms-animation: loading-dots-first-dot 0.5s linear infinite; animation: loading-dots-first-dot 0.5s linear infinite; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -o-transform: translate(-1em); -ms-transform: translate(-1em); transform: translate(-1em); } .loading-dots i:last-child { -webkit-animation: loading-dots-last-dot 0.5s linear infinite; -moz-animation: loading-dots-last-dot 0.5s linear infinite; -o-animation: loading-dots-last-dot 0.5s linear infinite; -ms-animation: loading-dots-last-dot 0.5s linear infinite; animation: loading-dots-last-dot 0.5s linear infinite; } @-moz-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes loading-dots-fadein { 100% { opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-webkit-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-o-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); -moz-transform: translate(1em); -o-transform: translate(1em); -ms-transform: translate(1em); transform: translate(1em); } } @-moz-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); -moz-transform: translate(2em); -o-transform: translate(2em); -ms-transform: translate(2em); transform: translate(2em); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } .inner-circles-loader:not(:required) { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: relative; display: inline-block; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; overflow: hidden; text-indent: -9999px; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } .inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after { content: ''; position: absolute; top: 0; display: inline-block; width: 50px; height: 50px; border-radius: 50%; } .inner-circles-loader:not(:required):before { -moz-animation: inner-circles-loader 3s infinite; -webkit-animation: inner-circles-loader 3s infinite; animation: inner-circles-loader 3s infinite; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; left: 0; background: #4ba0e8; } .inner-circles-loader:not(:required):after { -moz-animation: inner-circles-loader 3s 0.2s reverse infinite; -webkit-animation: inner-circles-loader 3s 0.2s reverse infinite; animation: inner-circles-loader 3s 0.2s reverse infinite; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; right: 0; background: #4ba0e8; opacity: .05; } @-moz-keyframes inner-circles-loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes inner-circles-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes inner-circles-loader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /*-------- 1.3 Forms --------*/ input, select, textarea { font-family: 'Roboto', sans-serif; } .input-custom { appearance: none; margin-bottom: 5px; padding: 14px 15px 14px; font-size: 15px; line-height: 24px; height: 54px; background: #fff; border: 1px solid #d7dbdf; border-radius: 3px; color: #2b2b2b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .input-custom:hover, .input-custom:focus, .input-custom.focus { outline: none; border-color: #4ba0e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .input-custom.input-full { width: 100%; } .input-custom.input-custom--sm { padding: 9px 15px; height: 42px; line-height: 20px; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: #fff; } .textarea-custom { appearance: none; margin-bottom: 5px; padding: 14px 15px 14px; font-size: 15px; line-height: 24px; height: 54px; background: #fff; border: 1px solid #d7dbdf; border-radius: 3px; color: #2b2b2b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; min-height: 193px; height: auto; } .textarea-custom:hover, .textarea-custom:focus, .textarea-custom.focus { outline: none; border-color: #4ba0e8; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .textarea-custom.input-full { width: 100%; } .input-wrapper { position: relative; margin-bottom: 15px; } .placeholder { font-size: 15px; line-height: 20px; color: #a7b3bd; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size: 15px; line-height: 20px; color: #a7b3bd; } input::-moz-placeholder, textarea::-moz-placeholder { font-size: 15px; line-height: 20px; color: #a7b3bd; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-size: 15px; line-height: 20px; color: #a7b3bd; } input:-moz-placeholder, textarea:-moz-placeholder { font-size: 15px; line-height: 20px; color: #a7b3bd; } .required { color: red; } input.input-custom, textarea.textarea-custom, .select-wrapper select.input-custom { -webkit-appearance: none; -moz-appearance: none; } .select-wrapper.select-wrapper--full { width: 100%; } .select-wrapper { position: relative; } .select-wrapper:before { content: '\25BE'; position: absolute; right: 1px; top: 1px; bottom: 1px; width: 52px; height: 52px; font-size: 14px; line-height: 54px; pointer-events: none; color: #4ba0e8; text-align: center; } .select-wrapper select { padding-right: 40px; width: 100%; background-color: #fff; color: #2b2b2b; } .select-wrapper--sm:before { width: 40px; height: 40px; line-height: 42px; } .select-wrapper.select-time { width: 110px; display: inline-block; } select { -moz-appearance: none; -webkit-appearance: none; } /*for IE10*/ select::-ms-expand { display: none; } .contact-form { margin-bottom: 15px; margin-top: 0; } label { font-size: 16px; line-height: 24px; font-weight: 400; margin-bottom: 5px; color: #000; } form label.error { display: block; color: #ff0000; font-size: 13px !important; opacity: 1 !important; margin-top: -18px; } form.contact-form label.error { margin-top: -5px; } form.contact-form textarea + label.error { margin-top: -12px; } .successform, .errorform { display: none; min-height: 50px; } .successform, .errorform { margin-top: 15px; } .successform p, .errorform p { margin-bottom: 0 !important; } .successform { color: #4ba0e8; } .errorform { color: #c0392b; } .form-table input::-webkit-input-placeholder { color: #000; } .form-table input::-moz-placeholder { color: #000; } .form-table input:-ms-input-placeholder { color: #000; } .form-table input:-moz-placeholder { color: #000; } @media (min-width: 992px) { .form-table { display: table; width: 100%; table-layout: fixed; padding-top: 5px; } .form-table .form-group-cell { display: table-cell; vertical-align: top; padding: 0 10px; } .form-table .form-group-cell.sm { width: 125px; } .form-table .form-group-cell.action { width: 190px; } .form-table .form-group-cell .btn { height: 55px; } } @media (min-width: 768px) and (max-width: 991px) { .form-table .form-group-cell { display: inline-block; vertical-align: top; padding: 0 10px; width: 50%; margin-right: -4px; } .form-table .form-group-cell.sm { width: 125px; } .form-table .form-group-cell.action { width: 190px; } .form-table .form-group-cell .btn { height: 55px; } } @media (max-width: 767px) { .form-table { max-width: 460px; margin: 0 auto; } } .label-box-wrap { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; width: 100%; } @media (max-width: 600px) { .label-box-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .label-box-wrap > * { flex: 1; margin: 0 10px; } @media (max-width: 600px) { .label-box-wrap > * { min-width: 150px; margin: 10px !important; } } .label-box-wrap > *:first-child { margin-left: 0; } .label-box-wrap > *:last-child { margin-right: 0; } .label-box-wrap input[type=radio] { position: absolute; left: -9999px; } .label-box-wrap input[type=radio] + label { height: 86px; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; align-content: center; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); text-align: center; cursor: pointer; border-radius: 3px; font-size: 15px; line-height: 24px; color: #a7b3bd; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .label-box-wrap input[type=radio] + label b { display: block; color: #677d8f; font-weight: 600; } .label-box-wrap input[type=radio]:checked + label { background-color: #4ba0e8; } .label-box-wrap input[type=radio]:checked + label, .label-box-wrap input[type=radio]:checked + label b { color: #fff; } .order-form-box { border: 1px solid #e6e9ec; padding: 26px 33px 35px; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) { .order-form-box { padding: 33px 20px; } } .order-form-box .input-custom { margin-bottom: 18px; } .order-form-box h3 { margin-bottom: 7px; } .order-form-box h6 { margin-bottom: 0; } .order-form-box h6 + input, .order-form-box h6 + .select-wrapper { margin-top: 15px; } .order-form-box p { margin-bottom: 15px; } .order-form-box .divider-line { position: relative; margin-left: -33px; margin-right: -33px; height: 20px; margin-bottom: 30px; width: calc(100% + 66px); } @media (max-width: 1199px) { .order-form-box .divider-line { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); } } .order-form-box .divider { height: 26px; } @media (max-width: 767px) { .order-form-box .text-center-xs { text-align: center; } } .input-comment { font-size: 13px; line-height: 14px; color: #a7b3bd; margin-bottom: 15px; } .qty-count.qty-count--order { height: 42px; background: transparent; position: relative; width: 100%; margin: 0; } .qty-count.qty-count--order .count-add, .qty-count.qty-count--order .count-reduce { position: absolute; z-index: 1; top: 0; left: 1px; height: 42px; width: 40px; text-align: center; line-height: 38px; color: #a8b3bd; font-size: 20px; border-right: 1px solid #e6e9ec; background: transparent; } .qty-count.qty-count--order .count-add { left: auto; right: 1px; border-left: 1px solid #e6e9ec; border-right: 0; line-height: 42px; } .qty-count.qty-count--order .count-input { width: 100%; padding-left: 50px; padding-right: 50px; height: 42px; line-height: 24px; background: #fff; border: 1px solid #d7dbdf; border-radius: 3px; text-align: center; color: #2b2b2b; font-size: 15px; } .qty-count.qty-count--order:only-child { margin-bottom: 18px; } .datetimepicker-wrap .form-control, .timepicker-wrap .form-control { width: 100%; } .datetimepicker-wrap { position: relative; } .datetimepicker-wrap:before { content: "\e90d"; font-family: 'cleaning'; position: absolute; display: block; top: 50%; margin-top: -10px; right: 15px; font-size: 15px; line-height: 20px; color: #4ba0e8; } .timepicker-wrap { position: relative; } .timepicker-wrap:before { content: "\e913"; font-family: 'cleaning'; position: absolute; display: block; top: 50%; margin-top: -10px; right: 15px; font-size: 15px; line-height: 20px; color: #4ba0e8; } .bootstrap-datetimepicker-widget .btn[data-action] { width: auto; background: transparent !important; min-width: 0; } .bootstrap-datetimepicker-widget .btn[data-action]:after, .bootstrap-datetimepicker-widget .btn[data-action]:before { display: none; opacity: 1; } .bootstrap-datetimepicker-widget .btn[data-action].btn-primary { border: 0; background-color: #4ba0e8 !important; color: #ffffff; } .bootstrap-datetimepicker-widget table td span { display: block; opacity: 1; } .newsletter-input-row { position: relative; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .newsletter-input-row input { height: 42px; border: 0; padding-right: 45px; } .newsletter-input-row button { border: 0; background-color: transparent; position: absolute; right: 0; height: 100%; padding: 0 15px; color: #4ba0e8; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .newsletter-input-row button [class*='icon'] { position: relative; top: 2px; } .newsletter-input-row button:hover { color: #000; } .calculate-form .textarea-custom { min-height: 167px; } .form-wrapper-grey { padding: 35px 26px 35px; background-color: #f9f9fa; margin-bottom: 30px; } @media (max-width: 1199px) { .form-wrapper-grey { padding: 20px 16px 20px; } } .form-wrapper-grey .label { display: block; padding: 0; margin: 0 0 13px; font-size: 16px; line-height: 24px; font-weight: 400; color: #899198; text-align: left; white-space: normal; } @media (max-width: 1199px) { .form-wrapper-grey .label { font-size: 14px; } } .slider-with-input { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .slider-with-input .rslider { width: calc(100% - 140px); margin-right: 25px; margin-bottom: 0; } .slider-with-input input[type='text'] { margin-left: auto; width: 115px; border: 0; padding: 5px 10px; font-size: 13px; } /*range slider*/ .noUi-horizontal { height: 11px; } .noUi-horizontal .noUi-handle { width: 27px; height: 27px; left: -6.5px; top: -8.5px; border: 7px solid #f5f6f7; box-shadow: 0 0 0 2px #fff; background: #4ba0e8; border-radius: 50%; cursor: pointer; outline: 0 !important; } .noUi-horizontal .noUi-tooltip { top: 30px; } .noUi-tooltip { display: block; width: 57px; height: 37px; padding: 0; position: absolute; font-size: 15px; line-height: 32px; border: 2px solid #4ba0e8; border-radius: 0; background: #fff; color: #899198; text-align: center; pointer-events: none; } .noUi-tooltip:after, .noUi-tooltip:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .noUi-tooltip:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 5px; margin-left: -5px; } .noUi-tooltip:before { border-color: rgba(102, 172, 60, 0); border-bottom-color: #4ba0e8; border-width: 8px; margin-left: -8px; } .noUi-target { border-radius: 0; border: 0; box-shadow: none; background-color: transparent; margin-bottom: 24px; } .noUi-origin { border-radius: 0; box-shadow: none; } .noUi-connects { background-color: #fff; border-radius: 5.5px; } .noUi-connect { background: #4ba0e8; border: 0; border-radius: 0; height: 11px; -webkit-transition: background 450ms; -moz-transition: background 450ms; -ms-transition: background 450ms; -o-transition: background 450ms; } .noUi-handle:before, .noUi-handle:after { display: none; border: 0; border-radius: 0; -webkit-transition: background 450ms; transition: background 450ms; } .range { margin-top: 35px; } .range p { font-size: 15px; line-height: 20px; margin-bottom: 10px; } .switch { display: inline-block; height: 42px; position: relative; width: 81px; margin: 3px 0 3px; } @media (max-width: 1199px) { .switch { height: 37px; margin: 0; } } .switch input { display: none; } .switchslider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .switchslider:before { background-color: #fff; bottom: 6px; content: ""; height: 30px; left: 6px; position: absolute; transition: .4s; width: 30px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) { .switchslider:before { width: 26px; height: 26px; } } input:checked + .switchslider { background-color: #4ba0e8; } input:checked + .switchslider:before { transform: translateX(37px); } @media (max-width: 1199px) { input:checked + .switchslider:before { transform: translateX(42px); } } .switchslider.round { border-radius: 42px; } .switchslider.round:before { border-radius: 50%; } .button-group-pills .btn-checkbox { height: 44px; padding: 10px 25px; margin: 0 10px 5px 0; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Roboto', sans-serif; text-transform: none; border-radius: 23.5px; } .button-group-pills .btn-checkbox, .button-group-pills .btn-checkbox.focus { border-color: #4ba0e8; background-color: #fff; color: #899198; } .button-group-pills .btn-checkbox.active { border-color: #4ba0e8; background-color: #4ba0e8; color: #fff; box-shadow: none; } .button-group-pills .btn-checkbox:hover { border-color: #f9f9f9; background-color: #4ba0e8; color: #ffffff; } @media (max-width: 1199px) { .button-group-pills .btn-checkbox { height: 37px; padding: 10px 18px; font-size: 14px; line-height: 17px; } } @media (max-width: 991px) { .button-group-pills .btn-checkbox { margin: 0 10px 10px 0; } } .button-group-pills .btn-checkbox span { display: block; } .control-group { display: inline-block; vertical-align: top; background: #fff; text-align: left; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); padding: 30px; width: 200px; height: 210px; margin: 10px; } label.control { display: block; position: relative; padding-left: 30px; margin-bottom: 15px; margin-top: 3px; cursor: pointer; font-size: 18px; } label.control input { position: absolute; z-index: -1; opacity: 0; } .control-indicator { position: absolute; top: 2px; left: 0; height: 18px; width: 18px; background: #fff; border-radius: 2px; border: 1px solid #edeff1; } .control-radio .control-indicator { border-radius: 50%; } label.control:hover input ~ .control-indicator, label.control input:focus ~ .control-indicator { background: #fff; } label.control input:checked ~ .control-indicator { background: #fff; } label.control:hover input:not([disabled]):checked ~ .control-indicator, label.control input:checked:focus ~ .control-indicator { background: #fff; } label.control input:disabled ~ .control-indicator { background: #e6e6e6; opacity: 0.6; pointer-events: none; } .control-indicator:after { content: ''; position: absolute; display: none; } label.control input:checked ~ .control-indicator:after { display: block; } .control-checkbox .control-indicator:after { left: 5px; top: 2px; width: 5px; height: 8px; border: solid #4ba0e8; border-width: 0 1px 1px 0; transform: rotate(45deg); } .control-checkbox input:disabled ~ .control-indicator:after { border-color: #7b7b7b; } .control-radio .control-indicator:after { left: 7px; top: 7px; height: 6px; width: 6px; border-radius: 50%; background: #fff; } .control-radio input:disabled ~ .control-indicator:after { background: #7b7b7b; } /*-------- 1.4 Buttons --------*/ button:focus, .btn:focus, button:active:focus, .btn:active:focus, button.active:focus, .btn.active:focus, button.focus, .btn.focus, button:active.focus, .btn:active.focus, button.active.focus, .btn.active.focus { outline: 0; outline: none; } button:hover, .btn:hover, button:focus, .btn:focus, button.focus, .btn.focus { outline: 0; outline: none; } button:active, .btn:active, button.active, .btn.active { outline: 0; outline: none; } .btn { padding: 11px 30px; font-size: 14px; line-height: 25px; font-weight: 600; font-family: 'Poppins', sans-serif; height: auto; background-color: #4ba0e8; color: #ffffff; border-radius: 23.5px; border: 0; vertical-align: top; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; text-decoration: none; position: relative; overflow: hidden; } @media (max-width: 991px) { .btn { font-size: 12px; } .mobildegizle{display:none;} } @media (max-width: 767px) { .btn { font-size: 12px; line-height: 17px; padding: 5px 10px; } } .btn.focus, .btn:focus { background-color: #4ba0e8; color: #ffffff; } .btn:hover, .btn.active, .btn:active { background: #4ba0e8; color: #ffffff; } .btn:focus { outline: 0; } .btn:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.5); width: 60px; height: 100%; left: 0; top: 0; opacity: .5; filter: blur(30px); transform: translateX(-100px) skewX(-10deg); } .btn:after { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.2); width: 30px; height: 100%; left: 30px; top: 0; opacity: 0; filter: blur(5px); transform: translateX(-100px) skewX(-10deg); } .btn:hover { cursor: pointer; } .btn:hover:before { transform: translateX(300px) skewX(-10deg); opacity: 0.6; transition: .7s; } .btn:hover:after { transform: translateX(300px) skewX(-10deg); opacity: 1; transition: .7s; } .btn span { display: inline-block; vertical-align: middle; } .btn [class*='icon'] { display: inline-block; vertical-align: sub; padding-right: 8px; font-size: 16px; } @media (max-width: 767px) { .btn [class*='icon'] { font-size: 12px; } } .btn.text-left { text-align: left; } .btn.text-right { text-align: right; } .btn-border { background-color: transparent; color: #3d4b57; line-height: 21px; border: 2px solid #4ba0e8; } .btn-sm { padding: 10px 26px; font-size: 17px; line-height: 23px; border-radius: 21px; } .btn-wide { min-width: 264px; } .btn-lg { padding: 15px 35px; font-size: 15px; line-height: 25px; border-radius: 55px; letter-spacing: .05em; } .btn-lg [class*='icon'] { position: relative; top: -2px; padding-right: 10px; font-size: 16px; } @media (max-width: 767px) { .btn-lg [class*='icon'] { padding-right: 8px; font-size: 12px; } } @media (max-width: 991px) { .btn-lg { font-size: 14px; letter-spacing: 0; } } @media (max-width: 767px) { .btn-lg { font-size: 12px; line-height: 17px; padding: 10px 20px; } } .btn-full { width: 100%; } .btn-invert { background: #4ba0e8; } .btn-invert.focus, .btn-invert:focus { background: #4ba0e8; } .btn-invert:hover, .btn-invert.active, .btn-invert:active { background-color: #4ba0e8; } .btn-white, .btn-white.focus, .btn-white:focus { background: #fff; color: #425d74; } .btn-white:hover, .btn-white.active, .btn-white:active { background-color: #4ba0e8; color: #fff; } .btn-white:hover [class*='icon'], .btn-white.active [class*='icon'], .btn-white:active [class*='icon'] { color: #fff; } .btn-white [class*='icon'] { color: #4ba0e8; } .btn-inline .btn { margin: 0 24px 10px 0; } .text-center .btn-inline .btn { margin: 0 12px 10px; } @-webkit-keyframes ring { 0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 2% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 4% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 6% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 8% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 10% { -webkit-transform: rotate(12deg); transform: rotate(12deg); } 12% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes ring { 0% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 2% { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 4% { -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); } 6% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 8% { -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg); } 10% { -webkit-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg); } 12% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .btn:hover > .icon-bell { animation: ring 10s ease .1s; transform-origin: top center; transform-origin-z: initial; } /*-------- 1.5 Social Icons --------*/ .social-links ul { margin: 0; padding: 0; } .social-links ul li { display: inline-block; margin: 0 7px 5px 0; list-style: none; text-align: center; } @media screen and (max-width: 767px) { .social-links ul li { margin: 0 4px 3px 0; } } .social-links ul li:last-child { margin-right: 0; } .social-links ul li a { font-size: 45px; color: #4ba0e8; text-decoration: none; cursor: pointer; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } @media screen and (max-width: 767px) { .social-links ul li a { font-size: 36px; } } .social-links ul li a:hover { color: #4ba0e8; } .link a { font-size: 34px; line-height: 1em; color: #4ba0e8; text-decoration: none; padding: 0 4px 0 0; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } .link a:hover { color: #4ba0e8; } a.icon-facebook-logo:hover { color: #3b5998 !important; } a.icon-twitter-logo:hover { color: #55acee !important; } a.icon-google-plus-logo:hover { color: #dd4b39 !important; } a.icon-linkedin-logo:hover { color: #4875B4 !important; } a.icon-pinterest-logo:hover { color: #C92228 !important; } a.icon-instagram-logo:hover { color: #4E433C !important; } /*-------- 1.6 Tags --------*/ .tag { display: block; color: #677d8f; font-size: 15px; line-height: 24px; padding: 5px 10px; text-decoration: none; border: 1px solid #b7dfa8; border-radius: 3px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .tag:hover { background-color: #4ba0e8; border-color: #4ba0e8; color: #fff; } .tags-list { position: relative; list-style: none; margin: 30px 0 0; padding: 0; } .tags-list li { display: inline-block; padding: 0; margin-bottom: 7px; margin-right: 5px; } .tags-list li a { display: block; color: #677d8f; font-size: 15px; line-height: 24px; padding: 5px 10px; text-decoration: none; border: 1px solid #b7dfa8; border-radius: 3px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; } .tags-list li a:hover { background-color: #4ba0e8; border-color: #4ba0e8; color: #fff; } /*-------- 1.7 Nav Pills --------*/ .nav-tabs { border-bottom: 1px solid #d8d8d8; } .nav-tabs > li { margin: 0 20px; } @media (max-width: 479px) { .nav-tabs > li { width: auto; } } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-tabs > li > a { padding-left: 0; padding-right: 0; font-size: 24px; line-height: 24px; font-weight: 600; border: none; color: #3d4c58; text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4ba0e8 !important; background: transparent; } .nav-tabs > li > a::after { content: ""; background: #4ba0e8; height: 4px; position: absolute; width: 100%; left: 0px; bottom: -1px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { background: #4ba0e8 none repeat scroll 0% 0%; color: #fff; } .tab-pane { padding: 5px 0 0; } .tab-content { padding: 20px; } @media (max-width: 479px) { .tab-content { padding: 0; } } .tab-content .marker-list > li:after { color: #4ba0e8; } .tab-content.tab-content-nopad { padding: 0; } .tab-services .tab-content { position: relative; } .tab-services .tab-content > .tab-pane { display: block; position: absolute; width: calc(100% + 30px); top: -10000px; } .tab-services .tab-content > .active { position: relative; top: 0; } .nav-pills { margin: 70px 0 47px; text-align: center; } .nav-pills > li { display: inline-block; float: none; margin: 0 3px 10px 3px; } .nav-pills > li > a { display: block; border-radius: 0; padding: 0 18px; min-width: 50px; border: 1px solid #eaeaea; font-size: 14px; line-height: 53px; color: #383838; text-decoration: none; text-align: center; } .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { background: #4ba0e8; border-color: #4ba0e8; color: #383838; } .nav-tabs.nav-tabs--sm { margin-left: -24px; margin-bottom: 25px; border-bottom: 0; } @media (max-width: 991px) { .nav-tabs.nav-tabs--sm { margin-left: -18px; margin-bottom: 5px; } } @media (max-width: 479px) { .nav-tabs.nav-tabs--sm { margin-left: -12px; } } .nav-tabs.nav-tabs--sm > li.active > a, .nav-tabs.nav-tabs--sm > li.active > a:focus, .nav-tabs.nav-tabs--sm > li.active > a:hover { position: relative; color: #4ba0e8 !important; background-color: transparent; } .nav-tabs.nav-tabs--sm > li.active > a:after, .nav-tabs.nav-tabs--sm > li.active > a:focus:after, .nav-tabs.nav-tabs--sm > li.active > a:hover:after { transform: scale(1); } .nav-tabs.nav-tabs--sm > li { margin: 0; } @media (max-width: 479px) { .nav-tabs.nav-tabs--sm > li { width: auto; } } .nav-tabs.nav-tabs--sm > li > a { font-size: 20px; line-height: 24px; font-family: 'Poppins', sans-serif; padding: 0 24px; color: #3d4c58; } @media (max-width: 991px) { .nav-tabs.nav-tabs--sm > li > a { font-size: 18px; padding: 0 16px; } } @media (max-width: 479px) { .nav-tabs.nav-tabs--sm > li > a { font-size: 16px; padding: 0 12px; } } .nav-tabs.nav-tabs--sm > li > a:hover { color: #4ba0e8 !important; } .nav-tabs.nav-tabs--sm > li > a:after { left: auto; right: -2px; top: 6px; width: 1px; height: 14px; background-color: #3d4c58; transform: scale(1); } @media (max-width: 991px) { .nav-tabs.nav-tabs--sm > li > a:after { top: 4px; } } @media (max-width: 479px) { .nav-tabs.nav-tabs--sm > li > a:after { top: 3px; } } .nav-tabs.nav-tabs--sm > li:last-child > a:after { display: none; } .nav-tabs--rounded { position: relative; overflow: hidden; z-index: 1; margin: 16px auto 30px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: -ms-inline-flex; display: inline-flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; text-align: center; border: 1px solid #edeff1; border-radius: 55px; height: 55px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-bottom: 0; } @media (max-width: 479px) { .nav-tabs--rounded { margin: 10px auto 15px; border-radius: 0; height: auto; flex-wrap: wrap; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0; } } .nav-tabs--rounded > li.active > a, .nav-tabs--rounded > li.active > a:focus, .nav-tabs--rounded > li.active > a:hover { position: relative; color: #fff !important; background-color: #4ba0e8; } .nav-tabs--rounded > li.active > a:after, .nav-tabs--rounded > li.active > a:focus:after, .nav-tabs--rounded > li.active > a:hover:after { transform: scale(1); } .nav-tabs.nav-tabs--rounded > li { margin: 0; } .nav-tabs.nav-tabs--rounded > li > a { margin: 0; font-size: 15px; line-height: 55px; font-family: 'Poppins', sans-serif; padding: 0 28px; color: #3d4c58; border-radius: 0; white-space: nowrap; } @media (max-width: 767px) { .nav-tabs.nav-tabs--rounded > li > a { font-size: 12px; padding: 0 18px; } } @media (max-width: 479px) { .nav-tabs.nav-tabs--rounded > li > a { line-height: 40px; border-radius: 5px; padding: 0 11px; } } .nav-tabs.nav-tabs--rounded > li > a:hover { color: #3d4c58 !important; background-color: #f1f2f3; } .nav-tabs.nav-tabs--rounded > li > a:after { position: absolute; left: auto; right: 0; top: 0; width: 1px; height: 55px; background-color: #edeff1; transform: scale(1); } @media (max-width: 479px) { .nav-tabs.nav-tabs--rounded > li > a:after { display: none; } } .nav-tabs.nav-tabs--rounded > li:last-child > a:after { display: none; } .tab-content > .tab-pane:not(.active) { display: block; height: 0; overflow: hidden; padding: 0; } /*---------------------------------------*/ /*-------- 2. Main Structure --------*/ /*---------------------------------------*/ /*-------- 2.1 Layout Styles --------*/ body { overflow-x: hidden; min-width: 300px; } .block { margin-bottom: 100px; } @media (max-width: 1199px) { .block { margin-bottom: 75px; } } @media (max-width: 767px) { .block { margin-bottom: 50px; } } .block.bottom-null { margin-bottom: 0; } .block.m-bottom-30 { margin-bottom: 30px; } @media (max-width: 991px) { .block.m-bottom-30 { margin-bottom: 20px; } } .block.m-bottom-45 { margin-bottom: 45px; } @media (max-width: 991px) { .block.m-bottom-45 { margin-bottom: 20px; } } [data-bg] { background-size: 100%; background-position: center; background-repeat: no-repeat; } [data-bg].bg-cover { background-size: cover; align-self: normal; } @media (max-width: 1199px) { [data-bg].hide-bg-md { background-image: none !important; } } @media (max-width: 991px) { [data-bg].hide-bg-sm { background-image: none !important; } } @media (max-width: 767px) { [data-bg].hide-bg-xs { background-image: none !important; } .bg-grey-xs { background-color: #f9f9fa; } } .block.bg-bottom { background-position: bottom; } .block.bg-top { background-position: top; } .block.bg-cover { background-size: cover; position: relative; } .zindex-1 { position: relative; z-index: 1; } @media (max-width: 767px) { .block.bg-mobile-left, .block.bg-cover.bg-mobile-left { background-size: auto 100%; background-position: left center; } .block.bg-mobile-right, .block.bg-cover.bg-mobile-right { background-size: auto 100%; background-position: 67% center; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-20 > .container { padding-top: 20px; padding-bottom: 20px; } .block:not(.fullwidth):not(.fullwidth-bg).inset-35 > .container { padding-top: 35px; padding-bottom: 35px; } @media (max-width: 479px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-35 > .container { padding-top: 20px; padding-bottom: 20px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-50 > .container { padding-top: 50px; padding-bottom: 50px; } @media (max-width: 767px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-50 > .container { padding-top: 30px; padding-bottom: 30px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-70 > .container { padding-top: 70px; padding-bottom: 70px; } @media (max-width: 767px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-70 > .container { padding-top: 40px; padding-bottom: 40px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-85 > .container { padding-top: 85px; padding-bottom: 85px; } @media (max-width: 1199px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-85 > .container { padding-top: 70px; padding-bottom: 70px; } } @media (max-width: 991px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-85 > .container { padding-top: 50px; padding-bottom: 50px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-1 > .container { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 1199px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-1 > .container { padding-top: 85px; padding-bottom: 80px; } } @media (max-width: 991px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-1 > .container { padding-top: 65px; padding-bottom: 80px; } } @media (max-width: 767px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-1 > .container { padding-top: 50px; padding-bottom: 50px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-2 > .container { padding-top: 90px; padding-bottom: 100px; } @media (max-width: 1199px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-2 > .container { padding-top: 80px; padding-bottom: 70px; } } @media (max-width: 991px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-2 > .container { padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 767px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-2 > .container { padding-top: 50px; padding-bottom: 50px; } } .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-3 > .container { padding-top: 100px; padding-bottom: 80px; overflow: hidden; } @media (max-width: 1199px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-3 > .container { padding-top: 80px; padding-bottom: 70px; } } @media (max-width: 991px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-3 > .container { padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 767px) { .block:not(.fullwidth):not(.fullwidth-bg).inset-lg-3 > .container { padding-top: 50px; padding-bottom: 50px; } } .block.fullwidth.inset-20, .block.fullwidth-bg.inset-20 { padding: 20px 0; } .block.fullwidth.inset-35, .block.fullwidth-bg.inset-35 { padding: 35px 0; } .block.fullwidth.inset-50, .block.fullwidth-bg.inset-50 { padding: 50px 0; } @media (max-width: 767px) { .block.fullwidth.inset-50, .block.fullwidth-bg.inset-50 { padding: 30px 0; } } .block.fullwidth.inset-70, .block.fullwidth-bg.inset-70 { padding: 70px 0; } @media (max-width: 767px) { .block.fullwidth.inset-70, .block.fullwidth-bg.inset-70 { padding: 40px 0; } } .block.fullwidth.inset-85, .block.fullwidth-bg.inset-85 { padding: 85px 0; } @media (max-width: 767px) { .block.fullwidth.inset-85, .block.fullwidth-bg.inset-85 { padding: 50px 0; } } .block.fullwidth.inset-lg-1, .block.fullwidth-bg.inset-lg-1 { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 1199px) { .block.fullwidth.inset-lg-1, .block.fullwidth-bg.inset-lg-1 { padding-top: 85px; padding-bottom: 80px; } } @media (max-width: 991px) { .block.fullwidth.inset-lg-1, .block.fullwidth-bg.inset-lg-1 { padding-top: 65px; padding-bottom: 80px; } } @media (max-width: 767px) { .block.fullwidth.inset-lg-1, .block.fullwidth-bg.inset-lg-1 { padding-top: 50px; padding-bottom: 50px; } } .block.fullwidth.inset-lg-2, .block.fullwidth-bg.inset-lg-2 { padding-top: 90px; padding-bottom: 100px; } @media (max-width: 1199px) { .block.fullwidth.inset-lg-2, .block.fullwidth-bg.inset-lg-2 { padding-top: 80px; padding-bottom: 70px; } } @media (max-width: 991px) { .block.fullwidth.inset-lg-2, .block.fullwidth-bg.inset-lg-2 { padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 767px) { .block.fullwidth.inset-lg-2, .block.fullwidth-bg.inset-lg-2 { padding-top: 50px; padding-bottom: 50px; } } .block.fullwidth.inset-lg-3, .block.fullwidth-bg.inset-lg-3 { padding-top: 100px; padding-bottom: 80px; overflow: hidden; } @media (max-width: 1199px) { .block.fullwidth.inset-lg-3, .block.fullwidth-bg.inset-lg-3 { padding-top: 80px; padding-bottom: 70px; } } @media (max-width: 991px) { .block.fullwidth.inset-lg-3, .block.fullwidth-bg.inset-lg-3 { padding-top: 60px; padding-bottom: 60px; } } @media (max-width: 767px) { .block.fullwidth.inset-lg-3, .block.fullwidth-bg.inset-lg-3 { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 1199px) { .pb-md-0 { padding-bottom: 0 !important; } } @media (max-width: 991px) { .pb-sm-0 { padding-bottom: 0 !important; } } @media (max-width: 767px) { .pb-xs-0 { padding-bottom: 0 !important; } } .block-bg-grey { background-color: #f5f6f7; } .block-bg-light-grey { background-color: #f3f4f4; } .block.bg-gradient:not(.fullwidth):not(.fullwidth-bg) .container { background-image: linear-gradient(90deg, #46c6cf, #47a8e3); } .block.bg-gradient, .block.fullwidth-bg.bg-gradient { background-image: linear-gradient(90deg, #46c6cf, #47a8e3); } .block.bg-gradient-1:not(.fullwidth):not(.fullwidth-bg) .container { background-image: linear-gradient(90deg, #46c6cf, #62c699); } .block.bg-gradient-1, .block.fullwidth-bg.bg-gradient-1 { background-image: linear-gradient(90deg, #46c6cf, #62c699); } .block.fullwidth > .container { width: 100%; } .block.fullwidth.no-pad > .container-fluid { padding-left: 0; padding-right: 0; } @media (max-width: 991px) { .block.fullwidth-sm > .container { width: 100%; } .block.fullwidth-sm.no-pad > .container { padding-left: 0; padding-right: 0; } } .no-gutter { margin: 0; } .no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } body.fixed { overflow: hidden; width: 100%; } .page-main:before, .page-main:after { content: ''; display: table; } @media (min-width: 1200px) { .container { width: 1200px; } .col-md-9.aside { padding-right: 25px; } } @media (max-width: 991px) { .aside + .aside { margin-top: 50px; } } @media (max-width: 479px) { .aside + .aside { margin-top: 30px; } } .block-1 { min-height: 630px; } @media (max-width: 991px) { .block-1 { min-height: 660px; } } .img-right-wrap { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; position: absolute; z-index: 0; right: 0; bottom: 0; height: 100%; } @media (max-width: 1800px) { .img-right-wrap { right: -5%; } } @media (max-width: 1500px) { .img-right-wrap { right: -6%; } } @media (max-width: 1199px) { .img-right-wrap { right: -6%; } } @media (max-width: 991px) { .img-right-wrap { right: -7%; } } @media (max-width: 767px) { .img-right-wrap { position: static; } } .img-right-wrap img { height: 100%; max-height: 685px; } @media (max-width: 991px) { .img-right-wrap img { max-height: 530px; } } @media (max-width: 767px) { .img-right-wrap img { height: auto; max-height: none; max-width: 100%; margin-top: -20px; } } .img-right-wrap1 { display: none; } @media (max-width: 767px) { .img-right-wrap1 { display: block; margin-top: 20px; } .img-right-wrap1 img { float: right; } } @media (max-width: 991px) { .img-left-wrap img { height: 510px; width: auto; max-width: none; position: relative; margin-left: -66%; } } @media (max-width: 767px) { .img-left-wrap img { position: static; height: auto; max-height: none; max-width: 100%; margin: 30px 0 0 0; } } @media (max-width: 991px) { .img-left-wrap1 img { height: 460px; width: auto; max-width: none; position: relative; margin-top: 20px; margin-left: -45%; } } @media (max-width: 767px) { .img-left-wrap1 img { position: static; height: auto; max-height: none; max-width: 100%; margin: 30px 0 0 0; } } @media (max-width: 767px) { .row-revert-xs { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } /*-------- 2.2 Header --------*/ .page-header { position: relative; width: 100%; z-index: 1000; padding: 0; margin: 0; border: 0; color: #425d74; } .page-header-menu { border-top: 3px solid #4ba0e8; } .page-header-top { padding: 15px 0 15px; color: #425d74; position: relative; } @media (min-width: 768px) { .page-header-top > .container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-align-items: center; align-items: center; } } .page-header-top > .container > *:last-child { margin-left: auto; margin-right: 0; } .page-header-top > .container > *:first-child { margin-right: auto; margin-left: 0; } .page-header-top .logo { min-width: 272px; position: relative; } .page-header-top .logo .shine { position: absolute; top: -30%; left: 6%; pointer-events: none; } @media (max-width: 991px) { .page-header-top .logo { max-width: 160px; min-width: 160px; } } @media (max-width: 991px) { .page-header-top { padding: 5px 0; } .page-header-top:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 49px; background-color: #4ba0e8; } .page-header-top .shine { display: none; } } .page-header-top-middle { flex: 1; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-align-items: center; align-items: center; position: relative; margin-right: 25px; } @media (max-width: 991px) { .page-header-top-middle { display: none; } } .page-header-top-middle > * { margin: 0 22px; } @media (max-width: 991px) { .page-header-top-middle > * { margin: 5px 10px; } } @media (max-width: 767px) { .page-header-top-middle > * { margin: 5px 0; } } .page-header .logo img { max-width: 100%; } @media (min-width: 1200px) { .page-header .logo img { height: 109px; } } @media (max-width: 991px) { .page-header .logo { min-width: 100%; margin-top: 60px; margin-bottom: 10px; padding-right: 65px; } } @media (max-width: 767px) { .page-header .logo img { max-width: 145px; min-width: 145px; } } .page-header-slogan { font-size: 16px; line-height: 20px; } .page-header-shedule { font-size: 16px; line-height: 20px; padding-left: 35px; position: relative; } .page-header-shedule .icon { position: absolute; left: 0; top: 0; font-size: 24px; color: #4ba0e8; } .page-header-phone { font-size: 16px; line-height: 20px; } .page-header-phone span.phone-number { display: block; font-size: 26px; line-height: 26px; white-space: nowrap; } @media (max-width: 991px) { .page-header-phone span.phone-number { font-size: 20px; } } @media (max-width: 1199px) { .page-header .quote-button-wrap .btn { padding-left: 20px; padding-right: 20px; } } @media (max-width: 991px) { .page-header .quote-button-wrap { position: absolute; top: 5px; right: 10px; } .page-header .quote-button-wrap .btn { padding: 7px 15px; font-size: 12px; line-height: 24px; } .page-header .quote-button-wrap .btn, .page-header .quote-button-wrap .btn.focus, .page-header .quote-button-wrap .btn:focus { background: #fff; color: #899198; } .page-header .quote-button-wrap .btn:hover, .page-header .quote-button-wrap .btn.active, .page-header .quote-button-wrap .btn:active { background: #fff; color: #899198; } .page-header .quote-button-wrap .btn .icon { font-size: 15px; color: #4ba0e8; padding-right: 7px; } } .page-header .header-cart { position: relative; display: inline-block; vertical-align: top; padding-left: 12px; margin-top: 10px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .page-header .header-cart a.icon { font-size: 34px; color: #425d74; text-decoration: none; } .page-header .header-cart .badge { width: 18px; height: 18px; line-height: 12px; font-size: 11px; position: absolute; right: -6px; top: -2px; background-color: #4ba0e8; color: #fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .page-header .header-cart:hover a.icon, .page-header .header-cart.opened a.icon { color: #4ba0e8; } .page-header .header-cart:hover .badge, .page-header .header-cart.opened .badge { background-color: #4ba0e8; } @media (max-width: 767px) { .page-header .header-cart { position: absolute; right: 70px; top: 50%; margin-top: 8px; } } .page-header .header-cart-dropdown { position: absolute; z-index: 1000; right: 0; top: -5000px; width: 350px; padding: 35px 32px 25px; background: #fff; display: block; opacity: 0; visibility: hidden; -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2); transform: translateY(20px); text-align: left; } @media (max-width: 479px) { .page-header .header-cart-dropdown { width: 270px; padding: 15px 15px; } } .page-header .header-cart-dropdown .header-cart-total { font-size: 22px; line-height: 30px; font-weight: 600; border-top: 1px solid #e8e8e8; padding: 20px 0; overflow: hidden; } .page-header .header-cart.opened .header-cart-dropdown { transform: translateY(0); -webkit-transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, -webkit-transform 0.4s ease 0s; -moz-transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, -webkit-transform 0.4s ease 0s; -ms-transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, -webkit-transform 0.4s ease 0s; -o-transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, -webkit-transform 0.4s ease 0s; opacity: 1; visibility: visible; top: 100%; margin-top: 13px; } @media (max-width: 767px) { .page-header .header-cart.opened .header-cart-dropdown { margin-top: 0; } } body:not(.page-index) .page-header { -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05); } @media (min-width: 768px) { .page-header .menu { display: block; padding: 0; margin: 0; height: 58px; } .page-header .menu > li { display: inline-block; position: relative; z-index: 100; margin-right: -4px; } .page-header .menu > li > a { font-size: 16px; line-height: 28px; font-weight: 600; text-decoration: none; padding: 15px 37px; display: block; color: #3d4c58; text-transform: uppercase; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .page-header .menu > li > a .arrow { display: none; } .page-header .menu > li:first-child > a { padding-left: 25px; } .page-header .menu li a:hover, .page-header .menu li:hover > a, .page-header .menu li.active > a { color: #4ba0e8; } .page-header .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 260px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0, 20px); -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; } .page-header .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; border-bottom: 1px solid #edeff1; } .page-header .menu ul li a { font-size: 14px; line-height: 30px; padding: 10px 32px; font-weight: normal; display: block; color: #4b5b68; text-transform: uppercase; text-decoration: none; } .page-header .menu ul li a:before { display: inline-block; vertical-align: middle; font-family: 'cleaning'; content: '\e909'; font-size: 10px; position: relative; top: -1px; width: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .page-header .menu ul li a:hover, .page-header .menu ul li:hover > a { color: #4ba0e8; } .page-header .menu ul li a:hover:before, .page-header .menu ul li:hover > a:before { width: 16px; opacity: 1; } .page-header .menu li:hover > ul { visibility: visible; opacity: 1; -webkit-transition: all 0.2s ease-out 0.3s; -moz-transition: all 0.2s ease-out 0.3s; -ms-transition: all 0.2s ease-out 0.3s; -o-transition: all 0.2s ease-out 0.3s; transform: translate(0, 0); } .page-header .menu ul ul { left: 355px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px, 20px); transition: all 0.2s ease-out; } .page-header .menu li > ul ul:hover { visibility: visible; opacity: 1; transform: translate(0, 0); } } @media (min-width: 768px) and (max-width: 1199px) { .page-header .menu > li:first-child > a { padding-left: 11px; } } .menu-toggle { display: none; position: absolute; right: 20px; top: 50%; margin-top: 12px; text-decoration: none; font-size: 22px; line-height: 28px; } .menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: #4ba0e8; } .menu-toggle i.icon-cancel { font-size: 18px; margin-top: 4px; } .menu-toggle > *:last-child { display: none; } .menu-toggle.opened > *:last-child { display: block; } .menu-toggle.opened > *:first-child { display: none; } @media (max-width: 1199px) { .page-header .menu > li > a { padding: 15px 21px; } } @media (max-width: 991px) { .page-header:not(.page-header--style2) .page-header-top > .container { width: 100%; } .page-header:not(.page-header--style2) .page-header-menu > .container { width: 100%; padding: 0 15px; } .page-header .menu-toggle { display: block; } .page-header .menu { display: none; margin: 0; padding: 0; } .page-header .menu ul { margin: 0; padding: 0; display: none; border-top: 1px solid #edeff1; background: #f8f8f8; } .page-header .menu ul li a { font-size: 14px; font-weight: 400; } .page-header .menu li { display: block; width: 100%; background: none; margin: 0; padding: 0; border-bottom: 1px solid #edeff1; } .page-header .menu li:last-child { border-bottom: 0; } .page-header .menu li a { font-size: 15px; line-height: 30px; padding: 10px 32px; font-weight: normal; display: block; color: #4b5b68; font-weight: 600; text-transform: uppercase; text-decoration: none; position: relative; } .page-header .menu li a .arrow { position: absolute; right: 0; top: 0; height: 100%; width: 50px; text-align: center; cursor: pointer; } .page-header .menu li a .arrow:before { display: block; font-family: 'cleaning'; content: '\e909'; font-size: 12px; line-height: 50px; position: relative; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .page-header .menu li a.opened { color: #4ba0e8; } .page-header .menu li a.opened .arrow:before { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .page-header-menu { position: absolute; width: 100%; background-color: #fff; border-top: 0; -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); overflow-y: auto; height: 0; border-top: 1px solid #edeff1; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .page-header-menu > .container { padding: 0; } } body.is-loaded .page-header .menu, body.is-loaded .page-header .logo img { height: auto; } .page-header.is-sticky { position: fixed !important; width: 100%; background: rgba(255, 255, 255, 0.9); border-bottom: 0 !important; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); } @media (min-width: 992px) { .page-header.is-sticky .page-header-top { display: none; } } @media (max-width: 991px) { .page-header.is-sticky { background: #ffffff; } .page-header.is-sticky .logo { margin: 0; } .page-header.is-sticky .page-header-top:before, .page-header.is-sticky .quote-button-wrap, .page-header.is-sticky .page-header-mobile-info, .page-header.is-sticky .page-header-mobile-info-toggle { display: none; } .page-header.is-sticky .menu-toggle { top: 0; } } .page-header.is-sticky .page-header-menu { border-top: 0; } .page-header.is-sticky .header-cart { display: none; } @media (min-width: 768px) { body:not(.home) header.page-header.is-sticky #slidemenu { margin-bottom: 0; } } @media (min-width: 992px) { .page-header-mobile-info, .page-header-mobile-info-toggle { display: none; } } @media (max-width: 991px) { .page-header-mobile-info-toggle { position: absolute; z-index: 1; top: 0; left: 20px; width: 20px; height: 20px; text-align: center; color: #fff; cursor: pointer; } .page-header-mobile-info-toggle:before { display: block; font-family: 'cleaning'; content: '\e90a'; font-size: 14px; line-height: 50px; position: relative; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); } .page-header-mobile-info-toggle.opened:before { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .page-header-mobile-info-content { display: none; padding: 15px; background-color: #fff; } .page-header-mobile-info-content .social-list { margin-top: 15px; margin-bottom: 0; } .page-header-mobile-info-content .social-list a { font-size: 16px; line-height: 20px; } .page-header-mobile-info-content.opened { display: block; } } .page-header-info { font-size: 15px; line-height: 24px; padding-left: 28px; position: relative; color: #677d8f; } .page-header-info:not(:first-child) { margin-top: 10px; } .page-header-info a { color: #677d8f; } .page-header-info .icon { position: absolute; left: 0; top: 4px; font-size: 16px; color: #4ba0e8; } .page-header-info .icon.icon-speech-bubble { top: 6px; } body.page-shop .page-header-top-middle > * { margin: 0 12px; } body.page-shop .page-header-top-middle { margin-right: 20px; } @media (max-width: 991px) { body.page-shop .page-header-top-middle > * { margin: 0 6px; } body.page-shop .page-header-top-middle { margin-right: 8px; } .page-header .header-cart { padding-left: 8px; } } .page-header.page-header--style2 .page-header-topline { background-color: #f9f9fa; padding: 4px 0; overflow: hidden; } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-topline { height: 34px; padding: 2px 0; } } .page-header.page-header--style2 .page-header-topline .page-header-info:not(:first-child) { margin: 0 0 0 26px; } @media (max-width: 1199px) { .page-header.page-header--style2 .page-header-topline .page-header-info:not(:first-child) { margin-left: 14px; } } .page-header.page-header--style2 .page-header-topline .page-header-info { padding-left: 24px; font-size: 14px; line-height: 25px; color: #899198; } .page-header.page-header--style2 .page-header-topline .page-header-info [class*='icon'] { font-size: 18px; color: #4ba0e8; } @media (max-width: 1199px) { .page-header.page-header--style2 .page-header-topline .page-header-info { font-size: 13px; } } .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn { height: 42px; font-size: 14px; line-height: 22px; padding: 10px 28px; text-transform: none; background-color: #4ba0e8; color: #ffffff; border-radius: 21px; } .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn.focus, .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn:focus { background-color: #4ba0e8; color: #ffffff; } .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn:hover, .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn.active, .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn:active { background: #4ba0e8; color: #ffffff; } .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn [class*='icon'] { font-size: 16px; padding-right: 8px; color: inherit; } @media (max-width: 1199px) { .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn { height: 33px; font-size: 12px; line-height: 23px; padding: 5px 20px; border-radius: 16px; } .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn [class*='icon'] { font-size: 12px; padding-right: 7px; position: relative; top: -1px; } } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-topline .quote-button-wrap .btn { height: 30px; font-size: 12px; line-height: 20px; padding: 5px 20px; } } @media (max-width: 991px) { .page-header.page-header--style2 .page-header-topline .quote-button-wrap { position: static; margin-right: -5px; } } .page-header.page-header--style2 .page-header-topline .social-list { margin: 0 20px; } @media (max-width: 1199px) { .page-header.page-header--style2 .page-header-topline .social-list { display: none; } } .page-header.page-header--style2 .page-header-topline .social-list > li a { font-size: 16px; line-height: 25px; padding: 0 10px; color: #899198; } .page-header.page-header--style2 .page-header-topline .social-list > li a:hover { color: #4ba0e8; } .page-header.page-header--style2 .page-header-topline .container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .page-header.page-header--style2.is-sticky .page-header-topline { display: none; } .page-header.page-header--style2 .page-header-topline-left { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-topline-left { display: none; } } .page-header.page-header--style2 .page-header-topline-right { margin-left: auto; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .page-header.page-header--style2 .page-header-top { padding: 19px 0; } @media (max-width: 1199px) { .page-header.page-header--style2 .page-header-top { padding: 10px 0; } } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-top { padding: 5px 0; } .page-header.page-header--style2 .page-header-top .container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } } .page-header.page-header--style2 .page-header-top .logo .shine { top: -70%; left: -19%; } .page-header.page-header--style2 .page-header-top-right { margin-left: auto; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .page-header.page-header--style2 .page-header-menu { flex: 1; border: 0; text-align: center; } .page-header.page-header--style2 .page-header-menu .sub-menu { text-align: left; } @media (min-width: 992px) { .page-header.page-header--style2 .page-header-menu .container { width: auto !important; } } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-menu .menu { width: 100%; } .page-header.page-header--style2 .page-header-top:before { display: none; } } @media (max-width: 991px) { .page-header.page-header--style2 .page-header-top:before { display: none; } } .page-header.page-header--style2 .logo { width: 208px; min-width: 208px; } @media (max-width: 1199px) { .page-header.page-header--style2 .logo { width: 180px; min-width: 180px; } } @media (min-width: 1200px) { .page-header.page-header--style2 .logo img { height: auto; } } @media (max-width: 991px) { .page-header.page-header--style2 .logo { width: 180px; min-width: 180px; margin-top: auto; margin-bottom: auto; padding-right: 0; } } @media (max-width: 767px) { .page-header.page-header--style2 .logo { width: 145px; min-width: 145px; padding-right: 15px; } } @media (min-width: 768px) { .page-header.page-header--style2 .menu > li > a { font-size: 15px; line-height: 28px; font-weight: 600; font-family: 'Poppins', sans-serif; padding: 15px 16px; } .page-header.page-header--style2 .menu ul li a { padding: 10px 20px; } .page-header.page-header--style2.is-sticky { background-color: #fff; } .page-header.page-header--style2.is-sticky .page-header-top { display: block; padding: 5px 0; } } @media (min-width: 768px) and (max-width: 1399px) { .page-header.page-header--style2 .menu > li > a { padding: 15px 12px; } } @media (min-width: 768px) and (max-width: 1199px) { .page-header.page-header--style2 .menu > li > a { padding: 15px 8px; font-size: 14px; } } .page-header.page-header--style2 .header-cart { margin: 4px 10px 0 10px; } .page-header.page-header--style2 .header-cart a.icon { font-size: 20px; } .page-header.page-header--style2 .header-cart .badge { display: none; } @media (max-width: 767px) { .page-header.page-header--style2 .header-cart { position: static; margin: 4px 7px 0 0; } .page-header.page-header--style2 .header-cart a.icon { font-size: 16px; } } @media (max-width: 991px) { .page-header.page-header--style2 .page-header-mobile-info-toggle { display: none; } .page-header.page-header--style2 .menu-toggle { position: relative; right: 0; top: 3px; margin-top: 0; margin-left: 20px; text-decoration: none; font-size: 20px; line-height: 25px; color: #425d74; } .page-header.page-header--style2 .page-header-menu { top: 100%; position: absolute; left: 0; width: 100%; text-align: left; } } @media (max-width: 767px) { .page-header.page-header--style2 .page-header-mobile-info-toggle { display: block; position: static; width: 20px; height: 30px; color: #425d74; } .page-header.page-header--style2 .page-header-mobile-info-toggle:before { line-height: 29px; } } @media (max-width: 767px) { .page-header.page-header--style2 .menu-toggle { margin-left: 15px; font-size: 14px; } } .header-search { position: relative; display: inline-block; width: 40px; height: 40px; margin-left: 20px; z-index: 100; } @media (max-width: 767px) { .header-search { margin-left: 0; } } .header-search-drop { display: none; position: absolute; top: 48px; right: 0; border-top: 2px solid #4ba0e8; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } @media (max-width: 767px) { .header-search-drop { top: 46px; } } .header-search-drop button { position: absolute; right: 0; top: 0; width: 40px; height: 40px; border: 0; background-color: transparent; } .header-search-drop.opened { display: block; } .header-search-toggle.opened [class*='icon-']:before { content: '\e911'; } .header-search [class*='icon-'] { position: absolute; top: 2px; bottom: 1px; right: 1px; z-index: 1; cursor: pointer; display: block; color: #425d74; font-size: 20px; line-height: 35px; min-width: 40px; text-align: center; background-color: #fff; } @media (max-width: 767px) { .header-search [class*='icon-'] { top: 4px; font-size: 16px; } } .header-search [class*='icon-']:hover { color: #4ba0e8; } .header-search input[type='text'], .header-search input[type='search'] { border: 1px solid transparent; width: 230px; height: 40px; padding: 0 42px 0 10px; font-size: 14px; line-height: 1.2em; color: #425d74; background-color: #fff; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .header-search input[type='text']:focus, .header-search input[type='search']:focus { outline-style: none; box-shadow: none; } .header-search ::-webkit-input-placeholder { color: #444; } .header-search ::-moz-placeholder { color: #444; } .header-search :-ms-input-placeholder { color: #444; } .header-search :-moz-placeholder { color: #444; } /*-------- 2.3 Footer --------*/ .page-footer { clear: both; position: relative; padding-bottom: 40px; } .page-footer h4 { font-size: 20px; margin-bottom: 14px; } @media (max-width: 479px) { .page-footer h4 { font-size: 18px; margin-bottom: 10px; } } @media (max-width: 1199px) { .page-footer { padding-bottom: 25px; } } .page-footer-menu { position: relative; background-image: linear-gradient(90deg, #46c6cf, #47a8e3); } .page-footer-menu .container { position: relative; } @media (max-width: 1199px) { .page-footer-menu { height: 5px; } } .page-footer .social-list { margin-top: 0; } @media (max-width: 1199px) { .page-footer .social-list > li { margin-right: 4px; } } @media (max-width: 1023px) { .page-footer .social-list { text-align: center; margin-top: 20px; } } @media (min-width: 668px) { .page-footer .page-footer-col-2, .page-footer .page-footer-col-3 { padding-top: 45px; } } .page-footer-bot { padding: 60px 0 0; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } .page-footer-bot > * { margin: 0 50px; } @media (max-width: 1199px) { .page-footer-bot { padding-top: 30px; } .page-footer-bot > * { margin: 0 15px; } } @media (max-width: 1023px) { .page-footer-bot { padding-top: 30px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-footer-bot > * { margin: 0; } .page-footer-bot .logo, .page-footer-bot .page-footer-col-3 { min-width: 100%; } .page-footer-bot .page-footer-col-1, .page-footer-bot .page-footer-col-2 { min-width: 50%; } .page-footer-bot > *:not(:first-child) { margin: 20px 0 0; } } @media (max-width: 667px) { .page-footer-bot { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 992px) { .page-footer-bot > *:last-child { margin-left: auto; margin-right: 0; } .page-footer-bot > *:first-child { margin-right: auto; margin-left: 0; } } .page-footer-bot .logo img { max-width: 100%; } @media (max-width: 1199px) { .page-footer-bot .logo img { width: 155px; } } .page-footer .footer-ribbon { position: absolute; right: 0; width: 186px; } .page-footer .footer-ribbon img { width: 100%; } @media (max-width: 1199px) { .page-footer .footer-ribbon { display: none; } } .page-footer .footer-copyright:not(:first-child) { margin-top: 0; font-size: 16px; line-height: 24px; } @media (max-width: 991px) { .page-footer .footer-copyright:not(:first-child) { text-align: center; } } .page-footer .menu { display: block; margin: 0; padding: 0 200px 0 0; } @media (max-width: 1199px) { .page-footer .menu { padding: 0; margin: 15px 0; display: none; } } .page-footer .menu li { display: inline-block; position: relative; z-index: 100; } @media (max-width: 767px) { .page-footer .menu li { display: block; width: 100%; text-align: center; } } @media (min-width: 992px) { .page-footer .menu li:first-child a { padding-left: 0; } } .page-footer .menu li a { font-size: 16px; line-height: 27px; font-weight: 600; text-decoration: none; padding: 20px 25px; display: block; color: #fff; text-transform: uppercase; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } @media (max-width: 1199px) { .page-footer .menu li a { padding: 20px 10px; } } @media (max-width: 991px) { .page-footer .menu li a { padding: 10px 5px; } } @media (max-width: 767px) { .page-footer .menu li a { padding: 5px 25px; } } .page-footer .menu li a:hover, .page-footer .menu li:hover > a, .page-footer .menu li.active > a { color: #425d74; } .page-footer-info { font-size: 15px; line-height: 22px; padding-left: 30px; position: relative; } .page-footer-info + * { margin-top: 20px; } @media (max-width: 1023px) { .page-footer-info + * { margin-top: 10px; } } .page-footer-info .icon { position: absolute; left: 0; top: 4px; font-size: 18px; color: #4ba0e8; } .page-footer-info .icon.icon-speech-bubble { top: 6px; } @media (max-width: 991px) { .page-footer-info .icon { top: 2px; font-size: 16px; } } .page-footer-phone { padding-left: 0; } @media (min-width: 1024px) { .page-footer-phone + * { margin-top: 49px; } .page-footer-phone p { font-size: 16px; line-height: 24px; padding-left: 35px; position: relative; margin-bottom: 15px; } .page-footer-phone p:last-child { margin-bottom: 0; } .page-footer-phone span.phone-number { display: block; font-size: 24px; line-height: 20px; white-space: nowrap; } .page-footer-phone span.phone-number span { font-size: 16px; } .page-footer-phone .icon { position: absolute; left: 0; top: 0; font-size: 24px; color: #4ba0e8; } } @media (max-width: 1023px) { .page-footer-phone + * { margin-top: 20px; } .page-footer-phone p { display: inline-block; position: relative; font-size: 16px; line-height: 24px; padding-left: 35px; margin-right: 15px; margin-bottom: 0; } } .page-footer .backToTop { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; position: fixed; z-index: 10000; right: 15px; bottom: -100px; opacity: 0; width: 50px; height: 48px; border-radius: 50px; background: #4ba0e8; font-size: 18px; line-height: 48px; color: #fff; text-decoration: none; text-align: center; cursor: pointer; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } .page-footer .backToTop i.icon { position: absolute; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .page-footer .backToTop i.icon:before { display: inline-block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } @media (max-width: 767px) { .page-footer .backToTop { margin: 25px auto -45px; } } .page-footer .backToTop:hover { background-color: #4ba0e8; color: #fff; animation: ripple 0.5s linear 1; } .page-footer .backToTop.visible { opacity: 1; bottom: 100px; } .backToTop:hover i.icon { animation: arrow 1.25s ease-in-out 1; } @keyframes arrow { 0% { bottom: 10px; } 25% { bottom: 30px; } 50% { bottom: 5px; } 75% { bottom: 20px; } 100% { bottom: 15px; } } @-webkit-keyframes arrow { 0% { bottom: 10px; } 25% { bottom: 30px; } 50% { bottom: 5px; } 75% { bottom: 20px; } 100% { bottom: 15px; } } .page-footer--style2 { background-color: #f1f2f3; padding: 0; } @media (min-width: 768px) and (max-width: 992px) { .page-footer--style2 .container { padding-left: 8px; padding-right: 8px; } } .page-footer--style2 .footer-ribbon { left: 0; top: -70px; } @media (max-width: 1199px) { .page-footer--style2 .footer-ribbon { display: block; } } @media (max-width: 479px) { .page-footer--style2 .footer-ribbon { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } } .page-footer--style2 .footer-ribbon + .page-footer-text { padding-top: 90px; } @media (max-width: 479px) { .page-footer--style2 .footer-ribbon + .page-footer-text { padding-top: 90px; } } .page-footer--style2 .page-footer-bottomline { padding: 15px 0; background-color: #fff; } .page-footer--style2 .page-footer-bottomline .container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 767px) { .page-footer--style2 .page-footer-bottomline .container { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } } @media (max-width: 767px) { .page-footer--style2 .page-footer-bottomline { padding: 10px 0; } } .page-footer--style2 .page-footer-bottomline-right { margin-left: auto; } @media (max-width: 767px) { .page-footer--style2 .page-footer-bottomline-right { margin-left: 0; margin-top: 5px; } } .page-footer--style2 .page-footer-content { position: relative; padding: 56px 0 30px; } @media (max-width: 767px) { .page-footer--style2 .page-footer-content [class*='col']:not(:first-child) { margin-top: 25px; } } .page-footer--style2 .social-list { margin: 0; } .page-footer--style2 .social-list > li a { font-size: 16px; line-height: 25px; padding: 0 10px; color: #899198; } .page-footer--style2 .social-list > li a:hover { color: #4ba0e8; } .page-footer--style2 .page-footer-text { max-width: 300px; } .page-footer--style2 .page-footer-text:not(:last-child) { margin-bottom: 15px; } @media (max-width: 991px) { .page-footer--style2 .page-footer-text:not(:last-child) { margin-bottom: 25px; } } @media (max-width: 767px) { .page-footer--style2 .page-footer-text:not(:last-child) { margin-bottom: 15px; } } .page-footer--style2 .page-footer-text p:last-child { margin-bottom: 0; } .page-footer--style2 .form-newsletter { max-width: 315px; } .page-footer--style2 .page-footer-info { font-size: 16px; line-height: 24px; padding-left: 33px; } @media (max-width: 1199px) { .page-footer--style2 .page-footer-info { font-size: 15px; line-height: 22px; padding-left: 28px; } } @media (max-width: 991px) { .page-footer--style2 .page-footer-info { font-size: 14px; line-height: 22px; } } .page-footer--style2 .page-footer-info a { text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .page-footer--style2 .page-footer-info a:hover { text-decoration: none; color: #4ba0e8; } .page-footer--style2 .page-footer-info + * { margin-top: 14px; } .page-footer--style2 .btn-wrap { margin-top: 20px; } @media (max-width: 479px) { .page-footer--style2 .btn-wrap { margin-top: 20px; text-align: center; } } @media (max-width: 767px) and (min-width: 480px) { .page-footer--style2 .page-footer-content > .col-sm-4 { width: 50%; float: left; } .page-footer--style2 .page-footer-content > .col-sm-4:last-child { clear: both; width: 100%; } .page-footer--style2 .page-footer-content > .col-sm-4:last-child .page-footer-info { width: 50%; float: left; } .page-footer--style2 .page-footer-content > .col-sm-4:last-child .page-footer-info:nth-child(odd) { width: calc(50% - 10px); margin-left: 10px !important; } .page-footer--style2 .page-footer-content > .col-sm-4:last-child .page-footer-info, .page-footer--style2 .page-footer-content > .col-sm-4:last-child .page-footer-info + .page-footer-info { margin: 0 0 7px; } .page-footer--style2 .page-footer-content > .col-sm-4:last-child .btn-wrap { clear: both; position: relative; top: 10px; } } /*-------- 2.4 Main Slider --------*/ /*slider*/ #mainSlider, #mainSlider .img--holder { height: 550px; } @media (max-width: 1199px) { #mainSlider, #mainSlider .img--holder { height: 500px; } } @media (max-width: 1025px) { #mainSlider, #mainSlider .img--holder { height: 450px; } } @media (max-width: 991px) { #mainSlider, #mainSlider .img--holder { height: 300px; } } @media (max-width: 767px) { #mainSlider, #mainSlider .img--holder { height: 300px; } } @media (max-width: 479px) { #mainSlider, #mainSlider .img--holder { height: 178px; } } #mainSlider { margin-bottom: 30px; opacity: 0; } #mainSlider .vert > .container { padding: 0; } #mainSlider.slick-initialized { opacity: 1; z-index: 101; } #mainSlider .slide .img--holder { background-size: cover; background-position: center bottom; background-repeat: no-repeat; } #mainSlider .slide-content { height: 100%; width: 100%; position: absolute; top: 0; left: 0; color: #fff; z-index: 100; } #mainSlider .slide-content.center { text-align: center; } #mainSlider .slide-content h4 { font-size: 18px; line-height: 1em; font-weight: 500; color: #fff; text-transform: none; margin: 0; } #mainSlider .slide-content h4:first-child { margin-top: -60px; } #mainSlider .slide-content h4:not(:first-child) { margin-top: 30px; } #mainSlider .slide-content h2 { font-size: 52px; line-height: 1.23em; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .01em; margin: 0; } #mainSlider .slide-content h2:not(:first-child) { margin-top: 44px; } #mainSlider .slide-content h3 { font-size: 52px; line-height: 1.23em; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .01em; margin: 0; } #mainSlider .slide-content .btn, #mainSlider .slide-content .btn:focus, #mainSlider .slide-content .btn.focus { height: auto; font-size: 15px; line-height: 21px; font-weight: 600; padding: 15px 41px; outline: 0; -moz-box-shadow: none; box-shadow: none; border: 2px solid #fff; background-color: transparent; color: #fff; border-radius: 55px; } #mainSlider .slide-content .btn:not(:first-child), #mainSlider .slide-content .btn:focus:not(:first-child), #mainSlider .slide-content .btn.focus:not(:first-child) { margin-top: 35px; } #mainSlider .slide-content .btn:hover, #mainSlider .slide-content .btn.active, #mainSlider .slide-content .btn:active { background: #fff; color: #4ba0e8; } @media (max-width: 1199px) { #mainSlider .slide-content h4 { font-size: 18px; } #mainSlider .slide-content h4:first-child { margin-top: 10px; } #mainSlider .slide-content h4:not(:first-child) { margin-top: 20px; } #mainSlider .slide-content h2 { font-size: 42px; } #mainSlider .slide-content h2:not(:first-child) { margin-top: 20px; } #mainSlider .slide-content h3 { font-size: 42px; } } @media (max-width: 991px) { #mainSlider .slide-content h4 { font-size: 16px; } #mainSlider .slide-content h2 { font-size: 32px; } #mainSlider .slide-content h3 { font-size: 32px; } #mainSlider .slide-content .btn { font-size: 12px; line-height: 18px; padding: 10px 25px; } #mainSlider .slide-content .btn:not(:first-child) { margin-top: 20px; } } @media (max-width: 767px) { #mainSlider .slide-content h4 { font-size: 15px; } #mainSlider .slide-content h2 { font-size: 28px; } #mainSlider .slide-content h3 { font-size: 28px; } #mainSlider .slide-content .btn { font-size: 12px; line-height: 18px; padding: 10px 25px; } #mainSlider .slide-content .btn:not(:first-child) { margin-top: 15px; } } @media (max-width: 667px) { #mainSlider .slide-content h4 { display: none; } #mainSlider .slide-content .btn { display: none; } #mainSlider .slide-content h2 { font-size: 24px; margin-top: 0 !important; } #mainSlider .slide-content h3 { font-size: 24px; } } #mainSlider .slick-prev, #mainSlider .slick-next { width: 50px; height: 50px; margin-top: -25px; } #mainSlider .slick-prev:before, #mainSlider .slick-next:before { font-size: 50px; line-height: 1em; color: #fff; } #mainSlider .slick-prev { left: 50px; } #mainSlider .slick-next { right: 50px; } @media (max-width: 1199px) { #mainSlider .slick-prev { left: 0; } #mainSlider .slick-next { right: 0; } #mainSlider .slick-prev, #mainSlider .slick-next { width: 50px; height: 50px; margin-top: -25px; } #mainSlider .slick-prev:before, #mainSlider .slick-next:before { font-size: 50px; } } @media (max-width: 767px) { #mainSlider .slick-prev, #mainSlider .slick-next { display: none !important; } } #mainSlider .slick-dots { position: absolute; bottom: 30px; margin: 0; } #mainSlider .slick-dots li button { background-color: #fff; } #mainSlider .slick-dots li.slick-active button, #mainSlider .slick-dots li.slick-active button:hover { box-shadow: 0 0 0 2px #fff; background-color: transparent; } @media (max-width: 1199px) { #mainSlider .slick-dots { bottom: 20px; } } @media (max-width: 1025px) { #mainSlider .slick-dots { bottom: 15px; } } @media (max-width: 991px) { #mainSlider .slick-dots { bottom: 10px; } } #mainSliderWrapper { position: relative; } #mainSlider .slide.hideMask { z-index: 901 !important; pointer-events: none; } #mainSlider .slide.mask.hideMask .img--holder { background-image: url(../images/mask.png); -webkit-mask: url(../images/mask.png); mask: url(../images/mask.png); -webkit-mask-size: 3000% 100%; mask-size: 3000% 100%; -webkit-animation: mask-play 2.5s steps(29) forwards 0.5s; animation: mask-play 2.5s steps(29) forwards 0.5s; } #mainSlider .slick-slide { position: absolute !important; left: 0 !important; opacity: 1 !important; } #mainSlider .img--holder, #mainSlider .slide-content { opacity: 0; transition: opacity 1s ease 0s; } #mainSlider .slide.hideMask .img--holder { opacity: 1; transition: opacity 1s ease .5s; } #mainSlider .slide.slick-active .img--holder, #mainSlider .slide.slick-active .slide-content { opacity: 1; transition: opacity 1s ease .5s; } #mainSlider .slick-track, #mainSlider .slick-list { height: 100%; } @-webkit-keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } @keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } /*---------------------------------------*/ /*-------- 3. Content --------*/ /*---------------------------------------*/ /*----- 3.1 Breadcrumbs block --------*/ .breadcrumbs { overflow: hidden; background-color: #f6f6f7; } .breadcrumbs .breadcrumb { color: #74828e; display: inline-block; padding: 12px 0; border-radius: 0; margin: 0; width: 100%; } .breadcrumbs .breadcrumb li, .breadcrumbs .breadcrumb a { color: #74828e; font-size: 14px; line-height: 28px; text-decoration: none; } .breadcrumbs .breadcrumb a:hover { color: #4ba0e8; } .breadcrumbs .breadcrumb > li { display: inline-block; } .breadcrumbs .breadcrumb > li + li:before { display: inline-block; vertical-align: middle; font-size: 7px; color: #74828e; font-family: 'cleaning'; content: "\e90a"; padding: 0 12px; } @media (max-width: 479px) { .breadcrumbs .breadcrumb > li + li:before { padding: 0 6px; position: relative; top: -1px; } } /*----- 3.2 Text + Icon block --------*/ /* text icon */ .text-icon-row { margin-top: -55px; } @media (max-width: 479px) { .text-icon-row { margin-top: -25px; } } .text-icon { margin-top: 70px; text-align: center; } @media (max-width: 479px) { .text-icon { margin-top: 40px; } } .text-icon > *:not(:first-child) { margin-top: 25px; margin-bottom: 0; } .text-icon-icon { margin-left: auto; margin-right: auto; width: 120px; height: 120px; border-radius: 50%; background-color: #fff; text-align: center; -webkit-box-shadow: 0 8px 15px rgba(85, 85, 85, 0.15); -moz-box-shadow: 0 8px 15px rgba(85, 85, 85, 0.15); box-shadow: 0 8px 15px rgba(85, 85, 85, 0.15); -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .text-icon-icon .icon { font-size: 46px; line-height: 120px; color: #4ba0e8; } .text-icon-text { max-width: 450px; margin-left: auto; margin-right: auto; } .text-icon-text, .text-icon-text:not(:first-child) { margin-top: 12px; } .text-icon-carousel .text-icon { float: none; vertical-align: top; } @media (max-width: 479px) { .text-icon { width: 100%; } } /* text icon horizontal */ .text-icon-hor { margin-top: -5px; margin-bottom: -7px; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } @media (max-width: 767px) { .text-icon-hor { margin-top: 0; margin-bottom: 30px; } } .text-icon-hor-icon { flex: 0 1 70px; min-width: 70px; position: relative; top: 5px; left: 7px; } .text-icon-hor-icon .icon { font-size: 60px; line-height: 1em; color: #4ba0e8; } .text-icon-hor-text { padding-left: 30px; } .text-icon-hor-text p:last-child { margin-bottom: 0; } /*----- 3.3 Testimonials block --------*/ .testimonials-carousel .slick-dots { position: absolute; width: 100%; padding: 0; margin: 30px 0 -15px; } @media (max-width: 991px) { .testimonials-carousel .slick-dots { margin: 0; } } @media (max-width: 991px) { .block-testimonials-bg { margin-bottom: 50px; } .block-testimonials-bg h2 { margin-bottom: 25px !important; } .testimonials-carousel.slick-slider { margin-bottom: 0; } } @media (max-width: 767px) { .block-testimonials-bg .testimonials-carousel { padding-bottom: 0; padding-top: 0; } } .block-testimonials .slick-prev, .block-testimonials .slick-next { opacity: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .block-testimonials:hover .slick-prev, .block-testimonials:hover .slick-next { opacity: 1; } .block-testimonials-bg .testimonial-item { padding: 0 147px 0; position: relative; color: #6b7782; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 1199px) { .block-testimonials-bg .testimonial-item { padding: 0 50px 0; } } @media (max-width: 991px) { .block-testimonials-bg .testimonial-item { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; padding: 0 20px 0; } } @media (max-width: 767px) { .block-testimonials-bg .testimonial-item { padding: 0; } } .block-testimonials-bg .testimonial-item-inside { max-width: 800px; padding: 0 0 45px; margin: 0 auto; position: relative; text-align: center; } .block-testimonials-bg .testimonial-item:before { content: '”'; position: absolute; top: -0.1em; right: 0; font-size: 260px; line-height: 1em; font-family: Arial, Helvetica, sans-serif; color: #dde0e2; } @media (max-width: 1199px) { .block-testimonials-bg .testimonial-item:before { display: none; } } .block-testimonials-bg .testimonial-item:after { content: '“'; position: absolute; bottom: -0.45em; left: 0; font-size: 260px; line-height: 1em; font-family: Arial, Helvetica, sans-serif; color: #dde0e2; } @media (max-width: 1199px) { .block-testimonials-bg .testimonial-item:after { display: none; } } .block-testimonials-bg .testimonial-item h2, .block-testimonials-bg .testimonial-item h3, .block-testimonials-bg .testimonial-item h4, .block-testimonials-bg .testimonial-item h5, .block-testimonials-bg .testimonial-item h6 { color: #6b7782; margin-bottom: 0; } .block-testimonials-bg .testimonial-item p { color: #6b7782; } .block-testimonials-bg .testimonial-item p:last-child { margin-bottom: 0; } .block-testimonials-bg .testimonial-item-name { display: inline-block; color: #4ba0e8; } .block-testimonials-bg .testimonial-item-position { display: inline-block; color: #899198; } .block-testimonials-bg .testimonial-item-rating { display: inline-block; margin: 0 3px; font-size: 10px; color: #899198; } .block-testimonials-bg .testimonial-item-rating [class*='icon'] { position: relative; top: -2px; padding: 0 2px; } @media (max-width: 479px) { .block-testimonials-bg .testimonial-item-rating { display: block; margin-top: 10px; } } .block-testimonials-bg .testimonial-item-author { text-align: center; } .block-testimonials-bg .testimonial-item-author img { display: inline-block; max-width: 146px; width: auto; } .block-testimonials-bg .testimonial-item-author img:not(:last-child) { margin-bottom: 15px; } @media (max-width: 479px) { .block-testimonials-bg .testimonial-item-author img { max-width: 133px; } } @media (max-width: 991px) { .block-testimonials-bg .testimonial-item-author { margin: 0 auto 20px; text-align: center; } } .testimonials-grid { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .testimonials-grid .testimonial-item { border-left: 1px solid #e9eef3; padding: 10px 0 20px; width: 33.333%; } .testimonials-grid .testimonial-item:first-child { border: 0; } @media (min-width: 992px) { .testimonials-grid .testimonial-item:nth-child(3n+1) { border: 0; } } @media (max-width: 991px) { .testimonials-grid .testimonial-item { width: 50%; } .testimonials-grid .testimonial-item:nth-child(2n+1) { border: 0; } } @media (max-width: 480px) { .testimonials-grid .testimonial-item { width: 100%; border: 0; } } .testimonials-grid .testimonial-item-inside { padding: 0 40px; text-align: center; position: relative; } .testimonials-grid .testimonial-item-inside:after { content: '“'; position: absolute; top: 35px; left: 15px; font-size: 90px; color: #c7d5e1; } @media (max-width: 600px) { .testimonials-grid .testimonial-item-inside:after { left: 0; } } .testimonials-grid .testimonial-item-inside > * { margin-top: 12px; margin-bottom: 0; } .testimonials-grid .testimonial-item-inside h5 { font-size: 18px; } .testimonials-grid .testimonial-item-inside p { font-size: 15px; line-height: 24px; } /*----- 3.4 Person Block --------*/ .person { margin-top: 18px; margin-bottom: -7px; text-align: center; } .person-img { display: inline-block; position: relative; overflow: hidden; z-index: 1; width: auto; max-width: 300px; margin-left: auto; margin-right: auto; border-radius: 50%; } .person-img img { display: inline-block; border-radius: 50%; max-width: 100%; width: auto; } .person-name, .person-name:not(:first-child) { line-height: 1em; margin-top: 28px; margin-bottom: 0; } @media (max-width: 767px) { .person-name, .person-name:not(:first-child) { margin-top: 20px; } } .person-position { padding: 0; margin: 0; font-size: 15px; font-weight: normal; font-family: 'Roboto', sans-serif; text-transform: none; color: #899198; } .person-position:not(:first-child) { margin-top: 12px; } .person-text { font-size: 16px; line-height: 27px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; margin-bottom: 0; max-width: 355px; } @media (max-width: 991px) { .person-text { font-size: 15px; line-height: 22px; } } .person-divider { margin: 21px auto 24px; height: 2px; width: 35px; background-color: #4ba0e8; } @media (max-width: 767px) { .person-divider { margin: 15px auto 18px; } } .person .social-list { position: absolute; left: 0; right: 0; bottom: -20px; margin: 0; padding: 10px; opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: 0.35s; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s; } .person .social-list > li a { font-size: 16px; line-height: 25px; padding: 0 3px; color: #fff; } .person .social-list > li a:hover { color: #4ba0e8; } .person:hover .social-list { bottom: 0; opacity: 1; } @media (max-width: 767px) { .person { margin-bottom: 45px; } } .person-carousel .slick-dots { margin: 0 0 -25px; } /*----- 3.5 Banners --------*/ .get-banner { color: #fff; padding: 3px 0; } .get-banner h2 { display: inline-block; vertical-align: middle; font-size: 30px; margin-bottom: 0; color: #fff; } .get-banner h2 + .btn { margin: 0 0 0 55px; vertical-align: middle; } @media (max-width: 991px) { .get-banner h2 { font-size: 36px; line-height: 42px; } .get-banner h2 + .btn { margin: 20px 0 0; clear: both; } } .get-banner-2 { position: relative; background-image: linear-gradient(90deg, #46c6cf, #47a8e3); color: #fff; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; padding: 25px 45px 25px 35px; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .get-banner-2 p { font-size: 20px; line-height: 1.5em; } .get-banner-2 h2, .get-banner-2 h3, .get-banner-2 h4, .get-banner-2 h5, .get-banner-2 p { color: #fff; margin-bottom: 0; } .get-banner-2 h2 { font-size: 36px; line-height: 40px; font-weight: 400; } @media (max-width: 991px) { .get-banner-2 { background-image: linear-gradient(90deg, #48b0da, #499fe5); padding: 25px; } } @media (max-width: 767px) { .get-banner-2 h2 { padding: 0 5px; } } .get-banner-text { text-align: right; margin: 0 50px; } .get-banner-text > *:not(:first-child) { margin-top: 7px; margin-bottom: 0; } @media (min-width: 992px) { .get-banner-text b { display: block; } } .get-banner-calendar { display: block; position: relative; margin: -75px 0; -webkit-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } @media (max-width: 991px) { .get-banner-calendar { width: 120px; position: absolute; bottom: 55px; } .get-banner-calendar img { width: 100%; } } .get-banner-calendar > img { position: relative; display: block; } @media (min-width: 1025px) { .get-banner-2:hover .get-banner-calendar .calendar-cover { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); } } .get-banner-calendar .calendar-cover { top: 60px; left: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition: 0.8s ease 0.1s; position: relative; z-index: 1; } @media (max-width: 991px) { .get-banner-calendar .calendar-cover { top: 32px; } } .get-banner-content { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 991px) { .get-banner-content { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex: 1; } .get-banner-text { text-align: center; margin: 0 auto 20px; } } @media (max-width: 767px) { .get-banner-2 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; padding-bottom: 130px; } .get-banner-text { max-width: 270px; } .get-banner-text > *:not(:first-child) { margin-top: 25px !important; } .get-banner-calendar { order: 3; margin: 20px 0 -75px -60px; left: 50%; } .get-banner-text, .get-banner-text:not(:first-child) { text-align: center; margin-top: 0; } } .calendar-cover-front, .calendar-cover-back { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .calendar-cover-front { z-index: 2; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } .calendar-cover-back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .banner-guarantee { background-color: #4ba0e8; padding: 30px 25px 0 0; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin-top: 60px; -webkit-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; } @media (max-width: 1199px) { .banner-guarantee { padding: 30px 25px 0 25px; } } .banner-guarantee-img { flex: 0 1 345px; min-width: 345px; } @media (max-width: 1199px) { .banner-guarantee-img { flex: 0 1 300px; min-width: 300px; } } @media (max-width: 991px) { .banner-guarantee-img { display: none; } } .banner-guarantee-img--topnegative { position: relative; } .banner-guarantee-img--topnegative img { margin-top: -150px; margin-left: -10px; max-width: 100%; } .banner-guarantee-text { color: #fff; padding-bottom: 40px; text-align: center; } .banner-guarantee-text h1, .banner-guarantee-text h2, .banner-guarantee-text h3, .banner-guarantee-text h4, .banner-guarantee-text h5, .banner-guarantee-text h6 { color: #fff; } .banner-guarantee-text p { font-size: 15px; line-height: 24px; } .banner-guarantee-text > * { margin-bottom: 0; } .banner-guarantee-text > *:not(:first-child) { margin-top: 20px; } .banner-text { background-image: linear-gradient(90deg, #48b0da, #499fe5); padding: 37px 25px; text-align: center; font-size: 36px; line-height: 46px; color: #fff; } @media (max-width: 768px) { .banner-text { padding: 30px 15px; font-size: 28px; } } .banner-text h1, .banner-text h2, .banner-text h3, .banner-text h4, .banner-text h5, .banner-text h6 { color: #fff; } .banner-text i.icon { font-size: 24px; padding: 0 10px; position: relative; top: -3px; } @media (max-width: 768px) { .banner-text i.icon { top: 0; } } /*----- 3.6 Services --------*/ .service-box { text-align: center; margin: 45px 0 0; } .service-box > *:not(: first-child) { margin-top: 15px; margin-bottom: 0; } .service-box-img { display: block; position: relative; overflow: hidden; z-index: 1; width: auto; max-width: 309px; margin-left: auto; margin-right: auto; text-decoration: none; } .service-box-img img { max-width: 100%; } @media (max-width: 991px) { .service-box-img img { max-width: 200px; margin-left: auto; margin-right: auto; } } .service-box-title, .service-box-title:not(:first-child) { margin-top: 22px; } .service-box-text { max-width: 350px; margin: 0 auto; font-size: 16px; line-height: 27px; } @media (max-width: 991px) { .service-box-text { font-size: 15px; line-height: 22px; } } .service-box-link { display: inline-block; text-transform: uppercase; font-size: 13px; line-height: 18px; font-weight: bold; color: #4ba0e8; text-decoration: none; } .service-box-more { display: block; font-size: 14px; font-weight: 600; color: #6a7680; text-decoration: none; font-family: 'Poppins', sans-serif; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .service-box-more [class*='icon'] { position: relative; top: 1px; font-size: 14px; padding: 0 4px; color: #4ba0e8; } .service-box-more:hover { color: #4ba0e8; } .service-box-more:not(:first-child) { margin-top: 17px; } @media (max-width: 767px) { .service-box-more { font-size: 12px; } .service-box-more [class*='icon'] { top: 0; font-size: 10px; } } .services-grid { margin-top: -30px; } .services-mobile-carousel.slick-slider { margin-bottom: 0; } .services-mobile-carousel.slick-slider .slick-dots { margin: 25px 0 -18px; } @media (min-width: 768px) { .services-grid .service-box:nth-child(3n+1) { clear: left; } } @media (max-width: 767px) and (min-width: 480px) { .services-grid .service-box:nth-child(2n+1) { clear: left; } } @media (max-width: 480px) { .service-box { margin-bottom: 0; } } .service-card { text-align: center; margin: 12px 0 30px; padding: 50px 60px 55px; background-color: #fff; border-radius: 10px; -webkit-box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); -moz-box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); } @media (max-width: 1199px) { .service-card { padding: 40px 35px 45px; } } @media (max-width: 767px) { .service-card { padding: 30px 35px 35px; } } .service-card-title { font-size: 20px; line-height: 24px; } .service-card-title:not(:first-child) { margin-top: 46px; } @media (max-width: 991px) { .service-card-title { font-size: 18px; line-height: 22px; } .service-card-title:not(:first-child) { margin-top: 36px; } } @media (max-width: 767px) { .service-card-title:not(:first-child) { margin-top: 20px; } } .service-card-icon { font-size: 70px; line-height: 1em; color: #4ba0e8; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } @media (max-width: 767px) { .service-card-icon { font-size: 56px; } } .service-card-list { text-align: left; padding: 0; list-style: none; } .service-card-list:not(:first-child) { margin-top: 22px; } @media (max-width: 991px) { .service-card-list:not(:first-child) { margin-top: 15px; } } .service-card-list > li { font-size: 16px; line-height: 26px; position: relative; margin-bottom: 7px; } .service-card-list > li:last-child { margin-bottom: 0; } .service-card-list > li:before { position: relative; top: -1px; padding: 0 10px; display: inline-block; font-family: 'cleaning'; content: "\e907"; font-size: 11px; color: #4ba0e8; } @media (max-width: 991px) { .service-card-list > li { font-size: 15px; line-height: 26px; } } @media (max-width: 991px) { .service-card-list > li { font-size: 14px; line-height: 20px; } } .service-card-more { margin-top: 40px; display: block; font-size: 14px; font-weight: 600; color: #6a7680; text-decoration: none; font-family: 'Poppins', sans-serif; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .service-card-more [class*='icon'] { position: relative; top: 1px; font-size: 14px; padding: 0 4px; color: #4ba0e8; } .service-card-more:hover { color: #4ba0e8; } .service-card-more:not(:first-child) { margin-top: 24px; } @media (max-width: 1199px) { .service-card-more:not(:first-child) { margin-top: 18px; } } @media (max-width: 991px) { .service-card-more:not(:first-child) { margin-top: 18px; } } @media (max-width: 767px) { .service-card-more { margin-top: 20px; font-size: 12px; } .service-card-more [class*='icon'] { top: 0; font-size: 10px; } } .service-card .btn { min-width: 160px; } .service-card .btn:not(:first-child) { margin-top: 18px; } @media (max-width: 1199px) { .service-card .btn:not(:first-child) { margin-top: 15px; } } @media (max-width: 991px) { .service-card .btn:not(:first-child) { margin-top: 15px; } } @media (max-width: 767px) { .service-card .btn { min-width: 127px; } } .service-card:hover .service-card-icon { transform: scale(1.2); -webkit-transition: 0.25s; -moz-transition: 0.25s; -ms-transition: 0.25s; -o-transition: 0.25s; } .services-carousel .slick-dots { margin: 10px 0 -10px; } @media (max-width: 767px) { .services-carousel.slick-slider { margin-bottom: 0; } .services-carousel .slick-dots { margin: 0 0 -10px; } } @media (min-width: 1200px) { .service-house-row { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .inset-pad { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 1199px) { .service-house-row .inset-pad { padding-top: 60px; padding-bottom: 0; } } @media (max-width: 767px) { .service-house-row .inset-pad { padding-top: 50px; padding-bottom: 0; } } .service-house-wrap { position: relative; width: 795px; height: 665px; } @media (max-width: 1199px) { .service-house-wrap { margin: 30px auto 0; } } @media (max-width: 991px) { .service-house-wrap { width: 500px; height: 418px; margin: 30px auto 0; } } @media (max-width: 499px) { .service-house-wrap { width: 100%; height: auto; } } .service-house { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: url(../images/content/index-service-house-bg.png) no-repeat; background-size: cover; padding: 23% 21% 6%; } @media (max-width: 1199px) { .service-house { background-size: 100% auto; } } @media (max-width: 499px) { .service-house { background: none; position: relative; padding: 0 0 10px; } } .service-house > * { display: block; margin: 10px; flex-basis: calc(50% - 20px); position: relative; overflow: hidden; text-decoration: none; } .service-house > * img { width: 100%; } .service-house-item-title { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; position: absolute; padding: 10px; top: 70%; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; font-size: 20px; line-height: 1.5em; font-weight: 600; font-family: 'Poppins', sans-serif; color: #fff; text-align: center; -webkit-transition: 0.35s; -moz-transition: 0.35s; -ms-transition: 0.35s; -o-transition: 0.35s; } @media (max-width: 1199px) { .service-house-item-title { font-size: 16px; } } .service-house-item:hover .service-house-item-title { top: 0; opacity: 1; } /*----- 3.7 News --------*/ .news-prw { background-color: #f7f8f9; margin-top: 16px; padding: 0 30px 45px; } @media (max-width: 1199px) { .news-prw { padding: 0 25px 30px; } } @media (max-width: 767px) { .news-prw { margin-top: 0; padding: 0 20px 30px; } } .news-prw > *:not(:first-child) { margin-top: 16px; } @media (max-width: 767px) { .news-prw > *:not(:first-child) { margin-top: 8px; } } .news-prw > .btn:not(:first-child) { margin-top: 24px; } @media (max-width: 767px) { .news-prw > .btn:not(:first-child) { margin-top: 14px; } } .news-prw-image { position: relative; overflow: hidden; margin: 0 -30px; } @media (max-width: 1199px) { .news-prw-image { margin: 0 -25px; } } @media (max-width: 767px) { .news-prw-image { margin: 0 -20px; } } .news-prw-image img { width: 100%; } .news-prw-image span { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; position: absolute; top: 70%; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } .news-prw-image span [class*='icon'] { width: 53px; height: 53px; border-radius: 50%; background-color: #fff; text-align: center; font-size: 24px; line-height: 55px; color: #4ba0e8; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .news-prw-image span [class*='icon']:hover { background-color: #4ba0e8; color: #fff; } .news-prw:hover .news-prw-image span { top: 0; opacity: 1; } .news-prw-date { font-size: 14px; font-weight: 400; color: #afb3b7; } .news-prw-date:not(:first-child) { margin-top: 30px; } @media (max-width: 991px) { .news-prw-date:not(:first-child) { margin-top: 20px; } } .news-prw-title:not(:first-child) { margin-top: 15px; } @media (max-width: 767px) { .news-prw-title:not(:first-child) { margin-top: 6px; } } .news-prw-title { margin-bottom: 0; line-height: 1.3em; } @media (max-width: 1199px) { .news-prw-title { font-size: 19px; } } .news-prw p { font-size: 16px; line-height: 27px; margin-bottom: 0; } @media (max-width: 991px) { .news-prw p { font-size: 15px; line-height: 22px; } } .news-prw-link { display: block; position: absolute; bottom: -25px; right: 22px; width: 51px; height: 51px; border-radius: 50%; font-size: 18px; line-height: 53px; padding-left: 3px; background-color: #4ba0e8; color: #fff; text-align: center; text-decoration: none; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .news-prw-link:hover { background-color: #4ba0e8; color: #fff; } .news-prw-more { display: block; font-size: 15px; font-weight: 600; color: #6a7680; text-decoration: none; font-family: 'Poppins', sans-serif; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .news-prw-more [class*='icon'] { position: relative; top: 1px; font-size: 14px; padding: 0 4px; color: #4ba0e8; } .news-prw-more:hover { color: #4ba0e8; } @media (max-width: 767px) { .news-prw-more { font-size: 12px; } .news-prw-more [class*='icon'] { top: 0; font-size: 10px; } } .news-carousel .slick-dots { margin: 38px 0 -18px; } @media (max-width: 1199px) { .news-carousel .slick-dots { margin: 35px 0 -35px; } } @media (max-width: 991px) { .news-carousel .slick-dots { margin: 30px 0 -35px; } } /*----- 3.8 Facts (count up numbers)---*/ .counter-item { color: #fff; text-align: center; } .counter-item > *:not(: first-child) { margin-top: 13px; } .counter-item-icon { position: relative; font-size: 64px; line-height: 1em; } .counter-item-icon:after { content: ''; display: block; margin: 26px auto; height: 2px; width: 35px; background-color: #4ba0e8; } @media (max-width: 991px) { .counter-item-icon:after { margin: 15px auto; } } @media (max-width: 767px) { .counter-item-icon:after { margin: 12px auto 10px; } } @media (max-width: 991px) { .counter-item-icon { font-size: 52px; } } .counter-item-number { font-size: 36px; line-height: 1em; font-weight: 600; font-family: 'Poppins', sans-serif; } @media (max-width: 991px) { .counter-item-number { font-size: 34px; line-height: 1.35em; } } @media (max-width: 767px) { .counter-item-number { font-size: 30px; } } .counter-item-text { margin-top: 10px; font-size: 16px; line-height: 1em; font-weight: 500; font-family: 'Poppins', sans-serif; } @media (max-width: 991px) { .counter-item-text { font-size: 14px; } } @media (max-width: 767px) { .counter-item-text { margin-top: 5px; font-size: 12px; } } @media (max-width: 767px) { .counter-row > *:nth-child(3n), .counter-row > *:nth-child(4n) { margin-top: 40px; } } /*----- 3.9 Features text --------*/ .feature-text { margin-bottom: 30px; padding: 0 50px 0 0; } .feature-text h5 { margin-top: 10px; } .feature-text p { margin-bottom: 0; } @media (max-width: 991px) { .feature-text { padding: 0; } } .feature-text.text-right { padding: 0 0 0 50px; } @media (max-width: 991px) { .feature-text.text-right { padding: 0; } } @media (max-width: 767px) { .feature-wrapper { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .feature-wrapper > .feature-image { order: -1; } .feature-text, .feature-text.text-right { text-align: center; padding: 0; } } /*----- 3.10 Discounts --------*/ .discount-box-row { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; min-height: 190px; margin-top: 40px; } .discount-box-row > * { margin: 0 15px; } .discount-box-row > *:first-child { margin-left: 0; } .discount-box-row > *:last-child { margin-right: 0; } .discount-box { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex: 1; text-align: center; background-color: #fff; border-radius: 10px; -webkit-box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); -moz-box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16); font-size: 24px; line-height: 36px; font-weight: 400; } @media (max-width: 767px) { .discount-box { max-width: 300px; width: 100%; padding: 20px 0; } } .discount-box--color1 .discount-box-sale { color: #4ba0e8; } .discount-box--color2 .discount-box-sale { color: #8adaeb; } .discount-box--color3 .discount-box-sale { color: #4ba0e8; } .discount-box-sale { font-size: 48px; line-height: 1em; font-weight: 700; } .discount-box-sale span { font-size: 38px; color: #3d4b57; } @media (max-width: 1199px) { .discount-box-sale { font-size: 42px; } .discount-box-sale span { font-size: 34px; } } .discount-box h4 { margin-bottom: 0; } .discount-box > *:not(:first-child) { margin-top: 7px; } @media (max-width: 767px) { .discount-box-row { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-align-items: center; align-items: center; min-height: inherit; } .discount-box-row > * { margin: 10px 0; } } /*----- 3.11 Prices --------*/ .prices-box { text-align: center; margin: 5px 0 5px; padding: 40px 0 50px; background-color: #fff; border-radius: 10px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; -webkit-box-shadow: 0 10px 30px rgba(85, 85, 85, 0.16); -moz-box-shadow: 0 10px 30px rgba(85, 85, 85, 0.16); box-shadow: 0 10px 30px rgba(85, 85, 85, 0.16); } @media (max-width: 479px) { .prices-box { padding: 20px 0 35px; } } .prices-box-row { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; font-size: 16px; min-height: 46px; padding: 6px 0; border-top: 1px solid #f5f6f7; } @media (max-width: 479px) { .prices-box-row { font-size: 15px; min-height: 36px; } } .prices-box-row b { color: #4ba0e8; font-weight: normal; } .prices-box-title { font-size: 24px; font-weight: 600; margin-bottom: 30px; } @media (max-width: 479px) { .prices-box-title { font-size: 20px; margin-bottom: 20px; } } .prices-box-price { background-color: #f9f9fa; padding: 18px 0; margin-bottom: 34px; } @media (max-width: 479px) { .prices-box-price { padding: 15px 0; margin-bottom: 20px; } } .prices-box-price b { display: block; font-size: 48px; line-height: 1em; font-weight: bold; color: #4ba0e8; } .prices-box-price b sup { top: 0; font-size: 24px; color: #3d4b57; } @media (max-width: 479px) { .prices-box-price b { font-size: 38px; } .prices-box-price b sup { font-size: 19px; } } .prices-box-price span { display: block; font-size: 16px; } @media (max-width: 479px) { .prices-box-price span { font-size: 14px; } } .prices-box-price + .prices-box-row { border-top: 0; } .prices-box-link { margin-top: 30px; } @media (max-width: 479px) { .prices-box-link { margin-top: 20px; } } .prices-box-link .btn { min-width: 160px; } @media (max-width: 479px) { .prices-box-link .btn { min-width: 123px; } } .prices-box.prices-box:hover { background-color: #f1f2f3; } .prices-box.prices-box:hover .prices-box-price { background-color: #fff; } .prices-box.prices-box:hover .prices-box-row { border-color: #e7e8ea; } .price-carousel.slick-initialized .prices-box, .price-carousel-tab.slick-initialized .prices-box { margin-bottom: 35px; } .price-carousel .slick-dots { margin: 0 0 -20px; } @media (max-width: 767px) { .price-carousel .slick-dots { margin: 0 0 -55px; } } .price-carousel-tab .slick-dots { margin: 0 0 -20px; } @media (max-width: 767px) { .price-carousel-tab .slick-dots { margin: 0 0 -55px; } } .price-carousel:not(:first-child) { margin-top: 35px; } /*----- 3.12 Question Box --------*/ .question-box { padding: 18px 14px 30px; background: url(../images/question-box-bg.jpg) no-repeat center top #9bd9e8; background-size: 100%; } .question-box-title { font-size: 36px; line-height: 40px; font-weight: 600; color: #fff; margin-bottom: 18px; } .question-box .form-control { height: 42px; background: #fff; border: 0; margin-bottom: 9px; border-radius: 3px; } .question-box textarea.form-control { height: 162px; padding-top: 10px; } .question-box .btn { margin-top: 10px; } .placeholder-dark { color: #656d74; } .question-box input::-webkit-input-placeholder, .question-box textarea::-webkit-input-placeholder { color: #656d74; } .question-box input::-moz-placeholder, .question-box textarea::-moz-placeholder { color: #656d74; } .question-box input:-ms-input-placeholder, .question-box textarea:-ms-input-placeholder { color: #656d74; } .question-box input:-moz-placeholder, .question-box textarea:-moz-placeholder { color: #656d74; } .question-box + * { margin-bottom: 30px; } .question-box .successform, .question-box .errorform { margin-bottom: 25px; } .question-box .successform, .question-box .errorform, .question-box .successform p, .question-box .errorform p { text-align: center; font-size: 15px; line-height: 18px; } .question-box .successform { color: #fff; } .question-box .errorform { color: #ff0000; } .question-form label.error { font-size: 13px !important; margin-top: -7px; line-height: 15px; color: #ff0000; } /*----- 3.13 Faq --------*/ .panel-group { margin-top: 25px; margin-bottom: 0; } .panel-group#accordion { margin-top: 0; } .faq-item .panel, .faq-item.panel { margin-bottom: 15px; background: transparent; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; border-radius: 0; } .faq-item.last .panel, .faq-item:last-child, .faq-item:last-child .panel { border-bottom: 0; margin-bottom: 0; } .faq-item .panel-heading { position: relative; padding: 0; } .faq-item .panel-heading .panel-title { text-align: left !important; padding-bottom: 5px; } .faq-item .panel-heading .panel-title > a { display: block; position: relative; padding: 15px 0 15px 70px; font-size: 18px; line-height: 23px; font-weight: 600; text-transform: none; color: #3d4c58; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .faq-item .panel-heading .panel-title > a:hover { color: #4ba0e8; padding-left: 85px; } @media screen and (max-width: 767px) { .faq-item .panel-heading .panel-title > a:hover { padding-left: 70px; } } .faq-item .panel-heading a, .faq-item .panel-heading a:hover { text-decoration: none; -webkit-transition: all 0.25 ease; -moz-transition: all 0.25 ease; -ms-transition: all 0.25 ease; -o-transition: all 0.25 ease; } .faq-item .panel-heading a > span.caret-toggle { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 53px; height: 53px; font-size: 36px; line-height: 51px; font-weight: 400; color: #4ba0e8; border-radius: 50%; border: 2px solid #4ba0e8; text-align: center; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .faq-item .panel-heading a:hover > span.caret-toggle { color: #4ba0e8; border-color: #4ba0e8; } .faq-item .panel-heading a:not(.collapsed) > span.opened { display: none; } .faq-item .panel-heading a.collapsed > span.closed { display: none; } .faq-item .panel-collapse { background: transparent; } .faq-item .panel-body { border: 0; padding: 0 0 25px 70px; } .faq-item .panel-body > p:last-child { margin-bottom: 0; } .faq-item .panel-heading + .panel-collapse > .panel-body { border: 0; } /*----- 3.14 Brands --------*/ .brand-carousel img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: opacity 0.3s, -webkit-filter 0.3s; transition: filter 0.3s, opacity 0.3s; transition: filter 0.3s, opacity 0.3s, -webkit-filter 0.3s; -webkit-transition: filter 0.3s, -webkit-filter 0.3s, opacity 0.3s; opacity: 0.5; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .brand-carousel img:hover { -webkit-filter: none; filter: none; opacity: 1; } /*----- 3.15 Gallery --------*/ .gallery-cleaning .gallery-item { position: relative; float: left; width: calc(50% - 15px); margin-bottom: 30px; overflow: hidden; } @media (max-width: 767px) { .gallery-cleaning .gallery-item { width: calc(50% - 15px); } } @media (max-width: 479px) { .gallery-cleaning .gallery-item { width: 100%; margin-bottom: 15px; } } .gallery-cleaning .gallery-item img { width: 100%; } .gallery-cleaning .gallery-item:hover .gallery-caption { transform: translateY(0); opacity: 1; } .gallery-cleaning .gallery-caption { background: rgba(0, 0, 0, 0.6); position: absolute; width: 64%; left: 18%; bottom: 0; padding: 18px; color: #d0d0d0; transform: translateY(50%); -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; padding: 12px; top: 50%; bottom: auto; width: 80%; left: 10%; transform: translateY(-50%) !important; opacity: 0; } .gallery-cleaning .gallery-caption b { color: #fff; } .gallery-cleaning .gallery-caption-title, .gallery-cleaning .gallery-caption h5 { margin-bottom: 10px; color: #fff; } .gallery-cleaning .gallery-caption p { font-size: 15px; line-height: 22px; } .gallery-cleaning .gallery-caption p:not(:last-child) { margin-bottom: 5px; } @media (max-width: 1199px) { .gallery-cleaning .gallery-caption { padding: 15px; } .gallery-cleaning .gallery-caption .gallery-caption, .gallery-cleaning .gallery-caption h5 { font-size: 18px; } .gallery-cleaning .gallery-caption p { font-size: 14px; line-height: 18px; } } .gallery-cleaning .gallery-caption .gallery-caption, .gallery-cleaning .gallery-caption h5 { font-size: 16px; } .gallery-cleaning .gallery-caption p { font-size: 13px; line-height: 18px; } .gallery-cleaning .before-label, .gallery-cleaning .after-label { color: white; font-size: 12px; text-transform: uppercase; position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.6); line-height: 28px; padding: 0 20px; } @media (max-width: 991px) { .gallery-cleaning .before-label, .gallery-cleaning .after-label { line-height: 22px; padding: 0 15px; } } .gallery-cleaning .before-label { left: 0; } .gallery-cleaning .after-label { right: 0; } .gallery-wrap .twentytwenty-container img:first-child { position: relative !important; z-index: 0; } .gallery-wrap .twentytwenty-container img:last-child { z-index: 1; } .gallery-item:hover .hover { opacity: 1; } .gallery-item:hover .hover .view { transform: scale(1); } .filters-by-category { margin: 25px 0 35px; } .filters-by-category ul { display: flex; justify-content: center; flex-wrap: wrap; padding-left: 0; margin: 0; padding: 0; list-style: none; text-align: center; } .filters-by-category ul li { display: block; margin-right: 4px; margin-bottom: 10px; } @media (max-width: 767px) { .filters-by-category ul li { min-width: calc(50% - 8px); } } @media (max-width: 479px) { .filters-by-category ul li { width: 100%; } } .filters-by-category ul a { display: block; cursor: pointer; text-shadow: none; font-size: 14px; font-weight: 600; line-height: 19px; font-family: 'Poppins', sans-serif; padding: 14px 21px; color: #3d4c58; border: 1px solid #d5d5d5; border-radius: 25px; text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } @media (max-width: 767px) { .filters-by-category ul a { font-size: 15px; line-height: 15px; } } .filters-by-category ul a.selected { background: transparent; border-color: #4ba0e8; color: #3d4c58; box-shadow: inset 0 0 0 1px #4ba0e8; } body:not(.touch) .filters-by-category ul a:hover { text-decoration: none; background: transparent; border-color: #4ba0e8; box-shadow: inset 0 0 0 1px #4ba0e8; } .gallery-wrap { position: relative; min-height: 50vh; } .gallery-wrap.loaded .loading-content { opacity: 0; pointer-events: none; } .gallery-hover-item { display: flex; position: relative; } .gallery-hover-item-before { opacity: 1; position: relative; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; margin-right: -100%; } .gallery-hover-item-after { opacity: 0; position: relative; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .gallery-hover-item:hover .gallery-hover-item-before { opacity: 0; } .gallery-hover-item:hover .gallery-hover-item-after { opacity: 1; } .gallery-hover-item-title { font-size: 26px; line-height: 34px; font-weight: 600; margin-bottom: 25px; font-family: 'Poppins', sans-serif; color: #444; } .gallery-hover-item-state { font-size: 20px; line-height: 30px; font-weight: 60; font-family: 'Poppins', sans-serif; color: #4ba0e8; } .gallery-hover-item-name { font-size: 32px; line-height: 40px; color: #444; font-style: italic; } .gallery-hover-item-txt1, .gallery-hover-item-txt2 { display: flex; position: absolute; top: 0; bottom: 0; align-items: center; } .gallery-hover-item-txt2 { z-index: 1; } .gallery-hover-item p { font-size: 16px; line-height: 28px; } .gallery-hover-item table { font-size: 16px; line-height: 1em; } .gallery-hover-item table td { padding: 10px 10px 0 0; } @media (max-width: 991px) { .gallery-hover { margin-left: -15px; margin-right: -15px; } } .gallery-hover-item-before, .gallery-hover-item-after { height: 435px; background-size: auto 100%; background-position: center; background-repeat: no-repeat; width: 100%; } .gallery-hover-item-before .gallery-hover-item-txt1 { width: 28%; padding: 30px 0 15px 6.2%; left: 0; } .gallery-hover-item-before .gallery-hover-item-txt2 { width: 28%; padding: 30px 5.2% 15px 0; right: 0; text-align: right; justify-content: flex-end; } .gallery-hover-item-after .gallery-hover-item-txt2 { width: 28%; padding: 30px 0 15px 6.2%; left: 0; } .gallery-hover-item-after .gallery-hover-item-txt1 { width: 28%; padding: 30px 5.2% 15px 0; right: 0; text-align: right; justify-content: flex-end; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 227px; padding: 0; left: 41%; bottom: 17%; top: auto; text-align: left; align-items: center; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 40%; transform: translateX(-56%); padding: 6% 0; left: 50%; text-align: left; justify-content: center; align-items: flex-start; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 227px; padding: 0; left: 38%; bottom: 17%; top: auto; text-align: left; align-items: center; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 40%; transform: translateX(-47%); padding: 6% 0; left: 50%; text-align: left; justify-content: center; align-items: flex-start; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 35%; padding: 20px 0 15px 10.2%; left: 0; text-align: left; justify-content: flex-start; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 28%; padding: 20px 8.0% 15px 0; right: 0; left: auto; text-align: right; justify-content: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 28%; padding: 20px 0 15px 7.2%; left: 0; text-align: left; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 35%; padding: 20px 10% 15px 0; right: 0; left: auto; text-align: right; justify-content: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt2 table { float: right; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt2 table td { padding: 10px 0 0 10px; } .gallery-hover-item.style-3 table { margin-top: 20px; } .gallery-hover-carousel .slick-dots { margin: 40px 0 0 0; } .gallery-hover-carousel .slick-slide img { width: 100%; } @media (max-width: 991px) and (min-width: 768px) { .gallery-hover-item.style-1 .gallery-hover-item-before, .gallery-hover-item.style-1 .gallery-hover-item-after { background-position: 80% 0; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 32%; padding: 0 30px 35px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 40%; padding: 30px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: left; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 40%; padding: 30px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: left; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 32%; padding: 0 30px 35px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } } @media (max-width: 767px) { .gallery-hover-item-title { font-size: 28px; line-height: 36px; margin-bottom: 15px; } .gallery-hover-item.style-1 .gallery-hover-item-before { background-position: 8% 0; } .gallery-hover-item.style-1 .gallery-hover-item-after { background-position: 86% 0; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 50%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 50%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-end; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 50%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 50%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } .gallery-hover-item.style-2 .gallery-hover-item-before { background-position: 10% 0; } .gallery-hover-item.style-2 .gallery-hover-item-after { background-position: 85% 0; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 50%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt2 { transform: translateX(0); width: 50%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt2 { transform: translateX(0); width: 50%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 50%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-before { background-position: 15% 0; } .gallery-hover-item.style-3 .gallery-hover-item-after { background-position: 85% 0; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 50%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 50%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 50%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 50%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } } @media (max-width: 479px) { .gallery-hover-item-title { font-size: 28px; line-height: 36px; margin-bottom: 15px; } .gallery-hover-item.style-1 .gallery-hover-item-before { background-position: 25% 0; } .gallery-hover-item.style-1 .gallery-hover-item-after { background-position: 73% 0; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 70%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-1 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 70%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-end; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 70%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-1 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 70%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } .gallery-hover-item.style-2 .gallery-hover-item-before { background-position: 20% 0; } .gallery-hover-item.style-2 .gallery-hover-item-after { background-position: 75% 0; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 70%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-2 .gallery-hover-item-after .gallery-hover-item-txt2 { transform: translateX(0); width: 70%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt2 { transform: translateX(0); width: 70%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-2 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 70%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-before { background-position: 35% 0; } .gallery-hover-item.style-3 .gallery-hover-item-after { background-position: 65% 0; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt1 { width: 70%; padding: 20px 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-start; } .gallery-hover-item.style-3 .gallery-hover-item-before .gallery-hover-item-txt2 { width: 70%; padding: 0 0 35px 30px; left: 0; text-align: left; justify-content: flex-start; align-items: flex-end; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt2 { width: 70%; padding: 20px 30px 0 0; left: auto; right: 0; justify-content: flex-end; align-items: flex-start; text-align: right; } .gallery-hover-item.style-3 .gallery-hover-item-after .gallery-hover-item-txt1 { width: 70%; padding: 0 30px 15px 0; left: auto; right: 0; text-align: right; justify-content: flex-end; align-items: flex-end; } } .gallery-wrap .twentytwenty-container { height: auto !important; } .sm-gallery-row .col { min-width: 20%; flex-basis: 20%; } @media (max-width: 991px) { .sm-gallery-row .col { min-width: 25%; flex-basis: 25%; } .sm-gallery-row .col:nth-child(8) ~ .col { display: none; } } @media (max-width: 479px) { .sm-gallery-row .col { min-width: 50%; flex-basis: 50%; } .sm-gallery-row .col:nth-child(6) ~ .col { display: none; } } /*---------------------------------------*/ /*-------- 4. Special Pages --------*/ /*---------------------------------------*/ /*----- 4.1 Blog Pages --------*/ .blog-post { margin-bottom: 75px; } @media (max-width: 767px) { .blog-post { margin-bottom: 40px; } } .blog-post .post-video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .blog-post .post-video iframe, .blog-post .post-video object, .blog-post .post-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .blog-post .post-music iframe, .blog-post .post-music object, .blog-post .post-music embed { width: 100%; height: auto; border: 0; } .blog-post .post-image { position: relative; border-radius: 0; } .blog-post .post-image img { width: 100%; } .blog-post .post-image .post-link-wrapper { position: absolute; top: 0; width: 100%; height: 100%; text-align: center; } .blog-post .post-image .post-link { font-size: 42px; line-height: 1em; color: #fff; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; text-decoration: none; } @media (max-width: 767px) { .blog-post .post-image .post-link { font-size: 4vw; } } .blog-post .post-image .post-link:hover { color: #4ba0e8; text-decoration: none; } .blog-post .post-title { line-height: 1.1em; margin-bottom: 0; } @media (max-width: 767px) { .blog-post .post-title { font-size: 19px; line-height: 1.3em; } } .blog-post .post-meta { padding: 0; overflow: hidden; list-style: none; } .blog-post .post-meta li { float: left; font-size: 14px; padding-right: 80px; } @media (max-width: 1199px) { .blog-post .post-meta li { padding-right: 40px; } } @media (max-width: 991px) { .blog-post .post-meta li { padding-right: 15px; } } .blog-post .post-meta li i.icon, .blog-post .post-meta li span { display: inline-block; vertical-align: middle; } .blog-post .post-meta li i.icon { font-size: 18px; padding-right: 7px; color: #4ba0e8; } .blog-post .post-meta li:last-child { padding-right: 0; } .blog-post .post-meta .post-meta-reviews { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: -ms-inline-flex; display: inline-flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; } .blog-post .post-meta .post-meta-reviews span { font-size: 14px; } .blog-post .post-meta { margin-bottom: 0; } .blog-post .post-meta:not(:first-child) { margin-top: 35px; } @media (max-width: 479px) { .blog-post .post-meta:not(:first-child) { margin-top: 20px; } } .blog-post .post-read-more:not(:first-child) { margin-top: 35px; } @media (max-width: 479px) { .blog-post .post-read-more:not(:first-child) { margin-top: 18px; } } .blog-post .post-teaser p:last-child { margin-bottom: 0; } .blog-post .post-author { font-size: 14px; font-weight: 500; } .blog-post > *:not(:first-child) { margin-top: 18px; } @media (max-width: 767px) { .blog-post > *:not(:first-child) { margin-top: 12px; } } @media (max-width: 479px) { .blog-post > *:not(:first-child) { margin-top: 6px; } } .side-block .post-preview .post-meta { margin-bottom: 0; } .side-block .post-preview .post-meta:not(:first-child) { margin-top: 21px; } .side-block .post-preview .post-title { margin-top: 8px; font-size: 20px; line-height: 28px; } .post-meta-date, .comment .meta-date { font-size: 14px; font-weight: 400; } .post-carousel { overflow: hidden; } .post-carousel .slick-prev:before, .post-carousel .slick-next:before { font-size: 40px; } @media (max-width: 479px) { .post-carousel .slick-prev:before, .post-carousel .slick-next:before { font-size: 28px; } } .post-carousel .slick-prev { left: 20px; } @media (max-width: 479px) { .post-carousel .slick-prev { left: 5px; } } .post-carousel .slick-next { right: 20px; } @media (max-width: 479px) { .post-carousel .slick-next { right: 5px; } } .post-carousel .slick-prev:before, .post-carousel .slick-next:before { color: #fff; } .blog-post.single { margin-bottom: 0; } .blog-post .post-content { padding-bottom: 50px; border-bottom: 1px solid #efefef; } .post-preview { margin-top: 28px; margin-bottom: 45px; } .post-preview .post-meta { margin-top: 15px; font-size: 13px; } .post-preview .post-title { font-size: 24px; line-height: 30px; margin-top: 10px; } .post-preview .post-title a { color: #3d4c58; text-decoration: none; -webkit-transition: color 200ms ease; -moz-transition: color 200ms ease; -ms-transition: color 200ms ease; -o-transition: color 200ms ease; } .post-preview .post-title a:hover { color: #4ba0e8; } .view-more-post { margin-bottom: 30px; } .page-blog .side-block { margin-bottom: 55px; } .page-blog .side-block h3 { font-size: 30px; line-height: 1.2em; margin-bottom: 20px; } .side-block:last-child { border-bottom: 0; } /* comments */ .comments-block { margin-top: 45px; } .comments-block .comment { margin: 20px 0 40px; } .comments-block .comment .userpic { width: 80px; float: left; font-size: 60px; line-height: 50px; color: #4ba0e8; } @media (max-width: 767px) { .comments-block .comment .userpic { width: 60px; font-size: 40px; line-height: 60px; } } .comments-block .comment .text { overflow: hidden; padding-top: 4px; } .comments-block .comment .text p { margin-bottom: 10px; } .comments-block .comment .text .meta { padding-bottom: 10px; margin-bottom: 12px; font-size: 14px; border-bottom: 1px solid #efefef; padding-bottom: 7px; } .comments-block .comment .text .meta .icon { padding-right: 5px; } @media (max-width: 479px) { .comments-block .comment .text .meta-date { display: block; } } .comments-block .comment .text .meta-author { padding-right: 30px; font-size: 14px; font-weight: 500; } .comments-block .comment .text a.reply { display: inline-block; padding: 0 11px; border-radius: 2px; color: #fff; background-color: #4ba0e8; font-size: 10px; line-height: 23px; font-weight: bold; text-transform: uppercase; text-decoration: none; -webkit-transition: color 200ms ease; -moz-transition: color 200ms ease; -ms-transition: color 200ms ease; -o-transition: color 200ms ease; } .comments-block .comment .text a.reply:hover { background-color: #4ba0e8; } .comments-block .comment.replay { margin-left: 115px; } @media (max-width: 767px) { .comments-block .comment.replay { margin-left: 70px; } } @media (max-width: 479px) { .comments-block .comment.replay { margin-left: 30px; } } .comment-form .textarea-custom { height: 170px; } .blog-isotope { overflow: hidden; margin-bottom: 50px; margin-top: 10px; overflow: visible; } .blog-isotope .post-meta li.author { display: none; } .blog-isotope .post-image { margin-left: -20px; margin-right: -20px; margin-top: -20px; } .blog-isotope .blog-post { position: relative; float: left; width: calc(33.333% - 20px); text-align: center; padding: 20px 20px 40px; margin-bottom: 30px; border: 1px solid #e1e5e9; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .blog-isotope .blog-post .post-author { display: none; } .blog-isotope .blog-post .quote { text-align: left; font-size: 16px; line-height: 24px; } @media (max-width: 1199px) { .blog-isotope .blog-post { width: calc(50% - 15px); } } @media (max-width: 767px) { .blog-isotope .blog-post { width: 100%; } } @media (min-width: 768px) { .blog-isotope .post-meta { font-size: 14px; } .blog-isotope .post-title { font-size: 24px; line-height: 30px; } .blog-isotope .post-image .post-link { font-size: 22px; } .blog-isotope .quote { margin-top: 15px; margin-bottom: 20px; padding-left: 80px; } .blog-isotope .post-read-more .btn-sm { font-size: 14px; } .blog-isotope .post-meta:not(:first-child) { margin-top: 20px; } .blog-isotope .post-read-more:not(:first-child) { margin-top: 20px; } .blog-isotope > *:not(:first-child) { margin-top: 12px; } } /*----- 4.2 Shop Pages --------*/ .column-filters { margin-bottom: 35px; } .column-filters-inside { background: #f6f6f7; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .column-filters .side-block { border-color: #ebebeb; padding: 20px 20px 30px; margin-bottom: 10px; border-bottom: 1px solid #e3e3e4; } .column-filters .side-block h3 { margin-bottom: 10px; } .column-filters .category-list { margin-top: 10px; margin-bottom: 15px; } .column-filters .category-list li a { font-weight: 400; } .column-filters .category-list li a:not(:hover) { color: #677d8f; } .prd-sm { position: relative; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .prd-sm:not(:last-child) { margin-bottom: 20px; } .prd-sm-img { width: 88px; min-width: 88px; } .prd-sm-delete { position: absolute; top: 0; right: -4px; cursor: pointer; font-size: 16px; color: #4ba0e8; } .prd-sm-delete:hover { opacity: .5; } .prd-sm-info { padding: 0 15px; } .prd-sm-info h3 { font-size: 14px; line-height: 22px; text-transform: none; font-weight: 400; color: #3d4c58; } .prd-sm-info h3 a { text-decoration: none; } .prd-sm-info h3 a:hover { text-decoration: underline; } .prd-sm-info .price { font-size: 20px; margin-top: 10px; color: #3d4c58; font-weight: 600; } .header-cart-dropdown .prd-sm-info { padding-right: 30px; } .prd-grid:not(.prd-carousel) { margin: -25px -15px 0; display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .prd-grid.prd-carousel { margin: -10px 0 0; } .prd-grid:not(.prd-carousel) .prd { width: calc(33.333% - 30px); float: left; } .prd { margin: 20px 15px 30px; } .prd-img img { width: 100%; } .prd-info { padding: 0 15px; text-align: center; } .prd-info h3 { margin-top: 14px; margin-bottom: 0; font-size: 15px; line-height: 24px; text-transform: none; color: #3d4c58; font-weight: 400; } .prd-info h3 a { text-decoration: none; } .prd-info h3 a:hover { text-decoration: underline; } .prd-info .price { font-size: 24px; margin-top: 13px; font-weight: 600; } .prd-info .btn { min-width: 0; margin-top: 18px; height: 41px; font-size: 12px; line-height: 15px; font-weight: 600; padding: 12px 25px 15px; } .prd-info .btn [class*='icon-'] { font-size: 18px; color: #fff; padding-right: 8px; vertical-align: text-bottom; } .prd .rating + .price { margin-top: 10px; } .rating i { font-size: 12px; padding: 0 3px; color: #ffb400; } .rating-4 i:nth-child(5) { color: #c2c2c2; } .rating-3 i:nth-last-child(-n+2) { color: #c2c2c2; } .rating-2 i:nth-last-child(-n+3) { color: #c2c2c2; } .rating-1 i:nth-last-child(-n+4) { color: #c2c2c2; } .rating-0 i { color: #c2c2c2; } .rating-text { display: inline-block; vertical-align: baseline; padding-left: 15px; font-size: 14px; } h5 > .rating { margin-right: 15px; } @media (min-width: 1199px) { .prd-grid:not(.prd-carousel) .prd:nth-child(3n) { margin-right: 0; } .prd-grid:not(.prd-carousel) .prd:nth-child(3n+1) { clear: left; } } @media (max-width: 1199px) and (min-width: 480px) { .prd-grid:not(.prd-carousel) .prd { width: calc(50% - 30px); } .prd-grid:not(.prd-carousel) .prd:nth-child(2n) { margin-right: 0; } .prd-grid:not(.prd-carousel) .prd:nth-child(2n+1) { clear: left; } } @media (max-width: 479px) { .prd-grid { margin-right: 0; margin-left: 0; } .prd-grid:not(.prd-carousel) .prd { width: calc(50% - 2px); margin-right: 1px; margin-left: 1px; } .prd-info a.btn i { display: none; } } .product-card img { width: 100%; } .prd-carousel .slick-next { right: -50px; } .prd-carousel .slick-prev { left: -50px; } .filters-row { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 15px 0 30px; } @media (max-width: 479px) { .filters-row-left { min-width: 100%; } } .filters-row-right { margin-left: auto; } @media (max-width: 479px) { .filters-row-right { padding-top: 18px; } } .filters-row .form-inline { display: inline-block; } .filters-row .form-inline:not(:first-child) { margin-left: 3vw; } .filters-row .form-inline select { min-width: 200px; margin: 0; } @media (max-width: 479px) { .filters-row .form-inline { display: block; margin-left: 0 !important; margin-top: 10px; } } .simple-pagination { display: inline-block; font-size: 15px; } .simple-pagination span, .simple-pagination a { display: inline-block; vertical-align: top; padding: 2px 8px; text-decoration: none; } .simple-pagination a.active { color: #4ba0e8; } .product-block .rating i { font-size: 12px; } .product-block-info > *:not(:first-child):not(span) { margin-top: 15px; } .product-previews { float: left; width: 106px; } @media (max-width: 479px) { .product-previews { width: 80px; } } .product-previews img { width: 100%; } .product-previews-item { display: block; margin-bottom: 11px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .product-previews-item:hover { opacity: .7; } .product-block-add-to-cart { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: -ms-inline-flex; display: inline-flex; -webkit-align-items: center; -ms-align-items: center; align-items: center; height: 70px; font-size: 18px; line-height: 32px; border-radius: 35px; padding-left: 50px; padding-right: 50px; } @media (max-width: 991px) { .product-block-add-to-cart { padding-right: 25px; padding-left: 25px; } } .product-block-add-to-cart [class*='icon'] { font-size: 20px; } .product-block-gallery { margin-bottom: 30px; overflow: hidden; } .product-block-mainimage { float: right; width: calc(100% - 127px); } @media (max-width: 479px) { .product-block-mainimage { width: calc(100% - 100px); } } .product-block-mainimage img { width: 100%; } .product-block-title { font-size: 24px; line-height: 34px; margin-bottom: 0; } .product-block-price { font-size: 36px; line-height: 36px; font-weight: 600; color: #3d4c58; } .product-block-price-comment { font-size: 14px; margin-top: 0 !important; } @media (max-width: 479px) { .btn.product-block-add-to-cart { width: 100%; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; margin-top: 15px; } } .product-block-description { padding: 12px 0px 25px; } .product-block-actions { margin-top: 37px !important; } @media (max-width: 479px) { .product-block-actions { text-align: center; } } .qty-count { height: 70px; background-color: #f5f5f5; display: inline-block; border-radius: 5px; margin-right: 25px; } .count-add, .count-input, .count-reduce { float: left; margin-right: -1px; position: relative; z-index: 0; } .count-add, .count-reduce { height: 70px; width: 30px; text-align: center; line-height: 70px; color: #677d8f; font-size: 20px; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .count-add:hover, .count-reduce:hover { color: #000; cursor: pointer; } .count-input { width: 57px; height: 70px; line-height: 15px; border: 1px solid #f5f5f5; border-radius: 5px; text-align: center; color: #677d8f; } .zoomWrapper { position: relative; } .zoomContainer { z-index: 100; } .zoomLens { border: 1px solid #b0b0b0 !important; } .zoomWindowContainer > * { border: 2px solid #b0b0b0 !important; } /*----- 5. Custom Animation --------*/ @media (min-width: 768px) { .image-scale { position: relative; overflow: hidden; display: block; } .image-scale > a { display: block; overflow: hidden; } .image-scale img { -webkit-transition: transform 0.4s ease-in-out 0.05s; -moz-transition: transform 0.4s ease-in-out 0.05s; -ms-transition: transform 0.4s ease-in-out 0.05s; -o-transition: transform 0.4s ease-in-out 0.05s; -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: optimizeQuality; vertical-align: middle; max-width: 100%; } .image-scale:hover img { -webkit-transform: scale3d(1.1, 1.1, 1) rotate(0.0001deg); transform: scale3d(1.1, 1.1, 1) rotate(0.0001deg); } } @media (min-width: 768px) { .image-scale-color { position: relative; overflow: hidden; display: block; } .image-scale-color > a { display: block; overflow: hidden; } .image-scale-color img { -webkit-transition: transform 0.4s ease-in-out 0.05s; -moz-transition: transform 0.4s ease-in-out 0.05s; -ms-transition: transform 0.4s ease-in-out 0.05s; -o-transition: transform 0.4s ease-in-out 0.05s; -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: optimizeQuality; vertical-align: middle; max-width: 100%; } .image-scale-color:after { content: ''; background: #4ba0e8; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; } .image-scale-color:hover:after { opacity: 0.2; } .image-scale-color:hover img { -webkit-transform: scale3d(1.1, 1.1, 1) rotate(0.0001deg); transform: scale3d(1.1, 1.1, 1) rotate(0.0001deg); } } @-webkit-keyframes arrowUpDown { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-10px); } 60% { -webkit-transform: translateY(-5px); } } @-moz-keyframes arrowUpDown { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-10px); } 60% { -moz-transform: translateY(-5px); } } @-o-keyframes arrowUpDown { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-10px); } 60% { -o-transform: translateY(-15px); } } @keyframes arrowUpDown { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /*----------------------------------------*/ /*---- 6. Vendor overlay styles ------*/ /*----------------------------------------*/ /* slider */ .slick-loading .slick-list { background: #ffffff url('../images/ajax-loader.gif') center center no-repeat; } /* arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 30px; height: 30px; margin-top: -15px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 200; text-align: center; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; opacity: .5; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before, .slick-prev.slick-disabled:after, .slick-next.slick-disabled:after { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'cleaning'; font-size: 36px; line-height: 40px; color: #8a9aa7; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev:hover:before, .slick-next:hover:before { color: #4ba0e8; } .slick-prev { left: -60px; } .slick-prev:before { content: "\e90b"; } .slick-next { right: -60px; } .slick-next:before { content: "\e909"; } /* dots */ .slick-slider { padding: 0; list-style: none; } .slick-slider.nav-dot { margin-bottom: 75px; } @media (max-width: 767px) { .slick-slider { margin-bottom: 30px; } } .slick-dots { display: block; width: 100%; padding: 0; margin: 38px 0 -18px; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0 -4px 0 0; padding: 0; cursor: pointer; } .slick-dots li button { position: relative; display: block; width: 9px; height: 9px; margin: 0 10px; padding: 0; color: transparent; background-color: transparent; border: 0; outline: none; border-radius: 50%; background: #e1e5e9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } @media (max-width: 479px) { .slick-dots li button { width: 9px; height: 9px; } } .slick-dots li button:after { display: none; } .slick-dots li button:focus { background-color: transparent; } .slick-dots li.slick-active button, .slick-dots li.slick-active button:hover { box-shadow: 0 0 0 2px #4ba0e8; background-color: #fff; } .slick-dots li button:hover { outline: none; background-color: #4ba0e8; } @media (max-width: 991px) { .slick-slide .animation { opacity: 1 !important; animation-name: none !important; -webkit-animation-name: none !important; } } .arrows-center .slick-prev, .arrows-center .slick-next { position: relative; float: left; top: auto; bottom: -30px; left: 50%; height: 55px; width: 65px; margin-bottom: 30px; background-color: #fff; border: 1px solid #edeff1; opacity: 1; z-index: 1; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; } .arrows-center .slick-prev:before, .arrows-center .slick-next:before { font-size: 14px; color: #3d4b57; } .arrows-center .slick-prev:hover, .arrows-center .slick-next:hover { background-color: #f9f9f9; } .arrows-center .slick-prev:hover:before, .arrows-center .slick-next:hover:before { color: #3d4b57; } .arrows-center .slick-prev { border-radius: 27px 0 0 27px; transform: translateX(-100%); box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.05); background-color: #4ba0e8; } .arrows-center .slick-prev:before { color: #fff; } .arrows-center .slick-next { border-radius: 0 27px 27px 0; transform: translateX(-100%); box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.05); } .arrows-center .slick-prev:before { content: "\e935"; } .arrows-center .slick-next:before { content: "\e936"; }
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula