/***************************************
Written by:  Jonnie Grieve Digital Media
Author:      @jg_digitalMedia
Updated:     21/07/2020
Domain:      http://www.autoc.co.uk
***************************************/
/* utilities.scss - UNIVERSAL SELECTOR**/
* {
  padding: 0 0;
  list-style: none; }

/* utilities.scss - BACKGROUND STYLES*/
body {
  background-image: url(../images/main-bg.png); }

body#cert {
  background: #000000; }

/*header*/
@media (min-width: 1020px) {
  #container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto; } }
@media (max-width: 736px) {
  #container {
    max-width: 100%;
    /*display: block;*/ } }
@media (min-width: 1020px) {
  #container header {
    height: 200px; } }
@media (max-width: 1019px) {
  #container header {
    margin-bottom: 20px;
    border: none; } }
@media (min-width: 1020px) {
  #container #logo {
    position: relative;
    right: 50px;
    display: block;
    margin: 0 auto;
    width: 54%; } }
@media (max-width: 1019px) {
  #container #logo {
    left: 30px;
    width: 50%; } }
@media (max-width: 736px) {
  #container #logo {
    min-height: 100px; } }
@media (max-width: 600px) {
  #container #logo {
    width: 100%;
    display: block;
    margin: 0 auto; } }
@media (min-width: 1020px) {
  #container img#signature {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 150px;
    height: 120px; } }
@media (max-width: 1019px) {
  #container img#signature {
    position: absolute;
    top: 25px;
    left: 55%;
    width: 100px;
    height: 60px; } }
@media (max-width: 736px) {
  #container img#signature {
    display: none; } }
@media (min-width: 1020px) {
  #container #signatureText {
    position: absolute;
    top: 155px;
    left: 110px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: white; } }
@media (max-width: 1019px) {
  #container #signatureText {
    display: none; } }
@media (min-width: 1020px) {
  #container #topLinks {
    position: absolute;
    top: 120px;
    left: 755px;
    width: 180px; } }
@media (max-width: 1019px) {
  #container #topLinks {
    position: relative;
    top: 0px;
    width: 140px;
    left: 72%; } }
@media (max-width: 736px) {
  #container #topLinks {
    position: absolute;
    top: 105px;
    width: 135px;
    left: 75%; } }
@media (max-width: 600px) {
  #container #topLinks {
    display: none; } }
@media (min-width: 1020px) {
  #container a.topLinkStyle {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: white; } }
  @media (min-width: 1020px) and (min-width: 1020px) {
    #container a.topLinkStyle:hover {
      text-decoration: none; } }

@media (max-width: 1019px) {
  #container a.topLinkStyle {
    text-decoration: underline;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: white; } }
  @media (max-width: 1019px) and (min-width: 1020px) {
    #container a.topLinkStyle:hover {
      text-decoration: none; } }

@media (min-width: 1020px) {
  #container .autoGlym {
    position: relative;
    left: 775px;
    width: 100px;
    bottom: 30px; } }
@media (max-width: 1019px) {
  #container .autoGlym {
    display: inline;
    position: absolute;
    top: 60px;
    left: 56%;
    width: 130px;
    height: 30px; } }
@media (max-width: 736px) {
  #container .autoGlym {
    left: 10px; } }
@media (max-width: 600px) {
  #container .autoGlym {
    top: -25px;
    left: 115px;
    left: 0px;
    position: relative; } }
@media (min-width: 1020px) {
  #container #autoGlym {
    display: inline;
    position: absolute;
    top: 5px;
    height: 30px;
    width: 110px;
    transition-duration: .4s; }
    #container #autoGlym:hover {
      transform: scale(1.2);
      transition-duration: .4s; } }
@media (max-width: 1019px) {
  #container #autoGlym {
    display: inline;
    position: absolute;
    top: 25px;
    height: 30px;
    width: 90px;
    transition-duration: .4s; }
    #container #autoGlym:hover {
      transform: scale(1.2);
      transition-duration: .4s; } }
@media (max-width: 736px) {
  #container #autoGlym {
    top: 10px;
    height: 30px;
    width: 80px;
    position: relative;
    display: block; } }
@media (max-width: 600px) {
  #container #autoGlym {
    top: 35px;
    left: 125px; } }
