﻿@font-face {
    font-family: Verdana;
    src: local("Verdana"), url(../font/Verdana.TTF) format("truetype");
}

@font-face {
    font-family: Abel-Regular;
    src: local("Abel-Regular"), url(../font/Abel-Regular.TTF) format("truetype");
}

@font-face {
    font-family: Oswald-Medium;
    src: local("Oswald-Medium"), url(../font/Oswald-Medium.TTF) format("truetype");
}

@font-face {
    font-family: Oswald-Regular;
    src: local("Oswald-Regular"), url(../font/Oswald-Regular.TTF) format("truetype");
}

@font-face {
    font-family: RoseMarie-Regular;
    src: local("RoseMarie-Regular"), url(../font/RoseMarie-Regular.TTF) format("truetype");
}

html {
    position: relative;
    min-height: 100%;
}

p {
    font-family: Abel-Regular;
    font-size: 1.3vw;
}

body, html {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

img {
    -webkit-user-drag: none;
}

a {
    text-decoration: none !important;
}
/*btn-Global*/
.ButtonContainer h4 {
    font-size: 3.5vw;
    font-family: RoseMarie-Regular;
    margin-bottom: 4.7vw;
    margin-right: 1vw;
}

.ButtonContainer {
    display: flex;
    align-items: center;
}

    .ButtonContainer .NormalButton {
        border-radius: 2vw;
        z-index: 800;
        width: auto;
        padding: 0.3vw 2vw;
        cursor: pointer;
    }

button a {
    color: white;
    text-decoration: none;
}


button a {
    text-decoration: none;
}


    button a:visited {
        text-decoration: none;
    }


    button a:hover {
        color: white;
        text-decoration: none;
    }


    button a:active {
        text-decoration: none;
    }

.NormalButton {
    outline: none;
    border: none;
    background-color: #3e677d !important;
    font-size: 1.7vw;
    padding: 0.2vw 1vw;
    letter-spacing: .10em;
    color: white !important;
    cursor: pointer;
    font-family: 'Segoe UI';
}

    .NormalButton:hover {
        background-color: #224355 !important;
    }

    .NormalButton:active {
        background-color: #547e94 !important;
        transform: translateY(4px);
    }
/*Header*/
header .LogoContainer {
    height: 5.5vw;
    width: 20vw;
    position: relative;
    margin-right: 5vw;
    margin-top: 1.2vw;
}

header .Logo {
    width: 100%;
    height: 100%;
}

.Menu {
    background-image: url('../images/LogoBlockAnimatedDesignTertiaryColor.svg');
    background-repeat: no-repeat;
    background-color: #152d3b;
    background-position: bottom;
    background-size: cover;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

nav:after {
    content: "";
    position: absolute;
    background-color: #E2A71F;
    height: 0.1vw;
    width: 100%;
    left: 0;
    bottom: 0;
}

.Menu .NavBarContainer .NavContainer .NavItem:hover {
    color: #E2A71F;
}

.Menu .NavBarContainer .NavContainer .NavItem {
    list-style: none;
    display: inline-block;
    padding: 0 0.5vw 1vw 0.5vw;
}

.Menu .NavBarContainer .NavContainer a {
    font-family: Abel-Regular;
    font-size: 1.2vw;
    color: white;
}

.Menu .NavBarContainer .NavContainer {
    margin: 0;
}
/*Header*/
/*footer*/
.Copywrite {
    text-align: center !important;
    font-family: Arial, sans-serif;
}

footer a {
    text-decoration: none;
}

.FooterInfo .ConvilguousFooterContainer {
    display: flex;
    justify-content: center;
    color: wheat;
    padding-top: 0.5vw;
}

    .FooterInfo .ConvilguousFooterContainer .ConvilguousFooter,
    .FooterInfo .ConvilguousFooterContainer .SocialMediaContainer {
        padding: 0 2vw;
        margin-left: 6.6vw;
    }

    .FooterInfo .ConvilguousFooterContainer .MapContainer p iframe {
        width: 25vw;
        height: 15vw;
    }

.FooterInfo .ConvilguousFooter h6, .FooterInfo .ConvilguousFooter p {
    font-size: 1vw;
    font-family: Bahnschrift;
}

.FooterInfo .ConvilguousFooterContainer h3 {
    font-size: 1.5vw;
    color: #e2a71b !important;
    font-family: 'Segoe UI';
    font-weight: 700;
    text-align: center;
}

.FooterInfo .ConvilguousFooter h6 {
    margin-bottom: 0;
}

.FooterInfo .ConvilguousFooterContainer a {
    color: wheat;
}

    .FooterInfo .ConvilguousFooterContainer a:hover {
        color: whitesmoke;
    }

.SocialMedia {
    display: flex;
    justify-content: center;
}

    .SocialMedia img {
        width: 4vw;
        margin: 0.2vw;
    }

@keyframes BouncingAnimation {
    0% {
        margin-top: 0;
    }

    25% {
        margin-top: -0.5vw;
    }
}

/*MainPage*/
.HomePage {
    padding-top: 7vw;
}

.MainPage .MainPageContainer .CallOutDiv {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 3vw;
    width:fit-content;
    margin-top:2vw;
}

    .MainPage .MainPageContainer .CallOutDiv h4 {
        font-size: 3.5vw;
        color: #e2a71b;
        font-family: RoseMarie-Regular;
        margin-bottom: 6vw;
    }

    .MainPage .MainPageContainer .CallOutDiv .NormalButton {
        background-color: #e2a825 !important;
        color: white;
        font-size: 1.7vw;
        padding: 0.2vw 1vw;
        border-radius: 2vw;
        margin: 0 1vw;
        animation: BouncingAnimation 1s infinite;
        border: none;
        text-decoration: none;
        z-index: 800;
    }

        .MainPage .MainPageContainer .CallOutDiv .NormalButton:hover {
            background-color: #e09d04 !important;
        }

        .MainPage .MainPageContainer .CallOutDiv .NormalButton:active {
            background-color: #f0bc46 !important;
        }

.MainPage {
    background-position: -12vw 16vw;
    background-color: #152d3b;
    display: flex;
    flex-direction: column;
    position: relative;
    background-image: url('../images/LogoBlockSmokeyWhiteStroke.svg');
    background-repeat: no-repeat;
    background-size: 30vw;
}

.MainPageContainer {
    display: flex;
    height: 35vw;
    position: relative;
}

    .MainPageContainer .Text {
        text-align: start;
        justify-self: center;
        align-self: start;
        color: #d7dbe0;
        padding-left: 8vw;
        padding-top: 7vw;
    }

        .MainPageContainer .Text .lblHeadline1 {
            padding: 1vw 0;
            font-size: 3.2vw;
            font-family: Oswald-Regular;
            color: white;
            font-weight: 900;
            margin: 0;
            line-height: 3.5vw;
        }

        .MainPageContainer .Text .lblHeadline2 {
            color: #e2a71b;
            margin: 0;
        }

        .MainPageContainer .Text .lblSubHeadline {
            font-family: Abel-Regular;
            font-size: 1.3vw;
            margin: 0;
        }

    .MainPageContainer img {
        width: 85%;
        height: 100%;
    }

    .MainPageContainer div {
        width: 50%;
    }
/*Section-1*/
.Section1 .SectionContainer {
    display: flex;
    padding: 0 20vw;
    margin-top: 5vw;
}

    .Section1 .SectionContainer .ImageContainer {
        width: 30%;
    }

    .Section1 .SectionContainer .TextContainer {
        width: 70%;
        padding-top: 5vw;
    }

        .Section1 .SectionContainer .TextContainer h3 {
            font-weight: 900;
            text-transform: uppercase;
            font-size: 2.5vw;
            color: #224355;
            font-family: 'Segoe UI';
            line-height: 2.7vw;
            margin: 0;
        }

    .Section1 .SectionContainer .ImageContainer .MonitoringPicture1 {
        position: absolute;
    }

        .Section1 .SectionContainer .ImageContainer .MonitoringPicture1 img {
            width: 14vw;
        }

.Section1 .ImageContainer .AnimatedGIF {
    position: absolute;
}

    .Section1 .ImageContainer .AnimatedGIF img {
        width: 11vw;
        margin: -4vw 0 0 10vw;
    }

.Section1 .SectionContainer .TextContainer .ButtonContainer {
    height: 5vw;
}

    .Section1 .SectionContainer .TextContainer .ButtonContainer h4 {
        color: #224355;
    }
/*Section-2*/
.Section2 {
    display: flex;
    justify-content: end;
    position: relative;
    height: 33.5vw;
}

    .Section2 .TextContainer {
        padding: 10vw;
        background-image: url('../images/YellowBG.svg');
        background-repeat: repeat-x;
        background-size: 26.5vw 40vw;
        background-position-y: 6.2vw;
        position: relative;
    }

        .Section2 .TextContainer h1 {
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 2.4vw;
            margin-bottom: 2vw;
            font-family: Bahnschrift;
        }

            .Section2 .TextContainer h1 span {
                font-size: 3.6vw;
                font-weight: 800;
                font-family: 'Segoe UI';
                color: #e2a71b;
            }

    .Section2 p {
        padding-right: 25vw;
        color: white;
    }

    .Section2 .TextContainer .ButtonContainer {
        display: flex;
        align-items: center;
        position: absolute;
        right: 36.5vw;
        z-index: 100;
        bottom: -3vw;
    }

        .Section2 .TextContainer .ButtonContainer h4 {
            color: #224355;
        }

        .Section2 .TextContainer .ButtonContainer a {
            font-size: 1.5vw;
        }

    .Section2 .SectionContainer {
        position: absolute;
    }

        .Section2 .SectionContainer .ImageContainer {
            position: relative;
            height: 30vw;
        }

            .Section2 .SectionContainer .ImageContainer img {
                position: absolute;
                width: 28vw;
                bottom: -3.5vw;
                right: 6vw;
                z-index: 1;
            }
/*Section-3*/
#VirtualPrivateSystem {
    height: 30vw;
    position: absolute;
    margin-top: -6vw;
}

.Section3 {
    background-image: url('../images/VPS_BG1.jpg');
    background-size: cover;
    background-position: 5vw;
}

    .Section3 .SectionContainer {
        display: flex;
        padding: 0 8vw;
    }

    .Section3 .TextContainer {
        padding: 4vw;
        text-align: center;
    }

    .Section3 .SectionContainer:nth-child(1) {
        background-color: rgba(215, 219, 224, 0.8);
        color: #152d3b;
    }

    .Section3 .SectionContainer:nth-child(2) {
        background-color: rgba(33, 33, 33, 0.8);
        color: #e2a71b;
    }

        .Section3 .SectionContainer:nth-child(2) .TextContainer p {
            color: white;
        }

    .Section3 .TextContainer h3 {
        font-size: 2vw;
        font-family: Bahnschrift;
        text-transform: uppercase;
        margin-bottom: 1vw;
        font-weight: 800;
    }

    .Section3 .TextContainer p {
        margin-bottom: 2vw;
    }

    .Section3 .TextContainer .ButtonContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3vw;
    }

        .Section3 .TextContainer .ButtonContainer h4 {
            margin-right: 1vw;
        }

    .Section3 .SectionContainer .ImageContainer {
        position: relative;
        display: flex;
        align-items: baseline;
    }

        .Section3 .SectionContainer .ImageContainer img {
            width: 23vw;
        }
