@import url('https://fonts.googleapis.com/css?family=Raleway|Special+Elite');

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.page-header {
    border: none;
    margin: 0;
    padding: 0;
}

html, body, header {
    height: auto;
}

header {
    min-height: 150px;
    margin: 0 55px 0 55px;
}

header .slideshow .slick-container img {
    object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.nav::before, .nav::after {
    content: normal;
}

hr {
    margin: 65px;
    border: 0;
    border-top: 2px solid#3d3c3f;
}

input, button, select, textarea {
    font-family: 'Raleway', Verdana, sans-serif;
}

.nav > li > a > img {
    max-width: 100%;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
}

.nav-tabs > li > a:hover {
    border-color: transparent;
}

#navigation {
    border: none;
    float: right;
    margin-top: 5px;
}

td, th, label, dt {
    font-weight: 300;
}

ul, ol {
    margin: 0 0 10px 0;
    padding: 0 0 0 20px;
}

ul ul, ol ul, ul ol, ol ol {
    margin: 6px 0;
    padding: 0 0 0 15px;
}

a:hover, a:focus {
    text-decoration: none;
}

option, .chzn-results {
    background: white;
    color: #666;
    padding: 4px 7px;
}

.clr {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.clear {
    clear: none !important;
}

.clear:after {
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    content: ".";
}

.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

audio:not([controls]) {
    display: none;
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

button, input {
    *overflow: visible;
    line-height: normal;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

input[type="search"] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

img.full {
    width: 100%;
    height: 100%;
}

/**     Hide the outline   **/

*:hover, *:active, *:focus, input:focus, textarea:focus {
    outline: none !important;
}

/**   resize image   **/

#mapcanvas img, .gmnoprint img {
    max-width: none;
}

/***    SITE      ***/

body {
    margin: 0;
    text-align: left;
    color: #000;
    font: normal 1.3em/1.5 'Raleway', sans-serif;
    font-weight: 300;
    background-color: #fff;
}

p {
    margin: 0 0 10px 0;
}

/**    SITE   **/

main{
    margin: 0 165px 110px 110px;
}

.main.noslideshow {
    margin-top: 100px;
}

.zindex10 {
    position: relative;
    z-index: 10;
}

.zindex20 {
    position: relative;
    z-index: 20;
}

.zindex30 {
    position: relative;
    z-index: 30;
}

.zindex40 {
    position: relative;
    z-index: 40;
}

.zindex50 {
    position: relative;
    z-index: 50;
}

/*********************************************      Translate      ***********************************/

.translate {
    z-index: 99;
    vertical-align: middle;
    padding: 10px;
    text-align: center;
    margin-top:65px;
}

.translate a, .translate a:hover {
    color: #333;
    margin: 0 5px;
}

.translate .active {
    margin: 0 5px;
    color: #999;
}

.translate a, .translate a:hover {
    color: #ffffff;
    font-size: 100%;
    padding: 10px 0 0 0;
}

.translate span.active {
    display: none;
}

/*********************************************      LOGO      ******************************************/

/***      DROP DOWN MENU       ***/

.drop-down {
    position: relative;
    margin: 0 auto;
    z-index: 99;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

span.title_menu {
    display: none;
}

.drop-down ul, .drop-down li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.drop-down li {
    position: relative;
    padding: 0;
    z-index: 1;
}

.drop-down li:hover, .drop-down li.hover, .drop-down li:focus {
    position: relative;
    z-index: 10;
    cursor: default;
}

.drop-down li ul {
    display: none;
    position: relative;
    z-index: 0;
    opacity: 0;
    padding: 0;
    margin-left: 10px;
    font-size: 100%;
}

.drop-down li ul ul {
    font-size: 100%;
}

.drop-down li ul:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.drop-down li li {
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.drop-down li a, .drop-down li span.separator {
    display: block;
    padding: 10px;
    font-weight: 300;
    font-size: 120%;
    text-decoration: none;
    text-transform: none;
    text-align: center;
    color: #010101;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    word-wrap: break-word;
}

.uppercase-none .drop-down li a, .uppercase-none .drop-down li span.separator {
    text-transform: none;
}

.drop-down li li a, .drop-down li li span.separator {
    display: block;
    padding: 10px 0;
    margin: 0 -50px;
    color: #ffffff;
    font-size: 100%;
}

.drop-down li li:last-child a, .drop-down li li:last-child span.separator {
    border-bottom: none;
}

.drop-down li a:hover, .drop-down li span.separator:hover {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.drop-down li.active > ul {
    z-index: 10;
    opacity: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.drop-down > ul > li {
    display: inline-block;
    *display: inline;
    *zoom;: 1;
    padding: 0;
}

.drop-down > ul > li > ul {
    top: 100%;
    left: 0;

}

.drop-down li:hover > ul, .drop-down li.hover > ul {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    top: 100%;
    opacity: 1;
    margin: 0;
    padding-top: 20px;
}

.drop-down.white {
    background: #fefefe;
    border-bottom: 1px solid #CECECE;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.drop-down.white li a {
    color: #666666;
}

.drop-down li.active > a, .drop-down li.active > span, .drop-down li:hover > a, .drop-down li:hover > span {
    border-bottom: 5px solid #009fe3;
}

*[class^="fa-"]:before {
    color: #fff;
}



/***      MODULE IMAGE      ***/

.slideshow {
    margin: 0;
    min-height: 100px;
}

/***     MIDDLE SITE      ***/

.main_content {
    position: relative;
    padding: 0;
    overflow: hidden;
    z-index: 1;
}

.main_component {
    position: relative;
    overflow: hidden;
    padding: 0 0 10px 0;
    z-index: 1;
}

/***     TYPOGRAPHY      ***/

h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 8px 0;
    font-weight: normal;
    line-height: 1.4;
    text-rendering: optimizelegibility;
}

h1 {
    color: #3d3c3f;
    display: block;
    font-size: 160%;
    line-height: 1.5;
    margin: 20px 0 10px 0;
    padding: 0 0 7px 0;
    font-family: 'Special Elite', serif;
    font-weight: 300;
}


h1 a {
    text-decoration: none;
}

h1 a:hover {
    text-decoration: none;
}

.blog > h1 {
    color: #666;
}

h2 {
    font-size: 120%;
    color: #bd1d1d;
    margin-bottom: 25px;
    letter-spacing: 3px;
}

h2 a {
    text-decoration: none;
}

h2 a:hover {
    text-decoration: none;
}

h3 {
    font-size: 105%;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: #333;
    display: inline-block;
    padding: 4px 8px;
    color: #fff;
}

h4 {
    font-size: 120%;
}

h5, h6 {
    font-size: 100%;
}

/**      LINK    **/

a {
    color: #b90f0f;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.4s linear 0.1s;
    -moz-transition: color 0.4s linear 0.1s;
    -ms-transition: color 0.4s linear 0.1s;
    -o-transition: color 0.4s linear 0.1s;
    transition: color 0.4s linear 0.1s;
}

a:hover {
    color: #b90f0f;
    text-decoration: none;
    -webkit-transition: color 0.2s linear 0s;
    -moz-transition: color 0.2s linear 0s;
    -ms-transition: color 0.2s linear 0s;
    -o-transition: color 0.2s linear 0s;
    transition: color 0.2s linear 0s;
}

a:active, a:focus {
    outline: none;
}

.website-content a {
    color: #c1cc00;
}


.website-content *[class^="fa-"]:before {
    color: #333;
}

.home .website-content > .wrapper {
    padding: 0;
}

.website-content > .wrapper {
    padding: 25px 0;
}

li span.separator {
    cursor: default;
}

.website-content li{
    list-style: square;
}

.website-content ul {
    padding: 0;
    margin: 0 0 0 25px;
}

.website-content li:after, .bottom li:after {
    content: ' ';
    display: block;
    padding: 0;
    width: 200px;
    margin: 5px auto;
    border-bottom: none;
}

/**      List with Font Awesome     **/

ul.check li, ul.chevron li, ul.angle li, ul.angle-double li, ul.circle li, ul.circle-o li, ul.star li, ul.star-o li, ul.tag li, ul.thumbs-o-up li, ul.check-square-o li, ul.arrow-circle li, ul.caret-simple li, ul.chevron-circle li, ul.chevron li, ul.hand-o li, ul.share li {
    list-style: none;
    margin: 0 0 8px 0;
}

ul.check li:before, ul.chevron li:before, ul.angle li:before, ul.angle-double li:before, ul.circle li:before, ul.circle-o li:before, ul.star li:before, ul.star-o li:before, ul.tag li:before, ul.thumbs-o-up li:before, ul.check-square-o li:before, ul.arrow-circle li:before, ul.caret-simple li:before, ul.chevron-circle li:before, ul.chevron li:before, ul.hand-o li:before, ul.share li:before {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-family: fontawesome;
    vertical-align: middle;
    margin-left: -11px;
    width: auto;
    margin-right: 8px;
}

ul.check li:before, ul.chevron li:before, ul.star li:before, ul.star-o li:before, ul.tag li:before, ul.thumbs-o-up li:before, ul.check-square-o li:before, ul.caret-simple li:before, ul.chevron-circle li:before, ul.chevron li:before, ul.hand-o li:before, ul.share li:before {
    font-size: 60%;
}

ul.angle li:before, ul.angle-double li:before, ul.arrow-circle li:before {
    font-size: 80%;
}

ul.circle li:before, ul.circle-o li:before {
    font-size: 40%;
}

ul.check li:before {
    content: "\f00c";
    color: #00569d;
    font-size: 100%;
}

ul.check li:after {
    content: "";
    border: 0;
}

ul.check-square-o li:before {
    content: "\f046";
}

ul.chevron li:before {
    content: "\f054";
}

ul.angle-double li:before {
    content: "\f101";
}

ul.angle li:before {
    content: "\f105";
}

ul.circle li:before {
    content: "\f111";
}

ul.circle-o li:before {
    content: "\f10c";
}

ul.star li:before {
    content: "\f005";
}

ul.star-o li:before {
    content: "\f006";
}

ul.thumbs-o-up li:before {
    content: "\f087";
}

ul.hand-o li:before {
    content: "\f0a4";
}

ul.arrow-circle li:before {
    content: "\f0a9";
}

ul.caret-simple li:before {
    content: "\f0da";
}

ul.chevron-circle li:before {
    content: "\f138";
}

ul.share li:before {
    content: "\f064";
}

ul li > h2, ul li > h3, ul li > h4 {
    margin-top: 0;
    padding-top: 0;
}

/**    Unordered lists without bullet     **/

ul.simple li {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 8px 12px;
    border-left: 2px solid #ddd;
    border-color: rgba(0, 0, 0, 0.10);
    background: #f5f5f5;
    background: rgba(0, 0, 0, 0.06);
}

/***     COLUMN LAYOUTS     ***/

.one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth {
    float: left;
    margin: 0;
}

.one-half {
    width: 50%;
}

.one-third {
    width: 33.3%;
    margin: 0;
    overflow: hidden;
}

.website-content .blue:nth-child(odd) .one-third {
    float: right;

}

.two-third {
    width: 66.6%;
}

.one-fourth {
    width: 25%;
}

.two-fourth {
    width: 50%;
}

.three-fourth {
    width: 75%;
}

.one-fifth {
    width: 20%;
}

.two-fifth {
    width: 40%;
}

.three-fifth {
    width: 60%;
}

.four-fifth {
    width: 80%;
}

.last {
    margin-right: 0 !important;
}

.last + * {
    clear: both;
}

.rowborder .one-third, .rowborder .two-third, .rowborder .one-half, .rowborder .rowcell.last {
    padding: 5px;
}

.rowborder .ce-media, .rowborder .ce-bodytext {
    padding: 50px;
}

.rowcell.last {
    padding-right: 0px;
}

/***     FOOTER     ***/

.home footer{
    display: none;
}

footer {
    position: relative;
    clear: both;
}

footer .content{
    position: relative;
    padding: 0;
    margin: 10px 110px;
    background: #374650;
    color: #6c6c6c;
}

footer a {
    color: #fefefe;
}


footer h3 {
    margin-top: 0;
    color: #009fe3;
    font-family: 'Montserrat', sans-serif;
}

footer .imprint {
    text-align: center;
}

footer .imprint a{
    color: #6c6c6c;
}

footer .wrapper{
    max-width: none;
}

footer .content .textonly{
    padding: 45px 10px 45px 20px;
}
footer .content .ce-gallery{
    padding: 85px 30px;
}
footer .one-third:first-child {
    background: #fff;
    text-align: center;
}

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


/***     SCROLL TO TOP     ***/

#toTop {
    bottom: 50px;
    cursor: pointer;
    display: none;
    position: fixed;
    right: 27px;
    text-align: center;
    z-index: 999;
}

#toTop .icon-up:before {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-family: fontawesome;
    content: "\f0aa";
    font-size: 28px;
    color: #FFFFFF;
    opacity: 0.65;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#toTop:hover .icon-up:before {
    opacity: 1;
}

#toTopText {
    display: none;
}

#toTop span {
    color: #FFFFFF;
}

/***    Imprint   ***/
.imprint {
    text-align: center;
    font-size: 80%;
}

.theme-magnificPopup li:after {
    border: 0;
    margin: 0;
    display: inherit;
}

.theme-magnificPopup .pagination > li > a, .pagination > li > span {
    padding: 0;
    background: none;
    border: 0;
}

/** Image Effekt **/

div.csc-textpic .csc-textpic-imagewrap .magnificpopup img {
    border: 2px solid #00569d;
    margin: 5px;
}

.website-content .button {
    display: inline-block;
    color: #00569d;
    border: 1px solid #00569d;
    border-radius: 5px;
    min-width: 210px;
    margin: 20px;
    padding: 5px 10px;
}

.website-content .button-small, .website-content .linkbtn {
    display: inline-block;
    color: #fff;
    border: 1px solid #00569d;
    background: #00569d;
    margin: 10px;
    padding: 5px 25px;
}

.iframe iframe {
    pointer-events: none;
}

/**** Figure Figcaption overlay ****/

figcaption {
    color: white;
    font-size: 18px;
    float: left;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    display: block;
}

figcaption:hover {
    opacity: 0.9;
}

figure {
    position: relative;
    float: left;
    max-width: 100%;
    overflow: hidden;
}

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

.slick-container figcaption:hover {
    opacity: 0;
}

header .slick-slider figure, header .slick-slider img {
    min-width: 100%;
}

.one-two figure img {
    max-width: none;
    max-height: none;
}

.two-one figure img {
    max-width: none;
    max-height: none;
}

.two-third img, .two-third figure {
    width: 100%;
}

ul .last {
    overflow: inherit;
}

figcaption {
    text-align: left;
}

figcaption h3 {
    margin: 0;
    padding-bottom: 15px;
    font-size: 200%;
    color: #fff;
}

.ce-intext.ce-right .ce-gallery {
    margin: 0px;
}

.top-header {
    display: none;
}

/**** Figure with centered figcaption ***/

.overlay-figure {
    position: relative;
    display: inline;
    width: 100%;
    overflow: hidden;
}

.overlay-figure-content {
    width: 100%;
    -webkit-transform: scale(1.0) translateZ(0);
    -moz-transform: scale(1.0) translateZ(0);
    transform: scale(1.0) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s ease 0.25s;
    -moz-transition: -moz-transform 0.5s ease 0.25s;
    transition: transform 0.5s ease 0.25s;
    overflow: hidden;
}

.overlay-figure-content > img {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.overlay-figure-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    background-image: linear-gradient(to bottom, rgba(38, 50, 72, 0.5), rgba(38, 50, 72, 0.85));
}

.overlay-figure:hover
.overlay-figure-background {
    opacity: 1;
}

.overlay-figure-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
    -webkit-transition: opacity ease 0.25s;
    -moz-transition: opacity ease 0.25s;
    transition: opacity ease 0.25s;
}