@media (min-width: 1020px) {
  #container .acs {
    position: absolute;
    top: 5px;
    left: 725px;
    height: 110px;
    width: 190px; } }
@media (max-width: 1019px) {
  #container .acs {
    position: relative;
    display: inline;
    left: 20%;
    height: 100px;
    width: 150px; } }
@media (max-width: 736px) {
  #container .acs {
    position: absolute;
    top: 20px;
    left: 70%;
    width: 130px;
    height: 80px; } }
@media (max-width: 600px) {
  #container .acs {
    display: none; } }
@media (min-width: 1020px) {
  #container #social {
    position: relative;
    display: block;
    float: left;
    top: 105px;
    left: 800px;
    width: auto;
    z-index: 1; } }
@media (max-width: 1019px) {
  #container #social {
    position: relative;
    display: block;
    float: left;
    bottom: 115px;
    left: 92%;
    width: auto;
    z-index: 1; } }
@media (max-width: 736px) {
  #container #social {
    top: 20px;
    left: 10px;
    /*left: -18px;*/ } }
@media (max-width: 600px) {
  #container #social {
    /*top: 10px;*/
    top: 0px;
    left: 40px; } }
@media (min-width: 1020px) {
  #container #social div {
    display: inline;
    position: relative;
    right: 10px;
    margin-right: 8px; } }
@media (max-width: 1019px) {
  #container #social div {
    display: block;
    position: relative; } }
@media (max-width: 736px) {
  #container #social div {
    display: inline;
    right: 10px; } }
@media (min-width: 1020px) {
  #container #social div img {
    display: inline-block;
    position: relative;
    bottom: 15px;
    width: 30px;
    height: 30px; } }
@media (max-width: 1019px) {
  #container #social div img {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0; } }
@media (max-width: 736px) {
  #container #social div img {
    position: relative;
    width: 25px;
    height: 25px;
    left: 30px; } }
@media (max-width: 600px) {
  #container #social div img {
    bottom: 20px;
    left: 0px; } }
@media (min-width: 1020px) {
  #container nav {
    height: 40px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: white solid 5px;
    background: black; } }
@media (max-width: 1019px) {
  #container nav {
    position: relative;
    margin: 0 auto;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: white solid 5px;
    background: black;
    width: 100%; } }
@media (max-width: 736px) {
  #container nav {
    width: 90%; } }
@media (min-width: 1020px) {
  #container nav ul {
    margin: 20px 0 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 10px; } }
@media (min-width: 1020px) {
  #container nav ul li {
    display: inline-block;
    margin-right: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px; } }
@media (max-width: 1019px) {
  #container nav ul li {
    display: block;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; } }
#container nav ul li a {
  color: white;
  padding: 20px 0px; }
  @media (min-width: 1020px) {
    #container nav ul li a {
      text-decoration: none;
      text-transform: uppercase;
      font-weight: bold;
      color: white; }
      #container nav ul li a:hover {
        color: #26a9e1; }
      #container nav ul li a.selected {
        color: #26a9e1; } }
  @media (max-width: 1019px) {
    #container nav ul li a {
      display: block;
      margin: auto;
      text-decoration: none;
      color: white;
      padding: 20px 30px; }
      #container nav ul li a:hover {
        background: url(../images/wheel.png) no-repeat, #26a9e1;
        background-position: 95% 10px;
        background-size: 30px 30px; }
      #container nav ul li a.selected {
        background: url(../images/wheel.png) no-repeat, #26a9e1;
        background-position: 95% 10px;
        background-size: 30px 30px; } }

input#sendQuery,
input#resetQuery {
  position: relative;
  left: 100px;
  top: 30px;
  width: 130px;
  padding: 10px;
  background: #26a9e1;
  border: solid white 3px;
  border-radius: 10px;
  color: white;
  cursor: pointer; }

.pageContent img#valetingPanel, .pageContent img#detailPanel, .pageContent img#carpetPanel {
  position: relative;
  width: 286px;
  height: 292px;
  border: none;
  cursor: pointer; }
  @media (max-width: 736px) {
    .pageContent img#valetingPanel, .pageContent img#detailPanel, .pageContent img#carpetPanel {
      left: 0px;
      display: block;
      margin: 0 auto; } }
  @media (max-width: 600px) {
    .pageContent img#valetingPanel, .pageContent img#detailPanel, .pageContent img#carpetPanel {
      position: relative;
      width: 290px;
      height: 292px; } }

