/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11.10.2016, 11:55:58
    Author     : Justus Schmidt
*/
/* ------------------------------other */
@media(max-width: 1350px){
    
    body{
        background:none;
    }
    
    p{  width: 83%;
    }
    
    .start{
        float:none;
        margin:60px auto;
        width:400px;
        height:310px;
    }
    .tätigkeiten{
        margin-top: 43px;
        width:70%;
    }
    .tätigkeiten li {
        padding:8px;
    }
    
    #contact{
        float:none;
        margin: 30px 5% 50px;
    }
        
     #waswirtun{
        margin-left:5%;
        margin-top: 50px;
        margin-bottom: 0}
}

/* ------------------------------ iPAD */
@media only screen and (max-width: 960px),
(min-device-width : 768px) and (max-device-width : 1024px)
{
    #header nav ul li{
        font-size: 15px;
        
    }
    #maindiv{
        width:90%;
    }
    #logo{
        width:250px;
    }
    #footer {
    }
    .afooter {
    }
    
    nav ul li a{
       height: 22px; 
       font-size: 17px;
    }
    .inputbox{
        width: 80%;
            
        }
        .fancyboximg{
            height:80px;
        }
}


/* ------------------------------- iPHONE */
@media (max-width:560px), (device-height : 568px) and (device-width : 320px)
{
    
    
    .fancyboximg{
        width:85px;
        height:85px;
    }
    
    p{
     margin: 10px 0 25px 0;
     font-size: 19px;
     width: 90%;
    }
    .inputbox{
        margin-left: 0;
        padding:0;
    }
    textarea{
        margin-left:0;
    }
    
   
    #contact{margin-left:0;}
    
    #submain{
       width:100%;
       border:none; 
       box-shadow:none;

    }   
    
    #logo{
    background-image:url(../images/logo.png);
    height: 45px;
    width: 200px;
   
    
    }
    
     nav {
    display: none;
   
        }

    

    .start{ 
        margin:auto;
        width:280px; 
        height:auto;
      
    }

    #footer{
   		background-color: transparent;
    }
    
    #burger{
        -webkit-box-shadow: 2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        margin-top:-78px;
        display:inline;
	position:fixed;
	right: 20px;
	width: 20px;
	height: 24px;
	background: linear-gradient(#FFF,#DDD);
	border: #AAA 1px solid;
	border-radius: 2px;
	padding: 2px 5px;
	cursor: pointer;
	transition: border 0.3s linear 0s;
}
    #burger:hover{
	border: #06F 1px solid;
    }
    #burger:hover div{
	background: #06F;
    }
    #burger  div{
	width: 20px;
	height: 4px;
	background: #333;
	margin: 3px 0px;
	border-radius: 4px;
	transition: background 0.3s linear 0s;
    }

    
    }
    #cp{   
        display:inline;
        -webkit-box-shadow: 2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         2px 1px 21px 0px rgba(50, 50, 50, 0.5);
        margin-right: auto;
        margin-left:auto;
	position: fixed;
	right: -260px;
	margin-top: -48px;
	width: 260px;
	height: auto;
	background: #DDD;
	opacity: 0;
	transition: opacity 0.3s linear 0s, right 0s linear 0s;
	cursor: pointer;
    }
    #cplist{
    margin:0;
    padding:0;
    list-style:none;
    
    }
    #cplist a{
    display: block;
    padding: 15px;
    color:black;
    text-decoration: none;
    }
    
    


        
    #cplist li {
    margin:5px;
    border-bottom: 1px solid black;
    padding:5px;
    }
    #cplist li.active{
    background-color:#FFCF00;
    #cplist li:last-child {

    border-bottom:none;
    
    }


        
   
 

}





/* -------------------------------  small phone */
@media (max-width:480px){

    .afooter{
   
     }
     #footer{
         width: 65%;
     }
}