.bloc_ref_full{font-size: 0; height:650px; margin-bottom:100px; max-width:none !important; width:100%; padding:0;}

/********************************************************
 * IMG VIS A VIS
 *******************************************************/
.bloc_ref_full .img_face{width:25%; height:100%; margin:0;padding:0; display: inline-block; vertical-align:top;}
/********************************************************
 * BLOC CITATION
 *******************************************************/
.bloc_ref_full .quote{width:25%; height:100%; background:#f4f4f4; margin:0;padding:0; display: inline-block; vertical-align: top; position:relative; transition:0.5s;}
.bloc_ref_full .wrap_quote{width:100%; position:absolute; top:50%; transform:translateY(-50%);}
.bloc_ref_full .wrap_quote h2{font-size: 2rem; color:var(--color2);}
/*.bloc_ref_full .wrap_quote p:first-child{color:var(--color3); font-size: 1rem; }*/
.bloc_ref_full .wrap_quote p:nth-child(2){color:var(--color1); font-size: 1rem; padding: 0 20px 100px 20px; position:relative; letter-spacing:1px;}
.bloc_ref_full .wrap_quote p:nth-child(2)::before{content:"\201C"; bottom:4%; position:absolute; display:block; left:50%; transform:translateX(-50%); font-size: 7rem; opacity:0.8; color:var(--color2);}
.bloc_ref_full .wrap_quote p:nth-child(4){color:var(--color1); font-size: 1rem; font-weight: 600}
.bloc_ref_full .wrap_quote p:nth-child(5){color:var(--color2); font-size: 1.1rem; font-weight: 600; letter-spacing:1px;}
.bloc_ref_full .quote .photo{width:100px; height:100px; border:1px solid transparent; border-radius:50px; min-height:100px !important; margin:auto; margin-bottom:30px;}
.bloc_ref_full .quote .photo .lazyOver{border-radius:50px;}
/********************************************************
 * 4 cartes 16/9e
 *******************************************************/
.bloc_ref_full .wrap_cards{width:50%; height:100%; margin:0;padding:0;display:inline-block; vertical-align:top;}
.bloc_ref_full .card{width:50%; height:50%; display:inline-block;position:relative; overflow:hidden;}
.bloc_ref_full .card_content{width:100%; position:absolute; top:50%; transform:translateY(-50%); left:0%;}
.bloc_ref_full .card .background{width:100%; height:100%; position:relative; top:-10px; left:0; opacity:0.5;}
.bloc_ref_full .card:hover .background{opacity:0.2; transition:0.5s;}
.bloc_ref_full .card h2{color:var(--color3); font-size: 2rem; margin-top:35px;transition:0.35s; margin-bottom:0; font-weight: 300}
.bloc_ref_full .card:hover h2{margin-top:0;}

.bloc_ref_full .card p{color:var(--color3); font-size: 1rem; opacity:0; transition:0.5s; padding:10px; padding-top:0; margin-top:10px;}
.bloc_ref_full .card:hover p{opacity:1;}
.bloc_ref_full .card p::before{content:""; background-image: url('../_img/arrow-white.png'); width:100%;height:100%; background-repeat: no-repeat; background-size: cover; display:block;}

.bloc_ref_full .card_content .background{width:5% !important; height:20px !important; min-height:20px !important; margin:auto; margin-bottom:10px; opacity:1; top:5px;}
.bloc_ref_full .card:hover .card_content .background{opacity:1;}

.bloc_ref_full .card .BgColorOverImg{opacity:0;}
.bloc_ref_full .card:hover .BgColorOverImg{opacity:0.8;}


/*.bloc_ref_full .wrap_cards .card:nth-child(1), .bloc_ref_full .wrap_cards .card:nth-child(4){background-color: rgba(0,0,0, 0.8)}
.bloc_ref_full .wrap_cards .card:nth-child(2), .bloc_ref_full .wrap_cards .card:nth-child(3){background-color: var(--color2)}*/

.editableZone .bloc_ref_full .card .background{opacity:0.5; top:0;}
.editableZone .bloc_ref_full .card_content .background{opacity:1;}

.editableZone .bloc_ref_full .duplicIco.icon-plus{display:none;}

.editableZone .bloc_ref_full .card_content .background .design.iconEditable{width:20px;; margin-right:5px; margin-left:5px;}

/*inverser opa des coueurs 
height:auto*/

@media screen and (max-width:1450px) {
.bloc_ref_full{height:900px;}
.bloc_ref_full .img_face, .bloc_ref_full .quote{width:50%; height:50%;}
.bloc_ref_full .wrap_cards{display:block; width:100%; height:66.667%;}
}

@media screen and (max-width:600px) {
.bloc_ref_full{height:1500px;}
.bloc_ref_full .img_face{display:block; width:100%;  height:17%;}
.bloc_ref_full .quote{display:block; width:100%;  height:25%;}
}

@media screen and (max-width:550px) {
.bloc_ref_full .wrap_cards .card{display:block; width:100%; height:25%;}
.bloc_ref_full .wrap_cards .card:nth-child(1), .bloc_ref_full .wrap_cards .card:nth-child(3){background-color: var(--color1)}
.bloc_ref_full .wrap_cards .card:nth-child(2), .bloc_ref_full .wrap_cards .card:nth-child(4){background-color: var(--color2)}

}