/*********************************content*************************************/ 
div#content {margin-top: 0px; overflow:hidden; min-height: 200px;}

/* GENERAL STYLES AND TOOLS */
#stickyhead .col {text-align: center;} 
.col {text-align:center;}
.button a {color: var(--third-color); font-weight: normal; letter-spacing: 1.5px;}
#mobileBar {display: none;}
#mobileBar a {color: #fff;}
#mobileBar a:hover {color: #333;} 
#mobileBar a span {position: absolute; display:none; background: #f9f9f9; padding: 5%;border: 1px solid #dddddd;bottom: 55px; right: 5%; width: 80%; 
font-family: var(--font3); color: #333; font-size: 13px; border-radius: 4px; z-index:901; box-shadow: 0 0 15px #000;}
#mobileBar a span:before {content: '';position: absolute;bottom: -20px;left: calc(50% - 11px);border: 11px solid transparent;border-bottom-color: #f9f9f9; transform: rotateX(180deg);}
#mobileBar a span.left:before {left:calc(20% - 11px);}
#mobileBar a span.right:before {left:calc(80% - 11px);}			
#mobileBar a:hover span{display:block;}
div.imgPlaceHolder {width: 80%; height: 50vh; margin:0 auto; display:inline-block; background: linear-gradient(14deg, rgba(200,100,70,0.1), rgba(70,100,200,0.1));}


/* SECTION 0 */
body.home #start .pulse {animation: pulse-animation 2s infinite;}
@keyframes pulse-animation {
	0% {transform: scale( 0.985 );}
	100% {transform: scale( 1 );}
}


body.home #start {background: url("../../img/motive/start-bg-desktop.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
body.home #start p {text-align:center;}
body.home #start img {padding-top: 12vh; filter: drop-shadow(0 0 0.2rem #070707);}
body.home #start img:hover {filter: drop-shadow(0 0 15px #9a9b9b);}

/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #start {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #start {background-attachment: scroll;}
}


/* SECTION 1 */
body.home #section1 .col-12.bg {height: calc(50vh - 35px); background: url("../../img/motive/section1-bg.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
body.home #section1 h1 {font-size: 40px; line-height: 40px;color: #f9f9f9; background: var(--second-color); width: 50%; margin: auto; padding: 12px 12px 18px 12px;}
body.home #section1 .col-5.right p {margin: 3px 0 18px 0; font-size: 13px; line-height: 17px;}
body.home #section1 h2::after {content: '\276F';margin-left: 6px;font-weight: bold; color: var(--main-color);}
body.home #section1 a:hover h2 {color: var(--main-color);}

/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #section1 .col-12.bg {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #section1 .col-12.bg {background-attachment: scroll;}
}

/* SECTION 2 */
body.home #section2 {background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url("../../img/motive/section2-bg.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
body.home #section2 .col-6.box {min-height: 50vh; background: linear-gradient(-24deg, rgba(0,0,0,1.8), rgba(32,32,32,1.2), rgba(0,0,0,1.8),rgba(0,0,0,1.8), rgba(32,32,32,1.0)); 
box-shadow: 0 0 15px #999;} 
body.home #section2 h3 {color: var(--main-color); font-size: 30px; text-align: left; padding: 3vh 5%;}
body.home #section2 p {color: var(--third-color); font-size: 16px; line-height: 24px;}
body.home #section2 p a {font-family: var(--font1); font-size: 14px; text-transform:uppercase; color: var(--third-color); float: right; margin: 12px 0 12px 24px;}
body.home #section2 p a::after {content: '\276F';margin-left: 6px;font-weight: bold; color: var(--main-color);}
body.home #section2 p a:hover {color: var(--main-color);}
body.home #section2 .imgPH {width: 414px; height: 281px;}

/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #section2 {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #section2 {background-attachment: scroll;}
}

/* SECTION 3 */
body.home #section3 {background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url("../../img/motive/section3-bg.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
body.home #section3 .col-6.box {min-height: 50vh; background: linear-gradient(-24deg, rgba(0,0,0,1.8), rgba(32,32,32,1.2), rgba(0,0,0,1.8),rgba(0,0,0,1.8), rgba(32,32,32,1.0)); 
box-shadow: 0 0 15px #999;} 
body.home #section3 h3 {color: var(--main-color); font-size: 30px; text-align: left; padding: 3vh 5%; letter-spacing:1px;}
body.home #section3 p {color: var(--third-color); font-size: 16px; line-height: 24px;}
body.home #section3 p a {font-family: var(--font1); font-size: 14px; text-transform:uppercase; color: var(--third-color); float: right; margin: 12px 0 12px 24px;}
body.home #section3 p a::after {content: '\276F';margin-left: 6px;font-weight: bold; color: var(--main-color);}
body.home #section3 p a:hover {color: var(--main-color);}
body.home #section3 .col-4 img {margin-bottom: 40%;  filter: drop-shadow(0 0 0.4rem #aaa);}

