@import url('base.css');
@import url('contact.css');

#pure-silver, #impacts {
    padding: 100px;
    background-color: var(--brown-grey-background);
    color: var(--light-text-color);
}

#pure-silver .separator {
    width: 40%;
}

#pure-silver h1, #impacts h1, #projects h1 {
    font-size: var(--large-font-size);
    font-weight: bold;
    text-transform: uppercase;
    margin: 5px 0 25px 0;
}

#pure-silver h1 {
    font-size: var(--extra-large-font-size);
    font-weight: 800;
}

html[lang='es'] #pure-silver h1 {
    font-size: 60px;
}

#pure-silver p {
    margin: 25px 0 0;
    font-size: var(--medium-font-size);
}

#projects {
    margin: 100px;
}

#projects h1 {
    font-size: var(--large-font-size);
    margin-bottom: 50px;
}

#projects .image-container {
    width: 100%;
    text-align: center;
}

#projects div {
    font-size: var(--normal-font-size);
}

#projects div p {
    margin: 25px auto 0;
	max-width: 1720px;
}

#impacts .container {
    display: flex;
    font-size: var(--normal-font-size);
    margin: 80px auto;
    width: 75%;
}

#impacts .container .left-content {
    width: 20%;
}

#impacts .container .right-content {
    width: 80%;
    display: flex;
    align-items: center;
}

#impacts img {
    width: 100px;
    height: 100px;
}

#initiatives {
    margin: 100px;
}

#initiatives .initiative-container {
    display: flex;
    font-size: var(--normal-font-size);
}

#initiatives .initiative-container .left-content {
    width: 34%;
    font-weight: bold;
    margin-right: 50px;
}

#initiatives .initiative-container .left-content .caption {
    font-size: var(--medium-font-size);
    text-transform: uppercase;
    margin-bottom: 25px;
}

#initiatives .initiative-container .right-content {
    width: 66%;
}

#initiatives .initiative-container .right-content img {
    width: 100%;
}

#initiatives .initiative-container .right-content p {
    margin: 25px 0;
}

#initiatives .initiative-container .right-content .gallery-container {
    margin: 125px 0;
}

#initiatives .initiative-container .right-content .gallery-container h3 {
    font-size: var(--medium-font-size);
    font-weight: bold;
    margin: 50px 0 25px;
}

#initiatives .initiative-container .right-content .gallery-container .image-container {
    border-top: 1px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    padding: 5px 0 0;
    position: relative;
    cursor: pointer;
}

#initiatives .initiative-container .right-content .gallery-container .image-container img {
    width: 100%;
}

#initiatives .initiative-container .right-content .gallery-container .image-container .view-gallery {
    position: absolute;
    right: 50px;
    top: 40%;
    display: flex;
    cursor: pointer;
}

#learn-more {
    margin: 100px;
}

#learn-more h1 {
    font-size: var(--large-font-size);
    font-weight: bold;
    text-transform: uppercase;
    margin: 50px 0 ;
}

#learn-more #learn-more-video-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#learn-more #learn-more-video-container .learn-more-video {
    width: 50%;
    padding: 50px;
    margin-bottom: 100px;
}

#learn-more #learn-more-video-container .learn-more-video .learn-video {
    width: 100%;
}

#learn-more #learn-more-video-container .learn-more-video .video-location {
    margin-top: 25px;
    text-transform: uppercase;
    font-size: var(--small-font-size);
}

#learn-more #learn-more-video-container .learn-more-video .video-title {
    text-transform: uppercase;
    font-size: var(--normal-font-size);
    font-weight: bold;
    margin-bottom: 35px;
}

#learn-more #learn-more-video-container .learn-more-video .video-details {
    font-size: var(--normal-font-size);
}

.button-icon {
    width: 30px;
    transform: rotate(270deg);
    margin-left: 25px
}

.button-icon path {
    fill: transparent;
    stroke: var(--main-text-color);
    stroke-width: 2px;
}

