/* ===================================================
--- Mobile First ---
=================================================== */

/* ----- GENERAL STYLES ----- */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/*main {
  min-height: calc(100vh - 250px);
}*/

html,
body {
  height: 100%;
}

h1,
h2,
a {
  font-family: "Montserrat", sans-serif;
}

h1 {
  letter-spacing: 0.1em;
  font-size: 3em;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}

h3,
h4,
p,
blockquote,
cite,
label {
  font-family: "Domine", serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 2em;
  padding: 0.5em 0;
}

h1,
h2,
h4 {
  text-transform: uppercase;
}

h4 {
  font-size: 1.2em;
}

.mobile-hide,
.mobile-mobile-wide-hide {
  display: none;
}

.center {
  text-align: center;
}

/* ----- Font Awesome ----- */
.fa {
  color: white;
  font-size: 2em;
  position: absolute;
}

/* ----- Flexbox Settings ----- */

/*Flexbox Prefixes:
-------------------
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;*/

.flex {
  display: flex;
}

.flex-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* ----- Wrappers ----- */
.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}

.bolts-wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.fluid-wrapper {
  width: 100%;
}

/* ----- Images ----- */
img {
  max-width: 100%;
}

/* ----- Buttons ----- */
.btn {
  font-weight: bold;
  font-size: 1.3em;
  display: inline-block;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background: rgb(255, 255, 0);
  text-shadow: 2px 2px 2px #000;

  transition: background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s;
}

