/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

body {
    /* background: url(../images/background.jpg); */
    background:#fff;
    min-height: 100vh;
    font-family: 'Helvetica', 'Arial', 'PingFang TC', 'Meiryo', 'Microsoft JhengHei';
    font-size: 16px;
    line-height: 1.6;
    /* color: #625D59; */
    color: #000;
    margin: 0;
    overflow-x:hidden;
}

a {
    color: #F48221;
}

a:hover, a:focus {
    color: #F48221;
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #017858;
    margin:0 0 10px 0;
    line-height:1.5;
}

h1 {
    font-size:22px;
    font-weight:bold;
    margin: 0 0 20px 0;
}

h1.page-header {
    font-size:22px;
    font-weight:bold;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
}

h2 {
    font-size:22.4px;
    font-weight: normal;
    margin: 0 0 16px 0;
}

h3 {
    font-size:22.4px;
    font-weight: normal;
    color: #F48221;
    margin: 0 0 16px 0;
}

h3.green {
    color: #017858;
}

h3.green_bold {
    color: #017858;
    font-weight: bold;
}

h3.green_bold_underline {
    color: #017858;
    font-weight: bold;
    border-bottom: 2px solid #017858;
    padding-bottom: 5px;
}

h3.confirmation-h3 {
    color:#017858;
}

h4 {
    font-size:22px;
    font-weight: normal;
    color: #F48221;
    margin: 0 0 16px 0;
}

p {
    margin: 0 0 20px;
}

p:last-child {
    margin-bottom: revert;
}

img {
    max-width: 100%;
    height: auto;
}

.align-left {
    margin-right: 5%;
}

.align-right {
    margin-left: 5%;
}

.align-center img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.header-top-nav {
    position: relative;
}

.header-top-nav .inner {
    float: right;
    z-index: 2;
    position: relative;
}

.header-logo {
    margin-top: -15px;
    z-index: 1;
    position: relative;
}

.header-logo {
    margin-top: -15px;
    z-index: 1;
    position: relative;
}

.header-logo a {
    display:block;
   /* width:72px; */
   width:150px;
    margin:0 auto;
}

.header-logo a img {
    max-width:100%;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height:50px;
    background: #625D59 url(../images/m-close-btn.png) no-repeat center;
    background-size: 20px;
    text-indent: -9999px;
    z-index: 3;
}

.navbar-toggle.collapsed {
    background: url(../images/m-header-menu.png) no-repeat center;
    background-size: 30px;
}

body.user-logged-in .dialog-off-canvas-main-canvas {
    position: relative;
}

.region-social-media {
    display: flex;
    justify-content: flex-end;
    padding: 15px 64px 0;
}

.region-social-media p {
    margin:0;
}

.region-social-media .block-language-blocklanguage-interface {
    border-left: solid 1px #3E3E3E;
    margin-left:10px;
    padding-left:5px;
}

.region-social-media .block-language-blocklanguage-interface > ul {
    list-style: none;
    margin:0;
    padding:0;
    height: 100%;
    display: flex;
}

.region-social-media .block-language-blocklanguage-interface ul li {
    list-style: none;
    margin:0;
    padding:0;
    display:inline-flex;
}

.region-social-media .block-language-blocklanguage-interface ul li.is-active {
    display:none;
}

.region-social-media .block-language-blocklanguage-interface ul li a {
    color: #3E3E3E;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 0 10px;
    text-decoration: none;
}

.region-social-media .block-language-blocklanguage-interface ul li a:hover {
    text-decoration: none;
}

.share-buttons a {
    width: 35px;
    height: 35px;
    display:inline-block;
    text-align: center;
    vertical-align: middle;
    /* background:#eee; */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-indent: -9999px;
}

.share-buttons a + a {
    margin-left: 5px;
}

/**
 *  removed asked by Ms. Ada 27062024
 */

/**.share-buttons > .email-share {
*    background-image: url(../images/social-email.png);
*}*/


/**
 *  removed asked by Ms. Ada 27062024
 */



.share-buttons > .fb-share {
    background-image: url(../images/social-facebook.png);
}

.share-buttons > .insta-share {
    background-image: url(../images/social-instagram.png);
}

.share-buttons > .line-share {
    background-image: url(../images/social-line.png);
}

.share-buttons > .youtube-share {
    background-image: url(../images/social-youtube.png);
}

.container-main {
    max-width:1300px;
    padding: 0 20px;
    margin:0 auto;
    position: relative;
}

.container-banner {
    max-width:1300px;
    margin:0 auto;
    position: relative;
}

.container-content {
    max-width: 1080px;
    margin:0 auto;
    position: relative;
}

.container-content.homepage,
body.page-node-type-news .container-content,
body.page-node-type-service .container-content,
body.page-node-12 .container-content {
    max-width: 1030px;
}

.container-inner {
    position: relative;
    margin: 0 auto;
    width: 1080px;
    width: 87vw;
    width: calc(87vw + 30px);
}

.main-container {
    margin-bottom: 40px;
}

.view-homepage-news-and-promotions {
    padding: 20px 0 30px 0;
}

body.path-frontpage .main-container {
    margin-bottom: 10px;
}

.cycle-slideshow {
    max-width:100%;
}

.slide {
    width:100%;
}

.slide img {
    width:100%;
    max-width: 100%;
    display: block;
}

#slideshow-selector {
    background:#fff;
    margin: 0 32px;
}

#slideshow-selector .slide img {
    opacity: 0.3;
    cursor: pointer;
}

#slideshow-selector .slide.cycle-slide-active img {
    opacity: 1;
    display: block;
}

#slideshow-selector-wrapper {
    position: relative;
}

#slideshow-selector-wrapper .cycle-prev,
#slideshow-selector-wrapper .cycle-next {
    position: absolute;
    top:0;
    width:32px;
    height:100%;
    background:#fff;
    overflow: hidden;
    text-indent: -9999px;
}

#slideshow-selector-wrapper .cycle-prev {
    left:0;
}

#slideshow-selector-wrapper .cycle-next {
    right:0;
}

#slideshow-selector-wrapper .cycle-prev:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -16px;
    margin-right: -8px;
    border: 16px solid #f58220;
    border-color: transparent #f58220 transparent transparent;
}

#slideshow-selector-wrapper .cycle-next:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -8px;
    border: 16px solid #f58220;
    border-color: transparent transparent transparent #f58220;
}

.slideshow-bg {
    background-color: rgba(0, 0, 0, 0.3);
}

