* {
  margin: 0;
  padding: 0;
}
html, body {
    margin: 0;
    width:100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
}


@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;
}

.Logo{
   height: 150px;
   width: 150px;
   position:absolute;
   left: 100px;
   top: -40px;
   
}
.Insta{
   width: 30px;
   position:absolute;
   right: 70px;
}
.Youtube{
   width: 30px;
   position:absolute;
   right: 100px;
}
.Basket{
   width: 30px;
   position:absolute;
   right: 130px;

}


.topnav {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 80px;
  text-align: center;
  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;
}


.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: 5s;
 animation-fill-mode: both;
 justify-content: center;

}
.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;
}
.back{
    width: 100%;
    height: 100vh;
    background-color: #000000;
    background-color:rgba(0,0,0,0.5);
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 1;
}
.bigLogo{
    position: relative;
    top: 100px;
    left: 300px;
    height:300px;
    width:300px;
}
.intro {
    position: relative;
    top:150px;
    overflow: auto;
}
.mask-custom {
    backdrop-filter: blur(15px);
    background-color: rgba(255,255,255,.2);
    border-radius: 3em;
    border: 2px solid rgba(255,255,255,.1);
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}
h1{
  position:relative;
  top: 360px;
  right: 80px;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
p{
    position:relative;
    top: 450px;
    right: 240px;
    /*left: 400px;*/
    width: 500px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

.slider{
    position:relative;
    right:200px;
    z-index: -1;
    height: auto;
    width:650px;
    overflow:hidden;

}
.slides{
    width:500%;
    height:100%;
    display:flex;
}
.slides input{
    display:none;
}
.slide{
    width:20%;
    transition:2s;
}
.slide img{
    width: 100%;
    height:100%;
}
.navigation-manual{
    visibility: hidden;
    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{
    visibility: hidden;
    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;
}
@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;
}

.slider{
   position: relative;
   left: -120px;
   width:60%;
   height: 100%;
}
.bigLogo{
    position: relative;
    height: 200px;
    width: 200px;
    left: 170px;
}

h1{
    top: 300px;
    left: -60px;
   width:130px;
  font-size: 30px;

}
p{
  position:relative;
  top: 400px;
  left:-140px;
  min-width: 280px;

}

}

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

    .topnav {
        display: none;
    }

    .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;
    }

    .bigLogo {
        position: relative;
        top: 100px;
        visibility: hidden;
    }

    h1 {
        top: 180px;
        font-size: 20px;
        white-space: nowrap;

    }
    .pickNroll{
        position: fixed;
        left: 0px;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.25);
    }

    .slider {
        position: fixed;
        left: 0px;
        width: 100%;
        height: 100vh;
    }

    .slide img {
        width: 100%;
        height: 100%;
    }

    p {
        position: relative;
        top: 270px;
        left: -140px;
        height: 240px;
        font-size: 15px;
    }

}