/*
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 : 08-mar-2016, 20:45:04
    Author     : Darius
*/

.menuabrir{
    animation-name:menuabrir;
    animation-duration:1s;
    -webkit-animation-name:menuabrir;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:menuabrir;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}
.menucerrar{
    animation-name:menucerrar;
    animation-duration:1s;
    -webkit-animation-name:menucerrar;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:menucerrar;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}
.galeriacerrar{
    animation-name:galeriacerrar;
    animation-duration:1s;
    -webkit-animation-name:galeriacerrar;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:galeriacerrar;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}
.galeriaabrir{
    animation-name:galeriaabrir;
    animation-duration:1s;
    -webkit-animation-name:galeriaabrir;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:galeriaabrir;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}
.menuabrirboton{
    animation-name:menuabrirboton;
    animation-duration:1s;
    -webkit-animation-name:menuabrirboton;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:menuabrirboton;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}
.menucerrarboton{
    animation-name:menucerrarboton;
    animation-duration:1s;
    -webkit-animation-name:menucerrarboton;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name:menucerrarboton;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes menuabrir{
    0%{
        width:0vw;
        height:90vh;
        opacity: 0;
    }                
    100%{
        width:45vw;
        height:90vh;
        opacity: 1;
    }
}
@-moz-keyframes menuabrir{
    0%{
        width:0vw;
        height:90vh;
        opacity: 0;
    }                
    100%{
        width:45vw;
        height:90vh;
        opacity: 1;
    }
}

@-webkit-keyframes menucerrar{
    0%{
        width:45vw;
        height:90vh;
        opacity: 1;
    }
    100%{
        width:0vw;
        height:90vh;                    
        opacity: 0;
    }
}

@-moz-keyframes menucerrar{
    0%{
        width:45vw;
        height:90vh;
        opacity: 1;
    }
    100%{
        width:0vw;
        height:90vh;                    
        opacity: 0;
    }
}

@-webkit-keyframes galeriacerrar{
    0%{
        opacity: 1;
        width:45vw;
        height:90vh;
        margin-left: 50vw;
    }
    100%{
        width:0vw;
        height:90vh; 
        opacity: 0;
        margin-left: 95vw;
    }
}

@-moz-keyframes galeriacerrar{
    0%{
        opacity: 1;
        width:45vw;
        height:90vh;
        margin-left: 50vw;
    }
    100%{
        width:0vw;
        height:90vh; 
        opacity: 0;
        margin-left: 95vw;
    }
}

@-webkit-keyframes galeriaabrir{
    0%{
        width:0vw;
        height:90vh; 
        opacity: 0;
        margin-left: 95vw;
    }
    100%{
        opacity: 1;
        width:45vw;
        height:90vh;
        margin-left: 50vw;
    }
}

@-moz-keyframes galeriaabrir{
    0%{
        width:0vw;
        height:90vh; 
        opacity: 0;
        margin-left: 95vw;
    }
    100%{
        opacity: 1;
        width:45vw;
        height:90vh;
        margin-left: 50vw;
    }
}

@-webkit-keyframes menuabrirboton{
    0%{
        left: 0px;
        opacity: 1;
        transform: rotate(90deg);
    }
    80%{
        opacity: 1;
    }
    100%{
        left: 45vw;
        opacity: 0;
        transform: rotate(180deg);
    }
}
@-moz-keyframes menuabrirboton{
    0%{
        left: 0px;
        opacity: 1;
        transform: rotate(90deg);
    }
    80%{
        opacity: 1;
    }
    100%{
        left: 45vw;
        opacity: 0;
        transform: rotate(180deg);
    }
}
@-webkit-keyframes menuacerrarboton{
    0%{
        left: 45vw;
        opacity: 0;
        transform: rotate(180deg);
    }
    80%{
        opacity: 1;
    }
    100%{
        left: 0px;
        opacity: 1;
        transform: rotate(90deg);        
    }
} 
@-moz-keyframes menuacerrarboton{
    0%{
        left: 45vw;
        opacity: 0;
        transform: rotate(180deg);
    }
    80%{
        opacity: 1;
    }
    100%{
        left: 0px;
        opacity: 1;
        transform: rotate(90deg);        
    }
}