html {
  font-size: 12px;
  font-family: josefin sans,sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: 3rem;
  padding-bottom: 0rem;
  color:rgb(15, 15, 15);
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  margin: 0rem;
  font-weight:300;
  line-height:auto;
  background-color: rgb(250, 250, 250);
}

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 4rem;
  background-color: #eeeeee;
}

.content {
  margin-top: 2rem;
}

.fixed-nav-bar li, .fixed-nav-bar a { 
  height: 5rem;
  line-height: 3rem;
  font-size: 1.2rem;
}
.menu {
  width: 100%;
  max-width: 80%;
  margin: auto;
  text-align: center;
}
.menu a, .menu a:visited {
  color: #222222;
}
.menu a:hover, .menu a:target {
  color: #485e54a4;
}
.menu-items {
  display: inline-block;
}
.sitename {
  display: inline-block;
  padding-right: 5rem;
}
a.sitename, a:visited.sitename {
  color:#485e54;
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;

}
.menu-items li {
  display: inline-block;
  margin-right: 0rem;
  margin-left: 2rem;
}
.menu-items a {
  text-decoration: none;
}
.show, .hide {
  display: none;
  padding-left: 1.5rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center left;
  color: #dde1e2;
}

@media only screen and (max-width: 900px) {
    .fixed-nav-bar {
    height: 4rem;
  }
  .fixed-nav-bar li, .fixed-nav-bar a { 
    line-height: 5rem;
    font-size: 1.4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .menu { 
    position: relative;
    width: 100%;
  }
  .sitename {
    position: absolute;
    top: 0;
    left: 2rem;
    margin-left: 0px;
  }
  .menu-items {
    display: none; 
    width: 100%;
    margin-top: 4rem;
    background-color:#dde1e2;
  }
  .menu-items li {
    display: block;
    text-align: center;

  }
  .show, .hide {  
    position: absolute;
    top: 0;
    right: 1.4rem;
  }
  .show {
    display: inline-block;
  }
  .hide {
    display: none;
  }
  #menu:target .show {
    display: none;
  }
  #menu:target .hide, #menu:target .menu-items {
    display: inline-block;
  }
}

@media only screen and (max-width: 600px) {
  .fixed-nav-bar li, .fixed-nav-bar a { 
    line-height: 1.6rem;
    font-size: 1.4rem;
    padding: 1rem;
    height: 2rem;
  }

  .sitename, .show, .hide {
    font-size: 1.2rem;
    padding-right: auto; 
  }
}

a {
  color: darkslategray;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:300;
  margin:0;
  color:#34443d; /* 1d2622*/
}
h1,.h1 {
  font-size: 5.5rem;
  font-weight: 700;
  line-height:1em;
}
h2,.h2 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height:2em;
}
h3,.h3{
  font-size:1.65rem;
  line-height:1.9rem;
  font-weight: 500;
  text-align: center;
}
h4,.h4{
  font-size: 1.4rem;
  line-height:1.7rem;
  font-weight:400;
  color:rgb(15, 15, 15);

}
p, li {
  font-size:1rem;
  line-height:1.3rem;
}

form{
  max-width: 100%;
}

input {
  width: 95%;
  padding: 0.5rem 0.5rem;
}

textarea {
  width: 98%;
  height: 15rem;
  padding: 1rem 1rem;
  box-sizing: border-box;
  border: 0.1rem solid #ccc;
  border-radius: 0.3rem;
  background-color: #f8f8f8;
  resize: none;
}

ul
{padding:.5em;margin:.5em;list-style:square;line-height:1em}
.cookie_class{padding:.5em;margin:.5em;list-style:square;line-height:1em;}
a{transition:all .2s ease-in-out 0s}.mt-100{margin-top:10em}.bg-orange{background:#f9a743}.bg-green{background:rgba(126,139,107,.8)}.bg-light-green{background:rgba(126,139,107,.2)}.bg-opacity{position:relative}.bg-opacity:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7)}

.cookies-modal {
  display: hidden;
}

.margin-wrap {
  margin-left: 10rem;
  margin-right: 10rem;
}

.head-wrapper {
  display: grid;
  grid-template-areas: 
    "heading heading headline headline"
    "catch catch catch catch"
    ;
  gap: 0.5rem;

}

.heading {
  grid-area: heading;
  justify-self: center;
}

.headline {
  grid-area: headline;
  align-self: center;
}

.subhead1 {
  margin: 1rem;
}

.subhead2 {
  margin: 1rem;
}

.catch {
  grid-area: catch;
  justify-self: center;
  align-self: center;
 }

 .cv-wrapper_head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    ". ."
    "heading headline"
    ;
  gap: 0.5rem;
  background-color: rgb(250, 250, 250);
}

