/*/////////////////////////////*/
/* Smartphones et Petits écrans*/
/*/////////////////////////////*/

/* --------------------------- GLOBAL --------------------------- */
@font-face {
    font-family: 'comfortaaregular';
    src: url('polices/comfortaa-regular-webfont.eot');
    src: url('polices/comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/comfortaa-regular-webfont.woff2') format('woff2'),
         url('polices/comfortaa-regular-webfont.woff') format('woff'),
         url('polices/comfortaa-regular-webfont.ttf') format('truetype'),
         url('polices/comfortaa-regular-webfont.svg#comfortaaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'comfortaalight';
    src: url('polices/comfortaa-light-webfont.eot');
    src: url('polices/comfortaa-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/comfortaa-light-webfont.woff2') format('woff2'),
         url('polices/comfortaa-light-webfont.woff') format('woff'),
         url('polices/comfortaa-light-webfont.ttf') format('truetype'),
         url('polices/comfortaa-light-webfont.svg#comfortaalight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'comfortaabold';
    src: url('polices/comfortaa-bold-webfont.eot');
    src: url('polices/comfortaa-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/comfortaa-bold-webfont.woff2') format('woff2'),
         url('polices/comfortaa-bold-webfont.woff') format('woff'),
         url('polices/comfortaa-bold-webfont.ttf') format('truetype'),
         url('polices/comfortaa-bold-webfont.svg#comfortaabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

::-moz-selection { /* Code for Firefox */
    color: black;
    background: #b2df2d;
}

::selection {
    color: black;
    background: #b2df2d;
}

body {
	background-color: #cfd0d2;
	font: 14px/20px "ComfortaaRegular", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	text-align: center;
	width: auto;
}

img,table,td,blockquote,textarea,input,video {
	max-width: 100%;
}

img {
	height: auto;
}

textarea,table,td,th {
	-webkit-hyphens: auto; /* césure propre */
	-moz-hyphens: auto;
	hyphens: auto;
	word-wrap: break-word; /* passage à la ligne forcé */
}

a, a:visited{
	color: #24a52a;
}

a:hover, a:active{
	color: #abda1f;
}

.container {
    margin: 0px auto;
    max-width: 1000px;
    position: relative;
}

.inline_b{
	display: none;
}

.only_mobile{
	display: block;
}

.only_screen{
	display: none;
}

.shadow {
	-webkit-box-shadow:0px 0px 20px 0px rgba(150, 150, 150, 100); 
	-moz-box-shadow:0px 0px 20px 0px rgba(150, 150, 150, 100); 
	-o-box-shadow:0px 0px 20px 0px rgba(150, 150, 150, 100); 
	-ms-box-shadow:0px 0px 20px 0px rgba(150, 150, 150, 100); 
	box-shadow:0px 0px 20px 0px rgba(150, 150, 150, 100);
}
.ombre {
	-webkit-box-shadow:0px 3px 0px 0px rgba(150, 150, 150, 100); 
	-moz-box-shadow:0px 3px 0px 0px rgba(150, 150, 150, 100); 
	-o-box-shadow:0px 3px 0px 0px rgba(150, 150, 150, 100); 
	-ms-box-shadow:0px 3px 0px 0px rgba(150, 150, 150, 100); 
	box-shadow:0px 3px 0px 0px rgba(150, 150, 150, 100);
}

.bold{
	font-weight: bold;
}

/* --------------------------- HEADER --------------------------- */
#header{
	background-color: #f5f5f5;
}

#header-inner{
	padding-top: 20px;
	padding-bottom: 30px;
}

.title{
	vertical-align: top;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	display: inline-block;
}

h1{
	font-weight: bold;
	font-size: 210%;
	line-height: 100%;
	text-shadow:0px 0px 10px #444444, 0px 0px 3px #000000;
	color: #ffffff;
	letter-spacing: 1px;
}

h2{
	font-size: 150%;
	line-height: 100%;
	text-shadow:0px 0px 10px #444444, 0px 0px 3px #000000;
	color: #ffffff;
	letter-spacing: 1px;
}

h3{
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 140%;
	line-height: 100%;
	text-shadow:0px 0px 10px #444444, 0px 0px 3px #000000;
	color: #ffffff;
	letter-spacing: 1px;
}
h3 img{
	vertical-align: middle;
	height: 28px;
}

/* --------------------------- NAV --------------------------- */
#nav {
    z-index: 99;
	position: relative;
	-webkit-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
	-moz-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
	-o-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
	-ms-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
	box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100);
}

