/*========================================================
                      Main Styles
=========================================================*/
body {
  color: #d4d4d4;
  font: 700 14px/20px "Roboto", sans-serif;
  -webkit-text-size-adjust: none; }

img {
  max-width: 100%;
  height: auto; }

h1, h2 {
  color: #3d3b3f; }

h1 span, h2 span {
  color: #f44d4f; }

h1 {
  font: 400 130px/121px "Pathway Gothic One", sans-serif;
  letter-spacing: -3.25px; }

h2 {
  font: 400 130px/130px "Pathway Gothic One", sans-serif;
  letter-spacing: 3.25px;
  text-transform: uppercase; }

h2 .transform {
  text-transform: none; }

h2 .clr-default {
  text-transform: uppercase; }

h3 {
  font: 400 72px/72px "Pathway Gothic One", sans-serif;
  color: #3d3b3f; }

h4 {
  font: 400 36px/36px "Pathway Gothic One", sans-serif;
  letter-spacing: 5.5px;
  text-transform: uppercase; }

h5 {
  font: 400 14px/22px "Roboto", sans-serif;
  letter-spacing: 1.05px;
  text-transform: uppercase; }

h5 strong {
  font-weight: 700; }

p a:hover {
  text-decoration: underline; }

p .fa {
  text-decoration: none; }

time {
  display: block; }

a {
  font: inherit;
  color: inherit;
  text-decoration: none;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

a:focus {
  outline: none; }

a:active {
  background-color: transparent; }

a[href^="tel:"],
a[href^="callto:"] {
  color: inherit;
  text-decoration: none; }

strong {
  font-weight: 700; }

.fa {
  line-height: inherit; }

[class*='fa-']:before {
  font-weight: 400;
  font-family: "FontAwesome"; }

.page {
  overflow: hidden;
  min-height: 100vh;
  background: #fff;
}

.lt-ie9 .page {
  min-width: 1200px; }

/*=======================================================
                       Main Layout
=========================================================*/
h3 + h5, p + p, h4 + p {
  margin-top: 22px; }

p + .off {
  margin-top: 0; }

h3 + p, h3 + .marked-list {
  margin-top: 35px; }

* + .btn, h2 + p {
  margin-top: 30px; }

.col__off {
  margin-top: 40px; }

.col__off-1, * + .social, .brand + .mform-wr {
  margin-top: 65px; }

* + .subscribe-form {
  margin-top: 15px; }

h4 + .mailform {
  margin-top: 25px; }

/*=======================================================
                        Components
=========================================================*/
/*==================     Brand     ======================*/
.brand {
  display: inline-block;
  text-align: left;
}

.brand_slogan {
  font: 700 14px/20px "Roboto", sans-serif;
  letter-spacing: 0.7px;
  color: #f44d4f;
  text-transform: uppercase;
  margin-top: 11px; }

/*==================  Backgrounds  ======================*/
.bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bg-primary {
  background: #f44d4f;
  text-align: center;
  position: relative; }

.bg-primary h4 {
  color: #fff; }

.bg-primary:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12.5px 14px 12.5px;
  border-color: transparent transparent #fff transparent;
  left: 50%;
  bottom: 0;
  margin-left: -13px; }

.bg-primary__md:before {
  border-width: 19.5px 19px 19.5px 0;
  border-color: transparent #fff transparent transparent;
  bottom: auto;
  left: auto;
  right: 0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

/*==================    Colors    ======================*/
.clr-primary {
  color: #f44d4f; }

.clr-default {
  color: #fff; }

/*==================     Icons     ======================*/
/*==================    Buttons    ======================*/
.btn {
  display: inline-block;
  font: 400 24px/24px "Pathway Gothic One", sans-serif;
  color: #f44d4f;
  padding-right: 14px;
  text-transform: lowercase;
  position: relative; }

.btn:before {
  position: absolute;
  content: '/';
  font: 400 24px/24px "Pathway Gothic One", sans-serif;
  top: 0;
  right: 0;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

.btn:hover:before {
  -moz-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1); }

.btn:active {
  color: #ce0d0f; }

.btn:active:before {
  color: #ce0d0f; }

.btn__md {
  padding-right: 0; }

.btn__md:before {
  display: none; }

.btn__md:hover {
  color: #3d3b3f; }

.btn__md:active {
  color: #0a0a0a; }

/*==================      Box      ======================*/
.box:before, .box:after {
  display: table;
  content: "";
  line-height: 0; }

.box:after {
  clear: both; }

.box_aside {
  float: left; }

.box_cnt__no-flow {
  overflow: hidden; }

/*==================     Center    ======================*/
.center {
  text-align: center; }

/*==================     ToTop     ======================*/
.toTop {
  width: 50px;
  height: 50px;
  font-size: 24px;
  line-height: 46px;
  color: #fff;
  background: #f44d4f;
  border-radius: 50%;
  position: fixed;
  right: 40px;
  bottom: 40px;
  display: none;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  z-index: 20; }

.toTop:hover {
  color: #fff;
  background: #3d3b3f;
  text-decoration: none; }

.mobile .toTop,
.tablet .toTop {
  display: none !important; }

/*
*
* Material Parallax
* --------------------------------------------------
*/

.parallax-container {
  position: relative;
  overflow: hidden;
}

.material-parallax {
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  bottom: 0;
}

.mobile .parallax-container,
.tablet .parallax-container {
  background-attachment: scroll !important;
}

.material-parallax img {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 120%;
  min-height: 101%;
  max-width: none;
  transform: translate3d(-50%, 0, 0);
}

.parallax-content {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.parallax-content h3, .parallax-content h5 {
  color: #fff;
}

.parallax-content h3 {
  text-shadow: -1px 2px 1px rgba(0, 0, 0, 0.75);
  padding: 0 150px;
  line-height: 84px;
  text-transform: uppercase;
  letter-spacing: 7.2px;
}

.parallax-content h3 span {
  color: #f44d4f;
}

.parallax-content h5 {
  padding: 0 100px;
}

@media (max-width: 1199px) {
  .parallax-content h3, .parallax-content h5 {
    padding: 0 50px;
  }
}

@media (max-width: 1199px) {
  .parallax-content h3, .parallax-content h5 {
    padding: 0 10px;
  }

  .parallax-content h3 {
    line-height: 1;
  }
}

/*========================================================
                     HEADER  Section
=========================================================*/
header {
  padding-bottom: 33px; }

/*==================  MForm Overlay  ======================*/
.mform-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/newmoban/_external/demo.mobanwang.com/mb/lo202403/202403031/html/images/page-1_img01.jpg');
  background-repeat: no-repeat;
  opacity: 0.2;
  z-index: -1; }

/*==================  MForm Wrap  ======================*/
.mform-wr {
  background: #f44d4f;
  position: relative;
  padding: 41px 43px;
  z-index: 0; }

.mform-wr h4 {
  color: #fff;
  text-shadow: -1px 2px 1px rgba(244, 77, 79, 0.75);
  letter-spacing: 3.6px; }

/*========================================================
                     CONTENT  Section
=========================================================*/
main {
  display: block; }

/*==================      Well     ======================*/
.well {
  padding: 81px 0 70px; }

.well__off {
  padding-bottom: 0; }

.well-1 {
  padding: 23px 0 29px; }

.well-1__off {
  padding-bottom: 66px; }

.well-1__off-1 {
  padding-top: 0; }

.well-2 {
  padding-bottom: 46px; }

.well-3 {
  padding: 31px 0 38px; }

.well-4 {
  padding: 10px 0 86px; }

/*==================      Indent    ======================*/
.indent {
  padding-right: 50px; }

.indent-1 {
  padding-right: 100px; }

/*==================    Img Grid   ======================*/
.img-grid {
  position: relative;
  padding-top: 76px; }

.img-grid .image-block {
  position: absolute;
  content: '';
  background-image: url('/newmoban/_external/demo.mobanwang.com/mb/lo202403/202403031/html/images/page-1_img02.jpg');
  background-size: cover;
  width: 1210px;
  height: 100%;
  left: 100%;
  top: 0;
  bottom: 0;
  margin-left: 15px; }

/*==================   Block Wrap  ======================*/
.block-wr {
  background: #3d3b3f;
  padding: 50px 200px 66px 58px;
  position: relative; }

.block-wr p, .block-wr h3, .block-wr .btn {
  color: #fff; }

.block-wr h3 {
  letter-spacing: 3.6px; }

.block-wr p {
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 50px; }

.block-wr .btn:active {
  color: #cccccc; }

.block-wr .btn:active:before {
  color: #cccccc; }

.block-wr:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 19px 19px 19px;
  border-color: transparent transparent #fff transparent;
  bottom: 0;
  left: 63px; }

.block-wr .image-block {
  position: absolute;
  content: '';
  background: url('/newmoban/_external/demo.mobanwang.com/mb/lo202403/202403031/html/images/page-1_img04.png') no-repeat bottom;
  width: 248px;
  height: 100%;
  bottom: 0;
  right: 0; }

.block-wr__md {
  background: #f44d4f; }

.block-wr__md .image-block {
  background: url('/newmoban/_external/demo.mobanwang.com/mb/lo202403/202403031/html/images/page-1_img05.png') no-repeat center;
  width: 237px;
  height: 100%; }

.btn-lg {
  display: block;
  position: relative;
  font: 400 36px/36px "Pathway Gothic One", sans-serif;
  letter-spacing: 2.7px;
  color: #fff;
  text-transform: uppercase;
  background: #3d3b3f;
  min-width: 100%;
  padding: 9px 5px 10px;
  z-index: 0; }

.btn-lg:hover {
  color: #f44d4f; }

.btn-lg:active, .btn-lg:active:before, .btn-lg:active:after {
  background: #242225; }

/*==================   Mark List  ======================*/
.mark-list-title {
  margin-top: 30px; }

.mark-list-icon, .mark-list-title {
  color: #f44d4f; }

.mark-list-icon.novi-icon {
  font-size: 48px;
  line-height: 50px; }

.mark-list-title {
  letter-spacing: 1.8px; }

.mark-list p {
  padding: 0 5px; }

/*==================  Marked List  ======================*/
.marked-list li {
  position: relative;
  padding-left: 16px;
  text-transform: capitalize;
  color: #f44d4f; }

.marked-list li:before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
  font: 400 14px/20px "Roboto", sans-serif;
  color: #f44d4f; }

.marked-list li + li {
  margin-top: 8px; }

.marked-list a:hover {
  text-decoration: underline; }

/*========================================================
                     FOOTER  Styles
=========================================================*/
footer {
  padding: 80px 0 103px;
  background: #f4f4f4;
  color: #cdcfcf; }

footer h1, footer p span {
  color: #cdcfcf; }

footer h4 {
  letter-spacing: 2.7px; }

footer p {
  letter-spacing: 0.7px; }

footer .privacy {
  position: relative;
}

/*==================   Privacy  ======================*/
.privacy {
  font: 700 14px/20px "Roboto", sans-serif;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.4px; }

.social {
  display: block;
}

.social > li {
  display: inline-block; }

.social > li + li {
  margin-left: 28px; }

.social > li a {
  font-size: 30px;
  line-height: 30px; }

.social > li a:hover {
  color: #f44d4f; }

/*========================================================
                     RESPONSIVE
=========================================================*/
@media (max-width: 1199px) {
  h2 {
    font-size: 105px;
    line-height: 105px; }

  .mform-wr {
    padding: 41px 30px; }

  .btn-lg {
    font-size: 25px; }

  .indent-1, .indent {
    padding-right: 0; }
}

@media (max-width: 991px) {
  h2 {
    font-size: 75px;
    line-height: 75px; }

  h3 {
    font-size: 50px;
    line-height: 50px; }

  h5 {
    font-size: 13px; }

  .center_media {
    text-align: center; }
}

@media (max-width: 767px) {
  h2 {
    font-size: 45px;
    line-height: 50px; }

  [class*='well'], footer {
    padding: 30px 0; }

  .mform-overlay {
    background-size: cover; }

  header {
    text-align: center; }

  .block-wr {
    padding-left: 45px; }

  .row__off-media {
    margin-top: 0; }

  .col__off-media {
    margin-top: 60px; }

  .img-grid {
    padding-top: 30px; }

  .brand + .mform-wr, .col__off-1, * + .social {
    margin-top: 30px; }

  footer .privacy {
    position: static;
    margin-top: 30px; }
}

@media (max-width: 479px) {
  h1 {
    font-size: 100px;
    line-height: 87px; }

  h4 {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: 3.5px; }

  .block-wr {
    padding: 40px 30px 55px 30px; }

  .block-wr .image-block {
    display: none; }

  .bg-primary h2 {
    font-size: 26px;
    line-height: 26px;
    letter-spacing: 2px; }
}