/**
* SD
**/

section.content-detail {
        background: transparent;
        width: 70%;
        margin: auto;
        padding-bottom: 25px;
    }

@media (max-width: 849px) {
    #salon { 
      margin:0;
      padding:0;
      background: url(../img/SD/salon.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #tarifs { 
      margin:0;
      padding:0;
      background: url(../img/SD/tarifs.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #contact { 
      margin:0;
      padding:0;
      background: url(../img/SD/contact.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    body {
        font-family: 'Gafata',sans-serif;
        font-size: 80%;
    }


    header {
        width: 100%;
        height: 80px;
        background: url(../img/header.png);
    }

    header h1 {
        padding: 10px 0 0 0;
        text-align: center;
        font-family: 'Kaushan',cursive;
        font-size: 2.5em;
        color: #545a68;
    }

    header nav {
        height: 30px;
        width: 80%;
        margin: auto;
        margin-top: 15px;
    }

    header nav li {
        width: 25%;
        float: left;
        text-align: center;
    }

    header nav a {
        text-decoration: none;
        font-family: 'Flamenco',cursive;
        font-size: 1em;
        color: #545a68;
    }

    header nav a:hover {
        border-bottom: 1px solid #545a68;
    }

    header nav a.active {
        border-bottom: 1px solid #545a68;
    }

    div.spacer {
        height: 10px;
        background: #fcfbf0;
    }

    section.galery {
        background: #fff;
    }

    section.content,
    section.content-detail {
        padding-top: 15px;
        min-height: 150px;
        background: #2e221d;
    }

    div.articles {
        width: 85%;
        margin: auto;
    }

    section.content article {
        padding: 2%;
        line-height: 1.2em;
        color: #fcfbf0;
    }

    section.content article h2 {
        margin: 0 0 20px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #cbb6a2;
        font-family: 'Kaushan',cursive;
        font-size: 1.5em;
        color: #cbb6a2;
    }

    section.content article .thumb {
        margin: 0 0 10px 0;
    }

    section.content article .more {
        margin: 25px 0 20px 0;
    }

    section.content article .more a {
        display: block;
        padding: 10px 15px 10px 15px;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        color: #2e221d;
        background: #cbb6a2;
    }

    article .more a:hover {
        text-decoration: underline;
    }

    article .gmap {
        margin: 20px 0 10px 0;
    }

    footer {
        height: 30px;
        font-family: 'Flamenco',cursive;
        background: #fcfbf0;
    }

    footer nav {
        width: 250px;
        margin: auto;
        margin-top: 8px;
    }

    footer nav li {
        float: left;
        margin-left: 15px;
        font-size: 1em;
    }

    footer nav a {
        text-decoration: none;
        color: #545a68;
    }

    footer nav a:hover {
        text-decoration: underline;
    }

    section.content-detail h2 {
        margin: 0 0 20px 0;
        padding: 10px 5px 10px 10px;
        font-family: 'Flamenco',cursive;
        font-size: 1.6em;
        color: #fff;
    }

    section.content-detail p {
        padding: 10px;
        padding-top: 25px;
        font-size: 1em;
        line-height: 1.3em;
        color: #fff;
    }

    section.content-detail p img {
    }

    .clear {
        clear: both;
    }

    .spacer-20 {
        height: 20px;
    }

    section.content-detail { margin-top: 12px; }
}


/**
* HD
**/

@media (min-width:850px) and (max-width:1199px) {
    #salon { 
      margin:0;
      padding:0;
      background: url(../img/HD/salon.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #tarifs { 
      margin:0;
      padding:0;
      background: url(../img/HD/tarifs.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #contact { 
      margin:0;
      padding:0;
      background: url(../img/HD/contact.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    body {
        font-size: 80%;
        font-family: 'Gafata', sans-serif;
    }

    header {
        height: 110px;
        background: url(../img/header.png);
        width: 100%;
    }

    header h1 {
        float: left;
        font-size: 4em;
        font-family: 'Kaushan', cursive;
        position: relative;
        color: #545a68;
        top: 50%;
        margin: -26px 0px 0px 3%;   
    }

    header nav {
        float: right;
        position: relative;
        top: 50%;
        margin: -20px 1% 0px 0px;
    }

    header nav li {
        float: left;
        margin: 0px 30px 0px 0px;
    }

    header nav a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #545a68;
        font-size: 1.5em;
        font-family: 'Flamenco', cursive;
    }

    header nav a:hover {
        border-bottom: 1px solid #545a68;
    }

    header nav li a.active {
        border-bottom: 1px solid #545a68;
    }

    div.spacer {
        height: 10px;
        background: #fcfbf0;
    }

    section.galery {
        background: #fff;
    }

    section.content, section.content-detail {
        min-height: 150px;
        background: #2e221d;
        padding-top: 5px;
    }

    div.articles {
        width: 95%;
        margin: auto;
    }

    section.content article {
        float: left;
        padding: 2%;
        width: 29%;
        color: #fcfbf0;
        line-height: 1.2em;
    }

    section.content article h2 {
        font-family: 'Kaushan', cursive;
        font-size   : 1.5em;
        margin: 0px 0px 20px 0px;
        color: #cbb6a2;
        border-bottom: 1px solid #cbb6a2;
        padding-bottom: 5px;
    }

    section.content article .thumb {
        margin: 0px 0px 10px 0px;
    }

    section.content article .more {
        margin: 25px 0px 20px 0px;
    }

    section.content article .more a {
        color: #2e221d;
        background: #cbb6a2;
        padding: 10px 15px 10px 15px;
        border-radius: 5px;
        text-decoration: none;
    }

    article .more a:hover {
        text-decoration: underline;
    }

    article .gmap {
        margin: 20px 0px 10px 0px;
    }

    footer {
        height: 30px;
        background: #fcfbf0;
        font-family: 'Flamenco', cursive;
    }

    footer nav {
        float: right;
        margin: 8px 50px 0px 0px;
    }

    footer nav li {
        float: left;
        margin-left: 25px;
        font-size: 1em;
    }

    footer nav a {
        color: #545a68;
        text-decoration: none;
    }

    footer nav a:hover {
        text-decoration: underline;
    }

    section.content-detail h2 {
        margin: 0px 0px 20px 0px;
        font-family: 'Flamenco', cursive;
        font-size: 2em;
        padding: 10px 5px 10px 10px;
        color: #fff;
    }

    section.content-detail p {
        padding: 10px;
        padding-top: 25px;
        color: #fff;
        font-size: 1.1em;
        line-height: 1.3em;
    }

    section.content-detail p img {

    }
    
    .clear {
        clear: both;
    }

    .spacer-20 {
        height: 20px;
    }

    section.content-detail { margin-top: 25px; }
}


/**
* XHD
**/

@media (min-width:1200px){

    #salon { 
      margin:0;
      padding:0;
      background: url(../img/XHD/salon.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #tarifs { 
      margin:0;
      padding:0;
      background: url(../img/XHD/tarifs.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    #contact { 
      margin:0;
      padding:0;
      background: url(../img/XHD/contact.jpg) no-repeat center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    body {
        font-size: 100%;
        font-family: 'Gafata', sans-serif;
    }

    header {
        height: 110px;
        background: url(../img/header.png);
        width: 100%;
    }

    header h1 {
        float: left;
        font-size: 4em;
        font-family: 'Kaushan', cursive;
        position: relative;
        color: #545a68;
        top: 50%;
        margin: -26px 0px 0px 3%;
    }

    header nav {
        float: right;
        position: relative;
        top: 50%;
        margin: -20px 3% 0px 0px;
    }

    header nav li {
        float: left;
        margin: 0px 30px 0px 0px;
    }

    header nav a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #545a68;
        font-size: 1.5em;
        font-family: 'Flamenco', cursive;
    }

    header nav a:hover {
        border-bottom: 1px solid #545a68;
    }

    header nav li a.active {
        border-bottom: 1px solid #545a68;
    }

    div.spacer {
        height: 10px;
        background: #fcfbf0;
    }

    section.galery {
        background: #fff;
    }

    section.content, section.content-detail {
        min-height: 150px;
        background: #2e221d;
        padding-top: 5px;
    }

    div.articles {
        width: 85%;
        margin: auto;
    }

    section.content article {
        float: left;
        padding: 2%;
        width: 29%;
        color: #fcfbf0;
        line-height: 1.2em;
    }

    section.content article h2 {
        font-family: 'Kaushan', cursive;
        font-size: 1.5em;
        margin: 0px 0px 20px 0px;
        color: #cbb6a2;
        border-bottom: 1px solid #cbb6a2;
        padding-bottom: 5px;
    }

    section.content article .thumb {
        margin: 0px 0px 10px 0px;
    }

    section.content article .more {
        margin: 25px 0px 20px 0px;
    }

    section.content article .more a {
        color: #2e221d;
        background: #cbb6a2;
        padding: 10px 15px 10px 15px;
        border-radius: 5px;
        text-decoration: none;
    }

    article .more a:hover {
        text-decoration: underline;
    }

    article .gmap {
        margin: 20px 0px 10px 0px;
    }

    footer {
        height: 30px;
        background: #fcfbf0;
        font-family: 'Flamenco', cursive;
    }

    footer nav {
        float: right;
        margin: 8px 50px 0px 0px;
    }

    footer nav li {
        float: left;
        margin-left: 15px;
        font-size: 1em;
    }

    footer nav a {
        color: #545a68;
        text-decoration: none;
    }

    footer nav a:hover {
        text-decoration: underline;
    }

    section.content-detail h2 {
        margin: 0px 0px 20px 0px;
        font-family: 'Flamenco', cursive;
        font-size: 2em;
        padding: 10px 5px 10px 10px;
        color: #fff;
    }

    section.content-detail p {
        padding: 20px 10px 10px 10px;
        padding-top: 25px;
        color: #fff;
        font-size: 1em;
        line-height: 1.3em;
    }

    section.content-detail p img {

    }

    section.content-detail ul {
        padding: 10px 10px 10px 15px;
        color: #fff;
    }

    section.content-detail ul li {
        margin-bottom: 5px;
    }

    section.content-detail ul li a {
        color: #fff;
    }

    .clear {
        clear: both;
    }

    .spacer-20 {
        height: 20px;
    }

    section.content-detail { margin-top: 50px; }
}

section.content-detail p, section.content-detail h2,.content-detail ul,.gmap-detail,.contact-detail-bg {
        background: url(../img/content-detail.png);
    }

.content-detail ul{
    color: #fff;
    font-size: .9em;
}

.content-detail ul li {
    margin-left: 10px;
    list-style-type: disc;
    padding-top: 5px;
    list-style-position: inside;
}

.gmap-detail {
    padding: 20px 0px 20px 6%;
}

.footer-detail {
        width: 100%;
    }

.tel {
    color: #fff;

}

.contact-img {
    display: block;
    margin: auto;
    margin-bottom: 15px;
    margin-top: -15px;
}

.contact-title{ text-align: center; padding: 0; }
.contact-detail{ width: 85%; margin: auto; color: #fff; }
section.content-detail{ background: transparent; }