#nav ul {
   margin: 0px auto;
   width: 100%;
   background-color: #66c126;
}
#nav li {
    display: block;
}

#nav_home { width: 100%; }
#nav_chambres { width: 100%; }
#nav_espaceconvivial { width: 100%; }
#nav_jardinhiver { width: 100%; }
#nav_exterieurs { width: 100%; }
#nav_acces { width: 100%; }
#nav_contact { width: 100%; }

#nav a {
    display: block;
	color: #fff;
	letter-spacing: 1px;
	font-size: 110%;
	line-height: 35px;
    text-align: center;
    text-decoration: none;
	border-top: 1px solid #abda1f;
	border-bottom: 1px solid #24a52a;
    text-shadow: 0px 0px 10px #000, 0px 1px 1px #000;
}

#nav a.current{
	background-color: #b2df2d;
	border-top: 1px solid #d6fc58;
	border-bottom: 1px solid #8dd834;
}

#nav a:focus, #nav a:hover  {
    text-decoration: none;
	background-color: #b2df2d;
	border-top: 1px solid #d6fc58;
	border-bottom: 1px solid #8dd834;
}
/* --------------------------- BACKGROUND IMAGE --------------------------- */
#header_img img{
	display: none;
}
	
/* --------------------------- CONTENT --------------------------- */

/* Matrices pour les box: 

		Avec Titre: 
			<section class="content shadow">
				<h4 class="content_title_A ombre"></h4>
			</section>
			
		Sans Titre:
			<section class="content shadow content_sans_titre">
			</section>
		
		Texte avec image sur la droite:
				<div id="content_#" class="content_text"> PUIS DEFINIR width ET min-height POUR CET ID
				</div>
				<div class="content_img">
					<img src="images/" alt="" class="ombre">
				</div>
				
		Image centrée:
				<div class="content_img_centre">
					<img src="images/" alt="" class="ombre" >
				</div>
		
		Texte centré:
				<div class="content_texte_centre">
				</div>
				
		Texte justifié:
				<div class="content_text content_text_sans_img">
				</div>
*/
	
.content{
	display: block;
	background-color: #f0f0f0;
	max-width: 1000px;
	margin: 0px auto 40px auto;
	border-bottom: 5px solid #66c126;
	letter-spacing: 1px;
	padding-top: 75px;
	padding-bottom: 20px;
	position: relative;
	text-align: center;
}
	
.content_sans_titre{
	padding-top: 20px;
}

.content_title_A, .content_title_B {
	line-height: 35px;
	font-weight: normal;
	color: #fff;
	font-size: 120%;
	text-shadow: 0px 0px 10px #000, 0px 1px 1px #000;
	position: absolute;
	top: 20px;
	left: -10px;
	padding: 0px 10px 0px 20px;
}
 /* #66c126   #8cd029   #b2df2d */
