@font-face {
  font-family: 'Nunito Sans';
  src: url('../Fonts/nunito-sans.regular.ttf');
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(191, 229, 227, 1) 100%);
    font-weight: 200;
}

a:hover {
	text-decoration: none;
}

.h1, .h2, .h3, h1, h2, h3 {
	color: #1cbb83;
}

section#footer h1,
section#footer h2 {
	color: white;
}

section#content .website_content.start h1 {
	margin-bottom: 20px;
    font-size: 30px;
}

header hr {
    border-color: #1cbb83;
    margin: 0 0 20px;
    border-width: 1px;
}

.website_content.start hr,
div.col h1 hr {
	display: none;
}


section#header_contact {
	width: 100%;
	height: 60px;
	text-align: right;
	line-height: 15px;
	font-size: 15px;
    top: 0;
    position: fixed;
    z-index: 100;
}

section#header_contact .website_content {
	height: 60px;
    background: white;
}

section#header_contact p {
	margin-top: 35px;
	display: inline-block;
}

section#header_contact a {
	font-weight: 400;
	color: #036d4a;
}

section#header_contact a:hover {
	text-decoration: underline;
}

section#header_contact u { text-decoration: none; }

div.website_content {
	max-width: 1140px;
	margin: 0 auto;
	position: relative;
}

div.website_content.start {
	min-height: 200px;
	background: #bfe5e3;
	padding: 60px 50px 50px 50px;
}

section#content {
    z-index: 5;
}

section#navigation {
	top: 60px;
    position: sticky;
    z-index: 10;
}

nav#header_menu {
	font-size: 20px;
	margin-bottom: 0;
    margin-top: -110px;
    font-weight: 400;
}

div.navbar-header, section#header_image_mobile {
	display: none;
}

a.vi-logo {
	background: url('/images/header/vi-header-logo.png') transparent;
	width: 94px;
	height: 60px;
    margin-top: 20px;
    float: left;
    display: none;
}

.start a.vi-logo {
	display: block;
}

div.navbar-header > a.vi-logo {
	width: 50px;
	height: 32px;
	background-size: cover;
	margin: 15px 0 0 15px;
}

section#navigation.start .navbar {
	position: fixed;
    margin-top: 60px;
    z-index: 10;
}

.navbar-fixed-bottom, .navbar-fixed-top {
    position: relative;
    text-transform: uppercase;
}

nav#header_menu img {
	width: 450px;
	height: auto;
	margin-bottom: 10px;
}

#navigation.start {
	margin-top: 60px;
}

.navbar-brand {
	padding: 0;
}

nav#header_menu div#navbar {
	flex-grow: 1;
	padding: 0 30px;
	background: #1cbb83;
}

#navigation.start nav#header_menu div#navbar {
	background: linear-gradient(rgba(3, 109, 74, 1) 0%, rgba(136, 225, 225, 1) 100%);
}

.navbar-inverse {
	background-color: transparent;
	border: 0;
}

ul.navbar-nav li aul.navbar-nav li a,
.navbar-inverse .navbar-nav>li>a {
	color: #bfe5e3;
	text-transform: uppercase;
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {
	background-color: transparent;
}

.navbar-fixed-top .navbar-collapse {
	padding-right: 15px;
}

.nav .open>a, .nav .open>a:focus,
.nav .open>a:hover,
.nav>li>a:focus, .nav>li>a:hover, a.dropdown-toggle:hover {
	background: rgb(191,229,227);
	background: linear-gradient(transparent 0%, rgba(3,109,74,1) 100%);
}

.navbar-inverse .navbar-nav>.open a,
.navbar-inverse .navbar-nav>.open a:hover,
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
	color: white;
}

.navbar-inverse .navbar-nav>.active>a {
	color: white;
}

.navbar-nav a:hover,
{
	color: white;
}

/** **/

.dropdown-menu {
	background-color: white;
	border: 0;
	font-size: 18px;
	border-radius: 0;
	-webkit-box-shadow: 2 3px 4px rgba(0,0,0,.175);
	box-shadow: 2px 3px 4px rgba(0,0,0,.175);
}

.dropdown-menu>li>a {
	padding: 6px 10px;
	font-weight: lighter;
}

.dropdown-menu>li>a:hover {
	color: #80a1c1;
	background: white;
}


