@font-face {
    font-family: 'HelveticaNeueLTStd77BoldCondensed';
    src: url('../fonts/helveticaneueltstd-bdcn.eot');
    src: url('../fonts/helveticaneueltstd-bdcn.eot') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-bdcn.woff') format('woff'),
         url('../fonts/helveticaneueltstd-bdcn.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-bdcn.svg#HelveticaNeueLTStd77BoldCondensed') format('svg');
} 

@font-face {
    font-family: 'HelveticaNeueLTStd55Roman';
    src: url('../fonts/helveticaneueltstd-roman.eot');
    src: url('../fonts/helveticaneueltstd-roman.eot') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-roman.woff') format('woff'),
         url('../fonts/helveticaneueltstd-roman.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-roman.svg#HelveticaNeueLTStd55Roman') format('svg');
} 

@font-face {
    font-family: 'HelveticaNeueLTStd75Bold';
    src: url('../fonts/helveticaneueltstd-bd.eot');
    src: url('../fonts/helveticaneueltstd-bd.eot') format('embedded-opentype'),
         url('../fonts/helveticaneueltstd-bd.woff') format('woff'),
         url('../fonts/helveticaneueltstd-bd.ttf') format('truetype'),
         url('../fonts/helveticaneueltstd-bd.svg#HelveticaNeueLTStd75Bold') format('svg');
}

