/* body */
.no-scrollbar {
        -ms-overflow-style: none; /* ie 11 */
        scrollbar-width: none; /* firefox */
}
.no-scrollbar::-webkit-scrollbar {
        display: none; /* webkit */
}

/* logo */
#logo svg {
        width: 213px;
}

@media (min-width:450px) {
        #logo svg {
                width: 279px;
        }
}

/* primary nav */
@media (min-width:800px) {
        header nav a:not(:last-child) {
                margin-right:25px !important;
        }
}

@media (min-width:1280px) {
        header nav a:not(:last-child) {
                margin-right:125px !important;
        }
}

.hamburger-box {
        transform: scale(0.7);   
}

/* secondary nav */
#sub-nav-wrapper {
        display:none;        
}
@media (min-width:800px) {
        #sub-nav-wrapper {
                display:block;        
        }      
}

/*remove last border from secondary nav */
#sub-nav a:last-child {
        border-right-width:0px;
}

/* footer */
@media (max-width:450px) {
        footer * {
                font-size: 15px !important;
        }   
}

footer a:first-child {
        padding-left: 0px;
}

footer a:last-child {
        padding-right: 0px;
}
        
.membership, .job-position { 
        margin-bottom: 9px !important;
}
 .job-profession {
        margin-bottom: 0px !important;
}

.logo-white path {
        fill: #FFFFFF;
}

.plus-sign {
        position: relative;
        width:19px;        
        height:19px;
        background-color: white;
        
}
.plus-sign::before {
        position: absolute;
        content: ' ';
        top: 8px;
        width: 19px;
        height: 3px;
        background-color: #000;
}
.plus-sign::after {
        position: absolute;
        content: ' ';
        top: 8px;
        width: 19px;
        height: 3px;
        background-color: #000;
        transform: rotate(90deg) scale(1);
        transition-duration: 400ms;
        transition-property: transform;
}
.active .plus-sign::after {
        transform: rotate(0deg) !important; /* scale(0,1) */
}

.overlay {
        overflow-x: hidden;
        overflow-y: scroll;
        position:fixed;
        top:0;
        right:0px;
        bottom:0;
        transition: 400ms ease-in-out;
        z-index:999;
}

.overlay-blend {
        overflow-x: hidden;
        overflow-y: scroll;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background-color: black;
        opacity:0.75;
        z-index:998;
}

.off-canvas {
        transform: translate(100%,0);
}

#close-button {
        position: absolute;
        top: 25px;
        right: 25px;
}

#job-overlay, #team-overlay {
        width: 100%;
}

@media (min-width:450px) {
        #job-overlay, #team-overlay  {
                width: 94%;
                max-width: 784px;
        }
}

@media (min-width:1280px) {
        #job-overlay, #team-overlay  {
                width: 860px;
                max-width: 860px;
        }
}

#project-overlay {
        width: 100%;
}

@media (min-width:450px) {
        #project-overlay  {
                width: 94%;
                max-width: 784px;
        }
}

@media (min-width:1280px) {
        #project-overlay  {
                width: 94%;
                max-width: 1280px;
        }
}


/* grid */
@media (min-width:800px) {
        .left-edge {
                margin-left: -25px;                
        }       
}

@media (min-width:800px) {
        .right-edge {
                margin-right: -25px;                
        }       
}

@media (max-width:1279px) {
        .expand-below-xl {
                width: 50% !important;
        }
        .margin-below-800 {
                width:100% !important;
        }
}
@media (max-width:799px) {
        .expand-below-xl {
                width: 83.33333333% !important;
                margin-left: auto;
                margin-right: auto;
        }
        .margin-below-800 {
                width: 83.33333333% !important;
                margin-left: auto;
                margin-right: auto;
        }
        .spacing19 {
                margin-top:18px !important;
                margin-bottom:18px !important;
        }
}
@media (max-width:599px) {
        .expand-below-xl {
                width: 100% !important;
        }
        .margin-below-800 {
                width: 100% !important;
        }
}
.banderole img {
        width:100%;
        height:auto;
        min-height:200px;
        max-height:500px;
        object-fit:cover;
}

.rotate-right-bottom {
        transform: rotate(-90deg) translate(100%, 0);
        transform-origin: right bottom;
}

