    @font-face {
    font-family: 'DIN Alternate Bold';
    font-style: normal;
    font-weight: normal;
    src: local('DIN Alternate Bold'), url('DINAlternate-Bold.woff') format('woff');
    }
    
    .rpheader
    
{
margin-bottom: -5px;
}

    .rpheader a
    
{
    color: white;
}

    .rpheader a:hover
    
{
    color: orange;
}

.rowcontent-grid
{
    padding-top: 20px;
}

.coffeetext
{
width: 90%;
margin-left:auto;
margin-right:auto;
}

.coffeeclubbg
{

    background-color: black;
}

.blackbg
{
background-color: black;
}
.udatouttext
{
    padding: 10px;
    color: black;
    background-color: white;
    font-size: 1.4em;
}

.row-element4 .grid1
{
    background-color: red;
}

@media (max-width: 700px)
{
    
    .grid-style1
      {
      grid-template-columns: 100% !important;
      
        grid-template-areas: 
        
        'style5'
        'style1'
        'style2'
        'style3'
        'style4'
        !important;
      }
      
}

.actionsmallimage
{
    width: 100%;
}


/* Shop Specific Elements */

.checkoutbtn
{
  
    padding: 5px;
}


.cartbtn
{

    padding: 5px;
}


.titlespan a
{
    color: black;
}
.titlespan
{

   margin-top: 10px;
    margin-bottom: 10px;
}

.vouchers
{
      background-color: #e1effa;
}

body
{
background-color: var(--cssvariablea);
}

.vouchers h2
{
    color:  #046BAE; !important;
    font-family: 'Barlow Semi Condensed', sans-serif;

}

.soldoutbannertext
{
    
    color: white !important;
    background-color: #046BAE !important;
    text-align: center;
font-size: .6em !important;
}

.lastfewbannertext
{
        font-family: 'Hyperwave Three';
    color: white !important;
    background-color:  #046BAE !important;
    padding: 10px;
    position: relative;
    top: -290px;
    font-size: 2.5em;
    left: 10px;
}


.lastonebannertext
{
        font-family: 'Hyperwave Three';
    color: #046BAE !important;
    background-color: white !important;
      padding: 10px;
        position: relative;
    top: -290px;
    font-size: 2.5em;
    left: 10px;
}


/* End Shop */



.twocol-flex-sidebar
{
  display: flex;
  align-items: top;
 justify-content: space-between;
 margin-bottom: 40px;

}


.twocol-content-sidebarmain
{
   
    background: url("lacebg.png");
    background-repeat: repeat;

 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 20px;
 padding-right: 20px;
 margin-top: 40px;
 margin-bottom: 40px;
  flex-basis: 70%;
}

.twocol-content-sidebarside
{

margin-top: 40px;
flex-basis: 23%;
}

.form-row-element
{
    color: white !important;
    background-color: black !important;
}

.essentials h1
{
    font-size: 40px;
    font-weight: 100;
    color: white;
    line-height: 50px;
}

	
.grid-container
{
      display: grid;
  
}


.grid-style1
{
     grid-template-columns: 25% 25% 25% 25%;
    
    grid-template-areas: 
    
    'style1 style2 style5 style5'
    'style3 style4 style5 style5';
}


.grid-style2
{
    
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
    
    'style1 style1 style2 style4'
    'style1 style1 style3 style5';
}


.grid-style3
{
    
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
    
    'style1 style3 style3 style4'
    'style2 style3 style3 style5';
}


.grid-style4
{
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
    
    'style1 style1 style1 style2'
    'style1 style1 style1 style3';
}

.grid-style5
{
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
    
    'style1 style3 style3 style3'
    'style2 style3 style3 style3';
}

.grid-style6
{
    grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style3 style4'
    'style2 style3 style4';
}

.grid-style7
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style4'
    'style1 style3 style4';
}


.grid-style9
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style1 style2'
    'style3 style4 style4';
}

.grid-style11
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style3'
    'style4 style4 style4';
}

.grid-style14
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style2'
    'style1 style3 style3'
    'style1 style4 style4';
}

.grid-style8
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style3'
    'style4 style5 style6';
}


.grid-style12
{    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: 
    
    'style1 style1 style1 style2'
    'style3 style3 style3 style3';
}



.grid-style10
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style3'
    'style4 style5 style5';
}

