/**
 * Stylesheet for widget 16
 *
 *
 * @description  	Displays the masonry widget with different grid widgets
 * @author     		Manuel Streibl
 * @copyright  		(c) 2015 ACTS Communication GmbH
 * @license    		all rights reserved
 */


/*
- 01. WIDGET16 SETTINGS

- 02. WIDGET16 - TEXT WITH BACKGROUND (WIDGET 19)

- 03. WIDGET16 - VIDEO WITH BACKGROUND (WIDGET 19)

*/

/* 01. WIDGET16 SETTINGS
----------------------------------------- */
#widget16 {
	padding-top 			: 80px;
	padding-bottom 			: 80px;
	/*margin-top				: -100px;*/
	z-index					: -1;
}

#widget16 .container {
	padding-top				: 15px !important;
}

#widget16 h1.headline {
	font-size				: 75px;
	margin-top				: 0 !important;
	margin-bottom			: 20px !important;
	background				: none;
	text-align				: center;
	padding-top				: 0 !important;
	padding-bottom			: 0 !important;
	font-family 			: var(--generic-bold-headline-font);
}

#widget16 h2.headline:after {
	display					: none;
}

#widget16 h2.headline:before {
	content					: "";
	position				: absolute;
	height					: 20px;
	border-bottom			: 2px solid #333;
	top						: 3px;
	left					: 20px;
	right					: 20px;
}

#widget16 h2.headline span {
	display					: inline-block;
	position				: relative;
	text-align				: center;
	color					: #333 !important;
	background				: #FFF;
	padding-left			: 15px;
	padding-right			: 15px;
}

#widget16 .grid {
	display					: block;
	width					: 100%;
	margin					: 15px 0;
}

#widget16 .item {
	display					: block;
	float					: left;
	background				: transparent;
	font-size				: 24px;
	overflow				: hidden;
	background-position		: center center;
	border					: 5px solid transparent;
	position				: relative;
}

#widget16 .item.height4_1 {
	height					: 190px;
}
#widget16 .item.height4_2 {
	height					: 380px;
}
#widget16 .item.height4_3 {
	height					: 570px;
}
#widget16 .item.height4_4 {
	height					: 760px;
}

#widget16 .item.height1 {
	height					: 350px;
}

#widget16 .item.height2 {
	height					: 700px;
}

#widget16 .item.width1 {
	width					: 8.33333333%;
}

#widget16 .item.width2 {
	width					: 16.66666667%;
}

#widget16 .item.width3 {
	width					: 25%;
}

#widget16 .item.width4 {
	width					: 33.33333333%;
}

#widget16 .item.width5 {
	width					: 41.66666667%;
}
#widget16 .item.width6 {
	width					: 50%;
}

#widget16 .item.width7 {
	width					: 58.33333333%;
}

#widget16 .item.width8 {
	width					: 66.66666667%;
}

#widget16 .item.width9 {
	width					: 75%;
}

#widget16 .item.width10 {
	width					: 83.33333333%;
}

#widget16 .item.width11 {
	width					: 91.66666667%;
}

#widget16 .item.width12 {
	width					: 100%;
}

#widget16 .item a,
#widget16 .item .full {
	display					: block;
	position				: absolute;
	top						: 0;
	right					: 0;
	bottom					: 0;
	left					: 0;
	background-size			: cover;
	background-repeat		: no-repeat;
	color					: #FFF;
	text-decoration			: none !important;
	text-align				: center;
}

@media (max-width: 1200px) {
	#widget16 .item.height1 {
		height				: 200px !important;
	}

	#widget16 .item.height2 {
		height				: 400px !important;
	}
}

@media (max-width: 992px) {
	#widget16 .item.width6 {
		width				: 100% !important;
	}

	#widget16 .item.height1 {
		height				: 250px !important;
	}

	#widget16 .item.height2 {
		height				: 350px !important;
	}
}

@media (max-width: 650px) {
	#widget16 .item {
		width				: 100% !important;
		height				: 250px !important;
	}

	#widget16 .item.height2 {
		height				: 250px !important;
	}
}

/* 02. WIDGET16 - TEXT WITH BACKGROUND (WIDGET 19)
----------------------------------------- */


#widget16 .item .blue {
	background-color		: #145b85 !important;
}

#widget16 .item .gray {
	background-color		: #393939 !important;
}
/*
#widget16 .item a:hover {
	opacity					: 0.8;
}
*/
#widget16 .item .content_text {
	padding					: 20px;
}

#widget16 .item .content_text h2,
#widget16 .item .content_text p {
	margin					: 0;
	padding					: 0;
}

#widget16 .item .content_text h2 {
	font-size				: 20px;
}

#widget16 .item .bottom {
	position				: absolute;
	bottom					: 0;
	left					: 0;
	right					: 0;
	background				: #0a5884;
	font-size				: 20px;
	margin-bottom			: 0;
	padding					: 15px;
}

