@import url('https://fonts.googleapis.com/css?family={{shoutTopTextFont}}');
@import url('https://fonts.googleapis.com/css?family={{shoutBotTextFont}}');

.center { 
 margin: 0 auto; 
 width: auto; 
 height: 100%;
}

/*Div*/
#main_container {
 position: absolute;
 min-width: 600px;
 top: {{shoutTop}};
 left: {{shoutLeft}};
}

#image {
 z-index: 2;
 position: absolute;
 width: 100%; 
 height: 100%;
 top: {{imageHeight}}%;
}

/*Div*/
#video {
 width: 100%;
 height: 100%;
 position: absolute;
 /*top: {{videoHeight}}%;*/
 left: 0px;
 z-index: 2;
 background-size: cover;
 background-repeat: no-repeat;
}

#avatar_image {
 margin: 0 auto;
 z-index: 2;
 display: block;
}

#vid { 
 position: absolute; 
 right: 0; 
 bottom: 0;
 min-width: auto; 
 width: auto; 
 z-index: 2;
 background-size: cover;
 overflow: hidden;
 left: 50%;
 transform: translate(-50%);
 min-height: {{defaultVideoSize}}%;
 height: {{defaultVideoSize}}%; 
 top: {{mainTextFontSize}}px; 
}

#textMain {
 position: absolute;
 margin: 0 auto; 
 z-index: 3;
 width: 100%;
 text-shadow: 4px 4px 4px #000000;
 background-size: cover;
 line-height: 50px;
 font-family: '{{shoutTopTextFont}}', sans-serif;
 font-weight: 700;
  font-size: 50px;
 text-transform: uppercase;
 text-align: center;
 color: {{shoutTopTextColor}};
 top: {{mainTextfontHeight}}%;
}

#textSub {
 position: absolute;
 margin: 0 auto;
 top: 250px;
 line-height: 50px;
 z-index: 3;
 font-family: '{{shoutBotTextFont}}', sans-serif;
 font-weight: 700;
 color: {{shoutBotTextColor}}; 
 text-align: center;
 font-size: 50px;
 text-shadow: 4px 4px 4px #000000;
 text-transform: uppercase;
 background-size: cover;
 width: 100%;
}

/* Text Entrances */