.btn:hover {
  background: rgb(255, 255, 155);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* .btn__smooth-scroll { */
/*border: 1px solid red;
	padding: 3px;*/
/*align-self: flex-end;
	background-color: background-color: rgb(255, 255, 0);*/
/* } */

/* ----- NAVIGATION ----- */
header {
  margin: 1.5em 0;
}

.main-header,
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.site-logo {
  -ms-flex-item-align: center;
  align-self: center;
}

.brand-logo {
  width: 300px;
}

.ten-year-mobile {
  text-align: center;
}

.ten-year-nav,
.ten-year-desktop {
  display: none;
}

.yqg-desktop {
  width: 15%;
}
.yqg-mobile {
  margin: 1rem auto;
  width: 50%;
}

li {
  list-style-type: none;
}

.nav a {
  text-decoration: none;
  color: #bbb;
  display: block;
  font-size: 1.125em;
  text-align: center;
  border-bottom: 2px solid #eee;
  padding: 0.5em 1em;
  margin: 0 1em;
}

.nav a:hover {
  color: #0b0b0b;
  border-bottom-color: rgb(255, 255, 0);
}

.rotate {
  transition: transform 0.2s linear;
}

.rotate.down {
  transform: rotate(180deg);
  /*transform-origin: 50% 50%;*/
}

a.dropdown {
  padding-right: 1em;
  position: relative;
}

.menu {
  display: none;
}

.menu a {
  padding-left: 1em;
  text-align: left;
  text-align: center;
}

.fa.fa-chevron-down {
  color: black;
  font-size: 1.3em;
  margin-left: 0.2em;
}

/* --- HOME PAGE ---
=================================================== */

/* ----- Main Carousel ----- */
.main-carousel {
  width: 100%;
  height: 75%;
  /*margin: 0 auto 40px;*/
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

.slide.slide-1,
.slide.slide-2,
.slide.slide-3,
.slide.slide-4,
.slide.slide-5 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  height: 65vh;
}

.slide h3 {
  margin-bottom: 1em;
}

.slide h2 {
  font-size: 2em;
  text-shadow: 2px 2px 2px #000, -1px -1px 1px #000;
}

.slide h3 {
  font-size: 1.3em;
}

.slide-1 {
  background: url(../img/office_justin-mobile.jpg) no-repeat center center;
  background-size: 100% 100%;
  /*padding: 1.75% 0;*/
  /*align-items: center;*/
}

.slide-2 {
  background: url(../img/justinsauto_sign-mobile.jpg) no-repeat center center;
  background-size: 100% 100%;
}

.slide-3 {
  background: url(../img/history_car-mobile2.jpg) no-repeat center center;
  background-size: 100% 100%;
}

.slide-4 {
  background: url(../img/under_the_hood-mobile_BLUR.jpg) no-repeat center center;
  background-size: 100% 100%;
  /*color: rgb(255, 255, 0);*/
}

.slide-5 {
  background: url(../img/while-you-wait-mobile3.jpg) no-repeat center center;
  background-size: 100% 100%;
}

.slick-dots {
  bottom: -15px;
}

.slick-dots li button::before {
  font-size: 25px;
}

/* ----- SECTIONS ----- */

/* --- Large Logo section  --- */
/* .ten-year-mobile, */
.large-logo {
  text-align: center;
  /*width: 75%;*/
}

/* --- Nuts and Bolts section --- */
.nuts-and-bolts {
  margin-top: 2em;
}

.nuts-and-bolts-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.yellow-box {
  flex-direction: column;
  justify-content: flex-end;
  height: 250px;
  width: 250px;
  background-color: rgb(255, 255, 0);
  border: 1px solid black;
  margin: 8% 0%;
  padding: 2.5em 0.5em 0;
  text-align: center;
  position: relative;

  transition: box-shadow 0.3s ease-out;
}

.yellow-box-technet {
  width: 75px;
  height: 49px;
}

.nut {
  width: 75px;
  height: 75px;
  position: absolute;
  top: -15%;
  left: 37%;

  transition: transform 0.3s ease-out;
}

.yellow-box-links {
  text-decoration: none;
  border: 1px solid black;
  padding: 1% 5%;
  align-self: center;
  margin-top: auto;
  margin-bottom: 3%;

  transition: background 0.3s ease-in;
}
.yellow-box-links:hover {
  background: #fff;
}

.yellow-box:hover {
  background: rgb(255, 255, 155);
  /*original settings:*/
  /*box-shadow: 0 8px 6px -6px black;*/
  /*changed to:*/
  box-shadow: 0 16px 12px -6px black;
}
.yellow-box:hover .nut {
  transform: rotate(-20deg) !important;
}

.hours-of-operation h5 {
  margin-top: 0.5em;
}

.yellow-box p {
  margin-top: 0.5em;
}

.hours-of-operation p {
  margin-top: 0;
}

.fa-clock-o {
  top: -6%;
  left: 46.5%;
}

.fa-wrench {
  top: -7%;
  left: 46%;
}

.fa-info {
  top: -6%;
  left: 50%;
}

.fa-wifi {
  top: -5%;
  left: 45%;
}

/*.fa.fa-chevron-down {
	color: black;
	bottom: 2%;
	left: 33%;
	font-size: 2em;
	border: 1px solid black;
	padding: 0 25px 5px;
}*/

/* --- About Our Shop section --- */
.about-our-shop {
  /*background: 
							url(../img/wall-bg.jpg),
							rgba(170, 170, 170, 0.9)*/
  background: linear-gradient(
      rgba(170, 170, 170, 0.5),
      rgba(170, 170, 170, 0.5)
    ),
    url(../img/wall-bg.jpg);
  color: white;
  padding: 1% 2% 5% 2%;
  text-align: center;
  text-shadow: 2px 2px 2px #000;
  position: relative;
  /*height: 100%;*/
}

.about-our-shop p {
  margin: 2% 0 4% 0;
}

.about-our-shop .btn {
  margin-top: 3em;
}

/* --- Our Services section --- */
.our-services {
  background: url(../img/services_bg-mobile.jpg) no-repeat center center;
  background-size: 100% 100%;
  color: #fff;
  padding: 1% 2% 5% 2%;
  text-align: center;
}

.our-services h4 {
  margin: 3% 0;
  font-size: 1.2em;
}

.services-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  margin: 5% 0;
}

.services-flex-text {
  -ms-flex-item-align: center;
  align-self: center;
  -ms-flex: 2;
  flex: 2;
}

.flex-column.our-services p {
  margin-bottom: 0.5em;
}

.yellow-square {
  height: 50px;
  width: 50px;
  background-color: rgba(255, 255, 0, 0.75);
  /*border: 1px solid white;*/
  position: relative;
  /*margin-top: 1%;*/
}

.yellow-square .fa.fa-wrench {
  font-size: 2.5em;
  top: 5%;
  left: 10%;
  /*color: black*/
}

.yellow-square .fa.fa-car {
  font-size: 2.25em;
  top: 10%;
  left: 8%;
  /*color: black*/
}

.yellow-square .fa.fa-clock-o {
  font-size: 2.5em;
  top: 10%;
  left: 15%;
  /*color: black*/
}

.yellow-square .fa.fa-shield {
  font-size: 2.5em;
  top: 10%;
  left: 22%;
  /*color: black*/
}

.end-item {
  -ms-flex-order: 2;
  order: 2;
}

.text-left,
.text-right {
  padding: 0 1%;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/* --- Our History section --- */
.our-history {
  text-align: center;
  padding: 1% 2% 5% 2%;
}

.history-pics {
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 1% 2% 5% 2%;
}

/* --- Our Experience section --- */
.our-experience {
  background: linear-gradient(rgba(255, 255, 0, 0.65), rgba(255, 255, 0, 0.65)),
    url(../img/justins_wrenches_EDIT.jpg) no-repeat center center;

  background-size: 100% 100%;
  color: white;
  text-shadow: 2px 2px 2px #000;
  text-align: center;
  padding: 1% 2% 5% 2%;
}

.our-experience p {
  margin: 2% 0 4% 0;
}

/* --- Testimonials section --- */
.testimonials {
  background: white;
  text-align: center;
  padding: 0 0 5% 0;
}

/* - Testimonial Carousel - */
.testimonial {
  padding: 0 1%;
}

.testimonial img {
  border-radius: 50%;
  max-width: 40%;
  margin: auto;
}

.testimonial blockquote {
  width: 70%;
  margin: 4% auto 0 auto;
  position: relative;
  font-size: 1.1em;
}

.testimonial cite {
  font-size: 0.9em;
  color: #888;
}

.testimonial blockquote::before,
.testimonial blockquote::after {
  font-family: "Fontawesome";
  color: rgb(255, 255, 0);
  font-size: 1.5em;
  text-shadow: 1px 1px 1px #000;
  position: absolute;
}

.testimonial blockquote::before {
  content: "\f10d";
  top: -5px;
  left: -30px;
}

.testimonial blockquote::after {
  content: "\f10e";
  bottom: -10px;
  right: -25px;
}

.testimonial-carousel .slick-dots {
  bottom: -30px;
}

/* --- Book Appointment section  --- */
.book-appointment {
  background: linear-gradient(
      rgba(128, 128, 128, 0.65),
      rgba(128, 128, 128, 0.65)
    ),
    url(../img/book_appointment-mobile.jpg) no-repeat center center;

  background-size: 100% 100%;
  color: white;
  padding: 1% 2% 5% 2%;
  text-align: center;
  /*height: 100%;*/
}

.book-appointment p {
  margin: 2% 0 4% 0;
}

/* --- Contact Us section --- */
.contact-us {
  background: url(../img/contact_us-mobile-BLUR.jpg) no-repeat center center;
  background-size: 100% 100%;
  color: white;
  padding: 1% 2% 5% 2%;
  text-shadow: 2px 2px 2px #000;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.contact-us h1 {
  -ms-flex-item-align: center;
  align-self: center;
}

.contact-us .fa {
  color: rgb(255, 255, 0);
  /*font-size: 3em;*/
}

.contact-us .wrap {
  width: 80%;
  margin-bottom: 8%;
  text-align: center;
}

.contact-us .wrap span {
  -ms-flex: 1 0 10%;
  flex: 1 0 10%;
  text-align: center;

  /*align-items: center;*/
}

.contact-us .wrap p {
  -ms-flex: 2 0 100%;
  flex: 2 0 100%;
  text-align: left;
  padding-left: 25px;
  letter-spacing: 0.05em;
}

.tel a {
  color: white;
}

.social-section {
  width: 70%;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.social-icon {
  height: 50px;
  width: 50px;
  /*cursor: pointer;*/

  transition: transform 0.3s, opacity 0.1s;
}

.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.contact-us .btn {
  margin: 10% 0 5% 0;
}

/* --- Map section --- */
.map-section {
  background: rgb(255, 255, 0);
  color: white;
}

.map {
  width: 85%;
  height: 70vh;
  margin: 0.5em auto;
  box-shadow: 0 8px 6px -6px black;
}

div.flex + p {
  color: black;
  -ms-flex-item-align: center;
  align-self: center;
  /*font-size: 2em;*/
  font-weight: bold;
  margin: 0.5em 0;
  /*text-shadow: 2px 2px 2px #000,
							-2px -2px 2px #000;*/
}

/* --- Auto Logos section --- */
.auto-logo-flex {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  /*align-content: center;*/
  /*flex-wrap: wrap;*/
  /*height: 150%;*/
  /*padding: 5% 0;*/
}

.auto-logos {
  width: 75px;
  height: 50px;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-filter: gray;
  filter: gray; /* IE6-9 */
  filter: grayscale(100%); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
  padding: 5px 0;
}

/* disable grayscale on hover */
.auto-logos:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

/*.ford,
.chrysler,
.gm {
	
}*/

.volvo {
  width: 125px;
  height: 125px;
  -ms-flex-item-align: center;
  align-self: center;
}

/* --- footer --- */
footer {
  background: black;
  color: white;
  padding: 5%;
}

footer p {
  font-size: 0.8em;
}

footer .social-icon {
  width: 25px;
  height: 25px;
  -webkit-filter: gray;
  filter: gray; /* IE6-9 */
  filter: grayscale(100%); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
}

footer .social-icon:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  transform: scale(1);
}

/* --- APPOINTMENT PAGE ---
=================================================== */
.register-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 5px;
}

.form-group {
  background: rgb(255, 255, 0);
  /*margin-bottom: 1em;*/
  padding: 10px;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px;
  margin: 5px;
  box-shadow: 0 8px 6px -6px black;
}

.wrench {
  background: linear-gradient(rgba(255, 255, 0, 0.85), rgba(255, 255, 0, 0.85)),
    url(../img/justins_wrenches_form.jpg) no-repeat center center;
  background-size: cover;
}

.form-group ul {
  list-style: none;
  margin: 0 0 2em;
}

.form-group li {
  margin-bottom: 0.5em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.form-group h4 {
  margin-bottom: 1em;
}

.form-fields input[type="text"],
.form-fields input[type="tel"],
.form-fields input[type="email"],
.form-fields input[type="number"],
.form-fields select {
  box-sizing: border-box;
  padding: 0.6em 0.8em;
  color: black;
  background: #f7f7f7;
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  max-height: 3em;
  -ms-flex: 1 0 230px;
  flex: 1 0 230px;
}

.form-fields label {
  -ms-flex: 1 0 90px;
  flex: 1 0 90px;
  max-width: 200px;
  -ms-flex-item-align: center;
  align-self: center;
  font-size: 0.9em;
}

.form-fields input[type="text"]:focus,
.form-fields input[type="tel"]:focus,
.form-fields input[type="email"]:focus,
.form-fields input[type="number"]:focus,
.form-fields textarea:focus,
.form-fields select:focus {
  color: #333;
  border: 1px solid #c17ccf;
  outline: none;
  background: #e3e3e3;
}

.text-area {
  display: block;
  width: 100%;
  height: 5em;
  overflow: auto;
  padding: 0.6em 0.8em;
  color: #888;
  background: #f7f7f7;
  border: 1px solid black;
  -ms-flex: 1 0 230px;
  flex: 1 0 230px;
}

.form-submit {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  text-align: center;
  margin: 1em 0;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #888;
  opacity: 0.3;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #888;
  opacity: 0.3;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #888;
  opacity: 0.3;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #888;
  opacity: 0.3;
}

.form-fields span {
  color: red;
}

.error-message {
  color: red;
  border: 2px solid red;
  padding: 1em;
  background: rgba(255, 0, 0, 0.1);
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

.thanks {
  padding: 2% 5%;
}

.center .btn {
  margin-bottom: 1%;
}

/* --- ABOUT PAGE ---
=================================================== */
.the-team {
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.65) -5%,
    rgba(255, 255, 0, 0.65)
  );
  padding-bottom: 1em;
  margin-top: 1em;
}

/* .team-pic { */
/*background: url('../img/team_front-mobile.jpg') no-repeat;*/
/*background-size: 100% 100%;*/
/*height: 150%;*/
/*margin: 1em auto -1.5em auto;*/
/*padding-top: 0%;*/
/* } */

.profile {
  position: relative;
  margin: 2em auto;
}

.profile img {
  border-radius: 50%;
  border: 5px solid yellow;
  box-shadow: 0 12px 9px -6px rgba(0, 0, 0, 0.5);
  max-width: 70%;
}

.profile h3 {
  margin-top: 1em;
  text-transform: uppercase;
}

.profile h4 {
  text-transform: capitalize;
}

.profile::after {
  content: " ";
  background: rgba(0, 0, 0, 0.05);
  height: 10px;
  position: absolute;
  right: 30%;
  bottom: -25px;
  left: 30%;
  border-radius: 50%;
}

.technicians {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 5%,
    rgba(255, 255, 0, 0.25)
  );
}

