:root{

    --puntoCity: 'none';

}


@media (max-width: 2000px) {

    #bogota{top: 45.6%;left: 49.3%;}
    #medellin{top: 35.3%;left: 46.3%;}
    #manizales{top: 43.5%;left: 46.3%;}
    #tumaco{top: 65.3%;left: 39.2%;}
    #caribe{top: 13.8%;left: 35.9%;}
    #palmira{top: 54%;left: 44.4%;}
    #lapaz{top: 13.9%;left: 51.1%;}
    #orinoquia{top: 34.5%;left: 56.8%;}
    #amazonia{top: 95%;left: 58.5%;}


    .img-sgv{
        width: 33vw;
    }

    #bogota .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #bogota .title{ width: 100%;} 
    #medellin .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #medellin .title{ width: 100%;}
    #manizales .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #manizales .title{ width: 100%;}
    #tumaco .content_container {width: 70%;height:  auto; left:4rem; top: -15rem;}
    #tumaco .title{ width: 100%;}
    #palmira .content_container {width: 70%;height:  auto; left:4rem; top: -15rem;}
    #palmira .title{ width: 100%;}
    #caribe .content_container {width: 70%;height:  auto; left:4rem; top: -1rem;}
    #caribe .title{ width: 100%;}
    #lapaz .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #lapaz .title{ width: 100%;}
    #orinoquia .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #orinoquia .title{ width: 100%;}
    #amazonia .content_container {width: 70%;height:  auto; left:4rem; top: -25rem;}
    #amazonia .title{ width: 100%;}
    
}

@media (max-width: 1400px) {

    #bogota{top: 45.6%;left: 49.3%;}
    #medellin{top: 35.3%;left: 44.8%;}
    #manizales{top: 43.9%;left: 44.5%;}
    #tumaco{top: 65%;left: 33.8%;}
    #caribe{top: 13.8%;left: 28.5%;}
    #palmira{top: 54.2%;left: 41.5%;}
    #lapaz{top: 13.9%;left: 51.6%;}
    #orinoquia{top: 34.5%;left: 60.4%;}
    #amazonia{top: 95%;left: 62.9%;}

    .img-sgv{
        width: 50vw;
    }


    #bogota .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #bogota .title{ width: 100%;} 
    #medellin .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #medellin .title{ width: 100%;}
    #manizales .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #manizales .title{ width: 100%;}
    #tumaco .content_container {width: 70%;height:  auto; left:4rem; top: -15rem;}
    #tumaco .title{ width: 100%;}
    #palmira .content_container {width: 70%;height:  auto; left:4rem; top: -15rem;}
    #palmira .title{ width: 100%;}
    #caribe .content_container {width: 70%;height:  auto; left:4rem; top: -1rem;}
    #caribe .title{ width: 100%;}
    #lapaz .content_container {width: 70%;height:  auto; left:4rem; top: -3rem;}
    #lapaz .title{ width: 100%;}
    #orinoquia .content_container {width: 70%;height:  auto; left:4rem; top: -10rem;}
    #orinoquia .title{ width: 100%;}
    #amazonia .content_container {width: 70%;height:  auto; left:4rem; top: -30rem;}
    #amazonia .title{ width: 100%;}
    
}

@media (max-width: 1200px) {
    #bogota{top: 46%;left: 48.5%;}
    #medellin{top: 35.4%;left: 42%;}
    #manizales{top: 44%;left: 42%;}
    #tumaco{top: 66%;left: 25.9%;}
    #caribe{top: 13.5%;left: 18%;}
    #palmira{top: 54.5%;left: 37.5%;}
    #lapaz{top: 13.5%;left: 53%;}
    #orinoquia{top: 34.6%;left: 65.9%;}
    #amazonia{top: 96.3%;left: 69.6%;}

    .img-sgv{
        width: 75vw;
    }
    .punto:hover {transform: var(--puntoCity);}

    #bogota .title{width: 100%;}
    #bogota .info {top: -15rem; left: -22.5rem;}
    #bogota .info:before{ top: 16.5rem; left: 30.9%; transform:  rotate(90deg); z-index: 1;}
    #bogota .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem}


    #medellin .title{width: 100%;}
    #medellin .info {top: -14rem; left: -22.5rem;}
    #medellin .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #medellin .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}


    #manizales .title{width: 100%;}
    #manizales .info {top: -14rem; left: -22.5rem;}
    #manizales .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #manizales .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}
    

    #tumaco .title{width: 100%;}
    #tumaco .info {top: -8rem;}
    #tumaco .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #tumaco .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}

    #palmira .title{width: 100%;}
    #palmira .info {top: -8rem;}
    #palmira .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #palmira .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}


    #caribe .title{width: 100%;}
    #caribe .info {top: -7rem;}
    #caribe .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #caribe .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #lapaz .title{width: 100%;}
    #lapaz .info {top: -7rem;}
    #lapaz .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #lapaz .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #orinoquia .title{width: 100%;}
    #orinoquia .info {top: -15rem; left: -3.5rem}
    #orinoquia .info:before{ top: -2rem; left: 31.9%; transform:  rotate(180deg); z-index: 1;}
    #orinoquia .content_container {width: 70%;height: 160%; left: 10.5rem; top: -8.2rem;}


    #amazonia .title{width: 100%;}
    #amazonia .info {top: -17rem; left: -22.5rem;}
    #amazonia .info:before{ top: 16.5rem; left: 23.9%; transform:  rotate(90deg); z-index: 1;}
    #amazonia .content_container {width: 70%;height: 160%; left: -3.5rem; top: -15.3rem; }



    
    
}

