/*RESET ALL ELEMENTS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,strong,sub,sup,fieldset,form,label,legend,th,ul,ol,li{
    font-weight:inherit;font-style:inherit;font-size:100%;line-height:1;font-family:inherit;
    text-align: left;vertical-align: baseline;margin:0;padding:0;border:0;box-sizing: border-box;font-family: 'Lora', serif;
}



h1,h2,h3,h4,h5,h6{
	margin-bottom:10px;
}



html{
	font-family: 'Lora', serif;
}
body{
	margin:0;
	max-width: 100%;
	overflow-x: hidden;
	background-color:#FFF;
	background-position: top center;
	background-repeat: repeat-x;
	background-attachment: fixed;
	}


*:focus {
    outline: none;
}

/* COLORS */
:root {
    --gold: #c28f45;
	--plainTxt: #575757;
}

/* FONT SIZES */



#mainContent a:link,
#mainContent a:visited{
	text-decoration:none;
}

#mainContent a:hover{
	color:#000;
}

#mainContent p{
	margin-bottom:10px;
}

#mainContent p,
#mainContent li{
	font-size:18px;
	line-height:28px;
	color:var(--plainTxt);
}

#mainContent li{
	margin-bottom:0;
}

#mainContent ul:not(.slick-dots),
#mainContent ol:not(.slick-dots){
	list-style-position:outside;
	padding:20px 0 20px 20px;
}



#mainContent h1{
	font-size:40px;
	line-height:50px;
	margin-bottom:20px;
	color:var(--gold);
	}
@media only screen and (max-width: 500px) {
	#mainContent h1{
	font-size:30px;
	line-height:40px;	
	}	
}

#mainContent h2{
	font-size:26px;
	line-height:36px;
	margin-bottom:10px;
	color:var(--gold);
	}
@media only screen and (max-width: 500px) {
	#mainContent h2{
	font-size:22px;
	line-height:32px;	
	}	
}

#mainContent h3{
	font-size:18px;
	line-height:22px;
	margin-bottom:3px;
	color:#000;
	font-weight:500;
	}
	
@media only screen and (max-width: 500px) {
	#mainContent h3{
	font-size:18px;
	line-height:26px;	
	}	
}

#mainContent h4,
#mainContent h5,
#mainContent h6{
	font-size:16px;
	line-height:20px;
	margin-bottom:3px;
	color:#000;
	font-weight:500;
	}
	
#mainContent strong{
	font-weight:bold;
}


#mainContent blockquote {
	max-width: 100%;
	margin: 0;
	padding: 40px 20px 20px 40px;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
	font-size: 20px;
	color: #428bca;
	background: #f4f4f4;
	border-left:7px solid var(--gold);
	position:relative;
	display:block;
	font-style: italic;
}

#mainContent blockquote::before {
	content: "\201C";
	display: block;
	color:var(--gold);
	position:absolute;
	font-size:70px;
	top:10px;
	left:26px;
	text-align:left;
	font-style:normal;
}

#mainContent blockquote cite{
	color:var(--plainTxt);
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	display:block;
	margin-top:10px;
	font-family: 'Lora', serif;
}

#mainContent em{
	font-style: italic;
}
	
@media only screen and (max-width: 500px) {
	#mainContent h4,
	#mainContent h5,
	#mainContent h6{
	font-size:16px;
	line-height:20px;	
	}	
}
/* FORMS */

#mainContent input,
#mainContent textarea {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
}

#mainContent textarea{
	width: 100%;
	height: 150px;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
	resize: none;
}

#mainContent select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

#mainContent input[type=text]:focus {
  background-color: lightblue;
}

#mainContent input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* CONTAINERS */
#mainContent{
		margin:30px 0;
}

.fullWidth{
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width:100vw !important;
}

.relative{
	position:relative;
}

.container1{
	margin:auto;
	max-width:1500px;
	width:90%;
}

#pageHeroImage{
	min-height:400px;
	background-color:grey;
	margin-bottom:60px;
}

@media only screen and (max-width: 500px) {
	#pageHeroImage{
		min-height:300px;
		background-color:grey;
		margin-bottom:60px;
	}	
}

@media only screen and (max-width: 1680px) {
	.container1{
	max-width:1200px;
	}		
}

@media only screen and (max-width: 500px) {
	.container1{
		width:87%;
	}	
}

/* WIDTH SETTINGS */

.max800{
	max-width:800px;
	margin:auto;
}

/*MAIN NAV AND LOGO*/

#homeLogo{
	display:inline-block;
	width:380px;
	height:auto;
	position:absolute;
	bottom:-5px;
	left:0;
}

