.transitionDemo {
    /* transition=การเปลี่ยนแปลง */
    /* transition-property: width;          กำหนดให้ "width" เป็น property ที่จะใช้ transition */
    /* transition-duration: 1s;             กำหนดให้ transition กินระยะเวลา 1 วินาที */
    /* transition-timing-function: ease;    กำหนดให้รูปแบบของ speed เป็นแบบ "ease" */
    /* transition-delay: 0s;                กำหนดให้เริ่มทำ transition ทันที ไม่ต้องมีดีเลย์ */
}
/*==========================================================
 <<    KS-Media :  Non-Mobile First Method    >>       
==========================================================*/
/*
@media only screen and (max-width : 1200px) {/* Large Devices, Wide Screens * /}
@media only screen and (max-width : 992px) {/* Medium Devices, Desktops * /}
@media only screen and (max-width : 768px) {/* Small Devices, Tablets * /}
@media only screen and (max-width : 480px) {/* Extra Small Devices, Phones * /}
@media only screen and (max-width : 320px) {/* Custom, iPhone Retina * /}
*/

@media (min-width: 576px) { /* Extra Small Devices, Phones */
}

@media (min-width: 768px) { /* Small Devices, Tablets */
}

@media (min-width: 992px) { /* Medium Devices, Desktops */
}

@media (min-width: 1200px) { /* Large Devices, Wide Screens */
}

/****************************************/
/****************************************/

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* Width Value SCAL */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* Width SCAL*/
[class*="w-sc-"] {
    min-height: 1px;
}

.w-sc-01 {
    width: 70px;
}

.w-sc-02 {
    width: 170px;
}

.w-sc-03 {
    width: 270px;
}

.w-sc-04 {
    width: 370px;
}

.w-sc-05 {
    width: 470px;
}

.w-sc-06 {
    width: 570px;
}

.w-sc-07 {
    width: 670px;
}

.w-sc-08 {
    width: 770px;
}

.w-sc-09 {
    width: 870px;
}

.w-sc-10 {
    width: 970px;
}

.w-sc-11 {
    width: 1070px;
}

.w-sc-12 {
    width: 1170px;
}
/* Min Width SCAL*/
[class*="min-w-sc-"] {
    min-height: 1px;
}

.min-w-sc-01 {
    min-width: 70px;
}

.min-w-sc-02 {
    min-width: 170px;
}

.min-w-sc-03 {
    min-width: 270px;
}

.min-w-sc-04 {
    min-width: 370px;
}

.min-w-sc-05 {
    min-width: 470px;
}

.min-w-sc-06 {
    min-width: 570px;
}

.min-w-sc-07 {
    min-width: 670px;
}

.min-w-sc-08 {
    min-width: 770px;
}

.min-w-sc-09 {
    min-width: 870px;
}

.min-w-sc-10 {
    min-width: 970px;
}

.min-w-sc-11 {
    min-width: 1070px;
}

.min-w-sc-12 {
    min-width: 1170px;
}
/* Max Width SCAL*/
[class*="max-w-"] {
    min-height: 1px;
}

.max-w-sc-01 {
    max-width: 70px;
}

.max-w-sc-02 {
    max-width: 170px;
}

.max-w-sc-03 {
    max-width: 270px;
}

.max-w-sc-04 {
    max-width: 370px;
}

.max-w-sc-05 {
    max-width: 470px;
}

.max-w-sc-06 {
    max-width: 570px;
}

.max-w-sc-07 {
    max-width: 670px;
}

.max-w-sc-08 {
    max-width: 770px;
}

.max-w-sc-09 {
    max-width: 870px;
}

.max-w-sc-10 {
    max-width: 970px;
}

.max-w-sc-11 {
    max-width: 1070px;
}