.row-full {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

.homepage-nav {
    background: #017858;
    border-bottom: 5px solid #F48221;
    margin-bottom:15px;
    color:#fff;
    padding: 15px 0;
    font-size:14.4px;
}

.homepage-nav .selector-inner {
    display:flex;
    justify-content: space-between;
    padding: 0 30px;
}

.homepage-nav .selector-category {
    display:flex;
    /* width:50%; */
}

.homepage-nav .selector-map {
    display:flex;
    /* width:50%; */
    justify-content: flex-end;
}

.homepage-nav .map-link,
.homepage-nav .category-link {
    cursor: pointer;
    color:#fff;
    position: relative;
    padding:0 0 0 11px;
    margin-right: 11px;
    display: inline-block;
    text-decoration: none;
}

.homepage-nav .map-link:last-child,
.homepage-nav .category-link:last-child {
    margin-right: 0;
}

.homepage-nav .map-link:before,
.homepage-nav .category-link:before {
    content: '';
    position: absolute;
    margin-top:-7px;
    top: 50%;
    left: 0;
    border: 5px solid white;
    border-color: transparent transparent transparent white;
}

.homepage-nav .map-link.active,
.homepage-nav .map-link:hover,
.homepage-nav .category-link.active,
.homepage-nav .category-link:hover {
    color: #F6C231;
}

.homepage-nav .map-link.active:before,
.homepage-nav .map-link:hover:before,
.homepage-nav .category-link.active:before,
.homepage-nav .category-link:hover:before {
    border: 5px solid #F6C231;
    border-color: transparent transparent transparent #F6C231;
}

.homepage-nav .title {
    font-weight: bold;
    margin-right:30px;
}

.homepage .box-list {
    margin-bottom:50px;
}

.box-list.product-list {
    margin-bottom:20px;
}

.box-list.product-list h3.green_bold_underline {
    margin-bottom:10px;
}

.box-list ul {
    list-style:none;
    margin: 0 -10px;
    padding:10px 0 0 0;
    display:flex;
    flex-wrap: wrap;
}

.box-list ul li {
    list-style:none;
    padding:0;
    width:33.3333333333%;
    padding: 0 10px 20px;
    position: relative;
}

.box-list.product-list ul li {
    list-style:none;
    padding:0;
    width:25%;
    padding: 0 10px 20px;
    position: relative;
}

.box-list.more-products-list ul li {
    width:25%;
}

.box-list.more-products-list ul li.active a:before {
    content: ' ';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.box-list.more-products-list ul li.active a:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #F48221;
    pointer-events: none;
}

.box-list ul li .inner {
    position: relative;
}

.box-list ul li:hover .inner.no-link:after,
.box-list ul li:hover .inner > a:after {
    content: ' ';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(255, 255, 255, 0.1);
    display:block;
}

.box-list ul li > a {
    position: relative;
    display: block;
}

.box-list ul li .title {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:12px;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 1;
    line-height: 1.3;
}

.box-list.more-products-list ul li .title {
    text-align: left;
}

.box-list ul li .promo {
    position: absolute;
    top:8px;
    right:8px;
    z-index: 1;
    border: solid 1px #fff;
    color: #fff;
    line-height: 1;
    padding: 4px 8px;
}

.box-list .more-wrapper {
    text-align: center;
    padding:10px 0 0 0;
}

.box-list .btn-more {
    border: 2px solid #017858;
    color:#017858;
    background:#fff;
    display: inline-block;
    line-height: 1;
    width:32.25%;
    min-width: 140px;
    padding:11px;
    cursor: pointer;
}

.box-list .btn-more:hover {
    background: #017858;
    color:#fff;
}

.icon-list {
    padding-top:10px;
    margin:0 0 20px 0;
}

.icon-list-item {
    display:flex;
    margin:0 0 32px 0;
}

.icon-list-item .icon {
    width:95px;
    margin-right:15px;
}

body.page-node-32 .icon-list-item .icon {
    width:186px;
    margin-right:30px;
}

.icon-list-item .content {
    width:100%;
}

.icon-list-item h4 {
    font-size:19.2px;
    margin: 0 0 8px 0;
}

body.page-node-32 .icon-list-item h4 {
    font-size:21px;
}

.faq-list {
    /* padding-top:10px;
    margin:0 0 20px 0; */
}

.faq-list-item {
    border-bottom: dotted 1px #7C7C7C;
    margin: 0 0 16px;
}

.faq-list-item .question {
    margin: 0 0 16px;
    min-height: 29px;
    padding: 0 0 0 37px;
    color: #F48221;
    background: url(../images/question.png) top left no-repeat;
}

.faq-list-item .answer {
    margin: 0 0 16px;
    min-height: 23px;
    padding: 0 0 0 37px;
    background: url(../images/answer.png) top left no-repeat;
}

#milestones {
    position: relative;
    padding: 14px;
    border: solid 4px #f68122;
    border-radius: 15px;
    display: flex;
    flex-direction: column-reverse;
    background: url(../images/award.png) right 16px top 16px no-repeat;
    background-size: 104px 104px;
}

#milestones h4 {
    font-size: 20px;
    margin:0 0 0 0;
}

#milestones h4.year-title {
    margin:0 0 16px 0;
}

#milestones .years {
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
}

#milestones .years:before {
    content: ' ';
    position: absolute;
    height:8px;
    background:#f68122;
    left:-14px;
    right:-2px;
    top:50%;
    margin-top: -5px;
}

#milestones .years:after {
    content: ' ';
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: -14px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #f68122;
}

#milestones .years .year {
    cursor: pointer;
    margin: 0 20px;
    color: #F48221;
    position: relative;
    z-index: 1;
}

#milestones .years .year.active {
    font-weight: bold;
    font-size: 20px;
}

#milestones .years .year:nth-child(odd):before {
    content: ' ';
    position: absolute;
    bottom:50%;
    left:50%;
    margin-left:-1px;
    width:2px;
    height:32px;
    background:#F48221;
}

#milestones .years .year:nth-child(even):before {
    content: ' ';
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-1px;
    width:2px;
    height:32px;
    background:#F48221;
}

#milestones .years .year.active:nth-child(odd):before,
#milestones .years .year.active:nth-child(even):before {
    height:28px;
}

#milestones .years .year:after {
    content: ' ';
    position: absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    margin-left:-10px;
    margin-top:-10px;
    background:#fff;
    z-index: 1;
    border-radius: 50%;
    border: solid 3px #F48221;
}

#milestones .years .year.active:after {
    width:30px;
    height:30px;
    margin-left:-15px;
    margin-top:-15px;
    background:#F48221;
    border: solid 3px #fff;
}

#milestones .years .year:nth-child(odd) {
    padding: 0;
    display: flex;
    height: 115px;
    align-items: flex-start;
}

#milestones .years .year:nth-child(even) {
    padding: 0;
    display: flex;
    height: 115px;
    align-items: flex-end;
}

#milestones .milestone-content-wrapper {
    padding-right: 120px;
}

#milestones .milestone-content {
    display:none;
    font-size: 14.4px;
    padding:0 0 20px 0;
}

#milestones .milestone-content.active {
    display:block;
}

#milestones .arrow-left,
#milestones .arrow-right {
    cursor: pointer;
    position:absolute;
    width: 30px;
    height: 57px;
    background: no-repeat;
    background-size: contain;
    z-index: 10;
    top:250px;
}

#milestones .arrow-left {
    left:10px;
    background-image: url(../images/arrow-left.png);
    display:none;
}

#milestones .arrow-right {
    right:10px;
    background-image: url(../images/arrow-right.png);
    display:none;
}

.find-food-block {
    padding:20px 0 0 0;
}

.food-row-1,
.food-row-2 {
    display:flex;
    justify-content: space-between;
}

.food-row-1 {
    margin:0 0 2% 0;
}

.food-row-1 .left,
.food-row-2 .right {
    width:60%;
}

.food-row-1 .right,
.food-row-2 .left {
    width:38%;
}

.food-row-1 .item-1,
.food-row-2 .item-1 {
    margin:0 0 2% 0;
}

.food-row-1 .item-1,
.food-row-1 .item-2,
.food-row-1 .item-3,
.food-row-2 .item-1,
.food-row-2 .item-2,
.food-row-2 .item-3 {
    position: relative;
}

.find-food-block a {
    position: absolute;
    top:50%;
    left:50%;
    display:block;
    border: 2px solid #fff;
    color: #fff;
    line-height: 1;
    font-size:14.4px;
    padding: 9px 29px;
    text-decoration: none;
}

.food-row-1 .item-1 a {
    top: 81%;
    left: 61.5%;
}
.food-row-1 .item-2 a {
    top: 79%;
    left: 4%;
}
.food-row-1 .item-3 a {
    top: 92.5%;
    left: 6%;
}
.food-row-2 .item-1 a {
    top: 73%;
    left: 52.5%;
}
.food-row-2 .item-2 a {
    top: 83%;
    left: 55.5%;
}
.food-row-2 .item-3 a {
    top: 89%;
    left: 5%;
}

.find-food-lang-zh-hant .food-row-1 .item-1 a {
    top: 81%;
    left: 61.5%;
}
.find-food-lang-zh-hant .food-row-1 .item-2 a {
    top: 76.5%;
    left: 4.5%;
}
.find-food-lang-zh-hant .food-row-1 .item-3 a {
    top: 92.5%;
    left: 6%;
}
.find-food-lang-zh-hant .food-row-2 .item-1 a {
    top: 68%;
    left: 52.5%;
}
.find-food-lang-zh-hant .food-row-2 .item-2 a {
    top: 76%;
    left: 53.5%;
}
.find-food-lang-zh-hant .food-row-2 .item-3 a {
    top: 87%;
    left: 5.5%;
}

.back-block {
    margin-top:-25px;
    margin-bottom:30px;
}

.back-block a {
    color: #625D59;
    display: inline-block;
    text-decoration: none;
}

.back-block a span:before {
    max-width: 52px;
    max-height: 52px;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    background: url(../images/back-btn.png) no-repeat center;
    background-color: #625D59;
    background-size: contain;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.custom-modal .modal-dialog {
    position: relative;
    margin:auto;
}

.modal.in {
    display: flex !important;
    align-items: center;
}

.custom-modal .modal-content {
    border: 0;
    border-top: 10px solid #F48221;
    border-radius: 0;
    -webkit-box-shadow: 0px 0 20px #808080;
    box-shadow: 0px 0 20px #808080;
    outline: 0;
    padding: 16px;
    margin: 35px auto;
}

.custom-modal.modal-text-popup .modal-content {
    border-top:0;
    padding: 40px;
}

.custom-modal .content-wrapper {
    display:flex;
    justify-content: space-between;
}

.custom-modal .thumbnails-wrapper {
    width:95px;
}

.custom-modal .thumbnail-selector {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-top:100%;
    margin-top: 7.5px;
    opacity: 0.6;
    position: relative;
}

.custom-modal .thumbnail-selector:first-child {
    margin-top:0;
}

.custom-modal .thumbnail-selector.active,
.custom-modal .thumbnail-selector:hover {
    opacity: 1;
}

.custom-modal .thumbnail-selector.active:after,
.custom-modal .thumbnail-selector:hover:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #F48221;
}

