@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700italic,900,700,600italic,600,400italic,300italic,300,200italic,200);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css);

body
{
	font-family: "Titillium Web", sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #999;
}

a
{
	color: #999;
}

	a:hover
	{
		color: #666;
	}

	a:active
	{
		opacity: 0.5;
	}

	textarea.field.field-no-resize
	{
		resize: none;
	}

hr
{
	height: 1px;
	width: 100%;
	margin: 20px 0;
	padding: 0;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Forms */

input.field,
textarea.field,
select.field
{
	position: relative;
	border: none;
	background: none;
	background: #ffffff;
	border: 2px solid #ddd;
	padding: 8px 10px;
	font-family: 'Lato', 'Arial';
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	color: #3557A8;
	width: 100%;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 10px;
}

	input.field:focus,
	textarea.field:focus,
	select.field:focus
	{
		border-color: #3557A8;
		color: #333
	}

.button
{
	display: inline-block;
	font-size: 20px;
	line-height: 20px;
	color: #ffffff;
	font-weight: 400;
	margin: 0 2px;
	padding: 14px 14px;
	background-color: #D0CC43;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	cursor: pointer;
	-moz-background-size: 51% 51%;
	-webkit-background-size: 51% 51%;
	background-size: 51% 51%;
	background-repeat: no-repeat;
	border-radius: 10px;
}

	.button.button-mini
	{
		font-size: 16px !important;
		line-height: 16px !important;
		padding: 10px !important;
		margin: 0 !important;
	}

	.button.button-big
	{
		font-size: 24px !important;
		line-height: 24px !important;
		padding: 20px !important;
		margin: 0 !important;
	}

	.button:hover,
	.button.button-active
	{
		text-decoration: none;
		color: rgba(255,255,255,0.7);
		filter: brightness(90%);
	}

	.button.button-inverted
	{
		display: inline-block;
		font-size: 20px;
		line-height: 20px;
		color: #D0CC43;
		font-weight: 400;
		margin: 0 0 0 10px;
		padding: 14px 14px;
		background-color: #ffffff;
		-webkit-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
		cursor: pointer;
		-moz-background-size: 51% 51%;
		-webkit-background-size: 51% 51%;
		background-size: 51% 51%;
		background-repeat: no-repeat;
	}

		.button.button-inverted:hover,
		.button.button-inverted.button-active
		{
			text-decoration: none;
			color: #809CC4;			
		}


	.button.button-gray
	{
		background-color: #999999;
		color: #ffffff;
	}

		.button.button-gray:hover,
		.button.button-gray.button-active
		{
			background-color: #ffffff;
			color: #999999;
		}

/* Header and footer */

header
{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgba(220,220,220,0.9);
	backdrop-filter: blur(10px);
	height: 160px;
	overflow: hidden;
	background-image: url(../images/zebra.png);
	background-repeat: repeat-x;
	background-size: auto 15px;
	padding-top: 10px;
	z-index: 99;
}

	header h1
	{
		display: inline-block;
		width: 273px;
		height: 100px;
		float: left;
		margin-left: -20px;
	}

		header h1 a
		{
			display: inline-block;
			width: 273px;
			height: 100px;	
			background-image: url(../images/logo.png);
			-webkit-background-size: 273px 100px;
			background-size: 273px 100px;
			text-indent: -9999px;
		}

	header nav
	{
		float: right;
		text-align: right;
	}

		header nav a
		{
			display: inline-block;
			font-family: "Titillium Web", sans-serif;
			font-size: 24px;
			line-height: 24px;
			font-weight: 600;
			margin: 20px 10px;
			color: #333;
			padding: 5px 0;
			background-color: transparent;
			padding: 10px 16px;
			border-radius: 10px;
		}

			header nav a:hover
			{
				color: white;
				background-color: #D0CC43;
				text-decoration: none;
			}

	header .mobile-menu
	{
		position: absolute;
		width: 36px;
		height: 36px;
		right: 20px;
		top: 34px;
		font-size: 32px;
		line-height: 32px;
		text-align: center;
		display: none;
		color: #fff;
	}

		header .mobile-menu:hover
		{
			text-decoration: none;
		}

footer
{
	position: relative;
	width: 100%;
	min-height: 200px;
	background-color: #f0f0f0;
}

	footer .phones
	{
		text-align: right;
	}

	footer .phones p
	{
		font-size: 32px;
		line-height: 28px;
		margin-bottom: 10px;
	}

		footer .phones p .fa
		{
			display: inline-block;
			width: 60px;
			text-align: center;
			color: #D0CC43;
		}

		footer .phones p .fa.fa-envelope
		{
			font-size: 26px;
		}

/* Sections */

.home
{
	background-color: rgba(220,220,220,0.9);
	text-align: center;
	margin-top: 160px;
	border-bottom: 20px solid #f0f0f0;
}

	.home .play:hover,
	.home .play2:hover
	{
		opacity: 0.8;
	}

	.home .play::after,
	.home .play2::after
	{
		position: absolute;
		left: 0;
		top: 100px;
		right: 0;
		bottom: 0;
		content: ' ';
		display: inline-block;
		background-image: url(../images/play-button.png);
		background-position: center 32%;
		background-repeat: no-repeat;
	}

	.home .titles
	{
		margin-top: -80px;
		margin-bottom: 40px;
	}

	.home h2
	{
		display: inline-block;
		font-weight: 600;
		color: #ffffff;
		background-color: #D0CC43;
		padding: 10px;
		border-radius: 10px;
		margin: 0 0 10px 0;
	}

	.home h3
	{
		display: inline-block;
		font-weight: 400;
		color: #ffffff;
		background-color: #666;
		padding: 10px;
		font-size: 22px;
		line-height: 22px;
		border-radius: 10px;
		margin: 0;
	}

	.home .subtitle
	{
		background-color: transparent;
		color: black;
		border-radius: none;
		padding: 0;
		margin-bottom: 10px;
	}

.features
{
	border-bottom: 1px solid #ddd;
	padding-bottom: 40px;
}

	.features .icons h5
	{
		margin: 0 0 10px 0;
	}

	.features .icons h6,
	.features .icons p
	{
		margin: 0 0 0 0;
	}

	.features .icons img
	{
		transition: transform 0.1s ease-out;
		transform: scale(1);
	}

		.features .icons:hover img
		{
			transform: scale(1.4);
		}

.about
{
	background-color: #666;
	background-image: url(../images/prism.png);
	padding: 30px 0 0 0;
}
	
	.about h2,
	.about h3,
	.about h4,
	.about h5,
	.about h6
	{
		color: #fff;
		text-shadow: rgba(0,0,0,0.3) 0 3px 3px;
	}

	.about p,
	.about .list li
	{
		font-size: 18px;
		line-height: 24px;
		text-align: justify;
		color: #fff;
		text-shadow: rgba(0,0,0,0.3) 0 3px 3px;
	}

	.about h2
	{
		font-weight: 600;
	}

.photos
{
	border-top: 10px solid #D0CC43;
}

	.photos img
	{
		transition: transform 0.2s ease-out;
		transform: scale(1);
	}

		.photos img:hover
		{
			transform: scale(1.1);
		}

	.photos h4
	{
		margin-top: -20px;
	}

.contact
{
	background-color: rgba(220,220,220,0.7);
	text-align: center;
	border-bottom: 1px solid #CCC;
}

#video iframe
{
	box-shadow: rgba(0,0,0,0.5) 0 5px 40px;
}

/* Mobile adjustments */

@media (min-width: 320px) and (max-width: 640px) {

	header
	{
		overflow: inherit;
	}

		header .mobile-menu
		{
			display: block;
			margin-top: 11px;
		}

	header nav
	{
		position: absolute;
		display: inline-block;
		width: 60%;
		height: auto;
		right: -10px;
		top: -24px;
		display: block;
		background-color: #ffffff;
		z-index: 500;
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		border-radius: 10px;
		text-align: center;
		display: none;
	}

		header nav:after, 
		header nav:before 
		{
			bottom: 100%;
			right: 20px;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		header nav:after 
		{
			border-bottom-color: #ffffff;
			border-width: 10px;
		}

		header nav a
		{
			display: inline-block;
			width: 100%;
			font-size: 22px;
			line-height: 22px;
			font-weight: 200;
			margin: 10px 0;
			padding: 0;
			float: left;
			color: #194482;
		}

			header nav a:hover
			{
				color: #194482;
				text-decoration: none;
			}

			header nav a:first-child
			{
				margin-top: 20px;
			}

			header nav a:last-child
			{
				margin-bottom: 20px;
			}

}