.scale {
     scale: 1;
 }
 
 .round {
     border-radius: 50%;
 }
 
 .rounded {
     clip-path: inset(0px round 1vmin 1vmin 1vmin 1vmin);
 }
 
 .roundedsmall {
     clip-path: inset(0px round 0.5vmin 0.5vmin 0.5vmin 0.5vmin);
 }
 
 .galias1 {
     background-color: #ffcc00;
     border-color: #025b64;
 }
 
 .floral1 {
     background-color: #E8E5E1;
 }
 
 .floraltext1 {
     color: #D1B4B8;
 }
 
 .floraltext2 {
     color: #B5A592;
 }
 
 .floraltext3 {
     color: #25281C;
 }
 
 .apiros5textinv {
     color: white;
     background-color: #FAB536;
 }
 
 .apiros1 {
     background-color: #01436b;
 }
 
 .apiros2 {
     background-color: #0066A4;
 }
 
 .apiros3 {
     background-color: #228dcf;
 }
 
 .apiros4 {
     background-color: #2e95d4;
 }
 
 .apiros5 {
     background-color: #67bcf1;
 }
 
 .galias300 {
     font-family: galias;
 }
 /* --Fuentes */
 
 @font-face {
     font-family: galias300;
     src: url('galias.woff2');
 }
 
 @font-face {
     font-family: montheavy;
     src: url('montheavy.otf');
 }
 
 @font-face {
     font-family: montlight;
     src: url('montlight.otf');
 }
 
 .montlight {
     font-family: montlight;
 }
 
 .montheavy {
     font-family: montheavy;
 }
 
 .teal {
     background-color: #025b64;
 }
 
 .lightteal {
     background-color: #518c92;
 }
 
 .green {
     background-color: #30774a;
 }
 
 .lightgreen {
     background-color: #4c8360;
 }
 
 .blue {
     background-color: #3276b6;
 }
 
 .lightblue {
     background-color: #499ac2;
 }
 
 .lightgrey {
     background-color: #dadada;
 }
 
 .grey {
     background-color: #8a8a8a;
 }
 
 .darkgrey {
     background-color: #dadada;
 }
 
 .yellow {
     background-color: #febc12;
 }
 
 .lightyellow {
     background-color: #ffd66f;
 }
 
 .white {
     background-color: #FFFFFF;
 }
 
 .black {
     background-color: black;
 }
 
 .transparent {
     background-color: #ffffff00;
 }
 
 .translucent {
     background-color: #ffffff81;
 }
 
 .verytranslucent {
     background-color: #ffffff3b;
 }
 
 .active-yellow {
     background-color: #dfbb61;
 }
 
 .active-green {
     background-color: #a3d454;
 }
 
 .active-blue {
     background-color: #5b8eb8;
 }
 
 .active-red {
     background-color: #c25f5f;
 }
 
 .active-grey {
     background-color: #b4b4b4;
 }
 
 .helvetica {
     font-family: Arial;
 }
 
 .small {
     font-size: 1.2vmin;
 }
 
 .medium {
     font-size: 1.4vmin;
 }
 
 .large {
     font-size: larger;
 }
 
 .larger3 {
     font-size: 3vmin;
 }
 
 .larger4 {
     font-size: 4vmin;
 }
 
 .larger5 {
     font-size: 5vmin;
 }
 
 .title {
     padding-left: 1.5vmin;
     padding-right: 1.5vmin;
     padding-top: 1.5vmin;
 }
 
 .subtitle {
     padding-left: 1.5vmin;
     padding-right: 1vmin;
     padding-top: 1vmin;
 }
 
 .text {
     padding-top: 1vmin;
     padding-left: 1.5vmin;
     padding-right: 1.5vmin;
     padding-bottom: 1.5vmin;
     text-align: justify;
     line-height: 1.4;
 }
 
 .light {
     font-weight: lighter;
 }
 
 .bold {
     font-weight: bold;
 }
 
 .blackfont {
     color: #333;
 }
 
 .whitefont {
     color: white;
 }
 
 .lightgreyfont {
     color: rgb(190, 190, 190);
 }
 
 .nonselectable {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -webkit-touch-callout: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
 
 .centercontent {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .centertext {
     text-align: center;
     padding: 1vmin;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .collapsed {
     transform-origin: top left;
     transform: scaleY(0%);
 }
 
 .hidden {
     display: none;
 }
 
 .flex {
     display: flex;
 }
 
 .none {
     display: none;
 }
 
 .table {
     display: table;
 }
 
 .rotator {
     animation: rota 12s linear infinite;
 }
 
 @keyframes rota {
     0% {
         transform: rotateY(0deg);
     }
     100% {
         transform: rotateY(360deg);
     }
 }
 
 .loader {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 180px;
     height: 180px;
     margin: -90px 0 0 -90px;
     border: 16px solid #f3f3f3;
     border-radius: 50%;
     border-top: 16px solid #30774a;
     width: 150px;
     height: 150px;
     animation: spin 4s linear infinite;
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 .a-loader-title {
     color: #FFFFFF;
 }
 
 .center {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .jumper {
     animation-name: jumper-animation;
     animation-duration: 2s;
     animation-timing-function: ease;
     animation-iteration-count: infinite;
     animation-direction: normal;
 }
 
 @keyframes jumper-animation {
     0% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
     20% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
     40% {
         -webkit-transform: translateY(-20px);
         transform: translateY(-20px);
     }
     50% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
     60% {
         -webkit-transform: translateY(-10px);
         transform: translateY(-10px);
     }
     80% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }
 }
 
 .body {
     margin: 0%;
     overflow-y: hidden;
     overflow-x: hidden;
 }
 
 .body2 {
     margin: 0%;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 
 .overflow {}
 
 .cabezal {
     width: 100%;
     height: 2.5vmin;
     margin: 0;
     padding: 0;
     border: 0;
 }
 
 .banner {
     width: 100%;
     height: 15vmin;
     margin: 0;
     padding: 0;
     border: 0;
     display: block;
 }
 
 .bannerbig {
     width: 100%;
     height: 200px;
     margin: 0;
     padding: 0;
     border: 0;
     display: flex;
     box-shadow: inset 0 0 70px #555;
     justify-content: flex-end;
 }
 
 .logo0 {
     float: left;
     height: 100%;
     border: 2vmin;
 }
 
 .logocontainer {
     background-color: white;
     height: 200px;
     width: 200px;
     display: flex;
 }
 
 .logocontainer2 {
     height: 200px;
     width: 200px;
     display: flex;
 }
 
 .contactocontainer {
     width: 100%;
     display: flex;
 }
 
 .contenido-container {
     width: 100%;
     display: flex;
     background-color: #025b64;
 }
 
 .contenido-table {
     width: 100%;
     padding: 22px;
 }
 
 .contenido-table td {
     width: 50%;
 }
 
 .contenido-video-container {}
 
 .copycontainer {
     display: flex;
 }
 
 .contactocontainer td {
     text-align: center;
     padding: 20px;
 }
 
 .slider {
     width: 100%;
     max-width: 800px;
     height: 350px;
     position: relative;
     overflow: hidden;
     /* <===  */
     border-radius: 15px;
 }
 
 .slide {
     width: 100%;
     max-width: 800px;
     height: 350px;
     position: absolute;
     transition: all 0.5s;
 }
 
 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .btn {
     position: absolute;
     width: 40px;
     height: 40px;
     padding: 10px;
     border: none;
     border-radius: 50%;
     z-index: 10;
     cursor: pointer;
     background-color: #fff;
     font-size: 18px;
 }
 
 .btn:active {
     transform: scale(1.1);
 }
 
 .btn-prev {
     top: 45%;
     left: 2%;
 }
 
 .btn-next {
     top: 45%;
     right: 2%;
 }
 
 .logo1 {
     float: left;
     height: 100%;
     border: 2vmin;
     max-height: 12vmin;
     z-index: 55;
 }
 
 .logo2 {
     float: right;
     height: 100%;
     max-height: 12vmin;
     border: 2vmin;
     z-index: 55;
 }
 
 .bannerimg {
     position: absolute;
     right: 0px;
     width: 100%;
     height: 30vmin;
     max-height: 15vmin;
     z-index: -33;
     overflow: hidden;
     object-fit: cover;
 }
 
 .contacto-table {
     width: 100%;
     padding: 22px;
 }
 
 .contacto-table tr {
     width: 50%;
 }
 
 .contacto-table-image {
     box-shadow: inset 0 0 70px #555;
     width: 100%;
 }
 
 .contacto-table-form {
     text-align: left;
 }
 /* Style inputs with type="text", select elements and textareas */
 
 input[type=text],
 select,
 textarea {
     width: 100%;
     /* Full width */
     padding: 8px;
     /* Some padding */
     border: 1px solid #ccc;
     /* Gray border */
     border-radius: 4px;
     /* Rounded borders */
     box-sizing: border-box;
     /* Make sure that padding and width stays in place */
     margin-top: 6px;
     /* Add a top margin */
     margin-bottom: 16px;
     /* Bottom margin */
     resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
 }
 /* Style the submit button with a specific background color etc */
 
 input[type=submit] {
     background-color: #5ca4d1;
     font-family: sans-serif;
     color: white;
     padding: 12px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }
 /* When moving the mouse over the submit button, add a darker green color */
 
 input[type=submit]:hover {
     background-color: #45a049;
 }
 /* Add a background color and some padding around the form */
 
 .container {
     border-radius: 5px;
     padding: 20px;
 }
 
 .menu {
     width: 100%;
     height: 4vmin;
     font-family: sans-serif;
     min-height: 40px;
 }
 
 .menu-selected {
     background-color: #468ab4;
 }
 
 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     display: block;
 }
 
 li {
     float: left;
     display: block;
 }
 
 li a,
 .dropbtn {
     display: inline-block;
     color: white;
     text-align: center;
     padding: 1vmin;
     text-decoration: none;
 }
 
 li a:hover,
 .dropdown:hover .dropbtn {
     background-color: #6397b8;
 }
 
 li.dropdown {
     display: inline-block;
 }
 
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
 }
 
 .dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
 }
 
 .dropdown-content a:hover {
     background-color: #f1f1f1;
 }
 
 .dropdown:hover .dropdown-content {
     display: block;
 }
 
 .contenido {
     display: block;
     margin: 0;
     padding: 0;
     border: 0;
     padding: 5%;
     flex-wrap: wrap;
     overflow-y: auto;
     height: calc(100vh - 42vmin);
 }
 
 .descripcion {
     width: 90%;
     padding: 2vmin;
 }
 
 .descripcionimage {
     height: 30vmin;
     width: 60vmin;
     object-fit: cover;
     vertical-align: middle;
     display: table-cell;
 }
 
 .descriptiontext {
     font-family: sans-serif;
     padding: 3vmin;
     vertical-align: middle;
     text-align: left;
     display: table-cell;
 }
 /* Galeria*/
 
 .galeria-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 22px;
 }
 
 .galeria-thumb {
     height: 30vmin;
     width: 30vmin;
     position: relative;
 }
 
 .galeria-thumb-thumb {
     display: block;
     height: 100%;
     width: 100%;
     object-fit: cover;
 }
 
 .galeria-thumb-overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: #777;
 }
 
 .galeria-thumb:hover .galeria-thumb-overlay {
     opacity: 0.8;
 }
 
 .galeria-thumb-text {
     color: white;
     font-size: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
     font-family: sans-serif;
 }
 
 .galeria-overlay {
     position: fixed;
     display: none;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #222222cc;
     z-index: 2;
     cursor: pointer;
 }
 
 .galeria-image {
     z-index: 3;
     width: 100%;
     height: 60vmin;
     display: flex;
     justify-content: center;
     border: 0;
     padding: 0%;
 }
 
 .galeria-image-image {
     height: 100%;
     object-fit: fill;
 }
 /* Aptos */
 
 .aptos-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 22px;
 }
 
 .aptos-thumb {
     height: 30vmin;
     width: 60vmin;
     position: relative;
     flex-direction: row;
     display: flex;
 }
 
 .aptos-thumb-thumb {
     display: flex;
     height: 100%;
     width: 100%;
     object-fit: contain;
 }
 
 .aptos-thumb-desc {
     display: flex;
     flex-direction: column;
     width: 50%;
     padding: 1vmin;
 }
 
 .aptos-thumb-desc-title {
     font-family: sans-serif;
     color: #1c7dbd;
     text-align: left;
 }
 
 .aptos-thumb-desc-text {
     color: #333;
     text-align: left;
     line-height: 2.5vmin;
     font-family: Arial, Helvetica, sans-serif;
 }
 
 .aptos-thumb-overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: #777;
 }
 
 .aptos-thumb:hover .aptos-thumb-overlay {
     opacity: 0.8;
 }
 
 .aptos-thumb-text {
     color: white;
     font-size: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     text-align: center;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 /* Implantacion */
 
 .implantacion-plano {
     width: 400px;
     height: auto;
 }
 
 .img-magnifier-container {
     position: relative;
 }
 
 .img-magnifier-glass {
     position: absolute;
     border: 3px solid #000;
     border-radius: 50%;
     cursor: none;
     /*Set the size of the magnifier glass:*/
     width: 20vmin;
     height: 20vmin;
 }
 /* a-frame */
 
 .aframebox {
     position: relative;
     top: 0;
     left: 0;
     width: 100%;
     height: 75vmin;
 }
 /*  pie
  */
 
 .pie {
     width: 100%;
     height: 8vmin;
     min-height: 70px;
     position: fixed;
     bottom: 0;
     font-family: sans-serif;
     font-size: medium;
 }
 
 .backbutton {
     cursor: pointer;
     position: fixed;
     left: 0%;
     width: 3vmin;
     padding: 3vmin;
     border-radius: 0 1vmin 1vmin 0;
     user-select: none;
     transition-duration: 0.5s;
 }
 
 .nextbutton {
     cursor: pointer;
     position: fixed;
     right: 0%;
     padding: 3vmin;
     border-radius: 1vmin 0 0 1vmin;
     user-select: none;
     transition-duration: 0.5s;
 }
 
 .magnifier:hover,
 .nextbutton:hover,
 .backbutton:hover {
     background-color: #333;
 }
 
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 40%;
     width: auto;
     padding: 1vmin;
     margin-top: -50px;
     color: white;
     font-weight: bold;
     font-size: 20px;
     border-radius: 0 3px 3px 0;
     user-select: none;
     -webkit-user-select: none;
 }
 
 .homemenu {
     position: absolute;
     bottom: 1vmin;
     left: 1vmin;
     width: 30vmin;
     z-index: 4;
     transition-duration: 0.2s;
 }
 
 .homemenu.gallery {
     width: 98vw;
 }
 
 .homemenu.wide {
     width: 60vmin;
 }
 
 .homebar {
     position: relative;
     display: block;
     left: 0;
     top: 0;
     height: 6vmin;
     z-index: 2;
 }
 
 .sidebarpadding {
     position: relative;
     height: 3vmin;
     width: 100%;
     display: flex;
     align-content: center;
 }
 
 .sidebar {
     transform: translateY(-1vmin);
     position: absolute;
     bottom: 3vmin;
     width: 100%;
     transform: scaleY(0);
     transform-origin: bottom left;
     display: block;
     overflow: auto;
     transition: 0.2s;
     clip-path: inset(0px round 1vmin 1vmin 0 0);
 }
 
 .sidebar a {
     display: flex;
     padding-left: 3vmin;
     padding-top: 1.6vmin;
     padding-bottom: 1.6vmin;
     text-decoration: none;
     cursor: pointer;
 }
 
 .sidebarbutton {
     display: flex;
     padding-left: 3vmin;
     padding-top: 1.6vmin;
     padding-bottom: 1.6vmin;
     text-decoration: none;
     cursor: pointer;
 }
 
 .sidebarbutton:hover:not(.active) {
     background-color: #333;
     color: #ffffff;
 }
 
 .innerbutton1 {
     float: left;
     min-width: 18vmin;
     padding-top: 0.5vmin;
     padding-bottom: 0.5vmin;
     padding-left: 0.5vmin;
     padding-right: 1vmin;
     margin-left: 1.5vmin;
     margin-right: 1.5vmin;
     margin-bottom: 1vmin;
     justify-content: left;
     align-items: center;
     cursor: pointer;
     clip-path: inset(0px round 1vmin 1vmin 1vmin 1vmin);
 }
 
 .innerbutton2 {
     padding-bottom: 0.5vmin;
     display: flex;
     float: left;
     min-width: 32vmin;
     justify-content: left;
     align-items: center;
     cursor: pointer;
     clip-path: inset(0px round 1vmin 1vmin 1vmin 1vmin);
 }
 
 .innerbutton1:hover:not(.active) {
     background-color: #333;
     color: #ffffff;
 }
 
 .innercontainer {
     position: relative;
     width: calc(100% - 4.5vmin);
     padding-top: 0.5vmin;
     padding-bottom: 0.5vmin;
     padding-left: 0.5vmin;
     padding-right: 1vmin;
     margin-left: 1.5vmin;
     margin-bottom: 1vmin;
     clip-path: inset(0px round 1vmin 1vmin 1vmin 1vmin);
 }
 
 .buttonimage {
     position: relative;
     left: 0;
     top: 0;
     height: 4vmin;
     margin-right: 1vmin;
 }
 
 .hidden {
     display: none;
 }
 
 .sidebarbutton {
     display: block;
 }
 
 .numberoperator {
     display: flex;
     float: right;
     justify-content: center;
     vertical-align: middle;
     line-height: 4vmin;
     height: 100%;
     width: 4vmin;
 }
 
 .numberwindow {
     display: flex;
     float: right;
     justify-content: center;
     vertical-align: middle;
     line-height: 4vmin;
     height: 100%;
     width: 6vmin;
     overflow: hidden;
 }
 
 .numberexplorer {
     z-index: 99;
     top: 0;
     transform: scaleY(1);
     transform-origin: top left;
     position: absolute;
     overflow: hidden;
 }
 
 .number {
     width: 100%;
     height: 4vmin;
 }
 
 .toggle {
     display: flex;
     float: right;
     right: 6vmin;
     line-height: 4vmin;
     height: 4vmin;
     width: 8vmin;
     transition-duration: 0.2s;
 }
 
 .togglelever {
     display: flex;
     float: right;
     line-height: 4vmin;
     height: 4vmin;
     width: 4vmin;
     transition-duration: 0.2s;
 }
 
 .toggle.active-yellow {
     background-color: #dfbb61;
 }
 
 .toggle.active-green {
     background-color: #a3d454;
 }
 
 .toggle.active-blue {
     background-color: #5b8eb8;
 }
 
 .toggle.active-red {
     background-color: #c25f5f;
 }
 
 .toggle.active-grey {
     background-color: #b4b4b4;
 }
 
 .togglelever.active {
     transform: translateX(100%);
 }
 
 .numberwindow:hover {}
 
 .numberoperator:hover {
     background-color: #333;
     color: #ffffff;
 }
 
 .sidebar a:hover:not(.active) {
     background-color: #333;
     color: #ffffff;
 }
 
 .sidebardropdown {
     padding-left: 2vmin;
     display: block;
     max-height: 0px;
     transform: scaleY(0);
 }
 
 .dropdownicon {
     position: absolute;
     ;
     display: flex;
     align-content: center;
     right: 1vmin;
     width: 2vmin;
     height: 2vmin;
     z-index: 5;
     transform: translateY(-1vmin);
 }
 
 .homecorner {
     position: absolute;
     position: absolute;
     display: flex;
     justify-content: left;
     align-items: center;
     top: 0;
     left: 0;
     height: 100%;
     width: 6vmin;
 }
 
 .hometitle {
     position: absolute;
     display: flex;
     justify-content: left;
     align-items: center;
     top: 0;
     left: 3vmin;
     height: 100%;
     width: calc(100% - 6vmin);
     transform: scaleX(0);
     transform-origin: top left;
     transition: 0.2s;
 }
 
 .homebtn {
     position: absolute;
     left: 0%;
     height: 100%;
     width: 6vmin;
     cursor: pointer;
     margin: auto;
     z-index: 2;
     transition: 0.2s;
 }
 
 .homebtn2 {
     width: 50%;
     height: 50%;
     z-index: 3;
 }
 
 .bar1,
 .bar2,
 .bar3 {
     width: 100%;
     height: 20%;
     margin: 10% 0;
     transition: 0.2s;
 }
 
 .bar4 {
     background-color: darkgrey;
     width: 50%;
     height: 15%;
     margin: 10% 0;
     transform: rotate(45deg) translate(65%, 110%);
     transition: 0.2s;
 }
 
 .bar5 {
     background-color: darkgrey;
     width: 50%;
     height: 15%;
     margin: 10% 0;
     transform: rotate(-45deg) translate(-65%, 110%);
     transition: 0.2s;
 }
 
 .expand .hometitle {
     transform: scaleX(1);
 }
 
 .expand .sidebar {
     transition-delay: 0.1s;
     transform: scaleY(1);
 }
 
 .deploy .innercontainer {
     transform-origin: top left;
     animation-name: dropdown-animation;
     animation-duration: 5s;
     animation-timing-function: ease;
     animation-direction: normal;
 }
 
 @keyframes dropdown-animation {
     0% {
         transform: scaleY(0);
     }
     100% {
         transform: scaleY(5);
     }
 }
 
 .deploy .sidebardropdown {
     display: block;
     max-height: none;
     transform: scaleY(1);
 }
 
 .deploy .bar4 {
     transform: rotate(45deg) translate(80%, 30%);
 }
 
 .deploy .bar5 {
     transform: rotate(-45deg) translate(-80%, 30%);
 }
 
 .expand .homebtn {
     left: calc(100% - 6vmin);
 }
 
 .changeto_display .bar1 {
     transform: rotate(0) scaleX(1) translate(0);
     opacity: 1;
 }
 
 .changeto_display .bar2 {
     transform: rotate(0) translate(0);
     opacity: 1;
 }
 
 .changeto_display .bar3 {
     transform: rotate(0) translate(0);
     opacity: 1;
 }
 
 .changeto_close .bar1 {
     transform: rotate(-45deg) translate(-25%, 100%);
 }
 
 .changeto_close .bar2 {
     transform: scaleX(0);
     opacity: 0;
 }
 
 .changeto_close .bar3 {
     transform: rotate(45deg) translate(-20%, -100%);
 }
 
 .changeto_back .bar1 {
     transform: rotate(-45deg) scaleX(0.5) translate(-75%, -50%);
 }
 
 .changeto_back .bar2 {
     transform: scaleX(1);
     opacity: 1;
 }
 
 .changeto_back .bar3 {
     transform: rotate(45deg) scaleX(0.5) translate(-75%, 50%);
 }
 
 @media screen and (orientation:portrait) {
     .body {}
     .sidebar {
         max-height: 30vh;
         display: table;
     }
 }
 
 @media screen and (orientation:landscape) {
     .body {}
     .sidebar {
         max-height: calc(95vmin);
     }
 }
 
 @media all and (max-width:1024px) {
     .toggle {
         width: 14vmin;
     }
     .togglelever {
         width: 7vmin;
     }
     .small {
         font-size: 2.4vmin;
     }
     .medium {
         font-size: 2.6vmin;
     }
     .large {
         font-size: 3.2vmin;
     }
     .homemenu {
         width: 44vmin;
     }
     .homebar {
         height: 8vmin;
     }
     .homecorner {
         width: 8vmin;
     }
     .hometitle {
         left: 4vmin;
         width: calc(100% - 6vmin);
     }
     .sidebar {
         bottom: 4vmin;
         clip-path: inset(0px round 2vmin 2vmin 0 0);
     }
     .sidebarbutton {
         padding-top: 2vmin;
         padding-bottom: 2vmin;
     }
     .sidebarpadding {
         height: 4vmin;
     }
     .homebtn {
         width: 8vmin;
     }
     .expand .homebtn {
         left: calc(100% - 6vmin);
     }
     .buttonimage {
         height: 6vmin;
     }
 }
 
 @media screen and (max-width:480px) {
     .small {
         font-size: 2.8vmin;
     }
     .medium {
         font-size: 3vmin;
     }
     .large {
         font-size: 3.6vmin;
     }
     .homemenu {
         width: calc(100% - 2vmin);
     }
     .homebar {
         height: 10vmin;
     }
     .homecorner {
         width: 10vmin;
     }
     .hometitle {
         left: 4vmin;
         width: calc(100% - 8vmin);
     }
     .sidebarpadding {
         height: 6vmin;
     }
     .homebtn {
         width: 10vmin;
     }
     .innerbutton1 {
         float: left;
         min-width: 18vmin;
         padding-top: 0.5vmin;
         padding-bottom: 0.5vmin;
         padding-left: 0.5vmin;
         padding-right: 1vmin;
         margin-left: 1.5vmin;
         margin-right: 1.5vmin;
         margin-bottom: 1vmin;
     }
     .innerbutton2 {
         padding-bottom: 0.5vmin;
         display: flex;
         float: left;
         min-width: 32vmin;
         justify-content: left;
         align-items: center;
         cursor: pointer;
         clip-path: inset(0px round 1vmin 1vmin 1vmin 1vmin);
     }
     .buttonimage {
         height: 8vmin;
     }
 }