/* Style the tab */
.tab {
  float: left;
  width: 30%;
  color: #fff;
  
}

/* Style the buttons inside the tab */
.tab button {
      display: block;
	  font-family: 'Poiret One';
    background-color: inherit;
   
    padding: 10px 10px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
	font-size: 1.3em;
    letter-spacing: 0.08em;
    margin-top: 0.5em;
}

/* Change background color of buttons on hover */
.tab button:hover {
  /*background-color: #485e7b;*/
}

/* Create an active/current "tab button" class */
.tab button.active {
  
  color:#bed4e9;
}

/* Style the tab content */
.tabcontent {
  float: left;
    padding: 0px 5%;
    /* border: 1px solid #ccc; */
    width: 70%;
    border-left: none;
    /* height: 300px;*/
}


table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
margin-bottom: 15px;

}
table, td, th{
font-family: 'Poiret One';
}
td, th{
padding: 3px;
width: 30px;
height: 25px;
}
th{
background-color: #7accee!important;
}

@media (max-width: 768px){

.tab {
    float: left;
    width: 23%;
    color: #fff;
}
.tabcontent {
  float: left;
    padding: 0px 0% 0% 12%;
    /* border: 1px solid #ccc; */
    width: 76%;
    border-left: none;
    /* height: 300px;*/
}

.tab button {
    display: block;
    font-family: 'Poiret One';
    background-color: inherit;
    padding: 5px 0px 10px 5px;
    width: 110px;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.1em;
    letter-spacing: 0.1em !important;
    margin-top: 0.1em !important;
}

}