body.project
{
	--bannerHeight:calc(100vh - 25px);
}




#page {
    background-color:#3338;
}

body.project #page > .banner
{
    height:calc(var(--bannerHeight) - 100px);
}
#page > .banner > .headers {
    margin:130px 0 0 50px;
}
#page > .banner > .headers > h2 {
    margin:0;
    font-size:4.5em;
    color:#EFEFEF;
    text-shadow:0 0 3px #000;
    white-space:nowrap;
}
#page > .banner > .headers > h3 {
    margin:0 0 0 3px;
    color:#CFCFCF;
    text-shadow:0 0 3px #000;
}

#page > .banner > .floater {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    /* margin:200px auto 0; */
    width:80%;
    text-align:center;
}
#page > .banner > .floater > h2 {
    margin:0;
    font-size:1.8em;
    color:#EFEFEF;
    text-shadow:0 0 3px #000;
}

#page > .fade {
    background-image:linear-gradient(to left, rgba(255,255,255, 0), var(--theme1) 90%);
}


#page > .content {
	padding:0;
}



#projects {
    margin-bottom:60px;
    overflow:hidden;
}
#project.show + #projects {
    display:none;
}

#projects > .header {
	/* text-align:center; */
	margin:50px 0 40px;
	width: 80%;
    margin:50px auto 26px;
}
#projects > .header > div {
    display:inline-block;
}
#projects > .header h2 {
    margin:0;
    padding-right:4px;
	font-size:2em;
    color:#333;
}
#projects > .header .underline {
    width:100%;
    height:4px;
	background-color:var(--color1Alt2);
}

#projects > .section {
    width:80%;
    margin:0 auto;
}
#projects > .section.constructing > div {
    display:flex;
    flex-direction:row;
    gap:20px;
}
#projects > .section.constructing .project {
    flex-basis:50%;
}

#projects > .section.constructed {
    /* display:grid; */
    /* justify-content:center; */
    /* padding:50px 0; */
    /* grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); */
    /* gap:20px; */

    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    -moz-column-gap:20px;
    -webkit-column-gap:20px;
    column-gap:20px;
}

#projects .project {
    position:relative;
    /* aspect-ratio:6/4; */
    border-radius:4px;
    margin-bottom:20px;
    background-color:#FFF;
    box-shadow:0 0 3px #000A;
    cursor:pointer;
}
#projects .project > .image {
    position:relative;
    width:100%;
    height:100%;
    border-radius:4px;
    object-position:top;
    object-fit:cover;
}
#projects .project > .overlay > .medias {
    display:none;
    width:100%;
    height:25%;
    flex-grow:0;
    box-sizing:border-box;
    gap:8px;
    overflow-x:auto;
}
#projects .project:hover > .overlay > .medias {
    display:flex;
}
#projects .project > .overlay > .medias > img {
    height:100%;
    aspect-ratio:6/4;
    object-position:top;
    object-fit:cover;
}

#projects .project > .overlay {
    /* opacity:0; */
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    box-sizing:border-box;
    border-radius:4px;
    background-color:#0008;
    flex-direction:column;
    transition:opacity .3s ease-out;
}
#projects .project:hover > .overlay {
    top:0;
}
#projects .project:hover > .overlay::after {
    content:"View Project";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    font-size:1.5em;
    font-weight:bold;
    color:#FFF;
    text-shadow:0 0 3px #000;
}
#projects .project > .overlay > .floater {
    --w:300px;
    
    display:flex;
    max-width:100%;
    flex-grow:1;
    padding:14px 14px 14px 20px;
    white-space:nowrap;
    color:#FFF;
    flex-direction:column;
    align-content:center;
    justify-content:center;
    text-shadow:0 0 3px #000;
}
#projects .project:hover > .overlay > .floater > * {
    display:none;
}
#projects .project > .overlay > .floater > h2 {
    --tw:300px;

    margin:2px 0 0;
    font-size:clamp(20px, 25px, calc(25px - ((var(--tw) - var(--w)) * 0.1)));
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
#projects .project > .overlay > .floater > .address > p {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}


#project {
    position:relative;
    display:none;
    width:90%;
    min-height:100%;
    margin:0 auto;
    padding-top:10px;
    padding-bottom:40px;
    box-sizing:border-box;
}
#project.show {
    display:block;
}


#project > .back {
    --t:260px;

    z-index:10;
    position:fixed;
    /* left:calc(((100vw - min(1800px, 100vw)) / 2) + 50px); */
    left:35px;
    top:max(var(--t), 132px);
    padding:3px 11px 3px 12px;
    background-color:var(--theme1Inverted);
    border-radius:13px;
    font-size:1.08em;
    font-weight:bold;
    color:var(--textSoftInverted);
    box-shadow:0 0 2px #000A;
    cursor:pointer;
}

