html, body {
    margin: 0;
    overflow-x: clip;
}

#CMACHeader {
    position: relative
}

#headerImageContainer {
    background-image: url("photos/cmac stage.jpg");
    background-position: center;
    background-size: cover;
    height: 105vh;
    z-index: 1;
    position: relative;
    overflow:hidden;
}

#scrollingCMACLogo {
    width: 85%;
    max-width: 1200px;
    z-index: 3;
    left: 15%;
    content: url("photos/LogoWhite.png");
}

#scrollingLogoHolder {
    height: 100vh;
    transform: translateY(-100vh);
    display: flex;
    align-items: center;
    transition: none;
    width: 100%;
}

#CEFHeaderLogo {
    position: absolute;
    width:30%;
    z-index: 2;
    display: grid;
    align-self: center;
}

#LogoGridHolder {
    display: absolute;
    top: 30%
}

#IconContainer {
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

#GroveImage {
    content: url("photos/GroveChurch.png");
    min-width: 400px;
    width: 600px;
    border-radius: 25px;
    margin: 25px;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
}

#GroveContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.IconImage {
    width: 300px;
    height: 300px;
    border-radius: 25px;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
    filter:brightness(100%);
}

.boxVignette {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(at center, #FFFFFF00, #000000);
    position: absolute;
    scale: 100%
}
.LogoBacking {
    height:35vh;
    background-color: rgb(72, 73, 82);
    z-index: 5;
    position: relative;
    display: flex;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.LogoBackingTexture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.centerDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centerDivAlt {
    display: flex;
    align-items: center;
    justify-content: center;
}

.RegisterButton {
    padding: 5px;
    background-color: rgb(79, 79, 79);
    width: 250px;
    border-radius: 15px;
    font-size: 26px;
    color: white;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
    z-index: 15;
    filter:brightness(100%)
}

.InfoButton {
    padding: 5px;
    background-color: rgb(76, 88, 77);
    width: 250px;
    border-radius: 15px;
    font-size: 26px;
    color: white;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
    z-index: 15;
    filter:brightness(100%);
    margin: 20px;
}

#FAQBackground {
    background-image: url("photos/Classroom2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#RegisterBackground {
    background-image: url("photos/ClassroomBlur.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ScheduleContainer {
    background: rgba(0, 0, 0, 0.6);
    position: fixed; 
    width:100%;
    height:100%;
    z-index: 10;
    align-items: center;
    justify-content: center;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: 300ms all;
}

#ScheduleBackground {
    background-image: url("photos/Classroom4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ScheduleGrid {
    background:rgba(0, 0, 0, 0.4);
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    grid-template-areas: "a b b b b" "c d d d d" "e f f f f" "g h i j k";
    width: 100%; 
    border-radius: 15px;
}

#ScheduleGrid2 {
    background:rgba(12, 9, 47, 0.4);
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    grid-template-areas: "a b b b b" "c d d d d" "e f f f f";
    width: 100%; 
    border-radius: 15px;
}

#ScheduleClose {
    cursor: pointer;
}

#HeaderLong {
    font-family: "Montserrat", sans-serif;
    color: white; 
    display:flex; 
    flex-direction: row; 
    justify-self: end; 
    padding-right: 20px;
}

#HeaderMenu {
    display:none;
    flex-direction: row;
    justify-self: end;
    padding-right: 25px;
}

#ClassroomImg {
    border-radius: 15px; 
    margin: 15px; 
    min-width: 250px; 
    transform: perspective(15cm) rotateY(6deg);
    width: 550px;
    box-shadow: -10px 10px 15px rgba(0, 0, 0, 0.6);
}

#CEFLogoSection {
    content: url(photos/CEFLogoWhite.png);
    width: 600px;
    min-width: 400px;
    height: auto;
    padding: 25px;
}

#ClassroomText {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 550px;
    max-width: 900px;
}

