/*
Theme Name: Dom Catering Theme
Theme URI: http://localhost
Author: Dom
Author URI: 
Description: Creted for Dom Catering
Version: 1.0
*/


/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
 /**
  * Remove the margin in all browsers (opinionated).
  */

html{scroll-behavior: smooth;}
 body {
   margin: 0;
 }
 
 /* HTML5 display definitions
    ========================================================================== */
 /**
  * Add the correct display in IE 9-.
  * 1. Add the correct display in Edge, IE, and Firefox.
  * 2. Add the correct display in IE.
  */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 main,
 menu,
 nav,
 section,
 summary {
   /* 1 */
   display: block;
 }
 
 /**
  * Add the correct display in IE 9-.
  */
 audio,
 canvas,
 progress,
 video {
   display: inline-block;
 }
 
 /**
  * Add the correct display in iOS 4-7.
  */
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 progress {
   vertical-align: baseline;
 }
 
 /**
  * Add the correct display in IE 10-.
  * 1. Add the correct display in IE.
  */
 template,
 [hidden] {
   display: none;
 }
 
 /* Links
    ========================================================================== */
 /**
  * 1. Remove the gray background on active links in IE 10.
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
 a {
   background-color: transparent;
   /* 1 */
   -webkit-text-decoration-skip: objects;
   /* 2 */
 }
 
 /**
  * Remove the outline on focused links when they are also active or hovered
  * in all browsers (opinionated).
  */
 a:active,
 a:hover {
   outline-width: 0;
 }
 
 /* Text-level semantics
    ========================================================================== */
 /**
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
   border-bottom: none;
   /* 1 */
   text-decoration: underline;
   /* 2 */
   text-decoration: underline dotted;
   /* 2 */
 }
 
 /**
  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  */
 b,
 strong {
   font-weight: inherit;
 }
 
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 b,
 strong {
   font-weight: bolder;
 }
 
 /**
  * Add the correct font style in Android 4.3-.
  */
 dfn {
   font-style: italic;
 }
 
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 
 /**
  * Add the correct background and color in IE 9-.
  */
 mark {
   background-color: #ff0;
   color: #000;
 }
 
 /**
  * Add the correct font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 
 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
 sub {
   bottom: -0.25em;
 }
 
 sup {
   top: -0.5em;
 }
 
 /* Embedded content
    ========================================================================== */
 /**
  * Remove the border on images inside links in IE 10-.
  */
 img {
   border-style: none;
 }
 
 /**
  * Hide the overflow in IE.
  */
 svg:not(:root) {
   overflow: hidden;
 }
 
 /* Grouping content
    ========================================================================== */
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
 }
 
 /**
  * Add the correct margin in IE 8.
  */
 figure {
   margin: 1em 40px;
 }
 
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 hr {
   box-sizing: content-box;
   /* 1 */
   height: 0;
   /* 1 */
   overflow: visible;
   /* 2 */
 }
 
 /* Forms
    ========================================================================== */
 /**
  * 1. Change font properties to `inherit` in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
 input,
 select,
 textarea {
   font: inherit;
   /* 1 */
   margin: 0;
   /* 2 */
 }
 
 /**
  * Restore the font weight unset by the previous rule.
  */
 optgroup {
   font-weight: bold;
 }
 
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input {
   /* 1 */
   overflow: visible;
 }
 
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select {
   /* 1 */
   text-transform: none;
 }
 
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  *    controls in Android 4.
  * 2. Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 html [type=button],
 [type=reset],
 [type=submit] {
   -webkit-appearance: button;
   /* 2 */
 }
 
 /**
  * Remove the inner border and padding in Firefox.
  */
 button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
 [type=submit]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 /**
  * Restore the focus styles unset by the previous rule.
  */
 button:-moz-focusring,
 [type=button]:-moz-focusring,
 [type=reset]:-moz-focusring,
 [type=submit]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
 }
 
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
 legend {
   box-sizing: border-box;
   /* 1 */
   color: inherit;
   /* 2 */
   display: table;
   /* 1 */
   max-width: 100%;
   /* 1 */
   padding: 0;
   /* 3 */
   white-space: normal;
   /* 1 */
 }
 
 /**
  * Remove the default vertical scrollbar in IE.
  */
 textarea {
   overflow: auto;
 }
 
 /**
  * 1. Add the correct box sizing in IE 10-.
  * 2. Remove the padding in IE 10-.
  */
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */
 }
 
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 [type=number]::-webkit-inner-spin-button,
 [type=number]::-webkit-outer-spin-button {
   height: auto;
 }
 
 /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
 [type=search] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
   /* 2 */
 }
 
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 [type=search]::-webkit-search-cancel-button,
 [type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
 ::-webkit-input-placeholder {
   color: inherit;
   opacity: 0.54;
 }
 
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 ::-webkit-file-upload-button {
   -webkit-appearance: button;
   /* 1 */
   font: inherit;
   /* 2 */
 }
 
 html {
   overflow-x: hidden !important;
 }
 
 body {
   color: #474242;
   font-family: "Lato", sans-serif;
   background: #fff;
 }
 
 *, *:before, *:after {
   box-sizing: inherit;
 }
 
 a {
   text-decoration: none;
   transition: All 0.3s ease;
   color: #5F5757;
   text-decoration: underline;
 }
 
 a:hover {
   transition: All 0.3s ease;
   text-decoration: none;
 }
 
 /*Header*/
 h1, h2, h3, h4, h5 {
   margin: 0;
   padding: 0;
 }

 main{
  /* min-height: 100vh; */
  /* max-height: 100vh; */
  position: relative;
  z-index: 10;
  color: #fff;
  display: flex;
  flex-direction:column;
 }
 
 .section {
   text-align: center;
   vertical-align: middle;
   scroll-margin-top: 115px;

   @media only screen and (min-width: 845px) {
    scroll-margin-top: 130px;
   }

   @media only screen and (min-width: 1280px) {
    scroll-margin-top: 100px;
   }
 }
 

 /* Header */
.header{
  width: 100%;
  z-index: 1000;
  position: relative;
  transition: all 0.5s ease;
  position: fixed;
  top: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
  @media only screen and (min-width: 845px) {
    background: none;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }
}

.white-header{
  background: #fff;

  -webkit-box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.1); 
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.1);

  transition: all 0.5s ease;
}

