/*-------------------------------------------------------------------------------------------------------------------------------------
        
        WEBDEV FRAMEWORK

        Author:         Nicholas Coupland
        Last Updated:   04.07.2017
        version:        1.0

        CSS RESPONSIVE STYLES 

-------------------------------------------------------------------------------------------------------------------------------------*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .section{
    	padding: 120px 0;
    }

    #footer .copyright{
        text-align: left;
    }
    .banner .heading-group {
        padding-left: 9%;
    }
    .banner .heading-group .heading-line-left{
        margin-left: 100px;
    }   
    .banner .purple-third {
        display: block;
    }
    .banner h1 {
        font-size: 50px;
        line-height: 58px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .main-navigation ul li a{
        padding: 0 10px;
    }
    #header .header-phone a, 
    #home-header .header-phone a{
        margin-left: 30px;
    }
    #header .logo, #home-header .logo {
        margin-top: 26px;
    }
    #home-header {
        margin-bottom: 140px;
    }
    .banner .overlay {
        padding: 0px 0 180px 0;
    }
    .banner .heading-group {
        padding-left: 17%;
    }
    .heading-line-left {
        margin-left: 100px;
    }
    .content-holder-right {
        padding: 0 0 0 102px;
    }
    .content-holder-left {
        padding: 0 102px 0 0;
    }
    #footer-top .footer-widget{
        margin-bottom: 0px;
    }
    .page-banner .page-banner-overlay {
        padding: 150px 0 160px;
    }
    .about-content .block-content .lead{
        font-size: 20px;
        line-height: 32px;
    }
    .overlay {
        background: rgba(16, 24, 31, 0.75);
        padding: 140px 0;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .main-navigation ul li a{
        padding: 0 15px;
    }
    #home-header .header-phone a{
        margin-left: 30px;
    }
    #header .logo, #home-header .logo {
        margin-top: 16px;
    }
}