body {
    margin-left: auto;
    margin-right: auto;
	max-width: 100%;
    background-image: url(images/background1.3.jpg);
     background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
	background-attachment: fixed;
    font-family: semplicitapro, sans-serif;
	overflow-x: hidden;
}
html {
	overflow-x: auto;
	overflow-y: scroll;
}
p {
	color: #ffffff;
	font-size: 15px;
	line-height: 22px;
	font-family: 'open sans', sans-serif;
	letter-spacing: 0.2px;
}
h1 {
    color: #ffffff;
	clear: both;
	font-size: 60px;
	line-height: 70px;

}
h2 {
	color:  #f9b243;
	font-size: 40px;
	letter-spacing: 1px;
	
}
h3 {
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
}
h4 {
	font-size: 15px;
	color: #ffffff;
	font-weight: 100;
}
h5 {
	font-size: 15px;
}
h10 {
	font-size: 14px;
}
h11{
	font-size: 12px;
}
 
.bg-img {
  /* The image used */
  background-image: url(images/01.jpg);
  min-height: 95vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}
#navigation img{
	float: left;
	width: 280px;
	margin-top: -20px;
	margin-bottom: 20px;
	padding-left: 70px;
	transition: 0.5s ease-in;
}
#navigation:hover img {
	 transform: scale(1.1);
}

/* Position the navbar container inside the image */
#navigation {
  margin-right: auto;
	margin-top: auto;
	padding-top: 50px;
	padding-right: 20px;
  	width: auto;
	position: fixed;
	z-index: 1000;
	transition: background-color 0.5s ease-out;
	
}
nav {
	top: 0;
	left: 0px;
	right: 0;
}
/* The navbar */
.topnav {
 display: inline-block;
 overflow: hidden;
 margin-right: 30px;
	float: right;
}

/* Navbar links */
.topnav a {
  color: #D1C7A1;
 font-weight: 700;
 
  padding: 14px 16px;
  text-decoration: none;
  font-size: 13px;
letter-spacing: .5px;
transition: 0.4s ease-out;


}

.topnav a:hover {
  color: #f9b243;
}
nav.scroll {
  background-color: rgba(36,50,61,0.9);
  color: #eef;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 13px;  
  border: none;
  outline: none;
  color: white;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  font-size: 12px;

}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

a.active1 {
	color: red;
	background-color: none;
}

 i {
  border: solid #D1C7A1;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
	 margin-left: -5px;
	 margin-right: 0px;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.top {
	position: relative;
	top: -600px;
	margin-left: 80px;
	z-index: 10;
}
.top p {
	width: 35%;
}
.topfirst {
	position: absolute;
	top: 20%;
	left: 40%;
	overflow: hidden;
	width: 60%;
	
}
.topfirst img {
	overflow: hidden;
}
.responsive {
	width: 100%;
	height: auto;
}
#headevent{
	text-align: center;
	margin-top: -250px;
}
.events {
 display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end;
    justify-content: center;
	height: 100%;
	width: 100%;	
}
.second {
	width: 35%px;
	padding: 20px;
	height: 350px;
	text-align: center;
	margin: 10px;
	transition: 0.4s ease-out;
	color: #ffffff;
	
}
.second h3{
	margin-bottom: 10px;
	font-weight: 800;
	letter-spacing: 0.7px;
}

.second:hover {
	background-color: #f9b243;
}
.second:hover h3{
	color: #24323D;
}
.second:hover h4{
	color: #24323D;
}


.second a {
	text-decoration: none;
}

.second h4 {
	font-weight: 100;
	margin-top: 0px;
	
}
.button {
	width: 10%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: #000000;
	color: white;
	
}
.button h5 {
	border: .1px solid #ccc;
	padding: 10px;
}
.button a {
	text-decoration: none;
	color: white;
}
.button:hover {
	background-color: red;
}



.secondphoto {
	margin-top: 200px;
	margin-bottom: 150px;

}
.make {
	margin-left: auto;
	margin-right: auto;
	max-width: 70%;
	height: 450px;
}
.make .photo  {
	float: left;
	width: 450px;
}
.models {
	width: 50%;
	float: right;
}


