@charset "utf-8";
/* CSS Document */
.iiswbm-events-calendar-box1{width: 100%; height: auto; float: left; display: block; }
.calendar-box1-text{font-size: 26px; font-weight: 400; color: #0056ae; line-height: 26px;}
.tab-box1{width: 100%; height: auto; float: left; display: block; }
.tab5{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;-webkit-flex-wrap: wrap; margin-left: -10px; margin-right: -10px; padding: 35px 0;}
.tab5 li{display: block; width:25%; padding: 0px 10px;  cursor: pointer;  text-align: center; }


.tab5 li aside{width: 100%; height: 100%; float: left; display: block;margin: 0; padding:15px 15px;  background: #f7f7f7; border-radius: 4px; position: relative;}
.tab5 li aside span{ display: block;font-size: 15px; font-weight: 600; color: #2c2c2c; line-height: 22px;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}

.tab5 li.aboutGpsTabActive aside {background: #e9f0ff;  border-bottom: 3px solid #0056ae; position: relative;}
.tab5 li.aboutGpsTabActive aside::after { content: ''; position: absolute; left: 0; right: 0px; bottom: -14px; margin: 0 auto; display: table; border: 7px solid transparent ; border-top: 7px solid #0056ae ;}


.tab5 li aside:hover span{ color: #0056ae;}
.tab5 li.aboutGpsTabActive aside span{ color: #0056ae;}
.tab5 li aside:hover{ background: #e9f0ff;   -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;  -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in-out;}





.tab5 li aside figure i{display: inline-block; width: 56px; height: 50px;-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;  -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in-out;}

.tab5 li aside figure i.icon1{  background: url("../images/iiswbm-events-calendar-icon1.png") no-repeat 0px top ; }
.tab5 li aside:hover figure i.icon1{background: url("../images/iiswbm-events-calendar-icon1.png") no-repeat 0px -100px;}
.tab5 li.aboutGpsTabActive aside figure i.icon1{background: url("../images/iiswbm-events-calendar-icon1.png") no-repeat 0px -100px;}

.tab5 li aside figure i.icon2{  background: url("../images/iiswbm-events-calendar-icon2.png") no-repeat 0px top ; }
.tab5 li aside:hover figure i.icon2{background: url("../images/iiswbm-events-calendar-icon2.png") no-repeat 0px -100px;}
.tab5 li.aboutGpsTabActive aside figure i.icon2{background: url("../images/iiswbm-events-calendar-icon2.png") no-repeat 0px -100px;}

.tab5 li aside figure i.icon3{  background: url("../images/iiswbm-events-calendar-icon3.png") no-repeat 0px top ; }
.tab5 li aside:hover figure i.icon3{background: url("../images/iiswbm-events-calendar-icon3.png") no-repeat 0px -100px;}
.tab5 li.aboutGpsTabActive aside figure i.icon3{background: url("../images/iiswbm-events-calendar-icon3.png") no-repeat 0px -100px;}


.tab5 li aside figure i.icon4{  background: url("../images/iiswbm-events-calendar-icon4.png") no-repeat 0px top ; }
.tab5 li aside:hover figure i.icon4{background: url("../images/iiswbm-events-calendar-icon4.png") no-repeat 0px -100px;}
.tab5 li.aboutGpsTabActive aside figure i.icon4{background: url("../images/iiswbm-events-calendar-icon4.png") no-repeat 0px -100px;}
.iiswbm-events-calendar-tab{ margin-left: 0px; margin-right:0px; }
.iiswbm-events-calendar-tab h2{ font-size: 20px; font-weight: 600; color: #0056ae; line-height: 20px;}
 .left100per{  width: 100%; height: auto; float: left; display: block; padding: 0 0px; } 
.responsive-table { width: 100%;border-collapse: collapse; margin: 20px 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; background: #fff;}
.responsive-table thead tr:first-child td:first-child,
.responsive-table thead tr:first-child th:first-child {border-top-left-radius: 10px;}
.responsive-table thead tr:first-child td:last-child,
.responsive-table thead tr:first-child th:last-child {border-top-right-radius: 10px;} 
.responsive-table tbody tr:last-child td:first-child,
.responsive-table tbody tr:last-child th:first-child {border-bottom-left-radius: 10px;}
.responsive-table tbody tr:last-child td:last-child,
.responsive-table tbody tr:last-child th:last-child {border-bottom-right-radius: 10px;} 


    .responsive-table th {
     background:#0056ae;
      color: white;
      font-weight: bold; font-size: 16px;
      text-align: left;
      padding: 10px 25px; 
	    border-right: 1px solid #fff;
    }
 .responsive-table th:last-child { border-right: 0px solid #fff;}

    .responsive-table td {
      padding: 10px 25px;
      border-right: 1px solid #bfcdd5;
      color: #383838; font-size: 15px; font-weight: 400;
    }
	.responsive-table td:last-child { border-right: 0px solid #fff;}
	.responsive-table tr:nth-child(even) { background: #ffffff;}
	.responsive-table tr:nth-child(odd) { background: #e3edf8;}

    /* Mobile Responsive Breakpoint (600px and down) */
    @media screen and (max-width: 600px) {
      /* Force table elements to display as block blocks instead of cells */
      .responsive-table, 
      .responsive-table tbody, 
      .responsive-table tr, 
      .responsive-table td {
        display: block;
        width: 100%;
      }

      /* Hide the desktop header row completely */
      .responsive-table tr:first-child {
        display: none;
      }

      /* Style the data row like a card block */
      .responsive-table tr {
       
        
        border-radius: 4px;
        padding: 8px 0;
        background: #ffffff;
      }

      /* Style data cells to align content to the right */
      .responsive-table td {
        text-align: left; padding-top: 25px;
        
        position: relative;
       
      }

      /* Remove border on the last cell of the mobile card */
      .responsive-table td:last-child {
        border-bottom: 0;
      }

      
      .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 25px; top: 0;
        width: 100%;
        
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #313a46;
      }
    }




@media (max-width: 1023px) {
.tabNavDropMenu{ width: 100%; height: auto; float: left; display: block; border: 1px solid #ccc;  position: relative; margin: 20px 0;}
.tabNavDropMenu strong{width: 100%; height: 50px; float: left; display: block; font-size: 22px;  font-weight: 400; color:#3d3c3c; line-height: 50px; font-style: normal; padding-left: 20px; background:  url(../images/arrow555.png ) no-repeat 95% 20px; }
.tabNavDropMenu ul{ position: absolute; left: 0; right: 0; top: 50px; border: 1px solid #ccc; border-top: 1px solid transparent; font-size:18px;  font-weight: 400; color:#3d3c3c; line-height: 32px; background: #FFFFFF; z-index: 999;}
.tabNavDropMenu ul li{ width: 100%; height: auto; float: left; display: block;font-size: 18px;  font-weight: 400; color:#237da7; line-height: 32px; font-style: normal; border-bottom:  1px solid #e6e0e0; padding: 10px 20px; box-sizing: border-box;}
.tabNavDropMenu ul li:last-child{border-bottom:  0px solid #ccc; }
.text30{width: 100%; height: auto; float: left; font-family: 'ITC Avant GardeStd Bold'; display: block; font-size: 30px; font-weight: 400; color: #5f5f5f; line-height: 30px; padding: 30px 0; text-align: center;}
.text30{ display: none;}
}

@media (max-width: 550px) {
	.iiswbm-events-calendar-tab { margin-left: 0px; margin-right: 0px;}
	 .left50per{  width: 100%; padding: 0 0px;}
	     .responsive-table td { border-right: 0px solid #f1f3fa;}
}