.cv-wrapper_body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "cv1 cv1"
    "cv2 ."
    "cv3 ."
    ;
  gap: 0.5rem;
  background-color: rgb(250, 250, 250);
}

.cv-wrapper td {
  font-size: 1.2rem;
  line-height: 1.6rem;
  border-top-style: solid;
  border-top-width: 0.05rem;
}

.cv_heading {
  grid-area: heading;
  margin: 2rem;
  align-self: center;

}

.cv_headline {
  grid-area: headline;
  margin: 2rem;
  align-self: center;
}
.cv1 {
  grid-area: cv1;
  margin: 2rem;
  align-self: center;
}

.cv2 {
  grid-area: cv2;
  margin: 2rem;
  align-self: center;
}
.cv3 {
  grid-area: cv3;
  margin: 2rem;
  align-self: center;
}

 .key-wrapper {
  display: grid;
  grid-template-areas: 
    "key1 key2 key3"
    "key4 key2 key3"
    "key4 key2 key3"
    ;
  gap: 0.4rem;
  background-color: rgb(250, 250, 250);
  padding-top: 3rem;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 1.5rem;
}

.key1 {
  grid-area: key1;
  padding-bottom: 1.5rem;
  align-self: center;

}

.key2 {
  grid-area: key2;
  align-self: center;
  justify-self: center;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.key2-pic {
  height: 25rem;
  width: auto;
}

.key3 {
  grid-area: key3;
  align-self: center;
}
.key4 {
  grid-area: key4;
  align-self: center;

}

.social-wrapper {
  display: grid;
  background: url(../img/splash_hill.svg) bottom center no-repeat fixed;
  background-size: cover;
  /*background:rgba(126,139,107,.8);*/
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "sochead sochead"
    "soc1 soc2"
    ;
  gap: 0.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-inline: 2rem;
}



.sochead {
  grid-area: sochead;
  justify-self: center;
  align-self: center;
  text-align: center;
  padding-inline: 2rem, calc(100% - 2rem);
  width: 80%;
}

.soc1 {
  grid-area: soc1;
  justify-self: right;
  align-items: right;
}

.soc2 {
  grid-area: soc2;
  min-height: 10rem;
}

.SoMe {
  position: relative;
  padding-top: 5rem;
}

.SoMe-img {
  display: block;
  margin:auto;
  height: auto;
  width: 80%;
  border-radius: 1rem;

}

.SoMe-overlay {
  position: absolute;
  margin:auto;
  top: 5rem;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 80%;
  border-radius: 1rem;
  opacity: 0;
  transition: .5s ease;
  /*background-color: #005b79;*/
  backdrop-filter: blur(0.25rem) hue-rotate(15deg);
}

.SoMe-overlay:hover {
  opacity: 100%;
}

.SoMe-text {
  color: #7cb59b;
  font-size: 3rem;
  font-weight: 600;
  position: absolute;
  top: 5rem;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.gp-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "gal1a gal1a"
    "gal1b gal1b"
    "gal2 gal3"
    "gal4 gal4"
    ;
  gap: 0.5rem;
  padding-top: 6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  height: 100%;
  grid-auto-flow: column;
}

.gal1a {
  grid-area: gal1a;
  align-self: center;
  justify-self: center;
}

.gal1b  {
  grid-area: gal1b;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    ". pic13 pic13 pic15 pic15 pic8 pic8"
    "pic14 pic13 pic13 pic15 pic15 pic8 pic8"
    "pic14 pic1 pic1 pic2 pic2 pic4 ."
    ". pic1 pic1 pic7 pic11 pic11 ."
    ". pic5 pic16 pic9 pic9 pic3 pic3"
    ". . pic16 pic9 pic9 . ."
    ". pic10 pic10 pic10 pic12 pic12 ."
    ". pic10 pic10 pic10 pic12 pic12 ."
    ;
}

.picpad {
  padding: 1rem;
}

.pic1 {
  grid-area: pic1;
}

.pic2 {
  grid-area: pic2;
}

.pic3 {
  grid-area: pic3;
}

.pic4 {
  grid-area: pic4;
}

.pic5 {
  grid-area: pic5;
}

.pic6 {
  grid-area: pic6;
}

.pic7 {
  grid-area: pic7;
}

.pic8 {
  grid-area: pic8;
}

.pic9 {
  grid-area: pic9;
}

.pic10 {
  grid-area: pic10;
}

.pic11 {
  grid-area: pic11;
}

.pic12 {
  grid-area: pic12;
}

.pic13 {
  grid-area: pic13;
}

.pic14 {
  grid-area: pic14;
}

.pic15 {
  grid-area: pic15;
}
.pic16 {
  grid-area: pic16;
}
.pic17 {
  grid-area: pic17;
}
.pic18 {
  grid-area: pic18;
}

.gal2 {
  grid-area: gal2;
  background:rgba(126,139,107,.4);
  padding: 1rem;
  border-radius: 2rem 0.5rem;
}

.svger {
  display:block;
  margin: auto;
  filter: invert(34%) sepia(6%) saturate(1417%) hue-rotate(100deg) brightness(95%) contrast(86%);

}

.gal3 {
  grid-area: gal3;
  background:rgba(126,139,107,.4);
  padding: 1rem;
  border-radius: 0.5rem 2rem 2rem 2rem;
}

.gal4 {
  grid-area: gal4;
  background:rgba(126,139,107,.4);
  padding: 1rem;
  border-radius: 0.5rem 2rem;
}

.press {
  margin: 0.5rem;
  padding-top: 1rem;
}

.press p {
  line-height: 1.5rem;
  margin-top: 0.4rem;
}

.h3_press {
  text-align: center;
}

table {
  table-layout: fixed ;
  width: 100% ;
  
}

td {
  width: 50% ;
  padding-right: 2rem;
  vertical-align:top;
} 

.contact-wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-areas: 
    "conhead conhead"
    "con1 con3"
    "con2 con3"
    ;
  gap: 0.5rem;
  padding-top: 6rem;
  padding-left: 8rem;
  padding-right: 8rem;
  padding-bottom: 2rem;
  height: 100%;
  grid-auto-flow: column;

}

