.team-block, .slider-block .info .cont, .slider-block .slider .slick-list .slick-track .item .content, .shop-block, .quotes-block .cont, .quotes-block .intro, .products-block, .products-boxes-block, .product-intro-block .cont .gallery, .product-intro-block, .maps-block, .left-right-block .content, .icons-block, .gallery-block .gallery, .gallery-block h2, .form-block .bg .content, .checklist-block, .breadcrumbs-block, .boxes-block .boxes, .bar-block .cont, .advantages-block .cont, .accordion-block .accord {
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.slider-block .slider .slick-list .slick-track .item .content .cont a, .product-intro-block .cont .col .text a#byo, .left-right-block .content .item .col a.btn, .form-block .bg .content form input[type=submit], .accordion-block .accord .item .text a.link {
display: inline-block;
margin: 0;
font-family: "Montserrat", sans-serif;
transition: all 0.3s ease-in-out;
position: relative;
text-decoration: none;
font-size: 14px;
border-radius: 14px;
background-color: var(--kl-orange);
border: none;
color: white;
padding: 18px 25px;
}
.slider-block .slider .slick-list .slick-track .item .content .cont a:hover, .product-intro-block .cont .col .text a#byo:hover, .left-right-block .content .item .col a.btn:hover, .form-block .bg .content form input[type=submit]:hover, .accordion-block .accord .item .text a.link:hover {
background-color: var(--kl-black);
cursor: pointer;
}
:root {
--kl-black: #000000;
--kl-orange: #F37132;
--kl-grey: #5E6675;
--kl-dgrey: #354756;
--kl-lgrey: #7176781F;
--kl-dblue: #0C215C;
}
.has-kitline-orange-background-color {
background-color: var(--kl-orange);
}
.has-kitline-dblue-background-color {
background-color: var(--kl-dblue);
}
.has-obj-yellow-color {
color: var(--obj-yellow);
}
.has-obj-dblue-color {
color: var(--obj-dblue);
}
.has-obj-blue-color {
color: var(--obj-blue);
}
.dev {
background-color: red;
color: white;
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
padding: 10px 15px 7px;
font-size: 14px;
z-index: 110;
font-family: "Arial";
font-weight: 600;
}
.accordion-block {
position: relative;
}
.accordion-block .accord .item {
border-bottom: 1px solid var(--kl-lgrey);
padding: 15px 0 15px 30px;
box-sizing: border-box;
position: relative;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.accordion-block .accord .item span.title {
font-size: 16px;
line-height: 23px;
font-family: "kallisto", sans-serif;
color: var(--solace-navy);
transition: color 0.4s ease-in-out;
}
.accordion-block .accord .item .text {
padding: 5px 0 0;
box-sizing: border-box;
}
.accordion-block .accord .item .text h2 {
font-size: 24px;
}
.accordion-block .accord .item .text p {
font-size: 15px;
}
.accordion-block .accord .item .text a.link {
position: relative;
}
.accordion-block .accord .item .toggle {
width: 18px;
height: 18px;
position: absolute;
top: 17px;
left: 4px;
border-radius: 20px;
transition: all 0.3s ease-in-out;
}
.accordion-block .accord .item .toggle svg {
transition: transform 0.3s ease-in-out;
}
.accordion-block .accord .item .toggle:hover svg polyline {
stroke: black;
}
.accordion-block .accord .item.open .toggle svg {
transform: translate(-10%, 0%) rotate(90deg);
}
.accordion-block .accord .item:hover {
cursor: pointer;
}
.accordion-block .accord .item:hover span.title {
color: var(--solace-orange);
}
.accordion-block .accord .item:first-child {
border-top: 1px solid var(--c-lightgrey);
}
@media screen and (max-width: 844px) {
.accordion-block .accord .item span.title {
max-width: 92%;
display: inline-block;
}
.accordion-block .accord .item .text {
padding: 20px 0 0 0;
}
.wp-block-column .accordion-block .accord {
padding: 0;
}
}
.advantages-block .cont {
display: flex;
flex-wrap: wrap;
padding: 20px 40px;
}
.advantages-block .cont .item {
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.advantages-block .cont .item img {
width: 100px;
object-fit: contain;
object-position: center;
}
.advantages-block .cont .item p {
padding: 20px;
font-size: 22px;
line-height: 27px;
font-weight: 700;
color: var(--kl-dblue);
}
.bar-block {
background-color: var(--kl-grey);
top: -1px;
position: relative;
}
.bar-block .cont {
max-width: 800px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 15px;
box-sizing: border-box;
}
.bar-block .cont h2 {
margin: 0;
color: white;
border-right: 1px solid white;
padding: 5px 20px 5px 0;
}
.bar-block .cont h2 span {
color: var(--kl-orange);
}
.bar-block .cont p {
color: white;
font-size: 18px;
padding: 5px 20px;
}
@media screen and (max-width: 844px) {
.bar-block .cont h2 {
border: none;
padding: 5px 0;
}
.bar-block .cont p {
text-align: center;
}
}
.boxes-block {
position: relative;
}
.boxes-block .boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.boxes-block .boxes .box {
width: 32.5%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
justify-content: center;
text-decoration: none;
transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
background-color: var(--kl-dgrey);
position: relative;
line-height: 0;
min-height: 395px;
padding: 30px 20px;
box-sizing: border-box;
}
.boxes-block .boxes .box img {
position: relative;
height: 165px;
object-fit: contain;
object-position: center;
width: 100%;
border-radius: 5px;
overflow: hidden;
}
.boxes-block .boxes .box .content {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
height: 100%;
}
.boxes-block .boxes .box .content h3 {
color: var(--kl-orange);
width: 100%;
display: inline-block;
}
.boxes-block .boxes .box .content p {
color: white;
}
.boxes-block .boxes .box .content a {
color: white;
font-family: "Montserrat", sans-serif;
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-top: 30px;
}
.boxes-block .boxes .box .content a:hover {
color: var(--kl-orange);
}
.boxes-block .boxes a:hover .container h3 {
color: var(--mal-yellow);
}
.wp-block-column .boxes-block {
padding: 0;
}
@media screen and (max-width: 844px) {
.boxes-block .boxes .box {
width: 100%;
margin: 0 0 10px;
}
.boxes-block .boxes .box .image img {
object-fit: cover;
object-position: center;
}
}
.breadcrumbs-block {
position: relative;
position: relative;
padding: 20px 20px !important;
}
.breadcrumbs-block .dev {
left: -150px;
}
.checklist-block {
display: flex;
flex-wrap: wrap;
padding: 20px 0;
justify-content: space-between;
}
.checklist-block .col {
width: 48.5%;
}
.checklist-block .col.img {
align-items: center;
justify-content: center;
display: flex;
}
.checklist-block .col.img img {
width: 400px;
object-fit: contain;
object-position: center;
}
.config-block {
padding: 0 0 50px;
}
.config-block .variable .product .price {
margin: 0;
font-weight: 600;
text-align: left;
}
.config-block .variable .product .price .amount {
width: auto;
}
.config-block .variable .product .images {
padding: 0 50px;
box-sizing: border-box;
}
.config-block .variable .product .images img {
max-height: 400px;
object-fit: contain;
object-position: center;
}
.config-block .variable .product .images .woocommerce-product-gallery__image:nth-child(n+2) {
width: 15%;
margin: 1% 1% 1% 0;
overflow: hidden;
border-radius: 4px;
border: 1px solid #e9e9e9;
}
.config-block .variable .product .images .woocommerce-product-gallery__image:nth-child(n+2) a {
padding: 20px;
box-sizing: border-box;
}
.config-block .variable .product .images .woocommerce-product-gallery__image:nth-child(n+2) a img {
height: 80px;
object-fit: contain;
object-position: center;
}
.config-block .variable .product .images .woocommerce-product-gallery__image:nth-child(n+8) {
margin-right: 0;
}
.config-block .variable .product form.cart .variations {
margin-bottom: 10px;
}
.config-block .variable .product form.cart .variations select {
width: 220px;
padding: 10px 20px;
box-sizing: border-box;
-moz-appearance: none; -webkit-appearance: none; appearance: none;
border-radius: 4px;
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-down.svg) no-repeat 95% center;
background-size: 15px;
}
.config-block .variable .product form.cart .variations tr {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 10px 0;
background-color: transparent;
border-bottom: 1px solid var(--kl-lgrey);
}
.config-block .variable .product form.cart .variations tr th label {
font-size: 16px;
font-weight: 500;
margin-left: 10px;
}
.config-block .variable .product form.cart .variations tr:nth-child(1) {
border-top: 1px solid var(--kl-lgrey);
}
.config-block .variable .product form.cart .variations .reset_variations {
position: absolute;
right: 0;
top: -44px;
}
.config-block .variable .product form.cart .single_variation_wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.config-block .variable .product form.cart .single_variation_wrap button[type=submit] {
margin-left: 10px;
}
.config-block .variable .product form.cart .single_variation_wrap .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.config-block .variable .product form.cart .single_variation_wrap .woocommerce-variation {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.config-block .variable .product form.cart .single_variation_wrap .woocommerce-variation .woocommerce-variation-price {
width: 100%;
text-align: center;
margin: 10px 0 15px;
}
.config-block .variable .product form.cart .single_variation_wrap .woocommerce-variation .woocommerce-variation-price .price {
font-weight: 600;
color: var(--kl-orange) !important;
}
.config-block .variable .product form.cart .single_variation_wrap .woocommerce-variation .woocommerce-variation-price .price .amount {
width: auto;
}
@media screen and (max-width: 844px) {
.config-block .variable .product .images {
padding: 0;
}
.config-block .variable .product .images .woocommerce-product-gallery__image:nth-child(n+2) {
width: 31%;
}
}
.download-list-block .cont .item a {
font-size: 14px;
color: var(--obj-grey);
display: inline-block;
margin: 2px 0;
}
.download-list-block .cont .item a[href$=".pdf"] {
background: url(//www.kitlinedesign.com/wp-content/themes/kitline/images/pdf.svg) left center no-repeat;
padding: 5px 0 5px 25px;
background-size: 18px;
}
[data-type="acf/form"] .form-block {
min-height: 38px;
background-color: #f7f7f7;
}
[data-type="acf/form"] .form-block:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: transparent;
z-index: 100;
top: 0;
}
.form-block {
position: relative;
padding: 0;
}
.form-block .bg .content {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
box-sizing: border-box;
padding: 0px 0px 40px !important;
justify-content: space-between;
position: relative;
z-index: 10;
align-items: flex-start;
}
.form-block .bg .content p strong {
font-size: 18px;
margin-top: 10px;
display: inline-block;
width: 100%;
}
.form-block .bg .content .info {
display: none;
}
.form-block .bg .content .info.active {
display: block;
}
.form-block .bg .content select {
-webkit-appearance: none;
-moz-appearance: none;
padding: 19px;
width: 100%;
box-sizing: border-box;
border: none;
border: 1px solid var(--kl-lgrey);
font-family: "kallisto", sans-serif;
font-weight: 500;
outline-width: 0;
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-down.svg) no-repeat 97% center;
background-size: 15px;
}
.form-block .bg .content form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
position: relative;
padding: 20px 0 20px;
}
.form-block .bg .content form .col {
width: 48%;
}
.form-block .bg .content form label {
display: inline-block;
width: 100%;
font-family: "kallisto", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 14px;
color: #757575;
padding: 10px 0;
font-family: "Montserrat", sans-serif;
}
.form-block .bg .content form label span {
margin-top: 5px;
display: inline-block;
width: 100%;
}
.form-block .bg .content form label input {
padding: 20px 20px;
box-sizing: border-box;
width: 100%;
border: 1px solid var(--kl-lgrey);
}
.form-block .bg .content form label textarea {
width: 100%;
padding: 20px 20px;
box-sizing: border-box;
border: 1px solid var(--kl-lgrey);
height: 170px;
}
.form-block .bg .content form input[type=submit] {
padding: 21px 80px 20px !important;
margin-top: 12px !important;
}
.form-block .bg .content form .wpcf7-response-output {
width: 100%;
text-align: center;
border: none;
padding: 0;
position: relative;
bottom: 0;
margin: 20px 0;
font-family: "kallisto", sans-serif;
color: var(--f-orange);
}
.form-block .bg .content form .wpcf7-spinner {
position: absolute;
bottom: 14px;
left: 50%;
transform: translate(-50%, 0);
}
.form-block .bg .content p.disclaimer {
font-size: 12px;
line-height: 20px;
color: #0A2433;
margin: 0;
padding: 0;
text-align: center;
}
.form-block .bg .content ul {
margin-left: 0;
}
.form-block .bg .content ul li {
position: relative;
color: var(--miag-blue);
list-style: none;
padding: 9px 0 6px 45px;
}
.form-block .bg .content ul li:before {
content: "";
width: 30px;
height: 30px;
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/circle-tick.svg) no-repeat top center;
background-size: 28px;
position: absolute;
top: 7px;
left: 0;
}
.form-block .bg.form-only .content {
justify-content: center;
}
.form-block .bg.form-only .content .col {
width: 100%;
}
.form-block .bg.form-only .content .col:nth-child(1) {
display: none;
}
.wp-block-columns .contact-block {
padding: 0;
}
@media screen and (max-width: 844px) {
.form-block .bg .content {
padding: 20px 0 !important;
}
.form-block .bg .content .col {
width: 100% !important;
}
.form-block .bg .content .col form label {
width: 100%;
}
.form-block .bg .content .col form label span {
width: 100%;
}
.form-block .bg .content .col form input[type=submit] {
width: 100%;
}
}
.gallery-block {
background-color: var(--miag-dblue2);
padding: 40px 0 50px;
position: relative;
}
.gallery-block h2 {
margin-bottom: 30px !important;
}
.gallery-block .gallery {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
.gallery-block .gallery a {
width: calc(25% - 8px);
height: 240px;
}
.gallery-block .gallery a img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
left: 0;
top: 0;
border-radius: 4px;
}
.gallery-block .gallery a:hover img {
width: 104%;
height: 104%;
top: -2%;
left: -2%;
}
@media screen and (max-width: 844px) {
.gallery-block {
padding: 20px 0 0;
}
.gallery-block .gallery {
justify-content: center;
}
.gallery-block .gallery a {
width: calc(50% - 8px);
height: 150px;
}
}
.icons-block {
position: relative;
max-width: 900px;
}
.icons-block .cont .item {
height: 120px;
width: 15%;
display: inline-block;
}
.icons-block .cont .item img {
display: inline-block;
height: 100%;
width: 100%;
max-width: 300px;
padding: 20px;
box-sizing: border-box;
filter: grayscale(1);
transition: all 0.3s ease-in-out;
}
.icons-block .cont .item img:hover {
filter: grayscale(0);
}
@media screen and (max-width: 844px) {
.icons-block .cont .item {
height: auto;
width: 50%;
}
}
.left-right-block .content .item {
display: flex;
flex-wrap: wrap;
margin: 40px 0 60px;
gap: 60px;
}
.left-right-block .content .item .col {
flex: 1 0 45%;
box-sizing: border-box;
}
.left-right-block .content .item .col img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
transform: translateY(80px) translateZ(0);
opacity: 0;
}
.left-right-block .content .item .col h3 {
color: var(--miag-dblue);
margin-bottom: 30px;
}
.left-right-block .content .item .col a.btn {
padding: 10px 55px !important;
margin-top: 20px !important;
display: inline-block !important;
}
.left-right-block .content .item.is-inview img {
transform: translateY(0) translateZ(0);
opacity: 1;
}
.left-right-block .content .item:nth-child(2n) .col:nth-child(1) {
order: 2;
}
.left-right-block .content .item:nth-child(2n) .col:nth-child(2) {
order: 1;
}
@media screen and (max-width: 844px) {
.left-right-block .content .item {
margin: 20px 0;
}
.left-right-block .content .item .col {
width: 100% !important;
padding: 0 !important;
}
.left-right-block .content .item .col img {
margin: 30px 0;
object-fit: cover;
object-position: center;
}
.left-right-block .content .item .col:nth-child(1) {
order: 2 !important;
}
.left-right-block .content .item .col:nth-child(2) {
order: 1 !important;
}
}
.maps-block {
position: relative;
}
.maps-block .content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.maps-block .content .item {
width: 45%;
margin-bottom: 30px;
}
.maps-block .content .item h4 {
margin: 20px 0 10px;
padding: 0;
}
.maps-block .content .item p {
font-size: 14px;
line-height: 19px;
}
.maps-block .content .item iframe {
display: inline-block;
width: 300px;
height: 240px;
}
@media screen and (max-width: 844px) {
.maps-block .content .item {
width: 100%;
}
.maps-block .content .item iframe {
width: 100%;
}
}
.product-intro-block h1 {
color: var(--kl-orange);
font-size: 26px;
line-height: 32px;
}
.product-intro-block .cont {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product-intro-block .cont .col {
width: 48.5%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.product-intro-block .cont .col .text p:first-of-type {
padding-top: 0;
}
.product-intro-block .cont .col .text p.small {
font-size: 13px;
line-height: 17px;
font-weight: 600;
margin-top: 10px;
}
.product-intro-block .cont .col .text .price {
width: 100%;
color: var(--kl-orange);
font-weight: 400;
font-size: 20px;
margin: 15px 0 30px;
}
.product-intro-block .cont .col .text a#byo {
text-transform: uppercase;
font-weight: 600;
padding: 10px 40px 10px 20px;
background-image: url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-down-white.svg);
background-position: 93% center;
background-repeat: no-repeat;
background-size: 14px;
}
.product-intro-block .cont .col .text a#byo:hover {
background-position: 93% 60%;
}
.product-intro-block .cont .col .text a.img {
position: relative;
display: block;
}
.product-intro-block .cont .col .text a.img img {
border-radius: 4px;
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.product-intro-block .cont .col .text a.img:hover img {
width: 110%;
height: 110%;
top: -5%;
}
.product-intro-block .cont .col .text a.img .mag {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/mag.svg) no-repeat center center;
background-size: 30px;
z-index: 1;
filter: brightness(10);
}
.product-intro-block .cont .gallery {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
padding: 20px 0 0 !important;
gap: 10px;
}
.product-intro-block .cont .gallery > p {
width: 100%;
margin: 0;
padding: 0;
}
.product-intro-block .cont .gallery a {
width: calc(20% - 10px);
height: 155px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #e9e9e9;
}
.product-intro-block .cont .gallery a img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
left: 0;
top: 0;
}
.product-intro-block .cont .gallery a:hover img {
width: 110%;
height: 110%;
top: -5%;
}
@media screen and (max-width: 844px) {
.product-intro-block .cont .col {
width: 100%;
}
.product-intro-block .cont .gallery a {
width: calc(33.33% - 9px);
height: 120px;
}
}
.products-boxes-block {
position: relative;
}
.products-boxes-block .products-cont {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
gap: 1.25%;
}
.products-boxes-block .products-cont h4 {
margin-bottom: 20px;
}
.products-boxes-block .products-cont .item {
font-size: 13px;
color: var(--emcb-grey) !important;
text-decoration: none;
font-weight: 400;
background-color: var(--kl-lgrey);
width: 32.5%;
margin-bottom: 1.25%;
min-height: 413px;
}
.products-boxes-block .products-cont .item .img {
overflow: hidden;
border: 1px solid #d2d2d2;
border-bottom: none;
height: 250px;
}
.products-boxes-block .products-cont .item .img img {
width: 100%;
height: 250px;
object-fit: cover;
object-position: center;
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.products-boxes-block .products-cont .item:hover {
background-color: #cecece;
}
.products-boxes-block .products-cont .item:hover img {
transform: scale(1.1);
}
.products-boxes-block .products-cont .item:hover .cont .btn {
background-color: var(--kl-orange);
}
.products-boxes-block .products-cont .item .cont {
padding: 20px;
box-sizing: border-box;
}
.products-boxes-block .products-cont .item .cont p {
color: var(--kl-orange);
}
.products-boxes-block .products-cont .item .cont p.title {
color: var(--kl-dblue);
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.products-boxes-block .products-cont .item .cont .btn {
background-color: var(--kl-dgrey);
color: white;
padding: 5px 25px 5px 15px;
display: inline-block;
border-radius: 15px;
font-size: 13px;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
position: relative;
transition: background-color 0.3s ease-in-out;
}
.products-boxes-block .products-cont .item .cont .btn:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
right: 5px;
top: 50%;
transform: translate(0%, -50%) rotate(-90deg);
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-down-white.svg) no-repeat center center;
background-size: 10px;
}
.products-boxes-block .products-cont .item .cont .btn:hover {
background-color: var(--kl-orange);
}
.products-boxes-block .swiper-scrollbar {
width: 1040px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
@media screen and (max-width: 844px) {
.products-boxes-block .products-cont .item {
width: 100%;
margin-bottom: 20px;
}
}
.products-block {
position: relative;
}
.products-block .products-wrapper {
padding: 20px 0;
}
.products-block .products-wrapper h4 {
margin-bottom: 20px;
}
.products-block .products-wrapper .item {
font-size: 13px;
color: var(--emcb-grey) !important;
text-decoration: none;
font-weight: 400;
background-color: var(--kl-lgrey);
}
.products-block .products-wrapper .item .img {
overflow: hidden;
height: 200px;
}
.products-block .products-wrapper .item .img img {
border: 1px solid #d2d2d2;
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.products-block .products-wrapper .item:hover {
background-color: #cecece;
}
.products-block .products-wrapper .item:hover img {
transform: scale(1.1);
}
.products-block .products-wrapper .item .cont {
padding: 20px;
box-sizing: border-box;
}
.products-block .products-wrapper .item .cont p {
color: var(--kl-orange);
}
.products-block .products-wrapper .item .cont p.title {
color: var(--kl-dblue);
font-size: 16px;
font-weight: 700;
line-height: 22px;
}
.products-block .swiper-scrollbar {
width: 1040px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.quotes-block {
background-color: black;
padding: 80px 0 50px;
position: relative;
}
.quotes-block .intro > h3 {
color: white;
display: block;
text-align: center;
}
.quotes-block .intro > h3:after {
background-color: white;
}
.quotes-block .cont {
max-width: 900px;
padding: 30px 0;
}
.quotes-block .cont .item p {
color: white;
text-align: center;
margin: 2px 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;
line-height: 26px;
}
.quotes-block .cont .item p:last-child {
font-weight: 600;
font-family: "kallisto", sans-serif;
color: var(--mal-yellow);
text-transform: uppercase;
margin-top: 20px;
font-weight: 800;
}
.quotes-block .cont .slick-list {
overflow: visible;
}
.quotes-block .cont .slick-list .slick-track .slick-slide {
opacity: 0.2;
filter: blur(5px);
transition: all 0.8s ease-in-out;
padding: 0 50px;
box-sizing: border-box;
}
.quotes-block .cont .slick-list .slick-track .slick-slide.slick-current {
opacity: 1;
filter: blur(0);
}
.quotes-block .cont .slick-dots {
text-align: center;
margin: 10px 0 0;
padding: 0;
}
.quotes-block .cont .slick-dots li {
display: inline-block;
}
.quotes-block .cont .slick-dots li button {
width: 10px;
height: 10px;
background-color: white;
border-radius: 10px;
border: none;
text-indent: -5000px;
padding: 0;
margin: 0 5px;
opacity: 0.4;
transition: all 0.4s ease-in-out;
}
.quotes-block .cont .slick-dots li button:hover {
background-color: var(--mal-yellow);
opacity: 1;
cursor: pointer;
}
.quotes-block .cont .slick-dots li.slick-active button {
opacity: 1;
}
@media screen and (max-width: 844px) {
.quotes-block {
width: 100%;
overflow: hidden;
padding: 80px 20px 50px;
box-sizing: border-box;
}
.quotes-block .cont .slick-list .slick-track .slick-slide {
padding: 0;
}
}
.shop-block {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
padding: 0px 20px;
}
.shop-block .col {
width: 100%;
}
.shop-block .col > button {
border: 1px solid var(--kl-orange);
color: var(--kl-orange);
border-radius: 4px;
padding: 5px 10px;
box-sizing: border-box;
font-size: 15px;
background-color: white;
transition: all 0.3s ease-in-out;
}
.shop-block .col > button:hover {
border-color: var(--kl-grey);
background-color: var(--kl-grey);
color: white;
cursor: pointer;
}
.shop-block .col .placeholder {
width: 32%;
margin: 0 0.5% 0.75%;
display: inline-block;
text-decoration: none;
min-height: 400px;
vertical-align: top;
overflow: hidden;
background-color: var(--kl-lgrey);
position: relative;
}
.shop-block .col .placeholder:after {
content: "";
position: absolute;
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(251, 251, 251, 0.05), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.6), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.05));
background-image: -moz-linear-gradient(to left, rgba(251, 251, 251, 0.05), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.6), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.05));
background-image: -webkit-linear-gradient(to left, rgba(251, 251, 251, 0.05), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.6), rgba(251, 251, 251, 0.3), rgba(251, 251, 251, 0.05));
animation: loading 1s infinite;
z-index: 45;
}
.shop-block .col .product {
width: 32.3%;
margin: 0 0.5% 0.75%;
display: inline-block;
text-decoration: none;
min-height: 400px;
vertical-align: top;
background-color: var(--kl-lgrey);
}
.shop-block .col .product img {
width: calc(100% - 2px);
border: 1px solid #f0f0f0;
border-bottom: 0;
height: 289px;
object-fit: cover;
object-position: center;
background-color: white;
}
.shop-block .col .product .content {
padding: 20px;
box-sizing: border-box;
}
.shop-block .col .product .content h4 {
padding-top: 0px;
font-size: 17px;
line-height: 20px;
color: var(--kl-orange);
margin: 0;
min-height: 65px;
}
.shop-block .col .product .content .price {
font-size: 14px;
color: black;
font-weight: 600;
margin-top: 10px;
width: 100%;
}
.shop-block .col .product .content .btn {
background-color: var(--kl-dgrey);
color: white;
padding: 5px 25px 5px 15px;
display: inline-block;
border-radius: 15px;
font-size: 13px;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
position: relative;
transition: background-color 0.3s ease-in-out;
margin-top: 20px;
}
.shop-block .col .product .content .btn:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
right: 5px;
top: 50%;
transform: translate(0%, -50%) rotate(-90deg);
background: transparent url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-down-white.svg) no-repeat center center;
background-size: 10px;
}
.shop-block .col .product .content .btn:hover {
background-color: var(--kl-orange);
}
.shop-block .col .product:hover {
background-color: var(--kl-grey);
}
.shop-block .col .product:hover .content h4, .shop-block .col .product:hover .content .price {
color: white;
}
.shop-block .col .product:hover .content .btn {
background-color: var(--kl-orange);
}
.shop-block .col.filters {
padding: 0 5px;
transition: all 0.3s ease-in-out;
}
.shop-block .col.filters button {
display: none;
}
.shop-block .col.filters.active {
max-height: 400px;
}
.shop-block .col:nth-child(1) {
width: 100%;
padding-top: 0px;
margin: 0;
}
@keyframes loading {
0% {
left: -45%;
}
100% {
left: 100%;
}
}
form {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
form fieldset {
border: none;
margin: 4px 0;
font-size: 14px;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
margin-right: 2px;
padding: 0;
}
form fieldset .filter-control {
background-color: var(--kl-lgrey);
padding: 10px 12px;
box-sizing: border-box;
}
form fieldset .filter-control.mixitup-control-active {
color: white;
background-color: var(--kl-orange);
}
form fieldset:hover {
cursor: pointer;
}
form .controls {
margin: 5px 0;
width: 100%;
display: flex;
flex-wrap: wrap;
}
form .controls label {
display: flex;
flex-wrap: wrap;
position: relative;
align-items: center;
margin: 0px 0 5px;
font-weight: 500;
width: 100%;
}
form .controls label:before {
content: "";
width: 20px;
height: 20px;
border: 2px solid black;
position: relative;
display: inline-block;
background-color: white;
z-index: 1;
margin-right: 5px;
}
form .controls label:after {
content: "";
width: 16px;
height: 16px;
position: absolute;
left: 4px;
top: 4px;
display: inline-block;
z-index: 2;
}
form .controls label:hover {
cursor: pointer;
color: var(--kl-orange);
}
form .controls label.list-only:before, form .controls label.list-only:after {
display: none;
}
form .controls label.list-only:hover {
color: black;
}
form .controls input[type=checkbox] {
display: none;
}
form .controls input[type=checkbox]:checked + label:after {
background-color: var(--kl-orange);
}
form button {
border: none;
border-radius: 0;
color: var(--kl-orange);
font-size: 13px;
padding: 5px 0px;
background-color: transparent;
margin-top: 10px;
}
form button:hover {
cursor: pointer;
color: black;
}
#info-container {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 13px;
margin-bottom: 10px;
padding: 0 7px 0 8px;
box-sizing: border-box;
}
#info-container #count {
margin-right: auto;
}
#info-container #sort-container {
margin-left: auto;
}
#info-container #sort-container label {
margin-left: 5px;
}
#info-container #sort-container select {
border: none;
border-bottom: 1px solid #cecece;
padding: 5px 5px;
}
.container {
min-height: 200px;
}
.container.loading {
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 844px) {
.shop-block {
padding: 0 10px;
}
.shop-block .col form .controls label {
font-size: 18px;
}
.shop-block .col .product {
width: 100%;
margin-bottom: 10px;
}
}
.slider-block {
position: relative;
z-index: 10;
background-color: var(--emcb-red);
}
.slider-block .bg {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.slider-block .curve {
position: absolute;
width: 100%;
height: 225px;
bottom: 0;
z-index: 1;
}
.slider-block .curve svg {
height: 100%;
width: 140%;
}
.slider-block .slider {
padding: 0;
line-height: 0;
}
.slider-block .slider .slick-list {
z-index: 102;
overflow: visible;
}
.slider-block .slider .slick-list .slick-track {
overflow: hidden;
}
.slider-block .slider .slick-list .slick-track .item {
z-index: 2;
position: relative;
display: flex !important;
align-items: center;
height: 70vh;
max-height: 750px;
min-height: 580px;
background-color: var(--emcb-red);
justify-content: flex-end;
}
.slider-block .slider .slick-list .slick-track .item .img {
position: relative;
display: block;
z-index: 1;
opacity: 0;
width: 100%;
height: 140%;
transform: translateY(5%) translateX(0%);
}
.slider-block .slider .slick-list .slick-track .item .img img {
width: 100%;
box-sizing: border-box;
height: 100%;
object-fit: cover;
object-position: center;
}
.slider-block .slider .slick-list .slick-track .item .content {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 5;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 900px;
padding: 0 20px;
}
.slider-block .slider .slick-list .slick-track .item .content .icon {
height: 120px;
object-fit: contain;
object-position: center;
margin: 0 auto;
margin-bottom: 50px;
}
.slider-block .slider .slick-list .slick-track .item .content .cont {
width: 100%;
transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition-delay: 0.2s;
transform: translateY(50%) translateZ(0);
opacity: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: left;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.slider-block .slider .slick-list .slick-track .item .content .cont h1, .slider-block .slider .slick-list .slick-track .item .content .cont h2, .slider-block .slider .slick-list .slick-track .item .content .cont p {
width: 100%;
color: white;
font-family: "kallisto", sans-serif;
}
.slider-block .slider .slick-list .slick-track .item .content .cont h1 {
font-size: 44px;
line-height: 53px;
}
.slider-block .slider .slick-list .slick-track .item .content .cont p {
font-size: 21px;
line-height: 26px;
padding: 30px 0;
font-family: "Montserrat", sans-serif;
}
.slider-block .slider .slick-list .slick-track .item .content .cont a {
margin: 0 auto !important;
margin-top: 10px !important;
}
.slider-block .slider .slick-list .slick-track .item .content .cont a.orange {
background-color: var(--kl-orange);
color: white;
}
.slider-block .slider .slick-list .slick-track .item .content .cont a.orange:hover {
background-color: var(--kl-black);
}
.slider-block .slider.small .slick-list .slick-track .item {
max-height: 350px;
min-height: 200px;
}
.slider-block .slider.small .slick-list .slick-track .item .content {
top: 50%;
}
.slider-block .slider.small .slick-list .slick-track .item .img {
height: 100%;
}
.slider-block .slider.anim .slick-list .slick-track .slick-slide.slick-active .item .img {
transform: translateY(0) translateZ(0);
opacity: 1;
}
.slider-block .slider.anim .slick-list .slick-track .slick-slide.slick-active .item .content .cont {
transform: translateY(0) translateZ(0);
opacity: 1;
}
.slider-block .slider.anim .slick-list .slick-track .slick-slide.slick-active .item .content .cont h1 {
margin: 0;
}
.slider-block .arrow {
left: 50%;
position: absolute;
transform: translate(-50%, 0%);
width: 26px;
height: 40px;
bottom: 20px;
z-index: 1001;
}
.slider-block .arrow:after, .slider-block .arrow:before {
content: "";
width: 15px;
height: 2px;
border-radius: 3px;
background-color: white;
transform: rotate(-40deg);
position: absolute;
right: 0;
top: 20px;
transition: all 0.3s ease-in-out;
}
.slider-block .arrow:before {
left: 0;
right: auto;
transform: rotate(40deg);
}
.slider-block .arrow:hover {
cursor: pointer;
}
.slider-block .arrow:hover:after, .slider-block .arrow:hover:before {
top: 25px;
}
.slider-block .info {
background-color: var(--f-grey);
padding: 40px 0;
}
.slider-block .info .cont {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.slider-block .info .cont .item {
color: white;
font-weight: 100;
position: relative;
}
.slider-block .info .cont .item a {
color: white;
font-weight: 400;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.slider-block .info .cont .item a:hover {
color: var(--f-lblue);
}
.slider-block .info .cont .item:before {
content: "";
width: 20px;
height: 20px;
background: var(--f-lblue) url(//www.kitlinedesign.com/wp-content/themes/kitline/images/arrow-right-white.svg) no-repeat -5px center;
position: absolute;
left: -25px;
border-radius: 30px;
top: 0;
}
@media screen and (max-width: 844px) {
.slider-block {
overflow: hidden;
}
.slider-block .slider .slick-list .slick-track .item .content {
width: 100%;
}
.slider-block .slider .slick-list .slick-track .item .content .icon {
margin-bottom: 30px;
}
.slider-block .slider .slick-list .slick-track .item .content .cont {
width: 100%;
padding-right: 0;
display: block;
}
.slider-block .slider .slick-list .slick-track .item .content .cont h1 {
margin: 0 0 !important;
display: inline-block;
padding: 5px 10px;
width: auto;
font-size: 35px;
line-height: 40px;
}
.slider-block .slider .slick-list .slick-track .item .content .cont p {
margin: 10px 0;
display: inline-block;
width: auto;
min-width: 50%;
padding: 5px 10px;
font-size: 19px;
}
.slider-block .slider .slick-list .slick-track .item img {
width: 45%;
}
.slider-block .arrow {
bottom: 5px;
}
.slider-block .info .item {
margin: 5px 0;
}
}
.team-block .cont {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.team-block .cont .item {
width: 19%;
}
.team-block .cont .item img {
width: 100%;
height: 170px;
display: block;
object-fit: cover;
object-position: center;
}
.team-block .cont .item p {
color: white;
}
@media screen and (max-width: 844px) {
.team-block .cont .item {
width: 100%;
margin: 10px 0;
}
}
[data-type="core/spacer"] .components-resizable-box__container {
background-color: #f7f7f7;
}