#gallery { position: relative; width: 100%; padding-top: 86px; }
#gallery .gallery-wrap-wrap { width: 100%; overflow: hidden; }
#gallery .cadre { float: left; }
#gallery .cadre img {width: 100%}
#gallery .buttons { position: absolute; bottom: 15px; left: 0; text-align: center;  width: 100%;}
#gallery .buttons a { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #ddd; margin: 0 5px; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
#gallery .buttons a.active { background-color: #d0991b; }

#cards { padding: 20px 10px 1px 10px; }
#cards .card { width: 33.333333%; float: left; }
#cards .card h5 { font-size: 17px; padding: 10px 0; }
#cards .card h5 a { color: #d0991b; text-decoration: none; }
#cards .card ul { padding: 5px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 150px; margin-bottom: 30px; }
#cards .card ul li {position: relative;}
#cards .card ul li a{text-decoration:none;display:block;padding:8px 12px 8px 2px;position:relative;transition:color ease 0.3s;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
#cards .card ul li a span.arrow{float:right;color:transparent;position:absolute;top:50%;right:20px;transition:color ease 0.3s,right ease 0.3s;margin-top:-8px}
#cards .card ul li a:hover,
#cards .card ul li a:active{color:#253a73}
#cards .card ul li a:hover span.arrow,
#cards .card ul li a:active span.arrow{color:#253a73;right:10px}
#cards .card.facebook { float: right; width: 33%; margin: -10px 0; height: 460px; background: #f5f6f7; }

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

@media only screen and (max-width:800px){
	#gallery { padding-top: 46px; }
	#cards .card { width: 50% !important; float: left; }
}

@media only screen and (max-width:400px){
	#cards .card { width: 100% !important; float: none; }
	#cards .card.facebook { margin: 0 0 30px 0; }