.admin-bar header {
	top: 32px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-appearance: none;
	border-radius: 0;
}

*:focus {
    outline: none;
}

img {
    vertical-align: middle;
    border-style: none;
}

body, h1, h2, h3, h4, h5, h6, p, a, button, span, input {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, h1, h2, h3, h4, h5, h6, p, a, button, span, input{
	font-family: thonglor,sans-serif;
	font-weight: 400;
	font-style: normal;
}

body, html {
	overflow-x: hidden;
	font-size: 20px;
}

h1, h2, h3, h4, h5 {
	font-family: thonglor, sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: .9;
}

@font-face {
    font-family: 'gap_sansblack';
    src: local('serif');
    src: url('fonts/gapsansblack-webfont.eot');
    src: url('fonts/gapsansblack-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gapsansblack-webfont.woff2') format('woff2'),
         url('fonts/gapsansblack-webfont.woff') format('woff'),
         url('fonts/gapsansblack-webfont.ttf') format('truetype'),
         url('fonts/gapsansblack-webfont.svg#gap_sansblack') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-gapsans {
	font-family: 'gap_sansblack';
	font-weight: normal !important;
}

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

.center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

a {
	color: #000000;
	text-decoration: none;
}

.font-70 {
	font-size: 70px;
}


.font-55 {
	font-size: 55px;
	line-height: .95;
}

.font-46 {
	font-size: 46px;
	line-height: .95;
}

.font-34 {
	font-size: 34px !important;
	line-height: 1.1;
}

.font-30 {
	font-size: 30px;
	line-height: 1.1;
}

.font-28 {
	font-size: 28px;
	line-height: 1;
}

.font-26 {
	font-size: 26px;
	line-height: 1;
}

.font-24 {
	font-size: 24px;
	line-height: 1.1;
}

.font-white {
	color: #fff;
}

.font-white a {
	color: #fff;
}

.font-black {
	color: #000;
}

.font-black a {
	color: #000;
}

.color-workwell {
	color: #396D5A;
}
.color-gowell {
	color: #3D4A90;
}
.color-eatwell {
	color: #E4B538;
}

.color-joinwell {
	color: #A33134;
}

.color-livewell {
	color: #E28035;
}

/*bg*/

.column-workwell.bg-color {
	background: #396D5A;

}

.column-gowell.bg-color {
	background: #3D4A90;
}

.column-eatwell.bg-color {
	background: #E4B538;
}

.column-livewell.bg-color {
	background: #DB8035;
}

.column-seewell.bg-color {
	background: #2d2d2d;
}

.column-joinwell.bg-color {
	background: #A33134;
}

/*category-tag*/

.column-gowell .category-tag {
	color: #3D4A90;
}

.column-gowell .category-tag:after {
    border-bottom: solid 4px #3D4A90;
}

.column-livewell .category-tag {
	color: #E28035;
}

.column-livewell .category-tag:after {
    border-bottom: solid 4px #E28035;
}

.column-eatwell .category-tag {
	color: #E4B538;
}

.column-workwell .category-tag{
	color: #396D5A;
}

.column-workwell .category-tag:after {
    border-bottom: solid 4px #396D5A;
}

.column-joinwell .category-tag{
	color: #A33134;
}

.column-joinwell .category-tag:after {
    border-bottom: solid 4px #A33134;
}

/*font color*/

.column-workwell.bg-color a,
.column-workwell.bg-color p,
.column-workwell.bg-color span,
.column-workwell.bg-color h3,
.column-workwell.bg-color h2,
.column-workwell.bg-color h1{
	color: #fff;
}

.column-gowell.bg-color a,
.column-gowell.bg-color p,
.column-gowell.bg-color span,
.column-gowell.bg-color h3,
.column-gowell.bg-color h2,
.column-gowell.bg-color h1 {
	color: #fff;
}


.column-eatwell.bg-color a,
.column-eatwell.bg-color p,
.column-eatwell.bg-color span,
.column-eatwell.bg-color h3,
.column-eatwell.bg-color h2,
.column-eatwell.bg-color h1 {
	color: #000;
}

.column-livewell.bg-color a,
.column-livewell.bg-color p,
.column-livewell.bg-color span,
.column-livewell.bg-color h3,
.column-livewell.bg-color h2,
.column-livewell.bg-color h1 {
	color: #000;
}

.column-seewell.bg-color a,
.column-seewell.bg-color p,
.column-seewell.bg-color span,
.column-seewell.bg-color h3,
.column-seewell.bg-color h2,
.column-seewell.bg-color h1 {
	color: #fff;
}

.column-joinwell.bg-color a,
.column-joinwell.bg-color p,
.column-joinwell.bg-color span,
.column-joinwell.bg-color h3,
.column-joinwell.bg-color h2,
.column-joinwell.bg-color h1 {
	color: #fff;
}

/*wave link*/

/* updated 10 june 20*/


.wavelink {
	transition: .2s ease;
	box-shadow: inset 0px -1.5px 0 transparent;
}

.wavelink:hover {
  	box-shadow: inset 0px -1.5px 0 #000;
	background-position: bottom;
    background-repeat: repeat-x;
    background-size: 11px;
    border-bottom: 0;
    padding-bottom: 0;
    text-decoration: none;
    display: inline;
}

a h2.wavelink {
	display: inline;	
	line-height: .9;
}
a h2.wavelink:hover {
  	box-shadow: inset 0px -2px 0 #000;
		background-position: bottom;
    background-repeat: repeat-x;
    background-size: 25px;
    border-bottom: 0;
    padding-bottom: 0;
    text-decoration: none;
    display: inline;
}

a h3.wavelink {
	display: inline;	
	line-height: 1;
}
a h3.wavelink:hover {
    box-shadow: inset 0px -1.5px 0 #000;
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 18px;
    padding-bottom: 0;
    text-decoration: none;
    display: inline;
}

.column-joinwell.bg-color a h2.wavelink:hover,
.column-joinwell.bg-color a h3.wavelink:hover {
	box-shadow: inset 0px -2px 0 #fff;
}

.column-joinwell.bg-color a.wavelink:hover {
	box-shadow: inset 0px -1.5px 0 #fff;
}


.column-workwell.bg-color a h2.wavelink:hover,
.column-workwell.bg-color a h3.wavelink:hover {
	box-shadow: inset 0px -2px 0 #fff;
}

.column-workwell.bg-color a.wavelink:hover {
	box-shadow: inset 0px -1.5px 0 #fff;
}

.column-gowell.bg-color a h2.wavelink:hover,
.column-gowell.bg-color a h3.wavelink:hover {
	box-shadow: inset 0px -2px 0 #fff;
}

.column-gowell.bg-color a.wavelink:hover {
	box-shadow: inset 0px -1.5px 0 #fff;
}

.column-seewell.bg-color a h2.wavelink:hover,
.column-seewell.bg-color a h3.wavelink:hover {
	box-shadow: inset 0px -2px 0 #fff;
}

.column-seewell.bg-color a.wavelink:hover {
	box-shadow: inset 0px -1.5px 0 #fff;
}

.column-eatwell.bg-color a h2:hover,
.column-eatwell.bg-color a h3:hover{
	box-shadow: inset 0px -2px 0 #000;
}

.column-eatwell.bg-color a.wavelink:hover {
	box-shadow: inset 0px -1.5px 0 #000;
}

/*end*/

.right-align {
	right: 0;
	bottom: 0
}

.left-align {
	left: 0;
	bottom: -1px;
}

body {
	padding: 0;
	margin: 0;
}

.img-fluid {
	max-width: 100%;
	height: auto;
	width: 100%;
}

.container{
    max-width: 92%;
}

@media (min-width: 1600px) {
	.container {
		max-width: 1500px;
	}
}

@media (max-width: 1100px) {
	.container {
		max-width: 96%;
	}
	.font-55 {
		font-size: 44px;
	}
	.font-28 {
		font-size: 26px;
	}
	.font-46 {
		font-size: 40px;
	}
	.font-30 {
		font-size: 28px;
	}
}

@media (max-width: 991px) { 
	.font-70 {
		font-size: 55px;
	}	

	.font-55 {
		font-size: 55px;
	}
}

@media (max-width: 767px) { 
	.font-70 {
		font-size: 36px;
	}	

	.font-55 {
	    font-size: 36px;
	}
	.container {
		max-width: 100%;
	}
	.font-28 {
		font-size: 22px;
	}
	.font-46 {
		font-size: 28px;
	}
	.font-24 {
		font-size: 22px;
		line-height: 1.1;
	}
	.font-26 {
		font-size: 24px;
	}
}


/* ––––––––––––––––––––––––––––––––––––––––––––––––––

INFINITE LOOP

–––––––––––––––––––––––––––––––––––––––––––––––––– */

.loader-ellips {
	font-size: 20px;
	position: relative;
	width: 4em;
	height: 1em;
	margin: 10px auto;
}

.loader-ellips__dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
	left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
	from { transform: scale(0.001); }
	to { transform: scale(1); }
}

@keyframes slide {
	to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
	animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
	animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
	animation-name: reveal;
	animation-direction: reverse;
}

.page-load-status {
	display: none; 
	padding-top: 40px;
	/* padding-bottom: 60px; */
	text-align: center;
	color: #777;
}

/* ---------------------------------------------------------------------

																ACF MAP

---------------------------------------------------------------------- */

.acf-map {
    width: 100%;
    height: 400px;
    border: none;
    margin: 0;
    min-height: 300px;
}

.acf-map img {
   max-width: inherit !important;
}


/*---------------------  HEADER  ---------------------------------------*/


header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 20px 30px;
    z-index: 99999;
	position: fixed;
	top: 0;
	background: #fff;
}

.left-head .hamburger-img {
	margin-right: 5px;
	position: relative;
	top: -2px;
}

header a {
	font-size: 22px;
}

header .right-head  a {
	margin-left: 20px;
}

header .left-head  a {
	margin-right: 20px;
}

header .right-head a.search {
	margin-right: 15px;
}

.social-head {
	display: flex;
	list-style: none;
	padding-left: 0;
	margin: 0;
	align-items: center;
}

.social-head a {
	margin-right: 0;
	margin-right: 7px !important;
	margin-left: 7px !important;
}

.collab .social-head a {
	margin-right: 10px !important;
	margin-left: 0 !important;
}

