@charset "UTF-8";

/**
 * 	Ideal resolution: 1280 * 960 pixels
 */

html, body {
	background-color: #FFFFCF;  /* crème clair:FFFFCF */
	border: 0px solid transparent;
	font-size: 1.0em; /* 1.em Ideal: 16px */
	margin: 0px 0px 0px 0px;
	min-height: 100%;
	padding: 0px 0px 0px 0px;
	width: 100%;
	font-family:Arial, Helvetica, sans-serif;
}

a{
	color:#326b8f;  /* bleu gris foncé */
	text-decoration:none;
	}
	
a:hover {
	color:#4ea5dc;  /* bleu clair */
	}

/*
a:visited{
	color:#884444;  /* violet */
	}
*/
	
img, object, embed, canvas, video, audio, picture {
	max-width: 100%;
	height: auto;
}

.layout-main {
	height: 100%;
	margin: 0px auto 0px auto;
	min-height: 100%;
	width: 80%; /* Ideal: 1024px -> 1024 / 1280 */
}

.header {
    width: 100%;
    height: 224px;
    position: relative;
    z-index: 1000;
    background: url("bannieremontagne6.jpg") no-repeat scroll 0% 0% #ffffff;
    /* background: url("fond-header.jpg") no-repeat scroll 0% 0% #ffffff; */
	background-size: cover;
	border-bottom:5px solid #58aadb;
}

.header-contenu {
    width: 80%;
	margin:0px auto;   
}

.headercn {
    width: 100%;
    height: 224px;
    position: relative;
    z-index: 1000;
    background: url("bannieremontagne6cn.jpg") no-repeat scroll 0% 0% #ffffff;
    /* background: url("fond-header.jpg") no-repeat scroll 0% 0% #ffffff; */
	background-size: cover;
	border-bottom:5px solid #58aadb;
}

.headercn-contenu {
    width: 80%;
	margin:0px auto;   
}

.logo {
    padding-left:0;
    padding-top:1%;
	float:left;
	width:60%;
}

.telephone {
    padding-left:2%;
    padding-top:0.5%;
	float:right;
	width:25%;
}

.chine {
    padding-left:2%;
    padding-top:1%;
	float:right;
	width:4%;
}

ul{
   padding:0;
}

.prefooter {
    width: 100%;
	height: 64px;	
	text-align: center;
	color: #FFF;
	line-height: 64px;
	background-color: #418cc9;  /*  bleu du logo 418cc9,  bleu MK Design 58AADB */
	font-size: 20px;
	/* font-weight: bold; */
}

.footer {
    width: 100%;
    height: 224px;
    position: relative;
    z-index: 1000;
    background: url("image bloc.jpg") no-repeat scroll 0% 0% #ffffff; */
    /* background: url("fond-header.jpg") no-repeat scroll 0% 0% #ffffff; */
}

.footer-contenu{
    width: 80%;
	margin:0px auto;
   
}
.footer-title{
	font-size:1em;
	color:#4ea5dc;
	padding-top:5%;
	font-weight:bold;
}

.footer p {
	font-size: 1em;
	line-height: 1em;
	margin: 10px 0;
}
.footer a {
	color:#000000;
}

.footer a:hover {
	color:#4ea5dc;
}

.footer img{
    padding:10px 0;
}	

.main {
	height: 100%;
	min-height: 100%;
}

.layout-menu, .layout-content, .layout-adv {
	display: inline-block;
	height: 100%;
	/* min-height: 100%;*/
	vertical-align: top;
}

.layout-menu {
	color: #FFFFCF;
	background-color: #FFFFCF;/* 5858FA bleu */
	width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}

.layout-content {
	color: #000000; /* noir */
	background-color: #FFFFCF;
	width: 58.203125%; /* Ideal: 596px -> 596 / 1024 */
}

.layout-content ul{
   padding-left:20px;
}

.layout-adv {
	color: #000000;
	background-color: #FFFFCF;
	width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}

.menu, .content, .adv {
	padding: 5px 5px 5px 5px;
}

.menu h1 {
	font-size: 1.5em; /* Ideal: 24px */
}

.menu ach1 {
	font-size: 1.5em; /* Ideal: 24px */
}

