/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/
    body {
   
    }
    /* Default link styling */
    a:link { color:#f8f9fa; }
    a:visited { color:#f8f9fa; }
    a:hover, a:focus { color:#f8f9fa; }
    a:active { color:#f8f9fa; }
    

    
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
    body {
        height:100vh !Important;
        max-height:100vh !Important;
        overflow: hidden;
    }


    
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */ 
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
    
    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure { 
        margin-bottom:1em; 
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}

h1 {
        font-family: 'Heebo', sans-serif;
    font-weight:bold;
}

h2 {
         font-family: 'Heebo', sans-serif;
}

p {
         font-family: 'Heebo', sans-serif;
    font-size: 12pt;
    font-weight:300;
}


.preload::after {
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(../imgnew/photography.jpg) url(../imgnew/interiors.jpg) url(../imgnew/cgi.jpg) url(../imgnew/design.jpg);
}

footer {
    color:#f8f9fa;
}

.first-page-item {
    margin-top:150px;
}

.top-gap {
    margin-top:60px;
}

.bacgkround-pic {
    padding-bottom:60px;
    padding-top:20px;
}

.web-background {
 
    background-size:cover;
    position:auto auto;
}
.noscript-el p {
      font-family: 'Heebo', sans-serif;
     color:#f8f9fa;
     font-weight:normal;
     font-size:10pt;
     line-height:15pt;
     position:absolute;
     top:50%;
     left:50%;
     transform: translate(-50%, -50%);
}

.noscript-el a {
    transition:all 0.3s;
}

.noscript-el a:hover {
    color:rgba(255,255,255,0.4);
}

.noscript-el {
    display:block; 
    position:fixed; 
    top:0 !important;
    left:0 !important;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.8);
    text-align:center;
    z-index:99;
}

.background{
    background: white; 
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 100%;
    background-size: cover; 
    z-index:-1;
        
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
        
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
 }

 .background-image {
      /* Set rules to fill background */
    min-height: 100%;
    min-width: 100%;
    background-size: cover; 
    background-image: url(../assets/picture4.jpg);
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
        
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
 }


 .company_logo {
    background: url("../assets/brand-logo-white.png") no-repeat;
    background-size:100% auto;
    width:300px;
    height:200px; 

    position: absolute;
    top: 18%;
     left:0%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
     z-index:9999; 
     opacity:1;
     transition: all 0.3s ease;
   
 }


.company_logo_color {
    background: url("../assets/brand-logo.png") no-repeat;
    background-size:100% auto;
    width:304px;
    height:204px; 

    position: absolute;
    top: 18%;
     left:0%;       
    margin-left: 50%;
    transform: translate(-50%, -50%);
     z-index:9999; 
    opacity:0;
     transition: all 0.3s ease;
   
 }

.secondary_page_menu {
     position:fixed;
    top:0px;
    background:#212630;
    padding-bottom:10px;
    padding-top:10px;
     z-index:999;
 }


 .menu {
     width:100%;  
     text-align: center;
     margin-top:0px;
     height:100vh;
     display:block;
     margin-left:auto;
     margin-right:auto;
     padding-left:12px;
     padding-right:12px;
     position:absolute;
     top:48px;
 }

 /* ---------------------------------------------------------
Changed the original width when three items in the landing page menu
.linkmenu {
    display: inline-block;
     width:26%;
     height:100%;
    max-height:100vh;
     background:rgba(0,0,0, 0.1);
     padding:0 !important;
     margin:0 !important;  
     font-family: 'Heebo', sans-serif;
     color:white;
     font-weight: bold; 
     transition: all 0.3s;  
     font-size:18pt;
    position:relative;
    top:-48px;

}
   ---------------------------------------------------------*/
.linkmenu {
    display: inline-block;
     width:40%;
     height:100%;
    max-height:100vh;
     background:rgba(0,0,0, 0.1);
     padding:0 !important;
     margin:0 !important;  
     font-family: 'Heebo', sans-serif;
     color:white;
     font-weight: bold; 
     transition: all 0.3s;  
     font-size:18pt;
    position:relative;
    top:-48px;

}
 


.linkmenu:hover {
    background:rgba(13,112,134, 1);
    text-decoration: underline;
}

.linkmenu:hover span {
     text-decoration: underline;
}



li {
    padding:0 !important;
    margin:0 !important;
}
  

 .menu a {
    font-family: 'Heebo', sans-serif;
    text-decoration:none;
     

     
 }

 .menu a:hover {
    cursor:pointer;
    
   
 }

 .menu li:hover {
    text-decoration: underline;


 }

/*
.carousel-control-next {
    cursor: url("../assets/right-arrow.png"), pointer;
}

.carousel-control-prev {
    cursor: url("../assets/left-arrow.png"), pointer;
}

.carousel-control-next-icon {
    cursor: url("../assets/right-arrow.png"), pointer;
}

.carousel-control-prev-icon {
    cursor: url("../assets/left-arrow.png"), pointer;
}
*/

.carousel-control-prev-icon, .carousel-control-next-icon {
    background:black;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0, 0);
}

.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    background-color: rgba(0,0,0, 0.1)!important;
}

#about-icon, #contact-icon, #location-icon {
    opacity:0;
    transition: all 0.3s ease;
    position:relative;
    display:block;
    top:40px;
    transition: all 0.3s ease;
}

