@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";


/* ------------------------------------------------------------------------------------------------ */
/* -- Custom CSS for restaurants ------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------ */
/* -- reset all oulines --------------------------------------------------------------------------- */
.tabs .tab-menu .tab-link:focus, .container-fluid .tabscomp .tab-content:focus{outline: none!important;}
* {outline: none!important;}

/* ------------------------------------------------------------------------------------------------ */
/* -- Text borders -------------------------------------------------------------------------------- */
.tabscomp .tab-content .grid:last-of-type .richtext{margin-bottom: 2em; border-bottom: solid .1em rgb(236, 237, 238); min-height: 170px; position: relative;}
@media (max-width:1270px) and (min-width:1015px){.tabscomp .tab-content .grid:last-of-type .richtext{min-height:215px}}
@media (max-width:1015px) and (min-width:105px){.tabscomp .tab-content .grid:last-of-type .richtext{min-height:250px}}
@media (max-width:766px) {
  .tabscomp .tab-content .grid:last-of-type .richtext{min-height:auto}
}
.tabscomp .tab-content .col-md-4:not(:last-child){border-right: solid .1em rgb(236, 237, 238);}
@media (max-width:766px) {
  .tabscomp .tab-content .col-md-4:not(:last-child){border-right: 0;}
}
/* ------------------------------------------------------------------------------------------------ */
/* -- Active tab styling -------------------------------------------------------------------------- */
.container-fluid .tabscomp .tab-menu .tab-link{background-color: rgb(236, 237, 238); color:#333}
.container-fluid .tabscomp .tab-menu .tab-link span{font-weight: 400;}
.container-fluid .tabscomp .tab-menu .tab-link[aria-selected="true"] span{font-weight: 600;}
@media(max-width:766px){
.container-fluid .tabscomp .tab-menu .tab-link[aria-selected="true"]::before{height:0; opacity:0;}
  .container-fluid .tabscomp .tab-menu .tab-link::after{height:0; opacity:0;}
}

/* ------------------------------------------------------------------------------------------------ */
/* -- Hero styling -------------------------------------------------------------------------------- */
.container-fluid .Hero-custom .row .col-md-6:last-child .image{border-radius:16px!important;}
.Hero-custom{margin-bottom: var(--Sz2)!important;}
.Hero-custom .card-img-bg {transform: rotateX(180deg);}

/* ------------------------------------------------------------------------------------------------ */
/* -- Scroll to top icon -------------------------------------------------------------------------- */
.container-fluid .to-top{position: absolute; left:-100vw;}
.container-fluid .to-top::before{content:''; height:20px; width:20px; position: fixed; z-index:500; right: 3vw; top: 180px; opacity: 0; transform: rotate(45deg); border-top: 5px solid #fff; border-left: 5px solid #fff; pointer-events: all; transition:var(--an1);}
.container-fluid .to-top.active::before{top: 150px; opacity: 1; transition: var(--an1);}
.container-fluid .to-top::after{content:''; height:50px; width:5.5vw; position: fixed; z-index:200; right: -6vw; opacity:0; top: 131px; background: var(--LightBlue); border-radius: 50px 0 0 50px; transition: var(--an1); border: 2.5px solid var(--LightBlue);}
.container-fluid .to-top.active::after{right: 0vw; opacity:1; transition: var(--an1);}

.container-fluid .to-top.active:hover::before{border-color:var(--LightBlue); transition: var(--an1);}
.container-fluid .to-top.active:hover::after{background-color: #fff; border-right:0!important; transition: var(--an1);}
@media (max-width:1200px)and (min-width:766px) {
  .container-fluid .to-top::before{right:2vw;}
}
@media (max-width:900px) and (min-width:766px) {
  .container-fluid .to-top::after{width:8vw}
}
@media (max-width:766px) {
  .container-fluid .to-top::after{width:50px;}
  .container-fluid .to-top::before{right:15px;}
}

/* --------------------------------------------------------------- */
/* -- Arrow link on ID ------------------------- V1 - 08/03/23 --- */
/* --------------------------------------------------------------- */
#arrow-link::after{content: ""; width: 18px; height: 14px; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-left: var(--Sz02); transition: var(--an2); position: relative; top: 2px;}
#arrow-link:hover::after{background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue2Right.svg"); margin-left: var(--Sz01);}

.new-restaurant{position:relative; z-index:1;}
.new-restaurant::before{position:absolute; display:inline-block; width:max-content; content:'Nieuw'; top:calc(-100% - var(--Sz0)); left:-20px; color:var(--LightBlue); background-color:#ececec; text-align:end; padding:var(--Sz01); z-index:0; border-radius:var(--BrSmall); box-shadow:var(--SmallBoxShadow); font-size:13px}