/*
Theme Name: Weck
Theme URI:
Author: Johann Gottfried - Artenreich
Author URI:
Version: 1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: pbl
*/

/* hind-300 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('assets/fonts/hind-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('assets/fonts/hind-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* hind-500 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('assets/fonts/hind-v16-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('assets/fonts/hind-v16-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* hind-regular - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('assets/fonts/hind-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('assets/fonts/hind-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* hind-600 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('assets/fonts/hind-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('assets/fonts/hind-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* hind-700 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('assets/fonts/hind-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('assets/fonts/hind-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

button,
textarea,
input,
select,
a{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}


@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fade-out{0%{opacity:0}100%{opacity:1}}@keyframes fade-out{0%{opacity:0}100%{opacity:1}}


@-webkit-keyframes drop-load{  from{height:100vh;} to{height: 0vh;} }
@-webkit-keyframes to-bottom{  from{top:-10vh;opacity: 0;} to{top: 0;opacity: 1} }
@-webkit-keyframes p-top-padding{  from{padding-top:5vw;} to{padding-top:3vw;} }
@-webkit-keyframes h1-margin-bottom{ from{margin-bottom: -0.67em;} to{margin-bottom: 0em} }
@-webkit-keyframes unsere-kunden-title{ from{top:-10vh;} to{top:0;} }
@-webkit-keyframes nav-intro{ from{left:-34vw;} to{left:-30.5vw;} }
@-webkit-keyframes burger-intro{ from{left: -2.25vw;} to{left: .75vw;} }

@-webkit-keyframes slide-in-left{
    0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}
    100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
}
@keyframes slide-in-left{
    0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}
    100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
}

/*Shadow*/
@keyframes nav-shadow{
0% {
    -webkit-box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
    -moz-box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
    box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
}
25% {
    -webkit-box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
    -moz-box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
    box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
}
50% {
    -webkit-box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
    -moz-box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
    box-shadow: 0 0 28px 0 rgba(255,255,255,0.75);
}
100% {
    -webkit-box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
    -moz-box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
    box-shadow: 0 0 28px 0 rgba(255,255,255,0.0);
}
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #edf1f2; }
::-webkit-scrollbar-thumb { background: #c90039; }
::-webkit-scrollbar-thumb:hover { background: #c90039; }

a{
    text-decoration: none;
    color: #c90039;
}

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

/*General*/
body{
    font-family: 'Hind', sans-serif;
    font-weight: 400;
    font-style: normal;

    -webkit-animation-name: fade-in; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
    animation-name: fade-in;
    animation-duration: 1.5s;

    height: 100%;
    overflow: auto;

}

.block-title,
h1,h2,h3,h4,h5,h6{
    color:#c90039;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
}
.block-title,
h1{
    font-size: 3.4vw;
    line-height: 4vw;
}

h2{
    font-size: 33px;
    line-height: 38px;
    margin-top: 60px;
}

img{
    outline: #fff;
}
.stop-scroll{
    overflow-y: hidden;
    position: fixed;
}

.op-full{
    opacity: 1 !important;
    transition: all .5s !important;
}
.display-cleaner{
    display: none;
}

.pink-bg{

    margin-top: 2vh;
    background-color: #c90039;
    height: 14vh;
}
.no-pad-bottom{
    padding-bottom: 0 !important;
}

/* Scrolbar*/
/*
.stop-scroll::-webkit-scrollbar {width: 20px;}
.stop-scroll::-webkit-scrollbar-track {background: #ecf0f2;}
.stop-scroll::-webkit-scrollbar-thumb {background: #575756;}
.stop-scroll::-webkit-scrollbar-thumb:hover {background: #8f2e3e;}
*/


.container-fluid{
    padding-bottom: 1vw;
}
.slick-dots,
.slick-list,
.content-col{
    -webkit-animation-name: slide-in-left; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation-name: slide-in-left;
    animation-duration: .5s;
}
.aside.stop-scroll{
    position: fixed;
    width: 33.33333vw;
    height: 100vh;
    top: 0;
    right: 0;

}

.shadow-default{
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
}

.hide-it{}
.fade-out{
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-animation-name: fade-out; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */
    animation-name: fade-out;
    animation-duration: .2s;
}

.pink-text{
    color:#c90039;
}
.pageswap a{
    text-decoration: none;
    text-transform: uppercase;
    color: #9c9e9f;
}
.pageswap a:after{
    background-image: url('/wp-content/themes/weck/assets/images/link-arrow.svg');
    background-size: .9vh 1.5vh;
    display: inline-block;
    margin-left: .5vw;
    width: .9vh;
    height: 1.5vh;
    content:"";
    transition: all .5s;
}
.pageswap:hover a:after{
    margin-left: 1vw;
}

.upper-title{
    text-transform: uppercase;
}

/*Header*/
.logo{
    position: absolute;
    padding-top: 3vw;
    padding-left: 6vw;
    left: 0;
    -webkit-animation-name: slide-in-left; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation-name: slide-in-left;
    animation-duration: .5s;

    transition: left .5s;
}
.logo img{
    width: 12vw;
}
.logo.hideme{
    left:-33vw;
}
.logo-projects{
    position: fixed;
    left: 0;
    right: 0;
    top: 4.4vh;
    text-align: center;
    transition: top .5s;
}
.logo-projects img{
    max-width: 4vw;
    height: auto;
}
.logo-projects.hideme{
    top: -6.4vh;
}


#header{
    position: relative;
    z-index: 4;
    opacity: 1;
    transition: opacity .5s;
}
#header.hidden{
    opacity: 0;
    pointer-events: none;
}

#main{
    color:#575959;
    font-size: 1.1vw;
    /*padding-bottom: 16px;*/
    /*margin-bottom:41vh;*/
    background-color: #fff;

    height: 100%;
    overflow: auto;
}

