@charset "UTF-8";
/* CSS Document */

#workheader{
    background: url("../images/work-20.jpg");
    background-position: 50% 35%;
    background-size: cover;
    width: 100%;
    height: 89vw;
    border-bottom: 4px #000 solid;


}

@media screen and (min-width:576px){
    #workheader{
        height: 39vh;
        background-position: 50% 45%!important;
        background-size: cover;
    }
}
@media screen and (min-width:768px){
    #workheader{
        
        background-position: 70% 43%!important;
        background-size: cover;
    }
}
@media screen and (min-width:992px){
    #workheader{
        
        background-position: 50% 50%!important;
        background-size: cover;
    }
}
@media screen and (min-width:1200px){
    #workheader{
        
        background-position: 50% 51%!important;
        background-size: cover;
    }
}



#workherocopy{
    border-bottom:4px #000 solid!important;
    border-left:none;
    background: #fff;
    color: #000;
    z-index:10002
}

.projecttitle{
    background: #dfe8ed;
    color: #000;
    border-bottom:4px #000 solid;
    transition: background 0.125s;
}
div.flex-row:hover>div.projecttitle{
    background: #FFE300;
}


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

    .projecttitle{

        border-bottom:4px #000 solid;
    }

    
}

.projectthumb{
      border-left:none;
      border-bottom:none;

      }

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

.projectthumb{
    background: #fff;
	border-left: 4px #000 solid;
    border-bottom:4px #000 solid;

}

}
  


#project1{
    background: url("../images/working-assets/project1.jpg");
    background-position: center;
    background-size: cover;
    min-height: 7rem;
	-webkit-animation: bg-pan-tl 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
	        animation: bg-pan-tl 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}
#projectheader1{
    background: url("../images/working-assets/project1.jpg");
    border-bottom: none;
    background-position: 90% 28%!important;
    background-size: cover;
    width: 100%;
    height: 39vh;
    padding:0 0 0 0;
    transition: height 1s ease-in-out;
}

#projectheader1:hover{
    height: 70vh;
    
}

@media screen and (min-width:576px){
    #projectheader1{
        
        background-position: 80% 28%!important;
        background-size: cover;
    }
    
}

@media screen and (min-width:768px){
    #projectheader1{
        
        background-position: 80% 35%!important;
        background-size: cover;
    }
}
@media screen and (min-width:992px){
    #projectheader1{
        
        background-position: right 40%!important;
        background-size: cover;
        
    }
    #projectheader1:hover{
        
        height:70vh
    }
}
@media screen and (min-width:1200px){
    #projectheader1{
        
        background-position: 50% 43%!important;
        background-size: cover;
    }
}

#carousel-project-1-1{
    background-image: url("../../images/base-elements/spacer_2048.png");
    background-size:150%;
    background-position: 40% 41%;
    width: 100%;
    height: 70vh
}
#carousel-project-1-2{
    background: url("../images/project1/Surface-Prem-Tbl.jpg");
    background-size:cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
    width: 100%;
    height: 112vh
}
@media screen and (min-width:768px){
    #carousel-project-1-2{
          background: url("../images/project1/Surface-Prem-Tbl.jpg");
          background-size:contain;
          background-position: 50% 193%;
          width: 100%;
          height: 90vh
      }
}
@media screen and (min-width:992px){
    #carousel-project-1-2{
          background: url("../images/project1/Surface-Prem-Tbl.jpg");
          background-size:contain;
          background-position: 50% 193%;
          width: 100%;
          height: 100vw
      }
}
#carousel-project-1-3{
    background: url("../images/project1/PDP_Mobile_carousel_2.jpg");
    background-size:100%;
    background-position: 40% 50%;
    width: 100%;
    height: 70vh
}
@media screen and (min-width:768px){
    #carousel-project-1-3{
          background: url("../images/project1/PDP_Desktop_carousel_2.jpg");
          background-size:cover;
          background-position: 50% 17%;
          width: 100%;
          height: 70vh
      }
}
@media screen and (min-width:1200px){
    #carousel-project-1-3{
          background: url("../images/project1/PDP_Desktop_carousel_2.jpg");
          background-size:cover;
          background-position: 50% 30%;
          width: 100%;
          height: 70vh
      }
}
#carousel-project-1-4{
    background: url("../images/project1/pp_email.jpg");
    background-size:cover;
    background-position: center -20%;
    background-repeat:no-repeat;
    width: 100%;
    height: 80vh
}
@media screen and (min-width:768px){
    #carousel-project-1-4{
          background: url("../images/project1/pp_email_desktop.jpg");
          background-size:cover;
          background-position: 50% 17%;
          width: 100%;
          height: 70vh
      }
}
@media screen and (min-width:992px){
    #carousel-project-1-4{
          background: url("../images/project1/pp_email_desktop.jpg");
          background-size:cover;
          background-position: 50% 30%;
          width: 100%;
          height: 70vh
      }
}
#project2{
    background: url("../images/working-assets/project2.jpg");
    background-position: center;
    background-size: cover;
    min-height: 7rem;
	-webkit-animation: bg-pan-tr 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
	        animation: bg-pan-tr 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}