.right-head {
	display: flex;
}

.logo-header {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 999999;
	width: 200px;
	top: 19px;
}

.home .logo-header {
	width: 90%;
	top: 100px;
}

header {
	border-bottom: 1px solid rgba(0, 0, 0, 0);
}

header.fixed {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

header.fixed .logo-header {
	width: 200px;
	top: 19px;
}

header,
.logo-header {
	transition: .8s ease;
}

@media (max-width: 1100px) {
	.hamburger span {
		display: none;
	}
}

@media (max-width: 991px) {
	header .left-head > *,
	header .right-head > * {
		display: none;
	}
	header .left-head > .keepmobile,
	header .right-head > .keepmobile {
		display: block;
	}
	.keepmobile span {
		display: none;
	}
	.home .logo-header {
		top: 80px;
	}
	.logo-header {
		top: 19px;
	}
	header .right-head a.search {
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	header {
	    padding: 10px 15px;
	}
	.home .logo-header {
		top: 57px;
	}
	.logo-header {
		width: 150px;
		top: 12px;
	}
	header.fixed .logo-header {
		width: 150px;
		top: 12px;
	}
	.left-head .hamburger-img {
		top: -3px;
	}
	.keepmobile.search {
		top: -2px;
    	position: relative;
	}
}

/*---------------------  Banner  ---------------------------------------*/


#banner {
    margin-top: 16vw;
    padding-bottom: 50px;
}

.banner-thumb {
	position: relative;
    height: 100%;
    display: block;
    overflow: hidden;
}

.column-side a {
    transform: rotate(270deg);
    display: block;
    font-size: 40px;
    transform-origin: left bottom;
    position: absolute;
    top: 100px;
    left: 4px;
    font-family: 'gap_sansblack';
} 
 #banner .column-side a {
	top: 379px;
    left: 7px;
    width: 400px;
    text-align: right;
}
.half-mascot {
	position: absolute;
	width: auto;
	height: auto;
}

.content-box {
	padding: 30px;
	padding-top: 115px;
	padding-right: 0;
}

/* updated 10 june 20*/

.postinfo {
	font-size: 16px;
	display: block;
	margin-top: 10px;
}


#banner .postinfo {
	font-size: 18px;
	margin-top: 20px;
}

/* end */

p.nocontent {
    text-align: center;
    width: 100%;
    padding-top: 20vh;
    padding-bottom: 20vh;
}

p.infinite-scroll-error {
	margin: 0;
}

#banner {
    -webkit-mask-image: url(images/mask.png);
    mask-image: url(images/mask.png);
    -webkit-mask-size: 110%;
    mask-size: 110%;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}

@media (min-width: 1600px) {
	.column-side a {
		top: 165px;
	}
}

@media (max-width: 1100px) {
	#banner .col-lg-8 {
		margin-left: 20px;
	    margin-right: -20px;
	}

	.column-side a {
	    font-size: 30px;
	    top: 95px;
	    left: 10px;
	}
	.content-box {
		padding-top: 80px;
		padding-right: 10px;
	}
	#banner {
    	margin-top: 192px;
	}

}

@media (max-width: 991px) {
	#banner {
	    margin-top: 210px;
	}
	#banner .col-lg-8 {
		padding-right: 0;
	}
	.content-box {
	    padding: 20px 10px 0 15px;
	    max-width: 80%;

	}
	#banner {
	    -webkit-mask-size: 1811px;
	    mask-size: 1811px;

	}
}

@media (max-width: 767px) {
	#banner {
	    margin-top: 120px;
	    padding-bottom: 40px;
	}
	.postinfo a.wavelink + br {
		display: none;
	}
	.column-side a {
	    font-size: 18px;
	    top: 58px;
	    left: 11px;
	}
	#banner .col-lg-8 {
	    margin-left: 20px;
	    margin-right: -20px;
	}
	#banner .content-box {
		max-width: 95%;
	}
	#banner .postinfo {
		font-size: 16px;
	}

	#banner .content-box h2{
		margin-bottom: 10px;
	}
	.postinfo {
		font-size: 16px;
	}
	.half-mascot {
	    max-width: 150px;
	    max-height: 170px;
	}
}

/*---------------------  About  ---------------------------------------*/

.about {
	padding-top: 100px;
	padding-bottom: 100px;
	position: relative;
}

.about .container  {
	position: relative;
	height: 100%;
}

.about p {
	font-size: 50px;
	font-family: 'gap_sansblack';
	max-width: 900px;
	line-height: 1.3;
}

.mascot-green {
    position: absolute;
    bottom: -176px;
    left: 58px;
    width: 122px;
}

.mascot-pink {
    position: absolute;
    right: 192px;
    width: 113px;
    bottom: -147px;
}

.mascot-red {
    position: absolute;
    top: -173px;
    right: 0;
    width: 213px;
}

@media (max-width: 1100px) {
	.about p {
	    font-size: 44px;
	    max-width: 645px;
	}
	.about {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

@media (max-width: 991px) {
	.mascot-pink {
		right: 199px;
   		bottom: -242px;
	}

	.mascot-red {
		top: -156px;
	}

	.mascot-green {
		bottom: -144px;
		left: 66px;
	}
}

@media (max-width: 767px) { 
	.about p {
		font-size: 26px;
		max-width: 90%;
	}
	.about {
    	padding-top: 30px;
    	padding-bottom: 40px;
    	height: 350px;
	}
	.mascot-red {
	    top: auto;
	    bottom: -100px;
	    width: 105px;
	    right: 26px;
	}
	.mascot-pink {
		width: 32px;
		right: 15px;
		bottom: auto;
		top: 0;
	}
	.mascot-green {
	    bottom: -117px;
	    left: 37px;
	    width: 53px;
	}

}
/*---------------------  Latest  ---------------------------------------*/

.latest {
	padding-top: 70px;
}

.title-text {
	font-size: 60px;
	font-family: 'gap_sansblack';
	font-weight: 400;
}

.latest-list {
	display: flex;

}

.latest-list .thumbnail {
	max-height: 580px;
}

.main-post {
	width: 100%;
}

.side-post {
	position: relative;
	width: 70px;
}

.latest-list .column-side a {
    top: 379px;
    left: 50px;
    width: 400px;
    font-size: 27px;
    text-align: right;
}

.bottom-part {
	padding: 25px;
}

.col-lg-5 .bottom-part h3 {
	margin: 0;
	max-width: 350px;
	margin-bottom: 10px;
}

.col-lg-7 .bottom-part h3 {
	margin: 0;
	max-width: 420px;
	margin-bottom: 10px;
}

.flex-end {
	align-self: flex-end;
}

.latest .row > div {
	margin-bottom: 30px;
}

.latest .title-text {
	margin-bottom: -56px;
}

.thumbnail {
	transform: scale(1);
	transition: .5s ease;
}

.thumbnail:hover {
	transform: scale(1.1);
}

.top-part,
.thumb-side,
.thumb-top {
	overflow: hidden;
}

.latest .bg-color{
 	-webkit-mask-image: url("images/mask.png");
  	mask-image: url("images/mask.png");
	-webkit-mask-size: 1811px;
	mask-size: 1811px;
	-webkit-mask-position: right bottom;
	mask-position: right bottom;
	
}

.latest-wrap > div {
	padding-left: 15px;
	padding-right: 15px;
}

.latest-wrap > div:first-child {
	align-self: flex-end;
}

.latest-wrap > div:first-child,
.latest-wrap > div:last-child {
	-ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.latest-wrap > div:nth-child(2),
.latest-wrap > div:nth-child(3) {
	-ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.latest-wrap > div:nth-child(2) .bottom-part, .latest-wrap > div:nth-child(3) .bottom-part{
	max-width: 500px !important;
}




@media(max-width: 1100px) {
	.latest .title-text {
    	margin-bottom: -22px;
	}
	.title-text {
		font-size: 50px;
	}
}

@media(max-width: 991px) {
	.latest .title-text {
		margin-bottom: 50px;
		margin-left: 4vw;
	}
	.latest-wrap {
		padding-left: 30px;
		padding-right: 30px;
	}
	.latest-wrap > div .bottom-part {
		max-width: 500px !important;
	}
	.latest .latest-wrap > div {
		-ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}
	.latest {
		max-width: 100%;
		padding-right: 0;
		padding-left: 0;
	}
	.latest .bg-color {
		-webkit-mask-position:  bottom;
		mask-position:  bottom;
		-webkit-mask-size: auto 100%;
    	mask-size: auto 100%;
	}
	.latest .row > div {
		margin-bottom: 30px;
	}
	.col-lg-5 .bottom-part h3,
	.col-lg-7 .bottom-part h3 {
		max-width: 90%;
		font-size: 36px;
	}
	.bottom-part {
		padding-bottom: 40px;
	}
}


@media(max-width: 767px) {
	.title-text {
		font-size: 34px;
	}
	.latest {
		padding-top: 0;
	}
	.latest .row > div {
		margin-bottom: 10px;
	}
	.latest-wrap {
		padding-left: 0;
		padding-right: 0;
	}
	.latest .title-text {
	    margin-left: 4vw;
	}
	.col-lg-5 .bottom-part h3, .col-lg-7 .bottom-part h3 {
		font-size: 24px;
		max-width: 100%;
	}
	.bottom-part {
		padding: 15px;
		padding-bottom: 30px;
	}
	.latest-list .column-side a {
	    font-size: 18px;
	    left: 31px;
	    top: 385px;
	}
	.side-post {
	    width: 40px;
	}

	.latest .bg-color {
		-webkit-mask-size: 1811px;
		mask-size: 1811px;
	}

}
/*---------------------  Popular  ---------------------------------------*/


.playlist {
	padding-top: 40px;
}

.playlist-list {
	display: flex;
	margin-bottom: 50px;
}

.playlist-archive {
	background-color: #F2F2F2;
	padding: 60px 0 115px;
	margin-top: 80px;
}

/*updated 10 june 20*/

.category-tag {
	font-family: 'gap_sansblack';
	font-size: 15px;
	margin-bottom: 10px;
	display: block;
}

/*end*/

.content-side {
	padding-left: 30px;
	padding-right: 30px;
}

.content-side h3 {
	margin-top: 0;
	margin-bottom: 10px;

}

.playlist-list div {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 50%;
   position: relative;
}

.playlist-list-vertical {
	padding-bottom: 60px;
}

.btn-center-wrap {
	margin: 0 auto;
	text-align: center;
}

.btn-edge {
	font-weight: 700;
	padding: 18px 28px;
	border: 2px solid #000000;
	text-transform: uppercase;
	font-size: 20px;
	display: inline-block;
	margin-top: 20px;
}

.btn-edge:hover {
	border: 2px solid #ccc;
}

.playlist-list-vertical div {
	position: relative;
	margin-bottom: 5px;
}

.meta-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0 20px;
}

.meta-wrap * {
	margin: 0;
}

.thumb-side .views,
.thumb-top .views {
    position: absolute;
    bottom: 6px;
    right: 7px;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    text-shadow: -1px 1px 4px #000000b3;
}

.single-post .hero-post-inner .views #eye-regular-2 {
    fill: #232020;
}

.thumb-side a,
.thumb-top a {
	display: block;
	position: relative;
}

.playlist h2 {
	margin-bottom: 20px;
}

.playlist .row {
	margin-top: 60px;
}

@media (max-width: 1100px) {
	.content-side {
		padding-right: 5px;
		padding-left: 20px;
	}
}

@media (max-width: 991px) {
	.playlist-list {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	.playlist .row {
	    margin-top: 40px;
	    margin-left: -15px;
	    margin-right: -15px;
	}
	.content-side {
	    padding-right: 0;
	    padding-left: 0;
	    margin-top: 10px;
	    margin-bottom: 10px;
	}
	.playlist-archive .row {
		margin-left: -8px;
	    margin-right: -8px;
	}
	.playlist {
    	padding-top: 10px;
	}
	.playlist-list .thumb-side {
		flex-basis: 40%;
	}
	.playlist-list .content-side {
		flex-basis: 60%;
	}
	.category-tag {
	    font-size: 16px;
	    margin-bottom: 5px;
	}
	.thumb-side .views {
		font-size: 18px;
	}
	.playlist .thumbnail {
	    height: 100%;
	    object-fit: cover;
	}
	.content-side h3 {
		margin-bottom: 0;
	}
	.playlist-list {
		margin-bottom: 20px;
		display: block
	}
	.subtitle {
		max-width: 70%;
	}
	.thumb-side a {
		height: 100%;
	}
}

/*---------------------  Feature  ---------------------------------------*/

.feature > div:last-child {
	margin-bottom: 0;
}


.feature-right {
	padding-left: 5%;
	width: 100%;
}

.feature-left {
	padding-right: 5%;
	width: 100%;
}

.feature-wrap.feature-left .content-side {
	max-width: none;
}

.feature-wrap {
	margin-bottom: 5vw;
}

.feature {
	padding-top: 100px;
}

.feature-wrap .thumb-side {
	padding: 0;
}

.feature-wrap .content-side {
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 50px;
	max-width: 650px;
}

.half-mascot {
	position: absolute;
}

.feature-wrap h2 {
	margin-bottom: 20px;
}

.column-btm {
	font-size: 40px;
	font-family: 'gap_sansblack';
}

.column-btm-wrap {
    padding-top: 15px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

.feature-left .column-btm-wrap {
	text-align: right;
}

/* mask */

.feature-right .bg-color{
    -webkit-mask-image: url(images/mask.png);
    mask-image: url(images/mask.png);
    -webkit-mask-size: 110%;
    mask-size: 110%;
    -webkit-mask-position: left bottom;
    mask-position: 5vw bottom;
}


.feature-left .bg-color {
    -webkit-mask-image: url(images/mask.png);
    mask-image: url(images/mask.png);
    -webkit-mask-size: 110%;
    mask-size: 110%;
    -webkit-mask-position: right bottom;
    mask-position: 5vw bottom;
}

@media (min-width: 1600px) {
	.feature-left {
		padding-right: 10%;
	}
	.feature-right {
		padding-left: 10%;
	}
}
@media (max-width: 1100px) { 
	.feature-left {
		padding-right: 3%;
	}
	.feature-right {
		padding-left: 3%;
	}
	.feature-wrap {
		margin-bottom: 3vw;
	}
	.feature {
		padding-top: 80px;
	}
}

@media (max-width: 991px) {
	.feature-wrap .content-side {
	    padding-left: 30px;
	    padding-top: 30px;
	    max-width: 600px !important;
	}
	.feature .font-24 {
		max-width: 100%;
	}
	.feature {
		padding-top: 40px;
	}
	.feature-right .bg-color,
	.feature-left .bg-color{
	    -webkit-mask-size: 1811px;
	    mask-size: 1811px;
	}
}

@media (max-width: 767px) {

	.feature .font-24 {
		max-width: 100%;
		margin-top: 10px;
		padding-right: 20px;
	}
	.column-btm {
		font-size: 25px;
	}
	.feature-wrap h2 {
		margin-bottom: 0;
	}
	.feature-left .content-side {
		padding-left: 20px;
	}

}
/*---------------------  Column  -------------------*/

/* updated 10 june 20*/


.section-column {
	max-width: 1300px;
}

object{
    pointer-events: none;
}

.section-column {
	height: 680px;
	position: relative;
}

.section-column  object{
	width: 100%;
}

.section-column .title-text {
	display: none;
}

.column-text {
	margin: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0;
	max-width: 100%;
	width: 90%;
}


.mascot-workwell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 17vw;
    left: -74%;
    width: 8%;
}

.mascot-seewell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 7vw;
    left: -25%;
    width: 13%;
}

.mascot-eatwell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 48%;
    left: 11%;
    width: 3.3%;
}

.mascot-gowell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: -12vw;
    left: 79%;
    width: 9%;
}


