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

h1, h2, h3, h4, h5, h6 { margin: 0; }

h1 {
    font-size: 40px;
    line-height: 54px;
    letter-spacing: 1px;
}


h2 {
    font-size: 36px;
    letter-spacing: 0.7px;
    color: #191919;
}

h3 { font-size: 26px; }

.bottom_20 { margin-bottom: 20px; }

.bottom_40 { margin-bottom: 40px; }

.regular-template {
    margin-top: 80px;
    margin-bottom: 70px;
}


.no-scroll { overflow: hidden; }


.image-credit {
    bottom: 2px;
    left: calc( 100% - 16px );
    position: absolute;
    color: #fff;
    font-size: 8px;
    letter-spacing: 0.7px;
    transform: rotate(-90deg);
    transform-origin: left;
    width: 90%;
}



.background-lense {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(100,100,100,0.15);
}

.opening-paragraph {
    margin-top: 20px;
    margin-bottom: 70px;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.3px;
}


/* -----------------------------------------------------------------------------
# Colors
----------------------------------------------------------------------------- */


.bg-lightgrey { background-color: #f3f3f3; }


.bg-section-white {
  background-color: #ffffff;
}

.bg-section-lightgrey {
  background-color: #dbd8d7;
}

.bg-section-apricot {
  background-color: #eda98d;
}




.bg-black { background-color: #191919; }



/* -----------------------------------------------------------------------------
# Header
----------------------------------------------------------------------------- */


.branding-navigation {
    padding-top: 12px;
    padding-bottom: 12px;
}

.branding-navigation .row{
    display: flex;
    align-items: center;
}

.admin-bar .branding-navigation  {
  padding-top: 44px;
 }



.cd-auto-hide-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform .5s;
}


.cd-auto-hide-header.is-hidden {
  transform: translateY(-100%);
}


.background-holder {
    height: 78px;
    width: calc(100% + 30px);
    position: absolute;
    top: 0px;
    left: -15px;
    z-index: -1;
}

.branding-navigation-bg {
    background-color:#191919;
    display: none;
}



.hero-graphic,
.hero-image {
    width: 100%;
    height: 400px;
    position: relative;
}



.hero-animation {
    width: 100%;
    height: 600px;
    position: relative;
}




.hero-simple {
    width: 100%;
    height: 80px;
    position: relative;
}


.hero-image {
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-animation,
.hero-graphic,
.hero-simple {
    background: #db5016;
}




.title-container {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 15px;
    width: calc(100% - 30px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    padding: 0 8.33333333334%;
}

.title-container h1 {
    font-size: 32px;
    line-height: 48px;
    color: #fff;
 }


.hero-image .title-container h1 {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}

.site-branding a,
.main-navigation a { color: #fff;  }




.hero-graphic .animation-container {
    position: absolute;
    height: 300px;
    width: 100%;
    bottom: 0;
    margin-right: -15px;
    overflow: hidden;
}



.hero-graphic .animation-container .animated-box {
    background-color: #E6845B;
    height: 30px;
    width: 25%;
    position: absolute;
}



.hero-animation .animation-container {
    position: absolute;
    height: 350px;
    width: 100%;
    bottom: 0;
    margin-right: -15px;
    overflow: hidden;
    white-space: nowrap;
}



/*-------------------------- Home Page Animation ----------------------------*/

    .animation-container {
      background: #DB5016;
      height: 350px;
      width: 100%;
    }

    .animation-wrapper-1,
    .animation-wrapper-2,
    .animation-wrapper-3 {
        height: 100px;
        width: 100%;
        background: #DB5016;
        overflow: hidden;
    }


    .animation-wrapper-1 { padding-top: 10px; }
    .animation-wrapper-2 { margin-top: 25px; }
    .animation-wrapper-3 { margin-top: 0; }


        .animated-container-left-1 {
          width: 200%;
          height: 100%;
          margin-left: -110%;
          position: relative;
          overflow: hidden;
          float:left;
          background: #DB5016;
          text-align: right;
        }



    .animated-container-right-1 {
        width: 200%;
        height: 100%;
        margin-left: 90%;
        position: relative;
        background: #DB5016;
    }


    .animated-container-left-2 {
      width: 200%;
      height: 100%;
      margin-left: -188%;
      position: relative;
      overflow: hidden;
      float:left;
      background: #DB5016;
      text-align: right;
    }



    .animated-container-right-2 {
    width: 200%;
    height: 100%;
    margin-left: 12%;
    position: relative;
    background: #DB5016;
    }

    .animated-container-left-3 {
      width: 200%;
      height: 100%;
      margin-left: -100%;
      position: relative;
        float:left;
        background: #DB5016;
        text-align: right;

    }



    .animated-container-right-3 {
    width: 200%;
    height: 100%;
    margin-left: 100%;
    position: relative;
    background: #DB5016;
    }


    .animated-container-left-1 .svg-container,
    .animated-container-left-2 .svg-container,
    .animated-container-left-3 .svg-container {
        float: right;
    }

    .animated-container-right-1 .svg-container,
    .animated-container-right-2 .svg-container,
    .animated-container-right-3 .svg-container {
        float: left;
    }



    .svg-container {
    	position: relative;
    	width: 650px;
    	height:100px;
    	vertical-align: middle;
    	overflow: hidden;
      pointer-events: none;
    }


    .animation-wrapper-2 .svg-container { width: 1050px; margin: 0 25px; }


    .svg-content {
    	display: inline-block;
    	position: absolute;
    	top: 0;
    	left: 0;
    }



    .mobile-hero-image-container { display: none; }



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

     .title-container h1 {
         font-size: 22px;
         line-height: 32px;

      }


      .mobile-hero-image-container {
          display: block;
          position: absolute;
          width: 100%;
          bottom: 0;
          margin-right: -15px;
      }


      .hero-animation { height: 320px; }

      .hero-animation .animation-container { display: none; }

 }







 /* -----------------------------------------------------------------------------
 # MENU
 ----------------------------------------------------------------------------- */



 .main-navigation ul {
     padding: 0;
     margin: 0;
     margin-right: -20px;
 }



 .main-navigation {
     font-size: 15px;
     letter-spacing: 1px;
 }

 .menu-main-menu-container ul li {
     height: 28px;
     display: inline-block;
     transition: border-bottom 0.1s;


 }


  //.menu-main-menu-container ul li:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 1px;
   bottom: 0px;
   left: 0;
   background-color: #fff;
   visibility: hidden;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transition: all 0.3s ease-in-out 0s;
   transition: all 0.3s ease-in-out 0s;
 }

 .main-navigation ul li:hover {
     border-bottom: 1px solid #fff;
     transition: border-bottom 0.1s;
 }


 //.main-navigation ul li:hover:before {
   visibility: visible;
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
 }


 .main-navigation ul li.current-menu-item:not(.anchor) {
     border-bottom: 1px solid #fff;

 }



 .menu-icon-container {
     //right: 30px;
     //top: 10px;
     //position: absolute;
     z-index: 15;
 }


 .menu-icon-container-fixed {
     position: fixed!important;
     right: 12%;
 }





 .toggle-button {
   position: absolute;
   width: 26px;
   height: 16px;
   padding: 0px;
   transition: .25s;
   z-index: 15;
   top: -5px;

 }

 .toggle-button:hover {
   cursor: pointer;
 }


 .toggle-button .menu-bar {
   position: absolute;
   border-radius: 2px;
   width: 80%;
   transition: .5s;
 }


 .toggle-button .menu-bar-top {
   border: 2px solid #fff;
   border-bottom: none;
   top: 0;
 }


 .toggle-button .menu-bar-middle {
   height: 2px;
   background-color: #fff;
   margin-top: 3px;
   margin-bottom: 3px;
   top: 2px;
 }


 .toggle-button .menu-bar-bottom {
   border: 2px solid #fff;
   border-top: none;
   top: 10px;
 }



 .button-open .menu-bar-top {
   transform: rotate(45deg) translate(3px, 4px);
   transition: .5s;
 }


 .button-open .menu-bar-middle {
   transform: translate(-180px);
   transition: .1s ease-in;
   opacity: 0;
 }


 .button-open .menu-bar-bottom {
   transform: rotate(-45deg) translate(3px, -4px);
   transition: .5s;
 }


 .menu-wrap {
     background-color: #191919;
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     width: 320px;
     margin-right: -320px;
     font-weight: 100;
     overflow: auto;
     transition: .25s;
     z-index: 10;
 }

 .menu-wrap a {
     color: #fff;
     text-decoration: none;
 }

 .menu-show {
     margin-right: 0;
     box-shadow: 4px 2px 15px 1px #191919;
 }


 .menu-wrap .menu-sidebar { padding: 100px 40px; }

 .menu-wrap .menu-sidebar ul {
     list-style: none;
 }

 .menu-wrap .menu-sidebar > div > ul {
     list-style: none;
     margin: 0;
 }



 .menu-wrap .menu-sidebar ul li {
     padding: 12px 0;
     font-size: 24px;
     line-height: 36px;
     cursor: pointer;
 }


 .menu-wrap .submenu { margin: 0; }


 .menu-wrap .sub-menu-button {
     color: #ffffff;
     margin-left: 30px;
     cursor: pointer;
 }

 .menu-wrap .sub-menu-back-button {
     color: #ffffff;
     cursor: pointer;
     padding-bottom: 8px;
     display: block;
     margin-top: 8px;
 }


 .menu-wrap .sub-menu-back-button .fa {
     font-size: 13px;
     font-weight: bold;
 }

 .menu-wrap .sub-menu-back-button span {
     text-transform: uppercase;
     font-weight: bold;
     font-size: 13px;
     margin-left: 8px;
     position: relative;
     top: 0px;
 }

 .menu-wrap .sub-menu {
     padding: 104px 40px 100px 80px;
     background-color: #191919;
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     width: 320px;
     margin-right: -320px;
     font-size: 20px;
     font-weight: 100;
     overflow: auto;
     transition: .25s;
     z-index: 11;
 }


 .menu-wrap .sub-menu-show {
     margin-right: 0;
 }




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

       .menu-main-menu-container ul li {
           height: 60px;
           display: block;
       }


       .menu-main-menu-container ul li.active {
           border-bottom: 0;
       }

  }




