.c-blog-post a, .c-blog-post a:visited {
  text-decoration: none;
  color: inherit;
}

.social-container {
    padding-right: 5%;
    padding-top: 10px;
    text-align: right;
}

.social-icon {
    width: 21px;
    padding-left: 10px;
}

.social-icon:hover,
.social-icon:active {
    filter: invert(0.4) sepia(1) saturate(4) hue-rotate(154.8deg) brightness(0.72);
}

.blog-header {
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 25px;
}

.archives {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.viewing {
    width: 75px;
    margin: 0px 0px;
    border-color: #005687;
    border-width: 1px;
    border-style: solid;
    padding: 15px 15px;
    font-size: 16px;
    font-weight: 700;
}

/* Dropdown Button */
.dropbtn {
   background-color: #005687;
   color: white;
   padding: 16px 35px;
   font-size: 16px;
   border: none;
   cursor: pointer;
   border-color: #005687;
   border-width: 1px;
   border-style: solid;
   font-weight: 700;
 }

 /* Dropdown button on hover & focus */
 .dropbtn:hover, .dropbtn:focus {
   background-color: #2980B9;
 }

 /* The container <div> - needed to position the dropdown content */
 .dropdown {
   position: relative;
   display: inline-block;
 }

 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }

 /* Links inside the dropdown */
 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }

 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {background-color: #ddd}

 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 .show {display:block;}

.article-text {
   max-width: 900px;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   padding: 0px 25px;
   margin-bottom: 150px;
   font-size: 16px;
   line-height: 24px;
}

.blog-flex {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
 

.blog-box {
    position: relative;
    width: 100%;
    margin: 50px 0px;

}

.blog-box ul {
    list-style: square;
}


.blog-box-pic {
    width: 100%;
}

.blog-pic {
    width: 100%;
}

.blog-box-content {
    position: relative;
    padding: 15px;
}

.blog-content-date {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #005687;
    text-align: left;
}

.blog-content-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 38px;
}

.blog-content-author {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 38px;
}

.blog-content-copy {
    text-align: left;
    font-size: 15px;
    line-height: 20px;
    color: black;
    display:none;
}

.blog-box-ft {
    position: relative;
    width: 100%;
    margin: 50px 0px;

}

.blog-box-pic-ft {
    width: 100%;
}

.blog-pic-ft {
    width: 100%;
}

.blog-box-content-ft {
    position: relative;
    padding: 15px;
}

.blog-content-date-ft {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #005687;
    text-align: left;
}

.blog-content-title-ft {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 38px;
}

.blog-content-title-ft-main {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 38px;
}

.blog-content-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 28px;
}

.blog-content-author-ft {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .009em;
    color: #000;
    text-align: left;
    line-height: 38px;
}

.blog-content-copy-ft {
    text-align: left;
    font-size: 15px;
    line-height: 24px;
    color: black;
    display: none;
}

.box-shade {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    width: 100%;
    height: 250px;
    display: none;
}

.box-shade-test {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    width: 100%;
    height: 250px;
}

.shade-test {
    width: 100%;
}

.box-shade-ft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    width: 100%;
    height: 250px;
    display: none;
}

.featured-flag {
    background-color: #005687;
    color: white;
    font-weight: 900;
    font-size: 20px;
    padding: 15px 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 2;
}

@media screen and (min-width: 600px) {
    .blog-box {
        position: relative;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;

    }

    .blog-box-ft {
        position: relative;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;

    }


}



    @media screen and (min-width: 768px) {


        .blog-box {
            position: relative;
            width: 650px;
            margin-left: auto;
            margin-right: auto;
        }
        .blog-box-content {
            position: absolute;
            padding: 25px;
           top: 15%;
            left: 300px;
            background-color: white;
            width: 275px;
            height: 175px;
            overflow: hidden;
            border-style: solid;
            border-color: lightgrey;
            border-width: 1px;

        }

        .box-shade {
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 5;
            width: 100%;
            height: 250px;
            display: block;
        }

        .blog-box-pic {
            width: 350px;
        }

        .blog-box-ft {
            position: relative;
            width: 650px;
            margin-left: auto;
            margin-right: auto;
        }
        .blog-box-content-ft {
            position: absolute;
            padding: 25px;
           top: 15%;
            left: 300px;
            background-color: white;
            width: 275px;
            height: 250px;
            overflow: hidden;
            border-style: solid;
            border-color: lightgrey;
            border-width: 1px;

        }

        .box-shade-ft {
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 5;
            width: 100%;
            height: 250px;
            display: block;
        }

        .blog-box-pic-ft {
            width: 350px;
        }

        .blog-content-copy {
            display: block;
        }

        .blog-content-copy-ft {
            display: block;
        }

        .featured-flag {
            background-color: #005687;
            color: white;
            font-weight: 900;
            font-size: 20px;
            padding: 15px 50px;
            position: absolute;
            top: 100px;
            left: -50px;
            z-index: 2;
        }
}



@media screen and (min-width: 1024px) {
    .container {
        overflow: visible;
    }

    .blog-box-ft {
        position: relative;
        width: 1000px;
        margin-left: auto;
        margin-right: auto;

    }

    .blog-box-content-ft {
        position: absolute;
        padding: 25px;
        top: 15%;
        left: 375px;
        background-color: white;
        width: 500px;
        height: 250px;
        overflow: hidden;
        border-style: solid;
        border-color: lightgrey;
        border-width: 1px;
    }

    .box-shade-ft {
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 5;
        width: 100%;
        height: 350px;
    }

    .shade {
        width: 100%;
    }

    .blog-box-pic-ft {
        width: 500px;
        margin-left: 50px;
    }

    .blog-content-date-ft {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: .009em;
        color: #005687;
        text-align: left;
    }

    .blog-content-title-ft {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: .009em;
        color: #000;
        text-align: left;
        line-height: 38px;
    }

    .blog-content-title-ft-main {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: .009em;
        color: #000;
        text-align: left;
        line-height: 28px;
        padding-right: 50px;
    }

    .blog-content-author-ft {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .009em;
        color: #000;
        text-align: left;
        line-height: 38px;
    }

    .blog-content-copy-ft {
        text-align: left;
        font-size: 15px;
        color: black;
    }

    .featured-flag {
        left: -25px;

    }


}


@media screen and (min-width: 1200px) {
    .shade-test {
        display: none;
    }

}
