/* ======================================= */
/* BASE                                    */
/* ======================================= */

html,body {
    width:100vw;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    background: #100C09;
    color:#F8F7F7;
    font-family: "Special Elite";
}

.container, .container-fluid {
    overflow-x: hidden;
}

:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ======================================= */
/* LIGHT                                   */
/* ======================================= */

body.light {
    background: #F8F7F7 !important;
    color:#100C09;
}

body.light .navbar,
body.light .navbar .container-fluid {
    background-color: #F8F7F7 !important;
    border-bottom-color: #100C09;
}

body.light .offcanvas ul li a:hover {
    color:#BE3424;
}

/* ======================================= */
/* Z-INDEX - NEON LINE                     */
/* ======================================= */

#pizza-slider .slides,
#soda-slider .slides,
#sides-slider .slides,
#locations .info button {
    z-index: 2997;
}

/* ======================================= */
/* NEON LINE                               */
/* ======================================= */

#motionPath {
    overflow: scroll;
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2990;
    /* margin-bottom: -55%; */
    float: left;
}
  
#motionPath path {
    stroke-width: 2;
    stroke: gray;
}
  
#motionPath .astronaut {
    visibility: hidden;
    display: none;
}

/* @media (screen) { */

#box-wrapper {
    position: relative;
    width:100%;
    height: 100%;
}

svg#svg {
    overflow: visible;
    height: 100%;
    max-width: 100%;
    position:relative;
    float:left;
    margin-bottom:-200%;
    z-index: 1010;
    display:none;
}

circle {
    fill: white;
}

path {
    stroke-width: 2px;
    stroke: #F1F0F2;
    fill: none;
}

.nav {
    display: flex;
    justify-content: center;
    padding: 0 0 20px 0;
    align-content: center;
}

.glow {
    /* animation: fadeIn 4s 1 alternate; */
    fill:none;
    visibility: hidden;
    fill-opacity: 0; 
    stroke: #f09;
}

.glow-flicker {
    animation: image-flicker 3s infinite alternate;
    fill:none;
    fill-opacity: 0; 
    stroke: #f09;
}

#svg-logo {
    width: 92% !important;
    height: 100%;
}

.glow-fill {
    fill: #f09 !important;
    /* fill-opacity: 1 !important; */
}

.neon {
    color: #fff;
    text-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #f09,
        0 0 82px #f09,
        0 0 92px #f09,
        0 0 102px #f09,
        0 0 151px #f09;
}

.neon-border {
    /* animation: pulsate 1.5s infinite alternate;   */
    border: 0.2rem solid #fff;
    border-radius: 2rem;
    padding: 0.4em;
    box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #bc13fe,
            0 0 0.8rem #bc13fe,
            0 0 2.8rem #bc13fe,
            outset 0 0 1.3rem #bc13fe; 
}

@keyframes fadeIn {

    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1.0;
    }

}

@keyframes pulsate {
    
    100% {

        opacity: 1.0;
        fill-opacity: 100%;

        text-shadow:
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 19px #fff,
            0 0 40px #bc13fe,
            0 0 80px #bc13fe,
            0 0 90px #bc13fe,
            0 0 100px #bc13fe,
            0 0 150px #bc13fe;
    
    }
    
    0% {

        opacity: 0.2;
        fill-opacity: 0;

        text-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 6px #fff,
            0 0 10px #bc13fe,
            0 0 45px #bc13fe,
            0 0 55px #bc13fe,
            0 0 70px #bc13fe,
            0 0 80px #bc13fe;

    }

}

@keyframes image-flicker {
    0% {
      opacity:0.1;
      text-shadow: 0px 0px 29px #f09;
    }
    
    2% {
      opacity:1;
      text-shadow: 0px 0px 29px #f09;
    }
    8% {
      opacity:0.1;
      text-shadow: 0px 0px 29px #f09;
    }
    9% {
      opacity:1;
      text-shadow: 0px 0px 29px #f09;
    }
    12% {
      opacity:0.1;
      text-shadow: 0px 0px #f09;
    }
    20% {
      opacity:1;
      text-shadow: 0px 0px 29px #f09;
    }
    25% {
      opacity:0.3;
      text-shadow: 0px 0px 29px #f09;
    }
    30% {
      opacity:1;
      text-shadow: 0px 0px 29px #f09;
    }
    
    70% {
      opacity:0.7;
      text-shadow: 0px 0px 29px #f09;
    }
    
    72% {
      opacity:0.2;
      text-shadow:0px 0px 29px #f09;
    }
    
    77% {
      opacity:.9;
      text-shadow: 0px 0px 29px #f09;
    }
    100% {
      opacity:.9;
      text-shadow: 0px 0px 29px #f09;
    }
}

/* ======================================= */
/* HERO                                    */
/* ======================================= */

#hero {
    height: 100%; 
    position: relative;
}

#hero img#logo {
    width: 65%; 
    margin-bottom: 2%;
}

#hero h1 {
    font-size: 5vw;
}

#hero a {
    position: absolute;
    bottom: 8%;
}

/* ======================================= */
/* STICKY NAVBAR                           */
/* ======================================= */

.navbar {
    background-color: #100C09 !important;
    width: 100%;
    padding-left: 2.5%;
    padding-right: 2.5%;
    padding-bottom: 0;
    z-index: 3000;
}

.navbar .container-fluid {
    border-bottom:1px solid #F8F7F7;
    background-color: #100C09 !important;
    min-height: 9vh;
}

.navbar .container-fluid a.home {
    margin-left:1%;
}

.navbar-burger {
    margin-right:0;
    margin-left:0;
}

.navbar-order {
    margin-bottom:2%;
}

.navbar-toggler {
    border:none;
    padding-right: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar .navbar-nav .nav-item {
    display: inherit;
}

.navbar .navbar-nav .nav-item .nav-link {
    margin:0 6%;
    font-size: 1.5rem;
    color: #F8F7F7;
    position: relative;
    left: -3vw;
}

.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link:hover {
    color:#FFD52D;
}

.navbar .navbar-nav .nav-item .nav-link.separator:hover {
    color: #F8F7F7 !important;
    text-decoration: none;
    cursor: default;
}

body.light .navbar .navbar-nav .nav-item .nav-link {
    color:#100C09;
}

body.light .navbar .navbar-nav .nav-item .nav-link.active,
body.light .navbar .navbar-nav .nav-item .nav-link:hover {
    color:#BE3424;
}

body.light .navbar .navbar-nav .nav-item .nav-link.separator:hover {
    color: #100C09 !important;
}

/* ======================================= */
/* OFF CANVAS MENU                         */
/* ======================================= */

.offcanvas {
    background-color:#100C09;
    z-index: 3010;
}

.modal-backdrop {
    z-index: 3001;
}

#offcanvas-logo {
    position: relative;
    margin-left: 8%;
    top: 1vh;
}

.offcanvas ul li {
    text-align: left;
    padding-top:2.5%;
    padding-bottom:2.5%;
}

.offcanvas ul li a {
    font-size:1.6rem;
    color:#F8F7F7;
    font-weight: bold;
    text-transform: uppercase;
    padding-top:5%;
    padding-bottom:2.5%;
    margin-left:5%;
}

.offcanvas ul li:last-of-type a {
    padding-bottom:5%;
}

.offcanvas ul li a:hover {
    color: #FFD52D;
}

.offcanvas-trigger {
    color: transparent;
    text-decoration: none !important;
}

.offcanvas-start {
    border-left:none;
}

.offcanvas-end {
    border-left:none;
}

.offcanvas-header .btn-close {
    position: relative;
}

.btn-close {
    background: transparent url(../img/close-menu-desktop.svg) center/2em auto no-repeat;
    width: 3em;
    height: 2em;
    opacity: 1;
    position: relative;
    top:0%;
}

.btn-close:hover {
    background: transparent url(../img/close-menu-desktop.svg) center/2em auto no-repeat;
}

body.light .btn-close {
    background: transparent url(../img/red-x.svg) center/2em auto no-repeat;
}

body.light .btn-close:hover {
    background: transparent url(../img/red-x.svg) center/2em auto no-repeat;
}

.offcanvas-backdrop {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    opacity: 0;
    z-index: 3002;
}

.offcanvas-backdrop.show {
    opacity: 0.75;
}

.offcanvas .nav-item.multiple {
    display: flex;
}

/*.offcanvas .nav-item.multiple .nav-link {

}*/

.offcanvas .nav-item.multiple .nav-link.active {
    color:#FFD52D;
}

body.light .offcanvas .nav-item.multiple .nav-link.active,
body.light .offcanvas .nav-item.multiple .nav-link:hover {
    color:#BE3424;
}

.offcanvas .nav-item.multiple .nav-link.separator:hover {
    text-decoration: none;
    color: #F8F7F7 !important;
    cursor: default;
}

/* ======================================= */
/* SLIDERS                                 */
/* ======================================= */

#sliders {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#pizza-slider, #soda-slider, #sides-slider {
    padding: 2.5%;
    overflow-x: hidden;
}

#pizza-slider {
    overflow-y: hidden;
    height: 45vh;
}

#soda-slider {
    background:#F8F7F7;
    overflow: hidden;
    height: 45vh;
}

.breadcrumb {
    width: 16%;
    border-bottom: 1px solid #F8F7F7;
}

.breadcrumb p {
    font-family: "Roboto";
    font-weight: 400;
    margin-bottom: 2%;
}

.crsl-controls {
    position: relative;
    width: 35vw;
    height: 75%;
    z-index: 2998 !important;
    bottom: 0;
}

.crsl-controls .info {
    padding-left: 6%;
    padding-right: 6%;
}

.crsl-controls .info .title-ctn h3 { 
    font-size: 6vh;
}

.crsl-controls .crsl-prev, 
.crsl-controls .crsl-next {
    position: relative;
    top: -16%;
    z-index: 2998;
}

.view-all {
    position: relative;
    font-family: "Roboto";
    font-weight: 400;
    font-size: 2.5vh;
    left: 16%;
}

.view-all a {
    text-decoration: none;
    float:left;
}

.view-all a:hover {
    text-decoration: underline;
}

#pizza-slider .view-all a {
    color: #FFD52D;
}

#pizza-slider .slides .crsl-img-ctn img {
    left: 2%;
    position: relative;
}

/* ======================================= */
/* CROWNS                                  */
/* ======================================= */

.crsl-all-img-crown-ctn {
    position: relative;
    top: 0;
    margin-bottom: -6%;
}

.crsl-img-crown {
    position: relative;
    top: 2%;
    transition: all 0.5s ease-in-out;
    transition-timing-function: cubic-bezier(0.1, 2.5, 10, 0.1);
    filter: blur(3px) opacity(0);
    opacity: 0;
}

