/*
SCSS variables and mixins
*/
/*
Some styles to make this demo look pretty (or at least decent)
If you want to style everything yourself, you shouldn't need these
*/


.tabs-side {
  background: #fff;
  min-height:470px;
  max-width: 100%;
	text-align:center;
	border-top: 5px solid #18ba60;
	padding:0px 30px;
}

.tabs ul {
  margin: 0;
  padding: 0 0 1em 0;
  font-weight: bold;
}
.tabs ul li {
    height: 70px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    background: linear-gradient(-80deg, #333, #191919);
		transition:all 0.5s ease;
}
.tabs ul li a {
  line-height:70px;
	text-align:center;
	color:#fff;
	
}
.tabs ul li a:hover, .tabs ul li a.active {
  background: #18ba60;
color: #eee;
box-shadow: 5px -5px 5px 0px #11a151 inset;  
}

.item {
  margin-bottom: 2px;
}
.item::before {
  cursor: pointer;
  font-weight: bold;
  background: linear-gradient(-80deg, #333, #191919);
  padding: .5em;
  display: block;
	color: #fff;
}
.item.active::before {
  background: #18ba60;
  color: #eee;
}
.item.active .item-content {
  padding: 1em;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

@media all and (min-width: 800px) {
  .item.active .item-content {
    padding-top: 0;
  }

  .tabs-side .tabs li {
    margin-bottom: 2px;
  }
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
  display: none;
}
.tabbed-content .item {
  min-height: 2em;
}
.tabbed-content .item::before {
  content: attr(data-title);
}
.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
}
.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media all and (min-width: 800px) {
  .tabbed-content .tabs {
    display: block;
  }
  .tabbed-content .tabs li {
    display: inline-block;
  }
  .tabbed-content .tab-nav .tabs li a {
    display: block;
		height: 100%;
		width: 100%;
		line-height: 70px;
		padding: 0px 10px;
		font-size: 18px;
		color:#fff;
  }
  .tabbed-content .item {
    min-height: 0;
  }
  .tabbed-content .item::before {
    display: none;
  }
  .tabbed-content.tabs-side .tabs {
    width: 260px;
    float: left;
  }
  .tabbed-content.tabs-side .tabs li {
    display: block;
  }
  .tabbed-content.tabs-side .item {
    margin-left: 360px;
  }
}