/* Menu */
:root { --menu-bg: #1d1d1f; --menu-color: #fff;}

.header{ background-color: #343a40; position: sticky; top:0;  left:0; z-index: 9999; width: 100%; padding: 10px 15px; transition: background-color 0.3s ease;}
.header__content{width: 100%;margin: 0 auto; display: flex;justify-content: space-between; }

.header__logo,
.header__quick{display: flex; align-items: flex-start; margin-right: 35px; text-decoration: none; }

.header__menu{padding: 3px;margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color:var(--menu-color);display: block;padding: 16px;font-size: 20px; text-decoration: none;}

#logo{
    width: 45px;
}
#logo1{
    width: 45px;
   padding-top: 15px;
}

.header__quick a{text-decoration: none; color: #fff; padding-top: 17px; font-size: 20px;}

/* ! Cover */
.cover{ 
  text-align: center; padding:10px; margin:0px; min-height:600px; width:100%; 
  display:flex; flex-direction:column; justify-content:center; 
  background-position: center center; background-size:cover;
}
.cover * {color:#fff}

#section {
  padding-top: 5px;
  width: 100%;
  text-align: center;
}
.videoEdo {
  width: 100%;
  height: 600px;
}
#article {
  text-align: center;
  float: left;
  overflow: hidden;
}


#video{
 width: 70%;
 margin: 0 auto;
 text-align: center;

}


/* ! Grid System */
.grid {margin: 0 auto;max-width: 1250px; display: flex; flex-flow:row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 10px;}
.grid .grid [class*='col-'] {padding: 0px;}

.bg-dark{background-color: #000;padding: 0; margin: 0;width: 100%;} 

.col-20{ width: 20%; }
.col-29{ width: 29%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%;}
.col-40{ width: 40%; }
.col-50{ width: 50%; }
.col-60{ width: 60%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-90{ width: 90%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}





/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}


/* block-$ */
.block-effect {
  font-size: calc(8px + 6vw);
  margin-top: 0px;
}

.block-reveal {
  --t: calc(var(--td) + var(--d));

  color: transparent;
  padding: 6px;

  position: relative;
  overflow: hidden;

  animation: revealBlock 0s var(--t) forwards;
}

footer {
      text-align: center;
      padding: 20px;
      background-color: #343a40;
      color: white;
    }

.block-reveal::after {
  content: '';

  width: 0%;
  height: 100%;
  padding-bottom: 4px;

  position: absolute;
  top: 0;
  left: 0;

  background: var(--bc);
  animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;
}

/* animations */
@keyframes revealBlock {
  100% {
    color: #0f0f0f;
  }
}

@keyframes revealingIn {

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes revealingOut {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }

}

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 0%, .6);
  font-size: 16px;
}




@media (max-width: 768px) {
  .header__menu{   
    position: absolute; top:60px; left:0; background-color: transparent; width: 100%; height: 100vh;
    height: 0vh; overflow: hidden;transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .header__menu li{width: 100%;border-bottom: 1px solid #444}
  .menu-open .header__menu{height: 100vh;padding: 3%;}

  .icon-hamburger{height: 50px;width: 42px;margin-left: 20px;padding-top: 10px;}
  .icon-hamburger span{height: 3px; width: 30px;background: rgb(255, 255, 255);position: relative;display: block;margin-top: 11px;transition: all 0.2s cubic-bezier(.215, .61, .355, 1); border-radius: 100px;}

  .menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px);}
  .menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-9px);}

  .header__quick{display: flex; justify-content: flex-end; width: 50%;}

  .header__logo,
.header__quick{display: flex; align-items: flex-start; margin-right: 15px;}

#video{
 width: 100%;
 margin: 0 auto;
}
}

.scroll-down .header{background: transparent; }
.scroll-down .header__menu{transition: all 0.8 cubic-bezier(.215, .61, .355, 1); padding:  0;}
.scroll-down .header__menu li a{text-shadow: 2px -2px  black;}
.scroll-down .header__quick a{text-shadow: 2px -2px  black;}
.scroll-down .icon-hamburger{color: #000;}

.scroll-down2 .block-effect{background: transparent; }