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

* 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 */

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

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

/* subset */

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

@font-face {
    font-family: "Unica77LLSub-RegularSubset";
    src: url("../../css/Unica77LLSub-RegularSubset.woff") format("woff");
}
html {
  scroll-behavior: smooth;
}

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

#maximage {
    max-width: 100%;
    margin: 75px 0;
}

#maximage img {
    padding: 0 0 15px 0;
    max-width: 100%;
}

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

.btn-primary,
.btn-primary.focus,
.btn-primary:focus {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
    border-radius: 0;
    font-size: inherit;
    margin: -10px 0 0 20px;
    width: 75px;
    text-align: left;
    height: 25px;
    line-height: 0;
    padding-left: 4px;
    font-weight: normal;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
    border-radius: 0;
    font-weight: normal;
}

.btn-primary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
    border-radius: 0;
    font-weight: normal;
}

.btn-primary:.active:focus,
.btn-primary::active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
    outline: none !important;
    background-color: #fff;
    border-color: #fff;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    width: calc(100vw - 40px);
    padding: 5px 0;
    margin: 0;
    font-size: inherit;
    color: #000;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 0;
    margin: 0 0 0 20px;
    height: calc(100vh - 110px);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0 0 0 2px;
    clear: both;
    font-weight: inherit;
    color: #000;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-transform: capitalize;
    font-size: 9vh;
    line-height: 9vh;
}

.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-pages {
    width: 100%;
    background-color: #000;
}

#myhead-home {
    width: 100%;
}

#myhead-home a,
#myhead-pages a {
    display: block;
    width: 100%;
}

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

.navbar {
    overflow: visible;
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 50;
    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;
    text-decoration: none;
    background-color: #fff;
    outline: none;
    outline: 0;
}

#logotype {
    padding: 5px 0 0 25px;
    width: auto;
}

#logotype a {
    color: #000;
    cursor: pointer;
    font-weight: inherit;
}

div#news-list,
div#info-list {
    padding: 0 5px 2px 5px;
    margin: 2px 0;
}

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

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: 55px;
    top: 25px;
}

div#news_desc {
    padding: 5px;
	color:#000;
}

#news_desc  a, #news_desc a:active,#news_desc a:link,#news_desc a:visited, #news_desc a:hover {
    color: #000;
}

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

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

#news_images {
    max-width: 100%;
    margin: 0;
	background-color: #fff;
}
.withmargin {border-bottom: solid #000 87px;}
#news_images img {
    padding: 0;
    margin: 0;
    width: 100%;
}

div #project_id {
    float: left;
    padding: 0 7px 10px 5px;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
	color:#000;
}

div#project_desc {
    padding: 0 5px 5px 5px;
	color:#000;
}

.project_images_thumb { padding-left:42px}

#project_images p {
    margin: 0;
    padding: 0;
    line-height: inherit;
    font-weight: inherit;
}

#project_images {
    max-width: 100%;
    margin: 0;
    padding-top: 5px;
}

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

#myhead div.col a,
#myhead div.midcol a {
    padding-left: 5px;
}

.col {
    background-color: #000;
    color: #fff;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding: 0;
    margin-top: 0;
}
.col  a, .col a:active,.col a:link,.col a:visited, .col a:hover {
    color: #fff;
    text-decoration: none;
    outline: none;
    outline: 0;
}

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

video {
    max-width: 100%;
}

.projecthr { height:0px; width: 100%; border: 1px solid #fff; padding:0 ; margin:0}
.main {
    margin: 0 0 0 20px;
    padding: 0;
    position: relative;
    top: 90px;
    z-index: 0;
    width: calc(100vw - 40px);
}

.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;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

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

#top-spacer-home {
    width: 100%;
    background-color: transparent;
}

#mainrow {
    padding: 3px 0 0 0;
    line-height: 22px;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
}

.tab-numerals {
    font-variant-numeric: tabular-nums;
	float: left;
    padding: 0 5px 0 5px;
}

.tab-texts {
    position: relative;
	padding-left:40px;
	width: 95%;
    font-variant-numeric: normal;}

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

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

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

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

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

.nextprev {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
    margin: 0;
    z-index: 10;
    background-color: #FFF;
}

.fixleftarrow {
    left: 0;
}

.fixrightarrow {
    position: absolute;
    right: 0;
}

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

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

.lazyload,
.lazyloading {
    opacity: 0
}

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

.fadein {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 0;
    overflow: hidden;
    mix-blend-mode: difference;
    display: none;
}

.fadein>div {
    position: relative;
    animation: slideshow 16s infinite;
    margin: auto;
    width: 95vw;
    height: 100%;
    display: grid;
    vertical-align: middle;
    padding-top: 3%;
}

@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);
    }
}

svg {
    margin: auto;
    fill: green;
    transform: rotate(90deg);
}

@media (orientation: landscape) {
    .fadein>div {
        position: relative;
        animation: slideshow 15s infinite;
        margin: auto;
        width: 55vw;
        height: 100%;
        display: grid;
        vertical-align: middle;
    }
    svg {
        transform: rotate(0deg);
    }
}

.prjcol { width: 100%; line-height:17px; padding: 3px 0 0 0}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.5;
}
.fa-2x {
    font-size: 1.4em !important;
}