/*
	Thème Esprits Nomades
	
	Objet : Responsivité (styles alternatifs)
	Auteur : Vincent Jockin / WebArtMedia (développement Web) © 2018
*/



/*
	********************
	Différentes largeurs
	********************
*/

/*
	Largeur inférieure à 1300 pixels
*/
	@media only screen and (max-width: 1299px)
	{
		/* Footer */
		#esprits-footer-logo {
			display: none !important;
		}
		#esprits-footer-baseline {
			right: 0px;
		}
	}

/*
	Largeur comprise entre 1080 pixels et 1280 pixels
*/
	@media only screen and (min-width: 1080px) and (max-width: 1279px)
	{
		/* Wrappers */
		.esprits-wrap {
			padding: 0px 75px;
		}
	}

/*
	Largeur comprise entre 980 pixels et 1180 pixels
*/
	@media only screen and (min-width: 980px) and (max-width: 1179px)
	{
		/* Colonnes */
		body:not(.home) #esprits-column-left {
			width: 35%;
		}
		body:not(.home) #esprits-column-right {
			width: 65%;
		}
	}

/*
	Largeur comprise entre 480 pixels et 1180 pixels
*/
	@media only screen and (min-width: 480px) and (max-width: 1179px)
	{
		/* Alphabet */
		#esprits-alphabet {
			margin-bottom: 27.5px;
		}
		#esprits-alphabet li {
			width: 7.692%;
		}
		#esprits-alphabet li:nth-child(13) {
			border-right: 1px solid #cc4646;
		}
	}

/*
	Largeur inférieure à 1080 pixels
*/
	@media only screen and (max-width: 1079px)
	{
		/* Wrappers */
		.esprits-wrap {
			padding: 0px 50px;
		}

		/* Liste des articles */
		[id^="esprits-posts-list-"] {
			width: 100%;
			padding: 0px !important;
		}
		#esprits-posts-list-right li.esprits-letter:first-child,
		#esprits-posts-list-right li.esprits-section:first-child {
			margin-top: 20px;
		}

		/* “Visages de la peinture à Toulouse” */
		body.category-19 #esprits-column-right #esprits-posts-list-right li.esprits-section:first-child {
			display: none;
		}
	}

/*
	Largeur inférieure à 1000 pixels
*/
	@media only screen and (max-width: 999px)
	{
		/* Footer */
		#esprits-footer-menu {
			width: 100%;
			text-align: center;
		}
		#esprits-footer-baseline {
			display: none !important;
		}
	}

/*
	Largeur comprise entre 860 pixels et 980 pixels
*/
	@media only screen and (min-width: 860px) and (max-width: 979px)
	{
		/* Colonnes */
		body:not(.home) #esprits-column-left {
			width: 40%;
		}
		body:not(.home) #esprits-column-right {
			width: 60%;
		}
	}

/*
	Largeur comprise entre 760 pixels et 980 pixels
*/
	@media only screen and (min-width: 760px) and (max-width: 979px)
	{
		/* Articles connexes */
		#esprits-related-posts {
			width: 100%;
			max-width: 100%;
			padding: 0px;
		}
	}

/*
	Largeur comprise entre 760 pixels et 860 pixels
*/
	@media only screen and (min-width: 760px) and (max-width: 859px)
	{
		/* Colonnes */
		body:not(.home) #esprits-column-left {
			width: 45%;
		}
		body:not(.home) #esprits-column-right {
			width: 55%;
		}
	}

/*
	Largeur supérieure à 800 pixels
*/
	@media only screen and (min-width: 800px)
	{
		/* Logo & Baseline */
		.esprits-branding-logo {
			line-height: 60px;
		}
		.esprits-branding-logo > span::before,
		.esprits-branding-logo > span::after {
			content: '';
			display: block;
		}
		.esprits-branding-baseline {
			line-height: 40px;
			letter-spacing: 2.5px;
			margin-left: 1.5px;
		}
		.esprits-branding-baseline > span > br {
			display: none;
		}

		/* Logo */
		#esprits-menu .esprits-menu-logo a {
			margin-top: -2px;
		}
	}

/*
	Largeur inférieure à 800 pixels
*/
	@media only screen and (max-width: 799px)
	{
		/* Logo & Baseline */
		.esprits-branding-logo {
			line-height: 80px;
		}
		.esprits-branding-logo > span::before,
		.esprits-branding-logo > span::after {
			content: none;
			display: none;
		}
		.esprits-branding-baseline {
			line-height: 30px;
		}
		.esprits-branding-baseline > span {
			display: block;
		}
		.esprits-branding-baseline > span > br {
			display: block;
		}
		.esprits-branding-baseline > span > span {
			display: none;
		}

		/* Logo */
		#esprits-menu .esprits-menu-logo a {
			margin-top: -1px;
		}

		/* Menu */
		#esprits-menu .menu {
			margin-right: -10px;
		}
		#esprits-menu .menu li a {
			margin: 0px 10px;
		}
		#esprits-menu .menu li a:hover::before,
		#esprits-menu .menu li a:focus::before,
		#esprits-menu .menu li a.esprits-current-item::before,
		#esprits-menu .menu li.current-menu-item a::before {
			left: -11px;
		}
		#esprits-menu .menu li a:hover::after,
		#esprits-menu .menu li a:focus::after,
		#esprits-menu .menu li a.esprits-current-item::after,
		#esprits-menu .menu li.current-menu-item a::after {
			margin-left: 10px;
		}
	}

