/* awb project
* awb pensee, coller 
*/

/*html reset*/
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, dl, dt, dd, ol, nav ul, nav 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 , main{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* balise sectionnante */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}

*b{
box-sizing: border-box;
}

section {
	margin: 0 auto;
	padding: 0px 0px;
	text-align: center;
	height:auto;
	width:100%;
}

abbr[title] {
  border-bottom: 1px dotted;
} /*pour les abbreviation*/
abbr[title]:after {
    content: " (" attr(title) ")";
  }


abbr[title],
abbr[data-original-title/*toute les abbr qui ce attribut*/] {
  cursor: help;
  border-bottom: 1px dotted #999999;
}

address {
  display: block;
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.428571429;
}

blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.25;
}


blockquote p:last-child {
  margin-bottom: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
}


button,
input {
  line-height: normal;
}


button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}


button[disabled],
html input[disabled] {
  cursor: default;
}

button,
input,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
}

/*les propriete du lien changerons en fonction de la couleur du site*/
a {
  color: #428bca; /*peut etre changer en fonction de la couleur du site*/
  text-decoration: none;
  text-align:left;
}

a:hover,
a:focus {
  color: #2a6496; /*peut etre changer en fonction de la couleur du site*/
 /* text-decoration: underline; peut etre changer avec les different tel que la couleur*/
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/*les propriete du lien changerons en fonction de la couleur du site a delete*/

img {
  border: 0;
  vertical-align:middle;
  max-width: 100%;
  margin:0;
}

/*les differentes formes d'image*/
.img-arrondi {
  border-radius: 6px;
}

.img-rond {
  border-radius: 50%;
}

.img-encadrer {
padding: 4px;
border: 1px solid #999999;
}


form {
display: block;
margin-top: 0em;
}
/*balise texte et propriete*/
h1 {
  margin-tope: 0.9em;
  font-size: 2em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Merriweather', serif;
  font-weight: 500;
  line-height: 0.95em;
}

h1,
h2,
h3 {
  margin-tope: 5px;
  margin-bottom: 5px;
}


h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/*taille des H*/

h1 {
  font-size: 26px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}


h4 {
  font-size: 18px;
}


h5 {
  font-size: 14px;
}


h6 {
  font-size: 12px;
}

p {
  margin: 0 0 8px;
  line-height:1em;
  padding:5px;
}

ul,
ol {
  margin-top: 5px;
  margin-bottom: 1px;
}

/*proprite des texte*/
.majus{text-transform: uppercase;}
.gras{font-weight:bold}
.curseur-sourie{cursor:pointer}
.souligne{text-decoration:underline}
.sans-souligne{text-decoration:none}

/*proprite des bordure et position. Les couleur des bordure seront grise par defaut-*/
.bordure-solid{border:1px solid}
.bordure-tiret{border:1px dashed}
.bordure-point{border:1px dotted}
.bordure-solid-bas{border-bottom:1px solid #CCC}
.bordure-solid-top{border-bottom:1px solid #CCC}
.bordure-solid-right{border-bottom:1px solid #CCC}
.bordure-solid-left{border-bottom:1px solid #CCC}
.bordure-point-bas{border-bottom:1px dotted #FFF}
.bordure-point-top{border-bottom:1px dotted #CCC}
.bordure-point-right{border-bottom:1px dotted #CCC}
.bordure-point-left{border-bottom:1px dotted #CCC}

/*justification des textes de paragraphe*/
.texte-gauche{text-align:left}
.texte-centrer{text-align:center}
.texte-droite{text-align:right}
.texte-justifier{text-align:justify}
/*=========================================================*/
/*classe des palette de couleur de fond, si possible ajouter "arriere plan", puisque la couleur ici concerne la couleur d'arriere plan */
/* nommez les couleurs en fonction des ville/region/departement de la cote d'ivoire, des couleur qui vont refleter la couleur de la ville, ex: korhogo= orange a coz de la savane */
.transparent{background-color:transparent;}
.gris{background-color:#CCC}
.bleu{background-color:#09F}
.vert{background-color:#0C3}
.violet{background-color:#939}
.rouge{background-color:#F00;}
.orange{background-color:#F90}
.noir{background-color: #000}
.blanc{background-color:#FFF}
.espace-mar{ margin-right:10px}

/*les couleur suivante fonction avec une : opacity: 0.85;, a utiliser avec XX:hover(soit pour la div qui contient la couleur et qui devra changer au survol) et :transition: opacity 0.5s ease; */
.turquoise { background: #1abc9c; }
.emerland { background: #2ecc71; }
.peterriver { background: #3498db; }
.amethyst { background: #9b59b6; }
.wetasphalt { background: #34495e; }
.greensea { background: #16a085; }
.nephritis { background: #27ae60; }
.belizehole { background: #2980b9; }
.wisteria { background: #8e44ad; }
.midnightblue { background: #2c3e50; }
.sunflower { background: #f1c40f; }
.carrot { background: #e67e22; }
.alizarin { background: #e74c3c; }
.clouds { background: #ecf0f1; color: #999; }
.cloud{ background: #999; color: #fff; }
.concrete { background: #95a5a6; }
.orange { background: #f39c12; }
.pumpkin { background: #d35400; }
.pomegranate { background: #c0392b; }
.silver { background: #bdc3c7; }
.asbestos { background: #7f8c8d; }


.derby{ background: #FFECDB; }
.waxFlower{ background: #F1A9A0; }
.Cabaret{ background: #D2527F; }
.NewYorkPink{ background: #E08283; }
.Sunglo{ background: #E26A6A; }
.Wistful{ background: #AEA8D3; }
.MediumPurple{ background: #BF55EC; }
.LightWisteria{ background: #BE90D4; }
.AliceBlue{ background: #E4F1FE; }
.PictonBlue{ background: #59ABE3; }
.Spray{ background: #81CFE0; }
.Shakespeare{ background: #52B3D9; }
.HummingBird{ background: #C5EFF7; }
.Hoki{ background: #67809F; }
.JordyBlue{ background: #89C4F4; }
.AquaIsland{ background: #A2DED0; }
.Gossip{ background: #87D37C; }
.DarkSeaGreen{ background: #90C695; }
.Turquoiserie{ background: #36D7B7; }
.Madang{ background: #C8F7C5; }
.Riptide{ background: #86E2D5; }
.California{ background: #F89406; }
.Casablanca{ background: #F4B350; }
.Crusta{ background: #90C695; }
.Tur{ background: #F2784B;}
.Jaffa{ background: #EB974E;}
.LightningYellow{ background: #F5AB35;}
.RipeLemon{ background: #F7CA18;}
.Saffron{ background: #F4D03F; }
.Pumice{ background: #D2D7D3; }
.Porcelain{ background: #ECF0F1;}
.Cararra{ background: #F2F1EF; }
.Swatch{ background: #E6E6E6 ; }
 
/*=========================================================*/
.contenu{width:100%; inherit; border:0px solid #000;} /* partie principal pour englober le contenu, indispensable pour tout les site de awb */
.contenu-2{width:65%; padding:0px; border:0px solid #000;}
.contenu-1{width:33%; padding:0px; border:0px solid #000;}
.contenue{width:33%; padding:0px; border:0px solid #000;}
.contenuee{width:33%; padding:0px; border:0px solid #000;}

.slide{width:90%; height: 440px; background-color: #333; margin-left:auto; margin-right:auto}
.contenu-footer{width:100%;height: 200px ; inherit; border:0px solid #000; margin-top:6px; margin-bottom:7px;}
/*=========================================================*/
/*hauteur des block a metre sur la feuille modifiale*/
.mini-block{height:60px; /*utiles pour les spane*/}
.mini-moyen{height:120px; /*utile pour les images dans les blocks*/}
.prin-block{height:370px; /*hauteur des block page d'accueil*/}
.mini-img{height:190px; /*utile pour les images dans les blocks*/}

.mini-text{height:120px; /*utile pour les images dans les blocks*/}
.block-defaut{height:auto;}

/*permet au 'contenu' de flotter ou se position a gauche ou droite*/
.fix-droite{float:right;} 
.fix-gauche{float: left;}
.fix-gauchee{float: right;}
         
		 /*espacement a l'interieur du block*/
.espace{padding:8px;}
.mar-just{ margin-left:auto; margin-right:auto;!important; }
.espace-top{padding-top:8px !important;}
.espace-top-bas{padding:8px 0;}

.clear:before,
.clear:after {
  display: table;
  content: " ";
}
.clear{clear:both;}

/*classe de taille des character*/
.taille-9{font-size:9px}
.taille-10{font-size:10px}
.taille-12{font-size:12px}
.taille-14{font-size:14px}
.taille-16{font-size:16px}
.taille-18{font-size:18px}
.taille-24{font-size:24px}
.taille-36{font-size:36px}
.taille-petit{font-size: small}
.taille-large{font-size: large}
.taille-tres-peti{font-size: smaller}
.taille-tres-large{font-size: x-large}

/*caracteristique des bloc de pb se trouvant ds les site awb*/
.awb-pb{width: 250px; height:250px; background-color:"#939"} 
.awb-pb-full{width: 728px; height:90px; background-color:#CCC; margin-left: auto; margin-right: auto}

.reserv { /*utiliser specialement dans la section pour les SW des hotels, pour definir la bar de navigavtion de la reservation, BG a a changer selon besoin */
height: 146px;
background-color: #a29061;
}

.bar-reserv{
width: 73%;
background-color: #FF0;
margin-right:12px;
margin-left:12px;
margin-bottom:3px;
float: left;
margin-top: 1px;
height: 135px;
}
/*=============================================================*/

/* grille et block */


.narrow .ligne {/*ligne interieur des section, tres importante */
width: 100%;
height: auto;
border: 1px solid #FFF;
margin-left: auto;
margin-right:auto;
padding:1px 0;
}


.ligne:before,
.ligne:after {
  display: table;
  content: " ";
}

.ligne:after {
  clear: both;
}

.ligne-int { /*ligne interieur pour les 4 petit block interieu */
width: 100%;
border: 0px solid #FFF;
margin-left: auto;
margin-right:auto;
margin-bottom:50px;
}

.ligne-int:before, .ligne-int:after {
display: table;
content: "";
line-height: 0;
}

.ligne-int:after {
  clear: both;
}

#entete { /*a utiliser pour le header dans le cas ou l'on veut un width complet et qui necessite seulement un menu inline, sans bar de recherche   */
width: 90%;
height: 105px;
margin-right: auto;
margin-left: auto;
background-color: transparent;
border-radius: 1px;
border: 0px solid #0F0;
}

#entete-fix-top { /*pour les menu coller en haut, malgre le scroll . cet ID doit etre utiliser avec .espace-fix-top, */
width: 100%;
height: 95px;
margin-right: auto;
margin-left: auto;
background-color: #00;
position: fixed;
top: 0;
left: 0;
margin-bottom:30px;
}

.entete-fix-top{ /*pour les menu coller en haut, malgre le scroll . cet ID doit etre utiliser avec .espace-fix-top, */
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    /* background: none repeat scroll 0% 0% rgb(243, 85, 53); ici la couleur du BG peut etrs change directement ou via une class a travers le header */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 50;
	margin-bottom:100px;
}

.espace-fix-tops {
margin-top: 96px !important;
left: 0
}

#entete-logo-menu { /*utiliser si l'on doit avoir 2 bloc, celui du logo/bar et menu/rezos en haut et en bas */
width: 90%;
height: 170px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-radius: 1px;
border: 0px solid #0F0;
}



#entete-plein { /*a utiliser pour le header dans le cas ou l'on veut un width complet   */
width: 100%;
height: 170px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-radius: 0px;
border: 0px solid #0F0;
}

.conteneur {
  margin-right: auto;
  margin-left: auto;
}

.conteneur:before,
.conteneur:after {
  display: table;
  content: " ";
}

.conteneur:after {
  clear: both;
}


.ligne-footer{
width: 100%;
height: auto;
border: 0px solid #FFF;
margin-left: auto;
margin-right:auto;
padding:1px 0;
color: #fff;
}

.ligne-footer:before,
.ligne-footer:after {
  display: table;
  content: " ";
}

.ligne-footer:after {
  clear: both;
}

/*=========================================================*/
/*mesure des block utilse actu */
.pti-block-2,
.pti-block-3,
.pti-block-4,
.pti-block-1-3,
.pti-block-1,
.pti-block-2-full,
.pti-block-3-full{
display:block;
float: left;
padding:5px;
margin-top: 5px;
margin-left: 5px;/*margin-left par defaut pour tout les block*/
}
.pti-block-2-fulls
.pti-block-4{
width: 23.3%;
}
.pti-block-fulls
.pti-block-fulls{
width: 40.3%;
}
.pti-block-4{
margin-left: 5px;
margin-right:5px;
}

.pti-block-2{
width: 47%;
margin-right:3px;
}
.pti-block-2-full{
width: 47%;
margin-right:12px;
margin-left:12px;
margin-bottom:8px;
}
.pti-block-2-fulls{
width: 47%;
margin-right:12px;
margin-left:12px;
margin-bottom:8px;
}
.pti-block-2-fullss{
width: 47%;
margin-right:144;
margin-left:55px;
margin-bottom:8px;
}
.pti-block-3-full{
width: 27%;
margin-left:55px;
margin-right:5px;
background-colori: #FF0;
}
/* concerne les pti-bloc-3 des footer sans narrow*/
div.contenu-footer.fix-gauche > .pti-block-3-full{
width: 32%;
margin-left:0px;
margin-right:3px;
background-color: #FF0;
}

div.contenu-footer.fix-gauche > .pti-block-3{
width: 31.7%;
margin-left:7px;
margin-right:3px;
background-color: #FF0;
}
/* concerne les pti-bloc-3 des footer sans narrow*/

.pti-block-1-3{
width: 100%;
padding: 0;
margin-left: 0;
}

.pti-block-1{
width: 95%;
}

.span3{width:370px; 
background-color:#FFF;
height:150px;
margin-left:10px;
display:inline-block;
}

.pti-block-1-inq{/*pour 3 bloc diferents avec un d'entre eux plus large que les 2 autres*/
width: 28%;
margin-left:12px;
margin-right:5px;
}

.pti-block-2-inq{
width: 37%;
margin-left: 8px;
margin-right:auto;
}

.pti-block-1-inq,
.pti-block-2-inq{
background-color:#CCC;
display:block;
float:left;
padding:0px;
}

.pti-block-1-inq ul{
padding:0px !important;
}
.pti-block-1-inq ul li {
padding-bottom: 5px;
list-style-type:none;
margin:0;
padding-left:-5px !important;
}

.pti-block-2-full i {/*pour toute les classe pti-block/mini-moyen qui contiennent une icone*/
width: 65px;
height: 65px;
line-height: 60px;
text-align: center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid #fff;
font-size: 26px;
color: #1abc9c;
float:left;
margin:0;
}

/*pour les liste et icone ds index6*/
.pti-block-icon{
margin-right: 20px;
margin-top:10px;
float: left;
width: 15%;
height: 95px;
}


.pti-block-list { 
list-style: none;
margin: 0 0 20px;
padding: 0;
font-weight: 700;
font-size: 14px;
}

.pti-block-list li a {
text-decoration: none;
padding: 4px 10px;
display: block;
margin-bottom: 0;
border-bottom: 1px solid #efefef;
}
/*=========================================================*/
/*test body 2----*/
.narrow{
width: 80%;
background-color:#FFF; /*BG normal*/
margin-left:auto;
margin-right:auto;
margin-top:0;
}

.narrow:before,
.narrow:after {
  display: table;
  content: " ";
}

.narrow:after {
  clear: both;
}

.narrow-flat{
width: 80%;
background-color:transparent; /*garder le BG en transparent pour les style flat*/
margin-left:auto;
margin-right:auto;
margin-top:0;
}

.narrow-flat:before,
.narrow-flat:after {
  display: table;
  content: " ";
}

.narrow-flat:after {
  clear: both;
}

#entete-narrow {/* a utiliser seulement lorsqu'on a un header composer de logo et menu inline*/
width: 100%;
height: 105px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-radius: 1px;
border: 0px solid #0F0;
}

#entete-logo-menu-narrow { /*utiliser si l'on doit avoir 2 bloc, celui du logo/bar et menu/rezos en haut et en bas. pour narrow*/
width: 100%;
height: 153px;
margin-right: auto;
margin-left: auto;
background-color: transparent;
border-radius: 1px;
border: 1px solid #0F0;
}


.span3-narrow{width:32%; /*????*/
background-color:#FFF;
height:150px;
margin-left:10px;
display:inline-block;
float:left;
}

/*=========================================================*/



/*class principale pour tout les menu, a utiliser absolument afin de faire le menu ul*/
.nav-menu{
width: 80%; /*precedement 510px*/
height: 100%;
border: 0px solid #000;
padding-left: 1px;
top: 0;
}

.nav > li {
position: relative;
display: block;
}

.nav-menu-ul { /*concerne tout les menu*/
width: auto;
list-style: none;
padding-left: 3px;
height: 100%;
list-style: none;
text-align: center;

}

.nav-menu-ul li {/*concerne tout les menu avec les li de largeur automatique, laissant une place a droite pour les icone */
display: inline;
float: left;
width: auto;
height: 100%;
margin-top: 0px;
position: relative;
}

.nav-menu-ul li a {/*concerne tout les menu*/
background-color: transparent;
color: #000;
border: 0px solid #397aa8;
font: 1.3em "Trebuchet MS",Arial,sans-serif;
line-height: 1em;
text-align: center;
text-decoration: none;
padding: 5px 40px 11px 6px;
display: inline-block; /*bien disposer les li, sans debordement et en ligne*/
width: auto;
}

/*parametre des menu contenu ds la class narrow*/
.nav-menu-full{ 
width: 100%;
height: 40px;
border: 0px solid #000;
float:left;
}

#nav-menu-ul-full {/*concerne tout les menu avec les li de largeur automatique, laissant une place a droite pour les icone */
width: auto;
height: 100%;
margin-top: 0px;
}

#nav-menu-ul-full li {/*concerne tout les menu avec les li de largeur automatique, laissant une place a droite pour les icone */
display: inline;
float: left;
width: auto;
height: 100%;
}

#nav-menu-ul-full li a {/*concerne tout les menu*/
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
font: 1em "Trebuchet MS",Arial,sans-serif;
padding: 10px 25px;
}

.full-a{ /*concernant le lien a, occupant tout lespace lui etant atribuer */
padding: 50px 10px 10px 10px;
height: 28px;
display: block;
font-weight: bold;
font-size: 20px;
}

/*caracteristique pour la deco des bordure haut et bas des lien*/
.li-deco-bas{
border-bottom: 4px solid #CCC;
}

.li-deco-top{
border-top: 4px solid #CCC;
}

/*debut pour les menu avec sous menu*/
ul#menu, ul#menu ul.sous-menu {
width: auto;
height: 100%;
margin-top: 0px;
}
ul#menu li, ul#menu ul.sous-menu li {
    list-style-type: none;
    display: inline-block;
float: left;
width: auto;
height: 100%;
}
/*lien aparant ul#menu li ul.sous-menu li a*/
ul#menu li a{
color: #005b7f;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
text-transform: uppercase;
line-height: 40px;
font-family: 'Roboto', sans-serif;
padding: 5px 15px;
}

ul#menu li ul.sous-menu li a {
color: #fff;
display: inline-block;
width: 100%;
text-align: left;
text-decoration: none;
line-height: 20px;
font: 0.75em "Trebuchet MS",Arial,sans-serif;
padding: 10px 7px;
float:left}


/*rendre le sous-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sous-menu {
    display:none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
	height:auto;
	padding:0;
	background: #005b7f; 
	z-index: 10;
}
ul#menu li:hover ul.sous-menu {
    display:block;
}
/*fin parametre menu/logo */
/*=========================================================*/
/* parametre menu/logo 2 inline block*/
.logo-bar-rech { /* a nutiliser seulement que lorske ns avons ds lentete, le logo et le menu a droite*/
width: 100%;
height: 105px;
border:  0px solid #333;
padding: 0px;
float: left;
margin-bottom: 2px;
background-color: transparent;
}

.menu-rezos {
width: 100%;
height: 50px;
border: 1px solid #333;
padding: 0px;
float: left;
margin-bottom: 5px;
}

.bar-rech {
width: 100%;
height: 30px;
border: 0px solid #333;
padding: 0px;
float: right;
margin-top: 0px;
}

.navibar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: none;
}

.navicone {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: none;
width: auto;
}

.list-navicone {
padding-left: 0;
list-style: none;
}

.navicone ul {/* parametre de liste avec icone */
margin-top:0px;
}

.navicone ul li {
display: inline-block;
border-left: 1px solid rgb(39, 37, 37);
margin-left: -3px;
margin-top:0px;
}

.navicone ul li a {/*a delete*/
color: #FFF;
font-size: 24px;
display: block;
line-height: 50px;
width:auto;
height: 50px;
}
/*formulaire et input pour la classe block-rech permettant d'avoir RECHERCHE dans submit a delete*/
.block-rech {
width: 100%;
position: relative;
margin-top: 5%;
}

.block-rech input[type="text"] {
padding: 10px 16px;
outline: none;
color: #c6c6c6;
font-size: 13px;
border: 1px solid rgb(236, 236, 236);
background: #FFFFFF;
width: 63.333%;
line-height: 22px;
-webkit-appearance: none;
position: relative;
}

.infos-tps {
padding: 5x;
outline: none;
color: #c6c6c6;
font-size: 13px;
border: 1px solid rgb(236, 236, 236);
background: #FFFFFF;
width: 63.333%;
line-height: 22px;
-webkit-appearance: none;
position: relative;
margin-left: auto;
margin-right: auto;
height: 45px;
}

#rech-form { /*a delete*/
position: relative;
bottom: 6px;
z-index: 100;
width: 100%;
}

.block-rech input[type="submit"] { /*a delete*/
text-transform: uppercase;
font-size: 13px;
padding: 12px 12px;
border: none;
cursor: pointer;
width: 24.333%;
position: absolute;
line-height: 1.5em;
outline: none;
}

.block-rech input[type="submit"]{ /*a delete*/
backgroundc: #0F9; /* couleur arriere plan a changer en fonction de la couleur de la DD */
color: #FFF; /* couleur a changer en fonction de la couleur de la DD */
}

/*formulaire et input pour la classe block-rech-icon permettant d'avoir UNE ICONE RECHECHE dans submit*/
.block-rech-icon {
width: 100%;
position: relative;
margin-top: 5%;
}

.block-rech-icon input[type="text"] {/*a delete*/
padding: 10px 16px;
outline: none;
color: #c6c6c6;
font-size: 13px;
border: 1px solid rgb(236, 236, 236);
background: #FFFFFF;
width: 63.333%;
line-height: 22px;
-webkit-appearance: none;
position: relative;
}

.block-rech-icon input[type="submit"] {
text-transform: uppercase;
font-size: 13px;
padding: 12px 20px;
border: 1px solid #CCC;
cursor: pointer;
width: 2.333%;
position: absolute;
line-height: 1.5em;
outline: none;
background:#FFF url(../awb%20temp/ecole/search.png) no-repeat 9px 9px;;
}

.block-rech-icon input[type="submit"]{/*a delete*/
color: #000; /* couleur a changer en fonction de la couleur de la DD */
}


.footer-ul{
list-style: none;
padding: 0;
margin: 0;
}

.footer-ul li i{margin:5px;}
/*le block de span de logo*/
.pti-block-4 span{
width: 120px;
height: 120px;
display: block;
text-align: center;
margin: auto;
}

.pti-block-4 span i{
font-size: 3.7em;
color: #FFF;
line-height: 2em;
text-shadow: 1px 1px 0px #3b3b3b;
width:50px;
height:110px;
}

.pti-block-4 h4 a {
display: inline-block;
color: #353535;
font-size: 1.5em;
}

.para-blok {
font-size: 14px;
line-height: 1.8em;
}

.bg{border-radius:75px;}

.bg-img{
border-radius:20px;
width:330px;
height:210px;
margin-left:auto;
margin-right:auto;
}

.bg-txt{
border-radius:2px;
width:210px;
height:150px;
margin-left:auto;
margin-right:auto;
padding:5px;
}


.img-pti-block-2-full{ /*a utiliser avec pti-block-2-full dans la partie image*/
display:block;
max-width:100%;
height:auto;
}

.awb-show{width: 100%; height:35px}
.awb-shoe-up{width:95%; height:inherit; margin-left:auto; margin-right:auto}

.trait {
margin: 0;
border-bottom: none;
border-top: 1px solid #D1D1D1;
width: 550px;
display: inline-block;
}

.boxImage img{padding:5px; display:block}

/*setting up pour ecole 3, pti-block2 avec 2 block superposer*/
.list-2-block {/*pour le ul qui regroupe 2 block superposer*/
margin: 0;
list-style: none;
padding-bottom: 33px;
padding-left:10px;
margin-top: 13px;
}

.list-2-block li:first-child {/*pour le 1er fils du ul qui regroupe 2 block superposer*/
padding-top: 0;
border-top: none;
}

.list-2-block li:first-child + li {/*pour le 1er fils plus celui qui le suit, du ul qui regroupe 2 block superposer*/
border-top: none;
}

.list-2-block li {/*pour tt les li du ul qui regroupe 2 block superposer*/
font-size: 12px;
line-height: 18px;
padding: 36px 0 27px 0;
margin-bottom: 3px;
border-bottom: 1px solid #D3D3D3;
border-top: 1px solid #D3D3D3;
height:auto
}

.list-2-block li figure {/*pour la section image du ul qui regroupe 2 block superposer*/
margin: 0;
margin-right: 20px;
float: left;
width: 20%;
height:95px;
}

.couvert p {/*classe pour le p  du li qui regroupe 2 block superposer, il couvre la div  et le li principal*/
line-height: 1.3em;
color: #707070;
padding: 0px;
}

/*debut classe pti-block4 pour ecole 4*/
.infoBox {/*classe pour ecole 4, pour le block pti-block 4, just en bas de l'image*/
height: 50px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
padding-left: 13px;
padding-top: 13px;
}

.text-infoBox {/*classe pour ecole 4, pour le block pti-block 4, span a linterieur de infos-box */
display: block;
color: #FFF;
text-transform: uppercase;
font-size: 1.1em;
font-weight: normal;
margin-bottom: 6px;
height:auto !important;
width:auto;
}

.infoBox-lien {/*classe pour ecole 4, pour le block pti-block 4, lien a linterieur de infos-box */
position: absolute;
right: 0;
top: 0;
display: block;
height: 20px;
width: 50px;
padding:15px 5px;
}

.desc {/*para de description, pour le block pti-block 4, span a linterieur de infos-box */
font-size: 0.8125em;
padding: 0.5em 0;
color: #FFF;
line-height: 1.5em;
margin: 3px 0;
}

.pti-block-1 a{
width: 100%;
height:100px;
font-size:24px;
color: #fff;
text-transform: uppercase;
display: block;
text-decoration: none;
/* font-weight: bold; */
font-size: 16px;
font-family: 'Montserrat', sans-serif;
padding: 20px 5px 20px 20px;
}

.encadrer{border-bottom-width: 3px solid rgba(0,0,0,0.3); height: 30px}
/*fin du setting up pour ecole 3, pti-block2 avec 2 block superposer*/

/*parametre pour clik ramenant en haut, a utiliser avec le js*****************************************/

.awb-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* propriete de remplacement d'image*/
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: black url(search.png) no-repeat center 50%; 
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.awb-top.awb-top-visible {
  /* le boutton devien visible */
  visibility: visible;
  opacity: 1;
}
.awb-top.awb-top-fade-out {
  /* Si l'utilisateur maintient le défilement vers le bas, le bouton est floue et devient moins visible, propriete pouvant etre changer selon les besoin */
  opacity: .5;
}
.no-touch .awb-top:hover {
  background-color: #e86256;
  opacity: 1;
}
/* media query pour le go top */
@media only screen and (min-width: 768px) {
  .awb-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .awb-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}
/* propriete css pour design bar/patisserie....*/


/*******************************************************RWD************************************************************/
/*pour les smarthphone a petit ecran: ptit samsung duos*/

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

.narrow,
.pti-block-2,
.pti-block-3,
.pti-block-4,
.pti-block-1-3,
.pti-block-1,
.pti-block-2-full,
.pti-block-3-full,
.awb-pb-full,
.pti-block-1 a, 
.contenu-1,
.contenu-2,
.nav-menu-full,
.bar-rech,
.logo,
.logo-bar-rech,
div.contenu-footer.fix-gauche > .pti-block-3,
ul#menu li a,
ul#menu li,
ul#menu{
width: 100%;
}

.logo-bar-rech,.bar-rech,
.nav-menu-full,.prin-block,.pti-block-1-3 {
height: auto;
}
.prin-blocks,.prin-blockss{height:auto;
}

section div.slide-full,
ul#menu li ul.sous-menu,
ul#menu ul.sous-menu li, img,h3,.mini-img,.trait{display: none;}

.bar-rech,.logo,.bar-rech,ul#menu li{
display: block;
}

div.contenu-footer.fix-gauche > .pti-block-3-full,.pti-block-1-3,.pti-block-1,.pti-block-2,
.pti-block-3,.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3,
.span3,.boxImage img,img, .pti-block-1-inq ,.pti-block-2-inq,
.pti-block-3-full{
padding:0;
margin:0;
}

img,.boxImage,.span3{
width: 286px;
margin:0;
}
.pti-block-2 div.mini-text {
height:90px;
}
.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3 {
margin-bottom: 8px;}

ul#menu, .contenu-1 .mini-block,
.mini-moyen{
margin-bottom: 5px;
}

header #entete-logo-menu-narrow{height: 380px; border:0px red solid;}

.logo,.nav-menu-full{
float:left;
}

.bar-rech,.logo{
position: static;
}

.pti-block-1,.pti-block-2,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-3{
margin-left: 0;
}

.pti-block-3,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-1,.pti-block-2, .pti-block-3 {
margin-right: 0;
}
.contenu-2{margin-bottom:10px}


.nav-menu-full{
border: 1px solid #000;
}

div.contenu-footer.fix-gauche > .pti-block-3-full{
width: 100%;
background-color: #FF0;
margin-top: 5px;
}

.pti-block-1-inq ,.pti-block-2-inq{
width: 100%;
margin-bottom: 8px;
}


ul#menu{
height:100%;
padding-left: 0;
position: static;
}

ul#menu li {float:left; position: relative;background: #efefef; margin-bottom:3px;}
ul#menu li a{
text-align: center;
padding: 5px 0;
color:#000;
}


ul#menu li ul.sous-menu {
    top: 30px;
    width: auto;
	background-color: #FF0;
}

ul#menu ul.sous-menu li {
width: 90%;
height: 100%;
}

.pti-block-1,.pti-block-2 {
margin-bottom:1px;
margin-top: 0;
}

.pti-block-1 a {
height: 100px;
padding: 5px;
text-align: center;
}

.mini-block {
height: 27px;
}
 
.contenu-1 .mini-block {
height: 37px;
}

.pti-block-3 {
margin-top: 5px;
}

.mini-moyen{
height:150px;
}

.mini-img-full {
height: 230px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 20px;
  text-align: center;
}
 
p{text-align: justify; font-size: 18px;}

h4 {
  font-size: 14px;
}
}


/*2- smarthphone, resolution d'ecran 480x320: les galaxie*/
 @media screen and (min-width: 320px) and (max-width: 480px) {
 
.narrow,
.pti-block-2,
.pti-block-3,
.pti-block-4,
.pti-block-1-3,
.pti-block-1,
.pti-block-2-full,
.pti-block-3-full,
.awb-pb-full,
.pti-block-1 a, 
.contenu-1,
.contenu-2,
.nav-menu-full,
.bar-rech,
.logo,
.logo-bar-rech,
div.contenu-footer.fix-gauche > .pti-block-3,
ul#menu li a,
ul#menu li,
ul#menu{
width: 100%;
}
`
.logo-bar-rech,.bar-rech,
.nav-menu-full,.prin-block,.pti-block-1-3 {
height: auto;
}


section div.slide-full,
ul#menu li ul.sous-menu,
ul#menu ul.sous-menu li, img,h3,.mini-img,.trait{displaye: none;}

.bar-rech,.logo,.bar-rech,ul#menu li{
display: block;
}

div.contenu-footer.fix-gauche > .pti-block-3-full,.pti-block-1-3,.pti-block-1,.pti-block-2,
.pti-block-3,.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3,
.span3,.boxImage img,img, .pti-block-1-inq ,.pti-block-2-inq,
.pti-block-3-full{
padding:0;
margin:0;
}

img,.boxImage,.span3{
width: 286px;
margin:0;
}
.pti-block-2 div.mini-text {
height:90px;
}
.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3 {
margin-bottom: 8px;}

ul#menu, .contenu-1 .mini-block,
.mini-moyen{
margin-bottom: 5px;
}

header #entete-logo-menu-narrow{height: 380px; border:0px red solid;}

.logo,.nav-menu-full{
float:left;
}

.bar-rech,.logo{
position: static;
}

.pti-block-1,.pti-block-2,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-3{
margin-left: 0;
}

.pti-block-3,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-1,.pti-block-2, .pti-block-3 {
margin-right: 0;
}
.contenu-2{margin-bottom:10px}


.nav-menu-full{
bordere: 1px solid #000;
}

div.contenu-footer.fix-gauche > .pti-block-3-full{
width: 100%;
background-color: #FF0;
margin-top: 5px;
}

.pti-block-1-inq ,.pti-block-2-inq{
width: 100%;
margin-bottom: 8px;
}

ul#menu{
height:100%;
padding-left: 0;
position: static;
}

ul#menu li {float:left; position: relative;background: #efefef; margin-bottom:3px;}
ul#menu li a{
text-align: center;
padding: 5px 0;
color:#000;
}


ul#menu li ul.sous-menu {
    top: 30px;
    width: auto;
	background-color: #FF0;
}

ul#menu ul.sous-menu li {
width: 90%;
height: 100%;
}

.pti-block-1,.pti-block-2 {
margin-bottom:1px;
margin-top: 0;
}

.pti-block-1 a {
height: 100px;
padding: 5px;
text-align: center;
}

.mini-block {
height: 27px;
}
 
.contenu-1 .mini-block {
height: 37px;
}

.pti-block-3 {
margin-top: 5px;
}

.mini-moyen{
height:150px;
}

.mini-img-full {
height: 230px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 20px;
  text-align: center;
}
 
p{text-align: justify; font-size: 18px;}

h4 {
  font-size: 14px;
}
}

/* ktegori d'ecran iphone 5*/
@media screen and (min-width: 480px) and (max-width: 600px) {
/* CSS */
.narrow,
.pti-block-2,
.pti-block-3,
.pti-block-4,
.pti-block-1-3,
.pti-block-1,
.pti-block-2-full,
.pti-block-3-full,
.awb-pb-full,
.pti-block-1 a, 
.contenu-1,
.contenu-2,
.nav-menu-full,
.bar-rech,
.logo,
.logo-bar-rech,
div.contenu-footer.fix-gauche > .pti-block-3
{
width: 100%;
}

ul#menu{
width: 100%;
}
ul#menu li{
width: 49.6%;
background-color: #67809F !important;
border-left: 1px solid #FFF;
}
ul#menu li a{
width: 100%;
color: #FFF !important;
}

.logo-bar-rech,.bar-rech,
.nav-menu-full,.prin-block,.pti-block-1-3 {
height: auto;
}


section div.slide-full,
ul#menu li ul.sous-menu,
ul#menu ul.sous-menu li, img,h3,.mini-img,.trait{displaye: none;}

.bar-rech,.logo,.bar-rech,ul#menu li{
display: block;
}

div.contenu-footer.fix-gauche > .pti-block-3-full,.pti-block-1-3,.pti-block-1,.pti-block-2,
.pti-block-3,.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3,
.span3,.boxImage img,img, .pti-block-1-inq ,.pti-block-2-inq,
.pti-block-3-full{
padding:0;
margin:0;
}

img,.boxImage,.span3{
width: 286px;
margin:0;
}
.pti-block-2 div.mini-text {
height:90px;
}
.pti-block-2-full,.pti-block-4,div.contenu-footer.fix-gauche > .pti-block-3 {
margin-bottom: 8px;}

ul#menu, .contenu-1 .mini-block,
.mini-moyen{
margin-bottom: 5px;
}

header #entete-logo-menu-narrow{height: 282px; border:1px red solid;}

.logo,.nav-menu-full{
float:left;
}

.bar-rech,.logo{
position: static;
}

.pti-block-1,.pti-block-2,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-3{
margin-left: 0;
}

.pti-block-3,div.contenu-footer.fix-gauche > .pti-block-3-full,
.pti-block-1,.pti-block-2, .pti-block-3 {
margin-right: 0;
}
.contenu-2{margin-bottom:10px}


.nav-menu-full{
border: 1px solid #000;
}

div.contenu-footer.fix-gauche > .pti-block-3-full{
width: 100%;
background-color: #FF0;
margin-top: 5px;
}

.pti-block-1-inq ,.pti-block-2-inq{
width: 100%;
margin-bottom: 8px;
}

ul#menu{
height:100%;
padding-left: 0;
position: static;
}

ul#menu li {float:left; position: relative;background: #efefef; margin-bottom:3px;}
ul#menu li a{
text-align: center;
padding: 5px 0;
color:#000;
}


ul#menu li ul.sous-menu {
    top: 30px;
    width: auto;
	background-color: #FF0;
}

ul#menu ul.sous-menu li {
width: 90%;
height: 100%;
}

.pti-block-1,.pti-block-2 {
margin-bottom:1px;
margin-top: 0;
}

.pti-block-1 a {
height: 100px;
padding: 5px;
text-align: center;
}

.mini-block {
height: 27px;
}
 
.contenu-1 .mini-block {
height: 37px;
}

.pti-block-3 {
margin-top: 5px;
}

.mini-moyen{
height:150px;
}

.mini-img-full {
height: 230px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 20px;
  text-align: center;
}
 
p{text-align: justify; font-size: 18px;}

h4 {
  font-size: 14px;
}

}



@media screen and (min-width: 768px) and (max-width: 1024px){
/* CSS */
.narrow {
		width: 95%;
	}
	
#rech-form,ul#menu,
ul#menu li a {
width: 100%;
}

div.contenu-footer.fix-gauche > .pti-block-3-full,
div.contenu-footer.fix-gauche > .pti-block-3,
.pti-block-3,
.pti-block-1{
margin-left:2px;
}

.pti-block-2-full,
.pti-block-1-inq {
margin-right: 5px;
}

#rech-form{
position: relative;
bottom: 6px;
z-index: 100;
}

.block-rech input[type="text"] {
padding: 10px 16px;
width: 53.333%;
}

input[type="submit"] {/* a remplacer pas icone */
width: 28.333%;
position:relative;
line-height: 1.5em;
}

div.contenu-footer.fix-gauche > .pti-block-3-full{
width: 32%;
margin-right:0px;
}

div.contenu-footer.fix-gauche > .pti-block-3{
width: 32%;
margin-right:0px;
}

.pti-block-3{
width: 31.5%;
margin-left:4px;
}

.pti-block-1 {
width: 95%;
padding: 5px;
margin-top: 5px;
}
.pti-block-4 {
width: 23%;
margin-left: 6px;
margin-right: 2px;
}

.pti-block-4 h4 a {
font-size: 1.2em;
}

.pti-block-2-full {
width: 47%;
margin-left: 5px;
}

.pti-block-1-inq {
width: 28%;
margin-left: 8px;
}

.pti-block-2-inq {
width: 37%;
margin-left: 3px;
margin-right: auto;
}

ul#menu {
height: 100%;
padding-left: 0;
}

ul#menu li {float:left;width:15%;padding:2px;margin-right:3px;}

ul#menu li a{
padding: 5px 10px;
}


ul#menu li ul.sous-menu {
    display:none;
    top: 30px;
    width: auto;
}

ul#menu ul.sous-menu li {
width: 90%;
height: 100%;
}

ul#menu li ul.sous-menu li a {
width: 105px;
padding: 3px 10px;}

ul#menu li ul.sous-menu li a:hover{
	background-color: #FFF;
	color:#000;
	font-weight:bold;
}

.contenu-2 .pti-block-2{
width: 47%;
margin-left: 1px;
}


.para-blok {
font-size: 14px;
line-height: 1.4em;
}

h1 {
  font-size: 36px;
}

h2 {
font-size: 20px;
}

h3 {
  font-size: 18px;
}


h4 {
  font-size: 14px;
}

.mini-block {
height: 40px;
}
.mini-img {
height: 170px;
}

.awb-pb-full {
width: 95%;
height: 90px;
}

.bg-img {
border-radius: 20px;
width: 210px;
height: 210px;
}

.bg-txt {
border-radius: 2px;
width: 175px;
height: 150px;
padding: 5px;
}

.navicone {
width: 20%;
}
.navicone ul li a {
color: #ffffff;
font-size: 20px;
line-height: 15px;
height: 40px;
}

.navicone ul li a i{
display:none;
}

.span3 {
width: 300px;
height: 145px;
margin-left: 10px;
float: left;
}

.boxImage img {
padding: 1px;
}

.text-infoBox {
font-size: 0.9em;
}

.bar-reserv {
width: 72%;
}

.mini-text {
height: 120px;
margin-top:4px;
}
}

#contents {
    width: 100%;
    font-family: 'Din', "Trebuchet MS";
    color :#FFF;
    margin-left :19px;
	margin-right:0px;
	margin-top:1px;
	text-align: center;
}
#galerie {
    color :#FFF;
    margin-top: 12px;
	text-align: center;
	height:1px;
	margin-bottom:12px
}
    

/* Contient le header avec un background noir transparent */

#conteneur_header {
	width:100%;
	height:134px;
	background:url(../img/transparency.png);
	position:fixed;
	z-index:9999;
	top:0;
}
#works {
    margin-bottom: 40px;
    overflow: hidden;
    margin-top: 5px;
}

#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
    width:311px;
    height: 292px;
    border: 4px solid #222;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 20px;
	margin-bottom:50px;
}

#works .work:hover {
    border: 4px solid #FFF;
}

#works .work img {
    
}

#works .work .triangle-droite {
    background: url(../img/triangle-droite.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à droite lorsqu'on n'est pas en :hover */
    right: -312px;
    bottom: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-droite {
	/* Voici la position du triangle à droite lorsqu'on est en :hover */
    right: 0;
    bottom: 0;
}

#works .work .triangle-gauche {
    background: url(../img/triangle-gauche.png);
    width: 312px;
    height: 293px;
    position: absolute;
    /* Voici le décalage du triangle à gauche lorsqu'on n'est pas en :hover */
    left: -311px;
    top: -293px;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-gauche {
	/* Voici la position du triangle à gauche lorsqu'on est en :hover */
    left: -1px;
    top: -1px;
}

#works .work span {
    color: #FFF;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    position: absolute;
    /* Voici la position du span lorsqu'on n'est pas en :hover */
    top: 125px;
    left: -280px;
    font-family: 'Din';
    background: #222;
    padding-left: 70px;
    padding-right: 8px;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}
a img {
    border: none;
}
#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 0px;
}
#works {
    margin-bottom: 40px;
    overflow: hidden;
    margin-top: 165px;
}
/*//////// FONTS /////////*/
#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
    width:311px;
    height: 292px;
    border: 4px solid #222;
    cursor: pointer;
    position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
    float: left;
    margin-right: 20px;
	margin-bottom:50px;
}

@font-face{
        font-family: "Din";
        src: url("../fonts/din-webfont.eot");
        src: local("@"),url("../fonts/din-webfont.ttf") format("truetype");
}

@font-face{
        font-family: "Din-medium";
        src: url("../fonts/din_medium-webfont.eot");
        src: local("@"),url("../fonts/din_medium-webfont.ttf") format("truetype");
}




/* 3- smarthphone (portrait and landscape)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}


/* CSS 4- tout peti smarthphone:*/
@media screen and (max-width: 320px), (min-device-width: 320px) and (max-device-width:480px) and (orientation : portrait) {
/* CSS */
}

 @media screen and (max-width: 320px), (min-device-width: 320px) and (max-device-width: 568px) and (orientation : portrait) {
/* CSS */
}

 @media screen and (min-width: 320px) and (max-width: 568px), (min-device-width: 320px) and (max-device-width: 568px) and (orientation : landscape) {
/* CSS */
}

@media screen and (max-width: 600px), (min-device-width: 600px) and (max-device-width: 960px) and (orientation : portrait) {
/* CSS */
}

@media screen and (min-width: 600px) and (max-width: 960px), (min-device-width: 600px) and (max-device-width: 960px) and (orientation : landscape) {
/* CSS */
}


@media screen and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {
/* CSS */
}

@media screen and (max-width: 360px), (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {
/* CSS */
}

@media screen and (min-width: 360px) and (max-width: 640px), (min-device-width: 360px) and (max-device-width: 640px) and (orientation : landscape) {
/* CSS */
}