/* GENERAL STYLING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
  line-height: 1.5em;
  overflow-x: hidden;
}

.container {
  width: 75%;
  margin: auto;
}
ul{
  list-style: none;
}
ul li a {
  color: #124508;
  text-transform: uppercase;  
}


a {
  text-decoration: none;
}
h1 {
  font-size: calc(22px + (82 - 22) * ((100vw - 250px) / (1920 - 250)));
  line-height: 2.5rem;
  color: #124508;
}

.cta-button {
  height: 50px;
  width: 300px;
  border: 5px #8df430 solid;
  border-radius: 25px;
  background-color: transparent;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 25px;
  color: #8df430;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.cta-button:hover{
  cursor: pointer;
  background-color: #8df430;
  color: #fff;
}
#alt-nav {
  display: none;
}

/* NAVBAR STYLING */
nav {
  width: 100vw;
  height: 175px;
  border-bottom: 1px #8df430 dotted;
  position: relative;
}

#uppernav {
  height: 100px;
}
#lowernav {
  height: 75px;
  border-top: 1px #8df430 dotted;
}
#navlinks,#uppernav {
  display: flex;
  list-style: none;
}
#navlinks {
  height: 100%;
  border-right: 1px #8df430 dotted;
}

.upper-nav-section {
  width: 33%;
  position: relative
}
#nav-contact-icons {
  width: 70%;
  position: relative;
  top: 50%;
  transform: translate(0,-90%);
  font-size: calc(6px + (14 - 6) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 700;
}
.nav-contacts {
  display: flex;
}
.nav-icons {
  width: 9%;
  padding-bottom: 9%;
}
#nav-facebook {
  width: 12.5%;
  padding-bottom: 12.5%;
  position: absolute;
  margin-top: 5px;
  left: 50%;
  transform: translate(-50%,0);
}
#nav-facebook,
.nav-icons {
  background-image: url('/img/contactsprites.svg');
  background-repeat: no-repeat;
}
#nav-facebook {
  background-position: 96.75% 50%;
  background-size: 500%;
}
#nav-email-icon {
  background-position: 34.5% 50%;
  background-size: 500%;
}
#nav-phone-icon {
  background-position: 65.75% 50%;
  background-size: 500%;
}

#nav-logo a {
  position: absolute;
  top: 50%;
  transform: translate(50%,-50%);
}

#weather-widget {
  width: 45%;
  height: 80%;
  background-image: linear-gradient(45deg,#62cb0b, #8df430, #bbf480);
  border-radius: 10px;
  text-align: center;
  padding: 2%;
  margin-left: auto;
  margin-top: 3.5%;
}
.temp, .alt-temp {
  color: #124508;
}

#navlinks li {
  width: 16.66%;
  border-left: 1px #8df430 dotted;
  text-align: center;
  padding-top: 25px;
}
#navlinks li a {
  font-size: calc(8px + (18 - 8) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 800;
}
#navlinks li:hover {
  border-top: 4px #124508 solid;
}
.current {
  border-top: 4px #124508 solid;
}

/* Background Elements */
.background-elements {
  position: absolute;
  z-index: -1;
  opacity: 0.5;
}
/* HOME PAGE STYLING */
/* Hero Slides*/
#homepage h1 {
  line-height: 4rem;
}
#hero {
  height: 90vh;
  position: relative;
}
#hero-slide-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#slide-track {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  height: 100%;
  width: 100%;
  transition: 300ms ease-in;
}
.single_slide {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.single_slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}
#slide-2::before {
  background: rgba(0, 0, 0, 0.65);
}
.single_slide h1{
  position: absolute;
  color: #ffbf00;
  width: 100%;
  text-align: center;
  top: 50%;
}
.hero-cta {
  position: absolute;
  height: 50px;
  width: 300px;
  top: 70%;
  left: 50%;
  transform: translate(-50%,0);
  /* background: none; */
}
.slide_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5% 0 0 0;
  width: 12.5%;
  height: 7.5%;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%,0);
}

.slide-indication {
  /* border: 2px solid red; */
  border-radius: 50%;
  width: 10%;
  background: rgba(141,244,48,0.5);
  margin: 0 5.5%;
  cursor: pointer;
}
.slide-indication::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.slide-indication.current-slide{
  background: rgba(141,244,48,1);
  width: 15%;
}
.slide-indication.current-slide::after{
  content: '';
  display: block;
  padding-bottom: 100%;
}


