/*

Theme Name: Twenty Seventeen

Description: Used to style the TinyMCE editor.

*/

/**

 * Table of Contents:

 *

 * 1.0 - Body

 * 2.0 - Typography

 * 3.0 - Elements

 * 4.0 - Alignment

 * 5.0 - Caption

 * 6.0 - Galleries

 * 7.0 - Media Elements

 * 8.0 - RTL

 */

/**

 * 1.0 - Body

 */

body {

	background-color: #fff;

	color: #333;

	margin: 20px 40px;

	max-width: 580px;

}

/**

 * 2.0 - Typography

 */

body,

button,

input,

select,

textarea {

	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;

	font-size: 16px;

	font-size: 1rem;

	font-weight: 400;

	line-height: 1.66;

}

h1,

h2,

h3,

h4,

h5,

h6 {

	clear: both;

	line-height: 1.4;

	margin: 0 0 0.75em;

	padding: 1.5em 0 0;

}

h1:first-child,

h2:first-child,

h3:first-child,

h4:first-child,

h5:first-child,

h6:first-child {

	padding-top: 0;

}

h1 {

	font-size: 24px;

	font-size: 1.5rem;

	font-weight: 300;

}

h2 {

	color: #666;

	font-size: 20px;

	font-size: 1.25rem;

	font-weight: 300;

}

h3 {

	color: #333;

	font-size: 18px;

	font-size: 1.125rem;

	font-weight: 300;

}

h4 {

	color: #333;

	font-size: 16px;

	font-size: 1rem;

	font-weight: 800;

}

h5 {

	color: #767676;

	font-size: 13px;

	font-size: 0.8125rem;

	font-weight: 800;

	letter-spacing: 0.15em;

	text-transform: uppercase;

}

h6 {

	color: #333;

	font-size: 15px;

	font-size: 0.9375rem;

	font-weight: 800;

}

p {

	margin: 0 0 1.5em;

	padding: 0;

}

dfn,

cite,

em,

i {

	font-style: italic;

}

blockquote {

	color: #666;

	font-size: 18px;

	font-size: 1.125rem;

	font-style: italic;

	line-height: 1.7;

	margin: 0;

	overflow: hidden;

	padding: 0;

}

blockquote.alignleft,

blockquote.alignright {

	font-size: 14px;

	font-size: 0.875rem;

	width: 34%;

}

address {

	margin: 0 0 1.5em;

}

pre {

	background: #eee;

	font-family: "Courier 10 Pitch", Courier, monospace;

	font-size: 15px;

	font-size: 0.9375rem;

	line-height: 1.6;

	margin-bottom: 1.6em;

	max-width: 100%;

	overflow: auto;

	padding: 1.6em;

}

code,

kbd,

tt,

var {

	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

	font-size: 15px;

	font-size: 0.9375rem;

}

abbr,

acronym {

	border-bottom: 1px dotted #666;

	cursor: help;

}

mark,

ins {

	background: #eee;

	text-decoration: none;

}

big {

	font-size: 125%;

}

blockquote,

q {

	quotes: "" "";

}

blockquote:before,

blockquote:after,

q:before,

q:after {

	content: "";

}

/* Typography for Thai Font */

html[lang="th"] h1,

html[lang="th"] h2,

html[lang="th"] h3,

html[lang="th"] h4,

html[lang="th"] h5,

html[lang="th"] h6 {

	letter-spacing: 0;

	line-height: 1.65;

}

html[lang="th"] body,

html[lang="th"] button,

html[lang="th"] input,

html[lang="th"] select,

html[lang="th"] textarea {

	line-height: 1.8;

}

/**

 * 3.0 - Elements

 */

hr {

	background-color: #bbb;

	border: 0;

	height: 1px;

	margin-bottom: 1.5em;

}

ul,

ol {

	margin: 0 0 1.5em;

	padding: 0;

}

ul {

	list-style: disc;

}

ol {

	counter-reset: item;

}

ol > li {

	display: block;

	position: relative;

}

ol > li:before {

	content: counter(item);

	counter-increment: item;

	font-weight: 800;

	left: -1.5em;

	position: absolute;

}

li > ul,

li > ol {

	margin-bottom: 0;

	margin-left: 1.5em;

}

dt {

	font-weight: 700;

}

dd {

	margin: 0 1.5em 1.5em;

}

table {

	border-collapse: collapse;

	margin: 0 0 1.5em;

	width: 100%;

}

thead th {

	border-bottom: 2px solid #bbb;

	padding-bottom: 0.5em;

}

th {

	padding: 0.4em;

	text-align: left;

}

tr {

	border-bottom: 1px solid #eee;

}

td {

	padding: 0.4em;

}

th:first-child,

td:first-child {

	padding-left: 0;

}

th:last-child,

td:last-child {

	padding-right: 0;

}

a {

	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);

	color: #222;

	text-decoration: none;

	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;

	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;

}

a:focus {

	outline: thin dotted;

}

a:hover,

a:focus {

	color: #000;

	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);

}

/* Fixes linked images */

a img {

	background: #fff;

	-webkit-box-shadow: 0 0 0 6px #fff;

	box-shadow: 0 0 0 6px #fff;

}

/**

 * 4.0 - Alignment

 */

img {

	height: auto; /* Make sure images are scaled correctly. */

	width: inherit;  /* Make images fill their parent's space. Solves IE8. */

	max-width: 100%; /* Adhere to container width. */

}

embed,

iframe,

object {

	margin-bottom: 1.5em;

	max-width: 100%;

}

/**

 * 5.0 - Caption

 */

.wp-caption {

	color: #666;

	font-size: 13px;

	font-size: 0.8125rem;

	font-style: italic;

	margin-bottom: 1.5em;

	max-width: 100%;

}

.wp-caption img[class*="wp-image-"] {

	display: block;

	margin-left: auto;

	margin-right: auto;

}

.wp-caption .wp-caption-text {

	margin: 0.8075em 0;

}

/**

 * 6.0 - Galleries

 */

.gallery {

	margin-bottom: 1.5em;

}

.gallery-item {

	display: inline-block;

	text-align: center;

	vertical-align: top;

	width: 100%;

}

.gallery-item a,

.gallery-item a:hover,

.gallery-item a:focus {

	-webkit-box-shadow: none;

	box-shadow: none;

	background: none;

	display: inline-block;

}

.gallery-columns-2 .gallery-item {

	max-width: 50%;

}

.gallery-columns-3 .gallery-item {

	max-width: 33.33%;

}

.gallery-columns-4 .gallery-item {

	max-width: 25%;

}

.gallery-columns-5 .gallery-item {

	max-width: 20%;

}

.gallery-columns-6 .gallery-item {