.mike,
.eden,
.tony,
.noah,
.cherleen {
  width: 80%;
}

.cherleen {
  padding-top: 2em;
}

.we-provide {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.65) 85%,
    rgba(255, 255, 0, 0.65)
  );
  padding: 3em 1em 2em 1em;
}

.handshake {
  background: radial-gradient(
      rgba(255, 255, 255, 0.25),
      85%,
      rgba(255, 255, 0, 0.75)
    ),
    url(../img/handshake-mobile.jpg) no-repeat center center;
  background-size: 100% 100%;
  padding: 8em 0;
}

.shop {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 100%;
}

.pooltable-car {
  background: url("../img/about-our-shop-historic-mobile.jpg") no-repeat center
    center;
  background-size: cover;
  padding: 8em 0;
  -ms-flex-order: 2;
  order: 2;
}

.sdt-paragraph-1 {
  -ms-flex-order: 1;
  order: 1;
}

.sdt-paragraph-2 {
  -ms-flex-order: 3;
  order: 3;
}

.shop-description {
  padding: 2em 1em;
}

.shop-description p {
  margin-bottom: 1em;
}

/* before update:
.team-pic-side {
  background: linear-gradient(90deg, 
			            rgba(255, 255, 255, 0) 90%,
			            rgba(255, 255, 0, 0.65) 
			          ),
	            linear-gradient(-90deg, 
			            rgba(255, 255, 255, 0) 90%,
			            rgba(255, 255, 0, 0.65) 
								),
	background: url("../img/staff-photo-about-page-mobile.jpg")
	no-repeat 50% 50%;
	*/
/*background-size: contain;*/
/*
  background-size: cover;
  border-style: solid;
  border-width: 10px 0;
  border-color: rgb(255, 255, 0);
  height: 70%;
	margin: -1.5em auto 0 auto;
	*/
/*padding-top: 130%; */
/*
  padding: 80% 0;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}
*/
.justins-auto-sign {
  /* background: #e4de29; */
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.65) -5%,
    rgba(255, 255, 0, 0.65)
  );
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.justins-auto-sign img {
  width: 70%;
}

.team-photo {
  height: 50vh;
  background: url("../img/staff-photo-about-page-mobile.jpg") no-repeat 50% 50%;
  background-size: contain;
}

