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

@font-face { 
    font-family: "source"; src: url("../fonts/sourcesans.ttf");
}

.source {
    font-family: "source" !important;
    font-size: 7vw;
    font-style: normal;
}

.tahoma {
    font-family: Tahoma;
    font-size: 7vw;
    font-style: normal;
}


/************************************
 * 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: #FFD900;
	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
***************************************/

#disclaimerText, 
#uiContainer, #scaleSlider, #threeSixtyIcon, #guide, #guideTitle, #guideStep, #instructions, #handIcon, #infoPopup,
#closeButton, #findOutMore, #infoQuoteButton, #bottomMenu, #menuBackground, #compTab, #thirdTab, #recenterButton,
#bottomMenuLogo, #tapPlace, #bottomMenuQuote, #getQuotePopup, #quoteCloseButton
{
    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 {
    height: 100%;
    width: 100%;
}


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




input[type=range] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15vw;
    width: 15%;
    border: none;
    background: transparent;
    background-image: url('../images/slider_thumb.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform: rotate(270deg);
    margin-top: -1.5vw;
}

input[type=range]::-webkit-slider-runnable-track {
    /*width: 100%;*/
    left: 30%;
    height: 12vw;
    background-image: url('../images/slider_bar2.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0.0px solid #010101;
    outline: 0 none !important;
    padding-left: 5vw;
    padding-right: 13vw;
}


#scaleSlider {
    z-index: 1000;
    right: 8vw;
    bottom: 70%;
    width: 75vw;
    height: 12vw;
    transform-origin: right;
    transform: translateY(-0%) rotate(270deg);
    pointer-events: auto;
}




#guide {
    z-index: 1001;
    width: 80vw;
    height: 20vw;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

#guideTitle {
    z-index: 6;
    width: 50%;
    height: 35%;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/how_works.png');
    background-size: contain;

}

#guideStep {
    width: 80vw;
    height: 20vw;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/guide1.png');
    background-size: contain;
}



#instructions {
    z-index: 1000;
    width: 80vw;
    height: 20vw;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/ins2.png');
    background-size: contain;
    opacity: 0;
}


#handIcon {
    z-index: 10000;
    width: 18vw;
    height: 18vw;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/swipe_icon.png');
    background-size: contain;
    opacity: 0;
    transition: none;
}


#infoPopup {
    width: 80vw;
    height: 73vw;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/comp4.png');
    background-size: contain;
    background-position-y: top;
}


#closeButton {
    z-index: 100;
    width: 12%;
    height: 13%;
    top: -1.5%;
    right: 0%;
    /*background-color: blue;
    opacity: 0.5;*/
    pointer-events: all;
}


#findOutMore {
    display: none;
    width: 60%;
    height: 10%;
    bottom: 49%;
    left: 48%;
    transform: translateX(-50%);
    /*background-color: red;
    opacity: 0.5;*/
    pointer-events: all;
    transition: none;
}


#infoQuoteButton {
    width: 47%;
    height: 15%;
    bottom: 34%;
    left: 47%;
    transform: translateX(-50%);
    /*background-color: red;
    opacity: 0.5;*/
    pointer-events: all;
    transition: none;
}




#bottomMenu {
    width: 100vw;
    height: 20vw;
    bottom: 0;
    left: 0;
}


#menuBackground {
    width: 100%;
    height: 100%;
    background-color: #ffd802;
}


#compTab, #thirdTab {
    z-index: -1;
    width: 50%;
    height: 21vw;
    top: -14vw;
    left: 0.5%;
    background-image: url('../images/comprehensive_blue.png');
    background-size: contain;
    pointer-events: all;
}

#thirdTab {
    left: auto !important;
    right: 0.5%;
    opacity: 0.5;
    background-image: url('../images/thirdparty_blue.png');
}

#recenterButton {
    width: 9vw;
    height: 9vw;
    top: 2vw;
    left: 2vw;
    background-image: url('../images/recen.png');
    background-size: contain;
    pointer-events: all;
}




#bottomMenuLogo {
    width: 42%;
    height: 100%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    background-image: url('../images/aviva_logo.png');
    background-size: contain;
}



#tapPlace, #bottomMenuQuote {
    z-index: 10;
    width: 42%;
    height: 100%;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    background-image: url('../images/tap_place.png');
    background-size: contain;
    pointer-events: all;
}

#bottomMenuQuote {
    z-index: 6;
    background-image: url('../images/get_quote.png');
}


#getQuotePopup {
    width: 100vw;
    height: 48vw;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/quote_popup.png');
    background-size: contain;
    pointer-events: all;
}


#quoteCloseButton {
    z-index: 100;
    width: 11%;
    height: 21%;
    top: 0.5%;
    right: 0%;
    /*background-color: blue;
    opacity: 0.5;*/
    pointer-events: all;
}


/*#goToSite {
    width: 42%;
    height: 15%;
    bottom: 34%;
    left: 47%;
    transform: translateX(-50%);
    background-color: red;
    opacity: 0.5;
    pointer-events: all;
    transition: none;
}*/






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

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

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

/*#loadFooter {
    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: 68.074vw;
    bottom: 0vw;

    background-image: url('../images/load_footer.png');
    background-size: contain;
    left: 50%;
    transform: translateX( -50% );
}*/





#desktopError {
    background-color: #ffd802;
	z-index: 5000 !important;
    display: none;
    background-image: url('../images/desk_bg0.jpg');
    background-size: cover;
}

#desktopErrorText {
    position: relative;
    left: 50%;
    width: 200%;
    font-family: "source" !important;
    font-size: 43pt;
    font-style: normal;
    color: #1134bf;
    transform: translateX(-50%);
}

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

#deskARLogo {
    z-index: -1;
    position: absolute;
    width: 16vw;
    height: 11.63636364vw;
    right: 0%;
    top: 0%;
    background: url('../images/ar_button.png') center center no-repeat;
    background-size: contain;
}

/*#disclaimer {
    z-index: 11;
    position: absolute;
    width: 78vw;
    height: 2vw;
    left: 50%;
    bottom: 3vw;
    transform: translateX(-50%);
    background: url('../images/desk_footer.png') center center no-repeat;
    background-size: contain;
}*/

#disclaimerText {
    z-index: 5000;
    position: absolute;
    width: 98vw;
    height: 18vw;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 2.8vw;
    text-align: center;
    vertical-align: bottom;
    color: white;
}


/* desktop */
/* @media ( min-width: 1300px ) {
	#desktopError {
        display: block;
    }  
} */




.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;}
}

.fadeInTapRepeat { animation: fadeInTapRepeat 3.0s linear forwards; animation-iteration-count: infinite; animation-delay: 0s; }
@keyframes fadeInTapRepeat {
  0% { opacity: 0; transform: translateX( -50% ) scale(1.1); }
  25% { opacity: 1; transform: translateX( -50% ) scale(0.8); }
  37.5% { opacity: 1; transform: translateX( -50% ) scale(1); }
  50% { opacity: 0; transform: translateX( -50% ) scale(1); }
  100% { opacity: 0; transform: translateX( -50% ) scale(1); }
}

.moveHandRepeat { animation: moveHandRepeat 3.0s linear forwards; animation-iteration-count: infinite; animation-delay: 0s; }
@keyframes moveHandRepeat {
  0% { opacity: 0; transform: translateX(-130%); }
  10% { opacity: 1;}
  25% { opacity: 1; transform: translateX(20%); }
  50% { opacity: 1; transform: translateX(-130%); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-130%); }
}