/*
	Theme Name: Copyblogger 4.0
	Description: Home stylesheet for the custom designed theme for copyblogger.com
	Author: Copyblogger Media
	Author URI: http://www.copyblogger.com/
 
	Version: 4.0
*/


.front-page .more-link {
	border-bottom: 2px solid #111;
	color: #111;
	display: inline-block;
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.front-page .more-link:hover {
	color: #0274be;
	border-bottom-color: #0274be;
}

.front-page .button.button-cta {
	margin: 50px 0 0;
}

.front-page .site-inner {
	display: none;
}

.wrap {
	padding: 0 20px;
}


/* Front Page Sections
---------------------------------------------------------------------------------------------------- */

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6 {
	padding: 100px 0;
}

/* Front Page 1
--------------------------------------------- */

.front-page-1 {
	background-color: #eaeaea;
	background: url( '../img/home/copyblogger-hero.jpg' ) center center no-repeat;
	background-size: cover;
	overflow: hidden;
	margin-top: 60px;
	position: relative;
}

.front-page-1 h1 {
	color: #000;
	font-weight: 100;
    font-size: 70px;
	margin: 12% 0;
	margin-left: -7px; /* Fix left alignment issue */
	text-indent: 6px; /* Fix left alignment issue */
	max-width: 55%;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.front-page-1 h1 .hero-bold {
	font-size: 20px;
	letter-spacing: .16em;
	margin-bottom: 10px;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
}

/* Front Page 2
--------------------------------------------- */

.front-page-2 {
	font-family: "freight-text-pro", Georgia, serif;
	font-weight: 400;
}

.front-page-2 .mission {
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	margin: 0 auto;
	width: 100%;
}

.front-page-2 .mission h2 {
	display: inline-block;
	font-size: 48px;
	margin-bottom: 70px;
	max-width: 72%;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.front-page-2 p {
	font-size: 18px;
}

.front-page-2 .widget-title {
	font-size: 28px;
}

.front-page-2 .button {
	float: right;
	margin-top: 10px;
}

/* Front Page 3
--------------------------------------------- */

.front-page-3 {
	background-color: #222;
	background: url( '../img/home/front-page-3-bg.jpg' ) center center no-repeat;
	background-size: cover;

	overflow: hidden;
	text-align: center;
}

.front-page-3 .testimonial {
	color: #fff;
	font-size: 20px;
}

.grid .grid-box.testimonial {
	background: transparent;
	border: 0;
}

.front-page-3 .testimonial,
.front-page-3 .testimonial > .pf-content {
	position: relative;
}

.front-page-3 .testimonial blockquote {
	margin: 0 0 50px;
}

.front-page-3 .testimonial blockquote:before {
	content: "\201C";
	color: #86d4f8;
	display: inline-block;
	font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
	font-size: 60px;
	left: -5px;
	line-height: 0;
	position: relative;
    top: 17px;
}

.front-page-3 img {
	border-radius: 50%;
	margin-bottom: 30px;
	width: 125px;
}

.front-page-3 h4 {
	color: #fff;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.front-page-3 .testimonial a,
.front-page-3 .testimonial a:hover {
	color: #fff;
}

/* Front Page 4
--------------------------------------------- */

.front-page-4 {
	background: #eee;
}

.front-page-4 h2 {
	font-size: 60px;
 	margin-bottom: 70px;
    margin-top: 50px;
	max-width: 960px;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.front-page-4 .button.button-cta {
	margin-top: 0;
	text-align: center;
	display: block;
}

.front-page-4 img {
	border: 1px solid #eaeaea;
}

.front-page-4 .grid-box h6 {
	margin: 20px 0 10px;
}

/* Front Page 5
--------------------------------------------- */

.front-page-5 {
	text-align: center;
}

.front-page-5 > .wrap {
	max-width: 1000px;
}

.front-page-5 h1 {
	font-size: 40px;
	margin: 0 0 50px;
}

.front-page-5 p {
	margin-bottom: 0;
}

.front-page-5 p.lead {
	font-size: 24px;
	line-height: 1.4;
}

.front-page-5 .button.button-cta {
	margin-bottom: 30px;
}

/* Front Page 6
--------------------------------------------- */

.front-page-6 .widget {
	border-top: 2px solid #111;
	padding: 25px 0;
}

.front-page-6 .widget-title {
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 15px;
}

.front-page-6 li {
	margin-bottom: 10px;
}

.front-page-6 a {
	color: #111;
}

.front-page-6 a:hover {
	color: #0274be;
}


/* Independent Elements
---------------------------------------------------------------------------------------------------- */

/* Picture Grid
--------------------------------------------- */

.picture-row {
	clear: both;
	position: relative;
}

.picture-row .img {
	background: #ddd;
	display: block;
	float: left;
	width: 16.666667%;
	height: 16.666667%;
}

.picture-row .img.light {
	background: #f1f1f1;
}


/* Media Queries
---------------------------------------------------------------------------------------------------- */

/* 2x Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    
    .front-page-1 {
    	background-image: url( '../img/home/copyblogger-hero@2x.jpg' );
    }

    .front-page-3 {
    	background-image: url( '../img/home/front-page-3-bg@2x.jpg');
    }

}

@media only screen and (max-width: 1280px) {

	.front-page-2 .mission h2 {
		font-size: 42px;
	}

	.front-page-4 .button br {
		display: none;
	}

	.front-page-2 .mission h2 {
		max-width: 62%;
	}

}

@media only screen and (max-width: 1023px) {

	.front-page-2 .mission h2 {
		max-width: 100%;
		margin-bottom: 10px;
	}

	.front-page-2 .button {
		margin-bottom: 20px;
		float: none;
	}

}

@media only screen and (max-width: 759px) {

	.front-page-1 > .wrap {
		background-color: rgba(255,255,255,.6);
	}

	.front-page-1 h1 {
		font-size: 38px;
		max-width: 100%;
		margin-left: 0;
	}

	.front-page-1 h1 .hero-bold {
		margin-left: -4px;
	}

	.front-page-2, 
	.front-page-3,
	.front-page-4,
	.front-page-5,
	.front-page-6 {
		padding: 30px 0;
	}

}