/*** STAGE ***/
#stage {
	background: rgb(var(--darkblue))center center / cover no-repeat;
	height:40vh;
	max-height: 31em;
	min-height: 31em;
	overflow: hidden;
}
#stage .bx-controls {
	display: none;
}

/*** SUBLINES ***/
.subline, h3.subline {
	font-weight: 600 !important;
	font-size:1.5em;
	color: rgb(var(--darkblue));
	margin-top: 0.75em !important;
	margin-bottom:1em;
	letter-spacing: -0.015em;
}
.subline, h3.subline.black {
	color: rgb(var(--black));
}
.subline, h3.subline.bold {
	font-weight: 700 !important;
}
.subline::before {
	content:'';
	display:block;
	width:5em;
	border-bottom:solid 0.0625em rgb(var(--darkblue));
	margin: -0.75em auto 0.75em !important;
	line-height: 1;
}
h2 + h3.subline::before {
	margin: 0 auto 0.625em !important;
}

/*** MAINFEATURES ***/
#mainfeatures {
	text-align:center;
	padding-top:0;
	padding-bottom:0;
	line-height: 0;
}
#mainfeatures > .content {
	max-width:104em;
}
#mainfeatures .h1.mega {
	position: relative;
	z-index:2;
}
#mainfeatures .h1.mega strong {
	font-size:1.35em
}
#mainfeatures .h1.mega span {
	display:block;
	font-weight: var(--light)
}
.en #mainfeatures .h1.mega span {
	font-size:0.8em;
	margin-top:0.25em;
}
#mainfeatures .h1.mega::before {
	position: absolute;
	z-index: -1;
	color: rgba(var(--darkblue),0.95);
	font-size: 200%;
	transform: translate(-160%,-10%);
	opacity: 1;
}
#mainfeatures h3.subline {
	font-size:1.625em;
}
#mainfeatures h3.subline::before {
	border-width: 1px;
}
#mainfeatures .innercol {
	margin-top: 5vw !important;
	margin-left: -1.75em;
	margin-right: -1.75em;
}
#mainfeatures .innercol .col {
	display:inline-block;
	float:none;
	/*! animation-delay: 500ms; */
	animation-duration: 2000ms; /*! */
}
#mainfeatures .innercol .col:nth-child(2) {
	display:inline-block;
	margin-right:0em
}
#mainfeatures .innercol .box {
	padding:0;
	margin:0.25em;
}
#mainfeatures .innercol .item {
	display:block;
	position:relative;
	background: rgba(var(--grey)) center bottom / 100% no-repeat;
	padding:0;
	padding-top: 45%;
	min-height:15em;
	text-align:left;
	background-image:url("https://www.capital-baustoffe.de/subCave0717A/wp-content/uploads/2021/08/01-Sortiment01.jpg");
	transition: all 250ms ease-in-out 200ms;
}
#mainfeatures .innercol .item::before {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0.95;
	background: rgba(var(--white),0.25);
	mix-blend-mode: color;
	transition: all 250ms ease-in-out 100ms;
}
#mainfeatures .innercol .item:hover {
	background-size: 110%
}
#mainfeatures .innercol .item:hover::before {
	opacity:0;
}
#mainfeatures .item p {
	display:inline-block;
	position:absolute;
	bottom:1em;
	right:0;
	color: rgb(var(--white));
	font-size:1.325em;
	font-weight: var(--medium);
	line-height: 1.25;
	text-align:right;
	filter: drop-shadow(0 0em 1em rgba(var(--white),0.35)) drop-shadow(0 0em 2px rgba(var(--white),0.5));
}
#mainfeatures .item p span {
	float:right;
	clear:both;
	background: rgb(var(--darkblue));
	padding:0.125em 0.5em;
	transition: all 250ms ease-in-out 100ms;
}
#mainfeatures .item:hover p span {
	/*background: rgb(var(--pink)) !important;*/
}
#mainfeatures .item.pink p span {
	background: rgb(var(--pink));
}
#mainfeatures .item.orange p span {
	background: rgb(var(--orange));
}
#mainfeatures .item.blue p span {
	background: rgb(var(--blue));
}
#mainfeatures .item.red p span {
	background: rgb(var(--red));
}
#mainfeatures .item.green p span {
	background: rgb(var(--green));
}
#mainfeatures .item.darkblue p span {
	background: rgb(var(--darkblue));
}
#mainfeatures .item p span + span {
}
#mainfeatures .item h3 {
	position: absolute;
	top: 0em;
	left: 0em;
	font-size: 1em;
	padding: 0em 0.5em 0.25em 0.25em;
	text-transform: uppercase;
	color: rgb(var(--darkblue));
	background: rgb(var(--white));
	font-weight: var(--extrabold);
	opacity:0;
	transition: all 250ms ease-in-out 100ms;
}
#mainfeatures .innercol .item:hover h3 {
	opacity:1;
	font-size:1.25em;
	/*color: rgb(var(--pink));*/
}
@media(max-width: 767px){
	#mainfeatures .innercol {
		margin-left: -1em;
		margin-right: -1em;
	}
}
@media(max-width:550px){
	#mainfeatures .h1.mega {
		margin-top:1.75em;
		font-size: calc(1em + 3vw);
	}
	#mainfeatures .h1.mega::before {
		left: 50%;
		transform: translate(-50%,-110%);
	}
	#mainfeatures h3.subline {
		font-size:1.5em;
	}
}

