#pageloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#pageloader.hidden {
  opacity: 0;
  visibility: hidden;
}
a, a:hover, a:focus, a:active {outline:0}
.t4-col.maincontent {width: calc(100vw - 84px);padding: 0; min-height: 100vh;}
.t4-col.sidebar {
    max-width: 84px; 
    height: 100vh; 
    padding: 0; 
    text-align: center; 
    position: sticky;
    top: 0; 
    z-index: 10;
    display: flex;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column!important;
    flex-direction: column !important;    
}
.vertical-logo {background: var(--color-primary); padding-top: 48px; padding-bottom: 48px;}
.btn.t4-offcanvas-toggle {
    margin-bottom: auto !important;
    background: #000;
    border: 0;
    border-radius: 0;
    height: 84px;
    color: #fff;
    align-content: center;
}
.c-offcanvas-bg.is-animating, .c-offcanvas-bg.is-open,
.t4-offcanvas {
	background-color: var(--color-primary);
}
.c-offcanvas--right {
    transform: translate3d(100vw, 0, 0);
    width: 100vw;
}
.social-list li {padding: 0; margin-right: 1rem;}
.social-list li a {background-color: transparent;border-radius: 0;opacity: 1; width:auto; height: var(--t4-font-size); line-height: 1;}
.social-list li a:hover, .social-list li a:focus, .social-list li a:active {background-color: transparent; color: var(--color-primary);}
.social-list li a i, .social-list li a span { font-size: var(--t4-font-size);}
.contact #contact-form .controls {margin-left: 0;}
.contact-form {
    background: var(--color-primary);
    color: #fff;
}
.contact-details,
.com-contact__form.contact-form {
    padding-left: 7rem;
    padding-right: 7rem;
}
.com-contact.contact {min-height: 100vh;}
.form-control{
    border-radius: 0;
}
.contact .control-group.field-spacer, .contact span.star {display: none;}
input.invalid, textarea.invalid {border: 0; background: #fff7b0; }
.btn.btn-primary {
    background-color: #000000;
    border-color: #000000;
    border-radius: 0;
    padding: 1rem;
}
.com-content-category-blog__items.blog-items.masonry-2 .row {--t4-gutter-x: 0;display: flex !important;margin: 0;padding: 0;}
.blog .item {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog .figure.pull-.item-image {margin: 0; }
figure.pull-.item-image a img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.blog .item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    color: #fff;
    padding: 3rem;
    opacity: 0;
    display: flex;
    justify-content: space-between;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;

}
.blog .item:hover .item-content {
    opacity: 1;
    visibility: visible;
}
.blog .item-content .page-header h2 {
    margin: 0;
    padding: 0;
    color: #fff;font-weight: 400;text-transform: uppercase;width: min-content;
}
ul.fields-container { margin: 0; padding: 0; list-style-type: none; list-style: none;}
.about-page{min-height: 100VH;}
.about-page .imagecol {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
}
.about-page figure.item-image {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: end;
    justify-content: center;
}
.about-page .item-image img {
    max-width: -webkit-fill-available;
    height: 100vh;
    width: auto;
}
.aboutcol.col-sm-8.col-12 { padding: 6rem;}
.project-details{min-height: 100vh;}
.project-details .projectitle {margin-bottom: 40px; }
p.plabel { font-weight: 600;margin-bottom: 0;}
.titleinfo {width: -webkit-fill-available;}
.project-page li.field-entry.images img {width: 100%; }
.project-page li.field-entry.images p {margin: 0;}
.projectitle h2 { font-weight: 400; margin: 0; }
.pagination {margin: 0;}
.copyright  p.small {margin: 0;}
.pagenavigation .pagination {width: calc(100vw - 84px);}
.pagination a.btn.btn-sm.btn-secondary {
    background: #000;
    color: #fff;
    border-radius: 0;
    padding: 1rem 0.5rem;
}
.pagination a.btn.btn-sm.btn-secondary.previous,
.pagination a.btn.btn-sm.btn-secondary.next {width: 50%;}
.pagination span.icon-chevron-left, .pagination span.icon-chevron-right {display: none; }
div.mod-languages ul.lang-block li {
    text-align: center;
    padding: 0 0 20px;
    display: block;
    margin: 0;
}
div.mod-languages a {padding: 20px .5rem;}
button.close.js-offcanvas-close.c-button {
    outline: 0;
    background: #000;
    border: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
}
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link, .t4-offcanvas .t4-off-canvas-body .navbar .separator,
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active>.nav-link, .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active>.separator,
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover, .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus, .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:active, .t4-offcanvas .t4-off-canvas-body .navbar .separator:hover, .t4-offcanvas .t4-off-canvas-body .navbar .separator:focus, .t4-offcanvas .t4-off-canvas-body .navbar .separator:active
 {color: #ffffff;font-size: 30px;line-height: 1.1; font-weight: 400;}
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item {border-bottom: 0;}

@media (min-width:577px){
    .t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav { display: -webkit-box; }
    div#off-canvas-right {padding: 2rem 3rem;}
}

@media (max-width:576px){
    .contact-details { padding-left: 2rem; padding-right: 2rem; }
    .com-contact__form.contact-form {padding:2rem}
    .aboutcol.col-sm-8.col-12 { padding: 1.5rem;}
    .about-page .imagecol { height: 60vh;}
    .about-page figure.item-image { height: 60vh; min-height: 60vh;}
    .about-page .item-image img {height: 100%;width: 100%;}
    .t4-col.sidebar {max-width: 60px;}
    .t4-col.maincontent {width: calc(100vw - 60px);}
    .btn.t4-offcanvas-toggle {height: 60px;}
    .btn.t4-offcanvas-toggle img {width: 35px;}
    .project-page .p-5 {padding: 2rem !important; }
    .contact-details {MARGIN-BOTTOM: 50px; margin-top: 50px; }
    .blog .item-content {padding: 14px;}
    .blog .item-content .page-header h2{font-size: 1rem;}
}