/*
Copyright Hansi Allen 2021

I created this what would probably have been a while ago, if you need help contact me at hansiallen@gmail.com.

Within this stylesheet, a class beginning with m stands for main, and a class beginning with h stands for header.
*/

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: roboto;
    padding-top : 45px;
    overflow-x: hidden;
}

/* Main CSS */

.header {

}

.custom {
  margin: 10%, 0;
}

.layout {
    display: block;
    margin: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: min(200px, 5%);
    width: 80%;
    max-width: 1000px;
}

.section {
 padding: 50px 10%;
}

.section-full {
 padding: 50px 2%;
}

.max-width-centered {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-a {
  color: #fff;
  text-decoration: none;
}

/* This is for things such as call-to-action buttons, cards, etc... */

.element-subspacing {
  margin-top: 30px;
  margin-bottom: 30px;
}

.m-t-l {
  font-size: 16px;
}

.m-t-li {

}

.m-a {
    text-decoration: none;
    color: #268bca;
}

.m-text-a {
  color: #000;
}

.h-1 {

}

.h-2 {

}

.h-3 {

}

.h-4 {

}

.h-5 {

}

.h-6 {

}

.h-p {
  font-size: 14px;
  color: #666;
}

.m-ul {

}

.m-ol {

}

.m-li {

}

.text-centered {
  text-align: center;
}

.headerbanner-darken {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 35vh;
  display: flex;
  justify-content: center;
  flex-direction: column;

}

headerbanner {
  width: 100%;
  height: 35vh;
  display : block;
  background-size: cover;
  background-position: center center;
}

.call-to-action-button-p {
  text-align: center;
}

.half-width {
  float: left;
  width: 40%;
  margin-left: 5%;
  margin-right: 5%;
}

@media (max-width: 750px) {
  .half-width {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
}

.call-to-action-button-a {
  background-color: white;
  color: #268bca;
  border: 2px solid #268bca;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.call-to-action-button-a:hover {
  background-color: #268bca;
  color: #fff;
  transition-duration: 0.75s;
}

.call-to-action-white {
  background-color: #268bca;
  color: #fff;
  border-color: #fff;
}

.call-to-action-white:hover {
  background: #fff;
  color: #268bca;
}

.updates-li {
  list-style-type: '>';
  padding-inline-start: 6px;
  color: #666;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  padding-top: 5px;
}

.img-responsive {
    width: 500px;
    max-width: 80%;
}

.m-banner-img {
  width: 100%;
}

/* Some table CSS  - Usage already shown on site */

.m-table-overflow {
  overflow-x: auto;
}

.article table, .article tr, .article th, .article td {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.article table {
  border: 1px solid #888;
  border-collapse: collapse;
  font-size: 16px;
  width: 100%;
}

.article tr {

}

.article th, .article td {
  min-width: 200px;
  padding: 10px;
}

.article th {

}

.article td {

}

.article thead {

}

.article tbody {

}

.article tr:nth-child(even) {
  background-color: #f7f7f7;
}

@media (min-width: 600px) {
    .m-article-txt {
        width: 66.6666%;
    }
}

/* End of tables CSS */

/* End of main CSS */

/* Cards CSS - Usage already shown on site */

.mc-l {
    display: grid;
    grid-template-columns: auto auto auto;
}

@media (max-width: 750px) {
  .mc-l {
    grid-template-columns: auto;
  }
}

.mc-c {
    margin: 0.5rem;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 4px 20px 0 rgba(0,0,0,0.1);
    transition: 1s;
    background-color: #268bca;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center center;
    border-radius: 6px;
}

.mc-c:hover {
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.4);
    transition: 1s;
}

.mc-c-darken {
  display: flex;
  justify-content: center;
  flex-direction: column;
  aspect-ratio: 16/9;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
}

.mc-img {
    width: 100%;
}

.mc-cap-div {
    text-align: center;
    padding: 0px 20%;
}

.mc-cap {
    padding: 10px;
    padding-top: 0px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    width: auto;
}

@media (max-width: 1280px) {
  .mc-cap {
    font-size: 18px;
  }
}

@media (max-width: 950px) {
  .mc-cap {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .mc-cap {
    font-size: 20px;
  }
}

.mc-cap:hover {
  border-bottom: 4px solid orange;
  transition-duration: 0.25s;
}

.mc-a {
    text-decoration: none;
}

/* End of Cards CSS */


/*
Google Services Embeds (not search though)

Example of usage:

Google Forms:
<iframe src="LINK TO GOOGLE FORM EMBED" class="google-form">Loading…</iframe>

Google Docs:
<div class="google-doc-div"><iframe src="LINK TO GOOGLE DOC (EMBED LINK)" class="google-doc-frame"></iframe></div>

I have not included examples of the edit button, but you can just put it at the end of the div
*/

.google-doc-div {

}

.google-doc-frame {
  width: 100%;
  height: 80vh;
  background-color: #fff;
  border: 0px;
}

.google-doc-edit-div {
  width: 100%;
}

.google-doc-edit-p {
  margin: 0;
  padding: 2px;
}

.google-doc-edit-a {
  color: #000;
  text-decoration: none;
}

.google-form {
  width: 100%;
  border: 0px;
  height: 90vh;
}

/* End of Google Services Embeds */

/* Testimonials Section CSS - Featured on homepage */

.testimonial-author {
  font-weight: bold;
  margin-bottom: 8px;
}

.testimonial-location {
  font-weight: bold;
  margin-top: 8px;
}

/* End of Testimonials Section CSS*/

/*  Social icons sidebar */

.social-icons-sidebar {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.facebook-social-icon-square, .twitter-social-icon-square, .linkedin-social-icon-square {
  padding: 6px;
}

.facebook-social-icon-square {
  background-color: #1877f2;
}

.twitter-social-icon-square {
  background-color: #1da1f2;
}

.linkedin-social-icon-square {
  background-color: #fff;
}

.social-icon-sidebar-img {
  width: 24px;
}

.social-icon-phone-number {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: #268bca;
  padding: 10px 4px;
  font-weight: bold;
  font-size: 21px;
}

.social-icon-phone-number-a {
  color: #fff;
  text-decoration: none;
}

.whatsapp-div {
  position: fixed;
  background-color: #25D366;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.whatsapp-logo {
  height: 40px;
  width: 40px;
  padding: 10px;
}

.whatsapp-a {

}

/* End of social icons sidebar */

/* Navigation Bar CSS */

.navbar-logo-image {
  float: left;
  background-color: #0f5682;
  height: 95px;
  z-index: 999;
}

.navbar-logo-image-small {
    height: 0px;
    padding: 0px;
    visibility: hidden;
    position: fixed;
}

.navbar-a, .navbar-dropdown-a {
  text-decoration: none;
}

nav {
  font-family: monospace;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 992;
}

nav ul {
  background: #0f5682;
  list-style: none;
  margin: 0;
  padding: 24px 0;
  float: left;
  z-index: 998;
  width: calc(100% - 365px);
}

@media (max-width: 1290px) {
  .navbar-logo-image {
    height: 0px;
    padding: 0px;
    visibility: hidden;
  }

  nav ul {
    width: calc(100% - 47px);
  }

  .navbar-logo-image-small {
    float: left;
    padding: 5px;
    background-color: #0f5682;
    height: 37px;
    width: 37px;
    z-index: 999;
    visibility: visible;
    position: inherit;
  }
}

.navbar-ul li {
  color: #fff;
  background: #0f5682;
  float: left;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

.navbar-ul a {
  padding: 16px 20px;
  display: block;
}

@media (max-width: 1520px) {
  #navbar-additional {
    position: fixed;
    visibility: hidden;
  }
}

.navbar-li a {
  color: #fff;
}

.navbar-li:hover, .navbar-dropdown-li:hover {
  background: #268bca;
  cursor: pointer;
}

.dropdown-ul {
  background: #0f5682;
  visibility: hidden;
  opacity: 0;
  min-width: 125px;
  position: absolute;
  transition: all 0.5s ease;
  left: 0;
  display: none;
}

.navbar-li:hover > ul, .navbar-dropdown-ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.navbar-dropdown-li {
  clear: both;
  width: 100%;
}

.nav-background {
  /*background-color: #0f5682;*/
  width: 100%;
  /*height: 50px;*/
}

#menu-toggle input {
  display: block;
  width: 0px;
  height: 0px;
  position: fixed;
  cursor: pointer;
  opacity: 0;
  z-index: 999;
  -webkit-touch-callout: none
}

@media (max-width: 1290px) {
  .nav-background {
    width: 100%;
    height: 47px;
    position: fixed;
    top: 0px;
    background-color: #0f5682;
  }

  .navbar-ul li {
    float: none;
  }

  #menu-toggle input {
    width: 66px;
    height: 47px;
    top: 0px;
    right: 0px;
    margin: 0px;
  }

  .navbar-ul {
    position: fixed;
    width: 100%;
    left: -100%;
    transition-duration: 0.5s;
    top: 47px;
    height: calc(100vh - 47px);
    overflow-y: scroll;
  }

  .dropdown-ul {
    position: inherit;
  }

  #menu-toggle input:checked~ul {
    transform: translateX(100%);
    transition-duration: 0.5s;
  }

  #menu-toggle span {
    top: 6px;
    right: 6px;
    display: block;
    width: 52px;
    height: 5px;
    position: fixed;
    background: #fff;
    border-radius: 3px;
    z-index: 998;
    transform-origin: 4px 0;
    transition: transform .5s cubic-bezier(.77,.2,.05,1), opacity .55s ease
  }

  #menu-toggle span:nth-child(3) {
      transform-origin: 0 0;
      top: 21px;
  }

  #menu-toggle span:nth-child(4) {
    top: 36px;
  }

  #menu-toggle input:checked~span {
      opacity: 1;
      transform: rotate(45deg) translate(0,-2px);
  }

  #menu-toggle input:checked~span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0) scale(.2,.2)
  }

  #menu-toggle input:checked~span:nth-last-child(2) {
      transform: rotate(-45deg) translate(-2px,-2px)
  }
}

