/* Variables */
:root {
	--col_white: #FFF;
	--col_black: #000;
	--text-color: #444;
	--border-radius: 4px;
	--brand-color: #e55039;
}


.newsletter_modal {
	background: var(--brand-color);
	color: var(--col_white);
	width: 60rem;
	border-radius: var(--border-radius);
	text-align: center;
	padding: 10rem 4rem 4rem 4rem;
	border: 2px solid black;	
	box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5);
	display: inline-block;//!!
}

.modal__icon {
		position: absolute;
		top: -3rem;
		left: 50%;
		margin-left: -165px;
		background: var(--brand-color);
		padding: 3rem 12rem 0 12rem;
		border-radius: 50%;
}

.modal__heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 2.6rem;
}

.modal p {
  font-size: 1.5rem;
}

.newsletter_email-box {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  margin-left: -20rem;
  width: 40rem;
}

.newsletter_email-box__input {
	display: inline-block;//!!
 
		color: lighten(var(--col_black), 20%);
		display: block;
		width: 100%;
		height: 4rem;
		border-radius: var(--border-radius);
		border: 1px solid #FFF;
		font-size: 1.4rem;
		padding: 1rem;
}

.newsletter_email-box__button {
  -webkit-appearance: none;
     -moz-appearance: none;
    
                appearance: none;
		border: none;
		background: transparent;
		font-size: 2rem;
		position: absolute;
		color: var(--brand-color);
		right: .8rem;
		top: .8rem;
		padding: 0;
		
		}

.newsletter_email-box__button:hover,
.newsletter_email-box__button:focus {
			color: darken(var(--brand-color), 20%);
}

	    

@media only screen and (max-width: 600px) {
	.newsletter_modal {
		width: 30rem;
			&__icon {
			margin-left: -105px;
			padding: 3rem 6rem 0 6rem;
			border-radius: 50%;
		}
	}
	
	.newsletter_email-box {
		margin-left: -12.5rem;
		width: 25rem;
	}
}