.overlay-figure:hover
.overlay-figure-caption {
    opacity: 1;
}

.overlay-figure-caption
.contents {
    display: table;
    width: 100%;
    height: 100%;
}

.overlay-figure-caption
.contents-stack {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 50px;
}

.overlay-figure-caption
.title {
    display: block;
    margin-bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(-100%) translateZ(0);
    -moz-transform: translateY(-100%) translateZ(0);
    transform: translateY(-100%) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
    -moz-transition: -moz-transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
    transition: transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
}

.overlay-figure:hover
.title {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    -moz-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
}

.overlay-figure
.separator {
    display: block;
    margin: 12px auto;
    height: 2px;
    width: 30%;
    background-color: white;
    -webkit-transform: scaleX(0) translateZ(0);
    -moz-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0);
    -webkit-transition: -webkit-transform 0.25s ease 0.25s;
    -moz-transition: -moz-transform 0.25s ease 0.25s;
    transition: transform 0.25s ease 0.25s;
}

.overlay-figure:hover
.separator {
    -webkit-transform: scaleX(1) translateZ(0);
    -moz-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0);
}

.overlay-figure-caption
.text {
    display: block;
    margin-top: 0;
    opacity: 0;
    -webkit-transform: translateY(100%) translateZ(0);
    -moz-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
    -moz-transition: -moz-transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
    transition: transform 0.5s ease 0.25s, opacity 0.15s ease 0.25s;
}

