/* 

ADACOR Banner Stylesheet
December 2018
Author oliwa@72dpi.de, www.72dpi.de

- Newsletter Banner Fullwidth
- Newsletter Banner Overlay

- Promo Banner (Single Post)
- Related Banner (Single Post)
- Topic Banner (Category Pages)

- Tweetbox (Single Post)

- Full Row Interferrer (Front Page)

*/


/* Newsletter Banner Fullwidth
-------------------------------------------------------------------------------------- */
.newsletter-banner {
	background: #f0f0f0;
	text-align: center;
}
	.newsletter-banner h4 {
		margin: 0 auto;
		padding: 1rem 0;
		font-family: "foralpro", Arial, Verdana, sans-serif;
		font-size: 1.6rem;
	}
	.newsletter-banner input[type=text] {
		font-family: "foralpro", Arial, Verdana, sans-serif;
		font-size: 1rem;
		padding: .6rem;
		width: 100%;
		border: 1px solid #ddd;
		max-width: 400px;
	}
	.newsletter-banner button {
		width: 100%;
		max-width: 400px;
		padding: .7rem;
	}
	.newsletter-banner a {
		font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
		font-weight: bold;
		font-size: 1rem;
		color: #555;
	}

iframe#nl-blog-adacor {
	border: none;
	height: 9rem;
}



