/*MAIN STYLES --- APP SPECIFIC*/

/*FONTS*/
@font-face {
    font-family: 'hoch';
    src: url('../webfonts/hochstadt-rounded-webfont.woff2') format('woff2'),
         url('../webfonts/hochstadt-rounded-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	font-size: 18px;
	font-family:'Montserrat', sans-serif;
	color:#232c30;
}

.hoch {
	font-family: 'hoch', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

#close-btn {
	position:fixed;
	top:0;
	right:0;
	margin-top:24px;
	margin-right:24px;
	font-size:36px;
	padding:8px 16px;
	background-color:rgba(255,255,255,0.5);
	z-index:5;
	color:#d0d0d0;
	opacity:0;
	pointer-events:none;
	border-radius:4px;

	transition: opacity 0.35s, color 0.35s;
	-webkit-transition: opacity 0.35s, color 0.35s;
}
.green #close-btn {
	color:#5d9c42;
}
.aqua #close-btn {
	color:#029aa8;
}
.orange #close-btn {
	color:#f47721;
}
.blue #close-btn {
	color:#00abe8;
}
.dark-blue #close-btn {
	color:#00529B;
}
.yellow #close-btn {
	color:#cdc818;
}

#close-btn.active {
	opacity:1;
	pointer-events:auto;
}

/*RESET DEFAULT STYLES*/
*[data-role="view"] {
	background-color:#eaeaea;
}
*[data-role="view-content"] {
	padding:0 0.5em;
	padding-top:0;
	transform:translate3d(0,0,0);
	-webkit-transform:-webkit-translate3d(0,0,0);
}
*[data-role="modal"] {
	background:rgba(255,255,255,0.96);
	/*BLUR BG*/
	backdrop-filter: blur(3px);  
  	-webkit-backdrop-filter: blur(3px);
}
*[data-role="modal"] *[data-role="view-content"] {
	padding:56px 28px;
}
*[data-role="close-modal"] {
	position:fixed;
	top:0;
	right:0;
	margin-top:12px;
	margin-right:18px;
	font-size:32px;
}

.rodeo-button.hoch {
	font-size:24px;
}

/*COLORS*/
.white {
	color:#ffffff;
}
.white-bg {
	background-color:#ffffff;
}
.fade {
	color:#eaeaea;
}
.fade-bg {
	background-color:#eaeaea;
}

/*PLACEHOLDER*/
::-webkit-input-placeholder {
   color: #6a498d;
   font-family: "Montserrat", sans-serif;
}
:-moz-placeholder {
	color: #6a498d;
	font-family: "Montserrat", sans-serif;
} 
::-moz-placeholder {
	color: #6a498d;
	font-family: "Montserrart", sans-serif;
} 
:-ms-input-placeholder {
	color: #6a498d;
	font-family: "Montserrat", sans-serif;
}

/*LOADING*/
#rodeo-loading-overlay {
	background-color:rgba(0,0,0,0.15);;
}
.rodeo-loading-overlay-icon {
	color:rgba(255,255,255,0.75);
}

/*TITLE SCREEN*/
.wrapper {
	display:table;
	position:relative;
	width:100%;
	height:100%;
}
.wrapper .container {
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
}
#home {
	background:url('/img/title-bg.jpg') no-repeat;
	background-size:cover;
}
#home #logo {
	width:420px;
	height:294px;
}
#home .rodeo-button, .question .rodeo-button {
	display:block;
	width:312px;
	margin:0 auto;
	margin-top:52px;
	background-color:#cdc818;
	box-shadow:8px 8px 0 rgba(0,0,0,0.15);
	text-transform:uppercase;
	font-weight:700;
	color:#7F7C00;
	font-size:24px;
	border-radius:4px;
}

/*MODULES SCREEN*/
#modules [data-role="view-content"] {
	padding:0;
}
#modules .rodeo-grid {
	padding:10px;
	height:100%;
}

#modules .rodeo-grid-unit {
	height:50%;
	padding:10px;
}

