/* CSS Document */

/* - - - - - - - - - - - - - - - - - - - - -

Title : FLAMING & CO.
URL : https://flamingandco.com.au/

Author : FOX DESIGN creative
URL: www.foxdesign.com.au

- - - - - - - - - - - - - - - - - - - - - */

/*----------------------------------------------------------------------------- 
Global Styles
-----------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea, blockquote,th,td { 
	margin:0;
	padding:0;
}
 
table {
	border-collapse:collapse;
	border-spacing:0;
}

html,body,div,dl,dt,dd,pre,form,fieldset,input,textarea,blockquote { 
	margin:0; 
	padding:0; 
}

html { 
	margin:0; 
	padding:0; 
	overflow: -moz-scrollbars-vertical;
}

html,body {
	margin:0;
	padding:0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

body,td,th,p,li,h2,h3,h4,h5 {font-family: 'Montserrat', sans-serif;  color: #000; }

body {
 	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px; background-color: #dcc7b5;
}

a { color: #000; text-decoration:none;}
a:hover { color: #000;}

h1 {padding: 20px 0; margin:0px;  font-weight: 700;  font-size:45px; line-height:45px; color:#eab8b3; text-transform: uppercase;}

h2 {padding-bottom: 20px; margin:0px; font-weight: 400; font-size:14px; line-height:35px; }

h3 {padding: 10px 0; margin:0px; font-size:26px; line-height:26px;  color:#fff;   text-align: left;}

h4 {padding: 10px 0; margin:0px; font-size:20px; line-height:20px;  color:#fff;   text-align:center; padding-bottom: 20px;}
 
fieldset { 	border: 0; }

a img{ border:none;}
hr {height: 1px; color: #e6e4e2;  }
 
p{ margin:0; padding-bottom: 26px; color:000; font-size:14px; line-height:24px; }
p a{ color:#000; text-decoration:underline; }

.clear { 
	clear: both; 
	font-size: 0; 
	height: 0; 
	line-height: 0; 
}

/* end of global*/

#wrap{ float:left; 
width:100%; height:100%; 
min-height:100%; 
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;
}
 
.wrap_general{ float:left; width:100%; height:auto;}
.wrap_general p{font-size: 14px; line-height:25px;}

@media screen and (max-width:960px) {
.wrap_general h2{width: 95%; padding-left: 5%;}
}


/* site content */
.site_wrap{  margin:0 auto; padding:50px 30px ;  max-width: 1200px; height:auto;   }

.site_left{float:left; width:50%; height:auto;filter: grayscale(100%);  }
.site_left:hover {  filter: grayscale(100%); }

.site_right{ float:left; padding: 0 3% 3% 3%; width:44%; height:auto;}

