/*
	TEMPLATE TRAVEL AGENCY - DIGITALLAOS - Framework grille
	Reduit et adapte a l'architecture reelle du site (v1.0.5) : seules les
	classes effectivement utilisees dans les squelettes sont conservees.
	2 paliers responsive seulement (medium/mobile), pas 5 : les squelettes
	ne referencent jamais -wide/-normal/-narrower, uniquement -medium et
	-mobile (col-N nu = defaut, .col-N-medium = tablette <=980px,
	.col-N-mobile = mobile <=736px, cf. sommaire-intro.html, article-circuits.html...).
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}
	.invisible { position:absolute; clip: rect(0, 0, 0, 0); overflow:hidden; margin:0; padding:0; width:1px; height:1px; white-space:nowrap; border: 0;}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1440px;
	}

		.container.medium {
			width: 1050px;
		}

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

			.container {
				width: 1200px;
			}

				.container.medium {
					width: 900px;
				}

		}

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

			.container {
				width: 960px;
			}

				.container.medium {
					width: 735px;
				}

		}

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

			.container {
				width: 95%;
			}

				.container.medium {
					width: 71.25%;
				}

		}

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

			.container {
				width: 95%;
			}

				.container.medium {
					width: 95%;
				}

		}

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

			.container {
				width: 100%;
			}

				.container.medium {
					width: 100%;
				}

		}

/* Row / colonnes */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-0 {
			margin-top: 0px;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

	/* Palier par defaut (desktop), aucune media query : col-1 a col-12 */
	.row > .col-1  { width: 8.33333%; }
	.row > .col-2  { width: 16.66667%; }
	.row > .col-3  { width: 25%; }
	.row > .col-4  { width: 33.33333%; }
	.row > .col-5  { width: 41.66667%; }
	.row > .col-6  { width: 50%; }
	.row > .col-7  { width: 58.33333%; }
	.row > .col-8  { width: 66.66667%; }
	.row > .col-9  { width: 75%; }
	.row > .col-10 { width: 83.33333%; }
	.row > .col-11 { width: 91.66667%; }
	.row > .col-12 { width: 100%; }

	/* Palier tablette : <=980px, meme seuil que le reste du site
	   (sidebars/menus qui basculent en colonne, cf. css/travel-laos.css) */
	@media screen and (max-width: 980px) {

		.row > .col-1-medium  { width: 8.33333%; }
		.row > .col-2-medium  { width: 16.66667%; }
		.row > .col-3-medium  { width: 25%; }
		.row > .col-4-medium  { width: 33.33333%; }
		.row > .col-5-medium  { width: 41.66667%; }
		.row > .col-6-medium  { width: 50%; }
		.row > .col-7-medium  { width: 58.33333%; }
		.row > .col-8-medium  { width: 66.66667%; }
		.row > .col-9-medium  { width: 75%; }
		.row > .col-10-medium { width: 83.33333%; }
		.row > .col-11-medium { width: 91.66667%; }
		.row > .col-12-medium { width: 100%; }

	}

	/* Palier mobile : <=736px, meme seuil que le reste du site */
	@media screen and (max-width: 736px) {

		.row > .col-1-mobile  { width: 8.33333%; }
		.row > .col-2-mobile  { width: 16.66667%; }
		.row > .col-3-mobile  { width: 25%; }
		.row > .col-4-mobile  { width: 33.33333%; }
		.row > .col-5-mobile  { width: 41.66667%; }
		.row > .col-6-mobile  { width: 50%; }
		.row > .col-7-mobile  { width: 58.33333%; }
		.row > .col-8-mobile  { width: 66.66667%; }
		.row > .col-9-mobile  { width: 75%; }
		.row > .col-10-mobile { width: 83.33333%; }
		.row > .col-11-mobile { width: 91.66667%; }
		.row > .col-12-mobile { width: 100%; }

	}

/* Section/Article — utilise par content/401.html et content/404.html */

	section.special, article.special {
		text-align: center;
	}

	header.major {
		padding-bottom: 2em;
	}

	header.special {
		margin-bottom: 5em;
		padding-top: 7em;
		position: relative;
		text-align: center;
	}

		header.special:before, header.special:after {
			border-bottom: solid 1.5px;
			border-top: solid 1.5px;
			content: '';
			height: 7px;
			opacity: 0.1;
			position: absolute;
			top: 1.75em;
			width: 43%;
		}

		header.special:before {
			left: 0;
		}

		header.special:after {
			right: 0;
		}

		header.special h2 {
			margin-bottom: 0;
		}

		header.special h2 + p {
			margin-bottom: 0;
			padding-top: 1.5em;
		}

		header.special .icon {
			cursor: default;
			height: 7em;
			left: 0;
			position: absolute;
			text-align: center;
			top: 1em;
			width: 100%;
		}

			header.special .icon:before {
				font-size: 3.5em;
				opacity: 0.35;
			}

	footer > :last-child {
		margin-bottom: 0;
	}

	footer.major {
		padding-top: 3em;
	}