#MainSection {
    background: linear-gradient(0deg, rgb(76, 83, 147) 50%, rgb(72, 73, 82) 100%);
    z-index: 2;
    position: relative;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
    color: white;
    text-align: center;
    font-size: 24px;
}



.ClassroomContainer {
    width: 100%; 
    padding: 25px; 
    display:flex; 
    align-items: center;
    justify-content: space-around;
}

#CEFContainer {
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 25px; 
    align-items: center; 
    flex-direction: row; 
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 1250px;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
}

#Testimonies {
    margin: 20px 0px;
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 25px; 
    align-items: center; 
    flex-direction: column; 
    display: flex;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
}

#QuoteContainer {
    display: flex;
    flex-direction: row;
}

#QuoteUp {
    margin: 15px;
    width: 100px;
    height: 72px;
    align-self: flex-end;
}

#QuoteDown {
    margin: 15px;
    width: 100px;
    height: 72px;
    align-self: flex-start;
}

#MinistriesContainer {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%
}

#CEFLogos {
    min-width: 300px;
    width: 500px;
    padding: 20px;
}

#CEFOptions {
    min-width: 200px;
    width: 90%;
    padding: 15px;
}

#Pricing {
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 25px; 
    align-items: center; 
    flex-direction: row;
    padding:20px;
    display: flex;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
    justify-content: center;
}

#GroveMoney {
    content: url("photos/CashMoney.png");
    width: 100px;
}

#FooterContainer { 
    padding: 20px; 
    display:grid; 
    background-color: #2f2d2d; 
    grid-template-columns: 35vw 1fr 20vw 20vw; 
    align-items: center; 
    justify-content: center;  
    font-family: "Montserrat", sans-serif; 
    color: white; font-size: 15px; 
    text-align: center;
    z-index: 5;
    position: relative;
}

#CEFFooterLogo {
    content: url("photos/CEFLogoWhite.png");
    height: 200px;
}

#GAndTellImg {
    border-radius: 15px; 
    margin: 15px; 
    min-width: 350px;
    width: 550px;
}

.TextCentered {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:20px;
}

.Texture {
    width: 100%;
    height: 100%;
    background: url(photos/PaperTexture.jpg);
    opacity: 0.4;
    mix-blend-mode: color-burn;
    position: absolute;
    pointer-events: none;
    top: 0;
}

.CEFTextBig {
    font-size: 50px; 
    font-weight: bold; 
    margin: 10px;
    min-width: 200px;
}

.ListItem {
    min-width: 500px; 
    margin: 25px 10px; 
    list-style-position: inside;
}

.ContentContainer {
    padding: 3vw; 
    padding-top: 0vw; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

.ContentCover {
    height:140px;
    width: 100%;
    border-top-left-radius: 50px; 
    border-top-right-radius: 50px;
    display:flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.4);
}

.BasicText {
    font-size: 24px; 
    font-weight: 300;
    margin: 20px;
    text-align: center;
}

.CEFTextSizable {
    font-size: 24px;
    min-width: 200px;
    max-width: 300px;
}

.BigHeader {
    font-size: 70px; 
    font-weight: 700; 
    margin: 20px; 
    text-align: center;
    text-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
}

.SmallHeader {
    font-size: 40px; 
    font-weight: 700; 
    margin: 20px; 
    text-align: center;
}

.ImageTextItem {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:30px;
}

.SkillsImg {
    max-width: 200px; 
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.SkillsTxt {
    max-width: 380px; 
    text-align: center;
    margin: 10px 0;
}

.ImTexContainer {
    width:fit-content;
    display: flex; 
    align-items: baseline; 
    justify-content: center; 
    border-radius: 25px; 
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.4);
}

