/*create by Clean Style*/
/* ================================= MAIN =================================*/
html, body {height:100%;}
body {background:#ffffff; margin:0; font-size:16px; color:#212529; min-height:100%; height:auto!important; height:100%; position:relative; line-height: 28px;}
img {border:none; outline:none;}
a {outline-style: none; color:#B90E11;}
a:hover {color:#EF7C00;}
.left { float:left;}	
.right { float:right;}
.clear { clear:both; font-size:0; line-height:0;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

#container {margin:0 auto; padding:0; position: relative; overflow:hidden;}

/* ================================= header =================================*/

.top {background: #ffffff; height: 65px;}
.top .logo img {height: 65px; padding: 10px 0;}
.top .menu {padding: 0px 30px; margin: 0px; display: none; position: relative; z-index: 103; background: #fff;}
.top .menu li {display: block;}
.top .menu li a {line-height: 65px; font-size: 16px; padding: 0 5px; cursor: pointer; color: #212529; text-decoration: none;}
.top .extra .btn {margin: 10px 0; line-height: 43px; height: 45px; padding: 0 15px; background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); color: #fff; border-radius: 15px; font-size: 14px;}
.top .extra a {color:#212529; text-decoration: none; font-size: 14px; line-height: 45px;}
.top .navButton {line-height: 45px; margin: 10px 0; font-size: 20px; cursor: pointer;}
.top .menu.open {display: block;}

.wholesale {margin:0; font-size:16px; font-family: "Inter", sans-serif; color:#212529; min-height:100%; height:auto!important; height:100%; position:relative; line-height: 28px; background: url('/catalog/view/theme/cstyle/images/sunflower_oil.jpg') no-repeat center center; background-size: cover; z-index: 100; background-attachment: fixed;}
.wholesale::before {position: absolute; background: rgba(19, 32, 57, .7); background: linear-gradient(90deg, rgba(19, 32, 57, .9) 0%, rgba(19, 32, 57, .2) 100%); z-index: 101; width: 100%; height: 100%; content: "";}
.wholesale > div {position: relative; z-index: 102;  padding-top:150px; padding-bottom: 150px;}
.wholesale .topText {font-family: "Inter", sans-serif; text-transform: uppercase; color:#ffffff; font-size: 1.25rem; line-height: 1.75rem;}
.wholesale .title {font-size: 2rem; line-height: 1; font-family: "Inter", sans-serif; color: #ffffff; font-weight: 800;}
.wholesale .title span {font-family: "Gelasio", serif; color:#FFCC00; font-style: italic;}
.wholesale .subtitle {color:rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.5rem;}
.wholesale .tags {}
.wholesale .tags span {padding:0 15px; border-radius: 15px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); line-height: 30px; color:#fff; white-space: nowrap; margin: 5px 5px 5px 0; display: inline-block; font-size: 16px;}
.wholesale .tags i {color: #00C75D;}
.wholesale .cta {}
.wholesale .cta a.first {background: #00C75D; color:#ffffff; display: inline-block; padding: 15px 30px; border-radius: 15px; text-decoration: none; font-size: 18px; transition: background .3s; width:100%;}
.wholesale .cta a:hover {background: #07eb5b;}
.wholesale .cta a.second {background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color:#ffffff; display: inline-block; padding: 15px 30px; border-radius: 15px; text-decoration: none; font-size: 18px; transition: background .3s, color .3s; width:100%;}
.wholesale .cta a.second:hover {background: rgba(255, 255, 255, .8); color:#212529;}
.wholesale .contact {font-size: 1rem; line-height:1.6rem; color:#ffffff; font-weight: 700;}
.wholesale .contact a {text-decoration: none; color: #ffffff;}

.range {padding: 100px 0; background: rgba(252, 252, 248, 1.0);}
.range .topTitle {color:#00c753; text-transform: uppercase;}
.range .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.range .text {font-size: 18px; color:#656c7b;}
.range .rangeButtons li {display: inline-block; margin: 0 5px;}
.range .rangeButtons button {background: #f4f5ef; border-radius: 15px; border:none; color:#656c7b; padding: 0 15px; line-height: 30px; transition: background .3s, color .3s; margin-bottom: 15px;}
.range .rangeButtons button.active {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); color:#ffffff;}
.range .item {background: #fff; border-radius: 15px; border:1px solid #dee2e6; padding: 20px;}
.range .capacity {color:#00C75D; font-weight: 500;}
.range .image {transform: scale(0.9); transition: transform .3s;}
.range .image:hover {transform: scale(1.0);}
.range .description {font-size: 14px; font-style: italic; line-height: 18px; color:#656c7b;}
.range .stars {font-size: 14px; color:#ffcc00;}
.range .stock {font-size: 14px; color:#00c753;}
.range .request {font-size: 14px; color:#ffcc00;}
.range .quote {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); color:#fff; line-height: 40px; border-radius: 15px; text-align: center; cursor: pointer;}
.range .bottom {color:#656c7b; font-size: 0.875rem;}

.advantage {background: #f8f8f3; padding: 100px 0;}
.advantage .topTitle {color:#00c753; text-transform: uppercase;}
.advantage .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.advantage .item {background: #fff; border-radius: 15px; border:1px solid #dee2e6; padding: 30px;}
.advantage .icon {background: #00c753; width: 50px; height: 50px; text-align: center; color:#fff; border-radius: 10px; line-height: 50px; font-size: 22px;}
.advantage .name {font-size: 18px; font-weight: 800;}
.advantage .text {color:#656c7b; font-size: 16px;}

.pricing {padding: 100px 0; background: #fcfcf8;}
.pricing .topTitle {color:#00c753; text-transform: uppercase;}
.pricing .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.pricing .text {font-size: 18px; color:#656c7b;}
.pricing .item {background: #fff; border-radius: 15px; border:1px solid #dee2e6; padding: 20px;}
.pricing .icong {background: #00c753; width: 50px; height: 50px; text-align: center; color:#fff; border-radius: 10px; line-height: 50px; font-size: 22px; display: inline-block;}
.pricing .icono {background: #ffc922; width: 50px; height: 50px; text-align: center; color:#fff; border-radius: 10px; line-height: 50px; font-size: 22px; display: inline-block;}
.pricing .percent {font-size: 1.875rem; font-weight: 800;}
.pricing .green {color:#00c753;}
.pricing .orange {color:#ffc922;}
.pricing .text {color:#656c7b; font-size: 16px;}
.pricing .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}

.packaging {padding: 100px 0; background: #fcfcf8;}
.packaging .topTitle {color:#00c753; text-transform: uppercase;}
.packaging .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.packaging .text {font-size: 18px; color:#656c7b;}
.packaging .item {background: #fff; border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}
.packaging .name {font-size: 18px; padding: 0 20px;}
.packaging .text {color:#656c7b; font-size: 16px; padding: 0 20px;}
.packaging .tag {color:#656c7b; font-size: 14px; color: #00c753; padding: 0 20px;}
.packaging .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.packaging p {font-size: 14px; color: #656c7b;}

.label {padding: 100px 0; background: #f8f8f3;}
.label .topTitle {color:#00c753; text-transform: uppercase;}
.label .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.label .text {font-size: 18px; color:#656c7b;}
.label .text {color:#656c7b; font-size: 16px;}
.label .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.label .image {border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}

.about {padding: 100px 0; background: #f8f8f4;}
.about .topTitle {color:#00c753; text-transform: uppercase;}
.about .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.about .text {font-size: 18px; color:#656c7b;}
.about .text {color:#656c7b; font-size: 16px;}
.about .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.about .green {color:#00c753;}
.about .image {border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}
.about .tag {box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); background: #fff; border-radius: 15px; line-height: 30px; padding: 0 10px; display: inline-block; border:1px solid #dee2e6; margin: 0 5px 5px 0; font-size: 14px;}

.logistics {background:#fcfcf8; padding: 100px 0; }
.logistics .topTitle {color:#00c753; text-transform: uppercase;}
.logistics .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.logistics .text {color:#656c7b; font-size: 16px;}
.logistics .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.logistics .green {color:#00c753;}
.logistics .image {border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}
.logistics .tag {box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); background: #fff; border-radius: 15px; line-height: 30px; padding: 0 10px; display: inline-block; border:1px solid #dee2e6; margin: 0 5px 5px 0; font-size: 14px;}
.logistics ul {margin: 0px; padding: 0px;}
.logistics ul li {margin: 0 0 3px 0;}
.logistics ul i {color: #00c753; background: #f0f4ec; border-radius: 15px; text-align: center; display: inline-block; width: 40px; line-height: 40px; font-size: 14px;}

.innovation {background:#f8f8f3; padding: 100px 0;}
.innovation .topTitle {color:#00c753; text-transform: uppercase;}
.innovation .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.innovation .text {font-size: 18px; color:#656c7b; color:#656c7b; font-size: 16px;}
.innovation .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.innovation .green {color:#00c753;}
.innovation .image {border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}
.innovation .item {border-radius: 15px; border:1px solid #dee2e6; overflow: hidden; background: #fff; padding: 15px;}
.innovation .item .name {font-size: 18px;}
.innovation .item .text {font-size: 12px;}
.innovation .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}

.contacts {background:#1c2a46; padding: 100px 0;}
.contacts .title {font-size: 3rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 4rem;}
.contacts .text {font-size: 18px; color:#e7e9e2; font-size: 16px;}
.contacts .text i {color: #ffcc00;}
.contacts input[type="text"] {width: 100%; background: #475269; border:1px solid #5a6479; border-radius: 15px; line-height: 45px; padding: 0 15px; color: #fff;}
.contacts input[type="text"]::placeholder {color:#9196a4;}
.contacts input[type="email"] {width: 100%; background: #475269; border:1px solid #5a6479; border-radius: 15px; line-height: 45px; padding: 0 15px; color: #fff;}
.contacts input[type="email"]::placeholder {color:#9196a4;}
.contacts .form {background: #33405a; border:1px solid #48536b; border-radius: 15px; padding: 30px;}
.contacts .select {width: 100%; background: #475269; border:1px solid #5a6479; border-radius: 15px; line-height: 45px; padding: 0 15px; position: relative; overflow: hidden;}
.contacts .select::after {position: absolute; content: "\f107"; font-family: "Font Awesome 7 Free"; font-feature-settings: normal; font-style: normal; font-synthesis: none; font-variant: normal; font-weight: 900; line-height: 1; text-align: center; text-rendering: auto; right: 15px; line-height: 45px; color:#9196a4; top:0px;}
.contacts select {width: calc(100% + 40px); background: none; border:none; color: #fff;}
.contacts select option:disabled {color:#9196a4;}
.contacts textarea {width: 100%; background: #475269; border:1px solid #5a6479; border-radius: 15px; line-height: 45px; color: #fff; line-height: 20px; min-height: 100px; padding: 15px;}
.contacts button {width: 100%; height: 50px; border-radius: 15px; background: #ffc540; color:#fff; border:none;}

.description {padding: 100px 0; background: rgba(252, 252, 248, 1.0);}
.description .topTitle {color:#00c753; text-transform: uppercase;}
.description .title {font-size: 2rem; font-family: "Inter", sans-serif; font-weight: 800; line-height: 2.4rem;}
.description .subTitle {color:#656c7b; font-size: 16px;}
.description .rangeButtons li {display: inline-block; margin: 0 5px;}
.description .rangeButtons button {background: #f4f5ef; border-radius: 15px; border:none; color:#656c7b; padding: 0 15px; line-height: 30px; transition: background .3s, color .3s; margin-bottom: 15px;}
.description .rangeButtons button.active {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); color:#ffffff;}
.description .item {background: #fff; border-radius: 15px; border:1px solid #dee2e6; overflow: hidden;}
.description .capacity {color:#00C75D; font-weight: 500;}
.description .image {transform: scale(1); transition: transform .3s;}
.description .image:hover {transform: scale(1.06);}
.description .text {font-size: 14px; font-style: italic; line-height: 18px; color:#656c7b;}
.description .stars {font-size: 14px; color:#ffcc00;}
.description .stock {font-size: 14px; color:#00c753;}
.description .request {font-size: 14px; color:#ffcc00;}
.description .quote {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); color:#fff; line-height: 40px; border-radius: 15px; text-align: center; cursor: pointer;}
.description .bottom {color:#656c7b; font-size: 0.875rem;}
.description .icon {background: #00c753; width: 50px; height: 50px; text-align: center; color:#fff; border-radius: 10px; line-height: 50px; font-size: 22px;}
.description .name {font-size: 18px; font-weight: 800;}
.description .green {color:#00c753;}
.description .btn {background: linear-gradient(135deg, hsl(145, 100%, 39%), hsl(95, 70%, 50%)); border-radius: 15px; line-height: 40px; color: #fff; text-decoration: none; padding: 0 30px;}
.description .tag {box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); background: #fff; border-radius: 15px; line-height: 30px; padding: 0 10px; display: inline-block; border:1px solid #dee2e6; margin: 0 5px 5px 0; font-size: 14px;}

/* ================================= footer =================================*/
.footer {background: #13203a; padding: 100px 0; color: #a1a6b1;}
.footer a {color: #a1a6b1; text-decoration: none;}
.footer .social {margin: 0px; padding: 0px;}
.footer .logo {width: 240px;}
.footer .social li {display: inline-block; background: #2b364e; border-radius: 50%; width: 40px; height: 40px; color: #fff; text-align: center; line-height: 40px;}
.footer .social li a {color: #fff;}
.footer .title {font-size: 16px; font-weight: 800; text-transform: uppercase;}
.footer ul {margin: 0px; padding: 0px;}





@media (min-width: 576px) {
	
}


@media (min-width: 768px) {
	
}


@media (min-width: 992px) {
	.top .menu {display: block;padding: 0px; background: none;}
	.top .menu li {display: inline-block;}

	.wholesale .title {font-size: 4.5rem;}
	.wholesale .subtitle {font-size: 1.25rem; line-height: 1.75rem;}
	.wholesale .tags span {font-size: 16px;}
	.wholesale .cta a.first {width: auto;}
	.wholesale .cta a.second {width: auto;}
	.wholesale .contact {font-size: 1.4rem; line-height:2rem;}

	.range .title {font-size: 3rem; line-height: 4rem;}
	.range .rangeButtons button {padding: 0 30px; margin-bottom: 0;}

	.advantage .title {font-size: 3rem; line-height: 4rem;}

	.pricing .title {font-size: 3rem; line-height: 4rem;}

	.packaging .title {font-size: 3rem; line-height: 4rem;}

	.label .title {font-size: 3rem; line-height: 4rem;}

	.about .title {font-size: 3rem; line-height: 4rem;}

	.logistics .title {font-size: 3rem; line-height: 4rem;}

	.innovation .title {font-size: 3rem; line-height: 4rem;}
}


@media (min-width: 1200px) {
	
}


@media (min-width: 1400px) {

}