/*===================== TABLE OF CONTENT =======================
0.  Library CSS
1.  Reset Styling
2.  General Styling (All variable CSS)
3.  Header 1 ( 3 style)
4.  Home content (Home 1, Home 2, Home 3)
5.  Page default (Contact, About, ...)
6.  Sidebar (Shop, Post, Service, Project)
7.  Shop (Category, Single)
8.  Project (Category, Single)
9.  Footer
10. Responsive
=============================================================*/
/* Google fonts */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

/* Library CSS */
@import "libs/bootstrap/bootstrap.css";
@import "libs/awesome/font-awesome.css";
@import "libs/ionicons/ionicons.css";
@import "libs/owl-carousel/owl.carousel.css";
@import "libs/magnific-popup/main.css";
@import "libs/flexslider/flexslider.css";
@import "libs/camera/camera.css";

@import "reset-styles.css";
@import "general.css";

@import "header.css";
@import "pages.css";
@import "blog.css";
@import "shop.css";
@import "sidebar.css";
@import "event.css";
@import "rooms.css";
@import "home.css";
@import "footer.css";
@import "responsive.css";

/* Create three equal columns that floats next to each other */
.columnmenu {
    float: left;
    width: 200px;
    padding: 10px;
    background-color: #f5f5f5;
    height: 260px;


}

/* Clear floats after the columns */
.rowmenu2 {
width: 440px;
    content: "";
    display: table;
    clear: both;
}

.rowmenu3 {
width: 440px;
    content: "";
    display: table;
    clear: both;
}

.columnmenut3 {
    float: left;
    width: 207px;
    padding: 10px;
    background-color: #f5f5f5;
    height: 260px;


}

.columnmenut {
    float: left;
    width: 200px;
    padding: 10px;
    background-color: #f5f5f5;
    height: 260px;


}

.columnmenut2 {
    float: left;
    width: 240px;
    padding: 10px;
    background-color: #f5f5f5;
    height: 308px;


}

.columnmenu2 {
    float: left;
    width: 200px;
    padding: 10px;
    background-color: #f5f5f5;
    height: 160px;


}

.columnmenu a {
    float: none;
    color: #003f6b;
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}


/* Clear floats after the columns */
.rowmenu {
width: 400px;
    content: "";
    display: table;
    clear: both;
}
.bookbutton {
width:120px;
  height:40px;
background-color: #118acb;
text-transform: uppercase;
color: #ffffff;
padding: 6px;
margin: auto;
margin-top: 10px;
text-align: center;
}

.creditcard {
  width: 100%;
  height: 10px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  margin-top: 10px;
  line-height: 15px;

}


.wrapper-gallery {
    position: sticky !important;
}



.creditcardroom {
  width: 100%;
  height: 10px;
  margin-bottom:30px;
  text-transform: uppercase;
  font-size: 8.5px;
  text-align: center;
  line-height: 15px;
}













.bloc-video {
  position: relative;
  height: 29vh;
}

.bloc-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


  .bloc-video {
    display: none;
  }

  /* Styles for mobile */
  @media (max-width: 767px) {
    .bloc-video {
      display: block;
    }
  }
  
  
  .bloc-video2 {
  position: relative;
  height: 85vh;
}

.bloc-video2 video {
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: -1;
  position:absolute;
  height: 85vh;
}

  .bloc-video2 {
    display: none;
  }

  /* Styles for mobile */
  @media (min-width: 767px) {
    .bloc-video2 {
      display: block;
    }
  }
  
  
  
  
  .mobile-div {
    display: none;
  }

  @media (max-width: 767px) {
    .mobile-div {
      display: block;
    }
  }


.reservations {
    display: flex;
    align-items: center;
}
.reservations .icon {
    position: relative;
    top: 3px;
}
.reservations .icon span {
    font-size: 35px;
    color: #8e6d45;
}
.reservations .icon.color-1 span {
    font-size: 40px;
    color: #fff;
}
.reservations .text {
    margin-left: 20px;
}
.reservations .text p {
    font-size: 15px;
    margin: 0;
    
}
.reservations .text a {
    font-size: 18px;
    color: #8e6d45;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 1px;
}
.reservations .text a.color-1 {
    color: #fff;
}








/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnmenu {
        width: 100%;
        height: auto;
        background-color: #efefef;
    }
}



#masthead ul.sub-menu.third_menu {
    background-color: #e7e8eb !important;
}

#masthead ul.sub-menu.third_menu .rowmenu .columnmenu{
    background-color: #e7e8eb !important;
}


ul.sub-menu.third_menu .rowmenu .columnmenu {
    height: auto;
    padding: 10px 10px 22px;
    top: 12px;
    position: absolute;
    border: 1px solid;
    left: 0px;
}



nav .mobile_main_menu .nav.main-menu .sub-menu .rowmenu{
    width: 100% !important;
}

.post-description.p-3.mt-0 {
    background-color: #cccccc57;
}