* {box-sizing: border-box;}

:root {
 --primary-color: #fe0100;
 --text-color: #000000;
}

body {
	background-color: #FFFFFF;
	color: var(--text-color);
	font-family: Verdana, Calibri, Arial, Helvetica, sans-serif;
    padding: 0px;
	font-size: 14pt;
	background-image: url("../images/d4a-background.jpg");
	background-repeat: repeat-y;
}

h1 {
	font-size: 20pt;
	font-weight: bold;
}

h2 {
	font-size: 18pt;
	font-weight: bold;
}

h3 {
	font-size: 16pt;
	font-weight: bold;
	background-color: var(--primary-color);
	color: #FFFFFF;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
}

h6 {
	font-size: 10pt;
}

a:link     { color: #0000ff; text-decoration: none; } 	/* unvisited link */
a:visited  { color: #0000ff; text-decoration: none; }     	/* visited links */
a:active   { color: #0000ff; text-decoration: none; } 	/* active links */
a:hover    { color: #fff200; text-decoration: underline; }	/* hovering links */

p {
	font-size: 12pt;
}

img {
	border: 0;
}

#footer {
    background-color: var(--primary-color);
    color: #FFFFFF;
    padding-top: 25px;
	margin: 0, auto;
	border-radius: 10px 10px 0px 0px;
}

#footer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#footer ul li { display: inline; }

#footer ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
}

#footer ul li a:hover {
	color: var(--primary-color);
	background-color: #ffffff;
}

.panel{
	margin-top: 10px;
	padding:20px;
	border: 3px solid var(--primary-color);
	box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	border-radius: 10px 10px 10px 10px;
	color:#000000;
	font-size:12pt;
}
.filled_panel{
	margin-top: 10px;
	padding:20px;
	border: 3px solid #800000;
	box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	border-radius: 10px 10px 10px 10px;
	background-color:#800000;
	color:#FFFFFF;
}

#container-fluid {
    padding: 0px;
    margin: 0px;
}

#maincontent {
	padding:15px;
}

.center_align {
	text-align: center;
}
.right_align {
	text-align: right;
}
.floatright {
	float: right;
}
.floatleft{
	float:left;
}

#frontpage_other{
	display: none;
}

#frontpage_large1{
	display: block;
}

.ExperienceGrid {
	max-width:1000px;
}

input[type=text].postcodeinput		{font-size:14px;color:rgb(150,150,150);width:50px;}
input[type=number].promocodeinput	{font-size:14px;color:rgb(150,150,150);width:60px;}

.ExperienceTypeBlock {
	float:left;
	width:275px;
	height:172px;
	background-size:cover;
	border-radius: 10px 10px 10px 10px;
	margin:0 auto;
}
.ExperienceTypeBlock2 {
	float:left;
	width:275px;
	height:40px;
	background-size:cover;
	border-radius: 10px 10px 10px 10px;
}
.ExperienceTypeTitle {
	width:265px;
	height:30px;
	background-color:rgba(255,0,0,0.5);
	padding: 1px 8px 1px 8px;
	color:#ffffff;
}
.ExperienceTypeProse {
	width:265px;
	height:132px;
	background-color:rgba(255,255,255,0.55);
	padding: 2px 8px 1px 8px;
	color:#000000;
	font-size:14px;
}

#region_dropdown {
	display: none;
}

.clear {
    clear: both;
}

/* search_exp_result.asp styles */
#advert_rating {
	margin:0 auto; 
	font-family:Verdana, Geneva, sans-serif;
}
#review_text{
	width:95%; 
	position:relative; 
	font-size:18px; 
	color:rgb(0,0,0); 
	text-align:left; 
	overflow:hidden;
}
#experience {
	margin-top: 10px;
	padding:20px;
	border: 3px solid var(--primary-color);
	-webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.75);
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	color:var(--text-color);
}

.headline {
	padding: 2px 0 2px 0; 
	color:#FFFFFF; 
	font-weight:bold;
	background-color: var(--primary-color);
	padding-left:10px;
	padding-right:10px;
	height:35px;
}
.headline_text {
	padding: 5px 0 5px 0; 
	color:#FFFFFF; 
	font-weight:bold;
	font-size: 12pt;
}

