/**
 * @about: 	style.css - Contains all styles for the image-fullwidth article template
 */

.at-ttcb-content-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1180px;
	padding: 0;
}

/**
 * at-header-image-fullwidth
 */

.at-ttcb {
	position: relative;
	background: transparent none no-repeat 50% 50%;
	background-size: cover;
}

.at-ttcb .at-ttcb-content {
	display: block;
	max-width: 1180px;
	height: 100%;
	margin: 0 auto;
	padding: 6%;
	overflow: auto;
	text-align: left;
}

/**
 * slideshow
 */

.at-ttcb-images {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	vertical-align: top;
}

.at-ttcb-images ul {
	margin: 0;
	list-style: none;
	vertical-align: top;
}

.at-ttcb-image {
	position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
	top: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	z-index: 500;
	transition: opacity 2s, height .2s;
	background: transparent none;
}

.at-ttcb .at-ttcb-image:before {
	display: none;
}

.article_content ul li.at-ttcb-image {
	margin-left: 0;
}

@media screen and (max-width: 768px) {
	.at-ttcb-content-wrapper {
		overflow: hidden;
	}

    .at-ttcb-images {
        width: 88%;
        margin-top: 6%;
        margin-right: 6%;
        margin-left: 6%;
    }

	.at-ttcb-content + .at-ttcb-images {
		margin-top: 0;
		margin-bottom: 6%;
	}
}

.at-ttcb-image img {
	display: block;
	width: 100%;
}

.at-fill-out {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.at-fill-out img {
	margin: auto;
	min-height: 100%;
	min-width: 100%;
	max-height: none;
	max-width: 100%;
}

.at-fill-out.at-max-width img {
	max-width: 100%;
	max-height: none;
}

.at-fill-out.at-max-height img {
	max-width: 100%;
	max-height: none;
}

.at-ttcb-image.show {
	opacity: 1;
	z-index: 1000;
	transition: opacity 2s;
}

@media screen and (min-width: 768px) {
	.at-ttcb-content-wrapper {
		display: table;
		padding: 1.6% 0;
	}

	.at-ttcb .at-ttcb-content,
	.at-ttcb-images {
		display: table-cell;
		vertical-align: middle;
	}

	.at-ttcb .at-ttcb-content {
		padding: 0 4%;
		width: 52%;
	}

	.at-ttcb-images {
		width: 40%;
	}

	.at-ttcb-images ul {
		position:relative;
		overflow: auto;
		height: 100%;
	}

	.at-ttcb-image {
		height: 100%;
	}

	/*.at-ttcb-image img {*/
		/*position: absolute;*/
		/*top: 0;*/
		/*bottom: 0;*/
		/*width: 100%;*/
		/*margin: auto;*/
	/*}*/

	.at-ttcb .at-ttcb-content-left {
		padding-right: 4%;
	}

	.at-ttcb .at-ttcb-content-right {
		padding-left: 4%;
	}

	.at-ttcb-images-right .at-ttcb-image {
		background-position: 100% 0;
	}

	.at-ttcb-content-left .at-ttcb-inner-content {
		float: right;
	}

	.at-ttcb-images ul {
		padding-top: 0;
	}
}

@media screen and (min-width: 1100px) {
	.at-ttcb .at-ttcb-content {
		width: 50%;
	}

	.at-ttcb .at-ttcb-content-left {
		padding-right: 6%;
	}

	.at-ttcb .at-ttcb-content-right {
		padding-left: 6%;
	}
}

@media screen and (min-width: 1200px) {
	.at-ttcb .at-ttcb-content {
		width: 46%;
	}

	.at-ttcb .at-ttcb-content-left {
		padding-right: 10%;
	}

	.at-ttcb .at-ttcb-content-right {
		padding-left: 10%;
	}

	.at-ttcb-images-right:last-child,
	.at-ttcb-images-right {
		margin-right: 0;
	}

	.at-ttcb-images-left {
		margin-left: 0;
	}
}

@media screen and (min-width: 1280px) {
	.at-ttcb-content-left .at-ttcb-inner-content,
	.at-ttcb-content-right .at-ttcb-inner-content {
		max-width: 700px;
	}

	.at-ttwc-content-wrapper {
		padding: 80px 0;
	}

	.at-one .at-compact-top .at-ttcb-images-left {
		top: 1.75%;
	}

	.at-one .at-compact-bottom .at-ttcb-images-left {
		bottom: 1.75%
	}
}

.ie8 .at-ttcb-images {
	width: 40%;
}

.ie8 .at-ttcb-content-right .at-ttcb-inner-content,
.ie8 .at-ttcb-content-left .at-ttcb-inner-content {
	max-width: 56%;
	float: left;
}

.ie8 .at-ttcb-content-right .at-ttcb-inner-content {
	float: right;
}

.ie8 .at-ttcb-images-right {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}

.ie8 .at-ttcb-images-left {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}