.front-menu-text{
    position:relative;
    top:78vh;
    

}

.front-menu-text img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:20px;
}

.white-overlay {
    height:100%;
    width:100%;
    background:white;
    position:absolute;
    display:block;
    top:0;
    z-index:-3;
    background:rgba(0,0,0, 0); 
    transition: all 0.3s ease;
}



 /* Interiors */
 .case-tile {
     width:100%;
     height:400px;
     background-image: url('../imgnew/interiors.jpg');
     background-size: cover; 
     padding:0px !important;
     text-align: center;
     background-position:50% 50%;

 }

 .case-tile-overlay {
     width: 100%;
     height:100%;
     background: rgba(0,0,0,0.6);
     opacity: 0;
     transition: opacity 0.3s;
 }

 .case-tile:hover .case-tile-overlay {
    opacity: 1;
 }

 .case-tile-overlay h5 {
    font-size: 1.2rem;
    padding-top:100px;
 }

 .case-tile-overlay h2 {
     font-size:32pt;
     
 }

 .case-tile p {
     padding-left:20px !important;
     padding-right:20px !important; 
 }

 .case-tile a {
    padding:20px;
    font-family: 'Heebo', sans-serif;
    text-transform:uppercase;
    color:#f8f9fa;
    padding-left:20px;
    padding-right:20px;
    border-bottom: 0px solid #f8f9fa; 
    transition: all 0.3s;  
    font-size:8pt
 }

 .case-tile a:hover {
    border-bottom: 1px solid #f8f9fa; 
    text-decoration:none;
    color:#f8f9fa;
    padding-left:40px;
     padding-right:40px;
     cursor:pointer;
     margin-bottom:-1px;
 }

 .single-tile {
     height:400px;
     background-position:0% 20%;
 }

.single-tile-web {
     height:400px;
     background-position:0% 50%;
 }

.cgi-tile {
    max-width:100%;
    height:600px !important;
    padding:0!important;
}

.cgi-tile p {
    padding-left:5%;
    padding-right: 5%;
}

.cgi-tile h5 {
    
    font-size: 1.2rem;
padding-top: 140px;
}

.cgi-tile h2 {
    padding-left:5%;
    padding-right: 5%;
    font-size: 32pt;
}

a.portfolio-link {
    color:#d6a340;
}
a.portfolio-link:hover {
    color:#d6a340;
}

.input-field {
    background: #212630;
    border:none;
    color:#f8f9fa;
    border-bottom: 1px solid #f8f9fa;
    width:100%;
}

input {
    min-width:100% !important;
}

.textarea-field {
    width:100%;
    height:80px;
}

.form {
    margin-top:20px;
}

label {
    display:block !important;
}



.next-project-btn {

margin-top: 20px;
background: none;
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
color: #f8f9fa;
border: none;
font-size: 8pt;
cursor: pointer;

}

a.next-project-btn {
    margin-bottom:20px;
}

.next-project-btn:hover {
    color: #f8f9fa;
    text-decoration:none;
    cursor: pointer;

}

.next-project-container {
    text-align:center;
     transition: width 0.2s;
    margin-bottom: 1px;
    border-bottom: 0px solid #f8f9fa;
    margin-left:auto;
    margin-right:auto;
    display:block;
    width:180px;
    cursor: pointer;
    padding-bottom:20px;
 
   
  
}

.next-project-container:hover {
    margin-bottom: 0px;
    border-bottom: 1px solid #f8f9fa;
    width:200px;
    cursor: pointer;
}

