/* colors */
h6 { font-weight: normal; }

body { height: 100vh; }

body, div.webetui-layout div.text { margin: 0; padding: 0; font: medium "Roboto"; }

div.grid { height: 100vh; }

a { color: #3e6fbf; font-weight: bold; text-decoration: none; }

a:hover { color: black; }

ul.menu { margin: 0; padding: 0; list-style-type: none; }

ul.menu a { text-decoration: none; display: block; padding: 1em; }

ul.menu li ul { display: none; }

footer ul.menu a { padding: 0; }

header { display: flex; }

header h1 { font-size: 150%; margin: 0 auto; line-height: 1.6em; }

nav.horizontaal { background: rgba(68, 99, 46, 0.8); }

nav.horizontaal a { color: white; font-size: 85%; text-transform: uppercase; }

nav.horizontaal a:hover { color: orange; }

nav.horizontaal ul.menu { display: flex; width: 100%; }

nav.hamburger ul.menu { max-height: 0; overflow: hidden; transition: all 0.3s ease 0s; max-width: 200px; margin: 0 10px 0 auto; text-align: right; }

nav.hamburger ul.menu a { padding: 0 0 0 1em; font-weight: bold; line-height: 1.5em; }

nav.hamburger.selected ul.menu { max-height: 300px; padding-top: 50px; }

nav.hamburger a.nav { position: absolute; display: block; padding: 3px 30px 0 0; right: 25px; top: 25px; height: 22px; overflow: hidden; text-decoration: none; font-size: 18px; line-height: 18px; }

nav.hamburger a.nav label { display: block; cursor: pointer; line-height: 22px; overflow: hidden; position: relative; top: -3px; transition: top 0.3s ease 0s; color: black; }

nav.hamburger a.nav.selected label { top: -24px; }

nav.hamburger a.nav div.bars { display: block; position: absolute; right: 0; top: 0; width: 25px; height: 20px; }

nav.hamburger a.nav div.bars div, nav.hamburger a.nav div.bars div:before, nav.hamburger a.nav div.bars div:after { position: absolute; display: block; width: 25px; height: 3px; top: 10px; background: black; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; }

nav.hamburger a.nav div.bars div:before { content: ''; top: -8px; }

nav.hamburger a.nav div.bars div:after { content: ''; top: 8px; }

nav.hamburger a.nav:hover div.bars div, nav.hamburger a.nav:hover div.bars div:before, nav.hamburger a.nav:hover div.bars div:after { background: black; }

nav.hamburger a.nav.selected div.bars div { background-color: transparent; }

nav.hamburger a.nav.selected div.bars div:before { transform: translateY(8px) rotateZ(-45deg); -webkit-transform: translateY(8px) rotateZ(-45deg); }

nav.hamburger a.nav.selected div.bars div:after { transform: translateY(-8px) rotateZ(45deg); -webkit-transform: translateY(-8px) rotateZ(45deg); }

div.socialmedia a { display: inline-block; margin: 0 4px; color: white; background: #3e6fbf; font-size: 150%; padding-top: 0.2em; width: 1.7em; height: 1.5em; border-radius: 0.8em; text-align: center; }

div.socialmedia a:hover { background: black; }

div.webetui-layout { height: 100vh; background: white; }

div.webetui-layout div, div.webetui-layout header, div.webetui-layout main, div.webetui-layout nav, div.webetui-layout article, div.webetui-layout aside, div.webetui-layout footer, div.webetui-layout section { background: #e2eaf5; /*height:100%; */ }

div.webetui-layout div.name, div.webetui-layout div.func, div.webetui-layout header.name, div.webetui-layout header.func, div.webetui-layout main.name, div.webetui-layout main.func, div.webetui-layout nav.name, div.webetui-layout nav.func, div.webetui-layout article.name, div.webetui-layout article.func, div.webetui-layout aside.name, div.webetui-layout aside.func, div.webetui-layout footer.name, div.webetui-layout footer.func, div.webetui-layout section.name, div.webetui-layout section.func { background: none; text-align: center; font-size: small; }

div.webetui-layout div div, div.webetui-layout header div, div.webetui-layout main div, div.webetui-layout nav div, div.webetui-layout article div, div.webetui-layout aside div, div.webetui-layout footer div, div.webetui-layout section div { height: auto; }

div.webetui-layout div.selected, div.webetui-layout header.selected, div.webetui-layout main.selected, div.webetui-layout nav.selected, div.webetui-layout article.selected, div.webetui-layout aside.selected, div.webetui-layout footer.selected, div.webetui-layout section.selected { background: #3e6fbf; color: white; }

div.webetui-layout > div, div.webetui-layout > header, div.webetui-layout > main, div.webetui-layout > article, div.webetui-layout > aside, div.webetui-layout > footer, div.webetui-layout > section { background: white; }

div.webetui-layout.scheme nav { background: #4ba5f9; color: white; height: auto; }

div.webetui-layout.scheme footer, div.webetui-layout.scheme header { background: #e2eaf5; }

div.webetui-layout section { position: relative; background: #e2eaf5; }

div.webetui-layout section div.handle { position: absolute; background: rgba(80, 120, 80, 0.3); }

div.webetui-layout section div.handle.col { width: 20px; height: 100%; left: -12px; top: 0; cursor: col-resize; }

div.webetui-layout section div.handle.row { height: 20px; width: 100%; top: -12px; left: 0; cursor: row-resize; }

div.webetui-layout section.selected { background: #3e6fbf; color: white; }

div.webetui-layout section.set { background: #cbd2e2; border: 1px solid #3e6fbf; }

div.layout-items div.webetui-item article, div.layout-items div.webetui-item aside { border: 1px solid white; }

header div.photo { display: flex; align-items: center; justify-content: space-around; }

header div.photo h1 { font-size: 300%; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }