.carousel-control {
    width: 7%;
}

div.cta-teachca {
    border-radius: 6px;
    border: 2px solid #0299CE;
    background: #0299CE;
    background-image: url(/Content/TeachCA-Responsive/Images/blue-gradient.png);
    background-position: bottom;
    background-repeat: repeat-x;
    text-align: center;
}

div.cta-teachca-alt {
    border-radius: 10px;
    border: 4px solid #0299CE;
    background: #efefef;
    text-align: center;
}

.col-padding-thin {
    padding-left: 5px;
    padding-right: 5px;
}

div.cta-teachca a {
    color: #000;
}

div.cta-teachca > .cta-teachca-header {
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
}

div.cta-teachca > .cta-teachca-text {
    line-height: 1;
}

div.cta-teachca > img.img-responsive {
    margin: 20px auto;
}

div.inline-panel {
    color: #fff;
    background: url(/Content/TeachCA-Responsive/Images/semi-opaque.png);
    position: absolute;
    border-radius: 6px;
    border: 2px solid #0299CE;
    padding: 16px 20px;
}

div.inline-panel-orig {
    left: 6%;
    top: 55%;
}

div.inline-panel-alt {
    left: 6%;
    bottom: 12%;
}

div.inline-panel-right {
    right: 4%;
    bottom: 12%;
}

div.inline-panel .line1, div.inline-panel .line2 {
    text-align: center;
    line-height: 1;
    font-weight: 900;
}

div.inline-panel a {
    color: #fff;
}

#requirements {
    margin-top: 20px;
    position: relative;
}

#callouts {
    padding-top: 30px;
}

#tag-line, #requirements, #callouts {
    border-top: solid 6px #0299CE;
}

    #tag-line > p {
        text-align: center;
        line-height: 1;
        margin: 0;
    }

#ctas {
    padding: 20px;
}

#callout-news {
    text-align: left;
    line-height: 1;
    overflow: auto;
}


    #callout-news > div:first-child {
        font-weight: 900;
    }

        #callout-news > div:first-child > img {
            margin-right: 5px;
            margin-bottom: 5px;
        }

    #callout-news > div:last-child {
        font-size: 16px;
    }

    #callout-news > div:last-child {
        overflow: auto;
    }

/*#callout-job {
    background-image: url(/Content/TeachCA-Responsive/Images/findATeachingJob.jpg);
}

#callout-va {
    background-image: url(/Content/TeachCA-Responsive/Images/QandA.png);
}

    #callout-job > a, #callout-va > p > a {
        color: #000;
    }

#callout-job > a {
    text-decoration: none;
    position: absolute;
    left: 3px;
    bottom: 8px;
}*/

img.news-header-icon {
    width: 45px; 
    height: auto;
    display: inline-block;
    vertical-align: middle; 
    margin-right: 10px; 
}

