body {

    background-color: #f9f7f1;
}

#first {


    border: 3px solid black;
    border-radius:20px;
    margin-left: 15px;
    margin-right: auto;
    margin-top: 135px;
    min-height:4050px; 
    align-items: center;
    justify-content: center;
    width: 97vw;
    background-color: white;
    min-height: 100vh;
    padding-bottom: 3rem; /* puedes ajustar el valor */
    transition: padding-bottom 0.3s ease;

}

#titulos {

    background-image: url("FLAG4.jpg");
    background-size: contain;
    width: 90vw;
    height: 190px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px lightgrey;
    margin: 0 auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: -97.8px;

}


h1 {

    position: relative;
    font-weight: bold;
    color: black;
    -webkit-text-stroke: 0.7px black;
    margin-left: auto;
    margin-left: auto;
    text-align: center;
    font-size: 65px;
    padding-top: 10px;
    /*margin-top: 32.5px;*/
    margin-top: 0px;


}

h1:hover {

    transform: scale(1.10);       
}

h2 {
     
    position: relative;
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 1px white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 32px;
    margin-top: -26.4px;

}

h2:hover {

    transform: scale(1.10);       
}

h3 {
         
    position: relative;
    font-weight: bold;
    color: lightgreen;
    -webkit-text-stroke: 1.5px lightgreen;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 31px;
    margin-top: -17px;
    z-index: 6;
}

h3:hover {

    transform: scale(1.10);
    color: lightgreen;
    -webkit-text-stroke: 1px lightgreen;

}



#CheckMark1 {

position: absolute;
height: 5vw;
width: 5vw;

}



#p0 {

    font-size: 60px;
    width: 80vw;
    margin-top: 20px;
    margin-left: 6vw;
    margin-right: auto;
    text-align: center;    
   
}

#p0:hover {

    transform: scale(1.10);       
}

#p1 {

    font-size: 50px;
    width: 80vw;
    margin-top: 50px;
    margin-left: 6vw;
    margin-right: auto;
    text-align: center;    
   
}


.p2 {

    font-size: 14px;
    font-weight: bold;
    width: 80vw;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;  
}



.p2:hover {

    transform: scale(1.10);       
}

.p3 {

    font-size: 45px;
    width: 70vw;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    margin-top: -580px;  

}

.p3:hover {

    transform: scale(1.10);       
}

#p4 {

    font-size: 45px;
    font-weight: bold;
    width: 80vw;
    margin-left: 6vw;
    margin-right: auto;
    text-align: center; 
}

#p4:hover {

    transform: scale(1.10);       
}



#p5 {

    text-align: center;
    display: block;
    color:#f9f7f1;

}

#banner1 {

    height: 70px;
    width: 700px;
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 207, 119);
    border-radius: 5px;
    margin-top: 80px;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    box-shadow: 0px 0px 20px lightgrey;
    

}


#notaimportante {

    font-size: 15px;
    color: red;
     
}

#bandera {

    margin-top: -30px;

}


    #colon{

        color:red;
    }

    #importante {

        font-size: 14px;
        margin: 0 auto;
        text-align: center;
        width:700px;
        font-size: 45px;
        width: 80vw;
    }

    
    
    #aumenteelmapa {

        font-weight: bold;
        font-size: 40px;
        text-align: center;
        margin-top: -50px;
        margin-right: auto;
        margin-left: 1vw;
    }
    


#Departamento {

    font-weight: bolder;
}


#COL1318,
#COL1416,
#COL1414,
#COL1412,
#COL1413,
#COL1417,
#COL1421,
#COL1316,
#COL1314,
#COL1317,
#COL1415,
#COL1397,
#COL1401,
#COL1315,
#COL1420,
#COL1422,
#COL1427,
#COL1424,
#COL1426,
#COL1423,
#COL1425,
#COL1403,
#COL1407,
#COL1406,
#COL1404,
#COL1408,
#COL1400,
#COL1402,
#COL1405,
#COL1399,
#COL1283,
#COL1415,
#COL1398,
#SanAndres {

    fill: grey;
}

#COL1318:hover,
#COL1412:hover,
#COL1421:hover,
#COL1316:hover,
#COL1420:hover,
#COL1425:hover,
#COL1283:hover,
#COL1424:hover,
#COL1283:hover,
#COL1398:hover,
#COL1401:hover,
#COL1404:hover {
    
    
    cursor: pointer;
    fill: rgb(250, 218, 38);
}


