html{
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
  width:100%;
  height:100%;
  position:relative;
}

/* Global */

::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 15px;
  color: white;
  opacity: 1; /* Firefox */
}



.container{
  width:90%;
  max-width: 1200px;
  margin:auto;
  overflow:auto;
}

.column{
  width:33%;
  float:left;
}

.column2{
  width:33%;
  float:left;
  margin-top:40px;
}

ul{
  margin:0;
  padding:0;
}

.button_1{
  height:38px;
  background:royalblue;
  border:0;
  padding-left: 20px;
  padding-right:20px;
  color:#ffffff;
}

.light{
  padding:15px;
  background:lightslategray;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:10px;
  margin-bottom:10px;
}

/* Header **/
header{
  background:#35424a;
  color:#ffffff;
  padding-top:10px;
  /*min-height:70px;*/
  min-height:10vh;
  border-bottom:royalblue 4px solid;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:40px;
}

header .highlight, header .current a{
  /* color:#e8491d; */
  color: royalblue;
  font-weight:bold;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

/* Showcase */
#showcase{
  min-height:75vh;
  background:url('../img/kitchen4a.jpg') no-repeat 0 -400px;
  background-size: cover;
  background-position: center;
  text-align:center;
  color:#ffffff;
  background:url('../img/kitchen4a.jpg');
  background-size: cover;
  background-position: center;
  text-align:center;
  color:#ffffff;
}

#showcase h1{
  margin-top:120px;
  font-size:65px;
  margin-bottom:10px;
  text-shadow: 0 0 3px blue, 0 0 5px blue;
}

#showcase p{
  font-size:30px;
  text-shadow: 0 0 3px blue, 0 0 5px blue;
}

#showcase img{
  padding-top:80px;
  padding-right: 160px;
}

/* About */
#aboutmain{
  min-height:75vh;
  background:url('../img/kitchen7b.jpg');
  background-size: cover;
  background-position: center;
  text-align:center;
  color:#ffffff;
}

#aboutmain p{
  margin-top: 100px;
  color: #35424a;
  font-size: 25px;
  font-weight: bold;
}

/* Services */
#servicesmain{
  min-height:75vh;
  background:url('../img/kitchen4b.jpg') no-repeat 0 -400px;
  background-size: cover;
  background-position: center;
  text-align:center;
  color:#ffffff;
}

#servicesmain h1{
  padding:0;
  margin:0px;
  margin-top: 15px;
  margin-bottom: -5px;
  color: black;
  font-size: 35px;
  font-weight: bold;
}

#servicesmain h2{
  padding:0;
  margin:0px;
  margin-top: 5px;
  color: black;
  font-size: 20px;
  font-weight: bold;
}

#servicesmain h3{
  padding:0;
  margin:0px;
  margin-left: 45px;
  color: black;
  font-size: 17px;
  font-weight: bold;
}

#servicesmain p{
  padding:0;
  margin:0px;
  color: black;
  font-size: 18px;
  font-weight: bold;
}

/* Service Request */
#servicerequest {
  width: 100%;
  min-height: 75vh;
  background-image: linear-gradient(rgba(0,0,0,0.7), #3551b5), url('../img/kitchen4a.jpg');
  background-position: center;
  background-size: cover;
}
#servicerequest ::placeholder{
  color:white;
}
#servicerequest .wrapper{
  margin-left:5%;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#servicerequest .box button{
  grid-column: 1/ span 3;
}
#servicerequest h2{
  color:white;
  font-size:25px;
  margin-top:40px;
  margin-bottom:-5px;
  margin-left:0px;

}

#servicerequest input{
  background-color:transparent;
  color:white;
  border-color:royalblue;
  border-radius:3px;
  border-width:1px;
  border-style:solid;
  font-size:15px;
  padding:2px;
  margin:2px;
}

#servicerequest input:after{
  background-color:transparent;
  color:white;
  border-color:royalblue;
  border-radius:3px;
  border-width:1px;
  border-style:solid;
  font-size:15px;
  padding:2px;
  margin:2px;
}

#servicerequest label{
  color:white;
  font-size:20px;

}

