@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
  --accent: orange;
  --bg2: rgb(28, 28, 28);
  --bg1: rgba(16, 16, 16, 1);
  font-size: 14px;
}
*{
    box-sizing: border-box;
}
body{
overflow-x:hidden;
margin: 0;
padding: 0;
background: black;
width: 100%;
min-width: 340px;
}
html {
    scroll-behavior: smooth;
  }
a{
    text-decoration: none;
}
a, li, h1, h2, h3, button{
    font-family: 'Lora', serif;
    font-weight:400;
}

h3{
    text-transform: uppercase;
    font-size: 1.6rem;
    margin:  0;
    text-align: center;
}
h2{
    text-transform: uppercase;
    font-size: 3rem;
    margin: 0 0 2rem 0;
    line-height: 3.3rem;
}
p, h4, label, input{
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 1.5rem;
}

@media screen and (max-width: 480px) {
    h2{
    font-size: 2.2rem;
    margin: 0 0 2rem 0;
    line-height: 2.3rem;
    }

}

p{
    text-align: justify;
}
.hidden{
    display: none !important;
}

video:focus{
    outline: 0;
}

.container{
    width: 80%;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}
.desk-hidden{
    display: none;
}

.mob-hidden{
    display: block;
}
@media screen and (max-width: 1280px) {
    .container{
    width: 90%;
    }
}
@media screen and (max-width: 480px) {
    .container{
    width: 95%;
    }

}

.my-btn{
    color: black;
    text-decoration: none;
    background: var(--accent);
    padding: .5rem 1.5rem;
    transition: .3s;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-size: 1.3rem;
}

.my-btn:hover{
    background: white;
    color: black;
}

.my-btn:focus{
    outline: 0;
}

/*---NAV---*/
navigation{
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    transition: .3s background-color;
}
@media screen and (max-width: 1024px){
.mob-nav-hide{
    transform: translateY(-100%);
    opacity: 0;
}
.desk-hidden{
    display: block;    
    }
    .mob-hidden{
    display: none;
}
}
.navbar_bg{
    background: var(--bg1);
}

navigation ul{
    padding: 0;
    width: 100%;
}
navigation li{
    list-style-type: none;
    display: inline-block;
    padding: 0 6px;
    cursor: pointer;
}

navigation li a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight:400;
    transition: 0.3s;
}
navigation li a:hover{
    color: var(--accent);
}

.nav-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-navlinks, .flags-social, .social{
    display: flex;
    align-items: center;
}
.logo-navlinks{
    width: 100%;
}
.logo-navlinks ul, .social{
    margin: 0px 16px;
}
.social{
    margin-right: 0;
}

.nav-logo{
    width:3rem
    
}
.flags{
    border-right: solid 1px white;
    padding: 0 16px;
    display: flex;
    
}
.flags img, .facebook, .flag {
    width: 1.5rem;
    margin: 0 .5rem;
    height: 100%;
    cursor: pointer;
    align-self:center;
}

.flex{
    display: flex;
}

.booking{
    width: 7rem;
    margin-left: 1rem;
}

.hamburger{
    width: 24px;
    cursor: pointer;
}

.nav-content{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

navigation .my-btn{
    font-size: 1rem;
    margin-left: 1rem;
    text-align: center;
    align-self: center;
}

.mob-book{
    margin: 0 1rem;
}
/*---mobile nav----*/
#mob-nav{
    box-sizing: border-box;
    display: none;
    justify-content: space-between;
    position: fixed;
    z-index: 500;
    width: 100%;
    padding: 1rem calc(2.5% + 1rem);
    transition: .3s;
    align-items: center;
}

.mob-nav-logo{
    width:2rem;
    height: 100%;
}

.mobile-nav-x{
    display: none;
    
}

.nav-mob-bottomspacer{
    display: none;
}

.mob-nav-menu-logo{
    width: 50%;
}

.mob-flags{
    display: flex;
    height: 100%;
    align-items: center;
}

