@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900');

      * {
        margin: auto;
        padding: auto;
      }

      @media (min-width: 576px) and (max-width: 767px) {
        .col-sm-4 {
          max-width: 100%;
          flex: auto;
        }

        .authfy-panel-left,
        .authfy-panel-right {
          float: left;
        }

      }

      @media (min-width: 320px) and (max-width: 375px) {

        body {
          background-size: cover;
        }
      }

      body,
      html {
        background-color: #f0f2f5;
        background-image: url("https://1.bp.blogspot.com/-fd1WXKk-TAc/XyqfngP4PiI/AAAAAAAAVMw/umQz3tkxtg43uPIy8W5og6gAkpCfjaTvACLcBGAsYHQ/w1563-h1563/bg-snell.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 100%;
        height: 100vh;
        text-rendering: optimizeLegibility;
      }

      .dust-paarticle {
        position: absolute;
        width: 100%;
      }

      #snell {
        position: absolute;
        top: 0;
        width: 100%;
      }

      #eye1 {
        animation: swing ease-in-out .6s infinite alternate;
        transform-origin: bottom;
        transform-box: fill-box;
        left: calc(52% - .0rem);
      }

      #eye2 {
        animation: swing ease-in-out .5s infinite alternate;
        transform-origin: bottom;
        transform-box: fill-box;
        left: calc(40% - .0rem);
      }


      #dust-paarticle path {
        transform-box: fill-box;
        transform-origin: center;
      }

      /*************swing************/
      @keyframes swing {
        0% {
          transform: rotate(8deg);
        }

        100% {
          transform: rotate(-8deg);
        }
      }


      .position-set {
        position: absolute;
        top: 5%;
      }



      /*--------------------*/
      /* 02. Common CSS */
      /*--------------------*/


      body {
        font-family: 'Titillium Web', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #44525f;
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #2d385e;

      }

      a:focus {
        outline: none;
        text-decoration: none;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: 'Titillium Web', sans-serif;
        color: #2d385e;
      }

      a,
      a:hover,
      a:focus {
        color: #4f77ff;
      }

      .btn-primary {
        background-color: #4f77ff;
        border-color: #4f77ff;
      }

      .btn-primary:hover,
      .btn-primary:active:hover,
      .btn-primary:focus,
      .btn-primary:active:focus,
      .btn-primary:active,
      .btn-primary.active {
        background-color: #486ff2;
        border-color: #486ff2;
      }

      .authfy-login .btn.btn-lg {
        border-radius: 3px;
        box-shadow: 0px 2px 3px #9c9c9c;
      }

      .brand-logo {
        margin-top: 0px;
        margin-bottom: 35px;
      }

      /*--------------------*/
      /* 03. Section Panel UI CSS */
      /*--------------------*/

      .authfy-container {
        margin-top: 97px;
        margin-bottom: 97px;
      }

      .authfy-panel-left {
        background-color: rgb(12 14 33 / 92%);
        color: #ffffff;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-box-shadow: 0px 3px 6px #1d2030;
        box-shadow: 0px 3px 6px #1d2030;
      }

      .authfy-panel-right {
        background-color: #ffffff;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-box-shadow: 0px 2px 6px 0px #1d2030;
        box-shadow: 0px 2px 6px 0px #1d2030;
      }

      .authfy-login,
      .authfy-panel-left .brand-col {
        height: 460px;
      }

      .authfy-panel-left .brand-col {
        display: table;
        width: 100%;
        padding: 25px;
      }

      .authfy-panel-left .brand-col .headline {
        display: table-cell;
        vertical-align: middle;
      }

      .authfy-panel-left .brand-col .headline h1,
      .authfy-panel-left .brand-col .headline h2,
      .authfy-panel-left .brand-col .headline h3 {
        color: #fff;
        font-size: 48px;
        font-weight: 700;
      }

      .authfy-login {
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
      }

      .authfy-panel {
        padding: 20px 30px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all .5s ease;
        opacity: 0;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }

      .authfy-panel .authfy-heading {
        margin-bottom: 30px;
      }

      .authfy-login .auth-title {
        font-weight: 700;
      }

      .authfy-login .authfy-panel.active {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
      }

      .brand-col .social-buttons a {
        color: #ffffff;
        margin-top: 15px;
      }

      .brand-col .social-buttons a:hover {
        color: white;
        opacity: 0.9;
      }

      .brand-col .social-buttons .btn-facebook {
        background: #3b5998;
      }

      .brand-col .social-buttons .btn-microsoft {
        background: #2F2F2F;
      }

      .brand-col .social-buttons .btn-google {
        background: #c32f10;
      }

      .brand-col .social-buttons a>span {
        padding-left: 5px;
      }

      .panel-login {
        margin-top: 20px;
      }

      .panel-login .remember-row {
        margin-bottom: 10px;
      }

      .panel-login .remember-row label {
        font-weight: normal;
        position: relative;
        cursor: pointer;
        color: #666;
        padding-left: 24px;
      }

      .authfy-login .forgotPwd {
        text-align: right;
        margin-top: 10px;
      }

      .panel-login .form-control,
      .panel-signup .form-control,
      .panel-forgot .form-control {
        background-color: #fff;
        color: #333333;
        font-size: 18px;
        height: 50px;
        margin-bottom: 20px;
        padding: 12px 22px;
        border-radius: 3px;
        border: solid 1px #bcc2ce;
        outline: none;
        -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.1);
      }

      .authfy-panel.panel-forgot {
        padding-top: 40px;
      }

      .panel-login .form-control:focus,
      .panel-signup .form-control:focus,
      .panel-forgot .form-control:focus {
        border-color: #4f77ff;
        z-index: 2;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
      }

      .pwdMask {
        position: relative;
      }

      .pwdMask .pwd-toggle {
        color: #cccccc;
        position: absolute;
        z-index: 2;
      }

      .panel-login .pwdMask .pwd-toggle,
      .panel-signup .pwdMask .pwd-toggle {
        top: 15px;
        right: 15px;
      }

      .pwdMask .pwd-toggle:hover,
      .pwdMask .pwd-toggle:focus {
        cursor: pointer;
      }

      .pwdMask .pwd-toggle:hover,
      .pwdMask .pwd-toggle:focus,
      .pwdMask .pwd-toggle.fa-eye {
        color: #4f77ff;
      }

      .panel-signup .term-policy a {
        text-decoration: underline;
      }

      /*--------------------*/
      /* 04. Check box UI CSS */
      /*--------------------*/

      .checkbox input[type="checkbox"] {
        position: absolute;
        right: 9000px;
      }

      .checkbox input[type="checkbox"]+.label-text:before,
      .checkbox input[type="checkbox"]+.label-text:after {
        font-size: 11px;
        display: inline-block;
        width: 17px;
        height: 17px;
        padding: 2px;
        margin-left: 0;
        position: absolute;
        top: 2px;
        left: 0;
      }

      .checkbox input[type="checkbox"]+.label-text:before {
        content: "";
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 3px;
        cursor: pointer;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      }

      .checkbox input[type="checkbox"]+.label-text:after {
        background-color: #4f77ff;
        color: #ffffff;
        border-radius: 2px;
        border-color: #4f77ff;
        line-height: 1.4;
      }

      .checkbox input[type="checkbox"] {
        opacity: 0;
        z-index: 1;
        cursor: pointer;
      }

      .checkbox input[type="checkbox"]:focus+.label-text:before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
      }

      .checkbox input[type="checkbox"]:checked+.label-text:after {
        font-family: "FontAwesome";
        content: "\f00c";
      }

      /*--------------------*/
      /* 05. Responsive CSS */
      /*--------------------*/

      @media (min-width: 768px) {

        .authfy-panel {
          padding: 20px;
        }


      }

      @media (max-width: 767px) {

        .authfy-panel-left,
        .authfy-panel-right {
          box-shadow: none;
        }

        .authfy-panel-left {
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
        }

        .authfy-panel-right {
          border-top-left-radius: 0px;
          border-top-right-radius: 0px;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        .authfy-panel-left .brand-col {
          height: 300px;
          text-align: center;
        }

        .term-policy {
          font-size: 75%;
        }
      }

      @media (min-width: 320px) and (max-width: 375px) {

        body {
          background-size: cover;
        }

        .authfy-login .authfy-panel {
          padding: 20px;
        }

        .panel-login .remember-row {
          margin-bottom: 10px;
          font-size: 14px;
        }
      }

      @media (max-width: 320px) {
        .authfy-login {
          height: 480px;
        }

        .authfy-heading p {
          font-size: 14px;
        }

        .remember-row .col-sm-6 {
          width: 100%;
        }

        .authfy-login .forgotPwd {
          text-align: left;
          margin-top: 0px;
        }
      }


      @media (min-width: 1200px) {
        .col-lg-offset-3 {
          margin-left: 25%;
        }

        .col-lg-6 {
          width: 50%;
        }

        .col-lg-1,
        .col-lg-10,
        .col-lg-11,
        .col-lg-12,
        .col-lg-2,
        .col-lg-3,
        .col-lg-4,
        .col-lg-5,
        .col-lg-6,
        .col-lg-7,
        .col-lg-8,
        .col-lg-9 {
          float: left;
        }

      }



      @media (min-width: 768px) {

        .col-sm-1,
        .col-sm-10,
        .col-sm-11,
        .col-sm-12,
        .col-sm-2,
        .col-sm-3,
        .col-sm-4,
        .col-sm-5,
        .col-sm-6,
        .col-sm-7,
        .col-sm-8,
        .col-sm-9 {
          float: left;
        }
      }