@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:400,700&display=swap');

/* Globale Definitionen
---------------------------------------------------------------------------------------------- */
* {
    box-sizing:border-box;
}

html, body {
    height: 100%;
    background-color: #FEFEFE;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}


/* General
---------------------------------------------------------------------------------------------- */

body {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #333 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    font-weight: 700;
    transition: all .2s ease-in-out;
}

h1{font-size: 2em !important;}
h2{font-size: 1.8em !important;}
h3{font-size: 1.6em !important;}
h4{font-size: 1.4em !important;}
h5{font-size: 1.2em !important;}
h6{font-size: 1em !important;}

#menu nav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    padding: 0;
    position: relative;
}

a {
    text-decoration: underline;
    transition: all .2s ease-in-out;
    color: #333;
}

a:hover {
    text-decoration: underline;
    color: #6ba0ae !important;
}


/* Parallax
----------------------------------- */
.parallax-mirror,
.parallax-window {
    overflow: visible !important;
    height: 100% !important;
    visibility: visible !important;
}

.slide-image {
    display: none;
}

/* curved div
----------------------------------- */
.container-fluid.curved {
    background-color: rgba(255, 255, 255, 0.75);
    margin: 100px 0;
}

.the-curve {
    width: 100%;
    fill: rgba(255, 255, 255, 0.75);
    height: 30px;
    position: absolute;
    left: 0;
    /* margin-top: -30px; */
    transform: translate(0,-100%);
}

.the-curve path {
    width: 100%;
}

/* Menu and Logo and Lead
----------------------------------- */
.slicknav_menu {
    display: none;
}

.logo .d-flex {
    width: 100%;
}

.logo a {
    margin: auto
}

.logo img {
    margin-top: 40px;
    height: 140px;
    width: auto;
}

#menu nav {
    width: 620px;
    position: absolute;
    top: 50px;
    right: 30px;
    max-width: 42%;
}

#menu ul li {
    padding: 0 2px;
}

#menu ul.menu_level_1 li a {
    color: #333;
    text-decoration: none;
}

#menu ul.menu_level_1 li a:hover {
    color: #333 !important;
    text-decoration: underline;
}

#menu ul.menu_level_1 li a.aktiv {
    color: #6ba0ae;
}

#menu ul.menu_level_1 li a.aktiv:hover {
    color: #6ba0ae !important;
}

.lead {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 150px;
}

.lead h1 {
    font-family: 'Roboto', sans-serif;
    color: #333;
    font-weight: 300;
}

/* Content
----------------------------------- */
.wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    flex: 1 0 auto;
}

.content .container {
    padding: 100px 0;
}

.content .offset-0 .ce-gallery:before {
    content: "";
    border-right: 15px solid #6ba0ae;
    display: block;
    height: 140px;
    right: 0;
    position: absolute;
    /* top: ; wird von jquery gemessen und in head geschrieben */
    transform: translate(0, -50%);
}

/* Content Icons
-------------------- */
.icon-container {
    margin-bottom: 200px !important;
}

.icons {
    text-align: center;
    padding: 50px 0 !important;
}

.icon-block {
    margin-top: 40px;
}

.icons a {
    color: #333 !important;
    text-decoration: none;
}

.icons h2 {
    padding-top: 30px;
}

.icons a:hover,
.icons a:hover h2 {
    color: #6ba0ae !important;
    text-decoration: none !important;
}

.icons a:hover img {
    filter: brightness(130%);
    transform: scale(110%);
}

.icons img {
    height: 70px;
    width: 70px;
    transition: all .2s ease-in-out;
}

/* Content Projekte
-------------------- */
.frame-layout-11 header {
    display: none;
}

.card-footer {
    text-align: center;
}

/* Flexible iFrames
-------------------- */
#iframe-container {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 30px;
  }
   
  .youtube {
    padding-bottom: 56.25%;
  }
   
  .map {
    padding-bottom: 65%;
  }
   
  #iframe-container iframe,
  #iframe-container object,
  #iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

/* Footer
----------------------------------- */
#footer {
    flex-shrink: 0;
}

.container-fluid.footer.curved {
    background-color: #333;
    margin: 200px 0 0 0;
}

.footer .container {
    padding: 25px 0;
    color: white;
    font-size: 0.8em;
    text-align: center;
}

.footer-curve {
    fill: #333;
}

.footer p {
    margin: 0;
}

.footer a {
    color: #fff;
    text-decoration: underline;
}

.footer a:hover {
    color: #6ba0ae !important;
}


/* Slick-nav
------------------------ */

.slicknav_menu {
    background-color: #6ba0ae!important;
    text-align: left;
}
 
.slicknav_btn {
	background-color: #9cc5d0!important;
    border-radius: 0 !important;
}

.slicknav_icon {
    margin: 0 !important;
    height: 20px;
}

.slicknav_nav {
    background-color: #6ba0ae !important;
}
 
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background-color: #9cc5d0!important;
}

.slicknav_menu a {
	color: #fff !important;
    border-radius: 0 !important;
    font-size: 1.2em;
}

.slicknav_menu a:hover {
	text-decoration: underline !important;
}

.slicknav_menu a.slicknav_item:hover a {
	color: #282b5f !important;
}



/*  @media, media-queries
---------------------------------------------------------------------------------------------------------------------------------------- */
 
/*  @media: Breakpoint Large (lg)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px)  {
 
    #menu nav {
        right: 10px;
    }
 
} /* end @media - Breakpoint Large (lg)» */
 
 
/*  @media: Breakpoint «Medium (md)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px)  {
 
    #menu {
        display: none;
    }

    .slicknav_menu {
        display: block;
    }

    .parallax-mirror,
    .parallax-window {
        display: none;
    }

    .slide-image {
        display: block !important;
        position: fixed;
        height: 100%;
        overflow: hidden;
    }

    .slide-image img {
        width: 130%;
        max-width: 150% !important;
    }

 
} /* end @media - Breakpoint «Medium (md)» */
 
 
 
/*  @media: Breakpoint «Small (sm)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
 
    .slide-image img {
        width: 160%;
    }
 
} /* end @media - Breakpoint «Small (sm)» */
 
 
 
 /*  @media: Breakpoint «X-Small (xs)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
 

 
} /* end @media - Breakpoint «X-Small (xs)» */