@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

@media all and (max-width: 1440px) {
  html, body {
    font-size: 1.125vw; } 
}

@media all and (max-width: 1200px) {
}

@media all and (max-width: 1023px) {
  .desktop {
    display: none; }

  .mobile {
    display: block; }

  .navbar-wrap {
    display: none; }
    .navbar-wrap img {
      max-height: 3.5rem; }

  .top-nav .navbar-wrap {
    display: block; }
  .top-nav .nav {
    display: flex; }

  .toggle-menu {
    display: block;
    font-size: 2rem;
    color: #3e7f38; }

  .cbp-spmenu {
    background-color: #fff;
    z-index: 2000;
    width: 20rem; }
    .cbp-spmenu img {
      max-width: 80%;
      max-height: none; }
    .cbp-spmenu .navbar-brand {
      border-bottom: none;
      background-color: #ccc;
      width: 100%;
      padding: 1rem;
      text-align: center; }
      .cbp-spmenu .navbar-brand img {
        position: static;
        max-width: 45%; }
    .cbp-spmenu ul {
      padding: 0;
      margin: 0; }
      .cbp-spmenu ul a {
        border-color: #ccc;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 1rem;
        padding: 1rem 2rem; }
        .cbp-spmenu ul a:hover {
          background-color: #ccc;
          color: #888; }

  .modal-backdrop.fade {
    opacity: 0.6; }

  html,
  body {
    font-size: 2vw; }

  .cbp-spmenu-left {
    left: -100%; }

  .register {
    margin-top: 3rem; } 

  .btn {
      font-size: .85rem;
      padding: .5rem;
  }
  
  h5 {line-height: 1.5; font-size: 1rem;}
}

@media all and (max-width: 767px) {
  html, body {
    font-size: 2.5vw; }

  .register-sidebar {
    margin-top: 3rem; }

  .grid-bg {
    border-bottom: none; }

  .top-nav {
    justify-content: flex-end;
    padding: 0.5rem; }
    .top-nav .nav .nav-link {
      padding: .5rem 1rem; }
    .top-nav .language-form .form-group select {
      padding: .375rem .5rem; }
    .top-nav .left {
      display: none !important; }

  .main-overlay .main-background .content img {
    max-width: 100%; }
  .main-overlay .main-background .content .logo {
    max-width: 100%; }
  .main-overlay .main-background .content h1 {
    font-size: 2rem; }

  .action-icons .col {
    margin-bottom: 2rem; }
    .action-icons .col:last-child {
      margin-bottom: 0; }

  .landing-info {
    text-align: center; }
    .landing-info p {
      text-align: center; }

  .content-wrap {
    padding: 1rem; }

  footer.container-fluid {
    padding: 2rem; }
    footer.container-fluid .nav {
      flex-direction: column; }

  .login .btn {
    width: 100%; }
    .login .btn:first-child {
      margin-bottom: 1rem; }

    .btn {
    width: 100%; }

  #mobilePane {
    position: absolute;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 500;
    padding-top: 1rem; }

  .navbar .navbar-brand img {
    position: static; } 

  h1 {
      line-height: 1;
      font-size: 1.5rem;
  }
  h4 {
      font-size: 1rem;
  }
  
    .math_text {
        font-size: 1rem;
        height: 100px;
        width: 150px;
    }

    .math_image img {
        height: 150px;
    }

  
    .container.fluid {max-width: 100% !important;}
    .content-wrap {padding-bottom: 4rem !important;}
    
    h5 {line-height: 1.5; font-size: .75rem;}
    .angle2 {font-size: 1.5rem;}
    
    .thought_bubble {
        font-size: .7rem;
        height: 431px;
    }

    .thought_bubble img.background {
        height: 478px;
    }

    .thought_bubble.right img.background {
        left: 12px;
    }

    .thought_bubble .step {
        width: 130px;
        margin-left: auto;
        text-align: center;
    }

    .thought_bubble.left .step.step1 {
        margin-top: 1.5rem;
        margin-right: 1rem;
    }

    .thought_bubble.left .step.step2 {
        margin-top: 2rem;
        margin-right: 1rem;
    }

    .thought_bubble.left .step.step3 {
        margin-top: 3rem;
        margin-right: 1.25rem;
    }

    .thought_bubble.right .step.step1 {
        margin-top: 2rem;
        margin-left: 1rem;
    }

    .thought_bubble.right .step.step2 {
        margin-top: 2rem;
        margin-left: 1rem;
    }

    .thought_bubble.right .step.step3 {
        margin-top: 3rem;
        margin-left: 1.25rem;
    }
    
    .problems {margin-top: 1rem; height: 600px;}
    .problems.compare {height: 450px;}
    .problems .statement {font-size: .7rem;}
    
    .problems .step {margin-bottom: 2rem; width: 140px; text-align: center;}
    .problems .step3:last-child {margin-bottom: 0;}

    .problems .step img {width: 90px;}

    .problems .step.step1 img.image2{margin-top: -158px;}
    .problems .step.step2 img.image2{margin-top: -158px;}

    #compare_sol .student.left {
        right: 3rem;
        bottom: -7rem;
    }

    #compare_sol .student.right {
        left: 3rem;
        bottom: -7rem;
    }

    .bigBubble {
        left: 70px;
        bottom: 560px;
        height: 490px;
    }
    .bigBubble img {
        width: 75%;
    }
    .bigBubble .bubbleTxt {
        top: 90px;
        left: 130px;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}