@font-face {
    font-family: Gotham;
    font-weight: 100;
    font-style: normal;
    src: url("fonts/gotham/GothamSSm-Book.otf") format("opentype");
}

@font-face {
    font-family: Gotham;
    font-weight: 400;
    font-style: normal;
    src: url("fonts/gotham/GothamSSm-Medium.otf") format("opentype");
}

@font-face {
    font-family: Gotham;
    font-weight: 700;
    font-style: normal;
    src: url("fonts/gotham/GothamSSm-Bold.otf") format("opentype");
}

@font-face {
    font-family: HanSans;
    font-weight: 100;
    font-style: normal;
    src: url("fonts/hans_sans/SourceHanSansSC-Normal.otf") format("opentype");
}

@font-face {
    font-family: HanSans;
    font-weight: 700;
    font-style: normal;
    src: url("fonts/hans_sans/SourceHanSansSC-Medium.otf") format("opentype");
}

body {
    font-family: Gotham, sans-serif;
    font-weight: 100;
    font-size: 1em;
    position: relative;
    box-sizing: border-box;
    line-height: 1.5;
}




}

body.dark {
    background-color: #111214;

}

body.light {
    background-color: #F2F4F5;

}

.han {
    font-family: HanSans, sans-serif;
}

a {
    text-decoration: none;
    color: #393B3D;
    font-weight: normal;
}

.mobile_menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*bottom: 0;*/
    height: 33vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.mobile_menu.hidden {
    display: none;
}

.mobile_menu>.links {
    display: grid;
    grid-template-rows: min-content min-content;
    align-content: center;
    grid-gap: 1.2em;
    height: 100%;
}

.mobile_menu>.links>a {
    font-size: 1.8em;
    color: #FFF;
    display: block;
    text-align: center;
    cursor: pointer;
}

.mobile_menu>.links>a:first-of-type {
    align-self: end;
}

.mobile_menu>.links>a:last-of-type {
    align-self: start;
}

.mobile_menu>.close {
    position: absolute;
    right: 1em;
    top: 1em;
}

.mobile_menu>.close>img {
    height: 2.5em;
    width: 2.5em;
}

html {
    background:#111214;
}
body,
.grid-er {
    /*height: 100%;*/
    margin: 0 auto;
}

.grid-container * {
    position: relative;
    box-sizing: border-box;
}

article {
     color: #000000;
     max-width: 1000px;
  margin: auto;

}


.button {
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 3em;
    width: 11em;
    height: 3em;
    padding: 0 1em;
    display: inline-block;
}

.android_button {    
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-align: right;
    line-height: 3em;
    width: 5.9em;
    height: 2.9em;
    padding: 0 1em;
    display: inline-block;}