@font-face {
  font-family: 'HelveticaNeue-CondensedBlack';
  src: url('../fonts/HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),  
       url('../fonts/HelveticaNeue-CondensedBlack.otf')  format('opentype'),
       url('../fonts/HelveticaNeue-CondensedBlack.woff') format('woff'), 
       url('../fonts/HelveticaNeue-CondensedBlack.ttf')  format('truetype'), 
       url('../fonts/HelveticaNeue-CondensedBlack.svg#HelveticaNeue-CondensedBlack') format('svg');
  font-weight: normal;
  font-style: normal;
} 

header:has(#masthead > .notice-bar:not(.pw-hidden)) {
    height: calc(116px + 110px);
}

/* general tag styles */

html
{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%; 
  -ms-text-size-adjust:100%
}

*, a {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;    
}
/*
* {
    transition: width 0.3s ease-out 0s,  height 0.3s ease-out 0s,  font-size 0.3s ease-out 0s, left 0.3s ease-out 0s, right 0.3s ease-out 0s, align 0.3s ease-out 0s;
}
*/
.channel {
    -moz-transition-property: none;
    -webkit-transition-property: none;
    -o-transition-property: none;
    transition-property: none;   
}

/*body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	background-color: #284B6C;
	padding: 0;
	margin: 0;
	text-align: center;
	font-size: x-small;
	background-image: url(..../images/background.jpg);
}

p, td, li, form, label {
	font-size: x-small;
}

td, ul, ol, li, form, input, select {
	padding: 0;
	margin: 0;
}

img {
	padding: 0;
	border: 0;
}

p {
	line-height: 120%;
	padding: 0 0 10px 0;
	color: #fff;
	font-weight: normal;
	border: 0;
	margin: 0;
}

p.clearit {
  clear: both;
  line-height: 1px;
} 

h1, h2, h3, h4 {
    font-size: x-small;
	line-height: 120%;
	padding: 10px 0 1px 0;
	border: 0;
	margin: 0;
	color: #fff;
}

h5, h6 {
	font-size: x-small;
	padding: 10px 0 2px 0;
	border: 0;
	margin: 0;
}

select {
	font-size: x-small;
}

a {
	color: #FFFFCC;
}

a:hover {
	color: #FFFFCC;
}

label {
	color: #000;
	vertical-align: top;
	font-size: x-small;
}

.em-note {
  font-style: italic;
}

sup {
    font-size: 1em;
    vertical-align: baseline;
    position: relative;
   	bottom: 0.36em;
}

sub {
    font-size: smaller;
    vertical-align: baseline;
    position: relative;
    bottom: -0.25em;
}

ul, ol {
	margin: 0 0 15px 25px;
}*/

/* tabular data cell styles */

td {
	text-align: left;
	vertical-align: top;
}

td.lm {
	text-align: left;
	vertical-align: middle;
	font-size: x-small;
}

td.lb {
	text-align: left;
	vertical-align: bottom;
}

td.lt {
	text-align: left;
	vertical-align: top;
	padding: 0;
}

td.ct {
	text-align: center;
	vertical-align: top;
}

td.cm {
	text-align: center;
	vertical-align: middle;
}

td.cb {
	text-align: center;
	vertical-align: bottom;
}

td.rt {
	text-align: right;
	vertical-align: top;
}

td.rm {
	text-align: right;
	vertical-align: middle;
}

td.rb {
	text-align: right;
	vertical-align: bottom;
}

.clearit {
    clear: both;
    line-height: 1px;
    font-size: 1px;   
}

/* main containers */ 

.page, .section, .result{
	display: none;
}


.container {
    max-width: 994px;   
}

.container p {
    font-family: 'Raleway', sans-serif;  
    font-size: 15px;
    color: #fff;
    text-align: center;
    padding: 0 0 10px 0;
    margin: 0;
}

.container h2 {
    color: #fbff39;
    font-size: 44px;   
    text-align: center;
    padding: 0 0 20px 0;
    margin: 0;
    font-family: 'Changa', sans-serif;
    text-transform: uppercase;
}

.container h2.small {
    font-size: 32px;   
}


.container h3 {
    color: #fbff39;
    font-size: 26px;   
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: 'Changa', sans-serif;
}

.container a {
    font-family: 'Changa', sans-serif;
    color: #fff;
    /*text-decoration: underline;*/ 
}

.container a:hover {
    color: #fff;
    text-decoration: underline; 
}

.container label {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: normal;
}

main.background {
    background-color: #4c617d;
    background-image: -moz-linear-gradient(center top , #4c617d 0%, #ffffff 100%);
    min-height: 100%;
    width: 100%;
}

.defenders {
	position: relative;
    margin-top: 0;
}

.defenders.subpage {
    background: #242481 url(../images/subpage-bg.png) right top repeat-y;    
}

.defenders.subpage .bg {
    background: url(../images/subpage-bg2.png) right top no-repeat;    
}

.defenders.subpage.full .bg {
    background: #000109;    
}

.defenders.subpage.full {
     background: #442AD5;    
}

.defenders.subpage.full.purple .bg {
     background: url(../images/purple-bg.png) right top no-repeat;    
}

.defenders-header {
    position: relative;   
}

.defenders-header h2 {
    padding: 33px 0;
}

.defenders.subpage .defenders-header {
    background: url(../images/hdr-bg.png) right top no-repeat;
    background-size: cover;           
}

.defenders-header img.banner {
    width: 100%;
    height: auto;   
} 

.defenders-header .hdr {
    text-align: center;  
}

.defenders-header .hdr img {
    margin: 0;
    max-width: 430px;
    height: auto;
    width: 50%;
}

.defenders-header h1 {
    position: absolute;
    left: 20px;
    top: 0;  
}

.defenders-content-cols3 {
    display: table;
    width: 100%;
}

.defenders-content-cols3 ul {
    display: table-row;
    width: 100%;   
}

.defenders-content-cols3 ul li {
    display: table-cell;   
}

.defenders-content-cols3 ul li.contrast {
    background: rgba(250,250,250,0.1);
}

.defenders-content {
    padding: 0 50px 50px 50px;
    color: #2E3F47;
}

.defenders.subpage .defenders-content {
    /*background: rgba(250, 250, 250, 0.15);*/
    background: none;
    width: 484px; 
    margin: 0 auto;  
    padding: 30px 15px;
}

.defenders.subpage .defenders-content.padd0 {
    padding: 30px 0 30px 10px;   
}

.defenders.subpage.full .defenders-content {
    /*background: rgba(250, 250, 250, 0.15);*/
    background: none;
    width: 100%; 
    margin: 0 auto;  
    padding: 30px 15px;
}

.defenders.subpage .defenders-main-area {
    position: relative;   
}

.defenders.subpage .defenders-content .bio-rules {
    margin: 25px 0;   
}

.container .defenders.subpage .defenders-content .bio-rules p {
    font-size: 16px;  
}

.indent {
    padding: 0 20px;   
}

.defenders-content .hdr {
    text-align: center;
    width: 70%;
    margin: 0 auto;
}

.defenders-content .hdr img {
    margin: -32% auto 0 auto; 
    position: relative;
    z-index: 100;  
    display: inline-block;
    width: 100%;
    height: auto;
    max-width: 532px;
}

.defenders-content .hdr .mobile {
    display: none;   
}

.buttons {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 0 0 10px 0;   
}

.container .btn span {
    font-size: 16px; 
    line-height: 100%;  
    font-family: 'HelveticaNeueLTStd77BoldCondensed';
}

.container .btn span.desktop-txt {
    font-size: 36px; 
    line-height: 70%;
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
}

.container .btn span.mobile-txt {
    display: none;
    line-height: 70%;
    font-size: 36px;  
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
}

.container .btn.small {
    background: #cc53fd; /* Old browsers */
    background: -moz-linear-gradient(top, #cc53fd 0%, #bb1afc 5%, #bb1afc 5%, #bb1afc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc53fd), color-stop(5%,#bb1afc), color-stop(5%,#bb1afc), color-stop(100%,#bb1afc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cc53fd 0%,#bb1afc 5%,#bb1afc 5%,#bb1afc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cc53fd 0%,#bb1afc 5%,#bb1afc 5%,#bb1afc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #cc53fd 0%,#bb1afc 5%,#bb1afc 5%,#bb1afc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #cc53fd 0%,#bb1afc 5%,#bb1afc 5%,#bb1afc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc53fd', endColorstr='#bb1afc',GradientType=0 ); /* IE6-9 */
    border-radius: 10px;
    -moz-border-radius: 10px; 
    color: #fff;
    padding: 15px 30px 10px 30px;
    margin: 0 15px 10px 15px;
    font-size: 15px;
    line-height: 70%;
    width: auto;
    text-decoration: none;
    font-family: 'HelveticaNeueLTStd77BoldCondensed', Arial;
}

.container .btn.medium {
    background: -webkit-linear-gradient(top, rgba(127,19,204,1) 0%, rgba(127,19,204,1) 38%, rgba(127,19,204,1) 39%, rgba(125,15,203,1) 71%, rgba(125,15,203,1) 100%);
    background: -o-linear-gradient(top, rgba(127,19,204,1) 0%, rgba(127,19,204,1) 38%, rgba(127,19,204,1) 39%, rgba(125,15,203,1) 71%, rgba(125,15,203,1) 100%);
    background: -ms-linear-gradient(top, rgba(127,19,204,1) 0%, rgba(127,19,204,1) 38%, rgba(127,19,204,1) 39%, rgba(125,15,203,1) 71%, rgba(125,15,203,1) 100%);
    background: linear-gradient(to bottom, rgba(127,19,204,1) 0%, rgba(127,19,204,1) 38%, rgba(127,19,204,1) 39%, rgba(125,15,203,1) 71%, rgba(125,15,203,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f13cc', endColorstr='#7d0fcb', GradientType=0 );
    border-radius: 10px;
    -moz-border-radius: 10px; 
    color: #fff;
    padding: 10px 30px 10px 30px !important;
    margin: 0 15px;
    font-size: 18px;
    line-height: 100% !important;
    width: auto;   
    text-decoration: none;
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
}     

.container .btn.underline {
    text-decoration: underline !important;   
} 

.container .btn.equal {
    min-width: 280px;
}   

.container .btn.yellow {
    color: #fbff39 !important;
    text-transform: uppercase;
    font-size: 26px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6);    
}

.container .btn.green {
    background: url(../images/btn-final.png) right center no-repeat; 
    box-shadow: none;
    border-radius: 0;
    width: auto;
    font-size: 20px;
    color: #151759 !important;
    height: 54px;
    text-decoration: underline !important; 
}

.container .defenders.subpage .defenders-content p {
    font-family: 'HelveticaNeueLTStd75Bold';
    font-size: 18px;   
    text-shadow: none;
    padding: 0 0 15px 0;
    margin: 0;
}

.container .defenders.subpage .defenders-content .align-left p {
    text-align: left;
}

.container .med {
    font-size: 18px;   
}

.container .yellow-txt {
    color: #fbff39;   
}

.pink {
    color: #d8138d;
}

.favourite > .pink {
    font-weight: bold;
}

.container .defenders.subpage h3 {
    padding: 0 0 15px 0;   
}

.container .defenders.subpage table, .container .defenders table {
    margin: 0 auto 15px auto;  
}

.container .defenders.subpage table, .container .defenders align-left table {
    margin: 0 0 15px 0;  
}

 .container .defenders.subpage table td,  .container .defenders table td {
    padding: 0 7px;   
}

.container .defenders.subpage input[type=text], .container .defenders input[type=text] {
    color: #2a2a6c;   
    text-align: center;
    border-radius: 7px;
    border: none;
    min-width: 300px;
    padding: 5px 10px 5px 10px;
    font-size: 16px;
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
    -webkit-box-shadow: inset 4px 4px 6px 1px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    inset 4px 4px 6px 1px rgba(50, 50, 50, 0.25);
    box-shadow:         inset 4px 4px 6px 1px rgba(50, 50, 50, 0.25);
}


.container .green, .container .green:hover {
    color: #11f92c; 
    text-decoration: none;  
}

.container .green i {
    font-size: 45px;
    vertical-align: middle;   
}

.container .defenders.subpage .footer {
    border: 2px solid #FBFF39;
    padding: 15px; 
    margin: 0 0 15px 0;  
}

.container .defenders .special-code {
    border: 2px solid #FBFF39;
    padding: 15px; 
    margin: 0 auto 15px auto;  
    max-width: 420px;
}

.container .defenders.subpage .footer p, .container .defenders .special-code p {
    font-size: 16px;
    color: #fbff39;   
}

.container .defenders.subpage .footer input, .container .defenders .special-code input {
    min-width: 1px; 
    margin: 0;
    height: 35px;
    width: 100%;
}

.container .defenders.subpage .footer .btn, .container .defenders .special-code .btn {
    padding: 5px 20px !important; 
    min-width: 1px; 
    margin: 0;
    height: 35px;
}

.container .defenders.subpage .footer table {
    margin-left: auto;
    margin-right: auto; 
}

.container .defenders.subpage .defender-description {
    border: 2px solid #D8138D;
    padding: 10px 15px 0 10px;   
    margin: 0 0 15px 0;
    position: relative;
    min-height: 275px;
    text-align: center;
}
.defender-description {
    text-align: center;
}
.defender-description img {
    height: 300px;
    width: auto;
}

.container .defenders.subpage .defender-description .shadow, .container .defenders.subpage .download-description .shadow {
    background: -webkit-linear-gradient(left,rgba(0,0,0,0.4),rgba(0,0,0,0.95)); 
    background: -o-linear-gradient(right,rgba(0,0,0,0.4),rgba(0,0,0,0.95)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.4),rgba(0,0,0,0.95)); 
    background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0.95));   
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    border: 1px solid #f00;
}

.container .defenders.subpage .defender-description .bio {
    margin-left: 45%;
    position: relative;
    z-index: 100;
}

.container .defenders.subpage .defender-description p {
    font-size: 14px;
    text-align: left;
    font-family: 'HelveticaNeueLTStd55Roman';  
} 

.container .defenders.subpage .defender-description p.title {
    color: #ff0099;
    font-size: 16px;
    font-weight: bold;
} 

.container .defenders.subpage .defender-description.june p.title, .container .defenders.subpage .defender-description.june span.pink {
    color: #EE294F;
} 

.container .defenders.subpage .defender-description.ricardo p.title, .container .defenders.subpage .defender-description.ricardo span.pink {
    color: #009CE3;
} 

.container .defenders.subpage .defender-description.buzz p.title, .container .defenders.subpage .defender-description.buzz span.pink {
    color: #0FED29;
} 

.container .defenders.subpage .defender-description p.title span {
    font-size: 24px;
}

.container .defenders.subpage .defender-description.leia {
     background: url(../images/leia-bio.png) left top no-repeat;
     background-size: cover;    
}

.container .defenders.subpage .defender-description.june {
     background: url(../images/june-bio.png) left top no-repeat;
     background-size: cover;    
}

.container .defenders.subpage .defender-description.buzz {
     background: url(../images/buzz-bio.png) left top no-repeat;
     background-size: cover;    
}

.container .defenders.subpage .defender-description.ricardo {
     background: url(../images/ricardo-bio.png) left top no-repeat;
     background-size: cover;    
}

.container .defenders.subpage .defender-description.team {
     padding: 0;
     min-height: 1px;
}

.container .defenders.subpage .defender-description.team img {
     width: 100%;
     height: auto;
}

.container .defenders.subpage .download-description {
    border: 2px solid #fbff39;
    padding: 10px 15px 0 10px;   
    margin: 0 0 15px 0;
    position: relative;
    background: url(../images/activities-bg.png) left top no-repeat;
    background-size: cover;  
}

.container .defenders.subpage .download-description .download-blurb {
    margin-right: 70%;
    position: relative;
    z-index: 100;
    text-align: left;
}

.container .defenders.subpage .download-description .download-blurb p {
    text-align: left;
    font-size: 15px;
}

.download {
    background: url(../images/download-bg.png) right top no-repeat;
    background-size: 100% 100%;  
    margin: 0 3% 15px 3%; 
    padding: 15px;  
    display: table;
    width: 94%;  
}

.download.full {
    width: 100%;
    border-radius: 10px;
    margin: 0 0 15px 0;  
}

.download ul {
    display: table-row;   
}

.save-avatar {
    margin: 0 12px 0 26%;  
    display: none;
}

.save-avatar .download {
    color: #E7FE36;
    font-size: 20px;   
    text-align: center; 
    font-family: 'HelveticaNeue-CondensedBlack';   
}

.download ul li {
    display: table-cell;   
    padding: 0 15px 0 0;
    vertical-align: middle;
}

.download.centered ul li {
    text-align: center;   
}

.download ul li, .download ul li a, .download ul li a:hover, .download ul li a:active {
    color: #fbff39;
    font-size: 16px;
    font-family: 'HelveticaNeueLTStd75Bold';
    text-decoration: none;
    font-weight: 100;
    text-decoration: underline;
}

.download ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.download ul li span, .download ul li a span, .download ul li a:hover span {
    color: #fbff39;
    font-size: 23px;
    font-family: 'HelveticaNeue-CondensedBlack';
    text-decoration: none;
}

.download-list {
    background: url(../images/download-bg.png) right top no-repeat;
    background-size: 100% 100%;  
    margin: 0 3% 0 3%; 
    padding: 15px;  
    width: 94%;  
}

.download-list p { 
    font-size: 28px !important;
    font-family: 'HelveticaNeue-CondensedBlack' !important;
}

.download-list div { 
    display: table;
}

.download-listdiv  ul {
    display: table-row;   
}

.download-list div ul li {
    display: table-cell;   
    padding: 0 15px 10px 0;
    vertical-align: middle;
    text-align: left;
}

.download-list div ul li p {
    text-align: left;
    font-size: 20px;
    padding: 0 0 5px 0 !important;
}

.download-list div ul li a {
    color: #fbff39;
    font-size: 20px;
    font-family: 'HelveticaNeueLTStd75Bold';
    text-decoration: none;
    font-weight: 100;
    text-decoration: underline;
}

.resource {
    padding: 0 15px; 
    margin: 0 0 10px 0;  
}

.resource p {
    text-align: left; 
    font-size: 14px !important;  
}

.resource p a, .resource .yellow {
    color: #fbff39;
    font-size: 20px;
    font-family:  'HelveticaNeueLTStd75Bold';
    text-decoration: none;
}

.resource .btn-download a {
    background: url(../images/download-bg.png) right top no-repeat;
    background-size: 100% 100%; 
    padding: 3px 20px 5px 20px !important;
    display: inline-block;
    min-width: 180px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 14px !important;
    font-family: 'HelveticaNeueLTStd75Bold' !important;  
}

.resource .btn-download a:hover {
    color: #fbff39;
    text-decoration: none; 
}

.games {
    background: url(../images/download-bg.png) right top no-repeat;
    background-size: 100% 100%;  
    margin: 0 0 15px 0; 
    padding: 15px;      
}

.games img, .games-half img {
    width: 100%;
    height: auto;   
}

.games a, .games-half a, .games a:hover, .games-half a:hover {
    color: #fbff39;
    font-size: 24px;
    font-family: 'HelveticaNeue-CondensedBlack';
    text-decoration: none;
}

.games-half {
    background: url(../images/download-bg.png) right top no-repeat;
    background-size: 100% 100%;  
    margin: 0 4% 15px 0; 
    padding: 15px 15px 5px 15px;  
    width: 48%; 
    float: left;   
}

.games-half:nth-child(2n) {
    margin: 0 0 15px 0;  
}

.games-half .game-name {
    min-height: 80px; 
    padding: 0 0 !important;
}

#defenders-silhouettes-right {
    position: absolute;
    right: 5%;
    top: 0;   
    width: 15%;
    padding: 30px 0 0 0; 
}

