body {
    background: #fff;
}

.svg-container {
    width: 18vw;
    height: 18vw;
}

#logo-epcc,
#logo-epcc-50 {
    fill: transparent;
    fill: #fff;
    animation: fill-anim 2s forwards ease-in-out;
    /*animation-delay: .5s;*/
}

#logo-epcc-50 {
    fill-opacity: .6;
    animation: fill-anim-2 3s forwards ease-in-out;
}

#logo-epcc-50 #purple_line,
#logo-epcc-50 #purple_line-2{
    stroke-width: 2px;
    stroke-opacity: 0.95;
}

#logo-epcc-50 #El_paso_Community,
#logo-epcc-50 #college,
#logo-epcc-50 #five,
#logo-epcc-50 #zero_left,
#logo-epcc-50 #zero_right
{
    fill-opacity: 0.95;
}

/*
#logo-epcc path {
    stroke: #fff;
    stroke-dasharray: 1950;
    stroke-dashoffset: 1950;
    animation: stroke-anim 5s forwards ease-in;
    animation-delay: 1s;
}
*/

#logo-epcc .cls-1, #logo-epcc .cls-2, #logo-epcc .cls-4 {
    /*fill: #fff;*/
    fill-rule: evenodd;
}

#logo-epcc .cls-1, #logo-epcc .cls-2 {
    fill-opacity: 0.6;
    stroke: #fff;
    stroke-miterlimit: 2.61;
    stroke-width: 0.76px;
}

#logo-epcc .cls-2 {
    stroke-linecap: square;
}

#logo-epcc .cls-3 {
    fill: none;
}

#logo-epcc path,
#logo-epcc-50 path {
    stroke: #fff;
    stroke-dasharray: 1950;
    stroke-dashoffset: 1950;
}

#logo-epcc #EPCC_Logo_Text,
#logo-epcc-50 #El_paso_Community,
#logo-epcc-50 #college {
    stroke-width: 0;
    transform-origin: center;
    animation: svg-logo-text 3s forwards ease-out;
}

#logo-epcc #EPCC_Logo_Mountains_Left,
#logo-epcc #EPCC_Logo_Mountains_Right,
#logo-epcc #EPCC_Logo_Circle,
#logo-epcc-50 #_50 path {
    animation: stroke-anim-fade 5s forwards ease-in-out;
}

#logo-epcc #EPCC_Logo_Mountains_Top_Shape,
#logo-epcc-50 #_50 #yellow_stroke{
    stroke-opacity: 0.4;
    transform-origin: center;
    animation: stroke-anim 5s forwards ease-in-out;
    stroke-dashoffset: 0;
}

@keyframes svg-logo-text {
    0% {
        opacity: 0;
        /* transform: scale(0.75); */
    }
    100% {
        opacity: 1;
        /* transform: scale(1.0); */
    }
}

@keyframes stroke-anim {
    0% {
        stroke-width: 1;
        stroke-opacity: 1.0;
        stroke-dashoffset: 1950;
    }
    100% {
        stroke-width: 0.75;
        stroke-opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes stroke-anim-fade {
    0% {
        stroke-width: 1;
        stroke-opacity: 1.0;
        stroke-dashoffset: 1950;
    }
    100% {
        stroke-width: 0;
        stroke-opacity: 0.6;
        stroke-dashoffset: 0;
    }
}

@keyframes stroke-anim {
    0% {
        stroke-opacity: 1.0;
        stroke-dashoffset: 1950;
    }
    100% {
        stroke-opacity: 0.6;
        stroke-dashoffset: 0;
    }
}

@keyframes fill-anim {
    0% {
        fill: transparent;
        opacity: 0;
    }
    100% {
        fill: #fff;
        opacity: 1;
    }
}

@keyframes fill-anim-2 {
    0% {
        fill: transparent;
        fill-opacity: 0;
    }
    100% {
        fill: #fff;
        fill-opacity: 0.6;
    }
}

@keyframes arrow-scroll {
    0% {
        opacity: 0;
        bottom: 6em;
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        bottom: 3em;
    }
}

#page-title-container {
    display: none;
}

.ms-webpart-cell-vertical, .ms-webpart-chrome-vertical {
    display: block;
}

section {
    position: relative;
    background: #fff;
    z-index: 1;
}

section>.row {
    padding: 4em 0;
    position: relative;
}

section.gray {
    background: #f1f1f1;
}

section h2 {
    border: none;
    font-weight: bold;
}

.section-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.heading-large {
    font-size: 3em;
    border: none;
    margin: 0;
}

.full-width#page-main {
    padding: 0;
}

