/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-Webkit-min-device-pixel-ratio: 3),
only screen and (-moz-min-device-pixel-ratio: 3),
only screen and (-o-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3)
{
    #home-section-1 .hero
    {
        background: url('/images/hero/2x/building_top.jpg') no-repeat center center;
    }

    #home-section-3 .hero
    {
        background: url('/images/hero/2x/chairs_table.jpg') no-repeat center center;
    }

    #home-section-5 .hero
    {
        background: url('/images/hero/2x/desk_coffee.jpg') no-repeat center top;
    }
    
    #purpose-section-1 .hero
    {
        background: url('/images/hero/2x/scotland.jpg') no-repeat center center;
    }

    #team-section-1 .hero
    {
        background: url('/images/hero/2x/puzzle_pieces.jpg') no-repeat center bottom;
    }

    .team-page .last-section .hero
    {
        background: url('/images/hero/2x/desk.jpg') no-repeat center 50%;
    }

    #methods-section-1 .hero
    {
        background: url('/images/hero/2x/pen_pad.jpg') no-repeat center center;
    }

    #contact-section-1 .hero
    {
        background: url('/images/hero/2x/desk_computer.jpg') no-repeat center 50%;
    }
}

/* Screen Size rules */

/********************************
*    LARGER THAN 1440px WIDE    *
********************************/

@media only screen and (min-width: 1441px)
{    
    *
    {
        
    }
}

/********************************
*   THINNER THAN 1280px WIDE    *      >> Methods page titles reduced
********************************/

@media only screen and (max-width: 1279px)
{
    .methods-page .section-image-container
    {
        top: 6px;
    }
    
    .methods-page .section.sub-section .section-copy-header .serif-font,
    .methods-page .section.sub-section .section-copy-header .sans-font
    {
        display: block;
    }
    
    *
    {
        
    }
}

/********************************
*    THINNER THAN 1024px WIDE   *   >> Menu item size
********************************/

@media only screen and (max-width: 1024px)
{
    #menu
    {
        width: calc(100% - 96px);
    }
    
    .menu-item
    {
        width: 140px;
    }
    
    .menu-item-header
    {
        font-size: 17pt;
    }
    
    .menu-item-copy
    {
        font-size: 10pt;
    }
    
    .section.right-align-offset .section-content
    {
        left: 13vw;
    }
    
    *
    {
        
    }
}

/********************************
*    THINNER THAN 955px WIDE   *   >> Methods/Team page reduced
********************************/

@media only screen and (max-width: 955px)
{
    .section.sub-section
    {
    padding-left: 0px;
    padding-right: 0px;
    }

    .section.sub-section.right-align-copy.has-section-image,
    .section.sub-section.left-align-copy.has-section-image
    {
        justify-content: center;
    }
    
    .section.sub-section .section-content
    {
        max-width: calc(100% - 126px - 126px);
        flex-flow: column nowrap;
    }
    
    .section.sub-section.right-align-copy .section-content
    {
        align-items: flex-end;
    }
    
    .section.sub-section.left-align-copy .section-content
    {
        align-items: flex-start;
    }
    
    .section.sub-section.right-align-copy .section-image-container,
    .section.sub-section.left-align-copy .section-image-container
    {
        margin: 0px;
        margin-bottom: 56px;
        order: -1;
        top: 0px;
    }
    
    .methods-page .section.sub-section .section-copy-header .serif-font,
    .methods-page .section.sub-section .section-copy-header .sans-font
    {
        display: inline-block;
    }
    
    *
    {
        
    }
}

/********************************
*    THINNER THAN 900px WIDE    *    >> Shorter menu, Menu item change
********************************/

@media only screen and (max-width: 900px)
{
    #menu
    {
        height: 122px;
        top: 0px;
    }

    #menu-pane.menu-active #menu
    {
        transform: translate(0,122px);
    }

    #menu-background
    {
        height: 122px;
    }

    #menu-pane.menu-active #menu-background
    {
        transform: translate(0, 122px);
    }
    
    .menu-item
    {
        width: auto;
        padding-top: 19px;
    }
    
    .menu-item-copy-container
    {
        position: absolute;
        width: 100%;
        left: 0px;
        top: 0px;
    }
    
    .menu-item-copy-container .main
    {
        display: none;
    }
    
    .menu-item-copy-container .alternate
    {
        display: block;
    }
    
    .menu-item-copy
    {
        width: auto;
        font-size: 10.5pt;
    }
    
    .menu-item-line, .menu-item-copy-arrow
    {
        display: none;
    }

    *
    {
        
    }
}

