@keyframes pullIn {
0% {
transform: scaleY(0);
opacity:0;
}
100% {
transform: scaleY(1);
opacity:1
}
}
@keyframes pullOut {
0% {
transform: scaleY(1);
opacity:1
}
100% {
transform: scaleY(0);
opacity:0;
}
}
.slider_set {
	-webkit-animation: mySlider 8s linear;
    animation: mySlider 8s linear;
}
.front_set{z-index:10}
.back_set{z-index:5}
 @keyframes mySlider {
 0% { transform: scale(1);opacity:0;}
 30%{opacity:1}
 100% { transform: scale(1.1);opacity:1}
}
 @-webkit-keyframes mySlider {
 0% { transform: scale(1);opacity:0;}
 30%{opacity:1}
 100% { transform: scale(1.1);opacity:1}
}
@keyframes headerStart{
0%{transfrom:scaleY(1); opacity:0;}
50%{transform:scaleY(1.2); opacity:1;}
75%{transform:scaleY(1);}
90%{transform:scaleY(1.1);}
100%{transform:scaleY(1);}
}
@keyframes textBack{
0%{background:none;}
100%{background:rgba(0,0,0,0.20);}
}

 @keyframes pullDown {
 0% { transform: scaleY(0);}
 70% { transform: scaleY(1);}
 80% { transform: scaleY(0.95);}
 90% { transform: scaleY(1.05);}
 100% { transform: scaleY(1);}
}
 @-webkit-keyframes pullDown {
0% { transform: scaleY(0);}
 70% { transform: scaleY(1);}
 80% { transform: scaleY(0.95);}
 90% { transform: scaleY(1.05);}
 100% { transform: scaleY(1);}
}
.tossing { animation: tossing 2.5s infinite; -webkit-animation: tossing 2.5s infinite; -moz-animation: tossing 2.5s infinite; -o-animation: tossing 2.5s infinite; }
 @keyframes tossing {
 0% { transform: rotate(-4deg);}
 50% { transform: rotate(4deg);}
 100% { transform: rotate(-4deg);}
}
 @-webkit-keyframes tossing {
 0% { -webkit-transform: rotate(-4deg);}
 50% { -webkit-transform: rotate(4deg);}
 100% { -webkit-transform: rotate(-4deg);}
}
@-moz-keyframes tossing{
 0% { -webkit-transform: rotate(-4deg);}
 50% { -webkit-transform: rotate(4deg);}
 100% { -webkit-transform: rotate(-4deg);}
}
@-o-keyframes tossing{0% { -webkit-transform: rotate(-4deg);}
 50% { -webkit-transform: rotate(4deg);}
 100% { -webkit-transform: rotate(-4deg);}}

.pulse { animation: pulse 1.5s infinite; -webkit-animation: pulse 1.5s infinite; }
 @keyframes pulse {
 0% { transform: scale(0.9); opacity: 0.7;}
 50% { transform: scale(1); opacity: 1;}
 100% { transform: scale(0.9); opacity: 0.7;}
}
 @-webkit-keyframes pulse {
 0% { -webkit-transform: scale(0.95); opacity: 0.7;}
 50% { -webkit-transform: scale(1); opacity: 1;}
 100% { -webkit-transform: scale(0.95); opacity: 0.7;}
}


.scaleIn { animation:scaleIn 5s ease-in-out 0s forwards; -webkit-animation:scaleIn 5s ease-in-out 0s forwards; }
@keyframes scaleIn {
 0% { transform: scale(3); opacity: 0;}
 60% { transform: scale(0.8); opacity: 1;}
 70% { transform: scale(1.2); opacity: 0.7;}
 80% { transform: scale(0.8); opacity: 1;}
 90% { transform: scale(1.2); opacity: 0.7;}
 100% { transform: scale(1); opacity: 1;}
}
 @-webkit-keyframes scaleIn {
 0% { -webkit-transform: scale(3); opacity: 0;}
 60% { -webkit-transform: scale(0.8); opacity: 1;}
 70% { -webkit-transform: scale(1.2); opacity: 0.7;}
 80% { -webkit-transform: scale(0.8); opacity: 1;}
 90% { -webkit-transform: scale(1.2); opacity: 0.7;}
 100% { -webkit-transform: scale(1); opacity: 1;}
 }
 .role1{ animation: role 3.5s ease-in-out 0s forwards; -webkit-animation:role 3.5s ease-in-out 0s forwards; transform-origin:center; }
