/********************** DEFAULT STYLES **********************/

*, body {
    margin: 0;
    padding: 0;
   /* overflow-x: hidden;*/
   font-family: 'Montserrat', sans-serif;
}

.clear {
    clear: both;
}

/* --------------- sectionA --------------- */

.sectionA {
    width: 100%;
    height: auto;
    background-image: url(../images/compEdge_10_BG.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
    .sectionA a {
        text-decoration: none;
    }
    .containerA {
    }
        .datebox {
            width: 100%;
/*            border-bottom: 0.5px solid white;*/
            border-bottom: 0.5px solid #fff;
            color: #fff;
            font-weight: 200;
        }
        .newstoryimage {
            background-image: url(../images/compEdge_10_main01.jpg);
            transition: 0.3s;
            display: flex;
              justify-content: flex-end;
              align-items: flex-end;
        }
            .newstoryimage .seriesbadge {
                width: 100px;
                height: auto;
                margin: 12px;
            }
            .storyimage .seriesbadge {
                width: 100px;
                height: auto;
                margin: 12px;
            }
        .newstorytext {
/*            color: #fff;*/
            color: #004982;
/*            border-bottom: 0.5px solid white;*/
            border-bottom: 0.5px solid #fff;
        }
            .newstorytext h1 {
                font-weight: 400 !important;
            }
            .newstorytext p {
                font-weight: 400 !important;
            }
            .author {
                font-weight: 400 !important;
            }
            .storydate {
                font-weight: 400 !important;
                margin-bottom: 0px;
            }
        

/* --------------- sectionB --------------- */

.sectionB {
    width: 100%;
    height: auto;
    background-color: #fff;
}
    .gridcontainer {
    }
        .cardcontainer {
            width: 100%;
            height: 100%;
        }
        .cardcontainer a {
            position: relative;
            z-index: 1000;
            width: 100%;
            height: 100%;
        }
            .largecard a, .storycard a {
                text-decoration: none;
            }
            .storyinfo h2, .storyinfo p {
                font-weight: 300;
            }
            .smallstorydate {
                display: inline-block;
                margin-bottom: 0px;
                width: 100%;
                height: auto;
                /*background-color: lightgrey;*/
                position: relative;
                bottom: 0px;
                line-height: 0.75em;
            }
            .magazineinfo h2, .magazineinfo p {
                font-weight: 300;
            }

    .load-more {
        display: block;
        background-color: #fff;
        border: 1px solid #999999;
        color: #999999 !important;
        border-radius: 4px;
        margin: 50px auto;
        transition: 0.3s;
    }
        .load-more:hover{
            border: 1px solid #1b75bb;
            background-color: #1b75bb;
            color: #fff !important;
            text-decoration: none;
        }

    .archivebutton{
        display: block;
        background-color: #fff;
        border: 1px solid #999999;
        color: #999999 !important;
        border-radius: 4px;
        margin: 50px auto;
        transition: 0.3s;
        visibility: hidden;

        padding: 5px 10px;
        font-size: 20px;
    }
        .archivebutton:hover{
            border: 1px solid #1b75bb;
            background-color: #1b75bb;
            color: #fff !important;
            text-decoration: none;
        }

    .loadbox {
      display:none;
    }
        

/* --------------- adSection --------------- */

.adSection {
    padding: 0 !important;
}
.adBox a {
    display: block;
    width: 100%;
    height: 100%;
}
.disclosure {
    color: lightgrey;
    text-align: center;
}


/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
    background-size: auto 100%;
}
    .containerA {
        padding: 24px 12px;
        transition: 0.3s;
    }
        .datebox {
            margin-bottom: 24px;
        }
            .datebox p {
                font-size: 0.7em !important;
                margin-bottom: 6px;
            }
        .newstoryimage {
            width: 100%;
            height: 35vh;
            background-size: auto 100%;
            background-position: 50%;
            border-radius: 5px;
            margin-bottom: 24px;
            transition: 0.3s;
            display: flex;
              justify-content: flex-end;
              align-items: flex-end;
        }
            .containerA:hover .newstoryimage {
                background-size: auto 115%;
            }
        .newstorytext {
            padding-bottom: 12px;
        }
            .newstorytext h1 {
                font-size: 1.75em;
            }
            .newstorytext p {
                font-size: 0.8em;
                line-height: 1.125em;
            }
        

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .gridcontainer {
        padding: 24px 12px;
    }
        .cardcontainer {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }
        .largecard {
            width: 100%;
            height: auto;
            margin-bottom: 16px;
        }
        .storycard {
            width: 100%;
            height: auto;
            margin-bottom: 16px;
        }
            .storyimage {
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
                width: 100%;
                height: 175px;
                display: flex;
              justify-content: flex-end;
              align-items: flex-end;
            }
            .storyinfo {
                padding: 12px 12px;
            }
                .storyinfo h2 {
                    font-size: 1.5em;
                }
                .storyblurb, .author {
                    font-size: 0.8em;
                    line-height: 1.25em;
                    margin-bottom: 8px;
                }
                .smallstorydate {
                    margin-bottom: 0px !important;
                    font-size: 0.6em;
                }

            .magazineinfo {
                padding: 12px 12px;
            }
                .magazineinfo h2 {
                    font-size: 1.75em;
                }

        .socialboxinfo {
            padding: 24px;
        }
            .socialboxinfo h2 {
                font-weight: 400;
                font-size: 2.25em;
            }
            .socialboxinfo p {
                font-weight: 300;
                font-size: 0.8em;
                margin-bottom: 0px;
            }
        .socialboxbuttons {
            padding: 0 24px 24px 24px;
        }
            .socialmediabutton {
                display: block;
                width: 100%;
                padding: 8px 24px;
                border: 1px solid #d6de23;
                border-radius: 5px;
                margin-bottom: 8px;
                text-align: center;
                background-color: rgba(255, 255, 255, 0);
                color: #d6de23;
                font-size: 0.9em;
                font-weight: 300;
                transition: 0.3s;
            }
                .socialmediabutton:hover {
                    background-color: #d6de23;
                    border: 1px solid #d6de23;
                    color: #2829d9;
                }

    .load-more {
        font-size: 1em;
        padding: 8px 36px;
    }

    .archivebutton {
        font-size: 1em;
        padding: 8px 36px;
    }
        

/* --------------- adSection --------------- */


.adSection {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 0 !important;
}
.disclosure {
    font-size: 0.7em;
    margin: 5px 0 5px 0;
    padding: 0;
}
.adBox {
    width: 256px;
    height: 230px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

}

/************************************************************/

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

/* --------------- adSection --------------- */

.adBox {
    width: 290px;
    height: 260px;
}

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
}
    .containerA {
    }
        .datebox {
            margin-bottom: 24px;
        }
            .datebox p {
                font-size: 0.7em !important;
                margin-bottom: 6px;
            }
        .newstoryimage {
            width: 100%;
            height: 275px;
            background-size: auto 100%;
            background-position: 50%;
            border-radius: 5px;
            margin-bottom: 24px;
        }
        .newstorytext {
            padding-bottom: 12px;
            margin-bottom: 12px;
        }
            .newstorytext h1 {
                font-size: 2.25em;
            }
            .newstorytext p {
                font-size: 1em;
                line-height: 1.25em;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
    }
        .largecard {
        }
        .storycard {
        }
            .storyimage {
                height: 225px;
            }
            .storyinfo {
                padding: 24px;
            }
                .storyinfo h2 {
                    font-size: 1.85em;
                    line-height: 1em;
                }
                .storyblurb, {
                    font-size: 0.9em;
                    line-height: 1.25em;
                    margin-bottom: 8px;
                }
                .author {
                    font-size: 0.9em;
                    line-height: 1.25em;
                    margin-bottom: 18px;
                }
                .smallstorydate {
                    font-size: 0.7em;
                }

            .magazineinfo {
                padding: 24px;
            }
                .magazineinfo h2 {
                    font-size: 1.85em;
                    line-height: 1em;
                }

            .socialboxinfo h2 {
                font-size: 2.75em;
                line-height: 1em;
            }
            .socialboxinfo p {
                font-size: 1em;
                line-height: 1.125em;
            }

}

