/*
 * -- Colors --
 *
 *	dark grey  			-	#CDCECE
 *  middle grey 		-	#D3D3D3
 *	light grey			-	#D5D5D5
 *	super light grey	-	#E5E5E5
 *  green				-	#a0c332
 * 	light green			-	#c3d223
 *  orange				-	#f79033
 *	DELO blue			-	#0066cc
 *  light blue			- 	#6496d2
 */


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: #7f8c8d;
    font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color: #34495e;
}

img {
	margin: 1em 0;
}

.inline {
	border: 0;
	color: #7f8c8d;
	display: inline;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
}

.content-wrapper a, a:visited, a:active {
	color: #7f8c8d;
	text-decoration: none;
	border-bottom: 1px #f79033 dotted;
}
.content-wrapper a:hover {
	color: #f79033;
	border-bottom: 1px #f79033 dotted;
}

.content-wrapper  a[target="_blank"]:after {
	color: #f79033;
	content: "\f08e";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-size: 0.875em;
	display: inline-block;
	text-decoration: inherit;
	margin-left: 7px;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-left {
    text-align: left;
}

.is-center {
    text-align: center;
}

.is-right {
    text-align: right;
}

.is-top {
    vertical-align: top;
}


blockquote {
	font-size: 0.875em;
	margin: -10em 0 1.5em;
	padding: 2.5em;
	position: relative;
	color: #34495e;
	background: rgba(255,255,255, 0.7);
}
blockquote:before {
	color: #f79033;
	content: "\201C";
	font-size: 10em;
	line-height: 0.1em;
	position: absolute;
	left: 20px;
	top: 0.3em;
}
blockquote p:first-of-type {
	display: inline;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #f79033;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
    background: #2d3e50;
}
#header {
	background: #FFFFFF;
	height: 180px;
	z-index: 5;
}
#header-wrapper {
	margin: 1em auto;
	position: relative;
	width: 70%;
}
.nav-wrapper {
	width: 70%;
	margin: 0 auto;
	padding: 0.75em;
	position: relative;
}
#logo {
	height: 100px;
	margin: 1em auto;
	position: absolute;
	top: -1em;
	right: 0;
	padding: 1.8em;
	background: #FFFFFF;
	z-index: 3;
	
	-webkit-box-shadow: 0px 1px 5px 1px rgba(164,165,165,1);
	-moz-box-shadow: 0px 1px 5px 1px rgba(164,165,165,1);
	box-shadow: 0px 1px 5px 1px rgba(164,165,165,1);
}

#logo.logo-small{
	height: 100px;
	transition: height 1s ease-out;
}
#logo.logo-big{
	height: 100px;
	transition: height 1s ease-out;
}

.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
	height: 5em;
	padding: 0 15%;
	background: #FFFFFF;	

}

.pure-menu-horizontal .pure-menu-list {
	display: block;
}

.pure-menu-horizontal .pure-menu-item {
	text-transform: uppercase;
}

 .pure-menu-horizontal .active {
	border-bottom: 2px solid #f79033;
} 

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background: url(https://www.delo-herold-stiftung.de/img/delo/stage_basic.jpg);
	background-position: right center;
	background-repeat: no-repeat; 
	background-size: cover;
	-ms-behavior: url(https://www.delo-herold-stiftung.de/polyfills/backgroundsize.min.htc);
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 88%;
    top: 0;
    left: 0;
    position: fixed !important;
	min-height: 580px;
	z-index: 1;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    font-weight: bold;
    color: white;
    /* border: 3px solid white; */
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/*
 * -- NEWS STYLES --
 */

#news{
	width: 55%;
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	top: 60%;
	left: 20%;
	z-index: 2;
	margin: 0 auto;
	padding: 1em;
	min-height: 20%;
}

#news .date {
    border-bottom: 5px #f79033 solid;
    padding: 5px 20px;
    color: #333;
}

#news .bx-controls {
	margin: 0;
}

#news-container div {
	padding: 0 1%;
}

.news blockquote {
    background-color: rgba(192,192,192,0.2);
	margin-top: 0;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 87%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background: white;
}

.content-lightbox {
	background: white;
}.content-lightbox  .news{
	padding: 1em;
}

.mfp-bg {
	background-color: #999999 !important;
}
.mfp-close {
	color: #333333 !important;
	font-size: 4em !important;
}

figcaption {
	font-style: italic;
	font-size: 0.875em;
}

.person {
	text-align: center;
}

.portrait {
	border: 3px solid #d5d5d5;
	border-radius: 50%;
	height: 140px;
	width: 140px;
}

.function {
	font-style: italic;
	font-size: 0.875em;
}

.space-tb {
	padding: 2em 0;
}

.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
}

#arrows {
  position: relative;
}
#arrow-prev {
  position: absolute;
  left: -4.5em;
}
#arrow-next {
  position: absolute;
  right: -4.5em;
}


.bx-controls {
	margin: 1em 0;
	text-align: center;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #D5D5D5;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #999;
}

a.bx-prev, a.bx-next, a.bx-prev:hover, a.bx-next:hover  {border: none;}

