@charset "UTF-8";
/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap");
/* Body */
body {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  margin: 0;
}
/* Links */
a {
  color: #1d7e96;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #f7f3e9;
}
/* Header */
header {
  width: 100%;
  height: auto;
  text-align: center;
}
/* Content */
.intro {
	width: 100%;
	margin: auto;
	padding: 50px 35px 15px 35px;
	display: inline-block;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	background-size: 1200px 400px;
	background-position: center top;

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-moz-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 240dpi) {
  .intro {
	background-image: url(../images/bg@3x.jpg);
  }
}
  .column {
    width: 50%;
    text-align: center;
    padding-top: 30px;
    float: left;
  }
  .intro .column h3 {
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    line-height: 25px;
    font-weight: 600;
    margin-left: 20px;
    margin-right: 20px;
    width: 80%;
    font-size: 24px;
  }
  .intro .column p {
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    line-height: 25px;
    font-weight: 400;
    margin-left: 20px;
    margin-right: 20px;
    width: 80%;
    font-size: 16px;
  }
  .intro .column em {
    font-weight: 300;
  }
  .content {
    width: 60%;
    margin: auto;
    padding-bottom: 50px;
  }
  .content h3 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 4px;
    color: #d45d35;
    top: auto;
    padding-top: 20px;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 60px;
    padding-bottom: 20px;
    border-bottom: thin dotted #d45d35;
  }
  .content h4 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 0px;
  }
  .content p {
    margin-top: 0px;
  }
  .content em {
    font-weight: 400;
  }
  .content li {
    list-style-type: square;
    list-style-position: inside;
  }
  footer {
    background-color: #e4d9c9;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  footer p {
    margin: 0px;
    padding: 0px;
  }
  .profile {
    width: 50%;
  }




/*SCREEN ADJUSTMENTS*/


/* Mobile */
@media (max-width: 320px) {
 
  .content {
    width: 80%;
  }
  .intro .column h3 {
    width: 90%;
    text-align: center;
    padding-left: 0px;
  }
  .intro .column p {
    width: 80%;
    text-align: center;
    margin-left: 0px;
  }
  .column {
    width: 100%;
  }
  .profile {
    width: 80%;
  }
}
/* Small Tablets */
@media (min-width: 321px) and (max-width: 767px) {
  .intro {
	width: auto;
    background-position: center top;
  }
  .content {
    width: 80%;
  }
  .column {
    width: 100%;
  }
  .profile {
    width: 80%;
  }
  .intro .column h3 {
    width: 90%;
    text-align: center;
    padding-left: 0px;
  }
  .intro .column p {
    width: 90%;
    text-align: center;
    padding-left: 0px;
  }
}
/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
  .intro .column p {
    width: 80%;
  }
  .profile {
    width: 80%;
  }
}
/*MENUS */
.footernav {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.footernav a {
  display: inline-block;
  color: #1d7e96;
  text-align: center;
  padding: 12px 12px;
  margin-left: auto;
  margin-right: auto;
}
.topnav {
  position: fixed;
  width: 100%;
  height: 40px;
  top: 0;
  left: 0;
  -webkit-box-shadow: 0px 1px 6px 0 #000000;
  box-shadow: 0px 1px 6px 0 #000000;
  background-color: #000000;
  padding-bottom: 10px;
  color: #f7f3e9;
}
.topnav a {
  display: inline-block;
  color: #f7f3e9;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 16px;
}
.topnav a:hover {
  color: #83c3e1;
}
.topnav a:active {
  color: #83c3e1;
}
.topnav .icon {
  display: none;
}
/* NAV RELATED: When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 900px) {
  .topnav {
    position: fixed;
    height: auto;
    padding-bottom: 0px;
  }
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a:first-child {
    margin-left: 42px;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* NAV RELATED: The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 900px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
    margin: 0px;
  }
}
/* NAV RELATED: Back to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 40px;
  z-index: 99;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  outline: none;
  background-color: #000000;
  color: #ffffff;
  cursor: pointer;
  padding: 20px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 1px 3px 0 #000000;
  box-shadow: 0px 1px 4px 0 #000000;
}
#myBtn:hover {
  background-color: #1d7e96;
}
/*Email Button */
.button {
  width: 150px;
  margin: 15px auto 15px auto;
  padding: 20px 10px 20px 10px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffffff;
  background-color: #000000;
  border-radius: 4px;
}
.button a {
  color: #f7f3e9;
  text-decoration: none;
}
.button:hover {
  background-color: #1d7e96;
  color: #ffffff;
  cursor: pointer;
}