/* 
== colors ==
white = #FFFFFF
magenta = #FF005A
yellow = #FFED00
green = #50EA00
blue = #00C1FF
purple = #AF00AF
turquoise = #00FF96
orange = #FF9600
darkblue = #2B4A90
darkgrey = #323232
 */

* {
    transition: font-size .3s ease-in-out;

    margin: 0;

    padding: 0;
    /*   	-webkit-animation: 5s infinite;
 	-moz-animation:    5s infinite;
 	-o-animation:      5s infinite;
	animation:         5s infinite;
 */
}

body {
    background: url('../img/bg_iceland.jpg') no-repeat center center fixed #333;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;

    font-family: 'norwesterregular', sans-serif;
    font-size: 10px;
    min-height: 100%;
}

.photobody {
    background: #333;
}

/* ==== global stuff ==== */
.clear {
    clear: both;
}


a, a:hover, a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    color: #00C1FF;
}

p a {
    color: #00C1FF;
}
p a:hover, p a:visited {
    color: #2B4A90;
}

p { padding: .5em 0; }

ul {
	padding: .5em 0;
}

li {
	list-style: square;
}

/* ==== main styles ==== */

h1 {
    font-size: 2em;
}

header {
    margin: 20px;

    color: #FFF;
}

header::after {
    display: block;

    clear: both;

    content: '';
}

header #logo, header #backlink {
    float: left;

    line-height: 1em;
    font-size: 2em;
}

header #social {
    float: right;

    padding-top: 10px;
}
header #social li {
	padding: 0;
}

header #social li {
    display: inline;

    padding-right: 20px;
    list-style: none;
}

header #social li a {
    display: inline-block;

    background-size: 100% 100%;

    width: 2.5em;
    height: 2.5em;
}
header .social-top {
    padding-top: 0 !important;
}
header .social-top li a {
    display: inline-block;

    background-size: 100% 100%;

    width: 2.5em !important;
    height: 2.5em !important;
}

header #social li a span {
    display: none;
}

header #social #facebook a {
    background-image: url('../img/facebook.svg');
}
header #social #twitter a {
    background-image: url('../img/twitter.svg');
}
header #social #vimeo a {
    background-image: url('../img/vimeo.svg');
}
header #social #youtube a {
    background-image: url('../img/youtube.svg');
}
header #social #xing a {
    background-image: url('../img/xing.svg');
}
header #social #linkedin a {
    background-image: url('../img/linkedin.svg');
}
header #social #p500 a {
    background-image: url('../img/500px.svg');
}
header #social #facebook a:hover {
    background-image: url('../img/facebook_hover.svg');
}
header #social #twitter a:hover {
    background-image: url('../img/twitter_hover.svg');
}
header #social #vimeo a:hover {
    background-image: url('../img/vimeo_hover.svg');
}
header #social #youtube a:hover {
    background-image: url('../img/youtube_hover.svg');
}
header #social #xing a:hover {
    background-image: url('../img/xing_hover.svg');
}
header #social #linkedin a:hover {
    background-image: url('../img/linkedin_hover.svg');
}
header #social #p500 a:hover {
    background-image: url('../img/500px_hover.svg');
}


nav {
    z-index: 100;
    margin: 0 20px 20px;

    text-transform: uppercase;
    color: #FFF;
}

nav ul {
    margin: 0;

    padding: 0;
}

nav ul li {
    list-style: none;
	margin-left: 0;
    line-height: 1em;
    color: #FF005A;
    font-size: 6em;

}

nav ul li a, nav ul li a:visited {
    color: #FF005A;
}

nav ul li a:hover {
    color: #FFF;
}


#nav-top {
    position: absolute;
    left: 12em;
}

#nav-top ul li {
    display: inline;

    padding: 0 .4em;

    font-size: 2em;
}


footer {
    position: absolute;
    bottom: 20px;

    z-index: 300;
    margin: 0 20px;

    color: #FFF;
}

footer ul {
    margin: 0;

    padding: 0;
}


footer ul li {
    display: inline;

    padding-right: 1em;
    list-style: none;

    color: #FFF;
    font-size: 2em;
}

footer ul li a:hover, footer ul li:hover {
    cursor: pointer;

    color: #00C1FF;
}



@media (min-width: 361px) {
    body {
        font-size: 16px;
    }
}

@media (min-width: 551px) {
    body {
        font-size: 16px;
    }
}


@media (min-width: 801px) {
    body {
        font-size: 18px;
    }

    header {
        margin: 1em;
    }
    nav, footer {
        margin: 0 1em;
    }
    footer {
        bottom: 1em;
    }
    header #social li a {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1281px) {
    body {
        font-size: 18px;
    }

    header {
        margin: 1.2em;
    }
    nav, footer {
        margin: 0 1.2em;
    }
    footer {
        bottom: 1.2em;
    }

    header #social li a {
        width: 48px;
        height: 48px;
    }
}

@media (min-width: 1601px) {
    body {
        font-size: 21px;
    }

    header {
        margin: 1.5em;
    }
    nav, footer {
        margin: 0 1.5em;
    }
    footer {
        bottom: 1.5em;
    }


    header #social li a {
        width: 64px;
        height: 64px;
    }
}




@media (min-width: 1921px) {
    body {
        font-size: 30px;
    }
    header #social li a {
        width: 72px;
        height: 72px;
    }

     .legal .textContent{
    	width: 42%;
    	font-size: .8em;
    }
}






/* ==== content styles ==== */

content {
    position: fixed;
    bottom: 0;

    transition: transform 1s ease-in;

    z-index: 200;

    width: 100%;
}

.visibleBottom {
    transform: translateY(0);

    width: 100%;
}

.hiddenBottom {
    transform: translateY(800px);

    width: 100%;
}

.layerText {
    position: absolute;
    right: 16em;
    bottom: 1em;
    -webkit-background-size: contain;
       -moz-background-size: contain;
         -o-background-size: contain;
            background-size: contain;

    padding: 8em 8em 6em 4em;
    width: 30em;
    height: 12em;

    font-family: "Open Sans", sans-serif;
    font-size: .75em;
}

#aboutLayer .layerText {
 	background: url('../img/speech_about.svg') no-repeat center center scroll;
}

#contactLayer .layerText {
 	background: url('../img/speech_contact.svg') no-repeat center center scroll;
}

.layerText li {
	margin-left: 1em;
}

.layerPhoto {
    position: absolute;
    right: 0;
    bottom: 0;

    float: right;

    width: 15em;
    height: auto;
}

.closeLayer {
    position: absolute;
    top: 4em;
    right: 8em;

    opacity: 1.0:;
    background: url('../img/close.svg') 0 0 no-repeat;

    cursor: pointer;
    width: 3em;
    height: 3em;
}

.closeLayer:hover {
    background: url('../img/close_h.svg') 0 0 no-repeat;
}


.textContent {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    padding: 3em;
    position: relative;
    width: 80%;
    margin: 2em;
}


.legal {
	overflow-y: scroll;
	height: 70%;
	bottom: auto;
}

.legal h2, .legal h3 {
	font-family: 'norwesterregular', sans-serif;
}

.legal > div > * {
	padding: .5em 0;
}

.legal ul li {
	margin-left: 1em;
}
.tbd {
    width: 100%;
    text-align: center;
    font-size: 4em;
}