/**************************************

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: 1.0 

======================================  
        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


**************************************/
/*=======================================================================
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: flex;
  align-items: center;
  justify-content: space-between;
  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;
  }
}
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0;
  overflow-x: hidden;
  transition: all 0.3s ease-in-out;
}
.fxt-template-animation .fxt-transformY-50 {
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}
.loaded.fxt-template-animation {
  opacity: 1;
}
.loaded.fxt-template-animation .fxt-transformY-50 {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  transition: all 1s ease-in-out;
}
.loaded.fxt-template-animation .fxt-transition-delay-1 {
  transition-delay: 0.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-2 {
  transition-delay: 0.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-3 {
  transition-delay: 0.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-4 {
  transition-delay: 0.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-5 {
  transition-delay: 0.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-6 {
  transition-delay: 0.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-7 {
  transition-delay: 0.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-8 {
  transition-delay: 0.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-9 {
  transition-delay: 0.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-10 {
  transition-delay: 1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-11 {
  transition-delay: 1.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-12 {
  transition-delay: 1.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-13 {
  transition-delay: 1.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-14 {
  transition-delay: 1.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-15 {
  transition-delay: 1.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-16 {
  transition-delay: 1.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-17 {
  transition-delay: 1.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-18 {
  transition-delay: 1.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-19 {
  transition-delay: 1.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-20 {
  transition-delay: 2s;
}
/*========================================================================
4. Demo Layout One
=========================================================================*/
.fxt-template-layout1 .fxt-bg-color {
  background-color: #ffffff;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 30px 42px;
}
.fxt-template-layout1 .fxt-bg-img {
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fxt-template-layout1 .fxt-content {
  max-width: 450px;
  width: 100%;
}
.fxt-template-layout1 .fxt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 130px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout1 .fxt-header {
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout1 .fxt-header {
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout1 .fxt-header {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout1 .fxt-header {
    display: block;
  }
}
.fxt-template-layout1 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 30px;
}
.fxt-template-layout1 .fxt-header .fxt-page-switcher {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}
.fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1 {
  color: #111111;
  font-size: 18px;
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid #9f9f9f;
  line-height: 1;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1 {
    margin-right: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1 {
    margin-right: 15px;
    padding-right: 10px;
    font-size: 16px;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1 {
    margin-right: 10px;
    padding-right: 5px;
  }
}
.fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
.fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1:hover {
  color: #000000;
}
.fxt-template-layout1 .fxt-header .fxt-page-switcher .switcher-text1.active {
  color: #B69D74;
}
.fxt-template-layout1 .fxt-form {
  margin-bottom: 40px;
}
.fxt-template-layout1 .fxt-form h2 {
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout1 .fxt-form p {
  margin-bottom: 30px;
  font-size: 17px;
}
.fxt-template-layout1 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout1 .fxt-form .form-group i {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.fxt-template-layout1 .fxt-form .form-group [class^="flaticon-"]:before,
.fxt-template-layout1 .fxt-form .form-group [class*=" flaticon-"]:before,
.fxt-template-layout1 .fxt-form .form-group [class^="flaticon-"]:after,
.fxt-template-layout1 .fxt-form .form-group [class*=" flaticon-"]:after {
  margin-left: 0;
  font-size: 17px;
  color: #a1a1a1;
}
.fxt-template-layout1 .fxt-form .form-control {
  min-height: 40px;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 30px 10px 0;
  color: #111111;
}
.fxt-template-layout1 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout1 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout1 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout1 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout1 .fxt-btn-fill {
  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #B69D74;
  padding: 10px 36px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout1 .fxt-btn-fill:hover {
  background-color: #da0000;
  border-color: #da0000;
}
.fxt-template-layout1 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout1 .switcher-text2 {
  color: #9f9f9f;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout1 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout1 .switcher-text2:hover {
  color: #666;
}
.fxt-template-layout1 .switcher-text2.active {
  color: #666;
}
.fxt-template-layout1 ul.fxt-socials li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 8px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout1 ul.fxt-socials li {
    margin-right: 2px;
  }
}
.fxt-template-layout1 ul.fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout1 ul.fxt-socials li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 40px;
  width: 40px;
  color: #ffffff;
  border-radius: 50%;
  border: 1px solid;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
  border-color: #3b5998;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: transparent;
  color: #3b5998;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
  border-color: #00acee;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: transparent;
  color: #00acee;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
  border-color: #CC3333;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-google a:hover {
  background-color: transparent;
  color: #CC3333;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-instagram a {
  background-color: #3f729b;
  border-color: #3f729b;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-instagram a:hover {
  background-color: transparent;
  color: #3f729b;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-linkedin a {
  background-color: #0077B5;
  border-color: #0077B5;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-linkedin a:hover {
  background-color: transparent;
  color: #0077B5;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-youtube a {
  background-color: #c4302b;
  border-color: #c4302b;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-youtube a:hover {
  background-color: transparent;
  color: #c4302b;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-pinterest a {
  background-color: #bd081c;
  border-color: #bd081c;
}
.fxt-template-layout1 ul.fxt-socials li.fxt-pinterest a:hover {
  background-color: transparent;
  color: #bd081c;
}
.fxt-template-layout1 .fxt-footer {
  text-align: center;
}
/*========================================================================
5. Demo Layout Two
=========================================================================*/
.fxt-template-layout2 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout2 {
    padding: 15px;
  }
}
.fxt-template-layout2 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.fxt-template-layout2 .fxt-bg-color {
  background-color: #ffffff;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  padding: 0;
}
.fxt-template-layout2 .fxt-bg-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.fxt-template-layout2 .fxt-content {
  padding: 100px 65px 70px 80px;
  width: 100%;
  box-shadow: 3px 0 79px 0 rgba(0, 0, 0, 0.08);
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout2 .fxt-content {
    padding: 100px 35px 70px 50px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout2 .fxt-content {
    padding: 100px 70px 70px 70px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout2 .fxt-content {
    padding: 80px 50px 50px 50px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout2 .fxt-content {
    padding: 60px 30px 30px 30px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout2 .fxt-content {
    padding: 50px 20px 20px 20px;
  }
}
.fxt-template-layout2 .fxt-header {
  text-align: center;
}
.fxt-template-layout2 .fxt-logo {
  display: block;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
.fxt-template-layout2 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout2 .fxt-form .form-group i {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.fxt-template-layout2 .fxt-form .form-group [class^="flaticon-"]:before,
.fxt-template-layout2 .fxt-form .form-group [class*=" flaticon-"]:before,
.fxt-template-layout2 .fxt-form .form-group [class^="flaticon-"]:after,
.fxt-template-layout2 .fxt-form .form-group [class*=" flaticon-"]:after {
  margin-left: 0;
  font-size: 17px;
  color: #a1a1a1;
}
.fxt-template-layout2 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  padding: 10px 15px;
  color: #111111;
}
.fxt-template-layout2 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout2 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout2 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout2 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout2 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #B69D74;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout2 .fxt-btn-fill:hover {
  background-color: #da0000;
  border-color: #da0000;
}
.fxt-template-layout2 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout2 .switcher-text {
  color: #63bbff;
  font-size: 15px;
  margin-left: 3px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout2 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout2 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout2 .switcher-text.active {
  color: #666;
}
.fxt-template-layout2 .fxt-style-line {
  overflow: hidden;
  text-align: center;
}
.fxt-template-layout2 .fxt-style-line h2 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 20px;
  color: #a4a4a4;
  display: inline-block;
  position: relative;
  padding: 0 25px;
  z-index: 1;
}
.fxt-template-layout2 .fxt-style-line h2:before {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout2 .fxt-style-line h2:after {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout2 ul.fxt-socials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 20px;
}
.fxt-template-layout2 ul.fxt-socials li {
  max-width: 100%;
  flex: 0 0 33.33333%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout2 ul.fxt-socials li {
    flex: 0 0 50%;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout2 ul.fxt-socials li {
    flex: 0 0 100%;
  }
}
.fxt-template-layout2 ul.fxt-socials li a {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  height: 45px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout2 ul.fxt-socials li a i {
  border-radius: 2px 0 0 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}
.fxt-template-layout2 ul.fxt-socials li a span {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex: 1;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-facebook a i {
  background-color: #4867aa;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: #5676bb;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-twitter a i {
  background-color: #33ccff;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: #3dc5f3;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-google a i {
  background-color: #db4437;
}
.fxt-template-layout2 ul.fxt-socials li.fxt-google a:hover {
  background-color: #e75042;
}
.fxt-template-layout2 .checkbox {
  padding-left: 5px;
}
.fxt-template-layout2 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout2 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout2 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout2 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout2 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout2 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #B69D74;
  border-color: #B69D74;
}
.fxt-template-layout2 .fxt-footer {
  text-align: center;
}
/*========================================================================
6. Demo Layout Three
=========================================================================*/
.fxt-template-layout3 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  z-index: 1;
  padding: 15px;
}
.fxt-template-layout3:before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(4, 4, 14, 0.4);
  left: 0;
  top: 0;
  position: absolute;
  z-index: 0;
}
.fxt-template-layout3 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.fxt-template-layout3 .fxt-bg-color {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  padding: 0;
}
.fxt-template-layout3 .fxt-bg-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.fxt-template-layout3 .fxt-content {
  padding: 65px 90px 45px;
  width: 100%;
  background-color: #fff;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout3 .fxt-content {
    padding: 65px 70px 45px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout3 .fxt-content {
    padding: 50px 30px 30px;
  }
}
.fxt-template-layout3 .fxt-header {
  padding: 30px 30px 30px 0;
}
.fxt-template-layout3 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 50px;
}
.fxt-template-layout3 .fxt-header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}
.fxt-template-layout3 .fxt-header p {
  color: #fff;
}
.fxt-template-layout3 .fxt-form h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout3 .fxt-form p {
  font-size: 18px;
  color: #111111;
  text-align: center;
}
.fxt-template-layout3 .fxt-form form {
  margin-top: 40px;
}
.fxt-template-layout3 .fxt-form form .input-label {
  color: #979696;
}
.fxt-template-layout3 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout3 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 18px;
  padding: 0 5px;
  color: #c5c5c5;
  font-size: 14px;
}
.fxt-template-layout3 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout3 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  padding: 10px 15px;
  color: #111111;
}
.fxt-template-layout3 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout3 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout3 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout3 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout3 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #5a8dee;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout3 .fxt-btn-fill:hover {
  background-color: #4b7cda;
  border-color: #4b7cda;
}
.fxt-template-layout3 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout3 .switcher-text {
  color: #55d1ff;
  font-size: 15px;
  margin-left: 3px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout3 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout3 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout3 .switcher-text.active {
  color: #666;
}
.fxt-template-layout3 .fxt-style-line {
  overflow: hidden;
  text-align: center;
}
.fxt-template-layout3 .fxt-style-line h3 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 20px;
  color: #a4a4a4;
  display: inline-block;
  position: relative;
  padding: 0 25px;
  z-index: 1;
}
.fxt-template-layout3 .fxt-style-line h3:before {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout3 .fxt-style-line h3:after {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout3 ul.fxt-socials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 20px;
}
.fxt-template-layout3 ul.fxt-socials li {
  display: inline-block;
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout3 ul.fxt-socials li {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.fxt-template-layout3 ul.fxt-socials li a {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 45px;
  width: 100%;
  color: #ffffff;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout3 ul.fxt-socials li a:before {
  content: "";
  width: 0;
  right: 0;
  left: inherit;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout3 ul.fxt-socials li a:hover:before {
  width: 100%;
  left: 0;
  right: inherit;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-facebook a:before {
  background-color: #5676bb;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-twitter a:before {
  background-color: #3dc5f3;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-google a:before {
  background-color: #e75042;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-linkedin a {
  background-color: #0077B5;
}
.fxt-template-layout3 ul.fxt-socials li.fxt-linkedin a:before {
  background-color: #006da6;
}
.fxt-template-layout3 .checkbox {
  padding-left: 5px;
}
.fxt-template-layout3 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout3 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout3 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout3 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout3 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout3 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #5a8dee;
  border-color: #5a8dee;
}
.fxt-template-layout3 .fxt-footer {
  text-align: center;
}
/*========================================================================
7. Demo Layout Four
=========================================================================*/
.fxt-template-layout4 {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.fxt-template-layout4:before {
  position: absolute;
  z-index: 0;
  background-color: #01cc66;
  content: "";
  min-height: 100%;
  width: 35vw;
  top: 0;
  left: 0;
}
.fxt-template-layout4 .fxt-bg-wrap {
  padding: 8vh 0 8vh 16vw;
  min-height: 100vh;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout4 .fxt-bg-wrap {
    padding: 8vh 0 8vh 10vw;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout4 .fxt-bg-wrap {
    padding: 6vh 0 6vh 6vw;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout4 .fxt-bg-wrap {
    padding: 5vh 4vw;
  }
}
.fxt-template-layout4 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout4 .fxt-bg-color {
  background-color: #ffffff;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 45px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout4 .fxt-bg-color {
    padding: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout4 .fxt-bg-color {
    min-height: 100%;
    padding: 20px 30px;
    justify-content: center;
  }
}
.fxt-template-layout4 .fxt-bg-img {
  padding: 40px 50px;
  min-height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout4 .fxt-bg-img {
    padding: 30px 20px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout4 .fxt-bg-img {
    padding: 30px;
  }
}
.fxt-template-layout4 .fxt-bg-img:before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(2, 2, 3, 0.6);
  left: 0;
  top: 0;
  position: absolute;
  z-index: 0;
}
.fxt-template-layout4 .fxt-bg-img:after {
  content: "";
  right: 0;
  top: 20%;
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 20px solid #fff;
  border-bottom: 15px solid transparent;
}
.fxt-template-layout4 .fxt-header {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  text-align: center;
}
.fxt-template-layout4 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
.fxt-template-layout4 .fxt-header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout4 .fxt-header h1 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout4 .fxt-header h1 {
    font-size: 28px;
  }
}
.fxt-template-layout4 .fxt-header p {
  color: #fff;
}
.fxt-template-layout4 .fxt-content {
  padding: 30px;
  max-width: 460px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout4 .fxt-content {
    padding: 0;
  }
}
.fxt-template-layout4 .fxt-form {
  margin-top: 30px;
}
.fxt-template-layout4 .fxt-form h2 {
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout4 .fxt-form p {
  margin-bottom: 30px;
  font-size: 17px;
}
.fxt-template-layout4 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout4 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 18px;
  padding: 0 5px;
  color: #c5c5c5;
  font-size: 14px;
}
.fxt-template-layout4 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout4 .fxt-form .form-control {
  min-height: 40px;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 30px 10px 0;
  color: #111;
}
.fxt-template-layout4 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout4 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout4 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout4 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout4 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #01cc66;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout4 .fxt-btn-fill:hover {
  background-color: #01b058;
  border-color: #01b058;
}
.fxt-template-layout4 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout4 ul.fxt-socials {
  text-align: center;
}
.fxt-template-layout4 ul.fxt-socials li {
  display: inline-block;
  margin-right: 4px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout4 ul.fxt-socials li {
    margin-right: 2px;
  }
}
.fxt-template-layout4 ul.fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout4 ul.fxt-socials li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 40px;
  width: 40px;
  color: #ffffff;
  border-radius: 50%;
  border: 1px solid;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
  border-color: #3b5998;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: transparent;
  color: #3b5998;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
  border-color: #00acee;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: transparent;
  color: #00acee;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
  border-color: #CC3333;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-google a:hover {
  background-color: transparent;
  color: #CC3333;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-instagram a {
  background-color: #3f729b;
  border-color: #3f729b;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-instagram a:hover {
  background-color: transparent;
  color: #3f729b;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-linkedin a {
  background-color: #0077B5;
  border-color: #0077B5;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-linkedin a:hover {
  background-color: transparent;
  color: #0077B5;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-youtube a {
  background-color: #c4302b;
  border-color: #c4302b;
}
.fxt-template-layout4 ul.fxt-socials li.fxt-youtube a:hover {
  background-color: transparent;
  color: #c4302b;
}
.fxt-template-layout4 .switcher-text {
  color: #55d1ff;
  font-size: 15px;
  margin-left: 3px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout4 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout4 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout4 .switcher-text.active {
  color: #666;
}
.fxt-template-layout4 .checkbox {
  padding-left: 5px;
}
.fxt-template-layout4 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout4 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout4 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout4 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout4 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout4 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #01cc66;
  border-color: #01cc66;
}
.fxt-template-layout4 .fxt-footer {
  text-align: center;
}
/*========================================================================
8. Demo Layout Five
=========================================================================*/
.fxt-template-layout5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fxt-template-layout5 .fxt-intro {
  max-width: 500px;
  width: 100%;
  padding: 30px;
}
.fxt-template-layout5 .fxt-intro .sub-title {
  font-weight: 300;
  font-size: 40px;
  color: #fff;
  line-height: 1.5;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout5 .fxt-intro .sub-title {
    font-size: 30px;
  }
}
.fxt-template-layout5 .fxt-intro h1 {
  font-size: 88px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout5 .fxt-intro h1 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-intro h1 {
    font-size: 50px;
  }
}
.fxt-template-layout5 .fxt-intro p {
  color: #fff;
}
.fxt-template-layout5 .fxt-content-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fxt-template-layout5 .fxt-bg-color {
  position: relative;
  max-width: 530px;
  background-color: #ffffff;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}
.fxt-template-layout5 .fxt-bg-img {
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fxt-template-layout5 .fxt-header {
  text-align: center;
}
.fxt-template-layout5 .fxt-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-bottom: 40px;
}
.fxt-template-layout5 .fxt-form h2 {
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout5 .fxt-form p {
  margin-bottom: 30px;
  font-size: 17px;
}
.fxt-template-layout5 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout5 .fxt-form .form-group i {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.fxt-template-layout5 .fxt-form .form-group [class^="flaticon-"]:before,
.fxt-template-layout5 .fxt-form .form-group [class*=" flaticon-"]:before,
.fxt-template-layout5 .fxt-form .form-group [class^="flaticon-"]:after,
.fxt-template-layout5 .fxt-form .form-group [class*=" flaticon-"]:after {
  margin-left: 0;
  font-size: 17px;
  color: #a1a1a1;
}
.fxt-template-layout5 .fxt-form .form-control {
  min-height: 40px;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 10px 10px 30px;
  color: #111111;
}
.fxt-template-layout5 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout5 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout5 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout5 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout5 .fxt-logo {
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-logo {
    margin-top: 30px;
  }
}
.fxt-template-layout5 .fxt-page-switcher {
  position: absolute;
  left: -97px;
  top: 100px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-page-switcher {
    position: inherit;
    left: inherit;
    top: inherit;
    flex-direction: inherit;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.fxt-template-layout5 .fxt-page-switcher .switcher-text {
  color: #fff;
  font-size: 18px;
  padding: 10px 30px 10px 20px;
  border-radius: 45px 0 0 45px;
  max-width: 100px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout5 .fxt-page-switcher .switcher-text.active {
  color: #000;
  background-color: #fff;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text1,
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text2 {
    background-color: #eaeaea;
    color: #000;
    padding: 6px 30px 6px 20px;
    font-size: 16px;
  }
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text1.active,
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text2.active {
    color: #0e9d88;
    background-color: #e4e4e4;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text1 {
    border-radius: 45px 0 0 45px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-page-switcher .switcher-text.switcher-text2 {
    border-radius: 0 45px 45px 0;
  }
}
.fxt-template-layout5 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 45px;
  background-color: #10b099;
  padding: 10px 36px;
  margin-bottom: 10px;
  margin-right: 10px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout5 .fxt-btn-fill:hover {
  background-color: #0e9d88;
  border-color: #0e9d88;
}
.fxt-template-layout5 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout5 .switcher-text3 {
  position: absolute;
  right: 0;
  top: 0;
  padding: 2px 0;
  color: #9f9f9f;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout5 .switcher-text3:last-child {
  margin-right: 0;
}
.fxt-template-layout5 .switcher-text3:hover {
  color: #666;
}
.fxt-template-layout5 .switcher-text3.active {
  color: #666;
}
.fxt-template-layout5 ul.fxt-socials {
  text-align: center;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 ul.fxt-socials {
    margin-bottom: 10px;
  }
}
.fxt-template-layout5 ul.fxt-socials li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 ul.fxt-socials li {
    margin-right: 2px;
  }
}
.fxt-template-layout5 ul.fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout5 ul.fxt-socials li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 40px;
  width: 40px;
  color: #ffffff;
  border-radius: 50%;
  border: 1px solid;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
  border-color: #3b5998;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: transparent;
  color: #3b5998;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
  border-color: #00acee;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: transparent;
  color: #00acee;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
  border-color: #CC3333;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-google a:hover {
  background-color: transparent;
  color: #CC3333;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-instagram a {
  background-color: #3f729b;
  border-color: #3f729b;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-instagram a:hover {
  background-color: transparent;
  color: #3f729b;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-linkedin a {
  background-color: #0077B5;
  border-color: #0077B5;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-linkedin a:hover {
  background-color: transparent;
  color: #0077B5;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-pinterest a {
  background-color: #bd081c;
  border-color: #bd081c;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-pinterest a:hover {
  background-color: transparent;
  color: #bd081c;
}
.fxt-template-layout5 .checkbox {
  padding-left: 5px;
  margin-bottom: 10px;
}
.fxt-template-layout5 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout5 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout5 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout5 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout5 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout5 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #0e9d88;
  border-color: #0e9d88;
}
.fxt-template-layout5 .fxt-footer {
  text-align: center;
}
/*========================================================================
9. Demo Layout Six
=========================================================================*/
.fxt-template-layout6 {
  padding: 30px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.fxt-template-layout6:before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.15);
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
}
.fxt-template-layout6 .fxt-content-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fxt-template-layout6 .fxt-content {
  max-width: 660px;
  width: 100%;
  background-color: #fff;
  padding: 90px 80px 70px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout6 .fxt-content {
    padding: 90px 70px 70px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout6 .fxt-content {
    padding: 70px 50px 50px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout6 .fxt-content {
    padding: 50px 30px 30px;
  }
}
.fxt-template-layout6 .fxt-header {
  background-color: transparent;
  margin-bottom: 30px;
}
.fxt-template-layout6 .fxt-header .fxt-logo {
  display: block;
}
.fxt-template-layout6 .fxt-form {
  margin-bottom: 40px;
}
.fxt-template-layout6 .fxt-form h2 {
  font-weight: 700;
  margin-bottom: 30px;
}
.fxt-template-layout6 .fxt-form p {
  margin-bottom: 30px;
  font-size: 17px;
}
.fxt-template-layout6 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout6 .fxt-form .form-group i {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.fxt-template-layout6 .fxt-form .form-group [class^="flaticon-"]:before,
.fxt-template-layout6 .fxt-form .form-group [class*=" flaticon-"]:before,
.fxt-template-layout6 .fxt-form .form-group [class^="flaticon-"]:after,
.fxt-template-layout6 .fxt-form .form-group [class*=" flaticon-"]:after {
  margin-left: 0;
  font-size: 17px;
  color: #a1a1a1;
}
.fxt-template-layout6 .fxt-form .form-control {
  background-color: #f6f6f6;
  min-height: 50px;
  box-shadow: none;
  border: 0;
  padding: 10px 30px;
  color: #111111;
}
.fxt-template-layout6 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout6 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout6 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout6 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout6 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #ff5e13;
  padding: 10px 36px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout6 .fxt-btn-fill:hover {
  background-color: #f0530b;
  border-color: #f0530b;
}
.fxt-template-layout6 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout6 .switcher-text {
  color: #9f9f9f;
  font-size: 16px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout6 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout6 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout6 .switcher-text.active {
  color: #666;
}
.fxt-template-layout6 .switcher-text2 {
  color: #353535;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 2px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout6 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout6 .switcher-text2:hover {
  color: #000;
}
.fxt-template-layout6 .switcher-text2.active {
  color: #000;
}
.fxt-template-layout6 ul.fxt-socials {
  margin-right: 15px;
  margin-bottom: 15px;
}
.fxt-template-layout6 ul.fxt-socials li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout6 ul.fxt-socials li {
    margin-right: 2px;
  }
}
.fxt-template-layout6 ul.fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout6 ul.fxt-socials li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 40px;
  width: 40px;
  color: #ffffff;
  border-radius: 50%;
  border: 1px solid;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
  border-color: #3b5998;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: transparent;
  color: #3b5998;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
  border-color: #00acee;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: transparent;
  color: #00acee;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
  border-color: #CC3333;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-google a:hover {
  background-color: transparent;
  color: #CC3333;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-instagram a {
  background-color: #3f729b;
  border-color: #3f729b;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-instagram a:hover {
  background-color: transparent;
  color: #3f729b;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-linkedin a {
  background-color: #0077B5;
  border-color: #0077B5;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-linkedin a:hover {
  background-color: transparent;
  color: #0077B5;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-youtube a {
  background-color: #c4302b;
  border-color: #c4302b;
}
.fxt-template-layout6 ul.fxt-socials li.fxt-youtube a:hover {
  background-color: transparent;
  color: #c4302b;
}
.fxt-template-layout6 .fxt-footer {
  background-color: #fff;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.fxt-template-layout6 .fxt-footer p {
  color: #747474;
}
/*========================================================================
10. Demo Layout Seven
=========================================================================*/
.fxt-template-layout7 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
.fxt-template-layout7 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout7 .fxt-bg-color {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  padding: 0;
  box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.07);
}
.fxt-template-layout7 .fxt-bg-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.fxt-template-layout7 .fxt-content {
  padding: 65px 90px 45px;
  width: 100%;
  background-color: #fff;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout7 .fxt-content {
    padding: 65px 30px 45px;
  }
}
.fxt-template-layout7 .fxt-header {
  text-align: center;
  margin-bottom: 50px;
}
.fxt-template-layout7 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 7px;
}
.fxt-template-layout7 .fxt-header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}
.fxt-template-layout7 .fxt-header p {
  color: #999898;
}
.fxt-template-layout7 .fxt-form h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout7 .fxt-form p {
  font-size: 18px;
  color: #111111;
  text-align: center;
}
.fxt-template-layout7 .fxt-form form .input-label {
  color: #979696;
}
.fxt-template-layout7 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout7 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 19px;
  bottom: 18px;
  font-size: 14px;
  color: #a1a1a1;
}
.fxt-template-layout7 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout7 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  padding: 10px 15px;
  color: #111;
}
.fxt-template-layout7 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout7 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout7 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout7 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout7 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #2e4bf1;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout7 .fxt-btn-fill:hover {
  background-color: #4b7cda;
  border-color: #4b7cda;
}
.fxt-template-layout7 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout7 .switcher-text {
  color: #9f9f9f;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout7 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout7 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout7 .switcher-text.active {
  color: #666;
}
.fxt-template-layout7 .switcher-text2 {
  color: #353535;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 2px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout7 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout7 .switcher-text2:hover {
  color: #000;
}
.fxt-template-layout7 .switcher-text2.active {
  color: #000;
}
.fxt-template-layout7 .fxt-style-line {
  overflow: hidden;
  text-align: center;
}
.fxt-template-layout7 .fxt-style-line h3 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 20px;
  color: #a4a4a4;
  display: inline-block;
  position: relative;
  padding: 0 25px;
  z-index: 1;
}
.fxt-template-layout7 .fxt-style-line h3:before {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout7 .fxt-style-line h3:after {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout7 ul.fxt-socials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 20px;
}
.fxt-template-layout7 ul.fxt-socials li {
  max-width: 100%;
  flex: 0 0 33.33333%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout7 ul.fxt-socials li {
    flex: 0 0 50%;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout7 ul.fxt-socials li {
    flex: 0 0 100%;
  }
}
.fxt-template-layout7 ul.fxt-socials li a {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  height: 45px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout7 ul.fxt-socials li a i {
  border-radius: 2px 0 0 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}
.fxt-template-layout7 ul.fxt-socials li a span {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex: 1;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-facebook a i {
  background-color: #4867aa;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: #5676bb;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-twitter a i {
  background-color: #33ccff;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: #3dc5f3;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-google a i {
  background-color: #db4437;
}
.fxt-template-layout7 ul.fxt-socials li.fxt-google a:hover {
  background-color: #e75042;
}
.fxt-template-layout7 .checkbox {
  padding-left: 5px;
}
.fxt-template-layout7 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout7 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout7 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout7 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout7 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout7 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #2e4bf1;
  border-color: #2e4bf1;
}
.fxt-template-layout7 .fxt-footer {
  text-align: center;
}
.fxt-template-layout7 .fxt-footer p {
  color: #999898;
}
/*========================================================================
11. Demo Layout Eight
=========================================================================*/
.fxt-template-layout8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  z-index: 1;
  padding: 50px 30px 20px;
}
.fxt-template-layout8:before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
}
.fxt-template-layout8 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout8 .fxt-content {
  max-width: 460px;
  width: 100%;
}
.fxt-template-layout8 .fxt-header {
  text-align: center;
  margin-bottom: 50px;
}
.fxt-template-layout8 .fxt-logo {
  display: block;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout8 .fxt-logo {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout8 .fxt-logo {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout8 .fxt-logo {
    margin-bottom: 40px;
  }
}
.fxt-template-layout8 .fxt-form p {
  font-size: 20px;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout8 .fxt-form p {
    text-align: center;
  }
}
.fxt-template-layout8 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout8 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 19px;
  bottom: 18px;
  font-size: 14px;
  color: #bebebe;
}
.fxt-template-layout8 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout8 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #8385bf;
  padding: 10px 15px;
  background-color: transparent;
  color: #fff;
}
.fxt-template-layout8 .fxt-form input::-webkit-input-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout8 .fxt-form input::-moz-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout8 .fxt-form input:-moz-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout8 .fxt-form input:-ms-input-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout8 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #1fbe66;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout8 .fxt-btn-fill:hover {
  background-color: #17a156;
  border-color: #17a156;
}
.fxt-template-layout8 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout8 .switcher-text {
  color: #b6b6b6;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout8 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout8 .switcher-text:hover {
  color: #e6e6e6;
}
.fxt-template-layout8 .switcher-text2 {
  color: #d4d4d4;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 2px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout8 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout8 .switcher-text2:hover {
  color: #e6e6e6;
}
.fxt-template-layout8 .fxt-style-line {
  overflow: hidden;
  text-align: center;
}
.fxt-template-layout8 .fxt-style-line h3 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 20px;
  color: #a4a4a4;
  display: inline-block;
  position: relative;
  padding: 0 25px;
  z-index: 1;
}
.fxt-template-layout8 .fxt-style-line h3:before {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #a4a4a4;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout8 .fxt-style-line h3:after {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #a4a4a4;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout8 ul.fxt-socials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 20px;
}
.fxt-template-layout8 ul.fxt-socials li {
  max-width: 100%;
  flex: 0 0 33.33333%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout8 ul.fxt-socials li {
    flex: 0 0 50%;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout8 ul.fxt-socials li {
    flex: 0 0 100%;
  }
}
.fxt-template-layout8 ul.fxt-socials li a {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  height: 45px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout8 ul.fxt-socials li a i {
  border-radius: 2px 0 0 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}
.fxt-template-layout8 ul.fxt-socials li a span {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex: 1;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-facebook a i {
  background-color: #4867aa;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: #5676bb;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-twitter a i {
  background-color: #33ccff;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: #3dc5f3;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-google a i {
  background-color: #db4437;
}
.fxt-template-layout8 ul.fxt-socials li.fxt-google a:hover {
  background-color: #e75042;
}
.fxt-template-layout8 .checkbox {
  padding-left: 5px;
  margin-right: 30px;
}
.fxt-template-layout8 .checkbox label {
  padding-left: 20px;
  color: #b9b9b9;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout8 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 2px;
  background-color: transparent;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout8 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout8 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout8 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout8 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #1fbe66;
  border-color: #1fbe66;
}
.fxt-template-layout8 .fxt-footer {
  text-align: center;
}
.fxt-template-layout8 .fxt-footer p {
  color: #b6b6b6;
}
/*========================================================================
12. Demo Layout Nine
=========================================================================*/
.fxt-template-layout9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
  min-height: 100vh;
  z-index: 1;
  padding: 50px 0 20px;
}
.fxt-template-layout9:before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
}
.fxt-template-layout9 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout9 .fxt-content {
  padding-top: 40px;
  padding-bottom: 15px;
  padding-left: 70px;
  margin-left: 40px;
  border-left: 2px solid rgba(111, 117, 182, 0.5);
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout9 .fxt-content {
    padding-left: 0;
    margin-left: 0;
    margin-top: 40px;
    border-left: 0;
    padding-bottom: 0;
    border-top: 2px solid rgba(111, 117, 182, 0.5);
  }
}
.fxt-template-layout9 .fxt-content h2 {
  font-size: 20px;
  color: #fff;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout9 .fxt-content h2 {
    text-align: center;
  }
}
.fxt-template-layout9 .fxt-header {
  text-align: center;
}
.fxt-template-layout9 .fxt-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 40vw;
}
.fxt-template-layout9 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout9 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 19px;
  bottom: 18px;
  font-size: 14px;
  color: #bebebe;
}
.fxt-template-layout9 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout9 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #8385bf;
  padding: 10px 15px;
  background-color: transparent;
  color: #fff;
}
.fxt-template-layout9 .fxt-form input::-webkit-input-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout9 .fxt-form input::-moz-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout9 .fxt-form input:-moz-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout9 .fxt-form input:-ms-input-placeholder {
  color: #bebebe;
  font-size: 18px;
  font-weight: 300;
}
.fxt-template-layout9 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #ffbd3f;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout9 .fxt-btn-fill:hover {
  background-color: #db9e2d;
  border-color: #db9e2d;
}
.fxt-template-layout9 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout9 .switcher-text {
  color: #b6b6b6;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout9 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout9 .switcher-text:hover {
  color: #e6e6e6;
}
.fxt-template-layout9 .switcher-text2 {
  color: #d4d4d4;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 2px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout9 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout9 .switcher-text2:hover {
  color: #e6e6e6;
}
.fxt-template-layout9 .checkbox {
  padding-left: 5px;
  margin-right: 10px;
}
.fxt-template-layout9 .checkbox label {
  padding-left: 20px;
  color: #b9b9b9;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout9 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 2px;
  background-color: transparent;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout9 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout9 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout9 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout9 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #ffbd3f;
  border-color: #ffbd3f;
}
.fxt-template-layout9 .fxt-footer {
  text-align: center;
}
.fxt-template-layout9 .fxt-footer p {
  color: #b6b6b6;
}
/*========================================================================
13. Demo Layout Ten
=========================================================================*/
.fxt-template-layout10 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout10 .fxt-bg-color {
  background-color: #ffffff;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
}
.fxt-template-layout10 .fxt-bg-img {
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.fxt-template-layout10 .fxt-content {
  max-width: 450px;
  width: 100%;
}
.fxt-template-layout10 .fxt-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.fxt-template-layout10 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 30px;
}
.fxt-template-layout10 .fxt-header h1 {
  color: #fff;
}
.fxt-template-layout10 .fxt-header p {
  color: #fff;
}
.fxt-template-layout10 .fxt-form {
  flex: 1;
  margin-bottom: 40px;
}
.fxt-template-layout10 .fxt-form h2 {
  font-weight: 500;
  margin-bottom: 80px;
  font-size: 24px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout10 .fxt-form h2 {
    font-size: 22px;
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout10 .fxt-form h2 {
    font-size: 20px;
    margin-bottom: 40px;
  }
}
.fxt-template-layout10 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout10 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 8px;
  top: 50%;
  color: #9f9f9f;
  font-size: 14px;
  transform: translateY(-50%);
}
.fxt-template-layout10 .fxt-form .form-group .field-icon:before {
  padding: 12px 0 12px 10px;
}
.fxt-template-layout10 .fxt-form .form-control {
  min-height: 40px;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 30px 10px 0;
  color: #111;
}
.fxt-template-layout10 .fxt-form input::-webkit-input-placeholder {
  color: #999999;
  font-size: 18px;
  font-weight: 300;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout10 .fxt-form input::-webkit-input-placeholder {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout10 .fxt-form input::-webkit-input-placeholder {
    font-size: 16px;
  }
}
.fxt-template-layout10 .fxt-form input::-moz-placeholder {
  color: #999999;
  font-size: 18px;
  font-weight: 300;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout10 .fxt-form input::-moz-placeholder {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout10 .fxt-form input::-moz-placeholder {
    font-size: 16px;
  }
}
.fxt-template-layout10 .fxt-form input:-moz-placeholder {
  color: #999999;
  font-size: 18px;
  font-weight: 300;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout10 .fxt-form input:-moz-placeholder {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout10 .fxt-form input:-moz-placeholder {
    font-size: 16px;
  }
}
.fxt-template-layout10 .fxt-form input:-ms-input-placeholder {
  color: #999999;
  font-size: 18px;
  font-weight: 300;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout10 .fxt-form input:-ms-input-placeholder {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout10 .fxt-form input:-ms-input-placeholder {
    font-size: 16px;
  }
}
.fxt-template-layout10 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #ffbd3f;
  padding: 10px 36px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout10 .fxt-btn-fill:hover {
  background-color: #eba627;
}
.fxt-template-layout10 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout10 .fxt-btn-ghost {
  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 3px;
  background-color: transparent;
  padding: 10px 36px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout10 .fxt-btn-ghost:hover {
  background-color: #fff;
  border-color: #fff;
  color: #ffbd3f;
}
.fxt-template-layout10 .fxt-btn-ghost:focus {
  outline: none;
}
.fxt-template-layout10 .switcher-text2 {
  color: #9f9f9f;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout10 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout10 .switcher-text2:hover {
  color: #666;
}
.fxt-template-layout10 .switcher-text2.active {
  color: #666;
}
.fxt-template-layout10 .checkbox {
  padding-left: 5px;
  margin-right: 10px;
}
.fxt-template-layout10 .checkbox label {
  padding-left: 20px;
  color: #9f9f9f;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout10 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 2px;
  background-color: transparent;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout10 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout10 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout10 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout10 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #ffbd3f;
  border-color: #ffbd3f;
}
.fxt-template-layout10 ul.fxt-socials li {
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout10 ul.fxt-socials li {
    margin-right: 2px;
  }
}
.fxt-template-layout10 ul.fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout10 ul.fxt-socials li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 14px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid;
  border-color: #dadada;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-facebook a {
  color: #3b5998;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-facebook a:hover {
  border-color: #3b5998;
  background-color: #3b5998;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-twitter a {
  color: #00acee;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-twitter a:hover {
  border-color: #00acee;
  background-color: #00acee;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-google a {
  color: #CC3333;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-google a:hover {
  border-color: #CC3333;
  background-color: #CC3333;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-instagram a {
  color: #3f729b;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-instagram a:hover {
  border-color: #3f729b;
  background-color: #3f729b;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-linkedin a {
  color: #0077B5;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-linkedin a:hover {
  border-color: #0077B5;
  background-color: #0077B5;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-youtube a {
  color: #c4302b;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-youtube a:hover {
  border-color: #c4302b;
  background-color: #c4302b;
  color: #fff;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-pinterest a {
  color: #bd081c;
}
.fxt-template-layout10 ul.fxt-socials li.fxt-pinterest a:hover {
  border-color: #bd081c;
  background-color: #bd081c;
  color: #fff;
}
.fxt-template-layout10 .fxt-footer {
  margin-top: 50px;
  text-align: center;
}
/*========================================================================
14. Demo Layout Eleven
=========================================================================*/
.fxt-template-layout11 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
}
.fxt-template-layout11 .fxt-checkbox-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.fxt-template-layout11 .fxt-bg-color {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  padding: 0;
  box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.07);
}
.fxt-template-layout11 .fxt-bg-img {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.fxt-template-layout11 .fxt-content {
  padding: 65px 90px 45px;
  width: 100%;
  background-color: #fff;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout11 .fxt-content {
    padding: 65px 30px 45px;
  }
}
.fxt-template-layout11 .fxt-header {
  text-align: center;
  margin-bottom: 50px;
}
.fxt-template-layout11 .fxt-header .fxt-logo {
  display: block;
  margin-bottom: 7px;
}
.fxt-template-layout11 .fxt-header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 10px;
}
.fxt-template-layout11 .fxt-header p {
  color: #999898;
}
.fxt-template-layout11 .fxt-form h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 5px;
}
.fxt-template-layout11 .fxt-form p {
  font-size: 18px;
  color: #111111;
  text-align: center;
}
.fxt-template-layout11 .fxt-form form .input-label {
  color: #979696;
}
.fxt-template-layout11 .fxt-form .form-group {
  position: relative;
  z-index: 1;
}
.fxt-template-layout11 .fxt-form .form-group .field-icon {
  position: absolute;
  z-index: 1;
  right: 19px;
  bottom: 18px;
  font-size: 14px;
  color: #a1a1a1;
}
.fxt-template-layout11 .fxt-form .form-group .field-icon:before {
  padding: 17px 10px;
}
.fxt-template-layout11 .fxt-form .form-control {
  min-height: 50px;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  padding: 10px 15px;
  color: #111;
}
.fxt-template-layout11 .fxt-form input::-webkit-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout11 .fxt-form input::-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout11 .fxt-form input:-moz-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout11 .fxt-form input:-ms-input-placeholder {
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 300;
}
.fxt-template-layout11 .fxt-btn-fill {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 3px;
  background-color: #111;
  padding: 10px 36px;
  margin-bottom: 10px;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout11 .fxt-btn-fill:hover {
  background-color: #333;
  border-color: #333;
}
.fxt-template-layout11 .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout11 .switcher-text {
  color: #9f9f9f;
  font-size: 15px;
  margin-top: 5px;
  display: block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout11 .switcher-text:last-child {
  margin-right: 0;
}
.fxt-template-layout11 .switcher-text:hover {
  color: #666;
}
.fxt-template-layout11 .switcher-text.active {
  color: #666;
}
.fxt-template-layout11 .switcher-text2 {
  color: #353535;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 2px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout11 .switcher-text2:last-child {
  margin-right: 0;
}
.fxt-template-layout11 .switcher-text2:hover {
  color: #000;
}
.fxt-template-layout11 .switcher-text2.active {
  color: #000;
}
.fxt-template-layout11 .fxt-style-line {
  overflow: hidden;
  text-align: center;
}
.fxt-template-layout11 .fxt-style-line h3 {
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 20px;
  color: #a4a4a4;
  display: inline-block;
  position: relative;
  padding: 0 25px;
  z-index: 1;
}
.fxt-template-layout11 .fxt-style-line h3:before {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout11 .fxt-style-line h3:after {
  display: inline-block;
  content: "";
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
}
.fxt-template-layout11 ul.fxt-socials {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: -5px;
  margin-left: -5px;
  margin-bottom: 20px;
}
.fxt-template-layout11 ul.fxt-socials li {
  max-width: 100%;
  flex: 0 0 33.33333%;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout11 ul.fxt-socials li {
    flex: 0 0 50%;
  }
}
@media only screen and (max-width: 320px) {
  .fxt-template-layout11 ul.fxt-socials li {
    flex: 0 0 100%;
  }
}
.fxt-template-layout11 ul.fxt-socials li a {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  font-size: 14px;
  height: 45px;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.fxt-template-layout11 ul.fxt-socials li a i {
  border-radius: 2px 0 0 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 45px;
  height: 45px;
}
.fxt-template-layout11 ul.fxt-socials li a span {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex: 1;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-facebook a {
  background-color: #3b5998;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-facebook a i {
  background-color: #4867aa;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-facebook a:hover {
  background-color: #5676bb;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-twitter a {
  background-color: #00acee;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-twitter a i {
  background-color: #33ccff;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-twitter a:hover {
  background-color: #3dc5f3;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-google a {
  background-color: #CC3333;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-google a i {
  background-color: #db4437;
}
.fxt-template-layout11 ul.fxt-socials li.fxt-google a:hover {
  background-color: #e75042;
}
.fxt-template-layout11 .checkbox {
  padding-left: 5px;
}
.fxt-template-layout11 .checkbox label {
  padding-left: 20px;
  color: #a4a4a4;
  margin-bottom: 0;
  font-size: 15px;
  position: relative;
}
.fxt-template-layout11 .checkbox label:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 4px;
  left: 0;
  margin-left: -5px;
  border: 1px solid;
  border-color: #dcdcdc;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-layout11 .checkbox label:after {
  position: absolute;
  margin-left: -20px;
  padding-left: 3px;
  font-size: 10px;
  color: #555555;
}
.fxt-template-layout11 .checkbox input[type="checkbox"] {
  display: none;
}
.fxt-template-layout11 .checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00c";
  font-weight: 900;
  color: #ffffff;
  left: 15px;
  top: 4px;
}
.fxt-template-layout11 .checkbox input[type="checkbox"]:checked + label::before {
  background-color: #111;
  border-color: #111;
}
.fxt-template-layout11 .fxt-footer {
  text-align: center;
}
.fxt-template-layout11 .fxt-footer p {
  color: #999898;
}