* {
    margin: 0;
    padding: 0;

}




html, body {

    background-color: rgb(70, 70, 70);
    height: 100%;
    
}

#container {
    min-height: 100%;
}
#main {
    overflow: auto;
    padding-bottom: 160px;
}
.fixed {
    width: 100%;
    position: fixed;
    z-index: 10000;

}


nav {
    width: 100%;
    height: 100px;
    background-color: honeydew;
  }
  
  nav img {
      position: absolute;
      margin-top: -0px;
      padding-left: 10px;
      width: 100px;
  }
  
  nav ul {
      background-color: green;
      margin-left: 0px;
  }
  
  
  nav ul li {
  list-style: none;
  display: inline;
  float: left;
  line-height: 170px;
      
  }
  
  nav ul li a {
      display: block;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 18px;
  color: rgb(138, 138, 138);
  padding: 0 10px 0 5px;
  }
  
  nav ul li a:hover {
      color: red;
      text-decoration: underline;
  }

  h1 {
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin: 110px 0 20px 20%;
}
.home h1 {
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin: 20px 0 20px 20%;
}
h2 {
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin-left: 40px;
}
  
  .active {
      color: rgb(26, 26, 26);
  } 
  .wrapper {
      padding-top: 1px;
      padding-bottom: 20px;
      width: 97%;
      margin: auto;
      box-shadow: 5px 5px 30px black;
  }
  p, a {
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      color: rgb(167, 167, 167);
      padding: 5px 0 0 20px;
  }
  a:hover {
      color: rgb(228, 17, 17);
  }
  .sanas {
      position: absolute;
      margin-left: 70%;
  }
  
  .sanas img {
    
      width: 100px;
      margin-top: 10px;
      margin-left: 70%;
  }
  
  .sanas p {
       margin-left: 110%;
       margin-top: -9px;
       font-size: small;
       color: rgb(206, 0, 0);
}
  #slider {
      overflow: hidden;
      width: 100%;
      
      margin-left: 0px;
      margin-top: 85px;
  }
  
  #slider figure {
      position: relative;
      margin: 0px;
      width: 500%;
  
      left: 0;
      animation: 20s slider infinite;
  }
  
  #slider figure img {
      width: 20%;
      
      float: left;
      margin-top: 0px;
      
  }
  
  @keyframes slider {
      0% {
          left: 0;
      }
      20% {
          left: 0%;
      }
      25% {
          left: -100%;
      }
      45% {
          left: -100%;
      }
      50% {
          left: -200%;
      }
      70% {
          left: -200%;
      }
      75% {
          left: -300%;
      }
      95% {
          left: -300%;
      }
  100% {
      left: -400%;
  }
  
  }
  
  .servivces img {
     margin-left: 40px;
      width: 250px;
  }
  
  .contact-info {
  width: 100%;
  
  padding-bottom: 10px;
  }
  
  .contact-info div {
      width: 99%;
  }
  .contact-form {
      width: 100%;
  }
  .contact-form input {
    margin: 5px;
      width: 97%;
      height: 25px;
  }
  textarea {
      margin: 5px;
      width: 97%;
      min-height: 100px;
      max-height: 300px;
  }
  button {
      background-color: rgb(226, 226, 226);
      width: 100px;
      height: 22px;
      margin-left: 70%;
      cursor: pointer;
  }
  
  button:hover {
      color: rgb(202, 202, 202);
  }
  #map {
      width: 97%;
      height: 200px;
   margin-top: 20px;
      margin: auto;
  }
  .cal-list {
      margin-top: 10px;
  }
  
  .cal-list li {
  margin-left: 50px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: rgb(190, 190, 190);
  }
   #footer {
  width: 100%;
       height: 150px;
       position: relative;
       display: flex;
  flex-flow: row wrap;
       background-color: rgb(27, 27, 27);
       margin-top: -150px;
       clear: both;
       padding-top: 20px;
   }
   .footer-info {
       margin-left: 0%;
       width: 99%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
   }
   .footer-info div {
       width: 30%;
   }
   .footer-info div p {
       font-size: xx-small;
   }
  
   .ublynd {
       margin-top: -25px;
       margin-left: 70%;
   }
   .ublynd p {
       color: rgb(59, 59, 59);
       font-size: xx-small;
   }
   /*________________________________________________________________________*/











@media only screen and (min-width: 768px) {


html, body {

    background-color: rgb(70, 70, 70);
    height: 100%;
    
}

#container {
    min-height: 100%;
}
#main {
    overflow: auto;
    padding-bottom: 160px;
}
.fixed {
    width: 100%;
    position: fixed;
    z-index: 10000;

}
nav {
  width: 100%;
  height: 100px;
  background-color: honeydew;
}

nav img {
    position: absolute;
    margin-top: -15px;
    padding-left: 20px;
    width: 170px;
}

nav ul {
    background-color: green;
    margin-left: 200px;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin: 110px 0 20px 20%;
}
.home h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin: 20px 0 20px 20%;
}
h2 {
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(194, 194, 194);
    margin-left: 40px;
}
nav ul li {
list-style: none;
display: inline;
float: left;
line-height: 110px;
    
}

nav ul li a {
    display: block;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 23px;
color: rgb(138, 138, 138);
padding: 0 20px ;
}

nav ul li a:hover {
    color: red;
}

.active {
    color: rgb(26, 26, 26);
} 
.wrapper {
    padding-top: 1px;
    padding-bottom: 20px;
    width: 60%;
    margin: auto;
    box-shadow: 5px 5px 30px black;
}
p, a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(167, 167, 167);
    padding: 5px 0 0 20px;
}
a:hover {
    color: rgb(228, 17, 17);
}
.sanas {
    position: absolute;
    margin-left: 80%;
}

.sanas img {
  
    width: 150px;
    margin-top: 10px;
    margin-left: 70%;
}

#slider {
    overflow: hidden;
    width: 60%;
    
    margin: auto;
    margin-top: 85px;
}

#slider figure {
    position: relative;
    margin: 0px;
    width: 500%;

    left: 0;
    animation: 20s slider infinite;
}

#slider figure img {
    width: 20%;
    
    float: left;
    margin-top: 0px;
    
}

@keyframes slider {
    0% {
        left: 0;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
100% {
    left: -400%;
}

}

.servivces img {
   margin-left: 40px;
    width: 350px;
}

.contact-info {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-bottom: 10px;
}

.contact-info div {
    width: 45%;
}
.contact-form {
    width: 100%;
}
.contact-form input {
    width: 100%;
    height: 25px;
}
textarea {
    width: 100%;
    min-height: 100px;
    max-height: 300px;
}
button {
    width: 100px;
    height: 22px;
    margin-left: 81%;
    cursor: pointer;
}

button:hover {
    color: rgb(202, 202, 202);
}
#map {
    width: 60%;
    height: 200px;
 
    margin: auto;
}


.cal-list li {
margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: rgb(190, 190, 190);
}
 #footer {
width: 100%;
     height: 200px;
     position: relative;
     display: flex;
flex-flow: row wrap;
     background-color: rgb(27, 27, 27);
     margin-top: -150px;
     clear: both;
     padding-top: 20px;
 }
 .footer-info {
     margin-left: 17%;
     width: 73%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
 }
 .footer-info div {
     width: 30%;
 }
 .footer-info div p {
     font-size: 12px;
 }

 .ublynd {
     margin-left: 88%;
 }
 .ublynd p {
     color: rgb(59, 59, 59);
     font-size: 16px;
 }
}