.crsl-img-crown.zoom {
    opacity: 1;
    filter: none;
    transform: scale(1) rotate(16deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.left {
    transform: scale(1) rotate(-16deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.one-quarter {
    transform: scale(1) rotate(2deg) translateX(-15vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.middle {
    transform: scale(0.75) rotate(2deg) translateX(-14vw) translateY(-3vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.three-quarter {
    transform: scale(1) rotate(12deg) translateX(-2vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

/* ======================================= */
/* SODAS SLIDER                            */
/* ======================================= */

#soda-slider .left-side {
    margin-top: -12%;
}

#soda-slider .right-side {
    margin-top: -12%;
}

#soda-slider .breadcrumb {
    color: #100C09;
    border-bottom: 1px solid #100C09;
}

#soda-slider .crsl-controls {
    height: 50%;
}

#soda-slider .view-all a,
#soda-slider .view-all a p {
    color: #BE3424;
}

#soda-slider .crsl-all-img-titles-ctn h3.crsl-img-title {
    color: #100C09;
}

#soda-slider .crsl-all-img-crown-ctn {
    display:none;
}

#soda-slider .slides .crsl-all-img-ctn {
    position: relative;
    top: -48%;
    left: -24%;
}

/* ======================================= */
/* SIDES SLIDER                            */
/* ======================================= */

#sides-slider {
    padding-top: 5%;
    overflow-y: hidden;
}

#sides-slider .breadcrumb {
    width: 45%;
    border-bottom: none;
}

#sides-slider .breadcrumb span {
    padding-bottom: 2%;
}

#sides-slider .breadcrumb span.zoom {
    border-bottom: 1px solid #FFF;
}

#sides-slider .crsl-controls {
    height: 50%;
}

#sides-slider .crsl-controls .crsl-prev, 
#sides-slider .crsl-controls .crsl-next {
    position: relative;
    top: 0;
}

#sides-slider .view-all a {
    color: #FFD52D;
}

#sides-slider .slides .crsl-all-img-ctn {
    position: relative;
    left: -24%;
}

body#home #sides-slider .slides .crsl-img-ctn img {
    width: 85%;
    position: relative;
}

body#home #sides-slider .slides .crsl-img-ctn img.gnocchi {
    width: 55%;
    left: 9%;
}

body#home #sides-slider .slides .crsl-img-ctn img.cookie {
    left: -30%;
}

/* ======================================= */
/* CAROUSEL SLIDER                         */
/* ======================================= */

:root {
    --crsl-width: 80vw;
	--crsl-height: 60vh;
	--crsl-img-mx: 26vw;
    --crsl-img-ctn-width: 80vw;
    /* --crsl-img-ctn-height: 1000vh; */
    --crsl-img-width: 27vw;
    --crsl-img-height: 35vw;
    --crsl-controls-width: 35vw;
}

.crsl-ctn {
	width: var(--crsl-width);
	height: var(--crsl-height);
	display: flex;
	align-items: center;
	position: relative;
    z-index: 10;
}

.crsl-all-img-ctn {
	width: var(--crsl-img-ctn-width);
	/* height: var(--crsl-img-ctn-height); */
    height: auto !important;
	display: flex;
	align-items: center;
	position: relative;
	transition: all 1s ease-in-out;
    left: -24%;
    top: 6vw;
}

.crsl-img-ctn {
	/* margin-right: var(--crsl-img-mx); */
	display: flex;
	justify-content: left;
	align-items: center;
}

.crsl-img-crown {
    position: absolute;
    z-index: 200;
    left: 24vw;
    transition: all 0.5s ease-in-out;
    transition-timing-function: cubic-bezier(0.1, 2.5, 10, 0.1);
    filter: blur(3px) opacity(0);
    opacity: 0;
    /* transform: scale(0); */
}

.crsl-img-crown.zoom {
    opacity: 1;
    filter: none;
    transform: scale(1) rotate(16deg);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.left {
    transform: scale(1) rotate(-12deg) translateX(-18vw) translateY(-5vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.one-quarter {
    transform: scale(1) rotate(2deg) translateX(-15vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.middle {
    transform: scale(0.75) rotate(2deg) translateX(-14vw) translateY(-3vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img-crown.zoom.three-quarter {
    transform: scale(1) rotate(12deg) translateX(-2vw);
    transition-timing-function: cubic-bezier(0.1, 0.1, 0.1, 0.1);
    transition-delay: 0.75s;
}

.crsl-img {
	width: var(--crsl-img-width);
	height: var(--crsl-img-height);
	object-fit: contain;
	transition: all 1s ease-in-out;
    filter: blur(3px) opacity(0.45);
    opacity: 0;
}

.crsl-img:hover {
    cursor: pointer;
}

.crsl-img.zoom {
    filter: none;
}

.crsl-img.zoom:hover {
    cursor: default;
}

.crsl-img.view, .crsl-img.zoom {
    opacity: 1;
}

.crsl-all-img-titles-ctn {
    position: relative;
}

.crsl-all-img-titles-ctn .title-ctn > h3 {
    vertical-align: bottom;
}

.crsl-all-img-titles-ctn h3.crsl-img-title {
    position: absolute;
    bottom: 0;
    font-size: 54px;
    transition: all 0.1s ease-in-out;
    opacity: 0;
    display: inline-block;
    z-index: 10;
}

.crsl-all-img-titles-ctn h3.crsl-img-title.zoom {
    opacity: 1;
}

.crsl-controls {
	position: relative;
	width: var(--crsl-controls-width);
	display: flex;
	justify-content: space-between;
}

.crsl-prev {
    cursor: pointer;
}

.crsl-next {
    cursor: pointer;
}

/* ======================================= */
/* ENJOY                                   */
/* ======================================= */

#enjoy {
    padding: 2.5% 8.5%;
}

#enjoy h2 {
    font-size: 64px;
    position: relative;
    margin-bottom: 10%;
}

#options {
    padding: 2.5% 0;
}

#enjoy h3 {
    text-transform: uppercase;
    font-size:36px;
    margin-bottom:8%;
}

#enjoy p {
    font-family: "Roboto";
    font-weight: 100;
    width: 77.5%;
    margin-bottom: 6%;
}

#enjoy p.text-highlight {
    font-weight: bold;
    margin-bottom: 0;
}

.icon {
    margin-bottom:6%;
}

.w22 {
    width:22%;
}

.w55 {
    width:55%;
}

#delivery-services img {
    margin-right: 4%;
}

/* ======================================= */
/* EXTERNAL LINK                           */
/* ======================================= */

.external-link {
    color: #FFD52D;
    font-size:24px;
    text-decoration: none;
}

.external-link p {
    margin-top: 2%;
    font-weight:400 !important;
}

a.external-link:hover {
    color:#FFD52D;
    text-decoration: underline;
}

a.external-link p {
    position: relative;
    z-index: 2999 !important;
}

/* ======================================= */
/* LOCATIONS                               */
/* ======================================= */

#locations {
    background-color: #F8F7F7;
    margin-top: 2.5%;
    padding-bottom: 2.5%;
}

#locations .info {
    padding:2.5%;
}

#locations h2 {
    color:#100C09;
    font-size: 64px;
}

#locations p {
    color:#100C09;
    font-family: "Roboto";
    font-weight: 100;
    width: 81%;
    margin-bottom: 4%;
}

#locations .info {
    margin-left:4%;
    margin-top:4%;
}

#locations .info p.subtitle {
    font-weight: bold;
    font-size: 24px;
}

#locations .info button {
    color:#BE3424;
    font-family: "Roboto";
    background: url(../img/button-draw-red.svg) no-repeat center;
    width: 70%;
    height: 20%;
    border:none;
    position: relative;
    margin-top:12%;
    top: -12%;
    font-size:18px;
}

/* ======================================= */
/* RECIPES                                 */
/* ======================================= */

#recipe {
    padding: 5%;
    scroll-margin-top: 12vh;
}

#recipe .col-5 {
    padding-right: 5%;
}

#recipe h2 {
    text-transform: uppercase;
    font-size: 64px;
    margin-top:32%;
    margin-bottom:12%;
}

#recipe p {
    font-family: "Roboto";
    font-weight: 100;
}

#recipe a, #recipe a p {
    color:#F8F7F7;
    text-decoration: none;
}

#recipe a:hover, 
#recipe a p:hover {
    color:#FFD52D;
    text-decoration: underline;
}

/* ======================================= */
/* FRANCHISES                              */
/* ======================================= */

.special-elite {
    font-family: "Special Elite" !important;
}

.fs-40 {
    font-size: 40px !important;
}

body#franchise {
    /* padding: 5% 7.5%; */
    padding: 0;
}

#franchise {
    padding: 2.5% 2.5% 0 5%;
    scroll-margin-top: 12vh;
}

#franchise h2 {
    font-size: 54px;
    margin-bottom: 4%;
}

#franchise p {
    font-family: "Roboto";
    font-weight: 100;
    width: 82%;
}

body#franchise #heading {
    position: relative;
    /* margin-bottom: -6%; */
    z-index: 100;
    background:#100C09;
    opacity: 0.8;
}

body#franchise #franchise-hero {
    position: relative;
    top:-15vh;
}

body#franchise .wrapper {
    padding: 2.5% 7.5% 5% 7.5%;
}

body#franchise #franchise-hero h2 {
    font-family: "Special Elite";
    text-align: left;
}

body#franchise #franchise-hero .cta-box {
    position: absolute;
    width: 41%;
    top: 50vh;
    left: 20vh;
    background: rgba(16,12,9, 0.7);
    padding: 3% 3% 4% 3%;
    /* margin-bottom: -50vh; */
}

body#franchise #franchise-hero img#hero-bg {
    width: 100%;
}

#franchise p.text-highlight {
    font-weight:600;
    margin-top:0;
}

#franchise p:first-of-type {
    margin-bottom:0;
}

body#franchise p {
    font-family: "Roboto";
    font-weight: 100;
    /* width: 120%; */
    width:100%;
}

body#franchise #main-section {
    /* margin-bottom: -44%; */
}

body#franchise #intro h3,
body#franchise #main-section h3 {
    margin-bottom:4%;
    margin-top: 6%;
    font-size: 32px;
}

body#franchise #intro h3:first-of-type,
body#franchise #main-section h3:first-of-type {
    margin-top: 0;
    /* font-family: "Special Elite"; */
    /* font-size: 40px; */
}

body#franchise #main-section h3 {
    margin: 6% 0;
}

body#franchise #intro p,
body#franchise #main-section p {
    font-size: 24px;
    margin-bottom: 4%;
    line-height: 44px;
}

body#franchise #main-section ul li {
    font-family: "Roboto";
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 4%;
    /* list-style: none; */
}

body#franchise #main-section img#slice-sodas {
    margin: 6% 0;
    width: 100%;
    height: auto;
}

