/* desktop */

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

	header{
		max-width:980px;
		margin:auto;
	}

	#articleGauche{
		width:60%;
	}
}


/* tablettes */
@media handheld, only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {


	.content {
		width:90%;
	}

/*
.content {
    width: 67%;
    float: left;
    margin-left: 3%;
}
*/

#bandeau {
	height:350px;
	min-height:350px;
	background-size:cover
}
#simulation_personnalisee_responsive {
	display:block;
	margin-bottom: 45px;
}
header h2 strong {
	display:none;
}

nav ul li {
	margin-left:3.5%;
}

#bandeau .cliquable {
	width:35%;
}

#bandeau .simulation {
	float:right;
	margin:20px 5% 0 0;
	border:1px solid #f3f3f3
}

section {
	width:100%;
	//float:left;
}

#bandeau .simulation, aside .simulation {
	display: inline-block;
	width: 320px;
	height: 990px;
	background-color: #ffffff;
	overflow: hidden;
}
/*
section {
	width:100%;
	float:none;
	}
	*/

	aside {
		display:none;
	}

	.pinel, .lmnp {
		background-size:cover
	}

	#guide_gratuit {
		background-image:none;
		width:530px;
		background-position:top;
		background-repeat:no-repeat;
		overflow:hidden;
		color:#ffffff;
	}

	.guide_responsive {
		display:block;
		float:left;
		width:200px;
		margin:50px 20px 0 0;
	}

	#guide_gratuit img {
		display:none;
	}

	.message {
		float:none;
		margin:-20px auto 0 auto;
		width:90%;
	}
	
	.pinel h3 strong {
		font-size:70px;
	}

	.pinel .message h3 {
		font-size:30px;
		line-height:40px;
		padding-left:50px;
	}

	.lmnp .message h3 {
		font-size:50px;
		line-height:55px;
	}

	#guide_gratuit h5, #guide_gratuit ul {
		display:none;
	}
	
	.personnage {
		display:none;
	}

	.formulaire {
		float:none;
		position:relative;
		margin:0 auto;
		width:95%;
		padding:10px 0 0 0;
	}

	.formulaire iframe {
		margin-top:15px;
	}
	
	footer {
		padding:20px 0 0 0;
	}

	footer nav ul {
		width:33%;
		margin-right:0;
	}

/*
#articleGauche {
    width: 100%;
    position: relative;
    top: 0;
}
*/

#articleGauche{
	width: 46%;
	position: absolute;
	top: 477px;
}

.rightTablette{
	margin-top: 470px;
}

.desktop{
	display:none;
}

#mobTab{
	display:block;
}

#articleGauche{
	width: 46.5vw;
	margin: auto;
}

.simulation, .telecharger {
	width: 99%;
}
}

