/* #####################################################################################

	CUISINART - SUBSCRIBE FOOTER FORM : STYLE
	build		08/17/2022
	version     v20220818.2-cr

######################################################################################## */



/* -------------------------------------
	DEFAULT GLOBAL - colors
---------------------------------------- 
	white       #FFFFFF
	black       #000000
	md grey     #4A4A4A
    green       #6D8D24
*/



/* -------------------------------------
	DEFAULT GLOBAL - fonts
---------------------------------------- 
	Open Sans (Google)              300,400,600,700,800
    Open Sans Condensed (Google)    300
	Arial                           400,700
	[add more here]
*/



/* -------------------------------------
	DEFAULT GLOBAL - reset (do not edit)
---------------------------------------- */ 
html {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
body {margin:0; font:16px/1 sans-serif; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;}
	/* box-sizing reset */
html {box-sizing:border-box;}
*, *:before, *:after {box-sizing:inherit;}
	/* permanent vertical scroll bar */
html {overflow-y:scroll;}
h1, h2, h3, h4, p, blockquote, figure, ol, ul {margin:0; padding:0;}
main, li {display:block;}
h1, h2, h3, h4 {font-size:inherit; font-weight:inherit;}
strong {font-weight:bold;}
a, button {color:inherit;}
a {text-decoration:none;}
button {overflow:visible; border:0; font:inherit; -webkit-font-smoothing:inherit; letter-spacing:inherit; background:none; cursor:pointer;}
::-moz-focus-inner {padding:0; border:0;}
:focus {outline:0;}
	/* images */
img {max-width:100%; height:auto; border:0;}
	/* forms */
select, input {border:0; outline:0;}
textarea {border:none; overflow:auto; outline:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; resize:none; line-height:inherit;}
textarea:focus, input:focus {outline:none;}
*:focus {outline:none;}
	/* tables */
table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
table {border-collapse:collapse; border-spacing:0;}
	/* ios */
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox {-webkit-appearance:none; border-radius:0;}
	/* reset all font-sizes to 0 (helps inline-block) */
body {font-size:0;}
	/* clear x from IE inputs */
input[type="text"]::-ms-clear {display:none;}
	/* clear default select style (gc/ie/ff) */
select::-ms-expand {display:none;}
select {-webkit-appearance:none; -moz-appearance:none; appearance:none;}



/* -------------------------------------
	DEFAULT GLOBAL - pages (edit this)
---------------------------------------- */ 
	/* main alignment/background */
body {text-align:left; background:#EDEDED;}
	/* main font styling */
body, input, select, checkbox, textarea {font-family:Arial, sans-serif; font-weight:400; color:#4A4A4A; line-height:1.5;}
	/* placeholder */
		/* Safari, Google Chrome, Konqueror */
::-webkit-input-placeholder {font-family:"Open Sans", Arial, sans-serif; color:#4A4A4A; font-size:18px; line-height:inherit; font-style:normal; font-weight:400;}
		/* Firefox 18- line-height = input height */
:-moz-placeholder {font-family:"Open Sans", Arial, sans-serif; color:#4A4A4A; font-size:18px; line-height:56px; font-style:normal; font-weight:400;}
		/* Firefox 19+ line-height = input height */ 
::-moz-placeholder {font-family:"Open Sans", Arial, sans-serif; color:#4A4A4A; font-size:18px; line-height:56px; font-style:normal; font-weight:400;}
		/* IE */
:-ms-input-placeholder {font-family:"Open Sans", Arial, sans-serif; color:#4A4A4A; font-size:18px; line-height:inherit; font-style:normal; font-weight:400;}
	/* sup */
sup {vertical-align:top; position:relative; top:0px; font-size:11px; left:1px; font-weight:400}
	/* @media print {} */
.printHide {display:none;}
.printShow {display:inline-block;}
/* loading overlay */
/* #bodyOverlay {width:100%; height:100%; background:#FFFFFF; position:fixed; left:0; top:0; opacity:1; z-index:600;} */


/* -------------------------------------
	CONTENT
---------------------------------------- */ 
.content {max-width:100%; margin:0px auto; padding:0px 0px;}


/* -------------------------------------
	SECTION
---------------------------------------- */ 
section:nth-child(1) {width:100%; margin:0px 0 0 0;}
section {width:100%; margin:30px 0 0 0;}

/* HERO */
.heroContainer {width:100%; text-align:center; margin:0px 0 0 0;}
.hero {width:100%; margin:0 auto;}
.hero img {width:100%;}

/* HEADLINE */
.headlineContainer {width:100%; text-align:center; margin:20px 0 0 0; padding:0 40px;}
.headline {font-size:36px; text-transform:capitalize; color:#34BBDB; font-weight:500;}

/* TITLE TEXT CONTAINER */
.titleTextContainer {height:56px; background:#FFFFFF; display:table-cell; vertical-align:middle;}

/* TITLE */
.titleContainer {width:100%; text-align:center; margin:0px auto 0 auto; padding:0px 0 0 0px;}
.title {font-size:16px; font-weight:bold;}

/* TEXT */
.textContainer {width:100%; text-align:center; margin:0px auto; padding:0 0px; background:#FFFFFF; display:block; position:relative;}
.text {font-size:14px; text-align:center; width:100%; font-weight:normal;}
.text a {color:#4A4A4A; font-weight:500;}
.text a:hover {border-bottom:1px solid #4A4A4A;}

/* BUTTONS */
.buttonContainer {margin:0px auto 0 auto; display:inline-block; text-align:center; padding:0 0px; position:relative; width:187px;}
.button {height:56px; text-align:center; color:#FFFFFF; font-weight:700; text-transform:uppercase; font-size:18px; cursor:pointer; background:#6D8D24; margin:0 auto; border:1px solid transparent; padding:10px 20px 12px 20px; display:block; border-radius:0px 5px 5px 0px; position:relative; vertical-align:middle; font-family:'Open Sans Condensed', 'Open Sans', Arial, sans-serif; letter-spacing:1px; width:100%;}
.button:hover {background:#6C6C6C; color:#FFFFFF; border-color:transparent;}


/* -------------------------------------
	FORM
---------------------------------------- */ 
.formContainer {margin:0px auto 0 auto; display:block; text-align:center; padding:0 0px;}
form {max-width:100%; padding:0px 0px 0px 0px; margin:0 auto;}
.formHeadline {font-size:36px; text-transform:capitalize; color:#34BBDB; font-weight:600;}
.formTitle {font-size:24px; text-transform:capitalize; font-weight:600; margin:10px 0 0 0;}
.formText {font-size:14px;}
.formField {width:calc(100% - 0px); position:relative; margin:25px 0 0 0; display:inline-block; vertical-align:top;}
#form .formFieldsContainer:nth-child(1) .formField {width:calc(100% - 0px); position:relative; margin:0px 0 0 0; display:inline-block; vertical-align:top;}
.formFieldsContainer {margin:0px auto 0 auto; display:inline-block; width:calc(100% - 187px); vertical-align:top;}
.formInputText {position:relative; display:inline-block; margin:0px 0 0 0; width:100%;}

/* LABELS */
label {width:100%; font-size:16px; margin:0px auto 0 auto; display:block; font-weight:600;}

/* INPUT TEXT */
input[type="text"] {width:calc(100% - 0px); padding:0 25px 0 55px; border:0px solid #999999; color:#000000; height:56px; margin:0px 0 0 0; font-size:18px; font-family:'Open Sans', Arial, sans-serif;}

/* REQUIRED */
.required {color:#FF1212; font-size:14px; margin:0 0px 0 2px;}

/* FIELD ICONS */
.fieldIcon {font-family:"Font Awesome 5 Free"; font-weight:500; font-size:24px; margin:0 0 0 0px; color:#6D8D24 !important; position:absolute; top:50%; transform:translateY(-50%); left:20px;}
.fieldIcon.email::before {content:"\f0e0";}
.fieldIcon.default::before {content:"\f45c"; font-weight:600;}
.fieldIcon.user::before {content:"\f007";}
.fieldIcon.company::before {content:"\f1ad";}

/* FIELD PASS/FAIL ICON */
.fieldPass::after {pointer-events:none; font-family:"Font Awesome 5 Free"; display:inline-block; content:"\f058"; margin:0 0px 0 0px; color:#00AA55; font-size:15px; font-weight:400; position:absolute; right:5px; top:50%; transform:translateY(-50%);}
.fieldFail::after {pointer-events:none; font-family:"Font Awesome 5 Free"; display:inline-block; content:"\f06a"; margin:0 0px 0 0px; color:#EE2222; font-size:15px; font-weight:600; position:absolute; right:5px; top:50%; transform:translateY(-50%);}
.fieldFail > input[type="text"] {border-color:#EE2222 !important; background:rgba(238,34,34,0.05) !important;}
.fieldFail > .formTextarea > textarea {border-color:#EE2222 !important; background:rgba(238,34,34,0.05) !important;}
.fieldFail > .formSelect > select {border-color:#EE2222 !important; background:rgba(238,34,34,0.05) !important;}
.formInputCheckboxContainer.fieldFail > .formInputCheckboxGroup > .formInputCheckbox > input[type="checkbox"] + label {border-color:#EE2222 !important; background:rgba(238,34,34,0.05) !important;}
.formInputRadioContainer.fieldFail > .formInputRadio > input[type="radio"] + label {border-color:#EE2222 !important; background:rgba(238,34,34,0.05) !important;}

/* FIELD FAIL TEXT */
.fieldFailMessage {position:absolute; color:#EE2222; right:5px; font-size:10px; top:2px; opacity:1;}

/* WARNINGS */
	/* email */
.emailWarningText {padding:7px 20px; position:absolute; margin:0px auto; box-sizing:border-box; background-color:#0099CC; box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); line-height:20px; font-size:12px; color:#FFFFFF; top:-30px; left:20px; text-align:left; z-index:500; /*border:1px solid #0181AC;*/ opacity:0; pointer-events:none;}
.emailWarningText::after {content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight:700; font-size:14px; margin:0 0 0 5px; color:#FFFFFF; position:relative; top:1px;}
	/* disable button */
.disabled {opacity:0.5 !important; cursor:not-allowed !important; pointer-events:none;}
.button.disabled:hover {opacity:0.5 !important; cursor:not-allowed !important; background:#00AA55 !important;}
	/* submit warning */
.submitWarning {position:absolute; font-size:10px; color:#EE2222; top:2px; opacity:1; left:50%; transform:translateX(-50%); white-space:nowrap; visibility:hidden;}
	/* submit failed */
.submitFailure {position:absolute; font-size:13px; color:#FFFFFF; top:0px; opacity:1; left:50%; transform:translateX(-50%); padding:15px 10px; background:rgba(238,34,34,0.70); /*border:1px solid #EE2222;*/ border-radius:0px 5px 5px 0px; /*white-space:nowrap;*/ width:187px; line-height:1; height:56px; display:none;}
	/* submit failed close x */
.submitFailureClose {position:absolute; top:1px; right:3px; cursor:pointer; width:10px; height:10px;}
.submitFailureX::before, .submitFailureX::after {content:""; position:absolute; width:10px; height:2px; background:#FFFFFF; top:6px;}
.submitFailureX::before {transform:rotate(45deg); left:0px;}
.submitFailureX::after {transform:rotate(-45deg); right:0px;}
.submitFailureClose:hover .submitFailureX::before, .submitFailureClose:hover .submitFailureX::after {background-color:#4A4A4A; }




/* #####################################
	MEDIA QUERIES
######################################## */
@media only screen and (max-width:1000px) {

}

@media only screen and (max-width:512px) {
    .formFieldsContainer, .buttonContainer {display:block; width:100%;}
    .buttonContainer {margin:15px auto 0px auto; height:50px;}
    .button {border-radius:5px; height:50px; font-size:16px;}
    /* placeholders */
        /* Safari, Google Chrome, Konqueror */
        ::-webkit-input-placeholder {font-size:14px; line-height:inherit;}
        /* Firefox 18- line-height = input height */
        :-moz-placeholder {font-size:14px; line-height:42px;}
        /* Firefox 19+ line-height = input height */ 
        ::-moz-placeholder {font-size:14px; line-height:42px;}
        /* IE */
        :-ms-input-placeholder {font-size:14px; line-height:inherit;}
    .fieldIcon {font-size:16px; left:10px;}
    input[type="text"] {height:42px; padding:0px 25px 0px 35px; font-size:14px;}
    .submitFailure {height:50px; border-radius:5px; width:100%;}
    .fieldFailMessage {top:-1px;}
    .submitWarning {top:-1px;}
    .titleTextContainer {height:107px;}

}


@media only screen and (max-width:400px) {
    
}