/******************ourservices.html***************/

.bg-img-two {
  /* The image used */
  background-image: url(images/services1.1.jpg);
  min-height: 95vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}

.topservices {
	position: absolute;
	top: 40%;
	z-index: 10;
	text-align: center;
	width: 40%;
	 left: 50%;
  transform: translate(-50%, -50%);
}
.topservices i {
	border: none;
}
.topservices p {
	font-size: 18px;
	line-height: 27px;
	
}
.introservices {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	margin-bottom: 250px;
}
.introservices h3 {
text-align: center;
}

.introservices h2 {
	text-align: center;
}
.introservices p{
	columns: 2;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.introservices i {
	border: none;
}

.services {
	height: 100%;
	background-color:rgba(28,27,26,0.8);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-bottom: 100px;
	margin-top: 100px;
	
}
.services h2 {
	text-align: center;
	letter-spacing: 1px;
	padding-top: 80px;
}
.picktop {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}
.pick {
	display: inline-flex;
	flex-flow: row wrap; 
	align-content: center;
	justify-content: center;
	margin-bottom: 100px;
    justify-content: center;
	width: 30%;
	margin-left: 15px;
	margin-right: 15px;
}

.pick a {
	color: #ffffff;
	transition: 0.4s ease-out;
	text-decoration: none;
	font-weight: 900;
	font-size: 18px;
	width: 400px;
	text-align: center;
	font-size: 25px;
}
ul {
	background-color: none;
	color: #ffffff;
	list-style-type: none;
	text-align: center;
	padding-left: 0px;
	line-height: 40px;
}

li {
	font-size: 15px;
}


/******************maintenance.html ***************/
.bg-img-maint {
	/* The image used */
  background-image: url(images/maintenance01.jpg);
  min-height: 95vh;
	

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}
.maintenanceservice {
	background-color:  rgba(52,68,72,0.9);
	position: absolute;
	top: 40%;
	z-index: 10;
	text-align: center;
	width: 50%;
	padding-bottom: 50px;
	left: 50%;
  transform: translate(-50%, -50%);
}
.maintenanceservice p {
	font-size: 18px;
}
.maintenanceservice h1 {
	margin-bottom: 0px;
}
.maintser {
	 display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end;
    justify-content: center;
	height: 100%;
	width: 100%;
	margin-top: 200px;
	margin-bottom: 200px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 600px;
 margin: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card-front h3 {
	background-color: #f9b243;
	padding: 10px;
	color: #1C1B1A;
}
.flip-card-front p {
	text-align: left;
	
}


/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}



/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: rgba(28,27,26,0.8);
  color: black;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front p {
	padding: 18px;
}


/* Style the back side */
.flip-card-back {
  background-color: red;
  color: #1C1B1A;
  transform: rotateY(180deg);
padding: 10px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

}

.flip-card-back h3 {
	color: #1C1B1A;
	
}
.flip-card-back p {
	font-weight: 600;
}
.flip-card-back li {
	font-size: 14px;
	line-height: 20px;
	font-weight: 100;
}

/******************repair.html ***************/
.bg-img-repair {
	/* The image used */
  background-image: url(images/01repair.jpg);
  min-height: 95vh;
	

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}
/******************2.4restoration.html ***************/
.bg-img-restoration {
	/* The image used */
  background-image: url(images/01restoration.jpeg);
  min-height: 95vh;
	

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;

	
}


.restoration {
	 display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end;
    justify-content: center;
	height: 100%;
	width: 100%;
	margin-top: 200px;
	margin-bottom: 200px;
}

.flip-card2 {
  background-color: transparent;
  width: 400px;
  height: 600px;
 margin: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card2:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/******************aboutus.html***************/


.bg-img-three{
  /* The image used */
  background-image: url(images/aboutus1.1.jpg);
  min-height: 95vh;
	

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}
.aboutquote {
	position: absolute;
	top: 50%;
	text-align: center;
	left: 50%;
  	transform: translate(-50%, -50%);
	background-color: rgba(52,68,72,0.9);
}
blockquote {
	color: #ffffff;
	font-size: 30px;
	padding: 50px;
	z-index: 10;
	width: 90%;
	line-height: 50px;
}
blockquote i {
	border: none;
}
.about {
	margin-top: 200px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;

}
.abouttext {
	float: right;
	width: 55%;
	margin-left: auto;
	
	height: 400px;
	margin-bottom: 200px;
}
.about img {
	float: left;
	width: 40%;
	
}
.about h2 {
	margin: 0px;
	
}
.about h3 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.mission {
	clear: both;
	text-align: center;
	background-image: url(images/about3.jpg);
	height: 800px;
	background-position: center;
  	background-repeat: no-repeat;
	 background-size: cover;
	margin-bottom: 200px;
	opacity: 0.9; 
    filter: alpha(opacity=20);		
}

.mission .Text {
	float: right;
	width: 40%;
	background-color:rgba(28,27,26,0.9);
	height: 60%;
	margin: 70px 190px 0px 0px;
}

.Text img {
	margin-top: 40px;
}

.Text h4 {
	width: 80%;
	margin-left: auto;
	margin-right: auto

}

/******************FAQs.html*******************/

.FAQs {
width: 70%;
margin-left: auto;
margin-right: auto;
height: 700px;
margin-top: 200px;
margin-bottom: 200px;
z-index: -1;
}


.accordion {
  background-color:rgba(52,68,72,0.9);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
	margin-left: auto;
	margin-right: auto;
border-left: 6px solid #f9b243;
	margin-bottom: 25px;
	font-weight: 600;
}
.accordion b {
	font-size: 40px;
font-weight: 100;
color: #f9b243;
}

.active, .accordion:hover {
  background-color: red;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;

}

.active:after {
  content: "\2212";
}

.panel {
  padding: 10px 25px 10px 25px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: -25px;
	margin-bottom: 20px;
}

.panel p {
	color: #1C1B1A;
	
	
}


/******************events.html*******************/

.slideshow {
	margin-top: 200px;
}
.slideshow h2 {
	width: 70%;
	margin-left: auto;
	margin-right: auto;

}
.firstevent {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	height: 400px;
	
}
.firstevent img {
	width: 50%;
	float: left;
	position: relative;
}
.eventtext {
	width: 40%;
	float: right;
	margin-bottom: 80px;
	position: absolute;
	left: 40%;
	background-color: rgba(28,27,26,0.9);
	padding: 20px;
	margin-top: 20px;
}

.eventtext h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #D1C7A1;
	font-size: 35px;
}

.eventtext h4 {
	margin-bottom: 10px;
	font-weight: 900;
	font-size: 20px;
	margin-top: 15px;
	
}
.eventtext h5 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: 100;
	font-size: 17px;
	color: #ffffff;
}
.firstsecond {
	margin-top: 100px;
}
.firstsecond img {
	width: 40%;
	float: left;
}


