/*
    Project: jbarnicoatlandscaping.co.uk
    version: 1.0
    Author: Chris Smith
    Date: 05/08/2019
*/



/*------------------------------Masterview-----------------------------------------*/

.umb-grid img{
    height: auto;
    max-width: 100%;
}
/*----------------------Header---------------------*/
header {
    background-color: #d4d0a3;
}

.logoContainer,
.socialContainer {
    text-align: center;
}

.logoContainer{
    padding-top: 60px;
}

    .logoContainer a {
        display: block;
    }

.logoContainer img{
    border: 2px solid transparent;
}

.logoContainer a:hover img{
    opacity: .8;
}

.logoContainer a:focus{
    outline: 2px solid #2c2929;
}



.socialLinks a {
    border: 2px solid transparent;
    color: #212324;
    display: block;
}

    .socialLinks a:hover,
    .socialLinks a:focus{
        color: #615b4b;
    }

    .socialLinks a:focus {
        outline: 2px solid #615b4b;
    }

.socialLinks .fa {
    font-size: 3rem;
}




/*------------------------------Footer-----------------------------------*/

footer {
    background-color: #615b4b;
    border-top: solid 20px #d4d0a3;
    color: #fff;
    margin-top: 50px;
    padding: 30px 0 50px;
}

footer h2{
    color: #fff;
}

.getInTouch a {
    color: #FFD403;
}

.getInTouch a:hover {
    color: #98ff03;
}

/*--------------------------------Home Page-----------------------------*/
.welcome {
    padding-top: 30px;
}

.welcome h1{
    margin-bottom: 15px;
}

.recentWorkImageContainer{
    margin-top: 15px;
}
/*------------------Our Services---------------*/
.ourServiceBox {
    margin-bottom: 45px;
}

.ourServicesContainer {
    background-color: #f5f5f5;
    margin: 30px 0;
    padding: 40px 0;
}

.ourServiceBox img {
    border: 5px solid #d4d0a3;
}

.ourServiceBox a {
    color:#000;
    font-weight: 600;
    font-size: 1.5rem;
}


/*----------------------------Services Page------------------------------*/

.recentWorkImages img{
    margin-bottom: 15px;
}

    .recentWorkImages img:hover{
        opacity: .9;
    }


.service h1{
    margin-top: 10px;
}


/*------------------------------Gallery----------------------------------*/

.lb-thumbnail{
    display:block;
    margin-bottom: 15px;
}

img.zoom {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}


.transition {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.modal-header {
    border-bottom: none;
}

.modal-title {
    color: #000;
}

.modal-footer {
    display: none;
}

/*-------------------------Testimonials----------------------------*/

.testimonials{
    background-color: #efefe0;
    padding: 45px 0;
}

.introText{
    padding: 10px 0 25px;
}

.speechbubble {
    position: relative;
    background: #d4d0a3;
    border-radius: 4em;
    padding: 25px;
}

.speechbubble p{
    margin-bottom: 0;
}

.testimonial{
    margin-bottom: 55px;
}

    .testimonial:nth-child(even) .speechbubble:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 21px solid transparent;
        border-top-color: #d4d0a3;
        border-bottom: 0;                        
        border-right: 1px solid transparent;
        margin-left: 40px;
        margin-bottom: -21px;
    }


    .testimonial:nth-child(odd) .speechbubble:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 21px solid transparent;
        border-top-color: #d4d0a3;
        border-bottom: 0;
        border-left: 1px solid transparent;
        margin-left: -40px;
        margin-bottom: -21px;
    }

.commentor {
    font-weight: 600;
    margin-top: 20px;
}

.testimonial:nth-child(odd) .commentor{
    padding-left: 15px;
}

.testimonial:nth-child(even) .commentor {
    padding-right: 35px;
    text-align: right;
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------(COL-SM)------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width: 576px) {
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------(COL-MD)------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media (min-width: 768px) {

        /*-------------------------Testimonials (COL-MD)----------------------------*/

        .speechbubble {
            border-radius: 5em;
            padding: 25px 45px;
        }

        .testimonial:nth-child(even) .speechbubble:after {
            margin-left: 50px;
        }

        .testimonial:nth-child(odd) .speechbubble:after {
            margin-left: -50px;
        }

        .testimonial:nth-child(odd) .commentor {
            padding-left: 70px;
        }

        .testimonial:nth-child(even) .commentor {
            padding-right: 80px;
        }


    }


/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------(COL-LG)------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media (min-width: 992px) {


        /*------------------------------Masterview (COL-LG)-----------------------------------------*/


        /*----------------------Header (COL-LG)---------------------*/

        header{
            height: 130px
        }

        .logoContainer {
            padding-top: 10px;
        }

        .socialContainer{
            padding-top: 47px;
        }

        .socialLinks .fa {
            font-size: 2.5rem;
        }

        .navContainer{
            padding-top: 35px
        }
    }


/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------(COL-XL)------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media (min-width: 1200px) {





        /*--------------------------------------Masterview (COL-XL)---------------------------------------*/

        /*--------------------Footer (COL-XL)-------------------------*/

        footer {
            padding: 60px 0 100px;
        }

         /*------------------Home Page (COL-XL)-----------------------*/

         .welcome{
             padding: 50px 0 30px;
         }



         /*------------------Testimonials (COL-XL)-------------------*/

        .testimonial:nth-child(odd) .commentor {
            padding-left: 90px;
        }

        .testimonial:nth-child(even) .commentor {
            padding-right: 100px;
        }

    }


/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------(COL-XXL)------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media (min-width: 1600px) {

        /*------------------------------Masterview (COL-XXL)-----------------------------------------*/


        /*----------------------Header (COL-XXL)---------------------*/

        header {
            height: 170px
        }

        .logoContainer {
            padding-top: 10px;
        }

        .socialContainer {
            padding-top: 68px;
        }

        .socialLinks .fa {
            font-size: 3.5rem;
        }

        .navContainer {
            padding-top: 55px
        }
    }