body#franchise #main-section img#slice-pizza {
    position: relative;
    width: 45%;
    z-index: 101;
    margin-bottom: -55%;
    left: 85%;
    top: -16%;
}

body#franchise #main-section img#highlight-block {
    width: auto;
    height: auto;
}

body#franchise #heading img#logo {
    width: 30vw;
    padding: 3% 0;
}

body#franchise #title-crown {
    margin: 5% 0 0 0;
    margin-top: 0;
}

body#franchise #title-crown img {
    position: relative;
    width: 9vw;
    transform: rotate(330deg) translateX(-5vw);
    top: -1vw;
    left: -2vw;
}

body#franchise h2 {
    margin-top: 2.5%;
    position: relative;
    font-family: "Roboto";
    text-align: center;
}

body#franchise #addresses h2 {
    font-family: "Special Elite";
    font-size: 6vh;
    text-transform: uppercase;
}

body#franchise #info h3,
body#franchise #info p {
    margin-bottom: 5%;
}

body#franchise h3,
body#franchise #info h3 {
    font-family: "Roboto";
}

body#franchise #info p {
    font-size: 2vh;
}

body#franchise #main-section p.highlight {
    font-family: "Special Elite";
    font-size: 6vh;
    margin-top: 8%;
}

body#franchise #info img#restaurant-image {
    max-width: 95%;
}

body#franchise #cta {
    position: relative;
    margin-bottom: -7.5vh;
}

body#franchise img#subscription-block, 
body#franchise #cta img#subscription-block {
    position: relative;
    top: -16vh;
    width: 140%;
    max-width: none;
    left: -6vw;
}

body#franchise #main-section {
    margin-top: 9%;
}

body#franchise #main h2 {
    font-family: "Special Elite";
    text-align: left;
    font-size: 64px;
}

body#franchise #cta p {
    color: #100C09;
    font-weight: bold;
    font-size: 4vh;
}

body#franchise #showcase img {
    width: 48%;
    display:flex;
}

body#franchise #concept {
    top: -7.5vh;
    margin-bottom: -16vh;
    position: relative;
}

body#franchise #concept img#slice-franchise {
    position: relative;
    width: 12%;
    top: -10vh;
    left: 5vw;
}

body#franchise #main-content h3,
body#main-content p {
    font-family: "Roboto";
}

body#franchise #main-content h3 {
    font-size: 2.5rem;
    margin-bottom: 1.5%;
}

body#franchise #main-content h3:nth-of-type(2) {
    margin-top: 4%;
}

body#franchise #main-content p {
    width: 100%;
    font-size: 2.5vh;
    margin-bottom: 2%;
}

body#franchise #main-content ul {
    margin-bottom: 2%;
}

body#franchise #main-content ul li {
    font-family: "Roboto";
    font-size: 2.5vh;
    font-weight: 100;
}

body#franchise #register {
    margin: 5% 0;
    text-align: center;
}

body#franchise #register a img {
    margin: 0 auto;
    width: 85%;
}

body#franchise #addresses #franchise-locations a.slice-location {
    /* border:4px solid #FFD52D; */
    /* padding: 2.5%; */
}

body#franchise #addresses #franchise-locations div.slice-location {
    /* border:4px solid #C4BFBB; */
    /* padding: 2.5%; */
}

body#franchise #addresses #franchise-locations div.slice-location,
body#franchise #addresses #franchise-locations a.slice-location {
    min-height: 18vh;
    max-height: 21vh;
}

body#franchise #addresses #franchise-locations a,
body#franchise #addresses #franchise-locations a.slice-location h4,
body#franchise #addresses #franchise-locations div.slice-location h4 {
    text-decoration: none;
    color:#F1F0F2;
}

body#franchise #addresses #franchise-locations a,
body#franchise #addresses #franchise-locations a.slice-location img {
}

body#franchise #addresses #franchise-locations a.slice-location .item,
body#franchise #addresses #franchise-locations div.slice-location .item {
    text-align: left;
}

body#franchise #addresses #franchise-locations a.slice-location .item p,
body#franchise #addresses #franchise-locations div.slice-location .item p {
    width: 100%;
}

body#franchise #addresses #franchise-locations a.slice-location:hover {
    border-color:#BE3424;
}

body#franchise #addresses #franchise-locations a.slice-location:hover,
body#franchise #addresses #franchise-locations a.slice-location:hover h4,
body#franchise #addresses #franchise-locations div.slice-location:hover,
body#franchise #addresses #franchise-locations div.slice-location:hover h4 {
    color:#000;
    background: #F1F0F2;
}

body#franchise #addresses #franchise-locations div.slice-location:hover,
body#franchise #addresses #franchise-locations div.slice-location:hover h4 {
    background: transparent;
    color:#F1F0F2;
}

body#franchise #addresses #franchise-locations div.slice-location .item h4.soon {
    display: none;
}

body#franchise #addresses #franchise-locations div.slice-location:hover .item h4,
body#franchise #addresses #franchise-locations div.slice-location:hover .item p {
    display: none;
}

body#franchise #addresses #franchise-locations div.slice-location:hover .item h4.soon {
    display: block;
    margin-bottom: 0;
}

body#franchise #addresses #franchise-locations div.slice-location.d-flex:hover {
    border-color:#BE3424;
}

body#franchise #addresses #franchise-locations a.slice-location:hover .item p.address {
    font-weight: normal;
    color: #BE3424;
    text-decoration: underline;
}

body#franchise #addresses #franchise-locations div.slice-location.d-flex:hover,
body#franchise #addresses #franchise-locations div.slice-location.d-flex:hover * {
    cursor: default;
}

body#franchise #addresses #franchise-locations .slice-location:first-of-type {
    margin-left: 0;
}

body#franchise #addresses #franchise-locations .slice-location {
    margin-bottom: 2.5%;
    width: 18%;
}

body#franchise #neon-sign {
    margin-bottom: 8%;
}

body#home a.external-link img#franchise-page {
    position: relative;
    z-index: 1000;
}

/* ======================================= */
/* MAP CONTAINER                           */
/* ======================================= */

#map-container {
    width:100vw;
    height:auto !important;
    text-align: right;
    position: relative;
    top: -30vh;
    margin-bottom:-15vh;
}

#map-container img {
    width:80%;
}

/* ======================================= */
/* NEON SIGN                               */
/* ======================================= */

#neon-sign {
    margin-bottom: 5%;
}

/* ======================================= */
/* CONTACT                                 */
/* ======================================= */

#contact {
    padding:2.5% 5% 0 5%;
}

#contact h2 {
    font-size: 54px;
    margin-bottom: 4%;
    margin-top: 40%;
}

#contact p {
    font-family: "Roboto";
    font-weight: 100;
}

.yellow-fields {
    color: #FFD52D;
    font-family: "Roboto";
    border: none;
    position: relative;
    font-size: 24px;
}

#name-input {
    background: url(../img/contact-form-name-bg.svg) no-repeat center;
    width: 545px;
    height: 96px;
}

#email-input {
    background: url(../img/contact-form-email-bg.svg) no-repeat center;
    width: 545px;
    height: 96px;
}

#message-input {
    background: url(../img/contact-form-message-bg.svg) no-repeat center;
    width: 538px;
    height: 383px;
}

#name-input label, #email-input label, #message-input label {
    position: absolute;
    top: 12%;
    left: 6%;
}

#name-input {
    margin-bottom:6% !important;
}

#email-input {
    margin-bottom:9% !important;
}

#message-input {
    margin-bottom:6% !important;
}

#floatingName, #floatingEmail, #floatingMessage {
    position: relative;
    left: 6.5%;
    top: 20%;
    width: 93%;
    background: transparent;
    border: none;
    color: #F8F7F7;
    font-size: 24px;
}

#floatingMessage {
    top: 6%;
    width: 90%;
    height: 88%;
    resize: none !important;
}

#message-input label {
    top: 4%;
}

.form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-0.6rem) translateX(.15rem);
    font-size: 18px;
}

#submit-input,
#submit-order,
body.light #submit-order {
    text-align: right;
    float: right;
    color: #100C09;
    font-family: "Roboto";
    border: none;
    position: relative;
    font-size: 24px;
    background: url(../img/contact-submit-button-fr.svg) no-repeat center;
    border:none;
    position: relative;
    text-align: right;
}

body.light #submit-order {
    color: #FFF;
    background: url(../img/order-button-red.svg) no-repeat center;
}

/* body.light #submit-order:hover {
    background: url(../img/order-button-red.svg) no-repeat center;
} */

body.light.en #submit-order {
    color: #FFF;
    background: url(../img/order-red.svg) no-repeat center;
}

body.light.en #submit-order:hover {
    color: #FFF;
    background: url(../img/order-red-hover.svg) no-repeat center;
}

body.en #submit-input{ 
    background: url(../img/submit-yellow.svg) no-repeat center;
}

body.en #submit-input:hover { 
    background: url(../img/submit-yellow-hover.svg) no-repeat center;
}

#submit-order {
    background: url(../img/order-button-yellow.svg) no-repeat center;
}

body.en #submit-order { 
    background: url(../img/order-yellow.svg) no-repeat center;
}

body.en #submit-order:hover { 
    background: url(../img/order-yellow-hover.svg) no-repeat center;
}

/* --------------------------------- */
/* Franchises Nav Button */
/* --------------------------------- */

.franchises-available {
    background: url(../img/franchises-disponibles-button.svg) no-repeat center !important;
}

body.light .franchises-available {
    background: url(../img/franchises-disponibles-button-red.svg) no-repeat center !important;
}

body.en .franchises-available {
    background: url(../img/franchises-available-button.svg) no-repeat center !important;
}

body.light.en .franchises-available {
    background: url(../img/franchises-available-button-red.svg) no-repeat center !important;
}

.franchises-available.custom-submit-height,
.franchises-available.custom-submit-height button {    
    width: 400px;
    height: 72px;
}

/* --------------------------------- */

.btn-primary, .btn-primary:hover {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

.custom-submit-height, .custom-submit-height button {
    width: 259px;
    height: 72px;
}

/* ======================================= */
/* THAT'S IT                               */
/* ======================================= */

#thats-it {
    padding: 5%;
}

/* ======================================= */
/* THANK YOU                               */
/* ======================================= */

body#thank-you #hero {
    height: 75%;
}

/* ======================================= */
/* COMING SOON                             */
/* ======================================= */

body#coming-soon #hero {
    height: 75%;
}

/* ======================================= */
/* JOBS                                    */
/* ======================================= */

#job-listings {
    padding: 5%;
    margin-bottom: 12%;
}

#job-listings .info {
    margin-top: 5%;
}

#job-listings .apply {
    margin-bottom:16%;
}

#job-listings h2 {
    text-transform: uppercase;
    font-size:64px;
}

#job-listings h3 {
    font-weight: bold;
    margin-bottom: 6%;
    font-size: 36px;
}

