.video-container {
    position: relative;
    /*     padding-bottom: 56.25%;
     */
    padding-bottom: 41.66667%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rkchallenge #mainContainer {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: top;
    background-color: #eee;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.rkchallenge .fb-share {
    content: url("../../images/fbshare.png");
    display: inline-block;
    vertical-align: inherit;
    cursor: pointer;
}

.rkchallenge #bodyContent {
    margin-top: 1em;
    margin-bottom: 1em;
    height: auto;
    overflow: hidden;
    border-radius: .5em;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    background-color: #fff;
}

.rkchallenge #banner {
    width: inherit;
    max-width: 100%;
    height: auto;
}

.rkchallenge ul {
    padding-left: 1.5em;
}

.rkchallenge li {
    font-size: 0.9em;
    font-weight: normal;
}

/**/
.rkchallenge h1 {
    font-weight: normal;
    margin-bottom: .25em;
    font-size: 1.3em;
}

/*Get Moving*/
.rkchallenge h4 {
    color: #444;
    font-size: 1em;
    line-height: 1.375em;
    font-weight: bold;
}

.rkchallenge #challengeDescription {
    /*padding-left:3em;*/
}

.rkchallenge #leftColumn {
    /*padding-top:1em;*/
}

.rkchallenge #leftColumn.columns {
    padding-right: 0;
}

.rkchallenge #daysLeftContainer {
    padding-top: 1em;
    padding-bottom: 1em;
}

.rkchallenge #leftColumn .row,
.rkchallenge #rightColumn .row {
    padding-left: 30px;
    padding-bottom: 1em;
    padding-right: 50px;
}

.rkchallenge #timeRemaining {
    color: #777777;
    padding-left: 0;
    padding-bottom: .8em;
    text-align: center;
    font-size: 1.5em;
    border-bottom: 1px solid #ccc;
}

.rkchallenge #daysLeftNumber {
    font-weight: bold;
    line-height: 1.05em;
    display: inline-block;
}

.rkchallenge #daysLeft {
    display: inline-block;
}

.rkchallenge #joinButton,
.rkchallenge #brandedButton,
.challengeUnavailable #challengesButton {
    text-align: center;
    margin-bottom: 0;
    padding-top: 1.5em;
    text-shadow: .04em .04em gray;
    font-size: 1.05em;
}

.rkchallenge button.join, .rkchallenge .button.join,
.rkchallenge button.branded, .rkchallenge .button.branded {
    color: white;
    border: none;
    width: 90%;
}

.rkchallenge #enrolledButton,
.rkchallenge #accomplishedButton,
.rkchallenge #expiredButton {
    text-align: center;
    margin-bottom: 0;
    padding-top: 1.5em;
    text-shadow: .04em .04em #E9E9E9;
    font-size: 1.05em;
}

.rkchallenge button.enrolled, .rkchallenge .button.enrolled,
.rkchallenge button.accomplished, .rkchallenge .button.accomplished,
.rkchallenge button.expired, .rkchallenge .button.expired {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    width: 90%;

    box-shadow: 0 0 0 0 #E9E9E9;
    -moz-box-shadow: 0 0 0 0 #E9E9E9;
    -webkit-box-shadow: 0 0 0 0 #E9E9E9;
}

.rkchallenge #challengeRewardsContainer p,
.rkchallenge #challengeDetailsContainer p,
.rkchallenge #bigCarrot p,
.rkchallenge #getMoving p {
    margin-top: .5em;
    font-size: 0.9em;
}

.rkchallenge #challengeRewardsContainer .dateRange {
    text-transform: uppercase;
    font-weight: bold;
    color: #777;
}

.rkchallenge #leftColumn h1:first-child {
    margin-top: 1em;
}

.rkchallenge #leftColumn h1:not(:first-child) {
    margin-top: 1.5em;
}

.rkchallenge #leftColumn .row:not(:first-child) {
    padding-right: 50px;
}

.rkchallenge #rightColumn {
    padding-bottom: 1.5em;
}

.rkchallenge #getMoving,
.rkchallenge #bigCarrot {
    padding-top: 1em;
    padding-bottom: 1em;
}

