.menuhide{
    display:none;
}
.menushow{
    display:block;
}
.boxtop {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.hr1 {
    margin-top:0px;
}
.errmsg {
    color: #fb733f;
    font-weight: bold;
    font-size: 13px;
    margin-left: 5%;
    float: right;
}
.head1 {
    background-color: #d1ffee;
    padding: 5%;
    border-radius: 5%;
    text-align: center;
    color: #088355;
    font-size: 15px;
}
.bg-color-green {
    background: -webkit-linear-gradient(-315deg, #fff 74%, rgba(0, 0, 0, 0) 22%), -webkit-linear-gradient(225deg, #088355 70%, #088355 70%);
}
.sidemenubox {
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;*/
    box-shadow: rgb(170 203 191) 0px 1px 2px 0px;
    border-width: 2px 4px;
    border-radius: 40px;
    margin-bottom: 2%;
    color: #088355 !important;
    position: initial;
}
    .sidemenubox :hover a {
        color: #d2fbec;
    }
    .sidemenubox img {
        margin-left: 10%;
    }
    .sidemenubox .menulink {
        /*font-size: 11px;
        font-weight: bold;
        padding-top: 2%;
        line-height: 20px;*/
        font-size: 13px !important;
        padding-top: 2%;
        padding-left: 5%;
        line-height: 24px;
        letter-spacing: 1px;
    }
    .sidemenubox .menulinkeng {
        font-size: 15px;
    }

    .sidemenubox hr {
        margin: 0px;
    }

    .sidemenubox a {
        color: #088355;
    }
        .sidemenubox a:hover {
            color: #d2fbec;
        }
        .sidemenubox:hover {
        background-color: #088355;
        color: #d2fbec;
        cursor: pointer;
        /*-webkit-transition: background-color 3s ease-out;
        -moz-transition: background-color 3s ease-out;
        -o-transition: background-color 3s ease-out;
        transition: background-color 3s ease-out;*/
        animation: menushake 0.82s;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        /*-webkit-transition: color 2s;
        -moz-transition: color 2s;
        -o-transition: color 2s;
        transition: color 2s;*/
    }
.sidemarquee1 {
   margin-top:5%;
}
.page {
    width: 99%;
    background-color: #ffffff;
}
.seprator1 {
    width: 100%;
    height: 200px;
    background-color: #333333;
}
.infobox {
    margin-top: 5%;
    margin-left: 2%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 30px -20px #223344;
    z-index: 0;
    margin-bottom: 2%;
    padding-right: 2%;
}
.col15{
    width: 15.33%;
}
.col4 {
    width: 4.33%;
}
.dot {
    margin-left: 40%;
    margin-top: 1%;
    height: 50px;
    width: 50px;
    background-color: #dbdbdb;
    border-radius: 50%;
    display: inline-block;
    font-size: 35px;
    color: #ffffff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.listheader {
    margin: 2%;
    font-size: 20px;
    color: #098383;
    font-weight: bold;
    text-align:center;
}
.listheadertext {
    font-size: 19px;
    color: #a9a9a9;
    /* background-color: #098383; */
    font-weight: bold;
    text-align: center;
    /*height: 30px;
    padding-top: 1%;*/
    /*padding-left: 25%;*/
}
.listcontent {
    /*margin: 1%;*/
}

.listsubcontent {
    color: #0b3c3c;
    text-align: left;
}
.listarrowright {
     padding-left:25%;
}
.listcontentbox {
    /*box-shadow: rgb(0 0 0) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px;*/
    margin-top: 2%;
    padding-left: 7%;
    padding-top: 2%;
    padding-bottom: 4%;
    color: #098383;
    font-size: 15px;
}
.contextspr {
    width: 99%;
    position: absolute;
    text-align: center;
    margin-top: 3%;
}

    .contextspr h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
        margin-top: 3%;
    }

    .contextspr h3 {
        text-align: center;
        color: #fff;
        font-size: 25px;
        margin-top: 4%;
    }


.areaspr {
    background: #098383;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 200px;
}
.svgbg {
    width:100%;
    height:800px;
}
.svgimg {
    width: 100%;
    height: 600px;
}
.footersocialmediabtn {
    margin-top: 2%;
    margin-left: 1%;
}
.footerlink {
    color: #c2f5e2;
    text-align:center;
    height:110px;
}

.topnav {
    position: relative;
    overflow: hidden;
    padding-bottom: 1%;
}

    .topnav a {
        float: left;
        color: #c1bfbf;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 15px;
    }


 


.topnav1-centered a {
    float: none;
    position: absolute;
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
}
.topnav2-centered a {
    float: none;
    position: absolute;
    top: 20%;
    left: 46%;
    transform: translate(-50%, -50%);
}
.topnav3-centered a {
    float: none;
    position: absolute;
    top: 20%;
    left: 53%;
    transform: translate(-50%, -50%);
}
.topnav4-centered a {
    float: none;
    position: absolute;
    top: 20%;
    left: 62%;
    transform: translate(-50%, -50%);
}

.topnav-right {
    float: right;
}
.head2 {
    font-size: 30px;
    color: #fff;
    
}
.head2_sm {
    font-size: 25px;
    color: #fff;
}


@keyframes menushake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@media screen and (max-width: 320px) {
    .menuhide {
        display: block;
    }

    .menushow {
        display: none;
    }
    .sidemenubox img {
        margin-left: 10%;
        margin-top: 4px;
        max-width: none;
    }
    .sidemenubox .menulinkeng {
        line-height: 20px;
    }
    .head2 {
        font-size: 16px;
    }

    .head2_sm {
        font-size: 11px;
    }
    .contextspr {
        margin-top: 15%;
    }
    .footernav {
        margin-left: 2% !important;
    }

    .topnav a {
        padding: 4px 8px;
        text-decoration: none;
        font-size: 10px;
    }

}

@media screen and (min-width: 375px) {
    .menuhide {
        display: block;
    }

    .menushow {
        display: none;
    }
    .sidemenubox img {
        margin-left: 10%;
        margin-top: 4px;
        max-width: none;
    }
    .sidemenubox .menulinkeng {
        line-height: 20px;
    }
    .head2 {
        font-size: 16px;
    }

    .head2_sm {
        font-size: 11px;
    }
    .contextspr {
        margin-top: 12%;
    }
    .footernav {
        margin-left: 2% !important;
    }

    .topnav a {
        padding: 4px 8px;
        text-decoration: none;
        font-size: 10px;
    }

}

@media screen and (min-width: 425px) {
    .menuhide {
        display: block;
    }

    .menushow {
        display: none;
    }
    .sidemenubox img {
        margin-left: 10%;
        margin-top: 4px;
        max-width: none;
    }
    .sidemenubox .menulinkeng {
        line-height: 20px;
    }
    .head2 {
        font-size: 17px;
    }

    .head2_sm {
        font-size: 11px;
    }
    .contextspr {
        margin-top: 10%;
    }
    .footernav {
        margin-left: 2% !important;
    }
    .topnav a {
        padding: 4px 8px;
        font-size: 10px;
    }

}

@media screen and (min-width: 430px) and (max-width: 768px) {
    .menuhide {
        display: block;
    }

    .menushow {
        display: none;
    }

    .sidemenubox {
        border-radius: 0px;
    }

        .sidemenubox img {
            margin-left: 10%;
            margin-top: 4px;
            max-width: none;
        }

    .head2 {
        font-size: 20px;
    }

    .head2_sm {
        font-size: 16px;
    }

    .contextspr {
        margin-top: 6%;
    }

    .footernav {
        margin-left: 16% !important;
    }

    .topnav a {
        padding: 4px 8px;
        font-size: 18px;
    }


}

    @media screen and (min-width: 1024px) {
        .sidemenubox .menulink {
            font-size: 10px;
            padding-top: 2%;
            padding-left: 15%;
            line-height: 15px;
        }

        .sidemenubox .menulinkeng {
            padding-left: 15%;
        }

        .sidemenubox img {
            margin-left: 10%;
            margin-top: 4px;
            max-width: none;
        }

        .menuhide {
            display: none;
        }

        .menushow {
            display: block;
        }

        .head2 {
            font-size: 20px;
        }

        .head2_sm {
            font-size: 16px;
        }

        .contextspr {
            margin-top: 6%;
        }

        .footernav {
            margin-left: 23% !important;
        }

        .topnav a {
            padding: 4px 8px;
            font-size: 18px;
        }

 
    }

@media screen and (min-width: 1440px) {
    .sidemenubox .menulink {
        font-size: 10px;
        padding-top: 2%;
        padding-left: 10%;
        line-height: 15px;
    }
    .sidemenubox .menulinkeng {
        padding-left: 10%;
    }

    .sidemenubox img {
        margin-left: 10%;
        margin-top: 4px;
        max-width: none;
    }
    .menuhide {
        display: none;
    }

    .menushow {
        display: block;
    }
    .head2 {
        font-size: 25px;
    }

    .head2_sm {
        font-size: 20px;
    }
    .contextspr {
        margin-top: 3%;
    }
    .topnav1-centered a {
        margin-left: 30%;
    }
    .footernav {
        margin-left: 34% !important;
    }
    .topnav a {
        padding: 4px 8px;
        font-size: 18px;
    }
  
}

@media screen and (min-width: 2560px) {
    .sidemenubox .menulink {
        font-size: 15px;
        padding-top: 2%;
        padding-left: 5%;
        line-height: 24px;
    }
    .sidemenubox .menulinkeng {
        padding-left: 5%;
        font-size: 16px;
    }
        .sidemenubox img {
        margin-left: 10%;
        margin-top: 4px;
        max-width: none;
    }
    .menuhide {
        display: none;
    }

    .menushow {
        display: block;
    }
    .head2 {
        font-size: 30px;
    }

    .head2_sm {
        font-size: 26px;
    }
    .contextspr {
        margin-top: 2%;
    }
    .footernav {
        margin-left: 40% !important;
    }
    .topnav a {
        padding: 4px 8px;
        font-size: 18px;
    }
   
}