#job-listings p {
    font-family: 'Roboto';
    font-weight: 100;
    width: 80%;
}

#job-listings p.subtitle {
    font-weight: bold;
    font-size: 24px;
}

#job-listings button {
    color: #BE3424;
    font-family: "Roboto";
    margin-top: 4%;
    background: url(../img/button-draw-arrow-red.svg) no-repeat left;
    width: 45%;
    height: auto;
    border: none;
    position: relative;
    font-size: 24px;
    text-align: left !important;
    padding: 5%;
    padding-top: 6%;
    padding-left: 8%;
}

#job-listings button:hover {
    background: url(../img/button-draw-arrow-red-hover.svg) no-repeat left;
}

#job-listings .mail-link {
    color: #BE3424;
    text-decoration: none;
    font-weight: 400;
}

#job-listings .right-side {
    padding:5%;   
}
#job-listings .right-side h3 {
    margin-bottom:6%;
}

#job-listings .right-side h4 {
    font-family: 'Roboto';
    font-weight: 100;
}

/* ======================================= */
/* INSTAGRAM                               */
/* ======================================= */

#instagram {
    padding: 5%;
    padding-bottom: 0;
}

#instagram .info {
    margin-right: 5%;
    margin-bottom: 5%;
}

#instagram h2 {
    font-size:64px;
    margin-bottom:6%
}

#instagram a,
#instagram a h3 {
    text-decoration: none;
    font-size:48px;
    margin-bottom:2%;
    color:#F8F7F7;
}

#instagram a:hover,
#instagram a h3:hover {
    color:#FFD52D;
    text-decoration: underline;
}

#instagram p {
    font-family: "Roboto";
    font-weight: 100;
}

/* ======================================= */
/* MENU                                    */
/* ======================================= */

#menu {
    position: relative;
    padding: 6%;
    padding-top: 4%;
    padding-right: 4%;
}

#menu-joystick {
    position: absolute;
    /* right: 0;
    bottom: 20%; */
    right: -16%;
    bottom: 24%;
}

#menu .col-md-4 {
    padding-right: 4%;
}

#menu .section-header-wrapper {
    min-height: 25vh;
    max-height: 25vh;
    overflow: hidden;
    display: flex;
}

#menu .section-header-wrapper img {
    height: 12vh;
}

#menu .section-header-wrapper img.boombox {
    height: 21vh;
}

#menu .section-header-wrapper.neon-separator {
    width: 100%;
    height: auto;
    min-height: 1px;
}

#menu .section-header-wrapper.neon-separator img {
    width: 100%;
    height: auto;
    margin-bottom: 8%;
    margin-top: 4%;
}

#menu .menu-section-header {
    margin-bottom: 12%;
}

#menu .menu-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4%;
}

#menu .menu-item .item-name,
#menu .menu-item .item-price {
    flex-basis: auto;
}

#menu .menu-item .item-spacer {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    border-bottom-style: dotted;
    border-bottom-width: 5px;
    margin-left: 2%;
    margin-right: 2%;
    position: relative;
    top: -8px;
}

#menu .menu-item .menu-item-description {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 4%;
}

#menu .menu-item .menu-item-description p {
    font-family: "Roboto";
    font-weight: 100;
    margin-bottom: 0;
}

#menu .menu-item .menu-item-description p.italic {
    font-style: italic;
}

#menu .menu-item .item-name p,
#menu .menu-item .item-price p {
    font-family: "Roboto";
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 0%;
}

#menu .break {
    flex-basis: 100%;
    height: 0;
}

/* ======================================= */
/* LOCATIONS                               */
/* ======================================= */

#google-map {
    height:40vh;
}

#primary-map {
    width:100%;
}

#map {
    height: 100%;
}

#locations-ctn {
    padding:5% 0;
    margin-left: 8%;
    padding-bottom: 0;
}

#locations-list .locations-group.detail .location {
    opacity: 0.35;
    transition: all 0.25s ease-in-out;
    margin-bottom: 12%;
}

#locations-list .locations-group.detail .location:hover {
    cursor: pointer;
    opacity: 1;
}

#locations-list .locations-group.detail .location.active {
    opacity: 1;
}

.locations-group.detail .location img { 
    max-height: 75px;
}

.locations-group.detail .location h3 {
    margin-top:8%;
}

.locations-group.detail .location a,
.locations-group.detail .location a h3 {
    text-decoration: none;
    color:#100C09;
}

.locations-group.detail .location > div {
    margin-bottom:4%;
}

.locations-group.detail .location > div p {
    font-family: "Roboto";
    font-weight: 100;
    margin-bottom: 0;
    font-size:14px;
}

.locations-group.detail .location button {
    color: #BE3424;
    font-family: "Roboto";
    margin-top: -4%;
    margin-left: -12%;
    background: url(../img/learn-more-draw-red.svg) no-repeat left;
    width: 65%;
    height: auto;
    border: none;
    position: relative;
    font-size: 20px;
    text-align: left !important;
    padding: 5%;
    padding-top: 6%;
    padding-left: 8%;
}

.locations-group.detail .location button:hover,
.locations-group.detail .location a.location-link:hover {
    text-decoration: underline;
}

.locations-group.detail .location a.location-link {
    color: #BE3424;
    text-decoration: none;
}

.locations-group.detail .location a.location-link p {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 21px;
    margin-top: -4%;
}

#locations-ctn .locations-group {
    margin-bottom:5%;
}

#locations-ctn .locations-group:last-of-type {
    margin-bottom:0;
}

#locations-ctn .locations-group.info {
    margin-bottom:2%;
}

#locations-ctn .locations-group.info h2 {
    color:#100C09;
    font-size: 64px;
}

#locations-ctn .locations-group.info p.subtitle {
    color: #100C09;
    font-family: "Roboto";
    font-weight: 600;
    width: 75%;
    margin-bottom: 4%;
    font-size: 28px;
}

.locations-group.detail {
    padding-left: 9%;
    padding-right: 0%;
}

/* ======================================= */
/* LOCATION DETAIL                         */
/* ======================================= */

#locations-detail #locations-ctn {
    padding-bottom: 0;
    margin-right: 8%;
}

#locations-detail #locations-ctn .locations-group.info {
    width:100%;
}

#locations-detail #locations-ctn .location img {
    max-height: 100px;
}

#locations-detail #locations-ctn .location .back-link > * {
    display:inline;
    margin-right:4%;
}

#locations-detail #locations-ctn .location .back-link.red {
    color:#BE3424;
    font-family: "Roboto";
    text-decoration: none;
}

#locations-detail #locations-ctn .location .back-link.red:hover p {
    text-decoration: underline;
}

#locations-detail #locations-ctn .location .back-link.red p {
    font-weight: 600 !important;
    font-size: 28px !important;
    padding-left:0;
    position: relative;
    top: 6%;
}

#locations-detail #locations-ctn .locations-group.info p.subtitle {
    font-size: 24px;
}

#locations-detail #locations-ctn .locations-group.info p.address {
    margin-bottom:0;
    font-weight: 100;
}

#locations-detail #locations-ctn .locations-group.info p.hours {
    margin-bottom:0;
    width:100%;
    font-weight: 100;
}

#locations-detail #locations-ctn .location button {
    background: url(../img/button-draw-arrow-red.svg) no-repeat left;
    margin-left:0;
    font-weight: 600;
    padding: 2%;
    width: 16%;
    padding-top: 2.5%;
}

body#locations-detail.en #locations-ctn .location button {
    width: 19%;
}

#locations-detail #locations-ctn .location button:hover {
    background: url(../img/button-draw-arrow-red-hover.svg) no-repeat left;
    text-decoration: none;
}

#locations-detail #locations-ctn .location .ambience-main,
#locations-detail #locations-ctn .location .ambience-secondary {
    max-height:none;
    width: 100%;
    margin-bottom:6%;
}

#locations-detail #locations-ctn .location .ambience-main,
#locations-detail #locations-ctn .location .ambience-secondary:last-of-type {
    margin-bottom:0;
}

a.phone-link,
a.phone-link p {
    color:#BE3424;
    font-weight: 100 !important;
    text-decoration: none;
    float: left;
}

a.phone-link:hover,
a.phone-link:hover p {
    text-decoration: underline;
}

#locations-detail #locations-ctn .locations-group.info .location {
    margin-bottom: 3%;
}

#locations-detail #locations-ctn .locations-group.info .location p {
    font-family: "Roboto";
}

#locations-detail #locations-ctn .locations-group.info .location p.address {
    font-weight: 100;
}

#locations-detail #locations-ctn .locations-group.info .location button {
    color: #BE3424;
    font-family: "Roboto";
    margin-top: -1%;
    margin-left: 0;
    margin-bottom: 3%;
    height: auto;
    border: none;
    position: relative;
    font-size: 20px;
    text-align: left !important;
    background: url(../img/button-draw-arrow-red.svg) no-repeat left;
    font-weight: 600;
    padding: 2.5%;
    width: 18%;
    padding-top: 3%;
}

#locations-detail #locations-ctn .locations-group.info .location a:hover button {
    background: url(../img/button-draw-arrow-red-hover.svg) no-repeat left;
    text-decoration: none;
}

#locations-detail #locations-ctn .locations-group.info .location .ambience-main {
    padding-right: 4.5%;
}

/* ======================================= */
/* PIZZAS, SODAS, SIDES DETAIL             */
/* ======================================= */

body#slices,
body#sodas,
body#sides {
    overflow: hidden;
}

body#slices #sliders,
body#sodas #sliders,
body#sides #sliders {
    height: 100%;
}

body#slices #pizza-slider,
body#sodas #soda-slider,
body#sides #sides-slider {
    height: 75% !important;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 3.5%;
}

body#sodas #soda-slider {
    padding-bottom:0;
}

body#slices .page-header,
body#sodas .page-header,
body#sides .page-header {
    position: relative;
    margin-left: 6%;
    margin-bottom: 12%;
}

body#sides .page-header {
    margin-bottom: 9%;
}

body#slices .breadcrumb,
body#sodas .breadcrumb,
body#sides .breadcrumb {
    text-transform: uppercase;
}

body#slices .page-title h3,
body#sodas .page-title h3,
body#sides .page-title h3 {
    font-size: 36px;
}

body#sodas .page-title h3 {
    color:#100C09;
}

body#slices .page-title p,
body#sodas .page-title p,
body#sides .page-title p {
    font-family: "Roboto";
    font-weight: 100;
}

body#sodas .page-title p {
    color:#100C09;
}

body#slices .crsl-controls,
body#sodas .crsl-controls {
    height: 21%;
}

body#sides .crsl-controls {
    /* height: 35%; */
    height: 20%;
}

body#slices #pizza-slider .view-all,
body#sodas #soda-slider .view-all,
body#sides #pizza-slider .view-all {
    top: 9%;
}

