/*  base  */
* { box-sizing: border-box; }
body { margin: 0; }
.flex-row { display: flex; flex-wrap: wrap; align-items: center; }
.flex-column { display: flex; flex-flow: column; }
.flex { flex: 1 }



/*  hamburger menu  */
.syn-hamburger > ul { list-style: none; margin: 0; }
.syn-hamburger ul { padding: 0; }
.syn-hamburger ul > li li { display: block; white-space: nowrap; }
.syn-large .syn-hamburger > button { display: none; }
.syn-large .syn-hamburger > ul > li { display: inline-block; position: relative; }
.syn-small .syn-hamburger > ul > li { display: block; }
.syn-small .syn-hamburger:not(.syn-hamburger-open) > ul { display: none; }
.syn-large .syn-hamburger > ul > li > ul { position: absolute; white-space1: pre; display: none; }
.syn-large .syn-hamburger > ul > li:hover > ul { display: block; }



/* carousel */
syn-carousel { display: block; position: relative; overflow: hidden; }
syn-carousel > * { position: absolute; opacity: 0; transition: opacity 1s; }
syn-carousel > .active { opacity: 1; }



/* tabs */
syn-tabs { display: block; }
syn-tabs > syn-tabs-header { display: block; border-bottom: solid 1px; padding:  0; }
syn-tabs > syn-tabs-header > header { display: inline-block; padding: .4em .7em; cursor: pointer; }
syn-tabs > syn-tabs-header > header.active { border-bottom: solid 3px; }
syn-tabs > syn-tab { position: absolute; transition: opacity .3s; }
syn-tabs > syn-tab:not(.active) { opacity: 0; }
/* syn-tabs > .active { display: inherit; } */
syn-tabs > syn-tab > header { display: none; }