.checked {
    color: #7DC142 !important;
}

input {
    font-size: 14px;
}

.fa-star {
    font-size: 20px;
    color: #757575;
    padding: 5px 0;
}

.btn, .btn:visited, .btn:focus, .btn:active {
    font: 14px 'Roboto', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    word-wrap: break-word;
    background-image: none;
    padding: 12px 20px;
    border-radius: 50px !important;
}

    .btn:hover {
        color: #666666;
        background-color: #e5e5e5;
        font-weight: 700;
        border-radius: 50px !important;
    }


.productName {
    color: white;
    max-width: 33ch;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 34px;
    text-transform: capitalize;
    padding: 0px 15px 0px 15px;
}

.productNameHero {
    background: #44444466;
}

.hero-image {
    height: 25vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.details {
    text-align: center;
    flex: 20%;
    min-width: 300px;
    max-width: 325px !important;
    margin: -120px auto 0 !important;
    z-index: 1;
    background-color: white;
    height: fit-content;
    padding-bottom: 35px;
    min-height: 250px !important;
}


.ovw {
    flex: 60% !important;
    max-width: 75ch;
    margin-right: 50px;
    padding: 10px 0;
}

.section-1 {
    padding: 0 50px;
    display: flex;
    flex-flow: row wrap !important;
    flex: 100%;
    margin: 0 300px;
}

.priceHours-container {
    display: flex;
    flex-flow: row wrap;
    flex: 100%;
    padding: 0 2px;
}


.price {
    display: flex;
    flex-flow: row wrap;
    flex: 48%;
    margin: 0 auto;
}

    .price p {
        margin-top: -10px;
    }

.comments {
    padding-left: 145px;
    margin: 10px 95px;
}

.info {
    flex: 20%;
    margin: 0 -100px 0 0 !important;
    width: 200px;
}

    .info h3, .info p {
        width: 375px;
        margin: 7px auto !important;
    }


.canon {
    flex: 50% !important;
    margin-right: 20px;
    max-width: 75ch;
}

.length {
    max-width: 75ch;
}

.table, .table table, .table tr, .table td {
    border: 1px solid dimgray;
    padding: 5px;
    font-size: 13px;
    background-color: white;
    border-left: none;
    border-right: none;
    width: 375px;
    margin: 0 auto;
}

th {
    text-align: center;
    border: 1px solid white;
    padding: 5px;
    font-size: 13px;
    background-color: #0180B8;
    border-left: none;
    border-right: none;
    margin: 0 auto;
}

.hours, .half-price {
    display: flex;
    flex-flow: row wrap;
    flex: 48%;
}

    .hours p, .half-price p {
        margin-top: -10px;
    }

.package {
    padding-bottom: 20px;
    display: flex;
    flex-flow: row wrap !important;
    flex: 100%;
}

.package-table th {
    text-align: left;
    background-color: white;
    padding: 0;
    border-bottom: 1px solid dimgray;
    border-left: none;
    border-right: none;
    font-weight: bold;
    padding: 7px;
}

.package-table, .package-table table, .package-table tr, .package-table td {
    border: 1px solid dimgray;
    vertical-align: middle;
    font-size: 13px;
    background-color: white;
    border-left: none;
    border-right: none;
    padding: 7px;
}

.study-tools {
    display: flex;
    flex-flow: row wrap;
    flex: 100%;
    text-align: center;
}

.study-tools-bucket {
    flex: 33%;
    padding: 0 15px;
}

#addCreditTable {
    width: 850px !important;
    background-color: white;
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
}

    #addCreditTable td {
        padding: 10px 3px 5px !important;
        border: .05em solid !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    #addCreditTable tr {
        margin: 0 auto !important;
    }

.additionalCreditRulesModal .btn {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 1px;
}

.additionalCreditRulesModal .btn:hover {
    border-radius: 50px !important;
}

@media screen and (min-width: 3552px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 1500px;
    }

    .productName {
        margin: 0 1500px !important;
    }

    .hero-image {height: 10vh;}
}


@media screen and (min-width: 3551px){
    .section-1 {
        margin: 0 auto;
        padding: 0 1550px !important;

    }

    .productName {
        margin: 0 1550px !important;
    }
}

@media screen and (min-width: 3300px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 1250px !important;
    }

    .productName {
        margin: 0 1250px !important;
 
    }
}

@media screen and (min-width: 3100px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 1100px;
    }

    .productName {
        margin: 0 1100px;
    }
}
@media screen and (min-width: 2805px) and (max-width: 3099px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 900px;
    }

    .productName {
        margin: 0 900px;
    }
}

