/* Site wide changes */

    /* This code makes sure that all site elements are sized the way we want them to be. */

        * 
            {box-sizing: border-box;
            padding: 0;
            margin: 0;}

    /* This code sets the background color for the whole site. */

        body 
            {background-color: #d9dcd6;}

    /* This code makes all the links display white. */

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

    /* This code sets the site wide font size for paragraph text. */

        p 
            {font-size: 16px;}




/* Nav Bar */


    /* This code sets the background color for the nav bar. It also sets up the text so it is white and has the proper font. */

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


    /* Company Logo */

        /* This code sets the size of the company logo text and allows them to align as one word. */

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

        /* This code makes the SEO portion of the company logo appear in a different color. */

            .header h1 .seo 
                {color: #d9dcd6;}


    /* Site Links */

        /* This code sets the font and size of the text for the nav bar links, makes them stay to the right, and gives them breathing room to avoid crowding. */

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

        /* These 2 codes format the nav links so they display side by side. */

            .header div ul 
                {list-style-type: none;}

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




/* Banner Image */


    /* This code sets up the main banner image when you land on the site. It defines how it displays so that it is appealing to a potential client. */

        .hero 
            {height: 800px;
            width: 100%;
            margin-bottom: 25px;
            background-image: url("../images/digital-marketing-meeting.jpg");
            background-size: cover;
            background-position: center;}




/* Main Content Formatting */


    /* This code sets the margins for the main content of the site. It also controls how those blocks are laid out on the site to create an intuitive browsing experience. */

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

    /* This code moves an image to the left of its box.*/

        .float-left 
            {float: left;
            margin-right: 25px;}

    /* This code moves an image to the right of its box. */

        .float-right 
            {float: right;
            margin-left: 25px;}

    /* This code makes the background blue, makes the text white, sets the height of the block, sets the font, and gives the block breathing room underneath. */

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

    /* This code makes sure the images are all the same size */

        .main-content-box img 
            {max-height: 200px;}

    /* This code sets the size of the title and gives it space from the paragraph below */

        .main-content-box h2 
            {margin-bottom: 20px;
            font-size: 36px;}


   

/* Side Bar Formatting */


    /* This code sets up the side bar so it sits on the right side of the screen. It also sets the text font and background color. */

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

    /* This code sets the font color to white and creates breathing room on the bottom of the box. */

    .benefit-box
        {margin-bottom: 32px;
        color: #ffffff;}

    /* This code centers "Lead Generation" and gives it breathing room below the text */

        .benefit-box h3 
            {margin-bottom: 10px;
            text-align: center;}

    /* This code sets the position of the image and sets its size. */

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




/* Footer Section */


    /* This code makes sure the sections above do not bleed into the footer. It also centers the text and sets the font. */

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

    /* This code sets the text size for "Made with love by Horiseon" */

        .footer h2 
            {font-size: 20px;}