.anywhere-else {
  position: absolute;
  top: 29%;
  left: -15px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.9em;
  padding: 0.5em 3em;
  background: #fff;
  z-index: 2;
  width: 110%;
  transform: rotate(-10deg);
  border: 2px solid rgb(255, 255, 0);
}

/* --- CONTACT PAGE ---
=================================================== */
.contact-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 5em;
}

.contact-form {
  position: relative;
}

.contact-page .map-section {
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 10px;
  box-shadow: 0 8px 6px -6px black;
  padding-bottom: 1em;
}

.contact-page__map .map {
  width: 95%;
}

.contact-page__contact-info {
  margin: 0.5em 0 0.5em 1em;
  text-shadow: 2px 2px 2px black;
}

.contact-page__contact-info span {
  margin-right: 49px;
  font-size: 0.9em;
}

.contact-page__contact-info p {
  font-size: 1em;
}

.table {
  background: linear-gradient(rgba(255, 255, 0, 0.85), rgba(255, 255, 0, 0.85)),
    url(../img/justins_auto_repair_table-desktop.jpg) no-repeat center center;
  background-size: cover;
}

.contact-submit {
  position: absolute;
  top: 100%;
  left: 30%;
  right: 30%;
}

/* --- SERVICES PAGE ---
=================================================== */
.service-intro .flex {
  -ms-flex-direction: column;
  flex-direction: column;
}

.service-intro h3,
.service-intro p {
  text-align: center;
}

.hoist {
  background: url(../img/mechanics_hoist-mobile.jpg) no-repeat center center;
  background-size: cover;
  padding: 7em 0;
  margin: 0 0 2em 0;
  box-shadow: 0 0 5px 10px rgba(255, 255, 0, 0.5);
}

.the-services {
  margin-top: 2em;
  overflow-x: hidden;
  -ms-flex-direction: column;
  flex-direction: column;
}

.the-services .service:nth-child(odd) {
  background-color: rgb(255, 255, 0);
}

.the-services .service:nth-child(even) {
  background-color: #000;
  color: #fff;
}

.service {
  height: 200px;
  padding: 1em 0 0 0;
  text-align: center;
  position: relative;

  transition: transform 1s ease-out;
}

.service h4 {
  -ms-flex: 3;
  flex: 3;
  -ms-flex-item-align: center;
  align-self: center;
}

.left {
  transform: translateX(100%);
}

.left.scroll-left {
  transform: translateX(0);
}

.right {
  transform: translateX(-100%);
}

.right.scroll-right {
  transform: translateX(0);
}

.left::before,
.left::after,
.right::before,
.right::after {
  font-family: "Fontawesome";
  -ms-flex-item-align: center;
  align-self: center;
  font-size: 3em;
}

.left::before {
  content: "\f0a8"; /* left-arrow */
  -ms-flex: 1;
  flex: 1;
}

.right::after {
  content: "\f0a9"; /* right-arrow */
  -ms-flex: 1;
  flex: 1;
}

.left::after,
.right::before {
  content: "\f0ad"; /* wrench */
  -ms-flex: 1;
  flex: 1;
}

#customer-pick-up.right::before {
  content: "\f1b9"; /* car */
}

#after-hours.left::after {
  content: "\f017"; /* clock */
}

#labour-warranty.right::before {
  content: "\f132"; /* shield */
}

#tech-net.left::after {
  /*content: '\f132'; */ /* shield */
  content: "";
  width: 50px;
  height: 70px;
  background: url(../img/technet-logo-extra-small.png) no-repeat 50% 50%;
}

.service-contact {
  padding: 2em 0;
}

/* .service-contact p { */
/*margin-bottom: 1em;*/
/* } */

/* --- HISTORY PAGE ---
=================================================== */
.detroit-free-press,
.ambassador-bridge,
.casino,
.windsor-police,
.sculpture-park,
.shop-central {
  background-color: #eee;
  padding: 1em 0;
}

#history .flex img {
  max-width: 70%;
  -ms-flex-item-align: center;
  align-self: center;
}

#history p {
  margin: 1em 0;
}

cite {
  display: block;
  font-size: 0.8em;
}

.bcg-parallax {
  color: #fff;
  background-color: #000;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.bcg {
  width: 100%;
  height: 180%;
  z-index: 1;
  opacity: 0.7;
  top: 0;
  position: absolute;
}

.content-wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  z-index: 2;
}

.content-wrapper h2 {
  text-transform: capitalize;
}

.history-picture {
  background: url(../img/history_picture-mobile.jpg) no-repeat center center;
  background-size: 110% 90%;
}

.history-intro {
  margin-left: 53%;
}

.history-intro h2 {
  text-transform: capitalize;
  opacity: 1;
}

.shop-1929-1930 {
  background: url(../img/shop_1929-1930-mobile-CROP.jpg) no-repeat center center;
  background-size: 100% 100%;
  padding: 10em 0;
}

.shop-1920 {
  background: url(../img/shop_1920-mobile.jpg) no-repeat center center;
  background-size: cover;
  padding: 10em 0;
}

.cunninghams {
  background: url(../img/cunninghams-mobile.jpg) no-repeat center center;
  background-size: 110% 90%;
}

.history-room {
  background: url(../img/history_room-mobile.jpg) no-repeat center center;
  background-size: 110% 90%;
}

.inside-shop {
  background: url(../img/inside_shop-mobile.jpg) no-repeat center center;
  background-size: 110% 90%;
}
.detroit-free-press .flex,
.ambassador-bridge .flex,
.casino .flex,
.windsor-police .flex,
.sculpture-park .flex,
.shop-central .flex {
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: -1em;
}

.shop-now {
  background: url(../img/shop_now-mobile.jpg) no-repeat center center;
  background-size: 110% 90%;
}

.sources.flex {
  -ms-flex-direction: column;
  flex-direction: column;
}

/* ===================================================
--- Landscape phones, 554px and up) ---
=================================================== */

