@charset "UTF-8";
/* CSS Document */

html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family: 'Kanit', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.8em; color: #686868; background: #fff url(../img) no-repeat 97% 0; }
html, body { max-width: 100%; overflow-x: hidden; } 
a, 
a:focus,
a:active { color: #000; cursor: pointer; box-shadow:none !important; -webkit-box-shadow: none !important; }
a:hover { color: #555052; text-decoration: none; }
a:focus,
a:active,
a,
a.btn,
button,
input[type=file] { cursor: pointer; }
a { cursor: hand; }
button { text-decoration: none; outline-style: none !important; box-shadow:none !important; -webkit-box-shadow: none !important; border-color: transparent; outline: none; }

::selection { color: #000; background:#dcdcdc; }
::-moz-selection { color:#000; background:#dcdcdc; }
::-webkit-input-placeholder { color: #999; text-overflow: ellipsis; }
:-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; } 
:-ms-input-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-webkit-scrollbar { width: 0; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3); box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background: rgba(0,255,0,0.3); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.5); box-shadow:inset 0 0 6px rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,255,0,0.3) }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    color: #555052;
}
h1 { font-size: 36px; margin-bottom: 20px; }
h2 { font-size: 22px; margin-bottom: 15px; line-height: 1.4em; }
h3 { font-size: 18px; margin: 15px 0 5px 0; line-height: 1.4em; }
p { margin: 0 0 25px 0; }
label { font-family: 'Kanit', sans-serif; margin-left: 10px; }

.header { position: fixed; top: 0; z-index: 100; width: 100%; }
.header-inner { position: relative; z-index: 200; width: 100%; height: 100px; }
.logo { position: relative; z-index: 300; left: 30px; top: 10px; opacity: 1; }
.logo svg { width: auto; max-width: none; transition: 0.5s; }
.logo .logo-formal { float: left; width: 58px; height: 80px; margin-right: 15px; background: url(../img/logo-formal.png) no-repeat 50% 50%; background-size: cover; transition: 0.5s; }
.logo .logo-formal a { display: block; width: 58px; height: 80px; }
.logo .logo-informal { float: left; width: 123px; height: 30px; margin-top: 25px; background: url(../img/logo-informal.png) no-repeat 50% 50%; background-size: cover; transition: 0.5s; }
.logo .logo-informal a { display: block; width: 123px; height: 30px; }
.header-inner .fb-share-button { position: absolute; top: 35px; right: 30px; }

@media screen and (max-width: 1024px) {
    .logo { left: 15px; }
    .logo .logo-formal,
    .logo .logo-formal a { width: 44px; height: 60px; }
    .logo .logo-informal,
    .logo .logo-informal a { width: 82px; height: 20px; }
	.header-inner .fb-share-button { top: 30px; right: 15px; }
}

.section { position: relative; }
.section-overview { margin: 45px 0 100px 0; padding: 0; min-height: 360px; transition: 0.5s;background: url(../img/bg02.png);  background-size: 1440px 1440px; }
.section-create { display: none; margin: 0; transition: 0.5s; padding: 0 0 50px 0; background: #f7f2ef url(../img/bg03.png) top left; }
.section-create.visible { display: block; }
.section-create img { max-width: 100%; }
.section-shadow-inset { -webkit-box-shadow: inset 0px 0px 100px -60px rgba(0,0,0,1); -moz-box-shadow: inset 0px 0px 100px -60px rgba(0,0,0,1); box-shadow: inset 0px 0px 100px -60px rgba(0,0,0,1); }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0;
    opacity: .1;
    background: url(../images/overlays/02.png) top center;
}

