/**************************************************************/
/*** Loading ***/
/**************************************************************/
/*** <div class="loading"><span class="loadtext">Loading</span></div> ***/
.loading{
        position: absolute;
        top: 35%;
        left: 50%;
        margin-left: -80px;
        margin-top: -80px;
        width: 160px;
        height: 160px;
        text-align: center;
        font-size: 24px;
        line-height: 160px;
}
.loadtext {
        color: #e87e04;
        vertical-align: middle;
        top: 50%;
        text-align: center;
        font-style: italic;
        font-weight: bold;
        font-family:'Kanit', Tahoma, Geneva, sans-serif;
        font-weight:400;
        animation: blinker 1s linear infinite;
}
.loading:after,
.loading:before{
        content: "";
        border-radius: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center center;
}
.loading:after{
        box-shadow: inset 0 9px 0 rgba(241, 90, 34, 0.6),
                    inset 9px 0 0 rgba(248, 148, 6, 0.6),
                    inset 0 -9px 0 rgba(249, 180, 45,0.6),
                    inset -9px 0 0 rgba(232, 126, 4, 0.6);
        animation: rotar 2s -0.5s linear infinite;
}
.loading:before{
        box-shadow: inset 0 9px 0 rgba(46, 49, 49, 0.2),
                    inset 9px 0 0 rgba(191, 191, 191, 0.6),
                    inset 0 -9px 0 rgba(228, 233, 237, 0.6),
                    inset -9px 0 0 rgba(189, 195, 199, 0.6);
        animation: rotarIz 2s -0.5s linear infinite;
}
@keyframes blinker { 
        0% { opacity: 0; } 
        50% { opacity: 1; } 
        100% { opacity: 0; } 
}
@keyframes rotar{
        0%{
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
        }
        50%{
            transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
        }
        100%{
            transform: rotateZ(360deg) scaleX(1) scaleY(1);
        }
}
@keyframes rotarIz{
        0%{
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
        }
        50%{
            transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
        }
        100%{
            transform: rotateZ(-360deg) scaleX(1) scaleY(1);
        }
}
/**************************************************************/
/*** Input ***/
/**************************************************************/
input[type="text"],input[type="password"],input[type="number"],input[type="email"] {
	padding:7px;
	outline:0px;
	border:solid 1px #dfdfdf;
	background:#fcfcfc;
	transition:0.6s;
	color:#666;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
input[type="text"]:focus ,input[type="password"]:focus,input[type="number"]:focus,input[type="email"]:focus	{
	transition:0.6s;
	border:solid 1px #666;
}
textarea {
	font-size:12px;
	padding:7px;
	outline:0px;
	border:solid 1px #dfdfdf;
	background:#fcfcfc;
	transition:0.6s;
	color:#666;
	}
textarea:focus {
	transition:0.6s;
	border:solid 1px #666;
	}
select {
	font-size:12px;
	padding:7px;
	outline:0px;
	border:solid 1px #dfdfdf;
	background:#fcfcfc;
	transition:0.6s;
	color:#666;
	}
select:focus {
	transition:0.6s;
	border:solid 1px #666;
	}
input[type='submit']:hover, input[type='button']:hover, input[type='reset']:hover {
	cursor:pointer;
	}
/**************************************************************/
/*** Button ***/
/**************************************************************/
.button {
	border-radius: 3px;
    transition: all .1s ease;
    display: inline-block;
    padding: 5px 28px;
    font-family:'Kanit', Tahoma, Geneva, sans-serif;
	font-weight:300;
    text-decoration:none;
    border-width: 0px 0px 5px 0px;
    border-style: solid;
	font-size:13px;
	}
.button:hover {
	transform: translateY(2px);
    border-width: 0px 0px 3px 0px;
	}
/**************************************************************/
/*** Button A ***/
/**************************************************************/
.btnA {
  text-align: center;
  display: inline-block;
  padding: 5px 28px;
  cursor: pointer;
  position:relative;
  overflow:hidden;
  border-radius: 3px;
  font-family:'Kanit', Tahoma, Geneva, sans-serif;
  font-weight:300;
  text-decoration:none;
}
.btnA:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background : #fff;
  left: -55px;
  top: -40px;
  transform: rotate(37deg);
  transition: all .3s;
  opacity: 0.3;
}
.btnA:hover:before {
  left:95%;
}
/**************************************************************/
/*** Button B ***/
/**************************************************************/
.btnB {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 5px 20px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius:3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	position: relative;
    border-width:1px 1px 4px 1px;
	text-decoration:none;
    font-family:'Kanit', Tahoma, Geneva, sans-serif;
	font-weight:300;
}
.btnB:hover {
    top:2px;
    color: #FFFFFF;
}
/**************************************************************/
/*** Button ButtonA Color ***/
/**************************************************************/
.c-red {
    color: #ffffff;
    background-color: #F12C30;
    border-color: #ba2c1a;
}
.c-green {
    color: #ffffff;
    background-color: #8cc601;
    border-color: #79aa02;
}
.c-blue {
    color: #ffffff;
    border-color: #1a5f9b;
	background-color: #297bc1;
}
.c-white {
    color: #333;
	background-color: #FCFCFC;
	background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#FCFCFC));
	background:-moz-linear-gradient(top,#fff, #FCFCFC);
	border-color: #e2e2e2;
}
.c-black {
    color: #ffffff;
    background:-webkit-gradient(linear,left top,left bottom,from(#333),to( #000));
	background:-moz-linear-gradient(top,#333, #000);
	background-color: #333;
    border-color:#333;
}
.c-gold {
    color: #6F5B11;
    background:linear-gradient(to right, #D1B464 0%, #FCF6BA 25%, #FCF6BA 50%, #FBF5B7 75%, #D1B464 100%);
    border-color:rgba(246, 233, 189, .5);
}
.c-bg {
    color:#FCF6BA;
    background:-webkit-gradient(linear,left top,left bottom,from(#333),to( #000));
	background:-moz-linear-gradient(top,#333, #000);
	background-color: #333;
    border-color:#D1B464 ;
}
.btnC-custom {
    color: #ffffff;
    /*background-color: #1ad8c2;*/
    background:-webkit-gradient(linear,left top,left bottom,from(#39bd24),to(#3baf28));
	background:-moz-linear-gradient(top,#39bd24, #3baf28);
	background-color: #3baf28;
    border-radius:3px;
    border-color:rgba(255, 255, 255, .2);
    padding: 6px 18px;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
}
/**************************************************************/
/*** Sprite ***/
/**************************************************************/