/*avenir-roman -> content*/
@font-face {
	font-family: 'Avenir Roman';
	src: url('../fonts/webfonts-avenir/Avenir-Roman.woff2') format('woff2');
	src: url('../fonts/webfonts-avenir-woff/Avenir-Roman.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*avenir-black -> titles*/
@font-face {
	font-family: 'Avenir Black';
	src: url('../fonts/webfonts-avenir/Avenir-Black.woff2') format('woff2');
	src: url('../fonts/webfonts-avenir-woff/Avenir-Black.woff') format('woff');
	font-weight: bold; /* 900 */
	font-style: normal;
}

/*avenir-heavy -> on pictures and special segments*/
@font-face {
	font-family: 'Avenir Heavy';
	src: url('../fonts/webfonts-avenir/Avenir-Heavy.woff2') format('woff2');
	src: url('../fonts/webfonts-avenir-woff/Avenir-Heavy.woff') format('woff');
	font-weight: 900;
	font-style: normal; 
}

body {
	color: #3B2A2A !important;
}

.avenir-roman {
	font-family: "Avenir Roman" !important;
}

.avenir-black {
	font-family: "Avenir Black" !important;
}

.avenir-heavy {
	font-family: "Avenir Heavy" !important;
}

.col-centered {
	margin: 0 auto;
}

h3 {
	line-height: 2.5 !important;
}

h4 {
	font-size: 1.7rem;
	font-family: "Avenir Heavy" !important;
}

p, ol, dl, .table {
	font-family: "Avenir Roman" !important;
	font-size: 1.5rem;
}

.text-intro p {
	font-size: 2.5rem;
}

.preisplanTable .fal {
	height: 1em;
	width: 1em;
}
.preisplanTable .fa-check-circle {
	color: #36b37e;
}

.preisplanTable .fa-times-circle {
	color: #ff5630;
}

.title-icon {
	height: 4rem;
	width: 4rem;
}

.slideshow {
    height: 40vh;
    position: relative;
}
.slideshow div {
    position: absolute;
    top: 0px;
    left: 0px;
}
.slideshow img {
    height: 40vh;
}

.gray-content {
	background-color: #f2f2f2;
	background-size: 30%;
	background-image: url(../graphics/intro/topography.svg);
}

.highlighted-contend {
	background-color: rgba(0,161,222, 0.2);
}

.partner_logo {
	max-width: 80%;
}

.testimonial {
	background-color: white;
	/*box-shadow: 0px 15px 20px silver;*/
	/*box-shadow: 0px 0px 50px -5px silver;*/
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.testimonial p {
	font-size: 2.5rem;
	text-align: center;
	font-style: italic;

	flex-grow: 1;
}
.testimonial.no-card {
	height: unset;
}
.testimonial.no-card p {
	flex-grow: unset;
}
.testimonial p:before, .testimonial p:after {
	content: '\201C';
	font-size: 3rem;
	font-family: 'Sanchez';
}
.testimonial p:after {
	content: '\201D';
}
.testimonial .testimonial_author {
	font-size: 2rem;
	font-weight: bolder;
	text-align: center;
}
.testimonial .testimonial_company {
	font-size: 2rem;
	font-weight: normal;
	text-align: center;
}

.tabsX {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
}

.tabs .tab {
	cursor: pointer;
	font-size: 1.2rem;
	font-family: "Avenir Heavy" !important;
	padding:15px;
	/*background-color: rgba(0,55,97, 1);*/
	background-color: rgba(178, 178, 178, 0.4); !important;
	color: #00a1de !important;
	border-bottom: 1px solid #00a1de;
	display: flex;
	justify-content: space-between;

	transition: background-color 0.3s, transform 0.6s;
	transform: translate(10px);
}

.tabs .tab.inactive {
	background-color: rgba(178, 178, 178, 0.2); !important;
	transform: translate(0px);
}

.tabs .tab.inactive:hover {
	background-color: rgba(178, 178, 178, 0.4) !important;
}

.tabs .tab i {
	font-size: 1.5em;
}

.picture-overlay {
	padding-top: 20px;
}

.picture-overlay_container img {
	max-width: 100%;
}

@media (min-width: 768px) {
	.picture-overlay_container {
		position: relative;
	}

	.picture-overlay_container img {
		width: 100%;
	}

	.picture-overlay {
		position: absolute;
		top: 0px;
		/*bottom: 0px;*/
		margin: 20px 0px;
		margin: 20px 0px;
		padding: 15px;
		width: 50%;
		background-color: rgba(255, 255, 255, 0.9);
	}

	.picture-overlay__right {
		right: 20px;
	}

	.picture-overlay__left {
		left: 20px;
	}

	.picture-overlay__less_transparency {
		background-color: rgba(255, 255, 255, 0.9);
	}

}
.action-button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	border-radius: 0.35rem;
	line-height: 1.5;
	background-color: #00a1de;
	color: #fff;
	overflow: hidden;
	position: relative;
	height: 3rem;
	min-width: 30px;
	box-shadow: 0px 8px 10px silver;
	font-size: 1.5rem;
	width: 100%;

	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
a.action-button, a.action-button:hover {
	text-decoration: none;
	color: #fff;
}
.action-button:hover {
	background-color: #0092be;
	transform: translateY(-3px);
	box-shadow: 0px 8px 20px silver;
}

.action-button-interior:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   background: white;
   opacity: 0.3;
   height: 100%;
   width: 100%;
   transform: skewX(-45deg);
   background: linear-gradient(to right, white, white 20px, transparent 20px);
   transform-origin: left bottom;
   animation: shine 10s ease-in infinite;
}

@keyframes shine {
	0% {
		transform: skewX(-45deg) translateX(-100%);
	}
	10% {
		transform: skewX(-45deg) translateX(100%);
	}
	100% {
		transform: skewX(-45deg) translateX(100%);
	}
}
.navigation {
    /*position: fixed;*/
    /*top:0px;*/
    /*left: 0px;*/
    /*right: 0px;*/
    z-index: 99999999;
    background-color: rgba(0,55,97, 1);
    color: white;
    margin:0;
}
.navigation-fixed {
	position: fixed;
	top:0px;
	left: 0px;
	right: 0px;
}
.navigation-fixed + div {
	margin-top: 3.6rem;
}
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
}
.navigation ul li {
    display: inline-block;
    flex-basis: 100%;
}
.navigation a {
    color: white;
    text-decoration: none;
    font-size: 1.6rem;
    font-family: "Avenir Heavy";
    display: block;

	text-align: center;
}

.navigation .logo {
    width: 70%;
}

.navigation a:hover {
    text-decoration: underline;
}
.navigation a.active {
    color: rgba( 0,161,222, 1)
}

.screenshot {
	box-shadow: 0px 0px 50px -5px silver;
}

button, label, input, textarea {
	/*background-color: #f1f1f1;*/
    border: 0 none;
	color: #3B2A2A;
	font-size: 1.5rem !important;
	line-height: 2.5;
	padding: 0 0 0 0.3em;
	text-align: left;
	width: 100%;
}

input[type=text], input[type=email] {
	background-color: white;
	border: 1px solid rgba(0,0,0,0.3);
}

textarea {
	resize: none !important;
	line-height: 1.3em !important;
	padding-top: 10px;
}

.image-split-content {
}

#wrapper {
	margin: 0;
}

    #titlecontent {
        animation-duration: 2s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
        animation-name: reveal-content-below;
        height: 100vh;
    }

    @keyframes reveal-content-below {
        from {
            height: 100vh;
        }

        to {
            height: 70vh;

        }
    }

        #titlecontent::before {
            background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url(../graphics_opt/intro/header-2000px.jpg) no-repeat center bottom / cover;
            content: '';
            display: block;
            position: fixed;
            height: 100vh;
            width: 100%
        }
		#titlecontent.titlecontent-technologie::before {
			background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ), url(../graphics_opt/intro/header-technologie-2000px.jpg);
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: cover;
		}
		#titlecontent.titlecontent-herdenschutz::before {
			background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ), url(../graphics_opt/intro/header-herdenschutz-2000px.jpg);
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: cover;
		}
		#titlecontent.titlecontent-team::before {
			background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ), url(../graphics_opt/intro/header-team-2000px.jpg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.team-photo {
			width: 100%;
		}


        header {
            text-align: center;
            margin: 5em 0 0 0;
            position: absolute;
            width: 100%;
        }

            #logo {
                width: 35em;
                margin: 0 auto 0 -16.8em;
                z-index: 0;
                position: fixed;
            }

			.logo-text {
				position: fixed;
				width: 100%;
				font-size: 2.5rem;
				color: white;
				margin-top: 130px;
				font-family: "Avenir Roman";
			}

        #navicon {
            width: 50px;
            height: 50px;
            position: fixed;
            top: 2em;
            right: 10em;
            z-index: 2;
        }