.custom-modal .full-image-wrapper {
    width:300px;
}

.custom-modal .single-image-wrapper {
    width:300px;
}

.custom-modal .full-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    display: none;
}

.custom-modal .single-image-wrapper .full-image,
.custom-modal .full-image.active {
    display: block;
}

.custom-modal h3 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.1;
}

.custom-modal .description {
    width:300px;
    height:300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.custom-modal .no-thumbs {
    width:400px;
}

.custom-modal .description.no-image {
    width:100%;
}

.custom-modal .prev-item,
.custom-modal .next-item {
    position:absolute;
    top:0%;
    width:38px;
    height:100%;
}

.custom-modal .prev-item {
    left:-38px;
    background: url(../images/left-arrow.png) center center no-repeat;
    background-size: contain;
}

.custom-modal .next-item {
    right:-38px;
    background: url(../images/right-arrow.png) center center no-repeat;
    background-size: contain;
}

.custom-modal .close-modal {
    position:absolute;
    top:0;
    right:-6px;
    width:35px;
    height:35px;
    background: url(../images/close-cross.png) center center no-repeat;
    background-size: contain;
    cursor: pointer;
}

.product-details {
    padding-top:20px;
    margin:0 0 30px 0;
}

.product-details .images {
    max-width: 280px;
    width: 28%;
    float:left;
}

.product-details .image {
    line-height: 1;
    margin:0 0 5px 0;
}

.product-details .zoom {
    text-align:right;
    margin: 0 0 10px 0;
}

.product-details .content {
    padding:0 0 0 32px;
    overflow: hidden;
}

.product-details .content h3 {
    color:#017858;
    font-weight: bold;
}

.more-products-wrapper {
    padding: 0 50px;
}

.more-products h3 {
    border-bottom: 2px solid #017858;
    color: #017858;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 4px;
}

.select-wrapper:after {
    color: #017858;
}

/* 
.navbar {
    margin-bottom: 30px;
}

.navbar .logo {
    height:50px;
    margin-top:0;
    margin-bottom:0;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
    border: 0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-weight: bold;
    font-family: Georgia, serif;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-default .navbar-collapse {
    border-color: transparent;
    background: #4B3529;
    margin-left: 0;
    margin-right: 0;
    border-radius:10px;
    margin-top: 20px;
}

.navbar-toggle {
    background:#fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background:#fff;
} */

.nav-custom {
    margin-top: 10px;
}

.nav-custom #block-socialmedialinksen,
.nav-custom #block-socialmedialinkszh-2 {
    display:none;
    padding: 16px 0;
    text-align: center;
}

.nav-custom #block-socialmedialinksen .share-buttons,
.nav-custom #block-socialmedialinkszh-2 .share-buttons {
    display: inline-block;
}

.dropdown-menu {
    font-size:16px;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #006045;
}

.dropdown-menu .dropdown-menu {
    top: -5px;
    left: 100%;
}

.dropdown-menu > li > a {
    padding: 7px 20px;
    color: #fff;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: transparent;
}

@media (min-width: 768px) {
    .nav-custom .navbar-nav {
        width:100%;
        text-align: center;
    }
    .nav-custom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
    .nav-custom .navbar-nav > li {
        display:inline-block;
        text-align:center;
        float: none;
    }
    .nav-custom .navbar-nav > li > a {
        color: #3E3E3E;
        min-width: 102px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 11px;
        padding-right: 11px;
    }
    .nav-custom .navbar-nav > li.active-trail > a {
        color: #F48221;
    }
    .nav-custom .nav > li:hover > a,
    .nav-custom .nav > li > a:hover,
    .nav-custom .nav > li > a:focus {
        background-color: #017858;
        color:#fff;
    }
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    /* .open > .dropdown-menu {
        display: none;
    } */
    .modal-dialog {
        max-width: 752px;
        width:752px;
        margin: 30px auto;
    }
    .form-input-wrapper-contact .form-group:last-child {
        margin-bottom:15px;
    }
    .form-input-wrapper-contact .form-item-suggestion textarea {
        height:192px;
    }
    .contact-number-wrapper {
        margin-left: -0.5em !important;
        margin-right: -0.5em !important;
        margin-bottom:0 !important;
    }
    #block-seven-eleven-main-menu > ul > li:last-child > ul > li.dropdown > ul   {
        right: 100%;
        left: auto;
    }
}

@media (min-width: 1024px) {
    .modal-text-popup .modal-dialog {
        width:80%;
        max-width:80%;
    }
}

.btn-default {
    border: 2px solid #F48221;
    color:#F48221;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    font-size:16px;
    padding: 6.4px 64px;
    max-width: 100%;
    white-space: normal;
}

.btn-default:hover,
.btn-default:active,
.btn-default.active,
.btn-default:focus,
.btn-default.focus,
.btn-default:active.focus,
.btn-default.active.focus,
.btn-default:active:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border: 2px solid #F48221;
    color:#fff;
    background: #F48221;
}

/* .btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    background: #e25b0d;
    outline: 5px auto #D04F04;
    outline-offset: -2px;
} */

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid #154F33;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}

.spinner-border {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 16;
    margin-left:-1rem;
    margin-top:-1rem;
    display:none;
}

.map-options-wrapper.loading .spinner-border {
    display: inline-block;
}

.spinner-border-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: #154F33;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner-grow .75s linear infinite;
  animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.webform-submission-form {
    max-width:1000px;
    padding: 30px;
    border: 5px solid #F48221;
    background:#fff;
    margin:0 auto;
}

.webform-submission-form.webform-submission-contact-form {
    margin-top:20px;
}

.webform-submission-form.webform-submission-franchise-seminar-application-fo-form {
    background: transparent;
    border:0;
    padding-top:0;
    padding-bottom:0;
}

.webform-confirmation__message {
    text-align: center;
}

.form-input-wrapper {
    flex-direction: column;
    max-width: 720px;
    margin:0 auto;
}

.form-input-wrapper-contact {
    max-width: 720px;
    margin:0 auto 30px;
}

label {
    font-weight: normal;
}

.form-control {
    font-size: 16px;
    border-radius: 0;
    background: #F2F2F2;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-required:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzAwNUQ0QSIgIGQ9Ik0wLDcuNTYybDEuMTE0LTMuNDM4YzIuNTY1LDAuOTA2LDQuNDMsMS42ODgsNS41OSwyLjM1QzYuMzk4LDMuNTUzLDYuMjM3LDEuNTQ0LDYuMjIsMC40NDdoMy41MTEgYy0wLjA1LDEuNTk3LTAuMjM0LDMuNi0wLjU1OCw2LjAwM2MxLjY2NC0wLjgzOCwzLjU2Ni0xLjYxMyw1LjcxNC0yLjMyNUwxNiw3LjU2MmMtMi4wNSwwLjY3OC00LjA2LDEuMTMxLTYuMDI4LDEuMzU2IGMwLjk4NCwwLjg1NiwyLjM3MiwyLjM4MSw0LjE2Niw0LjU3NWwtMi45MDYsMi4wNTljLTAuOTM1LTEuMjc0LTIuMDQxLTMuMDA5LTMuMzE2LTUuMjA2Yy0xLjE5NCwyLjI3NS0yLjI0NCw0LjAxMy0zLjE0Nyw1LjIwNiBsLTIuODU2LTIuMDU5YzEuODcyLTIuMzA3LDMuMjExLTMuODMyLDQuMDE3LTQuNTc1QzMuODQ5LDguNTE2LDEuODcyLDguMDYyLDAsNy41NjIiLz48L3N2Zz4=);
    background-size: 8px 8px;
    content: "";
    display: inline-block;
    vertical-align: super;
    line-height: 1;
    height: 8px;
    width: 8px;
    margin-left: 5px;
}

.required-icon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzAwNUQ0QSIgIGQ9Ik0wLDcuNTYybDEuMTE0LTMuNDM4YzIuNTY1LDAuOTA2LDQuNDMsMS42ODgsNS41OSwyLjM1QzYuMzk4LDMuNTUzLDYuMjM3LDEuNTQ0LDYuMjIsMC40NDdoMy41MTEgYy0wLjA1LDEuNTk3LTAuMjM0LDMuNi0wLjU1OCw2LjAwM2MxLjY2NC0wLjgzOCwzLjU2Ni0xLjYxMyw1LjcxNC0yLjMyNUwxNiw3LjU2MmMtMi4wNSwwLjY3OC00LjA2LDEuMTMxLTYuMDI4LDEuMzU2IGMwLjk4NCwwLjg1NiwyLjM3MiwyLjM4MSw0LjE2Niw0LjU3NWwtMi45MDYsMi4wNTljLTAuOTM1LTEuMjc0LTIuMDQxLTMuMDA5LTMuMzE2LTUuMjA2Yy0xLjE5NCwyLjI3NS0yLjI0NCw0LjAxMy0zLjE0Nyw1LjIwNiBsLTIuODU2LTIuMDU5YzEuODcyLTIuMzA3LDMuMjExLTMuODMyLDQuMDE3LTQuNTc1QzMuODQ5LDguNTE2LDEuODcyLDguMDYyLDAsNy41NjIiLz48L3N2Zz4=);
    background-size: 8px 8px;
    line-height: 1;
    height: 8px;
    width: 8px;
    overflow:hidden;
    text-indent: -9999px;
    display: inline-block;
}

