@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: 50%;
    left: 59%;
    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: 2;
}

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



}





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










 .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: 500px){
   
.container-all{

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





 .popup14{
        flex-direction: ;
        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%;
    }
.btn-open-popup8{

        width: 50%;
        height: 50%; }

.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%;
    }
.btn-open-popup6{


        width:45%;
        height: 05%;
    }
.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%;
    }

.btn-open-popup4{

        width: 100%;
        height: 50%; }

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

.btn-open-popup3{


        width:52%;
        height: 50%;
    }
.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{
        padding: 20px;
    }
    
    .container-text h1{
        font-size: 20px;
    }
    
    .container-text p{
        font-size: 12px;
    }
}




.btn-open-popup8{
href="./modal8.html";
    position: absolute;
    top: 45%;
    left: 27%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background:;
    padding: 05px 12px;
    border-radius: 50px;}
    
.img8{
    width: 40%;
    background-image: url(../img8.jpg);
    background-size: cover;
    background-position: center;
}



.btn-open-popup14{
href="./modal14.html";
    position: absolute;
    top: 119%;
    left: 52%;
    transform: translate(-50%, -50%);
    color: #030303;
    display: block;
    background: #d1b272;
    padding: 05px 12px;
    border-radius: 50px;}
    
.img14{
    width: 40%;
    background-image: url(../img14.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup13{
href="./modal13.html";
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #030303;
    display: block;
    background: #d1b272;
    padding: 05px 12px;
    border-radius: 50px;}
    
.img13{
    width: 40%;
    background-image: url(../img13.jpg);
    background-size: cover;
    background-position: center;
}













.btn-open-popup12{
href="./modal12.html";
    position: absolute;
    top: 42%;
    left: 82%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 12px;
    border-radius: 50px;}

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


.btn-open-popup11{
href="./modal11.html";
    position: absolute;
    top: 68%;
    left:84%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background:;
    padding: 05px 12px;
    border-radius: 50px;}
.img11{
    width: 40%;
    background-image: url(../img11.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup10{
href="./modal10.html";
    position: absolute;
    top: 45%;
    left: 74%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: inline-block;
    background: ;
    padding: 05px 12px;
    border-radius: 50px;}

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


.btn-open-popup3{
href="./modal3.html";
    position: absolute;
    top: 45%;
    left: 24%;
    transform: translate(-50%, -50%);
    color:#fff ;
    display:block;
    background: ;
    padding: 05px 12px;
    border-radius: 50px;
}

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

.btn-open-popup4{
href="./modal4.html";
    position: absolute;
    top: 47%;
    left: 76%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 20px;
    border-radius: 50px;}
    
.img4{
    width: 40%;
    background-image: url(../img4.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup7{
href="./modal7.html";
    position: absolute;
    top: 65%;
    left: 60%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background:;
    padding: 05px 20px;
    border-radius: 50px;}
    
.img7{
    width: 40%;
    background-image: url(../img7.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup6{
href="./modal6.html";
    position: absolute;
    top: 44%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 20px;
    border-radius: 50px;}
    
.img6{
    width: 40%;
    background-image:url(../img6.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup5{
href="./modal5.html";
    position: absolute;
    top: 46%;
    left: 72%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 20px;
    border-radius: 50px;}
    
.img5{
    width: 40%;
    background-image: url(../img5.jpg);
    background-size: cover;
    background-position: center;
}





.btn-open-popup9{
href="./modal5.html";
    position: absolute;
    top: 55%;
    left: 74%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 20px;
    border-radius: 50px;}
    
.img9{
    width: 40%;
    background-image: url(../img9.jpg);
    background-size: cover;
    background-position: center;
}


.btn-open-popup2{
href="./modal2.html";
    position: absolute;
    top: 46%;
    left: 65%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: #;
    padding: 02px 10px;
    border-radius: 50px;}
   
.img2{
    width: 40%;
    background-image: url(../img2.jpg);
    background-size: cover;
    background-position: center;
}

.btn-open-popup1{
href="./modal1.html";
    position: absolute;
    top: 55%;
    left:59%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: block;
    background: ;
    padding: 05px 12px;
    border-radius: 50px;}
   
.img1{
    width: 40%;
    background-image: url(../img1.jpg);
    background-size: cover;
    background-position: center;
}