banner-style-opt-in-popup-styles.css

/* BEGIN BANNER STYLE POPUP (#620) STYLES */

/*Content Wrapper*/
#popmake-620 .pum-content {
    	text-align:center;
}
/*Popup Title Wrapper*/
#pum_popup_title_620 {
    	margin: 8px 0;
}
/*Form Wrapper ("No Thanks" not included)*/
#popmake-620 #nf {
    	display:inline-block;
}

/*Form field styles*/
#popmake-620 .nf-field {
	font-family: 'Montserrat', sans-serif;
}
/*Error on field styles*/
#popmake-620 .nf-error .ninja-forms-field {
    	background-color: #f08989;
    	border-color: #de6161;
	transition:ease-in-out .5s;
}
/*Submit Button*/
#popmake-620 .submit-wrap .ninja-forms-field {
    	border-color: transparent;
    	color: white;
	transition: ease-in-out .5s;
	width:100%;
    background-color:#9ABA27;
}
/*Submit Button: hover, focus*/
#popmake-620 .submit-wrap .ninja-forms-field:hover, #popmake-620 .submit-wrap .ninja-forms-field:focus {
    	background-color: #a8cb29;
}
/*Close "No Thanks" Text*/
#popmake-620 #close {
 	display:inline-block;
    	vertical-align:top;
    	padding:9px;
	font-family:'Monsterrat', sans-serif;
	font-size:14px;
	color:#5e5e5e;
	font-weight:600;
}

/*Unwanted margin if title is hidden in Ninja Forms*/
#popmake-620 .nf-form-title h3 {
    	margin: 0px;
}

/*Hide required text*/
#popmake-620 .nf-form-fields-required {
    	display: none;
}
/*Hide required fields*/
#popmake-620 .nf-after-field .nf-error-msg {
	display:none;
}
/*Field errors message*/
#popmake-620 .nf-error-field-errors {
	display:none;
}
/*Bottom margin of form fields to match the top gap of the popup*/
#popmake-620 .submit-container {
			margin-bottom:10px;
}
#popmake-620 .email-container {
			margin-bottom:10px;
}
#popmake-620 .textbox-container {
			margin-bottom:10px;
}

/* END BANNER STYLE POPUP (#620) STYLES */


/* BEGIN RESPONSIVE BANNER STYLE POPUP (#620) STYLES */

/*Keeps the form off the edge of the screen on smaller displays*/
@media screen and (max-width: 800px) {
	#popmake-620 .pum-content {
    		padding: 0 12px;
	}
}

/*Allows all elements to stack nicely without huge gaps*/
@media screen and (max-width: 772px) {
	#popmake-620 .submit-container {
			margin-bottom:0px;
	}
	#popmake-620 .email-container {
			margin-bottom:0px;
	}
	#popmake-620 .textbox-container {
			margin-bottom:0px;
	}
	#popmake-620 #close {
    	padding:0 9px 9px 9px;
	}
}

@media screen and (max-width: 600px) {
	
	/*Matches the Submit Button in the likeness of the form fields*/
	#popmake-620 .submit-wrap .ninja-forms-field {
			width:100%;
			line-height:0;
	}
	/*Sets the height of the form fields to a smaller value when everything is stacked so as to keep our popup at minimal height*/
	#popmake-620 .ninja-forms-field {
			height:25px;
	}
}

/*Because our Popup Title is quite long, we want to make sure it stays on one line no matter how the small the screen is - the following styles accomplish this*/
@media screen and (max-width: 565px) {
	#pum_popup_title_620 {
    		font-size:20px;
	}
}

@media screen and (max-width: 475px) {
	#pum_popup_title_620 {
    		font-size:16px;
			margin:0;
	}
	.nf-field-element .nf-element {
    	font-size: 12px;
	}
}

@media screen and (max-width: 425px) {
	.nf-field-element .nf-element {
    	font-size: 10px;
	}
}

@media screen and (max-width: 390px) {
	#pum_popup_title_620 {
    	font-size:14px;
	}
	.nf-field-element .nf-element {
    	font-size: 9px;
	}
}

@media screen and (max-width: 345px) {
	#pum_popup_title_620 {
    		font-size:12px;
	}
	.nf-field-element .nf-element {
    	font-size: 7px;
	}
}

/* END RESPONSIVE BANNER STYLE POPUP (#620) STYLES */


/* BEGIN THANK YOU POPUP (#646) STYLES */

/*Popup Title Wrapper*/
#popmake-646 .pum-title {
	margin:8px 0;	
}

/*Content Wrapper*/
#popmake-646 .pum-content {
	text-align:center;
	margin-bottom:16px;
}

/*Our "Stay awhile, and listen." Close Button*/
#popmake-646 .pum-close.popmake-close {
	color:white;
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	border:none;
	transition: ease-in-out .5s;
}

/*Close Button hover, active, and focus styles*/
#popmake-646 .pum-close.popmake-close:hover, #popmake-646 .pum-close.popmake-close:focus, #popmake-646 .pum-close.popmake-close:active {
	background-color:#a8cb29;
}

/* END THANK YOU POPUP (#646) STYLES */


/* BEGIN RESPONSIVE THANK YOU POPUP (#646) STYLES */

/*Keeps the form off the edge of the screen on smaller displays*/
@media screen and (max-width: 800px) {
	#popmake-646 .pum-content {
    		padding: 0 12px;
	}
}

/*Keeps our Close Button looking nice on small screens*/
@media screen and (max-width: 785px) {
	#popmake-646 #close {
			padding:0 0 9px 0;
	}
}

/*Because our Popup Title is semi-long, we want to make sure it stays on one line no matter how the small the screen is - the following styles accomplish this*/
@media screen and (max-width: 565px) {
	#pum_popup_title_646 {
    		font-size:20px;
	}
}

@media screen and (max-width: 475px) {
	#pum_popup_title_646 {
    		font-size:16px;
			margin:0;
	}
}

@media screen and (max-width: 390px) {
	#pum_popup_title_646 {
    		font-size:14px;
			line-height:20px;
	}
}

@media screen and (max-width: 345px) {
	#pum_popup_title_646 {
    		font-size:12px;
	}
}

/* END RESPONSIVE THANK YOU POPUP (#646) STYLES */