/* Font & text color
--------------------------------*/

@font-face {
	font-family: 'RotisSansSerifStd-Regular';
	src: url('webfonts/310808_0_0.eot');
	src: url('webfonts/310808_0_0.eot?#iefix') format('embedded-opentype'),
		 url('webfonts/310808_0_0.woff2')      format('woff2'),
		 url('webfonts/310808_0_0.woff')       format('woff'),
		 url('webfonts/310808_0_0.ttf')        format('truetype');
}

body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: 100;
	color: white;
	background-color: black;
}

::-moz-selection, ::selection {
	color: black;
	background-color: white;
}

/* Font sizes
--------------------------------*/

body {
	font-size: 26px;
}

@media screen and (max-width: 1100px) {
    body {
        font-size: 20px;
    }
}

@media screen and (max-width: 500px) {
	body {
		font-size: 20px;
	}
}

strong {
	font-size: 1em;
	font-weight: bold;
}

strong h1 {
	font-size: inherit;
	margin: 0;
}


/* Hyperlinks 
--------------------------------*/

a {
	color: white;

	text-decoration: none;

    -webkit-box-shadow: inset 0px -4px 0px 0px #AAAAAB;
	-moz-box-shadow: inset 0px -4px 0px 0px #AAAAAB;
  	box-shadow: inset 0px -4px 0px 0px #AAAAAB;

  	font-weight: bold;
}

a.blink_off {
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
}

/* Layout
--------------------------------*/

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

body {
	position: absolute;
	min-height:100%;
}

#maincontainer {
}

header {
	z-index: 1;
	position: absolute;
	top: 2%;
	left: 2%;
	max-width: 300px;
}

@media screen and (max-width: 1100px) {
    header {
        max-width: 240px;
    }
}

@media screen and (max-width: 550px) {
    header {
        position: relative;
        top: unset;
        left: unset;
        margin-top: 2em;
        margin-left: 2em;
        margin-right: 2em;
        max-width: unset;
    }
}

header > strong {
	display: block;
	margin-top: 2em;
}

#separator {
	position: absolute;
	top: 0;
	bottom: 0;
    left: 320px;
    left: calc(300px + 2%);
	width: 1%;
	background-color: white;
}

@media screen and (max-width: 1100px) {
    #separator {
        left: 260px;
        left: calc(240px + 2%);
    }
}

@media screen and (max-width: 550px) {
    #separator {
        position: absolute;
        top: 0;
        bottom: 0;
        left: unset;
        right: 0;
        width: 3%;
    }
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

#content {
    text-align: initial;
    display: inline-block;
    max-width: 300px;
}

@media screen and (max-width: 1100px) {
    #content {
        max-width: 240px;
    }
}

@media screen and (max-width: 900px) {
    #container {
        margin-left: 330px;
        height: 100%;
        text-align: left;
    }
}

@media screen and (max-width: 550px) {
    #container {
        margin-left: unset;
        display: block;
        height: unset;
        width: 100%;
        text-align: center;
    }
    #content {
    }
}

#content > p:first-child {
	margin-top: 7em;
}

@media screen and (max-width: 550px) {
    #content > p:first-child {
        margin-top: 2em;
    }
}

#content > p {
	margin-bottom: 1em;
}

#contact {
	display: block;
	position: absolute;
	top: 2%;
	right: 2%;
	padding-top: 1em;
    z-index: 2;
}

@media screen and (max-width: 550px) {
    #contact {
        top: 2em;
        right: 2em;
    }
}

@media screen and (max-width: 350px) {
    #contact {
        transform: rotate(-90deg);
        transform-origin: center right;
    }
}


#lesite {
	font-size: 10em;
	font-weight: bold;
	text-align: right;
	position: absolute;
	bottom: 2%;
	right: 2%;
}

@media screen and (max-width: 1300px) {
    #lesite {
        font-size: 8em;
    }
}

@media screen and (max-width: 1100px) {
    #lesite {
        font-size: 7em;
    }
}

@media screen and (max-width: 800px) {
    #lesite {
        display: none;
    }
}

#lesite span:first-child {
	display: block;
	margin-bottom: -0.2em;
    max-height: 1em;
    overflow: hidden;
}

#lesite span:last-child {
	display: block;
	max-height: 1em;
	overflow: hidden;
}

footer {
	position: absolute;
	left: 2%;
	bottom: 2%;
	max-width: 300px;
}

@media screen and (max-width: 1100px) {
    footer {
        max-width: 240px;
    }
}

@media screen and (max-width: 550px) {
    footer {
        display: block;
        position: relative;
        left: unset;
        bottom: unset;
        margin-top: 1em;
        margin-left: 2em;
        margin-right: 2em;
        margin-bottom: 2em;
        max-width: unset;
    }
}

/* Header
--------------------------------*/
#animated_logo {
	overflow: hidden;
	font-family: 'RotisSansSerifStd-Regular';
	font-size:2.6em;
	text-transform: none;
	max-height:1em;
}

a #animated_logo {
    text-decoration: none;
    font-weight: normal;
	text-transform: none;
}

a:hover #animated_logo {
	color: white;
}

.olek-logo-cursor {
	background-color:white;
}

.olek-logo-cursor, .olek-logo-invisible-cursor {
	display:inline-block;
	width:1px;
	height:1em;
    vertical-align: top;
 }

.olek-logo-selected {
	display:inline-block;
	background-color:white;
	color:black;
}
/*
@media screen and (max-width: 650px) {
	#animated_logo {
		height:75px;
		font-size:90px;
	}
	
	.olek-logo-cursor, .olek-logo-invisible-cursor {
		height:90px;
	}
}

@media screen and (max-width: 520px) {
	#animated_logo {
		height:60px;
		font-size:70px;
	}
	
	.olek-logo-cursor, .olek-logo-invisible-cursor {
		height:70px;
	}
}

@media screen and (max-width: 400px) {
	#animated_logo {
		height:40px;
		font-size:50px;
	}
	
	.olek-logo-cursor, .olek-logo-invisible-cursor {
		height:50px;
	}
}

*/