.rkchallenge #agreement {
    padding-top: 1em;
}

.rkchallenge p.smallPrint {
    font-size: .75em;
    font-weight: normal;
}

.rkchallenge #socialShare {
    margin-top: 1em;
}

/* challenge styles for challenge unavailable page */

.challengeUnavailable {
    padding-left: 45px;
    padding-right: 45px;
    border-bottom: 1px solid #CCCCCC;
    text-align: center;
}

.challengeUnavailable h1 {
    padding-top: 1.0em;
    font-weight: bold;
}

.challengeUnavailable p {
    padding-top: 0.6em;
    padding-bottom: 0;
}

.challengeUnavailableDescription h1 {
    font-weight: bold;
}

.challengeUnavailable .button.challenges, .challengeUnavailable button.challenges {
    background-color: #1ccc66;
    box-shadow: 0 2px 0 0 #19b55a;
    -moz-box-shadow: 0 2px 0 0 #19b55a;
    -webkit-box-shadow: 0 2px 0 0 #19b55a;
    margin-bottom: 1.8em;
    margin-top: -0.8em;
}

.challengeUnavailable button.challenges:hover,
.challengeUnavailable .button.challenges:hover,
.challengeUnavailable button.challenges:focus,
.challengeUnavailable .button.challenges:focus {
    background: #19b55a;
}

/* challenge item styles for landing page */

.challengesOverview {
    padding-left: 45px;
    padding-right: 45px;
    border-bottom: 1px solid #CCCCCC;
}

.challengesOverviewDescription {
    padding-top: 1.4em;
    padding-bottom: 0.6em;
}

.challengesOverviewDescription h1 {
    font-weight: bold;
}

.challengeItems {
    padding-left: 30px;
    padding-right: 30px;
}

.challengeItemContainer {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

@media only screen and (min-width: 768px) {
    .challengeItemContainer {
        height: 350px;
    }
}

.challengeItemImage {
    height: auto;
    overflow: hidden;
    border-radius: .3em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    box-shadow: 0 0 2px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .25);
    background-color: #fff;
}

.challengeItemDescription {
    padding-top: 0.8em;
    padding-bottom: 1em;
}

.challengeItemImage,
.challengeItemDescription {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

a .challengeItemDescription h2 {
    color: #25b7fa;
    text-decoration: none;
    line-height: inherit;
    font-size: 21px;
}

a:hover .challengeItemDescription h2,
a:focus .challengeItemDescription h2 {
    color: #1596d2;
}

.challengeDates {
    color: #333333;
    font-size: 16px;
}

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

    .rkchallenge .bottomBorder {
        border-bottom: 1px solid #DADADA;
    }

    .rkchallenge .leftBorder {
        border-left: 1px solid #DADADA;
    }

    .rkchallenge .rightBorder {
        border-right: 1px solid #DADADA;
    }

    .rkchallenge #timeRemaining {
        text-align: left;
        border-bottom-style: none;
        padding-bottom: .3em;
    }

    .rkchallenge #daysLeftNumber {
        font-size: 3.5em;
        display: block;
    }

    .rkchallenge #daysLeft {
        display: block;
        font-weight: normal;
        color: #777777;
        font-size: .7em;
        margin: 0;
    }

    .rkchallenge #joinButton,
    .rkchallenge #enrolledButton,
    .rkchallenge #accomplishedButton,
    .rkchallenge #expiredButton,
    .challengeUnavailable #challengesButton {
        padding-top: 2em;
    }

    .rkchallenge #brandedButton {
        padding-bottom: 1em;
        padding-top: 1em;
    }

    .rkchallenge #leftColumn .row,
    .rkchallenge #rightColumn .row {
        padding-right: 0;
    }

    .rkchallenge #leftColumn h1:first-child {
        margin-top: 1.5em;
    }

    .rkchallenge #leftColumn h1:not(:first-child) {
        margin-top: 1.5em;
    }

    .rkchallenge .dateRange {
        color: #777777;
        font-size: .9em;
        margin: 0;
    }

    .rkchallenge #rightColumn {
        padding-left: 0;
    }

    .rkchallenge #rightColumn .row {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/* DEFAULT STYLE */
