@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)  {
/* GLOBALS */	
	.hidetablet {display:none}
	.socialicons {display:none}
/* STORY / NEWS */	
	.storyteaser {
		width: 45% !important;
		overflow:hidden;
		margin-bottom: 10px;
		position: relative;
		min-height: 0px !important;
		height: 160px;
	}
	
	a.story-title {
    position: absolute;
    bottom: 0px;
    padding: 10px 15px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.4);
	}
	
	.story-intro {display: none;}
	.storyhero, .hero {
		width: 100% !important;
		height: auto;
		min-height: 380px; 
		margin: 0 !important;
	}
	.shade {padding: 7% 0 5px 0 !important ;}
	#ajaxSearch_form {display:none}
	
/* LOGO*/
	#logo 		{float:none !important;text-align: center !important; max-width: none  !important; width: auto !important; display: block;}
	#logo img 	{width: auto !important; }
	
	nav {display:block; max-width: none !important; float: none  !important;}
	nav ul {display:flex; align-items: center; justify-content: center;}
	nav li {float none  !important;}
	
/* LOGO*/	
	.event_info {
		display: flex;
		width: 100% !important;
		height: auto !important;
		padding: 0;
	}
	.event_info > div {width: 33.3%;}
	.event_meta {padding:  0 10px !important;border-bottom:0 !important; ; margin-bottom: 0 !important}
	.event_meta h2 {font-weight: bold; margin: 0 !important;}
	.partner-list {
    	display: flex;
   	 flex-wrap: wrap;
   	 flex-direction: row;
   	 justify-content: center;
   	 text-align: center;
	}
	a.partner-item {
   		padding: 14px;
		width: 33%;
		height: 120px;
		margin: 0;
	}
	.textcontent {width: 90% !important;}
	.general-partner.logo { width: 24%; margin: 20px;}
	
} 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.ipad_grid_6 {width: 48% !important;	}
	.ipad_btn 	{width:100%; display: block;	margin: 20px 0;}

}
/* END OF MOBILE FIX */

/* apply a natural box layout model to all elements - thanks @paulirish*/
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

ul  {list-style:none; margin:0; padding:0}