/*Section-5*/
#Spamfilter {
    height: 10vw;
    position: absolute;
    margin-top: -4vw;
}

.Section5 .CarouselIndicator {
    display: none;
}

.Section5 {
    position: relative;
    padding-bottom: 2.8vw;
    padding-top: 3vw;
}

    .Section5 .SectionContainer .ImageContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: #E0E0E0;
    }

        .Section5 .SectionContainer .ImageContainer img {
            width: 22vw;
            height: auto;
            margin-left: 15vw;
            margin-top: 16vw;
        }

    .Section5 .ImageContainer h3 {
        position: absolute;
    }

        .Section5 .ImageContainer h3:nth-child(1) {
            font-size: 10vw;
            font-family: Bahnschrift;
            font-weight: 800;
            top: -7vw;
            left: 10vw;
            animation: Appear 5s linear infinite;
        }

        .Section5 .ImageContainer h3:nth-child(2) {
            top: 2.5vw;
            font-size: 8.5vw;
            font-family: Bahnschrift;
            left: 10vw;
            animation: QuickAppear 5s linear infinite;
        }

    .Section5 .TextCollection {
        display: flex;
        margin-left: 40vw;
        justify-content: center;
        flex-wrap: wrap;
        width: 50vw;
    }

        .Section5 .TextCollection .TextContainer {
            padding: 1vw 1vw 3.5vw 1vw;
            width: 20vw;
            position: relative;
        }

            .Section5 .TextCollection .TextContainer .NormalButton {
                position: absolute;
                bottom: 1vw;
            }

            .Section5 .TextCollection .TextContainer h1 {
                font-size: 1.5vw;
                margin-bottom: 1vw;
                font-family: Bahnschrift;
                color: #424242;
            }

            .Section5 .TextCollection .TextContainer p {
                margin-bottom: 2vw;
                color: #212121;
            }

            .Section5 .TextCollection .TextContainer:nth-child(1), .Section5 .TextCollection .TextContainer:nth-child(2) {
                border-bottom: 0.15vw solid #BDBDBD;
            }

            .Section5 .TextCollection .TextContainer:nth-child(1), .Section5 .TextCollection .TextContainer:nth-child(3) {
                border-right: 0.15vw solid #BDBDBD;
            }

@keyframes QuickAppear {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    24% {
        opacity: 1;
    }
}

@keyframes Appear {
    0% {
        clip-path: polygon(0 0, 0% 100%, 0 100%, 0 0);
    }

    10% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
}
/*Section-6*/
#SoftwareDevelopment {
    height: 20vw;
    position: absolute;
    margin-top: -7vw;
}

