:root {
    --accent: rgb(252, 213, 85);
    --accent2: rgb(233, 181, 92);
    --grey1: rgb(206, 206, 205);
    --grey2: rgb(140, 140, 141);
}

@font-face {
    font-family: 'sixstringslogo';
    src: url('../assets/fonts/sixstringslogo.eot?eap0ql');
    src: url('../assets/fonts/sixstringslogo.eot?eap0ql#iefix') format('embedded-opentype'), url('../assets/fonts/sixstringslogo.ttf?eap0ql') format('truetype'), url('../assets/fonts/sixstringslogo.woff?eap0ql') format('woff'), url('../assets/fonts/sixstringslogo.svg?eap0ql#sixstringslogo') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'QuicksandReg';
    src: url('../assets/fonts/Quicksand-Regular.woff2') format('woff2'), url('../assets/fonts/Quicksand-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: 'sixstringslogo' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'icomoon';
    src: url('../assets/fonts/icomoon.eot?1ktavu');
    src: url('../assets/fonts/icomoon.eot?1ktavu#iefix') format('embedded-opentype'), url('../assets/fonts/icomoon.ttf?1ktavu') format('truetype'), url('../assets/fonts/icomoon.woff?1ktavu') format('woff'), url('../assets/fonts/icomoon.svg?1ktavu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

* {
    font-family: QuicksandReg;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
    user-select: none;
}

body {
    width: 100%;
    min-width: 300px;
}

.mobOnly {
    display: none;
}

.mobOff {
    display: flex;
}

.gap {
    height: .25rem;
    border: none;
}

.gap1 {
    height: .5rem;
    border: none;
}

.gap2 {
    height: 1rem;
    border: none;
}

.gap3 {
    height: 1.5rem;
    border: none;
}

.gap3 {
    height: 2rem;
    border: none;
}

.gap4 {
    height: 3rem;
    border: none;
}

.underLine {
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 2px solid rgb(215, 161, 67);
}

a {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    text-decoration: none;
}

.hyper2 {
    color: rgb(62, 129, 160);
    font-weight: 500;
}

p {
    font-size: .9rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6em;
    margin: 0rem 0px 0px 0px;
    color: #333;
}

em {
    display: block;
    font-size: .8em;
    font-weight: 100;
    color: rgb(131, 131, 131);
}

h1 {
    font-size: 2rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1.5em;
    letter-spacing: 0.055em;
    margin: 0px;
}

h2 {
    font-size: 1.8rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5em;
    letter-spacing: 0.055em;
    margin: 0px;
}

h3 {
    font-size: 1.4rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1rem;
    margin: 0px 0px 0px 0px;
    color: rgb(113, 110, 105);
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8rem;
    font-weight: 100;
    font-style: normal;
    line-height: 1.5rem;
    margin: 0px;
    padding: 0px;
    color: #838282;
}

button {
    width: 150px;
    margin: 35px auto;
    padding: 12px;
    background: transparent;
    outline: none;
    border: 2px solid var(--accent);
    border-radius: 5px;
    color: rgb(175, 142, 84);
    font-weight: 600;
    cursor: pointer;
}

.logo {
    font-family: 'sixstringslogo';
    position: relative;
    left: -5px;
    margin: 0px;
    padding: 0px;
    font-size: 1.25em;
    color: rgb(206, 206, 205);
}

.wrapper {
    width: 100%;
    grid-template-columns: 1% 1fr auto 1fr 1%;
    grid-template-rows: 40px 300px 3vw auto auto auto auto 50px 300px;
}

.bodyCover {
    position: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 25%;
    width: 100%;
    height: 100%;
    z-index: -1;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0px 0px 0px 0px;
    width: 94%;
    margin: 0px auto;
    grid-column: 1/-1;
    grid-row: 1/2;
    align-self: center;
    background: transparent;
}

nav div {
    color: rgb(248, 246, 246);
    font-size: 0.7rem;
    font-weight: 100;
    cursor: pointer;
    z-index: 2;
}

nav div:nth-child(2) {
    margin-left: 10px;
    margin-right: 10px;
}

header {
    background-image: url('../assets/img/hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 300px;
    height: 400px;
    margin: 0px auto 0px auto;
    background-color: rgb(187, 185, 185);
    grid-column: 2/5;
    grid-row: 2/3;
}

.callNow {
    display: grid;
    place-items: center;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--grey2);
    background-color: rgba(161, 161, 161, 0.247);
    color: var(--accent2);
    font-size: 1rem;
    z-index: 10;
    cursor: pointer;
    width: 180px;
    grid-column: 4/6;
    grid-row: 5/7;
    justify-self: center;
    align-self: center;
}

.callNow:hover {
    border: 1px solid var(--accent2);
    background-color: rgba(161, 161, 161, 0.438);
    color: #fefefe;
}

.headBlock {
    display: flex;
    flex-direction: column;
    grid-column: 1/-1;
    grid-row: 2/5;
    z-index: 1;
    gap: .8rem;
    justify-content: center;
    align-items: center;
}

.headBlock * {
    margin: 0px;
    padding: 0px;
}

.pageTitle {
    text-align: center;
    color: #bbb;
}

.thin {
    font-weight: 100;
    color: rgb(235, 235, 233);
    cursor: pointer;
}

.box {
    border-radius: 3px;
    padding: 10px;
    color: grey;
}

.pageSubTitle {
    text-align: center;
    color: var(--accent2);
    font-size: 1.1rem;
    font-weight: 100;
    letter-spacing: .06em;
}

.pageSubSubTitle {
    text-align: center;
    color: #444;
    letter-spacing: .06em;
    font-weight: 300;
}

.socLinks {
    display: flex;
    -gap: 15px;
    grid-row: 7/9;
    grid-column: 1/-1;
    justify-content: center;
    margin-top: 5px;
    z-index: 2;
}

.audioControls {
    display: flex;
    width: max-content;
    font-family: 'icomoon';
    z-index: 12;
    grid-column: 1/2;
    grid-row: 1/2;
    -justify-self: center;
    margin-left: 10px;
    margin-top: 5px;
}

.playPause {
    font-family: 'icomoon';
    font-size: 1.2rem;
    color: #dede;
    cursor: pointer;
}

.socLinks div {
    font-family: "icomoon";
    font-size: 1.3rem;
    display: flexbox;
    color: rgb(185, 185, 185);
    cursor: pointer;
    font-weight: 200;
}

.sideGap {
    margin-left: 15px;
    margin-right: 15px;
}

.socLinks:nth-child(2) {
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid red;
}

.social {
    font-family: "icomoon";
    font-size: inherit;
    font-weight: 100;
    color: inherit;
}

.fb::before {
    content: "\ea91";
}

.tw::before {
    content: "\ea96";
}

.ins::before {
    content: "\ea92";
}

.phone::before {
    content: "\e942";
}

.location::before {
    content: "\e947";
}

.bodyTitle {
    text-align: center;
    width: 90%;
    max-width: 50ch;
    margin: 0px auto;
    color: #444;
    font-size: 1rem;
    padding: 20px;
}

.overlay2 {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 1;
    grid-column: 1/-1;
    grid-row: 1/-1;
    opacity: .6;
}

.container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px 10px 0px 10px;
    min-height: 400px;
    max-width: 700px;
    margin: 20px auto 0px auto;
    grid-column: 3/4;
    grid-row: 4/5;
    z-index: 4;
}

.cell1 {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    padding: 20px 5% 20px 10px;
    min-width: 250px;
    max-width: 600px;
}

.cell1-2 {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    padding: 20px 0% 20px 20px;
    min-width: 250px;
    max-width: 600px;
}

.dropcap1::first-letter {
    padding-top: 10px;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--accent2);
}

.cell2 {
    background-image: url('../assets/img/cell2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 10%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    min-height: 250px;
    max-width: 500px;
    min-width: 250px;
    margin: 0px auto;
}

.cell2-2 {
    background-image: url('../assets/img/grading1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 10%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    min-height: 250px;
    max-width: 500px;
    min-width: 250px;
    margin: 0px auto;
}

.cell2-3 {
    background-image: url('../assets/img/Image232.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 10%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    min-height: 250px;
    max-width: 500px;
    min-width: 250px;
    margin: 0px auto;
}

.cell2-4 {
    background-image: url('../assets/img/rockschool4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 90% 10%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
    min-height: 250px;
    max-width: 500px;
    min-width: 250px;
    margin: 0px auto;
}

.cell3 {
    position: relative;
    display: flex;
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 250px;
    min-width: 250px;
    max-width: 700px;
    min-height: 250px;
    min-height: 250px;
    padding: 0px;
    background-color: rgb(140, 140, 141);
    margin-top: 30px;
    margin-bottom: 0px;
}

.cell3-2 {
    margin-top: 30px;
}

.cell3Text {
    display: flex;
    flex-direction: column;
    row-gap: 0PX;
    padding: 10%;
    width: 100%;
    margin: 0px auto;
    justify-content: center;
}

.cell3Text>h3 {
    color: #fff;
}

.cell3Text p {
    color: rgb(228, 226, 226);
}

.expand-1,
.read-less {
    color: rgb(240, 202, 33);
    cursor: pointer;
    align-self: flex-end;
}

.expanded-1 {
    position: relative;
    background-image: url('../assets/img/slide006.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 700px;
    height: 150px;
    margin: 0px auto;
}

.expanded-1-cell1 {
    padding: 5%;
    max-width: 70ch;
}

.expanded-1 p {
    color: rgb(236, 234, 234);
    position: relative;
}

.expanded-1 h3 {
    color: rgb(236, 234, 234);
}

.close-1 {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    cursor: pointer;
}

.central-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 98%;
    max-width: 800px;
    flex-grow: 0;
    flex-basis: auto;
    overflow: hidden;
    padding: 2% 5% 2% 5%;
    border-radius: 5px;
    margin-top: 0vw;
}

.hide {
    display: none;
}

.drop {
    cursor: pointer;
}

.close {
    display: block;
    margin: 15px auto;
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 7px;
    width: 20ch;
    text-align: center;
    cursor: pointer;
}

.central-image h3 {
    align-self: flex-start;
    margin-left: 0%;
    width: 100%;
}

.central-image P {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    align-self: flex-start;
}

.cell4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 950px;
    padding: 3% 1% 3% 1%;
    margin: 20px auto;
    background: none;
    border: 1px solid var(--accent2);
    border-radius: 4px;
}

.cell4-header {
    text-align: left;
    margin: 0px auto;
    width: 90%;
    max-width: 800px;
    max-width: 90ch;
    padding: 0px 4% 0px 4%;
}

.cell4-header p {
    text-align: left;
    max-width: 90ch;
    padding: 0px 2% 0px 2%;
    margin-top: 0px;
}

.cell4-cell1 {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    min-width: 300px;
    max-width: 700px;
    flex-grow: 1;
    flex-basis: 50%;
    overflow: hidden;
    padding: 4%;
    border-radius: 5px;
}

.cell4-cell1 img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 3px;
    margin-top: 10px;
}

.p-top-space {
    border-top: 2px solid var(--accent);
    padding-top: 1rem;
    margin-top: 1rem;
    margin-bottom: 0px;
}

.p-top-bottom-space {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-top: 1rem;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}

.cell4-footer {
    text-align: center;
    max-width: 50ch;
    margin: 0px auto;
    padding: 20px 10px 20px 10px;
}

.dropDown {
    display: none;
}

.more {
    color: var(--accent);
    cursor: pointer;
    color: rgb(129, 85, 4);
}

.centerBlock {
    display: block;
    margin: 0px auto;
    width: 100%;
    overflow: hidden;
}

.centerBlock img {
    display: block;
    border-radius: 4px;
    object-fit: fill;
    text-align: center;
    margin: 0px auto;
    width: 100%;
}

#aside1 {
    text-align: center;
    width: 90%;
    max-width: 700px;
    margin: 40px auto 40px auto;
    padding-top: 20px;
    -border: 1px solid red;
}

#locate {
    width: 90%;
    max-width: 700px;
    margin: 30px auto 40px auto;
    gap: 0px;
}

#googleMap {
    width: 90%;
    max-width: 700px;
    margin: 20px auto 40px auto;
    border: 1px solid rgb(205, 206, 206);
    border-radius: 4px;
}

