/* GLOBAL STYLES */

::selection { 
    background: #006EDC;
    color: #DEEFF0; 
}

.offwhite {
    background-color: #F6F4F2;
}

body {
    background-color: #DEEFF0;
    color: #006EDC;
}

.logo   {
    width: 75%;
}

li {
    list-style-type: none;
}

.line   {
    height: 1px;
    background-color: #006EDC;
}

.sideways   {
    margin: -1.5vw 0 0 -.555vw;
    transform: rotate(-90deg);
    text-align: center;
}



/* MARGINS & PADDING */

*   {
    margin: 0;
}

header,
footer  {
    margin-top: 2.986vw;
    margin-bottom: 2.986vw;
}

#project-type,
#request-email   {
    padding-right: 1vw;
}

.page-title,
.bio,
.contact {
    margin-top: 4.167vw;
    margin-bottom: 4.167vw;
}

.intro,
.privacy   {
    margin-top: 4.167vw;
    margin-bottom: 9.722vw;
}

.page-title,
.intro,
.contact,
.bio,
.privacy,
header,
footer  {
    margin-left: 4.583vw;
    margin-right: 4.583vw;
}

ul  {
    padding: 0;
}

li {
    padding-bottom: 0.325vw;
}

.case-studies  {
    margin: 0 7.5vw 9.722vw 7.5vw;
    padding: 5vw 4.75vw 4.75vw 4.75vw;
}

#contact    {
    margin: 9.722vw 7.5vw 9.722vw 7.5vw;
    padding: 5vw 4.75vw 4.75vw 4.75vw;
}

#overlap    {
    margin: -8.5vw 0 4.167vw 0;
}

h4  {
    padding-bottom: .764vw;
}

#request    {
    margin-top: 2.986vw;
}

.volunteer-2,
.edu-2  {
    margin-top: 0.5vw;
    margin-bottom: 1vw;
}



/* TYPE STYLES */

h1 {
    font-family: orpheuspro, serif;
    font-weight: 400;
    font-size: 6vw;
    line-height: 100%;
    text-align: right;
}

h2 {
    font-family: orpheuspro, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 5vw;
    line-height: 110%;
}

.para-lg,
.hover-title,
.para-lg-underline,
.para-lg-mobile-underline,
h3 {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 400;
    font-size: 2vw;
    line-height: 130%;
    text-transform: uppercase;
}

h4   {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 400;
    color: #006EDC;
    font-size: 1.25vw;
    line-height: 100%;
    text-decoration: none;
    text-transform: uppercase;
}

.para-sm,
.sideways,
a   {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 400;
    color: #006EDC;
    font-size: 1.25vw;
    line-height: 100%;
    text-decoration: none;
    text-transform: uppercase;
}

.priv-list-item,
p   {
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 300;
    font-size: 1.6vw;
    line-height: 130%;
}

.caption,
figcaption {
    font-family: aktiv-grotesk, sans-serif;
    font-size: 1.25rem;
}

.caption    {
    text-transform: none;
}

.skill    {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    width: fit-content;
    padding: .2vw 0.7vw .2vw 0.7vw;
    border-radius: 3px;
    color: #F6F4F2;
    background-color: #006EDC;
}

.np {
    padding: 0;
}



/* INDEX SPECIFIC STYLES */

.case-studies {
    background-color: #FDFDFD;
}

.work-line {
    height: 1px;
    background-color: #006EDC;
    margin: .25vw 0 1.625vw 0;
}

#project-type,
#request-email   {
    padding-left: 1vw;
}



/* ABOUT SPECIFIC STYLES */

.portrait  {
    height: 35.972vw;
    width: auto;
}

.job-info-1 {
    margin-top: 1vw;
    margin-bottom: 2vw;
}

.job-info-2 {
    margin-top: 0.75vw;
    margin-bottom: 1vw;
}

.job-desc   {
    margin-bottom: 3vw;
}