@media screen and (min-width: 2561px) and (max-width: 2804px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 800px;
    }
    
    .productName {
        margin: 0 800px;
    }
}

@media screen and (max-width: 2560px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 650px;
    }


    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 550px;
    }

    .info {
    }

    .productName {
        margin: 0 650px;
    }
}

@media screen and (max-width: 2251px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 550px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 450px;
    }

    .productName {
        margin: 0 550px;
    }
}

@media screen and (max-width: 2051px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 450px;
    }

    .productName {
        margin: 0 435px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 350px;
    }

    .info {
    }
}

@media screen and (max-width: 1851px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 350px;
    }

    .productName {
        margin: 0 335px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 250px;
    }
}

@media screen and (max-width: 1651px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 250px;
    }

    .productName {
        margin: 0 235px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 150px;
    }
}

@media screen and (max-width: 1451px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 175px;
    }

    .productName {
        margin: 0 160px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 75px;
    }
}

@media screen and (max-width: 1301px) {
    .section-1 {
        margin: 0 auto;
        padding: 0 125px;
    }

    .productName {
        margin: 0 110px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 35px;
    }

    .optionCredit-information {
        width: 30vw !important;
    }
}

@media screen and (max-width: 1241px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 100px;
    }

    .productName {
        margin: 0 85px !important;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 25px;
    }
}

@media screen and (max-width: 1151px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 50px;
    }

    .productName {
        margin: 0 35px !important;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 15px;
        margin: 0 35px;
    }

    .optionCredit-information {
        width: 25vw !important;
    }
}

@media screen and (max-width: 1050px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 25px;
    }

    .productName {
        margin: 0 10px !important;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 10px;
        margin: 10px 5px;
    }

    html, body {
        overflow-x: hidden;
    }

    .ovw {
        margin-right: 50px;
    }

    .info {
        margin: 0 !important;
    }
}

@media screen and (max-width: 1000px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 15px;
    }

    .productName {
        margin: 0 auto !important;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
    }

    .comments {
        padding: 0 10px;
        margin: 10px 5px;
    }

    html, body {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 981px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 175px;
        display: flex;
        flex-flow: row wrap;
    }

    .objectives {
        flex: 100%;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px !important;
    }

    .comments {
        padding: 0 175px;
    }

    html, body {
        overflow-x: hidden;
    }

    .ovw {
        margin-right: 0;
    }

    .info {
        flex: 100%;
        margin-right: 0 !important;
    }

    .canon {
        flex: 100%;
        margin: 0 auto;
    }

    .package {
        flex: 100%;
        margin-right: 0 !important;
    }

    .optionCredit-information {
        width: 30vw !important;
    }
}

@media screen and (max-width: 768px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 75px;
        display: flex;
        flex-flow: row wrap;
    }

    .ovw {
        margin-right: 0;
    }

    .objectives {
        flex: 100%;
        margin: 0 auto;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px !important;
    }

    .comments {
        padding: 0;
        margin: 10px 100px;
    }

    html, body {
        overflow-x: hidden;
    }

    .info {
        flex: 100%;
        margin: 0 auto;
        padding-bottom: 25px;
    }

        .info h3, .info p, .table {
            width: 100%;
        }

    .canon {
        flex: 100%;
        margin: 0 auto;
    }

    .package {
        flex: 100%;
        margin-right: 0 !important;
    }

    #addCreditTable {
        width: 750px !important;
    }

    .optionCredit-information {
        width: 35vw !important;
    }
}

@media screen and (max-width: 541px) {
    .section-1 {
        margin: 0 auto !important;
        padding: 0 25px;
        display: flex;
        flex-flow: row wrap;
    }

    .objectives {
        flex: 100%;
    }

    .productName {
        padding: 0 10px;
    }

    .details {
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .comments {
        padding: 0;
        margin: 10px 15px;
    }

    html, body {
        overflow-x: hidden;
        color: black;
    }

    .hero-image {
        max-height: 35vh;
    }

    .ovw {
        margin-right: 0;
    }

    .info {
        flex: 100%;
        margin-right: 0 !important;
    }

    .canon {
        flex: 100%;
    }

    .package {
        flex: 100%;
        margin-right: 0 !important;
    }

    .study-tools-bucket {
        flex: 100%;
        padding: 0 15px;
    }

    #addCreditTable {
        width: 300px !important;
    }

    .optionCredit-information {
        width: 90vw !important;
        left: -35vw !important;
    }
}

@media only screen and (max-width: 500px) {
    .col-xs-12 {
        font-size: 14px;
    }

    .hero-image {
        min-height: 25vh;
        max-height: 40vh;
    }
}