:root {
    --white: #ffffff;
    --bluedark: #1a466b;
    --bluelight: #a0c9ef;
    --blueback: #2a8bcb;
    --bluetext: #145992;
    --greenlight: #cdee71;
    --greendark: #75a405;
    --grey: #f0f0f0;
    --greybackground: #d2d7dc;
    --black: #000000;
}

body {
    font-family: OpenSans-Regular;
    margin: 0;
    line-height: inherit;
    background-color: #dbe5ef;
}



.indexmap {
    width: 1280px;
    height: 720px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    background-image: url('../Images/MainMap.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.background {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 50;
    top: 0px;
    right: 0px;
    background-color: #dbe5ef;
}
.title{
    width:300px;
    position:relative;
    left:50%;
    margin-left: -150px;
    text-align:center;
    margin-bottom:-70px;
}


.closep {
    position: relative;
    left: 38px;
    margin-left: -38px;
    top: -370px;
}
.closepop {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url('../Images/close.png');
    background-position: right top;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(1);
    opacity: 0.6;
}
    .closepop:hover {
        opacity: 1;
        transform: scale(1.2);
        transition: all ease-in-out 0.5s;
    }

.backgroundmapbox {
    background-position: left top;
    background-repeat: no-repeat;
    border: 1px solid var(--bluedark);
    box-shadow: 0px 0px 20px rgba(40, 40, 40, 0.8);
    overflow: hidden;
    width: 1280px;
    height: 720px;
}
.bgsize {
    background-image: url('../Images/Chatham_Background_Map_1280.jpg');
    transition: all ease-in-out 1s;
}
.bgloading {
    background-image: url('../Images/Screens/loading.jpg');
    transition: all ease-in-out 1s;
}
.loadingtextarea {
    position: relative;
    width:500px;
    top: 100px;
    left: 140px;
}
.progress_text {
    position: relative;
    top: 630px;
    left: 0px;
    text-align: center;
    margin: 0px auto;
}
.progress_bar {
    position:relative;
    top: 670px;
    left:0px;
    text-align:center;
    margin:0px auto;
    width: 60%;
    height: 5px;
    background: #e0e0e0;
    padding: 3px;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.progress_bar_fill {
    width: 10%;
    display: block;
    height: 5px;
    background: #659cef;
    border-radius: 3px;
    transition: all ease-in-out 7s;
    animation: grow 8s 1 normal;
}
@keyframes grow {
    to {
        width: 100%;
    }
}

.bgEdu {
    width: 1280px;
    height: 720px;
    background-image: url('../Images/Edu_Background.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -264px;
    z-index: 510;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
}
.bgEduhidden {
    width: 1280px;
    height: 720px;
    background-image: url('../Images/Edu_Background.jpg');
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -264px;
    z-index: 510;
    visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 1s;
}



.bgHome {
    background-image: url('../Images/Screens/home.jpg');
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
}
.bgHomehidden {
    display:none;
    opacity: 0;
}
.bgPopulation {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/population.jpg');
}
.bgPopulationhidden {
    display: none;
    opacity: 0;
}
.bgQuality {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/quality.jpg');
}
.bgQualityhidden {
    display: none;
    opacity: 0;
}
.bgEducation {
    display:block;
    opacity: 1;
    transition: all ease-in-out 1s;
}
.bgEducationhidden {
    display: none;
    opacity: 0;
}
.bgWorkforce {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/workforce.jpg');
}
.bgWorkforcehidden {
    display: none;
    opacity: 0;
}
.bgCorporate {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/corporate.jpg');
}
.bgCorporatehidden {
    display: none;
    opacity: 0;
}
.bgHousing {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/housing.jpg');
}
.bgHousinghidden {
    display: none;
    opacity: 0;
}
.bgInfrastructure {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/infrastructure.jpg');
}
.bgInfrastructurehidden {
    display: none;
    opacity: 0;
}
.bgSites {
    width: 1280px;
    height: 720px;
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -34px;
    z-index: 500;
    visibility: visible;
    opacity: 1;
    transition: all ease-in-out 1s;
    background-image: url('../Images/Screens/sites.jpg');
}
.bgSiteshidden {
    display: none;
    opacity: 0;
}
.homeicons{
    position:relative;
    left:870px;
    top:70px;
    width: 400px;
}
.homeicon {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 90px;
    cursor: pointer;
    padding: 90px 0px 0px 0px;
    margin: 15px;
    width: 130px;
    display: inline-block;
    text-align: center;
    transform: scale(1);
    transition: all ease-in-out 0.5s;
    vertical-align: top;
}
    .homeicon:hover {
        transition: all ease-in-out 0.5s;
        transform:scale(1.1);
    }
.ipop {
    background-image: url('../Images/Screens/Icon_Population.png');
}
.iqua {
    background-image: url('../Images/Screens/Icon_Quality.png');
}
.iedu {
    background-image: url('../Images/Screens/Icon_Education.png');
}
.iwor {
    background-image: url('../Images/Screens/Icon_Workforce.png');
}
.icor {
    background-image: url('../Images/Screens/Icon_Corporate.png');
}
.ihou {
    background-image: url('../Images/Screens/Icon_Housing.png');
}
.iinf {
    background-image: url('../Images/Screens/Icon_Infrastructure.png');
}
.isit {
    background-image: url('../Images/Screens/Icon_Sites.png');
}

.moncurep {
    background-image: url('../Images/MoncurePoint.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 63px;
    height: 63px;
    position: relative;
    top: 409px;
    left: 735px;
    transition: all ease-in-out 0.5s;
    animation: beat .4s infinite alternate;
    transform: scale(1);
}
    .moncurep:hover {
        transform:scale(1.2);
        transition: all ease-in-out 0.5s;
        animation: none;
    }
.moncurepoint {
    background-image: url('../Images/MoncurePoint.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size:contain;
    display: block;
    width: 63px;
    height: 63px;
    position: relative;
    top: 449px;
    left: 741px;
    opacity: 0;
    transition: all ease-in-out 0.5s;
}
/*    .moncurepoint:hover {
        opacity: 1;
        transition: all ease-in-out 0.5s;
        animation: beat .4s infinite alternate;
    }*/
@keyframes beat {
    to {
        opacity: 0.5;
    }
}
.moncuretag {
    background-image: url('../Images/moncuretag.jpg');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 180px;
    height: 33px;
    position: relative;
    top: 456px;
    left: 1100px;
}



.centerbox {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
/*top Menu*/
.menu_container {
    background-image: linear-gradient(to right, var(--bluedark), var(--blueback));
    color: var(--white);
    position: relative;
    width: 1160px;
    z-index:1001;
}
.menu_button {
    color: var(--white);
    transition: all ease-in-out 0.3s;
}
    .menu_button:hover {
        color: var(--greenlight);
        transition: all ease-in-out 0.3s;
    }
        .menu_button:hover .menu_dropdown_container {
            transition: all ease-in-out 0.5s;
            visibility: visible;
            height: 621px;
            width: 684px;
        }
        .menu_button:hover .extendedmenuAll {
            transition: all ease-in-out 0.4s;
            visibility: visible;
            height: 414px;
            opacity: 1;
        }
.menu_text_dark {
}
    .menu_text_dark:hover {
        color: var(--greendark);
    }
.menu_text_light {
}
    .menu_text_light:hover {
        color: var(--greenlight);
    }
.submenu_text {
    padding: 4px 0px 3px 15px;
}
    .submenu_text:hover {
        font-weight: 600;
    }


.menu_dropdown_container {
    visibility:hidden;
    position: absolute;
    width: 0px;
    height: 0px;
    box-shadow: 6px 8px 12px 0px rgba(0,0,0,0.3);
    z-index: 1000;
    background-position: right bottom -7px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all ease-in-out 0.5s;
}


.menu_dropdown_containerXX {
    display: block;
    position: absolute;
    width: 684px;
    height: 557px;
    box-shadow: 6px 8px 12px 0px rgba(0,0,0,0.3);
    z-index: 100;
    background-position: right bottom -7px;
    background-repeat: no-repeat;
    background-size: contain;
}
.Education_Placeholder {
    background-image: url('../Images/Education_Placeholder.jpg');
}

.UNC {
    background-image: url('../Images/UNC_Chapel_Hill_-_Old_Well_with_flowers.jpg');
}
.DUKE {
    background-image: url('../Images/Duke_University_Chapel.jpg');
}
.NCSTATE {
    background-image: url('../Images/NC_State-university.jpg');
}
.Campbell {
    background-image: url('../Images/Campbell_University.jpg');
}
.Elon {
    background-image: url('../Images/Elon_University.jpg');
}
.HighPoint {
    background-image: url('../Images/HighPoint_University.jpg');
}
.NCATState {
    background-image: url('../Images/NC_AT_State_University.jpg');
}
.NCC {
    background-image: url('../Images/NC_Central_University.jpg');
}
.UNCG {
    background-image: url('../Images/UNC_Greensboro.jpg');
}
.WakeForest {
    background-image: url('../Images/Wake_Forest_University.jpg');
}
.Meredith {
    background-image: url('../Images/Meredith_College.jpg');
}
.CCCC {
    background-image: url('../Images/Central_Carolina_Community_College.jpg');
}
.DurhamTech {
    background-image: url('../Images/Durham_Tech_Community_College.jpg');
}
.WakeTech {
    background-image: url('../Images/Wake_Tech_Community_College.jpg');
}
.WinstonSalem {
    background-image: url('../Images/Winston-Salem_State_University.jpg');
}
.ForsythTech {
    background-image: url('../Images/Forsyth_Tech_Community_College.jpg');
}
.Alamance {
    background-image: url('../Images/Alamance_Community_College.jpg');
}

.eduPoint {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 100px;
    height: 100px;
    margin-bottom: -100px;
    position: relative;
    transition: all ease-in-out 0.5s;
    opacity: 0.8;
    border-radius: 50px;
}
    .eduPoint:hover {
        opacity: 1;
        transition: all ease-in-out 0.5s;
        animation: beat .5s infinite alternate;
    }
@keyframes glow {
    to {
        box-shadow: 0px 0px 30px rgba(237, 145, 46, 1);
    }
}
.UNCpointgrey {
    background-image: url('../Images/EduPoints/UNCgrey.png');
    top: 140px;
    left: 720px;
    z-index: 1;
}
.UNCpoint {
    background-image: url('../Images/EduPoints/UNC.png');
    top: 140px;
    left: 720px;
    animation: glow .8s infinite alternate;
    z-index: 2;
}
.DUKEpointgrey {
    background-image: url('../Images/EduPoints/DUKEgrey.png');
    top: 100px;
    left: 800px;
    z-index: 1;
}
.DUKEpoint {
    background-image: url('../Images/EduPoints/DUKE.png');
    top: 100px;
    left: 800px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.NCSTATEpointgrey {
    background-image: url('../Images/EduPoints/NCSTATEgrey.png');
    top: 180px;
    left: 950px;
    z-index: 1;
}
.NCSTATEpoint {
    background-image: url('../Images/EduPoints/NCSTATE.png');
    top: 180px;
    left: 950px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.Campbellpointgrey {
    background-image: url('../Images/EduPoints/Campbellgrey.png');
    top: 200px;
    left: 1000px;
    z-index:1;
}
.Campbellpoint {
    background-image: url('../Images/EduPoints/Campbell.png');
    top: 200px;
    left: 1000px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.Elonpointgrey {
    background-image: url('../Images/EduPoints/Elongrey.png');
    top: 0px;
    left: 400px;
    z-index: 1;
}
.Elonpoint {
    background-image: url('../Images/EduPoints/Elon.png');
    top: 0px;
    left: 400px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.HighPointpointgrey {
    background-image: url('../Images/EduPoints/HighPointgrey.png');
    top: 100px;
    left: 100px;
    z-index: 1;
}
.HighPointpoint {
    background-image: url('../Images/EduPoints/HighPoint.png');
    top: 100px;
    left: 100px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.NCATStatepointgrey {
    background-image: url('../Images/EduPoints/NCATStategrey.png');
    top: -20px;
    left: 300px;
    z-index: 1;
}
.NCATStatepoint {
    background-image: url('../Images/EduPoints/NCATState.png');
    top: -20px;
    left: 300px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.NCCpointgrey {
    background-image: url('../Images/EduPoints/NCCgrey.png');
    top: 90px;
    left: 850px;
    z-index: 1;
}
.NCCpoint {
    background-image: url('../Images/EduPoints/NCC.png');
    top: 90px;
    left: 850px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.UNCGpointgrey {
    background-image: url('../Images/EduPoints/UNCGgrey.png');
    top: -20px;
    left: 240px;
    z-index: 1;
}
.UNCGpoint {
    background-image: url('../Images/EduPoints/UNCG.png');
    top: -20px;
    left: 240px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.WakeForestpointgrey {
    background-image: url('../Images/EduPoints/WakeForestgrey.png');
    top: -40px;
    left: 70px;
    z-index: 1;
}
.WakeForestpoint {
    background-image: url('../Images/EduPoints/WakeForest.png');
    top: -40px;
    left: 70px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.WinstonSalempointgrey {
    background-image: url('../Images/EduPoints/WinstonSalemgrey.png');
    top: -20px;
    left: 110px;
    z-index: 1;
}
.WinstonSalempoint {
    background-image: url('../Images/EduPoints/WinstonSalem.png');
    top: -20px;
    left: 110px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.CCCCpointgrey {
    background-image: url('../Images/EduPoints/CCCCgrey.png');
    top: 300px;
    left: 470px;
    z-index: 1;
}
.CCCCpoint {
    background-image: url('../Images/EduPoints/CCCC.png');
    top: 300px;
    left: 470px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.DurhamTechpointgrey {
    background-image: url('../Images/EduPoints/DurhamTechgrey.png');
    top: 30px;
    left: 840px;
    z-index: 1;
}
.DurhamTechpoint {
    background-image: url('../Images/EduPoints/DurhamTech.png');
    top: 30px;
    left: 840px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.Meredithpointgrey {
    background-image: url('../Images/EduPoints/Meredithgrey.png');
    top: 230px;
    left: 930px;
    z-index: 1;
}
.Meredithpoint {
    background-image: url('../Images/EduPoints/Meredith.png');
    top: 230px;
    left: 930px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.WakeTechpointgrey {
    background-image: url('../Images/EduPoints/WakeTechgrey.png');
    top: 150px;
    left: 1000px;
    z-index: 1;
}
.WakeTechpoint {
    background-image: url('../Images/EduPoints/WakeTech.png');
    top: 150px;
    left: 1000px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.ForsythTechpointgrey {
    background-image: url('../Images/EduPoints/ForsythTechgrey.png');
    top: 10px;
    left: 30px;
    z-index: 1;
}
.ForsythTechpoint {
    background-image: url('../Images/EduPoints/ForsythTech.png');
    top: 10px;
    left: 30px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}
.Alamancepointgrey {
    background-image: url('../Images/EduPoints/Alamancegrey.png');
    top: 40px;
    left: 680px;
    z-index: 1;
}
.Alamancepoint {
    background-image: url('../Images/EduPoints/Alamance.png');
    top: 40px;
    left: 680px;
    animation: glow .5s infinite alternate;
    z-index: 2;
}

.menudot_Edu {
    background-image: url('../Images/IDMenu_dot.png');
    background-position: center top;
    background-repeat: no-repeat;
    display:block;
    width:15px;
    height:28px;
    transform:translateY(5px) translateX(+36px);
    margin-bottom:-28px;
}

.menu_dropdown_box {
    width: 340px;
}
.menu_dropdown_inner {
    background-color: var(--bluedark);
    padding: 12px 0px 0px 0px;
    margin-top: 7px;
    color: var(--white);
}
.submenu_container {
    background-color: var(--greybackground);
    padding:2px 0px;
    border-top: 1px solid var(--bluelight);
    border-bottom: 1px solid var(--bluelight);
}
.extendedmenu_container {
    background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.8));
    margin-top:-4px;
    padding: 7px 0px 7px 0px;
}
.extendedmenuAll {
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    visibility:hidden;
    opacity:0;
    height: 0px;
    padding-left: 60px;
    transition: all ease-in-out 0.5s;
}



.bottombox {
    visibility: visible;
    display: block;
    z-index: 100;
    width: 938px;
    height: 135px;
    position: relative;
    bottom: -490px;
    left: 0px;
    opacity: 1;
    transition: all ease-in-out 0.5s;
}
.bottomboxhidden {
    visibility: hidden;
    display: block;
    width: 938px;
    height: 135px;
    position: relative;
    bottom: -627px;
    left: 0px;
    opacity: 0;
    transition: all ease-in-out 0.5s;
}
.bb_logo {
    background-position: left center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 234px;
    height: 135px;
    vertical-align: top;
}
.UNCbb {
    background-image: url('../Images/Logos/UNC.jpg');
}
.DUKEbb {
    background-image: url('../Images/Logos/Duke.jpg');
}
.NCSTATEbb {
    background-image: url('../Images/Logos/NCSTATE.jpg');
}
.Campbellbb {
    background-image: url('../Images/Logos/Campbell.jpg');
}
.Elonbb {
    background-image: url('../Images/Logos/Elon.jpg');
}
.HighPointbb {
    background-image: url('../Images/Logos/HighPoint.jpg');
}
.NCATStatebb {
    background-image: url('../Images/Logos/NCATState.jpg');
}
.NCCbb {
    background-image: url('../Images/Logos/NCC.jpg');
}
.UNCGbb {
    background-image: url('../Images/Logos/UNCG.jpg');
}
.WakeForestbb {
    background-image: url('../Images/Logos/WakeForest.jpg');
}
.Meredithbb {
    background-image: url('../Images/Logos/Meredith.jpg');
}
.CCCCbb {
    background-image: url('../Images/Logos/CCCC.jpg');
}
.DurhamTechbb {
    background-image: url('../Images/Logos/DurhamTech.jpg');
}
.WakeTechbb {
    background-image: url('../Images/Logos/WakeTech.jpg');
}
.WinstonSalembb {
    background-image: url('../Images/Logos/WinstonSalem.jpg');
}
.ForsythTechbb {
    background-image: url('../Images/Logos/ForsythTech.jpg');
}
.Alamancebb {
    background-image: url('../Images/Logos/Alamance.jpg');
}

.Icons {
    float: right;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    margin: 100px 5px 0px 0px;
    transform:scale(1);
    transition: all ease-in-out 0.3s;
}
    .Icons:hover {
        transform: scale(1.2);
        transition: all ease-in-out 0.3s;
    }
.Icon_Agriculture {
    background-image: url('../Images/Icons/Agriculture.png');
}
.Icon_arts {
    background-image: url('../Images/Icons/arts.png');
}
.Icon_Business {
    background-image: url('../Images/Icons/Business.png');
}
.Icon_Communication {
    background-image: url('../Images/Icons/Communication.png');
}
.Icon_Education {
    background-image: url('../Images/Icons/Education.png');
}
.Icon_engineering {
    background-image: url('../Images/Icons/engineering.png');
}
.Icon_entrepreneurship {
    background-image: url('../Images/Icons/entrepreneurship.png');
}
.Icon_Healthcare {
    background-image: url('../Images/Icons/Healthcare.png');
}
.Icon_Law {
    background-image: url('../Images/Icons/Law.png');
}
.Icon_pharma {
    background-image: url('../Images/Icons/pharma.png');
}
.Icon_publicservice {
    background-image: url('../Images/Icons/publicservice.png');
}
.Icon_Research {
    background-image: url('../Images/Icons/Research.png');
}
.Icon_socialsciences {
    background-image: url('../Images/Icons/socialsciences.png');
}
.Icon_technology {
    background-image: url('../Images/Icons/technology.png');
}
.Icon_workforce {
    background-image: url('../Images/Icons/workforce.png');
}

.bbox_mid {
    vertical-align: top;
    display: inline-block;
    width: 343px;
    height: 135px;
    margin-left: -4px;
}
.bbox_r {
    vertical-align: top;
    display: inline-block;
    margin-left:-4px;
    width: 360px;
    height: 135px;
}
.bbox_r_inner {
    height: 109px;
    text-align:center;
}

.navdot {
    background-image: url('../Images/NavDot.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    width: 13px;
    height: 20px;
    margin-bottom: -20px;
}
.navdot_Rank {
    transform: translateX(+32px);
}
.navdot_Founded {
    transform: translateX(+96px);
}
.navdot_Students {
    transform: translateX(+172px);
}
.navdot_Campus {
    transform: translateX(+272px);
}
.rankhead {
    background-image: url('../Images/Nation.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align: center;
}
.rankWorldhead {
    background-image: url('../Images/World.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align: center;
}
.foundedhead {
    background-image: url('../Images/FoundingYear.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    width: 98px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align:center;
}
.studentshead {
    background-image: url('../Images/TotalStudents.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 160px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align: center;
}
.studentsAnnualhead {
    background-image: url('../Images/GraduatingAnnually.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 160px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align: center;
}
.campushead {
    background-image: url('../Images/Distance.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    padding-left:40px;
    padding-top: 16px;
    margin: 25px auto -13px auto;
    text-align: center;
}
.campusTimehead {
    background-image: url('../Images/Time.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    padding-top: 16px;
    padding-left: 40px;
    margin: 25px auto -13px auto;
    text-align: center;
}




.eduAll {
    background-image: url('../Images/Edu_UandCC.png');
}
.eduT1 {
    background-image: url('../Images/Edu_T1.png');
}
.eduT2 {
    background-image: url('../Images/Edu_UandT1.png');
}
.eduT3 {
    background-image: url('../Images/Edu_CC.png');
}












.slidecontainer {
    position: relative;
    top:620px;
    width: 1240px;
    padding:20px;
    background-color: #d3b2b29d;
}
/* The slider itself */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: #1a466b;
    border-radius:  15px;
    border: #ffffff Solid 2px;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
    .slider:hover {
        opacity: 1;
    }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 61px;
        height: 67px;
        border: none;
        background: url('../Images/Population/sliderIcon.png');
        cursor: pointer;
      }
      .slider::-moz-range-thumb {
        width: 61px;
        height: 67px;
        border: none;
        background: url('../Images/Population/sliderIcon.png');
        cursor: pointer;
      }

.slidemarkers{
    display: flex;
    justify-content: space-between;
    margin: -20px -10px 10px 10px;
    font-weight: 600;
}
.popCounterBox{
    position: relative;
    text-align: right;
    top:350px;
    width: 240px;
    padding:20px;
    background-color: #d3b2b29d;
}
.popCounterTitle{
    font-weight: 600;
}
.popCounterText{
    font-weight: 600;
    font-size: 24px;
}
.justifytext{
    display: flex;
    justify-content: space-between;
}

.popUpPoint {
    background-image: url('../Images/Population/datapoint.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 45px;
    height: 45px;
    position: absolute;
    transition: all ease-in-out 0.5s;
    animation: beat .4s infinite alternate;
    transform: scale(1);
    box-shadow: 0 0 1px #ff0000;
    border-radius: 50%;
}
    .popUpPoint:hover {
        transform:scale(1.2);
        transition: all ease-in-out 0.5s;
        animation: none;
    }
.popUpPoint_ONE{
    top: 310px;
    left: 360px;
}
.popUpPoint_TWO{
    top: 335px;
    left: 760px;
}
.popUpPoint_THREE{
    top: 450px;
    left: 830px;
}

.popUpBox{
    position: absolute;
    text-align: center;
    width: 180px;
    height:160px;
    padding:10px;
    background-color: #d3b2b2cb;
    border: #a0c9ef solid 1px;
    border-radius: 10px;
}
.popUpBox_ONE{
    background-image: url('../Images/Logos/WolfSpeed.png');
    background-position: center 40px;
    background-repeat: no-repeat;
    background-size: 180px;
    top: 135px;
    left: 155px;
}
.popUpBox_TWO{
    background-image: url('../Images/Logos/Asteria_Dysney.png');
    background-position: center 40px;
    background-repeat: no-repeat;
    background-size: 180px;
    top: 155px;
    left: 805px;
}
.popUpBox_THREE{
    background-image: url('../Images/Logos/Vinfast.png');
    background-position: center 40px;
    background-repeat: no-repeat;
    background-size: 180px;
    top: 400px;
    left: 880px;
}

.scale1{
    transform: scale(1);
    transition: all ease-in-out 0.5s;
}
.scale0{
    transform: scale(0);
    transition: all ease-in-out 0.5s;
}






/**************************************************************************************************************/
.bg_green{
    background-color: var(--greendark);
}
.bg_bluedark {
    background-color: var(--bluedark);
}
.bg_bluelight {
    background-color: var(--blueback);
}
.bg_white {
    background-color: var(--white);
}

.cursor-pointer {
    cursor: pointer;
}


.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.contents {
    display: contents;
}
.hidden {
    display: none;
}

.opacity25{
    opacity:0.25;
}
.opacity50 {
    opacity: 0.5;
}
.opacity75 {
    opacity: 0.75;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}

.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}

.bottom-0 {
    bottom: 0px;
}
.left-0 {
    left: 0px;
}
.left-full {
    left: 100%;
}
.right-0 {
    right: 0px;
}
.right-4 {
    right: 2rem;
}
.top-0 {
    top: 0px;
}
.top-1\/2 {
    top: 50%;
}
.top-10 {
    top: 2.5rem;
}
.top-4 {
    top: 2rem;
}

.rounded {
    border-radius: 0.25rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-sm {
    border-radius: 0.125rem;
}

.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-2 {
    border-width: 2px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-l {
    border-left-width: 1px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}

.bordernavy {
    border-color: var(--bluedark);
}

.text_greendark {
    color: var(--greendark);
}
.text_greenlight {
    color: var(--greenlight);
}
.text_bluedark {
    color: var(--bluedark);
}
.text_bluetext {
    color: var(--bluetext);
}
.text_bluelight {
    color: var(--bluelight);
}
.text_black{
    color: var(--black);
}
.text_white {
    color: var(--white);
}
.textcapital {
    text-transform: uppercase;
}
.text-center {
    text-align: center;
}
.text-italic{
    font-style:italic;
}
.font-bold {
    font-weight: 700;
}
.font-light {
    font-weight: 300;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}

.font-TaiHP {
    font-family: TaiHeritagePro-Regular;
}



.text-xxs {
    font-size: 0.6rem;
    line-height: 0.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 4.5rem;
}



.w-auto {
    width: auto;
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}
.w-full {
    width: 100%;
}


.mt-2 {
    margin-top: 0.5rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mt-12 {
    margin-top: 3rem;
}
.mt-14 {
    margin-top: 3.5rem;
}
.mt-16 {
    margin-top: 4rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-12 {
    margin-bottom: 3rem;
}

.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


.py-1 {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.py-48 {
    padding-top: 12rem;
    padding-bottom: 12rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-10 {
    padding: 2.5rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-2p5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}
.pb-12 {
    padding-bottom: 3rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-1 {
    padding-bottom: 0.25rem;
}
.pb-1a {
    padding-bottom: 0.35rem;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-24 {
    padding-bottom: 6rem;
}
.pb-28 {
    padding-bottom: 7rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-8 {
    padding-bottom: 2rem;
}

.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pr-12 {
    padding-right: 3rem;
}
.pr-2 {
    padding-right: 0.5rem;
}

.pt-10 {
    padding-top: 2.5rem;
}
.pt-14 {
    padding-top: 3.5rem;
}
.pt-16 {
    padding-top: 4rem;
}
.pt-20 {
    padding-top: 5rem;
}
.pt-24 {
    padding-top: 6rem;
}
.pt-28 {
    padding-top: 7rem;
}
.pt-32 {
    padding-top: 8rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.pt-8 {
    padding-top: 2rem;
}