/**********************************************
	GLOBAL
**********************************************/
*{
	outline: none !important;
}

html {
	background: #000;
	z-index: -9
}

body {
	background: transparent !important;
}

html, body{
	height: 100%;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
}

a:hover, a:focus, a:active{
	color: #fff;
} 


/**********************************************
	BACKGROUND
**********************************************/

.background {
	background-size: cover !important;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: -9;
}

.video {
		position: absolute; 
		bottom: 0px; 
		right: 0px; 
		min-width: 100%; 
		min-height: 100%; 
		width: auto; 
		height: auto;
		overflow: hidden;
		z-index: -9;
}

.filigrane {
	*background: rgba(0,0,0,0.5);
	z-index: 999;
	*background: rgb(0,0,0);
	*background: linear-gradient(-90deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4906337535014006) 100%);
}

.loading {
	opacity: 0;
}

.fb-like {
	position: absolute !important;
	padding-top: 0 !important;
	right: 10px !important;
	top: 10px !important;
}

/**********************************************
	RECHERCHE
**********************************************/

.logo
	{
		margin: auto;
		float: center;
		width: 260px;
	}

	
.search
	{
		width: 100% !important;
		padding: 10px;
		color: #222;
		border: 1px solid #777;
		border-radius: 30px;
		padding: 15px 30px;
	}

.btn
	{
		border: 1px solid #dcdcdc;
		border-color: rgba(0,0,0,0.1);
		color: #444!important;
		font-size: 11px;
		cursor: pointer!important;
		display: inline-block;
		min-width: 54px;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none!important;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		-webkit-user-select: none;
		margin: 16px 8px;
		background: #f5f5f5;
		background: linear-gradient(top,#f5f5f5,#f1f1f1);
		border-radius: 5px;
	}

.btnloop {
		position: absolute;
		font-size: 15px;
		margin-top: 17px;
		margin-left: -38px;
		background: none;
		border: none;
		color: #a1a1a1;
	}

/**********************************************
	MENU
**********************************************/

@media(min-width: 768px) {	
	nav {
		
		padding: 0;
		margin: 0;
		display: block !important;
	}

	nav ul{
		padding: 0;
		margin: 0;
	}

	nav ul li {
		display: inline-block;	
	}

	nav ul li a {
		display: inline-block;
		padding: 10px 8px 10px 8px;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 0 5px #000;
	}
	.burger {
		display: none;
	}
}


@media(max-width:767px) {
	.burger {
		display: block;
		padding: 10px;
		color: #fff;
		font-size: 20px;
	}

	nav {
		position: absolute;
		background: rgba(0,0,0,0.5);
		z-index: 99999;	
		padding: 0;

		width: 100%;
		display: none;
	}
	
	nav ul {
		padding: 0;
		margin: 0;
		width: 100%;
	}
	
	nav ul li {
		display: block;
		padding: 5px 5px 5px 15px;
	}
	nav ul li a {
		display: inline-block;
		font-weight: bold;
		color: #fff;
		padding: 5px;
	}
}

/**********************************************
	BACKGROUND CHANGER
**********************************************/

.changeNav {
	position: absolute;
	bottom: 10%;
	right: 22px;
}

@media (max-width: 768px){
	.changeNav {
		bottom: 15%;
	}
}

.changeNav  a {
	display: inline-block;
}

.previous
	{	
		width: 32px;
		height: 32px;
		background: transparent url(../images/hpc12.png) no-repeat;
		background-position: -192px -53px;
		overflow: hidden;
		display: inline-block;
		margin-right: 5px;
		border: 0;
	}
.next
	{	
		width: 32px;
		height: 32px;
		background: transparent url(../images/hpc12.png) no-repeat;
		background-position: -160px -53px;
		overflow: hidden;
		display: inline-block;
		border: 0;
	}

/*************************************
Popup
*************************************/
	
.popup {
	width: 291px;
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	bottom: 10%;
	display: none;
	padding: 0px;
	margin-left: -245px;
	display: block;
}	

.nopad {
	margin: 0 !important;
}

.what {
	padding: 10px;
	margin: 0;
	color: #fff;
	font-weight: normal;
}

.what a, .what a:hover, .what a:active, .what a:focus {
	color: #fff; 
	font-weight: bold;
}

.what a span{
	color: #ff0000; 
	font-weight: bold;
	font-size: 15px;
}

.blockon {
	height: 90px;
	padding: 0 !important;
	margin: 0 !important;
}

.blackback {
	background: #000;
}

/**********************************************
	NEWSPOP
**********************************************/

	.newspop {
		position: absolute;
		display: none;
		bottom: 90px;
		left: 100px;
		background: #fff;
		border-radius: 5px 5px 5px 0px;
	}
	.newspop .content::after{
		content: '';
		position: absolute;
		 display : inline-block;
		 height : 0;
		 width : 0;
		 border-bottom : 15px solid #fff;
		 border-left : 15px solid transparent;
		 left: -8px;
		 top: 25px;
	}

	.newspop .content {
		padding: 10px 25px;	
	}
	.newspop .calltoaction {
		width: 100%;
		text-align: center;
		display: inline-block;
		padding: 10px 20px;
		background: #bc2a2b;
		color: #fff;
		border-radius: 5px;
	}
	.poplink {
		color: #000;
	}
	.poplink:hover {
		color: #ff0000;
	}
	.ring {
		position: absolute;
		bottom: 60px;
		left: 20px;
		padding: 20px;
		background: #bc2a2b;
		color: #fff;
		border-radius: 50%;
		margin: auto;
		float: right;
		font-size: 30px;
		cursor: pointer;
		font-size: 30px;
	}
	.bell {
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		animation-iteration-count: 3;
	}
	.ring:hover > .bell {
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		animation-iteration-count: 3;
	}
	.bell {
		height: 20px;
		width: 20px;
	}

	@keyframes shake {
	  10%, 90% {
		transform: translate3d(-1px, 0, 0);
	  }
	  
	  20%, 80% {
		transform: translate3d(2px, 0, 0);
	  }

	  30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	  }

	  40%, 60% {
		transform: translate3d(4px, 0, 0);
	  }
	}

	
/**********************************************
	FOOTER
**********************************************/

footer {
	position: absolute;
    bottom: 0;
    color: #fff;
    text-align: center;
    padding: 0;
    font-weight: bold;
	width: 100%;
	padding: 13px;
	*background: rgba(0,0,0,0.5);
}
footer a {
	color: #fff !important;
	text-shadow: 0 0 5px #000;
}

@media (max-width: 480px) {
	footer {
		display: none;
	}
	.popup {
		display: none;
	}
}