@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 */
}
.graydient{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+14,000000+73&0+14,0.65+73 */
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 14%, rgba(0,0,0,0.65) 73%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 14%,rgba(0,0,0,0.65) 73%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0) 14%,rgba(0,0,0,0.65) 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
}

.btn{
    background-color: @red;
    text-transform: uppercase;
    font-size: 1.2em;
    color: #FFF;
    text-decoration: none;
    padding: 10px 15px;
}

html,body {
    margin:0;
    padding:0;
}
body {
    font-family:@opensans;
    font-size:100%;
}

div.container {
    width:1200px;
    margin:0 auto;
}
.arrow_box {
    position: relative;
    background: @dark;
}
.arrow_box:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}

header {
    .gradient;
    padding:20px 0;
    border-bottom:2px solid white;

    h1 {
        margin:0;
    }

    div.logo {
        float:left;
        width:305px;
    }

    nav {
        float:right;

        ul {
            margin:0;
            padding:0;

            li {
                display:inline-block;
                margin-left:25px;

                a {
                    display:block;
                    color:white;
                    text-decoration: none;
                    font-size:1.125em;

                    span.image {
                        display:block;text-align:center;
                    }

                    span.text {
                        font-family:@arvo;
                    }
                }
            }
        }
    }

    div.clear {
        clear:both;
    }
}

#slider {
    position: relative;
    height: 700px;
    width: 100%;

    div.items {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;

        /*background:black url('/images/layout/splash.jpg') no-repeat center center / cover;*/
        background:black no-repeat top center;
        background-size:cover;

        img {
            object-fit: cover;
        }

        h2 {
            position:absolute;
            bottom:0;
            right:0;
            margin:0;
            color:white;
            font-size:5em;
            font-weight:800;

            font-family: @rockwell;
            text-transform: capitalize;
            font-size: 4.375em;
            padding: 0.25em 0.5em;

            min-width: 50%;
            text-align: right;

            .graydient;
        }
    }

    .fader-paging{
        position: absolute;
        bottom: 0px;
        left: 50%;
        z-index: 3;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        a{
            font-size: 4.5em;
            text-decoration: none;
            line-height: 0.6em;
            color:black;

            &.active{
                color: @red;
            }
        }
    }
}

