@font-face{
  font-family: 'General Sans';
  src: url('/wp-content/fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700;
}
@font-face{
  font-family: 'General Sans';
  src: url('/wp-content/fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600;
}
@font-face{
  font-family: 'General Sans';
  src: url('/wp-content/fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('/wp-content/fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight:400;
}


@keyframes fadeInOut {
0% {
  opacity: 0;
}
20% {
  opacity: 1;
}
85% {
  opacity: 1;
}
99%{
  display:block;
}
100% {
  opacity: 0;
  display:none;
}
}
@keyframes searchBarPopIn{
  0%{
      transform: translateX(-50%) scaleX(0);
  }
  100%{
      transform: translateX(-50%) scaleX(1);
      pointer-events:all;
  }
  }
  
  
  
  @keyframes searchBarPopOut{
      0%{
          transform: translateX(-50%) scaleX(1);
      }
      100%{
          transform: translateX(-50%) scaleX(0);
          pointer-events:none;
      }
  }
@keyframes opacityIn{
  0%{
      opacity:0;
  }
  100%{
      opacity:1;
  }
  }
  
  
  @keyframes opacityOut{
  0%{
      opacity:1;
  }
  100%{
      opacity:0;
  }
  
  }

span.cartItemsNumber {
    z-index: 9;
	pointer-events:none;
}

header#header {
  height: 15vh;
}
#menuToggle span.cartItemsNumber {
  background-color: #1A1A1A;
  top: -18%;
  color: #FFF;
}
.grecaptcha-badge {
  opacity: 0;
}
html,body{
margin:0;
overflow-x:clip;
}

header h1{
margin:0;
}


/*
Burger
*/

#menuToggle {
  display: block;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  width: fit-content;
}

#menuToggle input:not(.headerSearchFunction input)
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2; 

-webkit-touch-callout: none;
}
#menuToggle span:not(.cartItemsNumber) {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #1A1A1A;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            opacity 0.55s ease;
}

#menuToggle span:first-child
{
transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  height: 90vh;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 60px;
}

#menu li
{
padding: 10px 0;
font-size: 22px;
}

#menuToggle input:checked ~ ul
{
transform: none;
}

/**/


header#header>nav {
  height: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 7%;
}

ul#menu {
display: flex;
flex-direction: column;
justify-content: space-between;
height: fit-content;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
}

.normalMenu {
display: flex;
flex-direction: column;
padding-bottom: 5em;
}

.menuLegal {
display: flex;
flex-direction: column;
}

.menuLegal a {
font-family: 'General Sans';
text-decoration: none;
color: #1A1A1A;
font-size: 0.9em;
}

.normalMenu a {
font-family: 'General Sans';
text-decoration: none;
color: #1A1A1A;
font-size: 1.4em;
margin-bottom: 0.5em;
font-weight: 600;
}

.wcNotice {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: white;
border: 3px solid #c20000;
padding: 0 2em;
border-radius: 8px;
z-index: 99;
box-shadow: 0 0 10px 2px rgba(194, 0, 0,0.6);
animation: fadeInOut 5s ease-in-out forwards;
}

.wcNotice p {
font-family: 'General Sans';
font-weight: 600;
font-size: 1.5em;
white-space: nowrap;

}

.headerLogo {
width: 24vh;
height: fit-content;
}

.headerLogo a {
display: block;
width: 100%;
height: 100%;
}

/* WOOCOMMERCE */
.headerWC a {
  display: block;
  width: 100%;
  height: 100%;
}

.headerWC>div svg {
  width: 30px;
  height: 30px;
}

.headerWC {
  display: flex
;
  flex-direction: row;
  margin-left: -6%;
  margin-bottom: 2.4em;
}

.headerWC>div {
  margin: 0 0.7em;
} 

.headerWCCart a {
  text-decoration: unset;
}

.headerWCCart {
  position: relative;
}
span.cartItemsNumber {
  font-size: 1em;
  font-family: 'Campton', 'sans-serif';
  font-weight: 800;
  background-color: #fff;
  color: #1a1a1a;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 100%;
  transform: translate(-40%,-50%);
}



.headerWCLupa {
  position: relative;
  cursor:pointer;
}



.headerSearchFunction {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 8vw;
  pointer-events: none;
}

.searchBarPopOut{
  animation:searchBarPopOut 0.25s ease-in-out forwards;
}


.searchBarPopIn{
  animation:searchBarPopIn 0.25s ease-in-out forwards;
}

.headerSearchFunction input {
  border: 2px solid #fff;
  width: 100%!important;
  font-size: 1.2em;
  padding-right: 1.4em;
  box-sizing: border-box;
}

.headerSearchFunctionImg svg {
  width: 20px!important;
  height: 20px!important;
}

.headerSearchFunctionImg {
  width: 20px!important;
  height: 20px!important;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-139%,-50%);
  cursor: pointer;
}




@media only screen and (max-width:1600px){
.wcNotice p {
  font-size: 1.1em;
}
.header{
padding: 0 3%;
}
#menu{
margin: -100px 0 0 -150px;
}
.headerLogo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.headerSearchFunction {
  width: 11vw;
}
}


@media only screen and (max-width:800px){
.wcNotice p {
  font-size: 0.8em;
  white-space: unset;
  text-align: center;
}
.headerSearchFunction {
  width: 15vw;
}
}
@media only screen and (max-width:600px){
.headerLogo {
  width: 20vh;
}
.wcNotice {
width: 70%;
}
.headerSearchFunction {
  width: 32vw;
}
}