.circle {
    background-color: lightgray;
    border-radius: 50%;
}

.navbar-toggler {
    width: 100%;
    margin-left: 40px !important;
}


.bars {
    width: 26px;
    position: relative;
    height: 25px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -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: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

    .bars span {
        background-color: rgb(26, 53, 85);
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

        .bars span:nth-child(1) {
            top: 1px;
        }

        .bars span:nth-child(2) {
            top: 12px;
        }

        .bars span:nth-child(3) {
            top: 9px;
            height: 0px;
            background-color: white !important;
        }

            .bars span:nth-child(3):before {
                color: rgb(26, 53, 85);
                font-size: 52%;
                font-weight: 900;
                content: "Menu" !important;
            }




    .bars.open span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .bars.open span:nth-child(3) {
        opacity: 0;
    }

    .bars.open span:nth-child(2) {
        top: 11px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }


.flip-down {
    transition: .5s;
    transform: rotate(0deg);
}
.flip-up{
  transition:.5s;
  transform: rotate(180deg);
}
.pressed {
    color: orange !important;
}
.sticky {
    top: 0;
    position: sticky;
    z-index: 99;
}
#white{
    color:lightgrey;
    font-size:14px;
}
#CarFirst {
    width: 147px;
    height: 200px;
    display: block;
}
#CarSecond {
    width: 164px;
    height: 200px;
    display: block;
}
#CarThird {
    width:219px;
    height: 200px;
    display: block;
}

.header {
    position: sticky;
    top: 0;
    color: white;
    background-color: rgb(26, 53, 85);
}
tbody.td{
    color: white;
    background-color: rgb(26, 53, 85);
}


#table::-webkit-scrollbar {
    width: 8px;
    height:8px;
    background-color: rgb(26, 53, 85);
}
#table::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 20px;
}

#table {
    width: 600px;
    height: 300px;
    overflow-x: scroll;
    padding:0 0;
    display:block;
}
.fa{
    float:right;
}
.accordion {
    background-color: rgb(26, 71, 125);
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    outline: none !important;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0px;
    text-align: left;
    border-bottom: 3px solid white;
    transition: 0.4s;
}
    .accordion:hover {
        background-color: rgb(26, 53, 85);
    }
body::-webkit-scrollbar{
    display:none;
}

.panel {
    padding: 0 18px;
    background-color: rgb(26, 71, 125);
    color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.medium_dark_background {
    background-color: rgb(26, 68, 125);
}


.darkblue_background {
    background-color: rgb(26, 53, 85);
}

.no_bold {
    font-weight: 400;
}
.white_background {
    background-color: white;
}
.blue_background {
    background-color: rgb(26, 71, 125);
    color: white;
}

.image_sized { /*this is extreemly important in making the carousel work*/
    display: block;
    max-width: 210px;
    max-height: 200px;
    width: auto;
    height: auto;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


button.btn {
    color: yellow;
}

#contact {
    text-align: center;
    color: yellow;
    background-color: rgb(26, 71, 125);
}

#page_changer {
    background-color: rgb(26, 71, 125);
}

#logo {
    width: 110%;
    display: block;
}

#Logo_container {
    background-color: white;
}
#Small_buttons {
    background-color: rgb(26, 71, 125);
    font-size: 81%;
    text-align: left;
}

#divider{
    background-color: black !important;
    color: white;
    font-size: 85%;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

/*smallest screen*/
@media screen and (min-width:370px) {
    .bars {
        width: 35px;
        position: relative;
        height: 25px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -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: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
    }

        .bars span:nth-child(1) {
            top: 0px;
        }

        .bars span:nth-child(2) {
            top: 10px;
        }

        .bars span:nth-child(3) {
            top: 10px;
            height: 0px;
            background-color: white !important;
        }

            .bars span:nth-child(3):before {
                color: rgb(26, 53, 85);
                font-size: 60%;
                font-weight: 900;
                content: "Menu" !important;
            }

}

/*tablet*/
@media screen and (min-width:768px) {
    #block_text {
        font-size: 110%;
    }
    #First_Open{
          width:250px;
          padding-top:5px;
    }
    .nav-link {
        color: yellow;
        font-size: 105%;
        font-weight: 400;
        border-bottom: 2px solid rgb(26, 53, 85);
    }
    .navbar-toggler {
        border: 1px solid rgb(26, 53, 85) !important;
        width: 90px;
        height: 72px;
        margin-left: 40px !important;
    }
    #subject {
        border-bottom: 2px solid white;
    }
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;  
    }
    .image_sized { /*this is extreemly important in making the carousel work*/
        display: block;
        max-width: 270px;
        max-height: 270px;
        width: auto;
        height: auto;
    }

    #logo {
        width: 57%;
    }

    .center_table {
        position: relative;
        float: right;
        border: solid 5px black;
        top: 20%;
    }

    .set_width {
        max-width: 750px !important;
    }
    #divider{
       font-size:90%;
    }
    #bottom_nav {
        padding: 0px;
        width: 100%;
        background-color: rgb(26, 71, 125);
    }

    .accordion {
        background-color: rgb(26, 71, 125);
        color: white;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        outline: none !important;
        border: 0;
        font-size:130%;
        background: none;
        box-shadow: none;
        border-radius: 0px;
        text-align: left;
        border-bottom: 3px solid white;
        transition: 0.4s;
    }

    h6{
        font-size:125% !important;
    }
    h5 {
        font-size: 140% !important;
    }
    #table {
        width: 100%;
        height: 370px;
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 0 0;
        display: block;
    }
    #table_l {
        width: 100%;
        height: 420px;
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 0 0;
        display: block;
    }
}

/*laptop screen*/
@media screen and (min-width:992px) {
    .set_width {
        max-width: 760px !important;
        position: center;
    }

    #block_text {
        font-size: 105%;
    }

    .nav-link {
        color: yellow;
        font-size: 95%;
        font-weight: 400;
    }

    #bigger{
    font-size:120%;
    }
    #subject{
    border-bottom:2px solid white;
    }

    #table::-webkit-scrollbar {
    display:none;
    }
    #divider{
        width:90%;
        margin:auto;
    }
    #table_l{
        height:420px;
    }

    #table{
        height: 370px;
    }
    #logo{
        width:57%;
    }


}

/*largest screen*/
@media screen and (min-width: 1200px) {
    #First_Open {
        width: unset;
        padding-top: unset;
    }
    .set_width {
        max-width: 910px !important;
        position: center;
    }

    .image_sized { /*this is extreemly important in making the carousel work*/
        display: block;
        max-width: 280px;
        max-height: 280px;
        width: auto;
        height: auto;
    }

    .carousel-item {
        height: 310px !important;
    }

    #block_text {
        font-size: 105%;
    }
 
    .nav-link {
        color: yellow;
        font-size: 100%;
        font-weight: 400;
    }
}