/*------------------------------------------------------------------
tabs.css
Last edited: 1/12/21
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/

.band-tabs ul.tabs {
	border-bottom: 1px solid var(--theme-color-sky);
	display: none;
	justify-content: center;
	list-style-type: none;
	margin: 0 0 15px;
}
.band-tabs ul.tabs li {
	width: auto;
}
.band-tabs ul.tabs li .tab {
	align-items: center;
	background: var(--theme-color-sky);
	border: 1px solid transparent;
	border-bottom: 1px solid var(--theme-color-sky);
	bottom: -1px;
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0 4px;
	padding: 10px 20px;
	position: relative;
	text-align: center;
}
.band-tabs ul.tabs li .tab.selected, 
.band-tabs ul.tabs li .tab:hover {
	background: var(--theme-color-light);
	border: 1px solid var(--theme-color-sky);
	border-bottom: 1px solid transparent;
}
.band-tabs ul.tabs li .tab.selected {
	cursor: auto;
}
.band-tabs .content-tab {
	display: block;
	margin: 0 0 30px;
}
.band-tabs .content-title {
	display: block;
	font-size: 16px;
	margin-bottom: 5px;
	text-transform: uppercase;	
}

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
.band-tabs ul.tabs {
    display: flex;
}	
.band-tabs .content-tab {
    display: none;
    margin: 0;
}
.band-tabs .content-tab.selected {
    display: block;
}
.band-tabs .band-tabs .content-title {
        display: none;
}	
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {

}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
.band-tabs ul.tabs li .tab {
    padding: 15px 30px;
}	
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
   
}