/* ditto styling */

.pagination_wrapper {
	clear: both;
	padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.ditto_currentpage { 
	color: #79bcbe;
	padding-left: .4em;
    padding-right: .4em;}

.ditto_page {
	padding:0.5em;
}


.ditto_previous_link, 
.ditto_next_link,
.ditto_currentpage
.ditto_page {
    padding: 4px 8px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;

}

.ditto_previous_link:link, .ditto_previous_link:visited { text-decoration: none; }
.ditto_next_link:link, .ditto_next_link:visited { text-decoration: none; }
.ditto_currentpage:link, .ditto_currentpage:visited { text-decoration: none; }
.ditto_page:link, .ditto_page:visited { text-decoration: none; }

.ditto_previous_link:hover {color: #79bcbe;}
.ditto_next_link:hover {color: #79bcbe;}
.ditto_currentpage:hover {color: #79bcbe;}
.ditto_page:hover {color: #79bcbe;}


/* celine fix for the background color */


.posts:nth-of-type(4n+1) {
  background-color: #219AA7;
}

.posts:nth-of-type(4n+2) {
  background-color: #3fa4b1;
}

.posts:nth-of-type(4n+3) {
  background-color: #E8E7E7;
}

.posts:nth-of-type(4n+4) {
  background-color: white;
}

.grid_item p { text-align : left; }

/* end celine fix */

body {font-family: 'Open Sans', sans-serif; font-size:16px; line-height:28px; color:#003a47}

p {margin-bottom:20px;}

.herolanding {font-family: 'Sue Ellen Francisco', cursive; font-size:60px; text-align:center; font-weight:400; text-shadow: 0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1);}

h1 {font-family: 'Open Sans', sans-serif; font-size:50px; color:#fff; font-weight:600}
h2 {font-family: 'Open Sans', sans-serif;  font-size:40px; color:#fff; font-weight:500}
h3 {font-family: 'Open Sans', sans-serif;  font-size:26px; color:#003a47; font-weight:400}
h4 {font-family: 'Open Sans', sans-serif;  font-size:26px; color:#fff; font-weight:400;}

h1, h2, h3, h4, h5 {margin-top:0px; line-height:normal; text-align:center;}

/* added by celine : making the Youtube video player responsive */
  .hero.yellow { height: 85%; }  
 iframe { margin-top: 45px; } 


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  	margin-bottom: -17%; 
	text-align: center;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0; right: 0; 
	width: 60%;
	height: 60%;
	display: block;
   	margin-left: auto;
    margin-right: auto;
}





.hero {text-align:center}
.hero h1 {font-family: 'Open Sans', sans-serif; font-size:30px; text-align:center; font-weight:300; background: rgba(236,187,34,0.8); padding: 15px; display:inline-block; margin-top:15%; color:#003a47}

.hero .landing h1 {font-family: 'Sue Ellen Francisco', cursive; font-size:60px; text-align:center; font-weight:400; text-shadow: 0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1),  0px 0px 30px rgba(0, 0, 0, 1); padding-top:12%; background-color:transparent; color:#ffffff;}

.introtext {font-family: 'Open Sans', sans-serif; font-weight:bold; font-size:20px; line-height:32px; color:#003a47; text-align:center;}
.untertext {font-family: 'Open Sans', sans-serif; font-size:14px; line-height:26px; color:#579a9c; text-align:center;}


	img {max-width: 100% ;}

a:link, a:visited {color:#003a47; text-decoration:underline}
a:hover, a:active {color:#003a47; text-decoration:none}

.headwrap {/*display: flex;
justify-content: center; 
align-items: center;*/
	padding:30px 0 10px 0;
}

.logowrap {text-align:center; max-width:60%; float:left; width:300px; display:block}

a.logowrap:link, a.logowrap:visited {text-transform:uppercase; font-family: 'Open Sans', sans-serif; font-size:12px; color:#282828; font-weight:400; text-decoration:none; padding:2px 8px}

#logo {width:100%}


nav {float:right; display:block}
nav ul li {list-style:none; display:inline-block; margin:0; padding:0}

ul.bullets li {
	list-style-position: inside;
}

.image-gallery {margin-right:3px; height:200px; width:200px; margin:0 20px 0 0; background-size:cover; background-position:center}
.image-gallery a {width:100%; height:100%; display:block}

.mfp-counter {display:none}
		
nav ul li a:link, nav ul li a:visited {padding:4px 8px; text-align:center; font-family: 'Open Sans', sans-serif;  font-size:14px; color:#000; font-weight:700; text-transform:uppercase; width:100%; 
	border-bottom:0px solid #F5DA76;
	-webkit-transition: all .1s;
	-o-transition: all .1s;
	transition: all .1s;
 text-decoration:none}
nav ul li a:hover {border-bottom:4px solid #F5DA76; 
	}
nav ul li.active a, nav ul li.active a:hover {border-bottom:4px solid #EDBB22}
.menulink {position: absolute; top: 0; right: 0; padding: 10px 20px 20px 10px;}
.menulink img{width:24px; padding-top:30px}

.teasertext {font-family: 'Open Sans', sans-serif; 18px; color:#000; font-weight:400; line-height:26px}

.content {padding:50px 0}

.grid_item > div {max-width:640px; padding:30px 20px} /*Half the page*/
/*.grid_item > div {float:left; padding-left:4%}
.grid_item:nth-child(odd) > div {float:right; padding-right:4%}*/
.grid_item .right {
	float:right; 
	padding-right:4%}
/* /below fix for centering posts on Aktionen */
.grid_item .center { padding-right: 4%; }

.grid_item .left {float:left; padding-left:4%}
.grid_item h3 {font-size: 1.2em;}

.partnerteaser {background-color:#fff; height:200px; min-width:200px; padding:20px; float:left; margin:0 20px 20px 0; border: 1px solid #ccc;}
.partnerteaser img {max-width:100%; max-height:100%}

.founding-teaser {height:160px; margin-bottom:30px; min-width:160px; border:1px solid #ddd; padding:30px; overflow:hidden}
.founding-teaser img {display:block; margin:0 auto 20px auto; width:auto; max-height:100%; max-width:100% }

.globalsteaser {background-color:#fff; height:200px; min-width:200px; margin-bottom:30px; padding:5px 15px 15px 15px; font-size:14px; overflow:hidden }
.globalsteaser img {width:100%}
.globalsteaser a:link, .globalsteaser a:visited {text-decoration:none; color:#282828; font-weight:400;}
.globalteaserwrap {margin: 0 auto; width: 690px;}

.toolteaserwrap {max-width:880px; margin:0 auto; width:100%}
.toolsteaser {background-color:#fff; height:200px; width:200px; padding:20px; float:left; margin:0 20px 20px 0; overflow:hidden; font-size:0.8em; line-height:1.5em;}

.toolsteaser img {max-width:100%; max-height:100%}
.toolsteaser a:link, .toolsteaser a:visited {text-decoration:none}





/*HOLDING PAGE*/

.container .grid_4.frontcol {width:33%; padding:2% 3%; margin:0; height:550px;}
.container .grid_4.frontcol p {color:#282828;}
.frontcol h2 {font-weight:500; font-size:50px}
#landinglogo {width:300px; display:block; margin:15px auto 5px auto;}
.landing.heropic {height:100%; max-height:100%; background-position:top; position:relative; z-index:-999}

footer {font-family: 'Open Sans', sans-serif; font-size:12px; color:#282828; font-weight:400; text-decoration:none; padding:2px 8px}

#impressum, #datenschutz {padding:20px 0; min-height:425px;}
#impressum b, #datenschutz b {color:#fff; font-size:16px; font-weight:400}
.close {float:right; color:#fff}
.impretrig, .datentrig {margin-right:10px; display:inline-block; cursor:pointer}
#betterplacelogoholding {height:50px; margin:10px 0 0 10px; vertical-align:bottom}
.footerwrap {margin-bottom:3%}
.imagecredit {font-size:10px; color:#fff; position:absolute; right:1%; bottom:1%}
.imagecredit a:link, .imagecredit a:visited {color:#fff}

.close {cursor:pointer}

.xicon {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
		vertical-align:middle
}
.xicon:hover::before, .xicon:hover::after {
  background: #fff;
}
.xicon::before, .xicon::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
}
.xicon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.xicon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.xicon.thick::before, .xicon.thick::after {
  height: 3px;
  margin-top: -4px;
		margin-left:4px
}


/*HERO IMAGES*/
.heropic {
	width:100%; 
	height:475px;
	max-height:60%; 
	background-size:cover;
	background-position:center; 
	background-repeat:no-repeat; 
	display: flex;
	justify-content: center; 
align-items: center;
	position:relative
} 

.heropic.slide {max-height:100%} 


.cycle-pager {position:absolute; bottom:0; height:60px; text-align:center; width:100%; color:#fff; font-size:4em; z-index:110; font-family:sans-serif}
.cycle-pager span {display:inline-block; cursor:pointer}
.cycle-pager span:hover, .cycle-pager span.cycle-pager-active {color:#EDBB22}


.partnerteaserwrap {width: 1100px; margin: 0 auto; max-width:100%}


.btn, a.btn:link, a.btn:visited, input.btn {font-weight:500; color:#fff; background-color:#040404; padding:10px 20px; margin:15px 10px; display:inline-block; -webkit-transition: background .1s;
	-o-transition: background .1s;
	transition: background .1s;
 text-decoration:none; border:none; vertical-align:center;}
.btn:hover, a.btn:hover, input.btn:hover {color:#000; border:2px solid #040404; background:transparent; padding:8px 18px;}

.stripe {height:7px; overflow:hidden}

footer {font-size:0.9em}
footer a:link, footer a:visited {text-decoration:none}
.footernav {text-align:center}
.footernav ul li {display:inline-block}
.footernav ul li a:link, .footernav ul li a:visited  {font-family: 'Corbel', sans-serif; font-size:12px; color:#282828; font-weight:400; text-transform:uppercase;  text-decoration:none; padding:2px 8px}

#betterplacelogo {width:50%; display:inline-block; margin-left:10px; vertical-align:-20%}

/*PARTNER SIGNUP FORM */

#partnerform {width:50%; margin:0 auto; text-align:left; line-height:normal}
#partnerform input[type="text"], #partnerform textarea, input[type="file"], input[type="url"], input[type="email"] {width:100%; margin-bottom:10px; padding:6px; display:block}
#partnerform #plz {width:30%; display:inline-block; margin-right:3%}
#partnerform #stadt {width:65%; display:inline-block; float:right}
#partnerform select, #partnerform select {width:75%; display:block; margin:18px 0}
#partnerform textarea {height:200px}
#partnerform label {display:inline-block; margin-left:5px}
#partnerform .btn {display:inline-block; clear:both; margin-left:0 !important}


/* VALIDATION*/

.errors {background-color:#900; color:#fff; padding:20px; border:#800; font-size:0.9em; margin:10px 0}

/*

#partnerform input.error{
	background: #f8dbdb;
	border-color: #e77776;
}

#partnerform textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}
#partnerform div{
	margin-bottom: 15px;
}
#partnerform div span{
	margin-left: 10px;
	color: #b1b1b1;
	font-size: 11px;
	font-style: italic;
}
#partnerform div span.error{
	color: #e46c6e;
}

#error{
	margin-bottom: 20px;
	border: 1px solid #efefef;
}
#error ul{
	list-style: square;
	padding: 5px;
	font-size: 11px;
}
#error ul li{
	list-style-position: inside;
	line-height: 1.6em;
}
#error ul li strong{
	color: #e46c6d;
}
#error.valid ul li strong{
	color: #93d72e;
}

span.error {font-size:0.9em; float:right; margin: -35px -280px 0 0;
    float: right; color:#dd5555; font-weight:700} */

/*COLOURS*/

.yellow {background-color:#ECBB22}
h1 .yellow {color:#ECBB22; background:transparent}
.darkgreen {background-color:#79bcbe}
.black {background-color:#040404}
.red {background-color:#D90012}
.gold {background-color:#FDC21A}
.lightgrey {background-color:#E8E7E7}
.facebook-blue {background-color:#3b5998}
.facebook-blue.light {background-color:#bfc6db}
.twitter-blue {background-color:#55acee}
.twitter-blue.light {background-color:#cce6fa}
.blue_1 {background-color:#219AA7;}
.blue_2 {background-color:#3fa4b1;}
.blue_3 {background-color:#2DBECF;}
.green_1 {background-color:#36BA49;}
.green_2 {background-color:#57B95D;}
.instagram-beige {background-color:#CBBAA4}

/*.facebook-blue, .twitter-blue {height:300px; display: flex; align-items: center;}*/
.bigicons {
  height: 100px; 
}

.facebook-blue, .twitter-blue {color:#fff; text-align: center; }
.facebook-blue.light, .twitter-blue.light {color:#003a47; padding:30px 0}

.facebook-blue-a, .twitter-blue-a {
	padding: 20px 0;
	display: block;
}

.twitter-blue .bigiconwrap {
  float:left; text-align:center; margin-left:50px
}

.facebook-blue a:link, .facebook-blue a:visited, .facebook-blue a:hover, .facebook-blue a:active {color:#55acee; text-decoration:none}
.twitter-blue a:link, .twitter-blue a:visited, .twitter-blue a:hover, .twitter-blue a:active {color:#3b5998; text-decoration:none}

.smallicon img {
  height: 100%; 
}



.smallicon {
  height: 30px;
	width: 30px;
	padding: 3px 6px 11px 6px;
	display: inline-block; 
	text-align:center;
	
}

.social-mobile {display: none;}
.social { padding: 20px; text-align: center;background-color: white;box-sizing: content-box; min-height: 610px;}

/* SOCIAL FEEDS ON HOMEPAGE */

.facebookpost-front {font-size:0.8em; border-bottom:1px solid #fff; margin:0 0 10px 0; padding-bottom:10px; line-height:1.4em}
.facebookpost-front img {display:block; max-height: 80px; margin:2px auto}
/*.facebookpost-front img {display:none;}*/
.facebookpost-front .date {font-size:0.8em;}

.fronttweet {font-size:0.8em; border-bottom:1px solid #fff; margin:0 0 10px 0; padding-bottom:10px; line-height:1.4em}
.fronttweet .screen_name, .fronttweet .tweetdate {font-size:0.8em; text-transform:uppercase; display:inline-block; margin:7px 10px 0 0}
a.tweetext:link, a.tweetext:visited {text-decoration:none; color:#262626}

/*HELPER CLASSES*/

.center {text-align:center; }
.left {text-align:left; }
small {font-size:0.8em; color:#b0b0b0}
.mobile, .tablet {display:none}

.hv620 {
	height: 620px;
}


@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)  {


/* ====================
    TABLETS
   ==================== */
   
 .container .grid_12,
 .container .grid_11, 
 .container .grid_10,  
 .container .grid_9,  
 .container .grid_8,  
 .container .grid_7,
 .container .grid_5,  
 .container .grid_6 {width: 98%; margin-left:1%; margin-right:1%;}
 .container .grid_3, 
.container .grid_4,   .container .grid_4.frontcol,
 .container .grid_2  {width: 48%;}
	
	
	.globalsteaser {width:200px !important; height:200px !important}
	.globalteaserwrap {margin: 0 auto; width: 100%;}
	
	.deprecate {display:none}
	.tablet {display:block}
	.image-gallery.mobile {width:48%; margin:0 1% 1% 0; display:inline-block; height:120px}
	
		header nav {display:none;}
	header nav.active {display:block; margin:0; padding:0; width:50%; background-color:rgba(255, 255, 255, 0.9); height:400px; z-index:999; top:75px; right:0; position:absolute}
	header nav.active li {width:100%; float:none; border-bottom:1px solid #eee; padding:10px; display:block;}
	
#impressum b, #datenschutz b {color:#fff; font-size:15px; font-weight:400}
.close {float:right; color:#fff}
.impretrig, .datentrig {margin-right:10px; display:inline-block; cursor:pointer}
#betterplacelogoholding {height:40px; margin:10px 0 0 10px; vertical-align:bottom}
.footerwrap {margin-bottom:3%}
.footernav ul {padding:0; text-align:center}
	footer {text-align:center}
	h1 {font-size:40px; margin-top:20px}
}


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

/* ====================
    MOBILES
   ==================== */
	
	h2 {font-size:30px}
   
 .container .grid_12,
 .container .grid_11, 
 .container .grid_10,  
 .container .grid_9,  
 .container .grid_8,  
 .container .grid_7, 
 .container .grid_4,   .container .grid_4.frontcol,
	.grid_item,
 .container .grid_5,  
 .container .grid_6 {width: 98%; margin-left:1%; margin-right:1%;}
 .container .grid_3, 
 .container .grid_2  {width: 48%;}
	
	.grid_item .left, .grid_item .right {float:none !important; text-align:center}
	
	footer {text-align:center}
	#betterplacelogoholding {height:30px; margin:10px auto; display:block}
	.footernav ul {padding:0; text-align:center}
	
	.hero {background-position:center}
	.deprecate {display:none}
	.mobile {display:block}
	
	.image-gallery.mobile {width:48%; margin:0 1% 1% 0; display:inline-block; height:120px}
	
	header nav {display:none;}
	header nav.active {display:block; margin:0; padding:0; width:100%; background-color:rgba(255, 255, 255, 0.9); height:400px; z-index:999; top:75px; left:0; position:absolute}
	header nav.active li {width:100%; float:none; border-bottom:1px solid #eee; padding:10px; display:block;}
	
	.content {padding: 20px 0;}
	.heropic {height:250px}
	.hero h1 {display:none}
	.heropic.tools {background-position: 70%}
	.heropic.uber {background-position: 65%}
	.toolteaserwrap {width:100%}
.toolsteaser {background-color:#fff; height:200px; width:48%; padding:20px; float:left; margin:0 1% 1% 0; overflow:hidden; font-size:0.8em}
	
	.grid_2.globalsteaser {height:300px !important; width:100%; display:inline-block; margin:2% auto}
	.globalteaserwrap {margin: 0 auto; width: 80%;}
	
	.partnerteaserwrap {max-width:100%}
	.partnerteaser {background-color:#fff; height:150px; width:48%; padding:20px; float:left; margin:0 1% 20px 0; border: 1px solid #ccc; min-width:10px}
	
.partnerteaser img {max-width:100%; max-height:100%}
	
	h1 {font-size:30px; margin-top:20px}
	
	.landing.heropic h1 {line-height:normal; padding:20px 5%; font-size:45px; margin-top:0px; padding-top:80px}
	
	.social-desktop {display: none;}
	.social-mobile {display: block;}
	
.hv620 {height: auto !important;}
	
	.videoWrapper {
	 margin-bottom: -10%;
}