/******************************************************************************
 * Box model
 ******************************************************************************/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
/******************************************************************************
 * Fonts
 ******************************************************************************/
@font-face {
    font-family: 'Flame';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Flame-Bold.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/Flame-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/Flame-Bold.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/Flame-Bold.woff') format('woff'), /* Modern Browsers */
        url('../fonts/Flame-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'Flame';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Flame-Regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/Flame-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/Flame-Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/Flame-Regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/Flame-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'FlameSans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/FlameSans-Regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/FlameSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/FlameSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/FlameSans-Regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/FlameSans-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

/******************************************************************************
 * Default
 ******************************************************************************/
html {
    position: relative;
    font-size: 16px;
    /*-webkit-text-size-adjust: 100%;*/
    margin: 0;
    padding: 0;
}

body, textarea, table, select, input[type=text], textarea {
    font-family: 'FlameSans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}
body {
    position: relative;
    margin: 0;
    /*min-height: 100vh;*/
    background: #F5EBDC;
    color: #502314;
    overflow-x: hidden;
}
h1, h2, h3, h4 {
    font-weight: 400;
    font-family: "Flame";
}

h1 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin: 0 0 1rem 0;
}
h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin: 0 0 1rem 0;
}
h3 {
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin: 0 0 1rem 0;
}
h4 {

}
h5 {
    font-weight: normal;
    font-size: 1.375rem;
    line-height: 1.675rem;
}

@media only screen and (min-width: 1080px) {
    h1 {
        font-size: 6.25rem;
        line-height: 6.25rem;
        margin: 0 0 3rem 0;
    }
    h2 {
        font-size: 2.125rem;
        line-height: 3rem;
        margin: 0 0 1rem 0;
    }
    h3 {
        font-size: 1.125rem;
        line-height: 1.6875rem;
        margin: 0 0 1rem 0;
    }
    h4 {

    }
    h5 {
        font-weight: normal;
        font-size: 1.375rem;
        line-height: 1.675rem;
    }
}
a {
    text-decoration: underline;
    color: #502314;
}

.button {
    display: inline-block;
    line-height: 2.5rem;
    border-radius: 1.25rem;
    font-size: 1rem;
    background: #502314;
    color: #F5EBDC;
    padding: 0 30px;
    text-decoration: none;
}
.button-tomate {
    background: #D72300; /* tomate */
}
.button-peche {
    background: #FF8732; /* peche */
}
.button-salade {
    background: #198737; /* salade */
}
.button-abricot {
    background: #FFAA00; /* abricot */
}
.button-blue {
    background: #3A8B9E; /* blue */
}
.button-marine {
    background: #053854; /* marine */
}

ul.pastilles {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}
ul.pastilles li {
    display: inline-block;
}
ul.pastilles a,
ul.pastilles span {
    display: inline-block;
    line-height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 16px;
    text-align: center;
}
ul.pastilles a {
    background-color: #FFAA00;
    text-decoration: none;
}

ul.pastilles a.active {
    background-color: #D72300;
    color: #F5EBDC;
}
.attention {
    font-weight: bold;
    color: #D72300;
}

/******************************************************************************
 * Cover
 ******************************************************************************/
.cover {
    background: #502314;
    padding: 20px 40px 0 40px;
}
.cover .rhklub {
    width:100%;
    text-align:center;
    font-size:60px;
    padding-top:30px;
    padding-bottom:60px;
    line-height: 60px;
    font-family: "Flame";
}
.cover-logo {
    display: block;
    margin: 0 auto 20px auto;
    width: 100%;
    max-width:600px;
}
.cover-illustration {
    display: block;
    margin: 0 auto;
    /*max-height: 67%;*/
    width: 100%;
}


.main {
    padding: 50px 30px;
}

@media only screen and (max-width: 1080px) {
    .desktop {
        display: none;
    }
}
@media only screen and (min-width: 1080px) {
    .mobile {
        display: none;
    }
}
@media only screen and (min-width: 1080px) {
    .main {
        padding: 50px 0;
    }
    .cover {
        position: relative;
        float: left;
        width: 50%;
        min-height: 100vh;
    }
    .cover .rhklub {
        font-size:120px;
        padding-top:90px;
        line-height: 120px;
    }
    .cover-illustration {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 80%;
        transform: translate3d(-50%, 0, 0);
    }
    /* 404 .main, */
    .admin .main,
    .init .main,
    .login .main,
    .logout .main,
    .nodb .main,
    .recover .main,
    .reset .main,
    .sso .main {
        position: relative;
        float: left;
        width: 50%;
        min-height: 100vh;
        padding: 100px 60px;
    }
}

/******************************************************************************
 * Header
 ******************************************************************************/
.header {
    padding: 40px 40px 50px 40px;
    background-color: #502314; /* marron */
    background-color: #FF8732; /* peche */
    background-color: #FFAA00; /* abricot */
    background-color: #FFAA00; /* moutarde */
    background-color: #198737; /* salade */
    background-color: #F5EBDC; /* mayonnaise */
    background-color: #D72300; /* tomate */
    background-color: #3A8B9E; /* blue */
    background-color: #053854; /* marine */


    background-color: #502314; /* marron */
    background-image: url(../img/header.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #F5EBDC; /* mayonnaise */
    text-align: center;
}
.header.peche { background-color: #FF8732; /* peche */ }
.header.abricot { background-color: #FFAA00; /* abricot */ }
.header.moutarde { background-color: #FFAA00; /* moutarde */ }
.header.salade { background-color: #198737; /* salade */ }
.header.tomate { background-color: #D72300; /* tomate */ }
.header.blue { background-color: #3A8B9E; /* blue */ }
.header.marine { background-color: #053854; /* marine */ }

/*
.home-site2 .header,
.formulaire1bis .header,
.info-site2 .header {
    background-image: url(../img/header-salad.png);
}
*/

.user {
    display: none;
}
.user span {
    display: inline-block;
    padding-right: 10px;
}
.user ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.user li {
    display: inline-block;
}
.user li a,
.user li span {
    display: inline-block;
    padding: 0 5px;
    color: #F5EBDC;
    text-decoration: none;
}
.user li:after {
    content: " •";
}
.user li:last-child:after {
    content: "";
}


.menubis {
    display: none;
}
.menubis span {
    display: inline-block;
    padding-right: 10px;
}
.menubis ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menubis li {
    display: inline-block;
}
.menubis li a,
.menubis li span {
    display: inline-block;
    padding: 0 5px;
    color: #F5EBDC;
    text-decoration: none;
}
.menubis li:after {
    content: " •";
}
.menubis li:last-child:after {
    content: "";
}


.header h1 {
    padding-top: 30px;
    font-size: 3rem;
    line-height: 3.5rem;
    margin: 0;
}
.header h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    padding-bottom: 30px;
}


@media only screen and (min-width: 1080px) {
    .header .user {
        display: block;
        float: right;
        text-align: left;
    }
    .header .menubis {
        display: block;
        text-align: left;
    }
    .header h1 {
        font-size: 6.25rem;
        line-height: 7.5rem;
        margin: 0;
    }
    .header h2 {
        font-size: 2.125rem;
        line-height: 2.625rem;
    }
}

.footer {
    position: absolute;
    bottom: 0;
    min-height: 200px;
    width: 100%;
    padding: 60px 40px 30px 40px;
    background-color: #502314;
    background-image: url(../img/footer.png?v=2);
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #fff;
    text-align: center;
    line-height: 2rem;
}
.footer a {
    color: #fff;
    text-decoration: none;
}
.footer ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media only screen and (min-width: 1080px) {
    .footer ul {
        display: block;
    }
}

.footer li {
    display: inline-block;
}
.footer li a {
    display: inline-block;
    padding: 0 5px;
}
.footer li:after {
    content: " •";
}
.footer li:last-child:after {
    content: "";
}

/******************************************************************************
 * Nav
 ******************************************************************************/
.hamburger {
    position: absolute;
    top: 15px;
    right: 25px;
    z-index: 4;
}
@media only screen and (min-width: 1080px) {
    .hamburger {
        display: none;
    }
    .menu {
        display: block;
    }
}

.menu {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -100px;
    width: 375px;
    background: #1e2023;
    color: #F5EBDC; /* mayonnaise */
    font-weight: 300;
    transition: 300ms;
    padding: 60px 30px 30px 30px;
    overflow-y: hidden;
    /* TODO: Trouver une autre solution */
    /* Pour qu'on ne voie pas le menu sur mobile en "tirant" le site vers le bas */
    opacity: 1;
    /*will-change: transform;*/
    z-index: 1;
}
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu a {
    color: #FFAA00;
    color: #F5EBDC; /* mayonnaise */
    text-decoration: none;
    display: block;
    line-height: 3.5rem;
    font-size: 1.8rem;
    text-align: center;
    font-family: "Flame";
}
.container {
    position: relative;
    padding-bottom: 300px;
    background: #F5EBDC; /* mayonnaise */
    min-height: 100vh;
    transition: 300ms;
    z-index: 2;
}

.content {
}
@media only screen and (min-width: 1080px) {
    .content {
        max-width: 1024px;
        padding: 0 30px;
        margin: 0 auto;
    }
}
.image {
    display: block;
    border-radius: 20px;
    width: 800px;
    max-width: 100%;
    margin-bottom: 1rem;
}
/******************************************************************************
 * Animation Menu & Dialog
 ******************************************************************************/
body.showmenu .menu {
  transform: translate3d(-100px, 0, 0);
}
body.showmenu .container {
  transform: translate3d(-375px, 0, 0);
}
body.showdialog,
body.showmenu {
  overflow-y: hidden;
}
body.showmenu .menu {
  overflow-y: scroll;
}

/******************************************************************************
 * Hamburgers
 ******************************************************************************/
.bigmac {
    display:inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.bigmac span {
    position: absolute;
    display: block;
    width: 30px;
    left: 5px;
    height: 2px;
    background: #F5EBDC; /* mayonnaise */
    border-radius:2px;
    transition: .25s;
    /*will-change: transform, opacity;*/
}
.bigmac span:nth-child(1) {
  top:12px;
}
.bigmac span:nth-child(2) {
  top:19px;
}
.bigmac span:nth-child(3) {
  bottom:12px;
}
.showmenu .bigmac span:nth-child(1) {
  top: 19px;
  /*transform: rotate(135deg);*/
  transform: rotate(45deg);
}
.showmenu .bigmac span:nth-child(2) {
  opacity:0;
}
.showmenu .bigmac span:nth-child(3) {
  top: 19px;
  /*transform: rotate(-135deg);*/
  transform: rotate(-45deg);
}

.apple {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.apple span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 2px;
  background: #000;
  border-radius:2px;
  transition: .25s;
  /*will-change: transform;*/
}
.apple span:nth-child(1) {
  top:14px;
}
.apple span:nth-child(2) {
  bottom:14px;
}
.apple span:nth-child(3) {
  display: none;
}
.showmenu .apple span:nth-child(1) {
  top: 19px;
  /*transform: rotate(135deg);*/
  transform: rotate(45deg);
}
.showmenu .apple span:nth-child(2) {
  top: 19px;
  /*transform: rotate(-135deg);*/
  transform: rotate(-45deg);
}

.plus {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.plus span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 2px;
  background: #000;
  border-radius:2px;
  transition: .25s;
  /*will-change: transform;*/
}
.plus span:nth-child(1) {
  top:19px;
  transform: rotate(0deg);
}
.plus span:nth-child(2) {
  top:19px;
  transform: rotate(90deg);
}
.plus span:nth-child(3) {
  display: none;
}
.showmenu .plus span:nth-child(1) {
  transform: rotate(180deg);
}
.showmenu .plus span:nth-child(2) {
  transform: rotate(0deg);
}

.more {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.more span {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  top:16px;
  background: #000;
  border-radius:4px;
  transition: 300ms;
  /*will-change: transform;*/
}
.more span:nth-child(1) {
  left:2.25px;
}
.more span:nth-child(2) {
  left:16px;
}
.more span:nth-child(3) {
  left:29.75px;
}
.showmenu .more span {
  left: 27.5px;
  width: 12.5px;
  height: 12.5px;
  top: 13.5px;
  background: #fdb42b;
  border-radius:6.25px;
}
.showdialog .more span {
  background: #000;
}


/**
 * Show dialog V1
 **/
/*
.showdialog .more span {
  left: 27.5px;
  width: 12.5px;
  height: 12.5px;
  top: 13.5px;
  background: #fdb42b;
  border-radius:6.25px;
}
.showdialog .more span {
  background: #000;
}
*/

/**
 * Show dialog V2
 **/
.showdialog .more span:nth-child(1) {
  top:18.5px;
  width: 30px;
  left: 5px;
  height: 3px;
  border-radius:1.5px;
  transform: rotate(-45deg);
}
.showdialog .more span:nth-child(2) {
  opacity: 0;
}
.showdialog .more span:nth-child(3) {
  top:18.5px;
  width: 30px;
  left: 5px;
  height: 3px;
  border-radius:1.5px;
  transform: rotate(45deg);
}

.times {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.times span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 3px;
  background: #000;
  border-radius:1.5px;
  transition: .25s;
  /*will-change: transform;*/
}
.times span:nth-child(1) {
  top:18.5px;
}
.times span:nth-child(2) {
  top:18.5px;
}
.times span:nth-child(3) {
  display: none;
}
.showdialog .times span:nth-child(1) {
  transform: rotate(45deg);
}
.showdialog .times span:nth-child(2) {
  transform: rotate(-45deg);
}

/******************************************************************************
 * Event
 ******************************************************************************/
.event {
    margin-bottom: 60px;
}
.event h2 {
    margin: 0;
}
.event h3 {
    margin: 0;
}
/******************************************************************************
 * Formulaires
 ******************************************************************************/
.field {
    margin-bottom: 1rem;
}
label {
    display: block;
    font-size: 1.125rem;
    line-height: 2rem;
}
input[type=text],
input[type=password] {
    border: 1px solid #502314;
    border-radius: 6px;
    line-height: 2.5rem;
    min-width: 300px;
    font-size: 1rem;
    padding: 0 10px;
    color: #502314;
    outline: none;
}
select {
    border: 1px solid #502314;
    border-radius: 6px;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    padding: 0 10px;
    color: #502314;
    outline: none;
    background: #fff;
}
input[type=submit] {
    /*
    border: 1px solid #502314;
    border-radius: 6px;
    line-height: 2.5rem;
    background: #502314;
    color: #fff;
    padding: 0 20px;
    min-width: 200px;
    */

    font-size: 1rem;
    display: inline-block;
    line-height: 2.5rem;
    border:0 none;
    cursor:pointer;
    border-radius: 1.25rem;
    background: #502314;
    color: #F5EBDC;
    padding: 0 30px;
    min-width: 200px;
    outline: none;
}

textarea {
    width: 600px;
    max-width: 100%;
    height: 100px;

    border: 1px solid #502314;
    border-radius: 6px;
    line-height: 1.5rem;
    font-size: 1rem;
    padding: 5px 10px;
    color: #502314;
    outline: none;

}

/******************************************************************************
 * Error
 ******************************************************************************/

ul.error {
    list-style: none;
    border: 1px solid #D72300;
    border-radius: 6px;
    background: #fde2e0;
    color: #D72300;
    padding: 10px;
}
.error, .error a {
    color: #D72300;
}
.error label {
    color: #D72300;
}
.error input[type=text],
.error select,
.error textarea {
    border: 1px solid #D72300;
    background: #fde2e0;
    color: #D72300;
}

/******************************************************************************
 * Program
 ******************************************************************************/

.day  {
    padding: 3rem 0 5rem 0;
}
.day:nth-child(even)  {
    color: #F5EBDC; /* mayonnaise */
    background-color: #502314; /* marron */
}
.day:nth-child(1) {
    background-image: url(../img/day1.png);
    background-repeat: no-repeat;
    background-position: 10px bottom;
    background-size: auto 250px;
    padding-bottom: 220px;
}
.day:nth-child(2) {
    background-image: url(../img/day2.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 250px;
    padding-bottom: 220px;
}
.day h2 {
    color: #FFAA00;
    font-size: 7rem;
    line-height: 7rem;
    font-weight: bold;
    margin: 1rem 0 0 0;
}
.day table {
    width:100%;
    border-collapse: collapse;
}
.day th {
    vertical-align: top;
    font-family: "Flame";
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: normal;
    width: 300px;
    text-align: left;
}
.day td {
    vertical-align: top;
    font-family: "Flame";
    font-size: 1.25rem;
    line-height: 1.8rem;
    font-weight: normal;
    text-align: left;
    padding-bottom: 2rem;
}
.day th {
    display: block;
}
.day td {
    display: block;
}
@media only screen and (min-width: 1080px) {
    .day h2 {
        font-size: 16.875rem;
        line-height: 15rem;
    }
    .day table {
        border-collapse: collapse;
        margin-left: 50px;
        margin-top:50px;
    }
    .day th {
        display: table-cell;
        padding-bottom: 2rem;
        width:250px !important;
    }
    .day td {
        display: table-cell;
        font-size: 1.75rem;
        line-height: 2.125rem;
        width:auto !important;
    }

    .day:nth-child(1) {
        background-image: url(../img/day1.png);
        background-repeat: no-repeat;
        background-size: 17% auto;
        background-position: 50px bottom;
    }
    .day:nth-child(2) {
        background-image: url(../img/day2.png);
        background-repeat: no-repeat;
        background-size: 17% auto;
        background-position: 50px bottom;
    }

}

.day .description {
    font-family: "FlameSans";
    font-size: 1rem;
    line-height: 1.5rem;
}

/*day white*/

.day2  {
    padding: 3rem 0 5rem 0;
}
.day2:nth-child(even)  {
    color: #F5EBDC; /* mayonnaise */
    background-color: #502314; /* marron */
}
.day2:nth-child(1) {
    background-image: url(../img/day1.png);
    background-repeat: no-repeat;
    background-position: 10px bottom;
    background-size: auto 250px;
    padding-bottom: 220px;
}
.day2:nth-child(2) {
    background-image: url(../img/day2.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 250px;
    padding-bottom: 220px;
}
.day2 h2 {
    color: #FFAA00;
    font-size: 7rem;
    line-height: 7rem;
    font-weight: bold;
    margin: 1rem 0 0 0;
}
.day2 table {
    border-collapse: collapse;
    color: #F5EBDC; /* mayonnaise */
}
.day2 th {
    vertical-align: top;
    font-family: "Flame";
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: normal;
    width: 300px;
    text-align: left;
}
.day2 td {
    vertical-align: top;
    font-family: "Flame";
    font-size: 1.25rem;
    line-height: 1.8rem;
    font-weight: normal;
    text-align: left;
    padding-bottom: 2rem;
}
.day2 th {
    display: block;
}
.day2 td {
    display: block;
}
@media only screen and (min-width: 1080px) {
    .day2 h2 {
        font-size: 16.875rem;
        line-height: 15rem;
    }
    .day2 table {
        border-collapse: collapse;
        margin-left: 220px;
    }
    .day2 th {
        display: table-cell;
        padding-bottom: 2rem;
    }
    .day2 td {
        display: table-cell;
        font-size: 1.75rem;
        line-height: 2.125rem;
    }

    .day2:nth-child(1) {
        background-image: url(../img/day1.png);
        background-repeat: no-repeat;
        background-size: 17% auto;
        background-position: 50px bottom;
    }
    .day2:nth-child(2) {
        background-image: url(../img/day2.png);
        background-repeat: no-repeat;
        background-size: 17% auto;
        background-position: 50px bottom;
    }

}

.day2 .description {
    font-family: "FlameSans";
    font-size: 1rem;
    line-height: 1.5rem;
}
/******************************************************************************
 * Clear Floated Elements
 * http://sonspring.com/journal/clearing-floats
 ******************************************************************************/
.clear {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    width: 0;
    height: 0;
}


/*******************************************************************************
 * http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified
 * slightly enhanced, universal clearfix hack
 *******************************************************************************/
.clearfix:after {
    font-size: 0;
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '.';
}

.clearfix {
    display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/* close commented backslash hack */

/******************************************************************************
 * Overlay et Cookies
 ******************************************************************************/

.overlay {
  position:absolute;
  top:0;
  z-index:1001;
  width:100%;
  height:100%;
  background:rgba(255, 255, 255, .8);
  padding:120px 20px;
}
.popup {
  position:relative;
  width:840px;
  margin:0 auto;
  max-width:100%;
  border:3px solid #D72300;
  padding:70px 30px;
  text-align:center;
  background: #fff;
}
.popup .inside {
  width:600px;
  max-width:100%;
  margin:0 auto;
}
.popup h2 {
  color:#000;
}

/******************************************************************************
 * Dialog
 ******************************************************************************/

#dialog {
  position:fixed;
  top:0;
  z-index:1001;
  width:100%;
  height:100vh;
  background-color: #F5EBDC;
  padding:0;
  display: none;
}
#dialog-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 48px;
    line-height: 48px;
    cursor: pointer;
}
#dialog-previous {
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -24px;
    font-size: 48px;
    line-height: 48px;
}
#dialog-next {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -24px;
    font-size: 48px;
    line-height: 48px;
}
#dialog-content {
    padding: 68px 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}
#dialog img {
    display: block;
    max-height: 90vh;
    max-width: 100%;
}


@media only screen and (min-width: 1080px) {
    .landscape {
        display: block;
    }
    .col1 {
        width: 50%;
        float: left;
        padding-right: 70px;
    }
    .col2 {
        width: 50%;
        float: left;
    }
    .col3 {
        width: 33.33333333333333%;
        width: 50%;
        float: left;
        padding: 15px;
    }
    .col3 .photo {
        width: 100%;
        height: 0;
        padding-top: 66.69921875%;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    .col3 .photo img {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .grid {
        margin: 0 -15px;
    }
    .c1 {
        width:100%;
        padding:15px;
    }
    .c2 {
        float:left;
        width:50%;
        padding:15px;
    }
    .c3 {
        float:left;
        width:33.3333333333333%;
        padding:15px;
    }
}

.column {
  float: left;
  width: 50%;
  padding: 15px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

table.survey {
    border-collapse: collapse;
}
table.survey th {
    padding-left: 7px;
    padding-right: 7px;
    vertical-align: top;
}
table.survey td {
    text-align: left;
    vertical-align: top;
}


table.facturation {
    border-collapse: collapse;
    margin-bottom:1.5rem;
}
th {
    text-align:left;
    border-bottom: 1px solid #502314;
    width: 400px;
    padding:5px 5px;
}
td {
    text-align:right;
    border-bottom:1px solid #502314;
    width: 100px;
    padding:5px 5px;
}
@media only screen and (max-width: 740px) {
    table.survey th {
        border-bottom: 1px solid #ccc;
    }
    table.survey td {
        border-bottom: 1px solid #ccc;
    }
}


table.demandes {
    border-collapse: collapse;
}
table.demandes th,
table.demandes td {
    text-align:left;
}

table.resto {
    border-collapse: collapse;

}
table.resto th {
    border-bottom: 1px solid #ccc;
    width:200px;
    text-align:left;
    font-weight: bold;
    vertical-align:top;
    padding:10px;
}
table.resto td {
    border-bottom: 1px solid #ccc;
    width:250px;
    text-align:left;
    padding:10px;
}

table.restobig {
    border-collapse: collapse;
    border: 1px solid black;
    border-radius: 10px;
    border-bottom: 1px solid black;
}
table.restobig th {
    border: 1px solid black;
    width:400px;
    text-align:left;
    font-weight: bold;
    vertical-align:top;
    padding:10px;
    border-radius: 10px;

}
table.restobig td {
    border: 1px solid black;
    width:450px;
    text-align:left;
    padding:10px;
    border-radius: 10px;
}