.experience_section_wrapper {
	padding:10px;
}

#under_experience{
	padding-left:10px;
	padding-right:10px;
}

div.smimagebox { 
	float:left; 
	width:86px; }

.searches {
	font-size:12px;
	text-align:right;
	color:#ffffff;
	padding-right:20px;
	padding-top:5px;
}
.redtext {
	color:#ff0000;
}
#logotext {
	color:#ffffff;
	font-size: 12pt;
}

A.m:link     { font-size: 16px; color: #ffffff; text-decoration: none; } 	/* unvisited link */
A.m:visited  { color: #ffffff; text-decoration: none; }     	/* visited links */
A.m:active   { color: #ffffff; text-decoration: none; } 	/* active links */
A.m:hover    { color: #F4A460; text-decoration: underline; }	/* hovering links */

p.m {
	font-size: 10px;
}

.review_rating {
	color:#F4A460;
}

#map-canvas {
	width:585px; 
	height:400px; 
	margin-left:15px; 
	border:2px #E0E0E0 solid;
}


.youngdrivertable{
	width:100%;
	background-color:#404040;
	border:4px solid #ffffff;
	font-size:12pt;
}
.youngdrivertablerow{
	background-color:#707070;
}

#reviewdiv {width:80%; 
	height:auto; 
	margin:0 auto; 
	overflow:auto; 
	border:1px solid rgb(150, 150, 150);
	background-color:rgb(200, 200, 200); 
	font-family:Verdana, Geneva, sans-serif;
	border-radius: 10px 10px 10px 10px;
}

.fivestars		{width:150px;height:35;}
.price			{font-size:18pt; color:#FF0000; font-weight:bold; margin-top:-20px;}
input.buy 		{width: 160px;  height: 35px; font-size: 14pt;}
.redtext		{color: #ff0000;}
#pricearea		{float:left;}

/* end of search_exp_result.asp */

#postcodehints {
	z-index:9999;
	display:none;
	position:absolute;
	width:190px;
	background-color:#ffa;
	color: blue;
	padding: 5px;
	font-size:15px;
	text-align: left;
}

#mainheaderdiv {
	background-color: var(--primary-color);
	height: 115px;
	margin: 0,auto;
}

#mainlogo {
	padding-top: 5px;
	padding-left: 20px;
}

#mainheaderlogo {
	padding-left: 15px;
	padding-top: 5px;
	float:left;
}

/* SJG Navigation bar customisations */
.navarea {

	/* width: 1580px; */
	margin: 0, auto;
}
.navbar {
	height: 75px;
	border-radius: 0px 0px 10px 10px;
}

.bg-mainnavbar {
	background-color: var(--primary-color);
	border-bottom: 1px #ffffff;
	border-top: 1px #ffffff;
}

.bg-subnavbar {
	background-color: var(--primary-color);
	border-bottom: 1px #ffffff;
	border-top: 1px #ffffff;
}

.navbar-dark .navbar-nav .nav-link {
	color: #ffffff;
	text-align: center;
}

.navbar-dark .navbar-brand {
	font-size: 14pt;
	font-weight: bold;
	text-decoration: none;
}

.navbar-dark .navbar-nav .nav-item{
	z-index: 99;
	background: var(--primary-color);
	width: 100%;
}

.navbar-dark .navbar-nav .nav-item {
	z-index: 99;
	background: var(--primary-color);
}

.navbar-dark .navbar-nav > li > a:hover,
.navbar-dark .navbar-nav > li > a:focus {
  color: var(--primary-color);
  background-color: #000000;
  height: 40px;
}
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus {
  color: var(--primary-color);
  background-color: #ffffff;
  height: 40px;
}

.navbar-brand {
	color:#000000;
	font-size: medium;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    /* transform: translatex(-50%); */
}

.ssearch_duration {
	text-align: right;
}

/* SJG end of navigation bar customisation */

