/* region Base */

a, button, input, select, textarea {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-focus-ring-color: rgba(255, 255, 255, 0);
	-webkit-focus-ring-color: transparent;
}

a, label, div, span, p, img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label, div, span, p, img {
	cursor: default;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background-color: #fff;
	color: #fff;
	margin: 0;
	padding: 0;
}

#body {
	width: 100%;
	height: 100%;
	text-align: left;
}

a {
	color: #fff;
	text-decoration: none;
	-webkit-touch-callout: none;
}

a * {
	cursor: pointer;
}

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

:focus {
	outline: none;
}

::-webkit-input-placeholder {
	text-align: center;
	color: #999;
}

:-moz-placeholder {
	text-align: center;
	color: #999;
}

::-moz-placeholder {
	text-align: center;
	color: #999;
}

:-ms-input-placeholder {
	text-align: center;
	color: #999;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type='number'] {
	-moz-appearance: textfield;
}

textarea, input[type='text'] {
	font-family: 'Nexa', sans-serif !important;
}

textarea:focus, input:focus, textarea:active, input:active {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
	-webkit-focus-ring-color: rgba(255, 255, 255, 0);
	-webkit-focus-ring-color: transparent;
	/*-webkit-user-modify: read-write-plaintext-only;*/
	background: none;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*noinspection CssInvalidPropertyValue*/
.crisp {
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
}

.shadow {
	-moz-box-shadow: 0 3px 0 0 #000;
	-webkit-box-shadow: 0 3px 0 0 #000;
	box-shadow: 0 3px 0 0 #000;
	-moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.35);
	box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.35);
}

.clearfix:after, .clearfix:before {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearfix:after {
	clear: both
}

.clearfix {
	zoom: 1
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.overflow {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.overflow,
.overthrow-enabled .overthrow {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.gpu {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.bugfix,
.personality_test,
.iq_test {
	-webkit-animation: bugfix infinite 1s;
	-moz-animation: bugfix infinite 1s;
	-ms-animation: bugfix infinite 1s;
	-o-animation: bugfix infinite 1s;
	animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
	from {
		padding: 0;
	}
	to {
		padding: 0;
	}
}

@-moz-keyframes bugfix {
	from {
		padding: 0;
	}
	to {
		padding: 0;
	}
}

@-ms-keyframes bugfix {
	from {
		padding: 0;
	}
	to {
		padding: 0;
	}
}

/* endregion */

/* region Upstream Skin */

body.upstream {
	background-color: #fff;
	color: #fff;
	text-align: left;
	font-family: 'Nexa', sans-serif;
}

/* region Fonts */

.font-nexa {
	font-family: 'Nexa', sans-serif;
}

.font-light {
	font-weight: 300;
}

.font-light b {
	font-weight: bold;
}

.font-normal {
	font-weight: normal;
}

.font-bold {
	font-weight: bold;
}

.font-uppercase {
	text-transform: uppercase;
}

.font-lowercase {
	text-transform: lowercase;
}

/* endregion */

/* region Layout */

.game-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.logo-container {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}

.logo-udaily {
	width: 65%;
	margin: 6% auto 4%;
}

.content-container {
	text-align: center;
	width: 100%;
	height: 100%;
}

.ar .content-container {
	direction: rtl;
}

.form-icon {
	width: 100%;
	margin-top: -25%;
}

.form-icon .icons {
	width: 23%;
	background-color: #fff;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
}

.login .form-container {
	display: block;
	background: #fff url(../images/form-top-bg.png) top center no-repeat;
	background-size: contain;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5%;
}

.form-container label {
	display: block;
	/*padding-left: 12%;*/
	padding-left: 21%;
	/*border: 2px solid #999;*/
	border: 1px solid #999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 10px;
	-webkit-box-shadow: inset 0 3px 0 0 #e5e5e5;
	-moz-box-shadow: inset 0 3px 0 0 #e5e5e5;
	box-shadow: inset 0 3px 0 0 #e5e5e5;
}

.form-container input {
	background: transparent;
	width: 100%;
	/*height: 40px;*/
	/*line-height: 2.3;*/
	line-height: 2;
	font-size: 20px;
	border: none;
	margin: 0;
	padding: 0;
	/*text-align: center;*/
	text-indent: -5%;
	color: #ccc;
}

.form-container input:focus {
	color: #333;
}

.form-container textarea {
	width: 100%;
	height: 40px;
	font-size: 21px;
	border: none;
	margin: 0;
	padding: 0;
	text-align: center;
	text-indent: -40px;
	color: #ccc;
}

.form-container textarea:focus {
	color: #333;
}

.form-bottom {
	background: url(../images/form-bottom-bg.png) top center no-repeat;
	background-size: contain;
	height: 2%;
}

.button-container {
	background: url(../images/form-bottom-bg.png) center bottom no-repeat;
	background-size: contain;
	padding-bottom: 3%;
}

.button {
	display: block;
	width: 100%;
	/*line-height: 40px;*/
	line-height: 2.3;
	font-size: 19px;
	background: #333 url(../images/arrow-right-white.png) 97% center no-repeat;
	background-size: auto 33%;
	border: none;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fff;
	cursor: pointer;
}

.ar .button {
	background: #333 url(../images/arrow-left-white.png) 3% center no-repeat;
	background-size: auto 33%;
}

.button:active {
	background-color: #000 !important;
	color: #fff !important;
}

.options-container {
	font-size: 19px;
}

.options-container .option {
	display: block;
	/*line-height: 40px;*/
	/*line-height: 3;*/
	line-height: 2.3;
	text-align: left;
	padding: 0 20px 0 10px;
	background: url(../images/arrow-right-gray.png) right center no-repeat;
	background-size: auto 70%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;
}

.ar .options-container .option {
	background: url(../images/arrow-left-gray.png) left center no-repeat;
	background-size: auto 70%;
	text-align: right;
}

.options-container .option:active {
	background-color: #000 !important;
	color: #fff !important;
}

.section {
	width: 100%;
	background: #ccc;
	margin: auto;
	height: 1px;
	border: none;
}

.username-wrapper {
	background: url(../images/icon-username2.png) 1% center no-repeat;
	/*background-size: 12%;*/
	background-size: 20%;
}

.password-wrapper {
	background: url(../images/icon-password.png) 2.5% center no-repeat;
	background-size: 9%;
}

.notification {
	position: absolute;
	bottom: 2%;
	border: 1px solid #fff;
	font-size: 14px;
	color: #fff;
	/*margin-left: 20px;*/
	/*margin-right: 20px;*/
	/*margin-top: 5%;*/
	padding: 7px;
	width: calc(100% - 44px);
	line-height: 1.2;
}

.categories .notification, .quote .notification {
	margin-left: 15px;
	margin-right: 15px;
}

.options-container #lang-en {
	background: url(../images/lang-en.png) right center no-repeat;
	background-size: auto 70%;
}

.options-container #lang-fr {
	background: url(../images/lang-fr.png) right center no-repeat;
	background-size: auto 70%;
}

.options-container #lang-th {
	background: url(../images/lang-th.png) right center no-repeat;
	background-size: auto 70%;
}
.options-container #lang-ar {
	background: url(../images/lang-ar.png) right center no-repeat;
	background-size: auto 70%;
}

.ar .options-container #lang-ar {
	background: url(../images/lang-ar.png) left center no-repeat;
	background-size: auto 70%;
}

.page-heading {
	position: relative;
	z-index: 10;
	top: 25px;
	padding-bottom: 38px;
}

.page-heading:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 50px;
	transform: skewY(1deg);
}

.page-heading .pink {
	position: relative;
	z-index: 2;
}

.page-heading .pink:before {
	content: ' ';
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	bottom: -8px;
	transform: skewY(-1deg);
}

.page-heading .pink:after {
	content: ' ';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20px;
	height: 50px;
}

.page-heading h1 {
	position: relative;
	z-index: 5;
	font-size: 22px;
	text-align: center;
	color: #fff;
}

.page-heading .expand-container {
	position: relative;
}

.page-heading .expand {
	display: none;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
}

.page-heading .steps {
	position: absolute;
	z-index: 100;
	bottom: -8px;
	left: 0;
	display: block;
	width: 100%;
	line-height: 50px;
}

.ar .page-heading .steps {
	direction: rtl;
}