.white-header .nav li a {
  color: #474242;
}

.white-header .logo-dark{
  display: block;
}

.white-header .logo-white{
  display: none;
}

.logo-white{
  display: block;
}
.logo-dark{
  display: none;
}

.white-header .mobile-menu{
  color: #474242;
  padding: 10px 0 ;
}

.white-header .hamburger-menu span{
  background: #474242;
}

.header .wrapper{

  @media only screen and (min-width: 1280px) {
    display: flex;
    width: calc(100% - 60px);
    /* align-items: flex-start;
    flex-wrap: wrap;
    align-content: space-between; */
    flex-direction: row;
    align-content: stretch;
    padding: 10px 30px;
    
  }

  @media only screen and (min-width: 1400px) {
    max-width: 1440px;
  }
}

.logo{
  display: inline-block;
  margin: 0 auto;
  padding: 8px 0;
  
  @media only screen and (min-width: 1280px) {
    padding: 0;
    margin: 0;
    width: 65%;
    text-align: left;
    /* position: absolute;
    left: 100px;
    top: 100; */
  }

  @media only screen and (min-width: 1400px) {

  }
}
.logo img{
  width: calc(100% - 16px);
  padding: 0 8px;
  height: auto;

  @media only screen and (min-width: 480px) {
    width: auto;
    max-width: 520px;
    max-height:65px;
    height: auto;
  }
  @media only screen and (min-width: 1280px) {
    max-height:60px;
  }

  @media only screen and (min-width: 1400px) {
    max-height:80px;
  }
}

/* Nav */
.nav-container{
  width: 100%;
  margin: 0 0 0 0 ;
  position: relative;
  
  @media only screen and (min-width: 1280px) {
    
  }
}

.spacer{width: 5vw;}

.nav{
  width: 100%;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  margin: 0;
  padding: 0;

  background: #fff;
  margin: 14px 0 0 0;
  position: absolute;
  top: 30px;
  left: 0;

  @media only screen and (min-width: 845px) {
    height: auto;
    opacity:1;
    background:none;
    overflow: auto;
    position: relative;
    display: inline-block;
    top: 0;
    padding: 12px 0;
    margin: 0;
  }

  @media only screen and (min-width: 1280px) {
    margin: 0;
    top: 0;
    display: flex;
    justify-content: end;
  }
}

.nav li{
  list-style: none;
  @media only screen and (min-width: 845px) {
    display: inline-block;
    margin: 0 4px;
  }

  @media only screen and (min-width: 1280px) {
    margin: 0 4px;
  }
}

.nav li:first-of-type{
  @media only screen and (min-width: 1280px) {
    margin: 0;
  }
}

.nav li:first-of-type a{
  @media only screen and (min-width: 1280px) {
    
  }
}

.nav li a{
  font-size: 16px;
  display: block;
  color: #474242;
  padding: 8px 0;
  border-bottom: 1px solid #cabcbc;
  text-decoration: none;

  @media only screen and (min-width: 845px) {
    display: inline-block;
    border: none;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    font-weight: 300;
    padding: 8px;
    border-radius: 100px;
    box-shadow: inset 0 0 0px #B98E64;
  }

  @media only screen and (min-width: 1280px) {
    color: #fff;
  }
}

.nav li a:hover{
  @media only screen and (min-width: 845px) {
    color: #fff;
    padding: 8px;
    border-radius: 100px;
    box-shadow: inset 0 -50px 0px #B98E64;
  }
}

.active{
  background: #B98E64;
  color: #fff !important;
}

.nav li.spacer{
  display: none;
}

.nav li.spacer a{
  box-shadow: none;
}

.active-menu{
  height: auto;
  opacity: 1;
  transition: all 0.5s ease;
}

.mobile-menu{
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  align-items: center;
  font-weight: 400;
  letter-spacing: 3px;
  font-size: 20px;
  color: #fff;
  padding: 10px 0;
  /* border-top: 1px solid #dcdcdc; */
  background-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  /* border-bottom: 1px solid #dcdcdc; */
  @media only screen and (min-width: 845px) {
   display: none;
  }
}

.mobile-menu img{
  position: relative;
  top: 6px;
  margin: 0 0px 0 0;
}

.hamburger-menu{
  width: 20px;
  display: flex;
  height: 15px;
  justify-content: space-between;
  flex-direction: column; 
  margin: 0 10px 0 0;
}
.hamburger-menu span{
  background: #fff;
  width: 100%;
  height: 2px;
}