/*MEDIA QUERY*/
/* Extra small devices, phones */
@media only screen and (max-width : 576px) {
	body {
		background-color: #ffffff;
        color: #000000;
		background-image: none;
    }
    img {
		display: block;
		max-width:300px;
		max-height:85px;
		width: auto;
		height: auto;
	}

	#mainlogo img {
		width:180px;
		height:25px;
	}

	h1 {
		font-size: 20pt;
	}

	h2 {
		font-size: 18pt;
	}

	h3 {
		font-size: 16pt;
		font-weight: bold;
	}

	h6 {
		font-size: 12pt;
	}

	p{
		font-size: 12pt;
	}
	#logotext {
		font-size: 8pt;
	}
	table {
		font-size: 12pt;
	}
	.ExperienceGrid {
		width:370px;
		margin:0px auto;
	}

	.ExperienceTypeBlock {
		width:325px;
		height:220px;
	}
	.ExperienceTypeTitle {
		width:315px;
		height:30px;
	}
	.ExperienceTypeProse {
		width:315px;
		height:182px;
		font-size:20px;
	}
	
	.ExperienceTypeBlock2 {
	float:left;
	width:325px;
	height:40px;
	background-size:cover;
	border-radius: 10px 10px 10px 10px;
	}	

	#search_map {
		display: none;
	}

	#region_dropdown {
		display: block;
	}
	div.header {
		width: 100%;
		}
	div.body {
		width: 100%
		}	
	div.menu {
		display: none;
		width: 0px;
	}
	div.content {
		width: 100%;
	}
	#page_header {
		display:none;
	}
	#headline_text {
		font-size:10px;
	}
	#subheading {
		display: none;
	}
	#map-canvas {
		display: none;
	}
	#mainheaderdiv{
		height:150px;
		margin:0,auto;
	}
	#reviewdiv {
		display: none;
	}
}

/* Small devices (tablets, 768px and up) also landscape phones*/
@media only screen and (max-width: 768px) and (min-width: 577px){
    body {
        background-color: #d6dbdf;
        color: #000000;
		background-image: none;
    }
    img {
		display: block;
		max-width:300px;
		max-height:85px;
		width: auto;
		height: auto;
	}

	h1 {
		font-size: larger;
	}

	h2 {
		font-size: medium;
	}

	h3 {
		font-size: small;
		font-weight: bold;
	}

	h6 {
		font-size: x-small;
	}

	p{
		font-size: 14pt;
	}

	table {
		font-size: smaller;
	}

	.ExperienceGrid {
		width:675px;
		margin:0px auto;
	}
	.ExperienceTypeBlock {
		width:265px;
		height:210px;
	}
	.ExperienceTypeTitle {
		width:255px;
		height:30px;
	}
	.ExperienceTypeProse {
		width:255px;
		height:170px;
		font-size:16px;
	}

	.ExperienceTypeBlock2 {
	float:left;
	width:265px;
	height:40px;
	background-size:cover;
	border-radius: 10px 10px 10px 10px;
	}
	
	#logotext {
		font-size: 8pt;
	}
	
	#search_map {
		display: none;
	}

	#region_dropdown {
		display: block;
	}
	div.header {
		width: 100%;
		}
	div.body {
		width: 100%
		}	
	div.menu {
		display: none;
		width: 0px;
	}
	div.content {
		width: 100%;
	}
	#page_header {
		display:none;
	}
	#map-canvas {
		display: none;
	}
	.experience_section_wrapper {
		padding:10px;
		background-color: #ffffff;
		color:var(--text-color);
	}
}

/* Medium devices (desktops, 992px and up) */
@media only screen and (max-width: 1199px) and (min-width: 769px){
	#search_map {
		display: none;
	}

	#region_dropdown {
		display: block;
	}

	.ExperienceGrid {
		width:800px;
		margin:0px auto;
	}
	.ExperienceTypeBlock {
		width:265px;
		height:210px;
	}
	.ExperienceTypeTitle {
		width:255px;
		height:30px;
	}
	.ExperienceTypeProse {
		width:255px;
		height:170px;
		font-size:16px;
	}

	.ExperienceTypeBlock2 {
	float:left;
	width:265px;
	height:40px;
	background-size:cover;
	border-radius: 10px 10px 10px 10px;
	}
		
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.ExperienceGrid {
	max-width:950px;

}