.Section6 {
    position: relative;
    background-color: #152d3b;
}

    .Section6 .Section6Container {
        display: flex;
    }

    .Section6 .TextCollection {
        padding: 7vw 0;
    }

    .Section6 .Section6Container .ImageContainer img {
        width: 40vw;
        height: 100%;
        position: absolute;
        right: 0;
        z-index: 200;
    }

    .Section6 .Section6Container .TextCollection h3 {
        font-family: Bahnschrift;
        text-transform: uppercase;
        line-height: 4vw;
        font-size: 2.5vw;
        position: absolute;
        z-index: 1;
    }

    .Section6 .Section6Container .TextCollection .TitleHolder h3:nth-child(1) {
        color: #152d3b;
        background-color: white;
        font-size: 2.55vw;
        padding-top: 0.5vw;
        padding-right: 2vw;
        padding-left: 4vw;
        top: 2vw;
        animation: SlideRight 5s linear infinite;
    }

    .Section6 .Section6Container .TextCollection .TitleHolder h3:nth-child(2) {
        color: #152d3b;
        background-color: #e2a71b;
        margin-left: 2vw;
        padding-left: 2vw;
        top: 6vw;
        width: 60vw;
        animation: SlideLeft 5s linear infinite;
    }

    .Section6 .Section6Container .TextCollection p {
        margin-top: 3vw;
        color: white;
        padding: 4vw 45vw 2vw 8vw;
    }

    .Section6 .Section6Container .TextCollection .ButtonContainer {
        display: flex;
        margin-left: 8vw;
        align-items: center;
        height: 3vw;
        margin-top: -1.5vw;
    }

        .Section6 .Section6Container .TextCollection .ButtonContainer h4 {
            color: white;
        }

    .Section6 .ImageContainer .MobileTitleHolder {
        display: none;
    }

@keyframes SlideRight {
    0% {
        left: -100vw;
        clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    }

    5% {
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
        left: -2vw;
    }

    100% {
        left: 0;
    }
}

@keyframes SlideLeft {
    0% {
        right: 0;
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
    }

    5% {
        right: 33vw;
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    }

    100% {
        right: 35vw;
    }
}
/*Section-10*/
.Section10 {
    position: relative;
}

    .Section10 .SectionContainer {
        background-color: #152d3b;
        height: 19.8vw;
        display: flex;
        padding-left: 23vw;
    }

    .Section10 .ImageContainer {
        position: absolute;
        top: -12.45vw;
        left: 2vw;
    }

        .Section10 .ImageContainer img {
            width: 25vw;
            height: auto;
        }

    .Section10 .SectionContainer h3 {
        color: white;
        font-family: Bahnschrift;
        text-transform: uppercase;
        text-align: end;
        margin-right: 1vw;
        font-size: 2vw;
        border-right: 0.2vw solid #d7dbe0;
        height: auto;
        padding: 1.5vw 1vw;
    }

    .Section10 .SectionContainer .TextContainer p {
        color: white;
        font-size: 1.2vw;
        padding-right: 5vw;
        margin-bottom: 3.2vw;
        padding-top: 2.2vw;
    }

    .Section10 .SectionContainer .TextContainer .ButtonContainer {
        display: flex;
        align-items: center;
        height: 3vw;
    }

        .Section10 .SectionContainer .TextContainer .ButtonContainer h4 {
            margin-right: 1vw;
            color: white;
        }
/*section-11*/
.Section11 {
    background-position: right -30vw;
    display: flex;
    justify-content: center;
    padding-top: 2vw;
    background-image: url('../images/ConvilguousBackgroundVerticalDarkBlue.svg');
    background-repeat: no-repeat;
    background-size: 70vw;
}

    .Section11 .SectionContainer, .Section11 .ImageContainer {
        width: 30vw;
    }

    .Section11 .ImageContainer {
        position: relative;
    }

        .Section11 .ImageContainer img {
            width: 28vw;
            position: absolute;
            bottom: 0;
        }

    .Section11 .SectionContainer {
        padding-top: 8vw;
        margin-bottom: 4vw;
    }

        .Section11 .SectionContainer h3 {
            color: #224355;
            font-size: 2.5vw;
            font-family: 'Segoe UI';
            font-weight: 900;
            text-transform: uppercase;
        }

        .Section11 .SectionContainer p {
            margin: 2vw 0;
            color: #224355;
        }

        .Section11 .SectionContainer .ButtonContainer {
            display: flex;
            width: 100%;
            align-items: center;
            height: 3vw;
        }

            .Section11 .SectionContainer .ButtonContainer h4 {
                color: #224355;
            }

#Team {
    height: 10vw;
    width: 100%;
    position: absolute;
    margin-top: -6vw !important;
    top: 0;
}

