* {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 0; margin: 0;}
body { padding: 0; margin: 0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family: Montserrat-ExtraBold, sans-serif;background: #19398a;color: #fff}
img { max-width: 100%; }
.main__container {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;min-height: 100%;position: relative;overflow: hidden;margin: 0}
.main_up {position: relative; max-width:100%; overflow: hidden;}
.blue-left-first { z-index: -1; position: absolute;top: -50px;left: -410px;-webkit-animation: bl-bot 10s ease-in-out infinite;animation: bl-bot 10s ease-in-out infinite;-webkit-transform-origin: 0 50%;transform-origin: 0 50%}
.blue-left-second {z-index: -1; position: absolute;top: 0;width: 400px;left: -50px;-webkit-animation: bl-up 6s ease-in-out infinite;animation: bl-up 6s ease-in-out infinite;-webkit-transform-origin: 0 100%;transform-origin: 0 100%}
.blue-right-first {z-index: -1; position: absolute;top: -50px;right: -410px;-webkit-animation: bl-botr 10s ease-in-out infinite;animation: bl-botr 10s ease-in-out infinite;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%}
.blue-right-second {z-index: -1; position: absolute;top: 0;width: 400px;right: -50px;-webkit-animation: bl-upr 6s ease-in-out infinite;animation: bl-upr 6s ease-in-out infinite;-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%}

@media screen and (max-width:800px) {
  .blue-left-first {left: -650px;}
  .blue-right-first {right: -650px;}
  .logo { max-width:80%; }
  .title { padding:0 10px;}
  .title h1 { font-size:60px !important; }
  .title h2 { font-size: 35px !important; }
  .id-link img { max-width:60%; }
  .content_area_bottm img { max-width:75%;  }
}

.container {max-width:100%;} 

.content_area { max-width:800px; margin: auto; text-align: center; padding-top:20px; background: url(./images/stadium.webp) 100% center no-repeat; } 
.title h1{ font-size:80px; margin-top:20px;color: #fcd005; font-weight:800; }
.title h2{ font-size: 58px;   color: #fff; font-weight:800; }
.id-link { margin: 20px 0; display: block; }

.content_area_bottm { max-width:800px; margin: auto; text-align: center; } 
.content_area_bottm img { margin-top:30px; } 

.footer { max-width:100%; text-align: center; background: url(./images/footer_bg.webp) bottom repeat-x; padding:30px 0; margin-top:50px; } 
.footer img { max-width:90%; } 

@-webkit-keyframes bl-botr {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  30% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}
  70% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}}

@keyframes bl-botr {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  30% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}
  70% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}}

@-webkit-keyframes bl-bot {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  30% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}
  70% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}}

@keyframes bl-bot {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  30% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}
  70% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}}

@-webkit-keyframes bl-up {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  50% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}}

@keyframes bl-up {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  50% {-webkit-transform: rotate(10deg);transform: rotate(10deg)}}

@-webkit-keyframes bl-upr {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  50% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}}

@keyframes bl-upr {0%,
  100% {-webkit-transform: rotate(0);transform: rotate(0)}
  50% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg)}}

@-webkit-keyframes btn-anim {0% {opacity: 0;-webkit-transform: skewX(-45deg) translateX(-10em);transform: skewX(-45deg) translateX(-10em)}
  32%,
  70% {opacity: 0}
  50% {opacity: 1}
  to {opacity: 0;-webkit-transform: skewX(-45deg) translateX(25.5em);transform: skewX(-45deg) translateX(25.5em)}}

@keyframes btn-anim {0% {opacity: 0;-webkit-transform: skewX(-45deg) translateX(-10em);transform: skewX(-45deg) translateX(-10em)}
  32%,
  70% {opacity: 0}
  50% {opacity: 1}
  to {opacity: 0;-webkit-transform: skewX(-45deg) translateX(25.5em);transform: skewX(-45deg) translateX(25.5em)}}

@-webkit-keyframes logo-on {0% {opacity: 0;-webkit-transform: scaleX(-1);transform: scaleX(-1)}
  100% {opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1)}}

@keyframes logo-on {0% {opacity: 0;-webkit-transform: scaleX(-1);transform: scaleX(-1)}
  100% {opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1)}}

@-webkit-keyframes logo-out {0% {opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1)}
  100% {opacity: 0;-webkit-transform: scaleX(-1);transform: scaleX(-1)}}

@keyframes logo-out {0% {opacity: 1;-webkit-transform: scaleX(1);transform: scaleX(1)}
  100% {opacity: 0;-webkit-transform: scaleX(-1);transform: scaleX(-1)}}

@-webkit-keyframes title-on {0% {opacity: 0}
  100% {opacity: 1}}

@keyframes title-on {0% {opacity: 0}
  100% {opacity: 1}}