/* -----------------------------------------------------------------------------
# Footer
----------------------------------------------------------------------------- */

footer {
    color: #fff;
    min-height: 285px;
    padding-top: 60px;
}


footer ul {
    margin: 0!important;
    padding: 0!important;
    list-style: none!important;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 22px;
    font-weight: normal;
    font-style: normal;
}

footer  a {
    color: #fff!important;
    transition: color 0.3s;
}

footer a:hover {
    color: rgba(255,255,255,0.5)!important;
    transition: color 0.3s;
}



#catapult-cookie-bar {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  padding-top: 14px!important;
  padding-bottom: 14px!important;
}

.ctcc-inner {
  width: 81.333333334%;
  margin: 0 auto;
}

.ctcc-left-side {
  display: block;
  width: 80%;
  float: left;
}


.ctcc-right-side {
  display: block;
  width: 20%;
  float: right;
  text-align: right;
}



#catapult-cookie-bar a {
  text-decoration: underline;
}


#catapult-cookie-bar button {
  border-radius: 0!important;
}


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


.ctcc-inner {
  width: calc(100% - 15px);
  margin: 0 15px;
}



.ctcc-left-side,
.ctcc-right-side {
  display: block;
  width: 100%;
  float: none;
}

.ctcc-right-side {
  text-align: center;
  margin-top: 16px;
}



}



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

