.cover-bg-img { width: 100%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .left-section { -ms-grid-column: 1; grid-column: 1; } .right-section { -ms-grid-column: 2; grid-column: 2; } .title-menu-logo { height: 56px; width: 75px; background-position: bottom center; background-repeat: no-repeat; margin: 0 auto; padding-top: 46px; } .title-menu { text-transform: uppercase; font-weight: 700; font-size:18px; color:#1d1d1d; letter-spacing:2px; text-align:center; margin: 0; padding: 14px 0 50px; } .ligne-plat { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 0 auto; } .ligne-menu { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 0 auto; padding-bottom: 10px; } .flex-vide { width: 230px; margin-right: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .flex-menu { color: #1d1d1d; width: 47px; font-weight: 700; font-size:8.5px; letter-spacing:0.57px; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .flex-plat { margin-right: 10px; color: #1d1d1d; text-transform: uppercase; font-weight: 700; font-size: 20px; letter-spacing:0.86px; margin-bottom: 8px; line-height:20px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .long-plat { font-size: 19px; } .vegan { font-size: 15px; color: #1F917C; font-weight: 400; text-transform: lowercase; letter-spacing: -1px; position: relative; top: -1px; } .sous-plat { margin: 0 auto; width: 300px; padding-right: 0px; font-weight: 400; font-size:15px; color:#1d1d1d; letter-spacing:0.5px; line-height:18px; padding-bottom: 30px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .last { padding-bottom: 60px; } .flex-prix { width: 47px; font-weight: 700; font-size: 18px; letter-spacing:0.86px; color:#1d1d1d; letter-spacing:0.57px; text-align: center; margin-top: -2px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .fp-left { text-align: left !important; } .euro { font-size: 10px; vertical-align: super; letter-spacing:0.57px; } .cents { font-size: 15px; letter-spacing:0.57px; } .traiteur { width: 300px; margin: 0 auto; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .t1 { padding-top: 60px; padding-bottom: 20px; } .t2 { padding-bottom: 60px; } @media screen and (min-width: 420px) { .traiteur { width: 380px; } .t1 { padding-top: 50px; } } .traiteur-img { float: left; margin-top: 6px; height: 50px; width: 47.5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .t1 .traiteur-img { background-image: url('img/menu/traiteur.svg'); } .t2 .traiteur-img { background-image: url('img/menu/epicerie.svg'); } .traiteur-titre { height: 60px; font-size: 20px; line-height:20px; letter-spacing:0.86px; font-weight: 700; text-transform: uppercase; text-align: left; color:white; margin-bottom: 10px; margin-left: 60px; display: flex; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .traiteur-titre span { align-self: flex-end; } .traiteur-content { color: white; font-size:15px; line-height:18px; letter-spacing:0.5px; text-align: left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } @media screen and (min-width: 600px) { .traiteur { width: 565px; } .traiteur-titre { font-size: 24px; line-height:24px; margin-left: 135px; } .traiteur-content { font-size:15px; margin-left: 135px; } .traiteur-img { margin-top: 20px; height: 100px; width: 95px; } } @media screen and (min-width: 860px) { .traiteur { width: 785px; } .traiteur-titre { margin-left: 165px; } .traiteur-content { margin-left: 165px; } .t2 { padding-bottom: 80px; } .t2 .traiteur-img { margin-top: 2px; } } /* Les Formules */ .etudiant { text-align: center; padding: 25px 10px 50px; color: #6d6d6d; font-size: 13px; } .formules-titre { font-weight: 700; font-size: 18px; letter-spacing:2px; text-transform: uppercase; color: #1d1d1d; text-align: center; margin: 10px auto 40px; } .formules { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin: 0 auto; } .form1 { margin-right: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .formule-logo1 { background-image: url('img/menu/boisson_icon.svg'); height: 56px; width: 125px; background-position: left bottom; background-repeat: no-repeat; } .formule-logo2 { background-image: url('img/menu/boisson_icon.svg'), url('img/menu/dessert_icon.svg'); height: 56px; width: 170px; background-position: left bottom, 30% bottom; background-repeat: no-repeat, no-repeat; } .formule-prix { color: #e63c2f; font-size: 50px; font-weight: 400; text-align: right; line-height: 86px; } .formule-content { font-weight:400; font-size:12px; color: #1d1d1d; letter-spacing:2px; text-transform: uppercase; padding-top: 10px; } .formule-title { font-size: 26px; color: #1d1d1d; text-transform: none; letter-spacing:-2px; display: block; margin-left: -1.5px; padding-bottom: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } @media screen and (min-width: 420px) { .form1 { margin-right: 50px; } .formule-logo2 { width: 195px; } .formule-title { font-size: 30px; } } @media screen and (min-width: 600px) { .form1 { margin-right: 100px; } } .roll-salade, .dessert-boisson { display: block; } .roll-salade .flex-plat, .large .flex-plat, .roll-salade .flex-vide, .large .flex-vide { width: 150px; } .dessert-boisson .flex-plat, .supplements .flex-plat { width: 244px; } .boisson .flex-plat, .dessert .flex-plat, .supplements .flex-plat { text-transform: none; font-size: 15px; font-weight: 400; line-height: 18px; } @media screen and (min-width: 420px) { .boisson .flex-plat, .dessert .flex-plat, .supplements .flex-plat { line-height: 23px; } } .rolls .cover-bg-img { background-image: url('img/menu/2.jpg'); } .rolls .title-menu-logo { background-image: url('img/menu/roll_icon.svg'); } .salade .cover-bg-img { background-image: url('img/menu/2.jpg'); } .salade .title-menu-logo { background-image: url('img/menu/salade_icon.svg'); } .bowls .cover-bg-img { background-image: url('img/menu/3.jpg'); } .bowls .title-menu-logo { background-image: url('img/menu/bowl_icon.svg'); } .dessert .cover-bg-img { background-image: url('img/menu/4.jpg'); } .dessert .title-menu-logo { background-image: url('img/menu/dessert_icon.svg'); } .boisson .cover-bg-img { background-image: url('img/menu/5.jpg'); } .boisson .title-menu-logo { background-image: url('img/menu/boisson_icon.svg'); } .supplements .sous-plat { font-size: 14px !important; } @media screen and (min-width: 420px) { .roll-salade .flex-plat, .large .flex-plat, .roll-salade .flex-vide, .large .flex-vide { width: 150px; } .dessert-boisson .flex-plat, .supplements .flex-plat { width: 292px; margin-right: 10px; } .flex-menu { width: 70px; } .flex-prix { width: 70px; font-size: 24px; } .sous-plat { width: 370px; padding-right: 0px; font-size:15px; } .dessert-boisson .sous-plat, .supplements .sous-plat { width: 180px; padding-right: 190px; } .euro { font-size: 12px; vertical-align: super; letter-spacing:0.57px; } .cents { font-size: 18px; letter-spacing:0.57px; } .supplements .sous-plat { font-size: 15px !important; } .only-small-display { display: none; } } @media screen and (min-width: 600px) { .cover-bg-img { height: 400px; } .flex-plat { font-size: 24px; } .long-plat { font-size: 24px; } .roll-salade .flex-plat, .large .flex-plat, .roll-salade .flex-vide, .large .flex-vide { width: 250px; margin-right: 30px; } .dessert-boisson .flex-plat, .supplements .flex-plat { width: 280px; margin-right: 50px; } .flex-menu { width: 86px; font-size:16px; } .flex-prix { width: 86px; font-size: 24px; } .flex-plat { margin-right: 30px; } .sous-plat { width: 537px; padding-right: 0px; font-size:15px; letter-spacing: 0px; } .dessert-boisson .sous-plat, .supplements .sous-plat { width: 230px; padding-right: 186px; } .suppl-br { display: none; } } @media screen and (min-width: 860px) { .roll-salade .flex-plat, .large .flex-plat, .roll-salade .flex-vide, .large .flex-vide { width: 500px; } .roll-salade .sous-plat, .large .sous-plat { width: 650px; padding-right: 138px; } } .separateur-bg { background: none; } @media screen and (min-width: 960px) { .dessert-boisson { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .separateur-bg { background-image: url('img/separateur.png'); background-repeat: no-repeat; background-position: 50% 90%; background-size: 36px 312px; } } @media screen and (min-width: 1200px) { .roll-salade { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .roll-salade .flex-plat, .roll-salade .flex-vide { width: 230px; } .roll-salade .sous-plat { padding-right: 17px; } }