@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

:root {
    --red: #cb3617;
    --gray: #6c6c6c;
    --lgray: #e6e6e6;
    --black: #12100b;

    --main-nav-height: 14rem;
    --main-nav-height-md: 10rem;
    --navbar-height: 4.875rem;
}

body {font-family:'Poppins',sans-serif;font-weight:300;color:var(--black)}
article a, #contact-us-editor a {text-decoration:underline;}
main {margin-top:-5%}

/* colors */
.text-red, .text-danger {color:var(--red)!important}
.text-gray {color:var(--gray)!important}
.text-lgray {color:var(--lgray)!important}
.text-black {color:var(--black)!important}

.fill-red {fill:var(--red)!important}
.fill-gray {fill:var(--gray)!important}
.fill-lgray {fill:var(--lgray)!important}
.fill-black {fill:var(--black)!important}
.fill-white {fill:white!important}

.bg-red {background-color:var(--red)!important}
.bg-gray {background-color:var(--gray)!important}
.bg-lgray {background-color:var(--lgray)!important}
.bg-black {background-color:var(--black)!important}
.bg-white {background-color:white!important}

.border-red {border-color:var(--red)!important}
.border-gray {border-color:var(--gray)!important}
.border-lgray {border-color:var(--lgray)!important}
.border-black {border-color:var(--black)!important}

.btn-red {color:white!important;background-color:var(--red);border-color:var(--red)}
.btn-red:hover, .btn-red.active {color:var(--red)!important;background-color:white;border-color:var(--red)}
.btn-red:hover path {fill:var(--red)!important}
.btn-gray {color:white!important;background-color:var(--gray);border-color:var(--gray)}
.btn-gray:hover {color:var(--gray)!important;background-color:white;border-color:var(--gray)}
.btn-lgray {color:var(--gray)!important;background-color:var(--lgray);border-color:var(--lgray)}
.btn-lgray:hover {color:var(--lgray)!important;background-color:var(--gray);border-color:var(--gray)}
.btn-black {color:white!important;background-color:var(--black);border-color:var(--black)}
.btn-black:hover {color:var(--black)!important;background-color:white;border-color:var(--black)}
.btn-white {color:var(--gray)!important;background-color:white;border-color:white}
.btn-white:hover {color:white!important;background-color:var(--gray);border-color:var(--gray)}

.btn-serv {
    color:var(--red)!important;
    background-color:white;
    border-color:white;
    font-weight:700;
    border-radius:0;
    height:4rem;
    align-items:center;
    display:grid;
    position:relative;
}
.btn-serv:hover {color:var(--red)!important;background-color:var(--lgray);border-color:var(--lgray)}
.btn-serv .right-triangle, .btn-serv .left-triangle {
    z-index: 1;
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top:0;
    right:-1px;
    border-width:2rem .5rem 2rem 0;
    border-color:transparent var(--red) transparent transparent;
}
.btn-serv .left-triangle {
    top:0;
    left:-1px;
    border-width:2rem 0 2rem .5rem;
    border-color:transparent transparent transparent var(--red);
}

.qc-cmp2-persistent-link {background:var(--red)!important;border-color:var(--red);color:white!important}

/* font */
.font-weight-bold, strong, h1, h2, h3, h4, h5, h6 {font-weight:700!important}
.font-weight-normal {font-weight:300!important}
.fs-0 {font-style:0}
.fs-1 {font-size:.75rem}
.fs-2 {font-size:1rem}
.fs-3 {font-size:1.25rem}
.fs-4 {font-size:1.5rem}
.fs-5 {font-size:2rem}
.fs-6 {font-size:3rem}
.fs-7 {font-size:4rem}
.fs-8 {font-size:6rem}
.fs-9 {font-size:8rem}

/* items */
.arrow {height:2rem;width:auto}

/* navbar */
header {position:relative;}
#logo {width:100%;height:auto;}
nav.navbar {padding:3% 0}
.nav-item {text-transform:uppercase;}
.navbar-nav {width:42%}
.navbar-nav .nav-item {margin-left:3rem;}
.navbar-nav .nav-item svg {transform: rotate(180deg)}
.navbar-nav.text-right .nav-item {margin-right:3rem;}
.navbar-nav.text-right .nav-item svg {transform: rotate(0deg)}
.navbar-brand {margin:0;width:16%}
.navbar-nav .dropdown-toggle::after {border:0 none;margin:0}
.nav-item.dropdown {position:relative}
.nav-item .dropdown-menu {position:absolute}
.navbar-nav.text-right .nav-item .dropdown-menu {text-align:right;}
#menu a:first-child {border-top:1px solid var(--gray)}
#menu a {border-bottom:1px solid var(--gray)}

/* footer */
footer section {padding:calc(5% + 2rem) 0 2rem 0;text-align:center;}
.footer-brand {display:block;width:10%;margin:0 auto 2rem auto;}
.footer-brand .fill-black {fill:white!important}
.footer-brand .fill-red {fill:var(--lgray)!important}

