/*
 * Standard layout
 */
@media only screen and (min-width:769px) {

  .region-sidebar-second .block {
    	width: 100%;
	}
	
	#branding {
    	width: 100%;
	}
	
	#logo {
		padding-top: 10px;
		padding-left: 30px;
	}
	
	#site-name {
		padding-top: 35px;
		width: 280px;
	}
	  
  .nav-button {
    display: none;
  }
  
  #menu-bar {
    display: block !important;
  }
  
  #menu-bar .block-main-menu .menu-depth-1 {
    position: relative;
  }
  
  body #menu-bar .block-main-menu .menu-depth-1 > a {
    text-transform: uppercase;
  }
  
  #menu-bar .block-main-menu .menu-depth-1 > ul {
    position: absolute;
    left: 0;
    top: 32px;
    background: #ef7d00;
    z-index: 35;
    min-width: 180px;
    display: none;
    box-shadow: 0 2px 2px rgba(43, 59, 93, 0.29);
  }
    #menu-bar .block-main-menu .menu-depth-1:hover > ul {
      display: block;
    }
  body #menu-bar .block-main-menu .menu-depth-1 > ul {
    background: #fff;
  }
  
  #menu-bar .block-main-menu .menu-depth-2 {
    float: none;
    position: relative;
  } 
  
  #menu-bar .block-main-menu .menu-depth-2 > a {
    display: block;
    font-size: 14px;
    line-height: normal;
    padding: 6px 10px;
  }
  
  #menu-bar .block-main-menu .menu-depth-2 > ul {
    position: absolute;
    left: 180px;
    top: 0px;
    background: #ef7d00 ;
    z-index: 40;
    min-width: 180px;
    display: none;
    box-shadow: 2px 2px 2px rgba(43, 59, 93, 0.29);
  }
    #menu-bar .block-main-menu .menu-depth-2:hover > ul {
      display: block;
    }
  body #menu-bar .block-main-menu .menu-depth-2 > ul {
    background: #fff;
  }

  #menu-bar .block-main-menu .menu-depth-3 {
    float: none;
  }
    
  #menu-bar .block-main-menu .menu-depth-3 > a {
    display: block;
    font-size: 14px;
    line-height: normal;
    padding: 6px 10px;
  }
  
  #menu-bar .menu-block-wrapper a.active, 
  #menu-bar .menu-block-wrapper a.active-trail {
  	color: #333;
  }
  body #menu-bar .menu-block-wrapper a.active,
  body #menu-bar .menu-block-wrapper a.active-trail {
    color: #ef7d00;
  }
  
  #menu-bar .menu-block-wrapper a:hover {
  	text-decoration: underline;
  }
  
  .block-jetzt-helfen {
    display: block !important;
    position: absolute;
    top: 5px;
    right: 25px;
    z-index: 1;
    width: 75px;
  }
  
  .block-jetzt-helfen img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* search form */
  #page {
    position: relative;
  }

  #menu-bar {
    position: static;
  }

  #block-search-form {
    position: absolute;
    top: 10px;
    right: 16%;
    z-index: 1;
    width: 280px;
    padding: 0 !important;
  }
  
  /* Startseite - Slider */
  #slider h2 {
    padding: 6px 30px;
    background: rgba(0,0,0, 0.5);
    color: #fff;
    font-size: 28px;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
    #slider h2:after {
      display: none;
    }
    
  /* Startseite - Blöcke */  
  .region-highlighted .block-button {
    border-bottom: 0;
    float: left;
    width: 33.333%;
  }

	/* Startseite - Aktuelles */
	#latest-news {
  	padding-left: 20px;
	}
	
  #latest-news article {
    padding-right: 20px;
    margin-bottom: 20px;
  }
  
  /* Startseite - Inhaltsbereich */
  .region-front .region-inner {
    padding-left: 20px;
  }
  
	.region-front .block-front-first {
  	float: left;
  	width: 50%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-second {
  	float: left;
  	width: 50%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-third {
  	clear: left;
  	float: left;
  	width: 50%;
  	padding-left: 20px;
	}
	
}

/*
 * Desktop up
 */
@media only screen and (min-width:920px) {

  
  #logo a {
    display: block;
    width: 142px;
  }
  
  #slogan {
  	width: 276px;
  	float: left;
  	padding-top: 10px;
  }
  
  .block-jetzt-helfen {
    display: block !important;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1;
    width: 140px;
  }
  
  #block-search-form {
    top: 15px;
  }

	/* Startseite - Aktuelles */
	#latest-news {
  	padding-left: 20px;
	}
	
  #latest-news article {
    padding-right: 20px;
    margin-bottom: 0px;
  }
  
  .front.sidebar-second .content-inner {
    margin-right: 0;
  }
  
  /* Startseite - Inhaltsbereich */
  .region-front .region-inner {
    padding-left: 20px;
  }
  
	.region-front .block-front-first {
  	float: left;
  	width: 25%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-second {
  	float: left;
  	width: 50%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-third {
  	clear: none;
  	float: left;
  	width: 25%;
  	padding-right: 20px;
  	padding-left: 0;
	}

}

/*
 * Tablet portrait more
 */
@media only screen and (min-width:641px) and (max-width:768px) {
  /* Startseite - Blöcke */  
  .region-highlighted .block-button {
    border-bottom: 0;
    float: left;
    width: 33.333%;
  }
}

/*
 * Tablet portrait
 */
@media only screen and (min-width:481px) and (max-width:768px) {
	#branding {
    	width: 100%;
	}
		
	#site-name {
		padding-top: 35px;
		width: 280px;
	}
	  
  .nav-button {
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    z-index: 35;
  }
    .nav-button.active {
      color: #000;
    }
      .nav-button.active:after {
        content: " schließen";
      }
    body .nav-button {
      color: #000;
    }
  
  .block-jetzt-helfen {
    padding-top: 0.6875em !important;
  }
  
  #menu-bar {
    position: absolute;
    right: 0px;
    top: 88px;
    width: 50%;
    z-index: 35;
    display: none;
    box-shadow: 0 2px 2px rgba(43, 59, 93, 0.29);
  }
    #menu-bar.active {
      display: block;
    }
  
  #menu-bar #block-menu-block-1.block-main-menu {
    display: block;
  }
    
  #menu-bar .block-main-menu .menu-depth-1 {
    float: none;
    text-align: left;
    margin-bottom: 10px;
  }
  
  #menu-bar .block-main-menu .menu-depth-1 > ul {

  }
  
  #menu-bar .block-main-menu .menu-depth-2 {
    float: none;
    position: relative;
  } 
  
  #menu-bar .block-main-menu .menu-depth-2 > a {
    display: block;
    font-size: 14px;
    line-height: normal;
    padding: 6px 10px 6px 25px;
  }
    #menu-bar .block-main-menu .menu-depth-2 > a:before {
      content: "› ";
      display: inline;
    }
  
  #menu-bar .block-main-menu .menu-depth-2 > ul {

  }
  
  #menu-bar .block-main-menu .menu-depth-3 {
    float: none;
    position: relative;
  } 
    
  #menu-bar .block-main-menu .menu-depth-3 > a {
    display: block;
    font-size: 12px;
    line-height: normal;
    padding: 4px 10px 4px 40px;
  }
    #menu-bar .block-main-menu .menu-depth-3 > a:before {
      content: "» ";
      display: inline;
    }
  
  #menu-bar .menu-block-wrapper a.active, 
  #menu-bar .menu-block-wrapper a.active-trail {
  	color: #333;
  }
  
  #menu-bar .menu-block-wrapper a:hover {
  	text-decoration: underline;
  }
  
  /* Startseite - Slider */
  #slider h2 {
    padding: 6px 30px;
    background: rgba(0,0,0, 0.5);
    color: #fff;
    font-size: 20px;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
    #slider h2:after {
      display: none;
    }
  
	/* Startseite - Aktuelles */
	#latest-news {
  	padding-left: 20px;
	}
	
  #latest-news article {
    padding-right: 20px;
    margin-bottom: 20px;
  }
  
  /* Startseite - Inhaltsbereich */
  .region-front .region-inner {
    padding-left: 20px;
  }
  
	.region-front .block-front-first {
  	float: left;
  	width: 50%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-second {
  	float: left;
  	width: 50%;
  	padding-right: 20px;
	}
	
	.region-front .block-front-third {
  	clear: left;
  	float: left;
  	width: 50%;
  	padding-left: 20px;
	}
	
	#admin-menu {
  	display: none;
	}
	
	html body.admin-menu {
  	margin-top: 0 !important;
	}
	
}