.Section12 {
    background-color: #345f78;
    position: relative;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 8vw 5vw 5vw 5vw;
}

    .Section12 .TeamContainer {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .Section12 h3 {
        font-family: Abel-Regular;
        color: white;
        font-weight: 400;
    }

    .Section12 p {
        color: #e2a71b;
    }

    .Section12 .Title {
        font-size: 3.5vw;
        text-align: center;
        font-family: Bahnschrift !important;
        font-weight: 400;
        text-transform: uppercase;
        color: #e2a71b;
    }

    .Section12 .Name {
        font-size: 1.5vw;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .Section12 .Position {
        font-size: 1vw;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .Section12 .TeamContainer .Content {
        width: 20vw;
        margin-bottom: 3vw;
    }

    .Section12 .ImageContainer {
        position: relative;
        height: 16vw;
        width: 100%;
        overflow: hidden;
    }

    .Section12 .TeamContainer .ImageContainer img {
        position: absolute;
    }

    .Section12 .TeamContainer img:nth-child(1) {
        width: 100%;
        height: 50%;
        top: 0;
    }

    .Section12 .TeamContainer img:nth-child(2) {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        width: 87%;
        height: auto;
        clip-path: polygon(84% 0, 7% 0, 6% 73%, 47% 100%, 82% 74%);
    }

    .Section12 .TeamContainer img:nth-child(3) {
        bottom: 0;
        width: 100%;
        height: 50%;
    }
/*Map*/
#map {
    height: 100%;
}
/*section 1*/
#Monitoring {
    background-position: 40vw 8vw;
    position: absolute;
    background-image: url('../images/ConvilguousBackgroundVerticalDarkBlue.svg');
    background-repeat: no-repeat;
    background-size: 80vw;
    width: 100%;
    height: 70vw;
    z-index: 0;
    margin-top: -7vw;
}
/*Section-14*/
.Section14 {
    position: relative;
    width: 100%;
    height: 25vw;
}

    .Section14 .SectionContainer {
        display: flex;
        position: absolute;
        bottom: -5vw;
        padding: 5vw;
    }

    .Section14 .BackgroundContainer {
        background-image: url(../images/VPS_BG1.jpg);
        background-size: cover;
        width: 100%;
        height: 100%;
    }

        .Section14 .BackgroundContainer .SolidColorBackground {
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.7;
        }

    .Section14 .SectionContainer .TextContainer {
        color: white;
        padding: 0 5vw;
    }

        .Section14 .SectionContainer .TextContainer h3 {
            font-size: 2vw;
            margin-bottom: 2vw;
            font-family: 'Segoe UI';
            font-weight: 900;
        }

        .Section14 .SectionContainer .TextContainer p {
        }



/*Responsive*/
@media only screen and (max-width: 1350px) {
    .Menu .NavBarContainer .NavContainer a {
        font-size: 1.6vw;
    }

    .Menu .Logo {
        margin-right: 1vw !important;
    }
    /*MainPage*/
    .MainPageContainer .ImageContainer {
        width: 43vw;
        height: 31vw;
        margin-top: 4vw;
    }

    .MainPageContainer .Text .lblHeadline1, .MainPageContainer .Text .lblHeadline2 {
        font-size: 2.5vw;
    }

    .MainPageContainer .Text .lblSubHeadline {
        font-size: 1.3vw;
    }

    .MainPageContainer .Text .CallOutDiv {
        bottom: 4vw;
    }
}

@media only screen and (max-width:1480px) {
    .Section12 {
        padding: 13vw;
    }
}

@media only screen and (max-width:1400px) {
    p {
        font-size: 1.4vw !important;
    }

    .ButtonContainer h4, .NormalButton, .CallOutDiv h4, .CallOutDiv .NormalButton {
        font-size: 2.2vw;
    }

    .ButtonContainer h4, .CallOutDiv h4 {
        font-size: 4.2vw;
        padding-bottom: 1.5vw;
    }

    .Section5 .SectionContainer .ImageContainer img {
        margin-top: 20vw;
    }
}

@media only screen and (max-width:1211px) {
    .Section12 .TeamContainer .Content {
        width: 350px;
    }

    .Section12 .ImageContainer {
        height: 280px;
    }
}

@media only screen and (max-width: 1140px) {
    .Menu .NavBarContainer .NavContainer a {
        font-size: 1.8vw;
    }
}

@media only screen and (max-width:950px) {
    .Section12 {
        padding: 13vw 28vw;
    }

        .Section12 .TeamContainer .Content {
            width: 35vw;
        }

        .Section12 .ImageContainer {
            height: 28vw;
        }
}
/*Screen-1100px*/
@media only screen and (max-width: 1100px) and (min-width:541px) {
    /*global-1100*/
    .NormalButton {
        font-size: 1.9vw;
        padding: 0.2vw 1vw;
    }

    p {
        font-size: 1.6vw !important;
    }

    .ButtonContainer h4, .CallOutDiv h4 {
        font-size: 3.3vw !important;
        padding: 0;
        margin-bottom: 4vw;
    }
    /*HomePage*/
    .MainPage .MainPageContainer .Text .lblHeadline1, .MainPage .MainPageContainer .Text .lblHeadline2 {
        font-size: 2.7vw;
    }

    .MainPage .MainPageContainer .Text .lblSubHeadline {
        font-size: 1.6vw;
    }

    .MainPage .MainPageContainer {
        height: 43vw;
    }

        .MainPage .MainPageContainer .ImageContainer img {
            width: 48vw;
            height: auto;
        }

        .MainPage .MainPageContainer .Text {
            width: 40vw;
        }
    /*section-1-1100*/
    .Section1 .SectionContainer .TextContainer h3 {
        font-size: 2.7vw;
        padding: 0;
        margin-top: 2vw;
    }
    /*Section 2*/
    .Section2 {
        margin-top: -3vw;
        height: 40vw;
    }

        .Section2 .TextContainer h1 {
            font-size: 2.9vw;
        }

            .Section2 .TextContainer h1 span {
                font-size: 4.2vw;
            }

        .Section2 .TextContainer {
            background-position-y: 17.2vw;
            background-size: 38vw;
        }

            .Section2 .TextContainer p {
                font-size: 1.5vw;
                padding-top: 0.5vw;
            }

        .Section2 .SectionContainer .ImageContainer img {
            width: 30vw;
            bottom: -10vw;
        }

        .Section2 .TextContainer .ButtonContainer {
            margin-bottom: 3vw;
        }
    /*Section 5*/
    .Section5 .SectionContainer .TextContainer h1 {
        font-size: 1.8vw;
    }

    .Section5 .SectionContainer .ImageContainer img {
        width: 30vw;
        margin-top: 16vw;
        margin-left: 9vw;
    }
    /*Section-3-1100*/
    .Section3 .TextContainer h3 {
        font-size: 2vw;
    }

    .Section3 .TextContainer p {
        font-size: 1.5vw;
    }

    .Section3 .TextContainer .ButtonContainer a, .Section3 .TextContainer .ButtonContainer h4 {
        font-size: 2.5vw;
    }

    .Section3 .SectionContainer:nth-child(2) .ImageContainer img {
        margin-top: 2vw;
    }
    /*Section-10-1100*/
    .Section10 .SectionContainer .TextContainer p {
        font-size: 1.5vw;
    }

    .Section10 .SectionContainer {
        height: 24vw;
    }

        .Section10 .SectionContainer .TextContainer .ButtonContainer h4,
        .Section10 .SectionContainer .TextContainer .ButtonContainer a {
            font-size: 2.5vw;
        }

    .Section10 .ImageContainer img {
        margin-top: 4.2vw;
    }
    /*Section11*/
    .Section11 .SectionContainer h3 {
        font-size: 2.8vw;
    }

    .Section11 .SectionContainer p {
        font-size: 1.5vw;
    }

    .Section11 .SectionContainer .ButtonContainer {
        width: 50vw;
        margin-bottom: 3vw;
    }

    .Section11 .SectionContainer, .Section11 .ImageContainer {
        width: 40vw;
    }

        .Section11 .ImageContainer img {
            width: 35vw;
        }
    /*Footer-1100*/
    .ConvilguousFooterContainer .ConvilguousFooter h6 {
        font-size: 1.7vw;
    }

    .ConvilguousFooterContainer .ConvilguousFooter p {
        font-size: 1.5vw;
    }

    .ConvilguousFooterContainer .SocialMediaContainer h3 {
        font-size: 2.3vw;
    }

    .ConvilguousFooterContainer .SocialMediaContainer {
        margin: 0;
    }

    .ConvilguousFooterContainer div {
        margin: 0 !important;
    }

    .ConvilguousFooterContainer .SocialMediaContainer .Copywrite a,
    .ConvilguousFooterContainer .SocialMediaContainer .Copywrite span {
        font-size: 1.7vw;
    }
    /*Section-12-1100*/
    .Section12 .Title {
        font-size: 3.6vw;
    }

    .Section12 .Name {
        font-size: 1.8vw;
    }

    .Section12 .Position {
        font-size: 1.5vw;
    }
}
/*Screen-840px*/
@media only screen and (max-width: 840px) {
    /*Global-840*/
    p {
        font-size: 1.8vw !important;
    }

    .NormalButton {
        font-size: 2.6vw !important;
    }

    .ButtonContainer h4, .CallOutDiv h4 {
        font-size: 4.5vw !important;
        padding-bottom: 2.2vw;
    }

    .ButtonContainer h4 {
        margin-bottom: 3vw;
    }

    .Menu {
        padding: 1vw;
        justify-content: start;
        position: relative;
    }

        .Menu .Logo {
            width: 35vw;
            height: auto;
            margin-left: 5vw;
        }
        /*SideBarMenu*/
        .Menu .NavBarContainer {
            position: absolute;
            right: 0;
            top: 0;
            padding-top: 4vw;
            transition: 0.4s;
            padding-right: 5vw;
        }

    .SideMenuBar .NavBarContainer {
        background-color: #152d3b;
        height: 100vh;
        z-index: 99999;
    }

    .Menu .NavBarContainer .NavContainer {
        padding: 0;
    }

        .Menu .NavBarContainer .NavContainer .NavItem {
            margin: 2vw 0;
            padding-left: 2vw;
            width: 100%;
        }

        .Menu .NavBarContainer .NavContainer a {
            font-size: 3.2vw;
        }

    .Menu .NavBarContainer .ToggleMenu {
        display: none;
    }

    .Menu .NavBarContainer .ToggleMenuActive {
        display: block;
    }

        .Menu .NavBarContainer .ToggleMenuActive .NavItem {
            display: block;
        }

    .SideMenubarcontainer {
        display: inline-block;
        cursor: pointer;
    }

    .SideMenuBar {
        list-style-type: none;
    }

    .bar1, .bar2, .bar3 {
        width: 7.5vw;
        height: 0.8vw;
        background-color: #e2a71b;
        margin: 1.1vw 0;
        transition: 0.4s;
    }

    .bar1 {
        animation: SideMenuBarAnimation1 linear 0.2s forwards;
        animation-direction: reverse;
    }

    .bar2 {
        animation: FadeOut linear 0.2s forwards;
        animation-direction: reverse;
    }

    .bar3 {
        animation: SideMenuBarAnimation2 linear 0.2s forwards;
        animation-direction: reverse;
    }

    .ToggleMenuIconActive .bar1 {
        transform: translate(0, 1.9vw) rotate(-45deg);
        animation: SideMenuBarAnimation1 linear 0.2s forwards;
    }

    .ToggleMenuIconActive .bar2 {
        opacity: 0;
        animation: FadeOut linear 0.2s forwards;
    }

    .ToggleMenuIconActive .bar3 {
        transform: translate(0, -1.9vw) rotate(45deg);
        animation: SideMenuBarAnimation2 linear 0.2s forwards;
    }

    @keyframes SideMenuBarAnimation1 {
        from {
            transform: translate(0, 0) rotate(0);
        }

        to {
            transform: translate(0, 1.9vw) rotate(-45deg);
        }
    }

    @keyframes SideMenuBarAnimation2 {
        from {
            transform: translate(0, 0) rotate(0);
        }

        to {
            transform: translate(0, -1.9vw) rotate(45deg);
        }
    }

    @keyframes FadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
    /*MainPage*/
    .MainPage {
        padding-top: 5vw;
    }

    #Monitoring {
        height: 75vw;
        background-position-x: 48vw;
        margin-top: -13vw;
    }
    /*Section-2-840*/
    .Section2 .TextContainer .ButtonContainer {
        bottom: -4.7vw;
    }
    /*Section-3-840*/
    .Section3 .SectionContainer:nth-child(1) .ImageContainer img {
        margin-top: 4vw;
    }

    #VirtualPrivateSystem {
        margin-top: -10vw;
    }
    /*Section-5-840*/
    .Section5 .SectionContainer .TextCollection .TextContainer {
        width: 22vw;
    }

    .Section5 .SectionContainer .ImageContainer img {
        width: 35vw;
        margin-left: 5vw;
    }

    #Spamfilter {
        margin: -13vw;
    }
    /*Section-6-840*/
    #SoftwareDevelopment {
        margin-top: -13vw;
    }
    /*Section-10-840*/
    .Section10 .SectionContainer {
        padding-bottom: 2vw;
    }

    .Section10 .ImageContainer img {
        margin-top: 6.2vw;
    }
    /*Section-12-840*/
    .Section12 {
        padding-top: 20vw !important;
    }
}

