/* 
My Local Pocket Website - Base Style Sheet  
@author:  Brandrally <www.brandrally.com.au>

*/

/* Typefaces
============================================================================ 

Fat Frank
font-family: fatfrank, sans-serif, arial black, sans-serif; font-weight: 400; font-style: normal;

Neuzeit Grotesk Regular
font-family: neuzeit-grotesk, sans-serif; font-weight: 400; font-style: normal;

Neuzeit Grotesk Bold
font-family: neuzeit-grotesk, sans-serif; font-weight: 700; font-style: normal;

*/

/* Base Elements
============================================================================ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight:normal;  font-style:normal; font-family: inherit; vertical-align: baseline; }

html { line-height: 1.15; -webkit-text-size-adjust: 100%;  }
body { margin: 0; line-height: 1; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; margin-bottom: 25px; -webkit-box-sizing: content-box;  box-sizing: content-box; height: 0;  overflow: visible;  }


pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b,strong {font-style: normal; font-weight: 700; }
i,em {}
code,
kbd,
samp { font-family: monospace, monospace;  font-size: 1em; }
small { font-size: 80%; }
sub,
sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup {  top: -0.5em; }
img { border-style: none; }
button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button,
input { overflow: visible; }
button,
select { text-transform: none;
}
h1, h2, h3, h4, h5, h6 {font-family: fatfrank, sans-serif, arial black, sans-serif; font-weight: 400; font-style: normal;}

button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}

fieldset { padding: 0.35em 0.75em 0.625em; }
legend { -webkit-box-sizing: border-box;  box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"],
[type="radio"] { -webkit-box-sizing: border-box;  box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template {display: none; }
[hidden] { display: none; }

html {
font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box;  box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit;  box-sizing: inherit; }

body { color: #000000; font-family: neuzeit-grotesk, sans-serif; font-weight: 400; font-style: normal; line-height: 1.5; font-size: 16px; }

a {text-decoration: underline; color:#000;}
a:hover {color:#22d4dc;} 

/* Clearfix
============================================================================ */
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
.CF { display:block; }


img {display:block; border:0;}

.fl-l {float:left; }
.fl-r {float:right; }
.dis-n {display:none;}
.dis-b {display:block;}

.content {margin:0 auto; max-width: 980px;}


/* Header
============================================================================ */
header {display:block; height: 87px; margin-top:10px; background: url(/assets/images/header-background-pattern.png) no-repeat top left 45px; background-size: 1034px 87px;}

.mlp-emblem {padding: 4px 0 0 45px;}
    .mlp-emblem img {height:80px; width: 74px;}
.mlp-wording {padding: 20px 0 0 15px;} 
    .mlp-wording img {width: 240px; height: 51px;}

.sprite {background: url(/assets/images/sprite.png) no-repeat; background-size: 400px 400px;}
    .mlp-brand {background-position: 0 0;}

@media all and (max-width: 980px) {
header { background: none; margin-top:10px;}
.mlp-emblem {padding: 4px 0 0 20px;}

}


main {margin-top: 10px;  }

/* Overview
============================================================================ */