.mob-flags a{
    font-size: 1rem;
}
@media screen and (max-width: 1024px) {
    #mob-nav{
        display: flex;
        }
   navigation{
    background: var(--bg1);
    box-sizing: border-box;
    padding: 0;
  }
    navigation ul li{
        margin: 1rem 0
    }
    navigation ul{
        padding: 2rem 0 1rem 0;
    }
    .nav-flex{
        height: 100vh;
        flex-direction: column;
    }
    .container{
    width: 95%;
    }
    .logo-navlinks{
        flex-direction: column;
    }
    .logo-navlinks ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mobile-nav-x{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: calc(1rem + (1rem - 10px)) 1rem 0 1rem;
    box-sizing: border-box;
}
    .nav-content{
        flex-direction: column;
        margin-top: calc(-1 * (1rem + 8px));
    }
    .flags-social{
        flex-direction: column;
    }
    .flags{
        border-right: 0;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
        padding: 1.5rem;
        width: 45%;
        display: flex;
        justify-content: center;
        
    }
    .social{
        margin: 2rem
    }
    .nav-mob-bottomspacer{
    display: flex;
    }
    navigation .my-btn{
    margin-left: 0;
    }
}
/*-------*/


#hero{
    height: 65vh;
    overflow: hidden;
    min-height: 400px;
}

#hero video{
    object-fit: cover;
    object-position: 50% 50%;
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: -10;
}

.hero-heading{
    height: 101%;
    background: rgba(0,0,0,0.75);
    transform: translateY(-100%);
}
.hero-heading-flex{
    display: flex;
    width: 100%;
    height: 65vh;
    min-height: 400px;
    justify-content: center;
    align-items: center;
}

.hero-heading-flex img{
    width: 40%;
}

#patrimonium-logo-opacity{
    transition: .05s;
}
@media screen and (max-width: 1024px){
    .hero-heading-flex img{
        width: 55%;
}
}
@media screen and (max-width: 480px){
    .hero-heading-flex img{
        width: 80%;
}
}




/*---- APARTMENT CARD-----*/
.apartment-grid{
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto min-content auto min-content;
    margin-top: -100px;
    transition: .3s;
    min-height: 35vh;
    margin-bottom:100px;
}

@media screen and (max-width: 1024px){
    .apartment-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media screen and (max-width: 480px){
    .apartment-grid{
    grid-template-columns: 1fr;
    margin-top: 1rem;
    margin-bottom:48px;
    }
}
#ambrus-closed{
    grid-area: 1/1/2/4;
}
#borbala-closed{
    grid-area: 1/4/2/7;
}
#cippora-closed{
    grid-area: 1/7/2/10;
}
#dagomer-closed{
    grid-area: 1/10/2/13
}
#evodia-closed{
    grid-area: 3/1/4/5
}
#frigyes-closed{
    grid-area: 3/5/4/9
}
#gellert-closed{
    grid-area: 3/9/4/13
}
@media screen and (max-width: 1024px){
    #ambrus-closed{
        grid-area: 1/1/2/3;
    }
    #borbala-closed{
        grid-area: 1/3/2/5;
    }
    #cippora-closed{
        grid-area: 3/1/4/3;
    }
    #dagomer-closed{
        grid-area: 3/3/4/5;
    }
    #evodia-closed{
        grid-area: 5/1/6/3;
    }
    #frigyes-closed{
        grid-area: 5/3/6/5;
    }
    #gellert-closed{
        grid-area: 7/1/8/3;
    }
}
@media screen and (max-width: 480px){
    #ambrus-closed{
        grid-area: 1/1/2/2;
    }
    #borbala-closed{
        grid-area: 3/1/4/2;
    }
    #cippora-closed{
        grid-area: 5/1/6/2;
    }
    #dagomer-closed{
        grid-area: 7/1/8/2;
    }
    #evodia-closed{
        grid-area: 9/1/10/2;
    }
    #frigyes-closed{
        grid-area: 11/1/12/2;
    }
    #gellert-closed{
        grid-area: 13/1/14/2;
    }

}

