.top-image {
	width: 100%;
	height: 240px;
	-o-object-fit: cover;
	   object-fit: cover;
}

.top-background-image {
	width: 100%;
	height: 240px;
	background-image: url("../Images/tyreTred.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}



.heading-container2 {  /**CLEARS THE ORIGINAL STYLING FROM MAIN CSS SO I CAN FLIP THE HEADING TO THE RIGHT**/
	border: none;
}


.heading-container2 {
	width: 215px;
    border-bottom: 50px solid white;
    border-left: 25px solid transparent;
    position: absolute; /**THE ONLY WAY I CAN POSITION THE HEADING TO THE RIGHT I THINK BECAUSE OF THE GRID??**/
    top: -76px;
    right: 0px;
}


/*****BOOK NOW PAGE *******/


.top-background-image-form {
	width: 100%;
	height: 240px;
	background-image: url("../Images/southseaMotExterior.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: 39px;
}


.form {
	background-color: white;
	border: 4px solid lightblue;
	position: relative;
	z-index: 2 ;
}


.form-heading {
	width: 50%;
    border-bottom: 50px solid lightblue;
    border-right: 25px solid transparent;
    position: relative;
	float: left;
    top: -77px;
    left: -4px;

}

.form p {
	clear: both;
}

.form-heading h2 {
	position: relative;
	top: 40px;
}

.call-us {
	background-color: white;
	border: 4px solid grey;
	padding-bottom: 30px;
	position: absolute;
    top: 144px;
	right: 0;
	z-index: 1;
}


.call-us-heading {
	width: 50%;
    border-bottom: 50px solid grey;
    border-left: 25px solid transparent;
    float: right;
    position: relative;
    top: -77px;
    right: -4px;
}

.call-us p {
	clear: both;
}

.call-us-heading h2 {
	position: relative;
	color: lightblue;
	top: 40px;
}




#form {
	margin: 10px;
}

.form-questions {
	color: #54B9D8;
	padding: 10px;
	font-weight: bold;
}

.form-line {
	border-top: 1px solid #54B9D8;
	width: 90%;
	margin: 10px auto;
}

#form input {
	padding: 5px;
	margin: 10px auto;
	border: 1px solid black;
}

#form textarea {
	width: 300px;
	height: 100px;
	border: 1px solid black;
}

.required {
	color: red;
}

.form-button {
	background-color: #54B9D8;
	color: white;
}







.welcome-content {
	padding-bottom: 40px;
	position: relative;

}

.highlighted {
	color:#54B9D8;
}


.back-button {
	width: 30px;
	background-color: rgba(17, 17, 17, 0.75);
	padding: 5px;
	border-radius: 5px;
    position: absolute;
    top: 123px;
    left: 5px;
	-webkit-box-shadow: 0px 0px 5px white, 
	0px 0px 5px white;
	        box-shadow: 0px 0px 5px white, 
	0px 0px 5px white;
}


.relevent-promotion {
	width: 100%;
	background-color: #54B9D8;
	margin: 10px 0;
}


.owl-heading {
	width: 215px;
    border-bottom: 50px solid white;
    border-left: 25px solid transparent;
    position: absolute; /**THE ONLY WAY I CAN POSITION THE HEADING TO THE RIGHT I THINK BECAUSE OF THE GRID??**/
    top: -104px;
    right: 0px;
}

.owl-heading h2 {
	color: #333;
	font-family: 'Audiowide', cursive;
	position: relative;
	top: 58px;
	text-align: center;
}


.owl-link a {
	color: #7cab11;
	border-bottom: 2px solid #8B4513;
}

.owl-link {
	margin-top: 35px;
}


.about-heading {
	width: 215px;
    border-bottom: 50px solid white;
    border-left: 25px solid transparent;
    position: absolute; /**THE ONLY WAY I CAN POSITION THE HEADING TO THE RIGHT I THINK BECAUSE OF THE GRID??**/
    top: -77px;
    right: 0px;
}

.about-heading h2 {
	color: #333;
	font-family: 'Audiowide', cursive;
	position: relative;
	top: 42px;
	text-align: center;
}



/************************************RESPONCIVE DESIGN ***************************************/

/*****PHONE LANDSCAPE*****/

