/*--------------------------------------------*/
/*---------------ANIMATIES--------------------*/
/*--------------------------------------------*/

:root {
    --navigation-height: 388px; /* Adjusted for menu items */
    --animation-duration: 0.3s;
}

.slideIn{	
    animation: slidein 0.3s;
    height: var(--navigation-height) !important;
    opacity: 1 !important;	
}

.slideOut{	
    animation: slideout 0.3s;
    height:0px !important;
    opacity: 0 !important;	
}

@keyframes slidein {
    0% {height:0px; opacity:0; } 
    100% {height: var(--navigation-height);opacity:1;}
}	

@keyframes slideout {
    0% {height: var(--navigation-height); opacity:1; } 
    100% {height:0px; opacity:0;}
}

.slideInHamburger{	
    animation: slideinHamburger 0.3s;
    margin-left:300px !important;	
}

.slideOutHamburger{	
    animation: slideoutHamburger 0.3s;
    margin-left:60px !important;	
}

@keyframes slideinHamburger {
    0% { margin-left: 60px; } 
    100% { margin-left:300px;}
}

@keyframes slideoutHamburger {
    0% { margin-left: 300px; } 
    100% { margin-left:60px;}
}

.lightflow{	
    animation: lightflow 1s;	
}

@keyframes lightflow {
    0% { width: 0px;opacity:1; }
    100% { width:300px;opacity: 0;}
}

.slideContentIn{	
    animation:slidecontentin 0.3s ease-out;
    opacity: 1 !important;
    visibility: visible !important;		
}

@keyframes slidecontentin {
    0% {opacity:0; transform: translateY(20px);} 
    100% {opacity:1; transform: translateY(0);}
}

.fadeIn{	
    animation:fadein 2s;
    opacity: 1 !important;	
}

.fadeOut{	
    animation:fadeout 0.2s;
    opacity: 0 !important;	
}

@keyframes fadein {
    0% { opacity: 0; transform: scale(1); } 
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeout {
    0% { opacity: 1; transform: scale(1); } 
    100% { opacity: 0; transform: scale(1); }
}

.fadeInPopIn {	
    animation:fadeInPopIn 4s;
    opacity:1 !important;	
}

@keyframes fadeInPopIn {
    0% { opacity: 0; transform: scale(0.9); } 
    100% { opacity: 1; transform: scale(1); }
}

.loadingBegin{	
    animation:loadingBegin 4s;
    width:80%;	
}

.loadingVolledig{	
    animation:loadingVolledig 1s;
    width:0%; 
    opacity:0
}

@keyframes loadingBegin { 
    0%{width:0%} 
    100% {width:80%}
}

@keyframes loadingVolledig {
    90%{width:100%;opacity:1;} 
    99% {opacity:0} 
    100%{width:0%}
}

/*-----ANIMATIES VOOR DE FOTOSLIDER-----*/

.slideInvisibleLeft{
    animation:slideInvisibleLeft var(--animation-duration);
}

.slideLeftMiddle{
    animation:slideLeftMiddle var(--animation-duration);
}

.slideMiddleRight{
    animation:slideMiddleRight var(--animation-duration);
}

.slideRightInvisible{
    animation:slideRightInvisible var(--animation-duration);
}

@keyframes slideInvisibleLeft{
    100% {left:0%;opacity:1;}
}

@keyframes slideLeftMiddle{
    0%{z-index:2;} 
    100% {width:60%;height:100%;top:0%;z-index:2;left:20%;}
}

@keyframes slideMiddleRight{
    0%{z-index:1;} 
    100% {width:40%;height:80%;top:10%;z-index:1;left:60%;}
}

@keyframes slideRightInvisible{
    0%{z-index:0;} 
    100% {z-index:0;opacity:0;}
}

.slideLeftInvisible{
    animation:slideLeftInvisible var(--animation-duration);
}

.slideMiddleLeft{
    animation:slideMiddleLeft var(--animation-duration);
}

.slideRightMiddle{
    animation:slideRightMiddle var(--animation-duration);
}

.slideInvisibleRight{
    animation:slideInvisibleRight var(--animation-duration);
}

@keyframes slideLeftInvisible{
    0%{z-index:1;} 
    100% {z-index:1;opacity:0;}
}

@keyframes slideMiddleLeft{
    0%{z-index:1;} 
    100% {width:40%;height:80%;top:10%;z-index:1;left:0%}
}

@keyframes slideRightMiddle{
    0%{z-index:2;} 
    100% {width:60%;height:100%;top:0%;z-index:2;left:20%;}
}

@keyframes slideInvisibleRight{
    100% {left:60%;opacity:1;}
}