.apartment-info-card{
    background: var(--bg2);
    transition: .3s;
    display: grid;
    grid-template-columns: 1fr 3fr;
    width:100%;
    padding: 0 0;
    height:0px;
    overflow: hidden;
}

#ambrus, #borbala, #cippora, #dagomer{
    grid-area: 2/1/3/13;
}
#evodia, #frigyes, #gellert{
    grid-area: 4/1/5/13;
}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 480px){
    .apartment-info-card{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 1024px){
    #ambrus, #borbala{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    #cippora, #dagomer{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    #evodia, #frigyes{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 6;
        grid-row-end: 7;
    }
    #gellert{
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 8;
        grid-row-end: 9;
    }
}

@media screen and (max-width: 480px){
    #ambrus{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    #borbala{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    #cippora{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 6;
        grid-row-end: 7;
    }
    #dagomer{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 8;
        grid-row-end: 9;
    }
    #evodia{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 10;
        grid-row-end: 11;
    }
    #frigyes{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 12;
        grid-row-end: 13;
    }
    #gellert{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 14;
        grid-row-end: 15;
    }
}


.card-info{
    color: white;
    margin: 0 2rem;
    opacity: 0;
    transition: .3s opacity;
    
}
.card-info button{
    margin: 2rem 0 1rem 0;
}

.card-info h4{
    width: 100%;
    border-bottom: 1px solid var(--accent);
    margin: 0;
    padding: 1rem 0;
}
.card-info h4:nth-child(2){
    border-top: 1px solid var(--accent);
}


/*----- APARTMENT CARD ----*/

.apartment-card{
    background: var(--bg2);
    cursor: pointer;
    display: grid;
    grid-template-rows: min-content auto;
    overflow: hidden;
    border-bottom: 1rem solid black;
    transition: 0.3s; 
}
@media screen and (max-width: 1024px){
    .apartment-card{
        grid-template-rows: 30vh;
     }

    .apartment-card:nth-child(3),
    .apartment-card:nth-child(4){
       margin-top: 0px;
    }
}

@media screen and (max-width: 768px){
    .apartment-card{
        grid-template-rows: 20vh;
     }
}
@media screen and (max-width: 480px){
    .apartment-card{
       margin-top: 0px;
       display: block;
    }
}

.apartment-card-border{
    border-bottom: var(--bg2) !important;
}


.apartment-card-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:1.3rem 2rem 0 2rem;
    z-index: 10;
    background: var(--bg2);
    transition: .3s;    
}

@media screen and (max-width: 1360px){
    .apartment-card-inner{
        padding:1.3rem 1rem 0 1rem;
    }
}

.apartment-card-inner p{
font-family: 'Lora', serif;}

.apartment-card-letter{
    height: 7vh;
    min-height: 48px;
    object-fit: contain;
    transition: .3s;
}

.apartment-card-image{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: .3s;
    z-index: 1;
}

.drop-down{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 1px white;
    width: 100%;
    margin-top: 1.3rem;
    text-transform: uppercase;
    padding: 1rem 0
}

.drop-down p{
   margin: 0 0;
} 

.apartment-card:hover .drop-arrow{
    transform: rotate(90deg)
}
.drop-arrow{
    width: 2.5rem;
    transition: .3s;
}
.drop-open{
    transform: rotate(-90deg) !important;
}

@media screen and (max-width: 1400px){
    .drop-arrow{
        width: 2rem;
        transition: .3s;
    }
}

@media screen and (max-width: 1024px){
    .apartment-card-image{
        height: 30vh;
        max-height:30vh;
    }
}

@media screen and (max-width: 768px){
    .apartment-card-image{
        height: 20vh;
    }
}

@media screen and (max-width: 480px){
    .apartment-card-image{
        height: 30vh;
    }
}
/*----- card-gallery ----*/

