@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400&subset=latin-ext);

#question{font-size: 22px;}
.sf,.sf3,.sf4,.sf5{
    width: 100%;
    box-sizing: border-box;
    display: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin-top: 30px;
}
.sf3 li{margin-left: 9%;
    width: 20%;
    display: block;
    float: left;
    height: 110px;
    padding: 5px;
    border: 3px solid #ddd;
    background:rgba(255, 255, 255, 0.4);
    font: 18px/22px Arial,Helvetica,sans-serif;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;}
    .sf4 li,.sf5 li{margin-left: 29%;
    width: 249px;
    display: block;
    float: left;
    height: 144px;
    padding: 5px;
    border: 3px solid #ddd;
    background: rgba(255, 255, 255, 0.4);
    font: 18px/22px Arial,Helvetica,sans-serif;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;}
.sf li
{   margin-left: 9%;
    width: 230px;
    display: block;
    float: left;
    height: 144px;
    padding: 5px;
    border: 3px solid #ddd;
    background: rgba(255, 255, 255, 0.4);
    font: 18px/22px Arial,Helvetica,sans-serif;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;}
   

    .sf li:hover,.sf3 li:hover,.sf4 li:hover, .sf5 li:hover{border: 3px solid #4b4182;
    color: #62579e;}
.sf2 #red{background: #c51f1f;
    width: 95px;
    height: 15px;
    display: block;
    margin-top: -3px;
    margin-bottom: 34px;}
    .sf2 #blue{background: #4d8fe0;
    width: 95px;
    height: 15px;
    display: block;
    margin-top: -3px;
    margin-bottom: 90px;}
    .sf2 #orange{background: #EC8300;
    width: 95px;
    height: 15px;
    display: block;
    margin-top: -3px;
    margin-bottom: 164px;}
    .sf2 #yellow{background: #ffc600;
    width: 95px;
    height: 15px;
    display: block;
    margin-top: -3px;
    margin-bottom: 140px;}
    .sf2 #green{background: #3dad45;
    width: 95px;
    height: 15px;
    display: block;
    margin-top: -3px;
    margin-bottom: 187px;}
.sf2{
	width: 100%;
	box-sizing: border-box;
	display: none;
	overflow: hidden;
	padding: 0;
	list-style-type: none;
	margin-top: 60px;
	margin-bottom: 50px;
} 

.sf2 li{margin-left: 9%;
    width: 282px;
    display: block;
    float: left;
    padding: 5px;
    border: 3px solid #ddd;
    background: rgba(255, 255, 255, 0.4);
    font: 18px/22px Arial,Helvetica,sans-serif;
    text-align: center;
    color: #fff;
    cursor: pointer;
    position: relative;}
    .sf2 #men5{margin: 35px 0px 0px 42px;
    height: 228px;
    width: 70px;}
    .sf2 #men1{        margin: 167px 0px 0px 49px;
    height: 97px;
    width: 70px;}.sf2 #men2{    margin: 109px 0px 0px 28px;
    height: 154px;
    width: 70px;}.sf2 #men3{margin: 58px 0px 0px 39px;
    height: 204px;
    width: 70px;}.sf2 #men4{margin: 11px 0px 0px 42px;
    height: 250px;
    width: 70px;}
    .sf2 #men5:hover{border: 3px solid #EC8300;
    color: #EC8300;}
     .sf2 #men1:hover{border: 3px solid #C51F1F;
    color: #C51F1F;}
    .sf2 #men2:hover{border: 3px solid #4D8FE0;
    color: #4D8FE0;}
    .sf2 #men3:hover{border: 3px solid #FFC600;
    color: #FFC600;}
    .sf2 #men4:hover{border: 3px solid #3DAD45;
    color: #3DAD45;}
   
.titre_etape1{    font-size: 14px;
    font-weight: bold;}

    .sf #choix1{background: url("img/imp.jpg")no-repeat bottom;}
    .sf #choix2{background: url("img/patrimoine.jpg")no-repeat bottom;}
    .sf #choix3{background: url("img/ret.jpg")no-repeat bottom;}
    .sf #choix4{background: url("img/famill.jpg")no-repeat bottom;}
    


input,select,textarea,button{font-family:Lato; font-size:16px;}

	
	/*.header{width:100%; max-width:900px; color:#FFF; margin:0 auto; padding:30px 0;}
		.header>h1{font-weight:400; text-align:center; font-size:36px; padding:0; margin:0;}
		.header>h2{font-weight:300; text-align:center; font-size:24px; padding:0; margin:0;}
	.container{    width: 640px;
    height: 450px;
    background: rgba(35, 163, 143, 0.64);
    color: #fff;
    margin: 0 auto auto 51%;
    padding: 17px;
    border-radius: 3px;
    box-sizing: border-box;}
		.container-top{text-align:center; width:100%; margin-bottom:30px;}
		.container-top>h3{font-weight:normal; padding:0; margin:0;}
		.container .themes{width:100%; height:auto; overflow:hidden; padding:10px 0;}
		.container .themes>span{width:20px; height:20px; display:inline-block; cursor:pointer; border:solid 3px #FFF;}
		.container .themes>span.selectedx{border-color:#333;}
		.container .themes>a{text-decoration:none; font-size:16px; color:#f44a56; display:inline-block; padding:5px 10px; border:solid 1px #DDD;}
		.container .themes>a:hover{border-color:#f44a56;}
		.container .themes>a.activex{color:#FFF; background:#f44a56; border-color:#f44a56;}
		
	.footer{width:100%; max-width:900px; margin:0 auto; margin-top:30px; background:#FFF; padding:30px; box-sizing:border-box;}
*/