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, 81% 100%, 0% 100%);
		padding: 20px 25px 20px 0;
		img {
			clip-path: polygon(0 0, 100% 0, 81% 100%, 0% 100%);
			max-height: 500px;
			object-fit: cover;
		}
	}
	&.no-oblique {
		.image_container {
			clip-path: none;
			img {
				clip-path: none;
			}
		}
	}
}

main .ce_accordion {
	margin: 2rem 0;
	.toggler {
		position: relative;
		@include futura-bold;
		font-size: size(20);
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		background-color: #002887;
		padding: 1rem;
		.ui-icon {
		    position: absolute;
		    top: calc(50% - 4px);
		    right: 1rem;
    		transform: rotate(-45deg) translateY(-50%);
		    border: solid #fff;
		    border-width: 0 2px 2px 0;
		    width: 24px;
		    height: 24px;
		    transition: 0.1s;
		}
		&.active {
			.ui-icon {
				top: calc(50% - 8px);
				transform: rotate(45deg) translateY(-50%);	
				right: 2rem;
			}
		}
	}
	.accordion {
		padding-top: 2rem;
	}
}

main .fade-slider {
	position: relative;
	max-width: 885px;
	margin-bottom: 3rem;
	.slick-list {
		position: relative;
		background-color: #0000dc;
		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;
		}
	}
	.slick-arrow {
	  	  position: absolute;
	  	  bottom: 0;
		  border: solid #0000dc;
		  border-width: 0 2px 2px 0;
		  display: inline-block;
		  padding: 2px;
		  background: transparent;
		  text-indent: -9999px;
		  width: 17px;
	      height: 17px;
	      z-index: 99;
	      @media (min-width: 992px) {
	      	top: 50%;
	      	bottom: auto;
	      }
		  &.slick-prev {
			transform: rotate(135deg) translateX(-50%);
			-webkit-transform: rotate(135deg) translateX(-50%);
			right: 15px;
			@media (min-width: 992px) {
				right: 1rem;
			}
		  }
		  &.slick-next {
			transform: rotate(-45deg) translateY(-50%);
			-webkit-transform: rotate(-45deg) translateY(-50%);
			right: -15px;
			@media (min-width: 992px) {
				right: -3rem;
			}
		  }
	}
}


.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;
	}
}


.mod_login {
	min-width: 85px;
	max-width: 300px;
	margin: 0 auto;
	@media (max-width: 575.98px) {
		min-width: auto;
	}
	h2 {
		text-align: center;
	}
	button,
	.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;
	    }
	}
}