#homeLogo img{
		display:block;
		width:100%;
		height:auto;
	}

@media only screen and (max-width: 1100px) {
	#homeLogo{
		display:block;
		position:static;
		margin:20px auto;
		max-width:380px;
		width:75%;
	}
	
}

a#homeLogo img{
	display:block;
	width:100%;
	height:auto;
}

#hamburger,
#closeNavigation{
		display:none;
	}

@media only screen and (max-width: 1100px) {
	#hamburger{
		display:inline-block;
		background-color:#fff;
		padding:6px 6px 6px 6px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		position:fixed;
		top:20px;
		right:0px;
		font-size:0;
		opacity:.7;
		cursor:pointer;
		z-index:1000;
	}
	
	#closeNavigation{
		display:inline-block;
		padding:6px;
		position:absolute;
		top:15px;
		right:15px;
		font-size:0;
		cursor:pointer;
	}
}



#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:1;
}

@media only screen and (max-width: 1100px) {
     #header{
        position:absolute;
        z-index:999;
    }   
}

#backgroundGradient,
#pageHeroImage{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:0;
	overflow:hidden;	
}

#backgroundGradient,
#pageHeroImage,
.heroPlaceHolder{
	height:500px;
}

.backgroundGradientPanel{
	position:abolsolute;
	top:0;
	left:0;
	width:100%;
	height:1000px;
	background-color:#000;
	opacity:.7;
}

.pageHeaderSaySomething{
	position:absolute;
	z-index:1;
	width:100%;
	bottom:60px;
	text-align:center;
}

@media only screen and (max-width: 400px) {
	.pageHeaderSaySomething{
		bottom:120px;
	}	
}

.pageHeaderSaySomething > div{
		text-laign:center;
}

.pageHeaderSaySomething h1{
	color:#FFF;
	text-align:center;
	margin:auto;
	font-size:60px;
}

@media only screen and (max-width: 400px) {
	.pageHeaderSaySomething h1{
		font-size:30px;
	}	
}

@media only screen and (max-width: 1500px) {
	#backgroundGradient,
	#pageHeroImage,
	.heroPlaceHolder{
		height:400px;
	}		
}

#pageHeroImage img{
	object-fit:cover;
	height:100%;
	display:block;
	object-position: bottom center;
}

#pageHeroImage{
	z-index:-1;
}

#backgroundGradient img{
	width:100%;
}

#mainNavContainer{
	border-bottom:1px solid #FFF;
	position:absolute;
	bottom:0;
	width:70%;
}

.wp-post-image{
	position:absolute;
	display:block;
	width:100%;
	object-fit: cover;
}
@media only screen and (min-width: 1101px) {
	#mainNavContainer{
		right:0;
	}	
}

@media only screen and (max-width: 1400px) {
	#mainNavContainer{
		width:65%;
	}	
}

@media only screen and (max-width: 1100px) {
	#mainNavContainer{
		border-bottom:0px solid #FFF;
		position:fixed;
		top:0;
		width:200px;
		background-color:#000;
		z-index:999;
	}	
	
	.openNav{
		right:0px;
		transition: all .2s;
	}
	
	.closeNav{
		right:-201px;
		transition: all .2s;
	}
}



#headerInner{
	height:140px;
}

.navInnerContainer{
	
}

.navInnerContainer #mainNav{
	
}

#mainNav{
	display:inline-block;
	float:right;
}

@media only screen and (max-width: 1100px) {
	#mainNav{
		display:block;
		float:none;
		position:absolute;
		width:100%;
		top:50px;
	}	
}

.navInnerContainer #mainNav > li{
	display:inline-block;
}

@media only screen and (max-width: 1100px) {
	.navInnerContainer #mainNav > li{
		display:block;
	}	
}

.menu-item-has-children{
	position:relative;
}

.menu-item-has-children > ul{
	position:absolute;
	top:47px;
	left:-10000px;
}

@media only screen and (max-width: 1100px) {
	.menu-item-has-children > ul li{
		display:block;
	}
	
	.menu-item-has-children > ul{
		position:absolute;
		top:47px;
		left:0;
		height:0;
		overflow:hidden;
		transition: all .3s;
	}	
}

.menu-item-has-children:hover > ul{
	position:absolute;
	top:46px;
	left:0;
	height:inherit;
}

@media only screen and (max-width: 1100px) {
	.menu-item-has-children:hover > ul{
		position:relative;
		top:0;
		height:inherit;
	}	
}

.menu-item-has-children:hover > ul li{
	display:block;
}