#defenders-silhouettes-right p{
	display: none;
}

#defenders-silhouettes-left {
    position: absolute;
    left: 5%;
    top: 0;   
    width: 15%;
    padding: 30px 0 0 0; 
}

#defenders-silhouettes-right p, #defenders-silhouettes-left p {
    font-size: 48px;
    font-family:'HelveticaNeue-CondensedBlack' ;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
}

#defenders-silhouettes-right img, #defenders-silhouettes-left img {
    width: 100%;
    height: auto;   
    max-width: 154px;    
}

.container .defenders.subpage .defenders-content .quiz {
    padding: 0 20px;   
}

.container .defenders.subpage .defenders-content .quiz p {
    text-align: left;   
}

.container .defenders.subpage .defenders-content .quiz table {
    margin: 0; 
}

.container .defenders.subpage .defenders-content .quiz .true {
    color: #1cf435; 
    text-align: center;
    font-size: 20px;  
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
    margin: 10px 0;
}

.container .defenders.subpage .defenders-content .quiz .false {
    color: #fbff39; 
    text-align: center;
    font-size: 20px;  
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
    margin: 10px 0;
}

.container .defenders.subpage .defenders-content .quiz .btn {
    min-width: 1px;
    margin: 0 auto;
    padding: 5px 20px;
    height: 35px;
}

.container .defenders.subpage .defenders-content .quiz .align-center {
    text-align: center;   
}

.container .defenders.subpage .defenders-content .status {
    border: 2px solid #1cf435;
    padding: 15px;  
    margin: 0 0 15px 0; 
}

.container .defenders.subpage .defenders-content .status p {
   color: #fff;
   font-size: 20px;
   padding: 0 0 10px 0;
}

.container .defenders.subpage .defenders-content .status a {
   color: #fff !important;
   text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}

.container .defenders.subpage .defenders-content .status .levels p {
   color: #99ff00 !important;
}

.container .defenders.subpage .defenders-content .status p.title {
   color: #1cf435;
   font-size: 28px;
   padding: 0 0 20px 0;
}

.container .defenders.subpage .defenders-content .congrats {
    border: 2px solid #1cf435;
    margin: 0 0 25px 0; 
}

.container .defenders.subpage .defenders-content .congrats h4 {
    background: #1cf435;
    padding: 10px;  
    margin: 0 0 15px 0; 
    color: #151759;
    font-size: 20px;
    text-align: center;
    font-family: 'HelveticaNeue-CondensedBlack', Arial;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(250, 250, 250, 0);
    -moz-box-shadow: 0px 0px 25px 0px rgba(250, 250, 250, 0);
    box-shadow: 0px 0px 25px 0px rgba(250, 250, 250, 0);
}

