@media (min-width: 851px){
/***********************
STRUCTURE
***********************/
/* Header */
#mobile-menu-trigger {display: none;}
}

@media screen and (max-width: 1080px){
/***********************
STRUCTURE
***********************/
/* Footer */
#footer {padding-top: 200px}
#footer #footer-first {top: -125px}


/***********************
PAGES
***********************/
/* Home */
.home .form-donate {width: 100%}
.home .form-donate p {float: none; margin-bottom: 20px}
.home .form-donate form {float: none; width: 100%}
.home .form-donate form label.label-radio {display: block; width: calc(15% - 5px); margin-right: 5px; float: left}
.home .form-donate form .amount-custom {display: block; width: calc(20% - 5px); margin-right: 5px; float: left}
.home .form-donate form input[type=text] {width: 100%}
.home .form-donate form input[type=submit] {display: block; float: left; width: 20%}
.home .form-donate form input[type=submit]:hover {background-color: #273782; color: #fff}


/***********************
MODULES
***********************/
/* Banners */
.banner.banner-boxes .box-blue {width: 50%; position: absolute; bottom: 0; left: 0; background-color: #273782; padding: 50px 50px 50px 0}
.banner.banner-boxes .box-red {width: 50%; position: absolute; bottom: 0; right: 0; background-color: #da1a32; padding: 30px 0 30px 30px}
}

@media screen and (max-width: 960px){
/***********************
STRUCTURE
***********************/
/* Page Layout */
html, body {font-size: .8em}

/* Footer */
#footer {padding-top: 175px}
#footer #footer-first {top: -110px}
.first-padded-bottom {padding-bottom: 160px !important}

/***********************
MODULES
***********************/
/* Video Feed */
.video-feed .video {width: calc(50% - 15px); margin-right: 15px; padding: 15px; margin-bottom: 20px}
.video-feed .video .image {/*height: 250px*/}
.video-feed .video .image .btn-play {position: absolute; bottom: 15px; left: 15px}
.video-feed .video.last {width: calc(50% - 15px); margin-right: 15px !important}
.video-feed .video.even {width: 50%; margin-right: 0 !important}
}

@media screen and (max-width: 850px){
/***********************
STRUCTURE
***********************/
/* Header */
#mobile-menu-trigger {display: block}
#mobile-menu-trigger {right: 0; top: 30px; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; z-index: 9999;  display: block;width: 35px;height: 25px;position: absolute;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
#mobile-menu-trigger span {display: block;position: absolute;height: 4px;width: 100%;background-color: #fff;border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.no-banner #mobile-menu-trigger span {background-color: #303030}
#mobile-menu-trigger span:nth-child(1) {top: 0px;}
#mobile-menu-trigger span:nth-child(2),#mobile-menu-trigger span:nth-child(3) {top: 10px;}
#mobile-menu-trigger span:nth-child(4) {top: 20px;}
#mobile-menu-trigger.is-open span {background-color: #303030}
#mobile-menu-trigger.is-open span:nth-child(1) {top: 18px;width: 0%;left: 50%;}
#mobile-menu-trigger.is-open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#mobile-menu-trigger.is-open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#mobile-menu-trigger.is-open span:nth-child(4) {top: 18px;width: 0%;left: 50%;}

#header #header-nav {position: fixed !important; top: 0; right: -100% !important; z-index: 1; width: 100%; height: 100vh; overflow: scroll; padding-top: 155px; background-color: #fafafa; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
#header #header-nav ul {display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column;}
#header.is-mobile-open #header-nav {right: 0 !important}
#header.is-mobile-open #header-logo {background-image: url(../images/site/logo-color.svg)}
.overflow-hidden {overflow: hidden; height: 100%;}


/***********************
LAYOUTS
***********************/
/* Full Width */
.layout-full-width {padding-top: 40px}

/* Sidebar */
.layout-sidebar .main-content, .layout-sidebar .sidebar {padding-top: 50px; padding-bottom: 50px}
.layout-sidebar .main-content {width: 100%; float: none; padding-bottom: 50px !important}
.layout-sidebar .sidebar {width: 100%; float: none}
.layout-sidebar.layout-sidebar-right .main-content {padding-right: 0}
.layout-sidebar.layout-sidebar-right .sidebar {padding-left: 0}
.layout-sidebar.layout-sidebar-right .sidebar:after {left: -50%; width: 200%}


/***********************
PAGES
***********************/
/* Home */
.home .form-donate form label.label-radio {width: calc(25% - 5px); margin-bottom: 5px}
.home .form-donate form .amount-custom {width: calc(50% - 5px)}
.home .form-donate form input[type=submit] {width: calc(50% - 5px); margin-right: 5px;}


/***********************
MODULES
***********************/
/* Banners */
.banner {height: 400px}

/* Alternating Boxes */
.alternating-boxes .row {margin-bottom: 60px}
.alternating-boxes .text {width: 100%; margin-right: 0; margin-bottom: 30px}
.alternating-boxes .row.flex-reverse .text {margin-left: 0}
.alternating-boxes .image {width: 100%; height: 350px}

.gotv .left, .gotv .right {width: 100% !important; float: none; text-align: center; margin: 0px auto;}
.gotv .desk {display: none;}
.gotv .mobile {display: block;}
.gotv main .left, .gotv main .right {text-align: left;}
.gotv .right {text-align: left;}
.gotv .blue-divider .left, .gotv .blue-divider .right {text-align: center;}
.gotv .right h2 {margin: 20px auto 10px;}
.gotv a.btn {margin-bottom: 20px;}
}

@media screen and (max-width: 815px){
.full-bg-layout .form {padding: 20px}
.full-bg-layout .form h3 {display: block; float: none; text-align: center; margin-right: 0}
.full-bg-layout .form .label {width: calc(25% - 4px); display: block; margin: 0 2px 0 2px}
.full-bg-layout .form input[type=submit] {float: none}
.full-bg-layout .video .play {width: 60px; height: 60px; margin-left: -30px; margin-top: -30px}
}

@media screen and (max-width: 768px){
/***********************
STRUCTURE
***********************/
/* Footer */
#footer {padding-top: 150px}
#footer #footer-first {top: -90px}
.first-padded-bottom {padding-bottom: 140px !important}


/***********************
LAYOUTS
***********************/
/* Full Width */
.no-banner .layout-full-width {padding-top: 200px}


/***********************
MODULES
***********************/
/* Banners */
.banner.banner-boxes {height: auto !important}
.banner.banner-boxes .image {position: relative; height: 500px}
.banner.banner-boxes .container {position: relative; left: auto; top: auto; transform: none; height: auto}
.banner.banner-boxes .box-blue {width: 100%; position: relative; bottom: auto; left: auto; padding: 40px 0}
.banner.banner-boxes .box-blue:before {width: 200%; right: -50%}
.banner.banner-boxes .box-red {width: 100%; position: relative; bottom: auto; right: auto; padding: 40px 0}
.banner.banner-boxes .box-red:after {width: 200%; left: -50%}
.banner.banner-boxes .box .content {position: relative; z-index: 2}

/* Featured Post */
.featured-post {padding: 40px 0; margin-bottom: 40px}
.featured-post .image {width: 100%; margin-right: 0; /*min-height: 300px*/}
.featured-post .text {width: 100%; padding: 40px 0 0 0}

/* Video Feed */
.video-feed .video .image {/*height: 200px*/}
.video-feed .video h3 {font-size: 21px}
.video-feed .video p {font-size: 14px}
}

@media screen and (max-width: 650px){
/***********************
STRUCTURE
***********************/
/* Footer */
#footer {padding-top: 125px}
#footer #footer-first {top: -75px}
}

@media screen and (max-width: 600px){
/***********************
LAYOUTS
***********************/
/* Full Width */
.no-banner .layout-full-width {padding-top: 190px}


/***********************
MODULES
***********************/
/* Banners */
.banner.banner-boxes .image {height: 400px}

/* Alternating Boxes */
.alternating-boxes .image {height: 250px}

/* Featured Post */
.featured-post .image {/*min-height: 275px*/}

/* Video Feed */
.video-feed .video {width: 100%; margin-right: 0; padding: 0; margin: 25px 0}
.video-feed .video:hover {box-shadow: none}
.video-feed .video .image {/*height: 275px*/}
.video-feed .video .image .btn-play {position: absolute; bottom: 15px; left: 15px}
.video-feed .video.last {width: 100%; margin-right: 0 !important}
.video-feed .video.even {width: 100%; margin-right: 0 !important}
}

@media screen and (max-width: 550px){
/***********************
STRUCTURE
***********************/

/* Footer */
#footer {padding-top: 110px}
#footer #footer-first {top: -65px}
.first-padded-bottom {padding-bottom: 110px !important}
.gotv .blue-divider h2 br {display: block;}
}

@media screen and (max-width: 480px){
/***********************
STRUCTURE
***********************/
/* Footer */
#footer {padding-top: 95px}
#footer #footer-first {top: -55px}


/***********************
LAYOUTS
***********************/
/* Full Width */
.layout-full-width {padding-top: 30px}


/***********************
MODULES
***********************/
/* Alternating Boxes */
.alternating-boxes .row {margin-bottom: 50px}

/* Featured Post */
.featured-post .image {/*min-height: 250px*/}

/* Video Feed */
.video-feed .video .image {/*height: 250px*/}
}

@media screen and (max-width: 400px){
/***********************
STRUCTURE
***********************/
/* Footer */
#footer {padding-top: 80px}
#footer #footer-first {top: -44px}
.first-padded-bottom {padding-bottom: 80px !important}
.full-bg-layout .form {padding: 15px}

/***********************
MODULES
***********************/
/* Alternating Boxes */
.alternating-boxes .image {height: 200px}
}

@media screen and (max-height: 800px){
/***********************
MODULES
***********************/
/* Banners */
.banner.banner-tall {height: 650px}
}