/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {

    /* Colors: */
    --sos-base-1134b7: #1134B7;
    --white: #FFFFFF;
    --sos-1e8bf0: #1E8BF0;
    --unnamed-color-2341c2: #2341C2;
    --unnamed-color-2838c3: #2838C3;
    --sos-6cceff: #6CCEFF;
    --sos-d4f5ff: #D4F5FF;
    --unnamed-color-2252bd: #2252BD;

    /* Font/text values */
    --unnamed-font-family-trebuchet-ms: Trebuchet MS;
    --unnamed-font-family-montserrat: Montserrat;
    --unnamed-font-family-merriweather: Merriweather;
    --unnamed-font-family-din: DIN;
    --unnamed-font-style-italic: Italic;
    --unnamed-font-style-regular: Regular;
    --unnamed-font-style-black: Black;
    --unnamed-font-style-bold: Bold;
    --unnamed-font-style-medium: Medium;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-20: 20px;
    --unnamed-font-size-21: 21px;
    --unnamed-font-size-24: 24px;
    --unnamed-font-size-32: 32px;
    --unnamed-font-size-44: 44px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-26: 26px;
    --unnamed-line-spacing-27: 27px;
    --unnamed-line-spacing-32: 32px;
    --unnamed-line-spacing-42: 42px;
    --unnamed-line-spacing-43: 43px;
    --unnamed-line-spacing-52: 52px;
    --unnamed-text-transform-uppercase: uppercase;
}


#demo {
    display: flex;
    justify-content: center;
    align-items: center;
}

#demo iframe {
    border: none;
    height: 590px;
    width: 80%;
    transition: all 0.5s ease;
    overflow: hidden;
}


/* Character Styles */
.notas-de-michelle {
font-family: var(--unnamed-font-family-trebuchet-ms);
font-style: var(--unnamed-font-style-italic);
font-size: var(--unnamed-font-size-20);
line-height: var(--unnamed-line-spacing-27);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-16px-buttons {
font-family: var(--unnamed-font-family-montserrat);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-26);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
text-transform: var(--unnamed-text-transform-uppercase);
}
.-h2-—-32pt {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-black);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-42);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-2838c3);
}
.-h2-—-32pt-white {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-black);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-42);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-h1-—-44pt {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-44);
line-height: var(--unnamed-line-spacing-52);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-testimonials-merriweather-—-21pt {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-bold);
font-size: var(--unnamed-font-size-21);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-2252bd);
}
.-24px-bullets-in-features {
font-family: var(--unnamed-font-family-din);
font-style: var(--unnamed-font-style-medium);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-43);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-2341c2);
}
.-24pt-homepage-hero {
font-family: var(--unnamed-font-family-din);
font-style: var(--unnamed-font-style-medium);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.24px-oos-is-a-big-problem {
font-family: var(--unnamed-font-family-din);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-h1-—-44pt-blue {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-44);
line-height: var(--unnamed-line-spacing-52);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--sos-base-1134b7);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header .logo h1 {
  font-size: 32px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;

}

#header .logo h1 a, #header .logo h1 a:hover {
  color: white;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
 .nav-menu, .nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > ul > li {
    position: relative;
    white-space: nowrap;
    float: left;
}

.nav-menu a {
    display: block;
    position: relative;
    padding: 8px 0 12px 25px;
    transition: 0.3s;
    font: Medium 15px/22px var(--unnamed-font-family-din);
    color: var(--white);
    text-align: right;
    letter-spacing: -0.1px;
    opacity: 1;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
    color: #3498db;
    text-decoration: none;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

#hero {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 900px;
    background: transparent url('../img/SOS-Hero-Events-on-Shelf.png') 0% 0% no-repeat padding-box;
}

.homepage-hero{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}

.btn-request-demo{
    font-family: var(--unnamed-font-family-montserrat);
    font-style: var(--unnamed-font-style-regular);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    text-transform: var(--unnamed-text-transform-uppercase);

    background: var(--sos-base-1134b7) 0% 0% no-repeat padding-box;
    background: #1134B7 0% 0% no-repeat padding-box;
    opacity: 1;

    width: 200px;
    height: 48px;
    top: 713px;
}

.btn-request-demo:hover {
   background: #3498db;
   color: #fff;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/

section {
  padding: 60px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

/*--------------------------------------------------------------
# OOS
--------------------------------------------------------------*/

#oos {
    height: 1300px;
    background: transparent url('../img/SOS-Waves.png') 0% 0% no-repeat padding-box;

}

.oos-paragraph{

padding-top: 100px;
width: 916px;
height: 101px;

font: Regular var(--unnamed-font-size-24)/var(--unnamed-line-spacing-32) var(--unnamed-font-family-din);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
text-align: center;
font: Regular 24px/32px DIN;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Supermarket Intro
--------------------------------------------------------------*/

#supermarket-intro {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 800px;
    background: #1E8BF0 0% 0% no-repeat padding-box;
    opacity: 0.9;
}

.supermarket-intro-video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 800px;
    overflow: hidden;
    z-index: -300;
    background-color: #777;
}

.homepage-supermarket-text{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}

/*--------------------------------------------------------------
# Supermarket floor metrics
--------------------------------------------------------------*/

#floor-metrics{
    height: 1114px;
    background: #6CCEFF 0% 0% no-repeat padding-box;
}

.floor-metrics-text{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--sos-base-1134b7);
}

