@import 'structure.css';
@import 'font-awesome.min.css';
@import url('https://fonts.googleapis.com/css?family=Lato|Titillium+Web:400,600,700&display=swap');

/* ==============================================
   Brendan Teasdale Masonry Conservation Ltd
   Author: Hyper Hedgehog
   Website: http://hyperhedgehog.uk

   Contents
   -------------------------------

   1. Function classes
   2. Layout & Structure overrides
   3. Home / Landing
   4. Services
   5. Projects
   6. Sub-projects
   7. Tales from Northumberland
   8. About & Contact
   9. Let's Talk
   10.Location
   X. Media Queries

================================================== */


/* 1. Function classes
-------------------------------------------------- */
    .center {float:none; margin:0 auto;}
    .clr {display:block; clear:both;}
    .nopad {padding:0!important;}
    .no-wrap {white-space:nowrap;}


/* 2. Layout / Structure override
-------------------------------------------------- */
    html {}
    body {
        margin:0 auto;
        text-align:center;
        font-family:Lato, sans-serif;
        background:#F0EFEA;
        overflow-x:hidden;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        }

        #wrapper { /* aka #wrapper - All content goes inside to keep the margins on the left and right of the content when scaling down. */
            max-width:100%;
            margin:0 0px; /* page gutters L + R */
            padding:10px 10px 0 10px;
            background:#F0EFEA;
            }

            header {
                position:relative; 
                margin:auto;
                background:linear-gradient(-90deg,rgba(0,0,0,0.3),rgba(0,0,0,0)), url("../img/header-brendan-teasdale.jpg") #3E3B38;;
                background-size:cover;
                z-index:5;
                }

            header.e2e {
                display:block;
                position:absolute; top:0; left:0;
                min-width:100%;
                height:600px;
                }

            header img {
                position: absolute; top:40px; left:40px;
                width: 95px;
                margin: auto;
                }

                #content {padding-top:650px; } /* push down page content by same fixed margin as header height */
                #content div.row:last-child {margin-bottom:0;}


        /* basic nav styling */
            nav {
                position: absolute;
                bottom: -40px; left: 0; right: 0; 
                width: 55%;
                margin-left:auto;
                margin-right: auto;
                z-index:5;
                }
                nav ul {margin:auto; background: #3E3B38; box-shadow:0 5px 20px -20px #000;}
                nav ul li {margin: 0 1%; list-style:none; }
                nav ul li:first-child, nav ul li:last-child {display:none!important;}
                nav ul li a {
                    display:block;
                    padding:30px 3em;
                    font-size:1.4em;
                    text-decoration:none;
                    background: #3E3B38;
                    color:#d0d0d0!important;
                    }
                    nav ul li a:hover {color:#fff!important;}
                    nav ul li a:active{color:#bda177!important;}

            /* inline nav */
                nav.il ul li {display:inline-block;}

                /* centered */
                nav.c {text-align:center;}

                nav ul li.logo {margin:0 10px 10px 0;}
                nav ul li.logo .fa {font-size:2em;}
                nav ul li.mob-nav-btn a {font-size:2em; color:#666;}
                    nav.show ul li.mob-nav-btn a {color:#000;}

            /* Touch Contact links */
               .mob-only {display:none;}
                ul#touch-contact {margin:2.5em 0 2em; list-style:none;}
                ul#touch-contact li {display:inline-block; padding:0 1.75em;}
                ul#touch-contact li i {margin-top:-2px; margin-right:4px; vertical-align:middle;}
                ul#touch-contact li .fa {padding:0!important; font-size:1.1em!important;}
                ul#touch-contact li:last-child i {margin-top:-3px; margin-left:5px; margin-right:0; padding-right:0; font-size:.97em!important;}
                ul#touch-contact li a {
                    padding:8px 1px 8px 1px;
                    font:900 100% 'Titillium Web', helvetica, arial, sans-serif;
                    color:#bda177;
                    text-decoration:none;
                    text-transform:uppercase;
                    vertical-align:middle;
                    border-bottom:3px solid #bda177;
                    }
                    ul#touch-contact li:last-child a {padding:8px 0 8px 1px;}
                    ul#touch-contact a:hover {color:#a27f4b; border-color:#a27f4b;}
                    ul#touch-contact a:focus {color:#564B40; border-color:#666;}

            /* responsive burger nav */
                #burger {display:none;}


        footer {
            margin:20px -20px -20px -20px;
            padding:20px;
            background:#3E3B38;
            }
            footer.e2e {
                display:block; 
                position:absolute; left:0;
                width:100%;
                margin:20px auto 0;
                padding:3em 0;
                border-bottom:40px solid #3E3B38;
                }

            footer .fa-facebook-square {margin-left:.5em!important;}
            ul#footer-sitemap {margin-top:1.5em; margin-bottom:1em; margin-left:0;}
            ul#footer-sitemap li {display:inline-block; min-width:40px; margin:.5em 2em 0;}
            ul#footer-address {list-style-type:none;}

            footer h6 {font-size:1em; text-transform:none; font-weight:500;}
            footer address {font-size:.9em; color:#fff;}
            footer p {font-size:.9em; color:#fff;}
            footer p:last-child {margin-bottom:0; color:#bbb;}
            footer a {color:#fff!important;}
            footer a:hover {color:#bda177!important;}
            footer a:active {color:#957c56!important;}
            footer img {width:5%;}



    /* Palette ---

        Light Steel     #d7dde3
        Beige           #e6d8b9
        Tan             #ddc7a7
        Tan 2           #d0b795
        Rosy Brown      #6f635c
        Grey Taupe      #93816c
        Dark Olive      #54442b
        Slate Grey      #57595c
        Dim Grey        #3f3c3f
        Charcoal        #25201b

    */



    /* Typography --- */

        h1, h5, h6 {font-family: Lato, serif; color:#bda177;}

        h1 {font-size: 2.6em; margin-bottom:1em; font-weight:lighter;}
        h2 {margin:0 auto .5em; font-size: 2.8em; color:#564B40; font-family:'Titillium Web', helvetica, arial, sans-serif; font-weight:600;}
        h3 {font-size: 1.4em; font-weight:lighter; color:#564B40;}
        h4 {font-size: 1.6em; line-height:1.1em; color:#564B40; font-family:'Titillium Web', helvetica, arial, sans-serif;}
        h5 {font:1.4em Lato, sans-serif;}
        h6 {font-weight:500;}

        h3, h4, h5, h6 {margin-bottom:0.5em;}


            header h1 {
                max-width:80%;
                margin:auto;
                right:0;
                color: #fff;
                text-align:center;
                text-shadow:2px 2px 15px #000;
                }

            header h2 {
                margin:320px 0 .5em auto;
                color:#bda177;
                text-align:center;
                font-weight:700;
                font-size:1.4em;
                text-shadow:2px 2px 15px #000;
                }

            h3 em {padding-right:2px;}

            .section-header h3 {margin-bottom:2em;}


        p {font-size: 1.1em; line-height: 1.4em; margin-bottom:1em; color:#564b40;}

        address {margin-bottom: 2em;}

        .fa {font-size: 1.7em; padding-bottom:10px;}
        .fab {font-size:3em; margin-bottom: 5px;} /*Linked in icon */



    /* Links --- */

        a, a:visited {color:#957c56; text-decoration:none;}
        a:hover, a:focus {color:#a27f4b;}
        a:active {color:#564b40;}

        a.learn-more {
            display: inline-block;
            margin-bottom: 20px;
            padding: 8px 10px;
            vertical-align: baseline;
            cursor: pointer;
            border-bottom: 3px solid #bda177;
            color:#bda177;
            font-family:'Titillium Web', helvetica, arial, sans-serif;
            text-transform: uppercase;
            font-weight:900;
            }
            a.learn-more:hover {color:#a27f4b; border-bottom:3px solid #a27f4b;}
            a.learn-more:active {color:#564B40; border-bottom:3px solid #564B40;}


        #top-button {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: #3E3B38;
            color: white;
            cursor: pointer;
            padding: 10px 15px;
            z-index: 1000;
            }
  



    /* Sections --- */

        section {
            margin-top:0;
            margin-bottom:15em;
            padding-top:6em;
            }
            section:last-child {margin-bottom:0!important; padding-top:0!important;}


            /* Banding */
            .preband {margin-bottom:0!important;}
            .band {
                position:relative;
                width:100vw;
                left:49.99%;
                right:49.99%;
                margin-left:-50vw;
                margin-right:-50vw;
                margin-bottom:0;
                padding:6em 0 13em;
                }
                .band .row {margin:0 auto 1.5em; padding:0;}
                .band .row .row {padding:0 20px;}
                .band .row::after {}

              /* band colouring */
                .band {background:#ddd;}
                .b-band {background:#369; color:#ddd;}
                .c-band {background:maroon;}

                    .b-band .row div {background:rgba(0,0,0, 0.05);}
                    .b-band h4 {color:#ccc;}
                    .b-band .w-25 p {color:rgba(255,255,255, 0.4);}

              /* band sizing */
                .band .row {/*width:90%;*/ width: 100%; max-width:1860px;}
                .band.wideband .row {max-width:2200px;}
                .band.narrowband .row {max-width:1080px;}               

            




/* 3. Home / Landing page
-------------------------------------------------- */

    #intro {margin-top:5em; padding:0 8em;}
        #intro h4 {margin-bottom:1.6em; color:#6f635c; line-height:1.5em;}
        #intro h5 {margin-bottom:0; color:#93816c; line-height:1.45em;}

    .tales-link {margin:auto; max-width:64%;}
    .tales-logo {margin:auto; padding:1em 0; max-width:50%;}
    .tales-link img {width:40%; padding:4em 4em 0;}

 


/* 4. Services
-------------------------------------------------- */

    #services { }

        #services-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            }
            .service {/*background-color:#F5F4F1;*/ transition:.1s; cursor:pointer;}
                .service:hover {/*background:#fff;*/box-shadow: 0 5px 30px #d8d4c5/*eaeaea*/;}
                .service-active {/*background:#fff;*/ transition:.1s; box-shadow: 0 5px 30px #d8d4c5;}
                .service-active a.learn-more {padding:8px 20px; color:#a27f4b; border-bottom:3px solid #a27f4b;}

                .service-image {margin: 0 0 10px 0;}
                .service-image img {width: 100%;}

                .service h4 {padding:0 0 0 .5em; text-transform: uppercase; text-align:left;}

                ul.srv-problems {
                    min-height: 150px;
                    padding:0 1em;
                    margin-left: 0;
                    margin-bottom: 2em;
                    list-style-type: none;
                    text-align: left;
                    font-size: .9em;
                    color:#B3AA9C;
                    }
                    ul.srv-problems li {padding-bottom:.5em;}

                .service-content {
                    margin:2em 0!important;
                    padding:0!important;
                    /*background:#fff;*/
                    box-shadow: 0 5px 30px #d8d4c5;
                    text-align:left;
                    }

                    #service1 {display:none;}
                    #service2 {display:none;}
                    #service3 {display:none;}
                    #service4 {display:none;}

                    .service-intro {padding:1em;}
                        .service-intro h2 {margin:0 0 .5em!important; font-size:1.6em;}

                    .tab-content-wrapper {
                        display:flex!important;
                        padding:0!important;
                        margin:1.5em 0 0!important;
                        }
                        .tab-content-wrapper-mobile {display:none!important;}

                    .tab {
                        float: left;
                        padding:0 1em 1em!important;
                        margin:0!important;
                        }
                        .tab button {
                            width: 100%;
                            margin-bottom:0;
                            padding: 1.2em;
                            text-align: left;
                            transition: 0.3s;
                            background:none;
                            font-size:1em; /*was important but obv overruled mp- */
                            border-bottom:solid 3px #d6c4a9;
                            }

                        .tab button:last-child {margin-bottom:0;}
                        .tab button:hover {background:#D6C4A9;}
                        .tab button.active {background:#D6C4A9; /*border-color:#a27f4b;*/}

                        #tab1-1, #tab2-1, #tab3-1, #tab4-1 {width:100%;}

                        .tab-content {
                            width:70.8%!important;
                            margin-left:0!important;
                            margin-bottom:0;
                            padding:0!important;
                            }
                            .tab-content h3 {font-weight:normal;}

                            .srv-prob, .srv-img {
                                display:inline-block;
                                margin:.5em 0 .5em 1em!important;
                                padding:.5em!important;
                                vertical-align:top;
                                text-align:left;
                                }
                                .srv-prob {width: 69.8%!important; margin:0!important;}  
                                    .srv-prob p {text-align:left; font-size:1em;}
                                    .srv-prob a {/*color:#bda177;*/ padding:0 2px; color:#564b40; text-decoration:none; white-space:nowrap; background:#d6c4a9;}
                                    .srv-prob a:hover {color:#e6d8b9; background:#93816c;}
                                    .srv-prob a:active {background:#564b40;}
                                .srv-img {width: 28.2%!important; margin:0 0 0 2%!important;}
                                    .srv-img p {text-align:center;}
                                    .srv-img img {
                                        width:47%;
                                        vertical-align:inherit;
                                        margin:0 0.8%;
                                        height:180px;
                                        object-fit:cover;
                                        text-align:right;
                                        }
                                        .fw-fig img {width:97%;}




/* 5. Projects
-------------------------------------------------- */
    
    #projects {background:#E4E1D6;}

        #projects-container {padding:0 6em;}
            #projects-container .w-60 .project-image {margin:auto 0; width:100%;}
            #projects-container .w-60 a.learn-more {padding:8px 20px; color:#a27f4b; border-bottom:3px solid #a27f4b;}
            #projects-container .w-20 .project-image {}
            #projects-container .w-20 span {display:none;}
            #projects-container .panel {display:none;}

        .project {margin-left: 2%!important; transition: .5s;} 
            .project-image {cursor: pointer;}
            .project-image img {width: 100%; margin: 0 0 5px 0;}
            .project h4 {margin-bottom: 2em; text-align:left; text-transform: uppercase;}
            .project a.learn-more {box-shadow:none;}
            .project a i {margin-right:6px;}


        .panel {margin-top:2em; text-align:left; overflow:hidden;}
            .project-intro {text-align:center;}
                .project-intro h5, .project-intro p {padding:0 10px;}
                .project-intro h5 {margin-top:2em; font-size:1.2em;}
                .project-intro a {color:#bda177;}
                .project-intro a:hover {color:#a27f4b}

                .project-details {margin-top:2em; text-align:left;}
                    .project-details p, #sub-projects p {font-size:1em;}
                    p.casestudy-link {text-align:center;}

                .project-details-image {
                    width:100%;
                    height:250px;
                    border:1px solid;
                    }

                .project-gallery-container ul {
                    list-style:none outside none;
                    padding-left:0;
                    margin:0;
                    }

            .project a {font-weight:bold; cursor:pointer;}

            .project-images {padding:20px 10px 80px;}
            .project-images a {margin:0 auto 10px;}
            .project-images img {margin-bottom:3px; /*height:130px; object-fit:cover;*/}
            .proj-img-20 img {width:19%;}
            .proj-img-25 img {width:24%;}
            .proj-img-30 img {width:29%;}
            .proj-img-33 img {width:32%;}
            .proj-img-40 img {width:39%;}
            .proj-img-50 img {width:49%;} 




/* 6. Sub-projects
-------------------------------------------------- */

        #sub-projects {padding:0 6em; margin-top:5em;}
            #sub-projects h4 {font-size:1.4em; font-weight:bold; margin:.5em auto;}
            #sub-projects a i {margin-right:6px;}




/* 7. Tales from Northumberland
-------------------------------------------------- */

        #tales {background:#E4E1D6;}
            #tales-images {max-width:70%; margin-top:2em;}
    



/* 8. About & Contact
-------------------------------------------------- */
      
        #bio {
            background:#dbceba;
            background:#efebdd;
            }


        #about-container {}
            #about-container h2 {text-align:left;}
            #about-container p {text-align:left;}
            #about-container img {float:right; margin-bottom:20px;}


        #contact-container {
            margin-top:-9.5em;
            margin-bottom:1.75em;
            padding:2.5em 1em 4em;
            background:#CBC6B4;
            color:#564b40;
            }
            #contact-container h2 {margin-bottom:1.5em;}
            #contact-container a {color:#564b40;}
                #contact-container a:active {color:#957c56}
                #contact-container a:hover {color:#bda177}
                #contact-container .fa {font-size:2.2em;}
            #contact-container .fab {font-size: 2.7em; padding-bottom:10px; margin-bottom:0;}


            ul.contact-info {margin:auto; padding:0!important; position:relative; list-style-type: none; }
                ul.contact-info li {margin-left:0;}
                ul.contact-info li:nth-child(1) { padding-left:0;}
                ul.contact-info li:nth-child(2) {clear: both; margin-left:0; padding-left:0;}
                ul.contact-info li:nth-child(3) {padding-top:4px!important; position:absolute; top:0; right:0;}
                ul.contact-info li:nth-child(4) {padding-top:5px!important; bottom:10em; right:0;}
                ul.contact-info li:nth-child(5) {margin-top:1.5em;}
                ul.contact-info address {margin: 0; padding:0; line-height:1.5em;}
                ul.contact-info li.w-50 {padding:10px;}




/* 9. Lets Talk
-------------------------------------------------- */

        #contact {margin-bottom:12em}

            #form-container {padding-bottom:0;}

                form {
                    width: 70%;
                    margin:auto;
                    text-align: left;
                    }
                    /* Try to disable or remove after disabling dev-theme stylsheet */
                    form div, 
                    form div.row, 
                    form div.w-100, 
                    form div.w-66,
                    form div.w-50, 
                    form div.w-33, 
                    form div.w-33, 
                    form div div div {
                        padding:0;
                        min-height: 0!important;
                        background:none!important;
                        }

                        label, input, textarea, button {
                            font-size: 1.2em!important;
                            font-family: Lato, sans-serif;
                            margin-bottom: .5em;
                            }
                        label {display:none; color:#564B40;}
                        input {display: block; box-sizing: border-box; border: none;}

                        input[type=text], input[type=email], input[type=tel],input[type=date], input[type=time], 
                        textarea {
                            padding: 8px;
                            width: 100%;
                            border: none;
                            box-sizing: border-box;
                            }
                            input[type=date] {-webkit-appearance:none;}
                            input[type=time] {-webkit-appearance:none;}
                            input:focus {outline-style: none; box-shadow: none;}
                            textarea:focus {border: none;}


                        #survey-trigger {}
                            #survey-trigger label {
                            display: block;
                            padding: 8px 0;
                            width: 50%;
                            cursor:pointer;
                            }
                            #survey-trigger input {display:inline-block; margin: 0 8px 5px 12px;}

                        #survey-fields-container {display: none; margin-top: 10px;} 
                            #city {width: 50%;}
                            #postcode {width: 20%;}
                            .empty {color: #7c7c7c;} /* Placeholder text styling for Date & Time only */


                        #nature-wrapper {
                            margin: 0;
                            padding: 0;
                            left: auto;
                            right: auto;
                            }
                            #nature-wrapper label {
                                display: inline-block;
                                margin: auto;
                                padding: 8px 5px;
                                width: 100%;
                                cursor: pointer;
                                }
                            #nature-wrapper input {
                                display: inline-block;
                                margin: 0px 12px 5px 7px;
                                }

                            textarea#message {margin-bottom:0;}

                        /* Dropzone */

                            .dropzone {
                                padding:10px!important; 
                                background:#bda17721!important; 
                                border:1px dotted rgba(0,0,0, 0.2)!important;
                                }
                                .dz-default.dz-message .dz-button {font-size:14px!important; color:rgba(0,0,0, 0.4)!important;}
                                .dz-preview {margin:10px!important;}
                                .dz-remove {margin-top:4px!important; font-size:12px!important;}

                            #upload-errors,
                            #upload-errors li {
                                margin-left:0; list-style:none;}
                                
                                #upload-errors {margin-top:8px;}
                                #upload-errors li {color:#b00; font-weight:bold;}

                            .consent-container {
                                float:left;
                                display:inline-block;
                                margin-bottom:1.5em;
                                padding-top:10px;
                                color:#888;
                                text-align:left;
                                line-height:1.4em;
                                }
                                #consent.optin {display:inline-block; margin-right:8px}


                        button {
                            padding: 8px;
                            width: 25%;
                            background: #e1e1e1;
                            border: none;
                            }
                            button:hover {}
                            button:focus,
                            button:active {
                                background: #fff;
                                }

                        #submit {
                            margin-bottom:0;
                            padding:10px 5px 12px;
                            width: 20%;
                            background: #bda177;
                            border: none;
                            color:#fff;
                            -webkit-appearance:none;
                            }
                            #submit:focus, #submit:hover, #submit:active {background: #a27f4b;}


            .contact_form_success {
                display:none;
                width:70%;
                min-height:300px;
                padding-top:200px;
                margin:0 auto;
                }




/* 10. Location
-------------------------------------------------- */

    #location {}
        #location h3 {display:none;}

        #map {
            display:block;
            position:relative;
            width:100vw;
            right:50%;
            bottom:-10px;
            left:50%;
            margin:0 -50vw -1.5em -50vw;
            padding:0;
            }

            #map iframe {height:650px;}









/* --------------------------------------------------
   X. Media Queries
-------------------------------------------------- */

    /* Desktop Large
    -------------------------------------------------- */
    @media only screen and (min-width: 1401px) {
        body {max-width:1300px; /*background:#8389AA;*/} /*purple*/
        
            .page {margin:0 0px; padding:20px;}

            header h1 {max-width:1300px; font-size:2.8em; font-weight:bold;}
            header h2 {margin-bottom:1.25em; font-size:2em;}
            header img {width:120px;}

            nav, nav ul, nav ul li {max-width:1000px;}
            nav ul li a {min-width:70px; padding:30px 2em; font-size:1.6em;}

            footer.e2e {padding:3em 0 2em; font-size:1.2em;}
                footer img {width:4.5%; margin-bottom:.5em;}
                footer address {margin-bottom:6em;}
                footer ul#footer-sitemap {margin-top:1em;}

            h3 {margin-bottom:2em; font-size:1.5em;}
            h4 {margin-bottom:.75em; font-size:1.8em;}

            p {font-size:1.2em;}


            a.learn-more {margin-bottom:25px; font-size:1.2em;}



            #content {padding-top:630px;}

                section, .band {padding-top:8em;}



            /* Services -- */
                #services {margin-bottom:6em;}
                    .service h4 {padding:0 .75em;}

                ul.srv-problems {min-height:208px; padding:0 1.25em; font-size:1.1em;}
                    ul.srv-problems li {padding-bottom:.75em; line-height:1.35em;}

                .service-content {padding:.5em!important;}
                    .tab-content-wrapper {font-size:1.15em;}
                    .tab-content-wrapper h3 {margin-top:.35em; margin-bottom:1em; font-size:1.3em;}



            /* Projects -- */
                #projects-container .w-33{width:32%!important;}
                #projects-container .w-60 {width:60%!important;}
                #projects-container .w-20 {width:18%!important;}
                    .project:first-child {margin-left:0!important;}
                    .project .panel {font-size:1.15em;}



            /* Tales */
                #tales {padding-left:6em; padding-right:6em;}



            /* About -- */
                #bio {padding-left:6em; padding-right:6em;}
                #bio .row {max-width:1300px; margin:0 auto;}
                    #contact-container {margin-top:-12em; padding-bottom:6em;}



            /* Form -- */
                label, input, textarea, button {margin-bottom:.65em; font-size:1.4em;}



            /* Location -- */
                #map {width:100vw!important;}
                #map iframe {height:600px;}



      }



    /* Desktop
    -------------------------------------------------- */
      @media only screen and (min-width: 1026px) and (max-width: 1400px) {
        body {max-width:1100px; /*background:#71B7EA;*/} /*blue*/


        header.e2e {height:550px;}
            header h1 {max-width:900px; font-size:2.4em; font-weight:bold;}
            header h2 {margin:290px 0 .75em auto; font-size:1.8em; font-weight:normal;}
            header img {position:absolute; top:30px; left:30px; width:100px;}


        nav {width:70%; bottom:-36px;}
            nav, nav ul, nav ul li {max-width:740px;}
            nav ul li {margin:0 1%;}
            nav ul li a {padding:28px 1.8em; font-size:1.6em;}

        footer address {margin-bottom:5em;}


        h4{font-size: 1.5em;}



        #content {padding-top:575px;}

            section {}
        
        #intro {padding:0 6em;}


        /* Services */
            .service-image {}
                .service-image img {}
                ul.srv-problems {min-height:155px}

        
        /* Projects */
        .project:first-child {margin-left:0!important;}
          #projects-container .w-33{width:32%!important;}
          #projects-container .w-60 {width:60%!important;}
          #projects-container .w-20 {width:18%!important;}
            .project-image {}
                .project-image img {}


        /* Tales */

            #tales {padding-left:6em; padding-right:6em;}


        /* Bio */

            #bio {padding-left:6em; padding-right:6em;}
                ul.contact-info {padding:0!important;}
                ul.contact-info li:nth-child(1),
                ul.contact-info li:nth-child(2) {padding-left:0!important;}

        /* Contact */
            #contact {margin-bottom:10em;}
            form {width:80%;}




      }




    /* Tablet Landscape
    -------------------------------------------------- */
    @media only screen and (min-width: 770px) and (max-width: 1025px) {
        body {background:#3E3B38; /*background:#7EAC88;*/} /*green*/

        header.e2e {height:500px;}
          header img {position:absolute; top:26px; left:20px; width:90px;}

        nav {bottom: -34px; width:75%; max-width: 640px; min-width:620px;}
            nav ul li {margin: 0 .75em;}
            nav ul li a {padding: 24px 1.5em; font-size:1.6em}

        footer.e2e {margin-top:22px; padding:2em 0 0; font-size:1.2em;}
        footer img {width:65px; margin-bottom:.5em;}
        footer address {margin-bottom:6em;}


        h1 {font-size: 1.8em;}
        h2 {font-size: 2.3em;}
        h4 {font-size: 1.2em;}

          header h1 {max-width:840px; padding:0 .5em; font-size:2.25em;}
          header h2 {margin:260px 0 .75em auto; font-size:1.5em;}


        p {font-size: 1.25em;}


     
        #content {padding-top:495px;}
            
            section {margin-top:0; margin-bottom:3em; padding:4em 0 8em;}
                section.band {margin-bottom:0!important; padding:4em 0 9em;}
                    .section-header {padding:0 4.5em!important;}
                    .section-header h3 {padding:0 2em;}
    
                    .row:last-child {margin-bottom:0;}


            #top-button {
                bottom: 20px;
                right: 20px;
                }


            #intro {padding:0 6em;}
            #intro h4 {font-size:1.55em;}

            .tales-link img {width:50%; padding-top:5em;}




        /* Services */
        
            #services {margin-top:2em!important;}

                ul.srv-problems {min-height:250px; font-size:.9em; line-height:1.3em}
                ul.srv-problems li {margin-bottom:.5em}
                .service h4 {margin-bottom:1em}
                .srv-img {margin-left:.5em!important;}
                

        
        /* Projects */

            #projects {}

                #projects h4 {font-size:1.2em;}

                #projects-container {padding:0 1.4em!important;}
                    #projects-container .w-33{width:32%!important;}
                    #projects-container .w-60 {width:60%!important;}
                    #projects-container .w-20 {width:18%!important;} 
            
                .project:first-child {margin-left:0!important;}

                    .project-images {padding:10px 10px 40px;}

                    .project-info p,
                    .project-images p {font-size:1.1em;}

                    .project-info p:last-child,
                    .project-images p:last-child {margin-bottom:0;}
                    .project-info li {margin-left:.5em;}


        /* Sub-Projects */

            #sub-projects

                .tl-50 {width:46%!important;}



        /* Tales */

            #tales {padding-left:3em; padding-right:3em;}
                #tales-images {max-width:100%;}


        /* About -- */
            #bio {padding-left:3em; padding-right:3em;}

                #about-container {padding-right:2em;}

                #contact-container {
                    margin-top:-2em;
                    padding-left:.5em;
                    padding-right:.5em;
                    padding-bottom:4em;
                    }
                    ul.contact-info li {font-size:.9em;}
                    ul.contact-info li:first-child {margin-bottom:0;}



        /* Tales Band */

            .tales-logo {max-width:60%;}         



        /* Contact --- */
            #contact {margin-bottom:0;}
                #contact .section-header h3 {margin-bottom:1em;}

                form {width:80%; padding:14px 14px 0;}
                    form div.row:first-child {margin-bottom: 1em;}
                    form div.row:nth-child(2) {margin-bottom: .2em;}
                    form div.row:nth-child(3) {margin-bottom:.45em;}
                    form div.row:last-child {margin-bottom:0;}

                    input, form label, textarea, form h5, button, #submit {font-size:1.2em!important;}
                    form h5 {margin-top:.8em; font-weight:bold;}
                    input[type="text"], input[type="email"], input[type="date"], input[type="time"], textarea {padding:12px 11px;}
                    textarea {height:250px;}
                    #submit {width:30.1%;}



        /* Location --- */
            #location {margin-bottom:0; padding-bottom:0;}
                #map {width:100vw!important;}

      }




    /* Tablet Portrait
    -------------------------------------------------- */
        @media only screen and (min-width: 670px) and (max-width: 769px) {
        body {background:#3E3B38; /*background:#F2EA9C;*/} /*yellow*/


            header.e2e {height:400px; }
            header img {position:absolute; top:20px; left:20px; width:60px;}

            nav {bottom:-30px; width:80%; max-width:570px; min-width:527px;}
            nav ul li {margin: 0 .5em;}
            nav ul li a {padding: 23px 1.4em; font-size:1.45em}

            footer {padding:2em 0 0 0!important; font-size:115%;}
            footer.e2e {margin-top:27px;}
            footer img {width:7%; margin-bottom:.75em;}
            footer address {margin-bottom:6em!important;}

            h1 {font-size: 1.5em;}
            h2 {font-size: 2.1em;}
            h3 {font-size: 1.4em;}
            h4 {font-size: 1.5em;}
            h5 {font-size: 1.2em;}

                header h1 {max-width:600px; line-height:1.4em; font-size:1.65em;}
                header h2 {margin:192px 0 14px auto; font-size:1.35em;}
                header img {top:25px; width:70px;}

            p {font-size:1.2em;}



        #content {padding-top:420px;}

            section {
                margin-bottom:7em;
                padding:4em 0 2em 0;
                }
                section.band {margin-bottom:0; padding:4em 0 9em;}
                .section-header h3 {max-width:80%; margin-left:auto; margin-right:auto;}
                .row:last-child {margin-bottom:0;}

            #top-button {
                bottom: 20px;
                right: 20px;
                }

            #intro {padding:0 3em;}

            .tales-link img {width:50%;}



        /* Services */

            #services {margin-top:3em;}

                #services-container {}

                .service {margin:auto!important;}
                    a.learn-more {}

                    #service-box1, #service-box2, #service-box3, #service-box4 {margin-bottom:2em!important;}

                    .service-content {margin: 0 0 6em 0!important;}
                        .service-content h2, .service-content p {text-align:left;}

                    .tab-content-wrapper {flex-wrap: wrap;}
                    .tab {display:contents!important;}
                        .tab button {padding:1em;}
                    .tab-content {width:100%!important; padding:0 1.5em!important;}
                        .tab-content h3 {display:none;}

                    .srv-prob {width:100%!important;}
                        .srv-prob p {font-size:1.1em;}
                    .srv-img {margin-left:.5em!important; width:100%!important;}

                    #service-box1 {order:1;}
                    #service-box2 {order:2;}
                        #service1 {order:3;}
                        #service2 {order:4;}
                    #service-box3 {order:5;}
                    #service-box4 {order:6;}
                        #service3 {order:7;}
                        #service4 {order:8;}   

                    #tab1-1 {order:1;}
                        #srv1-sub1 {order:2;}
                    #tab1-2 {order:3;}
                        #srv1-sub2 {order:4;}
                    #tab1-3 {order:5;}
                        #srv1-sub3 {order:6;}

                    #tab2-1 {order:1;}
                        #srv2-sub1 {order:2;}
                    #tab2-2 {order:3;}
                        #srv2-sub2 {order:4;}
                    #tab2-3 {order:5;}
                        #srv2-sub3 {order:6;}
                    #tab2-4 {order:7;}
                        #srv2-sub4 {order:8;}
                    #tab2-5 {order:9;}
                        #srv2-sub5 {order:10;}

                    #tab3-1 {order:1;}
                        #srv3-sub1 {order:2;}
                    #tab3-2 {order:3;}
                        #srv3-sub2 {order:4;}
                    #tab3-3 {order:5;}
                        #srv3-sub3 {order:6;}

                    #tab4-1 {order:1;}
                        #srv4-sub1 {order:2;}
                    #tab4-2 {order:3;}
                        #srv4-sub2 {order:4;}
                    #tab4-3 {order:5;}
                        #srv4-sub3 {order:6;}



        /* Projects */

            #projects {}

            #projects h4 {font-size:1.2em;}

            #projects-container {padding:0 1.5em;}
                #projects-container .w-33{width:32%!important;}
                #projects-container .w-60 {width:60%!important;}
                #projects-container .w-20 {width:18%!important;}

                .project:first-child {margin-left:0!important;}
                
                .project-details p,
                .project-details li {font-size:1.1em!important;}
                .project-details ul {margin-left:2.1em;}

                .project-images {padding:10px 10px 40px;}



        /* Sub-Projects */

            #sub-projects {}
                #sub-projects .tp-50 {width:46%!important;}



        /* Tales */

            #tales {}
                #tales-text, #tales-images {padding:1em 3em 0 2.25em;}
                #tales-images {max-width:100%;}



        /* About */

            #bio {}

                #about-container {padding:1em 3em 0 2.25em;}
                #about-container p:last-child {margin-bottom:0;}

                #contact-container {
                    margin:5em 0 0 0;
                    padding:2em 0 4em;
                    }
                    #contact-container h2 {margin-bottom:.75em;}
                    ul.contact-info li {margin-bottom:.5em!important;}
                    ul.contact-info li:nth-child(1) {padding-top:10px!important;}
                    ul.contact-info li:nth-child(2) {clear:none; margin-left:.5em;}
                    ul.contact-info li:nth-child(3) {position:relative; margin-top:1em;}
                    ul.contact-info li:nth-child(4) {position:initial; bottom:10em; right:0;}


        
        /* Tales Band */

            .tales-logo {max-width:60%;}         



        /* Let's Talk */

            #contact {margin-bottom:6em;}

            form {width:65%; padding: 15px;}
                form div.row:first-child {margin-bottom: 1em;}
                form div.row:nth-child(2) {margin-bottom: .2em;}
                form .w-33 {margin-bottom:8px;}

                input[type="text"], input[type="email"], input[type=tel],input[type="date"], input[type="time"], textarea {padding:10px;}
                input, textarea, button, #submit {font-size: 1.2em!important;}
                input#city {width:75%;}
                input#postcode {width:33%;}
                form h5 {margin-top:1em; font-weight:bold;}

                #nature-wrapper {max-width:100%;}
                #nature-wrapper .w-33 {margin-bottom:.25em;}

                #survey-trigger label {width:100%;}
                textarea {height:250px;}

                #submit {width:100%; padding:10px 5px 11px;}



        /* Location */
        
            #location {margin-bottom:0!important; padding-bottom:0!important; font-size:1.2em!important;}



        }




    /* Mobile Landscape
    -------------------------------------------------- */
        @media only screen and (min-width: 480px) and (max-width: 669px) {
        body {background:#3E3B38; /*background:#ECC49E; /*orange*/}
         
        #wrapper {margin:0; padding:0 10px;} /* remove margin to remove gutter */
         
        header.e2e {height:270px;}
        header img {
            position:absolute; top:12px; left:10px;
            width:60px;
            }  

        nav {}
            nav ul {box-shadow:none;}
            nav ul li {min-width:6em; margin:0 1em;}
            nav ul li:first-child {display:block!important; margin: 1em 0; padding: 0;}
            nav ul li:last-child {display:block!important;}
            nav ul li a {
                display:block;
                padding:12px .1em;
                font-size:1em;
                text-decoration:none;
                }

        .mob-only {display:block;}

        /* Mobile navigation */

            #burger {display:block; z-index:120; position:absolute; top:21px; right:14px; font-size:1.75em; color:#bda177;}

                #burger-nav { display:none; position:absolute; top:-360px; z-index:100; width:100%; margin:0; padding:0; height:360px; background:#E4E1D6;}
                #burger-nav ul {display:block; position:relative; top:0; right:0; width:100%; margin:-4px auto; padding:0 1em; background:none;}
                #burger-nav ul li {font-family:'Titillium Web', helvetica, arial, sans-serif; display:block; float:none; min-width:6em; margin-left:0; margin-right:0; color:#564B40; font-weight:700; text-align:left; text-transform:uppercase;}
                #burger-nav ul li:first-child {margin-top:1.8em; margin-left:0; padding:0;}
                #burger-nav ul li a {display:block; margin:0; padding:11px 0 9px; color:#bda177!important; font-size:1.8em; background:none;}
                #burger-nav ul li a:visited {color:#bda177!important;}
                #burger-nav ul li a:active {color:#a27f4b!important;}
                #burger-nav ul li a {display:inline-block!important;}
                #burger-nav .fa-facebook-square {margin-left:.5em;}
                
                /*Linked in icon */ #burger-nav .fab {font-size:1.6em;}

                #wrapper {position:relative; z-index:0}

                    /* Show the menu when animating or visible */
                        .animating #burger-nav, .menu-visible #burger-nav { 
                            display: block;
                            }
                    /* If the animating class is present then apply the CSS transition to #wrapper over 250ms */    
                        .animating #wrapper {
                            transition:                 transform .45s ease-in-out;
                            -webkit-transition: -webkit-transform .45s ease-in-out;
                            }
                     /* If the down class is present then transform the #wrapper element 45px to down */   
                        .animating.down #wrapper {
                            transform:                  translate3d( 0, 360px, 0 );
                            -webkit-transform:          translate3d( 0, 360px, 0 );
                            }
                     /* If the right class is present then transform the #wrapper element 45px to the up */
                        .animating.up #wrapper {
                            transform:                  translate3d( 0, -360px, 0 );
                            -webkit-transform:          translate3d( 0, -360px, 0 );
                            }
                     /* If the menu-visible class is present then shift the #wrapper 45px up
                        via position: absolute to keep it in the open position. When .animating,
                        .down and .up classes are not present the CSS transform does not apply to #wrapper */
                        .menu-visible #wrapper {top:    360px;}

                     /* minimize the flickering */
                        #wrapper, #burger-nav {
                            -webkit-backface-visibility: hidden;
                            -webkit-perspective: 1000;
                            }

       

        /* Footer */

            footer.e2e {margin-top:0; margin-bottom:0; padding-top:2em; padding-bottom:0;}

                ul#footer-sitemap {margin:0 0 .5em;}
                ul#footer-sitemap li {
                    display:inline-block;
                    margin:.5em 1em;
                    }
                footer img {width:8%; margin-bottom:.5em;}
                footer address {margin-bottom:2.5em;}
                footer .fab {margin:1.4em 0 .5em;}



        /* Typography */

            h1 {font-size: 1.3em; line-height:1.25em;}
            h2 {font-size: 1.7em;}
            h3 {font-size: 1.2em;}
            h4 {font-size: 1.3em; margin-bottom:.5em;}
            h5 {font-size: 1.2em!important; margin-bottom:.5em;}

                header h1 {max-width:450px; margin:auto; text-align:center;}
                header h2 {margin:143px 1.7em 1.1em; font-size:.95em; text-transform:uppercase; text-align:center;}


            p {font-size:1.1em; line-height:1.45em;}




        
        #content {padding-top:270px;}
            ul#touch-contact {margin-top:3em;}

            section {margin-bottom:4em; padding:4em 0 5.5em;}                
                section.band {margin-bottom:0; padding:3.75em 0 7em;}
                .row:last-child {margin-bottom:0!important;}

                .section-header h3 {padding-left:3em; padding-right:3em;}
                a.learn-more {padding:8px 10px;}


            #intro {margin-top:4em; padding:0 2em;}

            .tales-link img {width:70%; padding:4em 0;}



        /* Services */

            #services {margin-top:0; margin-bottom:1em;}
                .service {margin:auto!important;}
                .service h4 {margin-bottom:.75em; text-align:center!important}
                    #service-box1, #service-box2, #service-box3, #service-box4 {margin-bottom:2em!important;}

                    .service-content {margin:0 .3em 6em!important; padding:0 .5em!important; box-shadow:none;}
                        .service-intro {padding-top:1.4em;}
                        .service-intro h2 {margin-left:-1px;}
                    
                    .tab-content-wrapper {flex-wrap:wrap; margin:0 -.5em!important;}
                        .tab {display:contents!important;}
                            .tab button {
                                margin-bottom:0!important;
                                padding-left:1.5em;
                                font-size:1.1em;
                                font-weight:bold;
                                background:none;
                                }

                                .tab button, .tablinks {margin-bottom:0!important;}
                                .tablinks.active {background:#a27f4b;}
                                .tab-content-wrapper button:last-child {}
                                .tab-content-wrapper button:first-child {}

                        .tab-content {
                            width:100%!important;
                            margin-left:0!important;
                            padding:0 0 1em !important;
                            border-bottom:3px solid #847052;
                            }
                            .tab-content h3 {display:none;}
                            
                            .srv-prob, 
                            .srv-img {width:100%!important; margin:.5em 0!important;}
                                .srv-prob {padding-top:1em!important;}
                                    .srv-prob p {margin-bottom:1.45em; padding:0 2.6em; font-size:1.1em;}
                                    ul.srv-problems {font-size:.9em; min-height:150px;}
                                .srv-img {width:95%!important; margin-left:1em!important; margin-right:1em!important;}
                                    .srv-img img {width:47.7%; margin-right:1%; margin-bottom:1em; margin-left:1%;}
                                    .srv-img a.fw-fig img {width:97.7%; margin-left:1%; margin-right:1%;}


                        /* Sub-service Tabs */

                            #service-box1 {order:1;}
                            #service-box2 {order:2;}
                                #service1 {order:3;}
                                #service2 {order:4;}
                            #service-box3 {order:5;}
                            #service-box4 {order:6;}
                                #service3 {order:7;}
                                #service4 {order:8;}  

                            #tab1-1 {order:1;}
                                #srv1-sub1 {order:2;}
                            #tab1-2 {order:3;}
                                #srv1-sub2 {order:4;}
                            #tab1-3 {order:5;}
                                #srv1-sub3 {order:6;}

                            #tab2-1 {order:1;}
                                #srv2-sub1 {order:2;}
                            #tab2-2 {order:3;}
                                #srv2-sub2 {order:4;}
                            #tab2-3 {order:5;}
                                #srv2-sub3 {order:6;}
                            #tab2-4 {order:7;}
                                #srv2-sub4 {order:8;}
                            #tab2-5 {order:9;}
                                #srv2-sub5 {order:10;}

                            #tab3-1 {order:1;}
                                #srv3-sub1 {order:2;}
                            #tab3-2 {order:3;}
                                #srv3-sub2 {order:4;}
                            #tab3-3 {order:5;}
                                #srv3-sub3 {order:6;}

                            #tab4-1 {order:1;}
                                #srv4-sub1 {order:2;}
                            #tab4-2 {order:3;}
                                #srv4-sub2 {order:4;}
                            #tab4-3 {order:5;}
                                #srv4-sub3 {order:6;}

                            #tab1-1, #tab2-1, #tab3-1, #tab4-1 {margin-bottom:0;}



        /* Projects */

            #projects {}

                #projects-container {padding:0 1.5em;}
                    #projects-container .w-33:nth-child(2n+1) {margin-left:4%;}
                    #projects-container .w-33:first-child {margin-left:0;}
                    #projects-container .project-image {width:80%!important;}
                    #projects-container .w-20 span {display:inline-block;}

                    .project {margin: auto auto 4em auto!important;}
                    .project:last-child {margin-bottom:0!important;}
                    .project .learn-more {margin-bottom:.75em; padding-left:0; padding-right:0;}
                        .panel {margin-top:1em;}
                            .project p:last-child {margin-bottom:0!important;}
                            .project div {margin-bottom:0;}
                            .project h4 {margin: 1em 0; text-align:center;}
                            .project-details p {font-size:1.1em;}
                            .project ul {margin-left:3em;}
                            .project .learn-more span {display:none;}
                        
                        #projects-container .w-60 a.learn-more {padding:8px 20px; color:#a27f4b; border-bottom:3px solid #a27f4b;}

                        .project-images {margin-bottom:0!important; padding:10px 10px 40px;}
                        .project-image {width:100%!important;}

                    
                    /* Sub-projects*/

                        .sub-project {margin-bottom:3.4em!important;}
                        .sub-project a {margin-top:1.5em;}



        /* Tales */

            #tales {}
                #tales-images {max-width:100%;}
                #tales-text, #tales-images {padding:0 2em;}
            


        /* About */

            #bio {padding-bottom:0;}

                #about-container {padding:0;}
                    #about-container h2 {margin:0 0 1.25em; text-align:center;}
                    #about-container p {padding:0 2em;}
                    #about-container img {margin:4px 30px 16px 20px;}

                #contact-container {
                    padding:4em 0 5.5em;
                    margin:4.5em 0 0 0;
                    }
                    ul.contact-info {width:80%!important; padding-right:.5em;}
                    ul.contact-info li {display:inline-block; width:30.6%!important; margin-left:4%!important;}
                    ul.contact-info li:first-child {margin-bottom:0; margin-left:0;}
                    ul.contact-info li:nth-child(4) {position:initial; float:right;}
                    ul.contact-info li:nth-child(5) {width:100%!important;}
                    ul.contact-info li:last-child {padding:0 3em 0 0!important;}



        /* Tales Band */

            .tales-logo {max-width:70%;}         



        /* Let's Talk */

            #contact {margin-bottom:0;}

                #form-container {margin-top:0;}

                    form {width:65%; padding:12px;}
                        form div.row:first-child,
                        form div.row:nth-child(2) {margin-bottom:1em;}
                        form .w-33 {margin-bottom:0!important;}

                        #nature-wrapper label, input, form label, textarea, button, #submit {
                            margin-bottom:.5em;
                            }
                        
                        input, form label, textarea, button, #submit {
                            font-size: 1.1em!important;
                            }

                        form h5 {margin-bottom:1em;}

                        #survey-trigger label {width:100%;}
                            #city {width:48%;}
                            #time {width:50%;}
                            #postcode, #date {width:30%;}
                            #date, #time {min-height:35px;}

                        #nature-wrapper label {padding:0 5px;}
                        
                        textarea {height:150px;}
                        #submit {width:100%; padding:12px 5px 13px;}

                

        /* Map */

            section#location, section:last-child {margin-bottom:0!important; padding-bottom:0!important;}

                #map {margin-bottom:0; padding-bottom:0;}
                #map iframe {height:300px;}




        }

   


    /* Mobile Portrait
    -------------------------------------------------- */
        @media only screen and (max-width: 479px) {
        body {background:#3E3B38; /*background:#EE949B; /*red*/}

      
        #wrapper {margin:0; padding:0px;} /* remove margin to remove gutter */

        header.e2e {height:276px;}
        header img {
            position:absolute; top:12px; left:8px;
            width:50px;
            }          

        nav {height:270px;}
            nav ul {box-shadow:none;}
                nav ul li {min-width:6em; margin:0 1em;}
                nav ul li:first-child {display:block!important; margin: 1.175em 0 2em; padding: 0;}
                nav ul li:last-child {display:block!important;}
                    nav ul li a {
                        display:block;
                        padding:12px .1em;
                        font-size:1em;
                        text-decoration:none;
                        }


        .mob-only {display:block;}

        /* Mobile navigation */

            #burger {display:block; z-index:120; position:absolute; top:19px; right:11px; font-size:1.75em; color:#bda177;}

                #burger-nav { display:none; position:absolute; top:-340px; z-index:100; width:100%; height:340px; margin:0; padding:0; background:#E4E1D6;}
                #burger-nav ul {display:block; position:relative; top:0; right:0; width:100%; margin:1.1em auto; background:none;}
                #burger-nav ul li {font-family:'Titillium Web', helvetica, arial, sans-serif; display:block; float:none; min-width:5em; margin-left:0; margin-right:0; padding-left:1em; color:#564B40; font-weight:700; text-align:left; text-transform:uppercase;}
                #burger-nav ul li:first-child {max-width:80%; margin-top:1.35em;}
                #burger-nav ul li a {display:block; height:20px; margin:0; padding:12px 0 10px; color:#bda177!important; font-size: 2em; background:none;}
                #burger-nav ul li a:visited {color:#bda177!important;}
                #burger-nav ul li a:active {color:#a27f4b!important;}
                #burger-nav ul li a {display:inline-block!important;}
                #burger-nav .fa-facebook-square {margin-left:.5em;}
                
                /*Linked in icon*/  #burger-nav .fab {font-size:1.6em;}

                #wrapper {position:relative; z-index:0}

                    /* Show the menu when animating or visible */
                    .animating #burger-nav, .menu-visible #burger-nav { 
                        display: block;
                        }
                    /* If the animating class is present then apply the CSS transition to #wrapper over 250ms */    
                    .animating #wrapper {
                        transition:                 transform .45s ease-in-out;
                        -webkit-transition: -webkit-transform .45s ease-in-out;
                        }
                    /* If the down class is present then transform the #wrapper element 45px to down */   
                    .animating.down #wrapper {
                        transform:                  translate3d( 0, 340px, 0 );
                        -webkit-transform:          translate3d( 0, 340px, 0 );
                        }
                    /* If the right class is present then transform the #wrapper element 45px to the up */
                    .animating.up #wrapper {
                        transform:                  translate3d( 0, -340px, 0 );
                        -webkit-transform:          translate3d( 0, -340px, 0 );
                        }
                    /* If the menu-visible class is present then shift the #wrapper 45px up
                    via position: absolute to keep it in the open position. When .animating,
                    .down and .up classes are not present the CSS transform does not apply to #wrapper */
                    .menu-visible #wrapper {top:    340px;}

                    /* minimize the flickering */
                    #wrapper, #burger-nav {
                        -webkit-backface-visibility: hidden;
                        -webkit-perspective: 1000;
                        }

       


        /* Footer */

            footer.e2e {margin-top:0px; padding:2.4em 0 .5em;}

                ul#footer-sitemap {margin:0 0 1em;}
                ul#footer-sitemap li {
                    display:inline-block;
                    margin:.5em 1em 0;
                    }
                    footer span {white-space:nowrap; display:block;} 

                    footer img {width:13%; margin-bottom:8px;}
                    footer .fab {margin:1em 0 .45em;}



        ul {margin-left:1em;}
        ul ul {margin-left:1em;}




        /* Typography */
      
            h1 {font-size:1.4em; line-height:1.2em;}
            h2 {margin:0 auto .85em; font-size:1.8em;}
            h3 {padding:0 1em; font-size:1.2em; line-height:1.3em;}
            h4 {margin-bottom:1.1em; font-size:1.3em;}
            h5 {}

            header h1 {max-width:370px; margin:auto; padding:0 .6em; font-size:1.6em; text-align:center;}
            header h2 {margin:105px 1.7em 1.05em; font-size:.95em; text-transform:uppercase; text-align:center;}


            p {font-size:1.1em; line-height:18px;}

            a.learn-more {padding:8px 0;}
            a.learn-more:active, a.learn-more:focus {padding:8px 10px;}



        #content {padding-top:270px;}

            section {
                margin-top:0;
                margin-bottom:2em;
                padding-top:4em;
                padding-right:1em;
                padding-bottom:3em;
                padding-left:1em;
                }
                section.band {margin-bottom:0; padding:4em 0 3em;}
                .row:last-child {margin-bottom:0;}


            #intro {margin-top:4em; padding:0 2em;}
                #intro h5{font-size:1.2em;}

            .tales-link img {width:100%; padding:4em 0;}



        /* Services */ 

            #services {}
                .service {margin:auto auto 80px auto!important; box-shadow:none!important; border-bottom:none; background:none;}
                .service:hover {background:none; border-bottom:none;}
                    .service-intro {padding:0;}
                    .service-intro p {padding:0 .5em;}
                    .service h4 {text-align:center; padding-left:0;}

                .service-active {background:none; transition:.1s; box-shadow:none; border-bottom:none;}
                .service-active a.learn-more {padding:8px 17px 8px 16px;}
              
                .service-image {margin-bottom:1em;}
                .service img {width:100%;}

                ul.srv-problems {display:none;}
                .service a.learn-more {margin:0!important;}

                .service-content {margin: -4em 0 3em!important; background:none; box-shadow:none;}
                .service-content h2 {display:none;}

                .tab-content-wrapper {flex-wrap:wrap;}
                    .tab {display:contents!important;}
                        .tab button {
                            margin-bottom:0!important;
                            padding:1.2em .5em 1.22em;
                            font-size:1.1em;
                            font-weight:bold;
                            background:none;
                            }
                            button#defaultOpen,
                            button#defaultOpen2,
                            button#defaultOpen3,
                            button#defaultOpen4 {padding-top:1.22em;}

                            .tab button, .tablinks {margin-bottom:0!important;}
                            .tablinks.active {background:#a27f4b;}
                            .tab-content-wrapper button:last-child {}
                            .tab-content-wrapper button:first-child {}

                    .tab-content {
                        width:100%!important;
                        margin-left:0!important;
                        padding-top:.8em!important;
                        padding-bottom:0;
                        border-bottom:3px solid #847052;
                        }
                        .tab-content h3 {display:none;}

                        .srv-prob,
                        .srv-img {width:100%!important; margin:1em 0 1em 0!important; padding:0!important;}

                          .srv-img img {margin-bottom:.45em; margin-left:1.3%; margin-right:1.3%;}                      
                          .srv-prob p {padding:0 1.4em; font-size:1.1em;}
                

                /* Sub-service Tabs */

                    #service-box1 {order:1;}
                        #service1 {order:2;}
                    #service-box2 {order:3;}
                        #service2 {order:4;}
                    #service-box3 {order:5;}
                        #service3 {order:6;}
                    #service-box4 {order:7;}
                        #service4 {order:8;}

                    #tab1-1 {order:1;}
                        #srv1-sub1 {order:2;}
                    #tab1-2 {order:3;}
                        #srv1-sub2 {order:4;}
                    #tab1-3 {order:5;}
                        #srv1-sub3 {order:6;}

                    #tab2-1 {order:1;}
                        #srv2-sub1 {order:2;}
                    #tab2-2 {order:3;}
                        #srv2-sub2 {order:4;}
                    #tab2-3 {order:5;}
                        #srv2-sub3 {order:6;}
                    #tab2-4 {order:7;}
                        #srv2-sub4 {order:8;}
                    #tab2-5 {order:9;}
                        #srv2-sub5 {order:10;}

                    #tab3-1 {order:1;}
                        #srv3-sub1 {order:2;}
                    #tab3-2 {order:3;}
                        #srv3-sub2 {order:4;}
                    #tab3-3 {order:5;}
                        #srv3-sub3 {order:6;}

                    #tab4-1 {order:1;}
                        #srv4-sub1 {order:2;}
                    #tab4-2 {order:3;}
                        #srv4-sub2 {order:4;}
                    #tab4-3 {order:5;}
                        #srv4-sub3 {order:6;}


                    #tab1-1, #tab2-1, #tab3-1, #tab4-1 {margin-bottom:0;}

                    #srv1-sub1, #srv1-sub2, #srv1-sub3,
                    #srv2-sub1, #srv2-sub2, #srv2-sub3, #srv2-sub4, #srv2-sub5,
                    #srv3-sub1, #srv3-sub2, #srv3-sub3,
                    #srv4-sub1, #srv4-sub2, #srv4-sub3 {margin-bottom:3em;}



        /* Projects */

            #projects {padding-bottom:4.55em;}
                #projects h3 {padding:0 2em;}
              
                #projects-container {padding:0 1.05em;}
                    #projects-container .w-60 .project-image {margin:auto 0 1em; width:100%;}
                    #projects-container .w-60 a.learn-more {padding:8px 10px; color:#a27f4b; border-bottom:3px solid #a27f4b;}
                  
                    .project {margin:auto auto 62px auto!important;}
                        .panel {margin-top:1em;}
                        .project h4 {margin-bottom:1.1em; text-align:center;}
                        .project ul {margin-left:3em;}
                        .project-image {width:100%; margin-bottom:1em;}
                      
                        .project .learn-more span {display:none;}

                        .project-images {padding:10px 10px 40px;}

                        .project-details {padding-bottom:3em; border-bottom:8px solid #847052;}
                            .project-details p {font-size:1.1em;}
                    
                    /* Sub-projects*/

                        .sub-project {margin-bottom:3.4em!important;}




        /* About */

            #bio {padding-bottom:0;}

                #about-container {padding:0 1.5em 10.5em;}
                    #about-container h2 {margin-bottom:1.2em; text-align:center;}
                    #about-container p {padding:0 .75em;}
                    #about-container img {margin-right:12px;}

                #contact-container {
                    padding:4em 0 8em;
                    margin:0;
                    }
                    ul.contact-info li:first-child {margin-bottom:0;}




        /* Tales */

            #tales {padding-bottom:10.5em}
                #tales-text, #tales-images {padding:0 1.5em}
                .tales-logo {max-width:80%;}
                #tales-images {max-width:100%;}
                #tales p {padding:0 .75em;}





        /* Let's Talk */

            #contact {margin-bottom:6em;}
                #contact h3 {padding:0 2em;}
                #form-container {margin-top:0;}

                    form {width:90%; max-width:350px; margin-top:0!important; padding:10px;}
                        form div.row:first-child,
                        form div.row:nth-child(2) {margin-bottom:1em;}

                        #nature-wrapper label, input, form label, textarea, form h5, button, #submit {
                            margin-bottom:.5em;
                            }

                        input, form label, textarea, form h5, button, #submit {
                            font-size:1.1em!important;
                            }

                        form h5 {margin-bottom:1em; padding-left:2px; font-weight:bold;}

                        #survey-trigger label {width:100%;}
                            #city, #date, #time {width:50%;}
                            #postcode {width:32%;}
                            #date, #time {min-height:35px;}

                        #nature-wrapper label {padding:0 5px;}

                        textarea {height:150px;}
                        #submit {width:100%; padding:10px 5px 11px;}



        /* Map */

            section#location, section:last-child {margin-bottom:0!important; padding-bottom:0!important;}

                #map {margin-bottom:0; padding-bottom:0;}
                #map iframe {height:450px; margin-bottom:0;}

        }






/* Retina Screens media query.
   Overrides styles for devices with a device-pixel-ratio of 2+
---------------------------------------------------------------- */

    @media only screen and (min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
        body {}


    }