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

* * INSTRUCTIONS * * Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file. * The font file(s) should be placed relative to the regular CSS file. * */
/* Complete */
html {
  scroll-behavior: smooth;
}
h1 { margin:0}

@font-face {
    font-family: "Unica77LLWeb-Regular";
    src: url("Unica77LLWeb-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Unica77LLWeb-Regular";
    src: url("Unica77LLWeb-Regular.woff") format("woff");
}

/* subset */

@font-face {
    font-family: "Unica77LLSub-RegularSubset";
    src: url("Unica77LLSub-RegularSubset.woff2") format("woff2");
}

@font-face {
    font-family: "Unica77LLSub-RegularSubset";
    src: url("Unica77LLSub-RegularSubset.woff") format("woff");
}

div.cookieinfo-close {
    float: right;
    display: block;
    padding: 5px 8px;
    min-width: 100px;
    margin-left: 5px;
    border-radius: 0;
    cursor: pointer;
    color: #fff;
    background: #000;
    text-align: center;
}

video {
    display: block;
    background: black;
    width: 100%;
    height: auto;
    margin: auto;
}

body {
    background-color: #000;
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    font-variant-ligatures: none;
    /* Ligature reset */
    font-family: "Unica77LLWeb-Regular", sans-serif;
}

.fa-2x {
    font-size: 1.3em !important;
    vertical-align: middle !important;
    padding-bottom: 2px;
}

.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

#myhead {
    width: 100%;
}

#mycontent {
    width: 100%;
    background-color: #000;
}

.navbar {
    overflow: hidden;
    position: fixed;
    top: 25px;
    width: 100%;
    z-index: 10;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: inherit;
    padding: 0;
    margin: 0;
}

a,
a:active,
a:link,
a:visited,
a:hover {
    color: #000;
    background-color: #fff;
    outline: none;
    outline: 0;
    text-decoration: none;
}

#logotype {
    position: absolute;
    padding: 5px 0 0 80px;
    width: auto;
    line-height: 20px;
}

#logotype h1 { font-size:inherit; line-height:inherit}
#logotype a {
    color: #000;
    cursor: pointer;
}

#myhead a {
    display: inline-block;
    width: 100%;
    text-transform: capitalize;
}

div#news-list,
div#info-list {
    padding: 5px 5px 0 5px;
    margin: 0;
    max-width: 50%;
}

div#news-list p,
div#info-list p {
    margin-bottom: 5px;
}

p#project-list {
    margin: 5px 0;
}

p#project-list a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #000;
}

.mynav {
    width: 100%;
    background-color: #fff;
    color: #fff;
    height: 67px;
    top: 25px;
}

div #project_id {
    float: left;
    padding: 0 5px 15px 5px;
    font-variant-numeric: tabular-nums;
}

div#project_desc {
    padding: 0 0 5px 5px;
    width: 70%;
}

div#project_credit {
    padding: 0 0 0 5px;
    margin-top: -15px;
}

#project_images p {
    margin: 0;
}

#project_images {
    /*max-width: 70%;*/
    width: calc(66.66666% - 3px);
    margin: 3px 0;
}

#project_images img {
    padding: 0 0 20px 0;
    max-width: 100%;
}

#project_images video {
    padding: 0 0 20px 0;
    max-width: 100%;
}

div#news_desc {
    padding: 5px 0 0 5px;
    width: 70%;
}

#news_images p {
    margin: 0;
    padding: 0 0 10px 0;
}

#news_images {
    width: calc(66.66666% + 12px);
    margin: 0;
}

#news_images img {
    padding: 0;
    max-width: 100%;
}

#info_images p {
    margin: 0;
    padding: 0 0 10px 0;
}

#info_images {
    width: calc(66.66666% - 6px);
    margin: 0;
}

#info_images img {
    padding: 0;
    max-width: 100%;
}

#myhead div.col a,
#myhead div.midcol a {
    padding-left: 5px;
    padding-bottom: 2px;
    /*	space below the main links */
}

.col {
    background-color: #fff;
    color: #000;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
    margin-top: -2px;
}

.midcol {
    background-color: #fff;
    color: #000;
    margin: 0 20px 0 20px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
    margin-top: -2px;
}

.spacer01 {
    background-color: #000;
    color: #000;
    -ms-flex-preferred-size: 0 flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 20px;
    padding: 0
}

.spacer02 {
    background-color: #000;
    color: #000;
    -ms-flex-preferred-size: 0;
    margin: 0 20px 0 20px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 20px;
    padding: 0
}

