/*
    Lisa Monpierre
    EFRITS SAS
 
    Training center website
    Dec. 2021
*/

.effectZoomOut div div 
{
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.effectZoomOut div:hover div 
{
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
}

@keyframes backgroundPositionAnimation
{
	50% 
	{
		background-position: 0 -100%, 0 0;
	}
}

@keyframes bg {
    0% {
        background-size:    0 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    25% {
        background-size:    100% 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    50% {
        background-size:    100% 3px,
                            3px 100%,
                            0 3px,
                            3px 0;
    }
    75% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 0;
    }
    100% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 100%;
    }
}

.drawBorderFromCenter 
{
    margin:  auto;
    padding: 2px;
	border: #00FF00 solid 2px;
	filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.3));
	color: #00FF00;
	transition: all .8s ease;
	cursor: pointer;
	font-weight: bold;
}

.drawBorderFromCenter:hover 
{
	animation: bg 0.1s cubic-bezier(0.19, 1, 0.22, 1) 1;
	background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #00FF00 100%, #00FF00 100%),
                        linear-gradient(to bottom, #00FF00 100%, #00FF00 100%),
                        linear-gradient(to right, #00FF00 100%, #00FF00 100%),
                        linear-gradient(to bottom, #00FF00 100%, #00FF00 100%);
    background-size:    100% 3px,
                        3px 100%,
                        100% 3px,
                        3px 100%;
    background-position:    0 0,
                            100% 0,
                            100% 100%,
                            0 100%;
	background-color: #00FF00;
	color: white;
	font-weight: bold;
	cursor: pointer;
}



.borderAnimateRadius 
{
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.3));
  transition: all .4s ease;
}
.borderAnimateRadius:hover 
{
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5% ;
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}

@keyframes slideHorizontalEffect
{
	0% 
	{
		transform: translateX(-25%);
	}
	100% 
	{
		transform: translateX(25%);
	}
}

.backgroundSlidingDiagonals 
{
	min-height: 100%;
	min-width: 100%;

	overflow: hidden;
    position: relative;
	margin: 0;
	padding: 0;
}

.backgroundSlidingDiagonalsBase
{
	min-height: 100%;
	min-width: 100%;
		
	position: absolute;
	top: 0;
	bottom: 0;
	left: -50%;
	right: -50%;
	z-index: -1;
	margin: 0;
	padding: 0;
  
	animation: slideHorizontalEffect 3s ease-in-out infinite alternate;
	background-image: linear-gradient(-60deg, black 50%, #00FF00 50%);
	opacity: .5;
}

.backgroundSlidingDiagonalsLayer1 
{
	min-height: 100%;
	min-width: 100%;
	
	position: absolute;
	margin: 0;
	padding: 0;

	animation-direction: alternate-reverse;
	animation-duration: 4s;
}

.backgroundSlidingDiagonalsLayer2 
{
	min-height: 100%;
	min-width: 100%;
	
	position: absolute;
	margin: 0;
	padding: 0;
	
	animation-duration: 5s;
}
/*
.blinking:hover
{
	animation-iteration-count: infinite;
	animation-name: blinkingText;
	animation-duration: 1s;
}

@keyframes blinkingText
{
    0%
	{     
		color: rgba(55,55,55,1);    
	}
    40%
	{   
		color: rgba(55,55,55,0.5); 
	}
    60%
	{   
		color: rgba(55,55,55,0.1); 
	}
    80%
	{   
		color: rgba(55,55,55,0.5);  
	}
	99%
	{   
		color: rgba(55,55,55,0.8);  
	}
    100%
	{  
		color: rgba(55,55,55,1);    
	}
}

.transitionBackground 
{
	background: #FAF9F9;
	border-radius: 6px;

	-webkit-transition: background-color 0.75s ease-out;
	-moz-transition: background-color 0.75s ease-out;
	-o-transition: background-color 0.75s ease-out;
	transition: background-color 0.75s ease-out;
}

.transitionBackground:hover 
{
	border-radius: 6px;
	background-color: rgba(69,72,89,0.1);
	cursor: pointer;
}

.transitionBackgroundLight 
{
	border-radius: 6px;

	-webkit-transition: background-color 0.75s ease-out;
	-moz-transition: background-color 0.75s ease-out;
	-o-transition: background-color 0.75s ease-out;
	transition: background-color 0.75s ease-out;
}

.transitionBackgroundLight:hover 
{
	border-radius: 6px;
	background-color: rgba(180,165,165,0.1);
	cursor: pointer;
}


@keyframes circleFallEffect 
{
    0%
	{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 50%;
    }

    50%
	{
        transform: translateY(1000px) rotate(720deg);
        opacity: 0.5;
        border-radius: 70%;
    }

    100%
	{
        transform: translateY(1500px) rotate(720deg);
        opacity: 0;
        border-radius: 100%;
    }
}

.circlesFallAnimation
{
	width: 100%;
	height: 100%;
	z-index:1;
	
    position: absolute;
    top: 0px;
    left: 0;

    overflow: hidden;
}

.circlesFallAnimation li
{
	width: 20px;
    height: 20px;
	
    position: absolute;
    display: block;
	top: -150px;
	
    list-style: none;
    background: rgba(200, 143, 55, 0.4);
    animation: circleFallEffect 2s linear infinite;
}

.circlesFallAnimation li:nth-child(1)
{
	width: 80px;
	height: 80px;

	left: 25%;

	animation-delay: 0s;
	animation-duration: 32s;
}


.circlesFallAnimation li:nth-child(2)
{
	width: 20px;
    height: 20px;
	
    left: 10%;

    animation-delay: 2s;
    animation-duration: 12s;
}

.circlesFallAnimation li:nth-child(3)
{
	width: 20px;
    height: 20px;
	
    left: 70%;

	animation-duration: 52s;
    animation-delay: 4s;
}

.circlesFallAnimation li:nth-child(4)
{
	width: 60px;
    height: 60px;
	
    left: 40%;

    animation-delay: 0s;
    animation-duration: 18s;
}

.circlesFallAnimation li:nth-child(5)
{
	width: 20px;
    height: 20px;
	
    left: 65%;

    animation-delay: 0s;
	animation-duration: 12s;
}

.circlesFallAnimation li:nth-child(6)
{
	width: 110px;
    height: 110px;
	
    left: 75%;

    animation-delay: 3s;
	animation-duration: 22s;
}

.circlesFallAnimation li:nth-child(7)
{
	width: 150px;
    height: 150px;
	
    left: 35%;

    animation-delay: 7s;
	animation-duration: 52s;
}

.circlesFallAnimation li:nth-child(8)
{
	width: 25px;
    height: 25px;
	
    left: 50%;

    animation-delay: 15s;
    animation-duration: 45s;
}

.circlesFallAnimation li:nth-child(9)
{
	width: 15px;
    height: 15px;
	
    left: 20%;

    animation-delay: 2s;
    animation-duration: 35s;
}

.circlesFallAnimation li:nth-child(10)
{
	width: 150px;
    height: 150px;
	
    left: 85%;

    animation-delay: 0s;
    animation-duration: 11s;
}
*/