.preview-card {
	width:100%;
	height:100%;
	background-color:#FFF;
	border-radius:4px;
	box-shadow:0 0 12px rgba(0,0,0,0.15);
	transform:scale(1);

	transition:transform 0.35s;
}

.preview-card.touch {
	transform:scale(0.96);
}

.preview-card .img-container {
	position:relative;
	width:100%;
	padding-bottom:100%;
	background:#CCC;
	overflow:hidden;
	border-radius:4px 4px 0 0;
}

.preview-card .img-container img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	border-radius:4px 4px 0 0;
}

.preview-card .title {
	position:absolute;
	width:60%;
	left:0;
	bottom:0;
	margin-left:18px;
	margin-bottom:18px;
	font-size:28px;
	line-height:1;
	text-align:left;
	color:#FFF;
	font-family: 'hoch', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-shadow:3px 3px 0 rgba(0,0,0,0.15);
}

.preview-card .tag {
	position:absolute;
	top:0;
	right:0;
	width:60%;
	padding:8px 24px;
	border-radius:0 4px 0 4px;
	background-color:#79b933;
	color:#FFF;
	font-weight:700;
	text-transform:uppercase;
	font-size:14px;
}

.preview-card.green .tag {
	background-color:#6e9a35;
}
.preview-card.aqua .tag {
	background-color:#0098a5;
}
.preview-card.orange .tag {
	background-color:#f47721;
}
.preview-card.blue .tag {
	background-color:#00abe8;
}
.preview-card.dark-blue .tag {
	background-color:#00529B;
}
.preview-card.yellow .tag {
	background-color:#cdc818;
}

.preview-card .description {
	position:relative;
	width:100%;
	padding:10px;
	text-transform:uppercase;
	font-weight:700;
	font-size:14px;
	text-align:left;
}

.preview-card .button {
	position:absolute;
	display:inline-block;
	top:0;
	right:0;
	background-color:#cdc818;
	color:#7F7C00;
	width:24px;
	height:24px;
	border-radius:4px;
	text-align:center;
	padding-top:3px;
	margin-top:6px;
	margin-right:6px;
}

.rodeo-button {
	border-radius:4px;
	transform:scale(1);
	filter:brightness(1);
	transition:transform 0.35s, filter 0.35s;

	-webkit-transform:scale(1)
	-webkit-filter:brightness(1);
	-webkit-transition:-webkit-transform 0.35s, -webkit-filter 0.35s;
}

.rodeo-button.touch {
	transform:scale(0.96);
	filter:brightness(0.9);
	-webkit-transform:scale(0.96);
	-webkit-filter:brightness(0.9);
}

/*VIDEO DISPLAY*/
#module [data-role="view-content"], #instructions [data-role="view-content"] {
	overflow:hidden;
}
.video-display {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.video-display video {
	width:100%;
	height:100%;
}
.video-display a[data-role="play-btn"], .video-display i.fa-spinner {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-0.5em;
	margin-left:-0.5em;
	z-index:1;

	transition:opacity 0.35s;
	-webkit-transition:opacity 0.35s;
}
.video-display a[data-role="play-btn"] {
	opacity:1;
	font-size:128px;
	color:#d0d0d0;
}
.video-display.loading a[data-role="play-btn"] {
	opacity:0;
	pointer-events:none;
}
.video-display i.fa-spinner {
	font-size:72px;
	color:rgba(255,255,255,0.75);
	opacity:0;
}
.video-display.loading i.fa-spinner {
	opacity:1;
}
*[data-role="video-controls"], *[data-role="skip"] {
	display:inline-block;
	position:fixed;
	bottom:0;
	right:0;
	margin-bottom:24px;
	margin-right:24px;
	font-size:36px;
	padding:8px 12px;
	background-color:rgba(255,255,255,0.5);
	z-index:5;
	opacity:0;
	pointer-events:none;
	border-radius:4px;

	transition: opacity 0.35s, color 0.35s;
	-webkit-transition: opacity 0.35s, color 0.35s;
}
*[data-role="video-controls"].active, *[data-role="skip"].active {
	opacity:1;
	pointer-events:auto;
}

.green .video-display a[data-role="play-btn"], .green *[data-role="video-controls"], .green *[data-role="skip"] {
	color:#5d9c42;
}

.aqua .video-display a[data-role="play-btn"], .aqua *[data-role="video-controls"], .aqua *[data-role="skip"] {
	color:#029aa8;
}

.orange .video-display a[data-role="play-btn"], .orange *[data-role="video-controls"], .orange *[data-role="skip"] {
	color:#f47721;
}

.blue .video-display a[data-role="play-btn"], .blue *[data-role="video-controls"], .blue *[data-role="skip"] {
	color:#00abe8;
}

.dark-blue .video-display a[data-role="play-btn"], .dark-blue *[data-role="video-controls"], .dark-blue *[data-role="skip"] {
	color:#00529B;
}

.yellow .video-display a[data-role="play-btn"], .yellow *[data-role="video-controls"], .yellow *[data-role="skip"] {
	color:#cdc818;
}

/*QUESTION*/
#question .wrapper {
	padding:0 36px;
}

