#header{
	height: 100%;
}

.btn.dropdown-toggle {
	border: 1px solid #ccc;

	border-color: #ccc !important;
}

.menuCitroenContainer div {
	display: inline-block;
	width: 1230px;
	margin: auto;
	margin-left: 0px;
}

.menuCitroenContainer{
	background-color: #FFFFFF;
	text-align: center;
}

.menuCitroen{
	text-align: left;
}

.menuCitroen ul{
	padding: 0;
}

.menuCitroen li{
	display: inline-block;
	vertical-align: middle;
	padding-right: 20px;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}

.menuCitroen li:hover,
.menuCitroen li a:hover{
	color: #b48f6d;
}
.menuCitroen li:hover .pictoMenu{
	background: url(https://cdn.bigyouth.fr/citroen/pictoDropDownGreen.png) no-repeat center center;
}
.menuCitroen li.menuActive .pictoMenu,
.menuCitroen li.menuActive:hover .pictoMenu{
	background-image: url(https://cdn.bigyouth.fr/citroen/pictoDropUp.png);
}

.menuCitroen li a{
	cursor: pointer;-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-decoration: none !important;
}

.submenuHeader{
	background-color: white;
	height: 240px;
	width: 100%;
	text-align: center;
	border-top: 1px solid grey;
	position: absolute;
}

.submenuHeaderContainer{
	width: 100%;
	justify-content: flex-end;
	height: 100%;
	display: flex;
	text-align: left;
}


.submenuHeaderLinks{
	width: 65%;
	height: 100%;
	margin: 0;
	padding-top: 20px;
}

.submenuHeaderLinks ul{
	text-align: left;
	padding-left: 32px;
}
.submenuHeaderLinks ul:after{
	content: "";
	display: block;
	clear: both;
}

.submenuHeaderLinks .firstLvlLinks{
	margin-bottom: 45px;
	padding-top: 35px;
}

.submenuHeaderLinks li{
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	width: 31%;
  margin: 0 2% 20px 0;
	line-height: 1.5;
	float: left;
}

.submenuHeaderLinks .textwrapper{
	color: #000;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-decoration: none !important;
	display: block;
	overflow: hidden;
	height: 65px;
}
.submenuHeaderLinks a{text-decoration: none !important;}

.submenuHeaderLinks .textwrapper:hover{
	color: #b48f6d;
}

.submenuHeaderImage,
.submenuHeaderfakewidth{
	flex-shrink: 0;
	flex-grow: 0;
}

.submenuHeaderImage > div {
	height: 100%;
  background-size: cover;
  background-position: center;
}

.submenuHeaderImage{
	text-align: center;
}

.submenuHeaderClose{
	margin-right: 14px;
	margin-top: 20px;
}
.submenuHeaderClose aside	{
	font-family: arial, sans-serif;
	font-weight: bold;
	width: 50px;
	height: 50px;
	line-height: 45px;
	border: solid #b48f6d 4px;
	color: #b48f6d;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.submenuHeaderClose aside:hover{
	color: white;
	background-color: #b48f6d;
}

header .inner{
	background-color: #FFFFFF;
}

.submenuHeaderOpacity{
	height: 1000%;
	height: 100vh;
	background-color: rgba(88, 88, 91, 0.6);
}

.submenuHeaderHide{
	display: none;
}

.submenuHeaderShow{
	display: block;
}

.pictoMenu{
	width: 13px;
	height: 8px;
	background: url('https://cdn.bigyouth.fr/citroen/pictoDropdown.png') no-repeat center center;
	margin-left: 10px;
	margin-top: 5px;
	float: right;
}

.pictoMenuActive{
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

.menuActive{
	color: #b48f6d;
}

.menuMobile{
	display: none;
}

.hideMobileMenu{
	display: none;
}

/* Petit écrans, agrandissement du menu */
@media screen and (max-width: 1400px) and (min-width: 1280px){
	.menuCitroenContainer div{
		width: 1110px;
		margin-left: auto;
		margin-right: auto;
    padding-left: 30px;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1280px){
	.submenuHeaderfakewidth{flex-basis: 115px !important;}
}

.menuCitroen > ul {
	margin-bottom: 0;
}

.menuCitroen li {
	padding-top: 10px;
	padding-bottom: 10px;
}

@media screen and (max-width: 1280px){
	.menuCitroenContainer{
		padding: 0 85px;
	}

	.menuCitroenContainer div {
		width: 100%;
		/*margin-left: 30px;*/
	}

	.submenuHeaderLinks{
		margin: 0;
	}

	.submenuHeaderImage{
		width: 29%;
		text-align: right;
		float: right;
	}

	.submenuHeaderImage img{
		width: 90%;
	}

	.submenuHeaderLinks ul{
		padding-left: 0;
	}
}


/*@media screen and (max-width: 1024px){
	.submenuHeaderImage{display: none !important;}

	.submenuHeaderContainer{
		justify-content: flex-start;
	}

	.submenuHeaderfakewidth{
		flex-basis: 50px !important;
	}

	.submenuHeaderLinks{
		width: 100%
	}

	.menuCitroenContainer{
		padding: 0 20px;
	}

	.menuCitroenContainer div{
		margin-left: 20px;
	}

	#header .inner{
		padding: 0 20px;
	}

	.menuCitroen li {
    	padding: 10px 10px;
	}
}*/

.showMobileMenu{
	display: none;
}

@media screen and (min-width: 767px) {
		#header .inner{
			padding-top: 10px;
		}
		#header .inner{
			display: table !important;
		}
		#header a.logoLeft {
	    font-size: 24px;
	    padding-left: 0;
	    background-position: left 5px;
	    background-size: auto 19px;
	  }
}

@media screen and (max-width: 768px) {
	#header .menuMobileTitleContainer a{
		font-size: 16px;
		padding-left: 0px;
	}

	#header a.logoLeft {
		background-image: none;
	}

	.menuMobileTitleContainer{
		width: 60px;
	}
}