body#sodas #soda-slider .slides .crsl-all-img-ctn {
    top: 9%;
}

body#slices .crsl-all-img-titles-ctn p,
body#sodas .crsl-all-img-titles-ctn p,
body#sides .crsl-all-img-titles-ctn p {
    position: absolute;
    font-family: 'Roboto';
    font-weight: 100;
}

body#sodas .crsl-all-img-titles-ctn p {
    color: #100C09;
}

body#slices .return,
body#sodas .return,
body#sides .return {
    position: relative;
    left: 16%;
}

body#sides .return {
    top:6%;
}

body#sides .view-all {
    top:8%;
}

body#slices .return p,
body#slices .return a p,
body#sodas .return p,
body#sodas .return a p,
body#sides .return p,
body#sides .return a p {
    font-size:24px;
    font-family: 'Roboto';
    color: #C4BFBB;
    float: left;
    position: relative;
    z-index: 2999;
}

body#slices .return a,
body#sodas .return a,
body#sides .return a {
    color: #C4BFBB;
    text-decoration: none;
}

body#slices .return a:hover p,
body#sodas .return a:hover p,
body#sides .return a:hover p {
    text-decoration: underline;
}

body#slices #pizza-scroll .thumbnails,
body#sodas #soda-scroll .thumbnails,
body#sides #soda-scroll .thumbnails {
    position: relative;
    margin-right: 2.5%;
}

body#slices #pizza-scroll .crsl-img-ctn,
body#slices #soda-scroll .crsl-img-ctn {
    justify-content: right;
    margin-left: 2.5%;
}

body#slices .crsl-img-thumbnail,
body#sides .crsl-img-thumbnail {
    width: 100%;
    filter: blur(3px) opacity(0.6);
}

body#sodas .crsl-img-thumbnail {
    width: 36%;
    filter: blur(3px) opacity(0.6);
}

body#slices .crsl-img-thumbnail:hover,
body#sodas .crsl-img-thumbnail:hover,
body#sides .crsl-img-thumbnail:hover {
    cursor: pointer;
}

body#slices .crsl-img-thumbnail.zoom,
body#sodas .crsl-img-thumbnail.zoom,
body#sides .crsl-img-thumbnail.zoom {
    filter:none;
    cursor: default;
}

body#slices #pizza-scroll,
body#sodas #soda-scroll,
body#sides #soda-scroll {
    position: relative;
    z-index: 500;
}

body#sodas #soda-scroll {
    top:-3%;
}

body#slices .slider-ctn,
body#sodas .slider-ctn {
    margin-top:3vw;
}

body#sides .slider-ctn {
    margin-top: 13vw;
}

body#sides .crsl-breadcrumb,
body#sides .crsl-breadcrumb-title,
body#sides .crsl-breadcrumb-info {
    opacity: 0;
}

body#sides .breadcrumb {
    padding-top: 3.75%;
    margin-bottom: 4%;
}

body#sides .crsl-breadcrumb {
    opacity: 0;
    position: absolute;
    top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #F8F7F7;
    padding-right: 4%;
}

body#sides .crsl-breadcrumb-title,
body#sides .crsl-breadcrumb-info {
    /* position: absolute; */
    position: relative;
}

body#sides .crsl-breadcrumb-info {
    /* top:15vh; */
}

body#sides .crsl-breadcrumb.zoom,
body#sides .crsl-breadcrumb-title.zoom,
body#sides .crsl-breadcrumb-info.zoom {
    opacity: 1;
}

body#sides .crsl-all-img-titles-ctn p.crsl-img-info {
    opacity: 0;
}

body#sides .crsl-all-img-titles-ctn p.crsl-img-info.zoom {
    opacity: 1;
}

body#sides .crsl-all-img-crown-ctn {
    display: none !important;
}

body#slices .crsl-breadcrumb.zoom,
body#slices .crsl-breadcrumb-title.zoom,
body#slices .crsl-breadcrumb-info.zoom {
    opacity: 1;
}

body#slices .crsl-all-img-titles-ctn p.crsl-img-info {
    opacity: 0;
}

body#slices .crsl-all-img-titles-ctn p.crsl-img-info.zoom {
    opacity: 1;
}

body#sodas .crsl-breadcrumb.zoom,
body#sodas .crsl-breadcrumb-title.zoom,
body#sodas .crsl-breadcrumb-info.zoom {
    opacity: 1;
}

body#sodas .crsl-all-img-titles-ctn p.crsl-img-info {
    opacity: 0;
}

body#sodas .crsl-all-img-titles-ctn p.crsl-img-info.zoom {
    opacity: 1;
}

/* ======================================= */
/* PDF MENU                                */
/* ======================================= */

#menu object {
    width: 100%;
    height: 80vh;
}

#menu a.pdf {
    color:#F8F7F7;
    margin-bottom: 3%;
    text-decoration: none;
}

/* ======================================= */

