@media (max-width: 992px) {

    #navbar_top {
        padding: 0;
        margin: 0;
        max-width: 100%;
        box-shadow: 0 0 1rem #000;
    }

    .navbar-collapse {
        background-color: var(--bs-white);
    }

    #navbar_top .navbar-nav .nav-item {
        background-color: var(--bs-white);
        border-bottom: 1px solid var(--bs-gray-400);
    }

    .navbar-nav .nav-item a:after {
        display: none;
    }

    #navbar_top .navbar-nav .nav-item a {
        color: var(--bs-gray-700);
        font-size: .95rem;
        padding: 1rem.5rem;
        font-weight: 550;
    }

    .navbar-brand {
        margin: 1rem;
    }

    .navbar>.container {
        padding: 0;
        margin: 0;
        max-width: 100%;
    }

    button.navbar-toggler {
        border: none;
    }

    nav button {
        margin-right: 1rem;
        margin-top: -.5rem;
    }

    .path-frontpage #navbar_top.bg-dark {
        padding-top: 0;
    }

    /* ditch the ugle blue outline */
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: 0;
        box-shadow: none;
    }

    /* hide close when burger shown */
    .navbar-toggler.collapsed .close-icon {
        display: none;
    }

    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
        display: inline;
    }

    .navbar-toggler .close-icon {
        font-size: 2.5rem;
        color: var(--bs-white);
        margin-top: -.5rem;
    }

    #featured-content p {
        font-size: .9rem;
        line-height: 1.7;
    }

    .images-featured .large-image.card-item:hover .hidden-content {
        top: 10%;
    }

    .images-featured .card-item.vertical-image h3 {
        font-size: 1.2rem;
    }

}

@media (max-width: 580px) and (max-width: 768px) {
    .card-item.large-image img {
        height: 400px;
    }
}

@media (min-width: 580px) and (max-width: 768px) {
    .path-frontpage h1 {
        margin-top: 8rem;
    }
}