/* Newsletter Banner Overlay
-------------------------------------------------------------------------------------- */
.newsletter-banner-overlay {
	background: #f0f0f0;
	text-align: center;
	position: relative;
}
	.newsletter-banner-overlay-top {
		position: absolute;
		height: 15rem;
		top: -15rem;
		left: 0; right: 0;
		/*border: 1px solid red;*/
		width: 100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,f0f0f0+100&1+0,0+100 */
		background: -moz-linear-gradient(bottom, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(bottom, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to top, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0f0f0', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
	}
	.newsletter-banner-overlay-bottom {
		position: absolute;
		height: 15rem;
		bottom: -15rem;
		left: 0; right: 0;
		/*border: 1px solid red;*/
		width: 100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,f0f0f0+100&1+0,0+100 */
		background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#00f0f0f0',GradientType=0 ); /* IE6-9 */
	}

	.newsletter-banner-overlay h4 {
		margin: 0 auto;
		padding: 0;
		font-size: 2rem;
	}

	.newsletter-banner-overlay p {
		font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
		margin: 0 auto;
		padding: 0 0 1rem 0;
		font-size: 1rem;
		color: #555;
	}
	.newsletter-banner-overlay input[type=text] {
		font-size: 1rem;
		padding: .6rem;
		width: 100%;
		border: 1px solid #ddd;
		max-width: 400px;
	}
	.newsletter-banner-overlay button {
		width: 100%;
		max-width: 400px;
		padding: .7rem;
	}
	.newsletter-banner-overlay a {
		font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
		font-weight: bold;
		font-size: 1rem;
		color: #555;
	}





/* CDN Banner Overlay
-------------------------------------------------------------------------------------- */
.cdnbanner {
	background: #f0f0f0;
	text-align: center;
	position: relative;
	padding-left: .7rem;
	padding-right: .7rem;
}
	.cdnbanner-top {
		position: absolute;
		height: 15rem;
		top: -15rem;
		left: 0; right: 0;
		/*border: 1px solid red;*/
		width: 100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,f0f0f0+100&1+0,0+100 */
		background: -moz-linear-gradient(bottom, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(bottom, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to top, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0f0f0', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
	}
	.cdnbanner-bottom {
		position: absolute;
		height: 15rem;
		bottom: -15rem;
		left: 0; right: 0;
		/*border: 1px solid red;*/
		width: 100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f0+0,f0f0f0+100&1+0,0+100 */
		background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(240,240,240,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#00f0f0f0',GradientType=0 ); /* IE6-9 */
	}

	.cdnbanner .wrap-s {
		margin: 0 auto;
		border-radius: 1rem;
		padding: .5rem 1rem;
		background-color: #01b6ed;
		background: linear-gradient(to bottom right, #00add0 50%, #92d400 );
		
		/*
		background-image: url(images/clouds.svg);
		background-image: url(images/bg-cdn-banner.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		*/
	}
	
	.cdnbanner h4 {
		font-size: 2.2rem;
		color: #fff;
		line-height: 110%;
		text-shadow: 1px 1px 0 #333;
		margin: 1rem 0;
	}
	.cdnbanner h5 {
		font-size: 1.3rem;
		line-height: 120%;
		margin: .5rem 0;
		color: #fff;
	}
	.cdnbanner p {
		font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
		margin: 0 auto;
		padding: 0 0 1rem 0;
		font-size: 1rem;
	}
	.cdnbanner ul {
		margin: 2rem 0;
		padding: 0;
		color: #fff;
	}
		.cdnbanner ul i {
			display: block;
			color: #fff;
			font-size: 3rem;
			margin: 0 0 .5rem 0;
		}
	.cdnbanner a {
		font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
		font-size: 1rem;
		color: #555;
	}
	.cdnbanner a.btn {
		background-color: #E1372F;
	}
	.cdnbanner a.close-cdnbanner {
		color: rgba(255,255,255,.5);
	}

		@media (min-width: 600px) {
			.cdnbanner .wrap-s {
				margin: 0 auto;
				border-radius: 1rem;
				padding: 1.5rem 3rem;
			}
			.cdnbanner h4 {
				font-size: 3rem;
				line-height: 130%;
			}
			.cdnbanner h5 {
				font-size: 1.2rem;
				line-height: 140%;
				margin: .5rem 0 1rem 0;
			}
			.cdnbanner ul {
				display: flex;
			}
				.cdnbanner ul li {
					width: 33.33333%;
				}
				.cdnbanner ul li p {
					font-size: 1.2rem;
					line-height: 150%;
					padding: 0 .5rem;
				}
				.cdnbanner a.btn {
					font-size: 1.1rem;
					padding: .5rem 1rem;
					font-weight: bold;
				}
		}




/* Promo Banner
-------------------------------------------------------------------------------------- */
	.promo-banner {
		margin: 3rem 0;
		border: 1px solid #01b6ed;
		border-radius: 1rem;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}
		.promo-banner a.promobannervisual,
		.promo-banner a.promobannervisual figure {
			min-height: 15rem;
		}
		.promo-banner figure {
			height: 100%;
			background-position: center center;
			background-size: cover;
		}
		.promo-banner .promo-info {
			padding: 1rem;
		}
		.promo-banner .promo-info h4 {
			margin: 0 0 1rem 0;
			font-family: "geogrotesque-medium", Arial, Verdana, sans-serif;
			line-height: 110%;
			font-size: 2.2rem;
		}
		.promo-banner .promo-info p {
			font-family: "geogrotesque-regular", Arial, Verdana, sans-serif;
		}

@media (min-width: 600px) {
	.promo-banner {
		flex-direction: row;
	}
	.promo-banner .promo-info {
		flex: 0 1 60%;
	}
	.promo-banner a.promobannervisual {
		flex: 0 1 40%;
		order: 2;
	}
	
}



/* Related Banner - Single Post
-------------------------------------------------------------------------------------- */
.related-banner {
	/* background-color: #f0f0f0;
	background-image: url(images/bg-interferer-adacor-cdn.jpg); 
	background-position: center center;
	background-size: cover; */
	color: #fff;
}
	.related-banner.parallax-window {
		min-height: 200px;
		background: transparent;
	}
	.related-banner a {
		color: #fff;
	}
	.related-banner-left {
		float: left;
		width: 65%;
	}
	.related-banner-right {
		float: right;
		width: 35%;
		position: relative;
	}
		.related-banner-right img {
			position: absolute;
			right: .7rem;
			bottom: 0;
			height: 2rem;
		}

	.related-banner h4 {
		font-family: "geogrotesque-regular", Arial, Verdana, sans-serif;
		font-size: 2.8rem;
		line-height: 115%;
		margin: 2rem 0;
	}
		.related-banner h4 span {
			display: block;
		}
	
	.related-banner p {
		margin: 0;
		font-family: "geogrotesque-regular", Arial, Verdana, sans-serif;
		font-size: 1.3rem;
		line-height: 125%;
	}
	/*.related-banner span.btn-dark {
		display: inline-block;
		margin: 1.5rem 0 0 0;
		padding: .3em 1.5em;
		background-color: #011F3A;
		font-family: "geogrotesque-regular", Arial, Verdana, sans-serif;
		font-size: .9rem;
		color: #fff;
		border-radius: .5rem;
	}*/

		@media (max-width: 800px) {
			.related-banner-left,
			.related-banner-right {
				float: none;
				width: 100%;
				padding-bottom: 1em;
			}
			.related-banner h4 {
				margin: 0 0 1rem 0;
				font-size: 1.6em;
			}
			.related-banner-right {
				margin-top: 2rem;
			}
		}



/* Topic Banner - Home, Category, Tags
-------------------------------------------------------------------------------------- */
.topic-banner {
	padding: 1em 0;
	color: #fff;
}

	.topic-banner .wrap {
		max-width: 600px;
	}
	.topic-banner h3 {
		text-transform: uppercase;
		margin: .5em 0;
	}



/* Tweetbox (Twitter)
-------------------------------------------------------------------------------------- */
aside.twitter {
	margin: 2em 0;
	padding: 1rem 2rem .5rem 2rem;
	background-color: #1da1f2;
	color: #fff;
}
	aside.twitter i.fa {
		font-size: 2.7rem;
		color: rgba(255,255,255,.75);
	}
	aside.twitter cite {
		font-family: "geogrotesque-semibold", Arial, Verdana, sans-serif;
		font-size: 1.5rem;
		line-height: 130%;
		font-style: normal;
	}
	aside.twitter a.tweetbutton {
		font-family: "geogrotesque-semibold", Arial, Verdana, sans-serif;
		color: #fff;
		text-transform: uppercase;
		position: relative;
		font-size: .8em;
	}
		aside.twitter a.tweetbutton:after {
			position: absolute;
			font-family: "FontAwesome";
			font-size: 2rem;
			content: "\f099";
			right: -3rem;
			top: -.3rem;
		}



/* Full Row Interferrer
-------------------------------------------------------------------------------------- */
.adacor-group-banner {
	background-color: #011F3A;
	color: #fff;
}
	.adacor-group-banner h3 {
		font-family: "geogrotesque-regular", Arial, Verdana, sans-serif;
		font-size: 4em;
		line-height: 100%;
		text-transform: uppercase;
		margin: .3em 0 .8em 0;
	}
	.adacor-group-banner img {
		height: 1.8em;
	}
	@media (max-width: 600px) {
		.adacor-group-banner h3 {
			font-size: 2em;
		}
	}