.card-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 20vmin;
    /*grid-template-rows: repeat(4, 20vmin);*/
    gap: 1rem;
    padding: 0 2rem;
    transition: .3s opacity;
    opacity: 0;
    height: 100%;
}


@media screen and (max-width: 1024px){
    .card-gallery{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 768px){
    .apartment-info-card .card-gallery{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 480px){
    .apartment-info-card .card-gallery{
        grid-row-start: 2;
        grid-auto-rows: 50vmin;
    }

}

.lightbox-img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}


/*---LIGHTBOX----*/

#lightbox{
    position: fixed;
    z-index: 1001;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    padding: 10vmin;
    box-sizing: border-box;
}
@media screen and (max-width: 768px){
    #lightbox{
        padding: 3%;
    }
}

#lightbox.active{
    display: flex;
    justify-content: center;
    align-items: center;

}

#lightbox img{
    width: 100%;
  height: 100%;
  object-fit: scale-down;
}


/*--- Apartment info ---*/
.apartment-info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: white;
    gap: 4rem;
    margin: 100px 0;
}

@media screen and (max-width: 768px) {
    .apartment-info{
    grid-template-columns: 1fr;
    }}

/*---About us---*/
#about-us, #contact{
    background: white;
    background-image: url(img/texture.jpg);
    background-size: cover;
}

#about-us video{
    align-self: center;
}
.about-us{
    display: grid;
    grid-template-columns: 1fr 3fr;

    color: rgb(0, 0, 0);
    column-gap: 4rem;
    padding: 100px 0;
}

.about-us p{
   font-weight: 400;
}

@media screen and (max-width: 768px) {
    .about-us{
        grid-template-columns: 1fr;
    }
}

.about-video{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-us div:nth-child(1){
    align-self: center;
}

#about-us .drop-down{
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    width: 100%;
    margin-top: 1.3rem;
    text-transform: uppercase;
    padding: 1rem 0;
    cursor: pointer;
    transition: .3s;
    transition-delay: .3s;
    cursor: pointer;
}

#about-us .drop-down:hover .drop-arrow, #about-us .drop-down:focus .drop-arrow{
  transform: rotate(90deg);
}

.drop-down-gallery-open{
    border-bottom: 1px transparent !important;
}
#about-us .drop-down p{
    font-weight: 600;
    font-family: 'Lora', serif;
}
.about-us-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 23vmin);
    gap:1rem;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    height: 0;
    overflow: hidden;
    transition: .3s;
    transition-delay: .3s;
    opacity: 0;
    transition: .3;
}

.about-us-gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.gallery-open{
    height:100%;
    padding: 4rem 0;
    border-bottom: 1px solid black;
    opacity: 1;
}

@media screen and (max-width: 1400px){
    .about-us{
        grid-template-columns: 1fr 2fr;
    }
}
@media screen and (max-width: 1024px){
    .about-us{
        grid-template-columns: 1fr;
    }
    .about-video{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        margin-top:4rem;
    }
    .about-us-gallery{
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .gallery-open{
        padding: 0 0 4rem 0;
    }
}
@media screen and (max-width: 768px){
    .about-us-gallery{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(16, 33vmin);
    }
    
}
@media screen and (max-width: 480px){
    .about-us-gallery{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(27, 55vmin);
    }
    .about-us-gallery img{
        grid-column: span 1 !important;
    }
}

/*---- SURROUNDINGS ----*/

#surroundings{
    background: black;
    color: white;
    padding: 100px 0 86px 0;
}

.surroundings-grid{
    display: grid;
    grid-template-columns: 3fr 1.3fr;
    gap: 4rem;
}

.surroundings-card-grid{
    grid-row-start: 1;
    grid-column-start: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}

#surroundings .apartment-card{
    margin-top: 0;
}
.h3box{
    height: 4rem;
    display: flex;
    align-items: center;
}