/* End of Navigation Bar CSS */

/* Article Styling */

.article a {
  color: #268bca;
  text-decoration: none;
}

.article h1 {
    color: #15689a;
    font-size: 42px;
    border-bottom: 1px solid #15689a;
}

.article h2 {
    color: #15689a;
    font-size: 22px;
}

.article h3 {
  color: #268bca;
  font-size: 18px;
}

.article h4 {

}

.article h5 {

}

.article h6 {

}

.article p {
  font-size: 14px;
  color: #666;

}

.article ul {
  padding-inline-start: 30px;
}

.article li {
  font-size: 14px;
  color: #666;
}

.article .call-to-action-button-p {
  font-size: 16px;
}

.article .blog-category {
  color: #fff;
  background-color: #268bca;
  width: fit-content;
  padding : 6px;
}

.article .article-author {
  border-bottom: 1px solid #15689a;
  padding-bottom: 10px;
}

/* End of Article Styling */

/* Grid Styles */

.grid-col-2 {
  display: grid;
  grid-template-columns: 47.5% 47.5%;
  grid-gap: 5%;
}

.grid-col-3 {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 5%;
}

.grid-col-5 {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-gap: 0;
}

.ch-1 {
  grid-column-end: span 1;
}

.ch-2 {
  grid-column-end: span 2;
}