#wrapper-content {
	background-color: #fff;
	position: absolute;
	width: 100%;
}

    .pagecontainer {
        background: no-repeat center top / cover;
        height: 100vh;
        position: relative;
    }

        .slider, .sliderimage {
            height: 100%;
        }

    .header-content {
        font-family: "Avenir Heavy";
        font-size: 1.7rem;
        padding-bottom: 4rem;
    }

        .headerParagraph {
        }

    .content {
        /*margin-top: 3em !important;*/
        /*padding-bottom: 1em;*/
        /*
        margin-top: 5em !important;
        padding-bottom: 6em;
        */
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
    }
	.content .row {
		max-width: 2000px;
		width: 100%;
	}

        .subcontent {
            font-family: "Avenir Roman" !important;
			margin: 2em 0 0 0 !important;
			font-size: 1.5rem;
        }

            .subcontent h4 {
                margin-bottom: 0px;
                font-size: 1.7rem;
                font-family: "Avenir Heavy" !important;
            }

        .titlecontainer {
            margin: 0 0 0 15em !important;
            position: absolute !important;
            bottom: 10em !important;
        }

            .testimonialParagraph {
                font-family: "Avenir Heavy" !important;
                color: #FFF;
                font-weight: bold;
                font-size: 1.3rem !important;
                margin-top: 0.5em;
            }

