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

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

.acebg
{
  background-image: url('acebgfader.png');
  background-size: cover;
  text-align: center;
}

.formbg
{
  background-image: url('formbg.png');
  background-size: cover;
  text-align: center;
}


.acebg a
{
    font-family: 'Bree Serif', serif;
    color: white;
    width: 25%;
    letter-spacing: 0.1em;
    padding: 2%;
    display: inline;
       border: 1px white solid;
}


.acebg a:hover
{
    color: #398916;
    background-color: white;


       border: 1px white solid;
}

.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;
  
  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: 'Bree Serif', 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
{
  
        background-color:  #318916;
      padding-bottom: 40px;
      color: white;
      padding-top: 40px;
}

.whatson
{
  background-image: url('eventbg.png');
  background-size: cover;
  padding-bottom: 80px;
}


.row-categoryarticle
{
 background-color: white;
 padding-top: 30px;
}



.row-categoryarticle-alt
{
 background-color: #318916;
 padding-top: 30px;
}

.newslist-maintext
{
      
        color:  #318916;
      padding-bottom: 30px;
}

.newslist-headline
{
     font-size: 2em;
  color:  #318916;
  font-family: Tallitha Free;
  margin-bottom: 35px;
  padding-bottom: 20
}
  .udat-fullarticle-headline
  {
    padding-top: 30px;
       font-size: 2em;
    color:  white;
    font-family: Tallitha Free;
    margin-bottom: 35px;
    padding-bottom: 20px;
  }



.newslist-headlinedate
{
  
    color:  #318916;
    font-weight: bold;
    padding-top: -20px;
  padding-bottom: 30px;
}

.udat-fullarticle-headlinedate
{
    

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

.newslist-headlinedate-alt
{
  

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


.newslist-link a
{

border-radius: 6px;
padding: 10px;
color: #318916;
border: 2px solid #318916;
text-decoration: none;
  
}

.newslist-link a:hover
{
background-color:#318916;
color: white;
}




.newslist-maintext-alt
{
      font-family: 'Montserrat', sans-serif;
        color:  white;
      padding-bottom: 30px;
}

.newslist-headline-alt
{
     font-size: 2em;
  color:  white;
  font-family: Tallitha Free;

  margin-bottom: 35px;
  padding-bottom: 20px;
}


.newslist-link-alt a
{

border-radius: 6px;
padding: 10px;
color: white;
border: 2px solid white;
text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}

.newslist-link-alt a:hover
{
background-color:white;
color: #318916;
}




body
{
  padding: 0px;
  margin: 0px;
  background-color: #ffffff;
  font-family: 'Bree Serif', serif;


}




.topnav a {
font-weight:400;

  color: white;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
   font-family: 'Oswald', sans-serif;
}

.hero-centre-headline
{
    font-size: 40px;
    color:  white;
    font-family: Tallitha Free;
    margin-top: 30px;
    padding: 10px;
    margin-bottom: 30px;
}

.topnav
{
  margin-top: 55px;
}

.topnav a:hover {

    box-shadow: 0 3px 0 #318916;
}

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

.toplogoarea
{
    float:left;
    width: 50%;
    text-align: left;
}

.topcontactarea
{
    float:left;
    width: 50%;
    text-align: right;
}

.row-article
{
  
}

.row-element
{
  width: 100%;

}

.row-content
{
max-width:   1280px;
margin-left: auto;
margin-right: auto;
}

.row-innercontent
{
  text-align: left;
  width: 100%;
}

.f1
{

}

.listnav a
{
  color:white;
  text-decoration: none;
  width: 100%;
  display: block;
  font-size: 1em;
  line-height: 1.5em;
}

.listnav a:hover
{
  color: #318916;
}

.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
{
text-align: center;
  background-color: #303030;
  min-height: 200px;
  padding-top: 70px;
  padding-bottom: 50px;
  color: white;
font-family: 'Bree Serif', serif;
}

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

}



.row-twocols
{
  
}


.row-wysiwyg-element
{
       

 
}

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

}

.standard-page
{
    background-color: white;
      background-color: #318916;
}

.row-hero-right
{

      background-color: white;
}

#navigation-area
{


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

.breakline
{
    display: none;
}

.frontpage-bgwood
{
  background-image: url('images/odddfellows-wood-bg.jpg');
background-size: cover;
}



.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: 500px;
      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;
}


