* {
 margin: 0px;
 padding: 0px;
}
/*Robbo from below this line was within <style> tage of each webpage I moved here to work with mobile*/
body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}

.menu {
  display: none;
}

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 15s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: gold;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
/*Robbo from above this line was within <style> tage of each webpage I moved here to work with mobile*/

body {
 font-size: 100%;
 background: #F8F8FF;
}

.header {
 width: 35%;
 margin: 50px auto 0px;
 color: white;
 background: #5F9EA0;
 text-align: center;
 border: 1px solid #B0C4DE;
 border-bottom: none;
 border-radius: 10px 10px 0px 0px;
 padding: 20px;
}

form, .content {
 width: 35%;
 margin: 0px auto;
 padding: 20px;
 border: 1px solid #B0C4DE;
 background: white;
 border-radius: 0px 0px 10px 10px;
}
.input-group {
 margin: 10px 0px 10px 0px;
}

.input-group label {
 display: block;
 text-align: left;
 margin: 3px;
}
.input-group input {
 height: 30px;
 width: 93%;
 padding: 5px 10px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
.input-group select {
 height: 30px;
 width: 14%;
 padding: 5px 10px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
.input-numb input {
 height: 30px;
 width: 12%;
 padding: 5px 10px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
.input-numb-reg input {
 height: 30px;
 width: 20%;
 padding: 5px 10px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid gray;
}
.btn {
 padding: 10px;
 font-size: 15px;
 color: white;
 background: #5F9EA0;
 border: none;
 border-radius: 5px;
}
.btn2 {
 padding: 4px;
 font-size: 15px;
 color: white;
 background: #5F9EA0;
 border: none;
 border-radius: 5px;
}
.profpic_w {
  width: 50%
}
.profpic_container {
  position: relative;
  text-align: center;
  color: yellow;
}
.profpic_container:hover .profpic_overlay {
  opacity: 1;
}
.profpic_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 2s ease;
  background-color: black;
}
.stretch {
    height:50px;
}
.profpic_eyes {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.profpic_nose {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.profpic_mouth {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.error {
 width: 92%;
 margin: 0px auto;
 padding: 10px;
 border: 1px solid #a94442;
 color: #a94442;
 background: #f2dede;
 border-radius: 5px;
 text-align: left;
}
.success {
 color: #3c763d;
 background: #dff0d8;
 border: 1px solid #3c763d;
 margin-bottom: 20px;
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .content, form{
    width: 93%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .header {
    width: 93%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .input-group input {
    width: 93%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .input-numb input {
    width: 20%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .input-group select {
    width: 28%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile form and search */
@media screen and (max-width: 600px) {
  .input-group textarea {
    width: 60%;
    margin-top: 0;
  }
}
/* Robbo you added these for mobile */
@media screen and (max-width: 600px) {
    .bgimg {
      background-position: center;
      background-size: contain;
      background-repeat:no-repeat;
      min-height: 27%;
  }
}
/* Robbo you added these for mobile */
@media screen and (max-width: 600px) {
    .profpic_w {
      width: 80%;
  }
}
/* Robbo you added these for mobile */
@media screen and (max-width: 600px) {
    .profpic_eyes {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:80%;
}
}
/* Robbo you added these for mobile */
@media screen and (max-width: 600px) {
    .profpic_nose {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:80%;
}
}
/* Robbo you added these for mobile */
@media screen and (max-width: 600px) {
    .profpic_mouth {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:80%;
}
}
/* Robbo added for Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 180px;
}

/* Robbo added for The popup chat - shown by default */
.chat-popup {
  display: block;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Robbo added for The popup chat - hidden by default */
.chat-nopopup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}
/* Robbo added for Add styles to the form container */
.chat-container {
  width: 100%;    
  max-width: 300px;
  max-height: 500px;
  padding: 10px;
  background-color: #A0A9B0;
}

/* Robbo added for Add styles to the form container */
.chatbox-container {
  max-width: 300px;
  max-height: 150px;
  overflow-y:auto;
  display: flex;
  flex-direction: column-reverse;
}

/* Robbo added for Full-width textarea */
.chat-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 100px;
}

/* Robbo added for When the textarea gets focus, do something */
.chat-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Robbo added for Set a style for the submit/send button */
.chat-container .btn {
  background-color: #242830;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Robbo added for Add a red background color to the cancel button */
.chat-container .cancel {
  background-color: #E67E22;
}

/* Robbo added for Add some hover effects to buttons */
.chat-container .btn:hover, .open-button:hover {
  opacity: 1;
}