#page-title-container.show {
    display: none;
}

#videos-section {
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    /* background: #000; */
}

#videos-section #video-pause {
    display: block;
    position: absolute;
    bottom: 1em;
    left: 1em;
    z-index: 2;
}

#videos-section .special-buttons {
    margin: 2em 0 0 0;
    /* font-size: .8em; */
}

#videos-section .special-buttons .button {
    /* background: rgba(129, 35, 116, 0.9); */
}

#videos-section .mobile-buttons {
    display: none;
}

#videos-section .mobile-buttons a.button {
    margin: 5px 0 0 0;
    background: rgba(129, 35, 116, 0.9);
    font-size: 0.8em;
    width: 60vw;
    min-width: auto;
}

/* Pause button +++++++++++++++++++++ */

#video-pause {
    cursor: pointer;
    background: transparent;
    border: 0;
    text-indent: 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    opacity: 0.5;
}

#video-pause:hover {
    opacity: 1;
}

#video-pause::before, #video-pause::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border: 0 solid transparent;
    border-width: 8px 0 8px 15px;
    border-left-color: #eee;
    width: 0;
    height: 0;
    transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#video-pause::before {
    height: 16px;
}

#video-pause::after {
    left: 15px;
    top: 8px;
}

#video-pause.active::before, #video-pause.active::after {
    border-width: 0 0 0 12px;
    height: 32px;
}

#video-pause.active::after {
    left: 18px;
    top: 0;
}

/* ---------------------------------- */

#video-wrapper:empty {
    /*height: 100vh;*/
}

#video-wrapper {
    max-height: 100vh;
    padding-top: 56.25%;
    overflow: hidden;
}

#video-wrapper video {
    width: 100%;
    height: 100%;
    /*height: 100vh;*/
    /* min-width: 100%; */
    /*min-height: 100%;*/
    object-fit: cover;
    /* background-size: 100%; */
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
    /* object-fit: inherit; */
    position: absolute;
    top: 0;
    left: 0;
    /* bottom: 0; */
    /* right: 0; */
    /* opacity: 0; */
}

#video-wrapper .homepage-video {
    z-index: 1;
}

#video-wrapper .homepage-video.active {
    display: block;
    z-index: 2;
    opacity: 1;
}

#video-wrapper img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

#video-overlay {
    z-index: 2;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+30,0.3+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000', GradientType=0);
    /* IE6-9 */
}

@keyframes fadeIn-logo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn-slogan {
    from {
        opacity: 0;
        transform: translateY(-.5em);
    }
    to {
        opacity: 1;
        transform: translateY(0em);
    }
}

#video-overlay img {
    display: block;
    width: 25vw;
    animation: fadeIn-logo 2s forwards;
    transition: width .2s;
}

#video-overlay #slogan {
    opacity: 0;
    width: 60%;
    animation: fadeIn-slogan 2s forwards;
    animation-delay: 1s;
    opacity: 0;
    max-width: 500px;
    max-height: 54.163px;
    padding: 1em 0 0 0;
}

#video-overlay h2 {
    opacity: 0;
    color: #fff;
    font-size: 2.75vw;
    margin: 0;
    padding: 1em 0 0 0;
    animation: fadeIn-slogan 2s forwards;
    animation-delay: 1s;
}

#video-posters-container {
    display: none;
}

.arrow {
    z-index: 2;
    margin: 0 auto;
    position: absolute;
    bottom: 5em;
    left: 49vw;
    width: 0;
    height: 0;
    animation: arrow-scroll 3s infinite;
}

.arrow-down {
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
    border-top: 1vw solid #fff;
}

body.scrolled .arrow {
    display: none;
}

#intro-section {
    margin-top: 56.25%;
    background: #fff;
}

#intro-container {
    text-align: center;
}

#intro-container span {
    color: #888;
    font-size: 2em;
    font-weight: bold;
}

#features-container {
    display: flex;
    padding: 3em 1em;
    flex-wrap: wrap;
    flex-basis: 100%;
    flex-shrink: 1;
    justify-content: center;
}

