/* seee https://www.mydevice.io/#compare-devices */


/********************************************************************************
  Default: Smartphones, portrait up to 812px;
********************************************************************************/
body {
  margin-right: 30px;
  margin-left: 30px;
  max-width: 9999px;
  background-image: url('../images/background.png');
  font-family: "Times New Roman", Times, serif;

}

.xmas2020 {
  color: #0044ff;
}

.top-image {
  display:none;
}


#top-centered {
  max-width: 718px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


#title::before {
  content: '';
  display: inline-block;
  width:80px;
  height:80px;
  background-image: url('../images/colour_tools.png');
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: right bottom;

}

#title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4em;
  color: #080;
  font-weight: 700;
  height:85px;
}

h2 {
  font-size: 2.8em;
  margin-top: 10px;
  margin-bottom: 10px;
  clear:both;
}
#top-image {
  width:80px;
  height:80px;
  display:none;
}




#main-container {
    margin-left:30px;
    margin-right:30px;
}

#flex strong {
  font-size: 2.3em;
  float:left;
  display: inline-block;
  padding-bottom: 80px;
}
#flex ul {
  font-size: 2.3em;
  display: inline-block;
  margin-top: 0px;
}

#contact {
  text-align: center;
}


.dark-green {
    color: #008800;
}


.map-area{
   list-style: none;
}
#servicingareas .map-area:before{
   content: '';
   display: inline-block;
   height: 1em;
   width: 1em;
   background-image: url('../images/map.gif');
   background-repeat: no-repeat;
   background-size: 1em;
}

#rates .map-area:before{
   content: '';
   display: inline-block;
   height: 32px;
   width: 32px;
   background-image: url('../images/map.gif');
   background-repeat: no-repeat;
   background-size: 32px;
}


.call-icon, .email-icon {
    width: 4em;
}




.phone-link {
    position: relative;
    top: -15px;
    font-size: 3em;
}


#contact p {

  margin: 0px 0px 0px 0px;
}

table tbody tr td {
    border-left: 1px solid #008800;
    border-top: 1px solid #008800;
}

#rates {
    position: relative;
    width: 100%;
}

#table-top {
    position: relative;
    width: 100%;
    height:179px;
    background-image: url('../images/table_top2.png');
    background-repeat: no-repeat
}

.top-space {
    margin-top: 30px;
}

.no-bullet  {
    list-style: none;
}

.hidden {
  display:none;
}

#callDetails {
    position: relative;
    width: 100%;
    margin-left: 150px;
}

.clears {
   clear: both;
}

.bold {
  font-weight: 700px;
}

.subheader b{
    font-size: 2em;
}
.review {
  list-style: none;
  padding-top: 15px;
}

.review ul li {
  list-style: none;
  border: 1px solid #000;
}

.homeLink{
  float: right;
  font-size: 2.8em;
  display: inline-block;
  padding-top:20px;
}

.homeLink+* {
  clear:both;
}

.reviewTitle{
  float: left;
  font-size: 2.8em;
  display: inline-block;
  font-weight: 700;
  padding-top:20px;
}


 .reviewList {
   font-size:2em;
 }

.reviewList, .review ul {
  padding-left: 0px;
}

.reviewDate {
  background: #fff;
}

.reviewItemOdd {
  background: #fff;
}
.reviewItemEven {
  background: #ddd;
}

main ul .map-area {
  padding-left: 0px;
}


  #landfill {
    font-size: .8em;
  }

  #table-top {
     background-size: 80%;
     height:250px;
     margin-right: auto;
    margin-left: auto;
    max-width: 768px;
  }

/********************************************************************************
  smartphone(landscape)/tablet porttrait
********************************************************************************/
@media
only screen and (orientation:landscape) and (min-device-width: 320px)  and (max-device-width: 812px),
only screen and (orientation:portrait)   and (min-device-width: 600px)

 {

/*
   /*flex {
     display:inline-block;
   }

   #flex strong {
     font-size: 2.3em;
     float:none;
     display: inline-block;
     padding-bottom: 5px;
   }
   #flex ul {
     font-size: 2.3em;
     display: block;
     margin-top: 0px;
     padding-left: 20px;
   }
*/
#top-centered {
  height:70px;
}
#title {
  font-size: 3.5em;
  height: 80px;
}

header h2 {
  font-size: 2.8em;
}

   #maybe-left {
     float: left;
     display: inline-block;
     font-size: 2em;
   }
   #contact {
     text-align: left;
     display: inline-block;
     font-size: .8em;
     margin-left: 20px;
     float: right;
   }

   #rates {
     font-size: 2em;
   }

   .subheader {
     font-size: 1.2 em;
     margin: 0px 0px 0px 0px;
     clear: both;
   }

   #landfill {
     font-size: 1.5em;
   }


   .subheader img {
       width: 2.5em;
   }

}

/********************************************************************************
  tablets/landscape and desktops (PCs)
********************************************************************************/

@media
  only screen and (orientation:landscape)  and (min-device-width : 960px)
 {
   body {

       max-width: 600px;
       margin-right: auto;
       margin-left: auto;
       font-size: .7em;
   }

   #top-image {
     max-width: 150px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
   }

   #top-image img {
     width: 150px;

   }

   #title::before {
     content: '';
     display: none;
   }

   #top-image {
     width:150px;
     height:150px;
     display:block;
   }
     #flex {
       display:block;
     }

     #flex strong {
       font-size: 2.3em;
       float:none;
       display: inline-block;
       padding-bottom: 5px;
     }
     #flex ul {
       font-size: 2.3em;
       display: block;
       margin-top: 0px;
       padding-left: 20px;
     }


     #maybe-left {
       float: none;
       display: block;
       font-size: 2em;
     }
     #contact {
       text-align: center;
       display: block;
       font-size: .8em;
       margin-left: 20px;
     }

     #rates {
       font-size: 2em;
     }

     .subheader {
       font-size: 1.2 em;
       margin: 0px 0px 0px 0px;
     }

     #landfill {
       font-size: 1.5em;
     }


     .subheader img {
         width: 2.5em;
     }

     #rates .map-area:before{
        content: '';
        display: inline-block;
        height: 16px;
        width: 16px;
        background-image: url('../images/map.gif');
        background-repeat: no-repeat;
        background-size: 16px;
     }


  }