﻿ .tap_whole{
            border-bottom:1px solid #207fcb;float:left;width:100%
        }

        .grdSchedulestyle{
            width:500px;
        }

       .Schedule_style{
           margin-left:50px
           ;padding-top:50px;
       }
        
        .container11 { width: 770px; margin: auto; padding-top: 1em; }
        .container11 .ism-slider { margin-left: auto; margin-right: auto; }

        .auto-style1 {
            width: 15%;
            height: 45px;
        }
        .auto-style2 {
            width: 85%;
            height: 45px;
        }

        .auto-style4 {
            height: 30px;
        }

        .social-slide {
	        background-image: url('path/to/image.png');
	        height: 48px;
	        width: 48px;
	        margin: 10px;
	        float: left;
	        -webkit-transition: all ease 0.3s;
	        -moz-transition: all ease 0.3s;
	        -o-transition: all ease 0.3s;
	        -ms-transition: all ease 0.3s;
	        transition: all ease 0.3s;
            }
            .social-slide:hover {
	        background-position: 0px -48px;
	        box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
            }


#bannerall {
    max-width: 2000px;
    width: 100%;
    height: 140px;
    margin-left: auto;
    margin-right: auto
}

        #bannersize{
            max-width:1100px;width:100%;margin-left:auto;margin-right:auto
        }

        #bannerimage22{
            max-width:1100px;width:47%;