/*
 * Smartphone portrait and landscape
 */
@media only screen and (max-width:480px) {
	body {
		font-size: 93.775%;
	}
	
	#branding {
    	width: 100%;
	}
	
  #logo {
  	padding-bottom: 30px;
	}
	
  #logo a {
    display: block;
    width: 64px;
  }
	
	#site-name {
		font-size: 1.0em;
		padding-top: 23px;
	}
	
	#site-slogan {
		font-size: 0.8em;
		width: 240px;
		padding-top: 20px;
	}
	
	#slogan {
  	width: 224px;
  	float: left;
  	padding-top: 10px;
	}
	
	.nav-button {
    cursor: pointer;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    bottom: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    z-index: 35;
  }
    .nav-button.active {
      color: #000;
      margin-left: -80px;
    }
      .nav-button.active:after {
        content: " schließen";
      }
    body .nav-button {
      color: #000;
    }
  
  #menu-bar {
    display: none;
  }
    #menu-bar.active {
      display: block;
    }
  
  #menu-bar #block-menu-block-1.block-main-menu {
    display: block;
  }
    
  #menu-bar .block-main-menu .menu-depth-1 {
    float: none;
    text-align: left;
    margin-bottom: 10px;
  }
  
  #menu-bar .block-main-menu .menu-depth-1 > ul {

  }
  
  #menu-bar .block-main-menu .menu-depth-2 {
    float: none;
    position: relative;
  } 
  
  #menu-bar .block-main-menu .menu-depth-2 > a {
    display: block;
    font-size: 14px;
    line-height: normal;
    padding: 6px 10px 6px 25px;
  }
    #menu-bar .block-main-menu .menu-depth-2 > a:before {
      content: "› ";
      display: inline;
    }
  
  #menu-bar .block-main-menu .menu-depth-2 > ul {

  }
  
  #menu-bar .block-main-menu .menu-depth-3 {
    float: none;
    position: relative;
  } 
    
  #menu-bar .block-main-menu .menu-depth-3 > a {
    display: block;
    font-size: 12px;
    line-height: normal;
    padding: 4px 10px 4px 40px;
  }
    #menu-bar .block-main-menu .menu-depth-3 > a:before {
      content: "» ";
      display: inline;
    }
	
	#main-content img {
		clear: both !important;
		max-width: 100%;
		min-width: 100%;
		height: auto !important;
		display: block;
		margin: 0 !important;
	}
	
	input.form-text, textarea {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
	}
	
	.hide-mobile {
		display: none !important;
	}
	
	.view .date-nav-wrapper .date-next,
	.view .date-nav-wrapper .date-prev {
		top: 45px;
	}
		
  #admin-menu {
  	display: none;
	}
	
	html body.admin-menu {
  	margin-top: 0 !important;
	}
	
	#latest-news .owl-nav {
    right: 5px;
  }
}

/*
 * Smartphone portrait
 */
@media only screen and (max-width:320px) {
	
}