#COL1416:hover,
#COL1413:hover,
#COL1317:hover,
#COL1314:hover,
#COL1422:hover,
#COL1423:hover,
#COL1407:hover,
#COL1402:hover,
#COL1408:hover,
#SanAndres:hover {
    
    
    cursor: pointer;
    fill: blue;
}

#COL1414:hover,
#COL1417:hover,
#COL1315:hover,
#COL1415:hover,
#COL1426:hover,
#COL1427:hover,
#COL1403:hover,
#COL1397:hover,
#COL1400:hover,
#COL1405:hover,
#COL1406:hover {
    
    
    cursor: pointer;
    fill: red;

}

#COL1399 {

    fill: purple;
}



#tspan1444:hover,
#tspan1478:hover {
    
    
    stroke: greenyellow;
    font-size: 25px;
    text-decoration: underline;


}

#tspan1445:hover {

    stroke: greenyellow;
    font-size: 25px;
    text-decoration: underline;



}

#tspan1446:hover,
#tspan1454:hover,
#tspan1456:hover,
#tspan1462:hover,
#tspan1464:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 20px;
    text-decoration: underline;


}


#tspan1447:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 25px;
    text-decoration: underline;


}

#tspan1448:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 30px;
    text-decoration: underline;


}

#tspan1449:hover,
#tspan1455:hover,
#tspan1460:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 25px;
    text-decoration: underline;


}


#tspan1450:hover,
#tspan1451:hover,
#tspan1461:hover,
#tspan1463:hover,
#tspan1465:hover,
#tspan1476:hover,
#tspan1476:hover,
#tspan1477:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 16px;
    text-decoration: underline;

}

#tspan1452:hover,
#tspan1453:hover,
#tspan1457:hover,
#tspan1458:hover,
#tspan1459:hover,
#tspan1466:hover,
#tspan1467:hover,
#tspan1468:hover,
#tspan1469:hover,
#tspan1470:hover,
#tspan1471:hover,
#tspan1472:hover,
#tspan1473:hover,
#tspan1474:hover,
#tspan1475:hover {

    stroke: greenyellow;
    fill: greenyellow;
    font-size: 20px;
    text-decoration: underline;

}


/*STYLE FOR dropdowns*/


.yellow:hover {

    color:black;
    font-size: 55px;
}



.yellow {

    color: yellow;

}


.little {

font-size:35px;
}


.zoom {

    font-size: 15px;
    font-weight: bold;
    width: 80vw;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;

}

.zoom:hover {

    transform: scale(1.10);       
}

#svg {

margin-top: -470px;
margin-left: auto;
margin-right: auto;
width:95vw;   

}


a {

text-decoration: none;
color: black;

}


.cundinamarca {

font-size: 36px;
}

#bold {

font-weight: bold;
}


#home {

font-weight: bold;
font-size: 50px;
width: 80vw;
margin-left: 6vw;
margin-right: auto;
text-align: center; 
}

#web {

width: 70px;
height: 70px;
position: absolute;
margin-top: -16px;

}


#vaki {


margin:auto;
width:500px; 
/*border:2px solid fuchsia;*/
border:2px solid lawngreen; 
border-radius: 10px;  

} 

.siguenos111   {

    font-size: 10px;
    font-weight: bold;
    text-align: center;
    margin-top: 50px; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.siguenos111:hover {

    transform: scale(1.10);       
}


#socialnetworks111 {

margin-top: 100px;
margin: auto;
width: 350px;
margin-bottom: 50px;
height:100px;
/*align-items: center;*/

}

#facebooklogo111 {

height: 69px;
width: 70px;
margin-left: 1px;
margin-right: 5px;
margin-top: 20px;
margin-top: 30px;

}

#instagramlogo111 {

    height: 67px;
    width: 67px;
    margin-left: 2px;
    margin-top: -10px;
   
}


#youtubelogo111 {

    position: absolute;
    height: 79px;
    width: 79px;
    margin-left: -5px;
    margin-top: 27px;

}


#twitterlogo111 {

    height: 67px;
    width: 67px;
    /*margin-left: 10px;
    margin-right: 10px;*/
    padding-top: 5px;
    margin-left: 15px;
    margin-top: 30px;

} 

  