.floor-plan-box rect, .floor-plan-box text {
    opacity: 0;
    transition: opacity 1s;
}

.floor-plan-box circle {
    fill: #1134b7;
    fill-rule: evenodd;
    stroke: #1e8bf0;
    stroke-opacity: .5;
    stroke-width: 26.209;
    paint-order: stroke fill markers;
    r: 17.56;
    transition: r .5s, stroke-width .5s;
}

.floor-plan-box circle:hover {
    r: 30;
    stroke-width: 40;
}


.floor-plan-box rect {
    fill: #1134b7;
    stroke: #1e8bf0;
    stroke-opacity: .5;
    stroke-width: 8.8216;
    paint-order:stroke fill markers;
}

.floor-plan-box text {
    fill: #ffffff;
    transform: scale(1.0277 .97305);
    font-family: sans-serif;
    font-size: 29.333px;
    stroke-width: 1.3433;
    text-align: center;
    text-anchor: middle;
    line-height:1.25;
}

.floor-plan-box.active rect, .floor-plan-box.active text {
    opacity: 1;
    transition: opacity 1s;
}

.floor-plan-carousel ul.slick-dots {
    display: flex;
    justify-content: center;
}

.floor-plan-carousel ul.slick-dots li button {
    display: none;
}

.floor-plan-carousel-mobile-hide {
    display: none !important;
}

.floor-plan-carousel-mobile-show {
    display: block !important;
}

.floor-plan-carousel ul.slick-dots li {
    float: left;
    color: rgba(61, 148, 246, 0.737);
    margin-right: 30px;
}

.floor-plan-carousel ul.slick-dots li.slick-active {
    color: var(--white);
}

.floor-plan-carousel .slick-arrow {
    display: none !important;
}

.floor-plan-arrow {
    font-size: 2em;
    background-color: transparent;
    border-width: 0;
    color: var(--white);
    outline: none;
}

/*--------------------------------------------------------------
# Supermarket Level Activity
--------------------------------------------------------------*/

#level-activity-section-1 {
    height: 900px;
    background: #122590 url('../img/SOS-Waves.png') 0% 0% no-repeat padding-box;
}
#level-activity-section-1::after{
    background-color: #122590;
}

#level-activity-section-2 {
    height: 550px;
    background: #122590 0% 0% no-repeat padding-box;
}

.level-activity-text{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-32);
    line-height: var(--unnamed-line-spacing-38);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    text-align: center;
}

.level-activity-paragraph{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    text-align: center;
}

/*--------------------------------------------------------------
# Supermarket Request Demo
--------------------------------------------------------------*/


.request-demo-video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -200;
    background-color: #777;
}

#request-demo-parrent {
    /* height: 800px; */
    position: relative;
}

#request-demo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    /* height: 800px; */
    background: #1E8BF0 0% 0% no-repeat padding-box;
    opacity: 0.9;
    text-align: center;
    padding-top:200px;
}

.request-demo-input{
    font-family: var(--unnamed-font-family-montserrat);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    background: #1E8BF0 0% 0% no-repeat padding-box;
    opacity: 0.9;
    border-width: 0px 0px 2px 0px;
    border-color: white;
}

.request-demo-button{
    font-family: var(--unnamed-font-family-montserrat);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #0045B2;
    text-align: center;
    background: #DCF6FF 0% 0% no-repeat padding-box;
    border-width: 0px;
    padding: 10px;
    opacity: 1 !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--white);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--white);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--white);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer.bg-dark a {
  color: #fff;
}

.footer-1 .logo {
  max-height: 30px;
}

.footer-1 .sub {
  opacity: .5;
}

footer.bg-dark p,
footer.bg-dark span,
footer.bg-dark li {
  color: #fefefe;
}

.copyright-info {
    text-align: right;
    float: right;
    margin-top:0;
    padding-top: 6em;
    padding-bottom: 15px;
}

/*--------------------------------------------------------------
# Adjusting phone screen
--------------------------------------------------------------*/

@media only screen and (max-width: 1000px) {
    #supermarket-intro {
        height: 600px !important;
    }

    #floor-metrics{
        height: 900px;
    }

    .floor-plan-svg {
        width: 110% !important;
    }

    .floor-plan-carousel {
        display: box;
    }

    .floor-plan-box circle, .floor-plan-box rect, .floor-plan-box text {
        display: none;
    }

    .only-desktop {
        visibility: hidden !important;
    }

    .-h1-—-44pt {
        font-size: var(--unnamed-font-size-32) !important;
        line-height: var(--unnamed-line-spacing-42) !important;
    }

    .level-activity-text {
        font-size: var(--unnamed-font-size-24) !important;
        line-height: var(--unnamed-line-spacing-32) !important;
    }

    #request-demo {
        padding-top: 50px !important;
        /* height: 650px !important; */
    }

    .request-demo-parrent {
        /* height: 650px !important; */
    }

    .request-demo-button{
        margin-top: 30px;
    }
}

@media only screen and (min-width: 760px) and (max-width: 1000px) {
    #level-activity-section-1 {
        height: 1000px !important;
    }
    #level-activity-section-2 {
        height: 600px !important;
    }
}

@media only screen and (max-width: 760px) {
    #level-activity-section-1 {
        height: 1300px !important;
    }

    #level-activity-section-2 {
        height: 800px !important;
    }
}

@media only screen and (min-width: 1001px) {
    .floor-plan-carousel {
        display: none !important;
    }

    .floor-plan-arrow {
        display: none !important;
    }
}