.form-conf {
  top: 0px;
  bottom: 80px;
  font-family: Trebuchet MS, arial, sans-serif;
  width: 70%;
  padding: 17px;
  border: dashed #4CAF50 3px;
  background: #72ef00;
  position: relative;
  display: block;
  margin: 0 auto; }

h1.form-conf-title {
  text-align: center;
  color: green;
  width: 50%;
  padding: 17px;
  border: dashed #4CAF50 3px;
  background: #72ef00; }

.form-error {
  width: 66%;
  color: red;
  margin: 10px 0;
  background: #a72525;
  color: white;
  padding: 17px;
  border: dashed 3px #FFEB3B; }

.next, .prev {
  font-family: Trebuchet MS, arial, sans-serif;
  background: lightblue;
  border: yellow solid 2px;
  padding: 15px 0;
  border-radius: 50%;
  width: 50px;
  cursor: pointer; }

/*page-content.scss*/
.pageContent {
  height: auto; }
  @media (min-width: 1020px) {
    .pageContent {
      display: block;
      margin: 0 auto;
      background: black; } }
  @media (max-width: 1019px) {
    .pageContent {
      font-family: Trebuchet MS, arial, sans-serif;
      background: black;
      margin: 0 auto;
      width: 100%; } }
  @media (max-width: 736px) {
    .pageContent {
      width: 90%; } }
  @media (max-width: 600px) {
    .pageContent {
      width: 90%; } }
  @media (min-width: 1020px) {
    .pageContent h1 {
      font-size: 16px;
      margin: 0 auto;
      padding: 20px 50px;
      font-family: Arial, Helvetica, sans-serif; } }
  @media (max-width: 1019px) {
    .pageContent h1 {
      padding: 20px 13px;
      margin: 0 auto;
      font-size: 3.7vw;
      text-align: center; } }
  @media (max-width: 600px) {
    .pageContent h1 {
      font-size: 4.5vw;
      line-height: 1.5; } }
  @media (min-width: 1019px) {
    .pageContent p {
      position: relative;
      left: 50px;
      width: 83%;
      line-height: 1.7em;
      text-align: left;
      font-family: Trebuchet MS, arial, sans-serif;
      padding: 15px 0px;
      font-weight: normal;
      margin: 0; } }
  @media (max-width: 1019px) {
    .pageContent p {
      position: relative;
      left: 20px;
      width: 89%;
      line-height: 2em;
      padding: 18px 0px;
      margin: 0;
      text-align: left; } }

/*footer*/
@media (min-width: 1020px) {
  footer {
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background: black;
    text-align: center; } }
@media (max-width: 1019px) {
  footer {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    color: white;
    background: black; } }
@media (max-width: 736px) {
  footer {
    margin: 0 auto;
    padding: 10px 0;
    width: 90%;
    text-align: center;
    font-size: 12px;
    width: 90%; } }
@media (min-width: 1020px) {
  footer span {
    padding: 10px 15px;
    font-size: 12px; } }
@media (max-width: 736px) {
  footer span {
    /*padding: 10px 15px;*/
    font-size: 12px; } }
@media (min-width: 1020px) {
  footer span a {
    color: white; }
    footer span a:hover {
      text-decoration: none; } }
@media (max-width: 1019px) {
  footer span a {
    color: white; }
    footer span a:hover {
      text-decoration: none; } }
@media (max-width: 736px) {
  footer span a {
    color: white; }
    footer span a:hover {
      text-decoration: none; } }

/*index.html*/
.pageContent {
  color: white; }
  .pageContent img#valetingPanel {
    left: 40px;
    background-image: url(../images/p_valeting.png); }
    @media (max-width: 736px) {
      .pageContent img#valetingPanel {
        left: 0px; } }
  .pageContent img#detailPanel {
    left: 65px;
    background-image: url(../images/p_detailing.png); }
    @media (max-width: 736px) {
      .pageContent img#detailPanel {
        left: 0px; } }
  .pageContent img#carpetPanel {
    left: 90px;
    background-image: url(../images/p_carpets.png); }
    @media (max-width: 1019px) {
      .pageContent img#carpetPanel {
        left: 0px;
        /*left: 40px;*/
        /*display: inline-block;*/ } }
    @media (max-width: 736px) {
      .pageContent img#carpetPanel {
        left: 0px; } }
  .pageContent #sam_rosie {
    display: inline-block;
    max-width: 450px;
    position: relative;
    vertical-align: top;
    padding: 0 9%;
    text-align: center;
    margin: 20px auto; }
    @media (max-width: 1019px) {
      .pageContent #sam_rosie {
        display: inline;
        position: relative;
        top: 0px; } }
    @media (max-width: 736px) {
      .pageContent #sam_rosie {
        /*display: block;*/
        width: 330px;
        max-width: 330px; } }
  .pageContent #sam_rosie > img#homepage_image {
    width: 350px;
    display: inline-block; }
    @media (max-width: 736px) {
      .pageContent #sam_rosie > img#homepage_image {
        /*width: 282px;*/
        display: block;
        margin: 0 auto;
        text-align: center; } }
    @media (max-width: 600px) {
      .pageContent #sam_rosie > img#homepage_image {
        /*width: 90%;*/
        width: 96%;
        /*max-width: 292px;*/
        /*width: 90%; */
        /* width: 96%; */
        /*max-width: 292px;*/
        max-width: 300px; } }
  .pageContent #valetingPanel:hover,
  .pageContent #detailPanel:hover,
  .pageContent #carpetPanel:hover {
    background-position: -300px; }
  .pageContent #twitter-feed {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 300px;
    height: auto; }
    @media (max-width: 1019px) {
      .pageContent #twitter-feed {
        position: relative;
        margin: 0 auto;
        text-align: center; } }
    @media (max-width: 736px) {
      .pageContent #twitter-feed {
        display: block;
        position: relative;
        margin: 10px auto;
        width: 300px;
        position: relative;
        left: 0; } }
  .pageContent #twitter-widget-0 {
    margin-top: 20px !important;
    max-width: 370px !important;
    height: 280px !important; }
    @media (max-width: 736px) {
      .pageContent #twitter-widget-0 {
        max-width: 300px !important;
        height: 280.75px !important; } }
  .pageContent .twitter-timeline {
    max-width: 260px; }
  .pageContent #rolgal {
    /*display: block;*/ }
    @media (min-width: 1020px) {
      .pageContent #rolgal {
        position: relative;
        height: 255px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        text-align: center; } }
    @media (max-width: 1019px) {
      .pageContent #rolgal {
        /*max-width: 100%; */
        min-height: 300px; } }
    @media (max-width: 736px) {
      .pageContent #rolgal {
        position: relative;
        display: block;
        margin: 0px auto;
        /*max-width: 360px;*/
        max-width: 300px;
        min-height: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        text-align: center; } }
    @media (max-width: 600px) {
      .pageContent #rolgal {
        /*width: 90%;*/
        width: 96%;
        /*max-width: 300px;*/
        /*width: 300px;*/ } }
    @media (min-width: 1020px) {
      .pageContent #rolgal div {
        position: absolute;
        margin: 10px auto;
        top: 0px;
        left: 10px;
        right: 10px;
        bottom: 10px; } }
    @media (max-width: 1019px) {
      .pageContent #rolgal div {
        margin: 10px auto;
        position: absolute;
        /*position: relative;*/
        left: 20%;
        /*text-align: center;*/ } }
    @media (max-width: 736px) {
      .pageContent #rolgal div {
        left: 0px;
        display: block;
        /*width: 300px;*/
        margin: 10px auto; } }
    @media (min-width: 1020px) {
      .pageContent #rolgal div img {
        max-width: 100%;
        text-align: center;
        /*width: 100%;*/ } }
    @media (max-width: 736px) {
      .pageContent #rolgal div img {
        max-width: 100%; } }