.mascot-livewell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 3vw;
    left: 25%;
    width: 8%;
}

.mascot-joinwell {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: 31%;
    left: 69%;
    width: 15%;
}

.clickme {
    position: absolute;
    margin: auto;
    right: 0;
    bottom: 0;
    top: -23vw;
    left: 15%;
    width: 10%;
}

@media (max-width: 1100px) {
	.section-column {
		height: 500px;
	}
}
@media (max-width: 991px) {
	.column-text {
		display: none;
	}
	.section-column .title-text {
		display: block;
		font-size: 80px;
	}
	.section-column {
		height: 800px;
	}
}
@media (max-width: 767px) {
	.mascot-livewell {
	    top: -2vw;
	    left: -61%;
	    width: 21%;
	}
	.mascot-workwell {
	    top: 1vw;
	    left: -10%;
	    width: 22%;
	}
	.section-column h2 {
	    font-size: 60px;
	    margin-bottom: 0;
	    display: block;
	}
	.section-column a {
		max-height: 200px;
	}
	.mascot-seewell {
	    top: 80vw;
	    left: -39%;
	    width: 26%;
	}
	.section-column .title-text {
		font-size: 60px;
	}
	.mascot-eatwell {
	    top: 24%;
	    left: 65%;
	    width: 9.3%;
	}
	.mascot-gowell {
	    top: 25vw;
	    left: 25%;
	    width: 23%;
	}
	.mascot-joinwell {
	    top: -30%;
	    left: 56%;
	    width: 33%;
	}
	.clickme {
	    top: -68vw;
	    left: -24%;
	    width: 20%;
	}
	.section-column {
		height: 510px;
		width: 370px;
	}
}


/*end*/

/*---------------------  IG + Subscribe  ---------------------------------------*/

.ig-side {
    background: #3D4A90;
    padding: 50px;
    padding-bottom: 60px;
    padding-left: 5%;
}

.subscribe-side {
	background: #EBB65B;
	padding: 50px;
}

.top-ig img {
	width: 45px;
	height: 45px;
}

.main-ig.row {
	margin: 0;
}

