/*--------------------------------
# Type / Elements
--------------------------------*/

 
.entry-content ul {
    list-style: none;
}
.entry-content ul li {
    position: relative;
}
.entry-content ul li:before {
    color: #00B5C6;
    content: '\2022';
    position: absolute;
    float: left;
    margin-left: -20px;
}
.entry-content ul ul li:before {
    content: '‑';
    color: #4e5157;
}
.entry-content p, .entry-content li {
    font-size: 1.125rem;
}
.entry-content blockquote p, .entry-content blockquote li {
    font-size: 2.375rem;
}

/*--------------------------------
# Links
--------------------------------*/

a {
    color: #4e5157;
}
a:visited {
    color: #4e5157;
}
a:hover, a:focus, a:active {
    color: #00B5C6;
    text-decoration: underline;
}
a:hover sup {
    text-decoration: none !important;
}
a:focus, div:focus, a:hover, a:active {
    outline: 0;
}
p a {
	border-bottom: 2px solid #4e5157;
    position: relative;
    text-decoration: none;
    transition: all .4s ease;
}
p a:hover {
    border-bottom: 2px solid #00B5C6;
    text-decoration: none;
}
.btn, button, input[type="button"], input[type="submit"], a.wp-block-button__link {
    background: none;
    border: 0;
    border-radius: 0;
    color: #fff;
    display: inline-block;
 
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    padding: .6em 1.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .4s ease;
    z-index: 1;
}
.field-wrap.submit-wrap {
    display: inline-block !important;
}
.field-wrap.submit-wrap .nf-field-element {
    display: inline-block !important;
    position: relative !important;
    z-index: 2 !important;
}
  
a.btn:visited {
    color: #fff;
}
a.btn:hover, a.wp-block-button__link:hover, a.btn:focus, a.btn:active {
    text-decoration: none;
}
@media (hover: hover) {
    .btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.wp-block-button__link:hover {
        color: #fff;
    }
    .btn:hover:before, button:hover:before, input[type="button"]:hover:before, input[type="submit"]:hover:before, .field-wrap.submit-wrap:hover:before, a.wp-block-button__link:hover:before {
        background-position: -95% 0;
    }
}
.entry-content a.btn {
    border: 0;
    color: #fff;
}
.entry-content a.btn:after {
    content: none;
    display: none;
}
button:focus, button:active {
    outline: none;
}

/*--------------------------------
# Header
--------------------------------*/

header#masthead {
    background: #fff;
    height: 92px;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: fixed;
    top: 0;
    transition: all .6s ease, width 0s;
    width: 100%;
    z-index: 99;
}
.logged-in header#masthead {
    top: 32px;
}
.masthead-content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    padding: 1rem 0;
    position: relative;
    width: 100%;
}
.head-part {
    position: relative;
    display: inline-block;
    z-index: 20;
}
.site-home-link {
    display: inline-block;
    line-height: 1em;
}
.site-branding img.logo-img {
    display: inline-block;
}

/*--------------------------------
# Menus
--------------------------------*/