.skills-header    {
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.skills {
    margin-bottom: 5vw;
}

.vol-experience,
.education {
    margin-bottom: 5vw;
}



/* PRIVACY SPECIFIC STYLES */

.privacy-list   {
    padding-left: 4.167vw;
}

.priv-list-item   {
    list-style-type: circle;
    padding-left: .5vw;
}

.privacy-copy   {
    width: 52.569vw;
    padding-left: 7.5vw;
}






/* INTERACTIVE STYLES & SPECIAL EFFECTS */



/* HOVER.CSS */

.hover-underline, .para-lg-underline, .para-lg-mobile-underline, .para-sm-underline {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    padding-bottom: 0.25vw;
  }

.hover-underline:before, .para-lg-underline:before, .para-lg-mobile-underline:before, .para-sm-underline:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #006EDC;
    height: 1px;
    transition-property: left, right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }

.hover-underline:hover:before, .hover-underline:focus:before, .hover-underline:active:before, .para-lg-underline:hover:before, .para-lg-underline:focus:before, .para-lg-underline:active:before, .para-sm-underline:hover:before, .para-sm-underline:focus:before, .para-sm-underline:active:before, .para-lg-mobile-underline:hover:before, .para-lg-mobile-underline:focus:before, .para-lg-mobile-underline:active:before {
    left: 0;
    right: 0;
  }



/* COLLAPSIBLE SECTIONS */

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #F6F4F2;
    color: #006EDC;
    cursor: pointer;
    /* padding: 18px; */
    margin-top: 4.167vw;
    margin-bottom: 4.167vw;
    padding-left: 12.1vw;
    padding-right: 11.5vw;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-family: orpheuspro, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 5vw;
    line-height: 110%;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #F6F4F2;
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding-left: 12.1vw;
    padding-right: 11.5vw;
    background-color: #F6F4F2;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .collapsible:after {
    content: url("/images/arrow-down.svg") / "Open";
    font-size: 2vw;
    font-style: normal;
    color: #006EDC;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: url("/images/arrow-up.svg") / "Up";
  }



@media only screen and (max-width: 1240px) {
    .skill    {
        font-size: 0.925rem;
    }
} 

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

    .logo   {
        width: 75%;
    }

    .caption,
    figcaption {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 1100px) {
    .skill    {
        font-size: 0.875rem;
    }
} 

@media only screen and (max-width: 1000px) {
    .skill    {
        font-size: 0.75rem;
        padding: .3vw 0.8vw .3vw 0.8vw;
    }
}

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

    /* GLOBAL STYLES */

    .logo   {
        width: 80%;
    }

    .sideways   {
        margin: -2.6vw 0 0 -0.75vw;
        transform: rotate(-90deg);
        text-align: center;
    }

    #side-year  {
        margin: -0.25vw 0 0 -1.7vw;
        transform: rotate(-90deg);
        text-align: center;
    }
    
    /* TYPE STYLES */

    .para-lg,
    .hover-title,
    .para-lg-underline,
    .para-lg-mobile-underline,
    h3 {
        font-family: aktiv-grotesk, sans-serif;
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 130%;
        text-transform: uppercase;
    }
        
    .para-sm,
    h4,
    a   {
        font-size: 1rem;
    }

    .sideways   {
        font-size: .86rem;
    }

    .priv-list-item,
    p   {
        font-family: aktiv-grotesk, sans-serif;
        font-weight: 300;
        font-size: 1rem;
    }

    .caption,
    figcaption {
        font-size: 0.875rem;
    }

    .skill    {
        padding: .4vw 0.9vw .4vw 0.9vw;
    }



    /* MARGINS & PADDING */

    .page-title,
    .intro,
    .contact,
    .bio,
    .privacy,
    header,
    footer  {
        margin-left: 3.778vw;
        margin-right: 3.778vw;
    }

    .bio    {
        margin-top: 4.778vw;
        margin-bottom: 6.667vw;
    }

    .case-studies  {
        margin: 0 7.5vw 9.722vw 7.5vw;
        padding: 5vw 4.167vw 4.167vw 4.75vw;
    }

    #overlap    {
        margin: -8.5vw 0 4.167vw 0;
    }

    h4  {
        padding-bottom: .764vw;
    }

}



@media only screen and (max-width: 849px) {
    
    /* TYPE STYLES */

    .sideways   {
        font-size: .8rem;
    }
}


