@media screen and (min-width: 0px) and (max-width: 1200px) {

    body,
    html {
        background-color: #ffffff;
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .desktop {
        display: none;
    }

    .top-nav {
        position: fixed;
        background-color: #6a7fac;
        height: 50px;
        width: 100%;
        margin-top: 0px;
        border-bottom: solid #ffffff 1px;
    }

    .top-nav-mobile {
        position: fixed;
        background-color: #2b2b37;
        height: 50px;
        width: 100%;
        margin-top: 0px;
    }

    .ls-nav {
        background-color: transparent;
        justify-content: center;
        /* Centers horizontally */
        vertical-align: middle;
        /* Full viewport height */
        height: 50px;
    }

    .center-nav {
        display: none;
    }

    .rs-nav {
        background-color: transparent;
        color: #ffffff;
        text-align: right;
        height: 50px;
        line-height: 50px;
    }

    .rs-nav:hover,
    .rs-nav:focus,
    .rs-navactive {
        background-color: transparent;
        color: #ffffff;
        text-align: right;
        height: 50px;
        line-height: 50px;
    }

    .tagmeonline {
        font-family: sans-serif;
        font-weight: 600;
        background-color: transparent;
        border-color: none;
        border-style: none;
        color: #FFFFFF;
        text-decoration: none;
        text-align: left;
        line-height: 50px;
    }

    .tagmeonline:hover,
    .tagmeonline:focus,
    .tagmeonline:active {
        font-family: sans-serif;
        background-color: transparent;
        border: solid red 0em;
        font-weight: 600;
        color: #FFFFFF;
        box-shadow: none !important;
        text-decoration: none;
        text-align: left;
        line-height: 50px;

    }

    .menu-mobile {
        background-color: red;
        color: #ffffff;
        height: 25px;
        width: 25px;
    }

    .bottom-mobile-nav {
        background-color: #2b2b37;
        padding-top: 50px;
        min-height: 50px;
        width: auto;

    }

    .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item ::deep a.active {
        background-color: rgba(255, 255, 255, 0.37);
        color: white;
    }

    .nav-item ::deep .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .nav-scrollable {
        display: none;
    }

    .navbar-toggler {
        appearance: none;
        cursor: pointer;
        width: 25px;
        height: 25px;
        color: white;
        position: absolute;
        top: 0.5rem;
        right: 1rem;
    }

    .navbar-toggler:checked {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .navbar-toggler:checked~.nav-scrollable {
        display: block;
    }

    .nav-hr {
        border-top: 2px solid #ffffff;
    }

    .main-page-main-header-section {
        background-color: transparent;
        background-image: url('../images/Background-Image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: top;
        background-position-x: left;
        width: 100%;
        min-height: 400px;

    }

    .main-header {
        background-color: transparent;
        justify-content: center;
        min-height: 400px;
    }

    .main-header-hr {
        margin-top: 50px;
    }


    .main-header-text {
        font-family: sans-serif;
        color: #ffffff;
        text-align: left;
    }

    .main-header-h1 {
        padding-top: 200px;
        font-weight: 600;

    }

    .main-header-h4 {
        font-family: sans-serif;
        color: #1b1f2a;
        font-weight: 600;
        font-size: .9em;
        margin-top: 25px;

    }

    .main-header-p {
        font-family: sans-serif;
        color: #1b1f2a;
        font-size: 1em;
        margin-top: 15px;

    }

    .main-content {
        background-color: #ffffff;
        width: 100%;
        min-height: 50px;
        padding-top: 25px;
    }

    .content-header-hr {
        margin-top: 50px;
    }

    .main-header-btn {
        background-color: #1b1f2a;
        border: none;
        color: #ffffff;
        text-decoration: none;
        text-align: center;
        line-height: 50px;
        width: 240px;
        padding: 10px 20px 10px 20px;
    }

    .main-header-btn:hover,
    .main-header-btn:focus,
    .main-header-btn:active {
        background-color: #1b1f2a;
        border: none;
        color: #ffffff;
        box-shadow: none !important;
        text-decoration: none;
        text-align: left;
        line-height: 50px;
        width: 240px;
        padding: 10px 20px 10px 20px;
    }

    .bottom-mobile-nav-list {
        height: auto;
        font-family: sans-serif;
        background-color: #2b2b37;
        text-align: left;
        line-height: 20px;
        padding-top: 50px;
        padding-bottom: 200px;
        margin-right: 20px;
        font-size: .95em;
        list-style-type: none;
    }

    .bottom-mobile-nav-link {
        font-family: sans-serif;
        background-color: transparent;
        border-color: none;
        border-style: none;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
        line-height: 20px;
        font-size: .95em;
    }

    .bottom-mobile-nav-link:hover,
    .bottom-mobile-nav-link:focus,
    .bottom-mobile-nav-link:active {
        font-family: sans-serif;
        background-color: transparent;
        border: solid rgb(8, 8, 8) 0em;
        color: #6a7fac;
        box-shadow: none !important;
        text-decoration: none;
        text-align: center;
        line-height: 20px;
    }

    .mobile-dot {
        color: #d9d9d9;
    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
}

@media screen and (min-width: 1200px) {

    body,
    html {
        background-color: #151820;
        background-image: url('../images/Background-Image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .mobile {
        display: none;
    }

    .top-nav {
        position: fixed;
        background-color: transparent;
        height: 125px;
        width: 100%;
        margin-top: 0px;
    }

    .main-page-main-header-section {
        background-color: transparent;
        width: 100%;
        min-height: 800px;
    }

    .main-header {
        background-color: transparent;
        justify-content: center;
        /* Centers horizontally */
        align-items: center;
        /* Centers vertically */
        vertical-align: middle;
        /* Full viewport height */
        min-height: 300px;
    }


    .main-header-text {
        font-family: sans-serif;
        color: #ffffff;
        text-align: center;
    }

    .main-header-h1 {
        padding-top: 200px;
        font-weight: 600;

    }

    .main-header-h3 {
        font-weight: 400;
        font-size: 1.75em;
        margin-top: 25px;

    }

    .main-header-p {
        margin-top: 75px;
        font-size: 1.25em;
    }

    .main-header-btn {
        background-color: #ffffff;
        border: none;
        color: #1e212b;
        text-decoration: none;
        text-align: center;
        line-height: 50px;
        width: 240px;
        padding: 2px 20px 2px 20px;
        font-weight: bold;
        margin-bottom: 100px;
    }

    .main-header-btn:hover,
    .main-header-btn:focus,
    .main-header-btn:active {
        background-color: #ffffff;
        border: none;
        color: #1e212b;
        box-shadow: none !important;
        text-decoration: none;
        text-align: center;
        line-height: 50px;
        width: 240px;
        padding: 2px 20px 2px 20px;
        font-weight: bold;
        margin-bottom: 100px;
    }

    .mobileNav {
        background-color: transparent;
    }

    .ls-nav {
        background-color: transparent;
        justify-content: center;
        /* Centers horizontally */
        vertical-align: middle;
        /* Full viewport height */
        height: 125px;
    }

    .center-nav {
        background-color: transparent;
        text-align: center;
        vertical-align: middle;
        /* Full viewport height */
        height: 125px;
    }

    .rs-nav {
        background-color: transparent;
        text-align: right;
        height: 125px;
    }

    .main-content {
        background: linear-gradient(0deg, rgba(21, 24, 32, 1) 0%, rgba(21, 24, 32, 1) 85%, rgba(21, 24, 32, 0) 85%, rgba(21, 24, 32, 0) 100%, rgba(21, 24, 32, 0) 100%);
        width: 100%;
        min-height: 50px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: sans-serif;
        color: rgb(51, 49, 49);
        font-weight: 900;

    }

    p {
        font-family: sans-serif;
        color: rgb(100, 98, 98);
        font-size: 80%;
    }

    strong {
        font-family: sans-serif;
        color: rgb(90, 88, 88);
    }

    .logo {
        display: flex;
        background-color: transparent;
        background-image: url("../images/Tagmeonline_Logo.svg");
        background-position: center;
        background-repeat: no-repeat;
        vertical-align: middle;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    .company-logo {
        background-color: transparent;
        background-image: url("../images/Company_Logo.svg");
        height: 250px;
        width: 250px;

    }

    .content-bullet {
        color: #ffffff;
        margin-top: 50px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .content-header {
        color: #ffffff;
        margin-top: 0px;
        padding-top: 0px;
    }

    .content-body {
        color: #848790;
        margin-top: 100px;
        margin-bottom: 50px;
    }

    .content-bkgd {
        display: block;
        border-radius: 15px;
        border: 1px solid #2b2b37;
        background-color: #1e212b;
        height: auto;
        min-width: auto;
        padding: 10px 25px 10px 25px;
        margin-bottom: 50px;
    }

    .row {
        padding: 0px;
        margin: 0px;
    }

    .mylinks-icon-section {
        background-color: purple;
        line-height: 100px;
    }

    .mylinks-links-section {
        background-color: lightblue;
        line-height: 100px;
    }

    .contact-links {
        font-family: sans-serif;
        color: rgb(37, 35, 35);
        font-weight: 400;
    }

    .contact-links:hover,
    .contact-links:focus,
    .contact-links:active {
        font-family: sans-serif;
        color: rgb(166, 165, 165);
        font-weight: 400;
    }

    .mylinks-dot-section {
        background-color: transparent;
        line-height: 100px;
    }

    svg.icon {
        fill: rgb(8, 8, 50);
        margin-right: 5px;
    }

    svg.dot {
        fill: rgb(74, 74, 92);
        margin-left: 25px;
    }

    #top-nav-list li {
        font-family: sans-serif;
        display: inline;
        text-align: center;
        line-height: 125px;
        margin-right: 20px;
        font-size: .95em;
    }

    .top-nav-link {
        font-family: sans-serif;
        background-color: transparent;
        border-color: none;
        border-style: none;
        color: #FFFFFF;
        text-decoration: none;
        text-align: center;
        line-height: 125px;
        font-size: .95em;

    }

    .top-nav-link:hover,
    .top-nav-link:focus,
    .top-nav-link:active {
        font-family: sans-serif;
        background-color: transparent;
        border: solid red 0em;
        color: #FFFFFF;
        box-shadow: none !important;
        text-decoration: none;
        text-align: center;
        line-height: 125px;
    }

    .tagmeonline {
        font-family: sans-serif;
        font-weight: 600;
        background-color: transparent;
        border-color: none;
        border-style: none;
        color: #FFFFFF;
        text-decoration: none;
        text-align: left;
        line-height: 125px;
    }

    .tagmeonline:hover,
    .tagmeonline:focus,
    .tagmeonline:active {
        font-family: sans-serif;
        background-color: transparent;
        border: solid red 0em;
        font-weight: 600;
        color: #FFFFFF;
        box-shadow: none !important;
        text-decoration: none;
        text-align: left;
        line-height: 125px;

    }


    .register {
        font-family: sans-serif;
        background-color: transparent;
        border: 1px solid #ffffff;
        color: #FFFFFF;
        text-decoration: none;
        text-align: right;
        line-height: 125px;
        padding: 10px 20px 10px 20px;
    }

    .register:hover,
    .register:focus,
    .register:active {
        font-family: sans-serif;
        background-color: transparent;
        border: 1px solid #ffffff;
        color: #FFFFFF;
        box-shadow: none !important;
        text-decoration: none;
        text-align: right;
        line-height: 125px;
        padding: 10px 20px 10px 20px;

    }

    .btn-primary {
        font-family: sans-serif;
        font-weight: 600;
        background-color: transparent;
        border-color: none;
        border-style: none;
        color: rgb(45, 41, 41);

    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        font-family: sans-serif;
        background-color: transparent;
        border: solid red 0em;
        font-weight: 600;
        color: red;
        box-shadow: none !important;

    }

    .left-link {
        margin-bottom: 25px;
    }

    .right-link {
        margin-bottom: 25px;
    }

    .social-media-links {
        margin-bottom: 25px;
    }

    footer {
        background-color: #151820;
        min-height: 100px;

    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

}