/********************************
*    THINNER THAN 800px WIDE    *    >> Center section content and expand, hero adjustments
********************************/

@media only screen and (max-width: 800px)
{
    /* Remove left padding, allowing sections to center their content */
    .section.has-svg-background:not(.sub-section),
    .section:not(.sub-section),
    #purpose-section-3, 
    #purpose-section-4, 
    #contact-section-3
    {
        justify-content: center;
        padding-left: 0px;
    }

    /* Center horizontal line of .section-1 heroes */

    .section-1,
    #home-section-1,
    #purpose-section-1,
    #methods-section-1,
    #team-section-1,
    #contact-section-1
    {
        padding-left: calc((100vw - 250px)/2);
    }
    
    .section.sub-section
    {
        padding: 140px 0px;
    }

    .section-1 .section-content
    {
        max-width: none;
        width: auto;
    }

    .section-1 .section-copy-container
    {
        width: 100%;
    }

    .section.right-align-offset .section-content
    {
        left: auto;
    }

    .section.left-align-offset .section-content,
    #methods-section-1 .section-content
    {
        left: auto;
    }

    #purpose-section-1.section.right-align-offset .section-content
    {
        left: auto;
    }
    
    .section-content
    {
        max-width: calc(100% - 126px - 126px);
    }
    
    .section-copy
    {
        width: calc(100% - 20px);
    }
    
    #contact-section-2
    {
        height: auto;
        padding-top: calc(13.125vw + 50px);
        padding-bottom: calc(13.125vw + 50px);
    }
    
    #contact-section-2 .section-copy > div:first-child
    {
        max-width: calc(100vw - 126px - 126px);
    }
    
    #contact-section-3 .section-copy
    {
        /* because input boxes can extend to edge */
    }

    #contact-section-3 .section-copy > div:first-child
    {
        max-width: calc(100% - 20px - 126px);
    }

    /********************************
    *          HERO IMAGES          *
    ********************************/

    #home-section-1 .hero
    {
        background-position-x: 29%;
    }

    #home-section-1 .section-background-mask
    {
        opacity: .85;
    }

    #home-section-3 .hero
    {
        transform: rotateY(180deg);
    }

    #home-section-3 .section-background-mask
    {
        opacity: .8;
    }

    #home-section-5 .hero
    {
        background-position: 66% top;
    }

    #home-section-5 .section-background-mask
    {
        
    }

    #home-section-5 .section-copy br
    {
        display: none;
    }

    #purpose-section-1 .hero
    {
        background-position: 55% center;
    }

    #purpose-section-3 .hero
    {
        
    }

    #purpose-section-4
    {
        
    }

    #purpose-section-4 .variable-background-height
    {
        
    }

    #purpose-section-4 .hero
    {
        
    }

    #methods-section-1 .section-background-mask
    {
        
    }

    #team-section-1 .hero
    {
        
    }

    #team-section-1 .section-background-mask
    {
        
    }

    .team-page .last-section .hero
    {
        
    }

    .team-page .last-section .hero .section-background-mask
    {
        
    }

    #methods-section-1 .hero
    {
        background-position-x: 75%;
    }

    #methods-section-1 .section-background-mask
    {
        opacity: .8;
    }

    #contact-section-1 .hero
    {
        
    }

    #contact-section-1 .section-background-mask
    {
        
    }

    #contact-section-1.left-align-offset .section-content
    {
        
    }
}

/********************************
*    THINNER THAN 700px WIDE    *
********************************/

@media only screen and (max-width: 700px)
{
    .menu-item-header
    {
        font-size: 14pt;
    }
    
    .contact-info-item
    {
        flex-basis: 100%;
    }
    
    .contact-info-item:last-child .label
    {
        display: none;
    }

    #contact-section-2 .section-copy
    {
        max-width: calc(100% - 20px);
        width: calc(100% - 20px);
    }

    *
    {
        
    }
}

/********************************
*    THINNER THAN 600px WIDE    *    >>>> PORTRAIT MENU STARTS, SCREEN MARGIN REDUCED
********************************/

