@import "general.css"; :root { --side-bar-width: 10vw; } .leftbar { height: 100vh; width: var(--side-bar-width); position: fixed; z-index: -1; top: 0; left: 0; background-image: linear-gradient( var(--side-bg-color), var(--side-bg-color-two) ); /**/ background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: var(--side-bg-color); overflow-x: hidden; } .rightbar { height: 100vh;  width: var(--side-bar-width);  position: fixed; z-index: -1; top: 0; right: 0; background-image: linear-gradient(var(--side-bg-color), var(--side-bg-color-two) ); /**/ background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: var(--side-bg-color); overflow-x: hidden; } .main { margin-left: var(--side-bar-width); margin-right: var(--side-bar-width);} .row_equal{ display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; } .row_opposite{ display: flex; flex-flow: row-reverse wrap-reverse; justify-content: space-around; align-items: center; } /*General settings multi column lay-out*/ .col-t-1 {flex: 8.33%;} .col-t-2 {flex: 16.66%;} .col-t-3 {flex: 25%;} .col-t-4 {flex: 33%;} .col-t-5 {flex: 41.66%;} .col-t-6 {flex: 50%;} .col-t-7 {flex: 58.33%;} .col-t-8 {flex: 66.66%;} .col-t-9 {flex: 75%;} .col-t-10 {flex: 83.33%;} .col-t-11 {flex: 91.66%;} .col-t-12 {flex: 100%;}  ul.nav{ display: none; } .fixed { position: sticky; position: -webkit-sticky; /* Safari */ top: 0; z-index:3; } .navTbl{ height: 15vh; min-height: 40px; max-height: 100px;} .navbar_img{ float:left; height:100%; width:auto; filter: hue-rotate(5deg); } .navBar { position: absolute; right:0; min-width: 160px;} .navBar a { display: none; padding: 12px 16px; text-decoration: none; text-align: center; background-color: var(--navbar-bg-color); color: var(--navbar-tx-color); } .navBar button{ float: right; display: block; border: none; outline: none; color: white; height: 100%; padding: 0px 30px; line-height:12vh; background-color: inherit; color: inherit; text-decoration: none; font-size: inherit; } .navBar.show{box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); overflow-y:auto; max-height:100vh;} .navBar.show button { display:none; } .navBar.show a{ float: none; display:block; } .footer_container{ margin: 0.5%; padding: 20px; flex: 1 1 0px; border: 1px solid black; background-color: var(--main-bg-color); border-radius: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .footer_image{ margin: 0.5%; padding: 2px; flex: 1 1 0px; background: url(../pictures/footer.jpg) center center no-repeat; background-size:cover; border: 1px solid black; border-radius: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }