*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}
a {
	text-decoration: none;
}
ul,
ol,
li {
	list-style: none;
}
img {
	vertical-align: top;
}
h1,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}
h2{
   font-size: 34.18px;
   font-weight: 700;
}
h3{
   font-size: 27.344px;
   font-weight: 500;
}

/*-------------------SATOSHI----------------------*/

@font-face {
   font-family: 'Satoshi';
   src: url('../fonts/Satoshi/Satoshi-Medium.woff') format('opentype');
   font-weight: 500;
}

/*-------------------SF-PRO-DISPLAY----------------------*/

@font-face {
   font-family: 'SF Pro Display';
   src: url('../fonts/sf-pro-display-cufonfonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
   font-weight: 400;
}
@font-face {
   font-family: 'SF Pro Display';
   src: url('../fonts/sf-pro-display-cufonfonts/SFPRODISPLAYMEDIUM.OTF') format('opentype');
   font-weight: 500;
}
@font-face {
   font-family: 'SF Pro Display';
   src: url('../fonts/sf-pro-display-cufonfonts/SFPRODISPLAYBOLD.OTF') format('opentype');
   font-weight: 700;
}

/*-------------------ROBOTO----------------------*/

@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto/Roboto-Light.ttf') format('opentype');
   font-weight: 300;
}
@font-face {
   font-family: 'Roboto';
   src: url('../fonts/Roboto/Roboto-Bold.ttf') format('opentype');
   font-weight: 700;
}

/*-------------------BASE----------------------*/

body {
   font-family: 'SF Pro Display';
   color: #000;
   font-size: 17.5px;
   font-weight: 400;
   background-color: #F0F0F0;
}
body.lock{
   overflow-y: hidden;
}
._container {
	max-width: 1310px;
	margin: 0 auto;
	padding: 0px 15px;
	/*border: 1px solid rgb(68, 120, 231);*/
}
.wrapper {
}
.button{
   padding: 10px 50px;
   border-radius: 100px;
   background: #000;
   color: #fff;
   font-weight: 400;
   cursor: pointer;
   font-size: 17.5px;
   border: 1px solid #000;
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
   transition: all 0.3s ease 0s;
}
.button:hover{
   background: transparent;
   color: #000;
}
button.button-green{
   color: #000;
   background:#B4E907;
}
button.button-green:hover{
   background: transparent;
   color: #000;
}
a{
   color: #000;
   text-decoration: underline;
   transition: all 0.2s ease 0s;
   font-size: 17.5px;
   font-weight: 400;
}
a:hover{
   color: #B4E907;
}

/*-------------------HEADER----------------------*/

.header {
   background-color: #F0F0F0;
   position: sticky;
   top: 0;
   z-index: 11;
}
.header__container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 15px;
   position: relative;
}
.bottom-line{
   width: 100%;
   height: 2px;
   border-radius: 50px;
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #000;
}

/*---LOGO---*/

.header__logo {
}
.header__logo-a{
   display: flex;
   gap: 5px;
   text-decoration: none;
}
.header__logo-a:hover{
   color: #000;
}
.header__logo-img {
}
.header__logo-text {
   font-weight: 700;
}

/*---NAVIGATION---*/

.header__navigation {
   display: flex;
   align-items: center;
}
.header__navigation-ul {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
}
.header__navigation-li {
   position: relative;
}
.header__navigation-a {
   transition: all 0.2s ease 0s;
   text-decoration: none;
   display: flex;
   gap: 5px;
   cursor: pointer;
}
.header__navigation-a img{
   transition: all 0.2s ease 0s;
}

/*---DROP-MENU---*/

.navigation-ul__dropmenu {
   position: absolute;
   z-index: 1;
   left: -25%;
   width: 150%;
   background-color: #102B26;
   opacity: 0;
   pointer-events: none;
   transition: all 0.2s ease 0s;
}

.top-padding{
   height: 10px;
   background-color: #F0F0F0;
}

.navigation-li__dropmenu {
   display: flex;
   flex-direction: column;
}

.navigation-a__dropmenu {
   color: #fff;
   padding: 15px 0px;
}
.navigation-a__dropmenu div{
   margin: 0 auto;
}

.header__navigation-li:hover .navigation-ul__dropmenu {
   opacity: 1;
   pointer-events: all;
}
.header__navigation-li:hover .header__navigation-a img {
   transform: rotate(180deg);
}

/*---OPTIONS---*/