.page-heading .steps li {
	display: inline-block;
	margin: 0 4px;
	list-style: none;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.page-heading .steps li span {
	display: block;
	width: 24px;
	height: 24px;
	line-height: 27px;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.page-heading .steps li.sel span {
	width: 28px;
	height: 28px;
	line-height: 31px;
	border: 3px solid #fff;
}

.page-logo {
	position: relative;
	z-index: 5;
	top: -20px;
	width: 55px;
	height: 55px;
	line-height: 55px;
	margin: 0 auto;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.page-content {
	background: #f2f2f2;
	padding:5px;
}

.page-content div {
	margin: 10% 7% 25%;
}

.page-overlay {
	display: none;
	position: absolute;
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
}

.page-overlay .overlay-content {
	position: absolute;
	top: 50%;
	left: 0;
	margin: -140px 5% 0;
	width: 90%;
	height: 280px;
	overflow: hidden;
	background: #fff;
}

.page-overlay .overlay-content .form-container {
	display: block;
	margin: 15px 7%;
	background: none;
}

.page-overlay .overlay-content .brand {
	height: 40px;
	padding: 10px 0;
	text-align: center;
	background: #f2f2f2;
}

.page-overlay .overlay-content .brand img {
	height: 100%;
}

.page-overlay .overlay-content .overlay-close {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #999;
	font-family: 'Nexa', sans-serif;
	font-size: 32px;
}

.page-overlay h2 {
	display: block;
	margin: 20px 15% 10px;
	font-size: 22px;
	text-align: center;
}

.page-overlay .day-wrapper, .page-overlay .month-wrapper {
	float: left;
	width: 27%;
	margin-right: 3%;
	border: none !important;
}

.page-overlay .year-wrapper {
	float: left;
	width: 40%;
	margin-right: 0;
	border: none !important;
}

.page-overlay label {
	background: url(../images/loginInputBackground.png) no-repeat top center;
	background-size: 102%;
	border: 1px solid #adadad;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding-left: 0;
	line-height: 40px;
	-webkit-box-shadow: inset 0 4px 0 0 rgba(204, 204, 204, 0.5);
	-moz-box-shadow: inset 0 4px 0 0 rgba(204, 204, 204, 0.5);
	box-shadow: inset 0 4px 0 0 rgba(204, 204, 204, 0.5);
}

.page-overlay input {
	background: none !important;
	border: none !important;
	font-family: 'Nexa', sans-serif !important;
	text-indent: 0;
}

.page-overlay .submit-wrapper {
	position: absolute;
	bottom: -7px;
	left: 0;
	right: 0;
	display: block;
	height: 67px;
	line-height: 60px;
}

.page-overlay .submit-wrapper:after, .page-overlay .submit-wrapper:before {
	content: ' ';
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	display: block;
}

.page-overlay .submit-wrapper:after {
	z-index: 2;
	transform: skewY(-1deg);
}

.page-overlay .submit-wrapper:before {
	z-index: 1;
	top: -12px;
	transform: skewY(-3deg);
}

.page-overlay .submit-wrapper input {
	position: relative;
	z-index: 3;
	cursor: pointer;
	color: #fff;
	font-size: 22px;
}

.share-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	box-shadow: 0 -10px 30px 10px #fff;
}

.fb-share {
	position: relative;
	display: inline-block;
	margin: 15px auto;
	padding: 0 10px;
	width: auto;
	height: 40px;
	line-height: 40px;
	font-size: 18px;
	/*color: #999;*/
	color: #fff;
}

.fb-share span {
	position: relative;
	z-index: 3;
	display: block;
	height: 100%;
	font-weight: bold;
}

.fb-share span:before {
	content: ' ';
	float: left;
	width: 26px;
	height: 26px;
	margin: 7px 10px 7px 0;
	background: url(../images/fb_white.png) no-repeat center;
	background-size: 100%;
}

.fb-share:before {
	content: ' ';
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #4966b6;
}

.fb-share:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	left: 5px;
	right: 0;
	bottom: -4px;
	height: 100%;
	transform: skewY(-0.5deg);
	background: rgba(0, 0, 0, 0.6);
}

.next-container {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	box-shadow: 0 -10px 30px 10px #fff;
}

.next-container a {
	position: relative;
	display: block;
	height: 50px;
	line-height: 50px;
	margin: 0 7% 10px;
}

.next-container a span {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1.4em;
	text-indent: 5%;
	text-align: left;
}

.ar .next-container a span {
	text-align: right;
	padding-right: 5%;
}

.next-container a small {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 5%;
	display: block;
	height: 100%;
	font-size: 1.2em;
}

.ar .next-container a small {
	left: 5%;
	right: auto;
}

.next-container a:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	left: 5px;
	right: 0;
	bottom: -4px;
	height: 100%;
	background: #ccc;
	transform: skewY(-0.5deg);
}

.page-content form {
	display: block;
	margin-top: 15px;
}

.page-content h6 {
	padding-top: 5px;
	font-size: 1.2em;
	text-align: center;
}

.page-content label {
	position: relative;
	display: block;
	/*margin: 0 -9%;*/
}

.page-content input[type='radio'] {
	width: 100%;
	height: 100%;
	visibility: hidden;
	position: absolute;
}

.page-content label span {
	position: relative;
	display: block;
	margin: 0 7%;
	padding: 10px 0 10px 38px;
}

.ar .page-content label span {
	padding: 10px 38px 10px 0;
	text-align: right;
}

.page-content label span:before {
	content: ' ';
	position: absolute;
	top: 8px;
	left: 0;
	display: block;
	width: 12px;
	height: 12px;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.ar .page-content label span:before {
	left: auto;
	right: 0;
}

/* endregion */

/* region Header */

#header {
	position: absolute;
	/*display: table;*/
	display: none;
	top: 0;
	width: 100%;
	height: 10%;
	overflow: hidden;
	color: #fff;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: url(../images/header-bg.png) top left no-repeat;
	background-size: 100% 20%;
	z-index: 50;
}

#header .title {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
}

#header .back {
	display: block;
	position: absolute;
	left: 0;
	width: 20%;
	height: 100%;
	background: url(../images/button-back.png) top left no-repeat;
	background-size: contain;
}

#header .button-menu {
	display: block;
	position: absolute;
	right: 0;
	width: 20%;
	height: 100%;
	background: url(../images/button-menu.png) top right no-repeat;
	background-size: contain;
}

/* endregion */

/* region Footer */

/* endregion */

/* region Menu */

#menu {
	position: absolute;
	background-color: transparent;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1500;
}

#menu .menu-wrapper {
	position: absolute;
	top: 0;
	width: 90%;
	right: -90%;
	height: 100%;
	font-size: 20px;
	-webkit-transition: all 120ms;
	-moz-transition: all 120ms;
	-ms-transition: all 120ms;
	-o-transition: all 120ms;
	transition: all 120ms;
}

#menu.open {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.6);
	pointer-events: auto;
}

#menu.open .menu-wrapper {
	right: 0;
}

#menu .menu-wrapper a {
	display: block;
	width: 100%;
	/*line-height: 2.7;*/
	line-height: 2.5;
	/*border-bottom: 1px solid #333;*/
	/*border-bottom: 1px solid rgba(51, 51, 51, 0.5);*/
}

#menu .menu-wrapper a:active {
	background-color: #292929;
}

#menu .menu-container {
	float: right;
	width: 83%;
	height: 100%;
	background-color: #000;
	/*text-align: center;*/
}

.ar #menu .menu-container {
	direction: rtl;
}

.ar #menu .menu-option {
	text-align: right;
}

#menu .section {
	width: 85%;
	background: #333;
	margin: auto;
}

/*noinspection CssReplaceWithShorthandSafely*/
#menu i.icons {
	/*width: 13%;*/
	width: 11.3%;
	/*margin-top: 4%;*/
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 8%;
	margin-right: 3%;
	float: left;
	vertical-align: middle;
}

.ar #menu i.icons {
	float: right;
}

#menu a.menu-toggle {
	background: #000 url(../images/button-menu-close.png) 5% 76% no-repeat;
	background-size: auto 45%;
	line-height: 2;
  height: 62px;
}

#menu a.menu-toggle:active {
	background: #000 url(../images/button-menu-close-active.png) 5% 76% no-repeat;
	background-size: auto 45%;
}

#menu .menu-filler {
	width: 100%;
	height: 2%;
	background: url(../images/menu-top.png) right bottom no-repeat;
	background-size: 100% 100%;
}

#menu .menu-logo {
	display: none;
	margin: 25px auto;
	height: 15%;
}

#menu .menu-disabled {
	color: #666;
	color: rgba(255, 255, 255, 0.25);
	font-style: italic;
}

#menu .menu-disabled i {
	-moz-opacity: 0.25;
	opacity: 0.25;
}

#menu .menu-quote {
	color: #42bdbd;
}

#menu .menu-quote.menu-disabled {
	color: #163e3e;
}

#menu .menu-horoscope {
	color: #7d4b81;
}

#menu .menu-horoscope.menu-disabled {
	color: #29192a;
}

#menu .menu-biorhythm {
	color: #dd88a7;
}

#menu .menu-biorhythm.menu-disabled {
	color: #492d37;
}

#menu .menu-personality {
	color: #e37263;
}

#menu .menu-personality.menu-disabled {
	color: #4b2621;
}

#menu .menu-iq {
	color: #fed32b;
}

#menu .menu-guess {
	color: #fed32b;
}
#menu .menu-guess.menu-disabled {
	color: #54460e;
}

#menu .menu-iq.menu-disabled {
	color: #54460e;
}

#menu .menu-wellness {
	color: #ed5e9e;
}

#menu .menu-wellness.menu-disabled {
	color: #541e3a;
}

#menu .menu-profile {
	 color: #a07a56;
 }

#menu .menu-profile.menu-disabled {
	color: #35281c;
}

/* endregion */

/* region Loading */

#loading {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.7);
	overflow: hidden;
	z-index: 10;
}

#loading .loading-spinner-wrapper {
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

#loading .loading-spinner-wrapper .loading-spinner {
	display: table-cell;
	vertical-align: middle;
	background: url(../images/loading-bg.png) center no-repeat;
	background-size: 35%;
}

#loading .loading-spinner-wrapper .loading-spinner .spinner {
	width: 35%;
	height: auto;
}

.rotating {
	-webkit-animation: rotating-function 1.25s linear infinite;
	-moz-animation: rotating-function 1.25s linear infinite;
	-ms-animation: rotating-function 1.25s linear infinite;
	-o-animation: rotating-function 1.25s linear infinite;
	animation: rotating-function 1.25s linear infinite;
}