#project > .medias {
    display:flex;
    box-sizing:border-box;
    width:fit-content;
    max-width:100%;
    height:100px;
    margin:0 auto;
    filter:drop-shadow(0 0 5px #0009);
    gap:10px;
    overflow-x:auto;
}
#project > .medias > .media {
    position:relative;
    height:100%;
    aspect-ratio:6/4;
    background-color:#FFF;
    cursor:pointer;
}
#project > .medias > .media > img {
    width:100%;
    height:100%;
    object-position:top;
    object-fit:cover;
}
#project > .medias > .media > .play {
    opacity:.75;
    position:absolute;
    left:50%;
    top:calc(50% + 5px);
    transform:translate(-50%, -50%);
    width:52px;
    height:52px;
    border-radius:50%;
    background-color:#000;
    background-image:url("/Assets/Images/play.webp");
    background-size:26px 26px;
    background-repeat:no-repeat;
    background-position:15px 13px;
}
#project > .medias > .media:hover > .play {
    opacity:1;
}

#project > .grid {
    display:grid;
    margin-top:20px;
    grid-template-columns:[left] 7fr;
}
#project.stats > .grid {
    grid-template-columns:[left] 7fr [right] 2fr;
}
#project > .grid > div {
    height:fit-content;
    margin:20px;
    padding:30px;
    border:1px solid #CCC;
}
#project > .grid > .right,
#project > .grid > .right > .owner,
#project > .grid > .right > .location,
#project > .grid > .right > .figures {
    display:none;
}
#project.stats > .grid > .right,
#project > .grid > .right > .owner.show,
#project > .grid > .right > .location.show,
#project > .grid > .right > .figures.show {
    display:block;
}

#project > .grid > .right > div {
    position:relative;
    margin-bottom:30px;
}
#project > .grid > .left > div {
    margin-top:30px;
}
#project > .grid > .left > div:first-child {
    margin-top:unset;
}

#project > .grid > div > div > .header + div {
    position:relative;
    margin-top:40px;
}
#project > .grid > div > div > .header + div::before {
    content:"";
    position:absolute;
    left:0;
    top:-20px;
    display:block;
    width:100%;
    border-bottom:2px solid var(--color1);
}
/* #project > .grid > .right > div::after {
    top:unset;
    bottom:-20px;
} */
#project > .grid > .right > .figures > .header + div::before {
    top:-26px;
}
#project > .grid > .right > div {
    text-align:center;
}x
#project > .grid > .right > div > .header {
    margin:0;
}
#project > .grid > .right > div > .header > img {
    display:inline-block;
    width:20px;
    vertical-align:sub;
    margin-right:6px;
}
#project > .grid > .right > .figures > .figure {
    display:none;
    margin:16px 0;
    /* color:var(--color1Alt1); */
    font-size:1.5em;
}
#project > .grid > .right > .figures > .figure.show {
    display:block;
}
#project > .grid > .right > .figures > .figure.floors {
    position:relative;
    margin-top:46px;
}
/* #project > .grid > .right > .figures > .figure > * {
    vertical-align:middle;
    display:inline-block;
} */
#project > .grid > .right > .figures > .figure > img {
    display:inline-block;
    height:36px;
    /* margin-right:12px; */
}
#project > .grid > .right > .figures > .figure .value {
    margin-right:5px;
}



#project .timeline {
    position:relative;
    display:none;
}
#project.timeline .timeline {
    display:block;
}
#project .timeline > .header {
    vertical-align:sub;
    width:fit-content;
    margin:0 auto;
}
#project .timeline > .header > img {
    display:inline-block;
    margin-right:10px;
    height:20px;
}
#project .timeline > .posts {
    padding:20px;
}
#project .timeline > .posts > .line {
    z-index:1;
    position:absolute;
    width:3px;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background-color:#c3c4ce;
    filter:drop-shadow(0 0 1px #0009);
}
#project .timeline > .posts > .line::before,
#project .timeline > .posts > .line::after {
    content:"";
    z-index:2;
    position:absolute;
    width:14px;
    height:2px;
    left:50%;
    transform:translateX(-50%);
    background-color:#c3c4ce;
    filter:drop-shadow(0 0 1px #0009);
}
#project .timeline > .posts > .line::before {
    top:0;
}
#project .timeline > .posts > .line::after {
    bottom:0;
}