.header__options {
}
.header__options-ul {
   display: flex;
   align-items: center;
   gap: 20px;
}
.header__options-li {
   position: relative;
}
.header__options-input{
   position: absolute;
   top: 4px;
   right: 27px;
   background-color: transparent;
   outline: 1px solid #000;
   background-color: #F0F0F0;
   border-radius: 50px;
   font-weight: 500;
   font-size: 17.5px;
   padding: 2px 15px;
   transition: all 0.3s ease 0s;
   opacity: 0;
   pointer-events: none;
}
.header__options-input:focus{
   box-shadow: 0 0 10px #000;
}
@media (max-width:510px) {
   .header__options-input{
      width: 100px;
   }
}
.search-open{
   opacity: 1;
   pointer-events: all;
}
.user-shopping {
   width: 14px;
   height: 14px;
   background-color: #B4E907;
   position: absolute;
   top: 4px;
   left: -6px;
   border-radius: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.user-shopping__text {
   font-size: 10px;
   font-weight: 700;
}

/*------------------HAT-BURGER-------------------*/
.header__navigation-ul.active {
	top: 0;
}
.hamburger {
	display: none;
	width: 22px;
	height: 16px;
	position: relative;
	z-index: 5;
	cursor: pointer;
}
.hamburger span {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: #000;
   border: 1.6px solid #000;
	border-radius: 15px;
	transition: all 0.2s ease 0s;
}
.hamburger span:first-child {
	top: 0;
}
.hamburger span:last-child {
	top: auto;
	bottom: 0;
}
.hamburger.active{
   margin-right: 10px;
}
.hamburger.active span {
   background-color: #fff;
   border: 1.6px solid #fff;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.hamburger.active span:first-child {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: calc(50% - 1px);
}
.hamburger.active span:last-child {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	bottom: calc(50% - 1px);
}
@media (max-width: 760px) {
	.hamburger {
		display: block;
	}
	.header__navigation-ul {
		position: absolute;
		top: -400px;
      width: 100%;
		right: 0;
		border-radius: 0px 0px 20px 20px;
      background-color: #000;
		transition: all 0.2s;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
      gap: 0;
		z-index: 3;
	}
   .header__navigation-li{
      width: 100%;
   }
   .header__navigation-a{
      color: #fff;
      width: 100%;
      padding: 20px 0px;
      gap: 0px;
   }
   .header__navigation-a img{
      display: none;
   }
   .header__navigation-a div{
      margin: 0 auto;
   }
   .navigation-ul__dropmenu{
      left: 0;
      top:  100%;
      width: 100%;
   }
   .navigation-li__dropmenu{
      background-color: #fff;
   }
   .navigation-a__dropmenu{
      color: #000;
      padding: 10px 10px;
   }
   .top-padding{
      display: none;
   }
}

/*-------------------FOOTER----------------------*/

.footer {
   background-color: #102B26;
   color: #fff;
   padding: 50px 0px 28px 0px;
}
.footer__continer {
   display: grid;
   grid-template: auto 1fr / 411px 1fr;
   grid-template-areas: 'main menu' 'lent lent';
}

/*---------MAIN-----------*/

.footer__main {
   max-width: 411px;
   grid-area: main;
}
.footer__main-logo {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 30px;
}
.footer-logo__img {
}
.footer-logo__text {
   font-size: 48.681px;
   font-weight: 600;
}
.footer__main-secondtext {
   font-size: 21px;
   font-weight: 500;
   margin-bottom: 20px;
}
.footer__main-input {
   display: inline;
   position: relative;
}
.footer__main-input input{
   padding: 15px 10px;
   font-size: 17.5px;
   background-color: transparent;
   border-radius: 10px;
   outline: 1px solid #B3B3B3;
   transition: all 0.3s ease 0s;
   width: 100%;
   margin-bottom: 20px;
}
.footer__main-input input:focus{
   outline: 2px solid #B3B3B3;
   box-shadow: 0 0 10px #b3b3b3;
}
.footer-input__search {
   background-color: #fff;
   display: block;
   width: 23px;
   height: 23px;
   outline: 1px solid #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50px;
   position: absolute;
   right: 10px;
   top: 0;
}
.footer-input__search:hover{
   background-color: transparent;
}
.footer-input__search img:last-child{
   display: none;
}
.footer-input__search:hover img:last-child{
   display: block;
}
.footer-input__search:hover img:first-child{
   display: none;
}
.footer__main-messangers {
   display: flex;
   gap: 20px;
}
.footer-messagers__link:hover{
   filter: drop-shadow(0px 0px 10px #fff);
}

/*---------MENU-----------*/

.footer__menu {
   display: flex;
   gap: 106px;
   justify-content: end;
   grid-area: menu;
   margin-left: 50px;
}
.footer__column {
   display: flex;
   flex-direction: column;
}
.footer__column-text {
   color: rgba(255, 255, 255, 0.60);
   margin-top: 10px;
   text-decoration: none;
}
.footer__column-name {
   font-size: 21px;
   color: #fff;
}
@media (max-width:950px) {
   .footer__menu {
      gap: 50px;
   }
}

/*---------LENT-----------*/

.footer__lent{
   margin-top: 60px;
   grid-area: lent;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.footer__lent-rights {
   font-size: 14px;
}
.footer__lent-pay {
   display: flex;
   gap: 10px;
}
.footer-pay__item:hover {
   filter: drop-shadow(0px 0px 10px #fff);
}

@media (max-width:820px) {
   .footer__continer {
      grid-template: auto 1fr / 1fr;
      grid-template-areas: 'main' 'menu' 'lent';
   }
   .footer__menu {
      margin: 50px auto 0px auto;
   }
   .footer__main{
      max-width: 100%;
   }
   .footer__column {
      text-align: center;
   }
}
@media (max-width:450px) {
   .footer__lent-pay {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
   }
}
@media (max-width:375px) {
   .footer__menu {
      flex-direction: column;
   }
}