@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/a-propos/pourquoi-choisir-serelia/pourquoi-choisir-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;
}
	

#six-raisons-serelia{
display : flex;
flex-wrap: wrap;
position : relative;
}
#six-raisons-serelia > .bouton-secondaire-L-desktop{
margin-left : auto;
margin-right : auto;
margin-top : 64px;
}
.raison-serelia{
border : 1px solid #E6EBF0;
border-radius : 12px;
flex : 1 1 298px;
margin-top : 32px;
padding : 32px;
background: #FFFFFF;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 17, 0.04);
}
.raison-serelia > h3{
margin : 32px 0px 8px 0px;
}
.raison-serelia > p{
color : #5B6E83;
font-size: 14px;
}
.raison-serelia > img{
width: 120px;
height : auto;
display: block;
margin-left : auto;
margin-right: auto;
margin-bottom : 16px;
}
.raison-serelia:nth-child(3), .raison-serelia:nth-child(6){
margin-left : 32px;
margin-right : 32px;
}
.raison-serelia > a{
display : block;
width : 44px;
height: 44px;
border-radius : 22px;
border : 1px solid #879BAF;
line-height: 42px;
text-align: center;
margin-top : 16px;
cursor: pointer;
text-decoration: none;
transition-duration: 0.2s;
margin-left : auto;
margin-right: auto;
font-size : 24px;
}
.raison-serelia > a:hover{
background : #283C50;
border : 1px solid #283C50;
color : #FFFFFF;
transition-duration: 0.2s;
}

	
.box-global{
padding : 64px;
overflow: hidden;
width : 960px;
height : 500px;
}
.image-modal{
display: inline-block;
vertical-align: middle;
width : 300px;
border-radius: 12px;
margin-right : 64px;
}
.image-modal img{
width : 90%;
height : auto;
margin : 0 auto;
}	
.texte-modal{
width : 464px;
padding-top : 16px;
height : 372px;
display: inline-block;
vertical-align: middle;
overflow-y: scroll;
scrollbar-color: #C8CDD7;
scrollbar-width: thin;
}
.texte-modal div h3{
color : #283C50;
}
.texte-modal div h4{
color : #D20A5A;
font-size : 17px;
margin : 32px 0px -24px 0px;
}
.texte-modal div a{
color : #D20A5A;
font-size: 14px;
display: block;
margin-bottom  : 16px;
text-decoration: underline;
}
.texte-modal > .raison-serelia-texte{
margin-top  : 8px;
}
	
.raison-serelia-titre{
font-family : "Manrope Semibold";
font-weight : 100;
margin-top : 32px;
font-size: 20px;
}
.raison-serelia-sous-titre{
font-family : "Manrope Semibold";
font-weight : 100;
margin-top : 32px;
margin-bottom : 8px;
color : #D20A5A;
}
.raison-serelia-texte{
color : #5B6E83;
margin : 32px 0px;
font-size:14px;
}
.phrase-mentions{
font-size: 12px;
color : #5B6E83;
margin-top : 32px;
}
#exclusivite{
background: #F0EBFA;
color : #500FA0;
padding : 4px 16px;
font-size: 12px;
font-family: "Manrope Semibold";
text-align : center;
border-radius : 20px;
margin-bottom : 32px;
display: inline-block;
}
	
#decouvrir-nos-offres{
background: url("../images/obliques-Groupe-IMA.svg"), url("../images/a-propos/pourquoi-choisir-serelia/utilisatrice-serelia-teleassistance.jpg") ;
background-size: 300px, cover;
background-position: top 0px right 32px, center;
background-repeat: no-repeat, no-repeat;
width : 100%;
padding : 64px;
border-radius : 12px;
position: relative;
}
#decouvrir-nos-offres > h2{
width: 50%;
color: #FFFFFF;
}
#decouvrir-nos-offres > p{
margin-right: 16px;
}
}





/* 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/a-propos/pourquoi-choisir-serelia/pourquoi-choisir-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;
}
	

#six-raisons-serelia{
display : flex;
flex-wrap: wrap;
position : relative;
}
#six-raisons-serelia > .bouton-secondaire-L-desktop{
margin-left : auto;
margin-right : auto;
margin-top : 64px;
}
.raison-serelia{
border : 1px solid #E6EBF0;
border-radius : 12px;
flex : 1 1 100%;
margin-top : 32px;
padding : 32px;
background: #FFFFFF;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 17, 0.04);
text-align: center;
}
.raison-serelia > h3{
margin : 32px 0px 8px 0px;
}
.raison-serelia > p{
color : #5B6E83;
font-size: 14px;
}
.raison-serelia > img{
width: 120px;
height : auto;
display: block;
margin-left : auto;
margin-right: auto;
margin-bottom : 16px;
}
.raison-serelia > a{
display : block;
width : 44px;
height: 44px;
border-radius : 22px;
border : 1px solid #879BAF;
line-height: 42px;
text-align: center;
margin-top : 16px;
cursor: pointer;
text-decoration: none;
transition-duration: 0.2s;
margin-left : auto;
margin-right: auto;
font-size : 24px;
}
.raison-serelia > a:hover{
background : #283C50;
border : 1px solid #283C50;
color : #FFFFFF;
transition-duration: 0.2s;
}

	
.box-global{
padding : 32px;
overflow: hidden;
width : 95%;
height : 95%;
overflow-y: scroll;
scrollbar-color: #C8CDD7;
scrollbar-width: thin;
}
.image-modal{
width : 70%;
display: block;
margin-left : auto;
margin-right: auto;
border-radius: 12px;
margin-top : 32px;
}
.image-modal img{
width : 150px;
height : auto;
display: block;
margin-left : auto;
margin-right: auto;
}	
.texte-modal{
width : 100%;
padding-top : 32px;
height : auto;
display: inline-block;
vertical-align: middle;
}
.texte-modal div h3{
color : #283C50;
}
.texte-modal div h4{
color : #D20A5A;
font-size : 17px;
margin : 32px 0px -24px 0px;
}
.texte-modal div a{
color : #D20A5A;
font-size: 14px;
display: block;
margin-bottom  : 16px;
text-decoration: underline;
}
.texte-modal > .raison-serelia-texte{
margin-top  : 8px;
}
	
.raison-serelia-titre{
font-family : "Manrope Semibold";
font-weight : 100;
margin-top : 32px;
font-size: 20px;
}
.raison-serelia-sous-titre{
font-family : "Manrope Semibold";
font-weight : 100;
margin-top : 32px;
margin-bottom : 8px;
color : #D20A5A;
}
.raison-serelia-texte{
color : #5B6E83;
margin : 32px 0px;
font-size:14px;
}
.phrase-mentions{
font-size: 12px;
color : #5B6E83;
margin-top : 32px;
}
#exclusivite{
background: #F0EBFA;
color : #500FA0;
padding : 4px 16px;
font-size: 12px;
font-family: "Manrope Semibold";
text-align : center;
border-radius : 20px;
margin-bottom : 32px;
display: inline-block;
}
	
#decouvrir-nos-offres{
background: url("../images/obliques-Groupe-IMA.svg"), url("../images/home/home-serelia-teleassistance-mobile.jpg") ;
background-size: 200px, cover;
background-position: top 0px right 0px, center;
background-repeat: no-repeat, no-repeat;
width : 100%;
padding : 196px 32px 32px 32px;
border-radius : 12px;
position: relative;
}
#decouvrir-nos-offres > h2{
width: 100%;
color: #FFFFFF;
}
#decouvrir-nos-offres > p{
margin-bottom: 16px;
margin-right: 0px;
}
}