@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(160, 160, 160, 0.5);
	outline: 1px solid rgba(160, 160, 160, 0.8);
}

a {
	color: inherit;
}

a:hover {
	text-decoration: none;
	color: inherit;
}

a:visited {
	text-decoration: none;
	outline: none;
}

a:active {
	text-decoration: none;
	color: inherit;
}

* {
	font-family: 'Roboto', serif;
}

html,
body {
	overflow: hidden;
}

body {
	min-height: 100vh;
	height: 97vh;
	padding: 0;
	margin: 10px auto 0 auto;
	overflow: hidden;
}

.container {
	width: 70%;
	position: relative;
	border-radius: 50px;
	height: 97vh;
	border: 60px solid #464646;
	box-shadow: 0px 10px 17px #1F1F1F;
	background: url(../img/wallpaper.jpg) no-repeat center center;
	background-size: cover;
	overflow: hidden;
	padding: 0 !important;
}

.notification-bar {
	padding-right: 10px;
	height: 22px;
	background: -webkit-linear-gradient(top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
}

.notification-bar .time {
	color: #FFF;
}

.dock {
	position: absolute;
	bottom: 10vh;
	width: 100%;
	height: 10vh;
	margin-left: 0;
}

.dock>div {
	height: 9vh;
}

.dock>div[class^=col-xs] {
	cursor: pointer;
}

.onscreen-nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 9vh;
	padding-top: 20px;
	background: -webkit-linear-gradient(bottom, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	margin-left: 0px;
	z-index: 200;
}

.onscreen-nav i {
	font-size: 28px;
	cursor: pointer;
}

.maps {
	background: url(../img/icons/maps.png) no-repeat center center;
	background-size: contain;
}

.contact {
	background: url(../img/icons/contacts.png) no-repeat center center;
	background-size: contain;
}

.appdrawer {
	background: url(../img/icons/Drawer.png) no-repeat center center;
	background-size: contain;
}

.rules {
	background: url(../img/icons/book.png) no-repeat center center;
	background-size: contain;
}

.reg {
	background: url(../img/icons/Docks.png) no-repeat center center;
	background-size: contain;
}

.apps-page {
	width: 95%;
	height: 65vh;
	padding: 10px 20px 10px 20px;
	margin: 15px auto;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 100px rgba(15, 15, 15, 1.00);
}

.apps-page div[class^="col-"] {
	padding: 10px 20px 10px 20px;
}

.apps-page img {
	cursor: pointer;
	width: 80%;
}

.app-open {
	position: absolute;
	top: 22px;
	width: 100%;
	height: 70vh;
	background: rgba(243, 243, 243, 1.00);
}

.app-content * {
	text-align: justify;
}

.app-open .side-panel {
	color: rgba(255, 255, 255, 1.00);
	height: 70vh;
	background: #0288d1;
	padding: 20px;
	text-align: center;
}

.app-open .side-panel #img {
	padding-right: 0px !important;
}

.app-open .side-panel ul {
	list-style: none;
	text-align: center;
	padding: 0px !important;
}

.app-open .app-content>div {
	height: 62vh;
	width: 95%;
	margin: 20px 20px 20px 10px;
	padding: 0 !important;
	background: rgba(255, 255, 255, 1.00);
	overflow-y: auto;
}

.heading {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding: 6px 10px 5px 10px;
	background: #364049;
	color: rgba(255, 255, 255, 1.00);
}

.app-open .app-content #desc {
	padding: 20px 20px 0px 20px;
	overflow-y: auto;
	font-size: 16px;
}

.app-open .app-content #rls {
	padding: 10px 10px -5px 10px;
	overflow-y: auto;
	font-size: 15px;
}

#title>h3.title {
	font-size: 25px;
	font-weight: bold;
}

#title>.tagline {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-style: italic;
	font-size: 15px;
}

#heads>ul>li {
	font-size: 16px;
}

#rls>h4 {
	font-weight: bold;
	padding-left: 20px;
}

.contacts h3 {
	font-weight: bold;
}

#registration .reg-form {
	height: 65.5vh;
	width: 100%;
	padding: 30px 30px 60px 30px !important;
	background: rgba(255, 255, 255, 1.00);
	overflow-y: auto;
}