.menu li {
	list-style: none;
}

.menu li a {
	color: #ffffff; /* 000000 noir FFFFCF crème, 0D0DD9 bleu  FFFFFF blanc */
}

.content .content-item {
	border-top: 1px solid #36393D; /* ligne de séparation */
	clear: both;
	margin: 0px auto 0px auto;
	padding: 3px 0px 15px 0px;
	width: 90.939597315436241610738255033557%; /* Ideal: 542px -> 542 / 596 */
}

.content .content-item:first-child {
	border: 0px solid transparent;
}

.content .content-item p {
	font-family: calibri, arial;
}

.content .content-item li {
	font-family: calibri, arial;
}


strong{
	font-family: Arial, verdana;
	font-size: 2em; /* Ideal: 24px */
	color:#418cc9;  /* bleu du logo 418cc9,   bleu clair MK Design  4ea5dc */
}

h1{
	font-family: Arial, verdana;
	font-size: 2em; /* Ideal: 24px */
	color:#418cc9;  /* bleu du logo 418cc9,   bleu clair MK Design  4ea5dc */
}

h2{
	font-family: Arial, verdana;
	font-size: 1.5em; /* Ideal: 24px */
	color:#418cc9;  /* bleu du logo 418cc9,   bleu clair MK Design  4ea5dc */
}

ach2{
	text-align:center;
	font-size: 26px; /* Ideal: 24px */
	color:#418cc9;  /* bleu du logo 418cc9, bleu foncé gris */
}

ach1{
	font-family: Arial, verdana;
	font-size: 1.5em; /* Ideal: 24px */
	color:#418cc9;  /* bleu du logo 418cc9,   bleu clair MK Design  4ea5dc */
}

.content .content-item strong {
	font-size: 2em; 
}

.content .content-item p.description {
	font-size: 0.750em; /* Ideal: 12px */
	font-style: italic;
}

.bloc-contenu {
	font-size:16px;;	
	padding-top:10px;
}
.bloc-contenu-g .bloc-contenu-d{
	width:100%;	
}

.bloc-contenu-g img{
	margin-bottom:15px;	
}

.bloc-contenu-d img{
	margin-bottom:15px;	
}

.bloc-contenu-g{
	margin-right:2%;
	width:32%;
	text-align: left;
	float:left;
	margin-bottom:25px;	
}

.bloc-contenu-d{
	float:right;
	width:32%;
	text-align: left;
	margin-bottom:25px;	
}

.clear{clear:both}

.bloc-footer-g{
	margin-right:2%;
	width:23%;
	text-align: left;
	float:left;
	margin-bottom:25px;	
}

.bloc-footer-d{
	margin-right:2%;
	width:23%;
	text-align: left;
	float:left;
	margin-bottom:25px;	
}

.content .content-item div.article {
	text-align: left;
}
.content .content-item img.article-image {
	float: left;
	padding: 0px 25px 25px 0px;
	width: 16.107382550335570469798657718121%; /* Ideal: 96px -> 96 / 596 */
}

.content .content-item img.article-petiteimage {
	float: left;
	padding: 25px 27px 25px 28px;     /* top, right, bottom, left */
	width: 18%; /* Ideal: 96px -> 96 / 596 */
}

.content .content-item img.article-moyenneimage {
	float: left;
	padding: 0px 25px 25px 0px;
	width: 30%; /* Ideal: 96px -> 96 / 596 */
}

.content .content-item img.article-grandeimage {
	float: left;
	padding: 0px 25px 25px 0px;
	width: 50%; /* Ideal: 96px -> 96 / 596 */
}

.content .content-item img.article-assezgrandeimage {
	float: left;
	padding: 0px 25px 25px 0px;
	width: 70%; /* Ideal: 96px -> 96 / 596 */
}

.content .content-item img.article-tresgrandeimage {
	float: left;
	padding: 0px 25px 25px 0px;
	width: 100%; /* Ideal: 96px -> 96 / 596 */
}

img{
	float: left;
	width: 100%; /* Ideal: 96px -> 96 / 596 */
}

.adv .adv-item {
	margin: 0px 0px 0px 18px;
	padding: 15px 0px 15px 0px;
	text-align: center;
	width: 94%; /* Ideal: 182px -> 182 / 214 */
}

