/***************************************
 * FONTS
***************************************/

@font-face { 
    font-family: "astound"; src: url("../fonts/astound.otf");
}

.astound {
    font-family: "astound" !important;
    font-size: 9vw;
    color: #92278f;
}


/************************************
 * COMMON
************************************/

:root {
    --menu-scaler: 1.0;
}


@media (min-aspect-ratio : 65/100) and (orientation : portrait) {
    :root {
        --menu-scaler: 0.7;
    }
}


html, body {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow: hidden !important;
	width: 100vw;
    height: 100%;
    max-height: 100%;
    min-width: 100%;
	margin: 0;
	padding: 0;
    background-color: darkgrey;
	background-size: 100% 100%;
}


body > img {
	opacity: 0;
	width: 1px;
	height: 2px;
}


html.error, 
html.error body {
	overflow: visible !important;
	width: 100%;
	height: auto;
	min-height: 100%;
	max-height: none;
}


button {
	background: transparent;
	border: 0;
	outline: transparent;
	padding: 0;
}


.absolute {
	display: block;
	position: absolute;
}


.icon,
.paddedHeight {
	display: block;
	height: auto;
}


.icon::after,
.paddedHeight::after {
	display: block;
	content: "";
}


.button {
	cursor: pointer;
	z-index: 100;
}


.noEvents {
	pointer-events: none;
}


.absolute-fill {
    position: absolute;
    height: 100%;
    width: 100%;
	/*top: 0;
	left: 0;
	right: 0;*/
}


.hidden {
	display: none !important;
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

    touch-action: none;
}


/***************************************
 * UI
***************************************/

#uiContainer, #legals, #background, #topBanner, #prompt, #instructions, #countdown, #spikes, #wellDone,
#armSelect, #topStrands, #venomButton, #spideyButton, #arm, .explosion, .web, .dart, #origin, #base, 
#time, #timeBG, #timeIcon, #timeText, #score, #starburst, #scoreBG, #scoreText, #photoButton,
#endScreen, #vidPreview, #endScreenItems, #endGallery, #product, #prevButton, #nextButton,
#snapshotContainer, #snapshot, #endScreenButtons, #playAgainButton, #learnMoreButton,
#previewHolder, #previewHolderCloseButton
{
    z-index: 5;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}


#uiContainer, #armSelect, #endScreen {
    height: 100%;
    width: 100%;
}

#legals {
    z-index: 3000;
    width: 100vw;
    height: 15.676vw;
    bottom: 0vw;
    left: 0%;
    background-image: url('../images/legals.jpg');
    background-size: contain;
}

#background {
    width: 100%;
    height: 100%;
    background-image: url('../images/background.jpg');
    background-size: cover;
}

#topBanner {
    z-index: 10;
    width: 100vw;
    height: 30vw;
    top: 0vw;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/top_banner.png');
    background-size: contain;
}


#prompt {
    z-index: 4;
    width: 90vw;
    height: 35vw;
    top: 40vw;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/place.png');
    background-size: contain;
}

#instructions {
    width: 90vw;
    height: 100vw;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/ins1.png');
    background-size: contain;
    opacity: 0;
}

#countdown {
    width: 25%;
    height: 25%;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/3.png');
    background-size: contain;
    opacity: 0;
}






#spikes {
    z-index: 4;
    width: 100%;
    height: 100%;
    transform: scale(3);
    background-image: url('../images/spikes.png');
    background-size: cover;
    opacity: 0;
    transition: none;
}

#wellDone {
    z-index: 4;
    width: 80vw;
    height: 13vw;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/well_done.png');
    background-size: contain;
    opacity: 0;
    transition: none;
}



#topStrands {
    width: 100vw;
    height: 30.53278vw;
    top: 0vw;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/top_goo.png');
    background-size: contain;
}

#venomButton {
    width: 100vw;
    height: 40%;
    top: 4%;
    left: 46%;
    transform: translateX(-50%);
    background-image: url('../images/venom_button.png');
    background-size: contain;
    pointer-events: all;
}

#spideyButton {
    width: 100vw;
    height: 61%;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/spider_button.png');
    background-size: contain;
    pointer-events: all;
}



#arm {
    z-index: 6;
    left: 50%;
    bottom: -0vw;
    width: 45vw;
    height: 50vw;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 75%;
    background-image: url('../images/web_arm.png');
    background-size: contain;
    transition: none;
}


