@media (max-width: 700px)
{
    
    .grid-style1
      {
      grid-template-columns: 100% !important;
      
        grid-template-areas: 
        
        'style5'
        'style1'
        'style2'
        'style3'
        'style4'
        !important;
      }
      
}


.galleryheadline
{
    display: none;
}

.gallerydescription
{
    display: none;
}

.galleryviewer
{
    margin-top: 40px;

    width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 40px;
}

.gallery-item
{
    width: 31%;
    float:left;
    padding: 1%;
}

.gallery-item.thisgallery 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%;
}


.arrow{
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrowdown{
    display: block;
    width: 20px;
    height: 20px;
  text-align: center;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 3s infinite;
}
.arrowdownb{
      display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 3s infinite;
    animation-delay: -0.2s;
}
.arrowdownc{
      display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 3s infinite;
    animation-delay: -0.4s;
}

@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}
.newsflipcontainer {
  background-color: transparent;
  width: 100%;
  height:270px; 
  perspective: 1000px;
}

.newsfliptext
{
    padding-top: 20px;
}

.fliptextbottom 
{
    text-align:center;
    width: 100%;
    font-size: 10px;
    text-transform: uppercase; 
    font-family: 'Fjalla One', sans-serif;
    letter-spacing: 0.2em;
    padding: 10px;
    color: var(--cssvariablea);
}

.fliptextbottom a
{
    border: none;
     color: var(--cssvariablea);
}

.fliptextbottom a:hover
{
    background-color: transparent !important;
     color: var(--cssvariablea);
}


.newsfliptext h6
{
    font-size: 26px;
    text-transform: uppercase; 
    font-family: 'Fjalla One', sans-serif;
    letter-spacing: 0.2em;
    padding: 10px;
    color: var(--cssvariableb);
}

.newsflipinner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
 
}

.newsflipcontainer:hover .newsflipinner {
  transform: rotateY(180deg);
}

.newsflipfront, .newslipback {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.newsflipfront {

  color: black;
}

.newsflipback {
  background-color: var(--cssvariablea);
  color: white;
 height:270px; 
  width: 100%;
  transform: rotateY(180deg);
}

.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; }


.eventgrid
{


}

.udat-fullarticle-text img
{
    width: 100%;
    height: auto !important;
     font-size: 18px;
   line-height: 25px;
letter-spacing: 0.05em;
}

.blogpost
{
  background-image: url('geobg.png');   
  min-height: 500px;
}

.newsheader
{
  background-image: url('oddiesbg.png');
  background-size: cover;
  padding-bottom: 120px;
}

.goto-top-btn
{
  
  border: 2px solid var(--cssvariableb);
   background-color: var(--cssvariablea);
 font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    
  
  color: var(--cssvariableb);
  padding: 8px;
  position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px;
z-index: 99;
}









@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}




.goto-top-btn:hover
{
    cursor: pointer;

  border: 2px solid var(--cssvariablea);
   background-color: var(--cssvariablec);
font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    
    
  color: var(--cssvariableb);
  padding: 8px;
  position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px;
z-index: 999;
}

.rowcontent-instagram
{
    margin-top: 5%;
    margin-bottom: 5%;
    display: inline-block;
  
}