#widget16 .item .content_text p {
	font-size				: 16px;
}
/*
#widget16 .item:after {
	display 						: block;
	position 						: absolute;
	content 						:'';
	top 							: 0;
	right 							: 0;
	bottom 							: 0;
	left 							: 0;
	-webkit-transition 				: all 0.5s ease-in-out 0s;
	-o-transition 					: all 0.5s ease-in-out 0s;
	transition 						: all 0.5s ease-in-out 0s;
	background 					    : #FCEA10;
	background-image 				: radial-gradient(circle at bottom left, #FCEA10, #F39313);
	z-index 						: 1;
	opacity 						: 0;
}
#widget16 .item:hover:after {
	opacity 						: 0.5;
} */

#widget16 .item .bottom:after {
	display 						: block;
	position 						: absolute;
	content 						:'';
	top 							: 0;
	right 							: 0;
	bottom 							: 0;
	left 							: 0;
	-webkit-transition 				: all 0.5s ease-in-out 0s;
	-o-transition 					: all 0.5s ease-in-out 0s;
	transition 						: all 0.5s ease-in-out 0s;
	background 					    : #FCEA10;
	background-image 				: radial-gradient(circle at bottom left, #FCEA10, #F39313);
	z-index 						: 1;
	opacity 						: 0;
}

#widget16 .item:hover .bottom:after {
	opacity 						: 1;
}

#widget16 .item h2 {
	position 						: relative;
	z-index 						: 2;
	text-transform                  : none;
}
#widget16 .item:hover h2{
	color 							: #231F20;
}
@media (max-width: 1525px) {

	#widget16 .item h2 {
		font-size			: 18px;
	}

}
@media (max-width: 1200px) {

	#widget16 .item .bottom h2{
		white-space             : nowrap;
		overflow                : hidden;
		text-overflow           : ellipsis;
		height                  : 25px;
	}

	.em2021 #widget16 .item .bottom h2 {
		white-space: inherit;
   		 overflow: visible;
	    text-overflow: inherit;
	    height: auto;
	}
	#widget16 .item .content_text {
		padding				: 15px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 24px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 20px;
	}

	#widget16 .item .content_text p {
		font-size			: 14px;
		line-height			: 1.2;
	}
}

@media (max-width: 992px) {
	#widget16 .item .content_text {
		padding				: 10px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 17px;
		margin-bottom		: 10px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 17px;
		margin-bottom		: 0;
	}

	#widget16 .item .content_text p {
		font-size			: 12px;
		line-height			: 1.2;
	}
}

@media (max-width: 768px) {
	#widget16 .item .content_text h2 {
		font-size			: 15px;
		margin-bottom		: 8px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 15px;
		margin-bottom		: 0;
	}

	#widget16 .item .content_text p {
		font-size			: 10px;
	}
}

@media (max-width: 650px) {
	#widget16 .item .content_text h2 {
		font-size			: 22px;
		margin-bottom		: 8px;
	}

	#widget16 .item .content_text h2 {
		font-size			: 22px;
		margin-bottom		: 0;
	}

	#widget16 .item .content_text p {
		font-size			: 14px;
	}
}

/* 03. WIDGET16 - VIDEO WITH BACKGROUND (WIDGET 19)
----------------------------------------- */
#widget16 .item .content_video i {
	font-size				: 180px;
	display					: block;
	opacity					: 0.2;
	margin-top				: 30px;
}

#widget16 .item .content_video:hover i {
	opacity					: 0.7;
}

#widget16 .item.height2 .content_video i {
	margin-top				: 80px;
	font-size				: 290px;
}

@media (max-width: 1200px) {
	#widget16 .item .content_video i {
		font-size			: 140px;
		margin-top			: 20px;
	}

	#widget16 .item.height2 .content_video i {
		margin-top			: 50px;
		font-size			: 250px;
	}
}

@media (max-width: 992px) {
	#widget16 .item .content_video i {
		font-size			: 100px;
		margin-top			: 20px;
	}

	#widget16 .item.height2 .content_video i {
		margin-top			: 40px;
		font-size			: 200px;
	}
}

@media (max-width: 650px) {
	#widget16 .item .content_video i {
		font-size			: 100px;
		margin-top			: 20px;
	}

	#widget16 .item.height2 .content_video i {
		font-size			: 100px;
		margin-top			: 20px;
	}
}

/* 03. WIDGET16 - VIDEO WITH TEXT (WIDGET 19)
----------------------------------------- */

#widget16 .item .content_video_text i {
	font-size				: 180px;
	display					: block;
	opacity					: 0.3;
}

#widget16 .item.height2 .content_video_text i {
	margin-top				: 80px;
	font-size				: 290px;
}
#widget16 .item.height2 .content_video_text i {
	margin-top 				: 150px;
	font-size				: 240px;
}

