html, body {height: 100%; }
body{font-family: 'Lora', serif; font-weight: 400; min-width: 320px; color:#252525;}
a{transition: all 0.2s ease-in-out 0s; color:#398c8e;}
a:hover{color:#6bafb0;}
h1,h2,h3,h4,h5,h6{font-weight: bold; color:#222; font-family: 'Poppins', sans-serif;}
.page-link{color:#009cfb;}
.page-item.active .page-link{background-color: #009cfb; border-color: #009cfb;}
.dropdown:hover .dropdown-menu {
     display: block;
}
 .navMain .dropdown-menu .nav-link {color: #000 !important;}


.text-white{color:#fff;}
.bg-primary{background:#5d9394 !important;}
.text-green{color:#4a7676;}
.pt-6{padding-top:4rem;}
.pb-6{padding-bottom:4rem;}
.pt-7{padding-top:5rem;}
.card{background:#eff4f4; padding:2.5rem; text-align: center; border:none; display: block; margin-bottom: 1rem; width: 100%;}
.button{background: #5d9394; color:#fff; padding:0.4rem 1.2rem; display: inline-block; text-decoration: none; box-shadow: 0 0 0 5px #5d9394, inset 0 0 0 1px #fff;}
.button:hover{color:#fff; background:#221f1f; box-shadow: 0 0 0 5px #221f1f, inset 0 0 0 1px #fff;}
.secHeading{line-height: normal; margin-bottom: 2rem;}
.secHeading h3{margin:0px; font-weight: 500;}
.secHeading h2{font-size: 3rem; border-bottom: 1px solid #252525; display: inline-block; position: relative;}
.secHeading h2:after{content:""; position: absolute; bottom:-5px; left:0px; width:100%; border-bottom: 1px solid #252525;}


.navbar-brand{margin:0rem; position: absolute; top:0px; left:50%; transform: translate(-50%,-5%);}
.navbar-brand-m{margin:0;}
.navMain{background: rgba(93,147,148,0.9) !important; position: fixed; width: 100%; z-index: 11;}
.navMain .nav-link{color:#fff !important; font-family: 'Poppins', sans-serif; font-weight: 500; padding:0.5rem 0.75rem !important;}
.navMain .navbar-toggler{border-color:#fff !important;}

.secBanner{background: url(../images/home-banner.jpg) no-repeat center center; background-size: cover; display: flex; align-items: center; justify-content: center; height:80vh;}
.secBanner .textContainer{ color:#fff; text-align: center; max-width: 540px; padding-top:3rem;}
.secBanner h1{text-transform: uppercase;}
.secBanner p{margin:0;}

.secIntro .card p{margin-bottom: 1.5rem;}

.secBooking .bg-primary{padding:5rem 3rem; text-align: center; color:#fff;}
.secBooking .bg-left{background: url(../images/food-right-bg.jpg) no-repeat center center; background-size: cover;} 
.secBooking .bg-right{background: url(../images/food-left-bg.jpg) no-repeat center center; background-size: cover;} 
.secBooking .button{font-size: 1.25rem; font-weight: 600;}
.secBooking .secHeading h2{border-bottom: 1px solid #fff;}
.secBooking .secHeading h2:after{border-bottom: 1px solid #fff;}


.secEvents article{border-bottom: 1px solid #cedfdf; padding-bottom: 2.4rem; margin-bottom: 2.5rem;}
.secEvents article:last-child{border-bottom: none;}
.secEvents article .title{font-weight: 500; }
.secEvents article .title a{text-decoration: none;}
.secEvents .address{position: relative; margin-bottom: 2.2rem; font-weight: 600;}
.secEvents .address::after{content: ""; position: absolute; width:60px; border-bottom: 3px solid #6d9e9f; left:0px; bottom: -10px;}
.cardDate{border:1px solid #9ebebf; text-align: center; font-size: 3rem; font-family: 'Poppins', sans-serif; line-height: 2.5rem; padding: 2rem 1.5rem; padding-top:2.5rem;}
.cardDate .month{display: block; line-height: normal; font-size: 1rem;}
.secEvents .img-event{transition: all .3s ease-in-out 0s;}
.secEvents .img-event:hover{opacity: 0.8;}





/*========== Inner Pages ============== */
.secBannerInner{height:450px; background: url(../images/inner-bg.jpg) no-repeat center top; background-size: cover; display: flex; justify-content: center; align-items: center;}
.secBannerInner .textContainer{color: #fff; text-align: center; max-width: 540px; padding-top: 3rem;}
.secBannerInner .textContainer h1{text-transform: uppercase; font-size: calc(2rem + 1.5vw);}
.dlHeading{display: inline-block; position: relative; border-bottom: 1px solid #221f1f; margin-bottom: 1rem; text-transform: uppercase;}
.dlHeading::after{position: absolute; content: ""; height:1px; width:100%; left:0px; bottom:-6px; border-bottom: 2px solid #221f1f;}
.row-about-sep{margin-bottom: 3.5rem;}
.owl-carousel .owl-item img{max-width: 100% !important; width:auto !important; margin:0 auto;}
.secAwards{background:#f0f5f5; padding-top: 2rem;}



.footer{background:#5d9395; color:#fff; padding:4rem 0rem 2rem;}
.footer a{color:#fff; text-decoration: underline;}
.footer a:hover{text-decoration: none;}
.foot-list-sm{list-style-type: none; margin:0px; padding:0px; display: flex; text-align: center; justify-content: center;}
.foot-list-sm li a{display: block; padding:0.3rem; margin:0.3rem 0.4rem; font-size: 1.75rem;} 
.foot-list-sm li a:hover{color:#231f1e;}
.copyrightText{border-top:1px solid #fff; margin-top:2rem; padding-top:1.5rem; font-size: 90%;}


.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 11px;
  line-height: 13px;
}
span.page-numbers.current {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #fff;
  background: #555;
}

a.page-numbers {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #fff;
  background: #555;
}
a{
  color: black;
  text-decoration: auto;
}

a.next.page-numbers {
  /* color: #222; */
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 6px 9px 5px 9px;
  text-decoration: none;
  width: auto;
  color: #fff;
  background: #555;
}

.blog_post_image a, .blog_post_image a img {
  display: block;
  line-height: 100%;
}
.date-box {
  float: left;
  margin: 0 15px 5px 0;
  padding: 10px 15px;
  text-align: center;
  border: 2px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

h3.event-title {
  margin: 0 0 6px;
  padding-top: 5px;
  
}
p {
  margin: 0 0 16px;
  line-height: 150%;
}
.blog_post_image {
  margin: 0 0 25px;
  padding: 0;
}

hr.headings {
  margin: 30px auto;
  background: url(images/Menu-Divider.png) no-repeat top center;
  height: 36px;
  margin-top: -30px;
  border: none!important;
}

.one_third {
  position: relative;
  float: left;
  width: 33.33%;
  padding: 5px;
  
  margin-right: -2px;
  
}
* {
  box-sizing: border-box;
} 


.flipCardsWrap{display: flex; justify-content: center; flex-wrap: wrap;}
.flip-card {
    background-color: transparent;
    width: 200px;
    height: 200px;
    perspective: 1000px;
    margin:1rem;
    position:relative;
  }
  .flip-card .overlayText{position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; color:#fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; text-shadow: 0px 0px 20px #000;}
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    cursor: pointer;
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #77BCBD;
    color: black;
  }
  
  .flip-card-back {
    background-color: #256F70;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flip-card-back a{
      color:#fff;
  }

  
/*extra css  */

.width-set {
  margin: auto!important;
}
@media (max-width: 1200px){
    .navbar-brand{position: static; transform:none; }
}
@media (max-width: 990px){
    .cardDate{padding:1rem 0.5rem; }
}
@media (max-width: 768px){
      .dropdown:hover .dropdown-menu {
           display: block;
     }
    .cardDate{display: none; }
    .secEvents .address{margin-bottom: 1.5rem;}
    .secEvents .img-event{margin-top:0.5rem;}
    .row-about-sep .dlHeading{margin-top: 1.5rem;}
    .flip-card{width:150px; height: 150px;}
}
@media (max-width: 575px){
    .secBanner .fs-5{font-size: 1rem !important;}
    .secBanner .textContainer{padding:0rem 1rem;}
    .flip-card{width:130px; height:130px; margin:0.5rem;}
}


@media (min-width: 575px){
    .secBanner h1{font-size: 2rem;}
    .secBanner{height: 80vh}
}
@media (min-width: 768px){
    .secBanner h1{font-size: 3rem;}
}
@media (min-width: 990px){
    .secBanner{height: 80vh}
    .secBanner h1{font-size: 3.75rem;}
}
@media (min-width: 1200px){
    .navMain{height:60px;}
}