* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	list-style: none;
	font-family: sans-serif;
	font-family: 'Open Sans Condensed', sans-serif;
}

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

body {
	background-color: #000;
	background-image: url(../assets/images/background.jpg);
	/*background-position: center;*/
	/*background-size: contain;*/
}

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

section {
	display: none;
	color: #fff;
	width: 100%;
	height: 100%;
}

	/*section div {
		border: 1px solid #fff;
		margin: 20px;
	}*/

	section#intro {
		text-align: center;
	}

		section#intro button#btnIntroEnter {
			/*width: 30%;*/
			border: none;
			/*height: 80px;*/
			background-color: #6aadd3;
			color: #fff;
			font-size: 25px;
			display: inline-block;
			padding: 10px 30px;
			margin-top: 30px;
			text-transform: uppercase;
		}

		section#intro div.intro-image {
			width: 100%;
			height: 80%;
			background-image: url(../assets/images/intro.jpg);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}

	section#datepicker {
		/*background-color: yellow;*/
		text-align: center;
	}

		section#datepicker h2.chooser-logo{
			width: 100%;
			height: 75%;
			background-image: url(../assets/images/chooser_logo.png);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}

		section#datepicker div.number-spinner {
			width: 20%;
			display: block;
			text-align: left;
			margin-right: 5%;
			float: left;
		}

			section#datepicker div.number-spinner:first-of-type {
				margin-left: 15%;
			}

			section#datepicker div.number-spinner span {
				display: block;
				height: 40px;
				font-family: sans-serif;
				text-transform: uppercase;
				font-size: 25px;
			}

			section#datepicker div.number-spinner input {
				float: left;
				width: 60%;
				height: 100%;
				border: none;
				display: block;
				height: 80px;
				outline: none;
				font-size: 60px;
				background-color: rgba(255, 255, 255, .1);
				color: #fff;
				padding: 10px;
				border-left: 4px solid #6aadd3;
				border-top: 4px solid #6aadd3;
				border-bottom: 4px solid #6aadd3;
			}

			section#datepicker div.number-spinner button {
				width: 20%;
				height: 100%;	
				border: none;
				display: block;
				height: 80px;
				outline: none;
				float: left;
				background-color: rgba(255, 255, 255, .1);
				border-bottom: 4px solid #6aadd3;
				border-top: 4px solid #6aadd3;
				color: #fff;
				font-size: 40px;
				font-weight: bold;
			}

			section#datepicker div.number-spinner button.down {
				border-right: 4px solid #6aadd3;
			}

		div.button-holder {
			display: block;
			width: 20%;
			float: left;
		}	

			div.button-holder span {
				display: block;
				height: 40px;
			}

			div.button-holder button#btnShowHoroscope {
				width: 100%;
				border: none;
				/*margin-top: 40px;*/
				height: 80px;
				background-color: #6aadd3;
				color: #fff;
				font-size: 40px;
				display: inline-block;
			}

	section#horoscope {
		/*background-color: yellow;*/
		padding: 20px;
	}

		section#horoscope .holder-left {
			float: left;
			width: 25%;
			height: 100%;
		}

			section#horoscope .holder-left .welcome-text {
				height: 23%;
				position: relative;
				/*background-color: yellow;*/
			}

				section#horoscope .holder-left .welcome-text span {
					display: block;
					width: 100%;
					height: 50%;
					background-image: url(../assets/images/sign_top_text.png);
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					position: absolute;
					bottom: 40px;
				}

			section#horoscope .holder-left .panel {
				height: 77%;
				background-color: rgba(99, 165, 238, .5);
			}

				section#horoscope .holder-left .panel .panel-header {
					background-color: #011450;
					padding: 10px;
					text-transform: uppercase;
				}

				section#horoscope .holder-left .panel .panel-general {
					padding: 10px;
				}


		section#horoscope .holder-right {
			float: left;
			width: 75%;
			height: 100%;
			/*padding: 40px;*/
		}
			
			section#horoscope .holder-right .holder-right-top {
				height: 60%;
			}

				section#horoscope .holder-right .holder-right-top .right-top-one {
					background-image: url(../assets/images/sign_details_big_graphics.png);
					background-repeat: no-repeat;
					background-size: contain;
					height: 100%;
					width: 50%;
					position: relative;
					margin-left: 2%;
					float: left;
				}

					section#horoscope .holder-right .holder-right-top .right-top-one span {
						display: block;
						position: absolute;
						bottom: 20px;
						text-align: center;
						font-size: 80px;
						width: 100%;
						text-transform: uppercase;
						font-weight: bold;
					}

				section#horoscope .holder-right .holder-right-top .right-top-two {
					height: 100%;
					float: left;
					width: 30%;
					/*background-image: url(../assets/images/sign_details_logo.png);*/
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}

				section#horoscope .holder-right .holder-right-top .right-top-three {
					height: 100%;
					float: left;
					/*background-color: lime;*/
					width: 18%;	
					background-image: url(../assets/images/sign_details_logo.png);
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}

			section#horoscope .holder-right .holder-right-bottom {
				height: 40%;
			}

			section#horoscope .holder-right .holder-right-bottom {

			}

				section#horoscope .holder-right .holder-right-bottom .panel {
					width: 30%;
					float: left;
					margin-left: 3.3%;
					background-color: rgba(99, 165, 238, .5);
					height: 100%;
					opacity: .3;
					transition: all .3s ease-in-out;
				}

				section#horoscope .holder-right .holder-right-bottom .panel .panel-header {
					background-color: #011450;
					padding: 10px;
					text-transform: uppercase;
					font-weight: bold;
				}

					section#horoscope .holder-right .holder-right-bottom .panel .panel-header img {
						height: 20px;
						float: right;
					}

				section#horoscope .holder-right .holder-right-bottom .panel .panel-content {
					padding: 10px;
					/*overflow-y: scroll;*/
					height: 100%;
				}

#back {
	color: #f58926;
	border: none;
	position: absolute;
	z-index: 10;
	background-color: transparent;
	top: 20px;
	left: 20px;
	font-size: 20px;
	text-transform: uppercase;
	outline: none;
	display: none;
}

.player {
	display: none;
}