.container .defenders.subpage .defenders-content .congrats img {
    width: 110%; 
    height: auto;
    margin: 0 -5%;  
}

.container .defenders-header .status-bar {
    display: table;
    border-collapse: separate;
}

.container .defenders-header .status-bar ul {
    display: table-row;
    width: 100%;   
}

.container .defenders-header .status-bar ul li { 
    display: table-cell; 
    text-align: center;
    width: 15%;
    vertical-align: center;
    position: relative;
    color: #FFFFFF; 
    font-size: 18px;
    font-family: 'Changa', sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1;
    /*-webkit-box-shadow: inset 0 -5px 5px -5px rgba(67, 113, 130, 1), inset 2px 2px 3px 0px rgba(255, 255, 255, 0.45);
    -moz-box-shadow: inset 0 -5px 5px -5px rgba(67, 113, 130, 1), inset 2px 2px 3px 0px rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 -5px 5px -5px rgba(67, 113, 130, 1), inset 2px 2px 3px 0px rgba(255, 255, 255, 0.45);  */
    cursor: pointer;
}
.container .defenders-header .status-bar ul li:first-child {
    width: 10%;
    font-size: 28px;
} 
.container .defenders-header .status-bar ul li .number {
    font-size: 44px;
    padding-bottom: 0;
    display: block;
} 
.container .defenders-header .status-bar ul li a {
    color: #FFFFFF; 
    font-size: 18px;
    text-decoration: none;
    display: block;
    height: 100%;
}

.container .defenders-header .status-bar ul li table {
    margin: 0;  
    height: 100%; 
}

.container .defenders-header .status-bar ul li table td {
    vertical-align: center; 
}

.container .defenders-header .status-bar ul li table td:first-child {
    font-size: 26px;
    padding: 0 0 2px 0;
}

/*.container .defenders-header .status-bar ul li:after { 
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 10px solid #71BFDB; 
}     */

/*.container .defenders-header .status-bar ul li:before { 
    content: '';
    position: absolute;
    top: 30px;
    right: -16px;
    width: 10px;
    height: 32px;
    border: 1px solid transparent;
    z-index: 10;
    -webkit-box-shadow: inset 0 -7px 7px -7px rgba(10, 147, 27, 1), inset 2px 2px 5px 0px rgba(255, 255, 255, 0.85);
    -moz-box-shadow: inset 0 -7px 7px -7px rgba(10, 147, 27, 1), inset 2px 2px 5px 0px rgba(255, 255, 255, 0.85);
    box-shadow: -2px 2px 3px 0px rgba(67, 113, 130, 0.65);
    transform: rotate(20deg);
}*/

.container .defenders-header .status-bar ul li.selected:after {
   border-left-color: #11f92c;
} 

.container .defenders-header .status-bar.first {
    
}

.container .defenders-header .status-bar.second {
    margin-left: -5px;   
}

.container .defenders-header .status-bar.second ul li:last-child { 
    background: url(../images/blue-arrow-status-last.png) right top no-repeat;
    background-size: 100% 100%;
}

.container .defenders-header .status-bar.second ul li.selected:last-child { 
    background: url(../images/green-arrow-status-last.png) right top no-repeat;
    background-size: 100% 100%;
}

.container .status-bar-spacer {
    height: 101px;   
}

/* custom radios */

/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    line-height: 1.2;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 1px;
    width: 17px; 
    height: 17px;
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 1px; 
    left: 0;
    font-size: 14px;
    color: #09ad7e;
    width: 17px;
    height: 17px;
    border: 1px solid #aaa;
    background: #D80B8C;
    border-radius: 20px;
    transition: all .2s;
}
/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
    color: #999;
}
[type="radio"]:disabled + label {
    color: #aaa;
}
/* accessibility */
[type="radio"]:checked:focus + label:before,
[type="radio"]:not(:checked):focus + label:before {
    border: 1px solid #aaa;
}

/* hover style just for information */
label:hover:before {
    border: 1px solid #aaa!important;
}

/* custom checkbox */

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 4px;
    width: 17px; 
    height: 17px;
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 4px; 
    left: 0;
    font-size: 14px;
    color: #09ad7e;
    width: 17px;
    height: 17px;
    border: 1px solid #aaa;
    background: #1af033;
    border-radius: 3px;
    transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
[type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
    color: #999;
}
[type="checkbox"]:disabled + label {
    color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    border: 1px solid #aaa;
}

/* hover style just for information */
label:hover:before {
    border: 1px solid #aaa!important;
}

/* responsive videos */

.embed-container {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    margin: 0 0 15px 0;
}

.embed-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* yes branch */

.rockout {
    /*background: url(../images/rockout-bg.png) left top no-repeat;*/
}

.stage-container {
    position: relative;
}


.stage-blurb {
    background: url(../images/stage-blurb-bg.png) center top no-repeat;
    background-size: cover;
    padding: 10px 10px 0 10px;
}

.stage-img {
    width: 100%; 
    height: auto;   
}

.stage-area {
    position: absolute;
    left: 0;
    top: 0;   
    width: 100%;
    height: 100%;
}

.stage-area img {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;       
}

.stage-area .item-light {
    display: none;   
}

.light {
    position: absolute;
    width: 10%; 
    height: auto;
    z-index: 1000;
}

.light.green {
    left: 2%;
    top: 5%;     
}

.light.pink {
    right: 2%;
    top: 5%;     
}

.light.yellow {
    left: 2%;
    bottom: 5%;     
}

.light.blue {
    right: 2%;
    bottom: 5%;     
}


.stage-options {
    text-align: center;   
    margin-top: -2%;
    position: relative;
    z-index: 100;
}

.stage-options img {
    width: 100%;
    height: auto;   
}

.stage-options div {
    display: inline-block;  
    width: 35%; 
    position: relative;
}

.rockout .stage-start {
    padding-top: 250px;   
}

.stage-start {
    padding: 25px 0 200px 0;
}

.stage-start a {
    font-size: 18px;    
    text-transform: uppercase;   
}

.stage-options div a {
    position: relative;
    z-index: 100;   
}

.stage-options .options {
    position: absolute;
    z-index: 99;
    left: 0;
    top: 5px;
    width: 100%;
    padding: 20% 0 0 0;  
    background: rgba(250, 250, 250, 0.4); 
    border-radius: 5px;
    -moz-border-radius: 5px;
    display: none;
}

.stage-options .options ul {
    text-align: left;
    list-style: none;  
    padding: 0 15px 15px 30px; 
}

.stage-options .options ul li a {
    color: #161355;
    font-size: 1.5vw;   
    font-family: 'HelveticaNeueLTStd77BoldCondensed';
}

.stage-options .options ul li.active a {
    color: #11f92c;
}

.stage-options .options ul li label {
    color: #161355;
    font-size: 1.5vw;   
    font-family: 'HelveticaNeueLTStd77BoldCondensed'; 
    font-weight: normal;
    text-decoration: underline;
    margin: 0;
}

.stage-options .options ul li.active label {
    color: #11f92c;   
}

.stage-options .options [type="checkbox"]:not(:checked) + label:before,
.stage-options .options [type="checkbox"]:checked + label:before,
.stage-options .options [type="checkbox"]:not(:checked) + label:after,
.stage-options .options [type="checkbox"]:checked + label:after {
    top: 50% !important; 
    margin-top: -9px;  
}

.stage-options .play {
    position: absolute;
    z-index: 101;
    width: 8%;
    top: -30%;
    left: 46.2%;
}

.container .defenders.subpage .defenders-content p.error {
    color: #fbff39;   
    text-align: center;
    font-size: 15px !important;
    font-weight: normal !important;
}

.container .defenders.subpage .defenders-content .congrats .diploma {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%; 
}

.container .defenders.subpage .defenders-content .congrats .diploma img {
    width: 100%;
    height: auto;   
    margin: 0;
}

.container .defenders.subpage .defenders-content .congrats .diploma .indent {
    padding: 35px;   
    background: #fff;
    position: relative;
}

