/*
Theme Name: Perfect Landing Page
Theme URI: perfecthq.co
Author: PerfectHQ, LLC
Description: A custom theme design and build for Perfect by Perfect.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


@import './css/bootstrap.min.css';
@import './css/bootstrap-theme.css';
@import url('https://fonts.googleapis.com/css?family=Nunito');

body.blog, body.single-post, body.archive {background: #F9F9F9}
p {line-height: 28px; font-size: 14px; color:#484749; font-family: 'Nunito', sans-serif; font-weight: 300;}
a {color:#F04526; font-family: 'Nunito', sans-serif; font-weight: 300; text-decoration: none}
a:hover {color:#EA745F; text-decoration: none}
h1 {font-family: GalanoGrotesque-SemiBold, helvetica; font-size: 30px; font-weight: normal;}
h2 {font-family: GalanoGrotesque-Bold, helvetica; font-size: 27px; font-weight: normal;}
h3 {font-family: GalanoGrotesque-Medium, helvetica; font-weight: normal; font-size: 17px;}
h4 {font-family: GalanoGrotesque-Regular, helvetica; font-size: 17px; font-weight: normal;}

.btn img {margin-top: -2px; margin-right: 10px;}

.navbar-brand {color:rgba(0,0,0,.10) !important; padding-right: 0px; font-size: 30px;}
.navbar-brand img {margin-right: 10px;}
.navbar-brand div{font-size: 14px; color: #484849; font-family: GalanoGrotesque-Bold, helvetica; display: inline-block; transform: translateY(-2px);}
.navbar {-webkit-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear;}
.navbar-nav>li>a {padding: 12px 30px; color:#fff !important;}
.navbar-default .navbar-toggle {border: 0px;}
.navbar-default .navbar-toggle .icon-bar {height: 3px; border-radius: 5px; -webkit-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear;}
.navbar-default .navbar-toggle .icon-bar:nth-child(2) {transform: translate(0px,7px) rotate(45deg);}
.navbar-default .navbar-toggle .icon-bar:nth-child(3) {visibility: hidden;}
.navbar-default .navbar-toggle .icon-bar:nth-child(4) {transform: translate(0px,-7px) rotate(-45deg);}
.navbar-default .navbar-toggle.collapsed .icon-bar {transform:none; visibility: visible;}
.navbar-default a.link {color:#7A7A7B; font-size: 14px; font-weight: 800; text-transform: uppercase; margin-right: 20px}

.navbar.sticky {background: #fff; border-bottom: 1px solid #F5F5F5}
.mobile-nav {background: #fff; border-bottom: 1px solid #F5F5F5}
.mobile-nav > ul >li {margin: 10px auto;}
.mobile-nav > ul >li >a {font-size: 28px; text-transform: uppercase; text-align: center; font-family: 'Nunito', sans-serif; font-weight: 300; }

.jumbotron {padding-top: 70px; margin-bottom: 0px; background: none; min-height: 500px; position: relative}
.jumbotron h1 {color:#F14C29;}
.jumbotron p {font-size: 16px; font-family: GalanoGrotesque-Light, helvetica; line-height: 22px; color:#484849}
.jumbotron .gradient {position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; z-index: 2;
	background: -moz-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(249,249,249,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(249,249,249,1) 50%,rgba(249,249,249,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(249,249,249,1) 50%,rgba(249,249,249,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#00f9f9f9',GradientType=0 ); /* IE6-9 */
}
.jumbotron .pull-top {z-index: 3; position: relative}
.hero-bg {position: absolute; z-index: 1; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; height: 500px; background-image: url(images/hero_bg.svg); background-repeat: no-repeat; background-position:bottom center; min-height: 200px;background-size: 150%;}