#features-container .feature {
    width: 25%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
}

#features-container .feature.show {
    opacity: 1;
    transform: translateY(0);
}

#features-container .feature img {
    width: 100%;
}

.epcc-stat-wrapper {
    padding: 1em;
    font-family: 'Roboto Slab', sans-serif;
    position: relative;
}

.epcc-stat-wrapper a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: background .2s;
}

.epcc-stat-wrapper a:hover {
    background: rgba(0, 0, 0, 0.04);
}

.epcc-stat-icon {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.epcc-stat-border {
    border-top: 3px solid #258184;
    width: 0;
    margin-bottom: -25px;
    transition: width .5s ease-out;
}

.feature.show .epcc-stat-border {
    width: 100%;
}

.epcc-stat-icon img {
    max-width: 50px;
    max-height: 50px;
    transform: scale(0.6);
    opacity: 1;
    transition: transform .5s, opacity .5s;
}

.feature.show .epcc-stat-icon img {
    transform: scale(1.0);
    opacity: 1;
}

.epcc-stat-value {
    font-weight: bold;
    font-size: 6vw;
}

.epcc-stat-description {
    text-transform: uppercase;
    font-size: 1.25em;
}

@keyframes program-scroll {
    0% {
        opacity: 0;
        letter-spacing: -0.5em;
    }
    100% {
        opacity: 1;
        letter-spacing: 0em;
    }
}

@keyframes program-title-appear {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes program-fadein {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

#programs-section {
    overflow: hidden;
    height: 35em;
    position: relative;
}

#programs-section .section-wrapper {
    opacity: 0;
    transition: opacity .5s;
}

#programs-section .section-wrapper.show {
    opacity: 1;
}

#programs-section h2 {
    color: #fff;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
}

#programs-section .row {
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4em 0;
}

#programs-container {
    padding: 1em;
    position: absolute;
    text-align: center;
    color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#programs-container .program {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: program-fadein 5s;
}

#programs-container .program .program-image {
    background-size: cover;
    background-position: 50%;
    transition: filter .2s, -webkit-filter 2s;
    filter: blur(20px);
}

#programs-container .program .program-image.image-loaded {
    filter: none;
}

#programs-container .program .program-image, #programs-container .program .program-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#programs-container .program .program-overlay {
    background: rgba(0, 0, 0, 0.25);
}

#programs-container .program .program-title {
    position: relative;
    padding: 1em;
    border: 5px solid #fff;
    border: none;
    opacity: 0;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    line-height: 1em;
    animation: program-title-appear 5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 1s;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
    /*background: rgba(0, 0, 0, 0.2);*/
    box-sizing: border-box;
}

#programs-container .program .program-svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    position: absolute;
    left: 0;
    top: 0;
}

@keyframes svg-border {
    0% {
        stroke-dashoffset: 400;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#programs-container .program .program-rect {
    stroke: #fff;
    stroke-width: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
    animation: svg-border 4s;
}

#building-section {
    background-color: #258184;
    height: 33em;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

#building-section .heading-container {
    position: absolute;
    left: 3em;
    top: 40%;
    z-index: 1;
    background: #fff;
    padding: .2em 1em .5em 1em;
    opacity: 0;
    transform: scale(1.0);
    transition: opacity 1.5s, transform 1.5s, top 1.5s;
}

#building-section.show .heading-container {
    opacity: 1;
    transform: scale(1.0);
    top: 30%;
}

#building-section h2 {
    color: #258184;
    font-weight: normal;
    font-family: 'Open Sans';
    font-style: italic;
    margin: 0 0.1em -.75em 0;
}

#building-section h2 span {
    font-size: 3em;
    text-transform: uppercase;
    font-family: 'Open Sans';
    display: block;
    font-weight: bold;
    margin: -.35em 0em 0em 0em;
    font-style: normal;
    letter-spacing: -.08em;
}

#building-section .heading-lower {
    text-align: right;
    background: #25818421;
    position: relative;
}

#building-section .heading-lower .line {
    position: absolute;
    top: 0;
    right: 0;
    height: 50%;
    width: 0;
    border-bottom: 1px dashed #258184;
    z-index: 1;
    transition: width 2s;
}

#building-section.show .heading-lower .line {
    width: 97%;
}