/************************************************************/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

}

/************************************************************/

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

.containerA {
    padding: 24px 18px;
}

.gridcontainer {
    padding: 24px 18px;
}

.socialboxinfo h2 {
    font-size: 3.5em;
}
.socialmediabutton {
    font-size: 1.25em;
    padding: 8px auto;
}
        
}

/************************************************************/

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

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 100% auto;
}
    .containerA {
    }
        .newstoryimage {
            float: right;
            width: 40vw;
            height: 250px;
            margin-bottom: 0px;
            margin-left: 18px;
        }
        .newstorytext {
            width: 50vw;
        }
            .newstorytext h1 {
                font-size: 1.25em;
            }
            .newstorytext p {
                font-size: 0.75em;
                line-height: 1.125em;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}

    .largecard {
        float: left;
        width: 66%;
        height: 240px;
        padding: 0 8px;
        margin-bottom: 24px;
    }
        .largecard .storyimage {
            float: right;
            width: 40%;
            height: 100%;
        }
        .largecard .storyinfo {
            float: left;
            width: 60%;
            height: 100%;
        }
    .storycard {
        float: left;
        width: 33%;
        height: 240px;
        padding: 0 8px;
        margin-bottom: 24px;
    }
        .storycard .storyimage {
            height: 45%;
        }
        .storycard .storyinfo {
            height: 55%;
        }
        .storyinfo {
            position: relative;
            padding: 12px;
        }
        .largecard .storyinfo h2 {
            font-size: 1.4em;
            margin-bottom: 8px;
        }
        .storycard .storyinfo h2 {
            font-size: 1.125em;
            margin-bottom: 8px;
        }
            .smallerheadline {
                font-size: 1em !important;
            }
        .storyblurb {
            font-size: 0.7em;
        }
        .author {
            font-size: 0.7em;
            margin-bottom: 6px;
        }
        .smallstorydate {
            font-size: 0.55em;
            line-height: 1.125em;
            position: absolute;
            bottom: 12px;
            width: 85%;
        }

    .storycard .magazineinfo {
        height: 55%;
    }
        .magazineinfo {
            position: relative;
            padding: 12px;
        }
        .storycard .magazineinfo h2 {
            font-size: 1.125em;
            margin-bottom: 8px;
        }
        .magazineinfo .smallstorydate {
            display: none;
        }

    .socialboxinfo {
        float: left;
        width: 45%;
        height: auto;
    }
        .socialboxinfo h2 {
            font-size: 1.5em;
        }
        .socialboxinfo p {
            font-size: 0.7em;
            line-height: 1.25em;
            margin-bottom: 0px;
        }
    .socialboxbuttons {
        float: right;
        width: 55%;
        height: auto;
        padding: 24px;
    }
        .socialmediabutton {
            font-size: 0.7em;
            padding: 6.5px 0;
        }