.newsarticle
{
 font-family: 'Open Sans 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: 'Open Sans 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
  {
    font-size: 2em;

    color:  var(--cssvariablea);
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;

    margin-bottom: 35px;
  }
  

   .footer a:hover
  {
   color:  var(--cssvariableb);   
  }
  
  .footer a
  {
   color:  WHITE;   
  }

  .smalltitle
  {
    font-size: 1em;

    color:  var(--cssvariablea);
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 

    letter-spacing: 0.2em;

    
  }


.newslist-headlinedate
{
 font-family: 'Open Sans Condensed', sans-serif;
    color:  #996632;
    font-weight: bold;
    padding-top: -20px;
  padding-bottom: 30px;
}

.udat-fullarticle-headlinedate
{
 font-family: 'Open Sans Condensed', sans-serif;

    font-weight: bold;
  padding-bottom: 30px;
      padding-top: -20px;
        color:  #d4cbc1;
}

.newslist-headlinedate-alt
{
 font-family: 'Open Sans 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: 'Open Sans Condensed', sans-serif;
}

.newslist-link a:hover
{
background-color:#996632;
color: #d4cbc1;
}




.newslist-maintext-alt
{
     font-family: 'Open Sans 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: 'Open Sans Condensed', sans-serif;
}

.twocol-headline h2
{
  text-align: center;
}


.newslist-link-alt a:hover
{
background-color:#3CBCE1;
color: #3A3183;
}

.newtoparea
{
    background-color: #F7F7F7;
    padding-top: 25px;
    padding-bottom: 25px;
}

.newtopwindowlogo
{
float:left;
width: 15%;
}

.newtopwindowright
{
float:left;
width: 85%;
text-align: right;
}



body
{
  padding: 0px;
  margin: 0px;
  background-color: white;
 font-family: 'Open Sans Condensed', sans-serif;
}




.topnav a {
font-weight:200;


  color: white;
  text-decoration: none;
  font-size: 17px;
 font-family: 'Open Sans 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: 25px;
}




.otherstories
{
color: var(--cssvariableb);
    background-color: var(--cssvariablea);
}



.blogtop
{
    height: 40px;
    background-color: var(--cssvariablea);
}


.secondelem
{
    background-color: white;
    color: var(--cssvariablea);
    padding-top: 5%;
    padding-bottom: 5%;
}

.kitchenbg
{
    background-color: var(--cssvariablea);
    padding-top: 5%;
    padding-bottom: 5%;
}

.topnav a
{
       
    color: white;
    font-size: 13px;
    text-transform: uppercase; 
    font-family: 'Fjalla One', sans-serif;
    letter-spacing: 0.2em;
    padding: 10px;
}

.topnav a:hover {

   color: var(--cssvariableb);
}

.topnav a:active {
  box-shadow: none;
  top: 5px;
}

.row-article
{
  padding-top: 50px;
  padding-bottom: 50px;

}


.charitybackground img
{
    padding-top: 15%;
    padding-bottom: 15%;
}

.contactbackground img
{
    padding-top: 15%;
    padding-bottom: 15%;
}

.newsbackground img
{
    padding-top: 7%;
    padding-bottom: 7%;
}


.presenterbackground img
{
    padding-top: 15%;
    padding-bottom: 15%;
}

.vobackground img
{
    padding-top: 15%;
    padding-bottom: 15%;
}

.eventsbackground img
{
    padding-top: 15%;
    padding-bottom: 15%;
}
.eventsbackground
{
 
    background-image: url('events.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:600px;
    padding-bottom: 15%;

}


.charitybackground
{
 
    background-image: url('charity.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:600px;
    padding-bottom: 15%;

}

.contactbackground
{
 
    background-image: url('contact.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:600px;
    padding-bottom: 15%;

}

.newsbackground
{
 
    background-image: url('news.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:300px;
    padding-bottom: 15%;

}


.vobackground
{
 
    background-image: url('vo.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:600px;
    padding-bottom: 15%;

}

.presenterbackground
{
 
    background-image: url('presenter.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    min-height:600px;
    padding-bottom: 15%;

}

.frontpagebackground img
{
    padding-top: 12%;
    padding-bottom: 15%;
}




.frontpagebackground
{
 
    background-image: url('vcgkitchen.png');
     background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.row-element
{
  width: 100%;
    display: inline-block;
margin-top: -10px;
}

.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
{
font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    
    letter-spacing: 0.2em;

    
  background-color: var(--cssvariablec);
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
  font-size: 10px;

}

.row-articles
{
  padding-top: 40px;
    color: #d4cbc1;

}



.row-twocols
{
  
}


.row-wysiwyg-element
{
       color: #d4cbc1;

      font-family: 'Montserrat';
      padding-top: 30px;
      padding-bottom: 30px;
}

.row-hero-left
{
    color: #ffffff;

}

.standard-page
{
    background-color: #d4cbc1;
      background-color: #996632;
}

.row-hero-right
{

      background-color: #d4cbc1;
}

#navigation-area
{
border-bottom: 2px solid #FFFFFF;

  position: fixed;
  top: 0px;
  left: 0px;
  height: 100px;
  z-index: 99;
}

.breakline
{
    display: none;
}





.row-element1
{

}

.frontpage-woodbg
{


  color: white;
  padding-bottom: 80px;
}


.hero-left
{
  text-align: left;

}

@keyframes createBox {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}


.twocol-flex
{
      display: flex;
      min-height: 300px;
      justify-content: space-between;
}



.hero-flex-left
{
      display: flex;
      min-height: 200px;
}

.hero-flex-right
{
      display: flex;
      min-height: 500px;
}

.whitearea
{
background-color: white;
background-image: none;
height: 500px;
}

.mainblue
{
    background-color: #2E89CC;
}




.essentials
{
color: white;
   padding-top: 30px;
   padding-bottom: 30px;
  font-family: 'Montserrat';
   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: 'Montserrat';
  background-image: url('newsmbg.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
background-size: cover;

}


.row-contact-form
{
   padding-top: 30px;
  font-family: 'Montserrat';
  background-image: url('images/odddfellows-wood-bg.jpg');
  background-size: cover;
}


.udatitemheadline-article
{
  display: none;
}

.hero-left-img
{
flex-basis: 50%;
margin-top: 20px;
margin-bottom: 20px;
  align-self: top;
}


.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
{

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: 'Open Sans 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;
color: #d4cbc1;
width: 40%;

}

.udat-frominput
{
  float: left;
  width: 60%;
}


@media screen and (min-width: 900px)
{
    .topnav
    {
        filter: drop-shadow(2px 2px 6px black);
    }
}



@media screen and (max-width:990px) {
  .hero-flex-left { flex-wrap: wrap;  }
  .footerflex { flex-wrap: wrap;  }
.twocol-flex {flex-wrap: wrap;}
.article-newslistholder-item {flex-wrap: wrap;}

.gallery-item
{
    width: 96%;
    float:left;
    padding: 2%;
}


.udat-fullarticle-headline
{
    text-align: center;
}

.udat-fullarticle-text
{
    text-align: center;
}


.arrow{
    
    top: 90%;
    }
    
    .frontpagebackground img
{
    padding-top: 50%;
    padding-bottom: 50%;
}

#navigation-area
{
border-bottom: none;
height: auto;
}

.row-element1
{
    margin-top: 30px;
}

.presenterbackground
{
   background-attachment: scroll;
     min-height:400px;
     background-position: center;
   
}


.newsbackground
{
display: none;
   
}

.blogpost
{
    margin-top: 36px;
}


.charitybackground
{
   background-attachment: scroll;
     min-height:400px;
   
}


.contactbackground
{
   background-attachment: scroll;
     min-height:400px;
   
}


.vobackground
{
   background-attachment: scroll;
     min-height:400px;
   
}

.eventsbackground
{
   background-attachment: scroll;
     min-height:400px;
   background-position: center right;
}

.frontpagebackground
{
 
 
     background-attachment: scroll;
}
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;
margin-left: 0px;
 }

.newslist-img
{

    flex-basis: 100%;
}

.newslist-img img

{
  width: 100%;
}

.twocol-content
{
  flex-basis: 97% !important;
  text-align: center;
  padding: 5px;

}

.twocol-headline
{
  text-align: center;
}


  .hero-left-img { flex-basis: 100%; }
  .hero-contentarea-left { flex-basis: 100% !important;

      text-align: center;
  }

.hero-flex-right { flex-wrap: wrap;  }
  .hero-right-img { flex-basis: 100%; }
  .hero-contentarea-right { flex-basis: 100%;

      text-align: center;
  }


  .hero-centre-headline { font-size: 1.2em;}

  }

.hero-contentarea-left a
{
      color:  #d4cbc1;
}

.hero-contentarea-left
{
   font-family: 'Open Sans Condensed', sans-serif;
flex-basis: 50%;
   padding-left: 5%;
   padding-right: 5%;
  align-self: center;

   color:  white;
 
  
}


.hero-right-link
{
  padding-top: 20px;
  padding-bottom: 20px;
}



h6
{
  font-size: 20px;
  font-weight: 400;
  color:  #black;
 font-family: 'Open Sans Condensed', sans-serif;
  margin-top: 35px;
  margin-bottom: 35px;
  min-height: 65px;
}

.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;
}

.contactform-headline
{
  font-size: 2em;
  color:  #d4cbc1;
  font-family: Tallitha Free;
  margin-top: 35px;
  margin-bottom: 35px;
  padding-bottom: 20px;
}



.article-headline
{
  font-size: 2em;
  color:  #d4cbc1;
  font-family: Tallitha Free;
  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: #d4cbc1;
border: 2px solid #d4cbc1;
text-decoration: none;
}

.hero-left-link a:hover
{
background-color:#d4cbc1;
color: #996632;
}


.morestories
{
    background-color: var(--cssvariablea);
    text-align: center;
}

.morestories .article-headline
{
    color: var(--cssvariableb);
        font-size: 2em;
  
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;
    text-align: center;
}

.morestories .udatitemtext a
{
    color: var(--cssvariableb);
        font-size: .8em;

  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 

    letter-spacing: 0.2em;
    text-align: center;
    
}

.morestories .udatitemtext h6
{
    color: var(--cssvariableb);
        font-size: 1.2em;

  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;
    text-align: center;
    
}





.morestoriesb
{
    background-color: var(--cssvariableb);
    text-align: center;
}

.morestoriesb .article-headline
{
    color: var(--cssvariablea);
        font-size: 2em;
  
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;
    text-align: center;
}

.morestoriesb .udatitemtext a
{
    color: var(--cssvariablea);
        font-size: .8em;

  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 

    letter-spacing: 0.2em;
    text-align: center;
    border: 2px solid var(--cssvariablea) !important;
}

.morestoriesb .udatitemtext h6
{
    color: var(--cssvariablea);
        font-size: 1.2em;

  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;
    text-align: center;
    
}


.ahero-left-headline
{
    font-size: 2em;
    text-align: center;
    color:  var(--cssvariablea);
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;

    margin-bottom: 35px;

}

.hero-left-headline
{
    font-size: 2em;
    color:  #ffffff;
  font-family: 'Fjalla One', sans-serif;
text-transform: uppercase; 
    margin-top: 25px;
    letter-spacing: 0.2em;

    margin-bottom: 35px;

}

textarea
{
  width: 50%;
  border-radius: 6px;
  color: ##996632;
  border: 2px solid #d4cbc1;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Montserrat';
 outline:none;
}


input
{
  width: 50%;
  border-radius: 6px;
  color: ##996632;
  border: 2px solid #d4cbc1;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Montserrat';
 outline:none;
}

select
{
  border-radius: 6px;
  color: ##996632;
  border: 2px solid #d4cbc1;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Montserrat';
 outline:none;
}

select:hover
{
    border: 2px solid #996632;
}

input:hover
{
    border: 2px solid #996632;
}

textarea:hover
{
    border: 2px solid #996632;
}

button
{
  border-radius: 6px;
  padding: 10px;
  font-family: 'Montserrat';
  color: #d4cbc1;;
  border: 2px solid #d4cbc1;;
  text-decoration: none;
  font-size: 16px;
     background-color: Transparent;
     cursor:pointer;
 overflow: hidden;
 outline:none;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
button:hover
{
  border-radius: 6px;
  padding: 10px;
  color: #996632;
  font-size: 16px;
  border: 2px solid #996632;
  text-decoration: none;
}

.secondelem .twocol-headline
{
    color: var(--cssvariablea) !important;
}

.twocol-headline
{
color: white;
    font-size: 13px;
    text-transform: uppercase; 
    font-family: 'Fjalla One', sans-serif;
    letter-spacing: 0.2em;
    padding: 10px;

}

.mobileimg
{
display: none;
margin-left: auto;
margin-right: auto;
}

.essentials h2
{
    line-height: 40px;
    color: white !important;
    font-weight: 100 !important;
}

.twocol-content
{
flex: 0 0 45%;
 font-size: 15px;
   line-height: 25px;
color:  white !important;

  font-family: 'Open Sans Condensed', sans-serif;



  margin-top: 30px;
  margin-bottom: 30px;
}

.hero-centre-content
{
 font-size: 15px;
 color: white;
   line-height: 25px;
     font-family: 'Open Sans Condensed', sans-serif;

}

.hero-left-content
{
 font-size: 18px;
   line-height: 25px;
letter-spacing: 0.05em;
}

.hero-centre
{
  text-align: center;

}

.hero-centre img
{
  width: 30%;
  min-width: 250px;
}


#largehero
{
  text-align: center;

}






.dropdown a:hover;
{

}



/* 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: -8px;
  float: right;
  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;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  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;
 }
  
  .notonmobile .hero-left-img
{
    display: none; 
}
  
.mainblue .hero-left-img
{
    display: none; 
}

  
  h6
{
    min-height: 35px !important;
}   
  
    .udatitemholder-multiple {

        margin-bottom: 2em;
    }

  .row-content
  {
    width: 95% !important;
    padding: 2%;
  }

  .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;

}

.contactform-headline
{
  text-align: center;
  width: 100%;
}

select
{
  width: 90% !important;
  margin-left: 5%;
}

textarea
{width: 90% !important;
}
input
{width: 90% !important;
}

  .topnav a.icon {
    float: right;
    display: block;
  }

#toplogoarea{
  width: 100% !important;
  text-align: left;
height: 40px;

}

#logoimage
{
    position: fixed;
left: -30px;
top:-30px;
z-index:999;
    
}

#topnavigationarea{
  width: 97% !important;
  text-align: center;
  position: fixed !important;
  top: 40px !important;

}
#navigation-area
{
  

}

}
@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: fixed;
      background-color: var(--cssvariablea);;

  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 20px;
    top: -30px;
    
  }
  
  .topnav
  {

    position: fixed;
      top: 0px; 
      width: 100%;
      left: -20px;
      top:-10px;
      font-size: 40px;
  }
  
  #toplogoarea
  {
      padding: 20px !important;
      width: 100%;
      background-color: var(--cssvariablea);
      position: fixed;
      top: 0px;
      left: 0px;

      max-height: 38px;
  
  }



.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
{
  text-align: center;
}

.udatitemholder-multiple a:hover
{
  text-align: center;ƒ
}

.topnav
{

display: block;



}

.blueleather
{
    display: none;
}

.topnav.responsive
{
  left: 0px;
  padding-bottom: 20px;
top: 42px;
}

.topnav.responsive #udathamburger
{
   margin-top: -62px !important;
}

.footer
{
    text-align: center;
}

#udathamburger
{
   font-size: 30px;
margin-top: -10px !important;
color: white;


 
}

.topnav a
{
    display: none;
}

  .topnav.responsive a {
    float: none;
    display: block;
   
    z-index: 999;
    text-align: center;

  }
  .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;

	text-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.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: 16px;
	line-height: 1.4;
	color: #666;
}
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: 'Montserrat' !important;

}