/**
 *  Definitions
 *  Breakpoints: 1440, 1280, 1024, 768, 360
 */

:root {
   --Neutrals-Black: #282819;
   --Neutrals-Dark-Grey: #4E4E3E;
   --Neutrals-Grey: #70705F;
   --Neutrals-Medium-Grey: #8A8A7E;
   --Neutrals-Light-Grey: #929283;

   --Neutrals-Dark-Sand: #B4B4A2;
   --Neutrals-Sand: #C6C6B3;
   --Neutrals-Medium-Sand: #DADAC8;
   --Neutrals-Light-Sand: #E6E6D7;
   --Neutrals-White-Sand: #F7F6F2;
   --Neutrals-White: #FFFFFF;

   --Primary-Dark-Green: #003C19;
   --Primary-Green: #006432;
   --Primary-Green-40: rgba(0, 100, 50, 0.4);
   --Primary-Middle-Green: #0F9129;
   --Primary-Light-Green: #19AF23;
   --Primary-Soft-Green: #9ADF9F;
   --Primary-White-Green: #D1EFD3;
   
   --Secondary-Dark-Electro: #00413C;
   --Secondary-Middle-Electro: #00544D;
   --Secondary-Electro: #00786E;
   --Secondary-Light-Electro: #BFDDDB;

   --Primary-Gradient: linear-gradient(290deg, #006432 0%, #267D9E 100%);
   --Gradient-Sand: linear-gradient(135deg, #F7F6F2 5%, #E6E6D7 100%); 
   --Gradient-Green: linear-gradient(139deg, #19AF23 0%, #006432 130%);
   --Gradient-Electro: linear-gradient(320deg, #006432 0%, #3882A6 100%); 
   --Gradient-Black: linear-gradient(123deg, #4E4E3E 0%, #282819 100%); 
   --Gradient-Product-Real: linear-gradient(90deg, #F7F6F2 0%, #E6E6D7 100%);
   --Gradient-Product: linear-gradient(180deg, #F7F6F2 0%, #E6E6D7 100%);

   --Shadow-White: box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); 
   --Shadow-Dark: box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.15);
   --Shadow-Up: box-shadow: 0px -15px 30px 0px rgba(0, 0, 0, 0.05);

   --Secondary-Dark-Blue: #206985;
   --Secondary-Blue: #267D9E;
   --Secondary-Light-Blue: #3882A6;
   --Secondary-Red: #B90523;

   --Hover-on-Green: #5AD062;
}


/* Colors */
.color--black { color: var(--Neutrals-Black) }
.color--dark-grey { color: var(--Neutrals-Dark-Grey) }
.color--grey { color: var(--Neutrals-Grey) }
.color--light-grey { color: var(--Neutrals-Light-Grey) }
.color--dark-sand { color: var(--Neutrals-Dark-Sand) }
.color--sand { color: var(--Neutrals-Sand) }
.color--light-sand { color: var(--Neutrals-Light-Sand) }
.color--white-sand { color: var(--Neutrals-White-Sand) }
.color--white { color: var(--Neutrals-White) }
.color--green { color: var(--Primary-Green) }
.color--light-green { color: var(--Primary-Light-Green) }
.color--electronics { color: var(--Secondary-Electronics) }



/** 
 *   Body styles 
 */
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
}
html {
   min-height: 100%;
   height: 100%;
   /* overflow-x: hidden; */
}
body {
   position: relative;
   width: 100%;
   min-width: 360px;
   min-height: 100vh;
   padding: 64px 0 0 0;
   margin: 0;
   background-color: var(--Neutrals-White);
   font-family: "open-sans", "Open Sans", sans-serif; 
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5;
   color: var(--Neutrals-Grey);
   overflow-anchor: none;
   overflow-y: scroll;
   overflow-x: clip;
}
body.no_scroll {
   position: fixed;
   left: 0;
   right: 0;
   width: 100%;
}


/* Headings */
h1 {
   font-size: 56px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.15;
   letter-spacing: -0.05em;
   color: var(--Neutrals-Black);
}
h2 {
   font-size: 48px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.17;
   letter-spacing: -0.04em; 
   color: var(--Neutrals-Black);
}
h3 {
   font-size: 32px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.25;
   letter-spacing: -0.03em; 
   color: var(--Neutrals-Black);
}
h4 {
   font-size: 24px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.33;
   letter-spacing: -0.02em; 
   color: var(--Neutrals-Black);
}
h5 {
   font-size: 20px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.4;
   letter-spacing: -0.01em; 
   color: var(--Neutrals-Black);
}
h6 {
   font-size: 16px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.5; 
   color: var(--Neutrals-Black);
}
h1 sup, h1 sub, h2 sup, h2 sub, h3 sup, h3 sub {
   font-weight: 300;
}
h4 sup, h4 sub, h5 sup, h5 sub, h6 sup, h6 sub {
   font-weight: 400;
}

@media (max-width: 768px) {
   h1 {
      font-size: 52px;
   }
   h2 {
      font-size: 44px;
   }
   h3 {
      font-size: 32px;
   }
   h4 {
      font-size: 24px;
   }
   h5 {
      font-size: 20px;
   }
   h6 {
      font-size: 16px;
   }
}
@media (max-width: 450px) {
   h1 {
      font-size: 48px;
   }
   h2 {
      font-size: 40px;
   }
   h3 {
      font-size: 32px;
   }
   h4 {
      font-size: 24px;
   }
   h5 {
      font-size: 20px;
   }
   h6 {
      font-size: 16px;
   }
}


/* Paragraphs/Regular */
p {
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.5em;
   color: var(--Neutrals-Grey);
}
p.large, 
p.has-medium-font-size {
   font-size: 20px;
   font-style: normal;
   font-weight: 300;
   line-height: 1.5em;
   letter-spacing: -0.01em;
   color: var(--Neutrals-Grey);
}
p.large sup, 
p.has-medium-font-size sup {
   font-weight: 300;
}
p.small, 
p.has-small-font-size {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.5em;
   color: var(--Neutrals-Grey);
}
p.indent {
   padding-left: 36px;
}

/** List/Unordered */
ul {
   padding: 0;
   margin: 0;
   list-style: none;
}
ul li {
   position: relative;
   padding-left: 24px;
   margin-bottom: 0.25em;
}
ul li::before {
   content: "";
   height: 7px;
   width: 7px;
   position: absolute;
   left: 0;
   top: 0.6em;
   border-radius: 4px;
   background-color: var(--Neutrals-Light-Grey);
}


/* Link/Regular */
a {
   outline: none;
   text-decoration: none;
   font-weight: 600;
   color: inherit;
   transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
   a:hover {
      text-decoration: none;
      color: var(--Primary-Light-Green);
   }
}
a:focus {
   outline: none !important;
   box-shadow: none !important;
}
body.touch_device {
   -webkit-tap-highlight-color: rgba(25, 175, 35, 0.4);
}


/* Subcripts / Supercripts */
sup {
   vertical-align: baseline; 
   position: relative;
   font-size: 0.7em;
   font-weight: 600;
   top: -0.6em;
}
sub {
   vertical-align: baseline; 
   position: relative;
   font-size: 0.7em;
   font-weight: 600;
   bottom: -0.3em;
}



/* Layout blocks
// -------------------------- */
.clear--float::after {
	content: "";
	clear: both;
	display: table;
}
.flex--fit {
	display: block;
	flex: 10 0 auto;
}



.button--text {
   display: inline-block;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px; /* 183.333% */
   letter-spacing: 0.08em;
   text-transform: uppercase;
   transition: color 0.2s ease;
}
.button--text.button--white {
   color: var(--Neutrals-White);
}
@media (hover: hover) and (pointer: fine) {
   .button--text.button--white:hover {
      color: var(--Hover-on-Green);
   }
}


/**  Button Round. Default color: --Neutrals-White 
 *   button--round button--green button--arrow button--arrow_down
 */

.button--round {
   display: inline-block;
   height: 40px;
   width: 40px;
   border: none;
   border-radius: 20px;
   cursor: pointer;
   outline: none;
   background-color: var(--Neutrals-White);
   background-position: center;
   background-repeat: no-repeat;
}
.button--small {
   height: 32px;
   width: 32px;
   border-radius: 16px;
}
.button--round.button--arrow,
.button--round.button--arrow_down,
.button--round.button--arrow_up {
   /*
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
         .st0{fill:none;stroke:#282819;stroke-width:1.1;}
         .st1{fill:none;stroke:#282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;}
      </style>
      <line class="st0" x1="0" y1="6" x2="11.3" y2="6"/>
      <path class="st1" d="M8.27,9.13L11.34,6L8.27,2.87"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--arrow_down {
   transform: rotate(90deg);
}
.button--round.button--arrow_up {
   transform: rotate(-90deg);
}
.button--round.button--arrow_left {
   transform: rotate(180deg);
}
.button--round.button--close {
   /* 
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
         .line{fill:none;stroke:#282819;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;}
      </style>
      <line class="line" x1="2.4" y1="9.7" x2="9.6" y2="2.3"/>
      <line class="line" x1="2.4" y1="2.3" x2="9.6" y2="9.7"/>
   </svg>
   */                       
   background-size: 14px;              
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}

.button--round.button--green {
   background-color: var(--Primary-Light-Green);
}
.button--round.button--green.button--arrow,
.button--round.button--green.button--arrow_down,
.button--round.button--green.button--arrow_up {
   /*
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
         .st0{fill:none;stroke:#FFFFFF;stroke-width:1.4;}
         .st1{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
      </style>
      <line class="st0" x1="0" y1="6" x2="11.3" y2="6"/>
      <path class="st1" d="M8.27,9.13L11.34,6L8.27,2.87"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--green.button--close {
   /*
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
         .line{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;}
      </style>
      <line class="line" x1="2.4" y1="9.7" x2="9.6" y2="2.3"/>
      <line class="line" x1="2.4" y1="2.3" x2="9.6" y2="9.7"/>
   </svg>
   */
   background-size: 14px;              
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}




/**  Buttons. Default color: --Primary-Light-Green 
 *   button--item button--white button--arrow button--arrow_down button--arrow_up
 */

.buttons--container .button--item:not(:last-child) {
   margin-right: 16px;
}

.button--item {
   display: inline-block;
   position: relative;
   height: 48px;
   padding: 18px 32px 18px 32px;
   font-family: "open-sans", sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   text-align: center;
   white-space: nowrap;
   border: none;
   border-radius: 24px;
   cursor: pointer;
   outline: none;
   background: var(--Primary-Light-Green);
}
.button--item span {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--Neutrals-White);
}


.button--item.button--icon {
   padding-right: 58px;
}
.button--item.button--icon::after {
   position: absolute;
   content: "";
   top: 9px;
   right: 9px;
   width: 30px;
   height: 30px;
   border: none;
   border-radius: 15px;
   background-color: var(--Primary-Green-40);
   background-position: center;
   background-repeat: no-repeat;
}
.button--item.button_icon--arrow::after {
   /* 
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
            .st0{fill:none;stroke:#FFFFFF;stroke-width:1.4;}
            .st1{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
      </style>
      <line class="st0" x1="0" y1="6" x2="11.3" y2="6"/>
      <path class="st1" d="M8.27,9.13L11.34,6L8.27,2.87"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button_icon--arrow_down::after {
   transform: rotate(90deg);
}
.button--item.button_icon--arrow_up::after {
   transform: rotate(-90deg);
}
.button--item.button_icon--close::after {
   /* 
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
            .line{fill:none;stroke:#FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;}
      </style>
      <line class="line" x1="2.4" y1="9.7" x2="9.6" y2="2.3"/>
      <line class="line" x1="2.4" y1="2.3" x2="9.6" y2="9.7"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
.button--item.button_icon--load_more::after {
   transform: rotate(45deg);
}


.button--item.button--white {
   background: var(--Neutrals-White);
}
.button--item.button--white span {
   color: var(--Neutrals-Black);
}
.button--item.button--white.button--icon::after {
   background-color: var(--Neutrals-White-Sand);
}
.button--item.button--white.button_icon--arrow::after {
   /* 
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
            .st0{fill:none;stroke:#282819;stroke-width:1.1;}
            .st1{fill:none;stroke:#282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;}
      </style>
      <line class="st0" x1="0" y1="6" x2="11.3" y2="6"/>
      <path class="st1" d="M8.27,9.13L11.34,6L8.27,2.87"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button--white.button_icon--close::after {
   /* 
   <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 12 12">
      <style type="text/css">
            .line{fill:none;stroke:#282819;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:10;}
      </style>
      <line class="line" x1="2.4" y1="9.7" x2="9.6" y2="2.3"/>
      <line class="line" x1="2.4" y1="2.3" x2="9.6" y2="9.7"/>
   </svg>
   */                       
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}

.button--item.button--grey {
   background: var(--Neutrals-Light-Sand);
}
.button--item.button--grey span {
   color: var(--Neutrals-Black);
}
.button--item.button--grey.button--icon::after {
   background-color: var(--Neutrals-Dark-Sand);
}


.button--send_request {
   padding-right: 58px;  
}
.button--send_request::after {
   position: absolute;
   content: "";
   top: 9px;
   right: 9px;
   width: 30px;
   height: 30px;
   border: none;
   border-radius: 15px;
   background-color: var(--Primary-Green-40);
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--send_request.button--action_button {
   position: fixed;
   display: none;
   right: 50px;
   bottom: 24px;
   z-index: 500;
   transition: top 1s, bottom 1s;
}
.button--send_request.button--action_button.button--show_action {
   display: block;
   z-index: 1500;
}
.button--send_request.button--action_button.button--footer_fix {
   position: absolute;
   top: -72px;
   bottom: unset;
   z-index: 500;
}

@media (max-width: 1024px) {
   .button--send_request.button--action_button {
      right: 34px;
   }
}
@media (max-width: 768px) {
   .button--send_request.button--action_button {
      right: 18px;
   }
}
@media (max-width: 450px) {
   .button--send_request.button--action_button {
      right: 10px;
      bottom: 16px;
   }
}

@media (hover: hover) and (pointer: fine) {
   .button--item.button--icon:hover::after,
   .button--send_request:hover::after {
      background-color: var(--Primary-Green);
   }
   .button--item.button--white.button--icon:hover::after {
      background-color: var(--Neutrals-Medium-Sand);
   }
   .button--item.button--grey.button--icon:hover::after {
      background-color: var(--Neutrals-Light-Grey);
   }
}