/********** Template CSS **********/
:root {
    --primary: #FF9411;
    --secondary: #473198;
    --black: #171717;
    --dark: #212529;
    --gray: #9f9f9f;
    --light: #FFFFFF;
}

#myVideo {
    width: 100vw;
    height: 46em;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#hero-lighting {
    padding-top: 15em;
    min-height: 46em;
    text-align: center;
}

#lighting-highlights h1 {
    font-size: 2.5em;
}

#lighting-highlights img {
    max-width: 5em;
}

#hero-lighting h1 {
    font-size: 3em;
}

#hero-lighting h2 {
    font-size: 2.5em;
    font-weight: lighter !important;
}

h3 {
    font-weight: bold;
}

div.orange-bg {
    background-color: #FF9411;
}

.hide-robot{
    display:none;
}

* {
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: var(--black);
}

.btn-primary {
    background-color: var(--primary);
    font-weight: bold;
    border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.bg-white {
    background-color: var(--light) !important;
    color: var(--dark) !important;
}

.bg-dark {
    background-color: var(--black) !important;
    color: var(--light) !important;
}
 /* something */
.bg-neutral {
    background-color: var(--gray) !important;
    color: var(--light) !important;
}

.bg-primary i {
    color: var(--light) !important;
}

.bg-dark i {
    color: var(--primary) !important;
}

.bg-dark i.continue {
    color: var(--light);
}


h1,
.h1,
h2,
.h2,
.fw-bold {
    font-weight: 700 !important;
    font-size: 2em;
}

h1.light {
    color: var(--light);
}

hr {
    border: solid .15em var(--primary);
    opacity: 1;
    margin: 1em 0;
}

p, li {
    color: var(--gray) !important;
}

.col h1.header {
    font-size: 2em;
    margin-top: 1em;

}

span.h1-header-break {
    width: 50%;
    border-bottom: var(--primary);
}

.navbar {
    background-color: var(--black);
}

.navbar .navbar-brand {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--light);
    /*margin-left:27%;*/
}
.navbar .navbar-brand img {
    height: 1.3em;
}

#hero {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.3),
                    rgba(0, 0, 0, 0.3)
            ),
            url("../img/hero-mobile.webp");
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%;
}
#form-filled h1 {
    font-size: 3em;
}


#hero h1 {
    font-size: 2.8em;
    padding-top: 4em;
    line-height: 1.5em;
}

#hero i {
    font-size: 4em;
    color: white;
    margin-top: 3em;
}

#who i.continue {
    font-size: 4em;
    color: white;
}

#who {
    padding-top: 6em;
    /*height: 100vh !important;*/
}

span.altered {
    background-color: var(--primary);
    color: var(--light);
}
div#who span.altered {
    padding: .25em;
    line-height: 1em;
}

div.highlights i {
    font-size: 4em;
    color: var(--black);
}

div#solutions {
    padding: 5em 0 1em 0;
}

div.solution i.continue {
    color: white;
}

div.solution {
    color: var(--light);
    min-height: 40em;
    padding-top: 50%;
}

div.solution i {
    font-size: 4em;
    color: var(--primary);
    margin-bottom: .25em;
}

div.solution.lighting {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/service-1.webp");
    background-size: cover;
}

div.solution.climate {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/service-3.webp");
    background-size: cover;
}

div.solution.security {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/keypad.webp");
    background-size: cover;
    background-position: top;
}

div.solution.audio {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/service-2.webp");
    background-size: cover;
}

div.solution.outdoor {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/service-4.webp");
    background-size: cover;
    background-position-x: 50%;
}

div.solution.energy {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.7),
                    rgba(0, 0, 0, 0.7)
            ),
            url("../img/service-6.webp");
    background-size: cover;
}

#quote {
    background-color: white;
}

.form-floating label {
    color: var(--black);
}

iframe {
    width: 100%;
    height: auto;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #hero {
        background-position-y: 51%;
        height: 80vh !important;
    }

    #hero h1 {
        font-size: 4em;
        padding: 6em 0 0 1em;
    }

    #who {
        height: 100% !important;
    }

    div.solution {
        padding-top: 20%;
        min-height: 30em;
    }

    i.continue {
        display: none;
    }

    div.solution.climate {
        background-position-x: 50%;
    }

    div.solution.security {
        background-position-x: 45%;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    div.solution {
        padding: 10% 10em 0 10em;
        min-height: 30em;
    }

    iframe {
        width: 600px;
        height: 320px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #who {
        padding-top: 6em;
        height: 100%;
    }

    #lighting-highlights {
        padding: 0 10em;
    }

    #lighting-highlights h1 {
        font-size: 4em;
    }

    #lighting-highlights div.col-12:first-child {
        padding: 0 15em;
    }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}