/**************************************************************************************** NOTE: This site is using critical path CSS method to help with page speed scores. That means, some CSS that's in this stylesheet is being inlined in the which can be found in parent.master. If you're changing styles you should double check if they need to be changed in the critical CSS as well. ****************************************************************************************/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } /** TABLE OF CONTENTS **/ /** 1. General /** 1a. Forms /** 2. Body /** 3. Header /** 4. Navigation /** 4a. Submenu /** 4b. Responsive Menu /** 5. Slideshow /** 6. Main /** 7. Footer /** 8. Locator Page /** 9. Public Owner's Page /** 10. Maze Design Gallery and Product Pages 11. Rewards Game /** Responsive /** 78.125em (1250px) /** 60.625em (970px) /** 58.125em (930px) /** 56.25em (900px) /** 40.625em (680px) /** 34.375em (550px) /** 31.25em (500px) /*********************** 1. General ***********************/ body { /*background: #a1cc9b;*/ color: #231f20; font: 1em/1.25 arial, sans-serif; } p { margin: 7px 0 10px; } a { color: #073A50; -webkit-transition: color .2s; transition: color .2s; } a:hover, a:focus { color: #BC5A14; } h1, h2, h3, h4, h5, h6, .SectionHeader, .subh, .btitle { color: #07391b; font: 2.5em 'Bubblegum Sans', "Arial Black", arial, sans-serif; /*40*/ line-height: 1; margin: 0 0 10px; padding: 0; } .welcome h1, .ContentHeader h1, .maze-description h1 { /*border-bottom: 3px solid #c6e5c2;*/ padding: 0 0 10px; text-align: center; width: 100%; } .ContentHeader h1, .maze-description h1 { margin-bottom: .75em; /*30*/ } .welcome h1:after, .ContentHeader h1:after, .maze-description h1:after { content: ""; background: #07391b; bottom: -3px; left: 0; margin: 0 auto; position: absolute; right: 0; height: 3px; max-width: 300px; width: 100%; } h2 { color: #073A50; font-size: 2em; /*32*/ } h3, #ctl00_ctl00_Cph_Cph_Regular { color: #BC5A14; font-size: 1.75em; /*28*/ } h4 { font-size: 1.625em; /*26*/ } h5, .SectionHeader { color: #073A50; font-size: 1.5em; /*24*/ } h6 { color: #073A50; font: 700 1.125em 'Lato', "Century Gothic", "Helvetica Narrow", arial, sans-serif; /*22*/ } .ht, .bx-controls a { text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; } .SectionHeader { border-bottom: 1px solid #073A50; display: block; margin: .6em 0; } img { max-width: 100%; } .row { margin-bottom: 40px; } .np { padding: 0 !important; } .banner img { display: block; } [class*="block-"] { float: left; padding: 0 25px; } /* 160 */ .block-15 { width: 15%; } /* 220 */ .block-20 { width: 20%; } /* 280 */ .block-25 { width: 25%; } /* 340 */ .block-30 { width: 30%; } /* 400 */ .block-35 { width: 35%; } /* 460 */ .block-40 { width: 40%; } .block-45 { width: 45%; } /* 580 */ .block-50 { width: 50%; } /* 640 */ .block-55 { width: 55%; } /* 700 */ .block-60 { width: 60%; } .block-65 { width: 65%; } /* 880 */ .block-75 { width: 75%; } /* 940 */ .block-80 { width: 80%; } /* 1000 */ .block-85 { width: 85%; } .block-100 { width: 100%; } .inner { margin: 0 auto; padding: 0 15px; max-width: 100%; width: 1180px; height:100%; } .interior .section .inner { padding: 0; } .interior { /*mobile header height*/ padding-top: 92px; transition: .2s padding; } .interior .container { padding-top:15px; padding-bottom:15px; } @media(min-width: 901px) { .interior { padding-top: 105px; } } @media(min-width: 1251px) { .interior { padding-top: 182px; } .interior.scroll { padding-top:100px; } } @media(min-width: 1401px) { .interior { padding-top: 255px; } } /*** 1a. Forms ***/ input[type="text"], input[type="password"], textarea, .DropDownList, .item input[type="email"], .item input[type="tel"] { background: #fff; border: 1px solid #60845B !important; height: 30px; margin-bottom: 5px; padding: 3px; } .DropDownList { font-size: 14px; height: auto; } textarea { height: 80px; } input[disabled] { opacity: .5; } label, .TableRowLabel { color: #07391B; font: 1 'Lato', "Century Gothic", arial, sans-serif; font-style: italic; padding-right: 7px; padding-bottom: 3px; } label span { color: #777 !important; font-size: 11px; } .actions { padding: 10px 0; } form [class*='btn'], input[type="submit"], form button, .Buttons { background: #07391B; border: 0; color: #fff; display: inline-block; font: 1.25em 'Bubblegum Sans', "Arial Black", arial, sans-serif; /*20*/ letter-spacing: 1px; margin: 0 0 10px; padding: 10px 25px; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: background .2s, color .1s; transition: background .2s, color .1s; } form [class*='btn']:hover, input[type="submit"]:hover, form button:hover, .Buttons:hover, form [class*='btn']:focus, input[type="submit"]:focus, form button:focus, .Buttons:focus { background: #F75A2A; color: #fff; } .small-btn, .calendar-content input[type="submit"] { font-size: 16px; padding: 7px 20px; } .new-button input[type="submit"] { font: 15px/1 'Lato', "Century Gothic", "Helvetica Narrow", arial, sans-serif; padding: 5px 10px; } .item { margin-bottom: .9375em; } .item input[type="text"], .item input[type="password"], .item input[type="email"], .item input[type="tel"], .item select, .item textarea { width: 100%; } .item label { display: block; } .shorti { float: left; margin-right: 10px; width: 48%; } @media only screen and (max-width : 650px) { .Content > div img { float: none !important; margin: 15px auto !important; } } /*********************** 2. Body ***********************/ .full { min-height: 100%; position: relative; width: 100%; } .container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin: 0 auto; padding: 0 1.25em 0; position: relative; max-width: 73.75em; /*1180*/ } .homepage .container { margin-top: 5.625em; /*90*/ padding-bottom: 2.5em; /*40*/ } .interior .container { padding-bottom: 4.375em; /*70*/ } @media(max-width: 900px) { .homepage .scroll { margin-top:89px; } } /*********************** 3. Header ***********************/ .header { background: #40BFF2; width: 100%; background-image: url(../Images/header-bg.jpg); background-size: cover; background-position: center; padding-top:15px; position:fixed; top:0; left:0; right:0; z-index:9; } .header .banner { margin-bottom: 40px; text-align: center; } #slider-wrapper, .header .banner { border-bottom: 5px solid #073a50; } /*********************** 4. Navigation ***********************/ .mobile-nav { width: 100%; position: relative; } .phone { float: left; width: 50%; text-align: left; padding: 12px 0 10px 10px; } .phone a { font: 0.9em 'Bubblegum Sans', "Arial Black", arial, sans-serif; color: #ffdd8c; text-decoration: none; } .phone a:hover { color: #c6e5c2; } .login { float: left; padding: 12px 10px 10px 0; text-align: right; width: 50%; } .login a { background: url(../images/icon-login.png) no-repeat right center; color: #fff; font-size: 13px; padding: 0 .9375em 0 0; /*15*/ text-decoration: none; } .login a:hover { text-decoration: underline; } /* Mobile Navigation */ .toggle-menu { background: #073a50; color: #fff; display: none; font-size: 16px; left: 0; position: fixed; text-decoration: none; text-transform: uppercase; top: 0; width: 100%; z-index: 100; } .toggle-menu li { float: left; } .toggle-menu li:first-of-type { width: 40%; } .toggle-menu li:last-of-type { right: 15px; width: 60%; } .toggle-menu li:last-of-type a { background: url(../images/icon-login.png) no-repeat right center; text-align: right; } .toggle-menu .icon, .toggle-menu .menu-text { display: inline-block; vertical-align: middle; } .toggle-menu p { margin: 0; } .toggle-menu a { color: #fff; display: block; padding: 10px 15px; text-decoration: none; } /* Hamburger menu icon */ .toggle-menu .icon, .toggle-menu .icon:after, .toggle-menu .icon:before { background: #fff; -webkit-transition: all 0s .3s; transition: all 0s .3s; width: 18px; height: 2px; } .toggle-menu .icon:after, .toggle-menu .icon:before { background: #fff; content: ""; position: absolute; left: 0; } .toggle-menu .icon:before { bottom: 5px; -webkit-transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .icon:after { top: 5px; -webkit-transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } /* When clicked, hamburger icon animates into an X */ .toggle-menu .is-clicked .icon { background: rgba(255, 255, 255, 0); } .toggle-menu .is-clicked .icon:after { background: #ffdd8c; top: 0; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .is-clicked .icon:before { background: #ffdd8c; bottom: 0; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } /* Mobile Nav Panels */ [id$="nav-copy"] { background: #fff; box-shadow: 5px 0 5px -5px rgba(0,0,0,.5); left: 0; overflow-y: auto; padding: 41px 0; position: fixed; top: 0; -webkit-transform: translateX(-280px); -ms-transform: translateX(-280px); transform: translateX(-280px); -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s; transition: transform .4s 0s, visibility 0s .4s; width: 230px; height: 100%; z-index: 9; display:block!important; } [id$="nav-copy"] ul li a { border-bottom: 1px solid #e3e3e3; color: #073A50; display: block; padding: 15px; text-decoration: none; transition: none; } [id$="nav-copy"] ul li > span, [id$="nav-copy"] ul li > span > strong > a > span { display: block; font-size: inherit !important; color: #073A50 !important; } [id$="nav-copy"] ul li > span > strong > a > span:hover { color: #fff !important; } [id$="nav-copy"] ul li a:hover { background: #4AAFE5; color: #fff; } [id$="nav-copy"] ul li ul { font-size: 14px; line-height: 1.2; } [id$="nav-copy"] ul li ul li a { padding-left: 30px; } [id$="nav-copy"] { z-index:10; } [id$="nav-copy"].open-menu { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s; transition: transform .4s 0s, visibility 0s 0s; -webkit-overflow-scrolling: touch; } .dd-wrap { display: block; width: 100%; } .open-dd { background: #e3e3e3; cursor: pointer; display: block; position: absolute; right: 0; text-align: center; top: 0; width: 50px; height: 100%; z-index: 10; } /* Icon to indicate there's drop downs to open */ .open-dd::after { content: "\f103"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; left: 0; margin: auto; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .open-dd:hover, .open-dd:focus { background: #307ba4; color: #fff; } .has-sub ul { display: none; } .has-sub span { display: block; } .has-sub > span { height: 100%; } .nav p { display: none; } .nav ul li { margin: 0 .3125em 0 0; /*5*/ position: relative; } .header .nav { padding: 15px 0; /*5 20 10*/ } .header .nav ul { margin: 0 auto; padding: 0; text-align: center; } .header .nav ul li { color: #004463; display: inline-block; font: 1.5em 'Bubblegum Sans', "Arial Black", arial, sans-serif; /*27*/ letter-spacing: 1px; margin: .2962962962962963em; /*8*/ position: relative; vertical-align: top; } .header .nav ul li a { color: #004463; display: block; text-decoration: none; -webkit-transition: color .4s; transition: color .4s; } .header .nav ul li:hover a { color: #ffdd8c; } /*** 4a. Submenu ***/ .header .nav ul > li > ul { background: #7BBEE9; left: 0; line-height: 1.2 !important; max-height: 0; opacity: 0; overflow: hidden; padding: 0; position: absolute; text-align: left; text-transform: none; top: 28px; -webkit-transition: max-height .7s ease-in-out 0s, opacity 200ms ease-in-out 0s; transition: max-height .7s ease-in-out 0s, opacity 200ms ease-in-out 0s; width: 200px; z-index: 9999; } .header .nav ul > li > ul { display: block; margin: 0; padding: 0; width: 200px; } .header .nav ul > li > ul li { border: 0; display: block; font-size: .7407407407407407em; /*20*/ margin: 0; padding: 0; } .header .nav ul > li > ul a { color: #004463 !important; display: block; padding: .625em; /*10*/ text-indent: 0 !important; -webkit-transition: background .3s; transition: background .3s; width: 200px !important; } .header .nav ul > li > ul a:hover { background: #004463 !important; color: #ffdd8c !important; } .header .nav ul > li:hover > ul { max-height: 500px; opacity: 1; } @media only screen and (max-width: 56.25em) { .extra-nav { display: none; } .header { padding: 40px 0 0; } } /*********************** 5. Slideshow ***********************/ .slideshow { float: right; width: 72.881355932%; /*860*/ } .slideshow .bx-wrapper { margin: 0 auto; } .slideshow .bx-viewport li img { border: 20px solid #073a50; } .slideshow .slide-text { color: #02110b; position: absolute; right: 2.5em; /*40*/ top: 2.5em; /*40*/ max-width: 22.5em; /*360*/ } .slideshow .text { background: #fff; background: rgba(255,255,255,.9); box-shadow: 2px 2px 0 #052010; font: 1.5em 'Bubblegum Sans', "Arial Black", arial, sans-serif; /*24*/ letter-spacing: 1px; padding: .8333333333333333em; /*20*/ } .slideshow a[title^="Learn"] { background: #d5edd2; box-shadow: 2px 2px 0 #052010; clear: both; color: #0a4422; float: right; font: 1em 'Lato', "Century Gothic", "Helvetica Narrow", arial, sans-serif; /*16px*/ margin-top: .625em; /*10*/ padding: .625em 1.25em; /*10 20*/ text-align: right; text-decoration: none; text-transform: uppercase; -webkit-transition: color .2s, background .2s; transition: color .2s, background .2s; } .slideshow a[title^="Learn"]:hover { background: #073a50; color: #fff; } .slideshow .bx-controls { position: absolute; top: 50%; width: 100%; } .slideshow .bx-controls a { background: #d5edd2 url(../images/arrows.png) no-repeat -24px 8px; border-radius: 50%; box-shadow: 1px 1px 0 #000; opacity: .75; position: absolute; right: 50px; -webkit-transition: opacity .3s; transition: opacity .3s; width: 42px; height: 42px; z-index: 9000; } .slideshow .bx-controls a.bx-prev { background-position: 12px 8px; left: 50px; right: auto; } .slideshow .bx-controls a:hover { opacity: 1; } /* Interior Slideshow */ #interiorSlideshow { height: 450px; } /*********************** 6. Main ***********************/ .buckets { float: left; width: 25.423728814%; } .buckets ul li { background: #ddf0da; box-shadow: 1px 1px 0 #70ac69; margin: 0 0 100px; padding: 3.125em 1.25em 1.25em; /*50 20*/ -webkit-transition: box-shadow .3s; transition: box-shadow .3s; } .buckets ul li:hover { box-shadow: 2px 2px 0 #70ac69; } .buckets ul li p { font-size: .875em; } .buckets ul li a[title^="Read"] { color: #e76e17; float: right; text-align: right; text-decoration: none; } .buckets ul li a:hover[title^="Read"] { color: #073A50; } .buckets ul li a[title^="Read"]:before { content: "\2014 \00a0"; } .buckets ul li h2 { margin: 0 0 2px; text-align: center; } .buckets ul li p { margin: 0; } .buckets ul li .icon { display: block; left: 0; margin: 0 auto; position: absolute; right: 0; top: -70px; width: 150px; height: 118px; } .buckets ul li + li .icon { top: -60px; width: 170px; height: 110px; } .buckets ul li + li + li .icon { top: -80px; width: 111px; height: 130px; } .buckets ul li + li + li { margin: 0; } .new-slide { background: #4aafe5 url(../images/bg-blue.jpg) repeat-x left bottom; border-bottom: 1px solid #368ebf; border-top: 1px solid #368ebf; margin-bottom: 3.125em; /*50*/ padding: .625em 4.6875em; /*10 75*/ width: 100%; } .new-slide .bx-wrapper { margin: auto; } .new-slide ul { margin: 0 auto; } .new-slide ul li { border-bottom: 2px solid transparent; border-right: 2px solid transparent; padding: .75em .5em; /*15 10*/ text-align: center; width: 260px; } .new-slide ul li a { color: #073a50; text-decoration: none; } .new-slide ul li h6 { font: bold italic 1.25em/1 'Lato', "Century Gothic", "Helvetica Narrow", arial, sans-serif; /*20*/ } .new-slide ul li img { margin-bottom: .625em; /*10*/ } .new-slide ul li:hover { background: #79bfe4; border-bottom: 2px solid #277caa; border-right: 2px solid #277caa; } .new-slide .bx-controls { position: absolute; top: 40%; width: 100%; } .new-slide .bx-controls a { background: url(../images/arrows2.png) no-repeat -30px 0; position: absolute; right: -50px; width: 20px; height: 31px; z-index: 9000; } .new-slide .bx-controls a.bx-prev { background-position: 0 0; left: -50px; right: auto; } .new-slide .bx-controls a:hover { background-position: 0 -39px; } .new-slide .bx-controls a:hover.bx-next { background-position: -30px -39px; } .swipe { color: #073A50; display: none; font-size: 12px; padding: 0 .625em .3125em; /*10 5*/ text-align: right; } .welcome { margin-bottom: 3.125em; /*50*/ } .closedMessage { width: 100%; min-height: 4em; background: #B1121F; border: 3px solid #EF1927; text-align: center; vertical-align: middle; margin-bottom: 20px; color: #FFF301; } .closedMessage h2 { margin-top: 5px; color: #FFF301; } .season-dates { margin-bottom: 50px; text-align: center; } /*********************** 7. Footer ***********************/ .footer { background: #c6e5c2; border-top: 1px solid #004463; clear: both; color: #004463; font: 1.125em/1 'Lato', "Century Gothic", "Helvetica Narrow", arial, sans-serif; /*18*/ padding: 0 0 80px; width: 100%; background-size: cover; background-position: center 95%; background-color: #40BFF2; } .footer > img { position:absolute; left:0; right:0; bottom:0; } .footer a { color: #004463; } .footer a:hover { color: #e76e17; } .footer .nav { width: 100%; text-align: center; } .footer .nav ul li { display: inline-block; margin: 5px 7px; } .footer .nav ul li a { text-decoration: none; } .footer .block { /*border-bottom: 1px solid #004463;*/ display: block; text-align: center; width: 100%; padding: 15px 0; } .footer .logo, .footer .foot-address, .footer .socials2 { max-width: 200px; margin: 0 20px; display: inline-block; text-align: center; vertical-align: middle; } .socials2 { position:absolute; bottom:8px; left:50%; padding:10px 15px; min-width:215px; background:rgba(0,0,0,.3); transform:translateX(-50%); -ms-transform:translateX(-50%); z-index:1000; } .socials2 img { margin: 0 5px; } .footer .etc { clear: both; font-size: .7777777777777778em; /*14*/ /*padding-top: 15px;*/ width: 100%; text-align: center; } @media(max-width:999px) { .footer .logo, .footer .foot-address, .footer .socials2 { margin:0 auto !important; } } @media(min-width:1000px) { .homepage .footer { position:absolute; bottom:0; left:0; right:0; } } @media(max-height: 884px) { .homepage .footer { position: relative; bottom: auto; left: auto; right: auto; } } @media(min-height: 884px) { .homepage .footer { position: absolute; } } @media only screen and (max-width: 500px) { .footer .logo, .footer .foot-address, .footer .socials2 { display: block; margin: 0; } } /*********************** 8. Locator Page ***********************/ #map-canvas { border: 10px solid #073A50; } .the-list { padding-left: 20px; width: 29%; } #map-canvas img { max-width: none; } #zipSearchField { display: inline; } #zipSearchButton { display: inline; } /*********************** 9. Public Owner's Page ***********************/ .ContentHeader { margin-bottom: 30px; } .ContentHeader .top { padding-bottom: 20px; } .public-logo h2 { margin: 20px 0; } .date { font-size: .875em; font-style: italic; } .light { background: #C6E5C2; padding: 20px; } .gallery [class*='block-'] { display: block; float: none; margin-left: auto; margin-right: auto; } .notes { background: rgba(255,255,255,.25); font-size: .8125em; /*13*/ margin: 15px 0 0; padding: 10px; } .bx-wrapper .bx-viewport { background: none; border: 0; box-shadow: none; left: auto; text-align: center; } .bx-wrapper img { display: inline-block; margin: auto; } .gallery .bx-wrapper img { border: 20px solid #073A50; } .bx-wrapper .bx-pager.bx-default-pager a { background: #6DA065; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #073A50; } address { font-size: 14px; font-style: normal; line-height: 1.3; } .bx-wrapper .bx-caption { background: rgba(0,0,0,.75) !important; bottom: 4px; } [class*='block-'] td { padding: 5px; } [class*='block-'] tr:nth-child(even) { background: rgba(255,255,255,.25); } [class*='block-'] label { color: #073A50; padding-right: 12px; } #ctl00_ctl00_Cph_Cph_EventDetailsPreload ul { list-style-type: none; margin: 0; padding: 0; } #ctl00_ctl00_Cph_Cph_EventDetailsPreload ul li { margin-bottom: 10px; } .calendar-content table { table-layout: fixed; } .calendar-content th { background: #4AAFE5; color: #fff; padding: 5px; text-transform: uppercase; width: 5%; } .calendar-content td { padding: 5px 5px 20px; } .calendar-title-nav { text-align: center; } .currentMonth { color: #073A50; font: 700 1.125em 'Lato',"Century Gothic","Helvetica Narrow",arial,sans-serif; line-height: 33px; } .previous { float: left; } .next { float: right; } .maze-list { height: 400px; overflow: auto; overflow-x: hidden; } .maze-list ul { list-style: none; } .maze-list ul li { margin-bottom: 15px; } maze-list ul li:not(.visible) { display: none; } .maze-list ul li.visible { display: block; } .maze-list ul li img { max-width: 225px; max-height: 107px; display: block; margin-right: 5px; vertical-align: middle; } .maze-list ul li div { margin-top: 5px; display: block; vertical-align: middle; } /*Group Reservation Modal*/ #groupReservationModal { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,.7); display: none; z-index: 9999; overflow-y: auto; } #groupReservationModal .floater { background: #C6E5C2; border: 10px solid #073A50; position: absolute; top: 1em; left: 50%; margin-left: -25%; padding: 1em 5%; width: 50%; z-index: 9999; } #groupReservationModal .inner-wrapper { height: 100%; margin-top: 10px; position: initial; } #groupReservationModal h1 { margin: 0; margin-bottom: 20px; display: block; text-align: center; } #groupReservationModal label, #groupReservationModal input { display: block; width: 100%; } #groupReservationModal textarea { margin: 0; width: 100%; display: block; } #groupReservationModal tr { margin: 10px 0; } #groupReservationModal .date-time-select-table { margin-left: auto; margin-right: auto; display: block; } #groupReservationModal .close { position: absolute; top: 0; right: 5px; cursor: pointer !important; font-size: 20px; } .scroll-buttons { position: absolute; right: 0; top: 0; } .scroll-buttons [class*="btn"] { font-size: 1em; margin-left: 5px; padding: 8px 18px; } .scroll-buttons .btn-contact { display: none; } @media only screen and (max-width : 900px) { .scroll-buttons { margin: -10px 0 20px; position: relative; text-align: center; right: auto; top: auto; } .scroll-buttons .btn-contact { display: inline-block; } .block-50.public-logo { text-align: center; } } /*********************** 10. Maze Design Gallery and Product Pages ***********************/ .CategoryThumbs { text-align: center; } .CategoryThumbs a { font: 1.5em 'Bubblegum Sans', "Arial Black", arial, sans-serif; /*24*/ margin-bottom: 30px; text-align: center; text-decoration: none; } .CategoryThumbs img, #mainProductImage img { border: 5px solid #073A50; margin-bottom: 5px; -webkit-transition: border .3s; transition: border .3s; } .CategoryThumbs a:hover img, #mainProductImage a:hover img { border: 5px solid #BC5A14; } #mainProductImage { float: left; width: 34%; } #mainProductDetails { float: right; width: 64%; } .addthis { margin-bottom: 1em; } @media only screen and (min-width : 400px) { .CategoryThumbs a { float: left; margin-left: 15px; margin-right: 15px; } } @media only screen and (min-width : 400px) and (max-width : 550px) { .CategoryThumbs a { width: calc(100% / 2 - 16px); } .CategoryThumbs a:nth-of-type(2n + 1) { clear: both; margin-left: 0; } .CategoryThumbs a:nth-of-type(2n + 2) { margin-right: 0; } } @media only screen and (min-width : 551px) and (max-width : 750px) { .CategoryThumbs a { width: calc(100% / 3 - 21px); } .CategoryThumbs a:nth-of-type(3n + 1) { clear: both; margin-left: 0; } .CategoryThumbs a:nth-of-type(3n + 3) { margin-right: 0; } } @media only screen and (min-width : 751px) and (max-width : 950px) { .CategoryThumbs a { width: calc(100% / 4 - 24px); } .CategoryThumbs a:nth-of-type(4n + 1) { clear: both; margin-left: 0; } .CategoryThumbs a:nth-of-type(4n + 4) { margin-right: 0; } } @media only screen and (min-width : 951px) { .CategoryThumbs a { width: calc(100% / 5 - 24px); } .CategoryThumbs a:nth-of-type(5n + 1) { clear: both; margin-left: 0; } .CategoryThumbs a:nth-of-type(5n + 5) { margin-right: 0; } } /*********************** Responsive ***********************/ /*** 78.125em (1250px) ***/ @media only screen and (max-width : 78.125em) { .buckets ul li h2 { font-size: 1.375em; } } /*** 60.625em (970px) ***/ @media only screen and (max-width : 1250px) { .header .nav ul li { font-size: 18px; } } /*** 58.125em (930px) ***/ @media only screen and (max-width : 58.125em) { .buckets, .slideshow { clear: both; float: none; width: 100%; } .buckets ul { text-align: center; } .buckets ul li { display: inline-block; vertical-align: top; width: 31%; } .buckets ul li + li { margin: 0 .625em; /*10*/ } .buckets ul li + li + li { margin: 0; } .buckets ul li a[title^="Read"] { float: none; } } /*** 56.25em (900px) ***/ @media only screen and (max-width : 1000px) { .header .nav { display: none; } .toggle-menu { display: block; } .row { margin: 20px 0; } [class*="block-"] { float: none; margin: 20px 0; padding: 0; width: 100%; } [class*="block-"].light { padding: 15px; } .calendar-content { width: 76%; } } /*** 53.125em (850px) ***/ @media only screen and (max-width : 53.125em) { #mainProductImage, #mainProductDetails { width: 49%; } #groupReservationModal .floater { margin-left: -45%; width: 90%; } } /*** 40.625em (680px) ***/ @media only screen and (max-width : 40.625em) { .buckets ul li { clear: both; display: block; margin: 0 auto 100px !important; width: 55%; } .buckets ul li:last-child { margin: 0 auto 50px !important; } .footer { font-size: 1em; } #mainProductImage, #mainProductDetails { float: none; width: 100%; } #mainProductImage a { display: block; margin: auto; max-width: 350px; } #interiorSlideshow { height: 400px; } } /*** 34.375em (550px) ***/ @media only screen and (max-width : 34.375em) { .content img { float: none !important; margin-top: .625em; /*10*/ } .slideshow .bx-viewport li img { border: 5px solid #073A50; } .slideshow .bx-controls { display: none; } .slideshow .slide-text { color: #02110B; max-width: none; position: relative; right: auto; top: -.3125em; /*5*/ width: 99%; } .slideshow .text { font-size: 1.25em; /*20*/ padding: .625em; /*10*/ } .buckets ul li { width: 100%; } #mainProductImage, #mainProductDetails { float: none; width: 100%; } #interiorSlideshow { height: 350px; } } /*** 31.25em (500px) ***/ @media only screen and (max-width : 31.25em) { textarea { width: 100%; } .calendar-content { width: 100%; } .swipe { display: block; } .new-slide .bx-controls { display: none; } .new-slide { padding: .625em; /*10*/ width: 100%; } .new-slide ul li { font-size: 1em; } #mainProductImage, #mainProductDetails { float: none; width: 100%; } } /*** 25em (400px) ***/ @media only screen and (max-width : 25em) { .calendar-content th { font-size: 12px; } .calendar-content td { font-size: 14px; text-align: center; } #mainProductImage, #mainProductDetails { float: none; width: 100%; } #interiorSlideshow { height: 300px; } } iframe[name='google_conversion_frame'] { bottom: 0; position: absolute; z-index: 0; } /*********************** Contact Page ***********************/ .contact-form { margin-top: 40px; } .ErrorText { color: #BC5A14 !important; } @media only screen and (min-width : 550px) { .contact-form, .contact-content { float: left; } .contact-form { width: 40%; } .contact-content { padding-right: 30px; width: 60%; } } @media only screen and (min-width : 1000px) { .contact-form { width: 35%; } .contact-content { padding-right: 50px; width: 65%; } } /*Modified navbar and content*/ .mobile-logo { background: #40BFF2; text-align:center; position:absolute; top:41px; left:0; right:0; z-index:9; display:none; } .mobile-logo img { max-height: 50px; padding:10px; margin-bottom:-4px; } @media(max-width: 1000px) { .homepage .header { position:static } .mobile-logo { display:block; } } #main-nav-copy .logo { display:none; } .header .logo { margin-bottom:0; margin-top:0; max-width:500px; } .header { border-bottom: 3px solid #073a50; transition: .2s; background-repeat:no-repeat; } .header .nav ul li { transition: .2s; } .header.small .nav ul li:not(.logo) { padding:15px 8px; margin:0; } .header.small { background-position: center -100%; padding-top:0; background-color:#40BFF2; } .header.small li.logo { max-width:100px!important; } @media(max-width: 1550px) { .header { padding-top:0; } .header .logo { max-width: 350px; } } @media(max-width: 1375px) { .header .nav ul li { font-size: 20px; } } @media(max-width: 1250px) { .header { background-image:none; } .header li { vertical-align:middle!important; } #menu-content .logo { max-width: 150px; } } /*Banner items*/ .banner-item { /*min-height: 100vh;*/ background-size: cover!important; position:relative; height:100%; } .banner-item .text { background-color:rgba(255,255,255,.8); display:inline-block; position:absolute; top:50%; transform: translateY(-50%); -ms-transform: translateY(-50%); max-width:600px; padding:10px; text-align:center; width: calc(100% - 30px); } .banner-item .text h1 { color:#231f20; } .banner-item ul { list-style: none; padding: 0; margin: 20px 0 0 0; } .banner-item ul li { float:left; width: 50%; } .banner-item ul li:first-child:nth-last-child(1) { width:100%; } .banner-item ul li:first-child:nth-last-child(2), .banner-item ul li:first-child:nth-last-child(2) ~ li { width: 50%; } @media(min-width: 500px) { .banner-item ul li:first-child:nth-last-child(3), .banner-item ul li:first-child:nth-last-child(3) ~ li { width: 33.33%; } .banner-item ul li:first-child:nth-last-child(4), .banner-item ul li:first-child:nth-last-child(4) ~ li { width: 25%; } .banner-item .text { padding: 25px; } } .banner-item ul li img { width:60px; } .homepage-banner:nth-child(2n) .text { right:15px; } .homepage .section { padding:0 !important; } /*footer*/ .no-padding-bottom { padding-bottom:0!important; } /*home nav dots*/ #fp-nav { background: rgba(0, 0, 0, .5); display:block !important; } /*@media(max-width:816px) {*/ @media(max-width:1000px) { #fp-nav.right { display:none !important; right:0 !important; } } #fp-nav li span { background: #fff!important; } @media(max-width:1000px) { .interior .header { position:absolute; } } .fp-tableCell { height:100% !important; } .video-bg { background: rgba(0,0,0,.8); display: none; position: absolute; width: 100%; height: 100%; bottom: 0; right: 0; top: 0; z-index: 3; } .video-bg > div { height: 100%; } .touch .video-bg { display: none !important; } .video-bg > div:first-of-type { display: none; } .video-bg { display: block; } .video-bg > div:first-of-type { display: block; } .video-bg video { z-index: 1 !important; } .banner-item a:hover img { opacity:.5; } .modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; overflow-y: auto; } .modal:before { display:block; content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); } .modal .container { background: #fff; padding-top:15px; overflow-y: auto; } .modal .onethirdi { width:33.33%; margin-right:-4px; } .modal .onethirdi:nth-child(3n + 3) { padding-right:0; } @media(max-width:480px) { .modal .container { margin: 0 auto; } .video-modal .container { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); } } .modal .container { position:relative; } .video-modal iframe { padding-top: 30px; width:100%; padding-bottom:15px; } .video-modal .embed-wrapper { max-width:100%; } .modal-close { position:absolute; top:15px; right:15px; font-size:20px; z-index:100; } .modal-close:hover { cursor:pointer } .success-modal { display:block; } .success-modal .container { max-width:400px; padding-bottom:10px; } .success-modal p { font-size: 18px; } .video-bg video { min-height:100% !important; height:auto !important; } /* Blog */ .blog-wrap { max-width: 800px; margin: 30px auto; } .blog-wrap .sharethis-inline-share-buttons { margin-bottom: 25px; } .blog-wrap .embed-wrapper { max-width: 800px; } .blog-wrap p, .blog-wrap ul, .blog-wrap ol { font-size: 16px; } ol.lr { list-style: none; padding-left: 0; } .articles { max-width: 1250px; } .articles li { margin-bottom: 40px; } .articles .date, .articles .category { display: inline-block; font-size: 1em; } .articles .category { color: #999; } .articles .image, .articles .title h4, .articles header, .articles .description { margin-bottom: 15px; } .articles .title a { text-decoration: none; line-height: 1; } .articles .title h4 { line-height: 1.2; font-size: 24px; } .articles .read-more { text-align: right; } .blog-header .meta { margin-bottom: 20px; color: #999; } .blog-gallery { margin-top: 40px; } .blog-gallery ol { display: block; text-align: center; } .blog-gallery ol li { width: 50%; display: inline-block; margin-right: -5px; vertical-align: top; padding: 0 10px; } div.pagination a { background: #3894c6; color: #fff; padding: 8px 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } div.pagination span.current { padding: 8px 10px; } div.pagination span.current, div.pagination a:hover, div.pagination a:focus { background: #adc724; color: #fff; } @media only screen and (min-width: 500px) { .blog-gallery ol li { width: 25%; } } @media only screen and (min-width: 650px) { .articles li { width: 50%; float: left; padding: 0 20px; } .articles li:nth-of-type(2n+1) { clear: both; } } @media only screen and (min-width: 800px) { .blog-gallery ol li { width: 15%; } .blog-wrap p, .blog-wrap ul, .blog-wrap ol { font-size: 20px; } } @media only screen and (min-width: 1200px) { .blog-gallery ol li { margin-bottom: 20px; } .articles .title h4 { font-size: 36px; } } /* Special qr code button css */ .search button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; } .search button:before { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content: ''; z-index: 4; background: url(../images/search-icon.png); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 26px; height: 26px; display: block; } .order button { /* position: absolute; top: 0; right: 0;*/ width: 36px; height: 36px; } .order button:before { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content: ''; z-index: 4; background: url(../images/qr-icon.png); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 26px; height: 26px; display: block; } .check-order button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; } .check-order button:before { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content: ''; z-index: 4; background: url(../images/check-order-icon.png); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 26px; height: 26px; display: block; } .order label { font-size: 14px; text-transform: uppercase; } /* end order button */ /* 11. Rewards Game */ .checkpointAccordionContainer .ui-state-default, .checkpointAccordionContainer .ui-widget-content .ui-state-default, .checkpointAccordionContainer .ui-widget-header .ui-state-default, .checkpointAccordionContainer .ui-button, html .checkpointAccordionContainer .ui-button.ui-state-disabled:hover, html .checkpointAccordionContainer .ui-button.ui-state-disabled:active { border: 1px solid #073A50; background: #073A50; font-weight: normal; color: #ffffff; } .checkpointAccordionContainer .ui-state-active, .checkpointAccordionContainer .ui-widget-content .ui-state-active, .checkpointAccordionContainer .ui-widget-header .ui-state-active, .checkpointAccordionContainer a.ui-button:active, .checkpointAccordionContainer .ui-button:active, .checkpointAccordionContainer .ui-button.ui-state-active:hover { border: 1px solid #BC5A14; background: #BC5A14; font-weight: normal; color: #ffffff; } .checkpointAccordionContainer .ui-icon, .checkpointAccordionContainer .ui-widget-content .ui-icon { background-image: url('http://code.jquery.com/ui/1.13.2/themes/base/images/ui-icons_ffffff_256x240.png') } .checkpointAccordionContainer .ui-accordion-header-icon.ui-icon { position: absolute; right: 10px; top: 15px; } .checkpointAccordionContainer .ui-accordion-header { text-align: left; padding: 8px 8px 6px 40px !important; } .checkpointAccordionContainer .completed-icon { width: 30px; height: 30px; border-radius: 15px; background: #07391b; color: #fff; border: 1px solid #fff; position: absolute; left: 5px; top: 3px; padding: 5px 8px; } .checkpointAccordionContainer.ui-accordion .ui-accordion-content { padding: 20px; } .checkpointAccordionContainer .order { margin-bottom: 10px; } .checkpointAccordionContainer .order button.btnScanClass { padding: 0; margin: 0 -5px 0 0; display: inline-block; vertical-align: middle; width: 50px; height: 50px; } .checkpointAccordionContainer .order input[type="text"] { margin-bottom: 0; height: 50px; width: calc(100% - 50px); display: inline-block; vertical-align: middle; padding: 10px; } #map div, #map-canvas div { position: initial; }