html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body {
  background:#ffffff url(/img/1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#000;
}

@media screen and (max-width: 800px){
    .viewport {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
}

h1 {
	font-size: 3em;
	font-family: 'Oswald', sans-serif;
	color: #000;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	opacity: 0.7;
}

h2 {
	font-family: 'Questrial', sans-serif;
	color: #000;
	font-size: 2em;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	opacity: 0.8;
}

.content {
	text-align: center;
}

.banner {
    position: relative;
	padding-top: .5em;
}

.banner > img{
    width: 100%;
    height: auto;
}

div.box {
	position: relative;
	background-color: rgba(20,49,102,0.5);
	padding: .8em;
	width: 400px;
	border-radius: 15px;
	opacity: 0.7;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	text-align:center;
	font-family: 'Muli', sans-serif;
	font-size: 1em;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	color: #000;
	right: 0;
    left: 0;
	margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
}

.boxcontent {
}

.boxcontent a {
	text-decoration: none;
	color: #000;
	font-family: 'Questrial', sans-serif;
	font-size: 2em;
}