/* --------------- adSection --------------- */

.adBox {
    width: 518px;
    height: 203px;
    margin-bottom: 20px;
    background-size: 100% auto;
}

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
}
    .containerA {
        padding: 24px;
    }
        .newstoryimage {
            width: 50vw;
            height: 70vh;
            margin-bottom: 0px;
            margin-left: 18px;
        }
        .newstorytext {
            width: 40vw;
        }
            .newstorytext h1 {
                font-size: 1.8em;
            }

/* --------------- sectionB --------------- */

.sectionB {
}
    .gridcontainer {
        padding: 24px;
    }
        .largecard {
            float: left;
            width: 66%;
            height: 240px;
            padding: 0 8px;
            margin-bottom: 24px;
        }
            .largecard .storyimage {
                float: right;
                width: 40%;
                height: 100%;
            }
            .largecard .storyinfo {
                float: left;
                width: 60%;
                height: 100%;
            }
        .storycard {
            float: left;
            width: 33%;
            height: 240px;
            padding: 0 8px;
            margin-bottom: 24px;
        }
            .storycard .storyimage {
                height: 45%;
            }
            .storycard .storyinfo {
                height: 55%;
            }
            .storyinfo {
                position: relative;
                padding: 12px;
            }
            .largecard .storyinfo h2 {
                font-size: 1.4em;
                margin-bottom: 8px;
            }
            .storycard .storyinfo h2 {
                font-size: 1.125em;
                margin-bottom: 8px;
            }
                .smallerheadline {
                    font-size: 1.125em !important;
                }
            .storyblurb {
                font-size: 0.7em;
            }
            .author {
                font-size: 0.7em;
                margin-bottom: 6px;
            }
            .smallstorydate {
                font-size: 0.55em;
                position: absolute;
                bottom: 12px;
            }
    .storycard .magazineinfo {
            height: 55%;
        }
        .magazineinfo {
            position: relative;
            padding: 12px;
        }
        .storycard .magazineinfo h2 {
            font-size: 1.125em;
            margin-bottom: 8px;
        }
        .magazineinfo .smallstorydate {
            display: inline-block;
            bottom: 12px;
        }
    .socialboxbuttons {
        width: 50%;
    }
        .socialboxinfo h2 {
            font-size: 2em;
            line-height: 1.25em;
            margin-top: 12px;
            margin-bottom: 12px;
        }
    .socialmediabutton {
        padding: 7px 0;
    }