@media screen and (min-width: 34em) {
  /* ----- GENERAL STYLES ----- */

  .mobile-hide {
    display: block;
  }

  .mobile-wide-hide {
    display: none;
  }

  /* --- Nuts and Bolts section --- */
  .yellow-box {
    margin: 4% 1% 5% 1%;
  }

  /* --- Our History section --- */
  .our-history {
    perspective: 700px;
    padding: 1% 0% 5% 0%;
  }

  .history-pics {
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 1% 0% 1% 0%;
    height: 65vh;
  }

  .photo-left {
    -ms-flex: 3 1;
    flex: 3 1;
    background: url(../img/history_car2-mobile.jpg) no-repeat center center;
    background-size: 100% 100%;
    transform: rotateY(70deg) translate(-20%);
  }

  .history-pics p {
    -ms-flex: 2 0;
    flex: 2 0;
    /*color: white;*/
    -ms-flex-item-align: center;
    align-self: center;
    margin: -2% -18% 0;
  }

  .photo-right {
    -ms-flex: 3 1;
    flex: 3 1;
    background: url(../img/history_room-mobile.jpg) no-repeat center center;
    background-size: 100% 100%;
    transform: rotateY(-70deg) translate(20%);
  }

  .our-history .btn {
    margin-top: 3%;
  }

  /* --- Contact Us section --- */
  .contact-us {
    /*background: url(../img/contact_image_BLUR.jpg) no-repeat center center;
		background-size: 100% 100%;*/
    color: white;
    padding: 1% 2% 5% 2%;
    text-shadow: 2px 2px 2px #000;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
  }

  .contact-us h1 {
    -ms-flex-item-align: center;
    align-self: center;
  }

  .contact-us .fa {
    color: rgb(255, 255, 0);
    font-size: 3em;
  }

  .contact-us .wrap {
    width: 80%;
    margin-bottom: 8%;
  }

  .contact-us .wrap span {
    -ms-flex: 1 0;
    flex: 1 0;
    text-align: center;
  }

  .contact-us .wrap p {
    -ms-flex: 2 0;
    flex: 2 0;
    font-size: 1.2em;
  }

  .social-section {
    width: 50%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .social-icon {
    height: 50px;
    width: 50px;
  }

  .contact-us .btn {
    margin: 10% 0 5% 0;
  }

  /* --- CONTACT PAGE ---
	=================================================== */
  .contact-page__contact-info span {
    margin-right: 49px;
    font-size: 1em;
  }

  .contact-page__contact-info p {
    font-size: 1.3em;
  }

  /* --- ABOUT PAGE ---
	=================================================== */
  .team-photo {
    height: 60vh;
    background-size: cover;
  }
}

/* ===================================================
--- Small devices (tablets, 768px and up) ---
=================================================== */

@media screen and (min-width: 768px) {
  /* ----- GENERAL STYLES ----- */

  h2 {
    font-size: 5em;
    padding: 0;
  }

  p {
    font-size: 2em;
  }

  .mobile-wide-hide,
  .mobile-mobile-wide-hide {
    display: block;
  }

  /* ----- Buttons ----- */
  .btn {
    padding: 20px 30px;
    font-size: 1.5em;
    letter-spacing: 0;
  }

  /* ----- NAVIGATION ----- */
  .main-header {
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .nav {
    margin-top: 1em;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .brand-logo {
    width: 250px;
  }

  .large-logo {
    width: 90%;
    margin: auto;
  }

  .nav li {
    margin: auto;
  }

  .nav a {
    border-bottom-color: transparent;
  }

  .nav a:hover {
    border-bottom: 2px solid rgb(255, 255, 0);
  }

  .menu {
    position: absolute;
    z-index: 5;
    padding-bottom: 0.5em;
    /*margin-left: 1em;*/
    background-color: rgba(255, 255, 255, 0.9);
  }

  .menu a {
    text-align: left;
  }

  /* --- HOME PAGE ---
	=================================================== */

  /* ----- Main Carousel ----- */
  .main-carousel {
    text-shadow: 4px 4px 4px #000;
  }

  .slide h2 {
    text-shadow: 4px 4px 4px #000, -2px -2px 2px #444;
  }

  .slide-1 {
    background: url(../img/office_justin-desktop.jpg) no-repeat center center;
    background-size: 100% 100%;
  }

  .slide-2 {
    background: url(../img/justinsauto_sign-desktop.jpg) no-repeat center center;
    background-size: 100% 100%;
  }

  .slide-3 {
    background: url(../img/history_car-mobile2.jpg) no-repeat center center;
    background-size: 100% 100%;
  }

  .slide-4 {
    background: url(../img/under_the_hood-desktop_BLUR.jpg) no-repeat center
      center;
    background-size: 100% 100%;
  }

  .slide-5 {
    background: url(../img/while-you-wait-desktop3.jpg) no-repeat center center;
    background-size: 100% 100%;
  }

  .slide h2 {
    font-size: 5em;
  }

  .slide h3 {
    font-size: 2.5em;
  }

  .slick-dots {
    bottom: 30px;
  }

  /* ----- SECTIONS ----- */

  /* --- Large Logo section  --- */
  .large-logo {
    width: 75%;
  }

  /* --- Nuts and Bolts section --- */
  .yellow-box {
    height: 300px;
    width: 300px;
    padding-top: 6%;
  }

  .yellow-box p {
    font-size: 1.25em;
  }

  .yellow-box-technet {
    width: 100px;
    height: 65px;
  }

  .nut {
    width: 100px;
    height: 100px;
    top: -17%;
    left: 37%;
  }

  .fa {
    font-size: 3em;
  }

  .fa-clock-o {
    top: -8%;
    left: 47%;
  }

  .fa-wrench {
    top: -8%;
    left: 47%;
  }

  .fa-info {
    top: -8%;
    left: 51%;
  }

  .fa-wifi {
    top: -7%;
    left: 45%;
  }

  /*.fa.fa-chevron-down {
		color: black;
		bottom: 3%;
		left: 33%;
		font-size: 2.5em;
		border: 4px solid black;
		padding: 0 30px 10px;
	}*/

  /* --- About Our Shop section --- */
  .about-our-shop {
    padding: 1% 2% 5% 2%;
    /*height: 100%;*/
  }

  .about-our-shop p {
    /*margin: 2% 0 4% 0;*/
    font-size: 1.5em;
  }

  .about-our-shop .btn {
    margin-top: 1em;
  }

  /* --- Our Services section --- */
  .our-services {
    background: url(../img/services_bg-desktop.jpg) no-repeat center center;
    background-size: 100% 100%;
    color: #fff;
    padding: 1% 5% 5% 5%;
    text-align: center;
  }

  .our-services h4 {
    margin: 3% 0;
    font-size: 1.5em;
  }

  .services-flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    margin: 5% 0;
  }

  .services-flex-text {
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex: 2;
    flex: 2;
  }

  .flex-column.our-services p {
    margin-bottom: 0.5em;
  }

  .yellow-square {
    height: 100px;
    width: 100px;
    background-color: rgba(255, 255, 0, 0.75);
    /*border: 1px solid white;*/
    position: relative;
    /*margin-top: 1%;*/
  }

  .yellow-square .fa.fa-wrench {
    font-size: 5em;
    top: 5%;
    left: 10%;
  }

  .yellow-square .fa.fa-car {
    font-size: 5em;
    top: 10%;
    left: 5%;
  }

  .yellow-square .fa.fa-clock-o {
    font-size: 5em;
    top: 10%;
    left: 15%;
  }

  .yellow-square .fa.fa-shield {
    font-size: 5em;
    top: 10%;
    left: 22%;
  }

  .end-item {
    -ms-flex-order: 2;
    order: 2;
  }

  .text-left,
  .text-right {
    padding: 0 1%;
  }

  .text-right {
    text-align: right;
  }

  .text-left {
    text-align: left;
  }

  /* --- Our History section --- */

  .photo-left {
    transform: rotateY(70deg) translate(-10%);
  }

  .history-pics p {
    margin: -2% -13% 0;
    font-size: 1.8em;
  }

  .photo-right {
    transform: rotateY(-70deg) translate(10%);
  }

  /* --- Our Experience section --- */
  .our-experience {
    padding: 1% 2% 5% 2%;
  }

  .our-experience p {
    /*margin: 2% 0 4% 0;*/
    font-size: 1.5em;
  }

  /* --- Testimonials section --- */

  /* - Testimonial Carousel - */
  .testimonial {
    padding: 0 1%;
  }

  .testimonial img {
    max-width: 35%;
  }

  .testimonial blockquote {
    width: 80%;
    font-size: 1.5em;
  }

  .testimonial cite {
    font-size: 1.2em;
  }

  /* .testimonial blockquote::before, */
  /* .testimonial blockquote::after { */
  /*font-size: 1.5em;*/
  /* } */

  .testimonial blockquote::before {
    top: -5px;
    left: -30px;
  }

  .testimonial blockquote::after {
    bottom: -10px;
    right: -25px;
  }

  /* .testimonial-carousel .slick-dots { */
  /*bottom: -30px;*/
  /* } */

  /* --- Book Appointment section --- */
  .book-appointment {
    background: linear-gradient(
        rgba(128, 128, 128, 0.65),
        rgba(128, 128, 128, 0.65)
      ),
      url(../img/book_appointment-desktop.jpg) no-repeat center center;

    background-size: 100% 100%;
  }

  /* --- Contact Us section --- */
  .contact-us {
    background: url(../img/contact_us-desktop-BLUR.jpg) no-repeat center center;
    background-size: 100% 100%;
  }

  .contact-us .fa {
    color: rgb(255, 255, 0);
    font-size: 5em;
  }

  .contact-us .wrap {
    width: 90%;
    margin-bottom: 4%;
  }

  .contact-us .wrap span {
    -ms-flex: 1 0;
    flex: 1 0;
    text-align: center;
  }

  .contact-us .wrap p {
    -ms-flex: 2 0;
    flex: 2 0;
    font-size: 1.8em;
  }

  .social-section {
    width: 50%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-top: 4%;
  }

  .social-icon {
    height: 100px;
    width: 100px;
  }

  .contact-us .btn {
    margin: 10% 0 5% 0;
  }

  /* --- Map section --- */
  .map {
    width: 90%;
    height: 60vh;
    box-shadow: 0 8px 15px -6px black;
  }

  div.flex + p {
    font-size: 2em;
  }

  /* --- Auto Logos section --- */
  .auto-logo-flex {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 25%;
  }

  .auto-logos {
    width: 100px;
    height: 75px;
    padding: 0;
  }

  .volvo {
    width: 175px;
    height: 150px;
  }

  /* --- APPOINTMENT PAGE ---
	=================================================== */
  .error-message {
    padding: 0.5em 1em;
    background: rgba(255, 0, 0, 0.1);
    width: 60%;
    margin: 0 auto;
    font-size: 1.5em;
  }

  .thanks {
    padding: 2% 5%;
    width: 60%;
    margin: 0 auto;
  }

  /* --- ABOUT PAGE ---
	=================================================== */
  .profiles {
    margin-bottom: 8em;
  }

  .profile {
    margin: 5em auto;
  }

  .profile img {
    max-width: 50%;
  }

  .we-provide {
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.65) 85%,
      rgba(255, 255, 0, 0.65)
    );
    padding: 5em 3em 4em 3em;
  }

  .handshake {
    padding: 10em 0;
  }

  .shop {
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .pooltable-car {
    padding: 12em 0;
    -ms-flex-order: 2;
    order: 2;
  }

  .sdt-paragraph-1 {
    -ms-flex-order: 1;
    order: 1;
  }

  .sdt-paragraph-2 {
    -ms-flex-order: 3;
    order: 3;
  }

  .shop-description {
    padding: 5em 3em 3em 3em;
  }

  /*
  .team-pic-side {
    background: url("../img/staff-photo-about-page-desktop.jpg")
      no-repeat 50% 50%;
    background-size: cover;
    padding: 80% 0;
    border-style: solid;
    border-width: 10px 0;
  }
*/
  .justins-auto-sign img {
    width: 50%;
  }

  .team-photo {
    background: url("../img/staff-photo-about-page-desktop.jpg") no-repeat 50%
      50%;
    background-size: cover;
  }

  .anywhere-else {
    top: 31%;
    left: -25px;
    font-size: 2em;
    padding: 1em 2em;
    border: 2px solid rgb(255, 255, 0);
  }

  /* --- CONTACT PAGE ---
	=================================================== */
  .contact-page {
    margin-bottom: 7em;
  }

  .contact-page__contact-info span {
    margin-right: 90px;
    font-size: 1em;
  }

  .contact-page__contact-info p {
    font-size: 2em;
  }

  .contact-page .form-fields label {
    font-size: 1.1em;
  }

  .contact-page h4 {
    font-size: 2em;
  }

  div.flex + p {
    font-size: 1.5em;
  }

  /* --- SERVICES PAGE ---
	=================================================== */
  .hoist {
    background: url(../img/mechanics_hoist-desktop.jpg) no-repeat center center;
    background-size: cover;
    padding: 13em 0;
    margin-top: 1.5em;
  }

  .service h4 {
    font-size: 2em;
  }

  #tech-net.left::after {
    background: url(../img/technet-logo-small.png) no-repeat 50% 100%;
  }

  .left::before,
  .left::after,
  .right::before,
  .right::after {
    font-size: 4em;
  }

  /* --- HISTORY PAGE ---
	=================================================== */
  .flex img {
    max-width: 100%;
  }

  .bcg-parallax {
    padding: 200px 0;
  }

  .bcg {
    height: 200%;
  }

  .history-picture {
    background-size: 100% 60%;
    background: url(../img/history_picture-desktop.jpg) no-repeat center 50%;
  }

  .shop-1929-1930 {
    padding: 20em 0;
  }

  .shop-1920 {
    background: url(../img/shop_1920-desktop.jpg) no-repeat center center;
    background-size: 100% 120%;
    padding: 20em 0;
  }

  .cunninghams {
    background: url(../img/cunninghams-desktop.jpg) no-repeat center 58%;
    background-size: 100% 60%;
  }

  .history-room {
    background: url(../img/history_room-desktop.jpg) no-repeat center 58%;
    background-size: 100% 60%;
  }

  .inside-shop {
    background: url(../img/inside_shop-desktop.jpg) no-repeat center 58%;
    background-size: 100% 60%;
  }

  .windsor-police img {
    padding: 0 1em;
  }

  .shop-now {
    background: url(../img/shop_now-desktop.jpg) no-repeat center 58%;
    background-size: 100% 60%;
  }
}

