.popup {
	 position: fixed;
	 width: 100%;
	 height: 100%;
	 left: 0;
	 top: 0;
	 z-index: 1000;
	 margin: 0;
	 background-color: rgba(68,55,56,0.9);
	 display: none;
	 opacity: 0;
	 transition: opacity ease 1s;
	 justify-content: center;
	 align-items: center;
	 align-content: center;
	/*coffee page*/
}
 .popup.active {
	 display: flex;
}
 .popup.visible {
	 opacity: 1;
}
 .popup-close {
	 position: absolute;
	 top: 1.125rem;
	 right: 1.5rem;
	 z-index: 10;
}
 @media (max-width: 768px) {
	 .popup-close {
		 top: 1.28rem;
		 right: 1.28rem;
	}
}
 .popup-close a {
	 display: block;
}
 @media (min-width: 769px) {
	 .popup-close a:hover svg path, .popup-close a:focus svg path {
		 fill: black;
	}
}
 .popup-close svg {
	 transition: fill 0.3s ease;
	 width: 1.6875rem;
	 height: 1.8125rem;
}
 .popup-close svg path {
	 transition: fill 0.3s ease;
}
 .popup-close.x-close {
	 top: 15px;
	 right: 15px;
}
 .popup-close.x-close a {
	 color: grey;
}
 .popup-close.x-close a svg {
	 width: 36px;
	 height: 36px;
}
 .popup-close.x-close a svg path {
	 fill: grey;
}
 @media (min-width: 769px) {
	 .popup-close.x-close a:hover svg path {
		 fill: black;
	}
}
 .popup-close.x-close svg path {
	 fill: grey;
}
 .popup-close-text {
	 margin-top: 3.125rem;
	 text-align: center;
}
 .popup-close-text a {
	 transition: color 0.3s ease;
	 color: blue;
	 font-size: 13px;
	 line-height: 1.2;
	 text-transform: uppercase;
}
 @media (min-width: 769px) {
	 .popup-close-text a:hover, .popup-close-text a:focus {
		 color: white;
	}
}
 .popup-close-text svg {
	 transition: fill 0.3s ease;
	 width: 1.6875rem;
	 height: 1.8125rem;
	 fill: blue;
}
 @media (max-width: 768px) {
	 .popup-close-text svg {
		 width: 4.32rem;
		 height: 4.64rem;
	}
}
 .popup-container {
	 width: 400px;
	 z-index: 1;
	 position: relative;
     background-color: white;
     color: black;
}
 .popup-inner {
	 padding: 2rem;
}
 @media (max-width: 768px) {
	 .popup-inner {
		 margin: 0;
		 padding: 6.4rem 5.44rem 0;
		 height: auto;
		 height: 95vh;
		 overflow: scroll;
	}
}
 .popup-icon {
	 text-align: center;
}
 .popup-icon svg {
	 fill: white;
	 width: 6.75rem;
	 height: 6.75rem;
}
 .popup-icon svg path {
	 fill: white;
}
 .popup-title {
	 margin-top: 1.25rem;
}
 .popup-title h2 {
    font-size: 20px!important;
	 color: black;
}
 .popup-description {
	 margin-bottom: 1.25rem;
}
 .popup-description p {
	 font-size: 1.5rem;
	 line-height: 1.2;
	 color: white;
	 text-align: center;
}
 @media (max-width: 768px) {
	 .popup-description {
		 margin-bottom: 3.2rem;
	}
	 .popup-description p {
		 font-size: 3.84rem;
	}
}
 .popup-container input[type="text"] {
	 font-size: 30px;
	 padding-left: 70px;
}

 .popup-form label {
	 color: grey;
	 font-size: 18px;
}
 @media (max-width: 768px) {
	 .popup-form label {
		 font-size: 18px;
	}
}
 .popup-form input, .popup-form select, .popup-form textarea {
	 color: grey;
	 margin-top: 10px;
	 border: 1px solid grey;
	 padding: 5px;
	 height: 40px;
	 font-size: 25px;
     width: 100%;
}
 @media (max-width: 768px) {
	 .popup-form input, .popup-form select, .popup-form textarea {
		 font-size: 20px;
		 height: 44px;
	}
}
 .popup-form textarea {
	 border-radius: 2rem;
	 resize: none;
	 height: 120px;
	 padding: 10px 16px;
}
 @media (max-width: 768px) {
	 .popup-form textarea {
		 height: 80px;
	}
}
 .popup-form .error textarea {
	 border-color: pink;
	 border-width: 2px;
}
 .popup-row {
	 display: flex;
}
 .popup-row-field {
	 width: 50%;
	 padding: 0 1% 0;
}
 .popup-row-field:last-child {
	 padding: 0 0 0 1%;
}
 @media (max-width: 768px) {
	 .popup-row-field {
		 width: 100%;
		 padding: 0;
	}
	 .popup-row-field:last-child {
		 padding: 0;
	}
}
 .popup-field {
	 margin-top: 15px;
}
 .popup-field span {
	 color: pink;
	 margin-top: 10px;
	 display: none;
}
 .popup-field.error span {
	 display: block;
}
 @media (max-width: 768px) {
	 .popup-field {
		 margin-top: 20px;
	}
}
 .popup-button {
	 margin-top: 20px;
}
 @media (max-width: 768px) {
	 .popup-button {
		 margin-top: 15px;
	}
}
 .popup .coffee-popup-center {
	 text-align: center;
	 width: 100%;
}
 .popup .popup-container {
	 max-width: 700px;
	 background: white;
	 border-radius: 30px;
}
.popup .popup-container.container-thanks {
	 max-width: 630px;
}
 @media (max-width: 768px) {
	 .popup .popup-container {
		 max-width: 90%;
	}
	 .popup .popup-container.container-thanks {
		 max-width: 90%;
	}
}
 .popup .popup-inner {
	 padding: 30px;
}
 .popup .popup-inner.thanks {
	 display: none;
	 align-items: center;
}
 @media (max-width: 768px) {
	 .popup .popup-inner.thanks {
		 min-height: auto;
	}
}
 .popup .popup-inner.thanks div h2 {
	 font-size: 22px!important;
	 text-align: center;
}
 @media (max-width: 768px) {
	 .popup .popup-inner.thanks div h2 {
		 font-size: 28px;
	}
}
 @media (max-width: 768px) {
	 .popup .popup-inner {
		 height: auto;
		 padding: 25px 15px;
	}
}
 .popup .popup-title {
	 margin-top: 0;
}
 .popup .popup-title h2 {
	 font-size: 35px;
	 color: black;
	 text-align: left;
}
 @media (max-width: 768px) {
	 .popup .popup-title h2 {
		 font-size: 28px;
	}
}
 .popup .popup-container input[type="text"] {
	 font-size: 25px;
	 padding: 5px 16px;
}
 @media (max-width: 768px) {
	 .popup .popup-container input[type="text"] {
		 font-size: 20px;
	}
}