/*For Prealoder*/
/**************************************

Template Name: Xmee | Login and Register Form Html Templates
Template URL: http://html.affixtheme.com/html/xmee
Description: Creative & Exclusive Login Registration Template
Author: AffixTheme
Author URL: https://themeforest.net/user/affixtheme
Version: 2.1 

======================================  
        Table Of Contents
======================================
1. Typography
2. Template Default Style
3. Template Animation
4. Demo Layout One
5. Demo Layout Two
6. Demo Layout Three
7. Demo Layout Four
8. Demo Layout Five
9. Demo Layout Six
10. Demo Layout Seven
11. Demo Layout Eight
12. Demo Layout Nine
13. Demo Layout Ten
14. Demo Layout Eleven
15. Demo Layout Twelve
16. Demo Layout Thirteen
17. Demo Layout Fourteen
18. Demo Layout Fifteen
19. Demo Layout Sixteen
20. Demo Layout Seventeen
21. Demo Layout Eighteen
22. Demo Layout Nineteen
23. Demo Layout Twenty
24. Demo Layout Twenty One
25. Demo Layout Twenty Two
26. Demo Layout Twenty Three
27. Demo Layout Twenty Four
28. Demo Layout Twenty Five
29. Demo Layout Twenty Six
30. Demo Layout Twenty Seven
31. Demo Layout Twenty Eight
32. Demo Layout Twenty Nine
33. Demo Layout Thirty
34. Demo Layout Thirty One
35. Demo Layout Thirty Two
36. Demo Layout Thirty Three
37. Demo Layout Thirty Four
38. Demo Layout Thirty Five
39. Demo Layout Thirty Six

**************************************/
/*=======================================================================
1. Typography
=========================================================================*/
html {
  height: 100%;
}
body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  height: 100%;
  line-height: 1.7;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #646464;
  background-color: #fff;
}
p {
  margin: 0 0 20px 0;
  color: #646464;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin: 0 0 20px 0;
  color: #111;
}
h1,
h2 {
  line-height: 1.2;
}
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}
h1 {
  font-size: 36px;
}
@media only screen and (max-width: 1199px) {
  h1 {
    font-size: 34px;
  }
}
@media only screen and (max-width: 991px) {
  h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 30px;
  }
}
h2 {
  font-size: 28px;
}
@media only screen and (max-width: 1199px) {
  h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 991px) {
  h2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 22px;
  }
}
h3 {
  font-size: 22px;
}
@media only screen and (max-width: 991px) {
  h3 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  h3 {
    font-size: 18px;
  }
}
h4 {
  font-size: 20px;
}
@media only screen and (max-width: 991px) {
  h4 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  h4 {
    font-size: 16px;
  }
}
h5 {
  font-size: 18px;
}
@media only screen and (max-width: 991px) {
  h5 {
    font-size: 16px;
  }
}
/*=======================================================================
2. Template Default Style
=========================================================================*/
a {
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  outline: 0 none;
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.fxt-content-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .fxt-none-767 {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-none-991 {
    display: none !important;
  }
}
/*Preloader Styles Start*/
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  z-index: 999999;
}
.preloader .inner {
  width: 99px;
  height: 99px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.preloader .inner > div {
  border-radius: 50%;
  position: absolute;
  -webkit-animation-name: circle_rotate;
  animation-name: circle_rotate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-timing-function: linear cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.preloader .inner .line1 {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 6px solid #740eaf;
  border-left: 6px solid rgba(116, 14, 175, 0);
  border-right: 6px solid rgba(116, 14, 175, 0);
  border-bottom: 6px solid rgba(116, 14, 175, 0);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.preloader .inner .line2 {
  width: 70%;
  height: 70%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 6px solid #9726d8;
  border-left: 6px solid rgba(151, 38, 216, 0);
  border-right: 6px solid rgba(151, 38, 216, 0);
  border-bottom: 6px solid rgba(151, 38, 216, 0);
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.preloader .inner .line3 {
  width: 40%;
  height: 40%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top: 6px solid #be70eb;
  border-left: 6px solid rgba(190, 112, 235, 0);
  border-right: 6px solid rgba(190, 112, 235, 0);
  border-bottom: 6px solid rgba(190, 112, 235, 0);
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
@-webkit-keyframes circle_rotate {
  50%,
  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@keyframes circle_rotate {
  50%,
  100% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
/*Preloader Styles End*/
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-animation .fxt-opacity {
  opacity: 0;
}
.fxt-template-animation .fxt-transformY-50 {
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}
.fxt-template-animation .fxt-transformX-L-50 {
  opacity: 0;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
}
.fxt-template-animation .fxt-transformX-R-50 {
  opacity: 0;
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
}
.loaded.fxt-template-animation {
  opacity: 1;
}
.loaded.fxt-template-animation .fxt-opacity {
  opacity: 1;
  -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformY-50 {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformX-L-50 {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transformX-R-50 {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  -webkit-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.loaded.fxt-template-animation .fxt-transition-delay-1 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-3 {
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-4 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-5 {
  -webkit-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-6 {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-7 {
  -webkit-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-8 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-9 {
  -webkit-transition-delay: 0.9s;
  -o-transition-delay: 0.9s;
  transition-delay: 0.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-10 {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-11 {
  -webkit-transition-delay: 1.1s;
  -o-transition-delay: 1.1s;
  transition-delay: 1.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-12 {
  -webkit-transition-delay: 1.2s;
  -o-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-13 {
  -webkit-transition-delay: 1.3s;
  -o-transition-delay: 1.3s;
  transition-delay: 1.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-14 {
  -webkit-transition-delay: 1.4s;
  -o-transition-delay: 1.4s;
  transition-delay: 1.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-15 {
  -webkit-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-16 {
  -webkit-transition-delay: 1.6s;
  -o-transition-delay: 1.6s;
  transition-delay: 1.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-17 {
  -webkit-transition-delay: 1.7s;
  -o-transition-delay: 1.7s;
  transition-delay: 1.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-18 {
  -webkit-transition-delay: 1.8s;
  -o-transition-delay: 1.8s;
  transition-delay: 1.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-19 {
  -webkit-transition-delay: 1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-20 {
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}
/*========================================================================
34. Demo Layout Thirty One
=========================================================================*/
.fxt-template-layout31 {
  background-color: #ffffff;
  padding: 110px;
  width: 100%;
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 {
    padding: 90px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 {
    padding: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 {
    padding: 50px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 {
    padding: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout31 {
    padding: 15px;
  }
}
.fxt-template-layout31 .fxt-shape {
  height: 100%;
  width: calc((100vw + 220px)/4);
  background-color: #1a3d8f;
  content: "";
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 .fxt-shape {
    width: calc((100vw + 180px)/4);
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-shape {
    width: calc((100vw + 140px)/4);
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-shape {
    width: calc((100vw + 100px)/4);
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-shape {
    width: calc((100vw + 60px)/4);
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout31 .fxt-shape {
    width: calc((100vw + 30px)/4);
  }
}
.fxt-template-layout31 .fxt-content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  width: 100%;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-content-wrap {
    display: block;
  }
}
.fxt-template-layout31 .fxt-heading-content {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 50px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-heading-content {
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-heading-content {
    padding: 40px 15px;
  }
}
.fxt-template-layout31 .fxt-heading-content:before {
  height: 100%;
  width: 100%;
  background-color: rgba(9, 64, 194, 0.9);
  content: "";
  left: 0;
  top: 0;
  z-index: -1;
  position: absolute;
}
.fxt-template-layout31 .fxt-heading-content .fxt-inner-wrap {
  text-align: center;
  max-width: 640px;
  width: 100%;
}
.fxt-template-layout31 .fxt-heading-content .fxt-logo {
  display: inline-block;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
.fxt-template-layout31 .fxt-heading-content .fxt-main-title {
  color: #ffffff;
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 60px;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-main-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-main-title {
    font-size: 32px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-main-title {
    font-size: 30px;
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-main-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option {
  max-width: 400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option ul {
  text-align: center;
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li {
  margin-bottom: 15px;
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li:last-child {
  margin-bottom: 0;
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a {
  padding: 15px;
  border: 1px solid;
  border-color: #5984e8;
  color: #ffffff;
  font-size: 20px;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a:hover {
  background-color: #ffffff;
  color: #14133b;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a {
    font-size: 18px;
    padding: 14px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a {
    font-size: 17px;
    padding: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a {
    font-size: 16px;
    padding: 12px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-heading-content .fxt-login-option ul li a {
    font-size: 15px;
    padding: 11px;
  }
}
.fxt-template-layout31 .fxt-form-content {
  -webkit-box-shadow: 0 3px 79px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 79px 0 rgba(0, 0, 0, 0.08);
  width: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-form-content {
    width: 100%;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher {
  padding: 50px 50px 0 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-switcher {
    padding: 40px 15px 0;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:first-child .fxt-switcher-btn {
  border-left: 1px solid;
  border-color: #111111;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:first-child .fxt-switcher-btn:hover,
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:first-child .fxt-switcher-btn.active {
  border-color: #1b53d4;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:last-child .fxt-switcher-btn {
  border-right: 1px solid;
  border-color: #111111;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:last-child .fxt-switcher-btn:hover,
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-wrap li:last-child .fxt-switcher-btn.active {
  border-color: #1b53d4;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn {
  padding: 9px 27px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #111111;
  color: #111111;
  display: block;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn:hover {
  color: #1b53d4;
}
.fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn.active {
  background-color: #1b53d4;
  color: #ffffff;
  border-color: #1b53d4;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn {
    font-size: 17px;
    padding: 8px 25px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn {
    font-size: 16px;
    padding: 7px 23px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-switcher .fxt-switcher-btn {
    font-size: 15px;
    padding: 6px 21px;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-page-title {
  margin-bottom: 15px;
  font-size: 36px;
  font-weight: 700;
  color: #14133b;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-title {
    font-size: 32px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-title {
    font-size: 28px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-title {
    font-size: 26px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout31 .fxt-form-content .fxt-page-title {
    font-size: 24px;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-description {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 30px;
}
.fxt-template-layout31 .fxt-form-content .fxt-label {
  color: #14133b;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.fxt-template-layout31 .fxt-form-content .fxt-main-form {
  padding: 30px 50px 20px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-form-content .fxt-main-form {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout31 .fxt-form-content .fxt-main-form {
    padding: 20px 15px 10px;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-inner-wrap {
  max-width: 440px;
  width: 100%;
}
.fxt-template-layout31 .fxt-form-content .form-group {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.fxt-template-layout31 .fxt-form-content .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 19px;
  bottom: 18px;
  font-size: 14px;
  color: #a1a1a1;
}
.fxt-template-layout31 .fxt-form-content .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout31 .fxt-form-content .form-control {
  min-height: 50px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  padding: 10px 15px;
  color: #111;
}
.fxt-template-layout31 .fxt-form-content input::-webkit-input-placeholder {
  color: #acacac;
  font-size: 17px;
  font-weight: 400;
}
.fxt-template-layout31 .fxt-form-content input::-moz-placeholder {
  color: #acacac;
  font-size: 17px;
  font-weight: 400;
}
.fxt-template-layout31 .fxt-form-content input:-moz-placeholder {
  color: #acacac;
  font-size: 17px;
  font-weight: 400;
}
.fxt-template-layout31 .fxt-form-content input:-ms-input-placeholder {
  color: #acacac;
  font-size: 17px;
  font-weight: 400;
}
.fxt-template-layout31 .fxt-form-content .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: 1px solid;
  border-color: #1b53d4;
  color: #fff;
  border-radius: 3px;
  background-color: #1b53d4;
  padding: 10px 36px;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout31 .fxt-form-content .fxt-btn-fill:hover {
  background-color: #0d42be;
  border-color: #0d42be;
}
.fxt-template-layout31 .fxt-form-content .fxt-btn-fill:focus {
  outline: none;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout31 .fxt-form-content .fxt-btn-fill {
    font-size: 16px;
    padding: 9px 32px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout31 .fxt-form-content .fxt-btn-fill {
    font-size: 15px;
    padding: 8px 28px;
  }
}
.fxt-template-layout31 .fxt-form-content .fxt-switcher-description {
  text-align: center;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #888888;
  margin-bottom: 10px;
}
.fxt-template-layout31 .fxt-form-content .fxt-switcher-text {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  color: #1b52d2;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 5px;
  text-decoration: underline;
  display: inline-block;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout31 .fxt-form-content .fxt-switcher-text:hover {
  color: #06339e;
}
.fxt-template-layout31 .fxt-form-content .fxt-switcher-text:focus {
  outline: none;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 30px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box {
  margin-bottom: 5px;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box label {
  color: #adadad;
  margin-bottom: 0;
  font-size: 16px;
  position: relative;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box label:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 5px;
  left: 0;
  right: 0;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-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;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box label:after {
  position: absolute;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box input[type="checkbox"] {
  display: none;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 0;
  right: 0;
  top: 5px;
  width: 16px;
  text-align: center;
}
.fxt-template-layout31 .fxt-form-content .fxt-checkbox-box input[type="checkbox"]:checked + label::before {
  background-color: #1b53d4;
  border-color: #1b53d4;
}
.fxt-template-layout31 .fxt-form-content .fxt-otp-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.fxt-template-layout31 .fxt-form-content .fxt-otp-row .fxt-otp-col {
  padding: 10px 5px;
  text-align: center;
  margin-right: 30px;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.fxt-template-layout31 .fxt-form-content .fxt-otp-row .fxt-otp-col:last-child {
  margin-right: 0;
}
.fxt-template-layout31 .fxt-form-content .fxt-otp-btn {
  margin-bottom: 30px;
}
.fxt-template-layout31 .fxt-shape.fxt-animation-active {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.loaded.fxt-template-layout31 .fxt-shape.fxt-animation-active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}