.profile-overview-text { position: relative; padding: 50px 0; }
.profile-overview-text h1 { text-transform: uppercase; }
.profile-overview-text p { font-family: 'Kanit', sans-serif; font-size: 20px; line-height: 1.5em; color: #555052; }
.profile-overview-text p.remark { margin-top: 30px; font-family: 'Kanit', sans-serif; font-size: 13px; color: #917948; font-style: italic; line-height: 1.6em; }
.profile-overview-text p.remark strong { font-family: 'Kanit', sans-serif; font-weight: bold; color: #555052; }
.profile-overview-text p.remark span { font-family: 'Kanit', sans-serif; font-weight: bold; color: #555052; display: block; line-height: 1.8em; }

.btn-primary { margin-bottom: 10px; padding: 15px 0; width: 200px; font-family: 'Kanit', sans-serif; font-size: 16px; letter-spacing: 1px; text-align: center; background-color: #fff; border: 2px solid #555052; color: #555052 !important; border-radius: 0; }
.btn-primary i { font-size: 20px; margin-right: 5px; }
.btn-primary:hover { background-color: #555052; border: 2px solid #555052; color: #fff !important; }
.btn-file { position: relative }
.btn-file input[type=file] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }

.profile-overview-img { 
	position: relative;
	min-height: 300px;
}
.profile-overview-img img { 
	width: 100%; 
	max-width: 100%; 
	-webkit-box-shadow: -30px 30px 70px -10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: -30px 30px 70px -10px rgba(0, 0, 0, 0.1);
	box-shadow: -30px 30px 70px -10px rgba(0, 0, 0, 0.1); 
}

.profile-overview-img-item:nth-child(1) {
	position: absolute;
    z-index: 1;
    max-width: 280px;
	top: 20px;
	left: 50%;
	margin-left: -140px;
	box-shadow: rgba(0, 0, 0, 0.2) 56px 72px 68px -37px; 
	transform: translate3d(0px, 0, 0px);
}
.profile-overview-img-item:nth-child(2) {
	position: absolute;
	z-index: 2;
	max-width: 180px;
	top: 100px;
	left: -15%;
	box-shadow: rgba(0, 0, 0, 0.2) 56px 72px 68px -37px; 
	transform: translate3d(0px, 0px, 0px);
}
.profile-overview-img-item:nth-child(3) { 
	position: absolute;
	z-index: 3;
	max-width: 140px;
	top: 50px;
	left: 70%;
	box-shadow: rgba(0, 0, 0, 0.2) 56px 72pxpx 68px -37px; 
	transform: translate3d(0px, 0px, 0px); 
}

.alert { display: block; border-radius: 0; }
.alert.alert-warning { border: 1px solid #000; font-size: 14px; line-height: 1.6em; }
.alert.alert-warning span { font-family: 'Kanit', sans-serif; font-size: 16px; font-weight: bold; line-height: 1.6em; text-transform: uppercase; display: block; }
.alert.alert-warning small { margin-top: 10px; line-height: 1.6em; display: block; }
.alert.alert-warning small span { text-transform: lowercase; font-size: 14px; }

/* large desktops */
@media only screen and (max-width : 1439px) {
    
}
/* desktops */
@media only screen and (max-width : 1199px) {
    .section-overview { margin-bottom: 0; }
}
/* tablets */
@media only screen and (max-width : 991px) {
	
}
/* mobiles */
@media only screen and (max-width : 767px) {
	h1 { font-size: 30px; margin-bottom: 10px; }
	.header-inner { height: 80px; }
	.section-overview { margin: 0; min-height: 0; height: auto; text-align: center; }
	.profile-overview-text { padding: 40px 0 30px 0; }
	.profile-overview-text p { font-size: 20px; }
}
/* small devices */ 
@media only screen and (max-width : 575px) {
    
}


/* sm */ 
@media only screen and (min-width : 576px) {
	.profile-overview-img-item:nth-child(1) {
		
    } 
  	.profile-overview-img-item:nth-child(2) {
		left: 5%;
	} 
	.profile-overview-img-item:nth-child(3) {
		top: 50px;
		left: 75%;
	}
}
/* md */
@media only screen and (min-width : 768px) {
	.profile-overview-img-item:nth-child(1) {
		max-width: 360px;
		top: 0;
		left: 10%; 
		margin-left: 0;
    } 
  	.profile-overview-img-item:nth-child(2) {
		top: 120px;
		left: -5%;
	} 
	.profile-overview-img-item:nth-child(3) {
		top: 50px;
		left: 75%;
	}
}
/* lg */
@media only screen and (min-width : 992px) {
	.section-overview { min-height: 460px; }
    .profile-overview-img-item:nth-child(1), 
    .profile-overview-img-item:nth-child(2), 
    .profile-overview-img-item:nth-child(3) {
        transition: all 0.25s ease-out, -webkit-transform 0.25s ease-out;
        transition-delay: 0s;
        opacity: 0;
        transform: translateY(20px); 
    }
    .profile-overview-img-item:nth-child(1).visible, 
    .profile-overview-img-item:nth-child(2).visible, 
    .profile-overview-img-item:nth-child(3).visible {
        opacity: 1;
        transform: translateY(0px); 
    } 
	.profile-overview-img-item:nth-child(1) {
		top: 50px;
		left: 10%; 
    } 
  	.profile-overview-img-item:nth-child(2) {
		max-width: 220px;
		top: 160px;
		left: -10%;
	} 
	.profile-overview-img-item:nth-child(3) {
		top: 75px;
		left: 65%;
	}
}
/* xl */
@media only screen and (min-width : 1200px) {
	.profile-overview-img-item:nth-child(1) {
		max-width: 460px;
		top: 0;
		left: 20%; 
    } 
  	.profile-overview-img-item:nth-child(2) {
		max-width: 300px;
		top: 120px;
		left: 0%;
	} 
	.profile-overview-img-item:nth-child(3) {
		max-width: 260px;
		top: 40px;
		left: 75%;
	}
}
/* xxl */
@media only screen and (min-width : 1440px) {
    .profile-overview-img-item:nth-child(1) { 
		max-width: 560px;
		top: -50px;
		left: 25%; 
	} 
	.profile-overview-img-item:nth-child(2) {
		top: 130px;
		left: 5%; 
	} 
  	.profile-overview-img-item:nth-child(3) { 
		top: 50px;
		left: 75%; 
	} 
}

.upload-msg { display: none; }
.create-wrapper { width: 300px; min-height: 540px; margin: 30px auto 0 auto; }
.upload-wrapper { width: 300px; }
.crop-wrapper { display: none; padding: 0; }
.crop-wrapper.visible { display: block; }
.crop-wrapper img { position: absolute; left: 0; top: 0; }
.crop-wrapper .cr-slider-wrap { margin: 10px auto 20px auto; }
.create-option { display: none; text-align: center; margin-bottom: 50px; }
.create-option.visible { display: block; }
.btn-create { display: none; margin-top: 10px; }
.btn-create.visible { display: inline-block; }
.create-msg { display: none; }
#profile-frame-design-2 { display: none }
#profile-frame-design-3 { display: none }

.result-wrapper { width: 300px; min-height: 700px; margin: 30px auto 20px auto; }
.result-wrapper h2 { margin-bottom: 30px; }
.result-wrapper .btn { margin-bottom: 20px; }
.result-container { display: none; margin: 0 auto; height: 300px; text-align: center; }
.result-container.visible { display: block; }
.result-img { width: 300px; border: 1px solid #000; margin-bottom: 30px; -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.1); }

@media only screen and (min-width : 992px) {
    .create-wrapper { margin-top: 50px; }
	.result-wrapper { margin-top: 50px; }
}
@media only screen and (min-width : 1200px) {
	.result-wrapper { min-height: 540px; }
}
@media only screen and (min-width : 1440px) {
	.create-wrapper,
	.result-wrapper { width: 100%; min-height: inherit; }
	.upload-wrapper { width: 300px; float: left; margin-right: 30px; }
	.create-option { text-align: left; }
	.result-container { text-align: left; }
	.result-img { float: left; margin-top: 0; margin-right: 30px; }
}
footer { width: 100%; padding-top: 50px; padding-bottom: 50px; font-size: 14px; line-height: 1.8em; color: #868686; background: no-repeat 30px 100%; }
footer h4 { margin: 0; }
footer p { margin: 0 0 5px 0; }
footer span { }
footer a, 
footer a:focus,
footer a:active { color: #878686; }
footer a:hover { color: #555052; }
.logo-chula-footer { margin-bottom: 20px; }
.menu-footer-social { list-style: none; margin: 10px 0 20px 0;  padding: 0; }
.menu-footer-social li { float: left; margin-right: 20px; font-size: 24px; }
.menu-footer { list-style: none; margin: 0; padding: 0; border-top: 1px solid #555052; font-family: 'Kanit', sans-serif; font-size: 16px; }
.menu-footer li { border-bottom: 1px solid #555052; }
.menu-footer li a { display: block; padding: 3px 0; }
footer  p.remark { font-family: 'Kanit', sans-serif; font-size: 12px; font-style: italic; line-height: 1.8em; }


/* large desktops */
@media only screen and (max-width : 1439px) {
    footer { background-position: 0 100%; }
}
/* desktops */
@media only screen and (max-width : 1199px) {
	
    footer { background: none; }
}
/* tablets */
@media only screen and (max-width : 991px) {
    
}
/* mobiles */
@media only screen and (max-width : 767px) {
	body { background: none; }
    footer { text-align: center; }
	.menu-footer-social { margin: 20px 0; }
	.menu-footer-social li { float: none; display: inline-block; margin: 0 10px; }
	.menu-footer-2 { border-top: none !important; } 
}
/* small devices */ 
@media only screen and (max-width : 543px) {
    footer span { display: block; }
}



.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}
.loader {
	color: #555052;
	font-size: 10px;
	margin: 0 auto 30px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@media only screen and (min-width : 768px) {
	.loader { margin: 0 0 30px 19px; }
}
.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
.loader:before {
	left: -2em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 2em;
}
@-webkit-keyframes load7 {
	0%,
	80%,
	100% {
	  	box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
	  	box-shadow: 0 2.5em 0 0;
	}
}
@keyframes load7 {
	0%,
	80%,
	100% {
	  	box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
	  	box-shadow: 0 2.5em 0 0;
	}
}