.question .icon {
	width:156px;
	height:156px;
	margin:0 auto;
	background:url('/img/question-mark-aqua.png');
	background-size:100%;
	margin-bottom:28px;
}

.question .headline {
	font-family: 'hoch', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-shadow:3px 3px 0 rgba(0,0,0,0.15);
  	font-size:64px;
  	color:#009aa8;
}

.question .question {
	font-size:32px;
	line-height:1.5em;
	margin-top:18px;
}

/*COUNTDOWN*/
#countdown .label {
	font-weight:700;
	font-size:32px;
	text-transform:uppercase;
}
#countdown .timer {
	font-family: 'hoch', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-shadow:6px 6px 0 rgba(0,0,0,0.15);
  	font-size:156px;
  	margin-top:-24px;
}
.green #countdown .timer, .green .question .headline {
	color:#5d9c42;
}
.aqua #countdown .timer, .aqua .question .headline {
	color:#029aa8;
}
.orange #countdown .timer, .orange .question .headline {
	color:#f47721;
}
.blue #countdown .timer, .blue .question .headline {
	color:#00abe8;
}
.dark-blue #countdown .timer, .dark-blue .question .headline {
	color:#00529B;
}
.yellow #countdown .timer, .yellow .question .headline {
	color:#cdc818;
}
.green .question .icon {
	background:url('/img/question-mark-green.png');
	background-size:100%;
}
.aqua .question .icon {
	background:url('/img/question-mark-aqua.png');
	background-size:100%;
}
.orange .question .icon {
	background:url('/img/question-mark-orange.png');
	background-size:100%;
}
.blue .question .icon {
	background:url('/img/question-mark-blue.png');
	background-size:100%;
}
.dark-blue .question .icon {
	background:url('/img/question-mark-dark-blue.png');
	background-size:100%;
}
.yellow .question .icon {
	background:url('/img/question-mark-yellow.png');
	background-size:100%;
}


@media screen and (max-width: 864px) {
	.preview-card .img-container {
		padding-bottom:96%;
	}

	.preview-card .description {
		padding:12px;
	}

	.preview-card .button {
		margin-top:8px;
		margin-right:8px;
	}
}

/*XL*/
@media screen and (min-width: 1280px) {

}

/*L*/
@media screen and (min-width: 1025px) and (max-width: 1279px) {

}

/*M*/
@media screen and (min-width: 768px) and (max-width: 1024px) {

}

/*M Portrait*/
@media screen and (max-width: 960px) and (min-width: 768px) {

}

/*M Landscape*/
@media screen and (max-width: 1024px) and (min-width: 960px) {

}

/*S*/
@media screen and (max-width: 767px) {

}

/*XS*/
@media screen and (max-width: 480px) {
	
}

@media screen and (max-width: 360px) {

}