.SchLong {
    background:rgba(0, 0, 0, 0.4); 
    margin: 15px; 
    height:60px; 
    grid-column-start: 2; 
    grid-column-end: 6;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.SchLong p {
    padding: 5px;
    font-size: 22px;
}

.SchSmall {
    background:rgba(0, 0, 0, 0.4);
    margin: 15px;
    height:80px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
    user-select: none;
}

.SchSmall p {
    padding: 5px;
    font-size: 14px;
}

.SchDate {
    display: flex;
    align-items: center;
    justify-content: center;
}



#HeaderOption1 {
    transform-origin: top center;
    animation: scaleZ 300ms 60ms ease-in-out forwards;
}

#HeaderOption2 {
    transform-origin: top center;
    animation: scaleZ 300ms 120ms ease-in-out forwards;
}

#HeaderOption3 {
    transform-origin: top center;
    animation: scaleZ 300ms 180ms ease-in-out forwards;
}

#HeaderOption4 {
    transform-origin: top center;
    animation: scaleZ 300ms 240ms ease-in-out forwards;
}

#HeaderOption5 {
    transform-origin: top center;
    animation: scaleZ 300ms 300ms ease-in-out forwards;
}

#HeaderOption6 {
    transform-origin: top center;
    animation: scaleZ 300ms 360ms ease-in-out forwards;
}

.HeaderMenuOption {
    background-color: rgba(0, 0, 0, 0.4);
    right: 0;
    display: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity: 0;
    margin:3px;
    border-radius: 10px;
}

.MenuText {
    color: white;
    text-align: center;
    font-size: 17px;
    padding: 15px;
    margin: 0px;
    font-family: "Montserrat", sans-serif;
    user-select: none;
    cursor: pointer;
}

.HeaderMenuOption p {
    display: block;
}

#BigCover {
    color: white; 
    font-size: 100px; 
    font-weight: bold; 
    font-family: "Montserrat", sans-serif; 
    z-index:3; 
    text-shadow: -3px 3px 3px rgba(0, 0, 0, 0.4);
}

#HeaderMenu a {
    padding: 12px 16px;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

@keyframes scaleZ {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  
  80% {
    transform: scale(1.07);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

a {
    color: white;
    transition: 200ms all;
}

a:hover {
    filter: brightness(70%);
}

.SchSmall:hover {
    filter: brightness(70%);
    background:rgba(0, 0, 0, 0.6);
    scale: 110%;
    cursor: pointer;
}

#ScheduleClose:hover {
    scale: 105%;
    filter: brightness(80%);
}

#SchedRoundWrapper {
    width:700px;
    height:500px;
    background-color: rgb(72, 73, 82);
    border-radius: 15px;
    color: white;
    font-family: "Montserrat", sans-serif;
    display: flex;
    flex-direction: column;
}

#ScheduleTitle {
        align-self: center; 
        font-size: 25px;
        text-align: center;
        margin: 10px;
    }

#Dataholder {
    display:flex;
    justify-content: space-evenly;
    align-content: center;
}

#ScheduleTime, #ScheduleTeacher, #SchedulePortrait {
        font-size: 22px;
    }

#ScheduleDescription {
    font-size: 15px;
    margin: 30px;
}

#SchedulePicture {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    margin: 20px 40px;
    align-self: center;
}

#ScheduleTexthold {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}

.GNCScheduleLogo {
    width: 50px;
    height: 50px;
}

@media only screen and (max-width: 1280px) {
    #ClassroomText {
        font-size: 1.6vw;
    }
}