.ig-wrap {
    background: #fff;
    padding: 10px;
    max-width: 500px;
    position: relative;
    -webkit-mask-image: url(images/mask-ig2.png);
    mask-image: url(images/mask-ig2.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: top;
    mask-position: top;
}

.main-ig > div {
	padding: 1px;
}

.main-ig img {
	max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.top-ig {
	display: flex;
	flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
}

.top-ig * {
	display: inline-block;
	margin: 0;
}
.top-ig button {
    border: none;
    background: #3d4a90;
    color: #fff;
    padding: 12px 22px;
    font-size: 18px;
    border-right: 0;
    cursor: pointer;
}

.ig-mascot {
    position: absolute;
    right: 48px;
    bottom: 0;
}

.ig-subscribe h2 {
	margin-top: 0;
}


.subscribe-form input[type=email] {
	border: none;
	height: 60px;
	border-radius: 0;
	width: 70%;
	font-size: 24px;
	padding: 0 15px;
	display: inline-block;
}

.subscribe-form input[type=submit] {
	border: none;
	height: 60px;
	border-radius: 0;
	width: 28%;
	font-size: 24px;
	padding: 0 15px;
	background: #A33134;
	color: #fff;
	display: inline-block;
	margin-left: -3px;
}

.subscribe-form {
    position: absolute;
    bottom: 60px;
    width: 100%;
    max-width: 550px;
}

.subscribe-mascot {
    position: absolute;
    top: 34px;
    right: 46px;
}


.ig-subscribe {
    -webkit-mask-image: url(images/mask.png);
    mask-image: url(images/mask.png);
    -webkit-mask-size: 150%;
    mask-size: 150%;
    -webkit-mask-position: top;
    mask-position: top;
}

@media(max-width: 1300px) {
	.subscribe-form {
		max-width: 500px;
	}
	.ig-wrap {
    	max-width: 450px;
	}
} 

@media(max-width: 1100px) {
	.subscribe-form {
		max-width: 400px;
	}
	.ig-wrap {
    	max-width: 350px;
	}
	.subscribe-mascot {
    	right: 0;
	}
	.ig-subscribe {
	    -webkit-mask-size: 1811px;
	    mask-size: 1811px;
	}
} 

@media(max-width: 991px) {
	.ig-wrap {
		max-width: 90%;
	}
	.subscribe-side,.ig-side {
		padding-left: 4vw;
	}
	.subscribe-form {
		position: relative;
		bottom: 0;
	}

}

@media(max-width: 767px) {
	.ig-subscribe {
		-webkit-mask-size: 1811px;
    	mask-size: 1811px;
	}
	.ig-mascot {
		display: none;
	}
	.ig-wrap {
		max-width: 100%;
	}
	.subscribe-side, .ig-side {
	    padding-right: 4vw;
	    padding-top: 30px;
	    padding-bottom: 30px;
	}
	.ig-subscribe h2 {
		font-size: 26px !important;
	}
	.subscribe-mascot {
	    right: 15px;
	    width: 106px;
	}
	.subscribe-form input[type=email] {
		height: 46px;
	    width: 65%;
	    font-size: 20px;
	}
	.subscribe-form input[type=submit] {
	    height: 46px;
	    width: 34%;
	    font-size: 20px;
	}
}

/*---------------------  Footer  ---------------------------------------*/


footer {
	background: #000000;
	padding: 100px 0 60px;
	-webkit-mask-image: url(images/mask.png);
	mask-image: url(images/mask.png);
	-webkit-mask-size: 150%;
	mask-size: 150%;
	-webkit-mask-position: top;
	mask-position: top;
	margin-top: -7px;
}

footer * {
	color: #fff;
	font-size: 20px;
}

footer ul{
	padding-left: 0;
	list-style: none;
}

footer .row > div {
	padding-left: 0;
}

footer li {
	margin-bottom: 10px;
}

.logo-footer {
	margin-bottom: 30px;
}

.text-right {
	text-align: right;
}

.social-footer li {
	display: inline-block;
	margin-left: 10px;
}

.social-footer + a {
	margin-right: 10px;
}


.credit {
	top: 50px;
	position: relative;
}

.subscribe-footer {
	position: relative;
}

.subscribe-footer-inner {
	-webkit-mask-image: url(images/mask.png);
	mask-image: url(images/mask.png);
	-webkit-mask-size: 150%;
	mask-size: 150%;
	-webkit-mask-position: top;
	mask-position: top;
	background: #EBB65B;
	padding: 20px 0;
	margin-top: -5px;
}

.subscribe-footer .subscribe-form {
	position: relative;
	bottom: 0;
}

.subscribe-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.subscribe-inner .text-wrap h2 {
	margin-bottom: 0;
}

.subscribe-inner .text-wrap p {
	margin-top: 10px;
}

.subscribe-footer .subscribe-mascot {
	width: 120px;
	left: 350px;
	right: unset;
	top: -10px;
	z-index: 9;
}

@media (max-width: 1100px) {
	footer * {
		font-size: 18px;
	}
	footer {
	    padding: 80px 0 40px;
	}
}

@media (max-width: 991px) {
	footer .row > div {
		text-align: left;
	}
	.credit {
		top: 0;
		margin-top: 5px;
	}
	.social-footer li {
		margin-left: 0;
		margin-right: 10px;
	}
	footer .col-12 {
		border-top: solid 1px #363636;
	}
	footer {
    	padding: 50px 0 40px;
	}
	.subscribe-footer .subscribe-mascot {
		left: 208px;
	}

}

@media (max-width: 767px) {
	.logo-footer {
	    margin-bottom: 12px;
	    width: 150px;
	}
	footer * {
    	font-size: 16px;
	}
	footer {
    	padding: 40px 0 20px;
	}
}

/* ---------------------------------------------------------------------

																Category

---------------------------------------------------------------------- */

.intro-archive {
	margin-top: 120px;
}

.intro-archive h1 {
	font-size: 120px;
	margin: 0;
	padding-top: 20px;
	font-family: 'gap_sansblack';
	font-weight: 400;
}

.intro-archive p {
	margin-top: 30px;
}

.intro-archive .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.intro-archive .content-wrap {
	max-width: 620px;
	min-height: 226px;
}

.intro-archive .mascot-wrap {
	margin-right: 30px;
	width: 200px;
	text-align: right;
}

.intro-archive .mascot-wrap img {
	width: 100%;
	max-height: 300px;
}

.archive-feature {
	padding-top: 50px;
}


.intro-archive .mascot-wrap object{
	min-height: 200px;
}

@media (max-width: 991px) {
	.intro-archive h1 {
		font-size: 80px;
	}
	.intro-archive .content-wrap {
		max-width: 420px;
	}
	.subscribe-footer-inner .text-wrap {
		max-width: 250px;
		padding-right: 20px;
	}
	.playlist-archive {
		padding: 30px 0 85px;
		margin-top: 60px;
	}
}

@media (max-width: 767px) {
	.intro-archive {
        margin-top: 80px;
    	overflow: hidden;
    	width: 100%;
    	position: relative;
	}
	.intro-archive h1 {
		font-size: 40px;
	}
	.intro-archive .mascot-wrap {
    	margin-right: 0;
	}
	.intro-archive .mascot-wrap img {
		max-height: 200px;
	}
	.intro-archive .mascot-wrap {
		width: 90px;
	}
	.intro-archive .content-wrap {
		max-width: 450px;
	}
	.archive-feature {
    padding-top: 0;
	}
	.playlist-archive {
		padding: 15px 0 45px;
		margin-top: 40px;
	}
	.playlist-list-vertical {
	    padding-bottom: 20px;
	    padding-left: 8px;
	    padding-right: 8px;
	}
	.btn-edge {
    padding: 9px 17px;
    font-size: 16px;
    margin-top: 0;
	}
	.subscribe-footer .subscribe-mascot {
    left: 210px;
    top: -30px;
	}
	.subscribe-footer-inner {
		padding: 0px 0 26px;
	}
	.subscribe-inner .text-wrap h2 {
		font-size: 26px !important;
	}
	.subscribe-inner .text-wrap p {
		margin-top: 20px;
	}
	.category-gowell .mascot-wrap {
		position: absolute;
		right: 0;
		top: 0;
	}
}

@media (max-width: 575.25px) {
	.subscribe-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.subscribe-footer .subscribe-mascot {
		left: unset;
		top: -10px;
		right: 20px;
	}
	.intro-archive .content-wrap {
		max-width: 60vw;
	}
}

/* ---------------------------------------------------------------------

																Menu with Post Name

---------------------------------------------------------------------- */

.single-post .fixed-show {
	display: none;
}

.single-post .fixed .left-head .hamburger span {
	display: none;
}

@media (min-width: 991px) {
	header.fixed {
		display: flex;
		align-items: center;
	}

	.single-post .fixed .left-head {
		display: flex;
		align-items: center;
	}
	
	.single-post .fixed .fixed-show.logo-title {
		display: flex;
		align-items: center;
	}
	
	.single-post .fixed-show .logo-header {
		position: relative;
		max-width: 120px;
		top: -2px;
	}
	
	.single-post .fixed .fixed-show.logo-title p {
		margin: 0;
		font-size: 22px;
		padding-right: 30px;
		white-space: nowrap;
		width: 60vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.single-post .fixed .fixed-show.logo-title p span {
		font-weight: 700;
	}
	
	header .left-head .logo-title a {
		line-height: 1;
	}
	
	.single-post .fixed .fixed-show {
		display: inline-block;
	}
	
	.single-post .fixed .fixed-hide {
		display: none;
	}
	
	.right-head .fixed-show.share-title {
		font-size: 20px;
		position: relative;
		top: 3px;
		line-height: 1;
	}
}

/* ---------------------------------------------------------------------

																Single

---------------------------------------------------------------------- */
.theme-light.single-post .logo-header {
	filter: brightness(1000%);
}

.theme-light.single-post .hero-post-inner .views,
.theme-light.single-post header a {
	color: #fff;
}

.theme-light.single-post header.fixed a {
	color: #000;
}

.theme-light.single-post .right-head img,
.theme-light.single-post .left-head img {
	filter: invert(1);
}

.theme-light.single-post .fixed .right-head img,
.theme-light.single-post .fixed .left-head img {
	filter: invert(0);
}

.theme-light.single-post .hero-post-inner .views #eye-regular-2 {
	fill: #fff;
}

.single-post header, .single-post .logo-header {
	transition: .3s ease;
}

.single-post article body,
.single-post article h1,
.single-post article h2,
.single-post article h3,
.single-post article h4,
.single-post article p,
.single-post article ul[class],
.single-post article ol[class],
.single-post article li,
.single-post article figure,
.single-post article figcaption,
.single-post article blockquote,
.single-post article dl,
.single-post article dd {
	margin: 0;
	color: #232020;
}

.single-post article h4 {
	margin-bottom: 10px !important;
}

.single-post article blockquote p {
	border-left-width: 4px;
	font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
	border-style: solid;
	border-top: none;
	border-right: none;
	border-bottom: none;
	padding-left: 30px;
}

blockquote {
	margin-bottom: 30px !important;
}

.category-livewell.single-post blockquote p {
	border-left-color: #DB8035;
}

.category-workwell.single-post blockquote p {
	border-left-color: #396D5A;
}

.category-gowell.single-post blockquote p {
	border-left-color: #3D4A90;
}

.category-eatwell.single-post blockquote p {
	border-left-color: #E4B538;
}

.category-seewell.single-post blockquote p {
	border-left-color: #232020;
}

.category-joinwell.single-post blockquote p {
	border-left-color: #A33134;
}

.category-joinwell .mascot-wrap {
	width: 350px;
}


.category-gowell  .mascot-wrap {
	width: 350px;
}



.single-post article .hero-post-inner h1 {
	font-size: 60px;
	max-width: 600px;
	line-height: .9;
}

.hero-post-inner .category-tag {
	font-size: 20px;
	margin-bottom: 20px;
	color: #232020;
	display: inline-block;
}

.hero-post-inner .meta-date, .hero-post-inner  .meta-author {
	font-size: 20px;
}

.theme-light.single-post .hero-post-inner .category-tag,
.theme-light.single-post article h1,
.theme-light.single-post .hero-post-inner,
.theme-light.single-post .hero-post-inner a {
	color: #fff;
}

.meta-date,
.meta-author {
	font-size: 16px;
	display: block;
}

.meta-author {
	margin-top: 6px;
}

.meta-date {
	margin-top: 30px;
}

.single-post article img {
    max-width: 100%;
    display: block;
    max-height: 900px;
    width: auto;
    margin: auto;
    width: 100%;
    object-fit: cover;
    object-position: bottom; 
}

.single-post article .masonry img {
	width: 100%;
	height: auto;
}

.single-post header {
	background: transparent;
}

.single-post .logo-header {
	filter: brightness(0);
}

.single-post header.fixed .logo-header {
	filter: none;
}

.single-post header.fixed {
	background: white;
}

.hero-post.column-workwell {
	background: #396D5A;
}

.hero-post.column-gowell {
	background: #3D4A90;
}

.hero-post.column-eatwell {
	background: #E4B538;
}

.hero-post.column-livewell {
	background: #DB8035;
}

.hero-post.column-seewell {
	background: #232020;
}

.hero-post.column-joinwell {
	background: #A33134;
}

.hero-post {
	padding-top: 65px;
	-webkit-mask-image: url(images/mask.png);
	mask-image: url(images/mask.png);
	-webkit-mask-size: 110%;
	mask-size: 110%;
	-webkit-mask-position: bottom;
	mask-position: bottom;
}

.hero-post img {
	height: 90vh;
    object-fit: cover;
    object-position: center;
}

.hero-post-inner {
	display: flex;
}

.hero-post-inner .content,
.hero-post-inner .image {
	width: 50%;
}

.hero-post-inner .views {
    font-size: 20px;
    font-weight: 700;
	color: #232020;
	margin-left: 10px;
	font-weight: 700;
} 

/* .hero-post-inner .image  {
	height: 90vh;
} */

.hero-post-inner .image {
	align-self: center;
}

.hero-post-inner .content {
	margin-top: auto;
	padding: 70px;
}

.single-post .flow {
	--flow-space: 1.4em;
	margin-top: 100px;
}  

.single-post .flow a {
	box-shadow: inset 0px -1.5px 0 #000;
}

.single-post .flow > * {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .flow > * + * { 
  margin-top: 0;
  margin-bottom: 25px;
}

.single-post .flow > h2 + * { 
  margin-top: calc(var(--flow-space) / 2);
}

.single-post article p,
.single-post article li {
	font-size: 24px;
	line-height: 1.3;
}

.single-post article li {
	margin-bottom: 8px;
}

.single-post article .flow h3,
.single-post article h5 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.single-post article h5 {
	margin-bottom: 30px;
}

.single-post article  h4 {
    font-size: 24px;
    line-height: 1.2;
}

.single-post article .flow h3 {
	margin-bottom: 20px;
	margin-top: 50px;
}

picture.media-flow {
	display: block;
}

.media-flow {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.single-post picture.square {
	display: block;
}

.single-post .media-flow {
	--flow-space: 3.5rem;
}

.single-post .media-narrow {
	max-width: 480px;
}

.single-post .media-gallery > * + * {
	margin-top: 30px;
}

.single-post .img-single {
	padding-left: 15px;
	padding-right: 15px;
}

.single-post .flow > .media-full {
	max-width: 100%;
}

.single-post .flow > .media-full > img {
    padding-left: 15px;
    padding-right: 15px;
}

.single-post .caption {
    font-size: 20px;
    color: #666;
    margin-top: 15px;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.1;
}

.normal-size img {
	width: auto !important;
}

.media-full + .media-full {
    margin-top: -30px !important;
}

.media-full .img-double {
	display: flex;
}

.media-full .img-double > * {
	padding-left: 15px;
	padding-right: 15px;
}

.masonry-wrapper {
	padding-left: 15px;
	padding-right: 15px;
	/* max-width: 1200px;
	margin-right: auto;
	margin-left: auto; */
}

.single-post .masonry .item {
    flex: 0 0 33.33%;
    padding: 10px;
}

.single-post .masonry .item img {
	height: 100%;
	max-height: 350px;
}

.single-post .masonry {
	display: flex;
    flex-wrap: wrap;
}

.single-post .thumb-list {
	--flow-space: 3.5rem;
	margin-top: 50px !important;
}

.single-post .thumb-list h3 { 
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}


.single-post .thumb-list p + p {
	margin-top: 0;
	margin-bottom: 25px;
}

.single-post .thumb-list .list {
	margin-bottom: 30px;
}

.square {
	position: relative;
	width: 100%;
	padding-top: 100%;
}

.square img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.info.media-flow {
	--flow-space: 5.5rem;
}

.info {
	border: 1px solid #000000;
	position: relative;
}

.info-inner {
	display: flex;
}

.info-inner .media-flow {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.info-inner .content {
	width: 50%;
	padding: 40px 50px 40px;
}

.acf-map {
	height: 100% !important;
}

.info-inner .content img {
    height: auto;
    min-width: 20px;
    max-height: 20px;
    object-fit: contain;
}

.info-inner .attachment {
	width: 50%;
	overflow: hidden;
	position: relative;
}

.info-inner .attachment .info-icon-wrap img {
    object-fit: cover;
    width: auto;
    right: 0;
    position: absolute;
    height: 100%;
}

.attachment iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.info-wrap {
	display: flex;
}

.info-icon-wrap {
	width: 20px;
	margin-right: 14px;
}

.info-icon-wrap img {
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
}

.info-icon-wrap,
.description {
	display: inline-block;
}

.info-inner .content > * + * {
	margin-top: 10px;
}

.info h3 {
	position: absolute;
	transform: rotate(-90deg);
	top: 0;
	left: -37px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: white;
	font-size: 60px;
	font-family: 'gap_sansblack';
	font-weight: 400;
}

.info .info-inner p {
	font-size: 22px;
	line-height: 1.1;
	margin-bottom: 0 !important;
}

.info .info-inner h4 {
	line-height: .9;
}

.info .btn-edge {
	padding: 8px 18px;
	box-shadow: none !important;
	margin-top: 20px;
}

.tags-inner {
	display: flex;
	justify-content: space-between;
}

.tags {
	--flow-space: 3rem;
	margin-top: 80px !important;
}

.tags,
.tags a {
	font-size: 20px;
	font-weight: 700;
}

.tag-group {
	max-width: 600px;
}

.tags .tag-group a {
	border: 2px solid #000;
	padding: 3px 10px 5px;
	display: inline-block;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	box-shadow:none;
}

.share {
	display: flex;
	align-items: center;
}

.share > div {
	margin-right: 14px;
}

.share > a {
	display: inline-block;
	margin-left: 4px;
	box-shadow: none !important;
}

.contributors .list {
	display: flex;
	align-items: center;
	margin-top: 30px;
	padding-bottom: 30px;
}

.contributors .list:first-of-type {
	border-bottom: 1px solid #000;
	position: relative;
}

.contributors .list:last-child {
	border-bottom: none;
}

.contributors .list:first-of-type::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 999;
	width: 100px;
	border-bottom: 1px solid #fff;
}

 .single-post article .contributors h3 {
	font-family: 'gap_sansblack';
	font-weight: 400;
	margin-bottom: 40px;
}

.contributors .list img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 30px;
}

.contributors .list .left {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.contributors .list span {
	font-size: 20px;
	display: inline-block;
}

.contributors .list .right {
	display: flex;
	flex: 1;
}

.contributors .list .name {
	max-width: 190px;
}

.contributors .list .name h4 {
	font-size: 24px;
	margin-bottom: 0 !important;
}

.contributors .list .right p {
	font-size: 20px;
	line-height: 1.15;
	margin-left: auto;
	width: 68%;
}

.playlist-next {
	background-color: #F2F2F2;
	padding: 30px 0 50px;
	margin-top: 60px;
	-webkit-mask-image: url(images/mask.png);
	mask-image: url(images/mask.png);
	-webkit-mask-size: 110%;
	mask-size: 110%;
	-webkit-mask-position: top;
	mask-position: top;
}

.playlist-next .thumbnail {
	width: 100%;
	object-fit: cover;
}

.single-post .playlist-popular {
	padding-top: 30px;
	margin-bottom: 80px;
}


@media (max-width: 1100px) {

	.single-post article .hero-post-inner h1 {
		font-size: 50px;
	}

}

@media (max-width: 991.25px) {
	.hero-post {
		-webkit-mask-size: 1811px;
		mask-size: 1811px;
	}
	.single-post .flow > * {
		max-width: 100%;
	}
	.hero-post img {
		height: 600px
	}
	.single-post .flow > .media-full > img {
		padding-left: 0;
		padding-right: 0;
	}
	.hero-post-inner .category-tag {
		font-size: 16px;
	}
	.hero-post-inner .content {
		padding: 30px;
	}
	.single-post article .hero-post-inner h1 {
		margin-bottom: 30px;
	}
	.single-post .flow {
		margin-top: 50px;
	}
	.single-post article .flow h3 {
		margin-top: 4px;
	}
	.single-post .media-flow,
	.single-post .thumb-list {
		--flow-space: 2.2rem;
	}
	.hero-post-inner .meta-date, .hero-post-inner .meta-author {
		font-size: 18px;
		margin-top: 0;
	}
	.media-full .img-double > *:first-child {
		padding-left: 0;
		padding-right: 8px;
	}
	.media-full .img-double > *:last-child {
		padding-left: 8px;
		padding-right: 0;
	}
	.masonry-wrapper {
		padding: 0;
	}
	.single-post .masonry .item {
		padding: 7px;
	}
	.single-post .masonry .item img {
		max-height: 180px;
		min-height: 180px;
	}
	.info.media-flow {
		--flow-space: 3rem;
		margin-top: 70px !important;
	}
	.info h3 {
		transform: rotate(0);
		top: -26px;
		left: 20px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		font-size: 50px;
	}
	.playlist-next {
		padding: 30px 0 30px;
		margin-top: 40px;
		-webkit-mask-size: 1811px;
		mask-size: 1811px;
	}
	.single-post .playlist-popular {
		padding-top: 20px;
		margin-bottom: 40px;
	}
	.meta-date {
		margin-top: 10px;
	}
	.media-full .img-double {
		flex-direction: column;
	}
	.media-full .img-double > *:first-child {
		padding-right: 0;
	}
	.media-full .img-double > *:last-child {
		padding-left: 0;
		margin-top: 30px;
	}
	.single-post blockquote p {
		border-left-width: 3px;
		padding-left: 15px;
	}

	.single-post .media-gallery > * + * {
		margin-top: 16px;
	}
	.single-post .img-single {
		padding-left: 0;
		padding-right: 0;
	}
}

article .hero-post.full-width-hero {
	height: 768px;
	position: relative;
}

article .hero-post.full-width-hero h1 {
	max-width: none;
}

.hero-post h1 br {
	display: none;
}

.full-width-hero h1 br {
	display: block;
}

article .hero-post.full-width-hero::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: rgba(0, 0, 0, 0.34);
}

.hero-post.full-width-hero {
	padding-top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-attachment: fixed !important;
}

.hero-post.full-width-hero .content {
	z-index: 9;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	width: 100%;
	max-width: 920px;
}

@media (max-width: 991.25px) {
	article .hero-post.full-width-hero {
		height: 600px;
	}
	
	.hero-post.full-width-hero .content {
		max-width: 520px;
	}
	.hero-post.full-width-hero {
		background-attachment: scroll !important;
	}
	.full-width-hero h1 br {
		display: none;
	} 
	.hero-post-inner .content, .hero-post-inner .image {
		width: 100%;
	}
	.hero-post-inner {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.info-inner .content {
    padding: 40px 30px 50px;
	}
	.single-post .thumb-list .list {
	    margin-bottom: 0;
	    margin-top: 10px;
	}
	.media-full .img-double > * {
		padding-left: 0;
		padding-right: 0;
	}
	.single-post article .flow h3,
	.single-post article .flow h4 {
		margin-bottom: -10px !important;
	}
	.single-post .masonry .item {
		flex: 0 0 50%;
		padding: 5px;
	}
	.info .info-inner h4 {
		font-size: 26px !important;
		margin-bottom: -15px !important;
	}
	.info .btn-edge {
		margin-top: 20px !important;
		font-size: 20px;
	}
	.hero-post img {
		height: auto;
	}
	.info-inner .attachment .info-icon-wrap img {
	    object-fit: cover;
	    right: 0;
	    position: relative;
	    height: 100%;
	    padding: 0;
	    width: 100%;
	    padding-bottom: 0;
	}
	.subscribe-footer-inner {
    padding: 10px 0 35px;
	}
	.single-post article h5, .single-post article .flow h3 {
		font-size: 26px;
	}
	.square {
		margin-bottom: calc(var(--flow-space) / 2);
	}
	.single-post .flow p {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.single-post .caption {
		margin-top: 8px !important;
	}
	.contributors .list {
	    margin-top: 15px;
	    padding-bottom: 4px;
	}
	.single-post article .contributors h3 {
		margin-bottom: 20px !important;
	}
	.contributors .list .name h4 {
		font-size: 20px;
	}
	.media-flow {
    	margin-top: 30px !important;
    	margin-bottom: 30px !important;
	}
	.contributors .list img {
		margin-right: 20px;
	}
	.tags .tag-group a {
		font-size: 18px;
	}
	.tags {
		margin-top: 50px !important;
    	margin-bottom: 50px !important;
	}
	.single-post .thumb-list {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.media-full + .media-full {
    	margin-top: 0 !important;
	}
	.masonry-wrapper {
		margin-left: -5px;
    	margin-right: -5px;
	}
}

@media (max-width: 575.25px) {
	.hero-post.full-width-hero .content {
		max-width: 80%;
	}
	.hero-post-inner .content {
		padding: 20px;
		padding-bottom: 30px;
	}
	.hero-post-inner .category-tag {
		margin-bottom: 10px;
	}
	.single-post article .hero-post-inner h1 {
		font-size: 38px;
		margin-bottom: 20px;
	}
	.single-post article h2, .single-post article p.intro {
		font-size: 24px;
	}
	.single-post article p,
	.single-post article li {
		font-size: 22px;
	}

	.single-post .thumb-list > * + * {
		margin-top: var(--flow-space);
	}
	.info-inner {
    flex-direction: column;
	}
	.info h3 {
    transform: rotate(0);
    top: -21px;
    left: 20px;
    font-size: 40px;
	}
	.info-inner .content {
    padding: 40px 30px 50px;
    width: 100%;
	}
	.info-inner .attachment {
		width: 100%;
		min-height: 300px;
	}
	.tags {
    --flow-space: 1.5rem;
	}
	.tags-inner {
    flex-direction: column;
	}
	.tag-group {
    border-bottom: 1px solid #D6D6D6;
    padding-bottom: 20px;
	}
	.share {
    margin-top: 20px;
	}
	.share > a:first-of-type {
		margin-left: auto;
	}
	.contributors .list {
    align-items: flex-start;
	}
	.contributors .list .right {
		flex-direction: column;
	}
	.contributors .list .right p {
		width: 100%;
		margin-top: 10px;
	}
	.playlist-next {
		margin-top: 20px;
	}
	.playlist-next  .row {
		margin-left: -10px;
    	margin-right: -10px;
	}
	.contributors .list:first-of-type::before {
    content: none;
	}

}

/* ---------------------------------------------------------------------

																Contact

---------------------------------------------------------------------- */

.intro-contact {
	margin-top: 140px;
	text-align: center;
}

.title-contact {
	position: relative;
}

.intro-contact h1 {
	font-size: 70px;
	margin: 0;
	padding-top: 20px;
	font-family: 'gap_sansblack';
	font-weight: 400;
	display: inline-block;
	position: relative;
}

.intro-contact .container {
	max-width: 800px;
}

.map {
	max-width: 800px;
	margin: 80px auto;
}

.map img {
	max-width: 100%;
}

.map a {
	margin-top: 30px;
	display: inline-block;
}

.map a:hover {
	display: inline-block;
}

.company-info {
	position: relative;
}

.email-wrap {
	position: relative;
}

.contact-mascot-top img {
    width: 250px;
    right: -200px;
    position: relative;
}

.company-info h2 {
    margin-top: 80px;
    font-size: 32px;
    margin-bottom: -10px;
}

.company-info p {
    line-height: 1.2;
    max-width: 400px;
    margin: auto;
    margin-top: 20px;
}

.contact-email {
	font-size: 70px;
}

.contact-email.wavelink:hover {
	background-size: 25px;
}

.contact-social {
	display: flex;
	justify-content: center;
	margin-top: 50px;
	align-items: center;
}

.contact-social img {
    height: 28px;
}

.contact-social a {
	display: flex;
	flex-direction: column;
	padding-right: 20px;
	padding-left: 20px;
} 

.contact-social span {
	display: inline-block;
	margin-top: 10px;
	font-size: 20px;
}

a span.wavelink:hover {
	box-shadow: 0px 1.5px 0 #000;
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 11px;
	padding-bottom: 0;
	text-decoration: none;
	display: inline;
}

.contact-form {
	background-color: #F2F2F2;
	padding: 80px 0 90px;
	position: relative;
    -webkit-mask-image: url(images/mask-ig2.png);
    mask-image: url(images/mask-ig2.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: top;
    mask-position: top;
}

.contact-form h2 {
	font-size: 40px;
	text-align: center;
	margin: 0 auto 30px;
}

.contact-form form {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.contact-form form {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.contact-form form input {
    width: 100%;
    border: none;
    padding: 0;
    height: 70px;
    font-size: 24px;
	font-family: thonglor, sans-serif;
	background-image: url(images/lineform.svg);
	background-repeat: no-repeat;
	background-position: bottom;
	background-color: transparent;

}

.contact-form form input::placeholder,
.contact-form form textarea::placeholder {
  color: #232020;
  opacity: 1;
}

.contact-form form textarea {
	width: 100%;
	border: none;
	padding: 0;
	font-size: 24px;
	font-family: thonglor, sans-serif;
	background-image: url(images/lineform.svg);
	background-repeat: no-repeat;
	background-position: bottom;
	background-color: transparent;
	margin-top: 20px;
}



.contact-form form .col-6 {
	padding-right: 5px;
	padding-left: 5px;
}

.contact-form form > * + * {
	margin-top: 0;
}

.contact-form form input[type="submit"] {
	background-color: #000;
	padding: 16px 30px;
	font-weight: 700;
	margin-top: 20px;
	color: #fff;
	width: auto;
}



.contact-mascot-top {
	position: absolute;
	right: 12%;
	top: -10px;
}

.contact-mascot-left {
    left: -32px;
    top: 53px;
    width: 105px;
    position: absolute;
}

.contact-mascot-bottom {
	position: absolute;
	bottom: 80px;
	right: 11%;
	width: 130px;
}

p.infinite-scroll-error {
	display: none !important;
}

@media (max-width: 991.25px) {
	.intro-contact h1 {
    	font-size: 54px;
	}
	.company-info h2 {
		font-size: 32px;
		margin-top: 40px;
	}
	.contact-email {
		font-size: 60px;
	}
	.map {
		max-width: 600px;
		margin: 60px auto;
	}
	.contact-form form {
		max-width: 600px;
	}
	.contact-mascot-bottom {
		right: 3%;
	}
	.contact-mascot-bottom {
		display: none;
	}
	.contact-mascot-left {
		left: -30px;
		top: 32px;
	}
}

@media (max-width: 767px) {
	.map {
		max-width: 680px;
	}
	.contact-form form {
		max-width: 680px;
	}
	.single-post article blockquote p {
		font-size: 24px;
	}

	.contact-mascot-bottom {
		right: -3%;
	}
	.contact-mascot-left {
	    width: 71px;
	    left: -15%;
	    top: 40px;
	}
	.intro-contact h1 {
		font-size: 36px;
	}
	.intro-contact {
		margin-top: 80px;
	}
	.contact-mascot-top {
		right: -20px;
	}
	.contact-email {
		font-size: 35px;
	}
	.contact-mascot-top img {
		width: 106px;
		right: -18px;
		top: 56px;
		position: relative;
	}
	.map {
		margin: 0 auto 40px;
	}
	.contact-social a {
		margin-bottom: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.contact-social {
		flex-wrap: wrap;
	}
	.contact-form {
		padding: 40px 0 50px;
	}
	.contact-mascot-bottom {
		width: 50px;
	}
	.company-info h2 {
		font-size: 26px;
		margin-top: 50px;
	}
	.contact-email.wavelink:hover {
		background-size: 15px;
	}
	.contact-form form input,
	.contact-form form textarea {
	    background-size: 600px 16%;
	    font-size: 20px;
	}
	.contact-social span {
	    font-size: 15px;
	}
	.contact-social a {
	    padding-right: 5px;
	    padding-left: 5px;
	}
	.contact-social img {
    	height: 20px;
	}
	.company-info p {
	    max-width: 250px;
	}
	.contact-form form input[type="submit"] {
		height: 50px;
		padding: 0 30px;
	}

}

/* ---------------------------------------------------------------------

Slide Menu

---------------------------------------------------------------------- */


.slide-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 575px;
	height: 100%;
	background-color: white;
	z-index: 999999;
	transform: translateX(-100%);
	opacity: 0;
	visibility: hidden;
	transition: 0.4s ease;
}

.slide-menu.show {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition: 0.4s ease;
}

.slide-menu .menu-close {
	position: absolute;
	right: -60px;
	top: 40px;
	cursor: pointer;
}

.slide-menu-content {
	padding: 44px 50px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.slide-menu-content .head {
	margin-bottom: 20px;
	font-weight: 700;
}

.slide-menu-content .collab a {
    display: block;
    margin-bottom: 8px;
}


.slide-menu-content .nav-side a {
	font-family: 'gap_sansblack';
	font-size: 50px;
	display: block;
}


.collab {
	margin-top: auto;
}

.slide-menu-bg {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.16);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	transition: 0.4s ease;
}

.slide-menu-bg.show {
	opacity: 1;
	visibility: visible;
	transition: 0.4s ease;
}

.show-mascot {
	position: absolute;
	right: 50px;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
}

.link-mascot {
	display: none;
	pointer-events: none;
}

.link-mascot.seewell {
	width: 150px;
}

img.link-mascot.workwell {
    width: 220px;
}

.slide-menu .link-workwell {
	color: #396D5A;
}

.slide-menu .link-gowell {
	color: #3D4A90;
}

.slide-menu .link-eatwell {
	color: #E4B538;
}

.slide-menu .link-livewell {
	color: #DB8035;
}

.slide-menu .link-seewell {
	color: #232020;
}

.slide-menu .link-joinwell {
	color: #A33134;
}

@media (max-width: 1300px) {
	.contact-mascot-bottom {
		right: 7%;
	}
}
@media (max-width: 991.25px) {
	.slide-menu {
    max-width: 400px;
	}
	.slide-menu-content {
		padding: 34px 30px;
	}
	.slide-menu-content .nav-side a {
		font-size: 40px;
	}
	.show-mascot {
	    top: 50%;
	    transform: translateY(0);
	    right: unset;
	    left: 30px;
	    display: none;
	}

}

@media (max-width: 767px) {
	.slide-menu {
		max-width: 300px;
	}

	.slide-menu-content .nav-side a {
		font-size: 28px;
	}
	.slide-menu .menu-close {
		width: 30px;
		right: -46px;
		top: 28px;
	}
}



/* ---------------------------------------------------------------------

Archive

---------------------------------------------------------------------- */
.title-archive h1.font-70 {
	margin-bottom: 0;
	text-align: center;
}
.title-archive {
	margin-top: 150px;
}

.playlist-archive.archive-all {
    padding: 10px 0 115px;
}


.cantfind {
	text-align: center;
	padding-top: 100px;
}

.cantfind img {
	max-width: 120px;
}

@media (max-width: 767px) {
	.title-archive {
	    margin-top: 90px;
	}
}


/* ---------------------------------------------------------------------

404

---------------------------------------------------------------------- */

.page404 {
	margin-top: 250px;
	margin-bottom: 150px;

}

.image-404 {
	position: relative;
	height: 250px;
}

.num404,.charact404 {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
}

.page404 .font-30 {
	max-width: 600px;
	margin: auto;
	margin-bottom: 20px;
	line-height: 1.1;
}

@media (max-width: 767px) {

	.num404 {
		width: 285px;
	}
	.charact404 {
		width: 107px;
	}
	.image-404 {
		height: 150px;
	}
	.page404 .font-30 { 
		font-size: 22px;
		max-width: 340px;
	}
}

#rc-anchor-alert {
	display: none;
}

/* ---------------------------------------------------------------------

Privacy

---------------------------------------------------------------------- */


.privacy-wrap p {
	font-size: 24px;
}

@media (max-width: 767px) {
	.privacy-wrap p {
	font-size: 20px;
	}
}


/* ---------------------------------------------------------------------

Search popup

---------------------------------------------------------------------- */

.fancybox-container {
	z-index: 9999999999;
}


.searchpopup .fancybox-bg {
	background: #fff;
}

.searchpopup .fancybox-is-open .fancybox-bg {
	opacity: 1;
}

.searchpopup .fancybox-content {
	width: 100%;
	height: 100%;
}

.fancybox-slide--html .fancybox-close-small {
    width: 60px;
    height: 60px;
}
/* 
.fancybox-slide.fancybox-slide--current .fancybox-content {
	display: block !important;
} */

.search-wrap input {
	width: 100%;
    border: none;
    padding: 0;
    padding-left: 40px;
    height: 70px;
    font-family: thonglor, sans-serif;
    background-image: url(images/lineform.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: transparent;
    font-size: 50px;
}

.input-wrap {
    max-width: 700px;
    margin: auto;
    position: relative;
}

.input-wrap::before {
    content: '';
    position: absolute;
    background-image: url(images/search.svg);
    left: 0;
    top: 30px;
    width: 30px;
    height: 30px;
    display: block;
    background-repeat: no-repeat;
}

.search-catewrap {
	text-align: center;
	margin-top: 60px;
}

.search-wrap {
	margin-top: 25vh;
}

.search-catewrap a {
	font-size: 30px;
	display: inline-block;
	margin: 5px 15px;
}

.fancybox-slide--html {
    padding: 0;
}

@media (max-width: 767px) {
	.search-catewrap a {
		font-size: 18px;
		margin: 0px 10px;
	}
	.search-wrap input { 
		font-size: 30px;
		padding-left: 32px;
	}
	.fancybox-content {
		padding: 20px;
	}
	.fancybox-slide--html .fancybox-close-small {
	    width: 40px;
	    height: 40px;
	    padding: 0;
	    top: 10px;
	    right: 10px;
	}
}


/* ---------------------------------------------------------------------

Mascot popup

---------------------------------------------------------------------- */

.columnpopup .fancybox-button svg {
	background: #fff;
    border-radius: 100%;
}

.columnpopup .fancybox-content {
	width: 100%;
	height: 100%;
}

.mastcotpopup-wrap {
	overflow-x: hidden;
}

.mastcotpopup-wrap .example-wrap {
	height: 100%;
	padding-top: 50px;
	padding-left: 60px;
	padding-right: 30px;
	overflow: scroll;
}

.mastcotpopup-wrap .example-wrap h2 {
	margin-bottom: 40px;
}

.mastcotpopup-wrap, .mastcotpopup-wrap .row {
	height: 100%;
}

.columnpopup .fancybox-content {
	padding: 0;
}

.thumb-side a, .thumb-top a {
	height: 100%;
}

.thumbnail {
    height: 100%;
    object-fit: cover;
    width: 100% !important;
}

.example-wrap .playlist-list {
	margin-bottom: 30px;
}

.example-wrap .playlist-list .thumb-side {
	flex-basis: 40%;
}

.example-wrap .playlist-list .content-side {
	flex-basis: 60%;
}

.mastcotpopup-wrap .detail-wrap {
	padding: 20px 60px;
}

.mastcotpopup-wrap .detail-wrap p {
	max-width: 50%;
}

.mascot-img {
	position: absolute;
	bottom: 20px;
	right: 50px;
	width: 14vw;
	max-height: 400px;
}

#mascot-joinwell .mascot-img {
    width: 400px;
    right: 0;
}
#mascot-gowell .mascot-img {
    width: 400px;
    right: 0; 
}
@media (max-width: 991px) {
	.mastcotpopup-wrap .detail-wrap {
		padding-bottom: 60px;
	}
	.mastcotpopup-wrap .detail-wrap .col-4 {
		display: flex;
	}
	.mastcotpopup-wrap .detail-wrap .col-4 img{
		align-self: flex-end;
	}
	.example-wrap .playlist-list .thumb-side {
		flex-basis: 50%;
	}

	.example-wrap .playlist-list .content-side {
		flex-basis: 50%;
	}
	.mastcotpopup-wrap .detail-wrap p {
		max-width: 350px !important;
	}

}

@media (max-width: 767px) {
	.mastcotpopup-wrap .example-wrap h2 {
		font-size: 22px;
	}
	.example-wrap .playlist-list .thumb-side {
		flex-basis: 40%;
	}
	.example-wrap .playlist-list .content-side {
    	flex-basis: 60%;
	}
	.input-wrap {
		max-width: 90%;
	}
	.mascot-img {
	    position: relative;
	    bottom: 0;
	    right: 0;
	    width: 100%;
	    max-height: 200px;
	}
	.mastcotpopup-wrap .detail-wrap {
    	padding: 40px 20px;
	}
	.mastcotpopup-wrap .example-wrap {
	    padding-top: 30px;
	    padding-left: 20px;
	    padding-right: 20px;
	    height: auto;
	}
}

/*fancybox*/

button.fancybox-button {
	background: transparent;
}

.fancybox-button svg {
    background: #fff;
    border-radius: 100%;

}

.fancybox-navigation .fancybox-button svg {
	background-color: #000;
	border-radius: 0;
}

.fancybox-content {
	padding: 0;
}

.fancybox-content .popupimg img {
	width: 100%;
	height: auto;
	max-width: 900px;
	height: auto;
}

/* ---------------------------------------------------------------------

Contributor

---------------------------------------------------------------------- */

.contributor-wrap {
	text-align: center;
}

.contributor-wrap img {
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
	border-radius: 50%;
	object-fit: cover;
}

.contributor-wrap h1 {
	margin: 0;
}

.contributor-wrap p {
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------

Capcha

---------------------------------------------------------------------- */

.grecaptcha-badge {
	display: none !important;
}


/* ---------------------------------------------------------------------

Animation

---------------------------------------------------------------------- */

/* Homepage */

/* .workwell-amine {
	animation: workwell-amine .5s steps(4) infinite;
	-webkit-animation: workwell-amine .5s steps(4) infinite;
	background-repeat: no-repeat;
	height: 628px;
	width: 500px;
	position: absolute;
}
@keyframes workwell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2501px; }
}
@-webkit-keyframes workwell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2501px; }
} */


.workwell-amine {
	animation: workwell-amine2 1s steps(4) infinite;
	-webkit-animation: workwell-amine2 1s steps(4) infinite;
	background-repeat: no-repeat;
	height: 486px;
	width: 500px;
	position: absolute;
}
@keyframes workwell-amine2 {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -1944px; }
}
@-webkit-keyframes workwell-amine2 {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -1944px; }
}


.gowell-amine {
	animation: gowell-amine 2s steps(10) infinite;
	-webkit-animation: gowell-amine 2s steps(10) infinite;
	background-repeat: no-repeat;
	height: 288px;
	width: 500px;
	position: absolute;
}
@keyframes gowell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2886px; }
}
@-webkit-keyframes gowell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2886px; }
}

.joinwell-amine {
	animation: joinwell-amine .5s steps(3) infinite;
	-webkit-animation: joinwell-amine .5s steps(3) infinite;
	background-repeat: no-repeat;
	height: 292px;
	width: 500px;
	position: absolute;
}
@keyframes joinwell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -877px; }
}
@-webkit-keyframes joinwell-amine {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -877px; }
}


