@import url("https://use.typekit.net/oef3dcr.css");
:root { text-underline-position: under; }
html,body{
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #333333;
	line-height: 30px;
    animation: fadein 0.5s;
    /* overflow-x:hidden; */
    
}
p{
    line-height: 27px;
    font-size: 18px;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    color: #333333;
    text-align: justify;
}
blockquote{
    font-family: proxima-nova,sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 26px;
    color: #333333;
}
.normal2023{
    line-height: 27px;
    font-size: 18px;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    color: #333333;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.customNav{
    height: 100px;
    max-width: 1660px;
    /* margin: auto; */
}

.customSubNav{
    /* background-color: #ececec; */
	font-size: 14px; 
	font-style: normal; 
	font-variant: normal; 
	font-weight: 700; 
    line-height: 26px;
    margin-top:-2px;
}
.customSubNav a{
	    color: #8D8D8D;

}
a, a:link, a:visited, a:hover {
        color: #8D8D8D;
}

/* FRONT */
h1{
	font-family: proxima-nova,sans-serif;
    font-weight: 600;
    font-style: normal;
    color:black;
    font-size: 32px;
    margin-bottom: 30px;
}
h2{
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    color: black;
}
h3{
    font-family: din-2014, sans-serif;
    font-weight: 100;
    font-size:28px;
}
h4{
    font-family: din-2014, sans-serif;
    font-weight: 100;
    font-size:medium;
}
h5{
    font-family: din-2014, sans-serif;
    font-weight: 100;
    font-size:small;
}
h6{
    font-family: din-2014, sans-serif;
    font-weight: 100;
    font-size:x-small;
}
.pink{
	color: #F6007B;
}
.grey{
	color: #3D3D3F;
}
.greyBg{
    background-color: #3D3D3F;
    color: white;
}
footer{

    font-family: din-2014, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #F3F3F3;
}
footer a{
    color:#F3F3F3;
    text-decoration: none;
}
footer a:link{
    color:#F3F3F3 ;
    text-decoration: none;
}
footer a:hover{
    color:#F3F3F3;
}
footer a:active{
    color:#F3F3F3;
}
footer a:visited{
    color:#F3F3F3;
}
/*
footer div:not(:last-child) {
    border-right: 1px rgba(255,255,255, 0.3) solid;
}
*/
footer ul{
    list-style-type: none;
    padding: 0;
    padding-inline-start:0;
    -webkit-padding-start: 0;
    line-height: 23px;
}
.hoverNav{
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
}
.hoverNav:hover{
    color: #3D3D3F;  
}
a.hoverNavSmol{
    font-weight: 700;
    font-size: 0.9em;
    line-height: 26px!important;
    color: #CACACA;
    text-decoration: none;
}
.hoverNavSmol:hover{
    color:#707070;
}
.hoverNav:hover + div{
    display:block!important;
  }
.glod{
    color:#707070 !important;
}

.revealed{
    z-index:99999;
    background-color:white;
    padding:30px;
    line-height:26px;
    position:absolute;
    width: 100%;
    margin-left: 50%;
    min-height: 437px;
    left: -570px;
    box-shadow: 0px 20px 60px grey;
}
.revealed:hover{
    display:block!important;
}
@media only screen and (max-width: 575.98px) {
.grid-container {
        display: grid;
        grid-template-columns: auto;
    }
    .grid-item {
    flex-basis: 100%;
}
}
@media (max-width: 575.98px) { 
    .grid-container {
        display: grid;
        grid-template-columns: auto;
    }
    .revealed{
        display: none;
    }
    .c25{
        width: 100vw !important;
    }
    .c50{
        width: 100vw !important;
    }
    .c100{
        width: 100vw !important;
    }
    .minigo{
        display: hidden;
     }
     .sublabelGal{
         font-size: 0.7em;
     }
}

@media (max-width: 767.98px) { 
    .revealed{
        display: none;
    }
 }

@media (max-width: 990.98px) { 
    .revealed{
        left: -245px;
    }
}

@media (max-width: 1199.98px) { 
    .revealed{
        left: -465px;
    }
}
.article img{
    max-width:100%;
}
.is-invisible {
    visibility: hidden!important;
    line-height: 0;
}
.breadlink{
    color:#707070;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8em;
}

.scrollHomeButton{
    height: 30px;
    text-align: center;
    width: 100%;
    position: relative;
    top: 90%; 
    color: white;
  }
  .c25{
    width: 25vw;
  }
  .c50{
    width: 50vw;
  }
  .c100{
    width: 100vw;
  }
  .bordr{
      border-right: 4px solid white;
  }
  .bordl{
      border-left: 4px solid white;
  }
  .bordb{
      border-bottom: 4px solid white;
  }
  .bordt{
      border-top: 4px solid white;
  }

  .fullscreen {
    height: calc(100vh - 100px); /*    CUSTOM TEMPLATE */ 
    background-color: #ccc;
    display: flex;
    flex-direction: column;
  }
  .top, .middle, .bottom {
    background-color: #aaa;
    width: 100%;
    text-align: center;
  }
  .middle {
/* 
    flex: 1;
    object-fit: cover;
    display: flex;
 */
    /*  background-image:url('/upload/<?=$srcBgAllh;?>'); */
    background-size: cover;
    background-position:center center;
/* 
    background-attachment: fixed;
 */
 height:100%;
     
  }
  .center {
    flex: 1;
  }
  .scrollHomeButton{
    height: 30px;
    text-align: center;
    width: 100%;
    position: relative;
    top: 80%; 
    color: white;
  }
  body, html{
    margin: auto;
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
    height: 100%
  }
  .headMaster{
    background-color: white;
    display: flex;
    align-items: center;
  }
  #conteneur{
      display: flex;
      flex: auto;
      margin: auto;
  }
  .golum{
    flex-direction: column;
  }
  .golum:hover > .specs25,.specs50{
    opacity: 1;
  }
  .element{
    flex: auto;
  }
  .flexauto{
    flex: auto;
  }
  .logo{
    vertical-align: middle;
    width: 28px;
    margin-top:74px;
    margin-left: 74px;
    margin-bottom: 74px;
  }
  .navigat{
    display: flex;
    flex: auto;
    vertical-align: middle;
    margin-top:74px;
    margin-right: 74px;
    margin-bottom: 74px;
    justify-content: flex-end;
  }
  .navigat ul li{
    list-style: none;
    display: inline;
    font-size: 16px;
    font-weight: bold;
  }
  
  .minigo{
    margin-left: 8px;
  }

  .obfurscated{
    position: relative;
    right: 15%;
      bottom: 20px;
      left: 0%;
      right: 50%;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #000;
      text-align: center;
      width: 100%;
      top: -160px;
  }
  .opac0{
    transition: ease-in;
    transition-duration: 0.2s;
      opacity: 0;
  }
  .opac0:hover{
      transition: ease-in;
      transition-duration: 0.2s;
    opacity: 1;
}