.footer-logo { margin-bottom: 30px; }


}



/* -----------------------------------------------------------------------------
# Opening
----------------------------------------------------------------------------- */

.opening-container {
  margin-top: 60px;
  margin-bottom: 40px;
}



@media screen and (min-width: 768px) {
  .opening-container {
    margin-top: 100px;
    margin-bottom: 50px;
  }
}



/* -----------------------------------------------------------------------------
# Home
----------------------------------------------------------------------------- */



.home .opening-paragraph {
    margin-top: -20px;
    margin-bottom: -30px;
}




.home-title-container {
    margin-top: 120px;
    margin-bottom: 85px;
}




/* -----------------------------------------------------------------------------
# Projects Page
----------------------------------------------------------------------------- */


.projectfilter-button {
  float: right;
  margin-right: 30px;
  margin-bottom: 30px;
  color: #E6845B;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.projectfilter-button::before {
  font-family: 'FontAwesome';
  content: '\f067';
  font-weight: 300;
  margin-right: 10px;
}

.projectfilter-button span:hover { text-decoration: underline; }


.projectfilter-button.active::before {
  content: '\f068';
}


.projectfilter-container {
  clear: both;
  display: none;
  background-color: #f9f9f9;
  margin-bottom: 30px;
  padding-top: 50px;
  padding-bottom: 20px;
}

.projectfilter-container input {
  border: 0;
  background-color: #e5e5e5;
  text-transform: uppercase;
  padding: 10px 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  width: 300px;
}

.projectfilter-container h3 {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 26px;
}

.ui-group {
  margin-bottom: 30px;
}

.filters .term-filter {
  background: transparent;
  outline: 0;
  color: #191919;
  display: block;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 16px;
}

.filters .term-filter:hover,
.filters .term-filter.is-checked {
  color: #E6845B;
}




.grid-item {
  padding-right: 0;
  padding-left: 0;
}

/* -----------------------------------------------------------------------------
# Archive
----------------------------------------------------------------------------- */


.archive-header {
    padding-top: 80px;
    padding-bottom: 95px;
    display: flex;
    align-items: center;
}


