@import './Animate.css';
.body-roof #navbar {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37);
  background-color: #fff !important;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.body-roof #navbar .upper-bar {
  padding: 0.5rem 0;
}
.body-roof #navbar .upper-bar .contact .phone, .body-roof #navbar .upper-bar .contact .mail, .body-roof #navbar .upper-bar .contact .login a {
  display: flex;
  align-items: center;
}
.body-roof #navbar .upper-bar .contact a, .body-roof #navbar .upper-bar .contact i {
  color: black;
}
.body-roof #navbar .upper-bar .contact i {
  font-size: 1.2rem;
}
.body-roof #navbar .upper-bar .contact span {
  color: black !important;
  font-size: 0.8rem;
  margin-left: 0.5rem;
  margin-right: 1rem;
}
.body-roof #navbar .upper-bar .social i {
  font-size: 1.2rem;
}
.body-roof #navbar .upper-bar .social a {
  margin-right: 1rem;
  color: black;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.body-roof #navbar .upper-bar hr {
  margin: 0.5rem 0 0;
  background-color: #b9b9b9;
}
@media (max-width: 767px) {
  .body-roof #navbar .upper-bar i {
    font-size: 1rem;
  }
  .body-roof #navbar .upper-bar span {
    font-size: 0.7rem;
  }
}
.body-roof #navbar .navbar .navbar-brand {
  width: 5rem;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.body-roof #navbar .navbar .navbar-brand img {
  width: 100%;
}
.body-roof #navbar .navbar .navbar-toggler {
  border: 0;
  outline: 0;
}
.body-roof #navbar .navbar .navbar-toggler span {
  background-color: #034285;
  height: 2px;
  display: block;
  width: 1.5rem;
  margin-bottom: 0.3rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.body-roof #navbar .navbar .navbar-toggler span:last-child {
  margin-bottom: 0;
}
.body-roof #navbar .navbar .navbar-toggler:hover span {
  width: 1.5rem;
}
.body-roof #navbar .navbar .nav-item .nav-link {
  color: black !important;
  padding: 0.3rem 1rem;
  margin-right: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 10rem;
  text-align: center;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.body-roof #navbar .navbar .nav-item .nav-link:hover {
  color: #fff !important;
  background-color: #034285;
  border-radius: 5rem;
  border: 1px solid #034285;
  -webkit-box-shadow: 0 15px 20px 0px #0000001f;
  -moz-bbox-shadow: 0 15px 20px 0px #0000001f;
  -o-box-shadow: 0 15px 20px 0px #0000001f;
  box-shadow: 0 15px 20px 0px #0000001f;
}
.body-roof #navbar .navbar .nav-item.active .nav-link {
  color: #fff !important;
  background-color: #034285;
  border-radius: 5rem;
  border: 1px solid #034285;
  -webkit-box-shadow: 0 15px 20px 0px #0000001f;
  -moz-bbox-shadow: 0 15px 20px 0px #0000001f;
  -o-box-shadow: 0 15px 20px 0px #0000001f;
  box-shadow: 0 15px 20px 0px #0000001f;
}
@media (max-width: 991px) {
  .body-roof #navbar .navbar .nav-link {
    margin-right: 0rem !important;
    margin-bottom: 0.3rem;
  }
}
@media (max-width: 767px) {
  .body-roof #navbar .navbar .navbar-brand {
    width: 3rem !important;
  }
}
.body-roof #navbar .navbar::after {
  content: "";
  position: absolute;
}
.body-roof .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.body-roof .roof-page.container {
  margin-top: 12rem;
  display: flex;
}
.body-roof .roof-page.container [class*=col-lg-2] img {
  border-radius: 0.5rem;
  height: 50vh;
  -webkit-box-shadow: 0 5px 20px 0px #0000001c;
  -moz-bbox-shadow: 0 5px 20px 0px #0000001c;
  -o-box-shadow: 0 5px 20px 0px #0000001c;
  box-shadow: 0 5px 20px 0px #0000001c;
}
.body-roof .roof-page.container .roof-slider {
  position: relative;
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 5px 20px 0px #0000001c;
  -moz-bbox-shadow: 0 5px 20px 0px #0000001c;
  -o-box-shadow: 0 5px 20px 0px #0000001c;
  box-shadow: 0 5px 20px 0px #0000001c;
}
.body-roof .roof-page.container .roof-slider .mySlides {
  display: none;
  border-radius: 0.5rem;
  overflow: hidden;
}
.body-roof .roof-page.container .roof-slider .mySlides .numbertext {
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 1rem;
}
.body-roof .roof-page.container .roof-slider .prev, .body-roof .roof-page.container .roof-slider .next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.body-roof .roof-page.container .roof-slider .prev:hover, .body-roof .roof-page.container .roof-slider .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.body-roof .roof-page.container .roof-slider .prev {
  left: 1rem;
  border-radius: 0 3px 3px 0;
}
.body-roof .roof-page.container .roof-slider .next {
  right: 1rem;
  border-radius: 3px 0 0 3px;
}
.body-roof .roof-page.container .roof-slider .all-img {
  display: flex;
  padding-top: 0.5rem;
}
.body-roof .roof-page.container .roof-slider .all-img .column {
  display: flex;
  align-items: center;
  justify-content: center;
}
.body-roof .roof-page.container .roof-slider .all-img .column .demo {
  opacity: 0.6;
  width: 95%;
  margin-right: 0.2rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.body-roof .roof-page.container .roof-slider .all-img .column .demo:hover {
  opacity: 1;
  border-radius: 0.5rem;
}
.body-roof .roof-page.container .roof-slider .all-img .column .active {
  opacity: 1;
  border-radius: 0.5rem;
}
.body-roof .roof-page.container .roof-slider .all-img .column:last-of-type .demo {
  margin-right: 0;
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .roof-slider .prev, .body-roof .roof-page.container .roof-slider .next {
    top: 30%;
    font-size: 1rem;
  }
}
.body-roof .roof-page.container .price-box {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 20px 0px #0000001c;
  -moz-bbox-shadow: 0 5px 20px 0px #0000001c;
  -o-box-shadow: 0 5px 20px 0px #0000001c;
  box-shadow: 0 5px 20px 0px #0000001c;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box:nth-of-type(3) {
    padding-bottom: 0;
  }
}
.body-roof .roof-page.container .price-box h5 {
  margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box h3 {
    font-size: 1.5rem;
  }
}
.body-roof .roof-page.container .price-box p i {
  margin-right: 0.7rem;
  color: #034285;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box p {
    font-size: 0.8rem;
  }
}
.body-roof .roof-page.container .price-box .col-md-4 {
  display: flex;
  align-items: center;
}
.body-roof .roof-page.container .price-box .col-md-4 .text {
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .col-md-4 .text {
    font-size: 0.8rem;
  }
}
.body-roof .roof-page.container .price-box .col-md-4:nth-child(2) {
  justify-content: center;
}
.body-roof .roof-page.container .price-box .col-md-4:nth-child(3) {
  justify-content: flex-end;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .col-md-4 .btn {
    font-size: 0.8rem;
  }
  .body-roof .roof-page.container .price-box .col-md-4:first-of-type {
    justify-content: center;
  }
  .body-roof .roof-page.container .price-box .col-md-4:nth-child(3) {
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .price-box .col-md-4:nth-child(3) {
    margin-top: 1rem;
  }
}
.body-roof .roof-page.container .price-box .col-12 form {
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.body-roof .roof-page.container .price-box .col-12 form input {
  width: 85%;
  border: 0;
  padding: 0.5rem;
  outline: 0;
}
.body-roof .roof-page.container .price-box .col-12 form button {
  color: #fff !important;
  background-color: #034285;
  border-radius: 0.25rem;
  border: 1px solid #034285;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 15px 20px 0px #0000001c;
  -moz-bbox-shadow: 0 15px 20px 0px #0000001c;
  -o-box-shadow: 0 15px 20px 0px #0000001c;
  box-shadow: 0 15px 20px 0px #0000001c;
}
.body-roof .roof-page.container .price-box .col-12 form button:hover {
  -webkit-box-shadow: 0 6px 11px 0px #0000001c;
  -moz-bbox-shadow: 0 6px 11px 0px #0000001c;
  -o-box-shadow: 0 6px 11px 0px #0000001c;
  box-shadow: 0 6px 11px 0px #0000001c;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .col-12 form input {
    font-size: 0.8rem;
    width: 75%;
  }
  .body-roof .roof-page.container .price-box .col-12 form button {
    font-size: 0.8rem;
  }
}
.body-roof .roof-page.container .price-box .btn {
  color: #fff !important;
  background-color: #034285;
  border: 1px solid #034285;
  box-shadow: none;
  outline: 0;
  -webkit-box-shadow: 0 15px 20px 0px #0000001c;
  -moz-bbox-shadow: 0 15px 20px 0px #0000001c;
  -o-box-shadow: 0 15px 20px 0px #0000001c;
  box-shadow: 0 15px 20px 0px #0000001c;
}
.body-roof .roof-page.container .price-box .btn:hover {
  -webkit-box-shadow: 0 6px 11px 0px #0000001c;
  -moz-bbox-shadow: 0 6px 11px 0px #0000001c;
  -o-box-shadow: 0 6px 11px 0px #0000001c;
  box-shadow: 0 6px 11px 0px #0000001c;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .btn {
    font-size: 0.8rem;
  }
}
.body-roof .roof-page.container .price-box .unit_info {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.body-roof .roof-page.container .price-box .unit_info img {
  width: 1.3rem;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .unit_info img {
    width: 1rem;
  }
}
.body-roof .roof-page.container .price-box .unit_info p {
  margin-bottom: 0;
  margin-left: 0.5rem;
  font-weight: bold;
  color: #034285;
}
.body-roof .roof-page.container .price-box .unit_info p:last-child {
  font-weight: normal;
  color: black;
}
@media (max-width: 991px) {
  .body-roof .roof-page.container .price-box .unit_info img {
    width: 1rem;
  }
}
.body-roof .roof-page.container .price-box #map {
  width: 100%;
  height: 25rem;
  border-radius: 0.5rem;
}
.body-roof .roof-page.container .price-box .owl-carousel .item {
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0px 2px 9px 4px #0000000d;
  margin: 1rem;
  border-radius: 0.5rem;
}
.body-roof .roof-page.container .price-box .owl-carousel .item img {
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 6px 11px 0px #0000001c;
  -moz-bbox-shadow: 0 6px 11px 0px #0000001c;
  -o-box-shadow: 0 6px 11px 0px #0000001c;
  box-shadow: 0 6px 11px 0px #0000001c;
}
.body-roof .roof-page.container .price-box .owl-carousel .item p {
  font-weight: bold;
  color: #034285;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .price-box .owl-carousel .item p {
    font-size: 1rem;
  }
}
.body-roof .roof-page.container .price-box .owl-carousel .item i {
  color: #034285;
  margin-right: 0.3rem;
}
.body-roof .roof-page.container .price-box .owl-carousel .item .name_price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.body-roof .roof-page.container .price-box .owl-carousel .item .name_price .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #034285;
  margin: 0.5rem 0;
  display: flex;
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .price-box .owl-carousel .item .name_price .price {
    font-size: 1rem;
  }
}
.body-roof .roof-page.container .price-box .owl-carousel .item .date_locate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.body-roof .roof-page.container .price-box .owl-carousel .item .date_locate .locate {
  display: flex;
  align-items: center;
}
.body-roof .roof-page.container .price-box .owl-carousel .item .date_locate .locate img {
  width: 1.3rem;
  margin-right: 0.5rem;
  box-shadow: none;
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .price-box .owl-carousel .item .date_locate .locate img {
    width: 1rem;
  }
}
.body-roof .roof-page.container .price-box .owl-carousel .item .social_li_vi {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.body-roof .roof-page.container .price-box .owl-carousel .item .social_li_vi .view:first-of-type {
  margin-right: 0.5rem;
}
@media (max-width: 767px) {
  .body-roof .roof-page.container .price-box .owl-carousel .item {
    padding: 0.5rem;
  }
  .body-roof .roof-page.container .price-box .owl-carousel .date_locate,
.body-roof .roof-page.container .price-box .owl-carousel .social_li_vi {
    font-size: 0.8rem;
  }
}
@media (max-width: 991px) {
  .body-roof .roof-page {
    margin-top: 10rem !important;
  }
}
@media (max-width: 767px) {
  .body-roof .roof-page {
    margin-top: 8rem !important;
  }
}

footer {
  background-image: url("../assets/img/Footer.png");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10rem 0 0;
  position: relative;
  z-index: 3;
}
footer .impo-link {
  padding-left: 0;
  list-style: none;
  text-align: center;
}
footer .impo-link li {
  padding: 0.5rem 0;
}
footer .impo-link li a {
  color: #fff;
}
footer .impo-link li a:hover {
  color: #fff;
}
footer .social {
  display: flex;
  align-items: center;
  height: 100%;
  margin-bottom: 0;
  justify-content: center;
  padding-left: 0;
  list-style: none;
  text-align: center;
  margin-left: 2rem;
}
footer .social li a {
  width: 1rem;
}
footer .social li a img {
  width: 85%;
}
footer .copy_right {
  padding: 1rem 0;
}
footer .copy_right p {
  margin-bottom: 0;
  padding-bottom: 0;
  color: #fff;
}
@media (max-width: 767px) {
  footer .impo-link {
    width: 80%;
    margin: 0 auto 1rem;
  }
  footer .impo-link a {
    font-size: 0.8rem;
  }
  footer .social img {
    width: 65% !important;
  }
  footer .copy_right p {
    font-size: 0.8rem;
    width: 70%;
    margin: 1rem auto 0;
  }
}

@media (max-width: 1099px) {
  .impo-link {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  footer {
    padding-top: 10rem;
  }
  footer .social {
    margin-left: 0;
  }
}

/*# sourceMappingURL=roofInfo.css.map */