#main div{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*Positioning*/
.rel{
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.content-slider.abs{
    position: absolute;
    bottom: 5vw;
    width: 100%;
}

.content-col{
    /*position: absolute;*/
    z-index: 1;
    bottom: 0;

    width: 100%;
    padding-top: 30vh;
    padding-bottom: 5vw;
    padding-right: 15vw;
    background-color: #fff;
}

.pr-z{
    padding-right: 0;
}

.bor-r{
    border-right: .6vw solid #fff !important;
    padding-right: 0;
}

/*Grid*/
.grid2col{
    display: flex;
}
.grid2col .col_1{
    flex: 2;
}
.grid2col .col_2{
    flex: 1;
}


/*Logo*/



/*Slick*/
.slick-slider {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.slick-list.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/*Unser Betrieb*/
.unser_betrieb h1{
    margin-bottom: -0.67em;

}

.unser_betrieb p{
    background-color: #fff;
    padding-right: 15vw;
    margin: 0;
    padding-bottom: 3vw;
    padding-top: 5vw;
}

.unser_betrieb .content-col{
    position: absolute;
    padding-bottom: 0;
    padding-right: 0;
    background-color: rgba(255, 255, 255, 0)
}

.border-image{
    height: 100vh;
}
.two-cols-image{
    position: absolute;
    height: 100vh;
    right: 0;
    width: 66.6666vw;
    background-size: cover;
    background-position: center;
    opacity: 0;

    -webkit-animation-name: to-bottom;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-name: to-bottom;
    animation-duration: 1s;
    animation-delay: .25s;
    animation-fill-mode: forwards;
}

.two-cols-image-white-layer{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 0;
    width: 66.666vw;
    background-color: #fff;

    -webkit-animation-name: drop-load;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-name: drop-load;
    animation-duration: 1s;
    animation-delay: .25s;
    animation-fill-mode: forwards;
}



/*Zertifikate*/
.zertifikate{}
.content-and-sidebar-slider-left{
    position: absolute;
    width: 100%;
    padding-right: 15vw;
    bottom: 5vw;
}
.content-and-sidebar-slider-right{}
.content-and-sidebar-slider-right .image{
    height: 100vh;
    width: 100%;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ecf0f2;
}

/*Historie*/
.dots-abs .slick-dots{
    position: absolute;
}
.historie{}
.sidebar-slider-left{
    position: absolute;
    width: 66%;
    padding-right: 15vw;
    bottom: 0vw;
}
.sidebar-slider-right{
    height: 100vh;
    width: 100%;
    background-color: #ecf0f2;
}

.historie-eintrag.slick-slide{
    display: flex;
    height: 100vh;
    width: 100%;
}
.historie-eintrag{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.historie-eintrag .jahr{
    font-size: 10vw;
    line-height: 8vw;
    font-weight: 600;
}
.historie-eintrag .text{
    color: #c90039;
    font-size: 1.4vw;
    line-height: 1.9vw;
    text-transform: uppercase;
}

.historie-eintrag .jahr,
.historie-eintrag .text{}

.historie-eintrag-wrap,
.historie-line{
    flex: 1;
}
.historie-line{
    width: 1vw;
    background-color: #c90039;
}

.historie-eintrag:first-child .historie-line:first-child,
.historie-eintrag:last-child .historie-line:last-child{
    background-color:#ecf0f2;
}

.historie-eintrag:first-child .historie-line:last-child,
.historie-eintrag:last-child .historie-line:first-child{
    flex: 3;
}

.historie-eintrag .historie-line:first-child{
    margin-bottom: 9vh;
}
.historie-eintrag .historie-line:last-child{
    margin-top: 5vh ;
}

/*Projekte*/
.projects{}
.pro-col-1{}
.pro-col-1 .content-col{}
.pro-col-2{}

.projects-slider .projects-slider-item-link{
    pointer-events: all;
}
.projects-slider-item{
    opacity: .5;
    transition: all .5s;
    margin: 10vh 0;
    padding: 0 .5vw;
    position: relative;
}

.projects-slider-item img{
    cursor: none;
    max-width: 100%;
    height: auto;
}
.projects-slider-item.slick-current img{
    cursor: auto;
}

.projects-slider-item.slick-current{
    opacity: 1;
}
.projects-slider-item-ort,
.projects-slider-item-title,
.projects-slider-item-link{
    text-transform: uppercase;
    opacity: 0;
    transition: all .5s;
}
.projects-slider-item-ort,
.projects-slider-item-title{
    padding-top:1.5vh;
    padding-bottom:1.5vh;
    font-weight: 500;
    display: inline-block;
}

.projects-slider-item-link{
    line-height: 1.2vh;
}

.projects-slider-item-link a{
    text-decoration: none;
    color: #c90039;
}
.slick-current .projects-slider-item-ort,
.slick-current .projects-slider-item-title,
.slick-current .projects-slider-item-link{
    opacity: 1;
}

/*Projekt Mods*/
.project-slider-top{
    height: 15vh;
}

#slider-cursor{
    cursor: none;
    position: fixed;
    z-index: 999;
    height: 3vw;
    width: 3vw;
    border-right: 0;
    border-bottom: 0;
    opacity: 0;
    transition: opacity .5s;
}

#slider-cursor.hover-r{
    border-right: .5vw solid #c90039;
    border-bottom: .5vw solid #c90039;
    transform: rotate(-45deg);
    opacity: 1;
    pointer-events: none;
    margin-top: -1.5vw;
    margin-left: -3vw;
}
#slider-cursor.hover-l{
    border-left: .5vw solid #c90039;
    border-bottom: .5vw solid #c90039;
    transform: rotate(45deg);
    opacity: 1;
    pointer-events: none;
    margin-top: -1.5vw;
}
.slider-control .prev,
.slider-control .next{
    cursor: none;
    position: absolute;
    height: 100vh;
    z-index: 5;
}