.image-split-content img {
	width: 100%;
}

.startQuote {
	margin-left: -50px;
}

.endQuote {
	margin-top: -85px;
}

.sliderTextTop {
	margin: 0 0 15em 15em !important;
}

.darkFont {
	color: #000 !important;
}

.title {
	font-family: "Avenir Heavy" !important;
	color: #FFF;
	font-weight: bold;
	max-width: 15em;
	font-size: 5rem;
	line-height: 1.0 !important;
}

.pagetitle {
	font-family: "Avenir Heavy" !important;
	font-size: 2.5rem;
	color: #FFF;
	display: table;
	background-color: #000;
	width: fit-content;
	padding: 5px 30px 5px 10px;
	font-weight: bold;
	margin-left: -0.5rem;
}

.subtitle {
	font-family: "Avenir Black" !important;
	font-size: 3.3rem;
	margin-bottom: -0.8em !important;
	margin-left: 15px;
}




#contactErrorMsg {
	color: #ff424e;
}

#contactSuccessMsg {
	color: #77da57;
}

#layer {
	background-color: rgba(15, 197, 228, 0.836);
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	z-index: 0;
}

.close-wrapper {
	opacity: 0;
	z-index: -1;
}

.open-popup {
	-webkit-animation: visible 0.5s forwards;
	animation: visible 0.5s forwards;
	display: block !important;
	z-index: 3;
}

.closed-popup>ul {
	display: none;
}

#navigation>ul {
	list-style: none;
	padding: 0;
	position: absolute;
	right: 7em;
	top: 1.5em;
	font-size: 3.5rem;
	font-family: "Avenir Heavy" !important;
	text-align: right;
	line-height: 5rem;
}

.navigationitem>a {
	color: white;
	text-decoration: none;
	text-align: right;
	font-weight: bold;
}

.row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.button {
	padding-right: 5px !important;
	padding-left: 5px !important;
}

