/*
Theme Name: Sliide
Description: No Style
Author: Martin Rack
Version: 1.0
*/


@font-face { 
font-family: Harmonia;
src:url(http://www.designmadeingermany.de/2011/wp-content/themes/sliide/harmonia.ttf) format('truetype');
font-weight: bold;
}

@font-face {
  font-family: OpenSans;
  font-style: normal;
  font-weight: 700;
  src: url('http://www.designmadeingermany.de/2011/wp-content/themes/v100/vorlage/standard-ct.woff') format('woff');
}



* {
margin: 0;
border: none;
padding: 0;
}

html {
height: 100%;
}

body {
line-height: 1.55;
font-family: Helvetica, 'Times New Roman', Times, 'Times New Roman', serif;
font-size: 16px;
padding: 0;
margin: 0;
height: 100%;
background: #1d1d1d;
color: #111;
font-weight: 300;
overflow: hidden;
overflow-y: scroll;
-webkit-font-smoothing: subpixel-antialiased;
margin-right: 0px;
}





.titletable {
width: 100%; height: 90%; display: table; background-color: #1d1d1d; color: #fff; background-size: cover; background-position: center;
}

.titlecell {
width: 100%; height: 90%; display: table-cell; vertical-align: middle; padding: 50px;
}

.contenttable {
padding: 50px 75px; padding-bottom: 75px; background-color: #fff; margin: 0 auto;
border-bottom: solid 60px #1d1d1d;
}

.contentcell {
max-width: 100%; margin-left: auto;
-moz-column-count: 2; 
-moz-column-gap: 50px; 
-webkit-column-count: 2; 
-webkit-column-gap: 50px;
column-count: 2; 
column-gap: 50px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
 margin: 25px 0;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.rectangleright, .rectangleleft {
width: 300px; height: 250px; margin: 25px 0;
}

#format {
position: absolute;
top: 75px;

right: 75px;
z-index: 99;
font-family: Harmonia, sans-serif;
text-align: right;
}

ul, ol {
display: block;
margin: 0;
}


ol li {
margin-top: 1em;
}

footer {
height: 60px;
background: #ddd;
padding: 0 75px;
line-height: 60px;
font-size: 83%;
font-family: Harmonia;
font-size: 17px;
overflow: hidden;
}

footer a {
text-decoration: none; 
}

nav {
background: #fff;
padding: 65px 75px;
font-size: 100%;
}

nav h2 {
margin-bottom: 0.55em;
}

nav div {
max-width: 543px;
margin: 0 auto;
}

footer span {
float: right;
}

footer span a {
margin-left: 6px;
}

aside {
display: block;
background: #eee;
padding: 50px 75px;
padding-bottom: 15px;
overflow: hidden;
font-size: 14px;
-moz-column-count: 4; 
-moz-column-gap: 50px; 
-webkit-column-count: 4; 
-webkit-column-gap: 50px;
column-count: 4; 
column-gap: 50px;
}

aside h2 a {
text-decoration: none;
font-size: 100%;
color: #111;
}

aside div {
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
column-break-inside:avoid;
display: inline-block;
width: 100%;
padding-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

aside h2 {
margin: 0.5em 0;
margin-bottom: 1em;
}

aside li {
list-style: none;
overflow: hidden;
height: 1.8em;
line-height: 1.8em;
border-bottom: solid 1px #ddd;
-webkit-transition: border-color 800ms;
-moz-transition: border-color 800ms;
}

aside li a {
text-decoration: none;
color: #111;
}

aside li:hover {
border-bottom: solid 1px #111;
-webkit-transition: border-color 0ms;
-moz-transition: border-color 0ms;
}

aside ul {
margin-bottom: 45px;
}





::-moz-selection, p img::-moz-selection {background:transparent;}
::selection, p img::selection {background:transparent;}

p::-moz-selection, h3::-moz-selection, h4::-moz-selection, h2::-moz-selection, p *::-moz-selection {background:#ccc;}
p::selection, h3::selection, h4::selection, h2::selection, p *::selection {background:#ccc;}







h2,h3,h4,h5 {
font-family: OpenSans, Harmonia, sans-serif;
word-spacing: 2px;
line-height: 1.4;
text-rendering: optimizeLegibility;
}


h2,h3,h4,h5,p,img,ul,ol {
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
column-break-inside:avoid;
display: inline-block;
width: 100%;
}

h2,h3,h4,h5 {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}

h1 {
text-rendering: optimizeLegibility;
font-family: Harmonia, sans-serif;
font-size: 300%;
text-align: center;
line-height: 1.25;
max-width: 628px;
margin: 0 auto;
margin-bottom: 30px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}


h2 {

font-size: 150%;
margin: 1em 0;
}


h3 {

font-size: 140%;
margin: 1em 0;
}



h4 {
font-size: 140%;
margin: 1em 0;
}


b, strong {
font-family: OpenSans, Harmonia, sans-serif;
font-size: 100%;
color: #111;
}

p {
margin: 1em 0;
line-height: 1.5;
color: #222;
width: 100%;
}

em, #infscr-loading { display: none !important; }

img {
margin: 1em 0;
width: 100%;
}


a {
color: #111;
}

#logo {
width: 59px; height: 59px; position: absolute;  margin: 0; margin-top: 41px; left: 45px; z-index: 99998; opacity: 0.2;
}

#logoschatten {
width: 59px; height: 59px; position: absolute;  margin: 0; margin-top: 40px; left: 45px; z-index: 99999;
}


#dmig {
font-size: 175px;
padding-bottom: 110px;
letter-spacing: -0.05em;
line-height: 1;
}



#frame, .follow {
position: absolute;
z-index: 50;
left: 0;
right: 0;
height: 60px;
margin-top: -60px;
}

