/* CSS Document */
@font-face {
  font-family: 'Roboto-Regular';
  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular.ttf) format('truetype');
}

body {margin: 0;
  font-family: Roboto-Regular, sans-serif;
  background-color:  lightslategrey;
}

div.banner {
  background-image: url(../images/logo1.jpg);
  background-repeat: no-repeat;  
  background-color: #04355c;
  padding-top: 5px;
}

div.banner h1{
/*  background-color: darkslategrey; */
  padding-left: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: white;
}

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 10px 0 0 0;
  width: 15%;
  float: left;
/*  border: 1px solid black; */
  background-color: #8798a9;
}

ul.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px; 
  text-decoration: none;
  text-align: center;
}
 
ul.sidenav li a.active {
  background-color: #04355c;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #84b5cc;
  color: white;
}

div.content {
  height: 323px;
  width: 539px;
  background-image: url(../images/bgcard.jpg);
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-top: 10px;
}

#contact {
  position: relative;
  left: 170px;
  top: 35px;
  font-weight: 500;
}
td.rtd {
  text-align: right;
  width:150px;
  }

div.formContent {
  height: 500px;
  width: 539px;
  background-image: url(../images/bgcard2.jpg);
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-top: 10px;
}  
  
.contactForm {
  position: relative;
  left: 170px;
  top: 35px;
  font-weight: 500;
}

.contactFormRgt {
  text-align: right;
  vertical-align: top;
/*  width: 50px; */
}

div.domainContent {
  height: 500px;
  width: 539px;
  background-image: url(../images/bgcard3.jpg);
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-top: 10px;
}  

.domainForm {
  position: relative;
  left: 152px;
  top: 0px;
  font-weight: 500;
}

@media screen and (max-width: 660px) {
  div.content, div.domainContent, div.formContent {
    margin-left: 0;
    margin-top: 0;
  }
  ul.sidenav {
    width: 100%;
    height: auto; /* not needed */
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
}

#specialoffer:hover {
  letter-spacing: 2px;
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
  div.content {
    background-image: none;
    width: 400px;
  }
  #contact {
    border:1px solid black; 
    left: 5px;
    top: 0px;
  }
  div.formContent {
    background-image: none;
    width: 400px;
  }
  .contactForm {
    border:1px solid black; 
    left: 5px;
    top: 0px;
  }
  div.banner h1{
/*    font-size: 12pt; */
    text-align: center;
    padding-left: 0px;
  } 
  div.domainContent {
    background-image: none;
    width: 400px;
  }
  .domainForm {
    border:1px solid black; 
    left: 5px;
    top: 0px;
  }  
}