*,*::before, *::after { box-sizing: border-box; }
html { font:400 14px/1.65 'Open Sans', Arial, Helvetica, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
p,ul,h1,h2,h3,h4 {  margin: 0; padding: 0; }
li { display: block; }
a { text-decoration: none; }
img { max-width:100%; height: auto; border: 0; }

/* Typography */
.p-link, .p-link:hover { text-decoration: none; color:#00aeef }
.p-link { text-decoration: none; color:#0095ef }
.p-link:active, .p-link:visited { text-decoration: none }
.p-title { position:relative; font:300 16px/1.65 'Open Sans', 'Lato', sans-serif; }
.p-block-title { position:relative; font:300 35px 'Open Sans', 'Lato', sans-serif; margin-bottom:50px; }

/* Generic Layout */
body { margin:0; background-color:#280f64; }
.p-homepage { color:#dddfff }
.p-report-view { min-height:100vh; }
.p-wrapper { margin:0 auto; max-width:980px; text-align: center }
.p-block { float:left; position:relative; width:100%; }

/* Controls */
.p-input, .p-textarea { border:1px solid #ccc; border-radius:3px; padding:10px 20px; width:100%; margin:10px 0; font-size:14px; font-family:inherit; }

.p-button { display:inline-block; padding:10px 25px; border:none; background-color:#0095ef; border-radius:5px; font-family:inherit; font-weight:600; font-size:14px; text-transform:uppercase; color:#fff; box-shadow:0 15px 30px rgba(0,0,0,.15); transition: background .3s; }
.p-button:focus {outline:0;}
.p-button:hover { color:#fff; background-color:#00aeef }
.p-button:active { box-shadow:inset 0 -1px 3px rgba(0,0,0,.1);  }
.p-button.is-animated { z-index: 0; position:relative; transition:all .3s; overflow:hidden; }
.p-button.is-animated:hover { background-color:transparent; border-color:#fff;  }
.p-button.is-animated::after { content: ''; z-index: -1; position: absolute; top: 0; width: 0; left: -30px; height: 100%; background-color: #00aeef; transition: width .35s; transform: skewX(45deg); }
.p-button.is-animated:hover::after { width:130% }

.p-facebook { background-color:#3B5998; }
.p-linkedin { background-color:#0077B5; }
.p-twitter { background-color:#3b88c3; }
.p-google { background-color:#d73d32; }

/* Header */
.p-header { z-index:5; position:fixed; padding:20px 0; margin-bottom:20px; transition:margin .5s }
.p-header.is-sticky { background-color:#fff; box-shadow:0 1px 5px rgba(0,0,0,.25)}
.is-sticky .p-logo .p-text { color:#31334e; text-shadow:none }
.is-sticky .p-nav .p-link { color:#555777; }
.is-sticky .p-nav .p-link:hover { color:#31334e; }
.is-sticky .p-nav .p-button { background-color:#0095ef; border-color:transparent }

.p-logo { float:left; display:block; height:32px;line-height:32px; margin-left:30px;font-size:16px;font-weight:700;text-transform:uppercase}
.p-logo .p-image {float:left;width:32px;height:32px; margin-right:10px; background-image:url('https://pagelocity.com/assets/images/logo_shape.svg'), none;background-size:32px 32px; background-repeat:no-repeat;background-clip:border-box}
.p-logo .p-text {float:left;display:block;height:32px; color:#fff; text-shadow:0 1px 0 #000 }

.p-nav { float:right; margin-right:20px; list-style: none; padding-left:0; }
.p-nav .p-item { float:left; padding:5px; font-size:14px }
.p-nav .p-link { color:#e5f8ff; padding:5px 10px; text-transform:uppercase; font-weight:600; }
.p-nav .p-link:hover { color:#fff; }
.p-nav .p-button { padding:3px 15px 2px; margin-top:-5px; cursor:pointer; border-radius:30px; border:1px solid #0095ef; box-shadow:none  }
.p-nav .p-app-hint { display:none; position:absolute; top:31px; left:-40%; width:200px; padding:2px 0 3px; text-align: center; background-color:#fff; color:#33374d; border-radius:3px; font-size:11px; text-shadow: none; transition: all .3s }
.p-nav .p-button:hover .p-app-hint { display: inline-block; animation:hint 350ms ease-in-out; }
@keyframes hint {  0% { transform: scale(.3); } 100% { transform: scale(1); } }
.p-act { position:relative }

/* Tier - Conversion */
.p-conversion { position:relative; padding:140px 0 0; background:#31334e url('https://pagelocity.com/assets/images/pagelocity-hero-image.jpg') no-repeat center center;  background-size:cover; color:#444777;  }
.p-conversion .p-overlay { position:absolute; top:0; right:0; bottom:0; left:0; background-image:radial-gradient(circle at 50% -30%, rgba(0, 174, 239, .85), rgba(40, 15, 100, 0.95) 95%);   }
.p-conversion .p-wrapper { position:relative }
.p-conversion .p-form { position:relative; width:80%; margin:50px auto 200px; padding:0 200px 0 0; box-shadow:0 3px 5px rgba(0,0,0,.15) }
.p-conversion .p-message { position:absolute; display:none; top:75px; width:100%; padding:8px 10px; background-color:rgba(0,176,240,0.75); color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.5); border-radius:5px;  }
.p-conversion .p-button { float:right; width:200px; height:60px; margin:0 -200px 0 0; border-radius:0 6px 6px 0; background-color:#21af00; font-size:20px;  }
.p-conversion .p-input { margin:0; height:60px; border-radius:6px 0 0 6px; border:none;}
.p-question {  max-width:90%; margin:90px auto 20px; font:400 50px 'Racing Sans One', 'Open Sans', cursive; text-align: center; line-height:1.3; color:#fff; text-shadow: 0 3px 8px rgba(0,0,0,.5);}
.p-hint { font-size:16px; font-weight:400; color:#fff }

/* Tier - Sign Up */
.p-signup { padding:80px 0; background-color:#ecf0f5; }
.p-signup .p-block-title { color:#31334e }
.p-signup .p-info { width:80%; margin:5px auto 10px; color:#555777 }
.p-signup .p-button { margin:20px 0; border-radius:30px; }

/* Tier - Authenticate */
.p-authenticate { position:fixed; top:0; right:0; bottom:0; left:0; z-index:10; padding:60px 0; text-align:center; background-color:rgba(51,55,77,.99); }
.p-authenticate.is-hidden { display:none; }
.p-authenticate .p-logo, .p-authenticate .p-image { float:none; margin:55px auto; }
.p-authenticate .p-info { margin:5px 0 10px; color:#fff; transition:all 3s }
.p-authenticate .p-button { position:relative; margin:20px 5px; border-radius:30px; }
.p-authenticate .p-close { position:absolute; top:20px; left:20px; margin:0 }
.p-authenticate .p-block-title { color:#fff }
.p-authenticate .is-loading { background-color:#555777; }

/* Tier - Stats */
.p-stats { padding:60px 0; background-image:linear-gradient(transparent, rgba(0,0,0,.25));  color:#fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.p-stats .p-brick { float:left; width:33.3333%; padding:0 40px; }
.p-stats .p-value { height:60px; font-size:40px; font-weight:600; }
.p-stats .p-label { font-size:16px; font-weight: 400; text-transform: uppercase;  }

/* Tier - Features */
.p-features { padding:60px 0; background-color:#fff; }
.p-features .p-block-title { color:#31334e }
.p-features .p-brick { float:left; position:relative; width:50%; height:220px; padding:20px 20px 20px 100px; }
.p-features .p-icon { float:left; width:80px; height:80px; line-height:85px; margin:0 10px 0 -100px; font-size:48px; color:#0095ef; }
.p-features .p-title { margin-bottom:10px; font-size:16px; font-weight:600; color:#31334e; text-align: left }
.p-features .p-description { color:#555777; text-align:left;  }

/* Tier - Benefits */
.p-benefits { z-index: 1; padding:60px 0 0; background-color:#fff;  }
.p-benefits .p-wrapper { position:relative }
.p-benefits .p-block-title { color:#31334e; }
.p-benefits .p-brick { float:left; width:33.333%; height:240px; padding:20px; }
.p-web-app { padding: 40px 30px; border: 1px solid #e5e5e5; border-radius: 20px; margin: 30px -30px -60px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.1), inset 0 -3px 6px rgba(0,0,0,.2); box-sizing:content-box }
.p-benefits .p-info{ color:#555777; text-align:left }
.p-benefits .p-title { margin-bottom:40px; font-size:16px; font-weight:600; color:#31334e; text-align:left }

/* Tier - Extension */
.p-extension { padding:60px 0; background-color:#ecf0f5; }
.p-extension .p-brick { width:80%; margin:0 auto;  }
.p-extension .p-block-title { color:#31334e }
.p-extension .p-info { margin-bottom:30px; color:#555777  }
.p-extension .p-image { float:left; width:30px; padding:2px; border-radius:50%; margin:-4px 10px -10px -40px; background-color:#fff }
.p-extension .p-button { padding-left:50px; border-radius:30px; }
.p-extension .p-extra { display:block; font-weight:700; color:#555777; }

/* Tier - Subscribe */
.p-subscribe { float:right }
.p-subscribe .p-button { width:30%; margin:0; border-radius:0 3px 3px 0; }
.p-subscribe .p-input { width:70%; margin:0; font-size:14px; border:none; border-radius:3px 0 0 3px; }
.p-mailchimp { float:right; width:90%; margin-top:20px }
.p-hidden-input { position: absolute; left: -5000px; }

/* Tier - New Account */
.p-new-account { padding:120px 0 60px; background-color:#280f64; background-image:radial-gradient(circle at 50% 80%, rgba(0, 174, 239, .85), rgba(40, 15, 100, 0.95) 95%); color:#fff; }
.p-new-account .p-block-title { margin-bottom: 20px }
.p-new-account .p-info { margin-bottom: 45px }
.p-new-account .p-button { margin:20px 0; border-radius:30px; color:#0095ef; background-color:#fff; }

/* Tier - Footer */
.p-footer { padding:60px 0; background-color:#280f64; background-image:linear-gradient(0deg, rgba(0, 174, 239, .35), rgba(40, 15, 100, 0.95) 95%); color:#fff; }
.p-footer .p-brick { float:left; width:50%; text-align:left }
.p-footer .p-title { font-size:14px; font-weight: 400; margin:0 }
.p-footer .p-title::after { display:none }
.p-social { float:left; width:100%; margin-top:20px }
.p-social .p-item { width:auto; display:inline-block; text-align:center }
.p-social .p-button { width:80px; padding:3px 0; margin:5px 10px 0 0; font-size:13px; box-shadow:none; }

.p-report-view .p-footer { margin-top:10px; }

/* Contact Form */
.p-contactpage { background-color:#31334e;}
.p-contact { height:70vh; padding:60px 0; background-color:#f5f5ff;}
.p-contact .p-title { color:#31334e }
.p-contact .p-form { width:80%; margin:0 10%;}
.p-contact .p-textarea { height:200px }
.p-contact-info { margin:0 0 40px; }
.p-contact-info .p-info { font-weight:400; color:#31334e; }

/* Privacy */
.p-privacypage { background-color:#31334e;}
.p-privacy { height:70vh; padding:60px 0; background-color:#f5f5ff;}
.p-privacy .p-title { color:#31334e }

/* Email - Twitter */
.p-email { padding:60px 0; background-color:#fff }

/* Email - Twitter */
.p-login { padding:60px 0 300px; text-align:center; background-color:#fff }
.p-login .p-button { width:40%; margin:5px 10px; border-radius:30px; }
.p-login .p-info { color:#606177; margin-bottom:60px }

/* About Page */
.p-intro, .p-started { padding:60px 0; }
.p-intro .p-info { max-width:80%; margin:0 auto; font-size:20px; font-weight:300; text-align:center; color:#e5f8ff }
.p-intro .p-block-title, .p-started .p-title { text-align:center; color:#fff }
.p-started .p-title::after { display:none }
.p-started { background-color:#fff }
.p-started .p-info { float:right; font-size:14px; width:80%; margin:15px 0; color:#606177 }
.p-intro .p-wrapper, .p-started .p-wrapper { text-align:left; }
.p-2013, .p-2014, .p-2015 { float:left; clear:left; width:100px; height: 100px; margin:20px 0 60px 0; line-height: 100px; border-radius: 50%; text-align: center; font-size:18px; font-weight: 700; color:#679436; background-color:#e5f8ff }


/* Helpers */
.is-hidden { display:none }

/* Loading Indicator */
@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

.p-spinner { position:absolute; top:150px; left:50%; margin-right:-12px; width:24px; height:24px; border-width:5px; border-style:solid; border-color:rgba(255,255,255,.1) #679436 rgba(255,255,255,.2) #fff; border-radius:15px; animation:spin .5s infinite; animation-iteration-count: infinite }
.p-spinner.stop { animation:none; }


/* Media Queries */
@media (max-width: 800px) {
	.p-logo { margin-left:15px }
	.p-logo .p-text { display:none }
	.p-nav { margin-right:0 }
	.p-nav .p-item { padding:0 }
	.p-nav .p-item:last-child { display:none }

	.p-conversion { padding-top:30px; }
	.p-conversion .p-wrapper { margin-top:60px; }
	.p-conversion .p-form { padding:0; margin:30px auto 200px }
	.p-conversion .p-hint { font-size:16px; }
	.p-conversion .p-input { border-radius:6px; }
	.p-conversion .p-button { width:100%; margin:15px 0; font-size:16px; border-radius:6px; }
	.p-conversion .p-question { font-size:24px }


	.p-stats .p-brick { padding: 0 }

	.p-features .p-brick { width:100%; height:auto; padding:10px 40px }
	.p-features .p-icon { float:none; margin:0; }
	.p-features .p-title { text-align: center }
	.p-features .p-title::after { border:none }
	.p-features .p-description { text-align: center }

	.p-benefits .p-brick { width:100%; border:none }
	.p-web-app { padding: 0; border: none; border-radius: 0; margin: 0 0 -60px; background: #1a2f3e; box-shadow: none;}


	.p-mailchimp { width:100% }
	.p-subscribe .p-brick { width:90% }
	.p-question { font-size:32px; margin-top:0 }
	.p-extension { display:none }
	.p-chrome-extension .p-info { width:100% }

	.p-authenticate { padding:20px }
	.p-authenticate .p-logo { display:none }
	.p-authenticate .p-title { margin:10px 0 }
	.p-authenticate .p-button { margin:10px 5px }
	.p-authenticate .p-close { position:static; background-color:#31334e; box-shadow:none }

	.p-footer .p-brick { float:none; width:80%; margin:0 auto; }
	.p-subscribe .p-button { padding:10px 0 }
	.p-social .p-button { margin:5px 0 0; border-radius:0 }
}
@media (min-width: 801px) and (max-width:1919px) {
	.p-homepage .p-form { margin:30px auto 240px }
}

@media (min-width: 1920px) {
	.p-wrapper { max-width:1200px;}


}