#home #content {
        display:grid;
        grid-template-columns: auto;
        grid-template-rows: min-content 1fr min-content min-content; 
}
#home #content #logo {
        grid-area: 1 / 1;
}
#home #content #claim {
        grid-area: 2 / 1;
}
#home #content #legal {
        grid-area: 3 / 1;
}
#home #content nav {
        grid-area: 4 / 1;
}
#home #content nav a:first-child {
        padding-left: 12.5px !important;
}
@media (max-width:800px) {
        #home #content nav > div {
                display:flex;
                justify-content: space-between;
        }
}
#home {
        height:100%;
}
@media (max-width:450px) {  
        .menu1 {
              padding: 12.5px !important;  
        }     
}
@media (min-width:800px) {
        #home #content {
                display:grid;
                grid-template-columns: auto min-content;
                grid-template-rows: min-content 1fr min-content; 
        }
        #home #content #logo {
                grid-area: 1 / 1;
        }
        #home #content #claim {
                grid-area: 2 / 2;
        }
        #home #content #copyright {
                grid-area: 3 / 1;
        }
        #home #content nav {
                grid-area: 3 / 2;
        }
}


/*
* filter
*/

.grid-filter {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto; 
        grid-gap:1px;
}
.grid-filter-half {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto; 
        grid-gap:1px;
}

@media (min-width:800px) {
        .grid-filter  {
                grid-template-columns: 1fr 1fr;
        }
        .grid-filter-half  {
                grid-template-columns: 1fr 1fr;
        }
}
@media (min-width:1280px) {
        .grid-filter  {
                grid-template-columns: 1fr 1fr 1fr 1fr;
        }
}
.grid-filter button {
        display:block;
        width:100%;
}

.grid-filter-half button {
        display:block;
        width:100%;
}

.filter-border {
        box-shadow:0 0 0 1px black;
        background-color:white;        
}


/*
* contacts
*/
#grid-locations {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto; 
}
@media (min-width:1280px) {
        #grid-locations {
                grid-template-columns: 1fr 1fr;                
        }
}
.location-pic-container {
        height:510px;
        background-size:cover;
        background-position:center;
}
.grid-locations-info {
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
}
.grid-locations-label {
        display: flex;
        flex: row nowrap;
        align-items: center;
        justify-content: space-between;
}

/*
* jobs
*/
#grid-jobs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto; 
        gap: 90px 60px;
}

@media (max-width: 1280px) {
        #grid-jobs {
                grid-template-columns: 1fr 1fr;
        }       
}

@media (max-width: 600px) {
        #grid-jobs {
                grid-template-columns: 1fr;
        }       
}


/* 
/ news
*/
#grid-news img {
        width: 275px;
        margin-right:20px;
}
#grid-news .news-content-no-picture {
        max-width: 490px;
}
#grid-news .news-content {
        max-width: 420px;
}
#grid-news {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 420px;
        grid-template-rows: auto; 
        gap: 0px 20px;
}

#grid-news > div {
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
}
@media (min-width:800px) {
        #grid-news > div {
                flex-direction: row;
        }
}

@media (max-width:800px) {
        #grid-news {
                grid-template-columns: 0 0 0 0 0 100%;
                gap: 0px 0px;
                
                width: 83.33333333% !important;
                margin-left: auto;
                margin-right: auto;
        }
        
}
@media (max-width:600px) {
        #grid-news {
                width: 100% !important;
        }
}
@media (max-width:800px) {
        #grid-news .news-content {
                width: 420px;        
        }        
        #grid-news .news-content-no-picture {
                width: 420px;        
        }
}
@media (max-width:420px) {
        #grid-news .news-content {
                width: 100%;        
        }        
        #grid-news .news-content-no-picture {
                width: 100%;        
        }
}

/*
team
*/ 

@media (min-width:800px) {
        #grid-team a:hover img {
                opacity:0.9;
        }
        #grid-team a img {
                transition: opacity 0.2s ease 0s;
        }
}

#grid-team {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px;
}
#grid-team > * {
        width: 50%;
        padding: 8px;
}

@media (min-width:582px) {
        #grid-team {
                margin: 15px;
        }
        #grid-team > * {
                padding: 10px;
                width: 33.33%;
                max-width: 295px;
        }
}


/*
* projects
*/
/* transparanecy on hover for project images */
@media (min-width:800px) {
        #milestones a:hover img {
                opacity:0.9;
        }

        #milestones a img {
                transition: opacity 0.2s ease 0s;
        }

        #related-projects a:hover img {
                opacity:0.9;
        }
        #related-projects a img {
                transition: opacity 0.2s ease 0s;
        }
}

