@import url("assets/css/font-awesome.min.css");
/*
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
*/


/* Basic */

	body {
		background: #fff;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 15pt;
		font-weight: 300;
		color: #888;
		line-height: 1.75em;
	}

		body.is-loading * {
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 15pt;
		font-weight: 300;
		line-height: 1.75em;
		color: #888;
	}

	h1 {
		font-size: 2.5em;
		font-weight: 600;
	}
	
	h2 {
		font-size: 2em;
		font-weight: 300;
		color: #666;
		line-height: 1.5em;
		letter-spacing: -1px;
		margin-bottom: 25px;
		margin-top: 25px;
	}
	
	h3 {
		font-size: 1.25em;
		font-weight: 500;
		color: blue;
		line-height: 1.5em;
		margin-bottom: 25px;
		margin-top: 25px;
	}

	

	header {
		margin: 0 0 2em 0;
	}	

	footer {
		margin: 2em 0 0 0;
	}

	strong, b {
		font-weight: 300;
	}

	em, i {
		font-style: italic;
	}

	a {
		text-decoration: none;
		border-bottom: dotted 1px rgba(128, 128, 128, 0.5);
		-moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		outline: 0;
	}

		a:hover {
			color: #E27689;
			border-bottom-color: rgba(255, 255, 255, 0);
		}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 2em;
	}
	
	p {
		text-align: left;
	}
	

	br.clear {
		clear: both;
	}

/* Sections/Article */

	section, article {
		margin-bottom: 3em;
	}

		section > :last-child,
		section > .container, section:last-child, article > :last-child,
		article > .container, article:last-child {
			margin-bottom: 0;
		}

		.row > section, .row > article {
			margin-bottom: 0;
		}

/* Image */

	.image {
		display: inline-block;
		border: 0;
	}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 auto;
			width: auto;
		}

	.always-fit {
		display: block;
		width: 100%;
	}		
			
			
/* List */

	ul.default {
		list-style: disc;
		padding-left: 1em;
	}

		ul.default li {
			padding-left: 0.5em;
		}

	ul.icons {
		cursor: default;
	}

		ul.icons li {
			display: inline-block;
		}

		ul.icons a {
			display: inline-block;
			width: 2em;
			height: 2em;
			line-height: 2em;
			text-align: center;
			border: 0;
		}

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

/* Form */

	form label {
		display: block;
		text-align: left;
		margin-bottom: 0.5em;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		position: relative;
		-webkit-appearance: none;
		display: block;
		border: 0;
		outline: 0;
		background: #fff;
		background: rgba(255, 255, 255, 0.75);
		width: 100%;
		border-radius: 0.35em;
		padding: 0.75em 1em 0.75em 1em;
		box-shadow: inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.05);
		border: solid 1px rgba(0, 0, 0, 0.15);
		-moz-transition: all 0.35s ease-in-out;
		-webkit-transition: all 0.35s ease-in-out;
		-ms-transition: all 0.35s ease-in-out;
		transition: all 0.35s ease-in-out;
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			box-shadow: 0 0 2px 1px #8ebebc;
			background: #fff;
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {
		line-height: 1.25em;
	}

	form textarea {
		min-height: 14em;
	}

	form .formerize-placeholder {
		color: #555 !important;
	}

	form ::-webkit-input-placeholder {
		color: #555 !important;
	}

	form :-moz-placeholder {
		color: #555 !important;
	}

	form ::-moz-placeholder {
		color: #555 !important;
	}

	form :-ms-input-placeholder {
		color: #555 !important;
	}

	form ::-moz-focus-inner {
		border: 0;
	}

/* Table */

	table {
		width: 100%;
		font-size:11pt;
		border: 1px #999 solid;
		line-height:13pt;
	}

	td, th {
		font-size:11pt;
		border: 1px #999 solid;
		line-height:13pt;
	}

		table.default {
			width: 100%;
			text-align: left;
		}

			table.default tbody tr:nth-child(2n+2) {
				background: #f4f4f4;
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				padding: 0.5em 1em 0.5em 1em;
				color: #fff;
				background: #222729 url("images/overlay.png");
			}

			table.default thead {
				background: #444;
				color: #fff;
			}

			table.default tfoot {
				background: #eee;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		position: relative;
		display: inline-block;
		border-radius: 0.35em;
		color: #fff !important;
		text-decoration: none;
		padding: 0.75em 2.5em 0.75em 2.5em;
		background-color: #8ebebc;
		border: 0;
		cursor: pointer;
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		-moz-transition: background-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #9ececc;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #7eaeac;
		}

/* Item */

	.item {
		box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
		background: #fff;
		margin-bottom: 20px;
		
	}
		.item img{
			margin:0 auto;
		}
		

		.item p{
			font-size:11pt;
			text-align:center;
		}

				
			
.inner{
	padding: 15px 5px 5px 5px;
}


/* Icons */

	.icon {
		text-decoration: none;
	}

		.icon:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon > .label {
			display: none;
		}

