.grid { max-width:69em; list-style:none; margin:30px auto; padding:0;} .grid li { display:block; float:left; padding:7px; width:33%; opacity:0;} .grid li.shown,.no-js .grid li,.no-cssanimations .grid li { opacity:1;} .grid li a,.grid li img { outline:none; border:none; display:block; max-width:100%;} .grid.effect-1 li.animate { -webkit-animation:fadeIn 0.65s ease forwards; animation:fadeIn 0.65s ease forwards;} @-webkit-keyframes fadeIn { 0% { } 100% { opacity:1; }} @keyframes fadeIn { 0% { } 100% { opacity:1; }} .grid.effect-2 li.animate { -webkit-transform:translateY(200px); transform:translateY(200px); -webkit-animation:moveUp 0.65s ease forwards; animation:moveUp 0.65s ease forwards;} @-webkit-keyframes moveUp { 0% { } 100% { -webkit-transform:translateY(0); opacity:1; }} @keyframes moveUp { 0% { } 100% { -webkit-transform:translateY(0); transform:translateY(0); opacity:1; }} .grid.effect-3 li.animate { -webkit-transform:scale(0.6); transform:scale(0.6); -webkit-animation:scaleUp 0.65s ease-in-out forwards; animation:scaleUp 0.65s ease-in-out forwards;} @-webkit-keyframes scaleUp { 0% { } 100% { -webkit-transform:scale(1); opacity:1; }} @keyframes scaleUp { 0% { } 100% { -webkit-transform:scale(1); transform:scale(1); opacity:1; }} .grid.effect-4 { -webkit-perspective:1300px; perspective:1300px;} .grid.effect-4 li.animate { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg); transform:translateZ(400px) translateY(300px) rotateX(-90deg); -webkit-animation:fallPerspective .8s ease-in-out forwards; animation:fallPerspective .8s ease-in-out forwards;} @-webkit-keyframes fallPerspective { 0% { } 100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity:1; }} @keyframes fallPerspective { 0% { } 100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity:1; }} .grid.effect-5 { -webkit-perspective:1300px; perspective:1300px;} .grid.effect-5 li.animate { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform-origin:50% 50% -300px; transform-origin:50% 50% -300px; -webkit-transform:rotateX(-180deg); transform:rotateX(-180deg); -webkit-animation:fly .8s ease-in-out forwards; animation:fly .8s ease-in-out forwards;} @-webkit-keyframes fly { 0% { } 100% { -webkit-transform:rotateX(0deg); opacity:1; }} @keyframes fly { 0% { } 100% { -webkit-transform:rotateX(0deg); transform:rotateX(0deg); opacity:1; }} .grid.effect-6 { -webkit-perspective:1300px; perspective:1300px;} .grid.effect-6 li.animate { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform-origin:0% 0%; transform-origin:0% 0%; -webkit-transform:rotateX(-80deg); transform:rotateX(-80deg); -webkit-animation:flip .8s ease-in-out forwards; animation:flip .8s ease-in-out forwards;} @-webkit-keyframes flip { 0% { } 100% { -webkit-transform:rotateX(0deg); opacity:1; }} @keyframes flip { 0% { } 100% { -webkit-transform:rotateX(0deg); transform:rotateX(0deg); opacity:1; }} .grid.effect-7 { -webkit-perspective:1300px; perspective:1300px;} .grid.effect-7 li.animate { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); -webkit-animation:helix .8s ease-in-out forwards; animation:helix .8s ease-in-out forwards;} @-webkit-keyframes helix { 0% { } 100% { -webkit-transform:rotateY(0deg); opacity:1; }} @keyframes helix { 0% { } 100% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); opacity:1; }} .grid.effect-8 { -webkit-perspective:1300px; perspective:1300px;} .grid.effect-8 li.animate { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transform:scale(0.4); transform:scale(0.4); -webkit-animation:popUp .8s ease-in forwards; animation:popUp .8s ease-in forwards;} @-webkit-keyframes popUp { 0% { } 70% { -webkit-transform:scale(1.1); opacity:.8; -webkit-animation-timing-function:ease-out; } 100% { -webkit-transform:scale(1); opacity:1; }} @keyframes popUp { 0% { } 70% { -webkit-transform:scale(1.1); transform:scale(1.1); opacity:.8; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; } 100% { -webkit-transform:scale(1); transform:scale(1); opacity:1; }} @media screen and (max-width:900px) { .grid li { width:50%; }} @media screen and (max-width:400px) { .grid li { width:100%; }}.dirpostino{font-size:26px; padding:5px 5px; text-transform:uppercase; line-height:normal;font-family:'Sarabun-ExtraLight'; font-weight:bold; } .aboutuhcmobpthead{background:#cecece; text-align:left;} .aboutuhcmobpthead p{font-size:20px; } .abouthistorytimeline{padding:0px; background:#828282;} .abouthistorytimelineteam .abotudirc{width:350px;height:350px;} .abouthistorytimelineteam .about-box-layout8{ margin-top:50px; } .item-titlem{text-transform:uppercase;font-size:24px; } .abountmnoc{margin-left:0px; } .misiongead{background:#828282; } .misiongead .about-box-layout8 .item-title{text-align:right;} .about-wrap-layout4.misiongead .about-box-layout8 .item-title,.aboutuhcmobpthead.misiongead .contenp{color:#fff;} .about-box-layout8 .item-title{padding-top:25px;margin-bottom:5px; } .avatar-online img{border-radius:100%; } .showmore_trigger{text-align:right;} .about-box-layout8 h4.item-title{padding:0px; font-size:16px; margin:2px auto; margin-bottom:15px;} .circle { height:250px; width:250px; border-radius:50%; border:10px solid #ffffff; margin:0 25px 5px 0; *-webkit-shape-outside:circle(); *shape-outside:circle(); background:#000; } .showmore_content ul {padding-left:25px; list-style-type:disc;} @media (max-width:768px){ .circle{margin:0px auto;margin-bottom:30px;} .contmpo,.misiongead .about-box-layout8 .item-title,.aboutuhcmobpthead.misiongead .contenp{text-align:center;} }