.bx-prev:before, .bx-next:before { font-family: FontAwesome; font-size: 5em; line-height: 1; color: #999; opacity: 0.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   

.bx-prev:before { content: "\f104"; }
[dir="rtl"] .bx-prev:before { content: "\f105"; }

[dir="rtl"] .bx-next { left: -10px; top: 70px; right: auto; }
.bx-next:before { content: "\f105"; }
[dir="rtl"] .bx-next:before { content: "\f104"; }




/* This is the class used for the main content headers (<h2>) */
.content-head {
	font-size: 1.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
h3.content-subhead {
    color: #f79033;
	font-size: 1.6em;
	font-weight: normal;	
}
    .content-subhead i {
        margin-right: 7px;
    }

h4.content-subhead {
    color: #f79033;
	font-size: 1em;
}	

/* This is the class used for the dark-background areas. */
.ribbon {
	padding: 5em;
}

.ribbon-lr {
	padding: 0 5em;
}

.dark-grey {
    background: #CDCECE;
    color: #FDFDFD;
}

.middle-grey {
    background: #D3D3D3;
    color: #FDFDFD;
}

.light-grey {
    background: #D5D5D5;
    color: #FDFDFD;
}

.super-light-grey {
    background: #E5E5E5;
}

.lines {
	background: url(https://www.delo-herold-stiftung.de/img/delo/bg_pattern_1.png); 
	background-position: center center; 
	background-repeat: repeat; 
	border-top: 1px solid #D5D5D5;
	min-height: 580px;
}

.divider {
	height: 1px;
	box-shadow: 0 0 0 1px hsl(0, 0%, 80%), 0 0 0 2px hsl(0, 0%, 90%);
}

.stifter{
	  background: url(https://www.delo-herold-stiftung.de/img/delo/portrait_shd_whd_cover.jpg); 
	  background-position: right top; 
	  background-repeat: no-repeat; 
	  background-size: contain; 
	  -ms-behavior: url(https://www.delo-herold-stiftung.de/polyfills/backgroundsize.min.htc);
	  padding: 5em 5em 1em 5em;
}


#contact i.fa {
  width: 35px;
  display: inline-table;
}

#contact textarea {
	height: 6em;
	margin-bottom: 1em;
	width: 100%;
}

.success {
	border-left: 3px solid #a0c332;
	padding-left: 2em;
}

.error {
	border-left: 3px solid red;
	padding-left: 2em;
}

.block {
  display: inline-block;
  vertical-align: top;
}

.nowrap {
    white-space: nowrap;
}

.slicknav_menu {
	display: none;
}


/* This is the class used for the footer */
.footer {
	box-shadow: 0 0 0 3px hsl(0, 0%, 75%), 0 0 0 5px hsl(0, 0%, 60%);
}


@media (max-width: 48em) {
	/* #menu is the original menu */
	#menu {
		display: none;
	}
	
	.slicknav_menu {
		background: #FFFFFF !important;
		display: block;
		font-size: 2em !important;
		min-height: 2em;
		padding: 3px;
		position: fixed;
		right: 0;
		z-index: 5;
	}	

	.slicknav_btn {
		background-color: #D5D5D5 !important;
	}
		
	.slicknav_nav,	
	.slicknav_nav a{
		color: #7f8c8d !important;	
		text-transform: uppercase;
		text-align: right;
	}	
	
	#logo {
		height: 80px;
		margin: 0 !important;
		position: fixed;
		top: 0;
		left: 1em;
		right: auto;
		z-index: 10;
	}
	
	#logo.logo-small,
	#logo.logo-big {
		height: 80px;
	}
	
	.nav-wrapper {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
	}

	.content-wrapper {
		top: 59%;
	}
	
	.splash-container {
		background-size: contain;
		background-position: center center;
		height: 60%;
		min-height: 0;
	}
	
	blockquote {
		font-size: 1em;
		margin: 1.5em 0 1.5em;
		background: rgba(255,255,255, 0.5);
	}	
	
	#news {
		display: none;
	}
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }

	.pure-menu.pure-menu-fixed {
		padding: 0 2%;
	}	
	
    /* We want to give the content area some more padding */
    .content {
        padding: 1em;
		max-width: 70%;
		margin: 0 auto;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 50%;
        height: 50%;
    }

    .splash-head {
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }

}


/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {	
	
	#logo {
		height: 140px;
	}
	#logo.logo-big {
		height: 140px;
	}
	
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
	
    .stifter{
		min-height: 250px;
    }
	
	#arrow-prev {
	  left: -8em;
	}
	#arrow-next {
	  right: -8em;
	}		
}


/*
 * -- HI-RES DESKTOP --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */

@media (min-width: 98em) {	
	
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
	
    .stifter{
		  background-size: cover;
		  -ms-behavior: url(https://www.delo-herold-stiftung.de/polyfills/backgroundsize.min.htc);
		  padding: auto;
    }

	blockquote {
		margin: 1.5em 0 1.5em;
		background: rgba(255,255,255, 0.5);
	}	
	
	#arrow-prev {
	  left: -8em;
	}
	#arrow-next {
	  right: -8em;
	}		
}