#widget16 .item.height2 .icon-block{
	width 					: 50%;
	margin 					: auto;
}
@media (max-width: 1200px) {
	#widget16 .item .content_video_text i {
		font-size			: 110px;
	}

	#widget16 .item.height2 .content_video_text i {
		margin-top			: 50px;
		font-size			: 170px;
	}
}

@media (max-width: 992px) {
	#widget16 .item .content_video_text i {
		font-size			: 80px;
	}

	#widget16 .item.height2 .content_video_text i {
		margin-top			: 20px;
		font-size			: 170px;
	}
}

@media (max-width: 650px) {
	#widget16 .item .content_video_text i {
		font-size			: 75px;
	}

	#widget16 .item.height2 .content_video_text i {
		font-size			: 75px;
		margin-top          : 10px;
	}
}

#widget16 .item .content_video_text h2{

	position				: relative;
	bottom					: 0;
	left					: 0;
	right					: 0;
	font-size				: 20px;
	margin-bottom			: 0;
}

@media (max-width: 1200px) {
	#widget16 .item .content_video_text {
		padding				: 15px;
	}

	#widget16 .item .content_video_text h2 {
		font-size			: 24px;
	}

	#widget16 .item .content_video_text h2{
		font-size			: 20px;
	}
}

@media (max-width: 992px) {
	#widget16 .item .content_video_text {
		padding				: 10px;
	}

	#widget16 .item .content_video_text h2 {
		font-size           : 17px;
	}

	#widget16 .item .content_video_text h2.bottom {
		font-size			: 17px;
		margin-bottom		: 0;
	}
}
@media (max-width: 768px) {
	#widget16 .item .content_video_text h2 {
		font-size			: 15px;

	}
}

@media (max-width: 650px) {
	#widget16 .item .content_video_text h2 {
		font-size			: 22px;
	}
	#widget16 .item .bottom{
		padding: 10px;
	}

}
#widget16 .date { 
	display:none;	
}

/*EM Design Adaptions*/
.em2021 #widget16 .height4_4 a div p.text_content {
	display:none;
}
.em2021 #widget16 {
	background-color: #EFEFEF !important;
	background-image: none;
	
}
.em2021 #widget16 h1.headline
{
	color: #00002D;
	text-align:left;
	padding-left: 20px;
}
.em2021 #widget16 .height4_4 a {
	border-radius: 15px;
	overflow:hidden;
	margin: 12px;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.56); 
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.56);
	background-size: 100%;
    background-position: center top;
}
.em2021 #widget16 .height4_4 a div {
	left: 0;
	bottom: 0;
	width: 100%;
	position: absolute;
	display: block;
	height: 22%;	
	background-color: #00002D;
	color: #fff;
	padding: 20px
}
.em2021 #widget16 .height4_4 a div .date{
	display:block;
	font-size: 14px;
	line-height: 14px;
	font-family: var(--generic-regular-font);
	color: rgba(255,255,255,0.7);   
    text-align: left;      
    top: 20px;
    position:absolute;
    left: 20px;	
}
.em2021 #widget16 .height4_4 a div h2 {
	font-size: 32px;
	line-height: 32px;	
	font-family: var(--generic-regular-font);
	color: #fff;   
    text-align: left;      
    bottom: 20px;
    position:absolute;
    left: 20px;
    width: calc(100% - 40px);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.em2021 #widget16 .height4_1 a {
	border-radius: 15px;
	overflow:hidden;
	margin: 12px;
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.56); 
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.56);	
	background-size: 33% auto;
	background-position: left top;
}
.em2021 #widget16 .height4_1 a div {
	right: 0;
	bottom: 0;
	width: 70%;
	position: absolute;
	display: block;
	height: 100%;	
	background-color: #00002D;
	color: #fff;
	padding: 20px;
}
.em2021 #widget16 .height4_1 a div .date {
	display: block;
	font-size: 14px;
	line-height: 14px;
	font-family: var(--generic-regular-font);
	color: rgba(255,255,255,0.7);   
    text-align: left;      
    bottom: 20px;
    position:absolute;
    left: 20px;	
}
.em2021 #widget16 .height4_1 a .bottom {
	left: auto;	
	position:absolute;
	left:30%;
	right: 0;
	height:100%;
	/*width:35%;*/
}
.em2021 #widget16 .height4_1 a .icon-block {
	left: auto;	
	position:absolute;
	left:65%;
	right: 0;
	height:100%;
	width:40%;
}
.em2021 #widget16 .item .content_video_text i {
	font-size: 100px;
	display: block;
	opacity: 0.3;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}
.em2021 #widget16 .item a.content_video_text:hover i {	
	opacity					: 0.7;
}

