:root {
    --textcolour: olive; 
    --fillcolour: olive;
    --foregroundtextcolour: black;
    --font: helvetica, sans-serif;
    /*--fancyfont: 'Kaushan Script', cursive;*/
    --fancyfont: 'Parisienne', cursive;
}



.wholepage{
	 margin: auto; 
	 max-width: 1200px;
	 }

.header{
	text-align: center; 
	font-family: helvetica, sans-serif;  
	padding-top: 20px; 
	padding-bottom: 20px; 
	border: 2px solid olive; 
	border-radius: 10px;	
	}	 

.subpage{
	border: 2px solid olive; 
	border-radius: 10px;	
	}
	
.footer{
	background-color: olive; 
	text-align: center; 
	font-family: helvetica, sans-serif; 
	border-radius: 10px; 
	font-size: 100%;
	color: black;
	    display: flex;
    -ms-flex-wrap: wrap;

    flex-wrap: wrap;
	}
	
.textcolour {
	color: var(--textcolour);
}

h1.headline{
	font-family: var(--fancyfont);
	text-align: center;
	font-size: 300%;
 }

.foregroundtextcolour {
    color: var(--foregroundtextcolour);
    font-weight: bold;
    /*text-shadow: 2px 2px black;*/
}

html, body{
	background:#fff;
	color: var(--textcolour);
	font-family: var(--font); 
	font-size:1em;
	line-height:1.5em; 
	font-weight:normal;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    
}