@media only screen and (max-width: 915px) {
    #HeaderLong {
        display: none;
    }
    #HeaderMenu {
        display:flex;
    }
    .BigHeader {
        font-size: 55px;
    }
    .BasicText {
        font-size: 20px;
        margin: 15px;
    }
    .ContentCover {
        height: 120px;
    }
    .SkillsImg {
        max-width: 130px;
    }
    .SkillsTxt {
        max-width: 300px;
        font-size: 18px;
    }
    .ImageTextItem {
        padding: 10px;
    }
    #ClassroomText {
        font-size: 20px;
        min-width: 220px;
    }
    .ClassroomContainer {
        flex-direction: column;
        min-width: 220px;
    }
    #ClassroomImg {
        transform: perspective(15cm) rotateX(-6deg) rotateY(0deg);
        width:90%;
        max-width: 500px;
    }
    .ImTexContainer {
        flex-wrap: wrap;
    }
    .ListItem {
        min-width: 220px;
    }
    #CEFContainer {
        flex-direction: column;
        width:90%;
    }
    #CEFLogoSection {
        width: 90%;
        min-width: 100px;
    }
    #QuoteContainer {
        flex-direction: column;
    }
    #QuoteUp {
        margin: 10px;
        width: 50px;
        height: 36px;
    }
    #QuoteDown {
        margin: 10px;
        width: 50px;
        height: 36px;
    }
    #MinistriesContainer {
        flex-direction: column;
    }
    #CEFLogos {
        width: 90%;
    }
    #GroveContainer {
        flex-direction: column-reverse;
    }
    #GroveMoney {
        width: 50px;
    }
    #GroveImage {
        width: 90%;
    }
    #FooterContainer {
        display: flex;
        flex-direction: column;
    }
    #GAndTellImg {
        width: 90%; 
        margin: 15px; 
        max-width: 500px;
        min-width: 250px;
    }
    .CEFTextBig {
        font-size: 40px; font-weight: bold; margin: 10px;
    }
    .centerDivAlt {
        flex-direction: column;
    }
    #BigCover {
        font-size: 70px;
    }
    #ScheduleGrid, #ScheduleGrid2 {
    grid-template-columns: repeat(2, 50%); 
    grid-template-areas: "a a";
    }
    .SchLong {
        margin: 10px; 
        height:50px; 
        grid-column-start: 1; 
        grid-column-end: 3;
        font-size: 16px;
    }
    .SchLong p {
         font-size: 16px;
    }
    .SchDate {
        grid-column-start: 1; 
        grid-column-end: 3;
        font-size: 16px;
    }
    .SchSmall {
        font-size: 14px;
    }
    #SchedRoundWrapper {
        width: 85vw;
        height: 70vh;
    }
    #ScheduleTitle {
        align-self: center; 
        font-size: 16px;
    }
    #ScheduleDescription {
        font-size: 14px;
        margin: 20px;
    }
    #SchedulePicture {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    margin: 20px;
    align-self: center;
    }
    #ScheduleTexthold {
    padding: 0px;
    }
    #ScheduleTime {
        text-align: center;
    }
    #ScheduleTeacher {
        text-align: center;
    }
    #ScheduleIdentifier {
        text-align: center;
    }
    .GNCScheduleLogo {
    width: 30px;
    height: 30px;
}
}

@media only screen and (max-width: 515px) {
    #scrollingCMACLogo {
        content: url("photos/LogoWhiteCondensed.png");
    }
    #Dataholder {
        flex-direction: column-reverse;
    }
    #SchedRoundWrapper {
        width: 85vw;
        height: 85vh;
    }
    #ScheduleTime {
        text-align: center;
        font-size: 13px;
    }
    #ScheduleTeacher {
        text-align: center;
        font-size: 14px;
    }
    #ScheduleIdentifier {
        text-align: center;
        font-size: 12px;
    }
    .BigHeader {
        font-size: 35px;
    }
    .BasicText {
        font-size: 18px;
        margin: 10px;
    }
    .ContentCover {
        height: 100px;
    }
    .ImTexContainer {
        flex-direction: column;
    }
    #ClassroomText {
        font-size: 18px;
        min-width: 220px;
    }
    .CEFTextSizable {
        font-size: 18px;
    }
    .CEFTextBig {
        font-size: 30px; font-weight: bold; margin: 10px;
    }
    .IconImage {
        width: 250px;
        height: 250px;
    }
    #Pricing {
        flex-direction: column;
    }
    #CEFFooterLogo {
        height: auto;
        width: 90%; 
    }
    #BigCover {
        font-size: 50px;
    }
    .SchSmall {
        font-size: 12px;
    }
}