/* X-Small devices (portrait phones, less than 576px)
   No media query for `xs` since this is the default in Bootstrap */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    :root {
        --crsl-width: 80vw;
        --crsl-height: 60vh;
        --crsl-img-mx: 26vw;
        --crsl-img-ctn-width: 80vw;
        --crsl-img-width: 60vw;
        --crsl-img-height: 35vw;
        --crsl-controls-width: 35vw;
    }

    #hero img#logo, #hero h1 {
        position: relative;
        top: -4%;
    }

    #hero img#logo {
        width: 85%; 
        margin-bottom: 2%;
    }
    
    #hero h1 {
        font-size: 7vw;
    }

    .navbar .container-fluid a.home {
        margin-left: 5%;
    }

    .navbar .container-fluid a.home img {
        width: 70%;
    }

    .navbar-toggler {
        padding-left: 0;
        width: 45%;
    }

    .navbar-toggler img {
        width: 90%;
        float: right;
    }

    .offcanvas ul li a {
        font-size: 1.3rem;
        padding-top: 3%;
    }

    #pizza-slider {
        height: 48vh;
    }

    #pizza-slider .view-all,
    #soda-slider .view-all {
        left: 80%;
        top: -75%;
    }

    .external-link {
        font-size: 18px;
    }

    .breadcrumb {
        width: 30%;
        margin-top: 3%;
    }

    .crsl-controls {
        width: auto;
        margin-top: 12%;
    }

    #soda-slider .crsl-controls {
        top: 75%;
    }

    .crsl-controls .info .title-ctn h3 {
        font-size: 4vh;
        text-align: center;
        width: 100%;
    }

    .crsl-all-img-ctn {
        left: -35%;
    }

    body#sides .crsl-all-img-ctn {
        left: 0%;
    }

    #pizza-slider .slides .crsl-img-ctn img {
        left: -16%;
    }

    .crsl-img-crown {
        width: 12%;
    }

    .crsl-all-img-crown-ctn {
        top: -12%;
        left: 6%;
        margin-bottom: -3%;
    }

    #pizza-slider .crsl-img {
        height: auto;
    }

    #soda-slider .slides .crsl-all-img-ctn {
        top: -90%;
    }

    #soda-slider .crsl-img {
        height: 40vh;
        left: -33.5%;
        top: 0;
        position: relative;
    }

    #sides-slider .crsl-controls {
        margin-top: 16%;
    }

    #sides-slider .breadcrumb {
        width: 80%;
        margin-top: -80%;
        margin-bottom: 55%;
    }

    #sides-slider .slides .crsl-img-ctn img.gnocchi {
        width: var(--crsl-img-width);
        /* left:0; */
    }

    #sides-slider .slides .crsl-img-ctn img {
        width: var(--crsl-img-width);
    }

    #sides-slider .slides .crsl-img-ctn img.cookie {
        /* left: 0; */
    }

    #sides-slider .slides .crsl-all-img-ctn {
        /* left: -45%;
        top: 36vw;
        padding-bottom: 25vh; */
    }

    #sides-slider .view-all {
        left: 80%;
        top: -46.25vh;
    }

    #options .option {
        width: auto;
        margin-bottom: 21%;
    }

    #enjoy {
        margin-top: 12%;
    }

    #enjoy p {
        width: 100%;
    }

    #enjoy h2, 
    #locations h2 {
        font-size: 54px;
    }

    #locations p {
        width: 100%;
    }

    #locations .info button {
        top: -6%;
        margin-top: 6%;
        width: 100%;
        height: auto;
        margin-bottom: 9%;
        padding: 6%;
    }

    #recipe h2 {
        margin-top: 16%;
        font-size: 54px;
    }

    #franchise {
        margin-top: 9%;
    }

    #franchise p {
        width: 100%;
    }

    #map-container {
        margin-bottom: 18vh;
        top: 6vh;
    }

    #map-container img {
        width: 100%;
    }

    #contact h2 {
        margin-top: 18%;
    }

    form {
        margin-top: 9%;
    }

    #name-input,
    #email-input,
    #message-input {
        background: none;
        width: auto;
    }

    .yellow-fields {
        border: 2px solid #FFD52D;
    }

    #submit-input {
        float:none;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 12%;
    }

    #job-listings h2 {
        font-size: 54px;
        margin-top: 9%;
    }

    #job-listings button {
        width:100%;
    }

    #instagram h2 {
        font-size: 54px;
        margin-top: 9%;
    }

    #instagram a, #instagram a h3 {
        font-size: 36px;
    }

    #instagram .position-2 {
        top: -18vh;
    }

    #locations-ctn .locations-group.info h2 {
        font-size: 54px;
        margin-top: 12%;
    }

    #locations-ctn .locations-group.info p.subtitle {
        width: 100%;
        margin-bottom: 12%;
    }

    .locations-group.detail .location button {
        width: 100%;
        margin-left: 0;
        padding-left: 5%;
        padding-right: 8%;
    }

    .locations-group.detail .location > div p {
        font-size: 18px;
    }

    #locations-detail #locations-ctn .locations-group.info .location .ambience-main {
        padding-right: 0;
        margin-bottom: 6%;
    }

    #locations-detail #locations-ctn .locations-group.info .flex-column-reverse {
        margin-bottom: -6%;
    }

    #locations-detail #locations-ctn .locations-group.info .flex-column-reverse h2 {
        position: relative;
        left: 36%;
        font-size: 36px;
    }

    #locations-detail #locations-ctn .location img.location-icon {
        position: relative;
        top: -12vh;
        margin-bottom: -30%;
    }

    #locations-detail #locations-ctn .locations-group.info p.subtitle {
        margin-bottom: 3%;
        margin-top: 9%;
    }

    #locations-detail #locations-ctn .locations-group.info .location button {
        width: 100%;
        padding-top: 4%;
        padding-left: 5%;
    }

    #return-button {
        text-align: left;
        margin-bottom: 6%;
        margin-top: 6%;
    }

    #locations-detail #locations-ctn .location .back-link.red p {
        font-size: 21px !important;
    }

    #locations-detail #locations-ctn .location .back-link > img {
        width:12%;
    }

    #slices .crsl-all-img-ctn {
        top: -18vh;
    }

    #slices .crsl-all-img-crown-ctn {
        top: -24vh;
    }

    body#slices #pizza-slider, 
    body#sodas #soda-slider, 
    body#sides #sides-slider {
        height: auto !important;
        overflow-y: visible;
        padding-bottom: 65%;
    }
 
    body#sodas #soda-slider {
        padding-bottom: 30%;
    }

    body#sides #sides-slider {
        padding-bottom: 65%;
    }

    body#slices .page-header, body#sodas .page-header, body#sides .page-header {
        margin-left: 3%;
    }

    body#sides .page-header {
        margin-top: 3%;
    }

    body#slices .crsl-controls, body#sodas .crsl-controls {
        top: 38vh;
    }

    body#slices .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#slices .return, body#sodas .return, body#sides .return {
        left: 22.5%;
        top: 42vh;
    }

    body#sides .return {
        top: 67.5vh;
    }

    body#slices .return p, body#slices .return a p, body#sodas .return p, body#sodas .return a p, body#sides .return p, body#sides .return a p {
        font-size: 18px;
        float: none;
    }

    body#slices #pizza-slider .view-all, 
    body#sodas #soda-slider .view-all, 
    body#sides #pizza-slider .view-all {
        left: 22.5%;
        top: 52.5vh;
        float: none;
    }

    body#slices #pizza-slider .view-all a, 
    body#sodas #soda-slider .view-all a, 
    body#sides #pizza-slider .view-all a {
        float: left;
    }

    body#slices, body#slices #sliders,
    body#sodas, body#sodas #sliders,
    body#sides, body#sides #sliders {
        height: auto;
    }

    body#slices #pizza-scroll .crsl-img-ctn {
        justify-content: left;
        width: 22%;
        margin-bottom: 6%;
    }

    body#sodas #soda-scroll .crsl-img-ctn {
        justify-content: center;
        width: 22%;
        margin-bottom: 6%;
        margin-left: 2.5%;
    }

    body#slices #pizza-scroll .thumbnails, body#sodas #soda-scroll .thumbnails, body#sides #soda-scroll .thumbnails {
        margin-right: 0;
    }

    body#slices .controls-wrapper {
        top: 40vh;
        position: relative;
    }

    body#sodas #soda-slider .slides .crsl-all-img-ctn {
        top: -25vh;
    }

    body#sodas .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#sides #sides-slider .breadcrumb {
        margin-top: 3%;
    }

    body#sides .crsl-breadcrumb-info {
        top: 30vh;
    }

    body#sides .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#sides #sides-slider .view-all {
        left: 22.5%;
        top: 68.25vh;
    }

    body#sides .crsl-controls {
        position: relative;
        top: 57vh;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        top: 16vh;
        left: -21vh;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn .crsl-img {
        /* width: 100%; */
    }

    #menu-joystick {
        position: relative;
        right: -24%;
        bottom: 12vh;
        margin-bottom: -24vh;
        opacity: 1 !important;
    }

    /* ======================================= */
    /* FRANCHISES                              */
    /* ======================================= */

    body#franchise {
        margin-top: 0;
    }

    body#franchise #heading img#logo {
        width: 80vw;
    }

    body#franchise #franchise-hero img#hero-bg {
        width: auto;
    }

    body#franchise #franchise-hero .cta-box {
        position: relative;
        width: 70%;
        top: -82vh;
        left: 8vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 9% 6%;
        margin-bottom: -82vh;
    }

    body#franchise #franchise-hero .cta-box img#cta-button {
        width:100%;
    }

    body#franchise img#subscription-block {
        position: relative;
        top: 0vh;
        width: 110%;
        max-width: none;
        left: 0vw;
    }

    body#franchise #main-section img#slice-pizza {
        top: -24vh;
    }

    body#franchise #main-section p.highlight {
        margin-bottom: 16%;
    }

    body#franchise #main-section {
        margin-bottom: 0%;
    }

    body#franchise #addresses #franchise-locations a.slice-location .item {
        text-align: center;
    }

    body#franchise #addresses #franchise-locations .slice-location {
        margin-bottom: 2.5%;
        width: 48%;
    }

    body#franchise #addresses h2 {
        margin-top: 12%;
        margin-bottom: 12%;
    }
    
    body#franchise #addresses #franchise-locations div.slice-location .item {
        text-align: center;
    }

    #submit-order {
        display:none;
    }

    .navbar-nav.language {
        display: none !important;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    :root {
        --crsl-width: 80vw;
        --crsl-height: 60vh;
        --crsl-img-mx: 26vw;
        --crsl-img-ctn-width: 80vw;
        --crsl-img-width: 42vw;
        --crsl-img-height: 35vw;
        --crsl-controls-width: 35vw;
    }

    #hero img#logo, #hero h1 {
        position: relative;
        top: -4%;
    }

    #hero img#logo {
        width: 85%; 
        margin-bottom: 2%;
    }
    
    #hero h1 {
        font-size: 7vw;
    }

    .navbar .container-fluid a.home {
        margin-left: 5%;
    }

    .navbar .container-fluid a.home img {
        width: 70%;
    }

    .navbar-toggler {
        padding-left: 0;
        width: 45%;
    }

    .navbar-toggler img {
        width: 90%;
        float: right;
    }

    .offcanvas ul li a {
        font-size: 1.3rem;
        padding-top: 3%;
    }

    #pizza-slider {
        height: 48vh;
    }

    #pizza-slider .view-all,
    #soda-slider .view-all {
        left: 88%;
        top: -75%;
    }

    .external-link {
        font-size: 18px;
    }

    .breadcrumb {
        width: 18%;
        margin-top: 3%;
    }

    .crsl-controls {
        width: auto;
        margin-top: 6%;
        margin-bottom: 6%;
    }

    #soda-slider .crsl-controls {
        top: 75%;
    }

    .crsl-controls .info .title-ctn h3 {
        font-size: 4vh;
        text-align: center;
        width: 100%;
    }

    .crsl-all-img-ctn {
        left: -12%;
        top: 8vw;
    }

    body#sides .crsl-all-img-ctn {
        left: 0%;
    }

    #pizza-slider .slides .crsl-img-ctn img {
        left: -7%;
    }

    .crsl-img-crown {
        width: 12%;
    }

    .crsl-all-img-crown-ctn {
        top: -16%;
        left: 18%;
        margin-bottom: -3%;
    }

    #pizza-slider .crsl-img {
        height: auto;
    }

    #soda-slider .slides .crsl-all-img-ctn {
        top: -90%;
        left: -23%;
    }

    #soda-slider .crsl-img {
        height: 40vh;
        left: 17%;
        top: 0;
        position: relative;
    }

    #sides-slider .crsl-controls {
        margin-top: 16%;
    }

    #sides-slider .breadcrumb {
        width: 80%;
        margin-top: -65%;
        margin-bottom: 55%;
    }

    #sides-slider .slides .crsl-img-ctn img.gnocchi {
        width: var(--crsl-img-width);
        /* left:0; */
    }

    #sides-slider .slides .crsl-img-ctn img {
        width: var(--crsl-img-width);
    }

    #sides-slider .slides .crsl-img-ctn img.cookie {
        /* left: 0; */
    }

    #sides-slider .slides .crsl-all-img-ctn {
        /* left: -15%;
        top: 30vw;
        padding-bottom: 25vh; */
    }

    #sides-slider .view-all {
        left: 88%;
        top: -69.25vh;
    }

    #options .option {
        width: auto;
        margin-bottom: 21%;
    }

    #enjoy {
        margin-top: 6%;
    }

    #enjoy p {
        width: 100%;
    }

    #enjoy h2, 
    #locations h2 {
        font-size: 54px;
        margin-bottom: 12%;
    }

    #locations p {
        width: 100%;
    }

    #locations .info button {
        top: -6%;
        margin-top: 6%;
        width: 100%;
        height: auto;
        margin-bottom: 9%;
        padding: 6%;
        font-size: 22px;
    }

    #recipe h2 {
        margin-top: 16%;
        font-size: 54px;
    }

    #franchise {
        margin-top: 9%;
    }

    #franchise p {
        width: 100%;
    }

    #map-container {
        margin-bottom: 18vh;
        top: 6vh;
    }

    #map-container img {
        width: 100%;
    }

    #contact h2 {
        margin-top: 18%;
    }

    form {
        margin-top: 9%;
    }

    #name-input,
    #email-input,
    #message-input {
        background: none;
        width: auto;
    }

    .yellow-fields {
        border: 2px solid #FFD52D;
    }

    #submit-input {
        float:none;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 12%;
    }

    #job-listings h2 {
        font-size: 54px;
        margin-top: 9%;
    }

    #job-listings button {
        width:100%;
    }

    #instagram h2 {
        font-size: 54px;
        margin-top: 9%;
    }

    #instagram a, #instagram a h3 {
        font-size: 36px;
    }

    #instagram .position-2 {
        top: -18vh;
    }

    #locations-ctn .locations-group.info h2 {
        font-size: 54px;
        margin-top: 12%;
    }

    #locations-ctn .locations-group.info p.subtitle {
        width: 100%;
        margin-bottom: 12%;
    }

    .locations-group.detail .location button {
        width: 100%;
        margin-left: 0;
        padding-left: 5%;
        padding-right: 8%;
    }

    .locations-group.detail .location > div p {
        font-size: 18px;
    }

    #locations-detail #locations-ctn .locations-group.info .location .ambience-main {
        padding-right: 0;
        margin-bottom: 6%;
    }

    #locations-detail #locations-ctn .locations-group.info .flex-column-reverse {
        margin-bottom: -6%;
    }

    #locations-detail #locations-ctn .locations-group.info .flex-column-reverse h2 {
        position: relative;
        left: 36%;
        font-size: 48px;
    }

    #locations-detail #locations-ctn .location img.location-icon {
        position: relative;
        top: -8vh;
        margin-bottom: -30%;
    }

    #locations-detail #locations-ctn .locations-group.info p.subtitle {
        margin-bottom: 3%;
        margin-top: 9%;
    }

    #locations-detail #locations-ctn .locations-group.info .location button {
        width: 100%;
        padding-top: 4%;
        padding-left: 5%;
    }

    #return-button {
        text-align: left;
        margin-bottom: 6%;
        margin-top: 6%;
    }

    #locations-detail #locations-ctn .location .back-link.red p {
        font-size: 21px !important;
    }

    #locations-detail #locations-ctn .location .back-link > img {
        width:9%;
    }

    #menu .section-header-wrapper {
        margin-top: 3%;
        overflow: visible;
    }

    #menu-joystick {
        right: -50%;
        bottom: 26%;
        opacity: 0.4;
    }

    #slices .crsl-all-img-ctn {
        top: -18vh;
    }

    #slices .crsl-all-img-crown-ctn {
        top: -29vh;
    }

    body#slices #pizza-slider, 
    body#sodas #soda-slider, 
    body#sides #sides-slider {
        height: auto !important;
        overflow-y: visible;
        padding-bottom: 24%;
    }
 
    body#sodas #soda-slider {
        padding-bottom: 3%;
    }

    body#sides #sides-slider {
        /* padding-bottom: 20%; */
        padding-bottom: 65%;
    }

    body#slices .page-header, body#sodas .page-header, body#sides .page-header {
        margin-left: 3%;
    }

    body#sides .page-header {
        margin-top: 3%;
    }

    body#slices .crsl-controls, body#sodas .crsl-controls {
        top: 38vh;
    }

    body#slices .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#slices .return, body#sodas .return, body#sides .return {
        left: 14.5%;
        top: 42vh;
    }

    body#sides .return {
        top: 67.5vh;
    }

    body#slices .return p, body#slices .return a p, body#sodas .return p, body#sodas .return a p, body#sides .return p, body#sides .return a p {
        font-size: 18px;
        float: none;
    }

    body#slices #pizza-slider .view-all, 
    body#sodas #soda-slider .view-all, 
    body#sides #pizza-slider .view-all {
        left: 14.5%;
        top: 40.5vh;
        float: none;
    }

    body#slices #pizza-slider .view-all a, 
    body#sodas #soda-slider .view-all a, 
    body#sides #pizza-slider .view-all a {
        float: left;
    }

    body#slices, body#slices #sliders,
    body#sodas, body#sodas #sliders,
    body#sides, body#sides #sliders {
        height: auto;
    }

    body#slices #pizza-scroll .crsl-img-ctn {
        justify-content: left;
        width: 22%;
        margin-bottom: 6%;
    }

    body#sodas #soda-scroll .crsl-img-ctn {
        justify-content: center;
        width: 22%;
        margin-bottom: 6%;
        margin-left: 2.5%;
    }

    body#slices #pizza-scroll .thumbnails, body#sodas #soda-scroll .thumbnails, body#sides #soda-scroll .thumbnails {
        margin-right: 0; 
    }

    body#slices .controls-wrapper {
        top: 40vh;
        position: relative;
    }

    body#sodas #soda-slider .crsl-img {
        height: 48vh;
    }

    body#sodas #soda-slider .slides .crsl-all-img-ctn {
        top: -25vh;
    }

    body#sodas .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#sides #sides-slider .breadcrumb {
        margin-top: 3%;
    }

    body#sides .crsl-breadcrumb-info {
        top: 20vh;
    }

    body#sides .crsl-controls .info .title-ctn h3 {
        text-align: left;
    }

    body#sides #sides-slider .view-all {
        left: 14.5%;
        top: 58.25vh;
    }

    body#sides .crsl-controls {
        position: relative;
        top: 57vh;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        /* top: 0vh; */
        left: -21%;
    }

    body#sides .page-header {
        margin-bottom: 0%;
    }

    #menu-joystick {
        position: relative;
        right: -24%;
        bottom: 12vh;
        margin-bottom: -24vh;
        opacity: 1 !important;
    }

    /* ======================================= */
    /* FRANCHISES                              */
    /* ======================================= */

    body#franchise {
        margin-top: 0;
    }
    
    body#franchise #heading img#logo {
        width: 60vw;
    }

    body#franchise #franchise-hero img#hero-bg {
        width: auto;
    }

    body#franchise #franchise-hero .cta-box {
        position: relative;
        width: 70%;
        top: -55vh;
        left: 8vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 9% 6%;
        margin-bottom: -50vh;
    }

    body#franchise img#subscription-block {
        position: relative;
        top: 0vh;
        width: 110%;
        max-width: none;
        left: 0vw;
    }

    body#franchise #main-section img#slice-pizza {
        top: -24vh;
    }

    body#franchise #main-section p.highlight {
        margin-bottom: 16%;
    }

    body#franchise #main-section {
        margin-bottom: 0%;
    }

    body#franchise #addresses #franchise-locations a.slice-location .item {
        text-align: center;
    }

    body#franchise #addresses #franchise-locations .slice-location {
        margin-bottom: 2.5%;
        width: 48%;
    }

    body#franchise #addresses h2 {
        margin-top: 12%;
        margin-bottom: 12%;
    }

    body#franchise #addresses #franchise-locations div.slice-location .item {
        text-align: center;
    }

    #submit-order {
        display:none;
    }

    .navbar-nav.language {
        display: none !important;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px)  {

    :root {
        --crsl-width: 80vw;
        --crsl-height: 60vh;
        --crsl-img-mx: 26vw;
        --crsl-img-ctn-width: 80vw;
        --crsl-img-width: 50vw;
        --crsl-img-height: 50vw;
        --crsl-controls-width: 54vw;
    }

    .crsl-all-img-ctn {
        left: -30%;
    }

    body#sides .crsl-all-img-ctn {
        left: 0%;
    }

    #pizza-slider .slides .crsl-img-ctn img {
        top: 12vh;
        left: -50%;
    }

    .crsl-all-img-crown-ctn {
        top: 8%;
        left: -12%;
    }

    .breadcrumb {
        width: 40%;
        top: 6%;
        position: relative;
    }

    .crsl-controls .info .title-ctn h3 {
        font-size: 4.5vh;
        top: -13vh;
    }

    .view-all {
        left: 21%;
    }

    #soda-slider .slides .crsl-all-img-ctn {
        top: -18%;
        left: -62%;
    }

    #sides-slider .breadcrumb {
        width: 80%;
    }

    #sides-slider .crsl-controls .info .title-ctn h3 {
        top: -5vh;
    }

    #sides-slider .view-all {
        top:6%;
    }

    #sides-slider .slides .crsl-all-img-ctn {
        /* left: -50%; */
    }

    #sides-slider .slides .crsl-img-ctn img.gnocchi {
        /* left: 70%; */
    }

    #sides-slider .slides .crsl-img-ctn img.cookie {
        /* left: 42vw; */
    }

    #sides-slider .slides .crsl-img-ctn img {
        /* width: 100%; */
        width: var(--crsl-img-width);
    }

    #enjoy h2 {
        margin-top: 6%;
    }

    #options .option {
        margin-bottom: 12%;
    }

    #locations h2 {
        font-size: 48px;
    }

    #locations .info p.subtitle {
        font-size: 22px;
    }

    #locations p {
        width: 100%;
    }

    #locations .info button {
        width: 100%;
        margin-top: 20%;
    }

    #recipe h2 {
        font-size: 48px;
        margin-top: 8%;
    }

    #map-container {
        top: 0vh;
        margin-bottom: 12%;
    }

    #contact h2 {
        margin-top: 6%;
    }

    form {
        margin-top: 6%;
    }

    #submit-input {
        float: none;
        margin: 0 auto;
        margin-bottom: 6%;
    }

    .position-1 {
        top: 0vh;
    }

    .position-3 {
        top: -16vh;
    }

    #menu .section-header-wrapper {
        overflow: visible;
        margin-top: 3%; 
    }

    #menu-joystick {
        right: -50%;
        bottom: 28%;
        opacity: 0.4;
    }

    #locations-ctn .locations-group.info p.subtitle {
        width: 65%;
        margin-bottom: 9%;
    }

    .locations-group.detail .location button {
        margin-left: 0;
        margin-bottom: 5%;
        margin-top: 1.5%;
    }

    #locations-ctn .locations-group.info h2 {
        font-size: 40px;
        margin-top: 4%;
        margin-left: 4%;
    }

    #locations-detail #locations-ctn .locations-group.info .location {
        margin-bottom: 5%;
    }

    #locations-detail #locations-ctn .locations-group.info p.subtitle {
        margin-top:6%;
        margin-bottom: 3%;
    }

    #locations-detail #locations-ctn .location .back-link.red p {
        font-size: 21px !important; 
    }

    #locations-detail #locations-ctn .location .back-link img {
        width: 8%;
    }

    #locations-detail #locations-ctn #return-button {
        margin-top: 1.5%;
    }

    #locations-detail #locations-ctn .locations-group.info .location button {
        width: 100%;
    }

    #locations-ctn .locations-group.info .col-12 h2 {
        margin-left: 0;
        margin-bottom: -3%;
    }

    body#slices #pizza-slider .slides .crsl-img-ctn img {
        top: 22vh;
    }

    body#slices .crsl-all-img-crown-ctn {
        top: 25%;
        left: -12%;
    }

    body#slices .crsl-img-crown {
        width: 12%;
    }

    body#slices #pizza-slider .view-all, 
    body#sodas #soda-slider .view-all, 
    body#sides #pizza-slider .view-all {
        top: 12%;
        left: 20%;
    }

    body#slices .return, 
    body#sodas .return, 
    body#sides .return {
        left: 20.5%;
    }

    body#slices .breadcrumb,
    body#sodas .breadcrumb,
    body#sides .breadcrumb {
        margin-bottom: 9%;
    }

    body#slices #pizza-scroll .thumbnails, 
    body#sodas #soda-scroll .thumbnails, 
    body#sides #soda-scroll .thumbnails {
        margin-right: 0%;
    }

    body#sodas .crsl-img {
        height: 60vh;
        top: 4vh;
        position: relative;
        left: -3vh;
    }

    body#sides .page-header {
        margin-bottom: 36%;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        /* top: 24vh; */
    }

    body#sides .crsl-breadcrumb-info {
        top: 20vh;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        left: -60%;
        top: 24vh;
    }

    body#sides #sides-slider .crsl-controls .info .title-ctn h3 {
        top: -6vh;
    }

    #menu-joystick {
        position: relative;
        right: -24%;
        bottom: 12vh;
        margin-bottom: -24vh;
        opacity: 1 !important;
    }

    /* ======================================= */
    /* FRANCHISES                              */
    /* ======================================= */

    body#franchise #heading img#logo {
        width: 40vw;
    }

    body#franchise #franchise-hero img#hero-bg {
        width: auto;
    }

    body#franchise #franchise-hero .cta-box {
        position: relative;
        width: 70%;
        top: -55vh;
        left: 8vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 6% 6%;
        margin-bottom: -50vh;
    }

    body#franchise img#subscription-block {
        position: relative;
        top: -8vh;
        width: 110%;
        max-width: none;
        left: 4vw;
    }

    body#franchise #main-section img#slice-pizza {
        top: -24vh;
    }

    body#franchise #main-section p.highlight {
        margin-bottom: 16%;
    }

    body#franchise #main-section {
        margin-bottom: 0%;
    }

    body#franchise #addresses #franchise-locations a.slice-location .item {
        text-align: center;
    }

    body#franchise #addresses #franchise-locations .slice-location {
        margin-bottom: 2.5%;
        width: 35%;
    }

    body#franchise #addresses h2 {
        margin-top: 12%;
        margin-bottom: 12%;
    }

    body#franchise #addresses #franchise-locations div.slice-location .item {
        text-align: center;
    }

    .navbar-nav.language {
        display: none !important;
    }
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px)  { 

    :root {
        --crsl-width: 80vw;
        --crsl-height: 60vh;
        --crsl-img-mx: 26vw;
        --crsl-img-ctn-width: 80vw;
        /* --crsl-img-ctn-height: 1000vh; */
        --crsl-img-width: 37vw;
        --crsl-img-height: 44vw;
        --crsl-controls-width: 50vw;
    }

    .breadcrumb {
        width: 28%;
    }

    .view-all {
        left: 19%;
    }

    .crsl-all-img-ctn {
        left: -28.5vw;
        top: 15vw;
    }

    body#sides .crsl-all-img-ctn {
        left: 0%;
    }

    .crsl-img-crown {
        left: 24vw;
    }

    .crsl-all-img-crown-ctn {
        top: 20%;

    }

    .crsl-img-crown {
        width:10%;
    }

    #soda-slider .slides .crsl-all-img-ctn {
        top: -30%;
        left: -35%;
    }

    #sides-slider .slides .crsl-all-img-ctn {
        /* left: -24vw;
        top: 3vw; */
    }

    #sides-slider .slides .crsl-img-ctn img.gnocchi {
        /* left: 24%; */
    }

    #sides-slider .slides .crsl-img-ctn img.cookie {
        /* left: 70%; */
    }

    #sides-slider .breadcrumb {
        width: 75%;
    }

    #locations .info button {
        width: 100%;
    }

    #map-container {
        top: 0vh;
        margin-bottom: 12vh;
    }

    #contact {
        margin-top: 6%;
    }

    #job-listings button {
        width: 100%;
    }

    .position-3 {
        top: -14vh !important;
    }

    #menu .section-header-wrapper {
        overflow: visible;
        margin-top: 3%;
    }

    #menu #menu-joystick {
        opacity: 0.4;
    }

    #locations-ctn .locations-group.info p.subtitle {
        width: 100%;
    }

    .locations-group.detail .location button {
        width: 100%;
    }

    #locations-ctn .locations-group.info .col-9 h2 {
        font-size: 54px;
        margin-top: 3%;
        margin-left: 3%;
    }

    #locations-ctn .locations-group.info .col-12 h2 {
        font-size: 48px;
        margin-bottom: -3%;
    }

    #locations-detail #locations-ctn .locations-group.info .location button {
        width: 40%;
    }

    body#slices .crsl-all-img-crown-ctn {
        top: 10%;
    }

    body#slices .return, body#sodas .return, body#sides .return {
        left: 18%;
    }

    body#slices .view-all, body#sodas .view-all, body#sides .view-all {
        left: 18%;
    }

    body#sodas .crsl-img {
        height: 60vh;
    }

    body#sodas #soda-slider .slides .crsl-all-img-ctn {
        top: 18%;
        left: -40%;
    }

    body#sides .crsl-breadcrumb-info {
        top: 19vh;
    }

    body#sides .page-header {
        margin-bottom: 30%;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        /* left: -5vw;
        top: 15vw; */
        left: -6%;
    }

    body#sides #sides-slider .slides .crsl-img-ctn img {
        /* width: 100%; */
        left:-72%;
        width: var(--crsl-img-width);
    }

    body#sides #sides-slider .slides .crsl-img-ctn img.gnocchis {
        /* width: 70%;
        left:-24%; */
    }
    
    body#sides #sides-slider .slides .crsl-img-ctn img.cookie {
        /* width: 100%; */
        /* left: -22vw; */
    }

    #menu-joystick {
        position: relative;
        right: -24%;
        bottom: 24vh;
        margin-bottom: -32vh;
        opacity: 1 !important;
    }

    /* ======================================= */
    /* FRANCHISES                              */
    /* ======================================= */

    body#franchise #heading img#logo {
        width: 40vw;
    }

    body#franchise #franchise-hero img#hero-bg {
        width: auto;
    }

    body#franchise #franchise-hero .cta-box {
        position: relative;
        width: 65%;
        top: -55vh;
        left: 8vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 6% 6%;
        margin-bottom: -45vh;
    }

    body#franchise img#subscription-block {
        position: relative;
        top: -8vh;
        width: 110%;
        max-width: none;
        left: 4vw;
    }

    body#franchise #main-section img#slice-pizza {
        top: -24vh;
    }

    body#franchise #main-section p.highlight {
        margin-bottom: 16%;
    }

    body#franchise #main-section {
        margin-bottom: 0%;
    }

    body#franchise #addresses #franchise-locations a.slice-location .item {
        text-align: center;
    }

    body#franchise #addresses #franchise-locations .slice-location {
        margin-bottom: 2.5%;
        width: 26%;
    }

    body#franchise #addresses h2 {
        margin-top: 12%;
        margin-bottom: 12%;
    }

    body#franchise #addresses #franchise-locations div.slice-location .item {
        text-align: center;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    :root {
        --crsl-width: 80vw;
        --crsl-height: 60vh;
        --crsl-img-mx: 26vw;
        --crsl-img-ctn-width: 80vw;
        /* --crsl-img-ctn-height: 1000vh; */
        --crsl-img-width: 37vw;
        --crsl-img-height: 44vw;
        --crsl-controls-width: 50vw;
    }

    .breadcrumb {
        width: 28%;
    }

    .view-all {
        left: 19%;
    }

    .crsl-all-img-ctn {
        left: -28.5vw;
        top: 9vw;
    }

    body#sides .crsl-all-img-ctn {
        left: 0;
    }

    .crsl-img-crown {
        left: 24vw;
    }

    .crsl-all-img-crown-ctn {
        top: 3%;

    }

    .crsl-img-crown {
        width:10%;
    }

    #soda-slider .slides .crsl-all-img-ctn {
        top: -30%;
        left: -35%;
    }

    #sides-slider .slides .crsl-all-img-ctn {
        /* left: -24vw;
        top: 3vw; */
    }

    #sides-slider .slides .crsl-img-ctn img.gnocchi {
        /* left: 24%; */
    }

    #sides-slider .slides .crsl-img-ctn img.cookie {
        /* left: 70%; */
    }

    #sides-slider .breadcrumb {
        width: 75%;
    }

    #locations .info button {
        width: 100%;
    }

    #map-container {
        top: 0vh;
        margin-bottom: 12vh;
    }

    #contact {
        margin-top: 6%;
    }

    #job-listings button {
        width: 100%;
    }

    .position-3 {
        top: -14vh !important;
    }

    #menu .section-header-wrapper {
        overflow: visible;
        margin-top: 3%;
    }

    #menu #menu-joystick {
        opacity: 0.4;
    }

    #locations-ctn .locations-group.info p.subtitle {
        width: 100%;
    }

    .locations-group.detail .location button {
        width: 100%;
    }

    #locations-ctn .locations-group.info .col-9 h2 {
        font-size: 54px;
        margin-top: 3%;
        margin-left: 3%;
    }

    #locations-ctn .locations-group.info .col-12 h2 {
        font-size: 48px;
        margin-bottom: -3%;
    }

    #locations-detail #locations-ctn .locations-group.info .location button {
        width: 27%;
    }

    body#slices .crsl-all-img-crown-ctn {
        top: 3%;
    }

    body#slices .return, body#sodas .return, body#sides .return {
        left: 16%;
    }

    body#slices .view-all, body#sodas .view-all, body#sides .view-all {
        left: 16%;
    }

    body#sodas .crsl-img {
        height: 60vh;
    }

    body#sodas #soda-slider .slides .crsl-all-img-ctn {
        top: 18%;
        left: -40%;
    }

    body#sides .crsl-breadcrumb-info {
        top: 15vh;
    }

    body#sides .page-header {
        margin-bottom: 30%;
    }

    body#sides #sides-slider .slides .crsl-all-img-ctn {
        /* left: -5vw;
        top: 15vw; */
        left: -40%;
    }

    body#sides #sides-slider .slides .crsl-img-ctn img {
        /* width: 100%; */
        width: var(--crsl-img-width);
        /* left:-24%; */
    }

    body#sides #sides-slider .slides .crsl-img-ctn img.gnocchis {
        /* width: 70%; */
        /* left:-24%; */
    }
    
    body#sides #sides-slider .slides .crsl-img-ctn img.cookie {
        /* width: 100%; */
        /* left: -22vw; */
    }

    #menu-joystick {
        position: relative;
        right: -24%;
        bottom: 24vh;
        margin-bottom: -32vh;
        opacity: 1 !important;
    }

    /* ======================================= */
    /* FRANCHISES                              */
    /* ======================================= */

    body#franchise #heading img#logo {
        width: 40vw;
    }

    body#franchise #franchise-hero img#hero-bg {
        width: auto;
    }

    body#franchise #franchise-hero .cta-box {
        position: relative;
        width: 58%;
        top: -55vh;
        left: 8vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 3% 6%;
        margin-bottom: -45vh;
    }

    body#franchise img#subscription-block {
        position: relative;
        top: -8vh;
        width: 110%;
        max-width: none;
        left: 4vw;
    }

    body#franchise #main-section img#slice-pizza {
        top: -24vh;
    }

    body#franchise #main-section p.highlight {
        margin-bottom: 16%;
    }

    body#franchise #main-section {
        margin-bottom: 0%;
    }

    body#franchise #addresses #franchise-locations a.slice-location .item {
        text-align: center;
    }

    body#franchise #addresses #franchise-locations .slice-location {
        margin-bottom: 2.5%;
        width: 26%;
    }

    body#franchise #addresses h2 {
        margin-top: 12%;
        margin-bottom: 12%;
    }

}

/* XX-Large devices (larger desktops, 1400px and up) */
/* @media (min-width: 1400px) and (max-width: 2559.98px) {  */
@media (min-width: 1400px) { 

    body#franchise #franchise-hero .cta-box {
        position: absolute;
        width: 40%;
        top: 40vh;
        left: 20vh;
        background: rgba(16,12,9, 0.7);
        padding: 3% 3% 3% 3%;
        /* margin-bottom: -50vh; */
    }

}

/* XXX-Large 4K devices (larger desktops, 2560px and up) */
@media (min-width: 2560px) { 
    
}

/* ======================================= */
/* ADJUSTMENTS                             */
/* ======================================= */

#slices #pizza-slider .controls a.external-link p,
#sides #sides-slider .controls a.external-link p {
    display:none !important;
}

#sodas #soda-slider .view-all a,
#sodas #soda-slider .view-all a p {
    display:none !important;
}

#enjoy p.external-link {
    margin-top: 6%;
    font-weight: 600;
}

.hidden {
    display: none !important;
}