.grid-style13
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style3'
    'style1 style2 style4'
    'style1 style2 style5';
}

.grid-style15
{grid-template-columns: 33% 33% 33%;
    grid-template-areas: 
    
    'style1 style2 style5'
    'style1 style3 style5'
    'style1 style4 style5';
}



.grid1 {grid-area: style1;}
.grid2 {grid-area: style2; }
.grid3 {grid-area: style3; }
.grid4 {grid-area: style4; }
.grid5 {grid-area: style5; }
.grid6 {grid-area: style6; }
.grid7 {grid-area: style7; }
.grid8 {grid-area: style8; }
.grid9 {grid-area: style9; }
.grid10 {grid-area: style10; }
.grid11 {grid-area: style11; }
.grid12 {grid-area: style12; }
.grid13 {grid-area: style13; }
.grid14 {grid-area: style14; }


h4
{
    background-color:  #f05c00 !important;
    color: white;
    padding: 20px;
    text-align: center;
    
}

.whatson h2
{
    color:  #046BAE !important;
    font-family: 'Barlow Semi Condensed', sans-serif;
}


.whatson
{
  background-color: white;
  margin-top: -90px !important;
}

.eventgrid
{


}

.udat-fullarticle-text img
{
    width: 100%;
    height: auto !important;
}

.newsheader
{
  background-image: url('oddiesbg.png');
  background-size: cover;
  padding-bottom: 120px;
}

.goto-top-btn
{
  border-radius: 6px;
  border: 2px solid white;
  background-color: black;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: white;
  padding: 8px;
  position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px;
z-index: 999;
}

.goto-top-btn:hover
{
    cursor: pointer;
  border-radius: 6px;
  border: 2px solid black;
  background-color: white;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: black;
  padding: 8px;
  position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px;
z-index: 999;
}


.newsarticle
{
  font-family: 'Barlow Semi Condensed', sans-serif;
        background-color:  #996632;
      padding-bottom: 40px;
      color: #d4cbc1;
      padding-top: 40px;
}

.whatson
{
  background-image: url('eventbg.png');
  background-size: cover;
  padding-bottom: 80px;
}


.row-categoryarticle
{
 background-color: #d4cbc1;
 padding-top: 30px;
}



.row-categoryarticle-alt
{
 background-color: #996632;
 padding-top: 30px;
}

.newslist-maintext
{
      font-family: 'Barlow Semi Condensed', sans-serif;
        color:  #996632;
      padding-bottom: 30px;
}

.newslist-headline
{
     font-size: 2em;
  color:  #996632;
  font-family: Tallitha Free;
  margin-bottom: 35px;
  padding-bottom: 20
}
  .udat-fullarticle-headline
  {
    padding-top: 30px;
       font-size: 2em;

    margin-bottom: 35px;
    padding-bottom: 20px;
  }



.newslist-headlinedate
{
  font-family: 'Barlow Semi Condensed', sans-serif;
    color:  #996632;
    font-weight: bold;
    padding-top: -20px;
  padding-bottom: 30px;
}

.udat-fullarticle-headlinedate
{
  font-family: 'Barlow Semi Condensed', sans-serif;

    font-weight: bold;
  padding-bottom: 30px;
      padding-top: -20px;
        color:  #d4cbc1;
}

.newslist-headlinedate-alt
{
  font-family: 'Barlow Semi Condensed', sans-serif;

    font-weight: bold;
  padding-bottom: 30px;
      padding-top: -20px;
        color:  #d4cbc1;
}