height:110px;float:left
}

        #bannerright2{
            max-width:1100px;width:44%;height:110px;float:right;
        }
        .TopMenu{
            font-size:medium;
        }
         .IDPLogo{
                 width:70px;height:110px;
             }
           #div_slider{
                 cursor: move; position: absolute; margin-left:auto;margin-right:auto;  width:100%;
                    overflow: hidden;height:455px;
             }

        #footer_left{
            width:100%;float:left
        }

        #footer_right{
            width:30%;float:left;
            margin-top:1%
        }

        #ACE_IDP{
            width:20%
        }

        #idplogo{
            max-width:150px;width:100%
        }

        #languag_responsive{
            max-width:50px;width:100%;
        }

        .box_slide_left{
            position:inherit;z-index:1;max-width:1100px;width:100%;margin-top:5%;margin-left:12%
        }

        .box_slide_right{
            position:inherit;z-index:1;max-width:1100px;width:100%;margin-top:5%;margin-left:28%
        }

        .magazine-whole{
            width:100%;
            margin-top:10px
        }

         .magazine-box{
            width: 180px; height: 310px; background-color: #f6f6f6; box-shadow: 1px 1px 2px 0px #d5d3d3; float: left;
        }

        .magazine-box:hover{
            width: 180px; height: 310px; background-color: #f6f6f6;
        }

        .magazine-box-next{
            width: 180px; height: 310px; background-color: #f6f6f6; box-shadow: 1px 1px 2px 0px #d5d3d3; float: left;margin:5px;
        }

        .magazine-box-next:hover{
            width: 180px; height: 310px; background-color: #f6f6f6;
        }

        .magazine-image{
            filter: alpha(opacity=100);
            opacity: 1;
        }

        .magazine-image:hover{
            filter: alpha(opacity=80);
            opacity: .8;
        }

        .management_team_left{
            width:145px;height:auto;float:left
        }

        .management_team_right{
            width:78%;height:auto;float:left;margin-left:15px;
        }

        .clSchedule{
            float:left;
        }
        
        .Schedule_Title{
            width:auto;
        }

        .divprevious_issue_begin{
            width:30%;float:left;margin-top:25px;
        }

        .divprevious_issue_middle{
            width:30%;float:left;margin-left:4%;margin-right:4%;margin-top:25px;
    
        }

        #container_breadscrum{
            width:100%;margin-left:12px;margin-top:7px;font-size:14px
        }

        #div_socialmedia_background{
            width:100%;height:30px
            ;background-color:white;
            display:none;
             
        }

        #container_top_whole{
            max-width:2000px;
            width:100%;
            background-color:#F8F8F8;
            height:30px;
            border-bottom:1px solid #e8e8e8;
            margin-left:auto;
            margin-right:auto;
        }

        #container_top{
            max-width:1100px;
            width:100%;
            height:auto;
            overflow:hidden;
            margin-left:auto;
            margin-right:auto;
        }

        #container_top_left{
            max-width:1100px;
            width:50%;
            float:left;
        }

        #container_top_right{
            max-width:1100px;
            width:50%;
            float:left;
        }

        #container_user{
            
        }

        #language_responsive{
            display:none;
        }

        #container_socialmedia_website{
            display:block;
        }

        #divSignIn_Form{
            max-width:800px;
            width:100%;
        }

        .textbox_login{
            margin-top:10px;
        }

        .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }
        .modalPopup
        {
            background-color: #FFFFFF;
            border-width: 3px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            width: 300px;
            height: 140px;
        }

         .selectbox
            {
                background-color: #FFF;
                font-family: 'Open Sans' , sans-serif;
                color: #000;
                font-weight: normal;
                border: 1px solid #ccc;
                margin: 5px 0 0 0;
                padding: 5px;
                border-radius:5px;
            }

         .grdSchedulestyle{
                width:700px;
                margin-left:15px;
                border-bottom:1px solid #66CCFF;
                border-right:1px solid #66CCFF;
                border-left:1px solid #66CCFF;
            }

         #divClass_Result{
             width:100%;
         }

        @media only screen and (min-width:1500px) {
            .box_slide_left{
            position:inherit;z-index:1;max-width:1100px;width:100%;margin-top:5%;margin-left:22%
            }

             .box_slide_right{
            position:inherit;z-index:1;max-width:1100px;width:100%;margin-top:5%;margin-left:21%
            }
        }

        @media only screen and (max-width:480px) {

            
             .box_slide_right{
            position:inherit;z-index:1;max-width:1100px;width:80%;margin-top:5%;margin-left:21%
            }

            #container_top_right{
                max-width:480px;
                width:100%;
                float:none;
            }

            #container_socialmedia_website{
                display:none;
            }

             #div_socialmedia_background{
            width:100%;height:30px
            ;background-image:url('../../../../img/ACE web new-02.png');
             background-repeat:repeat-x;
             display:block;
        }

            #container_breadscrum{
    width:100%;margin-left:15px;margin-top:7px
}

            .tap_whole{
                max-width:480px;
                border-bottom:1px solid #207fcb;float:left;width:100%
            }

            .grdSchedulestyle{
                width:480px;
                margin-left:0px;
            }

            .Schedule_Title{
                width:50px;
            }

            .clSchedule{
                float:none;
            }

            .management_team_left{
                max-width:145px;width:100%;margin-left:auto;margin-right:auto;height:auto;float:none
            }

            .management_team_right{
                width:100%;height:auto;float:none;margin-left:0px;
            }

            .container11 { max-width:480px;width:100%; margin: auto; padding-top: 1em; }
            .container11 .ism-slider { margin-left: auto; margin-right: auto; }

            
            #languag_responsive{
                max-width:50px;width:100%;margin-left:auto;margin-right:auto;
            }

             #idplogo{
                max-width:150px;width:100%;margin-left:auto;margin-right:auto;
            }

            #ACE_IDP{
                width:80%; 
            }

            #footer_right{
                max-width:200px; width:100%;float:none;margin-left:15%;margin-right:auto;
            }

            #footer_left{
                width:100%;float:none
            }
            
            #bannerall{
                max-width:480px;width:100%;height:100%
            }

            #bannersize{
                max-width:480px;width:100%;margin-left:auto;margin-right:auto
            }

            #bannerimage22{
                max-width:480px;width:100%;height:100%;float:none
            }

            #bannerright2{
                max-width:480px;width:100%;height:100%;float:none
            }
             .TopMenu{
            font-size:11px;
        }
             .IDPLogo{
                 width:50px;height:90px;
             }
             #div_slider{
                 cursor: move; position: absolute; margin-left:auto;margin-right:auto;  width:100%; height: 600px;
                    overflow: hidden;
             }

              .box_slide_right{
            position:inherit;z-index:1;max-width:1100px;width:100%;height:400px;margin-top:5%;margin-left:21%
            }

             .magazine-box{
                max-width:180px;width:100%;margin-left:auto;margin-right:auto; height: 310px; background-color: #f6f6f6; box-shadow: 1px 1px 2px 0px #d5d3d3;float:none
            }

            .magazine-box-next{
                max-width:180px;width:100%;margin-left:auto;margin-right:auto; height: 310px; background-color: #f6f6f6; box-shadow: 1px 1px 2px 0px #d5d3d3;margin-top:20px;float:none;
            }

            .magazine-whole{
                max-width:480px;width:100%;
            }

           
        }


       


        .mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}
      