main {
    section.call-to-actions {
        padding:1em 0em 0em;
        background:white;

        div.table {
            //display:table;
            width:100%;
            height: 480px;
        }
        ul.table-of-contents {
            display: flex;
            width: 50%;
            margin:0; padding:0;
            flex-direction: column;
            float: left;
            height: 100%;

            li {
                position:relative;
                display:block;
                height: 33.33%;
                & > a {
                    display:flex;
                    padding: 0.5em;
                    box-sizing: border-box;
                    height: 100%;
                    font-family:@rockwell;
                    font-size:2.91em;
                    text-transform: uppercase;
                    text-decoration: none;
                    text-align:right;
                    font-weight: bold;
                    align-items: center;
                    justify-content: flex-end;



                    img{
                        vertical-align: middle;
                        margin-right: 20px;
                    }
                    span{
                        line-height: 1.0em;
                        display:inline-block;
                        float:right;
                        text-align: right;
                        letter-spacing: 2px;
                    }
                }

                div.arrow {
                    display:none;
                    position:absolute;
                    top:50%;
                    right:0;
                    transform:translateY(-50%);
                    z-index:99;
                }

                &:nth-of-type(1) {
                    div.arrow .arrow_box:after {border-left-color:@dark;}
                    a {
                        background:@dark;
                        color:white;
                    }
                }
                &:nth-of-type(2) {
                    div.arrow .arrow_box:after {border-left-color:@light;}
                    a {
                        background:@light;
                        color:@dark;
                    }
                }
                &:nth-of-type(3) {
                    div.arrow .arrow_box:after {border-left-color:@red;}
                    a {
                        background:@red;
                        color:white;
                    }
                }

                &.active {
                    div.arrow {
                        display:block;
                    }
                }
            }
        }

        div.body {
            //display:table-cell;
            width:50%;
            height:100%;
            position:relative;
            float: right;

            div.item {
                position:absolute;
                height:100%;
                width:100%;
                top:0;
                left:0;
                background:white no-repeat center center / cover;

                strong {
                    display:none;
                }

                a {
                    position:absolute;
                    bottom: 1em;
                    right:50%;
                    display:inline-block;
                    padding:5px 1em;
                    background:#464646;
                    color:white;
                    font-family:@rockwell;
                    text-transform:uppercase;
                    text-decoration:none;
                    font-size: 1.75em;
                    border: 2px solid white;
                    transform: translateX(50%);
                }
                
                &:nth-of-type(1) {
                    a {
                        background:@dark;
                        color:white;
                    }
                }
                &:nth-of-type(2) {
                    a {
                        background:@light;
                        color:@dark;
                    }
                }
                &:nth-of-type(3) {
                    a {
                        background:@red;
                        color:white;
                    }
                }
            }
        }

        div.clear {
            clear:both;
        }
    }

    div#call-to-actions{
        margin-top: -100px;
        h2{
            font-family: @rockwell;
            color: @red;
            font-size: 2.5em;
            margin-top: 0;
        }
        div.container{
            margin-bottom: 1em;
        }

        div.slick{
            height: 464px;
            margin-bottom: 1em;

            div.slick-list{
                height: 100%;

                div.slick-track{
                    height: 100%;

                    div.item{
                        height: 100%;
                        margin: 0;
                        background-position: center center;
                        background-size: cover;

                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding: 0 6em;
                        box-sizing: border-box;

                        div.sliderContent{
                            width: 455px;
                            min-height: 310px;       
                            background: rgba(255, 255, 255, 1);
                            box-sizing: border-box;
                            padding: 1.25em;
                            color: black;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;

                            h1 {
                                font-family: @rockwell;
                                color: @red;
                                text-align: center;
                                margin: 0;
                                text-transform: uppercase;
                            }

                            a {
                                display: block;
                                margin: auto;
                                background: white;
                                max-width: 50%;
                                margin: auto;
                                text-align: center;
                                padding: 0.45em;
                                text-decoration: none;
                                text-transform: uppercase;
                                color: black;
                            }
                        }
                    }
                }
            }
        }

        div.action{
            &:nth-of-type(even){
                div.slick-list{
                    div.slick-track{
                        div.item{
                            justify-content: flex-end;
                        }
                    }
                }
            }
        }
    }

    section.contractors {
        //text-align:center;
        background:@light;
        background-image: url(/images/background_contractors.jpg);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 684px;
        position: relative;
        box-sizing: border-box;
        margin-bottom: 1em;
        
        div.container {
            width:50%;
            height: 400px;
            //width: 50%;
            position: absolute;
            right: 3em; top: 50%;
            transform:translateY(-50%); 
            padding: 1em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: @transparent;
            color: white;
        }

        h2 {
            //color:@dark;
            color: white;
            font-size:3.25em;
            text-transform: capitalize;
            margin:0;
            font-family: @rockwell;
        }

        div.content {
            line-height:1.8em;
            //color:@dark;
            color: white;
            padding: 0 7em;
            text-align:center;
            p { text-align:left;
            }
            a.btn {                
                display:inline-block;                
            }
        }
    }

    section.testimonials {
        padding:100px 0;

        div.table {
            display:table;
            width:100%;
        }

        div.quote-left, div.quote-right {
            display:table-cell;
            width:22%;
            vertical-align:top;
            span {
                color:@red;
                font-size:30em;
                line-height: 350px;
                height: 180px;
                display: block;
                overflow: hidden;
            }
        }
        div.content {
            display:table-cell;
            width:56%;
            //display:inline-block;
            //width: 768px;
            font-size:1.125em;
            color:@dark;
            line-height:1.75em;
            vertical-align: middle;
        }

        div.clear {
            clear:both;
        }
    }
}