h1 { font-family:  var(--font);
    font-weight:normal; line-height:1.4em;
	margin:.45em 0;
	padding:0; }

 h2, h3, h4, h5, h6{
	font-weight:normal;
	font-family:  var(--font);
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 

h2{	
	text-justify: none;
}
.centre{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.verticalAlign{
	display: flex; 
	justify-content: center; 
	align-items: center;
}


.maincontent{
	display: grid; 
	grid-template-columns: repeat(11, 1fr); 
	grid-template-rows: 1fr auto auto auto auto;
	text-align: justify;
    text-justify: auto;
}
.topcontent{
	grid-column: 1 / 12;
	grid-row: 1 / 2;
	text-align: center;
    text-justify: auto;
}
.secondarycontent{
	grid-column: 1 / 12;
	grid-row: 3 / 4;
	text-align: center;
    text-justify: auto;
}
h1.headline{
	font-family: var(--fancyfont);
	text-align: center;
 }

.leftcolumn{
	grid-column: 1 / 6;
	grid-row: 2 / 3;	
}

.rightcolumn{
	grid-column: 7 / 12;
	grid-row: 2 / 3;
}

.leftcolumn2{
	grid-column: 1 / 6;
	grid-row: 4 / 5;	
}

.rightcolumn2{
	grid-column: 7 / 12;
	grid-row: 4 / 5;
}

.tariffhead{
	 display: flex; 
	 align-items: end;
	 text-align: right;
	 justify-self: right;
	padding: 5px;
	height: 100%;
}

.dates{
	padding: 5px;
	text-align: right; 
	height: 100%;
	border-width: 1px;
	border-style: none none solid solid;
	border-color: #5E9DAB;	
}

.last{border-style: none solid solid solid;}

a:link {
    color: var(--foregroundtextcolour);
}

a:hover {
    color: white;
    background-color: var(--fillcolour);
}



.nav-item a:hover {
    color: #fff;
    background-color: var(--fillcolour);
    border-radius: 5px;
    padding-top: 10px;
}

.active {
    color: #fff !important;
    background-color: var(--fillcolour); !important;
    border-radius: 5px;
    padding-top: 10px;
}
/*Tell safari to keep original styling on phone numbers*/
a[href^=tel]{
	text-decoration:inherit;
	color:inherit;
}

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    
.masthead{
	display: grid; 
	grid-template-columns: repeat(11, 1fr); 
	grid-template-rows: 1fr auto auto;
}

/*.award{
	/*height: 150px;
	/*width:106px;*/	
/*}*/

.leftaward{
	grid-column: 1 / 5;
	grid-row: 1 / 2;
}

.rightaward{
	grid-column: 8 / 11;
	grid-row: 1 / 3;
	text-align: center;
	vertical-align: middle;

}

.contactinfo{
	grid-column: 1 / 12;
	grid-row: 2 / 3;
	text-align: center;
	background-color: var(--fillcolour);
	background-repeat: repeat-x;
	padding-top: 10px;

}

.addresstext{
	grid-column: 2 / 8 ;
	grid-row: 2 / 3;
	text-align: left;
}
.alternatepics{	
	display: grid;
	grid-column-gap: 1em; 
	grid-row-gap: 2em;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: auto;
	align-items: center;
	
}

.leftpic{
	grid-column: 1/7;
}

.rightpic{
	grid-column: 8/12;
	border-radius: 10px;
}

.textleft{
	grid-column: 1/8;
	border-radius: 10px;

}

.textright{
	text-align: left;
	grid-column: 7/12;
	
}

.headtext{
	grid-column: 2 / 8;
	grid-row: 1 / 2;
	font-size: 500%;
	padding-top: 20px;
	/*font-weight: bold;*/
	/*line-height: normal;*/
	font-family: var(--fancyfont);
	text-align: left;
}
.headsubtext{
	font-size: 100%;
	/*font-weight: bold;*/
	line-height: normal;

}

.strapline{
	grid-column: 1 / 12;
	align-items: center;
}

.mainpics{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

}
/*.fixedpic{
	border-radius:5px;
	grid-area: 1/1/2/3;
}*/
.mybackground{
	height: 500px;
	/*border-radius:5px;*/
	grid-area: 1/1/2/5;
}
.two-col-pics{
	display: grid;
	grid-column-gap: 1em; 
	grid-row-gap: 2em;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	align-items: center;
}

.first-col-pic{
	grid-column: 1 / 2;
}

.second-col-pic{
	grid-column: 2 / 3;
}

figure{
    text-align:center;
}

figure figcaption {
    text-align: center;
}

.doublecol{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.photoleft{
	display: grid;
	grid-column: 1/2;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}

.photoright{
	display: grid;	
	grid-column: 2/3;
	width: 100%;
	border-radius:5px;
	justify-items: center;
	align-items: start;
}


.photo{
	border-radius: 5px;
	width:308px;
	height:232px; 
	}



.span2of2{
	display: grid;
	grid-column: 1/3;
	justify-items: center;
	align-items: start;
	text-align: center;
}

/***************************************/
@media (max-width:1020px) {
.two-col-pics{
 	grid-template-columns: 1fr;
	grid-template-rows: auto;	
 }  
 .first-col-pic{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.second-col-pic{
	grid-column: 1 /2;
	grid-row: 2 / 3;
}


}
/***************************************/
@media (max-width:767px) {
    .centrebox {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: 'H3' 'paragraph' 'Bullets' 'Image';
    }
    
    .headtext{
    grid-row:1 / 2;
    grid-column: 1 / 12;
    text-align: center;
    }
    
    	.rightaward{
		grid-column: 1 / 12;
		grid-row: 2 / 3;
		align-self: center;
		padding-right: 0px;
	}
	
    .addresstext{
		grid-column: 2 / 11;
		grid-row: 3 / 4;
		text-align: center;
	}
	
	/* .award{
		height: 96px;
		width:72px;	
   }*/
    	
	.leftaward{
		grid-column: 1 / 5;
		grid-row: 1 / 2;
		/*align-self: end;*/
	}


	
	.leftcolumn{
	grid-column: 1 / 12;
	grid-row: 2 / 3;	
}

	.rightcolumn{
	grid-column: 1 / 12;
	grid-row: 4 / 5;
}

	.leftcolumn2{
	grid-column: 1 / 12;
	grid-row: 3 / 4;	
}

	.rightcolumn2{
	grid-column: 1 / 12;
	grid-row: 5 / 6;
}
	.contactinfo{
		grid-column: 1 / 12;
		grid-row: 3 / 4
		
	}
	
	.secondarycontent{
		grid-row: 6 / 7;
	}
	
	
	.mainpics{
    	grid-template-rows: 1fr 1fr;
	}
    
    /*.fixedpic{
		grid-area: 1/1/2/5;
	}*/
	
	.mybackground{
    	grid-area: 1/1/3/5;
   }
 
 
   
 .alternatepics{	
	display: grid;
	grid-column-gap: 1em; 
	grid-row-gap: 2em;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	align-items: center;
	justify-items: center;
}
   
.photoleft{
	display: grid;
	grid-column: 1/4;
	width: 100%;
	border-radius:5px;
	justify-items: center;
}

.photoright{
	display: grid;	
	grid-column: 1/4;
	width: 100%;
	border-radius:5px;
}

.leftpic{
	grid-column: 1/4;
	grid-row: 1/2;

}

.rightpic{
	grid-column: 1/4;
	grid-row: 3/4;


}
.textleft{
	text-align: justify;
	display: grid;
	grid-column: 1/4;
	grid-row: 4/5;
}

.textright{
	text-align: justify;
	display: grid;
	grid-column: 1/4;
	grid-row: 2/3;	
}

.span2of2{
	display: grid;
	grid-column: 1/3;
	justify-items: center;
	align-items: start;
	text-align: center;
	}
	
.grid{display:grid;}
.row1{grid-row: 1/2}
.row2{grid-row: 2/3}	
.row3{grid-row: 3/4}
.row4{grid-row: 4/5}
.row5{grid-row: 5/6} 
.row6{grid-row: 6/7}
.row7{grid-row: 7/8}
.row8{grid-row: 8/9}
   
}

/*------------------------------------*/

@media (max-width:550px) {
	
	/* .award{
		height: 120px;
		width:90px;	
   }*/
    	
	.leftaward{
		grid-column: 1 / 5;
		grid-row: 1/ 2;
		/*align-self: end;*/
	}

	.rightaward{
		padding-right:0px;
	}	
	

	
}

/*------------------------------------*/

.red {
    color: #ff0000;
}

#zoomimages {
    text-align: center;
    position: relative;
    margin-top: 0px;
    width: 100%;
}

.zoom {
    position: absolute;
    z-index: 0;
}

.end {
    margin-right: 0;
}

.clear {
    clear: both;
}

.zoom a img {
    position: relative;
    border: 0 solid #fff;
}

.pulsate {
    -webkit-animation: pulsate 10s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.2;
}
@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.2;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.2;
    }
}