.project-container .project-image {
    height: 450px;
    background-size: cover;
    background-position: center center;
    position: relative;
}


.project-container .project-description-container {
    height: 450px;
    color: #4A4A4A;
    background-color: #f3f3f3;
    transition: background-color 0.6s;

    padding-top: 60px;
    padding-bottom: 30px;
}

.project-container .project-description-container .row,
.project-container .project-description-container .project-description {
    position: relative;
    height: 100%;
}


.project-container .project-description-container .project-description h2 {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0.5px;
    color: #191919;
    font-weight: 400;
    transition: color 0.6s;

}


.project-container:hover .project-description-container .project-description h2 {
    color: #f3f3f3;
    transition: color 0.6s;
}



.project-container:hover .project-description-container  {
    background-color: #E6845B;
    transition: background-color 0.6s;
    color: #f3f3f3;
}

.project-container .project-description-container p {
    transition: color 0.6s;
}


.project-container:hover .project-description-container p {
    transition: color 0.6s;
}


.project-container .background-lense {
    margin-left: -15px;
    transition: background-color 0.6s;
}

.project-container:hover .background-lense {
    background-color: rgba(0,0,0,0.25);
    transition: background-color 0.6s;
}


.read-more-link {
    color: #E6845B;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    position: absolute;
    bottom: 20px;
}

.project-container:hover .read-more-link {
    color: #f3f3f3;
}


.project-container .line {
    width: 60px;
    display: inline-block;
    margin-right: 10px;
    border-bottom: 1px solid #E6845B;
    height: 8px;
    margin-bottom: 6px;
}

.project-container:hover .line {
    border-bottom: 1px solid #f3f3f3;

}

.arrow-right {
    position: absolute;
    z-index:2;
    width: 0;
    height: 0;
    left: 0;
    top: 50%;
    margin-top: -40px;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #f3f3f3;
    transition: border-left 0.6s;
    display: none;
}

.arrow-right.inactive {
  display: none;
}


.project-container:hover .arrow-right {
    border-left: 40px solid #E6845B;
    transition: border-left 0.6s;
}



.arrow-left {
    position: absolute;
    z-index:2;
    width: 0;
    height: 0;
    right: 0;
    top: 50%;
    margin-top: -40px;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right: 40px solid #f3f3f3;
    transition: border-right 0.6s;
    display: none;
}

.arrow-left.inactive {
  display: none;
}


.project-container:hover .arrow-left {
    border-right: 40px solid #E6845B;
    transition: border-right 0.6s;
}



.arrow-up {
    position: absolute;
    z-index:2;
    width: 0;
    height: 0;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #f3f3f3;
    transition: border-bottom 0.6s;
}


.project-container:hover .arrow-up {
    border-bottom: 40px solid #E6845B;
    transition: border-bottom 0.6s;
}



.arrow-down {
    position: absolute;
    z-index:2;
    width: 0;
    height: 0;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #f3f3f3;
    transition: border-top 0.6s;
}


.project-container:hover .arrow-down {
    border-top: 40px solid #E6845B;
    transition: border-top 0.6s;
}





.related-projects-title-container {
    padding-top: 105px;
    padding-bottom: 85px;
    background-color: #fff;
    transistion: background-color 0.6s;
    color: #191919;
}

a:hover .related-projects-title-container {
    background-color: #f1f1f1;
    transistion: background-color 2s;
}



.project-filter-container { float: right; }

.filter-title {
    font-size: 18px;
    letter-spacing: 0.3px;
    margin-right: 20px;
    float: right;
    line-height: 44px;
}


.filtertitle { font-weight: bold;}

#projectfilter {
    background-color: #191919;
    color: #fff;
    padding: 6px;
}

#projectfilter optgroup,
#projectfilter option {
    color: #fff;
    background-color: #191919;}

    optgroup {
        background-color: black;
        color: white;
    }





    .pagination-container {

    }


    .custom-pagination span,
    .custom-pagination a {
        display: inline-block;
        width: 22px;
        height: 25px;
        line-height: 25px;
        color: #191919;
        background-color: transparent;
        margin-top: 60px;
        margin-bottom: 60px;

    }


    .custom-pagination a:hover {
        background-color: #f1f1f1;
    }




    .custom-pagination span.dots {
         padding: 0;
         color: #191919;
         display: inline-block;

    }


    .custom-pagination span.current {
        background-color: #f1f1f1;
    }



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

.project-container .project-description-container { height: auto; }

.read-more-link {
    position: relative;
    margin-top: 60px;
    margin-bottom: 0px;
    display: block;
}