/* 

css aspect ratio magic: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio 
- inline-block container, buffer with padding %, and wrapper fit to frame ensures ratio
- ratio defined as percentage of padding
- images set as background images for easy swapping out between media
- background-size: 100% 100% ensures dynamic resizing

*/
.rkchallenge .bannerContainer {
    display: inline-block;
    position: relative;
    width: 100%;
}

.rkchallenge .bannerBuffer {
    padding-top: 41.66667%; /* 12:5 aspect ratio */
}

.rkchallenge .bannerWrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

img#rewardImage {
    display: block;
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* desktop - use standard, e.g. ${bannerName}.jpg */
@media only screen and (min-width: 768px) {
    .rkchallenge #bannerBuffer {
        padding-top: 41.66667%; /* 12:5 aspect ratio */
    }
}

/* NON-MOBILE RETINA - use @2x, e.g. ${bannerName}@2x.jpg */
@media all and (-webkit-min-device-pixel-ratio: 2), all and (min--moz-device-pixel-ratio: 2), all and (min-device-pixel-ratio: 2) {
    .rkchallenge #bannerBuffer {
        padding-top: 41.66667%; /* 12:5 aspect ratio */
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 768px) {
    .rkchallenge #bannerBuffer {
        padding-top: 41.66667%; /* 12:5 aspect ratio */
    }
}

/* IPHONE, ANDROID MDPI */
@media screen and (max-width: 568px) {
    .rkchallenge #bannerBuffer {
        padding-top: 53.75%; /* 320:172 aspect ratio */
    }

    .rkchallenge #enrolledButton,
    .rkchallenge #accomplishedButton,
    .rkchallenge #expiredButton {
        font-size: 0.95em !important;
    }

    .rkchallenge button.join, .rkchallenge .button.join,
    .rkchallenge button.branded, .rkchallenge .button.branded,
    .rkchallenge button.enrolled, .rkchallenge .button.enrolled,
    .rkchallenge button.accomplished, .rkchallenge .button.accomplished,
    .rkchallenge button.expired, .rkchallenge .button.expired,
    .challengeUnavailable #challengesButton {
        width: 96% !important;
    }
}

/* ANDROID HDPI */
@media screen and (max-width: 568px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 568px) and (min--moz-device-pixel-ratio: 1.5), screen and (max-width: 568px) and (min-device-pixel-ratio: 1.5) {
    .rkchallenge #bannerBuffer {
        padding-top: 53.54166%; /* 480:257 aspect ratio */
    }

    .rkchallenge #enrolledButton,
    .rkchallenge #accomplishedButton,
    .rkchallenge #expiredButton {
        font-size: 0.95em !important;
    }

    .rkchallenge button.join, .rkchallenge .button.join,
    .rkchallenge button.branded, .rkchallenge .button.branded,
    .rkchallenge button.enrolled, .rkchallenge .button.enrolled,
    .rkchallenge button.accomplished, .rkchallenge .button.accomplished,
    .rkchallenge button.expired, .rkchallenge .button.expired,
    .challengeUnavailable #challengesButton {
        width: 96% !important;
    }
}

/* IPHONE RETINA, ANDROID XHDPI - use _mobile@2x, e.g. ${bannerName}_mobile@2x.jpg */
@media screen and (max-width: 568px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 568px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 568px) and (min-device-pixel-ratio: 2) {
    .rkchallenge #bannerBuffer {
        padding-top: 53.59375%; /* 640:343 aspect ratio */
    }

    .rkchallenge #enrolledButton,
    .rkchallenge #accomplishedButton,
    .rkchallenge #expiredButton {
        font-size: 0.95em !important;
    }

    .rkchallenge button.join, .rkchallenge .button.join,
    .rkchallenge button.branded, .rkchallenge .button.branded,
    .rkchallenge button.enrolled, .rkchallenge .button.enrolled,
    .rkchallenge button.accomplished, .rkchallenge .button.accomplished,
    .rkchallenge button.expired, .rkchallenge .button.expired,
    .challengeUnavailable #challengesButton {
        width: 96% !important;
    }
}