#registration .reg-form h4 {
	color: #000;
}

#registration {
	-webkit-animation-duration: 1.5s;
	-moz-animation-duration: 1.5s;
	-ms-animation-duration: 1.5s;
	-o-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

.apps-page {
	-webkit-animation-duration: 0.7s;
	-moz-animation-duration: 0.7s;
	-ms-animation-duration: 0.7s;
	-o-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

.opaque-bar {
	animation: backfade 1s;
	-webkit-animation: backfade 1s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes backfade {
	0% {
		background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	}
	100% {
		background: #364049;
	}
}

@-moz-keyframes backfade {
	0% {
		background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	}
	100% {
		background: #364049;
	}
}

@-ms-keyframes backfade {
	0% {
		background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	}
	100% {
		background: #364049;
	}
}

@-o-keyframes backfade {
	0% {
		background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	}
	100% {
		background: #364049;
	}
}

@keyframes backfade {
	0% {
		background: linear-gradient(to top, rgba(193, 193, 193, 0.0), rgba(67, 67, 67, 0.4));
	}
	100% {
		background: #364049;
	}
}

@media only screen and (max-device-width: 760px) {
	::-webkit-scrollbar {
		width: 8px;
	}
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
	}
	::-webkit-scrollbar-thumb {
		background-color: #364049;
		outline: 1px solid rgba(160, 160, 160, 1);
	}
	html,
	body {
		margin: 0px !important;
		padding: 0px !important;
	}
	.container {
		border: none;
		height: 100vh;
		border-radius: 0;
		box-shadow: none;
		width: 100%;
	}
	.onscreen-nav {
		z-index: 100;
	}
	.dock {
		height: 9vh;
	}
	.apps-page {
		height: 83vh;
	}
	.apps-page div[class^="col-"] {
		padding: 10px;
		height: 80px;
	}
	.apps-page h4 {
		font-size: 12px;
	}
	.app-open {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.app-open .side-panel {
		height: 87vh;
		overflow-y: visible;
	}
	.app-content #rls {
		margin: 10px 10px 0px 10px !important;
	}
	.app-open #title>.title {
		display: block;
	}
	.app-open .app-content>div {
		height: auto;
		width: 95%;
	}
	#registration .reg-form {
		height: 80vh;
	}
}

.container1 {
	position: absolute;
	height: 100px;
	width: 100px;
	left: 50%;
	top: 45%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-perspective: 400px;
	perspective: 400px;
}

.cube {
	height: 100px;
	widht: 100px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation: rotate 4s infinite ease-in-out;
	animation: rotate 4s infinite ease-in-out;
}

.side {
	position: absolute;
	display: block;
	height: 100px;
	width: 100px;
}

.side1 {
	background: #41C3AC;
	-webkit-transform: translateZ(100px);
	transform: translateZ(100px);
}

.side2 {
	background: #FF884D;
	-webkit-transform: rotateY(90deg) translateZ(100px);
	transform: rotateY(90deg) translateZ(100px);
}

.side3 {
	background: #32526E;
	-webkit-transform: rotateY(180deg) translateZ(100px);
	transform: rotateY(180deg) translateZ(100px);
}

.side4 {
	background: #65A2C5;
	-webkit-transform: rotateY(-90deg) translateZ(100px);
	transform: rotateY(-90deg) translateZ(100px);
}

.side5 {
	background: #FFCC5C;
	-webkit-transform: rotateX(90deg) translateZ(100px);
	transform: rotateX(90deg) translateZ(100px);
}

.side6 {
	background: #FF6B57;
	-webkit-transform: rotateX(-90deg) translateZ(100px);
	transform: rotateX(-90deg) translateZ(100px);
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	33.33% {
		-webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg);
	}
	66.66% {
		-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}

@keyframes rotate {
	0% {
		transform: rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: rotateX(360deg) rotateY(0deg);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

a {
	font-family: helvetica;
	color: #428bca;
	text-align: center;
	display: block;
}

.container2 {
	left: 66%;
}

.container2 .side {
	border-radius: 50%;
}