.surroundings-info{
    /*margin-top:18vh;*/
    padding-bottom: 1rem;
    grid-column-start: 2;
    align-self: center;
}

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

    .surroundings-card-grid{
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1rem;
        grid-row-start: 2;
    }
    .surroundings-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .surroundings-info{
        align-self: center;
        padding-left: 0rem;
        grid-column-start: 1;
        grid-row-start: 1;
        margin-top:0;
    }
}
@media screen and (max-width: 768px){
    .surroundings-card-grid{
        grid-template-columns: 1fr 1fr;
        
    }
    .surroundings-info{
        align-self: center;
        
    }
    .surroundings-grid{
        grid-template-columns: 1fr;
    }
    .surroundings-info{
        align-self: center;
        padding-bottom: 1rem; 
    }
}

@media screen and (max-width: 480px){
    .surroundings-card-grid{
        grid-template-columns: 1fr;
    }
    .surroundings-info{
        align-self: center;
    }
}
/*---SURROUNDING GALLERY ---*/
.wellness{
    display: grid;
    grid-template-columns: 1fr 1fr;

    color: rgb(0, 0, 0);
    column-gap: 4rem;
    padding: 100px 0;
}

.wellness p{
   font-weight: 400;
}

@media screen and (max-width: 768px) {
    .wellness{
        grid-template-columns: 1fr;
        padding: 100px 0 50px 0;
    }
    .wellness h2{
        padding-top: 2rem;
    }
}

.wellness-img{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    display: grid;
}
.wellness-img img{
    width: 100%;
    display: block;
    align-self: center !important;
}
.wellness div:nth-child(2){
    align-self: center;
}
/*---SURROUNDING GALLERY ---*/

.surroundings-gallery{
    background: var(--bg2);
    grid-column-start: 1;
    grid-column-end: 4;
    padding-left: 2rem;
    padding-right: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    height: 0;
    overflow: hidden;
    transition: .3s;
}

.surroundings-gallery img, .surroundings-gallery .bereksource{
    opacity: 0;
    transition: .3s;
}

#arboretum{
    grid-row-start: 4;
    grid-template-rows: repeat(6, 16vmin);
}

#plain{
    grid-row-start: 2;
    grid-template-rows: repeat(4, 16vmin);
}

#lake{
    grid-row-start: 2;
    grid-template-rows: repeat(7, 16vmin);
}

#eger{
    grid-row-start: 4;
    grid-template-rows: repeat(3, 16vmin);
}

#tiszaszentimre{
    grid-row-start: 2;
    grid-template-rows: repeat(3, 16vmin);
}

#berekfurdo{
    grid-row-start: 4;
    grid-template-rows: 2rem repeat(3, 16vmin);
}
.bereksource{
    grid-column: span 4;
    color: white;
    display: flex;
}
.bereksource *{
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: white;
    align-self: center;
    padding-right: .5rem;
}

@media screen and (max-width: 768px){
    .surroundings-gallery{
        grid-template-columns: 1fr 1fr;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    #arboretum{
        grid-template-rows: repeat(12, 25vmin);
        grid-row-start: 6;
    }
    #plain{
        grid-row-start: 2;
        grid-template-rows: repeat(7, 25vmin);
    }
    #lake{
        grid-row-start: 4;
        grid-template-rows: repeat(14, 25vmin);
    }
    
    #eger{
        grid-row-start: 4;
        grid-template-rows: repeat(6, 25vmin);
    }
    
    #tiszaszentimre{
        grid-row-start: 2;
        grid-template-rows: repeat(5, 25vmin);
    }
    
    #berekfurdo{
        grid-row-start: 6;
        grid-template-rows: 2rem repeat(5, 25vmin);
    }
    .bereksource{
        grid-column: span 2;
    }
}