@media (max-width: 768px) {

    #navbar_top.bg-dark {
        background-color: #000c24 !important;
    }

    .fixed-top .site-logo img {
        width: 120px;
    }

    a.btn.btn-sec,
    button.button {
        margin: .8rem 0 0;
    }

    #block-delphinebook-welcomeondelphinebook,
    #block-delphinebook-delphinebookfooter {
        width: 100%;
    }

    h1 {

        font-size: 3.5rem;
        line-height: 3.7rem;
        font-weight: 600;
        display: inline-flex;
    }

    .path-frontpage h1 {
        font-size: 3rem;
        line-height: 3.2rem;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    #block-delphinebook-page-title {
        display: inline-flex;
    }


    h2 {
        font-size: 1.5rem;
        font-size: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    #block-delphinebook-welcomeondelphinebook p {
        font-size: 1rem;
        line-height: 1.8rem;
        font-weight: 400;
    }

    #hero-home-content {
        background: #000c24 url('../images/home-header-mobile.jpg') no-repeat top center /95%;
        flex-direction: column;
        padding: 12rem 1rem 5rem;
        min-height: inherit;
    }

    #hobbies-content ul li:nth-child(1) {
        padding: .5rem;
    }

    #hobbies-content ul li {
        width: 100%;
        padding: 2rem;
    }

    #hobbies-content,
    #block-delphinebook-views-block-photos-gallery-cards-block-1,
    #featured-content {
        padding: 2rem 0;
    }

    #featured-content p {
        width: 100%;
        padding: 0 .5rem;
        text-align: left;
    }

    #block-delphinebook-views-block-photos-gallery-cards-block-1 h2 {
        padding: 0 .5rem;
    }

    #block-delphinebook-views-block-photos-gallery-cards-block-1 .view-header {
        flex-direction: column;
        padding: 0 .5rem;
    }

    #block-delphinebook-views-block-photos-gallery-cards-block-1 .view-header p.buttons {
        text-align: left;
    }

    #block-delphinebook-views-block-photos-gallery-cards-block-1 .view-header p.w-50 {
        width: 100% !important;
    }

    #block-delphinebook-footer {
        margin-left: inherit;
        margin-top: 1.5rem;
        width: 100%;
    }

    .w-45 {
        width: 100%;
    }

    .large-image,
    .vertical-image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .vertical-image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #trailedspreaddots {
        margin-left: -10px;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 {
        padding: 2rem .5rem 5rem;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 h2 {
        margin-bottom: .5rem;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 p {
        margin-bottom: 0;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 .view-header {
        margin-bottom: 3rem;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 h3 {
        margin-bottom: 0;
        font-weight: 600;
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 h3 a,
    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 .carousel-caption p {
        color: var(--bs-white);
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 .carousel-caption p {
        color: var(--bs-cyan-100);
    }

    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 .carousel-control-prev,
    #block-delphinebook-views-block-photos-gallery-cards-mobile-block-1 .carousel-control-next {
        display: none;
    }

    .carousel-caption {
        background: rgba(0, 0, 0, 0.6);
        bottom: 4.25rem;
    }


    /***********      ABOUT     **************/
    .region-hero {
        padding: 0 .5rem;
    }

    .path-about #block-delphinebook-content .field--name-body>div,
    .path-portfolio #block-delphinebook-content .field--name-body>div,
    #block-delphinebook-whatido .content-text {
        width: 100%;
    }

    #block-delphinebook-whatido {
        margin: 2rem 0;
    }

    .path-about #block-delphinebook-content .text-about-me,
    .path-portfolio #block-delphinebook-content .text-about-me {
        margin-left: 0;
        margin-top: 2rem;
    }

    .progress-bar-content {
        margin-top: 0;
        margin-left: auto;
        width: 100%;
    }

    #about-content {
        padding: 2rem 0;
    }

    #block-delphinebook-skillsandlanguages .skills {
        width: 100%;
        margin: 0 .5rem 2rem;
    }

    #carouselExampleSlidesOnly .w-50 {
        width: 100% !important;
    }

    #carousel-content {
        padding: 2rem .5rem 4rem;
    }

    #block-delphinebook-motto h2::before,
    #block-delphinebook-motto h2::after,
    #block-delphinebook-projects h2::before,
    #block-delphinebook-projects h2::after,
    #block-delphinebook-skillsandlanguages h2::before,
    #block-delphinebook-skillsandlanguages h2::after {
        width: 3rem;
    }

    #carousel-content {
        padding-bottom: 5rem;
    }

    /**************    PORTFOLIO     **************/
    #block-delphinebook-projects p {
        width: 100%;
        padding: 1rem .5rem 0;
        text-align: left;
        margin: 0;
    }

    .path-portfolio #block-delphinebook-content {
        margin-bottom: 2rem;
    }

    .project {
        flex-direction: column;
        padding: 1.5rem;
    }

    #about-content .project-image {
        width: 100%;
    }

    #about-content .project-text-content {
        width: 100%;
        margin-left: 0;
        margin-top: 1rem;
    }

    #block-delphinebook-projects ul {
        margin: 1.5rem auto 2rem;
    }

    #about-content #block-delphinebook-projects .project-text-content p {
        padding: 0;
    }

    #about-content .project-text-content h3 {
        font-size: 1.5rem;
    }

    #block-delphinebook-logosgraphicdesign .field--name-body .text-logo-design {
        width: 100%;
        margin-top: 0;
    }

    #block-delphinebook-logosgraphicdesign .field--name-body {
        display: flex;
        flex-direction: column;
    }

    #block-delphinebook-logosgraphicdesign {
        margin: 2rem .5rem;
    }

    #block-delphinebook-logosgraphicdesign h2 {
        margin-bottom: 1rem;
    }

    .images-logo-design {
        width: 100%;
        margin-left: 0rem;
        margin-top: 1rem;
    }

    .images-logo-design ul li {
        width: 100%;
        margin-right: 0;
    }

    .path-photos-gallery #block-delphinebook-content .field--name-body {
        margin-bottom: 1.5rem;
    }

    .path-photos-gallery #block-delphinebook-content .field--name-body p {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    #block-delphinebook-views-block-photos-gallery-block-1 button.button {
        margin-right: .5rem;
    }

    #block-delphinebook-views-block-photos-gallery-block-1 ul.grid li {
        width: 100%;
    }

    /*********************  PORTFOLIO  ************************/

    .path-photo-gallery #block-delphinebook-content .field--name-body p {
        width: 100%;
    }

    /*********************  CONTACT   ************************/

    #block-delphinebook-contactparagraph p {
        width: 100%;
    }

    .path-contact #block-delphinebook-content {
        margin-left: 1rem auto 0;
    }

    .path-contact #block-delphinebook-content,
    #block-delphinebook-contactimage {
        width: 100%;
    }

    #contact-message-feedback-form {
        padding: 2rem 1.5rem;
        margin-top: 3rem;
    }

    /*********************  GALLERY NODE   ************************/

    .page-node-type-gallery-photos main .field--name-body p {
        width: 100%;
    }

    .field--name-field-photos-gallery .field__item {
        width: 48%;
        margin: 0 .5rem .5rem 0;
    }

    .field--name-field-photos-gallery .field__item:nth-child(even) {
        margin: 0 0 .5rem 0;
    }

    /*********************  404 ERROR  ************************/

    .page-node-11 img.img-fluid {
        width: 100%;
        margin: 2rem auto;
    }
}

@media (max-width: 1200px) {
    .carousel-buttons {
        display: none;
    }

    /********************* NODE PROJECT  ************************/

    .page-node-type-project .item-list li {
        margin-left: 0;
    }

    .page-node-type-project article {
        padding-bottom: 0;
    }

    #block-delphinebook-views-block-project-sidebar-block-1 {
        margin-top: 0;
    }
}