.main-navigation {
    display: block;
    text-align: right;
}
.site-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}
.site-header li {
    display: inline-block;
    line-height: 1em;
    padding: 0 10px;
    position: relative;
}
.site-header li a {
    display: inline-block;
    font-family:"MuseoSansW01-Rounded500";
    font-weight: 400;
    text-decoration: none;
    transition: all .4s ease;
}
ul#primary-menu li a:hover, ul#primary-menu>li.active>a {
    color: #333;
    text-decoration: none;
}
.site-header ul.menu ul {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    left: -15px;
    opacity: 0;
    padding: 2em;
    position: absolute;
    text-align: left;
    top: 46px;
    transition: all .4s ease;
    visibility: hidden;
    z-index: 99;
}
.site-header ul.menu > li > ul {
    transform: translate(-10px, -10px);
}
.site-header ul.menu ul ul {
    box-shadow: none;
    border: 0;
    opacity: 1;
    padding: 0 0 0 1em;
    position: static;
    transform: none;
    visibility: inherit;
}
.site-header ul.menu ul a {
    font-size: 1rem;
    line-height: 16px;
    text-transform: none;
    padding-bottom: .5em;
    position: relative;
    width: 250px;
}
.site-header ul.menu ul ul a {
    font-size: .9375rem;
}
.site-header ul.menu ul a, .site-header ul.menu ul a:visited {
	color: #333;
}
ul#primary-menu ul a:hover {
    color: #00B5C6;
    transform: translateX(16px);
}
ul#primary-menu li.active>ul {
    transform: translate(0);
}
ul#primary-menu li.active>ul, ul#primary-menu li.focus>ul, ul#primary-menu ul li:hover>ul, ul#primary-menu ul li.focus>ul {
    opacity: 1;
    visibility: visible;
}
ul#primary-menu>li.menu-item-has-children.active a:active, ul#primary-menu>li.menu-item-has-children.active a:focus {
    text-decoration: none;
}
ul#primary-menu ul li {
    padding: 0 0 .75em;
}
ul#primary-menu ul li:last-of-type, ul#primary-menu ul li.menu-item-has-children li {
    padding: 0;
}
@media only screen and (min-width: 641px) {
    #primary-menu li:last-of-type {
        padding-right: 0;
    }
}
@media only screen and (max-width: 1280px) {
    .masthead-content {
        padding-left: 20px;
        padding-right: 20px;
    }
    .main-navigation {
        right: 20px;
    }
}

/*--------------------------------
# Content
--------------------------------*/

#content {
    min-height: 600px;
    padding-top: 92px;
}
#page {
    background: #fff;
    margin: 0 auto;
    max-width: 1800px;
	overflow-x: hidden;
    padding: 0;
	position: relative;
    width: 100%;
}
@media only screen and (min-width: 1801px) {
    #page {
        border-left: 1px solid #eceff2;
        border-right: 1px solid #eceff2;
    }
}

/*--------------------------------
# Close Button
--------------------------------*/

.close, .yt-close {
    background: #a3a4a5;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    height: 44px;
    position: absolute;
    right: -22px;
    top: -22px;
    transition: all .4s ease;
    width: 44px;
    z-index: 100;
}
.close:hover, .yt-close:hover {
    background: #404040;
}
.close:before, .close:after, .search-close:before, .search-close:after, .yt-close:before, .yt-close:after {
    background: #fff;
    bottom: 0;
    content: '';
    height: 4px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .4s ease;
    width: 60%;
}
.close:before, .search-close:before, .yt-close:before {
    transform: rotate(55deg) skewX(-35deg);
}
.close:after, .search-close:after, .yt-close:after {
    transform: rotate(-55deg) skewX(35deg);
}
@media only screen and (max-width: 640px) {
    .close, .yt-close {
        height: 32px;
        right: -16px;
        top: -16px;
        width: 32px;
    }
}

