#hero {
    height: 800px;
    overflow: hidden;
    position: relative;
  }
  
  #content {
    /* background-color: #130d0a; */
  }
  
  .layer {
    background-position: bottom center;
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 800px;
    position: fixed;
    z-index: -1;
  }
  
  #hero-mobile {
    display: none;
    background: url("../img/full-illustration.png") no-repeat center bottom/cover;
    height: 320px;
  }
  
  .first-section {
    padding: 50px 0 20px 0;
  }
  
  .text-header {
    font-size: 50px;
    text-align: center;
  }
  

  #hero,
  .layer {
    min-height: 800px;
  }
  
  
  
  @media only screen and (max-width: 768px) {
    #hero {
      min-height: 0px !important;
      height: 220px !important;
    }
/*   
    #hero-mobile {
      display: block;
    } */
  }
 


  .slideshow img {
    float: left;
  }
  
  #prev,
  #next {
    position: absolute;
    z-index: 9999;
    display: block;
    top: 50%;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
  }
  

  #prev {
    left: 0;
    background: url(https://image.ibb.co/jevVLk/prev.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }
  
  #next {
    right:0;
    background: url(https://image.ibb.co/eGoT6Q/next.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }

  #prev2,
  #next2 {
    position: absolute;
    z-index: 9999;
    display: block;
    top: 50%;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
  }
  

  #prev2 {
    left: 0;
    background: url(https://image.ibb.co/jevVLk/prev.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }

  #next2 {
    right:0;
    background: url(https://image.ibb.co/eGoT6Q/next.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }

  .btnP2,
  .btnN2 {
    position: absolute;
    z-index: 9999;
    display: block;
    top: 50%;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
  }
  

  .btnP2 {
    left: 0;
    background: url(https://image.ibb.co/jevVLk/prev.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }
  
  .btnN2 {
    right:0;
    background: url(https://image.ibb.co/eGoT6Q/next.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
  }

  div.middle-div {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /*GALLERY*/
.gallery-container{
  padding-top: 25px;
  display:flex; 
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  position: relative;
}
.gallery-item {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 10px;
  transition: 200ms ease-in-out;
  border-radius: 10px;
}
.gallery-item:hover{
/*    outline: 7px dotted #f9b618; */
   opacity: 0.7;
}

.gallery-item img{ 
  object-fit: cover;
   width: 300px;
   height: 300px;
   transition: 300ms ease-in-out;
}

.gallery-item img:hover{
  transform: scale(1.1);
  cursor: pointer;
}

.overlay{
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  z-index: 888;
}

.modals{
  font-family: 'Balsamiq Sans', cursive;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  width: 100%;
  
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 300ms ease-in-out;
  overflow: hidden;
}
.modals img{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  transition: 150ms ease-in-out;
}

.closes{
  position: absolute;
  right: 25px;
  top: 0;
  border: none;
  background-color: transparent;
  color: white;
  font-size: 3em;
  
  transform: scale(1.5,1);
  z-index: 5;
}

.next, .prev{
  background-color: #eee;
  color: #2b2413;
  border-radius: 50%;
  border:none;
  height: 40px;
  width: 40px;
  position: absolute;
  z-index: 5;
  font-size: 25px;
}

.next:hover, .prev:hover{
  filter: brightness(80%);
  cursor: pointer;
}

.prev{
  left: 25px;
  top: 50%;
}
.next{
  right: 25px;
  top: 50%;
}

.close:hover{
  color: #50b7df;
  cursor: pointer;
}

.modals.show{ 
  opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

 .overlay.show{ 
  background-color: #06483d;
  opacity: 0.8;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.close:focus, .prev:focus, .next:focus{
  outline: none;
}


.container_gallery{
  
  
  display: grid;
  grid-template-areas:
  'area1 area1 area2 area3 area3 area4 .'
  'area1 area1 area5 area5 area6 area6 area6';
  gap: 1.5vw;
  padding: 0;
  margin: 0;
  }
  .img-collection{
  width: 100%;
  block-size: auto;
  object-fit: cover;
  object-position: 50% 50%;
  filter: drop-shadow(2px 6px 15px rgba(135, 139, 142, 0.6));
  /* border-radius: 60rem;
  border: 0.3vw solid white; */
  }
  .img-col1{
  grid-area: area1;
  aspect-ratio: 2;
  height: 40%;
  }
  .img-col2{
    height: 90%;
    aspect-ratio: 1.06;
  grid-area: area2;
  
  }
  .img-col3{ 
    width: 90%;
    aspect-ratio: 1.8;
  grid-area: area3; 
  
  }
  .img-col4{
    width: 100%;
    aspect-ratio: 1.06;
  grid-area: area4;  
  
  }
  .img-col5{
  grid-area: area5;
  width: 90%
  }
  .img-col6{
   width: 90%;
  grid-area: area6;
  }

.hiddenimg {
  display: none;
}

.hiddentxt:hover ~ .hiddenimg {
  display: block;
  position: absolute;
    z-index: 2
}

.boxShadow {
 
  box-shadow: 5px 10px 8px #888888;
}

.loop-wrapper {
  margin: 0 auto;
  position: relative;
  display: block;
  width: 600px;
  height: 250px;
  overflow: hidden;
  border-bottom: 3px solid #fff;
  color: #fff;
}
.mountain {
  position: absolute;
  right: -900px;
  bottom: -20px;
  width: 2px;
  height: 2px;
  box-shadow: 
    0 0 0 50px #ddd,
    60px 50px 0 70px #ddd,
    90px 90px 0 50px #ddd,
    250px 250px 0 50px #ddd,
    290px 320px 0 50px #ddd,
    320px 400px 0 50px #ddd
    ;
  transform: rotate(130deg);
  animation: mtn 20s linear infinite;
}
.hill {
  position: absolute;
  right: -900px;
  bottom: -50px;
  width: 400px;
  border-radius: 50%;
  height: 20px;
  box-shadow: 
    0 0 0 50px #ddd,
    -20px 0 0 20px #ddd,
    -90px 0 0 50px #ddd,
    250px 0 0 50px #ddd,
    290px 0 0 50px #ddd,
    620px 0 0 50px #ddd;
  animation: hill 4s 2s linear infinite;
}
.tree, .tree:nth-child(2), .tree:nth-child(3) {
  position: absolute;
  height: 100px; 
  width: 35px;
  bottom: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg) no-repeat;
}
.rock {
  margin-top: -17%;
  height: 2%; 
  width: 2%;
  bottom: -2px;
  border-radius: 20px;
  position: absolute;
  background: #ddd;
}
.truck, .wheels {
  transition: all ease;
  width: 85px;
  margin-right: -60px;
  bottom: 0px;
  right: 50%;
  position: absolute;
  background: #eee;
}
.truck {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg) no-repeat;
  background-size: contain;
  height: 60px;
}
.truck:before {
  content: " ";
  position: absolute;
  width: 25px;
  box-shadow:
    -30px 28px 0 1.5px #fff,
     -35px 18px 0 1.5px #fff;
}
.wheels {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg) no-repeat;
  height: 15px;
  margin-bottom: 0;
}

.tree  { animation: tree 3s 0.000s linear infinite; }
.tree:nth-child(2)  { animation: tree2 2s 0.150s linear infinite; }
.tree:nth-child(3)  { animation: tree3 8s 0.050s linear infinite; }
.rock  { animation: rock 4s   -0.530s linear infinite; }
.truck  { animation: truck 4s   0.080s ease infinite; }
.wheels  { animation: truck 4s   0.001s ease infinite; }
.truck:before { animation: wind 1.5s   0.000s ease infinite; }


@keyframes tree {
  0%   { transform: translate(1350px); }
  50% {}
  100% { transform: translate(-50px); }
}
@keyframes tree2 {
  0%   { transform: translate(650px); }
  50% {}
  100% { transform: translate(-50px); }
}
@keyframes tree3 {
  0%   { transform: translate(2750px); }
  50% {}
  100% { transform: translate(-50px); }
}

@keyframes rock {
  0%   { right: -200px; }
  100% { right: 2000px; }
}
@keyframes truck {
  0%   { }
  6%   { transform: translateY(0px); }
  7%   { transform: translateY(-6px); }
  9%   { transform: translateY(0px); }
  10%   { transform: translateY(-1px); }
  11%   { transform: translateY(0px); }
  100%   { }
}
@keyframes wind {
  0%   {  }
  50%   { transform: translateY(3px) }
  100%   { }
}
@keyframes mtn {
  100% {
    transform: translateX(-2000px) rotate(130deg);
  }
}
@keyframes hill {
  100% {
    transform: translateX(-2000px);
  }
}



.phone-btn {
  position: relative;
  z-index: 1;
  width: 6em;
  height: 6em;
  padding: 1.5em;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 3em #2296f4, 0 0 0 0 rgba(34, 150, 244, 0.25);
  background-color: #3da3f6;
  -webkit-animation: scaleUp 2s infinite, borderScale 2s infinite;
          animation: scaleUp 2s infinite, borderScale 2s infinite;
}
.phone-btn > svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  -webkit-animation: shake 2s cubic-bezier(0.43, 0, 0.6, 0.4) infinite;
          animation: shake 2s cubic-bezier(0.43, 0, 0.6, 0.4) infinite;
}

@-webkit-keyframes borderScale {
  0% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 3em #2296f4, 0 0 0 0 rgba(34, 150, 244, 0.25);
  }
  50% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 0.5em #2296f4, 0 0 0 0 rgba(34, 150, 244, 0.25);
  }
  100% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 3em #2296f4, 0 0 0 3em rgba(34, 150, 244, 0);
  }
}

@keyframes borderScale {
  0% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 3em #2296f4, 0 0 0 0 rgba(34, 150, 244, 0.25);
  }
  50% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 0.5em #2296f4, 0 0 0 0 rgba(34, 150, 244, 0.25);
  }
  100% {
    box-shadow: 0 0.125em 0.5em #aaa, inset 0 0 0 3em #2296f4, 0 0 0 3em rgba(34, 150, 244, 0);
  }
}
@-webkit-keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.125);
  }
  60% {
    transform: scale(1);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.125);
  }
  60% {
    transform: scale(1);
  }
}
@-webkit-keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  1.25% {
    transform: translate(-2.5%, 0);
  }
  2.5% {
    transform: translate(0, 0);
  }
  3.75% {
    transform: translate(2.5%, 0);
  }
  5% {
    transform: translate(0, 0);
  }
  6.25% {
    transform: translate(-5%, 0);
  }
  7.5% {
    transform: translate(0, 0);
  }
  8.75% {
    transform: translate(5%, 0);
  }
  10% {
    transform: translate(0, 0);
  }
  11.25% {
    transform: translate(-5%, 0);
  }
  12.5% {
    transform: translate(0, 0);
  }
  13.75% {
    transform: translate(5%, 0);
  }
  15% {
    transform: translate(0, 0);
  }
  16.25% {
    transform: translate(-7.5%, 0);
  }
  17.5% {
    transform: translate(0, 0);
  }
  18.75% {
    transform: translate(7.5%, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  21.25% {
    transform: translate(-7.5%, 0);
  }
  22.5% {
    transform: translate(0, 0);
  }
  23.75% {
    transform: translate(7.5%, 0);
  }
  25% {
    transform: translate(0, 0);
  }
  26.25% {
    transform: translate(-7.5%, 0);
  }
  27.5% {
    transform: translate(0, 0);
  }
  28.75% {
    transform: translate(7.5%, 0);
  }
  30% {
    transform: translate(0, 0);
  }
  31.25% {
    transform: translate(-7.5%, 0);
  }
  32.5% {
    transform: translate(0, 0);
  }
  33.75% {
    transform: translate(7.5%, 0);
  }
  35% {
    transform: translate(0, 0);
  }
  36.25% {
    transform: translate(-7.5%, 0);
  }
  37.5% {
    transform: translate(0, 0);
  }
  38.75% {
    transform: translate(7.5%, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  41.25% {
    transform: translate(-7.5%, 0);
  }
  42.5% {
    transform: translate(0, 0);
  }
  43.75% {
    transform: translate(7.5%, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  46.25% {
    transform: translate(-7.5%, 0);
  }
  47.5% {
    transform: translate(0, 0);
  }
  48.75% {
    transform: translate(7.5%, 0);
  }
  50% {
    transform: translate(0, 0);
  }
}
@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  1.25% {
    transform: translate(-2.5%, 0);
  }
  2.5% {
    transform: translate(0, 0);
  }
  3.75% {
    transform: translate(2.5%, 0);
  }
  5% {
    transform: translate(0, 0);
  }
  6.25% {
    transform: translate(-5%, 0);
  }
  7.5% {
    transform: translate(0, 0);
  }
  8.75% {
    transform: translate(5%, 0);
  }
  10% {
    transform: translate(0, 0);
  }
  11.25% {
    transform: translate(-5%, 0);
  }
  12.5% {
    transform: translate(0, 0);
  }
  13.75% {
    transform: translate(5%, 0);
  }
  15% {
    transform: translate(0, 0);
  }
  16.25% {
    transform: translate(-7.5%, 0);
  }
  17.5% {
    transform: translate(0, 0);
  }
  18.75% {
    transform: translate(7.5%, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  21.25% {
    transform: translate(-7.5%, 0);
  }
  22.5% {
    transform: translate(0, 0);
  }
  23.75% {
    transform: translate(7.5%, 0);
  }
  25% {
    transform: translate(0, 0);
  }
  26.25% {
    transform: translate(-7.5%, 0);
  }
  27.5% {
    transform: translate(0, 0);
  }
  28.75% {
    transform: translate(7.5%, 0);
  }
  30% {
    transform: translate(0, 0);
  }
  31.25% {
    transform: translate(-7.5%, 0);
  }
  32.5% {
    transform: translate(0, 0);
  }
  33.75% {
    transform: translate(7.5%, 0);
  }
  35% {
    transform: translate(0, 0);
  }
  36.25% {
    transform: translate(-7.5%, 0);
  }
  37.5% {
    transform: translate(0, 0);
  }
  38.75% {
    transform: translate(7.5%, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  41.25% {
    transform: translate(-7.5%, 0);
  }
  42.5% {
    transform: translate(0, 0);
  }
  43.75% {
    transform: translate(7.5%, 0);
  }
  45% {
    transform: translate(0, 0);
  }
  46.25% {
    transform: translate(-7.5%, 0);
  }
  47.5% {
    transform: translate(0, 0);
  }
  48.75% {
    transform: translate(7.5%, 0);
  }
  50% {
    transform: translate(0, 0);
  }
}

.half-half-image-text {
  padding: 70px 0px;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0px;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 320px;
  height: 100%;
  border-radius: 10px;
}