.banner-image {
    border-bottom: 5px solid #F48221;
    margin-bottom: 25px;
}

.banner-image-franchise-form {
    border-bottom: 0;
    background: #ffe4ca;
    margin-bottom:40px;
}

.banner-with-title {
    margin-bottom: 25px;
}

.banner-with-title .container-banner {
    height:240px;
    text-align:center;
    display:flex;
    align-items: center;
    justify-content: center;
}

.banner-with-title h1 {
    padding:0;
    margin:0;
    color:#fff; 
    font-size:64px;
    font-weight: normal;
}

.join-us-banner {
    background: #F48221;
    color: #fff;
    max-width: none;
    margin-left: -50vw;
    margin-top:30px;
    padding:8px 0;
}

.join-us-banner h2 {
    color:#fff;
    font-weight: bold;
    margin:0;
    padding: 0;
    font-size: 29px;
}

.block-text-image,
.block-image-text {
    background:#fff;
    padding:32px;
    max-width:1100px;
    margin:0 auto 32px;
    display:flex;
    justify-content: space-between;
}

.block-text-text {
    max-width:1080px;
    margin:0 auto 32px;
    display:flex;
    justify-content: space-between;
}

.block-text-image .left {
    width: 49.5%;
    padding-right:32px;
}

.block-text-image .right {
    max-width: 465px;
    width: 50.5%;
}

.block-image-text .left {
    max-width: 465px;
    width: 50.5%;
}

.block-image-text .right {
    width: 49.5%;
    padding-left:32px;
}


.block-text-text .left {
    width: 50%;
    padding-right:20px;
}

.block-text-text .right {
    width: 50%;
    padding-left:20px;
}

.block-text-image .right img,
.block-image-text .right img,
.block-text-image .left img,
.block-image-text .left img {
    width:100%;
}

.block-3-column-text {
    display: flex;
    flex-direction: row;
    margin-bottom: 60px;
    padding-top: 20px;
}

.block-3-column-text .column1,
.block-3-column-text .column2,
.block-3-column-text .column3 {
    width:33.3333333333%;
    padding: 0 15px;
    position: relative;
}

.block-3-column-text .column2:before,
.block-3-column-text .column3:before {
    content: '';
    width: 1px;
    height: 400px;
    display: block;
    position: absolute;
    top: 5%;
    left: 0;
    background-color: #e1e1e1;
}

.block-3-column-text img {
    margin-bottom:15px;
}

.block-3-column-text img.hiring-img {
    max-width: 60%;
}

body.page-node-32 .block-3-column-text .column1,
body.page-node-32 .block-3-column-text .column2,
body.page-node-32 .block-3-column-text .column3 {
    padding-bottom:40px;
}

body.page-node-32 .block-3-column-text .column1 .btn,
body.page-node-32 .block-3-column-text .column2 .btn,
body.page-node-32 .block-3-column-text .column3 .btn {
    position:absolute;
    bottom:0;
    left:50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding-left:20px;
    padding-right:20px;
}

.franchise-menu {
    color:#CDCCCA;
    background:#F48221;
    list-style: none;
    padding:0 10px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top:60px;
}

.franchise-menu li {

}