.cta-pure-image-link {
    display: block;
    width: 100%;
    margin-bottom: 20px; /* Provides spacing if columns stack on mobile devices */
}

    .cta-pure-image-link img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width: 479px) {

    div.inline-panel-orig, div.inline-panel-alt {
        top: unset;
        bottom: 30px;
        left: 20px;
        right: 20px;
    }

    .carousel-inner .inline-panel {
        font-size: 14px;
    }

        .carousel-inner .inline-panel .line1 {
            display: none;
        }

    .carousel-inner > .item {
        background-size: cover;
        background-position-x: center;
    }

    .carousel-inner > #carousel-item0 {
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage1.jpg);
    }

    .carousel-inner > #carousel-item1 {
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage2.jpg);
    }

    .carousel-inner > #carousel-item2 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage3.jpg);
    }

    .carousel-inner > #carousel-item3 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage4.jpg);
    }

    .carousel-inner > #carousel-item4 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage5.jpg);
    }

    .carousel-inner > #carousel-item5 {
        background-position: bottom center;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage6.jpg);
    }

    .carousel-inner > #carousel-item6 {
        background-position: top right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage7.jpg);
    }

    .carousel-inner > #carousel-item7 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage8.jpg);
    }

    .carousel-inner > #carousel-item8 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage9.jpg);
    }

    .carousel-inner > #carousel-item9 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage10.jpg);
    }

    .carousel-inner > #carousel-item10 {
        background-position: top center;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage11.jpg);
    }

    #tag-line p:first-child {
        font-size: 20px;
        margin-top: 20px;
    }

    #tag-line p:nth-child(2) {
        font-size: 102px;
        font-weight: 900;
    }

        #tag-line p:nth-child(2) span {
            font-size: 37px;
        }

    #cta1, #cta2, #cta3, #cta4 {
        margin-bottom: 10px;
    }

    div.cta-teachca > .cta-teachca-header {
        margin: 0 20px;
    }

    div.cta-teachca > img.img-responsive {
        width: 60px;
        margin: 10px auto;
    }

    #cta1 > .cta-teachca-header, #cta1 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #cta2 > .cta-teachca-header, #cta2 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #cta3 > .cta-teachca-header, #cta3 > .cta-teachca-text {
        margin: 7px 30px;
    }

    #cta4 > .cta-teachca-header, #cta4 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #requirements {
        display: none;
    }

    #callouts {
        border-top: none;
        padding-top: 20px;
    }

    #callout-news {
        margin-bottom: 10px;
    }

        #callout-news > div:first-child {
            font-size: 51px;
            vertical-align: middle;
        }

        #callout-news > div:first-child, #callout-news > div:last-child {
            margin: 10px;
        }

    #callout-job {
        margin-left: 10px;
        margin-right: 10px;
    }

    #callout-job, #callout-va {
        font-weight: 900;
        background-position: center;
        line-height: 1;
        position: relative;
        min-height: 360px;
        max-width: 365px;
        margin-bottom: 10px;
    }

        #callout-job > a {
            width: 140px;
            left: -20px;
            bottom: 8px;
        }

            #callout-job > a > span:first-child, #callout-job > a > span:nth-child(3) {
                font-size: 38px;
            }

            #callout-job > a > span:nth-child(2) {
                font-size: 22px;
            }

        #callout-va > p {
            margin: 0;
        }

            #callout-va > p:first-child {
                margin-top: 36px;
                font-size: 24px;
            }

            #callout-va > p:last-child {
                margin-top: 2px;
                font-size: 18px;
                padding: 0 24px;
                font-weight: bold;
            }
}

@media only screen and (min-width : 336px) and (max-width: 366px) {
    #callout-job > a {
        width: 140px;
        left: -8px;
        bottom: 10px;
    }
}

@media only screen and (min-width : 367px) and (max-width: 409px) {
    #callout-job > a {
        width: 140px;
        left: 0;
        bottom: 10px;
    }
}