/*about.html*/
.pic img#sam_payne {
  border: solid 1px yellow; }
.pic a.contactLink {
  color: #00ffff;
  font-weight: bold; }
.pic a.contactLink:hover {
  text-decoration: none; }
@media (min-width: 1020px) {
  .pic {
    position: relative;
    top: 100px;
    right: 30px; } }
@media (max-width: 736px) {
  .pic {
    margin: 0px;
    position: relative;
    left: 30px;
    padding: 30px; } }
@media (max-width: 535px) {
  .pic {
    display: block;
    margin: 0 auto; } }

/* + carpets.html*/
ul#reasons {
  position: relative;
  left: 50px;
  font-family: Trebuchet MS, arial, sans-serif;
  width: 65%;
  line-height: 1.9; }
  @media (max-width: 1019px) {
    ul#reasons {
      left: 30px;
      width: 65%; } }
  @media (max-width: 736px) {
    ul#reasons {
      width: 80%; } }
  ul#reasons li {
    margin-top: 10px; }

/*prices.html*/
@media (min-width: 1020px) {
  #prices {
    position: relative;
    width: 60%;
    left: 35%;
    font-family: Trebuchet MS, arial, sans-serif;
    font-size: 13px;
    line-height: 1.6; } }
@media (max-width: 1019px) {
  #prices {
    position: relative;
    width: 80%;
    left: 5%;
    font-family: Trebuchet MS, arial, sans-serif;
    font-size: 13px;
    line-height: 2em; } }
