@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Patua+One');

/* HOW TO */


#sct_how_to_out{
background-image:url(index2018/hdr_subs_bot.png);
background-repeat:repeat-x;
background-position:top;
padding:40px 0;
}

/*
how to 123
*/

#how_to_123{
display:table;
margin:0 auto;
}

#how_to_123 div.t123_rw{
display:table-row;
}

#how_to_123 div.t123_cl{
display:table-cell;
width:33%;
vertical-align:top;
text-align:center;
font-family:'PT Sans',sans-serif;
font-size:14px;
color:#777;
line-height:135%;
font-weight:normal;
background-position:center 0;
background-repeat:no-repeat;
padding:60px 0 0 0;
}

#how_to_123 div.t123_in{
padding:0 10px;
}

#how_to_123 div.cl_answ{
background-image:url(index2018/howTo_question.gif);
}

#how_to_123 div.cl_print{
background-image:url(index2018/howTo_print.gif);
}

#how_to_123 div.cl_sig{
background-image:url(index2018/howTo_sign.gif);
}

/*
how to video
*/

#how_to_vid{
 width:1000px;
 display:table;
 margin:0 auto;
 padding:35px 0 0 0;
}

#gen_main_cnt + #how_to_vid{
 padding:15px 0;
}

#how_to_vid div.vid_rw{
 display:table-row;
}

#how_to_vid div.vid_cl{
 display:table-cell;
 padding:0 10px;
 width:50%;
 vertical-align:top;
}

#how_to_vid div.vid_cl:first-child {
 padding-left: 0;
}

#how_to_vid div.vid_cl:last-child {
 padding-right: 0;
}

#how_to_vid div.vid_cl div.yt_vid_container {
border:1px solid #ccc;
}

#how_to_vid div.vid_cl div.sub_tlt{
 font-family:'PT Sans',sans-serif;
 font-size:12px;
 text-align:left;
 padding:2px 0 0 0;
 color:#777;
}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {

	#how_to_vid{
	width:98%;
	width:calc(100% - 20px);
	}

	#how_to_vid div.vid_cl{
	 padding:0 5px;
	}
}

@media only screen and (max-width: 650px), only screen and (max-device-width: 650px) {

	#how_to_vid{
	 display:block;
	}

	#how_to_vid div.vid_rw{
	 display:block;
	}

	#how_to_vid div.vid_cl{
	 display:block;
	 width:380px;
	 padding:10px 0;
	 margin:0 auto;
	}

	#how_to_vid div.vid_cl:first-child {
	 padding-top: 0;
	}

	#how_to_vid div.vid_cl:last-child {
	 padding-bottom: 0;
	}
}

@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {

	#how_to_vid div.vid_cl{
	 width:auto;
	 margin:0;
	}
}


/* HOW TO */

#most_view_tlt{
background-color:#b7d3e9;
padding:18px 10px 15px;
margin:15px 0 0;
background-image:url(index2018/hdr_subs_bot.png);
background-repeat:repeat-x;
background-position:top;
}

#most_view_tlt h2{
color:#2b3990;
max-width:1000px;
margin:0 auto;
padding:0;
text-align: center;
font-family:'Patua One',serif;
font-size:22px;
font-weight:normal;
}

#most_view_tlt h2 div.sub_tlt{
color:#555;
font-size:14px;
padding:5px 0 0 0;
font-family:'PT Sans',sans-serif;
}

#most_view{
background-color:#d2e4f2;
background-image: linear-gradient(#d2e4f2, #fff);
padding:0;
}

#most_view h3{
clear:both;
float:none;
margin:0;
padding:30px 0 30px 0;
font-family:'Patua One',serif;
font-size:18px;
font-weight:normal;
text-align:center;
color:#777;
}

#most_view div.most_view_gr{
 padding:0;
 margin:0;
 max-width:1000px;
 margin: 0 auto;
 display:-ms-grid;
 display:grid;
 grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
 -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
}

@media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px) {

	#most_view div.most_view_gr{
	max-width:auto;
	margin:0 10px;
	}
}

#most_view div.grp_cnt{
 padding:0 0 25px 0;
}

#most_view div.most_view_gr a:link, 
#most_view div.most_view_gr a:visited{
text-decoration:none;
}

#most_view div.most_view_gr h4{
margin:0;
padding:0 0 5px 0;
font-family:'Patua One',serif;
font-size:18px;
font-weight:normal;
}

#most_view div.grp_logo{
margin:0 0 5px 0;
padding:0;
height:35px;
width:50px;
background-position:0 bottom;
background-repeat:no-repeat;
}