div#contractors-form{
    margin: 1em 0;

    form{
        div.input{
            width: 50%; display: inline-block;
            padding: 0.5em; box-sizing: border-box;
        }
        div.textarea{
            padding: 0.5em;
        }
        input[type="text"], select, textarea{
            width: 100%; padding: 0.5em;
            box-sizing: border-box;
            background: #efefef;
            border: 1px solid #cccccc;
            font-size: 1em;
            font-family: 'Open Sans';
        }
        textarea{
            min-height: 150px;
            font-size: 1em;
            font-family: 'Open Sans';
        }

        input[type="submit"]{
            background: @red;
            border: 1px solid @red;
            cursor: pointer;
            text-transform: uppercase;
            color: white;
            float: right;
            padding: 0.5em 1em;
            font-size: 1em;
            font-family: 'Open Sans';
            margin: 0.5em;
        }
    }
}

body.secondary main{
    section.gallery{
        .gal-image{
            padding: 4px;
            width: 25%;
            display: inline-block;
            box-sizing: border-box;
            cursor: pointer;
            .gal-background{
                width: 100%;
                height: 250px;
                background-size:cover;
                background-position: center center;
                background-repeat: no-repeat;    
            }
        }
    }
}

footer {
    background:@dark;

    div.stripe {
        background:@red;
        padding:5px 0;
        text-align:center;
        color:white;
        font-size:1.5em;
        border-bottom:2px solid white;
    }

    nav {
        margin:0;
        padding:15px 0;
        ul {
            display:table;
            width:100%;
            margin:0;
            padding:0;

            li {
                display:table-cell;
                a {
                    display:block;
                    color:white;
                    text-decoration:none;
                }
            }
        }
    }
}

aside#social {
    top: 40%;
    left: 0;
    position: fixed;
    z-index: 99;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            margin: 2px 0;

            a {
                text-decoration: none;
                color: #FFF;
                padding: 0.25em;
                background-color: #84888b;
                display: inline-block;
                font-size: 3em;
                text-align: center;

                &.facebook{ background: #3b5998; }
                &.instagram{ background: #e1306c; }
                &.linkedin{ background: #0077b5; }


                .fa{
                    min-width: 41px;
                }
                span {
                    display:none;
                }
            }
        }
    }
}

#descriptive_sections{
    position:relative;

    .descriptive_section {
        padding: 100px 0;
        width: 100%;
        box-sizing: border-box;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 10px 0;

        .ds_content {
            padding: 20px 0;

            .light {
                color:#000;
                background-color: rgba(255,255,255,0.7);
            }
            .dark {
                color:#FFF;
                background-color: rgba(40,40,40,0.7);
            }
            .ds_box {
                width: 50%;
                text-align:center;        
                padding: 10px;
                min-width:450px;

                .ds_title {            
                    font-weight: normal;
                    font-size: 2.5em;
                    text-transform: uppercase;
                }
                .ds_text {
                    text-align: justify;
                    font-size: 0.8em;
                    line-height:2.0em;

                    img {
                        max-width: 100%;
                        height: auto;
                    }
                }
                .ds_link {
                    display:inline-block;
                    background-color: @dark;
                    color: @light;
                    text-decoration: none;
                    margin: 0 auto;
                    padding: 10px;
                    border-radius: 4px;
                    margin: 10px;                   
                }
            }
        }
    }
}

div.banner {
    position:relative;
    height:700px;
    background:@light no-repeat center center / cover;

    h1 {
        position:absolute;
        bottom:0;
        right:0;
        margin:0;
        color:white;
        font-weight:800;


        font-family: @rockwell;
        text-transform: capitalize;
        font-size: 4.375em;
        padding: 0.25em 0.5em;

        min-width: 50%;
        text-align: right;

        .graydient;
    }
}

div.editorContent {
    p {
        line-height:1.25em;
    }
    p:first-child {
        margin-top:0;
    }
    p:last-child {
        margin-bottom:0;
    }
}

body.secondary {
    main {
        div.container {
            width:980px;
            padding:50px 0;
        }
    }
}

