#container {
   width: 85%;
   min-height: 800px;
   margin: 0 auto;
   padding-top: 1%;
   box-shadow: 0px 0px 5px silver;
   background: whitesmoke;
 }
 
 #container h1 {
   color: #bbb;
   background: #f0f0f0;
   width: 98%;
   margin: 0 auto;
   padding: 2%;
   text-align: center;
   text-shadow: 2px 1px 1px white;
 }
 
 .service {
   width: 100%;
 }
 
 .service-img,
 .service-info {
   padding: 3%;
   width: 80%;
   margin: auto;
   color: #484848
 }
 
 .service-img {
   padding: 0 3%
 }
 
 .service-img img {
   width: 100%;
   height: auto;
   max-height: 400px;
   border: 5px solid silver;
 }
 
 .service-info h3 {
   color: #456be8;
 }
 
 .service-info p {
   margin-top: 2%;
   color: #484848;
   text-align: justify;
 }
 
 .service-info ul {
   margin: 7px 0px;
 }
 
 .service-info li {
   margin: 6px 20px;
 }
 
 .media {
   display: inline-block;
   width: 32%;
   color: #484848;
   text-align: center;
   border-left: 1px solid silver;
 }
 
 .media:nth-child(1) {
   border: 0;
 }
 
 .media h3 {
   color: #456be8;
   margin: 5%;
 }
 
 .media img,
 .media p {
   display: inline-block;
 }
 
 #contact {
   padding-top: 5%;
   background: white;
 }
 
 #quick-nav {
   list-style-type: none;
   width: 100%;
   text-align: center;
   margin-top: 7%;
   padding: 7px 0;
   background: #00d228;
   box-shadow: 0px 0px 5x silver;
 }
 
 #quick-nav li {
   display: inline-block;
   width: 23%;
 }
 
 #quick-nav li:hover {
   background: whitesmoke;
   color: #00d228;
 }
 
 #quick-nav a {
   color: white;
 }
 
 footer {
   width: 85%;
   min-height: 10px;
   margin: auto;
   padding: 7px 0;
   background: #456be8;
   text-align: center;
   color: white;
   box-shadow: 0px 0px 5px silver;
 }
 
 @media only screen and (min-width:1400px) {
   #container,
   footer,
   header {
     width: 70%;
   }
   .service-img img {
     max-height: 450px;
   }
 }
 
 @media only screen and (max-width:1080px) {
   header,
   #container,
   footer {
     width: 95%;
     margin: auto;
     border: 0;
     box-shadow: 0;
   }
   #contact ul {
     padding: 20px;
     padding-bottom: 5px;
   }
 }
 
 @media only screen and (max-width:960px) and (min-width:861px) {
   .media p {
     font-size: 12px;
   }
 }
 
 @media only screen and (max-width:830px) {
   #contact {
     width: 100%;
     min-height: 80px;
     box-shadow: none;
   }
   #contact ul {
     width: 100%;
     font-size: 1em;
     margin: 0
   }
   .media {
     width: 100%;
     min-height: 150px;
     text-align: center;
     margin: 0 auto;
     padding: 3%;
     border: 0
   }
   .media:nth-child(odd) {
     background: white;
   }
   .media:nth-child(even) {
     background: whitesmoke;
   }
   .media img,
   .media p {
     margin: 0 auto;
     padding: 0;
     padding-bottom: 10px;
     display: block;
   }
   .media img {
     margin: 0 auto;
   }
   .media h3 {
     margin: 10px;
   }
   .media:nth-child(2) img {
     padding-top: 15px;
   }
   .media:nth-child(3) img {
     margin-bottom: 10px;
   }
   .media p {
     font-size: 14px;
   }
 }
 
 @media only screen and (max-width:768px) {
   header {
     min-height: 50px;
   }
   header,
   #container,
   footer {
     width: 95%;
     margin: auto;
     border: 0;
     box-shadow: 0;
   }
   #container h1 {
     padding: 5% 0;
     text-align: center;
   }
   #headline img {
     max-width: 100%;
     margin: 10px 0px
   }
   header ul {
     display: none;
   }
   .service {
     width: 100%;
     margin: 10px auto;
     padding: 2% 25px;
     background: whitesmoke;
     text-align: center;
   }
   .service-img {
     width: 100%;
     margin: 0px auto;
     padding: 20px;
     float: none;
   }
   .service-img img {
     width: 100%;
     margin: 0px auto;
     padding: 0;
     min-height: 180px;
   }
   .service-info {
     width: 100%;
     float: none;
     margin: 0 auto;
     padding: 20px;
     text-align: justify;
   }
   #office .service-img {
     min-height: 200px;
   }
   .service-info h3 {
     text-align: center;
     padding: 10px 0;
   }
   #contact {
     width: 100%;
     background: whitesmoke;
     font-size: 0.9em;
     min-height: 300px;
     margin: 0 auto;
     padding: 0;
     border: 0;
   }
   footer {
     font-size: 0.7em;
   }
   #quick-nav li {
     font-size: 0.8em;
   }
 }
 
 @media only screen and (max-width:630px) {
   #contact {
     margin-top: 10%;
   }
   #container h1 {
     font-size: 24px;
   }
 }
 
 @media only screen and (max-width:555px) {
   .service-img {
     width: 100%
   }
 }
 
 @media only screen and (max-width:480px) {
   header,
   #container,
   footer {
     width: 100%;
   }
   .service-img {
     height: 200px;
     margin: 10px auto;
     padding: 20px;
   }
   footer {
     padding-top: 5px;
     font-size: 0.8em;
   }
 }
 
 @media only screen and (max-width:415px) {
   #contact {
     margin-top: 15%
   }
   .service-img {
     min-height: 200px
   }
   .service-img img {
     width: 100%;
   }
 }
 
 @media only screen and (max-width:386px) {
   #quick-nav li {
     font-size: 0.6em;
     padding: 5px;
   }
   footer {
     font-size: 0.6em;
   }
   #container h1 {
     font-size: 19px
   }
   .service {
     padding: 0px;
   }
   .service-img {
     max-height: 150px;
   }
   .service-img img {
     width: 100%;
     max-height: 150px;
   }
   .service-info h3 {
     font-size: 16px;
     margin: 10px auto;
     width: 100%
   }
   .media {
     font-size: 0.9em;
   }
   .media:nth-child(1) {
     margin-top: 40px;
   }
   .media:nth-child(2) {
     padding-top: 21px;
   }
   .media:nth-child(3) {
     padding-top: 20px;
   }
   .media p:nth-child(3) {
     padding-top: 10px;
   }
 }
 
 @media only screen and (max-width:285px) {
   .service-info p,
   .service-info ul {
     font-size: 12px;
   }
   .media:nth-child(3) p {
     font-size: 10px;
   }
 }