/* Mobile styling first */
.sponsorship-container {
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
	padding-bottom: 103%;
}
.sponsorship-container .sponsor-image-container { position: relative;}
.sponsorship-container .sponsor-image-container img {width: 100%;}
.sponsorship-container .sponsor-image-container .content-container{
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-bottom: 5px;
	width: 100%;
	transform: translateX(-50%);
}
.sponsorship-container .sponsor-image-container .content-container .inner {
	padding: 0px 20px;
}
.sponsorship-container .sponsor-image-container .content-container h4 {
	font-family: 'petala-pro', sans-serif;
	color: #fff;
	font-size: 24px;
	padding: 5px 0;
	border-radius: 6px 0 0 0;
	margin-bottom: 2px;
}
.sponsorship-container .sponsor-image-container .content-container .subtitle {
	font-family: 'petala-pro', sans-serif;
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	padding: 5px 20px;
	margin-bottom: 0;
}
.sponsorship-container .sponsor-image-container .content-container .caption p {
	font-family: 'petala-pro', sans-serif;
	color: #fff;
	font-size: 14px;
	padding: 5px 30px 5px 0;
	margin-bottom: 0;
	font-weight: 500;
}
.sponsorship-container .sponsor-image-container .content-container .caption {
	display: flex;
	justify-content: space-between;
	position: relative;
	line-height: 1em;
}
.sponsorship-container .sponsor-image-container .content-container .caption .arrow {
	width: 30px;
	height: 30px;
	margin-top: 2px;
}
.sponsorship-container .more-info-dropdown {
	position: absolute;
	width: 100%;
	top: 0;
	background-color: #343434;
	padding: 15px;
	transition: transform .3s;
}
.sponsorship-container .author-info {
	font-family: 'petala-pro', sans-serif;
	color: #fff;
	font-size: 16px;
}
.sponsorship-container .author-info .author {
	font-size: 14px;
	margin-bottom: 0;
}
.sponsorship-container .author .ico-camera {
	width: 13px;
	vertical-align: 0px;
}
.sponsorship-container .ico-show { width: 22px; height: 22px; display: none; }
.sponsorship-container .ico-close { width: 16px; height: 16px; }
.sponsorship-container .hidden .ico-show { width: 22px; height: 22px; display: inline; }
.sponsorship-container .hidden .ico-close { display: none; }

.sponsorship-container .more-info-dropdown button {
	position: absolute;
	bottom: 0;
	right: 0px;
	padding: 0px;
	transform: translateY(99%);
}
.sponsorship-container .more-info-dropdown button {
	background-color: rgba(0,0,0,.6);
	position: absolute;
	right: 0px;
	padding: 0px;
	margin-bottom: 0;
	width: 33px;
	height: 33px;
	text-align: center;
	border-bottom-left-radius: 10px;
}
.more-info-dropdown.hidden {
	transform: translateY(-100%);
}
.more-info-dropdown.hidden img.shown {display: none;}
.more-info-dropdown.hidden img.hidden-mobile {
	display: inline;
}
.more-info-dropdown.hidden img.show-tablet {display: block;}
.more-info-dropdown img.hidden-mobile {display: none;}
.more-info-dropdown img.show-tablet {display: none;}
.sponsorship-container .sponsor-image-container .content-container .title {
	background-color: rgba(0,0,0,.6);
	border-radius: 10px 0 0 0;
	padding: 0 20px;
}
.sponsorship-container .sponsor-image-container .content-container .caption {
	background-color: rgba(0,0,0,.6);
	border-radius: 0 0 10px 0;
	padding: 0 20px;
}

.sponsorship-container .sponsor-image-container .content-container .title {position: relative;}


/* light theme */
.sponsorship-container.light .content-container .title,
.sponsorship-container .sponsor-image-container.light .content-container .title,
.sponsorship-container.light .content-container .caption,
.sponsorship-container .sponsor-image-container.light .caption {
	background-color: rgba(255,255,255, .8);
}
.sponsorship-container.light .content-container .title h4,
.sponsorship-container .sponsor-image-container.light .title h4 { color: #E94127; }
.sponsorship-container.light .content-container .caption p,
.sponsorship-container .sponsor-image-container.light .caption p,
.sponsorship-container.light .content-container .subtitle,
.sponsorship-container .sponsor-image-container.light .subtitle { color: #343434; }
/* end light theme */

/* Tablet 640+ */
@media only screen and (min-width: 768px) {
	.sponsorship-container {
		padding-bottom: 45.5%;
	}
	.sponsorship-container .sponsor-image-container .content-container {
		position: absolute;
		bottom: 50%;
		left: 0;
		margin-bottom: 5px;
		transform: translateY(70%);
	}
	.sponsorship-container .sponsor-image-container .content-container .inner {
		width: 360px;
	}
	.sponsorship-container .sponsor-image-container .content-container h4 {
		font-size: 34px;
		margin-bottom: 2px;
	}
	.sponsorship-container .sponsor-image-container .content-container .subtitle {font-size: 18px;padding-top: 0;padding-bottom: 0;}
	.sponsorship-container .sponsor-image-container .content-container .caption p {font-size: 16px;padding: 5px 0;}
	.sponsorship-container .more-info-dropdown {
		position: absolute;
		width: 250px;
		bottom: 0;
		right: 0;
		top: initial;
	}
	.sponsorship-container .more-info-dropdown.hidden {
		transform: translateY(100%);
	}
	.sponsorship-container .more-info-dropdown .close-button {
		top: 0;
		bottom: auto;
		transform: translateY(-99%);
		border-bottom-left-radius: 0;
		border-top-left-radius: 10px;
	}
	.more-info-dropdown.hidden img.hidden-mobile {display: none;}
}

@media only screen and (min-width: 900px) {
	.sponsorship-container {
		padding-bottom: 41%;
	}
}

/* Desktop 1024+ */
@media only screen and (min-width: 64em) {
	.sponsorship-container .sponsor-image-container .content-container h4 {
		font-size: 42px;
		color: #fff;
		background-color: transparent;
		padding-bottom: 20px;
	}
	.sponsorship-container .sponsor-image-container .content-container .caption {}
	.sponsorship-container .sponsor-image-container .content-container .caption p {
		font-size: 19px;
	}
	.sponsorship-container .sponsor-image-container .content-container {
		/* width: 560px; */
		left:  50%;
		margin: 0 auto;
		width: 100%;
		max-width: 1320px;
		transform: translate(-50%, 70%);
	}
	.sponsorship-container .sponsor-image-container .content-container .inner {
		width: 650px;
	}
	.sponsorship-container .sponsor-image-container .content-container .title { position: relative; }
	.sponsorship-container .sponsor-image-container .content-container .subtitle {
		font-size: 22px;
	}
	.sponsorship-container .more-info-dropdown {
		width: 400px;
	}
	.sponsorship-container .sponsor-image-container .content-container .caption .arrow {
		margin-top: 6px;
	}
}

@media only screen and (min-width: 1280px) {
	.sponsorship-container {
		padding-bottom: 26%;
	}
}