@media (max-width: 992px) {


    #bogota{top: 46%;left: 48.5%;}
    #medellin{top: 35.4%;left: 42%;}
    #manizales{top: 44%;left: 42%;}
    #tumaco{top: 66%;left: 25.9%;}
    #caribe{top: 13.5%;left: 18%;}
    #palmira{top: 54.5%;left: 37.5%;}
    #lapaz{top: 13.5%;left: 53%;}
    #orinoquia{top: 34.6%;left: 65.9%;}
    #amazonia{top: 96.3%;left: 69.6%;}

    .img-sgv{
        width: 75vw;
    }

    .punto:hover {transform: var(--puntoCity);}

    #bogota .title{width: 100%;}
    #bogota .info {top: -15rem; left: -22.5rem;}
    #bogota .info:before{ top: 16.5rem; left: 30.9%; transform:  rotate(90deg); z-index: 1;}
    #bogota .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem}


    #medellin .title{width: 100%;}
    #medellin .info {top: -14rem; left: -22.5rem;}
    #medellin .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #medellin .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}


    #manizales .title{width: 100%;}
    #manizales .info {top: -14rem; left: -22.5rem;}
    #manizales .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #manizales .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}
    

    #tumaco .title{width: 100%;}
    #tumaco .info {top: -8rem;}
    #tumaco .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #tumaco .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}

    #palmira .title{width: 100%;}
    #palmira .info {top: -8rem;}
    #palmira .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #palmira .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}


    #caribe .title{width: 100%;}
    #caribe .info {top: -7rem;}
    #caribe .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #caribe .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #lapaz .title{width: 100%;}
    #lapaz .info {top: -7rem;}
    #lapaz .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #lapaz .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #orinoquia .title{width: 100%;}
    #orinoquia .info {top: -10rem; left: -3.5rem}
    #orinoquia .info:before{ top: -2rem; left: 45.9%; transform:  rotate(0deg); z-index: 1;}
    #orinoquia .content_container {width: 70%;height: 160%; left: -5.4rem; top: -14.2rem;}


    #amazonia .title{width: 100%;}
    #amazonia .info {top: -5rem; left: -22.5rem;}
    #amazonia .info:before{ top: 16.5rem; left: 63.9%; transform:  rotate(90deg); z-index: 1;}
    #amazonia .content_container {width: 70%;height: 160%; left: 3.5rem; top: -15.3rem; }

    
}
@media (max-width: 768px) {

    #bogota{top: 46%;left: 48.5%;}
    #medellin{top: 35.4%;left: 42%;}
    #manizales{top: 44%;left: 42%;}
    #tumaco{top: 65.8%;left: 25.5%;}
    #caribe{top: 13.2%;left: 18%;}
    #palmira{top: 54.5%;left: 37.5%;}
    #lapaz{top: 13.2%;left: 52.8%;}
    #orinoquia{top: 34.3%;left: 65.5%;}
    #amazonia{top: 96%;left: 69.3%;}
    
    .img-sgv{
        width: 75vw;
    }

    .punto:hover {transform: var(--puntoCity);}

    #bogota .title{width: 100%;}
    #bogota .info {top: -15rem; left: -22.5rem;}
    #bogota .info:before{ top: 16.5rem; left: 30.9%; transform:  rotate(90deg); z-index: 1;}
    #bogota .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem}


    #medellin .title{width: 100%;}
    #medellin .info {top: -14rem; left: -22.5rem;}
    #medellin .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #medellin .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}


    #manizales .title{width: 100%;}
    #manizales .info {top: -14rem; left: -22.5rem;}
    #manizales .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #manizales .content_container {width: 70%;height: 160%; left: 0rem; top: -15.2rem;}
    

    #tumaco .title{width: 100%;}
    #tumaco .info {top: -8rem;}
    #tumaco .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #tumaco .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}

    #palmira .title{width: 100%;}
    #palmira .info {top: -8rem;}
    #palmira .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #palmira .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}


    #caribe .title{width: 100%;}
    #caribe .info {top: -7rem;}
    #caribe .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #caribe .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #lapaz .title{width: 100%;}
    #lapaz .info {top: -7rem;}
    #lapaz .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #lapaz .content_container {width: 70%;height: 165%; left: 7.5rem; top: -8.2rem;}

  
    #orinoquia .title{width: 100%;}
    #orinoquia .info {top: -3rem; left: -5.5rem}
    #orinoquia .info:before{ top: 0rem; left: 69.9%; transform:  rotate(0deg); z-index: 1;}
    #orinoquia .content_container {width: 70%;height: 160%; left: 6.6rem; top: -9.2rem;}


    #amazonia .title{width: 100%;}
    #amazonia .info {top: -5rem; left: -22.5rem;}
    #amazonia .info:before{ top: 16.5rem; left: 63.9%; transform:  rotate(90deg); z-index: 1;}
    #amazonia .content_container {width: 70%;height: 160%; left: 3.5rem; top: -15.3rem; }
    

    
}