@media (max-width: 850px) {
  .grid-col-3 {
    grid-template-columns: 45% 45%;
  }
  .grid-col-5 {
    grid-template-columns: 45% 45%;
  }
}

@media (max-width: 600px) {
  .grid-col-2, .grid-col-3, .grid-col-5 {
    display: inline-block;
    width: 100%;
  }

  .ch-2 {
    grid-column-end: span 1;
  }
}

/* End of grid styles */

      label {
        display: block;
        color: #15689a;
        font-size: 18px;
        margin-top: 15px;
      }
      input {
        width: 100%;
        font-size: 14px;
        padding: .75rem;
        border: 1px solid #dadce0;
        border-radius: 6px;
        font-family: roboto;
        margin-top: 5px;

      }
      textarea {
        width: 100%;
        font-size: 14px;
        padding: .75rem;
        border: 1px solid #dadce0;
        border-radius: 4px;
        font-family: roboto;
        margin-top: 5px;
      }
      button {
        border-radius: 4px;
        font-size: 14px;
        background-color: #0f5682;
        color: #fff;
        box-shadow: none;
        background-image: none;
        border: 0;
        padding: .75rem;
        margin-top: 1rem;
      }
      .formerror {
        border: solid 2px #cc0000;
        color: #cc0000;
      }
      .texterror {
        color: #cc0000 !important;
      }



.honeypot {
    display: none;
}