/*** QUICKTEASER ***/
#quick {
	padding-bottom: 1vw;
}
#quick .content {
	max-width: 77em;
}
#quick #quickteaser {
	margin-top:-5.5em;
}
#quick #quickteaser > .col .box {
	background: rgb(var(--white));
	box-shadow: 0 0 0.5em rgba(var(--black), 0.35);
	min-height: 10.5em;
}
#quickteaser .box {
	padding:0.75em 0.5em 0.5em 1.25em !important;
	!important;
	position:relative;
	z-index: 1;
	border-left: solid 1.25em rgba(var(--pink));
	border-radius:0.25em;
}
#quickteaser .berater .box {
	border-color: rgba(var(--blue)) !important;
}
#quickteaser .sortiment .box {
	border-color: rgba(var(--orange)) !important;
}
#quickteaser .standort .box {
	border-color: rgba(var(--green)) !important;
}

#quickteaser .marker {
	position:absolute;
	right:0.5em;
	margin:0;
}
#quickteaser .marker::before {
	margin:0;
	width:auto;
	font-size:2.5em;
	color: rgba(var(--darkblue),0.75);
	text-shadow: 0 0 0px rgba(var(--white))
}
#quickteaser .marker.icon_sortiment::before {
	transform-origin: center;
	transform: translate(0,0.05em) scale(0.8);
}
#quickteaser .head h2 {
	font-size:1.5em;
	font-weight:700;
}
#quickteaser .head h2 span {
	display:block;
	font-size:0.75em;
	line-height: 1;
	font-weight:var(--normal);
}
#quickteaser .desc {
	margin-top:0.5em;
	color: rgb(var(--black),0.8)
}
#quickteaser .standort .desc {
	margin-top:0.75em;
	color: rgb(var(--black),0.8)
}
#quickteaser .desc p + p {
	margin-top:0.5em !important;
	;
}
#quickteaser .select_wrapper {
	margin-top:0.5em !important;
}
#quickteaser select {
	color:rgb(var(--black),0.8);
	background-color: rgba(var(--white));
	box-shadow: 0 0 0.25em rgb(var(--black),0.35);
	border-radius: 0.25em;
	font-size: 1em;
	font-weight: 800;
	max-width:99%;
	margin-left:-0.25em;
	border: none;
	padding: 0.75em 0.75em 0.75em;
}
#quickteaser .desc .button {
	margin-top:0.5em;
	padding:0.5em
}
#quickteaser .desc a:not(.button) {
	margin-top:0.75em;
	color: rgb(var(--back),0.8);
	font-weight: var(--normal);
	font-size:0.9em;
	display: block;
}

/*** SERVICE ***/
#service {
	padding-top: 1vw;
	padding-bottom: 4vw;
}
#service > .content {
	max-width:70em;
}

#service h2::before {
	width: 1em;
	font-size: 2em;
	margin-left:-1em;
}
#service #teaser {
	margin-top:2em !important;
}
#service #teaser .col .box {
	background: rgb(var(--darkblue));
	color: rgb(var(--white));
	min-height: 10em;
	box-shadow: 0 0.125em 0.25em rgba(var(--black), 0.35);
	margin:1em
}
#service #teaser .img {
	margin: -0.5em -0.5em 0;
	max-height: 15em;
	overflow: hidden;
}

#service #teaser .button {
	margin:0.75em 0 1.25em !important;
}
#service #teaser h3 {
	font-weight:800;
}

