/* ############### 1800px ############### */


@media (max-width: 1800px) {

}


/* ############### 1650px ############### */


@media (max-width: 1650px) {
	#textbox_home article, #kontakt .kontakt_title {  
	  width: 60%;
	  margin: 0px 20% 0px 20%;
	}
	#projekte .overlay {
	  top: 20px;
	}
	#projekte h2 {
	  font-size: 20px;
	}

}


/* ############### 1550px ############### */


@media (max-width: 1550px) {
  #navigation_container .logo img {
	  width:320px;
	}
}


/* ############### 1400px ############### */


@media (max-width: 1400px) {
	#textbox_home article, #booking article, #kontakt .kontakt_title {  
	  width: 70%;
	  margin: 0px 15% 0px 15%;
	}
	#booking .container_2 {   
	  width:90%;  
	  margin:65px 5% 22px 5%;
	}
  a.navigation { 
	  font-size: 16px;
	  margin: 0px 50px 0px 0px;
	} 
	.navigation_active { 
	  font-size: 16px;
	  margin: 0px 50px 0px 0px;
	}
}


/* ############### 1300px ############### */


@media (max-width: 1300px) {
  #navigation_container .logo img {
	  width:300px;
	}
	#projekte h2 {
	  font-size: 18px;
	}
	#booking .container_2 {   
	  width:100%;  
	  margin:65px 0% 22px 0%;
	}
}


/* ############### 1200px ############### */


@media (max-width: 1200px) {
	#projekte article, #projekte .container_left  { 
	  float:none;
	  width: 50%;
	  margin: 0px 25% 0px 25%;
	}
	#projekte h2 {
	  font-size: 24px;
	}
	#projekte .overlay {
	  top: 40px;
	}
	#projekte article { 
	  margin-top:50px
	}
	#projekte .container_left { 
	  margin-top:0px
	}
	#projekte {  
	  padding: 0px 0px 26px 0px;
	}
	#textbox_home article, #booking article, #kontakt .kontakt_title {  
	  width: 80%;
	  margin: 0px 10% 0px 10%;
	}
 
  
}


/* ############### 1100px ############### */

@media (max-width: 1100px) {
	#kontakt {  
	  padding: 45px 0px 26px 0px;
	}
	#textbox_home, #booking {  
	  padding: 42px 0px 45px 0px;
	}
	#booking .container {  
		width:100%;
	  margin:45px 0% 0px 0%;
	}
	#textbox_home article, #booking article, #kontakt .kontakt_title {  
	  width: 90%;
	  margin: 0px 5% 0px 5%;
	}
  #kontakt .container {  
		float:none;
	  width: 90%;
	  margin:0px 5% 0px 5%;
	}
	#kontakt .container_2 {  
		float:none;
	  width: 90%;
	  margin:0px 5% 0px 5%;
	}
	#footer {  
	  padding: 50px 0px 45px 0px;
	}
	#textbox_home .container {  
	  width: 50%;
	  margin:45px 25% 45px 25%;
	}
}


/* ############### 1050px ############### */


@media (max-width: 1050px) {
	.photo {
		height: 250px;
	}
  #projekte article, #projekte .container_left  { 
	  float:none;
	  width: 60%;
	  margin: 0px 20% 0px 20%;
	}
  #projekte article { 
	  margin-top:50px
	}
	#projekte .container_left { 
	  margin-top:0px
	}
  #footer_link_1, #footer_link_2 {
  	display:none;
  }
  #mobileMenu {
    display: block;
    z-index: 99;
  }
  .toggleMobile {
    position: fixed;
    top: 12px;
    right: 12px;
    display: block;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 999;
  }
  .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3 {
    display: block;
    position: absolute;
    width: 40px;
    height: 8px;
    left: 0;
    background: #b4532d;
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
  }
  .toggleMobile span.menu1 {
    top: 0;
  }
  .toggleMobile span.menu2 {
    top: 14px;
  }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        #top_navigation_bg
        {
                display:none;
        }
}


/* ############### 915px ############### */


@media (max-width: 915px) {
	#cookies article {
		width:90%; 
		padding: 0px 5% 0px 5%;
	}
	#cookies p {
	  text-align:center;
		padding: 50px 3% 30px 0%; 
	}
  #projekte article, #projekte .container_left  { 
	  float:none;
	  width: 70%;
	  margin: 0px 15% 0px 15%;
	}
  #projekte article { 
	  margin-top:50px
	}
	#projekte .container_left { 
	  margin-top:0px
	}
	#booking .container, #kontakt .container, #textbox_home .container {  
	  padding: 30px; 
	} 
}


/* ############### 800px ############### */


@media (max-width: 800px) {
  #projekte article, #projekte .container_left  { 
	  width: 80%;
	  margin: 0px 10% 0px 10%;
	}
  #projekte article { 
	  margin-top:50px
	}
	#projekte .container_left { 
	  margin-top:0px
	}
	#textbox_home .container {  
	  width: 70%;
	  margin:45px 15% 45px 15%;
	}
	.title {
	  font-size: 30px;
	  line-height:40px;
	}
}


/* ############### 700px ############### */


@media (max-width: 700px) {
  #projekte article, #projekte .container_left  { 
	  width: 90%;
	  margin: 0px 5% 0px 5%;

	}
 #projekte article { 
	  margin-top:50px
	}
	#projekte .container_left { 
	  margin-top:0px
	}
  #projekte h2 {
	  font-size: 20px;
	}
	#projekte .overlay {
	  top: 20px;
	}
	#projekte .smalltext {
	  padding: 23% 0 0 5%;
	}
  #textbox_home .container {  
	  width: 100%;
	  margin:45px 0% 45px 0%;
	}
}

/* ############### 600px ############### */


@media (max-width: 600px) {
	#projekte h2 {
	  font-size: 18px;
	  padding: 0px 10px 0px 10px;
	}
}


/* ############### 500px ############### */


@media (max-width: 501px) {
  .title {
	  font-size: 24px;
	  line-height:36px;
	}
	
}

/* ############### 420px ############### */

@media (max-width: 420px) {
  #projekte h2 {
	  font-size: 16px;
	  padding: 0px 10px 0px 10px;
	}
}

}