@media only screen and (min-width : 410px) and (max-width:479px) {
    #callout-job, #callout-va {
        margin-left: auto;
        margin-right: auto;
    }

        #callout-job > a {
            width: 140px;
            left: 3px;
            bottom: 10px;
        }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (max-width:767px) {

    div.inline-panel-orig, div.inline-panel-alt {
        top: unset;
        bottom: 30px;
        left: 20px;
        right: 20px;
    }

    .carousel-inner .inline-panel {
        font-size: 14px;
    }

        .carousel-inner .inline-panel .line1 {
            display: none;
        }

    .carousel-inner > .item {
        background-size: cover;
        background-position-x: center;
    }

    .carousel-inner > #carousel-item0 {
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage1.jpg);
    }

    .carousel-inner > #carousel-item1 {
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage2.jpg);
    }

    .carousel-inner > #carousel-item2 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage3.jpg);
    }

    .carousel-inner > #carousel-item3 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage4.jpg);
    }

    .carousel-inner > #carousel-item4 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage5.jpg);
    }

    .carousel-inner > #carousel-item5 {
        background-position: bottom center;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage6.jpg);
    }

    .carousel-inner > #carousel-item6 {
        background-position: top right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage7.jpg);
    }

    .carousel-inner > #carousel-item7 {
        background-position: bottom;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage8.jpg);
    }

    .carousel-inner > #carousel-item8 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage9.jpg);
    }

    .carousel-inner > #carousel-item9 {
        background-position: bottom right;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage10.jpg);
    }

    .carousel-inner > #carousel-item10 {
        background-position: top center;
        background-image: url(/Content/TeachCA-Responsive/Banners/heroImage11.jpg);
    }


    #tag-line p:first-child {
        font-size: 20px;
        margin-top: 20px;
    }

    #tag-line p:nth-child(2) {
        font-size: 102px;
        font-weight: 900;
    }

        #tag-line p:nth-child(2) span {
            font-size: 37px;
        }

    #cta1, #cta2, #cta3, #cta4 {
        margin-bottom: 10px;
    }

    div.cta-teachca > .cta-teachca-header {
        margin: 0 20px;
    }

    div.cta-teachca > img.img-responsive {
        width: 60px;
        margin: 10px auto;
    }

    #requirements {
        display: none;
    }

    #callouts {
        border-top: none;
        padding-top: 0;
    }

    #callout-news {
        margin-bottom: 10px;
    }

        #callout-news > div:first-child {
            font-size: 51px;
            vertical-align: middle;
        }

        #callout-news > div:first-child, #callout-news > div:last-child {
            margin: 10px;
        }

    #callout-job {
        margin-left: 10px;
        margin-right: 10px;
    }

    #callout-job, #callout-va {
        font-weight: 900;
        background-position: center;
        line-height: 1;
        position: relative;
        min-height: 360px;
        max-width: 365px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }

        #callout-job > a {
            width: 140px;
            left: -2px;
            bottom: 8px;
        }

            #callout-job > a > span:first-child, #callout-job > a > span:nth-child(3) {
                font-size: 38px;
            }

            #callout-job > a > span:nth-child(2) {
                font-size: 22px;
            }

        #callout-va > p {
            margin: 0;
        }

            #callout-va > p:first-child {
                margin-top: 36px;
                font-size: 24px;
            }

            #callout-va > p:last-child {
                margin-top: 2px;
                font-size: 18px;
                padding: 0 24px;
                font-weight: bold;
            }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width:991px) {
    div.inline-panel {
        text-align: center;
    }

        div.inline-panel .line1 {
            font-size: 24px;
            display: inline-block;
        }

        div.inline-panel .line2 {
            font-size: 18px;
            display: inline-block;
        }

        div.inline-panel > p {
            font-size: 15px;
            text-align: center;
        }

    #tag-line p:first-child {
        font-size: 20px;
        margin-top: 20px;
    }

    #tag-line p:nth-child(2) {
        font-size: 102px;
        font-weight: 900;
    }

        #tag-line p:nth-child(2) span {
            font-size: 37px;
        }


    #cta1, #cta2 {
        margin-bottom: 10px;
    }

    div.cta-teachca, div.cta-teachca-alt {
        min-height: 180px;
    }

        div.cta-teachca > .cta-teachca-header {
            margin: 0 20px;
        }

        div.cta-teachca > img.img-responsive {
            width: 60px;
            margin: 10px auto;
        }

    #cta1 > .cta-teachca-header, #cta1 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #cta2 > .cta-teachca-header, #cta2 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #cta3 > .cta-teachca-header, #cta3 > .cta-teachca-text {
        margin: 7px 30px;
    }

    #cta4 > .cta-teachca-header, #cta4 > .cta-teachca-text {
        margin: 10px 20px;
    }

    #callout-news {
        min-height: 250px;
        margin-bottom: 10px;
    }

    #callout-job, #callout-va {
        min-height: 360px;
    }

    #callout-job {
        margin-left: 10px;
    }

    #callout-news > div:first-child {
        font-size: 36px;
        vertical-align: middle;
    }

    #callout-news > div:first-child, #callout-news > div:last-child {
        margin: 10px;
    }

    #callout-job, #callout-va {
        font-weight: 900;
        background-position: center;
        line-height: 1;
    }

        #callout-job > a {
            width: 140px;
            left: 12px;
            bottom: 16px;
        }

            #callout-job > a > span:first-child, #callout-job > a > span:nth-child(3) {
                font-size: 38px;
            }

            #callout-job > a > span:nth-child(2) {
                font-size: 22px;
            }

        #callout-va > p {
            margin: 0;
        }

            #callout-va > p:first-child {
                margin-top: 36px;
                font-size: 24px;
            }

            #callout-va > p:last-child {
                margin-top: 2px;
                font-size: 18px;
                padding: 0 24px;
                font-weight: bold;
            }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) and (max-width:1199px) {
    div.inline-panel .line1 {
        font-size: 48px;
    }

    div.inline-panel .line2 {
        font-size: 30px;
    }

    div.inline-panel > p {
        font-size: 15px;
        text-align: center;
    }

    #tag-line p:first-child {
        font-size: 26px;
        margin-top: 30px;
    }

    #tag-line p:nth-child(2) {
        font-size: 134px;
        font-weight: 900;
    }

        #tag-line p:nth-child(2) span {
            font-size: 67px;
        }

    #callout-news > div:first-child {
        font-size: 51px;
        vertical-align: middle;
    }

    #callout-news > div:first-child, #callout-news > div:last-child {
        margin: 10px;
    }

    #callout-job, #callout-va {
        font-weight: 900;
        background-position: center;
        line-height: 1;
    }

        #callout-job > a {
            width: 140px;
            left: 0;
            bottom: 12px;
        }

            #callout-job > a > span:first-child, #callout-job > a > span:nth-child(3) {
                font-size: 38px;
            }

            #callout-job > a > span:nth-child(2) {
                font-size: 22px;
            }

        #callout-va > p {
            margin: 0;
        }

            #callout-va > p:first-child {
                margin-top: 40px;
                font-size: 24px;
            }

            #callout-va > p:last-child {
                margin-top: 2px;
                font-size: 18px;
                font-weight: bold;
            }

    div.cta-teachca, div.cta-teachca-alt {
        min-height: 360px;
    }

        div.cta-teachca > .cta-teachca-header {
            font-size: 20px;
        }

        div.cta-teachca > .cta-teachca-text {
            font-size: 14pt;
            padding: 0 16px;
        }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    div.inline-panel .line1 {
        font-size: 45px;
    }

    div.inline-panel .line2 {
        font-size: 40px;
    }

    div.inline-panel > p {
        font-size: 15px;
        text-align: center;
    }

    #tag-line p:first-child {
        font-size: 26px;
        margin-top: 30px;
    }

    #tag-line p:nth-child(2) {
        font-size: 134px;
        font-weight: 900;
    }

        #tag-line p:nth-child(2) span {
            font-size: 67px;
        }

    #callout-news > div:first-child {
        font-size: 51px;
        vertical-align: middle;
    }

    #callout-news > div:first-child, #callout-news > div:last-child {
        margin: 20px;
    }

    #callout-job, #callout-va {
        font-weight: 900;
        background-size: cover;
        line-height: 1;
    }

        #callout-job > a {
            width: 140px;
        }

            #callout-job > a > span:first-child, #callout-job > a > span:nth-child(3) {
                font-size: 42px;
            }

            #callout-job > a > span:nth-child(2) {
                font-size: 26px;
            }

        #callout-va > p {
            margin: 0 40px;
        }

            #callout-va > p:first-child {
                margin-top: 40px;
                font-size: 31px;
            }

            #callout-va > p:last-child {
                margin-top: 2px;
                font-size: 18px;
                font-weight: bold;
            }

    div.cta-teachca, div.cta-teachca-alt {
        min-height: 350px;
    }

        div.cta-teachca > .cta-teachca-header {
            font-size: 24px;
        }

        div.cta-teachca > .cta-teachca-text {
            font-size: 16pt;
            padding: 0 16px;
        }
}


