/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
@media (max-width: 465px) {
    .sub-navbar {
        font-size: 2.2vmin;
        position: absolute;
        top: 24vmin;
        height: 4.5vmin;
        width: 100%;
       
        background-color: #bdd142;
        /*    height: 35px;*/
        font-family: 'Montserrat', sans-serif;
    }

    .flex-container2 {
       
        height: 4.5vmin;
    }


    .full-navbar {
        
                height: 24vmin;
        
    }
    .logoind{
        height:23vmin;
/*        margin-left:-2.85vmin;*/
    }



    .flex-container {
       
        height: 24vmin;
    }
}

@media(min-width:466px) {
    .sub-navbar {
        position: absolute;
        top: 16vh;
        height: 3.5vmin;
        width: 100%;
        font-size: 2vmin;
        background-color: #bdd142;
        /*    height: 35px;*/
        font-family: 'Montserrat', sans-serif;
    }


    .flex-container2 {
        height: 3.5vmin;
    }

    .full-navbar {

                height: 16vh;
       
    }
    .logoind {
        height: 15vh;
    }

    .flex-container {
        height: 16vh;
    }

}







    a.navbar-brand {
        white-space: normal;
        text-align: center;
        word-break: break-all;
    }

    /* Provide sufficient contrast against white background */
    a {
        color: #0366d6;
    }

    .btn-primary {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    /* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;


    scroll-behavior: smooth;

    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .border-top {
        border-top: 1px solid #e5e5e5;
    }

    .border-bottom {
        border-bottom: 1px solid #e5e5e5;
    }

    .box-shadow {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    }

    button.accept-policy {
        font-size: 1rem;
        line-height: inherit;
    }

    .flex-flip {
        display: grid;
        width: 60%;
        margin-left: 20%;
        grid-template-columns: auto auto;
    }

    .flex-flip-item {
        text-align: center;
        font-size:3vmin;
    }

    .container2 {
        margin-top: 22.5vh;
        width: 100%;
    }

    td {
        color: #142b33;
    }
    /* Sticky footer styles
-------------------------------------------------- */
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        /* Margin bottom by footer height */

        margin-bottom: 60px;
    }
    /*.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;*/ /* Vertically center the text there */
    /*}*/
    h3 {
        font-weight: bold !important;
    }

    .flex-container {
       
        display: flex;
        justify-content: space-evenly;
        align-items: center;
/*        height: 18vh;*/
    }

        .flex-container > div {
            background-color: #142b33;
            width: 17%;
            /*        margin: 10px;*/
            text-align: center;
            /*        line-height: 75px;*/
            /*        font-size: 30px;*/
            /*        height:30%;*/
        }

            .flex-container > div > a {
                display: block;
                /*            font-size: 22px;*/
                text-align: center;
                text-decoration: none;
                color: #bdd142 !important;
            }

                .flex-container > div > a > .link:hover {
                    background-color: #e4f197 !important;
                    color: #142b33 !important;
                    font-size: 2.5vmin;
                    text-decoration: none;
                    padding-top: 12px;
                    padding-bottom: 15px;
                    /*                width:19%;*/
                }

    /*                .flex-container > div > a:hover.logo {
                    display: block;
                    font-size: 22px;
                    text-align: center;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    color: #142b33;
                }*/
    /*.right-navbar {
    width: 40%;
    margin: 0;
    position: absolute;
    top: 70px;
    left: 80%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .right-navbar a {
        display: block;
        font-size: 22px;
        text-align: center;
        padding: 14px 16px;
        color: #bdd142 !important;
    }

        .right-navbar a:hover {
            background-color: #e4f197 !important;
            color: #142b33 !important;
            font-size: 19px;
        }


    .right-navbar li {
        display: inline-block;
        padding: 30px;
    }*/

    .full-navbar {
        position: absolute;
        top: 0px;
/*        height: 18vh;*/
        width: 100%;
        background-color: #142b33;
        /*    height: 140px;*/
        font-family: 'Montserrat', sans-serif;
        font-size: 2.3vmin;
        line-height: 2.5vmin;
    }


    /*.left-navbar a:hover {
    background-color: #e4f197 !important;
    color: #142b33 !important;
    font-size: 19px;
    text-decoration: none;
}
*/
    /*.sub-navbar {
        position: absolute;
        top: 18vh;
        height: 4.5vmin;
        width: 100%;
        font-size: 2.3vh;
        background-color: #bdd142;*/
        /*    height: 35px;*/
        /*font-family: 'Montserrat', sans-serif;
    }*/

    .flex-container2 {
        
        display: flex;
        justify-content: space-around;
        align-items: center;
/*        height: 4.5vh;*/
    }



    a {
        text-decoration: none;
    }

    .logo-wrapper {
        text-align: center;
        margin-bottom: -37px;
    }

    .logo-btn {
        width: 100px;
        position: absolute;
        margin-left: 45%;
    }

    .left-navbar li {
        display: inline-block;
        /*    padding: 30px;*/
    }

    a.navbar-brand {
        white-space: normal;
        text-align: center;
        word-break: break-all;
    }

    /* Provide sufficient contrast against white background */
    a {
        color: #0366d6;
    }

    .btn-primary {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    /* Sticky footer styles
-------------------------------------------------- */
    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .border-top {
        border-top: 1px solid #e5e5e5;
    }

    .border-bottom {
        border-bottom: 1px solid #e5e5e5;
    }

    .box-shadow {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    }

    button.accept-policy {
        font-size: 1rem;
        line-height: inherit;
    }

    /* Sticky footer styles
-------------------------------------------------- */
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
        /*background: #a1ffce;*/ /* fallback for old browsers */
        /*background: -webkit-linear-gradient(45deg, #faffd1,#e4f197);*/ /*Chrome 10-25, Safari 5.1-6 */
        /*    background:-webkit-linear-gradient(45deg, #faffd1,#e4f197);*/
        /*    linear-gradient(45deg, #faffd1,#e4f197);*/
        /*    // W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+*/
        width: 100%;
    }

    .footer {
        position: absolute;
        /*    bottom: 0;*/
        width: 100%;
        white-space: nowrap;
        /*line-height: 60px;*/ /* Vertically center the text there */
    }


   

   
