/* CSS Document */

/* 
font-family: "europa", sans-serif;
font-family: "din-2014",sans-serif;
*/

html, body { background: #000; color: #fcf9f9; -webkit-font-smoothing: antialiased; width: 100%; height: 100%; }
body, h1, h2, h3, h4, h5, h6 { font-family: "din-2014", sans-serif; font-weight: 300; }
a {}
a[disabled="disabled"], button[disabled="disabled"] { pointer-events: none; cursor: default; }
a, button { outline: 0; }

* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.easeOutExpo {
-webkit-transition: all 750ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 750ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 750ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 750ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

.easeLinear {
-webkit-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}

.bgTextureEase {
-webkit-transition: all 2500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 2500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 2500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 2500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

.uk-navbar { /* background: transparent; z-index: 999; position: fixed; width: 100%; */ }
.uk-navbar.nav-top { height:100px; opacity: 0; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.uk-navbar.nav-top > div { max-width: 960px; margin: 0 auto; width: 100%; }
.uk-navbar.bottom { background: transparent; height: 50px; opacity: 0; text-align:center; text-transform:uppercase; color:#cf958b; font-size: 16px;  }
.uk-navbar.bottom > * { display: inline-block !important; width: 180px; padding: 0 !important; }
.uk-navbar.bottom a { color:#cf958b; }
.uk-navbar-item, .uk-icon-link:active, .uk-icon-link:focus { color: #fcf9f9; line-height: 50px; font-family: "din-2014", sans-serif; font-weight: 300; font-size: inherit; height: 50px; }
.uk-icon-link:hover { color:#ffffff;  text-decoration: none; }
.uk-navbar-right { margin-left: unset; }
a#navReset { margin:0 auto; padding-left: 10px; opacity: 0; }
a#navReset2 .uk-icon svg { margin-top: -5px; display: inline-block; height: 17px; width: 17px; }
a#navSurprise { display: inline-block; color:#cf958b; text-transform: uppercase; margin-top: 3vh; font-size: 1.75vh; 
-webkit-transform: scale(0);
		transform: scale(0);
}
a#navSurprise:hover { color:#f0a59b; text-decoration: none; }
a#navSurprise .uk-icon svg { margin-top: -0.5vh; display: inline-block; width:2vh; height:2vh; }

.uk-logo { width: 139px; height: 50px; margin: 0 20px; }
.logo_urbandaddy svg  { height: 80px; width:200px; margin-top: 14px; }
.logo_forevermark svg { height: 100px; width:200px; margin-top: 7px; margin-right:20px; }
.logo_urbandaddy svg .st0, .logo_forevermark svg .st0, svg.logo_giftconcierge .st0 { fill:#fcf9f9 !important; stroke:none !important; }
.svg1.logo_giftconcierge { height: 100px; margin: 0 auto 0 -1.5vw; }

.debug { position: fixed; bottom: 10px; right: 10px; width: 25%; padding: 10px; background: #ccc; z-index: 999; height: 60px; color: #000; font-size: 80%; overflow: auto; }

.main-content { position: relative; z-index: 60; margin: -150px 0 0; width: 100%; }

.background-texture { background: url(/assets/images/background_texture_tile.jpg) center top repeat; background-size: 100% auto; background-position: 0 0; width: 100%; position: fixed; z-index: 6; top:0; opacity: 0; will-change: transform; }
.background-content-mobile { background: url(/assets/images/background_texture_mobile.jpg) no-repeat; background-size: cover; background-position: 0 -20vh; position: fixed; z-index: 5; top:0; bottom: -100px; width: 100%; }
.background-content { position: absolute; z-index: 10; top: 0; width: 100%; }

.startScreen { position: relative; z-index: 900; width:100%; margin: 0 auto;
/*
	-webkit-transform: scale(0);
		transform: scale(0);
*/
}
.svg2.logo_giftconcierge { opacity: 0; height: 25vh; margin-left: -3vh; }

.letsGo { color: #fcf9f9; background:#cf958b; font-size: 2vh; text-decoration: none; text-transform: uppercase; width: 17vh; height: 17vh; margin: 25px auto; display: block; z-index: 900; position: relative; border: none; 
-webkit-transform: scale(0);
		transform: scale(0);
}
.letsGo:hover, .letsGo.active { background:#f0a59b; cursor: pointer; }
.letsGo:hover {
-webkit-transform: scale(1) !important;
		transform: scale(1) !important;
}
.startScreen .startPanel { max-width: 480px; z-index: 900; }
.startCopy { font-size: 2.5vh; margin: 0 0 3vh; line-height: 1.25em; opacity: 0; } 

#animation_container { position: absolute; margin:auto; left:-100%;right:-100%; top:-100%;bottom:-100%; }
#animation_container_pre { position: absolute; top:0; left: 0; z-index: 50; overflow:hidden; width: 100%; opacity:0; }

.driving { position: absolute; z-index: 800; top: 65%; }
.driving svg { /* margin-left: -13vh; */ }
.driving svg path { stroke: #cf958b !important; opacity: 0.5; }
.driving svg circle { fill: #cf958b; opacity: 0.5; }
.driving_bg { position: relative; z-index: 800; margin: -30% 0; }
.question { position: relative; z-index: 900;}
.question-desc { background-color: #000; width: 50vh; height: 50vh; padding: 3.5vh; margin: 0 0 5vh; border:0.5vh solid #cf958b; position: relative; z-index: 500;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.display { padding: 0; background: transparent; border-radius: 20px; z-index: 900; margin: 0; position: relative; }
.display h2 { color: #fcf9f9; text-transform: uppercase; font-size: 3.625vh; line-height: 1.15em; }
#level5 .display h2, #level5s .display h2 { color: #000; }

.answer.start {
-webkit-transform: scale(0);
		transform: scale(0);	
}
.answer { display: inline-block; color:#fcf9f9; background-color:#cf958b !important; width: 15vh; height: 15vh; padding: 0 10px; font-size: 1.75vh; line-height: 1.25em; text-indent: -2000em; position: absolute;
-webkit-transform: scale(0.85);
		transform: scale(0.85);
}
.answer.answer_overlay { z-index: 550; text-indent: 0; background: transparent; background-color: transparent !important; }

button.active { background-color:#cf958b !important; color: #fcf9f9 !important; }
.answer:hover,.answer_overlay:hover { opacity:1;
-webkit-transform: scale(1);
		transform: scale(1);
		background-color:#f0a59b !important; 
		cursor: pointer;
}
.answer:disabled { color: #fcf9f9 !important; opacity:0.5; border:none; }
.answer.active:disabled { opacity:1;}
.answer.answer_overlay:disabled { background: transparent; background-color: transparent !important; }
.answer.answer_overlay.active:disabled { opacity: 1; background-color:#cf958b !important; }
.answer .uk-text-small { font-size: 14px; display: block; z-index: 450; }

.numAnswers_2 .answer_1 { top: 45vh; left: 7vh; }
.numAnswers_2 .answer_2 { top: 45vh; right: 7vh; }

.numAnswers_3 .answer_1 { top: 42.5vh; left: 2vh; }
.numAnswers_3 .answer_2 { top: 47.5vh; left: 42.5vh; margin-left: -50%; }
.numAnswers_3 .answer_3 { top: 42.5vh; right: 2vh; }

.numAnswers_4 .answer_1 { top: 33.5vh; left: -8vh; }
.numAnswers_4 .answer_2 { top: 45vh; left: 7vh; }
.numAnswers_4 .answer_3 { top: 45vh; right: 7vh; }
.numAnswers_4 .answer_4 { top: 33.5vh; right: -8vh; }

.numAnswers_5 .answer_1 { top: 31vh; left: -9vh; }
.numAnswers_5 .answer_2 { top: 42.5vh; left: 2vh; }
.numAnswers_5 .answer_3 { top: 47.5vh; left: 42.5vh; margin-left: -50%; }
.numAnswers_5 .answer_4 { top: 42.5vh; right: 2vh; }
.numAnswers_5 .answer_5 { top: 31vh; right: -9vh; }


#budgetLabel { color: #fcf9f9; margin: 15px auto 45px; }

#level5 .display h2, #level5s .display h2 { color: #fcf9f9; font-size: 2.5vh; margin: 0; }
.gifts { padding: 0 20px; color:#cf958b;  }
#level5 .display, #level5s .display { width: 100%; max-width:960px; margin: auto; padding: 0; background: transparent; }
.gift-slide .infoPanel a { background: #cf958b; padding: 0 10px !important; color: #fcf9f9 !important; margin: 0px 10px; width: 160px; height: 38px; }
.gift-slide .infoPanel a:hover { text-decoration: none; background: #f0a59b;  }
.gift-slide img {}
.uk-dotnav>*>* { background-color: #000; border-color: transparent; }
.uk-dotnav>.uk-active>* { background-color: #fcf9f9; }
.uk-slidenav { color: #000; }
.uk-slideshow { max-width:800px; margin: 0 auto; }
.uk-slideshow-items { margin-bottom:13px; max-height:413px; }
.uk-slidenav svg polyline { stroke-width: 3; }
.uk-position-center-left, .uk-position-center-right { top: 40%; }
.vidLink { margin-right: 40px; }
.uk-thumbnav > li { padding-left: 14px; max-width: 148px; opacity: 0; }
.uk-thumbnav a { width: 121px; height: 121px; position: relative; }
.uk-thumbnav a:before { width: 113px; height: 113px; display: block; position: absolute; z-index: 10; content: ' '; border: transparent solid 4px; }
.uk-thumbnav .uk-active a:before { border: #cf958b solid 4px; }
.uk-thumbnav a:hover:before { border: #f0a59b solid 4px; }
.uk-thumbnav a, a.hero { display: block; overflow: hidden; }
.uk-thumbnav a img, a.hero img {
-webkit-transform: scale(1);
        transform: scale(1);
}
.uk-thumbnav a:hover img, a.hero:hover img {
-webkit-transform: scale(1.35);
        transform: scale(1.35);	
}
.imagePanel {}
.imagePanel > div { margin: 10px 0 0; background:#fcf9f9; }
.infoPanel {}
.infoPanel > div { margin: 10px 0 0; background: url(../images/background_texture_tile-blue.jpg); background-size: cover; }
.infoPanel > div { background:#000; }
.infoPanel i.topIcon { color: #fcf9f9; margin-top: 30px; }
.infoPanel h4 { color: #fcf9f9 !important; margin: 25px 30px; font-size: 21px; line-height: 1.25em; }
.infoPanel .vidLinks a { color:#fcf9f9; background: #fcf9f9; padding: 0 10px; display: inline-block; }

.giftshow2 .infoPanel > div { background: transparent; }
.giftshow2 .diamond .infoPanel > div { background: #000; margin: 0 0 10px; padding: 10px;  }
.giftshow2 .gift-slide { border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0px 5px 10px; }
.giftshow2 .gift-slide .infoPanel a { padding: 0 5px !important; width: 20vh; height: 38px; font-size: 1.5vh; margin: 10px 5px; }

.smallSup { font-size: 75%; top: -5px; display: inline-block; position: relative; }

.c--anim-btn span { display: block; }
.c--anim-btn, .c-anim-btn { transition: 0.3s; }
.c--anim-btn { overflow: hidden; }
.c-anim-btn{ margin-top: 0em; }
.c--anim-btn:hover .c-anim-btn { margin-top: -38px; }

.uk-button { text-transform: uppercase; font-family: "din-2014", sans-serif; }


.darkener-content { position: fixed; z-index: 10; top: 0; width: 100%; background: url(../images/vignette_darkener.png) no-repeat center bottom; background-size: cover; }

/* responsive */

.resultsSpacer { height: 16vh; width: 100%; }

@media screen and ( min-width: 1600px) {
	
	.uk-slideshow { max-width: 960px; }
	.uk-slideshow-items { margin-bottom:13px; max-height:473px; }
	.uk-thumbnav a { width: 152px; height: 152px; }
	.uk-thumbnav a:before { width: 144px; height: 144px; }
}

@media screen and ( min-width: 960px) and (max-width: 1200px) {
	.startPanel.uk-responsive-width { max-width: 80% !important; }
	.startCopy { font-size: 25px;} 
	.answer, .letsGo {  }
	.question-desc { }
	#level5 .display, #level5s .display { max-width: 700px; margin: 10px auto 0; }
	.uk-thumbnav a { width: 105px; height: 105px; }
	.vidLink { margin-right: 20px; }
	.uk-slideshow-items { max-height: 345px; }
}


@media only screen and (min-width: 768px) and ( max-width: 959px) {
    /* tablets and desktop */
	.uk-slideshow { width: 710px; margin: 0 auto; }
	.uk-slideshow-items { max-height: 359px; }
	.uk-thumbnav a { width: 106px; height: 106px; }
	#level5 .display h2, #level5s .display h2 { font-size: 1.85vh; margin-bottom: 10px; }
	.vidLink { margin-right: 20px; }
	.answer, .letsGo { }
	.question-desc { }
}

@media only screen and (min-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPad 3, 4 and Pro 9.7" */
	/* Portrait */
	.uk-slideshow-items { max-height: 359px; }
	.uk-thumbnav a { width: 106px; height: 106px; }
	.answer, .letsGo { }
	#level5 .display h2, #level5s .display h2 { font-size: 1.85vh; margin-bottom: 10px; }
	.vidLink { margin-right: 20px; }
}

@media only screen and ( max-width: 767px) {
    /* phones */
	.no767 { display: none; }
	.startScreen .startPanel { max-width: 80%; }
	.uk-navbar.nav-top { height: 60px; }
	.logo_urbandaddy svg { height: 50px; width: 80px; margin-top: 0px; margin-left: 10px; }
	.logo_forevermark svg { height: 50px; width: 100px; margin-top: 0px; margin-right: 10px; }
	.svg1.logo_giftconcierge { height: 55px; }
	.uk-navbar.bottom > * { width: 120px; font-size: 12px; }
	.uk-navbar-item, .uk-icon-link:active, .uk-icon-link:focus { line-height:1em; }
	.answer, .letsGo { }
	.letsGo { }
}

@media only screen and (min-width: 640px) and ( max-width: 767px) {
	.uk-slideshow { width: 588px; margin: 0 auto; }
	.uk-slideshow-items { max-height: 292px; }
	.uk-thumbnav a { width: 86px; height: 86px; }
	#level5 .display h2, #level5s .display h2 { font-size: 1.85vh; margin-bottom: 10px; }
	.infoPanel h4 { margin: 10px 20px 0; font-size: 16px; }
	.gift-slide a.getGift { margin: 25px auto; max-width: 140px; height: 40px; line-height: 40px; }
	.infoPanel .vidLinks a { font-size: 12px; padding: 0 5px; }
	.vidLink { margin-right: 10px; }
}

@media only screen and (max-width: 667px) and (orientation: portrait) {
	
	.driving { overflow: hidden; }
	.driving svg.svg2 { width: auto; height: 83vh; margin-left: -12vh; }
	
	.question-desc { width: 40vh; height: 40vh; }
	.display h2 { font-size: 3vh; }
	.answer { width: 13vh; height: 13vh; font-size: 1.5vh; }
	
	.numAnswers_2 .answer_1 { top: 34vh; left: 2vh; }
	.numAnswers_2 .answer_2 { top: 34vh; right: 2vh; }
	
	.numAnswers_3 .answer_1 { top: 32vh; left: 0.5vh; }
	.numAnswers_3 .answer_2 { top: 37.5vh; left: 34.25vh; margin-left: -50%; }
	.numAnswers_3 .answer_3 { top: 32vh; right: -0.5vh; }

	.numAnswers_4 .answer_1 { top: 23.5vh; left: -8vh; }
	.numAnswers_4 .answer_2 { top: 34vh; left: 2vh; }
	.numAnswers_4 .answer_3 { top: 34vh; right: 2vh; }
	.numAnswers_4 .answer_4 { top: 23.5vh; right: -8vh; }

	.numAnswers_5 .answer_1 { top: 22vh; left: -9vh; }
	.numAnswers_5 .answer_2 { top: 32vh; left: 0.5vh; }
	.numAnswers_5 .answer_3 { top: 37.5vh; left: 34.25vh; margin-left: -50%; }
	.numAnswers_5 .answer_4 { top: 32vh; right: -0.5vh; }
	.numAnswers_5 .answer_5 { top: 22vh; right: -9vh; }
	
}

@media only screen and (max-width: 640px) and (orientation: portrait) {
    /* portrait phones */
	.uk-thumbnav>* {  padding: 0; max-width:none; }
	.uk-slideshow-items { max-height: none; height: 100vh !important; }
	.uk-slideshow { width:90%; margin: 0 auto; }
	.uk-thumbnav > li { max-width: none; }
	.uk-thumbnav a { width: 26.25vw; height: 26.25vw; }
	.infoPanel > div { margin: 0px 0px 10px; }
	.infoPanel h4 { margin: 10px 20px 0; font-size: 16px; }
	.infoPanel .vidLinks a { font-size: 12px; padding: 0 5px; }
	.vidLink { margin-right: 10px; }
	.gift-slide a.getGift { margin: 10px auto 0; }
	
}

@media (pointer: coarse) {
	.vidLinks .uk-hidden-notouch { display: inline-block !important; }
}