/* ===================================================
--- Medium devices (desktops, 992px and up) ---
=================================================== */

@media screen and (min-width: 992px) {
  /* ----- Navigation ----- */
  .main-header {
    -ms-flex-direction: row;
    flex-direction: row;
    /* border: 1px solid purple; */
  }

  .ten-year-mobile,
  .yqg-mobile {
    display: none;
  }

  .ten-year-desktop {
    display: block;
    text-align: center;
  }

  .ten-year-nav {
    display: inline-flex;
    height: 150px;
    width: 254px;
    justify-content: center;
    margin-right: auto;
    /* border: 1px solid orange; */
  }

  nav {
    display: -ms-flexbox;
    display: flex;
  }

  .nav {
    margin-top: 0;
    -ms-flex-item-align: center;
    align-self: center;
  }

  /* --- Nuts and Bolts section --- */
  .yellow-box {
    height: 380px;
    width: 380px;
    padding-top: 4.5em; /* need ems for firefox */
    /*margin: 4% 0% 2% 0%;*/
    margin: 4em 0 3em 0; /* need ems for firefox */
  }

  .nut {
    width: 125px;
    height: 125px;
    top: -17%;
    left: 37%;
  }

  .fa {
    font-size: 3.5em;
  }

  /* --- About Our Shop section --- */
  .about-our-shop {
    background: rgba(170, 170, 170, 1) url(../img/page-curl-corner.jpg)
      no-repeat;
    padding: 3% 2% 5% 3%;
    height: 100%;
  }

  .technet {
    position: absolute;
    top: 1%;
    left: 1%;
    height: 162px;
    width: 250px;

    transition: transform 0.3s;
  }
  .technet:hover {
    transform: scale(1.1);
  }

  .about-our-shop p {
    margin: 1em 0 1.5em 0;
    font-size: 1.5em;
  }

  .about-our-shop .btn {
    margin-top: 0em;
  }

  /* --- Our Services section --- */
  .our-services {
    padding: 3% 2% 5% 3%;
    height: 100%;
  }

  .our-services h4 {
    margin: 4em 0 1em;
  }

  /* --- Our History section --- */
  .history-pics p {
    margin: -2% -12% 0;
  }

  .our-history .btn {
    margin-bottom: 3%;
  }

  /* --- Our Experience section --- */
  .our-experience {
    padding: 3% 2% 4% 3%;
    height: 100%;
  }

  .our-experience p {
    margin: 2em;
    font-size: 2em;
    text-shadow: 4px 4px 4px #000;
  }

  /* --- Testimonials section --- */
  .testimonials {
    padding: 3% 0 5% 0;
    height: auto;
  }

  .testimonial img {
    max-width: 30%;
    margin-top: 2em;
  }

  /* --- Book Appointment section  --- */
  .book-appointment {
    padding: 3% 2% 4% 3%;
    height: 100%;
  }

  .book-appointment p {
    margin: 4em 0 3em 0;
    text-shadow: 4px 4px 4px #000;
  }

  /* --- Contact Us section --- */
  .contact-us {
    padding: 3% 2% 4% 3%;
    height: 100%;
  }

  .contact-us h2 {
    margin-bottom: 1em;
  }

  .contact-us .wrap {
    margin-bottom: 4em;
  }

  .contact-us .wrap p {
    font-size: 2.5em;
    text-shadow: 3px 3px 3px #000;
  }

  .social-section {
    margin: 2%;
  }

  .contact-us .btn {
    margin: 2em 0 1em 0; /* need ems for firefox */
  }

  /* --- Map section --- */
  .map {
    margin: 1em auto;
    height: 50vh;
  }

  /* --- ABOUT PAGE ---
=================================================== */

  .team-pic {
    /*background: url('../img/team_front-desktop.jpg') no-repeat center center;*/
    /*background-size: cover;*/
    /*margin: 1em auto -1em auto;*/
    padding-top: 3em;
    margin-top: 3em;
  }

  .technicians {
    -ms-flex-direction: row;
    flex-direction: row;
    height: 75vh;
    align-items: center;
  }

  .justin {
    width: 60%;
  }

  .eden,
  .tony,
  .mike,
  .noah {
    -ms-flex: 1;
    flex: 1;

    transition: flex 0.5s ease-in;

    transition: flex 0.5s ease-in, -ms-flex 0.5s ease-in;
  }

  .eden:hover,
  .tony:hover,
  .mike:hover,
  .noah:hover {
    -ms-flex: 4;
    flex: 4;
  }

  .cherleen {
    width: 50%;
  }

  .justin img,
  .cherleen img {
    transition: transform 0.3s ease-in;
  }

  .justin img:hover,
  .cherleen img:hover {
    transform: scale(1.05);
  }

  .handshake {
    background: radial-gradient(
        rgba(255, 255, 255, 0.25),
        85%,
        rgba(255, 255, 0, 0.75)
      ),
      url(../img/handshake-mobile.jpg) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 50%;
    border: 5px solid yellow;
    box-shadow: 0 12px 9px -6px rgba(0, 0, 0, 0.5);
    width: 35%;
    margin: 0 auto;
    position: relative;
  }

  .handshake::after {
    content: " ";
    background: rgba(0, 0, 0, 0.08);
    height: 10px;
    position: absolute;
    right: 5%;
    bottom: -75px;
    left: 5%;
    border-radius: 50%;
  }

  .shop {
    background: #eee;
    margin: 12em 0 10em;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
    font-size: 80%;
  }

  .pooltable-car {
    background: url("../img/about-our-shop-historic-desktop.jpg") no-repeat
      center center;
    background-size: 100% 100%;
    -ms-flex: 2;
    flex: 2;
  }

  .sdt-paragraph-1,
  .sdt-paragraph-2 {
    -ms-flex: 1;
    flex: 1;
    -ms-flex-item-align: center;
    align-self: center;
  }

  .anywhere-else {
    left: -1.5em;
    padding: 2em 6em;
    border: 10px solid rgb(255, 255, 0);
  }

  /* --- CONTACT PAGE ---
	=================================================== */

  .contact-page {
    -ms-flex-direction: row;
    flex-direction: row;
    /*margin-bottom: 7em;*/
  }

  .map-section.flex {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1;
  }

  .contact-page .register-form {
    -ms-flex: 1;
    flex: 1;
  }

  .contact-page__contact-info span {
    margin-right: 80px;
    font-size: 0.9em;
  }

  .contact-page__contact-info p {
    font-size: 1.8em;
  }

  div.flex + p {
    font-size: 2em;
  }

  .contact-submit {
    position: absolute;
    top: 102%;
    left: 40%;
  }

  /* --- SERVICES PAGE ---
	=================================================== */

  .hoist {
    padding: 15em 0;
  }

  .service h4 {
    -ms-flex: 3;
    flex: 3;
    font-size: 2.5em;
  }

  .left::before,
  .left::after,
  .right::before,
  .right::after {
    font-size: 5em;
  }

  /* --- HISTORY PAGE ---
	=================================================== */
  #history .flex img {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  #history p {
    font-size: 1.5em;
  }

  .content-wrapper p {
    font-size: 2em;
  }

  .bcg-parallax {
    padding: 200px 0;
  }

  /*.detroit-free-press,
	.ambassador-bridge,
	.casino,
	.windsor-police,
	.sculpture-park,
	.shop-central {
		background-color: #eee;
		padding: 1em 0;
	}*/

  .detroit-free-press .flex,
  .casino .flex,
  .windsor-police .flex,
  .shop-central .flex {
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
  }

  .detroit-free-press .flex,
  .ambassador-bridge .flex,
  .casino .flex,
  .windsor-police .flex,
  .sculpture-park .flex,
  .shop-central .flex {
    -ms-flex-direction: row;
    flex-direction: row;
    /*margin: 5em auto;*/
    padding: 2em 0;
    margin: auto;
  }

  .detroit-free-press p {
    padding: 0;
    -ms-flex: 2;
    flex: 2;
  }

  .detroit-free-press img {
    padding: 0 0 0 1em;
    -ms-flex: 1;
    flex: 1;
  }

  .ambassador-bridge p,
  .casino p,
  .sculpture-park p {
    -ms-flex-order: 2;
    order: 2;
  }

  .ambassador-bridge img,
  .casino img,
  .sculpture-park img {
    padding: 2em 1em 2em 0;
  }

  .windsor-police p:first-child {
    -ms-flex: 2;
    flex: 2;
  }

  .windsor-police img,
  .windsor-police p:last-child {
    -ms-flex: 1;
    flex: 1;
  }

  .sources {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: space-between;
    align-content: space-between;
  }

  .sources cite {
    padding: 0.2em 1em;
  }
}