@media screen and (max-width: 480px){
    .surroundings-gallery{
        grid-template-columns: 1fr;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    #arboretum{
        grid-template-rows: repeat(24, 50vmin);
        grid-row-start: 12;
        grid-column-start: 1;
    }
    #plain {
        grid-template-rows: repeat(14, 50vmin);
        grid-row-start: 4;
        grid-column-start: 1;
    }
    #lake{
        grid-template-rows: repeat(44, 50vmin);
        grid-row-start: 6;
        grid-column-start: 1;
    }
    #eger {
        grid-template-rows: repeat(11, 50vmin);
        grid-row-start: 8;
        grid-column-start: 1;
    }
    #tiszaszentimre{
        grid-template-rows: repeat(10, 50vmin);
        grid-row-start: 2;
        grid-column-start: 1;
    }
    #berekfurdo {
        grid-template-rows: 2rem repeat(10, 50vmin);
        grid-row-start: 10;
        grid-column-start: 1;
    }
    .bereksource{
        grid-column: span 1;
    }
    .surroundings-gallery .lightbox-img{
        grid-column: span 1 !important;
    }
}

.apartment-open{
    height:100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1rem solid black;
}

.apartment-open .card-info,
.apartment-open .card-gallery,
.apartment-open img,
.apartment-open .bereksource{
    opacity: 1 !important;
    transition-delay: .2s !important;
}

/*---contact -----*/

.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 100px 0;
    gap: 8rem;
}

.contact-grid iframe{
    grid-column-start: 1;
    grid-column-end: 3;
}

@media screen and (max-width: 1024px){
    .contact-grid{
        column-gap: 0;
    }
}
@media screen and (max-width: 768px){
    .contact-grid{
        grid-template-columns: 1fr;
    }
    .contact-grid iframe{
        grid-column-start: 1;
        grid-column-end: 1;
    }
}

.contact-grid img{
    width: 100%;
    object-fit: cover;
    object-position: left;
    margin-top: 3rem;
}


.contact-info span{
    color: var(--accent);
    margin-right: 1rem;
}
.contact-info > div{
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bg2);
}
.contact-info a{
    color: black;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;

}
#contact h4{
    font-weight: 400;
    margin: 0;
}


label{
    font-weight: 700;
    text-transform: uppercase;
}
input.my-btn{
    font-family: 'Lora', serif;
}

input.my-btn:hover{
    color: white;
    background: var(--bg2);
}

.input-box, textarea{
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid black;
    color: black;
    outline: 0;
    padding: 1rem 0 .5rem 0 ;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    transition: .3s border;
}

.input-box:focus, textarea:focus{
    border-bottom: 1px solid white;
}

.form{
    display: grid;
}
.form-box{
    background: var(--accent);
    align-self: center;
}

.form-box .my-btn{
    background: black;
    color: white;
}

.form-box .my-btn:hover, .form-box .my-btn:focus{
    filter: invert(1)
}

.contact-info, .form-box{
    padding: 5rem;
}

.contact-info{
    padding-left: 0;
}
@media screen and (max-width: 768px){
    .contact-info{
        padding-left: 3rem !important;
    }
}

@media screen and (max-width: 730px){
    .contact-info, .form-box{
        padding: 3rem;
    }
    .contact-info{
        padding-left: 3rem !important;
    }
}

@media screen and (max-width: 400px){
    .contact-info, .form-box{
        padding: 2rem;
    }
    .contact-info{
        padding-left: 2rem !important;
    }
}

.form-control {
    display: block;
    width: 100%;
    height: 3rem;
    padding: .375rem 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: black;
    background-color: transparent;
    background-clip: padding-box;
    border:0;
    border-bottom: 1px solid #000000;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
select {
    width: 100px;
    float: left;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background: url(img/dwn-arrow.svg);
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: right 4px center;
}
.form-control:focus {
    border-bottom: 1px solid white;
    outline: none;
}

.date{
    background: transparent;
    outline: none;
    color: black;
    border: 0;
    border-bottom: 1px black solid;
    width: 100%;
    opacity: 1;
    height: 3rem;
    transition: .3s;
    font-weight: 400;
}

.date:focus{
    border-bottom: 1px white solid;
}

textarea {
    resize: vertical;
}
/*-- booking --*/

#booking{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background: rgba(0,0,0,0.8);
    top: 0;
    z-index: 2000;
}

