body
{
  margin: 0;
  padding: 30px 3%;
  background-image: url('../images/m-plt-611605-unsplash.jpg');
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Didact Gothic', sans-serif;
}

@font-face {
    font-family: GOTHIC;
    src: url("alternate.otf") format("opentype");
}

#main-section
{
  width: 100%;
  background-image: url('../images/banner.png');
  background-size: cover;
  height: 150vh;
  background-color: transparent;
  background-position: center;
  border: none;
  overflow: hidden;

}

nav
{
  width: 85%;
  margin: 5% 7.5%;
  display: inline-block;
  position: fixed;
  z-index: 998;
  transition: all, 0.4s;
}

#logo
{
  vertical-align: middle;
}

nav ul
{
  list-style-type: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  float: right;


}

nav ul li
{
  display: inline-block;
  padding: 10px 0px;
  margin: 0 15px;
  color: #CCCCCC;
  font-family: GOTHIC;
  font-size: 25px;
  border-top: 2px solid transparent;
  transition: border-color, 0.3s;
}

nav ul li:hover
{
  border-color: #CCFF00;
  cursor: pointer;
  transition: border-color, 0.3s;
}

#mobile-menu
{
  width: 50px;
  position: absolute;
  right: 20px;
  margin-top: 10px;
  vertical-align: middle;
  display: none;

}

.active
{
  border-color: #CCFF00;
}

.center-logo
{
  text-align: center;
  margin-top: 35%;
}

 /* ABOUT US */

#about-us
{
  width: 100%;
  background-color: #CCCCCC;
  position: relative;
  overflow: hidden;
}

#about-us h2
{
  color: white;
  text-align: center;
  margin: 7% 0;
  font-family: GOTHIC;
  font-weight: normal;
  font-size: 45px;
}

.box
{

  width: 22.5%;
  margin: 0 2%;
  text-align: center;
  display: inline-block;
  vertical-align: text-top;
}

.box img
{
  max-width: 100%;

}

.box-wrapper
{
  margin-top: 10px;
  margin-bottom: 70px;
  text-align: center;
}

.box p
{

    margin-top: 30px;
    font-size: 2.3vw;
    color: #333333;
    font-family: GOTHIC;
    font-weight: normal;

}

.class-map-wrap
{
  text-align: center;
  margin: 5vh 0 3vh 0;
}


#class-map
{
    background-color: #CCFF00;
    color: #333333;
    border: none;
    padding: 7px 20px;
    font-family: GOTHIC;
    font-size: 150%;
    transition: background-color, 0.4s;
    vertical-align: middle;
    text-decoration: none;

}