.conhead {
  grid-area: conhead;
  text-align: center;
}

.con1 {
  grid-area: con1;
  padding-right: 3rem;
}

.con2 {
  grid-area: con2;
  padding-right: 3rem;
}

.con3 {
  grid-area: con3;
  align-self: top;
}

.footer-wrapper {
  display: grid;
 /* background:rgba(126,139,107,.2);*/
  background: rgb(126,139,107);
  background: linear-gradient(0deg, rgba(126,139,107,0.4) 5%, rgba(126,139,107,0.2) 30%, rgba(126,139,107,0) 90%);
  grid-template-areas: 
    "foot1"
    "foot2"
    ;
  gap: 0.5rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.foot1 {
  grid-area: foot1;
  align-self: center;
  justify-self: center;
  text-align: center;
}
.foot2 {
  grid-area: foot2;
  align-self: center;
  justify-self: center;
  text-align: center;
}

/* btn*/
.btn{border-radius:0}.btn-main{color:#fff;border-radius:2em;border:.001em;font-size:1.2em;padding:.3em .8em;display:inline-block;background-color:#7e8b6b;box-shadow:0 .2em .1em rgba(126,139,107,.8)}.btn-main:hover,.btn-main:focus{background-color:#3d4433;color:#fff}.btn-main-sm{padding:12px 31px;text-transform:uppercase;font-size:14px;font-weight:700}.btn-dismiss{color:#fff;margin-right:2em;border-radius:2em;border:.001em;font-size:1.2em;padding:.3em .8em;display:inline-block;background-color:#2f4f4f;box-shadow:0 .2em .1em rgba(47,79,79,.4)}.btn-dismiss:hover,.btn-dismiss:focus{background-color:#1f2924;color:#fff}.navbar-brand{color:#444;font-size:2em;margin:0;line-height:.4em}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 8rem; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  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 */
.modal-content {
  position: relative;
  background-color: rgb(250, 250, 250);
  margin: auto;
  padding: 0rem;
  border: 0.1rem solid #888;
  width: 50%;
  box-shadow: 0 0.6rem 0.9rem 0 rgba(0,0,0,0.2),0 0.6rem 0.9rem 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-25rem; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-25rem; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 3.2rem;
  font-weight: bold;
}

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

.modal-header {
  padding: 1.5rem 1.5rem;
  background-color: rgb(126,139,107,0.4);;
  color: black;
}

.modal-body {  
  padding: 4rem;
  padding-bottom:2rem;
  padding-top:2rem;
  margin: 0rem;
}

.modal-footer {
  padding: 1.5rem 1rem;
  background-color: rgb(126,139,107,0.4);;
  color: white;
}

#Imger {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  width: 100%;
  height: 100%; 
  object-fit:cover;
  max-height: 40rem;
}

#Imger:hover {opacity: 0.7;}

/* The Modal (background) */
.gal1b .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  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.75); /* Black w/ opacity */
}