.site_right h1 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:45px; line-height:45px; color:#eab8b3; text-transform: uppercase;  }
.site_right h3 {padding: 20px 0; margin:0px; font-size:30px; line-height:36px;  color:#fff;   text-align: left;}
.site_right p{ margin:0; padding:15px 0; color:#ffffff; font-size:14px; line-height:20px;  }
 
.site_right p a { color: #fff; }
.site_right p a:hover { color: #e9b8b4;}

@media screen and (max-width:960px) {
 .site_wrap{   padding:30px  0px;  }
 .site_left{ width:100%;  }
 .site_right{width:100%; }
	}
 
 

/* header */
.header_wrap{float:left; background-color: #dcc7b5; padding-bottom: 50px;  width: 100%; height: auto; position: relative;}
.header_left{float: left; width: 80%; height: auto; }
.header_right{float:right; width: 20%; }

.site-logo_wrap{float:left; margin-bottom: 35px; width: 100%;  height: auto; }
.site-logo {
   width:200px; height: auto; cursor: pointer;
}
 
.nav_wrap{float:left; width: 100%; height: auto; }

.reservations-icon {
 float: right; 
  z-index: 2;
  cursor: pointer;
 
}
.reservations_text a
{
 padding: 10px 15px;  display: block;
 font-size: 14px; line-height:14px; text-transform:uppercase;
  color: #fff;
text-align: center;
  background-color: #b4865e;
}
.reservations_text a:hover {
background-color: #d7804b;  }
 
@media screen and (max-width:960px) {
.header_wrap{ padding-bottom: 5px;  }
.header_left{ width: 100%; }
.site-logo_wrap{ padding: 10px 0 0 20px; width: 50%; }
.site-logo {
   width:150px; 
}
.reservations-icon {
 position:absolute;
 z-index: 2;
 right: 60px;
 top: 5px;
} 
 .reservations_text a
{
 padding: 8px 12px;  display: block; font-size: 12px; line-height:12px;  
}   
    
    }


/* home page */
.home-main_wrap{float:left; width: 100%; height: auto;}


/* Slider container */
.slider-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden; /* Hide overflowing slides */
}

/* Slide images */
.slides {
    display: none;
}

.slides img {
    width: 100%;
    height: auto;
}

/* Fade animation */
.fade {
    animation-name: fadeEffect;
    animation-duration: 1.0s;
}

@keyframes fadeEffect {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Number Icons at the bottom right */
.number-icons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.icon {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 12px; line-height: 10px; width: 10px; text-align: center;
}

.icon:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Active number */
.active {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
}

/*  main content */
.main_wrap{float:left; width: 100%; height: auto;; }
.main_left{float:left; width: 60%; height: auto; }
.reservations_left{float:left; width: 60%; height: auto; }
.main_right{float: right; width: 35%; min-height:100%; padding-bottom: 30px; position: relative; }
 
.main-right_footer{ float: left;  width: 100%; height: auto; padding-top: 30vh;  position: relative;  }
.main-right_footer_left{float: left; width: 80%; height:auto;}
.main-right_footer_right{position:absolute; right: 0; bottom: 0;  width: 20%; height:auto;}

 @media screen and (max-width:960px) {
.main_left{float:left; width: 100%; }
.reservations_left{ width: 100%; height:0; overflow: hidden;}
.main_right{float: right; width: 90%;  padding: 5%;  }
.main-right_footer{ float: left;  width: 90%; height: auto; padding-top: 0; padding-left: 10%;  }
.main-right_footer_left{ width: 100%; }
.main-right_footer_right{float: left; position: inherit;  width: 100%; height:auto; padding-top: 20px;  }
	}

/*  menu nav */
#menunav_wrap{float:left; width:100%;  height: auto; padding: 30px 0;}
.menunav {
     list-style: none;
     *zoom: 1;
	 position:relative;
	 float:left;
    width: 100%;
    height: auto;
}
.menunav:before,
.menunav:after {
    content: " "; 
    display: table; 
}
.menunav:after {
    clear: both;
}
 
.menunav ul {
    list-style: none;
    width: 100%;
	height: auto;
}
 
.menunav li {
    position: relative;
   width: 100%;
	height: auto;
	color: #000000;
	background:none;
	}

.menunav > li {
    float:left;
	z-index:50;
}
 
.menunav li a {
	width: 100%;
	line-height:20px;
	text-decoration:none;
	margin: 10px 0;
    padding: 10px 0 10px 5px;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
	font-size:16px;
    color: #000;
     
}
 
.menunav li a:hover { 
   color: #fff;
    background: #000;
		}	
	
.menunav > li > a {
    display: block; 
}
 
.menunav > li.hover > ul {
    left: 0;
} 
.menunav li.selected { 
		display: block;
		}
.menunav li.selected a { 
    color: #fff;
    background: #000;
	}
.menunav li.selected a:hover { 
	 color: #d58051; 
 	}
 

.menunav > li > a {
    display: block; 
}
 



/*  footer  */

.footer_wrap{float:left; width: 100%; height: auto; padding-bottom: 20px;  }

.footer{ float: left; width: 100%;  margin-top: 20px; padding-top: 20px; font-size: 14px; line-height: 20px;}
.footer_left{float:left;  width: 30%; min-height: 60px;  line-height: 20px;}
.footer_middle{float:left;  width: 40%; min-height: 60px;  line-height: 20px;}
.footer_right{float:right; padding-top:4em;  width: 20%; min-height: 60px; text-align:right;  line-height: 20px;}
 
.footer a{color: #000; }
.footer a:hover{color:#707070  }


@media screen and (max-width:960px) {
.footer{ float: left; width: 90%;  margin-top: 0px;padding-left: 5%; }
.footer_left{float:left;  width: 100%;    line-height: 20px;}
.footer_middle{float:left;  width: 100%; min-height: 60px;  line-height: 20px;   }
.footer_right{float:left;  width: 100%; padding-top:2em; }
	}

  

fix-bg {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	height:auto;
	min-height:100vh  /* 1vh — one equal 1/100 height of viewport.*/;
	float:left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  width:100%;
}
 

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

.submit{float:left; width: auto; height: auto; margin: 50px 0;}
  .submit a{
            background-color: #b4865e;
            color: #fff;
            padding: 8px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin: 20px 0;
        }
        .submit a:hover {
            background-color: #d7804b;
        }


 
    

/*  Subscribe */

.newsletter_wrap-out { float: left; width: 100%; border-top: solid #F3D6D7 1px; margin-top: 50px; padding-top: 50px;color: #fff; }
.newsletter_wrap{margin: 0 auto; padding: 20px 0; width: 100%; height: 100%;  }
.newsletter_left{float:left; width: 50%;}
.newsletter_right{float:right; width: 40%;}

.newsletter_wrap h3 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:35px; line-height:35px; color:#eab8b3; text-transform: uppercase;}

.newsletter_wrap h4 {padding: 20px 0; margin:0px;  font-family: 'Abril Fatface', cursive;  font-weight: 400; font-size:35px; line-height:35px; color:#999; text-transform: uppercase; text-align: left;}

.newsletter_wrap ul {list-style: none; margin: 0; padding: 0;}

.newsletter_wrap li {list-style: none; margin: 0; padding:15px 0; font-size: 28px; line-height: 28px; color: #999; text-transform: uppercase;  font-family: 'Abril Fatface', cursive; }
@media screen and (max-width:960px) {
.newsletter_left{float:left; width:100%;}
.newsletter_right{float:right; width: 100%;}
	}

/*  Video section  */
.video-wrap{float: left; width: 100%; height: 100vh; overflow: hidden;  text-align: center;}

video { 
height: 100vh;
        width: 100%;
        object-fit: cover; 
}