:root {
    --blue: #27316e;
    --blue-2: #27419a;
    --blue-3: #3b5eab;
    --red: #bf2038;
}

html, body {width:100%; margin:0;padding:0;color:#fff; font-family: 'Montserrat', sans-serif; font-size:18px; background-color:#000;}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, table, th, td, form, fieldset, legend, textarea, input, select, textarea, button, figure, figcaption, picture {margin:0; padding:0}
	*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; outline:none; -webkit-text-size-adjust: none; vertical-align:baseline;}
picture, picture img {display: block; margin:0 auto;}

body {background:url(../images/sc-bg.png) no-repeat center/100% 100% fixed}
.abs {position: absolute; z-index:9;}
.sc-logo {width:15%; top:20px; left:30px; position: fixed; z-index: 10;}
canvas {background: transparent !important;}
.btn-back {position:fixed; bottom:1.5vw; right:1.5vw; z-index:10;}
.btn-back a {color:#ff2a4a; text-decoration: none;}
.btn-back a:hover {color:#fff}
.left-arrow {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #ff2a4a;
    display: inline-block;
}

.ytb-outer {width:100%; height:100%; position: fixed; z-index:1; top:0; left:0}
.ytb-box {width:62%; height:auto;}
.youtube-embed {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .youtube-embed iframe, .youtube-embed object, .youtube-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.container-hourtime {top:0; left:0; width:100%; height:100%; pointer-events: none;}
.container {top:0;width:100%; overflow:unset;}
.font-bold {font-size:2.5vw; text-shadow: 0px 0px 1px rgba(0,0,0,1), 4px 4px 10px rgba(0,0,0,0.7);}
.shadow-bg {position:fixed; width:100%; height:100vh; pointer-events:none; top:0; left:0;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.7) 100%);
    z-index:1;
}
#smooth-wrapper {z-index:2;}

.shadow_mb {display:none;}

.center-text .items-center {
    background: radial-gradient( rgba(193, 32, 56, 0.8) 64%, rgba(255, 255, 255, 1) 66%);
    border-radius: 50%;
    position: relative;
    display: block;
    margin: 10px auto;
    box-shadow: 0px 0px 25px 3px rgba(193, 32, 56, 0.8);
}

.center-text .items-center::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-40%,-50%);
    transform: translate(-40%,-50%);
    transform-origin: center center;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid #fff;
    z-index: 100;
    -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

.center-text .items-center::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .75);
  top: -25%;
  left: -25%;
  background: rgba(193, 32, 56, 0);
}
canvas {bottom: unset!important; right: unset!important;}
.alert_mb {display:none; position: fixed; width:100%; height: 100%; top:0; left: 0; background-color: #000; z-index:11}

@media (min-width:931px) {
    .center-text .items-center {width:70px; height:70px;}
/*     .center-text {width:45%; right:8%; align-items:initial;}
    .center-text .items-center {position: absolute; margin-top:0; top:50%; left:0; transform: translateY(-50%); width:80px; height:80px;}
        .title-center {pointer-events: none; text-align:left; padding-left:80px;} */
}

@media (max-width:930px) {
    .font-bold {font-size:5vw; text-shadow: 0px 0px 1px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1), 0px 0px 2vw rgba(0,0,0,0.7);}
    #smooth-content {overflow-x: hidden !important;}
    .ytb-box {width:96%}
    .sc-logo {left:4vw; top:4vw}
    .btn-back {right:4vw; bottom:4vw}

    .shadow_mb {display: block; position:fixed; width:100%; height:100vh; pointer-events:none; top:0; left:0;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.05) 85%, rgba(0,0,0,1) 100%);
        z-index:3;
        background: linear-gradient(180deg, rgba(21,29,74,1) 0%, rgba(26,35,87,0.5) 15%, rgba(25,33,77,0) 30%, rgba(74,11,21,0) 70%, rgba(82,13,23,0.5) 82%, rgba(0,0,0,1) 100%);
    }
    .shadow-bg {background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.7) 100%);}

    .center-text .items-center {position:absolute; top:50%}
    .center-text .font-bold {position:absolute; top:calc(50% + 80px); width:90vh; height:100%;}
}

@-webkit-keyframes pulsate1 {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
      -webkit-transform: scale(4);
      transform: scale(4);
      opacity: 0;
      box-shadow: none;
    }
  }
  
  @keyframes pulsate1 {
    0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 1;
      box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
      -webkit-transform: scale(1, 1);
      transform: scale(1);
      opacity: 0;
      box-shadow: none;
  
    }
  }

  @media (max-width:930px) and (orientation: landscape) {
    .alert_mb {display: flex; align-items: center; justify-content: center;}
        .alert_mb .alert_copy {text-align: center;}
        .alert_mb .alert_copy img {max-width:60px; padding:10px;}
  }