.seewell-amine-tiny {
	animation: seewell-amine-tiny 1s steps(6) infinite;
	-webkit-animation: seewell-amine-tiny 1s steps(6) infinite;
	background-repeat: no-repeat;
	height: 469px;
	width: 500px;
	position: absolute;
}
@keyframes seewell-amine-tiny {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2819px; }
}
@-webkit-keyframes seewell-amine-tiny {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -2819px; }
}	

.eatwell-anime {
	animation: eatwell-anime 1.2s steps(9) infinite;
	-webkit-animation: eatwell-anime 1.2s steps(9) infinite;
	background-repeat: no-repeat;
	height: 754px;
	width: 500px;
	position: absolute;
}
@keyframes eatwell-anime {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -6795px; }
}
@-webkit-keyframes eatwell-anime {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -6795px; }
}

.livewell-animetion {
	animation: livewell-animetion 1s steps(7) infinite;
	-webkit-animation: livewell-animetion 1s steps(7) infinite;
	background-repeat: no-repeat;
	height: 869px;
	width: 500px;
	position: absolute;
}
@keyframes livewell-animetion {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -6085px; }
}
@-webkit-keyframes livewell-animetion {  
	0% {background-position: 100% 0; } 
	100% {background-position: 100% -6085px; }
}


/*About*/
.about .workwell-amine {
    right: 80px;
    top: 0px;
    transform: scale(.5);
}

