@dark: #111111;
@light:#c2c2c2;
@red:#b22227;

@rockwell: "Conv_ROCK";
@opensans:"Open Sans", "Trebuchet MS", sans-serif;
@arvo: "Arvo","Courier New",Georgia,serif;
@transparent: rgba(0,0,0,0.75);

.gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bd0019+0,8f0011+100 */
    background: #bd0019; /* Old browsers */
    background: -moz-linear-gradient(top, #bd0019 0%, #8f0011 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #bd0019 0%,#8f0011 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #bd0019 0%,#8f0011 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd0019', endColorstr='#8f0011',GradientType=0 ); /* IE6-9 */
}
.mobile-nav, .mobile, .mobile-cta-item{ display: none; }

input[type="submit"], input {
    -webkit-appearance: none;
    border-radius: 0;
}

@media screen and (max-width: 1500px) {
    main section.contractors div.content{
        padding: 0 2em;
    }
}

@media screen and (max-width: 1216px) {
    header nav ul li{
        margin-left: 7px;
        &:first{ margin: 0; }
    }
    body.secondary main div.container, div.container{
        width: 1000px;
    }
}
@media screen and (max-width: 1180px) {
    main section.contractors div.content{
        padding: 0 0;
    }
}
@media screen and (max-width: 1060px) {
    main section.contractors div.container {
        width: 100%;
        top: 0; left: 0; bottom: 0; right: 0;
        transform: translateY(0);
        height: auto;
        box-sizing: border-box;

        div.content{
            padding: 0 7em;
        }
    }
}


@media screen and (max-width: 1016px) {
    div.contact-page div.team-list ul li{
        width: 100%;
    }    
    div.banner, #slider{
        height: 400px;
        
        h1, div.items h2{
            font-size: 3.25em;
        }
        
        .fader-paging{
            left:10px;
            transform: initial;
        }
    }
    div.testimonial{
        width: 350px;
    }
    body.secondary main div.container, div.container{
        width: 768px;
    }
    body.secondary main section.gallery .gal-image{
        width: 33%;
    }
    main div#call-to-actions div.slick{
        height: 300px;
        div.slick-list div.slick-track div.item div.sliderContent{
            display: none;
        }
    }
    div.contact-page div.contact-left {
        width: 50%;
        float: none;
        margin: auto;
    }
    div.contact-page div.contact-right {
        width: 100%;
        margin: 1em 0;
        float: none;
    }
    header{
        .mobile-nav{
            display: block;
            float: right;
            font-size: 3em;

            a{ 
                color: white; 
                line-height: 0.5em;
                display: block;
                padding: 0.35em 0.35em;
            }
        }
        nav{
            position: absolute;
            float: none;
            top: 125px;
            z-index: 9999;
            width: 100%;
            left: 0;
            right: 0;
            .gradient;

            max-height: 0;
            overflow: hidden;

            transition: max-height ease-in-out 0.5s;

            &.opened {
                max-height: 9999px;
            }

            ul {
                display: flex;
                flex-direction: column;

                li {
                    margin: 0;
                    border-bottom: 1px solid white;

                    a {
                        display: flex;
                        color: white;
                        text-decoration: none;
                        font-size: 1.125em;
                        align-items: center;
                        width: 100%;
                        max-width: 320px;
                        margin: auto;
                        padding: 0.25em;
                        font-size: 1.5em;

                        img{ margin-right: 1em; }
                    }
                }
            }
        }
    } 

    main section.call-to-actions {
        ul.table-of-contents li a {
            font-size: 2em;

            img {
                max-height: 90%;
                width: auto;
            }
        }
        div.table{
            height: 400px;
        }
    }

    main section.testimonials {
        div.quote-left, div.quote-right{
            width: 10%;

            span {
                font-size: 22em;
                height: 218px;
            }
        }
    }
}

@media screen and (max-width: 784px) {
    body.secondary main div.container, div.container{
        width: 640px;
    }
    body.secondary main section.gallery .gal-image{
        width: 50%;
    }
    main div#call-to-actions div.slick{
        height: 200px;
    }
    div.testimonial{
        width: 300px;
    }
    aside#social{ display: none; }
    main {
        section.testimonials {
            padding: 20px 0;
            div.quote-left, div.quote-right{
                width: 10%;

                span {
                    font-size: 9em;
                    height: 300px;
                }
            }        
        }
        section.contractors{
            height: 520px;
        }
        section.call-to-actions{
            div.table{
                height: auto;

                ul.table-of-contents{
                    width: 100%;

                    li{
                        height: auto;
                        margin-bottom: 1em;
                        a {
                            justify-content: center;
                            span{ text-align: center; }
                        }                
                        div.mobile-cta-item {
                            display: block;
                            height: 300px;

                            background-size: cover;
                            background-position: center center;
                            background-repeat: no-repeat;
                            position: relative;

                            a {
                                position: absolute;
                                bottom: 1em; right: 1em;
                                font-size: 1.125em;
                                padding: 0.25em 0.5em;
                                text-decoration: none;
                                text-transform: uppercase;
                            }
                        }
                        &.active {
                            .arrow{ display: none; }
                        }
                    }
                }
                div.body{ display: none; }
            }
        }
    }
}
@media screen and (max-width: 656px) {
    .mobile{ display: block; }
    body.secondary main div.container, div.container{
        width: 100%;
        max-width: 300px;
        min-width: 280px;
    }
    body.secondary main section.gallery .gal-image{
        width: 100%;
    }
    div.banner, #slider {
        height: 250px;
        h1{
            font-size: 2.5em;
        }
        div.items h2{
            font-size: 2.5em;
            bottom: 0;
        }
    }
    div.contact-page div.contact-left {
        width: 100%;
        float: none;
        margin: auto;
    }
    header {
        div.logo{
            width: 230px;
            img{ width: 100%; height: auto; }
        }
        .mobile-nav{
            font-size: 2.5em;
            a{
                padding: 0.35em 0.25em;
            }
        }
        nav{
            top: 110px;
        }
    }

    main{
        section.contractors div.content p {
            margin: 0;
        }
        section.call-to-actions { 
            ul.table-of-contents li a img {
                height: 80px;
            }
            div.table ul.table-of-contents li div.mobile-cta-item {
                height: 200px;
            }
        }
        section.contractors {
            div.container{
                max-width: 100%;

                div.content{
                    padding: 0;
                }
            }
            h2 {
                font-size: 2.5em;
                margin: 0;
            }
        }
        section.testimonials {
            text-align: center;
            padding: 1em;
            
            div.content {
                width: 100%;
            }
            div.quote-left, div.quote-right {
                display: none;
            }    
            h2{ 
                color: @red; 
                font-family: @rockwell; 
                text-transform: uppercase; 
                font-size: 2.5em; margin: 0; 
            }
        }
    }
    footer nav ul li {
        padding: 0.5em 0;
        display:block;
        text-align: center;
    }
    
    div#contractors-form form div.input{
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    div.banner, #slider {
        height: 175px;
    }
}