#block-restaurant-zymphonies-theme-mobilemenu{
font-family: FontAwesome;
content: "\f0c9";
font-size: 30px;
position: absolute;
 right:10px;
 z-index: 900px;
 top: 10px;
display: none;
}

.container{
width: 100%;
padding-right: 0;
padding-left: 0;
}
.flexslider .slides img {
height: 500px;
-moz-user-select: none;
object-fit: cover;
}
.flex-caption{
width: 50%;
position: absolute;
top: 250px;
background: #ffffffd4;
padding: 10px;
left: 20%
}
.flexslider-caption-wrapper{
padding: 10px;
border:1px solid grey;
}
.service-wrapper{
display: inline-block;
width: 100%;
  position: relative;
  z-index: 1;
 padding-top: 20px;
}
#flexslider-1{
 margin: 0;
}
 .service-wrapper:before{
  content: " ";
  position: absolute;
  top: -30px; 
  left: 0;
  width: 100%; 
  height: 330px;  
  opacity: .2; 
  z-index: -1;
  background-image: url("../images/slide1.jpg");
 background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
.service-container{
 position: relative;
 width: 16.5%;
 float: left;
}
.service-image img{
 width: 95%;
 height: 200px;
 border-radius: 100px;
 object-fit: cover;
  transition-duration: 2s;
}
.service-image img:hover{
scale: 1.05;
}
.service-container{
 position: relative;
 width: 16.5%;
}

.service-icon{
 position: absolute;
 top: 13%;
 left: 25%;
 font-size: 100px;
 color: #ffffffc2;
 z-index: 9;
}
.webform-submission-bookings-form {
border-bottom: 3px solid red;
border-top: 3px solid red;
padding: 10px 0;
margin: 0 auto 50px auto;
border-width: 5px;
width: 90%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 0;
padding-right: 0;
padding-left: 0;
}
.map-block{
position: relative;
}
.map-block header{
 position: absolute;
 z-index: 100;
 background: white;
 top: 10px;
 width: 400px;
 padding: 20px 30px;
 left: 5%;
 border-radius: 5px;
 box-shadow: 1px 1px 3px 1px #d3d3d3d4;
 text-align: left
}
.map-block header h2{
 margin: 0;
 padding: 0 0 10px;
 color: red;
 text-align: center;
}
.contact-btn, .rooms-btn, .back-btn{
 border: 1px solid red;
 width: 50%;
 margin: 10px auto 20px;
 padding: 10px;
 color: red;
 transition: 2s;
 text-align: center;
 border-radius: 5px;
}
 .rooms-btn,
 .back-btn{width: 15%;}
.contact-btn:hover, 
.rooms-btn:hover,
.back-btn:hover{
color: white;
background: red;
}
.region-services{
position: relative;
}
#block-restaurant-zymphonies-theme-webform-2{
display: none;
position: absolute;
 z-index: 100;
top: 10px;
 left: 50%;
 background: white;
 padding: 20px 30px;
 border-radius: 5px;
 
}
.row {
margin-right: 0;
margin-left: 0;
}
.block {
margin-bottom: 0;
}
.page-title{
position: absolute;
 left: 20px;
}
.main-header {
background: #fff;
color: #000;
}
.service-title:before,
.service-title:after{
 top: 10px;
 content: url(../images/line_title_white_big.png);
 position: relative;
}
.page-top-title:before,
.page-top-title:after{
 content: url(../images/line_title_white_big.png);
 position: relative;
}
.service-title:before,
.page-top-title:before{
 margin-right: 30px;
}
.service-title:after,
.page-top-title:after{
 margin-left: 30px;
}

.menu-base-theme li a {
font-weight: unset;
text-transform: capitalize;
font-size: 1.3em;
}
.page-top{
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100%;
     margin-bottom: 5px;
}
.page-top-title{
position: absolute;
top: 80px;
z-index: 4;
font-size: 40px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
.page-top-text{
position: absolute;
top: 160px;
z-index: 4;
font-size: 25px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
width: 60%;
line-height: 1.3;
}
.page-middle{
  width: 100%; 
  height: 500px;   
  background-repeat: no-repeat;
  background-position: center;
  border-bottom: 2px solid red;
    margin: 5px 0;
background-size: 100%;
}
 #room-top{
  background-image: url("../images/room.jpg");
}
 #facilities-top{
background-image: url("../images/facilities.jpg");
background-position: bottom;
}
 #shamiani{
background-image: url("../images/Shamiani pemba.jpg");
}
#misali{
background-image: url("../images/misali.jpg");
}
#kwata{
background-image: url("../images/kwata.jpg");
}
#excursion-top{
background-image: url("../images/excursions.jpg");
}
 #meals-top{
background-image: url("../images/meal-top.jpg");
background-position: bottom;
}
 #about-top{
background-image: url("../images/about.jpg");
}
 #gallery-top{
  background-image: url("../images/gallery.jpg");
}
#about-top{
   background-image: url("../images/20221030_173523.jpg");  
   background-position: center;
}
 .main-menu {
background: #fff;
position: absolute;
top: 10%;
z-index: 200;
left: 10%;
border-bottom: none;
}
.main-header {
border-bottom: 2px solid red;
}
.region-primary-menu li.active a,.region-primary-menu li a.is-active {
color: red;
background: white;
}
.region-primary-menu li a {
color: #000;
}
.flexslider .flex-control-nav {
bottom: 10px;
}
.flexslider .flex-control-paging li a {
width: 15px;
height: 15px;
}
.page-container{
position: relative;
}
.caption-container{
 position: absolute;
 top:10%;
 width: 50%;
 right: 2%;
 background: #ffffffb5;
 padding: 1%
}
.meals-wrapper{
 width: 100%;
 margin-top: 0px;
 margin-bottom: 5px;
 box-shadow: 1px 0px 6px 0px #c6c6c6;
 height: 400px;
 overflow: hidden;
}
.meals-image{
width: 40%;
float: left;
}
.meals-image img{
width: 100%;
height: 400px;
object-fit: cover;
}
.meals-text{
 width: 60%;
 float: right;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 align-content: center;
 flex-wrap: nowrap;
 padding: 40px
}
.rooms-image{
 width: 100%
}
.rooms-image img{
 width: 35%;
 height: 300px;
 aspect-ratio: 2/3
}
.room-block-text{width:80%;margin: auto;font-size: 18px;padding: 10px;}
.room-rates-wrapper{
 width: 60%;
 margin: auto;
display: none;
}
.room-rates-container{
 width: 50%;
 float: left;
  padding: 20px 0;
}
.room-rates-container p, .room-rates-wrapper li{
text-align: left
}
.excursion-bottom{
width: 80%;
margin: auto;
}
.bottom-text{
width: 80%;
margin: 20px auto;
text-align: center;
font-size: 18px
}
.main-slideshow .flex-caption {
position: absolute;
font-size: 25px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 999;
width: 30%;
text-align: center;
font-size: 1em;
line-height: 150%;
color: #000;
background: #ffffff61;
background: rgb(255 255 255 / 73%);
padding: 2%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px #80808052;
-webkit-box-shadow: 0px 0px 2px 2px #80808052;
-moz-box-shadow: 0px 0px 2px 2px #80808052;
-o-box-shadow: 0px 0px 2px 2px #80808052;
}
.main-slideshow .flex-caption h2 {
font-size: 30px;
display: inline-block;
text-transform: capitalize;
color: black;
margin: 0;
line-height: 100%;
padding: 10px 0;
border-bottom: 4px solid black;
margin-bottom: 10px
}
.main-slideshow .slider-description {
display: inline-block;
clear: both;
font-size: 20px; 
}
.navbar-header {
width: 100%;
overflow: hidden;
}

.social-media-wrapper{
width: 100%;
display: block;
text-align: center;
font-size: 2.5em;
background: #000;
color: #666;
padding: 20px 0 10px 0;
}
.social-media {
text-align: center;
float: none;
}
.gallery-item img {
object-fit: cover;
width: 24%;
height: 300px;
}
.about{
 width: 90%;
 margin: 20px auto;
 font-size: 18px;
 text-align: center
}
.youtube-container{
 display: inline-flex
}
.gallery-tabs{
 display: flex;
 margin: 0 10px  5px 0;
 font-size: 1.3em;
 border-bottom: 1px solid grey;
 flex-direction: row;
 justify-content: center;
}
.gallery-photos,
.gallery-videos{
 padding: 15px;
}
.gallery-active{
 color: red;
 font-weight: 600;
 background: #eaeaea;
 border: 1px solid lightgrey;
}
.photo-container{
display: none;
}
.video-container {
text-align: center;
}
.social-media a {
color: white
}

@media only screen and (max-width: 1000px) {
 .main-menu {
top: 15%;
}
.excursion-bottom{
width: 90%;
margin: auto;
}
}
@media only screen and (max-width: 767px) {
.region-primary-menu {
width: 100%;
background: #ffffff;
margin-bottom: 0;
border-radius: 5px;
margin-top: 0;
display: none;
}
#block-restaurant-zymphonies-theme-mobilemenu{
display: block;
width: 40px;
}
.main-menu{
z-index: 900;
right: 0%;
position: relative;
}
.navbar-default .navbar-toggle {
display: none;
}
.page-top-title {
top: 20px;
}
.page-top-text {
font-size: 18px;
width: 95%;
}
.main-slideshow .flex-caption {
width: 60%;
}
.service-container {
 width: 33%;
}
.service-image img {
 height: 150px;
}
.flex-caption {
width: 60%;
top: 200px;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px #80808052;
-webkit-box-shadow: 0px 0px 2px 2px #80808052;
-moz-box-shadow: 0px 0px 2px 2px #80808052;
-o-box-shadow: 0px 0px 2px 2px #80808052;
}
.rooms-image img {
width: 48%;
height: 200px;
}
.rooms-btn, .back-btn {
width: 25%;
}
.map-block header {
top: 80px;
width: 180px;
left: 1%;
padding: 10px 2px;
font-size: 12px;
}
#block-restaurant-zymphonies-theme-webform-2 {
width: 100%;
position: unset;
}
input, button, select, textarea {
width: 200px;
}
.page-top {
background-size: 100% 300px;
height: 300px;
}
.meals-image {
width: 100%;
float: none;
}
.meals-wrapper {
height: fit-content;
}
.service-title:before,
.page-top-title:before,
.service-title:after,
.page-top-title:after{
 text-align: center;display: block;margin-right: 0;
}
.meals-text {
width: 100%;
}
.webform-submission-bookings-form {
padding: 10px 0;
margin: 0 auto 0px auto;
border-width: 5px;
width: 100%;
}
.service-icon {
top: 25%;
left: 25%;
font-size: 50px;
}
.gallery-item img {
 width: 48%;
}
}
@media only screen and (max-width: 500px) {
.flex-caption {
    top: 150px;
}
.gallery-item img {
 width: 100%;
}
.excursion-bottom{
width: 100%;
margin: auto;
}

#block-restaurant-zymphonies-theme-mobilemenu{
font-family: FontAwesome;
content: "\f0c9";
font-size: 30px;
position: absolute;
 right:10px;
 z-index: 900px;
 top: 10px;
display: none;
}

.container{
width: 100%;
padding-right: 0;
padding-left: 0;
}
.flexslider .slides img {
height: 500px;
-moz-user-select: none;
object-fit: cover;
}
.flex-caption{
width: 50%;
position: absolute;
top: 250px;
background: #ffffffd4;
padding: 10px;
left: 20%
}
.flexslider-caption-wrapper{
padding: 10px;
border:1px solid grey;
}
.service-wrapper{
display: inline-block;
width: 100%;
  position: relative;
  z-index: 1;
 padding-top: 20px;
}
#flexslider-1{
 margin: 0;
}
 .service-wrapper:before{
  content: " ";
  position: absolute;
  top: -30px; 
  left: 0;
  width: 100%; 
  height: 330px;  
  opacity: .2; 
  z-index: -1;
  background-image: url("../images/slide1.jpg");
 background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
.service-container{
 position: relative;
 width: 16.5%;
 float: left;
}
.service-image img{
 width: 95%;
 height: 200px;
 border-radius: 100px;
 object-fit: cover;
  filter: saturate(0);
  transition-duration: 2s;
}
.service-image img:hover{
filter: saturate(1);
}
.service-container{
 position: relative;
 width: 16.5%;
}

.service-icon{
 position: absolute;
 top: 13%;
 left: 25%;
 font-size: 100px;
 color: #ffffffc2;
 z-index: 9;
}
.webform-submission-bookings-form {
border-bottom: 3px solid red;
border-top: 3px solid red;
padding: 10px 0;
margin: 0 auto 50px auto;
border-width: 5px;
width: 90%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 0;
padding-right: 0;
padding-left: 0;
}
.map-block{
position: relative;
}
.map-block header{
 position: absolute;
 z-index: 100;
 background: white;
 top: 10px;
 width: 400px;
 padding: 20px 30px;
 left: 5%;
 border-radius: 5px;
 box-shadow: 1px 1px 3px 1px #d3d3d3d4;
 text-align: left
}
.map-block header h2{
 margin: 0;
 padding: 0 0 10px;
 color: red;
 text-align: center;
}
.contact-btn, .rooms-btn, .back-btn{
 border: 1px solid red;
 width: 50%;
 margin: 10px auto 20px;
 padding: 10px;
 color: red;
 transition: 2s;
 text-align: center;
 border-radius: 5px;
}
 .rooms-btn,
 .back-btn{width: 15%;}
.contact-btn:hover, 
.rooms-btn:hover,
.back-btn:hover{
color: white;
background: red;
}
.region-services{
position: relative;
}
#block-restaurant-zymphonies-theme-webform-2{
display: none;
position: absolute;
 z-index: 100;
top: 10px;
 left: 50%;
 background: white;
 padding: 20px 30px;
 border-radius: 5px;
 
}
.row {
margin-right: 0;
margin-left: 0;
}
.block {
margin-bottom: 0;
}
.page-title{
position: absolute;
 left: 20px;
}
.main-header {
background: #fff;
color: #000;
}
.service-title:before,
.service-title:after{
 top: 10px;
 content: url(../images/line_title_white_big.png);
 position: relative;
}
.page-top-title:before,
.page-top-title:after{
 content: url(../images/line_title_white_big.png);
 position: relative;
}
.service-title:before,
.page-top-title:before{
 margin-right: 30px;
}
.service-title:after,
.page-top-title:after{
 margin-left: 30px;
}

.menu-base-theme li a {
font-weight: unset;
text-transform: capitalize;
font-size: 1.3em;
}
.page-top{
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100%;
     margin-bottom: 5px;
}
.page-top-title{
position: absolute;
top: 80px;
z-index: 4;
font-size: 40px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
.page-top-text{
position: absolute;
top: 160px;
z-index: 4;
font-size: 25px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
width: 60%;
line-height: 1.3;
}
.page-middle{
  width: 100%; 
  height: 500px;   
  background-repeat: no-repeat;
  background-position: center;
  border-bottom: 2px solid red;
    margin: 5px 0;
background-size: 100%;
}
 #room-top{
  background-image: url("../images/room.jpg");
}
 #facilities-top{
background-image: url("../images/facilities.jpg");
background-position: bottom;
}
 #shamiani{
background-image: url("../images/Shamiani pemba.jpg");
}
#misali{
background-image: url("../images/misali.jpg");
}
#kwata{
background-image: url("../images/kwata.jpg");
}
#excursion-top{
background-image: url("../images/excursions.jpg");
}
 #meals-top{
background-image: url("../images/meal-top.jpg");
background-position: bottom;
}
 #about-top{
background-image: url("../images/about.jpg");
}
 #gallery-top{
  background-image: url("../images/gallery.jpg");
}
#about-top{
   background-image: url("../images/20221030_173523.jpg");  
   background-position: center;
}
 .main-menu {
background: #fff;
position: absolute;
top: 10%;
z-index: 200;
left: 10%;
border-bottom: none;
}
.main-header {
border-bottom: 2px solid red;
}
.region-primary-menu li.active a,.region-primary-menu li a.is-active {
color: red;
background: white;
}
.region-primary-menu li a {
color: #000;
}
.flexslider .flex-control-nav {
bottom: 10px;
}
.flexslider .flex-control-paging li a {
width: 15px;
height: 15px;
}
.page-container{
position: relative;
}
.caption-container{
 position: absolute;
 top:10%;
 width: 50%;
 right: 2%;
 background: #ffffffb5;
 padding: 1%
}
.meals-wrapper{
 width: 100%;
 margin-top: 0px;
 margin-bottom: 5px;
 box-shadow: 1px 0px 6px 0px #c6c6c6;
 height: 300px;
}
.meals-image{
width: 40%;
float: left;
}
.meals-image img{
width: 100%;
height: 300px;
}
.meals-text{
 width: 60%;
 float: right;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 align-content: center;
 flex-wrap: nowrap;
 padding: 40px
}
.rooms-image{
 width: 100%
}
.rooms-image img{
 width: 35%;
 height: 300px;
 aspect-ratio: 2/3
}
.room-block-text{width:80%;margin: auto;font-size: 18px;padding: 10px;}
.room-rates-wrapper{
 width: 60%;
 margin: auto;
display: none;
}
.room-rates-container{
 width: 50%;
 float: left;
  padding: 20px 0;
}
.bottom-text{
width: 80%;
margin: 20px auto;
text-align: center;
font-size: 18px
}
.main-slideshow .flex-caption {
position: absolute;
font-size: 25px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 999;
width: 30%;
text-align: center;
font-size: 1em;
line-height: 150%;
color: #000;
background: #ffffff61;
background: rgb(255 255 255 / 73%);
padding: 2%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.main-slideshow .flex-caption h2 {
font-size: 30px;
display: inline-block;
text-transform: capitalize;
color: black;
margin: 0;
line-height: 100%;
padding: 10px 0;
border-bottom: 4px solid black;
margin-bottom: 10px
}
.main-slideshow .slider-description {
display: inline-block;
clear: both;
font-size: 20px; 
}
.navbar-header {
width: 100%;
overflow: hidden;
}

.social-media-wrapper{
width: 100%;
display: block;
text-align: center;
font-size: 2.5em;
background: #000;
color: #666;
padding: 20px 0 10px 0;
}
.social-media {
text-align: center;
float: none;
}
.gallery-item img {
object-fit: cover;
width: 24%;
height: 300px;
}
.about{
 width: 90%;
 margin: 20px auto;
 font-size: 18px;
 text-align: center
}
.youtube-container{
 display: inline-flex
}
.gallery-tabs{
 display: flex;
 margin: 0 10px  5px 0;
 font-size: 1.3em;
 border-bottom: 1px solid grey;
 flex-direction: row;
 justify-content: center;
}
.gallery-photos,
.gallery-videos{
 padding: 15px;
}
.gallery-active{
 color: red;
 font-weight: 600;
 background: #eaeaea;
 border: 1px solid lightgrey;
}
.photo-container{
display: none;
}
.video-container {
text-align: center;
}
.social-media a {
color: white
}
.node--type-map .block-webform-block{
margin: auto;
width: 90%
}

@media only screen and (max-width: 1000px) {
 .main-menu {
top: 15%;
}
}
@media only screen and (max-width: 767px) {
.region-primary-menu {
width: 100%;
background: #ffffff;
margin-bottom: 0;
border-radius: 5px;
margin-top: 0;
display: none;
}
#block-restaurant-zymphonies-theme-mobilemenu{
display: block;
width: 40px;
}
.main-menu{
z-index: 900;
right: 0%;
position: relative;
}
.navbar-default .navbar-toggle {
display: none;
}
.page-top-title {
top: 20px;
}
.page-top-text {
font-size: 18px;
width: 95%;
}
.main-slideshow .flex-caption {
width: 60%;
}
.service-container {
 width: 33%;
}
.service-image img {
 height: 150px;
}
.flex-caption {
width: 60%;
top: 200px;
}
.rooms-image img {
width: 48%;
height: 200px;
}
.rooms-btn, .back-btn {
width: 25%;
}
.map-block header {
top: 80px;
width: 180px;
left: 1%;
padding: 10px 2px;
font-size: 12px;
}
#block-restaurant-zymphonies-theme-webform-2 {
width: 100%;
position: unset;
}
input, button, select, textarea {
width: 200px;
}
.page-top {
background-size: 100% 300px;
}
.meals-image {
width: 100%;
float: none;
}
.meals-wrapper {
height: fit-content;
}
.service-title:before,
.page-top-title:before,
.service-title:after,
.page-top-title:after{
 text-align: center;display: block;margin-right: 0;
}
.meals-text {
width: 100%;
}
.webform-submission-bookings-form {
padding: 10px 0;
margin: 0 auto 0px auto;
border-width: 5px;
width: 100%;
}
.service-icon {
top: 25%;
left: 25%;
font-size: 50px;
}
.gallery-item img {
 width: 48%;
}
}
@media only screen and (max-width: 500px) {
.flex-caption {
    top: 50px;
}
.gallery-item img {
 width: 100%;
}
.flexslider .slides img {
height: 400px;
}
.service-image img {
    height: 125px;
}
.slides img {
height: 400px;
}
.rooms-image img {
height: 160px;
}
 #edit-check-availability{
  position: relative;
  left: -30px
 }
 .main-slideshow .flex-caption {
    top: 200px;
}
.main-slideshow .flex-caption h2 {
font-size: 25px;
}
.main-slideshow .slider-description {
font-size: 18px;
}
}