@media only screen and (max-width: 768px) {
    html,
    body {
        width: auto;
        min-width: unset;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: unset;
        min-width: unset;
    }

    /* Login Modal */
    .modal-dialog,
    .modal-content,
    .modal-body {
        max-width: none;
        width: 80vw !important;
    }

    .modal-dialog {
        z-index: 1050;
        margin: auto;
    }

    #login-box .register-col,
    #login-box .login-col {
        width: 100%;
        padding: 20px;
    }

    #login-box .register-col .btn,
    #login-box .login-col .btn {
        padding: 1.5rem;
        height: auto;

        font-size: 20px;
        line-height: 1;
    }

    #login-box .text-blue,
    #login-box .text-green {
        margin-top: 0;
        
        line-height: 1;
    }

    #login-box .plan {
        width: 100%;
        height: auto;
        margin: 0;

        background: none;
    }

    #login-box .plan table td {
        display: block;
        width: 100% !important;
    }

    #login-box .plan table td .btn{
        display: block;
        width: 100%;
    }

    #login-box .register-col, #login-box .login-col {
        width: 100%;
    }

    #login-box .btn {
        width: 100%
    }

    #login-box .forgot-wrapper {
        text-align: center;
        margin-top: 1.5rem;
    }
    
    /* Header */
    .pull-left,
    .pull-right {
        float: unset !important;
    }

    .site-header, 
    .site-footer {
        min-width: unset;
    }

    .site-header.home {
        height: auto;
    }

    .site-header.home .container {
        position: relative;

        height: auto;
        width: auto;
        min-width: unset;
    }

    .site-header .container {
        display: flex;
        flex-direction: column;

        padding: 15px
    }

    .site-header .logo {
        position: static;
        margin-left: 0;
        order: 1;

        width: 80px;
        height: 80px;

        margin: 1rem;
    }

    .site-header .logo svg {
        width: 80px;
        height: 80px;
    }

    .site-header ul {
        height: auto;
        width: 100%;
        margin-top: 0;
        
        order: 2;
    }

    .site-header ul:after {
        content: none;
    }

    .site-header ul.left {
        margin-top: 2rem;
    }

    .site-header ul.right {
        text-align: unset;
    }

    .site-header ul.right,
    .site-header ul.left {
        max-height: 0;
        opacity: 0;

        transform: translateY(-100%);

        transition: all .5s ease-in-out;
    }

    .site-header ul.right.nav-collapse,
    .site-header ul.left.nav-collapse {
        max-height: 500px;
        opacity: 1;
        
        transform: translateY(0);
    }

    .site-header ul.left li,
    .site-header ul.right li {
        margin-left: 0 !important;
    }

    .site-header ul li {
        display: block;
    }

    .site-header ul li a {
        padding: 0.75rem 0;
        margin: 0;
        width: 100%;
    }

    .site-header ul li a span {
        width: 100%;

        text-align: center;
    }

    .site-header.home .header-text {
        margin: 40px 0;

        order: 4;
    }

    .site-header.home .header-text img {
        width: 300px;
    }

    .site-header .navbar-toggle {
        position: absolute;
        top: 1rem;
        right: 1rem;

        display: block;
        padding: 10px 10px 4px;

        border-radius: 4px;
        border: 1px solid #fff;
    }

    .site-header .navbar-toggle svg {
        width: 30px;

        color: #fff;
    }

    /* Who For */
    .homepage .who-for {
        display: flex;
        flex-wrap: wrap;
        min-width: unset;
    }

    .homepage .who-for .consumers, 
    .homepage .who-for .businesses {
        width: 100%;
        padding: 1.5rem;
        min-height: unset;
    }

    .homepage .who-for .consumers .content, 
    .homepage .who-for .businesses .content {
        float: unset;
        width: 100%;
        margin: 0;
    }

    .homepage .who-for .consumers .graphic,
    .homepage .who-for .businesses .graphic {
        width: 100%;
        margin: 30px 0;
    }

    .homepage .who-for .title {
        margin-top: 75px;
        padding: 0;

        text-align: center;
    }

    .homepage .who-for .title img {
        top: -75px;
        left: 50%;
        transform: translateX(-50%);
    }

    .homepage .who-for .btn {
        width: 100%;
        padding: 1rem;
        height: auto;
        
        font-size: 20px;
        line-height: 1;
    }

    /* Seen on */
    .homepage .seen-on {
        height: auto;
        width: 100%;
        min-width: unset;
        padding: 1.5rem;

        line-height: 1;
    }

    .homepage .seen-on .container {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;
        align-content: space-around;
    }

    .homepage .seen-on .logos {
        position: static;
        
        display: grid;
        gap: 3rem;
        justify-content: center;
        grid-template-columns: auto auto auto;
        margin: 0;
        padding: 0;
    }

    /* Who For Tabs */
    .homepage .who-for-tabs .container {
        padding: 1.5rem;
    }

    .homepage .who-for-tabs .tab-headers {
        display: none;
    }

    .homepage .who-for-tabs .tab-content {
        margin: 0;
    }

    .homepage .who-for-tabs .tab-pane img {
        width: 100%;
    }

    .tab-content > .tab-pane {
        display: block;
        visibility: visible;
        margin-bottom: 50px;
    }

    .tab-content > .tab-pane:last-child {
        margin-bottom: 0;
    }

    .homepage .who-for-tabs .tab-content .left,
    .homepage .who-for-tabs .tab-content .right {
        width: 100%;
        float: unset;
    }

    .homepage .who-for-tabs .tab-content .title {
        font-size: 40px;
    }

    div.table > div {
        display: block;
    }

    .homepage .who-for-tabs .tab-content .register div:last-child {
        margin-top: 2rem;
        
        text-align: center;
    }

    div.table > div .btn {
        width: 100%;
        padding: 1rem;
        height: auto;
        font-size: 20px;
        line-height: 1;
    }

    /* How Does ReviewTrust Work */
    .homepage .how-works-1 {
        height: auto;
    }

    .how-works-1 .container {
        padding: 1.5rem;
    }

    .homepage .how-works-1 h3,
    .homepage .how-works-2 h3 {
        margin-top: 2rem;
    }

    .homepage .how-works-1 .icons,
    .homepage .how-works-2 .icons {
        width: 100%;
    }

    .homepage .how-works-1 p {
        margin: 0;
    }

    .homepage .how-works-2 .col1,
    .homepage .how-works-2 .col2,
    .homepage .how-works-2 .col3,
    .homepage .how-works-2 .col4 {
        width: 100%;
        margin: 2rem 0 0;
    }

    .homepage .how-works-2 .col1 img {
        display: block;
        width: 400px;
        margin: 1.5rem auto;
    }

    /* Gallery */
    .homepage .gallery {
        height: auto;
        padding: 1.5rem;
    }

    .homepage .gallery .container {
        padding: 2rem;
    }

    .homepage .gallery h5 {
        margin-top: 2rem;
    }

    .gallery .btn {
        font-size: 20px;
        height: auto;
    }

    .homepage .gallery .carousel .owl-prev {
        left: -2rem;
    }

    .homepage .gallery .carousel .owl-next {
        right: -2rem;
    }


    /* Contact Us */
    section.contact {
        display: flex;
        flex-direction: column;

        margin: 0;
    }

    section.contact .left, 
    section.contact .right {
        padding: 1.5rem !important;
        margin: 0 !important;
    }

    section.contact .left .content, 
    section.contact .right .content {
        padding: 0;
    }
    
    .contact .form-control {
        padding: 1.5rem;
        font-size: 16px
    }

    .contact .btn {
        width: 100%;
        height: auto;
        
        font-size: 20px;
    }

    /* Footer */
    .site-footer {
        background-size: cover !important;
        height: auto;
        width: 100% !important;
    }

    .site-footer .container {
        padding: 1.5rem;

        width: auto;
        min-width: unset;
        max-width: unset;
    }
    
    .site-footer ul,
    .site-footer li,
    .site-footer a {
        display: block;
        width: 100%;
    }

    .site-footer ul li a {
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 595px) {
    .homepage .seen-on .container {
        height: auto;
    }

    .homepage .seen-on .logos {
        padding: 1rem;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .homepage .how-works-2 .col1 img {
        display: block;
        width: 100%;
        margin: 1.5rem auto;
    }

}