.about .gowell-amine {
	left: -100px;
	top: 200px;
	transform: scale(.4);
}

.about .joinwell-amine {
	top: -255px;
	right: -150px;
	transform: scale(.5);
}

/*Story*/
.section-column .seewell-amine-tiny {
    transform: scale(.5);
    top: 25%;
    left: 19%;
}
.section-column .gowell-amine {
	right: -8%;
    transform: scale(.35);
    top: 20%; 
}
.section-column  .workwell-amine{
    transform: scale(0.4);
    top: 32%;
    left: -2%;
}
.section-column .joinwell-amine {
    transform: scale(.5);
    top: 40%;
    left: 65%;
}
.section-column .livewell-anime {
	left: 61%;
    top: 32%;
    position: absolute;
}

.section-column .eatwell-anime {
    left: 37%;
    top: 10%;
    position: absolute;
    transform: scale(.4);
}

/*Stories Popup*/
#mascot-joinwell .joinwell-amine {	
	transform: scale(.8);
	right: -76px;
	bottom: 10px;
}
#mascot-workwell .workwell-amine {	
    bottom: -100px;
    right: -113px;
    transform: scale(.6);
}
#mascot-livewell .livewell-animetion {
	transform: scale(.5);
    bottom: -200px;
    right: -100px;
}
#mascot-seewell  .seewell-amine-tiny {
	transform: scale(.7);
    bottom: -80px;
    right: -90px;
}

