* { margin:0; padding:0; }

div,
article,
section,
header,
footer,
nav,
figure,
li { position:relative; }

.group:after { display: block; height: 0; font-size: 0; content: "."; clear: both; visibility: hidden; }
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
::-moz-selection { background:#333; color:#fff; }
::selection { background:#333; color:#fff; }

body,
input,
textarea { color:#333; }

body { font-family:"tablet-gothic", verdana, arial, sans-serif; }

h2,
h3 { font-family:"tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 { font-weight:normal; }

h1 { background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; }
h2 { color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; }
h3 { font-size:2em; font-weight:200; /* Thin */ letter-spacing:1px; line-height:1em; padding:0.5em 0 0.25em 0; }

a { border-bottom:1px solid rgba(0,0,0,0.2); color:#333; text-decoration:none; -moz-transition:border-color 0.2s ease-in-out; -ms-transition:border-color 0.2s ease-in-out; -o-transition:border-color 0.2s ease-in-out; -webkit-transition:border-color 0.2s ease-in-out; transition:border-color 0.2s ease-in-out; }
a:hover { border-color:#ea2e49; }
section.intro div.summary p a,
div.explanation p a,
div.participation p a { color:#fff; }
div.participation p a:hover { border-color:#fff; }

p,
li { font-size:1.5em; font-weight:400; line-height:1.5em; padding:0.5em 0; list-style: square; }
h1,
section.intro div.summary p,
div.requirements p:last-child { font-weight:300; letter-spacing:2px; text-transform:uppercase; }
section.intro div.summary p:last-child, 
div.requirements p:last-child { border-top:1px solid #ea2e49; margin-top:1em; padding-top:1.5em; }
em,
strong { font-style:normal; font-weight:400; }
html { background:#daede2; padding:5%; }
body { background:#77c4d3; }
div.page-wrapper { z-index:2; }
section.intro { padding:5%; }
section.intro div.summary { color:#fff; padding:15% 0; }
section.intro div.preamble { background:rgba(255,255,255,0.9); color:#333; margin-left:-30%; padding:5% 5% 5% 30%; }
div.main { padding:5%; }
aside.sidebar { background:rgba(246,247,146,0.9); padding:5%; }
aside.sidebar ul { padding:0.5em 0 2em 0; }
aside.sidebar ul li { color:rgba(0,0,0,0.4); list-style:none; margin:0; padding:0 0 0.825em 0; }
footer { background:rgba(246,247,146,0.9); clear:both; color:#fff; padding:1em 5%; width:50%; }
footer a { margin-right:0.5em; }
div.explanation { color:#fff; padding:5%; }
div.participation { background:rgba(234,46,73,0.9); color:#fff; padding:5%; }
div.benefits { background:rgba(255,255,255,0.9); margin-top:10%; padding:5%; }
div.requirements { background:rgba(255,255,255,0.9); padding:5%; }

/* 1 and up */	
@media screen and (min-width:1px) {
    body { font-size:85%; }
}

/* 550 and up */	
@media screen and (min-width:550px) {
    h2 { font-size:5em; }
    section.intro { width:66.6%; }
    aside.sidebar { position:absolute; right:0; top:2.5%; width:32.75%; }
    div.extra1 { background:rgba(51,55,69,0.9); bottom:0; right:0; position:fixed; top:0; width:30%; z-index:1; }
    div.explanation { float:left; width:50%; }
    div.participation { float:left; width:49%; }
    div.benefits { float:left; }
    div.requirements { float:left; }
}

/* 650 and up */	
@media screen and (min-width:650px) {
    div.benefits { margin-top:12%; width:30%; }
    div.requirements { width:69%; }
}

/* 700 and up */	
@media screen and (min-width:700px) {
    body { font-size:90%; }
}

/* 800 and up */	
@media screen and (min-width:800px) {
    body { font-size:100%; }
}

/* 900 and up */	
@media screen and (min-width:900px) {
    body { font-size:110%; }
}

/* 1500 and up */	
@media screen and (min-width:1500px) {
    body { font-size:125%; }
}

/* 1800 and up */	
@media screen and (min-width:1800px) {
    body { font-size:150%; }
}

/* 2100 and up */	
@media screen and (min-width:2100px) {
    body { font-size:175%; }
}

/* 2500 and up */	
@media screen and (min-width:2500px) {
    body { font-size:200%; }
}