ol {list-style:normal}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {font-size:1em; font-family: 'Lato', sans-serif; color:#262626}

a:link, a:visited {color:#ea314b; text-decoration:none}
a:hover, a:active {color:#536091; text-decoration:none}

h1, h2, h3 {font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; text-align:center}

h1 {font-size:2.8em; letter-spacing:1px}
h2 {font-size:1em; letter-spacing:1px}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited {color:#262626}

.mobile {display:none}

header nav {float:right; margin:5px 0; max-width:66.6%; clear:right}
header .socialicons {float:right; font-size:0.7em; margin-top:10px; font-family: 'Lato', sans-serif;}
header .socialicons img {width:24px; margin-right:4px}
nav li {float:left;}
nav li a:link, nav li a:visited {display:block; text-align:center; padding:6px 12px; font-family: 'Lato', sans-serif; text-transform:uppercase; color:#536091; border-radius:2px; font-size:0.8em}
nav li a:hover {background-color:#536091; color:#fff; text-decoration:none}
.hero {height:380px;}
.hero, .storyhero {color:#fff; background-size:cover;}
.storyhero {min-height: 380px; height: 1px;}
.hero .shade, .storyhero .shade, .stories-big .shade, .stories .shade {height:100%; width:100%; background-color:rgba(0, 0, 0, 0.2); padding:11% 0 0 0}
.hero h1, .hero h2 {max-width:70%; margin:0 auto; text-shadow: 0px 0px 30px rgba(0, 0, 0, 1)}
.storyhero h1, .storyhero h2 {text-align:left; padding: 0 5%; text-shadow: 0px 0px 30px rgba(0, 0, 0, 1)}

.section {padding:30px 0}

.lightboxcontent {display:none} 

ul.bullets {margin-left:20px}
ul.bullets li {list-style:disc inside; margin-bottom:4px }

.smalltext {font-size:0.7em; letter-spacing:1px}

.blue {background-color:#4a578a; color:#fff}
.grey {background-color:#f7f7f7; color:#000}
.lightgrey {background-color:#fdfdfd; color:#000}

.fade {width: 100%;
	z-index: 99;
	position: absolute;
	bottom: 0px;}

.fade img {width:100%; height:fixed}

.blue a:link, .blue a:visited {color:#aab4de}
.blue a:hover, .blue a:active {color:#ea314b}

.btn, a.btn:link, a.btn:visited {background-color:transparent; border:2px solid #222; border-radius:1px; text-transform:uppercase; font-size:0.8em; letter-spacing:1px; padding:11px 13px; color:#222; display:inline-block; font-family: 'Lato', sans-serif;}

.btn.white, a.btn.white:link, a.btn.white:visited {border:2px solid #fff; color:#fff}
a.btn.white:hover, a.btn.white:active {background-color:#fff; color:#222}
.btn:hover, a.btn:hover, .btn.active, a.btn.active {background-color:#222; color:#fff; text-decoration:none}

.searchform {width:100%; background-color:rgba(255, 255, 255, 0.6); padding:40px; text-align:center; display:block; position:relative; top:80%; min-height:20%}
.addressprompt {font-size:1.5em; text-align:center}
.searchform input[type="text"]  {padding:5px 15px; font-size:1.2em; width:60%; margin-bottom:15px}
.searchform-home {margin-top:3%}
.searchform-home input[type="text"] {padding:5px 15px; font-size:1.2em; width:60%}

#ajaxSearch_form {padding:5px 0 2px 0; font-size:0.9em}
#ajaxSearch_form input[type="text"] {padding:5px 8px}
#ajaxSearch_form .btn  {background-color:transparent; border:2px solid #222; border-radius:1px; text-transform:uppercase; font-size:0.8em; letter-spacing:1px; padding:7px 10px; color:#222; display:inline-block; font-family: 'Lato', sans-serif;}

.halfhalf {background-size: 100% auto; background-repeat:repeat-y; color:#fff}

#logo {width:330px; max-width:33.3%; margin:20px 5% 20px 0; float:left; text-align:center}
#logo img {width:100%}


/* EVENT SCREEN */

.event_meta:nth-last-child(1) { border-bottom: none; margin-bottom: 0;}
.event_meta { padding: 0 0 15px;  border-bottom: 1px solid white; margin-bottom: 20px;}
.event_meta h2 {margin: 5px 0 8px 0 !important; font-weight: bold;}
.event_info {padding:20px; margin:0; height:380px; text-align:center}
.eventhero {margin: 0; height:380px}

/* PARTNER LISTE */
.partner-list {
    	display: flex;
   	 flex-wrap: wrap;
   	 flex-direction: row;
   	 justify-content: center;
   	 text-align: center;
}
.partner-item {
	width: 160px;
	height:80px;
	margin: 30px;
}

.intro {font-size:1.3em; color:#aaa; text-align:center; width:75%; margin:30px auto; line-height:1.5em}
.textcontent {width:60%; margin:30px auto; line-height:1.6em} 

.halfhalf  {width:50%; position:absolute; top:0; height:100% }

.slide {height:500px; width:100%; color:#fff; padding-top:5%}
.slide h1, .slide h2, .slide h3, .slide p {text-align:left;}
.slide h1, .slide h2 {text-shadow: 0px 0px 30px rgba(0, 0, 0, 1)}
.slide a {display:block; position:absolute; width:100%; height:100%; top:0; color:#fff}
.slide h1.white {background-color:#fff; color:#222; padding:2px 5px; box-shadow: -10px 0 0 0px white, 10px 0 0 0px white; display:inline}
.imageslide {background-size:cover; background-position:center}
.imageslide .shade {background-color:rgba(0, 0, 0, 0.7); padding:20px; position:absolute; right:0; bottom:0; width:40%}
.cycle-pager {position:absolute; bottom:0; height:60px; text-align:center; width:100%; color:#fff; font-size:3em; z-index:110}
.cycle-pager span {display:inline-block; cursor:pointer}
.cycle-pager span:hover, .cycle-pager span.cycle-pager-active {color:#ea314b}

#instafeed a {width:25%; display:inline-block; padding:1px}
#instafeed img {width:100%; border-radius:2px}

#maphero {height:600px; width:100%; position:absolute;}
.mapoverlay {height:600px; width:50%; margin:0 auto}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.general-# {width:15%; padding:2%;}
.logowrap {
   display: table;
   width: 100%;
}
.logo {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.logo a {text-align:center;}
.logo img {width:100%;}

footer {background-color:#4a578a; color:#fff; padding:30px; font-size:0.7em; font-family: 'Lato', sans-serif;}

footer li {float:left; margin:0 10px; text-align:center}
footer li ul li {float:none}

footer a:link, footer a:visited {color:#aab4de}
footer a:hover, footer a:active {color:#fff;}
footer img {height:18px; margin-right:20px}

hr.short {width:30%; margin:30px auto}
hr {clear:both; margin:10px 0; padding:10px 0}


ul.triangle {
    margin: 0.75em 0;
    padding: 0 1em;
}

ul.triangle li:before { 
    content: "";
    border-color: transparent #fff;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -0.9em;
    top: 0.9em;
    position: relative;
}

ul.triangle li:hover:before {color:#000}

#ditto_pages {text-align:center; font-size: 0.7em; padding:5px 0 10px 0; clear:both}

.ditto_page {
    padding: 12px; 

}
#ditto_pages .ditto_currentpage {

    padding: 1px 5px 2px; 
    margin-right: 1px;
    background-color: #ea314b; 
    color: #fff;
} 
#ditto_pages .ditto_off {

    padding: 1px 5px 2px; 
    margin-right: 1px;
    color: #f7f7f7;
}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {

    padding: 1px 5px 2px; 
    margin-right: 1px; 
    text-decoration: none !important; 
    color: #7f7f7f;
} 
#ditto_pages a:hover {

    color: #888;
}

.resource-teaser {text-align:center; padding:10px; height:280px; margin-bottom:30px; overflow:hidden; border:1px solid #eee;}
.resource-image {background-size:cover; width:100%; height:200px}
.resource-teaser h3 {white-space:no-wrap; text-transform:uppercase; font-size:0.9em; margin:15px 0 0 0}
.resource-teaser:hover {border:1px solid #aaa; padding:9px}

.stories-big {width:100%; background-size:cover; height:450px; border-bottom:1px solid #fff; color:#fff; background-position:center}
.stories-big h1, .stories-big h2, .stories h1, .stories h2 {text-align:left; color:#fff}
.stories p, .stories-big p {max-width:75%}
.stories {width:50%; display:inline-block; float:left; border-right:1px solid #fff;
border-bottom:1px solid #fff; height:390px; background-size:cover}
.stories h1 {font-size:1.9em}
.stroies:nth-child(2n) {border-right:none}

.stories-big:hover .shade, .stories:hover .shade {background-color:rgba(0, 0, 0, 0.15)}

.teaser {display:inline-block; height:360px; width:250px;}
.storyteaser p {font-size:0.9em; line-height:1.5em}
.storyteaser a {color:#888;}
.storyteaser {min-height: 320px;}
.storyteaser .storypic {background-size:cover; width:100%; height:160px; margin-bottom:4px; background-position:center}

.story-click {height:100%; width:100%; display:block; position:absolute;}
.story-intro span {color: #888;}
.storypic {width:100%}

/* SOCIAL FEEDS ON HOMEPAGE */

.facebookpost-front {font-size:0.8em; border-bottom:1px solid #eee; margin:0 0 20px 0; padding-bottom:20px}
.facebookpost-front img {display:block; max-height: 80px; margin:2px auto}
/*.facebookpost-front img {display:none;}*/
.facebookpost-front .date {font-size:0.8em; font-family: 'Lato', sans-serif}

.fronttweet {font-size:0.8em; margin-bottom:20px; border-bottom:1px solid #eee; padding-bottom:20px}
.fronttweet .screen_name, .fronttweet .tweetdate {font-size:0.7em; font-family: 'Lato', sans-serif; text-transform:uppercase; display:inline-block; margin:7px 10px 0 0}
a.tweetext:link, a.tweetext:visited {text-decoration:none; color:#262626}

.homeicon {height:45px;}

/*Partner Teasers*/


.foundingteaser h2 {text-align:center; height:200px;}
.foundingteaser img {width:100%; margin:0 auto 10px auto; display:block;}
.main-founding-teaser {height:200px; margin-bottom:30px; text-align:left; border:1px solid #ddd; padding:30px; overflow:hidden; font-size:0.9em; line-height:1.5em}
.main-founding-teaser img {display:block; margin:0 auto 20px auto; width:auto; max-height:100px; max-width:90% }


/*Globals Teasers*/

.globalsteaser {font-size:0.8em; height:250px; padding-top:5%}
.globalsteaser h2 {font-size:1em; text-align:left}
.globalsteaser img {width:100px; width:30%; float:left; margin-right:15px}


/* EVENT TEASERS */

.eventlistwrap {margin-top:20px}
.eventteaser {width:80%; margin:10px auto; text-align:left; font-size:0.9em; border:1px solid #fdfdfd; padding:12px}
.eventteaser h3 {text-align:left}

/*Make selected form fields looks a bit nicer*/
input:focus, textarea:focus {outline:1px solid #777}

/*CONTACT FORMS*/

.form input[type="text"], .form textarea, .form select  {width:100%; padding:8px 16px; display:block; margin:20px 0}
.form#storyform input[type="text"], .form#storyform textarea {max-width:800px;}

.form#storyform textarea {height:200px}

.errors span {display:block}
.errors {background-color:#ea314b; color:#fff; font-size:0.8em; padding:10px}


.resource-teaser img {max-width:100%}


/*TABS*/

.tab-content{
			display: none;
		}

		.tab-content.current{
			display: inherit;
		}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*Fluid Video */
.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

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

/* ====================
    MOBILES
   ==================== */
   
 .container .grid_12,
 .container .grid_11, 
 .container .grid_10,  
 .container .grid_9,  
 .container .grid_8,  
 .container .grid_7, 
 .container .grid_4,  
 .container .grid_5,  
 .container .grid_6 {width: 98%; margin-left:1%; margin-right:1%;}
 .container .grid_3, 
 .container .grid_2  {width: 48%;}
	
	
	.deprecate, .socialicons {display:none}
	
	#logo {float:none; width:100%; max-width:80%}
	
	h1 {font-size:2em; letter-spacing:1px}
h2 {font-size:0.9em; letter-spacing:1px}
	
	.stories p, .stories-big p {max-width:100%}
	#maphero {height:300px;}
	.mapoverlay {height:300px;}
	
	.mobile {display:block}
.menulink {position: absolute; top: 0; right: 0; padding: 10px 20px 20px 10px;}
	
	header nav {height:0px; overflow:hidden; max-width:100%; width:100%; background-color: #fff; z-index:999;}
	
	nav ul {width: auto; vertical-align: top; background-color: #fff; z-index:999;}
	
    nav a {
    	display: inline-block;
        padding: 8px 10px 6px 10px;
        margin-top: 2px;
        font-size:90%;
        
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }
    
    nav li {
    	vertical-align: top;
        border-top: none;
        border-bottom: none;
        margin: 0;
		padding:10px 0;
		border-top:1px solid #eee;
        display: inline-block;
		width:100%
    }
	
		iframe {
		width: 455px !important;
		height: 250px !important;
	}
 
}

@media only screen and (min-width: 569px) and (max-width: 1023px) {

/* ====================
    TABLETS
   ==================== */
	
#logo {float:none; max-width:60%; width:60%; margin:10px auto; display:block}
	
	.stories {width:100%; float:none}
	header nav {max-width:100%; width:100%; float:none}
			iframe {
		width: 455px !important;
		height: 250px !important;
	}
	
	

}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/*********JVFLOAT.CSS*******/
/*
 * Default jvFloat theme.
 * modify it as you wish!
 */

.jvFloat {
	position: relative;
	display: inline;
	margin-top: 1em;
}

.jvFloat .placeHolder.required {
	color: red;
}

/* Start CSS3 Animations on supported browser */
.jvFloat .placeHolder {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	color: #4a578a;
	font-size: 0.7em;
	font-family: 'Lato', sans-serif; 
	font-weight:400; 
	text-transform:uppercase;
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform 150ms, opacity 100ms, visibility 100ms;
	transition: transform 150ms, opacity 100ms, visibility 100ms;
	opacity: 0;
	visibility: hidden;
}

/*Allows textarea floating placeholder to be positioned distinctly from the normal .placeHolder class
 * This is required when working with Multiline text areas
 */
.jvFloat .placeHolder.textarea {
	/*top: 0px;*/
}

.jvFloat .placeHolder.active {
	display: block;
	visibility: visible;
	-webkit-transform: translate(0, -1.5em);
	-moz-transform: translate(0, -1.5em);
	-o-transform: translate(0, -1.5em);
	-ms-transform: translate(0, -1.5em);
	transform: translate(0, -1.5em);
	-webkit-transition: -webkit-transform 100ms, opacity 120ms, visibility 120ms;
	transition: transform 100ms, opacity 120ms, visibility 120ms;
	opacity: 1;
}
/* End CSS3 */

/* Legacy browser */
/*.jvFloat .placeHolder {
	position: absolute;
	top: -1em;
	left: 0;
	color: #0c61fc;
	font-size: .85em;
	font-weight: bold;
	opacity: 0;
	visibility: hidden;
}
.jvFloat .placeHolder.active {
	display: block;
	visibility: visible;
	opacity: 1;
}*/
/* End Legacy */