.item {
     display:block;
   height: 100%; 
/* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
}

.gallery_container {
    width:80%;
    height:53.33%;
    
}

.gallery_container img {
    width:100%;
}

.lSSlideOuter {
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

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

.footer-links a {
    padding: 20px;
font-family: 'Heebo', sans-serif;
text-transform: uppercase;
color: #f8f9fa;
padding-left: 20px;
padding-right: 20px;
border-bottom: 0px solid #f8f9fa;
transition: all 0.3s;
font-size: 8pt;
    
}

 .footer-links a:hover {
    border-bottom: 1px solid #f8f9fa; 
    text-decoration:none;
    color:#f8f9fa;
    padding-left:40px;
     padding-right:40px;
     cursor:pointer;
     margin-bottom:-1px;
 }

.company-info {
    font-size:8pt;
    margin-top:30px;
}

.footer-contact-link {
    color:#d6a340 !Important;
    
}

.contact-address {
    padding-left: 80px ;
    

     }


.right-arrow-front-page, .left-arrow-front-page {
    position:fixed;
    top:-48px; 
    width:11%;
}

.right-arrow-front-page img, .left-arrow-front-page img {
    position:fixed;
    height:42px;   
}

.right-arrow-front-page,  {
    right:0px;
}

.left-arrow-front-page, {
    left:0px;
}

.right-arrow-front-page img {
    right:20px
}

.left-arrow-front-page img{
    left:20px;  
}





 @media only screen and (max-width: 992px) {
       .footer-logo {
         max-width:30%;
         margin-bottom:60px;
         display:block;
         margin-left:auto;
         margin-right:auto;
     }
     
     .contact-address {
         text-align:center;
         padding-left: 0px ;
     }
     
     
   

}


 @media only screen and (max-width: 768px) {
    .preload::after {
        position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
        content:url(../imgnew/photography-mobile.jpg) url(../imgnew/interiors-mobile.jpg) url(../imgnew/cgi-mobile.jpg) url(../imgnew/design-mobile.jpg);
    }

    .menu {
        position:fixed;
        width:100%;
        margin-left:50%;
        transform: translateX(-50%);   
        margin-right:0;
        padding:0;
        text-align: center;
    }

    .secondary_page_menu {
        position:fixed;
       top:0px;
       background:#212630;
       padding-bottom:10px;
       padding-top:10px;
       transition: all 0.3s;
    }

    
    .menu li {
        display: block;
        padding:0px !important;
        font-family: 'Heebo', sans-serif;
        text-transform:uppercase;
        color:#f8f9fa;
        border-bottom: 1px solid #f8f9fa; 
        transition: all 0.3s;  
        margin-left:120px;
        margin-right:120px;
        margin-top:40px;
        font-size:8pt
    }
   
    .menu li:hover {
       border-bottom: 1px solid #f8f9fa; 
        margin-left:80px;
        margin-right:80px;
        cursor:pointer;
    }
    
     .menu a:hover {
        cursor:pointer;
        text-decoration:none;
     }

     .mobile-nav {
         top:-40px;
         height:100px;
         overflow: hidden;
         z-index: 99999;
     }

     .mobile-nav-expanded {
        top:-20px;
        height:520px;
        overflow: hidden;
    }
     
         .footer-logo {
         max-width:51%;
         margin-bottom:60px;
         display:block;
         margin-left:auto;
         margin-right:auto;
     }

     .submit_btn {
         height:60px;
     }
     
     .contact-address {
         text-align:center;
         padding-left: 0px ;
     }
     
   
}

@media screen and (max-width: 768px) {   
    
    .menu {
        
    }
    
.linkmenu {
    
        font-size:12pt;

    }
    
    
    
.right-arrow-front-page img, .left-arrow-front-page img {
    height:24px;   
}

    
    .right-arrow-front-page {

    width:9.2%;
}

.left-arrow-front-page {

     width:9.2%;
}
    
    
    .right-arrow-front-page img {
    right:10px
}

.left-arrow-front-page img{
    left:10px;  
}
    
    
    .front-menu-text {
        top:70vh;
    }
    }



 @media only screen and (max-width: 450px) {
      .case-tile-overlay h5 {
    font-size: 1.2rem;
    padding-top:60px;
 }
     
     .footer-logo {
         max-width:70%;
         margin-bottom:60px;
         display:block;
         margin-left:auto;
         margin-right:auto;
     }
}


@media screen and (max-width: 400px) {   
    
    .menu {
        
    }
    
.linkmenu {
    
        font-size:8pt;

    }
    
.right-arrow-front-page img {
    right:2px
}

.left-arrow-front-page img{
    left:2px;  
}
    
    
    }