html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

button:focus {
   outline: 0 !important;
}

button:active {
   outline: none !important;
}


/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

body {
   line-height: 1;
}

ol,
ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

a {
   font-style: normal !important;
   color: unset;
   text-decoration: none !important;
}

/* Termina reset css */


/* INICIAN MENU */
.backmenu {
   background-color: #d5bff9;
   border-bottom-style: solid;
   height: 3rem;
   width: 100%;
   position: fixed;
   top: 3rem;
   z-index: 3;
}

#menu {
   visibility: visible !important;
   background-color: transparent;
   width: 5rem;
   height: 3rem;
   border-style: none !important;
   right: 0;
   position: absolute;
}


#menu:hover {
   background: #efe5fd;
}

#menu_button {
   width: 100%;
   cursor: pointer;
   margin: 0;
   font-size: 2rem;
   color: #6200ee;
}


#boton_cerrar {
   visibility: hidden;
   background-color: #efe5fd;
   width: 5rem;
   height: 3rem;
   right: 0;
   z-index: 4;
   position: absolute;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-style: none !important;
}

#cerrar {
   width: 100%;
   cursor: pointer;
   margin: 0;
   font-size: 2rem;
   color: #6200ee;
}

ul {
   display: none;
   /* visibility: hidden; */
   padding: 0px;
   margin: 0px;
   width: 100%;
   /* height: 35rem; */
   height: 100vh;
   background-color: #6200ee;
   position: absolute;
   z-index: 2;
   margin-top: 3rem;
}

#enlaces_menu li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

#enlaces_menu li:hover {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

#enlaces_menu li a {
   height: auto;
   line-height: 3.5rem;
   display: block;
   color: #fff;
   text-decoration: none;
   line-height: calc(2.28rem + 1.0625vw);
   font-size: calc(1.28rem + 1.0625vw);
   /*  font-size: 2.5rem; */
   text-align: center;
   font-family: "Glass Antiqua", cursive;
   font-weight: 500;
}

#enlaces_menu li:hover a {
   color: #efe5fd;
   padding-right: 0.5rem;
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
}

.altura {
   position: absolute;
   top: 40%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -40%);
   z-index: 1;
}


/* TERMINA MENU */

.logo {
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   position: absolute;
   left: 3%;
}

.logo img {
   width: 100%;
   height: auto;
}


/* /////// Media Queries //////////////////////////////////////////////////////////// 
    //////////////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////////////*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   .escritorio {
      visibility: hidden;
   }

   .responsive {
      width: 100%;
   }

   .clearfix:after {
      content: "";
      display: table;
      clear: both;
   }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
   .escritorio {
      visibility: hidden;
   }

   .responsive {
      width: 49.99999%;
      margin: 6px 0;
   }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .escritorio {
      visibility: hidden;
   }

  .lista a {
      display: flex;
      color: #6200ee;
      font-size: 1rem;
      display: flex;
      align-items: center;
      text-decoration: none;
      height: 3rem;

   } 

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   .escritorio {
      visibility: visible !important;
      width: 100%;
      margin: 0 auto;
      height: 3rem;
      /* position: fixed; */
      display: flex;
      justify-content: center;
      align-items: center;
      top: 2rem;
   }

   .lista {
      display: flex;
      justify-content: right;
      align-items: center;
      overflow: hidden;
      list-style: none;
      font-family: "Glass Antiqua", cursive;
   }

   .lista li {
      padding: 0 2rem !important;
      width: auto !important;
      height: 3rem;

   }


   .btn {

      display: flex;
      color: #6200ee;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      text-decoration: none;
      position: relative;
      height: 3rem;

   }

   .active,
   .btn:hover {
      color: #6200ee;
      text-decoration-style: solid !important;
      text-decoration-color: #6200ee !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 7px !important;

   }

   .btn:before {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 1px;
      bottom: 10px;
      left: 0;
      right: 0;
      background-color: #6200ee;
      transform: scaleX(0);
      transition: transform 0.3s ease;
   }

   .btn:hover:before {
      transform: scaleX(1);
   }

   #menu {
      visibility: hidden !important;
   }

   #home {
      width: 90%;
      height: 100%;
      display: grid;
      margin: 0 auto;
      grid-template-columns: 1fr 1fr;
   }

   .logo {
      width: 5rem;
      height: 5rem;
      display: flex;
      align-items: center;
      position: absolute;
      left: 50%;
   }

   .backmenu {
      top: 5rem;
   }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   .lista a {
      /* padding: 0 1.75rem !important; */
      font-size: 1.25rem !important;
   }

   #menu {
      visibility: hidden !important;
   }

}