#ifrm{
    width: 700px;
    overflow: auto;
}

#booking-form{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3rem;
    row-gap: 1.5rem;
}
.booking-x-container{
    display: flex;
    flex-direction: column;
    min-width: 600px;
    display: flex;
    max-height: 90vh;
    align-items: flex-end;
    overflow: auto;
}
#ifrm::-webkit-scrollbar {
    width: .5rem;
  height: .5rem;
  background-color: transparent;
}
#ifrm::-webkit-scrollbar-track {
    background-color: transparent;
}
#ifrm::-webkit-scrollbar-thumb {
    background-color: white !important;
  width: .5rem;
}

#booking-x-btn{
    cursor: pointer;
    display: block;
    position: relative;
    z-index: 3000;
    background: black;
    border-radius: 50%;
    padding: 6px;
    min-width: 32px;
    box-sizing: border-box;
    transition: .3s;
    float: right;
    transform: translate(4rem,-4rem);
}

#booking-x-btn:hover, #booking-x-btn:focus {
    filter: invert(1);
}

.span4{
    grid-column: span 4
}

.span2{
    grid-column: span 2
}

.span1{
    grid-column: span 1
}


@media screen and (max-width: 730px){
    #ifrm{
        
        width: 340px;
        
    }
    .booking-x-container{
        width: 340px;
        max-height: 80vh;
        padding:0 1rem;
    }
    .span4{
        grid-column: span 2
    }
    
    .span2{
        grid-column: span 2
    }
    
    .span1{
        grid-column: span 1
    }

    #booking-form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3rem;
        row-gap: 1.5rem;
    }
    #booking-x-btn{
        
        transform: translate(2rem,-2rem);
    }
    
}

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

    #booking-x-btn{
        
        transform: translate(1rem,-1rem);
    }
    
}

.form-group:focus label{
    color: white;
}


/*-------------CHCECKBOX----------------*/
.check{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3rem;
    padding-top: .5rem;
}

@media screen and (max-width: 730px){
    .check{
        grid-template-columns: 1fr 1fr;
    }    
}

.check input{
    cursor: pointer
}

.check label {
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  

  .check a{
    color: rgba(0,0,0,.8);
    cursor: pointer;
    font-weight: 400;
    text-decoration: underline;
    font-family: 'Roboto', sans serif;
    transition: .3s;
  }

  .check-container a:hover{
    color:  rgba(0,0,0,1);
  }

/*-- footer --*/

#footer{
    padding: 3rem 0;
}

#footer p, #footer a{
    color: white;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    transition: .3s;
}

#footer a:hover{
    color: var(--accent);
}

/*--- COOKIE ---*/
.cookie{
width: 100%;
    position: fixed;
    bottom: 0;
    padding: 1rem 0;
    background: #101010;
    border-top: 0;
    display: flex;
    justify-content: center;
    z-index: 4000;
    color: white;
}

.cookie-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.net-container {
    width: 80%;
    max-width: 1400px;
}

.cookie-text-logo {
    display: flex;
    justify-content: flex-start;
    padding-right: 12px;
}


.cookie a{
    color: white;
    font-family: 'Roboto', serif;
    text-decoration: underline;
}

.cookie-title{
    font-family: 'Lora', sans serif;
    text-align: left;
}

.cookie-content{
    margin: 1rem calc(15% - 70px) 0 0;
    text-align: left;
}
@media screen and (max-width: 560px){

    .cookie-container{
        flex-direction: column;
    }
    .cookie-title{
        text-align: center;
    }
    .cookie-content{
        margin: 1rem 0;
        text-align: center;
    }
}

#emplacementRecaptcha{
    display: none;
}


.privacy object{
    height: 99.5vh;
}

.privacydiv{
    display: grid;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.privacydiv > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.privacydiv img{
    width: 100px;
}