/* --------------- adSection --------------- */

    .adBox {
        width: 617px;
        height: 242px;
    }

}

/************************************************************/

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


}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 110% auto;
}
    .containerA {
        padding: 24px 36px;
    }
        .newstoryimage {
            width: 45vw;
            height: 330px;
            margin-bottom: 0px;
            margin-left: 18px;
        }
        .newstorytext {
            width: 40vw;
            height: 330px;
        }
            .newstorytext h1 {
                font-size: 2em;
                margin-top: 18px;
            }
            .newstorytext p {
                font-size: 0.8em;
                line-height: 1.25em;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .gridcontainer {
        padding: 24px 24px;
    }
        .largecard {
            height: 250px;
            padding: 0 8px;
            margin-bottom: 18px;
        }
            .largecard .storyimage {
                float: right;
                width: 40%;
                height: 100%;
            }
            .largecard .storyinfo {
                float: left;
                width: 60%;
                height: 100%;
            }
        .storycard {
            height: 250px;
            padding: 0 8px;
            margin-bottom: 18px;
        }
            .storycard .storyimage {
                height: 50%;
            }
            .storycard .storyinfo {
                height: 50%;
            }
            .storyinfo {
                position: relative;
                padding: 18px;
            }
            .largecard .storyinfo h2 {
                font-size: 2em;
                margin-bottom: 8px;
            }
            .largecard .author {
                margin-top: 12px;
            }
            .largecard .smallstorydate {
                margin-top: 24px;
            }
            .storycard .storyinfo h2 {
                font-size: 1.125em;
                margin-bottom: 8px;
            }
                .smallerheadline {
                    font-size: 1em !important;
                }
            .storycard .smallstorydate {
                margin-top: 12px;
            }
            .storyblurb {
                font-size: 0.68em;
            }
            .author {
                margin-bottom: 6px;
            }
            .smallstorydate {
                font-size: 0.55em;
                position: absolute;
                bottom: 18px;
            }
        .storycard .magazineinfo {
                height: 50%;
            }
            .magazineinfo {
                position: relative;
                padding: 18px;
            }
            .storycard .magazineinfo h2 {
                font-size: 1.125em;
                margin-bottom: 8px;
            }
            .magazineinfo .smallstorydate {
                position: absolute;
                bottom: 18px;
            }

/* --------------- adSection --------------- */

    .adBox {
        width: 518px;
        height: 203px;
    }

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 100% auto;
}
    .containerA {
    }

    .newstorytext h1 {
        font-size: 2em;
        margin-top: 48px;
    }

    .storyblurb {
        font-size: 0.75em;
    }


/* --------------- sectionB --------------- */
    
.sectionB {
}
    .gridcontainer {
    }


/* --------------- adSection --------------- */

    .adBox {
        width: 518px;
        height: 203px;
    }

}

/************************************************************/

@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) {

}

/************************************************************/

/*ipad air portrait*/
@media only screen 
    and (min-device-width: 820px) 
    and (max-device-width: 1180px) 
    and (-webkit-min-device-pixel-ratio: 2)  
    and (orientation: portrait)  {

/* --------------- sectionA --------------- */

.sectionA {
}
    .containerA {
    }

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
    margin-top: 120px;
}
    .containerA {
        padding: 36px 60px;
    }
        .newstoryimage {
            width: 475px;
            height: 375px;
            margin-bottom: 0px;
            margin-left: 18px;
        }
        .datebox p {
            font-size: 0.65em;
        }
        .newstorytext {
            width: 350px;
            height: 375px;
        }
            .newstorytext h1 {
                font-size: 2.25em;
                margin-top: 48px;
            }
            .newstorytext p {
                font-size: 0.9em;
                line-height: 1.25em;
            }