.follow {
background: #fef566;
color: #111;
margin-top: -120px;
line-height: 60px;
padding: 0 75px;
font-family: OpenSans, Harmonia;
font-size: 17px;
text-align: center;

overflow: hidden;
}



#frame a {
font-family: OpenSans, Harmonia, sans-serif;
position: absolute;
text-align: center;
background-color: rgba(55,55,55,0.25);
color: #fff;
text-align: center;
z-index: 1000;
height: 60px;
line-height: 60px;
font-size: 17px;
left: 50%;
width: 90px;
text-decoration: none;
-webkit-transition: all 800ms;
-moz-transition: all 800ms;
}

#prevbutton a {
width: auto;
left: -1px;
right: 50%;
margin-right: 135px;
z-index: 10000;
}

#frame span {
font-size: 26px;
line-height: 56px;
margin: 0 75px;
color: #fff;
}

#nextbutton a {
width: auto;
right: 0;
left: 50%;
z-index: 10004;
margin-left: 135px;


}

#share a {
margin-left: -45px;
z-index: 10001;
}

#tweet a {
margin-left: -135px;
z-index: 10001;
}

#plus a {
margin-left: 45px;
z-index: 10003;
}

#edit a {
left: 0;
opacity: 0;
z-index: 10011;
}

#source a {
left: auto;
right: 20px;
opacity: 0.3;
}

#frame a:hover {
cursor: pointer;
background-color: rgba(195,195,195,0.25);
-webkit-transition: all 0ms;
-moz-transition: all 0ms;
color: #fff;
}

#frame a:active {
opacity: 0.8 !important;
-webkit-transition: background-color 0ms;
-moz-transition: background-color 0ms;
}



.influads_block {
position: fixed;
bottom: 0px;
width: 174px;
left: 50%;
left: 87px;
height: 90px;
font-size: 11px;
background-color: rgba(0,0,0,0.85);
z-index: 120;
-webkit-transition: height 400ms;
-moz-transition: height 400ms;
}

.influads_block:hover {
height: 150px;
-webkit-transition: height 800ms;
-moz-transition: height 800ms;

}


.influads_block a {
display: block;
text-decoration: none;
line-height: 1.3;
color: rgba(255,255,255,0.7);
padding: 10px;
}

.influads_text_a {
height: 200px;
}

.influads_block img {
display: block;
margin: 0;
margin-bottom: -10px;
}




.billomat {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 120;
height: 60px;
display: none;
}

.billomat a {
margin: 0;
padding: 10px;
font-size: 17px;
line-height: 40px;
height: 40px;
text-decoration: none;
color: #fff;
display: block;
text-align: center;
background-color: rgba(0,0,0,0.85);
}

.billomat a strong {
color: #fff;
}

.billomat a:hover {
background-color: rgba(255,0,0,1);
}




@media all and (min-width: 800px) {

.billomat { display: block; }
.billomat a { font-size: 15px; }

}




@media all and (min-width: 900px) {

.billomat a { font-size: 17px; }

}








@media all and (min-width: 1423px) {
body { font-size: 17px; }


.contentcell {
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-count: 3;
}

aside {
-moz-column-count: 4; 
-webkit-column-count: 4; 
column-count: 4; 
}

}





@media all and (max-width: 1023px) {
body { font-size: 17px; }

.bad { display: none;}
body { margin-right: 0;}

#logo, #logoschatten { margin-top: 3.3em; left: 3.3em; }
#format {display:none;}

.contentcell {
-moz-column-count: 1; 
-webkit-column-count: 1; 
column-count: 1;
width: 100%;
}

.rectangleright, .rectangleleft { display: none; }

aside {
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-count: 3; 
}

aside, footer {
font-size: 75%;
}

}


@media all and (max-width: 767px) {
body { font-size: 16px; }

#logo, #logoschatten { margin-top: 2.35em; left: 2.35em; }
.rectangleright, .rectangleleft { display: none; }

#dmig {
font-size: 150px;

}







.contentcell {
-moz-column-count: 1; 
-webkit-column-count: 1; 
column-count: 1;
width: 100%;
}

aside {
-moz-column-count: 2; 
-webkit-column-count: 2; 
column-count: 2; 
}


aside, footer {
font-size: 83%;
}

}


@media all and (max-width: 479px) {
body { font-size: 15px; }
.contenttable { padding: 0 1.5em; padding-bottom: 55px; border-top: solid 1px #fff; }
#frame a {display:none;}
#prevbutton a { margin-right: 0; }
#nextbutton a { margin-left: 0; }
#logo, #logoschatten { margin-top: 1.4em; left: 1.4em; }

#dmig {
font-size: 120px;

}

aside, nav {
padding: 25px;
font-size: 92%;
}

aside {
-moz-column-count: 1; 
-webkit-column-count: 1; 
column-count: 1; 
}

}

@media all and (max-width: 530px) {
h1 { font-size: 270%; }
}

@media all and (max-height: 570px)and (max-width: 940px) {
h1 { padding-bottom: 0; }
}

@media all and (max-width: 486px) {
h1 { font-size: 240%; }

#dmig {
font-size: 100px;
padding-bottom: 70px;

}

}

@media all and (max-width: 319px) {
body { font-size: 14px; }

#dmig {
font-size: 80px;
padding-bottom: 70px;
}

}







@media all and (width: 1024px) {


body { overflow-y:hidden; font-size: 20px; }


.pfeiltasten, #frame { display: none; }

#logo, #logoschatten { margin-top: 45px; left: 45px; }

}




@media all and (width: 768px) {

body { overflow-y:hidden; font-size: 20px; }

.pfeiltasten, #frame { display: none; }

.contentcell { max-width: auto; }

}