#twitterlogo111:hover, #instagramlogo111:hover, #facebooklogo111:hover, #youtubelogo111:hover 
  
{

    transform: scale(1.25);
    border: 3px solid lightgreen;
    border-radius: 15px;

}


#svg {

    
    margin-left: auto;
    margin-right: auto;
    width:100vw;
    
    
}






#divbotones {

    display: flex;
    align-items: left;
    width: 75vw;
    justify-content: center;
    margin-left: 70px;
    margin-right: auto;
    margin-top: 200px;

}


.navegadores {

        font-size: 30px;
        font-weight: bold;
        width: 45vw;
        text-align: center;
        /*margin-left: 50px; 
        margin-right: 50px;*/
        margin-top: 0px;
        margin-left: 70px;
        margin-right: 80px;      

    }

#botonregresar {


text-decoration: none;
color:black;
font-size: 30px;
font-weight: bolder;
margin-left: 20px;

}

#botonhome {

    
    width: 88px;
    height: 88px;
    text-decoration: none;
    color:black;
    font-size: 30px;
    font-weight: bolder;
    margin-left: -80px;
    
    }

    #regresar {

        height: 140px;
        width: 140px;
        margin-left: -50px;
        
        }
    
    #home {
    
    height: 140px;
    width: 140px;
    margin-top: -5px;
   

    }

    
    #botonregresar:hover, #botonhome:hover {
    
        transform: scale(1.10);
        background-color: transparent;
        
        
    } 

    #regresar:hover, #home:hover {
    
    transform: scale(1.10);
    background-color: lightgreen;
    border-radius: 50%;
    }


    #textreg {

        margin-left: -37.5px;
    }

    #texthome {

        margin-left: 88px;
    }

    .digit {

        margin-top: 75px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
    
    }

    .digit:hover {

        transform: scale(1.10);       
    }
    
    .digito {
        
        margin-top: 30px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;

    }

    .digito:hover {
        
    transform: scale(1.10);
    text-shadow: 0 0 5px lightgreen, 0 0 10px lightgreen;
    color: black; /* Opcional: aseguras que el color base no cambie */  
    
    }
    
    
    #web {
    
        width: 70px;
        height: 70px;
        position: absolute;
        margin-top: -16px;
    
    }
    
    #webtot {
    
       align-items: center;
       margin-left: auto;
       margin-right: auto;
       text-align: center;
       font-size: 12px;
       font-weight: bold;
    
    }

    #webtot:hover {

        transform: scale(1.10);       
    }

    #compass {

        height: 170px;
        width: 170px;
        align-items: center;
    }

    #compass:hover {

    transform: scale(1.10);

    }

    #compassdiv {

        align-items: center;
        margin-top: 100px;
        margin-bottom: 300px;
        width:20vw;
        margin-left: auto;
        margin-right: auto;

    }


    .yellowstripe {

        display: flex;
        flex-direction:column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background-image: url("FLAG8.jpg");
        background-size: contain;
        color:black;
        font-weight: bolder;
        box-shadow: 0px 0px 15px lightgrey; 
        font-size:55px;
        border-radius: 0px 20px 0px 0px;
        width: 85vw;
        margin-left: auto;
        margin-right: auto;
        height: 330px;
        border: 1px solid black;
        border-left: 15px solid rgb(130, 96, 10);
        border-top: 5px solid black;
        border-right: 5px solid black;
        margin-top: -20px;
    
    }

    .bluestripe {

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    
        background-image: url("FLAG9.jpg");
        background-size: contain;
        color: white;
        font-size:55px;
        font-weight: bolder;
        box-shadow: 0px 0px 15px lightgrey;
        border-radius: 0px 0px 0px 0px;
        width: 85vw;
        height: 260px;
        border: 1px solid black;
        z-index: 2;
        border-left: 15px solid rgb(130, 96, 10);
        border-right: 5px solid black;
        margin-left: auto;
        margin-right: auto;   
    
    }

.redstripe {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-image: url("FLAG10.jpg");
    background-size: contain;
    color:white;
    font-weight: bolder;
    box-shadow: 0px 0px 15px lightgrey;
    font-size:55px;
    border-radius: 0px 0px 20px 0px;
    width: 85vw;
    height:220px;
    z-index: 1;
    border-left: 15px solid rgb(130, 96, 10);
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    margin-left: auto;
    margin-right: auto;
    
}