.explosion {
    z-index: 10;
    left: 50%;
    top: 50%;
    width: 40vw;
    height: 40vw;
    transform: translate(-50%, -45%);
    background-image: url('../images/explosion_sheet2.png');
    background-size: 3200% 100%;
    background-position: 0% 0%;
    transition: none;
}


.web {
    z-index: 6;
    left: 50%;
    bottom: 50%;
    width: 15vw;
    height: 15vw;
    transform: translate(-50%, -50%);
    background-image: url('../images/web.png');
    background-size: contain;
    transition: none;
    opacity: 0;
}

.dart {
    z-index: 5;
    left: 50%;
    bottom: 50%;
    width: 4.5vw;
    height: 20vw;
    transform: translate(-50%, -50%);
    background-image: url('../images/dart.png');
    background-size: contain;
    transition: none;
    opacity: 0;
}

#origin {
    width: 5vw;
    height: 5vw;
    top: 25%;
    left: 45%;
    transform: translate(-50%, -50%);
    /*background-color: green;*/
    transition: none;
}

#base {
    width: 5vw;
    height: 5vw;
    bottom: 25%;
    left: 45%;
    transform: translate(-50%, -50%);
    /*background-color: green;*/
    transition: none;
}




#time {
    z-index: 1000;
    width: 30vw;
    height: 10vw;
    left: 5vw;
    top: 25vw;
}

#timeBG {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    border-radius: 7vw;
}

#timeIcon {
    width: 30%;
    height: 75%;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    background-image: url('../images/clock.png');
    background-size: contain;
}

#timeText {
    top: 38%;
    left: 62%;
    transform: translate(-50%, -50%);
    color: white;
}




#score {
    z-index: 1000;
    width: 20vw;
    height: 20vw;
    top: 86.5%;
    left: 80%;
    transform: translate(-50%, -100%) scale(1.5);
    transition: none;
}

#scoreBG {
    width: 100%;
    height: 100%;
    background-image: url('../images/score_bg.png');
    background-size: contain;
}

#starburst {
    z-index: 4;
    width: 250%;
    height: 250%;
    background-image: url('../images/starburst.png');
    background-size: contain;
    opacity: 0;
    transition: none;
}

#scoreText {
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-55%, -65%);
    text-align: center;
}



#photoButton {
    width: 44vw;
    height: 20vw;
    bottom: 17vw;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/photoButton.png');
    background-size: contain;
    opacity: 0;
}




#trailerContainer {
    position: absolute;
    width: 96%;
    aspect-ratio: 1.78;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%);
}


#vidPreview {
    width: 95vw;
    height: 32%;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/vid.jpg');
    background-size: contain;
    pointer-events: all;
}

#videoCloseButton {
    position: absolute;
    z-index: 1001;
    width: 10%;
    height: 15%;
    top: -7%;
    right: -5.5%;
    background-image: url('../images/close_button.png');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: auto;
}

#endScreenItems {
    width: 100vw;
    height: 28%;
    bottom: 24.5%;
    left: 50%;
    transform: translateX(-50%);
}

#endGallery {
    width: 52vw;
    height: 100%;
    top: 0%;
    left: 2vw;
}

#product {
    width: 60%;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/spidey.png');
    background-size: contain;
}

#prevButton, #nextButton {
    width: 25%;
    height: 30%;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    background-image: url('../images/prev_button.png');
    background-size: contain;
    pointer-events: all;
}

#nextButton {
    left: auto;
    right: 0;
    background-image: url('../images/next_button.png');
}


#endScreenButtons {
    width: 100vw;
    height: 19vw;
    left: 50%;
    bottom: 16vw;
    transform: translateX(-50%);
}

#playAgainButton, #learnMoreButton {
    width: 40%;
    height: 90%;
    top: 50%;
    left: 28%;
    transform: translate(-50%, -50%);
    background-image: url('../images/play_again.png');
    background-size: contain;
    pointer-events: all;
}

#learnMoreButton {
    left: 72%;
    background-image: url('../images/learn_more.png');
}







#previewHolder {
    z-index: 10000;
    width: 100%;
    height: 100%;
}

#previewHolderCloseButton {
    z-index: 5000;
    width: 7vw;
    height: 7vw;
    top: 16vw;
    right: 14vw;
    background-image: url('../images/close.png');
    background-size: contain;
    pointer-events: all;
}

#snapshotContainer {
    z-index: 100;
    width: 100%;
    height: 100%;
}

