@charset "UTF-8";

/* --------------------------------------------------------------------------
   PORTFOLIO-499: MOBILE ONLY BASELINE (max-width: 499px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 499px) {
    .leftarrow { position: fixed; display: flex; align-items: center; width: 2vh; padding-left: 1vh; height: 80vh; z-index: 10; }
    .rightarrow { position: fixed; right: 0; display: flex; align-items: center; width: 2vh; padding-right: 1vh; height: 80vh; z-index: 10; }
    .leftarrow img, .rightarrow img { width: 100%; height: auto; }

    #portfoliointro { padding-top: 10vh; background-color: #FE5000; color: #FFF; }
    #portfoliointroinner { padding-top: 40px; padding-bottom: 40px; width: 90%; }
    #portfolioimages { padding-top: 40px; padding-bottom: 40px; background-color: #FFF; display: flex; justify-content: center; }
    #portfolioimagesinner { display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto; }
    
    .pf2-1, .pf3-1, .pf4-1 { width: 100%; margin-top: 4vw; }
    .pf2-1:first-child, .pf3-1:first-child, .pf4-1:first-child { margin-top: 0; }
    .portfoliosolution { background-color: #D4D4D4; display: flex; justify-content: center; align-items: center; }
    #portfoliosolutioninner { padding-top: 40px; padding-bottom: 40px; width: 90%; }

    /* Scoped Portfolio Typography & Reset Alignment */
    #portfoliointroinner h1, #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { 
        font-weight: bold; 
        margin-top: 0; 
        margin-bottom: 0; 
        line-height: 1.1em; 
    }
    #portfoliointroinner h1 { font-size: 150%; margin-top: 0.5em; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #FFF; }
    #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { font-size: 115%; margin-bottom: .5em; }
	}

	.casestudywhiteinner h5 {
    color: #FE5000;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.1em;
	}

	.portfolioimagesinner + p {
	margin-top: 1.5em;
	}

/* --------------------------------------------------------------------------
   PORTFOLIO-600: SMALL TABLETS & LANDSCAPE PHONES (max-width: 600px and min-width: 500px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) and (min-width: 500px) {
    .leftarrow { position: fixed; display: flex; align-items: center; width: 2vh; padding-left: 2.5vw; height: 80vh; z-index: 10; }
    .rightarrow { position: fixed; right: 0; display: flex; align-items: center; width: 2vh; padding-right: 2.5vw; height: 80vh; z-index: 10; }
    
    #portfoliointro { padding-top: 10vh; background-color: #FE5000; color: #FFF; }
    #portfoliointroinner { padding-top: 40px; padding-bottom: 40px; width: 85%; }
    #portfolioimages { padding-top: 40px; padding-bottom: 40px; background-color: #FFF; display: flex; justify-content: center; }
    .portfolioimagesinner { display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto; }
    
    .pf2-1, .pf3-1, .pf4-1 { width: 100%; margin-top: 4vw; }
    .pf2-1:first-child, .pf3-1:first-child, .pf4-1:first-child { margin-top: 0; }
    #portfoliosolution { background-color: #D4D4D4; display: flex; justify-content: center; align-items: center; }
    #portfoliosolutioninner { padding-top: 40px; padding-bottom: 40px; width: 85%; }

    /* Scoped Portfolio Typography & Reset Alignment */
    #portfoliointroinner h1, #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { 
        font-weight: bold; 
        margin-top: 0; 
        margin-bottom: 0; 
        line-height: 1.1em; 
    }
    #portfoliointroinner h1 { font-size: 150%; margin-top: 0.5em; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #FFF; }
    #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { font-size: 115%; margin-bottom: .5em; }
}

/* --------------------------------------------------------------------------
   PORTFOLIO-1000: TABLET PORTRAIT / MID-RANGE VIEWPORTS (max-width: 1000px and min-width: 601px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1000px) and (min-width: 601px) {
    .leftarrow { position: fixed; display: flex; align-items: center; width: 2.5vh; padding-left: 2.5vw; height: 80vh; z-index: 10; }
    .rightarrow { position: fixed; right: 0; display: flex; align-items: center; width: 2.5vh; padding-right: 2.5vw; height: 80vh; z-index: 10; }
    
    #portfoliointro { padding-top: 10vh; background-color: #FE5000; color: #FFF; display: flex; justify-content: center; }
    #portfoliointroinner { padding-top: 50px; padding-bottom: 50px; width: 85%; }
    #portfolioimages { padding-top: 60px; padding-bottom: 60px; background-color: #FFF; display: flex; justify-content: center; }
    .portfolioimagesinner { display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto; }
    
    .pf2-1, .pf3-1, .pf4-1 { width: 100%; margin-top: 4vw; }
    .pf2-1:first-child, .pf3-1:first-child, .pf4-1:first-child { margin-top: 0; }
    #portfoliosolution { background-color: #D4D4D4; display: flex; justify-content: center; align-items: center; }
    #portfoliosolutioninner { padding-top: 50px; padding-bottom: 50px; width: 85%; }

    /* Scoped Portfolio Typography & Reset Alignment */
    #portfoliointroinner h1, #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { 
        font-weight: bold; 
        margin-top: 0; 
        margin-bottom: 0; 
        line-height: 1.1em; 
    }
    #portfoliointroinner h1 { font-size: 150%; margin-top: 0.5em; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #FFF; }
    #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { font-size: 115%; margin-bottom: .5em; }
}

/* --------------------------------------------------------------------------
   PORTFOLIO-DESKTOP: STANDARD DISPLAY / HIGH RESOLUTION BREAKPOINT (min-width: 1001px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {
    .leftarrow { position: fixed; display: flex; align-items: center; width: 3vh; padding-left: 2.5vw; height: 80vh; z-index: 10; }
    .rightarrow { position: fixed; right: 0; display: flex; align-items: center; width: 3vh; padding-right: 2.5vw; height: 80vh; z-index: 10; }

    #portfoliointro { padding-top: 10vh; background-color: #FE5000; color: #FFF; display: flex; justify-content: center; }
    #portfoliointroinner { padding: 75px 0 75px 0; width: 50%; text-align: center; }
    #portfolioimages { padding: 150px 0 150px 0; background-color: #FFF; display: flex; justify-content: center; }
    .portfolioimagesinner { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin: 0 auto; }
    
    .pf2-1 { width: 48%; }
    .pf2-1:nth-child(n+3) { margin-top: 3.333vw; }
    .pf2-1 + .pf3-1 { margin-top: 2.33vw; }
    .pf3-1 { width: 31%; }
    .pf3-1:nth-child(n+4) { margin-top: 2.33vw; }
    .pf4-1 { width: 23%; }
    #portfoliosolution { background-color: #D4D4D4; display: flex; justify-content: center; align-items: center; }
    #portfoliosolutioninner { padding: 75px 0 75px 0; width: 50%; text-align: center; }

    /* Scoped Portfolio Typography & Reset Alignment (Desktop Focus) */
    #portfoliointroinner h1, #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { 
        font-weight: bold; 
        margin-top: 0; 
        margin-bottom: 0; 
        line-height: 1.1em; 
    }
    #portfoliointroinner h1 { font-size: 150%; margin-top: 0.5em; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #FFF; }
    #portfoliointroinner h3, #portfoliosolutioninner h3, #portfoliosolutioninner h4 { font-size: 150%; margin-bottom: 0em; }
}

/* --------------------------------------------------------------------------
   PORTFOLIO-MOBILE-LANDSCAPE: ULTRA SPECIFIC COMPACT RATIOS (max-width: 850px and max-height: 450px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 850px) and (max-height: 450px) {
    #portfoliointro { padding-top: 10vh !important; }
    #portfoliointroinner { padding-top: 20px !important; padding-bottom: 20px !important; }
    .leftarrow, .rightarrow { height: 70vh !important; width: 2.5vw !important; }
    .leftarrow { padding-left: 1vw !important; }
    .rightarrow { padding-right: 1vw !important; }
}