@-webkit-keyframes fall {
    0% {
        opacity: 0.9;
        top: 0;
    }
    100% {
        opacity: 0.2;
        top: 100%
    }
}

@keyframes fall {
    0% {
        opacity: 0.9;
        top: 0
    }
    100% {
        opacity: 0.2;
        top: 100%
    }
}

@-webkit-keyframes blow-soft-left {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: -50%
    }
}

@keyframes blow-soft-left {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: -50%
    }
}

@-webkit-keyframes blow-medium-left {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: -100%
    }
}

@keyframes blow-medium-left {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: -100%
    }
}

@-webkit-keyframes blow-soft-right {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: 50%
    }
}

@keyframes blow-soft-right {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: 50%
    }
}

@-webkit-keyframes blow-medium-right {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: 100%
    }
}

@keyframes blow-medium-right {
    0% {
        margin-left: 0
    }
    100% {
        margin-left: 100%
    }
}

@-webkit-keyframes sway-0 {
    0% {
        -webkit-transform: rotate(-5deg)
    }
    40% {
        -webkit-transform: rotate(28deg)
    }
    100% {
        -webkit-transform: rotate(3deg)
    }
}

@keyframes sway-0 {
    0% {
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    40% {
        -ms-transform: rotate(28deg);
        transform: rotate(28deg)
    }
    100% {
        -ms-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@-webkit-keyframes sway-1 {
    0% {
        -webkit-transform: rotate(10deg)
    }
    40% {
        -webkit-transform: rotate(43deg)
    }
    100% {
        -webkit-transform: rotate(15deg)
    }
}

@keyframes sway-1 {
    0% {
        -ms-transform: rotate(10deg);
        transform: rotate(10deg)
    }
    40% {
        -ms-transform: rotate(43deg);
        transform: rotate(43deg)
    }
    100% {
        -ms-transform: rotate(15deg);
        transform: rotate(15deg)
    }
}

@-webkit-keyframes sway-2 {
    0% {
        -webkit-transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(56deg)
    }
    100% {
        -webkit-transform: rotate(22deg)
    }
}

@keyframes sway-2 {
    0% {
        -ms-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -ms-transform: rotate(56deg);
        transform: rotate(56deg)
    }
    100% {
        -ms-transform: rotate(22deg);
        transform: rotate(22deg)
    }
}

@-webkit-keyframes sway-3 {
    0% {
        -webkit-transform: rotate(25deg)
    }
    40% {
        -webkit-transform: rotate(74deg)
    }
    100% {
        -webkit-transform: rotate(37deg)
    }
}

@keyframes sway-3 {
    0% {
        -ms-transform: rotate(25deg);
        transform: rotate(25deg)
    }
    40% {
        -ms-transform: rotate(74deg);
        transform: rotate(74deg)
    }
    100% {
        -ms-transform: rotate(37deg);
        transform: rotate(37deg)
    }
}

@-webkit-keyframes sway-4 {
    0% {
        -webkit-transform: rotate(40deg)
    }
    40% {
        -webkit-transform: rotate(68deg)
    }
    100% {
        -webkit-transform: rotate(25deg)
    }
}

@keyframes sway-4 {
    0% {
        -ms-transform: rotate(40deg);
        transform: rotate(40deg)
    }
    40% {
        -ms-transform: rotate(68deg);
        transform: rotate(68deg)
    }
    100% {
        -ms-transform: rotate(25deg);
        transform: rotate(25deg)
    }
}

@-webkit-keyframes sway-5 {
    0% {
        -webkit-transform: rotate(50deg)
    }
    40% {
        -webkit-transform: rotate(78deg)
    }
    100% {
        -webkit-transform: rotate(40deg)
    }
}

@keyframes sway-5 {
    0% {
        -ms-transform: rotate(50deg);
        transform: rotate(50deg)
    }
    40% {
        -ms-transform: rotate(78deg);
        transform: rotate(78deg)
    }
    100% {
        -ms-transform: rotate(40deg);
        transform: rotate(40deg)
    }
}

@-webkit-keyframes sway-6 {
    0% {
        -webkit-transform: rotate(65deg)
    }
    40% {
        -webkit-transform: rotate(92deg)
    }
    100% {
        -webkit-transform: rotate(58deg)
    }
}

@keyframes sway-6 {
    0% {
        -ms-transform: rotate(65deg);
        transform: rotate(65deg)
    }
    40% {
        -ms-transform: rotate(92deg);
        transform: rotate(92deg)
    }
    100% {
        -ms-transform: rotate(58deg);
        transform: rotate(58deg)
    }
}

@-webkit-keyframes sway-7 {
    0% {
        -webkit-transform: rotate(72deg)
    }
    40% {
        -webkit-transform: rotate(118deg)
    }
    100% {
        -webkit-transform: rotate(68deg)
    }
}

@keyframes sway-7 {
    0% {
        -ms-transform: rotate(72deg);
        transform: rotate(72deg)
    }
    40% {
        -ms-transform: rotate(118deg);
        transform: rotate(118deg)
    }
    100% {
        -ms-transform: rotate(68deg);
        transform: rotate(68deg)
    }
}

@-webkit-keyframes sway-8 {
    0% {
        -webkit-transform: rotate(94deg)
    }
    40% {
        -webkit-transform: rotate(136deg)
    }
    100% {
        -webkit-transform: rotate(82deg)
    }
}

@keyframes sway-8 {
    0% {
        -ms-transform: rotate(94deg);
        transform: rotate(94deg)
    }
    40% {
        -ms-transform: rotate(136deg);
        transform: rotate(136deg)
    }
    100% {
        -ms-transform: rotate(82deg);
        transform: rotate(82deg)
    }
}

.sakura {
    /* background: -webkit-linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)); */
    background: #674ea7;;
    pointer-events: none;
    position: absolute
}

.sakura {
  background:#D9C588;
}

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

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body, html{overflow: hidden; background:url("../images/bg.jpg");}

.kanit-sb{font-weight:600 !important; font-family:'Kanit', sans-serif;}
.kanit-m{font-weight:500 !important; font-family:'Kanit', sans-serif;}
.kanit-r{font-weight:400 !important; font-family:'Kanit', sans-serif;}
.kanit-l{font-weight:300 !important; font-family: 'Kanit', sans-serif;}
.kanit-el{font-weight:200 !important; font-family: 'Kanit', sans-serif;}
.kanit-t{font-weight:100 !important; font-family: 'Kanit', sans-serif;}
img { 
    max-width: 100%;
}

.main{width:990px; text-align:center; position:absolute; display:block; top:50%; left:50%; transform: translate(-50%, -50%);}
.logo{width:170px; margin-bottom:20px; display:inline-block;}
.pic{width:80%; margin:0 10%; display:block;}
.pic img{width:100%; display:block;}
.social{width:100%; text-align:center; margin-top:20px; display:block;}
.social a{width:40px; text-align:center; display:inline-block;
    transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -webkit-transition: all 0.3s ease 0s;
}
.social a:hover{
    transform:scale(1.05); transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;
}
.pic {
  background: #fff;
  background: -webkit-linear-gradient(#fff, #f0f0f0);
  background: linear-gradient(#fff, #f0f0f0);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  padding: 8px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 15px;
}
.pic::before, .pic::after {
  content: "";
  height: 20px;
  position: absolute;
  z-index: -1;
}
.i1::before, .i1::after {
  bottom: 15px;
  -moz-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 15px rgba(0, 0, 0, 0.5);
  width: 50%;
}
.i1::after {
  right: 2%;
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}
.i1::before {
  left: 2%;
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

h3 {
    margin:30px 0 0 0;
    padding:0;
    font-size:22px;
    color:#AB7C50;
    line-height:1;
}


p {
    color:#564861;
    margin: 15px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size:16px;
}

.wrap {
    display: block;
    min-height:100%;
    width:100%;
}

@media (max-width:1024px) {
.logo{width:160px;}
}
@media (max-width:990px) {
.main{width:100%; padding:0 20px;}
.pic{width:100%; margin:0;}
}
@media (max-width:600px) {
.logo{width:150px;}
}
@media (max-width:430px) {
.logo{width:100px;}
h3 {font-size:16px;}
p {font-size:13px;}
}