body
, h1
, h2
{
	font-family:"HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", "Helvetica Neue", "Segoe UI Light", "Segoe UI", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight:100;
	letter-spacing:2px;
}


section#banner {
	/*float:left;*/
	position:absolute;
	top:0px;
	background-color:#000;
	height:20px;
	width:100%;
	padding:0;
	margin:0;
}
section#header {
	overflow:hidden;
	position:absolute;
	top:20px;
	background-color:#333;
	height:284px;
	width:100%;
}
section#content {
	position:absolute;
	top:340px;
	background-color:#fff;
	width:100%;
}
section#content h1 {
    font-size:90px;
	margin:40px 0 0;
}
section#content h2 {
    font-size:40px;
	margin:20px 0 0 5px;
}
div.info-area {
	position:absolute;
	left:40%;
	right:15%;
}
div.contact-area {
	margin:40px 0 0 5px;
	line-height:30px;
}
ul.contact-list {
    list-style:none;
	padding:0;
	padding-bottom:50px;
}
ul.contact-list li {
    display:inline;
}
div.contact-area li.contact {
    position:relative;
    top:7px;
	padding:0 30px 0 0;
	letter-spacing:2px;
	white-space:nowrap;
}
div.white-dots {
	position:absolute;
	z-index:3;
    background:url('../../joy_static/img/line-dotted-white.png') repeat-x 0 0;
	height:2px;
	width:100%;
}
div.black-dots {
	position:absolute;
	left:-1px;
	z-index:3;
    background:url('../../joy_static/img/line-dotted-black.png') repeat-x 0 0;
	height:2px;
	width:100%;
}
img.header-img {
	z-index:2;
	position:absolute;
	bottom:0;
}
img.logo {
	z-index:4;
	position:absolute;
	top:15px;
	left:12px;
}
img.face-img {
	z-index:4;
	position:absolute;
	bottom:0;
	margin-bottom:-10%;
	left:15%;
	
    border-radius:50%;
    border:solid #000 4px;
    
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8),
        0 0 0 5px rgba(0, 0, 0, 1);
}
a {
    color:#000;
    text-decoration:none;
    font-weight:bold;
}
a.twitter-link {
    display:inline;
}
a.facebook-link {
    display:inline;
    padding-left:20px;
}
@media only screen and (max-width: 1200px){
    section#content h1 {
        line-height:90px;
    }
}
@media only screen and (max-width: 900px){
    img.header-img {
        width:250%;
        left:-45%;
    }
    section#content h1 {
        font-size:70px;
    }
    section#content h2 {
        font-size:30px;
    }
    div.contact-area li.contact {
        padding-right:20px;
        letter-spacing:1px;
    }
    div.info-area {
        right:5%;
    }
    img.face-img {
        margin-bottom:-15%;
        left:10%;
        width:30%;
    }
    img.logo {
        width:25%;
    }
    a.facebook-link {
        padding-left:0px;
    }
}
@media only screen and (max-width: 600px){
    div.info-area {
        top:60px;
        left:10%;
        right:5%;
    }
    section#content h1 {
        line-height:70px;
    }
    div.contact-area li.contact {
        padding-right:10px;
        display:block;
    }
    img.face-img {
        margin-bottom:-20%;
        left:10%;
        width:40%;
    }
    img.logo {
        width:40%;
    }
}
@media only screen and (min-width: 500px) and (max-width: 900px){
    div.info-area {
        top:80px;
    }
}
div.contact-area li.contact:last-child {
    padding-right:0 !important;
}