#most_view div.most_view_gr a:link h4 , 
#most_view div.most_view_gr a:visited h4 {
font-family:'Patua One',serif;
font-size:18px;
font-weight:normal;
color:#555;
text-decoration:none;
color:#2b3990;
}

#most_view div.most_view_gr a:hover h4{
}

#most_view div.most_view_gr ul{
margin:0 0 0 1.0em;
padding:0;
list-style-type:disc;
font-size:16px;
}

#most_view div.most_view_gr li{
line-height:140%;
margin:0;
padding:0;
font-size:16px;
color:#555;
}

#most_view div.most_view_gr li a:link, 
#most_view div.most_view_gr li a:visited{
font-family:'PT Sans',sans-serif;
margin:0;
padding:0;
font-size:16px;
font-weight:normal;
text-decoration:none;
color:#555;
}

#most_view div.most_view_gr li a:hover{
text-decoration:underline;
color:#2b3990;
}

#most_view div.most_view_gr li a.gr_more:link, 
#most_view div.most_view_gr li a.gr_more:visited{
font-family:'PT Sans',sans-serif;
margin:0;
padding:0;
font-size:16px;
font-weight:normal;
text-decoration:none;
color:#2b3990;
}

#most_view div.most_view_gr li a.gr_more:hover{
text-decoration:underline;
color:#555;
}

#most_view div.srv_grp{
 display:-ms-inline-grid;
 display:inline-grid;
 text-align:left;
 margin:0;
 padding:0;
}

/*
The images
*/


#most_view div.grp_logo.srv_boat{
background-image:url(index2018/srv_boat.png);
}

#most_view div.grp_logo.srv_briefcase{
background-image:url(index2018/srv_briefcase.png);
}

#most_view div.grp_logo.srv_builiding{
background-image:url(index2018/srv_builiding.png);
}

#most_view div.grp_logo.srv_condo{
background-image:url(index2018/srv_condo.png);
}

#most_view div.grp_logo.srv_contract{
background-image:url(index2018/srv_contract.png);
}

#most_view div.grp_logo.srv_handshake{
background-image:url(index2018/srv_handshake.png);
}

#most_view div.grp_logo.srv_homeKey{
background-image:url(index2018/srv_homeKey.png);
}

#most_view div.grp_logo.srv_miseDem{
background-image:url(index2018/srv_miseDem.png);
}

#most_view div.grp_logo.srv_perso{
background-image:url(index2018/srv_perso.png);
}

#most_view div.grp_logo.srv_succ{
background-image:url(index2018/srv_succ.png);
}

#most_view div.grp_logo.srv_work{
background-image:url(index2018/srv_work.png);
}


/*
the grid
*/

#most_view div.grp01,
#most_view div.grp05,
#most_view div.grp09{
 grid-column:1 / span 1;
}

#most_view div.grp02,
#most_view div.grp06,
#most_view div.grp10{
 grid-column:3 / span 1;
}

#most_view div.grp03,
#most_view div.grp07,
#most_view div.grp11{
 grid-column:5 / span 1;
}

#most_view div.grp04,
#most_view div.grp08,
#most_view div.grp12{
 grid-column:7 / span 1;
}

#most_view div.grp01{
 -ms-grid-column:1;
 -ms-grid-row:1;
 -ms-grid-column-span: 1;
}

#most_view div.grp02{
 -ms-grid-column:3;
 -ms-grid-row:1;
 -ms-grid-column-span: 1;
}

#most_view div.grp03{
 -ms-grid-column:5;
 -ms-grid-row:1;
 -ms-grid-column-span: 1;
}

#most_view div.grp04{
 -ms-grid-column:7;
 -ms-grid-row:1;
 -ms-grid-column-span: 1;
}

#most_view div.grp05{
 -ms-grid-column:1;
 -ms-grid-row:2;
 -ms-grid-column-span: 1;
}

#most_view div.grp06{
 -ms-grid-column:3;
 -ms-grid-row:2;
 -ms-grid-column-span: 1;
}

#most_view div.grp07{
 -ms-grid-column:5;
 -ms-grid-row:2;
 -ms-grid-column-span: 1;
}

#most_view div.grp08{
 -ms-grid-column:7;
 -ms-grid-row:2;
 -ms-grid-column-span: 1;
}

#most_view div.grp09{
 -ms-grid-column:1;
 -ms-grid-row:3;
 -ms-grid-column-span: 1;
}

