.btn-primary {
    background-color: #F84525 !important;
    border-color    : #F84525 !important;
}

.btn-primary:hover {
    background-color: #000 !important;
    border-color    : #000 !important;
}

.app-color-1 {
    color: white !important;
}

.app-color-2 {
    color: #F84525 !important;
}

.app-color-3 {
    color: #E8BB52 !important;
}

.app-color-4 {
    color: #AE86B8 !important;
}

.app-color-5 {
    color: #54A97E !important;
}

.app-color-6 {
    color: #1A1A1A !important;
}

.app-color-7 {
    color: #b9bae1 !important;
}

.header-container .bg-light,
footer {
    background-color: #000 !important;
}

section {
    padding-bottom: 80px;
}

.header-container a {
    color: #ffffff !important;
}

.header-container ul {
    margin: 0 auto;
}

.hero-section {
    background-color: #000;
    color           : white;
    min-height      : 100vh;
    padding-top     : 56px;
}

.hero-section.h-100 {
    min-height: 100%;
}

.hero-section .sub-title {
    margin-left: 90px;
    color      : #F84525;
}

.hero-section .main-content {
    margin-right  : 10px;
    display       : inline-block;
    vertical-align: top;
}

.hero-section .main-content h1 {
    font-size: 2em;
}

.hero-section .secondary-content {
    display     : inline-block;
    border-left : 3px solid #f84525;
    padding-left: 10px;
}

.section-2 {
    background         : url(../assets/triangle-1.png);
    background-size    : auto;
    background-repeat  : no-repeat;
    background-size    : contain;
    background-position: right;
}

.section-3 {
    background-color: #efefef;
}

.section-3 .triangle-black {
    position: absolute;
    bottom  : -50px;
    height  : 100px;
}

.section-3 .triangle-black.right {
    right: 0;
}

.vertical-text {
    position: absolute;
    right   : 0;
    top     : 0;
}

