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

@media (min-width: 768px) and (max-width: 1024px) {
    body {
        grid-template-columns: 5% 5% auto 5% 5%;
    }

    header {
        grid-template-columns: 5% 5% repeat(5, 1fr) 5% 5%;
        grid-column: 1/-1;
        margin: 20px 0 10px;
    }

    h1 {
        font-size: 24px;
    }

    section {
        grid-column: 3/-3;
    }

    /*
        Header Styles
    */
    .company-name {
        font-size: 23px;
        margin: 8px 0;
        grid-column: 2/-2;
    }

    .header-bar {
        width: 100%;
        height: 33px;
        top: 21px;
        grid-column: 1/4;
    }

    .contact-wrapper {
        grid-row: 2/3;
        grid-column: 2/-2;
    }

    .contact-nav {
        font-size: 15px;
    }

    /*
        Landing Styles
    */
    .landing {
        grid-gap: 15px;
    }
    .tag-line {
        grid-column: 1/-1;
        font-size: 18px;
        padding: 25px 0;
    }

    .first-donut {
        grid-column: 1/7;
    }

    .clip {
        width: 100%;
    }

    .main-donuts {
        width: 100%;
    }

    .side-donut {
        width: 100%;
        position: unset;
    }

    .visit-us-btn {
        grid-column: 1/3;
        bottom: -8%;
    }

    /*
        Happy Review Section
    */
    .happy-reviews {
        grid-template-columns: repeat(3, 5%) 10% auto 10% repeat(3, 5%);
        grid-column: 1/-1;
    }

    .happy-reviews > .section-title {
        margin: 75px 0 25px;
        grid-column: 3/-3;
    }

    .review-odd {
        grid-column: 4/6;
    }

    .review-even {
        grid-column: 5/7;
        margin: 50px 0;
    }

    .all-google-review-link {
        margin: 50px 0 0;
        grid-column: 5/6;
    }

    /*
        Background Donut Style
    */
    .background-donut-1 {
        top: -235px;
        right: -65px;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
        width: 52%;
    }

    /*
        Contact Us Style
    */
    .contact-us {
        grid-template-columns: 5% 5% 1fr 1fr 5% 5%;
        grid-column: 3/-3;
    }

    .contact-us > .section-title {
        margin: 100px 0 50px;
    }

    .address-wrapper,
    .phone-wrapper {
        grid-column: 1/4;
    }

    .hours-header,
    .hours {
        grid-column: 4/-1;
    }

    .address,
    .hours-title {
        line-height: 2;
    }

    .underline:after {
        top: 0;
    }

    .phone-wrapper {
        padding: 30px 0;
    }

    .hours-title {
        line-height: 2;
    }

    .hours-line-break {
        height: 9%;
        width: 10%;
        bottom: -35%;
    }

    .hours {
        line-height: 1.5;
        padding: 20px 0;
    }

    /*
        Location Styles
    */
    .location {
        margin-top: 50px;
        padding: 0;
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(2, 5%) 20% auto 20% repeat(2, 5%);
    }

    .map {
        height: 235px;
        grid-column: 3/-3;
    }

    .map-bar {
        bottom: unset;
        grid-column: 4/-1;
        height: 250px;
        top: 35px;
    }

    .background-donut-2 {
        width: 42%;
        left: -80px;
        top: unset;
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        -o-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    /*
        Footer Styles
    */
    footer {
        grid-column: 1/-1;
        padding: 90px 0 35px;
    }

}