.adv-item img {
	margin-bottom:15px;
}

.adv .adv-item:first-child {
	border: 0px solid transparent;
}

.adv .adv-item a {
	color: #000000;
	font-style: italic;
}

/**
 * 	Responsive design rules
 */

@media screen and (min-width: 421px) {
	.menu select {
		display: none;
	}

}

@media screen and (max-width: 1024px) {
	.layout-main {
		width: 95%;
	}
	
	.footer {
	    width: 100%;
	    background: #ffffff;
	    height:auto;
	}
}

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

	.layout-menu {
		display: block;
		height: auto; 
		min-height: auto;
		vertical-align: top;
		width: 100%;
	}
	
	.header {
		min-height:200px;
		height:100%;
	}

	.footer {
	    width: 100%;
	    background: #ffffff;
		height:auto;
	}
	
	.layout-content {
		width: 79.1015625%;
  	}

	
	.menu li {
		display: inline-block;
		margin-right: 2.6041666666666666666666666666667%; /* Ideal: 25px -> 25 / 960 */
	}

	 .menu .myButton1 {
                width:100%;
        }
		
	.prefooter{
	        display:none;
	}	
	
	.footer {
	        width: 100%;
	        background: #ffffff;
		height:260px;
	}
			
}


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

	.layout-main {
		margin: 0px 0px 0px 0px;
		width: 100%;
	}
	
	.bloc-contenu-g{
		margin-right:2%;
		width:100%;
		text-align: left;
		float:none;
		margin-bottom:30%;	
	}

	.bloc-contenu-d{
		float:none;
		width:100%;
		text-align: left;
		margin-bottom:30%;	
	}

		.bloc-footer-d{
		float:none;
		width:100%;	
	}
	.bloc-footer-g{
		float:none;
		width:100%;	
	}

	.logo {
	        padding-left:0;
	        padding-top:1%;
		float:left;
		width:80%;
	}

	.telephone {
		padding-left:2%;
	        padding-top:20%;
		float:right;
		width:50%;
	}

	.chine {
		padding-left:2%;
		padding-top:1%;
		float:right;
		width:5%;
	}

	.prefooter{
		display:none;
	}
	.footer {
		width: 100%;
		background: #ffffff;
		height:auto;
	}
}

@media screen and (max-width: 640px) {
	
	.layout-content {
		display: block;
		height: auto;
		min-height: auto;
		width: 100%;
	}
	
	.layout-adv {
		display: block;
		height: auto;
		min-height: auto;
		vertical-align: top;
		width: 100%;
	}

	.adv {
		text-align: center;
	}

	.adv .adv-item {
		display: inline-block;
	}
	
	.logo {
		padding-left:0;
		padding-top:1%;
	 	float:left;
		width:80%;
	}

	.telephone {
		padding-left:2%;
		padding-top:30%;
		float:right;
		width:60%;
	}

	.chine {
		padding-left:2%;
		padding-top:1%;
		float:right;
		width:6%;
	}
	.prefooter{
		display:none;
	}
}


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

	.layout-adv {
		display: none;
	}
	.telephone {
		padding-left:2%;
		padding-top:50%;
		float:right;
		width:80%;
	}
	.chine {
		padding-left:2%;
		padding-top:2%;
		float:right;
		width:6%;
	}
}


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

	.content .content-item img.article-image {
		display: none;
	}
}

/*
 * Hack IE6 CSS
 */

.content .content-item {
	_border-top: expression(this.previousSibling == null ? "0px solid transparent" : "1px solid #36393D");
}

.adv .adv-item {
	_border-top: expression(this.previousSibling == null ? "0px solid transparent" : "1px solid #36393D");
}


/**
 * 	Hack IE6-7 CSS
 */


.layout-main {
	*clear: both;
}


.layout-menu, .layout-content, .layout-adv {

	*display: block;
	*float: left;
}

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

	.layout-menu {
		*float: none;
	}
	
	.menu li {
		*display: block;
		*float: left;
	}
}

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

	.layout-adv {
		*float: none;
	}

	.layout-content {
		*float: none;
		*width: 100%;
	}
}