/* Hero */

.hero{
  width: 100%;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-grow: 4;
  height: 100vh;    
  @media only screen and (min-width: 1280px) {
    height: 100vh;    
  }
}

.hero .content{

}

.hero .wrapper{
  display: flex;

  @media only screen and (min-width: 1280px) {
    padding: 200px 290px;
  }
}

.hero h1{
  line-height: 110%;
  font-size: 24px;
  padding: 0 24px;
  text-shadow: 0 0 20px #000;
  color: #fff;
  
  @media only screen and (min-width: 1280px) {
    font-size: 32px;
    line-height: 40px;
    max-width: 620px;
    margin: 0 auto;
  }
}

.get-a-quote{
  font-size: 20px;
  text-transform: uppercase;
  color: #474242;
  font-weight: 500;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 80px;
  display: inline-block;
  margin: 24px 0 0 0;
  padding: 16px 28px;
  text-decoration: none;
}

.get-a-quote:hover{
  background: #B98E64;
  color: #fff;
}

/* About */
.about{
  background: #FCFAF7;
  color: #5F5757;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0;
  }
}

.about-content{
  text-align: left;
  padding: 16px;
  
  @media only screen and (min-width: 1280px) {
    padding: 0 20px 0 0;
  }
}

.about-text{
    
}

.about-content p{
    font-size: 18px;
    line-height: 140%;
}

.about-img{
  padding: 16px;
  
  @media only screen and (min-width: 480px) {
    
  }

  @media only screen and (min-width: 1024px) {
    padding: 0 0;
    height: auto;
  }
}
.about-img img{
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.about h2{
  font-size: 40px;
}

.about .wrapper{

  @media only screen and (min-width: 768px) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
}

.intro-txt-services{
  text-align: left;
  color: #5F5757;
  align-self: flex-start;
  font-size: 18px;
  line-height: 140%;
  margin: 0 0 16px 0;


  @media only screen and (min-width: 1024px) {
    /* width: 60vw; */
    text-align: center;
  }
}

/* .intro-txt-services p{
  font-size: 18px;
  line-height: 140%;
} */

/* Menus */
.menus{
  background:#F2E4D9;
  padding: 16px;
  
  @media only screen and (min-width: 1024px) {
    background: #F2E4D9;
    padding: 40px 0;
    background-size: 30%;

  }
}

.menus h2{
  color: #5F5757;
  margin: 16px 0 24px 0;
  font-size: 40px;

  text-align: left;
  @media only screen and (min-width: 1024px) {
    
  }
}

.menus .content-info{
  text-align: left;
  color: #5F5757;
  align-self: flex-start;
  font-size: 18px;
  line-height: 140%;

  @media only screen and (min-width: 1024px) {
    
    
  }
}

.content-menu-info{
  line-height: 110%;
  align-self: start;
  width: 100%;
}

.menus .wrapper{

  @media only screen and (min-width: 768px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    align-content: center;
  }
}

.menus-img{

  @media only screen and (min-width: 768px) {
    width: 50% !important;
  }

}

.menu-intro{
  text-align: left;
    color: #5F5757;
    align-self: flex-start;
    font-size: 18px;
    line-height: 140%;
}

.intro{
  color: #5F5757;
  margin: 0 auto;
  padding: 16px 0;

  @media only screen and (min-width: 768px) {
    max-width: 1200px;
    padding: 40px 0;
  }
}



.sample-menus{
  background: #FDF8F4;
  padding: 16px;
  border-radius: 16px;
  @media only screen and (min-width: 1024px) {
    margin: 0 0 0 60px;
    min-width: 530px;
    max-width: 530px;
  }
}

ul.menus-container{
  display: block;
  position: relative;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0 0 0;
  }
}

ul.menu-tab{
  display: block;
  margin: 16px 0;
  padding: 0;
}

ul.menu-tab li{
  display: inline-block;
  list-style: none;
  margin: 0 4px 4px 0;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #5F5757;
  border-radius: 8px;
  cursor: pointer;
  transition: All 0.3s ease;

  @media only screen and (min-width: 1024px) {
    margin: 0 8px 12px 0;
    padding: 8px;
    font-size: 18px;
  }
}

ul.menu-tab li:hover{
  box-shadow: inset 0 0 0 3px #5F5757;
  transition: All 0.3s ease;
}

ul.menu-tab li.active{
  background: #5F5757;
  color: #fff;
}

.tab-christmas{
  width: 100%;
  box-shadow: none !important;
  padding: 0px !important;
}

.menu-christmas{
  width: 100%;
  display: block;
  text-align: center;
  background-color: #50664C;
  color: white;
  box-shadow: inset 0 0 0 1px #2E3E2B;
  color: #fff;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  margin: 8px 0 0 0;
}

.menu-christmas:hover{
  background-color: #799374;
  box-shadow: inset 0 0 0 3px #2E3E2B;
}

.menu-content{
  display: none;
}

.menu-content ul{
  margin: 0;
  padding: 0 0 0 16px;
}

.menu-content ul li{
  margin: 0 0 8px 0;
}

.box-active{
  display: block;
}

.services{
  background: #F7EFE8;
  padding: 16px;
  color: #5F5757;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0;
  }
}

