.bg-red { background-color:#CC2027; }
.black { color:#000; }
.white { color:#fff; }
.red { color:#CC2027; }
button { border:none;border-radius:99px;padding:0 35px; }
.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover { color:unset !important;text-decoration: none !important; }
ol, ul:not(#nav-dropdown) { padding-right: 0px !important; }

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 { margin:0; }

button.big {
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    z-index: 999;
}

/* html, body {margin: 0; height: 100%; overflow: hidden} */
.dig-box-login-title { display: none; }
body .dig_ma-box .button, body .dig_ma-box .transupbutton { border-radius: 20px; }
.digits_login_form * { font-size: 18pt !important; }
.digits_login_form .dig-cont-close * { font-size: 32px !important; }

.websol-logout-link { position: relative;top: 5px; }

header { height: 20px;padding: 5px 0;position:fixed;top:0;width:100vw !important;z-index:9999 !important; }
/* header .uk-grid > * { padding-right:10px; } */
header .digits-login-modal > span, header span.topbar_welcome { color: #fff;font-size: 26px;position: relative;top: 5px;right: 5px; }
header img.logo.uk-align-left { margin-left:30px;margin-top: 10px; }
footer { height: 20px;padding: 15px 0;position:absolute;bottom:0;width:100vw !important;z-index:9999 !important; }
main { height: calc(100vh - 0px); }
main form { height:inherit; }
button { cursor: pointer; }

.uk-grid { margin-right:0px !important;margin-left:0px !important; }

/* body.home { overflow:hidden; } */

header img { max-height:20px; }
ul#nav-dropdown li, ul#nav-account-dropdown li {
  list-style: none;
  border-bottom: 1px solid #cc2027;
  margin-bottom: 0;
  font-size:24px;
}
ul#nav-dropdown li a, ul#nav-account-dropdown li a { color:#CC2027;display: block; }
main { 
	background-color: #CC2027;
	background-image:url("/wp-content/themes/surprise/assets-2/img/main-bg.png");
	background-size: contain;
	background-repeat:no-repeat;
	background-position: center calc(100% - 65px);
	overflow:hidden;
}

input[name=gender] { display:none; }
/* #step-1 .icon { color: #ab1f23;width: 150px;height: 150px;border-radius: 99px;background-color: #85161a;position: relative;margin: 0 auto; } */
#step-1 .icon > span { font-size:7em;color:#CC2027; }
#step-1 label > span { font-size:2em;color:#85161a;text-align:center;display: block; }

/* #step-2 .slidecontainer > span { color:#fff; } */
/* #step-2 .Next.action * { font-size:26px; } */
.step .action { background-color:#fff;width:100vw;position:fixed;bottom:0;right:0;height:65px; }
.step .action button { font-size: 24px; }

#step-1 input { display:none !important; }
#step-1 .icon { color: #ab1f23;width: 130px;height: 130px;border-radius: 99px;background-color: #85161a;position: relative;margin: 0 auto; }
#step-1 .icon > span { font-size:7em;color:#CC2027; }
#step-1 label > span { font-size:2em;color:#85161a;text-align:center;display: block; }
#step-1 ul.ltr { direction:ltr;padding-left:0; }
#step-1 ul li { list-style:none;display:inline-block;margin: 15px 10px;text-align: center;position: relative;max-width: 130px; }
#step-1 ul li:hover .icon { background-color: #fff; }
#step-1 ul li:hover .icon + span { color: #fff; }

#step-2 input { display:none !important; }
#step-2 .icon { color: #ab1f23;width: 100px;height: 100px;border-radius: 99px;background-color: #85161a;position: relative;margin: 0 auto;font-size: 10px; }
#step-2 .icon > span { font-size:5em;color:#CC2027; }
#step-2 label > span { font-size:2em;color:#85161a;text-align:center;display: block; }
#step-2 ul.ltr { direction:ltr;padding-left:0; }
#step-2 ul li { list-style:none;display:inline-block;margin: 15px 5px;text-align: center; }

/* #step-2 .action { background-color:#fff;width:100vw;position:fixed;bottom:0;right:0;height:65px; } */
/* #step-2 .action button { font-size: 24px; } */

#step-3 .greeting > p { font-size:24px;margin: 0px 0px 35px; }
#step-3 input { display:none; }
#step-3 .icon { color: #ab1f23;width: 100px;height: 100px;border-radius: 99px;background-color: #85161a;position: relative;margin: 0 auto;font-size: 10px; }
#step-3 .icon > span { font-size:5em;color:#CC2027; }
#step-3 label > span { font-size:1.5em;color:#85161a;text-align:center;display: block; }
#step-3 ul.ltr { direction:ltr;padding-left:0; }
#step-3 ul li { list-style:none;display:inline-block;margin: 15px 10px;text-align: center; }

/* #step-3 .action { background-color:#fff;width:100vw;position:fixed;bottom:0;right:0;height:65px; } */
/* #step-3 .action button { font-size: 24px; } */

.gfx-select .selected { position:relative;top:0; }
.gfx-select .selected .icon { background-color: #fff !important; }
.gfx-select .selected .icon + span { color: #fff !important; }
.gfx-select .nav li.selected:after {
    background-image: url(../img/underline.png);
    content: "";
    display: block;
    width: 80px;
    height: 11px;
	position: absolute;
    margin-top: 5px;
    margin-left: 10px;
}
#step-1 .gfx-select .nav li.selected:after { right: 20%; }

.text-center { text-align:center; }
.text-white { color:#fff; }

.step h3 { color:#fff;text-align:center;font-size:3em; }

footer i { margin-left:7px; }
footer h5 { font-size:20px; }

#landscape { display:none; }

@media only screen and (max-width: 600px) {
	header { padding: 0; }
	header .uk-grid > * { padding-right:10px; }
	header img.logo.uk-align-left { margin-left: 10px; }
	*:focus {
		-webkit-tap-highlight-color: transparent;
		outline: none;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
	}
	ul#nav-dropdown li, ul#nav-account-dropdown li { text-align:center; }
	header #nav-dropdown, #nav-account-dropdown { width: 100vw;max-width: 100vw !important;right:0 !important; }
}

@media only screen and (max-width: 700px) {
	.hide-small { display:none; }
	 header #nav-dropdown { width: 100vw;max-width: 100vw !important;right:0; }
	 header img.logo.uk-align-left { margin-top: 13px; }
	 main { background-image:url("/wp-content/themes/surprise/assets-2/img/story/story_bg_mobile.png"); }
	 /* label[for=male] { float:left;margin-left: 15px; } */
	 /* label[for=female] { float:right;margin-right: 15px; } */
	 #step-1 #genders { max-height:65vh;overflow:auto; }
	 #step-2 #ages { max-height:65vh;overflow:auto; }
	 #step-2 .icon { width: 80px;height: 80px; }
	 #step-3 { top:50px; }
	 #step-3 #interests { padding-bottom:100px;max-height:65vh;overflow:auto; }
	 #step-3 .icon { width: 80px;height: 80px; }
	 #step-1 label > span, #step-3 label > span { color:#38090b; }
}

@supports (-webkit-touch-callout: none) {
   /* #step-1 .icon { width:100px;height:100px; } */
   #step-1 .uk-position-center { position:relative;top:42vh; }
   #step-1 .uk-position-center h3 { margin-top:15px;margin-bottom:15px; }
}

@supports not (-webkit-touch-callout: none) {
	#step-2 ul li:hover .icon { background-color: #fff; }
	#step-2 ul li:hover .icon + span { color: #fff; }
	#step-3 ul li:hover .icon { background-color: #fff; }
	#step-3 ul li:hover .icon + span { color: #fff; }
}


@media only screen and (min-width: 700px) and (max-width: 1000px) {
	.hide-tablet { display:none; }
	header .uk-grid > * { padding-right:0; }
	main { background-position: center calc(100% - 140px); }
	#step-1 .uk-position-center h3 { margin:25px 0; }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) {
	#step-3 .icon { width: 90px;height: 90px; }
	main { background-position: center calc(100% - 140px); }
}

/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (max-width: 850px) and (orientation: landscape) {
  #landscape { display:block;height: 100vh;text-align:center; }
  #landscape img { max-height:200px; }
  .portrait { display:none; }
}

/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #landscape { display:none; }
  .portrait { display:block; }
}

@media only screen and (min-width: 1400px) {
	#step-2 .nav ul { max-width:60%;margin: 0 auto; }
	#step-3 .nav ul { max-width:80%;margin: 0 auto; }
	.step h3 { margin-top:10px; }
	/* * { overflow:hidden; } */
}

@media screen and (orientation: portrait) {
	body { overflow:hidden; }
}

@media screen and (orientation: landscape) {
	body { overflow:hidden; }
}
@media screen and (min-width: 600px) and (max-width: 1400px) and (orientation: portrait) {
	/* main { background-position: center calc(100% - 135px); } */
	/* #step-3 .uk-position-center { top: calc(47% - var(--uk-position-margin-offset)); } */
	body { touch-action: none; }
}
@media screen and (min-width: 600px) and (max-width: 1400px) and (orientation: landscape) {
	/* main { background-position: center calc(100% - 135px); } */
	/* #step-3 .greeting { margin-top:65px; } */
	#step-3 .icon { width: 90px;height: 90px; }
	/* body { touch-action: none; } */
}

/* @media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { */
	/* main { background-position: center calc(100% - 135px); } */
	/* body { touch-action: none; } */
/* } */
/* @media screen and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) { */
	/* main { background-position: center calc(100% - 135px); } */
/* } */

/* Disable blue highlight on button click */
button, a, img, label, * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.no-touchevents .btnsubmit:hover, * {
    /* background-color: #ffffff !important;  */
    /* color: #000000 !important; */
}