nav#header_menu .website_content {
	display: flex;
	justify-content: space-between;
	padding-right: 0;
	padding-left: 0;
}

a.menu_button {
	color: white;
    background-color: #80a1c1;
    border: 0;
    padding: 7.5px 15px;
    height: 40px;
    margin-top: 10px;
}

a.menu_button:hover {
	background: #cae0f6;
	color: #184c72;
}

section#header_image {
    margin-top: 60px;
    z-index: 0;
}

section#header_image.start {
    margin-top: 160px;
}

section#header_image .website_content > img {
	max-width: 100%;
	position: fixed;
}

section#header_image.start .website_content > img {
	position: relative;
}

section#ov_start #augen_start {
	width: 100%;
	z-index: 100;
    position: fixed;
}

section#ov_start .website_content {
    height: 754px;
    width: 100%;
    margin-top: -63px;
}

div#header_welcome img {
    height: 100%;
}

div#welcome_mobile,
div#info_mobile,
div#header_welcome_mobil { display: none; }

section#header_image .website_content {
    height: 350px;
    background: #1cbb83;
}

section#header_image.start .website_content {
	min-height: fit-content;
	background: url(/images/header/vi-header-startseite.png) transparent;
    z-index: 0;
    height: auto;
}

section#header_image > img {
    max-width: 1140px;
    left: 50%;
    position: absolute;
    margin-left: -570px;
}

section#header_image #header_welcome {
	position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

section#header_image #header_image_content {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
    right: 60px;
}

nav#header_menu + section#content {
	margin-top: 0;
}

section#content .website_content {
	background-color: #fcfefe;
	color: #036d4a;
	font-size: 16px;
	padding: 60px 50px 50px 50px;
}

section#content .website_content ul {
	padding-left: 56px;
}

section#content .website_content h3 {
	font-size: 18px;
    margin: 0 0 8px;
}

section#content .website_content h2 {
	font-size: 20px;
	margin-top: 1.5rem;
}

section#content .website_content h1 {
	font-weight: 200;
    font-size: 34px;
    margin: 0 0 5px;
}

section#content a {
	color: #a79d9e;
}

section#footer_text .website_content {
	background: white;
    padding: 0 20px 20px;
    text-align: end;
    color: #1cbb83;
}

div#footer_text_heading {
	display: none;
}

div#footer_text_slogan {
	font-size: 40px;
}

section#footer .website_content {
	background-color: #95cfcc;
	color: white;
	padding-top: 40px;
	padding-bottom: 0;
	font-size: 18px;
    font-weight: lighter;
}

section#footer .website_content h2 {
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 22px;
	
}

section#footer .website_content header hr {
	display: none;
}

section#footer .website_content .row {
    margin: 0;
}

section#footer .website_content .footer_separator {
	width: 100%;
	height: 1px;
	background-color: #ede3e4;
	position: absolute;
    top: 70px;
}

section#footer .website_content a {
	color: white;
}

section#footer .website_content a:hover {
	color: #184c72;
}

section#footer div.bottom {
	background: #154325;
	color: #95cfcc;
	line-height: 40px;
    padding: 0 15px 0 20px;
}

section#footer div.bottom a {
	color: white;
}

section#footer div.bottom a:hover {
	color: #cae0f6;
}

section#footer span.copyright { float: right; }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	padding-right: 20px;
	padding-left: 20px;
}

table.contenttable tr td:first-child {
	white-space: nowrap;
}

table.contenttable tr td {
	vertical-align: top;
	padding: 0 10px 10px 0;
}

table.contenttable tr td:last-child {
	padding-right: 0;
}

/** Three Columns **/

div.multicolumn.threecols {
	display: flex;
    margin-top: 30px;
    justify-content: space-between;
}

div.multicolumn.threecols .col {
    width: 32%;
    padding: 20px;
    background: #dff9f8;
}

section#content .website_content div.multicolumn.threecols .col h1 {
	font-weight: 200;
    text-align: center;
    font-size: 26px;
}

div.multicolumn.threecols .col p {

}

div.multicolumn.threecols .col .ce-gallery {
    margin: 25px 0 35px;
}

div.multicolumn.threecols .col .ce-gallery img {
    width: 100%;
}



/** GALERIE **/
#photos img {
	height: auto;
    max-width: 100%;
}