.menu-item-has-children:hover > ul{
	padding-top:1px;
}

#mainNav .menu-item-has-children:hover > ul li a:link,
#mainNav .menu-item-has-children:hover > ul li a:visited{
	display:block;
	background-color:#000;
	width:150px;
	font-size:18px;
}

@media only screen and (max-width: 1100px) {
	#mainNav .menu-item-has-children:hover > ul li a:link,
	#mainNav .menu-item-has-children:hover > ul li a:visited{
		display:block;
		background-color:#262626;
		width:100%;
		font-size:16px;
		padding-left:30px;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}	
}

#mainNav .menu-item-has-children:hover > ul li a:hover{
	background-color:var(--gold);
}

#mainNav > li a:link, 
#mainNav > li a:visited{
	color:#fff;
	height:46px;
	display:block;
	text-decoration:none;
	font-size:20px;
	line-height:46px;
	padding:0 20px;
	
}

@media only screen and (max-width: 1100px) {
	#mainNav > li a:link, 
	#mainNav > li a:visited{
		font-size:18px;
	}	
}


.navInnerContainer #mainNav > li a:hover{
	background-color:var(--gold);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.navInnerContainer #mainNav > li.current_page_item a:link,
.navInnerContainer #mainNav > li.current_page_item a:visited{
	background-color:#fff;
	color:#000;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;	
}



@media only screen and (max-width: 1100px) {
	.navInnerContainer #mainNav > li a:hover{
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

}
/*HOME PAGE CAROUSEL*/

#homepageCarouselPlaceHolder,
#homepageCarousel,
.homeCarouselSlide{
	height:700px;
}

@media only screen and (max-width: 600px) {
	#homepageCarouselPlaceHolder,
	#homepageCarousel,
	.homeCarouselSlide{
		height:450px;
	}	
}



#homepageCarousel{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:-1;
}

#homepageCarousel img{
	height:100%;
	width:100%;
	object-fit: cover;
	object-position: center top;
	
}





/* FOOTER*/
#footerContainer{
	padding:30px 0;
}


#footerLogo{
	margin-bottom:20px;
	display:block;
}

#footerContact p{
	line-height:24px;
}

#footerContact p:last-child{
	margin-top:20px;
}

@media screen and (max-width: 1200px) {
	#footerContactContainer{
		display:none;
	}
}

#footerColumns{
	display:flex;
	justify-content:space-between;
	flex-flow:row;
}

@media screen and (max-width: 800px) {
	#footerColumns{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
}

#footerColumns > div{
	flex-grow:1;
}


@media screen and (max-width: 800px) {
	#footerColumns > div{
		width:40%;
		margin-bottom:40px;
		padding-left:40px;
	}	
}

@media screen and (max-width: 600px) {
	#footerColumns > div{
		width:100%;
		padding-left:30px;
		margin-bottom:40px;
		padding-bottom:10px;
		border-bottom:1px solid #d8d8d8;
	}	
	
	#footerColumns > div:last-child{
		border-bottom:0px solid #d8d8d8;
	}
}

#footerColumns > div h2{
	font-size:24px;
	line-height:normal;
	border-bottom:2px solid var(--yellow);
	color:var(--blue);
	text-transform:uppercase;
	display:inline-block;
	margin:0 0 30px 0;
}

#footerColumns > div ul{
	padding:0;
}

#footerColumns > div ul li{
	display:block;
}

#footerColumns > div ul li a:link,
#footerColumns > div ul li a:visited{
	text-decoration:none;
	margin:0 0 15px 0;
	display:inline-block;
}

#footerColumns > div ul li a:hover{
	text-decoration:underline;
}

#footerColumns > div ul li,
#footerColumns > div ul li a:link,
#footerColumns > div ul li a:visited{
	color:#262626;
}

#openingTimes li{
	margin-bottom:5px;
}

#openingTimes li span{
	display:inline-block;
	width:70px;
}



#websiteInfoFooter{
    position:relative;
    border-top:1px solid #c2c2c2;
    padding-top:20px;
    margin-top:10px;
}

#websiteInfoFooter div{
    position:absolute;
}

@media screen and (max-width: 800px) {
   #websiteInfoFooter div{
    position:relative;
    text-align:center;
    } 
}

#websiteInfoFooter div,
#websiteInfoFooter div a{
    color:#878787;
    font-weight:200;
}

#copyRight{
    left:0;
}

@media screen and (max-width: 800px) {
    #copyRight{
        margin-bottom:20px;
    }    
}

#ocmWeb{
    right:0;
}
/* END FOOTER */