/*Screen-540*/
@media only screen and (max-width:540px) {
    /*Global-540*/
    p {
        font-size: 5.5vw !important;
    }

    .CallOutDiv h4 {
        font-size: 10vw !important;
        margin-right: 5vw;
        padding-bottom: 10vw !important;
    }

    .ButtonContainer h4 {
        font-size: 10vw !important;
        padding-bottom: 8vw !important;
    }

    .CallOutDiv .NormalButton, .NormalButton {
        font-size: 6.2vw !important;
        padding: 0 5vw !important;
        border-radius: 15vw !important;
    }
    /*Header*/
    header .Logo {
        width: 60vw !important;
    }
    /*SideBarMenu*/
    .Menu .NavBarContainer {
        padding-top: 6vw;
    }

    .bar1, .bar2, .bar3 {
        width: 10.5vw;
        height: 1.1vw;
        background-color: #e2a71b;
        margin: 1.5vw 0;
        transition: 0.4s;
    }

    .ToggleMenuIconActive .bar1 {
        animation: SideMenuBarAnimation3 linear 0.2s forwards !important;
    }

    .ToggleMenuIconActive .bar3 {
        animation: SideMenuBarAnimation4 linear 0.2s forwards !important;
    }

    .Menu .NavBarContainer .NavContainer a {
        font-size: 5vw;
    }

    .SideMenuBar .NavBarContainer {
        width: 100%;
        left: 0 !important;
    }

    @keyframes SideMenuBarAnimation3 {
        from {
            transform: translate(0, 0) rotate(0);
        }

        to {
            transform: translate(0, 2.6vw) rotate(-45deg);
        }
    }

    @keyframes SideMenuBarAnimation4 {
        from {
            transform: translate(0, 0) rotate(0);
        }

        to {
            transform: translate(0, -2.6vw) rotate(45deg);
        }
    }
    /*Main Page*/
    .MainPage .MainPageContainer {
        height: auto;
        padding-top: 6vw;
        display: block;
    }

        .MainPage .MainPageContainer .ImageContainer {
            width: auto;
            height: auto;
            margin: 0;
        }

            .MainPage .MainPageContainer .ImageContainer img {
                width: 95vw;
                height: auto;
                margin-bottom: -2vw;
            }

        .MainPage .MainPageContainer .Text {
            width: auto;
            margin: 0;
            padding: 12vw 4vw 0 4vw;
            align-items: center;
        }

            .MainPage .MainPageContainer .Text h1 {
                line-height: 10vw;
                margin-bottom: 5vw;
            }

            .MainPage .MainPageContainer .Text .lblHeadline1 {
                font-size: 8.5vw;
            }

            .MainPage .MainPageContainer .Text .lblHeadline2 {
                margin-bottom: 5vw;
            }

    .MainPageContainer .Text .lblSubHeadline {
        font-size: 4vw;
    }

    .MainPage .MainPageContainer .Text .CallOutDiv {
        position: relative;
        align-items: center;
        width: auto;
        justify-content: start;
        margin-top: 14vw;
    }

        .MainPage .MainPageContainer .Text .CallOutDiv h4 {
            padding-bottom: 2vw;
        }
    /*Section-1-540*/
    #Monitoring {
        margin-top: -25vw;
    }

    .Section1 .SectionContainer {
        display: block;
        padding: 0;
        margin: 0;
    }

        .Section1 .SectionContainer .ImageContainer {
            background-color: #e2a71b;
            width: 100%;
            height: 90vw;
            position: relative;
            width: 100%;
        }

        .Section1 .SectionContainer .TextContainer {
            width: 100%;
        }

        .Section1 .SectionContainer .ImageContainer .MonitoringPicture1 {
            bottom: -7.5vw;
            left: 45%;
            transform: translate(-50%);
        }

            .Section1 .SectionContainer .ImageContainer .MonitoringPicture1 img {
                width: 50vw;
                margin-bottom: -0.9vw;
            }

    .Section1 .ImageContainer .AnimatedGIF {
        top: 0;
        left: 40vw;
    }

        .Section1 .ImageContainer .AnimatedGIF img {
            width: 40vw;
        }

    .Section1 .SectionContainer .TextContainer {
        position: relative;
    }

        .Section1 .SectionContainer .TextContainer h3 {
            padding: 5vw 4vw 1vw 4vw;
            font-size: 6.5vw;
            line-height: 6.5vw;
        }

        .Section1 .SectionContainer .TextContainer p {
            padding: 1vw 4vw;
        }

        .Section1 .SectionContainer .TextContainer .ButtonContainer {
            padding: 0 4vw;
        }

            .Section1 .SectionContainer .TextContainer .ButtonContainer h4 {
                padding-bottom: 2vw;
                margin-right: 2vw;
            }
    /*Section-2-540*/
    .Section2 {
        height: 90vw;
        position: relative;
        background-image: url(../images//DarkBlueBG.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: 35vw;
        height: 173vw;
    }

        .Section2 .SectionContainer .ImageContainer img {
            width: 55vw;
            bottom: -60vw;
            left: -80vw;
            z-index: 0;
        }

        .Section2 .TextContainer h1 {
            font-size: 5.5vw;
            z-index: 100;
            top: 52vw;
            font-family: Oswald-Regular;
            color: white;
            font-weight: 800;
            margin-bottom: 5vw;
            /*text-shadow: -0.5px -0.5px 0 #ffffff, 0.5px -0.5px 0 #ffffff, -0.5px 0.5px 0 #ffffff, 0.5px 0.5px 0 #ffffff;*/
        }

            .Section2 .TextContainer h1 span {
                font-size: 6.5vw;
                text-shadow: none;
                font-family: 'Segoe UI';
            }

        .Section2 .TextContainer {
            width: 100%;
            background-image: none;
            padding: 80vw 4vw 0 4vw;
            z-index: 300;
        }

            .Section2 .TextContainer p {
                padding: 0;
            }

            .Section2 .TextContainer .ButtonContainer {
                bottom: -4vw;
                width: 88vw;
                left: 4vw;
            }

                .Section2 .TextContainer .ButtonContainer h4 {
                    color: white !important;
                    padding-bottom: 2vw;
                }
    /*Section-5-540*/
    #Spamfilter {
        margin: -20vw;
    }

    .Section5 {
        padding: 0;
        position: relative;
        overflow-x: hidden;
        padding-bottom: 10vw;
        background-color: #e0e0e0;
        height: 180vw;
    }

        .Section5 .SectionContainer .ImageContainer {
            position: relative;
            height: 96vw;
            background-color: #3e677d;
            overflow-y: hidden;
        }

            .Section5 .SectionContainer .ImageContainer img {
                width: 50vw;
                margin-left: 25vw;
            }

        .Section5 .TextCollection {
            width: auto;
            margin: 0;
            flex-wrap: nowrap;
            padding: 98vw 0 0 0;
            position: absolute;
            top: 0;
            user-select: none;
        }

            .Section5 .TextCollection .TextContainer {
                width: 92vw;
            }

                .Section5 .TextCollection .TextContainer h1 {
                    font-size: 6vw;
                    margin-bottom: 3vw;
                }

                .Section5 .TextCollection .TextContainer p {
                    font-size: 4.1vw;
                }

        .Section5 .SectionContainer .ImageContainer h3 {
            font-size: 12vw !important;
        }

            .Section5 .SectionContainer .ImageContainer h3:nth-child(1) {
                left: 12vw;
                color: #BDBDBD;
            }

            .Section5 .SectionContainer .ImageContainer h3:nth-child(2) {
                left: 43vw;
                top: -7vw;
                color: #FAFAFA;
            }

        .Section5 .TextCollection .TextContainer {
            border: none !important;
            margin-right: 5vw;
            padding: 0 4vw;
            width: 85vw !important;
            animation: CarouselAnimation linear 25s infinite;
        }

        .Section5 .SectionContainer .TextCollection .TextContainer .NormalButton {
            bottom: -12vw;
            left: 4vw;
        }

    @keyframes CarouselAnimation {
        19% {
            left: 0;
        }

        20% {
            left: -97vw;
        }

        39% {
            left: -97vw;
        }

        40% {
            left: -194vw;
        }

        59% {
            left: -194vw;
        }

        60% {
            left: -291vw
        }

        79% {
            left: -291vw
        }

        80% {
            left: 0;
        }
    }

    .Section5 .TextCollectionSlide1 {
        left: 0;
    }

    .Section5 .TextCollectionSlide2 {
        left: -97vw;
    }

    .Section5 .TextCollectionSlide3 {
        left: -194vw;
    }

    .Section5 .TextCollectionSlide4 {
        left: -291vw;
    }

    .Section5 .CarouselIndicator {
        display: block;
    }

        .Section5 .CarouselIndicator .carousel-indicators li {
            background-color: #e2a825;
        }
    /*Section 6*/
    #SoftwareDevelopment {
        margin-top: -17vw;
    }

    .Section6 .Section6Container {
        flex-direction: column;
        padding-bottom: 7vw;
    }

        .Section6 .Section6Container .ImageContainer {
            order: -1;
            position: relative;
            height: 60vw;
            overflow: hidden;
        }

            .Section6 .Section6Container .ImageContainer img {
                top: 0;
                width: 100%;
                height: 80vw;
                z-index: 1;
            }

            .Section6 .Section6Container .ImageContainer .MobileTitleHolder {
                z-index: 100;
                padding: 3vw 0;
                text-align: center;
                display: inline-block;
                margin-right: 10vw;
                animation: SlideToRight 5s linear infinite;
            }

    .Section6 .TitleHolder {
        display: none;
    }

    .Section6 .MobileTitleHolder h3 {
        color: white;
        font-size: 6vw !important;
        line-height: 7.2vw !important;
        font-family: Bahnschrift;
        text-transform: uppercase;
        text-align: start;
        padding: 3vw 1vw 3vw 3vw;
        background-color: rgba(226, 166, 27, 0.8);
    }

    @keyframes SlideToRight {
        0% {
            left: -250vw;
        }

        10% {
            left: 0;
        }
    }

    .Section6 .MobileTitleHolder {
        position: relative;
    }

    .Section6 .TextCollection {
        padding: 0 4vw;
    }

        .Section6 .TextCollection p {
            padding: 0 !important;
        }

    .Section6 .Section6Container .TextCollection .ButtonContainer h4 {
        font-size: 6vw;
        padding-bottom: 2vw;
        margin-right: 2vw;
    }

    .Section6 .Section6Container .TextCollection .ButtonContainer {
        margin-top: 7vw;
        margin-bottom: 10vw;
        margin-left: 0;
    }
    /*section-3-540*/
    .Section3 .SectionContainer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
        padding-bottom: 7vw;
    }

        .Section3 .SectionContainer .ImageContainer {
            justify-content: center;
        }

            .Section3 .SectionContainer .ImageContainer img {
                width: 55vw;
            }

    .Section3 .TextContainer {
        padding: 0 4vw;
    }

        .Section3 .TextContainer h3 {
            font-size: 6vw;
            text-align: start;
            font-family: 'Segoe UI';
            margin-bottom: 5vw;
        }

        .Section3 .TextContainer p {
            margin-top: 3vw;
            font-size: 4vw;
            text-align: start;
        }

        .Section3 .TextContainer .ButtonContainer h4 {
            font-size: 6vw;
            text-align: start;
            margin-right: 4vw;
            padding-bottom: 2vw;
        }

        .Section3 .TextContainer .ButtonContainer {
            margin-top: 7vw;
            margin-bottom: 7vw;
            justify-content: start;
        }

    .Section3 .SectionContainer:nth-child(2) .ImageContainer {
        order: 1;
        height: 60vw;
        z-index: 1;
    }

        .Section3 .SectionContainer:nth-child(2) .ImageContainer img {
            margin-top: 8vw;
            position: absolute;
        }

    .Section3 .SectionContainer:nth-child(1) .ImageContainer img {
        margin-top: 8vw;
    }

    .Section3 .SectionContainer:nth-child(1) .ImageContainer {
        background: #3e677d;
        width: 100%;
        text-align: center;
    }

    .Section3 .SectionContainer:nth-child(2) .TextContainer {
        order: 2;
        z-index: 9999;
    }

    #VirtualPrivateSystem {
        margin-top: -15vw;
    }
    /*Section-10-540*/
    .Section10 .SectionContainer {
        flex-direction: column;
        height: auto;
        padding: 0 4vw;
        margin-top: 0 !important;
        background: none;
        padding-bottom: 7vw;
    }

        .Section10 .SectionContainer .TextContainer {
            width: 100%;
        }

        .Section10 .SectionContainer h3 {
            font-size: 6vw;
            text-align: start;
            border: none;
            padding: 0;
            color: #3e677d;
            font-weight: 900;
            font-family: 'Segoe UI';
        }

        .Section10 .SectionContainer .TextContainer p {
            color: #152d3b;
            font-size: 4vw;
            margin-top: -3vw;
        }

    .Section10 .ImageContainer {
        position: relative;
        padding-top: 5vw;
        width: 100%;
        background-color: #e2a71b;
        left: 0;
        top: 0;
    }

        .Section10 .ImageContainer img {
            width: 60vw;
            margin-left: 15vw;
            margin-bottom: -0.7vw;
        }

    .Section10 .SectionContainer .TextContainer .ButtonContainer {
        margin-bottom: 10vw;
        margin-top: 8vw;
    }

        .Section10 .SectionContainer .TextContainer .ButtonContainer h4 {
            font-size: 6vw;
            color: #152d3b;
            padding-bottom: 2vw;
            margin-right: 2vw;
        }
    /*Section-11-540*/
    .Section11 {
        flex-direction: column;
        padding-bottom: 10vw;
    }

        .Section11 div {
            width: 100%;
        }

        .Section11 .SectionContainer {
            order: 2;
            padding: 4vw 4vw 4vw 4vw;
            width: 100%;
        }

        .Section11 .ImageContainer {
            order: 1;
            background-color: #e2a71b;
            width: 100%;
            margin-top: -2vw;
            height: 77vw;
            overflow-y: hidden;
            width: 100%;
        }

            .Section11 .ImageContainer img {
                width: 70vw;
                margin-left: 10vw;
                margin-bottom: -23vw;
            }

        .Section11 .SectionContainer h3 {
            font-size: 6vw;
            font-family: 'Segoe UI';
            font-weight: 900;
            text-transform: uppercase;
            color: #3e677d;
        }

        .Section11 .SectionContainer p {
            font-size: 4vw;
            margin-top: 5vw;
            margin-bottom: 5vw;
        }

        .Section11 .SectionContainer .ButtonContainer h4 {
            padding-bottom: 2vw;
            margin-right: 2vw;
        }
    /*Section-12-540*/
    .Section12 {
        padding-top: 28vw !important;
    }

        .Section12 .Title {
            font-size: 7vw;
        }

        .Section12 .Name {
            font-size: 5vw;
        }

        .Section12 .Position {
            font-size: 1.5vw;
        }

        .Section12 .TeamContainer {
            flex-direction: column;
            align-items: center;
        }

            .Section12 .TeamContainer .Content {
                width: 75vw;
                margin-bottom: 8vw;
            }

        .Section12 .ImageContainer {
            height: 56vw;
        }

        .Section12 .TeamContainer img:nth-child(1) {
            width: 100%;
            height: 50%;
        }

        .Section12 .TeamContainer img:nth-child(2) {
            width: 87%;
            clip-path: polygon(84% 0, 7% 0, 6% 73%, 47% 100%, 82% 74%);
        }

        .Section12 .TeamContainer img:nth-child(3) {
            width: 100%;
            height: 50%;
        }

    #Team {
        margin-top: -20vw !important;
    }
    /*footer-540*/
    .FooterInfo .ConvilguousFooterContainer {
        flex-direction: column;
        padding-top: 5vw;
        padding-bottom: 15vw;
    }

        .FooterInfo .ConvilguousFooterContainer .ConvilguousFooter {
            margin: 0;
        }

            .FooterInfo .ConvilguousFooterContainer .ConvilguousFooter h6 {
                font-size: 5vw;
                text-align: center;
            }

            .FooterInfo .ConvilguousFooterContainer .ConvilguousFooter p {
                font-size: 4vw;
                text-align: center;
            }

        .FooterInfo .ConvilguousFooterContainer .MapContainer {
            display: flex;
            justify-content: center;
        }

            .FooterInfo .ConvilguousFooterContainer .MapContainer p iframe {
                width: 85vw;
                height: 85vw;
                margin: 5vw 0;
            }

    .FooterInfo .SocialMediaContainer h3 {
        font-size: 6vw;
    }

    .FooterInfo .SocialMediaContainer {
        margin: 0 !important;
    }

        .FooterInfo .SocialMediaContainer .SocialMedia a img {
            width: 12vw;
        }

        .FooterInfo .SocialMediaContainer .SocialMedia a {
            margin: 2vw;
        }

        .FooterInfo .SocialMediaContainer .Copywrite span,
        .FooterInfo .SocialMediaContainer .Copywrite a {
            font-size: 5vw;
        }
}

@media only screen and (max-width:350px) {
    /*Global*/
    .ButtonContainer h4 {
        padding-bottom: 4vw !important;
    }
    /*MainPage*/
    .HomePage .MainPage .MainPageContainer .ImageContainer img {
        width: 90vw;
    }
    /*Section-5-350*/
    .Section5 {
        height: 205vw;
    }
}

@media only screen and (max-width:240px) {
    .Section10 .SectionContainer .TextContainer .ButtonContainer,
    .Section11 .SectionContainer .ButtonContainer {
        width: 88vw;
    }

    .ButtonContainer h4 {
        padding-bottom: 2vw !important;
    }
}

@media only screen and (max-width:180px) {
    .ButtonContainer h4 {
        padding-bottom: 0vw !important;
    }

    .Section12 {
        height: 55vh;
    }
}

@media only screen and (max-width:560px) {
    .Section12 {
        padding: 17vw 20vw;
    }
}
/*Request Form*/
.RequestFormDiv {
    /*padding-top: 19.5vw;*/
    padding-top: 10vw;
    /*padding-bottom: 14vw;*/
    padding-bottom: 5vw;
    background-color: #CFD8DC;
    position: Relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .RequestFormDiv .RequestContainer .MobilePic {
        display: none;
    }

    .RequestFormDiv .ImageContainer {
        position: relative;
        width: 2vw;
        height: 20vh;
    }

        .RequestFormDiv .ImageContainer:nth-child(1) img {
            margin-right: -85px;
            z-index: 600;
            position: absolute;
            top: -180px;
            right: 14px;
            width: 215px;
        }

        .RequestFormDiv .ImageContainer:nth-child(3) img {
            margin-left: -44px;
            z-index: 600;
            margin-top: 90px;
            position: absolute;
            top: -195px;
            left: 4px;
            width: 140px;
        }

    .RequestFormDiv h3 {
        font-size: 30px;
        font-family: Bahnschrift;
    }

    .RequestFormDiv p {
        font-size: 26px;
        margin: 0;
    }

    .RequestFormDiv .RequestContainer .Form .Headline {
        font-size: 35px;
    }

    .RequestFormDiv span {
        font-size: 19px;
        font-family: Abel-Regular;
        font-weight: 600;
    }

.Form .InputContainer {
    display: flex;
    width: 100%;
}

    .Form .InputContainer .VisitorInfo, form .InputContainer .MessageInput {
        width: 50%;
        padding-top: 9px;
    }

    .Form .InputContainer .VisitorInfo {
        display: flex;
        flex-wrap: wrap;
        padding-top: 32px;
    }

        .Form .InputContainer .VisitorInfo div {
            width: 50%;
        }

        .Form .InputContainer .VisitorInfo .TextBox {
            width: 95%;
        }

.Form {
    width: 80vw;
    background-color: #ECEFF1;
    padding: 30px;
}

.ContactByDiv #IsContactByWhatsAppSelected {
    margin-right: 2vw;
}

