@font-face{font-family:'Source_Sans_Pro';
	font-weight:normal;
	src:url('fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype');
	 font-weight:normal;
	 font-style:normal;
}
@font-face{font-family:'Source_Sans_Pro_Bold';
	src:url('fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf') format('truetype');
	font-weight:700;
	font-style:normal;
} 

@font-face{font-family:'PublicoHeadline';
	src:url('fonts/PublicoHeadline-Bold-App.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}



html {height:100%;}
body {background:#f2f3f6; height:100%; font-family: 'Source_Sans_Pro', Helvetica, sans-serif; font-weight:400; color:#3e425b;}
b {font-family: 'Source_Sans_Pro_Bold', Helvetica, sans-serif; }
/*************************************
* Grid Flip
*************************************/

.card-container {display: block; max-width:345px; width:345px; margin: 0 auto;  text-align: center;}
.card-grid {/*width: 330px;*/ width:100%; height: 830px; margin: 40px 0px; display: inline-block; cursor: pointer;}
.card-grid .front {background-color: #eee;}
.card-grid .back {background-color: #333; color: white; padding-top:45px;}

.card-grid .front, .card-grid .back {
    text-align: center;
		-moz-box-shadow: 5px 5px 8px 0px #b2b2b2;
		-webkit-box-shadow: 5px 5px 8px 0px #b2b2b2;
		-o-box-shadow: 5px 5px 8px 0px #b2b2b2;
		box-shadow: 5px 5px 8px 0px #b2b2b2;
		filter:progid:DXImageTransform.Microsoft.Shadow(color=#b2b2b2, Direction=134, Strength=8);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
}

.full-img {max-width:345px; width:100%;}
/*************************************
* Question epargne
*************************************/
.q-number { font-family: 'PublicoHeadline'; margin-bottom:10px; color:#00008f; text-align:left!important; font-size:85px; line-height:85px; font-weight:600; float:left; overflow:hidden;}
.q-picto img {width:100%; max-width:345px;}
.fiche_1 .q-picto img, .fiche_5 .q-picto img, .fiche_15 .q-picto img {background:none;}

.q-text {color:#00008F; font-family: 'PublicoHeadline','Source_Sans_Pro';  font-size:23px; line-height:30px; text-align:left; padding-left:15px; overflow:hidden;}
.q-text.fin {border-bottom:3px solid #00008F; float: left;}
.question {overflow:hidden; border-bottom:3px solid #00008F; margin:0px 25px 60px;}

.fleche {position: absolute; bottom: 15px; width: 100%;}
.fleche img {width:35px;}

/*************************************
* Reponse epargne
*************************************/
.r-main { font-family: 'PublicoHeadline','Source_Sans_Pro'; font-size:20px; line-height:25px; padding:15px 15px; font-weight:600;}
.r-main a {color:#ffffff; text-decoration:underline;}
.r-block-white {background:#ffffff; margin:20px 0px; color:#00008F; overflow:hidden; position: relative; min-height:470px;}

.block-corner {position:relative; margin: 30px 30px; padding: 0px 10px;}
.corner-top-left {border-top: 5px solid #00008F; border-left: 5px solid #00008F; height: 15px; width: 15px; position:absolute; left:0px; top:0px;}
.corner-top-right {border-top: 5px solid #00008F; border-right: 5px solid #00008F; height: 15px; width: 15px; position:absolute; right:0px; top:0px}
.corner-bottom-left {border-bottom: 5px solid #00008F; border-left: 5px solid #00008F; height: 15px; width: 15px; position:absolute; bottom:0px; left:0px;}
.corner-bottom-right {border-bottom: 5px solid #00008F; border-right: 5px solid #00008F; height: 15px; width: 15px; position:absolute; right:0px; bottom:0px}


.more {padding-top:7px; font-weight:700; font-size:18px;}

.r-more-content {margin-bottom:20px;}
.r-more-content .full-img {width:100%; height:auto;}
.r-more-content .content-txt {text-align:left; padding:10px 30px; color:#00008f; font-size:15px;}
.r-more-content .content-txt a {color:#00008f; text-decoration:underline;}
.r-more-content .content-txt ul {padding-left: 20px;}
.r-more-content .content-txt li { padding-bottom: 10px; }
.r-more-content .content-txt li.nopdding { padding-bottom: 0px;}

.r-more-content .block-corner .content-txt {padding:5px 5px;}
.r-more-content .content-note {color:#00008F;}

.fiche_8 .r-more-content .content-txt {line-height:19px;}



/*************************************
* Reponse retraite
*************************************/
.retraite .r-block-white {margin-bottom:10px;}
.retraite .content-note-top {font-family: 'Source_Sans_Pro'; font-size:11px; line-height: 15px; text-align:left; margin: 20px 0px 0px;}
.retraite .content-note {text-align:left; margin: 40px 20px 0px; }

.retraite .fiche_3 .r-block-white {margin-top:20px;}

/*************************************
* Generique
*************************************/
.bigtitle {color:#00008F; text-align:center; font-family:"daxbold", Helvetica, sans-serif; font-size: 19px; text-transform:uppercase;  margin: 15px 0px 20px;}
.bigtitle span {color:#3e425b;}

.carousel-inner>.item {
   display: block;
}
.carousel-control.left {background-image: none;}
.carousel-control.right {background-image: none;}

.carousel-control .fa{
position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px;
}
.carousel-control .fa.left{left: 15px;}
.carousel-control .fa.right{right: 15px;}

/*************************************
* Responsive
*************************************/
@media screen and (max-width: 1199px) {
	.col-sm-4 {width:50%!important;}
}


@media screen and (max-width: 768px) {
	.col-sm-4 {width:100%!important;}
	.card-grid {margin:20px 0px; width:100%}
	.carousel-inner>.item {
	    display: none;
	}
	.carousel-inner>.active {
	    display: block;
	}
}

@media screen and (max-width: 600px) {
	.fullwidth {width:100%!important;}
}

@media screen and (max-width: 380px) {
	.card-container { width:100%!important;}
}