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

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


**************************************/
/*=======================================================================
1. Typography
=========================================================================*/
html {
  height: 100%;
}
body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  height: 100%;
  line-height: 1.8;
  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: 'Raleway', 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: 55px;
  line-height: 76px;
}
@media only screen and (max-width: 1439px) {
  h1 {
    font-size: 46px;
    line-height: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  h1 {
    font-size: 40px;
    line-height: 62px;
  }
}
@media only screen and (max-width: 991px) {
  h1 {
    font-size: 36px;
    line-height: 56px;
  }
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 575px) {
  h1 {
    font-size: 28px;
    line-height: 44px;
  }
}
@media only screen and (max-width: 479px) {
  h1 {
    font-size: 26px;
    line-height: 40px;
  }
}
h2 {
  font-size: 26px;
}
@media only screen and (max-width: 1199px) {
  h2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 991px) {
  h2 {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 20px;
  }
}
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;
  }
}
/*=======================================================================
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;
}
.full-width.container-fluid {
  padding-left: 0;
  padding-right: 0;
}
body .wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
body.loaded .wrapper {
  opacity: 1;
  visibility: visible;
}
/*========================================================================
3. Preloader Style
=========================================================================*/
.pace.pace-inactive {
  display: none;
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2000;
  position: fixed;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pace .pace-activity {
  z-index: 100;
  position: absolute;
  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;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.pace .pace-progress {
  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;
  text-align: center;
  z-index: 2000;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important;
  -ms-transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important;
  transform: translate3d(0, 0, 0) translateY(-50%) translateX(-50%) !important;
}
.pace .pace-progress:after {
  content: "";
  animation: rotateZ 1.5s infinite linear;
  border-top: 8px solid #707070;
  border-bottom: 8px solid #707070;
  border-left: 1px solid #707070;
  border-right: 1px solid #707070;
  height: 80px;
  border-radius: 50%;
  width: 80px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 999999;
}
.pace .pace-progress:before {
  content: attr(data-progress-text);
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  display: block;
  z-index: 999;
  position: absolute;
}
@keyframes rotateZ {
  to {
    transform: rotateZ(360deg);
  }
}
/*========================================================================
4. Subscribe Form Style
=========================================================================*/
.modal .modal-dialog {
  max-width: 660px;
  padding: 0 15px;
}
.modal .modal-dialog .modal-content {
  border-radius: 5px;
  border: none;
  background-color: #ffffff;
  box-shadow: 0 0 59px 0 rgba(0, 0, 0, 0.1);
}
.modal .modal-dialog .modal-content .modal-header {
  border-bottom: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 22;
  padding: 0;
}
.modal .modal-dialog .modal-content .modal-header button {
  font-size: 40px;
  font-weight: 300;
  margin-right: 0;
  padding: 15px 20px;
  line-height: 1;
  background-color: transparent;
  border: 0;
  transition: all 0.3s ease-in-out;
}
.modal .modal-dialog .modal-content .modal-header button:focus {
  outline: none;
}
.modal .modal-dialog .modal-content .modal-header button:hover {
  color: #136973;
}
.modal .modal-dialog .modal-content .modal-body {
  padding: 90px 110px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .modal .modal-dialog .modal-content .modal-body {
    padding: 70px 80px;
  }
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body {
    padding: 50px;
  }
}
@media only screen and (max-width: 479px) {
  .modal .modal-dialog .modal-content .modal-body {
    padding: 30px 15px;
  }
}
.modal .modal-dialog .modal-content .modal-body .notify-icon {
  display: inline-block;
  width: 15vw;
  margin-bottom: 40px;
  background: transparent;
  position: relative;
  transform-origin: 50% 0;
  animation: iconAnimate 3s ease-in-out forwards;
}
.modal .modal-dialog .modal-content .modal-body .item-title {
  font-size: 40px;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}
@media only screen and (max-width: 1199px) {
  .modal .modal-dialog .modal-content .modal-body .item-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 991px) {
  .modal .modal-dialog .modal-content .modal-body .item-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .modal .modal-dialog .modal-content .modal-body .item-title {
    font-size: 28px;
  }
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body .item-title {
    font-size: 26px;
  }
}
@media only screen and (max-width: 479px) {
  .modal .modal-dialog .modal-content .modal-body .item-title {
    font-size: 24px;
  }
}
.modal .modal-dialog .modal-content .modal-body p {
  color: #000;
  line-height: 30px;
  margin-bottom: 40px;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form {
  position: relative;
  z-index: 1;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon {
  position: absolute;
  top: 20px;
  left: 25px;
  line-height: 1;
  z-index: 5;
  color: #949494;
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon {
    top: 16px;
  }
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .item-icon:focus {
  outline: none;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control {
  margin-bottom: 15px;
  border: 1px solid #bcbcbc;
  height: 55px;
  width: 100%;
  background-color: transparent;
  font-size: 17px;
  color: #111111;
  padding: 10px 10px 10px 55px;
  border-radius: 45px;
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control {
    height: 50px;
  }
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .form-control:focus {
  outline: none;
  box-shadow: none;
  z-index: 0;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input::-webkit-input-placeholder {
  color: #7e7e7e;
  font-weight: 300;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input::-moz-placeholder {
  color: #7e7e7e;
  font-weight: 300;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input:-moz-placeholder {
  color: #7e7e7e;
  font-weight: 300;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group input:-ms-input-placeholder {
  color: #7e7e7e;
  font-weight: 300;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon {
  display: block;
  width: 100%;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button {
  cursor: pointer;
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  border: 0;
  box-shadow: none;
  border-radius: 45px;
  background-color: #136973;
  padding: 5px 40px 7px;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button {
    font-size: 20px;
    padding: 6px 40px 8px;
  }
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button:focus {
  outline: none;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .input-group .input-group-addon button:hover {
  background-color: #000;
}
.modal .modal-dialog .modal-content .modal-body .subscribe-form .form-result {
  display: block;
  padding: 0.78rem 1.25rem;
  margin-top: 15px;
  margin-bottom: 0;
  width: 100%;
  border-radius: 45px;
}
@media only screen and (max-width: 575px) {
  .modal .modal-dialog .modal-content .modal-body .subscribe-form .form-result {
    font-size: 14px;
    padding: 0.6rem;
  }
}
.modal-backdrop {
  z-index: -1;
}
@keyframes iconAnimate {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-30deg);
  }
  70% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/*========================================================================
5. Sidebar Content Style
=========================================================================*/
body .fxt-page-content {
  background-color: #fff;
  height: 100%;
  min-width: 50vw;
  overflow-y: scroll;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 5;
  top: 0;
  left: 100%;
  transition: all 0.8s ease-in-out;
}
@media only screen and (max-width: 991px) {
  body .fxt-page-content {
    position: relative;
    left: inherit;
    min-width: 100vw;
    max-height: inherit;
  }
}
body .fxt-page-content .content-heading .content-title {
  font-weight: 700;
  padding: 5px 10px 3px 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}
body .fxt-page-content .content-heading .content-title:before {
  content: "";
  background-color: rgba(241, 30, 71, 0.1);
  height: 100%;
  width: 70%;
  top: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
body .fxt-about-wrap {
  overflow: hidden;
  padding: 80px 65px 83px;
}
@media only screen and (max-width: 1439px) {
  body .fxt-about-wrap {
    padding: 80px 60px 83px;
  }
}
@media only screen and (max-width: 991px) {
  body .fxt-about-wrap {
    padding: 70px 50px 73px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-about-wrap {
    padding: 60px 40px 63px;
  }
}
@media only screen and (max-width: 575px) {
  body .fxt-about-wrap {
    padding: 50px 30px 53px;
  }
}
body .fxt-about-wrap .content-heading {
  margin-bottom: 0;
}
body .fxt-about-wrap .content-heading .content-paragraph {
  margin-bottom: 0;
}
body .fxt-project-wrap {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 80px 0 0;
}
@media only screen and (max-width: 991px) {
  body .fxt-project-wrap {
    padding: 70px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-project-wrap {
    padding: 60px 0 0;
  }
}
@media only screen and (max-width: 575px) {
  body .fxt-project-wrap {
    padding: 50px 0 0;
  }
}
body .fxt-project-wrap .content-heading {
  padding: 0 65px;
  margin-bottom: 45px;
}
@media only screen and (max-width: 1439px) {
  body .fxt-project-wrap .content-heading {
    padding: 0 60px;
  }
}
@media only screen and (max-width: 991px) {
  body .fxt-project-wrap .content-heading {
    padding: 0 50px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-project-wrap .content-heading {
    padding: 0 40px;
  }
}
@media only screen and (max-width: 575px) {
  body .fxt-project-wrap .content-heading {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-project-wrap .content-heading {
    margin-bottom: 35px;
  }
}
body .fxt-project-box {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
body .fxt-project-box .popup-triger {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
}
body .fxt-project-box .popup-triger:before {
  position: absolute;
  z-index: 0;
  content: "";
  height: 100%;
  width: 100%;
  top: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  transition: cubic-bezier(0, 1, 1, 1) 0.8s;
}
body .fxt-project-box .popup-triger img {
  position: relative;
  z-index: -1;
  transform: scale(1.01);
  transition: cubic-bezier(0, 1, 1, 1) 0.8s;
}
body .fxt-project-box:hover .popup-triger:before {
  opacity: 1;
  visibility: visible;
}
body .fxt-project-box:hover .popup-triger img {
  transform: scale(1.2);
}
body .fxt-contact-wrap {
  overflow: hidden;
  padding: 80px 65px;
}
@media only screen and (max-width: 1439px) {
  body .fxt-contact-wrap {
    padding: 80px 60px;
  }
}
@media only screen and (max-width: 991px) {
  body .fxt-contact-wrap {
    padding: 70px 50px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-contact-wrap {
    padding: 60px 40px;
  }
}
@media only screen and (max-width: 575px) {
  body .fxt-contact-wrap {
    padding: 50px 30px;
  }
}
body .fxt-contact-wrap .content-heading {
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  body .fxt-contact-wrap .content-heading {
    margin-bottom: 20px;
  }
}
body .fxt-address-wrap {
  margin-bottom: 20px;
}
body .fxt-address-wrap .fxt-address-box {
  margin-bottom: 20px;
}
body .fxt-address-wrap .fxt-address-box .item-icon i:before {
  margin-left: 0;
  font-size: 40px;
  color: #136973;
}
@media only screen and (max-width: 991px) {
  body .fxt-address-wrap .fxt-address-box .item-icon i:before {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-address-wrap .fxt-address-box .item-icon i:before {
    font-size: 30px;
  }
}
body .fxt-address-wrap .fxt-address-box .item-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
body .fxt-address-wrap .fxt-address-box .item-content .item-title {
  font-weight: 700;
  margin-bottom: 0;
}
body .fxt-address-wrap .fxt-address-box .item-content .item-text {
  color: #666666;
}
body .fxt-form-wrap .form-group {
  margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
  body .fxt-form-wrap .form-group {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-form-wrap .form-group {
    margin-bottom: 15px;
  }
}
body .fxt-form-wrap .form-group:last-child {
  margin-bottom: 0;
}
body .fxt-form-wrap .form-group .form-control {
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: transparent;
  padding: 10px 20px;
  font-size: 15px;
  color: #111;
}
@media only screen and (max-width: 991px) {
  body .fxt-form-wrap .form-group .form-control {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-form-wrap .form-group .form-control {
    font-size: 13px;
  }
}
body .fxt-form-wrap .form-group .form-control:focus {
  outline: none;
  box-shadow: none;
}
body .fxt-form-wrap .form-group input {
  height: 50px;
}
@media only screen and (max-width: 991px) {
  body .fxt-form-wrap .form-group input {
    height: 45px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-form-wrap .form-group input {
    height: 40px;
  }
}
body .fxt-form-wrap .form-group input.form-control::-webkit-input-placeholder,
body .fxt-form-wrap .form-group textarea.form-control::-webkit-input-placeholder {
  color: #666666;
}
body .fxt-form-wrap .form-group input.form-control::-moz-placeholder,
body .fxt-form-wrap .form-group textarea.form-control::-moz-placeholder {
  color: #666666;
}
body .fxt-form-wrap .form-group input.form-control:-moz-placeholder,
body .fxt-form-wrap .form-group textarea.form-control:-moz-placeholder {
  color: #666666;
}
body .fxt-form-wrap .form-group input.form-control:-ms-input-placeholder,
body .fxt-form-wrap .form-group textarea.form-control:-ms-input-placeholder {
  color: #666666;
}
body .fxt-form-wrap .form-group .fxt-btn-fill {
  text-align: center;
  margin-top: 15px;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  outline: none;
  border: 1px solid;
  border-color: #136973;
  color: #f1f1f1;
  border-radius: 45px;
  background-color: #136973;
  padding: 12px 35px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 991px) {
  body .fxt-form-wrap .form-group .fxt-btn-fill {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  body .fxt-form-wrap .form-group .fxt-btn-fill {
    margin-top: 5px;
    font-size: 14px;
    padding: 11px 30px;
  }
}
@media only screen and (max-width: 575px) {
  body .fxt-form-wrap .form-group .fxt-btn-fill {
    font-size: 13px;
    padding: 10px 25px;
  }
}
body .fxt-form-wrap .form-group .fxt-btn-fill:hover {
  background-color: #d60c34;
}
body .fxt-form-wrap .form-group .fxt-btn-fill:focus {
  outline: none;
}
body .fxt-form-wrap .form-response .alert-danger,
body .fxt-form-wrap .form-response .alert.alert-info,
body .fxt-form-wrap .form-response .alert.alert-success {
  margin-bottom: 0;
  padding: 10px 25px;
  border-radius: 45px;
  display: inline-block;
  font-size: 14px;
}
@media only screen and (max-width: 575px) {
  body .fxt-form-wrap .form-response .alert-danger,
  body .fxt-form-wrap .form-response .alert.alert-info,
  body .fxt-form-wrap .form-response .alert.alert-success {
    padding: 9px 25px;
  }
}
body .fxt-form-wrap .form-response .alert-danger p,
body .fxt-form-wrap .form-response .alert.alert-info p,
body .fxt-form-wrap .form-response .alert.alert-success p {
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
  body.open-sidebar .fxt-page-content {
    left: 50%;
  }
}
body .ofcanvas-triger {
  position: absolute;
  z-index: 2;
  right: 7vw;
  display: block;
  top: 15vh;
  padding: 10px 7px;
  cursor: pointer;
  transition: all 0.8s ease-in-out;
  transition-delay: 0.1s;
}
@media only screen and (max-width: 991px) {
  body .ofcanvas-triger {
    display: none;
  }
}
body .ofcanvas-triger .bar {
  background-color: #fff;
  height: 2px;
  width: 30px;
  display: block;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.8s;
}
body .ofcanvas-triger .bar:nth-child(2),
body .ofcanvas-triger .bar:nth-child(3) {
  width: 25px;
  margin-left: 5px;
}
body .ofcanvas-triger .bar:last-child {
  margin-bottom: 0;
}
body .ofcanvas-triger.triger-btn-dark .bar {
  background-color: #000;
}
body .ofcanvas-triger.btn-top16 {
  top: 16vh;
}
body .ofcanvas-triger.btn-top15 {
  top: 15vh;
}
body .ofcanvas-triger.btn-top14 {
  top: 14vh;
}
body .ofcanvas-triger.btn-top13 {
  top: 13vh;
}
body .ofcanvas-triger.btn-top12 {
  top: 12vh;
}
body .ofcanvas-triger.btn-top11 {
  top: 11vh;
}
body .ofcanvas-triger.btn-top10 {
  top: 10vh;
}
body .ofcanvas-triger.btn-top9 {
  top: 9vh;
}
body.open-sidebar .ofcanvas-triger {
  transform: translateX(calc(-50vw + 60px));
  transition-delay: 0s;
}
body.open-sidebar .ofcanvas-triger .bar:nth-child(2),
body.open-sidebar .ofcanvas-triger .bar:nth-child(3) {
  opacity: 0;
}
body.open-sidebar .ofcanvas-triger .bar:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}
body.open-sidebar .ofcanvas-triger .bar:nth-child(4) {
  -webkit-transform: rotate(-45deg) translate(8px, -8px);
  -ms-transform: rotate(-45deg) translate(8px, -8px);
  transform: rotate(-45deg) translate(8px, -8px);
}
/*========================================================================
6. Demo Layout One
=========================================================================*/

/*========================================================================
10. Demo Layout Five
=========================================================================*/
.fxt-template-layout5 {
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 {
    display: block;
    min-width: 100%;
  }
}
.fxt-template-layout5 .fxt-video-background {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
}
.fxt-template-layout5 .fxt-video-background:before {
  content: "";
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.fxt-template-layout5 .fxt-video-background .fxt-video {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}
.fxt-template-layout5 .fxt-main-content {
  padding: 0px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-width: 100vw;
  max-width: 100vw;
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.8s ease-in-out;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content {
    min-width: 100%;
    padding: 55px 15px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content {
    padding: 45px 15px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content {
    padding: 35px 15px;
  }
}
.fxt-template-layout5 .fxt-main-content:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.fxt-template-layout5 .fxt-main-content .fxt-logo {
  margin-top: 25px;
  margin-bottom: 5vh;
  max-width: 15vw;
  /* background-color: #fff; */
    /* padding: 15px; */
}
.fxt-template-layout5 .fxt-main-content .fxt-sub-title {
  color: #fff;
  font-size: 30px;
  margin-bottom: 5px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 13px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 13px;
  }
}
@media only screen and (max-width: 479px) {
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 13px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-main-title {
  color: #fff;
  font-weight: 500;
    line-height: 1.1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-main-title {
    width: 95%;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-main-title {
    width: 100%;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-paragraph {
  color: #d8d8d8;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
  .fxt-template-layout5 .fxt-main-content .fxt-paragraph {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content .fxt-paragraph {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-paragraph {
    width: 80%;
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-paragraph {
    width: 100%;
    margin-bottom: 30px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content .fxt-buttons {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-buttons {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-buttons {
    margin-bottom: 30px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-buttons .fxt-btn {
  margin: 0 7px 12px;
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-ghost {
  text-align: center;
  margin-top: 15px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  outline: none;
  border: 1px solid;
  border-color: #f1f1f1;
  color: #f1f1f1;
  border-radius: 45px;
  background-color: transparent;
  padding: 12px 35px;
  min-width: 180px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost {
    font-size: 14px;
    padding: 11px 30px;
    min-width: 160px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-btn-ghost {
    font-size: 13px;
    padding: 10px 25px;
    min-width: 140px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-ghost:hover {
  background-color: #136973;
  border-color: #136973;
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-ghost:focus {
  outline: none;
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-fill {
  text-align: center;
  margin-top: 15px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  outline: none;
  border: 1px solid;
  border-color: #136973;
  color: #f1f1f1;
  border-radius: 45px;
  background-color: #136973;
  padding: 12px 35px;
  min-width: 180px;
  margin-bottom: 10px;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-btn-fill {
    font-size: 14px;
    padding: 11px 30px;
    min-width: 160px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-btn-fill {
    font-size: 13px;
    padding: 10px 25px;
    min-width: 140px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-fill:hover {
  background-color: transparent;
  border-color: #f1f1f1;
}
.fxt-template-layout5 .fxt-main-content .fxt-btn-fill:focus {
  outline: none;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials {
  margin-bottom: 30px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 575px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials {
    margin-bottom: 40px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 8px;
}
@media only screen and (max-width: 991px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials li {
    margin-right: 10px;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials li {
    margin-right: 5px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li:last-child {
  margin-right: 0;
}
.fxt-template-layout5 .fxt-main-content .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: 18px;
  height: 45px;
  width: 45px;
  color: #000000;
    background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-socials li a {
    font-size: 15px;
    height: 40px;
    width: 40px;
  }
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-facebook a:hover {
  background-color: #3b5998;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-twitter a:hover {
  background-color: #00acee;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-google a:hover {
  background-color: #CC3333;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-instagram a:hover {
  background-color: #E4405F;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-linkedin a:hover {
  background-color: #0077B5;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-youtube a:hover {
  background-color: #c4302b;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-pinterest a:hover {
  background-color: #bd081c;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-socials li.fxt-whatsapp a:hover {
  background-color: #25d366;
  color: #fff;
}
.fxt-template-layout5 .fxt-main-content .fxt-footer p {
  color: #e3e3e3;
  font-size: 15px;
}
@media only screen and (min-width: 992px) {
  body.open-sidebar .fxt-template-layout5 .fxt-main-content {
    min-width: 50vw;
    max-width: 50vw;
  }
}
/*========================================================================
11. Demo Layout Six
=========================================================================*/


.info-box {
  padding: 15px 0;
  background: rgba(255,255,255,0.25); 
  border-radius: 45px;
  margin-bottom: 30px;
}
.info-box h3 {
  font-weight: 800;
  margin-bottom: 3px;
  color: #fff;
}
.info-box p {
  font-size: 16px;
  color: #f8f8f8;
  margin-bottom: 0;
}
.info-box p>a {
  color: #f8f8f8;
}
.fxt-footer p {
  margin-bottom: 10px;
}

@media only screen and (max-width: 1600px) {
  .fxt-template-layout5 .fxt-main-content .fxt-logo {
    max-width: 15vw;
     margin-bottom: 4vh;
     margin-top: 0px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-main-title {
    margin-bottom: 40px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-buttons {
    margin-bottom: 20px;
  }
  .fxt-footer p {
    margin-bottom: 5px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-socials {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 1520px) {
  .fxt-template-layout5 .fxt-main-content .fxt-logo {
    max-width: 12vw;
    margin-bottom: 3vh;
    margin-top: 10px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 22px;
    line-height: 1.1;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-main-title {
    font-size: 40px;
    margin-bottom: 20px;
  }
  .info-box {
    padding: 5px 0;
  }
  .info-box h3 {
    font-size: 19px;
  }
  .info-box p {
    font-size: 15px; 
  }
  .fxt-template-layout5 .fxt-main-content .fxt-btn-fill {
    padding: 8px 35px;
  }
  .modal .modal-dialog .modal-content .modal-body {
    padding: 47px 106px;  
  }
  .fxt-template-layout5 .fxt-main-content .fxt-buttons {
    margin-bottom: 15px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-socials {
    margin-bottom: 10px;
  }
  
  .fxt-footer p {
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .fxt-template-layout5 .fxt-main-content .fxt-logo {
    max-width: 50vw;
  }  
  .fxt-template-layout5 .fxt-main-content .fxt-main-title {
    font-size: 30px;
  }
  .fxt-template-layout5 .fxt-main-content .fxt-sub-title {
    font-size: 18px;
    line-height: 1.2;
  }
  .info-box {
    padding: 7px 0;
    margin-bottom: 20px; 
  }
}