/* Table of Contents

  -	Landing Page General
  -	Landing Page Site Container Fadein
  -	Landing Page Header Image
  -	Landing Page Form Control
  -	Flexible Widgets
  - Dashicons
  - Landing Page 1
  -	Landing Page 2
  - Landing Page 3
  -	Landing Page 4
  -	Media Queries
	- Max-width: 1200px
	- Max-width: 960px
	- Max-width: 800px
	- Max-width: 640px
	- Max-width: 480px

*/

/* Landing Page General
--------------------------------------------- */

.landing-page .site-container .site-inner {
	background-color: #fff;
	margin: 0 auto;
	max-width: 100%;
	padding: 0;
}

/* Landing Page Header & Navigation
--------------------------------------------- */

/*.site-header {
	background-color: #fff;
}

.header-image .site-title > a {
	background: url(images/logo.png) no-repeat left; 
	background-position: left center;
	background-size: auto 23px;
	width: 100%;
}

.genesis-nav-menu a {
	color: #5c5c5c;
	display: block;
	padding: 25px 24px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
}

.genesis-nav-menu a:hover {
	background-color: #f5f5f5;
	color: #5c5c5c;
}

.genesis-nav-menu .current-menu-item > a {
	color: #f5f5f5;
	background-color: #5c5c5c;
}

.genesis-nav-menu .current-menu-item > a:hover {
	color: #f5f5f5;
}

#menu-item-962 a {
	background-color: #f37a5d;
	color: #fff;
}

#menu-item-962 a:hover {
	background-color: #333;
	color: #fff;
}*/


/* Landing Page Form Control
--------------------------------------------- */

input:focus {
	border: none;
}

::-moz-placeholder {
	color: #c8c8c8;
	font-weight: 300;
}

::-webkit-input-placeholder {
	color: #c8c8c8;
	font-weight: 300;
}

.landing-page-1 .email {
	width: 30%; /* 420px */
}

.landing-page-4 .email {
	width: 45%; /* 361px jika menggunakan class '.three-fourths' */
}

.landing-page-1 .email,
.landing-page-4 .email {
	background-color: #fff;
	border: none;
	border-radius: 3px;
	margin: 0;
	float: left;
	height: 41px;
	box-sizing: border-box;
    vertical-align: middle;
}

.landing-page input:focus {
box-shadow: inset 0 2px 2px rgba(0,0,0,0.15);
}

.landing-page input {
	padding: 10px 15px;
}

.landing-page button {
	padding: 10px 30px;
}

.landing-page-1 .button {
	background: #f36652;
}

.landing-page-1 .button:hover {
	background-color: #333;
}

.landing-page-4 .button {
	background-color: #4AA0D5;
}

.landing-page-4 .button:hover {
	background-color: #fff;
	color: #3d4347;
}

.landing-page-1 .button ,
.landing-page-4 .button {
	border-radius: 3px;
	display: inline-block;
	margin: 0 10px;
	height: 41px;
	box-sizing: border-box;
   	vertical-align: middle;
	float: left;
	line-height: 0.6em;
	padding: 16px 24px;
}

/* Flexible Widgets
--------------------------------------------- */

.flexible-widgets .widget {
	float: left;
	margin-bottom: 40px;
	padding-left: 0px;
	padding-right: 0px;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-area .widget:nth-of-type(1),
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
	width: 100%;
}

.flexible-widgets.widget-fourths .widget {
	width: 25%;
}

.flexible-widgets.widget-halves .widget {
	width: 50%;
}

.flexible-widgets.widget-thirds .widget {
	width: 33.33%;
}

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2) {
	clear: left;
}

/* Dashicons
--------------------------------------------- */

.landing-page .dashicons-facebook {
	color: #fff;
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 5px 10px 0 0;
}

.landing-page .dashicons-twitter{
	color: #fff;
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 5px 10px 0 0;
}

.landing-page .dashicons-businessman {
	color: #fff;
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 5px 10px 0 0;
}

/* Landing Page 1
--------------------------------------------- */

.landing-page-1 {
	background-image: url(images/hero.png);
	background-color: #52b4e3;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;	
}

.landing-page-1 .widget-area {
	padding: 90px 0 220px;
}

.landing-page-1 .widget {
	margin-bottom: 60px;
}

.landing-page-1 .widget:last-child {
	margin-bottom: 0;
}

.landing-page-1,
.landing-page-1 h2,
.landing-page-1 p,
.landing-page-1 .widget-title {
	color: #fff;
}

.landing-page-1 p:last-child {
	margin-bottom: 0;
}

.landing-page-1 h2 {
	font-size: 36px;
	font-size: 3.2rem;
	margin-bottom: 0.4em;
	width: 80%;
}
.landing-page-1 p {
	font-size: 16px;
	font-size: 1.4rem;
	width: 80%;
}

/* Landing Page 2
--------------------------------------------- */

.landing-page-2 {
	padding-top: 40px;
}

.landing-page-2 .widget-area h3 {
	font-size: 22px;
}

.landing-page-2 .widget-area ul  {
	margin-bottom: 10px;
}

.landing-page-2 .widget-area ul > li {
	list-style: circle inside url(images/checkmark.png);
	padding: 0;
	text-indent: 0;
}

.landing-page-2 a:hover {
	color: #333;
	text-decoration: underline;
}

img.sales,
img.start,
img.traffic {
	margin: 0 100px; /* Posisi gambar agar center tanpa menggunakan tag <center> pada widget area */
	height: auto;
	width: 80px;
}
	

/* Landing Page 3
--------------------------------------------- */

.landing-page-3 {
	background-color: #fff;
	padding-top: 40px;
}