#most_view div.grp10{
 -ms-grid-column:3;
 -ms-grid-row:3;
 -ms-grid-column-span: 1;
}

#most_view div.grp11{
 -ms-grid-column:5;
 -ms-grid-row:3;
 -ms-grid-column-span: 1;
}

#most_view div.grp12{
 -ms-grid-column:7;
 -ms-grid-row:3;
 -ms-grid-column-span: 1;
}


@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {

	#most_view div.most_view_gr{
	grid-template-columns: 1fr 10px 1fr 10px 1fr;
	-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
	}

	#most_view div.grp01,
	#most_view div.grp04,
	#most_view div.grp07,
	#most_view div.grp10{
	grid-column:1 / span 1;
	}

	#most_view div.grp02,
	#most_view div.grp05,
	#most_view div.grp08,
	#most_view div.grp11{
	grid-column:3 / span 1;
	}

	#most_view div.grp03,
	#most_view div.grp06,
	#most_view div.grp09,
	#most_view div.grp12{
	grid-column:5 / span 1;
	}

	#most_view div.grp04{
	-ms-grid-column:1;
	-ms-grid-row:2;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp05{
	-ms-grid-column:3;
	-ms-grid-row:2;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp06{
	-ms-grid-column:5;
	-ms-grid-row:2;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp07{
	-ms-grid-column:1;
	-ms-grid-row:3;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp08{
	-ms-grid-column:3;
	-ms-grid-row:3;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp09{
	-ms-grid-column:5;
	-ms-grid-row:3;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp10{
	-ms-grid-column:1;
	-ms-grid-row:4;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp11{
	-ms-grid-column:3;
	-ms-grid-row:4;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp12{
	-ms-grid-column:5;
	-ms-grid-row:4;
	-ms-grid-column-span: 1;
	}
}


@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {

	#most_view div.most_view_gr{
	grid-template-columns: 1fr 10px 1fr;
	-ms-grid-columns: 1fr 10px 1fr;
	}

	#most_view div.grp01,
	#most_view div.grp03,
	#most_view div.grp05,
	#most_view div.grp07,
	#most_view div.grp09,
	#most_view div.grp11{
	grid-column:1 / span 1;
	}

	#most_view div.grp02,
	#most_view div.grp04,
	#most_view div.grp06,
	#most_view div.grp08,
	#most_view div.grp10,
	#most_view div.grp12{
	grid-column:3 / span 1;
	}

	#most_view div.grp03{
	 -ms-grid-column:1;
	 -ms-grid-row:2;
	 -ms-grid-column-span: 1;
	}

	#most_view div.grp04{
	-ms-grid-column:3;
	-ms-grid-row:2;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp05{
	-ms-grid-column:1;
	-ms-grid-row:3;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp06{
	-ms-grid-column:3;
	-ms-grid-row:3;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp07{
	-ms-grid-column:1;
	-ms-grid-row:4;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp08{
	-ms-grid-column:3;
	-ms-grid-row:4;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp09{
	-ms-grid-column:1;
	-ms-grid-row:5;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp10{
	-ms-grid-column:3;
	-ms-grid-row:5;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp11{
	-ms-grid-column:1;
	-ms-grid-row:6;
	-ms-grid-column-span: 1;
	}

	#most_view div.grp12{
	-ms-grid-column:3;
	-ms-grid-row:6;
	-ms-grid-column-span: 1;
	}
}

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

	#most_view div.most_view_gr{
	display:block;
	}

	#most_view div.srv_grp{
	display:block;
	text-align:center;
	}

	#most_view div.most_view_gr ul{
	list-style-type:none;
	margin:2px 0 0 0;
	}

	#most_view div.most_view_gr li{
	line-height:120%;
	margin:0 0 7px;
	}

	#most_view div.grp_logo{
	margin-left:auto;
	margin-right:auto;
	background-position:center bottom;
	}
}

@supports not (display : grid){

	#most_view div.most_view_gr{
	clear:both;
	}
	
	#most_view div.srv_grp{
	 width:25%;
	 float:left;
	 height:240px;
	 background-color:red;
	}
	
	#most_view:after{
	clear: both;
	}
	
	@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
		#most_view div.srv_grp{
		width:33%;
		}
	}
	@media only screen and (max-width: 600px), only screen and (max-device-width: 600px){
		#most_view div.srv_grp{
		width:50%;	
		}
	}
	@media only screen and (max-width: 450px), only screen and (max-device-width: 450px){
		#most_view div.srv_grp{
		width:auto;
		float:none;
		}
	}
}