#servicerequest textarea{
  background-color:transparent;
  color:white;
  border-color:royalblue;
  border-radius:3px;
  border-width:1px;
  border-style:solid;
  font-size:20px;
  padding-left:5px 5px;
  width:65%;
  margin-top:5px;
}

.formbutton {
  grid-column: 1/ span 3;
  color:white;
  background-color:royalblue;
  border-radius: 15px;
  font-size:20px;
  margin-left:120%;
  margin-top: 10px;
  padding: 10px 20px;
}
.formbutton:hover {
  color:royalblue;
  background-color:white;
  border-radius: 15px;
  font-size:20px;
  padding: 10px 20px;
}


/* Main */
#main{
  min-height: 720px;
  background:url('../img/map2.png') no-repeat;
  background-position: top 0% right 5%;
  background-size: 60%;
  /*background:url('../img/map2.png') no-repeat right/70%;*/
  
}

/* Footer */
footer{
  background:#35424a;
  position: fixed;
  bottom:0;
  left:0;
  width: 100%;
  color:#ffffff;
  min-height: 15vh;
  border-top:royalblue 4px solid;
}
footer h3{
  text-align:center;
  font-size:13px;
}

footer h1{
  float:left;
}

footer p[type="left"]{
  float: left;
  font-size: 23px;
}

footer p[type="right"]{
  float: right;
  font-size: 23px;
}

footer img{
  text-align: center;
  margin-top: 10px;
}

/* Boxes */
#boxes{
  margin-top:10px;
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;
}

#boxes .box img{
  width:150px;
}

/* Sidebar */
aside#sidebar{
  float:right;
  width:60%;
  margin-top:10px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
  width:90%;
  padding:5px;
}

/* Main-col */
article#main-col{
  float:left;
  width:30%;
  padding-left: 20px;
  margin-bottom: 20px;
  /* background:#35424a; */
  color: black;
}

article#main-col h1{
  font-size: 35px;
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
}

/* Counties */
ul#areas li{
  list-style: none;
  padding: 0px;
  margin: 0px;

}

ul#areas h3{
  padding: 0;
  margin: 0px;
  margin-left:20px;
  margin-top: 5px;
  margin-bottom: -5px;
  color: royalblue;
  font-size: 19px;
}

ul#areas p{
  padding: 0px;
  margin-left: 20px;
  margin-bottom: 0px;
  display: inline;
  font-size: 13px;
}

/* Services */
ul#services li{
  list-style: none;
  padding:20px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}



/* Media Queries */

/*Less than 320px */
@media screen and (max-device-width:319px){
  header{
    padding-top:0px;
    min-height:10vh;
    display:flex;
  }
  header a{
    color:#ffffff;
    text-decoration:none;
    text-transform: uppercase;
    font-size:13px;
  }
  header li{
    float:left;
    display:float;
    /*padding: 0 20px 0 20px;*/
    padding:0 4px 0 4px;
  }
  header #branding{
    float:left;
  }
  
  header #branding h1{
    margin:0;
  }
  
  header nav{
    float:right;
    margin-top:0px;
  }
  
  header .highlight, header .current a{
    /* color:#e8491d; */
    color: royalblue;
    font-weight:bold;
  }
  
  header a:hover{
    color:#cccccc;
    font-weight:bold;
  }
  
  /* Showcase */
  #showcase{
    min-height:75vh;
    background:url('../img/kitchen4a.jpg');
    background-size: cover;
    background-position: center;
    text-align:center;
    color:#ffffff;
  }
  
  #showcase h1{
    display:none;
    margin-top:20px;
    font-size:35px;
    text-shadow: 0 0 3px blue, 0 0 5px blue;
    margin-bottom:10px;
  }
  
  #showcase p{
    font-size:25px;
    text-shadow: 0 0 3px blue, 0 0 5px blue;
  }
  
  #showcase img{
    padding-top:0px;
    padding-right: 0px;
  }
  footer{
    margin:0;
    padding:0;
  }
  footer h3{
    text-align:center;
    font-size:12px;
  }
  footer h1{
    width:100%;
    margin:0 auto;
    text-align:center;
  }
  
  footer p[type="left"]{
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size: 18px;
  }
  
  footer p[type="right"]{
    width:100%;
    margin:0 auto;
    text-align:center;
    font-size: 18px;
  }
  
  footer img{
    margin-top: 0px;
  }
  /* Services */
  #servicesmain{
    margin:0;
    padding:0;
    
  }

  #servicesmain h1{
    padding:0;
    margin:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 17px;
    font-weight: bold;
  }

  #servicesmain h2{
    padding:0;
    margin:0px;
    margin-top: 0px;
    font-size: 11px;
    font-weight: bold;
  }

  #servicesmain h3{
    padding:0;
    margin:0px;
    margin-left: 0px;
    font-size: 10px;
    font-weight: normal;
  }

  #servicesmain p{
    padding:0;
    margin:0px;
    font-size: 7px;
    font-weight: bold;
  }
  /* Service Area */
  /* Main */
  #main{
    min-height:85vh;
    background:none;
    background-color:lightgray;
  }
  article#main-col{
    float:left;
    width:100%;
    padding-left: 10px;
    margin-top: 5px;
  }

  article#main-col h1{
    display:none;
  }
  ul#areas h3{
    padding: 0px;
    margin: 0px;
    margin-top: -5px;
    margin-bottom: -5px;
    color: royalblue;
    font-size: 10px;
  }
  ul#areas p{
    padding: 0px;
    margin-left: 10px;
    margin-bottom: 0px;
    display: inline;
    font-size: 8px;
  }
}