@media (min-width: 1020px) {
  #prices .p_highlight {
    color: #00ccff;
    font-weight: bold; } }
@media (min-width: 1020px) {
  #prices .price {
    color: #ff5500;
    font-weight: bold; } }

@media (min-width: 1020px) {
  .pricesMenu {
    display: block;
    position: absolute;
    margin: 0;
    left: 15px;
    width: 300px;
    height: 300px;
    font-family: Trebuchet MS, arial, sans-serif;
    font-size: 12px;
    text-decoration: none; } }
@media (max-width: 1019px) {
  .pricesMenu {
    position: relative;
    margin: 0 2%;
    width: 90%; } }

/*carpets.html*/
#carpets {
  text-align: center; }

.highlight {
  color: #00ccff;
  font-weight: bold;
  letter-spacing: 2px; }

.price {
  color: #ff5500;
  font-weight: bold; }

a.contactLink {
  color: #00ffff;
  font-weight: bold; }
  a.contactLink:hover {
    text-decoration: none; }

/*testimonial.html*/
.testimonial {
  font-weight: bold;
  color: #76bdfa; }

.qualities {
  font-size: 10px;
  color: #ff9900; }

/*vehicle-detailing.html*/
.stage-highlight {
  color: #ff9900;
  font-weight: bold; }

a.backToTop {
  font-size: 9px;
  color: red; }
  a.backToTop:hover {
    text-decoration: none; }

ul.det_mainMenu {
  display: inline;
  font-size: 10px;
  list-style-type: none;
  line-height: 34px;
  text-decoration: none;
  font-family: Trebuchet MS, arial, sans-serif;
  color: white; }

a.det_mainMenu, a.det_fulldet, a.det_touchless, a.det_maintenance, a.det_paintprotection, a.det_paintenhancement, a.det_treatments, a.det_whatisdetailing, a.det_extratreatments {
  color: white; }

a.det_mainMenu:hover, a.det_fulldet:hover, a.det_touchless:hover, a.det_maintenance:hover, a.det_paintenhancement:hover, a.det_paintprotection:hover, a.det_treatments:hover, a.det_whatisdetailing:hover, a.det_extratreatments:hover {
  color: #26a9e1;
  text-decoration: none; }

ul.det_treatMenu {
  font-family: Verdana, Geneva, sans-serif;
  list-style-type: none;
  text-indent: 45px;
  line-height: 24px; }

.refvalPrice, .minvalPrice, .fullvalPrice, .intvalPrice, .basicdPrice, .fulldPrice, .bikesPrice, .winterPrice {
  color: #ff0000;
  font-weight: bold; }

.refvalHighlight, .minvalHighlight, .fullvalHighlight, .intvalHighlight, .basicdHighlight, .fulldHighlight, .bikesHighlight, .winterHighlight {
  display: inline-block;
  color: #00ccff;
  font-weight: bold;
  font-family: Trebuchet MS, arial, sans-serif;
  margin-top: 15px;
  padding: 0 30px; }

/*gallery.html*/
.gallery {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 99%;
  z-index: 1000;
  text-align: center; }
  @media (max-width: 736px) {
    .gallery {
      display: block;
      z-index: 1000;
      text-align: center; } }

.gallery-container div {
  display: inline-block;
  display: none;
  /*Both display properties must remain  - why?? */ }
  .gallery-container div img {
    max-width: 100%; }
    @media (max-width: 736px) {
      .gallery-container div img {
        max-width: 85%;
        margin: 0 30px; } }

button {
  position: absolute; }

.next {
  right: 90px; }
  .next:hover {
    color: white;
    background: darkblue; }
  @media (max-width: 1019px) {
    .next {
      right: 5px;
      background: lightblue;
      border: yellow solid 2px;
      margin-right: 10px;
      margin-bottom: 20px; } }

.prev {
  left: 40px; }
  .prev:hover {
    color: white;
    background: darkblue; }
  @media (max-width: 1019px) {
    .prev {
      left: 5px;
      margin-right: 15px; } }

/*contact.html*/
a.contactLink {
  color: #00ffff;
  font-weight: bold; }
  a.contactLink:hover {
    text-decoration: none; }

.required {
  color: #d3c0c0;
  font-weight: bold; }

.emailHighlight {
  font-weight: bold; }

.emailLink {
  color: white; }
  .emailLink:hover {
    text-decoration: none;
    color: #00ffff; }

p.contact {
  width: 200px;
  margin-right: 0px;
  height: auto;
  min-height: 700px; }
  @media (max-width: 1019px) {
    p.contact {
      width: 200px;
      margin-right: 0px;
      min-height: 0px;
      min-height: 560px;
      min-height: 360px;
      display: inline-block;
      vertical-align: top; } }

p.contact-conf {
  min-height: 360px; }
  @media (max-width: 1019px) {
    p.contact-conf {
      width: 200px;
      margin-right: 0px;
      min-height: 0px;
      min-height: 560px;
      display: inline-block;
      vertical-align: top; } }

/*form.scss - contact page*/
@media (min-width: 1020px) {
  #formContainer {
    position: absolute;
    left: 250px;
    top: 340px;
    font-family: Trebuchet MS, arial, sans-serif;
    width: 500px;
    line-height: 1.5pc; } }
@media (max-width: 1019px) {
  #formContainer {
    font-family: Trebuchet MS, arial, sans-serif;
    width: 95%;
    min-height: 400px;
    line-height: 1.5;
    padding: 10px 10px; } }
@media (max-width: 736px) {
  #formContainer {
    width: 89%;
    min-height: 480px;
    margin-left: 15px; } }