#firstbutton {
	padding-left: 0 !important;
}


#lastbutton {
	padding-right: 0 !important;
}

.navigationitem>a:hover {
	color: white;
	text-decoration: none;
}

.topicButtonContainer {
	margin-top: 3em;
}

.topicButton {
	background-color: #3B2A2A;
	color: #f1f1f1;
	padding: 0 0 0 0.4em;   
	line-height: 2.5em; 
}

input:focus, textarea:focus, button:focus {
	 outline: none; 
} 

input, textarea {
	padding-left: 5px;
	width: 99%;
}

.formLabel {
	margin-top: 0.2em;
	border-bottom: 1px solid #fff;
}

.formLabel:hover {
	border-bottom: 1px solid #3B2A2A;
}

.formsubmit {
	height: 2.5em;
	width: 6em;
	font-size: 1rem;
	text-align: center;
	padding-right: 5px;
	margin-top: 0.2em;
}

footer {
	margin-top: 11.5em;
}

footer a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}

footer a:hover {
	color: #000;
}


.subscribe-form {
	margin-top: 0;
	display: grid;
	display: -ms-grid;
	grid-template-columns: 80% 20%;
	-ms-grid-template-columns: 80% 20%;
	grid-template-areas: 'content sending';
	-ms-grid-template-areas: 'content sending';
}

#subscribe-email {
	background-color: transparent;
	font-size: 1rem !important;
}

.subscribe-form>div {
	border-bottom: 2px solid #000;
}

#subscribesending {
	grid-area: sending;
}

#subscribesending>p {
	float: right;
}

#subscribecontent {
	grid-area: content;
	z-index: 2;
}

#subscribebutton {
	font-weight: bold;
}

#toFormArrow {
	float: right;
	margin-right: 7em;
}

#toFormArrow g path {
	transform: translate(0 0);
	fill: none;
	stroke: rgba(59, 42, 42, 1);
	stroke-width: 10;
}

#fromFooterToContact {
	margin-left: 0.6em;
}

.paragraphLink {
	color: #3B2A2A;
	font-size: 0;
}

.paragraphLink * {
	color: #3B2A2A;
	font-size: 1.5rem;
}

.paragraphLink p {
	color: #3B2A2A;
	display: inline;
}

.paragraphLink p:hover {
	color: #3B2A2A;
	text-decoration: none;
	background-color: rgba(255,2500,30, 1);
}

.paragraphLinkContainer a {
	padding: 0em 0.2em 0em 0.2em;
}

.paragraphLinkContainer a:hover {
	color: #3B2A2A;
	text-decoration: none;
}

.paragraphLinkContainer svg {
	margin-top: 2em;
}

.underlineMid {
	-webkit-text-underline-position: under;
	-ms-text-underline-position: below;
	text-underline-position: under; 
}

.normallink, .normallink:hover, .normallink:active {
	color: #000;
	text-decoration: none;
}

.normalbutton {
	background: transparent;
	font-size: 1rem !important;
}

.map {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	display: block;
	margin: 0 auto;
	margin: 5em 0 5em 0 !important;
}

.subsite-content {
	margin-top: 2em !important;
}

/* slideranimation name */

.projectcontainer, .extensioncontainer, .usecontainer, .contactcontainer {
	transition: opacity 2s linear;
}

.slider-wrapper1 > .projectcontainer:first-child {
	opacity: 1;
}

.slider-wrapper2 > .projectcontainer:first-child {
	opacity: 1;
}

.slider-wrapper3 > .projectcontainer:first-child {
	opacity: 1;
}

.slider-wrapper4 > .projectcontainer:first-child {
	opacity: 1;
}