.newslist-link a
{

border-radius: 6px;
padding: 10px;
color: #3A3183;
border: 2px solid #3A3183;
text-decoration: none;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.newslist-link a:hover
{
background-color:#996632;
color: #d4cbc1;
}




.newslist-maintext-alt
{
      font-family: 'Barlow Semi Condensed', sans-serif;
        color:  #d4cbc1;
      padding-bottom: 30px;
}

.newslist-headline-alt
{
     font-size: 2em;
  color:  #d4cbc1;
  font-family: Tallitha Free;

  margin-bottom: 35px;
  padding-bottom: 20px;
}


h2
{
    font-weight: 400 !important;
    font-size: 30px !important;

    }

.newslist-link-alt a
{

border-radius: 6px;
padding: 40px;
color: #d4cbc1;
border: 2px solid #d4cbc1;
text-decoration: none;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.newslist-link-alt a:hover
{
background-color:#3CBCE1;
color: #3A3183;
}

.newtoparea
{
    background-image: url('yorkbg1.png');
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 30px;
}

.newtopwindowlogo
{
float:left;
width: 15%;
}

.newtopwindowright
{
float:left;
width: 85%;
text-align: right;
}



body
{
    overflow-x: hidden !important;
    width: 100% !important;;
  padding: 0px;
  margin: 0px;
  
  font-family: 'Barlow Semi Condensed', sans-serif;
}




.topnav a {
font-weight:200;
  float: left;

  color: black;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.hero-centre-headline
{
    font-size: 40px;
    color:  #d4cbc1;
    font-family: Tallitha Free;
    margin-top: 30px;
    padding: 10px;
    margin-bottom: 30px;
}

.topnav
{
margin-top: 15px;
padding-bottom: 10px;
}

.topnav a
{
    color: white;
        padding: 10px;
}

.listennowicon
{
    float:left;
    padding-left: 10px;
}



.listennowtext
{
    float:left;
    padding-top: 10px;
    padding-left: 10px;
}

.listennow a
{color: white;
    
}

.listennow
{
    margin-top: 30px;
padding: 10px;
  background-color: #046BAE;
  color: #Ffffff;
  width: 200px;
float: right;
text-align: center;
  font-size: 20px;
  font-family: DIN Alternate Bold;
}

.nowplaying
{
    color: white;
    float: right;
    
}

.topnav a:hover {

    
}

.topnav a:active {
  box-shadow: none;
  top: 5px;
}

.row-actioncols
{
    padding-top: 20px;
    padding-bottom: 50px;
}

.row-article
{
  padding-top: 10px;
  padding-bottom: 10px;

}

.row-element
{
  width: 100%;
  height: 100%;
  display: inline-block;

}

.row-content
{
max-width:   1280px;
margin-left: auto;
margin-right: auto;
}

.row-innercontent
{
  text-align: left;
  width: 100%;
}

.f1
{

}

.listnav a
{
  color:#d4cbc1;
  text-decoration: none;
  width: 100%;
  display: block;
  font-size: 1em;
  line-height: 1.5em;
}

.listnav a:hover
{
  color: #996632;
}

.f2
{


}

.article-newslistholder-item
{
  display: flex;
   align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 40px;
}

.article-newslistholder-item-alt
{
  display: flex;
   align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 40px;
}


.footerflex
{
  display: flex;
  justify-content: space-between;
}

.footer a
{
    color: white;
}

.navig
{
margin-top: -6px;
padding-bottom: 6px;
  background-color: #046BAE;
  color: #Ffffff;
  font-size: 10px;
  font-family: DIN Alternate Bold;
  
}

.footer
{

  background-color: black;
  width: 100%;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #Ffffff;
  font-size: 10px;
  font-family: DIN Alternate Bold;
}

.row-articles
{
  padding-top: 40px;
    color: #d4cbc1;

}

.galleryviewer
{
    margin-top: 40px;
    background-color: #eee;
    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 40px;
}

.gallery-item
{
    width: 46%;
    float:left;
    padding: 2%;
}

.gallery-item img
{
    width: 100%;
    float:left;
}

.gallery-vidwrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.gallery-vidwrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.row-twocols
{
 color: #666;
}


.row-wysiwyg-element
{


width: 100%;

      font-family: 'Barlow Semi Condensed', sans-serif;
      line-height: 2em;
      font-size: 1.2em;

}

.row-hero-left
{
    color: #ffffff;

}

.standard-page
{
    background-color: #d4cbc1;
      background-color: #996632;
}

.row-hero-right
{

      background-color: #d4cbc1;
}

#navigation-area
{


  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99;
}

.breakline
{
    display: none;
}





.row-element1
{

}

.row-element
{

}

.frontpage-woodbg
{


  color: white;
  padding-bottom: 80px;
}


.hero-left
{
  text-align: left;

}

@keyframes createBox {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}


.actiontext
{

  background-color: #FF6D21;
  color: #Ffffff;
  font-size: 20px;
 font-family: 'Barlow Condensed', sans-serif;
    bottom:0;
    width: 96%;
    padding: 2%;
}

.actionheadline
{
  font-size: 20px;
  width: 100%;
}
.actionsupport
{
  font-size: 15px;
  width: 100%;
}


.actionmainimage
{
    width: 100%;


      background-position: center bottom; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.actiongrid {
    width: 99%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 4% 6%;
  grid-template-areas: "BoxA BoxB" "BoxC BoxD" "BoxE BoxF";
}

.BoxA { grid-area: BoxA; }

.BoxB { grid-area: BoxB; }

.BoxC { grid-area: BoxC; }

.BoxD { grid-area: BoxD; }

.BoxE { grid-area: BoxE; }

.BoxF { grid-area: BoxF; }



.twocol-flex
{
      display: flex;
      
      justify-content: space-between;
}

.action-squares-flex
{
 display: flex;   
       justify-content: space-between;
}

.actioncol-flex
{
      display: flex;
      

      justify-content: space-between;
}


.hero-flex-left
{
      display: flex;
      min-height: 500px;
}

.hero-flex-right
{
      display: flex;
      min-height: 500px;
}

.whitearea
{
background-color: white;
background-image: none;
height: 500px;
}

.galleryheadline
{
    display: none;
}

.gallerydescription
{
    display: none;
}
.mainblue
{
    background-color: #2E89CC;
    color: white !important;
}

.mainblue .hero-left-content
{
      color: white !important;  
}

.mainblue .hero-left-headline
{
      color: white !important;  
}


.essentials
{
color: white;
   padding-top: 30px;
   padding-bottom: 30px;
  font-family: 'DIN Alternate Bold';
   background: linear-gradient(45deg, #a82682, #d44b7f, #263094, #85d6da, #98cbba, #efbd25, #d07654);
    background-size: 400% 400%;
    animation: gradient 60s ease infinite;

}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.blueleather::before{
   background: url("smcircle2.png")
      no-repeat center center;
   background-size: cover;
   content: "";
   width: 210vw;
   height: 210vw;
   top: -65vw;
   left: -80vw;
   position: absolute;
   z-index:1;
   animation: spin 30s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(-360deg);
   }
}

.blueleather
{
       position: relative;
    overflow: hidden;
   padding-top: 100px;
   padding-bottom: 100px;
  font-family: 'DIN Alternate Bold';
  background-image: url('newsmbg.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
background-size: cover;

}


.row-contact-form
{
    background-color: #dbd8ce;
   padding-top: 30px;
  font-family: 'DIN Alternate Bold';


}


.udatitemheadline-article
{
  display: none;
}

.hero-left-img
{
flex-basis: 30%;
margin-top: 20px;
margin-bottom: 20px;
  align-self: center;
}


.newslist-itemtext
{
   flex: 0 0 65%;
   padding-left: 5%;

 }

.newlist-img
{
   flex: 0 0 30%;
   margin-bottom: 35px;
   padding-bottom: 20px;
}
.newslist-img img
{
border-radius: 2%;

width: 100%;
 

}

.hero-left-img img
{
border-radius: 2%;

width: 100%;
 

}

.hero-right-img
{
flex-basis: 50%;
  align-self: center;
}

.hero-right-img img
{
border-radius: 2%;

width: 100%;
 
}






.hero-contentarea-right
{
    font-family: 'Barlow Semi Condensed', sans-serif;
  margin-top: 50px;
  margin-bottom: 50px;

width: 50%;
   padding-right: 5%;
  align-self: center;
    color:  #996632;
}


.udat-formsection
{
  padding-top: 20px;
  padding-bottom: 20px;

}

.udat-formlabel
{
float: left;

width: 55%;

}

.udat-frominput
{
  float: left;
  width: 10%;
}


@media screen and (max-width:990px) {
  .hero-flex-left { flex-wrap: wrap;  }
  .footerflex { flex-wrap: wrap;  }
.twocol-flex {flex-wrap: wrap;}
.actioncol-flex {flex-wrap: wrap;}
.article-newslistholder-item {flex-wrap: wrap;}



.newtoparea
{
    display: none;
}
.actionmainimage
{
  
}

.actiongrid
{
    padding-top: 30px;
    width: 100%;
}

.twocol-flex-sidebar
{
  flex-wrap: wrap;
  
}

.twocol-content-sidebarmain
{
  flex-basis: 100%;
}
.twocol-content-sidebarside
{
  flex-basis: 100%;
}

.gallery-item
{
    width: 96%;
    float:left;
    padding: 2%;
}


h2
{
    width: 100%;
    text-align: center;
}

.f1 {flex-basis: 100%; text-align: center;}
.f2 {flex-basis: 100%; text-align: center;}


.udatitemholder-single-fullarticleimage
{
    flex-basis: 100%;

}

.udatitemholder-single-fullarticletext
{
    flex-basis: 100%;

}

.newslist-headline-alt
{
  margin-top: 40px;
}


.newslist-headline
{
  margin-top: 40px;
}

.newslist-itemtext
{
  text-align: center;
flex-basis: 100%;
padding: 0px;ƒw
margin-left: 0px;
 }

.newslist-img
{

    flex-basis: 100%;
}

.newslist-img img

{
  width: 100%;
}

.twocol-content
{
  flex-basis: 100% !important;
  text-align: center;
  padding: 5px;
}

.actioncol-contenta
{
  flex-basis: 100% !important;
  text-align: center;

  
}

.actioncol-contentb
{
  flex-basis: 100% !important;
  text-align: center;

}


.actioncol-headline
{
  text-align: center;
}


.twocol-headline
{
  text-align: center;
}

  .hero-left-img { flex-basis: 100%; }
  .hero-contentarea-left { flex-basis: 100% !important;
      padding: 20px;
      text-align: center;
  }

.hero-flex-right { flex-wrap: wrap;  }
  .hero-right-img { flex-basis: 100%; }
  .hero-contentarea-right { flex-basis: 100%;
      padding: 20px;
      text-align: center;
  }


  .hero-centre-headline { font-size: 1.2em;}

  }

.hero-contentarea-left a
{

}

.hero-contentarea-left
{
    font-family: 'Barlow Semi Condensed', sans-serif;
flex-basis: 70%;
   padding-left: 5%;
  align-self: center;

   color:  white;
   margin-top: 30px;
   margin-bottom: 30px;
}


.hero-right-link
{
  padding-top: 20px;
  padding-bottom: 20px;
}



h6
{
    padding: 0px !important;
    margin: 0px !important;
  font-size: 20px;
  font-weight: 400;
  color:  white;
  font-family: 'Barlow Semi Condensed', sans-serif;
      text-transform: uppercase;

}

.hero-right-link a
{

border-radius: 6px;
padding: 10px;
color: #996632;
border: 2px solid #996632;
text-decoration: none;
}

.hero-right-link a:hover
{
background-color:#996632;
color: #d4cbc1;
}

p
{
    margin: 0px !important;
}

.udatitemtext p
{
    color: white;
}

.contactform-headline
{
  font-size: 2em;
  color:  white;


  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f05c00;

}

.otherstories
{
    background-color:#f2faff;
}

.article-headline
{
  font-size: 2em;
  margin-top: 35px;
  margin-bottom: 35px;
  padding-bottom: 20px;
}

.hero-right-headline
{
    font-size: 2em;
    color:  #996632;
    font-family: Tallitha Free;
    margin-top: 35px;
    margin-bottom: 35px;


}

@media screen and (max-width:500px)

{
    


    
  .mobilelinks a
  {
  width: 98%.row-content
  {
    width: 95% !important;
    padding: 2%;
  };
  float: left;
  margin-top: 15px;
  }

}

.hero-right-content
{
 font-size: 15px;
   line-height: 25px;

}

.hero-left-link
{
  padding-top: 20px;
  padding-bottom: 20px;
}

.hero-left-link a
{

border-radius: 6px;
padding: 10px;
color: black;
border: 2px solid black;
text-decoration: none;
}

.hero-left-link a:hover
{
background-color:black;
color: white;
}

.hero-left-headline
{
color: black;
 font-weight: 400;
    margin-top: 35px;

    margin-bottom: 35px;

}

textarea
{
  width: 40%;
  border-radius: 6px;

  border: 2px solid #f2faff;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'DIN Alternate Bold';
 outline:none;
}


input
{
  width: 40%;
  border-radius: 6px;

  border: 2px solid #f2faff;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'DIN Alternate Bold';
 outline:none;
}

select
{
  border-radius: 6px;
  color: ##996632;
  border: 2px solid #f2faff;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'DIN Alternate Bold';
 outline:none;
}

select:hover
{
    border: 2px solid black;
}

input:hover
{
    border: 2px solid black;
}

textarea:hover
{
    border: 2px solid black;
}

button
{
  border-radius: 6px;
  padding: 10px;
  font-family: 'DIN Alternate Bold';
  color: white;
  border: 2px solid #f2faff;
  text-decoration: none;
  font-size: 19px;
     background-color: #f05c00;
     cursor:pointer;
 overflow: hidden;
 outline:none;
}

button:hover
{
  border-radius: 6px;
  padding: 10px;
  color: black;
  background-color: #f2faff;;
  font-size: 16px;
  border: 2px solid #f2faff;
  text-decoration: none;
}

.twocol-headline
{
    font-size: 2em;
    color:  #d4cbc1;
    padding-top: 70px;

}

.mobileimg
{
display: none;
margin-left: auto;
margin-right: auto;
}

.essentials h2
{
    line-height: 40px;
    color: white !important;
    font-weight: 100 !important;
}

.twocol-content h1
{
    font-weight: 200 !important;
    line-height: 1.2em;
}

.twocol-content
{
flex: 0 0 49%;
 font-size: 15px;
   line-height: 25px;


   font-family: 'Barlow Semi Condensed', sans-serif;



  margin-top: 30px;
  margin-bottom: 30px;
}

.actioncol-contenta h1
{
    font-weight: 200 !important;
    line-height: 1.2em;
}

.actioncol-contenta
{
flex: 0 0 66%;
 font-size: 15px;
   line-height: 25px;


   font-family: 'Barlow Semi Condensed', sans-serif;



}


.actioncol-contentb h1
{
    font-weight: 200 !important;
    line-height: 1.2em;
}



.actioncol-contentb
{
flex: 0 0 32%;
 font-size: 15px;
   line-height: 25px;



   font-family: 'Barlow Semi Condensed', sans-serif;


}


.hero-centre-content
{
 font-size: 15px;
 color: white;
   line-height: 25px;
      font-family: 'Barlow Semi Condensed', sans-serif;

}

.hero-left-content
{
 font-size: 15px;
   line-height: 25px;
color: black;
}

.hero-centre
{
  text-align: center;

}

.hero-centre img
{
  width: 30%;
  min-width: 250px;
}


#largehero
{
  text-align: center;

}









/* Add an active class to highlight the current page */


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    margin-top: -9px;
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: inherit;
  border: none;

  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;

}


/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;

  background-color: #f9f9f9;
  min-width: 160px;
  
  z-index: 9999;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */


/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  
  .desktopimg
  
 {
 display:none;
 }
 
 .mobileimg
 {
     display:block;
 }
  
.mainblue .hero-left-img
{
    display: none; 
}

  
  h6
{
    min-height: 35px !important;
}   
  
  .udatitemholder-multiple-empty
  {
      display: none;
  }
  
     .shopitemholder-multiple-holdere {
        flex-basis: 20% !important;
    }
  
    .udatitemholder-multiple {

        margin-bottom: 1px;
    }

  .row-content
  {
    width: 100% !important;
    padding: 0%;
  }

  .map-resp{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-resp iframe{
    left:0;
    top:0;
    height:95%;
    width:95%;
    position:absolute;
}

.udat-formlabel
{
  width: 100% !important;
  text-align: center;
  margin-bottom: 25px;
}
.udat-forminput
{
  width: 100% !important;
  text-align: center;

}

input
{
     margin: auto; 
}

.contactform-headline
{
  text-align: center;
  width: 100%;
  
}

select
{
  width: 90% !important;
  margin-left: 5%;
}

checkbox
{
    text-align: center;
    font-size: 30px;
    
}

textarea
{width: 90% !important;
}
input
{width: 90% !important;
}

  .topnav a.icon {
    float: right;
    display: block;
  }

#toplogoarea{
  width: 100% !important;
  text-align: center;
}

#topnavigationarea{
  width: 97% !important;
  text-align: center;
  position: fixed !important;
  top: 40px !important;

}
#navigation-area
{
  background-color: blue !important;
  background-image: none !important;
  height: 150px !important;
}

}
@media screen and (min-width: 901px) {




}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }


.hero-left-headline
{
       line-height: 200% !important; 
}

.hero-right-headline
{
       line-height: 200% !important;   
}


.footerflex :nth-child(4) {order: 1;}
.footerflex :nth-child(1) {order: 3;}
.footerflex :nth-child(2) {order: 2; display: none;}
.footerflex :nth-child(3) {order: 3;}

  .hero-flex-right :nth-child(1) {order: 2;}
.hero-flex-right :nth-child(2) {order: 1;}



.newslist-img img
{
border-radius: 0% !important;
}

.hero-left-img img
{
border-radius: 0% !important;

}

.hero-right-img img
{
border-radius: 0% !important;
}

.article-headline
{
text-align: center;
}

h6
{
  text-align: center;
}

.udatitemtext
{
    margin-top: -3px;
  text-align: center;
  background: var(--cssvariablea);
padding: 10px;
}

.udatitemholder-multiple a:hover
{
  text-align: center;
}

.topnav
{

display: block;



}

.blueleather
{
    display: none;
}

.topnav.responsive
{
    background-color: #F7F7F7;
   top: -30px;
   padding-top: 30px;
   width: 118%;
   left:-18%;
}

#udathamburger
{
   
}

.topnav a
{
    display: none;
}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;

  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
        text-align: left;
  }


}










