@charset "utf-8";
/* CSS Document */






/* CSS PROPRE A LA HOMEPAGE */

@media only screen and (min-width : 960px) {

#header{
padding : 0px 32px;
}
.block-img-header{
background: url("../images/obliques-Groupe-IMA.svg"), url("../images/comment-ca-marche/teleassistance-serelia/teleassistance-serelia.jpg") ;
background-size: 300px, cover;
background-position: top 0px right 32px, center;
background-repeat: no-repeat, no-repeat;
width : 100%;
height : 350px;
border-radius : 12px;
position: relative;
}
	

#texte-serelia-titre{
display: inline-block;
vertical-align: middle;
width : 336px;
margin-right:128px;
}
#texte-serelia-texte{
display: inline-block;
vertical-align: middle;
width : 496px;
}

	
#section-comment-ca-marche{
width: 100%;
background: #fcfcfc;
border-top: 1px solid #C8CDD7;
border-bottom: 1px solid #C8CDD7;
padding: 128px 0px;
margin-top: 128px;
}
#comment-ca-marche{
display : flex;
flex-wrap: wrap;
position : relative;
}
.bloc-etape{
width : 298px;
border : 1px solid #E6EBF0;
border-radius : 12px;
flex : 1 298px;
margin-top : 32px;
padding : 32px;
background: #FFFFFF;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 17, 0.04);
}
.bloc-etape > img{
width: 150px;
height : auto;
display: block;
margin-left : auto;
margin-right: auto;
margin-bottom : 16px;
}
.bloc-etape:nth-child(3), .bloc-etape:nth-child(6){
margin-right : 32px;
margin-left : 32px;
}
.numero-etape{
font-size : 42px;
font-family : "IMA Black";
font-weight : 100;
color : #C8CDD7;
}
.titre-etape{
font-family : "Manrope Semibold";
font-weight : 100;
margin : 8px 0px;
}
.description-etape{
color : #5B6E83;
font-size: 14px;
}
#bloc-etape-rose{
background: url("../images/obliques-Groupe-IMA.svg"),#F0467D ;
background-size: 200px, cover;
background-position: top 0px right 8px, center;
background-repeat: no-repeat, no-repeat;
}
#bloc-etape-rose > img{
width: 80px;
height : auto;
display: block;
margin-left : 0;
margin-right: auto;
margin-bottom : 16px;
margin-top : 88px;
}
#bloc-etape-rose > p{
color : #FFFFFF;
font-family : "Manrope Semibold";
font-weight : 100;
font-size: 17px;
}
#comment-ca-marche > h5{
width : 100%;
margin-bottom : 32px;
margin-top : 64px;
text-align : center;
}
#comment-ca-marche > p{
margin : 0 auto;
}
#mention-plateforme-medicale{
font-size : 12px;
color : #879BAF;
padding-top : 32px;
}
}





/* CSS PROPRE A LA PAGE NOS OFFRES MOBILE */

@media only screen and (max-width : 959px) {

#header{
padding : 32px;
}
.block-img-header{
background: url("../images/obliques-Groupe-IMA.svg"), url("../images/comment-ca-marche/teleassistance-serelia/teleassistance-serelia-mobile.jpg") ;
background-size: 200px, cover;
background-position: top 0px right 0px, center;
background-repeat: no-repeat, no-repeat;
width : 100%;
height : 400px;
border-radius : 12px;
position: relative;
}	

#texte-serelia-titre{
display: inline-block;
vertical-align: middle;
width : 100%;
margin-bottom:0px;
}
#texte-serelia-texte{
display: inline-block;
vertical-align: middle;
width : 100%;
}
	
#section-comment-ca-marche{
width: 100%;
background: #fcfcfc;
border-top: 1px solid #C8CDD7;
border-bottom: 1px solid #C8CDD7;
padding: 128px 16px;
margin-top: 128px;
}
#comment-ca-marche{
display : inline-block;
position : relative;
}
.bloc-etape{
width : 100%;
border : 1px solid #E6EBF0;
border-radius : 12px;
margin-top : 32px;
background: #FFFFFF;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 17, 0.04);
padding : 32px 16px;
}
.bloc-etape > img{
width: 150px;
height : auto;
display: block;
margin-left : auto;
margin-right: auto;
margin-bottom : 18px;
}
.numero-etape{
font-size : 42px;
font-family : "IMA Black";
font-weight : 100;
color : #C8CDD7;
}
.titre-etape{
font-family : "Manrope Semibold";
font-weight : 100;
margin : 8px 0px;
}
.description-etape{
color : #5B6E83;
font-size: 14px;
}
#bloc-etape-rose{
background: url("../images/obliques-Groupe-IMA.svg"),#F0467D ;
background-size: 200px, cover;
background-position: top 0px right 8px, center;
background-repeat: no-repeat, no-repeat;
}
#bloc-etape-rose > img{
width: 80px;
height : auto;
display: block;
margin-left : 0;
margin-right: auto;
margin-bottom : 16px;
margin-top : 64px;
}
#bloc-etape-rose > p{
color : #FFFFFF;
font-family : "Manrope Semibold";
font-weight : 100;
font-size: 17px;
}
#comment-ca-marche > h5{
width : 100%;
margin-bottom : 32px;
margin-top : 64px;
text-align : center;
}
#comment-ca-marche > p{
margin : 0 auto;
}
#mention-plateforme-medicale{
font-size : 12px;
color : #879BAF;
padding-top : 32px;
}
}