@charset "utf-8";

body, html {
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    background:#FFF url("img/orange-tiles-mix.jpg");
    color:#f45e0a;
    font-size:100%;
}
#header {	background: #000; border-bottom:1px solid #f45e0a; box-shadow:0 0 20px #000;}
.clearer { width:0; height:0; clear:both; font-size:0; line-height:0; }
a {
    color: #fff;
}
img {
    padding:0;
    border:0;
}

ul, li {
    list-style:none;
    padding:0;
    margin:0;
}
#logo {
    float:left;
    width:30%;
}
#logo img {
    width:80%;
    padding:5%;
}
.headline {
    float:left;
    width:64%;
    padding:3% 1% 3% 5%;
    font-size:170%;
    font-weight:bold;
    letter-spacing:-2px;
    text-transform:uppercase;
}
.headline span {
    color:#fff;
}
#pics {
    width:840px;
    font-size:0;
    margin:0 auto;
    text-align:center;
}
#pics li {
    font-size:50px;
    display:inline-block;
}
#pics div {
    text-align:center;
    overflow:hidden;
    background:white;
    margin:5px;
    width:390px;
    height:388px;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid #f45e0a;
    cursor:pointer;
    -moz-box-shadow:0px 0px 14px #000;
    -webkit-box-shadow:0px 0px 14px #000;
    box-shadow:0px 0px 14px #000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=0, Color='#000')";
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=14, Direction=0, Color='#000');
}
#pics a {
    text-decoration:none;
    color:#fff;
    text-shadow:0 0 15px #000;
}

#pics img {
    width:100%;
    position:relative;
    z-index:4;
    top:-59px;
}
#pics span {
    position:relative;
    top:180px;
    z-index:5;
}
#under-image {
    width:100%;
    height:100%;
    position:fixed;
    z-index:15;
    background-position:center;
    background-size:cover;
}
#reg-overlay {
    width:100%;
    position:absolute;
    padding-bottom:5%;
    z-index:20;
    background-color:rgba(0,0,0, 0.0);
}
#steps {
    font-size:0;
    text-align:center;
    margin-bottom:3%;
}
#steps li {
    display:inline-block;
    background:#000;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    width:160px;
    height:110px;
    padding:70px 10px 0 10px;
    margin:0 0.4%;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    overflow:hidden;
    color:#f45e0a;
    border:2px solid #fff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity:0.3;
    opacity:0.3;
}
#steps li.lighten {
    color:inherit;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
}

#footer {
    margin-top:3%;
    background:#000;
    padding:3%;
    text-align:center;
    color:#fff;
}
#profiles {
    font-size:0;
    text-align:center;
    width:78%;
    margin:0 auto;
}
#profiles:hover img {
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity:0.3;
    opacity:0.3;
}
#profiles li:hover img {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
}
#profiles li {
    display:inline-block;
    width:13%;
    overflow:hidden;
    -webkit-border-radius:10%;
    -moz-border-radius:10%;
    border-radius:10%;
    margin:5px;
    cursor:pointer;
    background:#2e2e2e;
}
#profiles img {
    width:100%;
}
.formular {
    text-align: center;
}

@media screen and (max-width:1024px) {
    #logo img {	padding:12%; }
    #steps li {	width:140px; height:90px;	font-size:16px; }
    #profiles {	width:83%; }
    #pics li { font-size:40px; }
    #pics img {	top:-48px; }

}
@media screen and (max-width:960px) {
    #pics { width:750px; }
    #pics div {	width:360px; height:357px; }
    #profiles { width:90%; }
}
@media screen and (max-width:720px) {
    #logo, .headline { float: none; text-align: center; width: inherit;}
    #logo img {	width:85%;	max-width: 328px; padding:2% 0 0}
    #steps li {	font-size:16px;	width:125px;height:85px; padding-top: 60px; }
    #steps li.step-2.hidden { height: 95px;padding: 50px 10px 0 10px; }
    #pics {	width:100%; }
    #pics div {	width:300px; height:297px; }
    #pics li { font-size:30px; }
    #pics span { top:150px; }
    #profiles {	width:100%;	}
    #profiles li { width:25%; }
    #pics img {	top:-37px; }
}
@media screen and (max-width:640px) {
    .headline {	font-size:135%;	}
    #pics div {	width:250px; height:247px; }
    #pics span { top:100px; }
    #steps li, #steps li.step-2.hidden { font-size:16px;	width:70%; height:inherit; padding:3px 20px; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; }
    #header {min-height: 149px;}
}
@media screen and (max-width:480px) {
    #header { min-height: 180px;}
    #logo {
        float:none;
        width:100%;
        text-align:center;
    }
    #logo img {
        width:60%;
        padding:6% 2% 2% 5%;
        margin-top:6%;
    }
    .headline {
        text-align:center;
        float:none;
        width:96%;
        padding:5px 1% 3% 1%;
        font-size:90%;
        letter-spacing:-1px;
        clear:both;
    }
    #pics li { font-size:25px; }
    #pics div { width:210px; height:207px; }
    #pics span { top:80px; }
    #pics img {	top:-31px;	}
}