/* Header */

	#header {
		position: fixed;
		top: 0;
		left: 0;
		width: 230px;
		height: 100%;
		color: #fff;
		background: orange;
		text-align: right;
	}

		#header .top {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}

		#header .bottom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		#header .icons {
			font-size: 0.8em;
			margin: 0 0 1em 0;
			text-align: center;
		}
		
	#logo {
		position: relative;
		margin: 1.5em 1em 1.5em 1em;
		min-height: 48px;
		cursor: default;
	}

		

		#logo p {
			position: relative;
			text-align:right;
			display: block;
			font-size: 1em;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 1.25em;
			margin: 0.5em 0 0 0;
		}
		
		#logo p.smallfont {
			font-size: 0.75em;
			font-weight: 500;
		}

		#logo .image {
			position: absolute;
			left: 0;
			top: 0;
		}

	#nav ul li a {
		display: block;
		padding: 0.2em 1em 0.2em 1em;
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		outline: 0;
		border: 0;
		-moz-transition: none;
		-webkit-transition: none;
		-ms-transition: none;
		transition: none;
		white-space: nowrap;
	}
	
		#nav ul li a span {
			position: relative;
			display: block;
			font-size: 11pt;
			padding-right: 2.25em;
		}

			#nav ul li a span:before {
				position: absolute;
				left: 100%;
				margin-left: -1.25em;
				color: white;
				text-align: center;
				width: 1.25em;
				line-height: 1.75em;
			}

		#nav ul li a.active {
			background: rgba(0, 0, 0, 0.15);
			box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
			color: #fff;
		}

			#nav ul li a.active span:before {
				color: white;
			}

			

/* Footer */

	#footer {
		margin-left: 230px;
		text-align: center;
		background-color: #dce3e2;
		padding: 3em 0 4em 0;
		box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
		font-size: 0.8em;
	}

		#footer .copyright {
			cursor: default;
			margin: 0;
		}

			#footer .copyright li {
				display: inline-block;
				line-height: 1em;
				border-left: solid 1px rgba(128, 128, 128, 0.35);
				padding: 0 0 0 0.5em;
				margin: 0 0 0 0.5em;
			}

				#footer .copyright li:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}

/* Main */

	#toplogo {
		color:white;
		font-weight:bold; 
		font-size:3em; 
		text-shadow: 2px 2px 1px #999999; 
		white-space:nowrap;
		margin: 0 auto;
		text-align: center;
	}
	
	.smallfont{
		font-size: 0.75em; 
	}

	#main {
		margin-left: 230px;
	}

		#main  section {
			margin: 0;
			overflow: hidden;
			padding: 4em 0;
			box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
			text-align: center;
			background-image: url("images/overlay.png");
		}	

			#main  section.cover {
				padding: 6em 0;
				background-size: cover;
				background-position: center center;
			}

			#main  section.shop {
				background-color: #81918E;
				background-image: url("images/shop_title.jpg");
			}

			#main  section.cacao {
				background-color: #81918E;
				background-image: url("images/cacao_title3.jpg");
			}

			#main  section.one {
				background-color: #81918E;
				background-image: url("images/banner.jpg");
			}



			#main  section.two {
				background-color: #f5fafa;
			}

			#main  section.three {
				background-color: #ecf1f1;
			}

			#main  section.four {
				background-color: #e8edec;
			}





/** am add **/
.wpcf7-response-output
{
    color: red;
}
.wpcf7-not-valid-tip
{
    color: red;
}
.screen-reader-response
{
    color: red;
}



/* PC */
@media screen and (min-width: 769px)  {

		/* Basic */

			body, input, textarea, select {
				font-size: 15pt;
			}

			.container {
				padding: 0 2em 0 2em;
			}

			

		/* List */

			

		/* Item */

			.item {

			}

		/* Header */

			#header {
				width: 230px;
			}

		/* Footer */

			#footer {
				margin-left: 230px;
			}

		/* Main */

			#main {
				margin-left: 230px;
			}

}


#headerToggle {
	display: none;
}


/* mobile */
@media screen and (max-width: 768px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				font-size: 14pt;
			}


			/*
			header br {
				display: none;
			}
			*/
			
			.container {
				padding: 0 2em 0 2em;
			}
			
			.mobile-fit {
				display: block;
				width: 100%;
			}
			
			iframe { width:100%; }

		/* Item */

			.item {
				margin-bottom: 15px;
			}

		/* List */

			ul.icons a {
				width: 1.75em;
				font-size: 1.25em;
			}

		/* Header */

			#header {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-230px);
				-webkit-transform: translateX(-230px);
				-ms-transform: translateX(-230px);
				transform: translateX(-230px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 230px;
				z-index: 10002;
				
			}

				
			#nav ul li a {
				padding: 0.5em 1.25em 0.5em 1.25em;
			}

			#headerToggle {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 2.25em;
				left: 0;
				position: fixed;
				top: 0;
				width: 3.25em;
				z-index: 10001;
			}

				#headerToggle .toggle {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					outline: 0;
					border: 0;
				}

					#headerToggle .toggle:before {
						font-family: FontAwesome;
						text-decoration: none;
						font-style: normal;
						font-weight: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						content: '\f0c9';
						color: #fff;
						font-size: 18px;
						line-height: 2.25em;
						background: rgba(128, 136, 144, 0.5);
						border-radius: 0.35em;
						text-align: center;
						position: absolute;
						left: 0.5em;
						top: 0.5em;
						display: block;
						width: 3.25em;
						height: 2.25em;
						line-height: 2.25em;
					}

			body.header-visible #main {
				-moz-transform: translateX(230px);
				-webkit-transform: translateX(230px);
				-ms-transform: translateX(230px);
				transform: translateX(230px);
			}

			body.header-visible #headerToggle {
				-moz-transform: translateX(230px);
				-webkit-transform: translateX(230px);
				-ms-transform: translateX(230px);
				transform: translateX(230px);
			}

			body.header-visible #header {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Footer */

			#footer {
				margin-left: 0;
			}

		/* Main */
			#toplogo {
				font-size: 2em;
			}

			#main {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
				margin-left: 0;
			}

				#main  section {
					padding: 3em 0;
				}

				#main section.cover {
					padding: 4em 0;
				}

}