.menu {
    background-color: #ffffff;
    height: 300px;
}

@keyframes scrolling {
    0% {
        background-position: left;
    }

    50% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.navbar .navbar-brand {
    position: relative;
}

.navbar .navbar-caption-wrap {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -ms-transform: translateY(3%);
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .project-banner-offset {
        height: 32px;
    }
}

@media(min-width:992px) {
    .project-banner-offset {
        display: none;
    }
}

.project-banner {
    height: 32vh;
    background-position-y: 50%;
    background: url('../images/SmartBanner.png') no-repeat;
    background-size: cover;
    background-position: center bottom;
}

@media(max-width:991px) {
    .project-banner {
        margin-top: 50px;
        background-size: cover;
        height: 16vh;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .project-banner {
        margin-top: 85px;
        background-size: cover;
        height: 24vh;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1366px) and (min-width:1024px) {
    .project-banner {
        margin-top: 0;
    }
}

.extHeader {
    background: #fff;
}

.cid-sdlXs4tydj {
    background-image: url('../images/1_Homepage_Background.png');
    min-height: 80vh;
    background-size: cover;
    -webkit-animation: scrolling 60s infinite ease-in-out;
    animation: scrolling 60s infinite ease-in-out;
    background-position: left;
}

@media(max-width:991px) {
    .cid-sdlXs4tydj {
        min-height: 100vh;
        background-size: auto 100%;
    }
}

.cid-design2bg {
    width: 100%;
}

.cid-design2bg .bg-box {
    position: relative;
}

@media(max-width:991px) {
    .cid-design2bg .bg-box {
        margin-top: 50px;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .cid-design2bg .bg-box {
        margin-top: 114px;
    }
}

.cid-design2bg .bg-box::after {
    display: block;
    content: '';
    padding-bottom: 56.25%;
}

.cid-design2bg .bg-box>img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.home-content {
    padding: 2rem;
    padding-bottom: 150px;
    text-align: center;
    background: linear-gradient(to bottom, #50bebe1a 0, #0099991a 50%, #0099b01a 83%, #0099cb00 100%);
}

@media(max-width:991px) {
    .home-content {
        min-height: 60vh;
    }
}

.home-content .home-title {
    color: #008282;
    font-variant-caps: small-caps;
    font-size: 2.5rem;
    border-bottom: solid 2px #099;
}

@media(max-width:991px) {
    .home-content .home-title {
        font-size: 1.5rem;
    }
}

.home-content .home-text {
    font-size: 1.5rem;
}

@media(max-width:991px) {
    .home-content .home-text {
        font-size: 1rem;
    }
}

.extHeader {
    overflow: hidden;
}

.extFooter {
    position: absolute;
    bottom: 0;
    width: 100%;
}

@media(max-width:991px) {
    .extFooter {
        bottom: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, .9);
        color: #000;
        display: -webkit-flex;
        display: flex;
    }
}

.copyright {
    display: block !important;
}

@media(min-width:992px) {
    .menu-icon {
        position: absolute;
        top: 0;
        left: 2%;
    }
}

.navbar .menu-content-top {
    padding-left: 9.75rem;
}

.navbar-logo {
    display: none !important;
}

.menu-bottom {
    padding-left: 10rem !important;
}


@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .menu-bottom {
        padding-left: 7rem !important;
    }
}

@media(max-width:991px) {
    .menu-icon {
        display: none !important;
    }

    .menu-bottom {
        background: #fff !important;
    }

    button.navbar-toggler .hamburger span {
        background: #099;
    }
}

.vmv-pc,
.vmv-ipad {
    float: left;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    position: relative;
}

.vmv-pc img,
.vmv-ipad img {
    max-width: 100%;
    max-height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
}

@media(max-width:991px) {

    .vmv-pc,
    .vmv-ipad {
        display: none;
    }
}

.float-button-panel {
    position: fixed;
    bottom: 1.5rem;
    right: 0;
    z-index: 200;
}

.float-button-panel button {
    border: none;
    outline: none;
    background: rgba(255, 255, 255, .7);
    border: solid 1px #317085;
    color: #317085;
    cursor: pointer;
    padding: 0 .8rem 1.2rem;
    margin: 1rem .5rem 2rem;
    border-radius: 100%;
    font-size: 2rem;
    display: inline-block;
    transition: background .1s ease;
    position: relative;
}

.float-button-panel button:hover {
    color: #fff;
    text-decoration: none;
    background: #317085;
}

.float-button-panel button:hover::after {
    color: #fff;
}

.float-button-panel button::after {
    position: absolute;
    left: 50%;
    bottom: 8%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    font-size: .9rem;
    color: #317085;
    text-transform: uppercase;
    user-select: none;
}

.float-button-panel button.btn-top::after {
    content: 'TOP';
}

.float-button-panel button.btn-back {
    padding: 0 1rem 1.2rem .6rem;
}

.float-button-panel button.btn-back::after {
    content: 'BACK';
}

@media(max-width:991px) {
    .pc-only {
        display: none;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .pc-only {
        display: none;
    }
}

@media(min-width:992px) {
    .phone-only {
        display: none;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .phone-only {
        display: none;
    }
}

@media(min-width:992px) {
    .ipad-only {
        display: none;
    }
}

@media(max-width:991px) {
    .ipad-only {
        display: none;
    }
}

@media(orientation:portrait) and (max-height:1366px) and (max-width:1024px) and (min-height:1024px) and (min-width:768px) {
    .ipad-only {
        display: block;
    }
}

@media(max-width:370px) {
    .menu-m-left img {
        display: none;
    }
}

@media(max-width:405px) {
    .menu-m-right img {
        display: none;
    }
}

@media(min-width:1500px) {
    html {
        background: linear-gradient(315deg, #dceaff, #e4fcee, #e4fff1, #dceaff);
        background-size: 600% 600%;
        -webkit-animation: BGRun 10s ease infinite;
        -moz-animation: BGRun 10s ease infinite;
        animation: BGRun 10s ease infinite;
    }

    body {
        max-width: 1500px;
        margin: auto auto;
    }

    .extHeader {
        width: 1500px !important;
    }

    .float-button-panel {
        width: 1500px;
        position: absolute;
    }

    .float-button-panel>* {
        float: right;
    }
}

@-webkit-keyframes BGRun {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@-moz-keyframes BGRun {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes BGRun {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.float-button-panel button.btn-top i {
    vertical-align: text-top;
}

@media(min-width:992px) {
    .d-flex {
        display: -webkit-flex;
        display: flex;
    }
}