/* Modal Content (image) */
.gal1b .modal-content {
  margin: auto;
  display: block;
  width: 30%;
  max-width: 500px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 500px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.gal1b .modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.gal1b .closer {
  position: absolute;
  top: 7rem;
  right: 7rem;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: 600;
  transition: 0.3s;
}

.gal1b .closer:hover,
.gal1b .closer:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .gal1b .modal-content {
    width: 60%;
  }
}


@media screen and (min-width: 1900px) {
  html {
    font-size: 18px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media screen and (max-width: 1150px) {
  html{
    font-size: 12px;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 2rem;
    padding-bottom: 0rem;
  }
  h2,.h2 {
    font-size: 2rem;
    font-weight: 700;
  }
  h3,.h3{
    font-size:1.6em;
    line-height:1em;
  }
  
  .front {
    height: 40rem;
    width: auto;
  }

  .margin-wrap {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .subhead1 {
    display: none;
  }
  .key-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
      "key1  key2 key3" 
      ". key4 ."
      ;
    gap: 0.2rem;
    padding-top: 3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
  }

  .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "conhead conhead"
      "con1 con3"
      "con2 con3"
      ;
    gap: 0.5rem;
    padding-top: 4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 2rem;
    height: 100%;
    grid-auto-flow: column;
  }
  
  .cv-wrapper_head {
    display: grid;
    grid-template-areas: 
      "heading"
      "headline"
      ;
    gap: 0.5rem;
    background-color: rgb(250, 250, 250);
  }

  .cv-wrapper_body {
    display: grid;
    grid-template-areas: 
      "cv1 cv1"
      "cv2 cv2"
      "cv3 cv3"
      ;
    gap: 0.5rem;
    background-color: rgb(250, 250, 250);
  }

  .social-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "sochead sochead"
      "soc1 soc2"
      ;
    gap: 0.2rem;
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
  }
}


@media screen and (max-width: 750px){
  html{
    font-size: 12px;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 2.6rem;
    padding-bottom: 0rem;
  }
  .margin-wrap {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .head-wrapper {
    display: grid;
    grid-template-areas: 
      "heading"
      "catch"
      "headline"
      ;
  }

  .catch {
    text-align: center;
  }

  h2,.h2 {
    font-size: 1.8rem;
    line-height: 1.9rem;
    font-weight: 700;
  }
  h3,.h3{
    font-size:1.4rem;
    line-height:1.4rem;
  }

  p{
    font-size: 1.3rem;
    line-height: 1.5rem;
  }

  .front {
    height: 40rem;
    width: auto;
  }
  .subhead1 {
    display: none;
  }
  .key-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
      "key1"
      "key2"
      "key3"
      "key4"
      ;
    gap: 0.2rem;
    padding-top: 3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 1rem;
  }

  .modal-content {
    width: 80%;
  }

  .gal1b  {
    grid-area: gal1b;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "pic15 pic13 pic13 pic8"
      "pic15 pic13 pic13 pic8"
      "pic1  pic1  pic2  pic2"
      "pic1  pic1  pic7  pic11"
      "pic14 pic5  pic9  pic4"
      "pic14 pic16 pic9  pic3"
      "pic10 pic10 pic12 pic12"
      ;
  }
  .picpad {
    padding: 0.3rem;
  }

  .gal2 .gal3 .gal4{
    padding: 0.2rem;
  }
  .press p{
    font-size: 1.1rem;
    line-height: 1.3rem;
  }

  .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
      "conhead"
      "con1"
      "con2"
      "con3"
      ;
    gap: 0.5rem;
    padding-top: 4rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 2rem;
    height: 100%;
    grid-auto-flow: column;
  }
  
  .cv-wrapper_head {
    display: grid;
    grid-template-areas: 
      "heading"
      "headline"
      ;
    gap: 0.5rem;
    background-color: rgb(250, 250, 250);
  }
  .cv-wrapper_body {
    display: grid;
    grid-template-areas: 
      "cv1 cv1"
      "cv2 cv2"
      "cv3 cv3"
      ;
    gap: 0.5rem;
    background-color: rgb(250, 250, 250);
  }

  .social-wrapper {
    display: none;
  }
}