h1 {
    font-size: 4rem;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2.6rem;
}

h4 {
    font-size: 1.8rem;
}

.lead {
    font-size: 2rem;
}

.text-grey {
    color: #707070;
}

.text-orange {
    color: #EB6E00;
}

.text-decoration-none {
    text-decoration: none !important;
}

.page-footer {
    color: #fff;
}

.page-footer .container {
    max-width: 960px;
}

.page-footer h2 {
    font-size: 3rem;
}

a.grey-link {
    color: #fff;
    text-decoration: underline;
    opacity: .75;
}

.bg-primary {
    background-color: #002B63 !important;
}

.bar-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 1310px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.bar {
    display: block;
    /* flex: 0 0 170px;
    max-width: 170px;
    width: 100%; */
    width: 170px;
    height: min-content;
    height: 360px;
    position: relative;
    top: 0;
    transition: all 0.4s ease-out !important;
}

.bar-container.open > .bar {
    top: 45px !important;
}

/* .bar:before {
    content: '';
    display: block;
    padding-top: 240%;
} */

.bar .bar-item {
    pointer-events: none;
    display: flex;
    justify-content: center;
    height: 100%;
    background: #000 center top no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    transition: margin 0.3s ease-out;
    
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */
    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}
.bar .bar-item:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.35s ease-out;
}

.bar .bar-item.opening:after {
    opacity: 1;
}

.bar .bar-item.opened {
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
}

