* {
  margin: 0;
  padding: 0;
}
html, body {
    margin: 0;
    width:100%;
    height: 100%;
    background-color: #000000;
}
#animLogo{
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 animation: fade-in 2s,fill 0.5s ease forwards 0.2s, fade-out 0.5s ease forwards 3s;
}
/*#animLogo path:nth-child(1){*/
/* stroke-dasharray: 30px;*/
/* animation: line-anim 2s ease forwards; */
/*}*/
/*#animLogo path:nth-child(2){*/
/* stroke-dasharray: 30px;*/
/* animation: line-anim 5s ease forwards; */
/*}*/

@keyframes line-anim {
 to{
  stroke-dashoffset: 0;
 }
}


@keyframes fade-in{
  from{
    opacity:0;
  }
  to{ 
    opacity:1;
 }
}

@keyframes fill{
  from{ 
    fill: transparent;
     }
  to{
    fill: #FFFFFF;
  }

}

@keyframes fade-out{
  from{
    opacity:1;
  }
to{ 
    opacity:0;
 }
}
.hidden{
    opacity:0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}
.show{
    opacity:1;
    filter: blur(0);
    transform: translateX(0);


}

.section-1{
 position:fixed;
 width: 100%;
 height: 90px;
 background-color: #000000;
 z-index: 100;
 animation: fade-in 3s;
 animation-delay: 3s;
 animation-fill-mode: both;
 z-index:20;
}

.Logo{
   /*animation: fade-in 3s;*/
   /*animation-delay: 5s;*/
   /*animation-fill-mode: both;*/
   height: 150px;
   width: 150px;
   position:absolute;
   left: 100px;
   top: -40px;
   
}
.Insta{
   width: 30px;
   position:absolute;
   right: 70px;
   /*animation: fade-in 3s;*/
   /*animation-delay: 5s;*/
   /*animation-fill-mode: both;*/
}
.Youtube{
   width: 30px;
   position:absolute;
   right: 100px;
   /*animation: fade-in 3s;*/
   /*animation-delay: 5s;*/
   /*animation-fill-mode: both;*/
}
.Basket{
   width: 30px;
   position:absolute;
   right: 130px;
   /*animation: fade-in 3s;*/
   /*animation-delay: 5s;*/
   /*animation-fill-mode: both;*/

}


.topnav {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 80px;
  text-align: center;
  animation: fade-in 3s;
  animation-delay: 3s;
  animation-fill-mode: both;
  z-index:20;
  background-color: #FFFFFF;

}
.topnav ul {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-left: 5%;
}

.topnav ul li{
 float:left;

}

.topnav ul li a {
  color: #000000;
  text-align: center;
  float:left;
  display: block; 
  padding: 12px 40px;
  font-weight: 525;
  text-decoration: none;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  transition: all .3s linear;

}
.topnav ul li  a:hover{
  color: #FFD700;
  transition: all .3s linear; 
}
.topnav ul li ul {
  background-color: #FFFFFF;
  display: none;  
  position: absolute;
  margin-left:-0.25%;
  top:35px;
}
.topnav ul li ul li {
  float:none;
}
.topnav ul li:hover > ul{
  display: block;
}
.covervid{
  position:fixed;
  width: 100%;
  height: 100vh;
  animation: fade-in 3s;
  animation-delay: 3s;
  animation-fill-mode: both;
}
.covermob{
  visibility:hidden;
  position:fixed;
  width: 100%;
  height: 100%;
  animation: fade-in 3s;
  animation-delay: 3s;
  animation-fill-mode: both;
}

.outside{
 width: 100%;
 height: 1700px;
 /* background-color: #333333; */
 background-color:rgba(0,0,0,0.5);
 position: relative;
 top: 1200px;
 display: flex;
 justify-content: center;
 z-index: 1;
 animation: fade-in 3s;
 animation-delay: 3s;
 animation-fill-mode: both;
}
.blog{
 width: 55%;
 height: 1700px;
 /* background-color:#282828; */
 background-color:rgba(0,0,0,0);
 position:relative;
 z-index: 1;
 animation: fade-in 3s;
 animation-delay: 3s;
 animation-fill-mode: both;
 justify-content: center;

}
.normal{ 
   min-width: 100%;
  min-height: 100vh;

}  
.mob{
 width: 100%;
  min-height: 100vh;

}
.Banner{
  width: 98%;
  height: 375px;
  position:absolute;
  z-index:1;
  top: 10px;
  left: 7px;
  animation: fade-in 3s;
  animation-delay: 6s;
  animation-fill-mode: both;
}
.slider{
   animation: fade-in 3s;
   animation-delay: 6s;
   animation-fill-mode: both;
   position: absolute;
   width: 98%;
   height:375px;
   left:7px;
   top:10px; 
   border-radius: 5px;
   background-color:#FFFFFF;
   overflow:hidden;
}
.slides{
  width:500%;
  height:100%;
  display:flex;  
}
.slides input{
   display:none;
}
.slide{
  width:20%;
  transition:2s;
}
.slide img{
  width: 100%;
  height:100%;
}
.slide iframe{
  width:100%;
  height:100%;
}
.navigation-manual{
  position: absolute;
  width: 100%;
  margin-top: -40px;
  display:flex;
  justify-content: center;
}