@media only screen and (max-width: 800px)   {
    .logo   {
        width: 100%;
    }
    
    .sideways   {
        font-size: .75rem;
    }

    .para-lg,
    .hover-title,
    .para-lg-underline,
    .para-lg-mobile-underline,
    h3 {
        font-size: 1.23rem;
    }

    .tech-skills,
    .soft-skills    {
        margin-top: 2vw;
        margin-bottom: 3vw;
    }

    .caption,
    figcaption {
        font-size: 0.75rem;
    }
}


@media only screen and (max-width: 754px)   {
    .sideways   {
        font-size: .725rem;
    }

}

@media only screen and (max-width: 759px)   {
    .sideways   {
        font-size: .725rem;
    }

    #credit    {
        display: none;
    }

}


@media only screen and (max-width: 750px) {
    
    /* TYPE STYLES */

    .para-lg,
    .hover-title,
    .para-lg-underline,
    .para-lg-mobile-underline,
    h3 {
        font-size: 1.1rem;
    }

    .skill    {
        padding: .5vw 1vw .5vw 1vw;
    }

    /* INDEX SPECIFIC STYLES */

    .para-sm,
    h4,
    a   {
        font-size: .75rem;
    }
}

@media only screen and (max-width: 732px)   {
    .sideways   {
        font-size: .7rem;
    }
}

@media only screen and (max-width: 710px)   {
    .sideways   {
        font-size: .69rem;
    }
}

@media only screen and (max-width: 701px)   {
    .sideways   {
        font-size: .68rem;
    }
}

@media only screen and (max-width: 693px)   {
    .sideways   {
        font-size: .67rem;
    }
}

@media only screen and (max-width: 684px)   {
    .sideways   {
        font-size: .66rem;
    }

    .caption,
    figcaption {
        font-size: 0.675rem;
    }
}

@media only screen and (max-width: 675px)   {
    .sideways   {
        font-size: .65rem;
    }
}

@media only screen and (max-width: 667px)   {
    .sideways   {
        font-size: .64rem;
    }
}

@media only screen and (max-width: 660px)   {
    .sideways   {
        font-size: .6rem;
    }

    .para-sm,
    .para-sm-underline    {
        font-size: .725rem;
    }
}

@media only screen and (max-width: 650px)   {
    .para-lg    {
        font-size: 1rem;
    }

    .skill    {
        padding: .6vw 1.1vw .6vw 1.1vw;
    }
}

@media only screen and (max-width: 638px)   {    
    .para-sm,
    .para-sm-underline    {
        font-size: .675rem;
    }
}

@media only screen and (max-width: 623px)   {
    .sideways   {
        font-size: .5rem;
    }
}

@media only screen and (max-width: 595px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .625rem;
    }
}

@media only screen and (max-width: 558px)   {
    .tech-skills   {
        margin-top: 7vw;
        margin-bottom: 7vw;
    }

    .soft-skills    {
        margin-bottom: 9vw;
    }
}

@media only screen and (max-width: 553px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .6rem;
    }
}

@media only screen and (max-width: 537px)   {
    .sideways   {
        display: none;
    }
}

@media only screen and (max-width: 531px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .59rem;
    }
}

@media only screen and (max-width: 522px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .58rem;
    }

    .photo  {
        display: none;
    }
}

@media only screen and (max-width: 514px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .57rem;
    }
}

@media only screen and (max-width: 505px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .56rem;
    }
}

@media only screen and (max-width: 481px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .6rem;
    }

    h1  {
        font-size: 6.4vw;
    }

    h2  {
        font-size: 5.5vw;
    }
}

@media only screen and (max-width: 460px)   {
    h1    {
        font-size: 7.011vw;
    }
}

@media only screen and (max-width: 458px)   {
    .logo   {
        width: 6vw;
    }
    
    .para-sm,
    .para-sm-underline    {
        font-size: .575rem;
    }
}

@media only screen and (max-width: 447px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .525rem;
    }
}

@media only screen and (max-width: 424px)   {
    .para-sm,
    .para-sm-underline    {
        font-size: .5rem;
    }
}

@media only screen and (max-width: 413px)   {
    #project-type    {
        display: none;
    }
}