.bar .bar-item > img {
    display: block;
    width: auto;
    height: 100%;
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

.bar .bar-item .label {
    display: block;
    width: 100%;
    height: auto;
    width: auto;
    height: 38.88888888888889%;
    position: absolute;
    right: 0;
    top: 0;
}

.bar:nth-child(1) .bar-item {
    box-shadow: 1px 4px 8px 1px #E72479;
}
.bar:nth-child(2) .bar-item {
    box-shadow: 1px 4px 8px 1px #9FF822;
}
.bar:nth-child(3) .bar-item {
    box-shadow: 1px 4px 8px 1px #FCE54D;
}
.bar:nth-child(4) .bar-item {
    box-shadow: 1px 4px 8px 1px #0AB1E0;
}
.bar:nth-child(5) .bar-item {
    box-shadow: 1px 4px 8px 1px #13E8D8;
}
.bar:nth-child(6) .bar-item {
    box-shadow: 1px 4px 8px 1px #5DFB94;
}
.bar:nth-child(7) .bar-item {
    box-shadow: 1px 4px 8px 1px #FCAC27;
}

.bar:nth-child(1) {
    top: 2.180232558139535%;
}

.bar:nth-child(2) {
    top: 90px;
    /* top: 15.26162790697674%; */
}

.bar:nth-child(3) {
    top: 60px;
    /* top: 8.72093023255814%; */
}

.bar:nth-child(4) {
    top: 30px;
    /* top: 6.540697674418605%; */
}

.bar:nth-child(5) {
    top: 75px;
    /* top: 12.3546511627907%; */
}

.bar:nth-child(7) {
    top: 30px;
    /* top: 6.104651162790698%; */
}

.bar img.bar-bg {
    width: auto;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.scroll-container {
    overflow: hidden;
    overflow-x: auto;
    position: relative;
}
.scroll-container:before {
    content: '';
    display: block;
    /* padding-top: 57.33333333333333%; */
    /* padding-top: 53%; */
    height: 670px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll-container  {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.human {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

@media (min-width:768px) {
    .bar:not(.no-hover):hover {
        /* flex: 0 0 230px;
        max-width: 230px; */
        width: 230px;
        transition: all 0.4s ease-out;
    }   
}

@media (max-width:1309px) {
    /* .bar-container {
        width: 235%;
    } */
    .scroll-container {
        height: 450px;
    }
    
    .people {
        display: none;
    }
    
    .bar.fat {
        /* flex: 0 0 230px;
        max-width: 230px; */
        width: 230px;
    }
}

.blackout {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: fixed;
    left: 0;
    top: 0;
    transition: opacity 0.5s ease-out;
}

.blackout.out {
    opacity: 0;
}

.map-marker {
    display: block;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 44%;
    top: 30%;
    z-index: 1;
    cursor: pointer;
}

.map-marker.marker-airport {
    position: absolute;
    left: 14%;
    top: 71%;
}

.map-marker.marker-Healthcare {
    position: absolute;
    left: 75%;
    top: 44%;
}

.map-marker.marker-sport{
    position: absolute;
    left: 87%;
    top: 63%;
}

.map-marker.marker-transport{
    position: absolute;
    left: 68%;
    top: 85%;
}

.map-marker.marker-finance{
    position: absolute;
    left: 60%;
    top: 57%;
}

.map-marker.marker-retail{
    position: absolute;
    left: 32%;
    top: 77%;
}

.map-marker > img {
    animation: pulse 700ms infinite;
}

.marker-popup {
    display: none;
    /* width: max-content; */
    width: 300px;
    text-align: left !important;
    background: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    opacity: 0;
    padding: 15px;
    position: absolute;
    top: -50px;
    z-index: 110;
    transform: translateY(-100%);
}

.marker-popup a.grey-link {
    color: #333;
}

/* .map-marker:hover,  */
.map-marker.active {
    z-index: 110;
}

/* .map-marker:hover .marker-popup,  */
.map-marker.active .marker-popup {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s;
}

.map-cover {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.25);
    position: fixed;
    left: 0;
    top: 0;
}

/* .map-marker:hover ~ .map-cover,  */
.map-marker.active ~ .map-cover {
    display: block;
    animation: fadeIn 0.5s;
}

.marker-popup:before {
    content: '';
    display: block;
    /* width: calc(70% + 50px); */
    height: 79px;
    border-bottom: 2px solid #000;
    position: absolute;
    top: 100%;
}

.marker-popup.pop-left {
    left: -50px;
    transform: translate(-100%, -100%);
}
.marker-popup.pop-left:before {
    width: calc(70% + 50px);
    border-left: 2px solid #000;
    margin-right: -2px;
    right: -50px;
}

.marker-popup.pop-right {
    right: -50px;
    transform: translate(100%, -100%);
}
.marker-popup.pop-right:before {
    width: calc(30% + 50px);
    border-right: 2px solid #000;
    margin-left: -2px;
    left: -50px;
}


@keyframes fadeIn {
    from { opacity: 0;}
    to { opacity: 1; }
}

@media (max-width:768px) {
    .map-container .map-marker > img {
        width: 38px;
    }
    
    .marker-popup {
        width: 240px;
        padding: 5px;
        top: -10px;
    }
    
    .marker-popup h3 {
        font-size: 16px;
    }
    
    .marker-popup p {
        font-size: 12px;
    }
    
    .marker-popup a {
        font-size: 11px;
    }
    
    .marker-popup:before {
        height: 32px;
    }
    
    .marker-popup.pop-left {
        left: 200%;
        transform: translate(-100%, -100%);
    }
    .marker-popup.pop-left:before {
        width: calc(60% - 76px);
        right: 76px;
    }
    
    .marker-popup.pop-right {
        right: 200%;
    }
    .marker-popup.pop-right:before {
        width: calc(60% - 76px);
        left: 76px;
    }
    
    .map-marker .marker-popup.pop-left.farer {
        left: 100%;
    }
    .map-marker .marker-popup.pop-left.farer:before {
        width: calc(60% - 57px);
        right: 38px;
    }
    
    .map-marker .marker-popup.pop-left.nearer {
        left: 300%;
    }
    .map-marker .marker-popup.pop-left.nearer:before {
        width: calc(60% - 114px);
        right: 114px;
    }
    
    .map-marker .marker-popup.pop-right.farer {
        right: 100%;
    }
    .map-marker .marker-popup.pop-right.farer:before {
        width: calc(60% - 57px);
        left: 38px;
    }
    
}
/* .str-inner#nf-specialcontents .bg-primary,
.str-inner#nf-specialcontents .bg-secondary {
    color: #ffffff;
}

.str-inner#nf-specialcontents .container-ebook {
    max-width: 960px;
}

@media (min-width: 992px) {
    .str-inner#nf-specialcontents .container-ebook div[class^=col]:first-child h5 {
        width: 75%;
    }
}
@media (min-width: 992px) {
    .str-inner#nf-specialcontents h5 {
        font-size: 3rem;
    }
} */


.people {
    pointer-events: none;
    height: auto;
    position: absolute;
    transform: translateX(-50%);
}

.people.people-1 {
    width: 25.16666666666667%;
    left: 50%;
    bottom: 0;
}

.people.people-2 {
    width: 16.66666666666667%;
    left: 28%;
    bottom: 19.5%;
}

.people.people-3 {
    width: 22.5%;
    left: 10%;
    bottom: 3%;
}

.people.people-4 {
    width: 31.5%;
    left: 69%;
    bottom: 11%;
}

.people.people-5 {
    width: 13.25%;
    left: 90%;
    bottom: 26%;
}

.loader {
    width: 100vw;
    height: 100vh;
    /* background: url('../imgs/loader.gif') #fbfbfb no-repeat center center; */
    background: #fbfbfb no-repeat center center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}

.loader img {
    margin-left: -300px;
    margin-top: -168.5px;
    position: absolute;
    left: 50%;
    top: 50%;
}

.video-embed-container > div {
    margin: 0 auto;
    width: 100% !important;
    height: auto !important;
    max-width: 740px;
    position: relative;
}

.video-embed-container > div:before {
    content: '';
    display: block;
    padding-top: 54.18918918918919%;
}

.video-embed-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.map-container {
    margin: 0 -70px;
    position: relative;
}

.map-container img {
    display: block;
    width: 100%;
    height: auto;
}


.page-content {
    color: #fff;
    background-color: #021138;
}

/**
* smart buildings
*/
#hero:after {
    content: '';
    display: block;
    height: 100px;
    background: rgb(2,17,56);
    background: linear-gradient(180deg, rgba(2,17,56,1) 0%, rgba(2,17,56,0.5) 75%, rgba(2,17,56,0) 100%);
    position: relative;
    z-index: 2;
}

.hero-img > img {
    display: block;
    width: 80%;
}

.hero-text {
    color: #fff;
    max-width: 650px;
    margin-top: -165px;
    margin-left: auto;
    margin-right: 40px;
    padding-bottom: 10px;
}

.hero-text.wider {
    max-width: 800px;
}

.hero-text.single-title-row {
    margin-top: -60px;
}

.hero h1 {
    font-size: 10rem;
    line-height: 1;
    margin-bottom: 20px;
}

@media (max-width:991px) {
    .hero h1 {
        margin-bottom: 10px;
    }

    .hero-text {
        margin-top: -130px;
    }

    .hero-text.single-title-row {
        margin-top: -50px;
    }

    .hero h1 {
        font-size: 8rem;
    }
}

@media (max-width:767px) {
    .hero-text {
        margin-top: -75px;
        margin-right: 20px;
    }

    .hero-text.single-title-row {
        margin-top: -25px;
    }

    .hero h1 {
        font-size: 4.5rem;
    }

    .hero p.lead {
        font-size: 1.6rem;
    }
}

@media (max-width:575px) {
    .hero-text {
        margin-top: -65px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .hero h1 {
        font-size: 4rem;
    }
}

.content-container {
    margin-top: -100px;
}

.content-container > .content > section:first-child {
    padding-top: 100px;
}

@media (max-width:767px) {
    .content-container {
        margin-top: -50px;
    }
    
    .content-container > .content > section:first-child {
        padding-top: 50px;
    }

    #hero:after {
        height: 50px;
    }
}

.intro-video {
    /* padding-top: 100px; */
}

.gradient-bottom {
    padding-bottom: 0 !important;
}

.gradient-bottom:after {
    content: '';
    display: block;
    height: 150px;
    background: rgb(3,23,64);
    background: linear-gradient(180deg, rgba(3,23,64,0) 0%, rgba(3,23,64,0.75) 25%, rgba(3,23,64,1) 80%, rgba(3,23,64,1) 100%);
    position: relative;
    z-index: 2;
}

.intro-video.gradient-bottom:after {
    height: 100px;
}

.intro-text {
    background: url('/delight/imgs/offce-bg.jpg') center center / 100% 100% no-repeat;
}

@media (max-width:767px) {
    .intro-video {
        padding-top: 60px;
    }

    .intro-video.gradient-bottom:after {
        height: 60px;
    }

    .intro-text h3 {
        font-size: 2rem;
    }

    .intro-text p {
        font-size: 1.4rem;
    }
}

@media (max-width:575px) {
    
}

.btn-back-home {
    color: #fff;
    font-size: 2.5rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, .06);
    padding: 10px 35px;
}

ul.list-style-none {
    list-style-type: none;
    padding: 0;
}

ul.key-point-list li {
    min-height: 55px;
    margin-bottom: 2rem;
    padding-left: 65px;
    position: relative;
}

ul.key-point-list li > img {
    width: 55px;
    height: 55px;
    transform: scale(1.6) translateY(-50%);
    transform-origin: top;
    position: absolute;
    left: 0;
    top: 50%;
}

ul.key-point-list li span {
    vertical-align: middle;
}

@media (max-width:767px) {
    ul.key-point-list {
        list-style-type: disc;
        padding-left: 20px;
    }
    
    
    ul.key-point-list li {
        min-height: unset;
        margin-bottom: 10px;
        padding-left: 0;
        position: relative;
    }
    
    ul.key-point-list li > img {
        display: none;
    }
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
}

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right: 10px solid #fff; 
}

#security-carousel .carousel-indicators {
    display: inline-block;
    margin: 0;
    position: relative;
}

#security-carousel .carousel-indicators > li {
    height: 5px;
    margin: 0;
    float: left;
}