/* Settings - feel free to play with these */
$overlay_opacity: 0.3; // 0-1
$overlay_pattern: 'https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-medium-checks.png'; // Grab the url of a png from here - http://html5backgroundvideos.com/pattern-overlays/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/**
 * This part should be set separately for each video
 * if there are multiple videos in your site.
 * I.e. '.demo-video-wrapper' is the name of this particular video
 */
.demo-video-wrapper {
	background-image: url(https://d3k5xyayaartr5.cloudfront.net/_assets/home-video/beach-waves-loop.jpg);
}

/* Video overlay and content */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	pointer-events: none; /* Allows right click menu on the video */
	background: url($overlay_pattern) left top repeat;
  opacity: $overlay_opacity;
}
.video-hero--content {
	position: relative;
	text-align: center;
	color: #FFF;

	
}
.video-hero--content h2 {
	font-size: 34px;
	margin: 0 0 10px;
}
.video-hero--content p {
	font-size: 20px;
	margin: 0;
}

/* Other stuff */
body {
	
	font-size: 14px;
	color: black;
}
a {
	text-decoration: none;
	color: #a46497;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.page-width {
	width: 92%;
	max-width: 960px;
	margin: 0 auto;
}
#header {
	background: #2c2d33;
	padding: 2em 0;
}
#header a {
	color: #FFF;
}
.title {
	display: block;
	font-weight: bold;
	font-size: 18px;
}
.subtitle {
	display: block;
	font-weight: normal;
	font-size: 15px;
	color: #959699;
}
a:hover .subtitle {
	color: #FFF;
}
#site-title {
	float: left;
	margin: 0;
}
#content {
	padding: 40px 0;
}