.overview { min-height: 265px; padding: 0; background: url(/assets/images/overview-background.png) no-repeat bottom right #5964ff; background-size: 380px 258px; -moz-border-radius: 0 0 20px 20px  ; -webkit-border-radius: 0 0 20px 20px 0 ; border-radius: 0 0 20px 20px  ;}
h1 {font-size: 38px; line-height: 42px; color:#fff;padding: 30px 0 0 61px;  margin:0;}
p {padding:0 0 12px 0; margin:0;  font-size: 18px; line-height: 25px; color:#29174e;}
.overview-content {padding: 10px 360px 5px 65px; min-height: 100px; display:block;}
    .overview-content p { color:#fff;  }
.overview-bio {padding: 0 0 0 50px; display:block; }
    .overview-bio a {float:left; background:#4450f2; color:#fff; border: 1px solid #4450f2; padding: 10px 20px 10px 20px; font-size: 18px; line-height: 23px; text-decoration: none; display:block; -moz-border-radius: 40px  ; -webkit-border-radius: 40px 0 ; border-radius: 40px  ;}
    .overview-bio a:hover {background:#1e2ad7; border: 1px solid #1e2ad7; color:#fff;}

@media all and (max-width: 980px) {
.overview { min-height: 0; padding-bottom: 270px; background-position: bottom right -15px;}
h1 {padding: 30px 30px 0 30px; font-size: 30px; line-height:26px;}
.overview-content {padding: 10px 30px 5px 30px; min-height: 10px;}
.overview-bio { padding:0 15px 0 15px; }
    .overview-bio a {float:none; display:block;  padding: 10px 25px 10px 25px; }
}

/* Paul and Sara
============================================================================ */

.paulandsara { display:none; margin-top: 10px; padding: 40px 65px 50px 65px; background:#d7eafc; -moz-border-radius: 20px  ; -webkit-border-radius: 20px ; border-radius: 20px  ; }
h2 {font-size: 23px; line-height: 30px; padding: 0 0 16px 0; margin:0; color: #29174e}
h3 {font-size: 18px; line-height: 20px ; padding: 0 0 10px 0; margin:0; color:#29174e;}

@media all and (max-width: 980px) {
.paulandsara {padding: 30px 30px 35px 30px;}
}

.pands {padding:5px 0 10px 0; display:block;}
.pands img {width: 100%;}

/* Info
============================================================================ */
.info {margin-top: 25px; padding: 0 65px 25px 65px; border-bottom: 2px solid #f3f3ef;}
@media all and (max-width: 980px) {
.info {padding: 0 30px 25px 30px;}
}

/* Form Information
============================================================================ */

.bold-text {font-weight: 700;}
input[type="text"], input[type="tel"], textarea {border: 1px solid #e8e9ea; background:#f3f3ef; font-size: 18px; line-height: 22px; display:block; padding: 10px 15px ; width: 100%;  -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -webkit-appearance: none; box-sizing: border-box;}
.note { background-position: -280px 0; min-height: 24px; margin-top: 3px; padding: 3px 0 0 32px; font-size: 14px; line-height: 18px; display:block;}
hr {border-top: 4px dashed #2080f6; border-bottom:0; background:0; padding:0; margin:15px 0 25px 0; display:block;}
    

.form-information {margin-top: 25px; padding : 0 65px 25px 65px; display:block;}
    .form-field {display:block; padding-bottom: 8px;}
    .form-field span {display:block;  font-size: 18px; padding-bottom:2px;}
    .form-field label {float: left; margin-right: 10px;}
    .form-wrap {display: flex; }
.form h3 {padding: 0 0 5px 0;}    
span.type-define, span.type-define-alt {display:inline;}
@media all and (max-width: 980px) {
.form-information {padding:0 30px 25px 30px;}
.form-field label {float: none; display:block; }
}

.characters {background: #4cd1fc; color:#fff; font-size: 14px; line-height: 18px; min-height: 24px; margin-top:3px; padding: 2px 5px 0 5px; display:block; float:left; }


/* Instagram
============================================================================ */
    .icons {padding: 0 0 2px 0; display:block; }
    .icon {padding: 0 8px 0 0 ; float:left;}
    .handle {padding-top: 4px;}
    .icon-instagram {background-position: -36px -55px  ; width: 36px; height: 36px;}
    .icon-facebook {background-position: 0 -55px  ; width: 36px; height: 36px;}

/* Social Grid
============================================================================ */

    .social {display:block; padding-bottom: 10px;}
    .social-grid {display:block; width: 50%; float:left;}
        .numeral {width: 25px; padding-top: 8px; }
        .first { display:block; width: 100%; padding-right:8px; }
        .second {background: #ffffff !important;}
     @media all and (max-width: 980px) {
    .social {display:block;}
    .social-grid {display:flex; width: 100%; float:none;}
        .numeral {}
        .first { padding-right:0;}
        .second {margin-left: 25px; margin-top:5px;}

     }

    .form-submit {background:#4450f2; font-size: 18px; font-weight:700; color:#fff; border: 0; padding: 15px 80px; margin-top: 10px; -moz-border-radius: 20px  ; -webkit-border-radius: 20px 0 ; border-radius: 20px  ; }
    .form-submit:hover {background: #29174e; }

/* Footer
============================================================================ */

footer {background: #22c5fc; font-size: 18px; line-height: 25px;  max-width: 980px; padding:30px 65px; margin:0 0 25px 0 auto; color:#fff; -moz-border-radius: 20px  ; -webkit-border-radius: 20px 0 ; border-radius: 20px  ; }
@media all and (max-width: 980px) {
footer {padding: 25px 30px;}
}

#feature label.error, label.error {  font-size: 18px; line-height: 22px; padding: 8px 10px 14px 32px;  background: #02c5ce; color: #fff; display:block; width: 100%;}
#feature div.error { display: none; }
#feature input:focus { border-left: 5px solid #22c5fc; background: #fff; }
#feature input.error { border: 1px solid #d4d5d7; background: #fff; border-left: 5px solid #ff515f; }