.calendar     { width:100%; margin-top:50px}
  	.calendar a   { color:#333; text-decoration:none; transition: all 0.3s ease-out;}
  
  	.calendar ul.weekdays, .calendar ul.days  { list-style:none; padding:0; margin:0; width:100%;}
  	.calendar ul.weekdays li,  .calendar ul.days li { display:block; float:left; /*width:20%;*/ padding:0; margin:0 -1px -1px 0px!important;
                     box-sizing: border-box; border: 1px solid #fff;}
	/*201703*/
	.calendar ul.weekdays.w5days li,  .calendar ul.days.w5days li { width:20% }
	.calendar ul.weekdays.w7days li,  .calendar ul.days.w7days li { width:14.2857% }
	.calendar ul.weekdays.w6days li,  .calendar ul.days.w6days li { width:16.6666666% }
	.calendar ul.weekdays.w4days li,  .calendar ul.days.w4days li { width:25% }
	.calendar ul.weekdays.w3days li,  .calendar ul.days.w3days li { width:33.3333333% }
	.calendar ul.weekdays.w2days li,  .calendar ul.days.w2days li { width:50% }
	.calendar ul.weekdays.w1days li,  .calendar ul.days.w1days li { width:100% }
	/*end of 201703*/
	
  	.calendar ul.weekdays li 		{ text-align:center; text-transform:uppercase; border:none; background-color:#fff;}

  	.calendar .days li 				      { height:50px; } 
   	.calendar .days li.day        	{ color:#666; background-color:#e7e7e7; transition: all 0.3s ease-out; cursor:pointer;}
  	.calendar .days li.day:hover  	{ background-color:#ccc;}
  	.calendar .days li.dim 			     { color:#c3cbd6; background:#e8edf3; }

  	.calendar .days li.today   	    { color:#fff; background-color:#125ba6; transition: all 0.3s ease-out; cursor:pointer;}
  	.calendar .days li.today:hover  { color:#fff; background-color:#074584}

  	.calendar .date {   font-size:20px; line-height:normal; text-align:center; padding-top:12px;
				  		          font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }


    .calendar ul.remarks     { padding:10px 0 0 0; margin:0;}
    .calendar ul.remarks, .calendar ul.remarks li.download a { color:#666}

    .calendar ul.remarks li  { padding:0; margin:0 ; list-style:none; display:inline-block; }
    .calendar ul.remarks li.download:before { content: "|"; padding:0 15px; color:#479ef5}
    .calendar ul.remarks li .fa-calendar, .calendar ul.remarks li .gi-download-alt { padding-right:10px}
    .calendar ul.remarks li.download a { text-decoration:underline; transition: all 0.3s ease-out; }
    .calendar ul.remarks li.download a:hover { color:#125ba6; }

   	.indices-blk:last-child { border-bottom:none;}

    html #body.en .calendar ul.remarks { font-size:12px}
    html #body.cn .calendar ul.remarks { font-size:12px}
 	
  /* ==========================================================================
		Media Styles
	============================================================================= */

    @media only screen and (max-width: 1024px) {
    .calendar .date { font-size:16px; }
    }

	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    .calendar ul.remarks li  { width:100%; padding:10px 0}
    .calendar ul.remarks li.download:before { content: ""; padding:0; }
    .calendar ul.remarks li.download { border-top: 1px solid #ececec;}
   	.indices-blk:last-child { border-bottom:none;}
  	}


    @media only screen and (max-width: 745px) {	
  	.calendar ul.weekdays li 		{ color:#ccc; font-size:10px}
  	.calendar .days li 				{ height:40px; } 
   	.calendar .date { font-size:14px; }

    .calendar ul.remarks li  { width:100%; padding:10px 0}
    .calendar ul.remarks li.download:before { content: ""; padding:0; }
    .calendar ul.remarks li.download { border-top: 1px solid #ececec;}
    }


	@media only screen and (max-width: 479px) {
    .calendar     { margin-top:20px}
    .calendar .days li 				{ height:40px;} 
    .calendar .date { font-size:14px; }
    }