#building-section .heading-lower span {
    background: #fff;
    color: #fff;
    font-style: italic;
    padding: 0 .5em;
    font-size: 1.25em;
    z-index: 2;
    position: relative;
    display: inline-block;
    margin-right: 4em;
    box-shadow: 0px 0px 0px 1px #258184 inset;
    transition: margin-right 2s, background 2s;
}

#building-section.show .heading-lower span {
    margin-right: 0em;
    background: #258184;
}

#building-section .heading-lower a {
    color: #fff;
    text-decoration: none;
}

#building-section .img-building-container {
    height: 30em;
    width: 90vw;
    position: relative;
    margin-bottom: 2em;
}

#building-section .building-image {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0.95);
    transition: opacity 1s, transform 1s;
}

#building-section .building-image.active {
    opacity: 1;
    transform: scale(1.0);
}

#news-section {
    min-height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #efefef;
    justify-content: center;
    padding: 1em;
}

#news-section .newsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 1em 0;
    padding: 0;
    width: 100%;
}

#news-section .newsContainerPrimary {
    width: 70%;
    display: flex;
}

#news-section .newsContainerSecondary {
    width: 30%;
    font-size: .75em;
    display: flex;
    flex-direction: column;
}

#news-section .newsBlock {
    display: flex;
    position: relative;
    margin: .5em 0;
    opacity: 0;
}

#news-section .newsContainerPrimary .newsBlock {
    min-height: 23em;
    flex: 1 0 30%;
    margin: 0;
    margin-right: 1em;
}

#news-section .newsContainerSecondary .newsBlock:first-child {
    margin-top: 0;
}

#news-section .newsContainerSecondary .newsBlock:last-child {
    margin-bottom: 0;
}

@keyframes showNewsBlock {
    from {
        opacity: 0;
        transform: translateY(1em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#news-section .newsBlock.show {
    animation: showNewsBlock .5s forwards;
}

#news-section .titleBox {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    padding: .5em;
    background: rgba(39, 129, 131, .8);
    transition: background .2s;
}

#news-section .newsContainerSecondary .titleBox {
    background: #258184;
}

#news-section a.articleLink:hover .titleBox, #news-section a.articleLink:focus .titleBox {
    background: #7D276F
}

#news-section .newsText {
    color: #fff;
    font-size: 1.5em;
    font-family: 'Roboto Slab', serif;
}

#news-section .newsImage {
    position: absolute;
    transition: opacity .2s;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#news-section .newsContainerSecondary .newsImage {
    position: relative;
    width: 7em;
    min-height: 7em;
    align-self: stretch;
}

#news-section .newsText a {
    color: #258184;
    text-decoration: none;
}

#news-section a.articleLink {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.05);
    transition: box-shadow .2s, transform .2s;
}

#news-section a.articleLink:hover, #news-section a.articleLink:focus {
    box-shadow: 0px 0px 0px 0px rgb(0, 0, 0, .5);
    transform: translateX(5px) translateY(5px);
}

#news-section .newsContainerSecondary a.articleLink {
    align-items: stretch;
}

#news-section a.articleLink, #news-section .titleBox {}

#news-section .newsDesc_CQexp {
    display: none;
}

#locations-section {
    min-height: 700px;
    /* background: url('/PublishingImages/EPMap_06_mapOnly.jpg'); */
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
}

#locations-section .section-wrapper {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#locations-section #locations-overlay {
    position: absolute;
    /* background: url(/PublishingImages/EPMap_06_markers.png); */
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#locations-section .section-wrapper.show, #locations-section .section-wrapper.show #locations-overlay {
    opacity: 1;
    transform: translate(0px);
}

#locations-section .row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    padding: 5em 0;
    align-items: center;
    width: 100%;
}

#testimonial-section {
    z-index: 2;
}

#footer {
    z-index: 1;
}

/* Sharepoint overrides +++++++++++++++++++++++++++++++++++++ */

.ms-webpartzone-cell {
    margin: 0;
}

/* Hide html preview while editing */

.ms-rte-embeddialog-preview {
    display: none;
}

/* ---------------------------------------------------------- */

@media screen and (min-width: 1400px) {
    .epcc-stat-value {
        font-size: 4.5em;
    }
}