.container .defenders.subpage .defenders-content .congrats .diploma .indent .name {
    position: absolute;
    left: 28%;
    top: 28%;
    font-size: 50px;
    color: #231F20;
    font-family: 'HelveticaNeue-CondensedBlack';
}

.container .defenders.subpage .defenders-content .congrats .diploma .indent .date {
    position: absolute;
    left: 28%;
    top: 47%;
    font-size: 13px;
}

.container .defenders.subpage .defenders-content .congrats .diploma .util {
    width: 48%; 
    margin: 15px auto 0 auto;   
}

.container .defenders.subpage .defenders-content .move {
    width: 80%;
    display: table; 
    margin: 20px auto 0 auto;  
}

.container .defenders.subpage .defenders-content .move ul li {
    padding: 0 12px;
    text-align: center;
}

.container .defenders.subpage .defenders-content .move ul li img {
    max-width: 75px;
}

.build {
   display: table;
   border-spacing: 5px;
   width: 100%; 
   margin: 0 -10px 0 -10px;
}

.build ul {
    display: table-row;
    width: 100%;   
}

.build ul li {
    width: 46%;
    display: table-cell;
    vertical-align: top;
    padding: 0 10px !important; 
}

.build ul li:nth-child(1), .build ul li:nth-child(2) {
    width: 27%;  
    text-align: center !important; 
}

.build ul li p {
    font-size: 13px !important;  
}

.build ul li:nth-child(3) p {
    font-size: 18px !important;
    color:#141657;
}

.container .build ul li .btn {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #fbff39 !important;  
    background: url(../images/button-bg2.png) right top no-repeat;
    background-size: cover;
    border-radius: 8px;
}

.container .build ul li .btn.active { 
    background: url(../images/button-active-bg.png) right top no-repeat;
    background-size: cover;
    color:#141657 !important;
}

.build ul li:nth-child(2), .build ul li:nth-child(3) {
    background: #fff !important;
    border-radius: 5px;
    padding-top: 10px;
    border: 2px solid #141657; 
}

.build ul li:nth-child(2) p {
    color:#141657;
}

.build ul li:nth-child(1) p:first-child {
    max-width: 100%;
    margin: 0 auto;
}

.build ul li .avatar {
  background: #fff !important;
  border-radius: 5px;
  border: 2px solid #141657; 
}

.build ul li .avatar img {
  width: 100%;
  height: auto;
  padding: 20px 10px;
}

.build ul li .build-elements p {
     border: 1px solid #141657;  
     padding: 0 !important;
     margin: 0 0 15px 0 !important;  
}

.build ul li .build-elements p a {
     display: block; 
     position: relative;
}

.build ul li .build-elements p a.active:after {
     content: '';
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     position: absolute;
     -webkit-box-shadow: inset 0px 1px 11px 0px rgba(50, 50, 50, 0.75);
     -moz-box-shadow:    inset 0px 1px 11px 0px rgba(50, 50, 50, 0.75);
     box-shadow:         inset 0px 1px 11px 0px rgba(50, 50, 50, 0.75);
}

.build ul li .build-elements p img {
     width: 100%;
     height: auto;
}

.build ul li .build-avatar {
  position: relative;  
  text-align: center; 
}

.build ul li .build-avatar img {
  width: 100%;
  height: auto;
  padding: 0;
}

.build ul li .build-avatar .personalised {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.save .btn {
    background: url(../images/button-bg.png) right top no-repeat !important;
    background-size: cover !important; 
    padding: 20px 30px !important; 
}

#get-started-frm .btn {
    margin: 0;   
}

.defenders-content ul.list {
    display: list;
    margin-left: 0;
    list-style:  disc;  
}

.defenders-content ol {
    margin: 0 0 15px -15px;
    list-style: none;
    counter-reset: item;
}
.defenders-content ol li {
    counter-increment: item;
    margin-bottom: 5px;
}
.defenders-content ol li:before {
    margin-right: 10px;
    content: counters(item, ".") ".";
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 44px;
    border-radius: 100%;
    text-align: center;
    display: inline-block;
  }
.defenders-content ul.list li, .defenders-content ol li {
    display: list-item; 
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    margin: 0;
    padding: 0 0 15px;
    text-shadow: none;
    text-align: left;  
}

.svga {
    display: inline-block;
    position: relative; 
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.svga svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
}

.svga svg polyline.laser {
    opacity: 0;
    transform-origin: 0 100%;
    transition: all 0.2s linear;
}

.svga svg polyline.laser.on {
    opacity: 1;
    transition: all 0.2s ease;
}

/*.fog {
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0;  
    transition: all 3s ease;
}

.fog.on {
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.7;  
}

.fog-gradient {  
    background: rgba(250, 250, 250, 0);
    background: -moz-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 51%, rgba(250, 250, 250, 0) 59%, rgba(250, 250, 250, 0.9) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, rgba(250, 250, 250, 0)), color-stop(51%, rgba(250, 250, 250, 0)), color-stop(59%, rgba(250, 250, 250, 0)), color-stop(100%, rgba(250, 250, 250, 0.9)));
    background: -webkit-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 51%, rgba(250, 250, 250, 0) 59%, rgba(250, 250, 250, 0.9) 100%);
    background: -o-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 51%, rgba(250, 250, 250, 0) 59%, rgba(250, 250, 250, 0.9) 100%);
    background: -ms-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 51%, rgba(250, 250, 250, 0) 59%, rgba(250, 250, 250, 0.9) 100%);
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 51%, rgba(250, 250, 250, 0) 59%, rgba(250, 250, 250, 0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b56fb5', GradientType=0 ); 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0;
    transition: all 3s ease;
}

.fog-gradient.on {
    opacity: 1;   
}   */

