﻿#page-body { padding: 20px 20px 60px; max-width: 1000px; margin: 0 auto; }

#invited { background: #00BBDC; color: white; text-align: center; font-size: 26px; padding: 40px; font-style: italic; font-weight: bold; }

#stories-w { padding-bottom: 80px; }
    #stories-w > h2 { margin: 45px 0 20px; text-align: center; }
    #stories-w > .btn-w { text-align: center; margin-bottom: 40px; }
#stories { max-width: 90vw; margin: 0 auto; }
    #stories .story { width: 300px; background: #F2F2F2; padding: 18px; box-sizing: border-box; margin: 0 19px; border-radius: 5px; border: solid 1px #E8E8E8; height: 520px; }
        #stories .story > .img { height: 262px; background-position: center; background-size: cover; flex: none; border-radius: 4px; }
        #stories .story > .r { display: flex; flex-direction: column; }
            #stories .story > .r > h3 { margin: 0; color: #000; font-size: 21px; }
                #stories .story > .r > h3 > a { text-decoration: none; color: inherit; }
            #stories .story > .r > .date { color: #FF4200; font-size: 15px; margin-top: 15px; font-weight: bold; text-transform: uppercase; }
            #stories .story > .r > .desc { font-size: 16px; margin-top: 12px; margin-bottom: 10px; max-height: 80px; overflow: hidden; }
            #stories .story > .r > .b { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
                #stories .story > .r > .b > .btn-g { background: white; border: solid 1px #AAAAAA; color: #555555; box-sizing: border-box; }
                #stories .story > .r > .b > .social > .with-circle { color: #AAAAAA; font-size: 24px; width: 40px; height: 40px; margin-right: 8px; }

@media(max-width:767px) {
    #invited { font-size: 20px; }
}