@media screen and (max-width: 1024px) {
    .svg-container {
        width: 26vw;
        height: 26vw;
    }
    #video-overlay h2 {
        font-size: 4vw;
    }
    #videos-section {
        position: relative;
    }
    #video-wrapper.mobile {
        padding: 0;
    }
    .arrow {
        display: none;
    }
    #intro-section {
        margin-top: 0;
    }
    #features-container .feature {
        width: 50%;
        margin: 1em 0;
    }
    .epcc-stat-value {
        font-size: 10vw;
    }
    #building-section .heading-container {
        font-size: .75em;
        bottom: 0;
        top: auto;
        position: relative;
        margin: 0 auto;
        left: 0;
        background: transparent;
    }
    #building-section.show .heading-container {
        top: 2em;
    }
    #building-section .heading-container h2 {
        color: #fff;
    }
    #building-section .heading-lower .line {
        border-color: #fff;
    }
    #building-section .heading-lower span {
        background: #258184;
        box-shadow: 0px 0px 0px 1px #fff inset;
    }
    #building-section.show .heading-lower span {
        background: #fff;
    }
    #building-section .heading-lower span a {
        color: #258184;
    }
    #building-section .img-building-container {
        margin-bottom: 1em;
    }
    #news-section .newsText {
        font-size: 1.25em;
    }
}

@media screen and (max-width: 768px) {
    .svg-container {
        width: 30vw;
        height: 28vw;
    }
    #video-overlay h2 {
        font-size: 5vw;
    }
    #videos-section {
        max-height: 100vh;
    }

    #videos-section .special-buttons a.button{        
        width: 18vw;        
        font-size: .8em;
    }

    #videos-section .mobile-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 1em 0 0 0;
    }

    #videos-section .mobile-buttons a.button {
        width: 18vw;
        margin: 0 .25em;
    }

    #video-overlay img {
        /* width: 45vw; */
        width: 85%;
    }
    #videos-section .livestream-title-long {
        display: none;
    }
    #videos-section .livestream-wrapper {
        /* font-size: 2.5vw; */
        top: 0;
        left: 0;
        padding: 0;
        width: auto;
    }
    .heading-large {
        font-size: 2em;
    }
    #features-container .feature {
        width: 100%;
    }
    .epcc-stat-value {
        font-size: 14vw;
    }
    #programs-container .program {
        font-size: .65em;
    }
    #building-section {
        height: 70vw;
    }
    #building-section .heading-container {
        font-size: .5em;
        margin-bottom: 2em;
    }
    #building-section.show .heading-lower span {
        font-size: 2em;
    }
    #news-section .newsContainer, #news-section .newsContainerPrimary, #news-section .newsContainerSecondary, #news-section .newsBlock {
        display: block;
        width: 100%;
        font-size: 1em;
    }
    #news-section .newsContainerPrimary .newsBlock, #news-section .newsContainerSecondary .newsBlock {
        min-height: auto;
        margin-right: 0;
        margin: .5em 0;
    }
    #news-section .titleBox {
        background: #258184;
    }
    #news-section a.articleLink {
        align-items: stretch;
    }
    #news-section .newsImage {
        position: relative;
        width: 7em;
        min-height: 7em;
    }
}

@media only screen and (max-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    

    #videos-section .special-buttons{   
        width: 90vw;
    }
    
    #videos-section .special-buttons a.button{   
        width: 60vw;
        min-width: auto;
    }

    #videos-section .mobile-buttons {
        bottom: 0;
        margin: 1em 0 0 0;
        width: 90vw;
        z-index: 2;
        flex-direction: column;
        align-items: center;
    }
    #videos-section .mobile-buttons a.button {
        width: 60vw;
        margin: 5px 0 0 0;
    }
}

/* iPad Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    #videos-section .mobile-buttons {
        flex-direction: row;
        justify-content: center;
    }
    #videos-section .mobile-buttons a.button {
        width: 18vw;
        margin: 0 .25em;
    }
}

@media screen and (max-width: 480px) and (orientation: landscape) {
    .svg-container {
        width: 27vw;
        height: 25vw;
    }
}

@media screen and (max-width: 320px) {
    .svg-container {
        width: 43vw;
        height: 43vw;
    }
    #video-overlay h2 {
        font-size: 7vw;
    }
    #news-section .newsImage {
        display: none;
    }
}