Template:Vilnius-Lithuania/CSS/SmallIndex

body, html {

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.indexbutton {

 display: none;
 color: #FAFAFC;
 text-transform: capitalize;
 font-size: 1.4rem;
 width: 100%;
 text-align: center;
 font-weight: bold;
 padding: 16px 0;
 height: 62px;
 box-sizing: border-box;
 cursor: pointer;
 background-color: #6281EF;
 z-index: 21;
 transition: 0.5s;

} @media (max-width: 800px) {

 .indexbutton {
   display: block;
 }

}

.sideBlock {

 text-transform: uppercase;
 float: left;
 margin-left: 10vw;
 position: -webkit-sticky;
 position: sticky;
 top: 50%;
 margin: 200px 32px 0 4vw;
 transform: translateY(-50%);
 min-width: 220px;
 max-width: 350px;

} @media (max-width: 1024px) {

 .sideBlock {
   margin: 200px 32px 0 4vw;
 }

} .sideBlock b {

 font-family: "montserrat-bold";
 font-size: 1.4rem;
 font-weight: bold;
 margin-left: 0.25em;
 display: block;

} .sideBlock ul {

 margin: 1em 0;
 padding: 0;

} .sideBlock a {

 color: #121212;
 text-decoration: none;

} .sideBlock li {

 margin: 24px;
 list-style: none;
 color: #121212;
 font-size: 1.1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 margin-left: 0.25em;

} .sideBlock li:last-child {

 margin-bottom: 0;

} .sideBlock li div {

 max-width: 15px;
 max-height: 15px;
 box-sizing: border-box;
 border: 1px solid;
 color: #2E64EC;
 border-radius: 20px;
 transition: 0.5s;
 margin-right: 8px;
 height: 10vw;
 width: 10vh;

} .sideBlock li.active div {

 background-color: #2E64EC;

} @media (max-width: 800px) {

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 0 64px;
   background-color: #6281EF;
   color: #FAFAFC;
   float: unset;
   margin: 0;
   z-index: 20;
   width: 100%;
   box-sizing: border-box;
   min-width: unset;
   max-width: unset;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(calc(100% - 62px));
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .sideBlock b {
   display: block;
   margin: 0;
 }
 .sideBlock ul {
   display: inline-block;
   text-align: start;
   margin-top: 0;
   margin-bottom: 30px;
 }
 .sideBlock li {
   font-weight: bold;
 }
 .sideBlock li a {
   color: #FAFAFC;
 }
 .sideBlock li div {
   color: #FAFAFC;
 }
 .sideBlock li.active div {
   background-color: #FAFAFC;
 }
 .sideBlock.notshow {
   transform: translateY(calc(100% - 0px));
 }
 .sideBlock.open {
   transform: translateY(0);
 }

}

.sideBlock {

 color: #FAFAFC;
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: 1fr;
 justify-items: center;
 position: fixed;
 margin: 0 0 32px 32px;
 box-sizing: border-box;
 left: 0;
 bottom: 0;
 z-index: 11;
 top: unset;
 transform: unset;
 min-width: 62px;
 max-width: 62px;
 max-height: 62px;
 border-radius: 31px;
 background-color: #6281EF;
 overflow: hidden;
 transition: 0.3s;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

} .sideBlock b {

 text-align: center;
 margin: 0;

} .sideBlock ul {

 margin: 1em 0 2em;

} .sideBlock ul li div {

 color: #FAFAFC;
 border-color: #FAFAFC;

} .sideBlock ul li div.bigSection {

 border-color: transparent;
 background-color: unset;

} .sideBlock ul li.active div {

 background-color: #FAFAFC;

} .sideBlock ul li.active div.bigSection {

 background-color: unset;

} .sideBlock ul a {

 color: #FAFAFC;
 font-family: "lato-light";

} .sideBlock ul a.indexsection {

 font-family: "montserrat-bold";

} .sideBlock.open {

 padding: 32px 32px 62px;
 border-radius: 0px;
 min-width: 200px;
 max-width: 600px;
 max-height: 100vh;

} @media (max-width: 800px) {

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 0 64px;
   margin: 0;
   z-index: 20;
   width: 100%;
   box-sizing: border-box;
   min-width: unset;
   max-width: unset;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(calc(100% - 62px));
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: unset;
   max-width: unset;
   max-height: unset;
   border-radius: unset;
   box-shadow: unset;
 }
 .sideBlock.open {
   padding: 0 64px;
   min-width: unset;
   max-width: unset;
   max-height: unset;
 }

}

.indexbutton2 {

 color: #FAFAFC;
 background-color: #6281EF;
 font-family: "montserrat-bold";
 z-index: 12;
 cursor: pointer;
 position: fixed;
 left: 0;
 bottom: 0;
 margin: 0 0 32px 32px;
 display: flex;
 justify-content: center;
 align-items: center;
 text-transform: uppercase;
 font-size: 1rem;
 width: 62px;
 height: 62px;
 border-radius: 32px;

} @media (max-width: 800px) {

 .indexbutton2 {
   display: none;
 }

}

.sideBlockOverlay {

 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 pointer-events: none;
 opacity: 0;
 z-index: 11;
 background-color: rgba(0, 0, 0, 0.5);
 transition: opacity 0.5s;

} .sideBlockOverlay.open {

 opacity: 1;
 pointer-events: unset;

}