.ContactByDiv #lblContactByWhatsApp {
    margin-left: 2vw;
}

.ContactByDiv .ContactOption {
    margin-right: 5px;
}

.Form h3 {
    font-weight: 500;
    font-family: Bahnschrift;
    font-size: 18px;
    padding: 0;
    margin: 0;
}

    .Form h3 span {
        font-size: 14px;
        font-weight: 100;
    }

.MessageInput .TextArea {
    resize: none;
    width: 98.5%;
    height: 88%;
    font-size: 16px;
    font-family: Abel-Regular;
    padding: 5px;
}

.ServicesInput {
    text-align: center;
    margin-bottom: 20px;
}

    .ServicesInput input {
        margin-left: 0.2vw;
        margin-right: 1vw;
    }

.ContactByDiv {
    text-align: center;
    margin-top: 20px;
    width: 100% !important;
}

.ButtonContainer input {
    width: 100%;
    background-color: #152d3b;
    color: white;
    padding: 5px;
    margin-top: 20px;
    cursor: pointer;
}

.TextBox:disabled {
    background: #9E9E9E;
}

.RequestFormDiv .RequestContainer .Form .InputContainer .VisitorInfo .TextBoxContainer {
    padding-bottom: 23px;
    position: relative;
    z-index: 800;
}

    .RequestFormDiv .RequestContainer .Form .InputContainer .VisitorInfo .TextBoxContainer .TextBox {
        padding: 4px;
    }

