@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); * { color: #555555; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-size: 16px; font-style: normal; font-variation-settings: "wdth" 100; font-weight: normal; } body { margin: 0px; padding: 80px 0px 0px 0px; } h1, h2, h3, h4 { color: #002238; font-size: 20px; margin: 20px 30px; padding: 0px; text-transform: capitalize; } h1 a, h2 a, h3 a, h4 a { color: inherit; font-size: inherit; text-transform: inherit; } p { margin: 20px 30px; padding: 0px; } ul, ol { margin: 20px 30px; } p strong, ul strong, ol strong { font-weight: bold; } table { border-collapse: collapse; margin: 20px 30px; } table td, section table th { border: 1px solid #555555; padding: 3px 6px; text-align: left; } table th, section table thead td { background: whitesmoke; font-weight: bold; } form input[type="submit"], a.button, span.button, a.button.disabled { background: #7cc2e5; border: 0px; border-radius: 20px; color: #002238; cursor: pointer; display: inline-block; padding: 10px 30px; line-height: 20px; text-decoration: none; text-transform: capitalize; transition: all 0.25s ease-in-out; } span.button, a.button.disabled { background: #dddddd; cursor: not-allowed; } form input[type="submit"]:hover, a.button:not(.disabled):hover { background: #002238; color: #7cc2e5; } p a.button, p span.button { margin-right: 30px; }  body.coming-soon { background: #ffffff; padding: 0px; } section { padding: 0px 0px 20px 0px; } section.coming-soon { padding-bottom: 50px; } section.coming-soon * { text-align: center; } section.coming-soon span.logo { margin: 20px auto; } body.coming-soon footer { background: #ffffff; } body.coming-soon div.bg { background: radial-gradient(ellipse at left bottom, #84b5ed 0%, #cee4fa 62%, #dcf0f7 100%); padding-bottom: 50px; } section.meetings { } section.meetings h2 { text-align: center; } section.meetings article { background: #ffffff; border: 2px solid #888888; border-radius: 5px; margin: 20px 30px 0px 30px; overflow: hidden; padding: 0px; } section.meetings article span.venueicon { background: center center no-repeat whitesmoke; background-size: 100%; display: block; height: 0px; padding-top: calc( 100% / 2 ); position: relative; transition: all .3s ease-in-out; width: 100%; } section.meetings article span.venueicon:before { background: center center no-repeat transparent; background-size: 70%; content: ''; height: 100%; left: 0px; opacity: 0.6; position: absolute; top: 0px; width: 100%; } section.meetings article:hover span.venueicon { background-size: 110%; } section.meetings article span.venueicon:after { background: transparent; content: ''; padding: 10px 0px; position: absolute; right: -50px; text-align: center; transform-origin: center center; transform: rotate(45deg); top: 30px; width: 200px; } section.meetings article.bookings-open span.venueicon:after { background: #7cc2e5; content: 'book now'; } section.meetings article.bookings-soon span.venueicon:after { background: #dddddd; content: 'available soon'; } section.meetings article.bookings-booked span.venueicon:after { background: #dddddd; content: 'booked!'; } section.meetings article.bookings-closed span.venueicon:after { background: #002238; color: #eeeeee; content: 'booking closed'; } section.meetings article.bookings-full span.venueicon:after { background: #002238; color: #eeeeee; content: 'fully booked!'; } div.logo, span.logo { background: center center no-repeat transparent; background-size: 100%; display: block; height: 170px; width: 300px; } div.regionlogo, span.regionlogo { background: center center no-repeat transparent; background-size: 100%; height: 170px; width: 300px; }  body.booking-page { } body.booking-page h2 { background: #888888; color: #ffffff; margin: 20px 0px 0px 0px; padding: 5px; }  div.message { background: whitesmoke; border: 2px solid #888888; padding: 0px 20px 10px 20px; margin: 20px 0px 0px 0px; } div.message p { margin: 0px; padding: 10px 0px 0px 0px; } div.success.message { background-color: #e8f4ea; border-color: #495e4a; } div.success.message * { color: #495e4a; } div.error.message { background-color: #fff7f7; border-color: #5e4949; } div.error.message * { color: #5e4949; }  section.venue-details { } span.venuebanner { background: center center no-repeat whitesmoke; background-size: 100%; content: ''; display: block; margin: 20px 30px; padding-top: 50%; position: relative; transition: all .3s ease-in-out; width: auto; } span.venuebanner:hover { background-size: 105%; } span.venuebanner:before { background: center center no-repeat transparent; background-size: 70%; content: ''; height: 100%; left: 0px; opacity: 0.6; position: absolute; top: 0px; width: 100%; } section.venue-details div.booking-panel { background: #ffffff; border: 2px solid #888888; border-radius: 5px; margin: 20px 30px 0px 30px; overflow: hidden; padding: 0px; } section.venue-photos { } section.venue-photos span { background: center center no-repeat whitesmoke; background-size: cover; float: left; margin: 5px 0px 0px 5px; padding-top: 50%; transition: all .3s ease-in-out; width: calc( ( 100% - 5px ) / 2 ); } section.venue-photos span:nth-child(2n-1) { clear: both; margin-left: 0px; } section.venue-photos:after { clear: both; content: ''; display: block; } section.venue-location { background: radial-gradient(ellipse at left bottom, #84b5ed 0%, #cee4fa 62%, #dcf0f7 100%); padding-top: 1px; } section.venue-location a.map { background: center center no-repeat transparent; background-size: cover; display: block; height: 0px; margin: 20px 0px 0px 30px; padding: calc( 100vw - 60px ) 0px 0px 0px; width: calc( 100% - 60px ); }  body:has( > section.form ) { padding-top: 0px; } section.form { background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); background: radial-gradient(ellipse at left bottom, #84b5ed 0%, #cee4fa 40%, #dcf0f7 100%); margin: 0px; padding: 0px; } section.form > div { min-height: 80vh; padding: 50px 0px; } section.form div.form-background { display: none; } section.form div form { max-width: 400px; padding: 0px 30px; } section.form:after { clear: both; content: ''; display: block; } form > p { margin: 20px 0px; } form div.field { margin: 20px 0px 0px 0px; } form div.field label { background: #cee4fa; color: #002238; display: inline-block; font-size: 14px; left: 30px; padding: 0px 10px; position: relative; text-transform: capitalize; transition: all .2s ease-in-out; top: 10px; } form div.checkbox.field label { background: transparent; cursor: pointer; left: 0px; line-height: 39px; margin-bottom: -20px; padding: 0px 0px 0px 80px; top: 32px; width: calc( 100% - 80px ); } form div.field div { background: transparent; border: 4px solid #7cc2e5; border-radius: 26px; margin: 0px; overflow: hidden; padding: 0px; } form div.field.disabled div, form div.field.disabled div input, form div.field.disabled div textarea { cursor: not-allowed; } form div.field:not(.disabled) div:focus-within { background: #ffffff; } form div.field:not(.checkbox) label:has(+ div:focus-within) { background: transparent; top: 0px; } form div.field div input, form div.field div textarea { background: transparent; border: 0px; color: #002238; line-height: 16px; font-size: 16px; outline: 0px; padding: 10px 20px; width: calc( 100% - 40px ); } form div.field div textarea { height: 100px; } form div.photo.field span { background: center center no-repeat whitesmoke; background-size: contain; height: 125px; float: left; margin-right: 30px; width: 100px; } form div.photo.field div { float: right; width: calc( 100% - 8px - 130px ); } form div.photo.field:after { clear: both; content: ''; display: block; } form div.field p { font-size: 12px; margin: 0px; padding: 0px 26px 0px 0px; text-align: right; } form div.field p.err { color: red; display: none; } form div.field p a, form div.field p strong { font-size: inherit; } form div.checkbox.field div { height: 39px; overflow: hidden; } form div.checkbox.field div input { background: transparent; border: 0px; box-shadow:none; cursor: pointer; height: 50px; left: -1px; margin: 0px; opacity: 0.2; padding: 0px; position: relative; top: -5px; width: 50px; }  form input[type=submit], form button { margin: 20px 0px 0px 0px; } form div.field label:has(+ div input:not(:placeholder-shown):not(:focus):invalid) { color: red; } form div.field div:has(input:not(:placeholder-shown):not(:focus):invalid) + p.err { display: block; } section.booking-confirmation { background: radial-gradient(ellipse at left bottom, #84b5ed 0%, #cee4fa 40%, #dcf0f7 100%); padding: 80px 0px; text-align: center; }  section.form div.attendees-list { max-width: 500px; } section.form div.attendees-list article { background: #ffffff; border: 4px solid #7cc2e5; border-radius: 10px; margin: 20px 30px; text-align: center; } section.form div.attendees-list article div.visitor-photo { background: center center no-repeat whitesmoke; background-size: cover; float: left; margin: 10px; padding-top: 125px; width: 100px; } section.form div.attendees-list article p span { display: block; font-size: 12px; font-style: italic; } section.form div.attendees-list article:after { clear: both; content: ''; display: block; }  header { background: #ffffff; height: 80px; left: 0px; position: fixed; text-align: left; top: 0px; width: 100%; } header a.logo { background: center center no-repeat transparent; background-size: contain; display: inline-block; height: 60px; margin: 10px 20px 0px 20px; width: 120px; } header > div { position: absolute; right: 0px; top: 0px; } footer { background: #002238; clear: both; padding: 0px 15px; } footer nav { margin: 0px; padding: 15px 0px; } footer nav a { color: #ffffff; display: block; font-size: 14px; padding: 5px 15px; text-transform: capitalize; }  body.meeting-screen { margin: 0px; padding: 0px; } body.meeting-screen section.slide { background: radial-gradient(ellipse at left bottom, #84b5ed 0%, #cee4fa 40%, #dcf0f7 100%); height: 100vh; left: 0px; margin: 0px; opacity: 0; overflow: hidden; padding: 0px; position: absolute; top: 0px; width: 100vw; } body.meeting-screen section.slide.welcome-slide { opacity: 1; } body.meeting-screen section.slide.welcome-slide h1 { padding-top: 35vh; text-align: center; } body.meeting-screen section.slide.welcome-slide div { background: center center no-repeat transparent; background-size: contain; content: ''; display: block; height: 20vh; margin: 0px; padding: 0px; width: 100%; } body.meeting-screen section.slide.attendees-list-slide { } body.meeting-screen section.slide.attendees-list-slide article { background: #ffffff; border: 4px solid #7cc2e5; border-radius: 10px; float: left; height: calc( ( 100vh - 120px - 40px ) / 5 ); margin: 20px 0px 0px 30px; opacity: 0; text-align: center; transition: opacity .25s ease-in-out; width: calc( ( 100% - 180px - 40px ) / 5 ); } body.meeting-screen section.slide.attendees-list-slide article.blank { opacity: 0; } body.meeting-screen section.slide.attendees-list-slide article.arrived { opacity: 1; } body.meeting-screen section.slide.attendees-list-slide article div.visitor-photo { background: center center no-repeat whitesmoke; background-size: cover; float: left; margin: 10px; padding-top: 125px; width: 100px; } body.meeting-screen section.slide.attendees-list-slide article div.visitor-photo { height: calc( ( ( 100vh - 120px - 40px ) / 5 ) - 20px ); padding: 0px; width: calc( ( ( ( 100vh - 120px - 40px ) / 5 ) - 20px ) / 1.25 ); } body.meeting-screen section.slide.attendees-list-slide article h2 { padding: 20px 0px; margin: 20px 10px; } body.meeting-screen section.slide.attendees-list-slide article p { margin: 20px 10px; } body.meeting-screen section.slide.attendees-list-slide article p span { display: block; font-size: 12px; font-style: italic; } body.meeting-screen section.slide.attendees-list-slide article:after { clear: both; content: ''; display: block; } body.meeting-screen section.slide.attendees-list-slide article:nth-child(12) { margin-left: calc( ( ( 100% - 180px - 40px ) / 5 * 3 ) + 24px + 120px ); } body.meeting-screen section.slide.attendees-list-slide article:nth-child(18) { margin-left: calc( ( ( 100% - 180px - 40px ) / 5 * 2 ) + 16px + 90px ); } body.meeting-screen section.slide.attendees-list-slide div.center { background: center center no-repeat transparent; background-size: contain; height: calc( ( 100vh - 120px - 40px ) / 5 ); left: calc( ( ( 100% - 180px - 40px ) / 5 * 2 ) + 16px + 90px ); position: absolute; top: calc( ( ( 100vh - 120px - 40px ) / 5 * 2 ) + 16px + 60px ); width: calc( ( 100% - 180px - 40px ) / 5 ); } body.meeting-screen section.venue-slide { } body.meeting-screen section.venue-slide > span { background: center center no-repeat transparent; background-size: cover; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; width: 100%; } body.meeting-screen section.venue-slide > span:nth-child(1) { opacity: 1; } body.meeting-screen section.venue-slide article { background: #ffffff; border: 4px solid #7cc2e5; border-radius: 10px; position: absolute; right: 50px; top: 50px; width: 40%; } body.meeting-screen section.attendees-welcome-slide article { background: #ffffff; border: 4px solid #7cc2e5; border-radius: 10px; float: left; height: calc( ( 100vh - 8px ) / 2 ); margin: calc( ( 100vh - 8px ) / 4 ) 0px 0px calc( ( 100vw - 8px ) / 4 ); text-align: center; width: calc( ( 100vw - 8px ) / 2 ); } body.meeting-screen section.attendees-welcome-slide article div.visitor-photo { background: center center no-repeat whitesmoke; background-size: cover; float: left; height: 250px; margin: calc( ( ( ( 100vh - 8px ) / 2 ) - 250px ) / 2 ) 30px; width: 200px; } body.meeting-screen section.attendees-welcome-slide article h2 { font-size: 80px; padding: 70px 0px; } body.meeting-screen section.attendees-welcome-slide article p { font-size: 40px; } body.meeting-screen section.attendees-welcome-slide article h2 span, body.meeting-screen section.attendees-welcome-slide article p span { display: block; } body.meeting-screen div.checkin-overlay { background: #ffffff; border-top-right-radius: 50px; bottom: 0px; left: 0px; position: absolute; z-index: 80; } body.meeting-screen div.checkin-overlay div.qrcode { background: center center no-repeat transparent; background-size: contain; float: left; height: 100px; margin: 20px 30px; width: 100px; } body.meeting-screen div.checkin-overlay p { padding: 30px; } body.meeting-screen div.checkin-overlay:after { clear: both; content: ''; display: block; } @media ( min-width: 2400px ) { body.meeting-screen section.slide.welcome-slide h1 { font-size: 40px; } body.meeting-screen section.slide.attendees-list-slide article h2 { font-size: 40px; } body.meeting-screen section.slide.attendees-list-slide article p { font-size: 24px; } body.meeting-screen section.slide.attendees-list-slide article p span { font-size: 20px; } body.meeting-screen div.checkin-overlay { } body.meeting-screen div.checkin-overlay div.qrcode { height: 150px; width: 150px; } body.meeting-screen div.checkin-overlay p { font-size: 20px; } } @media ( min-width: 3500px ) { body.meeting-screen section.slide.welcome-slide h1 { font-size: 60px; } body.meeting-screen section.slide.attendees-list-slide article h2 { font-size: 60px; } body.meeting-screen section.slide.attendees-list-slide article p { font-size: 32px; } body.meeting-screen section.slide.attendees-list-slide article p span { font-size: 24px; } body.meeting-screen section.attendees-welcome-slide article div.visitor-photo { height: 500px; margin: calc( ( ( ( 100vh - 8px ) / 2 ) - 500px ) / 2 ) 60px; width: 400px; } body.meeting-screen section.attendees-welcome-slide article h2 { font-size: 120px; margin: 40px 60px; padding: 140px 0px; } body.meeting-screen section.attendees-welcome-slide article p { font-size: 60px; margin: 40px 60px; } body.meeting-screen section.attendees-welcome-slide article h2 span, body.meeting-screen section.attendees-welcome-slide article p span { font-size: 32px; } body.meeting-screen div.checkin-overlay { } body.meeting-screen div.checkin-overlay div.qrcode { height: 150px; width: 150px; } body.meeting-screen div.checkin-overlay p { font-size: 40px; } body.meeting-screen section.venue-slide article h1 { font-size: 60px; margin: 40px 60px; } body.meeting-screen section.venue-slide article p { font-size: 32px; margin: 40px 60px; } } @media ( min-width: 1000px ) { body { padding-top: 80px; } section { padding: 0px 15% 20px 15%; } section.meetings { } section.meetings article { float: left; margin: 20px 0px 0px 30px; width: calc( ( 100% - 12px - 120px ) / 3 ); } section.meetings:after { clear: both; content: ''; display: block; } section.venue-details div.booking-panel { float: right; margin: -40px 30px 20px 30px; width: 30%; } section.venue-details:after { clear: both; content: ''; display: block; } section.venue-photos span { background-size: 100%; padding-top: calc( ( 100% - 65px ) / 4 ); width: calc( ( 100% - 65px ) / 2 ); } section.venue-photos span:nth-child(2n-1) { clear: none; margin-left: 30px; } section.venue-photos span:hover { background-size: 105%; }section.venue-photos span:hover { background-size: 105%; } section.venue-location { padding-top: 1px; } section.venue-location a.map { float: left; margin: 20px 30px; padding: 0px; height: 230px; width: 230px; } section.venue-location:after { clear: both; content: ''; display: block; } section.form { } section.form > div { background: transparent; float: left; margin: 0px; min-height: 100vh; padding: 0px; width: 50%; } section.form div.form-background { display: block; overflow: hidden; position: sticky; top: 0px; } section.form div.form-background:before { background: center center no-repeat transparent; background-size: contain; content: ''; height: 170px; position: absolute; top: calc( ( 100% - 170px ) / 2 ); right: 30px; width: 300px; } section.form div.form-background:after { background: blue; border-radius: 50%; -webkit-box-shadow: 0px 0px 45px 30px #858585; box-shadow: 0px 0px 45px 30px #858585; content: ''; display: block; height: 100px; position: absolute; right: -50px; top: calc( ( 100% - 100px ) / 2 ); width: 30px; } section.form div.form { min-height: auto; padding: calc( ( 100vh - 250px ) / 2 ) 0px; } section.form div form { padding: 0px 30px; } section.form:after { clear: both; content: ''; display: block; } section.form div.attendees-list { } section.form div.attendees-list article { margin: 20px 30px; } section.booking-confirmation { padding: 150px 15%; } header { position: fixed; text-align: center; } header > div { position: fixed; } footer { padding: 20px 15%; } footer nav { float: left; margin: 0px 0px 0px 30px; width: calc( ( 100% - 120px ) / 3 ); } footer nav a { padding: 0px; } footer:after { clear: both; content: ''; display: block; } } @media ( min-width: 2500px ) { body.booking-page { min-height: 100vh; } body.booking-page div.form-background { background: center center no-repeat transparent; background-size: cover; background-image: url('/images/regus-north-warehouse-1.jpg'); height: 100%; left: 0px; opacity: 0.8; position: absolute; top: 0px; width: 100%; } body.booking-page div.booking-form { background: #ffffff; border: 2px solid #888888; border-radius: 5px; padding: 125px 30px 30px 30px; position: absolute; right: 80px; top: 205px; width: 600px; } body.booking-page div.booking-form div.logo { background: center center no-repeat #ffffff; border: 2px solid #888888; border-radius: 5px; height: 250px; left: 130px; position: absolute; top: -125px; width: 400px; } footer:before { min-height: 20px; width: calc( 100% / 4 ); } footer nav { width: calc( 100% / 4 ); } }  div.joist { border: 0px; height: auto; margin: 20px 30px; padding: 30px 0px; width: auto; } div.joist p { color: #555555; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; margin: 0px; padding: 0px; text-align: center; } div.joist p a { color: #555555; display: block; font-family: 'Lato', sans-serif; font-size: 12px; font-weight: normal; text-decoration: none; } div.joist p a:hover { text-decoration: none; } div.joist p a:before { background: center center no-repeat #000000; content: ''; display: block; height: 35px; margin: 10px auto; width: 160px; } div.joist p a:before { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAAUCAYAAAAXxsqQAAAAAXNSR0IArs4c6QAABQ5JREFUWEfNmF1II1cUx2fcuIbtmoj1swSrK4pfkWqMJHWxwVDixpqICkVrtCBSsdAV8yCt0qTKFvRFpAv2IXQ1JYIPWlytMdqgD9YVldjWjXHNmFq/tkbdJVG6s66acq2zZGM+xpkx9D4Nuef8z7m/3Hvm3IEhp5GZmcnT6XQjzr95eYa92cnlcrlarf7BxSawu7v7gUwmKw8ICLjgb7FY/pJIJFKj0fi7q/bu7u5zb/GMRuOSQCDIwWzq6uruNjQ01DOZzBCc6yFtJhKJ7hgMhhkg9MbisrKycubm5qZIR4AgqKampk6lUnVhWkql8p5CofgKj/bW1tZTFov1LgRBrzB7h8Ph8Oa7uLj4OD09nZ2SkpJqNBof44lDtQ2Xy709Pz//q9/AGgyGPzIyMtiXXUhUVFTkzs6OFfjhASsUCj+0Wq1PLxuHKnu/gtXr9ZN5eXkfEE0ehuHrYOfiARsbGxsXHBz8FtFYZP38BtZisazq9XodmYQ3Nja2YmJiWL7Abm5ugvIRTSYWWV+/ge3q6vqORqNdI5twampqGhV1E0XRl3hzof03POZ+eHj4wlUrNzdXuLCw8OhCjYUg6CaHw0nFE1yr1f4cHh7+tifbtra2zsbGxrt4tHzZmEymleTk5ERfdt7mZ2Zm5vh8fjZeDaVS+a1CofjSkz0MwwGg9HucxxvI1W57e/vv6OjoSE/+x8fHpzQaDQR3O05OTk7FYrHUbDabe3t7f+TxeFyiuQA/FEWP6HQ6qMceh7tyAvKYmpp6JJFIig4ODvYxZ6rBXmMymQxvydlstrN+0hdYX5BgGL4BQdDr44QgyJ/x8fGxvvw8zYN2i81mpxH1B34KhaK1paXla/BMKVhffezR0dGroKCgs11BBqyzDgaiurr6M5VK9T1RMABsZ2fnfTIaIHZFRcWnGo2mh1KwXC73/dnZ2bMG192gCizQhmH4jcvJ6OjoLyKRSEgGLLgg9PT0aCorK8uJ6mC5UQr21q1biaurq0+81UXsTWmz2Q4YDMZNT7Z2u/0fBoMBjrvbYbFYwNFPgSDoZW1t7eeggyADA7t5AQ2wQcbHx0eZTGYwEc38/PyP+Hx+DpUvL7rD4bjQRjgnt7e39wxFUZTFYr3jLWmpVFoyODjYT2Rhrj4gZlhYWKg3LWewLnYXvkmc7+oyT3oajaYPQRALlWCh09NTh8spJcQGHHVfTT1e4cLCwuKhoaEBX2BlMlllU1PTN750i4qK7gQGBtI82fX19fUvLy+vUAq2v7//YXFxcaGv5LzNDwwMPCwpKZE2NzcrW1tbFWS0sLru608CO7a+vl5O9qYHci0tLf2YzWa/RylYCIKuOxwO3DcUd9BgGA6EIOgYzO3v7z8PDQ0l/OkuLi4ubm1tbc2fYEHzf/41jtoLQllZWQVo2onsNJFIVDg2Njbs5BuAougLrE27jCYoAcPDwz8BH3+BbWxsbG5vb79HaVfgvOjy8nLQzz24DAixWCzRarVDbnxgk8n0JCkpKQGPHoCYlpaWubS09Btm7w+warW6t6qq6hMQ88rAni+IPjExMS4QCG57AzIyMjJeUFBQ4Pxh2p19dnY2X6fTjYaEhLi93QF4HR0d9+Vy+Reu/lcJdn19fUMoFOYjCLKExb1qsK/XFxEREcnj8XISEhISwRsfQZCV6enpKavVuoNnF7rY0DgcDofH4/HpdPoNs9m8PDk5OWm3258R0PpfuvwLsyqLM5fGkWYAAAAASUVORK5CYII="); }