.android_button:hover {background-color: #3fc679}
    
    
.android_button:before {
  content: '';
  background: url('./images/aicon.png');
  background-size: cover;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}

.win_button {    
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-align: right;
    line-height: 2em;
    width: 5.9em;
    height: 2em;
    padding: 0.5em;
    display: inline-block;}

.win_button:hover {background-color: #3fc679}
    
    
.win_button:before {
  content: '';
  background: url('./images/wicon.png');
  background-size: cover;
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
}

.noicon_button {    
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 2em;
    width: 5.9em;
    height: 2em;
    padding: 0.5em;
    display: inline-block;}

.noicon_button:hover {background-color: #3fc679}
    
    


.mac_button {    
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-align: right;
    line-height: 2em;
    width: 5.9em;
    height: 2em;
    padding: 0.5em;
    display: inline-block;}

.mac_button:hover {background-color: #3fc679}
    
    
.mac_button:before {
  content: '';
  background: url('./images/micon.png');
  background-size: cover;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}

.ios_button {    
    background: #00B06F;
    border-radius: 0.5em;
    font-size: 1em;
    font-weight: 400;
    color: #9ce0c7;
    text-align: right;
    line-height: 3em;
    width: 5.9em;
    height: 2.9em;
    padding: 0 1em;
    display: inline-block;}
    
.ios_button:before {
  content: '';
  background: url('./images/iicon.png');
  background-size: cover;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}



.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dlbtns {
margin: auto;
justify-items: center;
display: grid;
grid-template-columns: repeat(2, 134px);
grid-template-rows: repeat(2, 34px);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }

header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 14.4em 1fr;
    background-position: center top;
    background-color: #111214;
    z-index: 100;
    position: relative;
}

.cdlbtns {
    
    display: grid;
    grid-template-columns: 6fr 6fr 5fr;
    grid-template-rows: 30px;
    grid-column-gap: 10px
    grid-row-gap: 20px
    justify-items: auto
    align-items: auto
 }

header:before {
    z-index: -50;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.creator:before {
    animation-name: loop_creator_header_background;
    background: url('images/creator_background.jpg');

}

.landing:before {
    animation-name: loop_landing_header_background;
    background: url('images/landing_background.jpg');
}

.educator:before {}

@keyframes loop_landing_header_background {
    from {
        left: 0;
    }

    to {
        left: -4202px;
    }
}

@keyframes loop_creator_header_background {
    from {
        left: 0;
    }

    to {
        left: -7000px;
    }
}

header.educators {
    background: url('images/creator_background.jpg');

}

nav {

    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.83) 0%, rgba(0, 0, 0, 0.77) 28%, rgba(0, 0, 0, 0.00) 100%);
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: min-content 1fr;
    justify-content: space-between;
    grid-template-areas: "homelink nav_dropdown";
    /*height: 10em;*/
}

.homelink {
    grid-area: homelink;
    margin: 1.25em 1.625em 0 2.5em;
    height: 4em;
    width: 8.125em;
}

.homeimg{
    height: inherit;
    width: inherit;
}
.nav_dropdown {
    grid-area: nav_dropdown;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-auto-flow: column;

}

.nav_dropdown>p {
    display: inline-block;
    color: #FFF;
    position: relative;
    cursor: pointer;
    nav_dropdown
}


.nav_dropdown>img {
    display: inline-block;
    cursor: pointer;

}

.rotate {
    transform: rotate(180deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}

.correct {
    transform: rotate(0deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}



.nav_dropdown>p>.menu.hidden {
    display: none;
}

.nav_dropdown>p>.menu.show {
    position: absolute;
    top: 1.2em;
    left: 0;
    z-index: 100;
    width: 300px;
}

.nav_dropdown>p>.menu a {
    color: #BDBEBE;
    display: block;
    margin-top: 0.6em;
}

.downloadlink {
    grid-area: downloadlink;
    margin: 1.4em;
}

header>div {
    display: grid;
    grid-gap: 2.4em;
    grid-template-rows: min-content min-content 1fr;
    justify-items: center;

}

body.dark header>div {
    background-color: rgba(0, 0, 0, .85)
}

body.light header>div {
    background-color: rgba(0, 0, 0, .30)
}

header>div {
    padding-bottom: 3.75em;

}

header>div>p {
    font-size: 3em;
    color: #FFF;
    text-align: center;
}

header>div>p>span {
    display: block;
    margin-top: 1em;
    color: #CDCDCD;
    font-size: 0.55em;
}

header>div>p:nth-of-type(2) {}

header>div>img:nth-of-type(1) {
    margin-top: -90px;
    width: 11.375em;
    height: auto;
}

header>div>img:nth-of-type(2) {
    width: 19.5em;
    height: auto;
}

header>div>a.button {
    width: 17.25em
}

header>div>.studio_buttons {
    display: grid;
    grid-gap: 5em;
    grid-template-columns: min-content min-content;
    justify-content: space-between;
}

header>div>.studio_buttons>.button {
    width: 7.75em;
}

header>div>.video {
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.75)
}

section div {
    padding: 2em 4em 4em;
    /*    width: 64em;*/
    scrollbar-width: none;
}

section div::-webkit-scrollbar {
    display: none;
}

section.educator_subnav {
    display: grid;
    grid-template-rows: min-content min-content;
    grid-gap: 2.5em;
    padding: 3.125em 0;
}

section.educator_subnav>.links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.25em, 10em));
    justify-content: center;
    grid-gap: 3em;

}

section.educator_subnav>.links>.link {
    display: grid;
    grid-gap: 0.75em;
}

