/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 28, 2020, 10:20:30 AM
    Author     : GinGo
*/
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.home {
  background-image: url("../images/bgmain.jpg");
  background-color: #cccccc;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  
  
  -webkit-transition: background-size 2.5s ease-in-out;
  -moz-transition: background-size 2.5s ease-in-out ;
  -ms-transition: background-size 2.5s ease-in-out;
  -o-transition: background-size 2.5s ease-in-out;
  transition: background-size 2.5s ease-in-out;
  
  
}

.home.zoom {
  background-size: 2800px 820px !important;
  
 
}

.textmain {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white ; /* goldenrod */
    animation:tracking-in-expand 3s alternate ;
    -moz-animation:tracking-in-expand 3s ease; /*Firefox*/
    -webkit-animation:tracking-in-expand 3s alternate; /*Safari and Chrome*/
    -o-animation:tracking-in-expand 3s ease; /*Opera*/
    font-size: 90px;
    width: 100%;
}
.textmain2 {
    text-align: center;
    position: absolute;
    
    color: goldenrod;
    animation:scale-in-hor-center 1s alternate ;
    -moz-animation:scale-in-hor-center 1s alternate; /*Firefox*/
    -webkit-animation:scale-in-hor-center 1s alternate; /*Safari and Chrome*/
    -o-animation:scale-in-hor-center 1s alternate; /*Opera*/    
    top: 30%;
    width: 100%;
    height: 30%;
}