.services h2{
  color: #5F5757;
  margin: 0 0 10px 0;
  font-size: 40px;
  text-align: left;

  @media only screen and (min-width: 1024px) {
   
    text-align: center;
  }
}

/* .services p{
  text-align: left;
  font-size: 16px;
  line-height: 140%;

  @media only screen and (min-width: 1024px) {
    padding: 0 0 16px 0;
    text-align: center;
  }

} */

.services-group{
  width: 100%;
  
  @media only screen and (min-width: 845px) {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
}

.service-unit{
  width: calc (100% - 32px);
  height: 40vh;
  position: relative;
  border-radius: 12px;
  margin: 0 0 16px 0;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-end;
  transition: All 0.3s ease;
  background: url() no-repeat center center;

  @media only screen and (min-width: 845px) {
    width: calc(32% - 32px);
    height: 45vh;
    align-content: flex-end;
  }
}

/* .service-unit:nth-of-type(1),
.service-unit:nth-of-type(2),
.service-unit:nth-of-type(3),
.service-unit:nth-of-type(4){

  @media only screen and (min-width: 845px) {
    width: 49%;
    height: 45vh;
    align-content: flex-end;
  }

} */

.service-unit::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(95, 87, 87, .65);
  transition: All 0.3s ease;
}

/* Hover effect on desktop */
@media only screen and (min-width: 1024px) {

  .service-unit:hover{
    
  }
  .service-unit::after{
    background: linear-gradient(0deg, rgba(71,66,66,1) 10%, rgba(71,66,66,0.5) 100%);
    opacity: .6;
    filter: blur(0px);
    backdrop-filter: blur(0px);
  }
  .service-unit:hover::after{
    opacity: 1;
    backdrop-filter: blur(3px);
  }
}

.service-unit h3{
  color: #fff;
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: left;
  font-size: 20px;
  text-transform: uppercase;
  border-bottom: 1px solid #fff;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  

  @media only screen and (min-width: 1024px) {
    border: none;
  }
}
.service-unit h3 span{
  display: block;
  font-size: 18px;
  font-weight: 500;
  text-transform: none;
}

.service-unit p{
  color: #fff;
  position: relative;
  z-index: 10;
  font-size: 17px;
  line-height: 130%;
  text-shadow: 0px 0px 11px #000;
  text-align: left;
  transition: All 0.7s ease;

  @media only screen and (min-width: 1024px) {
    border: none;
    max-height: 0;
    opacity: 0;
  }
  
}

.service-unit:hover p{
  
  @media only screen and (min-width: 1024px) {
    max-height: 500px;
    opacity: 1;
  }
}

.service-unit p::before{
  content: "";
  width: 0;
  height: 1px;
  background: #fff;
  position: absolute;
  top: -10px;
  left: 0;
  transition: All 0.5s ease;
  @media only screen and (min-width: 1024px) {
    
  }
}

.service-unit:hover p::before{ 
  width: 100%;
  @media only screen and (min-width: 1024px) {
    max-height: 500px;
    opacity: 1;
  }
}


.ser-private-dinners{
  background-image: url(../image/service-private-dinners.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.ser-corporate{
  background: url(../image/service-corporate.png) no-repeat center center;
  background-size: cover;
}

.ser-brand{
  background: url(../image/service-branded.png) no-repeat center center;
  background-size: cover;
}


.ser-office-lunch{
  background: url(../image/service-office-lunch.png) no-repeat center center;
  background-size: cover;
}

.ser-weddings{
  background: url(../image/hero-bg5.png) no-repeat center center;
  background-size: cover;
}

.ser-canapes{
  background: url(../image/service-canape.png) no-repeat center center;
  background-size: cover;
}

.ser-outdoor{
  background: url(../image/service-outdoor.png) no-repeat center center;
  background-size: cover;
}

.ser-event-planning{
  background: url(../image/service-event-planning.png) no-repeat center center;
  background-size: cover;
}

.ser-pop-up{
  background: url(../image/service-pop-up.png) no-repeat center center;
  background-size: cover;
  
}

/* gallery */
.gallery{
  background: rgba(255, 255, 255, 1);
  padding: 0;

  @media only screen and (min-width: 1024px) {
    padding:  0;
  }
}

.gallery h2{
  color: #5F5757;
  margin: 0 0 10px 0;
}


/* Clients */
.clients-section{
  background: #E5C9B3;
  padding: 16px;
  color: #5F5757;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0;
  }
}

.clients-section h2{
  color: #5F5757;
  margin: 0 0 10px 0;
  font-size: 40px;
}

.clients-container{
  display: block;
  display: flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
}

.clients-container li{
  list-style: none;
  align-items: center;
  margin: 16px;
}

.clients-container li img{
  height: auto;
  width: 70%;
  @media only screen and (min-width: 845px) {
    min-width: 160px;
    max-width: 170px;
    
  }
  
}




/* Contact */
.contact-section{
  background: #E0C1A9;
  padding: 16px;
  color: #5F5757;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0;
  }
}

.contact-section h2{
  color: #5F5757;
  margin: 0 0 10px 0;
  font-size: 40px;
}

.cta-contact{
  font-size: 20px;
  text-transform: uppercase;
  color: #474242;
  font-weight: 500;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 80px;
  display: inline-block;
  margin: 24px 0 0 0;
  padding: 16px 28px;
  text-decoration: none;
}