@media screen and (max-width: 767px) {

    #carousel-example-generic {
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }

        #carousel-example-generic .carousel-indicators {
            bottom: 10px !important;
            margin-bottom: 0 !important;
        }

        #carousel-example-generic .carousel-inner div.inline-panel-orig,
        #carousel-example-generic .carousel-inner div.inline-panel-alt,
        #carousel-example-generic .carousel-inner div.inline-panel {
            display: none !important;
        }

    .mobile-hero-text-container {
        display: block !important;
        position: relative !important;
        background-color: rgba(40, 45, 50, 0.95) !important;
        padding: 15px 20px !important;
        margin: 0 auto 0 auto !important; 
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

        .mobile-hero-text-container::after {
            content: "" !important;
            display: block !important;
            position: absolute !important;
            bottom: -6px !important; 
            left: 0 !important;
            width: 100% !important;
            height: 6px !important;
            background-color: #0299CE !important;
            background-image: url(/Content/TeachCA-Responsive/Images/blue-gradient.png) !important;
            background-repeat: repeat-x !important;
            background-position: bottom !important;
        }

        .mobile-hero-text-container + .container,
        .mobile-hero-text-container + div,
        #main-content {
            padding-top: 26px !important;
            margin-top: 0 !important;
        }

    .mobile-text-panel.hidden-msg {
        display: none !important;
    }

    .mobile-text-panel.active-msg {
        display: block !important;
    }

    .mobile-text-panel .m-title {
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .mobile-text-panel p {
        margin: 0 !important;
    }

        .mobile-text-panel p a {
            color: #0299CE !important;
            text-decoration: underline !important;
            font-size: 15px !important;
        }
}