section.educator_subnav>.links>.link>a {
    display: block;
    text-align: center;
}

section.educator_subnav>.links>.link>a>img {
    width: 6em;
}

section.educator_subnav>.button {
    margin: auto;
}
h1 {
    font-size: 2.5em;
    font-weight: 700;
    padding-bottom: 0em;
    white-space: nowrap;
    text-align: center;
    color:white;
}

h2 {
    font-size: 1.25em;
    font-weight: 700;
    padding-bottom: 1em;
    white-space: nowrap;
}

section.upcoming_activities {
    background-color: #EAEDEF;

}

section.upcoming_activities>div {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(1024px, 1024px);
    /*grid-template-columns: repeat(auto-fill, 1024px);*/
    overflow-y: hidden;
    overflow: scroll;
    scroll-snap-type: x mandatory;
}

.upcoming_activity {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: 1.875em;
    scroll-snap-align: start;
}

.upcoming_activity>img {
    max-height: 240px;
}

.upcoming_activity>div {
    display: grid;
    grid-gap: 10px;
    grid-template-rows: repeat(3, min-content);
}

.upcoming_activity>div>h3 {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 2em;
}

section.activity_highlights {}

section.activity_highlights div {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(auto, 18.125em));
    justify-content: space-around;
}

.activity_highlight {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    grid-gap: 2em;
    justify-items: center;
}

section.outstanding_students {
    background-color: #EAEDEF;
}

section.outstanding_students>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 130px));
    grid-gap: 1.875em;

}

.outstanding_student {
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-gap: 8px;
}

section.excellent_teachers {}

section.excellent_teachers>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 210px));
    grid-gap: 1.875em;

}

.excellent_teacher {}

section.news_items {
    background-color: #EAEDEF;

}

section.news_items>div {}

.news_item {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-gap: 1.875em;
}

.news_item>img {
    max-height: 240px;
}

.news_item>div {
    display: grid;
    grid-gap: 10px;
    grid-template-rows: repeat(3, min-content);
}

.news_item>div>h3 {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 2em;
}

section.partners>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.partner {
    margin: 1.5em;
}

.partner>a,
.partnet>img {
    display: inline-block;

}

footer {
    text-align: center;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 1.25em;
    color: #FFF;
    padding: 2.5em 0;
    background: #111214;

}

footer a {
    color: #FFF
}

footer>.links {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 0 0 1.25em 0;
}

footer>.links>a {
    color: #B8B8B8;
    /*    white-space: nowrap;*/
    display: block;

}

footer>.logos {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-gap: 1.2em;
    justify-self: center;
}

footer>div>.sublinks a {
    padding: 0 0.8em;
    white-space: nowrap;
}

footer>div>.sublinks a:last-of-type {
    padding-right: 0;
    border-right: 0;
}

footer>div:last-of-type {
    font-size: 0.75em;
    line-height: 1.6em;
}

/*@media (min-width: 94.1em) {
    header>div>.video {
        max-width: 90em;
    }

}*/

@media (min-width: 50.01em) {
    header>div>.video {
        max-width: 740px;
    }

}

@media (max-width: 50em) {
    header>div>.video {
        max-width: 600px;
    }

}


@media (max-width: 37.4em) {

    .button.downloadlink {
        display: none;
    }

    header {}

    header>div>img:nth-of-type(1) {
        margin-top: -3.4em;
        width: 6.875em;
        height: auto;
    }

    header>div>img:nth-of-type(2) {
        width: 13.5em;
        height: auto;
    }

    header>div>p {
        font-size: 1.3em;
        color: #FFF;
    }

    header>div>.video {
        max-width: 340px;
    }

    header>div>a.button {
        width: 12.5em;
    }

    header>div>.studio_buttons {
        display: grid;
        grid-gap: 0.7em;
        grid-template-columns: min-content min-content;
        justify-content: space-between;
    }

    header>div>.studio_buttons>.button {
        width: 7.3em;
    }

    .nav_dropdown>p>span {
        font-size: 0.8em;
    }

    /*    section.educator_subnav>.links {
        grid-template: repeat(2, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        grid-gap: 1em;
    }*/
}