@import "elements";	

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(/fonts/Montserrat-Regular.woff) format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: bold;
  font-weight: 700;
  src: local('Montserrat-Bold'), url(/fonts/Montserrat-Bold.woff) format('woff');
}

/* COLORS */

@white: #fff;
@grayLight: #e5e5e5;
@grayMedium: #ccc;
@gray: #a6a6a6;
@grayDark: #6c6b6b;
@black: #000;

/* BASICS */

* {
	margin: 0;
	padding: 0;
} 
	
html,body {
	width: 100%;
	background-color: @grayLight;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #fff;
}

h1 {
	font-size: 30px;
	line-height: 36px;
	font-weight: normal;
	margin: 40px 0;
	span {white-space: nowrap;}
	padding: 0 20px;
}

h2 {
	font-size: 20px;
	text-align: center;
	margin: 0 0 20px 0;
}

h3 {
	font-size: 16px;
	margin: 0 0 10px 0;
}
 
a {
	text-decoration: none;
	border: none;
	outline: none;
	transition: color 0.2s;

	&.button {

	}
}
	
strong {
	font-weight: 700;
}
	

.floatLeft {
	float: left;
	display: inline;
}
	
.floatRight {
	float: right;
	display: inline;
}
	
.clearIt {
	clear: both;
	width: 0;
	height: 0;
	overflow: hidden;
}
	
/* CONTENT AREA */