/* Home Activities */
#home-park-activities {
  display: flex;
  height: 70vh;
  position: relative;
}
#hm-act-info{
  width: 40%;
  height: 70%;
  margin-top: auto;
  transform: translate(0,-30%);
  padding: 2.5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#hm-act-info p {
  font-size: calc(10px + (22 - 10) * ((100vw - 300px) / (1920 - 300)));
}
#act-pics {
  width: 45%;
  height: 100%;
  position: relative;
}
.hm-act-square {
  position: absolute;
  width: 37.5%;
  padding-bottom: 37.5%;
  box-shadow: 2px 2px 7px #777;
}

#hm-act1 {
  left: 60%;
  top: 5%;
  background-image: url('/img/ParkPic7.jpg');
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: 47.5% 0;
}
#hm-act2 {
  left: 5%;
  top: 30%;
  background-image: url('/img/Crafts.png');
  background-repeat: no-repeat;
  background-size: 165%;
  background-position: 50% 0;
}
#hm-act3 {
  left: 52%;
  bottom: 10%;
  background-image: url('/img/ParkPic5.jpg');
  background-repeat: no-repeat;
  background-size: 110%;
  background-position: 0 50%;
}
#bg-el1 {
  width: 52.5%;
  padding-bottom: 52.5%;
  background-image: url('/img/OrangeSlice.svg');
  background-size: 100%;
  left: 35%;
  opacity: 0.25;
}



/* Explore The RGV Sections */
#explore-rgv {
  height: 140vh;
  background-color: #ededed;
  display: flex;
}
#green {
  width: 50%;
  height: 100%;
  background-color: #8df430;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
#green img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#RGV-head {
  width: 50%;
}
.rgv-info {
  margin: auto 5%;
  font-size: calc(10px + (22 - 10) * ((100vw - 300px) / (1920 - 300)));
}
#amenities {
  width: 50%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.amenity {
  position: relative;
  text-align: center;
}
.am-image {
  background-image: url('/img/RGVSprites.svg');
  width: 60%;
  height: 0;
  padding-bottom: 60%;
  margin: 15% auto;
}
#grocery {
  background-position: -5px -5px;
  background-size: 325%;
}
#golf {
  background-position: 50% 0;
  background-size: 300%;
}
#dining {
  background-position: 100% 0;
  background-size: 300%;
}
#hotels {
  background-position: 0 33.33%;
  background-size: 300%;
}
#padre {
  background-position: 50% 33.33%;
  background-size: 300%;
}
#mexico {
  background-position: 100% 33.33%;
  background-size: 300%;
}
#church {
  background-position: 0 66.66%;
  background-size: 300%;
}
#libraries {
  background-position: 50% 66.66%;
  background-size: 300%;
}
#medical {
  background-position: 100% 66.66%;
  background-size: 300%;
}
#shopping {
  background-position: 0 100%;
  background-size: 300%;
}
#airport {
  background-position: 50% 100%;
  background-size: 300%;
}
#museum {
  background-position: 100% 100%;
  background-size: 300%;
}

.amenity h3 {
  position: absolute;
  bottom: 2.5%;
  left: 50%;
  transform: translate(-50%,0);
}

/* Home Page Gallery Section */
#gallery {
  height: 110vh;
  position: relative;
}
#pictures-group {
  position: relative;
  height: 90%;
}
.pictures {
  position: absolute;
}
.small-pictures {
  width: 20%;
  height: 0;
  padding-bottom: 20%;
}
#large-picture {
  width: 30%;
  height: 0;
  padding-bottom: 30%;
  background-image: url('/img/ParkPic18.jpg');
  background-size: cover;
  top: 5%;
  left: 10%;
}
#small-picture1 {
  left: 32.5%;
  bottom: 0;
  background-image: url('/img/ParkPic15.jpg');
  background-size: cover;
  background-position: 45% 0;
}
#small-picture2 {
  left: 42%;
  top: 12.5%;
  background-image: url('/img/ParkPic17.jpg');
  background-size: cover;
  background-position: 3% 0;
}
#small-picture3 {
  right: 16%;
  bottom: 10%;
  background-image: url('/img/ParkPic13.jpg');
  background-size: cover;
  background-position: 0 40%;
}
#gallery h1 {
  position: absolute;
  right: 15%;
  top: 7.5%;
  width: 275px;
}
#gallery-cta {
  position: absolute;
  bottom: 1.25%;
  left: 50%;
  transform: translate(-50%, 0);
}

