/*=== FONTS ****/
/* Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/*=== COLORS ****/
:root {
    --bg-main: #FFF9F2; /* FFF9F2 */
    --text-main: #454545;
    --hover-color: #CDE2E9;
    background: var(--bg-main);

    --spacing: 3vw;
    --border-main: 1.5px solid var(--text-main);
}


body {
    display: block;
    position: absolute;
    left: var(--spacing);
    right: var(--spacing);
    margin: 0;
    background-color: var(--bg-main);
}

.spacer {
    height: var(--spacing);
}

#top-spacer {
    border-left: var(--border-main);
    border-right: var(--border-main);
}

h1 {
    color: var(--text-main);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.5vw;
    letter-spacing: 4%;
    line-height: 2.5vw;
}

#top-titlebar{
    position: absolute;
    display: block;
    width: 100%;
    margin-bottom: var(--spacing); 
}

h1.top-title {
    text-align: left;
    background-color: var(--bg-main);
    padding-left: 1.5vw;
    margin: 0;
    position: relative;
    height: var(--spacing);
    border: var(--border-main);
}

#page-content {
    display: flex;
    justify-content: flex-start;
}


h2 {
    color: var(--text-main);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2vw;
    letter-spacing: 4%;  
    padding-left: 1.5vw;
    margin: 0; 
    height: var(--spacing);
}

p, a {
    color: var(--text-main);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    line-height: 1.5vw;
    padding: 1vw 1vw 1vw 1.5vw;
    margin: 0;
    text-decoration: none; 
}
.left-side {
    width: 40vw;
    border-left: var(--border-main);
    border-right: var(--border-main);
}

.left-side .spacer, 
.left-side h2,
.left-side .intro {
    border-bottom: var(--border-main);
}

.email, .phone {
    display: flex;
    align-content: center;
}

.contact {
    
    padding: .5vw 0 1vw 1.5vw;
}

.email p,
.phone p {
    padding: .5vw 0 .5vw .5vw;
}

.contact a {
    display: block;
    padding: .25vw 0;
}

.projects-gallery {
    display: block;
    margin-left: var(--spacing);
    width: 100%;
    border-left: var(--border-main);
    border-right: var(--border-main);

}

.project-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-list li {
    border-top: var(--border-main);
    background-color: var(--bg-main);
    transition: background-color 0.5s ease-in 0s;
}


.project-list li:hover {
    cursor: pointer;
    background-color: var(--hover-color);
    transition: background-color 0.5s ease-in 0s;
}



.project-list li:last-child {
    border-bottom: var(--border-main);
}

.project-list a {
    padding: 0;
    line-height: normal;
}

/*=== LANDFILL PROJ PAGE ===*/
/* "Back to Home" button */
#top-titlebar > .textbox {
    position: absolute;
    border: var(--border-main);
    text-align: center;
    right: 0.5vw;
    top: 0.5vw;
    padding: 0.25vw 0.5vw;
    transition: background-color 0.3s ease-in 0s;
    line-height: 0;
}

#top-titlebar > .textbox a {
    font-size: 1vw;
    padding: 0;
}

#top-titlebar > .textbox:hover {
    display: block;
    background-color: var(--hover-color);
    transition: all 0.2s ease-in 0s;
}

.landfill-proj-info {
    display: block;
}

.lf-left-side {
    width: 45vw;
    border-left: var(--border-main);
    border-right: var(--border-main);
}

/* Timeframe textbox */
.lf-left-side .textbox {
    position: relative;
    border: var(--border-main);
    text-align: center;
    left: 1.5vw;
    top: 0.4vw;
    padding: 1vw 0.5vw;
    width: fit-content;
}

.lf-left-side .textbox p {
    padding: 0;
    font-size: 1vw;
    line-height: 0;
}

.lf-left-side .spacer {
    align-items: center;
}

.lf-left-side h2 {
    border-top: var(--border-main);
    border-bottom: var(--border-main);
}

.lf-left-side ul {
    list-style-type: square;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    line-height: 1.5vw;
    color: var(--text-main);

    
    margin-left: 1vw;
    padding-bottom: 1vw;
    padding-right: 1.5vw;
    
}

.lf-left-side p {
    padding-bottom: 0vw;
}


.lf-left-side .spacer:nth-of-type(2) {
    border-top: var(--border-main);
}

#landfill-proj-info {
    display: flex;
    justify-content: flex-start;
}

.lf-right-side {
    display: flex;
    flex-direction: column;
   
    width: 100%;
    border-right: var(--border-main);
    border-left: var(--border-main);
    margin-left: var(--spacing);
}

.lf-right-side > .spacer {
    position: relative;
    min-height: var(--spacing);
}

#top-titlebar > .spacer {
    border-top: var(--border-main);
}

.proj-drawings-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: var(--border-main);
    border-bottom: var(--border-main);
}

.proj-drawings-heading p.drawings-info{
    position: absolute;
    text-align: center;
    padding: 0;
    right: 1vw;
    height: 1.25vw;
    width: 1.25vw;
    font-size: 1vw;
    line-height: 1.25vw;
    border: var(--border-main);
    border-radius: 3vw;
}

.proj-drawings-heading span  {
    display:none;
    position: absolute;
    right: -0.115vw;
    top: 2vw;
    font-size: .75vw;
    line-height: .75vw;
    background: var(--hover-color);
    padding: .5vw;
    width:10vw;
    text-align: right;
    transition: width 0.7s ease-in 0s;
    
}

.proj-drawings-heading span:after {
    content:'';
    width: 0;
    height: 0;
    border: 0.75vw solid transparent;
    border-top: 0;
    border-bottom: 1vw solid var(--hover-color);
    position: absolute;
    top: -0.5vw;
    right: 0vw;
}

.proj-drawings-heading p.drawings-info:hover {
    background: var(--hover-color);
}

.proj-drawings-heading p.drawings-info:hover span {
    display: block;
    
}

.lf-right-side .images {
    height: 100%;
    width: 100%;
}

/* iframe/pdf viewer styling */
.lf-right-side .images iframe {
    border: none;
    display: block;
    width:100%;
    height: 100%;
    position: relative;
    
}

span.signal-desc p {
    padding-bottom: 1.5vw;
}