html, body {
		height:100%;
                text-decoration: none;
                padding:0px;
                margin:0px;
                color:#232324;
               
	}

	body {
            transition: 1.0s;
            font-family: Ubuntu ,Arial;
            letter-spacing: 1px;
            background-color:#fffff;
                
        }
        
        li{ position: relative;
            left: 17px;
        }
        
        input{
            border-radius: 5px;
            border-bottom: solid #FFF; 
            
       }
       
       input:focus{
           transition: 1.0s;
          
           background-color: rgba(255, 10,10, 1.0);
       }
       
       #center{
           position: relative;
           
           max-width:2200px;
           height: 100%;
       }
       
        select{  
            border-radius: 5px;
            border-bottom: solid #FFF;   
       }
       
       select:focus{
           box-shadow: 2px 2px 2px #898989;
       }
       
       .left{
           float:left;
           
       }
       
       .right{
           text-align: right;
           float: right;
       }
       
       .white{
           
           transition: opacity 1.0s;
           position: fixed;
           z-index: 99;
           visibility: hidden;
           opacity: 0.0;
           top: 0;
           left:0px;
           padding: 230px;
           height: calc(100% - 460px);
           width: calc(100% - 460px);
           background-color: rgba(255, 255, 255, 0.9);
           overflow: auto;
       }
       
       .close{
           position: fixed;
           background-color: #ffffff;
           top: 0px;
           right:0px;
           padding-left: 230px;
           padding-right: 230px;
           padding-top: 50px;
           padding-bottom:20px;
           width: calc(100% - 460px);
           font-size: 5em;
           text-align: right;
       }
        
        a{
            transition:1.0s;
            text-decoration: none;
            color:inherit;
        }
        
        a:hover {
            transition:1.0s;
             color:#ff2222;
            
        }
        
        .biggerfont{
            font-size: 1.3em !important;
        }
        
        
        
        .container{
            position:relative;
            width:calc(100% - 200px);
            min-height:calc(45vw - 160px);
            margin-bottom: 30px;
            margin-left: 50px;
            font-size: 1.0em;
            background-size: cover;
            display:inline-block;
            padding: 50px;
            vertical-align: top;
            float:left;
        }
        
        .container2{
            position:relative;
            width:calc(16.66% - 25px);
            min-height:230px;
            min-width:230px;
            margin-bottom: 15px;
            margin-top: 15px;
            margin-right: 25px;
            font-size: 1.0em;
            background-size: cover;
            display:inline-block;
            padding: 0px;
            vertical-align: top;
            float:left;
            
        }
        
         .container3{
            position:relative;
            width:calc(25% - 5px);
            min-height:250px;
            min-width:250px;
            margin-bottom: 10px;
            margin-right: 5px;
            font-size: 1.0em;
            background-size: contain;
            display:inline-block;
            padding: 0px;
            vertical-align: top;
            float:left;
            background-repeat: no-repeat;
        }
        
         #map {
               padding: 0;
               width:calc(100% - 104px);
           }
        
        .halfwidth{
            
            //width:calc(50% - 122.5px);
            width:calc(50% - 175px);
        }
        
        .halfheight{
            min-height:calc(50% - 160px);
            
        }
        
        .quarterwidth{
            width:calc(50% - 175px);
            margin-top:5px;
           border-top: solid #d90000;
           color: white;
          background-image: url(../pictures/alcantara.jpg);
            //background-color: rgba(0, 0, 0, 0.9);
        }
        
        .alcantara{
          border-top: solid #d90000;
           color: white;
          background-image: url(../pictures/alcantara.jpg);
            
        }
        
        .quarterheight{
            min-height:calc(25% - 160px);
            
        }
        
        #kontakt{
            position: relative;
            background-color:rgba(200, 10, 10, 0.9);
            color: white;
            background-image:url(../pictures/alcantara_red.jpg);
            background-size: auto;
            border-top: solid #000000;
            
        }
        
        #content {
            font-family: Ubuntu !important;
        }
        
        #jumper {
            transition: all 2.0s;
            transform: rotate(180deg);
            position: absolute;
            border-radius: 5px;
            background-color: #ff2222;
            width: 50px;
            height: 50px;
            font-size: 2em;
            text-align: center;
            color: #fff;
            bottom: 20px;
            left: calc(50% - 25px);
        }
       
        
        .menu{
            transition: 1.0s;
            position: fixed;
            top: 0px;
            height: 60px;
            width: calc(100% - 100px);
           
            background-color: rgba(0, 0, 0, 0.9);
            text-align: center;
            font-size: 2em;
            color: #fff;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 40px;
             padding-bottom: 10px;
            z-index: 97;
            min-height: 70px;
            max-height: 70px;
          
            border-top: solid #d90000;
        }
        
          
        #wohnungen{
            color:white;
        }
        
        #wohnungen .overlay{
            opacity:0.0;
        }
        
        #logo{
            position:relative;
            height:100%;
        }
        
        #citroen img{
            position:fixed;
            top: 20px;
            left: 110px;
            max-width: 380px;
            z-index: 98;
        }
        
        #derendinger img{
            position:fixed;
            top: 20px;
            right: 50px;
            max-width: 120px;
            z-index: 98;
        }
      
        #logocoiffeur{
            position:absolute;
            top: 50px;
            left: 50px;
            max-width: 50%;
            max-height: calc(100% - 100px);
        }
        
        
        
       
        .newselement{
            border-top: solid red;
            padding-top: 5px;
            padding-bottom: 25px;
            
        }
       
        #menulines{
            position: fixed;
            left: 50px;
            top: 30px;
            width:50px;
            z-index:98;
            color: #fff;
            font-size: 0.8em;
        }
        
        #menulines svg{
            transition: 3.0s;
            position:fixed;
            width:40px;
            z-index:98;
            top:20px;
            height:30px;
            left:50px;
            transition: transform 1.0s;
            box-shadow: 0px 0px 0px #fff;
            
        }
        
        #menulines:hover #line1{
            transition: transform 1.0s;
            transform: rotate(45deg);
        }
        
        #menulines:hover #line2{
            opacity: 0.0;
        }
        
        #menulines:hover #line3{
            transition: transform 1.0s;
            transform: rotate(-45deg);
        }
        
       
        
        #menulines line{
            transition: transform 1.0s;
            stroke-width: 2px;
            fill: none;
            stroke:#fff;
            transition: 1.0s;
            
        }
       