@media (max-width: 576px) {

       /*jumbotron*/
       .pdj-5{ padding: 0rem;}
       .punto::after{ width: 2.5rem;height: 2rem;}

       #bogota{top: 45.5%;left: 48%;}
       #medellin{top: 35%;left: 41.5%;}
       #manizales{top: 43.5%;left: 41.5%;}
       #tumaco{top: 65.3%;left: 25%;}
       #caribe{top: 12.5%;left: 17.5%;}
       #palmira{top: 54%;left: 37%;}
       #lapaz{top: 13%;left: 52.5%;}
       #orinoquia{top: 34%;left: 65.5%;}
       #amazonia{top: 95.5%;left: 69.3%;}
       

     
    .img-sgv{
        width: 75vw;

    }

    .punto:hover {transform: var(--puntoCity);}

    #bogota .title{width: 100%;}
    #bogota .info {top: -8rem; left: -22.5rem;}
    #bogota .info:before{ top: 16.5rem; left: 30.9%; transform:  rotate(90deg); z-index: 1;}
    #bogota .content_container {width: 70%;height: 160%; left: 6rem; top: -5rem}


    #medellin .title{width: 100%;}
    #medellin .info {top: -10rem; left: -22.5rem;}
    #medellin .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #medellin .content_container {width: 70%;height: 160%; left: 7rem; top: -5rem;}


    #manizales .title{width: 100%;}
    #manizales .info {top: -7rem; left: -22.5rem;}
    #manizales .info:before{ top: 16.5rem; left: 57%; transform:  rotate(90deg); z-index: 1;}
    #manizales .content_container {width: 70%;height: 160%; left: 10rem; top: -5rem;}
    

    #tumaco .title{width: 100%;}
    #tumaco .info {top: -15rem;}
    #tumaco .info:before{ top: 5.3rem; left: 30.9%; transform:  rotate(180deg); z-index: 1;}
    #tumaco .content_container {width: 70%;height: 160%; left: 10rem; top: -18.2rem;}

    #palmira .title{width: 100%;}
    #palmira .info {top: -8rem;}
    #palmira .info:before{ top: 5.3rem; left: 55.9%; transform:  rotate(180deg); z-index: 1;}
    #palmira .content_container {width: 70%;height: 160%; left: 17.5rem; top: -15.2rem;}


    #caribe .title{width: 100%;}
    #caribe .info {top: -7rem;}
    #caribe .info:before{ top: 5.6rem; left: 59%; transform:  rotate(180deg); z-index: 1;}
    #caribe .content_container {width: 70%;height: 160%; left: 18.5rem; top: -8.2rem;}

  
    #lapaz .title{width: 100%;}
    #lapaz .info {top: -7rem;}
    #lapaz .info:before{ top: 6rem; left: 57%; transform:  rotate(270deg); z-index: 1;}
    #lapaz .content_container {width: 70%;height: 165%; left: 7.5rem; top: 2rem;}

  
    #orinoquia .title{width: 100%;}
    #orinoquia .info {top: 0rem; left: -5.5rem}
    #orinoquia .info:before{ top: -0rem; left: 79%; transform:  rotate(0deg); z-index: 1;}
    #orinoquia .content_container {width: 70%;height: 160%; left: 6.6rem; top: -15.2rem;}


    #amazonia .title{width: 100%;}
    #amazonia .info {top: -5rem; left: -22.5rem;}
    #amazonia .info:before{ top: 16.5rem; left: 63.9%; transform:  rotate(90deg); z-index: 1;}
    #amazonia .content_container {width: 70%;height: 160%; left: 3.5rem; top: -18.3rem; }
   


}