/* ===================================================
--- Large devices (large desktops, 1200px and up) ---
=================================================== */

@media screen and (min-width: 1200px) {
  h1 {
    font-size: 4em;
    margin-top: 0.5em;
    padding: 0 0.775em;
  }

  /* ----- Navigation ----- */
  .menu {
    margin-left: 1em;
  }

  /* --- Nuts and Bolts section --- */
  .yellow-box {
    -ms-flex: 0 1 calc(25% - 1em);

    flex: 0 1 calc(25% - 1em);
  }

  .yellow-box-technet {
    width: 150px;
    height: 97px;
  }

  .fa-clock-o {
    top: -8%;
    left: 49%;
  }

  .fa-wrench {
    top: -8%;
    left: 49%;
  }

  .fa-info {
    top: -8%;
    left: 53%;
  }

  .fa-wifi {
    top: -7%;
    left: 46%;
  }

  /* --- About Our Shop section --- */
  .about-our-shop .btn {
    margin-top: 3em;
  }

  /* --- Testimonials section --- */
  .testimonial-carousel .slick-dots {
    bottom: -50px;
  }

  /* --- Our History section --- */
  .our-history {
    margin-bottom: -5%;
    padding: 1% -1% 5% -1%;
  }

  .photo-left {
    -ms-flex: 3 1;
    flex: 3 1;

    transition: transform 1s ease-out;
    transform: rotateY(0deg);
  }

  .history-pics:hover .photo-left {
    /* transform: rotateY(70deg) translate(-1%); */
    transform: scale(0.9) translate(-1%);
  }

  .history-pics p {
    -ms-flex: 2;
    flex: 2;
    margin: -2% 0% 0;
    padding: 0 1%;
    position: relative;
    z-index: 100;

    transition: transform 1s ease-out;
  }

  .history-pics:hover p {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
  }

  .photo-right {
    -ms-flex: 3 1;
    flex: 3 1;

    transition: transform 1s ease-out;
    transform: rotateY(0deg);
  }

  .history-pics:hover .photo-right {
    /* transform: rotateY(-70deg) translateX(1%); */
    transform: scale(0.9) translateX(1%);
  }

  .our-history .btn {
    margin-top: 3%;
  }

  /* --- Book Appointment section  --- */
  .book-appointment p {
    margin: 6em 0 5em 0;
  }

  /* --- Auto Logos section --- */
  .auto-logos {
    width: 150px;
    height: 90px;
  }

  .volvo {
    width: 275px;
    height: 175px;
  }

  /* --- ABOUT PAGE ---
	=================================================== */
  .anywhere-else {
    padding: 3em 10em;
  }

  /* --- HISTORY PAGE ---
	=================================================== */
  .bcg-parallax {
    padding: 250px 0;
  }

  #history p {
    font-size: 2em;
  }

  .content-wrapper p {
    font-size: 2.5em;
  }

  .history-picture {
    background-size: contain;
  }

  .cunninghams {
    background: url(../img/cunninghams-desktop.jpg) no-repeat center 58%;
    background-size: cover;
  }

  .history-room {
    background: url(../img/history_room-desktop.jpg) no-repeat center 58%;
    background-size: cover;
  }

  .inside-shop {
    background-size: cover;
  }

  .shop-now {
    background: url(../img/shop_now-desktop.jpg) no-repeat center 52%;
    background-size: contain;
  }

  /* --- Back to top arrow --- */
  /*.back-to-top {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  text-decoration: none;
	  color: #eee;
	  font-size: 34px;
	  padding: 1em;
	  display: none;
	  background: url('../img/top.png') no-repeat;
	  width: 79px;
	  height: 90px;
	  opacity: 0.6;
	  border-radius: 20px;
	}

	.back-to-top:hover {  
	  opacity: 0.9;
	}*/
}