/* =================================================
Projekt: leikur
Stand:  update
Datei: screen.css
Datum: 25.03.2014
Autor: VISUALIVE - visual. digital. media.
www.visualive.co
================================================== */



/* =================================================
reset
================================================== */
@import url("reset.css") all, braille, embossed, handheld, print, projection, screen, speech, tty, tv;
a:focus {
outline: none;
}



/* =================================================
allgemein
================================================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700);
html {
background-color: #fff;
}

body {
text-decoration:none;
font-smooth:always;
width:960px;
margin:auto;
background-color:#fff;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:300;

}

::selection {
	background: #FFBD75; /* All other Browsers */
	color:#000;
	}
	
	::moz-selection {
	background: #FFBD75; /* Firefox */
	color:#000;
	}



/* =================================================
headings
================================================== */
/*h1 = orange Titles*/
h1 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 36px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

/*h2 = schwarze Titles*/
h2 {
padding:10px;
color:#fff;
font-size: 36px;
background: #000;
display:inline;
opacity: 0.9;
}

/*h3 = Translation Title im Header*/
h3 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 24px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

/*h4 = Kontakt-Button*/
h4 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 36px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

h4:hover {
background: #000;
}

h5 {
}

h6 {
}

h7 {
}



/* =================================================
links
================================================== */
a {
text-decoration:none;
color: #dc7f1b;
}

a:link {
}

a:visited {
}

a:hover,
a:focus {
}

a:active {
}



/* =================================================
paragraphs
================================================== */
p {
margin-bottom:50px;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:300;
font-size:20px;
line-height:1.5;
letter-spacing:0.4px;
text-align: justify;
text-justify: distribute;

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap:break-word;
}

span {
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:700;
}



/* =================================================
columns
================================================== */
.col1 {
-moz-column-count:1; /* Firefox */
-webkit-column-count:1; /* Safari and Chrome */
column-count:1;
}

.col2 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

.col3 {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

.italic {
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:300;
font-style:italic;
}



/* =================================================
menu
================================================== */
#menu ul{
float:right;
margin-top:-20px;
}

#menu ul li, li, ul a, li a {
color: #000000;
text-decoration:none;
display:inline;
background:none;
}

#menu li a{
padding:5px;
padding-top:22px;
padding-bottom:72px;
overflow:hidden;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:700;
font-size: 24px;
color:#000;
margin-right: 20px;
}

#menu a:link {
background:none;
color:#000;
}

#menu li a:hover, li a:focus {
background-color:#000;
color:#fff;
}

#menu li a:active {
color:#ffffac;
background:#000;
}



/* =================================================
footer
================================================== */
#footer ul,
#footer ul li {
z-index:3;
color:#fff;
margin:10px;
margin-left:10px
}

.footerlinks{
color:#fff;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:400;
font-style:italic;
font-size: 16px;
}

.footerlinks:hover,
.footerlinks:focus{
color:#dc7f1b;
}



/* =================================================
bereiche:
menu
header
hi
wir_bieten
leistungen
erfahrung
arbeitsfeld
team
footer
================================================== */
div {
margin:0px;
padding:0px;
border: 0px solid black;
}

#menu {
z-index:2;
width:960px;
height:75px;
background: url(assets/menu_bg.png);
position:fixed;
overflow:hidden;
top:0;
opacity: 1;

-moz-box-shadow: 0px 0px 25px #888;
-webkit-box-shadow: 0px 0px 25px #888;
box-shadow: 0px 0px 25px #888;

}

#menu:hover, #menu:focus {
opacity: 1;
}

#header {
width:960px;
margin-top:75px;
background: url(assets/leikur_header.png) no-repeat;
overflow:visible;
height:360px;
background-size:cover;
}

#hi {
margin-left: 0px;
margin-top:50px;
}

#wir_bieten {
background: #fff url(assets/wir_bieten.png) no-repeat;
height:750px;
overflow:visible;
background-size:100%;
}

#leistungen {
padding-bottom:50px;
}

#erfahrung {
background: url(assets/erfahrung.png) no-repeat;
overflow:visible;
height:600px;
background-size:100%;
}

#arbeitsfeld {
}

#team {
}

#footer {
z-index:2;
width:960px;
height:35px;
background: url(assets/footer_bg.png);
position:fixed;
opacity: 0.9;
overflow:hidden;
bottom:0;
-moz-box-shadow: 0px 0px 25px #000;
-webkit-box-shadow: 0px 0px 25px #000;
box-shadow: 0px 0px 25px #000;
}



/* =================================================
logos
================================================== */
#logo_nosub {
height:27px;
margin-left: 20px;
margin-top:15px;
overflow:hidden;
}

#logo {
float:right;
width:300px;
margin-right:50px;
margin-top:50px;
}



/* =================================================
titles
================================================== */
#translation {
clear:both;
opacity:0.9;
font-size: 24px;
float:right;
margin-right:50px;
margin-top:80px;
}

#title_wirsind {
margin-left: 35px;
}

#title_erfahrung {
clear:both;
float:left;
margin-left: 35px;
margin-top:100px;
}

#title_wirbieten {
margin-left: 550px;
float:left;
margin-top:100px;
}

#title_leistungen {
float:left;
margin-left: 200px;
margin-top:7px;
}

#title_arbeitsfeld {
clear:both;
float:left;
margin-left: 90px;
margin-top:7px;
}

#title_team {
display:block;
text-align:center;
width:188px;
margin:auto;
margin-top:50px;
}