.shhutt:hover > .specs50{
    transition: ease-in;
    transition-duration: 0.2s;
    animation: ease-in;
    animation-delay: 0.2s;
    opacity: 1;
    top: -30%;
}
.specs50{

    background-color: aqua;

    position: relative;
    width: 100%;

    text-align: center;
    height: 0;
    opacity: 0;
    margin-top: 0px;
    z-index: auto;
}
.specs25{
    position: absolute;
    background-color: aqua;
    text-align: center;
    width: 25%;
    bottom: -23%;
    margin: 0 auto;
    opacity: 0;
}

/* BIG UPDATE */
[style*="--aspect-ratio"]> :first-child {
    width: 100%;
}

[style*="--aspect-ratio"]>img {
    height: auto;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    [style*="--aspect-ratio"]> :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

.gridbrk {
    display: grid;
    /* grid-template-columns: repeat(4 1fr);*/
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 8px;
    justify-items: stretch;
    margin-bottom: 8px;
    /* align-items: center; */ 
}

.bbox {
    cursor: pointer;
}
.projectlink {
    cursor: pointer;
}

.grid-item:hover>.nested {
    transition: ease-in;
    transition-duration: 0.2s;
    animation: ease-in;
    animation-delay: 0.2s;
    opacity: 0.9;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.grid-item:hover>.nested span {
    transition: ease-in;
    transition-duration: 0.2s;
    animation: ease-in;
    animation-delay: 0.2s;
    margin-top: 10px;
}

.box1 {
    grid-column: 1/3;
    grid-row: 1/3;
}

.box2 {
    grid-row: 1/2;
}

.box3 {
    grid-row: 1/2;
}

.box4 {
    grid-column: 3/5;
    grid-row: 2/4;
}
.box44 {
    grid-column: 3/5;
    grid-row: 2/3;
}

.box5 {
    grid-column: 1/2;
    grid-row: 3/4;
}
.box5P {
    grid-column: 1/3;
    grid-row: 3/4;
}
.box4P {
    grid-column: 3/5;
    grid-row: 2/3;
}

.box7 {
    grid-column: 1/3;
    grid-row: 4/6;
}

.box8 {
    grid-column: 3/4;
    grid-row: 4/5;
}

.box9 {
    grid-column: 4/5;
    grid-row: 4/5;
}

.box10 {
    grid-column: 3/5;
    grid-row: 5/6;
}

.boxflat1{
    grid-column: 1/5;
}

.boxflat2{
    grid-column: 1/3;
}
.boxflat3{
    grid-column: 3/5;
}


.boxflat1_2{
    grid-column: 1/2;
}
.boxflat2_3{
    grid-column: 2/3;
}
.boxflat3_4{
    grid-column: 3/4;
}

.boxflat8_4a{
    grid-column: 1/9;
}
.boxflat8_4b{
    grid-column: 9/13;
}

.boxflat4_8a{
    grid-column: 1/5;
}
.boxflat4_8b{
    grid-column: 5/13;
}



.box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.nested {
    display: grid;
    align-items: center;
    justify-items: center;
    opacity: 0;
    text-align: center;
}
.nestedVisible {
    display: grid;
    align-items: center;
    justify-items: center;
    opacity: 1;
    text-align: center;
}
.nested a{
    text-decoration: none;
}
.nestedOpak {
    display: grid;
    align-items: center;
    justify-items: center;
    opacity: 1;
    text-align: center;
}
a.gold{
    text-decoration: underline;
    text-underline-position: under;
}

#navbarWhite {
    background-color: rgb(255, 255, 255);
    position: fixed;
    top: -120px;
    width: 100%;
    display: block;
    transition: top 0.3s;
    z-index: 10000;
    line-height: 45px;
    font-family: 'futura-pt', sans-serif;
    font-size: 16px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
  }
  .max1660{
      max-width: 1680px;
      margin: 0 auto; 
  }
    .max1770{
      max-width: 1770px;
      margin: 0 auto; 
      padding: 0;
  }

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 30px;
    text-align: center;
    margin: 10px;
    flex-basis: 33.3333%;
    display: flex;
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {

    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
.blacken{
    color: #000000CC;
}

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}

.mobinav {
    position: fixed;
    width: 100%;
    z-index: 9;
    background-color: #ffffffd7;
    text-align: center;
    text-shadow: 0 0 black;
}
.carousel-item:hover{
    opacity:0.6;
}
.hover6:hover{
    opacity:0.6;
}