/*------------------------------
 Parts & Layout styles
------------------------------*/

.bold { font-weight: bold; }
.center { text-align: center; }
.x-small { font-size: 0.8em; }
.small { font-size: 0.9em; }
.large { font-size: 1.1em; }
.x-large { font-size: 1.2em; }
.red { color: #d33; }

/* Anchor link styles */
a.anchor, a.anchor-ex,
.anchor a, .anchor-ex a {
	text-decoration: none;
}

a.anchor::after, a.anchor-ex::after,
.anchor a::after, .anchor-ex a::after {
	font-family: 'fontawesome';
	font-size: 110%;
	content: '\f105';
	padding-left: 0.3em;
	position: relative;
	top: 0;
	display: inline;
}

a.anchor-ex::after, .anchor-ex a::after {
	font-size: 90%;
	content: '\f2d2';
}

/******************************
 size
******************************/
.text-bold { font-weight: bold; }
.text-xsmall { font-size: 0.8em; }
.text-small { font-size: 0.9em; }
.text-large { font-size: 1.1em; }
.text-xlarge { font-size: 1.2em; }

/******************************
 wieght
******************************/
.text-light { font-weight: 200; }
.text-bold { font-weight: bold; }
.text-xbold { font-weight: 900; }

/******************************
 align
******************************/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/******************************
 color
******************************/
.text-yellow { color: #fb0; }
.text-red { color: #d44; }
.text-blue { color: #0bd; }
.text-green { color: #0b7; }
.text-gray { color: #999; }

/******************************
 marker
******************************/
.marker-yellow-bold {
	background: linear-gradient(transparent 0%, #ff6 0%);
	font-weight: bold;
}
.marker-yellow-light {
	background: linear-gradient(transparent 80%, #ff6 80%);
}

.marker-red-bold {
	background: linear-gradient(transparent 0%, #fcd 0%);
	font-weight: bold;
}
.marker-red-light {
	background: linear-gradient(transparent 80%, #fcd 80%);
}

.marker-blue-bold {
	background: linear-gradient(transparent 0%, #bef 0%);
	font-weight: bold;
}
.marker-blue-light {
	background: linear-gradient(transparent 80%, #bef 80%);
}

.marker-green-bold {
	background: linear-gradient(transparent 0%, #9ea 0%);
	font-weight: bold;
}
.marker-green-light {
	background: linear-gradient(transparent 80%, #9ea 80%);
}

/******************************
 box
******************************/
.box-simple p,
.box-yellow p,
.box-green p,
.box-black p,
.box-blue p,
.box-red p { margin-bottom: 1.5em; }

.box-simple p:last-child,
.box-yellow p:last-child,
.box-green p:last-child,
.box-black p:last-child,
.box-blue p:last-child,
.box-red p:last-child { margin-bottom: 0; }

.box-simple,
.box-yellow,
.box-green,
.box-black,
.box-blue,
.box-red {
	border: 2px solid #ddd;
	margin: 2.5em 0;
	padding: 1.5em;
	font-size: 0.95em;
}

.box-yellow {
	border-color: #fc6;
	background: #ffe;
}

.box-green {
	border-color: #9da;
	background: #efd;
}

.box-black {
	border-color: #555;
	background: #222;
	color: #eee;
}

.box-blue {
	border-color: #9cd;
	background: #eef7ff;
}

.box-red {
	border-color: #faa;
	background: #fee;
}

/******************************
 btn
******************************/
.btn,
.btn-s,
.btn-l,
.btn-yellow,
.btn-red,
.btn-blue,
.btn-green,
.btn-black,
.btn-flash,
.btn-beat, 
.btn-buzz,
.btn-buzzout {
	margin: 1.5em 0 2em;
	text-align: center;
}

.btn a,
.btn-s a,
.btn-l a,
.btn-yellow a,
.btn-red a,
.btn-blue a,
.btn-green a,
.btn-black a,
.btn-flash a,
.btn-beat a,
.btn-buzz a,
.btn-buzzout a {
	display: inline-block;
	position: relative;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
	text-decoration: none;
	padding : 1em 2em;
	color: #fff;
	background: #444;
	border-radius: 5px;
	box-shadow: 0 4px 0 0 rgba(119,119,119,0.2);
	opacity: 1;
}

.btn a:hover,
.btn-s a:hover,
.btn-l a:hover,
.btn-yellow a:hover,
.btn-red a:hover,
.btn-blue a:hover,
.btn-green a:hover,
.btn-black a:hover,
.btn-flash a:hover,
.btn-beat a:hover, 
.btn-buzz a:hover,
.btn-buzzout a:hover {
	color: #fff;
	box-shadow: 0 8px 35px -8px rgba(0,0,0,0.3) !important;
	transform: translateY(-2px);
}

#footer-top .btn a { color: #fff; }

/* small */
.btn-s a {
	font-size: 0.9em;
	font-weight: normal;
	padding: 0.5em 1.2em;
	box-shadow: none;
}

/* large */
.btn-l a {
	font-size: 1.1em;
	font-weight: 700;
	padding: 1.1em 2em;
	width: 420px;
	max-width: 90%;
}

/* color */
.btn-yellow a { background: #fb0 !important; }
.btn-red a { background: #d33 !important; }
.btn-blue a { background: #0bd !important; }
.btn-green a { background: #0b7 !important; }
.btn-black a { background: #222 !important; }

/* flash */
.btn-flash a {
	-webkit-animation: flash 3s ease-in-out infinite;
	animation: flash 3s ease-in-out infinite;
}

@keyframes flash {
	50%{opacity: 0;}
}

/* beat */
.btn-beat a {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-animation: beat 0.6s ease-out infinite alternate;
	animation: beat 0.6s ease-out infinite alternate;
}

@keyframes beat {
	to {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

/* buzz */
.btn-buzz a {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-animation: buzz 0.15s linear infinite;
	animation: buzz 0.15s linear infinite;
}

@keyframes buzz {
	50% {
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	100% {
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}
}

/* buzzout */
.btn-buzzout a {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.btn-buzzout a:hover {
	-webkit-animation: buzzout 0.75s linear;
	animation: buzzout 0.75s linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

@keyframes buzzout {
	10%{
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	20%{
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	30%{
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	40%{
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	50%{
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	60%{
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	70%{
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	80%{
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	90%{
		-webkit-transform: translateX(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}

	100%{
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

.btn-flash a:hover, .btn-flash a:active,
.btn-beat a:hover, .btn-beat a:active,
.btn-buzz a:hover, .btn-buzz a:active {
	-webkit-animation: none;
	animation: none;
}

/* Button styles */
.btn {
	margin: 1.5em 0 2em;
}

.btn.aligncenter {
	text-align: center;
}

.btn a:link, .btn a:visited {
	display: inline-block;
	position: relative;
	font-weight: bold;
	text-decoration: none;
	padding : 1em 2em;
	color: #4593af;
	background: #fff;
	border: 2px solid #4593af;
	border-radius: 5px;
	box-shadow: 0 4px 0 0 rgba(119,119,119,0.2);
}

.btn a:hover {
	color: #fff;
	background: #69b8d5;
	border-color: #69b8d5;
	box-shadow: none;
}

.btn a:active {
	-webkit-transform: translate3d(0px, 3px, 1px);
	transform: translate3d(0px, 3px, 1px);
}

/* Small */
.btn.btn-s a {
	font-size: 0.9em;
	font-weight: normal;
	border-width: 1px;
	padding: 0.5em 1.2em;
	box-shadow: none;
}

/* Large */
.btn.btn-l a {
	font-size: 1.1em;
	font-weight: bold;
	padding: 1.1em 2em;
	border-width: 2px;
	width: 420px;
	max-width: 90%;
}

/* Solid */
.btn.nuri a{
	background: #4593af;
	color: #fff;
}

.btn.nuri a:hover{
	background: #fff;
	color: #4593af;
}

/* Black */
.btn.black a:link, .btn.black a:visited,
.btn.black.nuri a:hover{
	color: #222;
	border-color: #222;
	background: #fff;
}

.btn.black a:hover,
.btn.black.nuri a{
	background: #222;
}

/* Red */
.btn.red a:link, .btn.red a:visited,
.btn.red.nuri a:hover{
	color: #d33;
	border-color: #d33;
	background: #fff;
}

.btn.red a:hover,
.btn.red.nuri a{
	background: #d33;
}

/* Yellow */
.btn.yellow a:link, .btn.yellow a:visited,
.btn.yellow.nuri a:hover{
	color: #fc2;
	border-color: #fc2;
	background: #fff;
}

.btn.yellow a:hover,
.btn.yellow.nuri a{
	background: #fc2;
}

.btn a:hover, .btn.nuri a,
.btn.black a:hover, .btn.black.nuri a,
.btn.red a:hover, .btn.red.nuri a,
.btn.yellow a:hover, .btn.yellow.nuri a {
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.btn.nuri a:hover,
.btn.black.nuri a:hover,
.btn.red.nuri a:hover,
.btn.yellow.nuri a:hover {
	text-shadow: none;
}

/* Flash */
.btn.flash a{
	-webkit-animation: flash 3s ease-in-out infinite;
	animation: flash 3s ease-in-out infinite;
}

@keyframes flash{
	50%{opacity: 0;}
}

/* Beat */
.btn.beat a:link{
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-animation: beat 0.6s ease-out infinite alternate;
	animation: beat 0.6s ease-out infinite alternate;
}

@keyframes beat{
	to{
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

/* Buzz */
.btn.buzz a:link{
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-animation: buzz 0.15s linear infinite;
	animation: buzz 0.15s linear infinite;
}

@keyframes buzz{
	50%{
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	100%{
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}
}

/* Buzz Out */
.buzz-out a:link {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
}

.buzz-out a:hover {
	-webkit-animation: buzz-out 0.75s linear;
	animation: buzz-out 0.75s linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

@keyframes buzz-out{
	10%{
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	20%{
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	30%{
		-webkit-transform: translateX(3px) rotate(2deg);
		transform: translateX(3px) rotate(2deg);
	}

	40%{
		-webkit-transform: translateX(-3px) rotate(-2deg);
		transform: translateX(-3px) rotate(-2deg);
	}

	50%{
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	60%{
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	70%{
		-webkit-transform: translateX(2px) rotate(1deg);
		transform: translateX(2px) rotate(1deg);
	}

	80%{
		-webkit-transform: translateX(-2px) rotate(-1deg);
		transform: translateX(-2px) rotate(-1deg);
	}

	90%{
		-webkit-transform: translateX(1px) rotate(0);
		transform: translateX(1px) rotate(0);
	}

	100%{
		-webkit-transform: translateX(-1px) rotate(0);
		transform: translateX(-1px) rotate(0);
	}
}

.btn.flash a:hover, .btn.flash a:active,
.btn.beat a:hover, .btn.beat a:active,
.btn.buzz a:hover, .btn.buzz a:active{
	-webkit-animation: none;
	animation: none;
}

.btn.flash a:active{
	-webkit-transform: translate3d(0,3px,1px);
	transform: translate3d(0,3px,1px);
}

.btn.beat a:active,
.btn.buzz a:active,
.btn.buzz-out a:active{
	-webkit-transform: translate3d(0,0,1px);
	transform: translate3d(0,0,1px);
}
/* end button styles */

/* info frame */
.info-frame {
	background: #f3f3f3;
	padding: 2em;
	text-align: center;
	margin: 2em 0;
}

.info-frame p {
	margin-bottom: 1.5em;
	letter-spacing: 0.1em;
}

.info-frame .btn {
	margin: 0;
}

.info-frame .btn a {
	min-width: 56%;
}

/* Link */
.kijilink{
	margin: 1em 0;
	text-align: left;
	border: 1px solid #ddd;
}

.kijilink a{
	color: #333;
	background: #fff;
	text-decoration: none;
	display: block;
	padding: 2%;
}

.kijilink .kijilink-eyecatch{
	float: left;
	width: 20%;
}

.kijilink .kijilink-eyecatch img{
	width: 100%;
	margin: 0;
}

.kijilink .kijilink-content{ padding-left: 22%; }

.kijilink .kijilink-title{
	margin: 0 0 0.2em;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.5;
}

.kijilink .kijilink-date{ font-size: 0.8em; }

/* Frame */
.explain{
	border: 2px solid #ddd;
	margin: 2.5em 0;
	padding: 1em 2em;
}

.explain.intitle{ padding-top: 0; }

.explain .ex-title{ margin: 0; }

.explain .ex-title span{
	display: inline-block;
	background: #fff;
	padding: 0.1em 0.5em;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.05em;
	position: relative;
	top: -1.1em;
	left: -0.5em;
	border-radius: 3px;
}

.explain.caution .ex-title span,
.explain.warning .ex-title span{
	padding-left: 2em;
}

.explain.caution .ex-title span::before,
.explain.warning .ex-title span::before{
	font-family: "fontawesome";
	display: inline-block;
	margin-right: 0.3em;
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 0.5em;
}

.explain.caution .ex-title span{
	background: #fa0;
	color: #fff;
}

.explain.caution .ex-title span::before{
	content: "\f071";
	color: #fff;
}

.explain.caution{
	background: #ffe;
	border-color: #fa0;
	color: #432;
}

.explain.warning .ex-title span{
	background: #f55;
	color: #fff;
}

.explain.warning .ex-title span::before{
	content: "\f06a";
	color: #fff;
}

.explain.warning{
	background: #fee;
	border-color: #f55;
	color: #433;
}

.explain.black-frame .ex-title span{
	background: #555;
	color: #fff;
}

.explain.black-frame{
	background: #222;
	border-color: #555;
	color: #fff;
}

/* Talk */
.talk{
	margin: 1em 0 1.5em;
	font-size: 0.95em;
}

.talk .talk-content{
	background-color: #f3f3f3;
	padding: 1em 1.5em;
	position: relative;
	width: 86%;
	border-radius: 1.5em;
}

.talk.l .talk-content{ float: right; }

.talk.r .talk-content{ float: left; }

.talk .talk-content h2,
.talk .talk-content h3,
.talk .talk-content h4,
.talk .talk-content h5{
	margin: 10px 0 !important;
	padding: 0;
}

.talk .talk-content p{ margin-bottom: 1em; }

.talk .talk-content p:last-child{ margin-bottom: 0; }

.talk .talk-icon{ position: relative; }

.talk .talk-icon img{
	width: 12%;
	border-radius: 50%;
	margin: 0;
}

.talk .talk-icon .talk-name{
	font-size: 0.85em;
	font-weight: bold;
	padding: .5em 0;
}

.talk.l .talk-icon img{
	float: left;
	margin-right: 2%;
}

.talk.r .talk-icon img{
	float: right;
	margin-left: 2%;
}

.talk.l .talk-icon .talk-name{ text-align: left; }

.talk.r .talk-icon .talk-name{ text-align: right; }

.talk.large .talk-icon img{ width: 16%; }

.talk.large .talk-content{ width: 81%; }

.talk.bk .talk-content{
	background: #333;
	color: #fff;
}

.talk.line .talk-content{ background: #bef18c; }

/* FAQ*/
.faq {
	margin: 2em 0;
	border-bottom: 1px solid #ddd;
}

.faq-inner {
	border-top: 1px solid #ddd;
	padding: 1.5em 0 0;
	position: relative;
}

.faq-inner p {
	margin: 0 0 1.5em;
}

.faq-qu,
.faq-an {
	padding: 0 0 0 2.7em;
	position: relative;
}

.faq-qu {
	padding: 0 2.7em;
	font-weight: bold;
}

.faq-qu::before,
.faq-an::before {
	content: "Q";
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #f55;
	width: 32px;
	height: 32px;
	line-height: 32px;
	display: block;
	position: absolute;
	left: 0;
	border-radius: 2em;
}

.faq-an::before {
	content: "A";
	background: #fa0;
}

.faq-inner .btn-accordion {
	top: 1.2em;
}

/* Layout */
.layout-frame{
	margin-left: -1%;
	margin-right: -1%;
	letter-spacing: -0.5em;
}

.layout-frame .layout-unit{
	display: inline-block;
	padding: 0 1%;
	vertical-align: top;
	letter-spacing: normal;
}

.layout-frame .grid2{ width: 50%; }

.layout-frame .grid3{ width: 33.333%; }

.layout-frame .grid4{ width: 25%; }

.layout-frame.ratio-l .grid2:nth-child(odd){ width: 66.666%; }

.layout-frame.ratio-l .grid2:nth-child(even){ width: 33.333%; }

.layout-frame.ratio-r .grid2:nth-child(odd){ width: 33.333%; }

.layout-frame.ratio-r .grid2:nth-child(even){ width: 66.666%; }

.entry-content .layout-frame img{ margin-bottom: 0.5em; }

/* Responsive */
@media only screen and (max-width: 767px) {
	.layout-frame .layout-unit{ width: 100%; }

	.layout-frame .layout-unit.grid4{ width: 50%; }
}

@media only screen and (max-width: 480px) {
	.btn a:link, .btn a:visited {
		font-size: 0.9em;
		padding: 0.8em 1.5em;
	}

	.btn.big a, .info-frame .btn a {
		font-size: 0.9em;
		min-width: 80%;
		max-width: 90%;
	}

	.info-frame { padding: 1.5em 1em; }

	.info-frame p { font-size: 0.9em; }

	.talk .talk-icon img { width: 18%; }

	.talk .talk-content {
		width: 77%;
		font-size: 0.95em;
	}

	.talk .talk-icon .talk-name{ padding: .1em 0 0.3em; }

	.talk.large .talk-icon img { width: 22%; }

	.talk.large .talk-content { width: 73%; }

	.kijilink .kijilink-title { font-size: 0.8em }

	.kijilink a { padding: 4%; }

	.kijilink .kijilink-eyecatch { width: 30%; }

	.kijilink .kijilink-content { padding-left: 34%; }
}

/*------------------------------
 Plugin styles
------------------------------*/
/* WordPress popular posts */
ul.wpp-list{ counter-reset: number; }

.widget ul.wpp-list li{
	list-style: none;
	position: relative;
	border-bottom: 1px solid rgba(204,204,204,0.4);
	margin: 0;
	padding: 15px 0;
	overflow: visible;
	zoom: 1;
}

ul.wpp-list li::before,
ul.wpp-list li::after{
	content: "";
	display: table;
}

ul.wpp-list li::after{ clear: both; }

ul.wpp-list li a::before{
	counter-increment: number;
	content: counter(number);
	background: #000;
	color: #fff;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	border-radius: 50%;
	font-size: 1.05em;
	font-family: "Quicksand", sans-serif;
	display: block;
	text-align: center;
	position: absolute;
	left: -5px;
	top: 10px;
	z-index: 1;
}

ul.wpp-list img{
	margin-bottom: 0;
	margin-right: 15px;
	border-radius: 0 1.1em 1.1em;
}

ul.wpp-list li a.wpp-post-title{
	display: block;
	font-weight: bold;
}

ul.wpp-list li .wpp-excerpt{
	font-size: 0.85em;
	display: block;
	margin: 0.5em 0;
}

ul.wpp-list li a.wpp-post-title::before,
ul.wpp-list li .wpp-author a::before,
ul.wpp-list li .wpp-category a::before{ content: none; }

/* Table of contents plus */
#toc_container.no_bullets li::before{ content: none; }

#toc_container {
	border-color: #ddd;
	padding: 2% 4%;
}

#toc_container p.toc_title {
}

#toc_container span.toc_toggle{ margin-left: 0.5em; }

#toc_container p.toc_title+ul.toc_list {
	margin: 1em 0 0;
	padding: 0;
}

#toc_container li { border-top: 1px solid rgba(204,204,204,0.4); }


#toc_container li a {
	padding: 0.5em 0 0.5em 0.1em;
	display: block;
}

#toc_container ul ul {
	margin-left: 0;
}

#toc_container li li a {
	padding-left: 1.1em;
}

#toc_container a:hover {
	text-decoration: none;
}

#toc_container.have_bullets li{ padding-left: 1.5em; }

#toc_container.have_bullets li::before{
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

#toc_container a .toc_number{
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	margin-right: 0.4em;
}

#toc_container a .toc_number::after{ content: "." }

/* Contact form 7 */
.wpcf7 .wpcf7-submit {
	font-size: 1.1em;
	font-weight: bold;
	background: #d33;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:active,
.wpcf7 .wpcf7-submit:focus {
	background: #f66;
}

div.wpcf7 .ajax-loader {
	position: absolute;
}

div.wpcf7-response-output {
	padding: 1em 2em;
	border-width: 1px;
	text-align: center;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	background-color: #ffe;
	border-color: #fa0;
}

div.wpcf7-mail-sent-ok {
	background-color: #dfd;
	border-color: #5c5;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
	background-color: #fee;
	border-color: #f55;
}