/*--------------------------------
# Forms
--------------------------------*/

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], textarea, select {
    color: #808080;
    border: 2px solid #fff;
    border-radius: 0;
    transition: all .4s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
    color: #808080;
    border: 2px solid #b91237;
}
textarea {
    padding-left: 3px;
    width: 100%;
}
label {
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 5px;
}
.ninja-forms-form-wrap label {
    font-weight: normal!important;
}
.ninja-forms-req-symbol, .nf-error-msg, .hs-form-required {
    color: #b91237 !important;
}
.nf-error-msg {
    font-size: .875em;
    font-style: italic;
}
.nf-error .ninja-forms-field {
    border: 2px solid #b91237 !important;
}
.nf-form-fields-required, .ninja-forms-required-items {
    display: none !important;
}
.nf-field-container, #ninja_forms_required_items, .hs-form-field {
    margin-bottom: 1rem !important;
}
.entry-content .nf-field-element ul li:before {
    content: '';
}
#nf-field-23-wrap li {
    text-align: left;
}
.label-above .nf-field-label {
    margin-bottom: 0 !important;
}
.nf-multi-cell .nf-cell {
    padding: 0 1em !important;
}
.field-wrap.submit-wrap {
    position: relative;
}
.field-wrap.submit-wrap:before {
    z-index: 1;
}
.field-wrap.submit-wrap input[type=button] {
    background: transparent;
}
.field-wrap.submit-wrap .nf-field-label, .field-wrap.submit-wrap .nf-error-wrap {
    display: none !important;
}
.nf-fu-fileinput-button {
    overflow: visible !important;
}
.form-contain h2 {
    color: #fff;
    text-align: center;
}
li.hs-form-checkbox, li.hs-form-radio {
    list-style: none;
}
li.hs-form-checkbox::before, li.hs-form-radio::before {
    content: none !important;
}

/*--------------------------------
# Booth
--------------------------------*/

