/* Preload images */
body:after{
display:none;
content:
url("../img/introTitre.jpg")
url("../img/introFooter-v2.jpg")
url("../img/easyquote-individuel-FR.png")
url("../img/easyquote-collectif-FR.png")
url("../img/user.png")
url("../img/mdp.png")
url("../img/loader.gif")}

html,body{
font-size:12px;
font-family: 'Roboto Condensed', sans-serif;
margin:0}

.footer{
position:absolute;
bottom:10px;
width:100%;
height:140px;
background-image:url("../img/introFooter-v2.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:contain}

#intro{
position:absolute;
top:0;
left:0;
height:calc(100% - 150px);
width:100%;
background-color:white;
z-index:99;
display:none;
background-repeat:no-repeat;
background-position:center;
background-size:60% auto;
background-image:url("../img/introTitre.jpg")}

#choix{
display:none;
position:absolute;
height:calc(100% - 200px);
width:100%;
box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
top:0px;
left:0px}

.option{
float:left;
overflow:hidden;
opacity:0.85;
transition: opacity 0.5s;
background-repeat:no-repeat;
background-position:center;
background-size:cover}

.option:hover{
opacity:1}

#single{
	position: relative;
	/*pointer-events:none;
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);*/
	background-image:url("../img/easyquote-individuel-FR.png");
}

#enDev{
	position: absolute;
	width: 100%;
	height: 35px;
	text-align: center;
	top:calc(50% + 130px);
	font-size: 30px;
	font-weight: bold;
	-webkit-filter: none;
  	filter: none;
	color: black;
}

#multi{
background-image:url("../img/easyquote-collectif-FR.png")}
/*
.modal{
display:none;
position:fixed;
z-index:1;
padding-top:100px;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4)}

.modal-content{
position:relative;
background-color:#fefefe;
margin:auto;
padding:0;
border:1px solid #888;
max-width:350px;
width:80%;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name:animatetop;
-webkit-animation-duration:0.4s;
animation-name:animatetop;
animation-duration:0.4s}

@-webkit-keyframes animatetop{
from {top:-300px; opacity:0} 
to {top:0; opacity:1}}

@keyframes animatetop{
from {top:-300px; opacity:0}
to {top:0; opacity:1}}

.close{
color:gray;
float:right;
font-size:28px;
font-weight:bold}

.close:hover,.close:focus{
color:black;
text-decoration:none;
cursor:pointer}

.modal-header{
padding:2px 16px;
background-color:WhiteSmoke;
color:gray}

.modal-body{
padding:2px 16px}

.modal-footer{
padding:2px 16px;
background-color:WhiteSmoke;
color:gray}

.userInfo{
width:90%;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
background-position:2px 3px;
background-size:22px 22px;
border:2px solid #009fe3}

.userInfo.premier{
margin-top:10px}

#infoMail{background-image:url("../img/user.png")}

#infoMdp{background-image:url("../img/mdp.png")}

.editLogin{
margin-left:30px;
width:calc(90% - 24px);
height:27px;
border:0}

.checkLogin{
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
width:140px}

.btn{
margin-bottom:10px;
cursor:pointer;
width:75%;
margin-left:auto;
margin-right:auto;
-webkit-border-radius:3;
-moz-border-radius:3;
border-radius:3px;
font-family:Arial;
color:#ffffff;
font-size:14px;
background:#3498db;
padding:10px 20px 10px 20px;
text-align:center;
text-decoration:none}

.btn.dernier{
margin-bottom:20px}

.btn:hover{
text-decoration:none}

#btLogin{
position:relative;
background:#009fe3}

#btOublie{
background:#009fe3}

#btSignup{
background:#009fe3}

#loading{
position:absolute;
top:0px;
right:10px;
width:20px;
height:100%;
display:none;
background-position:center;
background-repeat:no-repeat;
background-size:20px 20px}

#loading{
background-image:url("../img/loader.gif")}

#infoErreur{
width:100%;
text-align:center;
color:red;
margin-bottom:10px;
font-weight:bold;
line-height:22px}
*/

/*Cookie Consent Begin*/
#cookieConsent{
background-color:rgba(20,20,20,0.8);
min-height:26px;
font-size:14px;
color:#ccc;
line-height:26px;
padding:8px 0 8px 30px;
font-family: 'Roboto Condensed', sans-serif;
position:fixed;
top:0;
left:0;
right:0;
display:none;
z-index:9999}

#cookieConsent a{
color:#4B8EE7;
text-decoration:none}

#closeCookieConsent{
float:right;
display:inline-block;
cursor:pointer;
height:20px;
width:20px;
margin:-15px 0 0 0;
font-weight:bold}

#closeCookieConsent:hover{
color:#FFF}

#cookieConsent a.cookieConsentOK{
background-color:#F1D600;
color:#000;
display:inline-block;
border-radius:5px;
padding:0 20px;
cursor:pointer;
float:right;
margin:0 60px 0 10px}

#cookieConsent a.cookieConsentOK:hover{
background-color:#E0C91F}
/*Cookie Consent End*/

@media (orientation:portrait) {
	#intro{
	background-size:80% auto;}
	
	.option{
	height:calc(50% - 4px);
	width:100%}
	
	#single{
	border-right:0px;
	border-top:solid 4px #009fe3}

	#multi{
	border-left:0px;
	border-bottom:solid 4px #009fe3}

	#enDev{
		font-size: 25px;
		top:calc(50% + 90px);
	}
}

@media (orientation:landscape) {
	.option{
	height:100%;
	width:calc(50% - 4px)}

	#single{
	border-left:solid 4px #009fe3;
	border-bottom:0px}

	#multi{
	border-right:solid 4px #009fe3;
	border-top:0px}
}

@media (max-width: 991px) { 
    
}

@media (max-width: 767px) { 

}
@media (max-width: 575px) { 

}

@media (max-width: 440px) { 

}