.ErrorMessage {
    color: red;
    margin-top: 40px;
    text-align: center;
    font-size: 18px !important;
    font-weight: 400;
    position: absolute;
    left: 5px;
    top: -14px;
}

.GeneralErrorMessage {
    color: red;
    text-align: center;
    width: 100%;
}

.RequestFormDiv .RequestContainer .ServicesInput .ServiceOption {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

    .RequestFormDiv .RequestContainer .ServicesInput .ServiceOption .CheckBox {
        display: flex;
        flex-direction: row;
        width: 200px;
        justify-content: start;
    }

        .RequestFormDiv .RequestContainer .ServicesInput .ServiceOption .CheckBox input[type="checkbox"] {
            margin-right: 5px;
            z-index: 999;
        }

.ContactByDiv .ContactByCheckBox {
    display: flex;
    justify-content: center;
    width: 100% !important;
    flex-wrap: wrap;
}

    .ContactByDiv .ContactByCheckBox .ContactOption {
        width: 120px;
        display: flex;
        justify-content: center;
    }

.ContactMenu {
    background-color: #e2a71b !important;
    color: #fafafa !important;
    padding: 5px 20px !important;
    border-radius: 20px;
    top: 1vw;
    right: 6vw;
    white-space: nowrap;
}

    .ContactMenu:hover {
        background-color: #fcc23a !important;
    }

    .ContactMenu:active {
        background-color: #c48f12 !important;
    }

@media only screen and (max-width:1140px) {
    .ContactMenu {
        position:absolute;
    }
}
    @media only screen and (max-width:1089px) {
        .Form .InputContainer .VisitorInfo {
            flex-direction: column;
        }

            .Form .InputContainer .VisitorInfo div {
                width: 100%;
            }
    }

    @media only screen and (max-width:590px) {
        .Form .InputContainer {
            flex-direction: column;
        }

            .Form .InputContainer div {
                width: 100% !important;
            }

        .MessageInput .TextArea {
            height: 30vh;
        }
    }

    @media only screen and (max-width:840px) {
        .RequestFormDiv {
            padding-top: 20vw;
        }

            .RequestFormDiv .RequestContainer .Form {
                padding-top: 12vw;
            }

        .ContactMenu {
            padding: 0 !important;
            padding-left: 2vw !important;
            border-radius: 0;
            position: relative !important;
            top: 0;
            right: 0;
            background-color: transparent !important;
            color: #fafafa !important;
        }

            .ContactMenu:hover {
                background-color: transparent !important;
                color: #e2a71b !important;
            }

        .NavItem {
            padding-right: 3vw !important;
            padding-top: 1vw !important;
            padding-bottom: 1vw !important;
        }
    }

    @media only screen and (max-width:540px) {
        .RequestFormDiv {
            padding-top: 51.6vw;
        }

            .RequestFormDiv .RequestContainer .Form {
                padding-top: 23vw;
            }

            .RequestFormDiv .ImageContainer img {
                display: none;
            }

            .RequestFormDiv .RequestContainer .MobilePic {
                display: block;
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                width: 80vw;
                top: 24vw;
            }
    }

    @media only screen and (max-width:460px) {
        .ContactByDiv .ContactByCheckBox .ContactOption {
            justify-content: end;
        }

        .ContactByDiv .ContactByCheckBox {
            justify-content: end;
            flex-direction: column;
            flex-wrap: nowrap;
        }
    }
