html,
            body {
                height: 100%;
            }
            
            body {
                background-color: #f1f1f1;
            }
            
            .layout-root {
                display: block;
                position: relative;
                width: 100%;
                max-width: 1100px;
                margin-left: auto;
                margin-right: auto;
                background-color: #fff;
                animation-name: layout_root_show;
                animation-delay: 0.8s;
                animation-duration: 0.8s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateY(50px);
            }
            
            @keyframes layout_root_show {
                from {
                    opacity: 0;
                    transform: translateY(50px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
            /*.layout-top {}*/
            
            .layout-top>div:nth-child(1) {
                position: relative;
            }
            
            .layout-top>div:nth-child(2) {
                display: inline-block;
                width: 100%;
                background-color: #a99d94;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
                padding: 40px 40px;
            }
            
            .layout-top>div:nth-child(2):before {
                content: '';
                display: inline-block;
                float: left;
                padding-top: 25%;
                display: none;
            }
            
            .layout-top>div:nth-child(2) p {
                font-family: 'din-light';
                font-size: 17px;
                color: #fff;
                font-style: italic;
                margin-bottom: 10px;
                padding-left: 20px;
                padding-right: 20px;
            }
            
            .layout-top>div:nth-child(2) p:nth-child(1) {
                /* padding-top: 9%; */
            }
            /*
            .layout-top h1 {
                font-family: 'optima-regular';
                font-size: 62px;
                position: absolute;
                font-weight: normal;
                text-align: center;
                width: 100%;
                top: 370px;
                border-bottom: 1px solid #000;
                width: 310px;
                left: calc(50% - 155px);
                margin-right: auto;
                line-height: 58px;
            }
            .layout-top h2 {
                font-family: 'optima-regular';
                font-size: 32px;
                position: absolute;
                font-weight: normal;
                text-align: center;
                width: 100%;
                top: 430px;
                text-transform: lowercase;
                letter-spacing: 0.2em;
            }
            */
            /*.layout-top p {}*/
            
            .layout-top img {
                width: 100%;
            }
            /*.layout-middle {}*/
            /*.layout-grid {}*/
            
            .cel {
                display: inline-block;
                position: relative;
                vertical-align: top;
            }
            
            .cel:before {
                content: '';
                display: inline-block;
                float: left;
            }
            
            .h1-2 {
                width: calc(100% / 2);
            }
            
            .h1-3 {
                width: calc(100% / 3);
                width: 275px;
            }
            
            .h2-3 {
                width: calc(2 * (100% / 3));
                padding-right: 5%;
            }
            
            .h1-4 {
                width: calc(100% / 4);
                width: 275px;
            }
            
            .h2-4 {
                width: calc(2 * (100% / 4));
            }
            
            .h3-4 {
                width: calc(3 * (100% / 4));
                width: calc(3 * 275px);
            }
            
            .v1-1:before {
                padding-top: 100%;
            }
            
            .v1-2:before {
                padding-top: 50%;
            }
            
            .v2-1:before {
                padding-top: 200%;
            }
            
            .v2-3:before {
                padding-top: calc(2 * (100% / 3));
            }
            
            .cel img {
                width: 100%;
            }
            
            .cel h3 {
                font-family: 'din-medium';
                font-size: 17px;
                text-transform: uppercase;
                margin-bottom: 13px;
                letter-spacing: 0.0em;
            }
            
            .cel h4 {
                font-family: 'din-light';
                font-size: 16px;
                text-transform: uppercase;
                letter-spacing: 0em;
                color: #796f6f;
                margin-top: 22px;
            }
            
            .cel p {
                font-family: 'din-light';
                font-size: 14px;
                line-height: 19px;
                letter-spacing: 0.01em;
            }
            /*.cel p span {}*/
            /*.layout-bottom {}*/
            
            .layout-bottom img {
                width: 100%;
            }
            
            .layout-bottom>div:nth-child(1) {
                text-align: center;
                padding: 30px;
            }
            
            .layout-bottom>div:nth-child(1) p {
                font-family: 'din-regular';
                font-size: 17px;
                line-height: 20px;
                letter-spacing: 0em;
                color: #6a5e5e;
            }
            
            .layout-bottom>div:nth-child(2) {
                background-color: #a99d94;
                text-align: center;
                padding: 30px;
            }
            
            .layout-bottom>div:nth-child(2) h5 {
                font-family: 'din-regular';
                font-size: 14px;
                line-height: 18px;
                letter-spacing: 0em;
                text-transform: uppercase;
                color: #f2ebeb;
            }
            
            .layout-bottom>div:nth-child(2) h5 span {
                font-family: 'din-light';
                font-size: 14px;
                line-height: 15px;
                letter-spacing: 0em;
                color: #eee5df;
                text-transform: none;
            }
            
            .layout-bottom>div:nth-child(3) {
                display: block;
                position: relative;
                height: auto;
                background-image: url(../images/restaurant-bottom2.jpg);
                background-size: cover;
                background-position: top center;
                background-repeat: no-repeat;
            }
            
            .layout-bottom>div:nth-child(3) img {
                display: inline-block;
                ;
                position: relative;
                z-index: 1;
            }
            
            .layout-bottom>div:nth-child(4) {
                padding: 30px;
                padding-left: 50px;
                padding-right: 50px;
                background-color: #eeeae7;
            }
            
            .layout-bottom>div:nth-child(4)>div {
                display: inline-block;
                position: relative;
                vertical-align: top;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(1) {
                text-align: center;
                margin-right: 70px;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(1) h6 {
                font-family: 'optima-regular';
                font-size: 40px;
                font-weight: normal;
                border-bottom: 1px solid #484743;
                letter-spacing: 0.01em;
                color: #4c3e2f;
                line-height: 40px;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(1) h7 {
                font-family: 'optima-regular';
                font-size: 22px;
                font-weight: normal;
                letter-spacing: 0.2em;
                text-transform: lowercase;
                color: #4c3e2f;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(2) {
                margin-top: 15px;
                border-right: 1px solid #000;
                padding-right: 30px;
                margin-right: 30px;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(2) p {
                font-family: 'open-sans-semi-bold';
                font-size: 15px;
                color: #4c3e2f;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(3) {
                margin-top: 15px;
                margin-right: 50px;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(3) p {
                font-family: 'open-sans-semi-bold';
                font-size: 15px;
                color: #4c3e2f;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(4) {
                margin-top: 15px;
                float: right;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(4) p a:before {
                content: '';
                display: inline-block;
                width: 40px;
                height: 40px;
                margin-right: 10px;
                background-image: url(../images/instagram.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: top center;
                vertical-align: top;
            }
            
            .layout-bottom>div:nth-child(4)>div:nth-child(4) p a span {
                font-family: 'open-sans-semi-bold';
                font-size: 15px;
                display: inline-block;
                vertical-align: top;
                color: #4c3e2f;
                line-height: 18px;
            }
            
            .tex {
                padding: 30px;
                padding-top: 50px;
            }
            
            .eur {
                font-family: 'open-sans-light';
                font-size: inherit;
                color: inherit;
            }
            
            .lig p {
                color: rgba(255, 255, 255, 0.8);
                font-family: 'din-light';
                font-size: 16px;
                line-height: 1.5;
                letter-spacing: -0.012em;
            }
            
            .dar p {
                color: #736c6c;
                font-family: 'din-light';
                font-size: 16px;
                line-height: 19px;
                letter-spacing: 0.01em;
            }
            
            .lig h3 {
                color: rgba(49, 43, 43, 0.7);
            }
            
            .dar h3 {
                color: #686161;
            }
            
            .cen {
                text-align: center;
            }
            
            .let:after {
                content: '';
                display: inline-block;
                position: absolute;
                z-index: 2;
                font-family: 'conqueror-light';
                font-size: 160px;
                text-transform: uppercase;
                color: #000;
            }
            
            [data-let="s"]:after {
                content: 's';
                left: -49px;
                top: 186px;
            }
            
            [data-let="m"]:after {
                content: 'm';
                right: -96px;
                top: 71px;
            }
            
            [data-let="v"]:after {
                content: 'v';
                left: 32px;
                bottom: -130px;
            }
            
            .logo {
                display: block;
                position: absolute;
                top: 50%;
                width: 100%;
                z-index: 10;
            }
            
            .logo img {
                width: initial;
            }
            /*
    .logo img:nth-child(1){
	display: block;
	margin-left: auto;
	margin-right: auto;	
	animation-name: h1_show;
	animation-delay: 2s;
	animation-duration:  2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity:0; 
	transform: translateY(-50px);
    }
    */
            
            .logo h1 {
                display: block;
                margin-left: auto;
                margin-right: auto;
                animation-name: h1_show;
                animation-delay: 1s;
                animation-duration: 2s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateY(-50px);
            }
            
            .logo h1 img {
                display: block;
                margin-left: auto;
                margin-right: auto;
                height: auto;
            }
            
            .logo hr {
                display: block;
                width: 294px;
                height: 2px;
                background-color: #000;
                border: none;
                margin-top: 10px;
                margin-left: auto;
                margin-right: auto;
                animation-name: hr_show;
                animation-delay: 2.5s;
                animation-duration: 0.8s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateX(-100px);
            }
            
            .logo img:nth-child(3) {
                display: block;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                animation-name: logo2_show;
                animation-delay: 3s;
                animation-duration: 0.8s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateX(-100px);
                height: auto;
            }
            
            .logo a {
                display: block;
                height: 20px;
                line-height: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 3%;
                font-family: 'din-regular';
                font-size: 14px;
                color: #000;
                text-align: center;
                text-decoration: none;
                animation-name: a_show;
                animation-delay: 4s;
                animation-duration: 1s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateY(-50px);
            }
            
            .layout-popup {
                display: block;
                position: absolute;
                z-index: 20;
                left: calc(50% - (600px / 2));
                top: 80px;
                width: 600px;
                padding: 25px;
                background-color: rgba(238, 234, 231, 0.95);
                animation-name: popup_show;
                animation-delay: 5.5s;
                animation-duration: 1s;
                animation-timing-function: ease;
                animation-fill-mode: forwards;
                opacity: 0;
                transform: translateY(200px);
                padding-top: 40px;
                cursor: pointer;
            }
            
            .layout-popup p {
                font-family: 'din-regular';
                font-size: 16px;
                line-height: normal;
                color: #776f69;
                margin-bottom: 10px;
            }
            
            .layout-module-reservations {
                display: flex;
                position: relative;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                padding-top: 50px;
                padding-bottom: 50px;
                justify-content: center;
            }
            
            .layout-module-reservations iframe {
                display: block;
                position: relative;
                width: 100%;
                border: none;
                background-color: transparent;
                overflow: hidden;
            }

            .layout-bandeau{
                display: block;
                position: absolute;
                top: 520px;
                left: 0px;
                width: 100%;
                height: 136px;
                background-color: rgba(255,255,255,0.5);
                z-index: 3;
            }
            
            .layout-tips {
                display: block;
                position: absolute;
                z-index: 3;
                top: 20px;
            }
            
            .layout-tips img {
                width: 100%;                
            }
            
            .michelin {
                /*
                width: 140px;
                right: 5%;
                */
                width: 120px;
                left: 50%;
                top: 20px;
                transform: translateX(-50%);
            }
            
            .lyonheats {
                width: 200px;
                left: 5%;
                margin-top: 20px;                
                cursor: pointer;
            }
            .lyonheats span{
                display: block;
                width: 100%;
                cursor:  pointer;
            }
            
            .lyonheats p {
                font-family: 'open-sans-semi-bold';
                font-size: 12px;
                line-height: 15px;
                text-align: center;
                margin-top: 5px;
            }
            
            @keyframes h1_show {
                from {
                    opacity: 0;
                    transform: translateY(-50px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
            
            @keyframes hr_show {
                from {
                    opacity: 0;
                    transform: translateX(-100px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
            
            @keyframes logo2_show {
                from {
                    opacity: 0;
                    transform: translateX(-100px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
            
            @keyframes a_show {
                from {
                    opacity: 0;
                    transform: translateY(-50px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
            
            @keyframes popup_show {
                from {
                    opacity: 0;
                    transform: translateY(200px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
            
            @media screen and (max-width:1100px) {
                .layout-root {
                    max-width: calc(3 * 275px);
                }
                .layout-popup {
                    top: 10px;
                }
                [data-mob="1"] {
                    display: none;
                }
                [data-mob="2"] {
                    margin-top: -275px;
                    margin-left: 275px;
                    width: calc(2 * 275px);
                    /*background-color: #e8e8e8;*/
                }
                /*.layout-bottom>div:nth-child(3) {}*/
                .layout-bottom>div:nth-child(3) img {
                    height: 600px;
                }
                .layout-bottom>div:nth-child(4)>div:nth-child(1) {
                    margin-right: 30px;
                }
                .layout-bottom>div:nth-child(4)>div:nth-child(3) {
                    margin-right: 30px;
                }
                .layout-bandeau{                 
                    top: 356px;                  
                }
                .logo {                 
                    top: 40%;                 
                }                
                .layout-tips {
                }
            }
            
            @media screen and (max-width:825px) {
                .layout-root {
                    max-width: calc(2 * 275px);
                }
                .layout-top>div:nth-child(2) p:nth-child(1) {
                    /* padding-top: initial; */
                }
                .layout-top>div:nth-child(2) p:nth-child(1) br {
                    display: none;
                }
                .let:after {
                    display: none;
                }
                [data-mob="3"] {
                    display: none;
                }
                [data-mob="4"] {
                    max-width: calc(2 * 275px);
                }
                [data-mob="5"] {
                    width: 275px;
                    height: calc(2 * 275px);
                }
                [data-mob="6"] {
                    margin-top: -275px;
                }
                [data-mob="2"] {
                    width: 275px;
                    margin-top: calc(-2 * 275px);
                    height: calc(2 * 275px);
                }
                .tex br {
                    display: none;
                }
                .layout-bottom>div:nth-child(4) {
                    min-height: 300px;
                }
                .layout-bottom>div:nth-child(3) {
                    overflow: hidden;
                    width: calc(2 * 275px);
                }
                .layout-bottom>div:nth-child(3) img {
                    width: auto;
                    height: 1100px;
                }
                .layout-bottom>div:nth-child(4)>div,
                .layout-bottom>div:nth-child(4)>div:nth-child(2) {
                    display: block;
                    width: 100%;
                    text-align: center;
                    padding: 0px;
                    margin: 0px;
                    border: none;
                }
                .layout-bottom>div:nth-child(4)>div:nth-child(1) {
                    margin: 0px;
                    margin-bottom: 20px;
                }
                .layout-bandeau{
                    top: 0px;
                    background-color: rgba(255,255,255,0.8);
                    height: 120px;
                }
                .layout-tips {
                }
                .lyonheats{
                    width: 150px;
                }
                .michelin{
                    width: 110px;
                }                
            }
            
            @media screen and (max-width:700px) {
                .layout-bottom>div:nth-child(3) {
                    height: auto;
                    width: 100%;
                }
            }
            
            @media screen and (max-width:550px) {
                .layout-root {
                    width: calc(100% - 40px);
                    margin-left: 20px;
                    margin-right: 20px;
                    overflow: hidden;
                }
                .logo h1 img {
                    max-width: 90%;
                }
                .layout-popup {
                    width: 100%;
                    left: 0px;
                }
                .layout-bottom>div:nth-child(3) {
                    width: 100%;
                }
                /*.layout-module-reservations {}*/
                .layout-top img {
                    width: auto;
                    height: 400px;
                }
                .cel {
                    width: 100%;
                    display: block;
                    margin: 0px;
                    height: auto;
                }
                .layout-bandeau{
                    height: 100px;
                }
                .lyonheats{
                    width: 120px;
                    margin-top: 4px;
                }
                .michelin{
                    width: 90px;                    
                }
            }