/*
	Largeur inférieure à 760 pixels
*/
	@media only screen and (max-width: 759px)
	{
		/* Citation */
		#esprits-home-quote {
			padding-left: 54px;
		}
		#esprits-home-quote::before {
			width: 43px;
			height: 32px;
		}

		/* Bon Voyage ! */
		#esprits-home-goodtrip {
			text-align: center;
		}

		/* Logo */
		#esprits-menu .esprits-menu-logo {
			float: initial;
			width: 100%;
			margin: 20px 0px 40px 0px;
			text-align: center;
		}
		#esprits-menu .esprits-menu-logo a {
			margin-top: 0px;
			white-space: nowrap;
		}

		/* Menu */
		#esprits-menu-content > div:nth-child(2) {
			position: absolute;
			display: inline-block;
			left: 50%;
			bottom: 0px;
			transform: translateX(-50%);
		}
		#esprits-menu .menu {
			min-width: 360px;
			margin-right: 0px;
			padding: 0px 0px 20px 0px;
			white-space: nowrap !important;
		}

		/* Colonnes */
		body.home #esprits-column-left,
		body.home #esprits-column-right,
		body:not(.home) #esprits-column-left,
		body:not(.home) #esprits-column-right {
			width: 100%;
			padding: 0px !important;
		}
		body.home #esprits-column-left,
		body:not(.home) #esprits-column-left {
			float: initial;
			height: 0px;
			margin-bottom: 0px;
			overflow: hidden;
			transition: all .5s;
		}

		#esprits-column-button {
			display: block;
		}

		/* Boutons */
		#esprits-button-search {
			top: 140px;
		}
		#esprits-button-scroll-to-top {
			top: 175px;
		}
		body.page #esprits-button-scroll-to-top,
		body.search #esprits-button-scroll-to-top {
			top: 140px;
		}

		/* Liste des catégories */
		body.home #esprits-menu-list,
		body:not(.home) #esprits-menu-list {
			position: initial;
		}

		/* “Retour“ (page précédente) */
		#esprits-menu-previous-page {
			display: none;
		}
	}

/*
	Largeur comprise entre 480 pixels et 800 pixels
*/
	@media only screen and (min-width: 480px) and (max-width: 799px)
	{
		/* Logo & Baseline */
		.esprits-branding-baseline {
			letter-spacing: 8.6px;
		}
		.esprits-branding-baseline > span {
			margin-left: 8.6px;
		}

		/* Logo */
		#esprits-menu .esprits-menu-logo a {
			font-size: 20px;
		}

		/* Menu */
		#esprits-menu .menu li a {
			font-size: 12px;
			letter-spacing: 1px;
		}
	}

/*
	Largeur comprise entre 560 pixels et 760 pixels
*/
	@media only screen and (min-width: 560px) and (max-width: 759px)
	{
		/* Liste des catégories */
		#esprits-menu-list > li:nth-child(odd) {
			float: left;
			width: 50%;
		}
		#esprits-menu-list > li:nth-child(even) {
			float: right;
			width: 50%;
		}
	}

/*
	Largeur inférieure à 640 pixels
*/
	@media only screen and (max-width: 639px)
	{
		/* Articles connexes */
		#esprits-related-posts {
			width: 100%;
			max-width: 100%;
			padding: 0px;
		}
	}

/*
	Largeur inférieure à 600 pixels
*/
	@media only screen and (max-width: 599px)
	{
		/* Footer */
		#esprits-footer-wrapper {
			height: 40px;
		}
		#esprits-footer-menu span {
			display: none;
		}
		#esprits-footer-menu br {
			display: block;
		}
	}

/*
	Largeur inférieure à 480 pixels
*/
	@media only screen and (max-width: 479px)
	{
		/* Logo & Baseline */
		.esprits-branding-logo {
			line-height: 60px;
			font-size: 36px !important;
		}
		.esprits-branding-baseline {
			line-height: 20px;
			font-size: 16px !important;
			letter-spacing: 7.6px;
		}
		.esprits-branding-baseline > span {
			margin-left: 7.6px;
		}

		/* Logo */
		#esprits-menu .esprits-menu-logo a {
			font-size: 18px;
		}

		/* Menu */
		#esprits-menu .menu {
			min-width: 320px;
		}
		#esprits-menu .menu li a {
			font-size: 11px;
			letter-spacing: .5px;
		}

		/* Alphabet */
		#esprits-alphabet {
			margin-bottom: 22.5px;
		}
		#esprits-alphabet li {
			width: 11.11%;
		}
		#esprits-alphabet li:nth-child(9),
		#esprits-alphabet li:nth-child(18) {
			border-right: 1px solid #cc4646;
		}
	}