@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@media (max-width:480px) {
    .LessonContent h1,
    .member-area .getting_started ol>li:before,
    a,
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        font-family: 'Varela Round', Arial, Helvetica, sans-serif!important
    }
    .LessonContent h1,
    a,
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        word-wrap: break-word
    }
    #footer {
        padding: 10px 20px 5px;
        margin-top: 30px
    }
    #main-content {
        margin-bottom: 0;
        box-shadow: none
    }
    #nav-icon1 {
        width: 30px;
        height: 30px;
        position: relative;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        -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;
        display: inline-block
    }
    #nav-icon1 span {
        display: block;
        position: absolute;
        height: 2px;
        width: 17px;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 6px;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out
    }
    .enlarge-text,
    .ilad-hide,
    .linebreak hr,
    .row.linegray,
    .shrink-text {
        display: none
    }
    #nav-icon1 span:nth-child(1) {
        top: 8px
    }
    #nav-icon1 span:nth-child(2) {
        top: 13px
    }
    #nav-icon1 span:nth-child(3) {
        top: 18px
    }
    #nav-icon1:not(.collapsed) span:nth-child(1) {
        top: 14px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg)
    }
    #nav-icon1:not(.collapsed) span:nth-child(2) {
        opacity: 0;
        left: -10px
    }
    #nav-icon1:not(.collapsed) span:nth-child(3) {
        top: 14px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg)
    }
    .mobile-login-btn {
        margin-right: 0;
        margin-top: 7px
    }
    .mobile-login-btn a.btn:first-child {
        margin-right: 5px;
        padding-top: 5px;
        font-weight: 700;
        font-size: 12px;
        text-shadow: none
    }
    .btn-warning,
    .mobile-login-btn .btn {
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0390CB), color-stop(1, #24a9f4));
        background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0, #0390CB), color-stop(1, #24a9f4));
        background: linear-gradient(linear, left bottom, left top, color-stop(0, #0390CB), color-stop(1, #24a9f4));
        border: none;
        height: 30px
    }
    #MainContent_ddDay,
    #MainContent_ddMonth,
    #MainContent_ddYears {
        width: 30%
    }
    p.certified-mail,
    p.please-note {
        margin-top: 15px;
        margin-bottom: 20px;
        padding: 20px
    }
    .LessonContent,
    .marginTop10.well {
        padding-left: 0
    }
    .edit-profile-pad label {
        margin-bottom: 5px;
        color: #1b91cd;
        font-weight: 700;
        margin-top: 20px
    }
    .edit-profile-pad {
        margin-top: -20px
    }
    .edit-profile-pad.marginB20 input {
        margin-top: 50px
    }
    .dashboard-updates .row {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        text-align: center
    }
    .dashboard-updates .dashboard-h3 {
        font-size: 18px;
        margin-bottom: 10px
    }
    .left-header {
        color: #0892cd
    }
    .btn-warning {
        background-color: #ff6900;
        background: -moz-linear-gradient(top, #ffae00 0, #ff7500 50%, #ff6800 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffae00), color-stop(.5, #ff7500), color-stop(1, #ff6800));
        background: linear-gradient(to bottom, #ffae00 0, #ff7500 50%, #ff6800 100%);
        border: 1px solid rgba(132, 91, 18, .3);
        border-radius: 6px;
        -moz-box-shadow: 0 0 1px #999;
        -webkit-box-shadow: 0 0 1px #999;
        box-shadow: 0 0 1px #999;
        color: #FFF;
        font-weight: 700;
        font-style: normal;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        text-decoration: none;
        cursor: pointer
    }
    .btn-warning:focus,
    .btn-warning:hover {
        background: -moz-linear-gradient(top, #ffbb2a 0, #ff7500 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffbb2a), color-stop(1, #ff7500));
        background: linear-gradient(to bottom, #ffbb2a 0, #ff7500 100%)
    }
    #MainContent_hlContinue {
        min-width: 105px
    }
    .content-box,
    .dashboard-updates .content-box {
        background: #EDEFF2!important;
        margin-bottom: 20px;
        border-radius: 4px
    }
    .member-dash .right-col li,
    .member-dash .right-col li a {
        font-size: 12px;
        color: #4f5962
    }
    .lesson-page .next-lesson-btn,
    .next-lesson-btn {
        margin-top: 0!important;
        margin-right: 0!important;
        float: right!important;
        min-height: 45px;
        font-weight: 700
    }
    .lesson-page .previous-lesson-btn,
    .previous-lesson-btn {
        min-height: 45px
    }
    .LessonContent {
        padding-right: 0
    }
    .LessonContent img.left {
        float: none;
        margin-bottom: 10px
    }
    .LessonContent h1 {
        background: 0 0;
        padding: 0;
        margin: 0 0 20px
    }
    .next-lesson-btn:before,
    .previous-lesson-btn:before {
        content: none !important;
    }
    .greeting:before {
        background: 0 0;
        content: none
    }
    .red-timer-wrap {
        width: 100%
    }
    .ilad-hide {
        border-radius: 4px;
        overflow: hidden
    }
    #readalongcontainer {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 15px
    }
    #MainContent_phPageProgress {
        margin-left: 0;
        margin-top: 15px
    }
    .progress-wrap {
        float: none;
        margin-left: 0;
        display: block
    }
    .progress-bar {
        width: 96%
    }
    .audio-player-container {
        background: #0390cb;
        padding: 0 10px
    }
    .course-syllabus,
    .optional-upgrades-container,
    .traffic-chapter {
        background: #EDEFF2
    }
    .speaker-bump {
        display: none
    }
    .current-progress {
        min-width: 30px
    }
    #MainContent_divFacebookLogin {
        padding-bottom: 40px;
        border-bottom: 2px solid #eee
    }
    #MainContent_ddAnswer {
        width: 100%
    }
    .forget-pw {
        margin-top: 10px;
        display: block!important
    }
    ul.course-icons {
        padding: 20px 15px;
        font-size: 12px;
        margin-bottom: -20px
    }
    .course-syllabus {
        margin-bottom: 0;
        border-radius: 4px 4px 0 0
    }
    #footer {
        height: 100px;
    }
    #wrapper {
        padding-bottom: 50px
    }
    .copyright {
        margin-bottom: 0!important;
        font-size: 12px!important;
        text-align: right;
    }
    ul.optional-upgrades-container li.span3 h3 {
        font-size: 18px;
        margin-top: 5px;
        margin-bottom: 10px
    }
    #mainNav,
    .alert-success p {
        margin-bottom: 0
    }
    #MainContent_TranscriptUpgrade {
        margin-top: 30px
    }
    #MainContent_optionalUpgradePanel {
        margin-top: 30px;
        margin-bottom: 30px;
        background: #EDEFF2;
        border-radius: 4px
    }
    .optional-upgrades-container {
        text-align: center;
        margin-top: 20px
    }
    .traffic-chapter {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px
    }
    .traffic-main-chapters {
        margin-left: 0;
        padding: 0 15px
    }
    .traffic-main-chapters .chapter-lessons-visible .lessons {
        padding-left: 18px;
        font-size: 12px
    }
    #MainContent_optionalUpgrades .btn-warning {
        min-height: 44px;
        margin-left: 0
    }
    #MainContent_optionalUpgrades input {
        width: 45%
    }
    .study-tools-pad {
        padding: 0
    }
    /*
    .chapter-finished .status-icon,
    .completed-check {
        background: url(http://assets.dmvroll.com.s3.amazonaws.com/DETG-Member/img/checkmark.svg) no-repeat!important
    }
    .caution-icon,
    .chapter-inprogress .status-icon {
        background: url(http://assets.dmvroll.com.s3.amazonaws.com/DETG-Member/img/progress.svg) no-repeat!important
    }
    .chapter-unfinished .status-icon,
    .check-mark-x {
        background: url(http://assets.dmvroll.com.s3.amazonaws.com/DETG-Member/img/incomplete.svg) no-repeat!important
    }
        */
    .traffic-main-chapters .icon-caret-down {
        color: #d8d8d8
    }
    .traffic-main-chapters .chapter-title {
        font-size: 14px;
        max-width: 200px;
        display: inline-block!important;
        color: #4f5962
    }
    ul.chart-list li span.chart-caption {
        display: inline-block;
        width: 50%;
        text-align: right
    }
    .make-money {
        display: none
    }
    ul.chart-list {
        padding-bottom: 10px
    }
    svg rect {
        fill: #EDEFF2
    }
    .member-dash h1.welcome-text {
        font-size: 20px;
        font-weight: 700;
        color: #4f5962;
        text-align: center;
        padding-top: 20px
    }
    .subtitle {
        opacity: .8;
        font-size: 15px;
        font-weight: lighter
    }
    #chart_div {
        margin-left: 20%
    }
    .chart-row {
        margin-left: -10px;
        margin-right: -10px
    }
    .well-chart {
        box-shadow: none;
        border-radius: 4px;
        background: #fff;
        min-height: 50px;
        border: 2px solid #ddd
    }
    .bottom-spacing {
        padding-bottom: 15px
    }
    .chart-wrapper .right-col .well-chart span {
        color: #4f5962;
        display: inline-block;
        padding-top: 7px;
        padding-left: 10px
    }
    .chart-wrapper {
        background: #EDEFF2
    }
    .alert-success {
        border-radius: 4px;
        padding: 14px;
        border: none;
        margin-top: 20px
    }
    .alert-success a,
    .close
    {
        color: #468847;
        line-height: 1.2em;
        font-size: 13px
    }
    .navbar .navbar-inner .nav-collapse {
        background: #0390cb
    }
    .navbar .nav>li>a {
        font-family: sans-serif;
        color: #fff
    }
    .home-logo {
        width: 190px;
        height: 44px;
        background-size: 190px
    }
    body {
        color: #333
    }
    .hamburger {
        visibility: visible
    }
    .navbar-default {
        min-height: 0;
        border: none
    }
    .btn-primary {
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0390CB), color-stop(1, #24a9f4))!important;
        box-shadow: none
    }
    #mainNav .span12 {
        min-height: 0
    }
    #mainNav {
        border-bottom: none!important;
        border-top: none!important
    }
}

@media (max-width:375px) {
    .home-logo {
        min-height: 44px
    }
}