.content-section {overflow: hidden; padding-top: 30px; padding-bottom: 30px;}
.content-section figure figcaption{text-align: center; font-size: 12px; color: #868686; font-family: 'Nunito', sans-serif;}
.content-section figure img {width: 100%; shape-rendering="crispEdges"}
.content-section:nth-child(even){background: #F9F9F9}

#process {padding-top: 60px; padding-bottom: 60px;}
#process h2 {color:#F04526; font-size: 17px; margin-bottom: 30px;}
.heading-icon {width: 80px; height: 80px; border-radius: 50%; border: 3px solid #F5F5F5; text-align: center; margin:auto}
.heading-icon img {margin-top: 50%; transform: translateY(-50%); width: 53%; height: auto}
.step-text p {margin-left: 0px; font-size: 14px; line-height: 19px;}
#process .line {min-height: 90px; width: 3px; background: #F5F5F5; margin: 10px auto;}


.client-logos {padding-top:45px; padding-bottom: 45px;}
.client-logos img {margin: 10px 5px;}

.post-block {padding: 15px;}
.post-block p {line-height: 25px; font-size: 14px; color:#484749}
.post-block h2 {margin-top: 30px; margin-bottom: 20px; line-height: 36px;}
.post-wrapper {color:#000; height: auto; padding: 35px; background: #fff; }
.post-wrapper .post-link, .post-wrapper .post-link:hover {display: block; color:#000; text-decoration: none}
.post-single {margin-bottom: 30px;}
.post-single .container {background: #fff;}
.post-single iframe {max-width: 100%}
.post-content {padding: 30px 35px; background: #fff;}
.post-content p{font-size: 18px; line-height: 1.75; margin-bottom: 30px; word-break: break-word; word-wrap: break-word}
.post-content ol, .post-content ul {padding-left: 50px; margin-bottom: 30px;}
.post-content li {font-size: 18px; margin-bottom: 10px; color: #484749; font-family: 'Nunito', sans-serif; font-weight: 300;}
.post-content img.alignleft {float: left; margin: 15px 15px 15px 0px;;}
.post-content img.alignright {float: right; margin-left: 10px;}
.post-content img.aligncenter {display: block; margin: auto;}
.post-content blockquote {position: relative; border-left: 0px; width: 100%; padding: 30px 60px; }
.post-content blockquote p {text-align: center; font-style: italic; font-family: "georgia", sans-serif; color: #F56333; font-size: 20px; line-height: 40px;}
.post-content blockquote:before {content:'“'; position: absolute; top: 20px; left: 30px; font-style: italic; font-family: "georgia", sans-serif; color: #DDDDDD; font-size: 60px; line-height: 40px;}
.post-content blockquote:after {content:'”'; position: absolute; bottom: 0px; right: 30px; font-style: italic; font-family: "georgia", sans-serif; color: #DDDDDD; font-size: 60px; line-height: 40px;}
.post-meta, .post-meta a {font-size: 14px; color:#A1A1A1; text-decoration: none}
.comments {margin-top: 30px;}
.pix-load-more {margin: auto; width: 100%;}

footer {background: #F9F9F9;}
footer p {font-size: 12px; font-weight: 600; color:#858585;}
footer .col-sm-6 {padding: 0px}
footer .footer-logo {padding-top: 60px; padding-bottom: 60px;}
footer .footer-logo a {text-decoration: none; font-size: 30px; color:rgba(0,0,0,.12) !important}
footer .footer-logo a div {display: inline-block; transform: translateY(-3px); font-size: 14px; color: #A1A1A1; font-family: GalanoGrotesque-Bold, helvetica; }
footer .footer-copyright {border-top: 1px solid  #E5E5E5; padding-top:30px; padding-bottom: 0px; text-align: center}
footer .footer-copyright ul {padding: 0px; margin: 0px}
footer .footer-copyright ul li {list-style: none; display: inline; padding: 0px 15px;}
footer .footer-copyright ul li a {color: #858585; font-weight: 600; text-decoration: none;}
footer .footer-copyright ul li:last-child {padding-right: 0px;}
footer .footer-copyright ul li:last-child a {color:#F35B30;}

@media (max-width: 768px){
	.post-content img {max-width: 100% !important; height: auto !important;}
}

@media (min-width:768px) {
	p {font-size: 18px; line-height: 40px;}
	h1 {font-size: 60px;}
	h3, h4 {font-size: 24px;}
	.navbar-default {padding: 40px 0;}
	.navbar-default.sticky {padding: 20px 0;}
	.navbar-collapse.collapse.mobile-nav {display: none !important;}
	.jumbotron {padding-top: 125px; min-height: 700px}
	.jumbotron .gradient {height: 60%}
	.jumbotron p {font-size: 28px; line-height: 40px;}
	.hero-bg {min-height: 350px; background-size: auto;}
	.content-section {padding-top: 100px; padding-bottom: 100px;}
	.content-section figure {width: 150%; max-width: 1100px}
	.content-section.position-left figure {margin-left: -50%}
	.content-section.position-left .textual-content {text-align: right}
	.content-section .textual-content p {line-height: 40px; font-size: 18px;}
	.heading-icon {width: 155px; height: 155px; border-width: 4px;}
	#process {position: relative}
	#process h2 {color:#F04526; font-size: 30px; margin-bottom: 60px;}
	#process .step {margin-bottom: 30px;}
	#process .step h4 {text-align: center; padding: 20px 40px; color:#414141}
	#process .step .step-text p {text-align: center; padding: 0px 40px; color:#868686; font-size: 18px; line-height: 25px;}
	#process .step .heading-icon img {width: 88px;}
	#process .step:nth-child(3) .heading-icon img {width: 80px}
	#process .step:last-child .heading-icon img {width: 91px}
	#process hr {position: absolute; left: 50%; top: 50px; transform: translateX(-50%); border-width: 4px; border-color: #F5F5F5}
	#process hr.left {margin-left: -13.5%}
	#process hr.right {margin-left: 13.5%}
	.client-logos img {margin: 10px 30px;}
	.blog .jumbotron, .single-post .jumbotron, .archive .jumbotron {background: #fff; position: relative; padding-top: 200px; padding-bottom: 140px; margin-bottom: 50px;}
	.blog .jumbotron h1 {color:#000;}
	.blog .jumbotron .hero-bg {position: absolute; bottom: 0px; left: 0px; height: 100%; width: 100%;}
	.post-content {padding: 60px 70px;}
 	.post-wrapper {height: 385px;}
	footer .footer-copyright {text-align: left}
}

@media (min-width: 992px){ 
	#process hr.left {margin-left: -16.5%}
	#process hr.right {margin-left: 16.5%}
	.content-section .textual-content {transform: translateY(50%); }
	.post-wrapper {height: 310px;}
}
@media (min-width: 1200px){
	.post-wrapper {height: 285px;}
}