/* MAIN ----- MAIN ----- MAIN */
/* Playing Dice ----- Playing Dice */
main .content_wrapper section .section .h1_dice {
	color: #FF6622;
	margin: 0 0 1% 0;
	font-size: 3.5vw;
	text-align: center;
}


main .content_wrapper section .section .button_dice {
	display: block;
	background-color: #008888;
	color: #FFFFFF;
	margin: 0 auto 3% auto;
	width: 30vw;
	padding: 2%;
	font-size: 3.8vw;
	font-weight: bold;
	border-top: 0.8vw solid #00FFFF;
	border-right: 0.8vw solid #005555;
	border-bottom: 0.8vw solid #005555;
	border-left: 0.8vw solid #00FFFF;
	border-radius: 1.5vw;
	cursor: pointer;
}

.text_link {
	color: #FF6622;
	font-style: bold;
	text-decoration: none;
}

.dice_wrap, .dice_side1, .dice_side2, .dice_side3, .dice_side4, .dice_side5, .dice_side6, .dots_one, .dots_two, .dots_three, .dots_four, .dots_five, .dots_six, .dots_seven {
	margin: 0;
	padding: 0;
}

.dice_wrap {
	margin: 0 auto 3% auto;
	width: 25vw;
	height: 25vw;
	border: #333333 solid 1px;
	border-radius: 11%;
}

.dice_side1, .dice_side2, .dice_side3, .dice_side4, .dice_side5, .dice_side6 {
	display: none;
	position: relative;
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
	border-radius: 10%;
}

