.header {
    padding: 1em;
    margin-bottom: 1em;
    background-color: #111328;
    text-align: center;
}

.Cat{display:inline-block;text-align:center;width:23%;margin:.5%;padding:.5%;overflow:hidden;transition:.3s; font-weight:900; font-size:130%; background-color:#20233e;}
.Cat:hover{background-color: #32355b;color: #fff;}
.Cat > img{width:100%;transition:.1s;}
.clear{clear:both;}


.Course{display:inline-block;text-align:center;width:23%;margin:.5%;padding:.5%;overflow:hidden;transition:.3s; font-size:90%; color:#aebdf7;background-color: #111328;}
.Course:hover{color: #fff;}
.Course > span{display:block;background-color:#2b2e4e;margin:1px; font-size:110%; padding:.3em 0;}




#Info{text-align:center; background-color:#111328; padding:1px 1px 0 1px;}
#Info a{font-size:100%;font-weight:900;color:lime;}

#Info > span{width:16.66%;float:right; }
#Cal{text-align:center; margin-bottom:3em;background-color:#111328; padding:0 1px 1px 1px;}
#Cal > header{background-color:#20233e;box-shadow:0 0 2px #000 inset; padding:.3em 0;}
#Cal > span{width:14.285%;float:right;overflow:hidden;}
#Info > span > i,#Cal > span > i{display:block;font-style:normal;box-shadow:0 0 1px #000 inset;font-size:100%;overflow:hidden; background-color:#2b2e4e;padding:.2em 0;}
#Info > span > i > b{color:#ff5600;}


.OFF
{
    color:#f00;
}
@media only screen and (min-width:1px) and (max-width: 1023px)
{

    .Course,.Cat {
        width: 48%;
    }
        #Info > span,#Cal > span{width:100%;float:none;display:block;}
    #Info > span > i,#Cal > span > i{width:50%;float:right;border:none; font-size:100%;}
    
    .Course{width:46%;margin:0 1% .3em 1%;padding:1%;}

}