.read-more-link span.line { width: 30px; }

}


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

.archive-header { display: block;}

.filter-title { display: none;}

.project-filter-container {
    //float: none;
    //margin: 0 auto;
}


}

@media only screen and (min-width: 768px) {

.arrow-left,
.arrow-right { display: block; }

.project-archive .arrow-up { display: none; }

.grid-item .arrow-up { display: none!important; }

}


@media only screen and (min-width: 768px) and (max-width: 1199px) {

    .project-container .project-image,
    .project-container .project-description-container {
        height: 480px;
}


}



/* -----------------------------------------------------------------------------
# Project
----------------------------------------------------------------------------- */

.project .opening-paragraph {
    margin-top: 80px;
    margin-bottom: 70px;
}


.carousel-control { width: 30%; }

.carousel-control.left,
.carousel-control.right { background: none; }


.carousel-indicators li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0px 10px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(216, 216, 216, 0.55);
    border-radius: 20px;
    border: 0;

}

.carousel-indicators .active {
    width: 20px;
    height: 20px;
    margin: 0px 10px;
    background-color: rgba(120, 120, 120, 0.75);
    border: 0;


}


/*------- Slick Slider ------ */


.project-carousel img {
  width: 100%;
  max-width: none;
}

.slick-slide {
  outline: 0;
}


ul.slick-dots {
  list-style: none;
  width: 100%;
  text-align: center;
  padding-left: 0;
  margin-left: 0;
  position: absolute;
  bottom: 0px;
}

@media screen and (max-width: 767px) {
  ul.slick-dots {
    position: absolute;
    bottom: -65px;
  }
}

.slick-dots li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0px 10px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(216, 216, 216, 0.55);
    border-radius: 20px;
    border: 0;
}

.slick-dots li.slick-active {
    width: 20px;
    height: 20px;
    margin: 0px 10px;
    background-color: rgba(120, 120, 120, 0.75);
    border: 0;
}

.slick-dots li button {
  display: none;
}

.slick-arrow {
  position: absolute;
  height: 100%;
  width: 20%;
  background-color: transparent!important;
  z-index: 2;
  outline: 0;
}


.slick-next {
  right: 0;
  top: 0;
}

.slick-arrow:hover,
.slick-arrow:active {
  background-color: transparent;
}

@media screen and (max-width: 1024px) {
  .slick-arrow {
    display: none;
  }
}

/*---- End Slick Slider ----- */


.project-info-container {
    padding-top: 85px;
    padding-bottom: 115px;
}

.infotext { padding-top: 5px; }


.project-list {
    margin: 0;
    list-style: none;
}

li.project-link-container { margin-bottom: 20px; }

li.project-link-container:last-child { margin-bottom: 0px; }


.project-link-container a {
    color: #db5016!important;
    text-decoration: none;
}




.single-projects .slide-image img {
  width: 100%!important;
  max-width: auto!important;
}



@media only screen and (min-width: 1200px) {

.social-links { text-align: right;}


}


/*-------------------------------------------------------------------------------
# Social
--------------------------------------------------------------------------------*/




.social-title {
  margin-right: 16px;
  font-weight: 700;
  color: #191919
  ;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
}



.social-circle {
    display: inline-block;
    position: relative;
    top: 1px;
    margin-right: 8px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
}



.social-circle {
background-color: #191919;
color: #fff!important;
-webkit-transition: color 0.6s;
transition: color 0.6s;
-webkit-transition: background-color 0.6s;
transition: background-color 0.6s;
}

.social-circle:hover {
    background-color: rgba(0,0,0,0.75);
    color: #ffffff!important;
    -webkit-transition: color 0.6s;
    transition: color 0.6s;
    -webkit-transition: background-color 0.6s;
    transition: background-color 0.6s;
}



.social-links .fa { position: relative; }

.fa-facebook { top: 1px; }

.fa-twitter { top: 1px; right: -1px;}

.fa-instagram { right: -1px; }

.fa-xing {}

.fa-linkedin {}

.fa-google-plus { right: -1px; }

.fa-youtube-play {}



/*-------------------------------------------------------------------------------
# Products
--------------------------------------------------------------------------------*/





.products ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.products ul li {
}

.products ul  {

}

div.product-list-container div div ul li { line-height: 28px; }

.products .arrow-down { display: none; }


.products ul li.col-md-4:nth-child(3n+2) .arrow-down { display: block; }

.products ul li.col-md-4:nth-child(3n+2) .arrow-up { display: none; }


.products .product-title-container:first-child { display: none; }