#snapshot {
    z-index: 100;
    width: 34vw;
    height: 90%;
    top: 50%;
    left: 55%;
    transform: translateY(-50%) rotate(5deg);
    border-radius: 10px;
    border: 1vmin solid white;
    background-size: cover;
    /*background-position-y: top;*/
    pointer-events: all;
}

#downloadButton {
    position: absolute;
    width: 12vw;
    height: 12vw;
    top: -10vw;
    right: -10vw;
    pointer-events: auto;
}











#loadFooter, #footer {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    transition: all 0.3s ease-in-out;

    width: 100vw;
    height: 29.61vw;
    bottom: 0vw;
    background-image: url('../images/footer.png');
    background-size: contain;
    left: 50%;
    transform: translateX( -50% );
}

#loadHeader {
    z-index: 10;
    position: absolute;
    pointer-events: none;

    width: 100vw;
    height: 31vw;
    top: 0;

    background: url('../images/load_header.png') center center no-repeat;
    background-size: contain;
    left: 50%;
    transform: translateX( -50% );
}






.htmlVideo {
    position: absolute;
    z-index: 1000;
    /*width: 100vw;
    height: 56.1vw;*/
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s ease-in-out;
    opacity: 1;
}







.recorder-container {
    position: absolute !important;
    width: 36vw !important;
    height: 16vw !important;
    bottom: 19vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
}

#actionButton {
    position: absolute;
    height: 11%;
    width: 60%;
    left: -14%;
    top: 95%;
    background-color: red !important;
    /*color: white !important;
    font-size: 3vmin !important;*/
    background: url('../images/share.png') center center no-repeat !important;
    background-size: contain !important;
}

/*#closePreviewButton {
    display: none !important;
    pointer-events: none !important;
}*/









.joystick-container {
    pointer-events: none;
    opacity: 0;
}

.joystick-container.visible {
    opacity: 1;
}

.joystick {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.joystick.position {
    border-radius: 10000px;
    pointer-events: all;
    left: 50%;
    top: 80%;
    width: 10vmin;
    height: 10vmin;
    background-color: white;
    z-index: 10;
}

.joystick.origin {
    left: 50%;
    top: 80%;
    width: 30vmin;
    height: 30vmin;
    /*border-radius: 10000px;
    border: 2vmin solid white;*/
    background-image: url('../images/joystick_background.png');
    background-size: contain;
}











#desktopError {
    background-color: #eb1f20;
	z-index: 5000 !important;
    display: none;
    background-image: url('../images/desk_bg.jpg');
    background-size: cover;
    background-position-y: bottom;
}

#desktopErrorText {
    position: relative;
    left: 0;
    width: 100%;
    font-family: 'Varela-Round', sans-serif;
    font-size: 18pt;
    color: #ffffff;
}

#desktopHeader {
    z-index: -1;
    position: absolute;
    width: 50vw;
    height: 29%;
    top: 1vw;
    left: 50%;
    transform: translateX(-59%);
    background-repeat: no-repeat;
    background-position: center center;
    background: url('../images/desk_head.png') center center no-repeat;
    background-size: contain;
}

#desktopFooterL {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;

    width: 23vw;
    height: 2vw;
    bottom: 1vw;
    left: 1vw;
    background-image: url('../images/desk_legal.png');
    background-size: contain;
}

#desktopFooterR {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;

    width: 3.5vw;
    height: 3.5vw;
    bottom: 1vw;
    right: 1vw;
    background-image: url('../images/desk_logo.png');
    background-size: contain;
}

#desktopGooL {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;

    width: 15vw;
    height: 16.51624549vw;
    top: 0vw;
    left: 0;
    background-image: url('../images/desk_goo_l.png');
    background-size: contain;
}

#desktopGooR {
    z-index: 11;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;

    width: 34vw;
    height: 9.57675112vw;
    top: 0;
    right: 0;
    background-image: url('../images/desk_goo_r.png');
    background-size: contain;
}





@media (orientation: landscape ) and ( max-width: 1024px ) { /* ipad max is 1024 */
	#deviceOrientation {
		display: block;
    }
}



#promptRotateDevice {
	z-index: 11;
    position: absolute;
    top: 13vw;
    width: 75vw;
    height: 55vh;
    transform: translate(15%);
	background: url('../images/prompt_turn_device.png') center center no-repeat;
	background-size: contain;
}




.fadeOut { animation: fadeOut 0.3s linear forwards; }
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}


.fadeIn { animation: fadeIn 0.3s linear forwards; }
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}