/*320px to 480px --- Smart Phones*/
@media screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  {
    header{
      min-height:10vh;
      display:block;
      border-bottom:royalblue 4px solid;
    }
    header a{
      font-size:13px;
    }
    header li{
      float:left;
      display:float;
      padding:0 4px 0 4px;
    }
    header #branding{
      width:60%;
      float:left;
    }
    
    header #branding h1{
      margin:0;
    }
    
    header nav{
      width:40%;
      display:block;
      float:right;
      margin-top:0px;
    }
    
    header .highlight, header .current a{
      /* color:#e8491d; */
      color: royalblue;
      font-weight:bold;
    }
    
    header a:hover{
      color:#cccccc;
      font-weight:bold;
    }
    
    /* Showcase */
    #showcase{
      min-height:75vh;
      background:url('../img/kitchen4a.jpg');
      background-size: cover;
      background-position: center;
      text-align:center;
      color:#ffffff;
    }
    
    #showcase h1{
      display:none;
      margin-top:20px;
      font-size:35px;
      text-shadow: 0 0 3px blue, 0 0 5px blue;
      margin-bottom:10px;
    }
    
    #showcase p{
      font-size:25px;
      text-shadow: 0 0 3px blue, 0 0 5px blue;
    }
    
    #showcase img{
      padding-top:0px;
      padding-right: 0px;
    }
    footer{
      margin:0;
      margin-bottom:-15vh;
      padding:0;
    }
    footer h3{
      text-align:center;
      font-size:12px;
    }
    footer h1{
      width:100%;
      margin:0 auto;
      text-align:center;
    }
    
    footer p[type="left"]{
      width:100%;
      margin:0 auto;
      text-align:center;
      font-size: 18px;
    }
    
    footer p[type="right"]{
      width:100%;
      margin:0 auto;
      text-align:center;
      font-size: 18px;
    }
    
    footer img{
      margin-top: 0px;
    }

    /* About */
    #aboutmain p{
      font-size: 20px;
    }

    /* Services */
    #servicesmain{
      margin:0;
      padding:0;
      display:block; 
    }
    
    .leftside{
      width:100%;
      float:center;
    }
    
    .rightside{
      margin-top:20px;
      width:100%;
      float: center;
    }

    #servicesmain h1{
      padding:0;
      margin:0px;
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 20px;
      font-weight: bold;
    }
  
    #servicesmain h2{
      padding:0;
      margin:0px;
      margin-top: 0px;
      font-size: 17px;
      font-weight: bold;
    }
  
    #servicesmain h3{
      padding:0;
      margin:0px;
      margin-left: 0px;
      font-size: 15px;
      font-weight: normal;
    }
  
    #servicesmain p{
      padding:0;
      margin:0px;
      font-size: 12px;
      font-weight: bold;
    }
    /* Service Area */
    /* Main */
    #main{
      min-height:85vh;
      background:none;
      background-color:lightgray;
    }
    article#main-col{
      float:left;
      width:100%;
      padding-left: 10px;
      margin-top: 5px;
    }
  
    article#main-col h1{
      display:none;
    }
    ul#areas h3{
      padding: 0px;
      margin: 0px;
      margin-top: 5px;
      margin-bottom: -5px;
      color: royalblue;
      font-size: 20px;
    }
    ul#areas p{
      padding: 0px;
      margin-left: 10px;
      margin-bottom: 0px;
      display: inline;
      font-size: 15px;
    }
    /* Service Request */
  #servicerequest {
    width: 100%;
    margin:0;
    padding:0;
    min-height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.7), #3551b5), url('../img/kitchen4a.jpg');
    background-position: center;
    background-size: cover;
  }
  #servicerequest .wrapper{
    margin:0;
    margin-left:15px;
    padding:0;
    display:block;
  }

  #servicerequest h2{
    font-size:20px;
    margin-top:-0px;
    margin-bottom:-5px;
    margin-left:0px;
  }

  #servicerequest input{
    font-size:15px;
    padding:2px;
    margin:2px;
  }

  #servicerequest input:after{
    font-size:15px;
    padding:2px;
    margin:2px;
  }

  #servicerequest label{
    margin:0;
    color:white;
    font-size:15px;

  }

  #servicerequest textarea{
    font-size:20px;
    padding-left:5px 5px;
    width:90%;
    margin-top:5px;
  }

  .formbutton {
    font-size:20px;
    margin: 0;
    padding: 10px 20px;
  }
  .formbutton:hover {
    font-size:20px;
    padding: 10px 20px;
  }
}