#bg-el6 {
  width: 15%;
  padding-bottom: 10%;
  left: 2.5%;
  bottom: 0;
  background-image: url('/img/OrangeWedge.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
#bg-el9 {
  width: 15%;
  padding-bottom: 15%;
  left: 46%;
  bottom: 25%;
  background-image: url('/img/LimeWedge.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  transform: rotate(45deg);
  z-index: 2;
  opacity: 1;
}
#bg-el10 {
  width: 35%;
  padding-bottom: 20%;
  right: -7.5%;
  top: 25%;
  background-image: url('/img/SolidOrangeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(90deg);
  opacity: 1;
}

/* ACTIVITIES PAGE */
#act-head {
  height: 80vh;
  position: relative;
  text-align: center;
}
#act-head h1 {
  color: #ffbf00;
  line-height: 4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#act-head img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 0% 40%;
}
#act-head::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}
#activities-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2% 0.5%;
  padding: 5%;
  margin-bottom: 5%;
  position: relative;
}
.activity {
  width: 95%;
  font-size: calc(8px + (16 - 8) * ((100vw - 300px) / (1920 - 300)));
  line-height: 1.2rem;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.act-left {
  box-shadow: 5.5px 5.5px 7.5px #777;
}
.act-right {
  box-shadow: -5.5px 5.5px 7.5px #777;
}
.activity::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
#golfing, #games, #crafts {
  background-color: #8df430;
}
#dinner, #swim {
  background-color: #ededed;
}
#act-cta-tag {
  text-align: center;
  padding: 30% 10%;
}
#act-cta-tag button {
  margin-top: 5%;
}
.activity-content {
  position: absolute;
  width: 50%;
  height: 50%;
}
.pic1 {
  top: 0;
  left: 0;
}
.pic2 {
  bottom: 0;
  right: 0;
}
.activity h2 {
  right: 0;
  top: 0;
  padding-top: 20%;
}
.activity p {
  left: 0;
  bottom: 0;
  padding: 10% 5%;
}
#bg-el11 {
    width: 40%;
    padding-bottom: 40%;
    right: 7.5%;
    bottom: 0;
    background-image: url('/img/OrangeSlice.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.2;
}

/* PARK MAP PAGE*/
#park-map {
  height: 100vh;
  text-align: center;
  padding-top: 2.5%;
  position: relative;
}
#park-map img {
  width: 50%;
}
#bg-el12 {
  width: 15%;
  padding-bottom: 15%;
  left: 5%;
  top: 5%;
  background-image: url('/img/LimeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}
#bg-el13 {
  width: 15%;
  padding-bottom: 15%;
  right: 0;
  bottom: 5%;
  background-image: url('/img/SolidOrangeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(90deg);
  opacity: 1;
}

/* PARK RATES PAGE */
#park-rates {
  position: relative;
}
#rv-rates {
  margin-top: 10%;
}
#mobile-rates {
  margin-bottom: 10%;
}
table {
  width: 100%;
}
.table-image {
  position: relative;
}
.table-image th {
  background-size: 105% 105%;
  background-position: 0 55%;
  height: 45vh;
}
.table-image::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  left: 0;
}
#RV-img th {
  background-image: url('/img/RVRates.png');
}
#Mobile-img th {
  background-image: url('/img/MobileRates.png');
}
.table-title {
  position: absolute;
  color: #ffbf00;
  line-height: 4.5rem;
  top: 35%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}

#mobile-rates td,
#rv-rates td {
  width: 50%;
}
table, th, td {
  border: 2.5px #8df430 solid;
  border-collapse: collapse;
  text-align: center;
}
tr {
  height: 6vh;
}
.heads {
  background-color: #8df430;
  height: 7vh;
  font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1920 - 300)));
}
td {
  background-color: #e1e1e1;
  font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1920 - 300)));
}
#bg-el14 {
  width: 15%;
  padding-bottom: 15%;
  left: -10%;
  top: 0;
  background-image: url('/img/SolidOrangeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(225deg);
  opacity: 1;
}
#bg-el15 {
  width: 25%;
  padding-bottom: 25%;
  right: -10%;
  top: 15%;
  background-image: url('/img/LimeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}
#bg-el16 {
  width: 25%;
  padding-bottom: 25%;
  left: -10%;
  bottom: 15%;
  background-image: url('/img/LimeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}
#bg-el17 {
  width: 25%;
  padding-bottom: 25%;
  right: -10%;
  bottom: -5%;
  background-image: url('/img/OrangeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}

/* GALLERY */
/* Gallery Top */
#gallery-page {
  position: relative;
}
#gallery-hero {
  height: 100vh;
}
#image-w-title {
 width: 75%;
 height: 80%;
 margin: auto;
 margin-top: 10%;
 position: relative;
}
#image-w-title img {
  width: 60%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
}
#gallery-blurb {
  width: 75%;
  height: 25%;
  background-color: rgba(225, 225, 225, 0.65);
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
}
#gallery-facebook {
  width: 7%;
  padding-bottom: 7%;
  margin-left: 50%;
  transform: translate(-50%, 0);
  background-image: url('/img/contactsprites.svg');
  background-position: 96.75% 50%;
  background-size: 500%;
}
#bg-el18 {
  width: 35%;
  padding-bottom: 35%;
  left: 2.5%;
  top: 0;
  background-image: url('/img/OrangeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}
#bg-el19 {
  width: 20%;
  padding-bottom: 20%;
  left: 10%;
  bottom: 0;
  background-image: url('/img/SolidLimeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(45deg);
  opacity: 0.75;
}

/* Gallery Slideshow */
#gallery-sldeshow-section {
  height: 100vh;
  position: relative;
}
#gallery-slideshow {
  height: 100%;
}
#gallery-slideshow img {
  max-width: 100%;
}