.spacer03 {
    background-color: #000;
    color: #000;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 20px;
    padding: 0
}

.main {
    margin: 0;
    padding: 0;
    position: relative;
    top: 130px;
    left: auto;
    z-index: 0;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    animation: slideOnLoad 0.5s 1;
    -webkit-animation: slideOnLoad 0.5s 1;
}

@keyframes slideOnLoad {
    0% {
        top: 0;
    }
    /* 0.1% {top:47px;} */
    100% {
        top: 130px;
    }
}

@-webkit-keyframes slideOnLoad {
    0% {
        top: 0px;
    }
    /* 0.1% {top:47px;} */
    /* 0.1% {top:87px;}	*/
    100% {
        top: 130px;
    }
}

#top-spacer {
    position: fixed;
    width: 100%;
    background-color: #000;
    height: 25px;
    z-index: 10;
    text-align: right;
}

#top-spacer-home {
    width: 100%;
    background-color: transparent;
    height: 25px;
    text-align: right;
}

.selected {
    background-color: #fff;
    color: #000;
    -ms-flex-preferred-size: 0;
    border: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
}

.withslider {
    background-color: transparent;
    color: #000;
    -ms-flex-preferred-size: 0;
    margin: 0 20px 0 20px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 20px;
    padding: 0
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}

input::-moz-focus-inner {
    border: 0;
}

.dropdown-toggle::after {
    display: none !important;
}

hr {
    width: 100%;
    height: 15px;
    border: none;
    color: #000;
    background-color: #000;
    margin: 5px 0;
    padding: 0;
}

div#error-list {
    padding: 5px 5px 0 5px;
    margin: 0;
    width: 100%;
    height: auto;
}

div#error-list h1 {
    font-size: 100px;
    line-height: 120px;
    font-weight: bold;
    margin: 0
}

#socials {
    position: absolute;
    width: auto;
    line-height: 20px;
    right: 80px;
    top: 5px;
}

#socials.fa {
    color: #000;
}

#socials a {
    font-weight: 200;
    color: #000;
    width: auto;
    background-color: #fff;
    font-size: 23px;
}

/*#socials a, a:visited, a:hover, a:active { color:#000; width:auto; background-color: #fff;} */

.prevbutt {
    width: 75px;
    height: 100%;
    max-height: 100%;
    background-color: transparent;
}

.nextbutt {
    width: 75px;
    height: 100%;
    max-height: 100%;
    background-color: transparent;
}

.fixleftarrow {
    position: fixed;
    top: 50%;
}

.fixrightarrow {
    position: fixed;
    top: 50%;
}

.fixrightarrow a:active,
a:link,
a:visited,
a:hover {
    background-color: transparent;
}

.fixleftarrow a:active,
a:link,
a:visited,
a:hover {
    background-color: transparent;
}

#rowwithhover:hover>* {
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

/*#rowwithhover a:hover {color:#fff;}*/

.prjcol {
    background-color: #fff;
    color: #000;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
}

.prjlastcol {
    background-color: #fff;
    color: #000;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
}

.prjmidcol {
    background-color: #fff;
    color: #000;
    padding: 0 22px 0 27px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

@media all and (max-width: 1000px) and (min-width: 300px) {
    .prjmidcol,
    .prjlastcol {
        display: none;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
}

.footer {
    position: absolute;
    bottom: 0;
    width: auto;
    font-size: 11px;
    margin-left: 5px;
    z-index: 10;
    text-align: left;
}

.fadein {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    mix-blend-mode: difference;
    z-index: 10000;
    display: none;
}

.lazyload,
.lazyloading {
    opacity: 0
}

.lazyloaded {
    opacity: 1;
    transition: opacity 500ms
}

.fadein div {
    position: relative;
    text-align: center;
    height: 100%;
    display: grid;
    width: 60vw;
    vertical-align: middle;
    margin: auto;
    animation: slideshow 16s infinite;
}

svg {
    margin: auto;
    fill: green;
}

@keyframes slideshow {
    0% {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    25% {
        opacity: 1;
        -webkit-transform: rotate3d(0, 0, 1, 6deg);
        transform: rotate3d(0, 0, 1, 6deg);
    }
    50% {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
 .prjmidcol , .prjcol, .prjlastcol {
    background-color: #000;
    color: #fff;    
}
.featuredimage { padding-left:46px; padding-top:2px; }
.fixedmenu { position:fixed ; top:128px; width: calc(100% - 150px) ; height:30px; background-color:#fff; z-index:200}
.enddevider { background-color:#000; height:150px; width:100%}