/*
Project: paintball shop.de
File: css/style.css
Last edited: March 31, 2015, 10:05 am
*/

/*  Main  */
body,html
{
height:100%;  
}

body {
 background:#111;
 color:#eee;
 font-family: 'Roboto Condensed', sans-serif;
 font-size: 100%;
 line-height: 1.5;   
 padding: 20px;  
}

a, a:visited, a:active {color: #fff}
a:hover {text-decoration: none}

#wrapper {
 margin:0 auto;
 width:100%; 
 font-size: 1.5em    
}

#header {
/*background: #111 url(../images/Kasse.jpg) no-repeat 50% 100%;
background-attachment: fixed; 
background-size:cover;*/
height: calc(100vh - 20em);
min-height: 20em;
/*width: calc(100% - 40px);  
border:20px solid #111;    
border-width: 20px 20px 10px;*/
width:100%;    
position: relative
}

.hero {
    position:relative;
    top:0;
	left:0;
	z-index:0;
	display:block;
	overflow:hidden;
	padding:0;
	width:100%;
	height:100%;
	background: #000
}

.online_shop {margin-top:2em;display: block; text-align: center}

#content .picture, .main {/*border:20px solid #111;*/display: block;margin-bottom: 1em}
#content img {max-width:100%;height: auto}
#content p {margin-bottom: 1em}

#footer {
clear: both;
margin: 2em 0 1em;   
}

.impressum  {
  display: block;
  /*visibility:hidden;
  opacity:0;
  height:0;  */
  visibility:visible;
  opacity:1; 
  height:auto;
  overflow:hidden;
  -webkit-transition:all 1s; 
  transition: all 1s;
}

.view {
  /*visibility:visible;
  opacity:1; 
  height:auto;  */
  visibility:hidden;
  opacity:0;
  height:0;
}

.open_impressum, .open_impressum_open {cursor: pointer;}

.open_impressum:before {
    content:"+";
    margin-right: 5px;
    font-size: 1.2em;
}

.open_impressum_open:before {
    content:"-";
    margin-right: 5px;
    font-size: 1.2em;
}


.left {margin-top: 20px}

h1 {
    font-size:1.8em;
    line-height: 1em;
    color: #fff;
    text-transform: uppercase;
    left: -5px;
    bottom: -1px;
    position: absolute;
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    background: #111;
    padding:10px 10px 0 0;
    width: 100%
}

h2 {
    font-size: 1.2em;
    color: #eee;
    padding-bottom: 1em
    
}




/* CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
-----------------------------------------------------------------*/
@media screen and ( min-width: 63.237em)  {
    
#wrapper {
 font-size: 1em    
}
    
#header {
min-height: 40em;
}    
    
h1 {font-size: 7.6em;width: auto}
    
h2 { font-size: 1.8em;}    
    

.quorter {width:calc(25% - 20px)}
 
.left {float:left;margin-right: 20px;margin-top: 20px}
.right {float:right;margin-left: 20px;margin-top: 20px}
}

/* CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 63.236em) {
    
#header {
min-height: 30em;
}
    
h1 {font-size: 3.5em;}
h2 { font-size: 1.6em;} 
.left {float:left;margin-top: 20px;margin-right: 20px}
.right {float:left;margin-right: 20px;margin-top: 20px}
.quorter {width:calc(50% - 20px)}     
}