.tracking-in-contract-bck-top {
 animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.tracking-in-contract-bck-bottom {
 animation: tracking-in-contract-bck-bottom 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.tracking-in-expand {
  animation: tracking-in-expand 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-in-expand-fwd {
  animation: tracking-in-expand-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-in-contract {
  animation: tracking-in-contract 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.text-focus-in {
  animation: text-focus-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.focus-in-expand {
  animation: focus-in-expand 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.focus-in-expand-fwd {
  animation: focus-in-expand-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.focus-in-contract {
  animation: focus-in-contract 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.focus-in-contract-bck {
  animation: focus-in-contract-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/* Text Exits */
.text-blur-out {
  animation: text-blur-out 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.tracking-out-contract {
  animation: tracking-out-contract 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-out-expand {
  animation: tracking-out-expand 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.blur-out-contract {
  animation: blur-out-contract 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.blur-out-expand {
  animation: blur-out-expand 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-out-contract-bck-bottom {
  animation: tracking-out-contract-bck-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-out-contract-bck-top {
  animation: tracking-out-contract-bck-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.tracking-out-contract-bck {
  animation: tracking-out-contract-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.blur-out-contract-bck {
  animation: blur-out-contract-bck 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* Avatar Entrances */
.fade-in {
  animation: fade-in 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 }

.roll-in-blurred-top {
 animation: roll-in-blurred-top 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

.slit-in-vertical {
  animation: slit-in-vertical 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-in-center {
  animation: scale-in-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-in-bottom {
  animation: scale-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-in-hor-center {
  animation: scale-in-hor-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-in-ver-center {
  animation: scale-in-ver-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.rotate-in-center {
  animation: rotate-in-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.rotate-in-2-fwd-cw {
  animation: rotate-in-2-fwd-cw 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.swirl-in-fwd {
  animation: swirl-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.swing-in-top-fwd {
 animation:swing-in-top-fwd 0.6s cubic-bezier(.175,.885,.32,1.275) both
}

/* Avatar Exits */
.slide-out-blurred-top {
  animation: slide-out-blurred-top 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.scale-out-center {
  animation: scale-out-center 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.scale-out-vertical {
  animation: scale-out-vertical 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.scale-out-horizontal {
  animation: scale-out-horizontal 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.scale-out-bottom {
  animation: scale-out-bottom 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.slit-out-vertical {
  animation: slit-out-vertical 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.rotate-out-center {
  animation: rotate-out-center 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.rotate-out-2-fwd {
  animation: rotate-out-2-fwd 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.rotate-out-2-cw {
  animation: rotate-out-2-cw 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.swirl-out-bck {
  animation: swirl-out-bck 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.swing-out-top-fwd {
  animation: swing-out-top-fwd 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.roll-out-blurred-top {
  animation: roll-out-blurred-top 0.6s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}




/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-blurred-top
 * ----------------------------------------
 */
@keyframes roll-in-blurred-top {
 0% {
 -webkit-transform: translateY(-800px) rotate(-720deg);
 transform: translateY(-800px) rotate(-720deg);
 -webkit-filter: blur(50px);
 filter: blur(50px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateY(0) rotate(0deg);
 transform: translateY(0) rotate(0deg);
 -webkit-filter: blur(0);
 filter: blur(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation slide-out-blurred-top
 * ----------------------------------------
 */
@keyframes slide-out-blurred-top {
 0% {
 -webkit-transform: translateY(0) scaleY(1) scaleX(1);
 transform: translateY(0) scaleY(1) scaleX(1);
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-filter: blur(0);
 filter: blur(0);
 opacity: 1;
 }
 100% {
 -webkit-transform: translateY(-1000px) scaleY(2) scaleX(0.2);
 transform: translateY(-1000px) scaleY(2) scaleX(0.2);
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-filter: blur(40px);
 filter: blur(40px);
 opacity: 0;
 }
}

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-top
 * ----------------------------------------
 */
@keyframes tracking-in-contract-bck-top {
 0% {
 letter-spacing: 1em;
 -webkit-transform: translateZ(400px) translateY(-300px);
 transform: translateZ(400px) translateY(-300px);
 opacity: 0;
 }
 40% {
 opacity: 0.6;
 }
 100% {
 -webkit-transform: translateZ(0) translateY(0);
 transform: translateZ(0) translateY(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-bottom
 * ----------------------------------------
 */
@keyframes tracking-in-contract-bck-bottom {
 0% {
 letter-spacing: 1em;
 -webkit-transform: translateZ(400px) translateY(300px);
 transform: translateZ(400px) translateY(300px);
 opacity: 0;
 }
 40% {
 opacity: 0.6;
 }
 100% {
 -webkit-transform: translateZ(0) translateY(0);
 transform: translateZ(0) translateY(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@keyframes text-blur-out {
 0% {
 -webkit-filter: blur(0.01);
 filter: blur(0.01);
 }
 100% {
 -webkit-filter: blur(12px) opacity(0%);
 filter: blur(12px) opacity(0%);
 }
}

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@keyframes swing-in-top-fwd {
 0% {
 -webkit-transform: rotateX(-100deg);
 transform: rotateX(-100deg);
 -webkit-transform-origin: top;
 transform-origin: top;
 opacity: 0;
 }
 100% {
 -webkit-transform: rotateX(0deg);
 transform: rotateX(0deg);
 -webkit-transform-origin: top;
 transform-origin: top;
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes fade-in {
 0% {
 opacity: 0;
 }
 100% {
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@keyframes tracking-in-expand {
 0% {
 letter-spacing: -0.5em;
 opacity: 0;
 }
 40% {
 opacity: 0.6;
 }
 100% {
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@keyframes tracking-in-expand-fwd {
 0% {
 letter-spacing: -0.5em;
 -webkit-transform: translateZ(-700px);
 transform: translateZ(-700px);
 opacity: 0;
 }
 40% {
 opacity: 0.6;
 }
 100% {
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@keyframes tracking-in-contract {
 0% {
 letter-spacing: 1em;
 opacity: 0;
 }
 40% {
 opacity: 0.6;
 }
 100% {
 letter-spacing: normal;
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@keyframes text-focus-in {
 0% {
 -webkit-filter: blur(12px);
 filter: blur(12px);
 opacity: 0;
 }
 100% {
 -webkit-filter: blur(0px);
 filter: blur(0px);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation focus-in-expand
 * ----------------------------------------
 */
@keyframes focus-in-expand {
 0% {
 letter-spacing: -0.5em;
 -webkit-filter: blur(12px);
 filter: blur(12px);
 opacity: 0;
 }
 100% {
 -webkit-filter: blur(0px);
 filter: blur(0px);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation focus-in-expand-fwd
 * ----------------------------------------
 */
@keyframes focus-in-expand-fwd {
 0% {
 letter-spacing: -0.5em;
 -webkit-transform: translateZ(-800px);
 transform: translateZ(-800px);
 -webkit-filter: blur(12px);
 filter: blur(12px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-filter: blur(0);
 filter: blur(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation focus-in-contract
 * ----------------------------------------
 */
@keyframes focus-in-contract {
 0% {
 letter-spacing: 1em;
 -webkit-filter: blur(12px);
 filter: blur(12px);
 opacity: 0;
 }
 100% {
 -webkit-filter: blur(0px);
 filter: blur(0px);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
@keyframes focus-in-contract-bck {
 0% {
 letter-spacing: 1em;
 -webkit-transform: translateZ(300px);
 transform: translateZ(300px);
 -webkit-filter: blur(12px);
 filter: blur(12px);
 opacity: 0;
 }
 100% {
 -webkit-transform: translateZ(12px);
 transform: translateZ(12px);
 -webkit-filter: blur(0);
 filter: blur(0);
 opacity: 1;
 }
}

/**
 * ----------------------------------------
 * animation tracking-out-contract
 * ----------------------------------------
 */
 @keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation tracking-out-expand
 * ----------------------------------------
 */
@keyframes tracking-out-expand {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation blur-out-contract
 * ----------------------------------------
 */
@keyframes blur-out-contract {
  0% {
    filter: blur(0.01);
  }
  100% {
    letter-spacing: -0.5em;
    filter: blur(12px) opacity(0%);
  }
}

/**
 * ----------------------------------------
 * animation blur-out-expand
 * ----------------------------------------
 */
@keyframes blur-out-expand {
  0% {
    filter: blur(0.01);
  }
  100% {
    letter-spacing: 1em;
    filter: blur(12px) opacity(0%);
  }
}

/**
 * ----------------------------------------
 * animation tracking-out-contract-bck-bottom
 * ----------------------------------------
 */
@keyframes tracking-out-contract-bck-bottom {
  0% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    transform: translateZ(-500px) translateY(300px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation tracking-out-contract-bck-top
 * ----------------------------------------
 */
@keyframes tracking-out-contract-bck-top {
  0% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    transform: translateZ(-500px) translateY(-300px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation tracking-out-contract-bck
 * ----------------------------------------
 */
@keyframes tracking-out-contract-bck {
  0% {
    transform: translateZ(0);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    transform: translateZ(-500px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation blur-out-contract-bck
 * ----------------------------------------
 */
@keyframes blur-out-contract-bck {
  0% {
    transform: translateZ(0);
    filter: blur(0.01);
  }
  100% {
    letter-spacing: -0.5em;
    transform: translateZ(-500px);
    filter: blur(12px) opacity(0%);
  }
}

/**
 * ----------------------------------------
 * animation slit-in-vertical
 * ----------------------------------------
 */
 @keyframes slit-in-vertical {
  0% {
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotateY(0);
  }
}

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-in-bottom
 * ----------------------------------------
 */
@keyframes scale-in-bottom {
  0% {
    transform: scale(0);
    transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-in-hor-center
 * ----------------------------------------
 */
@keyframes scale-in-hor-center {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-in-ver-center
 * ----------------------------------------
 */
@keyframes scale-in-ver-center {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation rotate-in-center
 * ----------------------------------------
 */
@keyframes rotate-in-center {
  0% {
    transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation rotate-in-2-fwd-cw
 * ----------------------------------------
 */
@keyframes rotate-in-2-fwd-cw {
  0% {
    transform: translateZ(-200px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) rotate(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation swirl-in-fwd
 * ----------------------------------------
 */
@keyframes swirl-in-fwd {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
 @keyframes scale-out-center {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-out-vertical
 * ----------------------------------------
 */
@keyframes scale-out-vertical {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-out-horizontal
 * ----------------------------------------
 */
@keyframes scale-out-horizontal {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-out-bottom
 * ----------------------------------------
 */
@keyframes scale-out-bottom {
  0% {
    transform: scale(1);
    transform-origin: 50% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(0);
    transform-origin: 50% 100%;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slit-out-vertical
 * ----------------------------------------
 */
@keyframes slit-out-vertical {
  0% {
    transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation rotate-out-center
 * ----------------------------------------
 */
@keyframes rotate-out-center {
  0% {
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform: rotate(-360deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation rotate-out-2-fwd
 * ----------------------------------------
 */
@keyframes rotate-out-2-fwd {
  0% {
    transform: translateZ(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateZ(180px) rotate(45deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation rotate-out-2-cw
 * ----------------------------------------
 */
@keyframes rotate-out-2-cw {
  0% {
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation swirl-out-bck
 * ----------------------------------------
 */
@keyframes swirl-out-bck {
  0% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation swing-out-top-fwd
 * ----------------------------------------
 */
@keyframes swing-out-top-fwd {
  0% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
  100% {
    transform: rotateX(70deg);
    transform-origin: top;
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation roll-out-blurred-top
 * ----------------------------------------
 */
@keyframes roll-out-blurred-top {
  0% {
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) rotate(-720deg);
    filter: blur(50px);
    opacity: 0;
  }
}