#gallery-slideshow figure {
  max-width: 80%;
  height: 75%;
  margin: 0 auto 40px;
  /* border: 2px solid; */
}

#featured {
  display: block;
  object-fit: contain;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
}

.thumb-img-list {
  position: relative;
  display: flex;
  align-items: center;
  width: 40%;
  height: 15vh;
  margin: auto;
}

.thumbnail-slider {
  width: 85%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  margin: 0 auto;
}
.arrows {
  position: relative;
  background-color: #8df430;
  width: 7.5%;
  height: 100%;
}
.left-side {
  left: 0;
  top: 0;
}
.right-side {
  right: 0;
  top: 0;
}
.arr {
  border: solid black;
  border-width: 0 5px 5px 0;
  display: inline-block;
  position: absolute;
  padding: 5px;
}
.left-arr {
  left: 25%;
  top: 50%;
  transform: rotate(135deg) translate(-50%, 50%);
  -webkit-transform: rotate(135deg) translate(-50%, 50%);
}
.right-arr {
  right: 25%;
  top: 50%;
  transform: rotate(-45deg) translate(50%, -50%);
  -webkit-transform: rotate(-45deg) translate(50%, -50%);
}
.thumbnail {
  object-fit: cover;
  width: 20%;
  border: 2px solid;
}
.active {
  border: 4px solid #8df430;
}
#bg-el20 {
  width: 40%;
  padding-bottom: 40%;
  left: 5%;
  bottom: 15%;
  background-image: url('/img/OrangeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}
#bg-el21 {
  width: 25%;
  padding-bottom: 15%;
  right: 5%;
  bottom: 20%;
  background-image: url('/img/LimeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: rotate(45deg);
  opacity: 1;
}
#bg-el22 {
  width: 7.5%;
  padding-bottom: 7.5%;
  right: 22.5%;
  bottom: 8%;
  background-image: url('/img/SolidOrangSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}
#bg-el23 {
  width: 7.5%;
  padding-bottom: 7.5%;
  left: 22.5%;
  bottom: 5%;
  background-image: url('/img/LimeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}


/* REGISTRATION */
#registration {
  position: relative;
}
ul.errors {
  padding: 1em;
  margin-bottom: 1.25em;
  background: rgba(247, 112, 94, 0.2);
  border: 1px solid rgba(247, 112, 94, 0.5);
  list-style-position: inside;
  border-radius: 3px;
}
.success {
  padding: 1em;
  margin-bottom: 1.25em;
  background: rgba(143, 247, 94, 0.2);
  border: 1px solid rgba(143, 247, 94, 0.5);
  border-radius: 3px;
}
.success ul {
  list-style-position: inside;
  margin-top: 0.5em;
}
#registration-form {
  width: 100%;
  background-color: #f3f4f2;
  margin-top: 10%;
  margin-bottom: 10%;
}
#reg-title {
  height: 8vh;
  background-color: #8df430;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 1.25%;
}
#registration-form fieldset {
  border: none;
}
.regular-inputs {
  width: 60%;
  margin: 0.25% 0 1% 1%;
  padding: 1%;
  border-radius: 5px;
  border: 1px #8df430 solid;
}
#registration-form label,
.reg-radios legend {
  margin: 1% 0 0 1.25%;
  font-weight: bold;
  color: #124508;
}
.radios {
  display: flex;
}
.radio-answers {
  width: 15%;
  text-align: center;
}
.radio-inputs {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #8df430;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}
.radio-inputs:checked {
  border: 6px solid #8df430;
}
#registration-form button {
  margin-left: 50%;
  transform: translate(-50%, 0);
  width: 12.5%;
  margin-top: 2.5%;
}
#registration-form p {
  margin-left: 50%;
  transform: translate(-50%, 0);
  margin-top: 1.5%;
  text-align: center;
}
#reg-dates {
  display: flex;
  margin: 1% 0 0 1%;
}
#reg-dates input {
  width: 90%;
}
#emergency-contact {
  border: none;
}
#emergency-contact legend {
  width: 100%;
  text-align: center;
  background-color: #8df430;
  font-weight: bold;
}
#bg-el24 {
  width: 25%;
  padding-bottom: 25%;
  left: -15%;
  top: 0;
  background-image: url('/img/LightOrangeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}
#bg-el25 {
  width: 25%;
  padding-bottom: 25%;
  right: -15%;
  top: 40%;
  background-image: url('/img/SolidLimeSlice.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}
#bg-el26 {
  width: 15%;
  padding-bottom: 15%;
  right: 42.5%;
  bottom: -11.15%;
  background-image: url('/img/SolidOrangeWedge.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
}


/* FOOTER */
/* Footer Contact */
#contact {
  height: 120vh;
  background-color: #ededed;
  display: flex;
}
#contact-form {
  width: 50%;
  height: 100%;
}
#footer-contact-form {
  border: 7.5px #8df430 solid;
  width: 85%;
  height: 80%;
  margin: auto;
  transform: translate(0, 12%);
  position: relative;
}
#footer-contact-fieldset {
  border: none;
}
#footer-contact-form legend{
  width: 100%;
  height: 15%;
  background-color: #8df430;
  border: 2px #8df430 solid;
  font-size: calc(18px + (70 - 18) * ((100vw - 300px) / (1920 - 300)));
  font-weight: 700;
  text-transform: uppercase;
  padding-left: 21%;
  padding-top: 3.5%;
}
label {
  display: block;
}
#footer-contact-fieldset input, 
#footer-contact-fieldset textarea {
  width: 80%;
  margin-top: 5%;
  margin-left: 50%;
  padding: 2%;
  transform: translate(-50%,0);
  border-radius: 5px;
  border: 1px #8df430 solid;
}