.blueleather
{
   padding-top: 130px;
   padding-bottom: 130px;
  font-family: 'Montserrat';
  background-image: url('https://www.spectramedia.co.uk/smbg.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}


.row-contact-form
{
     font-family: 'Bree Serif', serif;
     color: white;
   padding-top: 30px;
  
  
}


.udatitemheadline-article
{
  display: none;
}

.hero-left-img
{
flex-basis: 50%;
  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%;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.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%;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}






.hero-contentarea-right
{
    font-family: 'Montserrat', sans-serif;
  margin-top: 50px;
  margin-bottom: 50px;

width: 50%;
   padding-right: 5%;
  align-self: center;
    color:  #318916;
}


.udat-formsection
{
  padding-top: 20px;
  padding-bottom: 20px;

}

.udat-formlabel
{
float: left;
color: white;
width: 40%;

}

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


@media screen and (min-width: 700px)
{
.acebg    
    {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;}
  
.formbg
{
      background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
}

@media screen and (max-width: 800px)
{
    .acebg a
{
    font-family: 'Bree Serif', serif;
    color: white;
    width: 25%;
    letter-spacing: 0.0em !important;
    padding-top: 2%% !important;
      padding-bottom: 2%% !important;
        padding-left: 1%% !important;
          padding-right: 2%% !important;
    display: inline;
       border: 1px white solid;
}

}

@media screen and (max-width:990px) {
    
.toplogoarea
{
    float:left;
    width: 100%;
    text-align: center;
}

.topcontactarea
{
display: none;
}
    
  .hero-flex-left { flex-wrap: wrap;  }
  .footerflex { flex-wrap: wrap;  }
.twocol-flex {flex-wrap: wrap;}
.article-newslistholder-item {flex-wrap: wrap;}

.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: 100% !important;
  text-align: center;
  padding: 5px;
}

.twocol-headline
{
  text-align: center;

}

  .hero-left-img { flex-basis: 100%; }
  .hero-contentarea-left { flex-basis: 100%;
      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
{
      color:  white;
}

.hero-contentarea-left
{
    font-family: 'Montserrat', sans-serif;
width: 50%;
   padding-left: 5%;
  align-self: center;
   color:  white;
   margin-top: 30px;
   margin-bottom: 30px;
}


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

h6
{
  font-size: 1.2em;
  color:  white;
  font-family: 'Montserrat', sans-serif;
  margin-top: 35px;
  margin-bottom: 35px;
}

.hero-right-link a
{

border-radius: 6px;
padding: 10px;
color: #318916;
border: 2px solid #318916;
text-decoration: none;
}

.hero-right-link a:hover
{
background-color:#318916;
color: white;
}

.contactform-headline
{
  font-size: 2em;
  color:  white;
 font-family: 'Bree Serif', serif;
  margin-top: 35px;
  margin-bottom: 35px;
  padding-bottom: 20px;
}

.ourwork
{
    background-color: #eff5ed;
    font-family: 'Bree Serif', serif;
}

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

.hero-right-headline
{
    font-size: 2em;
    color:  #318916;
    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: white;
border: 2px solid white;
text-decoration: none;
}

.hero-left-link a:hover
{
background-color:white;
color: #318916;
}

.hero-left-headline
{
    font-size: 2em;
    color:  #ffffff;
 font-family: 'Montserrat';
 font-weight: bold;
    margin-top: 35px;

    margin-bottom: 35px;

}

textarea
{
  width: 50%;
  border-radius: 6px;
  color: #318916;
  border: 2px solid white;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Bree Serif', serif;
 outline:none;
}


input
{
  width: 50%;
  border-radius: 6px;
  color: #318916;
  border: 2px solid white;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Bree Serif', serif;
 outline:none;
}

select
{
  border-radius: 6px;
  color: #318916;
  border: 2px solid white;;
  text-decoration: none;
  font-size: 20px;
     cursor:pointer;
 font-family: 'Bree Serif', serif;
 outline:none;
}

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

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

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

button
{
  border-radius: 6px;
  padding: 10px;
  font-family: 'Bree Serif', serif;
  color: white;
  border: 2px solid white;
  text-decoration: none;
  font-size: 16px;
     background-color: Transparent;
     cursor:pointer;
 overflow: hidden;
 outline:none;
}

button:hover
{
  border-radius: 6px;
  padding: 10px;
  background-color: #398916;
  color: white;
  font-size: 16px;
  border: 2px solid #398916;
  text-decoration: none;
}

.twocol-headline
{
    padding-top: 20px !important;
font-family: 'Bree Serif', serif;
font-size: 1.3em;
 color: #398916;
}

.twocol-content
{
flex: 0 0 45%;
 font-size: 20px;
   line-height: 25px;
margin-top: 30px;
  margin-bottom: 30px;
  font-family: 'Bree Serif', serif;
}

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

}

.hero-left-content
{
 font-size: 15px;
   line-height: 25px;

}

.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 {
  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;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 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;
  }

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


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

}
#navigation-area
{
  background-color: black !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
{
  text-align: center;
}

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

.topnav
{
background-color: black;
display: block;

text-align: left;

}

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

	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-family: 'Roboto', sans-serif;
	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;

}