#cible1 { display:none;} #cible1:target { display:block;}
#cible2 { display:none;} #cible2:target { display:block;}
#cible3 { display:none;} #cible3:target { display:block;}
#cible4 { display:none;} #cible4:target { display:block;}
#cible5 { display:none;} #cible5:target { display:block;}
#cible6 { display:none;} #cible6:target { display:block;}
#cible7 { display:none;} #cible7:target { display:block;}
#cible8 { display:none;} #cible8:target { display:block;}
#cible9 { display:none;} #cible9:target { display:block;}
#cible10 { display:none;} #cible10:target { display:block;}
#cible11 { display:none;} #cible11:target { display:block;}
#cible12{  display:none;} #cible12:target { display:block;}
#cible13 { display:none;} #cible13:target { display:block;}
#cible14 { display:none;} #cible14:target { display:block;}
#cible15{  display:none;} #cible15:target { display:block;}
#cible16 { display:none;} #cible16:target { display:block;}
#cible17 { display:none;} #cible17:target { display:block;}
#cible18{  display:none;} #cible18:target { display:block;}
#cible19 { display:none;} #cible19:target { display:block;}
#cible20 { display:none;} #cible20:target { display:block;}
#cible21{  display:none;} #cible21:target { display:block;}
#cible22{  display:none;} #cible22:target { display:block;}
#cible23{  display:none;} #cible23:target { display:block;}

a.nonsoulign:link 
{ 
 text-decoration:none; 
 font-size: 20px; 
} 

a.nonsoulign15:link 
{ 
 text-decoration:none; 
 font-size: 15px; 
} 


.button { 
     width: 100px; 
     height: 25px; 
     line-height: 25px; 
     color: white; 
     text-decoration: none; 
     font-size: 12px; 
     font-family: helvetica, arial; 
     font-weight: bold; 
     display: block;
     text-align: center; 
     position: relative; 
  
     /* BACKGROUND GRADIENTS */
     background: #014464; 
     background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));  
  
     /* BORDER RADIUS */
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
  
     border: 1px solid #368DBE; 
     border-top: 1px solid #c3d6df; 
  
     /* TEXT SHADOW */
  
     text-shadow: 1px 1px 1px black; 
  
     /* BOX SHADOW */
     -moz-box-shadow: 0 1px 3px black; 
     -webkit-box-shadow: 0 1px 3px black; 
     box-shadow: 0 1px 3px black; 
    } 
  
    /* WHILE HOVERED */
    .button:hover { 
        background: #014464; 
        background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853)); 
    } 
  
    /* WHILE BEING CLICKED */
    .button:active { 
        -moz-box-shadow: 0 2px 6px black; 
        -webkit-box-shadow: 0 2px 6px black; 
    } 
    /* FONT GLYPH (MOSTLY FOR FUN) */
    .button:before { 
        font-family: EfonRegular; 
        content: 'Demander'; 
        color: #09232F; 
        font-size: 10px; 
        float: left; 
        margin-left: 5px; 
        margin-right: -5px; 
        text-shadow: 0 1px 0 #4190AF; 
    } 

    .buttoncn { 
     width: 100px; 
     height: 25px; 
     line-height: 25px; 
     color: white; 
     text-decoration: none; 
     font-size: 12px; 
     font-family: helvetica, arial; 
     font-weight: bold; 
     display: block; 
     text-align: center; 
     position: relative; 
  
     /* BACKGROUND GRADIENTS */
     background: #014464; 
     background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));  
  
     /* BORDER RADIUS */
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
  
     border: 1px solid #368DBE; 
     border-top: 1px solid #c3d6df; 
  
     /* TEXT SHADOW */
  
     text-shadow: 1px 1px 1px black; 
  
     /* BOX SHADOW */
     -moz-box-shadow: 0 1px 3px black; 
     -webkit-box-shadow: 0 1px 3px black; 
     box-shadow: 0 1px 3px black; 
    } 
  
    /* WHILE HOVERED */
    .buttoncn:hover { 
        background: #014464; 
        background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853)); 
    } 
  
    /* WHILE BEING CLICKED */
    .buttoncn:active { 
        -moz-box-shadow: 0 2px 6px black; 
        -webkit-box-shadow: 0 2px 6px black; 
    } 
    /* FONT GLYPH (MOSTLY FOR FUN) */
    .buttoncn:before { 
        font-family: EfonRegular; 
        content: '请求'; 
        color: #09232F; 
        font-size: 10px; 
        float: left; 
        margin-left: 5px; 
        margin-right: -5px; 
        text-shadow: 0 1px 0 #4190AF; 
    }


