@media screen and (min-width: 250px) {
		/*********************************************************************************************************/
	    /**********************Beginning of show modal animation and styles******************/
	    /*********************************************************************************************************/
	    .product-detail-modal {
	        position: fixed;
	        left: 0;
	        top: 0;
	        width: 100%;
	        height: 100%;
	        background-color: rgba(0,0,0,0.5);
	        opacity: 0;
	        visibility: hidden;
	        transform: scale(1.1);
	        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	        z-index: -1;
	    }
	    
	    .product-detail {
	        position: absolute;
	        top: 35%;
	        left: 50%;
	        transform: translate(-50%, -50%);
	        background-color: white;
	        padding: 5px 7px;
	        width: 100%;
	        border-radius: 3px;
	    }
	    
	    .show-modal-form {
	        opacity: 1;
	        visibility: visible;
	        transform: scale(1.0);
	        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	        z-index: 5;
	    }
	    /*********************************************************************************************************/
	    /**********************End of show modal animation and styles******************/
	    /*********************************************************************************************************/
	    
		.clear {clear: both;}
		body {margin: 0; font-family: sans-serif;}
		.container {width: 100%; margin: 0 auto; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);}
		a {text-decoration: none;}
		button {border: none; cursor: pointer; padding: 5px 7px; border-radius: 2px;}

		.firstNav {background: #E5E5E5; height: 22px;}
		.firstNav div {float: left; text-align: center; padding-top: 1px; color: grey;}
		.physicalAddress {font-size: 13px}

		.socialAddress {font-size: 12px; width: 15%; display: none;}
		.fa-facebook-f, .fa-twitter, .fa-instagram {background: white; padding: 4px 8px; border-radius: 50%;}
		.fa-twitter {padding: 4px 5px;}
		.fa-instagram {padding: 4px 6px;}

		.secondNav {padding-top: 10px;}
		.secondNav div {float: left;}
		.AutogradeLogoDiv {width: 30%; text-align: center;}
		.AutogradeLogoDiv img {height: 60px; width: 120px;}

		.AutogradeTelDiv {width: 62%; margin-top: 10px; margin-right: 5%;}
		.AutogradeTelDiv div {float: right;}
		.comment-icon {font-size: 30px; color: grey; padding-top: 5px; width: 20%; display: none;}
		.AutogradeContactDiv span {display: block; font-size: 14px;}
		.AutogradeTel {color: #387FD4; font-weight: bold;}
		.AutogradeEmail { color: grey;}

		.AutogradeOpeningDaysDiv {margin-top: 10px; margin-right: 5%; display: none;}
		.AutogradeOpeningDaysDiv div {float: right;}
		.clock-icon {font-size: 30px; color: grey; padding-top: 5px; width: 20%;}
		.AutogradeOpeningtDiv span {display: block; font-size: 14px;}
		.AutogradeTime {color: #387FD4; font-weight: bold;}
		.AutogradeDay { color: grey;}

		/*navigation menu list*/
		.nav-menu-ul {list-style: none; width: 95%; padding: 4px 0; float: left; background: #1E60A6; padding-left: 5%; margin-top: 0;}
		.nav-menu-ul li {float: left; margin: 1px 2%; font-size: 15px; padding: 2px 3px;}
		.nav-menu-ul li a {text-decoration: none; color: white;}
		.active {background: #EB0105; border-radius: 5px; font-weight: bold; padding: 2px 4px;}

		/*slider*/
		.visible {z-index: 1;}
		#slider-container {position: relative; margin-top: -15px;}
		.slider-div {width: 100%; height: 250px; position: relative;}
		.slider-image {width: 100%; height: 100%; background-size: cover; position: absolute; top: 0; left: 0;}
		#prev {position: absolute; left: 2%; top: 35%; color: white; z-index: 2; font-size: 50px;}
		#next {position: absolute; right: 2%; top: 35%; color: white; z-index: 2; font-size: 50px;}

		.home-about-div {background: white; padding: 20px 5%; height: 300px;}
		.home-about-div div {float: left;}
		.about-summary {text-align: center; width: 100%;}
		.about-images {width: 100%; height: 250px;}
		.about-images-img { background-size: cover; width: 100%; height: 100%; margin-top: 20px; display: block;}

		.home-service-div {padding-top: 20px; padding-bottom: 20px; background: #F8F7F7;}
		.service-div {color: #585454; text-align: center; font-weight: bold;}
		.service-info {color: grey; text-align: center; width: 60%; margin: 1px auto;}
		.service-info button {padding: 7px; background: #717171; color: white; margin: 5px auto; max-width: 50%; display: block;}
		.home-services-list div { float: left; margin: 20px auto; text-align: center; width: 100%; color: #585454;}
		.home-services-list div p { margin: 0; font-weight: bold; margin-bottom: 5px;}

		.home-product-div {padding-top: 20px; padding-bottom: 20px; background: black; color: white;}
		.product-div {text-align: center; font-weight: bold;}
		.product-info {text-align: center; width: 60%; margin: 1px auto;}
		.home-product-image-div div {background: white; float: left; width: 96.5%; padding: 3px;
			margin: 5px 1%; text-align: center; color: black;}
		.home-product-image-div div span {width: 100%; height: 200px; background-size: cover; display: block;}
		.view-more-product {color: black; background: white; margin: 5px auto; max-width: 50%; display: block}

		.page-div {padding: 7px;}

		.address-div {float: left; width: 90%;}
		.address-div ul {list-style: none;}
		.address-div ul li {margin-bottom: 10px;}
		.fa-street-view, .fa-phone, .fa-at {color: #C50909;}
		.contact-form {width: 93%; margin: 1px 1%; padding: 2%; float: left; border: 1px solid rgba(0,0,0,0.2);}
		.contact-form div {margin: 10px 0;}
		label {font-family: sans-serif; font-size: 17px;}
		#contact-form-email, #contact-form-subject {width: 100%; border-radius: 3px; height: 30px; border: 1px solid rgba(0,0,0,0.2); margin-top: 3px;}
		#contact-form-content {width: 100%; border-radius: 3px; box-shadow: none; border: 1px solid rgba(0,0,0,0.2); resize: none; padding: 3px;}
		.contact-form-button {background: #C50909; color: white; border: none; border-radius: 2px; padding: 5px; 
				box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); margin-left: 1%; font-size: 15px; float: right;}


		.about-page-header, .service-page-header {margin-top: 150px;}
		.page-header-div {position: relative;}
		.page-header-div img {width: 100%; height: 450px;}
		.page-header-detail {position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: black;
			 opacity: 0.7; z-index: 10; text-align: center; color: white;}

		hr {color: #ccc; width: 5%; margin-top: -10px;}
		
		footer {padding: 4px 1px; background: #1E60A6; color: white;}
		.footer-menu {width: 100%; margin: 0 auto;}
		.footer-menu span{margin: 5px 1%;}
		.footer-menu span a{color: white; text-decoration: none;}
		.footer-menu span a:hover {border-bottom: 1px solid white;}
		.copyright h5 {text-align: center; margin: 0; margin-top: 5px;}

	}

	@media screen and (min-width: 500px) {
		.socialAddress {width: 23%;}

		.AutogradeLogoDiv {width: 25%;}
		.AutogradeTelDiv {width: 35%;}


		.nav-menu-ul {width: 80%; padding-left: 20%;}

		.slider-div {width: 100%; height: 350px;}
		
		
		#prev {top: 43%;}
		#next {top: 43%;}
		
		.service-info button {margin-left: 40%;}

		.product-detail {
	        top: 42%;
	        width: 90%;
	    }

		.home-product-image-div div {width: 47%; margin: 5px 0.9%;}

		.footer-menu {width: 90%; margin: 0 auto;}
		.footer-menu span {margin: 5px 4%;}
	}

	@media screen and (min-width: 600px) {
		.product-detail {
	        top: 45%;
	    }
	}

	@media screen and (min-width: 650px) {
		.physicalAddress {font-size: 13px; width: 70%;}
		.socialAddress {width: 23%; display: block;}

		.AutogradeOpeningDaysDiv {width: 165px; display: block;}
		.AutogradeLogoDiv {width: 25%;}
		.AutogradeTelDiv {width: 34%;}

		.home-product-image-div div {width: 30%; margin: 5p5x 1.32%;}

		.product-detail {
	        top: 50%;
	    }

		.footer-menu {width: 80%; margin: 0 auto;}
		.footer-menu span {margin: 5px 5%;}
	}

	@media screen and (min-width: 700px) {
		.socialAddress {width: 23%;}
		.AutogradeLogoDiv {width: 25%;}
		.AutogradeTelDiv {width: 31%;}

		.slider-div {width: 100%; height: 370px;}
		.service-info button {margin-left: 40%;}

		.product-detail {
	        top: 45%;
	        width: 60%;
	    }

		.address-div {width: 46%;}
		.contact-form {width: 46%;}

		.footer-menu {width: 80%; margin: 0 auto;}
		.footer-menu span {margin: 5px 5%;}
	}

	@media screen and (min-width: 750px) {
		.socialAddress {width: 18%;}
		.AutogradeLogoDiv {width: 35%;}
		.AutogradeTelDiv {width: 28.5%;}

		.nav-menu-ul {width: 80%; padding-left: 20%;}

		.about-summary {text-align: center; width: 50%;}
		.service-info button {margin-left: 31%;}
		.about-images {width: 50%;}

		.home-services-list div {margin: 20px 5%; width: 23.33%;}

		.footer-menu {width: 60%; margin: 0 auto;}
		.footer-menu span {margin: 5px 5%;}
	}

	@media screen and (min-width: 850px) {
		.socialAddress {width: 18%;}
		.AutogradeLogoDiv {width: 35%;}
		.AutogradeTelDiv {width: 25%;}

		.slider-div {width: 100%; height: 400px;}

		.service-info button {margin-left: 35%;}

		.product-detail {top: 46%;}
	}

	@media screen and (min-width: 950px) {
		.container {width: 90%;}
		.socialAddress {width: 18%;}
		.AutogradeLogoDiv {width: 35%;}
		.AutogradeTelDiv {width: 27%;}

		.product-detail {top: 49%;}
	}

	@media screen and (min-width: 1000px) {
		.container {width: 80%;}
		.socialAddress {width: 18%;}
		.AutogradeLogoDiv {width: 35%;}
		.AutogradeTelDiv {width: 28%;}

		.slider-div {width: 100%; height: 450px;}

		.product-detail {
	        top: 50%;
	        width: 50%;
	    }
	}

	@media screen and (min-width: 1100px) {
		.physicalAddress {width: 70%;}
		.socialAddress {width: 18%;}
		.container {width: 75%;}
		.AutogradeLogoDiv {width: 35%;}
		.AutogradeTelDiv {width: 26%;}
	}

	@media screen and (min-width: 1250px) {
		.container {width: 65%;}
		.AutogradeLogoDiv {width: 30%;}
	}