.dots_one {
	position: absolute;
	top: 8%;
	left: 8%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_two {
	position: absolute;
	top: 8%;
	left: 40%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_three {
	position: absolute;
	top: 8%;
	left: 72%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_four {
	position: absolute;
	top: 40%;
	left: 40%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_five {
	position: absolute;
	top: 72%;
	left: 8%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_six {
	position: absolute;
	top: 72%;
	left: 40%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}

.dots_seven {
	position: absolute;
	top: 72%;
	left: 72%;
	background-color: #FF0000;
	width: 20%;
	height: 20%;
	border-radius: 50%;
}
/* Playing Dice ----- Playing Dice */


/* Playing Keyboard ----- Playing Keyboard */
.piano_keyboard_wrapper {
	margin: 0 auto 3% auto;
	width: 50vw;
	height: 30vw;
}

.piano_keyboard_wrapper ul {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	list-style: none;
}

.piano_keyboard_wrapper ul li {
	background-color: #EEEEEE;
	position: absolute;
	width: 13%;
	height: 100%;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	border-radius: 0 0 0.8vw 0.8vw;
	cursor: pointer;
}

.piano_keyboard_wrapper ul li:nth-child(1) {
	left: 0;
}

.piano_keyboard_wrapper ul li:nth-child(1):hover {
	background-color: #BE79DF;
}

.piano_keyboard_wrapper ul li:nth-child(2) {
	left: 13.6%;
}

.piano_keyboard_wrapper ul li:nth-child(2):hover {
	background-color: #323EDD;
}

.piano_keyboard_wrapper ul li:nth-child(3) {
	left: 27.2%;
}

.piano_keyboard_wrapper ul li:nth-child(3):hover {
	background-color: #18B0B0;
}

.piano_keyboard_wrapper ul li:nth-child(4) {
	left: 40.8%;
}

.piano_keyboard_wrapper ul li:nth-child(4):hover {
	background-color: #5B8C5A;
}

.piano_keyboard_wrapper ul li:nth-child(5) {
	left: 54.4%;
}

.piano_keyboard_wrapper ul li:nth-child(5):hover {
	background-color: #FFFF00;
}

.piano_keyboard_wrapper ul li:nth-child(6) {
	left: 68%;
}

.piano_keyboard_wrapper ul li:nth-child(6):hover {
	background-color: #FFA41B;
}

.piano_keyboard_wrapper ul li:nth-child(7) {
	left: 81.6%;
}

.piano_keyboard_wrapper ul li:nth-child(7):hover {
	background-color: #FF1E56;
}

.C1:before, .D1:before, .F1:before, .G1:before, .A1:before {
	content: "";
	position: absolute;
	top: 0;
	left: 72%;
	z-index: 5;
	background-color: #222222;
	width: 60%;
	height: 62%;
	border-radius: 0 0 0.6vw 0.6vw;
}
/* Playing Keyboard ----- Playing Keyboard */

/* CSS Clock ----- CSS Clock */
.clock_wrapper {
	margin: 0 auto 3% auto;
	width: 35vw;
	height: 35vw;
}

.clock_body {
	position: relative;
	background-color: #B7472A;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.left_number {
	position: absolute;
	background-color: #EB9788;
	top: 20%;
	left: 14%;
	width: 32%;
	height: 60%;
	border-radius: 2vw;
}

.right_number {
	position: absolute;
	background-color: #EB9788;
	top: 20%;
	left: 54%;
	width: 32%;
	height: 60%;
	border-radius: 2vw;
}

#left_top, #left_bottom, #right_top, #right_bottom {
	position: absolute;
	background-color: #B7472A;
}

.zero_top {
	top: 14.3%;
	left: 25%;
	width: 50%;
	height: 35.7%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.zero_bottom {
	top: 50%;
	left: 25%;
	width: 50%;
	height: 35.7%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.one_top {
	top: 0;
	left: 0;
	width: 75%;
	height: 50%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: 0.5s ease, height 0.5s ease;
}

.one_bottom {
	top: 50%;
	left: 0;
	width: 75%;
	height: 50%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.two_top {
	top: 14.3%;
	left: 0;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.two_bottom {
	top: 57.15%;
	left: 25%;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.three_top {
	top: 14.3%;
	left: 0;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.three_bottom {
	top: 57.15%;
	left: 0;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.8s ease, height 0.5s ease;
}

.four_top {
	top: 0;
	left: 25%;
	width: 50%;
	height: 42.85%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.four_bottom {
	top: 57.15%;
	left: 0;
	width: 75%;
	height: 42.85%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.five_top {
	top: 14.3%;
	left: 25%;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.five_bottom {
	top: 57.15%;
	left: 0;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.six_top {
	top: 14.3%;
	left: 25%;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.six_bottom {
	top: 57.15%;
	left: 25%;
	width: 50%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.seven_top {
	top: 14.3%;
	left: 25%;
	width: 50%;
	height: 14.3%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.seven_bottom {
	top: 28.6%;
	left: 0;
	width: 75%;
	height: 71.4%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.eight_top {
	top: 14.3%;
	left: 25%;
	width: 50%;
	height: 28.6%;

	-webkit-transition: width 0,5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.eight_bottom {
	top: 57.15%; 
	left: 25%;
	width: 50%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0s ease;
}

.nine_top {
	top: 14.3%;
	left: 25%;
	width: 50%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.nine_bottom {
	top: 57.15%;
	left: 0;
	width: 75%;
	height: 28.6%;

	-webkit-transition: width 0.5s ease, height 0.5s ease;
	transition: width 0.5s ease, height 0.5s ease;
}

.clock_marks {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	border-radius: 50%;
}

.clock_marks li{
	position: absolute;
	background-color: #f2a51a;
	top: 0;
	left: 49.6%;
	z-index: 10;
	width: 0.5%;
	height: 6.25%;
	-webkit-transform-origin: 50% 800%;
	-ms-transform-origin: 50% 800%;
	transform-origin: 50% 800%;
}

.clock_marks li:nth-child(2) {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

.clock_marks li:nth-child(3) {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

.clock_marks li:nth-child(4) {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.clock_marks li:nth-child(5) {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
}

.clock_marks li:nth-child(6) {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

.clock_marks li:nth-child(7) {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.clock_marks li:nth-child(8) {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
}

.clock_marks li:nth-child(9) {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
}

.clock_marks li:nth-child(10) {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

.clock_marks li:nth-child(11) {
	-webkit-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	transform: rotate(300deg);
}

.clock_marks li:nth-child(12) {
	-webkit-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	transform: rotate(330deg);
}

.hour_hand {
	position: absolute;
	/*top: 46.5%;*/
	top: 45.2%;
	left: 45.2%;
	z-index: 20;
	width: 1.5vw;
	height: 1.5vw;
	border: 1vw solid #000000;
	border-radius: 50%;
}

.hour_hand:before {
	position: absolute;
	background-color: #000000;
	content: "";
	top: -770%;
	left: -3%;
	width: 100%;
	height: 11vw;
}

.minute_hand {
	position: absolute;
	top: 46%;
	left: 45.8%;
	/*left: 0.6%;*/
	z-index: 30;
	width: 1vw;
	height: 1vw;
	border: 1vw solid #FFFFFF;
	border-radius: 50%;
}

.minute_hand:before {
	position: absolute;
	background-color: #FFFFFF;
	content: "";
	top: -1500%;
	left: 9%;
	width: 80%;
	height: 15vw;
}
/* CSS Clock ----- CSS Clock */
/* MAIN ----- MAIN ----- MAIN */