.footnote {
    margin: 10px auto 60px auto;
    width: 90%;
    max-width: 700px;
    text-align: center;
    grid-column: 1/-1;
    grid-row: 7/8;
    align-self: center;
}

.footnote p {
    -color: rgb(175, 142, 84);
}

#cylex {
    margin: 0px auto;
    width: 98%;
    max-width: 700px;
}

footer {
    display: grid;
    grid-template: repeat(6, 1fr) / repeat(6, 1fr);
    width: 100%;
    height: 300px;
    background-color: rgb(26, 25, 25);
    justify-items: center;
    align-content: center;
    grid-column: 1/-1;
    grid-row: -1/-2;
    color: azure;
}

footer* {
    color: #fff;
}

#aPlayer {
    grid-column: 1/-1;
    grid-row: 2/3;
    justify-self: center;
    background-color: transparent;
}

footer ul li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8rem;
    font-weight: 100;
    font-style: normal;
    line-height: 1.6em;
    letter-spacing: .015em;
    margin: .0px;
    cursor: pointer;
}

.address {
    display: flex;
    grid-column: 1 /-1;
    grid-row: 4/5;
    color: bisque;
}

.address p {
    color: #ddd;
}

.socialIcons {
    display: flex;
    -gap: 15px;
    justify-content: center;
}

