/* RESET */
#center {width: 100% !important;}
#center_part_2_full {float: none !important;width: 100% !important;}
#contenuhome {margin: 0 !important;}
#bottomfooter {margin-top: 0 !important;}
#ftr {margin-top: 0 !important;}
b{font-weight: bold;}
#duels h1, #duels h2, #duels h3, #duels h4, #duels h5, #duels h6 {background: none;border: 0 none;display: block;float: none;font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;}
#duels{display: block;overflow: hidden;position: relative;}
#duels #header-duels:before{position:absolute;top:-15px;left:-530px;content: "";width: 0;height: 0;border-style: solid;border-width: 490px 450px 0 617px;border-color: #007472 transparent transparent transparent;line-height: 0px;_border-color: #007472 #000000 #000000 #000000;_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}
#duels h2{font: 400 24px 'Open Sans',Arial,sans-serif;color: #3e3e3e;text-align: center;margin-bottom: 40px;text-transform: uppercase;}

/* HEADER */
#duels #header-duels{width: 100%;max-width: 1000px;margin: 0 auto 100px;position: relative;z-index: 99;}
#duels #header-duels .ariane{width: 100%;font: 400 12px 'Open Sans',Arial,sans-serif;color: #FFF;margin-top: 15px;z-index: 99;position: relative}
#duels #header-duels .ariane a{text-decoration: none;color: #FFF;outline: none;}
#duels #header-duels .ariane a:hover{text-decoration: underline;}
#duels #header-duels .subheader{padding: 50px 20px 50px 20px;font-size: 0px;z-index: 99;position: relative;}
#duels #header-duels .subheader h1{font: 300 26px 'Open Sans',Arial,sans-serif;color: #FFF;text-transform: uppercase;width: 47%;text-align: left;display: inline-block;vertical-align: middle;padding-left: 20px; }
#duels #header-duels .subheader h1 b{font: 600 43px/30px 'Open Sans',Arial,sans-serif;display: block;}
#duels #header-duels .subheader p{font: 400 16px/18px 'Open Sans',Arial,sans-serif;color: #3e3e3e;display: inline-block;vertical-align: middle;width: 50%;}

/* ARTICLES FAVORIS*/
#duels #last{width: 100%;max-width: 1000px;margin:0 auto 75px;overflow: hidden;z-index: 99;position: relative;}
#duels #last > div{font-size: 0px;}
#duels .article{width: 300px;margin-right: 50px;display: inline-block;vertical-align: top;position: relative;text-decoration: none;outline: none;text-align: center;overflow: hidden;}
#duels .article:hover img{transform: scale(1.1);transition: 0.8s all;}
#duels .article img{transition: 0.5s all;}
#duels .article:nth-child(3n){margin-right: 0px;}
#duels .article p{margin-right: 0px;position: absolute;bottom: 0px;width: 100%;font: 300 14px/18px 'Open Sans',Arial,sans-serif;color: #777777;padding: 15px 0px;background-color: rgba(255,255,255,0.9);}
#duels .article p b{display: block;}
#duels .article p.single{padding: 24px 0px;}

/* TOUS LES ARTICLES */
#duels #all {width: 100%;max-width: 1000px;margin: 0 auto 20px;}
#duels #all nav{width: 100%;max-width: 1000px;margin: 0 auto 20px;}
#duels #all nav ul{display: table;width: 100%;border-bottom: 1px solid #9a9a9a;}
#duels #all nav ul li{position:relative;display: table-cell;vertical-align: middle;text-align: center;text-transform: uppercase;font: 300 15px 'Open Sans',Arial,sans-serif;color: #000;padding-bottom: 10px;}
#duels #all nav ul li.on{color: #007473;}
#duels #all nav ul li.on:after{content: "";height: 3px;width: 60%;background-color: #007473;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
#duels #all > div{font-size: 0px;}
#duels #all > div .article{margin-bottom: 45px;}

/* FOOTER */
#duels #other{display: block;width: 100%;max-width: 1000px;overflow: hidden;font-size: 0px;margin: 0 auto 80px;}
#duels #other a{display: inline-block;vertical-align: top;width: 475px;margin-right: 50px;text-decoration: none;outline: none;padding-bottom: 55px;position: relative;}
#duels #other a:after{content: "";background: url(/content/static/bcom/desktop/evenements/2017/05_accueil-duels/images/arrow.png) no-repeat center center;background-size: cover;position: absolute;bottom: 15px;right: 15px;width: 14px;height: 22px;}
#duels #other a:first-child{background-color: #c84848;}
#duels #other a:last-child{margin-right: 0px;background-color: #b8d2e6;}
#duels #other a .title-other{display: block;width: 100%;text-align: center;color: #FFF;}
#duels #other a:first-child .title-other{font: 600 34px 'Open Sans',Arial,sans-serif;padding-top: 70px;color: #FFF;text-transform: uppercase;}
#duels #other a:first-child .title-other:after{content: "";background-color: #FFF;height: 1px;width: 50px;display: block;margin:10px auto 0px;}
#duels #other a:last-child .title-other{padding-top: 57px;}
#duels #other a:last-child .title-other:after{content: "";background-color: #FFF;height: 1px;width: 50px;display: block;margin:10px auto 0px;}
#duels #other a p{font: 400 16px 'Open Sans',Arial,sans-serif;padding-top: 30px;color: #FFF;text-align: center;}

/* SHARE */
#duels .section-share {
  font-size: 0;
  padding-bottom: 15px;
  text-align: center;
}
#duels .section-share a,
#duels .section-share a:focus,
#duels .section-share a:hover {
  display: inline-block;
  margin: 0 5px;
  text-decoration: none;
}

@media screen and (max-width: 780px){
	#duels #header-duels {background-color: #007472;margin:0 auto 20px;}
	#duels #header-duels:before {display: none;}
	#duels #header-duels .ariane{width: 90%;margin: 0px auto;padding-top: 10px;}
	#duels #header-duels .subheader{padding: 30px 20px 50px 20px;text-align: center;}
	#duels #header-duels .subheader h1{width: 100%;text-align: center;padding-left: 0px;}
	#duels #header-duels .subheader p{color: #FFF;font: 400 13px/16px 'Open Sans',Arial,sans-serif;width: 100%;padding-top: 20px;}

	#duels #last .article{width: 100%;margin: 0px 0px 10px 0px;}
	#duels #all > div{display: flex;flex-flow: row wrap;justify-content: space-between;}
	#duels #all > div .article{width: 49.5%;margin: 0px 0px 5px 0px;}
	#duels #all > div .article p{font: 300 13px/16px 'Open Sans',Arial,sans-serif;padding: 5px 0px;}

	#duels #other {margin: 0 auto 20px;}
	#duels #other a{width: 100%;margin-right: 0px;margin-bottom: 15px;}
}
@media screen and (max-width: 780px) and (orientation:landscape){
	#duels #last > div{display: flex;flex-flow: row nowrap;justify-content: space-between;}
	#duels #last .article{width: 33%;margin: 0px 0px 10px 0px;}
	#duels #all > div{display: flex;flex-flow: row wrap;justify-content: space-around;}
	#duels #all > div .article{width: 32.5%;margin: 0px 0px 5px 0px;}
	#duels #other > div{display: flex;flex-flow: row wrap;justify-content: space-between;}
	#duels #other a{width: 49%;margin-right: 0px;margin-bottom: 15px;}
}