/*=====================================
* Author: Coffey - Zehlm Web Development, LLC
* This code not authorized by other users.
=====================================*/

  /*======MAIN SECTIONS======*/

  body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: absolute;
}
  .header {
    width: auto;
    height: 100px;
    background: #686A6C;
    background-size: cover;
    color: #FFFFFF;
    margin: 0 0 0 0;
    position: relative;
}
  .main {
    width: auto;
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.0)), url(../img/appalachian-creek-construction.jpg) right center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #FFFFFF;
    min-height: 500px;
    overflow: hidden;
    margin: 0 0 0 0;
}
  .section6 {
    width: auto;
    height: auto;
    background-color: #686A6C;
    display: grid;
    justify-content: center;
    background-size: cover;
    margin: 0 0 0 0;
    padding: 0 10px 0 20px;
    position: relative;
}
  .section7 {
    width: auto;
    position: relative;
    min-height: 300px;
    background: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url(../img/construction-and-remodeling-services.png) right center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #FFFFFF;
    margin: 0 0 0 0;
}
  footer {
    position: relative;
    top: 80px;
}
  .footer {
    width: auto;
    color: #FFFFFF;
    background-color: #2C3539;
    border-top: 5px solid #C0C0C0;
    text-align: center;
    margin: 0 0 0 0;
}
  .footer a {
    color: #3BB9FF;
}
  .footer a:active {
    color: #C0C0C0;
}
  .separator {
    background-color: #686A6C;
    width: auto;
    height: 35px;
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    position: relative;
    box-shadow: 10px 10px 8px #0C090A;
}
  .msbtn {
    width: 200px;
    height: 40px;
    font-size: 24px;
    font-weight: 1000;
    background-color: #C0C0C0;
    color: #000000;
    border: 2px groove #808080;
    border-radius: 10px;
    padding: 14px 10px 0px 10px;
    text-align: center;
}
  .fb-btn {
    font-size: 14px;
    font-weight: bold;
    width: 70px;
    height: 23px;
    padding: 5px 5px 5px 5px;
    position: relative;
    top: -5px;
    background: #0080FF;
    color: #000000;
    border: none;
    outline: none;
    border-radius: 4px;
}
  .center {
    display: flex;
    justify-content: center;
    position: relative;
}
  .ctr3 {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    top: 20px;
}
  .disp {
    display: none;
}
  /*========SERVICE AREAS========*/

  .city-section {
    width: auto;
    font-size: 18px;
    padding: 40px 10px 40px 10px;
    margin: 0 0 0 0;
}
  .img-location-1 {
    width: 400px;
    height: 280px;
    border: none;
    border-radius: 20px;
    position: relative;
    justify-content: center;
    box-shadow: 10px 10px 8px #0C090A;
}

  /*======Dark Mode - Light Mode======*/

  .dark {
    background-color: #000000;
    color: #FFFFFF;
}
  .light {
    background-color: #FFFFFF;
    color: #000000;
}
  .modebtn {
    width: auto;
    height: auto;
    background: #6A0DAD;
    font-weight: bold;
    color: #FFFFFF;
    border: .5px inset #808080;
    border-radius: 10px;
    padding: 8px 8px 8px 10px;
}
  .btn-pos {
    position: absolute;
    top: 15px;
    left: 30px;
}
  .btn-pos2 {
    position: absolute;
    top: 10px;
    left: 80px;
}
  .btn-pos3 {
    position: absolute;
    top: 10px;
    left: 130px;
}
  button {
    outline: none;
}
  .pad {
    padding: 40px 10px 0 20px;
}
 /*------End Section Phone------*/

  /*=======H, P, ETC.======*/

  html {
    scroll-behavior: smooth !important;
}
  h1 {
    font-size: 50px;
    margin: 0 0 0 0;
    text-align: center;
    -webkit-text-stroke: 1px #000000;
}
  h2 {
    font-size: 30px;
    font-weight: bold;
    margin: 20px 0 0 20px;
    text-align: center;
}
  h3 {
    font-size: 23px;
    font-weight: bold;
    text-align: center;
}
  h4 {
    font-size: 19px;
    font-weight: bold;
}
  h5 {
    font-size: 15px;
    font-weight: bold;
}
  h6 {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    margin: 0 0 20px 0;
}
  hr {
    background: #808080;
}
  .color-h {
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font-size: 24px;
}
  .bg-h-tx {
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
}
  a {
    color: #757575;
    text-decoration: none;
}
  .alt-link-color {
    color: #0080FF;
}
  li {
    list-style: none;
    text-decoration: none;
}
  .t2w {
    font-size: 25px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 0 0 0;
}
  .ulfa {
    list-style: none;
}
  .lifa {
    font-size: 30px;
    display: inline-block;
    margin: 0 20px 0 0;
}
  .ua {
  list-style: none;
}
  .la {
    font-size: 18px;
    display: inline-block;
    background-color: transparent;
    width: auto;
    height: auto;
    position: relative;
    padding: 0 0 0 0;
    margin: 0 15px 0 15px;
}
  .la:active {
    font-style: italic;
}

  /* -- ID Color Attributes for fa -- */

  #fa1 {
    color: #FF7500;
}
  #fa2 {
    color: #FF7500;
}
  #fa3 {
    color: #FF7500;
}
  #fa4 {
    color: #FF7500;
}
  #fa5 {
    color: #FF7500;
}
  #fa6 {
    color: #FF7500;
}
  #fa7 {
    color: #FF7500;
}  
  #fa8 {
    color: #FF7500;
}
  #fa9 {
    color: #FF7500;
}
  #fa10 {
    color: #FF7500;
}
  #fa11 {
    color: #FF7500;
}
  #fa12 {
    color: #FF7500;
}
  #fa13 {
    color: #FF7500;
}
  #fa14 {
    color: #FF7500;
}
  #fa15 {
    color: #FF7500;
}
  /* fa16 is facebook blue icon */
  #fa16 {
    color:  #0080FF;
}
  /*end facebook color*/

  #fa17 {
    color: #FF7500;
}
  #fa18 {
    color: #FF7500;
}
  #fa19 {
    color: #FF7500;
}
  #fa20 {
    color: #FF7500;
}
  #fa21 {
    color: #FF7500;
}
  #fa22 {
    color: #FF7500;
}
  #fa23 {
    color: #FF7500;
}
  #fa24 {
    color: #FF7500;
}

  /*======CONTAINERS COLUMNS SECTIONS======*/
  /*======CONTAINERS======*/
  
  .container {
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    padding:  5px 5px 0 5px;
    background: transparent;
}
  .container2 {
    font-size: 16px;
    text-align: center;
    display: grid;
    justify-content: center;
    padding: 0 10px 25px 10px;
    background: transparent;
}
  .conli {
    display: grid;
    justify-content: center;
}
  .conli li {
    font-family: ariel;
    font-size: 18px;
    font-weight: 800;
    list-style: circle;
    padding: 5px 0 5px 0;
    text-align: left;
}
  .conli2 {
    display: grid;
    position: relative;
}
  .conli2 li {
    font-family: ariel;
    font-size: 18px;
    font-weight: 400;
    list-style: circle;
    padding: 5px 0 5px 0;
    text-align: left;
}
  .box3 {
    color: #FFFFFF;
    margin: 75px 0 0 0;
    text-align: center;
}
  .spa2 {
    width: 100%;
    height: 30px;
    border-bottom: 2px solid #C0C0C0;
    background-color: transparent;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
  .msp {
    background-color: #0C090A;
    background-size: cover;
    padding: 0 0 0 10px;
    text-align: center;
    color: #808080;
}

  /*======COLUMN SECTIONS======*/
  /*======3 COLUMN======*/

  .column {
    float: left;
    text-align: left;
    padding: 0 5px 0 5px;
    width: 30.33%;
}

/* Clear floats after the 3 columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
} /* end 3 column */

  /*======BLOND 3 COLUMN 1======*/
  .column3 {
    float: left;
    text-align: left;
    padding: 0 5px 10px 10px;
    margin: 5px 3px 0 0;
    width: 31.33%;
}

/* Clear floats after the 3 columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
} /* end blond 3 column */


  /*=====2 COLUMN======*/
  .column1 {
    float: left;
    width: 50%;
}

/* Clear floats after the 2 columns */
  .row1:after {
    content: "";
    display: table;
    clear: both;
} /* end 2 column */

/* Responsive layout - when the screen is less than 600px wide */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .column3 {
    width: 100%;
  }
}