/*** COMPANY ***/
#company h2.icon_signet_simple::before {
	margin-left:-1.25em;
}
#company h3 {
	/*! font-weight: 600; */
	/*! color: rgb(var(--darkblue)); */
	/*! font-size:1.5em; */
	/*! margin-top:0.5em !important; */
}
#company p {
	max-width: 45em;
	margin: 0 auto;
}
#company::before {
	content: '';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-color: rgba(var(--darkblue),0.3);
}
#company.parallax {
	margin: 0 auto;
	padding-bottom: 10vw;
	position: relative;
	width: auto;
	padding-top: 10vw;
	max-height: none;
	min-height: 0;
}
#company.parallax > .content {
	position: relative;
	left:auto;
	right:auto;
	width: 100%;
	max-width: 74em;
	margin: 0 auto !important;
	transform: none;
}
#company.parallax .box {
	background-color: rgba(var(--white), 0.85);
	min-height: 3rem;
	margin: 0 auto !important;
	max-width: 55em;
	padding:2em !important;
}
@media(max-width: 767px){
	#company.parallax .box {
		margin: 0 1.5em !important;
	}
}

/*** KARRIERE ***/
#karriere {
	position: relative;
	padding-top: 5vw;
	padding-bottom: 4vw;
}
@media(min-width:768px) {
	#karriere .tile .col.span1-2 {
		display: table-cell;
		float: none;
	}
	#karriere .tile .col.span1-2.image {
		width:60%;
		background-position: 30%;
		background-size:cover;
		position: relative;
		z-index: 0;
	}
	#karriere .tile .col.span1-2.image.animated {
		opacity:1;
	}
	#karriere .tile .col.span1-2.desc {
		width: 40%;
		z-index: 1;
		position: relative;
	}
	#karriere .tile .col.desc > .box {
		max-width: calc(30rem + 27%);
		margin-left: 0;
		margin-top: 3vw !important;
		margin-bottom: 3vw;
	}
	#karriere .tile .col.desc.wpb_start_animation > .box {
		margin-right: -45%;
		transition:margin-right 500ms ease 500ms;
		float:right;
	}
}
#karriere .tile .image {
	min-height: 70vw !important;
}
#karriere .tile .col.desc > .box {
	padding: 3em 3em 3em 2em !important;
	position: relative;
	color: rgb(255,255,255);
	margin-top: 0;
}
#karriere .desc .infobox {
	opacity:0;
}
#karriere .infobox .cat {
	font-size:1.25em;
	margin-bottom:-0.5em
}
#karriere .infobox .cat::before {
	font-size:1.5em;
}
#karriere .tile .col.desc h2 {
	-webkit-hyphens: none !important;
	hyphens: none !important;
	font-size:2.75em
}
#karriere .tile .col.desc h2 .upper {
	display: block;
}
#karriere .tile .col.desc > .box::after {
	content: "";
	top: 0;
	bottom: 0;
	right: 0%;
	background: rgba(var(--darkblue),0);
	position: absolute;
	width: 200vw;
	z-index: -1;
	display: block;
}
#karriere .tile .col.desc > .box::before {
	content: "Jobs!";
	position: absolute;
	right: 40%;
	z-index: 1;
	font-size: 14em;
	opacity: 1;
	font-weight: 900;
	line-height: 1.5;
	color: rgb(var(--darkblue));
	text-transform: uppercase;
	letter-spacing: -0.035em;
}
#karriere .image.animated {
	animation-delay:750ms;
	animation-duration:1500ms;
}
#karriere .desc.animated {
	animation-delay:750ms;
	animation-duration:1500ms;
}
#karriere .desc.animated .infobox {
	transition:all 750ms ease 1500ms;
	opacity:1;
	background: none;
}
#karriere .desc.animated .box::before {
	transition: all 650ms ease 1250ms, right 1000ms cubic-bezier(.76,.22,.53,1) 50ms;
	opacity: 0.7 !important;
	right: calc(100% - 0.75em) !important;
	transform: rotate(-90deg) !important;
	color: rgb(var(--green3)) !important;
}
#karriere .desc.animated .box::after {
	transition: all 650ms ease 1000ms;
	background: rgb(var(--green)) !important;
}
@media(max-width: 767px){
	#karriere .tile .col.desc > .box {
		padding: 3em 0.5em 3em 1em !important;
		margin:0;
	}
	#karriere .tile .image {
		background-size: cover;
	}
	#karriere .desc.animated .box::before {
		opacity: 0.3 !important;
		right: auto !important;
		left:0;
		top:15%;
		transform: rotate(-90deg) translate(0%,-75%) !important;
	}
}

/*** PRODUCER ***/
#producers {
	padding-top:0
}
#producers h2::before {
	width:2em;
	font-size:1.5em;
	vertical-align:-0.15em;
}
#producers .bx-wrapper .bx-pager.bx-default-pager a > * {
	min-width: 1.5em;
}
@media(max-width:767px){
	#producers h2 {
		font-size: 1.75em;
		margin-top:-0.5em;
		margin-bottom:1em:
	}
	#producers .bx-wrapper {
		margin-top: 1em !important;
		margin-bottom: 1em;
	}
	#producers .bx-wrapper .bx-pager, #producers .bx-wrapper .bx-controls-auto {
		bottom: 2rem;
	}
	#producers .bx-wrapper .bx-pager.bx-default-pager a > * {
		min-width: 0.5em;
	}
	#prodslider .slide.item.producer img {
		margin: 0 2%;
		width: calc(200% / 6 - 5% );
	}
}