.cookies{
            position: fixed;
            width:calc(100% - 20px);
            bottom: 0px;
            background-color: #000;
            padding-left: 60px;
           padding-right: 60px;
           padding-top:10px;
           padding-bottom: 10px;
            font-size:1.2em;
            padding:10px;
            color:#ffffff;
            opacity: 0.9;
            visibility: visible;
            z-index:98;
            text-decoration: none;
         }
        
         
        .cookies a:link {
	  
        color:#ffffff;  }
	
	.cookies a:visited {
	text-decoration: none; 
        color:#ffffff;  ;
	}
	.cookies a:hover {
	text-decoration: none; 
        color:#555555;  ;
	}
	.cookies a:active {
	text-decoration: none; 
        color:#555555; ;
	}
 
        .nocookies
         {
            transition: 1.0s;
            opacity: 0.0;
            visibility: hidden;
         }
    
        .privacy{
            transition: 1.0s;
            position: fixed;
            left: 0px;
            top: 0px;
            font-family: arial;
            font-size:1.0em;
            text-align: left;
            background-color: #ffffff;
            overflow-x: hidden;
            overflow-y: scroll;
            width:calc(100% - 100px);
            height: calc(100% - 100px);
            margin: 0px;
            padding:50px;
            color:#000000;
            opacity: 0.0;
            visibility: hidden;
            z-index:99;
        }
 
         .noprivacy{
            transition: 1.0s;
            opacity: 0.95;
            visibility: visible;
       }    
       #canvas{
           position:fixed;
           width:100%;
           height:100%;
           background-color: #fff;
           opacity:0.7;
           left:0px;
           top:0px;
           z-index: 98;
           visibility: hidden;
       }
       
       #slidemenu{
           transition: 1.0s;
           position: fixed;
           width:200px;
           height:calc(100% - 100px);
           padding: 50px;
           left: -300px;
           top:0px;
           background-color: rgba(200, 10, 10, 1.0);
           background-image: url(../pictures/alcantara_red.jpg);
           z-index: 99;
           color: #fff;
           visibility: hidden;
           box-shadow: 5px 5px 6px #110000;
       }
       
       .welcomecaption{
           margin: 50px;
           padding: 50px;
           letter-spacing: 5px;
           color: rgba(255, 255, 255, 1.0);
           font-size: 1.6em; 
       }
       
       .headline_bg{
           display:inline-block;
            position: relative; 
            width:calc(100% - 200px);
            float:left;
            margin: 50px;
           padding: 50px;
           letter-spacing: 5px;
           color: rgba(255, 255, 255, 1.0);
           font-size: 1.6em;
       }
       
       .mainmenupoint{
           font-size: 1.2em;
           letter-spacing: 2px;
       }
       
       .menupoint{
           letter-spacing: 2px;
           
       }
       
       #coiffeur {
           transition: 1.0s;
           opacity: 0.2;
           
       }
       
       .overlay{
           transition: 1.0s;
           position:absolute;
           top: 0px;
           left: 0px;
           width:100%;
           height:100%;
           background-color:#054aa9;
           opacity: 0.4;
       }
       
       .blue {
           background-color:#054aa9;
       }
       
       .black{
           color: #000;
       
       }
       
       .round{
           border-radius: 10px;
       }
       
       .nopacity {
           opacity: 0.0;
       }
       
       .nopadding{
           padding: 0px;
           width:calc(100% - 100px);
       }
       
       #coiffeur:hover .overlay{
       transition: 1.0s;
       opacity: 0.7;
       }
       
       #autoscout {
           transition: 1.0s;
           opacity: 1.0;
           min-height: 100px;
           background-image: url(../pictures/alcantara.jpg); 
           background-size: contain; 
           padding:10px;
           width: calc(50% - 95px);
           
       }
       
        
       
       .slideshow{
           position:absolute;
           transition: opacity 3.0s;
           top: 0px;
           left: 0px;
           width:100%;
           height:100%;
           background-size:cover;
           background-color: #000;
           
       }
       
       #welcome1 {
           opacity: 1.0;
       }
       
       #welcome2 {
          
           opacity: 0.0;
           
       }
       
       .nomargin{
           margin: 0px;
           padding: 0px;
       }
       
       .video {
 
  min-width: 100%; 
  min-height: 100%; 
  
  width: auto;
  height: auto;
 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.bumper{
    min-height:30px;
}
       
      /*Kontaktformular*/
      
      .contactform{
           z-index:98;
           opacity:1.0;
           text-align: center;
       }
       
       .mobilemenu{
           visibility: hidden;
       }
       
       
       .error{
	display: none;
	margin-left: 10px;
        opacity:0.0;
        
        }		

        .error_show{
        transition: 3.0s;
	color: rgb(250, 0, 0);
	margin-left: 10px;
        opacity: 1.0;
        font-size:0.8em;
        }

        input.invalid, textarea.invalid{
	border: 1px solid #f9a54f;
        }

        input.valid, textarea.valid{
	border: 1px solid green;
        }
        
        #contact{
       
        text-align: left;
        width:350px;
        
        }
        
        #contact label{
	display: inline-block;
	min-width: 140px;
	text-align: left;
        }
        
        button {
            transition: 1.0s;
            font-size:1.1em;
            border: solid rgba(250, 10, 10, 0.1);
            background-color: #000;
            border-radius: 3px;
            color: #fff;
            padding: 15px;
        }
        
        button:hover {
            transition: 1.0s;
            font-size:1.1em;
            border: solid rgba(250, 10, 10, 0.9);
            background-color: #000;
            border-radius: 3px;
            color: #fff;
            padding: 15px;
        }
        
        #contact div{
	margin-top: 0.5em;
        }
        
        .modelle {
            transition: 1.0s;
            width: 200px;
            text-align: center;
            padding: 5px;
            margin-left: 50px;
            margin-bottom:20px;
            border-top: solid red;
            display: inline-block;
            min-height: 180px;
            vertical-align: top;
            border-radius: 5px;
        }
        
        .modelle:hover{
            transition: 1.0s;
            background-color: rgba(200, 200, 200, 0.1);
            box-shadow: 5px 5px 5px rgba(20, 20, 20, 0.8);
        }
        
        .modelle img{
            width: 100%;
        }
        
            
        textarea{
	vertical-align: top;
	height: 5em;
        }
        input, textarea, select
        {
        border: 1px solid #dadada;
        border-radius: 5px; 
        padding:5px;
        }
    
       @media only screen and (max-width: 1550px) {
       
        .quarterwidth{
            width:calc(50% - 175px);
            
          
        }
        
        #homevideo{
            min-height: 282px;
        }
        
        .welcomecaption{
           margin: 0px;
           font-size: 1.5em;
           position: relative;
       }
       
       #news {
           padding-top: 50px;
           padding-bottom: 50px;
           padding-left: 0px;
          
       } 
       
       }
      
       
  
   @media only screen and (max-width: 1050px) {
       
        .quarterwidth{
            width:calc(50% - 175px);
                      
        }
        
       
       
        .welcomecaption{
          margin: 0px;
          font-size: 1.3em;
       }
       
       
   }
   
   @media only screen and (max-width: 850px) {
       
       .halfwidth{
            width:calc(100% - 200px);
          
        }
       
        
        .quarterwidth{
            width:calc(100% - 200px);
          
        }
        
        
         #autoscout {
          
           width: calc(100% - 120px);
           
       }
       
       .halfheight{
            min-height:220px;
            
        }
        
        .container{
            min-height: 220px;
        }
       
        .white{
            top: 165px;
            padding: 100px;
           height: calc(100% - 365px);
           width: calc(100% - 200px);
           }
       
       .close{
           padding-left: 100px;
           padding-right: 100px;
          width: calc(100% - 200px);
           
       }
       
   }
   
   @media only screen and (max-width: 590px) {
   
       #menu{
           font-size: 1.1em;
       }    
       
       .quarterheight{
           min-height: auto;
       }
   
       .right{
           float: left;
           text-align: left;
           margin-top: 30px;
       }
       
       #citroen img{
            position:fixed;
            top: 30px;
            right: 30px;
            max-width: 210px;
            z-index: 98;
        }
        
        #derendinger img{
            position:fixed;
            top: 20px;
            right: 20px;
            max-width: 70px;
            z-index: 98;
        }
        
        .welcomecaption{
           padding: 15px;
           letter-spacing: 3px;
           font-size: 1.1em; 
       }
       
       .headline_bg{
           font-size: 1.2em;
           //word-break: break-word;
       }
       
       .container{
           padding-left: 15px;
           padding-right: 15px;
           width: calc(100% - 130px);
           //text-align: justify;
       }
       
       #occasionen{
           top:-12px;
           margin-left:0px;
           width: calc(100% - 30px);
           
           }
       
       #welcome{
           top:-12px;
           margin-left:0px;
           width: calc(100% - 30px);
           }
           .slideshow{
               border-radius: 0px;
           }   
           
           
           .videomobile {
               min-height: 60px; 
           }
       
           #welcome1{
               background-position-x: -100px;
               background-repeat: no-repeat;
           }
           
            .white{
            top: 0px;
            padding: 30px;
           height: calc(100% - 60px);
           width: calc(100% - 60px);
          overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
           }
       
       .close{
           position: relative;
           background-color: #ffffff;
           top: 0px;
           left:0px;
           padding-left: 30px;
           padding-right: 30px;
           padding-top: 0px;
           padding-bottom:0px;
           width: calc(100% - 60px);
           font-size: 4em;
           text-align: right;
           z-index: 99;
          
       }
       
       
       
        input, textarea, select
        {
        border: 1px solid #dadada;
        border-radius: 5px; 
        padding:3px;
        max-width: 95px;
        }
        
        #contact label{
	display: inline-block;
	min-width: 125px;
	text-align: left;
        }
        
        #coiffeur {
            background-position-x: -150px;
        }
        
        #coiffeur2 {
            background-position-x: -150px;
        }
          
   }
   
   @media only screen and (min-width: 2200px) {
       
       #center {
        left: calc((100% - 2200px) / 2);
       }
       
       #welcome{
          
            min-height:calc(1000px - 160px);
       
       }
   }