/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #section3 {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #section3 {background-attachment: scroll;}
}


/* SECTION 4 */
body.home #section4 {background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("../../img/motive/start-bg-desktop.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
body.home #section4 ul {color: var(--third-color); font-family: var(--font3); margin: 16px 5% 12px 5%;} 
body.home #section4 ul {font-family: var(--font2); font-weight:normal; text-align:left; color: var(--third-color); margin: 16px 12px 12px 20%; letter-spacing: 1.5px;}
body.home #section4 ul li {list-style:none;  line-height: 180%; font-size: 14px; color:var(--third-color); font-weight:normal;}
body.home #section4 ul li::before {content: "\2605"; color: var(--third-color);; margin-right: 15px;}

body.home #section4 h3 {color: var(--main-color); font-size: 30px; text-align: center; padding: 3vh 5%;}
body.home #section4 p {color: var(--third-color); font-size: 16px; line-height: 24px;}
body.home #section4 .col-10 p {font-size: 110%; padding: 0 15% 2vh 15%; text-align:center;}

/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #section4 {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #section4 {background-attachment: scroll;}
}

/* KONTAKT */
body.home #kontakt {background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("../../img/motive/start-bg-desktop.png"); position: relative; background-position: 50%; background-repeat: no-repeat; -webkit-background-size: cover !important; -moz-background-size: cover !important; text-align:center; background-size: cover !important;}
/* iOS check */
@supports not (-webkit-touch-callout: none) {
	body.home #kontakt {background-attachment: fixed;}
}
@supports (-webkit-touch-callout: none) {
	body.home #kontakt {background-attachment: scroll;}
}
body.home #kontakt p {text-align: center; color: var(--third-color); font-family: var(--font3); letter-spacing:1px;}
.prowebform {margin: 0% 15%; background: rgba(255,255,255,0.02); box-shadow: 0 0 6px #666; border-radius: 8px;}
.prowebform .formTitle label .title{font-family:var(--font2); letter-spacing: 3px; text-align:center; color: var(--third-color);}
.prowebform form > div > div > div > label {color: var(--third-color);}
.prowebform .toggle span.faq-arrow {float: right; padding-right: 35px;}


/* MODAL FORM */
a#modalDialogMob .circleScaleBtn {cursor: pointer; width: 70%; text-align:center; margin: 0 auto 10px auto;}
#animatedModal .fastFormTitle {font-family: var(--font1); color: rgba(255,255,255,0.7); font-size: 1.5rem; text-transform:uppercase; padding-bottom: 1rem;}
#animatedModal .modal-content {position: absolute; left: 50%; top: 50%;width: 400px;min-height: 200px;padding: 25px; box-sizing: border-box;background-color: rgba(255,255,255,0.1); 
transform: translate(-50%, -50%); border-radius: 7px;}
#animatedModal #closebt-container {margin-top: 5vh;}
#animatedModal #closebt-container .closebt {cursor:pointer;}
#animatedModal #closebt-container .closebt:hover {background: rgba(255,255,255,0.3); border-radius: 50px;}
#modalcntwrapper #fastform input[type=text],
#modalcntwrapper #fastform input[type=password],
#modalcntwrapper #fastform textarea {width: 100%;height: 50px; margin: 5px auto;padding-left: 65px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;box-sizing: border-box;border-color: #ddd;border-width: 1px;border-style: solid;transition: background-color 0.25s;}
#modalcntwrapper #fastform textarea {max-width: 100%;}
#modalcntwrapper #fastform span {position: absolute;z-index: 5;display: block;height: 50px;width: 50px;text-align: center;line-height: 50px;color: #fff;background-color: var(--main-color);
font-size: 20px; margin: 5px auto;} 
#modalcntwrapper #fastform span .fa {line-height: 50px;}	
#modalcntwrapper #fastform .button {border: 0px; cursor:pointer;}
#modalcntwrapper #fastform .button:hover {background: #2A1FFF;}
#animatedModal #ffMsg p {font-family: var(--font3); color: #fff;font-size: 18px;line-height: 24px;margin: 12px 0;padding: 0px 5%; text-align:center;}

/****** NEW PAGE ELEMENTS *****/
.pe1 {}
.pe2 img,
.pe3 img, 
.pe4 img {display:inline-block; margin:auto; box-shadow: 0 0 14px #ddd;}
.pe4 h2 {margin-bottom: 50px;}
.pe4 img {max-width: 70%;}