.laser-container {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

.pyro {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;  
    overflow: hidden; 
}

.pyro-item {
    transform: scale(0);
    transition: transform 0.2s ease-in;  
    position: absolute;
    width: 15%; 
}

.pyro-item.on {
    transform: scale(1.2) translate(10px, -10px);   
}

.pyro-item.out {
    transition: opacity 3s ease;
    opacity: 0;   
}

.lights {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;  
    overflow: hidden;
    opacity: 0;
}

.lights img {
    height: 98%;   
}

.lights.on {
    opacity: 1;   
}

@-webkit-keyframes lights {
  0%   { opacity: 0; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0; margin-right: 40px;}
}
@-moz-keyframes lights {
  0%   { opacity: 0; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0; margin-right: 40px;}
}
@-o-keyframes lights {
  0%   { opacity: 0; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0; margin-right: 40px;}
}
@keyframes lights {
  0%   { opacity: 0; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0; margin-right: 40px;}
}

.light-item {
    -webkit-animation: lights 3s infinite; /* Safari 4+ */
    -moz-animation:    lights 3s infinite; /* Fx 5+ */
    -o-animation:      lights 3s infinite; /* Opera 12+ */
    animation:         lights 3s both infinite; /* IE 10+, Fx 29+ */   
}

.light-item:nth-child(2) {
    -webkit-animation: lights 3s infinite; /* Safari 4+ */
    -moz-animation:    lights 3s infinite; /* Fx 5+ */
    -o-animation:      lights 3s infinite; /* Opera 12+ */
    animation:         lights 3s 2s both infinite; /* IE 10+, Fx 29+ */   
}

.light-item:nth-child(3) {
    -webkit-animation: lights 3s infinite; /* Safari 4+ */
    -moz-animation:    lights 3s infinite; /* Fx 5+ */
    -o-animation:      lights 3s infinite; /* Opera 12+ */
    animation:         lights 3s 4s both infinite; /* IE 10+, Fx 29+ */   
} 

.fogs {
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;  
    overflow: hidden;
    opacity: 1;
}

.fogs img {
    width: 120%; 
    height: auto;  
}

.fogs.on {
    opacity: 1;   
}  

@-webkit-keyframes fog {
  0%   { opacity: 0.3; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0.3; margin-right: 40px;}
}
@-moz-keyframes fog {
  0%   { opacity: 0.3; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0.3; margin-right: 40px;}
}
@-o-keyframes fog {
  0%   { opacity: 0.3; }
  50% { opacity: 1; margin-left: -20px;}
  100% {opacity: 0.3; margin-right: 40px;}
}
@keyframes fog {
  0%   { opacity: 0.3; }
  50% { opacity: 1; margin-left: -60px; width: 130%;}
  100% {opacity: 0.3; margin-right: 60px; }
}

.fog {
    -webkit-animation: fog 3s infinite; /* Safari 4+ */
    -moz-animation:    fog 3s infinite; /* Fx 5+ */
    -o-animation:      fog 3s infinite; /* Opera 12+ */
    animation:         fog 3s both infinite; /* IE 10+, Fx 29+ */   
}

.fog:nth-child(2) {
    -webkit-animation: fog 3s infinite; /* Safari 4+ */
    -moz-animation:    fog 3s infinite; /* Fx 5+ */
    -o-animation:      fog 3s infinite; /* Opera 12+ */
    animation:         fog 4s 1s both infinite; /* IE 10+, Fx 29+ */   
}

.fog:nth-child(3) {
    -webkit-animation: fog 3s infinite; /* Safari 4+ */
    -moz-animation:    fog 3s infinite; /* Fx 5+ */
    -o-animation:      fog 3s infinite; /* Opera 12+ */
    animation:         fog 5s 3s both infinite; /* IE 10+, Fx 29+ */   
}

.fog-container {
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 200px;  
    overflow: hidden;
    opacity: 0;
}

.fog-container.on {
    opacity: 1;   
}
/* Nav */
.defender-nav {
    background: linear-gradient(
        90deg,
        rgba(216, 11, 140, 1) 0%,
        rgba(242, 187, 12, 1) 50%,
        rgba(178, 210, 53, 1) 75%,
        rgba(69, 190, 254, 1) 100%
    );
    min-height: 75px;
    margin-bottom: 0;
    padding-left: 0;
}
.defender-nav li {
    display: inline-block;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.defender-nav li:first-child {
    padding-left: 40px;
}
.defender-nav li:last-child {
    padding-right: 0;
}
.defender-nav a, .defender-nav a:hover {
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    line-height: 72px;
    font-size: 13px;
}
@media only screen and (max-width: 990px) {
    .defender-nav li:first-child {
        padding-left: 10px;
    }

}
@media only screen and (max-width: 428px) {
    .defender-nav {
        height: auto;
        margin: 0 auto;
        padding-left: 0;
    }
    .defender-nav li {
        display: block;
        height: 100%;
        padding-left: 10px;
        padding-bottom: 5px;
        padding-top: 5px;
        padding-right: 0;
    }
    
    .defender-nav a, .defender-nav a:hover {
        line-height: inherit;
    }
    .defender-name {
        display: none;
    }
    .home-section p {
        padding-left: 20px;
        padding-right: 20px;
    }
    .container .defenders-header .status-bar ul li:first-child {
        font-size: 10px;
    }
    .meet-section-container {
        background-size: cover;
        height: 150px !important;
    }
}

/* Home */
.home-section-container {
    background-image: url("../images/Environmental-Defenders-Background.jpg");
    background-position: top;
    background-repeat: no-repeat;
}
.home-section {
    text-align: center;
}
@keyframes name-animation {
    0% {color: rgba(255, 255, 255, 0);}
    10% {color: rgba(255, 255, 255, 1);}
    90% {color: rgba(255, 255, 255, 1);}
    100% {color: rgba(255, 255, 255, 0);}
  }
  
  /* The element to apply the animation to */
.defender-name {
    color: rgba(255, 255, 255, 0);
    font-family: 'Changa', sans-serif;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    bottom: 13px;
    animation-name: name-animation;
    animation-duration: 12s;
}
.name-june {
    left: 111px;
}
.name-buzz {
    left: 389px;
}
.name-leia {
    left: 555px;
}
.name-ricardo {
    left: 745px;
}
.home-section h2 {
    padding-top: 80px;
    padding-bottom: 0;
}
.home-section p {
    font-size: 24px;
}
.home-section .btn {
    background-color: #FFFFFF;
    border-radius: 35px;
    color: #2E3F47;
    text-transform: uppercase;
    font-size: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
.home-section a:hover {
    color: #2E3F47;
    text-decoration: none;
}
.quiz-section {
    height: 372px;
    background-color: rgba(242,187,12,0.75);
}
.quiz-section h2 {
    color: #EE2F4E;
}
.quiz-section p {
    color: #2E3F47;
}
.quiz-section .btn {
    border: 6px solid #EE2F4E;
    margin-top: 52px;
    width: 296px;
}
.super-section {
    min-height: 372px;
    background-color: rgba(216,11,140,0.75);
}
.super-section h2 {
    color: #B2D235;
}
.super-section p {
    color: #FFFFFF;
}
.super-section .btn {
    border: 6px solid #B2D235;
    margin-top: 52px;
    width: 296px;
}
.super-section .special-code {
    text-align: center;
    padding-bottom: 30px;
}
.super-section .special-code p {
    font-weight: bold;
    font-size: 24px;
}
.super-section #frm-code #code {
    height: 50px;
    font-size: 18px;
    margin-top: 20px;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}
.super-section #js-submit-code {
    background-color: #FFFFFF;
    border-radius: 35px;
    border: 6px solid #B2D235;
    color: #2E3F47;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Changa', sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
}
.teacher-section {
    min-height: 372px;
    background-color: rgba(46,63,71,0.75);
}
.teacher-section h2 {
    color: #45BEFE;
}
.teacher-section p {
    color: #FFFFFF;
}
.teacher-section .btn {
    border: 6px solid #45BEFE;
    margin-top: 52px;
    width: 463px;
}

/* Meet The Defenders AKA Quiz */
.read-aloud {
    position: relative;
    margin-top: 0;
}
.read-aloud .play-button, .oops-button, .right-button {
    position: absolute;
    display: block;
    height: 50px;
    width: 50px;
    top: 0;
    right: 0;
    background-image: url('../images/play.png');
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}
.quiz .result {
    position: relative;
}
.oops-button, .right-button {
    position: absolute;
    display: inline-block;
    left: -48px;
    top: -7px;
}
.go-to-level-one-button, .submit-audio-button, .submit-code-audio-button  {
    position: relative;
    left: 0;
    top: 18px;
}
.submit-code-audio-button {
    top: 37px;
}
.submit-question-button, .next-question-button {
    top: -22px !important;
    left: -46px;
}
.submit-final-button, .next-final-button {
    top: 6px !important;
    left: -46px;
}
.already-button {
    left: 100px;
    top: -14px !important;
}
.readyforfinal-button {
    position: absolute;
    top: 33px !important;
    left: -49px;
}
.askteacher-button {
    position: relative !important;
    top: 57px !important;
    left: 75px;
}
.personalize-button {
    top: 49px !important;
    left: 120px;
}
.required-button {
    top: -10px !important;
    left: -48px;
}
.congrats-button {
    left: 10px !important;
}
.read-aloud p {
    text-align: right;
    padding-right: 50px;
    padding-top: 14px;
}
.meet-section-container {
    background-image: url("../images/Environmental-Defenders-Banner.jpg");
    background-position: top;
    background-repeat: no-repeat;
    height: 354px;
}
.get-started {
    background-color: #D80B8C;
}
#level1 {
    background-color: #EE2F4E;
}
#level2 {
    background-color: #F36C21;
}
#level3 {
    background-color: #F2BB0C;
}
#level4 {
    background-color: #B2D235;
}
#level5 {
    background-color: #44D7F2;
}
#level6 {
    background-color: #45BEFE;
}
.status-bar li.selected {
    background-color: #FFFFFF !important;
    color: #777777 !important;
}
.status-bar li.selected a {
    color: #777777 !important;
}
.defenders-background {
    background: url(../images/Environmental-Defenders-Background-Yellow.jpg) left top no-repeat;
    background-color: #c19e3d;
    background-size: cover;
}
.defenders-content h2 {
    text-transform: none;
    color: #D80B8C;
    padding-top: 20px;
    text-align: left;
    margin-top: 50px;
}
.defenders-content p {
    text-align: left;
    color: #2E3F47;
    font-size: 24px;
}
.defenders-content .btn, .footer-container .btn , .games-subpage .btn, .stage-start .game-home-btn {
    background-color: #FFFFFF;
    border-radius: 35px;
    border: 6px solid #D80B8C;
    color: #2E3F47;
    text-transform: uppercase;
    font-size: 24px;
    font-family: 'Changa', sans-serif;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 30px;
}
#level-quiz-frm .btn-submit, #level-quiz-frm .btn-next {
    margin-top: 0;
    margin-bottom: 30px;
}
.defenders-content .btn:hover, .footer-container .btn:hover, .games-subpage .btn:hover, .stage-start .game-home-btn:hover {
    color: #2E3F47;
    text-decoration: none;
}
.q-container p span {
    color: #D80B8C !important;
}
.video-title {
    font-weight: bold;
}
.blank-word {
    width: 50px;
    display: inline-block;
    border-bottom: 1px solid #2E3F47;
}
#footer-obj hr, hr.final {
    background-color: #D80B8C;
    border: none;
    height: 1px;
}
.footer-container {
    text-align: center;
    padding-bottom: 30px;
}
.footer-container .special-code p {
    font-weight: bold;
    font-size: 24px;
}
.footer-container #frm-code #code {
    height: 50px;
    font-size: 18px;
    margin-top: 20px;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}