.content_title_A { background-color: #66c126; border-top: 1px solid #abda1f; border-bottom: 1px solid #24a52a;}
.content_title_B { background-color: #b2df2d; border-top: 1px solid #d6fc58; border-bottom: 1px solid #8dd834;}

.content_text{
	display: inline-block;
	text-align: justify;
	margin: 0% 2% 20px 2%;
	text-indent: 30px;
}

.content_text_sans_img {
	margin: 0% 2% 0px 2%;
}

.content_img{
	display: inline;
	text-align: center;
	width: auto;
	margin: 0px;
}

.content_img img{
	max-width: 100%;
}

.content_sans_titre_img {
	display: inline;
	text-align: center;
	width: auto;
	margin: 0px;
}

.content_texte_centre{
	text-align: center;
	width: auto;
	margin: 0% 2% 0% 2%;
	/*margin: 0px;*/
}

.content_img_centre{
	text-align: center;
	width: auto;
	/*margin: 0% 2% 0% 2%;*/
	margin: 0px;
}

.content_center {
	text-align: center;
	margin: 0px;
}

#content_1 { width: auto; min-height: auto;}
#content_2 { width: auto; min-height: auto;}
#content_3 { width: auto; min-height: auto;}
#content_4 { width: auto; min-height: auto;}
#content_5 { width: auto; min-height: auto;}
#content_6 { width: auto; min-height: auto;}
#content_7 { width: auto; min-height: auto;}
#content_8 { width: auto; min-height: auto;}

/* --------------------------- FOOTER --------------------------- */
#footer {
	font-size: 65%;
	letter-spacing: 0.5px;
	background-color: #f0f0f0;
}

.footer_gradient {
	display: none;
}

.footer_content{
	padding-bottom: 10px;
	padding-top: 10px;
}

.footer_content img{
	margin: 0px 5px;
}

/* --------------------------- FORMULAIRE / CONTACT --------------------------- */
input, textarea{
	font: 16px/24px Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	padding: 6px 1%;
	margin: 5px;
	width: 95%;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
	border: 1px solid #DDD;
	display: inline-block;
	
}

textarea{
	height: 250px;
}

form{
	text-align: center;
	margin-bottom: 20px;
}

button{
	font: 14px/20px "ComfortaaRegular", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	color: #ffffff;
	background-color: #66C126;
	cursor: pointer;
	margin-top: 10px;
	padding: 0px 10px;
	letter-spacing: 1px;
	line-height: 25px;
	text-align: center;
	border-top: 2px solid #ABDA1F;
	border-left: 2px solid #ABDA1F;
	border-bottom: 2px solid #24A52A;
	border-right: 2px solid #24A52A;
	text-shadow: 0px 0px 10px #000, 0px 1px 1px #000;
}

form span{
	font-size: 65%;
}

.contact{
	text-align: center;
	color: #909090;
	font: 20px/20px "ComfortaaRegular", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
	margin: 10px 0px;
}
.contact a{
	color: #66c126;
}
.contact img, form img{
	vertical-align: middle;
}

.contact_img{
	margin: 10px 15px 10px 0px;
}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////// Tablettes ////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 700px) {
	/* --------------------------- GLOBAL --------------------------- */
	body{
		background-image: url("images/background.jpg");
		background-repeat: no-repeat;
		background-position: center top;
	}
	
	.inline_b{
		display: inline-block;
	}
	
	.only_mobile{
		display: none;
	}

	.only_screen{
		display: block;
	}
	
	.ombre {
		-webkit-box-shadow:3px 3px 0px 0px rgba(150, 150, 150, 100); 
		-moz-box-shadow:3px 3px 0px 0px rgba(150, 150, 150, 100); 
		-o-box-shadow:3px 3px 0px 0px rgba(150, 150, 150, 100); 
		-ms-box-shadow:3px 3px 0px 0px rgba(150, 150, 150, 100); 
		box-shadow:3px 3px 0px 0px rgba(150, 150, 150, 100);
	}

	 	
	/* --------------------------- HEADER --------------------------- */
	.title{
		vertical-align: middle;
	}
	
	#header{
		background-color: transparent;
	}
	
	#decor_g img, #decor_d img{
		height: 60px;
		vertical-align: middle;
	}
	
	/* --------------------------- NAV --------------------------- */
	#nav {
		max-width: 40%;
		margin: 0px;
		left: 10px;
	}
	
	/* --------------------------- BACKGROUND IMAGE --------------------------- */
	#header_img img{
		-webkit-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
		-moz-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
		-o-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
		-ms-box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100); 
		box-shadow:0px 0px 20px 0px rgba(80, 80, 80, 100);
		position: relative;
		max-width: 100%;
		margin: -236px auto 0px auto;
		display: inline;
	}
	
	/* --------------------------- CONTENT --------------------------- */
	
	/* --------------------------- FOOTER --------------------------- */
	.footer_gradient {
		display: block;
		height: 30px;
		background: #cfd0d2;
		background: -moz-linear-gradient(top,  #cfd0d2 0%, #f0f0f0 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfd0d2), color-stop(100%,#f0f0f0));
		background: -webkit-linear-gradient(top,  #cfd0d2 0%,#f0f0f0 100%);
		background: -o-linear-gradient(top,  #cfd0d2 0%,#f0f0f0 100%);
		background: -ms-linear-gradient(top,  #cfd0d2 0%,#f0f0f0 100%);
		background: linear-gradient(to bottom,  #cfd0d2 0%,#f0f0f0 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd0d2', endColorstr='#f0f0f0',GradientType=0 );
	}
	
	/* --------------------------- FORMULAIRE / CONTACT --------------------------- */
	input, textarea{
		width: 80%;
	}
	
	button:hover {
		background-color: #B2DF2D;
		border-top: 2px solid #D6FC58;
		border-left: 2px solid #D6FC58;
		border-bottom: 2px solid #8DD834;
		border-right: 2px solid #8DD834;
	}
	
	.contact{
		text-align: center;
		color: #909090;
		font: 20px/20px "ComfortaaRegular", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
		margin: 10px 0px;
	}
	.contact a{
		color: #66c126;
	}
	.contact img{
		vertical-align: middle;
	}

	.contact_img{
		margin: 10px 15px 10px 0px;
	}
	
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////// Ordinateur //////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 1050px) {
	/* --------------------------- GLOBAL --------------------------- */
	.inline_b{
		display: inline-block;
	}
	
	/* --------------------------- HEADER --------------------------- */
	#header-inner{
		padding-top: 40px;
		padding-bottom: 40px;
	}


	h1{
		font-size: 250%;
	}

	h2{
		font-size: 200%;
	}

	h3{
		padding-top: 30px;
		padding-bottom: 20px;
		font-size: 170%;
	}
	h3 img{
		height: 38px;
	}
	
	#decor_g img, #decor_d img{
		height: 100%;
		vertical-align: middle;
	}
	
	/* --------------------------- NAV --------------------------- */
	#nav {
		max-width: 1000px;
		margin: 0px auto;
		left: 0px;
	}
	
	#nav li {
		display: inline-block;
	}
	
	#nav_home { width: 9.4%; }
	#nav_chambres { width: 13.2%; }
	#nav_espaceconvivial { width: 21.2%; }
	#nav_jardinhiver { width: 17.2%; }
	#nav_exterieurs { width: 13.3%; }
	#nav_acces { width: 15.6%; }
	#nav_contact { width: 10.1%; }
	
	#nav a.current{
		background-color: #8cd029;
		border-top: 1px solid #c0eb3b;
		border-bottom: 1px solid #58be2f;
	}

	/* Obligé de répéter le code pour déclarer :hover en dernier de manière à ce qu'il fonctionne sur un lien .current */
	#nav a:focus, #nav a:hover  {
		text-decoration: none;
		background-color: #b2df2d;
		border-top: 1px solid #d6fc58;
		border-bottom: 1px solid #8dd834;
	}
	
	/* --------------------------- BACKGROUND IMAGE --------------------------- */
	#header_img img{
		margin: -20px auto 0px auto;
	}
		
	/* --------------------------- CONTENT --------------------------- */
	.content{
		margin: 0px auto 30px auto;
		text-align: left;
	}
	
	.sans_titre{
		padding-top: 20px;
	}
	
	.content_title_A, .content_title_B {
		padding: 0px 30px 0px 40px;
	}

	.content_title_A { background-color: #66c126; border-top: 1px solid #abda1f; border-bottom: 1px solid #24a52a;}
	.content_title_B { background-color: #b2df2d; border-top: 1px solid #d6fc58; border-bottom: 1px solid #8dd834;}

	.content_text{
		margin: 0% 0% 20px 3%;
		text-indent: 50px;
	}
	
	.content_text_sans_img {
		margin: 0% 3% 0px 3%;
	}
	
	.content_img{
		display: inline-block;
		text-align: right;
		margin: 0px;
		position: absolute;
		top: 15px;
		right: -10px;
	}
	
	.content_sans_titre_img {
		display: inline-block;
		text-align: right;
		margin: 0px;
		position: absolute;
		top: 25px;
		right: -10px;
	}
	
	.content_img img{
		max-width: 100%;
	}
	
	.content_texte_centre{
		margin: 0px;
	}
	
	.content_center {
		margin: 0px;
		width: 100%;
	}
	
	#content_1 { width: 54%; min-height: 195px;}
	#content_2 { width: 52%; min-height: 125px;}
	#content_3 { width: 48%; min-height: 135px;}
	#content_4 { width: 57%; min-height: 155px;}
	#content_5 { width: 56%; min-height: 175px;}
	#content_6 { width: 49%; min-height: 165px;}
	#content_7 { width: 55%; min-height: 165px;}
	#content_8 { width: 50%; min-height: 270px;}
	
	/* --------------------------- FOOTER --------------------------- */
	
	/* --------------------------- FORMULAIRE / CONTACT --------------------------- */
	input, textarea{
		width: 60%;
	}
}

/* Réduire de façon harmonieuse toutes les tailles de polices en orientation paysage */
@media (max-device-width:800px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}