@media (max-width: 420px) {

    /*jumbotron*/
    .pdj-5{ padding: 0rem;}
    .punto::after{ width: 2.5rem;height: 2rem;}
    
    #bogota{top: 45.5%;left: 48%;}
    #medellin{top: 35%;left: 41.5%;}
    #manizales{top: 43.5%;left: 41.5%;}
    #tumaco{top: 65.3%;left: 25%;}
    #caribe{top: 12.5%;left: 17.5%;}
    #palmira{top: 54%;left: 37%;}
    #lapaz{top: 13%;left: 52.5%;}
    #orinoquia{top: 34%;left: 65.5%;}
    #amazonia{top: 95.5%;left: 69.3%;}
    .img-sgv{
         width: 75vw;

    }

    #bogota .title{width: 100%;}
    #bogota .info {top: -8rem; left: -22.5rem;}
    #bogota .info:before{ top: 16.5rem; left: 30.9%; transform:  rotate(90deg); z-index: 1;}
    #bogota .content_container {width: 70%;height: 160%; left: 6rem; top: -5rem}


    #medellin .title{width: 100%;}
    #medellin .info {top: -10rem; left: -22.5rem;}
    #medellin .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #medellin .content_container {width: 70%;height: 160%; left: 7rem; top: -2rem;}


    #manizales .title{width: 100%;}
    #manizales .info {top: -8rem; left: -22.5rem;}
    #manizales .info:before{ top: 16.5rem; left: 33.9%; transform:  rotate(90deg); z-index: 1;}
    #manizales .content_container {width: 70%;height: 160%; left: 9rem; top: -2rem;}
    

    #tumaco .title{width: 100%;}
    #tumaco .info {top: -8rem;}
    #tumaco .info:before{ top: 4.7rem; left: 54%; transform:  rotate(90deg); z-index: 1;}
    #tumaco .content_container {width: 70%;height: 160%; left: 13rem; top: -18.5rem;}

    #palmira .title{width: 100%;}
    #palmira .info {top: -8rem;}
    #palmira .info:before{ top: 4.9rem; left: 54%; transform:  rotate(90deg); z-index: 1;}
    #palmira .content_container {width: 70%;height: 160%; left: 10rem; top: -26.9rem;}


    #caribe .title{width: 100%;}
    #caribe .info {top: -7rem;}
    #caribe .info:before{ top: 5.9rem; left: 57%; transform:  rotate(270deg); z-index: 1;}
    #caribe .content_container {width: 70%;height: 160%; left: 14.5rem; top: 6.9rem;}

    #lapaz .title{width: 100%;}
    #lapaz .info {top: -7rem;}
    #lapaz .info:before{ top: 6rem; left: 57%; transform:  rotate(270deg); z-index: 1;}
    #lapaz .content_container {width: 70%;height: 165%; left: 6.5rem; top: 2rem;}

  
    #orinoquia .title{width: 100%;}
    #orinoquia .info {top: -3rem; left: -10.5rem}
    #orinoquia .info:before{ top: 5.5rem; left: 69.9%; transform:  rotate(270deg); z-index: 1;}
    #orinoquia .content_container {width: 70%;height: 160%; left: 7rem; top: -5.6rem;}


    #amazonia .title{width: 100%;}
    #amazonia .info {top: -2rem; left: -22.5rem;}
    #amazonia .info:before{ top: 16.5rem; left: 72.9%; transform:  rotate(90deg); z-index: 1;}
    #amazonia .content_container {width: 70%;height: 160%; left: 7rem; top: -13rem; }

}