@font-face {
    font-family: 'Fuente-1';
    src: url('./tipografia/ImperialScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root{
    --color1:#BA0049;
    --color2:#5C85A1;
    --ancho-maximo: 900px;
   
    

  
}


body{
    align-content: center;
    background: #DEDEDE;
}


#logo{
    pointer-events: none;
    width: 700px;
    position: absolute;
    margin-top: -150px;
    margin-left: -750px;
    transform: traslate(-50%,-50%);
}


#logo path:nth-child(20){
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 0.1s; 
    
}
   
#logo path:nth-child(19){
    stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 0.2s; 
    
}
   
#logo path:nth-child(18){
     stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 0.3s; 
}
   
#logo path:nth-child(17){
    stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.4s; 
}

#logo path:nth-child(16){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.5s; 
}

#logo path:nth-child(15){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.6s; 
}
#logo path:nth-child(14){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.7s; 
}
#logo path:nth-child(13){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.8s; 
}
#logo path:nth-child(12){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 0.9s; 
}
#logo path:nth-child(11){
     stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 1s; 
}
#logo path:nth-child(10){
     stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 1.1s; 
}
#logo path:nth-child(9){
     stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 1.2s; 
}
#logo path:nth-child(8){
     stroke-dasharray: 2000px;
    stroke-dashoffset: 2000px;
    animation: animacion 8s ease infinite 1.3s; 
}
#logo path:nth-child(7){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.4s; 
}
#logo path:nth-child(6){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.5s; 
}
#logo path:nth-child(5){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.2s; 
}
#logo path:nth-child(4){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.6s; 
}
#logo path:nth-child(3){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.7s; 
}
#logo path:nth-child(2){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.8s; 
}

#logo path:nth-child(1){
     stroke-dasharray: 1000px;
    stroke-dashoffset: 1000px;
    animation: animacion 8s ease infinite 1.9s; 
}




@keyframes animacion {
    20%{
        stroke-dashoffset: 0;
    }
    100%{ stroke-dashoffset: 0}
    
}
   
   
   

.caja_principal{
    padding: 15px;
    outline: 2px dashed var(--color1);
    outline-offset: -15px;
    max-width: var(--ancho-maximo);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 10px rgb(0,0,0,0.5);
    background: #FCFCFC;
}



.separador_1 {
    margin-bottom:20px ;
    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}

.separador_2 {
    margin-bottom:20px ;
    margin-top: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}



.titulo {
    margin-bottom:20px ;
    margin-top: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-family: "Fuente-1";
    font-size: 90px ;
    color:var(--color1)
    
   
}




.titulo_2 {
    margin-top: 40px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-family: "Fuente-1";
    font-size: 110px ;
    color:var(--color1)
    
}

.titulo_3{
    margin-top: 40px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-size: 110px ;
    color:var(--color1)
    
}

.texto{
    text-align: center;
    margin-left: auto;
    margin-top:auto;
    width: auto;
    color:var(--color1);
    font-size: 50px;
}


.datos{
    
    padding: 4%;
    text-align: center;
    margin: 10px;
    color:var(--color2);
    font-size: 50px ;
}


.caja {
    
    width: 100%;
    display: flex;
}

.caja div:nth-child(1) {
    align-content: center;
    width: 50%;
}

.caja div:nth-child(2) {
    width: 50%;
    word-wrap: break-word;
}


.caja div:nth-child(1) p {
    
    width: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color:var(--color1);
    font-size: 60px;
}

.caja div:nth-child(2) p {
    margin-left: 15px;
    text-align: center;
    width: auto;
    color:var(--color1);
    font-size: 50px;
    
}


.caja div:nth-child(1) h2 {
    margin: 0;
    width: auto;
    height: 100px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Times New Roman;
    color:var(--color1);
    font-size: 120px;
    animation: animacion_numero 4s infinite ;
    
}

@keyframes animacion_numero{
    0%{
        transform: translate(0px,0px);
        font-size: 120px;
    }
    10%{
        transform: translate(0px,-60px);
        font-size: 150px;
    }
    20%{
        font-size: 120px;
        transform: translate(0px,0px)
    }
    100%{
        font-size: 120px;
        transform: translate(0px,0px)
    }
    
}



.separador {
    pointer-events: none;
    margin: 0;
    display: block;
    max-width: var(--ancho-maximo);
    width: 100%;
    height: auto;
    position: absolute;

    
}


.separador span{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 0px;
    height:500px;
    border: 1px dashed var(--color1);
    
}


.confirmar_asistencia{
    padding: 10px;
    outline: 2px dashed #fff;
    outline-offset: -10px;
    margin-top:40px ;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    width: 85%;
    height: auto;
    background: var(--color1);
    display:block;
    color:#fff;
    font-size:50px;
    padding: 5%;
    text-align: center;
    border-radius: 40px;
    animation: animacion_boton 1s infinite alternate;
    
}

.confirmar_asistencia:hover{
    
    background:#D91861;
 
    
}

@keyframes animacion_boton{
    0%{
         background:#9E0943;
    }
    100%{
         background:#D91861;
    }
   
   
}



.conteo{
 width: 90%;
 display: flex;
   margin-left: auto;
    margin-right: auto;
 
 
}




.conteo div{
    text-align: center;
    color: var(--color1);
    font-size:90px;
    width: 25%;
    height: auto;
    min-height: 100px;
    border: 2px dashed var(--color1);
    border-radius: 10px;
}



.conteo_nombres{
    width: 90%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
 
}

.conteo_nombres div{
    text-align: center;
    color: var(--color1);
    font-size:40px;
    width: 25%;
    height: auto;
}

.ver_video{
    padding: 10px;
    outline: 2px dashed #fff;
    outline-offset: -10px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: auto;
    font-size:50px;
    text-align: center;
    color:#fff;
    background: var(--color2);
    cursor: pointer;
}


.ver_maps{
    padding: 10px;
    outline: 2px dashed #fff;
    outline-offset: -10px;
    margin-top:40px;
    margin-bottom:40px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: auto;
    font-size:50px;
    text-align: center;
    color:#fff;
    background: var(--color2);
    cursor: pointer;
}