.landing-page-3 .featured-content .widget-title {
	color: #333;
	font-size: 36px;
	padding-bottom: 40px;
	text-align: center;
	text-transform: none;
}

.landing-page-3 .featured-content .entry {
	background-color: #fff;
	border: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.landing-page-3 .featured-content .entry-title {
	font-size: 24px;
}

.landing-page-3 .featured-content img {
	max-width: 560px;
}

.landing-page-3 .featured-content a.alignleft {
	margin-right: 40px;
}

.landing-page-3 .featured-content a.alignright  {
	margin-left: 40px;
}

.landing-page-3 .entry-content a.more-link {
	
}

.landing-page-3 .featured-content .img {
	float: left;
}

.landing-page-3 .entry-content {
    margin-bottom: 60px;
}

.ke-blog {
    font-size: 2rem;
    font-weight: 800;
	text-decoration: underline;
	color: #5c5c5c;
}

.ke-blog:hover {
	text-decoration: none;
	color: #5c5c5c;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}


.flexible-widgets .featuredpost {
    margin-bottom: 0px;
}

/* Landing Page 4
--------------------------------------------- */

.landing-page-4 {
	background-color: #333;
	padding: 40px 0;
}

.landing-page-4,
.landing-page-4 a ,
.landing-page-4 h3,
.landing-page-4 h6 {
	color: #fff;
}

.landing-page-4 a:hover {
	color: #aaa;
}

.landing-page-4 h3 {
	font-size: 36px;
}

.landing-page-4 h6 {
	font-size: 18px;
	margin-top: 10px;
}

.landing-page-4 p {
	font-size: 20px;
}

.landing-page-4 li {
	padding: 5px 0;
}

.landing-page-4 .three-fourths {
	padding-right: 2.5641%;
}

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

@media only screen and (max-width: 1200px) {
	
	.landing-page-1 .widget-area {
		padding: 40px 0;
	}
	
	.landing-page-3 .entry-content a.more-link {
		float: none;
		margin: 0;
	}
	
	.landing-page-3 .featured-content img {
		max-width: 420px;
	}

}

@media only screen and (max-width: 960px) {
	
	.landing-page-1 {
		background-position: 50% 50%;
	}
	
	.landing-page-1 h2 {
		width: 100%;
	}
	
	.landing-page-1 p {
		width: 100%;
	}
	
	.landing-page .site-title a {
		background-position: center;
		width: 100%;
	}
	
	.landing-page-1 .email {
		width: 65%;
	}
	
	.landing-page-1 .button {
		width: 30%;
	}
	
	.flexible-widgets .widget {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.landing-page-2 .widget-area h3 {
		font-size: 18px;
	}
	
	.landing-page-2 .widget-area ul > li {
		font-size: 16px;
	}
	
	.landing-page-3 .featured-content img {
		max-width: 100%;
	}
	
	.landing-page-3 .featured-content a.alignleft {
		display: block;
		margin: 0 auto 24px;
		float: none;
	}
		
}

@media only screen and (max-width: 850px) {
	
	.site-inner, .wrap {
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 5%;
	}
	
	.landing-page-1 {
		background-image: none;
	}
	
	.landing-page .site-header ,
	.landing-page-1 {
		padding: 0;
	}
	
	.landing-page-1 .email,
	.landing-page-4 .email,
	.landing-page-1 .button,
	.landing-page-4 .button	{
		width: 100%;
	}
	
	.landing-page-1 .button,
	.landing-page-4 .button {
		margin: 10px 0;
		height: 55px;
	}
	
	.flexible-widgets.widget-fourths .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget {
		float: none;
		width: 40%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.flexible-widgets .widget {
		padding-left: 0;
		padding-right: 0;
	}
	
	.landing-page .dashicons-facebook,
	.landing-page .dashicons-twitter,
	.landing-page .dashicons-businessman {
		margin: 0 10px 0 0;
	}
	
	.landing-page-2 .widget {
		text-align: left;
	}

	.landing-page-3 .featured-content .entry-title {
		padding: 0;
	}
	
	.landing-page-4 .three-fourths {
		padding-right: 0;
	}
	
	.landing-page-4 .first {
		padding-bottom: 20px;
		margin-bottom: 30px;
	}
	
	.landing-page-3 .featured-content img {
		max-width: 100%;
	}
}

@media only screen and (max-width: 640px) {
	
	.landing-page-1 h2 {
		font-size: 2.5rem;
	}
	
	.landing-page-1 p {
		font-size: 1.2rem;
	}
	
	.flexible-widgets.widget-fourths .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget {
		float: none;
		width: 60%;
	}
	
	.landing-page-3 .featured-content .entry {
		padding-bottom: 20px;
	}
	
	.landing-page-3 .featured-content .entry-content {
		clear: both;
		float: left;
	}
	
	.landing-page-3 .entry-content a.more-link {
		float: left;
		margin-top: 10px;
	}
	
	.landing-page-4 h3 {
		font-size: 28px;
	}
	
	.landing-page-4 p {
		font-size: 16px;
	}
	
	.landing-page-3 .featured-content .entry-content {
		margin-bottom: 24px;
	}

}

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

	.landing-page-3 .featured-content a.alignleft ,
	.landing-page-3 .featured-content a.alignright {
		float: none;
	}
	
	.landing-page-3 .featured-content .entry-image {
		display: block;
		margin: auto;
		text-align: center;
	}
	
	.landing-page-3 .entry-content a.more-link {
		float: none;
		margin: 0;
	}
	
	.landing-page-1 h2 {
		font-size: 2rem;
	}
	
	.flexible-widgets.widget-fourths .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget {
		width: 100%;
	}
	
	.ke-blog {
		font-size: 1.3rem;
	}
}