/** Shopify CDN: Minification failed
Line 3198:63 Unexpected ")"
Line 3497:61 Unexpected ","
**/
.coming-soon {
text-align: center;
padding: 2rem 0 7rem;
}
.coming-soon .wrapper.in-view img {
animation: zoomIn;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
height: auto !important;
}
.productdetail-page .product-page-wrapper aside .qty-block, .blog-page .wrapper, .blog-page .wrapper > section > article, .blog-page .wrapper > section > article > section .meta-data, .blog-detail .meta-wrapper, .blog-detail .comments-block .comments-form, .contact-page .contact-top-block, .contact-page .col section, .shop-middle-block .wrapper section, .shop-top-block .wrapper section, .wholesale-page .form-group .two-col, .sheet-quicklinks ul, .three-blocks .block-wrapper, .tab-block .wrapper .tab-links, .home-gry-block .wrapper, .home-gry-block .wrapper section > div ul, .bottom-banner .wrapper, .lab-block section, .afford .wrapper, .afford .wrapper > aside, nav .wrapper .other-info .call, header > .middle-layer, header > .middle-layer > section, header .other-info, .home-banner .swiper-container .wrapper:not(.pagination-wrapper), nav .wrapper, footer .footer-top .wrapper, footer .footer-top .wrapper .footer-links {
display: flex;
flex-wrap: wrap;
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper), nav .wrapper, footer .footer-top .wrapper, footer .footer-top .wrapper .footer-links {
flex-wrap: wrap;
}
.productdetail-page .product-page-wrapper figure .product-thumbnail .swiper-slide, .blog-page .wrapper > section > article figure a img, .blog-page .wrapper > aside > section.latest-post ul li a::after, .blog-page .wrapper > aside > section.category ul li a::after, .sheet-quicklinks ul li a, .sheet-quicklinks ul li a figure img, .tab-block .wrapper .tab-content ul li, .tab-block .wrapper .tab-content ul li > span, .tab-block .wrapper .tab-content ul li > .custom-tab-contain figure img, .load-more-wrapper a::after, .home-gry-block .wrapper p a::after, .home-quick-links .wrapper li h5, .btn, .btn-secondary, .button--secondary, .btn-arrow, .btn-arrow:after, .faq-block article h6:after, .faq-block article div, .social-links > a span, .inner-banner, nav .wrapper .mobile-trigger a span, nav .wrapper ul.main-menu > li .submenu ul li a, nav .wrapper .other-info .call, footer .footer-top .wrapper .footer-links section ul li a::after, footer .footer-bottom .wrapper section p a::after, header, header > .middle-layer > section .other-info > div ul, header > .middle-layer figure, .top-category .wrapper ul li a figure img, .shop-slider .swiper-slide a figure img {
transition: all 0.3s ease-in;
}
.social-links > a span:before, .showNav .main-menu > li.has-submenu::after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.contact-page h3 {
font-size: 2rem;
font-weight: 600;
line-height: 2.5rem;
padding-bottom: 1.5rem;
color: #666d7c;
text-transform: uppercase;
}
.product-page, .contact-page, .shop-slider, .shop-middle-block, .shop-top-block, .content-block, .faq-block, .tab-block, .top-category, .home-gry-block, .bottom-banner, .lab-block, .home-bottom-content, .afford {
padding-block: 6rem;
}
@media all and (max-width: 768px) {
.product-page, .contact-page, .shop-middle-block, .shop-top-block, .content-block, .faq-block, .tab-block, .top-category, .home-gry-block, .bottom-banner, .lab-block, .home-bottom-content, .afford {
padding-block: 4rem;
}
.shop-slider{
padding-block: 0rem;
}
}
.blog-page .wrapper > section > article > section h3 a, .sheet-quicklinks ul li a h3, .top-category .wrapper ul li a h4, .shop-slider .swiper-slide a h4 {
background-image: linear-gradient(to right, #67a83f, #478721 50%, #000 50%);
background-size: 200% 100%;
background-position: -100%;
display: inline-block;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
.top-category .wrapper ul li a, .shop-slider .swiper-slide a {
background-color: #fff;
border-radius: 0rem;
display: block;
padding: 4rem 0;
}
.top-category .wrapper ul li a h4, .shop-slider .swiper-slide a h4 {
padding-bottom: 0;
}
.top-category .wrapper ul li a figure, .shop-slider .swiper-slide a figure {
text-align: center;
padding-bottom: 3rem;
}
.top-category .wrapper ul li a figure img, .shop-slider .swiper-slide a figure img {
max-width: 100%;
}
.top-category .wrapper ul li a:hover figure img, .shop-slider .swiper-slide a:hover figure img {
transform: scale(1.05);
}
.top-category .wrapper ul li a:hover h4, .shop-slider .swiper-slide a:hover h4 {
background-position: 0;
}
.wrapper {
max-width: 1240px;
margin: 0 auto;
}
@media all and (max-width: 1280px) {
.wrapper {
padding: 0 20px;
}
}
.header-wrapper {
transition: transform 0.3s ease;
background-color: #fff;
}
.ico-search {
position: absolute;
top: 1.5rem;
left: 3rem;
width: 18px;
height: 18px;
background-color: transparent;
outline: none;
border: 0;
cursor: pointer;
}
@media all and (max-width: 980px) {
.ico-search {
left: 1.5rem;
background-color: #d1d1d1;
}
}
.ico-search::before {
content: "";
width: 18px;
height: 18px;
position: absolute;
top: 0;
left: 0;
background-image: url("ico-search.gif");
background-repeat: no-repeat;
background-size: 18px;
}
header {
margin: 0 auto;
}
header .top-bar {
background-color: #232323;
color: #fff;
text-transform: uppercase;
font-size: 1.4rem;
text-align: center;
padding: 1rem;
}
header > .middle-layer {
height: 125px;
align-items: center;
justify-content: space-between;
}
header > .middle-layer > section {
width: 87rem;
align-items: center;
}
@media all and (max-width: 1080px) {
header > .middle-layer > section {
width: 75rem;
}
}
@media all and (max-width: 980px) {
header > .middle-layer > section {
flex: 1;
justify-content: flex-end;
}
}
header .header__icons .search-wrapper{
flex: 1;
position: relative;
}
header figure {
margin: 0;
}
header .header__icons .search-wrapper input {
width: 440px;
padding-right: 2.5rem;
padding-left: 6.5rem;
border-radius: 50px;
border-color: #b3b6be;
}
header > .middle-layer > section .other-info {
flex: 0 0 43rem;
justify-content: flex-end;
align-items: center;
}
header .other-info > div {
padding: 0 3rem;
position: relative;
}
@media all and (max-width: 520px) {
header > .middle-layer > section .other-info > div {
padding: 0 1rem;
}
}
header > .middle-layer > section .other-info > div ul {
visibility: hidden;
opacity: 0;
transform: translatey(15px);
position: absolute;
top: 100%;
border: 1px solid #d1d1d1;
background-color: #fff;
padding: 0;
width: 20rem;
z-index: 2;
}
header > .middle-layer > section .other-info > div ul li a {
display: block;
padding: 0.75rem 1rem;
border-bottom: 1px solid #d1d1d1;
box-shadow: inset 0 0 0 0 rgba(209, 209, 209, 0.15);
transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
z-index: 2;
box-shadow: inset 0 0 0 0 rgba(209, 209, 209, 0.15);
transition: all 0.3s ease-in-out;
}
header > .middle-layer > section .other-info > div ul li a:hover {
box-shadow: inset 30rem 0 0 0 rgba(209, 209, 209, 0.15);
}
@media all and (max-width: 1140px) {
header > .middle-layer > section .other-info > div ul li a:hover {
box-shadow: inset 110rem 0 0 0 rgba(209, 209, 209, 0.15);
}
}
@media all and (max-width: 520px) {
header > .middle-layer > section .other-info > div ul {
width: 15rem;
z-index: 2;
right: -56px;
}
}
header > .middle-layer > section .other-info > div.active ul {
visibility: visible;
opacity: 1;
transform: translatey(5px);
}
.header__heading-link{padding:0px;}
header a[class^=ico-],header a.header__icon--account, header a.header__icon--cart{
position: relative;
padding-left: 3rem;
line-height: 30px;
height: 30px;
background-position-y: 50%;
display: block;
text-decoration:unset;
font-size: 1.4rem;
}
.header__icon, .header__icon--cart .icon {width: auto;}
header .other-info a[class^=ico-]::before {
content: "";
width: 23px;
height: 23px;
position: absolute;
top: 0;
left: 0;
}
@media all and (max-width: 520px) {
header > .middle-layer > section .other-info a[class^=ico-] > span {
display: none;
}
}
header a[class^=ico-].ico-phone {
background-image: url("ico-call.gif");
background-repeat: no-repeat;
background-size: 23px;
height: 30px;
background-position-y: 50%;
display: block;
color: #232323;
}
@media all and (min-width: 519px) {
header > .middle-layer > section .other-info a[class^=ico-].ico-phone {
pointer-events: none;
}
}
@media all and (max-width: 520px) {
header > .middle-layer > section .other-info a[class^=ico-].ico-phone {
width: 23px;
overflow: hidden;
}
}
header .header__icon--cart {
background-image: url("ico-cart.gif");
background-repeat: no-repeat;
background-size: 23px;
display: block !important;
margin-right: 0;
}
header a.ico-account {
background-image: url("ico-account.gif");
background-repeat: no-repeat;
background-size: 23px;
text-decoration: unset;
}
header > .middle-layer figure {
margin: 0 5rem 0 0;
}
@media all and (max-width: 980px) {
header > .middle-layer figure {
flex: 0 0 130px;
}
}
@media all and (max-width: 520px) {
header > .middle-layer figure {
flex: 0 0 160px;
margin: 0;
}
}
header > .middle-layer figure a {
display: block;
border-radius: 100%;
}
header > .middle-layer figure a img {
max-width: 100%;
transition: all 0.8s ease;
}
@media all and (max-width: 1320px) {
header > .middle-layer {
padding: 0 2rem;
}
}
@media all and (max-width: 768px) {
header > .middle-layer {
padding: 0 1rem;
}
}
@media all and (max-width: 980px) {
header > .middle-layer .search-wrapper {
position: absolute;
top: 166px;
left: 0;
right: 48px;
z-index: 2;
}
header > .middle-layer .search-wrapper input {
border-radius: 0;
padding-left: 4.5rem;
border: 0;
}
}
header.in-view .wrapper {
animation: fadeIn;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s;
/* don't forget to set a duration! */
}
footer .footer-top {
background-color: #fff;
padding: 7rem 0 4rem;
}
@media all and (max-width: 768px) {
footer .footer-top {
padding: 4rem 0 5rem;
}
}
footer .footer-top .wrapper {
align-items: flex-start;
}
footer .footer-top .wrapper p {
padding: 0;
}
footer .footer-top .wrapper h4 {
padding-bottom: 2rem;
}
@media all and (max-width: 768px) {
footer .footer-top .wrapper h4 {
padding-bottom: 1rem;
}
}
footer .footer-top .wrapper .footer-logo {
flex: 0 0 30rem;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
footer .footer-top .wrapper .footer-logo > section {
padding-bottom: 2.5rem;
}
@media all and (max-width: 768px) {
footer .footer-top .wrapper .footer-logo > aside {
text-align: right;
}
}
@media all and (max-width: 680px) {
footer .footer-top .wrapper .footer-logo > aside {
text-align: center;
padding-bottom: 0;
flex-direction: column;
}
}
footer .footer-top .wrapper .footer-logo > div {
display: flex;
align-items: center;
flex: 0 0 190px;
}
@media all and (max-width: 980px) {
footer .footer-top .wrapper .footer-logo > div {
flex: auto;
padding-bottom: 2rem;
}
}
footer .footer-top .wrapper .footer-logo figure {
padding-bottom: 2.5rem;
}
footer .footer-top .wrapper .footer-logo h4 {
font-size: 2.5rem;
line-height: 3rem;
padding-bottom: 0;
}
@media all and (max-width: 1040px) {
footer .footer-top .wrapper .footer-logo {
flex-direction: column;
text-align: center;
}
}
@media all and (max-width: 768px) {
footer .footer-top .wrapper .footer-logo {
flex: 0 0 100%;
padding-bottom: 4rem;
margin-bottom: 3rem;
}
}
footer .footer-top .wrapper .footer-links {
flex: 1;
}
@media all and (max-width: 768px) {
footer .footer-top .wrapper .footer-links {
justify-content: center;
}
}
footer .footer-top .wrapper .footer-links section {
padding-bottom: 2rem;
}
footer .footer-top .wrapper .footer-links section:first-child {
flex: 0 0 30%;
}
@media all and (max-width: 1140px) {
footer .footer-top .wrapper .footer-links section:first-child {
flex: 0 0 50%;
}
}
footer .footer-top .wrapper .footer-links section:first-child + section {
flex: 0 0 30%;
}
@media all and (max-width: 1140px) {
footer .footer-top .wrapper .footer-links section:first-child + section {
flex: 0 0 50%;
}
}
footer .footer-top .wrapper .footer-links section:first-child + section + section {
flex: 0 0 40%;
}
@media all and (max-width: 1140px) {
footer .footer-top .wrapper .footer-links section:first-child + section + section {
flex: 0 0 50%;
}
}
@media all and (max-width: 840px) {
footer .footer-top .wrapper .footer-links section {
text-align: center;
}
}
@media all and (max-width: 640px) {
footer .footer-top .wrapper .footer-links section {
flex: 0 0 100% !important;
padding-bottom: 2rem !important;
}
footer .footer-top .wrapper .footer-links section:last-of-type {
padding-bottom: 0 !important;
}
}
footer .footer-top .wrapper .footer-links section ul li {
padding-bottom: 1.2rem;
}
footer .footer-top .wrapper .footer-links section ul li a {
color: #232323;
position: relative;
position: relative;
}
footer .footer-top .wrapper .footer-links section ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(0);
height: 1px;
background-color: #232323;
}
footer .footer-top .wrapper .footer-links section ul li a:hover::after {
transform: scaleX(1);
}
footer .footer-top .wrapper .footer-links section ul li a:hover {
color: #67a83f;
}
@media all and (max-width: 980px) {
footer .footer-top .wrapper .footer-links section {
flex: 0 0 100%;
}
}
@media all and (max-width: 768px) {
footer .footer-top .wrapper .footer-links section {
flex: 0 0 50%;
}
}
@media all and (max-width: 680px) {
footer .footer-top .wrapper .footer-links {
flex: 0 0 100%;
text-align: center;
padding-bottom: 4rem;
}
}
footer .footer-top .wrapper .footer-links + aside {
flex: 0 0 28rem;
flex-direction: column;
text-align: left;
align-items: flex-start;
}
footer .footer-top .wrapper .footer-links + aside figure {
padding-top: 2rem;
}
footer .footer-top .wrapper .footer-links + aside figure img {
margin: 0 5px 10px;
}
footer .footer-top .wrapper .footer-links + aside > section {
padding: 2rem 0;
width: 100%;
}
footer .footer-top .wrapper .footer-links + aside > section p {
padding-bottom: 1.2rem;
}
footer .footer-top .wrapper .footer-links + aside > section p input {
width: 100%;
}
footer .footer-top .wrapper .footer-links + aside > section p input[type=text] {
padding-inline: 3rem;
border-radius: 50px;
border-color: #d1d1d1;
}
footer .footer-top .wrapper .footer-links + aside > section p input[type=submit] {
padding-inline: 3rem;
}
@media all and (max-width: 980px) {
footer .footer-top .wrapper .footer-links + aside {
margin-left: 4rem;
}
}
@media all and (max-width: 1040px) {
footer .footer-top .wrapper .footer-links + aside {
flex: 0 0 100%;
margin: 0;
text-align: center;
align-items: center;
padding-top: 3rem;
}
}
@media all and (max-width: 680px) {
footer .footer-top .wrapper .footer-links + aside {
padding-top: 0;
}
}
footer .footer-top .wrapper aside {
display: flex;
justify-content: flex-end;
align-items: center;
}
footer .footer-top .wrapper aside h4 {
padding-bottom: 0;
font-size: 1.4rem;
padding-right: 3rem;
font-weight: 600;
}
@media all and (max-width: 680px) {
footer .footer-top .wrapper aside h4 {
padding: 0 0 2rem;
}
}
@media all and (max-width: 680px) {
footer .footer-top .wrapper aside {
flex: 0 0 100%;
text-align: center;
}
}
@media all and (max-width: 980px) {
footer .footer-top .wrapper {
flex: 0 0 33.33%;
}
}
footer .footer-bottom {
color: #232323;
}
footer .footer-bottom .wrapper {
position: relative;
padding: 2rem 0 7rem;
display: flex;
}
@media all and (max-width: 1280px) {
footer .footer-bottom .wrapper {
padding: 0 2rem 7rem;
}
}
@media all and (max-width: 1140px) {
footer .footer-bottom .wrapper {
flex-direction: column;
text-align: center;
padding-bottom: 0;
}
}
footer .footer-bottom .wrapper div {
padding-left: 2rem;
}
@media all and (max-width: 1140px) {
footer .footer-bottom .wrapper div {
padding: 2rem 0 !important;
}
}
footer .footer-bottom .wrapper section p {
padding-bottom: 0;
line-height: 2.4rem;
}
footer .footer-bottom .wrapper section p strong {
font-weight: 400;
}
@media all and (max-width: 680px) {
footer .footer-bottom .wrapper section p strong {
display: block;
}
}
footer .footer-bottom .wrapper section p a {
position: relative;
}
footer .footer-bottom .wrapper section p a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(0);
height: 1px;
background-color: #232323;
}
footer .footer-bottom .wrapper section p a:hover::after {
transform: scaleX(1);
}
footer .footer-bottom .wrapper .web {
padding-left: 10rem;
}
@media all and (max-width: 680px) {
footer .footer-bottom {
text-align: center;
padding: 4.5rem 0 1.5rem;
}
}
footer .toTop {
position: absolute;
top: 0;
right: 0;
border-radius: 5rem;
background-image: url("../images/ico-chat.png");
background-repeat: no-repeat;
background-color: #67a83f;
background-repeat: no-repeat;
width: 6.5rem;
height: 6.5rem;
display: block;
background-position: 50%;
transition: transform 0.3s ease;
}
footer .toTop:hover {
transform: translateY(-10px);
background-color: #67a83f;
}
@media all and (max-width: 1366px) {
footer .toTop {
right: 1.5rem;
}
}
@media all and (max-width: 860px) {
footer .toTop {
top: -5rem;
}
}
@media all and (max-width: 680px) {
footer .toTop {
top: -8rem;
left: 50%;
transform: translateX(-50%);
}
footer .toTop:hover {
transform: translate(-50%, -10px);
}
}
@keyframes CustfadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
}
}
@keyframes hide {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translateY(1000px);
}
}
nav.header__inline-menu {
position: relative;
flex: 1;
border-top: 2px solid #dcdcdc;
border-bottom: 2px solid #dcdcdc;
}
nav .wrapper {
justify-content: center;
height: 100%;
overflow: visible;
}
@media all and (max-width: 1240px) {
nav .wrapper {
padding: 0;
}
}
@media all and (max-width: 1140px) {
nav .wrapper {
justify-content: flex-end;
}
}
@media all and (min-width: 1140px) {
nav .wrapper {
position: relative;
}
}
nav .wrapper .mobile-trigger {
display: none;
padding-left: 2rem;
align-self: center;
}
nav .wrapper .mobile-trigger a {
width: 24px;
height: 16px;
position: relative;
display: inline-block;
top: 0;
}
nav .wrapper .mobile-trigger a div {
height: 14px;
position: relative;
left: -11.5px;
}
nav .wrapper .mobile-trigger a span {
position: absolute;
width: 24px;
height: 3px;
background-color: #232323;
}
@media all and (max-width: 980px) {
nav .wrapper .mobile-trigger a span {
background-color: #fff;
}
}
nav .wrapper .mobile-trigger a span:first-child {
top: 0;
}
nav .wrapper .mobile-trigger a span:first-child + span {
top: 6.5px;
}
nav .wrapper .mobile-trigger a span:first-child + span + span {
top: 12.5px;
}
nav .wrapper .mobile-trigger a:hover span {
background-color: #232323;
}
@media all and (max-width: 1140px) {
nav .wrapper .mobile-trigger a {
height: 100%;
display: flex;
align-items: center;
padding: 10px;
width: 4.8rem;
background-color: #67a83f;
justify-content: center;
}
}
@media all and (max-width: 1140px) {
nav .wrapper .mobile-trigger {
display: flex;
padding: 0;
z-index: 1;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
}
nav .wrapper ul.main-menu {
display: flex;
}
nav .wrapper ul.main-menu > li {
transition: padding 0.3s ease-in;
position: relative;
}
nav .wrapper ul.main-menu > li a {
line-height: 5rem;
color: #232323;
display: block;
position: relative;
padding: 0 2.5rem;
text-transform: uppercase;
box-shadow: inset 0 0 0 0 rgba(209, 209, 209, 0.15);
transition: all 0.3s ease-in-out;
}
nav .wrapper ul.main-menu > li a:hover {
box-shadow: inset 30rem 0 0 0 rgba(209, 209, 209, 0.15);
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu > li a:hover {
box-shadow: inset 110rem 0 0 0 rgba(209, 209, 209, 0.15);
}
}
nav .wrapper ul.main-menu > li a:hover {
color: #67a83f;
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu > li a {
line-height: 1.5rem !important;
padding: 1.5rem 1.5rem !important;
background-color: #000;
transition: all 0.3s ease;
color: #fff !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
}
@media all and (min-width: 1139px) {
nav .wrapper ul.main-menu > li:first-child {
padding-left: 0;
}
}
nav .wrapper ul.main-menu > li .submenu {
opacity: 0;
left: 100px;
width: 250px;
position: absolute;
flex-wrap: wrap;
z-index: 11;
padding: 0;
left: 0;
top: 100%;
right: 0;
background-color: rgba(103, 168, 63, 0.05);
border-bottom: none;
display: none;
}
nav .wrapper ul.main-menu > li .submenu ul {
width: 100%;
background-color: #fff;
}
nav .wrapper ul.main-menu > li .submenu ul li a {
line-height: 3.5rem;
display: block;
color: #333;
border-bottom: 1px solid rgba(103, 168, 63, 0.5);
background-color: rgba(103, 168, 63, 0.05);
box-shadow: inset 0 0 0 0 #67a83f;
transition: all 0.3s ease-in-out;
}
nav .wrapper ul.main-menu > li .submenu ul li a:hover {
box-shadow: inset 30rem 0 0 0 #67a83f;
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu > li .submenu ul li a:hover {
box-shadow: inset 110rem 0 0 0 #67a83f;
}
}
nav .wrapper ul.main-menu > li .submenu ul li a:after {
display: none;
}
nav .wrapper ul.main-menu > li .submenu ul li a:hover {
color: #fff;
padding: 0 2rem 0 3.5rem;
}
nav .wrapper ul.main-menu > li.has-submenu > a {
padding-right: 5rem;
}
@media all and (min-width: 1139px) {
nav .wrapper ul.main-menu > li.has-submenu > a:after {
content: "\f078";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 20px;
top: 17px;
transition: transform 0.3s ease-in;
}
}
nav .wrapper ul.main-menu > li.has-submenu.active > a {
box-shadow: inset 30rem 0 0 0 #67a83f;
color: #fff;
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu > li.has-submenu.active > a {
box-shadow: inset 110rem 0 0 0 #67a83f;
}
}
nav .wrapper ul.main-menu > li.has-submenu.active section {
display: flex;
opacity: 1;
}
@media all and (min-width: 1101px) {
nav .wrapper ul.main-menu > li.has-submenu.active section {
animation: CustfadeInDown 0.5s;
animation-fill-mode: forwards;
}
}
nav .wrapper ul.main-menu > li.has-submenu.active ul > li {
border: none;
margin-bottom: 0;
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu > li.has-submenu.active ul > li a {
color: #000 !important;
padding: 1rem 1.5rem 1rem 3rem !important;
}
nav .wrapper ul.main-menu > li.has-submenu.active ul > li a:hover {
background-color: #333;
color: #fff !important;
}
}
@media all and (max-width: 1140px) {
nav .wrapper ul.main-menu {
left: 150%;
position: relative;
z-index: 10;
transition: all 0.3s ease-in;
width: 100%;
top: 4.8rem;
padding-top: 0;
flex-direction: column;
height: auto !important;
background-color: #333;
}
}
nav .wrapper .other-info {
display: flex;
align-items: center;
height: 100%;
}
nav .wrapper .other-info .call {
border: 2px solid #67a83f;
border-radius: 100%;
color: #fff;
width: 4.5rem;
height: 4.5rem;
align-items: center;
justify-content: center;
margin-right: 3.5rem;
}
@media all and (max-width: 1240px) {
nav .wrapper .other-info .call {
margin-right: 1rem;
}
}
nav .wrapper .other-info .call:hover {
background-color: #67a83f;
}
@media all and (max-width: 768px) {
nav .wrapper .other-info div {
width: 100%;
display: flex;
}
}
@media all and (max-width: 1140px) {
nav .wrapper .other-info {
position: absolute;
margin: 0;
padding: 0;
left: initial;
right: 55px;
}
}
nav .wrapper.in-view {
animation: fadeIn;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s;
/* don't forget to set a duration! */
}
.overlay {
position: fixed;
width: 100%;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 0%;
z-index: 2;
display: none;
}
.showNav .search-wrapper {
display: none;
}
.showNav nav .wrapper .mobile-trigger a div {
left: -12px;
top: -0.5px;
}
.showNav .overlay {
border-radius: 0%;
width: 100%;
height: 100%;
display: block;
}
.showNav .mobile-trigger {
position: relative;
z-index: 10 !important;
}
.showNav .mobile-trigger a:after {
position: absolute;
border-radius: 100%;
border: 2px solid #fff;
width: 42px;
height: 42px;
display: block;
top: -15px;
left: -11px;
}
.showNav .mobile-trigger a span {
background-color: #fff !important;
}
.showNav .mobile-trigger a span:first-child {
transform: rotate(-45deg);
top: 6px !important;
}
.showNav .mobile-trigger a span:first-child + span {
width: 0;
transform: translateX(-50%);
left: 50%;
}
.showNav .mobile-trigger a span:first-child + span + span {
transform: rotate(45deg);
top: 6px !important;
}
.showNav .mobile-trigger a:hover span {
background-color: #fff !important;
}
.showNav .main-menu {
left: 50%;
width: 50%;
}
@media all and (max-width: 1140px) {
.showNav .main-menu {
left: 25% !important;
width: 75% !important;
}
}
@media all and (max-width: 768px) {
.showNav .main-menu {
left: 0% !important;
width: 100% !important;
}
}
.showNav .main-menu > li {
padding: 0 !important;
margin-bottom: 0;
}
.showNav .main-menu > li > a:hover {
padding-left: 2.5rem !important;
}
.showNav .main-menu > li.has-submenu > a {
margin-right: 45px;
}
.showNav .main-menu > li.has-submenu::after {
content: "\f078";
position: absolute;
right: 20px;
top: 17px;
transition: transform 0.3s ease-in;
}
@media all and (max-width: 1140px) {
.showNav .main-menu > li.has-submenu::after {
width: 45px;
height: 45px;
top: 0;
right: 0;
text-align: center;
line-height: 45px;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
}
}
.showNav .main-menu > li.has-submenu.active .submenu {
position: relative;
width: auto;
top: auto;
flex-direction: column;
max-height: 20rem;
overflow-y: auto;
}
.showNav .main-menu > li.has-submenu.active .submenu::-webkit-scrollbar {
width: 0.5em;
}
.showNav .main-menu > li.has-submenu.active .submenu::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.showNav .main-menu > li.has-submenu.active .submenu::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.showNav .main-menu > li.has-submenu.active::after {
content: "\f077";
color: #fff;
}
.inner-banner {
background-size: cover !important;
height: 21rem;
}
@media all and (max-width: 1024px) {
.inner-banner {
background-position: 80% !important;
}
}
.inner-banner .wrapper {
display: flex;
align-items: center;
padding: 0;
height: 100%;
color: #fff;
}
@media all and (max-width: 1280px) {
.inner-banner .wrapper {
padding: 0 2rem;
}
}
.inner-banner .wrapper h5,
.inner-banner .wrapper h1 {
padding-bottom: 0;
}
.inner-banner .wrapper h5{
font-size: 1.8rem;
line-height: 2.2rem;
letter-spacing: 0px;
font-weight: 500 !important;
margin:0;
}
.inner-banner .wrapper h1{
font-size: 5rem;
line-height: 6rem;
font-weight: 500 !important;
letter-spacing: -2px;
margin:0;
}
.inner-page p {
color: #666;
margin:0px;
padding-bottom: 1.5rem;
}
@media all and (max-width: 768px) {
.inner-page {
text-align: center;
}
}
.social-links {
display: flex;
margin-top:25px;
}
.social-links > a {
height: 45px;
width: 45px;
margin: 0 0.5rem 0 0;
padding: 0;
border-radius: 100%;
transition: all 0.3s ease;
position: relative;
}
.social-links > a span {
display: flex;
line-height: 40px;
transition: all 0.3s ease;
z-index: 1;
backface-visibility: hidden;
padding-left: 2.5rem;
position: relative;
text-align: center;
color: #fff;
}
@media all and (max-width: 980px) {
.social-links > a span {
padding-left: 1.5rem;
}
}
.social-links > a span:before {
content: "";
display: inline-block;
line-height: 45px;
color: #fff;
font-size: 18px;
position: absolute;
left: 0;
width: 45px;
}
.social-links > a:hover {
transform: translateY(-5px);
}
.social-links > a:hover span {
background-position: 0 100% !important;
}
.social-links > a.in {
background-color: #0a4cd4;
}
.social-links > a.in span:before {
content: "\f0e1";
}
.social-links > a.fbk {
background-color: #3a5898;
}
.social-links > a.fbk span {
top: 2px;
left: -1px;
position: relative;
}
.social-links > a.fbk span:before {
content: "\f09a";
}
.social-links > a.twt {
background-color: #54abee;
}
.social-links > a.twt span {
top: 0.5px;
position: relative;
}
.social-links > a.twt span:before {
content: "\f099";
}
.social-links > a.insta {
background-color: #e22455;
}
.social-links > a.insta span {
top: 0.5px;
position: relative;
}
.social-links > a.insta span:before {
content: "\f16d";
}
.social-links > a.you {
background-color: #cd1f1e;
}
.social-links > a.you span:before {
content: "\f167";
}
.social-links > a.mail span:before {
content: "\f0e0";
font-size: 15px;
top: -2px;
}
.faq-block article > section {
margin-bottom: 2.2rem;
}
.faq-block article > section div {
padding: 0 2rem;
}
.faq-block article h6 {
background-color: #fff;
font-size: 1.5rem;
line-height: 2rem;
border-radius: 0.5rem;
cursor: pointer;
position: relative;
padding: 2rem 5rem 2rem 2rem;
}
.faq-block article h6:after {
content: "";
width: 18px;
height: 18px;
display: block;
background: url(../images/ico-plus.png) 0 0 no-repeat;
position: absolute;
top: 19px;
right: 20px;
}
.faq-block article h6.active:after {
transform: rotate(45deg);
}
.faq-block article h6.active + div {
height: auto;
padding: 1rem 2rem;
}
.faq-block article div {
overflow: hidden;
height: 0px;
}
.faq-block article p {
color: #242424;
}
.breadcrumb {
font-size: 1.5rem;
color: #666;
padding-bottom: 4rem;
}
.breadcrumb a {
position: relative;
color: #666;
}
.breadcrumb a::after {
content: "/";
padding: 0 0.5rem;
}
.shop-slider .swiper-slide {
text-align: center;
}
.shop-slider .swiper-slide figure {
padding-bottom: 2rem;
margin: 0px
}
.shop-slider .our-projects {
position: relative;
}
@media all and (max-width: 1320px) {
.shop-slider .our-projects {
margin: 0 2rem;
}
}
.shop-slider .project-control {
position: absolute;
top: 50%;
left: -25px;
right: -25px;
}
.shop-slider .project-control .swiper-button-next,
.shop-slider .project-control .swiper-button-prev {
width: 44px;
height: 44px;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(35, 35, 35, 0.2);
background-image: none;
border-radius: 100%;
}
.shop-slider .project-control .swiper-button-next:before,
.shop-slider .project-control .swiper-button-prev:before {
content: "";
position: absolute;
left: 50%;
top: 42%;
transform: translate(-50%, -40%);
display: block;
width: 12px;
height: 23px;
}
.shop-slider .project-control .swiper-button-next {
right: 0;
}
.shop-slider .project-control .swiper-button-next:before {
left: 58%;
background-image: url("ico-rgt.png");
background-repeat: no-repeat;
background-size: 12px;
}
.shop-slider .project-control .swiper-button-prev {
left: 0;
}
.shop-slider .project-control .swiper-button-prev:before {
background-image: url("ico-left.png");
background-repeat: no-repeat;
background-size: 12px;
left: 45%;
}
.shop-slider .swiper-slide a h4 {
margin: 0px;
font-size: 2rem;
line-height: 2.8rem;
letter-spacing: 0px;
}
.btn-arrow, .btn, .btn-secondary, .button--secondary {
line-height: 5rem;
height: 5rem;
font-size: 1.4rem;
padding: 0 3rem;
display: inline-block;
background-color: #67a83f;
outline: none;
border: 0;
border-radius: 50px;
font-weight: 600;
color: #fff;
cursor: pointer;
box-shadow: inset 0 0 0 0 #333333;
transition: all 0.3s ease-in-out;
text-decoration: unset;
letter-spacing:0px;
}
.btn-arrow:hover, .btn:hover, .button--secondary:hover, .btn-secondary:hover {
box-shadow: inset 30rem 0 0 0 #333333;
}
@media all and (max-width: 1140px) {
.btn-arrow:hover, .btn:hover, .button--secondary:hover, .btn-secondary:hover {
box-shadow: inset 110rem 0 0 0 #333333;
}
}
.btn-arrow:hover, .btn:hover, .button--secondary:hover, .btn-secondary:hover {
color: #fff !important;
}
.btn-secondary {
background-color: #67a83f;
}
.btn-secondary:hover {
background-color: #232323 !important;
}
.button--secondary {
background-color: #67a83f;
}
.button--secondary:hover {
background-color: #232323 !important;
}
.btn-blk {
background-color: #232323;
box-shadow: inset 0 0 0 0 #67a83f;
transition: all 0.3s ease-in-out;
}
.btn-blk:hover {
box-shadow: inset 30rem 0 0 0 #67a83f;
}
@media all and (max-width: 1140px) {
.btn-blk:hover {
box-shadow: inset 110rem 0 0 0 #67a83f;
}
}
.btn-arrow {
position: relative;
padding-right: 4.8rem;
color: #fff;
font-weight: 600;
}
.btn-arrow:after {
content: "";
display: block;
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
width: 11px;
height: 8px;
background-image: url("../images/btn-arrow.png");
background-repeat: no-repeat;
background-size: 11px 8px;
}
.btn-arrow:hover:after {
right: 20px;
}
.blog-detail .comments-block .comment-form textarea, textarea, input[type=text],
input[type=email],
input[type=number],
input[type=tel]{
background-color: transparent;
padding: 1rem 1.5rem;
border-radius: 5px;
-webkit-appearance: none;
outline: none;
border: 1px solid #e5e5e5;
line-height: 50px;
height: 50px;
background-color: #fff;
font-size: 1.4rem;
outline: none;
width:100%;
}
.blog-detail .comments-block .comments-form > section textarea:focus, textarea:focus, input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus {
background-color: #fff;
}
textarea {
line-height: 20px !important;
width: 100%;
padding: 1.5rem 1.75rem !important;
resize: none;
}
.tab-block .wrapper h2 {
padding-bottom: 3rem;
}
@media all and (max-width: 680px) {
.tab-block .wrapper h2 {
text-align: center;
}
}
.tab-block .wrapper .tab-links {
justify-content: center;
padding-bottom: 4rem;
margin:0;
padding-left: 0;
}
.tab-block .wrapper .tab-links li a {
cursor: pointer;
padding: 1rem 2rem;
display: block;
box-shadow: inset 0 0 0 0 rgba(209, 209, 209, 0.15);
transition: all 0.3s ease-in-out;
font-size: 1.4rem;
text-decoration: none;
color: rgba(var(--color-foreground));
}
.tab-block .wrapper .tab-links li a:hover {
box-shadow: inset 30rem 0 0 0 rgba(209, 209, 209, 0.15);
}
@media all and (max-width: 1140px) {
.tab-block .wrapper .tab-links li a:hover {
box-shadow: inset 110rem 0 0 0 rgba(209, 209, 209, 0.15);
}
}
@media all and (max-width: 680px) {
.tab-block .wrapper .tab-links li a {
padding: 0 1rem;
}
}
.tab-block .wrapper .tab-links li.active a {
color: #67a83f;
}
.tab-block .wrapper .tab-content ul {
padding: 5px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tab-block .wrapper .tab-content ul .col {
list-style: none;
flex: 0 0 20%;
padding: 0 5px;
}
@media all and (max-width: 1240px) {
.tab-block .wrapper .tab-content ul .col {
flex: 0 0 25%;
max-width: 25%;
}
}
@media all and (max-width: 1100px) {
.tab-block .wrapper .tab-content ul .col {
flex: 0 0 32.5%;
max-width: 32.5%;
}
}
@media all and (max-width: 768px) {
.tab-block .wrapper .tab-content ul .col {
flex: 0 0 50%;
max-width: 50%;
}
}
@media all and (max-width: 520px) {
.tab-block .wrapper .tab-content ul {
margin-inline: 0px;
}
}
.tab-block .wrapper .tab-content ul li {
text-align: center;
margin-bottom: 10px !important;
}
.tab-block .wrapper .tab-content ul li > div.custom-tab-contain {
border: 1px solid #d1d1d1;
padding: 3rem 1.5rem;
display: block;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tab-block .wrapper .tab-content ul li > div.custom-tab-contain:hover{
border: 1px solid #67a83f;
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain figure img {
max-width: 100%;
height: auto;
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain p {
font-size: 1.5rem;
line-height: 2.5rem;
font-weight: 400;
letter-spacing: 0px;
padding-bottom: 0;
margin:0;
color: #232323;
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain h5 {
padding-bottom: 1rem;
margin:0px;
color: #232323;
font-size: 1.8rem;
line-height: 2.2rem;
font-weight: 500 !important;
position: relative;
transition: all 0.3s ease-in-out;
letter-spacing:0px;
}
.tab-block .wrapper .tab-content ul li > span:hover {
border: 1px solid #67a83f;
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain:hover figure img {
transform: scale(1.05);
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain:hover p {
color: #232323;
}
.tab-block .wrapper .tab-content ul li > .custom-tab-contain:hover h5 {
background-position: 0;
}
@media all and (max-width: 520px) {
.tab-block .wrapper .tab-content ul li.col {
flex: 0 0 100%;
max-width: 100%;
padding-inline: 0px;
}
}
.load-more-wrapper {
width: 100%;
text-align: center;
padding: 2rem 0 0;
}
.load-more-wrapper a {
color: #232323;
position: relative;
}
.load-more-wrapper a:hover {
color: #67a83f;
}
.load-more-wrapper a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(1);
height: 1px;
background-color: #c1c1c1;
}
.load-more-wrapper a:hover::after {
transform: scaleX(0);
transform-origin: left;
}
.top-category {
background-color: #f4f4f4;
}
.top-category .wrapper > h2 {
text-align: center;
padding-bottom: 4rem;
}
.top-category .wrapper ul {
padding: 5px 0;
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.top-category .wrapper ul .col {
list-style: none;
flex: 0 0 25%;
max-width: 25%;
padding: 0 5px;
}
@media all and (max-width: 1024px) {
.top-category .wrapper ul .col {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
}
@media all and (max-width: 768px) {
.top-category .wrapper ul .col {
flex: 0 0 50%;
max-width: 50%;
}
}
@media all and (max-width: 520px) {
.top-category .wrapper ul .col {
flex: 0 0 100%;
max-width: 100%;
}
}
.top-category .wrapper ul li {
text-align: center;
padding-bottom: 1rem !important;
}
.home-gry-block .wrapper p {
color: #666;
margin: 0px;
}
.home-gry-block .wrapper p a {
position: relative;
text-decoration: unset;
}
.home-gry-block .wrapper p a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(1);
height: 1px;
background-color: #c1c1c1;
}
.home-gry-block .wrapper p a:hover::after {
transform: scaleX(0);
transform-origin: left;
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper {
text-align: center;
}
}
.home-gry-block .wrapper section {
flex: 0 0 58%;
}
@media all and (max-width: 1100px) {
.home-gry-block .wrapper section {
flex: 0 0 65%;
}
}
@media all and (max-width: 980px) {
.home-gry-block .wrapper section {
flex: 0 0 85%;
}
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper section {
flex: 0 0 100%;
position: relative;
margin-top: -30rem;
margin-bottom: 3rem;
}
}
.home-gry-block .wrapper section > div {
position: relative;
z-index: 2;
background-color: #fff;
padding: 3.5rem 4.5rem;
margin-top: 3rem;
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper section > div {
margin: 0 2rem;
}
}
.home-gry-block .wrapper section > div h2 {
line-height: 3.5rem;
padding-bottom: 2rem;
margin: 0;
}
.home-gry-block .wrapper section > div ul {
margin: 1rem 0;
justify-content: center;
padding: 0px
}
.home-gry-block .wrapper section > div ul li {
flex: 0 0 33.33%;
text-align: left;
line-height: 2.2rem;
padding: 5.5rem 0.5rem 0;
position: relative;
list-style: none;
}
.home-gry-block .wrapper p {
font-size: 1.5rem;
line-height: 2.5rem;
padding-bottom: 1.5rem;
font-weight: 400;
letter-spacing: 0px;
}
@media all and (max-width: 680px) {
.home-gry-block .wrapper section > div ul li {
flex: 0 0 50%;
}
}
@media all and (max-width: 520px) {
.home-gry-block .wrapper section > div ul li {
flex: 0 0 100%;
}
}
.home-gry-block .wrapper section > div ul li h5 {
line-height: 2rem;
font-size: 1.8rem;
padding-bottom: 2rem;
margin: 0;
font-weight: 500 !important;
letter-spacing: 0px;
}
@media all and (max-width: 520px) {
.home-gry-block .wrapper section > div ul li h5 {
max-width: 20rem;
margin: 0 auto;
}
}
.home-gry-block .wrapper section > div ul li::before {
content: "";
position: absolute;
left: 5px;
width: 50px;
height: 50px;
display: block;
top: 0;
}
.home-gry-block .wrapper section > div ul li:first-child::before {
background-image: url("../images/ico-lab1.jpg");
background-repeat: no-repeat;
background-size: 50px;
}
.home-gry-block .wrapper section > div ul li:first-child + li::before {
background-image: url("../images/ico-lab2.jpg");
background-repeat: no-repeat;
background-size: 50px;
}
.home-gry-block .wrapper section > div ul li:first-child + li + li::before {
background-image: url("../images/ico-lab3.jpg");
background-repeat: no-repeat;
background-size: 50px;
}
.home-gry-block .wrapper figure {
flex: 1;
min-height: 52rem;
position: relative;
margin: 0;
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper figure {
order: -1;
flex: 0 0 100%;
}
}
.home-gry-block .wrapper figure img {
position: absolute;
z-index: 1;
width: 58rem;
right: 0;
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper figure img {
left: 50%;
transform: translateX(-50%);
width: 100%;
}
}
.bottom-banner {
background-size: cover !important;
}
@media all and (max-width: 768px) {
.bottom-banner .wrapper {
text-align: center;
}
}
.bottom-banner .wrapper figure img {
max-width: 100%;
}
@media all and (max-width: 768px) {
.bottom-banner .wrapper figure {
flex: 0 0 100%;
padding-bottom: 2rem;
}
}
.bottom-banner .wrapper section {
flex: 1;
padding-left: 15rem;
display: flex;
align-items: center;
}
@media all and (max-width: 980px) {
.bottom-banner .wrapper section {
padding-left: 6rem;
}
}
@media all and (max-width: 768px) {
.bottom-banner .wrapper section {
padding-left: 0;
}
}
.bottom-banner .wrapper section div {
color: #fff;
}
.bottom-banner .wrapper section div a {
width: 25rem;
text-align: center;
}
.bottom-banner .wrapper section div p{
padding-bottom: 3rem;
font-size: 2rem;
line-height: 2.8rem;
font-weight: 500 !important;
margin: 0px;
}
.bottom-banner .wrapper section div h1 {
padding-bottom: 1rem;
font-size: 5rem;
line-height: 6rem;
margin: 0px;
color: #fff;
font-weight: 500 !important;
letter-spacing: -2px;
}
.bottom-banner .wrapper section div h4:first-child {
color: #f8cf0b;
padding-bottom: 1rem !important;
font-size: 2rem;
line-height: 2.8rem;
margin: 0px;
font-weight: 500 !important;
letter-spacing:0px;
}
.bottom-banner .wrapper section div h4:last-of-type {
padding-bottom: 3rem;
}
.lab-block h2 {
text-align: center;
padding-bottom: 8rem;
}
@media all and (max-width: 768px) {
.lab-block h2 {
padding-bottom: 4rem;
}
}
.lab-block section {
justify-content: center;
}
.lab-block section figure {
margin: 2rem;
}
.home-bottom-content h2 {
padding-bottom: 1rem;
}
.home-bottom-content a {
color: #67a83f;
font-weight: 500;
}
.home-bottom-content a:hover {
color: #232323;
}
.home-bottom-content p {
padding-bottom: 3rem;
}
.home-bottom-content p:last-of-type {
padding-bottom: 0;
}
@media all and (max-width: 680px) {
.home-bottom-content {
text-align: center;
}
}
.home-quick-links {
padding-block: 6rem;
background-color: #232323;
}
@media all and (max-width: 768px) {
.home-quick-links {
padding-block: 6rem 3rem;
}
}
.home-quick-links .wrapper ul {
padding: 30px 0;
display: flex;
flex-wrap: wrap;
margin: -30px;
}
.home-quick-links .wrapper ul .col {
list-style: none;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
padding: 0 30px;
}
@media all and (max-width: 1024px) {
.home-quick-links .wrapper ul .col {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
}
@media all and (max-width: 768px) {
.home-quick-links .wrapper ul .col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media all and (max-width: 520px) {
.home-quick-links .wrapper ul .col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media all and (max-width: 980px) {
.home-quick-links .wrapper ul {
margin: 0;
justify-content: center;
}
}
.home-quick-links .wrapper li {
text-align: center;
display: flex;
justify-content: center;
}
.home-quick-links .wrapper li figure {
margin-block: 0 2.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.home-quick-links .wrapper li figure img {
transition: transform 0.3s ease-in;
}
@media all and (max-width: 1024px) {
.home-quick-links .wrapper li figure {
margin-bottom: 1.5rem;
}
}
.home-quick-links .wrapper li a {
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
text-decoration: unset;
}
.home-quick-links .wrapper li h5 {
color: #fff;
padding-bottom: 1rem;
font-size: 1.8rem;
line-height: 2.2rem;
letter-spacing: 0px;
margin:0px;
}
.home-quick-links .wrapper li p {
color: #ccc;
margin:0px
}
@media all and (min-width: 519px) {
.home-quick-links .wrapper li p {
max-width: 32rem;
margin:0px
}
}
@media all and (max-width: 768px) {
.home-quick-links .wrapper li {
padding-bottom: 4rem !important;
}
}
.home-quick-links .wrapper li:hover img {
transform: scale(1.1);
opacity: 0.8;
}
.home-quick-links .wrapper li:hover h5 {
transform: translateY(-5px);
}
@media all and (min-width: 767px) {
.home-quick-links .wrapper li:nth-child(2) {
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
}
.home-banner {
margin: 0;
}
.home-banner:not(.hybrid) {
/*background: #66b934;
background: linear-gradient(180deg, #66b934 0%, #478721 100%);*/
background: #fff !important;
background: linear-gradient(180deg, #fff 0%, #fff 100%) !important;
}
@media all and (max-width: 768px) {
.home-banner.hybrid figure {
padding-top:4rem !important;
}
}
.home-banner .pagination-wrapper {
padding: 0 !important;
position: relative;
}
.home-banner .pagination-wrapper .swiper-pagination {
bottom: 2rem;
left: 0;
right: 0;
}
@media all and (max-width: 760px) {
.home-banner .pagination-wrapper .swiper-pagination {
bottom: 1rem;
}
}
.home-banner .pagination-wrapper .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
margin: 0 8px;
background-color: #fff;
}
.home-banner .pagination-wrapper .swiper-pagination .swiper-pagination-bullet-active {
background-color: #fff;
}
@media all and (max-width: 680px) {
.home-banner .swiper-container {
height: auto;
}
}
.home-banner .swiper-container .swiper-slide {
background-size: cover !important;
}
/*@media all and (min-width: 761px) {*/
@media all and (min-width: 1381px) {
.home-banner .swiper-container .swiper-slide {
height: 534px;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) {
height: 100%;
max-width:100% !important;
padding: 0;
}
@media all and (max-width: 1080px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) {
/*padding: 4rem 2rem;*/
padding: 0;
}
}
@media all and (max-width: 760px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) {
text-align: center;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section {
flex: 1;
padding: 6rem 4rem;
color: #fff;
}
@media all and (max-width: 1080px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section {
padding: 6rem 4rem 6rem 0;
}
}
@media all and (max-width: 860px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section {
padding: 4rem 4rem 4rem 0;
}
}
@media all and (max-width: 760px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section {
flex: 0 0 100%;
padding: 4rem 0;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section h4 {
text-transform: uppercase;
padding: 0;
margin: 0px;
font-size: 2rem;
line-height: 2.8rem;
font-weight: 500 !important;
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section h1 {
padding-bottom: 1rem;
margin: 0px;
font-size: 5rem;
line-height: 6rem;
font-weight: 600;
letter-spacing: -2px;
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section h5 {
margin: 0px;
font-size: 1.8rem;
line-height: 2.2rem;
font-weight: 500 !important;
padding-bottom: 2rem;
letter-spacing:0px
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p{ margin: 0px;}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a {
margin: 0 1.5rem 0 0;
}
@media all and (max-width: 760px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a {
margin: 0 0.75rem;
padding: 0 2.5rem;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a.white {
background-color: #fff;
color: #232323;
box-shadow: inset 0 0 0 0 #232323;
transition: all 0.3s ease-in-out;
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a.white:hover {
box-shadow: inset 20rem 0 0 0 #232323;
}
@media all and (max-width: 1140px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a.white:hover {
box-shadow: inset 110rem 0 0 0 #232323;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p a.white:hover {
color: #fff;
}
@media all and (max-width: 520px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section p > a {
flex: 0 0 80%;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) figure {
/*flex: 0 0 40%;*/
flex: 0 0 100%;
text-align: center;
margin: 0;
line-height:0;
}
.home-banner.hybrid .swiper-container .wrapper:not(.pagination-wrapper) figure {
flex: 0 0 40%;
align-items: center;
display: flex;
}
@media all and (max-width: 760px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) figure {
margin: 0 auto;
}
}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) figure img {
max-width: 100%;
}
@media all and (max-width: 1080px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) figure {
/* flex: 0 0 40%;*/
flex: 0 0 100%;
display: flex;
align-items: center;
}
}
@media all and (max-width: 760px) {
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) figure {
/*flex: 0 0 70%;
padding-top: 2rem;*/
order: -1;
flex: 0 0 100%;
padding-top: 0;
justify-content: center;
}
}
@keyframes back {
100% {
right: 0;
}
}
@media all and (max-width: 680px) {
.home-banner .swiper-container .slide-1 .wrapper {
padding: 0.5rem 0 4rem;
}
}
@media all and (max-width: 680px) {
.home-banner .swiper-container .slide-1 {
min-height: 60rem;
}
}
.afford .wrapper {
align-items: flex-start;
}
.afford .wrapper > section {
padding-right: 10rem;
height: 100%;
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
}
@media all and (max-width: 1080px) {
.afford .wrapper > section {
padding-right: 3rem;
}
}
@media all and (max-width: 1024px) {
.afford .wrapper > section {
padding-right: 0;
flex: 0 0 100%;
align-items: center;
padding-bottom: 2rem;
border: 0px;
}
.afford .wrapper > section p {
text-align: center;
color: #666;
margin: 0px;
}
}
.afford .wrapper > section h2 {
font-size: 5rem;
letter-spacing: -2px;
padding-bottom: 1.5rem;
line-height: 5rem;
}
@media all and (max-width: 900px) {
.afford .wrapper > section h2 {
font-size: 4rem;
text-align: center;
}
}
@media all and (max-width: 680px) {
.afford .wrapper > section h2 {
font-size: 3rem;
line-height: 4rem;
}
}
.afford .wrapper > section p {
letter-spacing: 0;
line-height: 2rem;
font-size: 2rem;
font-weight: 600;
color: #666;
margin: 0px;
}
.afford .wrapper > aside {
flex: 1;
padding: 5px 0 0;
}
.afford .wrapper > aside .btn {
padding: 0 5rem;
}
@media all and (max-width: 1024px) {
.afford .wrapper > aside {
padding-right: 0;
flex: 0 0 100%;
padding-left: 0;
display: flex;
justify-content: center;
}
}
.about-page .home-gry-block {
background-color: transparent;
}
@media all and (min-width: 767px) {
.about-page .home-gry-block .wrapper section div {
padding-left: 0;
}
}
.about-page .home-gry-block .wrapper figure {
min-height: 48rem;
}
.faq-block {
background-color: #f4f4f4;
}
.faq-block .wrapper {
max-width: 100rem;
}
@media all and (max-width: 940px) {
.faq-block .wrapper {
max-width: 100%;
}
}
.faq-block .wrapper > h2 {
text-align: center;
padding-bottom: 5rem;
}
.sheet-quicklinks {
padding: 9rem 0 12rem;
}
@media all and (max-width: 768px) {
.sheet-quicklinks {
padding: 0 0 8rem;
}
}
.sheet-quicklinks ul {
justify-content: center;
padding: 0px;
}
.sheet-quicklinks ul li {
padding: 2rem;
list-style: none;
}
.sheet-quicklinks ul li a {
border: 1px solid #d1d1d1;
border-radius: 100%;
display: block;
overflow: hidden;
width: 29rem;
height: 29rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
@media all and (min-width: 767px) {
.sheet-quicklinks ul li a {
width: 29rem;
height: 29rem;
}
}
.sheet-quicklinks ul li a figure {
padding-bottom: 2rem;
margin: 0px;
}
.sheet-quicklinks ul li a h3 {
padding-bottom: 0;
line-height: 2.2rem;
margin: 0px;
font-size: 2rem;
letter-spacing: 0;
}
.sheet-quicklinks ul li a:hover {
border-color: #67a83f;
}
.sheet-quicklinks ul li a:hover img {
transform: scale(1.1);
}
.sheet-quicklinks ul li a:hover h3 {
background-position: 0;
}
.content-block p {
color: #666;
}
@media all and (min-width: 767px) {
.three-blocks .block-wrapper {
margin: 0 0 5rem;
}
}
.three-blocks .block-wrapper section {
flex: 0 0 33.33%;
border-bottom: 1px solid #d1d1d1;
}
@media all and (min-width: 767px) {
.three-blocks .block-wrapper section {
padding: 0 0 5rem;
}
}
@media all and (max-width: 768px) {
.three-blocks .block-wrapper section {
flex: 0 0 100%;
}
}
.three-blocks .block-wrapper section div {
padding: 2rem 5rem 0;
}
@media all and (max-width: 980px) {
.three-blocks .block-wrapper section div {
padding: 2rem 2rem 0;
}
}
@media all and (max-width: 768px) {
.three-blocks .block-wrapper section div {
padding: 4rem 0;
}
}
.three-blocks .block-wrapper section h3 {
padding-bottom: 0.5rem;
margin: 0px;
font-size: 2rem;
line-height: 2.8rem;
letter-spacing: 0;
}
.three-blocks .block-wrapper section p {
font-size: 1.5rem;
color: #666;
line-height: 2rem;
margin: 0px;
}
@media all and (min-width: 767px) {
.three-blocks .block-wrapper section:first-of-type div {
padding-left: 0;
}
}
@media all and (min-width: 767px) {
.three-blocks .block-wrapper section:nth-child(2) {
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
}
}
@media all and (min-width: 767px) {
.three-blocks .block-wrapper section:last-of-type div {
padding-right: 0;
}
}
@media all and (max-width: 768px) {
.three-blocks .block-wrapper section:last-of-type {
border: 0;
}
}
.wholesale-page h6 {
font-weight: 500 !important;
padding-bottom: 4rem;
font-size: 1.5rem;
margin:0px;
line-height: 2.2rem;
}
.wholesale-top-block .form-action {
display: flex;
justify-content: center;
}
.wholesale-top-block .form-action button {
width: 22rem;
}
.wholesale-page .form-group {
max-width: 920px;
margin: 6rem auto;
}
.wholesale-page .form-group .two-col {
margin: 0 -0.5rem;
}
.wholesale-page .form-group .two-col .col {
flex: 0 0 50%;
padding: 0 0.5rem 1rem;
}
.wholesale-page .form-group .two-col .col input {
width: 100%;
border-color: #e5e5e5;
}
.wholesale-top-block .form-group textarea {
width: 100%;
border-radius: 5px;
border-color: #e5e5e5;
height: 15rem;
margin-bottom: 2rem;
}
.assessories-page .tab-block .wrapper .tab-content ul li > a {
padding: 3rem 1rem 4rem;
}
.home-banner.hybrid {
background-color: #f8f8f8;
}
.home-banner.hybrid .swiper-container .swiper-slide section {
color: #232323;
display: flex;
align-items: center;
}
.home-banner.hybrid .btn {
width: 12rem;
text-align: center;
}
.shop-slider {
background-color: #f4f4f4;
max-width: 100%;
padding-top:0px;
margin-top: 25px;
}
.customer-say {
margin: 0 0 6rem;
}
.customer-say h3 {
text-align: center;
}
.recommendation {
margin-block: 6rem;
}
.recommendation p {
padding-bottom: 3rem;
}
.recommendation h6 {
font-weight: 400 !important;
color: #333;
font-size: 1.5rem;
padding-bottom: 0;
}
.recommendation ul li {
color: #333;
}
.shop-middle-block .wrapper section {
margin: 0 -5rem;
}
.shop-middle-block .wrapper section p {
line-height: 2rem;
}
.shop-middle-block .wrapper section div {
flex: 0 0 33.33%;
padding: 0 5rem 2rem;
}
@media all and (max-width: 960px) {
.shop-middle-block .wrapper section div {
flex: 0 0 100%;
}
}
@media all and (max-width: 520px) {
.shop-middle-block .wrapper section div {
flex: 0 0 100%;
}
}
.shop-middle-block .wrapper section div h2 {
border-bottom: 1px solid;
margin-bottom: 1rem;
padding-bottom: 2rem;
line-height: 3rem;
}
.shop-top-block {
background-color: #f6f6f6;
}
.shop-top-block .wrapper p {
line-height: 2rem;
}
.shop-top-block .wrapper section {
margin: -3rem -5rem 0;
justify-content: center;
}
@media all and (max-width: 1220px) {
.shop-top-block .wrapper section {
margin-top: 0;
}
}
@media all and (max-width: 900px) {
.shop-top-block .wrapper section {
margin: 0 -3rem;
}
}
.shop-top-block .wrapper section div {
flex: 0 0 33.33%;
padding: 0 5rem 2rem;
text-align: center;
}
@media all and (max-width: 980px) {
.shop-top-block .wrapper section div {
padding: 0 2rem 4rem;
}
}
@media all and (max-width: 680px) {
.shop-top-block .wrapper section div {
flex: 0 0 50%;
}
}
@media all and (max-width: 520px) {
.shop-top-block .wrapper section div {
flex: 0 0 100%;
}
}
.shop-top-block .wrapper section div h3 {
font-size: 1.8rem;
color: #232323;
padding-bottom: 4rem;
position: relative;
margin:0px;
}
.shop-top-block .wrapper p {
margin: 0px;
}
.shop-top-block .wrapper section div h3::before {
content: "";
width: 65px;
height: 65px;
background-color: red;
display: inline-block;
margin-right: 2rem;
top: 25px;
position: relative;
}
@media all and (max-width: 1220px) {
.shop-top-block .wrapper section div h3::before {
display: block;
width: 100%;
background-position: 50% 0 !important;
top: 0;
}
}
@media all and (max-width: 1220px) {
.shop-top-block .wrapper section div h3 {
padding-bottom: 2rem;
}
}
.shop-top-block .wrapper section div:first-child h3::before {
background: url(../images/ico-t-1.gif) 0 0 no-repeat;
}
.shop-top-block .wrapper section div:first-child + div h3::before {
background: url(../images/ico-t-2.gif) 0 0 no-repeat;
}
.shop-top-block .wrapper section div:first-child + div + div h3::before {
background: url(../images/ico-t-3.gif) 0 0 no-repeat;
}
@media all and (max-width: 980px) {
.shop-top-block .wrapper section div:first-child + div + div {
padding-bottom: 0;
}
}
.contact-page {
padding-bottom: 0;
}
.contact-page .map {
height: 45rem;
}
.contact-page .contact-top-block aside {
flex: 0 0 40%;
}
@media all and (max-width: 768px) {
.contact-page .contact-top-block aside {
flex: 0 0 100%;
}
}
.contact-page .contact-top-block aside div {
padding-bottom: 2rem;
}
.contact-page .contact-top-block aside p {
padding-bottom: 2rem;
}
.contact-page .contact-top-block > section {
flex: 1;
}
.contact-page h5 {
font-size: 2.2rem !important;
}
@media all and (max-width: 768px) {
.contact-page h5 {
padding-bottom: 3rem;
}
}
.contact-page h3 {
text-align: center;
padding-bottom: 3rem;
}
.contact-page .col section div {
flex: 0 0 50%;
}
.contact-page .form-group {
padding-bottom: 4rem;
}
.contact-page .form-group .two-col {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
margin: -10px;
padding: 10px 0 20px;
}
.contact-page .form-group .two-col .col {
list-style: none;
flex: 0 0 50%;
max-width: 50%;
padding: 0 10px;
}
@media all and (max-width: 768px) {
.contact-page .form-group .two-col .col {
flex: 0 0 50%;
max-width: 50%;
}
}
@media all and (max-width: 760px) {
.contact-page .form-group .two-col .col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media all and (max-width: 520px) {
.contact-page .form-group .two-col .col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media all and (max-width: 768px) {
.contact-page .form-group .two-col {
padding-bottom: 0;
}
.contact-page .form-group .two-col .col {
padding-bottom: 2rem;
}
}
.contact-page .form-group .two-col .col input {
width: 100%;
color: #818181;
}
.contact-page .form-group ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #666;
opacity: 1;
/* Firefox */
}
.contact-page .form-group :-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #666;
}
.contact-page .form-group ::-ms-input-placeholder {
/* Microsoft Edge */
color: #666;
}
.contact-page .form-group textarea {
width: 100%;
height: 19rem;
min-height: 19rem;
resize: none;
line-height: 25px;
margin-bottom: 0;
margin-top: 0;
}
.contact-page .form-group .form-action {
justify-content: center;
text-align: center;
}
.contact-page .form-group .form-action .btn {
padding: 0 6rem;
background-color: #67a83f;
color: #fff;
text-transform: none;
margin: 0;
}
@media all and (max-width: 480px) {
.contact-page .form-group .form-action .btn {
padding: 0 12rem;
}
}
.select-wrapper {
position: relative;
}
.select-wrapper::before {
content: "";
background: url(drop.gif);
width: 13px;
height: 7px;
display: block;
position: absolute;
top: 20px;
right: 20px;
}
.select-wrapper select {
cursor: pointer;
background-color: transparent;
border: 1px solid #e5e5e5;
width: 100%;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
padding-left: 1.5rem;
color: #666;
height: auto;
border-radius: 5px;
font-size: 1.4rem;
min-height:130px;
}
.select-wrapper select:focus-within {
border: 1px solid #e5e5e5;
outline: none;
}
.blog-page h3 {
font-size: 3rem;
color: #333;
line-height: 2.8rem;
padding-bottom: 2rem;
letter-spacing: 0px;
}
@media all and (max-width: 520px) {
.blog-page h3 {
font-size: 2.5rem;
}
}
.blog-page .wrapper > section {
flex: 1;
padding: 6rem 0;
}
.blog-page .wrapper > section > article {
padding-bottom: 5rem;
}
.blog-page .wrapper > section > article:last-of-type {
padding-bottom: 0;
}
.blog-page .wrapper > section > article figure {
line-height: 0;
align-self: self-start;
flex: 0 0 40%;
overflow: hidden;
line-height: 0;
margin:0px;
}
.blog-page .wrapper > section > article figure a {
display: block;
}
.blog-page .wrapper > section > article figure a:hover img {
transform: scale(1.05);
}
@media all and (max-width: 768px) {
.blog-page .wrapper > section > article figure {
flex: 0 0 100%;
margin-bottom: 2rem;
}
}
@media all and (min-width: 767px) {
.blog-page .wrapper > section > article figure img {
height: 29rem;
}
}
@media all and (max-width: 768px) {
.blog-page .wrapper > section > article figure img {
max-width: 100%;
}
}
.blog-page .wrapper > section > article > section {
flex: 1;
}
@media all and (min-width: 767px) {
.blog-page .wrapper > section > article > section {
padding: 0 0 0 2rem;
}
}
.blog-page .wrapper > section > article > section h3 a:hover {
background-position: 0;
}
.blog-page .wrapper > section > article > section > div {
padding-bottom: 3rem;
}
.blog-page .wrapper > section > article > section > div + p {
padding-bottom: 2rem;
}
.blog-page .wrapper > section > article > section p > a {
padding: 0 3.5rem;
}
.blog-page .wrapper > section > article > section p {
font-size: 1.5rem;
line-height: 2.2rem;
margin:0px;
}
.blog-page .wrapper > section > article > section .meta-data {
padding-bottom: 5rem;
letter-spacing:0px;
font-size: 1.3rem;
text-transform: capitalize;
}
@media all and (max-width: 768px) {
.blog-page .wrapper > section > article > section .meta-data {
justify-content: center;
padding-bottom: 0;
}
}
.blog-page .wrapper > section > article > section .meta-data div {
color: #333;
font-size: 1.3rem;
}
.blog-page .wrapper > section > article > section .meta-data div:first-child {
padding-right: 4rem;
}
.blog-page .wrapper > aside {
flex: 0 0 38rem;
background-color: #f4f4f4;
}
@media all and (max-width: 1024px) {
.blog-page .wrapper > aside {
flex: 0 0 100%;
order: -1;
}
}
.blog-page .wrapper > aside > section {
padding: 3rem;
border-bottom: 1.5rem solid #fff;
}
.blog-page .wrapper > aside > section h3 {
border-bottom: 2px solid;
padding-bottom: 1.5rem;
margin-bottom: 2rem;
margin-top: 0;
}
.blog-page .wrapper > aside > section.search-post {
padding-top: 6rem;
}
.blog-page .wrapper > aside > section.search-post div {
position: relative;
}
.blog-page .wrapper > aside > section.search-post div input[type=text] {
width: 100%;
padding-right: 6rem;
}
.blog-page .wrapper > aside > section.search-post div button {
left: inherit;
right: 20px;
}
.blog-page .wrapper > aside > section.latest-post ul li {
padding-bottom: 2.5rem;
line-height: 2rem;
}
.blog-page .wrapper > aside > section.latest-post ul {
padding: 0px;
list-style: none;
}
.blog-page .wrapper > aside > section.latest-post ul li a {
font-size: 2rem;
font-weight: 500;
color: #67a83f;
position: relative;
text-decoration: unset;
}
.blog-page .wrapper > aside > section.latest-post ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(0);
height: 1px;
background-color: #67a83f;
}
.blog-page .wrapper > aside > section.latest-post ul li a:hover::after {
transform: scaleX(1);
}
.blog-page .wrapper > aside > section.latest-post ul li:last-child {
padding-bottom: 0;
}
.blog-page .wrapper > aside > section.category {
border: none;
}
.blog-page .wrapper > aside > section.category ul li {
padding-bottom: 1rem;
}
.blog-page .wrapper > aside > section.category ul {
padding: 0;
list-style:none;
}
.blog-page .wrapper > aside > section.category ul li a {
font-size: 1.5rem;
position: relative;
color: #232323;
text-decoration: none;
}
.blog-page .wrapper > aside > section.category ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform-origin: left;
transform: scaleX(0);
height: 1px;
background-color: #67a83f;
}
.blog-page .wrapper > aside > section.category ul li a:hover::after {
transform: scaleX(1);
}
.blog-page .wrapper > aside > section.category ul li:last-child {
padding-bottom: 0;
}
.blog-detail .wrapper > section > article {
padding-bottom: 5rem !important;
padding-right: 2rem;
}
@media all and (max-width: 768px) {
.blog-detail .wrapper > section > article {
padding-right: 0;
padding-bottom: 0 !important;
}
}
.blog-detail .wrapper > section > article figure {
flex: 0 0 100%;
padding-bottom: 4rem;
}
.blog-detail .wrapper > section > article figure img {
height: auto;
width: 100%;
}
.blog-detail .wrapper > section > article > section {
padding: 0 0 2rem !important;
}
.blog-detail .wrapper section article .meta-wrapper {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding: 2rem 0 !important;
margin-bottom: 3rem;
justify-content: space-between;
}
.blog-detail .wrapper section article .meta-wrapper .social{
padding-bottom: 0;
}
.blog-detail .wrapper section article .meta-wrapper .social .share-button__button {
min-height: auto;
}
.blog-detail .meta-wrapper .meta-data {
padding: 0 !important;
}
.blog-detail .comments-block {
margin-top: 3rem;
}
.blog-detail .comments-block ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #a9a9a9 !important;
}
.blog-detail .comments-block ::-moz-placeholder {
/* Firefox 19+ */
color: #a9a9a9 !important;
}
.blog-detail .comments-block :-ms-input-placeholder {
/* IE 10+ */
color: #a9a9a9 !important;
}
.blog-detail .comments-block :-moz-placeholder {
/* Firefox 18- */
color: #a9a9a9 !important;
}
.blog-detail .comment-form h2 {
border-bottom: 1px solid #e5e5e5;
font-size: 2rem;
color: #333;
padding-bottom: 1rem;
margin-bottom: 4rem;
}
@media all and (max-width: 768px) {
.blog-detail .comments-block .comments-form {
justify-content: center;
}
}
.blog-detail .comments-block .comments-form .btn {
padding: 0 7rem;
}
.blog-detail .comments-block .comments-form label {
display: block;
padding-bottom: 0.5rem;
}
@media all and (max-width: 768px) {
.blog-detail .comments-block .comments-form label {
text-align: left;
}
}
.blog-detail .comments-block .comments-form > div {
flex: 0 0 40%;
padding: 0 2rem 2rem 0;
}
@media all and (max-width: 768px) {
.blog-detail .comments-block .comments-form > div {
padding: 0 1rem 2rem;
}
}
@media all and (max-width: 680px) {
.blog-detail .comments-block .comments-form > div {
flex: 0 0 50%;
padding: 0 0 2rem;
}
.blog-detail .comments-block .comments-form > div:first-child {
padding-right: 1rem;
}
.blog-detail .comments-block .comments-form > div:last-child() {
padding-left: 1rem;
}
}
.blog-detail .comments-block .comments-form > div input {
width: 100%;
}
.blog-detail .comments-block .comments-form > section {
flex: 0 0 100%;
padding: 0 2rem 2rem 0;
}
@media all and (max-width: 768px) {
.blog-detail .comments-block .comments-form > section {
padding: 0 0 2rem;
}
}
.blog-detail .comments-block .comments-form > section textarea {
width: 100%;
height: 15rem;
resize: none;
}
.productdetail-page .product-page-wrapper figure {
flex: 0 0 56rem;
max-width: 560px;
overflow: hidden;
}
@media all and (max-width: 980px) {
.productdetail-page .product-page-wrapper figure {
flex: 0 0 40rem;
max-width: 40rem;
}
}
@media all and (max-width: 768px) {
.productdetail-page .product-page-wrapper figure {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 4rem;
}
}
.productdetail-page .product-page-wrapper figure img {
max-width: 100%;
}
.productdetail-page .product-page-wrapper figure .product-images .swiper-slide {
border: 1px solid #e5e5e5;
display: flex;
justify-content: center;
align-items: center;
}
@media all and (min-width: 679px) {
.productdetail-page .product-page-wrapper figure .product-images .swiper-slide {
height: 570px;
}
}
@media all and (max-width: 680px) {
.productdetail-page .product-page-wrapper figure .product-images .swiper-slide {
padding-block: 3rem;
}
}
.productdetail-page .product-page-wrapper figure .product-thumbnail {
margin-top: 3rem;
}
.productdetail-page .product-page-wrapper figure .product-thumbnail .swiper-slide {
cursor: pointer;
background-color: #e5e5e5;
padding: 1.5rem;
border: 1px solid #fff;
}
.productdetail-page .product-page-wrapper figure .product-thumbnail .swiper-slide.swiper-slide-thumb-active {
background-color: #fff;
}
.productdetail-page .product-page-wrapper aside {
flex: 1;
padding-left: 8rem;
}
@media all and (max-width: 980px) {
.productdetail-page .product-page-wrapper aside {
padding-left: 4rem;
}
}
@media all and (max-width: 768px) {
.productdetail-page .product-page-wrapper aside {
flex: 0 0 100%;
padding-left: 0;
}
}
.productdetail-page .product-page-wrapper aside label {
color: #666;
padding-bottom: 1rem;
}
.productdetail-pageproductdetail-page .product-page-wrapper aside .qty-block {
margin-bottom: 3rem;
}
@media all and (max-width: 768px) {
.productdetail-page .product-page-wrapper aside .qty-block {
justify-content: center;
}
}
.productdetail-page .product-page-wrapper aside .qty-block > div {
flex: 0 0 40%;
padding-right: 2rem;
}
@media all and (max-width: 1200px) and (min-width: 768px) {
.productdetail-page .product-page-wrapper aside .qty-block > div {
flex: 0 0 50%;
}
}
@media all and (max-width: 768px) {
.productdetail-page .product-page-wrapper aside .qty-block > div {
padding: 0 1rem;
}
}
.productdetail-page .product-page-wrapper aside .qty-block > div:only-child {
flex: 0 0 80%;
}
.productdetail-page .product-page-wrapper aside p .btn {
padding-inline: 6rem;
}
.productdetail-page .product-page-wrapper aside p.action {
padding-bottom: 2rem;
}
.productdetail-page .product-page-wrapper .product__title h1 {
border-bottom: 1px solid #333;
padding-bottom: 1.25rem;
margin-bottom: 3rem;
font-size: 3rem;
line-height: 4rem;
font-weight: 500 !important;
letter-spacing: -1.5px;
}
.productdetail-page .product-page-wrapper .price span.price-title {
display: block;
font-size: 1.5rem;
color: #666;
line-height: 2rem;
}
.productdetail-page .product-page-wrapper .price .price-item {
font-size: 3rem;
line-height: 3.5rem;
letter-spacing: 0;
}
.productdetail-page .product-page-wrapper aside .prod-description {
padding-top: 4rem;
font-size: 1.5rem;
color: #666;
}
@media all and (max-width: 768px) {
.productdetail-page .product-page-wrapper aside .prod-description {
text-align: left;
}
}
.productdetail-page .product-page-wrapper aside .prod-description li {
color: #333;
position: relative;
}
.productdetail-page .product-page-wrapper aside .prod-description ul {
padding-bottom: 1.5rem;
}
.productdetail-page .product-page-wrapper aside .prod-description ul li {
padding-left: 1rem;
}
.productdetail-page .product-page-wrapper aside .prod-description ul li::before {
content: "-";
position: absolute;
left: 0;
top: 0;
}
.productdetail-page .product-page-wrapper aside .prod-description ol {
padding-left: 0;
margin-left: 0;
}
.productdetail-page .product-page-wrapper aside .prod-description ol li {
padding-left: 0;
}
.productdetail-page .product-page-wrapper aside .prod-description p {
padding-bottom: 2.5rem;
}
.productdetail-page .product-page-wrapper aside .prod-description p strong {
color: #333;
font-weight: 400;
}
.productdetail-page .product-page-wrapper .product__description h4 {
border-bottom: 1px solid #333;
color: #232323;
padding-bottom: 1.25rem;
margin-bottom: 2rem;
font-size: 2rem;
line-height: 2.8rem;
font-weight: 500 !important;
letter-spacing: 0px;
}
.zoom {
display: inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content: "";
display: block;
width: 33px;
height: 33px;
position: absolute;
top: 0;
right: 0;
background: url(icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection {
background-color: transparent;
}
#ex2 img:hover {
cursor: url(grab.cur), default;
}
#ex2 img:active {
cursor: url(grabbed.cur), default;
}
.wpcf7-form-control-wrap {
border: 1px solid #67a83f !important;
}
.wpcf7-not-valid-tip {
display: none !important;
}
.wpcf7-response-output {
background-color: #67a83f;
text-align: center;
padding: 1.5rem;
margin-bottom: 3rem;
}
/*# custom css */
.custom-aboutus-link {margin: 0;padding: 0 !important;}
.shopify-section h2{font-size: 3rem;line-height: 4rem;letter-spacing: -1.5px;}
.custom-collectionlist .collection-list-title{padding-bottom: 4rem;}
.custom-collectionlist .card .card__heading{font-size: 2rem;line-height: 2.8rem;letter-spacing: 0px;}
.tab-content .col figure{margin:0px;text-align:center}
.tab-content a{ text-decoration: unset; display: inline-block;}
.tab-block .tab-links li {list-style: none;}
.blog-page.blog-detail .wrapper > section > article > section {flex: unset;width: 100%;}
.form-action .contact__button{ margin-top: 0;margin-bottom:0px; }
.form-action .button::before,.form-action .button::after{content:unset;}
.contact-top-block .form-group .field::after,.contact-top-block .form-group .select::after,.contact-top-block .form-group .customer .field::after,.contact-top-block .form-group .customer select::after,.contact-top-block .form-group .localization-form__select::after,.wholesale-top-block .form-group .field::after{content: unset;}
.hybrid-page .tab-block .wrapper .tab-content ul .col {flex: unset;padding: 0px;}
.hybrid-page .custom-tab-contain .card__media,.hybrid-page .custom-tab-contain .card__information{text-align:center;}
.hybrid-page .custom-tab-contain .card-information{text-align:center;}
.hybrid-page .custom-tab-contain .quick-add__submit {padding: 0 3rem;width: auto;min-width: auto;}
.hybrid-page .custom-tab-contain .quick-add__submit::after{box-shadow: unset;}
.hybrid-page .custom-tab-contain .card__content,.hybrid-page .custom-tab-contain .card__information{padding:0px}
.hybrid-page .custom-tab-contain .card--card .quick-add {text-align: center;}
.hybrid-page .custom-tab-contain .card__information{padding:0 }
.productdetail-page .product__media-list {border: 1px solid #e5e5e5;}
.productdetail-page .product-media-container{border: unset;}
.bottom-banner figure {margin: 0;}
.product-page-wrapper .product__description p{font-size: 1.5rem;
line-height: 2.5rem;
color: #666;
font-weight: 400;
letter-spacing: 0px;
padding-bottom: 2.5rem;}
.product-page-wrapper .product__description ul,.product-page-wrapper .product__description ol {padding-bottom: 1.5rem;padding-left: 0px;margin: 0px;}
.product-page-wrapper .product__description li {
color: #333;
position: relative;
font-size: 1.5rem;
line-height: 2rem;
}
.rich-text .rich-text__text p {padding-bottom: 3rem;}
.rich-text .rich-text__text p a{ color: #67a83f;font-weight: 500;text-decoration:unset;}
.rich-text .rich-text__text p a:hover{ color: #232323;}
.contact-page .title {padding-bottom: 2rem;}
.inner-page h2 {padding-bottom: 2rem;}
.blog-page .wrapper > section > article > section div p:last-child {padding: 0px;}
.blog-page .wrapper > section > article > section .article-card__footer span{
color: #333;
font-size: 1.3rem;
text-transform: lowercase;
letter-spacing: 0;
}
.main-blog article .article-card__footer{padding-left: 4rem;}
.footer__blocks-wrapper .footer-block:nth-child(1) {width: 24%;}
.footer__blocks-wrapper .footer-block:nth-child(2),.footer__blocks-wrapper .footer-block:nth-child(3) {width: 15%;}
.footer__blocks-wrapper .footer-block:nth-child(4) {width: 20%;}
.footer__blocks-wrapper .footer-block:nth-child(5) {width: 22%;}
.footer-block__newsletter p{color: #232323;font-size: 1.5rem;line-height: 2.5rem;padding-bottom: 1.5rem;font-weight: 400;letter-spacing: 0px;margin: 0px;}
.hybrid-page .card__heading a {color: #666;}
.rich-text .rich-text__text p {padding-bottom: 3rem;margin-bottom: 0;margin-top: 0;}
nav.breadcrumbs {height: auto;border-top: unset;color: #666;},
nav.breadcrumbs a{color: #666;}
.product-grid-container .tab-block {padding-top: 10px;}
.home-gry-block p.custom-aboutus-link a{color: #232323;}
.home-gry-block p.custom-aboutus-link a:hover{color: #67a83f;}
.remove-leftpadding {
padding-left: 0;
}
.copyright__content {
font-family: "Open Sans", sans-serif;
letter-spacing: 0px;
}
.gm-submenu.gm-dropdown .gm-item {
border-bottom: 1px solid #67A83F;
}
.gm-menu-installed .gm-menu .gm-submenu .gm-target:hover {
background: #67A83F;
}
.gm-menu-installed nav .gm-menu .gm-item.gm-level-0 > .gm-target > .gm-retractor {font-size: 22px !important;margin-left: 18px;}
.productdetail-page .product-form__submit.btn {
padding-inline: 6rem;
width: auto;
border: unset;
}
.productdetail-page .product-form__submit.btn::after{ box-shadow:unset; }
.productdetail-page .product__info-wrapper variant-selects{display: inline-block;
width: 43%;}
.productdetail-page .product__info-wrapper .product-form__quantity{display: inline-block;}
.productdetail-page .product__info-wrapper .product-form__quantity .quantity{width: 200px;}
.product__info-container div.product__description{
margin: 5rem 0;
}
#avpoptions-container__v2 {
display: none;
}
/*********** custom media ******************/
@media all and (max-width: 1080px) {
.menu-drawer-container{border-top: 2px solid #dcdcdc;}
.header {display: block;padding-bottom: 0px !important; }
header .other-info > div {padding: 0 1rem;}
header .header-middlelayer{align-items: center;justify-content: space-between;display: flex !important;flex-wrap: wrap;padding: 0 1rem;}
.header__icons {align-items: center;width: 75rem;flex: 1;justify-content: flex-end;}
header a[class^="ico-"] span, header a.header__icon--account span, header a.header__icon--cart span{display: none !important;}
.header.page-width {padding-left: 0;padding-right: 0;}
}
@media all and (max-width: 900px) {
.menu-drawer-container{border-top: 2px solid #dcdcdc;}
.header {display: block;padding-bottom: 0px !important; }
header .other-info > div {padding: 0 1rem;}
header .header-middlelayer{align-items: center;justify-content: space-between;display: flex !important;flex-wrap: wrap;padding: 0 1rem;}
.header__icons {align-items: center;width: 75rem;flex: 1;justify-content: flex-end;}
header a[class^="ico-"] span, header a.header__icon--account span, header a.header__icon--cart span{display: none !important;}
.footer__blocks-wrapper .footer-block:nth-child(2), .footer__blocks-wrapper .footer-block:nth-child(3) {width: 19%;}
.header.page-width {padding-left: 0;padding-right: 0;}
}
@media all and (max-width: 989px) {
header .header__icons .search-wrapper {position: absolute;top: 158px;left: 0;right: 42px;z-index: 2;height: 44px;}
header .header__icons .search-wrapper input{border-radius: 0;padding-left: 4.5rem;border: 0;width: 100%;height:40px;}
header .header__icons .search-wrapper .ico-search{
left: 2rem;
top: 1rem;
}
.header__icon--menu .icon {
right: 4px;
bottom: 10px;
background: #67a83f;
width: 30px;
height: 22px;
color: #fff;
display: block;
z-index: 1;
}
span.toggle_menu {
position: absolute;
right: 0;
bottom: 0;
width: 40px;
height: 44px;
padding: 10px;
background-color: #67a83f;
color: #fff;
box-sizing: border-box;
}
}
@media all and (max-width: 768px) {
.footer__blocks-wrapper .list-menu__item {display: block;}
.social-links {justify-content: center;}
.footer__blocks-wrapper .footer-block:nth-child(1) {width: 100%;text-align: center;}
.footer__blocks-wrapper .footer-block:nth-child(2), .footer__blocks-wrapper .footer-block:nth-child(3) {width: 100%;text-align: center;}
.footer__blocks-wrapper .footer-block:nth-child(4) {width: 100%;text-align: center;}
.footer__blocks-wrapper .footer-block:nth-child(5) {width: 100%;text-align: center;}
.footer-block__details-content .list-menu__item--link {padding-top: 3px !important;padding-bottom: 3px !important;}
}
@media all and (max-width: 750px) {
.contact__fields {display: grid;grid-template-columns: repeat(2, 1fr);grid-column-gap: 2rem; }
.menu-drawer-container{border-top: 2px solid #dcdcdc;}
.header {display: block;padding-bottom: 0px !important; }
header .other-info > div {padding: 0 1rem;}
header .header-middlelayer{align-items: center;justify-content: space-between;display: flex !important;flex-wrap: wrap;padding: 0 1rem;}
.header__icons {align-items: center;width: 75rem;flex: 1;justify-content: flex-end;}
header .header__icons .search-wrapper {top: 133px;}
header a[class^="ico-"] span, header a.header__icon--account span, header a.header__icon--cart span{display: none !important;}
.shop-slider .project-control {
left: -15px;
right: -15px;
}
}
@media all and (max-width: 680px) {
.bottom-banner .wrapper section div h1{font-size: 3.5rem;line-height: 3.5rem;}
.page-width {padding: 0;}
.inner-banner .wrapper h5 {font-size: 1.8rem;line-height: 2.2rem;}
.inner-banner .wrapper h1{font-size: 3.5rem;line-height: 3.5rem;}
.shopify-section h2{font-size: 2.5rem;line-height: 3rem;}
.home-banner .swiper-container .wrapper:not(.pagination-wrapper) > section h1{font-size: 3.5rem;line-height: 3.5rem;}
}
@media all and (max-width: 560px) {
.hybrid-page .tab-block .wrapper .tab-content ul .col {flex: 0 0 100%;}
}
@media all and (max-width: 520px) {
.menu-drawer-container{border-top: 2px solid #dcdcdc;}
.header {display: block;padding-bottom: 0px !important; }
header .other-info > div {padding: 0 1rem;}
header .header-middlelayer{align-items: center;justify-content: space-between;display: flex !important;flex-wrap: wrap;padding: 0 1rem;}
.header__icons {align-items: center;width: 75rem;flex: 1;justify-content: flex-end;}
header a[class^="ico-"] span, header a.header__icon--account span, header a.header__icon--cart span{display: none !important;}
}
.custom-tab-contain .price {
padding-top:5px;
}
.totals__subtotal{
line-height: normal !important;
}
.shop-slider .product_images img{
max-height: 300px;
max-width: 100%;
}
.collection .wrapper{
max-width: 100%;
}
.tab-contents:not(.active){
display: none;
}
.lab-block h2,
h2.rich-text__heading,
h2.collection-tab-title,
.afford h2,
h2.collapsible-content__heading,
.wholesale-page h2,
h2.title{
margin: 0;
}
.shop-middle-block,
.shop-top-block{
overflow: hidden;
}
.table_scroll{
overflow-x: auto;
padding: 2px;
}
.table_scroll a{
color: rgba(var(--color-foreground));
}
@media all and (max-width: 768px) {
.home-gry-block .wrapper section > div ul li::before{
left: 50%;
transform: translateX(-50%);
}
.home-gry-block .wrapper section > div ul li{
text-align: center;
}
}
@media all and (max-width: 767px) {
.header__heading-logo {
max-height: 100px;
width: auto;
}
.home-gry-block .wrapper section > div {
padding: 3.5rem 2.5rem;
}
section.lab-block img {
max-height: 50px;
max-width: 160px;
}
.lab-block section figure {
margin: 1rem;
}
.custom-collectionlist .collection-list-title {
padding-bottom: 2rem;
}
}