@-webkit-keyframes rotating-function {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotating-function {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes rotating-function {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

/* endregion */

/* region Page 1 - Splash */

.splash.game-container {
	width: 100%;
	height: 100%;
	background: #4c85ac url(../images/splash-bg.jpg) top center no-repeat;
	background-size: cover;
	overflow: hidden;
}

.splash .logo-udaily {
	width: 44%;
	margin-top: 42%;
}

.splash .logo-powered {
	/*background: url(../images/logo-powered-upstream.png) center 95.5% no-repeat;*/
	/*background-size: 32% auto;*/
}

.splash .progress-bar-wrapper {
	width: 60%;
	margin: 5% auto;
}

.splash .progress-bar-wrapper .pro-bar-container,
.splash .progress-bar-wrapper .pro-bar-container .pro-bar,
.splash .progress-bar-wrapper .pro-bar-container .pro-bar .pro-bar-candy {
	margin: 0;
	height: 7px;
}

/* endregion */

/* region Page 2 - Home */

.home.game-container {
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
}

.home #lang-en .description {
	direction: ltr;
	text-align: left;
}

.home #lang-fr .description {
	direction: ltr;
	text-align: left;
}

.home #lang-th .description {
	direction: ltr;
	text-align: left;
	left: 18%;
}

.home #lang-ar .description {
	direction: rtl;
	text-align: right;
	left: 18%;
}


.home .content-container {
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: inherit;
}

.home .button-start {
	display: block;
	width: 100%;
	padding-top: 10%;
	line-height: 2.3;
	position: absolute;
	bottom: 0;
	background: url(../images/button-start.png) bottom center no-repeat;
	background-size: 100%;
	text-align: center;
	font-size: 30px;
	color: #333;
}

.home .button-start:active {
	background: url(../images/button-start-active.png) bottom center no-repeat;
	background-size: 100%;
	color: #fff;
}

.home .button-start b {
	display: block;
	width: 100%;
	height: 100%;
}

.home .slides {
	position: relative;
}

.home .slides .bg {
	width: 100%;
}

.home .slides .logo-powered {
	display: none;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 24%;
}

.home .slides .logo-udaily {
	position: absolute;
	bottom: 53%;
	left: 4%;
	width: 50%;
}

.home .slide-1 .logo-udaily {
	bottom: 53%;
}

.home .slide-4 .logo-udaily {
	bottom: 53%;
}

.home .title {
	position: absolute;
	width: 100%;
	bottom: 48%;
	left: 22%;
	text-align: left;
	color: #fff;
	/*text-shadow: 0 3px 7px #000;*/
	/*text-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);*/
	text-shadow: 1px 1px 0 #000, 2px 2px 1px #000, 3px 3px 2px #000;
}

.home .title b:after {
	content: ' ';
	display: block;
	width: 15%;
	height: 6px;
	margin-top: 5px;
}

.home .slide-1 .description {
	bottom: 34%;
}

.home #lang-fr .slide-1 .description {
	bottom: 26%;
}

.home .slide-4 .description {
	bottom: 34%;
}

.home #lang-fr .slide-4 .description {
	bottom: 26%;
}

.home .slide-1 .title {
	bottom: 26%;
}

.home .slide-3 .title {
	bottom: 50%;
}

.home .slide-4 .title {
	bottom: 50%;
}

.home .slide-1 .title b:after {
	display: none;
}

.home .slide-2 .title b:after {
	background-color: #42bdbd;
}

.home .slide-3 .title b:after {
	background-color: #7d4b81;
}

.home .slide-4 .title b:after {
	background-color: #d66d93;
}

.home .slide-5 .title b:after {
	background-color: #e67364;
}

.home .slide-6 .title b:after {
	background-color: #fed32b;
}

.home .description {
	position: absolute;
	width: 70%;
	bottom: 34%;
	left: 22%;
	text-align: left;
	color: #fff;
	/*text-shadow: 0 3px 7px #000;*/
	/*text-shadow: 0 3px 7px rgba(0, 0, 0, 0.4);*/
	text-shadow: 1px 1px 0 #000, 2px 2px 1px #000, 3px 3px 2px #000;
}

.home .slick-slider {
	direction: ltr;
}

.home .slick-prev,
.home .slick-next {
	margin-top: 0;
}

.home .slick-prev:before {
	display: none;
}

.home .slick-next {
	right: 5px;
}

.home .slick-next {
	width: 40px;
	height: 9%;
	background: url(../images/slider-arrow-right-white-normal.png) center no-repeat;
	background-size: auto 100%;
	top: auto;
	bottom: 40%;
}

.home .slick-next:active {
	width: 40px;
	height: 9%;
	background: url(../images/slider-arrow-right-white-hover.png) center no-repeat;
	background-size: auto 100%;
}

.home .slick-next:before {
	display: none;
}

.home .slick-dots {
	bottom: 13%;
}

.home .slick-dots li {
	margin: 0;
}

.home .slick-dots li button:before {
	font-size: 16px;
	color: #fff;
	text-shadow: 0 0 2px #000;
}

/* endregion */

/* region Page 3 - Login */

.login #header {
	display: table;
}

.login.game-container {
	background: url(../images/main-bg.jpg) top center no-repeat;
	background-size: cover;
}

.login .content-container {
	width: auto;
	height: 100%;
	padding: 0 15px;
}

.login .form-container {
	padding-top: 10%;
}

.login .form-container input.username {
	/*text-indent: 9%;*/
	text-indent: 3%;
}

.login .form-container input.password {
	text-indent: 3%;
}

/* endregion */

/* region Page 4 - Recover */

.recover #header {
	display: table;
}

.recover.game-container {
	background: url(../images/main-bg.jpg) top center no-repeat;
	background-size: cover;
}

.recover .content-container {
	width: auto;
	height: 100%;
	padding: 0 15px;
}

.recover .form-container {
	padding-top: 17%;
}

.recover .recover-title {
	color: #333;
	font-size: 21px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.recover .form-container input.username {
	/*text-indent: 9%;*/
	text-indent: 3%;
}

.recover .recover-text .text1 {
	color: #333;
	font-size: 30px;
	/*font-weight: bold;*/
	margin-top: 20px;
}

.recover .recover-text .text2 {
	font-size: 13px;
	color: #999;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 1.3;
}

.recover .recover-text .text2 b {
	color: #333;
}

/* endregion */

/* region Page 5 - TOS */

.tos #header {
	display: table;
	background: none;
}

.tos #lang-ar {
	text-align: right;
}

.tos {
	/*background: #fff;*/
	text-align: center;
}

.tos .logo-udaily {
	width: 49%;
	margin: 5% auto 4%;
}

.tos .content-container {
	width: auto;
	height: 100%;
	font-size: 15px;
	padding: 0 35px;
	text-align: left;
}

.tos .header-line {
	background: #fff url(../images/form-top-bg.png) top center no-repeat;
	background-size: cover;
	width: 90%;
	height: 1.5%;
	margin: auto;
}

.tos .tos-title {
	color: #333;
	font-size: 21px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.tos .tos-container {
	color: #333;
	padding-bottom: 200px;
}

.tos .tos-container a {
	color: #333;
	text-decoration: underline;
}

.tos .tos-container p {
	line-height: 1.3;
	margin-bottom: 1.25rem;
	text-rendering: optimizeLegibility;
}

.tos .tos-container ul,
.tos .tos-container ol,
.tos .tos-container dl {
	line-height: 1.3;
	/*margin-bottom: 1.25rem;*/
	list-style-position: outside;
}

.tos .tos-container ul {
	margin-left: 1.1rem;
}

.tos .tos-container ul.no-bullet {
	margin-left: 0;
}

.tos .tos-container ul.no-bullet li ul,
.tos .tos-container ul.no-bullet li ol {
	margin-left: 1.25rem;
	margin-bottom: 0;
	list-style: none;
}

.tos .tos-container ul li ul,
.tos .tos-container ul li ol {
	margin-left: 1.25rem;
	margin-bottom: 0;
}

.tos .tos-container ul.square li ul,
.tos .tos-container ul.circle li ul,
.tos .tos-container ul.disc li ul {
	list-style: inherit;
}

.tos .tos-container ul.square {
	list-style-type: square;
	margin-left: 1.1rem;
}

.tos .tos-container ul.circle {
	list-style-type: circle;
	margin-left: 1.1rem;
}

.tos .tos-container ul.disc {
	list-style-type: disc;
	margin-left: 1.1rem;
}

.tos .tos-container ul.no-bullet {
	list-style: none;
}

.tos .tos-container ol {
	margin-left: 1.4rem;
}

.tos .tos-container ol li ul,
.tos .tos-container ol li ol {
	margin-left: 1.25rem;
	margin-bottom: 0;
}

.tos .tos-container dl dt {
	margin-bottom: 0.3rem;
	font-weight: bold;
}

.tos .content-container dl dd {
	margin-bottom: 0.75rem;
}

/* endregion */

/* region Page 6 - Language */

.language #header {
	display: table;
}

.language.game-container {
	background: url(../images/main-bg.jpg) top center no-repeat;
	background-size: cover;
}

.language .content-container {
	width: auto;
	height: 100%;
	padding: 0 15px;
}

.language .language-container {
	padding-bottom: 10px;
	display: block;
	background: #fff url(../images/form-top-bg.png) top center no-repeat;
	background-size: contain;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5%;
}

.language .language-title {
	color: #333;
	font-size: 21px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.language .option {
	padding-left: 22%;
	margin-bottom: 10px;
}

.language .option.lang-en {
	background: url(../images/lang-en.png) left center no-repeat;
	background-size: contain;
}

.language .option.lang-fr {
	background: url(../images/lang-fr.png) left center no-repeat;
	background-size: contain;
}

.language .option.lang-th {
	background: url(../images/lang-th.png) left center no-repeat;
	background-size: contain;
}

.language .option.lang-ar {
	background: url(../images/lang-ar.png) left center no-repeat;
	background-size: contain;
}

.language .section {
	margin-top: 3%;
	margin-bottom: 3%;
}

/* endregion */

/* region Page 7 - Settings */

.settings #header {
	display: table;
}

