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

/* Button with background Opacity + border on hover */

.buttonBorder
{
	background-color: transparent;
	border: solid 0.15em #00FF00;
	color: #00FF00 !important;
	vertical-align:middle;
	text-align:center;
	font-weight: 700;
	cursor: pointer;
}

.buttonBorder:hover
{
	border: solid 0.19em #00FF00;
	background-color: transparent !important;
}

/*
.buttonOpacityBorder
{
	line-height: 50px;

	border-radius: 6px;
	border: none;
	outline: none;
	transition: all 0.5s;
	position: relative;
	
	text-align: center;
	vertical-align: middle;
	color: #FAF9F9;
	font-weight: bold;
	
	cursor: pointer;
}

.buttonOpacityBorder::before 
{
	width: 100%;
	height: 100%;
  
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	border-radius: 6px;
	color: #FAF9F9;
	background-color: rgba(255,255,255,0.1);
	transition: all 0.3s;
}

.buttonOpacityBorder:hover::before 
{
	opacity: 0 ;
	transform: scale(0.5,0.5);
}

.buttonOpacityBorder::after 
{
	height: 100%;
	width: 98%;

	border: 3px solid rgba(255,255,255,0.3);
	border-radius: 6px;

	transform: scale(1.2,1.2);

	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	opacity: 0;
	transition: all 0.3s;
	background-color: transparent;
}

.buttonOpacityBorder:hover::after 
{
	opacity: 1;
	transform: scale(1,1);
}

.buttonTransitionDarkToLight
{
	font-weight: bold;
	
	border-radius: 0px;
	
	border-left: 1px solid rgba(200, 143, 26, 0.0);
	border-top: 1px solid rgba(200, 143, 26, 0.0);
	border-right: 1px solid rgba(200, 143, 26, 0.0);
	border-bottom: 1px solid rgba(200, 143, 26, 0.0);
	
	background-color: rgba(200, 143, 26, 0.1);
	text-shadow: 0px 0px 0px transparent;

	transition:
		border-left 0.3s,
		border-top 1.3s,
		border-right 1.7s,
		border-bottom 2.4s,
		background-color 2s,
		border-radius 0.1s,
		text-shadow 0.6s
	;
	
	cursor: pointer;
}

.buttonTransitionDarkToLight:hover
{
    border-radius: 6px;
	
	border-left: 1px solid rgba(200, 143, 26, 1);
	border-top: 1px solid rgba(200, 143, 26, 1);
	border-right: 1px solid rgba(200, 143, 26, 1);
	border-bottom: 1px solid rgba(200, 143, 26, 1);
	
    background-color: rgba(200, 143, 26, 0.6);

    text-shadow: 0px 0px 10px solid rgba(200, 143, 26, 1);
}

.buttonBorderOut
{
	text-align: center;

	border-radius: 6px;
    outline: none;
    border: none;
	outline: 3px solid;
	outline-color: rgba(69, 72, 89, 0.5);
	outline-offset: 0;
	transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8);
	
	cursor: pointer;
}

.buttonBorderOut:hover 
{
	color: rgba(55, 55, 55, 0.7);

	border-radius: 6px;
	outline-color: rgba(69, 72, 89, 0);
	outline-offset: 10px;
}

.buttonArrow 
{
	border-radius: 6px;
	outline: none;
	border: 3px solid rgba(200, 143, 26,0.5);

	text-align: center;

	transition: all 0.5s;

	display: inline-block;
	position: relative;
	transition: 0.5s;

	cursor: pointer;
}

.buttonArrow:hover 
{
	border: 3px solid rgba(200, 143, 26,0);

	padding-right: 25px;

	color: rgba(200, 143, 26,0.7);
}

.buttonArrow:after 
{
	top: calc(inherit / 2);
	right: 60px;

	content: '\00bb';

	position: absolute;
	opacity: 0;

	transition: 0.5s;
}


.buttonArrow:hover:after 
{
	right: 50px;

	opacity: 1;
	color: rgba(200, 143, 26,0.7);
}

.buttonTransitionColors 
{
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttonTransitionColors:hover 
{
  cursor: pointer;
  -webkit-transition: background-color 0.35s ease-out;
  -moz-transition: background-color 0.35s ease-out;
  -o-transition: background-color 0.35s ease-out;
  transition: background-color 0.35s ease-out;
}

.buttonDownload:before, .buttonDownload:after 
{
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
	
	content: ' ';
}

.buttonDownload:before 
{
	width: 10px;
	height: 2px;
	
	border-style: solid;
	border-width: 0 2px 2px;
}

.buttonDownload:after 
{
	width: 0;
	height: 0;
	
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:after 
{
	animation-play-state: running;
}

@keyframes downloadArrow 
{
	0% 
	{
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% 
	{
		margin-top: -15px;
		opacity: 0;
	}
	
	50% 
	{
		opacity: 1;
	}
	
	100% 
	{
		margin-top: 0;
		opacity: 0;
	}
}
*/