/* COLOUR CODES
	
	TURQUOISE 	#0BB0AE
	GRAY 		#282E34

*/

/* =Layout
-------------------------------------------------------------- */

html {height:100%;}
body {background-color: #0BB0AE; margin:0; padding:0; height:100%;}

#header {background-color: #fff; color: #0BB0AE; overflow: hidden; height: 10%; min-height: 7em; }
#content {background-color: #282E34; color: #fff; overflow: hidden;}
#footer {color: #fff; overflow: hidden;}

.container {position: relative; padding-top: 1.5em; padding-bottom: 1.5em; padding-left: 1.5em; padding-right: 1.5em;}

#header .container {padding: 1.5em 0 0 1.5em; height:60%; min-height: 60px;}
#logo {height: 60%; min-height: 60px;}
 
/* =Repeatable Patterns
-------------------------------------------------------------- */
.one_third, .last_third {margin-bottom: 3em;}
ul {list-style: none; margin-left: 0; margin-top: 0; padding-left: 0em; text-indent: 0em; }

li:before {
    content: '';
    background-color: #0BB0AE;
    display: inline-block;
    position: relative;
    height: 0.3em;
    width: 0.3em;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 0.5em;
    top: -0.25em;
}

p {z-index: 3;}

/* =Typography
-------------------------------------------------------------- */
body {font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 90%; line-height: 150%;}
.description {font-family: 'Noto Serif', Georgia, Times, serif; font-size: 120%; line-height: 160%;}
h1,h2,h3 {font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 700 !important; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; color: #0BB0AE;}
#header a, #content a {color: #0BB0AE; text-decoration: none;}
#footer a {color: #fff; text-decoration: none;}

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 450 pixels. */
@media screen and (min-width: 450px) {
	
}


/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

	body {font-size: 90%; line-height: 150%;}
	.description {font-size: 140%; line-height: 160%;}
 
	#content { background-image: url(../img/a.png); background-repeat: no-repeat; background-size: 75em; background-position: top -5em right 0em;}

	.container {max-width: 600px; margin: 0 auto; }
	.container {padding-top: 3em; padding-bottom: 3em; padding-left: 3em; padding-right: 3em;}

	.one_third, .last_third {float: left; width:40%; }
	.one_third {margin-right: 3%;}
	.first {width: 100%;}
	.last_third:after {content:''; display:block; clear: both;}
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {

	#content {background-size: 65em;}

	.container {max-width: 960px; margin: 0 auto; }
	.container {padding-top: 3em; padding-bottom: 3em; padding-left: 3em; padding-right: 3em;}

	.one_third, .last_third {width: 40%;}
	.first {width: 100%;}
}