h1 {
  position: relative;
  text-align: center;
  font-family: "Vollkorn", sans-serif;
}

.button_container {
  position: absolute;
  right: 0;
  height: 100vh;
  width: 60px;
  cursor: pointer;
  z-index: 9999;
  transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
border-left: 1px solid #FFEAD3;
}
.button_container a{
    position: absolute;
    bottom: 4%;
    right: 31%;}
.button_container .contact-close{
  position: absolute;
  bottom: 50%;
  margin-bottom: -10px;
  margin-left: 8px;
}

.button_container .close-button{
  display: none;
  position: absolute;
  top: 5%;
  right: 27%;
  max-width: 24px;
margin: 0 auto;
}
.button_container.active .close-button{
  display: block;
}

.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container .contact-close{
display: none;
transform: rotate(-90deg);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #5F504D;
letter-spacing: 2px;
text-align: center;}
.ext-container{height: 100vh;}
.button_container.active .contact-close{display: block;}
.button_container.active .ext-container{background-color: #fff;}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, width 0.35s;
  z-index: 999;
  margin: 0;
  overflow-y: scroll;
}
.overlay:before {
  content: "";
  background: #fff;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left 0.35s ease;
}
.overlay:after {
  content: "";
  background-image: url(../images/map-bg.jpg);
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all 0.35s ease;
}
.overlay.open {
  visibility: visible;
  height: 100%;
}
.overlay.open:before {
  left: 0;
}
.overlay.open:after {
  right: 0;
}

.right-phone img{max-width: 24px; position: absolute; right: 17px; top: 30px;}
.phone-two{display: none;}
.menu-open .phone-two{display: block;}
.menu-open .phone-one{display: none;}
.right-location{position: absolute; bottom: 25px; right: 18px;}
.location-img-1, .location-img-2{max-width: 24px; margin: 0 auto;}
.location-img-2{display: none;}
.menu-open .location-img-1{display: none;}
.menu-open .location-img-2{display: block;}
.menu-open .button_container{background-color: #fff;}









/* ==============================================
CONTACT PAGE CSS -->
=============================================== */
 .left-form .ext-form{display: flex;}
 .left-form .ext-form .ext-inp{margin-right: 10px;}
 .left-form input, textarea{margin-top: 15px;}
 .left-form textarea{height: 100px;}
 .form-send-button{text-align: left; margin-top: 30px;}
 .form-send-button a{font-family: Montserrat-Regular; font-size: 14px; color: #5F504D; letter-spacing: 0.7px; text-align: center; background-color: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.2); padding: 10px 70px;}
 .left-form-address{ padding: 40px 0 0;}
 .left-form-address h6{font-family: Montserrat-SemiBold; font-size: 16px; color: #4A4A4A; letter-spacing: 0.89px;}
 .left-form-address p{font-family: Montserrat-Regular; font-size: 13px; color: #4A4A4A; letter-spacing: 0.82px; line-height: 20px; max-width: 120px; padding: 20px 0;}
 .left-form-phone{    display: grid;}
 .left-form-phone a{font-family: Montserrat-Regular; font-size: 13px; color: #4A4A4A; letter-spacing: 0.82px; line-height: 20px;}
 .left-form-phone .left-form-mail{margin-top: 15px;}
 .left-form-address .left-form-social h6{padding-bottom: 10px; font-family: Montserrat-SemiBold; font-size: 16px; color: #4A4A4A; letter-spacing: 0.89px;}
 .left-form-address .left-form-social{padding: 30px 0 0;}
 .left-form-address .left-form-social a{color: #4A4A4A; font-size: 20px; padding-right: 15px;}
 #google-map #map{width: 100%; height: 100vh;}
#map .gm-style-iw-d p { font-size: 10px; line-height: 15px;}
#map .gm-style-iw-d h4 { font-size: 14px; color: #484848; padding-bottom: 5px;}
.cd-primary-nav-dark .contact-page-nav{background-color: transparent !important;}
.cd-primary-nav-dark .contact-page-nav .contact-page-a{background-color: #5F504D; color: #fff;}
.contact-left-content {max-width: 350px; margin: 80px auto;}
.contact-menu-address{padding-top: 80px;}
.contact-menu-address {max-width: 137px;}
.contact-menu-address p{padding-bottom: 20px;}
.contact-menu-address p, .contact-menu-address a{font-family: Montserrat-Regular; font-size: 12px; color: #5F504D; letter-spacing: 1px; line-height: 15px;}
.left-form input, textarea { display: block; width: 100%; border: 0; padding: 7px 10px; background: white no-repeat;
	/*
	* IMPORTANT PART HERE
	*/
  /* 2 imgs : 1px gray line (normal state) AND 2px green line (focus state) */
	background-image: linear-gradient(to bottom, #5F504D, #5F504D), linear-gradient(to bottom, silver, silver);
	/* sizes for the 2 images (default state) */
	background-size: 0 2px, 100% 1px;
	/* positions for the 2 images. Change both "50%" to "0%" or "100%" and tri again */
	background-position: 50% 100%, 50% 100%;
	/* animation solely on background-size */
  transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}

input:focus,
textarea:focus{ background-size: 100% 2px, 100% 1px; outline: none;}
.contact-logo{max-width: 86px; position: absolute; left: 50%; z-index: 999; margin-left: -43px; top: 30px; transition: left 0.35s ease; left: -55%;}
.overlay.open .contact-logo{left: 50%;}



.site-header__right .right-phone{
  position: absolute;
right: 0;
width: 60px;
height: 100px;
z-index: 99999;
}
.button_container.active .right-phone{display: none;}
.active{z-index: 999999;}

.location-button img{position: absolute; right: 48%; top: 17%; max-width: 72px; z-index: 1;}
.location-button a{position: absolute; right: 39%; top: 62%; z-index: 1;font-family: Montserrat-Regular; font-size: 14px; color: #5F504D; letter-spacing: 0.7px; text-align: center; padding: 10px 45px; background-color:#fff; box-shadow: 0 0 30px rgba(0,0,0,0.2);}