.cta-contact:hover{
  background: #B98E64;
  color: #fff;
}

/* .contact-section p{
  font-size: 16px;
  line-height: 140%;
} */

/* Footer */
.footer{
  width: 100%;
  text-align: center;
  background: #8D6A47;
  padding: 16px 0;
  color: #fff;
}

.footer .wrapper{
  
  @media only screen and (min-width: 1024px) {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 16px;
  }
  
}

.left-hand-panel{
  width: 100%;
  font-size: 14px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  align-content: stretch;
  gap: 8px;

  @media only screen and (min-width: 1024px) {
    width: 60vw;
    text-align: right;
    justify-content: right;
    align-content: normal;
  }
}



.left-hand-panel a{
  color: #fff;
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 6px 5px 8px 5px;
  background-color: rgba(255, 255, 255, .2);
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  @media only screen and (min-width: 1024px) {
    /* border: 0;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    text-decoration: underline; */
  }
  
}

.left-hand-panel a:hover{
  text-decoration: none;
  background-color: #51371E;
  border-color: transparent;
}

.left-hand-panel a img{
  position: relative;
  top: 4px;
  margin: 0 4px 0 0;

  @media only screen and (min-width: 1024px) {
    margin: 0 2px 1px 2px;
  }
}

.right-hand-panel{
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  padding: 6px 0;
  /* background: rgba(71, 66, 66, .7); */

  @media only screen and (min-width: 1024px) {
    width: 30vw;
    background: none;
    text-align: left;
  }
}

.right-hand-panel p{
  margin: 0 0 2px 0;
}


.suppliers{
  background: #EAD4C2;
  padding: 16px;
  color: #5F5757;
  font-size: 18px;
  line-height: 140%;

  @media only screen and (min-width: 1024px) {
    padding: 40px 0;
  }
}

.suppliers h2{
  color: #5F5757;
  margin: 16px 0 24px 0;
  font-size: 40px;
  text-align: left;

  @media only screen and (min-width: 1024px) {
   text-align: center;
  }

}

.intro-txt-supliers{
  text-align: center;
    color: #5F5757;
    align-self: flex-start;
    font-size: 18px;
    line-height: 140%;
    margin: 16px 0;
}

.supplier-description{
  text-align: left;

  @media only screen and (min-width: 1024px) {
   text-align: center;
  }
}

.supplier-group{
  color: #5F5757;
  width: 100%;
  

  @media only screen and (min-width: 1024px) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
  }
}

.supplier-unit{
  width: calc(100% - 40px);
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 16px 0;
  text-align: center;
  border: 1px solid #CCB19B;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supplier-unit img{
  width: 100%;
  max-width: 170px;
  height: auto;
}

.supplier-unit .supplier-description{
  opacity: 0;
  font-size: 16px;
  text-align: left;
  line-height: 130%;
  width: 250px;
  height: auto;
  background: #5F5757;
  padding: 8px;
  border-radius: 8px;
  color: #fff;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  display: none;
  @media only screen and (min-width: 1024px) {
    display: block;
    
  }
  
}

.supplier-unit:hover .supplier-description{
  opacity: 1;
}


.intro-txt-contact{
  text-align: center;
    color: #5F5757;
    align-self: flex-start;
    font-size: 18px;
    line-height: 140%;
    
}

 /*Wrapper*/
 .wrapper {
  width: 100%;
  text-align: center;
  
  @media only screen and (min-width: 845px) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  @media only screen and (min-width: 1024px) {
      width: 990px;
      margin: 0 auto;
     
  }

  @media only screen and (min-width: 1280px) {
      width: 1200px;
      margin: 0 auto;
  }

 }
 
 .content {
   line-height: 110%;
   align-self: center;
   width: 100%;
 }
 
 .title {
   font-size: 100px;
   letter-spacing: 10px;
 }
 
 .subtitle {
   font-weight: 300;
   font-size: 25px;
   letter-spacing: 5px;
 }

 #bg-slider{
  position: absolute;
  top: 0;
  left: 0;
  
 }
 
 

 /* Slider */
 #slider{
  margin:0;
  padding:0; 
}

.bg-slider{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: -1;
}
.bg-slider:before{
  content: "&";
  color: transparent;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(71,66,66);
  background: linear-gradient(180deg, rgba(71,66,66,.8) 0%, rgba(71,66,66,0.3) 100%);

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body.home .bg-slider:before{
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

/* #bg-home{
  background: url(../image/hero-img-mobile.png) no-repeat center right;
  background-size: cover;

  @media only screen and (min-width: 1024px) {
    background: url(../image/hero-img.png) no-repeat center center;
    background-size: cover;
  }

} */

#bg-home-desktop {
    display: none;
    
  }
  
  #bg-home-mobile {
    display: block;
  }
  
  @media only screen and (min-width: 1024px) {
    #bg-home-desktop {
        display: block;
    }
  
    #bg-home-mobile {
      display: none;
    }
  }

.skdslider {
  width:100%;
  height: 100vh !important;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  overflow:hidden;
}
.skdslider:before{
  content: "&";
  color: transparent;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(71,66,66);
  background: linear-gradient(90deg, rgba(71,66,66,0.5) 0%, rgba(71,66,66,0.7) 100%);
}

.skdslider .slide {
   display: none;
}

.skdslider .slide img {
   width: 100vw;
   height: 100vh;
   border:0;
   object-fit: cover;
}

