/******************** ALLGEMEIN ********************/
html {scroll-behavior: smooth;} 
body, p, ul{font-family: 'Raleway', sans-serif;	font-size:1.2em !important;line-height:1.7;font-weight:300; color: #2d2e32;}
.meineWeite{max-width:1140px; margin-left:auto; margin-right:auto;}
.fett{font-weight:500;}

/******************** ÜBERSCHRIFTEN ********************/
h1, h2, h3, h4, h5{font-family: 'Dosis', sans-serif;-moz-hyphens:auto;-o-hyphens:auto;-webkit-hyphens:auto; -ms-hyphens: auto; hyphens: auto; text-transform:uppercase;}
h1{font-size:4em !important;}
h2{font-size:3.5em !important;}
h2, h3{color:#2d2e32;}
h3{font-size:3em !important; }
h4{color:#fd7e14; cursor: pointer;}
.dsgvo-ul{text-align:left; list-style-type: square;}
.dsgvo-ul li {padding-left: 0.8em;}

/******************** LINKS ********************/
.orange-link a{text-decoration:none; color:#2d2e32;}
.orange-link a:visited{text-decoration:none; color:#2d2e32;}
.orange-link a:hover{text-decoration:underline;color:#fd7e14;}
.orange-link a:active{text-decoration:underline;color: #fd7e14;}
.white-link a{text-decoration:none; color:#fff;}
.white-link a:visited{text-decoration:none; color: #fff;}
.white-link a:hover{text-decoration:underline; color: #2d2e32;}
.white-link a:active{text-decoration:underline; color: #2d2e32;}

/******************** FOOTER ********************/
.myFooter{padding-top:3em !important; padding-bottom:2em !important; }
footer a{color:#fff; text-decoration:none;}
footer a:visited, footer a:hover, footer a:active{color:#fff; text-decoration:underline;}

/******************** BUTTONS ********************/
.btn-outline-warning{border-color: #fd7e14 !important;}
.btn-outline-warning:hover {background-color: #fd7e14 !important; color: #2d2e32!important;}

/* ******************* ABSTÄNDE ********************/
.ma-top{margin-top:5.5em;}
.ma-top2{margin-top:2em;}
.ma-bottom{margin-bottom:5em;}
.ma-bottom-orange{margin-bottom:0.5em;}
.pa-top{padding-top:5em;}
.pa-bottom{padding-bottom:5em;}

/* ******************* FARBEN  ********************/
.t-weiss{color:#fff!important;}
.orange-ALT{color:#f3901b;}
.t-orange {color:#fd7e14;}
.b-orange{background-color:#fd7e14;}
.back-gray{background-color: #dce7eb;}

/******************** HEADER | NAVIGATION ********************/
#navbarNavDropdown{padding-left:9em;}
.myBackground {background-color: #090909 !important;}
.navbar-dark .navbar-nav .nav-link{color:#fd7e14 !important; font-family: 'Dosis', sans-serif; font-size:1.4em; text-transform:uppercase;}
.navbar-dark .navbar-nav .nav-link:hover{color:#FDA760 !important;}
.navbar-brand{font-family: 'Raleway', sans-serif;}

/******************** HERO | SLIDER ********************/
.hero{background-image: url("../img/eich-training-seminare.jpg"); background-size:cover; position:center center;}

/******************** SCHRÄGE | INHOUSE-SCHULUNG | WEBDESIGN ********************/
.schraeg:before{content:"";position:absolute; width:100%; height:30%; background-color:inherit; transform-origin:top left; transform:skewY(-3deg);margin-left:-15px;}
.schraeg:after{content: ""; position: absolute; width: 100%; height: 15%; background-color:inherit ;transform-origin: 100%; z-index:-1; 
	transform: skewy(3deg); margin-left: -15px;}

/******************** SCHRÄGE | GRAU ********************/
.schraeg-gray:before{content:"";position:absolute; width:100%; height:30%; background-color:inherit; transform-origin:top right; transform:skewY(3deg);margin-left:-15px;}
.schraeg-gray:after{content: ""; position: absolute; width: 100%; height: 13%; background-color:inherit; transform-origin: top left; z-index:-1; transform: skewy(-3deg); margin-left: -15px;}

/******************** Projektplanung | TIMELINE ********************/
.circle {font-weight:bold; padding:15px 20px; border-radius:50%; background-color:#fd7e14; color:#fff; max-height:50px; z-index:2;padding-top:10px;}
.how-it-works.row {display: flex;}
.how-it-works.row .col-2 {display: inline-flex; align-self: stretch; align-items: center; justify-content: center;}
.how-it-works.row .col-2::after {content: ""; position: absolute; border-left: 3px solid #fd7e14; z-index: 1;}

.how-it-works.row .col-2.bottom::after {height: 50%; left: 50%; top: 50%;} /*überprüfen vertikale Linie bei 1*/
.how-it-works.row .col-2.full::after {height: 100%; left: calc(50% - 3px);} /*vertikale Linie bei 2, 4 und 6*/
.how-it-works.row .col-2.top::after {height: 50%; left: 50%; top: 0;}

.how-it-works.row .col-2.top-bottom::after {height: 100%; left: 50%; top: 0;} /*für 3. und 5.*/
.how-it-works.row .col-2.top-last::after {height: 50%; top:0; left: calc(50% - 3px);} /*für das 6. und somit letzte */

.timeline div {padding: 0; height: 40px;}
.timeline hr {border-top: 3px solid #fd7e14; margin: 0; top: 17px; position: relative;} /*horizontale Linie */
.timeline .col-2 {display: flex; overflow: hidden;}
.timeline .corner {border: 3px solid #fd7e14; width: 100%; position: relative; border-radius: 15px;} /*ECKEN*/
.timeline .top-right {left: 50%; top: -50%;}/* Ecken */
.timeline .left-bottom {left: -50%;top: calc(50% - 3px); /*Ecken*/}
.timeline .top-left {left: -50%;top: -50%;}
.timeline .right-bottom {left: 50%; top: calc(50% - 3px);}

/******************** ACCORDION | SEMINARTHEMEN ********************/
.myWidth{max-width: 700px; margin-left:auto; margin-right:auto;}

.transition, .st-p, ul.st-u li i:before, ul.st-u li i:after {transition: all 0.25s ease-in-out;}
.flipIn, ul.st-u li {animation: flipdown 0.5s ease both;}
.no-select, h2 {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
  -moz-user-select: none; -ms-user-select: none; user-select: none;}
.st-p {position:relative; overflow:hidden; max-height:800px; opacity:1; transform:translate(0, 0); margin-top:0.875em; z-index:2; padding-left:1em;}

ul.st-u {list-style: none; perspective: 900; padding: 0; margin: 0;}
ul.st-u li {position: relative; padding: 0; margin: 0; padding-bottom: 4px; padding-top: 18px; border-top: 1px dotted #dce7eb; color:#fd7e14;}
ul.st-u li:nth-of-type(1) {animation-delay: 0.5s;}
ul.st-u li:nth-of-type(2) {animation-delay: 0.75s;}
ul.st-u li:nth-of-type(3) {animation-delay: 1s;}
ul.st-u li:last-of-type {padding-bottom: 0;}
ul.st-u li i {position: absolute;transform: translate(-6px, 0); margin-top: 16px;right: 0;}
ul.st-u li i:before, ul.st-u li i:after {content: ""; position: absolute;background-color: #fd7e14; width: 3px; height: 9px;}
ul.st-u li i:before {transform: translate(-2px, 0) rotate(45deg);}
ul.st-u li i:after {transform: translate(2px, 0) rotate(-45deg);}
ul.st-u li input[type=checkbox] {position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0;}
           
ul.st-u li input[type=checkbox]:checked ~ p {margin-top: 0; max-height: 0; opacity: 0; transform: translate(0, 50%);}
ul.st-u li input[type=checkbox]:checked ~ i:before {transform: translate(2px, 0) rotate(45deg);}
ul.st-u li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg);}

/******************** ANIMATIONEN ********************/
@keyframes flipdown {
  0% {opacity: 0; transform-origin: top center; transform: rotateX(-90deg); }
  5% {opacity: 1;}
  80% {transform: rotateX(8deg);}
  83% {transform: rotateX(6deg);}
  92% {transform: rotateX(-3deg);}
  100% {transform-origin: top center;transform: rotateX(0deg);}
}

/******************** FORMULAR ********************/
.myForm{margin-bottom:4em;}

/******************** IMPRESSUM / DATENSCHUTZ ********************/
.impHervor{font-family: 'Dosis', sans-serif; color:#fd7e14; font-size:1.5em !important; font-weight:600; text-transform:uppercase;}
.impMail a{color: #2d2e32; text-decoration:none;}
.impMail a:hover{color:#fd7e14; text-decoration:underline;}
.myTable{max-width:800px; margin-left:auto; margin-right:auto; font-family: 'Raleway', sans-serif;	font-size:1.2em !important;line-height:1.7;font-weight:300; color: #2d2e32;}

/******************** BACK TO TOP PFEIL ********************/
#back-top { position:fixed; bottom:50px; right:25px; z-index:3; display:none; }	
#back-top a { width:60px; height:60px; padding-top:8px; display:block; text-align:center; font-size:30px; color:#fff; background-color:rgba(26,26,26,0.6); text-decoration:none; 
    -moz-transition:background-color .15s; -webkit-transition:background-color .15s; -o-transition:background-color .15s;-ms-transition:background-color .15s; transition:background-color .15s;}  
#back-top a:hover { text-decoration:none; background-color:rgba(255,0,0,0.6); }

/* +++ ENDE BACK TO TOP PFEIL +++ */

/******************************** MEDIA ********************************/

/* LG */
@media (max-width: 1200px) {  }

/* MD */
@media (max-width: 992px) {
	#navbarNavDropdown{padding-left:2em;}
}

/* SM */
@media (max-width: 767px) { 
	h1.t-weiss{font-size:3em !important;}
	h2{font-size:2.5em !important;}
}
/* XS */
@media (max-width: 575px) { 
	h1.t-weiss{font-size:1.6em !important}
	h2{font-size:1.75em !important;}
	p{line-height:1.5; font-size:1em;}
}