div.mainroom
{
  background-image: url("../images/mainroom.jpg");
  background-color: #cccccc;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
div.detailroom{
  background-image: url("../images/mainroom.jpg");
  background-color: #cccccc;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
}

div.liveroom{
  background-image: url("../images/mainroom.jpg");
  background-color: #cccccc;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
}

.mainroom_top{
    text-align: center;
    top: 10%;
    height: 100%;
    
}

.mainroom_bottom{
    
    text-align: center;
    height: 100%;
}

.door{
    height: 50%;
    animation:blink-1  1s infinite;
    animation-delay:0s;
    -moz-animation:blink-1 1s infinite; /*Firefox*/
    -webkit-animation:blink-1 1s infinite ; /*Safari and Chrome*/
    -webkit-animation-delay:0s;
    -o-animation:blink-1 1s infinite; /*Opera*/
}

.door2{
    height: 50%;
    animation:wobble-hor-bottom  2s infinite;
    animation-delay:2s;
    -moz-animation:wobble-hor-bottom 2s infinite; /*Firefox*/
    -webkit-animation:wobble-hor-bottom 2s infinite ; /*Safari and Chrome*/
    -webkit-animation-delay:2s;
    -o-animation:wobble-hor-bottom 2s infinite; /*Opera*/
}

.door:hover{
    cursor: -webkit-grab; 
    cursor: grab;
}
.door2:hover{
    cursor: -webkit-grab; 
    cursor: grab;
}

.doorclickL{
    animation:kenburns-left 2s ease ;
    -moz-animation:kenburns-left 2s ease; /*Firefox*/
    -webkit-animation:kenburns-left 2s ease; /*Safari and Chrome*/
    -o-animation:kenburns-left 2s ease; /*Opera*/
}

.doorclickR{
    animation:kenburns-right 2s ease ;
    -moz-animation:kenburns-right 2s ease; /*Firefox*/
    -webkit-animation:kenburns-right 2s ease; /*Safari and Chrome*/
    -o-animation:kenburns-right 2s ease; /*Opera*/
}

.doorclickC{
    animation:kenburns-top 2s ease ;
    -moz-animation:kenburns-top 2s ease; /*Firefox*/
    -webkit-animation:kenburns-top 2s ease; /*Safari and Chrome*/
    -o-animation:kenburns-top 2s ease; /*Opera*/
}

.btnmainroom{
    animation:wobble-hor-bottom  2s infinite;
    animation-delay:2s;
    -moz-animation:wobble-hor-bottom 2s infinite; /*Firefox*/
    -webkit-animation:wobble-hor-bottom 2s infinite ; /*Safari and Chrome*/
    -webkit-animation-delay:2s;
    -o-animation:wobble-hor-bottom 2s infinite; /*Opera*/
}

.btnlive{
    animation:heartbeat  2s infinite;
    animation-delay:2s;
    -moz-animation:heartbeat 2s infinite; /*Firefox*/
    -webkit-animation:heartbeat 2s infinite ; /*Safari and Chrome*/
    -webkit-animation-delay:2s;
    -o-animation:heartbeat 2s infinite; /*Opera*/
}

.subdiv{   
    width: 100%;
    height: 50%;
    position: relative;
    
}

.b1{
  
position: fixed;
margin-top: 100px;
margin-left: 200px;
}

.b2{
  
position: fixed;
margin-top: 100px;
margin-left: 450px;
}


div.btnbegin{
 animation:bounce-in-top 1s alternate;
 animation-delay:0s;
-moz-animation:bounce-in-top 1s alternate; /*Firefox*/
-webkit-animation:bounce-in-top 1s alternate ; /*Safari and Chrome*/
-webkit-animation-delay:0s;
-o-animation:bounce-in-top 1s alternate; /*Opera*/
 text-align: center;
 top: 65%;
 width: 100%;
  position: absolute;
  color: white;
}
.btnbeginclick{
  animation:bounce-in-top 1s alternate;
 animation-delay:0s;
-moz-animation:bounce-in-top 2s ease; /*Firefox*/
-webkit-animation:bounce-in-top 1s alternate ; /*Safari and Chrome*/
-webkit-animation-delay:0s;
-o-animation:bounce-in-top 5s ease; /*Opera*/
 text-align: center;
 top: 90%;
 width: 100%;
  position: absolute;
  
}

.btn1{
   transition: background-color 0.5s;
 /*  transition-delay: 1s; */
}


.btn1:hover {
    background-color: goldenrod;
    
}



 
@keyframes mytest
{from {left:0px;}
to {left:400px;}}
 
@-moz-keyframes mytest /*Firefox*/
{from {left:0px;}
to {left:400px;}}
 
@-webkit-keyframes mytest /*Safari and Chrome*/
{from {left:0px;}
to {left:400px;}}
 
@-o-keyframes mytest /*Opera*/
{from {left:0px;}
to {left:400px;}}

@-webkit-keyframes text-pop-up-top{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #ccc,0 2px 0 #ccc,0 3px 0 #ccc,0 4px 0 #ccc,0 5px 0 #ccc,0 6px 0 #ccc,0 7px 0 #ccc,0 8px 0 #ccc,0 9px 0 #ccc,0 50px 30px rgba(0,0,0,.3)}}@keyframes text-pop-up-top{0%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:none}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;text-shadow:0 1px 0 #ccc,0 2px 0 #ccc,0 3px 0 #ccc,0 4px 0 #ccc,0 5px 0 #ccc,0 6px 0 #ccc,0 7px 0 #ccc,0 8px 0 #ccc,0 9px 0 #ccc,0 50px 30px rgba(0,0,0,.3)}}

@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}

@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}
@keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}

@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

