@charset "utf-8";
/* CSS Document */
/*for pages about us, auto repairs, collision repairs and extra services and contact page*/


/* General Settings */
	a:link {
		padding: 0.1em;
  		background-color: transparent;
  		font-size: 1em; color: #DBF4FB; text-decoration: none;
	}
	a:visited {
		padding: .1em;
  		background-color: transparent;
  		font-size: 1em; color: #DBF4FB; text-decoration: none;
  	}
	a:hover {
		padding: .1em;
 		background-color: transparent;
  		font-size: 1em; color: #ED1C24; text-decoration: none; text-shadow: 0px 0px 2px #FFF;
 	}
	a:active {
		padding: .1em;
  		background-color: transparent;
  		font-size: 1em; color: #ED1C24; text-decoration: underline;
  	}


/* Blank Banner */
	.blackBanner {
  		width: 100%; height: 405px; position: relative; margin: 0 auto;
		background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)), url("../website_images/home/photoslide_2.png");
		background-position: top; background-repeat: no-repeat; background-size: contain;
  	}
	.blackBannerTextContainer {
		width: 80%; padding: 5% 0% 0% 25%;
		overflow: hidden;
	}
	.blackBannerTitle {
		float: left; width: 100%; padding-top:1.5%;
		font-family: "Red Hat Display", sans-serif;font-size: 1.5em; color:#DBF4FB;font-weight:bold;
	}
	.blackBannerText {
		float: left; 
		font-family: "Red Hat Text", sans-serif; font-size: 1em; color: #FFF;
	}

	@media screen and (max-width: 720px) {
		.blackBanner {width: 98%; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("../website_images/general/m_background_photo.png");} 
		.blackBannerTitle {font-size: 1em;}
		.blackBannerText  {font-size: 0.75em;}
	}
			
/* Button Group */
	.btn-group button {
		height: 100px; margin-top: 6%;float: left;
		background-image: url("../website_images/general/btn_off.png");
  		background-color: transparent; 
  		cursor: pointer; 
  		float: left;
		border: none;
		background-position:center;
  		background-repeat: no-repeat;
  		background-size: cover;
		color: #DBF4FB; font-weight: bold; text-shadow: 1px 1px 3px #212121;
	}

	@media screen and (max-width: 720px) {
		.btn-group button { height: 75px;}
	}

	.btn-group button:hover {
  		background-image: url("../website_images/general/btn_on.png");
		background-color: transparent;
		color: #ED1C24;text-shadow: 0 0 3px #212121;
	}

	
/* Contents */

	.c1 img{
 		float: right; right: 8px; display: block;
  		margin: auto;  filter: drop-shadow(8px 8px 10px #212121);
  		width: 90%; border-radius: 5px;
		}

	.c2 {
		width: 5%;
	}


	.c3_Title {
		width: 98% ; padding: 2% 2% 2% 0%;
		font-family: "Red Hat Display", sans-serif;font-size: 1.2em; color:#36454F;
		font-weight: bold; text-transform: uppercase;
	}

	.vl {
  		width: 5px; height:100px; margin: auto; background-color: #F3EC17;
		border-radius: 30px;
	}

	.vl:hover {
		background-color: #36454F; height:100px;
	}
	
	.c3_Text {
		width: 98%; vertical-align: middle; padding-left: 2% 2% 2% 0%;
		font-family: "Red Hat Display", sans-serif; font-size: 1.0em; color:#36454F;
	}

	@media screen and (max-width: 720px) {
		.c1 {display: none;}
		.c2 {display: none;}
		.c2_Title { padding-left: 2%; font-size: 0.9em;}
		.c2_Text { padding-left: 2%; font-size:0.75em;}
	}

/*Table Properties */

	table {
		width: 98%; margin: 0% 2% 0% 0%; 
		border-collapse: collapse;	
	}

	tr:hover {
		background-color: #E4E5E6;
	}