.products ul li.col-md-4:nth-child(3n+2) .product-title-container:first-child { display: flex; }

.products ul li.col-md-4:nth-child(3n+2) .product-title-container:last-child { display: none; }



.products ul li.col-md-6.even-count:nth-child(odd) .arrow-down { display: block; }

.products ul li.col-md-6.even-count:nth-child(odd) .arrow-up { display: none; }


.products ul li.col-md-6.even-count:nth-child(odd) .product-title-container:first-child { display: flex; }

.products ul li.col-md-6.even-count:nth-child(odd) .product-title-container:last-child { display: none; }



.products .product-image-container {
    background-size: cover;
    background-position: 50% 50%;
    height: 190px;
    padding-bottom: 50%;
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
}

.products .product-image-container .arrow-down {
    position: absolute;
    top: 0;
}


.products .product-title-container {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 -15px;
    padding: 30px;
    background-color: #f3f3f3;
    transition: background-color 0.6s;
}



.products ul li:hover .product-title-container  {
    background-color: #E6845B;
    transition: background-color 0.6s;
}

.products ul li .background-lense { transition: background-color 0.6s; }

.products ul li:hover .background-lense {
    background-color: rgba(0,0,0,0.25);
    transition: background-color 0.6s;
}




.products ul li:hover h3 {
    color: #f3f3f3!important;
    transition: color 0.6s;

}


.products .product-title-container h3 {
    font-size: 18px;
    letter-spacing: 0.33px;
    line-height: 28px;
    color: #191919;
    transition: color 0.6s;
}




.products ul li:hover .arrow-up {
    border-bottom: 40px solid #E6845B;;
    transition: border-bottom 0.6s;
}



.products ul li:hover .arrow-down {
    border-top: 40px solid #E6845B;;
    transition: border-top 0.6s;
}


a.related-projects-title-container {
    padding-top: 95px;
    padding-bottom: 105px;
    background-color: #fff;
    transition: background-color 0.6s;
    color: #191919;
    display: block;
}

a.related-projects-title-container:hover {
    background-color: #E6845B;
    transition: background-color 0.6s;
    color: #f3f3f3;
}



a.contact-us-title-container {
    padding-top: 95px;
    padding-bottom: 105px;
    background-color: #fff;
    transition: background-color 0.6s;
    color: #191919;
    display: block;
}

a.contact-us-title-container:hover {
    background-color: #E6845B;
    transition: background-color 0.6s;
    color: #f3f3f3;
}




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


.products ul li.col-md-4:nth-child(3n+2) .arrow-down { display:none; }

.products ul li.col-md-4:nth-child(3n+2) .arrow-up { display: block; }

.products ul li.col-md-4:nth-child(3n+2) .product-title-container:first-child { display: none!important; }

.products ul li.col-md-4:nth-child(3n+2) .product-title-container:last-child { display: flex!important; }


.products ul li.col-md-6.even-count:nth-child(odd) .arrow-down { display: none; }

.products ul li.col-md-6.even-count:nth-child(odd) .arrow-up { display: block; }


.products ul li.col-md-6.even-count:nth-child(odd) .product-title-container:first-child { display: none; }

.products ul li.col-md-6.even-count:nth-child(odd) .product-title-container:last-child { display: flex; }




}



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


.products .product-image-container {
        height: 220px;
    }

.products .product-title-container {
    height: 180px;
}


.products .product-title-container h3 {
    font-size: 18px;
    line-height: 27px;
}

}





/*-------------------------------------------------------------------------------
# Single Product
--------------------------------------------------------------------------------*/


.product .opening-paragraph {
    margin-top: 80px;
    margin-bottom: 70px;
}

.product .product-list-container ul {
    margin: 0;
    padding: 0;
}

.product .product-list-container:first-child {
    padding-top: 70px;
    padding-bottom: 60px;
    background-color: #f8f8f8;
}


.product .product-list-container:nth-child(2) {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: #f2f2f2;
}


.product .product-list-container:nth-child(3) {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: #d9d9d9;
}


.product .product-list-container:nth-child(4) {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: #c1c1c1;
}


.product .product-list-container:nth-child(5) {
    padding-top: 80px;
    padding-bottom: 60px;
    background-color: #a9a9a9;
}




.product .product-list-container:last-child {
    padding-bottom: 80px;
}


.product .product-read-more-link { white-space: nowrap; }


.product .product-list-container { position: relative; }


.product .arrow-down {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 16.66666667%;
    margin-left: 15px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}


.product .product-list-container:first-child .arrow-down {
    display: none;
}


.product .product-list-container:nth-child(2) .arrow-down {
    border-top: 40px solid #f8f8f8;
}