@media screen and (max-width: 781px) {
  .column4 {
    width: 100% !important;
  }
}

  /*==========4 COLUMN==========*/

  .column4 {
    float: left;
    width: 25%;
}

/* Clear floats after the 4 columns */
  .row4:after {
    content: "";
    display: table;
    clear: both;
} /* end 4 column */

  #bx2 {
   height: 400px;
    box-shadow: 0 8px 5px 2px #000000;
    border-radius: 30px;
    background-color: #FF7500;
    color: #FFFFFF;
    font-size: 18px;
}
  #bx3 {
   height: 400px;
    box-shadow: 0 6px 5px 2px #000000;
    border-radius: 30px;
    background-color: #FF7500;
    color: #FFFFFF;
    font-size: 18px;
}
  #bx4 {
   height: 400px;
    box-shadow: 0 6px 5px 2px #000000;
    border-radius: 30px;
    background-color: #FF7500;
    color: #FFFFFF;
    font-size: 18px;
}

  /*======REG NAVIGATION======*/
  
  .menu {
    float: right;
    vertical-align: middle;
}
  .munv {
    display: inline-flex;
}

  /*========IMAGES========*/
  
  .img1 {
    width: 250px;
    height: 150px;
    position: relative;
    top: 8px;
    left: 12px;
    z-index: 1;
}

  /*=======COMPONENTS========*/
 
  /* Scroll Back to Top Button */
  #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 15px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 3px; /* Add or Remove borders */
    border-color: #C0C0C0; /* border color */
    border-style: inset; /* create border style */
    outline: none; /* Remove outline */
    background-color: #FF7500; /* Set a background color */
    color: #FFFFFF; /* Text color */
    /* font bulkiness */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 2px 5px 2px 5px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 28px; /* Increase font size */
}
  #myBtn:hover {
    background-color: #808080; /* Add a dark-grey background on hover */
    color: #FFFFFF;
}

  /*======CONTACT FORM ATTRIBUTES======*/
  /*========FORM CONTAINER========*/

  .ctfm {
    width: auto;
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0;
    padding: 0 0 0 0;
}
  .srfm {
    position: relative;
    top: -15px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
}

  /*======REMOVES FACTORY BORDERS======*/

  input { 
	outline: none;
	border: none;
}
  textarea {
    outline: none;
    border: none;
}
  textarea:focus, input:focus {
    border-color: transparent !important;
}
  input:focus::-webkit-input-placeholder { 
    color:transparent; 
}
  textarea:focus::-webkit-input-placeholder { 
    color:transparent; 
}
  input::-webkit-input-placeholder { 
    color: #999999;
}
  textarea::-webkit-input-placeholder { 
    color: #999999;
}
  label {
    display: block;
    margin: 0;
}
  .con {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
  .group { 
    position: relative; 
    margin-bottom: 20px; 
}
  /*--Initial State--*/
  input {
    font-size: 18px;
    padding: 10px 10px 10px 10px;
    margin: 0 0 0 0;
    background-color: transparent;
    color: inherit;
    position: relative;
    top: 15px;
    display: block;
    width: 310px;
    height: 32px;
    border: 2px solid #808080;
    border-radius: 5px;
}
  .trans {
    background-color: transparent;
}
  /*--Initial State--*/
  textarea {
    font-size: 18px;
    width: 325px;
    height: 130px;
    display: block;
    background-color: transparent;
    color: inherit;
    position: relative;
    top: 15px;
    padding: 20px 0 0 5px;
    border: 2px solid #808080;
    border-radius: 5px;
}
  input:focus { 
    outline: none;
}
  textbox:focus {
    outline: none;
}
  /*--end remove factory border--*/

  /*==========LABEL==========*/
  label {
    color: #808080; 
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 34px;
    transition: 0.2s ease all; 
}
  /* active state */ /* highlighted */ /* active lable */
  input:focus ~ label, input:valid ~ label {
    top: 9px;
    left: 12px;
    background-color: inherit;
    padding: 0 6px 0 6px;
    font-size: 13px;
    color: #FF7500;
}

  /* active state */ /* highlighted */ /* active border */
  input:focus ~ .highlight {
    animation:inputHighlighter 0.1s ease;
    padding: 10px 10px 10px 10px;
    display: block;
    width: 310px;
    height: 32px;
    border: 1px solid #FF7500;
    border-radius: 5px;
}

  /*==========HIGHLIGHTER==========*/
  .highlight {
    position: absolute;
    height: 20%; 
    width: auto;
    top: 15px;
    left: 0;
    pointer-events: none;
}

/* Vendor specific keyframes go here */
/*======Form Input Animations======*/
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:310px; background:transparent; }
}
@keyframes textareaHighlighter {
  from  { background:#5264AE; }
  to    { width:330px; background:transparent; }
}

  /*======TEXTAREA ATTRIBUTES======*/

/* active state */ /* highlighted */ /* active border */
  textarea:focus ~ .highlight {
    animation:inputHighlighter 0.1s ease;
    display: block;
    position: absolute;
    padding: 0 0 10px 0;
    width: 330px;
    height: 140px;
    border: 1px solid #FF7500;
    border-radius: 5px;
}
  /* active state */ /* highlighted */ /* active lable */
  textarea:focus ~ label, textarea:valid ~ label {
    top: 9px;
    background-color: inherit;
    padding: 0 6px 0 6px;
    font-size: 13px;
    color: #FF7500;
}
  /*=======End Input Animations======*/

  /*========FORM BUTTON========*/
  /*--Form Button Original State--*/

  .frm_btn {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    width: 335px;
    height: auto;
    position: relative;
    margin: 20px 0 20px 0;
    padding: 10px 0 10px 0;
    border: 2px;
    border-style: inset;
    border-color: #504A4B;
    border-radius: 20px;
    background-color: #C0C0C0;
    color: #000000;
}

  /*--Form Button Active State--*/
  .frm_btn:active {
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    width: 335px;
    height: auto;
    position: relative;
    margin: 20px 0 20px 0;
    padding: 10px 0 10px 0;
    border: 2px;
    border-style: inset;
    border-color: #808080;
    border-radius: 20px;
    background-color: #2C3539;
    color: #F5F5F5;
}
  /* end contact form attributes */

  /*================NAVIGATION================*/
  /*========SIDE MENU MOBILE NAV=========*/

  /*======SPINNING MENU ICON======*/
  .box {
    position: fixed;
    border: 2px solid #FF7500;
    border-radius: 10px;
    padding: 2px 5px 2px 5px;
    right: 20px;
    top: 12px;
    float: right;
    z-index: 3;
}
  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background: #A9A9A9;
    margin: 6px 0;
    position: relative;
    transition: 0.3s;
}
  /* Rotate first bar */
  .change .bar1 {
    background-color: #FF0000;
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
  /* Fade out the second bar */
  .change .bar2 {
    opacity: 0;
}
  /* Rotate last bar */
  .change .bar3 {
    background-color: #FF0000;
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
  #pos {
    position: relative;
    top: 30px;
    right: 20px;
    font-size: 40px;
    float: right;
    margin: 0 0 0 0;
    border-radius: 0;
    border: 0;
    background: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    background-color: transparent;
}

/* The sidepanel menu */
  .sidepanel {
    height: 0; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #2C3539; /* Main Black*/
    overflow-x: scroll; /* Disable horizontal scroll */
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.2s; /* 0.5 second transition effect to slide in the sidepanel */
    border-top: 0;
    border-left: 0;
    border-bottom: 7px;
    border-right: 0;
    border-color: #808080;
    border-style: inset;
}

/* The sidepanel links */
  .sidepanel a {
    padding: 2px 8px 2px 25px;
    text-decoration: none;
    font-size: 20px;
    color: #808080;
    display: block;
    transition: 0.2s;
    margin:  0 0 0 0;
}

/* When you mouse over the navigation links, change their color */
  .sidepanel a:hover {
    color: #FFFFFF;
}

/* Position and style the close button (top right corner) */
  .sidepanel .closebtn {
    position: absolute;
    font-size: 60px;
    top: 0px;
    right: 20px;
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    color: #FF0000;
}
  .closebtn {
    background: transparent;
    border: none;
    outline: none;
}

  /*======@ MEDIA RESPONSIVE CONTROL======*/

  /* 1600 min screen resolution'*/

@media screen and (min-width: 1600px) {
  .main {
    height: 800px !important;
  }
}

@media screen and (min-width: 1600px) {
  .section6 {
    position: relative;
    display: grid;
    justify-content: center;
    padding: 0 0 0 34px !important;
  }
}

@media screen and (min-width: 1600px) {
  .img-location-1 {
    width: 550px !important;
    height: 385px !important;
  }
}

@media screen and (min-width: 1600px) {
  p {
    font-size: 26px;
  }
}

  /* 1200 min screen resolution'*/

@media screen and (min-width: 1200px) {
  .main {
    height: 600px !important;
  }
}

@media screen and (min-width: 1200px) {
  .section6 {
    position: relative;
    display: grid;
    justify-content: center;
    padding: 0 0 0 26px;
  }
}

@media screen and (min-width: 1200px) {
  .section7 p {
    font-size: 24px;
  }
}

@media screen and (min-width: 1200px) {
  h1 {
    font-size: 70px;
  }
}

@media screen and (min-width: 1200px) {
  h2 {
    font-size: 40px;
  }
}

@media screen and (min-width: 1200px) {
  p {
    font-size: 24px;
  }
}

@media screen and (min-width: 1200px) {
  .t2w {
    font-size: 30px;
    font-weight: bold;
  }
}

@media screen and (min-width: 1200px) {
  .img-location-1 {
    width: 450px;
    height: 315px;
  }
}

@media screen and (min-width: 1200px) {
  #bx2 {
    font-size: 20px;
  }
}

