/*
* Created by CeLa
* Copyright by CeLa
* Main Theme CSS
*/

/*
 * Default styles
 */

@import url('fonts.css');


:root {
	--pri-font: 'Open Sans';
	--sec-font: 'Brittannia';
	
	--base-color: #393939;
	--pri-color: #555643;
	--sec-color: #edeedd;
	--4th-color: #c3c790;
}

/*
 * Base styles
 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	color: var(--base-color);
	font-family: var(--pri-font);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .5px;
	line-height: 2;
}

/*
 * Headline styles
 */
.sppb-section.heading .sppb-section-title .sppb-title-heading {
	font-family: var(--sec-font);
	font-size: 5rem;
	overflow: hidden;
	text-align: center !important;
}
.sppb-section.heading .sppb-section-title .sppb-title-heading:before,
.sppb-section.heading .sppb-section-title .sppb-title-heading:after {
	background-color: var(--sec-color);
	content: '';
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
}
.sppb-section.heading .sppb-section-title .sppb-title-heading:before {
	right: 0.5em;
	margin-left: -50%;
}
.sppb-section.heading .sppb-section-title .sppb-title-heading:after {
	left: 0.5em;
	margin-right: -50%;
}
/* Image content heading */
.sppb-addon-image-content.heading .sppb-image-content-subtitle {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 1.5px;
}
.sppb-addon-image-content.heading .sppb-image-content-title {
	font-family: var(--sec-font);
	font-size: 4rem;
	line-height: 1;
	display: block;
	width: 100%;
	overflow: hidden;
}
.sppb-addon-image-content.heading .sppb-image-content-title:after {
	background-color: var(--sec-color);
	content: '';
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 100%;
	left: 30px;
	margin-right: -50%;
}

/*
 * Font styles
 */
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
/* Font size */
.font-xs {
	font-size: .875rem;
}
.font-sm {
	font-size: 1rem;
}
.font-md {
	font-size: 1.5rem;
}
.font-lg {
	font-size: 2rem;
}
.font-xl {
	font-size: 3rem;
}
/* Font weight */
.font-300 {
	font-weight: 300;
}
.font-400 {
	font-weight: 400;
}
.font-500 {
	font-weight: 500;
}
.font-600 {
	font-weight: 600;
}
.font-700 {
	font-weight: 700;
}
.font-800 {
	font-weight: 800;
}
.font-900 {
	font-weight: 900;
}
.pri-color {
	color: var(--pri-color);
}
.sec-color {
	color: var(--sec-color);
}

/*
 * Content sizes
 */
.sppb-column.content-xs,
.sppb-column.content-sm,
.sppb-column.content-md,
.sppb-column.content-lg,
.sppb-column.content-xl {
	margin: 0 auto;
}
.sppb-column.content-xs {
	max-width: 480px;
}
.sppb-column.content-sm {
	max-width: 600px;
}
.sppb-column.content-md {
	max-width: 768px;
}
.sppb-column.content-lg {
	max-width: 992px;
}
.sppb-column.content-xl {
	max-width: 1140px;
}

/*
 * Bootsrap overrides
 */
.sppb-btn-custom i {
	display: inline-block;
	transition: all ease-in-out .2s;
}
.sppb-btn-custom:hover i {
	transform: translateX(4px);
}

/*
 * Framework styles
 */
@media (min-width: 1200px) {
    .container,
    .sppb-row-container {
        max-width: 1400px !important;
    }
}
@media (min-width: 992px) {
	#offcanvas-toggler {
		display: none !important;
	}
}
.offcanvas-overlay {
	display: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 
 * Header
 */
#sp-header {
	height: auto;
	box-shadow: inherit;
	border-bottom: 1px solid var(--sec-color);
	background-color: #f9f9f4;
}
@media (max-width: 991px) {
	#sp-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

#sp-header .logo-image,
#sp-header .logo {
	height: auto;
}
#sp-header .logo {
	padding: 15px;
	max-width: 260px;
}
#sp-header .logo:after {
	content: 'macht was';
	white-space: nowrap;
	text-transform: uppercase;
	font-weight: 800;
	font-size: .875rem;
	opacity: 0;
	transform: translateX(-100%);
	transition: all ease-in-out .25s;
}
#sp-header .logo:hover:after {
	opacity: 1;
	transform: translateX(0);
}

/*
 * Navbar styles
 */
#sp-menu nav.sp-megamenu-wrapper ul.sp-megamenu-parent {}
ul.sp-megamenu-parent > li > a {
	font-size: 1.25rem;
	font-weight: 300;
	text-transform: uppercase;
}
ul.sp-megamenu-parent > li > a,
ul.sp-megamenu-parent > li > a:visited {
	color: var(--pri-color);
}
ul.sp-megamenu-parent > li > a:hover,
ul.sp-megamenu-parent > li > a:active,
ul.sp-megamenu-parent > li > a:focus {
	color: var(--pri-color);
	opacity: .75;
}

/*
 * Footer styles
 */