@-webkit-keyframes slide-in-elliptic-right-fwd{0%{-webkit-transform:translateX(800px) rotateY(-30deg) scale(0);transform:translateX(800px) rotateY(-30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-1800px 50%;transform-origin:-1800px 50%;opacity:1}}@keyframes slide-in-elliptic-right-fwd{0%{-webkit-transform:translateX(800px) rotateY(-30deg) scale(0);transform:translateX(800px) rotateY(-30deg) scale(0);-webkit-transform-origin:-100% 50%;transform-origin:-100% 50%;opacity:0}100%{-webkit-transform:translateX(0) rotateY(0) scale(1);transform:translateX(0) rotateY(0) scale(1);-webkit-transform-origin:-1800px 50%;transform-origin:-1800px 50%;opacity:1}}
@-webkit-keyframes scale-in-hor-center{0%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}@keyframes scale-in-hor-center{0%{-webkit-transform:scaleX(0);transform:scaleX(0);opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}}
@-webkit-keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}@keyframes slide-fwd-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(160px);transform:translateZ(160px)}}
@-webkit-keyframes slide-fwd-right{0%{-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0)}100%{-webkit-transform:translateZ(160px) translateX(100px);transform:translateZ(160px) translateX(100px)}}@keyframes slide-fwd-right{0%{-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0)}100%{-webkit-transform:translateZ(160px) translateX(100px);transform:translateZ(160px) translateX(100px)}}
@-webkit-keyframes slide-fwd-left{0%{-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0)}100%{-webkit-transform:translateZ(160px) translateX(-100px);transform:translateZ(160px) translateX(-100px)}}@keyframes slide-fwd-left{0%{-webkit-transform:translateZ(0) translateX(0);transform:translateZ(0) translateX(0)}100%{-webkit-transform:translateZ(160px) translateX(-100px);transform:translateZ(160px) translateX(-100px)}}
@-webkit-keyframes swirl-in-bck{0%{-webkit-transform:rotate(540deg) scale(5);transform:rotate(540deg) scale(5);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}@keyframes swirl-in-bck{0%{-webkit-transform:rotate(540deg) scale(5);transform:rotate(540deg) scale(5);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}
@-webkit-keyframes shadow-pop-tr{0%{-webkit-box-shadow:0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e;box-shadow:0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}100%{-webkit-box-shadow:1px -1px #3e3e3e,2px -2px #3e3e3e,3px -3px #3e3e3e,4px -4px #3e3e3e,5px -5px #3e3e3e,6px -6px #3e3e3e,7px -7px #3e3e3e,8px -8px #3e3e3e;box-shadow:1px -1px #3e3e3e,2px -2px #3e3e3e,3px -3px #3e3e3e,4px -4px #3e3e3e,5px -5px #3e3e3e,6px -6px #3e3e3e,7px -7px #3e3e3e,8px -8px #3e3e3e;-webkit-transform:translateX(-8px) translateY(8px);transform:translateX(-8px) translateY(8px)}}@keyframes shadow-pop-tr{0%{-webkit-box-shadow:0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e;box-shadow:0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}100%{-webkit-box-shadow:1px -1px #3e3e3e,2px -2px #3e3e3e,3px -3px #3e3e3e,4px -4px #3e3e3e,5px -5px #3e3e3e,6px -6px #3e3e3e,7px -7px #3e3e3e,8px -8px #3e3e3e;box-shadow:1px -1px #3e3e3e,2px -2px #3e3e3e,3px -3px #3e3e3e,4px -4px #3e3e3e,5px -5px #3e3e3e,6px -6px #3e3e3e,7px -7px #3e3e3e,8px -8px #3e3e3e;-webkit-transform:translateX(-8px) translateY(8px);transform:translateX(-8px) translateY(8px)}}
/* bg zoomin  */
@-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
@-webkit-keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}@keyframes kenburns-right{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:84% 50%;transform-origin:84% 50%}100%{-webkit-transform:scale(1.25) translateX(20px);transform:scale(1.25) translateX(20px);-webkit-transform-origin:right;transform-origin:right}}
@-webkit-keyframes kenburns-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:16% 50%;transform-origin:16% 50%}100%{-webkit-transform:scale(1.25) translate(-20px,15px);transform:scale(1.25) translate(-20px,15px);-webkit-transform-origin:left;transform-origin:left}}@keyframes kenburns-left{0%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0);-webkit-transform-origin:16% 50%;transform-origin:16% 50%}100%{-webkit-transform:scale(1.25) translate(-20px,15px);transform:scale(1.25) translate(-20px,15px);-webkit-transform-origin:left;transform-origin:left}}

/*ดุ๊กดิ๊ก */
@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}
@-webkit-keyframes shake-bottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-bottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}
@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.grad {
  background: #A9CCE3; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, white, #A9CCE3 ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, white, #A9CCE3); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, white, #A9CCE3); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, white, #A9CCE3); /* Standard syntax */
}