@media screen and (min-width: 1200px) {
  #bx3 {
    font-size: 20px;
  }
}

@media screen and (min-width: 1200px) {
  #bx4 {
    font-size: 20px;
  }
}

  /*--end 1200 screen resolution--*/

  /*=======@ media 1023  hidden desk nav=======*/

@media screen and (max-width: 1023px) {
  .dnav {
    display: none;
    overflow: hidden;
  }
}

  /* 780 max screen resolution */

@media screen and (max-width: 780px) {
  .main {
    max-height: 500px;
  }
}

@media screen and (max-width: 780px) {
  .section7 p {
    font-size: 22px;
  }
}

@media screen and (max-width: 780px) {
  h1 {
    font-size: 38px;
  }
}


@media screen and (max-width: 780px) {
  h2 {
    font-size: 20px;
  }
}

@media screen and (max-width: 780px) {
  p {
    font-size: 16px;
  }
}

@media screen and (max-width: 780px) {
  .t2w {
    font-size: 20px;
    font-weight: bold;
  }
}

@media screen and (max-width: 780px) {
  .column {
    width: 100%;
  }
}

@media screen and (max-width: 780px) {
  .column3 {
    width: 100%;
  }
}

@media screen and (max-width: 780px) {
  #bx2 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 780px) {
  #bx3 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 780px) {
  #bx4 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 780px) {
  .img-location-1 {
    width: 300px;
    height: 210px;
  }
}

