@font-face {
    font-family: 'bourton';
    src: url('fonts/bourtonlinebold-webfont.woff2') format('woff2'),
         url('fonts/bourtonlinebold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bourton';
    src: url('fonts/bourtonbase-webfont.woff2') format('woff2'),
         url('fonts/bourtonbase-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


html { height: 100vh; }
body { height: 100vh; background-color: #011688; color: #fff; font-family: 'bourton', sans-serif; }

a { color: #fff; }
input:-webkit-autofill { -webkit-box-shadow:0 0 0 500px white inset !important; }

.video-js--full, .video-js--fill { height: 100%!important; }
.video-js--fill .vjs-tech { object-fit: cover; }
.video-js--fill .vjs-poster { background-size: cover; }

/* tarteaucitron */
#tarteaucitronPersonalize { background:#2d76e4!important; }
#contentWrapper { height: 100%; }

.cta { display: inline-block; background-color: #011688; color: #fff; padding: 10px 30px; border: none; border-radius: 21px; font-size: 18px; font-weight: bold; line-height: 1.2; height: 42px; box-shadow: 0px 3px 0px 0px rgba(74, 119, 185, .5); }

.close-button { position: relative; width: 28px; height: 28px; background-color: #011688; border-radius: 50%; box-shadow: 0px 2px 0px 0px rgba(74, 119, 185, .5); }
.close-button:before, .close-button:after { position: absolute; left: 13px; top: 8px; content: ''; height: 12px; width: 2px; background-color: #fff; border-radius: 5px; }
.close-button:before { transform: rotate(45deg); }
.close-button:after { transform: rotate(-45deg); }

@keyframes floating {
  to {
    transform: translateY(10px);
  }
}

/*.floating-animated { animation: floating 3s alternate infinite; }*/

.top-header { position: absolute; width: 100%; top: 0; left: 0; text-align: center; padding-top: 10px; height: 60px; }
.top-header img { height: 40px; width: auto; position: relative; top: 0; transition: .2s ease-in-out; }

.main { display: table; width: 100%; height: calc(100vh - 30px); background: url(medias/sky.jpg) no-repeat center; background-size: 100% 100%; background-size: cover; background-position: 50% 100%;/*bottom center*/ background-color: #2d76e4; transition: background-position 2s ease-in-out .2s; }
.sections { display: table-cell; vertical-align: middle; text-align: center; padding-top: 60px; height: 100%; }

.background-video { position: fixed; top: 0; left: 0; width: 100%; height: calc(100vh - 30px); opacity: 0; transition: opacity .2s ease-in-out; }

.show-intro-video .main { background-position: 50% 0%; transition: background-position .2s ease-in-out 0s; }
.show-intro-video .background-video { opacity: 1; transition: opacity .2s ease-in-out .2s; }

.main section { display: none; margin-left: auto; margin-right: auto; }
.main section.section--current { display: block; }

.main section.loading { font-weight: bold; padding-bottom: 60px; }
.main section.loading .loader { width: 100px; height: 29px; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 15px; }
.main section.loading .loader div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(medias/bretzel-loader.svg) no-repeat top left; background-size: 100px 29px; }
.main section.loading .loader .loader-fg { width: 0%; }
.main section.loading .loader .loader-bg { opacity: .5; }


.main section.intro { line-height: 1; padding-bottom: 30px; transition: .5s; }
.main section.intro h1 { font-weight: bold; line-height: 1; transition: .5s; font-size: 26px; }
.main section.intro p { margin-bottom: 25px; transition: .5s linear .2s; }
.main section.intro .cta { transition: opacity .2s ease-out .4s, transform .2s ease-out .4s; }
.main section.intro .cta img { width: 20px; height: 20px; vertical-align: top; margin-right: 5px; }
.main section.intro--in h1 { opacity: 0; }
.main section.intro--in p { opacity: 0; }
.main section.intro--in .cta { opacity: 0; transform: scale(0); }
.main section.intro--out { transform: scale(0); opacity: 0; }

.main section.sandwiches-list { position: relative; height: 100%; min-height: 420px; overflow: hidden; }
.main section.sandwiches-list h1 { font-weight: bold; font-size: 18px; margin-top: 0; }
.main section.sandwiches-list .list-container { text-align: center; position: absolute; top: 60px; left: 0; width: 100%; height: calc(100vh - 320px); transition: 1s; }
.main section.sandwich-selected .list-container { height: 50vw; }

.main section.sandwiches-list .frame { height: 100%; overflow: hidden; width: 100%; }
.main section.sandwiches-list .frame ul { list-style: none; margin: 0; padding: 0; height: 100%; }
.main section.sandwiches-list .frame li { float: left; width: 200px; height: 100%; margin: 0; padding: 0; cursor: ew-resize; display: flex; flex-direction: column; justify-content: center; }

.main section.sandwiches-list .frame li .sandwich-preview-content { position: relative; top: 0; left: 0; transition: .5s; }
.main section.sandwiches-list .frame li .picture { opacity: .3; transition: opacity .5s; position: relative; }
.main section.sandwiches-list .frame li .picture .photo { width: 84%; position: relative; z-index: 2; }
.main section.sandwiches-list .frame li .picture .shadow { width: 70%; position: absolute; z-index: 1; bottom: 0; left: 15%; opacity: 0; transition: opacity .5s; }
.main section.sandwiches-list .frame li h2 { opacity: 0; color: #011688; font-weight: bold; font-size: 22px; margin-top: 10px; transition: opacity .5s; }
.main section.sandwiches-list .frame li.active .picture { opacity: 1!important; }
.main section.sandwiches-list .frame li.active .picture img { cursor: pointer; }
.main section.sandwiches-list .frame li.active .picture .photo { animation: floating 3s alternate infinite; }
.main section.sandwiches-list .frame li.active .picture .shadow { opacity: .5; }
.main section.sandwiches-list .frame li.active h2 { opacity: 1; cursor: pointer; }
.main section.sandwich-selected .frame li .picture { opacity: 0; }
.main section.sandwich-selected .frame li.active .picture img { cursor: ew-resize; }
.main section.sandwich-selected .frame li.active h2 { cursor: ew-resize; }

.main section.sandwiches-list .cloud { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-20%); padding-bottom: 60%; transition: .5s; }
.main section.sandwich-selected .cloud { transform: scale(.9) translateY(-30%); }
.main section.sandwiches-list .cloud .cloud-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(medias/cloud.png) no-repeat top center; background-size: 116% auto; }

.main section.sandwiches-list .sandwich-details { position: relative; z-index: 3; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.main section.sandwich-selected .sandwich-details { max-height: 600px; opacity: 1; transition: 1.5s; transition-delay: .5s; }
.main section.sandwiches-list .sandwich-details h2 { display: inline-block; background-color: #011688; padding: 6px 16px 4px 16px; line-height: 1; font-size: 14px; margin-top: calc(52vw); margin-bottom: 20px; /*pointer-events: auto;*/ }
.main section.sandwiches-list .sandwich-details .ingredients { list-style: none; margin: 0; padding: 0; color: #011688; font-weight: bold; font-size: 16px; margin-bottom: 35px; /*pointer-events: auto;*/ }
.main section.sandwiches-list .sandwich-details .ingredients li { margin: 0; padding: 0; margin-bottom: 14px; line-height: 1.2; }
.main section.sandwiches-list .sandwich-details .ingredients li .icon { width: 15px; margin-right: 10px; display: inline-block; text-align: center; vertical-align: text-top; }
.main section.sandwiches-list .sandwich-details .ingredients li .icon img { max-width: 15px; max-height: 15px; }
.main section.sandwiches-list .sandwich-details .ingredients li .name { display: inline-block; vertical-align: middle; }

.main section.sandwiches-list .sandwich-details .share-buttons { color: #011688; font-weight: bold; text-align: right; margin-right: 20px; padding-bottom: 20px; pointer-events: auto; }
.main section.sandwiches-list .sandwich-details .share-buttons .share-button { background-color: #011688; color: #fff; display: inline-block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; text-align: center; padding-top: 6px; margin-left: 5px; box-shadow: 0px 2px 0px 0px rgba(74, 119, 185, .5); }
.main section.sandwiches-list .sandwich-details .share-buttons .share-button:hover { background-color: #0140df; }

.main section.sandwiches-list .back-button-text { display: none; }
.main section.sandwiches-list .sandwich-details .back-button { display: inline-block; padding: 6px 0 0 0; font-size: 26px; width: 42px; position: absolute; bottom: 20px; left: 20px; cursor: pointer; opacity: 0; pointer-events: auto; z-index: 4; }
.main section.sandwich-selected .sandwich-details .back-button { opacity: 1; transition: .3s linear 2s; }

.main section.sandwiches-list .frame li.selected .sandwich-preview-content { transform: scale(.9); }

.main section.sandwiches-list .control { position: absolute; top: 50%; width: 30px; height: 40px; padding: 10px; margin-top: -34px; cursor: pointer; overflow: hidden; transition: .3s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.main section.sandwiches-list .control img { width: 100%; height: 100%; }
.main section.sandwiches-list .control--prev { left: 5px; }
.main section.sandwiches-list .control--next { right: 5px; }
.main section.sandwich-selected .control { width: 0!important; padding: 0; }

.main section.sandwiches-list .tools { position: absolute; left: 0; right: 0; bottom: 0; height: 166px; overflow: hidden; transition: .5s; }
.main section.sandwich-selected .tools { height: 0!important; }
.main section.sandwiches-list .tools .slider-info { padding-top: 4px; }
.main section.sandwiches-list .tools .slider-info-message { display: inline-block; text-align: left; color: #011688; white-space: nowrap; font-size: 12px; margin-bottom: 15px; width: 240px; }
.main section.sandwiches-list .tools .icon { vertical-align: middle; margin-right: 10px; max-width: 15px; max-height: 15px; }
.main section.sandwiches-list .tools .slider-info .icon { float: left; position: relative; top: -4px; max-width: 40px; max-height: 40px; }
.main section.sandwiches-list .tools .scroll-message { display: none; }
.main section.sandwiches-list .tools .search-button { position: relative; display: inline-block; width: 290px; }
.main section.sandwiches-list .tools .search-button .cta { font-size: 13px; font-weight: normal; margin-bottom: 15px; white-space: nowrap; width: 100%; }
.main section.sandwiches-list .tools .search-button .placeholder { display: inline-block; vertical-align: middle; overflow: hidden; max-width: 100%; }
.main section.sandwiches-list .tools .search-button .selected-ingredients { display: none; list-style: none; margin: 0; padding: 0; height: 26px; width: 100%; vertical-align: middle; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.main section.sandwiches-list .tools .search-button .selected-ingredients li { font-size: 16px; height: 100%; line-height: 26px; display: inline-block; background: url(medias/losange-pasquier.png) no-repeat left center; background-size: 15px 15px; padding-left: 35px; margin-right: 20px; }
.main section.sandwiches-list .tools .search-button .selected-ingredients li:first-child { background: none; padding-left: 0; }
.main section.sandwiches-list .tools .search-button .selected-ingredients li .name { letter-spacing: -1px; }
.main section.sandwiches-list .tools .search-button .close-button { position: absolute; top: 7px; right: -10px; cursor: pointer; display: none; }
.with-selected-ingredients .main section.sandwiches-list .tools .search-button .selected-ingredients { display: inline-block; }
.with-selected-ingredients .main section.sandwiches-list .tools .search-button .placeholder { display: none; }
.with-selected-ingredients .main section.sandwiches-list .tools .search-button .close-button { display: inline-block; }
.main section.sandwiches-list .tools .moreinfo-button .cta { font-size: 13px; background-color: #fff; color: #011688; border: solid 2px #fcd800; box-shadow: none; width: 290px; line-height: 1.7; text-decoration: none; }


.search-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; display: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.search-panel .search-bar { height: 60px; overflow: hidden; }
.with-selected-ingredients .search-panel .search-bar { height: 144px; }
.search-panel .search-bar .text-input { height: 60px; border-bottom: dashed 1px #011688; position: relative; }
.search-panel .search-bar .text-input input { margin: 0; padding: 0; width: 100%; border: none; height: 100%; background-color: transparent; color: #011688; font-weight: bold; position: absolute; top: 0; left: 0; text-align: center; outline: none; }
.search-panel .search-bar .text-input .placeholder { height: 100%; line-height: 60px; color: #011688; font-weight: bold; text-align: center; }
.search-panel .search-bar .text-input .placeholder .icon { vertical-align: baseline; margin-right: 10px; max-width: 15px; max-height: 15px; }
.search-panel .search-bar .selected-ingredients { list-style: none; margin: 0; padding: 0; height: 40px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.search-panel .search-bar .selected-ingredients li { font-size: 16px; height: 100%; line-height: 40px; display: inline-block; color: #011688; background: url(medias/losange-pasquier.png) no-repeat left center; background-size: 15px 15px; padding-left: 35px; margin-right: 20px; }
.search-panel .search-bar .selected-ingredients li:first-child { background: none; padding-left: 0; margin-left: 20px; }
.search-panel .search-bar .selected-ingredients li .name { cursor: zoom-out; letter-spacing: -1px; }
.search-panel .search-bar .submit-button { height: 44px; border: none; width: 100%; background-color: #011688; color: #fff; font-size: 18px; font-weight: bold; }
.search-panel .search-ingredients { text-align: center; overflow-y: scroll; -webkit-overflow-scrolling: touch; height: calc(100% - 60px); }
.with-selected-ingredients .search-panel .search-ingredients { height: calc(100% - 144px); }
.search-panel .search-ingredients ul { list-style: none; margin: 0; padding: 0; color: #011688; font-size: 16px; letter-spacing: -2px; display: inline-block; }
.search-panel .search-ingredients li { margin: 0; padding: 0; padding: 5px 20px; margin: 2px; line-height: 1.2; text-align: left; cursor: default; opacity: .1; }
.search-panel .search-ingredients li.hidden { display: none; }
.search-panel .search-ingredients li.available { opacity: 1; cursor: pointer; }
.search-panel .search-ingredients li.selected { opacity: 1; background-color: #011688!important; color: #fff; cursor: zoom-out; }
.search-panel .search-ingredients li .icon { width: 22px; height: 22px; margin-right: 10px; display: inline-block; text-align: center; vertical-align: text-top; }
.search-panel .search-ingredients li.selected .icon { background-color: #fff; border-radius: 50%; }
.search-panel .search-ingredients li .icon img { max-width: 15px; max-height: 15px; }
.search-panel .search-ingredients li .name { display: inline-block; vertical-align: middle; }
.search-panel .search-ingredients li.no-result { opacity: 1; }
.search-panel .close-button { position: absolute; top: 8px; right: 8px; cursor: pointer; }
/* .with-selected-ingredients .search-panel .close-button { display: none; } */

.searching { overflow: hidden; }
.searching .search-panel { display: block; }
.searching .main section.sandwiches-list { pointer-events: none; }


footer { background-color: #011688; text-align: center; padding: 20px 0; }
footer a { color: #fff!important; cursor: pointer; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 0; margin: 0; }
footer .nav-links li { margin-bottom: 5px; }
footer .social-links { margin-top: 15px; }
footer .social-links li { display: inline-block; font-size: 24px; margin-left: 12px; margin-right: 12px; }
footer .copyright { margin-top: 15px; font-size: 12px; }

/* desktop */
@media (min-width: 768px) {
  .mobile { display: none; }

  .cta { height: 46px; border-radius: 23px; }
  .cta:hover { background-color: #0140df; }
  .cta:focus { outline: none; }

  .close-button:hover { background-color: #0140df; }

  .top-header { padding-top: 40px; height: 125px; }
  .top-header img { height: 75px; width: auto; }

  .sections { padding-top: 125px; }

  .background-video { height: calc(100% - 40px); }

  .main { height: calc(100% - 40px); }
  .main section.loading { font-size: 20px; }
  .main section.loading .loader { width: 140px; height: 41px; }
  .main section.loading .loader div { background-size: 140px 41px; }

  .main section.intro { font-size: 24px; }
  .main section.intro h1 { font-size: 70px; margin-bottom: 30px; }
  .main section.intro p { margin-bottom: 46px; }

  .main section.sandwiches-list h1 { font-size: 28px; }
  .main section.sandwiches-list .list-container { top: 30px; height: calc(100% - 30px); transition: none; }
  .main section.sandwiches-list .frame li { padding-bottom: 70px; }
  .main section.sandwiches-list .frame li h2 { font-size: 40px; }
  .main section.sandwiches-list .frame li .picture .photo { width: 66%; }
  .main section.sandwiches-list .frame li .picture .shadow { width: 50%; left: 25%; }

  .main section.sandwiches-list .cloud { left: 23%; width: 55%; padding-bottom: 27%; transform: translateY(-35%); }
  .main section.sandwich-selected .cloud { transform: translateY(-35%); left: 4%; }
  .main section.sandwiches-list .cloud .cloud-content { background-size: 90% auto; }

  .main section.sandwiches-list .sandwich-details { position: absolute; text-align: left; left: 65%; right: 0; top: 50%; transform: translateY(-50%); }
  .main section.sandwich-selected .sandwich-details { transition: .5s ease-out; transition-delay: .5s; }
  .main section.sandwiches-list .sandwich-details h2 { margin-top: 0; font-size: 20px; margin-bottom: 25px; margin-left: 10px; }
  .main section.sandwiches-list .sandwich-details .ingredients li .icon { width: 20px; margin-right: 15px; }
  .main section.sandwiches-list .sandwich-details .ingredients li .icon img { max-width: 20px; max-height: 20px; }
  .main section.sandwiches-list .sandwich-details .share-buttons { text-align: left; margin-left: 10px; }
  .main section.sandwiches-list .frame li.selected .sandwich-preview-content { transform: scale(1.2); left: -35%; }

  .main section.sandwiches-list .back-button-text { display: inline-block; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); cursor: default; opacity: 0; pointer-events: none; }
  .main section.sandwiches-list .back-button-text img { width: 20px; height: 20px; vertical-align: top; margin-right: 5px; }
  .main section.sandwich-selected .back-button-text { opacity: 1; cursor: pointer; pointer-events: auto; transition: opacity 1s ease-in-out .5s; }
  .main section.sandwich-selected .sandwich-details .back-button { display: none; }

  .main section.sandwiches-list .control { width: 45px; height: 70px; margin-top: -80px; }
  .main section.sandwiches-list .control--prev { left: 15px; }
  .main section.sandwiches-list .control--next { right: 15px; }

  .main section.sandwiches-list .tools { height: 60px; }
  .main section.sandwiches-list .tools .slider-info { position: absolute; left: 50px; bottom: 0; padding-top: 0; }
  .main section.sandwiches-list .tools .scroll-message { display: inline-block; }
  .main section.sandwiches-list .tools .swipe-message { display: none; }
  .touch-device .main section.sandwiches-list .tools .scroll-message { display: none; }
  .touch-device .main section.sandwiches-list .tools .swipe-message { display: inline-block; }
  .main section.sandwiches-list .tools .search-button { width: auto; max-width: calc(100% - 590px); }
  .main section.sandwiches-list .tools .search-button .cta { font-size: 15px; }
  .main section.sandwiches-list .tools .search-button .selected-ingredients { overflow: hidden; text-align: left; }
  .main section.sandwiches-list .tools .moreinfo-button { position: absolute; right: 25px; top: 0; }
  .main section.sandwiches-list .tools .moreinfo-button .cta { padding: 12px 15px; width: auto; }
  .main section.sandwiches-list .tools .moreinfo-button .cta:hover { background-color: #fcd800; }

  .search-panel { top: 240px; bottom: 40px; }
  .search-panel .search-bar { height: 60px!important; overflow: visible; }
  .search-panel .search-bar .text-input { width: 350px; text-align: left; padding-left: 20px; padding-right: 20px; float: left; }
  .search-panel .search-bar .text-input input { text-align: left; padding-left: 20px; }
  .search-panel .search-bar .text-input .placeholder { text-align: left; font-weight: normal; font-size: 16px; letter-spacing: -1px; }
  .search-panel .search-bar .selected-ingredients { height: 100%; line-height: 60px; width: calc(100% - 350px - 150px); float: left; text-align: left; border-left: dashed 1px #011688; overflow: hidden; border-bottom: dashed 1px #011688; }
  .search-panel .search-bar .selected-ingredients li { line-height: 60px; }
  .search-panel .search-bar .selected-ingredients li .name:hover { color: #ca0000; }
  .search-panel .search-bar .submit-button { height: 100%; width: 150px; float: left; }
  .search-panel .search-bar .submit-button:hover { background-color: #0140df; }
  .search-panel .search-ingredients { height: calc(100% - 60px)!important; }
  .search-panel .search-ingredients ul { display: block; }
  .search-panel .search-ingredients li { float: left; width: 230px; }
  .search-panel .search-ingredients li.available:hover { background-color: #f0f0f0; }
  .search-panel .search-ingredients li.selected:hover { background-color: #ca0000!important; }
  .search-panel .close-button { top: -34px; }

  footer { height: 40px; text-align: left; padding: 10px 0; position: relative; letter-spacing: -1.3px; line-height: 11px; white-space: nowrap; overflow: hidden; }
  footer .nav-links { margin-left: 20px; display: inline-block; }
  footer .nav-links li { display: inline-block; margin-right: 10px; margin-bottom: 0; font-size: 11px; }
  footer .social-links { position: absolute; top: 0; right: 0; width: 100px; height: 40px; margin-top: 0; text-align: center; background-color: #011688; }
  footer .social-links li { font-size: 16px; margin-left: 6px; margin-right: 6px; margin-top: 13px; }
  footer .copyright { margin-top: 5px; display: inline-block; font-size: 11px; }
}

@media (min-width: 1070px) {
  footer .nav-links li,
  footer .copyright { font-size: 12px; }
}

@media (min-width: 1160px) {
  footer .nav-links li,
  footer .copyright { font-size: 13px; }
}

@media (min-width: 768px) and (min-height: 700px) {
  .top-header--start img { height: 120px; }
}

@media (min-width: 768px) and (max-height: 700px) {
  .main section.sandwiches-list h1 br { display: none; }
}

/* mobile specific */
@media (max-width: 767px) {
  .hide_mobile { display: none; }
  .top-header--start img { height: 75px; top: 20px; }
  /*.searching .main { height: 0; }
  .searching footer { display: none; }*/
}

/* OG-IMAGES */
/*
footer { display: none; }
.main { height: 100%; }
.main section.intro .cta-container { display: none; }
.main section.sandwiches-list .sandwich-details .share-buttons { display: none; }
.main section.sandwich-selected .back-button-text  { display: none; }
*/