* {
  margin: 0;
  padding: 0;
}

body{
    font-family: Arial;
	font-size:15px;
    margin: 0;
    background: #f5f5f5;
}

.wrapper{
    width: 100%;
    max-width: 1180px;
   padding: 0px 0px 0px 0px;
    margin: 0 auto;
    

}



.pedik{
  width:40%;
   text-align:left;
  padding: 0px 35px 0px 40px;
background-color:rgba(0,0,0,0.3);
  min-height:450px;
}



/*animation*/

.pedik{
    position:absolute;
    left:-700px;
    animation-name: drive;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    animation-timing-function:ease-out;
}


/*keyframes*/

@keyframes drive{
    0%{transform:translateX(0)}
    100%{transform: translateX(700px)}
}






h1.logo{
    background-image: url(img/logo.png);
  background-repeat: no-repeat;
   width: 200px;
    text-indent: -10000px;
   
   float: left;
   margin-left: 10px;
    margin-top: 10px;
}

header:after {
	 content: "";
    clear: both;
    display: block;
}


header nav{
    float: right;
	margin-top: 5px;
	}
	

header nav h2{
    text-indent: -10000px;
	
    height: 0;
    margin: 0;
}

header nav li{
    float: left;
    list-style-type: none;
    margin: 10px 10px 0px 0px;
   
	}

header nav li a{
    text-decoration: none;
    color: #333;
    font-size: 100%;
    
}

header nav li a:hover{
    
    background: #edc64d;
   

}





#showcase{
  min-height:450px;
   background-image:url(img/showcase.png);
background-size:cover;
 background-repeat: no-repeat;
   width: 100%;
  background-position: center;
  color:#ffffff;
  

}

#showcase:after {
	 content: "";
    clear: both;
    display: block;
}





#showcase h3{
  margin-top:70px;
  font-size:30px;
  margin-bottom:10px;
    text-shadow: 0 0 4px #000000;
 color:#edc64d;
}

#showcase p{
  font-size:20px;
    text-shadow: 0 0 4px #000000;
}





.contact, .contact1 {
   
   text-align:center;
    overflow: hidden;
float:none;
   padding: 20px 0 20px 0;
}
.contact1 {
   background: #dbdbdb;
   
}
.contact h5, .contact1 h5 {
  
  font-size:30px;
  margin-bottom:20px;
   
}

.contact img, .contact1 img{
 
  width: 50px;
    height: 50px;
  margin-right: 2px;
     transition: 1s;
}

.contact img:hover, .contact1 img:hover {
    
    transform: scale(1.2,1.2);
}


.contact a, .contact1 a {
 
font-size: 20px;

}



.button {
    background-color: #343333;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    margin: 20px 2px;
    cursor: pointer;
    transition: 1s;
}
.button:hover{
   background-color: #edc64d;
    color: #343333;
    transform: scale(1.2,1.2);
}


footer {
 
  
   background: #343333;
    padding:30px 0 35px 0;
 
  float:none;
  

}

footer p{
	font-size: 20px;
	   text-align:center;
	   color: white;
}


#myBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #e0ab06;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}

/*animation*/


.os-animation, .staggered-animation-container, .staggered-animation-container1, .staggered-animation-container2, .staggered-animation-container3, .staggered-animation-container4, .staggered-animation-container5 {
    margin-top: 50px;
	float:none;
	
}

.os-animation ul, .staggered-animation-container ul,  .staggered-animation-container1 ul, .staggered-animation-container2 ul, .staggered-animation-container3 ul, .staggered-animation-container4 ul, .staggered-animation-container5 ul, .product ul, .product1 ul {
    padding:0;
   
	margin:0;
   
}
.os-animation ul:after, .staggered-animation-container ul:after,  .staggered-animation-container1 ul:after, .staggered-animation-container2 ul:after, .staggered-animation-container3 ul:after, .staggered-animation-container4 ul:after, .staggered-animation-container5 ul:after, .product ul:after, .product1 ul:after {
    content: "";
    clear: both;
    display: block;
    
}

.os-animation li, .staggered-animation-container li, .staggered-animation-container1 li, .staggered-animation-container2 li, .staggered-animation-container3 li, .staggered-animation-container4 li, .staggered-animation-container5 li {
    float: left;
    width: 23%;
    margin: 1%;
    list-style-type: none; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       background: #e1e1e1;
}

/*separate pages start*/

.product, .product1 {
background: #dbdbdb;
    margin:0 0 0px 0;
    text-align:center;
    padding-top: 10px;
    padding-bottom: 10px;
   
   
}
    