.max-w-sc-12 {
    max-width: 1170px;
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* Width Value PIXEL */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* Width PIXEL */
.w-50px {
    width: 50px !Important;
}
.w-60px {
    width: 60px !Important;
}
.w-70px {
    width: 75px !Important;
}
.w-80px {
    width: 80px !Important;
}
.w-100px {
    width: 100px !Important;
}
.w-110px {
    width: 110px !Important;
}
.w-120px {
    width: 120px !Important;
}
.w-130px {
    width: 130px !Important;
}
.w-140px {
    width: 140px !Important;
}
.w-150px {
    width: 150px !Important;
}
.w-160px {
    width: 160px !Important;
}
.w-180px {
    width: 180px !Important;
}

.w-200px {
    width: 200px !Important;
}
.w-220px {
    width: 220px !Important;
}
.w-250px {
    width: 250px !Important;
}
.w-280px {
    width: 280px !Important;
}
.w-300px {
    width: 300px !Important;
}
.w-320px {
    width: 320px !Important;
}
.w-350px {
    width: 350px !Important;
}
.w-max {
    width: 100%;
}


/* Min Width PIXEL */
.min-w-60 {
    min-width: 60px !Important;
    width:60px;
}
.min-w-80 {
    min-width: 80px !Important;
}
.min-w-90 {
    min-width: 90px !Important;
}
.min-w-100 {
    min-width: 100px !Important;
}
.min-w-110 {
    min-width: 110px !Important;
}
.min-w-120 {
    min-width: 120px !Important;
}

.min-w-150 {
    min-width: 150px !Important;
}

.min-w-180 {
    min-width: 180px !Important;
}

.min-w-200 {
    min-width: 200px !Important;
}
.min-w-220 {
    min-width: 220px !Important;
}
.min-w-250 {
    min-width: 250px !Important;
}
.min-w-280 {
    min-width: 280px !Important;
}
.min-w-300 {
    min-width: 300px !Important;
}
.min-w-340 {
    min-width: 300px !Important;
}
.min-w-360 {
    min-width: 300px !Important;
}
.min-w-400 {
    min-width: 400px !Important;
}
.min-w-500 {
    min-width: 500px !Important;
}
.min-w-600 {
    min-width: 600px !Important;
}

/*-----------------*/
/* Min Width PIXEL */
.min-w-px40 {
    min-width: 60px !Important;
}

.min-w-px60 {
    min-width: 60px !Important;
}

.min-w-px80 {
    min-width: 80px !Important;
}

.min-w-px90 {
    min-width: 90px !Important;
}

.min-w-px100 {
    min-width: 100px !Important;
}

.min-w-px110 {
    min-width: 110px !Important;
}

.min-w-px120 {
    min-width: 120px !Important;
}

.min-w-px150 {
    min-width: 150px !Important;
}

.min-w-px180 {
    min-width: 180px !Important;
}

.min-w-200 {
    min-width: 200px !Important;
}

.min-w-px220 {
    min-width: 220px !Important;
}

.min-w-px250 {
    min-width: 250px !Important;
}

.min-w-px280 {
    min-width: 280px !Important;
}

.min-w-px300 {
    min-width: 300px !Important;
}

.min-w-px340 {
    min-width: 300px !Important;
}

.min-w-px360 {
    min-width: 300px !Important;
}

.min-w-px400 {
    min-width: 400px !Important;
}

.min-w-px500 {
    min-width: 500px !Important;
}

.min-w-px600 {
    min-width: 600px !Important;
}

/* Max Width PIXEL */
.max-w-100 {
    max-width: 100px !Important;
}

.max-w-120 {
    max-width: 120px !Important;
}

.max-w-150 {
    max-width: 150px !Important;
}

.max-w-180 {
    max-width: 180px !Important;
}

.max-w-200 {
    max-width: 200px !Important;
}

.max-w-300 {
    max-width: 300px !Important;
}

.max-w-400 {
    max-width: 400px !Important;
}

.max-w-500 {
    max-width: 500px !Important;
}