.vertical-text h1 {
    color            : #1A1A1A;
    font-size        : 4em !important;
    font-weight      : bold;
    transform        : rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform   : rotate(-90deg);
    -ms-transform    : rotate(-90deg);
    -o-transform     : rotate(-90deg);
    filter           : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.hero-section .link div.grey-circle {
    width           : 50px;
    height          : 50px;
    border-radius   : 50%;
    background-color: #1A1A1A;
    display         : inline-block;
    transition      : all 0.5s;
    cursor          : pointer;
}

.hero-section .link:hover .grey-circle {
    width           : 160px;
    border-radius   : 10px;
    background-color: #F84525;
}

.hero-section .link span {
    position: absolute;
    top     : 13px;
    left    : 35px;
    cursor  : pointer;
}

.plus-container {
    letter-spacing: 10px;
    width         : 90px;
    position      : absolute;
    top           : 200px;
    right         : 200px;
}

.circle-container {
    position         : fixed;
    top              : -120px;
    right            : calc((100vw - 1200px)/2 - 180px);
    pointer-events   : none;
    -webkit-transform: rotate(90deg) scaleX(-1);
    transform        : rotate(90deg) scaleX(-1);
    transition       : stroke .65s ease-out;
    opacity          : .15;
}

.v-text {
    position: absolute;
    right   : 0;
    top     : 50%;
    width   : 85px;
}

.v-text h3 {
    color            : #323232;
    font-size        : 3em !important;
    font-weight      : bold;
    transform        : rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform   : rotate(-90deg);
    -ms-transform    : rotate(-90deg);
    -o-transform     : rotate(-90deg);
    filter           : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    letter-spacing   : 10px;
}

.v-text.grey h3 {
    color: #ccc;
}


.underline {
    display         : block;
    width           : 10%;
    height          : 3px;
    background-color: #F84525;
    margin-top      : 5px;
}

.map-bg {
    background         : url(../assets/map.png);
    background-repeat  : no-repeat;
    background-position: center top;
    background-size    : 80%;
}

.bg-orange {
    background-color: #F84525;
    color           : white;
}

.align-center {
    margin: 0 auto;
}

footer {
    color         : white;
    padding-top   : 50px;
    padding-bottom: 50px;
}

.mail-link,
.mail-link:hover {
    text-decoration: none !important;
    color          : #F84525;
}

footer .address {
    color: rgb(88, 88, 88)
}
footer .footer-link,footer .footer-link:hover {
    text-decoration: none !important;
    color          : #fff!important;
}
.page-scroller-circle {
    position     : sticky;
    color        : #111111;
    width        : 40px;
    height       : 40px;
    background   : #f84525;
    border-radius: 50%;
    padding      : 6px;
    font-size    : 15pt;
    bottom       : 16=5px;
    text-align   : center;
    left         : 0;
    right        : 0;
    margin-left  : auto;
    margin-right : auto;
    cursor       : pointer;
}

.header-container nav.scrolled,
footer {
    background-color: black !important;
}

.text-underline {
    position: relative;
}

.text-underline::before {
    content      : ' ';
    border-bottom: 3px solid #F84525;
    width        : 25%;
    position     : absolute;
    bottom       : -3px;
}

.text-underline.white::before {
    border-color: #fff;
}

.boxes {
    display: inline-block;
}

.boxes img {
    width: 200px;
}

.left-content::before {
    content       : "";
    pointer-events: none;
    position      : absolute;
    top           : 0px;
    bottom        : 0px;
    left          : 0px;
    ;
    width     : 50%;
    background: rgba(235, 236, 237, 0.05);
}

@media (min-width: 986px) and (max-width: 1200px) {
    .hero-section .sub-title {
        font-size: 2em;
    }
}
@media (min-width: 768px) and (max-width: 985px) {
    .hero-section .sub-title {
        font-size: 1em;
    }
    .main-content h1 {
        font-size: 1.2em!important;;
    }
}


@media (max-width: 992px) {
    .section-2 img {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-section .col-sm-6:not(.service-container) {
        flex     : 0 0 100%;
        max-width: 100%;
    }
    .hero-section .about-content {
        width: 90% !important;
    }

    .section-img {
        width: 280px !important;
    }

    .plus-container {
        display: none;
    }
    .hero-section .about-content {
        width: 90% !important;
    }

    .hero-section .image-container {
        display: none;
    }

    .section-img {
        display: none;
    }

    .plus-container {
        display: none;
    }

    .row.about .col-sm-6 {
        flex     : 0 0 100%;
        max-width: 100%;
    }

    .row.about .mt-5 {
        margin-top: 50px;
    }

    .row.about .col-sm-6.d-none {
        display: none !important;
    }

    .sub-title {
        font-size: 2em;
    }

    .hero-section .main-content {
        width: auto;
    }

    .hero-section .main-content h1,
    .secondary-content {
        font-size: 2em !important;
    }

    .main-title {
        margin-top: 0px !important;
    }

    .service-container {
        flex     : 0 0 80%;
        max-width: 80%;
    }

    .service-features {
        display: none;
    }

    .mt-5 {
        margin-top: 20px !important;
    }

    .mb-5 {
        margin-bottom: 20px !important;
    }

    section {
        padding-bottom: 20px !important;
        margin-bottom : 20px !important;
    }

    .mt-4 {
        margin-top: 0px !important;
    }

    .section-2 {
        background: none;
    }
}

@media (max-width: 576px) {
    .sub-title {
        font-size: 1.5em;
    }

    .hero-section .main-content h1 {
        font-size: 1.5em !important;
    }

    .hero-section .main-content h1 {
        font-size: 1.5em !important;
    }

    .secondary-content h5 {
        font-size: 1rem !important;
    }

    section {
        padding-bottom: 20px !important;
    }

    .hero-section {
        min-height: 100%;
    }

    .page-scroller-circle {
        display: none;
    }

    .v-text h3 {
        font-size: 2em !important;
    }

    /* .service-desc {
        width: 80%;
    } */
    .service-features {
        display: none;
    }

    .left-content::before {
        display: none;
    }
}

@media (min-width: 1400px) {
    .section-2 {
        max-width: 1140px;
        margin-right: auto;
        margin-left: auto;
    }
}

textarea {
    resize: none;
}

.bootbox .modal-content {
    border          : none;
    background-color: #303030;
}

.bootbox .modal-title {
    text-align: center;
    width     : 100%;
}

.bootbox .fa {
    display  : block;
    font-size: 35pt;
}

.bootbox .modal-body {
    text-align: center;
    padding   : 0px 10px;
    color     : white;
}

.bootbox .modal-footer {
    justify-content: center;
    border-top     : none;
}

.bootbox .modal-footer button {
    background-color: #1a1a1a;
    color           : white;
}

.error-dialog .bootbox-close-button,
.success-dialog .bootbox-close-button {
    display: none;
}

.error-dialog .modal-header {
    color        : #ff5a6a;
    border-bottom: 0;
}

.success-dialog .modal-header {
    border-bottom: 0;
    color        : #7dff7d !important;
}

.notice-dialog .modal-header {
    background-color       : #ed9c28;
    border-top-left-radius : 5px;
    border-top-right-radius: 5px;
    color                  : white !important;
}

.notice-dialog button.close {
    background-color: white !important;
    border-radius   : 50% !important;
    color           : #ed9c28 !important;
    opacity         : 1 !important;
    padding         : 1px 5px;
}

.modal-title {
    font-size  : 12pt !important;
    font-weight: bold;
}

.modal-footer {
    padding: 10px;
}

.margin-top-25 {
    margin-top: 25px !important;
}

#myModal .modal-title {
    font-size  : 12pt !important;
    font-weight: bold;
}

#myModal .modal-header button {
    opacity: 1 !important;
}

#wait {
    float        : left;
    z-index      : 2000;
    position     : fixed;
    top          : 40%;
    left         : calc(50% - 125px);
    padding      : 10px;
    background   : black;
    width        : 250px;
    height       : 100px;
    text-align   : center;
    color        : white;
    border-radius: 5px;
}

#overlay {
    position        : fixed;
    width           : 100%;
    height          : 100%;
    left            : 0;
    top             : 0;
    right           : 0;
    bottom          : 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index         : 1500;
}