#security-carousel .carousel-indicators > li.on {
    opacity: 1;
}

.carousel-controls > span {
    font-size: 2rem;
    line-height: 1;
}

#subnav-carousel {
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 0 40px;
}

#subnav-carousel .subnav-item img {
    width: 58px;
    margin: 0 auto 5px;
}

#subnav-carousel .subnav-item {
    display: block;
    text-align: center;
    width: 125px;
    padding: 0 5px;
}

#subnav-carousel .subnav-item h5 {
    color: #fff;
    opacity: 0.75;
    text-decoration: underline;
}

#subnav-carousel .owl-stage {
    margin-left: auto;
    margin-right: auto;
}

#subnav-carousel a.disabled {
    pointer-events: none;
    opacity: .5;
}

#subnav-carousel .owl-prev, #subnav-carousel .owl-next {
    width: 20px;
    height: 100%;
    background: center center / 20px auto no-repeat;
    position: absolute;
    top: 0;
}

#subnav-carousel .owl-prev {
    background-image: url('../imgs/arrow-left.png');
    background-position: left center;
    left: 0;
}

#subnav-carousel .owl-next {
    background-image: url('../imgs/arrow-right.png');
    background-position: right center;
    right: 0;
}

#subnav-carousel .owl-prev.disabled, #subnav-carousel .owl-next.disabled {
    display: none;
}

#subnav-carousel .owl-nav span {
    display: none;
}

#subnav-carousel .subnav-item h6 {
    color: #000;
    opacity: 0.75;
    text-decoration: underline;
    font-size:12.5px;
}


/* New Css Class */
.ex__link {
    /*margin-top: 10px;
    padding: 20px 0px;*/
}

.ex__link ul li {
    display: inline-block;
    width: calc(85% / 3);
    transition-delay: 0s;
    transition-duration: 0.2s;
    margin: 2%;
    line-height: 1.3em;
    vertical-align: text-top;
}

.ex__img {
    border-style: none;
    border-color: #ffffff;
}

.ex__link ul li p{
    color: #fff;
    text-decoration: underline;
    /*opacity: .75;*/
}



/*div.mod-list-news a {
    color: #000000;
    text-decoration: underline;
}*/


.mod-list-news> dl.list> .row dd .content a {
    color: #333;
    text-decoration: none;
}
 
.mod-list-news> dl.list> .row dd .content a:hover {
    color: #333;
    text-decoration: underline;
}

.mod-link.of-list> .list> li {
    list-style: none;
}

.nvwbanner{
    padding:20px 10px 20px 20px;
}


.nvwback{
    background-color: #ffffff;
}