#milestones a img.construction, #milestones a img.completion {
        object-fit: cover;
}

#milestones a img.construction {
       /* filter: grayscale(0.5);    */    
}

#milestones a img.planning {
        object-fit: contain;
}

#grid-selected-projects {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto; 
        gap: 0px;
}

#milestones a img {
        height: 225px;
}

@media (min-width:391px) {
        #milestones a img {
                height: 247px;
        }
}
/*
@media (min-width:451px) {
        
        #milestones a img {
                height: 160px;
        }
}


*/

@media (min-width:600px) {
        #grid-selected-projects {
                grid-template-columns: 1fr 1fr;
        }
}
@media (min-width:600px) {
        #milestones a img {
                height: 204px;
        }
}  

@media (min-width:851px) {
        #milestones a img {
                height: 306px;
        }
}

@media (min-width:1171px) {

        #grid-selected-projects {
                grid-template-columns: 1fr 1fr 1fr;
        }

        #milestones a img {
                height: 264px;
        }
}

@media (min-width:1471px) {

        #milestones a img {
                height: 304px;
        }
}

@media (min-width:1771px) {

        #milestones a img {
                height: 384px;
        }
}

@media (min-width:2071px) {

        #milestones a img {
                height: 444px;
        }
}

#projectlist {
        /*display:table;*/
        display:grid;
        grid-template-columns: 110px minmax(0, 1fr);
        width:100%;
}
#projectlist > div {
        display:contents;
        transition: color,background-color 0.2s ease 0s;
}  
@media (min-width: 1280px) { 
        #projectlist > div.milestone:hover > div {
                color:white !important;
                background-color:black !important;
        }     
}

/*
#projectlist > div.milestone:hover .plus-sign::before, #projectlist > div.milestone:hover .plus-sign::after {
        background-color:white !important;
}
*/

/* border top of list image */
#projectlist .project-image {
        border-top: 1px solid #000000;
}
/* border top of info for tablet / mobile */
#projectlist .project-title {
        border-top: 1px solid #000000;
}
/* top of info columns (desktop) */
@media (min-width: 1280px) {
        #projectlist > div:not(:first-child) div:not(.toggle-info) {
                border-top: 1px solid #000000;
        }
}
/*
/ list 
*/
#projectlist {
        border-bottom: 1px solid #000000;
}

#projectlist img {
        width: 110px;
        height: 120px;
        object-fit: cover;        
}

#projectlist .project-info {
        grid-column: 1 / 3;       
}  


@media (min-width: 1280px) {
        #projectlist .project-info {
                grid-column: auto / auto;       
        }        
        #projectlist .project-text {
                display:contents;        
        }
}

#projectlist .hide-tablet {
        display:none;    
} 

#projectlist .hide-desktop {
        display:block;                          
}          

@media (min-width: 500px) {
        #projectlist {
                grid-template-columns: 150px minmax(0, 1fr);        
        }
        
        #projectlist img {
                width: 150px;
        }
}


@media (min-width: 1280px) {
                                                
        #projectlist {
                grid-template-columns: 200px minmax(0, 27fr) minmax(0, 24fr) minmax(0, 31fr) minmax(0, 30fr) minmax(0, 17fr);        
        }
        
        #projectlist img {
                width: 200px;
        }
        
        #projectlist .hide-tablet {
                display: block;  
        }
        #projectlist .hide-desktop {
                display: none;
        }
        
        .info {
                display: block !important;          
        }
}
@media (min-width: 1480px) {
        
        #projectlist {
                grid-template-columns: 227px minmax(0, 27fr) minmax(0, 24fr) minmax(0, 31fr) minmax(0, 30fr) minmax(0, 17fr);        
        }
        
        #projectlist img {
                width: 227px;
        }
}
        
@media (min-width: 1280px) {   
        #projectlist .milestone:hover * {
                color: white  !important;
                background-color: black !important;
        }
}


/* masonry */
#grid-project-pics .grid-item {
        padding: 10px;       
        width: 100%;
}

@media (min-width:450px) {
        #grid-project-pics .grid-item {
                width: 50%;
        }
}

#grid-project-pics {
        margin: 10px -10px;
}

#phases-pictures img.fit-cover {
        height: 264px;
        object-fit: cover;
}
#phases-pictures img.fit-contain {
        height: 264px;
        object-fit: contain;
}
@media (max-width: 800px) {
        #tools #phases {
                display:none !important;
        }
}