#mascot-eatwell .eatwell-anime {
    transform: scale(.6);
	right: -100px;
	bottom: -150px; 
} 
#mascot-gowell .gowell-amine {
    transform: scale(.8);
    right: -70px;
    bottom: -20px;
}

/*Category*/

.category-eatwell .eatwell-anime {
	transform: scale(.6);
    top: -62px;
    right: -60px;
}

.category-gowell .gowell-amine {
	transform: scale(.7);
    top: 130px;
}

.category-joinwell .joinwell-amine {
    transform: scale(.7);
    right: -85px;
    top: 76px;
}

.category-livewell .livewell-animetion {
    transform: scale(.4);
    top: -181px;
    right: -26px;
}

.category-seewell .seewell-amine-tiny {
	transform: scale(.6);
    top: 35px;
    right: -70px;
}

.category-workwell .workwell-amine {
    transform: scale(.6);
    top: 22px;
    right: -37px;
}


@media (max-width: 1250px) {

	.about .workwell-amine {
	    right: -46px;
	}

}
@media (max-width: 1100px) {

	.section-column .workwell-amine {
	    transform: scale(0.35);
	    top: 20%;
	    left: -11%;
	}
	.mastcotpopup-wrap .detail-wrap p {
		max-width: 100%;
	}
	.section-column .seewell-amine-tiny {
	    transform: scale(.4);
	    top: 11%;
	    left: 14%;
	}
	.section-column .eatwell-anime {
	    left: 30%;
	    top: -9%;
	    transform: scale(.3);
	}
	.section-column .livewell-anime {
	    top: 28%;
	    width: 100px;
	}
	.section-column .gowell-amine {
	    right: -14%;
	    transform: scale(.3);
	    top: 12%;
	}
	.section-column .joinwell-amine {
	    transform: scale(.4);
	    top: 35%;
	    left: 58%;
	}

	/*Popup*/
	#mascot-livewell .livewell-animetion {
    	transform: scale(.4);
	    bottom: -266px;
	    right: -156px;
	}
	#mascot-eatwell .eatwell-anime {
	    transform: scale(.5);
	    right: -160px;
	    bottom: -250px;
	}
	#mascot-seewell .seewell-amine-tiny {
	    transform: scale(.6);
	    bottom: -110px;
	    right: -152px;
	}
	#mascot-workwell .workwell-amine {
	    bottom: -187px;
	    right: -100px;
	    transform: scale(.5);
	}
	#mascot-joinwell .joinwell-amine {
	    transform: scale(.6);
	    right: -120px;
	    bottom: -19px;
	}
	#mascot-gowell .gowell-amine {
	    transform: scale(.65);
	    right: -106px;
	    bottom: -37px;
	}
}

