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

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.3 

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


**************************************/
/*=======================================================================
1. Typography
=========================================================================*/
html {
  height: 100%;
}
body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  height: 100%;
  line-height: 1.7;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #646464;
  background-color: #fff;
}
p {
  margin: 0 0 20px 0;
  color: #646464;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin: 0 0 20px 0;
  color: #111;
}
h1,
h2 {
  line-height: 1.2;
}
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}
h1 {
  font-size: 36px;
}
@media only screen and (max-width: 1199px) {
  h1 {
    font-size: 34px;
  }
}
@media only screen and (max-width: 991px) {
  h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 30px;
  }
}
h2 {
  font-size: 28px;
}
@media only screen and (max-width: 1199px) {
  h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 991px) {
  h2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 22px;
  }
}
h3 {
  font-size: 22px;
}
@media only screen and (max-width: 991px) {
  h3 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  h3 {
    font-size: 18px;
  }
}
h4 {
  font-size: 20px;
}
@media only screen and (max-width: 991px) {
  h4 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  h4 {
    font-size: 16px;
  }
}
h5 {
  font-size: 18px;
}
@media only screen and (max-width: 991px) {
  h5 {
    font-size: 16px;
  }
}
/*=======================================================================
2. Template Default Style
=========================================================================*/
a {
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  outline: 0 none;
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.fxt-content-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .fxt-none-767 {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-none-991 {
    display: none !important;
  }
}
/*========================================================================
3. Template Animation
=========================================================================*/
.fxt-template-animation {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-animation .fxt-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;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.loaded.fxt-template-animation .fxt-transition-delay-1 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-3 {
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-4 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-5 {
  -webkit-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-6 {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-7 {
  -webkit-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-8 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-9 {
  -webkit-transition-delay: 0.9s;
  -o-transition-delay: 0.9s;
  transition-delay: 0.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-10 {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-11 {
  -webkit-transition-delay: 1.1s;
  -o-transition-delay: 1.1s;
  transition-delay: 1.1s;
}
.loaded.fxt-template-animation .fxt-transition-delay-12 {
  -webkit-transition-delay: 1.2s;
  -o-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
.loaded.fxt-template-animation .fxt-transition-delay-13 {
  -webkit-transition-delay: 1.3s;
  -o-transition-delay: 1.3s;
  transition-delay: 1.3s;
}
.loaded.fxt-template-animation .fxt-transition-delay-14 {
  -webkit-transition-delay: 1.4s;
  -o-transition-delay: 1.4s;
  transition-delay: 1.4s;
}
.loaded.fxt-template-animation .fxt-transition-delay-15 {
  -webkit-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.loaded.fxt-template-animation .fxt-transition-delay-16 {
  -webkit-transition-delay: 1.6s;
  -o-transition-delay: 1.6s;
  transition-delay: 1.6s;
}
.loaded.fxt-template-animation .fxt-transition-delay-17 {
  -webkit-transition-delay: 1.7s;
  -o-transition-delay: 1.7s;
  transition-delay: 1.7s;
}
.loaded.fxt-template-animation .fxt-transition-delay-18 {
  -webkit-transition-delay: 1.8s;
  -o-transition-delay: 1.8s;
  transition-delay: 1.8s;
}
.loaded.fxt-template-animation .fxt-transition-delay-19 {
  -webkit-transition-delay: 1.9s;
  -o-transition-delay: 1.9s;
  transition-delay: 1.9s;
}
.loaded.fxt-template-animation .fxt-transition-delay-20 {
  -webkit-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}
/*========================================================================
8. Demo Layout Five
=========================================================================*/
.fxt-template-layout5 {
  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;
}
.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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.fxt-template-layout5 .fxt-bg-color {
  position: relative;
  max-width: 590px;
  background-color: #ffffff;
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  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: -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;
}
.fxt-template-layout5 .fxt-header {
  text-align: center;
}
.fxt-template-layout5 .fxt-form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  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%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-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;
  -webkit-box-shadow: none;
  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;
    display: contents; /*Se agrego ultimo*/
  }
}
.fxt-template-layout5 .fxt-page-switcher {
  position: absolute;
  left: -97px;
  top: 100px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-page-switcher {
    position: inherit;
    left: inherit;
    top: inherit;
    -webkit-box-orient: inherit;
    -webkit-box-direction: inherit;
    -ms-flex-direction: 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%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-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;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: 0;
  color: #fff;
  border-radius: 45px;
  background-color: #10b099;
  padding: 10px 36px;
  margin-bottom: 10px;
  margin-right: 10px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-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;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-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;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-template-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: #E1306C;
  border-color: #E1306C;
}
.fxt-template-layout5 ul.fxt-socials li.fxt-instagram a:hover {
  background-color: transparent;
  color: #E1306C;
}
.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;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.fxt-template-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;
}