.box {
  background: red;
  padding: 20px;
  color: white;
  float: left;
  text-transform: uppercase;
}

.animate {-webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

.one {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;animation-delay: 0.2s;}
.two {-webkit-animation-delay: 1.0s;-moz-animation-delay: 1.0s;animation-delay: 1.0s;}
.three {-webkit-animation-delay: 2.5s;-moz-animation-delay: 2.5s;animation-delay: 2.5s;}
.four {-webkit-animation-delay: 3.0s;-moz-animation-delay: 3.0s;animation-delay: 3.0s;}
.five {-webkit-animation-delay: 3.3s;-moz-animation-delay: 3.3s;animation-delay: 3.3s;}
.six {-webkit-animation-delay: 3.6s;-moz-animation-delay: 3.6s;animation-delay: 3.6s;}

.s1 {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;animation-delay: 0.2s;}
.s2 {-webkit-animation-delay: 0.7s;-moz-animation-delay: 0.7s;animation-delay: 0.7s;}
.s3 {-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;animation-delay: 1.2s;}
.s4 {-webkit-animation-delay: 1.7s;-moz-animation-delay: 1.7s;animation-delay: 1.7s;}
.s5 {-webkit-animation-delay: 2.2s;-moz-animation-delay: 2.2s;animation-delay: 2.2s;}
.s6 {-webkit-animation-delay: 2.7s;-moz-animation-delay: 2.7s;animation-delay: 2.7s;}


@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1; }}
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn;}

@-webkit-keyframes fadeInDown {from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
 @keyframes fadeInDown {from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;}

@-webkit-keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
@keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;}

@-webkit-keyframes fadeInLeft {from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
 @keyframes fadeInLeft {from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
 to {opacity: 1; -webkit-transform: none;transform: none;}}
.fadeInLeft {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;}

@-webkit-keyframes fadeInRight {from {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
 @keyframes fadeInRight {from {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
 to {opacity: 1;-webkit-transform: none;transform: none;}}
.fadeInRight {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;}

@font-face {
  font-family: "Copperplate Gothic Bold";
  src: url("../fonts/copperplate-gothic-bold.eot");
  src: url("../fonts/copperplate-gothic-bold?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/copperplate-gothic-bold.otf") format("opentype"), /* Open Type Font */ url("../fonts/copperplate-gothic-bold.svg") format("svg"), /* Legacy iOS */ url("../fonts/copperplate-gothic-bold.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/copperplate-gothic-bold.woff") format("woff"), /* Modern Browsers */ url("../fonts/copperplate-gothic-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
.font-jet {
  font-family: "copperplate-gothic-bold";
}

@font-face {
  font-family: 'Benguiat Rus';
  src: url('fonts/benguiat_rus.eot');
  src: url('fonts/benguiat_rus.eot?#iefix') format('embedded-opentype'), /* IE < 9 */ url('fonts/benguiat_rus.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/benguiat_rus.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */ url('fonts/benguiat_rus.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/benguiat_rus.svg#benguiat_rus') format('svg');
}
.font-class {
  font-family: "Benguiat Rus";
}

.video-bg {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.effects {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}

.video-bgcontent {
  z-index: 2;
}
.video-fon {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.video-fon video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}