@media (max-width: 460px) {
    .ticker-wrap .ticker__item {
       
        width: 250%;
    }
    @keyframes ticker {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }

        100% {
            -webkit-transform: translate3d(-200%, 0, 0);
            transform: translate3d(-200%, 0, 0);
        }
    }
    @-webkit-keyframes ticker {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }

        100% {
            -webkit-transform: translate3d(-200%, 0, 0);
            transform: translate3d(-200%, 0, 0);
        }
    }
}

@media (min-width: 460px) {
    .ticker-wrap .ticker__item {
        width: 100%;
    }
    @keyframes ticker {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }

        100% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    }
    @-webkit-keyframes ticker {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }

        100% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    }
}

.ticker-wrap {
        left: 0%;
        position: fixed;
        bottom: 0px;
        width: 100%;
        overflow: hidden;
        height: 3.5vh;
        background-color: #142b33;
        padding-left: 100%;
        box-sizing: content-box;
        z-index:99 !important;
        /*    margin-top: -20px;*/
    }

        .ticker-wrap .ticker {
            display: inline-block;
            height: 3.5vh;
            /*        line-height: 3rem;*/
            white-space: nowrap;
            padding-right: 100%;
            box-sizing: content-box;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-name: ticker;
            animation-name: ticker;
            -webkit-animation-duration: 50s;
            animation-duration: 50s;
            /*        padding-bottom:5px;*/
            width:120%;
        }

        .ticker-wrap .ticker__item {
            /*        top:0%;*/
            display: inline-block;
            /*        padding-bottom:5px;*/
            padding: 0 5vh;
            font-size: 2.5vh;
            color: white;
            /*        bottom: 10px;*/
            /*        height:4rem;*/
/*            width:100%;*/
        }

    .wavebox {
        position: relative;
        height: 12vmin;
        width: 100%;
    }

    .wavebox2 {
        position: relative;
        height: 12vmin;
        top: 64%;
        width: 100%;
    }

    .table-responsive {
        padding-top: 100px;
        width: 90%;
        padding-left: 10%;
        table-layout: fixed;
        border-top: #35556d 2px;
        padding-bottom: 100px;
    }

    .flex-container-top {
        position: fixed;
        margin-top: 0px;
        background: #35556d;
        width: 100%;
        height: 10px;
    }
    /*.flex-container-top2 {
    position: fixed;
    margin-top: 160px;
    background: #35556d;
    width: 100%;
    height: 10px;
    
}*/
    
@media (min-width: 1200px) {
    .flex-container-big {
        /*    /padding-top: 20px;*/
        margin-top:-1%;

        margin-left: 5%;
        width: 90%;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: auto;
        /*        background:#35556d;*/
    }

    .flex-container-bigg {
        /*    background: #35556d;*/
        margin-top: -1%;
        width: 100%;
        height: auto;
        background: rgba(237,243,205,1);
        /*    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,243,205,1) 77%, rgba(237,243,205,1) 88%, rgba(237,243,205,1) 92%);*/
    }

    .flex-container-big > div {
        /*    margin-left: 5%;*/
        margin-bottom:10vmin;
        width: 45%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100vh;
        box-shadow: 0.5vmin 0.5vmin gainsboro;
        /*        margin: auto;*/
        border-radius: 25px;
        overflow: hidden;
        align-self: center;
        /*            background: blue;*/
    }
}

