@charset "UTF-8";

#goto-2columns835{ font-size: 16px; padding: 0 0px; padding-top: 35px; padding-bottom: 35px; overflow: hidden; }
#goto-2columns835 .application{ position: relative; }
#goto-2columns835 .application-title{}
#goto-2columns835 .application-container{}
#goto-2columns835 .application-head{ padding-bottom: 160px; }
#goto-2columns835 .application-headinner{}
#goto-2columns835 .application-body{}
#goto-2columns835 .application-bodyinner{}
#goto-2columns835 .application-content{}
#goto-2columns835 .application-register{ left: 0; position: absolute; bottom: 70px; }
#goto-2columns835 .application-cta{ left: 0; position: absolute; bottom: 30px; }
#goto-2columns835 .application-cta a{ color: inherit; text-decoration: underline; }
#goto-2columns835 .application-cta a:focus,
#goto-2columns835 .application-cta a:hover{ color: #ee0000; }

#goto-2columns835 .application-body{ position: absolute; left: 200px; right: -100px; bottom: 0; }
#goto-2columns835 .application-body picture{ display: block; }
#goto-2columns835 .application-body img{ display: block; height: auto; width: 250px; }

/* AJOUT : Règle @media
  Ceci s'applique UNIQUEMENT quand la largeur de la fenêtre
  est entre 520px (inclus) et 599px (inclus).
*/
@media (min-width: 520px) and (max-width: 599px) {
  
  /* On cible le même élément, mais on lui dit
    de ne pas s'afficher (display: none).
  */
	
  #goto-2columns835 .application-body {
    display: none;
  }
	
	#goto-2columns835 .application-head {
    padding-bottom: 75px;
	}
	
	#goto-2columns835 .application-register {
    left: 0;
    position: absolute;
    bottom: 0px;
}

}

@media (max-width: 520px){
	#goto-2columns835{ padding-bottom: 135px; }
	#goto-2columns835 .application-body{ left: 0px; right: 0px; bottom: -105px; }
	#goto-2columns835 .application-body img{ width: 100%; max-width: 300px; }
	#goto-2columns835 .application-register { bottom: 90px;}
}

@media (min-width: 521px){
	#goto-2columns835 .application-body{ left: auto; right: -10px; }
}

@media (min-width: 600px){
	#goto-2columns835 .application-container{ display: table; width: 100%; }
	#goto-2columns835 .application-head,
	#goto-2columns835 .application-body{ display: table-cell; vertical-align: middle; padding: 0; }
	#goto-2columns835 .application-headinner{ padding-right: 2em; }
	#goto-2columns835 .application-content{ margin-bottom: 1em; }
	#goto-2columns835 .application-register{ margin-bottom: 1em; position: static; left: 0; bottom: 0;  }
	#goto-2columns835 .application-cta{ position: static; left: 0; bottom: 0;  }
	#goto-2columns835 .application-body{ position: static; left: 0; bottom: 0; width: 300px;  }
	#goto-2columns835 .application-body img{ width: 100%; }
}
@media (min-width: 768px){
	#goto-2columns835{ font-size: 18px; padding: 0; padding-top: 35px; padding-bottom: 35px;  }
	#goto-2columns835 .application-body{ width: 400px;  }
}
@media (min-width: 992px){
	#goto-2columns835{ padding-top: 35px; padding-bottom: 35px;  }
	#goto-2columns835 .application-body{ width: 500px;  }
}
@media (min-width: 1200px){
	#goto-2columns835{ padding-top: 35px; padding-bottom: 35px;  }
	#goto-2columns835 .application-body{ width: 835px;  }
}
/*@media (min-width: 1440px) {
	#goto-2columns835{ padding-top: 70px; padding-bottom: 100px;  }
	#goto-2columns835 .application-body{ width: 850px;  }
}*/