@keyframes role {
 0% { transform: rotateY(0deg); opacity: 0;}
 100% { transform: rotateY(1080deg); opacity: 1;}
}
 @-webkit-keyframes role {
 0% { -webkit-transform: rotateY(0deg); opacity: 0;}
 100% { -webkit-transform: rotateY(1080deg); opacity: 1;}
 }



 @keyframes fadeIn {
 0% { transform: scale(0);}
 60% { transform: scale(1.1);}
 80% { transform: scale(0.9);}
 100% { transform: scale(1);}
}
 @-webkit-keyframes fadeIn {
 0% { -webkit-transform: scale(0);}
 60% { -webkit-transform: scale(1.1);}
 80% { -webkit-transform: scale(0.9);}
 100% { -webkit-transform: scale(1);}
}
@keyframes myhatch {
 0% { transform: rotate(0deg) scaleY(0.6); opacity: 0;}
 20% { transform: rotate(-2deg) scaleY(1.05);}
 35% { transform: rotate(2deg) scaleY(1); opacity:1;}
 50% { transform: rotate(-2deg);}
 65% { transform: rotate(1deg);}
 80% { transform: rotate(-1deg);}
 100% { transform: rotate(0deg);}
}
 @-webkit-keyframes myhatch2 {
 0% { -webkit-transform: rotate(0deg) scaleY(0.6);  opacity: 0;}
 20% { -webkit-transform: rotate(-2deg) scaleY(1.05);}
 35% { -webkit-transform: rotate(2deg) scaleY(1); opacity:1;}
 50% { -webkit-transform: rotate(-2deg);}
 65% { -webkit-transform: rotate(1deg);}
 80% { -webkit-transform: rotate(-1deg);}
 100% { -webkit-transform: rotate(0deg);}
}
 @keyframes stretchRight {
 0% {transform: scaleX(0.3); opacity:0;}
 40% {transform: scaleX(1.02);}
 60% {transform: scaleX(0.98);}
 80% {transform: scaleX(1.01);}
 100% {transform: scaleX(0.98);}
 80% {transform: scaleX(1.01);}
 100% {transform: scaleX(1); opacity:1;}
}
 @-webkit-keyframes stretchRight {
 0% { -webkit-transform: scaleX(0.3); opacity:0;}
 40% { -webkit-transform: scaleX(1.02);}
 60% { -webkit-transform: scaleX(0.98);}
 80% { -webkit-transform: scaleX(1.01);}
 100% { -webkit-transform: scaleX(0.98);}
 80% { -webkit-transform: scaleX(1.01);}
 100% { -webkit-transform: scaleX(1); opacity:1;}
}

 @keyframes slideExpandUp {
 0% { transform: translateY(10%) scaleX(0.5); opacity:0;}
 30% { transform: translateY(-2%) scaleX(0.5);}
 40% { transform: translateY(2%) scaleX(0.5);}
 50% { transform: translateY(0%) scaleX(1.1);}
 60% { transform: translateY(0%) scaleX(0.9);}
 70% { transform: translateY(0%) scaleX(1.05);}
 80% { transform: translateY(0%) scaleX(0.95);}
 90% { transform: translateY(0%) scaleX(1.02);}
 100%{ transform: translateY(0%) scaleX(1); opacity:1;}
}
 @-webkit-keyframes slideExpandUp {
 0% { -webkit-transform: translateY(10%) scaleX(0.5); opacity:0;}
 30% { -webkit-transform: translateY(-2%) scaleX(0.5);}
 40% { -webkit-transform: translateY(2%) scaleX(0.5);}
 50% { -webkit-transform: translateY(0%) scaleX(1.1);}
 60% { -webkit-transform: translateY(0%) scaleX(0.9);}
 70% { -webkit-transform: translateY(0%) scaleX(1.05);}
 80% { -webkit-transform: translateY(0%) scaleX(0.95);}
 90% { -webkit-transform: translateY(0%) scaleX(1.02);}
 100% { -webkit-transform: translateY(0%) scaleX(1); opacity:1;}
}
@keyframes penShake{
	0%{transform:rotate(2deg)}
	20%{transform:rotate(-2deg)}
	40%{transform:rotate(2deg)}
	60%{transform:rotate(-2deg)}
	80%{transform:rotate(2deg)}
	100%{transform:rotate(-2deg)}
}
@-webkit-keyframes penShake{
		0%{transform:rotate(2deg)}
	20%{transform:rotate(-2deg)}
	40%{transform:rotate(2deg)}
	60%{transform:rotate(-2deg)}
	80%{transform:rotate(2deg)}
	100%{transform:rotate(-2deg)}
}
@keyframes pen{
	0%{transform:translate(0,0); opacity:1}
	80%{transform:translate(500px,200px); opacity:1}
	100%{transform:translate(500px,200px); opacity:0}
}
@-webkit-keyframes pen{
	0%{transform:translate(0,0); opacity:1}
	80%{transform:translate(500px,200px); opacity:1}
	100%{transform:translate(500px,200px); opacity:0}
}
.pen_wp{ position: relative; margin: 0 0 35%;}
.pen_move {position: absolute; width: 100%;}
.pen_on{max-width:50%;display: block;margin: 0 auto;}
.open_book_wp{position:relative;margin: 0 0 35%;}
.book_on_wp{position:absolute;top:0;left:0;z-index:100;width: 100%;}
.book_on{max-width:50%;display: block;margin: 10% auto 0;}

