baueradvance/httpdocs/files/theme/assets/scss/components/_elements.scss

.btn {
	margin: 0;
	padding: 0;
	a {
		@include button;
		transition: 0.3s;
		&:hover {
			background: $main-color;
			color: #fff;
			text-decoration: none;
		}
	}
}

a {
	.download-icon {
		display: inline-block;
		width: 36px;
		height: 20px;
		background-image: url(../img/download_allgemein_icon.svg);
		background-repeat: no-repeat;
		margin-left: 0.5rem;
	}
	&[href$=".pdf"] {
		.download-icon {
			background-image: url(../img/pdf_icon.svg);
		}
	}
}

.ce_text {
	ul, ol {
		display: inline-block;
		text-align: left;
		padding-left: 1rem;
	}
	.row {
		.image {
			width: 50%;
			.image_container {
				position: relative;
				background: $main-color;
				&.float-left {
					clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
					padding: 20px 25px 20px 20px;
					img {
						clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);	
					}
				}
				&.float-right {
					clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
					padding: 20px 15px 20px 20px;
					img {
						clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);					
					}
				}
			}
		}
		&.right {
			flex-direction: row-reverse;
		}
		.text-wrapper {
			position: relative;
			width: 50%;
		}
	}
	.float_above {
		position: relative;
		background-color: $main-color;
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		padding: 20px 25px 20px 0;
		img {
			clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);				
		}		
	}
	p {
		img {
			width: 100%;
			margin-bottom: 1rem;
			@media (min-width: 768px) {
				max-width: 300px;
				float: left;
				margin-right: 1rem;
			}
		}
	}
	.table {
		th, td {
			border-top: 1px solid $main-color;
		} 
	}
}

.ce_table {
	.table {
		max-width: 1050px;
		margin: 0 auto;
		th, td {
			border-top: 1px solid $main-color;
			@include futura-medium;
			font-size: size(20);
			color: $main-color;
			&.col_first {
				@include futura-bold;
			}
		}
		thead {
			th {
				border-bottom: 1px solid $main-color;
				background-color: $main-color;
				color: #fff;
			}
		}
	}
}

.ce_rsce_expandedText {
	h2 {
	font-size: size(56);
	line-height: size(54);
	text-align: center;
	margin-bottom: 2rem;
	@media (min-width: 576px) {
		font-size: size(80);
	}
		span {
			display: block;
			font-size: size(45);
			line-height: size(50);
			@media (min-width: 576px) {
				font-size: size(36);
			}
		}
	}
}

main .ce_youtube {
	max-width: 670px;
	margin: 4rem auto;
	.caption {
		max-width: 490px;
		@include futura-medium;
		text-align: center;
		font-size: size(20);
		margin: 0 auto;
		padding: 1rem 0;
	}
}

main .ce_downloads {
	ul {
		display: inline-block;
		margin: 0;
		padding: 1rem 2rem;
		background: $main-color;
		li {
			list-style-type: none;
			a {
			display: block;
			@include futura-bold;
			font-size: size(14);
			text-transform: uppercase;
			min-height: 0;
			border-bottom: 1px solid #fff;
			margin: 1rem auto;
			padding-bottom: 0.5rem;
			color: #fff;
			}
			&.ext-pdf {
				.download-icon {
					background-image: url(../img/pdf_icon.svg);
				}
			}
		}
	}
}

main .ce_hyperlink {
	.btn {
		display: inline-block !important;
		@include button;
		transition: 0.3s;
		&:hover {
			background: $main-color;
			color: #fff;
			text-decoration: none;
		}
	}
}

main .ce_image {
	max-width: 885px;
	margin-bottom: 3rem;
	.image_container {
		position: relative;
		background-color: $main-color;
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		padding: 20px 25px 20px 0;
		img {
			clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
			max-height: 500px;
			object-fit: cover;
		}
	}
}


.introtext {
	@include futura-medium;
	font-size: size(20);
	line-height: size(29);
	text-transform: uppercase;
	max-width: 710px;
	margin: 0 auto 3rem auto;
}

.team {
	font-size: size(14);
	line-height: size(19);
	margin-bottom: 3rem;
	strong {
		display: block;
		font-weight: 300;
		text-transform: uppercase;
		font-size: size(16);
		margin: 1rem 0;
	}
	span {
		display: block;
	}
}

.hand-point {
	@media (min-width: 1200px) {
	background-image: url(../img/hand_point_transparent_2.svg);
	background-repeat: no-repeat;
	background-position: right center;
	}
}

.mod_login {
	min-width: 85px;
	max-width: 300px;
	margin: 0 auto;
	@media (max-width: 575.98px) {
		min-width: auto;
	}
	h2 {
		text-align: center;
	}
	button {
		width: 100%;
	    font-family: futura-pt, sans-serif;
	    font-weight: 800;
	    font-style: italic;
	    font-size: 0.875rem;
	    line-height: 1.875rem;
	    text-transform: uppercase;
	    color: #0000dc !important;
	    display: block;
	    border: 2px solid #0000dc;
	    border-radius: 6px;
	    height: 33px;
	    padding: 0 1rem;
	    transition: 0.3s;
	    background-color: #fff;
	    @media (max-width: 575.98px) {
	    	text-indent: -9999px;
	    	background-image: url(../img/logout.svg);
	    	background-repeat: no-repeat;
	    	border: none;
	    	border-radius: 0;
	    	background-color: transparent;
	    	height: 30px;
	    }
	    &:hover {
		    background: #0000dc;
		    color: #fff !important;
		    text-decoration: none;
	    }
	}
}