#gallery {
    background-color: var(--brown-grey-background);
    padding: 100px;
    color: var(--light-text-color);
    display: none;
}

#gallery h1 {
    font-size: var(--extra-large-font-size);
    font-weight: bold;
    text-transform: uppercase;
    margin: 5px 0 25px;
}

#gallery .separator {
	width: 40%;
}

#gallery #gallery-search {
    width: 30%;
}

#gallery .gallery-description {
    font-size: var(--medium-font-size);
    margin: 2rem 0;
}

#gallery .spotlight-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

#gallery .spotlight, #gallery .text-container {
    display: flex;
    height: 20vw;
    width: 25%;
    position: relative;
}

#gallery .spotlight .project-link {
    width: 100%;
    height: 100%;
}

#gallery .text-container .project-link .text {
    color: var(--light-text-color);
    background-color: var(--header-background);
    overflow: hidden;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: flex;
    align-items: center;
    background-image: url(/images/quotes.webp);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 2rem;
    font-size: 20px;
}

#gallery .text-container .project-link .text em {
    font-style: italic;
    display: flex;
	margin-top: 1rem;
	float: left;
	font-size: 16px;
}

#gallery .spotlight .project-link .photo {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#gallery .spotlight .project-link .photo-text {
    position: absolute;
    right: 25px;
    bottom: 25px;
    color: #fff;
    text-decoration: none;
    height: 1.5em;
    font-size: 1.5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 45px);
    text-align: right;
}

#gallery .black-button {
	margin-top: 30px;
}


@media only screen and (max-width: 1800px) {

	#gallery .text-container .project-link .text {
		font-size: 16px;
	}

	#gallery .text-container .project-link .text em {
		font-size: 12px;
	}

}


@media only screen and (max-width: 1500px) {

	#gallery .text-container .project-link .text {
		font-size: 12px;
		padding: 1rem;
	}

	#gallery .text-container .project-link .text em {
		margin-top: 0.5rem;
		font-size: 8px;
	}

	#gallery .spotlight .project-link .photo-text {
		font-size: 1em;
	}

}



/* Mobile & Tablet */
@media only screen and (max-width: 1200px) {

    #pure-silver, #projects, #impacts {
        padding: 50px 20px 100px;
        margin: 0;
    }

    #initiatives {
        padding: 50px 20px 50px;
        margin: 0;
    }

    #learn-more {
        padding: 0 20px 75px;
        margin: 0;
    }

	#pure-silver p {
		font-size: var(--normal-font-size);
    }

    #pure-silver h1 {
        font-size: var(--extra-large-font-size);
		margin: 0 0 20px;
    }

    #projects h1, #impacts h1 {
        font-size: var(--large-font-size);
		margin: 0 0 20px;
	}

    #learn-more h1 {
        font-size: var(--large-font-size);
		margin: 20px 0;
	}

    #impacts .container {
        width: 100%;
		max-width: 800px;
        margin: 0 auto 2rem;
        flex-direction: column;
    }

    #impacts .container .left-content,
    #impacts .container .right-content {
        width: 100%;
        text-align: center;
		padding: 1.5rem 2rem;
    }

    #initiatives .initiative-container {
        flex-direction: column;
    }

    #initiatives .initiative-container .left-content,
    #initiatives .initiative-container .right-content
    {
        width: 100%;
    }

    #initiatives .initiative-container .right-content p {
        font-size: var(--small-font-size);
    }

    #initiatives .initiative-container .left-content .caption {
        font-size: var(--normal-font-size);
        margin-bottom: 12px;
    }

    #initiatives .initiative-container .left-content .separator {
        margin-bottom: 12px;
    }

    #initiatives .initiative-container .right-content .gallery-container {
        margin: 25px 0 50px;
    }


    #initiatives .initiative-container .right-content .gallery-container h3 {
         font-size: var(--normal-font-size);
		 margin: 25px 0 10px;
    }

    #initiatives .initiative-container .right-content .gallery-container .image-container .view-gallery {
        font-size: var(--small-font-size);
        right: 10px;
    }

    .button-icon {
        width: 20px;
        margin-left: 10px
    }

    #learn-more {
        margin-bottom: 50px;
    }

    #learn-more #learn-more-video-container {
        flex-direction: column;
    }

    #learn-more #learn-more-video-container .learn-more-video {
        width: 100%;
        padding: 0;
        margin-bottom: 25px;
    }

	#learn-more #learn-more-video-container .learn-more-video .video-title {
		margin-bottom: 10px;
    }

    #learn-more #learn-more-video-container .learn-more-video .video-details {
        font-size: var(--small-font-size);
    }

	#gallery {
		padding: 100px 20px 100px;
	}

	#gallery h1 {
		font-size: var(--large-font-size);
		margin: 5px 0 10px;
	}

	#gallery .gallery-description {
		font-size: var(--normal-font-size);
	}

}

