html {background:#FFFFFF; box-sizing:border-box; font-family:'Charm',cursive; font-size:14px; font-weight:400;}
*, *:before, *:after {box-sizing: inherit;}
.u-clearfix:before,
.u-clearfix:after {content: " "; display: table;}
.u-clearfix:after {clear: both;}
.u-clearfix {zoom:1;}
.subtle {color:black;}

.card {position:relative;box-shadow: 0 0 5px rgba(75, 75, 75, .07);z-index: 1;} 
.card-container {margin: 25px auto 0;position:relative; border: 2px double black;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);}
.card-body {display:inline-block; float:left;}  
.card-number {margin-top: 15px; color: green;}
.card-circle {border: 3px solid green; border-radius: 70%;display: inline-block;
    line-height: 30px;font-size: 25px;height: 35px;text-align: center; width: 75px; background-color: yellow;}
.card-author {display: block;font-size: 35px;letter-spacing: .5px;
    margin: 25px 0 0;text-transform:uppercase; line-height: 1px; color:black;}
.card-title {font-size: 40px;  font-weight: 300; line-height: 60px;margin: 10px 0; color: green; } /* อักษรตัวใหญ่ */
.card-title2 {font-size: 30px;  font-weight: 300; line-height: 60px;margin: 10px 0; color: green; } /* อักษรตัวใหญ่ */
.card-description {display: inline-block; font-size: 20px; font-weight: 300;line-height: 30px; margin: 10px 0; color:black;}
.card-read {cursor: pointer;font-size: 20px;font-weight: 700;letter-spacing: 6px; margin: 5px 0 20px;position: relative; text-align: right; }
.card-read:after { background-color: #b8bddd;content: ""; display: block; height: 1px; position: absolute;top: 9px; width: 75%;}
.card-tag {float: right; margin: 5px 0 0;}
.card-shadow {background-color: #fff;
    box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 1), 0 2px 50px 2px rgba(0, 0, 0, 1), 0 0 100px 3px rgba(0, 0, 0, .25);
    height: 1px; margin: -1px auto 0; width: 80%; z-index: -1;}
button.big {background-color:white; /* Green */
    border:none; color:green; padding:1px 1px; text-align:center;
    text-decoration:none;  display:inline-block; font-family:'Charm',bold; font-size:30px;
    margin:4px 2px;  cursor:pointer;  -webkit-transition-duration:0.4s; 
    transition-duration:0.4s;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
button.big:hover {box-shadow: 0 12px 16px 0 blue,0 5px 10px 0 blue;}

a:link {color: black;text-decoration: none; }
a:visited {color: black;text-decoration: none;} /* visited link */
a:hover {color: white;text-shadow: 2px 2px 4px black;  } /* mouse over link */
a:active {color: pink;text-decoration: none;} /* selected link */

img:hover {animation: shake 0.5s; animation-iteration-count: infinite; }
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 

font.textshadow {box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);}
input {font-family: 'Itim',bold; font-size: 25px ; color:blue; ;
        box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;}
input.noborder {border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: hidden; background-color: #eee;  outline: none;}