.book{ -webkit-transition : 1s ease; transition:1s ease; -webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; opacity:0;}
.open{ -webkit-transition:1s ease; transition:1s ease;	opacity:1;}

@media screen and (min-width:1px) and (max-width:799px){
.pen{ -webkit-transition:1s ease; transition:1s ease; -webkit-transform:translateY(400px); transform:translateY(400px); opacity:0;}

}
@media screen and (min-width:800px) {
.pen_on{max-width:100%;margin:0;}
.pullDown {-webkit-animation: pullDown 2s ease; -webkit-transform-origin: 50% 0%; animation: pullDown 2s ease; transform-origin: 50% 0%;  }
.pen{-webkit-animation:pen 2s ease both; animation:pen 2s ease both;  opacity:1;}
.penShake{animation:penShake 2s ease both; -webkit-animation:penShake 2s ease both;transform-origin:100% 100%; -webkit-transform-origin:100% 100%;}
.slideExpandUp { animation: slideExpandUp 3.6s ease both; -webkit-animation : slideExpandUp 3.6s ease both; }
.hatch { -webkit-animation: hatch 2s ease-in-out both; animation: hatch 2s ease-in-out both; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}

.stretchRight {	-webkit-animation: stretchRight 1.5s ease-out both; animation: stretchRight 1.5s ease-out both;-ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; }
.fadeIn1 { animation:fadeIn 2s ease-in-out 0s both; -webkit-animation:fadeIn 2s ease-in-out 0s both; }
.fadeIn2 { animation:fadeIn 2s ease-in-out 0.5s both; -webkit-animation:fadeIn 2s ease-in-out 0.5s both; }
.fadeIn3 { animation:fadeIn 2s ease-in-out 1s both; -webkit-animation:fadeIn 2s ease-in-out 1s both; }
}