@media only screen and (max-width: 1000px) {

	#gallery .text-container .project-link .text {
		font-size: 9px;
		padding: 0.5rem;
	}

	#gallery .text-container .project-link .text em {
		margin-top: 0.25rem;
		font-size: 7px;
	}

	#gallery .spotlight .project-link .photo-text {
		font-size: 0.8em;
	}

}

@media only screen and (max-width: 800px) {

	#gallery .spotlight, #gallery .text-container {
		width: 50%;
		display: flex;
		justify-content: center;
	}

	#gallery .spotlight .project-link, #gallery .text-container .project-link {
		width: 95%;
		height: 95%;
	}

	#gallery .spotlight .project-link .photo {
		width: 100%;
		height: 100%;
	}

	#gallery .text-container .project-link .text {
		padding: 1rem;
		font-size: 12px;
		width: 100%;
		height: 100%;
	}

	#gallery .text-container .project-link .text em {
		margin-top: 1rem;
		font-size: 8px;
	}

	#gallery .spotlight .project-link .photo-text {
		font-size: 1em;
	}


}



/* Mobile */
@media only screen and (max-width: 600px) {

    :root {
        --extra-large-font-size: 40px;
}

	html[lang='es'] #pure-silver h1 {
		font-size: 40px;
	}

    #pure-silver .separator {
        width: 100%;
    }

	#projects div {
		margin-bottom: 0;
		font-size: var(--small-font-size);
	}

    #impacts .container {
        font-size: var(--small-font-size);
    }

    #impacts .container .left-content,
    #impacts .container .right-content {
        width: 100%;
    }

    #impacts .container .left-content img {
        width: 50%;
    }

	#initiatives .initiative-container .right-content .gallery-container .image-container .view-gallery {
		top: 30%;
	}

	#gallery .gallery-description {
		font-size: var(--small-font-size);
	}

	#gallery .spotlight, #gallery .text-container {
		height: 20vw;
		width: 100%;
	}

	#gallery .text-container .project-link .text {
		padding: 2rem;
		font-size: 20px;
		width: 100%;
		height: 100%;
	}

	#gallery .text-container .project-link .text em {
		margin-top: 1rem;
		font-size: 16px;
	}

	#gallery .spotlight .project-link .photo-text {
		font-size: 1.25em;
	}

}

@media screen and (max-width: 500px) {

	#gallery .text-container .project-link .text {
		font-size: 16px;
	}

	#gallery .text-container .project-link .text em {
		font-size: 14px;
	}

}

@media screen and (max-width: 400px) {

    :root {
        --extra-large-font-size: 32px;
        --large-font-size: 24px;
        --medium-font-size: 20px;
        --normal-font-size: 18px;
    }

	#gallery .spotlight .project-link .photo-text {
		font-size: 1em;
	}

	#gallery .text-container .project-link .text {
		font-size: 14px;
		padding: 1rem;
	}

	#gallery .text-container .project-link .text em {
		margin-top: 0.5rem;
		font-size: 12px;
	}

}