@import url(http://fonts.googleapis.com/css?family=Monda&subset=latin,latin-ext);

/* reset */

body{
	font-family:Arial,sans-serif;
	margin:0;
	padding:0;}
h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	font-weight:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
	margin: 0;
	display: block;}
a, a:visited{
	text-decoration: none;}
img {
	border: 0;}
table { 
	border-collapse: collapse; border-spacing: 0; }
ol,ul {
	list-style: none;
	margin:0;
	padding:0;}
p {
	margin:0;
	padding:0;
	line-height:1.6em;}
* {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;}
.wrapper{
	width: 100%;
	max-width:97em;
	margin:0 auto;
	position:relative;}
.wrapper:after, .clear {
	clear: both;}
.clear:before,.clear:after,.wrapper:before,.wrapper:after {
	display: table;
	content: "";}

html, body {
    margin: 0;
    height: 100%;
    padding: 0;}
body {
    position: relative;
    background-image: url(../images/tlo.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Monda', sans-serif;}
body#tlo2 {
    background-image: url(../images/tlo2.jpg);
}
section {
    width: 90%;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);}
section h1 {
    display: inline-block;
    font-size: 72px;
    text-transform: uppercase;
    border: 5px solid #fff;
    padding: 0 1em;}
section h1:hover {
    background-color: rgba(0,0,0,.1);}
section h2 {
    font-size: 40px;
    margin: 20px 0;}
section h2 a {
    margin-left: 40px;
    font-size: 24px;
    display: inline-block;
    color: #fff;}
section h2 a:hover {
    text-decoration: underline;}
nav {
    margin: 0 auto;
    max-width: 60%;}
nav li {
    background-color: rgba(214, 48, 35, 0.6);
    display: inline-block;
    font-size: 20px;
    margin: 0.5%;
    padding: 0 1em;}
nav li a {
    color: #ffffff;}
nav li:hover {
    background-color: rgba(214, 48, 35, 0.9);}

@media screen and (max-width: 768px) {
    section h1 {
        padding: 0;
        width: 100%;
        font-size: 4em;}
    section h2 {
        margin: 10px 0;}
    section h2 a {
        margin: 0;    }
    nav {
        max-width: 90%;}
    body#tlo2 {
    background-image: url(../images/tlo2-mobile.jpg);}
}
@media screen and (max-width: 540px) {
    section h1 {
        font-size: 3em;}
}
@media screen and (max-width: 380px) {   
    section h1 {
        font-size: 2em;}
    section h2 {
        font-size: 2em;}
    nav li {
        font-size: 1em;}
}