/******************** CSS Vertical Tabs *******************
 ******************* Author: Asif Mughal ******************/
	
.tabs-container{
   position: relative;
   width: 300px;
   height: 100vh;
   float: left;
   z-index: 20;

}
/* tabs names */
.tabs-container label{
   position: relative;
   padding: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: block;
   font-size: 13px;
   color: #fff;
   cursor: pointer;
   user-select: none;
	background:#333333;
	 -moz-border-radius: 10px 0px 0px 0px;
   -webkit-border-radius: 10px 0px 0px 0px;
}

/* Hover effect on tabs names */
.tabs-container label:hover{
  background: #1B4B04;

}
/* Content area for tabs */
.tab-content{
   position: relative;
   background: #fff;
   width: calc(100% - 300px);
   min-height: 100vh;
   padding: 20px;
	padding-left: 25px;
   float: left;
   box-sizing: border-box;
   z-index: 19;
   display: none;
    -moz-border-radius: 0px 10px 10px 10px;
   -webkit-border-radius: 0px 10px 10px 10px;
	
}

.tab-content:after{
   content: "";
   clear: both;

}


@media only screen and (max-width:480px) { 
.tabs-container{
   position: relative;
   width: 100px;
   height: 100vh;
   float: left;
   z-index: 20;

}
/* tabs names */
.tabs-container label{
   position: relative;
   padding: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: block;
   font-size: 13px;
   color: #fff;
   cursor: pointer;
   user-select: none;
	background:#333333;
	 -moz-border-radius: 10px 0px 0px 0px;
   -webkit-border-radius: 10px 0px 0px 0px;
}

/* Hover effect on tabs names */
.tabs-container label:hover{
  background: #1B4B04;

}
/* Content area for tabs */
.tab-content{
   position: relative;
   background: #fff;
   width: calc(100% - 100px);
   min-height: 100vh;
   padding: 20px;
	padding-left: 10px;
   float: left;
   box-sizing: border-box;
   z-index: 19;
   display: none;
    -moz-border-radius: 0px 10px 10px 10px;
   -webkit-border-radius: 0px 10px 10px 10px;
	
}

.tab-content:after{
   content: "";
   clear: both;

}
}


 /* Hide input radio from users */
input[name="tab"]{
  display: none;
}
 /* Show tab when input checked */
input[name="tab"]:checked + .tab-content{
    display: block;
  animation: slide 0.5s forwards;

}

/* Slide animation for tab contents */
@keyframes slide{
    from{
        left: -100%;
        opacity: 0;
    }
    to{
        left: 0;
        opacity: 1;
    }

}