@media (max-width: 1200px) {
    .flex-container-big {
        /*    /padding-top: 20px;*/
        margin-top:-1%;
        z-index:95;
        
        margin-left: 5%;
        width: 90%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: auto;
        /*        background:#35556d;*/
    }

    .flex-container-bigg {
        margin-top: -1%;
        /*    background: #35556d;*/
        width: 100%;
        height: auto;
        background: #edf3cd;
        /*    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,243,205,1) 77%, rgba(237,243,205,1) 88%, rgba(237,243,205,1) 92%);*/
    }

    .flex-container-big > div {
        /*    margin-left: 5%;*/
        /*        margin-bottom: 100px;*/
        width: 75%;
        margin-bottom: 10vmin;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100vh;
        /*        margin: auto;*/
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0.5vmin 0.5vmin gainsboro;
        align-self: center;
        /*            background: blue;*/
    }
}
    

       

    .flex-container-small1 {
        /*    margin-left: 5%;*/
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100vh;
        background: white;
        margin: auto;
        border-radius: 4px;
        overflow: hidden;
        background: white;
    }

        .flex-container-small1 > div {
            width: 85%;
            /*    margin: 10px;*/
            /*    text-align: center;*/
            /*    line-height: 75px;*/

            font-size: 4vmin;
            border-bottom: 1px solid black;
            height: 25%;
        }

            .flex-container-small1 > div > .date {
                position: relative;
                top: 2px;
                left: 5px;
                color: orangered;
            }

            .flex-container-small1 > div > .head {
                position: relative;
                top: 2px;
                left: 50%;
                color: #142b33;
            }

            .flex-container-small1 > div > .sub-head {
                position: relative;
                /*            top: 5px;*/
                left: 5px;
                color: gray;
                align-content: center;
            }




    .flex-container-small2 {
        /*    margin-left: 5%;*/
        width: 100%;
        position: relative;
        display: grid;
       grid-template-rows:20% 80%;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        background: white;
    }

        .flex-container-small2 > div {
            /*        background: red;*/
            width: 100%;
            /*    margin: 10px;*/
            /*    text-align: center;*/
            /*    line-height: 75px;*/
            font-size: 2vmin;
            /*        flex-basis: 25%;*/
        }

    .table > thead > tr > th {
        /*    vertical-align: center;*/
        border-bottom: 2px solid #bdd142 !important;
        color: #065672;
        text-align: center;
    }

    .table > tbody > tr > td {
        /*    vertical-align: center;*/
        text-align: center;
    }

   .sub-head {
        position: relative;
        /*            top: 5px;*/
        /*        left: 20px;*/
        color: gray;
        align-content: center;
/*        flex-basis: 55%;*/
        font-size: 1.9vmin;
        align-self: center;
        height:100%;
    }


    .header-con {
        margin-left: 9%;
        font-family: 'Montserrat', sans-serif;
    }

    .flex-container-small3 {
        /*    margin-left: 5%;*/
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-between;
        /*    align-items: center;*/
        height: 40%;
        background: white;
    }

        .flex-container-small3 > .date {
            position: relative;
/*            top: 0.2vmin;*/
            /*    left: 20px;*/
            color: #bdd142;
            /*        flex-basis: 25%;*/
            font-size: 1.5vmin;
            flex-basis: 25%;
            align-content: center;
        }

        .flex-container-small3 > .head {
            position: relative;
/*            top: 1.8vmin;*/
            /*        left: 20px;*/
            color: #35556d;
            flex-basis: 75%;
            /*        text-align: center;*/
        }

    .grid-container-big {
        margin-left: 5%;
        width: 95%;
        display: flex;
        /*    flex-direction: column;*/
        height: 350px;
        /*     background: azure; */
        justify-content: space-between;
    }

        .grid-container-big > .cont-1 {
            /*    margin-left: 40px;*/
            width: 45%;
            /*    flex-direction: column;*/
            height: 350px;
            /*    background: magenta;*/
            /*    justify-content: space-between;*/
        }

    .grid-container {
        /*    margin-left: 40px;*/
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 47vmin;
        /* background: azure; */
        justify-content: space-evenly;
    }

    .grid-container2 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

        .grid-container2 > .item {
            width: 22%;
            align-self: center;
            text-align: center;
        }

        .grid-container2 > .item1 {
            width: 34%;
            align-self: center;
            text-align: left;
            font-size: 2.5vmin;
            font-family: 'Montserrat', sans-serif;
        }

    button {
        /* margin: 20px; */
        width: 100px;
        height: 30px;
    }

.custom-btn {
    padding: 0.5vmin 0.5vmin;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    background: #142b33;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    /* display: inline-block; */
    color: #fff;
    font-size: 1.6vmin;
    width: 90%;
    height: auto;
}

    /**** BTN No. 12 ****/
    .btn-12 {
        border: 0.4vmin solid #bdd142;
        border-radius: 1vmin;
        z-index: 1;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }

        .btn-12:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: #bdd142;
            transition: all 0.3s ease;
        }

        .btn-12:hover {
            color: #fff;
            background:#bdd142;
            border-color:#142b33;
        }

            /*.btn-12:hover:after {
                top: 0;
                height: 100%;
            }

        .btn-12:active {*/
