/* Reset Tags */
body { margin:0; padding:0; }
body * { position: absolute; }
img { border: 0px;}
sup { position: relative; font-size: 0.6em; }
/* Common Elements */
#container { width: 300px; height: 250px; 
    position: relative; overflow: hidden; -ms-overflow-x: hidden; top:0px; left:0px; background-color: #f5f1eb; }
#border { width: 300px; height: 250px;
    left:0px; top:0px; border: 1px solid #8c8d8e; pointer-events: none; box-sizing: border-box; z-index: 4;}
#coverBox {width: 300px; height: 250px; background-color: #f5f1eb; pointer-events: none; z-index: 4;}
#exit-bg { width: 300px; height: 250px; 
    top: 0px; left: 0px; opacity: 0; z-index: 1; cursor: pointer; }
/* CTA button */
#cta {  z-index: 2; cursor: pointer; width: 300px; height: 250px;}
#cta > * { pointer-events: none }
#ctaLine { width: 0 !important; overflow: hidden; transition: width 1s; }
#ctaLine.open {width: 130px !important;}
#cta:hover #ctaLine { width: 300px; }
/* Common Animation Class */
.ani { transition: all 0.4s ease-out; }
/* noani - stop animation on reset to default */
.noani { transition: all 0s linear !important; }
.hide { opacity: 0 !important; }
.hideBack { opacity: 0 !important; z-index: 0 !important;}
.full { width: 300px; height: 250px; left: 0; top: 0; }    


/* New Elements */
#p2e, #p2f {opacity:0; transform: translateY(20px);}
#p1a, #p2a, #p3a {opacity:0; transform: translateY(40px);}
#p1b, #p2b, #p3b {opacity:0; transform: translateY(60px);}
#p1c, #p2c, #p3c {opacity:0; transform: translateY(80px);}
#p1d, #p2d, #p3d {opacity:0; transform: translateY(100px);}

/* animation */

@keyframes inLeft {
    0% {transform: translateX(-300px)}
    100% {transform: translateX(0)}
}
.inLeft { animation: inLeft .6s ease-out forwards; }

@keyframes inBottom {
    0% {transform: translateY(250px)}
    100% {transform: translateX(0)}
}
.inBottom { animation: inBottom .6s ease-out forwards; }

@keyframes outBottom {
    100% {transform: translateY(250px)}
    0% {transform: translateX(0)}
}
.outBottom { animation: outBottom .3s ease-in forwards; }

@keyframes hideUp {
    100% {transform: translateY(-20px); opacity: 0;}
}
.hideUp { animation: hideUp .3s forwards; }
@keyframes showDown {
    0% {transform: translateY(-20px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}
.showDown { animation: showDown .3s forwards; }
@keyframes hideDown {
    100% {transform: translateY(20px); opacity: 0;}
}
.hideDown { animation: hideDown .3s forwards; }

@keyframes showUp {
    100% {transform: translateY(0); opacity: 1; }
}
.showUp { animation: showUp 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }

@keyframes hideUp {
    100% {transform: translateY(50px); opacity: 0; }
}
.hideUp { animation: hideUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }

@keyframes showUpFadeIn {
    0% {transform: translateY(20px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}
.showUpFadeIn { animation: showUpFadeIn 1s cubic-bezier(0.215, 0.61, 0.355, 1)  forwards; }

@keyframes zoomIn {
    0% {transform: matrix(3,0,0,3,0,0)}
    100% {transform: matrix(1,0,0,1,0,0);}
}
.zoomIn { animation: zoomIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }


@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeInQuick { animation: fadeIn .1s ease-in forwards; }
.fadeIn { animation: fadeIn .4s ease-out forwards; }

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOutQuick { animation: fadeOut .2s ease-in forwards; }
.fadeOut { animation: fadeOut .8s ease-out forwards; }

@keyframes fadeOutSM {
    0%  {opacity: .8;}
    20% {opacity: .8;}
    21% {opacity: .6;}
    40% {opacity: .6;}
    41% {opacity: .4;}
    60% {opacity: .4;}
    61% {opacity: .2;}
    80% {opacity: .2;}
    81% {opacity: 0;}
    100% {opacity: 0;}
}
.fadeOutSM { animation: fadeOutSM 1.2s ease-out forwards; }