@charset "utf-8";

/*ANIMATION*/
@keyframes hover {
0%{opacity:1;}
100%{opacity:0.7;}
}

@keyframes mv_hover {
0%{opacity:1; background:rgba(0,0,0,0);}
100%{opacity:0.7; background:rgba(0,0,0,0.5);}
}

@keyframes mv_copy {
0%{opacity:0;}
20%{opacity:0;}
100%{opacity:1;}
}

@keyframes mv_logo {
0%{opacity:0; transform:translate(20%,-20%);}
100%{opacity:1; transform:translate(0,0);}
}

@keyframes mv_btn {
0%{opacity:0; transform:translate(0,-20%);}
100%{opacity:1; transform:translate(0,0);}
}

@keyframes contact_btn {
0%{transform:rotate(0);}
100%{transform:rotate(360deg);}
}

@keyframes approach {
0%{opacity:0; transform:scale(1);}
50%{opacity:0.15;}
100%{opacity:0; transform:scale(4);}
}

@keyframes grobal_nav {
0%{transform:translateY(-200%);}
100%{transform:translateY(0);}
}



/*INTRO*/
@keyframes left_door1 {
0%{transform:skewX(135deg) translate(-49.9%,110%);}
100%{transform:skewX(135deg) translate(-49.9%,0);}
}

@keyframes right_door1 {
0%{transform:skewX(135deg) translate(49.9%,-100%);}
100%{transform:skewX(135deg) translate(49.9%,0);}
}


@keyframes left_door2 {
0%{transform:skewX(135deg) translate(-49%,0);}
100%{transform:skewX(135deg) translate(-170%,0);}
}

@keyframes right_door2 {
0%{transform:skewX(135deg) translate(49%,0);}
100%{transform:skewX(135deg) translate(170%,0);}
}

@keyframes symboll1 {
0%{transform:translate(0,20%); opacity:0;}
100%{transform:translate(0,0); opacity:1;}
}

@keyframes symbolr1 {
0%{transform:translate(0,-20%); opacity:0;}
100%{transform:translate(0,0); opacity:1;}
}

@keyframes symboll2 {
0%{transform:translate(0,0); opacity:1;}
100%{transform:translate(0,-30%); opacity:0;}
}

@keyframes symbolr2 {
0%{transform:translate(0,0); opacity:1;}
100%{transform:translate(0,30%); opacity:0;}
}


/*ANIMATE-RE-*/
body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
-webkit-backface-visibility: hidden;
}

.animated {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
0% { opacity: 0; -webkit-transform: translate(15px,-15px);}
100% { opacity: 1; -webkit-transform: translate(0);}
}

@-moz-keyframes fadeInUp {
0% { opacity: 0; -moz-transform: translate(15px,-15px);}
100% { opacity: 1; -moz-transform: translate(0);}
}

@-o-keyframes fadeInUp {
0% { opacity: 0; -o-transform: translate(15px,-15px);}
100% { opacity: 1; -o-transform: translate(0);}
}

@keyframes fadeInUp {
0% { opacity: 0; transform: translate(15px,-15px);}
100% { opacity: 1; transform: translate(0);}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}




/*INVIEW*/
.inviewfadeInUp {
opacity:0;
transform:translate(0,10%);
transition:1s ease;
}

.fadeInUp {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeInRight {
opacity:0;
transform:translate(10%,0);
transition:1s ease;
}

.fadeInRight {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeInDown {
opacity:0;
transform:translate(0,-10%);
transition:1s ease;
}

.fadeInDown {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeInLeft {
opacity:0;
transform:translate(-10%,0);
transition:1s ease;
}

.fadeInLeft {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeIn {
opacity:0;
transition:1s ease;
}

.fadeIn {
opacity:1;
}