.manual-btn{
  border: 2px solid #F8F8FF;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.7s;
}
.manual-btn:not(:last-child){
  margin-right: 40px;
}
.manual-btn:hover{
  background:#F8F8FF;
}
#radio1:checked~ .first{
  margin-left:0%;
}
#radio2:checked~ .first{
  margin-left:-20%;
}
#radio3:checked~ .first{
  margin-left:-40%;
}
#radio4:checked~ .first{
  margin-left:-60%;
}

.navigation-auto{
  position: absolute;
  display: flex;
  width:100%;
  justify-content:center;
  margin-top:335px;
}

.navigation-auto div{
  border: 2px solid #F8F8FF;
  padding: 5px;
  border-radius: 10px;
  transition: 0.7s;
}
.navigation-auto div:not(:last-child){
  margin-right: 40px;
}
#radio1:checked~ .navigation-auto .auto-btn1{
  background:#F8F8FF;
}
#radio2:checked~ .navigation-auto .auto-btn2{
  background:#F8F8FF;
}
#radio3:checked~ .navigation-auto .auto-btn3{
  background:#F8F8FF;
}
#radio4:checked~ .navigation-auto .auto-btn4{
  background:#F8F8FF;
}
.menu-button{
 position: fixed;
 top:20px;
 left:30px;
 justify-content: center;
 align-items: center;
 width: 50px;
 height:50px;
 display: flex;
 visibility: hidden;
 cursor: pointer;
 animation: fade-in 3s;
 animation-fill-mode: both;
 z-index:4;
}
.menu-button_burger{
  width:30px;
  height:4px;
  background: #FFFFFF;
  border-radius:3px;
  transition: all .5s ease-in-out;
  z-index: 5;
}
.menu-button_burger::before,
.menu-button_burger::after{
  position: absolute;
  content:'';
  width:30px;
  height:4px;
  background: #FFFFFF;
  border-radius:3px;
  transition: all .5s ease-in-out;
  z-index: 5;
}
.menu-button_burger::before{
 transform: translateY(-12px);
}
.menu-button_burger::after{
 transform: translateY(12px);
}

