/*
    Blue: #369AD6
    Orange: #F8B418
    Dark: #5E6263
    Light: #F2F2F3
*/

* {
    outline: 0 !important;
    text-decoration: none !important;
}

body,
html {
    margin: 0;
    padding: 0;
}

p,
li {
    margin-bottom: 5px;
}

::-webkit-input-placeholder {
    color: #F2F2F3 !important;
}

:-moz-placeholder {
    color: #F2F2F3 !important;
}

::-moz-placeholder {
    color: #F2F2F3 !important;
}

:-ms-input-placeholder {
    color: #F2F2F3 !important;
}

::-ms-input-placeholder {
    color: #F2F2F3 !important;
}

::placeholder {
    color: #F2F2F3 !important;
}

.logo-h {
    width: 240px;
    vertical-align: middle;
    margin-top: -80px;
}

.navbar {
    padding: 0rem;
}

.nav-link {
    display: inline;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.navbar-nav li:after {
    content: "\2022";
    padding-right: 8px;
    padding-left: 8px;
}

.navbar-nav>li {
    margin-bottom: 0;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active a {
    border-bottom: 1px solid;
}

.bg-light {
    background-color: #F2F2F3 !important;
}

.text-light {
    color: #F2F2F3 !important;
}

.bg-dark {
    background-color: #5E6263 !important;
}

.text-dark,
.navbar-light .navbar-nav .nav-link{
    color: #5E6263 !important;
}

.text-secondery {
    color: #b0b1b1 !important;
}

.text-warning {
    color: #F8B418 !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover,
.btn-primary,
.bg-primary,
.form-control {
    background-color: #369AD6 !important;
    color: #fff;
}

.text-primary,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-nav li:after,
.navbar-light .navbar-nav .nav-item.active a {
    color: #369AD6 !important;
}

.form-control,
.btn,
.alert {
    border-radius: 0;
    padding: .6rem 1rem;
    border: 0px;
}

.jumbotron {
    border-radius: 0;
    padding: 4rem 0rem;
}

hr {
    border-top: 1px solid #b0b1b1;
}

.bg-primary-opacity {
    background-color: rgba(54, 154, 214, .75);
}

.bg-warning-opacity {
    background-color: rgba(248, 180, 24, .75)
}

.media {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px;
    border: 1px solid transparent;
}

.transition {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.form-group {
    overflow: hidden;
}

.invalid {
    background-color: #ff8787 !important;
}

.navbar-nav li:last-child:after,
.none {
    display: none;
}

.pb-6,
.py-6 {
    padding-bottom: 4rem;
}

.pt-6,
.py-6 {
    padding-top: 4rem;
}

.pl-6,
.px-6 {
    padding-left: 4rem;
}

.pr-5,
.px-6 {
    padding-right: 4rem;
}


.pb-7,
.py-7 {
    padding-bottom: 5rem;
}

.pt-7,
.py-7 {
    padding-top: 5rem;
}

.pl-7,
.px-7 {
    padding-left: 5rem;
}

.pr-7,
.px-7 {
    padding-right: 5rem;
}

.about-flag {
    margin-top: -12rem;
    width: 35%;
}

.column-count-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 30px;
}

.home-jumbotron {
    background-image: url(../../../assets/img/web/home-jumbotron.bg.png);
    background-size: contain;
    background-attachment: fixed;
}

.about-banner {
    background-image: url(../../../assets/img/web/about-jumbotron.bg.png);
    background-size: cover;
    background-attachment: fixed;
}

.services-jumbotron .design-default {
    width: 200px;
    height: 200px;
    background-image: url(../../../assets/img/web/design-default.png);
    background-size: 100%;
    border: 2px solid #F2F2F3;
    margin: 0 auto;
}

.services-jumbotron .service:hover .design-default {
    background-image: url(../../../assets/img/web/design-hover.png);
    background-color: #F2F2F3;
    box-shadow: 4px 7px 20px 0px #1e6b9a;
}

.services-jumbotron .maintenance-default {
    width: 200px;
    height: 200px;
    background-image: url(../../../assets/img/web/maintenance-default.png);
    background-size: 100%;
    border: 2px solid #F2F2F3;
    margin: 0 auto;
}
.services-jumbotron .service:hover .maintenance-default {
    background-image: url(../../../assets/img/web/maintenance-hover.png);
    background-color: #F2F2F3;
    box-shadow: 4px 7px 20px 0px #1e6b9a;
}

.services-jumbotron .installation-default {
    width: 200px;
    height: 200px;
    background-image: url(../../../assets/img/web/installation-default.png);
    background-size: 100%;
    border: 2px solid #F2F2F3;
    margin: 0 auto;
}
.services-jumbotron .service:hover .installation-default {
    background-image: url(../../../assets/img/web/installation-hover.png);
    background-color: #F2F2F3;
    box-shadow: 4px 7px 20px 0px #1e6b9a;
}

.contact-jumbotron {
    background-image: url(../../../assets/img/web/contact-jumbotron.bg.png);
    background-size: 55%;
}
.sub-contact-jumbotron {
    background-image: url(../../../assets/img/web/sub-contact-jumbotron.bg.png);
    background-size: 100%;
    background-position: bottom;
}

.systems-jumbotron {
    background-image: url(../../../assets/img/web/systems-jumbotron.bg.png);
    background-size: 55%;
}

.products-jumbotron {
    background-image: url(../../../assets/img/web/products-jumbotron.bg.png);
    background-size: 55%;
}

.projects-jumbotron {
    background-image: url(../../../assets/img/web/projects-jumbotron.bg.png);
    background-size: 55%;
}

.consultation-banner-jumbotron {
    background-image: url(../../../assets/img/web/consultation-jumbotron.bg.png);
    background-size: 45%;
}
.consultation-jumbotron {
    background-image: url(../../../assets/img/web/consultation-list-jumbotron.bg.png);
    background-size: 45%;
}

.services-banner-jumbotron {
    background-image: url(../../../assets/img/web/services-banner-jumbotron.bg.png);
    background-size: 42%;
}
.services-banner-list-banner {
    background-image: url(../../../assets/img/web/services-list-banner.bg.png);
    background-size: cover;
}

.services-list-jumbotron {
    background-image: url(../../../assets/img/web/services-list-jumbotron.bg.png);
    background-size: 42%;
}

.mini-clear {
    padding: 15px;
}

@media (max-width:1199px) {
    .logo-h {
        width: 220px;
    }
    .jumbotron {
        padding: 3rem 0rem;
    }
    .pb-7,
    .py-7 {
        padding-bottom: 4.5rem;
    }

    .pt-7,
    .py-7 {
        padding-top: 4.5rem;
    }

    .pl-7,
    .px-7 {
        padding-left: 4.5rem;
    }

    .pr-7,
    .px-7 {
        padding-right: 4.5rem;
    }

    .pb-6,
    .py-6 {
        padding-bottom: 3.5rem;
    }

    .pt-6,
    .py-6 {
        padding-top: 3.5rem;
    }

    .pl-6,
    .px-6 {
        padding-left: 3.5rem;
    }

    .pr-5,
    .px-6 {
        padding-right: 3.5rem;
    }
    .navbar-light .navbar-nav .nav-link:focus, 
    .navbar-light .navbar-nav .nav-link:hover, 
    .navbar-light .navbar-nav .nav-item.active a {
        border-bottom: 0px solid;
    }
    .pb-5, .py-5 {
        padding-bottom: 2.5rem!important;
    }
    .pt-5, .py-5 {
        padding-top: 2.5rem!important;
    }

    .consultation-banner-jumbotron,
    .services-banner-jumbotron {
        background-size: 50%;
    }
    .consultation-jumbotron,
    .services-list-jumbotron,
    .contact-jumbotron,
    .systems-jumbotron,
    .products-jumbotron,
    .projects-jumbotron {
        background-size: 77%;
    }

}

@media (max-width:991px) {
    .logo-h {
        width: 180px;
    }
    .jumbotron {
        padding: 2.8rem 0rem;
    }
    .pb-7,
    .py-7 {
        padding-bottom: 4rem;
    }
    .pt-7,
    .py-7 {
        padding-top: 4rem;
    }
    .pl-7,
    .px-7 {
        padding-left: 4rem;
    }
    .pr-7,
    .px-7 {
        padding-right: 4rem;
    }
    .pb-6,
    .py-6 {
        padding-bottom: 2.5rem;
    }

    .pt-6,
    .py-6 {
        padding-top: 2.5rem;
    }

    .pl-6,
    .px-6 {
        padding-left: 2.5rem;
    }

    .pr-5,
    .px-6 {
        padding-right: 2.5rem;
    }

    .navbar-nav li:after {
        display: none;
    }

    .navbar-collapse {
        margin-top: 30px;
    }

    .nav-link {
        display: block;
    }
    .form-control, .btn, .alert {
        padding: .5rem 1rem;
    }
    .services-jumbotron .installation-default,
    .services-jumbotron .maintenance-default,
    .services-jumbotron .design-default{
        width: 175px;
        height: 175px;
    }

}

@media (max-width:767px) {
    .logo-h {
        width: 180px;
        margin-top: 0;
    }
    .jumbotron {
        padding: 2.5rem 0rem;
    }
    .pb-7,
    .py-7 {
        padding-bottom: 3.5rem;
    }

    .pt-7,
    .py-7 {
        padding-top: 3.5rem;
    }

    .pl-7,
    .px-7 {
        padding-left: 3.5rem;
    }

    .pr-7,
    .px-7 {
        padding-right: 3.5rem;
    }

    .pb-6,
    .py-6 {
        padding-bottom: 2.5rem;
    }

    .pt-6,
    .py-6 {
        padding-top: 2.5rem;
    }

    .pl-6,
    .px-6 {
        padding-left: 2.5rem;
    }

    .pr-5,
    .px-6 {
        padding-right: 2.5rem;
    }

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-item.active a {
        border-bottom: 0px solid;
    }

    .column-count-2 {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        column-gap: 0px;
    }
    .text-sm-center{
        text-align: center;
    }
    #contact-us .btn {
        width: 100%;
    }
}

@media (max-width:500px) {
    .logo-h {
        width: 160px;
    }

    .pb-6,
    .py-6 {
        padding-bottom: 2rem;
    }

    .pt-6,
    .py-6 {
        padding-top: 2rem;
    }

    .pb-7,
    .py-7 {
        padding-bottom: 3rem;
    }

    .pt-7,
    .py-7 {
        padding-top: 3rem;
    }

    .pl-6,
    .px-6,
    .pl-7,
    .px-7 {
        padding-left: 0rem;
    }

    .pr-5,
    .px-6,
    .pr-7,
    .px-7 {
        padding-right: 0rem;
    }
}