.defender-description .title {
    font-family: 'Changa', sans-serif;
    color: #2E3F47;
}
.defender-description .title span {
    color: #D80B8C;
    font-size: 44px;
    display: block;
}
.favourite {
    padding-top: 60px;
}
.bold {
    font-weight: bold !important;
}
.text-center {
    text-align: center !important;
}
.defenders-content h3 {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    color: #2E3F47;
    padding-top: 20px;
    padding-bottom: 20px;
}
#tf-one, #tf-two {
    padding-bottom: 20px;
}
.result {
    color: #D80B8C;
    font-size: 24px;
    font-family: 'Changa', sans-serif;
}
#final-question-page h4 {
    color: #D80B8C;
    font-size: 44px;
    font-family: 'Changa', sans-serif;
    text-align: center;
}
hr.final {
    margin-top: 20px;
    margin-bottom: 20px;
}
.diploma {
    padding-top: 20px;
}
.diploma img {
    margin: 0 auto;
}
@media only screen and (max-width: 428px) {
    #get-started-frm .btn {
        margin-top: 20px;
    }
    a.ready-for-final-quiz, #js-special-prize, .diploma a {
        font-size: 17px !important;
    }
    .quiz-content {
        padding: 20px;
    }
    .quiz-content h2, .quiz h2 {
        padding-top: 0;
    }
}

