@import url('https://fonts.cdnfonts.com/css/verdana');


@media (max-width: 768px) {

    * {
        font-family: 'Verdana', sans-serif;
        user-select: none;
    }

    a {
        text-decoration: none;
        color: black;
    }


    /*Burger-Menu*/

    .menu {
        position: relative;
        width: 30px;
        height: 30px;
        margin: 25px;
    }

    .menu span {
        margin: 0 auto;
        position: relative;
        top: 12px;
    }

    .menu span:before,
    .menu span:after {
        position: absolute;
        content: '';
    }

    .menu span,
    .menu span:before,
    .menu span:after {
        width: 30px;
        height: 3px;
        background-color: #000000;
        display: block;
    }

    .menu span:before {
        margin-top: -12px;
    }

    .menu span:after {
        margin-top: 12px;
    }

    /*Fake-Trigger*/
    #sized {
        width: 60px;
        height: 50px;
        color: transparent;
        background-color: transparent;
        border: transparent;
    }

    /*Modal-Box*/
    .modalx {
        display: none;
        position: fixed;
        z-index: 1;
        padding: 0.5%;
        margin: 0;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow: none;
    }

    .modal-content {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
        background-color: #ffffff;
        font-family: 'Verdana', sans-serif;

    }

    .modal-header {
        padding: 2px 16px;
        background-color: #ffffff;
        border-bottom: none;
        height: 20vh;
    }

    .modal-body {
        padding: 2px 16px;
        background-color: #ffffff;
    }

    .modal-footer {
        padding: 2px 16px;
        background-color: #ffffff;
        color: black;
        border-top: none;
        text-align: center;
    }

    .modal-footer hr {
        margin-top: 20vh;
    }

    .modal-footer>p {
        color: #000000
    }

    .modal-footer h3 {
        text-transform: none;
        font-size: 4vh;

    }

    .close {
        color: #000000;
        float: right;
        font-size: 5em;
        opacity: 1;
    }

    .close:hover,
    .close:focus {
        color: #008abf;
        text-decoration: none;
        cursor: pointer;
    }

    @-webkit-keyframes zoomIn {
        from {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
        }

        50% {
            opacity: 1;
        }
    }

    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn;
    }

    .animated {
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }


    /*Navigation Inner Styling*/

    .nav ul li a {
        text-decoration: none;
    }

    .nav ul li a.four {
        color: #4e8164;
    }

    .nav ul li a.three {
        color: #338383;
    }

    .nav ul li a.two {
        color: #2788a4;
    }

    .nav ul li a.one {
        color: #008abf;
    }


    /*Mobile Optimization*/
    /* Portrait Tablet to Landscape and Desktop */
    @media (min-width:768px) and (max-width:979px) {

        .nav ul li {
            display: block;
            height: 45px;
            padding: 5vh;

        }

        .nav ul {
            clear: both;
            width: 100%;
            text-align: center;
            padding: 0;
        }

        .nav ul li a {
            padding: 0;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 6vw;
            letter-spacing: -0.05em;
        }
    }

    /* Landscape-Phone to Portrait Tablet*/
    @media (max-width:767px) {

        .nav ul li {
            display: block;
            height: 38px;
            padding: 5vh;

        }

        .nav ul {
            clear: both;
            width: 100%;
            text-align: center;
            padding: 0;
        }

        .nav ul li a {
            padding: 0;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 6vw;
            letter-spacing: -0.05em;
        }
    }

    /*Landscape-Phone Downwards*/
    @media (max-width: 480px) {

        .nav ul li {
            display: block;
            height: 38px;
            padding: 5vh;
        }

        .nav ul {
            clear: both;
            width: 100%;
            text-align: center;
            padding: 0;
        }

        .nav ul li a {
            padding: 0;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 10vw;
            letter-spacing: -0.05em;
        }
    }


    .navigation {
        display: block;
        position: fixed;
        top: 0vw;
        right: 0vw;
        z-index: 10;
        margin: 0;
        padding: 0;
    }

    .title {
        position: relative;
        top: 2.5vh;
        left: 2.5vh;
        text-align: left;
    }

    .services {
        margin-top: 4vh;
        margin-bottom: 10vh;
    }

    #infographic article {
        width: 90vw;
        margin-bottom: 20px;
        cursor: pointer;
        left: 5vw;
        position: relative;
        overflow-y: show;


    }

    #infographic article header {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }

    #infographic article header i {
        display: flex;
        font-size: 2em;
        border-radius: 50%;
        background-clip: padding-box;
        padding: 14px;
        transition: transform 0.5s;
        color: #fff;
        border: 5px solid #ffffff;
        margin: -12px 0 -12px -20px;
        justify-content: center;
        align-items: center;
        min-width: 90px;
        height: 90px;
    }

    #infographic article.active header i {
        transform: none;
    }

    #infographic article .body {
        background: white;
        padding: 0 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        max-height: 0;
        transition: max-height 0.5s, padding 0.5s;
        overflow: hidden;
    }

    #infographic article .body .btn {
        padding: 3px 10px;
        text-transform: uppercase;
    }

    #infographic :nth-child(even) article {
        text-align: right;
        transform: translateX(-100%);
    }

    #infographic :nth-child(even) article header {
        flex-flow: row-reverse;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    #infographic :nth-child(even) article header i {
        margin: -16px -20px -16px 0;
    }

    #infographic section:nth-child(odd) article.active header {
        border-bottom-right-radius: 0;
    }

    #infographic section:nth-child(even) article.active header {
        border-bottom-left-radius: 0;
    }

    #infographic article.active .body {
        padding: 10px;
        max-height: 300px;
        border: 1px solid;
        background-color: white;
    }


    #infographic article[data-step="1"] {
        margin-left: 0px;
    }

    #infographic article[data-step="2"] {
        margin-left: 0px;
    }

    #infographic article[data-step="3"] {
        margin-left: 0px;
    }

    #infographic article[data-step="4"] {
        margin-left: 0px;
    }

    #infographic article[data-step="5"] {
        margin-left: 0px;
    }

    #infographic article[data-step="6"] {
        margin-left: 0px;
    }

    #infographic article[data-step="7"] {
        margin-left: 0px;
    }

    .background-blur {
        position: fixed;
        object-fit: cover;
        background: radial-gradient(circle at center, rgb(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 100%);
        height: 100vh;
        width: 100vw;
        top: 0;
        right: 0;
        z-index: -1;
        overflow-y: scroll;
        overflow-x: hidden;
    }




    @-webkit-keyframes scale {
        100% {
            -webkit-clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
        }
    }

    @-moz-keyframes scale {
        100% {
            -webkit-clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
        }
    }

    @-o-keyframes scale {
        100% {
            -webkit-clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
        }
    }

    @keyframes scale {
        100% {
            -webkit-clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(45vw 40vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
        }
    }

    @-webkit-keyframes hide {
        100% {
            fill: transparent;
        }
    }

    @-moz-keyframes hide {
        100% {
            fill: transparent;
        }
    }

    @-o-keyframes hide {
        100% {
            fill: transparent;
        }
    }

    @keyframes hide {
        100% {
            fill: transparent;
        }
    }

    @-webkit-keyframes off {
        100% {
            opacity: 0;
        }
    }

    @-moz-keyframes off {
        100% {
            opacity: 0;
        }
    }

    @-o-keyframes off {
        100% {
            opacity: 0;
        }
    }

    @keyframes off {
        100% {
            opacity: 0;
        }
    }

    @-webkit-keyframes on {
        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes on {
        100% {
            opacity: 1;
        }
    }

    @-o-keyframes on {
        100% {
            opacity: 1;
        }
    }

    @keyframes on {
        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes logo {
        100% {
            color: #dedede;
        }
    }

    @-moz-keyframes logo {
        100% {
            color: #dedede;
        }
    }

    @-o-keyframes logo {
        100% {
            color: #dedede;
        }
    }

    @keyframes logo {
        100% {
            color: #dedede;
        }
    }

    @-webkit-keyframes type {
        0% {
            width: 0;
        }
    }

    @-moz-keyframes type {
        0% {
            width: 0;
        }
    }

    @-o-keyframes type {
        0% {
            width: 0;
        }
    }

    @keyframes type {
        0% {
            width: 0;
        }
    }

    @-webkit-keyframes type2 {
        0% {
            width: 0;
        }

        50% {
            width: 0;
        }

        100% {
            width: 100;
        }
    }

    @-moz-keyframes type2 {
        0% {
            width: 0;
        }

        50% {
            width: 0;
        }

        100% {
            width: 100;
        }
    }

    @-o-keyframes type2 {
        0% {
            width: 0;
        }

        50% {
            width: 0;
        }

        100% {
            width: 100;
        }
    }

    @keyframes type2 {
        0% {
            width: 0;
        }

        50% {
            width: 0;
        }

        100% {
            width: 100;
        }
    }

    @-webkit-keyframes expand {
        25% {
            -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
            clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            fill: #008abf;
        }

        50% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            fill: #4e8164;
        }

        75% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            fill: #008abf;
        }

        100% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            fill: #4e8164;
        }
    }

    @-moz-keyframes expand {
        25% {
            -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
            clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            fill: #008abf;
        }

        50% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            fill: #4e8164;
        }

        75% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            fill: #008abf;
        }

        100% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            fill: #4e8164;
        }
    }

    @-o-keyframes expand {
        25% {
            -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
            clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            fill: #008abf;
        }

        50% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            fill: #4e8164;
        }

        75% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            fill: #008abf;
        }

        100% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            fill: #4e8164;
        }
    }

    @keyframes expand {
        25% {
            -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
            clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
            fill: #008abf;
        }

        50% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
            fill: #4e8164;
        }

        75% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
            fill: #008abf;
        }

        100% {
            -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
            fill: rgb(78, 129, 100);
        }
    }


    @keyframes rotate {

        0%,
        20% {
            transform: translateY(0);
        }

        25%,
        45% {
            transform: translateY(-75px);
        }

        50%,
        70% {
            transform: translateY(-150px);
        }

        75%,
        95% {
            transform: translateY(-225px);
        }

        100% {
            transform: translateY(-300px);
        }
    }

    .go-back {

        position: relative;
        bottom: 2.5vh;
        border: 42.5px;
        width: 15vw;
        height: 4vh;
        left: 48vw;
        margin-bottom: 10vh;
        margin-top: 10vh;
    }

    .go-back a {
        text-decoration: none;
        color: black;
    }

}