/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{font-size:100%}
legend{color:#000}

/* --------------------------- */

:root {
  --white-color: #ffffff;
  --highlighted-color: #ffe9a6;
  --dark-color: #0a2233;
  --light-color: #0d8076;
  --light-darker-color: #0a665e;
}

/* --------------------------- */

html {
    height: 100%;
}

body {
	font-family: 'Comfortaa', sans-serif;
	height: 100%;
    color: #000000;
	background: #ffffff;
}

h1 {
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 2rem;
	color: var(--light-color);
}

.h1-text {
	font-size: 2.4rem;
	text-align: center;
	line-height: 150%;
}

h2 {
	font-size: 2rem;
	line-height: 2rem;
	text-align: center;
	margin-bottom: 2rem;
	font-weight: bold;
}

h3 {
	font-size: 1.25rem;
	margin-bottom: 1rem;
	font-weight: bold;
}

h4 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	font-weight: bold;
}

h5 {
	font-weight: bold;
	text-transform: uppercase;
}

p, li {	
	line-height: 130%;
}

img {
	vertical-align: top;
}

a {
	color: var(--light-color);
}

a:hover {
	color: var(--dark-color);
}

.content-box {
	padding: 2rem;
	box-sizing: border-box;
}

.content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4.5rem 3rem;
}

.content p {
	margin-bottom: 1.5rem;
	line-height: 150%;
}

.content p:last-child {
	margin-bottom: 0;
}

.columns {
	display: flex;
}

.columns > div {
	width: 100%;
	margin-left: 2rem;
}

.columns > div:first-child {
	margin-left: 0;
}

.inverted {
	background: var(--dark-color);
	color: var(--white-color);
}

/* --------------------------- */

header {
	text-align: center;
	padding: 1rem;
}

header img#logo {
	height: 5rem;
}

section#top {
	height: 30rem;
	overflow: hidden;
	position: relative;
}

section#top p {
	text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.5)
}

section#top > div {
	z-index: 3;
	position: absolute;
	background: url('images/main.jpg') 50% 50%;
	background-size: cover;
	top: 0;
	height: 100%;
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

section#top > div > div#top-text {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

section#top > div > div#top-text > p {
	font-weight: bold;
	font-size: 4rem;
	line-height: 130%
}

section.highlighted {
	background: var(--highlighted-color);
}

footer {
	color: var(--white-color);
	text-align: center;
	font-size: 0.8rem;
}

footer a {
	color: inherit;
}

footer a:hover {
	color: var(--highlighted-color);
}

a.button {
	display: inline-block;
	padding: 1.1rem 2.4rem 0.8rem 2.4rem;
	font-size: 1.1rem;
	line-height: 1.2rem;
	box-shadow: 0 0.3rem 0 0 var(--light-darker-color);
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 5rem;
	color: var(--white-color);
	background: var(--light-color);
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
}

a.button:active {
	margin-top: 0.4rem;
	margin-bottom: 0.2rem;
	box-shadow: 0 0.2rem 0 0 var(--light-darker-color);
}

div.try-it-now {
	text-align: center;	
}

div.try-it-now p {
	font-size: 0.8rem;
	font-style: italic;
	margin-top: 1rem;
}

div#content h1, div#content h2, div#content h3 {
	line-height: 120%;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: left;
}
div#content h1 {
	font-size: 1.75rem;
	font-weight: 400;
}
div#content h2 {
	font-size: 1.5rem;
}
div#content h3 {
	font-size: 1.25rem;
}
div#content p {
	margin-bottom: 1em;
}
div#content ul {
	margin-bottom: 1em;
	list-style: disc;
	margin-left: 2rem;
}
div#content li {
	margin-bottom: 0.5rem;
}
div#content li > p {
	margin: 0;
}

/* --------------------------- */


@media only screen and (min-width: 1680px) {
	
	section#top {
		height: 36rem;
	}
	
	section#top > video {
		height: 36rem;
	}
	
}
	
@media only screen and (max-width: 1280px) {
	
	.content {
		padding: 3rem;
	}

}


@media only screen and (max-width: 960px) {
	
	section#top {
		height: 24rem;
	}
	
	section#top > div {
		font-size: 3rem;
	}

	section#top > div > div#top-text > p {
		font-size: 2.4rem;
	}
	
	.h1-text {
		font-size: 1.6rem;
		line-height: 2rem;
	}
	
	.content {
		padding: 2rem;
	}
	
	.columns {
		flex-direction: column;
	}
	
	.columns > div {
		width: 100%;
		margin-left: 0;
		margin-top: 2rem;
	}

}

@media only screen and (max-width: 480px) {
 
	header img#logo {
		height: 4rem;
	}
	
	section#top {
		height: 24rem;
	}
	
	section#top > div {
		font-size: 2.5rem;
	}

	section#top > div > div#top-text {
		margin-bottom: 1rem;
	}

	section#top > div > div#top-text > p {
		font-size: 1.8rem;
	}

}