.Initial2
  {
    display: block;
    padding: 4px 22px 4px 22px;
    float: left;
    background: url("../Images/Tab1.png") repeat-y  ;
    color: white;
    font-weight: bold;
    font-size:12px
  }
  .Initial2:hover
  {
    color: black;
    background: url("../Images/Tab2.png") ;
  }

  .Clicked2
  {
    float: left;
    display: block;
    background: url("../Images/Tab2.png") ;
    padding: 4px 18px 4px 18px;
    color: Black;
    font-weight: bold;
    color: black;
    font-size:12px
  }


.Initial
  {
    display: block;
    padding: 4px 22px 4px 22px;
    float: left;
    background: url("../Images/InitialImage.png") repeat-y  ;
    color: white;
    font-weight: bold;
    font-size:12px
  }
  .Initial:hover
  {
    color: black;
    background: url("../Images/SelectedButton.png") ;
  }

  .Initial_start
  {
    display: block;
    padding: 4px 18px 4px 18px;
    float: left;
    background: url("../Images/InitialImage_start.png")  ;
    color: Black;
    font-weight: bold;
    font-size:12px
  }
  .Initial_start:hover
  {
    color: black;
    background: url("../Images/SelectedButton_start.png") ;
  }

  .Clicked
  {
    float: left;
    display: block;
    background: url("../Images/SelectedButton.png") ;
    padding: 4px 18px 4px 18px;
    color: Black;
    font-weight: bold;
    color: black;
    font-size:12px
  }

.cssEnrol {
    border-top: 1px solid #b2b0b0;
    border-right: 1px solid #b2b0b0;
}
.socialMediaLink {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    border-radius: 50%;
}

    .socialMediaLink img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

.topMenuLink {
    display: inline-block;
    vertical-align: top;
    padding: 0px 10px;
    color: #7d7d7d;
    border-radius: 7px;
    border-right: 1px solid black;
    text-align: center;
    border-radius: 0;
    font-size: 14px;
}

.topMenuLinkImg {
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid black;
    margin: 0 5px;
    padding: 0px 10px;
}

    .topMenuLinkImg img {
        width: 18px;
        height: 18px;
    }

.spanDisclaimer {
    display: inline-block;
    margin-top: 5px;
    cursor: pointer;
    transition: all 0.5s linear;
    text-decoration: underline;
}

    .spanDisclaimer:hover {
        text-shadow: 0 0 10px #79d5f3;
    }
.requiredColor {
    border: 1px solid red;
}

.g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
    display: inline-block;
}

.div-left {
    width: 48%;
    float: left;
    margin: 5px;
}

@media (max-width: 768px) {
    .div-left {
        width: 100%;
        float: left;
    }
}

.boxTableStyle {
    display: inline-block;
    margin: 5px;
    border: 1px solid #307fbf;
    width: 100%;
    padding: 20px 0px;
    vertical-align: top;
    box-shadow: 0 0 20px lightgrey;
}

.boxTableHeader {
    text-align: left;
    color: white;
    padding: 10px;
    background-color: #307fbf;
    height: auto;
    overflow: auto;
}

.boxTableContent {
    padding: 5px 20px;
    text-align: left;
    font-size: small;
    overflow: auto;
}

@media screen and (max-width: 435px) {
    .boxTableStyle {
        width: 98%;
        margin: 10px 5px;
    }
}

.boxTableContent table tr:nth-child(even) {
    background-color: #f2f2f2;
}

sup {
    vertical-align: super !important;
}

.boxTableContent td {
    padding: 5px
}

.questionForm {
    padding: 5px;
    border: 1px solid #6eb62b;
    width: 97%;
    margin: auto;
}

    .questionForm span {
        font-size: small !important;
    }

    .questionForm input {
        font-size: small !important;
    }

        .questionForm input[type="checkbox"] {
            font-size: small !important;
        }

    .questionForm div {
        font-size: small !important;
        padding: 2px;
        line-height: 20px !important;
    }

.chkAgree p, label {
    font-size: small !important;
    line-height: 10px !important;
}

.chkAgree label {
    font-size: small !important;
    display: inline;
    margin-left: 5px;
    line-height: 10px !important;
}

.chkAgree span {
    font-size: small !important;
    line-height: 10px !important;
}

.questionForm div * {
    font-size: small !important
}

.div_form {
    width: 47%;
    float: left;
    margin: 8px;
}

@media (max-width:500px) {
    .div_form {
        width: 100%;
    }
}

.div-paddingAll {
    line-height: 15px;
}

.infoPopupBox {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    max-width: 680px;
    width: 95%;
    display: none;
    z-index: 99999;
}

.infoPopupPanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #7c7c7c;
    display: none;
    opacity: 0.7;
    z-index: 99999;
}

