#container {
   width: 85%;
   min-height: 800px;
   margin: auto;
   box-shadow: 0px 0px 5px silver;
   background: #f0f0f0;
 }
 
 #slideshow {
   width: 100%;
   padding-top: 7px;
   min-height: 650px;
   text-align: center;
 }
 
 .slide img {
   width: 98%;
   height: 620px;
   box-shadow: 0px 0px 5px #484848;
 }
 
 .slide {
   height: 620px;
 }
 
 #logo {
   box-shadow: 0px 0px 0px;
   width: 200px;
   height: 180px;
   position: relative;
   top: -600px;
   left: -410px;
   z-index: 2
 }
 
 #slide-nav {
   width: 98%;
   margin: 0px auto;
   margin-bottom: 5px;
   text-align: center;
   padding-top: 10px;
   min-height: 20px;
   background: whitesmoke;
 }
 
 #slide-nav span {
   cursor: pointer;
   padding: 0 5px;
   color: silver;
 }
 
 .dot {
   width: 15px;
   height: 15px;
   background: #bbb;
   border-radius: 50%;
   display: inline-block;
   margin: 3px;
 }
 
 #moto {
   width: 100%;
   color: #484848;
   background: #ccc;
   margin: 20px 0px;
   padding: 30px 0px;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   text-align: center;
   font-weight: 900;
   text-shadow: 2px 2px 2px whitesmoke;
 }
 
 #thumbnail-offer {
   width: 100%;
   min-height: 600px;
   background: #484848
 }
 
 #offer-content {
   width: 98%;
   height: 920px;
   margin: auto;
 }
 
 #offer-left,
 #offer-right {
   float: left;
   height: 500px;
   color: whitesmoke;
   padding: 2% 1%;
 }
 
 #offer-left {
   width: 50%;
   text-align: center;
 }
 
 #offer-left img {
   width: 98%;
   height: 250px;
   margin: auto;
   border: 1px solid whitesmoke;
 }
 
 #offer-left p {
   width: 99%;
   margin: 2% auto;
   font-size: 16px;
 }
 
 #offer-right {
   width: 50%;
   margin-top: 48px;
 }
 
 .offer-small {
   min-height: 380px;
   width: 100%;
   margin-bottom: 40px;
 }
 
 .offer-small img {
   width: 45%;
   margin-right: 5%;
   height: auto;
   max-height: 250px;
   border: 1px solid whitesmoke;
 }
 
 .offer-small p {
   width: 50%;
   margin-bottom: 5px;
   font-size: 16px;
 }
 
 .offer-small ul {
   width: 40%;
   margin-left: 20px;
   font-size: 16px;
   text-align: justify
 }
 
 .offer-small li {
   margin-bottom: 2px;
   font-size: 16px
 }
 
 .offer-small p,
 .offer-small ul,
 .offer-small img {
   float: left;
 }
 
 #offer-left h3,
 #offer-right h3 {
   text-align: left;
   padding: 2%;
 }
 
 #offer-left p,
 #offer-right p {
   text-align: justify;
 }
 
 #services {
   width: 100%;
   margin-bottom: 50px;
   color: #484848;
   text-align: center;
 }
 
 #services h1 {
   width: 100%;
   background: silver;
   padding: 10px;
   margin-bottom: 45px;
   color: white;
   text-shadow: 2px 2px 2px #484848;
 }
 
 .service {
   text-align: center;
   display: inline-block;
   width: 22%;
   margin: 15px 5px;
 }
 
 .service:hover {
   opacity: 0.8
 }
 
 .service img {
   width: 80%;
   margin: 5px;
   border: 5px solid silver;
   border-radius: 50%;
 }
 
 .service p {
   column-count: 1;
 }
 
 #contact {
   width: 100%;
   padding-top: 5%;
   box-shadow: 0px 0px 5px silver;
   background: white;
 }
 
 .media {
   display: inline-block;
   width: 32%;
   color: #484848;
   text-align: center;
   border-left: 1px solid silver;
 }
 
 .media:nth-child(1) {
   border-left: 0px;
 }
 
 .media h3 {
   color: #456be8;
   margin: 5%;
 }
 
 .media img,
 .media p {
   display: inline-block;
 }
 
 #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;
 }
 
 #contact a {
   color: white;
 }
 
 footer {
   width: 85%;
   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%;
   }
   .offer-small img {
     height: auto;
   }
   #logo {
     left: -350px;
   }
 }
 
 @media only screen and (min-width: 1500px) {
   #logo {
     left: -370px;
   }
 }
 
 @media only screen and (min-width: 1600px) {
   #logo {
     left: -390px;
   }
 }
 
 @media only screen and (min-width: 1700px) {
   #logo {
     left: -450px;
   }
   .offer-small img {
     max-height: 280px
   }
   #offer-right {
     margin-top: 51px
   }
 }
 
 @media only screen and (min-width: 1900px) {
   #logo {
     left: -480px;
   }
 }
 
 @media only screen and (max-width: 1280px) {
   #logo {
     left: -380px;
   }
 }
 
 @media only screen and (max-width: 1200px) {
   #logo {
     left: -365px;
   }
   .service p {
     font-size: 12px;
   }
 }
 
 @media only screen and (max-width:1170px) {
   #logo {
     left: -330px;
   }
   #thumbnail-offer p {
     font-size: 15px;
   }
 }
 
 @media only screen and (max-width:1144px) {
   #offer-left h3 {
     font-size: 17.5px
   }
 }
 
 @media only screen and (max-width:1080px) {
   header,
   #container,
   footer {
     width: 90%;
     margin: auto;
     border: 0;
     box-shadow: 0;
   }
 }
 
 @media only screen and (max-width:1038px) {
   #offer-content {
     min-height: 980px;
   }
 }
 
 @media only screen and (max-width:1000px) {
   #logo {
     left: -310px;
   }
   #offer-left h3 {
     font-size: 16.5px
   }
   #offer-content {
     min-height: 1000px;
   }
 }
 
 @media only screen and (max-width:960px) {
   #offer-content {
     min-height: 1200px;
   }
   #offer-left,
   #offer-right {
     width: 100%;
     float: none;
     padding: 0;
   }
   #offer-left {
     width: 98%;
     height: 530px;
     margin: 0px auto;
     margin-bottom: 50px;
     padding: 0;
   }
   #offer-right {
     width: 98%;
     margin: 0 auto;
   }
   .offer-small {
     margin: 20px 0px;
     min-height: 280px;
     max-height: 280px
   }
   .offer-small img {
     width: 30%;
     max-height: 225px;
     margin-left: 10px
   }
   .offer-small ul {
     width: 45%
   }
   .offer-small p,
   {
     width: 60%
   }
   #contact {
     width: 100%;
     padding-top: 0;
   }
   #contact ul {
     margin: 0;
     padding: 0;
   }
   .media {
     width: 100%;
     min-height: 150px;
     text-align: center;
     margin: 0;
     padding: 0;
     border: 0
   }
   .media:nth-child(odd) {
     background: white;
   }
   .media:nth-child(even) {
     background: whitesmoke;
   }
   .media {
     padding-bottom: 25px;
   }
   .media p {
     display: block;
   }
   .media h3 {
     margin: 20px;
   }
   .media:nth-child(3) img {
     padding-bottom: 20px;
   }
   #contact ul {
     padding: 25px;
     padding-bottom: 5px;
   }
 }
 
 @media only screen and (max-width:940px) {
   #logo {
     left: -290px;
   }
 }
 
 @media only screen and (max-width:910px) {
   .slide {
     height: 560px;
   }
   .slide img {
     height: 550px;
   }
   #logo {
     width: 160px;
     height: 150px;
     top: -540px;
     left: -290px;
   }
 }
 
 @media only screen and (max-width:850px) {
   #logo {
     left: -250px;
     top: -530px;
   }
 }
 
 @media only screen and (max-width:840px) {
   #slideshow {
     min-height: 510px;
   }
   .slide {
     height: 510px;
   }
   .slide img {
     height: 500px;
   }
   #logo {
     top: -490px;
   }
 }
 
 @media only screen and (max-width:798px) {
   .service p {
     font-size: 11px;
   }
   .service img {
     width: 70%
   }
 }
 
 @media only screen and (max-width:768px) {
   header,
   #container,
   footer {
     width: 95%;
     margin: auto;
   }
   header {
     min-height: 50px;
   }
   #headline img {
     max-width: 100%;
     margin: 10px 0px
   }
   header ul {
     display: none;
   }
   #menu {
     display: block;
     padding-top: 10px;
     text-align: center;
     width: 100%;
     min-height: 50px;
     color: white;
     background: #484848;
     box-shadow: 0px 0px 5px silver;
     cursor: pointer;
   }
   #menu li {
     float: none;
     width: 100%;
     border: 0;
   }
   #menu li:hover {
     background: #00d228;
   }
   #slideshow {
     min-height: 470px;
   }
   #logo {
     width: 140px;
     height: 130px;
     top: -430px;
   }
   .slide {
     height: 440px;
   }
   .slide img {
     height: 440px;
   }
   #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:732px) {
   .service p {
     font-size: 10px;
   }
   #slideshow {
     min-height: 450px;
   }
   #logo {
     top: -415px;
     left: -250px;
   }
   .slide {
     height: 420px;
   }
   .slide img {
     height: 420px;
   }
 }
 
 @media only screen and (max-width:700px) {
   #offer-content {
     min-height: 1280px
   }
   #offer-left {
     min-height: 580px
   }
   .offer-small {
     min-height: 300px
   }
   .offer-small img {
     max-height: 200px
   }
   #logo {
     left: -220px;
   }
 }
 
 @media only screen and (max-width:666px) {
   .service {
     width: 25%;
   }
 }
 
 @media only screen and (max-width:655px) {
   #slideshow {
     min-height: 430px;
   }
   .slide {
     height: 410px;
   }
   .slide img {
     height: 410px;
   }
 }
 
 @media only screen and (max-width:637px) {
   #logo {
     top: -400px;
     left: -200px;
   }
   #offer-left p,
   #offer-right p,
   #offer-right li {
     font-size: 14px;
   }
   #offer-right {
     text-align: center
   }
 }
 
 @media only screen and (max-width:590px) {
   .service {
     width: 40%;
   }
   #slideshow {
     min-height: 100px;
   }
   #logo {
     width: 100px;
     height: 90px;
     top: -355px;
     left: -180px;
   }
   .slide {
     height: 360px;
   }
   .slide img {
     height: 360px;
   }
   .offer-small:nth-child(2) {
     min-height: 540px
   }
   #offer-content {
     min-height: 1300px
   }
   #moto h1 {
     font-size: 25px
   }
 }
 
 @media only screen and (max-width:516px) {
   header,
   #container,
   footer {
     width: 100%;
   }
   #slideshow {
     min-height: 400px;
   }
   #logo {
     top: -325px;
     left: -170px;
   }
   .slide {
     height: 330px;
   }
   .slide img {
     height: 330px;
   }
   .offer-small img {
     height: 150px;
   }
   .offer-small p {
     padding: 0;
   }
   .offer-small {
     min-height: 330px;
   }
   .offer-small:nth-child(2) {
     min-height: 560px;
   }
   #offer-left p,
   .offer-small p,
   .offer-small li {
     font-size: 14px
   }
   .offer-small:nth-child(2) img {
     height: 150px
   }
 }
 
 @media only screen and (max-width:465px) {
   #slideshow {
     min-height: 380px;
   }
   #logo {
     top: -305px;
     left: -150px;
   }
   .slide {
     height: 310px;
   }
   .slide img {
     height: 310px;
   }
   #offer-content {
     min-height: 1580px
   }
   .offer-small {
     min-height: 400px
   }
   #offer-left {
     min-height: 640px
   }
   #offer-left h3 {
     font-size: 15px
   }
   #offer-left img {
     margin-bottom: 15px
   }
   #offer-right img {
     float: none;
     width: 160px;
     margin-bottom: 15px
   }
   #offer-right p,
   #offer-left p,
   #offer-right ul {
     width: 80%;
     margin: auto;
     font-size: 14px;
     float: none
   }
   #offer-right li {
     font-size: 14px
   }
   #moto h1 {
     font-size: 24px
   }
 }
 
 @media only screen and (max-width:440px) {
   #offer-left {
     height: 500px;
   }
   #moto h1 {
     font-size: 22px
   }
 }
 
 @media only screen and (max-width:410px) {
   #logo {
     left: -140px;
   }
   #offer-left {
     min-height: 680px
   }
 }
 
 @media only screen and (max-width:386px) {
   #moto h1 {
     font-size: 20px
   }
   #slideshow {
     min-height: 220px;
     font-size: 13px;
   }
   .slide {
     height: 220px;
   }
   #logo {
     width: 90px;
     height: 80px;
     top: -215px;
     left: -130px;
   }
   .slide img {
     height: 220px;
   }
   .dot {
     width: 12px;
     height: 12px;
     margin: 0;
     padding: 0;
   }
   #services h1 {
     font-size: 24px;
     margin: 0;
     padding: 0 auto;
   }
   .media {
     font-size: 0.9em;
   }
   .media:nth-child(1) {
     padding-top: 40px;
   }
   .media:nth-child(2) {
     padding-top: 21px;
   }
   .media:nth-child(3) {
     padding-top: 20px;
   }
   .media p:nth-child(3) {
     padding-top: 10px;
   }
   #contact li {
     padding: 0;
     font-size: 10px;
   }
   .service:nth-child(7) p {
     font-size: 9px;
   }
   #quick-nav li {
     font-size: 0.6em;
     padding: 5px;
   }
   footer {
     font-size: 0.6em;
   }
   .offer-small {
     min-height: 450px
   }
   #offer-content {
     min-height: 1700px
   }
   #offer-left h3 {
     font-size: 14.5px
   }
 }
 
 @media only screen and (max-width:370px) {
   #logo {
     width: 70px;
     height: 60px;
     left: -125px;
   }
   #offer-left h3 {
     font-size: 12px;
     padding: 7px
   }
   #offer-left p,
   #offer-right p,
   #offer-right ul {
     font-size: 12px
   }
   .offer-small {
     min-height: 390px
   }
   .offer-small:nth-child(2) {
     min-height: 380px
   }
   #offer-left {
     min-height: 600px
   }
   #offer-content {
     min-height: 1550px
   }
   #moto h1 {
     font-size: 18px
   }
 }
 
 @media only screen and (max-width:349px) {
   #offer-left {
     min-height: 650px
   }
   #offer-content {
     min-height: 1600px
   }
 }
 
 @media only screen and (max-width:329px) {
   #logo {
     left: -100px;
   }
   #services h1 {
     font-size: 25px;
   }
   .service {
     width: 80%;
   }
   footer {
     font-size: 9px;
   }
   #moto h1 {
     font-size: 16px
   }
 }
 
 @media only screen and (max-width:285px) {
   #moto h1 {
     font-size: 14px
   }
   .media:nth-child(3) p {
     font-size: 10px;
   }
 }