/*---------MAGIC CARD-------------------*/

/*--------------------------------------*/



.section{
  position: relative;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.section h1{
  text-align: center;
  font-size: 6rem;
  z-index: 1;
  opacity: 0.7;
  color: #fff;
  font-family: "Cookie";
  padding: 20px;
  margin-left: 15px;
}
.video-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

}
/*------------------------------------------*/
:root {
 --scroll-var:0;
}

a {
    color: #fff!important;
    text-decoration: none;
}

a:hover
{
     color:#fff!important;
     text-decoration:none;
}

.container {
  height: 150px;
  outline: 1px solid red;
  position: relative;
  overflow:hidden;
}

.fixed {
  position: absolute;
  top:var(--scroll-var,20px);
}

.only-one{
  background-color: lightblue;
}

.only-two{
  background-color: lightgreen;
  margin-top:-150px; /*The height of the previous section*/
}

.overlay {
  position:absolute;
  width: 100%;
  height: 100%

}
.one {
  background-color: yellow;
}

.two {
  background-color: green;
}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

@media screen and (min-width: 572px){
  .product{width: 50%;}
}

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.contact{
  padding:50px 80px;
}
.bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9{
  position: relative;
  opacity: 0.75;
  background-attachment: fixed;
  background-position: 0% 30%  ;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  background-image: url("f1.jpg");
  min-height: 100%;
  opacity: 1 !important;

}

.bgimg-2 {
  background-image: url("f2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("f3.jpg");
  min-height: 400px;
}

.bgimg-4 {
  background-image: url("0.jpg");
  min-height: 400px;
}
.bgimg-5 {
  background-image: url("1.jpg");
  min-height: 400px;
}
.bgimg-6 {
  background-image: url("2.jpg");
  min-height: 400px;
}
.bgimg-7 {
  background-image: url("3.jpg");
  min-height: 400px;
}
.bgimg-8 {
  background-image: url("4.jpg");
  min-height: 400px;
}
.bgimg-8 {
  background-image: url("6.jpg");
  min-height: 400px;
}
.bgimg-9 {
  background-image: url("9.jpg");
  min-height: 400px;
}

.hist{
 color: #777;
 background-color:white;
 text-align:center;
 padding:50px 80px;
 text-align: justify;
}

.hist2{
  color: #777;
  background-color:#282E34;
  text-align:center;
  padding:0px 52px;
  text-align: justify;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9 {
    background-attachment: scroll;
  }

  .hist{
   padding:52px 0px !important;
  }
  .hist2{
    padding:0px 52px;

  }
  .mobile-hist{
    padding-left: 5px;
    padding-right: 5px;
  }
  .contact{
    padding:30px 30px!important;
  }
  .hidder{
    z-index:1000;

  }
  .caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
  }

  .caption span.border {
    background-color: #111;
    color: #fff;

    font-size: 25px;
    letter-spacing: 3px!important;
  }


}



.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 15px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

#insta {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;

}
.link-shop {
    position: fixed;
    bottom: 30px;
    z-index: 9;
    right: 30px;
  }



  @media only screen and (max-width: 512px) {
    .descript{
      color:#ddd;background-color:#282E34;
      text-align:center;
      padding:50px 50px!important;
      text-align: justify;
    }
    .descript-size{
      font-size:15px;
    }
  }
  @media only screen and (min-width: 513px) {
    .descript-size{
      font-size:20px;
    }
  .descript{
    color:#ddd;background-color:#282E34;text-align:center;padding:50px 180px!important;text-align: justify;
  }

}

  .link-social {
      position: fixed;
      top: 150px;
      z-index: 9;
      left: -1px;
      border: 1px solid #dfdfe0;
      border-radius: 3px;
    }
    .link-social a {
        display: block;
        color: #fff;
        font-size: 26px;
        text-align: center;
        padding: 7px 10px;
    }
    .link-social a .blog {
      font-size: 30px;
      line-height: 27px;
      font-weight: 700;
      font-style: normal;
  }
  .link-social a+a {
      border-top: 1px solid #dfdfe0;
  }

  .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}