html, body { height: 100%; margin: 0; font-family: "Overpass", "Helvetica Neue", "Lucida Grande", sans-serif; letter-spacing: 0em; font-size: 20px;line-height: 1.4; font-weight: 400; }
body { display: flex; flex-direction: column; }

#container { flex: 1 0 auto; position: relative; }


a { text-decoration: none; color: tomato; }
a:hover { color: black;}
a.active { text-decoration: underline; color: white; }
.hl {color: slategray;}
.blue { color: blue; }
.white { color: #fff; }
.grey { color: #999; }

.sb-l { width: 100%}
.sb-m { width: 80%}
.sb-s { width: 50%}


.header { padding: 1rem 3rem; }
.header li { display: inline-block; margin-right: 2rem;}
.header li:last-child { margin-right: 0rem; }

.block { display: flex; flex-wrap: nowrap;  flex-direction: row; padding-bottom: 0; padding: 0 0rem;  }

.innerblock  { position: relative; flex-basis: 0; }
.inner-text { padding: 4rem;  }
.inner-title { margin: 0 0 1rem 0; font-size: 1.5rem; font-weight: 700;}


.flex1 { flex-grow:1; }
.flex2 { flex-grow:2; }
.flex3 { flex-grow:3; }
.flex4 { flex-grow:4; }


/* NAV */

.bar { margin: 1rem 0 1rem 0; display: flex; justify-content: flex-end; }
.topbar { margin-right: 1rem; }
.lang { height: 32px; width: auto; display: flex; align-items: center; justify-content: center; padding-right: 1rem; font-size: 1.2rem;}
.sm-icon { width: 32px; height: 32px;}
.lang:hover { color: #666; }
.sm-icon:hover { opacity: 0.6;}
.nav li { display: inline-block; margin-right: 2rem; color: black;}
.nav li:last-child { margin-right: 0rem; }
.nav li a { color: black; }
.nav li a:hover { color: #666; }

/*HEADER */

.header { display: flex;}
.logo { width: 50%; }
.intro-block { width: 100%; padding-top: 50%; }
.about-block { padding-top: 35%; }
.bgimage { background-position: center; background-size: cover; }

#ig {display: flex;}
.ig-block { width: 20%; padding-top: 20%; background: wheat; overflow: hidden; height: 0; position: relative;}
.ig-block-inner {position:absolute; width: 100%; height: 100%; top: 0; left: 0;}
.ig-block-inner img { width: 100%; height: 100%;}


/* COURSES */

.course-block  { width: 33.33%; padding-top: 33.33%; overflow: hidden; height: 0; position: relative; background-position: center; background-size: cover; }
.course-block-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center;}
.course-block-title { background-color: yellow; padding: 5px; font-weight: 700; font-size: 1.3rem; color: black; cursor: pointer;}
.course-block-title:hover { background-color: black; color: white; }

.course-row { display: flex; flex-direction: row; border-bottom: 1px solid black; padding: 20px 0;}
.course-cell { flex: 1;  }
.course-title { font-size: 1.5rem; font-weight: 700; }
.course-subtitle { font-size: 1.2rem; font-weight: 700; }
.course-note { text-align: right;}

.overlay { width: 100%; height: 100vh; background-color: rgba(255,255,255, 1); position: fixed; overflow-y: scroll; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: flex-start; justify-content: center;}
.overlay-inner { width: 80%; background: white; padding: 40px 20px 100px 20px; max-width: 1200px; }

.noscroll { overflow: hidden; }

.dn { display: none; }



/* FOOTER */

.footer { flex-shrink: 0; border-top: 1px solid black; padding: 1rem 3rem; margin-top: 4rem; }

.footer-container { display: flex;  }
.item { flex: 1 }
.footer-container .item:last-child { text-align: right; }


.close, .menu { position: fixed; right: 64px; top: 32px; width: 32px; height: 32px; opacity: 1;}
.close:hover { cursor: pointer; opacity: 0.5;}
.close:before, .close:after { position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #000;}
.menu:before, .menu:after { position: absolute; top: 0px; content: ' '; height: 2px; width: 33px; background-color: #000; }
.menu:after { top: 30px; }
.close:before { transform: rotate(45deg);}
.close:after { transform: rotate(-45deg);}

  @media only screen and (max-width: 960px) {
    html, body {font-size: 18px;}
    .logo { width: 75%; }
  }


  @media only screen and (max-width: 768px) {
    html, body {font-size: 16px;}
    .topbar { display: flex;}
    .header { padding: 0rem 1rem 1rem 1rem; text-align: center; }
    .block { display: block; }
    .about-block { padding-top: 60%;}
    .course-block { width: 100%; padding-top: 50%; }
    #header-nav { display: none;}
    .inner-text { padding: 4rem 1.5rem; }
    .overlay-inner {  width: 95%; }
    .footer { padding: 1rem 1.5rem; }
    .footer-container{ display: block;}
    .footer-container .item:last-child { text-align: left; }
    .close { top: 1rem; right: 1rem;}
  }