.overlay-figure:hover
.text {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    -moz-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
}

/** overlay for slick shideshow figcaption **/

.slick-container figcaption, .slick-container figcaption:hover {
    opacity: 1;
}

.slick-slider figure figcaption {
    background: none;
}

.slick-slider .overlay-figure-background {
    background: none;
}

/**** Position of header-slideshow text ****/

header .slick-slider .overlay-figure-caption .contents-stack {
    font-size: 40px;
}

header .slideshow p.slogan {
    position: absolute;
    right: 60px;
    bottom: 30px;
    z-index: 10000;
    font-size: 108px;
    color: #fdfefe;
    font-family: 'Raleway', serif;
    display: none;
}

/*** slick header dots *****/
header .slick-dots {
    bottom: 25px;
}

header .slick-slider .slick-dots li {
    height: 70px;
    margin: 0 3px;
    width: 40px;
}

header .slick-slider .slick-dots li button:before {
    font-size: 20px;
    color: #ffffff;
}

header .slick-dots li.slick-active button:before {
    opacity: .75;
    color: #ffffff;
}

/** Sklick Slider **/

header .slick-next:before {
    content: '\f105';
    margin-right: 0;
}

header .slick-prev:before {
    content: '\f104';
    margin-left: 0;
}

header .slick-prev:before, .slick-next:before {
    font-family: 'fontawesome';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header .slick-slider .slick-next:before, header .slick-slider .slick-prev:before {
    font-family: 'fontawesome';
    font-size: 80px;
    opacity: 1;
}

header .slick-slider:hover .slick-next:before {
    margin-right: 0;
}

header .slick-slider:hover .slick-prev:before {
    margin-left: 0;
}

header .slick-slider .slick-next, header .slick-slider .slick-prev {
    opacity: 1;
}

.slick-slider .slick-dots li button {
    width: 15px;
    height: 15px;
}

.slick-slider {
    margin: 0;
}

.slick-slider .slick-next, .slick-slider .slick-prev {
    width: 50px;
    margin-top: 0;
}

#slidecaption {
    position: absolute;
    top: 65%;
    width: 100%;
    float: none;
    line-height: 1.5;
    font-size: 350%;
}