#project .timeline > .posts > .months > .month {
    z-index:3;
    position:relative;
}
#project .timeline > .posts > .months > .month::before {
    content:attr(alt);
    position:relative;
    display:block;
    width:fit-content;
    margin:0 auto;
    padding:7px 9px;
    background-color:#CFCFCF;
    border-radius:18px;
    filter:drop-shadow(0 0 2px #0006);
}
#project .timeline > .posts > .months > .month > .name {
    position:relative;
    width:fit-content;
    margin:0 auto;
    padding:7px 9px;
    background-color:#CFCFCF;
    border-radius:18px;
    box-shadow:0 0 3px #000A;
}
#project .timeline > .posts > .months > .month > .post {
    --bg:var(--color1Alt1);

    position:relative;
    left:calc(50% - 100px);
    transform:translateX(-100%);
    width:calc(50% - 100px);
    /* filter:drop-shadow(0 0 3px #000A); */
}
#project .timeline > .posts > .months > .month > .post:nth-child(even),
#project .timeline > .posts > .months > .month.right > .post:nth-child(odd) {
    left:unset;
    right:calc(50% - 100px);
    transform:translateX(100%);
    margin-left:auto;
}
#project .timeline > .posts > .months > .month.right > .post:nth-child(even) {
    right:unset;
    left:calc(50% - 100px);
    transform:translateX(-100%);
    margin-left:unset;
}
#project .timeline > .posts > .months > .month > .post::after {
    content:"";
    position:absolute;
    right:-100px;
    top:50%;
    transform:translate(50%, -50%) rotate(45deg);
    width:13px;
    height:13px;
    background-color:var(--bg);
    filter:drop-shadow(0 0 2px #0009);
}
#project .timeline > .posts > .months > .month > .post:nth-child(even)::after,
#project .timeline > .posts > .months > .month.right > .post:nth-child(odd)::after {
    right:unset;
    left:-100px;
    transform:translate(-50%) rotate(45deg);
}
#project .timeline > .posts > .months > .month.right > .post:nth-child(even) {
    left:unset;
    right:-100px;
    transform:translate(50%, -50%) rotate(45deg);
}

#project .timeline > .posts > .months > .month > .post > .title {
    width:fit-content;
    margin-left:auto;
    margin-bottom:20px;
    padding:10px 16px 11px;
    background-color:var(--bg);
    border-radius:25px;
    color:var(--textSoftInverted);
    filter:drop-shadow(0 0 3px #000A);
}
#project .timeline > .posts > .months > .month > .post:nth-child(even) > .title,
#project .timeline > .posts > .months > .month.right > .post:nth-child(odd) > .title {
    margin-left:unset;
}
#project .timeline > .posts > .months > .month.right > .post:nth-child(even) {
    margin-left:auto;
}
#project .timeline > .posts > .months > .month > .post > .title > h2 {
    margin:0;
    font-size:1.3em;
}

#project .timeline > .posts > .months > .month > .post > .container {
    background-color:var(--bg);
    filter:drop-shadow(0 0 3px #000A);
}

#project .timeline > .posts > .months > .month > .post > .container > .images {
    padding:10px;
}
#project .timeline > .posts > .months > .month > .post > .container > .images > img {
    width:100%;
}

#project .timeline > .posts > .months > .month > .post > .container > .thumbnails {
    z-index:2;
    position:relative;
    display:flex;
    height:64px;
    padding:0 10px 10px;
    /* background-color:var(--bg); */
    justify-content:center;
    gap:6px;
    overflow:auto;
}
#project .timeline > .posts > .months > .month > .post > .container > .images:empty,
#project .timeline > .posts > .months > .month > .post > .container > .thumbnails:empty {
    display:none;
}
#project .timeline > .posts > .months > .month > .post > .container > .thumbnails > img {
    display:inline-block;
    height:100%;
    cursor:pointer;
}





#project .posts {
    position:relative;
    display:none;
    width: 100%;
}
#project.timeline .posts {
    display:block;
}

.post > .images {
    overflow-x:auto;
}
.post > .images > .container {
	display:flex;
    flex-direction:row;
    gap:10px;
}
.post > .images > .container > div {
    box-sizing:border-box;
	flex-basis:33%;
    flex-shrink:1;
    min-width:32%;
    padding:5px;
}
.post > .images > .container > div > img {
	width:100%;
    box-shadow:0 0 2px #000000;
    cursor:pointer;
}


@media only screen and (max-width: 480px) {
    #page > .banner > .headers {
        margin:130px 20px 0 20px;
    }
    #page > .banner > .headers > h2 {
        font-size:2.5em;
        white-space:normal;
    }
    #page > .banner > .floater {
        transform:translate(-50%, -50%);
    }
    #page > .banner > .floater > h2 {
        font-size: 1.2em;
    }

    #project > .back {
        top:max(var(--t), 100px);
    }
    #project > .grid {
        grid-template-columns:[left] 7fr !important;
    }
    

    #projects > .section.constructing > div {
        flex-direction:column;
    }
    #projects > .section.constructed {
        -moz-column-count:unset;
        -webkit-column-count:unset;
        column-count:unset;
    }
    #projects > .section.constructed > div {
        display:flex;
        flex-direction:column;
    }
}
@media only screen and (max-width: 815px) {
    #projects > .section.constructing > div{
        display:block;
    }
    #projects > .section.constructed {
        -moz-column-count:2;
        -webkit-column-count:2;
        column-count:2;
    }
}
@media only screen and (max-height: 480px) {
    body {
        --bannerHeight:500px;
    }
    #page > .down {
        display:none;
    }

    #page > .banner > .headers {
        margin:70px 32px 0 32px;
    }

    #page > .banner > .floater {
        position:unset;
        transform:unset;
        margin:0 auto;
    }
}