sportsbet-mobile/client/style/landing.import.less

Sportsbet mobile

.landing {
	background: url('@{cdnUrl}images/bg.jpg') no-repeat center top;
	/* background-size: 290%; */
	background-position-y: 0%;

	.register {
		margin-bottom: 0;
	}

	.modal-dialog {
		float: inherit !important;
	}

	.sidepic {
		zoom: 1;
	}

	.sidepic.man {
		right: -195px;
		left: auto;
		top: 150px;
	}

	.input-group {
		span {
			position: relative;
			display: block;
			margin-bottom: 10px;
			margin-top: 15px;
			font-size: 14px;
			font-weight: 600;
			color: #565656;
		}
	}

	[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
		line-height: 37px;
	}

	.modal-dialog {

		margin: 0px 0;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		background: #fff;
		margin-top: 0%;
		float: left;
	}

	.logo {
		text-align: center;
		margin-top: -14%;
		display: block;
		margin-bottom: 30px;
		position: absolute;
		right: 5%;
		width: 40%;
		img {
			width: 80%;
		}
	}

	.judge {
		width: 50%;
	}

	.ribbon {
		width: 30%;
		position: absolute;
		right: 10%;
	}

	.content {
		float: none;
		background: #1e1e1e;
		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
		border: 5px solid #1e1e1e;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		color: #fff;
		padding: 10px;
		padding-top: 20px;
		margin-bottom: 0px;
		text-align: center;

		.yellow-bg {
			position: relative;
			padding: 10px;
			background: #FEBF00;
			color: #4b3800;
			text-align: center;

			h1 {
				text-align: center;
			}

			p {
				padding: 0px;
				text-align: center;
				width: 85%;
				margin: 0px auto;
			}

			h2 {
				text-align: center;
				color: #4b3800;
				margin: 0px;
				font-weight: 600;
				font-size: 21px;
				margin-top: 3px;
				line-height: 21px;
				width: 95%;
				margin: 0px auto;
				margin-bottom: 5px;
			}

			.arrow {
				position: absolute;
				top: 0;
				display: none;
			}
		}

		hr {
			margin-top: 15px;
			margin-bottom: 15px;
			border: 0;
			border-top: 1px solid #000000;
			background: #353535;
			height: 1px;
		}

		h2, h1 {
			display: block;
			text-align: center;
		}
		h1 {
			margin-top: -10px;
		}

		.icon {
			display: inline-block;
			text-align: center;
			width: 35%;
			margin: 0% 5% 1% 5%;
			font-size: 12px;
			line-height: 14px;

			img {
				display: block;
				margin: 0px auto;
				margin-bottom: 10px;
				margin-top: 20px;
			}
		}

	}

	.footer {
		text-align: center;
		color: #ffffff;
		margin: 10px auto;
	}

	.registered {

		.modal-body:before {
			content: '';
			background: url('@{cdnUrl}images/registered.jpg') no-repeat center top;
			padding-top: 17%;
			display: block;
			height: 50px;
			margin-left: -10px;
			margin-right: -10px;
			background-size: 100%;
			display: none;
		}

		.modal-body {
			z-index: 9;
		}

		.modal-header {
			display: block;
			width: 100%;
			margin: 0px;
			padding: 0;
			position: relative;
			height: auto;

			img {
				width: 100%;
				margin-bottom: -7%;
			}
		}

		.modal-footer {
			text-align: center;
			padding-top: 15px;
		}

		.sidepic.man {
			right: -195px;
			left: auto;
			top: 50px;
		}

		.text {
			text-align: center;
			font-size: 13px;
			font-style: italic;
			line-height: 16px;
			b {
				text-transform: uppercase;
				color: #444444;
			}
		}

		.yellow-bg {
			position: relative;
			padding: 10px;
			padding-left: 145px;
			background: #FEBF00;
			height: 50px;
			color: #4b3800;
			margin-top: 20px;
			padding-top: 12px;
			margin-bottom: 30px;

			.whistle {
				position: absolute;
				top: -10px;
				left: 0px;
			}

			h2 {
				display: block;
				padding: 0px;
				margin: 0px;
			}
		}

		table {
			width: 100%;

			td {
				border: 1px solid #ccc;
				padding: 15px 20px;
				font-size: 11px;
			}
		}
	}

	&.secondLanding {

		> .container {
			background: url('@{cdnUrl}images/landingBg.jpg') no-repeat center top;
			background-size: 130%;
			padding: 0px;
			position: relative;
			padding-bottom: 0px;

			h3 {
				text-align: center;
				color: #fff;
				font-size: 23px;
				margin-top: -29px;
				margin-bottom: 0;
				text-shadow: 0px 2px 2px #135572;
				line-height: 34px;
			}

			.ribbon {
				position: absolute;
				top: 0px;
				right: -7px;
			}

			.logo {
				text-align: center;
				margin-top: 5%;
				display: block;
				margin-bottom: 17px;
				width: 180px;
			}

			.info {
				position: relative;
				color: #fff;
				padding: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				text-align: center;
				line-height: 18px;

				img {
					display: block;
					margin: 0px auto;
					width: 100%;
					max-width: 370px;
					margin-top: 15px;
				}
			}

			.tablet {
				margin: 0px 5%;
				position: initial;
				padding-top: 10px;
				background: rgba(2, 7, 13, 0.58);
				padding-bottom: 20px;
				width: 300px;
				margin: 0px auto;
				margin-top: 10px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				border: 1px solid #FFC300;

				h2 {
					margin: 0px auto;
					color: #FFC000;
					text-align: center;
					font-size: 23px;
					line-height: 27px;
					margin: 5px 10%;
					margin-bottom: 0;
				}

				.answer {
					margin: 0px auto;
					display: none;
					position: relative;

					&.active {
						display: block;
					}
				}

				.item {
					width: 38%;
					float: left;
					text-align: center;
					text-transform: uppercase;
					color: #fff;
					font-size: 21px;
					margin: 0px 6%;

					a {
						color: #fff;
						display: inherit;
						padding-top: 5%;
						line-height: 24px;

					}

					img {
						display: block;
						margin: 0px auto;
						margin-bottom: 10px;
						width: 70%;
					}
				}

				.choose, .check {
					position: relative;
					margin: 0px auto;
					width: 90px;
					margin-top: 14%;
					margin-bottom: -12%;

					&:before {
						content: '';
						background: url('@{cdnUrl}images/landArrows.png') no-repeat center top;
						height: 90px;
						width: 92px;
						position: absolute;
						opacity: 1;
						background-size: 35%;
					}

				}

				.check {
					&:before {
						content: '';
						height: 90px;
						width: 113px;
						position: absolute;
						opacity: 1;
						margin-top: -15%;
						zoom: 0.8;
					}

					&.true:before {
						background: url('@{cdnUrl}images/yes.png') no-repeat center top;
						opacity: 1;
					}

					&.false:before {
						background: url('@{cdnUrl}images/no.png') no-repeat center top;
						opacity: 1;
					}
				}

				a.current {
					margin-top: -1px;
					margin-left: -1px;
				}

				a.current.true {
					border: 1px solid rgba(104, 163, 0, 0.32);
					background: rgba(104, 163, 0, 0.31);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}

				a.current.false {
					border: 1px solid rgba(217, 0, 0, 0.42);
					background: rgba(217, 0, 0, 0.25);
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}

			}

			.circles {
				position: relative;
				margin: 0px auto;
				width: 90px;
				zoom: 0.7;
				margin-top: 30px;

				.circle {
					border: 1px solid #fff;
					width: 20px;
					height: 20px;
					-webkit-border-radius: 50px;
					-moz-border-radius: 50px;
					border-radius: 50px;
					float: left;
					margin: 0px 3px;

					&.active {
						background: #f7ba00;
						border: 1px solid #FFDD76;
					}

					&.checked {
						background: #272D33;
						border: 1px solid #4A5F75;
					}
				}
			}

			.content {
				width: 820px;
				background: rgba(30, 30, 30, 0);
				-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
				border: 5px solid rgba(30, 30, 30, 0);
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				margin-right: 10px;
				color: #fff;
				padding: 26px;
				padding-top: 20px;
				margin-bottom: 20px;
				float: none;
				margin: 0px auto;
				position: relative;
				z-index: 1;

				.whyImg {
					position: relative;
					display: block;
					margin: 0px auto;
					margin-top: -69px;
				}

			}

		}

	}

	.yellow-block {
		padding-top: 15px;
		padding-bottom: 10px;
		text-align: center;
		margin-left: -5px;
		margin-right: -5px;
		background: #ffc000;
		position: relative;

		h2 {
			font-size: 12px;
			color: #4b3800;
			margin-top: 0;
		}

		.que_block,
		.lounch_title {
			width: 522px;
			height: 40px;
			margin: auto;
			padding-top: 5px;
			margin-top: 10px;
			text-align: center;
			background: url('@{cdnUrl}images/deleteAfterLive/que_bg.png') no-repeat;
			background-size: 512px 39px;
			background-position: center;


			h2 {
				font-size: 14px;
				color: #fff;
				margin: 0;
				margin-top: 8px;
			}
		}

		.form_block {
			width: 522px;
			height: auto;
			margin: auto;
			margin-top: 15px;
		}

		.form_block .row {
			margin-left: -5px;
			margin-right: -5px;
		}

		.sml {
			width: 80px;
			padding-left: 5px;
			padding-right: 5px;
			float: left;
			text-align: center;

		}

		.big {
			padding-left: 5px;
			padding-right: 5px;
			float: left;
			width: 431px;
		}

		.big select {
			width: 100%;
			height: 63px;
			font-size: 14px;
			color: #444444;
			border-radius: 8px;
			border: none;
			padding: 0 10px;
			margin-bottom: 10px;
		}

		.big select:focus {
			box-shadow: none;
			outline: none;
		}

		.g_icon {
			padding: 10px 0;
			border-radius: 8px;
			background: #89c331;
		}

		.form_block input[type="submit"],
		.form_block button {
			font-size: 18px;
			color: #000000;
			display: block;
			height: 63px;
			width: 100%;
			line-height: 63px;
			border: none;
			border-top: 1px solid #fff;
			border-radius: 8px;
			box-shadow: 0 1px 2px rgba(4, 4, 4, 0.5);
			-webkit-transition: 0.3s;
			transition: 0.3s;
			font-family: 'Roboto';
			background: #89c331; /* For browsers that do not support gradients */
			background: -webkit-linear-gradient(#8ce900, #89c331); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(#8ce900, #89c331); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(#8ce900, #89c331); /* For Firefox 3.6 to 15 */
			background: linear-gradient(#8ce900, #89c331); /* Standard syntax */
		}

		.form_block input[type="submit"]:hover,
		.form_block input[type="submit"]:focus,
		.form_block button:hover,
		.form_block button:focus {
			background: #8ce900; /* For browsers that do not support gradients */
			background: -webkit-linear-gradient(#89c331, #8ce900); /* For Safari 5.1 to 6.0 */
			background: -o-linear-gradient(#89c331, #8ce900); /* For Opera 11.1 to 12.0 */
			background: -moz-linear-gradient(#89c331, #8ce900); /* For Firefox 3.6 to 15 */
			background: linear-gradient(#89c331, #8ce900); /* Standard syntax */
		}

		#thanks_msg {
			padding: 0 50px;
		}

		#thanks_msg h1 {
			font-size: 29px;
			color: #4b3800;
			margin-top: 0;
			text-transform: uppercase;
		}

		#thanks_msg h4 {
			font-size: 16px;
			line-height: 20px;
			font-weight: 400;
			color: #4b3800;
			text-transform: uppercase;
			font-family: Arial, sans-serif;
		}

		#thanks_msg p {
			font-size: 16px;
			line-height: 18px;
			color: #4b3800;
			margin-bottom: 15px;
		}

	}

}