.menu-button.open .menu-button_burger{
  transform: translateX(-50px);
  background: transparent;
}
.menu-button.open .menu-button_burger::before{
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-button.open .menu-button_burger::after{
  transform: rotate(-45deg) translate(35px, 35px);
}
.menu-button.open .menu{
  visibility: visible;
}
.menu-button.open .menu > div{
 opacity: 1;
 transition: opacity 0.8s ease;
}
.menu-button.open .menu > div > div{
 opacity: 1;
 transition: opacity 0.8s ease;
}

.menu-button .menu{
  position: fixed;
  top:0;
  left:-40px;
  width:50%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  transition: visibility 1s ease;
  z-index: 3;
}

.menu-button .menu > div{
 background:#000000;
 width:100%;
 height:200vh;
 display: flex;
 flex:none;
 align-items:center;
 justify-content:center;
 opacity:0;
 transition: opacity 1s ease;
 z-index: 3;
}
.menu-button .menu > div > div{
 text-align:center;
 max-width:100%;
 max-height:100vh;
 opacity:0;
 transition: opacity 1s ease;
}


.menu-button .menu > div > div > ul > li{
  list-style: none;
  color: #FFFFFF;
  font-size:1.15rem;
  padding:1.5rem;
}
.menu-button .menu > div > div > ul > li > a{
  color: #FFFFFF;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  transition: color 0.4s ease;
}
.menu-button .menu > div > div > ul > li > a:hover{
  color: #FFD700;
  transition: all .3s linear; 
}
.menu-button .menu > div > div > ul > li > ul > li{
   display: none;
   list-style: none;
  color: #FFFFFF;
  font-size:0.75rem;
  padding: 1rem;

}
.menu-button .menu > div > div > ul > li > ul > li > a{
  color: #FFFFFF;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  transition: color 0.4s ease;
}
.btn{
 background-color: #000000;
 color: #FFFFFF;
}
.list1{
  display: none;
}
.show{
  display: block;  
}
h1{
  position:relative;
  top: 390px;
  left: 15px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
.fixr{
   position: relative;
  top: 440px;
  margin: 10px;
  width: 96%;
  height: 250px;
  color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    animation: fade-in 3s;
    animation-delay: 3s;
    animation-fill-mode: both;
}
button{
  position: relative;
  top: 440px;
  margin:0px 15px 20px;
  width: 96%;
  height: 250px;
  text-align: left;
  border-radius: 5px;
  border: none;
  box-shadow:10px 10px 10px rgba(0,0,0,0.4);
  background-color: #333333;

}
.box{
  position: relative;
  top: 345px;
  left: 10px;
  margin-bottom: 20px;
  width: 98%;
  height: 250px;
  border-radius: 5px;
  background-color: #333333;
}
.box:hover{
 background-color: #1a1616;
}

.wn1{
  position:relative;
  top: 490px;
  left: 10px;
  width: 98%;
  height: 250px;
  border-radius: 5px;
  background-color: #333333;
}
.wn1:hover{
 background-color: #1a1616;
}
.wn2{
  position: absolute;
  top: 760px;
  left: 10px;
  width: 98%;
  height: 250px;
  border-radius: 5px;
  background-color: #333333;
}
.wn2:hover{
 background-color: #1a1616;
}
.wn3{
  position: absolute;
  top: 1030px;
  left: 10px;
  width: 98%;
  height: 250px;
  border-radius: 5px;
  background-color: #333333;
}
.wn3:hover{
 background-color: #1a1616;
}
.wn4{
  position: absolute;
  top: 1300px;
  left: 10px;
  width: 98%;
  height: 250px;
  border-radius: 5px;
  background-color: #333333;
}
.wn4:hover{
 background-color: #1a1616;
}

h2{
  position:absolute; 
  left: 200px;
  top: 20px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
.flyer{
 position: absolute;
 left: 20px;
 top: 10px;
 width: 150px;
 height: 230px;
 box-shadow:10px 10px 10px rgba(0,0,0,0.4);
}
button p{
  position:absolute;
  top: 50px;
  left: 200px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
p{ 
  position:absolute;
  top: 50px;
  left: 200px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;

}
.modal-container{
  position: fixed;
  transform: translate(-50%, -50%);
  top:50%;
  left:50%;
  float:left;
  display:flex;
  justify-content: center; 
  opacity: 0;
  pointer-events: none;
  align-items: center;
  height: 100%;
  width: 100vw;
  background-color:rgba(0,0,0,0.7);
  z-index:22;
}
.modal-container.show{
  animation: fade-in 1s;
  animation-fill-mode: both;
  pointer-events: auto;
  opacity: 1;
}
.modal-container.unshow{
  animation: fade-out 1s;
  animation-fill-mode: both;
  opacity: 0;
}
.nextModal.show{
  animation: fade-in 1s;
  animation-fill-mode: both;
  pointer-events: auto;
  opacity:1;
}
.nextModal.unshow{
  animation: fade-in 1s;
  animation-fill-mode: both;
  pointer-events: auto;
  opacity:0;
}
.nextModal{
  opacity:0;
  position: fixed;
  top: 20%;
  background-color:#333333;
  width: 450px;
  height:500px;
}
.next{
     position: absolute;
   top:150px;
   left: 70px;
   font-family: Arial, Helvetica, sans-serif;
  font-size:17.5px;
  cursor: pointer;
   width: 100px;
   height:30px;
   color: #FFFFFF;
   background-color: #000000;
     border: 1px solid white;
}

.modal{
  position: fixed;
  top: 20%;
  background-color:#333333;
  width: 450px;
  height:500px;
}
.modal h2{
  posiiton:relative;
  transform: translate(-50%, -50%);
  left: 50%;
  font-size: 15px;
}
.modal img{
 position: relative;
 top:40px;
}
.modal ul{
  position:relative;
  left:200px;
  top: -140px;
  list-style-type: none;
}
.modal li{
    font-size: 11px;
    color: #FFFFFF;
    margin-bottom: 10px;

}
.form{
  position: absolute;
  top: 300px;
  left: 40px;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
.form label, select {
    display: block;
}
.form label{
  position: relative;
  top:10px;
  left: 50px;
  color: #FFFFFF;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 20px;
}

.form select{
 position: relative;
 top: -35px;
 left: 150px;
 font-family: Arial, Helvetica, sans-serif;
  font-size:17.5px;
  cursor: pointer;
 width: 200px;
  height:30px;
   color: #FFFFFF;
   background-color: #000000;
     border: 1px solid white;

}

.form input[type=text]{
 display:none;
    visibility: hidden;
}
.form input[type=submit] {
   position: relative;
   left: 70px;
   font-family: Arial, Helvetica, sans-serif;
  font-size:17.5px;
  cursor: pointer;
   width: 200px;
   height:30px;
   color: #FFFFFF;
   background-color: #000000;
     border: 1px solid white;
}
.nextModal input[type=submit] {
   position: relative;
   top: 430px;
   left: 70px;
   font-family: Arial, Helvetica, sans-serif;
  font-size:17.5px;
  cursor: pointer;
   width: 200px;
   height:30px;
   color: #FFFFFF;
   background-color: #000000;
     border: 1px solid white;
}
.X{
  position: absolute;
  top: 10px;
  left: 420px;
  width:5px;
  height: 5px;
  color: #FFFFFF;
}

.nextModal button{
  position: absolute;
  top: 10px;
  left: 420px;
  width:5px;
  height: 5px;
  color: #FFFFFF;
}

.notification{
 position: fixed;
 bottom: 0px;
 width:100vw;
 height:50px;
 background-color: #FFFFFF;
 z-index:1;
}
.notification pre{
   position: absolute;
  top: -15px;
  font-weight:bold;
  color:#000000;
   font-family: Arial, Helvetica, sans-serif;
}
.notification p{
  position: absolute;
  top: 10px;
  left:5px;
  color:#000000;

  font-family: Arial, Helvetica, sans-serif;
}
.circle{
  position: fixed;
  top: 2.5px;
   right: 150px;
  height:15px;
  width:15px;
  border-radius: 50%;
   border: 2px solid white;

 background-color: #FFFFFF;
 z-index:21;

  
}
.circle pre{
 position:absolute;
 top:-8px;
 left: 4px;
 font-size:10px;
 font-weight: bold;
}

@media only screen and (max-width: 1024px) {

.topnav{
  display: none;
}
.Logo{
 left:320px;
}
.menu-button{
 visibility:visible;
}
.Insta{
   width: 30px;
   position:absolute;
   right: 10px;
   top:20px;
}
.Youtube{
   width: 30px;
   position:absolute;
   right: 40px;
   top:20px;  
}
.Basket{
   width: 30px;
   position:absolute;
   right: 70px;
   top:20px;
}
.outside{
  height:1800px;
}
.blog{
 width: 100%;
 left: 0px;
 top: -10px;
 height: 1800px;
}

.slider{
   width: 98%;
   height:350px;
   left:10px;
   top:10px;
}
.slides{
  width:500%;
  height:100%;
}
.slide img{
  width:100%;
  height:100%;
}
.slide iframe{
  width:100%;
  height:100%;
}
.navigation-manual{
  width: 100%;
}


h1{
  top: 370px;
  left: 20px;
  font-size: 30px;

}
.fixr{
    top: 410px;
    height: 270px;
}
button{
 top: 410px;
 height: 270px;
}

button .flyer{
 position: absolute;
 height: 200px;
 top: 50px;
 left: 20px;
 
}

.box{
  top: 410px;
  left: 10px;
  width: 98%;
  height: 300px;
}
.wn1{
  top: 410px;
  left: 10px;
  width: 98%;
  height: 300px;
}
.wn2{
  top: 740px;
  left: 10px;
  width: 98%;
  height: 300px;
}
.wn3{
  top: 1070px;
  left: 10px;
  width: 98%;
  height: 300px;
}
.wn4{
  top: 1400px;
  left: 10px;
  width: 98%;
  height: 300px;
}
h2{
  position:absolute;
  top:10px;
  left: 20px;
}
.flyer{
 position: absolute;
 top: 70px;
 left: 10px;
 
}
p{ 
  position:absolute;
  top: 60px;
  left: 200px;

}

}

@media only screen and (max-width: 736px) {

.topnav{
  display: none;
}
.covervid{
  display: none;
}
.covermob{
 visibility:visible;

}
.menu-button{
 visibility:visible;
}
.menu-button .menu{
 width:75%;
}
.Logo{
  top: -30px;
  left:130px;
}
.Insta{
   width: 30px;
   position:absolute;
   top:20px;
   right: 10px;
}
.Youtube{
   width: 30px;
   position:absolute;
   top:20px;
   right: 40px;
}
.Basket{
   width: 30px;
   position:absolute;
   top:20px;
   right: 70px;
}
.outside{
 height: 2000px;
}
.blog{
 width: 100%;
 height: 2000px;
}
h1{
  top: 350px;
  left: 10px;
  font-size: 20px;

}

.slider{
   width: 97%;
   height:330px;
   left:5px;
   top:10px;
}
slides{
  width:500%;
  height:330px;
}
.slide img{
  width:100%;
  height:330px;
}
.slide iframe{
  width:100%;
  height:330px;
}
.navigation-manual{
  width: 100%;
}

button h2{
  top: 20px;

}
.fixr{
    positon:absolute;
    top: 390px;
    width: 93%;
    height: 450px;
}
button{
  positon:absolute;
   top: 390px;
  width: 93%;
  height: 450px;
  display: flex;
  justify-content:center;
}
button .flyer{
 position: absolute;
 top: 50px;
 left: 100px;
 height:200px;
}


button p{
 position: relative;
 font-size:11px;
 top: 130px;
 left:20px;
 width: 90%;
}

.box{
  top: 390px;
  left: 5px;
  width: 97%;
  height: 300px;
}
.wn1{
  top: 390px;
  left: 5px;
  width: 97%;
  height: 300px;
}
.wn2{
  top: 720px;
  left: 5px;
  width: 97%;
  height: 300px;
}
.wn3{
  top: 1050px;
  left: 5px;
  width: 97%;
  height: 300px;
}
.wn4{
  top: 1380px;
  left: 5px;
  width: 97%;
  height: 300px;
}
h2{
  position:absolute;
  left: 80px;
  top: 10px;
  font-size:17px;
}
.flyer{
 position: absolute;
 top: 40px;
 left: 50px;
}
p{
  position:absolute;
  top: 60px;
  left: 170px;
  font-size: 11px;
}

.X{
    left:390px;
}
.modal h2{
 top:20px;
}
.modal ul{
    left: 210px;
}
.modal li{
    font-size: 9px;
}
.modal p{ 
 top: 150px;
 left:300px;
}
.modal button{
 transform: translate(50%, 50%);
}

}

@media only screen and (max-width: 375px) {

.topnav{
  display: none;
}
.menu-button{
 visibility:visible;
}

.menu-button .menu{
  width:75%;
}
.Logo{
  top: -35px;
  left: 110px;
}
.Insta{
   width: 30px;
   position:absolute;
   right: 10px;
}
.Youtube{
   width: 30px;
   position:absolute;
   right: 40px;
}
.Basket{
   width: 30px;
   position:absolute;
   right: 70px;
}
.blog{
 width: 100%;
 left: 0px;
 top: -10px;
 height: 2000px;
}
h1{
  left: 30px;
}
.slider{
   width: 95%;
   height:300px;
   left:10px;
   top:10px; 
}
.slides{
  width:500%;
  height:300px;
}
.slide img{
  width:100%;
  height:300px;
}
.slide iframe{
  width:100%;
  height:300px;
}
.navigation-manual{
  width: 100%;
}

h1{
  top: 320px;
  left: 10px;
  font-size: 20px;

}
.fixr{
    positon:absolute;
    top: 390px;
    width: 93%;
    height: 450px;
}
button{
    top: 380px;
  left: 10px;
  width: 95%;
  height: 600px;
}
.box{
  top: 380px;
  left: 10px;
  width: 95%;
  height: 600px;
}

.wn1{
  top: 380px;
  left: 10px;
  width: 95%;
  height: 600px;
}
.wn2{
  top: 1000px;
  left: 10px;
  width: 95%;
  height: 600px;
}
.wn3{
  top: 1630px;
  left: 10px;
  width: 95%;
  height: 600px;
}
.wn4{
  top: 2260px;
  left: 10px;
  width: 95%;
  height: 600px;
}
h2{
  position:absolute;
  top: 5px;
  left: 10px;
  font-size:17px;
}
.flyer{
 position: absolute;
 top: 60px;
 left: 25%;
}
p{ 
  position:absolute;
  top: 270px;
  left: 150px;
  font-size: 10px;
}
.modal h2{
 top:20px;
}
.modal p{
  left:50%;

}
.modal button{
  position:relative;
  transform: translate(-50%, -50%);
}

}