/* --------------- sectionB --------------- */
    
.sectionB {
}
    .gridcontainer {
        padding: 36px 40px 36px 50px;
    }
        .largecard .storyimage {
            width: 48%;
        }
        .largecard .storyinfo {
            width: 52%;
        }

    .socialboxinfo h2 {
        font-size: 2.25em;
        line-height: 1.125em;
        margin-top: 8px;
        margin-bottom: 12px;
    }

    .smallerheadline {
        font-size: 1.125em !important;
    }

    .load-more{
        font-size: 20px;
        padding: 12px 0;
        width: 300px;
    }
    .archivebutton{
        font-size: 20px;
        padding: 12px 0;
        width: 300px;
    }
    

/* --------------- sectionC --------------- */

    .adBox {
        width: 664px;
        height: 260px;
    }

}

/************************************************************/

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

.socialboxinfo {
    width: 225px;
}

}

/************************************************************/

/*ipad pro portrait*/
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (-webkit-min-device-pixel-ratio: 2)  
    and (orientation: portrait)  {


}

/************************************************************/

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

	.newstorytext {
        width: 420px;
    }

    .newstoryimage {
        width: 550px;
        background-size: auto 110%;
    }

    .newstorytext h1 {
        margin-top: 48px;
    }
}

/************************************************************/

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

}

/************************************************************/

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

/* --------------- sectionA --------------- */

.sectionA {
}
    .containerA {
        margin: auto;
        width: 1280px;
        padding: 48px 48px;
    }
        .newstoryimage {
            width: 625px;
            height: 475px;
        }
        .datebox p {
            font-size: 0.65em;
        }
        .newstorytext {
            width: 500px;
            height: 475px;
        }
            .newstorytext h1 {
                font-size: 3em;
                margin-top: 60px;
                margin-bottom: 18px;
            }
            .newstorytext p {
                font-size: 1em;
                line-height: 1.5em;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .gridcontainer {
        margin: auto;
        width: 1280px;
        height: auto;
        padding: 48px 24px 48px 36px;
    }
        .largecard {
            height: 375px;
            padding: 0 12px;
            margin-bottom: 24px;
        }
            .largecard .storyimage {
                float: right;
                width: 48.5%;
                height: 100%;
            }
            .largecard .storyinfo {
                float: left;
                width: 50%;
                height: 100%;
                padding: 24px;
            }
        .storycard {
            height: 375px;
            padding: 0 12px;
            margin-bottom: 24px;
        }
            .storycard .storyimage {
                height: 55%;
            }
            .storycard .storyinfo {
                height: 45%;
                padding: 24px;
            }
            .storyinfo {
                position: relative;
            }
            .largecard .storyinfo h2 {
                font-size: 2.75em;
                line-height: 1em;
                margin-bottom: 12px;
            }
            .storyblurb {
                font-size: 0.9em;
                margin-bottom: 18px;
            }
            .author {
                font-size: 0.9em;
            }
            .smallstorydate {
                font-size: 0.75em;
                bottom: 24px;
            }
            .largecard .author {
                margin-top: 12px;
            }
            .largecard .smallstorydate {
                margin-top: 24px;
            }
            .storycard .storyinfo h2 {
                font-size: 1.75em;
                margin-bottom: 8px;
            }
                .smallerheadline {
                    font-size: 1.5em !important;
                }
            .author {
                margin-bottom: 6px;
            }

        .storycard .magazineinfo {
            height: 45%;
            padding: 24px;
        }
            .magazineinfo {
                position: relative;
            }
            .storycard .magazineinfo h2 {
                font-size: 2em;
                margin-bottom: 8px;
            }
            .magazineinfo .smallstorydate {
                font-size: 0.75em;
                bottom: 24px;
            }

    .socialboxinfo {
        width: 40%;
        padding: 48px;
    }
        .socialboxinfo h2 {
            font-size: 2.5em;
            margin-top: 24px;
        }
        .socialboxinfo  p {
            font-size: 1.125em;
        }
    .socialboxbuttons {
        width: 55%;
    }
        .socialmediabutton {
            font-size: 1.25em;
            margin-bottom: 12px;
            padding: 12px 0;
        }

}

/************************************************************/

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

}

/************************************************************/


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

}

/************************************************************/

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

}

/************************************************************/