@media (min-width: 960px) and (max-width: 1299px) {
	html {
		overflow-x: hidden;
	}
	
	body {
	    -moz-transform: scale(0.8, 0.8);
	    transform-origin: left top;
	    width: 125%;
	    zoom: 0.8;
	    zoom: 80%;


	}
	

	#header-back {
		background-size: auto;
	    zoom: 1;
	    zoom: 100%;
	    -moz-transform: scale(1, 1);	    	
	}
	
	.site-header {
		width: 100%;
	}


}


@media (min-width: 320px) and (max-width: 959px) {
	
	body {
		overflow-x: hidden;
	}
	.wrapper {
		width: 90%;
		margin: 0 auto;
	}
	
	.wrapper .btn-more {
		margin: 0 auto;
		width: 100px;
		display: inline-block;
		text-align: center;
	}
	
	#header-back {
		height: 400px;
	}
	.home #header-back {
		margin-bottom: 0px;
	}
	#header-front {
		height: 400px;
		background-position-y: top;
		background-size: 100%;
	}
	
	.section {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	h3 {
		font-size: 24px;
		line-height: 28px;
	}
	
	h2 {
		margin-top: -5px;
	}
	
	ul {
		margin: 0;
		margin-bottom: 20px;
	}
	
	.alignleft {
		float: none;
		margin-bottom: 20px;
		margin-right: 0px;
	}
	
	#loginform input[type="text"],
	#loginform input[type="password"],
	#buddypress .standard-form #basic-details-section,
	#buddypress .standard-form #blog-details-section,
	#buddypress .standard-form #profile-details-section,
	.section .video,
	.section .image,
	.section .text,
	.section .left,
	.map-sidebar {
		width: 100%;
	}

	.map-sidebar {
		padding-left: 0;
		border-left: 0;
	}	
	
	.map-link a,
	.map-contact a {
		width: 90%;
	}
	
	.section.circle {
		height: auto;
	}
	.circle-headline {
		width: 250px;
		height: 250px;
		margin: 0 auto;
		position: relative;
		left: 0px;
	}
	.circle-headline a {
		width: 250px;
		height: 250px;
		padding-top: 50px;		
	}	
	.circle-text {
		position: relative;
		width: 100%;
		height: auto;
		background: none;
		color: #fff;
		padding: 0px;
		right: 0px;
	}
	.logos li {
		margin-right: 0px;
		margin: 0 auto;
		float: none;
		text-align: center;
	}
	.logos img {
		display: inline;
	}
	
	ul.events {
		width: 100%;
		margin: 0 auto;
	}
	.events .icon {
		height: 130px;
		width: 100%;
	}
	.wrapper-events-graphic .events-full li,	
	.events li {
		width: 100%;
		float: none;
		margin-bottom: 10px;		
	}
	.wrapper-events-graphic .events-full li > a,
	.events li > a {
		width: 100%;
	}
	
	.bx-wrapper .image-left {
		width: 100%;
		float: none;
		height: auto;
	}
	.bx-wrapper .text-right {
		width: 100%;
		float: none;
	}
	.bx-wrapper .text-right h3 {
		font-size: 22px;
		line-height: 26px;
	}
	
	.site-main .section h3:first-child {
		margin-top: 20px;
	}
	
	.bx-wrapper .bx-next {
		right: -10px;
	}
	.bx-wrapper .bx-prev {
		left: -10px;
	}
	.bx-wrapper .bx-controls-direction a {
		font-size: 20px;
		line-height: 20px;
		padding: 0;
		display: none;
	}
	
	.event-text {
		line-height: 26px;
		padding-top: 10px;
		height: auto;
	}
	
	.site-branding,
	.community-navigation,
	.main-navigation {
		float: none;
	}
	.main-navigation {
		position: absolute;
		right: 0px;
		top: 10px;
		width: 80%;
	}	
	.main-navigation li {
		float: none;
		padding: 5px 10px;
	}
	.main-navigation a {
		padding-top: 2px;
		padding-bottom: 2px;
	}
	.main-navigation ul ul a {
		padding-top: 4px;
		padding-bottom: 4px;
		
	}
	.main-navigation ul {
		width: 100%;
	}
	
	.site-header .logo {
		width: 200px;
		height: auto;
	}
	
	.home-page .site-header {
		top: 400px;
	}
	
	.home .site-header	{
		top: 0px;
		position: fixed;
	}
	
	.home-page #header-back {
		margin-bottom: 60px;
	}
	
	#header-front {
		background-image: url('../img/map_keyvisual_mobil_rgb_vg.png');
	}
	
	.community-navigation {
		display: none;
	}
	
	.menu-toggle {

		overflow: hidden;
		width: 40px;
		height: 40px;
		float: right;
	}
	

	
	.menu-toggle:after {
		font: normal normal normal 14px/1 FontAwesome;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		content: '\f0c9'; 
		visibility: visible;
		display: block;
		position: absolute;
		padding: 5px;
		background-color: #fd6925;
		color: #fff;
		top: 0px;
		right: 0px;
		width: 40px;
		height: 40px;
		padding: 9px;
		font-size: 26px;
	}	
	
	.main-navigation.toggled > div > ul {
		top: 50px;
		background: #ddd;
		position: absolute;
		
		height: 300px;
		overflow-y: scroll;
	}
	
	.map-profile-breadcrumb.fixed {
		top: 60px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	
	
	.main-navigation ul ul {
		position: static;
		padding-top: 0px;
		width: 100%;
		top: 0px;
		height: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		left: 0px;
		float: none;
	}
	
	.main-navigation ul ul li {
		padding: 0;
	}
	
	.main-navigation ul ul li a {
		width: 100%;
	}
	
	.main-navigation > div > ul > .menu-item {
		margin-right: 0;
	}
	.section-map-overview .image-left,
	.section-map-overview .text-right {
		float: none;
		width: 100%;
	}
	
	.image-overlay {
		margin-bottom: 10px;
	}
	
	.events-full .event-text {
		height: 220px;
	}
	
	.events-full .event-text p {
		display: none;
	}
	
	.blog-entry-text {
		display: none;
	}
	
	.sidebar-blog {
		width: 100%;
	}
	
	.graphic-preview {
		width: 100%;
		padding: 5%;
	}
	
	.graphic-wrapper {
		height: auto;
	}
	
	.graphic-left,
	.graphic-right {
		width: 100%;
		float: none;
	}
	
	.graphic-left {
		height: auto;
		min-height: 500px;
		padding-bottom: 80px;
	}
	
	.graphic-right {
		padding: 0;
	}
	
	.phase-full {
		width: 100%;
		height: auto;
		padding: 10px;
		position: relative;
		display: none;
		padding-top: 30px;
	}
	.phase-full.active {
		display: block;
	}
	.btn-more.link-phase-close {
		margin-bottom: 10px;
	}
	.phases li {
		border: none;
	}
	.bx-wrapper .bx-pager {
		bottom: 0px;
	}
	.phases li a {
		text-align: center;
		width: 100%;
		padding: 0px;
		padding-top: 10px;
		background-position: center 80px;
	    background-size: 25%;
	}
	
	.graphic-wrapper .circle,
	.graphic-wrapper .circle li {
		width: 260px;
		height: 260px;
	}
	
	.graphic-wrapper .circle {
		/*
		margin-left: -130px;
		top: 120px;
		*/
		position: relative;
		margin: 0 auto;
		left: 0px;
		margin-top: 120px;
		margin-bottom: 40px;
		top: 0px;
	}	
	
	.graphic-wrapper .circle li .success-icon,
	.phase-full .success-icon,
	.graphic-wrapper .circle li .success-icon a {
		width: 80px;
		height: 80px;
	}
	
	.graphic-wrapper .circle li:nth-child(1) .success-icon {
		top: 30px;
		left: -20px;
	}
	.graphic-wrapper .circle li:nth-child(2) .success-icon {
	    top: -40px;
	    left: 93px;
	}	
	.graphic-wrapper .circle li:nth-child(3) .success-icon {
	    top: 30px;
	    right: -20px;
	}
	.graphic-wrapper .circle li:nth-child(4) .success-icon {
	    bottom: 10px;
	    right: -10px;
	}
	.graphic-wrapper .circle li:nth-child(5) .success-icon {
	    bottom: -40px;
	    left: 93px;
	}
	.graphic-wrapper .circle li:nth-child(6) .success-icon {
	    bottom: 30px;
	    left: -20px;
	}
	
	.graphic-left .explanation {
		width: 100%;
		left: 20px;
	}
	.graphic-left .explanation .explanation-text {
		float: left;
	}
	
	.phase-full h3 {
		font-size: 18px;
		line-height: 22px;
	}
	
	.success-name {
		display: none;
	}
	
	.arrows {
		display: none;
	}
	.success-full .accordion,
	.success-full .ui-accordion-content,
	.phase-full .accordion-empty {
	    height: auto;
	}
	
	.phase-success li {
		margin-bottom: 13px;
	}
	.phases {
		margin: 0;
	}
	.phase:after {
		display: none;
	}
	
	.phases li a {
		background-color: #19486a;
		color: #fff;
		height: 200px;
	}
	
	.phases li.phase1 a {
		background-image: url('../img/icons/phases/Phasenicons-02.svg');
	}
	.phases li.phase2 a {
		background-image: url('../img/icons/phases/Phasenicons-04.svg');
	}
	.phases li.phase3 a {
		background-image: url('../img/icons/phases/Phasenicons-06.svg');
	}
	.phases li.phase4 a {
		background-image: url('../img/icons/phases/Phasenicons-08.svg');
	}
	
	.wrapper .btn-more-phases {
		width: 100%;
	}
	
	.event-text strong {
		font-size: 14px;
		line-height: 18px;
	}

	.wrapper-events-graphic {
		margin-top: 60px;
	}
	
	.events-full.blog-aktuelles li > a {
		width: 100%;
		margin-bottom: 20px;	
	}
	
	.events .icon.icon-image,
	.events-full.blog-aktuelles .icon.icon-image {
		width: 100%;
		height: 200px;
	}
		
	.events .icon a img {
	    max-width: 100%;
	}	
}

@media (min-width: 620px) and (max-width: 959px) {
	.phases li a {
		background-color: #19486a;
		color: #fff;
		height: 350px;

	}
}