#photos a {
    margin: 0 10px 10px 0;
    display: inline-block;
    width: calc(25% - 10px);
    overflow: hidden;
}

#photos a {
    overflow: hidden;
}

#photos a:nth-of-type(4n) {
  margin-right: 0;
}

#photos a:hover img {
  transform: scale(1.05);
}

.ce-gallery figure {
  width: 100%;
}

.ce-gallery figcaption {
	display: inline;
}

.ce-gallery {
	margin-top: 10px;
}

/** AKKORDEON **/
 
.ce-accordion h2, .ce-accordion h3 {
    cursor:pointer;
    padding: 7px 10px;
    background: rgba(255,255,255,0.8);
    margin-bottom: 0;
}

.ce-accordion.close h2, .ce-accordion.close h3 {

}
 
.close .ce-textpic {
    display:none;
}

.ce-accordion h2::before, .ce-accordion h3::before {
    position: relative;
    top: -2pt;
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
	width: 0.4em;
    height: 0.4em;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #484861;
    transform: rotate(180deg);
}

.ce-accordion.close h2::before, .ce-accordion.close h3::before {
    transform: rotate(90deg);
}

.ce-accordion .ce-bodytext {
	padding: 7px 10px;
	background: rgba(255,255,255,0.3);
}

.ce-accordion.close {
	float: none;
    font-size: initial;
    font-weight: initial;
    line-height: initial;
    color: inherit;
    opacity: initial;
    text-shadow: none;
}

.c-liste {}

/** Google Maps Opt-out **/
div.map-placeholder {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 10px 20px 20px;
}
button#map-privacy-check-once {
	background: #80a1c1;
	color: #fff;
	border: 0;
	padding: 7.5px 15px;
}

/** Inside **/

	.ce-intext.ce-left .ce-gallery { margin: 1.5rem 2rem 3rem 0; width: 15%; }
	.ce-gallery img {
    	display: block;
    	width: 100%;
    	height: auto;
	}
	
#c23 .ce-inner {
	display: flex;
}

#c23 .ce-row {
	margin: 0 20px 20px 0;
	float: left;
}

#c23 div.ce-inner div.ce-row:nth-child(5n) {
    margin-right: 0;
}

#c23 .ce-center .ce-outer,
#c23 .ce-center .ce-inner {
	width: 100%;
}

/** Portfolio **/

	.ce-intext.ce-left .ce-gallery { margin: 1.5rem 2rem 3rem 0; width: 15%; }
	.ce-gallery img {
    	display: block;
    	width: 100%;
    	height: auto;
	}
	
#c25 .ce-column {
	background-color: #dff9f8;
    padding: 20px;
    margin: 0;
    height: 360px; 
}

#c25 .ce-row {
    width: calc((100% - 50px) / 3);
	margin: 0 25px 25px 0;
	float: left;
}

#c25 div.ce-inner div.ce-row:nth-child(3n) {
    margin-right: 0;
}

#c25 .ce-center .ce-outer,
#c25 .ce-center .ce-inner {
	width: 100%;
}

section#content .website_content #c25 ul {
	padding-left: 15px;
	list-style-type: circle;
}

section#content .website_content #c25 h3 {
	margin-top: -5px;
}

@media only screen and (min-width: 768px) {
	.navbar-nav>li>a {
		padding: 30px 20px 20px 20px;
	}
	section#navigation.start .navbar-nav>li>a {
		padding: 60px 20px 20px 20px;
	}
	
	ul.navbar-nav {
    	float: right;
	}
}

@media only screen and (min-width: 768px) {
	.container {width: initial;}
}

@media only screen and (max-width: 1140px) {
	nav#header_menu .website_content,
	section#header_contact .website_content {

    }
    .navbar-nav>li>a {
		
	}
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0; }
    
    section#header_contact p { margin-right: 10px; }
}

@media only screen and (max-width: 1080px) {
	section#header_image > img { width: 100%; left: 0; margin-left: 0; }
}

@media only screen and (max-width: 1030px) {
	section#content .website_content .ce-gallery h2 {
		font-size: 17px;
	}
	section#content .website_content .ce-gallery h3 {
		font-size: 15px;
	}
	section#content .website_content .ce-gallery ul,
	section#content .website_content .ce-gallery p {
		font-size: 13px;
	}
	
	#c25 .ce-column { height: 340px; }
}