.booth-main {
    background: url(../img/backdrop.jpg) center center / cover no-repeat;
    height: 100vh;
    /* height: calc(100vh - 92px); */
    overflow: hidden;
    text-align: center;
}
 
  .booth-main-shop {
    background: url(https://www.starbucks.com.cn/design-studio/images/SZCC_3.JPG) center center / cover no-repeat;
    height: 100vh;
    /* height: calc(100vh - 92px); */
    overflow: hidden;
    text-align: center;
}

 



@media only screen and (max-width: 1200px) {
    .booth-inside svg {
        height: auto;
    }
	
  
	
}




 @media only screen and (min-width: 960px) {
      	.booth-inside {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    transition: all .4s ease;
    width: 100%;
	 
}	  
	  
	.booth-inside img {
   
    max-height: calc(100vh - 252px);
    max-width: 100%;
   
	 
} 
	
    }
    @media only screen and (min-width: 1440px) {
        
		  	.booth-inside {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    transition: all .4s ease;
    width: 100%;
	 
}	  
	  
	.booth-inside img {
    
    max-height: calc(100vh - 252px);
    max-width: 100%;
    
	 
} 
		
    }
    @media only screen and (min-width: 2000px) {
         	.booth-inside {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    transition: all .4s ease;
    width: 100%;
	 
}	  
	  
	.booth-inside img {
    height: auto;
    max-height: calc(100vh - 252px);
    max-width: 100%;
    width: auto;
	 
} 
    }
    @media only screen and (max-device-width: 480px) {
        	.booth-inside {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    transition: all .4s ease;
    width: 100%;
	overflow-y: auto;
    overflow-x: hidden;
}	  
	  
	.booth-inside img {
   /* height: auto;
    width: auto;*/
    max-height: calc(100vh - 152px);
    max-width: 300%;
    
	 
} 
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }


.booth-img-secondary-contain, .booth-map {
    left: 0;
    margin: auto;
    max-width: 1200px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 7;
}
.booth-img-secondary {
    opacity: 0;
    transition: all .4s ease;
}
.booth-img-secondary-contain.video-gif-img {
    z-index: 3;
}
.booth-img-secondary.active, .booth-img-secondary.stay-active {
    opacity: 1;
}
.booth-map {
    z-index: 20;
}
.booth-overlay, .header-overlay {
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    left: 0;
    margin: auto;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .4s ease;
    visibility: hidden;
    z-index: 6;
}
.header-overlay {
    max-width: 1798px;
    z-index: 69;
}
.booth-overlay {
    bottom: -2000px;
    left: -100%;
    right: auto;
    width: 200vw;
}
body.booth-hover .booth-overlay, body.booth-hover .header-overlay {
    opacity: 1;
    visibility: visible;
}
#toolbar {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 20;
}
.toolbar-inside {
    align-items: center;
    display: flex;
    height: 120px;
    justify-content: center;
}
.toolbar-item, .mobile-toolbar-item {
    color: #808080;
    cursor: pointer;
    display: inline-block;
    
    font-size: 1.125em;
    height: 120px;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    transition: all .4s ease;
}
.toolbar-icon, .tool-text {
    display: block;
}
.toolbar-icon-svg path {
    transition: all .4s ease;
}
.toolbar-item:hover, .toolbar-item.active {
    background: #fff;
    color: #b91237;
    text-decoration: none;
}
.toolbar-item:hover .toolbar-icon-svg path, .toolbar-item.active .toolbar-icon-svg path {
    fill: #b91237;
}
.toolbar-below {
    padding: 0 0 10px;
    text-align: center;
}
.toolbar-below a, .mobile-below a {
    color: #808080;
    font-size: .875rem;
    font-style: italic;
}
.lightbox {
    align-items: center;
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    margin: auto;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all .4s ease;
    visibility: hidden;
    z-index: 151;
}
.lightbox-inside {
    background: #fff;
    max-height: 85vh;
    max-width: 800px;
    padding: 20px;
    position: relative;
    transition: all .4s ease;
    width: 85%;
}
.video-lightbox .lightbox-inside {
    height: 480px;
    max-width: 854px;
    padding: 0;
}
.lightbox.form-box .lightbox-inside {
    max-width: 400px;
    padding: 0;
}
.coll-single-lightbox, .video-lightbox {
    z-index: 160;
}
.lightbox.active {
    opacity: 1;
    visibility: visible;
}
.library-row {
    max-height: 85vh;
    max-height: calc(85vh - 95px);
    overflow-y: scroll;
}
.lightbox.form-box .form-contain {
    background: #00b5c6;
    color: #fff;
    max-height: 80vh;
    overflow-y: scroll;
    padding: 20px;
}
.coll-single-lightbox .lightbox-inside {
    padding: 0;
    max-width: 854px;
    max-height: 90vh;
}
#about-box .lightbox-inside {
    padding: 0;
}
.about-copy {
    max-height: 80vh;
    overflow: scroll;
    padding: 20px;
}
.single-coll-inside {
    height: 90vh;
    overflow-y: scroll;
    padding: 20px;
}
.single-coll-inside iframe {
    height: 90vh;
    height: calc(90vh - 40px);
}
a.coll-item {
    border: 0 !important;
    color: #808080;
    display: block;
    min-height: 310px;
    padding: 10px 0 0;
    text-align: center;
    text-decoration: none;
}
a.coll-item:hover {
    border: 0 !important;
    color: #808080;
    text-decoration: none;
}
.coll-item img {
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);
    margin: 0 0 8px;
    max-width: 160px;
    transition: all .4s ease;
}
a.coll-item:hover img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transform: translateY(-4px);
}
h3.coll-title {
    color: #808080;
   
    font-size: 1.125rem;
    font-style: italic;
    margin: 0;
}
h3.coll-title strong {
    display: block;
   
    font-style: normal;
}
h2.single-coll-title {
    font-size: 1.25em;
    text-align: center;
}
strong.coll-type {
    color: #b91237;
    display: block;
 
    font-weight: 400;
}
.lightbox-logo {
    margin: 0 0 1.71rem;
    text-align: center;
}
.about-copy, .intro-copy {
    text-align: center;
}
@media only screen and (min-width: 641px) {
    .lightbox p, .lightbox li {
        font-size: 1.125rem;
    }
}
#mobile-booth-content {
    padding: 1rem;
}
#mobile-booth-content, .mobile-booth-img {
    display: none;
}
.mobile-booth-img {
    margin: 0 -15px 1rem;
}
.mobile-toolbar-item {
    background: #00b5c6;
    color: #fff;
    display: block;
    height: auto;
    margin: 0 0 1rem;
}
.mobile-toolbar-item:hover {
    color: #fff;
    text-decoration: none;
}
.mobile-toolbar-item .btn {
    font-size: 1rem;
    margin-top: 5px;
    text-transform: none;
}
.mobile-tool-text {
    display: block;
}
.mobile-avatar-contain {
    margin: 0 0 1rem;
    text-align: center;
}
.mobile-avatar {
    cursor: pointer;
    display: inline-block;
    margin: 0 10px;
}
.mobile-avatar img {
    border-radius: 50%;
}
.mobile-below {
    text-align: center;
}
.person-bio img {
	border-radius: 500px;
}
.mobile {
    display: none;
}