/*Projekt Single*/
.single-project img{
    vertical-align: bottom;
    margin-bottom: 1vw;
    max-width: 100%;
}
.pro-single-header{
    background-size: cover;
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1vw;
}

h2.header-img-title{
    font-weight: 600;
}
.header-img-place{
    font-weight: 100;
}
h2.header-img-title,
.header-img-place{
    color: #fff;
    font-size: 5vh;
    display: block;
}

.single-project-facts{
    padding-left: 6vw;
    background-color: #efefef;
    padding-bottom: 2vw;
}
.single-project-facts .title{
    padding-top: 5vh;
    padding-bottom: 4vh;
    font-size: 2.5vw;
    text-transform: uppercase;
    font-weight: 600;
}
.single-project-facts ul,
.single-project-facts ul li{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.single-project-facts ul li{
    padding: .7vh 0;
}
.single-project-facts ul li:before{
    /*
    content:"_";
    color: #c90039;
    */     
}

.single-project-first-picture{
    padding-right: 15px;
}
.single-project .content-col{
    padding-top: 0;
}

/*Extra Content*/
.extra-content-title{
    position: relative;
    z-index: 1;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.2vw;
    display: table;
    padding: .5vw 1vw .2vw;
    margin-bottom: 1vh;
    transition: all .5s ease;
}

.extra-content-title:after{
    content: "";
    position: absolute;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    width: .5vw;
    max-width: .5vw;
    height: 100%;
    background-color:#c90039;
    transition: all .5s ease;
}

.extra-content-title:hover{
    color:#ffffff;
    background-position:right bottom;
}

.extra-content-title:hover::after{
    width: 100%;
    max-width: 100vw;
}

/* width */
.extra-content-fancy::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.extra-content-fancy::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Handle */
.extra-content-fancy::-webkit-scrollbar-thumb {
    background: #c90039;
}

/* Handle on hover */
.extra-content-fancy::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.extra-content-fancy{
    position: fixed;
    z-index: 6;
    left: -100%;
    top: 0;
    width: 66.65vw;
    height: 100%;
    overflow: scroll;
    padding-left: 5.5vw;
    padding-right: 10vw;
    padding-top: 3vh;
    background-color: #fff;
    transition: left .5s;
}
.extra-content-fancy-wrapper{

}

.extra-content-fancy.active{
    left: 0;
}

.close-fancy{
    cursor: pointer;
    position: absolute;
    z-index: 11;
    top: 1.75vw;
    right: 1.75vw;
    margin: auto;
    width: 1.25vw;
    height: 3.2vh;
}

.close-fancy .l1,
.close-fancy .l2{
    display: block;
    float: left;
    margin-right: 0.1vw;
    width: .22vw;
    height: 3.2vh;
    background-color: #c90039;
    transition: all .5s ease;
    opacity: 1;
}

.close-fancy .l1{
    position: absolute;
    left: .5vw;
    transform: rotate(45deg);
}
.close-fancy .l2{
    position: absolute;
    left: .5vw;
    transform: rotate(-45deg);
}
/*Kontakt*/
.contact{}
.contact .content-col{
    padding-right: 1vw;
}

#map{
    height: 100vh;
    width: 100%;
}
.map-blur{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100vh;
    width: 10%;
    background: linear-gradient(90deg, #ffffff 0, #ffffff00 100%);
    pointer-events: none;
}


/*HOME*/

/*Home Projekt Liste*/
.home-project-li{
    display: flex;
}

.home-project-li .block-col-l{
    width: 33.33333vw;
    padding-left: 1vw;
}

.home-project-li_title-block{
    background-color: #edf1f2;
    margin-bottom: 1vw;
    width: 32.33333vw;
    display: flex;
    flex-direction: column;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.home-project-li_item{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh;
    flex: 1 0 40%;
    margin-left: 1vw;
}
.home-project-li-item_wrap{
    filter: grayscale(100%);
    opacity: .5;
    transition: all .5s;
    background-size: cover;
    background-position: center;
    height: 48vh;
}

.list-number{
    color: #444;
    font-weight: 600;
    position: absolute;
    font-size: 5vh;
    top: 4.5vh;
    left: 7%;
}

.home-project-li_item:hover .home-project-li-item-wrap_headline {
    left: 0;
}
.home-project-li_item:hover .home-project-li-item_wrap{
    filter: grayscale(0%);
    opacity: 1;
}
.home-project-li-item-wrap_headline{
    position: absolute;
    top: 0;
    left: -98%;
    width: 100%;
    filter: grayscale(0%);
    overflow: hidden;
    color: #ffffff;
    background-color: #c90039;
    padding-left: 1vw;
    padding-top: 10px;
    height: 12vh;
    display: flex;
    align-items: center;
    transition: all .5s;
}
.home-project-li-item-wrap_headline .headline-list-number{
    font-size: 9vh;
    font-weight: 600;
    line-height: 0;
    padding-right: 1.5vw;
}
.home-project-li-item-wrap_headline .headline-list-description{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pr-li-block{
    width: 66.66666vw;
    display: flex;
    flex-wrap: wrap;
}

/*Default*/
.default .image{
    height: 100%;
}

.default .image > div{
    height: 100%;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.default:nth-child(even) .content-col{
    background-color:#ecf0f2;
}

/*Image*/
.fullH .image > div{
    height: 100vh;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}







/*Footer*/
#footer,
#footer a{
    font-size: 1vw;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
#footer ul,
#footer li,
#footer p{
    padding: 0;
    margin: 0;
    list-style-type: none;
    line-height: 2.5vw;
}

#footer{
    /*position: fixed;*/
    bottom: 0;
    width: 100%;
    background-color: #575959;
    z-index: -1;
}

.footer-col{
    width: 66.66666vw;
    padding: 0 0 0 6vw;
    display: flex;
}

.footer-logo-l,
.footer-logo-r{
    width: 2vw;
    background-color:#797a7a;
    display: inline-block;
    position: absolute;
}
.footer-logo-l{
    height: 7vw;
    left: 0;
}
.footer-logo-r{
    height: 10vw;
    left: 3.5vw;
}


.col-logo{
    width: 200px;
    position: relative;
}

.footer-col-wrapper{
    flex-direction: row;
    flex: 3;
    display: flex;
}

.footer-col-item{
    flex: 2;
}

.col-img{
    flex: 1;
}

.col-img,
.footer-col-item{
    margin: 8vh 0 8vh 0;
}








/*NEW IDEA*/
/*Main*/
#main > div:nth-child(even) .block-col-l,
#main > div:nth-child(even) .block-col-l .textfield{
    background-color: #edf1f2;
}
/*Bookmark*/
.bookmark{
    text-transform: uppercase;
}
/*Block*/
.block{
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding-bottom: 1vw;
}

.block-col-l{
    z-index: 1;
}

.block-col-r{
    flex-grow: 1;
}


/*Main Col*/
/*Textfield*/
.textfield{
    background-color: #fff;
}

/*Zitat*/
.zitat{
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 0vh 0vw 0vh 1vw;
    justify-content: center;
    align-items: center;
}
.zitat-logo{
    padding-left: 6vw;
}
.zitat .content-wrapper{
    padding: 10vh 4vw;
    display: flex;
    flex-direction: column;
}
.zitat .content{
    color:#c90039 ;
    text-transform: uppercase;
    font-size: 2.5vw;
    line-height: normal;
}
.zitat .name{

}

.dflex{
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 1;
}







/*Asside*/
/*Navigation*/
.asside.navigation{
    height: 100%;
    padding-left: 3vw;
    background-color: #c90039;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.asside.navigation a{
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    display: block;
    padding: 2vh 0;
}
.asside-navigation-helper{
    margin-top:-14vh;
}

/*Slider*/
.aside-slider.dots-pos-default .slick-dots{
    bottom: 2vh;
    left: 2vw;
}
.aside-slider-item img{
    max-width: 100%;
    height: auto;
}

/*Ansprechpartner*/
.ansprechpartner{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.ansprechpartner .item{
    cursor: pointer;
    margin: .5vh 0;

    background-color: #efefef;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    transition: all .75s;
}
.ansprechpartner .item:first-child{
    margin-top: 0;
}
.ansprechpartner .item:last-child{
    margin-bottom: 0;
}
.ansprechpartner .item.active{
    flex: 10;
    transition: all .75s;
}

.ansprechpartner .item .image{
    cursor: default;
    height: 0;
    width: 100%;
    flex: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    border-bottom: 0 solid #fff;
    transition: all .85s;
}

.ansprechpartner .item.active .image{
    height: 60vh;
    width: 100%;
    flex: 9;
    opacity: 1;
    border-bottom: 1vh solid #fff;

}

.ansprechpartner .item .name{
    color:#575959;    
	text-align: center;
	padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100px;
    transition: background-color .2s;
}
.ansprechpartner .item.active .name{
    cursor: default;    
    width: 100%;
    color: #fff;
    font-weight: 600;
    background-color: #c90039;
}

/*Unsere Kunden*/
.unsere_kunden{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.unsere_kunden .item{
    flex: 1;
    position: relative;
    margin: .5vh 0;
    overflow: hidden;
}

.unsere_kunden .item:first-child{
    margin-top: 0;
}

.unsere_kunden .item:last-child{
    margin-bottom: 0;
}

.unsere_kunden .title{
    position: absolute;
    z-index: 2;
    top: -10vh;
    left: 0;
    text-transform: uppercase;
    font-weight: 600;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-animation-name: unsere-kunden-title;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-name: unsere-kunden-title;
    animation-duration: 1s;
    animation-delay: .25s;
    animation-fill-mode: forwards;
}
.unsere_kunden .title:before{
    content: "";
    display: inline-block;
    margin-right: 1vw;
    padding-left: 10px;
    background-color: #c90039;
    height: 10vh;
}
.unsere_kunden .image{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: .25;
}

/*Slider Variations*/
.content-slider-with-asside-right .item{
    height: 100vh;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ecf0f2;
}

/*Drop Image*/
.block-col-l.drop-img{
    position: relative;
    z-index: 2;
}
.block-col-l.drop-img .textfield{
    bottom: 0;
    background-color: rgba(0,0,0,0);
    padding-bottom: 0;
    padding-right: 0;
}
.block-col-l.drop-img h1{
    margin-bottom: 0;
}
.block-col-l.drop-img .textfield p{
    background-color:#fff;
}

.block-col-r.drop-img{
    z-index: 2;
    height: 100vh;
}

/*Media*/
@media (min-width:992px){
    #main{
        font-weight: 300;
        font-size: 1.1vw;
        line-height: 2vw;
        min-height: 100vh;
        overflow: hidden;

        -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
        -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
        box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
    }

    /*Positioning*/
    .rel{
        min-height: 100vh;
    }

    .addnavspace{ padding-left: 5vw; }
    .addnavspaceplus{ padding-left: 5.5vw; }

    /*Navigation*/
    #nav-opener-mob{
        display: none;
    }

    /*first-layer (Root)*/
    .navigation{}

    .navigation .first-layer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        margin: 0;

        position: fixed;
        z-index: 10;
        left: -30.4vw;
        top: 0;
        bottom: 0;
        width:33.33333333vw;
        background-color:#c90039;
        transition: left .5s ease;
        border-right: 0 solid #fff;

        /*
        -webkit-animation-name: nav-intro;
        -webkit-animation-duration: .6s;
        animation-name: nav-intro;
        animation-duration: .6s;

         */

    }
    .navigation .first-layer.active{
        left:0;
    }

    .navigation .first-layer li{
        display: block;
        margin: 3vh 0;
        list-style-type: none;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 2vw;
        padding-top: 8px;
        padding-left: 11px;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }

    .navigation .first-layer li::-moz-selection{
        color:#fff;
        background-color:#c90039;
    }

    .navigation .first-layer li::selection{
        color:#fff;
        background-color:#c90039;
    }

    .navigation .first-layer a{
        display: block;
        color: #fff;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;
    }


    .navigation .first-layer.active sub.active a{
        background-color: #fff;
    }
    .navigation .first-layer.active sub.active a,
    .navigation .first-layer.active .no-sub.active a{
        color:#c90039;
        cursor: pointer;
    }

    .first-layer.active .sub.active,
    .navigation .first-layer.active li:hover,
    .navigation .first-layer.active li:hover a{
        color:#c90039;
        cursor: pointer;
    }


    .first-layer.active .current{
        background-color:rgba(255,255,255,.75);
    }
    .first-layer.active .sub.active,
    .first-layer.active .no-sub.active,
    .navigation .first-layer.active li:hover{
        background-color: #fff;
    }

    .first-layer.active .current a,
    .first-layer.active .current{
        color: #c90039 !important;
    }

    /*First More*/
    .fli.sub .sub-more{
        border: solid white;
        border-width: 0 .22vw 0.22vw 0;
        display: inline-block;
        padding: .4vw;
        float: right;
        margin-right: 3vw;
        margin-top: .3vw;
        position: relative;
        left: -100px;
        opacity: 0;
        transition: all .4s ease;

        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    .first-layer.active .fli.sub .sub-more{
        left: 0;
        opacity: 1;
    }
    .first-layer.active .current a, .first-layer.active .current .sub-more,
    .first-layer.active .fli.sub.active .sub-more,
    .first-layer.active .fli.sub:hover .sub-more{
        border-color: #c90039;
    }

    .first-layer.active .fli.sub.active .sub-more {
        left: 2vw;
        opacity: 1;
    }

    /*second-layer (Sub) */
    .navigation .second-layer{
        list-style-type: none;
        margin: 0;
    }
    .navigation .second-layer .second-layer-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 100vh;
        margin: 0;

        position: fixed;
        z-index: 9;
        left: -33.7vw;
        top: 0;
        bottom: 0;
        width:33.34vw;
        background-color:#c90039;
        transition: left .7s ease;
        border-right: 1vw solid #fff;
    }

    .navigation .second-layer .active .second-layer-item{
        left: 33.3vw;
    }

    .second-layer-item li{
        display: block;
        margin: 2vh 0;
        list-style-type: none;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 1.2vw;
        padding-top: 8px;
        padding-left: 11px;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }
    .second-layer-item li a{
        color: #fff;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;
        padding: 6px 10px 0 10px;
    }
    .second-list-item.current a,
    .second-layer-item li a:hover{
        color:#c90039;
        background-color: #fff;
        cursor: pointer;
    }
    /*Third Layer*/
    .third-layer,
    .third-layer ul,
    .third-layer li{margin: 0;padding: 0;list-style-type: none}

    .third-list-item{
        position: fixed;
        top: 0;
        left:-33.3333vw;
        z-index: 7;
        height: 100vh;
        width: 33.34vw;
        background-size: cover;
        background-position: center;
        transition: all .5s ease;
    }
    .third-list-item.active{
        left:66.615vw;
    }

    /*Border*/
    .bl{border-left: .5vw solid #fff !important;}
    .br{border-right: 1vw solid #fff !important;}

    .nav-shadow{
        -webkit-animation-name: nav-shadow; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
        animation-name: nav-shadow;
        animation-duration: 1s;
        background-color: rgba( );
    }


    /*Burger*/
    /*New start*/
    #burgerNav{
        width: 30px;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 3vw;
        margin-top: -.4vw;


        /*
        -webkit-animation-name: slide-in-left;
        -webkit-animation-duration: .5s;
        animation-name: slide-in-left;
        animation-duration: .5s;

         */
    }
    /*New end*/

    .navigation-burger{
        cursor: pointer;
        position: fixed;
        z-index: 11;
        top: 6vh;
        left: .75vw;
        margin: auto;
        width: 1.25vw;
        height: 3.2vh;
        transition: left .5s;

        -webkit-animation-name: burger-intro; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
        animation-name: burger-intro;
        animation-duration: .5s;


    }

    .navigation-burger .l1,
    .navigation-burger .l2,
    .navigation-burger .l3{
        position: absolute;
        display: block;
        float: left;
        margin-right: 0.1vw;
        width: .22vw;
        height: 3.2vh;
        background-color: #fff;
        transition: all .5s ease;
        opacity: 1;
    }
    .navigation-burger .l1{left:0;}
    .navigation-burger .l2{left: .5vw; top:0;}
    .navigation-burger .l3{left: 1vw;}
    .navigation-wrapper.active .navigation-burger{
        left: 2.55vw;
    }
    .navigation-wrapper.active .navigation-burger .l1{
        position: absolute;
        left: .5vw;
        transform: rotate(45deg);

    }
    .navigation-wrapper.active .navigation-burger .l2{
        position: absolute;
        left: .5vw;
        top:20px;
        opacity: 0;
    }
    .navigation-wrapper.active .navigation-burger .l3{
        position: absolute;
        left: .5vw;
        transform: rotate(-45deg);

    }

    /*Navigation - Close*/
    .nav-close{
        opacity: 0;
        position: fixed;
        top: 0;
        right: -110%;
        z-index: 6;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0);
        transition-delay: 0s, .5s, 0s;
        transition: background-color .5s, right .5s, opacity .5s;
    }

    .nav-close.active{
        opacity: 1;
        right: 0;
        background-color: rgba(255,255,255,.75);
    }

    /*Block*/
    .block-col-l{
        min-height: 100vh;
        width: 65.66666vw;
    }

    .block-col-r{
        width: 33.33333vw;
        border-left: 1vw solid #fff;
    }
    .block-col-l.drop-img {
        min-height: 100vh;
    }
    .block-col-l.drop-img .textfield {
        position: absolute;
    }
    .block-col-l.drop-img .textfield p {
        padding: 6vh 15vh 6vh 0;
        margin: 0;
    }


    /*Textfield*/
    .textfield{
        padding: 30vh 15vw 5vh 6vw;
        background-color: #fff;
    }

    .content-slider{
        padding: 30vh 15vw 5vh 6vw;
    }

    .content-slider-with-asside{
        padding: 30vh 15vw 7vh 6vw;
    }

    /*Projekte*/
    .projects{
        position: relative;
        min-height: 100vh;
        overflow: hidden;
    }

    .pro-col-1{
        width:40vw;
        background-color:#fff;
        position: relative;
        z-index: 3;
    }
    .pro-col-1 .content-col{
        padding-right: 4vw;
    }

    .pro-col-2{
        position: absolute;
        top: 0;
        width: 100vw;
        left: 18.5vw;
        transition: all .5s;
    }
    /*Projekte Single*/
    .single-project .addnavspace{
        padding-left: 6vw;
    }


    /*Footer*/
    #footer .col-img img{
        height: 10vw;
        width:auto;
    }
}
@media (max-width:1643px){

    .extra-content-title,
    #main{
        font-weight: 300;
        font-size: 18px;
        line-height: 28px;
    }
}
@media (max-width:991px){

    /*Navigation*/
    #nav-opener-mob{

    }
    /**/
    #burgerNav{
        display: none;
    }
    .navigation-wrapper{

    }
    .first-layer,
    .first-layer ul,
    .first-layer li,
    .second-layer,
    .second-layer li{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .first-layer,
    .first-layer a,
    .second-layer,
    .second-layer a{
        color: #fff;
    }

    .first-layer,
    .second-layer-item{
        font-size: 22px;
        padding: 6vw;
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #c90039;
        transition: all .5s;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .first-layer.active.mo-gone,
    .first-layer{
        z-index: 4;
        left: -100vw;
    }
    .first-layer li,
    .second-layer-item li{
        padding: 2vw 2vw 1.5vw;
        margin: 1vw 0;
    }

    .second-layer-item{
        z-index: 5;
        left: -101vw;
        -webkit-box-shadow: 1vw 0px 0px 0px rgba(255,255,255,1);
        -moz-box-shadow: 1vw 0px 0px 0px rgba(255,255,255,1);
        box-shadow: 1vw 0px 0px 0px rgba(255,255,255,1);
    }

    .third-layer{
        display: none;
    }

    .first-layer.active{
        left: 0;
    }

    .fli.sub .sub-more{
        border: solid white;
        border-width: 0 5px 5px 0;
        display: inline-block;
        padding: 5px;
        float: right;
        margin-right: 3vw;
        margin-top: .8vh;
        position: relative;
        left: -100px;
        transition: all .4s ease;

        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    .first-layer.active .fli.sub .sub-more {
        left: 0;
        opacity: 1;
    }
    .sli.active .second-layer-item{
        left: 0;
    }

    /*Active*/
    .navigation .first-layer.active sub.active a{
        background-color: #fff;
    }
    .navigation .first-layer.active sub.active a,
    .navigation .first-layer.active .no-sub.active a{
        color:#c90039;
        cursor: pointer;
    }

    .first-layer.active .sub.active,
    .navigation .first-layer.active li:hover,
    .navigation .first-layer.active li:hover a{
        color:#c90039;
        cursor: pointer;
    }


    .first-layer.active .current{
        background-color:rgba(255,255,255,.75);
    }
    .first-layer.active .sub.active,
    .first-layer.active .no-sub.active,
    .navigation .first-layer.active li:hover{
        background-color: #fff;
    }

    .first-layer.active .current a,
    .first-layer.active .current{
        color: #c90039 !important;
    }

    .first-layer.active .current a, .first-layer.active .current .sub-more,
    .first-layer.active .fli.sub.active .sub-more,
    .first-layer.active .fli.sub:hover .sub-more{
        border-color: #c90039;
    }

    .second-list-item a{
        display: block;
        padding: .8vw 2vw .5vw;
    }

    .second-list-item.current a{
        color: #c90039;
        background-color: #fff;
        cursor: pointer;
    }

    .navigation a{
        display: block;
    }




    /*Header*/
    #header{
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
    }
    /*Nav Open Mob*/

    @keyframes extra-pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(201, 0, 57, 0.7);
        }

        30% {
            transform: scale(1);
            box-shadow: 0 0 0 20px rgba(201, 0, 57, 0);
        }

        50% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(201, 0, 57, 0);
        }
        100%{

        }
    }

    #nav-opener-mob{
        position: fixed;
        z-index: 10;
        right: 0;
        left: 0;
        bottom: 5vw;
        margin: auto;
        padding: 10px;
        border-radius: 999px;
        width: 50px;
        height: 50px;
        background-color: rgba(201, 0, 57);
        transition: all .5s;
        cursor: pointer;
    }

    #nav-opener-mob.pulse{
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
        animation: extra-pulse 5s infinite;
    }


    /*Logo*/
    .logo{
        padding: 30px 30px 15px;
        position: relative;
        display: inline-block;
    }
    .logo img {
        width: 25vw;
    }

    /**/
    #main{
        font-weight: 300;
        font-size: 18px;
        line-height: 28px;
    }

    h1 {
        font-size: 4.4vw;
        line-height: 6vw;
    }

    /**/
    .block.reverse{
        flex-direction: column-reverse;
    }
    .block-title, h1, h2 {
        font-size: 33px;
        line-height: 44px;
    }

    .block{
        flex-direction: column;
    }

    .block-col-l,
    .block-col-r{
        width:100%;
    }
    .block-col-l{
        padding: 30px;
    }

    .block-col-r{}

    .block-col-r.drop-img{
        display: none;
    }

    /*Popup*/
    .extra-content-fancy{
        width: 100%;
        padding-bottom: 60px;
    }
    .extra-content-fancy-wrapper{
        display: none;
    }


    /*Unsere Kunden*/
    .unsere_kunden{
        margin: 0 1vh;
        height: 100vh;
    }

    /*Asside*/
    /*Standbild*/
    .default .image{
        height: 50vh;
    }
    .image.mark-right.oben > div{
        background-position: top;
    }
    .image.mark-right.mitte > div{
        background-position: center;
    }
    .image.mark-right.unten > div{
        background-position: bottom;
    }

    /*Drop Image*/
    .border-image{
        height: 50vh;
    }
    .two-cols-image-white-layer{
        display: none;
    }
    .two-cols-image{
        position: relative;
        height: 50vh;
        width: 100%;
    }

    /*Navigation*/
    .asside.navigation{
        padding-left: 30px;
        padding-right: 30px;
    }

    /*Historie*/
    .historie-eintrag .jahr {
        font-size: 100px;
        line-height: 110px;
    }

    .historie-eintrag .text {
        font-weight: 300;
        font-size: 18px;
        line-height: 28px;
    }

    /**/
    .extra-content-title{
        font-size: 18px;
        padding: 10px 15px 6px;
    }

    /*Projekte*/
    .pro-col-1 .content-col{
        padding: 30px;
    }

    #slider-cursor,
    .slider-control{
        display: none;
    }
    .project-slider-top{
        display: none;
    }
    .projects-slider-item-ort{
        padding-top: 8px;
        height: 12px;
    }
    .projects-slider-item-link {
        line-height: 18px;
    }
    /*Projekte Single*/
    .container-fluid.single-project{
        padding-bottom: 0;
    }
    .single-project .row{
        margin: 0;
    }
    .single-project .content-col{
        padding: 30px;
    }
    .single-project-facts .title{
        font-size: 20px;
    }
    .single-project-first-picture{
        padding-right: .5vw;
        padding-left: .5vw;
    }

    /*Project List*/
    .home-project-li_title-block{
        padding: 30px;
    }
    /*Project Slide*/
    .home-project-sl-title_item{
        padding-left: 30px;
    }

    /*Contact*/
    .contact .row{
        margin: 0;
    }
    .contact .content-col{
        padding: 30px;
    }

    /*Footer*/
    .footer-col{
        padding: 0;
        position: relative;
    }
    .footer-col-wrapper{
        padding: 30px;
        position: relative;
        z-index: 1;
    }

    .footer-col{
        width: 100%;
    }
    #footer ul, #footer li, #footer p, #footer a{
        font-size: 15px;
        line-height: 23px;
    }

    .footer-col-wrapper{
        flex-direction: row;
    }
    .footer-col-item{
        margin: 3vh 0 3vh 0;
    }
    .col-logo {
        width: 105px;
        position: absolute;
        height: 100%;
        left: -20px;
    }

    .footer-logo-l, .footer-logo-r {
        width: 18vw;
        background-color: rgba(121, 122, 122, .5);
        display: inline-block;
        position: absolute;
    }

    .footer-logo-l{
        height: 70%;
        left: 0;
    }
    .footer-logo-r{
        height: 100%;
        left: 24.5vw;
    }

    .col-img {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .col-img img{
        position: relative;
        right: 6vw;
        width: 70%;
    }
}
@media (max-width:768px){
    #main{
        font-weight: 300;
        font-size: 18px;
        line-height: 28px;
    }

    h1,h2 {
        font-size: 6.4vw;
        line-height: 8vw;
    }
    .bookmark{
        font-size: 15px;
    }

    /*Logo*/
    .logo img {
        width: 135px;
    }

    /*Block*/
    .block {
        padding-bottom: 20px;
    }

    /*Zitat*/
    .zitat-logo {
        position: absolute;
        padding-left: 0;
        opacity: .2;
        height: 100%;
    }
    .zitat-logo img{
        height: 70%;
    }
    .zitat .content-wrapper {
        padding: 5vh 4vw;
    }
    .zitat .content {
        font-size: 21px;
    }
    .zitat .name{
        font-size: 16px;
    }

    /*Projekt Slider*/
    .home-project-sl{
        position: relative;
        height: 80vh;
    }
    .home-project-sl-title-sector.rel{
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    .home-project-sl-image{
        top: 0;
        position: absolute;
        width: 100%;
        height: 50vh;
    }
    .home-project-sl-image_item{
        height: 50vh;
        background-size: cover;
    }
    .home-project-sl .slick-dots{
        bottom: -4vw;
        padding-left: 30px;
    }


    /*Project List*/
    .home-project-li {
        flex-direction: column;
    }
    .pr-li-block,
    .home-project-li_title-block{
        width: 100%;
    }

    .home-project-li-item-wrap_headline{
        left: 0;
        padding-left: 15px;
    }
    .home-project-li_item {
        flex: 1 0 60%;
        margin: 0;
    }

/*Asside*/
    .aside-slider.dots-pos-default .slick-dots{
        left: 30px;
    }

    /*Footer*/
    .footer-col-wrapper{
        flex-direction: column;
    }

    .footer-col-wrapper .footer-col-item:first-child{margin-top: 0}
    .footer-col-wrapper .footer-col-item:last-child{margin-bottom: 0}

    .col-img img{
        width: 100%;
    }
}
@media (min-width:769px){
    /*Project Slider*/

    .home-project-sl-title-sector{
        width: 66.912531vw;
        border-right: 1vw solid #fff !important;
        padding-right: 0;
    }
    .home-project-sl-title{

        border-bottom: 20vh solid #FFF;

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        min-height: 100vh;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .home-project-sl-title .slick-dots{
        position: absolute;
        left: 0;
        bottom: 0;
        padding-left: 5vw;
    }
    .home-project-sl-image{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        height: 0;
        width: 66.666vw;
        background-color: #fff;

        -webkit-animation-name: drop-load;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-name: drop-load;
        animation-duration: 1s;
        animation-delay: .25s;
        animation-fill-mode: forwards;
    }
    .home-project-sl-image_item{
        background-size: cover;
        background-position: center;
        height: 100vh;
    }

    .home-project-sl-image .slick-current{

        -webkit-animation-name: to-bottom;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-name: to-bottom;
        animation-duration: 1s;
        animation-delay: .25s;
        animation-fill-mode: forwards;
    }

    .home-project-sl-image .slick-current .drop{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        -webkit-animation-name: drop-load;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-name: drop-load;
        animation-duration: 1s;
        animation-delay: .25s;
        animation-fill-mode: forwards;
    }
}