@media (max-width: 1019px) {
  #formContainer #contactForm {
    width: 100%; } }
@media (min-width: 1020px) {
  #formContainer label.form-label {
    width: 90px;
    display: inline-block;
    vertical-align: top; } }
@media (max-width: 1019px) {
  #formContainer label.form-label {
    width: 100px;
    display: inline-block;
    vertical-align: top; } }
@media (max-width: 736px) {
  #formContainer label.form-label {
    width: 90px; } }

@media (min-width: 1020px) {
  .pageContent div#contactImgContainer {
    position: absolute;
    top: 400px;
    left: 670px; } }
@media (max-width: 1019px) {
  .pageContent div#contactImgContainer {
    display: inline-block; } }
@media (max-width: 600px) {
  .pageContent div#contactImgContainer {
    width: 55%; } }
@media (max-width: 535px) {
  .pageContent div#contactImgContainer {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto; } }
@media (max-width: 1019px) {
  .pageContent div#contactImgContainer img {
    width: 100%;
    display: inline-block;
    margin: 0 auto; } }
@media (max-width: 736px) {
  .pageContent div#contactImgContainer img {
    width: 86%;
    position: relative;
    display: block; } }

@media (min-width: 1020px) {
  .form-conf h2 {
    text-align: center;
    color: green; } }
@media (min-width: 1020px) {
  .form-conf p {
    color: green;
    width: 90%; } }
@media (max-width: 1019px) {
  .form-conf p {
    color: green;
    width: 90%; } }
@media (min-width: 1020px) {
  .form-conf a {
    color: blue; }
    .form-conf a:hover {
      text-decoration: none; } }