@media screen and (max-width: 780px) {
  .form {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: auto;
  }
}

@media screen and (max-width: 780px) {
  .btn_frm {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    width: 95%;
    height: 50px;
    background-color: #C0C0C0;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 0;
  }
}

@media screen and (max-width: 780px) {
    .btn_frm:active {
    font-size: 20px;
    font-weight: bold;
    color: #808080;
    width: 95%;
    height: 48px;
    background-color: #FFB917;
    border-radius: 9px;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 1px;
  }
}

@media screen and (max-width: 780px) {
  .column3 {
  width: auto;
  }
}

@media screen and (max-width: 780px) {
  .conli li {
    font-size: 14px;
  }
}

@media screen and (max-width: 780px) {
  .conli2 li {
    font-size: 12px;
  }
}

  /* 600 max screen resolution */

@media screen and (max-width: 600px) {
  body {
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 600px) {
  .main {
    min-height: 500px;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 38px;
  }
}

@media screen and (max-width: 600px) {
  h2 {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  p {
    font-size: 20px;
  }
}

@media screen and (max-width: 600px) {
  .t2w {
    font-size: 18px;
    font-weight: bold;
  }
}

@media screen and (max-width: 600px) {
  .img-location-1 {
    width: 400px;
    height: 280px;
  }
}

@media screen and (max-width: 600px) {
  .form {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: auto;
  }
}

@media screen and (max-width: 600px) {
  .btn_frm {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    width: 60%;
    height: 50px;
    background-color: #C0C0C0;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 0;
  }
}

@media screen and (max-width: 600px) {
    .btn_frm:active {
    font-size: 20px;
    font-weight: bold;
    color: #808080;
    width: 60%;
    height: 48px;
    background-color: #FFB917;
    border-radius: 9px;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 1px;
  }
}

@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
    float: none;
  }
}