html {
    min-height: 100%;
}

body {
    position: absolute;
    width: 100%;
    height: 100%;
}

form {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.auto-style5 {
    height: 22px;
}
.popupPanel, .popupPanelLoader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(142, 142, 142, 0.5);
    z-index: 1000;
}

.popupBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 20px #696969;
    width: 95%;
    max-width: 600px;
    background-color: white;
    z-index: 1001;
    border-radius: 10px;
    overflow: auto;
    max-height: 95%;
}

.popupHeader {
    padding: 10px 20px;
    box-shadow: 0 2px 15px #cecece;
    background-color: #0090CC;
    color: white;
}

.popupBody {
    padding: 20px;
    overflow: auto;
}

.popupFooter {
    padding: 20px;
    text-align: center;
}

.btnCSS {
    outline: none;
    padding: 5px 20px;
    margin: 0 10px;
    box-shadow: 0 0px 15px #dedede;
    color: black;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
    border-radius: 7px;
    border: 1px solid #0090CC;
    background-color: transparent;
}

.spanDisclaimer {
    display: inline-block;
    margin-top: 5px;
    cursor: pointer;
    transition: all 0.5s linear;
    text-decoration: underline;
}

    .spanDisclaimer:hover {
        text-shadow: 0 0 10px #79d5f3;
    }

#cssmenu {
    background: transparent;
}

.container11 {
    width: 100%;
    height: 200px;
}

#divarticle ul {
    list-style-position: outside;
    margin: 0 45px 10px 45px
}

#cssmenu ul ul li {
    text-align: left
}

.body-font-format * {
    font-family: "BuenosAires-Light" !important;
    font-size: 18px !important;
    line-height: 28px !important;
}

.keyDate {
    font-weight: 700;
}

.btn-askInfo {
    cursor: pointer;
    border-radius: 6px;
    max-width: 120px;
    width: 100%;
    font-size: 12px !important;
    text-align: center;
    margin: 2px;
    padding: 1px;
    background: #307fbf;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.btn-askInfo-short {
    cursor: pointer;
    border-radius: 6px;
    max-width: 120px;
    width: 100%;
    font-size: 12px !important;
    text-align: center;
    margin: 2px;
    padding: 1px;
    background: #307fbf;
    color: #fff;
    text-decoration: none;
    display: none;
}

