@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

body,
html{
    background: #;
}

.btn-open-popup{
    position: absolute;
    top: 78%;
    left: 21%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 05px 20px;
    border-radius: 50px;
}

.btn-open-popup2{
    position: absolute;
    top: 256%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 05px 20px;
    border-radius: 50px;
}
.container-all{
    width: 100%;
    height: 100%;
    position: fixed;
    padding: 40px;
    visibility: hidden;
    opacity: 0;
    transition: all 600ms;
}


.container-all:target{
    background: rgba(0,0,0,0.8);
    visibility: visible;
    opacity: 1;
}

.container-all:target .popup{
    top: 50%;
    left: 50%;
    transform: rotate(0deg) translate(-50%, -50%);
    visibility: visible;
}


.popup{
    width: 100%;
    max-width: 900px;
    height: 600px;
    position: relative;
    display: flex;
    background: white;
    visibility: hidden;
    top: -80%;
    left: -80%;
    transform: rotate(90deg) translate(-150%, 230%);
    transition: all 600ms;
  -webkit-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;


}


.img{
    width: 50%;
    background-image: url(../img1.jpg);
    background-size: cover;
    background-position: center;
}

.container-text{
    width: 60%;
    padding: 50px;
    overflow-y: auto;
}


.container-text h1{
    font-size: 30px;
}

.container-text p{
    margin-top: 20px;
    font-size: 16px;
}


.btn-close-popup{
    width: 50px;
    height: 50px;
    position: absolute;
    right: -20px;
    top: -20px;
    padding: 20px;
    background: black;
    color: white;
    border-radius: 50%;
    line-height: 10px;
}





    