/* CSS from jQuery Background Video plugin */
/**
 * Set default positioning as a fallback for if the plugin fails
 */
.jquery-background-video-wrapper {
	position: relative;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    	background-size: cover;
}
.jquery-background-video {
	position: absolute;
	min-width: 100%;
  z-index: 0;
	min-height: 100%;
	width: auto;
	height: auto;

	-o-object-fit: contain;
	   object-fit: contain;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
	    	transform: translate(-50%,-50%);
}
/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.js .jquery-background-video {
	opacity: 0;
	-webkit-transition: opacity 300ms linear;
			transition: opacity 300ms linear;
}
.js .jquery-background-video.is-visible {
	opacity: 1;
}

/**
 * Pause/play button
 */
.jquery-background-video-pauseplay {
	position: absolute;
	background: transparent;
	border: none;
	box-shadow: none;
  display: none;
	width: 20px;
	height: 20px;
	top: 15px;
	right: 15px;
	padding: 0;
	cursor: pointer;
	outline: none !important;
}
.jquery-background-video-pauseplay span {
	display: none;
}
.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}
.jquery-background-video-pauseplay.play:before {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #FFF;
}
.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
	border-top: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	border-left: 5px solid #FFF;
}
.jquery-background-video-pauseplay.pause:after {
	left: 10px;
}



/* Slider */
.slick-loading .slick-list
{
    background: #fff url('ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('slick.eot');
    src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 10px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

.reviewp-frame
{
padding: 20px;
background-color: #c0b3a5;
border-radius: 6px;
font-weight: heavy;
font-size: 1.3em;
}


/* datepicker css */

.ui-datepicker {
    text-align: center;

    font-family: 'DIN Alternate Bold' !important;

}
