@import url(http://fonts.googleapis.com/css?family=Numans);


body {
	
	font-family: "Numans", Arial;
	font-size: 16px;
	line-height: 1.3;
	background-color: white;

}


header {
width: 100%;
background-color: rgba(55,56,59,0.95);
background-attachment: fixed;
position: fixed;
top:0;
z-index: 10;

}

.logo {

	float: right;
}

nav {
	background-color: rgba(233, 233, 233, 0.9);
	font-size: 18px;
	position: fixed;
	/*to make the heading stick to the top of the page*/
		/*we also need to add a width as it will be outside of the general layout*/
	width: 100%;
	background-attachment: fixed;
	text-align: center;
	border-bottom: solid 1px RGBA(204, 204, 204, 1);
	/*background-attachment: fixed;*/
	font-size: 1.5vw;
	



	


}

nav a {
	/*width: 100%;*/
	color: black;
	margin-right: 45px;
	text-decoration: none;
	padding: 0 5px 0 5px;
	/*background-color: white;*/
	transition: color 0.25s;

	}

nav a:hover {
	color: RGBA(98, 200, 146, 1);
	padding: 0 5px 0 5px;

	
}


section.container {

/*if we did the padding: 200 0 200 0 it would reset the lanes css  - so need to use padding-top and padding-bottom instead*/
	padding-top: 210px;
	padding-bottom: 20px;
	/*border-bottom: 1px solid black;*/

}



h2 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom:30px;


}

section img {
	position: relative;
	/*relative to the container the image is in*/
	top: 0;
	/*trageting both the image and it's shadow that's why we've used all.. yet we haven't applied of it.. need to make a slector for a hover state*/
	transition: all 0.25s ease;

}

section img:hover {
	/*so this will move it down slightly on roll over/hover*/
	top:-5px;
	/*remember what these values mean the last one if the blur, is important to sofen it*/
	box-shadow: 0px 5px 3px rgba(0,0,0,0.25);


}

footer {
 background-color: black;
 color: white;
 border-top: solid 1px red;
 padding: 10px 20px 10px 20px;



}

h8 {

	color: RGBA(98, 200, 146, 1);
}



/*bite size css*/


section img {

	border-radius: 158px;


	/* Responsive styles*/

}


hr {
	width: 50%;
	border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
/* Responsive styles*/

@media screen and (max-width:720px){
body{
	width: auto;
}

img, iframe, t {
	max-width:100%;
}
nav a {
	display:block;
	padding:10px 20px 10px 20px;
}

.booking a {
	
	width:50px;
	height: 25px;
	/*makes the image round.. 70px being a high roundness of corners creating a circle as it needs to half of the width in pixels in the image!*/
	border-radius: 10px;
	margin: 0 50% 0 50%;
	
	margin: 0 0 0 0px;
	font-size: 1.5dw;
	border: 1px solid RGBA(167, 167, 167, 1);
	color: RGBA(167, 167, 167, 1);
	text-decoration: none;
	padding: 1px;
	background-color: white;

	}

.booking a:hover {

	width:50px;
	height: 25px;
	border: 1px solid RGBA(167, 167, 167, 1);
	color: RGBA(167, 167, 167, 1);
	text-decoration: none;
	padding: 1px;
	background-color: RGBA(167, 167, 167, 0.5);
	color: white;
	/*border-radius: 10px;
	margin: 10px auto 0 auto;*/

	}

	h4  {
	font-size: 1.5vw;
	/*font-weight: bold;*/
	margin-bottom:5px;
	color: #435A66;
	text-align: left;
}

#one-column-emphasis
{
	
	font-size: 12px;
	margin: auto;
	width: auto;
	text-align: left;
	border-collapse: collapse;
}
#one-column-emphasis th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	color: #039;
}
#one-column-emphasis td
{
	padding: auto;
	color: black;
	border-top: 1px solid black;
	
}
.oce-first
{
	/*background: RGBA(69, 198, 249, 0.7);*/
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
	color: #339;
	background: #eff2ff;
}

}

/* Responsive styles*/