/************************************************************/
/* Description: {Description of responsive}
/* Project: DRK Landingpage Weihnachtsaktion
/* Author: Sven Bathke <sven.bathke@e-pixler.de>
/* Date: 2015-10-26
/************************************************************/

/* --------------------------------
 * ----- Responsive Anpassungen --- */

.values.mobile,
.values.mobile2 {
	display: none;
}
#main .teaser.responsive {
		display:none;
	}
@media only screen and (max-width:1140px) {	
	#main #donaterange .box {
		width:85%;
	}
	#main .grey .images {
		width: 65%;
		text-align: center;
	}

	#main .grey .images img {
		width: 250px;
		margin: 0.2rem;
	}

	#main .grey .images img:first-child {
		margin-left: 0;
	}
	#footer {
		width:90%;
	}
	#footer .logo-footer {
		width:auto;
		padding-right:1rem;
	}
	#footer .social-links {
		display:inline-block;
		text-align:left;
	}
	#footer .meta {
		margin-left: 185px;
	}
}

@media only screen and (max-width:950px) {	
	.wrapper {
		width:95%;
	}
	#main .row {
		width:80%;
	}
	#main .row-3 .col {
		width: 50%;
	}
	#main .row-3 .col:nth-child(3) {
		width: 100%;
	}
	#main .row-2 {
		width:100%;
		max-width:100%;
	}
	#main .col .content {
		width: 40%;
	}
	#main #donaterange .box {
		width:80%;
	}
	#footer {
		padding-left:0;
		padding-right:0;
	}
}
@media only screen and (max-width:930px) {
	#footer .social-links {
		float:left;
		width:auto;
	}
}
@media only screen and (max-width:875px) {
	#footer .meta {
		margin-left: 0px;
	}
}

@media only screen and (max-width:820px) {	

	#header .metanavigation span:nth-child(1),
	#header .metanavigation span:nth-child(2) {
		display: none;
	}
	#header {
		height: 100px;
	}
	#main .teaser.desktop {
		background:none;
		height:auto;
	}
	#main .teaser.responsive {
		background:none;
		display:block;
	}
	#main .teaser .wrapper {
		top:0;
		left:0;
		width:100%;
	}
	#main .teaser .wrapper h1 {
		left:0;
		text-align:center;
		background-color:#f2f2f2;
		margin-bottom:0;
		padding:1rem 0;
	}
	.obdachlose #main .teaser .wrapper h1,
	.fluechtline #main .teaser .wrapper h1,
	.kinder #main .teaser .wrapper h1{
		text-shadow:none;
	}
	.obdachlose #main .teaser h1 span {
		text-shadow:none;
	}
/*	#main #donaterange .values {
		width:92%;
		padding-left:1.9rem;
	}*/
	#main #donaterange .values {
		width: 74%;
	}
	#main #donaterange .values div {
		display:inline-block;
		width:auto;
		float:left;
		width:16%;
		font-weight:600;
		font-size:16px;
		text-align:left;
	}
	#main #donaterange .mobile.values div:first-child {
		width:20%;
	}
	#main #donaterange .mobile.values div:nth-child(3),
	#main #donaterange .mobile.values div:nth-child(4) {
		margin-right:2%;
	}
	#main #donaterange .mobile.values div:last-child {
		width:10%;
		margin-left:2%;
	}
	#main #donaterange .mobile2.values div:first-child {
		width:16%;
		margin-left:-8%;
		padding-right:8%;
	}
	#main .teaser img {
		margin-top:5.5rem;
	}

	#main .grey .images {
		width: 75%;
	}

	.values.mobile,
	.values.mobile2 {
		display: block;
	}

	.values.desktop {
		display: none;
	}


}

@media only screen and (max-width:640px) {	
	#header {
		display: block;
		position: relative;
		background-color: #f2f2f2;
		height:160px;
	}

	#header.wrapper {
		width: 100%;
	}

	#header .logo {
		display: block;
		width: 100%;
		height:auto;
		padding-top: 2rem;
		margin: 0 0 0 0;
		float: left;
		overflow: hidden;
		margin-right: auto;
	}
	#header .logo a {
		display:inline-block;
		background-color: white;
		width: 100%;
		padding:1.5rem 0 1.5rem 2rem;
	}

	#header .metanavigation {
		display:block;
		position:absolute;
		width:100%;
		top: 0.5rem;
		left:0;
		margin-top:0;
		text-align: center;
		float:none;
	}
	#header .metanavigation a {
		padding:0 0.5rem;
	}
	#main .teaser {
		overflow:hidden;
	}
	#main .noUi-horizontal .noUi-handle:before {
		margin-top:-1.6rem;
	}
	#main .row {
		width: 100%;
	}
	
	#main #donaterange {
		margin-top: 0;
	}
	#main #donaterange strong {
		padding-top:1em;
	}
	#main #donaterange #text {
		display:none;
	}
	#main #donaterange .box {
		width: 100%
	}

	

	#main .row-2 {
		width: 100%;
	}

	#main .row-3 .col,
	#main .row-2 .col{
		width: 100%;
	}

	#main .grey .row p {
		width: 90%;
	}

	#main .grey .images {
		display: block;
		padding-bottom: 4rem;
		margin: 0 auto;
		position: relative;
		text-align: center;
	}


	#main .grey .images img {
		width: 250px;
		margin: 1.2rem 0;
	}

	main .grey .images img:first-child {
		margin-left: 0!important;

	}
	.images-overview #main .row .content {
		display:block;
		margin-left:2rem;
	}
	.images-overview #main .row .content figure {
		float:none;
		dispaly:block;
	}
	#footer {
		padding:0;
	}
	#footer .logo-footer {
		padding:1.4rem 0 1.4rem 0;
	}
	#footer .social-links {
		padding-top:1rem;
	}
	#footer .social-links a {
		font-size:250%;
		margin-right:1.5rem;
		line-height:150%;
	}
}
@media only screen and (max-width:520px) {
	#header .logo {
		padding-top: 3.3rem;
	}
}
@media only screen and (max-width:470px) {

	.wrapper {
		width: 90%;
	}
	#header {
		height: 160px;
	}
	
	#main .teaser .wrapper h1 {
		margin-top:-1rem;
	}
	#main .row h2 {
		font-size: 110%;
	}
	#main .teaser .wrapper h1 {
		left:0;
		text-align:center;
		background-color:#f2f2f2;
		margin-bottom:0;
		font-size:200%;
		padding:1rem 0;
	}
	#main .teaser .wrapper h1 span {
		font-size:60%;
	}


	#main .prev, 
	#main .next {
		top: 8.65rem;
	}
	#main .teaser img {
		margin-top:9rem;
	}
	#main .teaser .wrapper2 {
		top:6rem;
	}
	#main #donaterange #range {
		width: 100%;
		padding: 0 2rem;
	}

	#main #donaterange .values {
		width:92%;
/*		text-align: left;
		margin-left: -1rem;
		padding-left:1.2rem;*/
	}
	#main #donaterange .values div {
		width:15%;
	}
	#main #donaterange .values div:last-child {
		width:16%;
	}
	#main #donaterange #donate_input {
		height: 30px;
		margin-top: 1.5rem;
	}
	#main #donaterange #error_text {
		width:70%;
		margin:0 auto;
		margin-top: 1.5rem;
	}
	
	#main .teaser .wrapper2 #help-link {
		white-space: nowrap;
	}
	#main .grey .row p {
		width: 95%;
	}
}