/*
The CSS is organized to follow the same structure as the HTML file top to bottom. Classes were created for larger containers ie header, section, aside and footer while CSS 
combinators were used to style specific elements that are children of containers with those classes. If an element type (example images in the content section) had different styles within the same class, 
a specific set of classes was created for those elements but named semantically.
/*

/*Global Styling and Styling By Generic Elemenet Selector*/
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #d9dcd6;
    }

    h1, h2, h3, p, a {
        color: #ffffff;
    }

/*Styling For the Header Container and It's Child Elemenets*/

    .header {
        background-color: #2a607c;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        padding: 20px;
     }

        .header h1 {
            display: inline-block;
            font-size: 48px;
        }

        .header span {
            color: #d9dcd6;
        }

        .header nav {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 20px;
            padding-top: 15px;
            margin-right: 20px;
            float: right;
         }

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

                .header a {
                    color: #ffffff;
                    text-decoration: none;
                }

 /*Styling for the HERO Container*/

    .hero {
        background-image: url("../images/digital-marketing-meeting.jpg");
        height: 800px;
        width: 100%;
        margin-bottom: 25px;
        background-size: cover;
        background-position: center;
    }
    
/*Styling  For The Content (Section) Container and Its Child Elemenets*/

    .content {
        width: 75%;
        display: inline-block;
        margin-left: 20px;
    }

        .content div {
            background-color: #0072bb;
            color: #ffffff;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            margin-bottom: 20px;
            padding: 50px;
            height: 300px;
        }

            .content h2 {
                font-size: 45px;
                margin-bottom:25px;
            }
            
            .content-img-left { 
                max-height: 200px;
                float: left;
                margin-right: 25px;
            }   

            .content-img-right { 
                max-height: 200px;
                float: right;
                margin-left: 25px;
            }   


/*Styling Aside (Benefits) Container and Its Child Elements*/   

    .benefits {
        background-color: #2589bd;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        width: 20%;
        height: 100%;
        margin-right: 20px;
        padding: 20px;
        float: right;
    }

        .benefits div {
            color: #ffffff;
            margin-bottom: 32px;
        }

            .benefits h3 {
                text-align: center;
            }

            .benefits img {
                display: block;
                max-width: 150px;
                margin: 10px auto;
            }


/*This is the Styling for the Footer*/

    .footer {
       color:black;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:20px;
        text-align: center;
        padding: 30px;
    }

        .footer  h2 {
            color: black;
            font-size: 24px;
        }

        .footer p {
            color: black;
            font-size:14px;
        }