/* mini tablettes */
@media handheld, only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
	header h2 {
		display:none;
	}

	header #logo h2 {
		display:block;
	}
	
	hr {
		display:none;
	}

	#burger {
		display:block;
	}
	
	#burger a {
		position: relative;
		display: block;
		float: right;
		width: 40px;
		height: 40px;
		cursor: pointer;
		margin-top:-40px;
	}
	
	#burger a:after {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		box-shadow: 0 0 0 2px #bd2129, 0 10px 0 2px #bd2129, 0 20px 0 2px #bd2129;
	}

	#menu_top {
		display:none;
		width:90%;
		float:right;
		background:#ffffff;
		padding:0 5% 20px 5%;
		position:absolute;
		z-index:3;
	}

	#menu_top ul li {
		text-align:center;
		display:block;
		margin-left:0;
		padding:10px;
		border-bottom:1px solid #ccc;
		text-transform:uppercase;
	}
	
	#menu_top ul li:nth-child(1) {
		margin-left:0px;
	}

	#menu_top ul li ul {
		position:relative;
	}

	#menu_top ul li:hover ul {
		display:block;
	}

	#menu_top ul li ul li, #menu_top ul li ul li:nth-child(1) {
		border-bottom:none;
		padding:5px 0 5px 5%
	}
	
	#bandeau {
		overflow:hidden;
		height:auto;
		min-height:350px;
		background-size:contain;
		background-repeat:no-repeat;
		background-position:top
	}
	
	#bandeau .cliquable {
		width:100%;
		height:360px;
	}

	#bandeau iframe, section iframe, .pinel .simulation iframe, .lmnp .simulation iframe {
		height:370px;
	}

	#bandeau .simulation {
		float:none;
		width:90%;
		margin:auto;
		border:1px solid #f3f3f3;
		height:auto;
	}
	
	.bandeau_accueil {
		background:url(images/juillet2016-01/bandeau-accueil-responsive.jpg);
	}

	.bandeau_pinel {
		background:url(images/juillet2016-01/bandeau-pinel-responsive.jpg);
	}

	.bandeau_lmnp {
		background:url(images/juillet2016-01/bandeau-lmnp-responsive.jpg);
	}

	.bandeau_itw_pinel {
		background:url(images/juillet2016-01/bandeau-itw-pinel-responsive.jpg);
	}

	.bandeau_itw_lmnp {
		background:url(images/juillet2016-01/bandeau-itw-lmnp-responsive.jpg);
	}

	.guide_responsive {
		width:180px;
	}
	
	.pinel h3 strong {
		font-size:60px;
	}

	.pinel .message h3 {
		font-size:28px;
		line-height:35px;
	}

	.lmnp .message h3 {
		font-size:45px;
		line-height:50px;
	}

	.pinel, .lmnp {
		min-height:auto;
	}
	
	.pinel .simulation, .lmnp .simulation {
		width:95%;
	}

	.pinel .simulation .titre, .lmnp .simulation .titre {
		padding:20px 0 0 0;
	}

	.pinel .simulation .titre img, .lmnp .simulation img {
		margin:-40px 10px 0 10px;
		width:150px;
	}

	h4 {
		font-size:18px;
		line-height:25px;
	}

	h4 strong {
		font-size:25px;
	}

	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}

	#articleGauche{
		width:100%;
	}

	.simulation, .telecharger {
		width: 99%;
	}

}

/* mini tablettes */
@media handheld, only screen and (max-width: 603px), only screen and (max-device-width: 603px) {		
	#bandeau .cliquable {
		height:340px;
	}
	
	footer nav ul {
		width:50%;
	}

	.guide_responsive {
		width:150px;
	}
	
	.pinel h3 strong {
		font-size:50px;
	}

	.pinel .message h3 {
		font-size:25px;
		margin:-10px 0 0 0;
	}

	.lmnp .message h3 {
		font-size:40px;
		line-height:45px;
	}

	.pinel .simulation .titre, .lmnp .simulation .titre {
		padding:20px 40px 15px 0;
	}
	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}

	.simulation, .telecharger {
		width: 99%;
	}
}

@media handheld, only screen and (max-width: 533px), only screen and (max-device-width: 533px) {		
	#bandeau .cliquable {
		height:300px;
	}
	
	#bandeau {
		min-height:320px;
	}
	.pinel .content .specific {
		width:auto;
		margin: 0 auto;
		margin-top: -40px;
	}
	.pinel .content .specific h3 strong {
		font-size:26px;
	}

	.pinel .content .specific h3 {
		font-size:19px;
		line-height:21px;
	}

	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}
	#articleGauche{
		width:100%;
	}

	.simulation, .telecharger {
		width: 99%;
	}
	#bandeau .cliquable {
		width:620px;
		height:2330px;
		display:inline-block;
		margin-top:30px;
		cursor:pointer;
		background:none;

	}
}