@media only screen and (max-width: 767px) {
	html {
		font-size: 12px;
	}

	#navicon {
		width: 30px;
		height: 30px;
		right: 3em !important;
		margin-top: 3em;
	}

	#navigation>ul {
		font-size: 2.5rem;
		right: 1.2em;
		top: 5em;
	}
	.navigation ul {
		flex-direction: column;
	}
		
	#logo {
		width: 30em;
		margin-top: 4em;
		margin-left: -16em;
	}

	.titlecontainer {
		margin: 0 !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		width: 100%
	}

	#toFormArrow {
		float: none;
		margin: 0 auto;
		margin-top: 1em;
		width: 30px;
		display: block;
	}

	.topicButton {
		background-color: #3B2A2A;
		color: #f1f1f1;
		padding: 0 0 0 0.6em;   
		line-height: 2.5em; 
		height: 3.2em;
		width: 100%;
		margin-top: -5px;
	}

	.button {
		width: 100% !important;
		padding: 5px 0 5px 0;
		padding-right: 0 !important;
        padding-left: 0 !important;
        margin: 0 2px;
	}

        #firstbutton {
            margin-left: 0;
        }



	textarea {
		line-height: 1.4em !important;
	}

	.paragraphLinkContainer svg {
		margin-top: 1em;
		width: 35px;
	}

	.subtitle {
		font-size: 3.3rem;
        margin-top: 1em;
        margin-left: 1rem;
    }
    
    .col-sm {
    	padding-left: 1rem;
    	padding-right: 1rem;
    }

	#kontaktsubtitle {
		margin-left: 0;
	}

	.pagecontainer {
		height: 80vh;
	}

	.title {
		font-size: 4rem;
	}

	.pagetitle {
		margin-left: -0.2rem;
	}

	.headerParagraph {
		padding: 0 0.8em;
	}

	.map {
		height: 350px;
	}

	.testimonialParagraph {
		margin-left: 0em;
		font-size: 1.5rem !important;
	}

	.sliderTextTop h1 {
		margin: 0 10px 25em -15px !important;
		display: inline;
	}
	/*
	.sliderTextTop h1:first {
		
	}
	*/
	.testimonialTitleContent {
		margin: 0 0 12em 1.3em;
	}

	.pagetitleTestimonial {
		margin-left: 0.2rem;
		margin-top: -20em;
	}

	#projectcontainer2 {
		margin-top: -80vh;
	}
	
	#projectcontainer3 {
		margin-top: -80vh;
	}
	
	#extensioncontainer2 {
		margin-top: -80vh;
	}
	
	#extensioncontainer3 {
		margin-top: -80vh;
	}
	
	#usecontainer2 {
		margin-top: -80vh;
	}
	
	#usecontainer3 {
		margin-top: -80vh;
	}
	
	#contactcontainer2 {
		margin-top: -80vh;
	}
	
	#contactcontainer3 {
		margin-top: -80vh;
	}
}

@media only screen and (max-width: 1526px) {
	html {
		font-size: 12px;
	}

	.pagetitle {
		margin-left: -0.6rem;
	}
}

@media only screen and (max-width: 1195px) {
	html {
		font-size: 10px;
	}

	.pagetitle {
		margin-left: -0.8rem;
	}
}

@media only screen and (max-width: 945px) {
	html {
		font-size: 10px;
	}

	.pagetitle {
		margin-left: -0.8rem;
	}

	
}

@media only screen and (max-height: 750px) {
	.testimonialTitleContent {
		margin: 0 0 -4em 1.3em;
	}

	.pagetitleTestimonial {
		margin-top: 0em;
	}

	.pagetitle {
		font-size: 2.2rem;
	}

	.title {
		font-size: 3.5rem;
	}

	.startQuote {
		margin: 0 0 -1.2em -0.6em;
	}
	.endQuote {
		margin-top: -35px;
	}
}

@media only screen and (min-width: 1194px) and (max-height: 400px) {
	.sliderTextTop {
		margin: 0 0 4em 14em !important;
	}
}

@media only screen and (min-width: 767px) and (max-width: 1195px) {
	.testimonialTitleContent {
		margin-top: 4em;
	}

	.startQuote {
		margin-left: -20px;
	}
}

@media only screen and (min-width: 767px) and (max-width: 861px) {
	.topicButton {
		font-size: 1.3rem !important;
	}
}

.side-panel {
	top: 3rem;
	position: -webkit-sticky;
	position: sticky;
}
.centered-alptracker {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width:300px;
	width:40%
}