@media only screen and (max-width: 600px)
{
    /* PORTRAIT MENU */
    #menu-button
    {
        padding: 30px;
    }
    
    #menu-pane
    {
        width: 200px;
        height: 100vh;
        left: auto;
        right: 0px;
        background-color: #f9f9f9;
        transform: translate(250px,0);
    }
    

    .can-hover:not(.viewport-resizing) #menu-button:hover + #menu-pane:not(.menu-active)
    {
        transform: translate(250px,0);
    }

    #menu-pane.menu-active
    {
        transform: translate(0,0);
    }
    
    #menu-overlay
    {
        top: 0px;
        left: auto;
        right: 200vw;
        width: 200vw;
        /* height: 100vh; */
    }
    
    #menu-top
    {
        justify-content: flex-start;
        padding-left: 36px;
    }
    
    #menu-pane.menu-active #menu-overlay
    {
        left: auto;
        right: 0px;
    }

    #menu-background
    {
        height: 100%;
    }
    
    #header-logo
    {
        
    }
    
    body.menu-active #header-logo
    {
        opacity: 0;
        transition-duration: .5s;
    }
    
    #menu-logo
    {
    width: 47px;
    }
    
    #menu-logo .logo-name
    {
        display: none;
    }
    
    #menu
    {
        height: calc(100vh - 122px - 72px);
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: space-between;
        transform: none;
        bottom: auto;
        top: 122px;
        padding: 36px 0px;
        width: calc(100% - 72px);
    }

    #menu-pane.menu-active #menu
    {
        transform: none;
    }
    
    .menu-item
    {
        width: 150px;
    }

    #contact-menu-item
    {
        margin-bottom:24px;
    }
    
    .menu-item-header
    {
        font-size: 17pt;
    }
    
    *
    {
        
    }

    #header-logo
    {
        top: 16px;
        left: 16px;
    }
    
    #header-logo .logo-mark
    {
        height: auto;
        width: 28px;
    }
    
    #menu-button
    {
        padding: 16px;
        top: -5px;
    }
    
    #menu-button.menu-active
    {
        top: 12px;
    }
    
    /* HEROES */

    #home-section-1 .hero
    {
        background-position-y: 70%;
    }

    #home-section-3 .section-background-mask
    {
        opacity: .65;
    }

    #home-section-5 .hero
    {
        background-position-x: 85%
    }

    #home-section-5 .section-background-mask
    {
        opacity: .95;
    }

    #purpose-section-1 .hero
    {background-position: 43% 56%;}

    #purpose-section-1 .section-background-mask
    {
        opacity: .75;
    }
    
    #methods-section-1 .hero
    {background-position: 52% 32%;}

    #team-section-1 .hero
    {background-position: 52% 68%;}

    #contact-section-1 .hero
    {background-position: 74% 66%;}

    /* SECTION CONTENT */
    
    .section.breathing-room
    {
        padding-top: calc(13.125vw + 40px);
        padding-bottom: calc(13.125vw + 40px);
    }
    
    .section-1, #purpose-section-1, #methods-section-1, #team-section-1, #contact-section-1
    {
        padding: 0px 60px;
        min-height: 100vh;
        margin-bottom: 13.125vw;
    }

    #home-section-1
    {
        min-height: 600px;
    }
    
    .line
    {
        max-width: calc(100vw - 60px - 60px);
    }
    
    .section
    {
        
    }
    
    .section-content
    {
        max-width: calc(100% - 60px - 60px);
    }
    
    .section.sub-section .section-content
    {
        max-width: calc(100% - 60px - 60px);
    }
    
    .section-copy,
    .section-cta,
    #contact-form-submit,
    .section-copy .primary-color,
    .section-copy .primary-white-color
    {
        font-size: 12pt;
    }

    #contact-section-2 .section-copy
    {
        margin-left: 0px;
    }
    
    #contact-section-2 #contact-info-items .arrow
    {
        display: none;
    }
    
    #contact-section-2 .section-copy > div:first-child
    {
        max-width: calc(100vw - 60px - 60px);
        
    }
    
    #contact-section-3 .section-copy
    {
        /* because input boxes can extend to edge */
    }

    #contact-section-3 .section-copy > div:first-child
    {max-width: 100%;margin-left: 0px;}
    
    
    /* max image width/height == screen width minus margins */
    .section-image-container
    {
        max-width: calc(100vw - 60px - 60px);
        max-height: calc(100vw - 60px - 60px);
    }
    
    .svg-background-top
    {
        top: 5px;
    }
    
    .svg-background-bottom
    {
        bottom: 5px;
    }
    
    .section.has-svg-background:not(.sub-section)
    {
    }
}

/********************************
*    THINNER THAN 520px WIDE    *  >>> CONTACT FORM GOES TO ONE LINE
********************************/

@media only screen and (max-width: 520px)
{
    .contact-form-item
    {
        flex-basis: 100%;
    }
    
    #contact-section-2 .section-copy
    {
        width: 100%;
        max-width: 100%;
    }
    
}

