/* ====== NATIVE ELEMENTS ====== */
body { font: 300 1rem/1.65 "Raleway", Arial, Helvetica, sans-serif; }
p { font-size: 0.84rem; }

section header { text-align: center; }

footer { background-color: rgb(17, 17, 17); color: rgba(255, 255, 255, 0.5); display: flex; padding: 8rem 0 6rem 0; }


/* ====== FONT AND TYPE ====== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { color: rgb(85, 85, 85); font-family: inherit; margin-bottom: 1.5rem; text-transform: uppercase; }
h1, .h1 { font-size: 4rem; font-weight: 300; }
h2, .h2 { font-size: 2.25rem; line-height: 1.3; font-weight: 200; }
h3, .h3 { font-size: 1.25rem; font-weight: 300; line-height: 1.5; }
h4, .h4 { font-size: 1rem; font-weight: 300; line-height: 1.25; }

.card-section p { font-size: 0.84rem; }
.author .credit { font-size: 0.75rem; margin-left: 1rem; }
.testimonials blockquote { font-size: 0.9rem; }
.photo-credit { margin-top: 4rem; font-weight: 400; font-size: 0.9rem; }

.list-underlined, .social { font-size: 0.9rem; }
.list-underlined li ~ li { border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 0.5rem 0; }
.list-underlined li:first-of-type { padding-bottom: 0.5rem; }

ul.social li { margin-bottom: 1rem; }
.social-icon { border-radius: 4px; color: rgb(255, 255, 255); display: inline-block; margin-right: 1rem; text-align: center; width: 2rem; height: 2rem; line-height: 2rem; background: rgba(0, 0, 0, 0.5); }


/* ====== COLOURS ====== */
.contrast { color: rgba(255, 255, 255, 1); }
a, a:visited, a:active, a:hover { color: rgb(206, 27, 40); }
.card-section a { color: inherit; }
.credit strong { color: rgba(206, 27, 40, 1); }

footer a, footer a:visited { color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease-in-out; }
    footer a:hover { color: rgb(206, 27, 40); }


/* ====== BLOCK ELEMENTS ====== */
body::before { background: transparent url('/content/bg.jpg') no-repeat; background-size: cover; background-attachment: fixed; content: ' '; height: 100%; opacity: 0.1; position: fixed; width: 100%; z-index: -1; }
.wrapper { padding: 8rem 0 6rem; }
.container { margin: 0 auto; width: 76%; }
section header { text-align: center; margin-bottom: 4rem; }
.highlights, .testimonials { display: flex; justify-content: space-between; flex-flow: row wrap; }
.testimonials { }
.copyright { border-top: 1px solid; font-size: 0.8rem; opacity: 0.5; padding: 2rem 0; text-align: center; }

.page-content header { align-items: center; background-position: center 30%; background-repeat: no-repeat; background-size: cover; border-top: 0; display: flex; justify-content: center; height: 15rem !important; min-height: 15rem; position: relative; }
    .page-content header::before { background: linear-gradient(135deg, rgb(206, 27, 40) 0%, rgb(17, 17, 17) 74%); content: ' '; display: block; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: 1; }
    .page-content header > div { z-index: 2; }
.page-content section { margin-top: 6rem; }
.page-content section .container { background-color: rgba(255, 255, 255, 1); padding: 3rem; }

.banner { background-color: rgb(17, 17, 17); color: rgba(255, 255, 255, 0.5); display: flex; justify-content: center; background-image: url("/content/girls-code.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; border-top: 0; height: 35rem !important; min-height: 35rem; overflow: hidden; position: relative; text-align: center; width: 100%; }
    .banner::before { transition: opacity 3s ease; transition-delay: 1.25s; background: rgb(17, 17, 17); content: ''; display: block; height: 100%; left: 0; opacity: 0.45; position: absolute; top: 0; width: 100%; z-index: 1; }
    .banner::after { background: linear-gradient(135deg, rgb(206, 27, 40) 0%, rgb(17, 17, 17) 74%); content: ' '; display: block; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: 1; }
    .banner > .container { align-self: center; transform: scale(1.0); transition: opacity 1s ease, transform 1s ease; opacity: 1; position: relative; z-index: 3; }
    .banner video { transform: translateX(50%) translateY(50%); bottom: 50%; height: auto; min-height: 100%; min-width: 100%; overflow: hidden; position: absolute; right: 50%; width: auto; }

article.page-content { margin-bottom: 8rem; }
footer .content { display: flex; }


/* ====== CONTAINED ELEMENTS ====== */
    .highlights .card { flex-basis: 22%; margin: 1rem; }
.highlights .card-divider, .testimonials .content { padding: 3rem 3rem 1rem; }
.highlights .card-section { background-color: rgba(255, 255, 255, 1); padding: 1rem 3rem 3rem; }
.simple { background-color: rgba(255, 255, 255, 1); }
.cta { background-color: rgb(206, 27, 40); color: rgba(255, 255, 255, 0.75); background-attachment: fixed; background-image: linear-gradient(rgba(206, 27, 40, 0.25), rgba(206, 27, 40, 0.25)), url('/content/cta01.jpg'); background-position: bottom; background-repeat: no-repeat; background-size: cover; position: relative; text-align: center; z-index: 1; }
.testimonials section { background-color: rgba(255, 255, 255, 1); width: calc(33.33% + -2rem); }
.author { display: flex; align-items: center; }

footer .content section { flex-basis: 22%; }
footer section:first-of-type { flex-grow: 2; padding-right: 4rem; }
footer section:last-of-type { padding-left: 4rem; }

/* ====== OBJECTS ====== */
.card-icon { font-size: 5rem; }
.card-divider h3 { margin-top: 1rem; }
.testimonials blockquote { border-left-width: 0.5rem; font-style: italic; margin-bottom: 2rem; }
.author .image { flex-basis: 50%; }
.testimonials .image img { border-radius: 100%; max-width: 100%; }

/* ====== Media ====== */
.media, img.media { padding: 0.4rem; margin-bottom: 1rem; }
    .media.right { float: right; margin-left: 2rem; }
    .media.left { float: left; margin-right: 2rem; }

/* ====== FOUNDATION OVERRIDES ====== */

.highlights .card-divider { display: unset; flex: unset; text-align: center; }
.top-bar, .top-bar ul { background-color: rgba(0, 0, 0, 1); padding: 0.2rem 0; }
.menu .menu-text { padding: unset; }
.menu-text a, .menu a, .title-bar-title a { font-size: 0.9rem; color: rgba(255, 255, 255, 1); }



@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    h1 { font-size: 3rem; margin-bottom: 0.5rem; }

    section header { margin-bottom: 2rem; }

    .wrapper { padding: 3rem 0 2rem; }
    .container { max-width: calc(100% - 3rem); }

    .highlights, .testimonials { flex-direction: column; }
        .highlights .card { margin: 0 0 1rem; }
        .highlights .card-section { padding: 1rem; }

    .testimonials section { width: unset; }
        .testimonials .content { padding: 2rem; }

    footer .content { flex-direction: column; }
    footer section:first-of-type { flex-grow: unset; padding-right: 0; }
    footer section:last-of-type { padding-left: 0; }

}