#project3{
    background: url("../images/working-assets/project3.jpg");
    background-position: center;
    background-size: cover;
    min-height: 7rem;
	-webkit-animation: bg-pan-tl 20s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
	        animation: bg-pan-tl 20s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}

#project4{
    background: url("../images/working-assets/project4.jpg");
    background-position: center;
    background-size: cover;
    min-height: 7rem;
	-webkit-animation: bg-pan-top 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
	        animation: bg-pan-top 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}
#project5{
    background: url("../images/working-assets/project5.jpg");
    background-position: center;
    background-size: cover;
    min-height: 7rem;
	-webkit-animation: bg-pan-tr 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
	        animation: bg-pan-tr 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}
.subtitle {
    font-family: "FuturaBT-Medium", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.375rem;
    padding-left: 4rem;
    margin-bottom:2rem
}

.subtitle::before{
    position: absolute;
    content: url("../../images/base-elements/cta-arrow_dk.svg");
    margin-left:-2rem;
    width: 1.25rem;
    height: auto;
    cursor: pointer;
    transition: margin-left 1s
}


.summary {
    margin-bottom: 3rem!important
}

.banner {
    border: 1px #aaaaaa solid;
    margin-bottom: 3rem;
}

.launchbutton{
    border: 4px #222c30 solid;
    padding: 1rem;
    width:100%;
    text-align: center
}
.launchbuton > h4{
margin-bottom: 0!important        
}

.comingsoonbug {
    position:absolute;
    z-index: 9999;
    top: 0;
    margin-top: -20px;
    width:12rem;
    right:0
}
@media screen and (min-width:992px){
.comingsoonbug {
    position:absolute;
    right:auto;
    margin-right: -250px;
}
}

.projectsummary {
    width:100%;
    padding:3rem;
    background-color:#fff
    /*background-image: url("../images/project1/mountain.jpg");
    background-size: cover;
    background-position: center*/
}
.summary {
    width:100%;
    padding:3rem;
    padding-bottom:0px;
    background-color:#dfe8ed
    /*background-image: url("../images/project1/mountain.jpg");
    background-size: cover;
    background-position: center*/
}

#carousel-project-1-1 {
    
}
.carousel-inner>.carousel-item {
    transition: -webkit-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out !important;
}
@media screen and (min-width:768px){
.scrollme, .notdisplaying {
    position:absolute;
    right:0;
    margin-right: -3rem;
    }
    .scrollme{
    position:absolute;
    right:0;
    margin-right: -3rem;
        margin-top:-3rem;
    width:13rem;
    }
    .notdisplaying{
        top:0;
        margin-top:2rem;
        cursor: pointer;
        width:9rem
    }
}
.breadcrumbs{
    padding:3rem;
    margin-right:2rem;
}