#palobandera {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 230px;
    width: 85.4vw;
    margin-left: auto;
    margin-right: auto;
    border-left: 15px solid rgb(130, 96, 10);
    margin-bottom: 80px;

}

#field1 {

    height: 90px;
    width: 700px;
    margin-top: 27.5px;
    border: 3px solid black;
    border-radius: 15px;
    font-size: 50px;
    font-weight: bold;
    background-color: rgb(238, 238, 238);
    text-align: center;

}


#field2 {

    height: 90px;
    width: 700px;
    margin-top: 27.5px;
    border: 3px solid black;
    border-radius: 15px;
    border-radius: 15px;
    font-size: 50px;
    font-weight: bold;
    background-color: rgb(238, 238, 238);
    text-align: center;
}



#field3, #field4, #field5, #field6, #field7, #field8, #field9, #field10, #field11, #field12, #field13, #field14, #field15, #field16, #field17, #field18,  #field19, #field20, #field21, #field22, #field23, #field24, #field25, #field26, #field27, #field28, #field29, #field30, #field31, #field32, #field33, #field34  {

    height: 90px;
    width: 700px;
    margin-top: 10px;
    border: 3px solid black;
    border-radius: 15px;
    border-radius: 15px;
    font-size: 50px;
    font-weight: bold;
    background-color: rgb(238, 238, 238);
    text-align: center;
}

.submitbutton {

    width: 85vw;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
} 


#boton {
    font-size: 45px;
    font-weight: bolder;
    margin-top: 60px; 
    height: 170px;
    width: 170px;
    border-radius: 100%;
    border: 5px solid black;
    background-image: url("botonverde4.png");
    background-size: contain;
    color: black;
    transform: scale(1.10);
    text-align: center; /* Aligns the text horizontally */
    position: relative;
  }
  
  #botoncenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


#boton:hover
      
    {
    
        transform: scale(1.25);
        border: 5px solid black;
         
    }

    


option {

    text-align: center;
    font-weight: bold;
    font-size: 25px;

}

.options {

    color: darkgray;
}

.hagaclick {

    color: darkgray;

}

#astabandera {

    width:85vw;
    margin-left: auto;
    margin-right: auto;

}

#spearhead {

    height: 75px;
    width:53px;
    margin-left: -29px;
    margin-bottom: 10px;
   
}

/*
.redstripe.expand {
    min-height: 500px; o 500px si ves que sigue muy justo 
    transition: min-height 0.5s ease;
  }
  
*/

