@charset "UTF-8";
// Morten Mitchell Larød 2019

@import 'vars';

.article-list {
	.previewing {
		article {
			.text-container {
			    align-content: space-around;
			    .kicker {
					margin-bottom: $gap-small;    
			    }
			}
		}
	}
}

.grid-main-wysiwyg-teaser {
	li {
		margin-bottom: 0 !important;
		padding: 16px 0;
		border-bottom: 1px solid #222;
		&:last-child {
			border: 0;
		}
		.prev-kicker {
			&:before {
			content: "➤ ";
		    font-weight: 400;
		    color: rgb(221, 42, 48);
		    font-size: 0.75rem;
			}
		}
	}
}
.wysiwyg {
	li {
		&.default {		
			.prev-kicker {
				&:before {
				content: "➤ ";
			    font-weight: 400;
			    color: rgb(221, 42, 48);
			    font-size: 0.75rem;
				}
			}
		}
	}
}
.wysiwyg {
	li {
		&.plus {		
			.prev-kicker {
				&:before {
				content: url('http://next.mpt-sandbox.com/cms/img/plus-small.png');
				padding-right: 8px;
				}
			}
		}
	}
}		
.wysiwyg {
	.teaser-info,
	.lock {
		display: none;
	}
	.wysiwyg-content {
		display: flex;
		justify-content: space-evenly;
		h3 {
			@include headline-5;
			margin: 0 0 8px 0;
			padding-bottom: 4px;
		}

		.mobile {
			width: 375px;
			margin: $gap-small;
			ol {
				li {
					margin-bottom: 6px;
					clear: left;
					&.article {
						.text-container {
							.prev-main-title {
								font-size: 22px !important;
							}
						}
					}
					&.w50 {
						width: 49%;
						clear: none;
						.text-container {
							.prev-main-title {
								font-size: 16px !important;
							}
						}
					}
					&.img-left {
						.article-container {
							flex-direction: row;
							.text-container {
								.prev-main-title {
									font-size: 20px !important;
								}
							}
							.img-container {
								width: 40%;
								padding-bottom: 30%
							}
						}
					}
				}
	
			}
		}
		.desktop {
			width: 664px;
			margin: $gap-small;
			ol {
				li {
					margin-bottom: 6px;
					clear: left;
					&.top-article {
						.text-container {
							.prev-main-title {
								font-size: 52px !important;
							}
						}
					}
					&.w50 {
						width: 49%;
						clear: none;
						.text-container {
							.prev-main-title {
								font-size: 20px !important;
							}
						}
					}
					&.img-left {
						.article-container {
							flex-direction: row;
							.text-container {
								.prev-main-title {
									font-size: 32px !important;
								}
							}
							.img-container {
								width: 40%;
								padding-bottom: 30%
							}
						}
					}
				}
	
			}
		}
		
		article {
			display: flex;
			flex-direction: column;
			position: relative;
		    border-radius: 0;
		    border: 1px solid #e8e8e8;;
			transition: all .20s ease-in;
			background-color: #fff;
		    .article-container {
			    display: flex;
			    flex-direction: column;
		    }
			.img-container {
				position: relative;
			    width: 100%;
			    padding-bottom: 44.5%;
			    flex: none;
				border-radius: 0;
				img {
					position: absolute;
					object-fit: cover;
					object-position: 50% 30%;
					width: 100%;
					height: 100%;
					max-width: 100%;
				    flex: 1;
				    border-radius: 0;
				}
			}
			.text-container {
				display: flex;
			    flex-direction: row;
			    flex-wrap: wrap;
			    align-content: space-between;
				padding: $gap-tiny $gap-small;
				.titles {
					display: flex;
					flex-direction: column-reverse;	
					.prev-main-title {
						font-family: verdana;
						font-size: 18px;
						line-height: 1;
					    font-weight: bold;
					    margin: 0 0 $gap-tiny 0;
					    resize: none;
					    border: none;
					    width: 100%;
					    color: $fc-darkest;
					}
					.prev-kicker {
						font-family: arial;
						line-height: 1;
					    margin: 0;
					    resize: none;
					    border: none;
					    width: 100%;
					    color: $fc-darkest;
					}
					.prev-main-title,
					.prev-kicker {
						.red {
							color: $c-error;
						}
						.bold {
							font-weight: 600;
						}
						.italic {
							font-style: italic;
						}
						.underline {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.desktop {
			.text-container {
				padding: 8px 16px 8px 16px !important;
				.prev-main-title {
					padding-bottom: 8px;
					font-size: 46px !important;
				}
				.prev-kicker {
					font-size: 16px !important;
				}
			}
		}
	}
}





































._1CeNw {
    box-sizing: border-box;
    width: 40px;
    padding-left: 40px;
    font-size: 11px;
    line-height: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1px;
    color: #fefefe;
    white-space: nowrap;
    background-color: rgba(0,0,0,.6);
    border-radius: 20px;
    overflow: hidden;
}
._2p0n3 {
    padding-left: 4px;
    padding-right: 16px;
}
._1_3zH {
    font-weight: 400;
    color: hsla(0,0%,100%,.6);
}
._2MTSp {
    position: relative;
}
._1lpmp {
    position: absolute;
    z-index: 100;
    bottom: 8px;
    left: 8px;
}
._3mZe0 {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgOCAxMCI+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBmaWxsUnVsZT0iZXZlbm9kZCIgZD0iTS44ODMgOS4wMThDLjM5NSA5LjI4NCAwIDkuMDU0IDAgOC41MDJWMS40OThDMCAuOTQ3LjM5OC43MTcuODgzLjk4Mmw2LjQ4NCAzLjUzNmMuNDg4LjI2Ni40ODUuNjk5IDAgLjk2NEwuODgzIDkuMDE4eiIvPgo8L3N2Zz4=);
    background-position: 11px;
    background-repeat: no-repeat;
    background-size: 12px;
    border-radius: 32px;
	background-color: #dd2a30;
    color: #fff;
}