@font-face {font-family: "FranklinGothicLTCom"; font-style: normal; font-weight: normal; src: url("/THEMES/bs3/fonts/FranklinGothicLTCom-Bk.ttf") format("truetype"); }
@font-face {font-family: "FranklinGothicLTCom-Dm"; font-style: normal; font-weight: normal; src: url("/THEMES/bs3/fonts/FranklinGothicLTCom-Dm.ttf") format("truetype"); }
@font-face {font-family: "ITCFranklinGothicStd"; font-style: normal; font-weight: normal; src: url("/THEMES/bs3/fonts/ITCFranklinGothicStd-DmCd.otf") format("opentype"); }
@font-face {font-family: "ITCFranklinGothicLgt"; font-style: normal; font-weight: normal; src: url("/THEMES/bs3/fonts/ITCFranklinGothicStd-BkCd.otf") format("opentype"); }

html {height: 100%;}
body {font-family: "FranklinGothicLTCom", sans-serif;font-size:17px;padding-top:0;margin-bottom:0;background-color: #000;color:#fff; height: 100%;}
a, a:visited {color:#e1192c;}
option[default] {color:#aaa; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; }
input[type=number] {-moz-appearance:textfield; }
p strong, li strong {font-family: "FranklinGothicLTCom-Dm", sans-serif;}

#topnav {margin-bottom: 2em;}
#topnav.navbar { margin-bottom: 0; height: 60px}
#topnav .navbar-toggle { padding: 12px 10px 0;}
#topnav.navbar-right {margin-right: 0 }
#topnav.navbar-default {background: #000; border:none;border-radius: 0}
#topnav .navbar-header, #topnav .navbar-brand {float: none; text-align: center;display: block;}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {margin-left: 0}
#topnav.navbar > .container .navbar-brand {padding-top: 0; }
#topnav.navbar > .container .navbar-brand span { color: #fff;text-transform: uppercase; display: block;padding: 19px 0; font-size: 1em;font-family: "ITCFranklinGothicStd",sans-serif; line-height: 1.6em}
#topnav.navbar-default .navbar-nav>.active>a, #topnav.navbar-default .navbar-nav>.active>a:focus, #topnav.navbar-default .navbar-nav>.active>a:hover,
#topnav.navbar-default .navbar-nav>.open>a, #topnav.navbar-default .navbar-nav>.open>a:focus, #topnav.navbar-default .navbar-nav>.open>a:hover,
#topnav .dropdown-menu>li>a:focus, #topnav .dropdown-menu>li>a:hover,
#topnav .dropdown-menu>.active>a, #topnav .dropdown-menu>.active>a:focus, #topnav .dropdown-menu>.active>a:hover {background-color: #000; color: #e1192c}
#topnav.navbar-default .navbar-nav > li a {color: #fff; font-family: "ITCFranklinGothicStd",sans-serif;font-size:1.4em; text-transform: uppercase;text-align: center; vertical-align: middle;padding-top:17px;padding-bottom: 13px;}
#topnav.navbar-default .navbar-nav > li > a:last-of-type {padding-right: 0}
#topnav.navbar-default .navbar-nav li.current-menu-item > a, #topnav.navbar-default .navbar-nav li.current-menu-ancestor > a, #topnav.navbar-default .navbar-nav li.current-page-ancestor > a {color: #e1192c}
#topnav.navbar-default .dropdown li {padding: 0 15px;}
#topnav.navbar-default .navbar-nav .dropdown-menu li a { text-align: left; border-bottom: 1px solid #fff;padding:8px 0; font-size: 1.2em}
#topnav.navbar-default .navbar-nav .dropdown-menu li:last-of-type a {border-bottom: none;}
#topnav.navbar-default .navbar-nav>li>a:focus, #topnav.navbar-default .navbar-nav>li>a:hover, #topnav.navbar-default .navbar-nav > li a:hover {color: #e1192c}
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }

#topnav .navigation {list-style: none; margin: 20px 0 0 0 ; padding: 0;display: flex}
#topnav .navigation li {display: inline-block; width: auto}
#topnav .navigation li:first-of-type {flex-grow: 1}
#topnav .navigation li:last-of-type:before { content: "|";  padding-right: 5px; padding-left: 5px}

.idiomas {position: absolute;top:11px;right: 35px;color:#fff; ; font-weight: bold; color: #ddd}
.idiomas a {color: #f00; font-weight: bold}
.idiomas span {font-weight: bold;color: #666}

section {padding-top:2em; position: relative;}
section:first-of-type, aside {padding-top: 2em}
section:last-of-type:after {display: none}
section h1, section h2 {text-transform: uppercase; margin:0; text-align: center;}

aside {display: none;}
.cart {display: block; box-shadow: none;background-color: #333; border-color: #666;}
.cart .item:hover {background-color: #333}
.modal-content {background-color: #333; border-color: #666;}
.sublabel, .formulari .control-label-input, .formulari .control-label-select {color: #fff}

footer#tom {background-color: #000; color:#fff; height: 30px;margin-top:auto; }
footer#tom ul {text-align: center; margin:0;line-height: 30px}
footer#tom li a {color:#fff;}
footer#tom li a:hover {color:#f00;}
footer#tom li:first-of-type:after{content: " | "; padding-left: 10px}

.btn.btn-tor {background-color: #e1192c; color:#fff; border-radius: 1em;text-transform: uppercase;padding: 13px 45px 8px; font-family: 'ITCFranklinGothicLgt', sans-serif;font-size: 1em}
p.legal {font-style: italic; font-size: 13.5px}

header#hero {position: relative; }
header#hero img {width: 100%;height: auto;}

#leader {margin-bottom: 0;}
#leader img  { max-width: 2000px; height: auto; margin: 0 auto; display: block;}
.carousel {margin: 0 auto; overflow: hidden;}
#leader .carousel .carousel-inner {overflow: hidden; width: 150%; text-align: center;}
#leader .carousel img {width: 100%;height: auto;margin: 0 auto;}
#carouselto {margin-bottom: 0}
#cta {width: 280px; margin:2em auto; display: block;}


#social {text-align: center;}

#funciona .col-md-4, #funciona h1, #funciona p.legal {text-align: center;}
#funciona h1 {text-align: center;margin-bottom: 1em;}
#funciona h4, #funciona h3 {font-family: "FranklinGothicLTCom-Dm", sans-serif;;}
#funciona ul {}
#funciona li {}
#funciona a {text-align: center;}
#funciona a span {font-size: 15px;text-align: center;}
#funciona li.legal {font-size: 15px;background: none;font-style: italic;}
#funciona .info { background-color: #333; ;padding: 20px; margin-top: 2em; border: 1px solid #666; border-radius: 5px}

option[hidden] {display: none}

#restaurants h2 {margin: 0 auto 1.5em;background-color: #f4f4f4; font-size: 20px;padding: 15px 10px}
.carousel-control {bottom: 57%;}
.carousel-indicators {bottom: 55%; }
.carousel-caption {position: initial;text-shadow: none;text-align: left;color: #000; }
.carousel-caption h3 {font-family: "FranklinGothicLTCom-Dm", sans-serif;}
.carousel-caption p {font-family: "FranklinGothicLTCom", sans-serif; font-size: 15px; line-height: 18px}

section#local {padding-top: 2em; text-align: center;}
section#local h3, section#local h4 {margin-bottom: 0;font-weight: bold;font-size: 23px;}
section#local img {width: 100%;height: auto; margin:10px 0;}
section#local p {font-weight: bold}
section#local ul {padding: 0; list-style: none; text-align: center;}
section#local li {display: inline-block; padding:0 15px;}

#compra .form-errors ul{padding-inline-start: 15px;}
#compra .form-errors p, #compra .form-errors li {font-size:0.9em;}
#compra h1 {max-width: 13em; }
#compra .intro .col-md-4, #compra h1{text-align: center; margin: 0.5em auto}
.modal-title {text-transform: uppercase; font-size: 20px}
.formulari label {font-size: 15px}
#entradesi{ width: 3.5em;}
.extra1, .extra2 {display: none;}
.pagos {clear: both; padding-left: 0.5em;}
.pagos p {font-size: 14px;padding-right: 10px; padding-left: 10px;}
.rowdescompte {margin-top: 1em}

#social p {width: 290px; margin: 1em auto 2em}
#social h1 {text-transform: uppercase; font-size: 25px}
.xarxes {width: 100%; text-align: center;margin: 0 auto;}
.xarxes ul {list-style:none;width: 330px; padding: 0; margin: 0 auto}
.xarxes li {display: inline-block;}
.xarxes a {display: inline-block; width: 100px; padding: 15px; }
.xarxes img {width: 70px; height: auto;}

.confirmacio .navbar-toggle, .confirmacio #mainmenu {display: none!important}
section#quees {margin-bottom: 5em}

.btn-to-fixed-cart, .btn-to-fixed-cart:visited, .btn-to-fixed-cart:focus {bottom: 3em;}
.btn-to-fixed-cart.colicon, .btn-to-fixed-cart:visited.colicon, .btn-to-fixed-cart:focus.colicon {transition: none;}

@media (max-width: 480px) {
  #topnav.navbar > .container .navbar-brand span {text-align: left;}
  #funciona h1 { font-size:22px; font-weight: bolder}
  .col-xs-12 {padding: 0}
}

@media (max-width: 767px) {
  #topnav.navbar {min-height: 55px;}
  .idiomas {top:18px;right: 0px}
  section:last-of-type { padding-top: 0}
}

@media (min-width: 630px) {
  .rest_o {max-width: calc( (243px * 2) + 30px )}
  #restaurants figure {width: 243px;height: 162px;margin: 0 auto; float: left;}
  #topnav.navbar > .container .navbar-brand span { color: #fff;text-transform: uppercase; display: block;padding: 15px 0; font-size: 1.5em;font-family: "ITCFranklinGothicStd",sans-serif; line-height: 1.5em}
  #leader .carousel .carousel-inner {width: 100%;}
  #cta {display: none}
}

@media (min-width: 768px) {
  ul.menu {width: calc(100% - 115px)}
  ul.menu .dropdown { width: 50%}
  #topnav .dropdown-menu {background-color: #000;margin-left: 12%;}
  ul.menu {width: calc(100% - 160px)}
  .idiomas {top:3px;right: 5px}
  section .container {max-width: 500px}
  section#funciona .container {width: 830px}
  #restaurants .container div{ width: 600px; overflow: visible;margin: 0 auto }
  .carousel-control {bottom: 30%;}
  .carousel-indicators {bottom: 33%; }
  section#compra .container {max-width: 690px}
  .pagos p {font-size: 0.7em}
}

@media (min-width: 1024px) {
  #topnav.navbar {margin-bottom: 0;min-height: 90px}
  #topnav.navbar > .container .navbar-brand span { padding: 15px 15px 15px; font-size: 2.5em; }
  ul.menu {width: calc(100% - 115px)}
  #topnav .dropdown-menu {background-color: #000;margin-left: 29%;}
  #topnav .navigation { margin: 80px 0 0 0 ;}
  .idiomas {top:11px;right: 50px}
  header#hero {margin-top:0px;}
  section .container {max-width: 930px}
  #funciona .col-md-8 {padding-left: 6em}
  #funciona .col-md-4, #funciona h1, #funciona p.legal {text-align: left;}
  #funciona h1 {text-align: left;padding-right: 0;margin-bottom: 1em}
  #restaurants .container div{ width:auto; margin: 0 }
  #restaurants h2 {padding: 30px 30px; font-size: 30px}
  .carousel-control {bottom: 40%;}
  .carousel-indicators {bottom: 38%; }
  aside {display: block}
  #compra .intro .col-md-4, #compra h1 {text-align: left; margin: 0 0 0.5em 0;}
  #compra .row.intro:nth-child(1)  div:nth-child(2) {padding:10px 0 0 40px;}
  #social h1 {font-size: 36px;}
}

@media (min-width: 1200px) {
  #topnav.navbar {min-height: 110px}
  #topnav.navbar > .container .navbar-brand span { padding: 25px 15px 15px; }
  header#hero {margin-top:0;}
  .rest_o {padding: 0; max-width: 100%;background-color: transparent;}
  #restaurants h2 {padding: 30px 85px; }
  .carousel {height: 725px}
  .carousel-inner > .item > a > img, .carousel-inner > .item > img {width: 730px; height: 500px}
  .carousel-control {bottom: 30%;}
  .carousel-indicators {bottom: 33%; }
}