body {margin: 0px; font-family: 'Montserrat', sans-serif; font-size: 18px; line-height: 30px}

h1 {font-family: 'Playfair Display', serif; color: #033da2; line-height: 43px; font-size: 37px}
h2 {font-family: 'Playfair Display', serif; color: #033da2; font-size: 27px; padding-top: 40px;}
a {color: #000; font-style: italic; font-weight: 400; text-decoration: underline}

.wrapper {width: 1200px; position: relative; margin: 0px auto}

.logo {position: absolute; top: 25px; left: 0px}
.fb-logo {position: absolute; top: 25px; right: 0px}

.menu {float: right; padding: 50px 0px 0px 0px}

.menu li {float: left; list-style: none;}

.menu li a {
	float: left; 
	padding: 10px 20px; 
	text-transform: uppercase; 
	text-decoration: none; 
	color: #033da2; 
	font-weight: 500;
	font-size: 17px;
	font-style: normal;}

.menu li:nth-last-child(1)  a {padding: 10px 0px 10px 20px}

.header {width: 100%}
.header img {object-fit: cover; width: 100%; height: 400px}
.inside img {height: 200px}


.content {width: 782px; text-align: center; position: relative; margin: 0px auto}
.contact, .welcome, .gallery, .history {padding: 50px 0px; text-align: center}
.gallery {width: 100%; background-image: url("images/bg-blue-gradient.jpg"); background-repeat: repeat-x; background-color: #033da2}
.gallery h1, .gallery p, .gallery p a {color: #FFF;}
.gallery-home {margin: 50px auto; text-align: left; width: 910px; position: relative;}

.directory-item {float: left; width: 100%; padding: 25px 0px; border-bottom: 1px solid #CCC}
.directory-title, .directory-name, .directory-phone {width: 33%; float: left}
.directory-title {text-transform: uppercase; text-align: left; font-weight: 500}
.directory-name { text-align: left}
.directory-name a {font-weight: normal; text-decoration: none; font-style: normal}
.directory-phone {text-align: right}


.box{list-style-type:none; display: inline-table; margin-bottom:25px;margin-left:1%;margin-right:1%;width:31%}
.box a img{-webkit-back-visibility:hidden;width:100%;height:auto;vertical-align:bottom}
#box-container {padding-top: 40px}

label {display: block; color: #033da2; font-family: 'Playfair Display', serif;}
input, textarea {padding: 10px; font-size: 17px; margin-bottom: 20px; width: 250px}
.car-details {border: 1px solid #CCC; margin-bottom: 20px}
.car-details h2 {padding: 0px}
fieldset {border: none}
.button {padding: 10px; background: #033da2; color: #FFF}

.footer {background-image: url("images/bg-footer.jpg"); height: 40px; float:left; position: relative; width: 100%; margin-top: 50px}
.footer-image {margin: 100px auto 0px auto}


#menuToggle {
  display: none;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #FFF;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #CCC;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #033da2;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #FFF;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #033da2;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}



/** RESPONSIVE TWEAKS **/

@media (max-width: 1200px){
	.wrapper {width: 100%}
	.logo {position: absolute; top: 25px; left: 50px}
	.fb-logo {position: absolute; top: 25px; right: 50px}
	.menu li:nth-last-child(1)  a {padding: 10px 50px 10px 20px}
}

@media (max-width: 1024px){
}
 

 
@media (max-width: 811px){ 
	#menuToggle {
		width: 80%;
		display: block;
	}
	.menu {display: none}
	.center {text-align: center}
	.logo {position: relative; margin: 0px auto; top: 50px; left: 0}
	.fb-logo {position: absolute; right: 30px; top: 20px}
	#box-container {width: 100%; margin: 0px; padding: 40px 0px 0px 0px;}
	.box {width: 47%}
	.header img {height: 200px}
	.directory-title, .directory-name, .directory-phone {width: 100%; text-align: center}
	.content, .history {width: 90%; position: relative;margin: 0px auto;}

}





 
@media (max-width: 768px){ 
}


@media (max-width: 640px) {
	
}