@media screen and (max-width: 600px) {
  .container2c {
    width:  100%;
  }
}

@media screen and (max-width: 600px) {
  .container4 {
    width: 93%;
    display: grid;
    justify-content: center;
    border: 5px inset #808080;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
  }
}

@media screen and (max-width: 600px) {
  .container4 p {
    font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  #bx2 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #bx3 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #bx4 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #bx7 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #bx8 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #bx9 {
    width: 400px;
    float: none;
    display: grid;
    justify-content: center;
  }
}

/* Under 450 screen resolution */

@media screen and (min-width: 450px) {
  .main {
    min-height: 500px;
  }
}

@media screen and (max-width: 450px) {
  .section7 p {
    font-size: 18px;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 24px;
    position: relative;
  }
}

@media screen and (max-width: 450px) {
  h2 {
    font-size: 18px;
    font-weight: bold;
    position: relative;
  }
}

@media screen and (max-width: 450px) {
  h3 {
    font-size: 18px;
    text-decoration: underline;
    text-align: center !important;
  }
}

@media screen and (max-width: 450px) {
  h4 {
    font-size: 17px;
    text-align: center;
  }
}

@media screen and (max-width: 450px) {
  h6 {
    font-size: 9px;
    text-align: center;
  }
}

@media screen and (max-width: 450px) {
  .t2w {
    font-size: 18px;
    font-weight: bold;
    position: relative;
  }
}

