/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/*Position plan IT Logo*/
#copyrights p.planit a.logo {transform: translate(0px, 5px);}


/*Social Media Icons */
.icon-facebook:before {font-size: 230% !important;}
.icon-youtube:before {content: url("../images/youtube.svg"); transform: translate(-1px, -1px);}

/*Scharfes Sliderbild */
@media (min-width: 1800px) {
.header-image .img-fluid {min-width: 1920px;}
}



/*Logo*/
@media (max-width: 575px) {
	#logo img {height: auto;}
	
}


@media (max-width: 465px) {
	#logo img {max-width: 120%;}
	
}


/*Überschriften */
.section-title h2, .section-title h1 {
    color: #27348b;
    text-transform: uppercase;
    font-weight: 700;
	font-size: 42px;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2;}
	
	.section-title h2:after, .section-title h3:after, .section-title h1:after {
   content: none !important;}
   
.section-title h3{   
   color: #e30519;}
   
   
ul.leistungen {list-style: none;}
ul.leistungen h4 {margin: 0;}

ul.leistungen li {padding-left: 70px;
    background-repeat: no-repeat;
    background-size: 60px;
    background-position: top left;}
	
	
ul.liste {
    padding-left: 20px;}
	
	
.kasten {padding: 20px 25px;
    background-color: #fff;
    box-shadow: rgb(0,0,0,.5) 1px 1px 10px;}
	
	
figure.picture-item > a > img.img-fluid {transition: all .2s ease; transform: scale(1);}
figure.picture-item > a:hover > img.img-fluid {transform: scale(1.1);}


/*Footer*/

#footer img.siegel {filter: grayscale(100%); opacity: .5; transition:all .2s ease; max-width: 200px; height: auto;}
#footer img.siegel:hover {filter: grayscale(0%); opacity: 1;}



/*Footernavi */
#footer ul.listfooter > li a.icon-listfooter:before {
    content: '\e804';
    color: #27348b;}
	
#footer ul.listfooter ul {list-style: none; padding-left: 20px;}


/*Navigation */

#top-bar{border-bottom: none;}

.dropdown-toggle::after {border-top: none;
    border-right: none;
    border-bottom: 0;
    border-left: none;}
	
@media (max-width: 991px) {
.navbar-collapse .no-mobile {display: none;}

#mainnav .mobile-toggle, #mainnav .mobile-toggle.openmenu {
	width: 100% !important;
	z-index: 2;
    pointer-events: auto;}
	
#mainnav .nav .dropdown-toggle {width: 0px;
    position: absolute;
    z-index: 1;
    pointer-events: none;}
	
}

/* Slider*/
.swiper-slide .row > div h2, .swiper-slide .row > div p {
color: #fff; text-shadow: rgb(0 0 0 / 85%) 1px 1px 2px; line-height: 1.2;}

.swiper-slide .row > div h2 {margin-bottom: 10px;}

/* Zeitstrahl*/
ul.historie {border-left: #27348b 2px solid; padding-left: 14px; position: relative;}

@media (max-width: 425px) AND (orientation: portrait) {ul.historie {padding-left: 10px;}}


@-moz-document url-prefix(){
ul.historie {padding-left: 10px;}
}

ul.historie:after {content: "\25BC"; color: #27348b; position: absolute; left: -8.5px; bottom: -9px;}

ul.historie li {margin-bottom: 50px;}

ul.historie li:last-child {margin-bottom: 0;}

ul.historie li strong, ul.historie li::marker {color: #27348b; font-weight: 800; left: 14px;
    position: absolute;}


/* Dokument*/
a.dokument > img {box-shadow: rgb(0 0 0 / 50%) 1px 1px 10px; transition: all .2s ease;
    transform: scale(1);}
a.dokument:hover > img {transform: scale(1.05);}



/* Innovativ-Button*/
img.runder-button {
    position: absolute;
    right: -250px;
    width: 150px;
    border-radius: 100%;
    transform: rotate(
-18deg
);
    box-shadow: 5px 5px 5px rgba(50,55,128,.33);
	pointer-events: none;
}

@media (max-width: 1640px){
	    img.runder-button {right: -160px;}
}

@media (max-width: 1450px){
	    img.runder-button {
			right: -70px;
			top: 50px;
			width: 100px;}
}


@media (max-width: 1070px) and (min-width: 992px), (max-width: 520px) {
	    img.runder-button {
			display: none;}
}

@media (max-width: 991px){
	    img.runder-button {
			right: 150px;
			top: 0px;}
}



/* ----------- Platzhaltergrafik Google Maps iframe ------------ */
.cmp-maps > .cmplazypreviewiframe {
    background-image: url(https://www.planit-online.de/fileadmin/layout/images/platzhalter-karte.png);
    background-size: cover;
}


/*Cookie-Info-Tabelle*/


#cmpcookieinfo table.cookieinfotable tr > th:nth-child(1)::after {content: " (Cookie-Name)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(2)::after {content: " (Beispielwert)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(3)::after {content: " (Ablaufzeit)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(4)::after {content: " (Zweck)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(5)::after {content: " (Domain)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(6)::after {content: " (Anbieter)"}
#cmpcookieinfo table.cookieinfotable tr > th:nth-child(7)::after {content: " (Datenschutzerklärung)"}


#cmpcookieinfo table.cookieinfotable tr > th::after {font-size: 10px;}
#cmpcookieinfo {overflow: scroll;}

/* ----------- Slider ------------ */

#header.position-fixed {border-bottom: 1px solid #fff;}



.header-image > figcaption {
    position: absolute;
    top: 0;
    width: 100%;
	height: 140px;
    padding-top: 10px;
    background: linear-gradient(
180deg, #fff 1%, transparent 100%);}


.swiper-slide .row > div h2, .swiper-slide .row > div p {
    color: #27348b;
    text-shadow: none;}
	
	@media (max-width: 550px){
.swiper-slide .header-image img {margin: auto 50%;
    transform: translate(-280px, 0);}
	
	
#slider .header-image picture img {margin-top: 75px;}
.header-image > figcaption {
    height: 175px;
    background: linear-gradient( 
180deg, #fff 50%, transparent 100%)}
	}
	
	
.cmp-maps .cmplazypreviewiframe {
	max-width: 100%;
}

/* ----------- Jobs ------------ */
ul.jobs {
    list-style: none;
}

ul.jobs span.mwd {
    font-size: 75%;
    font-weight: 400;}

ul.jobs h3 {
    line-height: 1;
	margin-top: 0.6rem;
}

ul.jobs h3, ul.jobs p, ul.jobs li {
	margin-bottom: 0.6rem;
}


ul.jobs li a h3:hover {color: #27348b}

ul.jobs li a p {text-align: right;}


ul.jobs li {
    border-top: 1px #27348b solid;
}




/* ----------- Hinweiskasten ------------ */
#hinweis .col-md-12 {
	background: #27348b;
	padding: 20px;
}

#hinweis p, #hinweis h3 {
	text-align: center;
	color: #fff;
}