body {

    background-color: #f9f7f1;
}

#first {


    border: 3px solid black;
    border-radius:20px;
    margin-left: 15px;
    margin-right: auto;
    margin-top: 135px;
    height:4050px; 
    align-items: center;
    justify-content: center;
    width: 97vw;
    background-color: white;
}

#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;

}

/*#backhome {

    height: 20px;
}*/



#CheckMark1 {

position: absolute;
height: 5vw;
width: 5vw;
/*margin-top: -99px;
margin-left: 420px;*/


}



#p0 {

    font-size: 60px;
    width: 80vw;
    margin-top: 50px;
    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;    
   
}

#p5 {

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

}

#banner1 {

    height: 70px;
    width: 700px;
    /*border: 3px solid orange;*/
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 207, 119);
    /*background-color: #FFCD28;
    /*outline: 0.5px solid black;*/
    /*background-color: rgb(255, 192, 109);*/
    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: 40px;
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    color: red;
    text-decoration: underline; 
}

#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 {

margin-top: 100px;
margin: auto;
font-size: 35px;
font-weight: bold;
width: 80vw;
text-align: center;


}

#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;
}

.digital {

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

}

.digital2 {

margin-top: 30px;
text-align: center;
font-weight: bold;
font-size: 35px;
}


.digital2: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 */  
}

#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;

}

#webtot {

align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 30px;
font-weight: bold;

}

#webtot:hover {

    transform: scale(1.10);       
}

#vaki {


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

} 

#siguenos111   {

    font-size: 25px;
    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;
    
    
}

#p2 {

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

#p2:hover {

    transform: scale(1.10);       
}

.p3 {

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

}

.p3:hover {

    transform: scale(1.10);       
}

#p4 {

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

#p4:hover {

    transform: scale(1.10);       
}


#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;
    }

    .digital {

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

    .digital:hover {

        transform: scale(1.10);       
    }
    
    .digital2 {
        
        margin-top: 30px;
        text-align: center;
        font-weight: bold;
        font-size: 35px;
    }
    
    
    
    #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: 30px;
       font-weight: bold;
    
    }

    #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:60px;
        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;
        text-align: center;
        padding-top: 30px;
    
    }

/*

    .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: 60px;
        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;
        text-align: center;
        padding-top: 30px;
        text-shadow: -2px -2px 0px white,  
                     2px -2px 0px white,  
                    -2px  2px 0px white,  
                     2px  2px 0px white;
}

*/
                

    .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:40px;
        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);
   align-content: center;

   text-align: center; /* Aligns the text horizontally 
   justify-content: center;
   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: 15px;
   
}



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

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

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

      }

      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;
    }


      

      #compassdiv {

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

    }

    #divbotones {

        margin-top: 300px;
    
    }

    .digital {

        margin-top: 200px;
        text-align: center;
        font-weight: bold;
        font-size: 35px;
    
    }

    .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: black;
    
    }

    #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   {

        margin-top: 70px;
    
    }

    

 }




/*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% */
}
}