/* reset rule */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    }
    body{
        font-family: verdana;
    }
    header .promo_bar {
        background-color:gold;
        min-height: 56px;
    }
    header nav {
        background-color: #FFF;
        min-height: 77px;
    }
    section.hero {
        min-height: 500px;
        background-color:skyblue;
        background-image: url(../images/doggrass.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        position: relative;
    }
    .hero_text {
        color: #FFF;
        font-family: impact;
        font-size: 2.6em;
        padding: 10px 0px 0px 20px;
        background-color: rgba(20,20,20,.7);
        position: absolute;
        top: 10px; left: 10px;
        letter-spacing: .1em;
    }
    .call-to-action {
        display: block; /*make my anchor tag convert to a block element*/
        background-color: gold;
        width: 180px; padding: 16px 8px;
        position: absolute; bottom: 40px; left: 80px;
        text-decoration: none;
        text-align: center;
        color: #234;
        font-size: 16pt;
        border-radius: 8px;
        box-shadow: 2px 3px 6px rgba(10,10,10,.7);
        transition: background-color 250ms linear;

    }
    .call-to-action:hover{
        background-color:yellow;

    }
   

    section.products {
        min-height: 300px;
        background-color:#EEE;
        display: flex; 
        justify-content: space-evenly;
        flex-flow: row wrap;
        padding: 20px 0 20px 0;
        /* will make this a flex box parent */
    }
    .product_card {
        border: 4px solid purple;
        flex: 0 0 20%;
        background-color:#EEE;
        text-align:center;
        border-radius: 6px;
        box-shadow: 0 0 20px #888;
        transition: box-shadow .25s linear;
        text-decoration: none;
        color: #234;

    }
    .product_card:hover{
        box-shadow: 0 0 8px #555;

    }
    .product_card h2 {
        font-size: 10pt;
        margin-top: 40px;
        margin-top: 10px;

    }
    .product_card img {
        width: 80%;
    }
    .product_card p {
        font-size: 8pt;
    }
    .featured_story {
        display: inline-block;
        width: 80%; margin: 40px auto;
        min-height: 400px;
        background-color: #EEE;
        display: flex;
        text-decoration:none;
        color: #234;
       
        
        
    }
    .featured_story figcaption {
        background-color: #EEE;
        flex: 0 0 25%;
        border-radius: 6px;
    }
    .featured_story figcaption p:first-child {
        color: red;
        text-align: center;
        text-transform: uppercase;
        font-size: 8pt;        
    }
    .featured_story figcaption h2 {
        margin: 8px;
        font-size: 14pt;
        line-height: 1.4;
    }
    .featured_story figcaption p {
        margin: 8px;
        font-size: 14pt;
        line-height: 1.6;
    }
    .featured_story figure {
        flex: 0 0 70%;
        background-image: url(../images/dog.jpg);
        background-size: cover;
        background-position: center;
        border-radius: 0 6px 6px 0;

    }
    footer {
        min-height: 300px;
        background-color: #333;
    }