@media screen and (max-width: 450px) {
  .img-location-1 {
    width: 320px;
    height: 224px;
  }
}

@media screen and (max-width: 450px) {
  .aff-img {
    width: 26px;
    height: 20px;
  }
}

@media screen and (max-width: 450px) {
  .lifa {
    font-size: 20px;
    display: inline-block;
    margin: 0 10px 0 0;
  }
}

@media screen and (max-width: 450px) {
  .form {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: auto;
  }
}

@media screen and (max-width: 450px) {
  .btn_frm {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    width: 93%;
    height: 50px;
    background-color: #C0C0C0;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 0;
  }
}

@media screen and (max-width: 450px) {
    .btn_frm:active {
    font-size: 20px;
    font-weight: bold;
    color: #808080;
    width: 93%;
    height: 48px;
    background-color: #FFB917;
    border-radius: 9px;
    border: 3px;
    border-style: inset;
    border-color: #808080;
    margin: 0 0 0 1px;
  }
}

@media screen and (max-width: 450px) {
  .column1 {
    width: 100%;
    float: none;
  }
}

@media screen and (max-width: 450px) {
  .conli li {
    font-size: 14px;
  }
}

@media screen and (max-width: 450px) {
  .column3 {
  width: auto;
  }
}

@media screen and (max-width: 450px) {
  #bx2 {
    width: auto;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 450px) {
  #bx3 {
    width: auto;
    float: none;
    display: grid;
    justify-content: center;
  }
}

@media screen and (max-width: 450px) {
  #bx4 {
    width: auto;
    float: none;
    display: grid;
    justify-content: center;
  }
}