.settings.game-container {
	background: url(../images/main-bg.jpg) top center no-repeat;
	background-size: cover;
}

.settings .content-container {
	width: auto;
	height: 100%;
	padding: 0 15px;
}

.settings .form-container {
	padding-top: 17%;
	padding-bottom: 3%;
}

.settings .form-bottom {
	margin-bottom: 3%;
}

.settings .settings-title {
	color: #333;
	font-size: 21px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.settings .options-title {
	color: #333;
	line-height: 2;
	font-size: 20px;
}

.settings .option-birthdate .day-wrapper,
.settings .option-birthdate .month-wrapper {
	float: left;
	width: 27%;
	margin-right: 3%;
}

.settings .option-birthdate .year-wrapper {
	float: left;
	width: 40%;
	margin-right: 0;
}

.settings .option-birthdate label {
	padding-left: 0;
	margin-bottom: 0;
}

.settings .option-birthdate input {
	text-indent: 0;
	text-align: center;
}

.settings .option-switch {
	padding: 0;
}

.settings .option-switch .icons {
	width: 10%;
	vertical-align: sub;
}

.settings .option-switch.switch-off {
	background: url(../images/switch-off.png) right center no-repeat;
	background-size: auto 70%;
}

.settings .option-switch.switch-on {
	background: url(../images/switch-on.png) right center no-repeat;
	background-size: auto 70%;
}

.settings .option-language {
	padding-left: 22%;
	margin-bottom: 10px;
}

.settings .option.lang-en {
	background: url(../images/lang-en.png) left center no-repeat;
	background-size: contain;
}

.settings .option.lang-fr {
	background: url(../images/lang-fr.png) left center no-repeat;
	background-size: contain;
}

.settings .option.lang-th {
	background: url(../images/lang-th.png) left center no-repeat;
	background-size: contain;
}

.settings .option.lang-ar {
	background: url(../images/lang-ar.png) left center no-repeat;
	background-size: contain;
}

.settings .section {
	margin-top: 3%;
	margin-bottom: 3%;
}

.settings .button {
	background: #333 url(../images/check-white.png) 95% center no-repeat;
	background-size: auto 33%;
}

.ar .settings .button {
	background: #333 url(../images/check-white.png) 5% center no-repeat;
	background-size: auto 33%;
}

/* endregion */

/* region Page 8 - Profile */

.profile {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.profile #header {
	display: table;
}

.profile .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.profile .page-heading:after {
	background: #c2c2c2;
}

.profile .page-heading .pink {
	background: #000;
	/*height: 120px;*/
	padding-top: 20px;
}

.profile .page-heading .pink:before {
	background: #262626;
}

.profile .page-heading .pink:after {
	background: #262626;
}

.profile .page-heading .title {
	position: inherit;
	font-size: 12px;
	color: #ccc;
	text-transform: uppercase;
}

.profile .page-heading .description {
	position: inherit;
	font-size: 20px;
	color: #fff;
	z-index: 5;
	margin-top: 5px;
	margin-bottom: 10px;
}

.profile .page-heading .score-title {
	position: inherit;
	font-size: 18px;
	color: #ccc;
	z-index: 5;
}

.profile .page-heading .score {
	position: inherit;
	font-size: 32px;
	color: #fff;
	z-index: 5;
}

.profile .page-heading .points {
	position: inherit;
	font-size: 18px;
	color: #ccc;
	z-index: 5;
}

.profile .page-content {
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 25px;
	text-align: center;
}

.profile .page-content div {
	margin: 10% auto;
}

.profile .page-content .badges {
	display: inline-block;
	margin: 0;
	width: 25%;
	height: 25%;
	line-height: 1;
}

.profile .page-content .badges .icons {
	width: 90%;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.profile .page-content .badges span {
	display: inline-block;
	color: #333;
	font-size: 11px;
	line-height: 32px;
	height: 32px;
	vertical-align: top;
}

.profile .page-content .badges.badge-quote span,
.profile .page-content .badges.badge-wellness span,
.profile .page-content .badges.badge-personality span {
	line-height: 16px;
}

.profile .page-content .unlocked,
.profile .page-content .you-unlocked,
.profile .page-content .unlocked .badges {
	display: none;
}

.profile .page-content .unlocked .badges.badge-quote .icons {
	border: 5px solid #42bdbd;
	background-color: #42bdbd;
}

.profile .page-content .unlocked .badges.badge-horoscope .icons {
	border: 5px solid #7d4b81;
	background-color: #7d4b81;
}

.profile .page-content .unlocked .badges.badge-wellness .icons {
	border: 5px solid #ed5e9e;
	background-color: #ed5e9e;
}

.profile .page-content .unlocked .badges.badge-biorhythm .icons {
	border: 5px solid #d66d93;
	background-color: #d66d93;
}

.profile .page-content .unlocked .badges.badge-personality .icons {
	border: 5px solid #e67364;
	background-color: #e67364;
}

.profile .page-content .unlocked .badges.badge-iq .icons {
	border: 5px solid #fed32b;
	background-color: #fed32b;
}

.profile .page-content .unlocked .badges.badge-junior .icons {
	border: 5px solid #a07a56;
	background-color: #a07a56;
}

.profile .page-content .unlocked .badges.badge-enthusiast .icons {
	border: 5px solid #acd91a;
	background-color: #acd91a;
}

.profile .page-content .unlocked .badges.badge-specialist .icons {
	border: 5px solid #3bc8fd;
	background-color: #3bc8fd;
}

.profile .page-content .unlocked .badges.badge-expert .icons {
	border: 5px solid #5a495c;
	background-color: #5a495c;
}

.profile .page-content .unlocked .badges.badge-master .icons {
	border: 5px solid #36599d;
	background-color: #36599d;
}

.profile .page-content .locked .badges {
	color: #bfbfbf;
}

.profile .page-content .locked .badges .icons {
	border: 5px solid #ebebeb;
	background-color: #ebebeb;
}

.profile .page-content .locked .badges span {
	color: #bfbfbf;
}

/* endregion */

/* region Page 9 - Categories */

.categories {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.categories #header {
	display: table;
}

.categories .logo-udaily.header {
	margin: 8% auto 3%;
	width: 65%;
	max-width: 500px;
	display: block;
}

.categories .header-bar .status {
	position: absolute;
	background: #000;
	background: rgba(0, 0, 0, 0.3);
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	left: 5px;
	top: 10px;
	width: 35%;
	height: 40px;
	text-align: left;
	overflow: hidden;
}

.categories .content-container {
	padding: 0;
	height: 100%;
}

.categories h1 {
	font-weight: bold;
	font-size: 1em;
	font-size: 5vw;
	color: #fff;
	font-family: 'Nexa', sans-serif;
	text-align: center;
	padding-bottom: 3%;
	text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
}

.categories .options-container {
	margin: auto 15px;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 25px;
}

.categories .options-container .option {
	display: block;
	position: relative;
	height: 55px;
	line-height: 55px;
	margin-top: 5px;
	/*text-align: center;*/
	text-align: left;
	padding-left: 23%;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
}

.ar .categories .options-container .option {
	text-align: right;
	padding-left: 0;
	padding-right: 23%;
}

.categories .options-container .option-disabled {
	font-style: italic;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.categories .options-container .option:after {
	content: " ";
	position: absolute;
	top: 0;
	right: 15px;
	width: 15px;
	height: 100%;
	background-image: url(../images/homeArrow.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
}

.ar .categories .options-container .option:after {
	background-image: url(../images/homeArrowLeft.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	right: auto;
	left: 15px;
}

.categories .options-container .option b {
	display: inline-block;
	line-height: 21px;
	vertical-align: middle;
}

.categories .options-container .icons-categories {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 58px;
}

.ar .categories .options-container .icons-categories {
	left: auto;
	right: 0;
}

.categories .options-container .icons-categories:after {
	content: ' ';
	display: inline-block;
	width: 53px;
	height: 46px;
	vertical-align: middle;
	margin: auto;
	background-image: url(../images/categories_icons.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.categories .options-container .option.quote .icons-categories {
	background-color: #42bdbd;
}

.categories .options-container .option.quote .icons-categories:after {
	background-position: center 0;
}

.categories .options-container .option.horoscope .icons-categories {
	background-color: #7d4b81;
}

.categories .options-container .option.horoscope .icons-categories:after {
	background-position: center 20%;
}

.categories .options-container .option.biorhythm .icons-categories {
	background-color: #d66d93;
}

.categories .options-container .option.biorhythm .icons-categories:after {
	background-position: center 40%;
}

.categories .options-container .option.biosettings .icons-categories {
	background-color: #d66d93;
}

.categories .options-container .option.biosettings .icons-categories:after {
	background-position: center 40%;
}

.categories .options-container .option.personality .icons-categories {
	background-color: #e67364;
}

.categories .options-container .option.personality .icons-categories:after {
	background-position: center 60%;
}

.categories .options-container .option.iq .icons-categories {
	background-color: #fed32b;
}

.categories .options-container .option.iq .icons-categories:after {
	background-position: center 80%;
}

.categories .options-container .option.wellness .icons-categories {
	background-color: #ed5e9e;
}

.categories .options-container .option.wellness .icons-categories:after {
	background-position: center 100%;
}

.categories .button-container {
	margin-top: 10px;
	padding: 0 15px;
}

.categories .button-container a {
	display: block;
	width: 45%;
	font-size: 16px;
	height: 46px;
	border: 2px solid #fff;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	text-align: center;
}

.categories .button-container i.icons {
	width: 26px;
	height: 26px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	float: left;
}

.categories .button-container span {
	display: table;
	width: 70%;
	height: 100%;
}

.categories .button-container b {
	display: table-cell;
	vertical-align: middle;
}

.categories .button-container a:active {
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.5);
}

.categories .button-container .button-play {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.3);
	float: left;
}

.categories .button-container .button-challenge {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.3);
	float: right;
}

.categories .button-container .button-challenge.disabled {
	opacity: 0.5;
}

/* endregion */

/* region Page 10 - Quote */

.quote {
	background: url(../images/quoteBackground.jpg) no-repeat top center;
	background-size: cover;
}

.quote #header {
	display: table;
}

.quote #lang-en {
	direction: ltr;
	text-align: left;
}

.quote #lang-fr {
	direction: ltr;
	text-align: left;
}

.quote #lang-ar {
	direction: rtl;
	text-align: right;
}