/* Responsive */
@media only screen and (max-width: 1100px) {
    #site-logo {
        height: 45px;
        width: auto;
    }
    a.btn {
        font-size: 1em;
    }
    header#masthead {
        height: 77px;
    }
    #content {
        padding-top: 77px;
    }
    .booth-main {
        /* height: calc(100vh - 77px); */
    }
}
@media only screen and (max-width: 1023px) {
    #booth, .header-overlay, .toolbar-below {
        
    }
    #mobile-booth-content, .mobile-booth-img {
        display: block;
    }
    header#masthead {
        height: auto;
        position: static;
    }
    #intro.lightbox {
        display: block;
        overflow-y: scroll;
    }
    .lightbox-inside {
        padding: 20px 15px;
    }
    .lightbox-inside p, .lightbox-logo {
        margin-bottom: 1rem;
    }
    #intro.lightbox .lightbox-inside {
        max-height: none;
        max-width: 100%;
        min-height: 100vh;
        width: 100%;
    }
    #intro.lightbox .close {
        display: none;
    }
    #content {
        padding-top: 0;
    }
    #toolbar {
        background: #fff;
    }
    .toolbar-inside {
        align-items: flex-start;
        height: auto;
    }
    .toolbar-item {
        height: auto;
        padding: 10px 1rem;
    }
    .tool-text {
        line-height: 1em;
    }
}
@media only screen and (max-width: 640px) {
    #toolbar #btn-meeting, .no-mobile {
        display: none;
    }
    .mobile {
        display: block;
    }
    .mobile-toolbar-item, .mobile-toolbar-item:first-of-type {
        width: 100%;
    }
    .masthead-content {
        display: block;
        text-align: center;
    }
    .masthead-content a.btn {
        font-size: .8rem;
    }
    .site-header ul {
        text-align: center;
    }
    .site-home-link {
        margin-bottom: 10px;
    }
    h1, h2 {
        font-size: 1.5em;
    }
    .tool-text {
        font-size: .8rem;
        line-height: 1em;
    }
    .toolbar-item {
        padding: .5rem;
    }
    .toolbar-icon-svg {
        height: 35px;
        width: auto;
    }
    .person-bio img {
        width: 100%;
    }
    #draw-box img {
        width: 180px;
    }
    ul.inputs-list {
        margin-left: 0;
    }
    ul.inputs-list label {
        display: flex;
    }
    ul.inputs-list label input {
        position: relative;
        top: 3px;
    }
}

/*--------------------------------
# Video
--------------------------------*/

a.yt-launch {
    border: 0 !important;
    display: block;
    position: relative;
}
a.yt-launch:hover {
    text-decoration: none;
}
.yt-play-icon {
    align-items: center;
    background: rgba(0, 0, 0, 0);
    bottom: 0;
    color: #fff;
    display: flex;
    font-size: 45px;
    justify-content: center;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .4s ease;
    z-index: 10;
}
a.yt-launch:hover .yt-play-icon {
    background: rgba(0, 0, 0, .4);
}
.lib-video-contain {
    margin-bottom: 30px;
    min-height: 270px;
}
.vid-thumb-contain {
    display: block;
    margin: 0 0 5px;
    position: relative;
}
.lib-video {
    text-align: center;
}