/*
  GLOBALS
  ****************************/
  :root {
    /*main colors*/
    --c_blue_light: #F2F5F8;
    --c_blue_dark: #304E64;
  }

  body{
    font-family: 'Roboto', sans-serif;
  }

  /* texts */
  .text-blue{color: var(--c_blue_dark)}

  .lh-1 {line-height: 1;}
  .lh-12 {line-height: 1.2;}

  /* positioning */
  .z-1{z-index: 1;}
  .z-2{z-index: 2;}
  .pos-l-0{left:0;}
  .pos-r-0{right:0;}

  /* font sizes*/
  .fs-1{font-size:clamp(1.5rem, 2.5vw, 2.75rem) !important}
  .fs-2{font-size:clamp(1.35rem, 2.25vw, 2.25rem) !important}
  .fs-3{font-size:clamp(1.25rem, 2vw, 2rem) !important}
  .fs-4{font-size:clamp(1.15rem, 1.75vw, 1.85rem) !important}
  .fs-5{font-size:clamp(1rem, .5vw, 1.7rem) !important}
  .fs-6{font-size:clamp(.9rem, .5vw, 1.10rem) !important}
  .fs-7{font-size:clamp(.85rem, .5vw, 1rem) !important}
  .fs-8{font-size:clamp(.75rem, .5vw, 9rem) !important}

  /* bgs */
  .bg-blue-light{background-color: var(--c_blue_light);}
  .bg-blue-dark{background-color: var(--c_blue_dark);}

  /* btns */
  .btn-blue-dark {
        background-color: var(--c_blue_dark);
        border-radius: 4rem;
        padding: 1rem 2rem;
        border: 2px solid var(--c_blue_dark);
        white-space: normal;
        max-width:100%;
   }
   .btn{opacity: 1;transition: all ease-in-out .3s;}
   .btn:hover{opacity: .8;transition: all ease-in-out .3s;}


  /*
  PAGES
  ****************************/

  /* register */
  #reg-1 {
    min-height: 100vh;
    background: url(../img/register-bg.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }

    .form-holder{
        min-height: 100vh;
        background: url(../img/register-bg-w.svg) no-repeat;
        background-size: cover;
    }
    
    
    @media (min-width:992px) {
        #s2{
            margin-top: -10%;
          }
          #s3{
            margin: -10vh 0;
          }
          .form-holder{
            margin-top: 30vh;
          }
      }
      @media (max-width:992px) {
          .btn-blue-dark {
            padding: .3rem 1rem;
        }
         
      }
      @media (min-width:1280px) {
        #s2{
            margin-top: -20%;
          }
      }
    @media (min-width:1620px) {
        #s2{
            margin-top: -25%;
          }
      }