/* Mailchimp Newsletter Popup */

.newsletter
{
   background-color: #b01016;
	bottom: 0;
	border: 5px solid #fff;
	border-bottom: 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	max-width: 385px;
	max-height: 80vh;
	opacity: 0;
	outline: 7px solid #b01016;
	position: fixed;
	transform: translateY(50%);
	transition: visibility linear 300ms, all 300ms;
	right: 2%;
	visibility: hidden;
	z-index: 999;
}

@media (max-width: 420px) 
{
   .newsletter
   {
		max-width: 90vw;
		left: 0;
		right: 0;
		margin: 0 auto;
   }
}

.newsletter--visible
{
   opacity: 1;
   transition: visibility linear 0s, all 700ms;
   transform: translateY(0);
   visibility: visible;
}

.newsletter__close
{
   background-color: #000;
   border: 0;
   border-radius: 999px;
   color: #fff;
   cursor: pointer;
   flex-shrink: 0;
   height: 42px;
   left: 0;
   position: absolute;
   top: 0;
   transform: translate(-55%, -55%);
   transition: 150ms all ease-in;
   width: 42px;
   z-index: 2;
}

.newsletter__close:hover
{
   background-color: #fff;
   color: #000;
}

.newsletter__content
{
   overflow: auto;
   padding: 24px;
   padding-bottom: 64px;
   position: relative;
}

.newsletter__badge
{
   align-items: center;
   display: flex;
	background: #fff;
	border-radius: 999px;
   justify-content: center;
   height: 135px;
	margin: 0 auto 24px auto;
   width: 135px;
}

.newsletter__image
{
   height: auto;
   margin-left: -5px;
   width: 85%
}

.newsletter__form
{
   display: flex;
   flex-direction: column;
}

.newsletter__input, .newsletter__submit
{
   border-radius: 4px;
}

input.newsletter__input
{
   border: 0;
   padding: 16px 16px;
}

.newsletter__heading
{
   color: #fff;
   font-weight: bold;
   margin: 0;
   padding: 0;
}

.newsletter__text
{
   margin: 16px 0;
}

.newsletter__subscribe
{
   display: none;
}

.newsletter__subscribe--visible
{
   display: block;
}


.newsletter__submit
{
   background-color: #000;
   border: 0;
   color: #fff;
   cursor: pointer;
   font-weight: bold;
   margin-top: 8px;
   padding: 16px 32px;
   position: relative;
   width: 100%;
   transition: 150ms all ease-in;
}

.newsletter__submit:hover
{
   background: #fff;
   color: #b20b0a;
}

.newsletter__submit:disabled
{
   cursor: default;
}


@keyframes spinner 
{
   to { transform: rotate(360deg); }
}
 
.newsletter__submit--sending::before 
{
   animation: spinner .8s ease infinite;
   border: 2px solid transparent;
   border-bottom-color: #b01016;
   border-radius: 50%;
   border-top-color: #b01016;
   content: '';
   height: 1em;
   /* left: 50%; */
   margin-left: -.5em;
   position: absolute;
   right: 2em;
   width: 1em;                
}

.newsletter__success
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   left: 0;
   min-height: 256px;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 0;
   transition: visibility linear 0ms, all 3s;
   visibility: hidden;
}

.newsletter__success--visible
{
   visibility: visible;
   opacity: 1;
   position: static;
}

.newsletter__icon
{
   align-items: center;
   background-color: #fff;
   border: 8px solid #fff;
   border-radius: 999px;
   color: #b01016;
   display: flex;
   font-size: 48px;
   justify-content: center;
   height: 96px;
   margin: 16px auto 32px auto;
   width: 96px;
}