html{
    width: 100%;
    height: 100%;
}

body{
     background-color: #15141b; 
     
 

}

 /* vgallery ano platanaki */
 .vgallery{
    grid-column: 1/-1;
    grid-row: 7/8;
    display: grid;
    grid-template-columns: repeat(8,minmax(1rem,1fr)) ;
grid-template-rows: repeat(4,9vw);
grid-gap: 1.6rem;
margin-top: 5.5rem;
background-color: #15141b;
padding:3rem;



}
.vgallery-img{
    width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
transition: 1s;
transition:opacity 0.5s ease;
transition:transform width height background-position background-size 1s ease;

}

.vgallery-img:hover{

opacity: 1;

filter: grayscale(100%);
transform: scale(1.1);
}


.vgallery-img-1{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.vgallery-img-2{
    grid-column: 6 / 7;
    grid-row: 3 / 4;
 
}


.vgallery-img-3{
    grid-column: 7 / 9;
    grid-row: 3 / 4;
}

    
.vgallery-img-4{
    grid-column: 7 / 9;
    grid-row: 1 / 3;
}

.vgallery-img-5{
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

.vgallery-img-6{
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

.vgallery-img-7{
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

.vgallery-img-8{
    grid-column: 5 / 6;
    grid-row: 3 / 5;
}


.vgallery-img-9{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}

    
.vgallery-img-10{
    grid-column: 3 / 5;
    grid-row: 4 / 5;
}

.vgallery-img-11{
    grid-column: 6 / 7;
    grid-row: 4 / 5;
}

.vgallery-img-12{
    grid-column: 7 / 9;
    grid-row: 4 / 5;
}

.vgallery-img-14{
    grid-column: 5 / 7;
    grid-row: 1 / 3;
}
/* vgallery ano platanaki */

#pinakasL{
width: 100%; 
margin-left: auto; 
margin-right: auto; 
margin-top: 5.5rem;
border-top: 0.1rem solid #555;
border-radius: 10rem;
}

#pinakasTDL{
border-top-left-radius: 50px;

}
#pinakasTDR{
border-top-right-radius: 50px;

}


#pinakasBDL{
border-bottom-left-radius: 50px;

}
#pinakasBDR{
border-bottom-right-radius: 50px;

}


@media(max-width: 768px){
#pinakasL{
    position: relative;
margin-top: 2rem;



}
}

.pinakasL2{
font-family: 'Josefin Sans', sans-serif;
}

.creator-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111;
    padding: 0 4rem;

}
.copyright-text{
    font-size: 1.3rem;
    color: #aaa;
}
.text-right {
    font-size: 1.4rem;
    color: #bbb;

}
.text-right i {
    font-size: 2rem;
    color: tomato;
    margin: .5rem;
}
text-right span{
    color: #000;

}
#container-ano{
    background-color: mediumpurple;
}
#container-green{
    background-color: rgb(97, 136, 38);
}


#container-orangeground{
    background-color: rgb(206, 49, 127);
}

#container-orangetop{
    background-color:#e25a4b;
}


#container-yellow{
    background-color: rgb(172, 187, 86);
}


.ano-nav-link{
    margin-left: 2rem;
    padding-top: 5rem;
    padding: 0.3rem;
    
    color: greenyellow;
    font-size: 1rem;
    text-align: center;
    border: 0.5px solid gainsboro;
    border-radius: 0.8rem;
}
.ano-nav-back{
    margin-left: 0.5rem;
    padding: .3rem;
    color: orange;
    font-size: 1rem;
    text-align: center;
    border: 0.5px solid gainsboro;
    border-radius: 0.8rem;
}
#book-btns{
    text-align: center;
    
}

label {
    margin-bottom: -0.5rem;
}
#villa-title{
    text-align: center;
}

/* @media(max-width: 300px){
    #villa-title{
       
    }
} */

/* model box */

.forms-wrapper{
    background-color: #eee;
    position: fixed;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    padding: 2rem;
    border: .1rem solid #34598f;
    border-radius: 0.3rem;
    display: none;
}
.show-btns-wrapper{
    display: flex;
    padding: 1rem;

}
.show-form-btn{
    flex: 0 1 50%;
background-color: #12376e;
font-size: 1.5rem;
color: #fff;
padding: 1rem;
text-transform: uppercase;
letter-spacing: 0.2rem;
text-align: center;
border: .1rem solid #eee;
cursor: pointer;


}
.form-heading{
    font-size: 2rem;
    color:#12376e;
    text-transform: uppercase;
    padding: .5rem 0 0 .2rem;
}