.content {
	.box-sizing(border-box);
	max-width: 980px;
	margin: 0 auto;
	position: relative;
	padding: 10px;

	&.legal {
			padding: 20px;
			color: @grayDark;

		h1 {padding: 0;}

		h2 {
			text-align: left;
			margin: 40px 0 20px 0;
		}

		p {margin: 20px 0;}

		ol,ul {padding: 0 20px;}

		li {padding: 10px;}

		a {color: #00aaff;}
	}

	.container {
		.box-sizing(border-box);
		width: 50%;
		padding: 10px;
		float: left;
		display: inline;

		&.double {width: 100%;}

		.inner {
			background-color: @grayDark;
			width: 100%;
			height: auto;
			position: relative;
			margin: 0;
			overflow: hidden;

			img {
				width: 100%;
				height: auto;
				margin: 0;
				padding: 0;
				display: block;
			}

			a,>div {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-size: contain;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				color: @white;

				transition: all 0.5s;

				.tagline {
					.box-sizing(border-box);
					width: 100%;
					padding: 0 20px;
					text-align: center;
					line-height: 18px;
					margin: 0 auto;
					position: absolute;
					top: 55%;
					display: block;
					opacity: 0.0;
					transition: all 0.5s;

					span {white-space: nowrap;}
				}

				&:hover {
					background-position: 50% 45%;
					.tagline {
						opacity: 1.0;
						top: 53%;
					}
				}

			}
		}

		&.football-filmroom {
			a {
				background-image: url('/images/football-filmroom-logo.png');
				background-color: fade(#253140,80%);
				&:hover {background-color: fade(#253140,60%);}
			}
		}

		&.tackle-football-playmaker-x {
			a {
				background-image: url('/images/tackle-football-playmaker-x-logo.png');
				background-color: fade(#262f38,80%);
                &:hover {background-color: fade(#262f38,60%);}
			}
		}

		&.flag-football-playmaker-x {
			a {
				background-image: url('/images/flag-football-playmaker-x-logo.png');
				background-color: fade(#262f38,80%);
				&:hover {background-color: fade(#262f38,60%);}
			}
		}

		&.tackle-football-playmaker {
			a {
				background-image: url('/images/tackle-football-playmaker-logo.png');
				background-color: fade(#453572,60%);
				&:hover {background-color: fade(#453572,40%);}
			}
		}

		&.flag-football-playmaker {
			a {
				background-image: url('/images/flag-football-playmaker-logo.png');
				background-color: fade(#0c62a2,60%);
				&:hover {background-color: fade(#0c62a2,40%);}
			}
		}

		&.flag-football-playmaker-iphone {
			a {
				background-image: url('/images/flag-football-playmaker-iphone-logo.png');
				background-color: fade(#0c62a2,60%);
				&:hover {background-color: fade(#0c62a2,40%);}
			}
		}

		&.basketball-playmaker {
			a {
				background-image: url('/images/basketball-playmaker-logo.png');
				background-color: fade(#29345e,60%);
				&:hover {background-color: fade(#29345e,40%);}
			}
		}

		&.fitness-intervals {
			a {
				background-image: url('/images/fitness-intervals-logo.png');
				background-color: fade(#333,30%);
				&:hover {background-color: fade(#202020,50%);}
			}
		}

		&.placeholder {
			.inner {
				background-color: fade(#333,10%);
			}
		}

	}

	&.services {
		.container {
			.inner {
				background-color: @white; 

				a,>div {
					background-color: fade(#000,0%);

					.tagline {
						top: 30px;
						font-size: 20px;
						text-align: left;

						span {
							display: block;
							white-space: normal;
							font-size: 16px;
							line-height: 18px;
							padding-top: 5px;
						}
					}

					&:hover {
						background-color: fade(#000,50%);
						.tagline {top: 20px;}
					}

				}
			}
		}
	}

}
	
/* MENU */

.menu {
	width: 100%;
	color: @gray;
	background-color: @grayMedium;

	.inner {
		.box-sizing(border-box);
		position: relative;
		height: 100px;
		max-width: 980px;
		margin: 0 auto;
		padding: 0 20px;
		text-align: center;
	}

	.pages {
		padding-top: 35px;
		a {padding: 0 10px;}
	}

	a {
		color: @gray;
		line-height: 30px;

		&.support,&.contact,&.trial,&.signIn {
			.box-sizing(border-box);
			position: absolute;
			right: 20px;
			margin-top: 32px;
			border: 3px solid @gray;
			padding: 0 10px;
			.border-radius(18px, 18px, 18px, 18px);
			transition: all 0.2s;
			span:first-child {display: inherit;}
			span:last-child {display: none;}
		}

		&.trial {
			left: 20px;
			right: auto;
			color: @grayDark;
			border-color: @grayDark;
			opacity: 1.0;
		}

		&.signIn {
			left: auto;
			right: 20px;
			top: 0;
			border-color: transparent !important;
			color: @grayDark;
			opacity: 1.0;
		}

		&.logo {
			.box-sizing(border-box);
			width: 68px;
			height: 100%;
			position: absolute;
			left: 20px;
			background-image: url('/images/menu-logo.png');
			background-size: contain;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			opacity: 0.5;
			transition: opacity 0.2s;
		}

		&.on,&:hover {
			color: @grayDark;
			border-color: @grayDark;
			opacity: 1.0;
		}
	}		
}

/* Product Pages */

body.app {

	background-size: 100% auto;
	background-position: 50% 100px;
	background-repeat: no-repeat;

	.content {
		max-width: 100%;
		padding: 0;
	}

	.device,.device .screenshot {
		width: 100%;
		margin: 0 auto;
		background-size: contain;
		background-position: 50% top;
		background-repeat: no-repeat;
	}

	.device {
		&.iPad,&.iPhone,&.collage {
			height: 407px;
			&.flat {height: 300px;}
			.screenshot {height: 100%;}
		}
		&.iPad {background-image: url('/images/app-device-iPad.png');}
		&.iPhone {
			background-image: url('/images/app-device-iPhone.png');	
			&.flat {background-image: url('/images/app-device-iPhone-flat.png');}
		}
	}

	header {
		position: relative;
		padding-top: 60px;
		text-align: center;
		max-width: 980px;
		margin: 0 auto;

		.logo {
			width: 100%;
			height: 96px;
			margin: 0 auto;
			background-size: contain;
			background-position: 50% top;
			background-repeat: no-repeat;
		}

		.badge,.social a {
			opacity: 0.75;
			transition: opacity 0.2s;
			&:hover {opacity: 1.0;}
		}

		.badge {
			width: 135px;
			height: 40px;
			display: block;
			position: absolute;
			left: 20px;
			top: 85px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 50% 50%;

			&.app-store {background-image: url('/images/app-badge-app-store.png');}
		}

		.social {
			position: absolute;
			right: 15px;
			top: 90px;
			a {
				width: 45px;
				height: 40px;
				background-size: 35px auto;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				float: left;

				&.support {background-image: url('/images/app-social-support.png');}
				&.instagram {display: none;}
				&.facebook {background-image: url('/images/app-social-facebook.png');}
				&.twitter {background-image: url('/images/app-social-twitter.png');}
			}
		}

		.trial {
			width: 200px;
			margin-bottom: 40px;
			padding: 0 10px;
			border: 3px solid #05adea;
			.border-radius(28px, 28px, 28px, 28px);
			color: #05adea;
			line-height: 50px;
			display: inline-block;
		}

		.signIn {
			line-height: 50px;
			margin-bottom: 10px;
			display: none;
		}

	}

	&.tackle-football-playmaker {
		background-color: #1b0e2f;
		background-image: url('/images/tackle-football-playmaker-app-background.jpg');

		h2,strong,footer {color: #a286fe;}
		section a {color: #00aaff;}
		header .logo {background-image: url('/images/tackle-football-playmaker-logo.png');}
		.device.iPad .screenshot {background-image: url('/images/tackle-football-playmaker-device-iPad-screenshot.png');}
	}

	&.flag-football-playmaker {
		background-color: #001d40;
		background-image: url('/images/flag-football-playmaker-app-background.jpg');

		h2,strong,footer {color: #00aaff;}
		section a {color: #84d9ff;}
		header .logo {background-image: url('/images/flag-football-playmaker-logo.png');}
		.device.iPad .screenshot {background-image: url('/images/flag-football-playmaker-device-iPad-screenshot.png');}
		.device.iPhone {
			margin-bottom: 30px;
			.screenshot {background-image: url('/images/flag-football-playmaker-device-iPhone-screenshot.png');}
		}

		.menu a.flag-football-playmaker {
			color: @grayDark;
		}
	}

	&.flag-football-playmaker-x {
		background-color: #262f38;
		//background-image: url('/images/flag-football-playmaker-x-background.jpg');

		h2,h3,strong,footer {color: #05adea;}
		section a {color: #05adea;}
		header .logo {background-image: url('/images/flag-football-playmaker-x-logo.png');}
		.device.collage {
			background-image: url('/images/flag-football-playmaker-x-device-collage.png');
			height: 0;
			padding-top: 42%;
		}

		section.bordered .benefit img {
			border: 4px solid #262f38;
		}

		header .signIn {
			color: #05adea;
		}

		.menu a.flag-football-playmaker-x {
			color: @grayDark;
		}
	}

	&.basketball-playmaker {
		background-color: #0b1f47;
		background-image: url('/images/basketball-playmaker-app-background.jpg');

		h2,strong,footer {color: #d2bb94;}
		section a {color: #00aaff;}
		header .logo {background-image: url('/images/basketball-playmaker-logo.png');}
		.device.iPad .screenshot {background-image: url('/images/basketball-playmaker-device-iPad-screenshot.png');}
	}

	&.fitness-intervals {
		background-color: #202020;
		/*background-image: url('/fitnessintervals/images/fitness-intervals-app-background.jpg');*/

		h2,strong {color: #ec2c46;}
		footer {color: #666;}
		section a {color: #48bae7;}
		header .logo {background-image: url('/images/fitness-intervals-logo.png');}
		.device.iPad {
			.screenshot {background-image: url('/fitnessintervals/images/fitness-intervals-device-iPad-screenshot.png');}
			margin-top: 40px;
		}
		.device.iPhone.flat .screenshot {background-image: url('/fitnessintervals/images/fitness-intervals-device-iPhone-flat-screenshot.png');}
	}

	.language {
		cursor: pointer;
		position: absolute;
		left: 50%;
		margin-left: -75px;
		width: 150px;
		opacity: 0.8;
		border: 2px solid @gray;
		.border-radius(18px, 18px, 18px, 18px);
		background-color: #444; 
		overflow: hidden;
		z-index: 5;

		&.open,&:hover {
			opacity: 1.0;
		}

		&.open {
			ul {display: inherit;}
		}
	
		span {
			.box-sizing(border-box);
			position: relative;
			width: 100%;
			display: inline-block;
			color: @white;
			line-height: 30px;
			padding: 0 10px 0 45px;
			text-align: left;
			transition: all 0.2s;

			background-repeat:  no-repeat;
			background-position: 10px 50%;
		}

		ul {
			display: none;
			z-index: 5;
			list-style:none;
			margin: 0;
			padding:0;
			border-top: 2px solid @gray;

			li a {
				margin: 0;
				line-height: 30px;
				text-align: left;
				display: block;
				font-weight: normal;
				padding: 10px 15px 10px 45px;
				background-repeat:  no-repeat;
				background-position: 10px 50%;
				color: @white;
				&:hover {background-color: #4d4d4d;}
			}

		}

	}

	&.de .language span,
	.language li.de a {
		background-image: url(/images/flag-de.gif);
	}

	&.en .language span,
	.language li.en a {
		background-image: url(/images/flag-en.gif);
	}

	&.es .language span,
	.language li.es a {
		background-image: url(/images/flag-es.gif);
	}

	&.fr .language span,
	.language li.fr a {
		background-image: url(/images/flag-fr.gif);
	}

	&.it .language span,
	.language li.it a {
		background-image: url(/images/flag-it.gif);
	}

	&.ja .language span,
	.language li.ja a {
		background-image: url(/images/flag-ja.gif);
	}

	&.nl .language span,
	.language li.nl a {
		background-image: url(/images/flag-nl.gif);
	}

	&.pt .language span,
	.language li.pt a {
		background-image: url(/images/flag-pt.gif);
	}

	&.ru .language span,
	.language li.ru a {
		background-image: url(/images/flag-ru.gif);
	}

	&.sv .language span,
	.language li.sv a {
		background-image: url(/images/flag-sv.gif);
	}

	&.zh-hans .language span,
	.language li.zh-hans a {
		background-image: url(/images/flag-zh-hans.gif);
	}

	&.zh-hant .language span,
	.language li.zh-hant a {
		background-image: url(/images/flag-zh-hant.gif);
	}
			
	&.de .language li.de a,
	&.en .language li.en a,
	&.es .language li.es a,
	&.fr .language li.fr a,
	&.it .language li.it a,
	&.ja .language li.ja a,
	&.nl .language li.nl a,
	&.pt .language li.pt a,
	&.ru .language li.ru a,
	&.sv .language li.sv a,
	&.zh-hans .language li.zh-hans a,
	&.zh-hant .language li.zh-hant a {
		background-color: #666;
	}

	&.de header .badge.app-store {background-image: url('/images/app-badge-app-store-de.png');}
	&.es header .badge.app-store {background-image: url('/images/app-badge-app-store-es.png');}
	&.fr header .badge.app-store {background-image: url('/images/app-badge-app-store-fr.png');}
	&.it header .badge.app-store {background-image: url('/images/app-badge-app-store-it.png');}
	&.ja header .badge.app-store {background-image: url('/images/app-badge-app-store-ja.png');}
	&.nl header .badge.app-store {background-image: url('/images/app-badge-app-store-nl.png');}
	&.pt header .badge.app-store {background-image: url('/images/app-badge-app-store-pt.png');}
	&.ru header .badge.app-store {background-image: url('/images/app-badge-app-store-ru.png');}
	&.zh-hans header .badge.app-store {background-image: url('/images/app-badge-app-store-zh-hans.png');}
	&.hant header .badge.app-store {background-image: url('/images/app-badge-app-store-zh-hant.png');}

	section {

		.box-sizing(border-box);
		width: 100%;
		padding: 60px 10px 40px 10px;

		&:nth-child(even) {background-color: fade(@black,20%);}
		a:hover {color: @white;}

		.benefits,.modes,.features {

			max-width: 980px;
			margin: 0 auto;

			.benefit,.mode,.featureSet {
				.box-sizing(border-box);
			}

			.benefit {
				width: 33.3%;	
				text-align: center;
				float: left;
				display: inline;
				padding: 40px 10px;

				img {
					width: 264;
					height: 169;
					max-width: 100%;
					margin-bottom: 10px;
				}
			}

			.mode {
				width: 50%;	
				text-align: center;
				float: left;
				display: inline;
				padding: 0 10px;

				img {
					width: 382;
					height: 286;
					max-width: 100%;
					margin-bottom: 10px;
				}
			}

			 .featureSet {
				max-width: 700px;
				margin: 0 auto;	
				padding: 0 20px;

				h2 {padding-bottom: 20px;}
				p {margin-bottom: 20px;}

			}

		}

		.modes {
			text-align: center;
			h2 {margin-bottom: 5px;}
			p {margin-bottom: 30px;}
		}

	}	
}

footer {
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	padding: 40px 20px;
}

@media screen and (max-width: 680px) {@import "mobile";	}