#sp-footer {
	color: #555643;
	background-image: url(../images/splash-footer.png);
	background-repeat: no-repeat;
	background-position: 90% 50%;
}
.footer-brand {}
.footer-brand .sppb-addon-single-image-container {
	width: 100%;
	text-align: center;
}
.footer-brand .sppb-addon-single-image-container img {
	max-width: 240px;
	height: auto;
}
.footer-navbar {}
@media(min-width: 767px){
	.footer-navbar {
		text-align: center;
	}
}
@media(min-width: 768px){
	.footer-navbar {
		text-align: right;
	}
}
.footer-navbar ul.menu {
	display: block !important;
	width: 100%;
	text-align: center;
}
.footer-navbar ul.menu li a,
.footer-navbar ul.menu li a:visited {
	color: #555643 !important;
}
.footer-navbar ul.menu li a:hover,
.footer-navbar ul.menu li a:active,
.footer-navbar ul.menu li a:focus {
	color: #707157 !important;
}
.social-links-row > .sppb-column-addons {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
ul.social-navbar {
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline-flex;
	gap: 15px;
	justify-content: center;
}
ul.social-navbar li a,
ul.social-navbar li a:visited {
	color: #555643 !important;
}
ul.social-navbar li a:hover,
ul.social-navbar li a:active,
ul.social-navbar li a:focus {
	color: #707157 !important;
}
ul.social-navbar li a {
	font-size: 2.5rem;
}

.footer-copyrights {}
@media(max-width: 991px){
	.footer-copyrights {
		margin-bottom: 15px;
		text-align: center;
	}
}
.footer-contact a {
	transition: all ease-in-out .25s;
}
.footer-contact a,
.footer-contact a:visited {
	color: var(--pri-color) !important;
}
.footer-contact a:hover,
.footer-contact a:active,
.footer-contact a:focus {
	color: var(--pri-color) !important;
	opacity: .75;
}

.rights-section {
	border-top: 1px solid #b6ba81;
}

/*
 * Carousel styles
 */
.main-carousel {}
.main-carousel .sppb-carousel-extended-list {
	border: 3px solid #c3c790;		
}
.main-carousel .sppb-carousel-extended-item img {
	height: auto !important;
	border-radius: inherit;
}
@media(max-width: 991px){
	.main-carousel .sppb-carousel-extended-item {
		position: relative;
		margin: 0 !important;
		min-height: 500px;
		z-index: 98;
	}
	.main-carousel .sppb-carousel-extended-item img {
		object-fit: cover;
		object-position: top center;
		width: 100%;
		height: auto;
		max-height: 500px;
		min-height: 500px;
	}
}

.main-carousel .sppb-carousel-extended-dots {
	z-index: 1001 !important;
}

@media(max-width: 600px){
	.main-carousel .sppb-carousel-extended-nav-control .next-control {
		margin-right: 15px !important;
	}
	.main-carousel .sppb-carousel-extended-nav-control .prev-control {
		margin-left: 15px !important;
	}
}
.slide-top-center {}
.slide-center-center {}
.slide-bottom-center img {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}
@media(max-width: 575px){
	.slide-bottom-center img {
		transform: translate(-50%,-20%) !important;
	}
}


/*
 * Framed image
 */
.frame-content {
	position: relative;
	z-index: 98;
}
.frame-content .sppb-image-outer {
	position: relative;
	margin-bottom: 0; /* Bootstrap fix */
	z-index: 100;
}
.frame-content .sppb-image-outer:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(255,255,255,1);
	z-index: 101;
	transform: translate(-30px, -30px);
}
.frame-content .sppb-image-outer img {}
.frame-content .sppb-content-custom {
	padding: 45px;
	background-color: #fff;
}
@media(min-width: 992px){
	.frame-content.frame-left .sppb-image-outer {
		margin-left: 10%;
	}
	.frame-content.frame-right .sppb-image-outer {
		margin-right: 10%;
	}
	.frame-content .sppb-content-custom {
		position: absolute;
		top: 50%;
		padding: 45px;
		max-width: 480px;
		background-color: #fff;
		z-index: 105;
		transform: translateY(-50%);
	}
	.frame-content.frame-left .sppb-content-custom {
		left: 0;
	}
	.frame-content.frame-right .sppb-content-custom {
		right: 0;
	}
}

/*
 * Split image content
 */
@media(min-width: 992px){
	.split-image-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0;
	}	
}
.split-image-content .sppb-image-outer {
	margin-bottom: 0; /* Bootstrap fix */
	position: relative;
	z-index: 98;
}
@media(max-width: 991px){
	.split-image-content .sppb-image-outer:after {
		content: '';
		position: absolute;
		top: 30px;
		right: 30px;
		bottom: 30px;
		left: 30px;
		border: 1px solid rgba(255,255,255,.5);
		z-index: 101;
		transition: all linear .25s;
	}
	.split-image-content:hover .sppb-image-outer:after {
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
	}
}
@media(min-width: 992px){
	.split-image-content .sppb-image-outer img {
		object-fit: cover;
		object-position: center;
		width: 100%;
		height: 100%;
	}
}
.split-image-content .sppb-content-custom {
	padding: 100px 60px;
}
@media(min-width: 1399px){
	.split-image-content .sppb-content-custom {
		padding-right: 60px;
	}
}
@media(min-width: 1400px){
	.split-image-content .sppb-content-custom {
		padding-right: calc(50vw - 700px);
	}
}

/*
 * Portfolio section
 */
.portfolio-section {
	background-image: url(../images/splash-content-light-green.png);
	background-repeat: no-repeat;
	background-position: 5% 5%;
}

/*
 * Attributation
 */
@media(max-width: 991px){
	.attributation {
		margin-top: 30px;
	}
}
.attributation > .sppb-addon-content {
	text-align: center;
}
.attributation > .sppb-addon-content span {
	font-size: 12px;
	display: block;
}
.attributation > .sppb-addon-content span .fa {
	color: #b00000;
	margin: 0 3px;
	font-size: 10px;
	animation: pound 0.45s infinite alternate;
	-webkit-animation: pound 0.45s infinite alternate;
}
.attributation > .sppb-addon-content a {
	color: #000000;
	text-decoration: none;
}
.attributation > .sppb-addon-content a img {
	margin: 0 auto;
	max-width: 40px;
	height: auto;
}
@-webkit-keyframes pound {
  to {
	transform: scale(1.2);
  }
}
@keyframes pound {
  to {
    transform: scale(1.2);
  }
}