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;
}