/* ==================================================
   DESIGN SYSTEM VARIABLES
================================================== */

:root {
    /* Colors */
    --bg: #efede6;
    --text: #2b2b2b;
    --body-text: #85837c;
    --muted-text: #949186;
    --dark-text: #1b1b1b;
    --accent: #ff4c4c;
    --light-gray: #999999;
	--lighter-gray: #c2c2c2;
    --border-gray: #85837c;
    --white: #ffffff;

    /* Effects */
    --popup-shadow: 0 15px 40px rgba(0,0,0,.35);

    /* Spacing */
    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 75px;

    /* Layout */
    --content-width: 1300px;

    /* Shape */
    --radius: 12px;
}


/* ==================================================
   RESET / BASE
================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img {
    
    height: auto;
}
.project img {
    max-width: 100%;
}
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

body {
    background-color: var(--bg);
    font-family: "Overpass", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: .8em;
    color: var(--text) !important;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ==================================================
   HEADER
================================================== */
header {

    position:sticky;
top:0;

    z-index:2000;

    background:var(--bg);

}


#header img {
    opacity: .25;
}

div#headshot img {
	float: left;
    display: block;
    border: solid 3px #fff;
	opacity: .80;
    margin-right: 20px;
	margin-top: -10px;
	width: 55px;
}
.email a {
    background: #99999982;
    padding: 0px 10px 0px 10px;
    font-size: .5em;
    top: -2px;
	margin-right: 10px;
    font-weight: 900 !important;
    display: inline-block!important;
    color: #fff;
	position: relative;
}
.email a:hover {
    background:var(--accent);
    padding: 0px 10px 0px 10px;
    font-size: .5em;
    margin-top: -10px;
    font-weight: 900 !important;
    display: inline-block;
    color: #fff;
}
.linkedin-svg-btn {
    display: inline-block;
    vertical-align: middle;
    width: 28px; 
    height: 28px; 
    overflow: hidden;
}
.linkedin-svg-btn svg {
   width: 100%;
    height: 100%;
    display: block;
    fill: #b3b2ac;
    transition: fill 0.3s ease;
    margin-top: -2px;
    position: relative;
}

.linkedin-svg-btn:hover svg {
  fill:var(--border-gray);
}

#portfolio {

    scroll-margin-top:120px;

}


/* ==================================================
   TYPOGRAPHY
================================================== */

small {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .75px;
    font-size: 9px;
    font-weight: 600;
}

p {
    font-size: 1.4em;
    line-height: 1.5em;
    color: var(--body-text);
}

.slider-container {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.slider-container.visible {
    opacity: 1;
    transform: translateY(0);
}



h1 {
    font-size: 1.6rem;
    line-height: .6em;
    font-weight: 600;
    color: var(--body-text);
    letter-spacing: -1.15px;
    margin-bottom: 0;
    text-transform: none;
    font-family: "Overpass", sans-serif;
    padding-top: var(--space-xl);
}

h2 {
    font-size: .95em;
    line-height: 1em;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .85px;
    margin-bottom: 30px;
    width: 100%;
    font-family: "Overpass", sans-serif;
}

h3#popupTitle {
    color: #000;
    font-size: 1em;
    line-height: 1em;
    text-align: left;
}

p#popupDescription {
    font-size: .96em;
    line-height: 1.38;
  color: var(--accent);
    text-align: left;
}

a {
    color: var(--accent);
    text-decoration: none;
}

b,
strong {
    color: var(--dark-text);
	 font-weight: 600;
}

.white {
    color: var(--white);
}


/* ==================================================
   NAVIGATION
================================================== */

#nav {
    float: right;
    position: relative;
    font-size: 16px;
    margin-top: -28px;
}

#nav a {
    margin-right: 18px;
    color: var(--muted-text);
    opacity: .65;
}

#nav a:hover {
    opacity: 1 !important;
}

#nav a.active {
    margin-right: 18px;
    color: #787773;
    border: 1px solid var(--accent);
    padding: var(--space-sm);
    background: var(--white);
    opacity: 1;
}


/* ==================================================
   MAIN LAYOUT
================================================== */

#main {
    max-width: var(--content-width);
    width: 100%;
    padding: 5%;
    margin: 0 auto;
}


#footer-description {
    float: left;
    width: 100%;
    font-size: 1em;
    color: var(--light-gray);
    margin-bottom: var(--space-sm);
    text-align: center;
    padding: 2%;
}

.clients {
    max-width: 100%;
    float: left;
}

.clients img {
    max-width: 90%;
    padding: 3%;
}


/* ==================================================
   LABELS
================================================== */

.caps {
    display: block;
    font-size: .75em;
    color: #8c8c8c !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.24px;	
	border-top: 1px solid #c3c2be;
	border-bottom: 1px solid #c3c2be;
    padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

.caps2 {
    font-family: "Antonio", sans-serif;
    font-size: .7em;
    color: #8c8c8c;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.24px;
    border-top: 1px solid #cccccc;
    padding-top: var(--space-sm);
}


/* ==================================================
   SMALL BUTTON
================================================== */

.soon {
    border: 1px solid #b3b3b3;
    color: #9e9e9e;
    padding: var(--space-sm) 15px;
    width: auto;
    float: left;
    font-weight: bold;
    font-size: .6em;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}


/* ==================================================
   PROJECTS
================================================== */

.project {
    width: 48% !important;
    float: left;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: var(--space-lg);
    display: block;
    position: relative;
}

.project-full {
    width: 100% !important;
    float: left;
    overflow: hidden;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    position: relative;
}

.full {
    width: 100% !important;
}

.right {
    margin-right: 0 !important;
}

.project img {
    width: 100%;
    display: block;
}

.project-description,
.project-description-2 {
    padding-top: 15px !important;
    padding-right: var(--space-sm);
    padding-bottom: var(--space-sm);
    padding-left: 0;
    float: left;
    width: -webkit-fill-available;
  color: var(--light-gray);
    font-weight: 500;
    background: transparent;
    font-size: 1.1em;
    line-height: 1.3em;
}

/* ==================================================
   SLIDER
================================================== */
.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
	margin-top: 40px;
    margin-bottom: 25px;
}

.slider {
    display: flex;
    width: 100%;
    transition:transform .45s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.slide {
    flex:0 0 100%;
    width: 100%;
    min-width: 100%;
    position: relative;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
}
/* Slider arrows */

.arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #afab9e;
    background: var(--bg);
    border: none;
    padding: var(--space-md);
    cursor: pointer;
    z-index: 10;
	  transition:
        background .25s,
        color .25s,
        transform .25s;
}
.arrow:hover{

    transform:translateY(-50%) scale(1.08);
}
.arrow.left {
    left: -14px;
}

.arrow.right {
    right: -14px;
}


/* ==================================================
   LAZY LOAD
================================================== */