/*            top: 2px;*/
        /*}*/

    .grid-container3 {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 1vmin;
       
    }

        .grid-container3 > .item1 {
            justify-items: center;
            text-align: center;
            padding:0.5vmin 0;
            font-size: 3vmin;
            align-content: center;
            color: #35556d;
        }

        .grid-container3 > .item {
            justify-items: center;
            text-align: center;
            padding: 0.5vmin 0;
            font-size: 2.5vmin;
            align-content: center;
            color: #bdd142;
        }

    #myDIV {
        width: 100%;
        padding: 50px 0;
        text-align: center;
        background-color: lightblue;
        margin-top: 20px;
    }

    .wrapper {
        height: 60px;
        width: 55vw;
        background: #fff;
        line-height: 51px;
        border-radius: 52px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.25);
        margin-left: 25%;
    }

        .wrapper #nav_nep {
            position: relative;
            display: flex;
        }

            .wrapper #nav_nep label {
                flex: 1;
                width: 100%;
                z-index: 1;
                cursor: pointer;
                text-align: center;
            }

                .wrapper #nav_nep label a {
                    position: relative;
                    z-index: -1;
                    color: #1d1f20;
                    font-size: 20px;
                    font-weight: 500;
                    text-decoration: none;
                    transition: color 0.6s ease;
                }

            .wrapper #nav_nep #home:checked ~ label.home a,
            .wrapper #nav_nep #inbox:checked ~ label.inbox a,
            .wrapper #nav_nep #contact:checked ~ label.contact a,
            .wrapper #nav_nep #heart:checked ~ label.heart a,
            .wrapper #nav_nep #about:checked ~ label.about a {
                color: #edf2f4;
            }

            .wrapper #nav_nep label a i {
                font-size: 25px;
            }

            .wrapper #nav_nep .tab {
                position: absolute;
                height: 100%;
                width: 33%;
                left: 0;
                bottom: 0;
                z-index: 0;
                border-radius: 50px;
                background: linear-gradient(45deg, #142b33 0%,#35556d 100%);
                transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            .wrapper #nav_nep #inbox:checked ~ .tab {
                left: 33%;
            }

            .wrapper #nav_nep #contact:checked ~ .tab {
                left: 66%;
            }

            .wrapper #nav_nep #heart:checked ~ .tab {
                left: 100%;
            }

            /*        .wrapper #nav_nep #about:checked ~ .tab {
            left: 100%;
        }
*/
            .wrapper #nav_nep input {
                display: none;
            }

    /*@import url('https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Sans:wght@400;700&display=swap');



:root {
    --highlight: #91cb3e;
    --body-pad-top: 70px;
    margin: 0;
    padding: 0;
}

#snakenavbody {
    display: relative;
    margin: 0;
    padding: var(--body-pad-top) 45px;
    min-width: 350px;
    grid: auto / 200px minmax(300px, 500px);
    align-items: start;
    justify-content: center;
    gap: 20px;
    font: 24px/1.3 'PT Sans', sans-serif !important;
    color: #333;
    background: #edf2f4;
}

#snakenav {
    position: sticky;
    left: 0;
    top: var(--body-pad-top);
    line-height: 2;
}

article {
    margin-top: -50px;
    padding-top: 50px;
}*/

    /* === Navbar and marker === */

    /*#snakenav ul {
    margin: 0;
    padding-left: 10px;
    list-style: none;
}

#snakenav li > ul {
    padding-left: 30px;
}

#snakenav a {
    display: inline-block;
    color: #7f7f7f;
    text-decoration: none;
    transition: all 300ms ease-in-out;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif !important;
}

#snakenav li.visible > a {
    color: #222;
    transform: translate(5px);
}

#snakenav svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#snakenav path {
    transition: all 300ms ease;
    fill: transparent;
    stroke: var(--highlight);
    stroke-width: 3px;
    stroke-dasharray: 0 0 0 1000;
    stroke-linecap: round;
    stroke-linejoin: round;
}

section[id] {
    margin: 25px 0;
    padding: 25px 0;
    margin-left: 220px;
}

h1, h2 {
    margin: 0;
    padding: 0;
    font-size: 36px;
}

h2 {
    padding-left: 10px;
    border-left: 4px solid var(--highlight);
    font-size: 24px;
}

h1 span,
.subheading {
    display: block;
    color: #666;
    font: 700 20px sans-serif;
}

article a {
    color: #222;
    -webkit-text-decoration-color: var(--highlight);
    text-decoration-color: var(--highlight);
}

    article a:hover {
        margin: -2px;
        padding: 2px;
        border: 0;
        background: var(--highlight);
    }

code {
    margin: -2px;
    padding: 2px;
    background: rgba(0,0,0,.05);*/
    /* font-family: 'PT Mono', monospace; */
    /*color: #333;
}*/

    /* === Adjustments === */

    /* Scroll all the way up even if the first section starts a couple hundred pixels down the page */
    /*section:first-of-type {
    margin-top: -300px;
    padding-top: 350px;
}

article,
section:last-of-type,
section:last-of-type p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}*/
    @-webkit-keyframes rotate-forever {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-moz-keyframes rotate-forever {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .flipflipbox {
        position: relative;
        bottom: 0;
        height: 45vh;
        width: 100%;
        border: none;
        background-color: #edf3cd;
    }

    @keyframes rotate-forever {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        display: flex;
        flex-direction: column;
    }

        body > * {
            flex-shrink: 0;
        }

    .div1 {
        background-color: yellow;
    }

    .div2 {
        background-color: orange;
        flex-grow: 1;
    }

    .loading-spinner {
        -webkit-animation-duration: 0.75s;
        -moz-animation-duration: 0.75s;
        animation-duration: 0.75s;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: rotate-forever;
        -moz-animation-name: rotate-forever;
        animation-name: rotate-forever;
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        animation-timing-function: linear;
        height: 100px;
        width: 100px;
        border: 8px solid #35556d;
        border-right-color: transparent;
        border-radius: 50%;
        display: inline-block;
        background-color: transparent;
    }

    .flipstep {
        height: auto;
        width: 70%;
        background-color: #fff;
        border-radius: 3vmin;
        margin-left: 15%;
        margin-bottom: 50px;
        box-shadow:0.5vmin #46464682;
    }

    .flipstep-item1 {
        color: #35556d;
        text-align: left;
        padding-left: 25%;
        font-size: 3vmin;
    }

.flipstep-item {
    color: #bdd142;
    vertical-align: central;
    font-size: 2.5vmin;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 2vmin;
    padding-bottom: 2vmin;
}


    .loading-spinner {
        position: relative;
        top: 78%;
        right: 0;
        bottom: 0;
       
    }

    .spinner4 {
        -webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite;
    }

    @-webkit-keyframes rotator {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(270deg);
        }
    }

    @keyframes rotator {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(270deg);
        }
    }

    .path4 {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        transform-origin: center;
        -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
        animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    }

    @-webkit-keyframes colors {
        0% {
            stroke: #4285F4;
        }

        25% {
            stroke: #DE3E35;
        }

        50% {
            stroke: #F7C223;
        }

        75% {
            stroke: #1B9A59;
        }

        100% {
            stroke: #4285F4;
        }
    }

    @keyframes colors {
        0% {
            stroke: #4285F4;
        }

        25% {
            stroke: #DE3E35;
        }

        50% {
            stroke: #F7C223;
        }

        75% {
            stroke: #1B9A59;
        }

        100% {
            stroke: #4285F4;
        }
    }

    @-webkit-keyframes dash {
        0% {
            stroke-dashoffset: 187;
        }

        50% {
            stroke-dashoffset: 46.75;
            transform: rotate(135deg);
        }

        100% {
            stroke-dashoffset: 187;
            transform: rotate(450deg);
        }
    }

    @keyframes dash {
        0% {
            stroke-dashoffset: 187;
        }

        50% {
            stroke-dashoffset: 46.75;
            transform: rotate(135deg);
        }

        100% {
            stroke-dashoffset: 187;
            transform: rotate(450deg);
        }
    }

    @import url('https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Sans:wght@400;700&display=swap');

    .price-flex {
        width: 80%;
        display: flex;
        align-content: space-between;
        justify-content: space-between;
        margin-left: 10%;
        margin-top: 60px;
    }

        .price-flex div {
            width: 50%;
            text-align: center;
        }

    .flipbox {
        background: #edf3cd;
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        position: relative;
        top: 77%;
        padding-top: 4%;
    }
    /* === Grid and base layout === */
    #pricevis {
        display: flex;
        width: 90%;
        margin-left: 5%;
        margin-top: 30px;
        background: #e4f197;
        border-radius: 30px;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 100px;
        align-content: center;
    }

    :root {
        --highlight: #91cb3e;
        --body-pad-top: 70px;
        margin: 0;
        padding: 0;
    }
    /*0xc6d04c9357ed3895b2cc3a225394974d1c3a27e6
0xe8f87e351fbadad68291b435d2197346c29106b6
0xb4101cdab5c915fc3ba6934947ed4282f50e698e@upstreamexchange-staging.azurewebsites.net*/
    #snakenavbody {
        width: 95%;
        display: grid;
        margin: 0;
        padding: var(--body-pad-top) 45px;
        min-width: 350px;
        grid-template-columns: 1fr 4fr;
        align-items: start;
        justify-content: center;
        gap: 20px;
        font: 24px/1.3 'PT Sans', sans-serif !important;
        color: #333;
        /*    background: #edf2f4;*/
    }

    #snakenav {
        padding-top: 30px;
        position: sticky;
        left: 0;
        top: var(--body-pad-top);
        line-height: 2;
    }

    article {
        margin-top: -50px;
        padding-top: 50px;
        /*    width:80%;
    margin-left:20%;*/
    }

    /* === Navbar and marker === */

    nav ul {
        margin: 0;
        padding-left: 10px;
        list-style: none;
    }

    nav li > ul {
        padding-left: 30px;
    }

    nav a {
        display: inline-block;
        color: #7f7f7f;
        text-decoration: none;
        transition: all 300ms ease-in-out;
    }

    nav li.visible > a {
        color: #222;
        transform: translate(5px);
    }

    nav svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    nav path {
        transition: all 300ms ease;
        fill: transparent;
        stroke: var(--highlight);
        stroke-width: 3px;
        stroke-dasharray: 0 0 0 1000;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* === Body contents === */

    section[id] {
        margin: 25px 0;
        padding: 25px 0;
    }

    /*h1, h2 {
    margin: 0;
    padding: 0;
    font-size: 36px;
}*/

    h2 {
        padding-left: 10px;
        border-left: 4px solid var(--highlight);
        font-size: 24px;
    }

    /*h1 span,
.subheading {
    display: block;
    color: #666;
    font: 700 20px sans-serif;
}
*/
    /*article a {
    color: #222;
    text-decoration-color: var(--highlight);
}

    article a:hover {
        margin: -2px;
        padding: 2px;
        border: 0;
        background: var(--highlight);
    }

code {
    margin: -2px;
    padding: 2px;
    background: rgba(0,0,0,.05);
    font-family: 'PT Mono', monospace;
    color: #333;
}
*/
    /* === Adjustments === */

    /* Scroll all the way up even if the first section starts a couple hundred pixels down the page */
    section:first-of-type {
        margin-top: -300px;
        padding-top: 350px;
    }

    article,
    section:last-of-type,
    section:last-of-type p:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
    }















    @import 'https://fonts.googleapis.com/css?family=Quicksand';

    @media screen and (max-width: 600px) {
        .tabs_menu {
            display: none;
            width:auto;
        }
    }

    @media screen and (min-width: 600px) {
    }

    /*body {
    background-color: #17171e;
}
*/
    .tab_div {
        width: 100%;
        padding-bottom:20px;
    }

    .tabs_menu {
        position:absolute;
       margin-top:-3vh;
        width: 15%`;
        float: left;
        font-family: 'Montserrat',sans-serif;
        font-size: 13vmin;
    }

    ul.tabs {
        padding: 0;
        height: 50%;
    }

    #tab1, #tab2, #tab3, #tab4 {
        padding-top: 5vmin;
        padding-bottom: 5vmin;
        padding-left: 1.5vmin;
/*        padding-right: 3vmin;*/
        width: 100%;
    }

    ul.tabs li {
        list-style-type: none;
        /*    font-family: 'Quicksand';*/
        border-right: 2px solid white;
        /*    font-size: 18px;*/
    }

    /* hover effect */

    ul.tabs li {
/*        display: inline-block;*/
        position: relative;
        padding: 1em;
        cursor: pointer;
        background: #142b33;
        color: #bdd142;
        z-index: 0;
    }

        ul.tabs li:before {
            content: " ";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #bdd142;
            transform: scaleX(0);
            transform-origin: 0 50%;
            transition: transform .5s ease-out;
        }

        ul.tabs li:hover:before {
            transform: scaleX(1);
        }

        ul.tabs li:hover {
            /*        background-color: yellow;*/
            color: #142b33 !important;
        }

    #tab1_content, #tab2_content, #tab3_content, #tab4_content {
        /*   background-color:red; */
        height: auto;
    }

    /* ------------------------------------ */
    .skills {
        height: auto;
        overflow: auto;
    }

        .skills h2 {
            color: white;
            font-weight: bolder;
            font-family: 'Quicksand', "Palatino Linotype", "Book Antiqua", Palatino, serif;
            font-size: 18px;
        }

    .skill li h3 {
        position: relative;
        top: -25px;
        color: white;
    }

    .skill {
        list-style: none;
        font-family: 'Quicksand', Arial, Helvetica, Geneva, sans-serif;
        font-size: 12px;
        width: 40%;
        /*   margin: 100px auto 0; */
        margin: auto;
        position: relative;
        line-height: 2em;
        padding: 0px 0;
    }

        .skill li {
            margin-top: 25%;
            background: #ffe8ed;
            height: 25px;
            border-radius: 100px;
            /*   background-image: -webkit-gradient(linear, left top, left bottom, from(#C5E2E0), to(#C5E2E0));
  background-image: -webkit-linear-gradient(top, #C5E2E0, #C5E2E0);
  background-image: -moz-linear-gradient(top, #C5E2E0, #C5E2E0);
  background-image: -ms-linear-gradient(top, #C5E2E0, #C5E2E0);
  background-image: -o-linear-gradient(top, #C5E2E0, #C5E2E0);
  background-image: linear-gradient(top, #C5E2E0, #C5E2E0); */
            /*   -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #C5E2E0;
  -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #C5E2E0;
  box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #C5E2E0; */
        }


    .bar {
        height: 19.5px;
        margin: 2px 3.5px;
        position: absolute;
        border-radius: 10px;
        -moz-box-shadow: 0 1px 0px #ff9bb4 inset, 0 1px 0 #ff9bb4 -webkit-box-shadow: 0 1px 0px #ff9bb4 inset, 0 1px 0 #ff9bb4;
        box-shadow: 0 1px 0px #ff9bb4 inset, 0 1px 0 #ff9bb4;
    }

    .java {
        width: 80%;
        -moz-animation: java 2s ease-out;
        -webkit-animation: java 2s ease-out;
        background-color: #e1386c;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c #e1386c);
    }

    .ds {
        width: 70%;
        -moz-animation: ds 2s ease-out;
        -webkit-animation: ds 2s ease-out;
        background-color: #f0bb4b;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c);
    }

    .python {
        width: 70%;
        -moz-animation: python 2s ease-out;
        -webkit-animation: python 2s ease-out;
        background-color: #e1386c;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386cb, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386cb, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c);
    }

    .c {
        width: 65%;
        -moz-animation: c 2s ease-out;
        -webkit-animation: c 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes java {
        0% {
            width: 0px;
        }

        100% {
            width: 80%;
        }
    }

    @-moz-keyframes ds {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    @-moz-keyframes python {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    @-moz-keyframes c {
        0% {
            width: 0px;
        }

        100% {
            width: 65%;
        }
    }

    @-webkit-keyframes java {
        0% {
            width: 0px;
        }

        100% {
            width: 80%;
        }
    }

    @-webkit-keyframes ds {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    @-webkit-keyframes python {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    @-webkit-keyframes c {
        0% {
            width: 0px;
        }

        100% {
            width: 65%;
        }
    }

    /* web developing styling */
    .html {
        width: 90%;
        -moz-animation: html 2s ease-out;
        -webkit-animation: html 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes html {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    @-webkit-keyframes html {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    .jquery {
        width: 60%;
        -moz-animation: jquery 2s ease-out;
        -webkit-animation: jquery 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes jquery {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    @-webkit-keyframes jquery {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    .mysql {
        width: 70%;
        -moz-animation: mysql 2s ease-out;
        -webkit-animation: mysql 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes mysql {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    @-webkit-keyframes mysql {
        0% {
            width: 0px;
        }

        100% {
            width: 70%;
        }
    }

    .php {
        width: 60%;
        -moz-animation: php 2s ease-out;
        -webkit-animation: php 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes php {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    @-webkit-keyframes php {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    .mongodb {
        width: 60%;
        -moz-animation: mongodb 2s ease-out;
        -webkit-animation: mongodb 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes mongodb {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    @-webkit-keyframes mongodb {
        0% {
            width: 0px;
        }

        100% {
            width: 60%;
        }
    }

    /* graphic design styling */
    .photoshop {
        width: 90%;
        -moz-animation: photoshop 2s ease-out;
        -webkit-animation: photoshop 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes photoshop {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    @-webkit-keyframes photoshop {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    .indesign {
        width: 85%;
        -moz-animation: indesign 2s ease-out;
        -webkit-animation: indesign 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes indesign {
        0% {
            width: 0px;
        }

        100% {
            width: 85%;
        }
    }

    @-webkit-keyframes indesign {
        0% {
            width: 0px;
        }

        100% {
            width: 85%;
        }
    }
    /* miis. styling */

    .finalcut {
        width: 90%;
        -moz-animation: finalcut 2s ease-out;
        -webkit-animation: finalcut 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes finalcut {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    @-webkit-keyframes finalcut {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }


    .iphoto {
        width: 90%;
        -moz-animation: iphoto 2s ease-out;
        -webkit-animation: iphoto 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes iphoto {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    @-webkit-keyframes iphoto {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }


    .premiere {
        width: 90%;
        -moz-animation: premiere 2s ease-out;
        -webkit-animation: premiere 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes premiere {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }

    @-webkit-keyframes premiere {
        0% {
            width: 0px;
        }

        100% {
            width: 90%;
        }
    }


    .autocad {
        width: 65%;
        -moz-animation: autocad 2s ease-out;
        -webkit-animation: autocad 2s ease-out;
        background-color: #66b3cc;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#e1386c), to(#e1386c));
        background-image: -webkit-linear-gradient(top, #e1386c, #e1386c);
        background-image: -moz-linear-gradient(top, #e1386c, #e1386c);
        background-image: -ms-linear-gradient(top, #e1386c, #e1386c);
        background-image: -o-linear-gradient(top, #e1386c, #e1386c);
        background-image: linear-gradient(top, #e1386c, #e1386c)
    }

    @-moz-keyframes autocad {
        0% {
            width: 0px;
        }

        100% {
            width: 65%;
        }
    }

    @-webkit-keyframes autocad {
        0% {
            width: 0px;
        }

        100% {
            width: 65%;
        }
    }






    .blog-card {
        display: flex;
        flex-direction: column;
        margin: auto;
        box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.6%;
        background: #fff;
        line-height: 1.4;
        font-family: sans-serif;
        border-radius: 5px;
        overflow: hidden;
        z-index: 0;
        width:50%;
    }

       

        .blog-card:hover .photo {
            transform: scale(1.3) rotate(3deg);
        }

        .blog-card .meta {
            position: relative;
            z-index: 0;
            height: 200px;
        }

        .blog-card .photo {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-size: cover;
            background-position: center;
            transition: transform 0.2s;
        }

        .blog-card .details,
        .blog-card .details ul {
            margin: auto;
            padding: 0;
            list-style: none;
        }

        .blog-card .details {
            position: absolute;
            top:0;
            bottom: 0;
            left: -100%;
            margin: auto;
            transition: left 0.2s;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 10px;
            width: 100%;
            font-size: 1.9rem;
            align-content:center;
        }

            .blog-card .details a {
                -webkit-text-decoration: dotted underline;
                text-decoration: dotted underline;
            }

            .blog-card .details ul li {
                display: inline-block;
            }

            .blog-card .details .author:before {
                font-family: FontAwesome;
                margin-right: 10px;
                
            }

            .blog-card .details .date:before {
                font-family: FontAwesome;
                margin-right: 10px;
            
            }

            .blog-card .details .tags ul:before {
                font-family: FontAwesome;
              
                margin-right: 10px;
            }

            .blog-card .details .tags li {
                margin-right: 2px;
            }

                .blog-card .details .tags li:first-child {
                    margin-left: -4px;
                }

        .blog-card  .description {
            padding: 1rem;
            background: #fff;
            position: relative;
            z-index: 1;
        }

            .blog-card   .description h1,
            .blog-card  .description h2 {
                font-family: Poppins, sans-serif;
            }

            .blog-card .description h1 {
                line-height: 1;
                margin: 0;
                font-size: 1.7rem;
            }

            .blog-card  .description h2 {
                font-size: 1rem;
                font-weight: 300;
                text-transform: uppercase;
                color: #bdd142;
                margin-top: 5px;
            }

            .blog-card .description .read-more {
                text-align: right;
            }

                .blog-card .description .read-more a {
                    color: #bdd142;
                    display: inline-block;
                    position: relative;
                }

                    .blog-card .description .read-more a:after {
                        
                        font-family: FontAwesome;
                        margin-left: -10px;
                        opacity: 0;
                        vertical-align: middle;
                        transition: margin 0.3s, opacity 0.3s;
                    }

                    .blog-card .description .read-more a:hover:after {
                        margin-left: 5px;
                        opacity: 1;
                    }

        .blog-card p {
            position: relative;
            margin: 1rem 0 0;
            color:black;
        }

            .blog-card p:first-of-type {
                margin-top: 1.25rem;
                color:black;
            }

                .blog-card p:first-of-type:before {
                    content: "";
                    position: absolute;
                    height: 5px;
                    background: #bdd142;
                    width: 35px;
                    top: -0.75rem;
                    border-radius: 3px;
                    color:black;
                }

        .blog-card:hover .details {
            left: 0%;
        }

    @media (min-width: 640px) {
        .blog-card {
            flex-direction: row;
            max-width: 700px;
        }

            .blog-card .meta {
                flex-basis: 40%;
                height: auto;
            }

            .blog-card  .description {
                flex-basis: 60%;
            }

                .blog-card  .description:before {
                    transform: skewX(-3deg);
                    content: "";
                    background: #fff;
                    width: 30px;
                    position: absolute;
                    left: -10px;
                    top: 0;
                    bottom: 0;
                    z-index: -1;
                }

            .blog-card.alt {
                flex-direction: row-reverse;
            }

                .blog-card.alt  .description:before {
                    left: inherit;
                    right: -10px;
                    transform: skew(3deg);
                }

                .blog-card.alt .details {
                    padding-left: 25px;
                }
    }

    body {
        background: #e5e5e5;
    }

    #wrap {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

.article {
    width: 85%;
    margin-left: 7.5%;
    position: absolute;
    
}

.dateart{
    font-size:2vmin;
    color:slategrey;
    margin-left:10%;
    margin-top:3vmin;
}
.headingart {
    font-size: 6vmin;
    text-align: center;
    width: 100%;
    margin-top: 5vmin;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    color:#35556d;
}

.subheadingart {
    font-size: 3vmin;
    font-weight:800;
/*    text-align: center;*/
    width: 100%;
   
    font-style:italic;
    font-family: 'Montserrat', sans-serif;
    color: #bdd142;
    width:80%;
    margin-left:10%;
}

.subsubheadingart {
    font-size: 4.5vmin;
    font-weight: 800;
    text-align: center;
    width: 100%;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    color: #35556d;
    ;
    width: 80%;
    margin-left: 10%;
    padding-top: 5rem;
    text-decoration: underline;
}

.para {
    font-size: 3vmin;
/*    text-align: center;*/
    width: 100%;
    margin-top: 5vmin;
/*    text-decoration: underline;*/
    font-family: 'Montserrat', sans-serif;
    color:black;
}

.pic{
    width:80%;
    margin-left:10%;
    margin-top:8vmin;
}





/*.navbar2 {
    width: 100%;
    box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
}

.navbar2 .menu-items {
    display: flex;
}

.navbar2 .nav-container li {
    list-style: none;
}

.navbar2 .nav-container a {
    text-decoration: none;
    color: #0e2431;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.7rem;
}

    .navbar2 .nav-container a:hover {
        font-weight: bolder;
    }

.nav-container {
    display: block;
    position: relative;
    height: 60px;
}

    .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 17px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .nav-container .hamburger-lines .line {
            display: block;
            height: 4px;
            width: 100%;
            border-radius: 10px;
            background: #0e2431;
        }

        .nav-container .hamburger-lines .line1 {
            transform-origin: 0% 0%;
            transition: transform 0.4s ease-in-out;
        }

        .nav-container .hamburger-lines .line2 {
            transition: transform 0.2s ease-in-out;
        }

        .nav-container .hamburger-lines .line3 {
            transform-origin: 0% 100%;
            transition: transform 0.4s ease-in-out;
        }

.navbar2 .menu-items {
    padding-top: 120px;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    height: 100vh;
    width: 100%;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    text-align: center;
}

    .navbar2 .menu-items li {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
    }

.logo {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 1.2rem;
    color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo {
    display: none;
}*/


.ticker-flexb{
    width:100%;
    display:grid;
    grid-template-columns:40% 20% 40%;
}

.ItemYes{
    display:grid;
    grid-template-columns:40% 30% 30%;
}