.em2021 #widget16 .height4_1 a div h2 {	
	font-size: 20px;
	line-height: 20px;
	font-family: var(--generic-regular-font);
	color: #fff;   
    text-align: left;      
    top: 20px;
    position:absolute;
    left: 20px;
    width: calc( 100% - 40px);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.em2021 #widget16 .height4_1 a div p.text_content {
	display:none;
}

.em2021 #widget16 .height4_4 .img-content,
.em2021 #widget16 .height4_4 .content_video_text {
	background-size:cover;	
}
.em2021 #widget16 .height4_1 .img-content,
.em2021 #widget16 .height4_1 .content_video_text
{
	background-size: 40% auto;
	background-position: left top;
}


#widget16 .item .bottom:after {
	display 						: block;
	position 						: absolute;
	content 						:'';
	top 							: 0;
	right 							: 0;
	bottom 							: 0;
	left 							: 0;
	-webkit-transition 				: all 0.5s ease-in-out 0s;
	-o-transition 					: all 0.5s ease-in-out 0s;
	transition 						: all 0.5s ease-in-out 0s;
	background 					    : #000074;
	background-image 				: linear-gradient(90deg, rgba(0,0,54,1) 0%, rgba(0,0,54,1) 50%,  rgba(0,0,54,1)  100%) !important;
	z-index 						: 1;
	opacity 						: 0;
}

@media all and (max-width: 1525px) {
	.em2021 #widget16 .height4_4 {		
		height: 575px !important;
	}
	.em2021 #widget16 .height4_4 a {		
		background-size: 105%;
	}
	.em2021 #widget16 .height4_1 {
		height: 143px !important;	
	}
	
}

@media all and (max-width: 1200px) {	
	.em2021 #widget16 .height4_1 a {
		background-size: 40% auto;		
	}
	.em2021 #widget16 .height4_1 a h2 {		
		top: 15px !important;
		font-size: 17px !important;
		line-height: 17px !important;
	}
	.em2021 #widget16 .height4_1 a.content_video_text  {
		background-size: 45% auto;
	}
	.em2021 #widget16 .height4_4 a {
		background-size: auto 80%;		
	}
	.em2021 #widget16 .height4_4 a h2 {
		font-size: 22px !important;
		line-height: 22px !important;
	}
}
@media all and (max-width: 992px) {	
	.em2021 #widget16 .height4_1 a {
		background-position: 0% 0%;
	}
	.em2021 #widget16 .height4_1 a {
		background-size: auto 165px;
	}	
	.em2021 #widget16 .height4_4 a {
		background-size: auto 100%;
	}
	.em2021 #widget16 .height4_1 a.content_video_text  {
		background-size: auto 210px;
	}		
}
@media (max-width: 650px) {

	.em2021 #widget16 .height4_4 {		
		height				: 190px !important;
	}
	.em2021 #widget16 .height4_1 {		
		height				: 190px !important;
	}	
	.em2021 #widget16 .height4_1 a {
		background-size: auto 220px;
	}
	.em2021 #widget16 .height4_4 a {
		background-size: auto 100%;
		background-position: left top;
	}
	.em2021 #widget16 .height4_4 a div {
		right: 0;
		bottom: 0;
		left: auto;
		top: auto;
		width: 74%;				
		height: 100%;			
	}
	.em2021 #widget16 .height4_1 a div {
		right: 0;
		bottom: 0;
		left: auto !important;
		top: auto;
		width: 74% !important;		
		height: 100%;			
	}
	
	.em2021 #widget16 .height4_1 a div h2 {		
		font-size: calc(22px + (35 - 22) * ((100vw - 350px) / (2400 - 350)));
		line-height: calc(24px + (35 - 24) * ((100vw - 350px) / (2400 - 350)));
		font-weight: bold;	
		color:#fff;
	}
	.em2021 #widget16 .height4_1 a div p {		
		font-size: calc(12px + (18 - 12) * ((100vw - 350px) / (2400 - 350)));
		line-height: calc(14px + (18 - 14) * ((100vw - 350px) / (2400 - 350)));
		font-weight: bold;	
		color:#fff;
	}
}

@media (max-width: 580px) {
	.em2021 #widget16 .height4_4 a div {		
		width: 70% !important;				
	}
	.em2021 #widget16 .height4_1 a div {		
		width: 70%  !important;		
	}
}
@media (max-width: 500px) {
	.em2021 #widget16 .height4_4 a div {		
		width: 100% !important;;				
	}
	.em2021 #widget16 .height4_1 a div {		
		width: 100% !important;;				
	}
	.em2021 #widget16 .height4_1 a .bottom {
		position:absolute;
		left: 0;
		top: 0;
		height: 100% !important;
		width: 100% !important;;
	}
	.em2021 #widget16 .height4_1 a .icon-block {
		position:absolute;
		left:50% !important;
		top: 0;
		height:100% !important;
		width:50% !important;
	}
}