/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/* Icon imports */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

body {
  /*background-color: #cceeff;   #b1fcff #2763fc  #42e3ed    #cceeff, #42e3ed, #2763fc*/
  background-image: linear-gradient(120deg, #cceeff, #42e3ed, #2763fc); 
  color: black;
  font-family: Helvetica Neue, Helvetica, Verdana;
  margin: auto;
  max-width: 70%;
  text-align: center;
}

h1, h2 {
  font-family: 'Poppins', Helvetica Neue, Helvetica, Verdana;
  line-height: 1.2em;
}

h3 {
  font-family: 'Poppins', Helvetica Neue, Helvetica, Verdana;
  line-height: 1em;
}

.header_img {
  display: block;
  margin: auto;
  width: 90%;
  max-width: 450px;
}

.button {
  background-color: #764726;
  background-image: linear-gradient(150deg, #a46e2f, #764726);
  border: none;
  color: white;
  width: 150px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
  border-radius: 12px;
}
.button:hover{
  background-color: #753218;
  background-image: linear-gradient(150deg, #a46e2f, #753218);
  /*opacity: 0.6;*/
}

.send-email-button {
  background-color: #764726;
  background-image: linear-gradient(150deg, #a46e2f, #764726);
  border: none;
  color: white;
  width: 150px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
  border-radius: 12px;
}
.send-email-button:hover {
  background-color: #753218;
  background-image: linear-gradient(150deg, #a46e2f, #753218);
  /*opacity: 0.6;*/
}

.learn-more-button {
  background-color: #764726;
  background-image: linear-gradient(150deg, #a46e2f, #764726);
  border: none;
  color: white;
  width: 150px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
  border-radius: 12px;
}
.learn-more-button:hover {
  background-color: #753218;
  background-image: linear-gradient(150deg, #a46e2f, #753218);
  /*opacity: 0.6;*/
}

.phone-script-button {
  background-color: #764726;
  background-image: linear-gradient(150deg, #a46e2f, #764726);
  border: none;
  color: white;
  width: 150px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: pointer;
  border-radius: 12px;
}
.phone-script-button:hover {
  background-color: #753218;
  background-image: linear-gradient(150deg, #a46e2f, #753218);
  /*opacity: 0.6;*/
}

.disabled {
  background-color: #37323E;
  border: none;
  color: white;
  width: 150px;
  height: 30px;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 4px;
  cursor: not-allowed;
  border-radius: 12px;
}

table {
  width: auto;
  align-items: center;
  margin: auto;
  border-spacing: 10px;
}
td:nth-child(1) {
  background: #004aad;
  color: white;
  font-weight: bold;
  font-size: 20px;
  padding: 6px;
}
td:nth-child(2) {
  background: #f0faff;
  padding: 6px;
  white-space: pre-line;
}
td:nth-child(3) {
  padding: 2px;
}
/* I copied the code here from https://css-tricks.com/responsive-data-tables/ and like magic,
  it worked to make the tables mobile-friendly  -Shii */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  table, thead, tbody, th, td, tr { 
		display: block; 
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	tr { border: 1px solid #004aad; }
	td { 
		/* Behave  like a "row" */
		position: relative;
		padding-left: 50%; 
	}
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}

/* Handles rendering of information in a grid
*/
.wrapper {
  display: grid;
  width: fit-content;
  margin: inherit;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
}


/* Rendering of classes depending on screen size
*/
@media (max-width: 600px) {
  .wrapper { grid-template-columns: repeat(2, 1fr); }
  .body { max-width: 90% }
  .button { width: 130px; }
  .disabled { width: 130px; }
}
@media (min-width: 600px) {
  .wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 750px) {
  .wrapper { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  .wrapper { grid-template-columns: repeat(5, 1fr); }
}

/* Social media share icon settings */
.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin-top: 5px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook, .fa-twitter, .fa-instagram, .fa-tumblr, .fa-envelope {
  background: #004aad;
  color: white;
}

/* Dashed line section separator */
hr {
  width:50%;
  margin-top: 2em;
  margin-bottom: 2em;
  color: #ffffff;
  border-style: dashed;
  border-width: 2px;
}

/* Popup form - hidden by default */
.form-popup {
  display: none;
  border: 3px solid #f1f1f1;
}

/* Form container style */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Form container fields */
.form-container input[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

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

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

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

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  white-space: pre-line;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}