/*481px to 768px */
@media screen 
  and (min-device-width: 481px)
  and (max-device-width: 768px)
  {
    header{
      min-height:10vh;
      display:block;
      border-bottom:royalblue 4px solid;
    }
    header a{
      font-size:13px;
    }
    header li{
      float:left;
      display:float;
      padding:0 4px 0 4px;
    }
    header #branding{
      width:60%;
      float:left;
    }
    
    header #branding h1{
      margin:0;
    }
    
    header nav{
      width:40%;
      display:block;
      float:right;
      margin-top:0px;
    }
    
    header .highlight, header .current a{
      /* color:#e8491d; */
      color: royalblue;
      font-weight:bold;
    }
    
    header a:hover{
      color:#cccccc;
      font-weight:bold;
    }
    
    /* Showcase */
    #showcase{
      min-height:75vh;
      background:url('../img/kitchen4a.jpg');
      background-size: cover;
      background-position: center;
      text-align:center;
      color:#ffffff;
    }
    
    #showcase h1{
      display:none;
      margin-top:20px;
      font-size:35px;
      text-shadow: 0 0 3px blue, 0 0 5px blue;
      margin-bottom:10px;
    }
    
    #showcase p{
      font-size:25px;
      text-shadow: 0 0 3px blue, 0 0 5px blue;
    }
    
    #showcase img{
      padding-top:0px;
      padding-right: 0px;
    }
    footer{
      margin:0;
      margin-bottom:-15vh;
      padding:0;
    }
    footer h3{
      text-align:center;
      font-size:12px;
    }
    footer h1{
      width:100%;
      margin:0 auto;
      text-align:center;
    }
    
    footer p[type="left"]{
      width:100%;
      margin:0 auto;
      text-align:center;
      font-size: 18px;
    }
    
    footer p[type="right"]{
      width:100%;
      margin:0 auto;
      text-align:center;
      font-size: 18px;
    }
    
    footer img{
      margin-top: 0px;
    }

    /* About */
    #aboutmain p{
      font-size: 20px;
    }

    /* Services */
    #servicesmain{
      margin:0;
      padding:0;
      display:block; 
    }
    
    .leftside{
      width:100%;
      float:center;
    }
    
    .rightside{
      margin-top:20px;
      width:100%;
      float: center;
    }

    #servicesmain h1{
      padding:0;
      margin:0px;
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 20px;
      font-weight: bold;
    }
  
    #servicesmain h2{
      padding:0;
      margin:0px;
      margin-top: 0px;
      font-size: 17px;
      font-weight: bold;
    }
  
    #servicesmain h3{
      padding:0;
      margin:0px;
      margin-left: 0px;
      font-size: 15px;
      font-weight: normal;
    }
  
    #servicesmain p{
      padding:0;
      margin:0px;
      font-size: 12px;
      font-weight: bold;
    }
    /* Service Area */
    /* Main */
    #main{
      min-height:85vh;
      background:none;
      background-color:lightgray;
    }
    article#main-col{
      float:left;
      width:100%;
      padding-left: 10px;
      margin-top: 5px;
    }
  
    article#main-col h1{
      display:none;
    }
    ul#areas h3{
      padding: 0px;
      margin: 0px;
      margin-top: 5px;
      margin-bottom: -5px;
      color: royalblue;
      font-size: 20px;
    }
    ul#areas p{
      padding: 0px;
      margin-left: 10px;
      margin-bottom: 0px;
      display: inline;
      font-size: 15px;
    }
    /* Service Request */
  #servicerequest {
    width: 100%;
    margin:0;
    padding:0;
    min-height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.7), #3551b5), url('../img/kitchen4a.jpg');
    background-position: center;
    background-size: cover;
  }
  #servicerequest .wrapper{
    margin:0;
    margin-left:15px;
    padding:0;
    display:block;
  }

  #servicerequest h2{
    font-size:20px;
    margin-top:-0px;
    margin-bottom:-5px;
    margin-left:0px;
  }

  #servicerequest input{
    font-size:15px;
    padding:2px;
    margin:2px;
  }

  #servicerequest input:after{
    font-size:15px;
    padding:2px;
    margin:2px;
  }

  #servicerequest label{
    margin:0;
    color:white;
    font-size:15px;

  }

  #servicerequest textarea{
    font-size:20px;
    padding-left:5px 5px;
    width:90%;
    margin-top:5px;
  }

  .formbutton {
    font-size:20px;
    margin: 0;
    padding: 10px 20px;
  }
  .formbutton:hover {
    font-size:20px;
    padding: 10px 20px;
  }
}

