section.promo {
	width: 100%;
	min-height: 100vh;
	background-color: #eee;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	font-family: "Open Sans";
	padding: 60px 0 0; }

	section.promo .social {
		position: absolute; right: 20px; top: -50px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 5px;
		z-index: 100; }
		section.promo .social .so {
			display: grid;
			color: white;
			text-align: center; }
			section.promo .social .so.fb,
			section.promo .social .so.tw {
				border-radius: 5px;
				padding: 10px 15px;
				box-shadow: 0 3px 3px rgba(0,0,0,0.3) }
			section.promo .social .so.fb { background-color: var(--frame-social-fb); }
			section.promo .social .so.tw { background-color: var(--frame-social-tw); }
			section.promo .social .so a { color: white; }
			section.promo .social .so i { font-size: 18px; }
			section.promo .social .so p {
				place-self: center;
				background-color: rgba(0,0,0,0.5);
				border-radius: 5px;
				padding: 5px 15px;
				margin: 0;
				box-shadow: 0 3px 3px rgba(0,0,0,0.3); }

	section.promo .head-grid {
		display: grid;
		grid-template-columns: 450px 1fr;
		grid-gap: 10px; }

		section.promo .head-grid .action {
			display: grid;
			grid-template-rows: 1fr 50px;
			grid-gap: 10px; }

			section.promo .head-grid .image { }
			section.promo .head-grid .image img { max-width: 100%; }

			section.promo .head-grid .buttons {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 10px; }
				section.promo .head-grid .buttons .button {
					width: 100%;
					height: 100%;
					background-color: grey;
					color: white;
					font-size: 16px;
					font-weight: 700;
					line-height: 1;
					text-transform: uppercase;
					text-align: center;
					border-radius: 5px;
					padding: 17px 0 0;
					box-shadow: 0 3px 3px rgba(0,0,0,0.3);
					cursor: pointer; }
					section.promo .head-grid .buttons .button.mech { background-color: #ff00ce }
					section.promo .head-grid .buttons .button.form { background-color: #ecbf3a }

		section.promo .head-grid .video {}  
			section.promo .head-grid .video iframe,
			section.promo .head-grid .video video {
				display: block; 
				width: 100%;
				box-shadow: 0 3px 3px rgba(0,0,0,0.3); }

	section.promo .box {
		width: 100%;
		background-color: white;
		margin: 30px 0 0; }

		section.promo .box .sect { padding: 50px 100px 70px; }
		section.promo .box .sect.dark { background-color: #3d4150; color: white; }

		section.promo .box .title {
			font-size: 40px;
			font-weight: 800;
			line-height: 1;
			text-align: center;
			text-transform: uppercase;
			margin-bottom: 10px; }
		section.promo .box .subtitle {
			font-size: 25px;
			font-weight: 700;
			line-height: 1;
			text-align: center;
			text-transform: uppercase;
			margin-bottom: 30px; }
		section.promo .box .content {
			text-align: center; }

	section.promo .mech-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 30px;
		margin: 30px 0 0; }
		section.promo .mech-grid .item .icon { text-align: center; }
			section.promo .mech-grid .item .icon img { 
				width: 90px; height: 90px;
				background-color: #32ccfe;
				border-radius: 100%;
				padding: 10px; }
		section.promo .mech-grid .item .name { 
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			margin: 20px 0 10px; }
	section.promo .mech-pop {
		display: grid;
		margin: 30px 0 0; }
	section.promo .mech-pop .button {
		place-self: center;
		background-color: rgba(0,0,0,0.3);
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		padding: 17px 30px;
		border-radius: 5px;
		cursor: pointer; }

	section.promo .form-grid {
		display: grid;
		grid-template-columns: 450px 1fr;
		grid-gap: 10px;
		margin: 30px 0 0; }

		section.promo .form-grid .image { }
		section.promo .form-grid .image img { max-width: 100%; }

		section.promo .form-grid .form { }
		section.promo .form-grid .form .input-box { position: relative; }
		section.promo .form-grid .form .input-box.submit { text-align: right; } 

			section.promo .form-grid .form .input-box label {
				padding: 0 30px;
				margin: 10px 0 3px; } 
			section.promo .form-grid .form .input-box input { 
				width: 100%;
				padding: 10px 30px;
				border-radius: 3px;
				border: 1px solid rgba(0,0,0,0.3); }
			section.promo .form-grid .form .input-box input[type="submit"] {
				display: inline-block;
				width: auto;
				background-color: #32ccfe;
				color: white;
				text-transform: uppercase;
				margin: 30px 0 0;
				cursor: pointer;
				transition: 0.3s; } 
				section.promo .form-grid .form .input-box input[type="submit"].blocked {
					background-color: grey;
					opacity: 0.3;
					cursor: not-allowed;
					transition: 0.3s; }

		section.promo .form-grid .form .input-box.checkbox {
			display: grid;
			grid-template-columns: 40px 1fr;
			margin: 5px 0; }
			section.promo .form-grid .form .input-box.checkbox input { place-self: center; }
			section.promo .form-grid .form .input-box.checkbox label { line-height: 1.2; padding: 0; margin: 0; }

			section.promo .form-grid .form .input-box .preview {
				width: 100%;
				margin: 10px 0 0 }

			section.promo .form-grid .form .input-box .error {
			    position: absolute; right: 0; top: 13px;
			    font-size: 12px;
			    color: red;
			    visibility: hidden; }

			section.promo .form-grid .form .input-box.error .error { visibility: visible;  }
			section.promo .form-grid .form .input-box.error label { color: red; } 
			section.promo .form-grid .form .input-box.error input { border-color: red; } 

section.promo-blocked { 
	display: grid;
	padding: 100px 0 0; }
	section.promo-blocked .image { 
		place-self: center;
		text-align: center; }
		section.promo-blocked .image img { width: 300px; max-width: 100%; filter: saturate(0); }
		section.promo-blocked .text {
		    text-align: center;
		    margin: 30px 0; }
			section.promo-blocked .text span {
				color: white;
			    font-size: 16px;
			    font-weight: bold;
				background-color: var(--frame-main);
		    	padding: 10px 30px; }

section.promo-submit {
	height: calc(100vh - 200px);
	display: grid; }

	section.promo-submit .box {
		animation: submitPop 0.5s both;
		animation-delay: 1.5s;
		place-self: center;
		text-align: center;
		padding: 15px; }

		section.promo-submit .box .icon {
			animation: submitPopIcon 0.3s both;
			animation-delay: 2s;
			font-size: 100px;
			margin: 0 0 10px; }
			section.promo-submit.success .box .icon { color: #5abf15; }
			section.promo-submit.failed .box .icon { color: #e3bc20; }
		section.promo-submit .box .message {
			font-size: 18px;
			font-weight: bold;
			margin: 0 0 10px; }
		section.promo-submit .box .link { 
			background-color: var(--frame-main);
			color: white;
			padding: 5px 15px; }

section.promo-press {
	display: grid;
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,0.9);
	z-index: 10000; }
	section.promo-press .box {
		animation: submitPop 0.5s both;
		place-self: center;
		text-align: center;
		padding: 15px; }

		section.promo-press .box .icon {
			animation: submitPopIcon 0.3s both;
			animation-delay: 0.5s;
			color: var(--frame-main);
			font-size: 60px;
			margin: 0 0 10px; }
			section.promo-press .box .icon i { animation: submitSpinIcon 1s infinite linear; }
		section.promo-press .box .message {
			font-size: 18px;
			font-weight: bold; }

@media(max-width: 900px) {
	section.promo .head-grid { grid-template-columns: 1fr; }
	section.promo .head-grid .image { text-align: center; }
	section.promo .mech-grid { grid-template-columns: 1fr 1fr; }
	section.promo .form-grid { grid-template-columns: 1fr; }
	section.promo .form-grid .image { text-align: center; }
}
@media(max-width: 425px) {
	section.promo .box .sect { padding: 30px 20px; }
	section.promo .mech-grid { grid-template-columns: 1fr; }
}

@keyframes submitPop {
	0% { opacity: 0; transform: translateY(100px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes submitPopIcon {
	0% { transform: scale(0); }
	60% { transform: scale(1.1); }
	100% { transform: scale(1); }
}
@keyframes submitSpinIcon {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

/*SHOWS*/

section.promo.fill-in-the-bank .head-grid .buttons .button { background-color: #ef4136; }
section.promo.fill-in-the-bank .box #promo-head { background-color: #d870ad; }
section.promo.fill-in-the-bank .box #promo-mechanics { background-color: #4b89dc; }
section.promo.fill-in-the-bank .mech-grid .item .icon img {
	width: 120px;
	height: 120px;
    background-color: transparent;
    border: 5px solid white; }


section.promo.bawal-na-game-show .head-grid .buttons .button { background-color: #4445bb; }
section.promo.bawal-na-game-show .box #promo-head { background-color: #3baeda; }
section.promo.bawal-na-game-show .box #promo-mechanics { background-color: #ed5564; }
section.promo.bawal-na-game-show .mech-grid .item .icon img {
	width: 120px;
	height: 120px;
    background-color: transparent;
    border: 5px solid white; }