/* -------------------------
+ Author : Marcus Briggs
+ © Viral Effect LTD
------------------------- */

/* CORE */
html { width: 100%; height: 100%; font-size: 100%; background: white; }
body { width: 100%; height: 100%; }
#outer-wrapper { position:relative; padding:0; margin: 0 auto;  max-width: 600px; }
#inner-wrapper { float: left; width:100%; padding:100px 0; }

/* HEADER */
header { float: left; width: 100%; padding: 0 0 60px 0; }
header h1 { float: left; width: 100%; text-align: center; font-size: 30px; padding: 0 20px; }
header h1 img { width: 100%; max-width: 200px; }

/* BODY */
main { float: left; width: 100%; padding: 30px; background:white; }

.sec-title { float: left; width: 100%; padding: 0 0 30px 0; }
.sec-title h1 { float: left; width: 100%; text-align: center; font-size: 18px; padding: 0 0 5px 0; color:#000; text-transform:uppercase; font-weight: 600; }
.sec-title h2 { float: left; width: 100%; text-align: center; font-size: 18px; padding: 0 0 5px 0; color:#000; text-transform:uppercase; font-weight: 600; }
.sec-title p { float: left; width: 100%; text-align: center; font-size: 13px; padding: 0; color:#969696; }

.sec-body { float: left; width: 100%; padding: 0 0 30px 0; }
.sec-body p { float: left; width: 100%; text-align: left; font-size: 13px; padding: 0; color:#2d2d2d; line-height: 16px; }
.sec-body p a { color:black; font-weight: 600; }
.sec-body p.center { text-align: center; }

.sec-form { float: left; width: 100%; }
.sec-form .field-row { float: left; width: 100%; padding: 0 0 10px 0; }
.sec-form .field-row label { float: left; width: 100%; padding: 0 0 10px 0; font-size: 18px; color:#000; }
.sec-form .field-row input { float: left; width: 100%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 5px; border: 1px solid #C1C1C1; font-size:14px; color:#3A3A3A; }
.sec-form .field-row textarea { float: left; width: 100%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 5px; border: 1px solid #C1C1C1; font-size:14px; color:#3A3A3A; }
.sec-form .field-row select { float: left; width: 100%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 5px; border: 1px solid #C1C1C1; font-size:14px; color:#3A3A3A; }
.sec-form .field-row p { float: left; width: 100%; font-size: 13px; color:#575757; line-height: 18px; }

.sec-form .field-controls { float: left; width: 100%; padding: 10px 0 0 0; }
.sec-form .field-controls button { float: left; width: 100%; background:#323232; font-size:16px; border:none; border-radius: 5px; cursor:pointer; }
.sec-form .field-controls button span { float: left; width: 100%; padding: 20px 15px; color:white; text-transform:uppercase; font-weight: 600; }
.sec-form .field-controls .loading { float: left; width: 100%; padding: 20px 15px; font-size:16px; border-radius: 5px; text-align: center; background:#d7d7d7; color: #6c6c6c; }

.sec-form .field-footer { float: left; width: 100%; padding: 20px 0 0 0; font-size: 14px; }
.sec-form .field-footer a { color:black; font-weight: 600; }

.sec-form .field-alert .error { float: left; width: 100%; font-size: 13px; text-align:center; background: #d9534f; padding: 14px 12px; color: #ffe1e1; margin: 0 0 20px 0; border-radius: 5px; }
.sec-form .field-alert .error p { color:#ffe1e1; padding: 3px 0; line-height: 14px; }

.sec-form .field-row .star-wrapper { float: left; padding: 5px; border:1px solid #cecece; border-radius: 5px; background: #f9f9f9; }
.sec-form .field-row .star-wrapper li { float: left; font-size: 25px; cursor: pointer; }
.sec-form .field-row .star-wrapper li i { padding:3px; color:#c2c2c2; }
.sec-form .field-row .star-wrapper li.active i { color:gold; }

.sec-form .reset-success { float: left; width: 100%; }
.sec-form .reset-success p { float: left; width: 100%; text-align: center; background:#92ee92; color:#1b801b; padding:20px 0; border-radius: 6px;  }

.sec-footer { float: left; width: 100%;}
.sec-footer p { float: left; width: 100%; padding: 20px 0 0 0; font-size: 14px; }
.sec-footer p a { color:black;  font-weight: 600; }

.result { float: left; width: 100%; padding: 60px 20px; text-align: center; font-size: 16px; }

footer { float: left; width: 100%; padding: 30px; text-align: center; }
footer p { float: left; width: 100%; color:white; font-size: 12px; line-height: 1.5rem; }
footer p a { color:white; padding: 0 5px; }
footer p a:hover { text-decoration: underline; }

@media (max-width: 780px) {
	#outer-wrapper { width: 100%; }
	#inner-wrapper { padding: 50px 10px; }
    header { padding: 0 0 40px 0; }
    header h1 img { max-width: 80%; }
}