.quote .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.quote .content-container {
	padding: 0;
	height: 100%;
}

.quote h1 {
	font-weight: bold;
	font-size: 1.26em;
	font-size: 6vw;
	color: #fff;
	font-family: 'Nexa', sans-serif;
	text-align: center;
	border: none;
}

.quote h1 small {
	display: block;
	margin-top: 5px;
	font-size: 0.6em;
	font-size: 4vw;
	opacity: 0.5;
	text-transform: uppercase;
}

.quote h1 .quote-icon {
	display: block;
	margin: 0 auto 3px;
	width: 18%;
	max-width: 240px;
}

.quote .options-container {
	margin: auto 15px;
	font-weight: bold;
	font-size: 21px;
}

.quote .quote-container {
	position: relative;
	width: 74%;
	margin: 20px 7% 75px;
	padding: 7% 6% 8%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.1em;
	font-size: 5vw;
	line-height: 1.2em;
	line-height: 6vw;
	text-align: left;
	font-weight: bold;
}

.quote .quote-container:before {
	content: " ";
	position: absolute;
	/*top: 9%;*/
	top: -4%;
	left: -10px;
	width: 57px;
	height: 12%;
	max-height: 50px;
	background-image: url(../images/quote_mark.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
}

.quote .quote-container:after {
	content: " ";
	position: absolute;
	bottom: -68px;
	left: 0;
	width: 100%;
	height: 68px;
	background-image: url(../images/quote_bottom.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}

.quote .quote-container strong {
	position: absolute;
	top: 125%;
	/*top: 130%;*/
	right: 0;
	font-size: 1.4em;
	font-size: 7vw;
	text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
	text-align: right;
}

/* endregion */

/* region Page 11 - Horoscope */

.horoscope {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.horoscope #header {
	display: table;
}

.horoscope .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.horoscope .page-heading:after {
	background: #c2c2c2;
}

.horoscope .page-heading .pink {
	background: #643c67;
}

.horoscope .page-heading .pink:before {
	background: #7d4b81;
}

.horoscope .page-heading .pink:after {
	background: #7d4b81;
}

.horoscope .page-logo {
	margin-bottom: -10px;
	background: #fff;
	border: 8px solid #7d4b81;
	box-shadow: 0 5px #643c67;
}

.horoscope .page-logo img {
	max-width: 70%;
	background-image: url(../images/horoscope-purple.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: -1000px -1000px;
	vertical-align: middle;
}

#aquarius .page-logo img {
	background-position: 0 0;
	background-size: 100%;
}

#aries .page-logo img {
	background-position: 0 9.090909%;
	background-size: 100%;
}

#cancer .page-logo img {
	background-size: 100%;
	background-position: 0 18.181818%;
}

#capricorn .page-logo img {
	background-size: 100%;
	background-position: 0 27.272727%;
}

#gemini .page-logo img {
	background-size: 100%;
	background-position: 0 36.363636%;
}

#leo .page-logo img {
	background-size: 100%;
	background-position: 0 45.454545%;
}

#libra .page-logo img {
	background-size: 100%;
	background-position: 0 54.545455%;
}

#pisces .page-logo img {
	background-size: 100%;
	background-position: 0 63.636364%;
}

#sagittarius .page-logo img {
	background-size: 100%;
	background-position: 0 72.727273%;
}

#scorpio .page-logo img {
	background-size: 100%;
	background-position: 0 81.818182%;
}

#taurus .page-logo img {
	background-size: 100%;
	background-position: 0 90.909091%;
}

#virgo .page-logo img {
	background-size: 100%;
	background-position: 0 100%;
}

.horoscope-white-aquarius,
.horoscope-white-aries,
.horoscope-white-cancer,
.horoscope-white-capricorn,
.horoscope-white-gemini,
.horoscope-white-leo,
.horoscope-white-libra,
.horoscope-white-pisces,
.horoscope-white-sagittarius,
.horoscope-white-scorpio,
.horoscope-white-taurus,
.horoscope-white-virgo {
	display: block;
	max-width: 70%;
	margin: 15%;
	background-size: 100%;
	background-image: url(../images/horoscope-white.png);
}

.horoscope-white-aquarius {
	background-position: 0 0;
	background-size: 100%;
}

.horoscope-white-aries {
	background-position: 0 9.090909%;
	background-size: 100%;
}

.horoscope-white-cancer {
	background-position: 0 18.181818%;
	background-size: 100%;
}

.horoscope-white-capricorn {
	background-position: 0 27.272727%;
	background-size: 100%;
}

.horoscope-white-gemini {
	background-position: 0 36.363636%;
	background-size: 100%;
}

.horoscope-white-leo {
	background-position: 0 45.454545%;
	background-size: 100%;
}

.horoscope-white-libra {
	background-position: 0 54.545455%;
	background-size: 100%;
}

.horoscope-white-pisces {
	background-position: 0 63.636364%;
	background-size: 100%;
}

.horoscope-white-sagittarius {
	background-position: 0 72.727273%;
	background-size: 100%;
}

.horoscope-white-scorpio {
	background-position: 0 81.818182%;
	background-size: 100%;
}

.horoscope-white-taurus {
	background-position: 0 90.909091%;
	background-size: 100%;
}

.horoscope-white-virgo {
	background-position: 0 100%;
	background-size: 100%;
}

.horoscope .page-heading h1 {
	font-size: 20px;
}

.horoscope .page-heading h3 {
	position: relative;
	z-index: 5;
	display: block;
	text-align: center;
	margin: 5px 0;
	font-size: 12px;
	color: #e7b1eb;
	text-transform: uppercase;
}

.horoscope .page-heading .another {
	position: relative;
	z-index: 5;
	display: inline-block;
	text-align: center;
	margin: 5px auto 0;
	padding: 0 15px;
	line-height: 30px;
	font-size: 12px;
	color: #fff;
	border: 1px solid #e7b1eb;
	text-transform: uppercase;
}

.horoscope .page-overlay h2 {
	color: #7d4b81;
}

.horoscope .page-overlay .submit-wrapper:after {
	background: #7d4b81;
}

.horoscope .page-overlay .submit-wrapper:before {
	background: #e5dbe6;
}

.horoscope .page-content {
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 25px;
	text-align: left;
}

.horoscope .fb-share {
	height: 35px;
	line-height: 35px;
	/*margin: 0 auto 12px;*/
	margin: 0 auto 35px;
	color: #fff;
}

.horoscope .fb-share span:before {
	width: 22px;
	height: 22px;
	background: url(../images/fb_white.png) no-repeat center;
	background-size: 100%;
}

.horoscope .fb-share:before {
	/*background: #7d4b81;*/
}

.horoscope .fb-share:after {
	background: rgba(0, 0, 0, 0.2);
}

.horoscope .page-heading .expand {
	background: #7d4b81;
	padding-bottom: 30px;
}

.horoscope .expand ul {
	display: block;
	margin: 5%;
}

.horoscope .expand li {
	float: left;
	width: 33.3%;
	list-style: none;
	cursor: pointer;
}

.horoscope .expand li.sel span img, .horoscope .expand li.sel strong {
	opacity: 0.4;
}

.horoscope .expand li.sel span {
	border-color: #a481a7;
}

.horoscope .expand li.sel span:before {
	content: ' + ';
	position: absolute;
	top: -15%;
	right: -15%;
	display: block;
	width: 30%;
	height: 30%;
	font-size: 1px;
	border: 3px solid #fff;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	background: url(../images/checked.png) no-repeat center right #7d4b81;
	background-size: 90%;
}

.horoscope .expand li span {
	position: relative;
	display: block;
	width: 60%;
	margin: 10px auto;
	border: 7px solid #fff;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.horoscope .expand li strong {
	display: block;
	margin: 10px auto 0;
	font-size: 13px;
	font-size: 80%;
	font-size: 4vw;
	/*line-height: 1;*/
	text-transform: uppercase;
}

.horoscope .expand li small {
	display: block;
	margin: 0 auto 10px;
	font-size: 10px;
	font-size: 55%;
	font-size: 3vw;
	/*line-height: 1;*/
	text-transform: uppercase;
	color: #a481a7;
}

/* endregion */

/* region Page 12 - Wellness */

.wellness {
	background: url(../images/wellnessBackground.jpg) no-repeat top center;
	background-size: cover;
}

.wellness #header {
	display: table;
}

.wellness #lang-en {
	direction: ltr;
	text-align: left;
}

.wellness #lang-fr {
	direction: ltr;
	text-align: left;
}