.skdslider ul.slide-navs {
    bottom: 20px;
    left: 50%;
    position: absolute;
	  list-style-type: none;
    margin: 0;
    padding: 0;
}

.skdslider ul.slide-navs li {
  float: left;
	background: url("image/slide-bg.png") no-repeat scroll 0 0 transparent;
	height:12px;
	width:12px;
	margin-right:4px;
	cursor:pointer;
}
.skdslider ul.slide-navs li.active {
  background: url("image/slide-bg-active.png") no-repeat scroll 0 0 transparent;
}

.skdslider .slide-desc {
    background: url("image/slide_desc.png") repeat scroll 0 0 transparent;
    left: 0;
    padding: 0 15px 0 15px;
    position: absolute;
    bottom: 15%;
    max-width: 85%;
	  display:inline-block;
}
.skdslider .slide-desc > h2 {
    color: #CFDB0C;
    font-family: 'Oswald';
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
}

.skdslider .slide-desc > p {
    color: #FFFFFF;
    font-family: 'Oswald';
    font-size: 16px;
    line-height: 20px;
    margin-top: 5px;
}
.skdslider .slide-desc > p a.more {
  color:#990000;
	font-size:20px;
	text-decoration:none;
}
.skdslider .slide-desc > p a.more:hover {
  text-decoration:underline;
}

.skdslider a.prev{
  background: url("image/left.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:2%;
	margin-top:-17px;
}

.skdslider a.next{
  background: url("image/right.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	right:2%;
	margin-top:-17px;
}
.skdslider a.prev:hover {
  
}
.skdslider a.next:hover {
  
}

.skdslider a.play {
    background: url("image/play.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}

.skdslider a.pause{
  background: url("image/pause.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}

@media screen and (max-width:767px) {
	.skdslider .slide-desc > h2 {
		font-size: 20px;
		margin-bottom: 5px;
		margin-top: 5px;
	}
	
	.skdslider .slide-desc > p {
		font-size: 14px;
		line-height: 15px;
		margin-top: 5px;
	}
	.skdslider .slide-desc > p a.more {
		font-size:14px;
	}
}


.container-pop-up{
  width: 100vw;
  height: 100vh;
  background: rgba(34, 34, 34, .6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: center;

    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
   }
}
.box-popup{
  background: #fff;
  width: 90vw;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  max-width: 580px;
  margin: 20px 0 0 0;

}

.box-popup-image img{
  width: 100%;
  height: auto;
}

.close-cta{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  background: #fff;
  padding: 0;
  border-radius: 100px;
  text-align: center;
  line-height: 33px;
  font-size: 30px;
  color: #474242;
  text-decoration: none;
}

.pop-up-content{
  padding: 5px 15px;
  font-size: 19px;

  @media only screen and (min-width: 768px) {
    font-size: 24px;
  }
}

.pop-up-content h1{
  font-size: 27px;
  margin: 0 0 10px 0;

  @media only screen and (min-width: 768px) {
    font-size: 50px;
  }
}

.pop-up-content a{
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
  background: #B98E64;
  color: #fff;
  padding: 8px 0;
  border-radius: 80px;
  display: inline-block;
  margin: 15px 0;
  padding: 16px 28px;
  text-decoration: none;
}

.pop-up-content a:hover{
  background-color: #8D6A47;
}

.close-all{
  display: none!important;
}

.snapwidget-widget{
  height: auto;
}

.iframe-wrapper {
  overflow: hidden;
  padding-top: 16.6%; /* 16:9 */
  position: relative;
} 

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}





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


.main-wrapper{
  /* min-height: 100vh;
  max-height: 100vh; */
  position: relative;
  z-index: 10;
  color: #fff;
  display: flex;
  flex-direction:column;
  align-items: center;

  @media only screen and (min-width: 1280px) {
    align-items:  center;
  }
 }
 
 .section-inside {
   text-align: center;
   vertical-align: middle;
 }

/* Hero */

.containter-page{
  width: 95%;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-grow: 4;
  background: #fff;
  border-radius: 8px;
  margin: 160px 0 20px 0;
  color: #474242;
  z-index: 1;

  @media only screen and (min-width: 768px) {
    margin: 180px 0 30px 0;
   }

  @media only screen and (min-width: 1280px) {
    /* height: 100vh;*/
    height: auto;
    width: 60vw;
  }
}

.containter-page .wrapper{
  display: flex;

  @media only screen and (min-width: 1280px) {
    
  }
}


.get-a-quote{
  font-size: 20px;
  text-transform: uppercase;
  color: #474242;
  font-weight: 500;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 80px;
  display: inline-block;
  margin: 24px 0 0 0;
  padding: 16px 28px;
}

.get-a-quote:hover{
  background: #B98E64;
  color: #fff;
}

/* Footer */
.footer{
  width: 100%;
  text-align: center;
  background: #8D6A47;
  padding: 16px 0;
}

.footer .wrapper{
  
  @media only screen and (min-width: 1024px) {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 16px;
  }
  
}

.left-hand-panel{
  width: 100%;
  font-size: 14px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  align-content: stretch;
  gap: 8px;

  @media only screen and (min-width: 1024px) {
    width: 60vw;
    text-align: right;
    justify-content: right;
    align-content: normal;
  }
}



.left-hand-panel a{
  color: #fff;
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 6px 5px 8px 5px;
  background-color: rgba(255, 255, 255, .2);
  display: inline-block;
  font-size: 16px;

  @media only screen and (min-width: 1024px) {
    /* border: 0;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    text-decoration: underline; */
  }
  
}

.left-hand-panel a:hover{
  text-decoration: none;
  background-color: #51371E;
  border-color: transparent;
}

.left-hand-panel a img{
  position: relative;
  top: 4px;
  margin: 0 4px 0 0;

  @media only screen and (min-width: 1024px) {
    margin: 0 2px 1px 2px;
  }
}

.right-hand-panel{
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  padding: 6px 0;
  /* background: rgba(71, 66, 66, .7); */

  @media only screen and (min-width: 1024px) {
    width: 40vw;
    background: none;
    text-align: left;
  }
}

.right-hand-panel p{
  margin: 0 0 2px 0;
}



 /*Wrapper*/
 .wrapper-inside {
  width: 100%;
  text-align: center;
  
  @media only screen and (min-width: 1280px) {
   display: flex;
   align-items: center;
   justify-content: center;
  }
 }
 
 .content-inside {
   line-height: 110%;
   align-self: center;
   width: calc(100% - 32px);

   /* height: 52vh;
   overflow: scroll; */

   padding: 16px;
   text-align: left;
   font-size: 18px;
   line-height: 24px;
   font-weight: 300;

   @media only screen and (min-width: 1280px) {
    margin: 0 0 0 0;
    /* height: 75vh; */
    padding: 50px;
    overflow: auto;
    font-size: 20px;
    line-height: 28px;
    /* box-shadow: inset 0px -15px 10px -20px #666; */
   }
 }

 .content-inside h1{
  margin: 0;
  padding: 0 0 8px 0;
  color: #7E7676;
  border-bottom: 1px solid #7E7676;
  font-size: 24px;
  text-transform: uppercase;

  @media only screen and (min-width: 1280px) {
    font-size: 32px;
  }
 }

 .content-inside h2{
  font-size: 24px;
  color: #7E7676;
 }

 .content-inside ul{
  padding: 0 0 0 17px;
 }

 .content-inside ul li{
  padding: 0 0 8px 0;
 }
 
 .title {
   font-size: 100px;
   letter-spacing: 10px;
 }
 
 .subtitle {
   font-weight: 300;
   font-size: 25px;
   letter-spacing: 5px;
 }

 #bg-slider{
  position: absolute;
  top: 0;
  left: 0;
 }
 

.bg-slider{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.bg-slider:before{
  content: "&";
  color: transparent;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(71,66,66);
  background: linear-gradient(90deg, rgba(71,66,66,0.5) 0%, rgba(71,66,66,0.7) 100%);
}

#bg-about{
  background: url(../image/hero-bg2.png) no-repeat;
  background-position:  center center;
  background-size: cover;

  @media only screen and (min-width: 1280px) {
    background-position:  -400px center;
  }
}

#bg-menus{
  background: url(../image/hero-bg3.png) no-repeat center center;
  background-position:  center center;
  background-size: cover;

  @media only screen and (min-width: 1280px) {
    background-position:  -400px center;
  }
}

#bg-contact{
  background: url(../image/contact-thank-you.jpg) no-repeat center center;
  background-position:  center center;
  background-size: cover;

  @media only screen and (min-width: 1280px) {
    
  }
}

#bg-christmas{
  background: url(../image/christmas-bg.png) no-repeat center center;
  background-position:  center center;
  background-size: cover;

  @media only screen and (min-width: 1280px) {
    
  }
}

#bg-sustainability{
  background: url(../image/sustainability.png) no-repeat center center;
  background-position:  center center;
  background-size: cover;

  @media only screen and (min-width: 1280px) {
    
  }
}