#contact-cta {
  width: 150px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 5%;
}
#foot-top-contact {
  width: 50%;
  height: 100%;
  position: relative;
}
#foot-contact-fb {
  width: 15%;
  height: 0;
  padding-bottom: 15%;
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%,0);
  z-index: 10;
}
#foot-contact-icons {
  width: 50%;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  z-index: 10;
}
#foot-contact-fb,
.foot-icons {
  background-image: url('/img/contactsprites.svg');
  background-repeat: no-repeat;
}
#foot-contact-fb {
  background-position: 96.75% 50%;
  background-size: 500%;
  opacity: 1;
  transform: translate(-125%, 0);
}
#foot-email-icon {
  background-position: 34.5% 50%;
  background-size: 500%;
}
#foot-address-icon {
  background-position: 3.25% 50%;
  background-size: 500%;
}
#foot-phone-icon {
  background-position: 65.75% 50%;
  background-size: 500%;
}
.foot-contacts {
  margin-top: 40px;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.foot-icons {
  width: 10%;
  height: 0;
  padding-bottom: 10%;
}

/* Map */
#map {
 height: 95vh;
}
#map img{
 object-fit: cover;
 height: 99%;
 width: 100%;
}
#foot {
  height: 50vh;
  display: flex;
}
#left-side {
  width: 50%;
}
#left-side img {
  display: block;
  margin: auto;
  padding-top: 7.5%;
}
#foot-facebook {
  width: 15%;
  padding-bottom: 15%;
  margin-top: 10%;
  height: 10px;
  background-image: url('/img/contactsprites.svg');
  background-repeat: no-repeat;
  background-position: 96.75% 50%;
  background-size: 500%;
}
#foot-logo {
  width: 25%;
}
#left-side button {
  display: block;
  margin: 5% auto;
}
#foot-links {
  width: 50%;
  display: flex;
}
#foot-links ul {
  width: 35%;
  padding-top: 5%;
}
#foot-links li a {
  font-weight: 500;
}

#foot-contact-success {
  height: 50vh;
  margin: auto;
  width: 60%;
  text-align: center;
  padding-top: 2.5%;
  font-size: calc(22px + (82 - 22) * ((100vw - 250px) / (1920 - 250)));
  line-height: 5rem;
  color: #124508;
}