.btn-apply {
    border-radius: 6px;
    max-width: 80px;
    width: 100%;
    font-size: 12px !important;
    text-align: center;
    margin: 2px;
    padding: 1px;
    background: #307fbf;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

@media screen and (max-width:900px) {
    .btn-askInfo {
        display: inline-block;
    }

    .btn-askInfo-short {
        display: none;
        font-size: 10px !important;
        padding: 2px;
    }

    .btn-apply {
        font-size: 10px !important;
        padding: 2px
    }
}

.img-acc {
    max-width: 280px;
    height: 200px;
    float: left;
    padding: 5px;
    width: 100%;
}

.campus {
    width: 48%;
    float: left;
}

@media (max-width: 768px) {
    .campus {
        width: 100%;
        float: left;
    }

    .keyDate {
        font-weight: 700;
    }

    .btn-askInfo {
        cursor: pointer;
        border-radius: 6px;
        max-width: 120px;
        width: 100%;
        font-size: 12px !important;
        text-align: center;
        margin: 2px;
        padding: 1px;
        background: #307fbf;
        color: #fff;
        text-decoration: none;
        display: inline-block;
    }

    .btn-askInfo-short {
        cursor: pointer;
        border-radius: 6px;
        max-width: 120px;
        width: 100%;
        font-size: 12px !important;
        text-align: center;
        margin: 2px;
        padding: 1px;
        background: #307fbf;
        color: #fff;
        text-decoration: none;
        display: none;
    }

    .btn-apply {
        border-radius: 6px;
        max-width: 80px;
        width: 100%;
        font-size: 12px !important;
        text-align: center;
        margin: 2px;
        padding: 1px;
        background: #307fbf;
        color: #fff;
        text-decoration: none;
        display: inline-block;
    }
}

    @media screen and (max-width:900px) {
        .btn-askInfo {
            display: inline-block
        }

        .btn-askInfo-short {
            display: none;
            font-size: 10px !important;
            padding: 2px;
        }

        .btn-apply {
            font-size: 10px !important;
            padding: 2px
        }
    }

    .img-acc {
        max-width: 280px;
        height: 200px;
        float: left;
        padding: 5px;
        width: 100%;
    }

    ul {
        list-style-position: outside;
        margin: 0 45px;
    }

    li {
        line-height: 1.5;
    }

    .boxTableStyle {
        display: inline-block;
        margin: 10px;
        border-top: 2px solid #307fbf;
        border-bottom: 2px solid #307fbf;
        width: 99%;
        padding: 20px 0px;
        vertical-align: top;
        box-shadow: 0 0 20px lightgrey;
    }

    .boxTableHeader {
        text-align: left;
        color: white;
        padding: 10px;
        background-color: #307fbf;
        height: auto;
        overflow: auto;
    }

    .boxTableContent {
        padding: 5px;
        text-align: left;
        font-size: small;
        overflow: auto;
    }

    @media screen and (max-width: 435px) {
        .boxTableStyle {
            width: 100%;
            margin: 10px 5px;
        }
    }

    .boxTableContent table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    sup {
        vertical-align: super !important;
    }

    .boxTableContent td {
        padding: 5px
    }

    .img-box {
        position: relative;
        overflow-y: hidden;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        margin: 2px;
        max-width: 420px;
    }

    .align-c {
        text-align: center;
    }

    .ib-img {
        width: 100%;
        max-height: 280px;
        object-fit: cover;
    }

    .ib-title {
        text-transform: uppercase;
        background-color: #307fbf;
        color: white;
        padding: 15px;
        text-align: center
    }

    .ib-des {
        padding: 10px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(138, 56, 130, 0.7);
        color: white;
        box-sizing: border-box
    }

    .img-hov-box {
        overflow: auto;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(138, 56, 130, 0.7);
        transition: all 0.7s ease-in-out;
    }

    .img-box:hover .img-hov-box {
        top: 0;
    }

    .view-a {
        padding: 10px 20px;
        color: white;
        border: 1px solid white;
        text-decoration: none;
        margin: 20px;
        display: inline-block;
    }

        .view-a:hover, .view-a:visited {
            color: white;
            text-decoration: none
        }

    .ib-ctrl {
        user-select: none;
        width: 30px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.6);
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        border-radius: 4px;
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: all 0.7s ease-in-out;
    }

        .ib-ctrl:hover {
            background-color: rgba(255, 255, 255, 0.9);
        }

    .ib-ctrl-next {
        right: 10px;
        background-image: url("/Upload_s/2021%20img/next.png")
    }

    .ib-ctrl-prev {
        left: 10px;
        background-image: url("/Upload_s/2021%20img/prev.png")
    }

    .ib-img-slide {
        white-space: nowrap;
        overflow: auto;
        scroll-behavior: smooth;
        font-size: 0 !important;
    }

        .ib-img-slide::-webkit-scrollbar {
            display: none;
        }

    .ib-img-slide {
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        cursor: move;
    }

    @-moz-document url-prefix() {
        .ib-img-slide {
            overflow: hidden;
            cursor: default;
        }
    }

    .pos-rel {
        position: relative
    }

    .campus-format {
        float: left;
        border: 1px solid #eee;
        padding: 5px;
        width: 40%;
        height: 160px;
        text-align: center;
    }

    @media screen And (max-width: 874px) {
        .campus-format {
            cursor: pointer;
            float: left;
            border: 1px solid #eee;
            padding: 5px;
            width: 25%;
            height: 180px;
            text-align: center;
        }
    }

    @media screen And (max-width: 724px) {
        .campus-format {
            cursor: pointer;
            float: left;
            border: 1px solid #eee;
            padding: 5px;
            width: 100%;
            text-align: center;
            height: auto;
        }
    }

    .mainBox {
        width: 100%;
        max-width: 300px;
        float: left;
        border: 1px solid #eee;
        margin: 20px;
    }

    .divText {
        width: 100%;
        display: inline-block;
        top: 5px;
        position: relative;
        height: 300px;
        text-align: left;
        padding: 5px;
    }

    .divDashBox {
        display: inline-block;
        vertical-align: top;
        max-width: 300px;
        width: 100%;
        margin: 0px;
        box-shadow: 0 3px 20px #cecece;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 0px;
    }

    .divDashLink {
        display: block;
        width: 100%;
        height: 150px;
        position: relative;
        background-color: rgba(101, 101, 101, 0);
        font-size: 20px;
        color: white;
        cursor: pointer;
        border-radius: 7px;
    }

    .divDashContent {
        position: absolute;
        top: 0;
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding: 10px 0;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    .divDashLink:hover {
        color: white;
    } 