/* default */
body.default {position:relative;overflow-x:hidden;}
main {overflow:hidden}
section {padding:calc(5% + 2rem) 0 2rem 0}
section#img-scene {padding:0;height:60vh}
section#img-scene div {height:120vh;width:100%;background-repeat:no-repeat;background-position:center;background-size:cover;}
section h2 {padding-bottom: 1rem}
section.serv {position:relative;padding-bottom:2rem}
.default section .td-text, .default section .td-text .a-defcolor {color:white!important}
#dron {
    width:20%;
    position:absolute;
    z-index:1030;
    right:-5%;
    top:7%
}
#dron img {width:100%;height:auto;}

/* property box */
.property-box {border:1px solid var(--red);padding:1rem;margin:2rem 0}
.property-box svg {height:1.5rem;width:auto;}
.property-container {padding:0 12rem;}

/* input */
input, textarea, select {border-radius:0!important}

/* article */
body.article h1 {padding:5% 0 2rem 0}
body.article .gallery-picture {background-position:center;background-size:cover;background-repeat:no-repeat;}
body.article .img-list {position:relative;height:calc(50vw * .66);margin:2rem 0;}
body.article .img-list .img-div.first, body.article .img-list .img-div.second, body.article .img-list .img-div.last {
    position:absolute;
}
body.article .img-list .img-div.second, body.article .img-list .img-div.last {
    width:25vw;
    top:calc((25vw * .66) / 2);
    z-index:10;
}
body.article .img-list .img-div.second .gallery-picture, body.article .img-list .img-div.last .gallery-picture {opacity:.5;}
body.article .img-list .img-div.last {left:5%;}
body.article .img-list .img-div.first {width:50vw;left:25%;z-index:20}
body.article .img-list .img-div.second {right:5%;}
body.article .img-list .img-div .btn {
    position:absolute;
    top:calc(50% - 2rem);
    z-index:20;
    padding:0;
    border:0 none;
    display:none;
}
body.article .img-list .img-div .btn .arrow {height:4rem;width:auto}
body.article .img-list .img-div.last .btn {left:50%;transform:rotate(180deg)}
body.article .img-list .img-div.second .btn {right:50%}
body.article .img-list .img-div.last .btn[name=prev], body.article .img-list .img-div.second .btn[name=next] {display:block}
body.article .img-list .img-div.less {width:40%;display:inline-block;}
body.article article a {color:var(--lgray)}

/* pager */
.pager {padding-top:2rem}
.pager .btn {border-radius:0!important}
.pager .page-link {font-size:1.25rem!important;padding:.5rem 1rem;}
.pager .page-link.first svg {transform:rotate(180deg)}

/* property */
body.property section.bg-red h1 {padding:5% 0 2rem 0}
body.property section h1 {padding-bottom:2rem}

/* triangle */
.svg3 {position:relative;z-index:1}
header .svg3 {z-index:2}
main .svg3.align-bottom {top:1px;margin-top:-1px}
main .svg3.align-top {top:-1px;}

/* sale */
.modal-footer {right:-4rem!important}
.modal-footer button {line-height:1;padding-bottom:.25rem!important}

@media screen and (max-width:1199px){
    .fs-5 {font-size:1.75rem}
}
@media screen and (max-width:991px){
    .fs-3 {font-size:1.125rem}
    .fs-5 {font-size:1.25rem}
    .fs-6 {font-size:2.5rem}
    .navbar-nav .nav-item {margin-left:1rem;}
    .navbar-nav.text-right .nav-item {margin-right:1rem;}
    .arrow {height:1.5rem}
    #dron {width:25%;right:5%;top:5%}
    .img-list .img-div .btn {top:calc(50% - 1.5rem)}
    .img-list .img-div .btn .arrow {height:3rem}
    .property-container {padding:0;}
}
@media screen and (max-width:768px){
    .navbar-nav .nav-item {display:none;}
    .navbar-brand {width:30%}
    .navbar-nav {width:35%}
    #dron {width:30%;right:5%;top:5%}
}
@media screen and (max-width:480px){
    .fs-3 {font-size:1rem}
    .fs-4 {font-size:1.125rem}
    .fs-5 {font-size:1.25rem}
    .fs-6 {font-size:2rem}
    .fs-7 {font-size:3rem}
    .property-box {padding:1rem;margin:1rem 0}
    .property-box svg {height:1.5rem}
    #dron {width:50%;right:5%;top:5%}
    .img-list .img-div .btn {top:calc(50% - 1rem)}
    .img-list .img-div .btn .arrow {height:2rem}
    .modal-footer {right:0!important;top:-4rem!important}
}
@media (orientation: landscape) {
}
@media (orientation: portrait) {
    section#img-scene div {height:140vh;}

}
@media (max-width: 991px) and (orientation:landscape) {
}
@media (max-width: 768px) and (orientation:landscape) {
}
@media (max-width: 480px) and (orientation:landscape) {
}
@media screen and (min-width:1200px){
}
@media screen and (min-width:992px){
}
@media screen and (min-width:768px){
}
@media screen and (min-width:576px){
}