#class-map p
{
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

#class-map img
{
  width: 20px;
  vertical-align: middle;
}

#class-map:hover
{
    background-color: #dfff61;
    transition: background-color, 0.4s;
}

#mid-banner
{
  background-color: #b4ff00;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

#mid-banner img
{
  width: 100%;
}

#mid-banner p
{
    margin-top: 30px;
    font-size: 6vw;
    color: #333333;
    font-family: GOTHIC;
    font-weight: normal;
}


/* CLASSES */

#classes
{
  background-color: #333333;
  width: 100%;
  overflow: hidden;
  padding-bottom: 20px;

}

#classes h2
{
  color: white;
  text-align: center;
  margin: 7% 0;
  font-family: GOTHIC;
  font-weight: normal;
  font-size: 45px;
}

.class-wrapper
{
  width: 90%;
  vertical-align: text-top;
  margin: 0 auto;
  text-align: left;

}

.big-class
{
  width:20vw;
  height:40vw;
  display: inline-block;
  margin-top: 4px;
  position: relative;

}

.big-class-horizontal
{
  width:40vw;
  height:20vw;
  display: inline-block;
  margin-top: 4px;
  position: relative;

}

.left-classes
{
  display: inline-block;
  vertical-align: top;
  width: 62vw;
  text-align: left;
}

.desc-class
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;

}

.class-name
{

  font-size: 5vw;
  color: #CCFF00;
  text-align: center;
  font-family: GOTHIC;
  margin-bottom: 10%;
}

.class-description
{
  font-family: GOTHIC;
  color: white;
  font-size: 1.5vw;
  position: absolute;
  bottom: 20px;
  width: 100%;
}

.class-duration
{
  display: inline-block;
  width: 48%;
  text-align: center;
}

.class-duration p
{
  margin: 0;
  color: #cccccc;
}

.small-class
{
     width:20vw;
     height:20vw;
     display: inline-block;
     vertical-align: top;
     margin-top: 4px;
     position: relative;
}

.small-class:hover img
{
  filter: blur(5px);
}

.small-class:hover .desc-class
{
  opacity: 1;
}


.class-flag-vertical
{
    position: absolute;
    width: auto;
    height: 100%;
    bottom: 0;
}

.class-flag
{
    position: absolute;
    width: 100%;
    bottom: 0;
}

.small-class img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.big-class-cover
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLANS */

#pay-plans
{
    width: 100%;
    background-color: #CCCCCC;
    overflow: hidden;
    padding-bottom: 100px;
    min-height: 50vh;
    position: relative;
    z-index: 1;
}

#pay-plans h2
{
  color: #333333;
  text-align: center;
  margin: 5% 0;
  font-family: GOTHIC;
  font-weight: normal;
  font-size: 45px;
}

.plans-wrapper
{
    width: 100%;
    text-align: center;
}

.pay-plan
{
    width: 25vw;
    background-color: #333333;
    position: relative;
    display: inline-block;
    margin: 3% 5vw;
    font-family: GOTHIC;
    vertical-align: top;
    min-height: 66vh;
}

.plan-title
{
  width: 15vw;
  position: absolute;
  top: -30px;
  left: -60px;

}

.plan-title img
{
  max-width: 100%;
}

.plan-title p
{
  position: absolute;
  top: 2.2vw;
  left: 2.7vw;
  font-size: 3.4vw;
  color: rgb(52, 52, 52);
}

.plan-description
{
  position: relative;
  margin-top: 150px;
}

.plan-description-title
{
    color: white;
    font-size: 2.3vw;
    padding: 0;
    margin: 0;

}

.plan-description-box
{
  margin: 20px 0;
}

.plan-divider
{
    width: 4vw;
}

.plan-content
{
    color: white;
    font-size: 2vw;
    margin: 5px 0;
}

/* CONTACTS */

#contacts
{
    width: 100%;
    background-color: transparent;
    overflow: hidden;
    padding-bottom: 100px;
    position: relative;
    z-index: 99;
    margin-top: -5%;
}

#contact-form
{
  width: 60%;
  margin: 0 auto 0 auto;
  background-color: rgb(153, 153, 153);
  text-align: center;
  overflow: hidden;
  padding-bottom: 40px;

}

#contact-form h2
{
  color: white;
  text-align: center;
  margin: 6% 0 2% 0;
  font-family: GOTHIC;
  font-weight: normal;
  font-size: 45px;
}

#contact-form form
{
  margin-top: 2%;
}

#contact-form input, textarea
{
    width: 80%;
    font-family: GOTHIC;
    color: #3d3d3d;
    font-size: 17px;
    border: 2px solid #CCFF00;
    background-color: transparent;
    padding: 7px;
    margin: 1px auto;
    resize: none;
    display: block;
}

#contact-form button
{
  background-color: #CCFF00;
  padding: 10px 50px;
  font-family: GOTHIC;
  font-size: 20px;
  color: #333333;
  border: none;
  margin-top: 15px;
}

::placeholder
{
      color: #333333;
      opacity: 0.9;
}

/* STUDENTS */

#students
{
  width: 100%;
  background-color: #737373;
  overflow: hidden;
  text-align: center;
  font-family: GOTHIC;
  padding-bottom: 50px;
}

#students h2
{
  color: white;
  text-align: center;
  margin: 6% 0 2% 0;
  font-family: GOTHIC;
  font-weight: normal;
  font-size: 45px;
}

.student-speech
{
    color: #333333;
    text-align: center;
    width: 44%;
    font-size: 23px;
    margin: 5px auto;
}

#students label
{
    color: white;
    font-size: 25px;
    display: block;
    padding: 10px 0;
}

#footer
{
  background-color: #333333;
  text-align: center;
  padding: 5%; 0;
  font-family: GOTHIC;
  color: white;
  font-size: 20px;
}

.contact-info-wrapper
{
  width: 80%;
  margin: 5% auto 0 auto;
  position: relative;
  padding: 50px 0;
}

.address
{
  display: inline-block;
  vertical-align: top;
  position: absolute;
  left: 0;
}

.contact-way
{
  display: inline-block;
  vertical-align: top;
  position: absolute;
  right: 0;
  color: white !important;
}

.popup-wrapper
{
    
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 15, 15, 0.9);
  top: 0;
  left: 0;
  z-index: 999;
  display:none;
}

.popup
{
  top: 2vh;
  left: 2vw;
  right: 2vw;
  max-height: 95vh;
  position: fixed;
  z-index: 999;
  overflow:hidden;


}

.popup img
{
    width: 100%;
    height: 100%;
    object-position: center;
    cursor: pointer;
}

.popup-close
{
  position: absolute;
  top: 0;
  text-align: right;
  width: 100%;

}