div.contact-page {
    div.contact-left {
        float:left;
        width:49%;
    }

    div.contact-right {
        float:right;
        width:49%;

        iframe {
            width:100% !important;
        }
    }

    div.lower {
        clear:both;
        margin-top:60px;
        padding-top:60px;
        border-top:2px solid #e0e0e0;
    }

    div.team-list {
        margin-top: 50px;
        padding:0 50px;

        ul{
            list-style:none;
            padding:0;
            margin:0;

            li{
                margin:0 0 30px;
                padding:0 20px;
                float:left;
                width:50%;
                box-sizing:border-box;
                color:#363636;

                .left {
                    float:left;
                    width:37%;

                    .member_picture {
                        border:1px solid #cccccc;
                        height: 165px;
                        width: 165px;
                        background-position: center center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        margin:0 auto;
                        max-width: 100%;
                    }

                    .member_placeholder {
                        height: 165px;
                        width: 165px;
                        background-position: center center;
                        background-size: cover;
                        background-repeat: no-repeat;
                        margin:0 auto;
                        max-width: 100%;
                        text-align:center;

                        i {
                            border:1px solid #cccccc;
                            background:#cccccc;
                            line-height:165px;
                            width:165px;
                            font-size:7em;
                        }
                    }
                }

                .right{
                    float:right;
                    width:62%;
                    box-sizing: border-box;
                    padding: 30px 0 0 30px;

                    .member_name{
                        font-size: 1.5em;
                        margin:0;
                        font-weight: bold;    
                    }
                    .member_position{
                        font-size: 1em;
                        margin:0;
                        font-weight: normal;    
                    }
                    .member_contact{
                        font-size: 1em;
                        padding: 10px 0;

                        span{
                            display:block;
                            a {
                                text-decoration:none;
                                color:#363636;
                            }
                        }
                    }
                    .member_content{
                        font-size: 0.875em;    
                    }    
                }
            }
        }
    }
}

#message { clear: both; margin-bottom: 0.5em; }

#message .success {
    padding-top: 7px;
    padding-bottom: 7px;
    width: auto;    
    background: #E2F1D0 url(/images/icons/check.png) no-repeat left;
    background-position: 10px 7px;
    color: #061A5B; 
    border: 1px solid #ccc;
}
#message .success .text {
    padding-left: 3em;
    font-weight: bold;
}

#message .error {
    padding-top: 7px;
    padding-bottom: 7px;
    width: auto;    
    background: #FFD9D9 url(/images/icons/warning_16.png) no-repeat left;
    background-position: 10px 7px;
    color: #800; 
    border: 1px solid #ccc;
}
#message .error .text {
    padding-left: 3em;
    font-weight: bold;
}

#message .info {
    padding-top: 7px;
    padding-bottom: 7px;
    width: auto;    
    background: #F0F1FF url(/images/icons/information.png) no-repeat left;
    background-position: 10px 7px;
    color: #060C6A; 
    border: 1px solid #ccc;
}
#message .info .text {
    padding-left: 3em;
    font-weight: bold;
}


div.testimonial{
    background: #ebebeb;
    width: 290px;
    box-sizing: border-box;
    padding: 30px 30px;
    margin-bottom: 51px;
    font-size: 0.9em;
    line-height: 1.75em;
    position:relative;
}
div.testimonial p{
    margin: 0; padding: 0;
}
div.testimonial .person{
    padding-top: 20px;
    font-weight: bold;
}
div.testimonial .triangle{
    position: absolute;
    bottom: -31px; right: 32px;

    width: 0; 
    height: 0; 

    border-right: 27px solid transparent;
    border-top: 31px solid #ebebeb;
}


footer{
    div.social{
        margin: auto;
        text-align: center;
        padding: 1em;
        ul {
            margin: 0;
            padding: 0;
            list-style: none;

            li {
                margin: 2px 0;
                display: inline-block;
                a {
                    text-decoration: none;
                    color: #FFF;
                    padding: 0.25em;
                    background-color: #84888b;
                    display: inline-block;
                    font-size: 2em;
                    text-align: center;

                    &.facebook{ background: #3b5998; }
                    &.instagram{ background: #e1306c; }
                    &.linkedin{ background: #0077b5; }


                    .fa{
                        min-width: 32px;
                    }
                    span {
                        display:none;
                    }
                }
            }
        }    
    }
    div.danima{
        background: black;
        padding: 1em;
        text-align: center;
        color: white;
        a{color: white; text-decoration: none; text-decoration: none;}
    }
}