/* CSS Document */

.article.widget-basic-banner {
	
}

.article.widget-basic-banner > .margin {
	
}

.article.widget-basic-banner > .margin > .padding {
	padding: 0 !important;
}

.article.widget-basic-banner > .margin > .padding > .wrap{
	position: relative;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .image {
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	z-index: -1;
}

.article.widget-basic-banner.done-loading > .margin > .padding > .wrap > .image,
.article.widget-basic-banner.done-loading > .margin > .padding > .wrap > .play-button,
.article.widget-basic-banner.done-loading > .margin > .padding > .wrap > .text-wrap {
	opacity: 1;
	z-index: 1;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	opacity: 0;
	z-index: -1;
	overflow: hidden;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap > .overlay-text {
	position: absolute;
	z-index: 2;
	padding: 20px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap > .overlay-text * {
	color: #fff;
}

/*
* auto height instellingen
*/
.article.widget-basic-banner.fixed-height > .margin > .padding > .wrap {
	float: left;
	width: 100%;
}

.article.widget-basic-banner.fixed-height > .margin > .padding > .wrap > .image {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
}

.article.widget-basic-banner.fixed-height > .margin > .padding > .wrap > .image img {
	display: block;
}

.article.widget-basic-banner.fixed-height > .margin > .padding > .wrap > .text-wrap {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}



/*
* AUTO
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.auto {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.auto > .overlay-text {
	display: table;
	height: 100%;
	left: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.auto > .overlay-text > div {
	vertical-align: top;
	display: table-cell;
	position: relative;
	max-width: 100%;
}

/*
* TL
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tl {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tl > .overlay-text {
	display: table;
	height: 100%;
	left: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tl > .overlay-text > div {
	vertical-align: top;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

/*
* TC
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tc {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tc > .overlay-text {
	display: table;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tc > .overlay-text > div {
	vertical-align: top;
	display: table-cell;
	max-width: 600px;
}

/*
* TR
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tr {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.tr > .overlay-text {
	display: table;
	height: 100%;
	right: 0;
}

.article.widget-basic-banner> .margin > .padding > .wrap > .text-wrap.tr > .overlay-text > div {
	vertical-align: top;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

/*
* ML
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.ml {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.ml > .overlay-text {
	display: table;
	height: 100%;
	left: 0;
}

.article.widget-basic-banner> .margin > .padding > .wrap > .text-wrap.ml > .overlay-text > div {
	vertical-align: middle;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

/*
* MC
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mc {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mc > .overlay-text {
	display: table;
	height: 100%;
	margin: 0 auto;
	position: relative;
	
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mc > .overlay-text > div {
	vertical-align: middle;
	display: table-cell;
	max-width: 600px;
	overflow: hidden;
	max-height: 100%;
}

/*
* MR
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mr {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mr > .overlay-text {
	display: table;
	height: 100%;
	right: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.mr > .overlay-text > div {
	vertical-align: middle;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

/*
* BL
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bl {
	max-width: 1200px;
	height: 100%;	
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bl > .overlay-text {
	display: table;
	height: 100%;
	left: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bl > .overlay-text > div {
	vertical-align: bottom;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

/*
* BC
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bc {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bc > .overlay-text {
	display: table;
	height: 100%;
	margin: 0 auto;
	position: relative;	
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.bc > .overlay-text > div {
	vertical-align: bottom;
	display: table-cell;
	max-width: 600px;
}

/*
* BR
*/
.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.br {
	max-width: 1200px;
	height: 100%;
}

.article.widget-basic-banner> .margin > .padding > .wrap > .text-wrap.br > .overlay-text {
	display: table;
	height: 100%;
	right: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .text-wrap.br > .overlay-text > div {
	vertical-align: bottom;
	display: table-cell;
	position: relative;
	max-width: 600px;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .close-button {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: -1;
	opacity: 0;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .close-button > i {
	color: #fff;
	font-size: 30px;
	cursor: pointer;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .play-button {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	text-align: center;
	display: table;
	opacity: 0;
	z-index: -1;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .play-button > div {
	vertical-align: middle;
	display: table-cell;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .play-button > div > i {
	font-size: 60px;
	height: 40px;
	width: 40px;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.9;
	margin-left: -20px;
	transition: opacity 0.15s linear;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .play-button > div > i:hover {
	opacity: 1;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .video-embed {
	display: none;
	opacity: 0;
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .video-embed iframe {
	width: 100% !important;
	height: 100% !important;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .video-embed.active {
	display: block;
	opacity: 1;
}

.article.widget-basic-banner > .margin > .padding > .wrap > .video-embed.active ~ .close-button {
	opacity: 1;
	z-index: 6;
}

/* A */
@media (max-device-width:1023px) and (orientation:landscape)
{

}

/* B */
@media (max-width: 1000px),(max-device-width:1000px) and (orientation:portrait),(max-device-width:767px) and (orientation:landscape)
{

}

/* C */
@media (max-width:767px),(max-device-width:767px) and (orientation:portrait),(max-device-width:499px) and  (orientation:landscape)
{	
	.article.widget-basic-banner > .margin > .padding > .wrap > .close-button {
		right: 0px;
		top: 0px;
	}
	
	.article.widget-basic-banner > .margin > .padding > .wrap > .close-button > i {
		padding: 20px;
	}
}

/* D */
@media (max-width:499px),(max-device-width:499px) and (orientation:portrait)
{

}