/*
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
*/

.tabbed-content { max-width: 360px; padding: 0; display: none; margin: 1em auto; }
.tabs ul { margin: 0;  text-align:center }
/*.item { margin-bottom: 2px; }
.item::before { cursor: pointer; font-weight: bold; background: #eee; padding: .5em; display: block; }
.item.active::before { background: #444; 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: 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 .item { min-height: 0; }
.tabbed-content .item::before { display: none; }
.tabbed-content.tabs-side .tabs { width: 150px; float: left; }
.tabbed-content.tabs-side .tabs li { display: block; }
.tabbed-content.tabs-side .item { margin-left: 150px; }
}

/*Smartphone css*/
@media screen and (max-width: 480px) {
.tabbed-content { display: block;}
}

@media screen and (min-width:481px) and (max-width:600px) {
.tabbed-content { display: block;}
}

@media screen and (min-width:601px) and (max-width:767px) {
.tabbed-content { display: block;}
}

@media screen and (min-width:768px) and (max-width:900px) {

}

@media screen and (min-width:901px) and (max-width:1024px) {

}

@media screen and (min-width:1025px) and (max-width:1240px) {

}