.franchise-menu li a {
    color:#CDCCCA;
    text-decoration: none;
    padding:15px;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.franchise-menu li a:before {
    content: '';
    width: 65px;
    height: 40px;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

.franchise-menu li:nth-child(1) a:before {
    background: url(../images/tab-join-us.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li.active:nth-child(1) a:before,
.franchise-menu li:hover:nth-child(1) a:before {
    background: url(../images/tab-join-us-hover.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li:nth-child(2) a:before {
    background: url(../images/tab-join-us-detail.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li.active:nth-child(2) a:before,
.franchise-menu li:hover:nth-child(2) a:before {
    background: url(../images/tab-join-us-detail-hover.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li:nth-child(3) a:before {
    background: url(../images/tab-service-detail.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li.active:nth-child(3) a:before,
.franchise-menu li:hover:nth-child(3) a:before {
    background: url(../images/tab-service-detail-hover.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li:nth-child(4) a:before {
    background: url(../images/tab-faqs.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li.active:nth-child(4) a:before,
.franchise-menu li:hover:nth-child(4) a:before {
    background: url(../images/tab-faqs-hover.png) no-repeat center;
    background-size: contain;
}

.franchise-menu li a:hover {
    color:#fff;
}

.franchise-menu li.active a {
    color:#fff;
}

.job-info {
    margin: 0 0 40px 0;
}

.job-info .tab-selection {
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
}

.job-info .tab-selection li {
    list-style: none;
    padding:0;
    margin:0;
    cursor: pointer;
    width:33.3333333333%;
    background:#808080;
    text-align: center;
    color:#fff;
    font-size:22.4px;
    padding: 11px 0;
    position: relative;
}

.job-info .tab-selection li:nth-child(2):before,
.job-info .tab-selection li:nth-child(3):before {
    content: '';
    width: 1px;
    height: 60%;
    display: block;
    position: absolute;
    top: 20%;
    left: 0%;
    background-color: white;
}

.job-info .tab-selection li.active:before {
    display:none;
}

.job-info .tab-selection li:nth-child(1).active:before,
.job-info .tab-selection li:nth-child(2).active:before {
    content: '';
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: -1px;
    left: initial;
    background-color: #017858;
    z-index: 1;
}

.job-info .tab-selection li:hover {
    background: #909090;
}

.job-info .tab-selection li.active {
    background: #017858;
}

.job-info .tab-selection li.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -12px;
    border: 12px solid white;
    border-color: #017858 transparent transparent transparent;
    z-index: 1;
}

.job-info .mobile-tab-selector {
    padding:0;
    margin:0;
    cursor: pointer;
    background:#808080;
    text-align: center;
    color:#fff;
    font-size:22.4px;
    padding: 11px 0;
    position: relative;
    border-top: solid 1px white;
}

.job-info .mobile-tab-selector.active {
    background: #017858;
    color:#fff;
}

.job-info .mobile-tab-selector.active:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -12px;
    border: 12px solid white;
    border-color: #017858 transparent transparent transparent;
    z-index: 1;
}

.job-info .tabs .tab-content {
    display:none;
    background: #fff;
}

.job-info .tabs .tab-content.active {
    display:block;
}

.job-info .tabs .tab-store .inner {
    display: flex;
}

.job-info .tabs .tab-store .left {
    width: 55%;
    padding: 20px 10px;
}

.job-info .tabs .tab-store .left h3 {
    text-align: center;
}

.job-info .tabs .tab-store .right {
    width: 45%;
    padding:20px 78px;
    position: relative;
}

.job-info .tabs .tab-store .right:before {
    content: '';
    width: 2px;
    display: block;
    position: absolute;
    top: 25px;
    left:39px;
    bottom:25px;
    background-color: #e1e1e1;
}

.job-info .tabs .tab-store .right .btn-close {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    top: 10px;
    background: url(../images/m-close-btn.png) no-repeat center;
    background-color: #625D59;
    background-size: 20px 20px;
    cursor: pointer;
    display: none;
}

.hiring-path {
    display: flex;
    flex-direction: column;
}

.hiring-path .job-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.hiring-path .job-row img {
    height:39px;
}

.hiring-path .job-row span {
    border: 2px solid #017858;
    color: #017858;
    padding: 10px 15px;
    display:flex;
    font-size: 20px;
    text-align: center;
    min-width: 32%;
    max-width: 32%;
    cursor: pointer;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
}

.hiring-path .job-row span:nth-child(2) {
    margin-left:25px;
}

.hiring-path .job-row span:nth-child(3) {
    margin-left: 25px;
}

.hiring-path .job-row span:hover {
    color: #fff;
    background: #017858;
}

.hiring-path .job-row span.active {
    background:#F48221;
    border: 2px solid #F48221;
    color: #fff;
}

.hiring-path-tab {
    display:none;
    padding: 15px 0 0 0;
    font-size: 14.4px;
}

.hiring-path-tab.active {
    display:block;
}

.job-info .tabs .tab-distribution .inner {
    display: flex;
}

.job-info .tabs .tab-distribution .left {
    width: 50%;
    padding: 20px 30px;
    font-size: 14.4px;
}

.job-info .tabs .tab-distribution .left table tr td {
    padding-right: 10px;
    vertical-align: top;
}

.job-info .tabs .tab-distribution .right {
    width: 50%;
    padding:20px 78px;
    position: relative;
}

.job-info .tabs .tab-distribution .right:before {
    content: '';
    width: 2px;
    display: block;
    position: absolute;
    top: 25px;
    left:39px;
    bottom:25px;
    background-color: #e1e1e1;
}

.job-info .tabs .tab-distribution .left h5 {
    color: #F48221;
    font-size: 19.2px;
}



.job-info .tabs .tab-support-centre .inner {
    display: flex;
}

.job-info .tabs .tab-support-centre .left {
    width: 55%;
    padding: 20px 0px 20px 30px;
    font-size: 14.4px;
}

.job-info .tabs .tab-support-centre .right {
    width: 45%;
    padding:20px 78px;
    position: relative;
    font-size: 14.4px;
}

.job-info .tabs .tab-support-centre .right:before {
    content: '';
    width: 2px;
    display: block;
    position: absolute;
    top: 25px;
    left:39px;
    bottom:25px;
    background-color: #e1e1e1;
}

.support-centre-tab {
    display:none;
    padding: 15px 0 0 0;
    font-size: 14.4px;
}

.support-centre-tab.active {
    display:block;
}

.support-centre-list {
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
    margin:0 0 10px 0;
    padding:0;
}

.support-centre-list li {
    cursor: pointer;
    width:33.3333333333%;
    margin:0 0 10px 0;
    padding:0 5px 0 0;
    list-style: inside;
    float: left;
}

.support-centre-list li span {
    display: inline-block;
    vertical-align: top;
    width: 85%;
}

.support-centre-list li.active {
    color: #F48221;
}

#block-globalwebsitesen .field ul,
#block-globalwebsiteszh .field ul {
    display: flex;
    list-style: none;
    padding:27px 0 10px 0;
    margin:0;
    flex-wrap: wrap;
}

#block-globalwebsitesen .field ul {
    background: url(../images/international-network-en.png) top left no-repeat;
    background-size: 298px 17px;
}

#block-globalwebsiteszh .field ul {
    background: url(../images/international-network-zh.png) top left no-repeat;
    background-size: 180px 17px;
}

#block-globalwebsitesen ul li,
#block-globalwebsiteszh ul li {
    list-style: none;
    padding:0;
    margin:6.4px 0;
    width: 14.28%;
    /* margin-right: 4%; */
    font-size:12.8px;
    color: #017858;
}

#block-globalwebsitesen ul li a,
#block-globalwebsiteszh ul li a {
    color: #017858;
    text-decoration: none;
}

#block-globalwebsitesen ul li a:hover,
#block-globalwebsiteszh ul li a:hover {
    text-decoration: none;
}

.view-stores .views-infinite-scroll-content-wrapper {
    display:flex;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 0 auto;
}

.view-stores .list-section {
    display:flex;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 0 auto;
}

.view-stores .map-item {
    width:33.3333333333%;
    display: flex;
    font-size: 14.4px;
}

.geolocation-location {
    display:none !important;
}

/* .gm-style .gm-style-iw-c {
    max-height: 400px !important;
} */

.gm-style .gm-style-iw-c {
    border-radius: 0 !important;
}

.gm-style .gm-style-iw-d {
    max-height: 400px !important;
}

.view-stores .map-item .inner {
    margin:16px;
    padding:16px 16px 6px;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.gm-style-iw-d .map-item {
    width:100% !important;
    font-family: Arial, Helvetica, sans-serif;
}

.gm-style-iw-d .map-item .inner {
    margin:0;
    padding:0;
    box-shadow: none;
}

.gm-style-iw-d .services-wrapper ul {
    padding: 15px 0 0 0 !important;
    border-top: 1px solid #BFBFBF;
}

.gm-style-iw-d .map-item h4.map-service-heading {
    display: none;
}

.gm-style-iw.gm-style-iw-c {
    max-height: unset !important;
}

.view-stores .map-item h3 {
    color: #017858;
    font-size: 19.2px;
    margin:0 0 0 0;
    font-weight: bold;
}

.view-stores .map-item h4 {
    font-size:12.8px;
    color: #F48221;
    margin:0 0 0 0;
    padding:0;
}

.view-stores .map-item h4.map-service-heading {
    border-bottom: 1px solid #BFBFBF;
    padding-bottom: 3px;
    margin:0 0 10px 0;
}

.view-stores .map-item .address,
.view-stores .map-item .hours,
.view-stores .map-item .jobs {
    margin: 0 0 15px 0;
}

.view-stores .map-item .hours,
.view-stores .map-item .jobs {
    font-size:12.8px;
}

.view-stores .map-item .jobs {
    display:flex;
    justify-content: space-between;
}

.view-stores .map-item .jobs .btn {
    font-size:12.8px;
    padding-left:30px;
    padding-right:30px;
}

.view-stores .services-wrapper ul {
    list-style: none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap: wrap;
}

.view-stores .services-wrapper ul li {
    list-style: none;
    margin: 0 20px 10px 0;
    padding:0;
    /* width:49px;
    height:49px; */
    width: 3.2em;
    height: 3.2em;
    overflow: hidden;
    text-indent: -9999px;
    opacity: 0.3;
}

.view-stores .services-wrapper ul li.active {
    opacity: 1;
}

.view-stores .services-wrapper ul li.service-hotshot {
    background: url(../images/icon-hotshot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-dailycafe {
    background: url(../images/icon-7cafe.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-gulp {
    background: url(../images/icon-gulp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-slurpee {
    background: url(../images/icon-slurpee.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-7wifi {
    background: url(../images/icon-wifi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-sfexpress {
    background: url(../images/icon-sfexpress.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-skyphoto {
    background: url(../images/icon-skyphoto.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.view-stores .services-wrapper ul li.service-icecream {
    background: url(../images/icon-icecream.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mobile-tabs-switch {
    display:none;
}

.map-options-wrapper {
    position: relative;
}

.map-options-wrapper.loading:after {
    content: ' ';
    position: absolute;
    z-index: 15;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
    display:flex;
}

.map-options {
    background: #017858;
    margin-bottom: 0;
    color: #fff;
    padding: 15px 0;
    font-size: 14.4px;
}

.map-options .map-options-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
}

.map-options .selector-map {
    display:flex;
    width:100%;
    justify-content: flex-start;
    align-items: center;
}

.map-options .map-link,
.map-options .category-link {
    cursor: pointer;
    color:#fff;
    position: relative;
    padding:0 0 0 11px;
    margin-right: 11px;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.map-options .map-link:focus,
.map-options .category-link:focus {
    outline:none;
}

.map-options .map-link:last-child,
.map-options .category-link:last-child {
    margin-right: 0;
}

.map-options .map-link:before,
.map-options .category-link:before {
    content: '';
    position: absolute;
    margin-top:-5px;
    top: 50%;
    left: 0;
    border: 5px solid white;
    border-color: transparent transparent transparent white;
}

.map-options .map-link.active,
.map-options .map-link:hover,
.map-options .category-link.active,
.map-options .category-link:hover {
    color: #F6C231;
}

.map-options .map-link.active:before,
.map-options .map-link:hover:before,
.map-options .category-link.active:before,
.map-options .category-link:hover:before {
    border: 5px solid #F6C231;
    border-color: transparent transparent transparent #F6C231;
}

.map-options .title {
    font-weight: bold;
    margin-right:30px;
}

.map-options .title span {
    margin-right:15px;
}

.map-options .selector-district {
    display: flex;
    width:600px;
    justify-content: flex-end;
    align-items: center;
}

.map-options .selector-district .select-wrapper {
    width:200px;
}

.gm-style img[src*="/themes/custom/seven_eleven/images/mapmarker.png"] {
    width:40px !important;
    height:45px !important;
}

/* from modules/contrib/geolocation/css/geolocation-map.css */

.geolocation-map-container * {
    box-sizing: unset;
}

.geolocation-map-control {
    margin: 1em 0 0 1em;
}

.geolocation-map-control button {
    color: #fff;
    cursor: pointer;
    border: none;
    z-index: 2;
    font-size: 0;
}

.geolocation-map-control button {
    height: 32px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
    border-radius: 2px;
}

.geolocation-map-control button::before {
    background-size: contain;
    height: 18px;
    width: 18px;
    content: "";
    display: block;
    margin: 0 auto;
}

.geolocation-map-control button.locate::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcVCg45w2bqzwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAHjSURBVEjHxdY7aFZBEAXg75qIhTEaBU2tpBC7IBgfTSoxQiy0EcFCsRKfRcBCopWSgAgWNmIjdlaiSECwUMHGRtRGErSSCPGBIKKRscj+sFnun9xA0APL3T27s7PMnJ29IkLDNhgRUxExGRH9Te1WaI416VthbVOjKiIWml+Ng9iLbehO/Be8wkPcx6+lOujAYZxDzyKH/IgreNDUwUpcxz5Lw+3k6E9OljmoMFaz+Swms/G7ciMcw6XSa+ngKA4U3B3sxI2Mu4o9KQc5jmConYPuFPMcIxjFTE1IpnEqhTPHhZTDOWSaPZF03mqjhaZ7ImJ3al0ZX0XEzcJ2f2s+T/I99Kf+b+zA14YJ7sNENn6Ek9CZErou6byF99iFwDN8b7Pxegyk/gw2pP72JPPpKiKmFjndcTxpMzdck4MFVbTsqCJiIGX9FlYl/m26NFJJWChEW1N/HL3Z7R7Bz068SOSbLMl9abxYkj/jeVrfm/EvEz8vRI+LcnGm5rRDqXUVt/98sXai7h5sjIjXhZ4PZfPDGT+Y8acLm6cR0VH3HnyqUcQYLmfyy7EplY+zBT+v4JXVtMK1mno0iw/YkhW7zfNKwhzu4uI/Ldf/5cFZ1ifTEv4q2qlo2f4qfrTOhG9Njf4C0EWk9x5z6KYAAAAASUVORK5CYII=);
}

.geolocation-map-control.control_locate {
    position: absolute;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
    margin-bottom: 15px;
}

.geolocation-map-control button.search,
.geolocation-map-control button.locate {
    background: #017858;
}

.service-options {
    background: #fff;
    border-bottom: 5px solid #F48221;
    margin-bottom: 15px;
    color: #017858;
    padding: 8px 0;
    font-size: 14.4px;
}

.service-options .service-options-inner {
    display: flex;
    padding: 0 30px;
    align-items: center;
}

.service-options .title {
    font-weight: bold;
    margin-right:40px;
}

.service-options ul {
    list-style: none;
    margin:0;
    padding:0;
    display: flex;
}

.service-options ul li {
    list-style: none;
    margin:0;
    padding:0 0 0 12px;
    cursor: pointer;
    display:block;
    position: relative;
    margin:0 58px 0 0;
    opacity: 0.3;
}

.service-options ul li:hover {
    opacity: 0.6;
}

.service-options ul li.active {
    opacity:1;
}

.service-options ul li span {
    display:block;
    text-indent: -9999px;
    width:36px;
    height:36px;
    cursor: pointer;
}

.service-options ul li:last-child {
    margin-right:0;
}

.service-options ul li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top:-5px;
    border: 5px solid white;
    border-color: transparent transparent transparent #625D59;
}

.service-options ul li:hover:before,
.service-options ul li.active:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top:-5px;
    border: 5px solid white;
    border-color: transparent transparent transparent #F6C231;
}

.service-options ul li.service-hotshot span {
    background: url(../images/icon-hotshot.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-dailycafe span {
    background: url(../images/icon-7cafe.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-gulp span {
    background: url(../images/icon-gulp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-slurpee span {
    background: url(../images/icon-slurpee.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-7wifi span {
    background: url(../images/icon-wifi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-sfexpress span {
    background: url(../images/icon-sfexpress.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-skyphoto span {
    background: url(../images/icon-skyphoto.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.service-options ul li.service-icecream span {
    background: url(../images/icon-icecream.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#views-exposed-form-stores-page-1 {
    display:none;
}

.footer {
    border-top:0;
    color: #017858;
    font-size:13px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.footer .region-footer {
    display:flex;
}

.footer #block-copyrightmessage {
    width:60%;
}

.footer #block-seven-eleven-footer {
    width:40%;
    display: flex;
    justify-content: flex-end;
}

.footer #block-seven-eleven-footer ul {
    list-style: none;
    margin:0;
    padding:0;
    text-align: right;
}

.footer #block-seven-eleven-footer ul li {
    list-style: none;
    margin:0;
    padding:0;
    display:inline-block;
    border-right: solid 1px #017858;
    padding:0 7px;
    float:left;
}

.footer #block-seven-eleven-footer ul li:first-child {
    padding-left:0;
}

.footer #block-seven-eleven-footer ul li:last-child {
    border-right:0;
    padding-right:0;
}

.footer #block-seven-eleven-footer ul li a {
    color: #017858;
    text-decoration: none;
}

.mobile-only {
    display: none;
}

body.page-node-27 .main-container ol {
    list-style: none;
}

@media (max-width: 1180px) {
    .homepage-nav {
        background: #017858;
        border-bottom: 0;
        padding: 0;
        font-size: 16px;
    }
    .homepage-nav .selector-inner {
        flex-direction: column;
        padding:0;
    }
    .homepage-nav .selector-category {
        padding: 16px 20px;
        justify-content: space-between;
    }
    .homepage-nav .selector-map {
        justify-content: flex-start;
        padding: 16px 20px;
        justify-content: space-between;
        background: #F48221;
    }
    .map-options {
        background: #fff;
        padding: 0;
        font-size: 16px;
    }
    .map-options .map-options-inner {
        padding: 0;
        flex-direction: column;
    }
    .map-options .selector-map {
        background:#017858;
        padding:16px;
        justify-content: space-between;
    }
    .map-options .selector-district {
        width: 100%;
        background: #F48221;
        justify-content: flex-start;
        padding:16px;
    }
    .map-options .title span {
        margin-right: 0;
    }
    .service-options {
        font-size: 16px;
    }
    .service-options .service-options-inner {
        padding: 0 16px;
    }
}

@media (max-width: 1130px) {
    .nav-custom .navbar-nav > li > a {
        font-size: 12.6px;
        min-width: auto;
        padding-left: 5px;
        padding-right: 5px;
    }
    .dropdown-menu > li > a {
        font-size: 12.6px;
        padding: 7px 10px;
    }
}

@media (max-width: 1050px) {
    .header-logo a {
       /* width:64px; */
     width:150px; 
    }
    .footer {
        font-size:11px;
    }
    .banner-with-title h1 {
        font-size:56px;
    }
    .franchise-menu {
        font-size: 14px;
    }
    #milestones .years .year {
        font-size: 14px;
    }
    #milestones .years .year.active {
        font-size: 18px;
    }
    #milestones .years .year {
        margin: 0 18px;
    }
    .find-food-block a {
        font-size:12.6px;
    }
    .job-info .tab-selection li {
        font-size:19.6px;
    }
    .hiring-path-tab,
    .job-info .tabs .tab-distribution .left,
    .job-info .tabs .tab-support-centre .left,
    .job-info .tabs .tab-support-centre .right,
    .support-centre-tab {
        font-size: 12.6px;
    }
    .hiring-path .job-row span {
        font-size: 18.2px;
    }
    .map-options,
    .service-options {
        font-size: 14px;
    }
    .service-options .title {
        margin-right: 25px;
    }
    .service-options ul li {
        margin: 0 3.5vw 0 0;
    }
    .view-stores .services-wrapper ul li {
        width: 2.9em;
        height: 2.9em;
    }
}

@media (max-width: 840px) {
    .view-stores .map-item {
        width: 50%;
    }
    .view-stores .services-wrapper ul li {
        width: 3.3em;
        height: 3.3em;
    }
}

@media (max-width: 840px) {
    .nav-custom .navbar-nav > li > a {
        font-size: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav-custom .caret {
        margin-left: 1px;
        border-top: 2px dashed;
        border-top: 2px solid \9;
        border-right: 2px solid transparent;
        border-left: 2px solid transparent;
    }
}

@media (max-width: 840px) {
    .footer .region-footer {
        flex-direction: column;
    }
    .footer #block-copyrightmessage {
        width:100%;
        margin-bottom:10px;
    }
    .footer #block-seven-eleven-footer {
        width:100%;
        justify-content: flex-start;
    }
    #milestones .years .year {
        margin: 0 14px;
    }
}

@media (max-width: 810px) {
    .box-list.more-products-list ul li {
        width:33.3333333333%;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    .img-sm-35 {
        max-width: 35%;
    }
    .modal-dialog {
        max-width: 434px;
        width: 434px;
    }
    .custom-modal .close-modal {
        position: absolute;
        top: -3px;
        right:13px;
    }

    .custom-modal .modal-content {
        margin: 30px 20px;
    }

    .custom-modal.modal-text-popup .modal-content {
        padding: 16px;
    }

    .custom-modal .content-wrapper {
        flex-wrap:wrap;
    }

    .custom-modal .single-image-wrapper {
        width: 100%;
    }

    .custom-modal .thumbnails-wrapper {
        width: calc(25% - 5px);
    }

    .custom-modal .full-image-wrapper {
        width: calc(75% - 5px);
    }

    .custom-modal .full-image {
        padding-top: 70%;
    }

    .custom-modal .description {
        width:100%;
        margin-top:20px;
        height:auto;
    }
    .custom-modal .prev-item,
    .custom-modal .next-item {
        position:absolute;
        top:0%;
        width:20px;
        height:100%;
    }
    .custom-modal .prev-item {
        left:0;
    }
    .custom-modal .next-item {
        right:0;
    }
    .banner-with-title h1 {
        font-size:32px;
    }
    .banner-with-title .container-banner {
        height: 120px;
    }
    .franchise-menu {
        font-size:12px;
    }
    .franchise-menu li a {
        flex-direction: column;
        padding: 10px 20px;
        text-align: center;
    }
    .franchise-menu li a:before {
        width: 35px;
        height: 20px;
        display: block;
        margin: auto auto 7px auto;
    }
    #milestones {
        flex-direction: column;
        background: url(../images/award.png) right 16px top 126px no-repeat;
        background-size: 65px 65px;
    }
    #milestones .milestone-content-wrapper {
        padding-right: 0;
    }
    #milestones .milestone-content {
        padding:0 40px;
    }
    #milestones .years:before {
        right: -6px;
    }
    #milestones .years:after {
        margin-top: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid #f68122;
    }
    #milestones .years .year:nth-child(even),
    #milestones .years .year:nth-child(odd) {
        height: 90px;
    }
    #milestones .years .year:nth-child(even):before,
    #milestones .years .year:nth-child(odd):before {
        height: 22px;
    }
    #milestones .years {
        margin:0 0 30px 0;
    }
    #milestones .years:before {
        height: 4px;
        margin-top: -2px;
    }
    #milestones .years .year {
        margin: 0 5px;
        min-width: 22px;
    }
    #milestones .years .year:after {
        width:12px;
        height:12px;
        margin-left:-6px;
        margin-top:-6px;
        border: solid 2px #F48221;
    }
    #milestones .years .year.active:after {
        width:16px;
        height:16px;
        margin-left:-8px;
        margin-top:-8px;
        border: solid 2px #fff;
    }
    #milestones .years .year.active:nth-child(odd):before,
    #milestones .years .year.active:nth-child(even):before {
        height: 20px;;
    }
    #milestones .arrow-left {
        display:block;
    }

    #milestones .arrow-right {
        display:block;
    }
    .food-row-1,
    .food-row-2 {
        flex-direction: column;
        justify-content: space-between;
    }

    .food-row-1 {
        margin:0;
    }

    .food-row-1 .left,
    .food-row-2 .right {
        width:100%;
    }

    .food-row-1 .right,
    .food-row-2 .left {
        width:100%;
        margin:0 0 20px 0;
    }

    .food-row-1 .item-1,
    .food-row-1 .item-2,
    .food-row-2 .item-1,
    .food-row-2 .item-2 {
        margin:0 0 20px 0;
    }

    .food-row-1 .item-1 a {
        top: 76%;
        left: 61.5%;
    }
    .food-row-1 .item-2 a {
        top: 79%;
        left: 4%;
    }
    .food-row-1 .item-3 a {
        top: 91.5%;
        left: 4%;
    }
    .food-row-2 .item-1 a {
        top: 79%;
        left: 55%;
    }
    .food-row-2 .item-2 a {
        top: 81.5%;
        left: 56.5%;
    }
    .food-row-2 .item-3 a {
        top: 88.5%;
        left: 4%;
    }

    .find-food-lang-zh-hant .food-row-1 .item-1 a {
        top: 76%;
        left: 61.5%;
    }
    .find-food-lang-zh-hant .food-row-1 .item-2 a {
        top: 79%;
        left: 4%;
    }
    .find-food-lang-zh-hant .food-row-1 .item-3 a {
        top: 90%;
        left: 4.5%;
    }
    .find-food-lang-zh-hant .food-row-2 .item-1 a {
        top: 75%;
        left: 55%;
    }
    .find-food-lang-zh-hant .food-row-2 .item-2 a {
        top: 80%;
        left: 57%;
    }
    .find-food-lang-zh-hant .food-row-2 .item-3 a {
        top: 87%;
        left: 4%;
    }

    .block-3-column-text {
        flex-direction: column;
    }

    .block-3-column-text .column1,
    .block-3-column-text .column2,
    .block-3-column-text .column3 {
        width:100%;
        padding: 0;
    }

    .block-3-column-text .column1,
    .block-3-column-text .column2 {
        margin-bottom:40px;
    }
    
    .block-3-column-text img.hiring-img {
        width: 45%;
        max-width: 150px;
    }

    .block-3-column-text .column2:before,
    .block-3-column-text .column3:before {
        display: none
    }

    #block-globalwebsitesen ul li,
    #block-globalwebsiteszh ul li {
        width: 20%;
    }
    .hiring-path-tab,
    .job-info .tabs .tab-distribution .left,
    .job-info .tabs .tab-support-centre .left,
    .job-info .tabs .tab-support-centre .right,
    .support-centre-tab {
        font-size: 14.4px;
    }

    .job-info .tab-selection {
        display:none;
    }

    .job-info .tabs .tab-store .inner {
        flex-direction: column;
        position: relative;
    }
    .job-info .tabs .tab-store .left {
        width: auto;
        padding: 20px 15px;
    }
    .job-info .tabs .tab-store .right {
        width: 100%;
        padding: 20px 40px;
        position: absolute;
        background: #fff;
        height: 100%;
        overflow-y: auto;
        display:none;
    }
    .job-info .tabs .tab-store .right.active {
        display:block;
    }
    .job-info .tabs .tab-store .right:before {
        display: none;
    }
    .hiring-path .job-row span.active {
        background: transparent;
        border: 2px solid #017858;
        color: #017858;
    }
    .hiring-path .job-row span.active:hover {
        background: #017858;
        border: 2px solid #017858;
        color: #fff;
    }
    .job-info .tabs .tab-store .right .btn-close {
        display: block;
    }

    .job-info .tabs .tab-distribution .inner {
        flex-direction: column-reverse;
    }
    .job-info .tabs .tab-distribution .left {
        width: auto;
        padding: 0 30px 40px;
    }
    .job-info .tabs .tab-distribution .right {
        width: auto;
        padding: 40px 30px 20px;
    }
    .job-info .tabs .tab-distribution .right img {
        margin:0 auto;
    }
    .job-info .tabs .tab-distribution .right:before {
        display:none;
    }

    .job-info .tabs .tab-support-centre .inner {
        flex-direction: column;
    }
    .job-info .tabs .tab-support-centre .left {
        width: auto;
        padding: 40px 30px 0px 30px;
    }
    .job-info .tabs .tab-support-centre .right {
        width: auto;
        padding: 0px 30px 40px;
    }
    .job-info .tabs .tab-support-centre .right:before {
        display: none;
    }
    .job-info .tabs .tab-support-centre .hiring-image {
        margin:0 auto 20px auto;
    }

    .support-centre-list li {
        width:50%;
    }
}

@media (max-width: 767px) {
    body {
        padding-top:50px;
    }
    .header-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 20;
        background: url(../images/background.jpg);
    }
    .nav-custom {
        margin: 0;
        position: absolute;
        left:0;
        top: 50px;
        z-index: 5;
        background: url(../images/background.jpg);
        width: 100%;
    }
    .nav-custom .navbar-nav {
        border-top: solid 1px #625D59;
        border-bottom: solid 1px #625D59;
        margin-top:0;
        margin-bottom:0;
    }
    .nav-custom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .nav-custom .nav > li {
        border-top: 1px solid #C3C3C3;
    }
    .nav-custom .nav > li:first-child {
        border-top:0;
    }
    .nav-custom .nav > li > a {
        color:#3E3E3E;
        font-size:14.4px;
    }
    .navbar-nav .open .dropdown-menu {
        background-color: #F6F6F6;
    }
    .dropdown-menu > li > a {
        color:#3E3E3E;
        font-size:14.4px;
    }
    .nav-custom .nav > li.active-trail > a {
        background-color: transparent;
        color:#3E3E3E;
    }
    .nav-custom .nav > li > a:hover,
    .nav-custom .nav > li > a:focus {
        text-decoration: none;
        background-color: #625D59;
        color: #fff;
    }
    .dropdown-menu {
        padding:0;
    }
    .dropdown-menu .dropdown-menu {
        display:block;
        padding-left: 20px;
    }
    .dropdown-menu > li {
        border-top: 1px solid #ECECEC;
    }
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus,
    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
        color:#3E3E3E;
    }
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 8px 15px 8px 25px;
    }
    .container-main {
        padding: 0 10px;
    }
    .nav-custom .container-main {
        padding: 0;
    }
    /* .header-logo a {
        width:40px;
    } */
    #block-socialmedialinkszh,
    #block-socialmedialinks {
        display: none;
    }
    .nav-custom #block-socialmedialinksen,
    .nav-custom #block-socialmedialinkszh-2 {
        display:block;
    }
    .region-social-media {
        padding: 0;
    }
    .region-social-media .block-language-blocklanguage-interface ul li a {
        padding: 0 20px;
        font-size: 16px;
    }
    .region-social-media .block-language-blocklanguage-interface ul li a:before {
        content: '';
        border-style: solid;
        border-color: transparent;
        border-width: 6.4px;
        border-left-color: #3E3E3E;
        position: absolute;
        top: 18px;
        left: 6px;
        display: inline-block;
        vertical-align: middle;
    }
    .header-top-nav {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0;
    }
    .header-logo {
        padding: 5px 0 5px 0;
        margin-top: 0;
    }
    .header-logo a {
        /* width:64px; */
        width: 41px;
        height: 40px;
    }
    .region-social-media .block-language-blocklanguage-interface {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
        height: 50px;
    }
    .nav-custom .caret {
        margin-left: 2px;
        border-top: 4px dashed;
        border-top: 4px solid \9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .webform-submission-form .form-group:last-child {
        margin-bottom: 15px;
    }
    .webform-submission-form {
        padding: 16px;
    }
    .homepage-nav .selector-category {
        flex-direction: column;
    }
    .homepage-nav .selector-map {
        flex-direction: column;
    }
    .gm-style-iw-a {
        display:none !important;
    }
    .map-options .selector-map {
        display: none;
    }
    .map-options-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
    .service-options .title,
    .map-options .title {
        margin-right: 10px;
        font-weight: normal;
        font-size: 16px;
        line-height: 1.4;
        text-align: center;
    }
    .service-options .title {
        width: 100px;
    }
    .map-options .title {
        width: 80px;
    }
    .service-options ul {
        width: auto;
        overflow-y: scroll;
        /* position: relative; */
        padding: 0 30px 0 0;
    }
    .service-options ul li {
        margin:0 10px 0 0;
        padding:0;
    }
    .service-options ul li:before {
        display:none;
    }
    .service-options {
        border-bottom: 1px solid #625D59;
        margin-bottom: 0;
    }
    .map-options .selector-district {
        width: 100%;
        background: #fff;
        color: #017858;
        border-bottom: 1px solid #625D59;
        justify-content: center;
    }
    .view-stores .list-section {
        padding:8px 0 8px 0;
        height: 580px;
        overflow-y: scroll;
        position: absolute;
        top:0;
        left:0;
        display:none;
    }
    .view-stores .list-section.active {
        display: flex;
    }
    .view-stores .map-item {
        width: 100%;
    }
    .view-stores .map-item .inner {
        margin:8px 0;
    }
    .map-section {
        height:580px;
        position:absolute;
        top:0;
        display:none;
    }
    .map-section.active {
        display:block;
    }
    .map-section .geolocation-map-container {
        height: 580px !important;
    }
    .map-sections-wrapper, .map-sections-wrapper-new {
        padding-top:580px;
        position: relative;
    }
    .mobile-tabs-switch {
        display:flex;
        flex-direction: row;
    }
    .mobile-tabs-switch div {
        cursor: pointer;
        background: #625D59;
        width:50%;
        color: #fff;
        text-align: center;
        height:45px;
        line-height: 1;
        font-size: 19.2px;
    }
    .mobile-tabs-switch div span {
        padding-left: 35px;
        position: relative;
        height:45px;
        display:inline-flex;
        align-items: center;
        opacity: 0.4;
    }
    .mobile-tabs-switch div.map span:before {
        content: ' ';
        width: 24px;
        height: 27px;
        background-image: url(../images/map-icon.png);
        position: absolute;
        left: 0;
        background-size: cover;
    }
    .mobile-tabs-switch div.listing span {
        padding-left:40px;
    }
    .mobile-tabs-switch div.listing span:before {
        content: ' ';
        width: 29px;
        height: 18px;
        background-image: url(../images/listing-icon.png);
        position: absolute;
        left: 0;
        background-size: cover;
    }
    .mobile-tabs-switch div.active {
        background: #017858;
    }
    .mobile-tabs-switch div.active span {
        opacity: 1;
    }
    .mobile-location-wrapper {
        position: absolute;
        bottom: 1px;
        /* left: 0; */
        z-index: 10;
        color: #017858;
    }
    .mobile-location-wrapper .map-item .inner {
        margin: 0;
        box-shadow: none;
    }
    .mobile-location-wrapper .services-wrapper ul {
        padding: 15px 0 0 0 !important;
        border-top: 1px solid #BFBFBF;
    }

    .mobile-location-wrapper .map-item h4.map-service-heading {
        display: none;
    }
    .close-overlay {
        position: absolute;
        top: -32px;
        right:0;
        width:32px;
        height:32px;
        background: url(../images/m-close-btn.png) no-repeat center;
        background-color: #625D59;
        background-size: 20px 20px;
        cursor: pointer;
    }
    #block-seven-eleven-main-menu > ul > li:last-child > ul   {
        max-height: 185px;
        overflow: scroll;
    }
}

@media (max-width: 640px) {
    .block-text-image {
        flex-wrap: wrap-reverse;
    }
    .block-text-image .left {
        width: 100%;
        padding-right:0;
    }
    .block-text-image .right {
        max-width: 100%;
        width: 100%;
        margin:0 0 10px 0;
    }
    .block-image-text {
        flex-wrap: wrap;
    }
    .block-image-text .left {
        max-width: 100%;
        width: 100%;
        margin:0 0 10px 0;
    }
    .block-image-text .right {
        width: 100%;
        padding-left:0;
    }
    .block-text-text {
        flex-wrap: wrap;
    }
    .block-text-text .left {
        width: 100%;
        padding-right:0px;
    }
    .block-text-text .right {
        width: 100%;
        padding-left:0px;
    }
    .icon-list-item {
        flex-direction: column;
    }
    .icon-list-item .icon {
        width:100%;
        margin-right:0px;
        margin-bottom:15px;
    }
    .icon-list-item .icon img {
        margin:0 auto 0 auto;
    }
    .icon-list-item .content {
        width:100%;
    }
    .box-list ul li {
        width:50%;
    }
    .product-details .images {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 16px;
        float: none;
    }
    .product-details .content {
        padding:0;
    }
    .more-products-wrapper {
        padding: 0;
    }
    .box-list.more-products-list ul li {
        width:50%;
    }
}

@media (max-width: 540px) {
    .join-us-banner h2 {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    #milestones .years .year {
        margin: 0 0;
    }
}

@media (max-width: 490px) {
    #block-globalwebsitesen ul li,
    #block-globalwebsiteszh ul li {
        width: 25%;
        font-size:12px;
    }
}

@media (max-width: 480px) {
    .franchise-menu li a {
        padding: 10px 5px;
    }
}

@media (max-width: 460px) {
    .banner-with-title h1 {
        font-size:25.6px;
    }
    #milestones .milestone-content {
        padding:0 30px;
    }
    #milestones .years .year {
        margin: 0 0;
    }
    #milestones .years .year:nth-child(even):before,
    #milestones .years .year:nth-child(odd):before {
        margin-left: -0.5px;
        width: 1px;
    }
    #milestones .years .year span {
        position: absolute;
    }
    #milestones .years .year:nth-child(odd) span {
        top:0;
        left: 5.5px;
        margin-left: calc(-50%);
    }
    #milestones .years .year:nth-child(even) span {
        bottom:0;
        left: 5.5px;
        margin-left: calc(-50%);
    }
    #milestones .years .year.active:nth-child(odd) span {
        left: 0;
        top: -2px;
    }
    #milestones .years .year.active:nth-child(even) span {
        left: 0;
        bottom: -2px;
    }
    #milestones .years .year.active:nth-child(odd):before,
    #milestones .years .year.active:nth-child(even):before {
        height: 20px;;
    }
    #milestones .arrow-left,
    #milestones .arrow-right {
        width: 20px;
        height: 38px;
    }
    .box-list ul li .title {
        font-size:12.8px;
    }
    .homepage-nav {
        font-size: 12.8px;
    }
    .job-info .tabs .tab-store .right {
        padding: 20px 15px;
    }
    .hiring-path .job-row span {
        font-size: 16px;
    }
    .job-info .tabs .tab-support-centre .left {
        padding: 40px 15px 0px 15px;
    }
    .job-info .tabs .tab-support-centre .right {
        padding: 0px 15px 40px;
    }
    .job-info .tabs .tab-distribution .left {
        width: auto;
        padding: 0 15px 40px;
    }
    .job-info .tabs .tab-distribution .right {
        width: auto;
        padding: 40px 15px 20px;
    }
    .hiring-path .job-row img {
        height: 33px;
    }
    .hiring-path .job-row span {
        max-width: 44%;
    }
    .hiring-path .job-row span:nth-child(2),
    .hiring-path .job-row span:nth-child(3) {
        margin-left: 20px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1330px;
    }
}

@media (min-width: 1160px) {
    .container-inner {
        width:1050px
    }
}