@media only screen and (min-width: 480px) {
	.call-us {
		width: 100%;
		top: 126px;
	}
}


/*****IAPAD AND IPAD PRO*****/

@media only screen and (min-width: 768px) {
	
	
	.top-image {
		height: 353px;
	}
	
	.back-button {
		width: 30px;
		position: absolute;
		top: 140px;
		left: 15px;
	}
	
	.top-background-image {
		height: 362px;
	}
	
	.owl-heading {
		top: 262px;
	}
	
	.owl-heading h2 {
		top: 70px;
	}
	
	.about-heading {
		top: 300px;
	}
	
	.about-heading h2 {
		top: 45px;
	}
	
	
	.top-background-image-form {
		height: 362px;
	}
	
	.form-heading {
		top: -86px;
	}
	
	.call-us {
		top: 139px;
		width: 100%;
		right: -8px; /*pushes the element to the right because fro some reason its not sticking to the right??*/
	}
	
	.call-us-heading {
		top: -86px;
	}
	
	.form {
		width: 100%;
	}
	
	
	

}


/***************************   For ipad landscape/ ipad pro  *******************/

@media only screen and (min-width: 992px) {
	.call-us {
		top: 115px;
	}
}


/***************************   For Desktop  *******************/

@media only screen and (min-width: 1200px) {
	
	.welcome-content {
		display: block;
	}
	
	.welcome-content a:hover {
		opacity: 0.5;
	}
	
	.top-background-image-form {
		display: none;
	}
	
	.top-image {
		display: none;
	}
	
	.top-background-image {
		display: none;
	}
	
	.back-button {
		top: 25px;
		left: 320px;
		z-index: 1000;
	}
	
	.back-button:hover {
		opacity: 0.5;
	}
	
	#back-to-top-button:hover {
		cursor: pointer;
		opacity: 0.5;
	}
	
	#services {
		background-color:rgba(255, 255, 255, 0.85);
		width: 80%;
		position: relative;
		left: 10%;
	}
	
	.heading-container2 {
		top: -86px;
	}
	
	.services .heading-container2 {
		top: -77px;
	}
	
	.heading-container2 {
		border-bottom: 50px solid rgba(255, 255, 255, 0.85);
	}
	
	.welcome-content {
		display: block;
		background-color: rgba(255, 255, 255, 0.85);
		padding-top: 37px;
		width: 60%;
		position: relative;
		left: 20%;
		margin: 250px 0px 188px;
	}
	
	#body-services {
		background: url(../Images/toolsWall.jpg) no-repeat fixed;
		background-size: cover;
	}
	
	.services {
		margin-top: 250px;
		margin-bottom: 160px;
	}
	
	
	#body-mot {
		background: url(../Images/manUnderCar.jpg) no-repeat fixed;
		background-size: cover;

	}
	
	#body-servicing {
		background: url(../Images/manHoldingTool.jpg) no-repeat fixed;
		background-size: cover;
		
	}
	
	#body-fleet {
		background: url(../Images/carFleet.jpg) no-repeat fixed;
		background-size: cover;

	}
	
	#body-tyres {
		background: url(../Images/tyreTred.jpg) no-repeat fixed;
		background-size: cover;

	}
	
	#body-owl {
		background: url(../Images/owlMotors.jpg) no-repeat fixed;
		background-size: cover;

	}
	
	.owl-heading {
		top: -121px;
		border-bottom: 50px solid rgba(255,255,255,0.8);
	}
	
	#body-about {
		background: url(../Images/southseaVan.png) no-repeat fixed;
		background-size: cover;

	}
	
	#about-content {
		margin: 300px 0; /*adjust when more content goes in as this is used tp push the footer down out of view aswell as from top to center it*/
	}
	
	.about-heading {
		top: -86px;
		border-bottom: 50px solid rgba(255, 255, 255, 0.85);
	}
	
	#body-booking {
		background: url(../Images/southseaVan.png) no-repeat fixed;
		background-size: cover;
		background-color: #000;
	}
	
	#style-form-desktop {
		margin-top: 200px; /*pushes the form below the header*/
	}
	
	.form-heading {
		cursor: pointer;
	}
	
	.call-us-heading {
		cursor: pointer;
	}
	
	footer a:hover {
		opacity: 0.5;
	}
	
}