.wellness #lang-ar {
	direction: rtl;
	text-align: right;
}

.wellness .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.wellness .content-container {
	padding: 0;
	height: 100%;
}

.wellness h1 {
	font-weight: bold;
	font-size: 1.26em;
	font-size: 6vw;
	color: #fff;
	font-family: 'Nexa', sans-serif;
	text-align: center;
	border: none;
}

.wellness h1 small {
	display: block;
	margin-top: 5px;
	font-size: 0.6em;
	font-size: 4vw;
	opacity: 0.5;
	text-transform: uppercase;
}

.wellness h1 .wellness-icon {
	display: block;
	margin: 0 auto 3px;
	width: 18%;
	max-width: 240px;
}

.wellness .options-container {
	margin: auto 15px;
	font-weight: bold;
	font-size: 21px;
}

.wellness .wellness-container {
	position: relative;
	width: 74%;
	margin: 20px 7% 75px;
	padding: 7% 6% 8%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.1em;
	font-size: 5vw;
	line-height: 1.2em;
	line-height: 6vw;
	text-align: left;
	font-weight: bold;
}

.wellness .wellness-container:after {
	content: " ";
	position: absolute;
	bottom: -68px;
	left: 0;
	width: 100%;
	height: 68px;
	background-image: url(../images/wellness_bottom.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
}

.wellness .wellness-container strong {
	position: absolute;
	/*top: 115%;*/
	top: 130%;
	right: 0;
	font-size: 1.4em;
	font-size: 7vw;
	text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
	text-align: right;
}

/* endregion */

/* region Page 7 - Settings */

.biosettings #header {
	display: table;
}

.biosettings.game-container {
	background: url(../images/main-bg.jpg) top center no-repeat;
	background-size: cover;
}

.biosettings .content-container {
	width: auto;
	height: 100%;
	padding: 0 15px;
}

.biosettings .form-container {
	padding-top: 17%;
	padding-bottom: 3%;
}

.biosettings .form-bottom {
	margin-bottom: 3%;
}

.biosettings .settings-title {
	color: #333;
	font-size: 21px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.biosettings .options-title {
	color: #333;
	line-height: 1;
	/*font-size: 20px;*/
	font-size: 14px;
}

.biosettings .option-birthdate .day-wrapper,
.biosettings .option-birthdate .month-wrapper {
	float: left;
	width: 27%;
	margin-right: 3%;
}

.biosettings .option-birthdate .year-wrapper {
	float: left;
	width: 40%;
	margin-right: 0;
}

.biosettings .option-birthdate label {
	padding-left: 0;
	margin-bottom: 0;
}

.biosettings .option-birthdate input {
	text-indent: 0;
	text-align: center;
}

.biosettings .option-switch {
	padding: 0;
}

.biosettings .option-switch .icons {
	width: 10%;
	vertical-align: sub;
}

.biosettings .option-switch.switch-off {
	background: url(../images/switch-off.png) right center no-repeat;
	background-size: auto 70%;
}

.biosettings .option-switch.switch-on {
	background: url(../images/switch-on.png) right center no-repeat;
	background-size: auto 70%;
}

.biosettings .option-language {
	padding-left: 22%;
	margin-bottom: 10px;
}

.biosettings .option.lang-en {
	background: url(../images/lang-en.png) left center no-repeat;
	background-size: contain;
}

.biosettings .option.lang-fr {
	background: url(../images/lang-fr.png) left center no-repeat;
	background-size: contain;
}

.biosettings .option.lang-th {
	background: url(../images/lang-th.png) left center no-repeat;
	background-size: contain;
}

.biosettings .option.lang-ar {
	background: url(../images/lang-ar.png) left center no-repeat;
	background-size: contain;
}

.biosettings .section {
	margin-top: 3%;
	margin-bottom: 3%;
}

.biosettings .button {
	background: #333 url(../images/check-white.png) 95% center no-repeat;
	background-size: auto 33%;
}

/* endregion */

/* region Page 13 - Biorhythm */

.biorhythm {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.biorhythm #header {
	display: table;
}

.biorhythm .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.biorhythm .page-heading:after {
	background: #c2c2c2;
}

.biorhythm .page-heading .pink {
	background: #ab5776;
}

.biorhythm .page-heading .pink:before {
	background: #d66d93;
}

.biorhythm .page-heading .pink:after {
	background: #d66d93;
}

.biorhythm .page-logo {
	background: url(../images/bio_logo.png) no-repeat center #fff;
	background-size: 100% auto;
	border: 8px solid #d66d93;
	box-shadow: 0 5px #ab5776;
}

.biorhythm .page-content {
	/*padding-bottom: 10%;*/
}

.biorhythm .page-content table {
	width: 90%;
	margin: 0 5%;
	font-size: 16px;
	color: #333;
}

.biorhythm .page-content th {
	padding: 7px 0;
	font-size: 16px;
	color: #999;
}

.biorhythm .page-content td {
	padding: 12px 0;
	border-top: 1px solid #ccc;
}

.biorhythm .page-content tr td:first-child {
	text-align: left;
}

.biorhythm .page-content tr td:last-child, .biorhythm .page-content tr th:last-child {
	text-align: right;
}

.biorhythm .page-content tr.physical td:first-child {

	color: #cc0000;
}

.biorhythm .page-content tr.emotional td:first-child {
	color: #009933;
}

.biorhythm .page-content tr.intellectual td:first-child {
	color: #0066cc;
}

.biorhythm .page-content tr td:first-child:before {
	content: ' ';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 4px;
	border: 4px solid;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.biorhythm .page-content tr.physical td:first-child:before {
	border-color: #cc0000;
}

.biorhythm .page-content tr.emotional td:first-child:before {

	border-color: #009933;
}

.biorhythm .page-content tr.intellectual td:first-child:before {
	border-color: #0066cc;
}

.biorhythm .biorhythm-content {
	width: 100%;
	margin-top: 5%;
}

.biorhythm .biorhythm-description {
	text-align: left;
	font-size: 16px;
	font-weight: normal;
	width: 90%;
	margin: 0 5%;
	color: #333;
}

.biorhythm .biorhythm-description ul {
	padding-left: 20px;
}

.biorhythm .biorhythm-description ul li {
	/*padding-top: 20px;*/
}

.biorhythm .page-overlay h2 {
	color: #d66d93;
}

.biorhythm .page-overlay .submit-wrapper:after {
	background: #d66d93;
}

.biorhythm .page-overlay .submit-wrapper:before {
	background: #f7e2e9;
}

/* endregion */

/* region Page 14 - Personality test */

.personality_test, .personality_test_description, .personality_test_questions {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.personality_test #header {
	display: table;
}

.personality_test #lang-en {
	direction: ltr;
	/*text-align: left;*/
}

.personality_test #lang-fr {
	direction: ltr;
	/*text-align: left;*/
}

.personality_test #lang-ar {
	direction: rtl;
	text-align: right;
	padding-right: 10px;
}

.personality_test .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.personality_test .page-heading:after {
	background: #c2c2c2;
}

.personality_test .page-heading .pink {
	background: #b85c50;
}

.personality_test .page-heading .pink:before {
	background: #e67364;
}

.personality_test .page-heading .pink:after {
	background: #e67364;
}

.personality_test .page-logo {
	margin-bottom: -10px;
	background: url(../images/personality_logo.png) no-repeat center #fff;
	background-size: 76% auto;
	border: 8px solid #e67364;
	box-shadow: 0 5px #b85c50;
}

.personality_test .page-heading h1 {
	font-size: 20px;
}

.personality_test .page-heading h3 {
	position: relative;
	z-index: 5;
	display: block;
	text-align: center;
	margin: 5px 0;
	font-size: 12px;
	color: #ffc6be;
	text-transform: uppercase;
}

.personality_test .page-heading .another {
	position: relative;
	z-index: 5;
	display: inline-block;
	text-align: center;
	margin: 12px auto 0;
	padding: 0 25px;
	line-height: 27px;
	font-size: 12px;
	color: #fff;
	border: 2px solid #ffc6be;
	text-transform: uppercase;
}

.personality_test .expand {
	min-height: 100vh;
	background: #e67364;
}

.personality_test .expand ul {
	display: block;
	margin: 5%;
	padding-bottom: 20px;
	border-top: 1px solid #b85c50;
}

.personality_test .expand li {
	display: block;
	border-bottom: 1px solid #b85c50;
}

.personality_test .expand li a {
	display: block;
	padding: 17px 0;
	font-size: 1.1em;
}

.personality_test .page-content {
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 25px;
	text-align: left;
}

.personality_test .page-content strong {
	display: block;
	margin-bottom: 20px;
	font-size: 1.2em;
	color: #333;
}

.personality_test .page-content p {
	display: block;
	margin-bottom: 10px;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #999;
}

.personality_test .call-to-action {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #fff;
}

.personality_test .call-to-action a {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	background: #e67364;
}

.personality_test .call-to-action:before {
	content: " ";
	position: absolute;
	z-index: 1;
	top: -15px;
	left: 0;
	right: 0;
	height: 20px;
	background: #fae3e0;
	transform: skewY(-2deg);
}

.personality_test .call-to-action:after {
	content: ' ';
	position: absolute;
	z-index: 2;
	top: -5px;
	left: 0;
	right: 0;
	height: 20px;
	background: #e67364;
	transform: skewY(-1deg);
}

.personality_test .next-container a span {
	background: #e67364;
}

.personality_test .next-container a small {
	color: #ffc6be;
}

.personality_test .page-heading .steps li {
	border: 4px solid #e67364;
}

