@media (min-width: 800px) {
    .container {
        width: 780px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 780px;
    }
}

@media (min-width: 1003px) {
    .container {
        width: 972px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 972px;
    }
}

@media (max-width: 1003px) {
    .header-title{
        font-size: 50px;
    }
}
@media (min-width: 575px) and (max-width: 770px) {
    .card-img {
        margin-left: 30px;
        padding-top: 15%;
        height: 90%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1150px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 1175px;
    }
}

@media (min-width: 1500px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        width: 1500px !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 1500px;
    }

    /* override to react strap modal size*/
    .modal-lg {
        max-width: 1300px;
    }

    .modal-search {
        width: 700px;
        max-width: 700px;
    }
}

@media (max-width: 1499px) {
    .modal-lg {
        max-width: 1050px;
    }

    .modal-search {
        width: 700px;
        max-width: 700px;
    }

    .category-group-cell {
        width: 50%;
    }

    .offerings-search-bar-container {
        padding-top: 10px;
    }

}

@media (max-width: 560px) {

    .card-img {
        margin-left: 0px;
    }
}

@media (max-width: 800px) {

    .modal-search {
        width: 450px;
        max-width: 450px;
    }

    .category-group-cell {
        width: 100%;
    }

    .header-title {
        font-size: 38px;
    }

    .header-text, content-text {
        font-size: 18px;
    }

    .content-title{
        font-size: 30px;
    }

    .card-img {
        margin-right: auto;
    }

    .image-container{
        max-height: 576px;
    }

    .green-overlay{
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width : 520px) {
    body {
        width: 500px;
    }

    .container {
        width: 100%;
        display: block;
    }

    .aboutObjectives {
        display: block;
    }

    .container-right-s, container-left-s, .container-left-lg, container-right-lg {
        width: 100%;
        float: none;
        padding: 10px;
    }

    .modal-search {
        width: 450px;
        max-width: 450px;
    }

    .category-group-cell {
        width: 100%;
    }

    .card-img{
        margin-left: 0px;
    }

    .card-body{
        text-align: center;
    }

    .text-size-22{
        font-size: 18px;
    }
}

@media (max-width : 475px) {
    body {
        width: 100%;
    }

    .container {
        width: 360px;
        display: block;
        max-width: 450px;
        margin-left:auto;
        margin-right:auto;
        padding-left: 0px;
        padding-right:0px;
    }

    .container-sm{
        padding-top: 20px;
        padding-left: 20px;
        padding-bottom: 10px;
    }

    .container-lg{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .text-size-22, .content-text{
        font-size: 18px;
    }

    .copyright {
        font-size: 10px;
    }


    .aboutObjectives {
        display: block;
    }

    .container-right-s, container-left-s, .container-left-lg, container-right-lg, container-lg {
        width: 100%;
        float: none;
        padding: 10px;
    }

    .modal-search {
        width: 370px;
        max-width: 370px;
    }

    .category-group-cell {
        width: 100%;
    }

    .dropdown-menu {
        transform: translate3d(-300px, 55px, 0px) !important;
    }
}