#prevslide, #nextslide {
    height: 54px;
    width: 54px;
    font-family: FontAwesome;
    color: #FFFFFF;
    border: 1px solid #fff;
    line-height: 54px;
    font-size: 14px;
    position: absolute;
    top: 50%;
    margin-top: -27px;
    text-align: center;
    z-index: 10;
    background-image: none;
}

#nextslide {
    right: 73px;
    border-radius: 0 20px 0 20px;
}

#prevslide:active, #nextslide:active {
    margin-top: -27px;
}

#prevslide {
    left: 73px;
    border-radius: 20px 0 20px 0;
}

#prevslide:before, #nextslide:before {
    font-size: 200%;
}

#prevslide:before {
    content: "\f104";
}

#nextslide:before {
    content: "\f105";
}

.btn.white {
    background: #ffffff;
    background-image: -webkit-linear-gradient(top, #ffffff, #eee);
    background-image: -moz-linear-gradient(top, #ffffff, #eee);
    background-image: -ms-linear-gradient(top, #ffffff, #eee);
    background-image: -o-linear-gradient(top, #ffffff, #eee);
    background-image: linear-gradient(to bottom, #ffffff, #eee);
    color: #666;
    font-size: 120%;
    width: 250px;
    padding: 6px 10px 6px 10px;
    margin-bottom: 10px;
    text-decoration: none;
    border-radius: 0;
}

.btn.white:hover {
    background: #eee;
    background-image: -webkit-linear-gradient(top, #eee, #fff);
    background-image: -moz-linear-gradient(top, #eee, #fff);
    background-image: -ms-linear-gradient(top, #eee, #fff);
    background-image: -o-linear-gradient(top, #eee, #fff);
    background-image: linear-gradient(to bottom, #eee, #fff);
    text-decoration: none;
}

.fa:before {
    font-family: fontawesome;
    margin-right: 5px;
}

.icon {
    width: 50px;
    height: 50px;
    background-color: #fff;
    content: '';
    margin: 5px;
    padding: 10px 8px;
    font-size: 200%;
}

a.icon i {
    margin-right: 0;
}

/**  Content row elements **/

.one-half .textonly .ce-bodytext {
    padding: 25px 10px;
}

/** Content Layouts **/

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/**     Parallax Effekt     **/

.parallax-500 {
    height: 500px;
    width: 100%;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.parallax {
    height: 100vh;
    width: 100%;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.parallax > .caption, .parallax-500 > .caption {
    position: relative;
    left: 0;
    top: 55%;
    width: 100%;
    text-align: center;
    color: #000;
    background: rgba(255, 255, 255, 0.5);
}

.website-content {
    padding: 20px 0;
}

.magnificpopup-gallery {
    text-align: center;
}

.dark .magnificpopup-gallery {
    background: #374650;
    padding: 55px 25px;
}

.dark .magnificpopup-gallery .slick-item.slick-slide {
    border: 10px solid #374650;
}


.slick-slider:hover .slick-next:before, .slick-slider:hover .slick-prev:before {
    margin: 0;
}

.slick-slider .slick-next:before, .slick-slider .slick-prev:before {
    font-family: 'fontawesome';
    content: '\f105';
}

.slick-slider .slick-prev:before {
    content: '\f104';
}

.magnificpopup-gallery .slick-slider .overlay-figure-background:before {
    font-family: 'fontawesome';
    content: '\f002';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    font-size: 150%;
    color: #ffffff;
}
.magnificpopup-gallery .slick-slider .slick-slide img {
    transform: scale(1.0, 1.0);
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
}

.magnificpopup-gallery .slick-slider .slick-slide:hover img {
    transform: scale(1.05, 1.05);
    transition: all ease-in-out 0.5s;
    -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
}

.magnificpopup-gallery .slick-slider .overlay-figure-background {
    background: rgba(55, 70, 80, 0.3);
    height: 100%;
}


/*** CONTENT STYLES ***/

.grey {
    margin: 100px 0;
    padding: 25px;
    background: #f1f1f1;
}

.grey .one-half .textonly{
    padding: 55px 20px;
}

.grey .one-half .overlay-figure{
    margin-top: 55px;
    margin-left: -55px;
    margin-right: 55px;
    margin-bottom: -55px;
}

.grey .one-half.last .overlay-figure{
    margin-top: 55px;
    margin-left: 55px;
    margin-right: -55px;
    margin-bottom: -55px;
}

.website-content .rowel:first-child .one-half.last figure{
    margin-top: 110px;
}



/*** CONTENT STYLES END ***/



/*** MENU START ***/

.sidebar {
    position: fixed;
    right: 0;
    height: 100%;
    width: 55px;
    background: rgba(255, 255, 255, 0.47);
    color: #6c6c6c;
    z-index: 1000;
}

#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 300px;
    margin-top: 0;
    transform: translateX(300px);
    transition: transform 250ms ease-in-out;
    background: #374650;
    color: #6c6c6c;
    overflow-y: auto;
    padding-top: 65px;
}


#sidebarMenu a:hover{
    color: #933;
}

.sidebarMenuInner {
    margin: 0;
    padding: 0;
}

.sidebarMenuInner li {
    font-family: 'Special Elite';
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 25px;
    cursor: pointer;
}

.sidebarMenuInner li span {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}


.sidebarMenuInner li.active > a {
    color: #bd1d1d;
}

.sidebarMenuInner li li a {
    text-transform: none;
    font-size: 80%;
}

.sidebarMenuInner li li {
    padding: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li ul{
display:none;
}

.sidebarMenuInner li.active ul{
display:block;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 35px;
    right: 12px;
    height: 22px;
    width: 28px;
}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #374650;
}

.sidebarIconToggle:after {
    content: "MENU";
    position: absolute;
    top: 23px;
    left: 0;
    width: 32px;
    height: 20px;
    font-size: 9px;
    font-weight: bold;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle:after{
    display: none;
}

input[type=checkbox]:checked ~ .sidebarIconToggle .spinner{
    background-color: #fff;
}


.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 5px;
}

.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}

.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 5px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -11px;
}

.sidebar .contact{
    margin-top: 20px;
    padding: 25px 0 0 25px;
}

.sidebar .contact a{
    color: #ffffff;
    font-size: 80%;
}
.sidebar .logo{
    bottom: 0;
    position: absolute;
}

.sidebar .logo img{
    width: 35px;
    margin: 0 10px 35px 10px;
}

input[type="checkbox"]:checked ~ .logo{
    display: none;
}

.home .sidebar{
    background: transparent;
    height: 55px;
}

.home .sidebar .logo{
    display: none;
}

.home .spinner {
    background-color: #ffffff;
}

/*** MENU END ***/


/*** MENUITEMS START ***/
.menuitemcontainer{
    margin:0 -60px;
}
.menuitem{
    width:20%;
    height: auto;
    display: inline-block;
    float: left;
    padding: 5px;
    text-align: center;
    margin-top: 25px;
}

.menuitem h4 {
    color:#ffffff;
    background: #009fe3;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 100%;
    opacity: 0;
    margin: 0;
    padding: 10px;
    min-height: 70px;
    word-break: break-all;
}

.menuitem h5{
    color:#ffffff;
    background: #3d3c3f;
    padding: 10px;
    font-size: 90%;
  opacity: 0;
    
}



.menuitem:hover h5, .menuitem:hover h4{
    opacity: 1;
}

.menuitem:hover figcaption{
    display: block;
    text-align: center;
}


.menuitem.count-9{
    width:11.1%;
    padding-bottom: 40px;
    margin-top: 25px;
}


.menuitem.count-9 h5{
    display: none;
}

.menuitem.count-9 h4{
    font-size: 80%;
}

.menuitem img{
    -webkit-transform: scale(1.0) translateZ(0);
    -moz-transform: scale(1.0) translateZ(0);
    transform: scale(1.0) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s ease 0.25s;
    -moz-transition: -moz-transform 0.5s ease 0.25s;
    transition: transform 0.5s ease 0.25s;
}


.menuitem:hover img {
    transform: scale(1.05) rotate(-1deg);
    -ms-transform: scale(1.05) rotate(-1deg); /* IE 9 */
    -webkit-transform: scale(1.05) rotate(-1deg); /* Safari and Chrome */
    -o-transform: scale(1.05) rotate(-1deg); /* Opera */
    -moz-transform: scale(1.05) rotate(-1deg); /* Firefox */
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
}


/*** MENUITEMS END ***/

/*** BOTTOM START ***/
.bottom .slick-item{
    border: 3px solid #fff;
}



/*** BOTTOM END ***/


/*** STARTPAGE ***/


.banner {
    background: #fff;
    bottom: 0px;
    left: 0px;
    top: 0px;
    right: 0;
    position: absolute;
    -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    text-align: center;
}

.grid {
    float: left;
    width: 100%
}

.grid .item {
    background: #ddd;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s
}

.grid .item .overlay {
    background: rgba(0,0,0,0.05);
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s
}

.grid .item .title {
    position: relative;
    text-align: center;
    z-index: 1;
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 1s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 1s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 1s;
    overflow: hidden;
}

.grid .item .title h5,.grid .item .title h2,.grid .item .title p {
    color: #fff;
    text-shadow: 0 0 50px rgba(0,0,0,0.5);
    overflow: hidden
}

.grid .item .title h5 span,.grid .item .title h2 span,.grid .item .title p span {
    -webkit-animation: animatetop 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation: animatetop 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation-delay: 0s;
    display: block;
    -webkit-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    transform: translate(0, 50px);


}

.grid .item .title h2 {
    line-height: 42px
}

.grid .item .title h2 span {
    -webkit-animation: animatebottom 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation: animatebottom 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation-delay: .5s;
    display: block;
    -webkit-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    -o-transform: translate(0, -50px);
    transform: translate(0, -50px)
}

.grid .item .title p span {
    animation-delay: 1s
}

.grid .item .title h5 {
    font-family: 'Montserrat';
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    opacity: 0.5;
    filter: alpha(opacity=50)
}

.grid .item .title h2 {
    font-family: 'Special Elite', cursive;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 400;
    font-weight: 300;
    margin-bottom: 30px;
    letter-spacing: -.5px;
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s
}

.grid .item .title p {
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0px;
    margin: 50px 0px 0px;
    position: relative;
    opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    overflow: visible
}

.grid .item .title p::before {
    content: "";
    background: #fff;
    position: absolute;
    height: 1px;
    width: 20px;
    left: 50%;
    top: -25px;
    transform-origin: center center;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -webkit-animation: animateline 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation: animateline 1s normal forwards cubic-bezier(0.76, 0, 0.01, 0.82);
    animation-delay: 1s
}

.grid .item .cta-view-project {
    position: absolute;
    right: 50px;
    bottom: 0px;
    left: 50px;
    height: 35px;
    color: #fff;
    overflow: hidden
}

.grid .item .cta-view-project span {
    float: left;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    width: 100%;
    -webkit-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -o-transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    transition: all cubic-bezier(0.42, 0.42, 0.57, 0.91) 0.5s;
    -webkit-transform: translate(0, 35px);
    -ms-transform: translate(0, 35px);
    -o-transform: translate(0, 35px);
    transform: translate(0, 35px)
}

.grid .item:hover,.grid .item:active,.grid .item:focus {
    text-decoration: none
}

.grid .item:hover .cta-view-project span,.grid .item:active .cta-view-project span,.grid .item:focus .cta-view-project span {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.grid .item:hover .title,.grid .item:active .title,.grid .item:focus .title {
    -webkit-transform: scale(0.85,0.85);
    -ms-transform: scale(0.85,0.85);
    -o-transform: scale(0.85,0.85);
    transform: scale(0.85,0.85)
}

.grid .item:hover .title h2,.grid .item:hover .title h5,.grid .item:hover .title p,.grid .item:active .title h2,.grid .item:active .title h5,.grid .item:active .title p,.grid .item:focus .title h2,.grid .item:focus .title h5,.grid .item:focus .title p {
    text-decoration: none
}

.grid .item:hover .title h5,.grid .item:hover .title p,.grid .item:active .title h5,.grid .item:active .title p,.grid .item:focus .title h5,.grid .item:focus .title p {
    opacity: 1;
    filter: alpha(opacity=100)
}

.grid .item:hover .title p::before,.grid .item:active .title p::before,.grid .item:focus .title p::before {
    width: 60px
}

.grid .item:hover .overlay,.grid .item:active .overlay,.grid .item:focus .overlay {
    background: rgba(0,0,0,0.4)
}

.grid .item.double {
    background: #111 url("../images/essen-2025.jpg") center center no-repeat;
    background-size: cover;
    height: 450px;
    height: 50vh;
    width: 50%;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s
}

.grid .item.double1 {
    background: #111 url("../images/wein.jpg") center center no-repeat;
    background-size: cover;
    height: 450px;
    height: 50vh;
    width: 50%;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s
}

.grid .item.double2 {
    background: #111 url("../images/erleben-2025.jpg") center center no-repeat;
    background-size: cover;
    height: 450px;
    height: 50vh;
    width: 50%;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s
}

.grid .item.double3 {
    background: #111 url("../images/schnaps-2025.jpg") center center no-repeat;
    background-size: cover;
    height: 450px;
    height: 50vh;
    width: 50%;
    -webkit-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s
}


.grid .item.double.second .overlay {
    background: rgba(255,255,255,0.2)
}

.grid .item.double.second .title {
    margin-top: 60px
}

.grid .item.double.second .title h5,.grid .item.double.second .title h2,.grid .item.double.second .title p {
    color: #000;
    text-shadow: 0 0 50px rgba(0,0,0,0.2)
}

.grid .item.double.second .title p::before {
    background-color: #000
}

.grid .item.double.second .cta-view-project {
    color: #000
}

.grid .item.double.second:hover .overlay {
    background: rgba(255,255,255,0.6)
}

.grid .item.wide {
    background: #111 url("../images/wein.jpg") center center no-repeat;
    background-size: cover;
    height: 225px;
    height: 50vh;
    width: 50%
}

.grid .item.wide .overlay {
    background: rgba(255,255,255,0)
}

.grid .item.wide h5,.grid .item.wide h2,.grid .item.wide p {
    color: #111;
    text-shadow: 0 0 50px transparent
}

.grid .item.wide p::before {
    background: #000
}

.grid .item.wide .cta-view-project {
    color: #000;
    left: auto;
    right: 60px
}

.grid .item.wide .cta-view-project span {
    text-align: right
}

.grid .item.wide:hover .overlay {
    background: rgba(255,255,255,0.35)
}

.grid .item.wide:hover .title p::before {
    background: #000
}

.grid .item.single {
    background: #111 url("../images/schnaps.jpg") center center no-repeat;
    background-size: cover;
    height: 225px;
    height: 50vh;
    width: 50%
}


.grid .item.single h5,.grid .item.single h2,.grid .item.single p {
    color: #fff;
    text-shadow: 0 0 50px transparent
}

.grid .item.single h5 {
    margin-bottom: 0px
}

.grid .item.single h2 {
    margin-top: 10px;
    margin-bottom: 10px
}

.grid .item.single p {
    margin-top: 30px
}

.grid .item.single p::before {
    top: -15px
}

.grid .item.single:hover .overlay {
    background: rgba(255,255,255,0.1)
}

.grid .item.tall {
    background: #fff url("../images/project-6.jpg") center center no-repeat;
    background-size: cover;
    height: 450px;
    height: 50vh;
    margin-top: -50vh;
    width: 25%;
    align-items: flex-start
}

.grid .item.tall .overlay {
    background: rgba(255,255,255,0)
}

.grid .item.tall .title {
    margin-top: 60px
}

.grid .item.tall .title h5,.grid .item.tall .title h2,.grid .item.tall .title p {
    color: #000;
    text-shadow: 0 0 50px transparent
}

.grid .item.tall p::before {
    background: #000
}

.grid .item.tall .cta-view-project {
    color: #000
}

.grid .item.tall:hover .overlay {
    background: rgba(255,255,255,0.1)
}


.grid .item.long {
    background: #111 url("../images/erleben.jpg") center center no-repeat;
    background-size: cover;
    height: 225px;
    height: 50vh;
    width: 50%
}

.grid .item.long .overlay {
    background: transparent
}

.grid .item.long .title {
    margin-top: 60px
}

.grid .item.long .title h5,.grid .item.long .title h2,.grid .item.long .title p {
    color: #fff;
    text-shadow: 0 0 50px rgba(0,0,0,0.2)
}

.grid .item.long .cta-view-project {
    color: #fff
}


.grid .item.long:hover .overlay {
    background-color: transparent
}


@keyframes animatein {
    0% {
        text-indent: -500px
    }

    100% {
        text-indent: 0px
    }
}

@keyframes animateinright {
    0% {
        text-indent: 500px
    }

    100% {
        text-indent: 0px
    }
}

@keyframes animatebottom {
    0% {
        -webkit-transform: translate(0, -50px);
        -ms-transform: translate(0, -50px);
        -o-transform: translate(0, -50px);
        transform: translate(0, -50px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes animatetop {
    0% {
        -webkit-transform: translate(0, 50px);
        -ms-transform: translate(0, 50px);
        -o-transform: translate(0, 50px);
        transform: translate(0, 50px)
    }

    100% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes animateline {
    0% {
        opacity: 0;
        filter: alpha(opacity=0)
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

/*** STARTPAGE END ***/


/*** BORDER ***/
.border{
    border-top: 20px solid #eeeeee;
    background: #009fe3;

}

.border .overlay-figure{
    padding-right: 20px;
}

.border:after{
    content: '';
    display: block;
    clear: both;

}

/*** BORDER END ***/

/*** REFERENZEN ***/

.references{
    padding: 55px 0;
}

.references:after{
    content:'';
    display: block;
    clear: both;
}

.references h3{
    border-bottom: 2px solid #009fe3;
    margin-bottom: 25px;
}



.referencegallery {
    float: left;
    width: 33.333%;
    box-sizing: border-box;
    padding: 0 5px 5px 0;
    position: relative;
}
.referencegallery img{
    width: 100%;
    height: auto;
}

.project{
    position: relative;
}


.project .description{
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;
    padding: 25px;
}

.project p{
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 80%;
}

.project h6{
    background: #009fe3;
    padding: 2px 4px;
    display: inline-block;
}

.project:hover .description{
    background: rgba(61, 60, 63, 0.7);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.project:hover .description p{
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.referencegallery a{
    color: #fff;
}



/*** REFERENZEN END***/

.bottom *[class^="fa-"]:before{
    color: #009fe3;
}



.border img{
    -webkit-transform: scale(1.0) translateZ(0);
    -moz-transform: scale(1.0) translateZ(0);
    transform: scale(1.0) translateZ(0);
    -webkit-transition: -webkit-transform 0.5s ease 0.25s;
    -moz-transition: -moz-transform 0.5s ease 0.25s;
    transition: transform 0.5s ease 0.25s;
}


.border:hover img {
    transform: scale(1.05) rotate(-1deg);
    -ms-transform: scale(1.05) rotate(-1deg); /* IE 9 */
    -webkit-transform: scale(1.05) rotate(-1deg); /* Safari and Chrome */
    -o-transform: scale(1.05) rotate(-1deg); /* Opera */
    -moz-transform: scale(1.05) rotate(-1deg); /* Firefox */
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
}


.banner .logo{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -205px;
    margin-top: -81px;
    padding: 10px;
    background: #fff;
    z-index: 1000;
}


/**** Slide in ****/

main .rowel{
 transform: translateY(150px);
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); }
}