/******************reviews.html*******************/

.bg-img-four {
  /* The image used */
  background-image: url(images/reviews-01.jpg);
  min-height: 95vh;
	

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	margin-left: 0px;
	margin-right: 0px;
	
  /* Needed to position the navbar */
  position: relative;
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: rgba(52,68,72,0.9);
	margin-top: 130px;
	height: 400px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
.slideshow-container h2{
	text-align: center;
	margin-bottom: 0px;
	padding-top: 30px;
}
.front {
	display: block;
	text-align: center;
}
/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
	color: #ffffff;

}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #D1C7A1;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
	margin-left: 40px;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
	margin-right: 40px;
	
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: red;
  color: white;
}



/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px 0px 20px 0px;
width: 70%;
	margin-left: auto;
	margin-right: auto;
  
margin-bottom: 150px;
	margin-top: 0px;
	background: rgba(52,68,72,0.9);


}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;
	font-size: 25px;

}

/* Add a blue color to the author */
.author {color: #ffffff;
	font-weight: 100;
	letter-spacing: 1px;
}

/***********05ourwork.html*********/
.gallery {
	 display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end;
    justify-content: center;
	height: 100%;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 150px;
	margin-bottom: 100px;
	
}
.photo h2 {
	font-size: 20px;
	color: #f9b243;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align: center;
	width: 350px;
	
}
.photo h4 {
	font-size: 17px;
	width: 300px;
	margin-left: 30px;
	text-align: center;
	margin-top: 10px;
}
.photo {
	padding: 10px;
	padding-bottom: 50px;
	display: block;
	transition: filter 0.3s;
	
}
.photo:hover img{
		filter: blur(10px) grayscale(100%); 
}

