/* tabs */
* {	box-sizing: border-box;	}
.tabs {padding-left:4%;padding-right:4%;display: flex;flex-direction: row;row-wrap: nowrap;justify-content: flex-start;align-content: flex-start;align-items: flex-start;box-sizing: border-box;width:100%;}
.tabs * { box-sizing: inherit; }
.tabs :focus {box-shadow: none;outline: none;}
.tabs .button-list { /*flex: 0 1 auto;*/display: flex;align-content: stretch;}
.tabs.tabs-vertical .button-list {flex-direction: column;justify-content: flex-start;align-items: stretch;}
.tabs.tabs-horizontal .button-list {flex-direction: row;min-width: 100%;margin-bottom:2em;}
.tabs.tabs-horizontal .flex-left {align-items: left;justify-content: left;}
.tabs.tabs-horizontal .flex-center {align-items: center;justify-content: center;}
.tabs.tabs-horizontal .flex-right {align-items: right!important;justify-content: right;}

.tabs button {border-radius: 0;margin: 0;border:none;transition: all .6s ease-in-out;background:transparent;text-align:left;
    text-transform:uppercase;
		padding: .75em 1.5em;
		border-left:2px solid var(--border-color);
    color:##444444;
}
.tabs button:hover {color: #333;}
.tabs.tabs-horizontal button {border-left:0;border-top:2px solid var(--border-color);}
.tabs.tabs-horizontal button:hover {}

/*.tabs button:not(:first-of-type) {border-top-color: #aaa;}*/

.tabs button.active {color: var(--accent-color);border-color: var(--accent-color);}

.tabs section {/*flex: 2 1 auto;padding: 1rem;*/display: none;}
.tabs section.active {display: block;}
.tab-content {margin-bottom:2em;}

/*cards*/
.card {border:1px solid var(--border-color);margin:15px 0;}
.card .card-heading h3 {margin:0 0 5px;font-family:Roboto, sans-serif;font-size:17px;font-weight:300;text-transform:inherit;}
.card .card-heading-image h3 {margin:var(--card-no-img) 0;}
.card .card-body p {font-size:15px;}
.card hr {width:20%;border-bottom:3px solid var(--border-color);margin-left:auto;margin-right:auto;padding:0;}

.card.card-sm .card-heading {padding:var(--sm) var(--sm) 0 var(--sm);}
.card.card-sm .card-heading-image {padding:var(--sm);}
.card.card-sm .card-body {padding:var(--sm);}
.card.card-sm hr {/*margin-top:var(--sm);*/margin-bottom:var(--sm);}

.card.card-md .card-heading {padding:var(--md) var(--md) 0 var(--md);}
.card.card-md .card-heading-image {padding:var(--md);}
.card.card-md .card-body {padding:var(--md);}
.card.card-md hr {/*margin-top:var(--md);*/margin-bottom:var(--md);}

.card.card-lg .card-heading {padding:var(--lg) var(--lg) 0 var(--lg);}
.card.card-lg .card-heading-image {padding:var(--lg);}
.card.card-lg .card-body {padding:var(--lg);}
.card.card-lg hr {/*margin-top:var(--lg);*/margin-bottom:var(--lg);}

.card.card-none .card-body {padding:0 var(--none) var(--none) var(--none);}
.card.card-none .card-heading {padding:var(--none) var(--none) 0 var(--none);}
.card.card-none .card-heading-image {padding:var(--none);}
.card.card-none hr {/*margin-top:var(--none);*/margin-bottom:var(--none);}

.card.text-left {text-align:left;}
.card.text-center {text-align:center;}
.card.text-justify {text-align:justify;}
.card.text-right {text-align:right;}

/*mobile menu*/
.tabs-mobile-button {display:none!important;background:#efefef;padding:.5em 1em;margin:0;width:100%;font-size:14px;}
.tabs-mobile-button span {float:left;padding:3px 0;}
.tabs-mobile-button i {font-style:normal;float:right;font-size:20px;}
.toggle-el {transition: all 0.2s ease;opacity: 1;}
input[type="checkbox"].hide-input:checked + .toggle-el {height: 0;opacity: 0;padding-top: 0;padding-bottom: 0;}
input.hide-input {position: absolute;left: -999em;
}
label.toggle {display: inline-block;cursor: pointer;user-select: none;}


/*responsive*/

@media (max-width: 900px) {
  .tabs {flex-direction: column;}
  .tabs-mobile-button {display:block!important;}
	.button-list {flex-direction: row;min-width: 100%;margin-bottom:2em;padding:0;}
  .button-list button {background:#efefef;border-top:1px solid rgba(0,0,0,.05)!important;margin:0;}
  .toggle-el {padding:0!important;}
} /* / @media (max-width: 900px) */

/* optional images 
@media screen,handheld {
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.tabs img {animation: 3s fadeIn;}
.tabs img {display: block;margin: 0 auto;width: 100%;min-width: 180px;max-width: 600px;}

} /* / @media screen,handheld */