@font-face {
    font-family: 'Bluewind Personal Use';
    src: url('Fonts/bluewindpersonaluse-9yo0n.otf');
}
@font-face {
    font-family: 'Cinzel';
    src: url('Fonts/Cinzel-Regular.ttf');
}
@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-Medium.ttf');
    font-weight: 400;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-SemiBold.ttf');
    font-weight: 600;
}
*,*:after,*::before{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body
{
    margin: 0;
    padding: 0;
    align-items: end;
}

#content .magenimg
{
    width: 210px;
    height: 210px;
    margin: auto;
    display: flex;
    background: var(--colrs);
    justify-content: center;
    align-items: center;
    padding: auto;
    border-radius: 250px;
    border: 0.001px solid rgb(211, 211, 211);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
#content .magenimg #Card
{
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden; 
    
    display: flex;
    margin: auto;
    
    border-radius: 250px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    padding: auto;
}
#content .magenimg #Card img
{
    width: 100%;
    height: auto;
    
    max-height: 1480px;
    overflow: hidden;
    border-radius: 250px;
          
}
#content #Card .Card_name
{
    width: 100%;
    position: absolute;
    display: flex;
    top: 1%;
    margin: auto;
    padding: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
#content #Card .Card_name .Ca_name
{
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}
#content .Card_name .Ca_name h1
{
    color: rgb(0, 0, 0);
    font-family: 'Bluewind Personal Use';
    font-weight: 400;
    padding: 0px;
    font-size: clamp(1rem, 1vw + 4rem, 8rem);
    /* arriba^ derecha ]  abajo_  izquierda [*/ 
    text-shadow: 7px 4px 5px #00000077;
}
#content .Card_name h3
{
    
    font-family:'Cinzel';
    font-weight: 400;
    color: rgb(0, 0, 0);
    margin: auto;
    padding: 0px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 2vw + 1rem, 3.6rem);
    text-shadow: 7px 7px 5px #00000077;
}
#content
{
    width: 100%;
    height: 100%;
    opacity: 0;
    background-image: linear-gradient(rgb(255, 255, 255), #f6eae8);
    margin-top: 50px;
}
#content h3
{
    color: var(--colrs);
    text-align: center;
     /* arriba^ derecha ]  abajo_  izquierda [*/ 
     padding: 0px 5% 5% 5%;
}

#content h1
{
    text-align: center ;
    font-family: 'Cinzel';
    font-weight: 400;
    font-size: clamp(1.125rem, 2vw + 1.125rem, 4.5rem);
    color: var(--colrs);
    /* arriba^ derecha ]  abajo_  izquierda [*/ 
    padding: 5% 0px 0px 0px;
}
#content h2,h3
{
    text-align:center ;
    font-family: 'Montserrat-Light', 'Montserrat';
    font-weight: 300;
    margin-top: 20px;
    font-size: clamp(0.46875rem, 0.25vw + 0.9375rem, 1.875rem);
    /* arriba^ derecha ]  abajo_  izquierda [*/ 
    
}

.Msg_E
{
    width: 90%;
    margin: auto;
    font-family: 'Montserrat-Light', 'Montserrat';
    font-weight: 300;
    background-color: lightcoral;
    padding: 20px;
    color: black;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}












.simply-section
{
    
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: auto;

}
.simply-amount
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 5.5%;
    font-size: 20px;
    border-radius: 50px;
    background-color: var(--colrs);
    text-align: center;
    margin: auto;
}
.simply-word
{
    display: flex;
    width: 60px;
    margin: auto;
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;

}
#time
{
    display: flex;
    width:81.2%;
    max-width: 500px;
    justify-content: center;
    align-items: center;
    margin: auto;
    /* arriba^ derecha ]  abajo_  izquierda [*/ 
    padding: 0px 0px 5% 0px;
}
.simply-amount
{
    font-family: 'Montserrat-Medium', 'Montserrat';
    font-size: clamp(0.375rem, 0.15vw + 1.875rem, 3.75rem);
    font-weight: 400;
    color: white;
}
.simply-word
{
    font-family: 'Montserrat-Light', 'Montserrat';
    font-weight: 300;
    color: var(--colrs);
    font-size: clamp(0.359375rem, 0.15vw + 0.71875rem, 1.4375rem);
}
/* Confirmar Asistencia */ 


.mask
{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

#content .Contacto h1, #content .Contacto h3
{
   
    margin-top: 10px;
    color: white;
}
.Contacto
{
    width: 100%;
    margin: auto;
    margin-top: 30%;
    display: flex;
    border-radius: 100px 26px 0 0;
    background-color: var(--colrs);
    flex-direction: column;
    align-items: center;
    padding: 50px;

}

.fb-mask
{
    width: 79px;
    height: 55px;
    background-color: white;
    -webkit-mask-size:60% ;
    -webkit-mask-position-x: 50%;
    -webkit-mask-position-y: 90%;
    -webkit-mask-image: url("icon-fb-60.png");
    -webkit-mask-repeat: no-repeat;
    
}
#content .Cont_Log
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    
}
#content .Cont_Log .log_inBan
{
    width: 90%;
    max-width: 450px;
    height: 550px;
    background-image: url('s2.jpg');
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    border-radius: 25px;
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn  h2
{
    color: gold;
    
    font-weight: 400;
    margin: 30px;
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn  label
{
    margin-top: 10px;
    font-size: 18px;
    font-weight:100 ;
    color: rgb(255, 255, 255);
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn  input
{
    width: 80%;
    max-width: 412px;
    height: 38px;
    padding: 5px;
    border-radius: 8px;
    margin: 5px;
    
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn  button
{
    margin: 30px;
    width: 150px;
    height: 40px;
    border-radius: 15px;
    color: #000;
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn  a
{
    margin-top: 50px;
    color: #ffff;
  
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn .Log_login
{
    width: 100%;
    display: flex;
    justify-content: center;
}
#content .Cont_Log .log_inBan .Back_IMG .Form_LogIn .Log_login img
{
    width: 40%;
    height: auto;
    margin: 15px;
}

#content .Cont_Log .log_inBan .Back_IMG
{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    border-radius: 25px;
    
}
#content .Cont_Log .log_inBan .Back_IMG img
{
    width: 100%;
    height: auto;
  
}

.Cont_Log .log_inBan .Back_IMG .Form_LogIn 
{
    display: flex;
    width: 100%;
    height: inherit;
    flex-direction: column;
    position: absolute;
    align-items: center;
    justify-content: center;
    margin: 15px;
    background-image: linear-gradient(to top, rgba(255,0,0,0), rgb(0, 0, 0));
    border-radius: 25px;
}



:root {
    --colrs: #000;
    --url: url("Recurso 8.png");
  }
  #content .Contacto .Authors
  {
    width: 100%;
    height: auto;
    display: flex;
    margin: auto;
    margin-top: 30%;
    align-items: center;
    justify-content: center;
  }

#content .Contacto .Authors h3
{
    
    text-align: center;
    padding: 0 0 0 0;
    margin: 0;
    font-family: 'Montserrat-Light', 'Montserrat';
    font-weight: lighter;
    font-size: clamp(0.2375rem, 0.15vw + 0.875rem, 1.75rem);
    color: white;
}
#content .Contacto h2
{
    text-align: center ;
    font-family: 'Cinzel';
    font-weight: 400;
    
    color: white;
    /* arriba^ derecha ]  abajo_  izquierda [*/ 
    padding: 5% 0px 0px 0px;
}
#content .logo
{
    width: 80%;
    height: 300px;
    border-radius: 50px;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#content .logo img
{
    width: 40%;
    height: auto;
    object-fit: cover;
}
#content .logo  h1
{
    font-family:'Cinzel';
    font-weight: 400;
    color: black;
}



/* ###################### Nav ##############*/
nav
{
    width: 100%; /*# El ancho de la barra sea 100% #*/
    margin: 0;
    align-items: center;
}
nav ul /*# modifica la barra de herramientas#*/
{
    background-color: #000;
    overflow: hidden; /*# desbordamiento oculto, sirve para que cuendo usemos una pagina web en un celular no se tenga que dezplazar de un lado a otro #*/
    margin-top: 0;
    padding: 5px 0px 5px 7.5px;
    border-radius:  0 0 25px 25px;
    border: 1px solid rgb(128, 127, 127);
    color: #fff;
    box-shadow: 0 2px 10px 0 rgb(32, 32, 32);
    
}
.log_in
{
    display: flex;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    text-decoration: none;/*# Elimina lo subrayado #*/
 /*# Para que el texto simepre sea de 16px #*/
    text-align: center; /*# El texto se alinea al centro #*/
    padding: 7px;/*# Relleno al rededor del texto #*/
    /*text-transform: uppercase; # Hace el texto en mayusculas #*/
    color: white;
    border-radius: 18px 0 0 18px;
    margin-top: 0.5%;
    justify-content: center;
    align-items: center;
    float: right;
    background-image: linear-gradient(to right, gold , #000);
    width: 120px;
    height: 100%;
    cursor: pointer;
}
.log_in:hover 
{
    background-image: linear-gradient(to right,#000, gold);
}

.log_in span
{
  width: 20px;
  height: auto;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
  margin: auto;
  color: #000;
}

nav ul.topnav li /*# Modifica el contenido de la lista #*/
{
    display: grid;
    float: left;
    list-style: none;
    margin-left: 3%; /*# Quita el estilo de lista #*/
    /*# Hace flotar los elementos a la izquierda #*/
}

ul.topnav li a
{
    display: block;
    font-family: 'Open Sans', sans-serif;
    align-items: center;
    font-size: 13px;
    margin: auto;
    text-decoration: none;/*# Elimina lo subrayado #*/
    min-height: 16px; /*# Para que el texto simepre sea de 16px #*/
    text-align: center; /*# El texto se alinea al centro #*/
    padding: 18px;/*# Relleno al rededor del texto #*/
    /*text-transform: uppercase; # Hace el texto en mayusculas #*/
    color: #fff;
    
    
    
}
ul.topnav li a:hover /*# Cambia los colores de la barra al pasar el cursor del mouse #*/
{
  background-image: linear-gradient(to top,#000, gold); /*# Fondo #*/
  color: #000;/*# Texto #*/
  height: 100%;
  border-radius: 10px;
} 
ul.topnav li a span
{
  margin: 5px;
}
ul.topnav li.dropdownIcon
{
 display: none; /*#Elimina el menu de hamb#*/
    
}
nav .topnav img
{
    float: left;
    margin-right: 10%;
}


@media screen and (max-width: 860px)
{
ul.topnav li:not(:nth-child(1)),ul.topnav a:not(:last-child)/*#Excluye al elemento home que es el 1 de la lista :not(:nth-child(1))#*/
{
    display: none;/*#Elimina los elementos de la barra#*/
}
ul.topnav li.dropdownIcon 
{
    display: block;/*# Muestra el menu de hamb #*/
    float:right;
}
ul.topnav.responsive li.dropdownIcon 
{
    position: absolute;
    top: 5px;
    right: 0;
        
}
ul.topnav.responsive
{
    position: relative; /*# Para que los elementos permanescan #*/
}
ul.topnav.responsive img 
{
    display: inline;
    margin-left: none;
    float: none;
   
}

ul.topnav.responsive li,ul.topnav.responsive a
{
    display: inline;
    float: none;
}
    
ul.topnav.responsive li a 
{
    display: block;
    text-align: left;
    margin-left: 1%;
}
}
.danger
{
    
}