@media screen and (max-width: 1024px){

	#header{
		height: 52px;
	}

	.menuCitroenContainer{
		display: none;
	}

	.menuMobile{
		display: block;
	}

	.submenuHeader{
		display: none;
	}

	#header a.logoLeft:hover{
		background: none !important;
	}

	#header a.logoLeft.logoLeftDesktop{
		display: none;
	}

	.menuMobile div{
		display: inline-block;
		vertical-align: top;
	}

	.menuMobile{
		margin-top: 10px;
	}

	.openMenuMobile{
		text-align:center;
		width: 50px;
		width: 40px;
		margin-right: 20px;
	}

	#sections{
		margin-top: 25px;
	}


	.menuCitroen ul{
		padding: 0px;
	}

	.menuCitroen li{
		display: block;
	}

	.menuCitroen li img{
		float: right;
		margin-top: 5px;
	}

	.hideMobileMenu{
		display: none !important;
	}

	.showMobileMenu{
		display: block !important;
		z-index: -2;
		width: 60%;
    min-width: 242px;
		height: 100vh;
		max-height: 100vh;
		overflow: auto;
		background: #fff;
	}

	.menuMobileCitroen ul{
		padding: 0;
	}

		.menuMobileCitroen {
			height: 100%;
		}

		.menuMobileCitroen ul {
			height: 100%;
			position: relative;
			z-index: 1000;
			border-right: 1px solid #afadc3;
		}

	.menuMobileCitroen li{
	display: inherit;
	padding: 20px;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	background: #FFFFFF;
	border-top: 1px solid #afadc3;
	}

	.menuMobileCitroen li:first-child{
	border-top: 0;
	}

	.menuMobileCitroen .js-submenuHeaderMobile ul {
		border-right: 0;
	}

	.menuMobileCitroen .js-submenuHeaderMobile{
		border-top: 0 !important;
		border-right: 0 !important;
		border: 0 !important;
	}

	.menuMobileCitroen .js-submenuHeaderMobile li{
		border-top: 0 !important;
		border-right: 0 !important;
		border: 0 !important;
	}

	.menuMobileCitroen .js-submenuHeaderMobile li:last-child{
		position: static;
	}

	.menuMobileCitroen li.blog-menu-item{
		border-top: 0;
	}

	.menuMobileCitroen li a {
		display: block;
	}

	.menuMobileCitroen li:nth-child(3){
		/*border-top: 0;*/
	}

	.menuMobileCitroen li:last-child .dropdown ul.dropdown-menuMobile {
		/*border: 1px solid #afadc3;*/
		border: 1px solid #cccccc;
	}

	.menuMobileCitroen li:last-child {
		/*position: absolute;
		bottom: 0;*/
		border-top: 0;
	}

	.menuMobileCitroen li img{
		float: right;
		margin-top: 5px;
	}

	.menuMobileOpacity{
		position: absolute;
		height: 100vh;
		background-color: rgba(88, 88, 91, 0.6);
		width: 100%;
		top: 0;
	}

	.menuMobileClose{
		position: absolute;
	    width: 40%;
	    background-color: white;
	    padding: 15px;
	    top: 0;
	    right: 0;
	}

	.menuMobileCloseContainer{
		float: right;
    	text-align: center;
	}

	.submenuHeaderMobile li a{
		color: #afadc3;
		cursor: pointer;
	}

	#header .dropdownMobile button span.short{
		display: none;
	}

	#header .dropdownMobile button span.long{
		display: block !important;
	}

	.visible-xsMobile{
		display: none !important;
	}

	.hidden-xsMobile{
		display: block !important;
	}

	.dropdown-menuMobile{
		left: 0;
		right: auto;
	}

	.dropdownDesktop{
		display: none !important;
	}

	#header .col3 {
    	width: 65px;
	}

	.menuMobileCitroen li.menuActive .pictoMenu{
	background: url(https://cdn.bigyouth.fr/citroen/pictoDropUp.png) no-repeat center center !important;
	}
}
@media screen and (max-width: 1024px) and (min-width: 767px){
	.menuMobileCloseContainer:before{
		content: "";
		display: block;
		background-color: transparent;
		height: 74px;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	#header a.logoLeft{
		background: none;
		padding-left: 0;
	}

	.menuMobileTitleContainer{
		padding-top: 10px;
	}
}