/* Bouton MK DESIGN */
.myButton1 {
    width:90%;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background-color:#418cc9;  /*  bleu du logo 418cc9,  bleu MK Design 4ea5dc */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:11px;
        font-weight:bold;
	padding:11px 3px 11px 8px;
	text-decoration:none;
	margin:0 0 7px;            /* top, right, bottom, left */
	text-transform:uppercase;  /* met le bouton en MAJUSCULE" */
	text-align:center;
	
}
.myButton1:hover {
	
	background-color:#dbb34d;
}
.myButton1:active {
	position:relative;
	top:1px;
	background-color:#dbb34d;
}

/* Bouton MK DESIGN       PAGE EN COURS */
.myButton11 {
    width:95%;  /* j'ai mis 95% au lieu de 90 pour que le bouton ne grossisse pas ? */
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background-color:#f5b167;  /* jaune de la prune f5b167  bleu du ciel 93b1d4  VERT de la feuille a5eb73  bleu du logo 418cc9,  bleu MK Design 4ea5dc */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:11px;
        font-weight:bold;
	padding:11px 3px 11px 8px;
	text-decoration:none;
	margin:0 0 7px;            /* top, right, bottom, left */
	text-transform:uppercase;  /* met le bouton en MAJUSCULE" */
	text-align:center;
	
}
.myButton11:hover {
	
	background-color:#dbb34d;
}
.myButton11:active {
	position:relative;
	top:1px;
	background-color:#dbb34d;
}


/* Bouton CHINOIS */
.myButton1cn {
    width:90%;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background-color:#418cc9;  /*  bleu du logo 418cc9,  bleu MK Design 4ea5dc */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:19px;
        /* font-weight:bold; */
	padding:11px 3px 11px 8px;
	text-decoration:none;
	margin:0 0 7px;            /* top, right, bottom, left */
	text-transform:uppercase;  /* met le bouton en MAJUSCULE" */
	text-align:center;
	
}
.myButton1cn:hover {
	
	background-color:#dbb34d;
}
.myButton1cn:active {
	position:relative;
	top:1px;
	background-color:#dbb34d;
}

/* Bouton CHINOIS */
.myButton11cn {
    width:90%;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
        background-color:#f5b167;  /* jaune de la prune f5b167  bleu du ciel 93b1d4  VERT de la feuille a5eb73  bleu du logo 418cc9,  bleu MK Design 4ea5dc */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:19px;
        /* font-weight:bold; */
	padding:11px 3px 11px 8px;
	text-decoration:none;
	margin:0 0 7px;            /* top, right, bottom, left */
	text-transform:uppercase;  /* met le bouton en MAJUSCULE" */
	text-align:center;
	
}
.myButton11cn:hover {
	
	background-color:#dbb34d;
}
.myButton11cn:active {
	position:relative;
	top:1px;
	background-color:#dbb34d;
}


.BoutonFaceBook {
    width:25px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background-color:#418cc9;  /*  bleu du logo 418cc9,  bleu MK Design 4ea5dc */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
        font-weight:bold;
	padding:14px 8px 14px 8px;
	text-decoration:none;
	margin:0 0 7px;            /* top, right, bottom, left */
	/* text-transform:uppercase;  met le bouton en MAJUSCULE" */
	text-align:center;
	
}
.BoutonFaceBook:hover {
	
	background-color:#dbb34d;
}
.BoutonFaceBook:active {
	position:relative;
	top:1px;
	background-color:#dbb34d;
}

div#slider { width: 80%; max-width: 1000px; } 
div#slider figure {
  position: relative; 
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}
div#slider figure img { width: 20%; height: auto; float: left; }
div#slider { width: 80%; max-width: 1000px; overflow: hidden }
@-moz-keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
@-webkit-keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
@-o-keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
@-ms-keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
@-khtml-keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}