.personality_test .page-heading .steps li span {
	background: #994c42;
	border: 2px solid #fff;
}

.personality_test .page-heading .steps li.sel span {
	background: #e67364;
	border: 3px solid #fff;
}

.personality_test .page-heading .steps li.sel ~ li span {
	background: #fff;
	color: #e67364;
}

.personality_test .page-content label span {
	border-top: 1px solid #ccc;
	color: #666;
}

.personality_test .page-content label span:before {
	border: 8px solid #e5e5e5;
	background: #e5e5e5;
}

.personality_test .page-content label input:checked ~ span {
	color: #e67364;
}

.personality_test .page-content label input:checked ~ span:before {
	border-color: #e67364;
	background: #fff;
}

.personality_test .page-content label:last-child span {
	border-bottom: 1px solid #ccc;
}

.personality_test .page-content .question-wrapper {
	width: 100%;
	/*height: 150px;*/
	margin: 0 auto;
	/*overflow: hidden;*/
}

.personality_test .page-content .question-wrapper .question-picture {
	/*position: absolute;*/
	display: table;
	box-sizing: border-box;
	width: 99%;
	height: auto;
	margin: auto;
	background-color: transparent;
	background-repeat: no-repeat;
	/*background-position: top;*/
	background-position: center;
	background-size: cover;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.personality_test .page-content .question-wrapper .question-picture.has-picture {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.5);
	height: 150px;
}

.personality_test .page-content .question-wrapper .question-picture .question {
	display: table-cell;
	font-size: 20px;
	color: #333;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding: 0 0 30px;
}

.personality_test .page-content .question-wrapper .question-picture .question.has-picture {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000',GradientType=0); /* IE6-9 */
	vertical-align: bottom;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
	text-shadow: 1px 1px 0 #000, 2px 2px 1px #000, 3px 3px 2px #000;
}

.personality_test .share-container {
	margin: auto;
	position: relative;
}

.personality_test .fb-share {
	height: 35px;
	line-height: 35px;
	/*margin: 0 auto 12px;*/
	/*margin: 0 auto 35px;*/
	color: #fff;
}

.personality_test .fb-share span:before {
	width: 22px;
	height: 22px;
	background: url(../images/fb_white.png) no-repeat center;
	background-size: 100%;
}

.personality_test .fb-share:before {
	/*background: #e67364;*/
}

.personality_test .fb-share:after {
	background: rgba(0, 0, 0, 0.2);
}

/* endregion */

/* region Page 15 - IQ test */

.iq_test, .iq_test_description, .iq_test_questions {
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
}

.iq_test #header {
	display: table;
}

.iq_test #lang-en {
	direction: ltr;
	/*text-align: left;*/
}

.iq_test #lang-fr {
	direction: ltr;
	/*text-align: left;*/
}

.iq_test #lang-ar {
	direction: rtl;
	text-align: right;
	padding-right: 10px;
}

.iq_test .logo-udaily.header {
	width: 35%;
	max-width: 500px;
	display: block;
	margin: 3% auto 0;
}

.iq_test .page-heading:after {
	background: #c2c2c2;
}

.iq_test .page-heading .pink {
	background: #cba922;
}

.iq_test .page-heading .pink:before {
	background: #fed32b;
}

.iq_test .page-heading .pink:after {
	background: #fed32b;
}

.iq_test .page-logo {
	margin-bottom: -10px;
	background: url(../images/iq_logo.png) no-repeat center #fff;
	background-size: 75% auto;
	border: 8px solid #fed32b;
	box-shadow: 0 5px #cba922;
}

.iq_test .page-heading h1 {
	font-size: 20px;
	color: #333;
}

.iq_test .page-heading h3 {
	position: relative;
	z-index: 5;
	display: block;
	text-align: center;
	margin: 5px 0;
	font-size: 12px;
	color: #b2951e;
	text-transform: uppercase;
}

.iq_test .page-heading .another {
	position: relative;
	z-index: 5;
	display: inline-block;
	text-align: center;
	margin: 12px auto 0;
	padding: 0 25px;
	line-height: 27px;
	font-size: 12px;
	color: #333;
	border: 2px solid #c9a722;
	text-transform: uppercase;
}

.iq_test .expand {
	min-height: 100vh;
	background: #fed32b;
}

.iq_test .expand ul {
	display: block;
	margin: 5%;
	padding-bottom: 20px;
	border-top: 1px solid #cba922;
}

.iq_test .expand li {
	display: block;
	border-bottom: 1px solid #cba922;
}

.iq_test .expand li a {
	display: block;
	padding: 17px 0;
	font-size: 1.1em;
	color: #333;
}

.iq_test .page-content {
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 25px;
	text-align: left;
}

.iq_test .page-content strong {
	display: block;
	margin-bottom: 20px;
	font-size: 1.2em;
	color: #333;
}

.iq_test .page-content p {
	display: block;
	margin-bottom: 10px;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #999;
}

.iq_test .call-to-action {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #fff;
}

.iq_test .call-to-action a {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	background: #fed32b;
	color: #333;
}

.iq_test .call-to-action:before {
	content: " ";
	position: absolute;
	z-index: 1;
	top: -15px;
	left: 0;
	right: 0;
	height: 20px;
	background: #fff6d5;
	transform: skewY(-2deg);
}

.iq_test .call-to-action:after {
	content: " ";
	position: absolute;
	z-index: 2;
	top: -5px;
	left: 0;
	right: 0;
	height: 20px;
	background: #fed32b;
	transform: skewY(-1deg);
}

.iq_test .next-container a span {
	background: #fed32b;
	/*text-align: center;*/
	color: #333;
	/*text-indent: 0;*/
}

.iq_test .next-container a small {
	color: #b2951e;
}

.iq_test .page-heading .steps li {
	border: 4px solid #fed32b;
	color: #fed32b;
}

.iq_test .page-heading .steps li span {
	background: #333;
	border: 2px solid #fff;
}

.iq_test .page-heading .steps li.sel span {
	background: #333;
	border: 3px solid #fff;
	color: #fff;
}

.iq_test .page-heading .steps li.sel ~ li span {
	background: #fff;
	color: #333;
}

.iq_test .page-content label.wrong:after, .iq_test .page-content label.right:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	top: 3px;
	left: 0;
	right: 0;
	bottom: 2px;
}

.iq_test .page-content label.wrong:after {
	background: #e42130;
}

.iq_test .page-content label.right:after {
	background: #00a94e;
}

.iq_test .page-content label.wrong span, .iq_test .page-content label.right span {
	color: #fff !important;
}

.iq_test .page-content label span {
	position: relative;
	z-index: 2;
	border-top: 1px solid #ccc;
	color: #999;
}

.iq_test .page-content label span:before {
	border: 8px solid #e5e5e5;
	background: #e5e5e5;
}

.iq_test .page-content label input:checked ~ span {
	color: #333;
}

.iq_test .page-content label input:checked ~ span:before {
	border-color: #333;
	background: #fff;
}

.iq_test .page-content label:last-child span {
	border-bottom: 1px solid #ccc;
}

.iq_test .page-content .question-wrapper {
	width: 100%;
	/*height: 150px;*/
	margin: 0 auto;
	/*overflow: hidden;*/
}

.iq_test .page-content .question-wrapper .question-picture {
	/*position: absolute;*/
	display: table;
	box-sizing: border-box;
	width: 99%;
	height: auto;
	margin: auto;
	background-color: transparent;
	background-repeat: no-repeat;
	/*background-position: top;*/
	background-position: center;
	background-size: cover;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.iq_test .page-content .question-wrapper .question-picture.has-picture {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.5);
	height: 150px;
}

.iq_test .page-content .question-wrapper .question-picture .question {
	display: table-cell;
	font-size: 20px;
	color: #333;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding: 0 0 30px;
}

.iq_test .page-content .question-wrapper .question-picture .question.has-picture {
	color: #fff;
	text-shadow: 1px 1px 0 #000, 2px 2px 1px #000, 3px 3px 2px #000;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(80%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000',GradientType=0); /* IE6-9 */
	vertical-align: bottom;
	font-size: 18px;
	line-height: 21px;
}

.iq_test .share-container {
	margin: auto;
	position: relative;
}

.iq_test .fb-share {
	height: 35px;
	line-height: 35px;
	/*margin: 0 auto 12px;*/
	/*margin: 0 auto 35px;*/
	/*color: #333;*/
	color: #fff;
}

.iq_test .fb-share span:before {
	width: 22px;
	height: 22px;
	background: url(../images/fb_white.png) no-repeat center;
	background-size: 100%;
}

.iq_test .fb-share:before {
	/*background: #fed32b;*/
}

.iq_test .fb-share:after {
	background: rgba(0, 0, 0, 0.2);
}

/* endregion */

/* endregion */

/* region Media Queries */

/* ldpi portrait */
@media (max-width: 319px) {
	#menu .menu-wrapper a {
		display: block;
		width: 100%;
		line-height: 2.3;
	}

	#menu i.icons {
		/*margin-top: 2.5%;*/
		margin-top: 1.25%;
		margin-bottom: 1.25%;
	}

	.categories .options-container .option {
		height: 42px;
		line-height: 42px;
		margin-top: 0;
		/*padding: 0;*/
	}

	.categories .options-container .option span {
		font-size: 70%;
	}

	.biorhythm .page-content {
		padding-bottom: 55%;
	}

	.biorhythm .biorhythm-content {
		margin-top: 7%;
	}
}

/* mdpi portrait */
@media (min-width: 320px) and (max-width: 479px) {

}