@media (max-width: 991px) {
	.about .workwell-amine {
		right: -103px;
		top: 45px;
	}
	.section-column .workwell-amine {
	    transform: scale(0.4);
	    top: 49%;
	    left: 21%;
	}
	.section-column .seewell-amine-tiny {
	    transform: scale(.5);
	    top: 50%;
	    left: -7%;
	}
	.section-column .eatwell-anime {
	    left: 45%;
	    top: 25%;
	    transform: scale(.4);
	}
	.section-column .gowell-amine {
	    right: 41%;
	    transform: scale(.5);
	    top: 32%;
	}
	.section-column .livewell-anime {
	    top: 19%;
	    width: 136px;
	    left: 41%;
	}
	.section-column .joinwell-amine {
	    transform: scale(.5);
	    top: 25%;
	    left: 40%;
	}
	.clickme {
	    top: -62%;
	    left: -35%;
	    width: 14%;
	}
	#mascot-livewell .livewell-animetion {
		bottom: -333px;
	}
	#mascot-eatwell .eatwell-anime {
	    right: -121px;
	    bottom: -292px;
	}
	.category-gowell .gowell-amine {
		right: -120px;
	}
	.category-workwell .workwell-amine,
	.category-seewell .seewell-amine-tiny {
		right: -108px;
	}
	.category-eatwell .eatwell-anime {
		right: -95px;
	}
	.category-livewell .livewell-animetion {
		right: -100px;
	}
}

@media (max-width: 767px) {
	.about .joinwell-amine {
		top: -191px;
	    right: -182px;
	    transform: scale(.3);
	}
	.mascot-wrap .workwell-amine {
		top: -169px;
   	 	right: -187px;
	}
	.about .workwell-amine {
	    right: -183px;
	    top: auto;
	    transform: scale(.25);
	    bottom: -250px;
	}
	.about .gowell-amine {
	    left: -148px;
	    bottom: -116px;
	    top: auto;
	    transform: scale(.25);
	}
	.section-column .workwell-amine {
	    transform: scale(0.25);
	    top: 23%;
	    left: -17%;
	}
	.section-column .gowell-amine {
	    right: 10%;
	    transform: scale(.3);
	    top: 18%;
	}
	.section-column .joinwell-amine {
	    transform: scale(.3);
	    top: 8%;
	    left: 11%;
	}
	.section-column .seewell-amine-tiny {
	    transform: scale(.25);
	    top: 28%;
	    left: -47%;
	}
	.section-column .eatwell-anime {
	    left: 11%;
	    top: -5%;
	    transform: scale(.25);
	}
	.section-column .livewell-anime {
	    top: 19%;
	    width: 78px;
	    left: 38%;
	}
	#mascot-joinwell .joinwell-amine {
	    transform: scale(.4);
	    right: -180px;
	    top: -98px;
	    bottom: auto;
	}
	#mascot-gowell .gowell-amine {
	    transform: scale(.4);
	    right: -179px;
	    bottom: -109px;
	}
	#mascot-livewell .livewell-animetion {
	    transform: scale(.25);
	    bottom: -379px;
	    right: -187px;
	}
	#mascot-seewell .seewell-amine-tiny {
	    transform: scale(.4);
	    bottom: -169px;
	    right: -204px;
	}
	#mascot-eatwell .eatwell-anime {
	    transform: scale(.3);
	    right: -174px;
	    bottom: -214px;
	}
	#mascot-workwell .workwell-amine {
	    bottom: -187px;
	    right: -140px;
	    transform: scale(.35);
	}
	.category-workwell .workwell-amine {
	    transform: scale(.3);
	    top: -100px;
	    right: -160px;
	}
	.category-gowell .gowell-amine {
	    transform: scale(.4);
	    top: 30px;
	    right: -197px;
	}
	.category-eatwell .eatwell-anime {
	    transform: scale(.3);
	    top: -263px;
	    right: -171px;
	}
	.category-joinwell .joinwell-amine {
	    transform: scale(.35);
	    right: -188px;
	    top: -92px;
	}
	.category-livewell .livewell-animetion {
	    transform: scale(.22);
	    top: -302px;
	    right: -193px;
	}
	.category-seewell .seewell-amine-tiny {
	    transform: scale(.4);
	    top: -106px;
	    right: -227px;
	}
}