#bg-contact-thankyou{
  background: url(../image/contact-thank-you.jpg) no-repeat center center;
  background-size: cover;
}

 @media only screen and (min-width: 1024px) {
   .wrapper {
     width: 990px;
     margin: 0 auto;
   }
 }
 @media only screen and (min-width: 1280px) {
   .wrapper {
     width: 1200px;
     margin: 0 auto;
   }
 }


/* Form */
.contact-form{
  margin: 0 auto;
  background: #F8F4F0;
  border-radius: 8px;
  padding: 8px;

  @media only screen and (min-width: 768px) {
    width: 100%;
    padding: 12px 20px;
  }
}
.contact-form a{
  text-decoration: underline;
  color: #B98E64;
}
.contact-form a:hover{
  text-decoration: none;
}

.form-group{
  display: block;
  margin: 0 0 16px 0;
}

.align-top{
  display: block;

  @media only screen and (min-width: 768px) {
    display: flex;
    align-items: flex-start;
  }
}

.form-group label{
  display: block;
  padding: 0 0 4px 0;
  font-weight: 400;
  color: #7E7676;
}

.full-width{
  width: 100%;
}

.half-width{
  width: 100%;
  margin: 0 0 8px 0;
  display: block;

  @media only screen and (min-width: 768px) {
    width: 100%;
    display: inline-block;
    margin: 0 8px 0 0;
  }
  
}

.half-width:last-of-type{
  margin: 0;
}

.third-width{
  width: 100%;
  margin: 0 0 8px 0;
  display: block;

  @media only screen and (min-width: 768px) {
    width: 100%;
    display: inline-block;
    margin: 0 8px 0 0;
  }
}

