/* POLICES */ @import url('https://fonts.googleapis.com/css?family=Lato:200,400,700,800,900'); @font-face {font-family: '123cacher'; src: url('/css/fonts/123cacher.eot?v10'); src: url('/css/fonts/123cacher.eot?v10#iefix') format('embedded-opentype'), url('/css/fonts/123cacher.ttf?v10') format('truetype'), url('/css/fonts/123cacher.woff?v10') format('woff'), url('/css/fonts/123cacher.svg?v10#123cacher') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { /* use !important to prevent issues with browser extensions that change fonts */ font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="iconafter-"]:after, [class*=" iconafter-"]:after { font-family: '123cacher'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-crossbold:before { content: "\e933";} .iconafter-crossbold:after { content: "\e933";} .icon-spotfull:before { content: "\e934";} .icon-guy:before { content: "\e900";} .icon-guys:before { content: "\e901";} .icon-arrow-down:before { content: "\e902";} .icon-arrow-left:before { content: "\e903";} .icon-arrow-plain-down:before { content: "\e904";} .iconafter-arrow-plain-down:after { content: "\e904";} .icon-arrow-plain-up:before { content: "\e905";} .icon-arrow-right:before { content: "\e906";} .icon-arrow-up:before { content: "\e907";} .icon-back:before { content: "\e908";} .icon-bin:before { content: "\e909";} .icon-checked:before { content: "\e90a";} .icon-cross:before { content: "\e90b";} .iconafter-cross:after { content: "\e90b";} .icon-delivery:before { content: "\e90c";} .icon-edit:before { content: "\e90d";} .icon-facebook:before { content: "\e90e";} .icon-fat-arrow-down:before { content: "\e90f";} .iconafter-fat-arrow-down:after { content: "\e90f";} .icon-fat-arrow-left:before { content: "\e910";} .icon-fat-arrow-right:before { content: "\e911";} .icon-fat-arrow-up:before { content: "\e912";} .icon-filter:before { content: "\e913";} .icon-find:before { content: "\e914";} .iconafter-find:after { content: "\e914";} .icon-gold:before { content: "\e915";} .icon-google:before { content: "\e916";} .icon-groupe:before { content: "\e917";} .icon-heart:before { content: "\e918";} .icon-like:before { content: "\e919";} .icon-lock:before { content: "\e91a";} .icon-mail:before { content: "\e91b";} .icon-menu-burger:before { content: "\e91c";} .icon-menu-meal:before { content: "\e91d";} .icon-off:before { content: "\e91e";} .icon-page:before { content: "\e91f";} .icon-phone:before { content: "\e920";} .icon-pictures:before { content: "\e921";} .iconafter-pictures:after { content: "\e921";} .icon-points:before { content: "\e922";} .icon-redo:before { content: "\e923";} .icon-reload:before { content: "\e924";} .icon-reservation:before { content: "\e925";} .icon-resto:before { content: "\e926";} .icon-review:before { content: "\e927";} .icon-sav:before { content: "\e928";} .icon-scrollh:before { content: "\e929";} .icon-scrollv:before { content: "\e92a";} .icon-settings:before { content: "\e92b";} .icon-share:before { content: "\e92c";} .icon-sort:before { content: "\e92d";} .icon-spot:before { content: "\e92e";} .icon-time:before { content: "\e92f";} .icon-city:before { content: "\e930";} .icon-twitter:before {content: "\e931";} .icon-warnninging:before {content: "\e932";} .icon-cacher:before { content: "\e935";} .icon-money:before { content: "\e936";} .icon-fail:before { content: "\e937";} .icon-instagram:before { content: "\e938";} .icon-flash:before { content: "\e93c";} .icon-abc:before { content: "\e93f";} .icon-coins:before {content: "\e941";} .icon-cb:before {content: "\e942";} /* chrome fix*/ input:focus, select:focus, textarea:focus, button:focus { outline: none; } [contenteditable="true"]:focus { outline: none; } *:focus { outline: none; } input:focus{line-height: inherit;} /* GENERIQUE */ html { overflow-x:hidden !important; width:100%; box-sizing: border-box;} *, *:after, *:before { position:relative; box-sizing: inherit; } ul, ol, li, dl, dt, dd { padding: 0; margin: 0; list-style: none;} .clearfix:after { content: " "; clear: both; display: block; height: 0; visibility: hidden;} body { font-family: Lato, Verdana, sans-serif; color:#333333; letter-spacing: 0.025em; text-align: center; overflow-x:hidden !important; width:100%;} input, select, textarea, button, .ui-widget{font-family:inherit;} .cnt-full { width: 100%; } .cnt { margin: auto; text-align: center; } .greybg{ background: #f5f5f5;} button{border:0; cursor:pointer; transition:0.2s;} a{ color:#333; text-decoration: underline; cursor:pointer; transition:0.2s;} a:hover{color:#ff344b; } a.disable {opacity:0.4; cursor: default;} a.red-link { color:#ff344b;} a.red-link:hover { color:#333;} a.glow { display:block;} a.glow:after { content:""; z-index: 1; position:absolute; display:block; top:0; left:0; width:100%; height:100%; background: rgba( 0, 0, 0, 0); transition:0.3s; margin:0;} a.glow:hover:after { background: rgba( 0, 0, 0, 0.08);} .dark-screen{ z-index: 90; position:fixed; height:100%; width:100%; background: rgba( 0, 0, 0, 0.5);} .dark-screen.under-page{ z-index: 85;} .dark-screen:not(.active){ display:none;} h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {text-decoration: none; transition:0.2s;} h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {color:#ff344b;} h2{font-weight: 400;} h2.redline{ display:inline-block; clear:both; text-align: center; font-weight: 400;} h2.redline:before{ position:absolute; display:block; color:#ff344b;} h2.redline:after{ content:""; display:block; background:#ff344b; } p {line-height: 1.3em;} p.under-button {font-size: 0.8em; margin-top: 0.5em;} span.unbreakable {display:inline-block;} [class$="-col"] { font-size: 0;} .legals { margin:1em 0; color: #999; font-size: 0.8em; text-align: left;} .three-col > li { float:left; vertical-align: top;} .three-col > .twocol-span { float:left; vertical-align: top; } .three-col > .onecol-span { float:left; vertical-align: top; } .four-col > li { display: inline-block; } body ::-webkit-scrollbar-track{ border-radius: 3px; background-color: #F5F5F5;} body ::-webkit-scrollbar { background-color: #F5F5F5;} body ::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #999;} /* buttons */ .btn-red-big,.btn-grey-big,.btn-edit-big {display:inline-block; border-radius: 3px; text-decoration: none; color:white; font-weight: 400;} .btn-red-med,.btn-grey-med,.btn-edit-med {display:inline-block; border-radius: 3px; text-decoration: none; color:white; } .btn-red-sm,.btn-grey-sm,.btn-edit-sm {display:inline-block; border-radius: 3px; text-decoration: none; color:white; } [class^="btn-"]:before { font-size: 1.15em; margin-right:0.4em; bottom:-0.15em} [class^="btn-"]:after { font-size: 1.15em; margin-left:0.4em; bottom:-0.15em} [class^="btn-red"]{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff334b+0,ec2f45+100 */ background: rgb(255,51,75); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,51,75,1) 0%,rgba(236,47,69,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff334b', endColorstr='#ec2f45',GradientType=0 ); /* IE6-9 */} [class^="btn-red"]:hover{ color:white; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff344b+0,ff344b+100 */ background: rgb(255,52,75); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,52,75,1) 0%,rgba(255,52,75,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff344b', endColorstr='#ff344b',GradientType=0 ); /* IE6-9 */ } [class^="btn-red"]:target{ color:white;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ec2f45+0,ec2f45+100 */ background: rgb(236,47,69); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(236,47,69,1) 0%,rgba(236,47,69,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec2f45', endColorstr='#ec2f45',GradientType=0 ); /* IE6-9 */ } [class^="btn-grey"]{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#999999+0,808080+100 */ background: rgb(153,153,153); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(128,128,128,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#808080',GradientType=0 ); /* IE6-9 */} [class^="btn-grey"]:hover{ color:white; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#999999+0,999999+100 */ background: rgb(153,153,153); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(153,153,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#999999',GradientType=0 ); /* IE6-9 */ } [class^="btn-grey"]:target{ color:white; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#808080+0,808080+100 */ background: rgb(128,128,128); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(128,128,128,1) 0%,rgba(128,128,128,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#808080',GradientType=0 ); /* IE6-9 */ } [class^="btn-edit"]{ color:#333; border: 1px solid #d5dce0;background: white; padding-right:2.5em !important; } [class^="btn-edit"]:after{ content:"\e90d"; width:2em; right:0;text-align: center; color:#999; position:absolute; top:50%; transform: translateY(-35%);font-family: '123cacher'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1em; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} [class^="btn-edit"]:hover{ border: 1px solid #999;} [class^="btn-edit"]:target{ } .btn-cnt {width:100%;} /* forms */ ::-webkit-input-placeholder{ color: #999 !important; opacity: 1 !important;} ::-moz-placeholder{ color: #999 !important; opacity: 1 !important;} :-ms-input-placeholder{ color: #999 !important; opacity: 1 !important;} :-moz-placeholder{ color: #999 !important; opacity:1 !important;} .input-cnt {margin:auto; display: inline-block; width: 100%;} input { border: 1px solid #d5dce0; width:100%; border-radius: 3px; color: #333333; -webkit-appearance: none;-moz-appearance: none;appearance: none; transition: border 0.4s; outline: none;} input[type="submit"] { cursor: pointer; } input[type="search"] {-webkit-appearance: none;-moz-appearance: none;appearance: none; text-overflow: ellipsis;} .delete { color:#999; cursor:pointer; text-align: center;} .delete:hover { color:#333; font-size: 0.7em; cursor:pointer;} .delete:before {content:'\e933'; /* use !important to prevent issues with browser extensions that change fonts */ font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } select { border: 1px solid #d5dce0; width:100%; border-radius: 3px; color: #333333; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url('/images/bt/select-black.png') no-repeat right; background-size: contain; transition: border 0.4s;} select:active, select:hover, select:focus { outline: none;} select::-ms-expand {display: none;} select::-ms-value {background: transparent;} select:not(:disabled):hover , input:not(:disabled):hover, textarea:not(:disabled):hover { border: 1px solid #999;} select option:disabled { color: #ccc; } select:disabled { opacity: 0.5; cursor: default; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;} input[type=number] {-moz-appearance: textfield;} textarea { font-size: 16px; padding: 0.8em; line-height: 1.5em !important; width:100%; border: 1px solid #d5dce0; border-radius: 3px; color: #333333; transition:border 0.4s;} .input-cnt.label { margin-top:1.5em;} .input-cnt.label > label { display:block; position:absolute; top:-1.4em;} .checkbox-cnt label, .radio-cnt label {text-align: left;} form .phone-code > div { float:left; width:calc(50% - 5px);} form .phone-code > div:nth-of-type(1) { margin-right:10px;} .input-cnt.birth input, .input-cnt.birth select {float:left; width:calc((100% - 8px) / 3); margin-left:4px;} .input-cnt.birth > .day {margin-left:0px;} .quantity > .less {-ms-user-select: none;user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;} .quantity > .more {-ms-user-select: none;user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;} /* slider ui */ .ui-slider{ background: white; border: 1px solid #d5dce0; border-radius:10px;} .ui-slider .ui-slider-range{ height:100%; background: #ff344b; border-radius:10px; } .ui-slider .ui-slider-handle { height:1.4em; width:1.4em; background: white; color: #ff344b; border: 2px solid #ff344b; text-align: center; border-radius:20px; box-shadow: 0px -1px 1px 1px rgba(0, 0, 0, 0); transition: background 0.2s, border 0.2s, box-shadow 0.2s; cursor: move; cursor: grab; cursor: -webkit-grab; } .ui-slider .ui-slider-handle:hover, .ui-slider .ui-slider-handle:focus { border: 2px solid white; background: #ff344b; color:white; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);} .slider-h { margin-top:-0.3em; margin-bottom:0.4em;} .slider-h #radius {text-align: center; margin-bottom:0.4em;} .slider-h .ui-slider-horizontal { height:0.6em; width:calc(100% - 0.7em); margin-left:0.35em;} .slider-h .ui-slider-horizontal .ui-slider-range {} .slider-h .ui-slider-horizontal .ui-slider-handle {top:-0.4em; margin-left:-0.7em;} .slider-h .ui-slider-horizontal .ui-slider-handle:before { font-size: 12px; text-align:center; content: "\e929"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 0.2s;} /* autocomplete /////////////////////*/ .ui-autocomplete { background: white; border-radius: 3px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.2); max-height:200px; overflow-y: scroll; -webkit-overflow-scrolling: touch;} .ui-autocomplete.source:hover { background: #454545;} .ui-autocomplete .ui-menu-item { padding:0; margin:0; background:white; border:none; height:auto; width:100%; list-style-image: none;} .ui-autocomplete .ui-menu-item:hover { padding:0; margin:0; background:white; border:none;} .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper{ display:block; height:auto !important; width:100%; padding:12px 15px; margin:0; -webkit-transition: 0.7s; -o-transition: 0.7s; background:white; transition: 0.7s; line-height:1.1em; color: #333; text-decoration: none; border:none; text-align: left; text-overflow: ellipsis !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important;} .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover, .ui-autocomplete .ui-menu-item:hover .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete .ui-menu-item.ui-state-active .ui-menu-item-wrapper{ background:#f5f5f5; display:block; transition: 0.7s; color: #333; text-decoration: none;} .ui-autocomplete .ui-menu-item.autocomplete-resto .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item.autocomplete-place .ui-menu-item-wrapper, .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper { padding-left:40px ;} .ui-autocomplete .ui-menu-item.autocomplete-resto .ui-menu-item-wrapper:before, .ui-autocomplete .ui-menu-item.autocomplete-place .ui-menu-item-wrapper:before, .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper:before { display:inline-block; position:absolute; left:5px; top:17px; color:#ccc; width:30px; margin-right:5px; text-align: center; transition:0.3s; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 0.2em; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .ui-autocomplete .ui-menu-item.autocomplete-resto:hover .ui-menu-item-wrapper:before, .ui-autocomplete .ui-menu-item.autocomplete-place:hover .ui-menu-item-wrapper:before, .ui-autocomplete .ui-menu-item.autocomplete-kw:hover .ui-menu-item-wrapper:before, .ui-autocomplete .ui-menu-item.autocomplete-resto .ui-menu-item-wrapper.ui-state-active:before, .ui-autocomplete .ui-menu-item.autocomplete-place .ui-menu-item-wrapper.ui-state-active:before, .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper.ui-state-active:before { color:#ff344b; } .ui-autocomplete .ui-menu-item.autocomplete-resto .ui-menu-item-wrapper:before {content:'\e926'; font-size: 24px; } .ui-autocomplete .ui-menu-item.autocomplete-place .ui-menu-item-wrapper:before {content:'\e92e'; font-size: 20px; } .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper:before {content:'\e93f'; font-size: 25px; top:20px} /* Error */ .error, input.error, textarea.error, select.error, [type="checkbox"].error + label, [type="radio"].error + label { border-radius: 3px; margin-bottom:0 !important;} .error, input.error, textarea.error, select.error { border:1px solid #ff344b; } .error-msg {color:#ff344b; font-size: 14px; text-align: left; margin:0.3em 0 1em 0; padding-top:0.2em; clear:both;} .radio-cnt.error {border:1px solid #ff344b; border-radius: 3px;} .input-cnt.required > label:after { content:"*";} .checkbox-cnt.required > label:after , .radio-cnt.required > label:after { content:"*";} /* messages */ .warn { margin:1.2em 0; padding:1em; background: #fff8bf; color: #f88701; border-radius:3px;} .warn a { color: #f88701; } .success { margin:1.2em 0; padding:1em; background: #ecffca; color: #82be19; border-radius:3px;} .success a { color: #82be19; } /* Geo fields */ .ville_cp:not(.styled-select) , .ville.text { font-weight:700; width:100%; text-align: left; background: #ecffca; color: #333; border-radius:3px; } /* Radio custom */ @media screen and (min-width: 0px) { /* Base for label styling */ [type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; left: -9999px;} [type="radio"]:not(:checked) + label, [type="radio"]:checked + label { padding-left: 1.75em; display:block; cursor: pointer; } /* checkbox aspect */ [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border: 1px solid #ccc; background: #fff; border-radius: 15px; box-shadow: inset 0 0 0px 3px rgba(0,0,0,.1); transition:0.3s;} [type="radio"]:checked + label:before { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border: 1px solid #ccc; background: #fff; border-radius: 15px; transition:0.3s;} input[type="radio"]:not(:checked) + label:hover:before{ border: 1px solid #999;} /* checkbox aspect error */ [type="radio"].error:not(:checked) + label:before { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border: 1px solid #ff344b; background: #fff; border-radius: 15px; box-shadow: inset 0 0 0px 3px rgba(0,0,0,.1);} [type="radio"].error:checked + label:before { content: ''; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border: 1px solid #ff344b; background: #fff; border-radius: 15px;} /* checked mark aspect */ [type="radio"]:not(:checked) + label:after,[type="radio"]:checked + label:after { content: ''; position: absolute; width:10px; height: 10px; top: 4px; left: 5px; background:#ff344b; border-radius: 5em; transition: all .2s;} /* checked mark aspect changes */ [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0);} [type="radio"]:checked + label:after { opacity: 1; transform: scale(1);} /* disabled checkbox */ [type="radio"]:disabled:not(:checked) + label:before{ width: 16px; height: 16px; border: 1px solid #ccc; background: #eee; border-radius: 15px; box-shadow: inset 0 0 0px 3px rgba(0,0,0,.05);} [type="radio"]:disabled:checked + label:before { } [type="radio"]:disabled:checked + label:after { background:#999;} [type="radio"]:disabled + label { color: #999;} /* accessibility */ [type="radio"]:checked:focus + label:before,[type="radio"]:not(:checked):focus + label:before {} /* hover style just for information */ [type="radio"] + label:hover:before { border: 1px solid #808080!important;} } /* Checkbox custom */ @media screen and (min-width: 0px) { /* Base for label styling */ input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: absolute; left: -9999px;} input[type="checkbox"]:not(:checked) + label:not(.switch), input[type="checkbox"]:checked + label:not(.switch), a.checkbox:not(.switch) { padding-left: 1.75em; display:block; cursor: pointer; text-decoration: none; } /* checkbox aspect */ input[type="checkbox"]:not(:checked) + label:not(.switch):before, a.checkbox:not(.checked):not(.switch):before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 1px solid #ccc; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); transition:0.3s;} input[type="checkbox"]:checked + label:not(.switch):before, a.checkbox.checked:not(.switch):before{ content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 0px solid #ff344b; background: #ff344b; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); transition:0.3s;} input[type="checkbox"]:not(:checked) + label:hover:before, a.checkbox:not(.checked):hover:before { border: 1px solid #999;} /* checkbox aspect error */ input[type="checkbox"].error:not(:checked) + label:not(.switch):before, a.checkbox.error:not(.checked):not(.switch):before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 1px solid #ff344b; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);} input[type="checkbox"].error:checked + label:not(.switch):before , a.checkbox.error.checked:not(.switch):before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 0px solid #ff344b; background: #ff344b; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);} /* checked mark aspect */ input[type="checkbox"]:not(:checked) + label:not(.switch):after, input[type="checkbox"]:checked + label:not(.switch):after, a.checkbox:not(.checked):not(.switch):after, a.checkbox.checked:not(.switch):after{ font-family: '123cacher' !important; content: '\e90a'; position: absolute; top: 0.1em; left: 0.1em; font-size: 1.1em; line-height: 1em; color: white; transition: all .2s;} /* checked mark aspect changes */ input[type="checkbox"]:not(:checked) + label:not(.switch):after, a.checkbox:not(.checked):not(.switch):after{ opacity: 0; transform: scale(0);} input[type="checkbox"]:checked + label:not(.switch):after, a.checkbox.checked:not(.switch):after{ opacity: 1; transform: scale(1);} /* disabled checkbox */ input[type="checkbox"]:disabled:not(:checked) + label:not(.switch):before, a.checkbox.disabled:not(.checked):not(.switch):before{ box-shadow: none; border-color: #ccc; background-color: #f5f5f5;} input[type="checkbox"]:disabled:checked + label:not(.switch):before, a.checkbox.disabled.checked:not(.switch):before{ box-shadow: none; border-color: #ccc; background-color: #ccc;} input[type="checkbox"]:disabled:checked + label:not(.switch):after, a.checkbox.disabled.checked:not(.switch):after{ color: #999;} input[type="checkbox"]:disabled + label:not(.switch), a.checkbox.disabled:not(.switch) { color: #999;} /* hover style just for information */ input[type="checkbox"]:not(:switch) + label:not(.switch):hover:before, a.checkbox:not(.switch){ border: 1px solid #808080!important;} } /* Swicth custom */ @media screen and (min-width: 0px) { /* Base for label styling */ input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { position: absolute; left: -9999px;} input[type="checkbox"]:not(:checked) + label.switch, input[type="checkbox"]:checked + label.switch { padding-left: 3.8em; display:block; cursor: pointer; } /* checkbox aspect */ input[type="checkbox"] + label.switch:before{ content: ''; position: absolute; left: 0; top: 0; width: 3em; height: 1.5em; background: #fff; border-radius: 3em; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);} input[type="checkbox"]:checked + label.switch:before { border: 1px solid #85da3a;} input[type="checkbox"]:not(:checked) + label.switch:before{ border: 1px solid #ccc;} /* checked mark aspect */ input[type="checkbox"] + label.switch:after { font-family: '123cacher' !important; content: ''; position: absolute; top: 3px; width:calc(1.5em - 6px); height:calc(1.5em - 6px); border-radius: 20px; transition: all .2s;} input[type="checkbox"]:not(:checked) + label.switch:after { left: 3px; background:#ccc;} input[type="checkbox"]:checked + label.switch:after { left:calc(3em - (1.5em - 3px)); background:#85da3a;} /* disabled checkbox */ input[type="checkbox"]:disabled:not(:checked) + label.switch:before{ box-shadow: none; border-color: #ccc; background-color: #f5f5f5;} input[type="checkbox"]:disabled:checked + label.switch:before { box-shadow: none; border-color: #ccc; background-color: #ccc;} input[type="checkbox"]:disabled:checked + label.switch:after { color: #999;} input[type="checkbox"]:disabled + label.switch { color: #999;} /* hover style just for information */ input[type="checkbox"] + label.switch { line-height: 1.4em;} } /* faq */ .faq > ul > li { border:1px solid #d5dce0; background:white; text-align: left; border-radius:3px; cursor:pointer; transition:0.3s;} .faq > ul > li:hover { border:1px solid #f5f5f5; background:#fafafa; border-radius:3px;} .faq > ul > li:after { display:block; position: absolute; top:0; bottom:0; right:0; text-align: center; transition:0.3s;} .faq > ul > li:hover:after { transform:scale(1.2);} .faq > ul > li > div { max-height:1000px; overflow:hidden; border-top:1px solid #d5dce0; transition:0.3s;} .faq > ul > li:not(.active) > div { max-height:0; margin:0; border:0px solid #f5f5f5;} .faq > ul > li.active:after {content:"\e912"; } /* line tabs*/ ul.line-tabs > li:first-of-type:last-of-type { background: none; color:#333; box-shadow: none;} ul.line-tabs > li:first-of-type:last-of-type a { background: none; color:#333; font-size: 1.25em; cursor: default; padding:0;} /* header */ body > header { background-color: #ff344b;} body > header > .logo { float: left;} /* breadcrumb */ .breadcrumb {padding:17px 0;} .breadcrumb > ol { width:1000px; margin:auto; font-size: 14px;} .breadcrumb > ol > li { display: inline; float: left; color:#999; } .breadcrumb > ol > li:after {content:">"; margin:5px;} .breadcrumb > ol > .back:after {content:"|";} .breadcrumb > ol > li:last-child:after {content:""; display:none;} .breadcrumb > ol > li > a {color:#999; text-decoration: none;} .breadcrumb > ol > li > a:hover {color:#ff344b; text-decoration: none;} .breadcrumb > ol > li > a:before {color:#999; text-decoration: none; } .breadcrumb > ol > .back > a { display:inline-block; width:25px; height:14px;} .breadcrumb > ol > .back > a:before { display:inline; color:#999; } .breadcrumb > ol > .back:hover > a:before { color:#ff344b; } /* tooltip */ .tipso_bubble, .tipso_bubble > .tipso_arrow { box-sizing: border-box; } .tipso_bubble { position: absolute; text-align: center; border-radius: 3px; z-index: 9999; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2); } .tipso_style { cursor: help; border-bottom: 0px; } .tipso_title { border-radius: 6px 6px 0 0; } .tipso_content { word-wrap: break-word; padding: 0.5em; } .tipso_content p { line-height: 1.4em; letter-spacing: 0.015em; margin: 0.3em auto 0.5em auto;} .tipso_bubble.tiny { font-size: 0.6rem; } .tipso_bubble.small { font-size: 0.8rem; } .tipso_bubble.default { font-size: 1rem; } .tipso_bubble.large { font-size: 1.2rem; width: 100%; } .tipso_bubble > .tipso_arrow { position: absolute; width: 0; height: 0; border: 8px solid; pointer-events: none; } .tipso_bubble.top > .tipso_arrow { border-top-color: #000; border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; top: 100%; left: 50%; margin-left: -8px; } .tipso_bubble.bottom > .tipso_arrow { border-bottom-color: #000; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; bottom: 100%; left: 50%; margin-left: -8px; } .tipso_bubble.left > .tipso_arrow { border-left-color: #000; border-top-color: transparent; border-bottom-color: transparent; border-right-color: transparent; top: 50%; left: 100%; margin-top: -8px; } .tipso_bubble.right > .tipso_arrow { border-right-color: #000; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; top: 50%; right: 100%; margin-top: -8px; } .tipso_bubble .top_right_corner, .tipso_bubble.top_right_corner { border-bottom-left-radius: 0; } .tipso_bubble .bottom_right_corner, .tipso_bubble.bottom_right_corner { border-top-left-radius: 0; } .tipso_bubble .top_left_corner, .tipso_bubble.top_left_corner { border-bottom-right-radius: 0; } .tipso_bubble .bottom_left_corner, .tipso_bubble.bottom_left_corner { border-top-right-radius: 0; } .tipso_bubble > .tipso_arrow { z-index:100; } .tipso_bubble > .tipso_arrow:after { z-index:90; content:''; position:absolute; display:block; width:12px; height:12px; transform: rotate(45deg); } .tipso_bubble.top > .tipso_arrow:before, .tipso_bubble.top > .tipso_arrow:after { box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1); top:-14px; left:-6px; } .tipso_bubble.bottom > .tipso_arrow:before, .tipso_bubble.bottom > .tipso_arrow:after { box-shadow: -2px -2px 2px 0px rgba(0, 0, 0, 0.1); top:3px; left:-6px; } .tipso_bubble.left > .tipso_arrow:before, .tipso_bubble.left > .tipso_arrow:after { box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.1); top:-6px; left:-15px; } .tipso_bubble.right > .tipso_arrow:before, .tipso_bubble.right > .tipso_arrow:after { box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1); top:-6px; left:3px; } .tipso_bubble { box-sizing:border-box; line-height: 1.6em; min-width:auto; max-width: 320px;} /* slick-dots */ .slick-dots { margin-top:0px; margin-bottom: 0px; width: 100%;} .slick-dots li {display: inline-block; margin-left: 5px; margin-right: 5px;height:15px; line-height: 0;} .slick-dots button { background: #bbb; font-size: 0; width: 12px; height:12px; padding: 0; border-radius: 7px; } .slick-dots .slick-active button { background: #ff344b;} /* basic slider */ .basic-slider .slick-prev, .basic-slider .slick-next { position: absolute; font-size:0; z-index:100; width:40px; height:40px; top:calc(50% - 20px); margin: 0 10px; border:0px solid white; border-radius:50px; color:white; text-align: center; cursor:pointer; transition:0.2s; background: none; color:#fff;} .basic-slider .slick-prev:hover, .basic-slider .slick-next:hover { transform: scale(1.2);} .basic-slider .slick-prev:before, .basic-slider .slick-next:before {font-size: 22px; top:calc(50% - 11px); text-shadow: 0 0 3px rgba(0,0,0,0.8); font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition:0.2s;} .basic-slider .slick-prev:hover:before, .basic-slider .slick-next:hover:before { text-shadow: 2px 2px 5px rgba(0,0,0,0.4);} .basic-slider .slick-prev { left:0;} .basic-slider .slick-prev:before { content:'\e910'; left:-0.1em; } .basic-slider .slick-next { right:0;} .basic-slider .slick-next:before { content:'\e911'; right:-0.1em; } /* city-choice */ .city-choice > .city-choice-bt { width: 100%; height: 43px; width: 250px; padding: 13px 0; border-radius: 3px; background: #db2d40; color: white; font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: 0.2s; } .city-choice > .city-choice-bt span { float:left; width:175px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .city-choice > .city-choice-bt:before { float: left; margin: -2px 13px; font-size: 19px;} .city-choice > .city-choice-bt:after { position:absolute; right:10px; top:16px; font-size: 10px;} .city-choice > .city-choice-bt:hover {background: #ec2f45;} .city-choice > .city-choice-bt > .text-bt { display: none;} .city-choice > .city-choice-bt > .text-city { display: inline;} .city-choice > .city-choice-layer { z-index: 100; opacity: 0.7; position: absolute; top: 43px; width: 300px; max-height: 0; line-height: 1.1em; background: white; text-align: left; box-shadow: 1px 4px 7px 0px rgba(0, 0, 0, 0.2); overflow: hidden; transition: 0.4s;} .city-choice > .city-choice-layer > form { padding: 10px;} .city-choice > .city-choice-layer > form:before { z-index:10;position: absolute; top: 18px; left: 18px; color: #d5dce0; font-size: 14px;} .city-choice > .city-choice-layer > form > input[type=search] {width: 100%; line-height: 1.1em; padding-left: 28px; padding-right:15px;} .city-choice > .city-choice-layer > form > .delete { float:right;} .city-choice > .city-choice-layer > ul {} .city-choice.active > .city-choice-bt {background: white; color: #333; border-radius: 3px 3px 0 0;} .city-choice.active > .city-choice-bt:after {content: "\e905";} .city-choice.active > .city-choice-bt > .text-bt { display: inline;} .city-choice.active > .city-choice-bt > .text-city { display: none;} .city-choice.active > .city-choice-layer{ opacity:1; max-height: 450px;} /* autocomplete citychoice /////////////////////*/ .city-choice .ui-autocomplete { position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; height:auto !important; overflow-y: hidden !important; box-shadow: none !important; border:none !important; outline:none !important; border-radius:0; transition:0.4s;} /* auto-promo */ .auto-promo{ text-align: center; overflow: hidden; max-width:1000px;} .auto-promo > a > img { width:100%; height:auto; margin:auto; text-align: center;} /* promo pro */ .commercial-link {display: block; margin: 1em;} .promo-pro { width: 1000px; height: 260px; margin: 12px auto; overflow: hidden;} .promo-pro > a {display: block; width:100%; height:100%;} .promo-pro > a > div { position: absolute; top: 25%; left: 0; width: 100%; font-size: 30px; font-weight: 700; color:white; } .promo-pro > a > div > span:not(.btn-red-big) { display:block; margin:4px auto 30px auto; font-size: 28px; font-weight: 400;} .promo-pro > a > div > span.btn-red-big { display:inline-block; } .promo-pro > a > .portrait { display: none;} .promo-pro.onecol-span { width: 312px; height: 600px; margin: 85px auto auto auto;} .promo-pro.onecol-span > a > div { top: 15%; font-size: 30px;} .promo-pro.onecol-span > a > div > span { margin: 30px auto 30px auto; padding:0 20px;} .promo-pro.onecol-span > a > .portrait { display: block;} .promo-pro.onecol-span > a > .landscape { display: none;} /* promo externe */ .promo-ext { text-align: center; overflow: hidden;} /* promo inlist / inrestotab */ .promo-inlist { text-align: center; overflow: hidden;} .promo-in-resto-tab { text-align: center; overflow: hidden;} .promo-in-resto-tab .warn { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 0;} .delivery-byresto-warn-cnt {display: flex; flex-direction: column; align-items: center;} .delivery-byresto-warn-cnt .delivery-byresto-warn { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background-color: #128ee9; border-radius: 3px; color:white; margin-top: 15px; padding: 15px 25px 15px 25px; max-width: 100%; width:488px; } .delivery-byresto-warn-cnt .delivery-byresto-warn .picto {margin-right: 25px;} .delivery-byresto-warn-cnt .delivery-byresto-warn .picto:before {font-size: 2em} .delivery-byresto-warn-cnt .delivery-byresto-warn .text { flex:1;text-align: left; max-width: 400px; } .delivery-byresto-warn-cnt .delivery-byresto-warn .text .title { margin-top: 0; margin-bottom: 0.2em; font-weight: 700} .delivery-byresto-warn-cnt .delivery-byresto-warn .text .desc { margin-top: 0; margin-bottom: 0.2em; font-size: 0.8em; line-height: 1.2em;} /* promo */ .percent-promo-big{ z-index: 3; position: absolute; top:0; right:0; width:195px;} .percent-promo-big > img { width:100%; height:auto; top:0; } .percent-promo-big > span {position: absolute; width: 100%; top:0; right:0; padding: 15px 12px; color:white; text-align: right; font-size: 35px; } .percent-promo-med { z-index: 3; position: absolute; top:0; right:0; width:90px;} .percent-promo-med > img { width:100%; height:auto; top:0; } .percent-promo-med > span {position: absolute; width: 100%; top:0; right:0; padding: 6px 5px; color:white; text-align: right; font-size: 16px; font-weight: 700; } .percent-promo-sm{ z-index: 3; position: absolute; top:0; right:0; width:70px;} .percent-promo-sm > img { width:100%; height:auto; top:0; } .percent-promo-sm > span {position: absolute; width: 100%; top:0; right:0; padding: 4px 3px; color:white; text-align: right; font-size: 14px; font-weight: 700; } /* coockie warnninging */ .cookie-warnning { z-index: 100; padding: 10px 15px ; font-size: 12px; text-align: left; background: white; width:100%;} .cookie-warnning.active { display:none;} .cookie-warnning > span { display:block; margin-right:10px;} .cookie-warnning > .iconafter-cross {display: block; float: right; cursor: pointer;} /* info-point */ .info-point { display:inline-block; width: 1.2em; height:1.2em; line-height: 1.16em; font-size: 1em; margin:auto auto auto 0.5em; vertical-align: middle; background: #ccc; color: white; border-radius: 55px; cursor:help; text-align: center;} /* dev */ .hidden{display:none;} .cursor{cursor:pointer;} /* loader */ .loading { z-index: 500; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); } .loading:after { content:''; display:block; z-index: 10; position:absolute; width:75px; height:75px; margin:auto; top:0; bottom:0; left:0; right:0; background: url(/images/loader/spin.gif) no-repeat center; background-size: 100%; } /* ---- Globale responsive -------------------------------------------------------*/ .city > .banner { padding:1px; } .city > .banner span { display: block; padding-top: 1em; color:white; font-weight: 700; text-shadow: 0 0 5px rgba(0,0,0,1);} .city .cnt.title { } .city .cnt.title h1 { display: inline-block; padding-top: 0.5em; margin-top: 0; margin-bottom: 0; color:#333; } .city .cnt.title h1 .surlign { display:inline; font-size: 0.85em; font-weight: 400; margin-bottom:0.3em; } @media screen and (min-width: 1000px) { .hide-10k{display:none;} /* GENERIQUE */ .cnt { width: 100%; max-width: 1000px;} h2{font-size: 32px;} h2.redline{ margin: 40px auto 25px auto; font-size: 32px;} h2.redline:before{ left:-35px; top:8px;font-size: 22px;} h2.redline:after{ margin: 16px auto auto auto; width:40%; height:2px;} .three-col > li { width: calc(33.33% - 22px); margin-right: 32px; font-size: 14px;} .three-col > li:last-child { width:calc(33.33% - 22px); margin-right: 0px; } .three-col > .twocol-span { width:calc(66.6% - 32px); margin-right:32px; } .three-col > .onecol-span { width:33.33%;} .four-col > li { width: calc(25% - 25px); margin-right: 25px;} .four-col > li:last-child { margin-right: 0px;} body ::-webkit-scrollbar {width: 8px; } /* buttons */ .btn-red-big,.btn-grey-big,.btn-edit-big { height: 45px; line-height: 40px; padding: 0px 15px; border-radius: 3px; font-size: 16px; } .btn-red-med,.btn-grey-med,.btn-edit-med { height: 35px; line-height: 32px; padding: 0px 20px; font-size: 14px;} .btn-red-sm,.btn-grey-sm,.btn-edit-sm { height:30px; line-height: 27px; padding: 0px 20px; font-size: 12px;} .search-area { height: 10px; margin-top:23px; background: white; border: 1px solid #d5dce0; border-radius:10px; } .search-area > .fill { height: 8px; background: #ff344b; width:20%; border-radius:10px; } .search-area > .icon-scrollh { position:absolute; top:-6px; left:20%; margin-left:-10px; height: 21px; width:21px; background: white; border: 2px solid #ff344b; border-radius:20px; color: #ff344b; font-size: 12px; text-align:center; padding-top:3px; box-shadow: 0px -1px 1px 1px rgba(0, 0, 0, 0); transition:0.2s; cursor: move; cursor: grab; cursor: -webkit-grab;} .search-area > .icon-scrollh:hover { border: 2px solid white; background: #ff344b; color:white; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);} .search-area > .icon-scrollh > .valor { position:absolute; width:60px; top: -100%; left:-21px; text-align: center; font-weight: 900; color: #ff344b; } /* forms */ input { height: 30px; font-size: 16px; padding: 0 12px 0 12px;} input.med { height: 35px; } input.big { height: 50px; font-size: 16px; padding: 0 14px 0 14px;} form.med input { height: 35px; } form.big input { height: 50px; font-size: 16px; padding: 0 14px 0 14px;} select { height: 30px; font-size: 16px; padding: 0 28px 0 12px!important;} select.med { height: 35px; font-size: 16px; padding: 2px 28px 0 14px!important;} select.big { height: 50px; font-size: 16px; padding: 0 28px 0 14px!important;} form.med select { height: 35px;} form.big select { height: 50px; font-size: 16px; padding: 0 28px 0 14px!important;} form .button { height: 30px; font-size: 16px; line-height: 27px; padding: 0 12px 0 12px;} form.med .button { height: 35px; line-height: 35px; } form.big .button { height: 50px; font-size: 16px; line-height: 45px; padding: 0 14px 0 14px;} /* Geo fields */ .ville_cp:not(.styled-select) , .ville.text {padding: 15px 1em; width:100%; text-align: left;} /* faq */ .faq { float:left; width:100%; margin-top:35px;} .faq > ul > li { width:100%; padding:15px 50px 15px 20px; margin-bottom:20px; font-size: 18px;} .faq > ul > li > h3 { font-size: 18px; margin:0;} .faq > ul > li:after { height:50px; width:50px; line-height: 50px; } .faq > ul > li > div { padding:0px; margin:15px 0 0 0;} .faq > ul > li > div > p { font-size: 14px; width:80%;} /* line tabs*/ ul.line-tabs { display:table; text-align: center; margin:30px auto;} ul.line-tabs > li { display:table-cell; background: #f5f5f5; border: 1px solid #d5dce0; border-right:0;} ul.line-tabs > li > a { display:block; width:100%; height:100%; padding: 9px 15px 12px 15px; line-height: 1em; color: #999; text-decoration: none; transition:0.3s;} ul.line-tabs > li:not(.active) > a:hover { color:#333; background:#eee;} ul.line-tabs > li:nth-of-type(1) { border-radius: 5px 0 0 5px; } ul.line-tabs > li:last-of-type { border-radius: 0 5px 5px 0; border-right: 1px solid #d5dce0; } ul.line-tabs > li.active { background: #666; border: 0; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);} ul.line-tabs > li.active > a { color:white;} /* breadcrumb */ .breadcrumb { padding:14px 0 0 0;} /* more picture */ a.more-pictures { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); } a.more-pictures > span { position:absolute; top:calc(50% - 20px); left:0; width:100%; font-size:40px; line-height:40px; color:white; text-align: center; font-weight: 700;} a.more-pictures.small > span { position:absolute; top:calc(50% - 11px); left:0; width:100%; font-size:22px; line-height:22px; color:white; text-align: center; font-weight: 700;} /* header */ body > .city-choice { position:absolute; z-index:110; display:block; left:300px; top: 12px; margin: auto;} .city-choice > .city-choice-layer > form > .delete { float:right; margin-top:-30px; height:30px; width:25px; font-size: 12px; line-height: 32px;} body > header { z-index: 100; height: 65px; } body > header > .logo { margin: 7px 30px;} body > header > nav { z-index: 10; position:absolute; top:0; right: 0; width:calc(100% - 550px); height:100%; } body > header > nav > ul.tabs { display:none;} body > header > nav > ul.m-burger > li { } body > header > nav > ul.m-burger > li > ul { float:right; height:65px; } body > header > nav > ul.m-burger > li > ul > li { float:left; height:100%; } body > header > nav > ul.m-burger > li > ul > li > a { display:block; height:100%; padding: 21px 10px; color:white; text-decoration: none; transition:0.3s;} body > header > nav > ul.m-burger > li > ul > li > a:before { font-size:13px; margin-right:5px;} body > header > nav > ul.m-burger > li > ul > li > ul > li > a:after { font-size:10px; margin-left:5px;} body > header > nav > ul.m-burger > li > ul > li:hover > a { background:white; color:#ff344b;} body > header > nav > ul.m-burger > li.language { position:absolute; top:5px; right:5px; } body > header > nav > ul.m-burger > li.language > a { display: inline-block; width: 17px; height: 17px; border-radius: 15px; text-align: center; color: white; font-size: 12px; line-height: 15px; text-decoration: none; transition: 0.2s;} body > header > nav > ul.m-burger > li.language > a:hover:not(.active) { background-color: #fff; color:#ff344b;} body > header > nav > ul.m-burger > li.language > a:active, body > header > nav > ul.m-burger > li.language > a.active { background-color: #db2d40;} body > header > nav > ul.m-profil { z-index: 11; float:right; margin-right:45px;} body > header > nav > ul.m-profil > li { display:block; } body > header > nav > ul.m-profil > li > a { display:block; height:65px; padding: 20px 12px; color:white; text-decoration: none; transition:0.3s;} body > header > nav > ul.m-profil > li > a:before { font-size:13px; margin-right:5px;} body > header > nav > ul.m-profil > li > a:after { font-size:10px; margin-left:5px;} body > header > nav > ul.m-profil > li:hover > a { background:white; color:#ff344b;} body > header > nav > ul.m-profil > li:hover > a:after { content:"\e905";} body > header > nav > ul.m-profil > li:not(:hover) > ul { display:none; } body > header > nav > ul.m-profil > li > ul { position:absolute; right:0; width:200px; background:white; box-shadow: 1px 4px 7px 0px rgba(0, 0, 0, 0.2);} body > header > nav > ul.m-profil > li > ul > li { height: 48px; width: 100%; text-align:left; transition: 0.7s;} body > header > nav > ul.m-profil > li > ul > li > a { display: block; height: 100%; width: 100%; padding: 13px 0; border-bottom: 1px solid #d5dce0; color: #333; font-size: 16px; text-decoration: none;} body > header > nav > ul.m-profil > li > ul > li > a:before { display:inline-block; vertical-align: middle; margin-top:-0.2em; padding: 0 13px; font-size: 20px; color: #d5dce0; transition: 0.4s;} body > header > nav > ul.m-profil > li > ul > li:hover { background: #f5f5f5; color: #ff344b;} body > header > nav > ul.m-profil > li > ul > li:hover > a:before { color: #ff344b;} body > header > nav > ul.m-search { position: absolute; top:150px; width:100%; } /* menu not connected */ body > header > nav.not-connected > .m-profil > li > a:after {content:'';} body > header > nav.not-connected > ul.m-profil > li:hover > a:after { content:'';} /* city-choice */ .city-choice > .city-choice-bt { width: 100%; height: 43px; width: 250px; padding: 13px 0; border-radius: 3px; background: #db2d40; color: white; font-size: 14px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: 0.2s;} .city-choice > .city-choice-bt:before { float: left; margin: -2px 13px; font-size: 19px;} .city-choice > .city-choice-bt:hover { background: #ec2f45;} .city-choice.active > .city-choice-bt:hover { background: #f5f5f5;} /* coockie warnninging */ .cookie-warnning { position:fixed; bottom:0; background: #333; color:white;} .cookie-warnning > .iconafter-cross { position: absolute; top:0; right:0;padding: 20px;} .cookie-warnning > .iconafter-cross:after { position:absolute; top:10px; right:10px; } .cookie-warnning > span > a { color:white; } /* auto-promo */ .auto-promo{ margin: 15px auto 0 auto;} .auto-promo > a > img.small { display:none;} /* promo externe */ .promo-ext{ min-height: 118px; background:#f5f5f5;} .promo-ext img.large { margin:14px auto;} .promo-ext img.small { display:none;} /* promo inlist / inrestotab */ .promo-inlist { text-align: left; margin-top: -10px;} .listing .promo-inlist { text-align: center;} .promo-inlist img.large { width:100%; max-width: 728px; margin:0px 0 14px 0;} .promo-inlist img.small { display:none;} .promo-in-resto-tab { } .promo-in-resto-tab img.large { width:100%; max-width: 728px; margin:14px 0 0px 0;} .promo-in-resto-tab img.small { display:none;} /* promo pro */ .promo-pro { float:left; width: 1000px; height: 260px; margin: 50px auto 0 auto; overflow: hidden;} .promo-pro > a > div {position: absolute; top: 25%; left: 0; width: 100%; font-size: 30px; font-weight: 700; color:white; } .promo-pro > a > div > span:not(.btn-red-big) { display:block; margin:4px auto 30px auto; font-size: 28px; font-weight: 400;} .promo-pro > a > .portrait {display: none;} .promo-pro.onecol-span { width: 312px; height: 600px; margin: 85px auto auto auto;} .promo-pro.onecol-span > a > div { top: 15%;} .promo-pro.onecol-span > a > div > span { margin: 30px auto 30px auto;} .promo-pro.onecol-span > a > .portrait { display: block;} .promo-pro.onecol-span > a > .landscape { display: none;} } @media screen and (min-width: 1000px) and (max-width: 1279px) { body > header {height: 50px;} body > header > .logo { width:120px; height:26px; margin: 11px 14px;} body > header > .logo > a > img { width:120px; height:26px;} body > header > nav { width:calc(100% - 480px);} body > header > nav > ul.m-burger > li > ul { height:50px;} body > header > nav > ul.m-burger > li > ul > li > a { padding: 14px 12px;} body > .city-choice { left:180px; top: 3px; margin: auto;} body > header > nav > ul.m-profil > li > a { height:50px; padding: 14px 12px;} } @media screen and (min-width: 0px) and (max-width: 999px) { /* GENERIQUE */ /*html {height: 100%; } body {padding-top:50px; height: 100%; overflow-x: hidden; overflow-y:auto; -webkit-overflow-scrolling: touch;}*/ body {padding-top:50px; overflow-x: hidden;} h2{font-size: 20px;} h2.redline{ margin: 20px auto 15px auto; font-size: 20px;} h2.redline:before{ left:-28px; top:2px;font-size: 18px;} h2.redline:after{ margin: 10px auto auto auto; width:50%; height:2px;} .three-col > li { width: calc(33.33% - 11px); margin-right: 16px; font-size: 14px;} .three-col > li:last-child { width:calc(33.33% - 11px); margin-right: 0px; } body ::-webkit-scrollbar {width: 8px; } [class$="-col"], .three-col > .twocol-span, .three-col > .onecol-span { max-width:100%; width:100%; margin-right:auto; margin-left:auto;} /* forms */ input { height: 30px; font-size: 16px; padding: 0 12px 0 12px;} input.med { height: 35px; } input.big { height: 50px; font-size: 16px; padding: 0 14px 0 14px;} form.med input { height: 35px; } form.big input { height: 50px; font-size: 16px; padding: 0 14px 0 14px;} select { height: 30px; font-size: 16px; padding: 0 28px 0 6px!important;} select.med { height: 35px; font-size: 16px; padding: 2px 24px 0 7px!important;} select.big { height: 50px; font-size: 16px; padding: 0 28px 0 7px!important;} form.med select { height: 35px;} form.big select { height: 50px; font-size: 16px; padding: 0 28px 0 14px!important;} form .button { height: 30px; line-height: 28px; font-size: 14px; padding: 0 12px 0 12px;} form.med .button { height: 35px; line-height: 32px;} form.big .button { height: 50px; line-height: 45px; font-size: 16px; padding: 0 14px 0 14px;} /* line tabs*/ ul.line-tabs { display:table; text-align: center; margin:20px auto;} ul.line-tabs > li { display:table-cell; background: #f5f5f5; border: 1px solid #d5dce0; border-right:0;} ul.line-tabs > li:not(.active) > a:hover { color:#333; background:#eee;} ul.line-tabs > li > a { display:block; width:100%; height:100%; padding: 10px 20px; color: #999; text-decoration: none; transition:0.3s;} ul.line-tabs > li:nth-of-type(1) { border-radius: 5px 0 0 5px; } ul.line-tabs > li:last-of-type { border-radius: 0 5px 5px 0; border-right: 1px solid #d5dce0; } ul.line-tabs > li.active { background: #666; border: 0; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);} ul.line-tabs > li.active > a { color:white;} /* buttons */ .search-area { height: 10px; margin-top:23px; background: white; border: 1px solid #d5dce0; border-radius:10px; } .search-area > .fill { height: 8px; background: #ff344b; width:20%; border-radius:10px; } .search-area > .icon-scrollh { position:absolute; top:-6px; left:20%; margin-left:-10px; height: 21px; width:21px; background: white; border: 2px solid #ff344b; border-radius:20px; color: #ff344b; font-size: 12px; text-align:center; padding-top:3px; box-shadow: 0px -1px 1px 1px rgba(0, 0, 0, 0); transition:0.2s; cursor: move; cursor: grab; cursor: -webkit-grab;} .search-area > .icon-scrollh:hover { border: 2px solid white; background: #ff344b; color:white; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);} .search-area > .icon-scrollh > .valor { position:absolute; width:60px; top: -100%; left:-21px; text-align: center; font-weight: 900; color: #ff344b; } /* more picture */ a.more-pictures { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); } a.more-pictures > span { position:absolute; top:calc(50% - 15px); left:0; width:100%; font-size:30px; line-height:30px; color:white; text-align: center; font-weight: 700;} /* header */ body > header { position:fixed; top:0; left:0; z-index:100; height: 50px;} body > header > .logo { width:120px; height:26px; margin: 11px 14px;} body > header > .logo > a > img { width:120px; height:26px;} body > .city-choice { position:absolute; display:none; z-index:85; top:65px; left:0; right:0;} body > .city-choice > .city-choice-bt { display:block; margin: auto;} body > .city-choice > .city-choice-bt { background: #ff344b; color: white; } body > .city-choice > .city-choice-bt:hover { background: #ec2f45;} body > .city-choice.active > .city-choice-bt {background: #999; color: white;} body > .city-choice > .city-choice-layer{ margin-left:auto; left:0; margin-right:auto; right:0;} body > header > nav { position: absolute; top: 0; right:0;} body > header > nav > ul.tabs { float:right; width:150px; height: 50px;} body > header > nav > ul.tabs > li { float:right; width: 46px; height: 50px; border-left:1px solid #ec2f45; text-align:center; transition:0.3s; cursor:pointer;} body > header > nav > ul.tabs > li:before { position:absolute; top:13px; left:12px; color: white; font-size: 20px; } body > header > nav > ul.tabs > li:hover { color:white; background: #ec2f45;} body > header > nav > ul.tabs > li:hover:before { color:white;} body > header > nav > ul.tabs > li.active { background:white;} body > header > nav > ul.tabs > li.active:before { content: "\e90b"; top:14px; color: #ff344b;} body > header > nav > ul.tabs > li.active:hover:before { color: #ec2f45;} body > header > nav > ul.tabs > li:not(.active) > li { display:none;} body > header > nav > ul.menus { position:fixed; display:block; z-index:10; top:50px; width:100%; left:0; right:0; background:white; padding-bottom:15px; text-align: center;} body > header > nav > ul.menus:not(.active) { display:none; } body > header > nav > ul.m-burger { padding-top:60px;} body > header > nav > ul.m-burger > li > ul { margin-top:15px;} body > header > nav > ul.m-burger > li > ul > li { height: 48px; width: 100%; text-align:center; transition: 0.7s;} body > header > nav > ul.m-burger > li > ul > li > a { display: block; height: 100%; width: 100%; padding: 13px 0; border-top: 1px solid #d5dce0; color: #333; font-size: 16px; text-decoration: none;} body > header > nav > ul.m-burger > li > ul > li:last-of-type > a {border-bottom: 1px solid #d5dce0;} body > header > nav > ul.m-burger > li > ul > li > a:before { padding: 0 13px; font-size: 20px; color: #d5dce0; transition: 0.4s;} body > header > nav > ul.m-burger > li > ul > li:hover { background: #f5f5f5; color: #ff344b;} body > header > nav > ul.m-burger > li > ul > li:hover > a:before { color: #ff344b;} body > header > nav > ul.m-burger > li.language {display:inline-block; width:auto; margin-top:15px; font-size: 14px; border:1px solid #d5dce0; border-radius:3px; background:#f5f5f5; overflow:hidden;} body > header > nav > ul.m-burger > li.language > a { display: inline-block; padding:3px 10px 4px 10px; margin-right:-0.28em; text-decoration: none; color: #666;} body > header > nav > ul.m-burger > li.language > a.active { background:#ff344b; color:white;} body > header > nav > ul.m-burger > li.language > a:hover { background:#ff344b; color:white; border-radius: 3px;} /* account-only /////////////////////////////////////////*/ body > header > nav.account-only > ul.m-burger { padding-top:0px;} body > header > nav > ul.m-profil { padding:0; } body > header > nav > ul.m-profil > li > a { display:none; } body > header > nav > ul.m-profil > li > ul > li { height: 48px; width: 100%; text-align:left; transition: 0.7s;} body > header > nav > ul.m-profil > li > ul > li > a { display: block; height: 100%; width: 100%; padding: 13px 0; border-bottom: 1px solid #d5dce0; color: #333; font-size: 16px; text-decoration: none;} body > header > nav > ul.m-profil > li > ul > li > a:before { display:inline-block; vertical-align: middle; margin-top:-0.2em; padding: 0 13px; font-size: 20px; color: #d5dce0; transition: 0.4s;} body > header > nav > ul.m-profil > li > ul > li:hover { background: #f5f5f5; color: #ff344b;} body > header > nav > ul.m-profil > li > ul > li:hover > a:before { color: #ff344b;} body > header > nav > ul.m-search {padding-top:25px; padding-bottom:0;} body > header > nav > ul.tabs > li.m-search.active { background:#f5f5f5; } body > header > nav > ul.m-search.active { background:#f5f5f5; } /* breadcrumb */ .breadcrumb { padding:5px 3px; } .breadcrumb > ol { width:100%; font-size: 14px; } /* coockie warnninging */ .cookie-warnning { position:fixed; bottom:0; background: #333; color:white; } .cookie-warnning > .iconafter-cross { position: absolute; top:0; right:0;padding: 20px; } .cookie-warnning > .iconafter-cross:after { position:absolute; top:10px; right:10px; } .cookie-warnning > span > a { color:white; } /* promo externe */ .promo-ext { background:#f5f5f5; } .promo-ext img.small { margin:10px auto; width: 100%; max-width: 320px;} .promo-ext img.large { display:none; } /* promo pro */ .promo-pro { float:left; text-align: center; width: 100%; height: 185px; margin: 50px auto 0 auto; overflow: hidden; } .promo-pro.onecol-span { width: 100%; height: 185px; margin: 25px auto; } .promo-pro > a > div { position: absolute; top: 20%; left: 0; width: 100%; font-size: 20px; font-weight: 700; color:white; } .promo-pro > a > div > span:not(.btn-red-big) { display:block; margin:10px auto 10px auto; font-size: 18px; font-weight: 400; } .promo-pro > a > div > span.btn-red-big { display:inline-block; margin:4px auto 20px auto; font-size: 16px; font-weight: 400; } .promo-pro > a > .portrait { display: none; } .promo-pro > a > .landscape { position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; height:100%; } .promo-pro.onecol-span > a > div { font-size: 22px; font-weight: 400;} .promo-pro.onecol-span > a > .portrait { display: none;} .promo-pro.onecol-span > a > .landscape { display:block; position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; height:100%;} } @media screen and (min-width: 481px) and (max-width: 999px) { .hide-768{display:none;} .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper:before { top:21px} /* form */ form input, form.med input, form.big input { height: 35px; font-size: 16px; padding: 0 6px 0 6px;} form select, form.med select, form.big select { height: 35px; font-size: 16px; padding: 2px 18px 0 5px!important; background-position: calc(100% + 2px);} form.med .button ,form .button { height: 35px; line-height: 32px; font-size: 16px; padding: 0 6px 0 6px;} form.big .button { height: 45px; line-height: 40px; font-size: 18px; padding: 0 6px 0 6px;} /* header */ .city-choice > .city-choice-layer > form > .delete { float:right; margin-top:-35px; height:35px; width:30px; font-size: 14px; line-height: 35px;} /* Geo fields */ .ville_cp:not(.styled-select) , .ville.text {padding: 8px 1em; width:100%; text-align: left;} /* promo */ .percent-promo-big{ z-index: 3; position: absolute; top:0; right:0; width:160px;} .percent-promo-big > img { width:100%; height:auto; top:0; } .percent-promo-big > span {position: absolute; width: 100%; top:0; right:0; padding: 11px 10px; color:white; text-align: right; font-size: 30px; } .percent-promo-med { z-index: 3; position: absolute; top:0; right:0; width:90px;} .percent-promo-med > img { width:100%; height:auto; top:0; } .percent-promo-med > span {position: absolute; width: 100%; top:0; right:0; padding: 6px 5px; color:white; text-align: right; font-size: 16px; font-weight: 700; } .percent-promo-sm{ z-index: 3; position: absolute; top:0; right:0; width:55px;} .percent-promo-sm > img { width:100%; height:auto; top:0; } .percent-promo-sm > span {position: absolute; width: 100%; top:0; right:0; padding: 2px 2px; color:white; text-align: right; font-size: 12px; font-weight: 700; } } @media screen and (min-width: 615px) and (max-width: 999px) { body > header > nav > ul.m-search.active { height: 190px; } .percent-promo-big{ z-index: 3; position: absolute; top:0; right:0; width:120px;} .percent-promo-big > img { width:100%; height:auto; top:0; } .percent-promo-big > span {position: absolute; width: 100%; top:0; right:0; padding: 8px 7px; color:white; text-align: right; font-size: 22px; } } @media screen and (min-width: 360px) and (max-width: 614px) { body > header > nav > ul.m-search.active { height: 140px; } } @media screen and (min-width: 0px) and (max-width: 359px) { body > header > nav > ul.m-search.active { height: 140px; } } @media screen and (min-width: 750px) and (max-width: 999px) { form input, form.med input { height: 35px; font-size: 14px; padding: 0 6px 0 6px;} form select, form.med select, select, select.med { height: 35px; border: 1px solid #d5dce0; border-radius: 3px; color: #333333; font-size: 16px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 2px 18px 0 5px!important; background-position: calc(100% + 2px);} form .button , form.med .button { height: 35px; font-size: 14px; line-height: 35px; padding: 0 6px 0 6px;} /* forms */ select { padding: 0 28px 0 6px!important; background-position: 100%;} select.med { padding: 2px 18px 0 5px!important; background-position: calc(100% + 2px);} select.big { padding: 0 30px 0 18px!important;} .btn-red-big,.btn-grey-big,.btn-edit-big { height: 45px; line-height: 45px; padding: 0px 15px; border-radius: 3px; font-size: 16px; } .btn-red-med,.btn-grey-med,.btn-edit-med { height: 35px; line-height: 32px; padding: 0px 20px; font-size: 14px;} .btn-red-sm,.btn-grey-sm,.btn-edit-sm { height:30px; line-height: 27px; padding: 0px 20px; font-size: 12px;} .cnt {width:calc(100% - 40px);} /* faq */ .faq { float:left; width:100%; margin-top:35px;} .faq > ul > li { width:100%; padding:15px 50px 15px 20px; margin-bottom:20px; font-size: 18px;} .faq > ul > li > h3 { font-size: 18px; margin:0;} .faq > ul > li:after { height:50px; width:50px; line-height: 50px; } .faq > ul > li > div { padding:0px; margin:15px 0 0 0;} .faq > ul > li > div > p { font-size: 14px; width:80%;} /* promo inlist / inrestotab */ .promo-inlist { margin-top: -10px; } .promo-inlist img.large { display:none; } .promo-inlist img.small { width:100%; max-width: 728px; margin:0px 0 10px 0; } .promo-in-resto-tab {} .promo-in-resto-tab img.large { max-width: 728px; width: 100%; height: auto; margin: 10px auto 0px auto; } .promo-in-resto-tab img.small { display:none; } /* auto-promo */ .auto-promo{ margin: 0px auto 0 auto;} .auto-promo > a > img.large { width:100%; height:auto} .auto-promo > a > img.small { display:none;} /* line tabs mobile change*/ ul.line-tabs.mobile-var > li > a { padding: 5px 8px; } } @media screen and (min-width: 0px) and (max-width: 749px) { .cnt {width:calc(100% - 20px);} h1{font-size:20px ;} .btn-red-big,.btn-grey-big,.btn-edit-big { height: 45px; line-height: 42px; padding: 0px 15px; border-radius: 3px; font-size: 16px; } .btn-red-med,.btn-grey-med,.btn-edit-med { height: 35px; line-height: 32px; padding: 0px 20px; font-size: 14px;} .btn-red-sm,.btn-grey-sm,.btn-edit-sm { height:30px; line-height: 27px; padding: 0px 20px; font-size: 12px;} /* slider ui */ .slider-h { margin-top:-0.3em; margin-bottom:0.8em;} .slider-h #radius {text-align: center; margin-bottom:0.4em;} .slider-h .ui-slider-horizontal { height:0.6em; width:calc(100% - 0.7em - 20px); margin-left:calc(0.35em + 10px);} .slider-h .ui-slider-horizontal .ui-slider-range {} .slider-h .ui-slider-horizontal .ui-slider-handle {top:-0.4em; margin-left:-0.7em;} .slider-h .ui-slider-horizontal .ui-slider-handle:before { font-size: 12px; text-align:center; content: "\e929"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 0.2s;} /* faq */ .faq { float:left; width:100%; margin-top:35px;} .faq > ul > li { width:100%; padding:10px 10px 10px 10px; margin-bottom:20px; font-size: 18px;} .faq > ul > li > h3 { font-size: 14px; margin:0 40px 0 0; } .faq > ul > li:after { height:40px; width:40px; line-height: 40px; } .faq > ul > li > div { padding:0px; margin:15px 0 0 0;} .faq > ul > li > div > p { font-size: 14px; } /* promo inlist / inrestotab */ .promo-inlist { } .promo-inlist img.large { display:none; } .promo-inlist img.small { width:100%; max-width: 728px; margin:0px 0 0px 0; } .promo-in-resto-tab { } .promo-in-resto-tab img.large { display:none; } .promo-in-resto-tab img.small { max-width: 728px; width: 100%; height: auto; margin: 10px auto 0px auto; } /* auto-promo */ .auto-promo{ margin: 0px auto 0 auto;} .auto-promo > a > img.large{ display:none;} .auto-promo > a > img.small{ display:block; width :100%; max-width:320px; height:auto;} /* line tabs mobile change*/ ul.line-tabs.mobile-var { text-align: center; margin:20px auto;} ul.line-tabs.mobile-var > li { display:inline-block; margin-right: 5px; margin-bottom: 5px; background: #f5f5f5; border: 1px solid #d5dce0; border-radius: 3px;} ul.line-tabs.mobile-var > li > a { display:block; width:100%; height:100%; padding: 5px 10px; color: #999; text-decoration: none;} ul.line-tabs.mobile-var > li:nth-of-type(1) { border-radius: 3px; } ul.line-tabs.mobile-var > li:last-of-type { border-radius:3px ;} ul.line-tabs.mobile-var > li.active { background: #666; border: 0; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);} ul.line-tabs.mobile-var > li.active > a { color:white;} /* line tabs*/ ul.line-tabs > li:first-of-type:last-of-type { background: none; color:#333; box-shadow: none;} ul.line-tabs > li:first-of-type:last-of-type a { background: none; color:#333; font-size: 1.25em; cursor: default; padding:0;} } @media screen and (min-width: 481px) { .hide-480{display:none;} } @media screen and (min-width: 0px) and (max-width: 480px) { .show-480{display:none;} .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper{ font-size: 14px; padding:12px 5px;} .ui-autocomplete .ui-menu-item.autocomplete-kw .ui-menu-item-wrapper:before {top:18px} /* form */ form input, form.med input { height: 30px; font-size: 16px; padding: 0 6px;} form.big input { height: 30px; font-size: 16px; padding: 0 6px;} form select, form.med select, form.big select, select, select.med, select.big { height: 30px; font-size: 16px; padding: 0px 18px 0 5px!important; background-position: calc(100% + 2px);} form .button , form.med .button, form button , form.med button { height: 30px; line-height: 28px; font-size: 14px; padding: 0 6px;} form.big .button, form.big button { height: 40px; line-height: 37px; font-size: 16px; padding: 0 6px;} /* forms */ select { padding: 0 28px 0 6px!important; background-position: 100%;} select.med { padding: 2px 18px 0 5px!important;} select.big { padding: 0 18px 0 7px!important;} .btn-red-big,.btn-grey-big,.btn-edit-big { height: 45px; line-height: 42px; padding: 0px 15px; border-radius: 3px; font-size: 16px; } .btn-red-med,.btn-grey-med,.btn-edit-med { height: 35px; padding: 0px 9px; font-size: 13px;} .btn-red-sm,.btn-grey-sm,.btn-edit-sm { height:30px; padding: 0px 10px; font-size: 12px;} /* Geo fields */ .ville_cp:not(.styled-select) , .ville.text {padding: 5px 1em; width:100%; text-align: left;} /* header */ .city-choice > .city-choice-layer > form > .delete { float:right; margin-top:-30px; height:30px; width:25px; font-size: 12px; line-height: 32px;} /* faq */ .faq > ul > li > div > p { font-size: 13px; width:100%;} /* line tabs*/ ul.line-tabs { display:table; text-align: center; margin:15px auto;} ul.line-tabs > li { display:table-cell; background: #f5f5f5; border: 1px solid #d5dce0; border-right:0;} ul.line-tabs > li > a { display:block; width:100%; height:100%; padding: 5px 10px; color: #999; text-decoration: none; font-size: 14px;} ul.line-tabs > li:nth-of-type(1) { border-radius: 3px 0 0 3px; } ul.line-tabs > li:last-of-type { border-radius: 0 5px 5px 0; border-right: 1px solid #d5dce0; } ul.line-tabs > li.active { background: #666; border: 0; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);} ul.line-tabs > li.active > a { color:white;} /* breadcrumb */ .breadcrumb { padding:3px;} .breadcrumb > ol { width:100%; font-size: 14px;} /* promo */ .percent-promo-big{ z-index: 3; position: absolute; top:0; right:0; width:85px;} .percent-promo-big > img { width:100%; height:auto; top:0; } .percent-promo-big > span { position: absolute; width: 100%; top:0; right:0; padding: 7px 5px; color:white; text-align: right; font-size: 16px; } .percent-promo-med { z-index: 3; position: absolute; top:0; right:0; width:75px;} .percent-promo-med > img { width:100%; height:auto; top:0; } .percent-promo-med > span { position: absolute; width: 100%; top:0; right:0; padding: 6px 5px; color:white; text-align: right; font-size: 14px; font-weight: 700; } .percent-promo-sm{ z-index: 3; position: absolute; top:0; right:0; width:55px;} .percent-promo-sm > img { width:100%; height:auto; top:0; } .percent-promo-sm > span { position: absolute; width: 100%; top:0; right:0; padding: 2px 2px; color:white; text-align: right; font-size: 12px; font-weight: 700; } .promo-pro > a > .landscape { position: absolute; left:-45%; top:0; right:0; bottom:0; margin:auto; height:100%;} } /* Menu responsive transition pages dependances*/ @media screen and (min-width: 615px) and (max-width: 999px) { /* promo externe */ .city .cnt.title h1 { font-size: 2em; } .promo-ext{ background:#f5f5f5;} .promo-ext > img.large { max-width: 728px; width: 100%; height: auto; margin: 10px auto;} .promo-ext > img.small { display: none;} body > header > nav > ul.menus:not(.m-search) { width: 50%; right:0px; left: auto;} body:not(.page-home) > .city-choice:not(.menu-call) { position: fixed; display:block; z-index: 300; width:auto; left:180px; top: 3px; right:auto; margin: auto;} body:not(.page-home) > .city-choice > .city-choice-bt { background:#db2d40;} body > .city-choice > .city-choice-bt:hover { background: #ec2f45;} body > .city-choice.active > .city-choice-bt {background: white; color: #333;} body:not(.page-home) > .city-choice.menu-call { position: fixed; display:block; z-index: 110; width:auto; left:180px; top: 3px; right:auto; margin: auto;} body > header > nav > ul.m-burger { padding-top:0px;} body > header > nav > ul.m-burger > li > ul { margin-top:0px;} body > header > nav > ul.m-burger > li > ul > li:first-of-type > a { border-top:0;} } @media screen and (min-width: 0px) and (max-width: 614px) { .city .cnt.title h1 { font-size: 1.5em; } body.page-city > .city-choice:not(.menu-call) { display:none; top:65px; } body.page-home > .city-choice:not(.menu-call) > .city-choice-bt { background:#ff344b;} body.page-city > .city-choice:not(.menu-call) > .city-choice-bt { background:#999;} body.page-city > .city-choice.active:not(.menu-call) > .city-choice-bt { background:#ff344b;} .city-choice.menu-call { position:fixed; display:block; z-index:1000; top:65px; left:0; right:0;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*--------- search -----------------------------------------------------------------------*/ @media screen and (min-width: 0px) { /* search */ .search { display: flex; justify-content: center; flex-wrap: wrap; } .search.line .call-to-action {opacity:1; width:auto; overflow: hidden; transition: 0.3s;} .search.line.find .call-to-action, .search.line.order .call-to-action { opacity:0; width:0px; } .search > .tab { cursor: pointer; background: white; font-weight: 700; border-radius: 3px; color: #999; z-index:10; display: flex; flex-direction: column; justify-content: center; align-items: center;} .search > .tab:before { color: #ff344b; } .search.order > .tab.order, .search.find > .tab.find { background: #ff344b; color: white; } .search.order > .tab.order:before, .search.find > .tab.find:before { color: white; } .search > form { width:100%; display: flex; flex-direction: row; align-items: center; border-radius: 3px; z-index: 0;} .search > form > input[type=search]{ flex: 1; border:0; border-radius: 3px; } .search > form > .delete { } .search > form > button { background: white; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; border-radius: 0 3px 3px 0; background: white; } .search > form > button:after {color: #ff334b;} .search > form > .aroundme { border-radius:3px 0 0 3px; background:white; border-right:1px solid #d5dce0;} .search > form > .aroundme:before { border-radius:0; color: #ff334b;} .search .ui-autocomplete { position:absolute; right:auto !important; bottom:auto !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1) !important; border:none !important; outline:none !important; border-radius:0 0 3px 3px; transition:0.4s;} .page-city .search:not(.menu-call) form, .page-city .search:not(.menu-call) .tab { box-shadow: 0 0 8px 1px rgba(0,0,0,0.5);} /* find/order changes */ .page-city > .search > .search-shadow { display: none; } .search > form { opacity: 0; top: -30px; transition: 0.5s; } .search.order > form , .search.find > form { opacity: 1; top: 0; } .search > .tab { top: 30px; transition: 0.5s; } .search.order > .tab , .search.find > .tab { top: 0; } .search > form > .aroundme { transition: 0.3s;} .search > form > .search-btn { transition: 0.3s; } .search.order:not(.find) > form > .aroundme, .search.order:not(.find) > form > .search-btn { opacity:0; width:0px; padding: 0px; overflow: hidden; } .search.find > form > .aroundme { opacity:1; overflow: hidden; } .search.find > form > .search-btn { opacity:1; overflow: hidden; } .search > form > select { display: none; } .page-city > .search.find > form > input[type=search] { margin-left: 0; border-radius: 0; } } @media screen and (min-width: 1000px) { /* search */ .search > .tab.order { margin-left: 10px;} .search > .tab {font-size: 22px;} .search > .tab:before {font-size: 43px;} .search > .tab:hover { background: #ff344b; color:white;} .search > .tab:hover:before { color:white;} .search > form > input[type=search]{ padding-left: 20px; padding-right: 30px;} .search > form > .delete { height: 50px; width:30px; margin-left: -30px; display: flex; justify-content: center; align-items: center;} .search > form > button { height: 50px; width:55px;} .search > form > button:before, .search > form > button:after { font-size: 28px;} .search > form > button.search-btn { background: #ff344b; color:white;} .search > form > button.search-btn:after { color:white;} .page-city > .search { position: absolute; z-index:80; margin:auto; top:210px; left:0; right:0; width:550px; text-align: center; } .page-city > .search > .tab { display: flex; font-weight: 700; height: 100px; width:172px; margin-bottom: 10px; padding: 5px; text-align: center;} .search-space { height:80px; width:calc(100% + 20px); margin: auto -10px; padding: auto 10px; box-shadow: 1px 4px 7px 0px rgba(0, 0, 0, 0.2); } .search.line { position: absolute; z-index:80; margin:auto; top:183px; left:0; right:0; height: 80px; width:100%; max-width:1000px; background: white; align-items: center;} .search.line .call-to-action {display: flex; justify-content: center; align-items: center; margin-right: 25px; height: 50px; font-size: 26px; line-height: 26px; font-weight: 700;} .search.line > .tab:before {font-size: 34px; margin-right: 10px;} .search.line.no-ad { top:65px; } .search.line > form { width: auto; flex:1; margin-left: 15px;} .search.line > form > input[type=search] { border:1px solid #d5dce0; margin-left: -1px; margin-right: -1px; border-radius: 0px;} .search.line.order > form > input[type=search] { border-radius: 3px; margin-left: 0px; margin-right: 0px;} .search.line:not(.order) > form > .aroundme { border:1px solid #d5dce0; border-radius: 3px 0 0 3px;} .search.line:not(.order) > form > .search-btn { border:1px solid #ff344b; } /* tab search animation */ .search.line > form { opacity: 0; top: 0px; transition: 0.5s; flex:0; width: 0; overflow: hidden;} .search.line.order > form , .search.line.find > form { opacity: 1; top: 0; flex:1; width: auto; overflow: visible; } .search.line > .tab { top: 0px; transition: 0.5s; height: 50px; width:200px; flex-direction: row;} .search.line.order > .tab , .search.line.find > .tab { top: 0; } .search.line > .tab{ border: 1px solid #d5dce0; } .search.line.order > .tab.order, .search.line.find > .tab.find { border: 1px solid #ff344b;} /* autocomplete search */ .search .ui-autocomplete { left:55px !important; top:55px !important; width:calc(100% - 110px) !important;} .search.order .ui-autocomplete { left:0px !important; width:100% !important; } .search.line .ui-autocomplete { left:0px !important; top:55px !important; width:calc(100% - 55px) !important;} .search.line.order .ui-autocomplete { width:100% !important;} /* header */ header > nav > ul.m-search > li > .search { margin:auto; } /* city */ } @media screen and (min-width: 1000px) and (max-width: 1279px) { /* city */ .page-city > .search { top:190px;} .search.line{ top:168px; padding: 0 10px;} } @media screen and (min-width: 0px) and (max-width: 999px) { /* search */ .search .call-to-action {display:none} .search > .tab {font-size: 18px; display: flex; font-weight: 700; height: 66px; width:140px; margin-bottom: 10px; padding: 5px; text-align: center;} .search > .tab.order { margin-left: 10px;} .search > .tab:before {font-size: 32px;} .search > form > input[type=search]{ height: 40px; padding-left: 20px; padding-right: 30px;} .search.order > form > input[type=search] { border-radius: 3px; margin-left: 0px; margin-right: 0px;} .search > form > .delete { height: 40px; width:30px; margin-left: -30px; display: flex; justify-content: center; align-items: center;} .search.find > form > button { height: 40px; width:45px;} .search > form > button:before, .search > form > button:after { font-size: 24px;} .search > form > button.search-btn { background: #ff344b; color:white;} .search > form > button.search-btn:after { color:white;} .search > .tab.order { margin-left: 15px;} .search.line:not(.menu-call){ display: none;} .search.menu-call > .tab{ border: 1px solid #d5dce0; } .search.menu-call.order > .tab.order, .search.menu-call.find > .tab.find { border: 1px solid #ff344b;} .search.menu-call > form > input[type=search] { border:1px solid #d5dce0; } .search.menu-call.find > form > input[type=search] { margin-left: -1px; margin-right: -1px; border-radius: 0px;} .search.menu-call > form > .aroundme { border:1px solid #d5dce0; border-radius: 3px 0 0 3px;} .search.menu-call > form > .search-btn { border:1px solid #ff344b; } /* header */ .search { position:absolute; display:none; z-index:80; width:100%; top:130px; left:50%; transform: translateX(-50% );} .search.menu-call{ position:fixed; display:flex; z-index:200; top:65px; } } @media screen and (min-width: 615px) and (max-width: 999px) { .page-city > .search:not(.menu-call) { position:absolute; z-index:80; width:100%; max-width: 600px;} .search { flex-direction: row; } .search > .tab.order { margin-left: 10px;} .search > .tab {font-size: 22px; display: flex; height: 100px; width:172px; margin-bottom: 10px; padding: 5px; text-align: center;} .search > .tab:before {font-size: 43px;} .search > form > input[type=search]{ height:50px; padding-left: 20px; padding-right: 30px;} .search > form > .delete { height: 50px; width:30px; margin-left: -30px; } .search.find > form > button { height: 50px; width:55px;} .search > form > button:before, .search > form > button:after { font-size: 28px;} .search.menu-call > .tab{ width: } } @media screen and (min-width: 481px) and (max-width: 999px) { .search { width:calc(100% - 30px); max-width: 756px;} /* autocomplete search /////////////////////*/ .search .ui-autocomplete { left:10px !important; top:50px !important; width:calc(100% - 60px) !important; } .search.order .ui-autocomplete { width:calc(100% - 20px) !important; } /* home */ .page-home > .search { display:flex; } /* city */ .page-city > .search { display:flex; } } @media screen and (min-width: 0px) and (max-width: 480px) { .search { width:calc(100% - 16px); } /* autocomplete search /////////////////////*/ .search .ui-autocomplete { left:10px !important; top:43px !important; width:calc(100% - 20px) !important;} /* home */ .page-home > .search { display:flex; } /* city */ .page-city > .search { display:flex; } } @media screen and (min-width: 0px) and (max-width: 614px) { .page-city > .search:not(.menu-call) { margin-top: -10px ; transition: margin-top 0.5s;} .page-city > .search:not(.menu-call).find, .page-city > .search:not(.menu-call).order { margin-top: 0px ; } } /* smart-app-banner */ @media screen and (min-width:0px){ .smartbanner { position: fixed;} .smartbanner .smartbanner-container { text-align: left; max-width: 1000px;} } @media screen and (min-width: 0px) and (max-width: 375px) { .smartbanner .smartbanner-container .smartbanner-button { bottom: auto; top:15px; right: 10px;} } @media screen and (min-width: 0px) and (max-width: 999px) { .smartbanner { top:50px;} } @media screen and (min-width: 1000px) { } /*--------- text listings resto, actu, avis -------------------------------------------------------*/ @media screen and (min-width:0px){ .listing {background:white;} /* mini fiches resto */ .fresto-t1, .fresto-t2 {text-align: left;} .fresto-t1 > ul > li, .fresto-t2 > ul > li { display:inline-block; background: #f5f5f5; border-radius: 3px; text-transform: uppercase;} .fresto-t1 > h4, .fresto-t2 > h4 { font-weight: 400;} .fresto-t1 > h3, .fresto-t2 > h3 { font-weight: 700; display:inline-block; margin-right:0.2em;} .fresto-t1 > .promo-line, .fresto-t2 > .promo-line { color: #ff344b; font-weight: 700;} .fresto-t1 > .bonus, .fresto-t2 > .bonus {display:inline-block; margin-left:0.3em;} .fresto-t1 > .bonus > div, .fresto-t2 > .bonus > div {display:inline-block; margin-right:0.2em;} .fresto-t1 > .bonus > .icon-gold, .fresto-t2 > .bonus > .icon-gold { color: #e1b541;} .fresto-t1 > .bonus > .icon-like, .fresto-t2 > .bonus > .icon-like { color: #5dddd3;} .fresto-t1 > .bonus > .icon-heart, .fresto-t2 > .bonus > .icon-heart { color: #ff344b;} .fresto-t2 > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;} /* mini fiches resto listing v2 */ .fresto-listing-v2 {text-align: left;padding-top: 1em;} .fresto-listing-v2 > .inpic-info { z-index: 10; position:absolute; font-size: 0.88em; top:-1.4em; right:1em; padding:0.8em 1.2em 0.2em 1.2em; background: white; color: #333; border-radius:5px; font-weight: 900;} .fresto-listing-v2 > .inpic-info.delay.preco { top:-2.5em; } .fresto-listing-v2 > .inpic-info.delay.preco > .delay-title { text-align: center; font-weight: 400; font-size: 0.8em; margin-bottom: 0.25em;} .fresto-listing-v2 > .inpic-info.delay.preco > .delay-subtxt { text-align: center; } .fresto-listing-v2.unreg {padding-top: 0;} .fresto-listing-v2.unreg > .inpic-info {position:relative; top:auto; right:auto; padding: 0; margin-bottom: 0.5em;} .fresto-listing-v2 > h3 { font-size: 1.2em; font-weight: 700; display:inline-block; margin-right:0.3em; margin-top: 0; margin-bottom: 0.4em;} .fresto-listing-v2 > .bonus {display:inline-block; margin-bottom: 0.5em;} .fresto-listing-v2 > .bonus > div {display:inline-block; margin-right:0.2em;} .fresto-listing-v2 > .bonus > .icon-gold { color: #e1b541;} .fresto-listing-v2 > .bonus > .icon-like { color: #5dddd3;} .fresto-listing-v2 > .bonus > .icon-heart { color: #ff344b;} .fresto-listing-v2 .cuisines-address { margin-bottom: 0.4em;} .fresto-listing-v2 .cuisines-address > .address {display: inline-block;vertical-align: middle; font-weight: 400; margin-top: 0; margin-bottom: 0;margin-right: 0.2em;} .fresto-listing-v2 .cuisines-address > .cuisines {display: inline-block;vertical-align: middle; font-size: 0.65em;} .fresto-listing-v2 .cuisines-address > .cuisines > li { display:inline-block; line-height: 1em;padding: 0.25em 0.35em; margin-right: 0.25em; background: #f5f5f5; border-radius: 3px; text-transform: uppercase;} .fresto-listing-v2 .services { font-size: 0.75em; margin-bottom: 1em;} .fresto-listing-v2 .services ul li { display: inline-block; } .fresto-listing-v2 .services ul li .button { display: block; padding: 0.3em 0.5em; margin-right: 0.2em; background-color: #ff344b; border-radius: 3px; text-decoration: none; color:white;} .fresto-listing-v2 .services ul li .button:before { top: 0.1em; display: inline-block; margin-right: 0.2em;} .fresto-listing-v2 .services ul li .button.disable { background-color: #ff344b; color:white; opacity:0.25; cursor:help;} .fresto-listing-v2 .delivery-infos { font-size: 0.75em; } .fresto-listing-v2 .delivery-infos ul.infos {display: inline-block; vertical-align: middle;} .fresto-listing-v2 .delivery-infos ul.infos li { display: inline-block; padding: 0.3em 0.5em; margin-right: 0.2em; border: 1px solid #d5dce0; border-radius: 3px; text-decoration: none; } .fresto-listing-v2 .delivery-infos ul.infos li span { font-weight: 800} .fresto-listing-v2 .delivery-infos ul.payment-modes {display: inline-block; vertical-align: middle;} .fresto-listing-v2 .delivery-infos ul.payment-modes li { display: inline-block; padding: 0.2em 0 0.15em 0;} .fresto-listing-v2 .delivery-infos ul.payment-modes li:before { color:#ccc; font-size: 1.4em;} .fresto-listing-v2 > .promo-line { font-size: 0.85em; color: #ff344b; font-weight: 700; margin-top: 0.7em;} /* list promo-inlist */ .promo-inlist .promo-inlist-text {text-align: left;} .promo-inlist .promo-inlist-text > h3 { font-weight: 700;} .promo-inlist .promo-inlist-text > h4 { font-weight: 400;} .promo-inlist .promo-inlist-text > span { font-weight: 700;} .promo-inlist .sponsor { position:absolute; right:10px; bottom:10px; text-align: right; color:#999;} /* list fiches actu */ .factu-t1 { text-align: left; min-height: 5.3em;} .factu-t1 > h3 { font-weight: 700;} .factu-t1 > h4 { font-weight: 400; color:#999;} .factu-t1 > .news-text { font-weight: 400;} .factu-t1 ul:not(.gallery) {margin:0.7em 0;} .factu-t1 ul:not(.gallery) > li {margin:0.3em 0 0.3em 2em;} .factu-t1 ul:not(.gallery) > li:before { content:"•"; margin-left:-1em; margin-right:0.4em; font-size: 1.2em; bottom:-0.1em; color:#ff344b;} .factu-t1 ul:not(.gallery) > li > ul {margin:0.5em 0;} .factu-t1 ul:not(.gallery) > li > ul > li {margin:0.3em 0 0.3em 1em;} .factu-t1 ul:not(.gallery) > li > ul > li:before { content:"•"; margin-left:-1em; margin-right:0.4em; color:#ccc;} .factu-t1 ol:not(.gallery) {margin:0.7em 0; list-style: decimal; } .factu-t1 ol:not(.gallery) > li { margin:0.3em 0 0.3em 2em; list-style: decimal;} .factu-t1 ol:not(.gallery) > li > ol {margin:0.5em 0; list-style: decimal; } .factu-t1 ol:not(.gallery) > li > ol > li { margin:0.3em 0 0.3em 1em; list-style: decimal;} .factu-t1 > ul.gallery > li { display:block; float:left;} .factu-t1 > ul.gallery > li > a { display:inline-block; height: 100%; width: 100%;} .factu-t1 > ul.gallery > li > a > img { width:100%;} .factu-t1 > .promo-line { display:block; color: #ff344b; font-weight: 700;} .actu-list {text-align: center;} .actu-list > h2 {text-align: left;} .actu-list > ul {text-align: left;} .actu-list > ul > li { border-bottom: 1px solid #d5dce0;} .actu-list > ul > li > a { position:absolute; display: block;} .actu-list > ul > li > a > img { width: 100%;} .actu-list > ul > li > .factu-t1:not(.no-pic) { float: left;} .actu-list > ul > li > .factu-t1.no-pic { padding-left:0;} .actu-list > .btn-grey-big { margin: 24px auto;} /* list reviews */ .listing-review {} .review-t1 > .review-resto {text-align: left; font-weight: 700;} .review-t1 > .review-resto > a {text-decoration: none;} .review-t1 > .review > .content > .post-date { color:#999;} .review-t1 > .review > .content > p { /*max-height: 5em;*/ overflow: hidden;} .review-t1 > .review > .profile > .portrait { border-radius: 50%; overflow: hidden;} .review-t1 > .review > .profile > .portrait img { border-radius: 50%; overflow: hidden;} .review-t1 > .review > .profile > .name-infos > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .review-t1 > .review > .answer { float: left; margin-top: 15px; text-align: left; font-weight: 400; border: 1px solid #d5dce0; border-radius: 3px;} .review-t1 > .review > .answer:before { content:""; position: absolute; display: block; top:-11px; left:20px; width: 20px; height: 20px; border: 1px solid #d5dce0; background: white; transform: rotate(45deg);} .review-t1 > .review > .answer:after { content:""; position: absolute; display: block; top:-9px; left:20px; width: 20px; height: 20px; background: white; transform: rotate(45deg);} .review-t1 > .review > .answer > p { padding:13px 15px; margin:0; color: #999;} .review > .infos > .icon-warnninging:hover:before {color:#ff344b;} /* single reviews */ .review-t2 > .review > .answer { margin-top: 15px; text-align: left; font-weight: 400; border: 1px solid #d5dce0; border-radius: 3px;} .review-t2 > .review > .answer:before { content:""; position: absolute; display: block; top:-11px; left:20px; width: 20px; height: 20px; border: 1px solid #d5dce0; background: white; transform: rotate(45deg);} .review-t2 > .review > .answer:after { content:""; position: absolute; display: block; top:-9px; left:20px; width: 20px; height: 20px; background: white; transform: rotate(45deg);} .review-t2 > .review > .answer > p { padding:13px 15px; margin:0; color: #999;} /* list fiches plats */ .fdish-t2{text-align: left; } .fdish-t2 > h3 { font-weight: 700;} .fdish-t2 > h4 { font-weight: 700; } .fdish-t2 > p { font-weight: 400;} .fdish-t2 > p > a { text-decoration: none; font-weight: 700;} } @media screen and (min-width: 1000px) { /* list fiches resto */ .fresto-t1 > h3 { margin: 0 0 7px 0 ; font-size: 18px; font-weight: 700;} .fresto-t1 > .bonus > div { margin-bottom:7px; font-size: 16px;} .fresto-t1 > h4 { margin: 0 0 12px 0 ; font-size: 14px;} .fresto-t1 > ul { margin-bottom: 6px;} .fresto-t1 > ul > li { padding: 2px 5px; margin: 0 4px 3px 0; font-size: 12px;} .fresto-t1 > .promo-line { font-size: 12px;} .fresto-t2 > h3 { margin: 0 0 3px 0 ; font-size: 14px;} .fresto-t2 > .bonus > div { margin-bottom:3px; font-size: 12px;} .fresto-t2 > h4 { margin: 0 0 10px 0 ; font-size: 12px;} .fresto-t2 > ul { margin-bottom: 10px;} .fresto-t2 > ul > li { padding: 2px 5px; margin: 0 4px 2px 0; font-size: 11px;} .fresto-t2 > .promo-line { margin-bottom: 10px; font-size: 12px;} .fresto-listing-v2{font-size: 16px} /* list promo-inlist */ .promo-inlist .promo-inlist-text {padding-bottom:15px;} .promo-inlist .promo-inlist-text > h3 { margin: 0 0 7px 0 ; font-size: 18px;} .promo-inlist .promo-inlist-text > p { margin: 0 0 10px 0 ; font-size: 14px;} .promo-inlist .promo-inlist-text > span { margin-bottom: 10px; font-size: 12px;} .promo-inlist .sponsor { font-size: 12px;} /* list fiches actu */ .factu-t1 > h3 { margin: -3px 0 6px 0 ; font-size: 18px;} .factu-t1 > h4 { margin: 0 0 14px 0 ; font-size: 12px;} .factu-t1 > .news-text { margin:0; font-size: 14px;} .factu-t1 > ul.gallery { margin-top: 14px;} .factu-t1 > ul.gallery > li { margin: 0 8px 8px 0; width:calc((100% - 24px ) / 4);} .factu-t1 > ul.gallery > li:nth-of-type(4n) {margin-right:0;} .factu-t1 > .promo-line { margin-top: 14px; font-size: 14px;} .actu-list > h2 {text-align: left;} .actu-list > ul > li { padding-bottom: 17px; margin-bottom: 17px;} .actu-list > ul > li > a { width: 150px; margin-right: 17px;} .actu-list > ul > li > a > img { width: 100%;} .actu-list > ul > li > a > .large { } .actu-list > ul > li > a > .small { display:none; } .actu-list > ul > li >.factu-t1:not(.no-pic) { width:calc(100% - 167px); margin-left: 162px;} .actu-list > .btn-grey-big { margin: 24px auto;} /* list fiches plats */ .fdish-t2 > h3 { margin: 0 0 17px 0 ; font-size: 18px;} .fdish-t2 > h4 { margin: 0 0 3px 0 ; font-size: 14px;} .fdish-t2 > p { margin: 0 0 5px 0 ; font-size: 12px;} /* list reviews */ .review-t1 { border-bottom: 1px solid #d5dce0; padding-bottom:30px; margin-bottom:30px;} .review-t1 > .review-resto { padding: 0 0 10px 0; font-size: 24px;} .review-t1 > .review > .profile {float:left; text-align: center; width:80px; margin-right:25px;} .review-t1 > .review > .profile > .portrait {width:80px;} .review-t1 > .review > .profile > .portrait > a > img { width:100%; } .review-t1 > .review > .profile > .name-infos > h3 { font-size: 14px;margin:12px 0 0 0;} .review-t1 > .review > .profile > .name-infos > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .review-t1 > .review > .profile > .name-infos > span { font-size: 12px; } .review-t1 > .review > .grades {float:left; width:calc(100% - 105px); height:80px; text-align: left;} .review-t1 > .review > .grades > .main-grade { float: left; width: 100px; text-align: center;} .review-t1 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 12px;} .review-t1 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t1 > .review > .grades > .main-grade > a > div {font-size: 30px; font-weight: 700;} .review-t1 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t1 > .review > .grades > .main-grade > a > span {display:none;} .review-t1 > .review > .grades > .detail-grade { float:left; width:calc(100% - 100px); } .review-t1 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 30px; text-align: center;} .review-t1 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t1 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type {display:none;} .review-t1 > .review > .content { float:right; width:calc(100% - 105px); text-align: left;} .review-t1 > .review > .content > .post-date { margin-top:10px; font-size: 14px;} .review-t1 > .review > .content > p { margin-bottom: 20px; margin-top:10px; } .review-t1 > .review > .content > ul { width: 100%; margin-bottom: 20px;} .review-t1 > .review > .content > ul > li { float: left; width: calc((100% / 6) - 8.33px ); margin-right: 10px; } .review-t1 > .review > .content > ul > li:nth-of-type(6n) { margin-right: 0; } .review-t1 > .review > .content > ul > li > a > img { width: 100%; } .review-t1 > .review > .infos {float:right; width:calc(100% - 105px); text-align: left; color:#999; font-size: 12px;} .review-t1 > .review > .infos > .date {} .review-t1 > .review > .infos > .date:after { content:"|"; margin: 0 16px; font-size: 1.2em; bottom:-1px;} .review-t1 > .review > .infos > .origin {} .review-t1 > .review > .infos > .icon-warnninging { float:right; color:#999; top:-4px; text-decoration: none;transition:0.3s;} .review-t1 > .review > .infos > .icon-warnninging:hover { color:#333;} .review-t1 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 18px; bottom:-3px} .review-t1 > .review > .answer { float:right; width:calc(100% - 105px); } } @media screen and (min-width: 750px) { /* single reviews */ .review-t2 { padding-bottom:30px; margin-bottom:30px; text-align: left;} .review-t2 > .review > h3 { font-size: 16px; margin: 25px 0 0 0; } .review-t2 > .review > .post-date { margin-top: 15px; padding-top:10px; font-size: 14px; color:#999; border-top: 1px solid #d5dce0; } .review-t2 > .review > .post-date > span { display:inline-block; line-height: 1.4em;} .review-t2 > .review > .post-date > span:after { content:"-"; margin:auto 0.5em;} .review-t2 > .review > .post-date > span:last-of-type:after { content:"";} .review-t2 > .review > .resume > .pic { float: left; width: 160px; margin-right:10px;} .review-t2 > .review > .resume > .pic > img { width:100%;} .review-t2 > .review > .resume > .infos { float:left; width:calc(65% - 10px); text-align: left;} .review-t2 > .review > .resume > .infos > .resto-name { font-size: 16px; margin-bottom:10px; font-weight: 700;} .review-t2 > .review > .resume > .infos > .date { font-size: 12px; color:#999;} .review-t2 > .review > .resume > .grades { float:left; width:calc(100%); } .review-t2 > .review > .resume > .grades > .grade { float: left; width: 90px; margin-top: 6px; font-size: 35px; font-weight: 700; color:#ff344b;} .review-t2 > .review > .resume > .grades > .grade > span {font-size: 0.7em;} .review-t2 > .review > .resume > .grades > .detail-grade { float:right; width:calc(100% - 90px); } .review-t2 > .review > .resume > .grades > .detail-grade > li {float:right; margin:0 0 0 10px; text-align: center;} .review-t2 > .review > .resume > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t2 > .review > .resume > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t2 > .review > .content { width:100%;} .review-t2 > .review > .content > p { margin-bottom: 20px; } .review-t2 > .review > .content > ul { width: 100%; margin-bottom: 20px;} .review-t2 > .review > .content > ul > li { float: left; width: calc((100% / 6) - 8.33px ); margin-right: 10px; } .review-t2 > .review > .content > ul > li:nth-of-type(6n) { margin-right: 0; } .review-t2 > .review > .content > ul > li > a > img { width: 100%; } .review-t2 > .review > .answer { width:100%;} } @media screen and (min-width: 750px) and (max-width: 999px) { /* list fiches resto */ .fresto-t1 > h3 { margin: 0 0 7px 0 ; font-size: 18px;} .fresto-t1 > .bonus > div { margin-bottom:7px; font-size: 16px;} .fresto-t1 > h4 { margin: 0 0 12px 0 ; font-size: 14px;} .fresto-t1 > ul { margin-bottom: 6px;} .fresto-t1 > ul > li { padding: 2px 5px; margin: 0 4px 3px 0; font-size: 12px;} .fresto-t1 > .promo-line { font-size: 12px;} .fresto-t2 > h3 { margin: 0 0 3px 0 ; font-size: 14px;} .fresto-t2 > .bonus > div { margin-bottom:3px; font-size: 12px;} .fresto-t2 > h4 { margin: 0 0 10px 0 ; font-size: 12px;} .fresto-t2 > ul { margin-bottom: 10px;} .fresto-t2 > ul > li { padding: 2px 5px; margin: 0 4px 2px 0; font-size: 11px;} .fresto-t2 > .promo-line { margin-bottom: 10px; font-size: 12px;} .fresto-listing-v2{font-size: 16px} /* list promo-inlist */ .promo-inlist .promo-inlist-text {padding-bottom:15px;} .promo-inlist .promo-inlist-text > h3 { margin: 0 0 7px 0 ; font-size: 18px;} .promo-inlist .promo-inlist-text > p { margin: 0 0 10px 0 ; font-size: 14px;} .promo-inlist .promo-inlist-text > span { margin-bottom: 10px; font-size: 12px;} .promo-inlist .sponsor { font-size: 12px;} /* list fiches actu */ .factu-t1 > h3 { margin: -3px 0 6px 0 ; font-size: 18px;} .factu-t1 > h4 { margin: 0 0 14px 0 ; font-size: 12px;} .factu-t1 > .news-text { margin:0; font-size: 14px;} .factu-t1 > ul.gallery { margin-top: 14px;} .factu-t1 > ul.gallery > li { margin: 0 8px 0 0; width:calc((100% - 24px ) / 4 );} .factu-t1 > ul.gallery > li:nth-of-type(4n) {margin-right:0;} .factu-t1 > .promo-line { margin-top: 14px; font-size: 14px;} .actu-list > ul > li { padding-bottom: 14px; margin-bottom: 14px;} .actu-list > ul > li > a { width: 60px;} .actu-list > ul > li > a > img { width: 100%;} .actu-list > ul > li > a > .large { display:none; } .actu-list > ul > li > a > .small { } .actu-list .factu-t1 { padding-left:70px; width:100%;} /* list fiches plats */ .fdish-t2 {margin-top: 0.5em;} .fdish-t2 > h3 { margin: 0 0 10px 0 ; font-size: 18px;} .fdish-t2 > h4 { margin: 0 0 5px 0 ; font-size: 14px;} .fdish-t2 > p { margin: 0 0 5px 0 ; font-size: 12px;} /* list reviews */ .review-t1 > .review-resto { padding: 0 0 10px 0; font-size: 22px;} .review-t1 { border-bottom: 1px solid #d5dce0; padding-bottom:30px; margin-bottom:30px;} .review-t1 > .review > .profile {float:left; text-align: center; width:70px; margin-right:10px;} .review-t1 > .review > .profile > .portrait { width:70px;} .review-t1 > .review > .profile > .portrait > a > img { width:100%; } .review-t1 > .review > .profile > .name-infos > h3 { font-size: 12px; margin:6px 0 0 0;} .review-t1 > .review > .profile > .name-infos > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .review-t1 > .review > .profile > .name-infos > span { font-size: 12px; } .review-t1 > .review > .grades {float:left; width:calc(100% - 80px); height:80px; text-align: left;} .review-t1 > .review > .grades > .main-grade { float: left; width: 100px; text-align: center;} .review-t1 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 6px;} .review-t1 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t1 > .review > .grades > .main-grade > a > div {font-size: 30px; font-weight: 700;} .review-t1 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t1 > .review > .grades > .main-grade > a > span {display:none;} .review-t1 > .review > .grades > .detail-grade { float:left; width:calc(100% - 100px); } .review-t1 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 15px; text-align: center;} .review-t1 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t1 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type {display:none;} .review-t1 > .review > .content {float:right; width:calc(100% - 105px); text-align: left;} .review-t1 > .review > .content > .post-date { margin-top:10px; font-size: 14px;} .review-t1 > .review > .content > p { margin-bottom:20px; margin-top:5px;} .review-t1 > .review > .content > ul {width:100%; margin-bottom:20px;} .review-t1 > .review > .content > ul > li { float: left; width:calc((100% / 6) - 8.33px ); margin-right: 10px; } .review-t1 > .review > .content > ul > li:nth-of-type(6n) { margin-right: 0; } .review-t1 > .review > .content > ul > li > a > img { width: 100%; } .review-t1 > .review > .infos {float:right; width:calc(100% - 105px); text-align: left; color:#999; font-size: 12px; line-height: 1.4em;} .review-t1 > .review > .infos > .date {} .review-t1 > .review > .infos > .origin:before {content: "\A"; white-space: pre; } .review-t1 > .review > .infos > .icon-warnninging { float:right; color:#999; text-decoration: none; top:-0.3em;transition:0.3s;} .review-t1 > .review > .infos > .icon-warnninging:hover { color:#333;} .review-t1 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 18px; bottom:-3px} .review-t1 > .review > .answer { float:right; width:calc(100% - 105px); } .page-listing.member .review .grades { width:100%;} .page-listing.member .review .infos { width:100%;} .page-listing.member .review .content { width:100%;} .page-listing.member .review .answer { width:100%;} } @media screen and (min-width: 0px) and (max-width: 749px) { /* single reviews */ .review-t2 { padding-bottom:30px; margin-bottom:30px;} .review-t2 > .review > h3 { font-size: 16px; margin: 25px 0 0 0; text-align: center;} .review-t2 > .review > .post-date { margin-top: 15px; font-size: 14px; color:#999; text-align: left;} .review-t2 > .review > .post-date > span { display:inline-block; line-height: 1.4em;} .review-t2 > .review > .resume > .pic { float: left; width: 45%; margin-right:10px;} .review-t2 > .review > .resume > .pic > img { width:100%;} .review-t2 > .review > .resume > .infos { float:left; width:calc(55% - 10px); text-align: left;} .review-t2 > .review > .resume > .infos > .resto-name { font-size: 16px; margin-bottom:10px; font-weight: 700;} .review-t2 > .review > .resume > .infos > .date { font-size: 12px; color:#999;} .review-t2 > .review > .resume > .grades { float:left; width:100%; margin: 10px -10px; padding: 15px 10px 5px 10px; border-top:1px solid #d5dce0;} .review-t2 > .review > .resume > .grades > .grade { float: left; width: 70px; margin-top: 12px; font-size: 32px; font-weight: 700; color:#ff344b;} .review-t2 > .review > .resume > .grades > .grade > span {font-size: 0.7em;} .review-t2 > .review > .resume > .grades > .detail-grade { float:right; width:calc(100% - 70px); } .review-t2 > .review > .resume > .grades > .detail-grade > li {float:right; margin:0 0 0 10px; text-align: center;} .review-t2 > .review > .resume > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t2 > .review > .resume > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t2 > .review > .content { width:100%; text-align: left;} .review-t2 > .review > .content > p { margin-bottom: 20px;} .review-t2 > .review > .content > ul { width: 100%; margin-bottom: 20px;} .review-t2 > .review > .content > ul > li { float: left; width: calc((100% / 4) - 4px ); margin: 0 5px 5px 0; } .review-t2 > .review > .content > ul > li:nth-of-type(4n) { margin-right: 0; } .review-t2 > .review > .content > ul > li > a > img { width: 100%; } .review-t2 > .review > .answer { width:100%;} } @media screen and (min-width: 361px) and (max-width: 749px) { /* list fiches resto */ .fresto-t1 > h3 { margin: 0 0 4px 0 ; font-size: 18px;} .fresto-t1 > .bonus > div { margin-bottom:4px; font-size: 16px;} .fresto-t1 > h4 { margin: 0 0 4px 0 ; font-size: 14px;} .fresto-t1 > ul { margin-bottom: 4px;} .fresto-t1 > ul > li { padding: 2px 5px; margin: 0 4px 3px 0; font-size: 12px;} .fresto-t1 > .promo-line { font-size: 12px;} .fresto-t2 > h3 { margin: 0 0 3px 0 ; font-size: 16px;} .fresto-t2 > .bonus > div { margin-bottom:3px; font-size: 12px;} .fresto-t2 > h4 { margin: 0 0 10px 0 ; font-size: 12px;} .fresto-t2 > ul { margin-bottom: 10px;} .fresto-t2 > ul > li { padding: 2px 5px; margin: 0 4px 2px 0; font-size: 12px;} .fresto-t2 > .promo-line { margin-bottom: 10px; font-size: 12px;} .fresto-listing-v2{font-size: 16px} /* list promo-inlist */ .promo-inlist .promo-inlist-text {padding-bottom:20px;} .promo-inlist .promo-inlist-text > h3 { margin: 0 0 7px 0 ; font-size: 18px;} .promo-inlist .promo-inlist-text > p { margin: 0 0 10px 0 ; font-size: 14px;} .promo-inlist .promo-inlist-text > span { margin-bottom: 10px; font-size: 12px;} .promo-inlist .sponsor { font-size: 12px;} /* list fiches actu */ .factu-t1 > h3 { margin: -3px 0 6px 0 ; font-size: 18px;} .factu-t1 > h4 { margin: 0 0 14px 0 ; font-size: 12px;} .factu-t1 > .news-text { margin:0; font-size: 14px;} .factu-t1 > ul.gallery { margin-top: 14px;} .factu-t1 > ul.gallery > li { margin: 0 8px 0 0; width:calc((100% - 24px ) / 4 );} .factu-t1 > ul.gallery > li:nth-of-type(4n) {margin-right:0;} .factu-t1 > .promo-line { margin-top: 14px; font-size: 14px;} .actu-list { padding-top:20px;} .actu-list > ul > li { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #d5dce0;} .actu-list > ul > li > a { width: 60px;} .actu-list > ul > li > a > img { width: 100%;} .actu-list > ul > li > a > .large { display:none; } .actu-list > ul > li > a > .small { } .actu-list .factu-t1 { padding-left:70px; width:100%; } /* list fiches plats */ .fdish-t2 {margin-top: 0.5em;} .fdish-t2 > h3 { margin: 0 0 10px 0 ; font-size: 16px;} .fdish-t2 > h4 { margin: 0 0 7px 0 ; font-size: 14px;} .fdish-t2 > p { margin: 0 0 5px 0 ; font-size: 12px;} /* list reviews */ .review-t1 { border-bottom: 1px solid #d5dce0; padding: 10px 10px 15px 10px; margin:0 -10px 25px -10px;} .review-t1 > .review-resto { padding: 0 0 10px 0; font-size: 20px;} .review-t1 > .review > .profile {float:left; text-align: left; width:200px; margin-right:10px;} .review-t1 > .review > .profile > .portrait {float:left; width:70px;} .review-t1 > .review > .profile > .portrait > a > img { width:100%; } .review-t1 > .review > .profile > .name-infos {float: left; padding-left: 10px; width: 125px;} .review-t1 > .review > .profile > .name-infos > h3 { font-size: 14px; margin: 0px 0 5px 0;} .review-t1 > .review > .profile > .name-infos > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .review-t1 > .review > .profile > .name-infos > span { font-size: 14px; } .review-t1 > .review > .content {float:right; width:100%; text-align: left;} .review-t1 > .review > .content > .post-date { margin-top:10px; font-size: 14px;} .review-t1 > .review > .content > p { margin-bottom:20px; margin-top:10px; } .review-t1 > .review > .content > ul {width:100%; margin-bottom:20px;} .review-t1 > .review > .content > ul > li { float: left; width:calc((100% / 6) - 8.33px ); margin-right: 10px; } .review-t1 > .review > .content > ul > li:nth-of-type(6n) { margin-right: 0; } .review-t1 > .review > .content > ul > li > a > img { width: 100%; } .review-t1 > .review > .infos {float:right; width:100%; text-align: left; color:#999; font-size: 12px; line-height: 1.4em;} .review-t1 > .review > .infos > .date {} .review-t1 > .review > .infos > .origin:before {content: "\A"; white-space: pre; } .review-t1 > .review > .infos > .icon-warnninging { position:absolute; top:0; right:0; color:#999; text-decoration: none; transition:0.3s;} .review-t1 > .review > .infos > .icon-warnninging:hover { color:#333;} .review-t1 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 14px; bottom:-3px} .review-t1 > .review > .answer { float:right; width:100%; } } @media screen and (min-width: 0px) and (max-width: 360px) { /* list fiches resto */ .fresto-t1 > h3 { margin: 0 0 4px 0 ; font-size: 16px;} .fresto-t1 > h4 { margin: 0 0 4px 0 ; font-size: 12px;} .fresto-t1 > .bonus > div { margin-bottom:4px; font-size: 14px;} .fresto-t1 > ul { margin-bottom: 4px;} .fresto-t1 > ul > li { padding: 2px 5px; margin: 0 4px 2px 0; font-size: 10px;} .fresto-t1 > .promo-line { font-size: 12px;} .fresto-t2 > h3 { margin: 0px 0 2px 0 ; font-size: 14px;} .fresto-t2 > h4 { margin: 0 0 8px 0 ; font-size: 12px;} .fresto-t2 > .bonus > div { margin-bottom:2px; font-size: 12px;} .fresto-t2 > ul { margin-bottom: 6px;} .fresto-t2 > ul > li { padding: 2px 4px; margin: 0 2px 2px 0; font-size: 10px;} .fresto-t2 > .promo-line { margin-bottom: 10px; font-size: 12px;} .fresto-listing-v2{font-size: 14px} /* list promo-inlist */ .promo-inlist .promo-inlist-text {padding-bottom:10px;} .promo-inlist .promo-inlist-text > h3 { margin: 0 0 7px 0 ; font-size: 16px;} .promo-inlist .promo-inlist-text > p { margin: 0 0 10px 0 ; font-size: 12px;} .promo-inlist .promo-inlist-text > span { margin-bottom: 10px; font-size: 12px;} .promo-inlist .sponsor { font-size: 12px;} /* list fiches actu */ .factu-t1 > h3 { margin: -3px 0 0px 0 ; font-size: 14px;} .factu-t1 > h4 { margin: 0 0 7px 0 ; font-size: 12px;} .factu-t1 > .news-text { margin:0; font-size: 14px;} .factu-t1 > ul.gallery { margin-top: 7px;} .factu-t1 > ul.gallery > li { margin: 0 6px 6px 0; width:calc((100% - 12px)/ 3);} .factu-t1 > ul.gallery > li:nth-of-type(3n) {margin-right:0;} .factu-t1 > .promo-line { margin-top: 7px; font-size: 14px;} .actu-list { padding-top:10px;} .actu-list > ul > li { padding: 14px 10px 14px 10px; border-bottom: 1px solid #d5dce0;} .actu-list > ul > li > a { width: 60px;} .actu-list > ul > li > a > img { width: 100%;} .actu-list > ul > li > a > .large { display:none; } .actu-list > ul > li > a > .small { } .actu-list .factu-t1 { padding-left:70px; width:100%;} /* list fiches plats */ .fdish-t2 {margin-top: 0.5em;} .fdish-t2 > h3 { margin: 0 0 8px 0 ; font-size: 15px;} .fdish-t2 > h4 { margin: 0 0 3px 0 ; font-size: 14px;} .fdish-t2 > p { margin: 0 0 3px 0 ; font-size: 12px;} /* list reviews */ .review-t1 { border-bottom: 1px solid #d5dce0; padding: 10px 10px 15px 10px; margin:0 -10px 25px -10px;} .review-t1 > .review-resto { padding: 0 0 10px 0; font-size: 18px;} .review-t1 > .review > .profile { float: left; text-align: left; width: 200px; margin-right: 10px;} .review-t1 > .review > .profile > .portrait {float:left; width:50px;} .review-t1 > .review > .profile > .portrait > a > img { width:100%; } .review-t1 > .review > .profile > .name-infos {float: left; padding-left: 10px; width: 120px;} .review-t1 > .review > .profile > .name-infos > h3 { font-size: 14px; margin: 0px 0 5px 0;} .review-t1 > .review > .profile > .name-infos > h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .review-t1 > .review > .profile > .name-infos > span { font-size: 14px; } .review-t1 > .review > .grades { position:absolute; right:10px; top:0; height:50px; text-align: left;} .review-t1 > .review > .grades.active { width:calc(100% - 20px); } .review-t1 > .review > .grades > .main-grade { float: right; width: 100px; text-align: right;} .review-t1 > .review > .grades > .main-grade > .grade-name {display:none;} .review-t1 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t1 > .review > .grades > .main-grade > a > div {font-size: 30px; font-weight: 700; line-height: 0.8em; color:#ff344b;} .review-t1 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t1 > .review > .grades > .main-grade > a > span {display: inline; text-decoration: underline; color:#999; font-size: 12px;} .review-t1 > .review > .grades:not(.active) > .detail-grade {display:none; } .review-t1 > .review > .grades:not(.active) {width:calc(100% - 210px);} .review-t1 > .review > .grades > .detail-grade { position:absolute; top:0; right:0; width:calc(100% - 40px); height:100%; background:white;} .review-t1 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 2px; width:48px; text-align: center;} .review-t1 > .review > .grades > .detail-grade > li > .grade-name { font-size: 12px; margin-bottom: 5px;} .review-t1 > .review > .grades > .detail-grade > li > .c100 { margin: auto;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type { display: block; border-left: 1px solid #d5dce0; margin-left:3px; padding-left:5px; height:100%; width:20px; cursor:pointer;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type:before { top: calc(50% - 7px); font-size: 14px;} .review-t1 > .review > .content {float:right; width:100%; text-align: left;} .review-t1 > .review > .content > .post-date { margin-top:5px; font-size: 12px;} .review-t1 > .review > .content > p { margin-bottom:10px; margin-top:5px; font-size: 14px} .review-t1 > .review > .content > ul {width:100%; margin-bottom:10px;} .review-t1 > .review > .content > ul > li { float: left; width:calc((100% / 6) - 8.33px ); margin-right: 10px; } .review-t1 > .review > .content > ul > li:nth-of-type(6n) { margin-right: 0; } .review-t1 > .review > .content > ul > li > a > img { width: 100%; } .review-t1 > .review > .infos {float:right; width:100%; text-align: left; color:#999; font-size: 10px; line-height: 1.4em;} .review-t1 > .review > .infos > .date {} .review-t1 > .review > .infos > .origin:before {content: "\A"; white-space: pre; } .review-t1 > .review > .infos > .icon-warnninging { position:absolute; top:0; right:0; color:#999; text-decoration: none; transition:0.3s;} .review-t1 > .review > .infos > .icon-warnninging:hover { color:#333;} .review-t1 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 14px; bottom:-3px} .review-t1 > .review > .answer { float:right; width:100%; font-size: 14px;} } @media screen and (min-width: 606px) and (max-width: 749px) { .review-t1 > .review > .grades {float:left; width:calc(100% - 210px); height:80px; text-align: left;} .review-t1 > .review > .grades > .main-grade { float: right; width: 100px; text-align: center; margin-left:10px;} .review-t1 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 6px;} .review-t1 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t1 > .review > .grades > .main-grade > a > div {font-size: 30px; font-weight: 700;} .review-t1 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t1 > .review > .grades > .main-grade > a > span {display:none;} .review-t1 > .review > .grades > .detail-grade { float:right; width:calc(100% - 110px); } .review-t1 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 20px; text-align: center;} .review-t1 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t1 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type {display:none;} } @media screen and (min-width: 361px) and (max-width: 605px) { .review-t1 > .review > .grades { position:absolute; right:10px; top:0; width:100%; height:80px; text-align: left;} .review-t1 > .review > .grades > .main-grade { float: right; width: 100px; text-align: right;} .review-t1 > .review > .grades > .main-grade > .grade-name {display:none;} .review-t1 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t1 > .review > .grades > .main-grade > a > div {font-size: 40px; font-weight: 700; color:#ff344b;} .review-t1 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t1 > .review > .grades > .main-grade > a > span {display: inline; text-decoration: underline; color:#999;} .review-t1 > .review > .grades:not(.active) > .detail-grade {display:none; } .review-t1 > .review > .grades:not(.active) {width:calc(100% - 200px);} .review-t1 > .review > .grades > .detail-grade { position:absolute; top:0; right:0; width:calc(100% - 90px); height:100%; background:white;} .review-t1 > .review > .grades > .detail-grade > li {float:right; margin:0px; width:55px; text-align: center;} .review-t1 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t1 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type { display: block; border-left:1px solid #d5dce0; margin-left:3px; padding-left:5px; height:100%; width:20px; cursor:pointer;} .review-t1 > .review > .grades > .detail-grade > li:first-of-type:before {top:calc(50% - 7px); font-size: 14px;} } /*--------- avis member t3 ----------------------------------------------------------------------*/ @media screen and (min-width:0px){ .review-t3 > .resto > .review-resto {text-align: left; font-weight: 700;} .review-t3 > .resto > .review-resto > a {text-decoration: none;} .review-t3 > .review > .content > .post-date { color:#999; margin-top:10px; font-size: 14px;} .review-t3 > .review > .answer { float: left; margin-top: 15px; text-align: left; font-weight: 400; border: 1px solid #d5dce0; border-radius: 3px;} .review-t3 > .review > .answer:before { content:""; position: absolute; display: block; top:-11px; left:20px; width: 20px; height: 20px; border: 1px solid #d5dce0; background: white; transform: rotate(45deg);} .review-t3 > .review > .answer:after { content:""; position: absolute; display: block; top:-9px; left:20px; width: 20px; height: 20px; background: white; transform: rotate(45deg);} .review-t3 > .review > .answer > p { padding:13px 15px; margin:0; color: #999;} .review-t3 > .review > .infos > .icon-warnninging { transition:0.3s;} .review-t3 > .review > .infos > .icon-warnninging:hover { color:#333;} } @media screen and (min-width: 1000px){ .review-t3 { border-bottom: 1px solid #d5dce0; margin:auto -20px; padding:0 20px; padding-bottom:30px; margin-bottom:30px; } .review-t3 > .resto {float: left; width:300px;} .review-t3 > .resto > .review-resto-pic { overflow:hidden;} .review-t3 > .resto > .review-resto-pic > a {display:block; height:100%; width:100%;} .review-t3 > .resto > .review-resto-pic > a > img { width:100%; height:auto;} .review-t3 > .resto > .review-resto { vertical-align:middle; padding: 10px 10px 10px 0px;} .review-t3 > .resto > .review-resto a { display:inline-block; margin:0; font-size: 22px; line-height: 1.4em;} .review-t3 > .review { float:right; width:calc(100% - 330px);} .review-t3 > .review > .grades {float:right; width:100%; height:80px; margin-top:10px; text-align: left;} .review-t3 > .review > .grades > .main-grade { float: left; width: 100px; } .review-t3 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 12px;} .review-t3 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t3 > .review > .grades > .main-grade > a > div {font-size: 40px; font-weight: 700;} .review-t3 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t3 > .review > .grades > .main-grade > a > span {display:none;} .review-t3 > .review > .grades > .detail-grade { float:left; width:calc(100% - 100px); } .review-t3 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 30px; text-align: center;} .review-t3 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t3 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t3 > .review > .grades > .detail-grade > li:first-of-type {display:none;} .review-t3 > .review > .content { float:right; width:100%; text-align: left;} .review-t3 > .review > .content > p { margin-bottom: 20px; } .review-t3 > .review > .content > ul { width: 100%; margin-bottom: 20px;} .review-t3 > .review > .content > ul > li { float: left; width: calc((100% / 5) - ((10px * (5 - 1) ) / 5) ); margin-right: 10px; } .review-t3 > .review > .content > ul > li:nth-of-type(5n) { margin-right: 0; } .review-t3 > .review > .content > ul > li > a > img { width: 100%; } .review-t3 > .review > .infos {float:right; width:100%; text-align: left; color:#999; font-size: 12px;} .review-t3 > .review > .infos > .date {} .review-t3 > .review > .infos > .date:after { content:"|"; margin: 0 16px; font-size: 1.2em; bottom:-1px;} .review-t3 > .review > .infos > .origin {} .review-t3 > .review > .infos > .icon-warnninging { float:right; color:#999; top:-4px; text-decoration: none;} .review-t3 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 18px; bottom:-3px} .review-t3 > .review > .answer { float:right; width:100%;} } @media screen and (min-width: 750px) and (max-width: 999px) { .review-t3 { border-bottom: 1px solid #d5dce0; margin:auto -20px; padding:0 20px; padding-bottom:30px; margin-bottom:30px; } .review-t3 > .resto {float: left; width:240px;} .review-t3 > .resto > .review-resto-pic { overflow:hidden;} .review-t3 > .resto > .review-resto-pic > a {display:block; height:100%; width:100%;} .review-t3 > .resto > .review-resto-pic > a > img { height:auto; width:100%;} .review-t3 > .resto > .review-resto { vertical-align:middle; padding: 10px 10px 10px 0px;} .review-t3 > .resto > .review-resto a { display:inline-block; margin:0; font-size: 20px; line-height: 1.4em;} .review-t3 > .review { float:right; width:calc(100% - 260px);} .review-t3 > .review > .grades {float:right; width:100%; height:80px; margin-top:10px; text-align: left;} .review-t3 > .review > .grades > .main-grade { float: left; width: 100px; } .review-t3 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 12px;} .review-t3 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t3 > .review > .grades > .main-grade > a > div {font-size: 40px; font-weight: 700;} .review-t3 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t3 > .review > .grades > .main-grade > a > span {display:none;} .review-t3 > .review > .grades > .detail-grade { float:left; width:calc(100% - 100px); } .review-t3 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 30px; text-align: center;} .review-t3 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t3 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t3 > .review > .grades > .detail-grade > li:first-of-type {display:none;} .review-t3 > .review > .content { float:right; width:100%; text-align: left;} .review-t3 > .review > .content > p { margin-bottom: 20px; } .review-t3 > .review > .content > ul { width: 100%; margin-bottom: 20px;} .review-t3 > .review > .content > ul > li { float: left; width: calc((100% / 5) - ((10px * (5 - 1) ) / 5) ); margin-right: 10px; } .review-t3 > .review > .content > ul > li:nth-of-type(5n) { margin-right: 0; } .review-t3 > .review > .content > ul > li > a > img { width: 100%; } .review-t3 > .review > .infos {float:right; width:100%; text-align: left; color:#999; font-size: 14px; line-height: 1.4em;} .review-t3 > .review > .infos > .date {} .review-t3 > .review > .infos > .origin:before {content: "\A"; white-space: pre; } .review-t3 > .review > .infos > .icon-warnninging { position:absolute; top:0; right:0; color:#999; text-decoration: none; } .review-t3 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 16px; bottom:-3px} .review-t3 > .review > .answer { float:right; width:100%;} } @media screen and (min-width: 0px) and (max-width: 749px) { .review-t3 { border-bottom: 1px solid #d5dce0; padding-bottom:30px; margin-bottom:30px;} .review-t3 > .resto > .review-resto-pic { height:25vh; overflow:hidden;} .review-t3 > .resto > .review-resto-pic > a {display:block; height:100%; width:100%;} .review-t3 > .resto > .review-resto-pic > a > img { position:absolute; margin:auto; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; width:100%; height:auto;} .review-t3 > .resto > .review-resto {padding: 10px 0 10px 0; font-size: 20px;} .review-t3 > .review > .grades {float:left; width:100%; height:70px; text-align: left;} .review-t3 > .review > .grades > .main-grade { float: left; width: 100px; } .review-t3 > .review > .grades > .main-grade > .grade-name {font-size: 12px; margin-bottom: 12px;} .review-t3 > .review > .grades > .main-grade > a {text-decoration: none;} .review-t3 > .review > .grades > .main-grade > a > div {font-size: 30px; font-weight: 700;} .review-t3 > .review > .grades > .main-grade > a > div > span {font-size: 0.6em; margin-left:0.15em;} .review-t3 > .review > .grades > .main-grade > a > span {display:none;} .review-t3 > .review > .grades > .detail-grade { float:left; width:calc(100% - 100px); } .review-t3 > .review > .grades > .detail-grade > li {float:right; margin:0 0 0 10px; text-align: center;} .review-t3 > .review > .grades > .detail-grade > li > .grade-name {font-size: 12px; margin-bottom:12px;} .review-t3 > .review > .grades > .detail-grade > li > .c100 {margin:auto;} .review-t3 > .review > .grades > .detail-grade > li:first-of-type {display:none;} .review-t3 > .review > .content {float:right; width:100%; text-align: left;} .review-t3 > .review > .content > .post-date { margin-top:5px; font-size: 12px;} .review-t3 > .review > .content > p { margin-bottom:10px; font-size: 14px} .review-t3 > .review > .content > ul {width:100%; margin-bottom:10px;} .review-t3 > .review > .content > ul > li { float: left; width:calc((100% / 4) - ((10px * (4 - 1) ) / 4) ); margin-right: 10px; } .review-t3 > .review > .content > ul > li:nth-of-type(4n) { margin-right: 0; } .review-t3 > .review > .content > ul > li > a > img { width: 100%; } .review-t3 > .review > .infos {float:right; width:100%; text-align: left; color:#999; font-size: 10px; line-height: 1.4em;} .review-t3 > .review > .infos > .date {} .review-t3 > .review > .infos > .origin:before {content: "\A"; white-space: pre; } .review-t3 > .review > .infos > .icon-warnninging { position:absolute; top:0; right:0; color:#999; text-decoration: none; } .review-t3 > .review > .infos > .icon-warnninging:before { margin:0 5px; font-size: 14px; bottom:-3px} .review-t3 > .review > .answer { float:right; width:100%; font-size: 14px;} } @media screen and (min-width: 0px) and (max-width: 340px) { .review-t3 { margin-left:-10px; margin-right:-10px;} .review-t3 > .review > .grades { height:60px;} .review-t3 > .review > .grades > .main-grade { width: 75px; text-align: center;} .review-t3 > .review > .grades > .main-grade > .grade-name { margin-bottom:0;} .review-t3 > .review > .grades > .detail-grade { width:calc(100% - 75px); } .review-t3 > .review > .grades > .detail-grade > li { margin:0 0 0 10px;} .review-t3 > .review > .grades > .detail-grade > li:first-of-type {margin:0;} } /*--------- pic upload / edit ----------------------------------------------------------------*/ @media screen and (min-width:0px){ .pic-upld { text-align: center; padding:0 5px 5px 0;} .pic-upld .pic-add, .pic-upld .pic-load, .pic-upld .pic-ok { position:relative; width:100%; height:100%; border: 1px solid #ccc; transition:0.3s; } .pic-upld .pic-add { border: 1px dashed #ccc; cursor: pointer;} .pic-upld .pic-add > .add { z-index: 1; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; text-align: center; color:#999;} .pic-upld .pic-load > .progressbar { position:absolute; z-index: 2; bottom: 10%; left:10%; width:80%; height:5%; background: white; border:1px solid white; box-shadow: 0 0 3px 0px rgba(0,0,0,0.3); border-radius: 5px;} .pic-upld .pic-load > .progressbar > .progress { height:100%; background: #ff344b; border-radius: 5px;} .pic-upld .pic-load > .progressbar > .icon-pictures { position:absolute; left:0; right:0; top:-42px; } .pic-upld .pic-load > .progressbar > .icon-pictures:before { color:#ddd; font-size: 30px;} .pic-upld .pic-ok { background:#ff344b;} .pic-upld .pic-ok > img { width:100%; height:100%;} .pic-upld .pic-ok > .actions { z-index: 1; position: absolute; bottom:8px; right:0; left:0; margin:auto; transition:0.3s;} .pic-upld .pic-ok > .actions > .edit, .pic-upld .pic-ok > .actions > .delete { display:inline-block; padding:5px; margin:0 2px; border-radius:5px; text-align: center; background:rgba(255,255,255,0.8); text-align: center; cursor: pointer; transition:0.3s;} .pic-upld .pic-ok > .actions > .edit:before, .pic-upld .pic-ok > .actions > .delete:before { display:block; font-size: 16px; margin:0; text-align: center; color:#ff344b; cursor: pointer; transition:0.3s; line-height: 1em;} } @media screen and (min-width: 999px){ .pic-upld .pic-add:hover {border: 1px solid #ff344b; background:#ff344b; } .pic-upld .pic-add:hover > .add { color:white;} .pic-upld .pic-ok > .actions { opacity:0; } .pic-upld .pic-ok:hover > .actions { opacity:1;} .pic-upld .pic-ok > .actions > .edit:hover, .pic-upld .pic-ok > .actions > .delete:hover { background:rgba(255,255,255,1); } .pic-upld .pic-ok > .actions > .edit:hover:before, .pic-upld .pic-ok > .actions > .delete:hover:before { font-size: 18px; } } /*--------- side nav ----------------------------------------------------------------------*/ @media screen and (min-width:0px){ /*left side menu*/ .side-nav > .btn-mobile { background: #ccc; color: white; border-radius:3px; cursor: pointer;} .side-nav > .btn-mobile:before { margin-right:0.5em; font-size: 1.2em; bottom:-0.15em; } .side-nav .close-mobile { position:absolute; top: 5px; right:5px; width:30px; height:30px; cursor: pointer; text-align: center; line-height: 30px; color:#ccc;} .side-nav > .side-nav-list { text-align: left;} .side-nav > .side-nav-list > ul > li { font-weight: 700;} .side-nav > .side-nav-list > ul > li:hover { color: #666;} .side-nav > .side-nav-list > ul > li a { text-decoration: none;} .side-nav > .side-nav-list > ul > li > ul > li { color: #333; font-weight: 400;} .side-nav > .side-nav-list > ul > li > ul > li > ul { margin:0.5em auto 0.5em 1.5em;} .side-nav > .side-nav-list > ul > li > ul > li > ul > li { color: #333;margin-bottom:0.3em; font-weight: 400;} } @media screen and (min-width: 1000px){ .side-nav { background: #f5f5f5; border-radius:3px; padding: 20px; margin-bottom:50px;} .side-nav > .btn-mobile, .side-nav .close-mobile { display: none;} .side-nav > .side-nav-list { padding-bottom:25px;} .side-nav > .side-nav-list > h3 { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom:1px solid #d5dce0; font-size: 20px; font-weight: 400; } .side-nav > .side-nav-list > ul > li { padding-bottom: 10px; font-size: 14px;} .side-nav > .side-nav-list > ul > li:last-of-type { padding-bottom: 0px;} .side-nav > .side-nav-list > ul > li > ul > li { padding-bottom: 5px; padding-left:15px;} .side-nav > .side-nav-list > ul > li > ul > li:first-of-type { padding-top: 10px; } .side-nav > .side-nav-list > ul > li > a:before { margin-right:8px; font-size: 18px; color:#ccc; transition:0.3s;} .side-nav > .side-nav-list > ul > li > a:hover:before { color:#ff344b; } } @media screen and (min-width: 750px) and (max-width: 999px) { .side-nav { } .side-nav > .btn-mobile { display:inline; padding: 10px 20px 12px 20px; font-size: 20px; line-height: 47px;} .side-nav:not(.active) > .side-nav-list { left:-100vw; box-shadow: 0 0 0 0 rgba(0,0,0,0);} .side-nav > .side-nav-list { position: fixed; z-index:50; top:50px; left:0; padding:30px; height: 100vh; overflow-x: hidden; overflow-y: auto; background: #f5f5f5; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); transition:0.3s; } .side-nav > .side-nav-list > h3 { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom:1px solid #d5dce0; font-size: 20px; font-weight: 400; } .side-nav > .side-nav-list > ul > li { padding-bottom: 10px; font-size: 14px;} .side-nav > .side-nav-list > ul > li:last-of-type { padding-bottom: 0px;} .side-nav > .side-nav-list > ul > li > ul > li { padding-bottom: 5px; padding-left:15px;} .side-nav > .side-nav-list > ul > li > ul > li:first-of-type { padding-top: 10px; } } @media screen and (min-width: 0px) and (max-width: 749px) { .side-nav { } .side-nav > .btn-mobile { height:35px; font-size: 16px; line-height: 31px;} .side-nav:not(.active) > .side-nav-list { left:-100vw; box-shadow: 0 0 0 0 rgba(0,0,0,0);} .side-nav > .side-nav-list { position: fixed; z-index:50; top:50px; left:0; padding:30px; height: 100vh; overflow-x: hidden; overflow-y: auto; background: #f5f5f5; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); transition:0.3s; } .side-nav > .side-nav-list > h3 { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom:1px solid #d5dce0; font-size: 20px; font-weight: 400; } .side-nav > .side-nav-list > ul > li { padding-bottom: 10px; font-size: 14px;} .side-nav > .side-nav-list > ul > li:last-of-type { padding-bottom: 0px;} .side-nav > .side-nav-list > ul > li > ul > li { padding-bottom: 5px; padding-left:15px;} .side-nav > .side-nav-list > ul > li > ul > li:first-of-type { padding-top: 10px; } } /*--------- filters -----------------------------------------------------------------------*/ @media screen and (min-width:0px) { .when-list > .when-later { cursor:pointer; } .when-list > .when-later > span { } .when-list > .when-later:after { color:#666; bottom:-0.1em; content:'\e90d'; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition:0.3s;} .when-list > .when-later:hover:after {color:#ff344b;} .filters .filter-list > ul > li > a.more:not(.active) > span.less {display:none;} .filters .filter-list > ul > li > a.more.active > span.more {display:none;} .filters .filter-list > ul > li > ul.grade-filter > li { } .filters .filter-list > ul > li > ul.grade-filter > li a { display: block; z-index: 1; width:100%; overflow: visible;} .filters .filter-list > ul > li > ul.grade-filter > li .grade-logos{ display:inline-block;margin-top:-4px; height: 20px; left:5px; width: 96px; font-size: 25px; background: #ccc;} .filters .filter-list > ul > li > ul.grade-filter > li .grade-logos > .valor{ width:100%; height:100%; background:#ff344b;} .filters .filter-list > ul > li > ul.grade-filter > li .grade-logos > .grade-line{ position: absolute; top:0; left:0; width:100%; height:100%; background:url(/images/bt/grade-mask-grey.png) center no-repeat; background-size: auto 100%; } .filters .filter-list > ul > li > ul.grade-filter > li span { top:-23px; left:30px; vertical-align: top; line-height: 20px; } } @media screen and (min-width: 1000px) { .when-list{ z-index:10; position: absolute; left:calc(100% + 32px); width:500px; padding:7px; border-radius: 3px;} .when-list > select { float: left; width:auto; margin-right:4px; text-align: left;} .when-list > .when-later { float: left; width:auto; padding-top:7px; margin-right:4px; text-align: left;} .when-list > .when-later > span { font-size:14px; margin-left:0.4em;} .when-list > .when-later > .day { font-weight: 700; margin-right: 0.1em;} .when-list > .when-later > .date { font-weight: 700; margin-right: 0.3em;} .when-list > .when-later > .hour { } .when-list > .when-later:after { font-size:14px; margin:0 0.2em 0 0.4em;} .rearrange {z-index:11; position: absolute; right:-770px; padding:7px;} .rearrange > select.arrange { float: right; width:auto;} .rearrange > .title { float:right; margin:0.45em 0.7em;} .listing > .grey-block { height:50px; background:#f5f5f5; border-radius: 3px; margin-bottom:20px;} .filters .order-cta { position: absolute; z-index: 10; left: 259px; width:100%; padding: 5px; } .filters .order-cta .order-cta-btn { padding:0 25px; height: 39px; line-height: 39px; } } @media screen and (min-width: 750px) and (max-width: 999px) { .when-list{ z-index:10; position: absolute; left:calc(100% + 20px); width:450px; padding:7px;} .when-list:not(.active) {display:none;} .when-list > select {float: left; width:auto; margin-right:4px; height:30px; padding:5px; padding-right:20px; text-align: left;} .when-list > .btn-edit-med {float: left; width:auto; margin-right:4px; height:30px; padding:5px; padding-right:2em; text-align: left; line-height: 1.3em;} .when-list > .when-later { float: left; width:auto; padding-top:5px; margin-right:4px; text-align: left;} .when-list > .when-later > span { font-size:14px; margin-left:0.4em;} .when-list > .when-later > .day { font-weight: 700; margin-right: 0.1em;} .when-list > .when-later > .date { font-weight: 700; margin-right: 0.3em;} .when-list > .when-later > .hour { } .when-list > .when-later:after { font-size:14px; margin:0 0.2em 0 0.4em;} .rearrange {z-index:10; position: absolute; right:calc(-100vw + 286px); padding:7px; } .rearrange > select.arrange { float:right; height:30px; width:auto; padding:5px; padding-right:20px;} .rearrange > .title { float: right; margin:0.4em 0.7em;} .listing > .grey-block { height:45px; background:#f5f5f5; border-radius: 3px; margin-bottom:20px;} .filters .order-cta { position: absolute; z-index: 10; left: 247px; width:100%; padding: 3px; } .filters .order-cta .order-cta-btn { padding:0 25px; height: 39px; line-height: 39px; } } @media screen and (min-width: 750px) { .filters { text-align: left; margin-bottom:25px;} .filters h2 {font-size: 20px; margin:0 0 15px 0; font-weight: 700;} .filters > .btn-map { width:100%; margin:0 0 22px 0; background:white; border-radius:3px; overflow:hidden; text-align: center; cursor:pointer;} .filters > .btn-map > span.label-l, .filters > .btn-map > span.label-r { display:none;} .filters > .btn-map > img { width:100%; height:auto;} .filters > .btn-map > a { position:absolute; display:block; top:10px; left:0; right:0; margin: auto; width:68%; cursor:pointer;} .filters > .btn-map > a > span.icon-back {display:none; } .filters > .btn-map.active {height:35px;} .filters > .btn-map.active > a { top:auto; bottom: auto; width:100%; } .filters > .btn-map.active > a > span {display:none; } .filters > .btn-map.active > a > span.icon-back {display:inline; width:100%;} .filters > .btn-map.active > img {display:none;} .filters .my-tags { width:100%; padding:14px 11px; margin:0 0 22px 0; background:white; border:1px solid #d5dce0; border-radius:3px;} .filters .my-tags > h2 { float:left; display:block; width:calc(100% - 30px);} .filters .my-tags > h2 > span { display:none;} .filters .my-tags > a.icon-bin { float:right; display:block; padding:4px 8px; margin-right:-8px; text-decoration: none;} .filters .my-tags > a.icon-bin > span { display:none;} .filters .my-tags > a.icon-bin:before { color: #999; } .filters .my-tags > a.icon-bin:hover:before { color: #ff344b; } .filters .my-tags > ul {float:left; width:100%;} .filters .my-tags > ul > li { margin-bottom:8px; font-size: 14px; line-height:14px; } .filters .my-tags > ul > li > span { font-weight: 700; } .filters .my-tags > ul > li > ul { } .filters .my-tags > ul > li > ul > li { } .filters .my-tags > ul > li > ul > li > a { float:left; width:auto; max-width:100%; height:20px; padding:2px 17px 2px 5px; margin: 5px 3px 0 0; background:#f5f5f5; border-radius:3px; line-height: 1em; text-decoration: none; cursor: pointer; transition:background 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .filters .my-tags > ul > li > ul > li > a:after { position:absolute; top:0.8em; right:0; vertical-align:baseline; margin-left:5px; margin-right:5px; font-size: 0.6em; color:#333; text-decoration: none; transition:0.2s;} .filters .my-tags > ul > li > ul > li > a:hover{ background:#666; color:white; } .filters .my-tags > ul > li > ul > li > a:hover:after { color:white; } .filters .filter-list { width:100%; padding:14px 11px; background: #f5f5f5; border-radius:3px;} .filters .filter-list > h2:before { display:none;} .filters .filter-list > h2 > .close { display:none;} .filters .filter-list > a { display:none;} .filters .filter-list > ul > li { padding:17px 0; border-top:1px solid #d5dce0; } .filters .filter-list > ul > li > span { display:block; margin:0 0 20px 0; font-weight: 700; font-size: 14px; text-decoration: none; cursor:default;} .filters .filter-list > ul > li > a.filter-group { display:block; margin:0 0 20px 0; font-weight: 700; font-size: 14px; text-decoration: none; cursor:default;} .filters .filter-list > ul > li > a.filter-group > span { display:none;} .filters .filter-list > ul > li > a.filter-group:hover { color:#333;} .filters .filter-list > ul > li > a.more { display:block; margin: 15px 0 0 0; width:100%; font-size: 14px; color:#999; font-weight: 400; text-decoration: underline; text-align: center; cursor: pointer; } .filters .filter-list > ul > li > a.more:hover {color: #333;} .filters .filter-list > ul > li > ul {width:100%;} .filters .filter-list > ul > li > ul li > a { display:block; max-width:100%; padding-bottom: 13px; font-size: 12px; max-width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .filters .filter-list > ul > li > ul ul { margin-left:10px;} .filters .filter-list > ul > li > ul > li input[type="search"] { float:left; display:block; padding-right:20px; width:calc(100% - 30px); height:30px; text-decoration: none; border-radius: 3px 0 0 3px ; border:1px solid #d5dce0; text-overflow: ellipsis;} .filters .filter-list > ul > li > ul > li .delete { float:left; margin-left:-30px; width:30px; height:30px; font-size: 10px; line-height: 30px;} .filters .filter-list > ul > li > ul > li .finder { float:left; display:block; width: 30px; background: #999; height: 30px; padding:0; text-decoration: none; text-align: center; font-size: 15px; line-height: 30px; vertical-align:middle; border-radius: 0 3px 3px 0; } .filters .filter-list > ul > li > ul > li .finder:after { vertical-align: middle;bottom:0.16em; } .filters .filter-list > ul > li > ul > li .finder:hover { color: white; background: #ff344b;} .filters .filter-list > ul > li > ul li > a.tag-unic { text-decoration: none; } .filters .filter-list > ul > li > ul li > a.tag-unic.active { padding-left:0px; font-weight: 900; background:none;} .filters .filter-list > ul > li > ul li > a.tag-unic.active:hover {color:#999; } .filters .filter-list > .filter-actions {display:none;} .mobile-filter > a.icon-filter { display:none;} } @media screen and (min-width: 0px) and (max-width: 749px) { .mobile-filter {float:left; margin-bottom:5px; margin-left:5px;} .mobile-filter > a.icon-filter { z-index: 15; display:inline-block; padding:8px 8px 0px 8px; height:30px; border:0 solid transparent; color: white; background: #999; border-radius: 3px; text-decoration: none; font-size: 14px;} .mobile-filter > a.icon-filter:before { margin-right:6px;} .mobile-filter > a.icon-filter span { margin-left:0.4em; padding:0.2em 0.3em;line-height: 1; font-weight: 700;color: #ff344b; background: #fff; border-radius: 3px; text-decoration: none; font-size: 14px;} .filters .order-cta { float: left; margin-left: 10px; margin-bottom: 5px; } .filters .order-cta .order-cta-btn { padding:0 15px; height: 30px; line-height: 30px; } .when-list { float:left; text-align: center; width:calc(100% - 86px - 10px); max-width:360px; margin-left:5px; margin-bottom:5px;} .when-list:not(.active) {} .when-list > select { float:left; width:calc((100% - 54px )/2); padding:6px; padding-right:22px; margin-right:4px; height:30px;} .when-list > .btn-edit-med { float:left; width:calc((100% + 46px )/2); padding:4px 6px; padding-right:2em !important; height:30px; font-size: 14px; line-height: 1.3em;} .when-list > .btn-edit-med:after { bottom:-0.3em;} .when-list > .when-later { float:left; width:calc((100% - 8px )/3); padding:0; padding-top:2px; padding-left:1.4em; margin-right:4px; height:30px; text-align: left;} .when-list > .when-later > span { font-size:12px; line-height: 1.1em;} .when-list > .when-later > .day { display:block; width:100%; font-weight: 700; margin:-0.1em 0 -0.2em 0;} .when-list > .when-later > .date { display:inline-block; font-size:11px; margin-right:0.5em; } .when-list > .when-later > .hour { display:inline-block; font-size:11px; } .when-list > .when-later:after { position:absolute; top:8px; left:0; font-size:12px; padding-left:0.35em; } .when-list > label.order-type-label { margin:8px 10px;} .rearrange { float:left; margin-left:10px; margin-bottom:5px; width:65px; height:30px; overflow:hidden; border-radius:3px;} .rearrange > select.arrange { bottom:60px; padding:4px; height:90px; min-width:70px; background: #999 url('/images/bt/select-arrange.jpg') no-repeat left bottom; background-size: auto 33% ; border:0;color:rgba(255,255,255,1); } .rearrange.en > select.arrange { background: #999 url('/images/bt/select-arrange-en.jpg') no-repeat left bottom; background-size: auto 33% ; } .rearrange > .title { display:none;} .filters > .btn-map { float:right; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; height:30px; overflow:hidden; text-align: center; padding:5px 0; font-size: 12px; cursor:pointer;} .filters > .btn-map > span.label-l { color:#333; vertical-align: middle; transition:color 0.3s;} .filters > .btn-map > span.label-r { color:#999; vertical-align: middle; transition:color 0.3s;} .filters > .btn-map > img { display:none;} .filters > .btn-map > a { vertical-align: middle; width:40px; height:20px; background:white; border: 1px solid #d5dce0 ; border-radius:20px; padding: 0; margin: 0; background: white; cursor:pointer;} .filters > .btn-map > a > span {display:none; position:absolute; display:block; top:1px; left:1px; width:16px; padding:0; height:16px; background: #ff344b; border-radius:20px; font-size: 0px; transition:0.3s;} .filters > .btn-map.active > a > span { left:20px;} .filters > .btn-map.active > span.label-l { color:#999;} .filters > .btn-map.active > span.label-r { color:#333;} .filters .my-tags { width:100%; padding:0px 10px; border-bottom:1px solid #d5dce0;} .filters .my-tags > h2 { float:left; display:block; font-weight: 700; font-size: 16px; margin:0.3em auto 0em auto; padding: 0.3em 0 0.4em 0; width:100%;} .filters .my-tags > h2 > span { margin-left:0.5em; margin-right:2px; padding:0.3em; color: white; background: #ff344b; border-radius: 3px; text-decoration: none; font-size: 14px;} .filters .my-tags > a.icon-bin { display:none;} .filters .my-tags > a.icon-bin:before { color: #999; } .filters .my-tags > a.icon-bin:hover:before { color: #ff344b; } .filters .my-tags > ul { max-height:0; opacity:0; padding:0 0;} .filters .my-tags > ul { width:100%; padding:0.5em 0; text-align: left; max-height:100vh; opacity:1; overflow: hidden; transition:0.3s; } .filters .my-tags > ul > li { font-size: 14px; line-height:14px; margin-bottom:0.2em;} .filters .my-tags > ul > li > span {float:left; display:inline; font-weight: 700; display:inline-block; width:auto; max-width:100%; padding:0.4em 0em 0.5em 0em; margin: 0.2em 0.2em 0 0; border-radius:3px; line-height: 1em; text-decoration: none; cursor: pointer; transition:background 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .filters .my-tags > ul > li > ul { } .filters .my-tags > ul > li > ul > li { display:inline; } .filters .my-tags > ul > li > ul > li > a { display:inline-block; width:auto; max-width:100%; padding:0.4em 1.5em 0.5em 0.8em; margin: 0.2em 0.2em 0 0; background:white; border-radius:3px; line-height: 1em; text-decoration: none; cursor: pointer; transition:background 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .filters .my-tags > ul > li > ul > li > a:after { position:absolute; top:1.2em; right:0.1em; vertical-align:baseline; margin-left:5px; margin-right:5px; font-size: 0.6em; color:#333; text-decoration: none; transition:0.2s;} .filters .my-tags > ul > li > ul > li > a:hover{ color:#333; } .filtersNN .filter-tags-zone:not(.active) {left:-100%;} .filtersNN .filter-list:not(.active) {left:-100%;} .filters .filter-tags-zone:not(.active) {left:-100%;} .filters .filter-tags-zone:not(.active) .filter-list > h2 {left:-100%;} .filters .filter-tags-zone:not(.active) .filter-actions {left:-100%;} .filters .filter-tags-zone { position: fixed; z-index: 1000; top:0; bottom:0; left:0%; overflow-x: hidden; overflow-y: scroll; width:100%; height:100%; padding:50px 0px 0px 0px; background:#f5f5f5; text-align: left; transition:0.3s;} .filters .filter-list { position: unset; width:100%; padding:0px 0px 65px 0px; background:#f5f5f5; text-align: left;} .filters .filter-list > h2 { position: fixed; z-index: 1000; top:0; left:0; display:inline-block; width:100%; margin-top: 0; padding-top: 13px;padding-left:10px; height:50px; background:#f5f5f5; border-bottom:1px solid #d5dce0; transition:0.3s;} .filters .filter-list > h2:before { margin-right:10px;border-top:1px solid #d5dce0;} .filters .filter-list > h2 > .close { float:right; margin-right:10px; padding:1px 10px;} .filters .filter-list > h2 > .close:before { font-size: 15px;} .filters .filter-list > .filter-actions { position: fixed; z-index: 1001; bottom:0; left:0; width:100%; height:65px; background:#f5f5f5; padding:10px; transition:0.3s;} .filters .filter-list > .filter-actions > .no-filter { display:block; float:left; margin-right:4%; width: 47%; text-align:center; height:45px; line-height:42px; padding:0px 10px; background:#999; color:white; text-decoration: none; font-size:16px; border-radius:3px;} .filters .filter-list > .filter-actions > .no-filter.disabled { opacity:0.15;} .filters .filter-list > .filter-actions > .no-filter:before { font-size:14px; line-height:0px; vertical-align: baseline;margin-right:10px;} .filters .search-area { margin:15px 15px 15px 15px ; } .filters .filter-list > .filter-actions > .valid-filter { display:block; float:left; width: 47%; text-align:center; height:45px; line-height:42px; padding:0px 10px; background:#ff344b; color:white; text-decoration: none; font-size:16px; border-radius:3px;} .filters .filter-list > .filter-actions > .valid-filter:before { font-size:16px; bottom:-0.08em; line-height:0px; vertical-align: baseline; margin-right:10px;} .filters .search-area { margin:15px 15px 15px 15px ; } .filters .filter-list > ul > li { border-top:1px solid #d5dce0; margin-bottom:-1px;} .filters .filter-list > ul > li:first-of-type { border-top:0; margin-bottom:-1px; } .filters .filter-list > ul > li > span { display:block; padding:15px 0 15px 10px; font-weight: 700; font-size: 16px; text-decoration: none;} .filters .filter-list > ul > li > a { display:block; padding:15px 0 15px 10px; font-weight: 700; font-size: 16px; border-bottom:1px solid #d5dce0; text-decoration: none; cursor:pointer;} .filters .filter-list > ul > li > a.filter-group > span { display:inline-block; margin-left: 10px; padding:2px 3px; min-width:18px; color:white; background:#ff344b; border-radius: 3px; text-align: center; font-weight: 700;} .filters .filter-list > ul > li > a.more { display:none; } .filters .filter-list > ul > li:not(.active) > ul { max-height: 0px; padding:0px 0px; overflow:hidden;} .filters .filter-list > ul > li.active > ul { background: white; padding:15px 10px; max-height: 10000px; transition: 0.4s; overflow:hidden; } .filters .filter-list > ul > li.static > ul { padding:15px 10px; height:auto; max-height: 10000px; transition: 0.4s; overflow:hidden; } .filters .filter-list > ul > li > a:not(.active):after { content:"\e90f"; float:right; margin-right:10px;font-family: '123cacher'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .filters .filter-list > ul > li.active > a:after { content:"\e912";font-family: '123cacher'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .filters .filter-list > ul > li > ul li a { display:block; padding-bottom: 13px; font-size: 14px; max-width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filters .filter-list > ul > li > ul ul { margin-left:10px;} .filters .filter-list > ul > li > ul > li input[type="search"] { float:left; display:block; padding-right:20px; width:calc(100% - 30px); height:30px; text-decoration: none; border-radius: 3px 0 0 3px ; border:1px solid #d5dce0; text-overflow: ellipsis;} .filters .filter-list > ul > li > ul > li .delete { float:left; margin-left:-30px; width:30px; height:30px; font-size: 10px; line-height: 30px;} .filters .filter-list > ul > li > ul > li .finder { float:left; display:block; width: 30px; background: #999; color:white; height: 30px; padding: 0; text-decoration: none; text-align: center; font-size: 15px; line-height: 27px; border-radius: 0 3px 3px 0; } .filters .filter-list > ul > li > ul > li .finder { } .filters .filter-list > ul > li > ul > li > a.tag-unic { text-decoration: none; } .filters .filter-list > ul > li > ul > li > a.tag-unic.active { padding-left:0px; font-weight: 900; background:none;} .filters .filter-list > ul > li > ul > li > a.tag-unic.active:hover {color:#999; } .filters .filter-list > ul > li > ul.grade-filter > li .grade-logos > .grade-line{ background:url(/images/bt/grade-mask.png) center no-repeat; background-size: auto 100%;} } @media screen and (min-width: 0px) and (max-width: 360px) { .when-list > .btn-edit-med { padding:4px; padding-right:1.5em !important; } .when-list > .btn-edit-med:after {font-size: 1.1em; margin-left: 0.4em; bottom:-0.3em;} } /*--------- page login / new address -----------------------------------------------------------------*/ @media screen and (min-width:0px){ body.page-login {background: #f5f5f5;} body.page-login h1 {margin-top:2em;} body.page-login .login {margin:auto;} .login .tabs > ul > li { float:left; width:50%; margin-bottom:-1px;} .login .tabs > ul > li.active { z-index: 10; background: white; border: 1px solid #d5dce0; border-top: 4px solid #ff344b; border-bottom: 1px solid white; border-radius: 3px 3px 0 0;} .login .tabs > ul > li > a { display:block;text-decoration: none; width:100%; height:100%;} .login > .tab-cnt .sub-spon {max-width:360px; margin:0 auto 2em auto;} .login > .tab-cnt .sub-spon > p > .red-text{ color:#ff344b; font-weight: 700;} .login > .tab-cnt .icon-facebook { display:inline-block; background: #3b5998; color: white; text-decoration: none; border-radius:3px;} .login > .tab-cnt .icon-facebook:hover { background: #4466ac; } .login > .tab-cnt .icon-facebook:before { font-size: 1.7em; bottom:-0.25em; margin-right:0.7em;} .login > .tab-cnt .inter-word { margin:1em; text-transform: uppercase;} .login > .tab-cnt .input-cnt.icon { width:100%; border-radius: 3px;} .login > .tab-cnt .input-cnt.icon:before { position: absolute; display:block ; width:50px; z-index: 10; color: #ccc; pointer-events: none; text-align: center;} .login > .tab-cnt .input-cnt.icon > input{ padding-left:50px;} .login > .tab-cnt .input-cnt { margin: 0 0 10px 0;} .login > .tab-cnt .radio-cnt.civil label{ width:auto; float: left; margin-right:20px; margin-bottom:15px; } .login > .tab-cnt a.mdp-link { height:auto; margin: 0.4em 0.5em 1.5em 0.5em;border:none; text-decoration: none; color: #ff344b; text-align: left;} .login > .tab-cnt a.mdp-link:hover { text-decoration: underline;} .login > .tab-cnt .btn-red-big { margin: 1em 0 0em 0;padding-left:3em; padding-right:3em; } .login > .tab-cnt .checkbox-cnt > label { margin:1em 0 0.5em 0;} .login > .tab-cnt .legals { margin:2em 0 0 0; color: #999;} /*--------- phone -------*/ body.page-login .congratulation { background: white; color:#ff344b; font-weight: 700; border-radius:3px;} .login { background: white;} .login > form > .phone-code { float:left; } .login > form > .phone-num { float:left; } .login > form > .options { float:left; margin: 1em auto; text-align: left} .login > .infos { text-align: left; line-height: 1.4em;} .login > .infos > div { margin-bottom: 0.4em;} .login > .infos > ul { margin-bottom: 1em; padding-left:1em;} .login > .infos > ul > li:before { content:"•"; position:absolute; color:#999; left:-1em;} /*--------- sms -------*/ .login > form > .sms-code { width:80%; text-align: center;} .login > form > .sms-code > input {text-align: center; padding:0;} /* new address */ .address-new > ul > li { float:left; margin-top:2.5em; width:100%;} .address-new > ul > li > .input-cnt > label {position:absolute; top:-1.6em; left:0; font-size: 1em; } .address-new > ul > li > .input-cnt {width:100%;} .address-new > ul > li.phone > .phone-code { float:left; width:11em; margin-right:10px;} .address-new > ul > li.phone > .number { float:left; width:calc(100% - 11em - 10px);} .address-new .ui-autocomplete {max-width:100%;} /* changepass */ body.page-login.changepass .login {padding-bottom:2em; } body.page-login.changepass .input-cnt { text-align: center;} body.page-login.changepass .input-cnt label{ display:inline-block; margin-bottom: 0.5em; margin-top: 1em;} } @media screen and (min-width: 1000px) { body.page-login .login { width: 500px; margin-top: 85px; margin-bottom: 85px;} .login .tabs > ul > li { height: 60px; font-size: 24px;} .login .tabs > ul > li > a { line-height: 50px;} .login > .tab-cnt { padding: 40px 25px; background: white; border: 1px solid #d5dce0;} .login > .tab-cnt.t-login { border-radius: 0 3px 3px 3px;} .login > .tab-cnt.t-subscribe { border-radius: 3px 0 3px 3px;} .login > .tab-cnt .icon-facebook { padding: 0 25px; height:55px; line-height: 52px; width:310px;} .login > .tab-cnt .inter-word { font-size: 20px;} .login > .tab-cnt .input-cnt.icon:before { top:0.35em; font-size: 1.8em; } .login > .tab-cnt .checkbox-cnt > label { font-size: 14px;} .login > .tab-cnt .legals { font-size: 14px;} /*--------- phone -------*/ body.page-login .congratulation { display:inline-block; padding: 0 20px; margin: 35px auto; font-size: 18px; height:50px; line-height: 48px; } body.page-login .congratulation:before { font-size: 36px; vertical-align: middle; margin-right:10px; bottom:2px;} .login { margin-left:auto; margin-right:auto;margin-top:0px; max-width:480px;} .login > h2 { height: 75px; background: #ff344b; color: white; font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 75px;} .login > form {padding: 25px 50px;} .login > form > .phone-code { width:40%; } .login > form > .phone-num { margin-left:10px; width:calc(60% - 10px);} .login > form > a {margin-top: 30px; padding: 0 50px;} .login > .infos { padding:5px 35px 5px 35px; font-size: 12px;} .login > .later { text-align: right; padding: 0 35px 25px 35px;} .login > form > .solutions > a { font-size: 14px;} /* new address */ .address-new { float:left; width:calc((100% - 30px)/2)} .address-new:nth-of-type(2n) {margin-left:30px;} .address-new ul > li.half { float:left; width:calc(50% - 5px);} .address-new ul > li.half.right {margin-left:10px;} .address-new > ul > li > .input-cnt > textarea { height:139px;} body.page-login .val { float:left; width:100%; padding:50px 0 25px 0;} body.page-login .val > button { padding: 0 25px;} } @media screen and (min-width: 750px) and (max-width: 999px) { body.page-login .login { width: 500px; margin-top: 85px; margin-bottom: 85px;} .login .tabs > ul > li { height: 60px; font-size: 24px;} .login .tabs > ul > li > a { line-height: 50px;} .login > .tab-cnt { padding: 40px 25px; background: white; border: 1px solid #d5dce0;} .login > .tab-cnt.t-login { border-radius: 0 3px 3px 3px;} .login > .tab-cnt.t-subscribe { border-radius: 3px 0 3px 3px;} .login > .tab-cnt span > input { padding-left: 40px;} .login > .tab-cnt span:before {font-size: 20px; top:5px; width:40px;} .login > .tab-cnt .icon-facebook { padding: 0 25px; height:55px; line-height: 52px; width:350px;} .login > .tab-cnt .inter-word { font-size: 20px;} .login > .tab-cnt .input-cnt.icon:before { top:0.22em; font-size: 1.6em; } .login > .tab-cnt .options > label { font-size: 14px;} .login > .tab-cnt .legals { font-size: 14px;} /*--------- phone -------*/ body.page-login .congratulation { display:inline-block; padding: 0 20px; margin: 35px auto; font-size: 18px; height:50px; line-height: 48px;} body.page-login .congratulation:before { font-size: 36px; vertical-align: middle; margin-right:10px; bottom:2px;} .login { margin-top:0px; margin-left:auto; margin-right:auto; max-width: 480px;} .login > h2 { height: 75px; background: #ff344b; color: white; font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 75px;} .login > form {padding: 25px 50px;} .login > form > .phone-code { width:40%; } .login > form > .phone-num { float:left; margin-left:10px; width:calc(60% - 10px);} .login > form > a {margin-top: 30px; padding: 0 50px;} .login > .infos { padding:5px 35px 5px 35px; font-size: 12px;} .login > .later { text-align: right; padding: 0 35px 25px 35px;} .login > form > .solutions > a { font-size: 14px;} /* new address */ .address-new { float:left; width:calc((100% - 30px)/2)} .address-new:nth-of-type(2n) {margin-left:30px;} .address-new ul > li.half { float:left; width:calc(50% - 5px);} .address-new ul > li.half.right {margin-left:10px;} .address-new > ul > li > .input-cnt > textarea { height:109px;} body.page-login .val { float:left; width:100%; padding:50px 0 25px 0;} body.page-login .val > button { padding: 0 25px;} } @media screen and (min-width: 0px) and (max-width: 749px) { body.page-login .login { width: 100%; margin-top: 25px; margin-bottom: 25px; max-width:360px;} .login .tabs > ul > li { height: 40px; font-size: 16px;} .login .tabs > ul > li > a { line-height: 35px;} .login > .tab-cnt { padding: 30px 25px; background: white; border-top: 1px solid #d5dce0;} .login > .tab-cnt .sub-spon > p {font-size: 14px;} .login > .tab-cnt span > input { padding-left: 40px;} .login > .tab-cnt span:before {font-size: 20px; top:5px; width:40px;} .login > .tab-cnt .icon-facebook { width:100%; font-size: 16px; padding:0; height:40px; line-height: 37px;} .login > .tab-cnt .icon-facebook:before { font-size: 1.5em; bottom:-0.2em; margin-right:0.4em;} .login > .tab-cnt .inter-word { font-size: 16px;} .login > .tab-cnt .input-cnt.icon:before { top:0.2em; font-size: 1.4em; } .login > .tab-cnt .options > label { font-size: 12px; margin-right:0; margin-left:0;} .login > .tab-cnt .legals { font-size: 12px; margin-right:-15px; margin-left:-15px;} /*--------- phone -------*/ body.page-login .congratulation { display:inline-block; margin: 15px auto 0 auto; padding: 0 10px; font-size: 15px; height:50px; line-height: 48px;} body.page-login .congratulation:before { font-size: 30px; vertical-align: middle; margin-right:5px; bottom:2px;} .login { margin-top:0;} .login { margin-top:0px; margin-left:auto; margin-right:auto; max-width: 480px;} .login > h2 { width:100%; padding-top:15px; font-size: 18px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.4em;} .login > h2:after { content:""; display:block; background:#ff344b; margin: 5px auto auto auto; width:40%; height:2px;} .login > form {padding: 25px 10px;} .login > form > .phone-code { width:45%; } .login > form > .phone-num { margin-left:10px; width:calc(55% - 10px);} .login > form > a { margin-top: 20px; padding: 0 50px;} .login > .infos { padding:5px 10px 5px 10px; font-size: 12px;} .login > .later { text-align: center; padding: 0 15px 25px 15px;} .login > form > .solutions > a { font-size: 12px;} /* new address */ .address-new { max-width: 480px; margin-right: auto; margin-left:auto; padding-left:15px; padding-right:15px;} .address-new ul > li.half { float:left; width:calc(50% - 5px);} .address-new ul > li.half.right {margin-left:10px;} .address-new > ul > li > .input-cnt > textarea { height:120px; width: 100% !important;} body.page-login .val { float:left; width:100%; padding:25px 0;} body.page-login .val > button { padding: 0 25px;} } /*--------- page pro subscription ---------------------------------------------------------------------*/ @media screen and (min-width:0px) { body.page-sub-pro .steps { background:#f5f5f5;} body.page-sub-pro .steps > ul { position: absolute; bottom:0; left:0; right:0;} body.page-sub-pro .steps > ul > li { display: inline-block; line-height: 2.5em; color: #ccc; } body.page-sub-pro .steps > ul > li.active {color: #ff344b;} body.page-sub-pro .steps > ul > li.active:after { content:""; position:absolute; width:100%; bottom:0; left:0; background: #ff344b;} body.page-sub-pro .sub-pro { padding-bottom: 50px; } body.page-sub-pro .sub-pro .infos { text-align: left; } body.page-sub-pro .sub-pro .infos > span { color:#ff344b; font-weight: 700;} body.page-sub-pro .sub-pro .infos > ul { margin: 0.5em 0;} body.page-sub-pro .sub-pro .infos > ul > li { padding:0.7em 0 0.7em 1.9em; line-height: 1.5em;} body.page-sub-pro .sub-pro .infos > ul > li:before { position:absolute; left:0em; font-size: 1.5em; color:#ff344b;} body.page-sub-pro .sub-pro .fullform > form > div { text-align: left;} body.page-sub-pro .sub-pro > .grats > .icon-checked { background:#ff344b; color:white; margin: auto;} body.page-sub-pro .sub-pro > .grats > h2 { font-weight: 700; color: #ff344b; } body.page-sub-pro .sub-pro > .grats > p { line-height: 1.4em; } body.page-sub-pro .sub-pro > .grats > a { margin:1em; } } @media screen and (min-width: 1000px) { body.page-sub-pro .steps { height:135px;} body.page-sub-pro .steps > ul > li { font-size: 28px; padding:0 2em;} body.page-sub-pro .steps > ul > li.active:after { height:5px;} body.page-sub-pro .sub-pro h1 { text-align: left; } body.page-sub-pro .sub-pro .infos { float:left; padding-right:35px; width:50%;} body.page-sub-pro .sub-pro .infos > span { font-size: 16px;} body.page-sub-pro .sub-pro .infos > ul > li { font-size: 14px;} body.page-sub-pro .sub-pro .preform { float:left; width:50%;} body.page-sub-pro .sub-pro .preform > form > .input-cnt { width:100%; margin-bottom:1em;} body.page-sub-pro .sub-pro .preform > form > .btn-red-big { width:100%; margin: 1em 0;} body.page-sub-pro .sub-pro .fullform > form > div { float:left; width:50%;} body.page-sub-pro .sub-pro .fullform > form > div:first-of-type { padding-right: 1em;} body.page-sub-pro .sub-pro .fullform > form > div:last-of-type { padding-left: 1em;} body.page-sub-pro .sub-pro .fullform > form > div > h2 { font-size: 22px;} body.page-sub-pro .sub-pro .fullform > form > div > .input-cnt { float:left; width:100%; margin-bottom: 10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .title { float:left; width:100px; margin-right:10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .name { float:left; width:calc(100% - 110px)} body.page-sub-pro .sub-pro .fullform > form > div > a { width:100%; margin: 0.5em 0; text-align: center;} body.page-sub-pro .sub-pro > .grats > .icon-checked { width:130px; height:130px; border-radius:130px; margin:50px auto; } body.page-sub-pro .sub-pro > .grats > .icon-checked:before { font-size: 80px; line-height: 140px;} body.page-sub-pro .sub-pro > .grats > h2 { font-size: 24px; } body.page-sub-pro .sub-pro > .grats > p { padding: 0 150px; font-size: 18px;} } @media screen and (min-width: 750px) and (max-width: 999px) { body.page-sub-pro .steps { height:85px;} body.page-sub-pro .steps > ul > li { font-size: 22px; padding:0 1.5em;} body.page-sub-pro .steps > ul > li.active:after { height:3px;} body.page-sub-pro .sub-pro h1 { text-align: left; padding: 0 15px;} body.page-sub-pro .sub-pro .infos { float:left; padding-right:35px; width:55%;} body.page-sub-pro .sub-pro .infos > span { font-size: 16px;} body.page-sub-pro .sub-pro .infos > ul > li { font-size: 14px;} body.page-sub-pro .sub-pro .preform { float:left; width:45%;} body.page-sub-pro .sub-pro .preform > form > .input-cnt { width:100%; margin-bottom:1em;} body.page-sub-pro .sub-pro .preform > form > .btn-red-big { width:100%; margin: 1em 0;} body.page-sub-pro .sub-pro .fullform > form > div { float:left; width:50%; padding: 0 15px;} body.page-sub-pro .sub-pro .fullform > form > div > h2 { font-size: 22px;} body.page-sub-pro .sub-pro .fullform > form > div > .input-cnt { float:left; width:100%; margin-bottom: 10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .title { float:left; width:100px; margin-right:10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .name { float:left; width:calc(100% - 110px)} body.page-sub-pro .sub-pro .fullform > form > div > a { width:100%; margin: 0.5em 0; text-align: center;} body.page-sub-pro .sub-pro > .grats > .icon-checked { width:110px; height:110px; border-radius:110px; margin:50px auto; } body.page-sub-pro .sub-pro > .grats > .icon-checked:before { font-size: 70px; line-height: 120px;} body.page-sub-pro .sub-pro > .grats > h2 { font-size: 24px;} body.page-sub-pro .sub-pro > .grats > p { font-size: 18px;} } @media screen and (min-width: 0px) and (max-width: 749px) { body.page-sub-pro .steps { height:60px;} body.page-sub-pro .steps > ul > li { font-size: 18px; padding:0 0.8em;} body.page-sub-pro .steps > ul > li.active:after { height:3px;} body.page-sub-pro .sub-pro h1 { text-align: center; margin: 1.2em 0 0.6em 0;;} body.page-sub-pro .sub-pro .infos > span { font-size: 14px;} body.page-sub-pro .sub-pro .infos > ul > li { font-size: 12px; padding-right:3em;} body.page-sub-pro .sub-pro .preform { margin-top:1.5em;} body.page-sub-pro .sub-pro .preform > form > .input-cnt { width:90%; margin-bottom:0.8em;} body.page-sub-pro .sub-pro .preform > form > .btn-red-big { width:90%; margin: 0.8em 0;} body.page-sub-pro .sub-pro .fullform > form > div > h2 { font-size: 18px; text-align: center;} body.page-sub-pro .sub-pro .fullform > form > div > .input-cnt { float:left;width:100%; margin-bottom: 10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .title { float:left; width:100px; margin-right:10px;} body.page-sub-pro .sub-pro .fullform > form > div.you > .name { float:left; width:calc(100% - 110px)} body.page-sub-pro .sub-pro .fullform > form > div > a { width:100%; margin: 0.5em 0; text-align: center;} body.page-sub-pro .sub-pro > .grats > .icon-checked { width:80px; height:80px; border-radius:80px; margin:30px auto; } body.page-sub-pro .sub-pro > .grats > .icon-checked:before { font-size: 50px; line-height: 85px;} body.page-sub-pro .sub-pro > .grats > h2 { font-size: 18px; } body.page-sub-pro .sub-pro > .grats > p { font-size: 14px;} } /*--------- page 404 -----------------------------------------------------------------------*/ @media screen and (min-width:0px) { .page-404 > .cnt-404 > .cnt > .icon-fail { color:#ff344b; margin:0.5em auto 0.2em auto;} .page-404 > .cnt-404 > .cnt > h1 { margin-bottom:2em;} .page-404 > .cnt-404 > .cnt > .three-col { padding-top: 15px; margin:0 0 1em 0; border-top:1px solid #bbb;} .page-404 > .cnt-404 > .cnt > .three-col > li { width:calc(33.33% - 8px); display:block; float: left; margin-right:12px; } .page-404 > .cnt-404 > .cnt > .three-col > li:last-child { margin-right:0; } .page-404 > .cnt-404 > .cnt > .three-col > li > a { display: block; width:100%; text-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,1);} .page-404 > .cnt-404 > .cnt > .three-col > li > a > img { width:100%; height:auto; } .page-404 > .cnt-404 > .cnt > .three-col > li > a:before { content:" "; position: absolute; height: 100%; width: 100%; transition: 0.8s;} .page-404 > .cnt-404 > .cnt > .three-col > li:hover > a:before { background: rgba(0, 0, 0, 0.2); } .page-404 > .cnt-404 > .cnt > .three-col > li > a > div { z-index:1; display: block; position: absolute; left: 0; right: 0; top: 65px; text-align: center; font-size: 26px; font-weight: 700; color: white; text-decoration: none;} .filters-404 ul > li > a {text-decoration: none;} .filters-404 h3 {text-decoration: none; border-bottom:1px solid #d5dce0; padding-bottom:0.3em;} } @media screen and (min-width: 1000px) { .page-404 > .cnt-404 > .cnt > .icon-fail { font-size: 105px;} .filters-404 {text-align: left;} .filters-404 .cooks {float:left; width:calc(((100% - 60px )/4) * 2); margin-right:30px;} .filters-404 .cooks > ul > li {float:left; width:calc((100% - 30px ) / 2);} .filters-404 .cooks > ul > li:nth-of-type(2n - 1) {margin-right:30px;} .filters-404 .watch {float:left; width:calc(((100% - 60px )/4) * 1); margin-right:30px;} .filters-404 .meats {float:left; width:calc(((100% - 60px )/4) * 1);} .filters-404 ul > li {margin-bottom:0.4em;} } @media screen and (min-width: 750px) and (max-width: 999px) { .page-404 > .cnt-404 > .cnt > .icon-fail { font-size: 105px;} .page-404 > .cnt-404 > .cnt > .three-col > li > a > div { display: block; position: absolute; left: 0; right: 0; top: calc(50% - 10px); text-align: center; font-size: 20px; font-weight: 700; color: white; text-decoration: none;} .filters-404 {text-align: left;} .filters-404 .cooks {float:left; width:calc(((100% - 60px )/4) * 2); margin-right:30px;} .filters-404 .cooks > ul > li {float:left; width:calc((100% - 30px ) / 2);} .filters-404 .cooks > ul > li:nth-of-type(2n - 1) {margin-right:30px;} .filters-404 .watch {float:left; width:calc(((100% - 60px )/4) * 1); margin-right:30px;} .filters-404 .meats {float:left; width:calc(((100% - 60px )/4) * 1);} .filters-404 ul > li {margin-bottom:0.6em;} } @media screen and (min-width: 481px) and (max-width: 749px) { .page-404 > .cnt-404 > .cnt > .icon-fail { font-size: 95px;} .page-404 > .cnt-404 > .cnt > .three-col > li > a > div { display: block; position: absolute; left: 0; right: 0; top: calc(50% - 10px); text-align: center; font-size: 20px; font-weight: 700; color: white; text-decoration: none;} .filters-404 {text-align: left;} .filters-404 .cooks {float:left; } .filters-404 .cooks > ul > li {float:left; width:calc((100% - 30px ) / 2);} .filters-404 .cooks > ul > li:nth-of-type(2n - 1) {margin-right:30px;} .filters-404 .watch {float:left; width:calc(((100% - 30px )/2) * 1); margin-right:30px;} .filters-404 .meats {float:left; width:calc(((100% - 30px )/2) * 1);} .filters-404 ul > li {margin-bottom:0.6em;} .filters-404 ul {margin-bottom:0.6em;} } @media screen and (min-width: 0px) and (max-width: 480px){ .page-404 > .cnt-404 > .cnt > .icon-fail { font-size: 85px;} .page-404 > .cnt-404 > .cnt > .three-col > li > a > div { display: block; position: absolute; left: 0; right: 0; top: calc(50% - 10px); text-align: center; font-size: 20px; font-weight: 700; color: white; text-decoration: none;} .page-404 > .cnt-404 > .cnt > .three-col > li { width: 70%; margin: 10px 15%; } .filters-404 .cooks > ul > li {float:left; width:calc((100% - 10px ) / 2);} .filters-404 .cooks > ul > li:nth-of-type(2n - 1) {margin-right:10px;} .filters-404 ul > li {margin-bottom:0.7em;} .filters-404 ul {margin-bottom:0.6em;} } /*--------- page error -----------------------------------------------------------------------*/ @media screen and (min-width:0px) { .page-error > .cnt-error > .cnt {padding-top: 1em} .page-error > .cnt-error > .cnt > .top-icon { color:#ff344b; margin:0.5em auto 0.2em auto;} .page-error > .cnt-error > .cnt > h1 { margin-bottom:1em;} } @media screen and (min-width: 1000px) { .page-error > .cnt-error > .cnt > .top-icon { font-size: 105px;} } @media screen and (min-width: 750px) and (max-width: 999px) { .page-error > .cnt-error > .cnt > .top-icon { font-size: 105px;} } @media screen and (min-width: 481px) and (max-width: 749px) { .page-error > .cnt-error > .cnt > .top-icon { font-size: 95px;} } @media screen and (min-width: 0px) and (max-width: 480px){ .page-error > .cnt-error > .cnt > .top-icon { font-size: 85px;} } /*--------- page home -----------------------------------------------------------------------*/ @media screen and (min-width:0px){ .home > .banner { width: 100%; background-image:url('/images/home-banner.jpg') !important; background-size: cover !important;} .home > .banner > h1 { position: absolute; width: 100%; text-align: center; color:white; font-weight: 400; text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,1);} .home > .banner > h1 > strong { font-weight: 900;} .home > .cnt { } .home > .cnt > .choice-invite {position: absolute; left: 0; right: 0; margin: auto; background: white; border-radius: 3px; text-align: center; color: #ec2f45; text-decoration: none;} .home > .cnt > .three-col { padding-top: 35px; margin:0;} .home > .cnt > .three-col > li { width:calc(33.33% - 8px); display:block; float: left; margin-right:12px; } .home > .cnt > .three-col > li:last-child { margin-right:0; } .home > .cnt > .three-col > li > a { display: block; width:100%; text-shadow: 0 0 10px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,1);} .home > .cnt > .three-col > li > a > img { width:100%; height:auto; } .home > .cnt > .three-col > li > a:before { content:" "; position: absolute; height: 100%; width: 100%; transition: 0.8s;} .home > .cnt > .three-col > li:hover > a:before { background: rgba(0, 0, 0, 0.2); } .home > .cnt > .three-col > li > a > div { z-index:1; display: block; position: absolute; left: 0; right: 0; top: 65px; text-align: center; font-size: 26px; font-weight: 700; color: white; text-decoration: none;} .home > .cnt > section > h2 {text-align: center; font-size: 28px; font-weight: 400; margin: 80px 0 70px 0; } .home > .cnt > section > ul {text-align: } .home > .cnt > section > ul > li > h3 {font-size: 18px; font-weight: 700; padding-bottom: 10px; margin: 0 0 10px 0; border-bottom: 1px solid #d5dce0;} .home > .cnt > section > .four-col > li {vertical-align: top; text-align: left;} .home > .cnt > section > .four-col > li > ul > li > a {display: block; margin: 2px 0; font-size: 14px; color: #333; text-decoration: none; line-height: 20px;} .home > .cnt > section > .four-col > li > ul > li > a:hover { color: #ff344b;} } @media screen and (min-width: 1000px) { .home { padding-bottom: 60px;} .home > .banner { height: 400px; background: no-repeat center ;} .home > .banner > h1 { margin: 140px 0 0 0; font-size:36px;} .home > .banner > h1 > strong { display:block; margin-bottom:5px;} .home > .cnt { } .home > .cnt > .choice-invite { top: -68px; padding: 18px; width: 470px; height: 75px; border-top: 4px solid #ff344b; font-size: 28px; } .home > .cnt > .choice-invite:before {font-size: 30px; padding: 10px; } .home > .cnt > .choice-invite > .mobile{ display: none;} .home > .cnt > section > h2 {text-align: center; font-size: 28px; font-weight: 400; margin: 80px 0 70px 0; } .home > .cnt > section > ul > li > h3 {font-size: 18px; font-weight: 700; padding-bottom: 10px; margin: 0 0 10px 0; border-bottom: 1px solid #d5dce0;} .home > .cnt > section > .four-col > li {vertical-align: top;} .home > .cnt > section > .four-col > li > ul > li > a {display: block; margin: 2px 0; font-size: 14px; color: #333; text-decoration: none; line-height: 20px;} .home > .cnt > section > .four-col > li > ul > li > a:hover { color: #ff344b;} } @media screen and (min-width: 0px) and (max-width: 999px) { .home { padding-bottom:0;} .home > .banner {width:100%;} .home > .banner > h1 { font-size:22px;} .home > .banner > h1 > strong { display:block; font-size:30px; } body.page-home > header > nav > ul.m-burger { padding-top:0;} body.page-home > .city-choice:not(.menu-call) { display:block; top:65px; } body.page-home > .city-choice:not(.menu-call).active > .city-choice-bt { background: white; color: #ff344b;} .home > .cnt > .choice-invite { top: -45px; padding: 11px; width: 280px; height: 52px; border-top: 4px solid #ff344b; font-size: 21px; } .home > .cnt > .choice-invite:before { margin-right:0.25em; bottom:-0.05em;} .home > .cnt > .choice-invite > .no-mobile{ display: none;} .home > .cnt > .three-col > li > a > div { display: block; position: absolute; left: 0; right: 0; top: calc(50% - 10px); text-align: center; font-size: 20px; font-weight: 700; color: white; text-decoration: none;} .home > .cnt > section > h2 {font-size: 28px; margin: 45px 0 30px 0; } .home > .cnt > section > ul > li > h3 {font-size: 16px; padding-bottom: 10px; margin: 0 0 10px 0;} .home > .cnt > section > .four-col > li > ul > li > a { margin: 5px 0; padding: 3px 0; font-size: 14px; color: #333; text-decoration: none; line-height: 18px;} } @media screen and (min-width: 481px) and (max-width: 999px) { .home > .banner {height:630px; background-position: -1145px !important;} .home > .banner > h1 { margin: 400px 0 0 0; padding: 0 10px; font-size:22px;} body.page-home > .city-choice:not(.menu-call) { display:block; top:375px; } body.page-home > .city-choice { display:block; top:375px; } } @media screen and (min-width: 615px) and (max-width: 999px) { .home > .cnt > ul.three-col > li { width: 54%; margin: 10px 23%; } .home > .cnt > section > ul.four-col > li { width: calc(33.33% - 17px); margin: 10px 10px; } .home > .cnt > section > ul.four-col > li:last-child { margin: 10px 1%; } .home > .cnt > section > ul.four-col > li:nth-child(3n) { margin-right: 0; } } @media screen and (min-width: 750px) and (max-width: 999px) { .home > .cnt > ul.three-col > li { width: calc(33.33% - 14px); margin-right: 0; margin-left:10px; } .home > .cnt > ul.three-col > li:nth-child(3n) { margin-right:0px; } } @media screen and (min-width: 481px) and (max-width: 614px) { /* home */ .home > .cnt > ul.three-col > li { width: 50%; margin: 10px 25%; } .home > .cnt > ul.three-col > li:last-child { margin: 10px 25%; } .home > .cnt > section > ul.four-col > li { width: 43%; margin: 10px 4%; } .home > .cnt > section > ul.four-col > li:last-child { margin: 10px 4%; } .home > .cnt > section > ul.four-col > li:nth-child(2n) { margin-left:0; } } @media screen and (min-width: 0px) and (max-width: 480px) { body.page-home > .city-choice:not(.menu-call) { display:block; top:305px; } body.page-home > .city-choice.menu-call { display:block; top:305px; } body.page-home > .search { display:block; } .home > .banner {text-align: center;} .home > .banner > h1 { font-size:18px; margin: 235px auto 0 auto;left:0; right:0; width:100%; background:rgba(0,0,0,0.3); padding: 75px 0 15px 0; } .home > .banner > h1 > strong{ font-size:17px;} .home > .banner {height:465px; background-position: -1033px !important;} .home > .cnt > ul.three-col > li { width: 70%; margin: 10px 15%; } .home > .cnt > section > ul.four-col > li { width: 80%; margin: 10px 0; } } /*--------- page city -----------------------------------------------------------------------*/ @media screen and (min-width:0px){ .city {} .city > .banner { width: 100%; background: no-repeat center; background-size: cover;} .favourite { padding-bottom: 45px;} .favourite .one-favourite { height:308px; background: white; border: 1px solid #d5dce0;} .favourite .one-favourite > a > img { width:100%;} .favourite .one-favourite > .fresto-t1 { padding: 12px; text-align: left;} .good-deal{ border: 1px solid #d5dce0;} .good-deal > a { display: block; float:left;} .good-deal > a > img { display: block; height:100%;} .good-deal > .cta > span { display: block; color: #ff344b; font-weight: 700;} .good-deal > .cta > a { display: inline-block;} .city .tops > .tops-list > ul > li:nth-of-type(1) .rank { background: #e1b541;} .city .tops > .tops-list > ul > li:nth-of-type(2) .rank { background: #ff344b;} .city .tops > .tops-list > ul > li:nth-of-type(3) .rank { background: #ff344b;} .city .tops > .tops-list > ul > li > .fresto-t2 { width:100%;} /*----no result-------------*/ .city .no-result > .warnning { color: #ff344b;} .city .no-result .alternative { text-align: center;} .city .no-result .listing-resto { float:none; margin-left: auto; margin-right: auto; max-width: 600px;} .city .no-result > .suggestion { overflow: hidden; display:block; text-decoration: none;} .city .no-result > .suggestion > img { position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; height:100%; width:auto;} .city .no-result > .suggestion > div { color: white; font-weight: 700; line-height: 1.4em;} } @media screen and (min-width: 1000px){ .city > .banner { height: 320px;} .city > .banner span { margin-top: 1em; font-size: 36px;} .page-city > .search:not(.menu-call) { top:190px; } .cnt.favourites .slick-prev , .cnt.favourites .slick-next { display:none; } .favourite .one-favourite > a { display:block;} .favourite .one-favourite { display:inline-block; vertical-align: top; width: calc(33.33% - 22px - 0.5em); margin-right: 32px; font-size: 14px;} .favourite .one-favourite:last-child { width:calc(33.33% - 22px - 0.5em); margin-right: 0px; } .city > .auto-promo{ margin: 35px auto 0 auto;} .good-deal > a { height:140px; margin: 0px; margin-right: 15px;} .good-deal > a > img { height:100%;} .good-deal > a > img.small { display: none;} .good-deal > .fresto-t1 { float:left; width:24%; padding-top:15px;} .good-deal > .cta { float:left; padding: 13px 0; width:33%; } .good-deal > .cta > span { font-size: 24px;} .good-deal > .cta > a { margin-top:12px; width:65%;} .city .tops > ul > li { display:inline-block; vertical-align: bottom; padding:10px 40px; font-size: 16px; cursor:pointer; transition:0.2s; border:1px solid white; border-top:2px solid white; border-bottom:1px solid #d5dce0; border-radius:3px 3px 0px 0px;} .city .tops > ul > li:hover { color: #ff344b; } .city .tops > ul > li.active { z-index: 3; background: white; color: #ff344b; border-left:1px solid #d5dce0; border-right:1px solid #d5dce0; border-top: 2px solid #ff344b; border-bottom: 1px solid white; cursor:auto;} .city .tops > .tops-list > ul { display: none; margin-top: -1px; padding: 20px 0 14px 10px; width: 100%; border:1px solid #d5dce0; border-radius:0px 0px 3px 3px;} .city .tops > .tops-list > ul > li { display: block; float: left; width:calc(33.33% - 9px); padding: 0 0 30px 0 ; margin-right:9px;} .city .tops > .tops-list > ul > li:not(.more) > a { display:block; float:left; width:77px; margin-right:10px;} .city .tops > .tops-list > ul > li > a > img { width:100%;} .city .tops > .tops-list > ul > li > a > .rank { z-index:3; position:absolute; margin:auto; left:0; right:0; top:-11px; width:24px; height:24px; background: #999; border:2px solid white; border-radius: 15px; text-align: center; color:white; font-size: 12px; font-weight: 700;line-height: 19px;} .city .tops > .tops-list > ul > li.more { width:100%; padding:5px 0; } .city .tops > .tops-list > ul > li.more > a { float: none; width:auto; margin-right: auto; } .city .tops > .tops-list > ul > li > .fresto-t2 { float:left;} .city .tops > .tops-list > ul > li > .fdish-t2 { float:left; max-width: calc(100% - 87px);} .city .tops > .tops-list > ul.dishes > li:not(.more) { padding: 0 0 18px 0 ; margin-bottom:18px; border-bottom:1px solid #d5dce0;} .city .tops > .tops-list > ul.dishes > li.more { width:100%; padding:5px 0; } .city .tops > .tops-list > ul.active { display:block;} .city .tops.onecol-span > h2 {text-align: center;} .city .tops.onecol-span > ul {text-align: center; display:table; width:100%;} .city .tops.onecol-span > ul > li { display:table-cell; padding: 10px;} .city .tops.onecol-span > .tops-list > ul { padding-right:10px; border-top:0;} .city .tops.onecol-span > .tops-list > ul > li:not(.more) { width:100%; margin-right:0;} .city .tops.onecol-span > .tops-list > ul > li > .fresto-t2 { float:left; width:calc(100% - 90px);} /*----no result-------------*/ .city .no-result > .warnning { font-size: 24px; margin:35px 0 35px 0;} .city .no-result > .alternative > .solution { font-size: 32px; margin:0 0 30px 0;} .city .no-result > .suggestion { height:260px; width:100%; margin:45px 0;} .city .no-result > .suggestion > div { font-size: 30px; margin:40px 0 25px 0;} } @media screen and (min-width: 1000px) and (max-width: 1279px){ .favourite { padding-bottom: 35px;} } @media screen and (min-width: 0px) and (max-width: 999px){ .city {padding-bottom: 0px;} .cnt.favourites .slick-prev { z-index: 10; display:block; position:absolute; font-size:0; top:175px; left:-15px; width:45px; height:45px; background:white; border:1px solid #d5dce0; border-radius:45px; cursor:pointer; } .cnt.favourites .slick-prev:before { content:"\e903"; display:block; vertical-align: top; margin: 2px 4px 0 0; color: #ff344b ; font-family: '123cacher'; font-size: 22px; } .cnt.favourites .slick-next { z-index: 10; display:block; position:absolute; font-size:0; top:175px; right:-15px; width:45px; height:45px; background:white; border:1px solid #d5dce0; border-radius:45px; cursor:pointer;} .cnt.favourites .slick-next:before { content:"\e906"; display:block; vertical-align: top; margin: 2px 0 0 4px; color: #ff344b ; font-family: '123cacher'; font-size: 22px; } .city .tops { float:left; margin:auto; width:100%;} .city .tops > ul { text-align: center; z-index:10; display:table; width:100%;} .city .tops > ul { text-align: center; z-index:10; display:table; width:100%;} .city .tops > ul > li { display:table-cell; vertical-align: bottom; padding:10px; font-size: 16px; cursor:pointer; transition:0.2s; border:1px solid white; border-top:2px solid white; border-bottom:1px solid #d5dce0; border-radius:3px 3px 0px 0px;} .city .tops > ul > li:hover { color: #ff344b; } .city .tops > ul > li.active { z-index: 3; background: white; color: #ff344b; border-left:1px solid #d5dce0; border-right:1px solid #d5dce0; border-top: 2px solid #ff344b; border-bottom: 1px solid white; cursor:auto;} .city .tops > .tops-list > ul { display: none; margin-top: -1px; padding: 20px 0 14px 10px; width: 100%; border:1px solid #d5dce0; border-radius:0px 0px 3px 3px;} .city .tops > .tops-list > ul > li:not(.more) > a { display:block; float:left; width:100%; margin-right:10px;} .city .tops > .tops-list > ul.dishes > li:not(.more) > a { display:block; float:left; width:calc(35% - 10px); margin-right:10px;} .city .tops > .tops-list > ul > li > a > img { width:100%;} .city .tops > .tops-list > ul > li > a > .rank { z-index:3; position:absolute; margin:auto; left:0; right:0; top:-11px; width:24px; height:24px; background: #999; border:2px solid white; border-radius: 15px; text-align: center; color:white; font-size: 12px; font-weight: 700;line-height: 19px;} .city .tops > .tops-list > ul > li.more { width:100%; min-height:auto; padding:5px 0; } .city .tops > .tops-list > ul > li.more > a { float: none; width:auto; margin-right: auto; } .city .tops > .tops-list > ul > li > .fresto-t2 { float:left; padding-top: 5px;} .city .tops > .tops-list > ul > li > .fdish-t2 { float:left;} .city .tops > .tops-list > ul.dishes > li:not(.more) { padding: 0 0 18px 0; margin-bottom:18px; border-bottom:1px solid #d5dce0;} .city .tops > .tops-list > ul.dishes > li.more { width:100%; min-height:auto; padding:5px 0;} .city .tops > .tops-list > ul.dishes > li:not(.more) > .fdish-t2 { padding-top:0px;} .city .tops > .tops-list > ul.active { display:block;} } @media screen and (min-width: 750px) and (max-width: 999px){ .city > .banner { height: 300px; } .city > .banner span { margin-top: 1em; font-size: 34px;} .page-city > .search:not(.menu-call) { top:180px; } .cnt.favourites .slick-prev, .cnt.favourites .slick-next { display:none;} .cnt.favourites .slick-prev , .cnt.favourites .slick-next { display:none; } .favourite .one-favourite > a { display:block;} .favourite .one-favourite { display:inline-block; vertical-align: top; width: calc(33.33% - 15px - 0.5em); margin-right: 20px; font-size: 14px;} .favourite .one-favourite:last-child { width:calc(33.33% - 15px - 0.5em); margin-right: 0px; } .good-deal > a { float: left; height:140px; margin-right: 10px;} .good-deal > a > img { height:100%;} .good-deal > a > img.small { display: none;} .good-deal > .fresto-t1 { float:left; width:22%; padding-top:15px;} .good-deal > .cta { float:left; padding: 13px 0; width:34%;} .good-deal > .cta > span { font-size: 22px;} .good-deal > .cta > a { margin-top:12px; width:65%;} /*----no result-------------*/ .city .no-result > .warnning { font-size: 20px; margin:35px 0 35px 0;} .city .no-result > .alternative > .solution { font-size: 26px; margin:0 0 30px 0;} .city .no-result > .suggestion { height:260px; width:100%; margin:45px 0;} .city .no-result > .suggestion > div { font-size: 25px; margin:70px 0 25px 0;} } @media screen and (min-width: 0px) and (max-width: 749px){ /*----no result-------------*/ .city .no-result > .warnning { font-size: 18px; margin:35px 0 35px 0;} .city .no-result > .alternative > .solution { font-size: 20px; margin:0 0 15px 0;} .city .no-result > .suggestion { height:160px; margin:35px -20px 45px -20px;} .city .no-result > .suggestion > div { font-size: 18px; margin:30px 0 15px 0;} } @media screen and (min-width: 614px) and (max-width: 749px){ .city > .banner { height: 270px; } .city > .banner span { margin-top: 1em; font-size: 26px;} .page-city > .search:not(.menu-call) { top:150px; } .cnt.favourites { width: 580px; } .cnt.favourites > .slider { width: 100%;} .cnt.favourites .slick-prev { top:60px; left:-20px;} .cnt.favourites .slick-next { top:60px; right:-20px;} .favourite { height:100%;} .favourite .one-favourite { height:165px; width:580px; overflow:hidden; } .favourite .one-favourite > a { float:left; width:290px;} .favourite .one-favourite > .fresto-t1 { float:left; width:calc(100% - 290px);} .good-deal{ margin-bottom: 25px;} .good-deal > a { float: left; height:100px; margin: 15px; margin-right:10px; } .good-deal > a > img.small { height:100%;} .good-deal > a > img.large { display: none;} .good-deal > .fresto-t1 { float:left; width:300px; margin-top:15px;} .good-deal > .cta { float:left; padding: 7px 0 20px 0; width:100%;} .good-deal > .cta > span { font-size: 22px;} .good-deal > .cta > a { margin-top:14px; padding:0 5%;} } @media screen and (min-width: 481px) and (max-width: 614px){ .city > .banner { height: 210px; background:#f5f5f5;} .city > .banner span { margin-top: 0.5em; font-size: 24px;} .page-city > .search:not(.menu-call) { top:135px; } .cnt.favourites { width:313px; } .cnt.favourites > .slider { width: 100%; } .cnt.favourites .slick-prev { top:calc(50% - 20px);left:-60px;} .cnt.favourites .slick-next { top:calc(50% - 20px); right:-60px;} .favourite { } .favourite .one-favourite { width:313px; } .good-deal{ margin-bottom: 25px;} .good-deal > a { height:100px; margin: 15px; margin-right:10px; } .good-deal > a > img.small { height:100%;} .good-deal > a > img.large { display: none;} .good-deal > .fresto-t1 { float:left; width:220px; margin-top:15px;} .good-deal > .cta { float:left; padding: 7px 0 20px 0; width:100%;} .good-deal > .cta > span { font-size: 18px;} .good-deal > .cta > a { margin-top:14px; padding:0 5%; } .good-deal .percent-promo-big{ z-index: 3; position: absolute; top:0; right:0; width:120px;} .good-deal .percent-promo-big > img { width:100%; height:auto; top:0; } .good-deal .percent-promo-big > span {position: absolute; width: 100%; top:0; right:0; padding: 8px 7px; color:white; text-align: right; font-size: 22px; } } @media screen and (min-width: 0px) and (max-width: 480px){ .city > .banner { height: 180px; background:#f5f5f5;} .city > .banner span { margin-top: 0em; padding-top: 0.5em;font-size: 26px;} .page-city > .search:not(.menu-call) { top:105px; } body.page-city > .city-choice { display:block; } .cnt.favourites { width:260px; } .cnt.favourites > .slider { width: 100%; } .cnt.favourites .slick-prev { top:100px; left:-30px} .cnt.favourites .slick-next { top:100px; right:-30px;} .favourite { } .favourite .one-favourite { width:313px; } .good-deal{ margin-bottom: 25px;} .good-deal > a { height:75px; margin: 15px 10px; margin-right:10px; } .good-deal > a > img.small { height:100%;} .good-deal > a > img.large { display: none;} .good-deal > .fresto-t1 { float:left; width:140px; margin-top:15px;} .good-deal > .cta { float:left; padding: 7px 0 20px 0; width:100%;} .good-deal > .cta > span { font-size: 16px;} .good-deal > .cta > a { margin-top:12px;} } /* tops responsive details */ @media screen and (min-width: 800px) and (max-width: 999px){ .city .tops > .tops-list > ul > li { display: block; float: left; width:calc(20% - 10px); min-height:20vw; padding: 0 0 15px 0 ; margin-right:10px;} .city .tops > .tops-list > ul.dishes > li { display: block; float: left; width:calc(33.33% - 10px); min-height:auto; padding: 0 0 15px 0 ; margin-right:10px;} } @media screen and (min-width: 600px) and (max-width: 799px){ .city .tops > .tops-list > ul > li { display: block; float: left; width:calc(25% - 10px); min-height:26vw; padding: 0 0 15px 0 ; margin-right:10px;} .city .tops > .tops-list > ul.dishes > li { display: block; float: left; width:calc(50% - 10px); min-height:auto; padding: 0 0 15px 0 ; margin-right:10px;} } @media screen and (min-width: 400px) and (max-width: 599px){ .city .tops > .tops-list > ul > li { display: block; float: left; width:calc(33.33% - 10px); min-height: 33vw ; padding: 0 0 15px 0 ; margin-right:10px;} } @media screen and (min-width: 0px) and (max-width: 399px){ .city .tops > .tops-list > ul > li { display: block; float: left; width:calc(50% - 10px); min-height: 50vw; padding: 0 0 15px 0 ; margin-right:10px;} } @media screen and (min-width: 450px) and (max-width: 599px){ .city .tops > .tops-list > ul.dishes > li { display: block; float: left; width:calc(50% - 10px); min-height:auto; padding: 0 0 15px 0 ; margin-right:10px;} } @media screen and (min-width: 0px) and (max-width: 449px){ .city .tops > .tops-list > ul.dishes > li { display: block; float: left; width:calc(100% - 10px); min-height:auto; padding: 0 0 15px 0 ; margin-right:10px;} } /*--------- pages listing -----------------------------------------------------------------------*/ body.page-listing .map-block > .map > .spot.test2 { top: 80px; left: 45px;} body.page-listing .map-block > .map > .spot.test { top: 220px; left: 150px;} body.page-listing .map-block > .map > .target { top: 180px; left: 110px;} @media screen and (min-width:0px){ body.page-listing .listing-zone > h1 {text-align: left;} body.page-listing .listing-zone > .event-infos { text-align: left; margin: 1em auto;} body.page-listing .listing-zone > .listing > .infos {margin:auto auto 1em auto; padding:1em; border-top:1px solid #d5dce0; border-bottom:1px solid #d5dce0;} body.page-listing .listing-zone > .listing > .reviewing-call { text-align: left;} .listing-resto:not(.version2) > ul > li:last-child { text-align: center;} .listing-resto:not(.version2) > ul > li.inter-text { padding-bottom: 1.5em;} .listing a.btn-grey-big { margin-left: auto; margin-right: auto; margin-bottom: 35px; margin-top:1.5em;} body.page-listing .map-block > .map > .spot:hover { z-index:100;} body.page-listing .map-block > .map > .spot > span { text-shadow: none ;} body.page-listing .spot.milk:before { color: #66ccff;} body.page-listing .spot.meat:before { color: #cc3366;} /*----no result-------------*/ body.page-listing .no-result > .warnning { color: #ff344b;} body.page-listing .no-result > .alternative > ul > li > a { text-decoration: none;} body.page-listing .no-result > .suggestion { overflow: hidden; display:block; text-decoration: none;} body.page-listing .no-result > .suggestion > img { position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; height:100%; width:auto;} body.page-listing .no-result > .suggestion > div { color: white; font-weight: 700; line-height: 1.4em;} /*----event-------------*/ body.page-listing .event-theme > .event-title { text-transform: uppercase; font-weight: 700;} body.page-listing .event-theme > .event-infos { font-weight: 700;} /* listing resto V2 */ .listing-resto.version2 > ul {margin-left: -15px; margin-right: -15px; display:flex; flex-direction:row; flex-wrap:wrap;} .listing-resto.version2 > ul > li { margin: 15px; } /*.listing-resto.version2 > ul:after {content: '';display: block; min-width: 280px;}*/ .listing-resto.version2 > ul > li > a { display:block; border-radius:5px; overflow: hidden;} .listing-resto.version2 > ul > li > a > img.large { width:100%; height:auto; } .listing-resto.version2 > ul > li > a.nopic {background-color: #f5f5f5; height: 8em;} .listing-resto.version2 > ul > li .percent-promo-sm{ z-index: 3; font-size: 0.8em; position: absolute; top:0; right:0; width:10em;} .listing-resto.version2 > ul > li .percent-promo-sm > span {position: absolute; width: 100%; top:0; right:0; padding: 0.25em 0.3em; color:white; text-align: right; font-size: 1.9em; font-weight: 700; } .listing-resto.version2 > ul > li.native-ads { background:#f5f5f5; margin: 14px; border:1px solid #d5dce0; border-radius:5px;} .listing-resto.version2 > ul > li.native-ads > a {margin:10px 10px 0 10px;} .listing-resto.version2 > ul > li.native-ads > a img {margin:0px;} .listing-resto.version2 > ul > li.native-ads > .fresto-listing-v2 {text-align: left;padding-left:10px;padding-right:10px;padding-bottom:15px;} .listing-resto.version2 > ul > li.native-ads > .fresto-listing-v2 h3 {color:inherit;} .listing-resto.version2 > ul > li.native-ads > .fresto-listing-v2 h3 a {color:inherit;} .listing-resto.version2 > ul > li.native-ads > .fresto-listing-v2 p {font-size: 0.9em; margin-top: 0em; margin-bottom:0.3em;} .listing-resto.version2 > ul > li.native-ads > .sponsor {position: absolute; bottom:0; right:0;text-align: right; padding: 0 10px 5px 10px; font-size: 0.8em; opacity:0.8} .listing-resto.version2 > ul > li.native-ads.red { background:#ff344b; color:white; border:0px solid #ff344b; } .listing-resto.version2 > ul > li.native-ads.colorinfo { background:rgb(66, 133, 244,0.05); border:1px solid #4285f4; } .listing-resto.version2 > ul > li.native-ads.colorinfo .sponsor { color:#4285f4; } .listing-resto.version2 > ul > li.native-ads.colorinfo2 { border:0; background: none;} .listing-resto.version2 > ul > li.native-ads.colorinfo2 > a { margin: 0;} .listing-resto.version2 > ul > li.native-ads.colorinfo2 > .fresto-listing-v2 { background:rgb(66, 133, 244,0.05); border:1px solid #4285f4; border-radius:5px; margin-top: 10px; padding-top: 10px;} .listing-resto.version2 > ul > li.native-ads.colorinfo2 .sponsor { color:#4285f4; } } @media screen and (min-width: 1000px) { body.page-listing .listing-zone > .onecol-span{ float:left; width:226px; margin-right:32px;} body.page-listing .listing-zone > .twocol-span{ float:left; width:calc(100% - 258px); margin-right:0;} .listing-resto:not(.version2) > ul > li:not(.promo-inlist):not(.inter-text) { min-height:135px;} .listing-resto:not(.version2) > ul > li > a { float:left; display:block; width:176px; height:auto; margin-right:15px;margin-bottom:10px; } .listing-resto:not(.version2) > ul > li > a > img.small { display:none; } .listing-resto:not(.version2) > ul > li > a > img.large { width:100%; height:auto; } .listing-resto:not(.version2) > ul > li > a > .distance { z-index: 10; position:absolute; bottom:2px; right:2px; padding:3px 5px; background: #f5f5f5; color: #333; font-size: 12px; border-radius:3px; font-weight: 900;} .listing-resto:not(.version2) > ul > li > .fresto-t1 { float:left; margin-bottom:10px; padding-bottom:15px; width:calc(100% - 191px);} .listing-resto:not(.version2) > ul > li.promo-inlist { background:#f5f5f5; margin-left:-10px; margin-bottom:35px; padding:10px; padding-bottom: 0px; border:1px solid #d5dce0; border-radius:3px;} .listing-resto:not(.version2) > ul > li.promo-inlist > .promo-inlist-text {float:left; width:calc(100% - 191px);} body.page-listing .map-block { width:100%; } body.page-listing .map-block:not(.active) { display:none; } body.page-listing .map-block > .map { float:left; margin-right:20px; width:calc(100% - 320px); height:500px;} body.page-listing .map-block > .map > img { width:100%; } body.page-listing .map-block > .map > .reload { position: absolute; top:10px; left:10px; padding:7px; background: white; border-radius: 3px; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); font-size: 12px;} body.page-listing .map-block > .map .gm-style-iw .google-tooltip-content { padding:10px 0px !important;} body.page-listing .map-block > .map > .legend { text-align: left; font-size: 14px;} body.page-listing .map-block > .map > .legend > .spot { display:inline-block; vertical-align: middle; margin:10px; } body.page-listing .map-block > .map > .legend > .spot:before { font-size: 25px; } body.page-listing .map-block > .map-list { float:left; width:300px; height:500px; overflow-y:scroll; } body.page-listing .map-block > .map-list > ul > li { width:98%; margin-left:2%; border-bottom: 1px solid #d5dce0; padding:15px 0; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);transition:0.3s;} body.page-listing .map-block > .map-list > ul > li:hover { z-index:10; background: #f5f5f5; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); } body.page-listing .map-block > .map-list > ul > li.active { z-index:10; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); } body.page-listing .map-block > .map-list > ul > li:first-child { border-bottom: 1px solid #d5dce0; border-top: 1px solid #d5dce0; padding:15px 0;} body.page-listing .map-block > .map-list > ul > li > a {display:block; width:100%; padding:0;} body.page-listing .map-block > .map-list > ul > li > a > .spot { float:left; width:50px; } body.page-listing .map-block > .map-list > ul > li > a > .fresto-t2 { float:left; width:calc(100% - 50px); } body.page-listing .map-block > .map-list > ul > li > a > .fresto-t2 > ul { margin-bottom:5px;} body.page-listing .map-block > .map-list > ul > li:hover > a > .fresto-t2 > ul > li { background: #e5e5e5; color:#333; } body.page-listing .spot > span { position:absolute; left:0; right:0; top:7px; width:20px; margin:auto; color: white; font-size: 13px ; font-weight: 700;} body.page-listing .spot:before { font-size: 40px; } /*----no result-------------*/ body.page-listing .no-result > .warnning { font-size: 24px; margin:0 0 35px 0;} body.page-listing .no-result > .alternative > div { font-size: 32px; margin:0 0 30px 0;} body.page-listing .no-result > .alternative > ul > li { font-size: 14px; margin:0 0 10px 0;} body.page-listing .no-result > .suggestion { height:260px; width:100%; margin:45px 0;} body.page-listing .no-result > .suggestion > div { font-size: 30px; margin:70px 0 25px 0;} /*----event-------------*/ body.page-listing .event-theme {margin-bottom:25px;} body.page-listing .event-theme > .event-title { float:left; height:65px; width:40%; padding: 0 15px; text-align: left; line-height: 1.2em;} body.page-listing .event-theme > .event-title > .title { font-size: 18px; margin: 10px 0 4px 0;} body.page-listing .event-theme > .event-title > .theme { font-size: 32px;} body.page-listing .event-theme > .event-infos { float:left; height:65px; width:60%;} body.page-listing .event-theme > .event-infos > div { line-height: 60px; padding:0 15px; text-align: left;} body.page-listing .event-theme > .event-infos > div > span { display:inline-block; vertical-align: middle; font-size: 16px; line-height: 20px;} body.page-listing .listing-zone > .event-infos { margin: 1em auto; padding-bottom:1em; border-bottom: 1px solid #d5dce0; font-size: 14px;} } @media screen and (min-width: 750px) and (max-width: 999px) { body.page-listing .listing-zone {margin: 0 10px;} body.page-listing .listing-zone > h1 {text-align: left;} body.page-listing .listing-zone > .onecol-span{ float:left; width:226px; margin-right:20px;} body.page-listing .listing-zone > .twocol-span{ float:left; width:calc(100% - 246px); margin-right:0;} .listing-resto:not(.version2) > ul {} .listing-resto:not(.active) {display:none;} .listing-resto:not(.version2) > ul > li:not(.promo-inlist):not(.inter-text) { min-height:135px;} .listing-resto:not(.version2) > ul > li > a { float:left; display:block; width:176px; height:auto; margin-right:15px;margin-bottom:10px; } .listing-resto:not(.version2) > ul > li > a > img.small { display:none; } .listing-resto:not(.version2) > ul > li > a > img.large { width:100%; height:auto; } .listing-resto:not(.version2) > ul > li > a > .distance { z-index: 10; position:absolute; bottom:2px; right:2px; padding:3px 5px; background: #f5f5f5; color: #333; font-size: 12px; border-radius:3px; font-weight: 900;} .listing-resto:not(.version2) > ul > li > .fresto-t1 { float:left; margin-bottom:10px; padding-bottom:15px; width:calc(100% - 191px);} .listing-resto:not(.version2) > ul > li.promo-inlist { background:#f5f5f5; margin-left:-10px; margin-bottom:35px; padding:10px; padding-bottom: 0px; border:1px solid #d5dce0; border-radius:3px;} .listing-resto:not(.version2) > ul > li.promo-inlist > .promo-inlist-text {float:left; width:calc(100% - 191px);} body.page-listing .map-block { width:100%; } body.page-listing .map-block:not(.active) { display:none; } body.page-listing .map-block > .map { float:left; margin-right:20px; width:100%; height:calc(100vh - 240px); text-align: center;} body.page-listing .map-block > .map > img { width:100%; } body.page-listing .map-block > .map > .reload { position: absolute; top:10px; left:0; right:0; margin:auto; padding:7px; width:260px; background: white; border-radius: 3px; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); font-size: 12px;} body.page-listing .map-block > .map .gm-style-iw .google-tooltip-content { padding:10px 0px !important;} body.page-listing .map-block > .map > .legend { position: absolute; bottom:10px; left:0; right:0; margin:auto; width:170px; padding:2px 15px 0px 5px; background: white; border-radius: 3px; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); font-size: 14px;} body.page-listing .map-block > .map > .legend > .spot { display:inline-block; vertical-align: middle; margin:5px; } body.page-listing .map-block > .map > .legend > .spot:before { font-size: 15px; } body.page-listing .map-block > .map-list { display:none;} body.page-listing .spot > span { position:absolute; left:0; right:0; top:7px; width:20px; margin:auto; color: white; font-size: 13px ; font-weight: 700;} body.page-listing .spot:before { font-size: 40px; } /*----no result-------------*/ body.page-listing .no-result > .warnning { font-size: 20px; margin:0 0 35px 0;} body.page-listing .no-result > .alternative > div { font-size: 26px; margin:0 0 30px 0;} body.page-listing .no-result > .alternative > ul > li { font-size: 14px; margin:0 0 10px 0;} body.page-listing .no-result > .suggestion { height:260px; width:100%; margin:45px 0;} body.page-listing .no-result > .suggestion > div { font-size: 25px; margin:70px 0 25px 0;} /*----event-------------*/ body.page-listing .event-theme {margin-bottom:25px;} body.page-listing .event-theme > .event-title { float:left; height:65px; width:40%; padding: 0 15px; text-align: left; line-height: 1.2em;} body.page-listing .event-theme > .event-title > .title { font-size: 16px; margin: 12px 0 2px 0;} body.page-listing .event-theme > .event-title > .theme { font-size: 22px;} body.page-listing .event-theme > .event-infos { float:left; height:65px; width:60%;} body.page-listing .event-theme > .event-infos > div { line-height: 60px; padding:0 15px; text-align: left;} body.page-listing .event-theme > .event-infos > div > span { display:inline-block; vertical-align: middle; font-size: 16px; line-height: 20px;} body.page-listing .listing-zone > .event-infos { margin: 1em auto; padding-bottom:1em; border-bottom: 1px solid #d5dce0; font-size: 14px;} } @media screen and (min-width: 0px) and (max-width: 749px) { body.page-listing .listing-zone{ width:100%;} body.page-listing .breadcrumb {border-bottom: 1px solid #f5f5f5;} body.page-listing .listing-zone .filters{ background: #f5f5f5; padding-top: 5px;} body.page-listing .listing-zone > h1 {text-align: left; font-size: 18px; padding:0px 10px; margin: 0.5em 0;} body.page-listing .listing-zone > .listing > .infos { font-size: 14px;} body.page-listing .listing-zone > .listing > .reviewing-call { margin:1em 10px} body.page-listing .listing-review {width: calc(100% - 20px); margin: auto;} .listing-resto { background: white; padding: 20px; margin-top: 10px; } .listing-resto:not(.active) {display:none;} .listing-resto:not(.version2) > ul > li:not(.promo-inlist):not(.inter-text) { min-height:110px;} .listing-resto:not(.version2) > ul > li > a { float:left; display:block; width:80px; height:auto; margin-right:10px;margin-bottom:10px; } .listing-resto:not(.version2) > ul > li > a > img.small { width:100%; height:auto; } .listing-resto:not(.version2) > ul > li > a > img.large { display:none; } .listing-resto:not(.version2) > ul > li > a > .distance { z-index: 10; position:absolute; bottom:2px; right:2px; padding:2px 3px; background: #f5f5f5; color: #333; font-size: 11px; border-radius:3px; font-weight: 900;} .listing-resto:not(.version2) > ul > li > .fresto-t1 { float:left; margin-bottom:10px; padding-bottom:15px; width:calc(100% - 90px);} .listing-resto:not(.version2) > ul > li.promo-inlist { background:#f5f5f5; margin-left:-10px; margin-right:-10px; margin-bottom:30px; padding:10px; padding-bottom: 10px; border:1px solid #d5dce0; border-radius:3px;} .listing-resto:not(.version2) > ul > li.promo-inlist > .promo-inlist-text {float:left; width:calc(100% - 90px); text-align: left;} body.page-listing .map-block { width:100%; margin-top:10px;} body.page-listing .map-block:not(.active) { display:none; } body.page-listing .map-block > .map { float:left; margin-right:20px; width:100%; height:calc(90vh); text-align: center;} body.page-listing .map-block > .map > img { width:100%; } body.page-listing .map-block > .map > .reload { position: absolute; top:10px; left:0; right:0; margin:auto; padding:7px; width:260px; background: white; border-radius: 3px; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); font-size: 12px;} body.page-listing .map-block > .map .gm-style-iw .google-tooltip-content { padding:10px 0px !important;} body.page-listing .map-block > .map > .legend { position: absolute; bottom:10px; left:0; right:0; margin:auto; width:170px; padding:2px 15px 0px 5px; background: white; border-radius: 3px; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2); font-size: 14px;} body.page-listing .map-block > .map > .legend > .spot { display:inline-block; vertical-align: middle; margin:5px; } body.page-listing .map-block > .map > .legend > .spot:before { font-size: 15px; } body.page-listing .map-block > .map-list { display:none;} body.page-listing .spot > span { position:absolute; left:0; right:0; top:7px; width:20px; margin:auto; color: white; font-size: 13px ; font-weight: 700;} body.page-listing .spot:before { font-size: 40px;} /*----no result-------------*/ body.page-listing .no-result > .warnning { font-size: 18px; margin:0 0 35px 0;} body.page-listing .no-result > .alternative > div { font-size: 20px; margin:0 0 15px 0;} body.page-listing .no-result > .alternative > ul > li { font-size: 14px; margin:0 0 8px 0;} body.page-listing .no-result > .suggestion { height:160px; margin:35px -20px 45px -20px;} body.page-listing .no-result > .suggestion > div { font-size: 18px; margin:40px 0 15px 0;} /*----event-------------*/ body.page-listing .event-theme { margin-bottom:20px;} body.page-listing .event-theme > .event-title { padding: 10px; width:100%; line-height: 1.2em;} body.page-listing .event-theme > .event-title > .title { font-size: 16px;} body.page-listing .event-theme > .event-title > .theme { font-size: 18px;} body.page-listing .event-theme > .event-infos { width:100%;} body.page-listing .event-theme > .event-infos > div { padding: 10px;} body.page-listing .event-theme > .event-infos > div > span { font-size: 12px; line-height: 14px;} body.page-listing .listing-zone > .event-infos { margin: 1em 10px 1em 10px; padding-bottom:1em; border-bottom: 1px solid #d5dce0; font-size: 14px;} body.page-listing .listing .actu-list > ul {margin-left:10px; margin-right:10px;} } /*Listingv2 resto box sizes*/ @media screen and (min-width: 875px) { .listing-resto.version2 > ul > li { width:calc(50% - 30px); min-width:270px;} .listing-resto.version2 > ul > li.native-ads { width:calc(50% - 32px);} } @media screen and (min-width: 750px) and (max-width: 875px) { .listing-resto.version2 > ul > li { width:calc(100% - 30px); min-width:270px; font-size: 20px;} .listing-resto.version2 > ul > li.native-ads { width:calc(100% - 32px);} .listing-resto.version2 > ul > li > .fresto-listing-v2{font-size: 18px} } @media screen and (min-width: 630px) and (max-width: 750px) { .listing-resto.version2 > ul > li { width:calc(50% - 30px); min-width:270px;} .listing-resto.version2 > ul > li.native-ads { width:calc(50% - 32px);} } @media screen and (min-width: 420px) and (max-width: 630px) { .listing-resto.version2 > ul > li { width:calc(100% - 30px); min-width:270px; font-size: 20px;} .listing-resto.version2 > ul > li.native-ads { width:calc(100% - 32px);} .listing-resto.version2 > ul > li > .fresto-listing-v2{font-size: 18px} } @media screen and (min-width: 0px) and (max-width: 420px) { .listing-resto.version2 > ul > li { width:calc(100% - 30px); min-width:270px;} .listing-resto.version2 > ul > li.native-ads { width:calc(100% - 32px);} } /*--------- member review list -----------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-listing .member-reviews .member-sheet { text-align: center; background:white;} .page-listing .member-reviews .member-sheet .backg { position:absolute; top :0; left:0; height:80%; width:100%; background:#f5f5f5;} .page-listing .member-reviews .member-sheet h1 { color: #333; line-height: 1.5em;} .page-listing .member-reviews .member-sheet .portrait > img { width:100%; border:2px solid #ccc; border-radius: 50%;} } @media screen and (min-width: 750px) { .page-listing .member-reviews {} .page-listing .member-reviews .member-sheet { height:100px; width:calc(100% + 40px); margin:-20px; line-height: 100px; text-align: center; margin-top:10px; margin-bottom:25px;} .page-listing .member-reviews .member-sheet .backg { height:100%;} .page-listing .member-reviews .member-sheet .infos { display:inline-block; text-align: left; margin-left:10px; } .page-listing .member-reviews .member-sheet .infos > h1 { text-align: left; font-size: 20px; margin:0;} .page-listing .member-reviews .member-sheet .portrait { display:inline-block; height:calc(100% - 20px); max-height:200px; margin: 0px auto 0px auto} .page-listing .member-reviews .member-sheet .portrait img{ height:100%; width:auto;} } @media screen and (min-width: 0px) and (max-width: 749px) { .page-listing .member-reviews { margin-top:0; padding-top:0;} .page-listing .member-reviews .listing{ padding-top:5px; margin-top:0;} .page-listing .member-reviews .member-sheet {height:100px; line-height: 100px; text-align: center; margin-bottom:0px;} .page-listing .member-reviews .member-sheet .backg { height:100%;} .page-listing .member-reviews .member-sheet .infos { display:inline-block; text-align: left; margin-left:10px; } .page-listing .member-reviews .member-sheet .infos > h1 { text-align: left; font-size: 20px; margin:0;} .page-listing .member-reviews .member-sheet .portrait { display:inline-block; height:calc(100% - 20px); max-height:200px; margin: 0px auto 0px auto} .page-listing .member-reviews .member-sheet .portrait img{ height:100%; width:auto;} } /*--------- pages fiches -----------------------------------------------------------------------*/ /*--------- >>> header & tabs ----------------------------------------------------------*/ @media screen and (min-width:0px){ body.page-sheet > .content { background:#f5f5f5; } body.page-sheet > .content > .search-space { background:#fff; } .sheet > .sheet-cnt > .infos { text-align: left;} .sheet > .sheet-cnt > .infos > h1 { display:inline-block;} .sheet > .sheet-cnt > .infos > .bonus { display:inline-block;} .sheet > .sheet-cnt > .infos > .bonus > div { display:inline-block; color:white; text-transform: uppercase; border-radius:3px;} .sheet > .sheet-cnt > .infos > .bonus > .icon-gold { background: #e1b541;} .sheet > .sheet-cnt > .infos > .bonus > .icon-like { background: #5dddd3;} .sheet > .sheet-cnt > .infos > .bonus > .icon-heart { background: #ff344b;} .sheet > .sheet-cnt > .infos > ul > li { display:inline-block; background: #e6e6e6; border-radius: 3px; text-transform: uppercase;} .sheet > .sheet-cnt > .infos > .address > a { color:#333; line-height:1.4em;} .sheet > .sheet-cnt > .infos > .address > a:hover > span { text-decoration: underline;} .sheet > .sheet-cnt > .infos > .address > a > strong { font-weight: 900;} .sheet > .sheet-cnt > .infos > .address > a > span { margin-right:5px;} .sheet > .sheet-cnt > .infos > .address:before, .sheet > .sheet-cnt > .infos > .phone:before {color:#ff344b;} .sheet > .sheet-cnt > .infos > .phone > span { cursor: pointer;} .sheet > .sheet-cnt > .infos > .phone > span:hover { text-decoration: underline;} .sheet > .sheet-cnt > .infos > .phone > a { font-weight: 700; } .sheet > .sheet-cnt > .infos > .phone.active > span { display: none;} .sheet > .sheet-cnt > .infos > .phone.active > a { display:inline;} .sheet > .sheet-cnt > .infos > .review > a { display:inline-block; text-decoration: none;} .sheet > .sheet-cnt > .infos > .review > a > div { font-weight: 700; color:#ff344b;} .sheet > .sheet-cnt > .infos > .review > a > div > span{ font-size: 0.55em;} .sheet > .sheet-cnt > .infos > .review > a > span{ color:#999; text-decoration: underline;} .sheet > .sheet-cnt > .infos > .review > a:hover > div{ color:#333;} .sheet > .sheet-cnt > .infos > .review > a:hover > span{ color:#ff344b;} .sheet > .sheet-cnt > .infos > .brand-listing { float:left; width: 100%;} .sheet > .sheet-cnt > .infos > .brand-listing > a { display: inline-block; background: #e6e6e6; text-decoration: none; border-radius:3px; } .sheet > .sheet-cnt > .infos > .brand-listing > a:before { margin-right: 5px;} .sheet > .sheet-cnt > .infos > .promo { background: white; color: #ff344b; font-weight: 700; border-radius: 3px;} .sheet > .sheet-cnt > .photo-gallery { background: #333;} .sheet > .sheet-cnt > .photo-gallery .slick-list, .sheet > .sheet-cnt > .photo-gallery .slick-track, .sheet > .sheet-cnt > .photo-gallery .gallery-onepic { height:100%; overflow: hidden;} .sheet > .sheet-cnt > .photo-gallery .gallery-onepic img { position:absolute; margin:auto !important; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; height:auto !important; width:auto !important; max-width:100% !important; min-height:100% !important; } .sheet > .sheet-cnt > .photo-gallery .slick-prev, .sheet > .sheet-cnt > .photo-gallery .slick-next { position: absolute; font-size:0; z-index:100; width:40px; height:40px; top:calc(50% - 20px); margin: 0 10px; border:0px solid white; border-radius:50px; color:white; text-align: center; cursor:pointer; transition:0.2s; background: none; color:#fff;} .sheet > .sheet-cnt > .photo-gallery .slick-prev:hover, .sheet > .sheet-cnt > .photo-gallery .slick-next:hover { transform: scale(1.2);} .sheet > .sheet-cnt > .photo-gallery .slick-prev:before, .sheet > .sheet-cnt > .photo-gallery .slick-next:before {font-size: 22px; top:calc(50% - 11px); text-shadow: 0 0 3px rgba(0,0,0,0.8); font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition:0.2s;} .sheet > .sheet-cnt > .photo-gallery .slick-prev:hover:before, .sheet > .sheet-cnt > .photo-gallery .slick-next:hover:before { text-shadow: 2px 2px 5px rgba(0,0,0,0.4);} .sheet > .sheet-cnt > .photo-gallery .slick-prev { left:0;} .sheet > .sheet-cnt > .photo-gallery .slick-prev:before { content:'\e910'; left:-0.1em; } .sheet > .sheet-cnt > .photo-gallery .slick-next { right:0;} .sheet > .sheet-cnt > .photo-gallery .slick-next:before { content:'\e911'; right:-0.1em; } .sheet > .sheet-cnt > .photo-gallery .share > ul > li { display:inline-block; height:25px; width:25px; border-radius: 3px; color:white; line-height: 1.6em; cursor:pointer;} .sheet > .sheet-cnt > .photo-gallery .share > ul > li:last-of-type { margin-right:0; } .sheet > .sheet-cnt > .photo-gallery .share > ul > li.icon-facebook { background:#4c67a1;} .sheet > .sheet-cnt > .photo-gallery .share > ul > li.icon-twitter { background:#00acee;} .sheet > .sheet-cnt > .photo-gallery .share > ul > li.icon-google { background:#d94d3a;} .sheet > .tabs > ul > li { width:80px; height:42px; margin-bottom:-1px;} .sheet > .tabs > ul > li.active { z-index: 10; background: white; border: 1px solid #d5dce0; border-top: 2px solid #ff344b; border-bottom: 1px solid white; border-radius: 3px 3px 0 0;} .sheet > .tabs > ul > li > a { display:block; text-decoration: none; padding:10px; width:100%; height: 100%;} .sheet > .tabs > ul > li > div { padding:10px; width:100%; height: 100%;} .sheet > .tab-cnt { background: white; border-top: 1px solid #d5dce0;} /*--------- >>> header NA ----------------------------------------------------------*/ .sheet-na > .sheet-cnt > .infos > .na-call { display:inline-block; color: #128ee9; } .sheet-na > .sheet-cnt > .infos > .na-call > .info-point { text-align: center; } .tipso_bubble.na-infos-tipso .tipso_content { padding:10px;} .tipso_bubble.na-infos-tipso p { margin: 10px 0; width:100%; max-width: none;} .tipso_bubble.na-infos-tipso .tooltip-b-text { font-size: 18px; font-weight: 700; color: #333;} .tipso_bubble.na-infos-tipso .line-h { height:1px; margin:25px 0; background: #d5dce0;} .sheet-na > .sheet-cnt .changes {width:100%; float:left;} .sheet-na > .sheet-cnt .changes > .frame { display:inline-block; background: #e6e6e6; border-radius:3px; text-decoration: none; transition:0.2s;} .sheet-na > .sheet-cnt .changes > .frame:hover { color:#333; } .sheet-na > .sheet-cnt .changes > .frame > .text { float:left; text-align: left;} .sheet-na > .sheet-cnt .changes > .frame > .btn-red { float:left; color:white; border-radius: 3px;} .sheet-na > .sheet-cnt > .na-others { float:left; width:100%;} .sheet-na > .sheet-cnt > .na-others > h2 { margin-top: 0; } .sheet-na > .sheet-cnt > .na-others > ul > li { vertical-align: top; background:white; -webkit-border-radius:3px; border: 1px solid #d5dce0; border-radius:3px; overflow: hidden;} .sheet-na > .sheet-cnt > .na-others > ul > li > a { width:100%;} .sheet-na > .sheet-cnt > .na-others > ul > li > a > img { width:100%;} .sheet-na > .sheet-cnt > .na-others > a { display:block; text-decoration: none; } .sheet-na > .sheet-cnt > .na-others > a:before { margin-right: 5px; bottom:-1px; } /*---- >>> header NA CLOSE ----*/ .sheet-na > .sheet-cnt .changes-closed { padding:1em; line-height: 1.4em; background:#ff344b; color:white; border-radius:3px; margin-bottom:1em;} .sheet-na > .sheet-cnt .changes-closed > .icon-warnninging { font-size: 3em; margin:0em 0 0.2em 0;} .sheet-na > .sheet-cnt .changes-closed > .what{ font-size: 1.5em; margin:0.5em 0;} .sheet-na > .sheet-cnt .changes-closed > .why{ font-size: 1em; margin:0.5em 0;} .sheet-na > .sheet-cnt .changes-closed > .why .btn-grey-med{ margin:0.5em 0; background:white; color:#ff344b; font-weight: 700; font-size: 1.2em; height:2em; line-height: 2em;} .sheet-na > .sheet-cnt .changes-closed > .why .btn-grey-med:hover{ background:#f3f4f4; } .sheet-na > .sheet-cnt .changes-closed > .alert { font-size: 0.8em; color:white; opacity:0.8;} .sheet-na > .sheet-cnt .changes-closed > .alert:hover { opacity:1; } } @media screen and (min-width: 1000px){ .page-sheet .breadcrumb { padding:15px 0px; width:100%;} .sheet { margin:0;} .sheet > .sheet-cnt > .photo-gallery { float:right; width:530px; height:285px; } .sheet > .sheet-cnt > .photo-gallery .slider {width:100%; height:100%; overflow: hidden;} .sheet > .sheet-cnt > .photo-gallery .slider .shadow { z-index:1; position:absolute; top:-15%; height:115%; width:114%; left:-7%; box-shadow: inset 0 0 60px 20px rgba(0, 0, 0, 0.5);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall { z-index:10; position:absolute; text-decoration: none; right:12px; bottom:10px; color:white; font-weight: 700; font-size: 18px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.4); transition:0.3s;} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall:hover { bottom:12px; text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.3);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall > .hover-text { display:none; opacity:0; transition:0.3s; font-weight:400;} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall:hover > .hover-text { display:inline; opacity:1; bottom:0.1em; margin-right:5px;} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall:after { font-size: 35px; margin-left:10px; bottom:0.05em;} .sheet > .sheet-cnt > .infos { float : left; padding:0 5px; width:calc(100% - 530px - 20px);} .sheet > .sheet-cnt > .infos > h1 { margin:0px 3px 15px 0;} .sheet > .sheet-cnt > .infos > .bonus { margin-bottom:8px; top:-3px;} .sheet > .sheet-cnt > .infos > .bonus > div { padding: 3px 7px 3px 4px; margin-right: 4px; font-size: 12px;} .sheet > .sheet-cnt > .infos > .bonus > div:before { margin-right:3px; margin-left:1px; font-size: 11px; bottom:-0.02em;} .sheet > .sheet-cnt > .infos > ul {} .sheet > .sheet-cnt > .infos > ul > li { padding: 5px 7px; margin: 0 3px 2px 0; font-size: 12px;} .sheet > .sheet-cnt > .infos > .address { float:left; margin: 25px 0 0px 0 ; padding-left:30px; padding-right:5px; width:71%; font-size: 14px; font-weight: 400;} .sheet > .sheet-cnt > .infos > .address:before { font-size: 18px; bottom:-4px; margin-left:-22px; left:-10px; } .sheet > .sheet-cnt > .infos > .phone { float:left; font-size: 14px; width: 70%; margin-top: 15px; padding-left:30px; margin-bottom:30px;} .sheet > .sheet-cnt > .infos > .phone:before { font-size: 16px; bottom:-4px; margin-left:-19px; left:-10px;} .sheet > .sheet-cnt > .infos > .phone > span {} .sheet > .sheet-cnt > .infos > .phone > a.mobile { display: none;} .sheet > .sheet-cnt > .infos > .phone > a.number { } .sheet > .sheet-cnt > .infos > .brand-listing { margin-bottom: 10px;} .sheet > .sheet-cnt > .infos > .brand-listing > a { padding: 6px 12px;} .sheet > .sheet-cnt > .infos > .promo { display:inline-block; clear:both; margin-bottom: 5px; padding: 6px 12px 6px 12px; font-size: 14px;} .sheet > .sheet-cnt > .promo >.info-point {margin-left:5px;} .sheet > .sheet-cnt > .infos > .review { float:right; width:29%; margin-top:25px; padding: 10px 0 ; text-align: center; border-left: 1px solid #d5dce0;} .sheet > .sheet-cnt > .infos > .review > a > div { font-size: 35px;} .sheet > .sheet-cnt > .infos > .review > a > div > span{ margin-left:3px;} .sheet > .sheet-cnt > .infos > .review > a > span { margin:auto; right:0; font-size: 12px;} .sheet > .sheet-cnt > .infos > .review > a > span > span { display:none} .sheet > .sheet-cnt > .photo-gallery > .share { z-index: 10; position:absolute; color: white; right: 0px; top: -33px; text-align: right;} .sheet-na > .sheet-cnt > .photo-gallery > .share { display: none;} .sheet:not(.sheet-na) > header > .photo-gallery > .share:before { content:"";} .sheet > .sheet-cnt > .photo-gallery > .share > ul { } .sheet > .sheet-cnt > .photo-gallery > .share > ul > li { text-align:center;} .sheet > .sheet-cnt > .photo-gallery > .share:hover > ul { display:block;} .sheet > .tabs { margin-top: 10px; } .sheet > .tabs > ul > li { float:left; font-size: 16px;} .sheet > .sheet-cnt > .actions {float:right; clear:right; margin-bottom:-10px;} .sheet > .sheet-cnt > .actions > a {margin:10px 5px 0 0;} .sheet > .sheet-cnt > .actions > a:last-of-type {margin:10px 0px 0 0;} .sheet > .sheet-cnt > .actions > a > .btn-br {display:none;} .sheet > .sheet-cnt > .actions.three-button > a { padding:0 15px; } /*--------- >>> header NA ----------------------------------------------------------*/ .sheet-na > .sheet-cnt > .infos {width:calc(100% - 460px); margin-bottom:25px;} .sheet-na > .sheet-cnt > .infos > .na-call { margin-bottom: 15px;} .tipso_bubble.na-infos-tipso { } .tipso_bubble.na-infos-tipso p { margin: 10px 0; font-size: 16px;} .tipso_bubble.na-infos-tipso .tooltip-b-text { font-size: 18px;} .sheet-na > .sheet-cnt .changes {position:absolute; top:0; right:0; width:auto;} .sheet-na > .sheet-cnt .changes > .frame { padding:20px 20px; margin:0 auto; width:380px;} .sheet-na > .sheet-cnt .changes > .frame > .text { width:55%; padding:6px;font-size: 18px; line-height: 1.5em; font-weight: } .sheet-na > .sheet-cnt .changes > .frame > .btn-red { width:calc(45% - 10px); padding: 10px 7px; margin-left:10px; font-size: 16px; line-height: 1.4em;} .sheet-na > .sheet-cnt > .na-others > h2 { font-size: 24px;} .sheet-na > .sheet-cnt > .na-others > ul > li { display:inline-block; margin-right:25px; margin-bottom:15px; width:calc((100% - 75px) / 5.5);} .sheet-na > .sheet-cnt > .na-others > ul > li > .fresto-t2 { padding: 10px 10px 0 10px; min-height:80px;} .sheet-na > .sheet-cnt > .na-others > a { font-size: 18px; margin-bottom: 20px;} /*---- >>> header NA CLOSE ----*/ .sheet-na > .sheet-cnt .changes-closed { float:left; width:460px; font-size: 16px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .page-sheet .breadcrumb { padding:6px 10px; background:white; width:100%;} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back { z-index:10; position: absolute; left:5px; bottom:-50px; background:white; margin:0; background:none; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back > a:before { font-size: 32px; color: white;} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back:after { display:none;} .sheet { margin:0; overflow:hidden;} .sheet > .sheet-cnt > .photo-gallery { width:calc(100% + 30px); margin:0 -15px; min-height:25vh; max-height: 35vh; height:50vw; overflow:hidden; } .sheet > .sheet-cnt > .photo-gallery .slider {width:100%; height:100%; overflow: hidden;} .sheet > .sheet-cnt > .photo-gallery .slider > img { position: absolute; margin:auto; min-width:100%; min-height: 100%; top:-9999px; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; } .sheet > .sheet-cnt > .photo-gallery .slider .gallery-onepic .shadow { z-index:1; position:absolute; top:0; height:100%; width:150%; left:-25%; box-shadow: inset 0 0 60px 35px rgba(0, 0, 0, 0.3);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall { z-index:10; position:absolute; text-decoration: none; display:block; right:20px; bottom:20px; height:35px; line-height: 35px; color:white; font-weight: 700; font-size: 18px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.4);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall:after { font-size: 35px; margin:auto; margin-left:10px; bottom:0.05em;} .sheet > .sheet-cnt > .photo-gallery .close {display:none;} .sheet > .sheet-cnt > .photo-gallery .slick-next {display:none !important;} .sheet > .sheet-cnt > .photo-gallery .slick-prev {display:none !important;} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall > .hover-text { display:none;} .sheet > .sheet-cnt { width:calc(100% - 20px); margin:auto;} .sheet > .sheet-cnt > .infos { padding:0 5px;} .sheet > .sheet-cnt > .infos > h1 { margin:15px 3px 15px 0;} .sheet > .sheet-cnt > .infos > .bonus { margin-bottom:8px; top:-3px;} .sheet > .sheet-cnt > .infos > .bonus > div { padding: 3px 7px 3px 4px; margin-right: 4px; font-size: 12px;} .sheet > .sheet-cnt > .infos > .bonus > div:before { margin-right:3px; margin-left:1px; font-size: 11px; bottom:-0.02em;} .sheet > .sheet-cnt > .infos > ul {} .sheet > .sheet-cnt > .infos > ul > li { padding: 5px 7px; margin: 0 3px 2px 0; font-size: 12px;} .sheet > .sheet-cnt > .infos > .address { float:left; margin: 15px 0 0px 0 ; padding-left:25px; padding-right:5px; width:71%; font-size: 14px; font-weight: 400;} .sheet > .sheet-cnt > .infos > .address:before { font-size: 18px; bottom:-4px; margin-left:-22px; left:-5px; } .sheet > .sheet-cnt > .infos > .phone { float:left; font-size: 14px; width: 70%; margin-top: 10px; padding-left:25px; margin-bottom:30px;} .sheet > .sheet-cnt > .infos > .phone:before { font-size: 16px; bottom:-4px; margin-left:-19px; left:-5px;} .sheet > .sheet-cnt > .infos > .phone > span { display:none; } .sheet > .sheet-cnt > .infos > .phone > a.number { display:none; } .sheet > .sheet-cnt > .infos > .brand-listing { float:left; display:inline-block; clear:both; margin-bottom: 10px;} .sheet > .sheet-cnt > .infos > .brand-listing > a { padding: 6px 12px;} .sheet > .sheet-cnt > .infos > .promo { display:inline-block; clear:both; margin-bottom: 5px; padding: 6px 12px 6px 12px; font-size: 14px;} .sheet > .sheet-cnt > .infos > .review { float:right; width:29%; margin-top:20px; text-align: center; border-left: 1px solid #d5dce0;} .sheet > .sheet-cnt > .infos > .review > a > div { font-size: 35px;} .sheet > .sheet-cnt > .infos > .review > a > div > span{ margin-left:3px;} .sheet > .sheet-cnt > .infos > .review > a > span { margin:auto; right:0; font-size: 12px;} .sheet > .sheet-cnt > .infos > .review > a > span > span { display:none} .sheet > .sheet-cnt > .photo-gallery > .share { z-index: 10; position:absolute; color: white; right: 20px; top: 15px; text-align: right;} .sheet-na > .sheet-cnt > .photo-gallery > .share { display: none;} .sheet:not(.sheet-na) > header > .photo-gallery > .share:before { font-size: 30px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);} .sheet > .sheet-cnt > .photo-gallery > .share > ul { display: none; padding:10px; margin-top:5px; background:white; border-radius:5px; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);} .sheet > .sheet-cnt > .photo-gallery > .share > ul > li { text-align:center; width:35px; height:35px; line-height: 35px; margin-right:5px;} .sheet > .sheet-cnt > .photo-gallery > .share:hover > ul { display:block;} .sheet > .tabs { margin-top: 10px; width:100%;} .sheet > .tabs > ul > li { float:left; width:25%; font-size: 16px;} /*--------- >>> header NA ----------------------------------------------------------*/ .sheet-na > .sheet-cnt > .infos > .na-call { margin-bottom: 15px;} .qtip-content .na-infos-tipso > .tooltip { } .qtip-content .na-infos-tipso > .tooltip > p { margin: 10px 0; font-size: 16px;} .qtip-content .na-infos-tipso > .tooltip > .tooltip-b-text { font-size: 18px;} .sheet-na > .sheet-cnt .changes > .frame { padding:10px 15px; margin:15px auto; width:100%; max-width:320px;} .sheet-na > .sheet-cnt .changes > .frame > .text { width:55%; font-size: 16px; line-height: 1.4em;} .sheet-na > .sheet-cnt .changes > .frame > .btn-red { width:calc(45% - 10px); padding: 7px; margin-left:10px; font-size: 14px;} .sheet-na > .sheet-cnt > .na-others > h2 { font-size: 24px;} .sheet-na > .sheet-cnt > .na-others > ul > li { float:left; margin-right:15px; margin-bottom:15px; width:calc((100% - 45px) / 4);} .sheet-na > .sheet-cnt > .na-others > ul > li:last-child { margin-right:0;} .sheet-na > .sheet-cnt > .na-others > ul > li > .fresto-t2 { padding: 10px 10px 0 10px; min-height:80px;} .sheet-na > .sheet-cnt > .na-others > a { font-size: 18px; margin-bottom: 20px;} .sheet-na > .sheet-cnt .changes-closed { margin:auto; max-width:460px; font-size: 16px; margin-bottom: 3em; margin-top:2em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-sheet:not(.page-sheet-na) .promo-ext { display:none; } .page-sheet .search-space { display:none; } .page-sheet .breadcrumb { background:white; padding:3px 10px; width:100%;} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back { z-index:10; position: absolute; left:0px; bottom:-37px; background:white; margin:0; background:none; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back > a:before { font-size: 25px; color: white;} .page-sheet:not(.page-sheet-na) .breadcrumb > ol > .back:after { display:none;} .sheet { margin:0; overflow:hidden;} .sheet > .sheet-cnt > .photo-gallery { width:calc(100% + 30px); margin:0 -15px; min-height:30vh; height:30vw; overflow:hidden; } .sheet > .sheet-cnt > .photo-gallery .slider {width:100%; height:100%; overflow: hidden;} .sheet > .sheet-cnt > .photo-gallery .slider > img { position: absolute; margin:auto; min-width:100%; min-height: 100%; top:-9999px; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; } .sheet > .sheet-cnt > .photo-gallery .slider .gallery-onepic .shadow { z-index:1; position:absolute; top:0; height:100%; width:150%; left:-25%; box-shadow: inset 0 0 45px 20px rgba(0, 0, 0, 0.3);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall { z-index:10; position:absolute; text-decoration: none; right:15px; bottom:12px; color:white; font-weight: 700; font-size: 16px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.4);} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall:after { font-size: 25px; margin-left:5px; bottom:0.05em;} .sheet > .sheet-cnt > .photo-gallery .close {display:none;} .sheet > .sheet-cnt > .photo-gallery .slick-next {display:none !important;} .sheet > .sheet-cnt > .photo-gallery .slick-prev {display:none !important;} .sheet > .sheet-cnt > .photo-gallery .btn-gallerycall > .hover-text { display:none;} .sheet > .sheet-cnt { width:calc(100% - 20px); margin:auto;} .sheet > .sheet-cnt > .infos { padding:0 5px;} .sheet > .sheet-cnt > .infos > h1 { margin:10px 3px 5px 0; } .sheet > .sheet-cnt > .infos > .bonus { margin-bottom:5px; top:-3px;} .sheet > .sheet-cnt > .infos > .bonus > div { padding: 2px 5px 2px 2px; margin-right: 4px; font-size: 11px;} .sheet > .sheet-cnt > .infos > .bonus > div:before { margin-right:3px; margin-left:1px; font-size: 10px;} .sheet > .sheet-cnt > .infos > ul > li { padding: 2px 5px; margin: 0 3px 2px 0; font-size: 11px;} .sheet > .sheet-cnt > .infos > .address { float:left; margin: 15px 0 0px 0 ; padding-left:25px; padding-right:5px; width:71%; font-size: 14px; font-weight: 400;} .sheet > .sheet-cnt > .infos > .address:before { font-size: 18px; bottom:-4px; margin-left:-22px; left:-5px; } .sheet > .sheet-cnt > .infos > .phone { float:left; font-size: 14px; width: 70%; margin-top: 10px; padding-left:25px; margin-bottom:30px;} .sheet > .sheet-cnt > .infos > .phone:before { font-size: 16px; bottom:-4px; margin-left:-19px; left:-5px;} .sheet > .sheet-cnt > .infos > .phone > span { display:none; } .sheet > .sheet-cnt > .infos > .phone > a.number { display:none; } .sheet > .sheet-cnt > .infos > .brand-listing { margin-bottom: 10px;} .sheet > .sheet-cnt > .infos > .brand-listing > a { display:inline-block; padding: 6px 12px;} .sheet > .sheet-cnt > .infos > .promo { display:inline-block; clear:both; margin-bottom: 5px; padding: 6px 12px 6px 12px; font-size: 14px;} .sheet > .sheet-cnt > .infos > .review { float:right; width:29%; margin-top:20px; text-align: center; border-left: 1px solid #d5dce0;} .sheet > .sheet-cnt > .infos > .review > a > div { font-size: 35px;} .sheet > .sheet-cnt > .infos > .review > a > div > span{ margin-left:3px;} .sheet > .sheet-cnt > .infos > .review > a > span { margin:auto; right:0; font-size: 12px;} .sheet > .sheet-cnt > .infos > .review > a > span > span { display:none} .sheet > .sheet-cnt > .photo-gallery > .share { z-index: 10; position:absolute; color: white; right: 15px; top: 10px; text-align: right;} .sheet-na > .sheet-cnt > .photo-gallery > .share { display: none;} .sheet:not(.sheet-na) > header > .photo-gallery > .share:before { font-size: 25px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);} .sheet > .sheet-cnt > .photo-gallery > .share > ul { display: none; padding:10px; margin-top:5px; background:white; border-radius:5px; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);} .sheet > .sheet-cnt > .photo-gallery > .share > ul > li { text-align:center;} .sheet > .sheet-cnt > .photo-gallery > .share:hover > ul { display:block;} .sheet > .tabs { margin-top: 10px; width:100%;} .sheet > .tabs > ul > li { float:left; width:25%; font-size: 16px;} /*--------- >>> header NA ----------------------------------------------------------*/ .sheet-na > .sheet-cnt > .infos {padding-top:10px;} .sheet-na > .sheet-cnt > .infos > .na-call { margin-bottom: 15px;} .sheet-na > .sheet-cnt > .infos > .na-call > .tooltiped > .tooltip {} .sheet-na > .sheet-cnt > .infos > .na-call > .tooltiped > .tooltip > p { margin: 10px 0; font-size: 14px;} .sheet-na > .sheet-cnt > .infos > .na-call > .tooltiped > .tooltip > .tooltip-b-text { font-size: 16px;} .sheet-na > .sheet-cnt .changes > .frame { padding:10px 15px; margin:15px auto; width:100%; max-width:320px;} .sheet-na > .sheet-cnt .changes > .frame > .text { width:55%; font-size: 14px; line-height: 1.6em;} .sheet-na > .sheet-cnt .changes > .frame > .btn-red { width:calc(45% - 10px); padding: 7px; margin-left:10px; font-size: 14px;} .sheet-na > .sheet-cnt > .na-others > ul {max-width: 500px; margin: auto;} .sheet-na > .sheet-cnt > .na-others > h2 { font-size: 20px;} .sheet-na > .sheet-cnt > .na-others > ul > li { float:left; margin-right:10px; margin-bottom:10px; max-width:; width:calc((100% - 10px) / 2);} .sheet-na > .sheet-cnt > .na-others > ul > li:nth-of-type(2n) { margin-right:0;} .sheet-na > .sheet-cnt > .na-others > ul > li > .fresto-t2 { padding: 5px 8px 0 8px; min-height:75px;} .sheet-na > .sheet-cnt > .na-others > a { font-size: 15px; margin: 10px 0 25px 0;} .sheet-na > .sheet-cnt .changes-closed { margin:auto; max-width:460px; font-size: 14px; margin-bottom: 2em; margin-top:1em;} } @media screen and (min-width: 0px) and ( max-width: 340px){ .sheet > .sheet-cnt > .infos > .bonus > div:before { bottom: -1px;} .sheet > .sheet-cnt > .infos > .bonus { margin-bottom: 0;} .sheet > .sheet-cnt > .infos > .bonus > div { font-size: 10px; padding-right: 3px; } .sheet > .sheet-cnt > .infos > ul > li { font-size: 10px;} .sheet > .sheet-cnt > .infos > .bonus > div > span { display: none;} .sheet > .sheet-cnt > .infos > .phone { margin-bottom: 25px;} .sheet > .sheet-cnt > .infos > .brand-listing { font-size: 14px; } /*--------- >>> header NA ----------------------------------------------------------*/ .sheet-na > .sheet-cnt > .infos > .na-call > .text-lg {display:none;} } @media screen and (min-width:341px){ .sheet-na > .sheet-cnt > .infos > .na-call > .text-s {display:none;} } /*--------- >>> button mobile -------------------------------------------------*/ @media screen and (min-width: 750px) and (max-width: 999px){ .sheet > .sheet-cnt > .actions { z-index: 50; position:fixed; bottom:0px; width:100%; height:65px; left:0; right:0; text-align: center; background: #ff344b;} .sheet > .sheet-cnt > .actions > a { display: block; float:left; padding:12px; margin-bottom:0px; height:100%; text-align: center; line-height: 1.7em; background:none; border-right:1px solid white; border-radius: 0px;} .sheet > .sheet-cnt > .actions > a:last-of-type { border-right: none; } .sheet > .sheet-cnt > .actions > a > span { display:none; } .sheet > .sheet-cnt > .actions > a > span.btn-br { display:inline; } .sheet > .sheet-cnt > .actions > a:before { font-size: 25px; margin:0; line-height: 0.7em;} .sheet > .sheet-cnt > .actions > a.icon-delivery { line-height: 1.4em;} .sheet > .sheet-cnt > .actions > a.icon-delivery:before { font-size: 30px; line-height: 0.6em;} /* number of button */ .sheet > .tab-cnt.menu .menu-interface .btn-mobile.one-button { width:100%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.two-button { width:50%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.three-button { width:33.33%;} .sheet > .sheet-cnt > .actions.one-button > a { width:100%;} .sheet > .sheet-cnt > .actions.two-button > a { width:50%;} .sheet > .sheet-cnt > .actions.three-button > a { width:33.33%;} /* to delete ----------------------------------------------------------------------------*/ body.page-sheet.menu .sheet > .sheet-cnt .actions{ display: none; } } @media screen and (min-width: 481px) and (max-width: 749px){ .sheet > .sheet-cnt > .actions { z-index: 50; position:fixed; bottom:0px; width:100%; height:65px; left:0; right:0; text-align: center; background: #ff344b;} .sheet > .sheet-cnt > .actions > a { display: block; float:left; padding:12px; margin-bottom:0px; height:100%; text-align: center; line-height: 1.7em; background:none; border-right:1px solid white; border-radius: 0px;} .sheet > .sheet-cnt > .actions > a:last-of-type { border-right: none; } .sheet > .sheet-cnt > .actions > a > span { display:none; } .sheet > .sheet-cnt > .actions > a > span.btn-br { display:inline; } .sheet > .sheet-cnt > .actions > a:before { font-size: 25px; margin:0; line-height: 0.7em;} .sheet > .sheet-cnt > .actions > a.icon-delivery { line-height: 1.4em;} .sheet > .sheet-cnt > .actions > a.icon-delivery:before { font-size: 30px; line-height: 0.6em;} .sheet > .tab-cnt.menu .menu-interface > .left-menu { z-index:10; position:fixed ; bottom:0px; width:100%; height:0px; left: 0; right:0; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category {position:fixed; top:100%; height:calc(100% - 100px)} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .menu-category { top:50px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile { z-index: 8; position:absolute; left:0; top:-50px; height:50px; background: #ff344b; color: white; line-height: 20px; cursor: pointer; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile:before { color: white; font-size: 25px; top:0.20em; margin:auto;} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .btn-mobile { background: white;} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .btn-mobile:before { top: 12px; color: #ff344b; content:"\e933"; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket{ position:fixed !important; z-index:1000; top:0vh; left:0; height:100vh; overflow-y: scroll; overflow-x: hidden; background: white;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket {top:100vh;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-mobile-title { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-tabs { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-basket { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile { z-index:10; position:fixed ; bottom:0px; width:100%; height:50px; right:0; border-left: 1px solid white; background: #ff344b; color: white; cursor: pointer;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button { display:inline-block; height: 50px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto { float:left; margin: 5px 5px auto 5px; width: 50px; height: 100%;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto > .circle { height: 23px; width: 23px; margin: 0px auto -10px auto; border: 3px solid white; border-radius: 15px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto > .number { margin: auto; height:25px; width:42px; background: white; color: #ff344b; font-size: 16px; font-weight: 700; line-height: 22px; border-radius: 3px 3px 15px 15px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .text { float: left; padding-top:10px; height: 100%; font-size:12px} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .text > div { font-size:16px; font-weight: 700; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button { height:100%;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .icon-spot, .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .icon-delivery { font-size: 1.8em; float:left; margin: 10px 0 auto 20px; width: 40px; height: 100%; text-align: center;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .text { position:absolute; right:0; top:50%; transform: translateY(-50%); width:calc(100% - 50px); font-size:16px; line-height: 1.2em; } .sheet > .tab-cnt.menu .menu-interface > .right-menu.active > .btn-mobile { display:none;} /* number of button */ .sheet > .tab-cnt.menu .menu-interface .btn-mobile.one-button { width:100%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.two-button { width:50%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.three-button { width:33.33%;} .sheet > .sheet-cnt > .actions.one-button > a { width:100%;} .sheet > .sheet-cnt > .actions.two-button > a { width:50%;} .sheet > .sheet-cnt > .actions.three-button > a { width:33.33%;} /* to delete ----------------------------------------------------------------------------*/ body.page-sheet.menu .sheet > .sheet-cnt .actions{ display: none; } } @media screen and (min-width: 0px) and (max-width: 480px){ .sheet > .sheet-cnt > .actions { z-index: 50; position:fixed; bottom:0px; width:100%; height:50px; left:0; right:0; text-align: center; background: #ff344b;} .sheet > .sheet-cnt > .actions > a { display: block; float:left; padding:8px; margin-bottom:0px; height:100%; text-align: center; line-height: 1.4em; background:none; border-right:1px solid white; border-radius: 0px;} .sheet > .sheet-cnt > .actions > a:last-of-type { border-right: none; } .sheet > .sheet-cnt > .actions > a > span { display:none; } .sheet > .sheet-cnt > .actions > a > span.btn-br { display:inline; } .sheet > .sheet-cnt > .actions > a:before { font-size: 20px; margin:0; line-height: 0.7em;} .sheet > .sheet-cnt > .actions > a.icon-delivery { line-height: 1.2em;} .sheet > .sheet-cnt > .actions > a.icon-delivery:before { font-size: 25px; line-height: 0.6em;} .sheet > .tab-cnt.menu .menu-interface > .left-menu { z-index:10; position:fixed ; bottom:0px; width:100%; height:0px; left: 0; right:0; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category {position:fixed; top:100%; height:calc(100% - 100px)} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .menu-category { top:50px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile { z-index: 8; position:absolute; left:0; top:-50px; height:50px; background: #ff344b; color: white; line-height: 20px; cursor: pointer; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile:before { color: white; font-size: 25px; top:0.20em; margin:auto;} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .btn-mobile { background: white;} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .btn-mobile:before { top: 12px; color: #ff344b; content:"\e933"; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket{ position:fixed !important; z-index:1000; top:0vh; left:0; height:100vh; overflow-y: scroll; overflow-x: hidden; background: white;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket {top:100vh;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-mobile-title { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-tabs { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu:not(.active) > .all-basket > .basket-basket { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile { z-index:10; position:fixed ; bottom:0px; width:100%; height:50px; right:0; border-left: 1px solid white; background: #ff344b; color: white; cursor: pointer;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button { display:inline-block; height: 50px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto { float:left; margin: 5px 5px auto 5px; width: 50px; height: 100%;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto > .circle { height: 23px; width: 23px; margin: 0px auto -10px auto; border: 3px solid white; border-radius: 15px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .picto > .number { margin: auto; height:25px; width:42px; background: white; color: #ff344b; font-size: 16px; font-weight: 700; line-height: 22px; border-radius: 3px 3px 15px 15px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .text { float: left; padding-top:10px; height: 100%; font-size:12px} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .cart-button > .text > div { font-size:16px; font-weight: 700; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button { height:100%;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .icon-spot, .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .icon-delivery { font-size: 1.8em; float:left; margin: 10px 0 auto 0; width: 50px; height: 100%; text-align: center;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile > .adress-button > .text { position:absolute; right:0; top:50%; transform: translateY(-50%); width:calc(100% - 35px); font-size:14px; line-height: 1.2em; } .sheet > .tab-cnt.menu .menu-interface > .right-menu.active > .btn-mobile { display:none;} /* number of button */ .sheet > .tab-cnt.menu .menu-interface .btn-mobile.one-button { width:100%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.two-button { width:50%;} .sheet > .tab-cnt.menu .menu-interface .btn-mobile.three-button { width:33.33%;} .sheet > .sheet-cnt > .actions.one-button > a { width:100%;} .sheet > .sheet-cnt > .actions.two-button > a { width:50%;} .sheet > .sheet-cnt > .actions.three-button > a { width:33.33%;} /* to delete ----------------------------------------------------------------------------*/ body.page-sheet.menu .sheet > .sheet-cnt .actions{ display: none; } } @media screen and (min-width: 0px) and (max-width: 359px){ .sheet > .sheet-cnt > .actions > a { padding-left:0; padding-right:0;} } /*--------- >>> infos ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-sheet .details.active .more > span.show {display:none;} .page-sheet .details.active .more > span.hide {display:inline;} .page-sheet .details .more > span.hide {display:none;} .page-sheet .details .more > span.show {display:inline;} .page-sheet .details { font-size: 14px; text-align:left; letter-spacing: 0.015em;} .page-sheet .details h3 { font-size: 14px;} .page-sheet .details > ul > li > ul > li > ul.decal {margin-left:1em;} .page-sheet .details > ul > li > ul > li > ul.decal:first-of-type {margin-top:0.3em;} .page-sheet .details > ul > li > ul > li > ul.decal:last-of-type {margin-bottom:0.3em;} .page-sheet .details > ul > li > ul > li > ul > li { display:inline;} .page-sheet .details > ul > li > ul > li > ul > li:first-of-type { font-weight: 700;} .page-sheet .details > ul > li > ul > li > ul > li:after { content:", ";} .page-sheet .details > ul > li > ul > li > ul > li:first-of-type:after { content:none;} .page-sheet .details > ul > li > ul > li > ul > li:last-of-type:after { content:none; } .page-sheet .details > ul > li > table.today { width:100%; table-layout: fixed; border-spacing: 0px;} .page-sheet .details > ul > li > table.today tr > td:first-of-type { font-weight: 700; text-align: left;} .page-sheet .details > ul > li > table.today tr > td {text-align: center;} .page-sheet .details > ul > li > table.week { width:100%; table-layout: fixed; border-spacing: 0px;} .page-sheet .details > ul > li > table.week tr:nth-child(2n) { background:#f5f5f5;} .page-sheet .details > ul > li > table.week tr > td { text-align: center;} .page-sheet .details > ul > li > table.week tr > td:first-of-type { font-weight: 700; text-align: left;} .page-sheet .details .more { display:block; width: 100%; color: #999; text-align: center;} .page-sheet .details:not(.active) table.week {display:none;} .page-sheet .details > .more.mobile {display:none;} .page-sheet .details .change-warn-call { width:100%; margin:25px auto 0 auto; text-align: center; background:#f5f5f5; padding:20px; max-width:460px;} .page-sheet .details .change-warn-call p { margin:0 auto 20px auto; font-size: 18px; padding-bottom:20px; border-bottom:1px solid #d5dce0;} .page-sheet .details .change-warn-call p strong { color:#ff344b;} .page-sheet .media { text-align:left;} .page-sheet .media .actu-list > ul > li { background:#f5f5f5; border-radius: 3px; border: 0; padding:1em;} .page-sheet .media > .presentation > div > a { display:inline; color: #999;} .page-sheet .media > .presentation > div > a:hover { color: #ff344b;} .page-sheet .media > .presentation > div > h1 { margin-bottom:0.5em; text-align:left;} .page-sheet .media > .presentation > div > h2 { margin-bottom:0.5em; text-align:left;} .page-sheet .media > .presentation > div > h2:after { display:none;} .page-sheet .media > .presentation > div > h3 { margin-bottom:0.5em; text-align:left;} .page-sheet .media > .presentation > div > h4 { margin-bottom:0.5em; text-align:left;} .page-sheet .media > .presentation > div > p { line-height: 1.5em; margin-right:5px; margin-bottom:0.5em; } .change-warn-call { display:block; border: 1px solid #d5dce0; border-radius: 3px;} .change-warn-call > .button { float:left; margin-left: -10px; vertical-align: middle; color: white; background: #ff344b; border-radius: 3px 0 0 3px; border-width: 0 1px 0 0; border-style: solid; border-color: #ff3478;} .change-warn-call > .arrow { float: left; border-style: solid; border-color: transparent transparent transparent #ff344b;} .change-warn-call > .calltoaction { float: left; font-weight: 700; color:#333; } .change-warn-call > .calltoaction > span { color:#ff344b;} .page-sheet .map-block > .map { height: 315px; overflow: hidden;} .page-sheet .map-block > .map > a.route-call { position:absolute; display: block; top: 5px; left: 5px; background:white; border-radius: 3px; color: #4285f4; text-decoration: none; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);} .page-sheet .map-block > .map > .google-map-content > img { width: 100%;} .page-sheet .map-block > .map > .google-map-content > .spot { position:absolute; display: block; top: 50%; left: 50%;} .page-sheet .map-block > .map > .google-map-content > .spot:before { color: #ff344b; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 9px rgba(0, 0, 0, 0.6);} .page-sheet .map-block > .map > .google-map-content > .spot > div { position:absolute; top:35%; left:120%; text-align: left; font-weight: 700; color: #ff344b; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 9px rgba(0, 0, 0, 0.6);} } @media screen and (min-width: 1000px){ .page-sheet .tab-cnt h2 { font-size: 22px;} .page-sheet .details { float:right; padding:20px; margin: 20px 0 ; border-radius: 3px; border:1px solid #d5dce0;} .page-sheet .details h2 { margin:0px 0 25px 0;} .page-sheet .details h3 { margin:25px 0 10px 0;} .page-sheet .details > ul > li > table.today { margin-bottom:10px; width:100%; table-layout: fixed; border-spacing: 0px;} .page-sheet .details > ul > li > table tr > td { padding:4px;} .page-sheet .details .more { margin: 10px 0;} .page-sheet .media { float:left; margin: 20px 0; font-size: 14px;} .page-sheet .media > .presentation > div > h3 {font-size: 16px;} .change-warn-call { margin: 30px auto; height:50px; font-size: 18px;} .change-warn-call > .button { margin-top: 6px; height: 36px; width: 220px; text-align: center; line-height: 33px; } .change-warn-call > .arrow { margin-top: 6px; border-width: 18px 0 18px 15px; height: 36px; width: 30px;} .change-warn-call > .calltoaction { height: 100%; width: calc(100% - 250px); line-height: 45px;} .page-sheet .map-block {float:left;} .page-sheet .map-block > h2 {text-align: left;} .page-sheet .map-block > .map { height: 315px; width:100%; margin-bottom: 35px;} .page-sheet .map-block > .map > a.route-call { padding:5px 10px;} .page-sheet .map-block > .map > .google-map-content { height: 100%; width:100%;} .page-sheet .map-block > .map > .google-map-content > .spot:before { font-size: 45px;} .page-sheet .map-block > .map > .google-map-content > .spot > div { width:300px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .page-sheet .tab-cnt h2 { font-size: 22px;} .page-sheet .details { float:right; padding:20px; margin: 20px 0 ; width:320px; border-radius: 3px; border:1px solid #d5dce0;} .page-sheet .details h2 { margin:0px 0 25px 0;} .page-sheet .details h3 { font-size: 14px; margin:25px 0 10px 0;} .page-sheet .details > ul > li > table.today { margin-bottom:10px;} .page-sheet .details > ul > li > table tr > td { padding:4px;} .page-sheet .details .more { margin: 10px 0;} .page-sheet .media { float:left; margin: 20px 20px 20px 0px; width:calc(100% - 340px); font-size: 14px;} .page-sheet .media > .presentation > div > h3 { font-size: 16px;} .change-warn-call { margin: 30px auto; height:64px; font-size: 16px;} .change-warn-call > .button { margin-top: 6px; padding-left:10px; padding-top:2px; height: 50px; width: 110px; line-height: 21px;} .change-warn-call > .arrow { margin-top: 6px; height: 50px; width: 30px; border-width: 25px 0 25px 15px;} .change-warn-call > .calltoaction { height: calc(100% - 10px); width: calc(100% - 150px); margin: 5px auto; line-height: 25px;} .change-warn-call > .calltoaction > span:before {content: "\A"; white-space: pre; } .page-sheet .map-block {float:left; width:100%;} .page-sheet .map-block > h2 {text-align: left;} .page-sheet .map-block > .map { height: 315px; width:100%; margin-bottom: 35px} .page-sheet .map-block > .map > a.route-call { padding:5px 10px;} .page-sheet .map-block > .map > .google-map-content { width:100%; height:100%;} .page-sheet .map-block > .map > .google-map-content > .spot:before { font-size: 45px;} .page-sheet .map-block > .map > .google-map-content > .spot > div { width:30vw;} } @media screen and (min-width: 0px) and (max-width: 749px){ h2.redline{ display:inline-block; clear:both; text-align: center; font-weight: 400;} .page-sheet .tab-cnt.infos h2 { clear:both; margin: 20px auto 15px auto; font-size: 20px; text-align: center;} .page-sheet .tab-cnt.infos h2:after{ content:""; display:block; background:#ff344b; margin: 10px auto auto auto; width:50%; height:2px;} .page-sheet .details { margin: 20px 0 0 0 ;} .page-sheet .details h2 { display:none;} .page-sheet .details h3 { margin:25px 0 10px 0;} .page-sheet .details > ul > li > table { max-width: 400px;} .page-sheet .details > ul > li > table.today { margin-bottom:10px;} .page-sheet .details > ul > li > table tr > td { padding:4px 2px;} .page-sheet .details .more { display:none; margin: 10px 0;} .page-sheet .details:not(.active) > ul > li:nth-child(1n+4) { display:none;} .page-sheet .details > .more.mobile { display:block;} .page-sheet .media { margin: 20px 10px 20px 0px;} .page-sheet .media > .presentation > div { font-size: 14px;} .page-sheet .media > .presentation > div > h3 { font-size: 16px;} .change-warn-call { margin: 30px auto; height:64px; font-size: 14px; max-width:320px;} .change-warn-call > .button { margin-top: 6px; padding-left:10px; padding-top:2px; height: 50px; width: 95px; line-height: 21px;} .change-warn-call > .arrow { margin-top: 6px; height: 50px; width: 20px; border-width: 25px 0 25px 15px;} .change-warn-call > .calltoaction { height: calc(100% - 10px); width: calc(100% - 110px); margin: 5px auto; line-height: 25px; } .change-warn-call > .calltoaction > span:before {content: "\A"; white-space: pre; } .page-sheet .map-block { padding-bottom: 15px; float:left;} .page-sheet .map-block > .map { height: 315px; margin-bottom: 35px} .page-sheet .map-block > .map > a.route-call { padding:8px 15px; font-size: 13px;} .page-sheet .map-block > .map > .google-map-content { width: 100%; height:100%;} .page-sheet .map-block > .map > .google-map-content > .spot:before { font-size: 45px;} .page-sheet .map-block > .map > .google-map-content > .spot > div { width:30vw; font-size: 14px;} } /*--------- >>> actus ----------------------------------------------------------*/ @media screen and (min-width: 0px) and (max-width: 749px){ body.page-sheet .tab-cnt.actus > .cnt > .details{display:none;} body.page-sheet .tab-cnt.actus > .cnt .actu-list {margin-top: 0; padding-top: 0;} } /*--------- >>> avis ----------------------------------------------------------*/ @media screen and (min-width:0px){ .sheet > .tab-cnt.reviews > .listing-zone > .globale-review { text-align: left;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > h2 { padding:0; margin-top:0;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block { border: 1px solid #d5dce0; border-radius: 3px; text-align: center;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade-name { font-weight: 700; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade { font-weight: 700; line-height: 0.9em; color: #ff344b; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade > span { font-size: 0.65em; margin-left: 0.15em;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade-logos { height: 30px; width: 140px; margin: 4px auto; font-size: 25px; background: #ccc;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade-logos > .grade-line { position: absolute; top:0; left:0; width:100%; height:100%; background:url(/images/bt/grade-mask.png) center no-repeat; background-size: auto 100%;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade-logos > .valor { width:100%; height:100%; background:#ff344b} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > span { font-weight: 700;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-name { float:left; text-align: left; font-weight: 700;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-quantity { float:left; text-align: left; font-weight: 700;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line { float:left; background: #f5f5f5;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line > .valor { height:8px; background: #ff334b;} .reviewing-call { display:block; border: 1px solid #d5dce0; border-radius: 3px;} .reviewing-call > .button { float:left; margin-left: -10px; vertical-align: middle; color: white; background: #ff344b; border-radius: 3px 0 0 3px; border-width: 0 1px 0 0; border-style: solid; border-color: #ff3478;} .reviewing-call > .arrow { float: left; border-style: solid; border-width: 18px 0 18px 14px; border-color: transparent transparent transparent #ff344b;} .reviewing-call > .calltoaction { float: left; font-weight: 700; color:#333; } .reviewing-call > .calltoaction > span { color:#ff344b;} /*--- >>> post review---*/ .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .input-cnt { clear:both; margin:10px auto;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > .grade-logos-clickable { float:left; height: 25px; width: 120px; margin: 4px auto; font-size: 25px; } .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > .grade-logos-clickable > .grade-solo { float:left; width:20%; height:100%; background: #ccc url(/images/bt/grade-mask.png) center no-repeat; background-size: auto 100%; cursor: pointer; transition:background-color 0.3s;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > .grade-logos-clickable > .grade-solo.active { background: #ff344b url(/images/bt/grade-mask.png) center no-repeat; background-size: auto 100%;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > .kind{float:left; padding:10px 10px; width:80px; font-weight: 700; text-align: left;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > .result{float:left; padding:10px 0px; font-style: italic; text-align: left; } .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li > p {float:left; margin-top:-0.4em;font-style: italic; text-align: left; clear:both;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > textarea {width:100%;} /*--- post review grats---*/ .sheet > .tab-cnt.reviews > .cnt.grats > .grats { background:#ff344b; color:white; border-radius:100%; margin:0.5em auto;} .sheet > .tab-cnt.reviews > .cnt.grats > .title { font-weight: 700; color:#ff344b; margin:1em auto;} /*--- post first review call ---*/ .sheet > .tab-cnt.reviews .first-review-call { background:#f5f5f5; padding:1em 2em 2em 2em; border-radius:3px; margin:15px 0 0em 0; max-width:600px;} .sheet > .tab-cnt.reviews .first-review-call .call { margin:1em 0; font-size: 1.2em;} .sheet > .tab-cnt.reviews .first-review-call .icon-review:before { bottom:-0.32em; font-size: 1.5em;} } @media screen and (min-width: 1000px) { .sheet > .tab-cnt.reviews > .listing-zone {padding-top: 30px;} .sheet > .tab-cnt.reviews > .listing-zone > .onecol-span { width:226px; margin-right:32px;} .sheet > .tab-cnt.reviews > .listing-zone > .twocol-span { width:calc(100% - 258px); margin:0;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review { float:right; margin-bottom:30px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block { padding:25px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block > .infos { margin-bottom:30px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade { float: left; width: 50%;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade { font-size: 36px; margin-top:5px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > span { font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade { float: left; width:50%; border-left: 1px solid #d5dce0;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li { width:calc(100% - 30px); margin:10px 0px 10px 30px; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-name { width:90px; padding-right: 5px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-quantity { width:110px; padding-left: 15px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line { margin-top: 5px; width:calc(100% - 200px);} .reviewing-call { margin: 30px auto; height:50px; font-size: 18px;} .reviewing-call > .button { margin-top: 6px; height: 36px; width: 160px; text-align: center; line-height: 33px;} .reviewing-call > .arrow { margin-top: 6px; height: 36px; width: 40px;} .reviewing-call > .calltoaction { height: 100%; width: calc(100% - 190px); line-height: 45px;} .sheet > .tab-cnt.reviews > .listing-zone > .filters { float:left;} .sheet > .tab-cnt.reviews > .listing-zone > .listing { float:right;} /*--- >>> post review---*/ .sheet > .tab-cnt.reviews.review-post > .cnt > .twocol-span > h2 { margin-top:35px;} .sheet > .tab-cnt.reviews.review-post > .cnt > h2 { margin-top:35px;} .sheet > .tab-cnt.reviews > .cnt h2 {margin-top:0px; text-align: left; font-size: 22px; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data { padding: 15px 0 35px 0; text-align: left;} .sheet > .tab-cnt.reviews > .cnt .data > .title { float:left; width:250px; height:100%; font-size: 18px; text-align: right;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs { float:left; width:calc(100% - 250px); padding: 0 30px;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .line-tabs { margin: 0 0 25px 0; } .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li { margin: 0 0 15px 0;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pictures-list {margin-bottom:20px;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pic-upld {width:120px; height:120px; float:left;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .proof { float:left; } .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld {} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld > .pic-add > .add { height:80px; padding: 0 10px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date { float:left; padding-left:20px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date > div { margin-bottom: 10px; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .promo-ok-cb { float:left; margin: 1em auto;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .input-cnt { float:left;} .sheet > .tab-cnt.reviews > .cnt .data.pictures > .inputs .pic-upld > .pic-add > .add { height:40px;} .sheet > .tab-cnt.reviews > .cnt .val { float:left; margin-left:250px; padding:0 0 30px 30px; text-align: left;} .sheet > .tab-cnt.reviews > .cnt .val > button { float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts { float:left; margin-left:30px; color: #ff344b;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points { float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points:before { font-size: 2.5em; top:0.1em; } .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers { margin-left:10px; float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers > span { font-size: 1.5em; font-weight: 700;} /*--- post review erase---*/ .sheet > .tab-cnt.reviews > .cnt > .twocol-span { width:calc(100% - 258px); margin:0; text-align: } .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice { padding:20px; background:#f5f5f5; border: 1px solid #ccc; border-radius:3px; margin-bottom:30px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging { font-weight: 700; font-size: 18px; line-height: 22px; padding:20px 0 20px 20px; margin-bottom:15px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging:before { position:absolute; left:1em; font-size: 2.5em; line-height: 0.9em; color:#ff344b; } .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a { width:49%; margin:0 auto 25px auto; padding:0 10px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a > span { position: absolute; bottom:-30px; left:0; display:block; color:#333; width:100%;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .review-pre { text-align: left; margin-bottom:10px; font-size: 18px; font-weight: 700;} /*--- post review grats---*/ .sheet > .tab-cnt.reviews > .cnt.grats > h2 {text-align: center;} .sheet > .tab-cnt.reviews > .cnt.grats > .grats {width: 90px; height: 90px; font-size: 60px; line-height: 105px;} .sheet > .tab-cnt.reviews > .cnt.grats > .title { font-size: 20px;} /*--- post first review call ---*/ .sheet > .tab-cnt.reviews .first-review-call { font-size: 18px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .sheet > .tab-cnt.reviews > .listing-zone {padding-top: 20px;} .sheet > .tab-cnt.reviews > .listing-zone > .onecol-span { width:226px; margin-right:20px;} .sheet > .tab-cnt.reviews > .listing-zone > .twocol-span { width:calc(100% - 246px); margin:0;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review { float:right; margin-bottom:30px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block { padding:25px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block > .infos { margin-bottom:30px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade { width: 100%;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade { font-size: 36px; margin-top:5px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > span { font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade { margin-top:20px; padding-top:20px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li { width:calc(100% - 30px); margin:10px 0px 10px 30px; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-name { width:90px; padding-right: 5px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-quantity { width:110px; padding-left: 15px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line { margin-top: 5px; width:calc(100% - 200px);} .reviewing-call { margin: 30px auto; height:50px; font-size: 16px;} .reviewing-call > .button { margin-top: 6px; height: 36px; width: 140px; text-align: center; line-height: 33px;} .reviewing-call > .arrow { margin-top: 6px; height: 36px; width: 30px;} .reviewing-call > .calltoaction { width: calc(100% - 180px); line-height: 45px;} .sheet > .tab-cnt.reviews > .listing-zone > .filters { float:left;} .sheet > .tab-cnt.reviews > .listing-zone > .listing { float:right;} /*--- >>> post review---*/ .sheet > .tab-cnt.reviews.review-post > .cnt > .twocol-span > h2 { margin-top:35px;} .sheet > .tab-cnt.reviews.review-post > .cnt > h2 { margin-top:35px;} .sheet > .tab-cnt.reviews > .cnt h2 {margin-top:0px; text-align: left; font-size: 22px; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data { padding: 15px 0 35px 0; text-align: left;} .sheet > .tab-cnt.reviews > .cnt .data > .title { float:left; width:200px; height:100%; font-size: 18px; text-align: right;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs { float:left; width:calc(100% - 200px); padding: 0 30px;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .line-tabs { margin: 0 0 25px 0; } .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li { margin: 0 0 15px 0;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .proof { float:left; } .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pictures-list {margin-bottom:20px;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pic-upld {width:120px; height:120px; float:left;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld { float:left;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld > .pic-add > .add { height:80px; padding: 0 10px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date { float:left; padding-left:20px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date > div { margin-bottom: 10px; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .promo-ok-cb { float:left; margin: 1em auto;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .input-cnt { float:left;} .sheet > .tab-cnt.reviews > .cnt .data.pictures > .inputs .pic-upld > .pic-add > .add { height:40px;} .sheet > .tab-cnt.reviews > .cnt .val { float:left; margin-left:200px; padding:0 0 30px 30px; text-align: left;} .sheet > .tab-cnt.reviews > .cnt .val > button { float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts { float:left; margin-left:30px; color: #ff344b;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points { float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points:before { font-size: 2.5em; top:0.1em; } .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers { margin-left:10px; float:left;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers > span { font-size: 1.5em; font-weight: 700;} /*--- post review erase---*/ .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice {padding:20px; background:#f5f5f5; border: 1px solid #ccc; border-radius:3px; margin-bottom:30px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging { font-weight: 700; font-size: 20px; line-height: 30px; padding:100px 0 5px 0; margin-bottom:20px; border-radius:3px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging:before { position:absolute; left:calc(50% - 0.5em); top:20px; font-size: 4em; line-height: 0.9em; color:#ff344b;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a { width:49%; margin:0 auto 35px auto; padding:0 5px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a > span { position: absolute; bottom:-30px; left:0; display:block; color:#333; width:100%;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .review-pre { text-align: left; margin-bottom:10px; font-size: 18px; font-weight: 700;} /*--- post review grats---*/ .sheet > .tab-cnt.reviews > .cnt.grats > h2 {text-align: center;} .sheet > .tab-cnt.reviews > .cnt.grats > .grats { width: 90px; height: 90px; font-size: 60px; line-height: 105px;} .sheet > .tab-cnt.reviews > .cnt.grats > .title { font-size: 20px;} /*--- post first review call ---*/ .sheet > .tab-cnt.reviews .first-review-call { font-size: 18px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .sheet > .tab-cnt.reviews > .listing-zone {padding-top: 20px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review { margin-bottom:0px; text-align: left;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > h2 { display:none;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block { padding:20px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review > .globale-grades > .grade-block > .infos { font-size: 14px; margin: auto auto 1em auto;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade { font-size: 36px; margin-top:5px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > .grade-logos { display:none; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .main-grade > span { font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade { margin-top:20px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li { margin:10px 0px 10px 0px; } .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-name { width:90px; padding-right: 5px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-quantity { width:90px; padding-left: 10px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line { margin-top: 5px; width:calc(100% - 180px);} .reviewing-call { margin: 30px auto; height:50px; font-size: 16px;} .reviewing-call > .button { margin-top: 6px; padding-left:10px; height: 36px; width: 140px; line-height: 33px;} .reviewing-call > .arrow { margin-top: 6px; height: 36px; width: 30px; border-width: 18px 0 18px 14px;} .reviewing-call > .calltoaction { height: calc(100% - 10px); width: calc(100% - 180px); margin: 5px auto; line-height: 18px;} .reviewing-call > .calltoaction > span:before {content: "\A"; white-space: pre; } .sheet > .tab-cnt.reviews .filters .my-tags { border-bottom:1px solid #d5dce0;} .sheet > .tab-cnt.reviews .filters .my-tags h2 { margin: 0 -10px 0em -10px; width:calc(100% + 20px);} .sheet > .tab-cnt.reviews .filters .my-tags > ul {margin: 0 -10px 0em -10px; width:calc(100% + 20px);} .sheet > .tab-cnt.reviews .filters .my-tags a.iconafter-crossbold {background-color: #f5f5f5;} .sheet > .tab-cnt.reviews .filter-list h2{ margin-top:0;} /*--- >>> post review---*/ .sheet > .tab-cnt.reviews.review-post > .cnt > .twocol-span > h2 { margin-top:25px;} .sheet > .tab-cnt.reviews > .cnt > h2 {margin-top:25px; text-align: left; font-size: 18px; font-weight: 700; text-align: center; line-height: 1.4em;} .sheet > .tab-cnt.reviews > .cnt .data { padding: 5px 0 15px 0; text-align: center; font-size: 14px;} .sheet > .tab-cnt.reviews > .cnt .data > .title { margin-bottom:15px;text-align: center; font-size: 16px; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .line-tabs { text-align: center;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > *:not(.line-tabs):not(.pictures-list) {max-width:360px; margin-left: auto; margin-right: auto;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs > .grade-choice > li { margin: 0 0 10px 0;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .proof { margin:auto;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pictures-list {margin-bottom:20px;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .pic-upld {width:100px; height:100px; display:inline-block;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld { display:inline-block;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs .pic-upld > .pic-add > .add { height:80px; padding: 0 10px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date { margin:auto; max-width: 320px;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .date > div { margin: 5px auto; font-weight: 700;} .sheet > .tab-cnt.reviews > .cnt .data.meal-origin > .inputs > .promo-ok-cb { margin: 1em auto;} .sheet > .tab-cnt.reviews > .cnt .data > .inputs .input-cnt { width:100%; text-align: center;} .sheet > .tab-cnt.reviews > .cnt .data.pictures > .inputs .pic-upld { display:inline-block; vertical-align: top;} .sheet > .tab-cnt.reviews > .cnt .data.pictures > .inputs .pic-upld > .pic-add > .add { height:40px;} .sheet > .tab-cnt.reviews > .cnt .val { padding:0 0 30px 0; text-align: center;} .sheet > .tab-cnt.reviews > .cnt .val > .pts { margin-top:20px; color: #ff344b;} .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points { } .sheet > .tab-cnt.reviews > .cnt .val > .pts > .icon-points:before { font-size: 2.5em; top:0.1em; } .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers { margin-top:10px; } .sheet > .tab-cnt.reviews > .cnt .val > .pts > .pts-numbers > span { font-size: 1.5em; font-weight: 700;} /*--- >>> post review erase---*/ .sheet > .tab-cnt.reviews > .cnt > .twocol-span > h2 { font-size: 18px; text-align: left;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice {padding:20px; background:#f5f5f5; border: 1px solid #ccc; border-radius:3px; margin-bottom:30px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging { font-weight: 700; font-size: 16px; line-height: 22px; padding:70px 0 20px 0; margin-bottom:20px; border-radius:3px;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > .icon-warnninging:before { position:absolute; left:calc(50% - 0.5em); top:20px; font-size: 3em; line-height: 0.9em; color:#ff344b;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a { float:left; width:100%; margin:0 0 40px 0; padding:0 0px; } .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .erase-choice > a > span { position: absolute; bottom:-30px; left:0; display:block; color:#333; width:100%;} .sheet > .tab-cnt.reviews > .cnt > .twocol-span > .review-pre { text-align: left; margin-bottom:10px; font-size: 18px; font-weight: 700;} /*--- post review grats---*/ .sheet > .tab-cnt.reviews > .cnt.grats > h2 {text-align: center;} .sheet > .tab-cnt.reviews > .cnt.grats > .grats {width: 70px; height: 70px; font-size: 45px; line-height: 80px;} .sheet > .tab-cnt.reviews > .cnt.grats > .title { font-size: 16px;} /*--- post first review call ---*/ .sheet > .tab-cnt.reviews .first-review-call { font-size: 14px;} } @media screen and (min-width: 750px) and (max-width: 845px){ .reviewing-call > .calltoaction { height: calc(100% - 10px); width: calc(100% - 180px); margin: 5px auto; line-height: 18px; } .reviewing-call > .calltoaction > span:before {content: "\A"; white-space: pre; } } @media screen and (min-width: 0px) and (max-width: 410px){ .reviewing-call {margin: 20px auto; height:67px; font-size: 14px;} .reviewing-call > .button { padding-left:7px; margin-top:10px; padding-top: 7px; height: 45px; width: 70px; text-align: left; line-height: 15px; } .reviewing-call > .button > span:before {content: "\A"; white-space: pre; } .reviewing-call > .arrow { margin-top: 10px; height: 45px; width: 30px;border-width: 22px 0 22px 14px;} .reviewing-call > .calltoaction { height: calc(100% - 20px); width: calc(100% - 100px); margin-top:10px;line-height: 21px; font-size: 14px;} } @media screen and (min-width: 0px) and (max-width: 380px){ .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-name { width:75px; font-size: 14px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-quantity { width:70px; padding-left: 5px; font-size: 12px; line-height:16px;} .sheet > .tab-cnt.reviews > .listing-zone > .globale-review .detail-grade li .grade-line { margin-top: 5px; width:calc(100% - 145px); } } /*--------- >>> carte ----------------------------------------------------------*/ @media screen and (min-width:0px){ /*left side menu*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category { text-align: left;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li { transition:0.3s;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:hover { color: #666; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li.active > a { color: #ff344b; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li a { text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:not(.active) > ul { } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li { color: #333;} /*help*/ .sheet > .tab-cnt.menu .menu-interface .help-phone { display: block; text-decoration: none; padding: 12px; margin: 30px 0 0px 0; background: #f5f5f5; border:1px solid #d5dce0; border-radius: 3px; cursor: pointer;} .sheet > .tab-cnt.menu .menu-interface .help-phone > .icon-sav { margin-bottom: 15px; font-size: 20px; font-weight: 700; } .sheet > .tab-cnt.menu .menu-interface .help-phone > .icon-sav:before { font-size: 30px; bottom:-5px; margin-right:8px;} .sheet > .tab-cnt.menu .menu-interface .help-phone > .icon-phone { margin-bottom: 10px; font-size: 18px; font-weight: 700;} .sheet > .tab-cnt.menu .menu-interface .help-phone > .icon-phone:before { font-size: 20px; bottom:-3px; margin-right:5px;} /* menu complete */ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) > img { width:100%;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) > .shadow { position: absolute; top:0; height: 100%; width: 100%; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#8c000000',GradientType=0 ); /* IE6-9 */} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) > .title { width:100%; position:absolute; top: 50%; transform: translateY(-40%); } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) > .title > h3 { color:white; padding:0 3em; margin:0; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) > .title > p { margin-top:0; color:white; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next { position: absolute; top:50% ; color: white; font-size: 45px; text-decoration: none; transform: translateY(-40%) scale(1); transition:0.2s;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before:hover , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next:hover { transform: translateY(-40%) scale(1.15);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic { height:auto; background:#f5f5f5; text-shadow: 0 0 2px rgba(255, 255, 255, 0); border-bottom: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .shadow {display:none;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .title {position:relative; bottom:auto; top:auto; padding:0.5em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .title > h3 { color:#ff344b; margin: 0.2em auto 0.2em auto; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .title > p { color:#333; margin:0.2em auto 0.5em auto; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .before , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic > .next { position:absolute; color: #999;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section:first-of-type > .dish-banner > .before { display:none; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section:last-of-type > .dish-banner > .next { display:none; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title { text-align: left; margin: 1em 0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > img { float:left;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > h4 {margin-top:0; margin-bottom:0; line-height: 0.4em; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > p {margin-bottom: 0; margin-top:0.8em; color: #999; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > p.red { color:#ff344b; margin:0.5em 0 0.5em 0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var { text-align: left; padding: 10px 0; border-bottom:1px solid #d5dce0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats {border-bottom: 0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.can-order:hover { background: #f5f5f5; cursor:pointer;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats:hover { background: white; cursor:default;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > img { float:left;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { float:left;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > .code-space { float: left; margin-right: 5px; margin-top: 0.35em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > .code-space > .code { padding: 2px 3px; background:#e6e6e6; color: #333; font-size: 12px; border-radius: 3px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > h5 { width:auto; display:inline-block; margin-top:0.35em; margin-bottom:0px; margin-right:5px; font-size: 14px; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > p { margin-top:0.8em; margin-bottom:0; font-size: 12px; color: #999; line-height: 1.4em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > p.red { color:#ff344b; margin:0.5em 0 0.5em 0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats { margin-top:0px; text-align: left; padding:5px 0px 5px 10px; border-top:1px solid #d5dce0; cursor:pointer;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.can-order:hover { background:#f5f5f5;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { float:left; padding-right: 10px; min-height: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos > h6 { width:auto; display:inline-block; font-size: 14px; margin:0; margin-right:5px; line-height:27px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos > p { margin-bottom: 10px; font-size: 12px; color: #999;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos > p.red { color:#ff344b; margin:0.5em 0 0.5em 0;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions { float:right; padding-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .price { float:right; line-height:27px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .add { float:right; opacity:1; width:29px; height:27px; padding-top:3px; margin-left:10px; margin-top:0.1em; text-align: center; color:white; font-size: 18px; font-weight: 700; border-radius:3px; cursor:pointer; transition:0.2s;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .add.time-limit {padding-top: 1px} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .add.time-limit:before { content:'\e92f'; margin:auto; font-size: 18px; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .post-meal-var-formats-list {border-top:1px solid #d5dce0; } /* disable state */ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .icon-time { display:inline-block; font-size: 13px; padding:0.2em 0.3em; background:#ff344b; color: white; border-radius:3px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .icon-time:before { margin-right:0.3em; bottom:-0.02em; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable { cursor: default; background:white;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .add, .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .add {display:none;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .infos , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .infos, .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .price , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .price{color:#ccc;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .price:after , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .price:after{content:"\e939"; color:#ff344b; display:inline-block; width:29px; margin-left:10px; text-align: center; font-family: '123cacher'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} /*right side blocks*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .action-recall { padding: 15px; margin-bottom: 10px; background:#f5f5f5; border: 1px solid #d5dce0; border-radius:3px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .action-recall div { font-size:20px; margin-bottom:15px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .action-recall a { padding: 0 3px 0 10px; margin-bottom:4px; width:190px; text-align: left; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .action-recall a:before { font-size: 20px; bottom:-4px; margin-right:8px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block { padding:20px; margin-bottom:10px; border: 1px solid #d5dce0; border-radius: 3px; text-align: center; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > a {text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > .grade-name { font-weight: 700; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > a > .grade { font-size: 36px; font-weight: 700; line-height: 0.9em; margin-top:5px; color: #ff344b; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > a > .grade > span { font-size: 0.65em; margin-left: 0.15em;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > a > .grade-logos { display:none; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .main-grade > a > span { font-size: 14px; font-weight: 700; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade {margin-top:20px; padding-top:10px; border-top:1px solid #d5dce0; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade li { width: 100%; margin:10px 0px 10px 0px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade li .grade-name { float:left; width:65px; padding-right: 2px; text-align: left; font-size: 12px; font-weight: 700;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade li .grade-quantity { float:left; width:70px; padding-left: 5px; text-align: left; font-size: 12px; font-weight: 700;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade li .grade-line { float:left; margin-top: 5px; width:calc(100% - 135px); background: #f5f5f5;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block .detail-grade li .grade-line > .valor { height:8px; background: #ff334b;} /*rightside basket*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress { background: #f5f5f5;padding: 10px; margin-bottom:10px; border: 1px solid #d5dce0; border-radius: 0 0 3px 3px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .btn-red-med { padding-left: 10px; padding-right: 10px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .warnning { padding:5px; margin-bottom:10px; background: #fff8bf; font-size: 14px; color: #f88701; border-radius: 3px;} /* basket */ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > .btn-edit-med { height: auto; line-height: 1.3em; padding: 0.2em 20px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > .btn-edit-med > span { display: block;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > a { float: left; display:block; width: 100%; color: #128ee9; font-size: 14px; margin-top: 1em;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > a:hover { color: #43a6ef;} .sheet > .tab-cnt.menu .empty-basket {color:#999;} .sheet > .tab-cnt.menu .basket-list > li { z-index:1; cursor: pointer;} .sheet > .tab-cnt.menu .basket-list > li > .dish { text-decoration: none;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name { float:left; } .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name > .quantity { float:left; width: 25px; color: #999; margin-right: 2px;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .price { float:left; width:50px; text-align: right;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .quantity { float:left; color: #999;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .options { float:left; color: #999; margin-top:5px; width:100%;} .sheet > .tab-cnt.menu .basket-list > li > .dish .options.niv2 { padding-left: 1em;} .sheet > .tab-cnt.menu .basket-list > li > .dish .options.niv2:before { content:'- '; } .sheet > .tab-cnt.menu .basket-list > li > .dish .options.niv3 { font-size: 0.8em; padding-left: 2.5em;} .sheet > .tab-cnt.menu .basket-list > li > .dish .options.niv3:before { content:'- '; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier { background: white; border: 1px solid #d5dce0; border-radius: 3px; text-align: center;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > div { z-index: 3; cursor:pointer; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > div:hover { color: #ff344b;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more { font-size: 22px;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less { font-size: 30px;} .sheet > .tab-cnt.menu .basket-list > li > .cancel { text-align: center; font-size: 10px; cursor:pointer;} .sheet > .tab-cnt.menu .basket-list > li > .cancel:hover { color: #ff344b;} .sheet > .tab-cnt.menu .basket-list > li:hover { background: #eaeaea;} .sheet > .tab-cnt.menu .basket-list > li:hover > .dish > .dish-name { color: #ff344b;} .sheet > .tab-cnt.menu .sub-total { padding: 5px 10px; border-bottom: 1px solid #d5dce0; border-top: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .sub-total > li { margin: 5px 0; font-size: 14px; font-weight: 700; } .sheet > .tab-cnt.menu .sub-total > li > .name { float: left; width: calc(100% - 70px); text-align: left;} .sheet > .tab-cnt.menu .sub-total > li > .valor { float: left; width: 70px; text-align: right; } .sheet > .tab-cnt.menu .sub-total > .promo { color:#ff344b; padding-top: 5px; padding-bottom: 5px;} .sheet > .tab-cnt.menu .sub-total > .min-order { color:#128ee9; text-align: left; font-weight: 400; padding-top: 5px; padding-bottom: 5px;} .sheet > .tab-cnt.menu .total { padding: 15px 10px; font-size: 22px; font-weight: 700; } .sheet > .tab-cnt.menu .total > li > .name { float: left; width: calc(100% - 120px); text-align: left;} .sheet > .tab-cnt.menu .total > li > .valor { float: left; width: 120px; text-align: right; } .sheet > .tab-cnt.menu .pts {margin-top: 15px;} .sheet > .tab-cnt.menu .pts > .icon-points { font-size: 40px; color: #ff344b; } .sheet > .tab-cnt.menu .pts > .pts-numbers { font-size: 14px; color: #ff344b; } .sheet > .tab-cnt.menu .pts > .pts-numbers > span { font-size: 24px; color: #ff344b; } /* basket disabled state */ .sheet > .tab-cnt.menu .basket-list > li.disabled .dish { min-height: 5.5em;} .sheet > .tab-cnt.menu .basket-list > li.disabled .dish-name { opacity:0.8;} .sheet > .tab-cnt.menu .basket-list > li.disabled .price { opacity:0.4;} .sheet > .tab-cnt.menu .basket-list > li.disabled .options { opacity:0.4;} .sheet > .tab-cnt.menu .basket-list > li.disabled .cancel { z-index:10;} .sheet > .tab-cnt.menu .basket-list > li.disabled .quantity-modifier { opacity:0.5; cursor: default;} .sheet > .tab-cnt.menu .basket-list > li.disabled .disable-layer { position:absolute; top:0; left:0; width:100%; height:100%; text-align: center; font-weight: 700; background:rgba(255, 52, 75,0.1); border-top:1px solid rgba(255, 52, 75,0.4); border-bottom:1px solid rgba(255, 52, 75,0.4);} .sheet > .tab-cnt.menu .basket-list > li.disabled .disable-layer .disable-msg {background: rgba(255,255,255,9); box-shadow: 0 0 8px 1px rgba(255, 52, 75,0.1); border-radius: 3px; margin:1.8em 10px 0 10px; padding:0.8em 0.2em;} .sheet > .tab-cnt.menu .basket-list > li.disabled .disable-layer p {margin: 0 auto 0em auto; } .sheet > .tab-cnt.menu .basket-list > li.disabled:hover { background: none;} .sheet > .tab-cnt.menu .basket-list > li.disabled:hover .disable-layer { background:rgba(255, 52, 75,0.2); border-top:1px solid rgba(255, 52, 75,0.6); border-bottom:1px solid rgba(255, 52, 75,1);} .sheet > .tab-cnt.menu .basket-list > li.disabled:hover > .dish > .dish-name { color: #333;} } @media screen and (min-width: 1000px){ .sheet > .tab-cnt.menu .menu-interface { margin-top:30px;} .sheet > .tab-cnt.menu .menu-interface > .onecol-span.right-menu { right:0; width:226px; width:272px; } .sheet > .tab-cnt.menu .menu-interface > .onecol-span.right-menu:not(.is-fixed) { float:right } .sheet > .tab-cnt.menu .menu-interface > .onecol-span.right-menu.is-fixed { right:calc(((100% - 1000px)/2));} .sheet > .tab-cnt.menu .menu-interface > .onecol-span.left-menu { width:226px; width:200px; margin-right:240px; } .sheet > .tab-cnt.menu .menu-interface > .onecol-span.left-menu:not(.is-fixed) { float:left; } .sheet > .tab-cnt.menu .menu-interface > .twocol-span { float: left; width:calc(100% - 512px); margin:0 30px; margin:0 20px; } /*left side menu*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile {display:none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category { padding: 20px 12px; background: #f5f5f5; border-radius: 3px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > .btn-mobile {display:none; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li { padding-bottom: 10px; font-size: 14px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:last-of-type { padding-bottom: 0px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li { padding-bottom: 5px; padding-left:15px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li:first-of-type { padding-top: 10px; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li a > .number { display:none;} /*help phone*/ /* menu complete */ .sheet > .tab-cnt.menu .menu-interface > .menu {margin-left:220px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) { margin-top: 30px; width:100%; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic { margin-top: 30px; height:auto; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section:first-of-type > .dish-banner {margin-top: 0px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > h3 { margin-bottom: 5px; font-size: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > p { font-size: 16px; max-width:320px; margin-right:auto;margin-left:auto;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before { left: 10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next { right: 10px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title { margin-top: 30px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > img { width:75px; margin-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos { float:left ; padding-right: 10px; width:calc(100% - 85px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > h4 { font-size: 24px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > p { font-size: 12px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > img { width:75px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { margin-left:10px; width:calc(100% - 195px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats { width:calc(100% - 85px); margin-left:85px; padding:5px 0px 5px 10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { padding-right: 10px; width:calc(100% - 125px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions { width:125px; padding-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .price { line-height:27px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .add { background: #ff334b;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { width:calc(100% - 210px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats > .infos { width:calc(100% - 85px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.no-pic > .infos { width:calc(100% - 135px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats.no-pic > .infos { width:calc(100%);} /*disable state*/ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .disable-text { font-size: 14px; line-height:18px; margin-top:-3px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .disable-text { font-size: 14px; line-height:18px; margin-top:6px;} /*rightside basket title */ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-mobile-title { display:none;} /*rightside basket*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile {display:none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs { z-index:1;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul {margin-bottom:-1px; display:table; table-layout: fixed; width:100%; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li { display:table-cell;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li > a { padding:5px; display:block; text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active { background: #f5f5f5; border: 1px solid #d5dce0; border-top:2px solid #ff344b; border-bottom:1px solid #f5f5f5; border-radius: 3px 3px 0 0;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active a:hover { color: #333; cursor:default;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress { background: #f5f5f5;padding: 10px; margin-bottom:10px; border: 1px solid #d5dce0; border-radius: 0 0 3px 3px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .btn-red-med { padding-left: 10px; padding-right: 10px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .warnning { padding:5px; margin-bottom:10px; background: #fff8bf; font-size: 14px; color: #f88701; border-radius: 3px;} /* basket */ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket { padding: 10px; padding-bottom: 20px; background: #f5f5f5; border: 1px solid #d5dce0; border-radius: 0 0 3px 3px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > select { padding: 0 18px 0 5px!important; margin-bottom: 10px; width:102px; float:left; font-size: 13px;} .sheet > .tab-cnt.menu .basket-list > li { padding: 6px 20px; margin: 5px -10px; font-size: 14px; text-align: left; line-height: 1.2em;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name { width: calc(100% - 50px); } .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name > .quantity { width: 25px; color: #999; margin-right: 2px;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier { position: absolute; top: -2px; left:-10px; width:20px; background: white; border: 1px solid #d5dce0; border-radius: 3px; font-weight: 400; text-align: center;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier:before { content:""; z-index: -1; position: absolute; right:-7px; top:9px; display:block; width:15px; height:15px; transform: scaleY(0.8) rotate(45deg) ; background: white; border: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier:after { content:""; z-index: 1; position: absolute; right:-5px; top:9px; display:block; width:15px; height:15px; transform: scaleY(0.8) rotate(45deg) ; background: white; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more, .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less { z-index: 3; height:17px; cursor:pointer; margin:0; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more {z-index: 4;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more > div, .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less > div { position:absolute; transform: translateY(-50%); width:100%; margin:auto;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more > div{ top:45%; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less > div{ top:35%; } .sheet > .tab-cnt.menu .basket-list > li > .cancel { position: absolute; padding: 5px 0; top: 2px; right:0px; width: 20px; font-size: 10px;} .sheet > .tab-cnt.menu .basket-list > li:not(:hover) > .quantity-modifier { display: none;} .sheet > .tab-cnt.menu .basket-list > li:not(:hover) > .cancel { display: none;} /* basket disabled state */ .sheet > .tab-cnt.menu .basket-list > li.disabled .quantity-modifier { display:none;} } @media screen and (min-width: 750px) and (max-width: 999px){ .sheet > .tab-cnt.menu .menu-interface { margin-top:30px;} .sheet > .tab-cnt.menu .menu-interface > .onecol-span.right-menu { position:absolute; right:0; width:256px;} .sheet > .tab-cnt.menu .menu-interface > .onecol-span.right-menu.is-fixed { right:20px;} .sheet > .tab-cnt.menu .menu-interface > .twocol-span { float: left; width:calc(100% - 276px); margin:0 20px 0 0;} /*left side menu*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu { position:fixed; z-index:10; left: -226px; top: 50px; width:226px; height:calc(100% - 50px); transition:0.3s;} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active { left:0;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category { height:100%; padding: 20px 12px; overflow-y:scroll; text-align: left; background: #f5f5f5; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0);} .sheet > .tab-cnt.menu .menu-interface > .left-menu.active > .menu-category { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile { z-index: 8; position:absolute; right:-100px; bottom:0; width:100px; height:100px; background: #ff344b; color: white; line-height: 30px; cursor: pointer; border-radius: 0 40px 0px 0; box-shadow: 3px 0 8px 1px rgba(0, 0, 0, 0.3);} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .btn-mobile:before { color: white; font-size: 60px; top:0.20em; margin:auto;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li { padding-bottom: 15px; font-size: 20px; transition:0.3s;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:last-of-type { padding-bottom: 0px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:hover { color: #666; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li.active > a { color: #ff344b; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li a { text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:not(.active) > ul { } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li { padding-bottom: 5px; padding-left: 15px; color: #333;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li:first-of-type { padding-top: 10px; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li a > .number { display:none;} /*help*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu > .help-phone { display:none;} /* menu complete */ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) { margin-top: 30px; width:100%; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic { margin-top: 30px; height:auto; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section:first-of-type > .dish-banner {margin-top: 0px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > h3 { margin-bottom: 5px; font-size: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > p { font-size: 16px; max-width:320px; margin-right:auto;margin-left:auto;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before { left: 10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next { right: 10px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title { margin-top: 30px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > img { width:75px; margin-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos { float:left ; padding-right: 10px; width:calc(100% - 85px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > h4 { font-size: 24px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > p { font-size: 12px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > img { width:75px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { margin-left:10px; width:calc(100% - 195px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats { width:calc(100% - 85px); margin-left:85px; padding:5px 0px 5px 10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { padding-right: 10px; width:calc(100% - 125px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions { width:125px; padding-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .price { line-height:27px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .actions > .add { background: #ff334b;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { width:calc(100% - 210px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats > .infos { width:calc(100% - 85px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.no-pic > .infos { width:calc(100% - 135px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats.no-pic > .infos { width:calc(100%);} /*disable state*/ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .disable-text { font-size: 14px; line-height:18px; margin-top:-3px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .disable-text { font-size: 14px; line-height:18px; margin-top:6px;} /*rightside basket title */ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-mobile-title { display:none;} /*rightside basket*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .btn-mobile {display:none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs { z-index:1;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul {margin-bottom:-1px; display:table; table-layout: fixed; width:100%; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li { display:table-cell;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li > a { padding:5px; display:block; text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active { background: #f5f5f5; border: 1px solid #d5dce0; border-top:2px solid #ff344b; border-bottom:1px solid #f5f5f5; border-radius: 3px 3px 0 0;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active a:hover { color: #333; cursor:default;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress { background: #f5f5f5;padding: 10px; margin-bottom:10px; border: 1px solid #d5dce0; border-radius: 0 0 3px 3px; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .btn-red-med { padding-left: 10px; padding-right: 10px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress .warnning { padding:5px; margin-bottom:10px; background: #fff8bf; font-size: 14px; color: #f88701; border-radius: 3px;} /* basket */ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket { padding: 10px; padding-bottom: 20px; background: #f5f5f5; border: 1px solid #d5dce0; border-radius: 0 0 3px 3px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > select { padding: 0 18px 0 5px!important; margin-bottom: 10px; width:102px; float:left; font-size: 14px;} @-moz-document url-prefix() { .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > select { font-size:13px;} } .sheet > .tab-cnt.menu .basket-list > li { padding: 6px 20px; margin: 20px -10px; font-size: 14px; text-align: left; line-height: 1.2em;} .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name { width: calc(100% - 50px); } .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name > .quantity { width: 25px; color: #999; margin-right: 2px;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier { position: absolute; top: -7px; left:-15px; width:28px; background: white; border: 1px solid #d5dce0; border-radius: 3px; font-weight: 400; text-align: center;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier:before { content:""; z-index: -1; position: absolute; right:-5px; top:13px; display:block; width:15px; height:15px; transform: scaleY(0.8) rotate(45deg) ; background: white; border: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier:after { content:""; z-index: 1; position: absolute; right:-3px; top:13px; display:block; width:15px; height:15px; transform: scaleY(0.8) rotate(45deg) ; background: white; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more, .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less { z-index: 3; height: 22px; height:20px; cursor:pointer; margin:0; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more {z-index: 4;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more > div, .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less > div { position:absolute; transform: translateY(-50%); width:100%; margin:auto;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more > div{ top:45%; } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less > div{ top:35%; } .sheet > .tab-cnt.menu .basket-list > li > .cancel { position: absolute; padding: 10px 0 10px 0; top: -4px; right:-4px; width: 25px; font-size: 10px;} /* basket disabled state */ .sheet > .tab-cnt.menu .basket-list > li.disabled .quantity-modifier { display:none;} } @media screen and (min-width: 0px) and (max-width: 749px){ .sheet > .tab-cnt.menu .menu-interface { margin-top:15px;} .sheet > .tab-cnt.menu .menu-interface > .onecol-span { float: left; width:100%;} .sheet > .tab-cnt.menu .menu-interface > .twocol-span { float: left; width:100%;} /*left side menu---------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category { width:100%; overflow-y:scroll; text-align: left; background: #f5f5f5; transition: 0.3s;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul { margin: 0 0; background: white;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:first-child { border-top: 1px solid #d5dce0; } .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li { min-height: 50px; width:100%; font-size: 19px; line-height: 50px; border-bottom: 1px solid #d5dce0; transition:0.3s;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > a { display:block; padding: 0 14px; color: #ff344b; width: 100%; height: 100%; text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > a:after { position:absolute; right:8px; top:calc(50% - 10px); content:"\e912"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:not(.active) > a:after { content:"\e90f";} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li.empty > a:after { content:"";} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul { background: #f5f5f5;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li:not(.active) > ul { display:none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li { height: 35px; font-size: 17px; font-weight: 400; line-height: 32px; border-top: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li > a { display: block; height: 35px; width: 100%; padding: 0 15px; text-decoration: none;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li a > .number { display:inline-block; font-size: 0.8em; color:#999; position:absolute; text-align: center; width:30px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > a > .number { right:35px;} .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li.empty > a > .number, .sheet > .tab-cnt.menu .menu-interface > .left-menu > .menu-category > ul > li > ul > li > a > .number { right:3px;} /*help-------------------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .left-menu > .help-phone { display:none;} /* menu complete --------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner:not(.no-pic) { margin: 30px -10px 0 -10px; text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); width: calc(100% + 20px); } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner.no-pic { margin: 30px -10px 0 -10px; height:auto; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section:first-of-type > .dish-banner {margin-top: 0px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > img { width:100%;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > h3 { margin-bottom: 1px; font-size: 22px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .title > p { font-size: 16px; padding:0 2.5em;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before , .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next { font-size: 40px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .before { left: 0px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section > .dish-banner > .next { right: 0px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title { margin-top: 20px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > img { float:left ; width:60px; margin-right:10px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos {float:left ; width:calc(100% - 70px;); font-size: 24px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > h4 { font-size: 24px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-title > .infos > p { font-size: 12px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > img { width:60px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { padding-left: 10px; padding-bottom: 10px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > .code-space { margin-right: 5px; top: -2px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > h5 { font-size: 14px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos > p { font-size: 12px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats { width:calc(100% - 60px); margin-left:60px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { float:left; padding-right: 10px; width:calc(95% - 90px); min-height: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos > h6 { font-size: 14px; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .actions > .add { display: block; background: #ff334b;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .actions { width:calc(5% + 90px); } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .actions > .price { font-weight: 700; line-height: 1.5em; } .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .actions > .add{ display:block; padding-top:3px; margin-left:10px; background: #ff334b;} /*disable state----------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .add, .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .add {display:none;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.disable .disable-text { font-size: 11px; line-height:15px; font-weight: 400; margin-top:-3px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats.disable .disable-text { font-size: 11px; line-height:15px; margin-top:6px;} /*right side blocks----------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .action-recall { display: none;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .grade-block { display: none;} /*rightside basket title-----------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket {width:100%;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-mobile-title > .icon-back{ position:absolute; left:10px; top:calc(50% - 15px); font-size: 25px; cursor:pointer;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-mobile-title > h2 { margin-top:15px; } /*rightside basket tabs------------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul { display:table; text-align: center; margin:15px auto; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li { display:table-cell; background: #f5f5f5; border: 1px solid #d5dce0; border-right:0; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li:nth-of-type(1) { border-radius: 5px 0 0 5px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li:last-of-type { border-radius: 0 5px 5px 0; border-right: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li > a { display:block; width:100%; height:100%; padding: 5px 15px 5px 15px; color: #999; text-decoration: none; transition:0.3s;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active { background: #666; border: 0; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2); } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li.active a{ color: white; } .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-tabs > ul > li:not(.active) a:hover {color:#333; background:#eee;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-adress { display: none;} /*basket---------------------------------------------------------------------------------------*/ .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket { padding: 10px; padding-bottom: 100px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > select { padding: 0 18px 0 5px!important; margin-bottom: 10px; width:120px;} .sheet > .tab-cnt.menu .menu-interface > .right-menu > .all-basket > .basket-basket > .change-param > select:first-of-type { margin-right: 4%;} .sheet > .tab-cnt.menu .basket-list > li { padding: 6px 5px; margin: 5px -15px 5px -5px; font-size: 14px; text-align: left; line-height: 1.2em;} .sheet > .tab-cnt.menu .basket-list > li > .dish { float: left; width:calc(100% - 90px);} .sheet > .tab-cnt.menu .basket-list > li > .dish > .dish-name { width: calc(100% - 50px); } .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier { float: left; width:50px; top:-3px; margin-right: 10px;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > div { float:right; height: 20px; width: 24px;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .more { line-height: calc(20px - 0.135em); font-size: 22px;border-left: 1px solid #d5dce0;} .sheet > .tab-cnt.menu .basket-list > li > .quantity-modifier > .less { line-height: calc(20px - 0.19em);} .sheet > .tab-cnt.menu .basket-list > li > .cancel { float:left; padding: 7px 0; top: -6px; width: 30px;} .sheet > .tab-cnt.menu .basket-basket > .order > a{ width:100%; max-width: 360px; height: 45px; font-size: 20px; margin:15px auto;} .sheet > .tab-cnt.menu .pts {margin-top: 15px;} .sheet > .tab-cnt.menu .pts > .icon-points { font-size: 50px;} /* basket disabled state */ .sheet > .tab-cnt.menu .basket-list > li.disabled .quantity-modifier { opacity:0.2;} /*add-adress*/ .sheet > .tab-cnt.menu .val-fix { z-index: 10 ;position: fixed; bottom:0; left:0; width:100%; background: #f5f5f5; height:75px; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);} .sheet > .tab-cnt.menu .val-fix a { top:50%; transform: translateY(-50%);} } @media screen and (min-width: 351px) and (max-width: 749px){ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .actions { width:125px; font-weight:700;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { width:calc(100% - 185px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats > .infos { width:calc(100% - 60px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.no-pic > .infos { width:calc(100% - 125px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats.no-pic > .infos { width:calc(100%);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { width:calc(95% - 105px); min-height: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .actions { width:calc(5% + 105px); min-height: 30px;} } @media screen and (min-width: 0px) and (max-width: 350px){ .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .actions { width:100%; font-weight:700;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var > .infos { width:calc(100% - 70px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats > .infos { width:calc(95% - 60px);} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.no-pic > .infos { width:100%;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var.contain-formats.no-pic > .infos { width:100%;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats { width:calc(100% - 30px); margin-left:30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .infos { width:calc(95% - 105px); min-height: 30px;} .sheet > .tab-cnt.menu .menu-interface > .menu > .menu-section .meal-var-formats .actions { width:calc(5% + 105px); min-height: 30px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*--------- Page Tops ---------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-tops h1 {text-align: left;} .page-tops .tops > ul { z-index: 1; text-align: center; margin-bottom: -3px;} .page-tops .tops > ul > li { padding:10px; height:42px; cursor: pointer;} .page-tops .tops > ul > li.active { background: white; border: 1px solid #d5dce0; border-top: 2px solid #ff344b; border-bottom: 1px solid white; border-radius: 3px 3px 0 0;} .page-tops .tops > ul > li > a { text-decoration: none;} .page-tops .tops-list { background: white; border-top: 1px solid #d5dce0;} .page-tops .tops-list > .tab-1:not(.active), .page-tops .tops-list > .tab-2:not(.active), .page-tops .tops-list > .tab-3:not(.active) {display:none;} .page-tops .tops-list > ul > li {float:left;} .page-tops .tops-list > ul > li.more { float:left;width:100%;} .page-tops .tops-list > ul > li.resto { border: 1px solid #d5dce0; border-radius:3px;} .page-tops .tops-list > ul > li.resto > a{ width:100%;} .page-tops .tops-list > ul > li.resto > a > img{ width:100%;} .page-tops .tops-list > ul > li.resto .rank { position: absolute; z-index:5; left:0; right:0; margin:auto; background: #ccc; color: white; border:2px solid white; font-weight: 700; border-radius: 50px;} .page-tops .tops-list > ul > li.resto:nth-of-type(1) .rank { background: #e1b541;} .page-tops .tops-list > ul > li.resto:nth-child(n+2):nth-child(-n+6) .rank { background: #ff344b;} .page-tops .tops-list > ul > li.dish { border: 1px solid #d5dce0; border-radius:3px;} .page-tops .tops-list > ul > li.dish > .pic-block > h3 { position:absolute; margin:auto; bottom:15px; left:0; right:0; color: white; font-weight:700; text-shadow: 0 0 5px rgba(0,0,0,0.8);} .page-tops .tops-list > ul > li.dish > .pic-block > .shadow{ position: absolute; top:0; height: 100%; width: 100%; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#8c000000',GradientType=0 ); /* IE6-9 */} .page-tops .tops-list > ul > li.dish > ul { padding:10px 0;} .page-tops .tops-list > ul > li.dish > ul > li { padding:5px 0;} .page-tops .tops-list > ul > li.dish > ul > li > .rank { float: left; width: 50px; height:30px; } .page-tops .tops-list > ul > li.dish > ul > li > .rank > a { display: block; top:3px; left:0; bottom:0; right:0; margin:auto; width: 25px; height: 25px; border-radius: 50px; font-size: 14px; line-height: 23px; color: white; font-weight: 700; text-decoration: none;} .page-tops .tops-list > ul > li.dish > ul > li:nth-of-type(1) > .rank > a { background: #e1b541;} .page-tops .tops-list > ul > li.dish > ul > li:nth-child(n+2) > .rank > a { background: #ff344b;} .page-tops .tops-list > ul > li.dish > ul > li > .fdish-t2 { float: left; width: calc(100% - 50px);} .page-tops .tops-list > ul > li.dish > .pic-block { width:100%;} .page-tops .tops-list > ul > li.dish > .pic-block > img { width:100%;} } @media screen and (min-width: 1000px){ .page-tops .onecol-span{ float:left; width:226px; margin-right:32px;} .page-tops .twocol-span{ float:left; width:calc(100% - 258px); margin-right:0;} .page-tops .tops { margin-top: 15px;} .page-tops .tops > ul { margin-right: 3px; font-size: 16px;} .page-tops .tops > ul > li { display: inline-block; width: 150px; margin-right: 3px; font-size: 16px;} .page-tops .tops-list > ul > li.more { margin-top: 30px;} .page-tops .tops-list > ul > li.resto { margin-top: 45px;} .page-tops .tops-list > ul > li.resto > a > img.small{ display:none;} .page-tops .tops-list > ul > li.resto:nth-child(n+1):nth-child(-n+6) { margin-right: 30px; width: calc((100% - 60px) / 3); min-height: 270px;} .page-tops .tops-list > ul > li.resto:nth-child(3n):nth-child(-n+6) { margin-right: 0px;} .page-tops .tops-list > ul > li.resto .rank { top: -15px; width:40px; height:40px; line-height: 35px; font-size: 16px;} .page-tops .tops-list > ul > li.resto:nth-child(n+1):nth-child(-n+6) > .fresto-t2 { padding:10px;} .page-tops .tops-list > ul > li.resto:nth-child(n+7) { margin-right: 20px; width: calc((100% - 60px) / 4); min-height: 245px;} .page-tops .tops-list > ul > li.resto:nth-child(4n + 6) { margin-right: 0px;} .page-tops .tops-list > ul > li.resto:nth-child(n+7) > .fresto-t2 { padding: 10px;} .page-tops .tops-list > ul > li.dish { margin-top: 45px; width: calc(50% - 15px);} .page-tops .tops-list > ul > li.dish:nth-child(odd) { margin-right: 30px;} .page-tops .tops-list > ul > li.dish > .pic-block > img { width:355px; height:130px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .page-tops .twocol-span { float:left;width:100%; margin-right:0;} .page-tops h1 {padding: 0 10px;} .page-tops .tops-zone { background: #f5f5f5; margin:0; width:100%;} .page-tops .listing { background: #f5f5f5;} .page-tops .side-nav { padding: 0 10px;} .page-tops .tops { margin-top: 15px;} .page-tops .tops > ul { margin-right: 3px; font-size: 16px;} .page-tops .tops > ul > li { display: inline-block; width: 150px; margin-right: 3px; font-size: 16px;} .page-tops .tops-list > ul > li.more { margin-top: 30px;} .page-tops .tops-list > ul > li.resto { margin-top: 45px;} .page-tops .tops-list > ul > li.resto > a > img.small{ display:none;} .page-tops .tops-list > ul > li.resto:nth-child(n+1):nth-child(-n+6) { margin-left: 20px; width: calc((100% - 80px) / 3); height: calc(((33.33vw - 50px)*0.6) + 130px);} .page-tops .tops-list > ul > li.resto .rank { top: -15px; width:40px; height:40px; line-height: 35px; font-size: 16px;} .page-tops .tops-list > ul > li.resto:nth-child(n+1):nth-child(-n+6) > .fresto-t2 { padding:10px;} .page-tops .tops-list > ul > li.resto:nth-child(n+7) { margin-left: 15px; width: calc((100% - 75px) / 4); height: calc(((25vw - 19px)*0.6) + 130px);} .page-tops .tops-list > ul > li.resto:nth-child(4n + 6) { margin-right: 0px;} .page-tops .tops-list > ul > li.resto:nth-child(n+7) > .fresto-t2 { padding: 10px;} .page-tops .tops-list > ul > li.dish { margin-top: 45px; margin-left: 20px; width: calc(50% - 30px); height:calc(((50vw - 40px)*0.35) + 210px);} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-tops .twocol-span{ float:left;width:100%; margin-right:0;} .page-tops h1 {padding: 0 10px;} .page-tops .tops-zone { background: #f5f5f5; margin:0; width:100%;} .page-tops .listing { background: #f5f5f5;} .page-tops .side-nav { padding: 0 10px;} .page-tops .tops-list > ul { margin:10px;} .page-tops .tops { margin-top: 15px;} .page-tops .tops-list > ul > li.more { margin-top: 30px;} } @media screen and (min-width: 481px) and (max-width: 749px){ .page-tops .tops > ul { margin-right: 3px; font-size: 14px;} .page-tops .tops > ul > li { display: inline-block; padding:10px; height:42px; margin-right: 3px; font-size: 14px;} .page-tops .tops-list > ul > li.resto { margin-top: 45px;} .page-tops .tops-list > ul > li.resto > a > img.small{ display:none;} .page-tops .tops-list > ul > li.resto { margin-left: 10px; width: calc( 50% - 15px); height: calc(((50vw - 50px)*0.6) + 140px);} .page-tops .tops-list > ul > li.resto .rank { top: -15px; width:40px; height:40px; line-height: 35px; font-size: 16px;} .page-tops .tops-list > ul > li.resto > .fresto-t2 { padding:10px;} .page-tops .tops-list > ul > li.dish { margin-top: 45px; margin-left: 10px; width: calc(50% - 15px); height:calc(((50vw - 40px)*0.35) + 210px);} } @media screen and (min-width: 0px) and (max-width: 480px){ .page-tops .tops > ul { table-layout: fixed; width:100%; margin-right: 3px; font-size: 13px;} .page-tops .tops > ul > li { display: inline-block; padding:7px 9px; height:35px; font-size: 13px;} .page-tops .tops-list > ul > li.resto { width:100%; border:none; margin:10px 0;} .page-tops .tops-list > ul > li.resto > a { float:left; width:80px;} .page-tops .tops-list > ul > li.resto > a > img.large { display:none;} .page-tops .tops-list > ul > li.resto .rank { left: -10px; top:0; bottom:0; right:auto; width:30px; height:30px; line-height: 25px; font-size: 14px;} .page-tops .tops-list > ul > li.resto > .fresto-t2 { float:left; width: calc(100% - 80px); padding: 0 10px;} .page-tops .tops-list > ul > li.dish { margin-top: 35px; width:100%; height:calc(((100vw - 20px)*0.35) + 210px);} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*--------- Page Account ------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account .twocol-span { text-align: left; padding-bottom:50px;} .page-account .list > ul > li { border-top:1px solid #d5dce0; transition:0.3s;} .page-account .list > ul > li:last-child { border-bottom:1px solid #d5dce0;} .page-account .list > ul > li a { display:block; } .page-account .list > ul > li a:hover { background: #f5f5f5; color:#333;} .page-account .list > ul > li { display:block;text-decoration: none;} .page-account .list > ul > li ul > li.canceled { color: #df5400;} .page-account .list > ul > li ul > li.completed { color: #96cf32;} .page-account .list > ul > li ul > li.icon-fat-arrow-right { color:#ff344b; right:0px; transition:0.3s;} .page-account .list > ul > li a:hover > ul > li.icon-fat-arrow-right { right:-5px;} .page-account .list > ul > li ul > li.resto { font-weight: 700;} .page-account .list > ul > li ul > li.button { width:80px; padding:0; right:0px; transition:0.3s;} .page-account .list > ul > li a:hover > ul > li.button { right:-5px;} .page-account .list > ul > li ul > li.button .cta { float:left; height:36px; width:65px; padding: 4px 8px; font-size: 14px; line-height: 1em; vertical-align: middle; color: white; background: #ff344b; border-radius: 3px 0 0 3px;} .page-account .list > ul > li ul > li.button .arrow { float: left; border-style: solid; border-width: 18px 0 18px 14px; border-color: transparent transparent transparent #ff344b;} } @media screen and (min-width: 1000px){ .page-account .side-nav { float: left; width:226px; margin-top: 20px; margin-right:35px;} .page-account .twocol-span { float:left; margin-top: 20px; width:calc(100% - 261px); } } @media screen and (min-width: 750px) { .page-account .list > ul > li { padding:12px 0; } .page-account .list > ul > li a { margin:-12px 0; padding:12px 0; } .page-account .list > ul > li ul > li { float: left; padding: 0 15px;} .page-account .list > ul > li ul > li.status { width:115px;} .page-account .list > ul > li ul > li.resto { width:calc(100% - 445px);} .page-account .list > ul > li ul > li.mode { width:180px;} .page-account .list > ul > li ul > li.date { width:120px;} .page-account .list > ul > li ul > li.price { width:130px; text-align: right;} .page-account .list > ul > li ul > li.group { width:130px;} .page-account .list > ul > li ul > li.icon-fat-arrow-right { float:right;width:30px; padding:0; text-align: center;} .page-account .list > ul > li ul > li.button { float:left; margin: -7px 0;} } @media screen and (min-width: 0px) and (max-width: 999px){ .page-account .side-nav {display:none;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account .promo-ext { display:none;} .page-account .breadcrumb > ol > li:nth-of-type(n + 2) { display:none;} .page-account .breadcrumb > ol > li:nth-of-type(1):after { display:none;} .page-account .breadcrumb > ol > li:nth-of-type(1) > a { z-index: 1; position:absolute; top:15px; left:10px; height:25px;} .page-account .breadcrumb > ol > li:nth-of-type(1) > a:before { color:#333; font-size: 24px;} .page-account h1 { height: 50px; margin:0; padding: 0 30px; width:100%; font-size: 18px; font-weight: 400; text-align: center; letter-spacing: 0.04em; line-height: 50px;} .page-account h1:after{ content:""; display:block; background:#ff344b; margin: -5px auto auto auto; width:40%; height:2px} .page-account .list > ul { margin: 0 -10px;} .page-account .list > ul > li { padding:12px 10px;} .page-account .list > ul > li a { margin: -12px -10px; padding:12px 10px;} .page-account .list > ul > li ul > li { float: left; } .page-account .list > ul > li ul > li.status { width:calc(100% - 30px); font-size: 14px;} .page-account .list > ul > li ul > li.resto { width:calc(100% - 80px); font-size: 16px; margin:3px 0 6px 0;} .page-account .list > ul > li ul > li.mode { clear:left; margin-right: 10px; color:#999; font-size: 14px;} .page-account .list > ul > li ul > li.date { width:95px; color:#999; font-size: 14px;} .page-account .list > ul > li ul > li.price { width:calc(100% - 125px); color:#999; font-size: 14px;} .page-account .list > ul > li ul > li.group { width:calc(100% - 170px); color:#999; font-size: 14px;} .page-account .list > ul > li ul > li.icon-fat-arrow-right { position:absolute; top:calc(50% - 15px); right:0; height:30px;width:30px; padding:0; text-align: center; line-height: 30px;} .page-account .list > ul > li ul > li.button { position:absolute; width:72px; top:calc(50% - 17px); right:0; padding:0; } .page-account .list > ul > li ul > li.button .cta { width:57px; padding: 4px 0px 4px 8px; } } /*--------- >>> my profil ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.profil .my-profil .twocol-span > .my-pic {text-align: center;} .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook { display:inline-block; width:100%; background: #3b5998; color: white; text-decoration: none; border-radius:3px; text-align: center;} .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook:hover { background: #4466ac; } .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook:before { font-size: 1.7em; bottom:-0.25em; margin-right:0.7em;} .page-account.profil .my-profil .twocol-span > .my-infos form > .input-cnt, .page-account.profil .my-profil .twocol-span > .my-phone form > .input-cnt { width:100%; margin-bottom:10px;} .page-account.profil .my-profil .twocol-span > .my-phone form > select { float:left;} .page-account.profil .my-profil .twocol-span > .my-infos form .red-link { height:auto; line-height: 1em; padding:0; } .page-account.profil .my-profil .twocol-span > .my-phone form .red-link { height:auto; line-height: 1em; padding:0; } .page-account.profil .my-profil .twocol-span > .my-infos form > .radio-cnt.civil label {display:inline-block; margin-bottom: 0.75em;} .page-account.profil .my-profil .twocol-span .icon-edit , .page-account.profil .my-profil .twocol-span .icon-bin { text-align: center; cursor:pointer; color: #ccc; transition:0.2s;} .page-account.profil .my-profil .twocol-span .icon-edit:hover , .page-account.profil .my-profil .twocol-span .icon-bin:hover { color: #999;} .page-account.profil .my-profil .twocol-span > .my-adress {padding-top: 1.5em;} .page-account.profil .my-profil .twocol-span > .my-adress > ul > li { border-bottom: 1px solid #d5dce0;} .page-account.profil .my-profil .twocol-span > .my-adress .name { font-weight: 700;} .page-account.profil .my-profil .twocol-span > .my-adress .red-link { display:block; text-decoration: none;} .page-account.profil .my-profil .twocol-span > .my-adress .red-link:before { font-size: 1.2em; bottom:-0.1em; margin-right:0.2em;} .page-account.profil .my-profil .twocol-span > .my-cards > ul > li { border-bottom: 1px solid #d5dce0;} .page-account.profil .my-profil .twocol-span > .my-cards .type { float:left;} .page-account.profil .my-profil .twocol-span > .my-cards .type > img {width:100%;} .page-account.profil .my-profil .twocol-span > .my-cards .ident { float:left;} .page-account.profil .my-profil .twocol-span > .my-cards .icon-bin { float:left;} /* pic resize */ .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport { position:relative; margin-left: auto; margin-right: auto; overflow: hidden;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport > img { cursor:-webkit-grab; cursor:grab;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls { position:static; width:0; height:0; } .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button { position:absolute; display:block; background : white; width:1.4em; height:1.4em; border-radius: 100%; text-decoration: none; overflow:hidden;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button:before { position: absolute; display:block; top:-100%; bottom:-100%; left:-100%; right:-100%; margin:auto; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button.icon-rotate-l { position:absolute; bottom:3%; right:calc(3% + 1.6em);} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button.icon-rotate-r { position:absolute; bottom:3%; right:3%; } .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-zoom { position:absolute; height:calc(94% - 4.8em); top:calc(3% + 2.55em); left:calc(3% + 0.33em); font-size: 0.9em;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .ui-slider-handle:before { font-size: 0.8em; text-align:center; content: "\e914"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 0.2s;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button-more { position:absolute; top:3%; left:3%;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button-less { position:absolute; bottom:3%; left:3%;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button.icon-rotate-l:before { content:'\e923'; font-family: '123cacher' !important;font-size:0.95em; line-height:1.1em; height:1.1em;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button.icon-rotate-r:before { display:block; content:'\e923'; font-family: '123cacher' !important; transform: scaleX(-1); font-size:0.95em; line-height:1.1em; height:1.1em;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button-more:before { content:'+'; font-family:Lato, Verdana, sans-serif; font-weight:900; font-size:1.6em; line-height:0.8em; height:1em;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport .controls .mainpic-viewport-button-less:before { content:'-'; font-family:Lato, Verdana, sans-serif; font-weight:900; font-size:1.9em; line-height:0.6em; height:1em;} } @media screen and (min-width: 1000px){ .page-account.profil .my-profil .twocol-span h2 {font-size: 22px;} .page-account.profil .my-profil .twocol-span > .my-pic { float:right; width:235px; } .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld { width:135px; height:135px; margin:auto;} .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld .add { height:2.6em;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport { width:135px; height:135px;} .page-account.profil .my-profil .twocol-span > .my-pic > .btn-red-med { margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook { height:35px; font-size: 14px; margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-infos, .page-account.profil .my-profil .twocol-span > .my-phone { float:left; width:calc(100% - 250px);} .page-account.profil .my-profil .twocol-span > .my-infos form > .firstname { float:left; width:calc((100% - 5px)/2); margin-right:5px;} .page-account.profil .my-profil .twocol-span > .my-infos form > .lastname { float:left; width:calc((100% - 5px)/2);} .page-account.profil .my-profil .twocol-span > .my-infos form .red-link { float:left; margin-bottom:20px; clear: both; } .page-account.profil .my-profil .twocol-span > .my-infos form > .civil-bt { float:left; clear: both; margin-bottom:0.5em;} .page-account.profil .my-profil .twocol-span > .my-infos form > .input-cnt { float:left;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone-code { float:left; width:165px; margin-right:5px; font-size: 14px;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone { float:left; width:calc(100% - 280px); margin-right:5px;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone-bt { float:left; width:105px; text-align: center;} .page-account.profil .my-profil .twocol-span > .my-phone form .red-link { display: inline-block; margin-bottom:20px; } .page-account.profil .my-profil .twocol-span > .my-adress { float:left; width:100%;} .page-account.profil .my-profil .twocol-span > .my-adress > h2 { display:inline; margin-right:10px;} .page-account.profil .my-profil .twocol-span > .my-adress > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-adress .name { font-size:18px;} .page-account.profil .my-profil .twocol-span > .my-adress .icon-edit , .page-account.profil .my-profil .twocol-span > .my-adress .icon-bin { margin-left:5px; } .page-account.profil .my-profil .twocol-span > .my-adress .adress { margin: 1em 0; font-size:14px;} .page-account.profil .my-profil .twocol-span > .my-adress .red-link { margin-top:20px;} .page-account.profil .my-profil .twocol-span > .my-cards { float:left; width:100%;} .page-account.profil .my-profil .twocol-span > .my-cards > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-cards .type { width:61px; height:41px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .ident { height:41px; line-height: 41px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .icon-bin { height:41px; line-height: 41px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .page-account.profil .my-profil .twocol-span h2 {font-size: 22px;} .page-account.profil .my-profil .twocol-span > .my-pic { float:right; width:235px; } .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld { width:135px; height:135px; margin:auto;} .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld .add { height:2.6em;} .page-account.profil .my-profil .twocol-span > .my-pic > .btn-red-med { margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook { height:35px; font-size: 14px; margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport { width:135px; height:135px;} .page-account.profil .my-profil .twocol-span > .my-infos, .page-account.profil .my-profil .twocol-span > .my-phone { float:left; width:calc(100% - 270px);} .page-account.profil .my-profil .twocol-span > .my-infos form > .firstname { float:left; width:calc((100% - 5px)/2); margin-right:5px;} .page-account.profil .my-profil .twocol-span > .my-infos form > .lastname { float:left; width:calc((100% - 5px)/2);} .page-account.profil .my-profil .twocol-span > .my-infos form .red-link { float:left; margin-bottom:20px;} .page-account.profil .my-profil .twocol-span > .my-infos form > .input-cnt { float:left;} .page-account.profil .my-profil .twocol-span > .my-infos form > .civil-bt { float:left; clear: both; margin-bottom:0.5em;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone-code { float:left; width:160px; margin-right:5px; font-size: 14px;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone { float:left; width:calc(100% - 260px); margin-right:5px;} .page-account.profil .my-profil .twocol-span > .my-phone form > .phone-bt { float:left; width:90px; text-align: center} .page-account.profil .my-profil .twocol-span > .my-phone form .red-link { display: inline; margin-bottom:20px;} .page-account.profil .my-profil .twocol-span > .my-phone form .btn-red-med:not(.phone-bt) { margin: 20px 0 10px 0; } .page-account.profil .my-profil .twocol-span > .my-adress { float:left; width:100%;} .page-account.profil .my-profil .twocol-span > .my-adress > h2 { display:inline; margin-right:10px;} .page-account.profil .my-profil .twocol-span > .my-adress > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-adress .name { font-size:18px;} .page-account.profil .my-profil .twocol-span > .my-adress .icon-edit , .page-account.profil .my-profil .twocol-span > .my-adress .icon-bin { margin-left:5px; } .page-account.profil .my-profil .twocol-span > .my-adress .adress { margin: 1em 0; font-size:14px;} .page-account.profil .my-profil .twocol-span > .my-adress .red-link { margin-top:20px;} .page-account.profil .my-profil .twocol-span > .my-cards { float:left; width:100%;} .page-account.profil .my-profil .twocol-span > .my-cards > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-cards .type { width:61px; height:41px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .ident { height:41px; line-height: 41px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .icon-bin { height:41px; line-height: 41px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.profil .my-profil .twocol-span h2 { margin: 55px auto 15px auto; font-size: 18px; font-weight:700; text-align: center;} .page-account.profil .my-profil .twocol-span p { text-align: center;} .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld { width:135px; height:135px; margin:auto;} .page-account.profil .my-profil .twocol-span > .my-pic > .pic-upld .add { height:2.6em;} .page-account.profil .my-profil .twocol-span > .my-pic > .btn-red-med { margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-pic > .icon-facebook { height:35px; width:240px; font-size: 14px; margin-top: 15px;} .page-account.profil .my-profil .twocol-span > .my-pic .mainpic-viewport { width:135px; height:135px;} .page-account.profil .my-profil .twocol-span > .my-infos form, .page-account.profil .my-profil .twocol-span > .my-phone form {max-width:260px; margin:auto; text-align: center;} .page-account.profil .my-profil .twocol-span > .my-infos form > .red-link { display:block;margin:20px auto;} .page-account.profil .my-profil .twocol-span > .my-phone form .phone-code { width:100%; margin-right:5px; font-size: 12px;} .page-account.profil .my-profil .twocol-span > .my-phone form .phone { width: 100%; margin:10px 5px 10px 0;} .page-account.profil .my-profil .twocol-span > .my-phone form .phone-bt { width: 100px; margin: 10px 0; } .page-account.profil .my-profil .twocol-span > .my-phone form .btn-red-med:not(.phone-bt) { width: 100px; margin: 20px 0 10px 0; } .page-account.profil .my-profil .twocol-span > .my-phone form .red-link { display:block; margin-bottom:5px;} .page-account.profil .my-profil .twocol-span > .my-adress > h2 { display:inline-block; margin-right:15px;} .page-account.profil .my-profil .twocol-span > .my-adress > .add { padding-right:10px; padding-left:10px;} .page-account.profil .my-profil .twocol-span > .my-adress > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-adress .name { font-size:16px;} .page-account.profil .my-profil .twocol-span > .my-adress .icon-edit , .page-account.profil .my-profil .twocol-span > .my-adress .icon-bin { margin-left:5px; } .page-account.profil .my-profil .twocol-span > .my-adress .adress { margin: 1em 0; font-size:14px;} .page-account.profil .my-profil .twocol-span > .my-adress .red-link { margin-top:20px;} .page-account.profil .my-profil .twocol-span > .my-cards > ul > li { padding: 25px 0;} .page-account.profil .my-profil .twocol-span > .my-cards .type { width:45px; height:30px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .ident { height:30px; line-height: 30px; margin-right:20px;} .page-account.profil .my-profil .twocol-span > .my-cards .icon-bin { height:30px; line-height: 30px;} } /*--------- >>> my points ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.points .my-points .twocol-span > .status { font-weight: 700;} .page-account.points .my-points .twocol-span > .status > span { font-size: 1.1em; color:#ff344b;} .page-account.points .my-points .twocol-span > .icon-warnninging:before { bottom: -0.2em; margin-right:0.3em; font-size: 1.4em; color:#ff344b;} .page-account.points .my-points .twocol-span > table { table-layout: fixed; width:100%; text-align: left; border-bottom:1px solid #d5dce0;} .page-account.points .my-points .twocol-span > table tr > td { padding:0.4em 0;} .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(3) { text-align: right;} .page-account.points .my-points .twocol-span > .total { font-weight: 700;} } @media screen and (min-width: 750px){ .page-account.points .my-points .twocol-span > .status { font-size: 22px; margin-bottom:10px;} .page-account.points .my-points .twocol-span > .icon-warnninging { font-size: 16px; margin-bottom:10px;} .page-account.points .my-points .twocol-span > table { padding: 5px 0; font-size: 14px;} .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(1) { width:60px; } .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(2) { width:100%; } .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(3) { width:120px; } .page-account.points .my-points .twocol-span > .total { padding: 15px 0; margin-bottom:50px; font-size: 24px; text-align: right;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.points .my-points .twocol-span > .status { font-size: 18px; margin:10px auto;} .page-account.points .my-points .twocol-span > .icon-warnninging { font-size: 14px; line-height: 1.4em; margin-bottom:10px;} .page-account.points .my-points .twocol-span > table { padding: 5px 0; font-size: 13px;} .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(1) { width:50px; } .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(2) { width:100%; } .page-account.points .my-points .twocol-span > table tr > td:nth-of-type(3) { width:80px; } .page-account.points .my-points .twocol-span > .total { padding: 15px 0; margin-bottom:50px; font-size: 20px; text-align: right;} } /*--------- >>> settings ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.settings .settings .twocol-span > .list-title { font-weight: 700;} .page-account.settings .settings .twocol-span > .red-link { text-decoration: none;} .page-account.settings .settings .twocol-span > h1 {margin-bottom: 0.8em} .page-account.settings .settings .twocol-span > ul > li.icon-warnninging { margin-left:1.9em;} .page-account.settings .settings .twocol-span > ul > li.icon-warnninging:before { position:absolute; left: -1.4em; top:-0.06em; font-size: 1.3em; color:#ff344b;} .page-account.settings .settings .twocol-span > ul.lang-radios > li > label { display: inline-block; margin-right: 0.5em;} } @media screen and (min-width: 750px){ .page-account.settings .settings .twocol-span > .theme { font-size: 20px;} .page-account.settings .settings .twocol-span > .list-title { padding-left:100px; margin: 25px auto -8px auto; font-size: 16px;} .page-account.settings .settings .twocol-span > ul { padding-left:100px; margin: 20px 0 30px 0;} .page-account.settings .settings .twocol-span > ul > li { font-size: 16px; margin:15px 0;} .page-account.settings .settings .twocol-span > .red-link {padding-left:100px; display:block; margin:25px 0;} .page-account.settings .settings .twocol-span > .delete-check {padding-left:100px; display:block; margin:25px 0;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.settings .settings .twocol-span > .theme { font-weight: 700; font-size: 16px;} .page-account.settings .settings .twocol-span > .list-title { margin: 20px auto -5px auto; font-size: 14px;} .page-account.settings .settings .twocol-span > ul { margin: 20px 0 35px 0;} .page-account.settings .settings .twocol-span > ul > li { font-size: 14px; margin:10px 0;} .page-account.settings .settings .twocol-span > .red-link { display:block; margin:20px 0;} .page-account.settings .settings .twocol-span > .delete-check { display:block; font-size:14px; margin:20px 0;} } /*--------- >>> sponsorship ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.sponsorship .sponsorship .twocol-span { text-align: center;} .page-account.sponsorship .sponsorship .twocol-span > .the-link { margin: 2em auto 0.6em auto; border:3px dashed #ccc;} .page-account.sponsorship .sponsorship .twocol-span > .the-link >span{ color:#ff344b;} .page-account.sponsorship .sponsorship .twocol-span > .icon-mail:before { font-size: 1.4em; bottom:-0.15em; margin-right:0.3em;} .page-account.sponsorship .sponsorship .twocol-span > .icon-facebook { display:inline-block; width:100%; background: #3b5998; color: white; text-decoration: none; border-radius:3px; text-align: center;} .page-account.sponsorship .sponsorship .twocol-span > .icon-facebook:hover { background: #4466ac; } .page-account.sponsorship .sponsorship .twocol-span > .icon-facebook:before { font-size: 1.7em; bottom:-0.25em; margin-right:0.7em;} } @media screen and (min-width: 750px){ .page-account.sponsorship .sponsorship .twocol-span > h1 { text-align: left;} .page-account.sponsorship .sponsorship .twocol-span > p { margin:45px 8% 25px 8%;} .page-account.sponsorship .sponsorship .twocol-span > .the-link { width:350px; height:55px; line-height: 45px; font-size: 20px;} .page-account.sponsorship .sponsorship .twocol-span > .icon-facebook { width:150px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.sponsorship .sponsorship .twocol-span > p { margin:35px 0 20px 0;} .page-account.sponsorship .sponsorship .twocol-span > .the-link { width:250px; height:45px; line-height: 35px; font-size: 20px;} .page-account.sponsorship .sponsorship .twocol-span > .icon-facebook { width:150px;} } /*--------- >>> orders ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.orders .list { text-align: center;} .page-account.orders .list .listing-finished { text-align: left;} .page-account.orders .list > .btn-grey-big { margin: 20px auto;} .page-account.orders .order-single a {text-decoration: none;} .page-account.orders .congratulation { background:#f5f5f5; text-align: center; padding: 20px; border-radius:3px;} .page-account.orders .congratulation > .title { margin-bottom:0.5em; font-weight: 700; color:#ff344b; height:50px; font-size: 1.2em; line-height: 50px;} .page-account.orders .congratulation > .title:before { display:inline-block; width:1.5em; height:1.5em; margin-right:0.5em; background:#ff344b; font-size: 1.5em; line-height: 1.6em; bottom:-0.2em; text-align: center; color:white; border-radius:100%;} .page-account.orders .congratulation > p { margin: 0.2em auto;} .page-account.orders .congratulation > .sub-options { margin-top:1em;} .page-account.orders .congratulation > .sub-options > a { color:#999;} .page-account.orders .congratulation > .sub-options > a:hover { color:#333;} /*-- >>> single ----------------------------------------------------------*/ .page-account.orders .order-single .twocol-span > .actions > a:before {margin-right:0.5em; font-size: 1.3em; bottom:-0.2em;} .page-account.orders .order-single .twocol-span > .date { margin: 1em 0;} .page-account.orders .order-single .twocol-span > .adresses .name { font-weight: 700;} .page-account.orders .order-single .twocol-span > .bill { border-top: 1px solid #d5dce0; border-bottom: 1px solid #d5dce0;} .page-account.orders .order-single .twocol-span > .bill > .order , .page-account.orders .order-single .twocol-span > .bill > .sub-total { border-bottom: 1px solid #d5dce0;} .page-account.orders .order-single .twocol-span > .bill > .order .dish > span { color:#999; margin-right:0.2em;} .page-account.orders .order-single .twocol-span > .bill > .order .custom { color:#999;} .page-account.orders .order-single .twocol-span > .bill > .total > li.main {font-weight: 700;} .page-account.orders .order-single .twocol-span > .bill > .total > li.small {font-size: 14px} .page-account.orders .order-single .twocol-span > .bill > ul > li { padding: 0.5em 0;} .page-account.orders .order-single .twocol-span > .bill > ul > li > div { float:left;} .page-account.orders .order-single .twocol-span > .bill > ul > li > .price { position:absolute; top:0.5em; right:0; text-align: right;} } @media screen and (min-width: 750px){ .page-account.orders .congratulation { font-size: 14px;} .page-account.orders .orders .twocol-span h2 { font-size: 22px;} /*-- >>> single ----------------------------------------------------------*/ .page-account.orders .order-single .twocol-span > .actions > a { margin: 0 0.1em;} .page-account.orders .order-single .twocol-span > .date { font-size: 22px;} .page-account.orders .order-single .twocol-span > .adresses > .from { float:left; width: 50%; padding: 0 25px 25px 0;} .page-account.orders .order-single .twocol-span > .adresses > .to { float:left; width: 50%; padding: 0 0 25px 0 ;} .page-account.orders .order-single .twocol-span > .adresses .pre { font-size: 22px; margin: 0.8em 0;} .page-account.orders .order-single .twocol-span > .adresses .name { font-size: 18px; margin: 0.5em 0;} .page-account.orders .order-single .twocol-span > .adresses .adress { font-size: 14px; line-height: 1.2em;} .page-account.orders .order-single .twocol-span > .bill > .basket-list {padding-left:10px; padding-right: 10px;} .page-account.orders .order-single .twocol-span > .bill > ul {font-size: 14px;} .page-account.orders .order-single .twocol-span > .bill > .order { padding:15px 10px;} .page-account.orders .order-single .twocol-span > .bill > .sub-total { padding:15px 10px; width:320px; margin-left:calc(100% - 320px);} .page-account.orders .order-single .twocol-span > .bill > .total { font-size: 18px; padding:15px 10px; width:320px; margin-left:calc(100% - 320px);} .page-account.orders .order-single .twocol-span > .bill > ul > li > .price { width:100px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.orders .orders .twocol-span h2 { margin: 35px auto 15px auto; font-size: 18px; font-weight:700; text-align: center} /*-- >>> single ----------------------------------------------------------*/ .page-account.orders .order-single .twocol-span > .actions { margin: 0.8em 0; text-align: center;} .page-account.orders .order-single .twocol-span > .actions > a { margin: 0.3em 0.2em;} .page-account.orders .order-single .twocol-span > .date { font-size: 20px;} .page-account.orders .order-single .twocol-span > .adresses > .from { float:left; width: 50%; padding: 0 25px 25px 0;} .page-account.orders .order-single .twocol-span > .adresses > .to { float:left; width: 50%; padding: 0 0 25px 0 ;} .page-account.orders .order-single .twocol-span > .adresses .pre { font-size: 18px; margin: 0.8em 0;} .page-account.orders .order-single .twocol-span > .adresses .name { font-size: 16px; margin: 0.5em 0;} .page-account.orders .order-single .twocol-span > .adresses .adress { font-size: 12px; line-height: 1.2em;} .page-account.orders .order-single .twocol-span > .bill { margin: 0 -10px;} .page-account.orders .order-single .twocol-span > .bill > ul {font-size: 14px;} .page-account.orders .order-single .twocol-span > .bill > ul > li > .price { width:80px;} .page-account.orders .order-single .twocol-span > .bill > ul > li > div:not(.price) { padding: 0 10px;} .page-account.orders .order-single .twocol-span > .bill > .order { padding:10px 10px;} .page-account.orders .order-single .twocol-span > .bill > .sub-total { padding:15px 10px;} .page-account.orders .order-single .twocol-span > .bill > .total { font-size: 16px; padding:15px 10px;} .page-account.orders .order-single .twocol-span > .bill > .total > li > .price { width:100px;} .page-account.orders .order-single .twocol-span > .bill > .total > li > div:not(.price) { width:calc(100% - 110px);} } /*--------- >>> reservations ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.reservations .reservations .twocol-span > .currents > ul > li { border:1px solid #d5dce0; border-radius:3px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .pic > img { width:100%;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .infos { color: #999;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > a { color: #999;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > .pending { color: #df5400;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > .confirmed { color: #96cf32;} } @media screen and (min-width: 750px){ .page-account.reservations .reservations .twocol-span > .currents > ul > li { padding:10px; margin-bottom:15px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .pic { float:left; width:145px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > h3 { float:left; width:calc(100% - 145px); margin:0 0 15px 0; padding:0 10px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .infos { float:left; width:calc(100% - 440px); padding:0 10px; font-size: 14px; color: #999;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .infos > .group { margin-top:5px; } .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status { float:left; width:295px; font-size: 14px; text-align: right;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > a { display:inline-block; margin-top:5px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.reservations .reservations .twocol-span h2 { margin: 35px auto 15px auto; font-size: 18px; font-weight:700; text-align: center;} .page-account.reservations .reservations .twocol-span > .currents > ul > li { margin: 0 -10px 15px -10px; padding: 0; border-radius:0; border-left:0; border-right:0;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .pic { float:left; width:43%;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > h3 { float:left; width:57%; margin:10px 0 10px 0; padding:0 10px; font-size: 16px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .infos { float:left; width:57%; padding:0 10px; font-size: 14px; color: #999;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .infos > .group { margin-top:3px; } .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status { float:left; width:100%; font-size: 12px; padding:10px;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > div {float:right; width: calc(100% - 60px); text-align: right;} .page-account.reservations .reservations .twocol-span > .currents > ul > li > .status > a { float:left; display:block; text-align: left; width:50px;} } /*--------- >>> reviews ----------------------------------------------------------*/ @media screen and (min-width:0px){ .page-account.reviews .reviews .twocol-span > .currents > ul > li { padding:10px; margin-bottom: 15px; border: 1px solid #d5dce0; border-radius:3px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .pic > img { width:100%;} .page-account.reviews .reviews .twocol-span > .currents .pts-infos span { font-size: 1.4em; font-weight: 700;} .page-account.reviews .reviews .twocol-span .grade-logos { float: left; height: 30px; width: 142px; margin: 2px auto; font-size: 25px; background: #ccc;} .page-account.reviews .reviews .twocol-span .grade-logos > .grade-line { position: absolute; top:0; left:0; width:100%; height:100%; background:url(/images/bt/grade-mask.png) center no-repeat; background-size: auto 100%;} .page-account.reviews .reviews .twocol-span .grade-logos > .valor { width:100%; height:100%; background:#ff344b;} .page-account.reviews .reviews .twocol-span > .currents .review-bt > a { text-decoration: none; } .page-account.reviews .reviews .twocol-span > .currents .review-bt > a > .cta { font-weight: 700;} .page-account.reviews .reviews .twocol-span > .currents .button .cta { float:left; height:36px; padding:0 8px; font-size: 14px; line-height: 34px; vertical-align: middle; color: white; background: #ff344b; border-radius: 0 3px 3px 0;} .page-account.reviews .reviews .twocol-span > .currents .button .arrow { float: left; margin-left: 10px; border-style: solid; border-width: 18px 14px 18px 0; border-color: transparent #ff344b transparent transparent;} /*-- >>> single ----------------------------------------------------------*/ .page-account.reviews .review-single .twocol-span > .status.comfirmed { color: #96cf32;} .page-account.reviews .review-single .twocol-span > .status.pending { color: #df5400;} } @media screen and (min-width: 750px){ .page-account.reviews .reviews .twocol-span h2 { font-size: 22px;} .page-account.reviews .reviews .twocol-span h2 > span { font-size: 14px;} .page-account.reviews .reviews .twocol-span > .currents .pts-infos { float:left; margin-top:17px; width:50%; color: #ff344b; text-align: right;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .pic { float:left; width:145px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos { float:left; width:calc( 100% - 445px);} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos > h3 {margin: 0 0 0.5em 0; padding:0 10px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos > .date { padding:0 10px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .review-bt { float:left; width:300px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .review-bt > a > .cta { margin-bottom: 15px;} /*-- >>> single ----------------------------------------------------------*/ .page-account.reviews .review-single .twocol-span > .status { margin: 25px 0; font-size: 16px; font-weight: 700;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-account.reviews .reviews .twocol-span h2 { font-size: 18px; text-align: center;} .page-account.reviews .reviews .twocol-span h2 > span { display:block; font-size: 14px; margin:0.5em auto;} .page-account.reviews .reviews .twocol-span > .currents .pts-infos { float:left; font-size: 14px; color: #ff344b; text-align: right;} .page-account.reviews .reviews .twocol-span > .currents > ul > li { margin: 15px -10px 35px -10px; border-radius:0; border-right:0; border-left:0;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .pic { float:left; width:45%;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos { float:left; width:55%;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos > h3 {margin: 0 0 0.5em 0; padding:0 10px; font-size: 16px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .infos > .date { float:left; padding:0 10px; margin-bottom:10px; font-size: 14px; color: #999;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .review-bt { float:left; width:100%; margin-bottom: -28px;} .page-account.reviews .reviews .twocol-span > .currents > ul > li > .review-bt > a > .cta { display:none;} .page-account.reviews .reviews .twocol-span .grade-logos { display:none;} .page-account.reviews .reviews .twocol-span > .currents .button .cta { float:right; height:36px; padding:0 8px; font-size: 14px; line-height: 34px; vertical-align: middle; color: white; background: #ff344b; border-radius: 3px 0 0 3px;} .page-account.reviews .reviews .twocol-span > .currents .button .arrow { float: right; border-style: solid; margin-left:0; border-width: 18px 0 18px 14px; border-color: transparent transparent transparent #ff344b;} /*-- >>> single ----------------------------------------------------------*/ .page-account.reviews .review-single .twocol-span > .status { margin: 15px 0; font-size: 14px; font-weight: 700; text-align: center;} .page-account.reviews .review-single .twocol-span { text-align: center;} .page-account.reviews .review-single .twocol-span > .icon-bin { text-align: center; margin:auto;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*--------- Page order ------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .ord-proc > .steps { background: #f5f5f5;} .ord-proc > .steps > ul > li { display:inline-block; color: #999;} .ord-proc > .steps > ul > li.active { color: #ff344b;} .ord-proc > .steps > ul > li.active > .underline { position:absolute; bottom:0; left:0; right:0; margin:auto; width:80%; background: #ff344b;} .ord-proc .recap { padding:25px; margin-bottom: 25px; border:1px solid #d5dce0; border-radius:3px; text-align: left;} .ord-proc .recap > .title { font-size: 14px; font-weight: 700; margin-bottom:0.4em;} .ord-proc .recap > .data { font-size: 14px; margin-bottom:1.2em;} .ord-proc .recap > .data:last-of-type { margin-bottom:0;} .ord-proc .extra { text-align: left; } .ord-proc .extra h1 { margin-top:0;} .ord-proc .extra h2 { font-weight: 700; margin: 1.5em auto 1em auto;} .ord-proc .extra h2 > span { font-size: 0.75em; font-weight: 400;} .ord-proc .extra textarea { width:100%; } .ord-proc .extra ul > li { float:left; margin-bottom: 1em;} .ord-proc .extra ul > li:nth-of-type(odd) { clear:left; } .ord-proc .extra ul > li.quantity > .more, .ord-proc .extra ul > li.quantity > .less { float:left; width:25px; height:25px; font-weight: 700; text-align: center; border: 1px solid #d5dce0; border-radius:3px; transition:0.3s; cursor:pointer;} .ord-proc .extra ul > li.quantity > .more:hover , .ord-proc .extra ul > li.quantity > .less:hover { float:left; border: 1px solid #666; background: #f5f5f5;} .ord-proc .extra ul > li.quantity > .more {font-size: 25px; line-height: calc(25px - 0.2em); padding-left:0.06em;} .ord-proc .extra ul > li.quantity > .less {font-size: 28px; line-height: calc(25px - 0.25em); padding-left:0.06em;} .ord-proc .extra ul > li.quantity > input { float:left; width:30px; height:25px; border:0; text-align: center; padding:0;} .ord-proc .extra ul > li.quantity > span {float:left; line-height: 25px; margin-left:10px; width:calc(100% - 90px);} .ord-proc .order-check { margin: 2em 0;} .ord-proc .order-check > ul.promos > li { text-align: left; margin:1em 0;} .ord-proc .order-check > ul.promos > li .name { float:left; margin-right:0.5em;width:calc(100% - 6em);} .ord-proc .order-check > ul.promos > li .valor { float:left; width:5.5em; text-align: right;} .ord-proc .order-check > ul.promos > li .red { color: #ff344b;} .ord-proc .order-check > ul.promos > li.code-promo input { float:left; display:block; width:calc(100% - 45px); border-radius: 3px 0 0 3px;} .ord-proc .order-check > ul.promos > li.code-promo .button { float:left; display:block; border-radius: 0 3px 3px 0; height:35px; width:45px; padding:0; text-align: center;} .ord-proc .order-check > ul.promos > li.code-promo .name .code { font-weight: 700;} .ord-proc .order-check > ul.promos > li.code-promo .name .del { display: inline-block; padding:0.4em 0.4em; margin:-0.4em 0 -0.4em -0.4em; font-size: 0.8em; text-decoration: none;} .ord-proc .order-check > .validation > .total > .price { text-align: left; margin-bottom:1em; font-weight: 700;} .ord-proc .order-check > .validation > .total > .price > .name { float:left; margin-right:0.5em;width:calc(100% - 6em);} .ord-proc .order-check > .validation > .total > .price > .valor { float:left; width:5.5em; text-align: right;} .ord-proc .order-check > .validation > .total > .price > .red { color: #ff344b;} .ord-proc .order-check .pts > .icon-points { font-size: 40px; color: #ff344b; } .ord-proc .order-check .pts > .pts-numbers { font-size: 14px; color: #ff344b; } .ord-proc .order-check .pts > .pts-numbers > span { font-size: 24px; color: #ff344b; } /*add-adress*/ .ord-proc .add-adress .val {margin-top:1em;} /* pay mode */ .ord-proc .addresses > .address {float:left; text-align: left;} .ord-proc .addresses > .address > .ad-name > select { width:auto; max-width: 100%;} .ord-proc .addresses > .address > .m-show { display:none; color: #999;} .ord-proc .addresses > .address > .detail { margin: 1.2em 0; line-height: 1.4em;} .ord-proc .addresses > .address > .detail .name { margin-bottom:0.7em; font-size: 1.1em; font-weight: 700;} .ord-proc .addresses > .address > .detail .others { margin:0.8em 0;} .ord-proc .addresses > .address > .detail .phone { font-weight: 700;} .ord-proc .addresses > .address > .actions a { display: inline-block; text-decoration: none; margin: 0.2em 0;} .ord-proc .addresses > .address > .add a { display: inline-block; text-decoration: none; margin: 0.2em 0;} .ord-proc .addresses > .address > .add a > strong{ font-weight:900; font-size: 1.2em; } .ord-proc .cnt > h1 { font-size: 24px; margin-top:2.5em;} .ord-proc .pay-choice a.val {margin: 25px auto;} .ord-proc .pay-choice > .line-tabs > li > .info { position:absolute; right:-35px; top:0; bottom:0; margin:auto; width:25px; height:25px; background: #ccc; line-height: 23px; font-size: 20px; color:white; border-radius:100%;} .ord-proc .pay-choice > .solo-pay > .pay-modes { height:220px; } .ord-proc .pay-choice > .solo-pay .pay-mode {height:100%;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > h3 { margin:40px 0 25px 0;} .ord-proc .pay-choice > .solo-pay .pay-mode input[type="radio"] + label{ position:absolute; z-index: 5; display:block; width:50%; height:70px; left:0; right:0; margin:auto; } .ord-proc .pay-choice > .solo-pay .pay-mode input[type="radio"] + label:after{ left:0; right:0; top:18px; margin:auto;} .ord-proc .pay-choice > .solo-pay .pay-mode input[type="radio"] + label:before{ left:0; right:0; top:15px; margin:auto;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos .cards > li { display:inline-block; margin:0 2px 0 0;} .ord-proc .pay-choice > .solo-pay .my-cards { margin:25px auto; width:auto;} .ord-proc .pay-choice > .solo-pay .my-cards > select { margin:5px 0; width:auto;} .ord-proc .pay-choice > .solo-pay .only-card > .warnning { font-weight: 700; margin: 0.5em;} .ord-proc .pay-choice > .solo-pay .only-card > .cards { margin: 0 0 25px 0;} .ord-proc .pay-choice > .solo-pay .only-card > .cards > li {display:inline-block; width:calc(25% - 5px - 0.03em); max-width: 64px; margin: 4px 2px;} .ord-proc .pay-choice > .solo-pay .only-card > .cards > li > img {width:100%;} .ord-proc .pay-choice > .multi-pay .users > li { border-radius:3px; background:#f5f5f5; } .ord-proc .pay-choice > .multi-pay .users > li > .info > .name {width:150px; margin-left:10px} .ord-proc .pay-choice > .multi-pay .users > li > .info > .name .icon-guy {float:left; z-index: 10; width:2em; height:2em; margin-right:-2em; text-align: center;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .name .icon-guy:before { text-align: center; position:absolute; font-size:1.2em; top:50%; left:0; right:0; transform: translateY(-50%); margin:auto; color: #ccc;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .name input { float:left; padding-left:2.25em;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .named {width:150px; margin-left:15px; text-align: left; margin-top:0.2em;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .named.icon-guy:before { margin-right:5px; font-size:1.2em; bottom:-0.1em; color: #ccc;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .my-cards {text-align: right; width:auto;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .detail { color: #999; font-style:italic; text-align: left; } .ord-proc .pay-choice > .multi-pay .users > li > .amount { text-align: right;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > input { text-align: right;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > .money-type { float:right; width:20px; height:30px; line-height: 28px; text-align: center; } .ord-proc .pay-choice > .multi-pay .users > li > .delete { display:block; float:left; width:20px; height:30px; line-height: 30px; text-align: center; padding: 0; text-decoration: none;} .ord-proc .pay-choice > .multi-pay .rest { width:100%; max-width: 500px; margin: 10px auto; color:#ff344b; font-weight: 700;} .ord-proc .pay-choice > .multi-pay .rest > .title { float:left;padding-right:10px; width:calc(100% - 100px); text-align: right;} .ord-proc .pay-choice > .multi-pay .rest > .amount { float:left; width:100px; text-align: right;} /*multipay payment*/ .ord-proc .pay-choice > .multi-pay.payment { padding: 30px 0;} .ord-proc .pay-choice > .multi-pay.payment .users > li > .info { width:calc(100% - 130px);} .ord-proc .pay-choice > .multi-pay.payment .users > li > .info .named { float:left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .ord-proc .pay-choice > .multi-pay.payment .users > li > .amount {text-align: right; width:90px;} .ord-proc .pay-choice > .multi-pay.payment .users > li > .amount > .text { display:inline; line-height: 1.8em;} .ord-proc .pay-choice > .multi-pay.payment .users > li > .amount > .money-type { display:inline;} .ord-proc .pay-choice > .multi-pay.payment .users > li .status { float:right; position:relative; width:30px; height:30px; margin:0 5px;} .ord-proc .pay-choice > .multi-pay.payment .users > li.load .status:after { content:''; display:block; z-index: 10; width:40px; height:40px; margin:auto; top:-5px; left:-5px; background: url(/images/loader/spin.gif) no-repeat center; background-size: 100%; } .ord-proc .pay-choice > .multi-pay.payment .users > li.ok {background: rgba(130, 190, 25,0.15);} .ord-proc .pay-choice > .multi-pay.payment .users > li.ok .status { background:rgba(130, 190, 25,1); border-radius: 5px;} .ord-proc .pay-choice > .multi-pay.payment .users > li.ok .status:after { content:'\e90a';} .ord-proc .pay-choice > .multi-pay.payment .users > li.ok .icon-guy:before {color:rgba(130, 190, 25,0.5);} .ord-proc .pay-choice > .multi-pay.payment .users > li.fail {background: rgba(255, 52, 75,0.1);} .ord-proc .pay-choice > .multi-pay.payment .users > li.fail .status { background:rgba(255, 52, 75,1); border-radius: 5px;} .ord-proc .pay-choice > .multi-pay.payment .users > li.fail .status:after { content:'\e932';} .ord-proc .pay-choice > .multi-pay.payment .users > li.fail .icon-guy:before {color:rgba(255, 52, 75,0.5);} .ord-proc .pay-choice > .multi-pay.payment .users > li.ok .status:after, .ord-proc .pay-choice > .multi-pay.payment .users > li.fail .status:after { position:absolute; color:white; text-align:center; top:50%; transform:translateY(-50%); left:0; right:0; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .ord-proc .pay-choice > .multi-pay.payment .users > li.fail .fail-options {float: left; width:100%;} .ord-proc .pay-choice > .multi-pay.payment .users > li:not(.ok):not(.load) > .info { width:calc( 100% - 132px); margin-right: 15px;} } @media screen and (min-width: 1000px){ .ord-proc > .steps { margin-bottom:35px;} .ord-proc > .steps > ul { height:90px;} .ord-proc > .steps > ul > li { height:100%; width: 250px; line-height: 100px; font-size: 28px;} .ord-proc > .steps > ul > li.active > .underline { height:4px} .ord-proc .extra { float: left; width:calc(100% - 286px); padding-right: 24px;} .ord-proc .extra ul > li { width:calc(50% - 30px);} .ord-proc .extra ul > li:nth-of-type(2n) { margin-left:30px;} .ord-proc .extra h2 { font-size: 22px;} .ord-proc .recap { float: right; width:266px; } .ord-proc .order-check { float: left; width:calc(100% - 286px);} .ord-proc .order-check > ul.promos { width:50%; margin-left:50%; padding-right:25px;} .ord-proc .order-check > ul.promos > li { font-size: 16px;} .ord-proc .order-check .validation { background:#f5f5f5; padding:25px;} .ord-proc .order-check .validation > .pts { width:50%;} .ord-proc .order-check .validation > .total { float :right; width:50%; text-align: right;} .ord-proc .order-check .validation > .total > .price { font-size: 22px;} .ord-proc .order-check .validation > .val-fix { float:right; width:50%; clear:right} .ord-proc .order-check .validation > .val-fix.duo .val { margin: 0 0.5em;} .ord-proc .order-check .validation > .val-fix.duo .val-speed { margin-bottom: 0.5em; background: #96cf32;} /* pay mode */ .ord-proc .addresses { margin-bottom:40px;} .ord-proc .addresses > .address { width:calc(50% - 20px); margin-right:40px;} .ord-proc .addresses > .address:nth-of-type(2n) { margin-right: 0;} .ord-proc .addresses > .address > h2 { font-size: 24px; font-weight: 700;} .ord-proc .addresses > .address > h2 > .to-mob { display:none;} .ord-proc .addresses > .address > .detail { width:300px; font-size: 16px;} .ord-proc .addresses > .address > .actions { font-size: 16px; margin:0.1em 0;} .ord-proc .addresses > .address > .add { font-size: 16px; margin:0.5em 0;} .ord-proc .pay-choice > .line-tabs > li { min-width: 150px; } .ord-proc .pay-choice { border-radius:3px; border:1px solid #d5dce0;} .ord-proc .pay-choice > .solo-pay { padding:0 100px 0 100px;} .ord-proc .pay-choice > .solo-pay .pay-mode { float:left; height:230px; width:calc(50% - 15px); margin-right:30px; border-radius:3px; border:1px solid #d5dce0; margin-bottom: 3em;} .ord-proc .pay-choice > .solo-pay .pay-mode:nth-of-type(2n) { margin-right: 0px; } .ord-proc .pay-choice > .multi-pay .users > li { width:100%; max-width: 500px; margin: 10px auto; padding:10px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .info { float:left; width:calc( 100% - 120px);} .ord-proc .pay-choice > .multi-pay .users > li > .info .name { float:left;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .my-cards {float:right; margin-right:10px; } .ord-proc .pay-choice > .multi-pay .users > li > .info > .detail {float:left; width:100%; padding:10px 10px 5px 10px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount { float:left; width:95px; height:30px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > input{ float:left; width:calc(100% - 20px); padding:3px 8px 3px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > .money-type { font-size: 18px;} .ord-proc .pay-choice > .multi-pay .rest { font-size: 16px;} .ord-proc .pay-choice > .multi-pay .actions { width:100%; max-width: 500px; margin: 10px auto 0 auto;} .ord-proc .pay-choice > .multi-pay .actions > .add-user { float: left; width:calc(100% - 200px); margin-bottom: 3em;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cta { text-align: left; font-weight: 700; margin-top:0; font-size: 18px; margin-bottom:12px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .btn-grey-med { float: left; margin-right:10px; } .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards { float: left; width:100%;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li { float:left; margin: 10px 2px 0 2px; width:11%;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li > img { width:100%;} .ord-proc .pay-choice .val { margin-bottom:30px;} .ord-proc .grats { width: 90px; height: 90px; font-size: 60px; line-height: 105px;} .ord-proc > .cnt > .title { font-size: 20px; margin-bottom: 15px;} .ord-proc > .cnt > .btn-red-big { margin: 25px auto 25px auto;} /*val not fixed desktop .ord-proc .val-fix { width:100%; padding:15px 0;} .ord-proc .val-fix .val {padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;} .ord-proc .val-fix.duo { width:100%; padding:15px 0;} .ord-proc .val-fix.duo .val {padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;} .ord-proc .val-fix.duo .val-speed { padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;}*/ } @media screen and (min-width: 0px) and (max-width: 999px){ .ord-proc .val-fix { z-index: 10 ;position: fixed; bottom:0; left:0; padding-top:0.5em; padding-bottom: 0.5em; width:100%; background: #f5f5f5; box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2); } .ord-proc .val-fix.duo .val { height:auto; vertical-align:middle;padding:0.6em 1em 0.8em 1em; margin:auto auto; padding-left: 1em; padding-right: 1em; line-height: 1.2em;} .ord-proc .val-fix.duo .val-speed { height:auto; vertical-align:middle; display:inline-block; padding-left: 2.5em; background: #96cf32; padding-right: 1.5em; padding-top:0.6em; padding-bottom: 0.8em; line-height: 1.2em;} .ord-proc .val-fix.duo .val-speed .card {font-size: 0.8em;} .ord-proc .val-fix.duo .val-speed:before{position:absolute; top:calc(50%); bottom:auto; left:0.7em; font-size: 1.5em; line-height: 1em; transform: translateY(-50%);} } @media screen and (min-width: 750px) and (max-width: 999px){ .ord-proc > .steps { margin-bottom:30px;} .ord-proc > .steps > ul { height:75px;} .ord-proc > .steps > ul > li { height:100%; width: 225px; line-height: 80px; font-size: 26px;} .ord-proc > .steps > ul > li.active > .underline { height:4px} .ord-proc .extra ul > li { width:calc(50% - 10px); margin: 10px 0;} .ord-proc .extra ul > li:nth-of-type(2n) { margin-left:20px;} .ord-proc .order-check > ul.promos { width:50%; margin-left:50%; padding-right:25px;} .ord-proc .order-check > ul.promos > li { font-size: 16px;} .ord-proc .order-check > .validation { background:#f5f5f5; padding:25px;} .ord-proc .order-check > .validation > .pts { float :right; width:50%;} .ord-proc .order-check > .validation > .total { float :right; width:50%; text-align: right;} .ord-proc .order-check > .validation > .total > .price { font-size: 22px;} /* pay mode */ .ord-proc .addresses { margin-bottom:40px;} .ord-proc .addresses > .address { width:calc(50% - 20px); margin-right:40px;} .ord-proc .addresses > .address:nth-of-type(2n) { margin-right: 0;} .ord-proc .addresses > .address > h2 { font-size: 22px; font-weight: 700;} .ord-proc .addresses > .address > h2 > .to-mob { display:none;} .ord-proc .addresses > .address > .detail { width:300px; font-size: 16px;} .ord-proc .addresses > .address > .actions { font-size: 16px; margin:0.1em 0;} .ord-proc .addresses > .address > .add { font-size: 16px; margin:0.5em 0;} .ord-proc .cnt > h1 { text-align: center;} .ord-proc .pay-choice > .line-tabs > li { min-width: 150px;} .ord-proc .pay-choice { border-radius:3px; border:1px solid #d5dce0;} .ord-proc .pay-choice > .solo-pay { padding:0 40px 0 40px;} .ord-proc .pay-choice > .solo-pay .pay-mode { float:left; min-height: 15em; width:calc(50% - 15px); margin-right:30px; border-radius:3px; border:1px solid #d5dce0; margin-bottom: 3em;} .ord-proc .pay-choice > .solo-pay .pay-mode:nth-of-type(2n) { margin-right: 0px; } .ord-proc .pay-choice > .multi-pay .users > li { width:100%; max-width: 500px; margin: 10px auto; padding:10px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .info { float:left; width:calc( 100% - 120px);} .ord-proc .pay-choice > .multi-pay .users > li > .info > .name { float:left;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .my-cards {float:right; margin-right:10px; } .ord-proc .pay-choice > .multi-pay .users > li > .info > .detail {float:left; width:100%; padding:10px 10px 5px 10px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount { float:left; width:95px; height:30px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > input { float:left; width:calc(100% - 20px); padding:3px 8px 3px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > .money-type { font-size: 18px;} .ord-proc .pay-choice > .multi-pay .rest { font-size: 16px;} .ord-proc .pay-choice > .multi-pay .actions { width:100%; max-width: 500px; margin: 10px auto; padding:10px 0;} .ord-proc .pay-choice > .multi-pay .actions > .add-user { float: left; width:calc(100% - 200px);} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cta { text-align: left; font-weight: 700; margin-top:0; font-size: 18px; margin-bottom:12px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .btn-grey-med { float: left; margin-right:10px; } .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards { float: left; width:100%; margin-bottom:25px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li { float:left; margin: 10px 2px; width:11%;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li > img { width:100%;} .ord-proc .pay-choice > .multi-pay .actions > .val { float: right; margin-top:30px;} .ord-proc .grats { width: 90px; height: 90px; font-size: 60px; line-height: 105px;} /*val not fixed tablette*/ .ord-proc .val-fix { width:100%; padding:15px 0;} .ord-proc .val-fix .val {padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;} .ord-proc .val-fix.duo { width:100%; padding:15px 0;} .ord-proc .val-fix.duo .val {padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;} .ord-proc .val-fix.duo .val-speed { padding-top:15px; padding-bottom:15px; height: auto; line-height: 1.2em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .ord-proc > .steps { margin-bottom:20px;} .ord-proc > .steps > ul { height:55px;} .ord-proc > .steps > ul > li { height:100%; width: 94px; line-height: 60px; font-size: 15px;} .ord-proc > .steps > ul > li.active > .underline { height:3px} .ord-proc .recap {padding: 10px; margin-bottom: 20px; max-width: 420px; margin-left:auto; margin-right:auto;} .ord-proc .recap > .data {margin-bottom: 0.3em; } .ord-proc .recap > .title {margin-bottom: 0.5em; } .ord-proc .recap > .title.mobile-hide, .ord-proc .recap > .data.mobile-hide {display:none;} .ord-proc .extra h2 { font-size: 18px;} .ord-proc .extra ul > li {width:100%; margin: 10px 0;} .ord-proc .extra, .ord-proc .order-check {max-width: 420px; margin: auto;} .ord-proc .order-check > ul.promos > li { font-size: 16px;} .ord-proc .order-check > .validation > .total > .price { font-size: 22px;} .ord-proc .order-check > .validation > .total > .btn-red-big { margin: 1em 0; } .ord-proc .order-check > .validation > .pts { margin-top:1em;} /* pay mode */ .ord-proc .addresses > .address {margin-top:0; } .ord-proc .addresses { margin-bottom:1em;} .ord-proc .addresses > .address { width:calc(50% - 10px); margin-right:20px;} .ord-proc .addresses > .address:nth-of-type(2n) { margin-right: 0;} .ord-proc .addresses > .address > h2 { font-size: 18px; font-weight: 700;} .ord-proc .addresses > .address > h2 > .to-mob { display:none;} .ord-proc .addresses > .address > h2 > .no-mob { display:block;} .ord-proc .addresses > .address > .m-show { display: block; margin:0.5em 0; font-size: 14px;} .ord-proc .addresses > .address.active > .m-show > .more { display: none;} .ord-proc .addresses > .address:not(.active) > .m-show > .less { display: none;} .ord-proc .addresses > .address > .detail { width:100%; font-size: 14px;} .ord-proc .addresses > .address > .actions { font-size: 14px; margin:0.1em 0;} .ord-proc .addresses > .address > .add { font-size: 14px; margin:0.3em 0;} .ord-proc .addresses > .address:not(.active) > .detail { display:none;} .ord-proc .addresses > .address:not(.active) > .actions { display:none;} .ord-proc .pay-choice > .line-tabs > li { min-width: 110px;} .ord-proc .pay-choice > .solo-pay > .pay-modes { height: auto;} .ord-proc .pay-choice > .solo-pay .pay-mode { float:left; min-height:220px; height:auto; width:calc(50% - 5px); margin-right:10px;padding:0 0.5em; border-radius:3px; border:1px solid #d5dce0;} .ord-proc .pay-choice > .solo-pay .pay-mode:nth-of-type(2n) { margin-right: 0px; } .ord-proc .cnt > h1 {font-size: 20px; margin-top: 1em; text-align: center;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > h3 { font-size: 18px} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > div { font-size: 14px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos .cards > li { display:inline-block; margin:0 2px 4px 0; width:calc(25% - 10px); max-width:64px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos .cards > li > img { width:100%;} .ord-proc .pay-choice > .multi-pay > .pay-modes{} .ord-proc .pay-choice > .multi-pay .users > li { width:100%; max-width: 320px; margin: 15px auto; padding:10px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .info { float:left; width:calc( 100% - 120px);} .ord-proc .pay-choice > .multi-pay .users > li > .info > .name { float:left;} .ord-proc .pay-choice > .multi-pay .users > li > .info > .my-cards {float:left; margin:10px 0 0 10px; } .ord-proc .pay-choice > .multi-pay .users > li > .info > .detail {float:left; width:calc(100% + 120px); padding:20px 10px 5px 10px; font-size: 14px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount { float:left; width:95px; height:30px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > input { float:left; width:calc(100% - 20px); padding:3px 8px 3px 3px;} .ord-proc .pay-choice > .multi-pay .users > li > .amount > .money-type { font-size: 18px;} .ord-proc .pay-choice > .multi-pay .rest { font-size: 16px; max-width:320px;} .ord-proc .pay-choice > .multi-pay .rest > .title {text-align: left} .ord-proc .pay-choice > .multi-pay .actions { width:100%; max-width: 320px; margin: 10px auto; padding:10px 0;} .ord-proc .pay-choice > .multi-pay .actions > .add-user { float: left; width:100%;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cta { text-align: left; font-weight: 700; margin-top:0; font-size: 18px; margin-bottom:12px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .btn-grey-med { float: left; margin-right:10px; } .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards { float: left; width:100%; margin-bottom:10px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li { float:left; margin: 10px 2px; width:26px;} .ord-proc .pay-choice > .multi-pay .actions > .add-user > .cards > li > img { width:100%;} .ord-proc .pay-choice > .multi-pay .actions > .val { margin-top:10px;} .ord-proc .grats { width: 70px; height: 70px; font-size: 45px; line-height: 80px;} /*val fixed*/ .ord-proc .val-fix.duo .val {max-width: calc(50% - 10px);} } @media screen and (min-width: 0px) and (max-width: 340px){ .ord-proc .order-check > ul.promos > li {font-size: 13px;} .ord-proc .addresses > .address { width:calc(50% - 5px); margin-right:10px;} .ord-proc .addresses > .address > h2 > .to-mob { display:block;} .ord-proc .addresses > .address > h2 > .no-mob { display:none;} .ord-proc .addresses > .address > .detail { font-size: 13px;} .ord-proc .cnt > h1 {font-size: 18px;} .ord-proc .pay-choice > .solo-pay .pay-mode { min-height:185px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > h3 { font-size: 16px; margin-bottom:10px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > div { font-size: 12px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos > .my-cards { font-size: 12px; margin-top:10px;} .ord-proc .pay-choice > .solo-pay .pay-mode > .infos .cards > li { display: inline-block; margin: 0 2px 6px 0; width:calc(25% - 4px - 0.3em);} .ord-proc .pay-choice > .multi-pay.payment .users > li:not(.ok):not(.load) > .info { width:calc( 100% - 132px); margin-right: 15px;} .ord-proc .pay-choice > .multi-pay.payment .users > li:not(.ok):not(.load) > .info > .name { width:100%;} } /*--------- order - current - follow ------------------------------------------------------------------------*/ @media screen and (min-width:0px){ /*grats*/ .ord-proc .grats { background: #ff344b; border-radius:100%; color:white; margin: auto auto 0.4em auto;} .ord-proc > .cnt > .title { font-weight: 700; color:#ff344b; margin:1.5em auto;} .ord-proc > .cnt > .title:before { display:inline-block; background: #ff344b; border-radius:100%; color:white; margin: auto 0.75em auto auto; bottom:-0.2em; width:1.75em; height:1.75em; line-height: 1.75em;} .current-order { border: 1px solid #d5dce0; border-radius:3px; } .current-order .infos { text-align: left;} .current-order .infos h3 { font-size: 1.4em; margin:0 0 0.5em 0;} .current-order .infos h4 { margin:0 0 0.5em 0;} .current-order .infos .resto-name a { text-decoration: none;} .current-order .infos .date { font-size: 1em; color:#999; margin: 0 0 0.5em 0;} .current-order .infos .address { font-size: 1em; color:#999; margin: 0 0 0.5em 0;} .current-order .infos .tel { font-size: 1em; color:#999; font-weight: 700; margin: 0 0 0.5em 0;} .current-order .infos > .price { font-size: 1.2em; font-weight: 700; color:#999; margin: 0 0 0.5em 0;} .current-order .infos .order { font-size: 14px; margin-bottom:0.5em;} .current-order .infos .order:not(.active) > ul { display:none;} .current-order .infos .order > a.detail { color:#999;} .current-order .infos .order:not(.active) > a.detail > .less { display:none;} .current-order .infos .order.active > a.detail > .more { display:none;} .current-order .infos .resto { padding-top:1em; margin-top:1.5em; border-top:1px solid #d5dce0;} .current-order .infos .other-info { padding-top:1em; margin-top:1em; border-top:1px solid #d5dce0;} .current-order .delivering > .del-infos > .time { color: #ff344b; font-weight: 700;} .current-order .delivering .center { text-align: center; } .current-order .delivering .btn-red-big { margin: 1em auto; } .current-order .delivering .state { margin:2em 0; position:relative;} .current-order .delivering .state:before {content:''; position:absolute; display:block; background: #d5dce0; width:4px; left:1.5em; top:0.5em; border-radius:0.5em; height:calc(100% - 1em); transform: translateX(-50%);} .current-order .delivering .state li { position:relative; margin:1em 0 1em 3em; text-align: left; } .current-order .delivering .state li:before, .current-order .delivering .state li:after {content:''; position:absolute; left:calc(-1.5em); top:0.65em; display:block; background: #d5dce0; width:12px; height:12px; border-radius:100%; transform: translate(-50%,-50%);} .current-order .delivering .state li.ok:after { background:#96cf32; width:12px; height:12px; } .current-order .delivering .state li.fail:after { background:#df5400; width:12px; height:12px; } .current-order .delivering .map { position:relative; overflow:hidden;} .current-order .delivering .map img { width:100%;} .current-order .delivering .deliver-man { border: 1px solid #d5dce0; border-top: 0px; padding: 0.5em; border-radius: 0 0 3px 3px;} .current-order .delivering .deliver-man .portrait{ float:left; text-align: center;} .current-order .delivering .deliver-man .portrait .image{ border-radius:50%; overflow: hidden; width: 4em; height:4em; } .current-order .delivering .deliver-man .portrait img { width:100%;} .current-order .delivering .status { background: #ff344b; color:white; font-size: 1em; padding: 0.3em 0.5em; } .current-order .delivering .status .delay { font-weight: 700; } .current-order .delivering .deliver-man .sheet{position: absolute; left:5.3em; top:50%; transform: translateY(-50%); width:calc(100% - 5.5em);} .current-order .delivering .deliver-man .sheet .name{font-weight: 900; margin-bottom: 0.5em;} .current-order .delivering .deliver-man .sheet .phone > span { cursor: pointer;} .current-order .delivering .deliver-man .sheet .phone > span:hover { text-decoration: underline;} .current-order .delivering .deliver-man .sheet .phone > a { font-weight: 700; } .current-order .delivering .deliver-man .sheet .phone.active > span { display: none;} .current-order .delivering .deliver-man .sheet .phone.active > a { display:inline;} .current-order .delivering .deliver-man .sheet .phone{font-size: 1em; color:#999; text-decoration: none;} .current-order .delivering .deliver-man .sheet .phone:before {margin-right:0.2em;bottom: -0.15em;}*/ } @media screen and (min-width: 1000px){ .current-order { margin:25px 0 15px 0;} .current-order .infos { float:left; width:336px; padding: 28px 0 28px 28px;} .current-order .delivering { float:left; width:calc(100% - 336px); padding: 28px;} .current-order .delivering > .del-infos { text-align: center;} .current-order .delivering > .del-infos > .title { font-size: 14px;} .current-order .delivering > .del-infos > .time { font-size: 24px; margin-top:8px;} .current-order .map { margin-top:20px; height:250px; border-radius: 3px;} .current-order .delivering .deliver-man .sheet .phone > span {} .current-order .delivering .deliver-man .sheet .phone > a.mobile { display: none;} .current-order .delivering .deliver-man .sheet .phone > a.number { } } @media screen and (min-width: 750px) and (max-width: 999px){ .current-order { margin:25px 0 15px 0;} .current-order .infos { float:left; width:275px; padding: 20px 0 20px 20px;} .current-order .delivering { float:left; width:calc(100% - 275px); padding: 20px;} .current-order .delivering > .del-infos { text-align: center;} .current-order .delivering > .del-infos > .title { font-size: 14px;} .current-order .delivering > .del-infos > .time { font-size: 24px; margin-top:8px;} .current-order .map { margin-top:20px; height:250px; border-radius: 3px;} .current-order .delivering .deliver-man .sheet .phone > span { display:none; } .current-order .delivering .deliver-man .sheet .phone > a.number { display:none; } } @media screen and (min-width: 0px) and (max-width: 749px){ .current-order {margin: 10px -10px; border-radius: 0; border:0; border-top:1px solid #d5dce0;} .current-order .infos { padding: 1.2em 10px 0 10px; } .current-order .infos > h3 { width:calc(100% - 90px); font-size: 18px; margin:0 0 4px 0;} .current-order .infos > .id-order {margin-bottom:0} .current-order .infos > .price { position: absolute; top:0.6em; right:0; width:90px; text-align: right; padding: 10px 10px 0 0; font-size: 16px;} .current-order .infos > .order { font-size: 14px; padding: 10px 0;} .current-order .infos > .order > a.detail { display:block; } .current-order .infos .resto, .current-order .infos .other-info, .current-order .delivering > .del-infos { padding-left:10px; padding-right:10px; margin-left:-10px; margin-right:-10px; width:calc(100% + 20px);} .current-order .infos .resto { padding-top:12px; padding-bottom:5px; margin-top:0em; border-top:1px solid #d5dce0; } .current-order .infos .other-info { padding-top:12px; padding-bottom:5px; margin-top:0px; background:#f5f5f5; border:0px;} .current-order .delivering {padding:10px;} .current-order .delivering { padding-top:0; margin-top:0;} .current-order .delivering > .del-infos { text-align: left; background:#ff344b; padding:10px 10px; color:white;} .current-order .delivering > .del-infos > .title { display:inline; font-size: 14px;} .current-order .delivering > .del-infos > .time { display:inline; font-size: 18px; margin-top:3px; margin-left:0.1em; color:white;} .current-order .map { margin-top:10px; max-height: 40vh; height:75vw; width:100%; border-radius: 0px; } .current-order .map > img{ width:100%;} .current-order .delivering .state:before { left:0.7em; top:0.5em;} .current-order .delivering .state li { margin:1em 0 1em 2em; } .current-order .delivering .state li:before, .current-order .delivering .state li:after {left:-1.3em; top:0.65em;} .current-order .delivering .deliver-man .sheet .phone > span { display:none; } .current-order .delivering .deliver-man .sheet .phone > a.number { display:none; } } /*--------- Basket list ------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .basket-list > li {} .basket-list > li > .dish { text-decoration: none; width:100%;} .basket-list > li > .dish > .dish-name { float:left; color:#333; width: calc(100% - 75px); } .basket-list > li > .dish > .dish-name > .quantity { float:left; width: 25px; color: #999; margin-right: 2px;} .basket-list > li > .dish > .price { float:left; width:75px; font-weight: 700; text-align: right;} .basket-list > li > .dish > .quantity { float:left; color: #999;} .basket-list > li > .dish > .options { float:left; color: #999; margin-top:5px; width:100%;} .basket-list > li > .dish .options.niv2 { padding-left: 1em;} .basket-list > li > .dish .options.niv2:before { content:'- '; } .basket-list > li > .dish .options.niv3 { font-size: 0.8em; padding-left: 2.5em;} .basket-list > li > .dish .options.niv3:before { content:'- '; } } @media screen and (min-width: 1000px){ .basket-list > li { padding: 6px 0px; margin: 5px 0px; font-size: 14px; text-align: left; line-height: 1.2em;} .basket-list > li > .dish > .dish-name > .quantity { width: 25px; color: #999; margin-right: 2px;} } @media screen and (min-width: 750px) and (max-width: 999px){ .basket-list > li { padding: 6px 0px; margin: 20px 0px; font-size: 14px; text-align: left; line-height: 1.2em;} .basket-list > li > .dish > .dish-name > .quantity { width: 25px; color: #999; margin-right: 2px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .basket-list > li { padding: 6px 0px; margin: 5px 0px 5px 0px; font-size: 14px; text-align: left; line-height: 1.2em;} .basket-list > li > .dish { float: left;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*--------- popin delay / reservations ------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .popin-cnt .reservation .steps{ background:#f5f5f5;} .popin-cnt .reservation .steps > ul > li { display: inline-block; color: #999; text-align: center;} .popin-cnt .reservation .steps > ul > li.active { color: #ff344b;} .popin-cnt .reservation .steps > ul > li.active > .underline { position:absolute; bottom:0; left:0; right:0; margin: 0 auto; width:80%; height:4px; background: #ff344b; } .popin-cnt .reservation .steps > ul > li.completed { color: #333; cursor:pointer;} .popin-cnt .reservation .steps > ul > li.completed:before { display: none;} .popin-cnt .reservation .steps > ul > li:not(.completed) > span { display: none;} .popin-cnt .reservation .calendar-resa { text-align: center;} .popin-cnt .reservation .calendar-resa > .calendar-call { margin:2em auto; display:inline-block;} .popin-cnt .reservation .choice .grats { background: #ff344b; border-radius:100%; color:white; margin: auto auto 0.4em auto;} .popin-cnt .reservation .choice .sub-title { font-weight: 700;} .popin-cnt .reservation .choice .sub-title.red { color: #ff344b;} .popin-cnt .reservation .login h2 { font-weight: 700; background: none; color:#333;} .popin-cnt .reservation .login {max-width: none;} .popin-cnt .reservation .choice ul > li { display:inline-block; } .popin-cnt .reservation .choice ul > li > a { display:block; height:auto; line-height: normal; text-decoration: none; border-radius:3px; border: 1px solid #d5dce0; transition:0.5s;} .popin-cnt .reservation .choice ul > li > a:hover { border: 1px solid #999; color: #000; background:#f5f5f5;} .popin-cnt .reservation .choice ul > li > a.active { border: 1px solid #ff344b; color: white; background:#ff344b;} .popin-cnt .reservation .choice .sub-options > a { color: #999;} .popin-cnt .reservation .choice .sub-options > a:hover { color: #666;} } @media screen and (min-width: 1000px){ .popin-cnt .reservation .steps { } .popin-cnt .reservation .steps > h3 { margin: 0; padding: 15px 0 0 0; text-align: center;} .popin-cnt .reservation .steps > p { margin: 0; padding: 5px 0 15px 0; text-align: center;} .popin-cnt .reservation .steps > ul { height:80px;} .popin-cnt .reservation .steps > ul > li { line-height:80px; width:150px; height:100%;} .popin-cnt .reservation .steps > ul > li:before { font-size: 35px; bottom:-0.18em;} .popin-cnt .reservation .steps > ul > li > span { font-size: 18px;} .popin-cnt .reservation .choice .grats { width: 90px; height: 90px; font-size: 60px; line-height: 105px;} .popin-cnt .reservation .choice { padding: 50px 80px 30px 80px;} .popin-cnt .reservation .choice .sub-title { font-size: 18px; padding-bottom: 15px;} .popin-cnt .reservation .choice > p { margin:0px 0 35px 0;} .popin-cnt .reservation .choice > a.btn-red-big { margin:20px 0 35px 0;} .popin-cnt .reservation .choice input { margin-bottom: 10px;} .popin-cnt .reservation .choice select { margin-bottom: 10px;} .popin-cnt .reservation .login h2 { font-size: 18px; padding-bottom: 15px; margin-top: 2em;} .popin-cnt .reservation .hour.choice > .hour-section { padding: 0 0 30px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li { font-size: 14px; margin: 0 5px 10px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li > a { padding:6px 6px; width:60px; } .popin-cnt .reservation .group.choice > ul > li { font-size: 14px; margin: 0 5px 10px 0;} .popin-cnt .reservation .group.choice > ul > li > a { padding:8px 6px; width:70px; } .popin-cnt .reservation .group.choice > select { width:120px; margin: 15px auto 0 auto; } .popin-cnt .bottom > .pts { position:absolute; left:110px; width: calc(100% - 220px); padding-top: 20px; text-align: center; line-height: 1.2em; color: #ff344b;} .popin-cnt .bottom > .pts > .icon-points { display: inline-block; font-size: 40px;} .popin-cnt .bottom > .pts > .pts-numbers { display: inline-block; text-align: left; padding-left: 10px; } .popin-cnt .bottom > .pts > .pts-numbers > span { font-size: 1.6em; line-height: 1.2em;} } @media screen and (min-width: 750px) and (max-width: 999px){ .popin-cnt .reservation .steps { } .popin-cnt .reservation .steps > h3 { margin: 0; padding: 15px 0 0 0; text-align: center;} .popin-cnt .reservation .steps > p { margin: 0; padding: 5px 0 15px 0; text-align: center;} .popin-cnt .reservation .steps > ul { height:80px;} .popin-cnt .reservation .steps > ul > li { line-height:80px; width:150px; height:100%;} .popin-cnt .reservation .steps > ul > li:before { font-size: 35px; bottom:-0.18em;} .popin-cnt .reservation .steps > ul > li > span { font-size: 18px;} .popin-cnt .reservation .choice .grats { width: 90px; height: 90px; font-size: 60px; line-height: 105px;} .popin-cnt .reservation .choice { padding: 50px 80px 30px 80px;} .popin-cnt .reservation .choice .sub-title { font-size: 18px; padding-bottom: 15px;} .popin-cnt .reservation .choice > p { margin:0px 0 35px 0;} .popin-cnt .reservation .choice > a.btn-red-big { margin:0 0 35px 0;} .popin-cnt .reservation .choice input { margin-bottom: 10px;} .popin-cnt .reservation .choice select { margin-bottom: 10px;} .popin-cnt .reservation .login h2 { font-size: 18px; padding-bottom: 15px; margin-top: 2em;} .popin-cnt .reservation .hour.choice > .hour-section { padding: 0 0 30px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li { font-size: 14px; margin: 0 8px 10px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li > a { padding:8px 6px; width:80px; } .popin-cnt .reservation .group.choice > ul > li { font-size: 14px; margin: 0 5px 10px 0;} .popin-cnt .reservation .group.choice > ul > li > a { padding:8px 6px; width:70px; } .popin-cnt .reservation .group.choice > select { width:120px; margin: 15px auto 0 auto; } .popin-cnt .reservation .choice.other button { margin-top: 15px;} .popin-cnt .reservation .login {width:70%; margin:auto} .popin-cnt .bottom > .pts { position:absolute; left:110px; width: calc(100% - 220px); padding-top: 20px; text-align: center; line-height: 1.2em; color: #ff344b;} .popin-cnt .bottom > .pts > .icon-points { display: inline-block; font-size: 40px;} .popin-cnt .bottom > .pts > .pts-numbers { display: inline-block; text-align: left; padding-left: 10px; } .popin-cnt .bottom > .pts > .pts-numbers > span { font-size: 1.6em; line-height: 1.2em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .popin-cnt .reservation .steps { } .popin-cnt .reservation .steps > h3 { margin: 0; padding: 10px 10px 0 10px; font-size: 16px; margin:0px !important;text-align: center !important;} .popin-cnt .reservation .steps > p { margin: 0; padding: 5px 30px 10px 30px; font-size: 14px; text-align: center;} .popin-cnt .reservation .steps > ul { height:50px;} .popin-cnt .reservation .steps > ul > li { line-height:50px; width:31%; height:100%;} .popin-cnt .reservation .steps > ul > li:before { font-size: 25px; bottom:-0.18em;} .popin-cnt .reservation .steps > ul > li > span { font-size: 12px;} .popin-cnt .reservation .choice .grats { width: 70px; height: 70px; font-size: 45px; line-height: 80px;} .popin-cnt .reservation .choice { padding: 40px 20px 10px 20px; margin:auto;} .popin-cnt .reservation .choice .sub-title { font-size: 16px; padding-bottom: 15px;} .popin-cnt .reservation .choice > p { margin:0px 0 20px 0; font-size: 14px;} .popin-cnt .reservation .choice > a.btn-red-big { margin:0 0 20px 0;} .popin-cnt .reservation .choice input { margin-bottom: 8px;} .popin-cnt .reservation .choice select { margin-bottom: 8px;} .popin-cnt .reservation .login h2 { font-size: 16px; padding-bottom: 15px; margin-top: 2em;} .popin-cnt .reservation .hour.choice > .hour-section { padding: 0 0 20px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li { font-size: 14px; margin: 0 5px 10px 0;} .popin-cnt .reservation .hour.choice > .hour-section > ul > li > a { padding:6px 8px; } .popin-cnt .reservation .group.choice > ul > li { font-size: 14px; margin: 0 2px 5px 0;} .popin-cnt .reservation .group.choice > ul > li > a { padding:6px 4px; width:60px; } .popin-cnt .reservation .group.choice > select { width:100px; margin: 15px auto 0 auto; } .popin-cnt .reservation .choice.other { padding: 40px 10px 10px 10px;} .popin-cnt .reservation .choice.other button { margin-top: 15px;} .popin-cnt .bottom > .pts { text-align: center; line-height: 1.2em; color: #ff344b;} .popin-cnt .bottom > .pts > .icon-points { display: inline-block; font-size: 40px;} .popin-cnt .bottom > .pts > .pts-numbers { display: inline-block; text-align: left; padding-left: 10px; } .popin-cnt .bottom > .pts > .pts-numbers > span { font-size: 1.6em; line-height: 1.2em;} } @media screen and (min-width: 341px) and (max-width: 749px){ .popin-cnt .reservation .steps > ul > li > span { font-size: 14px;} .popin-cnt .reservation .choice { max-width:380px; } .popin-cnt .reservation .login { max-width:340px; margin: auto; } .popin-cnt .reservation .login > .tab-cnt { border: 1px solid #d5dce0; } } @media screen and (min-width: 0px) and (max-width: 360px){ .popin-cnt .reservation .steps > ul > li > span { font-size: 13px; letter-spacing: 0.01em; line-height: 15px;} .popin-cnt .reservation > .content { } } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page contact------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-contact > .contact h1 {} .page-contact > .contact h2 {line-height: 1.4em; } .page-contact > .contact > .cnt > .contact-form { border:1px solid #d5dce0; text-align: left; border-radius:3px;} .page-contact > .contact > .cnt > .contact-form .input-cnt.email { width:100%;} .page-contact > .contact > .cnt > .sav { border:1px solid #d5dce0; border-radius:3px;} .page-contact > .contact > .cnt > .sav > .icon-sav:before { color: #4285f4;} .page-contact > .contact > .cnt > .sav > .icon-phone:before { font-size: 1.1em; margin-right:0.2em; bottom:-0.2em;} .page-contact > .contact > .cnt > .sav > .icon-phone > a { text-decoration: none;} .page-contact > .contact > .cnt > .sav > .icon-phone > a:hover { color: #4285f4;} .page-contact > .contact > .cnt > .contact-form .input-cnt {margin-bottom: 10px;} .page-contact > .contact > .cnt > .contact-form .input-cnt.left, .page-contact > .contact > .cnt > .contact-form .input-cnt.right { float:left; width:calc(50% - 5px);} .page-contact > .contact > .cnt > .contact-form .input-cnt.right { margin-left:10px;} } @media screen and (min-width: 750px){ .page-contact > .contact h1 {text-align: left; margin:45px 0;} .page-contact > .contact h2 {font-size:22px; text-align: left; margin:0px 0 20px 0; width:90%;} .page-contact > .contact > .cnt > .contact-form { float:left; width:calc(65% - 35px); margin-right:35px; padding:20px; } .page-contact > .contact > .cnt > .contact-form .civil { margin:0 10px 20px 0;} .page-contact > .contact > .cnt > .contact-form .civil > input[type='radio'] + label { display:inline-block;} .page-contact > .contact > .cnt > .contact-form .msg { display:inline-block; width:100%; max-width: 100%; margin:0 0 10px 0;} .page-contact > .contact > .cnt > .contact-form > form > a { padding: 0 30px; margin:10px auto 0 auto;} .page-contact > .contact > .cnt > .sav { float:left; width:35%; padding:20px;} .page-contact > .contact > .cnt > .sav > .icon-sav { margin:40px 0 20px 0;} .page-contact > .contact > .cnt > .sav > .icon-sav:before { font-size:100px;} .page-contact > .contact > .cnt > .sav > .icon-phone { font-size: 22px; margin:20px 0 40px -0.7em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-contact > .contact h1 {text-align: left; margin:25px 0;} .page-contact > .contact h2 {font-size:20px; text-align: center; margin:0px 0 20px 0;} .page-contact > .contact > .cnt > .contact-form { padding:20px; text-align: center; } .page-contact > .contact > .cnt > .contact-form .civil { margin:0 10px 20px 0;} .page-contact > .contact > .cnt > .contact-form .civil > input[type='radio'] + label { display:inline-block;} .page-contact > .contact > .cnt > .contact-form .msg { display:inline-block; width:100%; max-width: 100%; margin:0 0px 10px 0;} .page-contact > .contact > .cnt > .contact-form > form > a { padding: 0 30px; margin:10px auto 0 auto;} .page-contact > .contact > .cnt > .sav { padding:20px; margin-top:40px;} .page-contact > .contact > .cnt > .sav > .icon-sav { margin:30px 0 15px 0;} .page-contact > .contact > .cnt > .sav > .icon-sav:before { font-size:100px;} .page-contact > .contact > .cnt > .sav > .icon-phone { font-size: 22px; margin:15px 0 25px -0.7em;} .page-contact > .contact > .cnt > .sav > .icon-phone > a:hover { color: #4285f4;} } @media screen and (min-width: 0px) and (max-width: 340px){ .page-contact > .contact h2 {font-size:18px; text-align: center; margin:0px 0 20px 0;} .page-contact > .contact > .cnt > .contact-form { padding:20px 15px; } .page-contact > .contact > .cnt > .contact-form .input-cnt {margin-bottom: 10px;} .page-contact > .contact > .cnt > .contact-form .input-cnt.left, .page-contact > .contact > .cnt > .contact-form .input-cnt.right { float:left; width:100%;} .page-contact > .contact > .cnt > .contact-form .input-cnt.right { margin-left:0px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page newsletter-infos------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-newsletter-infos > .newsletter-infos h1 {} .page-newsletter-infos > .newsletter-infos form > p { float:left; font-size: 14px;} .page-newsletter-infos > .newsletter-infos form > div { float:left;} .page-newsletter-infos > .newsletter-infos .cnt > form > .data-name {font-weight: 700;} .page-newsletter-infos > .newsletter-infos .cnt > form > .civil > label { display:inline-block; margin-right:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .civil > label:last-of-type { margin-right:0;} .page-newsletter-infos > .newsletter-infos .cnt > form > .input-cnt.birth input, .page-newsletter-infos > .newsletter-infos .cnt > form > .input-cnt.birth select {float:left; width:calc((100% - 8px) / 3); margin-left:4px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .input-cnt.birth > .day {margin-left:0px;} /* Geo fields */ .page-newsletter-infos > .newsletter-infos .cnt > form > .field.geo > div { float:left; width:calc((100% - 20px) / 2 ); text-align: left; margin-right:10px; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .field.geo > .ville_cp:not(.styled-select) , .page-newsletter-infos > .newsletter-infos .cnt > form > .field.geo > .ville.text {width:calc(100% - 10px); text-align: left;} .page-newsletter-infos .account-call { margin-top:2em; } } @media screen and (min-width: 750px){ .page-newsletter-infos > .newsletter-infos .cnt > p { max-width:600px; margin:1em auto; } .page-newsletter-infos > .newsletter-infos .cnt > form { max-width:650px; margin:2em auto 1em auto;} .page-newsletter-infos > .newsletter-infos .cnt > form > .data-name {width:200px; padding-right: 20px; padding-top:0.5em; text-align: left; clear:left;} .page-newsletter-infos > .newsletter-infos .cnt > form > .civil {width:calc(100% - 200px); padding-top:0.5em; text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .input-cnt.birth {width:calc(100% - 200px); padding-top:0.5em; text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .country { width:calc((100% - 200px - 10px) / 2 ); text-align: left; margin-right:10px; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .postal { width:calc((100% - 200px - 10px) / 2 ); text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .phone-code { width:calc((100% - 200px - 10px) / 2 ); text-align: left; margin-right:10px; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .phone { width:calc((100% - 200px - 10px) / 2 ); text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .partner-offer {width:calc(100% - 200px); text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .btn-cnt {width:calc(100% - 200px); text-align: left; margin-left:200px; margin-bottom:20px;} /* select geo ///////////////////////*/ .page-newsletter-infos > .newsletter-infos .cnt > form > .field.geo { width:calc(100% - 190px); text-align: left; margin-right:-10px;} .page-newsletter-infos .account-call h3 { font-size: 24px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul { margin:auto;width:565px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li { float:left; margin-bottom:25px; margin-right:25px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li:nth-of-type(2n) {margin-right:0;} } @media screen and (min-width: 1000px){ .page-newsletter-infos > .newsletter-infos .cnt > form > .data-name {padding-top:1em;} .page-newsletter-infos > .newsletter-infos .cnt > form > .civil {padding-top:1em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-newsletter-infos > .newsletter-infos .cnt > p { max-width:360px; margin:1em auto; font-size: 14px;} .page-newsletter-infos > .newsletter-infos .cnt > form { max-width:360px; margin:2em auto 1em auto; } .page-newsletter-infos > .newsletter-infos .cnt > form > .data-name {width:100%; margin-bottom:10px; text-align: center; } .page-newsletter-infos > .newsletter-infos .cnt > form > .civil {text-align: center; width:100%; margin-bottom: 1em;} .page-newsletter-infos > .newsletter-infos .cnt > form > .input-cnt.birth {width:100%; text-align: left; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .phone-code { width:calc((100% - 10px) / 2 ); text-align: left; margin-right:10px; margin-bottom:20px;} .page-newsletter-infos > .newsletter-infos .cnt > form > .phone { width:calc((100% - 10px) / 2 ); text-align: left; margin-bottom:20px;} /* select geo ///////////////////////*/ .page-newsletter-infos > .newsletter-infos .cnt > form > .field.geo { width:calc(100% + 10px); text-align: left; margin-right:-10px;} .page-newsletter-infos .account-call h3 { font-size: 18px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul { margin:auto;width:100%;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li { float:left; width:calc(50% - 5px); margin-bottom:10px; margin-right:10px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li > img { width:100%;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li:nth-of-type(2n) {margin-right:0;} } @media screen and (min-width: 0px) and (max-width: 480px){ .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul { margin:auto;width:100%;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li { float:left; width:100%; margin-bottom:10px;} .page-newsletter-infos > .newsletter-infos .cnt .iplus > ul > li > img { width:100%; max-width:270px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page site-map------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .site-map {text-align: left;} .site-map h2 { padding:0.5em; margin-bottom:0; background: #ff344b; color:white;} .site-map h2 > a {color:white;} .site-map h2 {color:white;} .site-map h3 { border-bottom:2px solid #d5dce0; padding:0.5em; margin-bottom:0; color:#999;} .site-map h3 > a {color:#333;} .site-map h3 {color:#333;} .site-map ul { background: #f5f5f5; padding:1.5em 1em 2em 1em;} .site-map ul > li { background: #f5f5f5; padding:0.5em;} .site-map ul > li > a { display: inline-block; background: #f5f5f5; margin:-0.2em 0 -0.2em 0em; text-decoration: none;} } @media screen and (min-width: 1000px){ .site-map .col-3-2-1 {-moz-column-count:3;column-count:3; -moz-column-gap:24px; column-gap:24px;} .site-map .blocks-3-2-1 > .col-block {float:left; width:calc((100% - 48px)/3); margin-right:24px;} .site-map .blocks-3-2-1 > .col-block:nth-of-type(3n) { margin-right:0;} } @media screen and (min-width: 481px) and (max-width: 999px){ .site-map .col-3-2-1 {-moz-column-count:2;column-count:2; -moz-column-gap:24px; column-gap:24px;} .site-map .blocks-3-2-1 > .col-block {float:left; width:calc((100% - 24px)/2); margin-right:24px;} .site-map .blocks-3-2-1 > .col-block:nth-of-type(2n) { margin-right:0;} } @media screen and (min-width: 0px) and (max-width: 480px){ .site-map .col-3-2-1 {} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page all resto------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-content .cnt.all-resto {text-align: left;} .page-content .cnt.all-resto h2{font-size: 1.8em; padding-left: 0.2em; font-weight: bold; border-bottom: 2px solid #333;} .page-content .cnt.all-resto .list-col-4-3-2-1 li {display: inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #d5dce0; padding: 0.5em;} .page-content .cnt.all-resto .list-col-4-3-2-1 li a{text-decoration: none; } } @media screen and (min-width: 1000px){ .page-content .cnt.all-resto .list-col-4-3-2-1{-webkit-column-count: 4; -webkit-column-gap: 40px;-moz-column-count: 4; -moz-column-gap: 40px;column-count: 4; column-gap: 40px;} } @media screen and (min-width: 551px) and (max-width: 999px){ .page-content .cnt.all-resto .list-col-4-3-2-1{-webkit-column-count: 3; -webkit-column-gap: 30px;-moz-column-count: 3; -moz-column-gap: 30px;column-count: 3; column-gap: 30px;} } @media screen and (min-width: 361px) and (max-width: 550px){ .page-content .cnt.all-resto .list-col-4-3-2-1{-webkit-column-count: 2; -webkit-column-gap: 15px;-moz-column-count: 2; -moz-column-gap: 15px;column-count: 2; column-gap: 15px;} } @media screen and (min-width: 0px) and (max-width: 360px){ .page-content .cnt.all-resto .list-col-4-3-2-1{-webkit-column-count: 1; -webkit-column-gap: 15px;-moz-column-count: 1; -moz-column-gap: 15px;column-count: 1; column-gap: 15px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page ban------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-ban > .newsletter-infos h1 {} .page-ban > .newsletter-infos form > p { font-size: 14px;} .page-ban > .newsletter-infos .cnt > form > .data-name {font-weight: 700;} .page-ban > .newsletter-infos .cnt > form > .checkbox-cnt { display:inline-block;} } @media screen and (min-width: 750px){ .page-ban > .newsletter-infos .cnt > p { max-width:600px; margin:1em auto; } .page-ban > .newsletter-infos .cnt > form { max-width:650px; margin:2em auto 1em auto;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-ban > .newsletter-infos .cnt > p { max-width:360px; margin:1em auto; } .page-ban > .newsletter-infos .cnt > form { max-width:380px; margin:2em auto 1em auto; padding:0 20px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----page content------------------------------------------------------------------------*/ @media screen and (min-width:0px){ .page-content .content {text-align: left; line-height: 1.4em;} .page-content .content a { color:#ff344b;} .page-content .content a:hover { color:#ec2f45;} .page-content .content p {text-align:justify;} .page-content .content blockquote { display:block; margin:3em 1em; padding:1em; text-align:justify;font-style:italic; line-height:1.8em; letter-spacing:0.05em; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} .page-content .content .pushed-content {display:block; margin:2em 1em; padding: 0 1em; letter-spacing:0.05em;} .page-content .content .pushed-content > img { width: calc(100% + 2em); margin: 0 -1em;} .page-content .content .pushed-content .video, .page-content .content .pushed-content video { width: calc(100% + 2em); margin: 0 -1em;} .page-content .content .pushed-content .gallery { display: block; width: calc(100% + 2em); margin: 0 -1em;} .page-content .content .pushed-content .gallery img { width: 100%; margin-bottom: 0px;} .page-content .content .pushed-content .gallery .image-number { position: absolute; bottom: 1em; right:1em; transform: scale(0.8); transition: 0.3s;} .page-content .content .pushed-content .gallery:hover .image-number { transform: scale(1);} .page-content .content .pushed-content .gallery .image-number .plus { font-size: 2em; line-height: 1.2em; color: white; text-shadow: 0px 0px 5px rgba(0,0,0,0.8); vertical-align: middle;} .page-content .content .pushed-content .gallery .image-number .plus:after { display: inline-block; margin-left: 0.5em; font-size: 1.2em; margin-top: -0.1em; vertical-align: middle;} .page-content .content > ul > li {margin:0.3em 0;} .page-content .content > ul > li:before { position: absolute; right:100%; top:0; content:"•"; margin-right:0.4em; font-size: 1.2em; bottom:-0.1em; color:#ff344b;} .page-content .content > ul > li > ul > li {margin:0.3em 0;} .page-content .content > ul > li > ul > li:before { position: absolute; right:100%; top:0; content:"•"; margin-right:0.4em; color:#ccc;} .page-content .content > ol { list-style: none; counter-reset: my-awesome-counter; margin:0.3em 0; padding:0.3em 0; } .page-content .content > ol > li { counter-increment: my-awesome-counter; display: flex; align-items:center; justify-content: flex-start; margin-bottom: 1em; } .page-content .content > ol > li::before { content: counter(my-awesome-counter)"."; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; text-align: right; font-weight: 900; font-size: 1.4em; margin-right: 0.4em; line-height: 1; border-right:2px solid #ff344b; padding-right:0.3em; padding-top: 0.3em; padding-bottom: 0.3em; } .page-content .content h1{ line-height:1.6em; margin-top:2em; margin-bottom: 0.3em;} .page-content .content h2{ line-height:1.6em; margin-top:1em; margin-bottom: 0.3em;} .page-content .content h2.fat{ font-weight: 700; margin:1.5em auto 1em auto;} .page-content .content h3{ line-height:1.6em; letter-spacing:0.05em; margin-bottom: 0.3em;} .page-content .content p { line-height:1.4em; letter-spacing:0.05em;} .page-content .content p.big { font-size:1.5em; line-height:1.6em; letter-spacing:0.05em; text-align: left;} .page-content .star-comment p {font-size: 0.8em;} .page-content .star-comment.center p {text-align: center;} .page-content .content img { margin:0 auto 1em auto;} .page-content .content img.full { width:100%; margin: 0 auto 1em auto;} .page-content .content .cnt-header-img { background:#f5f5f5;} .page-content .content .cnt-header-img > img { margin:0;} .page-content .content .cnt-header-img > .text > p { color:#ff344b; font-weight: 700;} .page-content .content .infos-timeline > .block { text-align: center;} .page-content .content .infos-timeline > .block .picto:before { color:#ff344b; font-size: 90px;} .page-content .content .infos-timeline > .block .picto.icon-checked {background:#ff344b; margin:auto; width:90px; height:90px; border-radius:15px;} .page-content .content .infos-timeline > .block .picto.icon-checked:before { display:block;right:-5px; color:white; font-size: 95px;} .page-content .content .infos-timeline > .block > p { text-align: center; } .page-content .content .infos-timeline > .space:before { color:#ccc;} /* loyalty */ .page-content .content .ratio { background:#ff344b; color:white; text-align:center; border-radius:100%;} .page-content .content .ratio > .text { margin-top:calc(21%); font-weight: 900; line-height: 1.3em;} .page-content .content .ratio > .text > .points{ font-size:1em;} .page-content .content .ratio > .text > .equal{ font-size:2em;} .page-content .content .ratio > .text > .euros{ font-size:1.7em;} .page-content .content .point-get > .order, .page-content .content .point-get > .others { overflow:hidden; border:1px solid #d5dce0; border-radius:3px;} .page-content .content .point-get .point-count{ color:#ff344b; background:#f5f5f5; text-align: center; font-weight: 900;} .page-content .content .point-get .text p { text-align: left; color:#999;} .page-content .content .sponsorship-call { background:#f5f5f5; border: 1px solid #d5dce0; border-radius:3px;} .page-content .content .sponsorship-call .picto { color: white; background:#ff344b; border-radius:100%; text-align: center;} .page-content .content .sponsorship-call a { color: white;} /*resa infos*/ .page-content .content .steps > .step { border:1px solid #d5dce0; border-radius:3px;} .page-content .content .steps > .step .number .circle {background:#ff344b; border-radius: 100%; color:white; font-weight: 700; text-align: center;} .page-content .content .steps > .step .picto {color:#ff344b; text-align: center;} .page-content .content .steps > .step .picto .circle { display:inline-block; margin-left:auto; margin-right: auto; line-height: 75px; background:#96cf32; color:white; width:70px; height:70px;border-radius:100%;} /*review infos*/ .page-content .content .certified .picto { width:120px; height:100px; margin: 0 auto; color:#ff344b; font-size: 70px; line-height: 100px; text-align: center; } .page-content .content .certified .picto:after { position:absolute; top:27px; right:10px; font-size: 20px; padding-top:2px; content:'\e90a'; display:block; text-align: center; background:#96cf32; color:white; border:3px solid white; width:30px; height:30px; border-radius:100%; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} /*sponsorship infos*/ .page-content .content .sponsorship-head > .block { background:#f5f5f5; color:#ff344b; font-weight: 900; text-align: center; border: 1px solid #d5dce0; border-radius:3px;} .page-content .content .sponsorship-head > .block > .picto { width:120px; height:120px; margin:auto; background:#ff344b; color:white; font-size: 70px; line-height: 125px; border-radius:100%;} .page-content .content .sponsorship-head > .block > .text {font-size: 16px;} .page-content .content .sponsorship-head > .block > .text > .text-1 {font-weight:700;} .page-content .content .sponsorship-head > .block > .text > .text-2 {font-weight:900;} .page-content .content .sponsorship-head > .block > .text > .text-3 {font-weight:700;} } @media screen and (min-width: 1040px){ /* breadcrumb */ .page-content .breadcrumb { padding-bottom:0em;} .page-content > .cnt { margin-top:25px;} .page-content .side-nav { float:left; width:226px;} .page-content .content.menu { float:left; margin-left: 30px; width:calc(100% - 256px);} .page-content .content h1{margin-top:0.5em;} .page-content .content h2.fat{ font-size: 26px;} .page-content .content .cnt-header-img > img { float:right; width:424px; height:283px;} .page-content .content .cnt-header-img > .text { float:right; width:calc(100% - 424px); height:283px;} .page-content .content .cnt-header-img > .text > p { margin:45px auto 0 auto; text-align:left; font-size:40px; line-height: 1.6em; width:400px;} .page-content .content .infos-timeline {margin-top:50px;} .page-content .content .infos-timeline > .block { float:left; width:calc((100% - 135px) / 4); height:200px;} .page-content .content .infos-timeline > .space { float:left; width:45px; height:200px; text-align: center;padding-top:30px;} .page-content .content .infos-timeline > .space:before { font-size:30px;} /* loyalty */ .page-content .content .para-ratio { float:left; width:calc(100% - 305px); margin-right:50px;} .page-content .content .ratio { float:left; width:255px; height:255px;} .page-content .content .ratio > .text { font-size:35px;} .page-content .content .point-get > .order { float:left; width:calc((100% - 24px) / 4 ); margin-right:24px} .page-content .content .point-get > .others { float:left; width:calc(3*(100% - 24px) / 4 ); } .page-content .content .point-get .point-count{ height:95px; line-height: 95px; font-size: 35px; border-bottom:1px solid #d5dce0;} .page-content .content .point-get .text{ padding:24px; } .page-content .content .point-get > .others .text{ float:left; border-right:1px solid #d5dce0; width:calc(100% / 3);} .page-content .content .point-get .text:nth-of-type(4) { border-right:0; } .page-content .content .point-get .text h3 { margin-top:0; letter-spacing: 0.02em;} .page-content .content .point-get .text p { letter-spacing: 0.02em; margin:0; } /*resa infos*/ .page-content .content .steps > .step {float:left; width:calc((100% - 50px)/3); height:450px; margin-right:25px;} .page-content .content .steps > .step:nth-of-type(3n) { margin-right:0;} .page-content .content .steps > .step .number { text-align: center; line-height: 80px;} .page-content .content .steps > .step .number .circle { display:inline-block; width:70px; height:70px; margin:40px auto 0 auto; line-height: 70px; font-size: 30px;} .page-content .content .steps > .step .text { text-align: center; padding:0 24px;} .page-content .content .steps > .step .text p { text-align: center;} .page-content .content .steps > .step .picto { line-height: 140px; font-size:50px;} /*review infos*/ .page-content .content .certified { float:left; width:calc((100% - 50px) / 3); margin-right:25px; text-align: center;} .page-content .content .certified:nth-of-type(3n) {margin-right:0px;} .page-content .content .certified .text { max-width:250px; margin:auto; } .page-content .content .certified .text h3 { margin-top:0; margin-bottom:0; } .page-content .content .certified .text p { text-align: center; margin-top:0;} } @media screen and (min-width: 750px){ .page-content > .cnt { margin-top:15px;} .page-content .content:not(.full) { max-width:800px;} .page-content .content h1{font-size: 32px;} .page-content .content h2{font-size: 22px;} .page-content .content h3{font-size: 18px;} .page-content .content p {font-size: 16px;} .page-content .content li {font-size: 16px;} .page-content .content blockquote {font-size: 14px;} .page-content .content > ul {padding:0em 0em 0em 2em; margin-bottom: 1em;} .page-content .content > ul > li > ul { padding:0.5em 0em 1em 2em;} .page-content .content.full > h2, .page-content .content.full > h3, .page-content .content.full > p , .page-content .content.full > blockquote, .page-content .content.full > ul {max-width:800px; margin-left:0;} .page-content .content .infos-timeline > .block .picto.code { width:100px; margin:20px auto 35px auto ; padding:10px; border: 3px dashed #d5dce0; font-weight: 700; color:#ff344b; font-size: 20px;} /*resa infos*/ .page-content .content .steps > .step .btn-red-med { color:white; padding:0 4px; margin-right:0.2em;height:25px; line-height: 25px; letter-spacing: 0.01em;} .page-content .content .steps > .step .btn-red-med:before { bottom:-0.05em; margin-right:0.2em;} .page-content .content .sponsorship-call { padding:40px;} .page-content .content .sponsorship-call .picto {float:left; width:200px; height:200px; font-size: 100px; line-height: 200px;} .page-content .content .sponsorship-call .text {float:left; width:calc(100% - 240px); margin-left:40px;} .page-content .content .sponsorship-call .text p {font-size: 20px; margin-top:0; font-weight: 700; } .page-content .content .sponsorship-call .text p .promo { font-size: 2em; font-weight: 900; color:#ff344b; } /*sponsorship infos*/ .page-content .content.sponsorship h2 {text-align:center; max-width:100%;} .page-content .content .sponsorship-head > .block { margin:100px auto 50px auto; width:650px; padding:30px;} .page-content .content .sponsorship-head > .block > .picto { margin-top:-80px; margin-bottom:20px;} .page-content .content .sponsorship-head > .block > .text > .text-1 {margin-bottom:1em; font-size:2em;} .page-content .content .sponsorship-head > .block > .text > .text-2 {margin-bottom:0.5em; font-size:4em;} .page-content .content .sponsorship-head > .block > .text > .text-3 {margin-bottom:1em; font-size:2em;} } @media screen and (min-width: 750px) and (max-width: 1039px){ /* breadcrumb */ .page-content .breadcrumb { padding-bottom:0em; padding-right:30px; padding-left:30px;} .page-content .content { padding:20px;} .page-content .content h1{ margin-top:0em;} .page-content .content h2.fat{ font-size: 26px;} .page-content .content p.big { text-align: left;} .page-content .content .cnt-header-img > img { float:right; width:50%;} .page-content .content .cnt-header-img > .text { float:right; width:50%;} .page-content .content .cnt-header-img > .text > p { margin:40px auto 0 auto; text-align:left; font-size:30px; line-height: 1.6em; width:280px;} .page-content .content .infos-timeline {margin-top:50px;} .page-content .content .infos-timeline > .block { float:left; width:calc((100% - 75px) / 4); height:200px;} .page-content .content .infos-timeline > .space { float:left; width:25px; height:200px; text-align: center;padding-top:30px;} .page-content .content .infos-timeline > .space:before { font-size:30px;} /* loyalty */ .page-content .content .para-ratio { float:left; width:calc(100% - 305px); margin-right:50px;} .page-content .content .ratio { float:left; width:255px; height:255px; margin-top:40px;} .page-content .content .ratio > .text { font-size:35px;} .page-content .content .point-get > .order { float:left; width:100%; margin-bottom:24px;} .page-content .content .point-get > .order > .text > h3, .page-content .content .point-get > .order > .text > p { text-align: center;} .page-content .content .point-get > .others { float:left; width:100%; } .page-content .content .point-get .point-count{ height:95px; line-height: 95px; font-size: 35px; border-bottom:1px solid #d5dce0;} .page-content .content .point-get .text{ padding:24px; } .page-content .content .point-get > .others .text{ float:left; border-right:1px solid #d5dce0; width:calc(100% / 3); height:180px;} .page-content .content .point-get .text:nth-of-type(4) { border-right:0; } .page-content .content .point-get .text h3 { margin-top:0; letter-spacing: 0.02em;} .page-content .content .point-get .text p { letter-spacing: 0.02em; margin:0; } /*resa infos*/ .page-content .content .steps > .step {margin-bottom:20px;} .page-content .content .steps > .step .number { float:left; width:100px; text-align: center; line-height: 140px;} .page-content .content .steps > .step .number .circle { display:inline-block; width:50px; height:50px; margin:15px auto; line-height: 50px; font-size: 20px;} .page-content .content .steps > .step .text { float:left; width:calc(100% - 220px);} .page-content .content .steps > .step .picto { float:left; width:120px; line-height: 140px; font-size:50px;} .page-content .content .steps > .step .btn-red-med { color:white; padding:0 4px; margin-right:0.2em;height:25px; line-height: 25px; letter-spacing: 0.01em;} .page-content .content .steps > .step .btn-red-med:before { bottom:-0.05em; margin-right:0.2em;} /*review infos*/ .page-content .content .certified { margin-bottom:20px; } .page-content .content .certified .picto { float:left;} .page-content .content .certified .text { float:left; width:calc(100% - 120px); padding-top:15px;} .page-content .content .certified .text h3 { margin-top:0; margin-bottom:0; } .page-content .content .certified .text p { margin-top:0;} } @media screen and (min-width: 341px) and (max-width: 749px){ /* breadcrumb */ .page-content .breadcrumb { padding-bottom:0em; padding-right:10px; padding-left:10px;} .page-content > .cnt { margin-top:15px;} .page-content .content { padding:20px 0px;} .page-content .content h1{font-size: 22px; margin-top:0em;} .page-content .content h2{font-size: 18px;} .page-content .content h3{font-size: 16px;} .page-content .content h2.fat{ font-size: 22px;} .page-content .content p.big { text-align: left;} .page-content .content p {font-size: 16px;} .page-content .content li {font-size: 16px;} .page-content .content blockquote {font-size: 14px;} .page-content .content > ul {padding:0.5em 0em 0em 1em; margin-bottom: 1em;} .page-content .content > ul > li > ul { padding:0.5em 0em 1em 1em;} .page-content .content img.full { width:calc(100% + 60px); margin: 0 -30px;} .page-content .content .cnt-header-img {text-align: center; padding:20px;} .page-content .content .cnt-header-img > img { width:100%; max-width:424px; margin:auto;} .page-content .content .cnt-header-img > .text {margin:40px auto;} .page-content .content .cnt-header-img > .text > p { margin:0 auto; text-align:center; font-size:24px; line-height: 1.6em; width:80%;} .page-content .content .infos-timeline {margin-top:20px; max-width:310px; margin-left:auto; margin-right:auto; margin-bottom:20px;} .page-content .content .infos-timeline > .block > .picto { float:left; width:90px;} .page-content .content .infos-timeline > .block .picto:before { font-size: 90px;} .page-content .content .infos-timeline > .block .picto.icon-checked { width:90px; height:90px;} .page-content .content .infos-timeline > .block .picto.icon-checked:before { display:block;right:-5px; color:white; font-size: 95px;} .page-content .content .infos-timeline > .block .picto.code { width:90px; margin:20px auto 35px auto ; padding:10px; border: 3px dashed #ccc; font-weight: 700; color:#ff344b; font-size: 20px;} .page-content .content .infos-timeline > .block > p { float:left; width:calc(100% - 90px); text-align: left; padding-left:50px; padding-top:5px;} .page-content .content .infos-timeline > .space { width:90px; padding:10px 0; text-align: center;} .page-content .content .infos-timeline > .space:before { content:'\e90f'; font-size:30px;} .page-content .content .sponsorship-call { padding:15px; margin-top:50px;} .page-content .content .sponsorship-call .picto { width:130px; height:130px; font-size: 70px; line-height: 130px; margin:auto; margin-bottom:20px;} .page-content .content .sponsorship-call .text { text-align: center;} .page-content .content .sponsorship-call .text p {font-size: 15px; margin-top:0; font-weight: 700; text-align: center;} .page-content .content .sponsorship-call .text p .promo { font-size: 2em; font-weight: 900; color:#ff344b; } /*resa infos*/ .page-content .content .steps > .step { margin: 0 -10px 30px -10px;} /*sponsorship infos*/ .page-content .content.sponsorship h2 {text-align:center; max-width:100%;} .page-content .content .sponsorship-head {margin-left:-20px; margin-right:-20px;} .page-content .content .sponsorship-head > .block { margin:80px auto 30px auto; max-width:380px; padding:15px;} .page-content .content .sponsorship-head > .block > .picto { margin-top:-80px; margin-bottom:20px;} .page-content .content .sponsorship-head > .block > .text {font-size:11px;} .page-content .content .sponsorship-head > .block > .text > .text-1 {margin-bottom:1em; font-size:2em;} .page-content .content .sponsorship-head > .block > .text > .text-2 {margin-bottom:0.5em; font-size:4em;} .page-content .content .sponsorship-head > .block > .text > .text-3 {margin-bottom:1em; font-size:2em;} } @media screen and (min-width: 0px) and (max-width: 340px){ /* breadcrumb */ .page-content .breadcrumb { padding-bottom:0em; padding-right:10px; padding-left:10px;} .page-content > .cnt { margin-top:15px;} .page-content .content { padding:5px;} .page-content .content h1{font-size: 22px; margin-top:0em;} .page-content .content h2{font-size: 18px;} .page-content .content h3{font-size: 16px;} .page-content .content h2.fat{ font-size: 20px;} .page-content .content p.big { font-size: 1.1em; text-align: left;} .page-content .content p {font-size: 14px;} .page-content .content li {font-size: 14px;} .page-content .content blockquote {font-size: 14px;} .page-content .content > ul {padding:0.5em 0em 0em 1em; margin-bottom: 1em;} .page-content .content > ul > li > ul { padding:0.5em 0em 1em 1em;} .page-content .content img.full { width:calc(100% + 60px); margin: 0 -30px;} .page-content .content .cnt-header-img {text-align: center;padding:5px;} .page-content .content .cnt-header-img > img { width:100%; max-width:424px; margin:auto;} .page-content .content .cnt-header-img > .text {margin:20px auto;} .page-content .content .cnt-header-img > .text > p { margin:0 auto; text-align:center; font-size:20px; line-height: 1.6em; width:85%;} .page-content .content .infos-timeline {margin-top:20px; margin-bottom:20px;} .page-content .content .infos-timeline > .block > .picto { float:left; width:70px;} .page-content .content .infos-timeline > .block .picto:before { font-size: 70px;} .page-content .content .infos-timeline > .block .picto.icon-checked { width:70px; height:70px;} .page-content .content .infos-timeline > .block .picto.icon-checked:before { display:block;right:-5px; color:white; font-size: 75px;} .page-content .content .infos-timeline > .block .picto.code { width:70px; margin:20px auto 35px auto ; padding:10px; border: 3px dashed #ccc; font-weight: 700; color:#ff344b; font-size: 16px;} .page-content .content .infos-timeline > .block > p { float:left; width:calc(100% - 75px); text-align: left; padding-left:20px;} .page-content .content .infos-timeline > .space { width:75px; padding:10px 0; text-align: center;} .page-content .content .infos-timeline > .space:before { content:'\e90f'; font-size:30px;} .page-content .content .sponsorship-call { padding:15px; margin-top:50px;} .page-content .content .sponsorship-call .picto { width:130px; height:130px; font-size: 70px; line-height: 130px; margin:auto; margin-bottom:20px;} .page-content .content .sponsorship-call .text { text-align: center;} .page-content .content .sponsorship-call .text p {font-size: 15px; margin-top:0; font-weight: 700; text-align: center;} .page-content .content .sponsorship-call .text p .promo { font-size: 2em; font-weight: 900; color:#ff344b; } /*resa infos*/ .page-content .content .steps > .step { margin: 0 -10px 30px -10px;} /*sponsorship infos*/ .page-content .content.sponsorship h2 {text-align:center; max-width:100%;} .page-content .content .sponsorship-head {margin-left:-18px; margin-right:-18px;} .page-content .content .sponsorship-head > .block { margin:80px auto 30px auto; max-width:380px; padding:15px;} .page-content .content .sponsorship-head > .block > .picto { margin-top:-80px; margin-bottom:20px;} .page-content .content .sponsorship-head > .block > .text {font-size:9px;} .page-content .content .sponsorship-head > .block > .text > .text-1 {margin-bottom:1em; font-size:2em;} .page-content .content .sponsorship-head > .block > .text > .text-2 {margin-bottom:0.5em; font-size:4em;} .page-content .content .sponsorship-head > .block > .text > .text-3 {margin-bottom:1em; font-size:2em;} } @media screen and (min-width: 0px) and (max-width: 749px){ .page-content .content h1 { text-align: center;} .page-content .content h2 { text-align: center;} .page-content .content .pushed-content .gallery .image-number { font-size: 0.8em;} /* loyalty */ .page-content .content .para-ratio {} .page-content .content .ratio { margin:auto; width:200px; height:200px; margin-top:24px;} .page-content .content .ratio > .text { font-size:27px; padding-top:20%;} .page-content .content .point-get > .order { float:left; width:100%; margin-bottom:24px;} .page-content .content .point-get > .order > .text > h3, .page-content .content .point-get > .order > .text > p { text-align: center;} .page-content .content .point-get .point-count{ height:75px; line-height: 75px; font-size: 30px; border-bottom:1px solid #d5dce0;} .page-content .content .point-get > .others { float:left; width:100%; background:#f5f5f5;} .page-content .content .point-get .text{ padding:20px; } .page-content .content .point-get > .others .text{ border-bottom:1px solid #d5dce0; width:100%; background:white;} .page-content .content .point-get .text:nth-of-type(4) { border-bottom:0; } .page-content .content .point-get .text h3 { margin-top:0; letter-spacing: 0.02em;} .page-content .content .point-get .text p { letter-spacing: 0.02em; margin:0; } /*resa infos*/ .page-content .content .steps > .step .number { text-align: center; line-height: 50px;} .page-content .content .steps > .step .number .circle { display:inline-block; width:50px; height:50px; margin:20px auto 0 auto; line-height: 50px; font-size: 25px;} .page-content .content .steps > .step .text { text-align: center; padding:0 10px;} .page-content .content .steps > .step .text p { text-align: center; max-width:400px; margin-left:auto; margin-right:auto;} .page-content .content .steps > .step .picto { line-height: 140px; font-size:50px;} .page-content .content .steps > .step .btn-red-med { color:white; padding:0 8px; margin-right:0.2em;height:25px; line-height: 25px; letter-spacing: 0.01em;} .page-content .content .steps > .step .btn-red-med:before { bottom:-0.15em; margin-right:0.2em;} /*review infos*/ .page-content .content .certified { text-align: center;} .page-content .content .certified:nth-of-type(3n) {margin-right:0px;} .page-content .content .certified .text { max-width:250px; margin:auto; } .page-content .content .certified .text h3 { margin-top:0; margin-bottom:0; } .page-content .content .certified .text p { text-align: center; margin-top:0;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----pages magazine------------------------------------------------------------------------*/ @media screen and (min-width:0px){ /* title-mag */ .title-mag { text-align: left; display: flex; flex-direction: column; justify-content: center;} .title-mag .flag {display: flex; height: 44px; } .title-mag .flag .flag-block { background: white; height: 44px; padding: 0 25px;} .title-mag .flag .flag-block .title { margin-top: 0; margin-bottom: 0; color:#ff344b; line-height: 44px; font-size: 32px; font-weight: 700;} .title-mag .flag .flag-end { width:0; height:0;border-top: 22px solid white; border-left: 12px solid white; border-right: 12px solid transparent; border-bottom: 22px solid transparent;} .title-mag .sub-title { color:white; text-align: left;} /* socials */ .page-mag .share > ul {position:absolute; top:0; right:0; margin-bottom:-25px;} .page-mag .share > ul > li { display:inline-block; text-align: center; height:25px; width:25px; border-radius: 3px; color:white; line-height: 1.6em; cursor:pointer;} .page-mag .share > ul > li:last-of-type { margin-right:0; } .page-mag .share > ul > li.icon-facebook { background:#4c67a1;} .page-mag .share > ul > li.icon-twitter { background:#00acee;} .page-mag .share > ul > li.icon-google { background:#d94d3a;} /* flag-tag */ .flag-tag { position: absolute; top:1em; left:-0.4em; height: 2em;display: flex; } .flag-tag .flag-block { box-shadow: 0.8em 0.4em 0.8em 0.25em rgba(0,0,0,0.35) ; height: 2em; padding: 0 1.2em 0 0.8em; display: flex; justify-content: flex-start; align-items: center;} .flag-tag .flag-block .text { margin-top: 0; margin-bottom: 0; color:white; text-transform: uppercase; line-height: 1.4em; font-size: 1.4em; font-weight: 700;} .flag-tag .flag-end { width:0; height:0; border-top-width: 1em; border-left-style: solid; border-left-width: 0.5em; border-top-style: solid; border-right: 0.5em solid transparent; border-bottom: 1em solid transparent;} .flag-tag { font-size: 12px; } .flag-tag.big { font-size: 15px; top:1.5em; left:-0.5em;} .flag-tag.med { font-size: 12px; } .flag-tag.small { font-size: 8px; top:0.8em; } .flag-tag.small .flag-block { padding: 0 0.7em;} .flag-tag.mag-id1 .flag-block { background: #ff3665; } .flag-tag.mag-id1 .flag-end { border-top-color: #ff3665; border-left-color: #ff3665; } .flag-tag.mag-id2 .flag-block { background: #62d703; } .flag-tag.mag-id2 .flag-end { border-top-color: #62d703; border-left-color: #62d703; } .flag-tag.mag-id3 .flag-block { background: #ff8b26; } .flag-tag.mag-id3 .flag-end { border-top-color: #ff8b26; border-left-color: #ff8b26; } .flag-tag.mag-id4 .flag-block { background: #9b26ff; } .flag-tag.mag-id4 .flag-end { border-top-color: #9b26ff; border-left-color: #9b26ff; } .flag-tag.mag-id5 .flag-block { background: #e802e0; } .flag-tag.mag-id5 .flag-end { border-top-color: #e802e0; border-left-color: #e802e0; } .flag-tag.mag-id6 .flag-block { background: #00ed96; } .flag-tag.mag-id6 .flag-end { border-top-color: #00ed96; border-left-color: #00ed96; } .flag-tag.mag-id7 .flag-block { background: #02dde8; } .flag-tag.mag-id7 .flag-end { border-top-color: #02dde8; border-left-color: #02dde8; } .flag-tag.mag-id8 .flag-block { background: #1f77f2; } .flag-tag.mag-id8 .flag-end { border-top-color: #1f77f2; border-left-color: #1f77f2; } .flag-tag.mag-id9 .flag-block { background: #f2c81f; } .flag-tag.mag-id9 .flag-end { border-top-color: #f2c81f; border-left-color: #f2c81f; } .flag-tag.mag-id10 .flag-block { background: #00a30b; } .flag-tag.mag-id10 .flag-end { border-top-color: #00a30b; border-left-color: #00a30b; } /* mag-writer-invite */ .page-mag .mag-writer-invite { background: #f5f5f5; padding: 15px; max-width: 300px; width: 100%; margin: auto;} .page-mag .mag-writer-invite p { font-weight: 700; margin-top: 5px; margin-bottom: 15px;} .page-mag .mag-writer-invite .button { padding-left: 15px; padding-right: 15px;} /*block article moyen*/ .mag-list .mag-article-med { width:calc(50% - 25px); min-width:180px; margin-left: 25px; margin-right: 0; } .mag-list .mag-article-med { text-align: left; } .mag-list .mag-article-med .image { display: block; } .mag-list .mag-article-med .image img { width: 100%; } .mag-list .mag-article-med > .text { padding: 15px; } .mag-list .mag-article-med > .text .title { margin: 0 0 0.5em 0; } .mag-list .mag-article-med > .text .date { margin: 0; font-size: 12px; color:#999; } .mag-list .mag-article-med > .text .abstract { margin: 0.5em 0 0 0; } /* lemag content in list*/ .page-mag .listing > .content { padding: 0; } /* lemag article */ .page-mag .listing.mag.article .header { text-align: left;} .page-mag .listing.mag.article .header .image {} .page-mag .listing.mag.article .header .image img { width:100%;} .page-mag .listing.mag.article .header .text {} .page-mag .listing.mag.article .header .text .title { margin-bottom: 0.3em; } .page-mag .listing.mag.article .header .text .date { margin: 0; font-size: 14px; color:#999; } .writer-footer { margin-top: 15px;} .writer-footer .share { margin-top: 10px; margin-bottom: 10px; position: relative; text-align: right;} .writer-footer .share ul { position: relative; margin-bottom: 0;} .writer-footer .profile { padding: 15px 0; border-top: 1px solid #d5dce0; text-decoration: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;} .writer-footer .profile .picture { width: 80px; border-radius: 40px; overflow: hidden;} .writer-footer .profile .picture img { width:100%; } .writer-footer .profile .text { margin-left: 25px; text-align: left; } .writer-footer .profile .text .name { font-size: 18px; margin: 0 0 0.5em 0;} .writer-footer .profile .text .nb-article { font-size: 16px; margin: 0px; color:#999;} /* lemag list */ .page-mag .title-mag { background: #ff344b; padding: 15px 0; text-decoration: none;} .page-mag .side-nav .side-nav-mag { padding: 0; } .page-mag .side-nav .side-nav-mag { text-align: left; } .page-mag .side-nav .side-nav-mag ul { padding: 20px 25px; } .page-mag .side-nav .side-nav-mag ul a { display:inline-block; text-decoration: none; padding: 5px 0; } .page-mag .side-nav .side-nav-mag ul a.active { font-weight: 700; color: #ff344b;} .page-mag .mag-list { display:flex; flex:1; flex-wrap: wrap; flex-direction: row; } .page-mag .mag-article-med { border-bottom: 1px solid #d5dce0; margin-bottom: 25px; padding-bottom: 5px;} /* lemag list writer */ .page-mag .listing.mag .writer-bloc { text-align: left; } .page-mag .listing.mag .writer-bloc .profile { display: flex; align-items: center;} .page-mag .listing.mag .writer-bloc .profile .picture { margin-right: 25px; width: 150px; border-radius: 50%; overflow: hidden; border:3px solid white; box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.2);} .page-mag .listing.mag .writer-bloc .profile .picture img { width:100%;} .page-mag .listing.mag .writer-bloc .profile .text { flex:1; padding: 25px 0;} .page-mag .listing.mag .articles-title { text-align: left; border-bottom: 1px solid #d5dce0; margin-bottom: 25px;} .page-mag .listing.mag .articles-title .title { font-size: 22px; font-weight: 700; margin-bottom: 10px; margin-top: 50px;} /* lemag page ville */ .lemag-city { background-color: #ff344b; display: flex; } .lemag-city > a { text-decoration: none;} .lemag-city .block-title { text-decoration: none; } .lemag-city .block-title .mag-call .picto:before {content:"\e943"; color: white;} .lemag-city .block-title .mag-call .button { background: white; color:#ff344b; } .lemag-city .mag-list { display:flex; flex:1; padding: 25px 0 ; background: white; flex-wrap: wrap; flex-direction: row;jus} } @media screen and (min-width: 1000px){ /* title */ .title-mag .sub-title { padding-left: 25px; font-size: 18px; margin-top: 10px; } /* lemag list */ .page-mag .three-col { margin-top: 15px;} .page-mag .side-nav { position: relative; width:226px; padding: 0; margin-bottom: 150px;} .page-mag .side-nav .mag-writer-invite { position: absolute; top:100%; margin-top: 25px; } .page-mag .listing.mag { width:calc(100% - 226px - 25px); margin-right: 0; margin-left: 25px;} .page-mag .listing.mag .mag-list { margin-left: -25px;} .page-mag .listing.mag .mag-writer-invite { display:none; } /* lemag page ville */ .lemag-city { margin-top: 25px; margin-bottom: 25px; padding-top: 5px; padding-bottom: 5px; align-items: stretch;} .lemag-city .block-title { width:224px; margin: 15px 0; min-height: 224px; } .lemag-city .block-title .mag-call {margin-top: 35px;} .lemag-city .block-title .mag-call .picto { font-size:139px; height: 139px; margin-bottom: 10px;} .lemag-city .block-title .mag-call .button { background: white; color:#ff344b; } .lemag-city .mag-list { max-width: calc(100% - 224px); background: white; padding-bottom: 15px} .lemag-city .mag-list { padding-right: 25px;} } @media screen and (min-width: 750px){ } @media screen and (min-width: 0px) and (max-width: 999px){ /* title */ .title-mag { flex:1; } .title-mag .sub-title { padding-left: 25px; font-size: 18px; margin-top: 15px; } /* lemag list */ .page-mag .title-mag { flex-direction: row; justify-content: flex-start; align-items: center;} .page-mag .title-mag .flag {} .page-mag .title-mag .sub-title { color:white; text-align: left; margin-top: 0; padding-top: 0;} .page-mag .three-col { width: 100%;} .page-mag .side-nav .mag-writer-invite { display: none;} .page-mag.page-content .side-nav {margin-top: 5px} .page-mag .side-nav .side-nav-mag { margin-bottom: 25px; background: #f5f5f5;} .page-mag .side-nav .side-nav-mag .side-nav-mag { display: -webkit-box; background: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;} .page-mag .side-nav .side-nav-mag .title-mag { flex:0.5; min-width: 240px;} .page-mag .side-nav .side-nav-mag ul { flex:1; padding: 15px 25px; padding-bottom: 8px; padding-right: 18px;} .page-mag .side-nav .side-nav-mag ul > li { display: inline-block; margin-bottom: 7px; margin-right: 7px; background: white;} .page-mag .side-nav .side-nav-mag ul > li a { display: inline-block; border:1px solid #d5dce0; padding: 0.2em 0.7em; border-radius: 3px;} .page-mag .side-nav .side-nav-mag ul > li a.active { color:white; background: #999; border-color: #999; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id1 { background: #ff3665; border-color: #ff3665; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id2 { background: #62d703; border-color: #62d703; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id3 { background: #ff8b26; border-color: #ff8b26; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id4 { background: #9b26ff; border-color: #9b26ff; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id5 { background: #e802e0; border-color: #e802e0; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id6 { background: #00ed96; border-color: #00ed96; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id7 { background: #02dde8; border-color: #02dde8; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id8 { background: #1f77f2; border-color: #1f77f2; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id9 { background: #f2c81f; border-color: #f2c81f; } .page-mag .side-nav .side-nav-mag ul > li a.active.mag-id10 { background: #00a30b; border-color: #00a30b; } .page-mag .side-nav .side-nav-mag ul > li a.active:hover { font-weight: 400; border:1px solid #d5dce0; color:#333; background: white; color:#333;} .page-mag .side-nav .side-nav-mag ul > li a.mag-id1:not(.active):hover { background: #ff3665; border-color: #ff3665; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id2:not(.active):hover { background: #62d703; border-color: #62d703; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id3:not(.active):hover { background: #ff8b26; border-color: #ff8b26; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id4:not(.active):hover { background: #9b26ff; border-color: #9b26ff; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id5:not(.active):hover { background: #e802e0; border-color: #e802e0; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id6:not(.active):hover { background: #00ed96; border-color: #00ed96; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id7:not(.active):hover { background: #02dde8; border-color: #02dde8; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id8:not(.active):hover { background: #1f77f2; border-color: #1f77f2; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id9:not(.active):hover { background: #f2c81f; border-color: #f2c81f; color:white; } .page-mag .side-nav .side-nav-mag ul > li a.mag-id10:not(.active):hover { background: #00a30b; border-color: #00a30b; color:white; } .page-mag .listing.mag { margin-right: 15px; margin-left: 15px; width: calc(100% - 30px);} .page-mag .listing.mag .mag-list { margin-left: -25px;} /* lemag list writer */ .page-mag .listing.mag .writer-bloc .profile .picture { width: 150px; } .page-mag .listing.mag .articles-title .title { margin-top: 25px;} /* lemag article */ .page-mag .listing.mag.article .header { text-align: left;} .page-mag .listing.mag.article .header .image { margin: -25px -25px 0 -25px;} .page-mag .listing.mag.article .header .image img { width:100%;} .page-mag .listing.mag.article .header .image .flag-tag { left:0; } .page-mag .listing.mag.article .header .text {} .page-mag .listing.mag.article .header .text .title { margin-bottom: 0.3em; } .page-mag .listing.mag.article .header .text .date { margin: 0; font-size: 14px; color:#999; } /* lemag page ville */ .lemag-city { margin-left: 0px; margin-right: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px; padding-top: 5px; padding-bottom: 5px; flex-direction: column;} .lemag-city .block-title { margin: 15px 0; display: flex; flex-direction: row; align-items: center;} .lemag-city .block-title .mag-call {flex:1;} .lemag-city .block-title .mag-call .picto { font-size:90px; height: 90px; margin-bottom: 10px;} .lemag-city .block-title .mag-call .button { background: white; color:#ff344b; } .lemag-city .mag-list { display:flex; flex:1; background: white; } .lemag-city .mag-list { padding-right: 25px;} } @media screen and (min-width: 0px) and (max-width: 550px){ /* title */ .title-mag {min-width:180px;} /*block article moyen*/ .mag-list .mag-article-med { width: 100%;} /* lemag list */ .page-mag .side-nav .side-nav-mag .title-mag { min-width: 200px;} .page-mag .title-mag .flag {min-width: 180px;} .page-mag .title-mag .sub-title { margin-top: 0; padding-top: 0;} /* lemag content in list*/ .page-mag .listing > .content {padding: 0;} /* lemag list writer */ .page-mag .listing.mag .writer-bloc .profile .picture { width: 120px; } .page-mag .listing.mag .writer-bloc .presentation { padding:0 0px; } .page-mag .listing.mag .articles-title .title { margin-top: 20px;} /* lemag page ville */ .lemag-city { margin-left: 0; margin-right:0; width: 100%;} .lemag-city .block-title .mag-call .picto { font-size:70px; height: 70px; margin-bottom: 8px;} .lemag-city .block-title .mag-call .button { height:25px; line-height: 25px; padding-left: 10px; padding-right: 10px;} .lemag-city .mag-list { margin:0; padding:25px 0;} .lemag-city .mag-list .mag-article-med { margin-left:25px; margin-right: 25px; } } @media screen and (min-width: 0px) and (max-width: 350px){ /* title */ .title-mag .sub-title { margin-top: 5px; } /*block article moyen*/ .mag-list .mag-article-med > .text { padding: 15px 0; } /* lemag list */ .page-mag .three-col { width: 100%;} .page-mag .side-nav .side-nav-mag { margin-bottom: 25px; } .page-mag .side-nav .side-nav-mag .side-nav-mag { display: -webkit-box; background: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;} .page-mag .side-nav .side-nav-mag ul { padding: 10px 10px; padding-bottom: 4px; padding-right: 4px;} .page-mag .side-nav .side-nav-mag ul > li { margin-bottom: 6px; margin-right: 6px;} .page-mag .side-nav .side-nav-mag ul > li a { padding: 0.2em 0.7em;} .page-mag .title-mag .flag { height: 40px; min-width: 160px; } .page-mag .title-mag .flag .flag-block { height: 40px; padding: 0 15px;} .page-mag .title-mag .flag .flag-block .title { line-height: 40px; font-size: 30px; } .page-mag .title-mag .flag .flag-end {border-top: 20px solid white; border-left: 10px solid white; border-right: 10px solid transparent; border-bottom: 20px solid transparent;} .page-mag .title-mag .sub-title { padding-left: 15px; padding-top: 0; } .page-mag .listing.mag { margin-right: 0px; margin-left: 0px; width: 100%;} .page-mag .listing.mag .mag-list { margin-left:10px; margin-right: 10px;} .page-mag .listing.mag .mag-list .mag-article-med { margin-left:0px; margin-right: 0px; } /* lemag list writer */ .page-mag .listing.mag .writer-bloc .profile .picture { width: 90px; } .page-mag .listing.mag .writer-bloc, .page-mag .listing.mag .articles-title { margin-right:10px; margin-left:10px; } .page-mag .listing.mag .articles-title .title { margin-top: 15px;} /* lemag content in list*/ .page-mag .listing > .content {padding: 0; margin: 0 10px;} /* lemag article */ .page-mag .listing.mag.article .header .image { margin: -25px -10px 0 -10px;} .page-mag .listing.mag.article .header .image .flag-tag { left:10px; font-size: 14px} .page-mag .listing.mag.article .header .text { margin: 0 10px; } .writer-footer .share { padding-left: 10px;padding-right: 10px; } .writer-footer .profile { padding-left: 10px;padding-right: 10px; } .writer-footer .content { padding-left: 10px;padding-right: 10px; } /* lemag page ville */ .lemag-city .block-title { margin: 5px 0;} .lemag-city .mag-list { margin:0; padding:10px 0;} .lemag-city .mag-list .mag-article-med { margin-left:10px; margin-right: 10px; } } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*------Popins-------------------------------------------------------------------*/ @media screen and (min-width:0px){ .popin-cnt {} .popin-cnt .title .top-back {position:absolute; top:50%; left: 0; transform: translateY(-50%); cursor:pointer;} .popin-cnt .title .top-back:before { display:block; position:absolute; top:50%; left:0; right:0; margin: auto; transform: translateY(-50%); text-align: center; content:"\e903"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition:0.3s;} .popin-cnt .title .top-back:hover:before { transform: translateY(-50%) translateX(-5%) scale(1.1);} .popin-cnt .popin-content.grey { background: #f5f5f5; padding-top:2vh;} .popin-cnt .popin-content.text-cnt {margin-left: auto; margin-right: auto; margin-top: 2em; } .popin-cnt .popin-content h3 > span { margin-left: 5px; color: #999; font-size: 0.65em; font-weight: 400;} .popin-cnt .popin-content h4 > span { margin-left: 5px; color: #999; font-size: 0.80em; font-weight: 400;} .popin-cnt .popin-content .input-cnt.icon { width:100%; border-radius: 3px;} .popin-cnt .popin-content .input-cnt.icon:before { position: absolute; display:block ; width:50px; z-index: 10; color: #ccc; pointer-events: none; text-align: center;} .popin-cnt .popin-content .input-cnt.icon > input{ padding-left:50px;} .popin-cnt .popin-content > .warn { max-width:85%; margin:1.5em auto;} /* popin reframe */ .popin-cnt .popin-content > .reframe { margin:25px auto 15px auto; width:250px; height:250px; border:1px solid #d5dce0; overflow: hidden;} /* popin city choice and need address */ .popin-cnt .popin-city-choice .search-frame .ui-autocomplete , .popin-cnt .popin-need-address .search-frame .ui-autocomplete { position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; box-shadow: none !important; border:none !important; outline:none !important; border-radius:0; transition:0.4s;} .popin-cnt .popin-city-choice .search-frame .input-cnt > input, .popin-cnt .popin-need-address .search-frame .input-cnt > input { padding-right:33px; } .popin-cnt .popin-need-address .search-frame .input-cnt { margin-bottom: 180px;} .popin-cnt .popin-city-choice .search-frame .delete, .popin-cnt .popin-need-address .search-frame .delete { z-index: 115; } .popin-cnt .popin-city-choice .search-frame .delete:before, .popin-cnt .popin-need-address .search-frame .delete:before {position:absolute; top:50%; left:0; right:0; margin:auto; transform:translate(0,-50%);} /* dish custom */ .popin-cnt .popin-content .supplement { margin-top:-0.75em; margin-bottom: 2em;} .popin-cnt .popin-content .supplement > li {padding:1em 0; text-align: left;} .popin-cnt .popin-content .supplement > li label {display:inline-block; width: calc(100% - 2em)} .popin-cnt .popin-content .supplement > li {padding:1em 1em 2em 1em; margin-left: -1em; margin-right:-1em; margin-bottom:0.5em; border:1px solid #d5dce0; border-radius:3px; } .popin-cnt .popin-content .supplement > li:not(.unwrapped) {padding:1em 1em 1em 1em; } .popin-cnt .popin-content .supplement > li:not(.unwrapped) > .supplement-nested {display:none;} .popin-cnt .popin-content .supplement > li > .supplement-nested {padding:0.5em 2em ; margin:0.5em 0.5em 0.5em 0.5em; text-align: left; border-left:0px solid #d5dce0; overflow: hidden; max-height: 5000px; transition: 0.3s;} .popin-cnt .popin-content .supplement > li > .supplement-nested h4 { margin-bottom:0em;} .popin-cnt .popin-content .supplement > li > .supplement-nested ul { padding:1em 0 1em 0; } .popin-cnt .popin-content .supplement > li > .supplement-nested li {padding:0.75em 0;} .popin-cnt .popin-content .supplement > li > .wrapper{ float:right; font-size: 1.2em; padding:0.3em; margin: -0.3em -0.3em 0 0; text-align: center; cursor: pointer; } .popin-cnt .popin-content .supplement > li > .wrapper:before { content:"\e912"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .popin-cnt .popin-content .supplement > li:not(.unwrapped) > .wrapper:before { content:"\e90f";} .popin-cnt .popin-content .supplement > li:not(.unwrapped) > .supplement-nested{ max-height:0; opacity:0; padding:0; margin:0; } .popin-cnt .popin-content .supplement > li .dish-details {margin-left: 0; margin-right: 0; margin-bottom: 0; color:#999;} /* popin when */ .popin-cnt .when-popin .popin-content {padding-top: 2em; padding-bottom: 2em;} .popin-cnt .when-popin .popin-content .radio-cnt {margin-top:2em;} /* popin warnning */ .popin-cnt .warnning-review .input-cnt.region { float:left; width:10em; margin-right:4px; margin-top: 0; margin-bottom:0;} .popin-cnt .warnning-review .input-cnt.tel { float:left; width:calc(100% - 10em - 4px); margin-top: 0; margin-bottom:0;} .popin-cnt .warnning-review .input-cnt > textarea { width:100%; min-width: 100%; max-width: 100%;} /* popin phone */ .popin-cnt .popin-content .login { padding-top: 1.5em;} /* réservation */ .popin-cnt .popin-content.reservation { padding-top: 0;} /* add as app */ .popin-cnt .add-as-app { } .popin-cnt .add-as-app > .banner-cnt { margin: 2em 0;} .popin-cnt .add-as-app > .banner-cnt > img { width: 100%;} .popin-cnt .add-as-app > .text { margin: 0 1em 2em 1em;} .popin-cnt .add-as-app > .text h2 { color:#ff344b; font-weight: 900; font-size: 1.6em;} .popin-cnt .add-as-app > .text p { font-size: 1.2em; max-width: 25em; margin: 1em auto;} .popin-cnt .add-as-app > .instructions { background: #f5f5f5; padding: 0.25em 1em ;} .popin-cnt .add-as-app > .instructions > p {line-height: 2em;} .popin-cnt .add-as-app > .instructions > p > .ios-share-icon { display: inline; height: 2em; margin-top: -0.2em;} .popin-cnt .add-as-app > .instructions > p > .android-menu-icon { display: inline; height: 1.5em;transform:rotate(90deg);} .popin-cnt .add-as-app > .instructions > p > .hintIOS{color:#2888fd;} } @media screen and (min-width: 1000px){ .popin-cnt .tingle-modal-box { border-radius:0; max-width:600px;} .popin-cnt .tingle-modal-box__content { padding:0; } .popin-cnt .title { padding: 0 75px ;height: 75px; background: #ff344b; color: white; font-size: 22px; font-weight: 700; letter-spacing: 0.05em; line-height: 75px;} .popin-cnt .title .top-back { width: 75px; height: 75px; text-align: center; } .popin-cnt .title .top-back:before { color:white; font-size: 1.5em;} .popin-cnt .title > span.mobile-show { display:none;} .popin-cnt.no-layer .title.title-logo { height:100px;} .popin-cnt.no-layer .title.title-logo img{ height:60px; margin-top:20px;} /* elements */ .popin-cnt .popin-content { padding-top:30px; max-height:calc(100vh - 200px); overflow-y:auto;} .popin-cnt .popin-content:after { content: ""; height: 30px; display: block;} .popin-cnt .popin-content.text-cnt {margin-left: auto; margin-right: auto; max-width: calc(100% - 50px);} .popin-cnt .popin-content h3 { text-align: left; margin: 25px 35px; font-size: 24px;} .popin-cnt .popin-content p { text-align: left; margin: 1em 35px 1.5em 35px;} .popin-cnt .popin-content ul.two-col-choice > li{ float:left; padding: 8px 25px; width:50%; text-align: left;} .popin-cnt .popin-content ul.two-col-choice { padding: 8px 25px;} .popin-cnt .popin-content ul.two-col-form > li{ float: left; margin-bottom:10px; display:block; width:calc(50% - 5px); font-size: 14px; text-align: left;} .popin-cnt .popin-content ul.two-col-form > li:nth-of-type(odd) { margin-right:10px;} .popin-cnt .popin-content ul.one-col-form { padding: 0px 35px 0px 35px;} .popin-cnt .popin-content ul.one-col-form > li{ display:block; margin-bottom:20px; font-size: 14px; text-align: left;} .popin-cnt .popin-content ul.two-col-form { padding: 0px 35px 0px 35px;} .popin-cnt .popin-content .warnning {margin:10px 43px; padding:10px; background: #fff8bf; font-size: 16px; color: #f88701; border-radius: 3px;} .popin-cnt .popin-content .warnning a {color: #ff344b;} .popin-cnt .popin-content form { margin: 0 auto 1em auto;} .popin-cnt .popin-content input { display:block; width:100%;} .popin-cnt .popin-content select { display:block; width:100%;} .popin-cnt .popin-content textarea { min-height: 8em; width:calc(100% - 80px);} .popin-cnt form .popin-content textarea { width:100%;} .popin-cnt .popin-content .input-cnt textarea {width:100%;} .popin-cnt .popin-content .txt { margin-bottom: 25px;} .popin-cnt .bottom { height: 95px; background: #f5f5f5; letter-spacing: 0.05em; line-height: 95px; text-align: right;} .popin-cnt .bottom > .back { float:left; margin-left:30px; color: #ff344b; cursor: pointer;} .popin-cnt .bottom > .submit { margin-right: 30px; cursor: pointer;} .popin-cnt .popin-content .icon-mail > input { padding-left:50px;} .popin-cnt .popin-content .icon-mail:before { top:0.55em; font-size: 1.8em;} .popin-cnt .popin-content .icon-lock > input { padding-left:50px;} .popin-cnt .popin-content .icon-lock:before { top:0.5em; font-size: 1.8em;} /* popin new address */ .popin-cnt.address-form .tingle-modal-box { max-width:800px; width:800px;} .popin-cnt.address-form .popin-content { padding:30px; max-height:calc(100vh - 200px); overflow-y:auto;} .popin-cnt.address-form .popin-content textarea { width:100%;} /* popin personnalisation */ .popin-cnt .popin-content .dish { background:#f5f5f5; height:175px; text-align: left; margin-top: -35px;} .popin-cnt .popin-content .dish.no-pic { height:auto; line-height: 1em; padding:20px;} .popin-cnt .popin-content .dish > .dish-pic { float:left; width:175px; height:175px; overflow:hidden;} .popin-cnt .popin-content .dish > .dish-pic > img { position:absolute; width:100%; height:auto; margin: auto; top:-9999px; bottom:-9999px; right:-9999px;left:-9999px; } .popin-cnt .popin-content .dish > .dish-name { display:inline-block; vertical-align: middle; padding: 15px; width:calc(100% - 200px); line-height: 1.1em;} .popin-cnt .popin-content .dish.no-pic > .dish-name { width:100%;} .popin-cnt .popin-content .dish > .dish-name > h2 { margin:0; line-height: 1.1em;} .popin-cnt .popin-content .dish > .dish-name > .quantity > h3 { margin:0; margin-bottom:10px; margin-top:10px; font-size: 20px; line-height: 1.1em;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more, .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { float:left; width:35px; height: 30px; border:1px solid #d5dce0; background: white; line-height: 25px; text-align: center; cursor: pointer; transition:0.2s;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { font-size: 30px; border-right:0; border-radius: 3px 0 0 3px;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more { font-size: 24px; border-left:0; border-radius: 0 3px 3px 0;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more:hover, .popin-cnt .popin-content .dish > .dish-name > .quantity > .less:hover { border:1px solid #ff344b; background: #ff344b; color:white;} .popin-cnt .popin-content .dish > .dish-name > .quantity > input { float:left; width:45px; border-radius: 0; text-align: center;} .popin-cnt .popin-content .supplement {padding:0 40px;} .popin-cnt .popin-content .supplement > li > .supplement-nested {padding:0.5em 0em 0em 2.5em; margin:0em; } .popin-cnt .popin-content .supplement > li > .supplement-nested ul { padding:0.75em 0 0em 0; } .popin-cnt .popin-content .supplement > li > .supplement-nested li {padding:0.5em 0;} .popin-cnt.dish-custom .popin-content > textarea { width: calc(100% - 50px); } /* popin warnning */ .popin-cnt .warnning-review { display:block; width:80%; margin:25px auto 25px auto;} .popin-cnt .warnning-review .input-cnt { margin:25px auto;} /* popin city choice */ .popin-cnt .popin-city-choice .popin-content {padding:20px 10px 55px 10px;} .popin-cnt .popin-city-choice .popin-content p.big { text-align: left; width:60%; margin:1.5em auto; font-size: 1.2em; } .popin-cnt .popin-city-choice .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-city-choice .main-cities { width:60%; margin:auto; text-align: left; } .popin-cnt .popin-city-choice .main-cities a { display:block;text-decoration: none; padding: 5px 0; font-size: 14px;} .popin-cnt .popin-city-choice .search-frame { width:60%; margin:auto; text-align: left;} .popin-cnt .popin-city-choice .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-city-choice .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-city-choice .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-city-choice .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-city-choice .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-city-choice .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important; } /* popin city choice */ .popin-cnt .popin-need-address {padding:25px;} .popin-cnt .popin-need-address p.big { text-align: center; margin:1em auto; font-size: 1.2em; } .popin-cnt .popin-need-address .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-need-address .search-frame { width:60%; margin:auto; text-align: left;} .popin-cnt .popin-need-address .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-need-address .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-need-address .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-need-address .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-need-address .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-need-address .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important; } } @media screen and (min-width: 750px) and (max-width: 999px){ body.tingle-enabled { position:fixed !important; overflow:hidden !important; width:100%;} .popin-cnt .tingle-modal-box { border-radius:0; width:100%; max-width:600px;} .popin-cnt .tingle-modal-box__content { padding:0; } .popin-cnt .title { padding: 0 75px; height: 75px; background: #ff344b; color: white; font-size: 24px; font-weight: 700; letter-spacing: 0.05em; line-height: 75px;} .popin-cnt .title .top-back { width: 75px; height: 75px;} .popin-cnt .title > span.mobile-show { display:none;} .popin-cnt.no-layer .title.title-logo { height:100px;} .popin-cnt.no-layer .title.title-logo img{ height:60px; margin-top:20px;} /* elements */ .popin-cnt .popin-content { padding: 20px 0 0px 0; max-height:calc(100vh - 200px); overflow-y: auto;} .popin-cnt .popin-content:after { content: ""; height: 20px; display: block; } .popin-cnt .popin-content.text-cnt {margin-left: auto; margin-right: auto; max-width: calc(100% - 50px);} .popin-cnt .popin-content h3 { text-align: left; margin: 25px 35px; font-size: 24px;} .popin-cnt .popin-content h3 > span { margin-left: 5px; color: #999; font-size: 14px; font-weight: 400;} .popin-cnt .popin-content p { text-align: left; margin: 1em 35px 1.5em 35px;} .popin-cnt .popin-content ul.two-col-choice { padding: 8px 25px;} .popin-cnt .popin-content ul.two-col-choice > li{ float:left; padding: 8px 25px; width:50%; text-align: left;} .popin-cnt .popin-content ul.two-col-form { padding: 0px 35px 0px 35px;} .popin-cnt .popin-content ul.two-col-form > li{ float: left; margin-bottom:10px; display:block; width:calc(50% - 5px); font-size: 14px; text-align: left;} .popin-cnt .popin-content ul.two-col-form > li:nth-of-type(odd) { margin-right:10px;} .popin-cnt .popin-content ul.one-col-form { padding: 0px 35px 0px 35px;} .popin-cnt .popin-content ul.one-col-form > li{ display:block; margin-bottom:10px; font-size: 14px; text-align: left;} .popin-cnt .warnning {margin:10px 43px; padding:10px; background: #fff8bf; font-size: 16px; color: #f88701; border-radius: 3px;} .popin-cnt .popin-content form > p { max-width:80%; margin:1.5em auto;} .popin-cnt .popin-content input { display:block; width:100%;} .popin-cnt .popin-content select { display:block; width:100%;} .popin-cnt .popin-content textarea { min-height: 8em; width:calc(100% - 50px);} .popin-cnt form .popin-content textarea { width:100%;} .popin-cnt .bottom { height: 95px; background: #f5f5f5; letter-spacing: 0.05em; line-height: 95px; text-align: right;} .popin-cnt .bottom > .back { float:left; margin-left:30px; color: #ff344b; cursor: pointer;} .popin-cnt .bottom > .submit { margin-right: 30px; cursor: pointer;} .popin-cnt .popin-content .icon-mail > input { padding-left:50px;} .popin-cnt .popin-content .icon-mail:before { top:0.28em; font-size: 1.6em; width:40px;} .popin-cnt .popin-content .icon-lock > input { padding-left:50px;} .popin-cnt .popin-content .icon-lock:before { top:0.25em; font-size: 1.6em; width:40px;} .popin-cnt.dish-custom .popin-content > textarea { width: calc(100% - 50px); } /* popin new address */ .popin-cnt.address-form .popin-content { padding:30px 100px; max-height:calc(100vh - 200px); overflow-y:auto;} .popin-cnt.address-form .popin-content .address-new { width:100%; margin-left:0;} /* popin personnalisation */ .popin-cnt .popin-content .dish { background:#f5f5f5; height:175px; text-align: left; margin-top: -20px;} .popin-cnt .popin-content .dish.no-pic { height:auto; line-height: 1em; padding:20px;} .popin-cnt .popin-content .dish > .dish-pic { float:left; width:175px; height:175px; overflow:hidden;} .popin-cnt .popin-content .dish > .dish-pic > img { position:absolute; width:100%; height:auto; margin: auto; top:-9999px; bottom:-9999px; right:-9999px;left:-9999px; } .popin-cnt .popin-content .dish > .dish-name { display:inline-block; vertical-align: middle; padding: 15px; width:calc(100% - 200px); line-height: 1.1em;} .popin-cnt .popin-content .dish.no-pic > .dish-name {width:100%;} .popin-cnt .popin-content .dish > .dish-name > h2 { margin:0; line-height: 1.1em; font-weight: 700; font-size: 30px;} .popin-cnt .popin-content .dish > .dish-name > .quantity > h3 { margin:0; margin-bottom:10px; margin-top:10px; font-size: 20px; line-height: 1.1em;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more, .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { float:left; width:35px; height: 35px; border:1px solid #d5dce0; background: white; text-align: center; cursor: pointer; transition:0.2s;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { font-size: 30px; line-height: 28px;border-right:0; border-radius: 3px 0 0 3px;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more { font-size: 24px; line-height: 30px;border-left:0; border-radius: 0 3px 3px 0;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more:hover, .popin-cnt .popin-content .dish > .dish-name > .quantity > .less:hover { border:1px solid #ff344b; background: #ff344b; color:white;} .popin-cnt .popin-content .dish > .dish-name > .quantity > input { float:left; width:45px; border-radius: 0; text-align: center;} .popin-cnt .popin-content .supplement {padding:0 40px;} /* popin warnning */ .popin-cnt .warnning-review { display:block; width:80%; margin:25px auto 25px auto;} .popin-cnt .warnning-review .input-cnt { margin:25px auto;} /* popin city choice */ .popin-cnt .popin-city-choice .popin-content {padding:20px 10px 55px 10px;} .popin-cnt .popin-city-choice .popin-content p.big { text-align: left; width:60%; margin:1.5em auto; font-size: 1.2em; } .popin-cnt .popin-city-choice .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-city-choice .main-cities { width:60%; margin:auto; text-align: left; } .popin-cnt .popin-city-choice .main-cities a { display:block;text-decoration: none; padding: 5px 0; font-size: 14px;} .popin-cnt .popin-city-choice .search-frame { width:60%; margin:auto; text-align: left;} .popin-cnt .popin-city-choice .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-city-choice .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-city-choice .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-city-choice .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-city-choice .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-city-choice .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important;} /* popin need address */ .popin-cnt .popin-need-address {padding:25px;} .popin-cnt .popin-need-address p.big { text-align: center; margin:1.5em auto; font-size: 1.2em; } .popin-cnt .popin-need-address .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-need-address .search-frame { width:60%; margin:auto; text-align: left;} .popin-cnt .popin-need-address .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-need-address .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-need-address .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-need-address .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-need-address .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-need-address .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important;} } @media screen and (min-width: 0px) and (max-width: 749px){ body.tingle-enabled, body.layer-enabled{ position:fixed !important; overflow:hidden !important; width:100%;} .popin-cnt .title .top-back { display:none;} .popin-cnt .tingle-modal__close { background:none; color:#333; font-size: 25px; width:60px; height:60px; top:0; right:0px; left:auto} .popin-cnt .tingle-modal__close:before { content: "\e90b"; font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .popin-cnt .tingle-modal__closeIcon { display:none; } .popin-cnt .tingle-modal__closeLabel { display:none; } .popin-cnt:not(.no-layer) {padding-top:0; overflow-y: hidden; height: 100%;} .popin-cnt:not(.no-layer) .tingle-modal-box { border-radius:0; width:100%; height:100%;} .popin-cnt:not(.no-layer) .tingle-modal-box__content { padding:0; height:100%; overflow-y: auto;} .popin-cnt:not(.no-layer) .title { z-index:15; position:fixed; height: 50px; top:0; width:100%; background: white; font-size: 18px; font-weight: 400; letter-spacing: 0.04em; line-height: 50px;} .popin-cnt:not(.no-layer) .title:after{ content:""; display:block; background:#ff344b; margin: -5px auto auto auto; width:40%; height:2px} /* elements */ .popin-cnt:not(.no-layer) .popin-content { margin-top:70px;} .popin-cnt:not(.no-layer) .popin-content:after { content: ""; height: 20px; display: block; } .popin-cnt:not(.no-layer) .popin-content h3 { text-align: left; margin: 20px 15px; font-size: 18px;} .popin-cnt:not(.no-layer) .popin-content h3 > span { margin-left: 5px; color: #999; font-size: 12px; font-weight: 400;} .popin-cnt:not(.no-layer) .popin-content p { text-align: left; margin: 1em 15px 1.5em 15px;} .popin-cnt:not(.no-layer) .warnning {margin:10px 23px; padding:10px; background: #fff8bf; font-size: 16px; color: #f88701; border-radius: 3px;} .popin-cnt:not(.no-layer) .popin-content p { font-size: 14px;} .popin-cnt:not(.no-layer) .popin-content form > p { margin:1.5em auto; max-width:400px; padding:0 20px;} .popin-cnt:not(.no-layer) .popin-content .checkbox-cnt { font-size: 14px;} .popin-cnt:not(.no-layer) .popin-content input { display:block; width:100%;} .popin-cnt:not(.no-layer) .popin-content select { display:block; width:100%;} .popin-cnt:not(.no-layer) .popin-content textarea { min-height: 8em; width:calc(100% - 30px);} .popin-cnt:not(.no-layer) .bottom { letter-spacing: 0.05em; text-align: center; padding-bottom: 1em;} .popin-cnt:not(.no-layer) .bottom > .back { position:fixed; z-index:20; top:0; cursor: pointer;} .popin-cnt:not(.no-layer) .bottom > .back > span { display:none;} .popin-cnt:not(.no-layer) .bottom > .back:before { position:absolute; left:10px; top:12px;content:"\e908"; font-family: '123cacher' !important; font-size: 25px; speak: none; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .popin-cnt:not(.no-layer) .bottom > .submit { margin: auto; width:70%; max-width:250px; height:50px; font-size: 20px; cursor: pointer;} .popin-cnt .popin-content .icon-mail > input { padding-left:40px;} .popin-cnt .popin-content .icon-mail:before { top:0.15em; font-size: 1.4em; width:40px;} .popin-cnt .popin-content .icon-lock > input { padding-left:50px;} .popin-cnt .popin-content .icon-lock:before { top:0.25em; font-size: 1.6em; width:40px;} /* no-layer ////////////////////////////////////////////////////////////////*/ .popin-cnt.no-layer { display:flex; justify-content:center; align-items:center; } .popin-cnt.no-layer .tingle-modal-box { border-radius:0; width:90%; max-width:500px; } .popin-cnt.no-layer .tingle-modal-box__content { padding:0; overflow-y:auto;} .popin-cnt.no-layer .title { height: 75px; background: #ff344b; color: white; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; line-height: 75px;} .popin-cnt.no-layer .title > span.mobile-show { display:none;} .popin-cnt.no-layer .title.title-logo { height:100px;} .popin-cnt.no-layer .title.title-logo img{ height:50px; margin-top:25px;} /* elements */ .popin-cnt.no-layer .popin-content { max-height:calc(100vh - 200px); overflow-y: auto;} .popin-cnt.no-layer .popin-content:after { content: ""; height: 20px; display: block; } .popin-cnt.no-layer .popin-content h3 { text-align: left; margin: 25px 35px; font-size: 24px;} .popin-cnt.no-layer .popin-content h3 > span { margin-left: 5px; color: #999; font-size: 14px; font-weight: 400;} .popin-cnt.no-layer .popin-content p { text-align: left; margin: 1em 35px;} .popin-cnt.no-layer .popin-content ul.two-col-choice { padding: 8px 25px;} .popin-cnt.no-layer .popin-content ul.two-col-choice > li{ float:left; padding: 8px 25px; width:50%; text-align: left;} .popin-cnt.no-layer .popin-content ul.two-col-form { padding: 8px 35px;} .popin-cnt.no-layer .popin-content ul.two-col-form > li{ float: left; margin-bottom:10px; display:block; width:calc(50% - 5px); font-size: 14px; text-align: left;} .popin-cnt.no-layer .popin-content ul.two-col-form > li:nth-of-type(odd) { margin-right:10px;} .popin-cnt.no-layer .popin-content ul.one-col-form { padding: 0px 35px 0px 35px;} .popin-cnt.no-layer .popin-content ul.one-col-form > li{ display:block; margin-bottom:10px; font-size: 14px; text-align: left;} .popin-cnt.no-layer .warnning {margin:10px 43px; padding:10px; background: #fff8bf; font-size: 16px; color: #f88701; border-radius: 3px;} .popin-cnt.no-layer .popin-content form > p { max-width:80%; margin:1.5em auto;} .popin-cnt.no-layer .popin-content input { display:block; width:100%;} .popin-cnt.no-layer .popin-content select { display:block; width:100%;} .popin-cnt.no-layer .popin-content textarea { margin: auto; margin-bottom: 25px; min-height: 8em;} .popin-cnt.no-layer .bottom { height: 95px; background: #f5f5f5; letter-spacing: 0.05em; line-height: 95px; text-align: right;} .popin-cnt.no-layer .bottom > .back { float:left; margin-left:30px; color: #ff344b; cursor: pointer;} .popin-cnt.no-layer .bottom > .submit { margin-right: 30px; cursor: pointer;} .popin-cnt .popin-content .icon-mail > input { padding-left:40px;} .popin-cnt .popin-content .icon-mail:before { top:0.15em; font-size: 1.4em; width:40px;} .popin-cnt .popin-content .icon-lock > input { padding-left:40px;} .popin-cnt .popin-content .icon-lock:before { top:0.15em; font-size: 1.4em; width:40px;} /* popin personnalisation */ .popin-cnt.dish-custom .bottom {position: fixed; bottom: 0; width: 100%; background: white; box-shadow: 0 0 5px 0px rgba(0,0,0,0.2); padding-top: 1em; } .popin-cnt.dish-custom .popin-content:after { content:""; display: block; width: 100%; height: 6em;} .popin-cnt .popin-content .dish { height:35vw; text-align: left;} .popin-cnt .popin-content .dish > .dish-name > .quantity {margin-top:5px;} .popin-cnt .popin-content .dish > .dish-name > .quantity > h3 {text-align: left;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more, .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { float:left; width:35px; height: 28px; border:1px solid #d5dce0; background: white; text-align: center; cursor: pointer; border:1px solid #ff344b; background: #ff344b; color:white; transition:0.2s;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .less { font-size: 30px; line-height: 18px; border-right:0; border-radius: 3px 0 0 3px;} .popin-cnt .popin-content .dish > .dish-name > .quantity > .more { font-size: 24px; line-height: 22px; border-left:0; border-radius: 0 3px 3px 0;} .popin-cnt .popin-content .dish > .dish-name > .quantity > input { float:left; width:45px; height:28px; border-radius: 0; text-align: center;} .popin-cnt .popin-content .supplement {padding:0 25px;} /* popin warnning */ .popin-cnt .warnning-review { display:block; width:80%; max-width: 320px; margin:80px auto 0px auto;} .popin-cnt .warnning-review .input-cnt { margin:25px auto;} /* popin city choice */ .popin-cnt .popin-city-choice .popin-content {padding:20px 10px 55px 10px;} .popin-cnt .popin-city-choice .popin-content p.big { text-align: left; width:95%; max-width:300px; margin:1.1em auto; font-size: 1.1em; line-height: 1.6em; } .popin-cnt .popin-city-choice .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-city-choice .main-cities { width:95%; max-width:300px; margin:auto; text-align: left; } .popin-cnt .popin-city-choice .main-cities a { display:block;text-decoration: none; padding: 5px 0; font-size: 14px;} .popin-cnt .popin-city-choice .search-frame { width:95%; max-width:300px; margin:auto; text-align: left;} .popin-cnt .popin-city-choice .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-city-choice .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-city-choice .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-city-choice .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-city-choice .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-city-choice .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important;} /* popin nedd address */ .popin-cnt .popin-need-address {padding:20px;} .popin-cnt .popin-need-address p.big { text-align: center; width:95%; max-width:360px; margin:1.1em auto; font-size: 1.1em; line-height: 1.6em; } .popin-cnt .popin-need-address .sub-title { font-weight:700; font-size:22px; margin-bottom:10px;} .popin-cnt .popin-need-address .search-frame { width:95%; max-width:360px; margin:auto; text-align: left;} .popin-cnt .popin-need-address .search-frame .icon-find:before { z-index:10; position:absolute; font-size: 22px; top:6px; left:6px; pointer-events: none;} .popin-cnt .popin-need-address .search-frame .input-cnt {float:left; width:calc(100% - 40px);} .popin-cnt .popin-need-address .search-frame .input-cnt > input { padding-left:32px; border-radius:3px 0 0 3px;} .popin-cnt .popin-need-address .search-frame .delete {float:left; margin-left: -35px; width:35px; height: 35px;} .popin-cnt .popin-need-address .search-frame .ok { float:left; width:40px; padding:0; text-align: center; border-radius: 0 3px 3px 0 ;} .popin-cnt .popin-need-address .popin-content .ui-autocomplete { overflow-y:auto !important; max-height:auto !important; height:auto !important;} } @media screen and (min-width: 481px) and (max-width: 749px){ .popin-cnt .title > span.mobile-show { display:none;} .popin-cnt .title > span.mobile-hide { display:block;} .popin-cnt .popin-content.text-cnt {margin-left: auto; margin-right: auto; max-width: calc(100% - 40px);} .popin-cnt .popin-content ul.two-col-choice { padding: 8px 5px;} .popin-cnt .popin-content ul.two-col-choice > li{ float:left; padding: 8px 25px; width:50%; text-align: left;} .popin-cnt .popin-content ul.two-col-form { max-width:360px; margin-left:auto; margin-right:auto; padding: 0px 5px 0px 5px;} .popin-cnt .popin-content ul.two-col-form > li{ float: left; margin-bottom:10px; display:block; width:calc(50% - 5px); font-size: 16px; text-align: left;} .popin-cnt .popin-content ul.two-col-form > li:nth-of-type(odd) { margin-right:10px;} .popin-cnt .popin-content ul.one-col-form { max-width:360px; margin-left:auto; margin-right:auto; padding: 0px 5px 0px 5px;} .popin-cnt .popin-content ul.one-col-form > li{ display:block; margin-bottom:10px; font-size: 16px; text-align: left;} /* popin personnalisation */ .popin-cnt .popin-content .dish { height:40vw; line-height: 40vw; text-align: left; } .popin-cnt .popin-content .dish.no-pic { height:auto; line-height: 1em; padding:10px;} .popin-cnt .popin-content .dish > .dish-pic { float:left; width:40vw; height:40vw; overflow:hidden;} .popin-cnt .popin-content .dish > .dish-pic > img { position:absolute; width:100%; height:auto; margin: auto; top:-9999px; bottom:-9999px; right:-9999px;left:-9999px; } .popin-cnt .popin-content .dish > .dish-name { display:inline-block; vertical-align: middle; padding: 0 8px; width:calc(100% - 40vw); line-height: 1.1em;} .popin-cnt .popin-content .dish.no-pic > .dish-name { width:100%;} .popin-cnt .popin-content .dish > .dish-name > h2 { margin:0; font-size: 28px; line-height: 1.1em;} .popin-cnt .popin-content .dish > .dish-name > .quantity > h3 { margin:0; margin-bottom:5px; margin-top:10px; font-size: 16px; line-height: 1.1em;} } @media screen and (min-width: 0px) and (max-width: 480px){ .popin-cnt .title > span.mobile-hide { display:none;} .popin-cnt .popin-content.text-cnt {margin-left: auto; margin-right: auto; max-width: calc(100% - 20px);} .popin-cnt .popin-content ul.two-col-choice { padding: 8px 15px;} .popin-cnt .popin-content ul.two-col-choice > li{ display:block; padding: 8px 0; font-size: 16px; text-align: left;} .popin-cnt .popin-content ul.one-col-form, .popin-cnt .popin-content ul.two-col-form { max-width:360px; margin-left:auto; margin-right:auto; padding:0 20px;} .popin-cnt .popin-content ul.one-col-form > li, .popin-cnt .popin-content ul.two-col-form > li{ display:block; margin-bottom:10px; font-size: 16px; text-align: left;} /* popin personnalisation */ .popin-cnt .popin-content .dish { height:30vw; line-height: 30vw; text-align: left;} .popin-cnt .popin-content .dish.no-pic { height:auto; line-height: 1em; padding:0 15px;} .popin-cnt .popin-content .dish > .dish-pic { float:left; display:inline-block; width:30vw; height:30vw; overflow:hidden;} .popin-cnt .popin-content .dish > .dish-pic > img { position:absolute; width:100%; height:auto; margin: auto; top:-9999px; bottom:-9999px; right:-9999px;left:-9999px; } .popin-cnt .popin-content .dish > .dish-name { display:inline-block; vertical-align: middle; padding: 0 8px; width:calc(100% - 30vw); line-height: 1.1em;} .popin-cnt .popin-content .dish.no-pic > .dish-name { padding: 0px; width:100%;} .popin-cnt .popin-content .dish > .dish-name > h2 { margin:0; font-size: 18px; font-weight: 700; line-height: 1.1em;} .popin-cnt .popin-content .dish > .dish-name > .quantity > h3 { margin:0; margin-bottom:5px; margin-top:5px; font-size: 14px; line-height: 1.1em;} .popin-cnt .popin-content .supplement.nest > li > .supplement-nested {padding:0.75em 0em 0em 0.75em; margin:0em; } .popin-cnt .popin-content .supplement > li > .supplement-nested ul { padding:1em 0 0.5em 0; } .popin-cnt .popin-content .supplement > li > .supplement-nested li {padding:0.75em 0;} /* need address */ .popin-cnt .popin-city-choice .search-frame .icon-find:before, .popin-cnt .popin-need-address .search-frame .icon-find:before { top:4px; } .popin-cnt .popin-city-choice .search-frame .delete, .popin-cnt .popin-need-address .search-frame .delete {margin-left: -30px; width:30px; height: 30px;} } @media screen and (min-width: 0px) and (max-width: 360px){ /* add as app */ .popin-cnt .add-as-app { } .popin-cnt .add-as-app > .banner-cnt { margin: 1.5em 0 1em 0;} .popin-cnt .add-as-app > .banner-cnt > img { width: 100%;} .popin-cnt .add-as-app > .text { margin: 0 1em 1.5em 1em;} .popin-cnt .add-as-app > .text h2 { color:#ff344b; font-weight: 900; font-size: 1.4em;} .popin-cnt .add-as-app > .text p { font-size: 1.1em; max-width: 25em; margin: 0.75em auto;} .popin-cnt .add-as-app > .instructions { background: #f5f5f5; padding: 0.25em 1em ;} .popin-cnt .add-as-app > .instructions > p {line-height: 1.8em;} .popin-cnt .add-as-app > .instructions > p > .ios-share-icon { display: inline; height: 1.6em; margin-top: -0.2em;} .popin-cnt .add-as-app > .instructions > p > .android-menu-icon { display: inline; height: 1.4em;transform:rotate(90deg);} .popin-cnt .add-as-app > .instructions > p > .hintIOS{color:#2888fd;} } /*------popin Gallery------------------------------------------------------------------*/ @media screen and (min-width:0px){ .gallery-cnt { background:rgba(0,0,0,0.9); overflow-y:hidden; cursor: default} .gallery-cnt > .tingle-modal-box { position:fixed; margin:0; padding:0; top:0; left:0; width:100vw; height:100vh; border-radius:0; background:none; pointer-events: none;} .gallery-cnt > .tingle-modal-box > .tingle-modal-box__content {width:100%; height:100%; margin:0; padding:0; } .gallery-cnt > .tingle-modal-box > .tingle-modal__close { pointer-events:auto; } .gallery-cnt .slick-gallery { width:100%; height:100%;} .gallery-cnt .slick-gallery .slick-prev, .gallery-cnt .slick-gallery .slick-next{ position:absolute; z-index: 100; font-size: 0; border-radius:100%; color:#ffffff; background:none; text-shadow: 0 0 5px rgba(0,0,0,0.7); text-align: center; -webkit-animation: 0.3s; animation: 0.3s; pointer-events:auto;} .gallery-cnt .slick-gallery .slick-prev:before, .gallery-cnt .slick-gallery .slick-next:before { font-family: '123cacher' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: 0.3s; animation: 0.3s;} .gallery-cnt .slick-gallery .slick-prev:before { content:'\e910'; left:-0.1em; } .gallery-cnt .slick-gallery .slick-next:before { content:'\e911'; right:-0.1em; } .gallery-cnt .slick-gallery .slick-prev:hover, .gallery-cnt .slick-gallery .slick-next:hover {transform:scale(1.1); text-shadow: 0 0 15px rgba(0,0,0,0.9);} .gallery-cnt .slick-gallery .slick-list { width:100%; height:100%;} .gallery-cnt .slick-gallery .slick-list .slick-track{ width:100%; height:100%;} .gallery-cnt .slick-gallery .gallery-onepic { width:100%; height:100%; background-size: contain; background-position:center; background-repeat: no-repeat; } .gallery-cnt .slick-gallery .gallery-onepic img { position:absolute; margin:auto !important; top:-9999px; bottom:-9999px; left:-9999px; right:-9999px; height:auto !important; width:auto !important; max-width:100% !important; max-height:100% !important; pointer-events:auto; cursor: -webkit-grab; cursor: grab;} } @media screen and (min-width: 750px){ .gallery-cnt .tingle-modal__close { background:none; width:90px; right:10px; left:auto} .gallery-cnt .tingle-modal__closeIcone { } .gallery-cnt .tingle-modal__closeLabel { display:none; } .gallery-cnt .slick-gallery .slick-prev, .gallery-cnt .slick-gallery .slick-next{ top:calc(50% - 40px); width:80px; height:80px;} .gallery-cnt .slick-gallery .slick-prev { left:20px;} .gallery-cnt .slick-gallery .slick-next { right:20px;} .gallery-cnt .slick-gallery .slick-prev:before, .gallery-cnt .slick-gallery .slick-next:before { font-size: 45px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .gallery-cnt .tingle-modal__close { background:none; width:70px; right:10px; left:auto} .gallery-cnt .tingle-modal__closeIcone { } .gallery-cnt .tingle-modal__closeLabel { display:none; } .gallery-cnt .slick-gallery .slick-prev, .gallery-cnt .slick-gallery .slick-next{ border:none; background:none; top:calc(50% - 20px); width:40px; height:40px;} .gallery-cnt .slick-gallery .slick-prev:hover, .gallery-cnt .slick-gallery .slick-next:hover{ border:none; background:none; color:#ffffff} .gallery-cnt .slick-gallery .slick-prev { left:10px;} .gallery-cnt .slick-gallery .slick-next { right:10px;} .gallery-cnt .slick-gallery .slick-prev:before, .gallery-cnt .slick-gallery .slick-next:before { font-size: 30px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*------footer------------------------------------------*/ @media screen and (min-width: 0px){ body > footer > .commitments {background:#fbfbfb; border-top:1px solid #f5f5f5; } body > footer > .commitments > ul { color: #333; text-align: left;} body > footer > .commitments > ul > li > a { display:block; text-decoration: none; text-align: center;} body > footer > .commitments > ul > li > a:hover {color:#333; } body > footer > .commitments > ul > li > a:before { position:absolute; text-align: center; background: #ff344b; color: white; border-radius:100%; overflow: hidden; transition:0.2s;} body > footer > .commitments > ul > li > a.icon-review:before{ padding-top: 0.07em; } body > footer > .footer-list { background: #f5f5f5; } body > footer > .footer-list > .cnt { } body > footer > .footer-list .mail-sub > .title { display:block; font-weight: 700; font-size: 18px; margin: 0px 10px 7px 0;} body > footer > .footer-list .mail-sub > .sub { display:block; font-size: 14px; margin: 0px 10px 7px 0;} body > footer > .footer-list .social-links > span { display:inline-block; font-weight: 700; font-size: 18px; margin: 0px 10px 7px 0;} body > footer > .footer-list .social-links { margin:10px 0;} body > footer > .footer-list .social-links > a { color:white; margin: 0 3px; vertical-align: middle;} body > footer > .footer-list .social-links > a.icon-facebook { background:#4c67a1;} body > footer > .footer-list .social-links > a.icon-twitter { background:#00acee;} body > footer > .footer-list .social-links > a.icon-google { background:#d94d3a;} body > footer > .footer-list .social-links > a.icon-instagram { background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} body > footer > .footer-list .social-links > a.icon-instagram:before {font-size: 1.2em; position:absolute; top:50%; left:0; right:0; margin:auto; transform:translate(0,-50%);} body > footer > .footer-list .social-links > a:hover{ color:white; transform:scale(1.1) rotate(360deg); transition:0.5s;} body > footer > .footer-list .mail-sub { float:right; text-align: left;} body > footer > .footer-list .mail-sub > form > input[type="text"] { float:left; border-radius: 3px 0 0 3px; width:calc(100% - 40px); } body > footer > .footer-list .mail-sub > form > button { float:left; border-radius: 0 3px 3px 0; width:40px; text-align: center; padding:0;} body > footer > .footer-list .mail-sub > form > input[type="radio"] + label { float:left; width:50%; display:block; margin: 8px 0;} body > footer > .footer-list .sav { width:100%; height:45px; border-radius:3px; cursor:pointer; overflow: hidden;} body > footer > .footer-list .sav:before { display:block; float:left; width:25px; height:35px; margin:5px 10px 5px 0px; color: #666; font-size: 32px; line-height: 35px; text-align: left; border-radius:100%; text-align: center; transition:0.5s;} body > footer > .footer-list .sav:hover:before { color: #4285f4; } body > footer > .footer-list .sav > .desc { float:left; padding: 4px 5px 7px 0px; width:calc(100% - 55px); color: #333;} body > footer > .footer-list .sav > .desc > .main { font-weight: 700; font-size: 18px; transition:0.2s;} body > footer > .footer-list .sav > .desc > .sub { font-size: 14px; transition:0.2s;} body > footer > .footer-list .sav:hover > .desc > .sub { color: #4285f4; } body > footer > .footer-list .sav > .desc:before { position:absolute; right:-35px; top:-20px; font-size: 120px; color:rgba(0,0,0,0.05);} body > footer > .footer-list .stores-dl {float:left; width:100%; padding:15px 0 20px 0;} body > footer > .footer-list .stores-dl > li {float:left; margin:0px 10px 10px 0; width:calc(50% - 5px);} body > footer > .footer-list .stores-dl > li:nth-of-type(2n) { margin-right:0; } body > footer > .footer-list .stores-dl > li > a > img {width:100%;} body > footer > .footer-list .foot-lists > ul > li > a { text-decoration: none; } body > footer > .footer-list .foot-lists > ul > li:first-child { padding: 25px 0 0.5em 0; font-weight: 700; } } @media screen and (min-width: 1000px){ body > footer { margin-top:75px;} body > footer > .commitments { padding-bottom:35px; padding-top:40px; margin-top:50px;} body > footer > .commitments > ul > li { float:left; width:calc((100% - 30px) / 4); font-size: 16px; margin-right:10px;} body > footer > .commitments > ul > li:last-child {margin-right:0;} body > footer > .commitments > ul > li > a { padding-top:85px;} body > footer > .commitments > ul > li > a:before { top:0; left:0; right:0; margin:auto; width:75px; height:75px; font-size: 2.8em; line-height: 75px;} body > footer > .commitments > ul > li > a.icon-cacher:before{ font-size: 25px;} body > footer > .commitments > ul > li > a.icon-review:before{ font-size: 40px;} body > footer > .commitments > ul > li > a.icon-review:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 55px; } body > footer > .commitments > ul > li > a.icon-cacher:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 38px; } body > footer > .commitments > ul > li > a:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 60px; } body > footer > .commitments > ul > li > a > .desc { display:inline-block; line-height: 1.2em; vertical-align: middle; width:100%; padding: 0 10px; text-align: center;} body > footer > .commitments > ul > li > a > .desc > .main { font-size: 22px; font-weight: 700;} body > footer > .commitments > ul > li > a > .desc > .sub { font-size: 16px; margin-top:0.4em;} body > footer > .footer-list { padding: 0px 0 100px 0;} body > footer > .footer-list > .cnt { padding: 15px 0 0 0;} body > footer > .footer-list .foot-act { float:right; width:100%; padding: 15px 0;} body > footer > .footer-list .social-links { float:right; text-align: left; margin: 17px 0 25px 0;} body > footer > .footer-list .social-links > a { display:inline-block; width:35px; height:35px; text-decoration: none; font-size: 20px; line-height: 36px; border-radius:100%; text-align: center;} body > footer > .footer-list .mail-sub { float:left; margin: 10px 0 15px 0; width:300px} body > footer > .footer-list .mail-sub > form { float:right; padding-top:3px;} body > footer > .footer-list .mail-sub > form > label { font-size: 14px;} body > footer > .footer-list .mail-sub > span { float:left;} body > footer > .footer-list .sav { float:left; width:210px; text-align: left; } body > footer > .footer-list .stores-dl {float:right; width:180px} body > footer > .footer-list .stores-dl > li {float:right; margin: 0 0 10px 0; width:160px;} body > footer > .footer-list .foot-lists { width:100%; margin-right:10px; float: left; border-top:1px solid #ccc;} body > footer > .footer-list .foot-lists > ul { float: left; width:calc((100% - 30px) / 4); text-align: left; margin-right:10px;} body > footer > .footer-list .foot-lists > ul:nth-of-type(4n) { margin-right:0; } body > footer > .footer-list .foot-lists > ul > li { font-size: 14px; padding: 0.3em 0; } } @media screen and (min-width: 750px) and (max-width: 999px) { body > footer > .commitments { padding-bottom:35px; padding-top:40px;margin-top:70px;} body > footer > .commitments > ul > li { float:left; width:calc((100% - 15px) / 4); font-size: 16px; margin-right:5px;} body > footer > .commitments > ul > li:last-child {margin-right:0;} body > footer > .commitments > ul > li > a{ padding-top:85px;} body > footer > .commitments > ul > li > a:before { top:0; left:0; right:0; margin:auto; width:75px; height:75px; font-size: 2.8em; line-height: 75px;} body > footer > .commitments > ul > li > a.icon-cacher:before{ font-size: 25px;} body > footer > .commitments > ul > li > a.icon-review:before{ font-size: 40px;} body > footer > .commitments > ul > li > a.icon-review:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 55px; } body > footer > .commitments > ul > li > a.icon-cacher:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 38px; } body > footer > .commitments > ul > li > a:hover:before { top:-15px; width:85px; height:85px; line-height: 85px; font-size: 60px; } body > footer > .commitments > ul > li > a > .desc { display:inline-block; line-height: 1.2em; vertical-align: middle; width:100%; padding: 0 5px; text-align: center;} body > footer > .commitments > ul > li > a > .desc > .main { font-size: 20px; font-weight: 700;} body > footer > .commitments > ul > li > a > .desc > .sub { font-size: 14px; margin-top:0.3em;} body > footer > .footer-list { padding: 0 0 70px 0;} body > footer > .footer-list > .cnt { padding: 25px 0 0 0;} body > footer > .footer-list .foot-act { float:right; width:100%;} body > footer > .footer-list .social-links { float:right; text-align: left; margin: 17px 0 25px 0;} body > footer > .footer-list .social-links > a { display:inline-block; width:35px; height:35px; text-decoration: none; font-size: 20px; line-height: 36px; border-radius:100%; text-align: center;} body > footer > .footer-list .mail-sub { float:left; margin: 15px 0 15px 0; width:300px} body > footer > .footer-list .mail-sub > form { float:right; padding-top:3px;} body > footer > .footer-list .mail-sub > form > label { font-size: 14px;} body > footer > .footer-list .mail-sub > span { float:left;} body > footer > .footer-list .sav { width:210px; text-align: left; } body > footer > .footer-list .stores-dl {float:right; width:180px} body > footer > .footer-list .stores-dl > li {float:right; margin: 0 0 5px 0; width:160px;} body > footer > .footer-list .foot-lists { float: left;} body > footer > .footer-list .foot-lists > ul { float: left; width:calc((100% - 10px) / 2); text-align: left; margin-right:10px;} body > footer > .footer-list .foot-lists > ul:nth-of-type(2n) { margin-right:0; } body > footer > .footer-list .foot-lists > ul > li { font-size: 14px; padding: 0.3em 0; } } @media screen and (min-width: 0px) and (max-width: 749px) { body > footer > .commitments { padding-bottom:35px; margin-top:20px;} body > footer > .commitments > ul > li { float:left; width:calc((100% - 10px) / 2); font-size: 16px; margin-right:10px; margin-top:45px;} body > footer > .commitments > ul > li:nth-of-type(2n) {margin-right:0;} body > footer > .commitments > ul > li > a{ padding-top:75px;} body > footer > .commitments > ul > li > a:before { top:0; left:0; right:0; margin:auto; width:65px; height:65px; font-size: 35px; line-height: 65px;} body > footer > .commitments > ul > li > a.icon-cacher:before{ font-size: 22px;} body > footer > .commitments > ul > li > a.icon-review:before{ font-size: 35px;} body > footer > .commitments > ul > li > a > .desc { display:inline-block; line-height: 1.1em; vertical-align: middle; width:100%; text-align: center;} body > footer > .commitments > ul > li > a > .desc > .main { font-size: 18px; font-weight: 700;} body > footer > .commitments > ul > li > a > .desc > .sub { font-size: 12px; margin-top:0.5em; } body > footer > .footer-list { padding: 0 0 50px 0;} body > footer > .footer-list > .cnt{ padding: 25px 0 0 0;} body > footer > .footer-list .social-links { float:left; text-align: left; margin:10px auto 25px auto;} body > footer > .footer-list .social-links > a { display:inline-block; width:35px; height:35px; text-decoration: none; font-size: 20px; line-height: 36px; border-radius:100%; text-align: center;} body > footer > .footer-list .mail-sub { float:left; padding-top:5px; width:100%; margin:15px auto 25px auto;} body > footer > .footer-list .mail-sub > form { float:left; clear:both; width:100%; max-width:310px; } body > footer > .footer-list .mail-sub > span { float:left; width:100%; clear:both; display:block;} body > footer > .footer-list .sav { text-align: left; } body > footer > .footer-list .stores-dl {float:left; width:100%; padding:20px 0 10px 0;} body > footer > .footer-list .stores-dl > li { max-width:160px;} body > footer > .footer-list .foot-lists > ul { float: left; width:100%; text-align: left; margin-right:5px;} body > footer > .footer-list .foot-lists > ul:nth-of-type(2n) { margin-right:0; } body > footer > .footer-list .foot-lists > ul > li { font-size: 14px; padding: 0.4em 0; } } @media screen and (min-width: 550px) and (max-width: 749px) { body > footer > .footer-list .foot-lists > ul { float: left; width:calc((100% - 5px) / 2); text-align: left; margin-right:5px;} body > footer > .footer-list .foot-lists > ul:nth-of-type(2n) { margin-right:0; } } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*------percentage circles-------------------------------------------------------------------*/ @media screen and (min-width:0px){ .rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice { clip: rect(auto, auto, auto, auto); } .pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill { position: absolute; border: 0.2em solid #ff344b; width: 0.6em; height: 0.6em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 50%; transform: rotate(0deg); } .pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill { transform: rotate(180deg); } .c100 { font-size: 50px; width: 1em; height: 1em; border-radius: 50%; margin: 0 0.1em 0.1em 0; background-color: #d5dce0; } .c100 *, .c100 *:before, .c100 *:after { box-sizing: content-box; } .c100.center { float: none; margin: 0 auto; } .c100:after { position: absolute; top: 0.1em; left: 0.1em; display: block; content: " "; border-radius: 50%; background-color: white; width: 0.8em; height: 0.8em; transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in; } .c100 > span { position: absolute; width: 100%; z-index: 1; left: 0; top: 0; line-height: 50px; font-size: 16px; color: #333; font-weight: 700; display: block; text-align: center; white-space: nowrap; } .c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .c100.p1 .bar { transform: rotate(3.6deg); } .c100.p2 .bar { transform: rotate(7.2deg); } .c100.p3 .bar { transform: rotate(10.8deg); } .c100.p4 .bar { transform: rotate(14.4deg); } .c100.p5 .bar { transform: rotate(18deg); } .c100.p6 .bar { transform: rotate(21.6deg); } .c100.p7 .bar { transform: rotate(25.2deg); } .c100.p8 .bar { transform: rotate(28.8deg); } .c100.p9 .bar { transform: rotate(32.4deg); } .c100.p10 .bar { transform: rotate(36deg); } .c100.p11 .bar { transform: rotate(39.6deg); } .c100.p12 .bar { transform: rotate(43.2deg); } .c100.p13 .bar { transform: rotate(46.8deg); } .c100.p14 .bar { transform: rotate(50.4deg); } .c100.p15 .bar { transform: rotate(54deg); } .c100.p16 .bar { transform: rotate(57.6deg); } .c100.p17 .bar { transform: rotate(61.2deg); } .c100.p18 .bar { transform: rotate(64.8deg); } .c100.p19 .bar { transform: rotate(68.4deg); } .c100.p20 .bar { transform: rotate(72deg); } .c100.p21 .bar { transform: rotate(75.6deg); } .c100.p22 .bar { transform: rotate(79.2deg); } .c100.p23 .bar { transform: rotate(82.8deg); } .c100.p24 .bar { transform: rotate(86.4deg); } .c100.p25 .bar { transform: rotate(90deg); } .c100.p26 .bar { transform: rotate(93.6deg); } .c100.p27 .bar { transform: rotate(97.2deg); } .c100.p28 .bar { transform: rotate(100.8deg); } .c100.p29 .bar { transform: rotate(104.4deg); } .c100.p30 .bar { transform: rotate(108deg); } .c100.p31 .bar { transform: rotate(111.6deg); } .c100.p32 .bar { transform: rotate(115.2deg); } .c100.p33 .bar { transform: rotate(118.8deg); } .c100.p34 .bar { transform: rotate(122.4deg); } .c100.p35 .bar { transform: rotate(126deg); } .c100.p36 .bar { transform: rotate(129.6deg); } .c100.p37 .bar { transform: rotate(133.2deg); } .c100.p38 .bar { transform: rotate(136.8deg); } .c100.p39 .bar { transform: rotate(140.4deg); } .c100.p40 .bar { transform: rotate(144deg); } .c100.p41 .bar { transform: rotate(147.6deg); } .c100.p42 .bar { transform: rotate(151.2deg); } .c100.p43 .bar { transform: rotate(154.8deg); } .c100.p44 .bar { transform: rotate(158.4deg); } .c100.p45 .bar { transform: rotate(162deg); } .c100.p46 .bar { transform: rotate(165.6deg); } .c100.p47 .bar { transform: rotate(169.2deg); } .c100.p48 .bar { transform: rotate(172.8deg); } .c100.p49 .bar { transform: rotate(176.4deg); } .c100.p50 .bar { transform: rotate(180deg); } .c100.p51 .bar { transform: rotate(183.6deg); } .c100.p52 .bar { transform: rotate(187.2deg); } .c100.p53 .bar { transform: rotate(190.8deg); } .c100.p54 .bar { transform: rotate(194.4deg); } .c100.p55 .bar { transform: rotate(198deg); } .c100.p56 .bar { transform: rotate(201.6deg); } .c100.p57 .bar { transform: rotate(205.2deg); } .c100.p58 .bar { transform: rotate(208.8deg); } .c100.p59 .bar { transform: rotate(212.4deg); } .c100.p60 .bar { transform: rotate(216deg); } .c100.p61 .bar { transform: rotate(219.6deg); } .c100.p62 .bar { transform: rotate(223.2deg); } .c100.p63 .bar { transform: rotate(226.8deg); } .c100.p64 .bar { transform: rotate(230.4deg); } .c100.p65 .bar { transform: rotate(234deg); } .c100.p66 .bar { transform: rotate(237.6deg); } .c100.p67 .bar { transform: rotate(241.2deg); } .c100.p68 .bar { transform: rotate(244.8deg); } .c100.p69 .bar { transform: rotate(248.4deg); } .c100.p70 .bar { transform: rotate(252deg); } .c100.p71 .bar { transform: rotate(255.6deg); } .c100.p72 .bar { transform: rotate(259.2deg); } .c100.p73 .bar { transform: rotate(262.8deg); } .c100.p74 .bar { transform: rotate(266.4deg); } .c100.p75 .bar { transform: rotate(270deg); } .c100.p76 .bar { transform: rotate(273.6deg); } .c100.p77 .bar { transform: rotate(277.2deg); } .c100.p78 .bar { transform: rotate(280.8deg); } .c100.p79 .bar { transform: rotate(284.4deg); } .c100.p80 .bar { transform: rotate(288deg); } .c100.p81 .bar { transform: rotate(291.6deg); } .c100.p82 .bar { transform: rotate(295.2deg); } .c100.p83 .bar { transform: rotate(298.8deg); } .c100.p84 .bar { transform: rotate(302.4deg); } .c100.p85 .bar { transform: rotate(306deg); } .c100.p86 .bar { transform: rotate(309.6deg); } .c100.p87 .bar { transform: rotate(313.2deg); } .c100.p88 .bar { transform: rotate(316.8deg); } .c100.p89 .bar { transform: rotate(320.4deg); } .c100.p90 .bar { transform: rotate(324deg); } .c100.p91 .bar { transform: rotate(327.6deg); } .c100.p92 .bar { transform: rotate(331.2deg); } .c100.p93 .bar { transform: rotate(334.8deg); } .c100.p94 .bar { transform: rotate(338.4deg); } .c100.p95 .bar { transform: rotate(342deg); } .c100.p96 .bar { transform: rotate(345.6deg); } .c100.p97 .bar { transform: rotate(349.2deg); } .c100.p98 .bar { transform: rotate(352.8deg); } .c100.p99 .bar { transform: rotate(356.4deg); } .c100.p100 .bar { transform: rotate(360deg); } } @media screen and (min-width: 1000px){ .c100 { font-size: 50px;} .c100 > span { line-height: 50px; font-size: 16px;} .pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill { border: 0.09em solid #ff344b; width: 0.82em; height: 0.82em;} .c100:after { top: 0.06em; left: 0.06em; width: 0.88em; height: 0.88em;} } @media screen and (min-width: 750px) and (max-width: 999px){ .c100 { font-size: 50px;} .c100 > span { line-height: 50px; font-size: 16px;} } @media screen and (min-width: 0px) and (max-width: 749px){ .c100 { font-size: 40px;} .c100 > span { line-height: 40px; font-size: 14px;} } @media screen and (min-width: 0px) and (max-width: 355px){ .c100 { font-size: 30px;} .c100 > span { line-height: 30px; font-size: 14px;} } /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*------pour inté, a suprrimer-------------------------------------------------------------------*/ .int-options { position:fixed; opacity:0.05; z-index: 1000; padding:8px; margin:8px; background: white; border:1px solid #333; transition:0.5s; border-radius:5px;} .int-options > a { display:inline-block; margin:3px; padding:10px 10px; cursor: pointer; border-radius:5px;} .int-options > a > span {opacity:0;} .int-options:hover {opacity:1;} .int-options > a.active > span {opacity:1;} .listing-resto:not(.active){ display: none;} .tipso_content { cursor: pointer; } }