/*Groundhouse Media & Leisure Ltd */
/* main.css 1.0.0 | MIT License */
/* developer: John Phillips - Meerkat Software */
/* url: meerkat.software */

@font-face {
  font-family: quick;
  src: url(../font/quick.ttf);
}

:root {
  --primary: #8fae47;
  --secondary: #667242;
  --dark-green: #2f3810;
}

html {
  color: #222;
  font-family: 'Spartan', sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--dark-green);
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


textarea {
  resize: vertical;
}

/* ==================== HEADER ================================ */
#header {
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  min-height: 4rem;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
}

.company-title__wrapper {
  padding-left: 2rem;
}


.header-title,
.header-contact {
  margin: 3px;
  color: var(--dark-green);
  font-weight: 500;
  font-size: 1.4rem;
}

.company-contact__wrapper {
  padding-right: 2rem;
  display: flex;
}

.header-contact-icon {
  margin-top: 0.1rem;
  color: var(--dark-green);
  font-size: 1.4rem;
}

.header-contact {
  font-weight: 600;
  text-decoration: none;
}

.header-contact:hover,
.header-contact:active,
.header-contact:focus
 {
  color: var(--dark-green);
  text-decoration: none;
}
/* ==================== BODY ================================ */

.main-content__wrapper {
  min-height: 70vh;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-grow: 1;
}

.center-logo {
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 180px;
  width: 180px;
  border: .8rem solid var(--primary);
  border-radius: 50%;
  background-color: var(--dark-green);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}

.center-logo-img {
  width: 150px;
}

.left-content {
  width: 100%;
  max-width: 49.5%;
  background-image: url(../img/media.jpeg);
  background-position: 80% 90%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

#green-bar {
  width: 1%;
  background-color: var(--primary);
}

.right-content {
  width:100%;
  max-width: 49.5%;
  background-image: url(../img/leisure-bg.jpeg);
  background-position: 80% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.content-box-black {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  padding: 20px;
  width: 60%;
  max-width: 70%;
  margin-bottom: 20%;
}

#left-cta__wrapper {
  margin-left: 5%;
}

#right-cta__wrapper {
  margin-right: 5%;
}

.content-box-black h3,
.content-box-black h4 {
  color: white;
  margin: 0;
}

.content-box-black h3 {
  font-size: 2.2vw;
  font-family: 'quick';
  font-weight: 300;
  margin-bottom: 1rem;
}

.content-box-black h4 {
  font-size: 1.6vw;
}

.content-box-actions {
  margin-top: 1rem;
  padding: 2rem 1rem;
  font-size: 4rem;
  color: var(--primary);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

.social-links {
  color: var(--primary);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.social-links:hover {
  color: var(--secondary);

}

.cta-button {
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 1rem;
    font-size: 2rem;
    border-radius: .5rem;
    background-color: var(--primary);
    color: white;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.cta-button:hover {
  border: 1px solid var(--dark-green);
  background-color: var(--secondary);
}

/* ==================== FOOTER ================================ */
#footer {
  margin: 0;
  padding: 2rem;
  border-top: 3px solid var(--primary);
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer-links__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items:flex-start;
  flex-grow: 2;
}

.links-col,
.address-col {
  padding: 2rem 3rem;
}

.links-col h3,
.links-col ul {
  color: white;
}

.links-col h3 {
  font-size: 1.6rem;
}

.links-col ul {
  list-style:symbols(dot);
  padding-left: 0;
}

.links-col ul li {
  font-size: 1.4rem;
  font-weight: 500;
  height: 2.4rem;
}

.footer-link {
  display: block;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: .3s;
}

.footer-link:hover {
  color: rgba(255, 255, 255, 1);
}

.address-col__content {
  color: white;
  font-size: 1.5rem;
  line-height: 2.2rem;
}

.email-link {
  color: white;
  text-decoration: none;
  padding: .2rem;
}

.branding__wrapper{
  display: flex;
  justify-content: center;
}

.branding-img {
  width: 100%;
  max-width: 330px;
  height: auto;
  max-height: 122.4px;
}

.footer-copyright__wrapper {
  width: 100%;
  padding: 1rem;
}

.footer-copyright__content{
  margin: 0 auto;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.9rem;
  font-weight: 500;
  color: var(--primary);
  opacity: .3;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden,
[hidden] {
  display: none !important;
}

.center {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}




@media only screen and (max-width: 1117px) {

  .content-box-black {
    margin-bottom: 0%;
    width: 100vw;
    border-radius: 0;
  }

  


}

/* ==========================================================================
   tablet 
   ========================================================================== */
@media only screen and (max-width: 944px) {
  #left-cta__wrapper,
  #right-cta__wrapper{
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .left-content, .right-content {
    max-width: 100%;
    min-height: 500px;
  }

  #green-bar {
    width: 100%;
    height: .4rem;
  }

  .left-content {
    align-items: flex-start;
  }
  .right-content {
    align-items: flex-end;
  }

  .content-box-black h3 {
    font-size: 3rem;
  }

  .content-box-black h4 {
    font-size: 2.2rem;
  }

  

  .branding__wrapper {
    width: 100%;
  }

  .address-col {
    text-align: center;
  }

  .footer-links__wrapper {
    justify-content: center;
    align-items: center;
    flex-grow: 0;
  }
}

/* ==========================================================================
   Mobile 
   ========================================================================== */

@media only screen and (max-width: 438px) {

  html {
    font-size: 40%;
  }

  .company-contact__wrapper{
    padding-left: 5%;
  }

  .content-box-actions {
    padding: 0;
  }

  .cta-button{
    width: 100%;
    margin-bottom: 15px;
  }
  .social-links__wrapper{
    width: 100%;
    text-align: center;
  }

 
 
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}