/********************************
*    THINNER THAN 414px WIDE    *  >>> CONTENT TO EXTREME EDGES, no more margins, left align all
********************************/

@media only screen and (max-width: 413px)
{
    #home-copy-logo
    {
        display: none;
    }

    #home-section-1 .section-copy
    {
        margin-left: 0px;
        width: 100%;
    }
    
    #home-section-1 .section-copy > div
    {
    }

    #header-logo
    {
        opacity: 1;
        pointer-events: auto;
    }

    .section-1 .section-content
    {
        max-width: calc(100vw - 60px - 60px);
        width: 100%;
    }
    
    #home-section-1 .section-copy > div span
    {
        display: inline;
    }
    #home-section-1 .section-copy > div .primary-color
    {
        font-weight: 400;
    }
    
    #home-section-1 .section-copy > div br
    {
        display: none;
    }
    
    .section-copy,
    .section.sub-section.left-align-copy .section-copy,
    .section.sub-section.right-align-copy .section-copy
    {
        margin: 0px;
        width: 100%;
    }
    
    .section.sub-section.right-align-copy .section-copy-container
    {
        text-align: left;
        align-items: flex-start;
    }

    .line .svg-rtl
    {
        transform: rotateZ(180deg);
    }

    .section.sub-section.right-align-copy .section-content
    {
        align-items: flex-start;
    }

    .right-align-copy .section-image-container
    {
        transform: translate(-20px,0);
    }
    
    .email-cta .right-arrow svg
    {
        transform: rotateZ(0deg);
    }
    
    .email-cta .right-arrow
    {
        order: 0;
        margin-right: 16px;
    }
    
    .email-cta .section-cta-copy
    {
        order: 1;
    }
    
    #contact-form
    {
        padding-bottom: 20vh;
    }
    
    #footer
    {
        height: 300px;
    }
    
    .footer-group
    {
        max-width: 240px;
    }
    
    *
    {
        
    }
}

/********************************
*    THINNER THAN 320px WIDE    *
********************************/

@media only screen and (max-width: 320px)
{
    /* FULL SCREEN PORTRAIT MENU */
    #menu-pane
    {
/*         width:100vw;
        transform: translate(100vw,0); */
    }
    
    *
    {
        
    }
}

/********************************
*    SHORTER THAN 500px HIGH    *    >>> Menu item disbursement
********************************/

@media only screen and (max-height: 500px)
{
    .menu-item-copy-container
    {
        display: none;
    }
    
    .menu-item
    {
        padding-top: 0px;
    }
}

/********************************
*    SHORTER THAN 414px HIGH    *    >>> Menu item disbursement smaller
********************************/

@media only screen and (max-width: 600px) and (max-height: 414px)
{
    /* Smaller height but smaller width than 600 (SO MENU IS ON RIGHT) */
    
    #menu-button
    {
/*         padding: 26px; */
    }

    #menu-pane
    {
/*         height: 80px; */
    }

    #menu-top
    {
        height: 80px;
    }
    
    #menu-logo
    {
        justify-content: flex-start;
    }
    
    #menu-logo .logo-mark
    {
        width: 40px;
    }

    #menu-pane.menu-active #menu
    {
/*         transform: translate(0,64px); */
    }
    
    #menu
    {
        padding: 16px 0px;
        top: 80px;
/*         height: 80px; */
    }
    
    #menu-pane.menu-active #menu-background
    {
        transform: translate(0, 80px);
    }
    
    .menu-item-header
    {
        font-size: 13pt;
    }
    
    #contact-menu-item
    {
        margin-bottom: 0px;
    }
}

@media only screen and (min-width: 601px) and (max-height: 414px)
{
    /* Smaller height but smaller width than 600 (SO MENU IS ON RIGHT) */
    
    #menu-button
    {
        padding: 26px;
    }

    #menu-pane
    {
        height: 80px;
    }

    #menu-top
    {
        height: 80px;
    }
    
    #menu-logo .logo-mark
    {
        width: 40px;
    }

    #menu-pane.menu-active #menu
    {
        transform: translate(0,64px);
    }
    
    #menu
    {
        padding: 16px 0px;
        /* top: 80px; */
        height: 80px;
    }
    
    #menu-pane.menu-active #menu-background
    {
        transform: translate(0, 80px);
    }
    
    .menu-item-header
    {
        font-size: 13pt;
    }
    
    #contact-menu-item
    {
        margin-bottom: 0px;
    }
}