/* hdpi portrait */
@media (min-width: 480px) and (max-width: 719px) {
	.categories .options-container .option br {
		display: none;
	}

	.quote .logo-udaily.header {
		width: 30%;
	}

	.quote h1{
		font-size: 5vw;
	}

	.quote h1 small {
		font-size: 3vw;
	}

	.quote h1 .quote-icon {
		width: 16%;
	}

	.horoscope .expand li strong {
		font-size: 1.3em;
		font-size: 3vw;
	}

	.horoscope .expand li small {
		font-size: 1.3em;
		font-size: 2vw;
	}
}

/* xhdpi portrait */
@media (min-width: 720px) {
	.categories .options-container .option br {
		display: none;
	}

	.quote .logo-udaily.header {
		width: 30%;
	}

	.quote h1{
		font-size: 4vw;
	}

	.quote h1 small {
		font-size: 2vw;
	}

	.quote h1 .quote-icon {
		width: 14%;
	}

	.quote .quote-container {
		width: 80%;
		margin: 20px 5% 135px;
		padding: 4% 5% 6%;
		font-size: 4vw;
		line-height: 5vw;
	}

	.quote .quote-container strong {
		top: 135%;
		font-size: 5vw;
	}

	.page-logo {
		width: 80px;
		height: 80px;
		line-height: 80px;
	}

	.page-heading:after {
		bottom: 6px;
	}

	.horoscope .expand li {
		width: 25%;
	}

	.horoscope .expand li span {
		width: 50%;
		border: 9px solid #fff;
	}

	.horoscope .expand li strong {
		font-size: 1.3em;
		font-size: 3vw;
	}

	.horoscope .expand li small {
		font-size: 1.3em;
		font-size: 2vw;
	}
}

/* endregion */


/*!* region Page 16 - Guessing game *!*/

/*.guessing_game, .guessing_game_description, .guessing_game_questions {*/
/*	background: url(../images/main-bg.jpg) no-repeat top center;*/
/*	background-size: 100%;*/
/*}*/

/*.guessing_game #header {*/
/*	display: table;*/
/*}*/

/*.guessing_game .logo-udaily.header {*/
/*	width: 35%;*/
/*	max-width: 500px;*/
/*	display: block;*/
/*	margin: 3% auto 0;*/
/*}*/

/*.guessing_game .page-heading:after {*/
/*	background: #c2c2c2;*/
/*}*/

.guessing_game .page-heading .pink {
	background: #6852a8;
	height:190px;
}



/*!* region Page 14 - Guessing game *!*/

.guessing_game {
	/*background: #04ADEF;*/
	background: url(../images/main-bg.jpg) no-repeat top center;
	background-size: cover;
  }
  
  .guessing_game #header {
	display: table;
  }
  
  .guessing_game .logo-udaily.header {
    width: 35%;
    max-width: 500px;
    display: block;
    margin: 3% auto 0;
  }
  
  .guessing_game .page-logo {
	position: relative;
	z-index: 5;
	top: -20px;
	width: 55px;
	height: 10px;
	line-height: 55px;
	margin: 0 auto;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	border-radius: 1000px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
  }

  .guessing_game .page-logo {
	margin-bottom: -10px;
	background: url(../images/personality_logo.png) no-repeat center #fff;
	background-size: 76% auto;

}

  
  .guessing_game.guess-game-page .page-content div {
	padding: 0;
	margin: 0;
  }
  
  .guessing_game.guess-game-page .page-content div.next-container {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	/*box-shadow: 0 -10px 30px 10px #fff;*/
  }
  
  /* .guessing_game .page-heading .pink {
	padding-top: 3%;
	adding-bottom: 3%;
  } */
  
  .guessing_game .page-heading h1 {
	font-size: 16px;
	height: 40px;
	line-height: 20px;
	color: #fff;
	padding-top:10px;
  }
  
  .guessing_game .page-heading h2 {
	font-weight: 400;
	font-size: 1em;
	font-size: 5vw;
	color: #808080;
	font-family: 'Raleway', sans-serif;
	text-align: center;
	/*padding-bottom: 3%;*/
	line-height: 2.5;
	/*text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);*/
  }
  
  .guessing_game .page-heading h3 {
	font-weight: 300;
	font-size: 1em;
	font-size: 5vw;
	background-color: #00aeef;
	background-image: url(../images/icon-guessing-game.png);
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: auto 80%;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	text-align: center;
	/*margin-bottom: 3%;*/
	line-height: 2.5;
	/*text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);*/
	margin-top:5px;
  }
  
  .guessing_game .page-heading .another {
	position: relative;
	z-index: 5;
	display: inline-block;
	text-align: center;
	margin: 0 auto 0;
	padding: 0 25px;
	line-height: 27px;
	font-size: 12px;
	color: #fff;
	border: 2px solid #fff;
	text-transform: uppercase;
  }
  
  .guessing_game .expand {
	min-height: 100vh;
	background: #00aeef;
  }
  
  .guessing_game .expand ul {
	display: block;
	margin: 5%;
	padding-bottom: 20px;
	/*border-top: 1px solid #b85c50;*/
  }
  
  .guessing_game .expand li {
	display: block;
	/*border-bottom: 1px solid #b85c50;*/
  }
  
  .guessing_game .expand li a {
	display: block;
	padding: 17px 0;
	font-size: 1.1em;
  }
  
  .guessing_game .page-content {
	background: #fff;
	/*background: #e6e6e6;*/
	color: #333;
	font-size: 15px;
	line-height: 25px;
	text-align: left;
  }
  
  .guessing_game .page-content strong {
	display: block;
	margin-bottom: 20px;
	font-size: 1.2em;
	color: #333;
  }
  
  .guessing_game .page-content p {
	display: block;
	margin-bottom: 10px;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #999;
  }
  
  .guessing_game .call-to-action {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #fff;
  }
  
  .guessing_game .call-to-action a {
	/*position: relative;*/
	/*z-index: 3;*/
	display: block;
	width: 100%;
	height: 100%;
	background: #00aeef;
  }
  
  .guessing_game .next-container a span {
	background: #00aeef;
  }
  
  .guessing_game .next-container a small {
	color: #fff;
  }
  
  .guessing_game .page-heading {
	/*background-color: #11897d;*/
	background-color: #fff;
  }
  
  .guessing_game .page-heading .steps li {
	border: 4px solid #00aeef;
	color: #fff;
  }
  
  .guessing_game .page-heading .steps li span {
	background: #00aeef;
	border: 2px solid #fff;
  }
  
  .guessing_game .page-heading .steps li.sel span {
	background: #00aeef;
	border: 3px solid #fff;
  }
  
  .guessing_game .page-heading .steps li.sel ~ li span {
	background: #fff;
	color: #666;
  }
  
  .guessing_game .page-content label span {
	/*border-top: 1px solid #ccc;*/
	color: #666;
  }
  
  .guessing_game .page-content label span:before {
	top: 3px;
	border: 8px solid #e5e5e5;
	background: #e5e5e5;
  }
  
  .guessing_game .page-content label input:checked ~ span {
	color: #00aeef;
  }
  
  .guessing_game .page-content label input:checked ~ span:before {
	border-color: #00aeef;
	background: #fff;
  }
  
  .guessing_game .page-content label:last-child span {
	/*border-bottom: 1px solid #ccc;*/
  }
  
  .guessing_game .page-content div.question-wrapper {
	width: 90%;
	/*height: 150px;*/
	margin: 0 auto;
	/*overflow: hidden;*/
  }
  
  .guessing_game .page-content .question-wrapper .question-picture {
	/* position: absolute; */
	display: block;
	box-sizing: border-box;
	/*width: 99%;*/
	height: auto;
	margin: auto;
	background-color: transparent;
	background-repeat: no-repeat;
	/*background-position: top;*/
	background-position: center;
	background-size: cover;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
  }
  
  .guessing_game .page-content .question-wrapper .question-picture.has-picture {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.5);
	height: 180px;
  }
  
  .guessing_game .page-content .question-wrapper .question-picture .question {
	display: table-cell;
	font-size: 20px;
	color: #333;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	/*-moz-border-radius: 20px;*/
	/*-webkit-border-radius: 20px;*/
	/*border-radius: 20px;*/
	padding: 0 10px 30px;
  }
  
  .guessing_game .page-content .question-wrapper .question-picture .question.has-picture {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.75) 100%); /* FF3.6+ $
		  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop($
		  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Chrome1$
		  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+$
		  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.75) 80%,rgba(0,0,0,0.75) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000',GradientType=0); /* IE6-9 */
	vertical-align: bottom;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
	text-shadow: 1px 1px 0 #000000;
  }
  
  .guessing_game .form-container,
  .guessing_game .form-container2 {
	margin-top: 10px;
  }
  
  .guessing_game .form-container input[type='text'] {
	font-size: 16px;
	line-height: 2;
	text-indent: 5%;
  }
  
  .guessing_game .form-container label {
	padding-left: 0;
  }
  
  .guessing_game .share-container {
	margin: auto;
	position: relative;
  }
  
  .guessing_game .fb-share {
	height: 35px;
	line-height: 35px;
	/*margin: 0 auto 12px;*/
	/*margin: 0 auto 35px;*/
	color: #fff;
  }
  
  .guessing_game .fb-share span:before {
	width: 22px;
	height: 22px;
	background: url(../images/fb_white.png) no-repeat center;
	background-size: 100%;
  }
  
  .guessing_game .fb-share:before {
	/*background: #e67364;*/
  }
  
  .guessing_game .fb-share:after {
	background: rgba(0, 0, 0, 0.2);
  }
  
  /*!* endregion *!*/