.popup-close button
{
  background-color: #333333;
  border: none;
  color: #b4ff00;
  padding: 10px 20px;
  font-family: GOTHIC;
  font-size: 25px;
  cursor: pointer;
  transition: background-color, 0.4s;
}

.popup-go-button
{
  display: none;
  background-color: #b4ff00;
  border: none;
  color: #333333;
  padding: 10px 35px;
  font-family: GOTHIC;
  font-size: 25px;
  cursor: pointer;
  transition: background-color, 0.4s;
  position: absolute;
  bottom: 17%;
  left: 15%;
}

.popup-go-button img
{
  width: 20px;
  vertical-align: middle;
  margin-left: 25px;
}

.popup-close button img
{

  width: 20px;
  vertical-align: middle;
  margin-left: 5px;
  transition: margin, 0.4s;
}

.popup-close button:hover
{
    background-color: #dfff61;
    transition: background-color, 0.4s;
}

.popup-close button:hover img
{
    margin-left: 10px;
    transition: margin, 0.4s;
}

@media(max-width:768px)
{

    body
    {
      padding: 30px 1%;
    }

    .box-wrapper
    {
      text-align: center;
    }

    .box
    {
      width: 90%;
      margin: 5vh 4%;
    }

    .box p
    {
      font-size: 9vw;
    }

    #mid-banner p
    {
        font-size: 12vw;
        color: #333333;
    }

    #contact-form
    {
      width: 95%;
    }

    .student-speech
    {
      width: 80%;
    }

    .contact-info-wrapper
    {
        width: 90%;
    }

    .address
    {
        position: relative;
        margin: 25px 0;
        display: block;
    }

    .contact-way
    {
      position: relative;
      margin: 25px 0;
      display: block;
    }

    .center-logo
    {
      margin-top: 55%;
    }

    nav ul
    {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: none;
      vertical-align: middle;
      position: absolute;
      float: none;
      text-align: center;
      width: 100%;
      background-color:rgba(86, 86, 86, 0.9);
    }

    nav ul li
    {
      display: block;
      padding: 10px 0px;
      margin: 0 15px;
      color: #CCCCCC;
      font-family: GOTHIC;
      font-size: 25px;
      border: none;
      transition: border-color, 0.3s;
    }

    .active
    {
      border: none;
      color: #CCFF00;
    }

    #mobile-menu
    {

      display: inline-block;

    }

    .left-classes
    {
      width: 100%;
      text-align: center;
    }

    .small-class
    {
      width: 41vw;
      height: 41vw;

    }

    .big-class
    {
      width: 82.7vw;
      height: 50vh;
    }

    .big-class-horizontal
    {
      width:82.7vw;
      height:40vw;

    }

    .class-name
    {
      font-size: 8vw;
    }

    .class-description
    {
      font-size: 5vw;
    }

    .class-wrapper
    {
      text-align: center;
    }


    /* MOBILE - PLANS */

    .pay-plan
    {
        width: 70vw;
        background-color: #333333;
        position: relative;
        display: inline-block;
        margin: 10% 5vw;
        font-family: GOTHIC;
        vertical-align: top;
        min-height: 66vh;
    }

    .plan-title
    {
      width: 45vw;
      position: absolute;
      top: -35px;
      left: -40px;

    }

    .plan-title p
    {
      position: absolute;
      top: 6.5vw;
      left: 32px;
      font-size: 10vw;
      color: rgb(52, 52, 52);
    }

    .plan-description
    {
      position: relative;
      margin-top: 35vw;
    }

    .plan-description-title
    {
        color: white;
        font-size: 9vw;
        padding: 0;
        margin: 0;

    }

    .plan-description-box
    {
      margin: 20px 0;
    }

    .plan-divider
    {
        width: 10vw;
    }

    .plan-content
    {
        color: white;
        font-size: 6vw;
        margin: 5px 0;
    }

    /* POPUP */

    .popup
    {
      margin-top: 20vh;
    }

    .popup-close button
    {

      padding: 5px 10px;
      font-family: GOTHIC;
      font-size: 20px;
    }

    .popup-go-button
    {
      background-color: #b4ff00;
      border: none;
      color: #333333;
      padding: 3px 5.5px;
      font-family: GOTHIC;
      font-size: 13px;
      cursor: pointer;
      transition: background-color, 0.4s;
      position: absolute;
      bottom: 25%;
      left: 5%;
    }
    .popup-go-button img
    {
      width: 12px;
      margin-left: 7px;
    }

}

@media(max-width:768px) and (orientation:landscape)
{

  .center-logo
  {
    margin-top: 25%;
  }

  .popup
  {
    margin-top: 1vh;
  }

}