.modules-wrapper,
.modules-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.modules-wrapper {
    overflow: hidden;
}

/* General Module Settings */
.modules-wrapper .modules {
    display: table;
    overflow: hidden;
    margin: 0 0 0 -.5%;
    position: relative;
    table-layout: fixed;
    width: 101%;
}

.modules-wrapper .module {
    background-repeat: no-repeat;
    background-size: cover;
    display: table-cell;
    height: 100%;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

    .modules-wrapper .module img {
        display: none;
    }

    .modules-wrapper .module .mobile-image {
        display: inline-block;
    }

    @media screen and (min-width: 768px) {
        .modules-wrapper .module img {
            display: inline-block;
        }

        .modules-wrapper .module img.mobile-image {
            display: none;
        }
    }

    .modules-wrapper .module .fill-image {
        display: block;
        margin: -1px;
        width: 100%;
    }

    .modules-wrapper .module .module-video {
        background-image: url( '../images/icn-video-play.svg' );
        background-position: center;
        background-repeat: no-repeat;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .modules-wrapper .module iframe,
    .modules-wrapper .module .wistia_responsive_padding {
        background-color: #000;
        display: none;
        height: 100%;
        padding: 0;
        width: 100%;
    }

.module-text-int {
    margin: 0 auto;
    padding: 4em 2em;
}

    .module h1 {
        color: inherit;
        direction: ltr;
        font-size: 4em;
        font-weight: 900;
        letter-spacing: .1em;
        line-height: 1;
        padding: 1em 0;
        text-transform: uppercase;
    }

        .page-template-template-aluminum_module-archive .module-text-int h1 {
            font-size: 6em;
            padding: 0;
            transition: all .35s ease-in-out;
        }

        .page-template-template-aluminum_module-archive .module:hover h1 {
            color: #323232;
        }

    .module-text-int h2 {
        color: inherit;
        direction: ltr;
        font-size: 2em;
        font-weight: 300;
        letter-spacing: .025em;
        line-height: 1.3;
        padding: .5em 0;
        text-transform: uppercase;
    }

        .page-template-template-aluminum_module-archive .module-text-int h2 {
            font-size: 2.2em;
        }

    .module-text-int h3 {
        direction: ltr;
        font-size: 1.8em;
        font-weight: 300;
        letter-spacing: .025em;
        padding: .5em 0;
        text-transform: uppercase;
    }

    .module-text-int p {
        direction: ltr;
        font-size: 1.4em;
        margin: 0 auto;
        padding: 1.111111em 0 1.111111em;
        max-width: 44.44444em;
    }

        .page-template-template-aluminum_module-archive .module-text-int p {
            font-size: 1.3em;
            line-height: 1.3;
        }

    .module-text-int .inline-image-with-margin {
        margin: 0 0 4em;
    }

    .module-text-int strong {
        font-weight: 900;
    }

.project-title {
    background-color: rgba(0, 0, 0, .5);
    /*bottom: 1.5em;*/
    bottom: 1em;
    color: #fff;
    /*font-size: 2.4em;*/
    font-size: 1.2em;
    /*left: 1.5em;*/
    left: 1em;
    letter-spacing: .075em;
    padding: .5em 1em;
    position: absolute;
    text-transform: uppercase;
    transition: all .35s ease-in-out;
    z-index: 10;
}

    .project-title h3 {
        font-weight: 900;
    }

    .module:hover .project-title {
        background-color: #ff484a;
    }

.decal-right, 
.decal-left {
    left: 50%;
    margin: 0 0 0 -2em;
    position: absolute;
    top: 100%;
}

@media screen and (max-width: 639px) {
    .decal-right, 
    .decal-left {
        border-bottom: 0 solid transparent;
        border-left: 2em solid transparent;
        border-right: 2em solid transparent;
        border-top-style: solid;
        border-top-width: 2em;
        border-bottom-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
    }
}

@media screen and (min-width: 640px) {
    .module-text-int {
        padding: 4em 6em;
    }

        .module h1 {
            font-size: 6em;
        }

        .module-text-int h2 {
            font-size: 2.4em;
        }

        .module-text-int h3 {
            font-size: 2em;
        }

    .project-title {
        font-size: 1.6em;
    }

    .decal-right, 
    .decal-left {
        margin: -2em 0 0;
        top: 50%;
    }

    .decal-right {
        border-bottom: 2em solid transparent !important;
        border-right: 0 solid transparent !important;
        border-top: 2em solid transparent !important;
        border-left-style: solid;
        border-left-width: 2em;
        left: auto;
        right: -2em;
    }

    .decal-left {
        border-bottom: 2em solid transparent !important;
        border-left: 0 solid transparent !important;
        border-top: 2em solid transparent !important;
        border-right-style: solid;
        border-right-width: 2em;
        left: -2em;
    }
}

@media screen and (min-width: 768px) {
    .module h1 {
        font-size: 8em;
    }

    .module-text-int h2 {
        font-size: 2.8em;
    }

    .module-text-int h3 {
        font-size: 2.4em;
    }

    .module-text-int p {
        font-size: 1.6em;
    }

    .project-title {
        bottom: 1.5em;
        font-size: 1.8em;
        left: 1.5em;
    }
}

@media screen and (min-width: 1024px) {
    .module-text-int {
        padding: 7.5em 10em;
    }

        .module h1 {
            font-size: 10em;
        }

        .module-text-int h2 {
            font-size: 2.8em;
        }

        .module-text-int h3 {
            font-size: 2.4em;
        }

        .module-text-int p {
            font-size: 1.8em;
        }

    .project-title {
        font-size: 2.4em;
    }
}

@media screen and (min-width: 1280px) {
    .module-text-int {
        padding: 10em 14em;
    }

        .module h1 {
            font-size: 12em;
        }

        .module-text-int h2 {
            font-size: 3.4em;
        }

        .module-text-int h3 {
            font-size: 2.8em;
        }
}

/* Work Archive Fonts */
@media screen and (min-width: 410px) {
    .page-template-template-aluminum_module-archive .module-text-int h1 {
        font-size: 7em;
    }
    
    .page-template-template-aluminum_module-archive .module-text-int h2 {
        font-size: 2.6em;
    }
    
    .page-template-template-aluminum_module-archive .module-text-int p {
        font-size: 1.4em;
    }
}

@media screen and (min-width: 600px) and (max-width:800px), (min-width: 900px) {
    .page-template-template-aluminum_module-archive .module-text-int h2 {
        font-size: 3.4em;
    }

    .page-template-template-aluminum_module-archive .module-text-int p {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 1024px) {
    .page-template-template-aluminum_module-archive .module-text-int h1 {
        font-size: 8em;
    }

    .page-template-template-aluminum_module-archive .module-text-int p {
        font-size: 1.8em;
        line-height: 1.4;
    }
}

/* Module 0 */
.modules-0 .module {
    width: 100%;
}

/* Module 1 */
.modules-1 {
    display: block;
}

.modules-1 .module {
    display: block;
    width: 100%;
}

@media screen and (min-width: 640px) {
    .modules-1 {
        display: table;
    }

    .modules-1 .module {
        display: table-cell;
        width: 50%;
    }
}

/* Module 2 */
.modules-2 {
    display: block;
}

.modules-2 .module {
    display: block;
    width: 100%;
}

@media screen and (min-width: 640px) {
    .modules-2 {
        display: table;
    }

    .modules-2 .module {
        display: table-cell;
        width: 33.33333%;
    }
}

/* Module 3 */
.modules-3 .module {
    width: 100%;
}

    .modules-3 .module {
        float: left;
        width: 50%;
    }

@media screen and (min-width: 520px) {
    .modules-3 {
        display: block;
    }

    .modules-3 .module {
        display: block;
        float: left;
        width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .modules-3 {
        display: table;
    }

    .modules-3 .module {
        display: table-cell;
        float: none;
        width: 25%;
    }
}

/* Grid Layout - Module 3 - 4 columns */
.modules-wrapper.grid .modules-3 .module:nth-child(2),
.modules-wrapper.grid .modules-3 .module:nth-child(3) {
    background-color: #f3f3f4;
}

@media screen and (min-width: 768px) {
    .modules-wrapper.grid .modules-3 {
        display: block;
    }

    .modules-wrapper.grid .modules-3 .module {
        display: block;
        float: left;
        width: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .modules-wrapper.grid .modules-3 .module-text-int {
        padding: 2em;
    }

    .modules-wrapper.grid .modules-3 .module:nth-child(2),
    .modules-wrapper.grid .modules-3 .module:nth-child(3) {
        background-color: #fff;
    }

    .modules-wrapper.grid .modules-3:nth-child(odd) .module:nth-child(even) {
        background-color: #f3f3f4;
    }

    .modules-wrapper.grid .modules-3:nth-child(even) .module:nth-child(odd) {
        background-color: #f3f3f4;
    }

    .modules-wrapper.grid .modules-3 {
        display: table;
    }

    .modules-wrapper.grid .modules-3 .module {
        display: table-cell;
        float: none;
        width: 25%;
    }
}

/* Module 4 */
.modules-4 .module:first-of-type {
    width: 66.66666667%;
}

.modules-4 .module:nth-last-child(1) {
    width: 33.33333333%;
}


/* Module 5 */
.modules-5 .module:first-of-type {
    width: 33.33333333%;
}

.modules-5 .module:nth-last-child(1) {
    width: 66.66666667%;
}


/* Archive Modules */
.modules-wrapper .modules-6,
.modules-wrapper .modules-7,
.modules-wrapper .modules-8,
.modules-wrapper .modules-9,
.modules-wrapper .modules-10,
.modules-wrapper .modules-11 {
    display: block;
    margin: 0 0 -2px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.modules-wrapper .modules-6 .module,
.modules-wrapper .modules-7 .module,
.modules-wrapper .modules-8 .module,
.modules-wrapper .modules-9 .module,
.modules-wrapper .modules-10 .module,
.modules-wrapper .modules-11 .module {
    display: block;
    height: 0;
    overflow: hidden;
    position: relative;
}

.modules-wrapper .modules-6 .module-int,
.modules-wrapper .modules-7 .module-int,
.modules-wrapper .modules-8 .module-int,
.modules-wrapper .modules-9 .module-int,
.modules-wrapper .modules-10 .module-int,
.modules-wrapper .modules-11 .module-int {
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.modules-wrapper .modules-6 .module-text-int,
.modules-wrapper .modules-7 .module-text-int,
.modules-wrapper .modules-8 .module-text-int,
.modules-wrapper .modules-9 .module-text-int,
.modules-wrapper .modules-10 .module-text-int,
.modules-wrapper .modules-11 .module-text-int {
    bottom: 0;
    left: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    /*padding: 4em;*/
}

    .modules-wrapper .modules-6 .module-text-int .module-text-int-int,
    .modules-wrapper .modules-7 .module-text-int .module-text-int-int,
    .modules-wrapper .modules-8 .module-text-int .module-text-int-int,
    .modules-wrapper .modules-9 .module-text-int .module-text-int-int,
    .modules-wrapper .modules-10 .module-text-int .module-text-int-int,
    .modules-wrapper .modules-11 .module-text-int .module-text-int-int {
        display: table;
        height: 100%;
        width: 100%;
    }

        .modules-wrapper .modules-6 .module-text-int .module-text-int-int div,
        .modules-wrapper .modules-7 .module-text-int .module-text-int-int div,
        .modules-wrapper .modules-8 .module-text-int .module-text-int-int div,
        .modules-wrapper .modules-9 .module-text-int .module-text-int-int div,
        .modules-wrapper .modules-10 .module-text-int .module-text-int-int div,
        .modules-wrapper .modules-11 .module-text-int .module-text-int-int div  {
            display: table-cell;
            height: 100%;
            /*padding: 4em;*/
            padding: 1.5em;
            width: 100%;
        }

    .modules-wrapper .modules-6 .module-text-int h3,
    .modules-wrapper .modules-7 .module-text-int h3,
    .modules-wrapper .modules-8 .module-text-int h3,
    .modules-wrapper .modules-9 .module-text-int h3,
    .modules-wrapper .modules-10 .module-text-int h3,
    .modules-wrapper .modules-11 .module-text-int h3 {
        color: #fff;
        font-weight: 900;
    } 

    .modules-wrapper .modules-6 .module-text-int h3,
    .modules-wrapper .modules-7 .module-text-int h3,
    .modules-wrapper .modules-8 .module-text-int h3,
    .modules-wrapper .modules-9 .module-text-int h3,
    .modules-wrapper .modules-10 .module-text-int h3,
    .modules-wrapper .modules-11 .module-text-int h3 {
        color: #fff;
        font-weight: 900;
    } 

/*.modules-wrapper .modules-6 .module img,
.modules-wrapper .modules-7 .module img,
.modules-wrapper .modules-8 .module img,
.modules-wrapper .modules-9 .module img,
.modules-wrapper .modules-10 .module img,
.modules-wrapper .modules-11 .module img {
    height: auto;
    min-height: 100%;
    min-width: 100%;
    width: auto;
}*/

/* Module 6 */
.modules-wrapper .modules-6 .module-block img {
    display: none;
}

.modules-6 .module-block:first-of-type {
    float: left;
    width: 50%;
}

    .modules-6 .module-block:first-of-type .module {
        padding: 0 0 200%;
        width: 100%;
    }

.modules-6 .module-block:nth-child(2) {
    float: left;
    width: 50%;
}

    .modules-6 .module-block:nth-child(2) .module {
        padding: 0 0 100%;
        width: 100%;
    }

.modules-6 .module-block:nth-child(3) {
    width: 100%;
}

    .modules-6 .module-block:nth-child(3) .module {
        float: left;
        padding: 0 0 50%;
        width: 50%;
    }

@media screen and (min-width: 640px) {
    .modules-6 .module-block:first-of-type {
        width: 33.3333%;
    }

    .modules-6 .module-block:nth-child(2) {
        width: 33.3333%;
    }

    .modules-6 .module-block:nth-child(3) {
        float: left;
        width: 33.333%;
    }

        .modules-6 .module-block:nth-child(3) .module {
            float: none;
            padding: 0 0 100%;
            width: 100%;
        }
}

@media screen and (min-width: 1100px) {
    .modules-6 .module-block:first-of-type {
        width: 25%;
    }

    .modules-6 .module-block:nth-child(2) {
        width: 75%;
    }

        .modules-6 .module-block:nth-child(2) .module {
            float: left;
            padding: 0 0 33.3333333%;
            width: 33.3333333%;
        }

        .modules-6 .module-block:nth-child(2) .module:nth-last-child(1) {
            width: 66.6666667%;
        }

    .modules-6 .module-block:nth-child(3) {
        width: 75%;
    }

        .modules-6 .module-block:nth-child(3) .module {
            float: left;
            padding: 0 0 33.3333333%;
            width: 66.6666667%;
        }

        .modules-6 .module-block:nth-child(3) .module:nth-last-child(1) {
            width: 33.3333333%;
        }
}

/* Module 7 */
.modules-wrapper .modules-7 .module-block img {
    display: none;
}

.modules-7 {
    width: 100%;
}

    .modules-7 .module-block:first-of-type {
        float: left;
        width: 50%;
    }

        .modules-7 .module-block:first-of-type .module {
            padding: 0 0 100%;
            width: 100%;
        }

    .modules-7 .module-block:nth-child(2) {
        float: right;
        width: 50%;
    }

        .modules-7 .module-block:nth-child(2) .module {
            padding: 0 0 300%;
            width: 100%;
        }

    .modules-7 .module-block:last-of-type {
        float: left;
        width: 50%;
    }

        .modules-7 .module-block:last-of-type .module {
            padding: 0 0 100%;
            width: 100%;
        }

@media screen and (min-width: 640px) {
    .modules-7 .module-block:first-of-type {
        width: 66.6666667%;
    }

        .modules-7 .module-block:first-of-type .module {
            padding: 0 0 50%;
        }

    .modules-7 .module-block:nth-child(2) {
        width: 33.3333333%;
    }

        .modules-7 .module-block:nth-child(2) .module {
            padding: 0 0 200%;
        }

    .modules-7 .module-block:last-of-type {
        width: 66.6666667%;
    }

        .modules-7 .module-block:last-of-type .module {
            float: left;
            padding: 0 0 50%;
            width: 50%;
        }
}

@media screen and (min-width: 1100px) {
    .modules-7 .module-block:first-of-type {
        width: 75%;
    }

        .modules-7 .module-block:first-of-type .module {
            padding: 0 0 33.33333%;
        }

    .modules-7 .module-block:nth-child(2) {
        width: 25%;
    }

    .modules-7 .module-block:last-of-type {
        width: 75%;
    }

    .modules-7 .module-block:last-of-type .module {
        padding: 0 0 33.3333333%;
        width: 33.3333333%;
    }

    .modules-7 .module-block:last-of-type .module:nth-last-child(1) {
        width: 66.6666667%;
    }
}

/* Module 8 */
.modules-wrapper .modules-8 .module-block img {
    display: none;
}

.modules-8 .module-block:first-of-type .module {
    float: left;
    padding: 0 0 100%;
    width: 50%;
}

.modules-8 .module-block:last-of-type .module {
    float: left;
    padding: 0 0 50%;
    width: 50%;
}

.modules-8 .module-block:last-of-type .module:nth-child(1) {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .modules-8 .module-block:first-of-type,
    .modules-8 .module-block:last-of-type {
        float: left;
        width: 50%;
    }
}

/* Module 9 */
.modules-wrapper .modules-9 .module-block img {
    display: none;
}

.modules-9 .module-block:first-of-type .module {
    float: left;
    padding: 0 0 50%;
    width: 50%;
}

.modules-9 .module-block:first-of-type .module:nth-child(1) {
    width: 100%;
}

.modules-9 .module-block:last-of-type .module {
    float: left;
    padding: 0 0 100%;
    width: 50%;
}

@media screen and (min-width: 768px) {
    .modules-9 .module-block:first-of-type,
    .modules-9 .module-block:last-of-type {
        float: left;
        width: 50%;
    }

    /*.modules-9 .module-block img {
        display: block;
    }*/
}


/* Module 10 */
.modules-wrapper .modules-10 .module-block img {
    display: none;
}

.modules-10 .module-block:nth-child(1) .module {
    padding: 0 0 100%;
}

.modules-10 .module-block:nth-child(2) .module {
    padding: 0 0 50%;
}

@media screen and (min-width: 768px) {
    .modules-10 .module-block {
        float: left;
        width: 50%;
    }

        /*.modules-10 .module-block img {
            display: block;
        }*/
}


/* Module 11 */
.modules-wrapper .modules-11 .module-block img {
    display: none;
}

.modules-11 .module-block:first-of-type .module {
    padding: 0 0 50%;
}

.modules-11 .module-block:last-of-type .module {
    padding: 0 0 100%;
}

@media screen and (min-width: 768px) {
    .modules-11 .module-block {
        float: left;
        width: 50%;
    }

    /*.modules-11 .module-block img {
        display: block;
    }*/
}


/* Specific Customizations */
@media screen and (max-width: 639px) {
    #section-Elder-Video-Homepage {
        direction: rtl;
    }
}

@media screen and (min-width: 660px) {
    #section-nike-arrows-block-2,
    #section-joppa-naming,
    #section-modus-naming,
    #section-dimples-naming,
    #section-igor-naming,
    #section-hive-naming,
    #section-wink-naming,
    #section-goodlife-naming {
        direction: rtl;
    }
}