#title_contact {
display:block;
text-align:center;
width:auto;
margin:auto;
margin-top:50px;
margin-bottom:100px;
}

#title_impressum {
margin-left: 215px;
}

#title_haftung {
margin-left: 70px;
}



/* =================================================
texts
================================================== */
#text_wir{
margin-left:220px;
margin-top:-65px;
margin-right:15px;
}

#text_bieten{
clear:both;
color: #fff;
width: 310px;
margin-left:550px;
margin-right:0px;
padding-top:50px;
}

#text_leistungen {
width: 430px;
margin-left:450px;
}

#text_erfahrung {
clear:both;
float:left;
width: 410px;
margin-left:35px;
margin-top:0px;
}

#text_arbeitsfeld,
#text_kunden  {
width: 450px;
margin-left:450px;
}

#text_team{
margin-left:10px;
margin-right:30px;
margin-top:50px;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
height:270px;
width:940px;
letter-spacing:0px;
}

#text_names{
clear:both;
margin-left:35px;
margin-right:35px;
margin-top:100px;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
letter-spacing:0.5px;
height:270px;
font-style:italic;

}

#text_impressum{
margin-left:470px;
width:300px;
margin-top:-65px;
}

#text_anfragen{
margin-left:470px;
width:400px;
margin-top:-65px;
}

#text_haftung{
margin-left:470px;
width:450px;
margin-top:-65px;
font-size: 14px;
line-height: 1.25;
}



/* =================================================
kontakt
================================================== */
.avatar {
float:left;
margin:35px;
margin-top:50px;
width:300px;
height:300px;
}

.avatar_text  {
letter-spacing:0px;
font-family: 'Open Sans', sans-serif;
font-weight:300;
}

.imgsub {
padding-left:50px;
font-style:italic;
}



/* =================================================
avatars
================================================== */
#marlon{
margin-left:70px;
background:url("assets/leikur_avatar.gif") no-repeat;
background-size:100% 100%;
width:200px;
height:200px;
}

#marlon:hover, #marlon:focus {
background: url("assets/leikur_avatar_color.png") no-repeat;
background-size:100% 100%;
width:200px;
height:200px;
}

#sven{
margin-left:70px;
background:url("assets/leikur_avatar.gif") no-repeat;
background-size:100% 100%;
width:200px;
height:200px;
}

#sven:hover, #sven:focus {
background: url("assets/leikur_avatar_color.png") no-repeat;
background-size:100% 100%;
width:200px;
height:200px;
}

#steffen{
margin-left:70px;
background:url("assets/leikur_avatar.gif") no-repeat;
background-size:100% 100%;
width:200px;
height:200px;
}

#steffen:hover, #steffen:focus {
background: url("assets/leikur_avatar_color.png") no-repeat;
background-size:100% 100%;
height:200px;
width:200px;
}



/* =================================================
sonstiges
================================================== */
#top {
position:absolute;
top:0;
}

#trennbar {
width:100%;
}

#slice {
display:inline;
}
/* =================================================
sonstiges
================================================== */


.flags {
z-index:9;
overflow:visible;
margin-left:25px;
margin-top:5px;
display:block;
float:left;
height:25px;
	opacity:1;

   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */
	filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
	
}


.flags:hover, .flags:focus {
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter:none; /* IE6-9 */
    -webkit-filter: grayscale(0);
	opacity:1;
}

#lang_bar {
	opacity:1;

background-color:#fff;
}

#lang_bar:hover, #lang_bar:focus {
opacity:1;
}

#uhere {
    filter: none;
    -webkit-filter: grayscale(0);

}


/* =================================================
footer links
================================================== */
#to_top {
display:inline;
float:right;
height:35px;
position:absolute;
right:145px;
bottom:0px;
background:#000;
padding-left:2px;
padding-right:2px;
opacity:0.8;
}

#to_top a {
font-size:28px;
color:#dc7f1b;
opacity:0.8;
font-weight:400;
}

#to_top a:hover, #to_top a:focus {
opacity:1;
color:#fff;
}

#skype {
display:inline;
float:right;
height:35px;
position:absolute;
right:109px;
bottom:0px;
opacity:0.8;
}

#fb {
display:inline;
float:right;
height:35px;
position:absolute;
right:72px;
bottom:0px;
opacity:0.8;
}

#linkedin {
display:inline;
float:right;
height:35px;
position:absolute;
right:35px;
bottom:0px;
opacity:0.8;
}

#fb:hover, #skype:hover, #linkedin:hover {
opacity:1;
}

.clearing {
clear: both;
}

.leftfloat {
float:left;
}

.rightfloat {
float:right;
}

.nofloat {
clear:both;
}

/* =================================================
PAGE RU
================================================== */


/*h1 = orange Titles*/
.page_ru h1 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 24px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

/*h2 = schwarze Titles*/
.page_ru h2 {
padding:10px;
color:#fff;
font-size: 24px;
background: #000;
display:inline;
opacity: 0.9;
}

/*h3 = Translation Title im Header*/
.page_ru h3 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 16px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

/*h4 = Kontakt-Button*/
.page_ru h4 {
line-height:1.25;
padding:10px;
color:#fff;
font-size: 28px;
background: #dc7f1b;
display:inline;
opacity: 1;
}

.page_ru p {
margin-bottom:50px;
font-family: Arial, Verdana, sans-serif;
font-size:18px;
line-height:1.3;
letter-spacing:0.4px;
text-align: justify;
text-justify: distribute;

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap:break-word;
}

.page_ru span {
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-weight:700;
}