.overlay {
 position: absolute;
 opacity: 0;
 transition: opacity 0.3s;
 z-index: 2;
}

.photo:hover .overlay {
	opacity: 1;
	
}


/***********06contactus.html********/

.contactphoto img{
	float: left;
	width: 35%;
	padding-top: 150px;
	margin-left: 100px;
}


.vl {
  border-left: 1px solid #D1C7A1;
  height: 600px;
	position: absolute;
	left: 45%;
	top: 30%;
}


.contactus {
    background-color: rgba(28,27,26,0.8);
  max-width: 100%;
   margin-lefT: auto;
    margin-right:auto;
   margin-top: 200px;
	height: 750px;
	margin-bottom: 150px;
    
}
.form {
    width: 50%;
	float: right;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
    position: relative;
}

.contact h2 {

}
.contactus h3  {
	font-weight: 900;
	font-size: 25px;
	margin-bottom: 10px;
	margin-top: 40px;
	color: #D1C7A1;
}

.contactus h4 {
	color: #ffffff;
	margin-bottom: 0px;
	margin-top:0px;
	font-weight: 600;
}

.contactus h5 {
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 10px;
	font-weight: 100;
}



.location {
	width: 30%;
	float: left;
	height: 500px;
	margin-top: 30px;
}

.hours {
	width: 30%;
	float: right;
	margin-right: 200px;
	height: 500px;
	margin-top: 30px;
}
.hours img {
	margin-right: 13px;
}

.tel {
margin-top: 50%;
}

.socialmedia {
margin-top: 54%;
}

/***********07makeappointment********/

.contactustwo {
    background-color: rgba(28,27,26,0.8);
  	max-width: 70%;
	margin-lefT: auto;
    margin-right:auto;
	margin-top: 200px;
	height: 1100px;
	margin-bottom: 150px;
	
    
}
.formtwo {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
    position: relative;
}
.form h2 {
	margin-bottom: 10px;

}
.form h3 {
    font-weight: 100;
	margin-top: 0px;
}
.formtwo h4{
	margin-bottom: 0px;
	margin-top: 50px;
}
* {
    box-sizing: border-box;
}
input[type=text], select, textarea, input[type=email], input[type=tel], input[type=date], input[type=time] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    resize: vertical;
    position: relative;
	margin-left: 0px;
	color: #D1C7A1;

}
label {
    padding: 0px;
    display: inline-block;
    
}
input[type=submit] {
    background-color: #000000;
	border: 1px solid #ccc;
    color: white;
    padding: 12px 20px;
	letter-spacing: .8px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 15px;
    transition: transform 2s ease;   
}
input[type=submit]:hover {
    background-color: red;
   	;  
}
.container {
    margin-bottom: 200px;
}

.col-25 {
    margin-top: 6px;
	width: 45%;
	float: left;
	margin-left: auto;
	margin-right: auto;
	
}
.col-35 {
    margin-top: 6px;
	width: 45%;
	float: right;
	margin-left: auto;
	margin-right: auto;

}
.col-85 {
    float: left;
    width: 100%;
    margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/***********footer********/

footer {
	background-color: #24323D;
	height: 170px;
	clear: both;

}
.contact {
	color: #D1C7A1;
	margin-left: 70px;
	padding-top: 80px;
	float: left:
}
.contactlinks {
	float: right;
}

.contactlinks {
	color:  #D1C7A1;
	margin-right: 70px;
	transition: 0.8s ease-in;
	font-size: 14px;
}

.contact a {
	text-decoration: none;
	color: #D1C7A1;
}