@media only screen and (max-width: 980px) {

}

@media only screen and (max-width: 930px) { /* Termin vereinbaren nach unten */
	#header_menu a.menu_button { display: none; }
	section#header_image #header_image_content {  }
	.navbar-fixed-top .navbar-collapse, nav#header_menu .website_content { padding-right: 0;}
	a.menu_button { margin-top: 0; padding: 9.5px 0 7.5px;}
	section#header_image .website_content { min-height: 300px; }
}

@media only screen and (max-width: 890px) { 
	section#header_image .website_content { min-height: 220px; }
	#c25 .ce-row { width: calc((100% - 25px) / 2); }
	#c25 div.ce-inner div.ce-row:nth-child(3n) { margin-right: 25px;}
	#c25 div.ce-inner div.ce-row:nth-child(2n) { margin-right: 0; }
	#c25 .ce-column { height: 330px; }
}
}

@media only screen and (max-width: 830px) { 
	
}

@media only screen and (max-width: 800px) { 
	
}

@media only screen and (max-width: 767px) { /* ab MEDIUM */
	/* FONTS */
	section#content .website_content { font-size: 1.5rem; padding: 30px 20px; }
	section#content .website_content h2 { font-size: 2rem; }
	section#content .website_content h1 { font-size: 2.5rem; }
	section#footer .website_content { font-size: 1.75rem; padding-top: 10px; }
	section#footer .website_content h2 { font-size: 2.5rem; margin-top: 15px; }
	.footer_separator { display: none; }
	/* LAYOUT */
	section#header_image_mobile { display: block; }
	section#header_image { display: none; }
	section#header_contact div.website_content,
	nav#header_menu .website_content {
    	display: block;
    	justify-content: initial;
	}
	nav#header_menu { 
		padding: 0;
    	background: linear-gradient(rgba(3, 109, 74, 1) 0%, rgba(136, 225, 225, 1) 100%);
    }
    div.navbar-header, a.vi-logo { display: block; }
	section#navigation.start .navbar, #navigation.start { margin-top: 0; }
	/* MENU */
	.navbar-inverse .navbar-toggle .icon-bar { background-color: white; width: 25px; height: 5px;}
	.navbar-fixed-bottom, .navbar-fixed-top { position: fixed; }
	.container { width: initial; }
	.container>.navbar-header { margin: 0; }
	nav#header_menu { margin-top: 0; }
	nav#header_menu img { margin-left: 0; width: 250px; height: auto; }
	.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle {
		background: linear-gradient(rgba(26, 121, 89, 1) 0%, rgba(181, 221, 219, 1) 100%) transparent;
	}
	.navbar-inverse .navbar-toggle.collapsed:focus, .navbar-inverse .navbar-toggle.collapsed:hover, .navbar-inverse .navbar-toggle.collapsed { background: transparent; }
	
	section#header_contact { display: none; }
	.navbar-inverse .navbar-toggle { border: 0; margin-top: 10px; }
	.navbar-toggle .icon-bar+.icon-bar { margin-top: 3px; }
	.navbar-toggle { border-radius: 0; margin-right: 10px; padding: 9px 10px 20px 10px; margin-bottom: 0;}

	.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav>li>a:focus, .nav>li>a:hover, a.dropdown-toggle:hover { background: #ddebfb; }
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {color: #184c72;}
	nav#header_menu div#navbar {     margin: 0; padding: 0; border: 0; background: #95cfcc; width: 148px; right: 10px; position: absolute;}
	nav#header_menu .website_content { padding: 0; }
	.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { padding: 15px 15px 10px 20px; display: table; }
	nav#header_menu img { margin-bottom: 0; }
	.nav>li>a:hover, .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
		background: #ddebfb;
	}
	#navigation nav#header_menu div#navbar, #navigation.start nav#header_menu div#navbar { background: url('/images/header/menu-bg.png') no-repeat #95cfcc; font-weight: 200; }
	.dropdown-menu li, ul.dropdown-menu { background: #eef5fd;}
	div#navbar > a.vi-logo { display: none; }
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a,
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a, 
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus, 
	.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover { color: #184c72; background-color: inherit; }
	.navbar-nav .open .dropdown-menu>li:first-child>a { padding-top: 10px; }
	.navbar-nav .open .dropdown-menu>li:last-child>a { padding-bottom: 10px; }
	.navbar-nav { margin: 0; }
	.navbar-nav>li>a { padding: 15px 10px 10px 10px; }
	ul.navbar-nav li aul.navbar-nav li a, .navbar-inverse .navbar-nav>li>a { color: #036d4a; }
	.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a { padding: 5px 10px 5px 10px; }
	#buttons_contact {
    	position: absolute;
    	top: 80px;
    	right: 45px;
	}
	.navbar-header a.header {
		width: 25px;
    	height: 25px;
    	display: block;
    	position: absolute; }
	.navbar-header a.tel { background: url(/images/header/kontakt-logo-tel.png) no-repeat; top: 37px; }
	.navbar-header a.mail { background: url(/images/header/kontakt-logo-email.png) no-repeat; }
	/* HEADER IMAGE */
	#header_image_mobile, section#header_image_mobile.start { margin-top: 52px; }
	#header_image_mobile img { width: 100%; }
	
    /* CONTENT */
    section#content { margin-top: 60px; }
    section#content.start { margin-top: 0; }
	
	iframe { max-width: 100%; }
	
	div#footer_text_heading { display: block; font-size: 50px; }
	div#footer_text_slogan { font-size: 27px; }
	.ce-intext.ce-left .ce-gallery { width: 20%; }
	#c25 .ce-column { height: 320px; }
}

@media only screen and (max-width: 650px) { 
	section#header_image .welcome_box h1 { font-size: 2.5rem; margin-bottom: 5px;}
    section#header_image .welcome_box p.big { font-size: 2.25rem; }
    section#header_image .welcome_box p { font-size: 1.5rem; margin-bottom: 5px; }
    section#header_image div#header_image_content { right: 70px; }
    div.multicolumn.threecols .col {
    	width: 100%;
    	padding: 20px;
	}
	div.multicolumn.threecols {
    	flex-direction: column;
    	gap: 20px;
	}
	#c19 div.ce-textpic, #c20 div.ce-textpic, #c21 div.ce-textpic {
		
	}
	#c25 .ce-column { height: 310px; }
	#c23 .ce-row { margin: 0 10px 10px 0; }
	
}

@media only screen and (max-width: 550px) { 
	section#header_image div#header_image_content { right: 60px; }
	#c25 .ce-row { width: 100%; }
	#c25 div.ce-inner div.ce-row { margin-right: 0;}
	#c25 .ce-column { height: auto; }
	section#content .website_content .ce-gallery h2 { font-size: 22px; }
	section#content .website_content .ce-gallery h3 { font-size: 18px; }
	section#content .website_content .ce-gallery ul { font-size: 16px; }
}

@media only screen and (max-width: 500px) { 
	#header_image_content,
	section#header_image .website_content > img.header_start { display: none; }
	section#header_image .website_content { min-height: auto; height: auto; }

    section#header_image div#header_image_content { 
    	justify-content: flex-start;
    	position: relative;
    	margin: 0 20px;
    	right: 0;
    	background: #a6bdd3;
    	color: white;
    	font-size: 1.75rem; 
    }
    
    .ce-left .ce-gallery, .ce-column {
		float: none;
	}
	.ce-gallery figure {
		display: block;
	}
	
	.ce-intext.ce-left .ce-gallery { width: 65%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0; }
	
	section#content .website_content #c19 h2,
	section#content .website_content #c20 h2,
	section#content .website_content #c21 h2 {
		margin-top: 2rem;
	} 
	
	#c19,
	#c20,
	#c21 {
		margin-top: 40px;
	} 
}

@media only screen and (max-width: 400px) { /* SMALL */
	section#header_image.start .website_content {
		background: url(/images/header/vi-header-startseite_mobil.png) transparent no-repeat center center;
		 -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	}
	section#content .website_content .ce-gallery h2 { font-size: 20px; }
	section#content .website_content .ce-gallery h3 { font-size: 16px; }
	section#content .website_content .ce-gallery ul { font-size: 14px; }
}

@media only screen and (max-width: 380px) { 
	nav#header_menu img {
    	width: 200px;
    	margin-top: 6px;
}

@media only screen and (max-width: 350px) { 
	nav#header_menu img {
    	width: 170px;
    	margin-top: 8px;
}