/*

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) {



}