.footerSocial {
    display: flex;
    flex-direction: column;
    grid-row: 3/4;
    grid-column: 3/5;
    justify-content: center;
    margin-top: 5px;
}

.footerSocial p {
    margin: 0px;
    padding: 0px;
    padding-bottom: 5px;
    color: #ddd;
}

.footerSocial div {
    font-family: "icomoon";
    font-size: 1.2rem;
    display: flexbox;
    cursor: pointer;
    font-weight: 200;
}

.copyright {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8rem;
    font-weight: 100;
    font-style: normal;
    line-height: 1.6em;
    letter-spacing: .015em;
    margin: .0px;
    grid-row: 5/6;
    grid-column: 1/-1;
    text-align: center;
    display: block;
}

@media (orientation: landscape) {
    header {
        -height: 100vh;
    }
}

@media screen and (max-width:540px) {
    .mobOnly {
        display: block;
        width: 98%;
        margin: 0px auto;
    }
    .mobOff {
        display: none;
    }
    header {
        height: 100vh;
    }
    .headBlock {
        grid-column: 1/-1;
        grid-row: 2/4;
    }
    .audioControls {
        display: flex;
        width: max-content;
        font-family: 'icomoon';
        z-index: 12;
        grid-column: 4/6;
        grid-row: 5/6;
        justify-self: center;
    }
    .playPause {
        font-size: 1.6rem;
    }
    .stop {
        display: none;
    }
    nav {
        display: flex;
        flex-direction: row;
        column-gap: 0px;
        justify-content: center;
        padding: 0px 0px 0px 0px;
        width: 94%;
        margin: 10px auto;
        grid-column: 1/-1;
        grid-row: 1/2;
        align-self: center;
        justify-self: center;
        background: transparent;
    }
    nav div {
        color: rgb(248, 246, 246);
        font-size: 0.8rem;
        font-weight: 300;
        cursor: pointer;
        z-index: 2;
        margin: 0px;
    }
    nav div:nth-child(1) {
        margin-right: 5px;
    }
    nav div:nth-child(2) {
        margin: 0px;
        margin-left: 5px;
    }
    .pageTitle {
        text-align: center;
        color: #bbb;
        font-size: 1.75rem;
    }
    .thin {
        font-weight: 100;
        color: rgb(235, 235, 233);
        cursor: pointer;
        user-select: none;
    }
    .pageSubTitle {
        text-align: center;
        color: var(--accent2);
        font-weight: 300;
        font-size: 1rem;
    }
    .pageSubSubTitle {
        text-align: center;
        color: #444;
        letter-spacing: .06em;
        font-weight: 300;
    }
    .callNow {
        grid-column: 4/6;
        grid-row: 4/5;
    }
    .socLinks {
        grid-row: 7/8;
        grid-column: 1/-1;
    }
    .socLinks div {
        font-size: 1.5rem;
    }
    .container {
        flex-direction: column;
        padding-top: 30px;
        max-width: 850px;
        margin: 0px auto;
        row-gap: 0px;
    }
    .cell1,
    .cell1-2 {
        position: relative;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        padding: 20px 1.5% 15px 1.5%;
        width: 98%;
        min-width: 250px;
        max-width: 600px;
        height: max-content;
        margin: 0px auto;
    }
    .cell2,
    .cell2-2,
    .cell2-3,
    .cell2-4 {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 250px;
        width: 100%;
        max-width: 500px;
        min-width: 250px;
        position: relative;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .cell3 {
        position: relative;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        min-width: 250px;
        max-width: 700px;
        padding: 0px;
        margin-top: 0px;
        background-color: rgb(140, 140, 141);
    }
    .cell3Text {
        display: flex;
        flex-direction: column;
        row-gap: 0PX;
        width: 100%;
        margin: 0px auto;
        justify-content: center;
    }
    .cell3Text>h3 {
        color: #fff;
    }
    .cell3Text p {
        color: rgb(228, 226, 226);
    }
    .expanded-1 {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 800px;
        height: auto;
        margin: 30px auto 30px auto;
        background-color: rgb(7, 7, 7);
        column-gap: 40px;
    }
    .central-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 800px;
        flex-grow: 1;
        flex: 1;
        flex-basis: auto;
        overflow: auto;
        padding: 2%;
        border-radius: 5px;
        margin-top: 25px;
    }
    .central-image h3 {
        text-align: left;
        margin-left: 0%;
        align-self: flex-start;
    }
    .central-image P {
        padding-bottom: 10px;
        text-align: left;
        margin-left: 0%;
        align-self: flex-start;
        max-width: 90ch;
    }
    .cell4 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: space-between;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 950px;
        padding: 2% 0% 0px 0%;
        margin: 0px auto;
        background: none;
        border: none;
    }
    #aside1 {
        text-align: center;
        width: 90%;
        max-width: 700px;
        margin: 50px auto 40px auto;
        padding-top: 0px;
    }
}