.cover{
     object-fit: cover;
  width: 500px;
  height: 500px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cover1{
    object-fit: cover;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.product li {
    float: left;
    width: 48%;
    height: 48%;
    margin: 1%;
    list-style-type: none; 
   /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.product1 li {
    float: left;
    width: 98%;
    height: 98%;
    margin: 1%;
   
    list-style-type: none; 

}
.product h4, .product1 h4 {
      font-size:25px;
  margin-bottom:5px;
    margin-top:5px;
  text-align:center;
}
.product h8, .product1 h8{
       font-size:15px;
 
    margin:1px 1px 15px 1px;

}

/*separate pages end*/

.os-animation li img, .staggered-animation-container li img, .staggered-animation-container1 li img, .staggered-animation-container2 li img, .staggered-animation-container3 li img, .staggered-animation-container4 li img, .staggered-animation-container5 li img, .product li img, .product1 img {
    width: 100%;
    
}


.os-animation li:hover, .staggered-animation-container li:hover, .staggered-animation-container1 li:hover, .staggered-animation-container2 li:hover, .staggered-animation-container3 li:hover, .staggered-animation-container4 li:hover, .staggered-animation-container5 li:hover {
   background-color: #edc64d;
    cursor:pointer;
}




.os-animation li p, .staggered-animation-container li p, .staggered-animation-container1 li p, .staggered-animation-container2 li p, .staggered-animation-container3 li p, .staggered-animation-container4 li p, .staggered-animation-container5 li p {
    color: #333;
    text-decoration: none;
    float: left;
    font-size: 15px;
    padding: 0px 0px 5px 5px;
    margin: 0px 0px 0px 0px;
     display:block;
 height: 30px;
  
}



.os-animation h4, .staggered-animation-container h4, .staggered-animation-container1 h4, .staggered-animation-container2 h4, .staggered-animation-container3 h4, .staggered-animation-container4 h4, .staggered-animation-container5 h4 {
  
  font-size:30px;
  margin-bottom:5px;
    margin-top: 15px;
  text-align:center;
  }







staggered-animation-container, contact, contact1, staggered-animation-container1, product, staggered-animation-container2, staggered-animation-container3, staggered-animation-container4, staggered-animation-container5, product1   {
            opacity: 0;
        }  
staggered-animation-container.animated, contact.animated, contact1.animated, staggered-animation-container1.animated, product.animated, staggered-animation-container2.animated, staggered-animation-container3.animated, staggered-animation-container4.animated, staggered-animation-container5.animated, product1.animated  {
            opacity: 1;
        }   


/*end animation*/



video {
    max-width: 100%;
    height: auto;
}



/*media queries*/
/*tablet*/
@media screen and (max-width: 1050px){
    
	header nav{
    float:none;
    clear:left;
    width: 100%;
   
}
    
header nav{
  	margin-top: 0px;
	}
    
header nav ul{
	margin:0;
	padding:0;
text-align:center;
}
h1.logo{
	margin:10px auto 0;
   
	float:none;
 
   
}

header nav li{
margin:5px 7px 5px 7px;
		padding:0;
	text-align:center;
	float:none;
	display:inline-block;
  
}
#showcase h3{
  margin-top:70px;
  font-size:25px;
  margin-bottom:10px;

}

#showcase p{
  font-size:17px;
  
} 
.pedik{
  width:50%;
  
  padding: 0px 25px 0px 30px;

  
}    
  .os-animation ul{
   
	margin:0 0 0 0;

}  
}


/*telefon*/
    @media screen and (max-width: 875px){

.burger-nav{
    display:block;
    height:37px;
    width:100%;
    background:url(img/burger1.png) no-repeat 98% center;
    background-color:#343333;
    cursor:pointer;
        }
        
        header nav ul{
            overflow: hidden;
            background:#3c3c3c;
            height:0;
        }  
        
        header nav ul.open{
        height:auto;    
                    
        }
        
        header nav ul li{
            float:none;
            text-align: left;
            width:100%;
            margin:0;
        }
        header nav ul li a{
            color:white;
            padding: 10px;
            border-bottom: 1px solid #505050;
            display: block;
            margin:0;
        }

        
 .os-animation li, .staggered-animation-container li, .staggered-animation-container1 li, .staggered-animation-container2 li, .staggered-animation-container3 li, .staggered-animation-container4 li, .staggered-animation-container5 li {
    float: left;
    width: 48%;
    margin: 0 1% 0 1%;
    margin-bottom: 5px;
}     

     .product li{
    
    width: 98%;
    margin: 0 1% 0 1%;
    margin-bottom: 5px;
}    
        
        
        .product li{
            width: 98%;
    margin: 0 1% 0 1%; 
        }       
        .cover{
            width:50%;
            height: 50%;
        }
  #showcase {
  
  background-position: 61% 50%; 
   }   
#showcase h3{
  margin-top:40px;
  font-size:25px;
  margin-bottom:10px;

}

#showcase p{
  font-size:16px;
    
}    
.pedik{
width:50%;
padding: 0px 25px 0px 25px;


        }
     
}

.os-animation li p, .staggered-animation-container li p, .staggered-animation-container1 li p, .staggered-animation-container2 li p, .staggered-animation-container3 li p, .staggered-animation-container4 li p, .staggered-animation-container5 li p {
    
    font-size: 13px;
   
}



/*telefon special*/
    @media screen and (max-width: 400px){
#showcase h3{
  margin-top:30px;
  font-size:17px;
  margin-bottom:10px;

}

#showcase p{
  font-size:16px;
     
}    
.pedik{
width:65%;
padding: 0px 15px 0px 15px;
        

        }
}