.lazy-image {
    opacity: 0;
    transition: opacity .4s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 2. Apply it to your div */
.auto-fade-box {
  /* Runs 'fadeIn' over 1 second, smoothly, and stays at opacity: 1 when done */
  animation: fadeIn 1s ease-in-out forwards;
}

.sleek-box {
  opacity: 0;
  transform: translateY(20px); /* Starts 20 pixels lower */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sleek-box.active {
  opacity: 1;
  transform: translateY(0); /* Floats up to its normal position */
}



/* ===============================
   SCROLL FADE IN
================================ */

.slider-container {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.slider-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.slider-container:nth-child(even){
    transition-delay:.1s;
}

.slider-container:nth-child(odd){
    transition-delay:.2s;
}
.slider-container:first-child {
    opacity:1;
    transform:none;
}

/* ==================================================
   PROJECT INFO BUTTON
================================================== */

.project-info-btn {
    position: absolute;
    right: 16px;
    bottom: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--light-gray);
    border: 1.5px solid var(--light-gray);
    border-radius: 50%;
    font-size: 1.4em;
    z-index: 9999;
	transition:
        background .25s,
        color .25s,
        transform .25s,
        border-color .25s;
	font-variant-emoji: text!importantimportant;
}

.project-info-btn:hover {
    background: rgba(255,255,255,.5);
    transform: scale(1);
	background: var(--accent);
	color:var(--white);
	border-color:var(--accent);
    transform:scale(1.08);
}

.project:hover .project-info-btn {
    opacity: 1;
    transform: translateY(0);
}


/* ==================================================
   PROJECT POPUP
================================================== */

.project-popup {
    position: absolute;
    right: 0px;
    bottom: 62px;
    width: 285px;
    padding: var(--space-md);
    background: var(--bg);
    border-radius: 0;
    box-shadow: var(--popup-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
	transform:translateY(8px);
    transition:  opacity .22s ease,
        transform .22s ease;
    z-index: 99999;
}

.project-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
	 transform:translateY(0);
}


/* Popup arrow */

.project-popup::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 18px;
    width: 16px;
    height: 16px;
    background: var(--bg);
    transform: rotate(45deg);
}


/* Popup content */

.popup-content {
    text-align: right;
    position: relative;
    z-index: 100000;
    pointer-events: auto;
}

.popup-close {
    position: absolute;
    top: -17px;
    right: -15px;
    border: none;
    background: transparent;
    color: var(--light-gray);
    font-size: 26px;
    cursor: pointer;
}


/* ==================================================
   FILTER BAR
================================================== */

.filter-bar {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    position:sticky;
    top:0px;
    z-index:1000;
    padding:15px 0;
    margin-bottom:50px;
    background:var(--bg);

}
.filter {
    border: 1px solid var(--lighter-gray);
    background: var(--white);
    padding: 10px 18px;
    cursor: pointer;
    transition: .25s;
    font-size: .6rem;
    border-radius: 12px;
    font-family: inherit;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--body-text);
}
.filter:hover{

    background:var(--bg);

}

.filter.active{
    background:#ff4c4c;
    color:var(--white);
    border-color:var(--accent);

}


  







/* ===============================
   FILTER ANIMATION
=============================== */
.slider-container {

    opacity:0;
    transform:translateY(30px);
    transition:
    opacity .7s ease,
    transform .7s ease;

}


.slider-container.visible {
opacity:1;
    transform:translateY(0);

}


.slider-container.filter-hidden {
  display:none !important;

}


.slider-container.filter-transition {
    opacity:0;

}

/* ===============================
   SCROLL TO TOP BUTTON
================================ */


#scrollTopBtn {

position:fixed;
right:10px;
	left: auto;
bottom:calc(10px + env(safe-area-inset-bottom));
width:42px;
    height:42px;

    border-radius:50%;

    border:0px solid var(--border-gray);

    background:var(--border-gray);
	
    color:var(--white);

    font-size:20px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s;

    z-index:9999;

}




#scrollTopBtn.show {

    opacity:1;
	opacity:.6;
    visibility:visible;

    transform:translateY(0);

}
#scrollTopBtn:hover {
 opacity:1;
    transform:translateY(0) scale(1.08);
}
#scrollTopBtn svg {

    width:16px;
    height:16px;
    display:block;
    fill:currentColor;

}

/* ==================================================
   RESPONSIVE
================================================== */

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



    h1 {
        font-size: 1.5rem;
        line-height: .75em;
    }

    h2 {
        width: 98%;
    }

 

    .arrow {
        top: 45%;
        font-size: 2rem;
        padding: var(--space-sm);
    }
	.arrow.left {
    left:0px;
}

.arrow.right {
    right: 0px;
}
   .slider {
        display:flex;
    }


    .slide {
        flex:0 0 100%;
        min-width:100%;
        overflow:hidden;
    }


  .mobile-half img{
    width:204%;
    max-width:none;
    display:block;
}

.left-half img{
    transform:translateX(0);
}

.right-half img{
    transform:translateX(-50%);
}


}