.forms-wrapper form{
    width: 31rem;
    height: 31rem;

    padding: .5rem;


}

.forms-wrapper form input:not(.form-btn){
  background-color: #fff;
color: #777;
padding: 1.3rem;
margin: .3rem 0;
border: .2rem solid #eee;
box-sizing: border-box;
outline: none;
}
.fullname-inputs-wrapper{
    display: flex;
}
.form-group {
    display: flex;
    width: 100%;

}

.fullname-inputs-wrapper input{
width: 100%;
}
.form-input{
    width: 100%;
}

.form-btn{
    width: 35%;
    background-color: #d38800;
    color: #fff;
    letter-spacing: .3rem;
    padding: 1rem;
    border: none;
    margin-top: .5rem;
}
.x-btn{
    font-size: 2rem;

color: #00154c;
font-weight: bolder;
position: absolute;
bottom: 3.3rem;
right: 3.5rem;
}

.login-form{
    display: none;
}

.show-signup-form{
    color: #888;
    background-color: #34598f;
    pointer-events: none;

}

#show-form:checked ~ .show-btns-wrapper .show-login-form{
    color: #888;
    background-color: #34598f;
    pointer-events: none;
   
}

#show-form:checked ~ .show-btns-wrapper .show-signup-form{
    color: #fff;
    background-color: #12376e;
    pointer-events: initial;
   
}
#show-form:checked ~ .signup-form{
    display: none;
}

#show-form:checked ~ .login-form{
    display: block;
}


#show-hide-forms:checked ~ .forms-wrapper{
    display: block;
    animation: animbook .5s;
}
#show-hide-forms:checked ~ .container-ano-book{
    pointer-events: none;
    opacity: .5;

}
.ano-nav-link label{
    cursor: pointer;
}




@keyframes animbook{
    0%{
        left: 40%;
        opacity: 40%;
    }
50%{
    left: 60%;
    opacity: 60%;
}
75%{
    left: 45%;
    opacity: 45%;
}
100%{
    left: 40%;
    opacity: 40%;
}
}

/* Orange ground style */

.vgallery-img-1-orangetop{

    grid-column: 3 / 6;
    grid-row: 1 / 6;
}

.vgallery-img-2-orangetop{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}


.vgallery-img-3-orangetop{
    grid-column: 6 / 9;
    grid-row: 1 / 4;
}

    
.vgallery-img-4-orangetop{
    grid-column: 6 / 9;
    grid-row: 4 / 6;
}

.vgallery-img-5-orangetop{
    grid-column: 1 / 3;
    grid-row: 3 / 6;
}

/* orangeground end */


/* orangetop start style */


.vgallery-img-1-oranget{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.vgallery-img-2-oranget{
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}


.vgallery-img-3-oranget{
    grid-column: 6 / 9;
    grid-row: 1 /3;
}

    
.vgallery-img-4-oranget{
  
    grid-column: 3 / 6;
    grid-row: 3 / 5;
}

.vgallery-img-5-oranget{
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

.vgallery-img-6-oranget{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}

.vgallery-img-7-oranget{
    grid-column: 6 / 9;
    grid-row: 3 / 5;
}

/* orangetopend */

/* green start */

.vgallery-img-1-green{
    grid-column: 6 / 9;
    grid-row: 3 / 7;
}

.vgallery-img-2-green{
    grid-column: 3 / 7;
    grid-row: 1 / 3;
}


.vgallery-img-3-green{
    grid-column: 3 / 6;
    grid-row: 3 / 7;
}

    
.vgallery-img-4-green{
    grid-column: 7 / 9;
    grid-row: 1 / 3;
}

.vgallery-img-5-green{
    grid-column: 1 / 3;
    grid-row: 3 / 7;
}

.vgallery-img-6-green{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    
}

/* green :end */

/* yellow :start */

.vgallery-img-1-yellow{
    grid-column: 3 / 7;
    grid-row: 4 / 9;
   
}

.vgallery-img-2-yellow{
    grid-column: 3 / 6;
    grid-row: 1 / 3;
}


.vgallery-img-3-yellow{
    grid-column: 3 / 6;
    grid-row: 1 / 4;
}

    
.vgallery-img-4-yellow{
    grid-column: 6 / 9;
    grid-row: 1 / 4;
}

.vgallery-img-5-yellow{
    grid-column: 7 / 9;
    grid-row: 4 / 9;
}

.vgallery-img-6-yellow{
    grid-column: 1 / 3;
    grid-row: 4 / 9;
}

.vgallery-img-7-yellow{
    grid-column: 1 / 3;
    grid-row: 1 / 4;
}