.product .product-list-container:nth-child(3) .arrow-down {
    border-top: 40px solid #f2f2f2;
}

.product .product-list-container:nth-child(4) .arrow-down {
    border-top: 40px solid #d9d9d9;
}


.product .product-list-container:nth-child(5) .arrow-down {
    border-top: 40px solid #c1c1c1;
}



.other-products-title-container {
    padding-top: 95px;
    padding-bottom: 105px;
}

.other-products-container {

}


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

.product .product-list-container ul { margin-left: 35px!important;}

.product .product-list-title { margin-bottom: 20px!important; }


.product .arrow-down {
    left: 8.3333333334%;
}

}



/*-------------------------------------------------------------------------------
# Team
--------------------------------------------------------------------------------*/


.team { margin-bottom: 110px; }






.team-container .team-image {
    height: 330px;
    background-size: cover;
    background-position: center center;
    position: relative;
}


.team-container .team-description-container {
    height: 330px;
    color: #191919;
    padding-top: 30px;
    padding-bottom: 30px;
}


.team-container:nth-child(even) .team-description-container { background-color: #f8f8f8; }

.team-container:nth-child(even) .arrow-right { border-left: 40px solid #f8f8f8; }

.team-container:nth-child(even) .arrow-up { border-bottom: 40px solid #f8f8f8; }


.team-container:nth-child(odd) .team-description-container { background-color: #f3f3f3; }




.team-container .team-description-container .row,
.team-container .team-description-container .team-description {
    position: relative;
    height: 100%;
}

.team-container h2 {
    font-size: 26px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.team-container .cv {
    font-size: 16px;
    line-height: 22px;
    color: #4A4A4A;
}


.team-container .social-network-links {
    position: absolute;
    bottom: 0px;
}

.team-container .line {
    width: 60px;
    display: inline-block;
    margin-right: 10px;
    border-bottom: 1px solid #888888;
    margin-bottom: 5px;

}


.team-container .social-network-link {
    color: #888888;
    text-transform: uppercase;
    margin-right: 50px;
        transition: color 0.3s;
}

.team-container .social-network-link:nth-child(2) {
    margin-right: 0px;
}


.team-container .social-network-link:hover  {
    color: #444444;
    transition: color 0.3s;
}

.team-container .social-network-link:hover .line { border-bottom: 1px solid #444444; }





.partner-title-container {
    padding-top: 105px;
    padding-bottom: 85px;
    background-color: #fff;
    color: #191919;
}



.partner-container {
    display: flex;
    flex-direction: column;
    color: #191919!important;
    transition: color 0.6s;
}

a.partner-container:hover {
    color: #fff!important;
    transition: color 0.6s;
}



.partner-logo {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}



.partner-logo img {
    max-height:80px;
    width: auto;
}


.partner-logo .arrow-down { border-top: 40px solid #f8f8f8; }

.partner-logo .arrow-up { border-bottom: 40px solid #f8f8f8; }


.partner-logo .arrow-down {
    top: 0;
    display: none;
}


a.partner-container:hover .partner-logo .arrow-down {
    border-top: 40px solid #E6845B;
    transition: border-top 0.6s;
}

a.partner-container:hover .partner-logo .arrow-up {
    border-bottom: 40px solid #E6845B;
    transition: border-bottom 0.6s;
}




.partner-description {
    padding-left: 60px;
    padding-right: 60px;
    margin-left: -15px;
    margin-right: -15px;
    background-color: #f8f8f8;
    transition: background-color 0.6s;
    font-size: 16px;
    line-height: 24px;
    height: 180px;
    display: flex;
    align-items: center;
}


a.partner-container:hover .partner-description {
    background-color: #E6845B;
    transition: background-color 0.6s;

}




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

.team-container  .arrow-up { display: block; }

    .team-container .arrow-left,
    .team-container .arrow-right { display: none; }


    .team-container .team-image {
        height: 280px;

    }


    .team-container .team-description-container {
        height: auto;

    }

    .team-container .social-network-links {
        position: relative;
        margin-top: 20px;
        margin-bottom: 30px;

    }

    .team-container .social-network-link span.line { width: 30px; }

    .team-container .social-network-link { margin-right: 30px; }



    .partner-logo {
        height: 240px;
    }



}



@media only screen and (min-width: 768px) and ( max-width: 990px) {

.team-container  .arrow-up { display: block; }

.team-container .arrow-left,
.team-container .arrow-right { display: none; }


.partner-container:nth-child(even) .partner-logo { order: 2; }

.partner-container:nth-child(even) .partner-description { order: 1; }


.partner-container:nth-child(even) .partner-logo .arrow-down { display: block; }

.partner-container:nth-child(even) .partner-logo .arrow-up { display: none; }

}



@media only screen and (min-width: 991px) and ( max-width: 1199px ) {

.teams .arrow-up { display: none; }

.partner-container:nth-child(3n+2) .partner-logo { order: 2; }
.partner-container:nth-child(3n+2) .partner-description { order: 1; }


.partner-container:nth-child(3n+2) .partner-logo .arrow-down { display: block; }

.partner-container:nth-child(3n+2) .partner-logo .arrow-up { display: none; }


.team-container .team-image {
    height: 380px;

}


.team-container .team-description-container {
    height: 380px;
}


}


@media only screen and (min-width: 1200px) {

.partner-container:nth-child(even)  .partner-logo { order: 2; }
.partner-container:nth-child(even) .partner-description { order: 1; }


.partner-container:nth-child(even) .partner-logo .arrow-down { display: block; }

.partner-container:nth-child(even) .partner-logo .arrow-up { display: none; }

}




/*-------------------------------------------------------------------------------
# Contacts
--------------------------------------------------------------------------------*/


.contacts { margin-bottom: 110px; }

.contacts .opening-container {
    margin-top: 80px;
    margin-bottom: 70px;
}

a.kartenlink {
    margin: 12px 0;
    display: block;
}


@media only screen and (min-width: 768px) {

a.telephone-link {
    pointer-events: none;
    color: #191919;
}
}


/*-------------------------------------------------------------------------------
# About
--------------------------------------------------------------------------------*/

.about-page-container {
    padding-top: 120px;
    padding-bottom: 140px;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.6px;
    color: #fff;
    background-color: #db5016;
}



.about-page-container .download-link {
    display: inline-block;
    height: 40px;
    color: #fff!important;
    border-bottom: 1px solid #fff;
}




/*-------------------------------------------------------------------------------
# Flexible Layout Elements / Blog
--------------------------------------------------------------------------------*/

.blogpost {
  margin-bottom: 70px;
}



.float-left {
  float: left;
}

.float-right {
  float: right;
}

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

  .float-left {
    float: none;
  }

  .float-right {
    float: none;
  }

}


.author-container {
  font-size: 13px;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 40px;
}


.author-image-circle {
  border-radius: 50%;
  height: 70px;
  width: 70px;
  overflow: hidden;
}

.author-image-circle img {
  width: 100%;
  height: auto;
}

.mobile-post-details {
  clear: left;
  padding-top: 20px;
}

.mobile-post-details span {
 margin-top: 30px;
}

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

.article-sharing-container {
  padding-top: 16px;
}

}

.blogpost .opening-paragraph {
  margin: 70px 0 40px 0;
}


.flexible-content-row {
  margin-top: 30px;
}

h2.main-headline {
  font-size: 26px;
  letter-spacing: normal;
  clear: none;
  margin-bottom: 19px;
  padding-left: 35px;
  text-indent: -35px;
}


h2.main-headline:before {
  display: inline-block;
  margin-right: 14px;
  width: 21px;
  height: 21px;
  background-color: #db5016;
  content: '';
  position: relative;
  top: 1px;
}

@media screen and (min-width: 768px) {

  .flexible-image-outer-wrapper.float-left ~ .text-container h2.main-headline {
    position: relative;
    left: 35px;
    padding-left: 0;
    text-indent: -70px;
    width: calc(100% - 35px);
  }

  .flexible-image-outer-wrapper.float-left ~ .text-container h2.main-headline:before {
    margin-left: 35px;
  }

}


h3.sub-headline {
  font-size: 21px;
  clear: none;
  margin-bottom: 16px;
}

.small {
  font-size: 12px;
}

.regular {
  font-size: 16px;
}

.paragraph-container {
  margin-bottom: 30px;
}

.flexible-image-outer-wrapper {
  width: calc(50% - 15px);
  margin-bottom: 30px;
}

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

  .flexible-image-outer-wrapper {
    width: 100%;
    margin-left: 0!important;
    margin-right: 0!important;
}

}

.flexible-image-inner-wrapper {
  position: relative;
}

.float-left.flexible-image-outer-wrapper {
  margin-right: 30px;
}

.float-right.flexible-image-outer-wrapper {
  margin-left: 30px;
}

.fullwidth-image-outer-wrapper {
  padding-bottom: 30px;
  padding-top: 30px;
}

.fullwidth-image-wrapper {
  position: relative;
}


.image-caption {
  font-size: 13px;
  font-weight: bold;
  margin-top: 12px;
}