/* Games */
.games-subpage {
    background: url(../images/Environmental-Defenders-Background-Magenta.jpg) left top no-repeat;
    background-color: #d713b2;
    background-size: cover;
}
.games-subpage h2 {
    text-align: center;
    color: #45BEFE;
    font-family: 'Changa', sans-serif;
    font-size: 44px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 20px;
}
p.games-headline {
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    padding-top: 30px;
    padding-bottom: 30px;
}
.games-row {
    padding-bottom: 0;
}
.game-container {
    background-color: #FFFFFF;
    text-align: center;
    color: #2E3F47;
    height: 300px;
    border: 6px solid #B2D235;
    border-radius: 20px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    margin-bottom: 30px;
}
.game-container p {
    text-align: center;
    font-family: 'Changa', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
}
.game-container p.game-name {
    padding: 15px;
    line-height: 1.1;
}
.game-container p.game-image {
    padding-bottom: 0;
    position: absolute;
    bottom: 0;
    background-color: #B2D235;
}
.game-container p.game-image img {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.game-container a, .game-container a:hover {
    color: #2E3F47;
    text-decoration: none;
    cursor: pointer;
}
/* Classroom Activites */
.classroom-activities {
    background: url(../images/Environmental-Defenders-Background-Blue.jpg) left top no-repeat;
    background-color: #663f82;
    background-size: cover;
}
.classroom-activities h2 {
    color: #45BEFE;
    padding-top: 30px;
}
.classroom-activities p {
    color: #FFFFFF;
}
.classroom-activities .classroom-disclaimer {
    padding-top: 12px;
}
.classroom-activities .download-description {
    text-align: center;
}
.classroom-activities .download-description p a {
    text-decoration: underline;
}
.classroom-activities .lesson-plans {
    color: #45BEFE;
    font-family: 'Changa', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.classroom-activities p.grade-headline {
    text-align: center;
    text-transform: none;
    font-family: 'Changa', sans-serif;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 6px;
    padding-bottom: 40px;
    padding-top: 40px;
}
.classroom-activities .resource-row, .classroom-activities .activity-row {
    padding-top: 20px;
    padding-bottom: 20px;
}
.resource-container , .activity-container {
    background-color: #FFFFFF;
    text-align: center;
    color: #2E3F47;
    height: 340px;
    border: 6px solid #B2D235;
    border-radius: 20px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.resource-container p, .activity-container p {
    text-align: center;
    font-family: 'Changa', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: none;
    color: #2E3F47;
}
.resource-container p.resource-name, .activity-container p.activity-name {
    padding: 15px;
    line-height: 1.1;
}
.resource-container p.resource-image, .activity-container p.activity-image {
    padding-bottom: 0;
    position: absolute;
    bottom: 0;
}
.resource-container a, .resource-container a:hover, .activity-container a, .activity-container a:hover {
    color: #2E3F47;
    text-decoration: none;
    cursor: pointer;
}
p.activity-headline {
    color: #45BEFE;
    font-family: 'Changa', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.classroom-activities p.poster-info {
    text-align: center;
    padding-top: 0;
    padding-bottom: 20px;
}
.classroom-activities p.poster-info a, .classroom-activities p.poster-info a:hover {
    color: #F2BB0C;
    text-decoration: none;
}
.resource-image {
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
}
@media only screen and (max-width: 428px) {
    .resource-container, .activity-container {
        height: auto;
        min-height: 235px;
        margin-bottom: 20px;
    }
}
/* Games */
.mixer-page p {
    color: #FFFFFF;
}
.games-content p {
    color: #FFFFFF;
}
.game-build p {
    color: #FFFFFF;
}
.game-earthdefense p {
    color: #FFFFFF;
}
.game-greenflight p {
    color: #FFFFFF;
}


/* Pledge */
.pledge-container {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
}
.pledge-container h2 {
    color: #d713b2;
    padding-top: 20px;
}
.pledge-container p {
    text-align: left;
    color: #000000;
    font-size: 24px;
}
.pledge-info-header {
    font-weight: bold;
    display: block;
}
.pledge-information {
    padding-top: 30px;
}
.pledge-information p {
    font-size: 24px;
    padding-bottom: 20px;
}
.pledge-btn {
    background-color: #FFFFFF;
    border-radius: 35px;
    border: 6px solid #d713b2;
    color: #2E3F47;
    text-transform: uppercase;
    font-size: 30px;
    font-family: 'Changa', sans-serif;
    padding-left: 30px;
    padding-right: 30px;
}

@media only screen and (max-width: 991px) {
    .defenders-header img {width: 100%;height: auto;}
    .defenders-header .hdr img {width:50%; max-width: 300px;}
    .btn {width: 45%; font-size: 30px; margin: 0 10px;}
    .btn span {font-size: 13px;}
    .container h2 {font-size: 40px;}
    .container h2.small {font-size: 25px;}
    #defenders-silhouettes-right {right: 1%}
    #defenders-silhouettes-left {left: 1%}
    #defenders-silhouettes-right p, #defenders-silhouettes-left p {font-size: 32px;}
    .container .defenders-header .status-bar ul li {font-size: 11px;}
    .container .defenders-header .status-bar ul li a {font-size: 11px; padding: 5px 3px 5px 3px; }
    .container .defenders-header .status-bar ul li table td:first-child {font-size: 15px; }
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .name {font-size: 35px; left: 29%}
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .date {font-size: 11px; left: 29%}
    .container .btn {width: 90%;}
}

@media only screen and (max-width: 770px) {
    .defenders-header h1 {top: 15px; left: 15px; width: 15%; max-width: 120px;}
    .container .defenders-header .status-bar {width: 100%;}
    .container .defenders-header .status-bar ul li {height: 55px;}
    .container .defenders-header .status-bar ul li:after { 
        border-top: 28px solid transparent !important;
        border-bottom: 28px solid transparent !important;
        border-left: 10px solid #71BFDB;
    }
    .container .defenders-header .status-bar ul li:before { 
        display: none;
    }
    .container .defenders-header .status-bar.first {margin: 0; padding-bottom: 0;}    
    .container .defenders-header .status-bar.second {margin: 0; padding-top: 5px;} 
    .container .defenders-header .status-bar ul li {font-size: 13px; }    
    .container .defenders-header .status-bar ul li a {font-size: 13px; }
    .container .defenders-header .status-bar ul li table td:first-child {font-size: 18px;}
    .stage-options .options ul li a, .stage-options .options ul li label {font-size: 2vw;}
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .name {font-size: 25px; left: 28.8%; top: 30% }
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .date {left: 28.8%; }
}

@media only screen and (max-width: 650px) {
	.defenders-header h1 {top: 10px; left: 10px;}
    .btn span {display: none;}
    .btn span.mobile-txt {display: block !important;  font-size: 30px}
    .container h2 {font-size: 32px;}
    .container h3 {font-size: 16px;}
    .container p {font-size: 12px;}
    .container .btn {width: 90%; font-size: 23px}
    .defenders-content ul li, .defenders-content ol li {font-size: 12px; line-height: 1.1;}
    .defenders-content .hdr {width: 100%; }
    .defenders-content .hdr img {margin-top: -12%;}
    .defenders.subpage .defenders-content {max-width: 100%; background: none;}
    .container .defenders.subpage .defenders-content p {font-size: 12px}
    .container label {font-size: 12px}
    [type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before {top: 0}
    [type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {top: 0} 
    .container .btn.medium {font-size: 12px;}
    .container .btn.yellow {font-size: 16px}
    #defenders-silhouettes-right, #defenders-silhouettes-left {display: none}
    .defenders-content-cols3 ul li.contrast {background: none;}  
    .indent {padding: 0;}
    .container .defenders.subpage .defenders-content .quiz {padding: 0;}
    .container .defenders.subpage .defenders-content .quiz .btn {max-width: 180px;}
    .container .defenders.subpage .defenders-content .quiz .false, .container .defenders.subpage .defenders-content .quiz .true {font-size: 15px;}
    .container .defenders.subpage .defenders-content .status p.title {font-size: 18px;}
    .container .defenders.subpage .defenders-content .status p {font-size: 16px;}
    .container .btn.green {font-size: 15px;}
    .container .defenders.subpage .defenders-content .congrats h4 {font-size: 15px;}   
    .download {margin: 0 3% 15px 3%;}  
    .download ul li span, .download ul li a span, .download ul li a:hover span {font-size: 18px;}
    .defenders-header h2 {padding: 20px 10px;}
    .stage-start a {font-size: 20px;}
    .stage-options .options ul li a, .stage-options .options ul li label {font-size: 3vw;} 
    
    .container .defenders.subpage .defenders-content .congrats .diploma {width: 92%; left: 4%;}
    .container .defenders.subpage .defenders-content .congrats .diploma .indent {padding: 20px;}
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .name {font-size: 22px; left: 27%; top: 31% }
    .container .defenders.subpage .defenders-content .congrats .diploma .indent .date {left: 27%; }
    
    .games a, .games-half a, .games a:hover, .games-half a:hover {font-size: 20px;}
    .games-half .game-name {min-height: 60px;}
    
    .resource {padding: 0;}
}

@media only screen and (max-width: 550px) {
     .btn {font-size: 30px; margin: 0 10px; width: 45%;}
     .defenders-content .hdr .mobile {display: block !important;}
     .defenders-content .hdr .desktop {display: none !important;}
     .stage-options div {width: 48%;}
     .container .defenders.subpage .defenders-content .congrats .diploma .indent .name {left: 27.5%;}
     .container .defenders.subpage .defenders-content .congrats .diploma .indent .date {left: 27.5%; }
     .container .defenders .special-code {margin: 0 15px 15px 15px;}
     .container .defenders.subpage .defenders-content .congrats .diploma .util {width: 70%;}
     .container .defenders.subpage .download-description .download-blurb {margin-right: 68%;} 
     .stage-options .play {top: -11%;}
}

@media only screen and (max-width: 428px) {
     .defenders-header h1 {top: 5px; left: 5px;}
     .container .defenders.subpage .footer table {margin: 0 auto;}
     .container .defenders.subpage .footer td, .container .defenders .footer td {display: block; padding-bottom: 10px;}
     .container .defenders.subpage table td {padding: 0 2px;}
     .container .defenders.subpage input {min-width: 1px; width: 100%;}
     .container .defenders-header .status-bar ul li {font-size: 11px; }
     .container .defenders-header .status-bar ul li a {font-size: 8px; }
     .container .defenders-header .status-bar ul li table td:first-child {font-size: 15px;}
     .container .defenders.subpage .download-description .download-blurb {margin-right: 60%;} 
     .defenders-header h2 {padding: 45px 10px 10px 10px;} 
     .container .defenders.subpage .defenders-content .congrats .diploma .indent .name {font-size: 18px; left: 28.5%; top: 31% }
     .container .defenders.subpage .defenders-content .congrats .diploma .indent .date {font-size: 9px; left: 28.5%;}
     .games a, .games-half a, .games a:hover, .games-half a:hover {font-size: 18px;}
     .container .btn span.mobile-txt {font-size: 20px;}
     .buttons .btn {font-size: 20px;}
     .stage-options .options ul li a, .stage-options .options ul li label {font-size: 5vw;} 
     .build ul li p {font-size: 9px !important; padding: 0 0 5px 0 !important; }
     .build ul li .btn {margin: 0 !important;}
     .build ul li:nth-child(2) p {font-size: 9px !important;}
}

@media only screen and (max-width: 370px) {
    .container .defenders.subpage .download-description .download-blurb {margin-right: 55%;} 
}


.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/* Games */
.game-bg {
    background: url(../images/Environmental-Defenders-Background-Blue.jpg) left top no-repeat !important;
    background-color: #663f82;
    background-size: cover;
}

#Message-Container {
    visibility: hidden;
    color: white;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}
#Message-Container #message {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}
.message-container {
    position: absolute;
    top: 35%; 
    right: 50%;
    transform: translate(50%,-50%);
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    text-align: center;
    width: 35%;
}
.message-container p {
    text-align: center;
}

.container p.instructions {
font-size: 14px !important;
text-align: center;
margin: 0 30px;
padding-right: 0 !important;
padding-bottom: 15px !important;
}
.instructions-mobile {
    display: none;
}
.mobile-controls {
    display: none;
}
@media only screen and (max-width: 844px) {
    .instructions-mobile {
        display: block;
      }
      .instructions-desktop {
        display: none;
      }
      .mobile-controls {
        display: block;
        position: absolute;
        bottom: 20px;
        right: 20px;
        touch-action: manipulation;
      }
      .mobile-controls .arrow {
        width: 75px;
        height: 75px;
        position: absolute;
      }
      .mobile-controls .arrow-left {
        right: 95px;
        bottom: 48px;
      }
      .mobile-controls .arrow-right {
        right: -21px;
        bottom: 48px;
      }
      .mobile-controls .arrow-up {
        bottom: 95px;
        right: 37px;
      }
      .mobile-controls .arrow-down {
        bottom: 0;
        right: 37px;
      }
}