/*** LOCATION ***/
#location {
	background: rgba(var(--blue),0.2);
	padding-top: 4vw;
}
#location h2 {
	color: rgb(var(--black));
	margin-bottom:1em;
	position:relative;
}
#location h2::before {
	font-size:6em;
	color: rgb(var(--white));
	position:absolute;
	z-index: -1;
	margin:0;
	top:-0.25em;
	left:-0.5em;
}
#location h2 strong {
	color: rgb(var(--darkblue))
}
#locationdesc {
	width:60%;
	position: relative;
	z-index: 1
}
#locationmap {
	width:40%;
}
#location .item {
	margin-top:1em !important;
	margin-bottom:0.5em;
	padding-right:1em;
}
#location .item h3 ~ p {
	margin-top:0.5em !important;
	background: rgba(var(--white));
	padding:0.5em;
	background: rgba(var(--white), 0.65);
	font-weight: var(--medium);
}
#location .item.address span.label {
	display: inline-block;
	margin-right:0.5em;
	min-width:4em;
}
#location .item.address span.value,
#location .item.officehour span.value {
	white-space: nowrap;
}
@media(max-width: 1100px){
	#location .item.address span.label.email {
		display: none;
	}
}
#location .item.payment ul {
	margin:0.5em 0 0 -0.25em !important;
	padding:0;
	list-style: none;
}
#location .item.payment ul li {
	display: inline-block;
	margin:0.25em 0.25em
}
#location .item.payment ul li img + span {
	display:none
}
#location .item.payment ul li img {
	height:3em
}
#location .item.payment ul li span {
	display:inline-block;
	border: solid 1px rgba(--grey);
	background: rgba(var(--grey2));
	padding:0.25em 0.5em;
	border-radius:0.25em;
	font-weight: var(--medium)
}
#locationmap img {
	filter: drop-shadow(0 0.25em 0.25em rgb(var(--darkblue),0.5));
	display: block;
}

/*** NEWSLETTER ***/
section.newsletter {
	padding-bottom:3vw;
	padding-top: 0;
	text-align: center;
}
section.newsletter h2{
	font-weight: 700;
}
section.newsletter h2 + .h2{
	margin-top: 0 !important;
}
section.newsletter h3 {
	font-weight: 600;
	font-size:1.425em;
	color: rgb(var(--darkblue));
	letter-spacing: -0.005em;
}
section.newsletter .image {
	padding:0 !important;
}
section.newsletter .image .box {
	padding:0 !important;
}
section.newsletter .image img {
	margin-top:-3em;
	
}
section.newsletter + #producers {
	padding-top: 3vw;
	padding-bottom:3vw;
	background: linear-gradient(rgba(var(--darkblue3),0.2), rgba(var(--blue3),0)8%);
}
@media(max-width:767px){
	section.newsletter .col {
		text-align: center;
	}
}

 
 /*** SHORTCODES-CUSTOM-CSS ***/
.vc_custom_1724774394450{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_sortiment_01.jpg?id=1337) !important;}.vc_custom_1725213472934{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_fachmarkt_01.jpg?id=1352) !important;}.vc_custom_1724774830835{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_ladezone_01.jpg?id=1365) !important;}.vc_custom_1724775117437{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_fuhrpark_01.jpg?id=1385) !important;}.vc_custom_1724777522574{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_beratung_02.jpg?id=1406) !important;}.vc_custom_1724777940344{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_konditionen_01.jpg?id=1412) !important;}.vc_custom_1725299094468{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/09/teaser_karriere_04.jpg?id=1587) !important;} 
.vc_custom_1724774394450{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_sortiment_01.jpg?id=1337) !important;}.vc_custom_1725213472934{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_fachmarkt_01.jpg?id=1352) !important;}.vc_custom_1724774830835{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_ladezone_01.jpg?id=1365) !important;}.vc_custom_1724775117437{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_fuhrpark_01.jpg?id=1385) !important;}.vc_custom_1724777522574{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_beratung_02.jpg?id=1406) !important;}.vc_custom_1724777940344{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/08/teaser_kachel_konditionen_01.jpg?id=1412) !important;}.vc_custom_1725299094468{background-image: url(https://capital-baustoffe.de/wp-content/uploads/2024/09/teaser_karriere_04.jpg?id=1587) !important;}