/* Espaciado extra para los selects derivados de field7 
#field8, #field9, #field10, #field11,
#field8_label, #field9_label, #field10_label, #field11_label {
  margin-top: 30px;

}

*/

 @media only screen and (max-width: 1079px) {
    
    
    #first.extra-space {
      padding-bottom: 120px; /* Ajusta este valor si necesitas más o menos espacio */
    }

  
}


  
  @media only screen and (min-width: 1080px) {

    body {
        transform: scale(0.50);
        transform-origin: center;
        margin-top: 0px;
        background-image: url(eleccionescolombiabackground5.png);
        height: 3330px;
        
        
      }

      #first {
    
        border: 3px solid black;
        border-radius:20px;
        margin-left: 14px;
        margin-right: auto;
        margin-top: -772px;
        margin-bottom: -2340px;
        align-items: center;
        justify-content: center;
        width: 95vw;
        height:4950px;
        background-color: white;

      }

      #p0 {

        font-size: 60px;
        width: 80vw;
        margin-top: 50px;
        margin-left: 6vw;
        margin-right: auto;
        text-align: center;    
       
    }
    
         #p0:hover {
    
        transform: scale(1.10);       
        
    }


        #p4 {

        font-size: 50px;
        font-weight: bold;
        width: 80vw;
        margin-left: 6vw;
        margin-right: auto;
        text-align: center; 
       
    }

       #notaimportante {

        font-size: 36px;
        color: red;

        }

        .p2 {

        font-size: 35px;
        font-weight: bold;
        width: 80vw;
        text-align: center; 
        margin-left: auto;
        margin-right: auto;  
        }
    
        .p2:hover {
    
        transform: scale(1.10);       
        }

        h1 {

        position: relative;
        font-weight: bold;
        color: black;
        -webkit-text-stroke: 0.7px black;
        margin-left: auto;
        margin-left: auto;
        text-align: center;
        font-size: 80px;
        padding-top: 0px;

       }

       h2 {
                 
        position: relative;
        font-weight: bold;
        color: white;
        -webkit-text-stroke: 1px white;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 32px;
        margin-top: -43.5px;

        }

        h3 {
         
        position: relative;
        font-weight: bold;
        color: lightgreen;
        -webkit-text-stroke: 1.5px lightgreen;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 32px;
        margin-top: -17.25px;
        z-index: 6;
        }

        #astabandera {

        width:85vw;
        margin-left: auto;
        margin-right: auto;
    
        }
    
        #spearhead {
    
        height: 75px;
        width:53px;
        margin-left: -29px;
        margin-bottom: 15px;
       
        }


        .zoom {

        font-size: 35px;
        font-weight: bold;
        width: 80vw;
        text-align: center; 
        margin-left: auto;
        margin-right: auto;  
    
        }
    

        
        
        .zoom:hover {

            transform: scale(1.10);       
        }


      

        #compassdiv {

        align-items: center;
        margin-top: 150px;
        margin-bottom: 550px;
        width:20vw;
        margin-left: 570px;
        margin-right: auto;

        }

        #webtot {
        font-size: 28px;
        padding: 20px 10px;
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        display: block;
  
       }
        
        #webtot:hover {
        
            transform: scale(1.10);       
        }

        #divbotones {

        margin-top: 300px;
    
        }

    .p3 {

        margin-top: -500px;

    }

    #p4 {

        margin-top: 100px;

    }

    #p5 {

        margin-top: 1570px;
        margin-bottom: 70px;
        text-align: center;
        font-size: 40px;
        font-weight: bolder;
        color: white;
    
    }

    #boton  {

        margin-top: 60px;

    }


    #textreg {
    
        margin-left: -31px;
    }

    #texthome {

        margin-left: 120px;
    }

    #divbotones {
    
        display: flex;
        align-items: left;
        width: 75vw;
        justify-content: center;
        margin-left: 100px;
        margin-right: auto;
        margin-top: 300px;
       
    
    }

    #regresar {

        height: 140px;
        width: 140px;
        margin-left: -50px;
        
        }
    
    #home {
    
    height: 140px;
    width: 140px;
    margin-top: -5px;
   

    }

    
    .navegadores {
    
        font-size: 30px;
        font-weight: bold;
        width: 45vw;
        text-align: center;
        /*margin-left: 50px; 
        margin-right: 50px;*/
        margin-top: 0px;
        margin-left: 80px;
        margin-right: 80px;      
    
    }

    #socialnetworks111 {

        margin-bottom: 0px;

    }

    .siguenos111   {

        font-size: 25px;
        font-weight: bold;
        text-align: center;
        margin-top: 70px; 
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    
    }
    
    .siguenos111:hover {
    
        transform: scale(1.10);       
    }



    .digit {
    font-size: 36px;
    padding: 15px 10px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .digit:hover {

        transform: scale(1.10);       
    }


  
  .digit {
    font-size: 34px;
    padding: 15px 10px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .digit:hover {

        transform: scale(1.10);     
    }


  .digito {
        
        margin-top: 40px;
        text-align: center;
        font-weight: bold;
        font-size: 30px;

    }


  .digito:hover {

        transform: scale(1.10);     
    }

    


  .redstripe.expand {
    padding-bottom: 4rem !important;
  }

  #first {
    min-height: 4200px !important;
  }

  
    

 }


 /*CODIGO CSS ANIMACIONES*/

 @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  
  @keyframes initialGrowShrink {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.075); /* Grow by 7.5% */
    }
    100% {
        transform: scale(1);
    }
}
  
  
/* Keyframes for growing and shrinking */
@keyframes growShrink {
0%, 100% {
  transform: scale(1); /* Normal size */
}
50% {
  transform: scale(1.075); /* Grow by 7.5% */
}
}

/* Initial Grow-Shrink effect */
@keyframes initialGrowShrink {
0%, 100% {
  transform: scale(1); /* Normal size */
}
50% {
  transform: scale(1.075); /* Grow by 7.5% */
}
}