@media screen and (max-width: 1200px){
   




.container-all{

   flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1500px;
        max-width: 1800px;
    }











 .popup14{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img14{
        width: 50%;
        height: 100%;
    }
    

.popup13{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img13{
        width: 50%;
        height: 100%;
    }

.popup12{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img12{
        width: 50%;
        height: 100%;
    }



.popup11{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img11{
        width: 50%;
        height: 100%;
    }

.popup10{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img10{
        width: 50%;
        height: 100%;
    }



.popup9{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img9{
        width: 50%;
        height: 100%;
    }


.popup8{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img8{
        width: 50%;
        height: 100%;
    }



.popup7{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img7{
        width: 50%;
        height: 100%;
    }

.popup6{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img6{
        width: 50%;
        height: 100%;
    }



.popup5{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img5{
        width: 50%;
        height: 100%;
    }



.popup4{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img4{
        width: 50%;
        height: 100%;
    }



.popup3{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img3{
        width: 50%;
        height: 100%;
    }



.popup2{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img2{
        width: 50%;
        height: 100%;
    }

.popup1{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img1{
        width: 50%;
        height: 100%;
    }










    .container-text{
        width: 50%;
        height: 60%;
        padding: 80px;
    }
    
}    













@media screen and (max-width: 900px){
   




.container-all{

   flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1500px;
        max-width: 1800px;
    }









.btn-open-popup14{

        width: 20%;
 }
 .popup14{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img14{
        width: 50%;
        height: 100%;
    }
    
.btn-open-popup13{

        width: 20%;
 }
.popup13{
        flex-direction: column;
        height: 100%;
        max-height: 400px;

    }
    
    .img13{
        width: 50%;
        height: 100%;
    }
.btn-open-popup12{

        width: 20%;
 }
.popup12{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img12{
        width: 50%;
        height: 100%;
    }

.btn-open-popup11{

        width: 20%;
 }

.popup11{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img11{
        width: 50%;
        height: 100%;
    }
.btn-open-popup10{

        width: 20%;
 }
.popup10{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img10{
        width: 50%;
        height: 100%;
    }


.btn-open-popup9{

        width: 20%;
 }
.popup9{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img9{
        width: 50%;
        height: 100%;
    }
.btn-open-popup8{

        width: 20%;
 }

.popup8{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img8{
        width: 50%;
        height: 100%;
    }


.btn-open-popup7{

        width: 20%;
 }
.popup7{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img7{
        width: 50%;
        height: 100%;
    }
.btn-open-popup6{

        width: 20%;
 }
.popup6{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img6{
        width: 50%;
        height: 100%;
    }

.btn-open-popup5{

        width: 20%;
 }

.popup5{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img5{
        width: 50%;
        height: 100%;
    }

.btn-open-popup4{

        width: 20%;
 }

.popup4{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img4{
        width: 50%;
        height: 100%;
    }

.btn-open-popup3{

        width: 20%;
 }

.popup3{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img3{
        width: 50%;
        height: 100%;
    }

.btn-open-popup2{

        width: 20%;
 }

.popup2{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img2{
        width: 50%;
        height: 100%;
    }
.btn-open-popup1{

        width: 20%;
 }
.popup1{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img1{
        width: 50%;
        height: 100%;
    }










    .container-text{
        width: 50%;
        height: 60%;
        padding: 80px;
    }
    
}


@media screen and (max-width: 720px){
   




.container-all{

   flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1500px;
        max-width: 1800px;
    }









.btn-open-popup14{

        width: 24%;
 }
 .popup14{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img14{
        width: 50%;
        height: 100%;
    }
    
.btn-open-popup13{

        width: 22%;
 }
.popup13{
        flex-direction: column;
        height: 100%;
        max-height: 400px;

    }
    
    .img13{
        width: 50%;
        height: 100%;
    }
.btn-open-popup12{

        width: 22%;
 }
.popup12{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img12{
        width: 50%;
        height: 100%;
    }

.btn-open-popup11{

        width: 22%;
 }

.popup11{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img11{
        width: 50%;
        height: 100%;
    }
.btn-open-popup10{

        width: 22%;
 }
.popup10{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img10{
        width: 50%;
        height: 100%;
    }


.btn-open-popup9{

        width: 22%;
 }
.popup9{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img9{
        width: 50%;
        height: 100%;
    }
.btn-open-popup8{

        width: 22%;
 }

.popup8{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img8{
        width: 50%;
        height: 100%;
    }


.btn-open-popup7{

        width: 22%;
 }
.popup7{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img7{
        width: 50%;
        height: 100%;
    }
.btn-open-popup6{

        width: 22%;
 }
.popup6{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img6{
        width: 50%;
        height: 100%;
    }

.btn-open-popup5{

        width: 22%;
 }

.popup5{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img5{
        width: 50%;
        height: 100%;
    }

.btn-open-popup4{

        width: 22%;
 }

.popup4{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img4{
        width: 50%;
        height: 100%;
    }

.btn-open-popup3{

        width: 22%;
 }

.popup3{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img3{
        width: 50%;
        height: 100%;
    }

.btn-open-popup2{

        width: 24%;
 }

.popup2{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img2{
        width: 50%;
        height: 100%;
    }
.btn-open-popup1{

        width: 22%;
 }
.popup1{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img1{
        width: 50%;
        height: 100%;
    }










    .container-text{
        width: 50%;
        height: 60%;
        padding: 80px;
    }
    
}


@media screen and (max-width: 500px){
   
.container-all{

   flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1000px;
        max-width: 1800px;
    }
  



.btn-open-popup14{

        width: 40%;
 }

 .popup14{
        flex-direction: ;
        height: 100%;
        max-height: 400px;
    }
    
    .img14{
        width: 50%;
        height: 100%;
    } 
.btn-open-popup13{

        width: 40%;
 }
.popup13{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img13{
        width: 50%;
        height: 100%;
    }
.btn-open-popup12{

        width: 40%;
 }
.popup12{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img12{
        width: 50%;
        height: 100%;
    }

.btn-open-popup11{

        width: 40%;
 }

.popup11{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img11{
        width: 50%;
        height: 100%;
    }
.btn-open-popup10{

        width: 40%;
 }
.popup10{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img10{
        width: 50%;
        height: 100%;
    }

.btn-open-popup9{

        width: 40%;
 }

.popup9{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img9{
        width: 50%;
        height: 100%;
    }
.btn-open-popup8{

        width: 40%;
 }

.popup8{
        flex-direction: column;

        height: 100%;
        max-height: 400px;
    }
    
    .img8{
        width: 50%;
        height: 100%;
    }

.btn-open-popup7{

        width: 40%;
 }

.popup7{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img7{
        width: 50%;
        height: 100%;
    }
.btn-open-popup6{

        width: 40%;
 }
.popup6{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img6{
        width: 50%;
        height: 100%;
    }


.btn-open-popup5{

        width: 40%;
 }
.popup5{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img5{
        width: 50%;
        height: 100%;
    }

.btn-open-popup4{

        width: 40%;
 }

.popup4{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img4{
        width: 50%;
        height: 100%;
    }

.btn-open-popup3{

        width: 40%;
 }
.popup3{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img3{
        width: 50%;
        height: 100%;
    }

.btn-open-popup2{

        width: 40%;
 }

.popup2{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img2{
        width: 50%;
        height: 100%;
    }
.btn-open-popup1{

        width: 40%;
 }

.popup1{
        flex-direction: column;
        height: 100%;
        max-height: 400px;
    }
    
    .img1{
        width: 50%;
        height: 100%;
    }





.container-text{
        padding: 20px;
    }
    
    .container-text h1{
        font-size: 20px;
    }
    
    .container-text p{
        font-size: 12px;
    }
}



.logovela1{
  flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1000px;
        max-width: 1800px;
    }

.logovela2{
  flex-direction: column;
        height: 80%;
        width: 80%;
        max-height: 1000px;
        max-width: 1800px;
    }








    .container-text{
        padding: 20px;
    }
    
    .container-text h1{
        font-size: 20px;
    }
    
    .container-text p{
        font-size: 12px;
    }
}



@media handheld, only screen and (max-width: 1200px) {
.velon {
display:none;
}
}

@media handheld, only screen and (max-width: 1200px) {
.velon2 {
display:none;
}
}


.pajaro {
  width: 3.11%;
  height: auto;
  position: absolute;
  top: 25%;
  left: 44%;
  z-index: 10;} 

.pajaro1 {
  width: 6.11%;
  height: auto;
  position: absolute;
  top: 30;
  left: 42%;
  z-index: 10;} 

.pajaro2 {
  width: 4.11%;
  height: auto;
  position: absolute;
  top: 0;
  left: 44%;
  z-index: 10;} 




#esp7 {
  left: 48%; }

#esp8 {
  left: 52%; 
top:29%; }
#esp9 {
  left: 56%; 
top:22%; }
#esp10 {
  left: 53%; }

#esp11 {
  left: 49%; 
top:12%; }
#esp12 {
  left: 46%; }

#esp13 {
  left: 42%; }


.rayo{

 height: auto;
  left: 135.4%;
  position: absolute;
  top: -1400%;
  width: 250.82%;
  z-index: 0; }

}

.rayo img{
  width: 390%;
  height: auto;

}

.btn-open-popup1{
    position: absolute;
    top: 600%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
  
.img1{
    width: 40%;
    background-image: url(../image/img1.jpg);
    background-size: cover;
    background-position: center;
}



.btn-open-popup2{
    position: absolute;
    top: 589%;
    left: 82%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 20px;
    border-radius: 50px;}
   
.img2{
    width: 40%;
    background-image: url(../image/img2.jpg);
    background-size: cover;
    background-position: center;
}





.btn-open-popup3{
    position: absolute;
    top: 560%;
    left: 82%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img3{
    width: 40%;
    background-image: url(../image/img3.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup4{
    position: absolute;
    top: 459%;
    left: 77%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img4{
    width: 40%;
    background-image: url(../image/img4.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup5{
    position: absolute;
    top: 400%;
    left: 47%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img5{
    width: 40%;
    background-image: url(../image/img5.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup6{
    position: absolute;
    top: 343%;
    left: 65%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img6{
    width: 40%;
    background-image: url(../image/img6.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup7{
    position: absolute;
    top: 305%;
    left: 49%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img7{
    width: 40%;
    background-image: url(../image/img7.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup8{
    position: absolute;
    top: 245%;
    left: 85%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}

}

.img8{
    width: 40%;
    background-image: url(../image/img8.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup9{
    position: absolute;
    top: 186%;
    left: 74%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}

.img9{
    width: 40%;
    background-image: url(../image/img9.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup10{
    position: absolute;
    top: 139%;
    left: 9%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}

.img10{
    width: 40%;
    background-image: url(../image/img10.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup11{
    position: absolute;
    top: 118%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}
    
.img11{
    width: 40%;
    background-image: url(../image/img11.jpg);
    background-size: cover;
    background-position: center;
}
.btn-open-popup12{
    position: absolute;
    top: 68%;
    left: 24%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}

.img12{
    width: 40%;
    background-image: url(../image/img12.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup13{
    position: absolute;
    top: 79%;
    left: 80%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 10px 12px;
    border-radius: 50px;}

.img13{
    width: 40%;
    background-image: url(../image/img13.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup14{
    position: absolute;
    top: 245%;
    left: 10%;
    transform: translate(-50%, -50%);
    color: #D90C43;
    display: block;
    background: white;
    padding: 05px 20px;
    border-radius: 50px;}

.img14{
    width: 40%;
    background-image: url(../image/img14.jpg);
    background-size: cover;
    background-position: center;
}