.menuCitroen li.blog-menu-item {
	transition: color 0.3s;
}

.blog-menu-item {
	padding-left: 20px;
	padding-top: 10px;

	background: #00a5b4;

	color: #fff;
}

.blog-menu-item a {
	color: #fff;
}

.blog-menu-item .pictoMenu {
	background: url(../img/pictoDropDownWhite.png) no-repeat center center;
}

.blog-menu-item:hover {
	border: 4px solid #00a5b4;
	padding: 6px 16px;
	background: #fff;
}

.blog-menu-item:hover a {
	color: #00a5b4 !important;
}

.blog-menu-item:hover .pictoMenu {
	background: url(../img/pictoDropDownBlue.png) no-repeat center center !important;
}

.blog-menu-item.menuActive {
	border: 4px solid #00a5b4;
	padding: 6px 16px;
	background: #fff;

	color: #00a5b4;
}

.blog-menu-item.menuActive a {
	color: #00a5b4 !important;
}

.blog-menu-item.menuActive .pictoMenu {
	background: url(../img/pictoDropUpBlue.png) no-repeat center center !important;
}

.blog-menu-item.menuActive:hover {
	border: 0;
	padding: 10px 20px;

	background: #00a5b4;

	color: #fff;
}

.blog-menu-item.menuActive:hover a {
	color: #fff !important;
}

.blog-menu-item.menuActive:hover .pictoMenu {
	background: url(../img/pictoDropUpWhite.png) no-repeat center center !important;
}

@media screen and (max-width: 1024px) {
	.menuMobileCitroen li.blog-menu-item {
		padding-left: 20px;
		padding-top: 20px;

		background: #00a5b4;

		color: #fff;
	}

	.menuMobileCitroen li.blog-menu-item:hover {
		padding: 20px;
		border: 0;
	}

	.menuMobileCitroen li.blog-menu-item:hover a {
		color: #fff !important;
		text-decoration: none;
	}

	.menuMobileCitroen li.blog-menu-item:hover .pictoMenu {
		background: url(../img/pictoDropDownWhite.png) no-repeat center center !important;
	}

	.menuMobileCitroen li.blog-menu-item .pictoMenu {
		background: url(../img/pictoDropDownWhite.png) no-repeat center center !important;
	}

	.menuMobileCitroen li.blog-menu-item.menuActive .pictoMenu {
		background: url(../img/pictoDropUpBlue.png) no-repeat center center !important;
	}

	.menuMobileCitroen li.blog-menu-item.menuActive {
		padding: 16px;

		border: 4px solid #00a5b4;

		background: #fff;

		color: #00a5b4;
	}

	.menuMobileCitroen li.blog-menu-item.menuActive:hover {
		color: #00a5b4;
	}

	.menuMobileCitroen li.blog-menu-item.menuActive a {
		text-decoration: none;
		color: #00a5b4 !important;
	}
}