/* grand smartphone */
@media handheld, only screen and (max-width: 414px), only screen and (max-device-width: 414px) {		
	#logo img {
		width:50px;
		margin:5px 10px 0 0;
	}	

	h1 {
		font-size:28px;
	}

	h2 { 
		font-size:11px;
		padding:3px 15px 0 0;
	}
	
	#bandeau {
		min-height:250px;
		display: flex;
		flex-direction: column-reverse;
	}

	#bandeau .cliquable {
		color: #333;
		background: url(images/juillet2016-01/bandeau-lmnp-responsive.jpg) no-repeat;
		background-size: 70%;
		background-position: top left;
		height: 260px;
	}

	#bandeau iframe, section iframe, .pinel .simulation iframe, .lmnp .simulation iframe {
		height:280px;
	}

	#bandeau h4, aside h4 {
		font-size:14px;
		line-height:20px
	}

	h4 strong {
		font-size:22px;
	}

	section article figure, section .right figure {
		float:none;
		margin:20px 0;
		padding:0;
	}

	section article figure img, section .right figure img {
		width:100%;
	}

	.guide_responsive {
		width:50%;
		margin:50px 25% -40px 25%;
	}

	.lmnp .message h4, .lmnp .message h3, .pinel .message h4{
		display:none;
	}

	.formulaire {
		margin:50px auto;
	}


	footer nav ul {
		width:100%;
		height:auto;
		margin-bottom:20px;
		text-align:center;
	}

	h3 {
		font-size:21px;
	}
	
	h5 {
		font-size:20px;
		line-height:28px;
	}

	h5 strong {
		font-size:25px;
		font-weight:normal;
	}

	section .simulation .titre {
		padding:10px 10px 5px 15px;
	}

	section .simulation .titre img {
		width:65px;
		margin:-5px 10px 0 0;
	}

	section .telecharger img {
		float:none;
		margin:5% 20% 0 20%;
		width:60%;
	}

	section .telecharger iframe {
		float:none;
		width:90%;
	}

	.pinel .simulation, .lmnp .simulation {
		margin:40px auto;
	}

	.pinel .simulation .titre img, .lmnp .simulation img {
		display:none;
	}

	.pinel .simulation .titre, .lmnp .simulation .titre {
		padding:15px 5px;
		text-align:center
	}

	h6 {
		font-size:20px;
		line-height:23px;
		width:85%;
	}

	#simulation_guide fieldset {
		background-size:50%;
		height:250px;
	}
	
	#simulation_guide label {
		font-size:15px;
		display: inline-block;
		margin-top:7px;
		padding:5px 5px 5px 30px;
	}
	
	#simulation_guide label:before {
		width:20px;
		height:20px; 
	}
	
	#simulation_guide .merci {
		font-size:13px;
		line-height:17px;
	}

	#simulation_guide .fleches {
		padding-top:12px;
	}

	#simulation_guide .fleches span {
		font-size:20px;
		margin-right:5px;
	}	

	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}
	#articleGauche{
		width:100%;
	}

	.simulation, .telecharger {
		width: 99%;
	}
}

@media handheld, only screen and (max-width: 384px), only screen and (max-device-width: 384px) {

	#bandeau .cliquable {
		width:620px;
		height:400px;
		display:inline-block;
		margin-top:30px;
		cursor:pointer;
		background-image: url(images/juillet2016-01/bandeau-lmnp-responsive.jpg) no-repeat 100%;
	}

	#logo img {
		width:40px;
		margin:5px 10px 0 0;
	}	

	h1 {
		font-size:22px;
	}

	h2 {
		font-size:9px;
		padding:3px 15px 0 0;
	}
	
	#burger a {
		margin-top:-30px;
	}
	
	#bandeau .cliquable {
		height:260px;
	}
	
	#bandeau {
		min-height:220px;
	}

	#bandeau iframe, section iframe, .pinel .simulation iframe, .lmnp .simulation iframe {
		height:370px;
	}
	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}
	#articleGauche{
		width:100%;
	}

	.simulation, .telecharger {
		width: 99%;
	}
}

/* smartphone classique */ /* formulaire bandeau */
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
	#bandeau .cliquable {
		height:260px;
	}
	
	#bandeau {
		min-height:190px;
	}
	
	#simulation_guide label {
		font-size:13px;
	}

	#bandeau .simulation .titre img, aside .simulation .titre img {
		width:70px;
	}

	h6 {
		font-size:18px;
		line-height:21px;
	}
	
	.bouton {
		font-size:13px;
	}

	#articleGauche {
		width: 100%;
		position: relative;
		top: 0;
	}

	.rightTablette{
		margin-top: 0;
	}

	.desktop{
		display:none;
	}

	#mobTab{
		display:block;
	}

	#articleGauche{
		width:100%;
	}

	.simulation, .telecharger {
		width: 99%;
	}
}

/* anciens téléphones */
@media handheld, only screen and (max-width: 319px), only screen and (max-device-width: 319px) {
}