@media (min-width: 1020px) {
  .form-conf .linkToHome {
    color: blue; }
    .form-conf .linkToHome:hover {
      text-decoration: none; } }
@media (max-width: 1019px) {
  .form-conf .linkToHome {
    color: blue; }
    .form-conf .linkToHome:hover {
      text-decoration: none; } }

@media (max-width: 1019px) {
  .form-error {
    display: block;
    margin: 0 auto; } }

@media (min-width: 1020px) {
  input {
    margin-bottom: 40px 0; } }
@media (max-width: 736px) {
  input {
    margin-bottom: 40px 0;
    position: absolute;
    left: 120px;
    width: 200px; } }

@media (min-width: 1020px) {
  input#firstName, input#lastName, input#contact_Email, input#contact_Phone {
    position: relative;
    left: 10px;
    padding: 10px 20px;
    margin: 10px 0px;
    transition: background .3s;
    font-family: Trebuchet MS, arial, sans-serif;
    letter-spacing: 1px; } }
@media (max-width: 1019px) {
  input#firstName, input#lastName, input#contact_Email, input#contact_Phone {
    position: relative;
    left: 10px;
    padding: 14px 20px;
    margin: 10px 0px;
    width: 75%;
    transition: background .3s;
    font-family: Trebuchet MS, arial, sans-serif; } }
@media (max-width: 736px) {
  input#firstName, input#lastName, input#contact_Email, input#contact_Phone {
    position: relative;
    left: 10px;
    padding: 14px 20px;
    margin: 10px 0px;
    transition: background .3s; } }

@media (min-width: 1020px) {
  input#firstName:hover, input#lastName:hover, input#contact_Email:hover, input#contact_Phone:hover {
    background: #26a9e1; } }
@media (max-width: 1019px) {
  input#firstName:hover, input#lastName:hover, input#contact_Email:hover, input#contact_Phone:hover {
    background: #26a9e1; } }

@media (min-width: 1020px) {
  input#firstName:focus, input#lastName:focus, input#contact_Email:focus, input#contact_Phone:focus {
    background: #26a9e1; } }
@media (max-width: 1019px) {
  input#firstName:focus, input#lastName:focus, input#contact_Email:focus, input#contact_Phone:focus {
    background: #26a9e1; } }

input#firstName::placeholder, input#lastName::placeholder, input#contact_Email::placeholder, input#contact_Phone::placeholder {
  color: white; }

@media (min-width: 1020px) {
  textarea#message {
    position: relative;
    width: 266px;
    height: 90px;
    left: 10px;
    margin: 10px 0px;
    padding: 10px 20px;
    transition: background .3s;
    font-family: Trebuchet MS, arial, sans-serif;
    letter-spacing: 1px; } }
@media (max-width: 1019px) {
  textarea#message {
    position: relative;
    left: 10px;
    height: 70px;
    width: 75%;
    height: 105px;
    padding: 10px 20px;
    font-family: Trebuchet MS, arial, sans-serif;
    letter-spacing: 1px;
    transition: background .3s; } }
@media (max-width: 736px) {
  textarea#message {
    width: 266px;
    height: 90px;
    margin: 10px 0px;
    padding: 10px; } }

@media (min-width: 1020px) {
  textarea#message:hover, textarea#message:focus {
    background: #26a9e1; } }
@media (max-width: 1019px) {
  textarea#message:hover, textarea#message:focus {
    background: #26a9e1; } }

textarea#message::placeholder {
  color: white; }

@media (max-width: 535px) {
  input#sendQuery,
  input#resetQuery {
    left: 50px; } }
input#sendQuery:hover,
input#resetQuery:hover {
  background: url("../images/wheel.png"), no-repeat, #26a9e1;
  background-position: 95px 5px;
  background-repeat: no-repeat;
  background-size: 25px 25px; }

#error {
  display: none;
  color: red;
  font-size: 20px;
  top: 45px; }
  @media (max-width: 736px) {
    #error {
      font-size: 15px; } }

.thankYou {
  position: relative;
  left: 20px;
  /* max-width: 90%; */
  margin: 15px auto;
  display: block;
  width: 90%;
  text-align: center; }

.needsfilled {
  background: red;
  color: white; }

/*# sourceMappingURL=styles.css.map */