/* ------------------- START Main HTML styles ------------------- */
        body, html {
            margin: 0;
            font-family: 'Raleway', sans-serif;
            font-size: 15px;
            background: #f1f1f1;
        }

        a {
            text-decoration: none;
        }

        h2 {
            font-size: 35px;
        }

        footer {
            padding: 2em 0;
            background: #343434;
            color: #fff;
        }

        footer h3 {
            margin-top: .25em;
        }

        footer a {
            color: #fff;
        }

        footer small {
            display: block;
            margin-top: 2em;
        }

        .flex {
            display: flex;
        }

        .flex.column {
            flex-direction: column;
        }

        .flex.spaced {
            justify-content: space-between;
        }

        .section {
            width: 55%;
            min-width: 565px;
            margin: 0 auto;
            padding-top: 3em;
            padding-bottom: 3em;
        }

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

        .hidden {
            visibility: hidden;
        }

        .not-displayed {
            display: none;
        }

        .invert-color {
            filter: invert(1);
        }

        /* ------------------- START Header section ------------------- */

        .hero {
            color: #fff;
            height: 600px;
            background: center / cover no-repeat url(http://leafpodiatry.co.uk/images/leaf_bg.png)            ;
        }

        .backstretch-item {
            background-position-x: 50%;
            background-position-y: 50%;
        }

        .logo img {
            width: 250px;
            padding: 10px 5px;
        }

        .nav-bar {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 55px;
            
            padding: 10px;
            margin: 10px;
            width: 200px;
        }

        #mobile-menu-toggle input {
            display: none;
        }

        .nav-links {
            flex-grow: 3;
            padding-top: 1rem;
        }

        .error {
            color: red;
            display: block;
            padding-left: 2rem;
        }

        .nav-links ul {
            display: flex;
            list-style-type: none;
            justify-content: space-evenly;
        }

        .nav-links ul li {
            color: #fff;
            font-weight: 600;
            letter-spacing: 0.6px;
        }

        .nav-links.dark-text ul li {
            color: #36383f
        }

        .spacer {
            flex-grow: 2;
        }

        .hero-title {
            margin: 0;
            padding: 2.5em 0;
            font-size: 16px;
            font-weight: 100;
            text-transform: uppercase;
        }

        .hero-content {
            align-items: center;
            justify-content: center;
            height: 100%;
            max-width: 655px;
            margin: 0 auto;
        }

        .hero-content p {
            width: 100%;
            line-height: 1.75em;
        }
        
 
     div#banner { 
       position: absolute; 
       top: 0; 
       left: 0; 
       background-color: #FFFFFF; 
       width: 100%; 
     }
     div#banner-content { 
       width: 100%; 
       margin: 0 auto; 
       padding: 10px; 
       border: 0px solid #000;
     }
     div#main-content { 
       padding-top: 70px;
    }

        
        

        .main-banner {
            width: 100%;
            margin: 0;
            margin-bottom: 5px;
            font-size: 4em;
            font-weight: 600;
        }

        /* ------------------- END Header styling ------------------- */

        /* ------------------- START Image-text block section ------------------- */

        #image_blocks .image_block_intro {
            text-align: center;
            margin-bottom: 40px;
        }

        #image_blocks .image_block {
            width: 48%;
            background-size: cover;
            background-position: center;
            border-style: solid;
            border-width: 9px;
            display: inline-block;
            border-color: #fff;
            -webkit-box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            -moz-box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            box-shadow: 5px 5px 5px 0px rgba(221, 221, 221, 1);
            margin-bottom: 20px;
        }

        #image_blocks .image_block img {
            width: 100%;
        }

        #image_blocks .text_block {
            width: 40%;
            display: inline-block;
            margin-left: 5%;
            vertical-align: top;
        }

        #image_blocks .text_block h2 {
            margin: 0;
        }

        #image_blocks {
            flex-direction: column;
        }

        .image_right_column {
            margin-left: 4%;
        }

        .row {
            display: flex;
            justify-content: space-between;
            padding-bottom: 2rem;
        }

        .text_block h1 {
            margin-top: 0;

        }

        /* ------------------- END Image-text block section ------------------- */

        /* ------------------- START Image-gallery section ------------------- */

        .gallery-container {
            text-align: center;
            background-color: #343434;
            color: #fff;
            padding: 20px;
        }

        .gallery-container ul {
            list-style-image: none;
            font-size: 0px;
            margin: 0 auto;
            padding: 0;
            max-width: 1000px;
        }

        .gallery-container .box {
            width: 23%;
            display: inline-block;
            margin: 1%;
            padding: 0;
        }

        .gallery-container .box a {
            display: block;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .gallery-container .box img {
            width: 100%;
            visibility: hidden;
        }

        /* ------------------- END Image-gallery section ------------------- */

        /* ------------------- START Contact Us section ------------------- */

        #about_us p, #about_us ul, #about_us ol {
            text-align: left;
        }

        #contact_us.section {
            padding-top: 1em;
            padding-bottom: 6em;
        }

        .card {
            padding: 30px 0px;
            background: #fff;
            box-shadow: #ddd 0px 0px 20px 5px;
        }

        .card h3 {
            font-size: 25px;
        }

        .card-highlight {
            width: 35%;
            padding: 30px 50px;
            margin-left: -50px;
            color: #fff;
            background: #666666;
        }

        .card-highlight hr {
            width: 100%;
            border: #fff solid .5px;
        }

        .card-highlight p {
            margin: 10px 0;
            font-size: 14px;
        }

        .card-highlight .title {
            margin: 0;
            margin-bottom: .5em;
            text-align: center;
        }

        .card-content {
            width: 65%;
            padding: 0 50px;
            padding-top: 30px;
        }

        .card-content .title {
            margin: 0;
        }

        .contact-form input,
        .contact-form textarea {
            width: 90%;
            margin: 10px 0;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 11px;
            font-family: 'Raleway', sans-serif;
            background: #ecf7fe;
            display: inline-block;
            vertical-align: middle;
        }

        .contact-icon {
            align-self: center;
            margin-right: 1em;
        }

        .contact-icon svg {
            opacity: .5;
            height: 1.75em;
        }

        .cta {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            padding: 12px 28px;
            border: solid 1px #f1f1f1;
            border-radius: 2px;
            margin: 10px 0;
            color: #f1f1f1;
            background: #666666;
            border: solid 1px #666666;
        }

        .contact-form .cta {
            border-radius: 3px;
        }

        .contact-highlight-details {
            justify-content: space-around;
        }

        #map {
            width: 100%;
            height: 424px;
            background-color: grey;
        }

        .social-icon {
            padding: 0 .5em;
        }

        .social-icon svg {
            width: 30px;
            height: 30px;
        }

        .info-msg div {
            display: none;
            position: fixed;
            bottom: 5%;
            left: 3%;
            z-index: 1000;
            background: #fff;
            padding: 1em 2em;
            border: 1px solid #ddd;
        }

        .info-msg div i {
            margin-right: .5em;
        }

        .info-msg div.closable {
            display: inline-block;
            position: relative;
            padding: 0;
            background: unset;
            border: none;
        }

        .info-msg div .close-x {
            display: inline-block;
            position: absolute;
            top: -12px;
            right: -5px;
            text-decoration: none;
        }

        .info-msg div .close-x i {
            color: #2c2c2c !important;
            margin-right: 0;
        }

        .info-msg .error {
            background: lightpink;
            color: black;
        }

        .info-msg .error i {
            color: red;
        }

        .info-msg .success {
            background: lightgreen;
        }

        .info-msg .success i {
            color: green;
        }

        .hours-list {
          list-style: none;
          margin: 0;
          padding: 10px 0;
        }

        .tbl-container {
            display: table;
        }

        .tbl-row {
            display: table-row;
        }

        .tbl-row.unusual {
            background-color: orange;
        }

        .tbl-row div {
            display: table-cell;
            padding: 2px 2px 10px 2px;
        }

        .tbl-row div:nth-child(odd) {
            padding-right: 20px;
        }

        .tbl-row div:nth-child(even) {
            white-space: nowrap;
        }

        .contact-form label {
            display: inline-block;
            width: 3%;
            color: red;
            font-size: 20px;

        }

        /* ------------------- END Contact Us section ------------------- */

        /* ------------------- START Social section ------------------- */

        .social-icon img {
            width: 32px;
        }

        .social-news-feed {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .social-news-item {
            padding: 1rem;
            background-color: #fdfdfd;
            border: 2px black;
            border-radius: 2%;
        }

        .social-news-item iframe {
            background-color: #fdfdfd;
        }

        /* ------------------- END Social section ------------------- */

        /* ------------------- START Mobile styles ------------------- */

        /*
          ## Device = Desktops
          ## Screen = up to 1440
        */
        @media (max-width: 1440px) {
            .social-news-item iframe {
                width: 100%;
            }
        }
        /*
          ## Device = Desktops
          ## Screen = 1281px to higher resolution desktops
        */

        @media (min-width: 1281px) {
          .section {
            width: 85%;
            max-width: 900px;
          }
        }

        /*
          ## Device = Laptops, Desktops
          ## Screen = up to 1280px
        */

        @media (max-width: 1280px) {}

        @media (max-width: 1220px) {
            .contact-form input,
            .contact-form textarea {
                width: 86%;
            }
        }

        /*
          ## Device = Tablets, Ipads (portrait)
          ## Screen = up to 1024px
        */

        @media (max-width: 1024px) {
            .social-news-feed {
                flex-direction: column;
            }

            .social-news-item {
                margin-bottom: 1rem;
            }

        }

        /*
          ## Device = Tablets, Ipads (landscape)
          ## Screen = B/w 768px to 1024px
        */

        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}

        /*
          ## Device = Low Resolution Tablets, Mobiles (Landscape)
          ## Screen = up to 767px
        */

        @media (max-width: 767px) {
            header {
                overflow: hidden;
            }

            .header-contain {
                overflow:hidden;
                position: relative;
            }

            .logo {
                background-position: left;
                margin-left: 15px;
            }

            .spacer {
                display: none;
            }

            .nav-links {
                margin-right: 1em;
            }

            #mobile-menu-toggle {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding: 2rem 1rem;
            }

            #mobile-menu-toggle input {
                display: flex;
                width: 40px;
                height: 32px;
                position: absolute;
                cursor: pointer;
                opacity: 0;
                z-index: 3;
            }

            #mobile-menu-toggle span {
                display: flex;
                width: 29px;
                height: 2px;
                margin-bottom: 5px;
                position: relative;
                background: #ffffff;
                border-radius: 3px;
                z-index: 2;
                transform-origin: 5px 0;
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
            }

            #mobile-menu-toggle.darken span {
                background: #36383f;
            }

            #mobile-menu-toggle span:first-child {
                transform-origin: 0% 0%;
            }
            #mobile-menu-toggle span:nth-last-child(2) {
                transform-origin: 0% 100%;
            }
            #mobile-menu-toggle input:checked ~ span {
                opacity: 1;
                transform: rotate(45deg) translate(-3px,-1px);
                background: #36383f;
            }
            #mobile-menu-toggle input:checked ~ span:nth-last-child(3) {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
            }
            #mobile-menu-toggle input:checked ~ span:nth-last-child(2) {
                transform: rotate(-45deg) translate(0, -1px);
            }

            .nav-links ul {
                position: absolute;
                top: 1%;
                right: -0.5%;
                flex-direction: column;
                justify-content: start;
                width: 180px;
                height: 100%;
                box-shadow: 0 0 10px #626569;
                margin: calc(100% - 110%) 0 0 calc(100% - 95%);
                padding: 90px 20px 10px 20px;
                background-color: #f5f6fa;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(70vw);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
                z-index: 1;
            }
            .nav-links ul li {
                padding: 20px 0;
                transition-delay: 2s;
                color: #36383f;
                font-size: 120%;
            }

            #mobile-menu-toggle input:checked ~ ul {
                transform: none;
            }

            #image_blocks .image_block {
                width: 100%;
                display: block;
                margin: 0 auto;
            }

            #image_blocks .text_block {
                width: 100%;
                display: block;
                margin: 2rem 0 0 0;
            }

            #image_blocks .text_block h2 {
                font-size: 25px;
            }

            .row {
                flex-direction: column;
            }

            .row.reverse {
                flex-direction: column-reverse;
            }

            .section {
                width: auto;
                margin: 0 4em;
                min-width: 0;
            }

            .hero-content {
                margin: 0 50px;
            }

            .card {
                flex-direction: column;
            }

            .card-highlight {
                margin: 0 50px;
                margin-top: -75px;
                width: auto;
            }

            .contact-highlight-details {
                margin: 0 auto;
            }

            .mobile-space-adjust.flex.spaced {
                justify-content: space-around;
            }

            .card-content {
                width: auto;
                margin-right: 25px;
            }

            .gallery-container .box {
                width: 48%;
                margin: 1%;
            }

            .main-banner {
                font-size: 2.5em;
            }

            #about_us h2 {
                font-size: 25px;
            }

            .card h3 {
                font-size: 20px;
            }

            .tbl-row div:nth-child(even) {
                white-space: unset;
            }

            .card-highlight {
                padding: 15px 25px;
            }

            .contact-highlight-details {
                width: 100%;
                overflow: visible;
            }

            .contact-form input,
            .contact-form textarea {
                width: 89%;
            }
        }

        @media (max-width: 543px) {
            .contact-form input,
            .contact-form textarea {
                width: 86%;
            }
        }

        /*
          ##Device = Most of the Smartphones Mobiles (Portrait)
          ##Screen = up to 479px
        */

        @media (max-width: 480px) {

            .gallery-container .box {
                width: 100%;
                display: inline-block;
                margin: 10px 0;
            }

            .section {
                margin: 0 2em;
            }

            .card-highlight {
                margin: 0 25px;
                margin-top: -75px;
            }

            .card-content {
                padding: 0 25px;
                padding-top: 30px;
            }
        }