/*769px to 1024px */
@media screen 
  and (min-device-width: 769px)
  and (max-device-width: 1024px)
{
  #servicesmain h1{
    padding:0;
    margin:0px;
    margin-top: 10px;
    margin-bottom: -5px;
    color: #35424a;
    font-size: 30px;
    font-weight: bold;
  }
  
  #servicesmain h2{
    padding:0;
    margin:0px;
    margin-top: 5px;
    color: #35424a;
    font-size: 20px;
    font-weight: bold;
  }
  
  #servicesmain h3{
    padding:0;
    margin:0px;
    margin-left: 45px;
    color: #35424a;
    font-size: 15px;
    font-weight: bold;
  }
  
  #servicesmain p{
    padding:0;
    margin:0px;
    color: #35424a;
    font-size: 11px;
    font-weight: bold;
  }
}

/*1025px to 1200px */
@media screen
  and (min-device-width: 1025px)
  and (max-device-width: 1200px)
{
  #servicesmain h1{
    padding:0;
    margin:0px;
    margin-top: 10px;
    margin-bottom: -5px;
    color: #35424a;
    font-size: 35px;
    font-weight: bold;
  }
  
  #servicesmain h2{
    padding:0;
    margin:0px;
    margin-top: 5px;
    color: #35424a;
    font-size: 25px;
    font-weight: bold;
  }
  
  #servicesmain h3{
    padding:0;
    margin:0px;
    margin-left: 45px;
    color: #35424a;
    font-size: 19px;
    font-weight: bold;
  }
  
  #servicesmain p{
    padding:0;
    margin:0px;
    color: #35424a;
    font-size: 14px;
    font-weight: bold;
  }
}