/*
Project:  TNDV } CMA Awards
Developer: Internet Imagineering, LLC
All Rights Reserved.
*/

/* GOOGLE FONTS
font-family: 'Jost', sans-serif;
*/


body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Jost', verdana, arial, sans-serif;
	color: #333;
	font-size: 16px;
}

.clear { clear: both;}

.imgfade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.imgfade:hover {opacity: 0.5;}

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

.alignright {text-align: right;}
.alignleft {text-align: left;}

.alignleftheading {float: left; margin: 0 0 0 50px !important; }

*, *:before, *:after {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}


.error {color: #900; font-weight: bold;}

/* LOBBY */

	.watchWrapper {width: 100%; background: #735630 url("/images/cma-2022-background.jpg") no-repeat top; min-height: 2000px;}
	
	.lobbyWrapper {width: 100%; background: #735630 url("/images/cma-2022-background.jpg") no-repeat top; min-height: 2000px;}
	.lobbyContainer {margin: 0 auto; padding: 60px 0;}
	
	input.formLogin-textLobby {width: 80%; border: 1px solid #fff; color: #fff;  padding: 10px 10px; text-align: left; font-size: 20px !important; margin: 10px auto;}
	
/* LOGIN */

	.loginWrapper {margin: 0px auto 0 auto; width: 500px; text-align: center;}
	.loginWrapper-lobby {margin: 0px auto 0 auto; width: 90%; max-width: 700px; text-align: center; background-color: #fff; padding: 20px; opacity: .9;}
	.loginLogo { width: 100px; background-color: #fff; margin: -30px 0 0 0; text-align: center; padding: 20px 0;}
	.loginLogo img {width: 100%;}
	
	input.formLogin-text {width: 80%; border: 1px solid #566d9c;  padding: 10px 10px; text-align: left; color: #000; font-size: 20px !important; margin: 10px auto;}
	input.formButton-button {width: 85%; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; color: #333; background-color: #fff; border: 0px; padding: 20px 0; margin: 20px 0;}
	
	.loginError {color: #900; text-align: center; margin: 0 auto; font-weight: bold;}
	
	.loginElement {width: 90%; margin: 20px auto;}
		.loginHolder-label {float: left; width: 20%; font-weight: bold; text-align: left; margin: 10px 0 0 0;}
		.loginHolder-form {float: right; width: 70%;}
		
	button.buttonWatch {background-color: #223a54; color: #fff; font-size: 18px; width: 90%; text-align: center; padding: 20px 0; border: 0px;}
	
/* VIDEO GLOBAL */
	
	.video-holder {width: 100%;}
	.video-container-yt { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
	.video-container-yt iframe, .video-container-yt object, .video-container-yt embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
	
/* WATCH */

	.wrapperTopBar {width: 100%; background-color: #131926; display: grid; grid-template-columns: 160px auto; align-items: center;}
		.holderLogo {width: 100%; margin: 10px 0 10px 20px;}
		.holderLogo img {width: 100%;}
		.holderLogout {text-align: right; margin: 0px 20px 0 0; text-transform: uppercase; font-size: 14px; letter-spacing: 3px; font-weight: bold;}
			.holderLogout a {color: #e1e1e1; text-decoration: none;}
			.holderLogout a:visited {color: #e1e1e1; text-decoration: none;}
			.holderLogout a:hover {color: #fff; text-decoration: none;}	

	.wrapperVideo {width: 90%; background-color: #131926; max-width: 1040px; margin: 100px auto; padding: 3%; box-shadow: 0px 5px 20px #fff9;}

	.copyright {color: #fff; text-transform: uppercase; font-size: 12px; letter-spacing: 3px; margin: 100px auto; width: 100%; text-align: center;}


@media screen and (min-width: 0px) and (max-width: 1440px) {

	@media screen and (min-width: 1200px) and (max-width: 1440px) {
		
	
		
	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
				
	
		
		
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		
		
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
		
			.lobbyContainer {margin: 0 auto; padding: 0px 0;}
			.loginWrapper-lobby {margin: 0px auto 0 auto; width: 94%; text-align: center; background-color: #fff; padding: 2%; opacity: .9;}
		
			.wrapperTopBar {grid-template-columns: 120px auto;}
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
		.lobbyContainer {margin: 0 auto; padding: 0px 0;}
		.loginWrapper-lobby {margin: 0px auto 0 auto; width: 94%; text-align: center; background-color: #fff; padding: 2%; opacity: .9;}
		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.loginElement {width: 90%; margin: 20px auto;}
		.loginHolder-label {width: 100%; font-weight: bold; text-align: left; margin: 20px 0 20px 0;}
		.loginHolder-form {width: 100%;}
		
		.wrapperTopBar {grid-template-columns: 120px auto;}
		
		.lobbyContainer {margin: 0 auto; padding: 0px 0;}
		.loginWrapper-lobby {margin: 0px auto 0 auto; width: 94%; text-align: center; background-color: #fff; padding: 2%; opacity: .9;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.loginElement {width: 90%; margin: 20px auto;}
		.loginHolder-label {width: 100%; font-weight: bold; text-align: left; margin: 20px 0 20px 0;}
		.loginHolder-form {width: 100%;}
		
		.wrapperTopBar {grid-template-columns: 120px auto;}
		
		.lobbyContainer {margin: 0 auto; padding: 0px 0;}
		.loginWrapper-lobby {margin: 0px auto 0 auto; width: 94%; text-align: center; background-color: #fff; padding: 2%; opacity: .9;}
	
	}
	
}

@media screen and (min-width: 1440px) {


	
}