.third-width:last-of-type{margin: 0;}

.input-text{
  height: 48px;
  border: 1px solid #CFCDCD;
  border-radius: 4px;
  padding: 8px;
}

.input-textarea{
  height: 90px;
  border: 1px solid #CFCDCD;
  border-radius: 4px;
  padding: 8px;
}


.radio-group{
  display: block;
  padding: 8px 0 8px 16px;
  background: #fff;
  border: 1px solid #CFCDCD;
  border-radius: 8px;
  margin: 0 0 8px 0;
}


.radio-group-side-align{
  width: 70px;
  display: inline-block;
}

.radio-group label{
  width: calc(100% - 25px);
  display: inline-block;
  padding: 0 0 4px 4px;
}

.radio-item{
  display: inline-block;
}

.checked{
  border: 1px solid #7E7676;
  box-shadow: inset 0px 0px 0px 1px #7E7676;
}

#name-error,
#email-error,
#location-error,
#tel-error,
#date-error,
#start-time-error,
#typeoffood-error,
#staffhire-error,
#requirecutlery-error,
#operationalkitchen-error
{
  color: #D31221;
  font-size: 17px;
}

#errortypefood label{
  color: #D31221;
  font-size: 17px;
}

.error{
  border-color:  #D31221;;
}

#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(../image/loading.gif) no-repeat center center;
  z-index: 10000;
}

.submit-button{
  background: #B98E64;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 80px;
  min-width: 180px;
  transition: All 0.3s ease;
  cursor: pointer;
}

.submit-button:hover{
  background: #8D6A47;
  color: #DCC3AA;
  transition: All 0.3s ease;
}

.submit-button:disabled{
  background: #b5b5b5;
  color: #fff;
  cursor: none;
}

.url-field{
  position: absolute;
  top: -8000px;
  left: -8000px;
}

.description-group{
  margin: 0;
}

 /* Slider */
 #slider{
  margin:0;
  padding:0; 
}

.skdslider {
  width:100%;
  height: 100vh !important;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  overflow:hidden;
}
.skdslider:before{
  content: "&";
  color: transparent;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(71,66,66);
  background: linear-gradient(90deg, rgba(71,66,66,0.5) 0%, rgba(71,66,66,0.7) 100%);
}

.skdslider .slide {
   display: none;
}
.skdslider .slide img {
   width: 100vw;
   height: 100vh;
   border:0;
   object-fit: cover;
}

.skdslider ul.slide-navs {
    bottom: 20px;
    left: 50%;
    position: absolute;
	  list-style-type: none;
    margin: 0;
    padding: 0;
}

.skdslider ul.slide-navs li {
  float: left;
	background: url("image/slide-bg.png") no-repeat scroll 0 0 transparent;
	height:12px;
	width:12px;
	margin-right:4px;
	cursor:pointer;
}
.skdslider ul.slide-navs li.active {
  background: url("image/slide-bg-active.png") no-repeat scroll 0 0 transparent;
}

.skdslider .slide-desc {
    background: url("image/slide_desc.png") repeat scroll 0 0 transparent;
    left: 0;
    padding: 0 15px 0 15px;
    position: absolute;
    bottom: 15%;
    max-width: 85%;
	  display:inline-block;
}
.skdslider .slide-desc > h2 {
    color: #CFDB0C;
    font-family: 'Oswald';
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    text-transform: uppercase;
}

.skdslider .slide-desc > p {
    color: #FFFFFF;
    font-family: 'Oswald';
    font-size: 16px;
    line-height: 20px;
    margin-top: 5px;
}
.skdslider .slide-desc > p a.more {
  color:#990000;
	font-size:20px;
	text-decoration:none;
}
.skdslider .slide-desc > p a.more:hover {
  text-decoration:underline;
}

.skdslider a.prev{
  background: url("image/left.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:2%;
	margin-top:-17px;
}

.skdslider a.next{
  background: url("image/right.png") no-repeat scroll 0 0 transparent;
	width:35px;
	height:35px;
	display:block;
	cursor:pointer;
	position:absolute;
	top:50%;
	right:2%;
	margin-top:-17px;
}
.skdslider a.prev:hover {
  
}
.skdslider a.next:hover {
  
}

.skdslider a.play {
    background: url("image/play.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}

.skdslider a.pause{
  background: url("image/pause.png") no-repeat scroll center center transparent;
	width:35px;
	height:35px;
	display:none;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:48%;
	margin-top:-17px;
}
/*Some Responsive CSS */
@media screen and (max-width:767px) {
	.skdslider .slide-desc > h2 {
		font-size: 20px;
		margin-bottom: 5px;
		margin-top: 5px;
	}
	
	.skdslider .slide-desc > p {
		font-size: 14px;
		line-height: 15px;
		margin-top: 5px;
	}
	.skdslider .slide-desc > p a.more {
		font-size:14px;
	}
}

.medium-cta{
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
  background: #B98E64;
  color: #fff;
  padding: 8px 0;
  border-radius: 80px;
  display: inline-block;
  margin: 15px 0;
  padding: 8px 16px;
}

.medium-cta:hover{
  background-color: #8D6A47;
}

.separate{
  margin: 15px 0;
  color: #fff;
  border: 1px solid #bfbfbf;
}