From 0bd792777bdcbe47fcc4f5dacecb57325d7b0c3f Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Thu, 3 Oct 2019 09:54:53 -0400 Subject: [PATCH] testing new blocks layout and styles for mobile --- css/app.css | 2 +- functions.php | 88 +++++--- js/app.js | 75 ++++++- js/custom/pageSetup.js | 75 ++++++- parts/quick-picks.php | 5 +- scss/_kzooStyleBlocks.scss | 417 +++++++++++++++++++++++++++++++++++++ scss/app.scss | 1 + 7 files changed, 626 insertions(+), 37 deletions(-) create mode 100644 scss/_kzooStyleBlocks.scss diff --git a/css/app.css b/css/app.css index 99c21d8..571d370 100644 --- a/css/app.css +++ b/css/app.css @@ -6,4 +6,4 @@ "c d";}}@media only screen and (min-width:0em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container{grid-template-areas:"a a a a" "b b b b" "c c c c" - "d d d d";}}.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:25%}@media only screen and (max-width: 40em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:40%;}}@media only screen and (min-width:40.063em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:35%;}}.glm-photo-grid .glm-blocks-container{display:-ms-grid;display:grid;max-width:1500px;margin:0 auto;-ms-grid-rows:auto auto auto}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon{transform:rotate(0deg)}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.glm-photo-grid .glm-blocks-container .landing-page-block-image{height:100%;width:100%;background-size:cover !important;position:relative;-webkit-transition:-webkit-transform 300ms ease-in-out;transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;transition:transform 300ms ease-in-out,-webkit-transform 300ms ease-in-out}.glm-photo-grid .glm-blocks-container .landing-page-block-image::after{content:'';width:100%;height:100%;background:rgba(0,0,0,0.25);position:absolute;left:0;top:0}.glm-photo-grid .glm-blocks-container .landing-page-block-image:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.glm-photo-grid .glm-blocks-container .block-0{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:a}.glm-photo-grid .glm-blocks-container .block-1{-ms-grid-row:1;-ms-grid-column:3;grid-area:b}.glm-photo-grid .glm-blocks-container .block-2{-ms-grid-row:1;-ms-grid-column:4;grid-area:c}.glm-photo-grid .glm-blocks-container .block-3{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:d}.glm-photo-grid .glm-blocks-container .glm-block{margin:10px;overflow:hidden;position:relative}.glm-photo-grid .glm-blocks-container .glm-block:hover .glm-block-content-overlay{opacity:1}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{margin:0;color:white;position:absolute;background:rgba(0,0,0,0.65);bottom:0;line-height:1;width:100%;text-align:right;font-size:24px;font-family:azo-sans-web, sans-serif;z-index:8;text-transform:uppercase;padding:20px;text-shadow:1px 1px 4px black}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{text-align:left;}}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus{position:absolute;top:0px;right:0px;color:white;z-index:99;font-size:35px;background:rgba(0,0,0,0.6);padding:10px 13px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus .glm-block-plus-border{border:2px solid white;padding:4px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay{position:absolute;top:0;left:0;z-index:9;background:rgba(0,0,0,0.6);color:white;width:100%;height:100%}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper{height:100%;display:flex;justify-content:center;flex-direction:column}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-learn-more-link{max-width:155px;margin-left:25px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-learn-more-link:hover{color:black}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{border:2px solid #F79548;display:inline-block;max-width:155px;padding:10px 15px;background:transparent;transition:all 400ms ease-in-out;text-transform:uppercase}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{position:absolute;bottom:10px;left:10px;margin-left:0;}}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{background:black;}}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more a{transition:color 400ms ease-in-out}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover{background:#F79548;cursor:pointer}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover a{color:white !important}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more .arrow{display:inline-block;position:relative;top:0px;width:12px;height:12px;background:transparent;text-indent:-9999px;border-top:2px solid white;border-left:2px solid white;transition:all 250ms ease-in-out;text-decoration:none;color:transparent;transform:rotate(135deg);right:0}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{padding:0 25px 10px 25px;display:flex;justify-content:center;align-items:center;font-size:20px;color:white}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{text-align:left;}}@media screen and (-ms-high-contrast: none){.glm-photo-grid .glm-blocks-container .landing-page-block-image{padding:9.5vw !important}}.glm-photo-grid .ui-widget-header{background:transparent;border:none}.glm-photo-grid .ui-widget.ui-widget-content{border:none}.glm-photo-grid .content{padding:0}.glm-photo-grid .ui-tabs .ui-tabs-panel{padding:0}.glm-photo-grid .grid-button-container{display:flex;justify-content:space-between}@media only screen and (max-width: 40em){.glm-photo-grid .grid-button-container{flex-direction:column;}}.glm-photo-grid .grid-button-container div:not(:last-child){margin-right:3px}.glm-photo-grid .grid-button-container li{margin-bottom:0;flex:1;background:#131c5f}.glm-photo-grid .grid-button-container li a{display:block;height:100%;width:100%}.glm-photo-grid .grid-button-container li a:hover{cursor:pointer;background:#4b725b}.glm-photo-grid .grid-button-container li span{font-size:20px;position:relative;bottom:7px;color:white}.glm-photo-grid .grid-button-container li i.fas{display:inline-block;font-size:40px;color:white}.plus-icon{box-sizing:border-box;transition:transform 0.3s;width:24px;height:24px;transform:rotate(180deg);position:relative}.plus-icon:hover{transform:rotate(0deg)}.plus-icon::before{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg);transition:width 0.3s}.plus-icon:hover::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.plus-icon::after{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px}#sidebar{padding-top:25px;background:#f2f9fc}#sidebar .row.collapse{margin-left:14px}#sidebar li{list-style:none}#sidebar li #calendar_wrap table#wp-calendar{margin:0 auto}#sidebar a{font-size:12px}#sidebar form{margin:0 12px 0 14px}#sidebar form select{padding:0 0.5rem;border-radius:5px;height:25px;margin:0}#sidebar form select option{font-size:10px}#sidebar .small-block-grid-2{margin-top:10px}#sidebar .small-block-grid-2 li{padding:0 0.625rem 0.625rem}#sidebar .small-block-grid-2 li img{border:2px solid lightblue}#sidebar .small-block-grid-2>li:nth-of-type(2),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-left:0}#sidebar .small-block-grid-2>li:nth-of-type(3),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-bottom:20px}#sidebar h3{margin:20px 0 0}#sidebar h1{margin:0;font-size:1.5625rem;text-transform:none}#sidebar input{padding:5px 0 5px 8px;height:auto;margin:10px 0}#sidebar button{border-radius:2px;padding:0 10px}#side-nav{width:90%;padding-top:10px;background:#0088b2}#side-nav h1{font-size:1.375rem}#side-nav h2{margin-left:10px}#side-nav h2 a{color:#FFFFFF;font-weight:400}#side-nav h4{font-weight:bold;margin-left:10px}#side-nav li{list-style:none}#side-nav ul{list-style:none;margin:0 0 20px}#side-nav ul li{margin:0 -15px;padding:5px 10px 5px 25px}#side-nav ul li:hover{color:#F79548}#side-nav ul li.current{color:#73bf45}#side-nav ul li.current:hover{color:#73bf45}#side-nav ul li a{color:#FFFFFF}#side-nav ul li a:hover{color:#F79548}#side-nav ul li a.current{color:#73bf45}#side-nav ul li a.current:hover{color:#73bf45}#side-nav h3{text-transform:none;margin:0}#side-nav input{padding:5px 0 5px 8px;height:auto;margin-bottom:10px}#side-nav button{border-radius:2px;padding:0 10px}#extra{margin-top:15px}#extra p{line-height:1.3}#extra p.title{margin:0}#extra p.title#last{padding-top:10px}#extra p#message{text-transform:uppercase;color:lightblue;font-size:0.9375rem;margin:40px 0}.county-news{font-weight:bold}.current_page_item a{font-weight:bold}#side-nav ul.sidebar .current{color:#73BF45}#side-bar-nav{margin-top:50px}#header-search-wrapper{top:143px}#mobile-search-wrapper{top:88px}#mobile-search-form,#header-misc{padding:17px;float:right;position:unset}#mobile-search-form .search-wrapper,#header-misc .search-wrapper{width:100%;height:0px;position:absolute;right:0;z-index:999}#mobile-search-form .search-wrapper .searchform,#header-misc .search-wrapper .searchform{display:none;width:100%;z-index:999;height:50px;right:0;position:relative}#mobile-search-form .search-wrapper .searchform .search-input,#header-misc .search-wrapper .searchform .search-input{height:50px;float:left;width:100%;padding:0 120px 0 10px;margin:0}#mobile-search-form .search-wrapper .searchform .search-button,#header-misc .search-wrapper .searchform .search-button{position:absolute;right:0;display:block;float:left;height:50px;padding:0px 5px 0px 5px;background:#f79548;color:#FFFFFF;width:120px;top:0}#enews{min-height:275px;background:url(../assets/enews-graphic.jpg) no-repeat;background-size:cover}#enews:before{position:absolute;top:0;left:0;content:"";display:block;height:100%;width:100%;z-index:1;background-color:rgba(247,149,72,0.86)}@media only screen and (max-width: 40em){#enews .action-content{margin:15px 0;}}#enews .action-content .action-button:hover{color:rgba(247,149,72,0.86)}#travel-guide{min-height:275px;background:url(../assets/travel-guide-graphic.jpg) no-repeat;background-size:cover;float:left}#travel-guide:before{position:absolute;top:0;left:0;content:"";display:block;height:100%;width:100%;z-index:1;background-color:rgba(64,166,197,0.86)}#travel-guide .action-content .action-button:hover{color:rgba(64,166,197,0.86)}.action-item{width:50%;display:inline-block;position:relative;float:left}@media screen and (min-width: 320px) and (max-width: 1024px){.action-item{width:100%;}}.action-item .action-content{width:90%;z-index:10;padding:0 10px;position:absolute;top:50%;transform:translate(-50%, -50%);margin:0;left:50%}.action-item .action-content h2{color:#FFFFFF;text-transform:uppercase;z-index:2;font-size:36px;font-weight:normal}.action-item .action-content p{color:#FFFFFF;text-transform:uppercase;z-index:2}@media only screen and (max-width: 40em){.action-item .action-content p{font-size:16px;}}.action-item .action-content .action-button{border:2px solid #FFFFFF;font-size:20px;padding:15px 30px;color:#FFFFFF;text-transform:uppercase;font-weight:bold;z-index:2;display:inline-block;transition:all 0.5s ease}.action-item .action-content .action-button:hover{background:#FFFFFF;color:transparent;transition:all 0.5s ease;text-decoration:none}footer.main{display:block}#footer-bottom{background:#0088b2;border-top:15px solid #0a7397;padding:40px 15px;display:block;clear:both}@media only screen and (max-width: 40em){#footer-bottom{padding:10px 0 10px;}}#footer-bottom ul{margin-left:0;list-style:none;column-count:2}@media only screen and (min-width:0em) and (max-width:64em){#footer-bottom ul{column-count:1;}}#footer-bottom ul li a{color:#FFFFFF;text-transform:uppercase}@media only screen and (max-width: 40em){#footer-bottom #footer-logo{display:block;}}@media only screen and (min-width:0em) and (max-width:64em){#footer-bottom #social-media{margin-top:20px;}}#footer-bottom #social-media ul{list-style:none;display:inline-block;column-count:1}#footer-bottom #social-media ul li{display:inline-block;background:url(../assets/social-header-sprite.png) no-repeat}#footer-bottom #social-media ul li.facebook{background-position:0, 0}#footer-bottom #social-media ul li.twitter{background-position:-33px,0}#footer-bottom #social-media ul li.instagram{background-position:-64px,0}#footer-bottom #social-media ul li.youtube{background-position:-96px,0}#footer-bottom #social-media ul li.pintrest{background-position:-129px,0}#footer-bottom #social-media ul li a{display:block;width:22px;height:24px}#footer-bottom #social-media span{color:#fff;text-transform:uppercase;font-size:16px;display:block;margin-bottom:20px}#copyright{background:#0a7397;padding:10px}#copyright span{color:#fff;font-size:13px !important}@media only screen and (max-width: 40em){#copyright{padding:20px 0 35px;}}#locations-copyright-container{padding:0}#locations span.bullet{margin:0 2.5px}#copyright span.bullet{margin:0 2.5px}@media only screen and (max-width: 40em){#copyright span.bullet{display:none !important;}}#locations{padding:20px 0 0}#locations span{color:#FFFFFF;white-space:nowrap;font-size:12px}@media screen and (min-width: 1025px){#locations{float:left;}}@media only screen and (max-width: 40em){#locations{margin-bottom:20px;}}#footer_address{padding:0 60px}#footer_address h6{color:#FFFFFF;text-transform:uppercase}#footer_address span{white-space:nowrap;color:#FFFFFF;font-size:16px}@media screen and (min-width: 1025px) and (max-width: 1199px){#footer_address{padding:0 50px;}}@media only screen and (min-width:40.063em) and (max-width:64em){#footer_address{padding:0;margin:30px auto 30px;float:none;}}#connect{padding-top:20px;background:#4c4d4f}#connect ul{margin:0;list-style:none}#connect ul li{background:none;padding:0 5px;display:inline-block}#connect ul li>a{display:block;font-family:Open Sans, sans-serif;font-size:12px;color:#fff;padding:20px 18px;line-height:1.2}#connect ul li a#current{background:#0093d1}div#ui-datepicker-div{display:none}#copyright{margin:0 auto;float:none}@media only screen and (max-width: 40em){#copyright{padding-top:25px;}}#copyright span{font-size:0.6875rem;color:#FFFFFF;white-space:nowrap}#copyright a{color:#FFFFFF}@media only screen and (max-width: 40em){#copyright{padding-top:20px;}}.off-canvas-wrap{min-height:100%}.off-canvas-wrap .inner-wrap{min-height:100vh;height:100%}h1{color:#0088b2}.page-front h1{color:#0093d1;font-family:look-script,serif;font-size:48px;font-variant-ligatures:normal;font-variant-alternates:stylistic(look-script)}h2{color:#0088b2;font-weight:500}h3{color:#0088b2;font-weight:800}h4{color:#0088b2;font-weight:600}h5{color:#0088b2}h6{color:#0088b2;font-weight:600}#example.element{background-color:transparent}aside.oc-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;overflow-y:scroll;bottom:0;background-color:#0088b2;z-index:999999;cursor:pointer}aside.oc-overlay li.page_item{display:block;position:relative;padding:11px 8px 11px 22px}aside.oc-overlay .left-off-canvas-list{clear:both;margin-top:110px}aside.oc-overlay .off-canvas-listaside.oc-overlay .off-canvas-list ul li a{line-height:20px;color:#F79548;border-bottom:1px solid #b1b3b6;background-repeat:no-repeat;background-position:3px 50%}aside.oc-overlay ul.oc-destinations-nav>li>a,aside.oc-overlay ul.oc-primary-nav>li>a,aside.oc-overlay ul.oc-home-link>li>a{color:white}aside.oc-overlay li.page_item_has_children a.toggle{position:absolute;right:10px;top:8px;width:auto;text-decoration:none}aside.oc-overlay li.page_item_has_children a.toggle:before{content:url(../assets/arrow-down.png);width:20px;height:20px}aside.oc-overlay li.page_item_has_children a.toggle:hover{background:transparent}aside.oc-overlay li.page_item_has_children a.toggle.open:before{content:url(../assets/arrow-up.png)}aside.oc-overlay .off-canvas-list ul li>ul li>a{padding-left:10px;margin-left:25px;line-height:18px}#oc-client-info-container{background:#73bf45}#oc-client-info-container h2{font-size:20px;color:white}#oc-client-info-container .oc-client-info{color:white;padding:25px 0 0px 35px;max-width:300px;margin:0 auto 0 auto}.oc-overlay{list-style:none}@media only screen and (min-width:0em) and (max-width:64em){.oc-overlay .glm-top-header-left{float:left;margin-bottom:20px;padding:10px}.oc-overlay .glm-top-header-left img{max-width:200px}}.oc-overlay .oc-open{top:45px !important;opacity:1 !important;z-index:99 !important;padding-top:20px !important;padding-left:20px !important;height:100vh !important;overflow:visible}.oc-overlay ul.children{border-top:1px solid white;position:absolute;top:100vh;opacity:0;z-index:-1;width:100%;margin:0;left:0;overflow:hidden;height:0;background-color:#73bf45;transition:top 500ms ease,opacity 500ms ease;-webkit-transition:top 500ms ease,opacity 500ms ease;-moz-transition:top 500ms ease,opacity 500ms ease}.oc-overlay ul.children li{padding:5px 8px 5px 22px}.oc-overlay ul.children li a{color:white}@media only screen and (min-width:64.063em){.oc-overlay{display:none !important;}}.oc-overlay #oc-socials-container{background:white;width:100%}.oc-overlay #oc-socials{padding:0 15px;background:white;max-width:300px;margin:0 auto 0 auto}.oc-overlay #oc-socials .social-link{background-image:url(../assets/social-icons-medium-teal.png);margin-right:15px;display:inline-block;width:44px;height:44px}.oc-overlay #oc-socials .social-link.facebook{background-position:0px 0px}.oc-overlay #oc-socials .social-link.blog{background-position:0px -105px}.oc-overlay .footer-social li a{margin:0}.oc-overlay .button{display:block;margin:0 auto}.oc-overlay li a{color:#FFFFFF;font-size:17px;line-height:1.2;border-color:white;margin-bottom:5px}.oc-overlay li a:hover{color:#555555}.oc-overlay li .dropdown{list-style:none}.oc-overlay ul{list-style:none;padding:10px 0 0 0}.oc-overlay ul li a{color:#555555}.oc-overlay ul li ul{list-style:none}.oc-overlay ul li ul li a{display:inline;white-space:pre-wrap}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-left:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-right:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}body #ocSearchForm{width:80%;margin:10px auto 0 auto;float:right;position:relative;left:-15px}body #ocSearchForm input{margin-bottom:15px}body #off-canvas-connect{background-color:#333333;padding:30px 0 20px 0}body #off-canvas-connect .footer-enews{max-width:150px;background-color:orange;color:white;margin:15px auto 0 auto;text-align:center;padding:10px 0}body #off-canvas-connect .footer-social-container{max-width:270px;margin:0 auto}body #off-canvas-connect .footer-social-container .footer-social{padding-top:0}body #off-canvas-connect h2{color:#FFFFFF;font-size:20px;margin-bottom:0;text-align:center}body .oc-secondary-nav{background-color:#73bf45;margin:0;padding:25px 0 0 0}body .oc-secondary-nav li a{color:#555555}body .oc-primary-separator{max-width:300px;color:#555555;padding:0 20px;display:block;margin:0 0 20px 30px;width:80%}body #oc-overlay #oc-members-only-nav{margin:0 0 0 15px;padding:5px}body #oc-overlay #oc-members-only-nav h2{color:#555555;font-size:30px}body .oc-home-link{margin:0;padding:0}body .oc-destinations-nav{background:#0088b2;margin:0;padding:0;position:relative}body .oc-primary-nav{margin:0;padding:0 0 15px 0;position:relative}.mobile-menu-toggle{float:left;padding:12px}#menu-icon-close{background-color:#F79548;color:white;padding:5px;border-radius:50%;width:35px;text-align:center;font-weight:bold;float:right;margin:9px 10px 0 0}.wave-container{width:100%;height:60px;overflow:hidden}.wave{display:block;position:relative;height:40px;background:white}.wave:before{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;right:-25%;top:30px}.wave:after{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;left:-25%;top:-100px}#first-wave-container{background:#73bf45;display:none}#first-wave{background:#0088b2}#first-wave:before{background-color:#73bf45}#first-wave:after{background-color:#0088b2}#first-wave-alt-container{background:#73bf45}#first-wave-alt{background:#0088b2}#first-wave-alt:before{background-color:#73bf45}#first-wave-alt:after{background-color:#0088b2}#second-wave-container{background:#73bf45}#second-wave{background:#0088b2}#second-wave:before{background-color:#73bf45}#second-wave:after{background-color:#0088b2}#third-wave-container{background:#0088b2}#third-wave{background:#73bf45}#third-wave:before{background-color:#0088b2}#third-wave:after{background-color:#73bf45}.sub-menu-section>li.menu-item.oc-collapsed{max-height:0;opacity:0;padding:0}.oc-hidden{height:0;padding:0 !important;overflow:hidden}.sub-menu-section>li.menu-item{opacity:1;transition:padding 400ms ease,max-height 400ms ease;-webkit-transition:padding 400ms ease,max-height 400ms ease;-moz-transition:padding 400ms ease,max-height 400ms ease;background:rgba(255,255,255,0);padding-left:45px !important;position:relative}#offcanvas-logo{position:absolute;left:140px;transform:translateX(-50%)}#social-media-oc{padding-left:0;background:#73bf45}#social-media-oc ul{list-style:none;display:inline-block;column-count:1;margin:0}#social-media-oc ul li{display:inline-block;margin:0 15px;background:url(../assets/social-header-sprite.png) no-repeat}#social-media-oc ul li.facebook{background-position:0, 0}#social-media-oc ul li.twitter{background-position:-33px,0}#social-media-oc ul li.instagram{background-position:-64px,0}#social-media-oc ul li.youtube{background-position:-96px,0}#social-media-oc ul li.pintrest{background-position:-129px,0}#social-media-oc ul li a{display:block;width:22px;height:24px}#social-media-oc h2{color:#fff;text-transform:uppercase;font-size:20px;display:block;max-width:210px;margin:15px auto 20px auto;text-align:left}#glt-translate-trigger{z-index:999999 !important} \ No newline at end of file + "d d d d";}}.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:25%}@media only screen and (max-width: 40em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:40%;}}@media only screen and (min-width:40.063em) and (max-width:64em){.glm-photo-grid .checkin.glm-blocks-container .landing-page-block-image{padding:35%;}}.glm-photo-grid .glm-blocks-container{display:-ms-grid;display:grid;max-width:1500px;margin:0 auto;-ms-grid-rows:auto auto auto}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon{transform:rotate(0deg)}.glm-photo-grid .glm-blocks-container .block-hover:hover .plus-icon::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.glm-photo-grid .glm-blocks-container .landing-page-block-image{height:100%;width:100%;background-size:cover !important;position:relative;-webkit-transition:-webkit-transform 300ms ease-in-out;transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;transition:transform 300ms ease-in-out,-webkit-transform 300ms ease-in-out}.glm-photo-grid .glm-blocks-container .landing-page-block-image::after{content:'';width:100%;height:100%;background:rgba(0,0,0,0.25);position:absolute;left:0;top:0}.glm-photo-grid .glm-blocks-container .landing-page-block-image:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.glm-photo-grid .glm-blocks-container .block-0{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:a}.glm-photo-grid .glm-blocks-container .block-1{-ms-grid-row:1;-ms-grid-column:3;grid-area:b}.glm-photo-grid .glm-blocks-container .block-2{-ms-grid-row:1;-ms-grid-column:4;grid-area:c}.glm-photo-grid .glm-blocks-container .block-3{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:d}.glm-photo-grid .glm-blocks-container .glm-block{margin:10px;overflow:hidden;position:relative}.glm-photo-grid .glm-blocks-container .glm-block:hover .glm-block-content-overlay{opacity:1}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{margin:0;color:white;position:absolute;background:rgba(0,0,0,0.65);bottom:0;line-height:1;width:100%;text-align:right;font-size:24px;font-family:azo-sans-web, sans-serif;z-index:8;text-transform:uppercase;padding:20px;text-shadow:1px 1px 4px black}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-title{text-align:left;}}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus{position:absolute;top:0px;right:0px;color:white;z-index:99;font-size:35px;background:rgba(0,0,0,0.6);padding:10px 13px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-plus .glm-block-plus-border{border:2px solid white;padding:4px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay{position:absolute;top:0;left:0;z-index:9;background:rgba(0,0,0,0.6);color:white;width:100%;height:100%}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper{height:100%;display:flex;justify-content:center;flex-direction:column}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-learn-more-link{max-width:155px;margin-left:25px}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-learn-more-link:hover{color:black}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{border:2px solid #F79548;display:inline-block;max-width:155px;padding:10px 15px;background:transparent;transition:all 400ms ease-in-out;text-transform:uppercase}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{position:absolute;bottom:10px;left:10px;margin-left:0;}}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more{background:black;}}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more a{transition:color 400ms ease-in-out}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover{background:#F79548;cursor:pointer}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more:hover a{color:white !important}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-learn-more .arrow{display:inline-block;position:relative;top:0px;width:12px;height:12px;background:transparent;text-indent:-9999px;border-top:2px solid white;border-left:2px solid white;transition:all 250ms ease-in-out;text-decoration:none;color:transparent;transform:rotate(135deg);right:0}.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{padding:0 25px 10px 25px;display:flex;justify-content:center;align-items:center;font-size:20px;color:white}@media only screen and (max-width: 40em){.glm-photo-grid .glm-blocks-container .glm-block .glm-block-content-overlay .glm-block-content-wrapper .glm-block-content{text-align:left;}}@media screen and (-ms-high-contrast: none){.glm-photo-grid .glm-blocks-container .landing-page-block-image{padding:9.5vw !important}}.glm-photo-grid .ui-widget-header{background:transparent;border:none}.glm-photo-grid .ui-widget.ui-widget-content{border:none}.glm-photo-grid .content{padding:0}.glm-photo-grid .ui-tabs .ui-tabs-panel{padding:0}.glm-photo-grid .grid-button-container{display:flex;justify-content:space-between}@media only screen and (max-width: 40em){.glm-photo-grid .grid-button-container{flex-direction:column;}}.glm-photo-grid .grid-button-container div:not(:last-child){margin-right:3px}.glm-photo-grid .grid-button-container li{margin-bottom:0;flex:1;background:#131c5f}.glm-photo-grid .grid-button-container li a{display:block;height:100%;width:100%}.glm-photo-grid .grid-button-container li a:hover{cursor:pointer;background:#4b725b}.glm-photo-grid .grid-button-container li span{font-size:20px;position:relative;bottom:7px;color:white}.glm-photo-grid .grid-button-container li i.fas{display:inline-block;font-size:40px;color:white}.plus-icon{box-sizing:border-box;transition:transform 0.3s;width:24px;height:24px;transform:rotate(180deg);position:relative}.plus-icon:hover{transform:rotate(0deg)}.plus-icon::before{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg);transition:width 0.3s}.plus-icon:hover::before{content:'';display:block;width:0px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px;transform:rotate(90deg)}.plus-icon::after{content:'';display:block;width:24px;height:0px;border-bottom:solid 2px white;position:absolute;bottom:11px}#sidebar{padding-top:25px;background:#f2f9fc}#sidebar .row.collapse{margin-left:14px}#sidebar li{list-style:none}#sidebar li #calendar_wrap table#wp-calendar{margin:0 auto}#sidebar a{font-size:12px}#sidebar form{margin:0 12px 0 14px}#sidebar form select{padding:0 0.5rem;border-radius:5px;height:25px;margin:0}#sidebar form select option{font-size:10px}#sidebar .small-block-grid-2{margin-top:10px}#sidebar .small-block-grid-2 li{padding:0 0.625rem 0.625rem}#sidebar .small-block-grid-2 li img{border:2px solid lightblue}#sidebar .small-block-grid-2>li:nth-of-type(2),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-left:0}#sidebar .small-block-grid-2>li:nth-of-type(3),#sidebar .small-block-grid-2>li:nth-of-type(4){padding-bottom:20px}#sidebar h3{margin:20px 0 0}#sidebar h1{margin:0;font-size:1.5625rem;text-transform:none}#sidebar input{padding:5px 0 5px 8px;height:auto;margin:10px 0}#sidebar button{border-radius:2px;padding:0 10px}#side-nav{width:90%;padding-top:10px;background:#0088b2}#side-nav h1{font-size:1.375rem}#side-nav h2{margin-left:10px}#side-nav h2 a{color:#FFFFFF;font-weight:400}#side-nav h4{font-weight:bold;margin-left:10px}#side-nav li{list-style:none}#side-nav ul{list-style:none;margin:0 0 20px}#side-nav ul li{margin:0 -15px;padding:5px 10px 5px 25px}#side-nav ul li:hover{color:#F79548}#side-nav ul li.current{color:#73bf45}#side-nav ul li.current:hover{color:#73bf45}#side-nav ul li a{color:#FFFFFF}#side-nav ul li a:hover{color:#F79548}#side-nav ul li a.current{color:#73bf45}#side-nav ul li a.current:hover{color:#73bf45}#side-nav h3{text-transform:none;margin:0}#side-nav input{padding:5px 0 5px 8px;height:auto;margin-bottom:10px}#side-nav button{border-radius:2px;padding:0 10px}#extra{margin-top:15px}#extra p{line-height:1.3}#extra p.title{margin:0}#extra p.title#last{padding-top:10px}#extra p#message{text-transform:uppercase;color:lightblue;font-size:0.9375rem;margin:40px 0}.county-news{font-weight:bold}.current_page_item a{font-weight:bold}#side-nav ul.sidebar .current{color:#73BF45}#side-bar-nav{margin-top:50px}#header-search-wrapper{top:143px}#mobile-search-wrapper{top:88px}#mobile-search-form,#header-misc{padding:17px;float:right;position:unset}#mobile-search-form .search-wrapper,#header-misc .search-wrapper{width:100%;height:0px;position:absolute;right:0;z-index:999}#mobile-search-form .search-wrapper .searchform,#header-misc .search-wrapper .searchform{display:none;width:100%;z-index:999;height:50px;right:0;position:relative}#mobile-search-form .search-wrapper .searchform .search-input,#header-misc .search-wrapper .searchform .search-input{height:50px;float:left;width:100%;padding:0 120px 0 10px;margin:0}#mobile-search-form .search-wrapper .searchform .search-button,#header-misc .search-wrapper .searchform .search-button{position:absolute;right:0;display:block;float:left;height:50px;padding:0px 5px 0px 5px;background:#f79548;color:#FFFFFF;width:120px;top:0}#enews{min-height:275px;background:url(../assets/enews-graphic.jpg) no-repeat;background-size:cover}#enews:before{position:absolute;top:0;left:0;content:"";display:block;height:100%;width:100%;z-index:1;background-color:rgba(247,149,72,0.86)}@media only screen and (max-width: 40em){#enews .action-content{margin:15px 0;}}#enews .action-content .action-button:hover{color:rgba(247,149,72,0.86)}#travel-guide{min-height:275px;background:url(../assets/travel-guide-graphic.jpg) no-repeat;background-size:cover;float:left}#travel-guide:before{position:absolute;top:0;left:0;content:"";display:block;height:100%;width:100%;z-index:1;background-color:rgba(64,166,197,0.86)}#travel-guide .action-content .action-button:hover{color:rgba(64,166,197,0.86)}.action-item{width:50%;display:inline-block;position:relative;float:left}@media screen and (min-width: 320px) and (max-width: 1024px){.action-item{width:100%;}}.action-item .action-content{width:90%;z-index:10;padding:0 10px;position:absolute;top:50%;transform:translate(-50%, -50%);margin:0;left:50%}.action-item .action-content h2{color:#FFFFFF;text-transform:uppercase;z-index:2;font-size:36px;font-weight:normal}.action-item .action-content p{color:#FFFFFF;text-transform:uppercase;z-index:2}@media only screen and (max-width: 40em){.action-item .action-content p{font-size:16px;}}.action-item .action-content .action-button{border:2px solid #FFFFFF;font-size:20px;padding:15px 30px;color:#FFFFFF;text-transform:uppercase;font-weight:bold;z-index:2;display:inline-block;transition:all 0.5s ease}.action-item .action-content .action-button:hover{background:#FFFFFF;color:transparent;transition:all 0.5s ease;text-decoration:none}footer.main{display:block}#footer-bottom{background:#0088b2;border-top:15px solid #0a7397;padding:40px 15px;display:block;clear:both}@media only screen and (max-width: 40em){#footer-bottom{padding:10px 0 10px;}}#footer-bottom ul{margin-left:0;list-style:none;column-count:2}@media only screen and (min-width:0em) and (max-width:64em){#footer-bottom ul{column-count:1;}}#footer-bottom ul li a{color:#FFFFFF;text-transform:uppercase}@media only screen and (max-width: 40em){#footer-bottom #footer-logo{display:block;}}@media only screen and (min-width:0em) and (max-width:64em){#footer-bottom #social-media{margin-top:20px;}}#footer-bottom #social-media ul{list-style:none;display:inline-block;column-count:1}#footer-bottom #social-media ul li{display:inline-block;background:url(../assets/social-header-sprite.png) no-repeat}#footer-bottom #social-media ul li.facebook{background-position:0, 0}#footer-bottom #social-media ul li.twitter{background-position:-33px,0}#footer-bottom #social-media ul li.instagram{background-position:-64px,0}#footer-bottom #social-media ul li.youtube{background-position:-96px,0}#footer-bottom #social-media ul li.pintrest{background-position:-129px,0}#footer-bottom #social-media ul li a{display:block;width:22px;height:24px}#footer-bottom #social-media span{color:#fff;text-transform:uppercase;font-size:16px;display:block;margin-bottom:20px}#copyright{background:#0a7397;padding:10px}#copyright span{color:#fff;font-size:13px !important}@media only screen and (max-width: 40em){#copyright{padding:20px 0 35px;}}#locations-copyright-container{padding:0}#locations span.bullet{margin:0 2.5px}#copyright span.bullet{margin:0 2.5px}@media only screen and (max-width: 40em){#copyright span.bullet{display:none !important;}}#locations{padding:20px 0 0}#locations span{color:#FFFFFF;white-space:nowrap;font-size:12px}@media screen and (min-width: 1025px){#locations{float:left;}}@media only screen and (max-width: 40em){#locations{margin-bottom:20px;}}#footer_address{padding:0 60px}#footer_address h6{color:#FFFFFF;text-transform:uppercase}#footer_address span{white-space:nowrap;color:#FFFFFF;font-size:16px}@media screen and (min-width: 1025px) and (max-width: 1199px){#footer_address{padding:0 50px;}}@media only screen and (min-width:40.063em) and (max-width:64em){#footer_address{padding:0;margin:30px auto 30px;float:none;}}#connect{padding-top:20px;background:#4c4d4f}#connect ul{margin:0;list-style:none}#connect ul li{background:none;padding:0 5px;display:inline-block}#connect ul li>a{display:block;font-family:Open Sans, sans-serif;font-size:12px;color:#fff;padding:20px 18px;line-height:1.2}#connect ul li a#current{background:#0093d1}div#ui-datepicker-div{display:none}#copyright{margin:0 auto;float:none}@media only screen and (max-width: 40em){#copyright{padding-top:25px;}}#copyright span{font-size:0.6875rem;color:#FFFFFF;white-space:nowrap}#copyright a{color:#FFFFFF}@media only screen and (max-width: 40em){#copyright{padding-top:20px;}}.off-canvas-wrap{min-height:100%}.off-canvas-wrap .inner-wrap{min-height:100vh;height:100%}h1{color:#0088b2}.page-front h1{color:#0093d1;font-family:look-script,serif;font-size:48px;font-variant-ligatures:normal;font-variant-alternates:stylistic(look-script)}h2{color:#0088b2;font-weight:500}h3{color:#0088b2;font-weight:800}h4{color:#0088b2;font-weight:600}h5{color:#0088b2}h6{color:#0088b2;font-weight:600}#example.element{background-color:transparent}.home-feed-post{margin-bottom:20px}input[type="submit"].blogbutton{border-radius:3px;color:#FFFFFF;border:2px solid #FFFFFF;font-weight:bold;font-size:13px;padding:2px 5px;margin-top:-10px;text-transform:uppercase}input[type="submit"].blogbutton:hover{cursor:pointer;background:#FFFFFF;border:2px solid #035C84;color:white}#blog-posts-over .entry-meta{text-align:center;color:#757575;font-size:12px}#blog-posts-over>div{margin:25px 0}#blog-side-info #searchform{margin-bottom:30px}#blog-side-info p{margin-bottom:0}@media only screen and (max-width: 40em){#blog-side-info-wrapper{float:none;margin:0 auto;clear:both}#blog-side-info{padding-left:0;border-left:0}#blog-side-info ul{margin-left:0;margin-top:10px}#blog-side-info #searchform{padding:35px 0}#blog-side-info #searchform #s{width:100%}}#blog-side-info{padding-right:10px}#blog-side-info ul{list-style-type:none}.blog-archive .featured-image-wrap,.blog-home .featured-image-wrap{display:none}body .home-feed-posts .front-page-blog-image,body #feed .front-page-event-image{padding:33%}@media only screen and (min-width:40.063em) and (max-width:64em){body .home-feed-posts .front-page-blog-image,body #feed .front-page-event-image{padding:25%;max-width:600px;margin:0 auto;}}@media only screen and (max-width: 40em){body .home-feed-posts .front-page-blog-image,body #feed .front-page-event-image{padding:38%;max-width:600px;margin:0 auto;}}body .home-feed-posts .front-page-blog-image{position:relative}@media only screen and (min-width:0em) and (max-width:64em){body .home-feed-posts .front-page-blog-image{margin-top:15px}}body .home-feed-posts .home-feed-post-content{float:none;margin:0 auto;clear:both}.blog-home-inner-row{position:relative;height:100%;overflow:hidden}body #home-feed-posts{opacity:0;margin-bottom:25px}body .home-feed-posts .home-feed-post:hover .front-page-post-content-container{bottom:0 !important}.blog-overlay{opacity:.7 !important;background-color:rgba(0,0,0,0.65)}.blog-overlay .block-text{opacity:1}@media only screen and (min-width: 64.063em){body .home-feed-posts h2{font-size:24px}body .home-feed-posts .front-page-post-content-container{padding:10px}}body .home-feed-posts .home-feed-post{padding:10px}body .home-feed-posts .front-page-post-content-container{padding:20px;padding:10px 20px;position:absolute;width:100%;bottom:0;background-color:#22CDEC;transition:350ms ease-in-out bottom}@media only screen and (min-width:0em) and (max-width:64em){body .home-feed-posts .front-page-post-content-container{opacity:0;background-color:#000000;}}body .home-feed-posts .front-page-post-content-container h2 a{color:white;opacity:1}body .home-feed-posts .front-page-post-content-container div{color:white}#blog-feed-front .blog-feed-img{margin-bottom:17px}#blog-feed-front .blog-feed-img img{box-shadow:2px 2px 5px 0 rgba(0,0,0,0.55);-ms-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.55);-moz-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.55);-webkit-box-shadow:2px 2px 5px 0 rgba(0,0,0,0.55)}#blog-feed-front .blog-feed-content h4{margin-bottom:0}#blog-feed-front .blog-feed-content h4 a{color:#0088b2}#blog-feed-front .blog-feed-content h4 a:hover{color:#73bf45}#blog-feed-front .blog-feed-content p.blog-feed-date{font-size:0.875rem;font-style:italic;margin:-10px 0 15px}#blog-feed-front .blog-feed-content a.read-more{font-size:1.5rem;font-family:"azo-sans";font-style:italic}.home-feed-post{padding:0 0 25px 0}@media only screen and (max-width: 40em){.home-feed-post>*{text-align:center}}input[type="submit"].blogbutton{border-radius:3px;background:#73bf45 !important;color:#FFFFFF;border:2px solid #73bf45;font-weight:bold;font-size:13px;padding:2px 5px;margin-top:-10px;text-transform:uppercase}input[type="submit"].blogbutton:hover{cursor:pointer;background:#FFFFFF;border:2px solid #FFFFFF;color:white}#blog-posts-over article{display:inline-block;width:100%}#blog-posts-over article .entry-header{background:transparent;box-shadow:none;font-size:22px}#blog-posts-over article .entry-header h2{font-size:22px}#blog-posts-over article a.read-more{color:#73bf45;font-weight:bold;font-size:13px;padding:0 3px;border:2px solid #FFFFFF;text-transform:uppercase}#blog-posts-over article a.read-more:hover{background:#FFFFFF;border:2px solid #73bf45;color:#73bf45}#blog-posts-over article .entry-header{margin-bottom:10px}#blog-posts-over article .entry-header .entry-title{line-height:1;margin-bottom:10px;font-size:26px}#blog-posts-over article .entry-header .meta.date{font-size:13px;font-weight:bold}#blog-posts-over .entry-meta{text-align:center;color:#757575;font-size:12px}#blog-posts-over>div{margin:40px 0}#blog-side-info{background:#000000}#blog-side-info #searchform{margin-bottom:30px;padding-top:30px;padding-right:12px}#blog-side-info p{margin-bottom:0}@media only screen and (max-width: 40em){#blog-side-info-wrapper{float:none;margin:0 auto;clear:both}#blog-side-info{padding-left:0;border-left:0}#blog-side-info ul{margin-left:0;margin-top:10px}#blog-side-info #searchform{padding:35px 0}#blog-side-info #searchform #s{width:100%}}#blog-side-info-wrapper{margin-top:20px}#blog-side-info-wrapper ul.footer-social{margin:0;float:left}#blog-side-info-wrapper ul.footer-social li span#blogShareThis{position:relative;top:-8px}#blog-side-info-wrapper ul.footer-social li a{margin:0px 3px}#blog-side-info{padding-right:10px;margin-top:40px;clear:both}#blog-side-info ul{list-style-type:none}#blog-side-info a{color:#FFFFFF}#blog-side-info p{color:#73bf45}#blog-side-info li{padding:6px 0px;line-height:1.1}.blog-featured{height:250px;background-size:cover;background-repeat:no-repeat;background-position:center}.blog-featured-home,.blog-featured-archive{height:250px;float:left;background-size:cover;background-repeat:no-repeat;background-position:center}#blog-posts-over h2{font-size:22px;color:#0088b2 !important}#blog-posts-over h2 a{color:#0088b2 !important}#blog-posts-over h2 a:hover{text-decoration:underline}.pf-content p{margin-bottom:0px}#category-menu ul li{background-color:white;float:left;padding:3px 7px;margin:3px 4px;list-style-type:none;border:2px solid black;display:inline;border-radius:5px}div#category-menu{max-height:110px;min-height:88px;margin:0}#category-menu ul li a{color:white}.categoryLinksHeader{padding:0px 0px 0px;color:black;line-height:1;margin:9px 0 0;font-size:20px}article{line-height:120%}.blog-excerpt-date{text-align:center}.meta{font-size:14px}.addthis_counter.addthis_pill_style{float:right}aside.oc-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;overflow-y:scroll;bottom:0;background-color:#0088b2;z-index:999999;cursor:pointer}aside.oc-overlay li.page_item{display:block;position:relative;padding:11px 8px 11px 22px}aside.oc-overlay .left-off-canvas-list{clear:both;margin-top:110px}aside.oc-overlay .off-canvas-listaside.oc-overlay .off-canvas-list ul li a{line-height:20px;color:#F79548;border-bottom:1px solid #b1b3b6;background-repeat:no-repeat;background-position:3px 50%}aside.oc-overlay ul.oc-destinations-nav>li>a,aside.oc-overlay ul.oc-primary-nav>li>a,aside.oc-overlay ul.oc-home-link>li>a{color:white}aside.oc-overlay li.page_item_has_children a.toggle{position:absolute;right:10px;top:8px;width:auto;text-decoration:none}aside.oc-overlay li.page_item_has_children a.toggle:before{content:url(../assets/arrow-down.png);width:20px;height:20px}aside.oc-overlay li.page_item_has_children a.toggle:hover{background:transparent}aside.oc-overlay li.page_item_has_children a.toggle.open:before{content:url(../assets/arrow-up.png)}aside.oc-overlay .off-canvas-list ul li>ul li>a{padding-left:10px;margin-left:25px;line-height:18px}#oc-client-info-container{background:#73bf45}#oc-client-info-container h2{font-size:20px;color:white}#oc-client-info-container .oc-client-info{color:white;padding:25px 0 0px 35px;max-width:300px;margin:0 auto 0 auto}.oc-overlay{list-style:none}@media only screen and (min-width:0em) and (max-width:64em){.oc-overlay .glm-top-header-left{float:left;margin-bottom:20px;padding:10px}.oc-overlay .glm-top-header-left img{max-width:200px}}.oc-overlay .oc-open{top:45px !important;opacity:1 !important;z-index:99 !important;padding-top:20px !important;padding-left:20px !important;height:100vh !important;overflow:visible}.oc-overlay ul.children{border-top:1px solid white;position:absolute;top:100vh;opacity:0;z-index:-1;width:100%;margin:0;left:0;overflow:hidden;height:0;background-color:#73bf45;transition:top 500ms ease,opacity 500ms ease;-webkit-transition:top 500ms ease,opacity 500ms ease;-moz-transition:top 500ms ease,opacity 500ms ease}.oc-overlay ul.children li{padding:5px 8px 5px 22px}.oc-overlay ul.children li a{color:white}@media only screen and (min-width:64.063em){.oc-overlay{display:none !important;}}.oc-overlay #oc-socials-container{background:white;width:100%}.oc-overlay #oc-socials{padding:0 15px;background:white;max-width:300px;margin:0 auto 0 auto}.oc-overlay #oc-socials .social-link{background-image:url(../assets/social-icons-medium-teal.png);margin-right:15px;display:inline-block;width:44px;height:44px}.oc-overlay #oc-socials .social-link.facebook{background-position:0px 0px}.oc-overlay #oc-socials .social-link.blog{background-position:0px -105px}.oc-overlay .footer-social li a{margin:0}.oc-overlay .button{display:block;margin:0 auto}.oc-overlay li a{color:#FFFFFF;font-size:17px;line-height:1.2;border-color:white;margin-bottom:5px}.oc-overlay li a:hover{color:#555555}.oc-overlay li .dropdown{list-style:none}.oc-overlay ul{list-style:none;padding:10px 0 0 0}.oc-overlay ul li a{color:#555555}.oc-overlay ul li ul{list-style:none}.oc-overlay ul li ul li a{display:inline;white-space:pre-wrap}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-left:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}.offcavas-social-list{list-style:none;margin-top:0;margin-bottom:1.0625rem;margin-left:-1.375rem;margin-right:0;overflow:hidden;padding:0;margin-right:auto}.offcavas-social-list>li{display:block;float:left;list-style:none;margin-left:1.375rem}.offcavas-social-list>li>*{display:block}body #ocSearchForm{width:80%;margin:10px auto 0 auto;float:right;position:relative;left:-15px}body #ocSearchForm input{margin-bottom:15px}body #off-canvas-connect{background-color:#333333;padding:30px 0 20px 0}body #off-canvas-connect .footer-enews{max-width:150px;background-color:orange;color:white;margin:15px auto 0 auto;text-align:center;padding:10px 0}body #off-canvas-connect .footer-social-container{max-width:270px;margin:0 auto}body #off-canvas-connect .footer-social-container .footer-social{padding-top:0}body #off-canvas-connect h2{color:#FFFFFF;font-size:20px;margin-bottom:0;text-align:center}body .oc-secondary-nav{background-color:#73bf45;margin:0;padding:25px 0 0 0}body .oc-secondary-nav li a{color:#555555}body .oc-primary-separator{max-width:300px;color:#555555;padding:0 20px;display:block;margin:0 0 20px 30px;width:80%}body #oc-overlay #oc-members-only-nav{margin:0 0 0 15px;padding:5px}body #oc-overlay #oc-members-only-nav h2{color:#555555;font-size:30px}body .oc-home-link{margin:0;padding:0}body .oc-destinations-nav{background:#0088b2;margin:0;padding:0;position:relative}body .oc-primary-nav{margin:0;padding:0 0 15px 0;position:relative}.mobile-menu-toggle{float:left;padding:12px}#menu-icon-close{background-color:#F79548;color:white;padding:5px;border-radius:50%;width:35px;text-align:center;font-weight:bold;float:right;margin:9px 10px 0 0}.wave-container{width:100%;height:60px;overflow:hidden}.wave{display:block;position:relative;height:40px;background:white}.wave:before{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;right:-25%;top:30px}.wave:after{content:"";display:block;position:absolute;border-radius:100%;width:100%;height:150px;left:-25%;top:-100px}#first-wave-container{background:#73bf45;display:none}#first-wave{background:#0088b2}#first-wave:before{background-color:#73bf45}#first-wave:after{background-color:#0088b2}#first-wave-alt-container{background:#73bf45}#first-wave-alt{background:#0088b2}#first-wave-alt:before{background-color:#73bf45}#first-wave-alt:after{background-color:#0088b2}#second-wave-container{background:#73bf45}#second-wave{background:#0088b2}#second-wave:before{background-color:#73bf45}#second-wave:after{background-color:#0088b2}#third-wave-container{background:#0088b2}#third-wave{background:#73bf45}#third-wave:before{background-color:#0088b2}#third-wave:after{background-color:#73bf45}.sub-menu-section>li.menu-item.oc-collapsed{max-height:0;opacity:0;padding:0}.oc-hidden{height:0;padding:0 !important;overflow:hidden}.sub-menu-section>li.menu-item{opacity:1;transition:padding 400ms ease,max-height 400ms ease;-webkit-transition:padding 400ms ease,max-height 400ms ease;-moz-transition:padding 400ms ease,max-height 400ms ease;background:rgba(255,255,255,0);padding-left:45px !important;position:relative}#offcanvas-logo{position:absolute;left:140px;transform:translateX(-50%)}#social-media-oc{padding-left:0;background:#73bf45}#social-media-oc ul{list-style:none;display:inline-block;column-count:1;margin:0}#social-media-oc ul li{display:inline-block;margin:0 15px;background:url(../assets/social-header-sprite.png) no-repeat}#social-media-oc ul li.facebook{background-position:0, 0}#social-media-oc ul li.twitter{background-position:-33px,0}#social-media-oc ul li.instagram{background-position:-64px,0}#social-media-oc ul li.youtube{background-position:-96px,0}#social-media-oc ul li.pintrest{background-position:-129px,0}#social-media-oc ul li a{display:block;width:22px;height:24px}#social-media-oc h2{color:#fff;text-transform:uppercase;font-size:20px;display:block;max-width:210px;margin:15px auto 20px auto;text-align:left}#glt-translate-trigger{z-index:999999 !important} \ No newline at end of file diff --git a/functions.php b/functions.php index f9c39c2..7ee98f6 100644 --- a/functions.php +++ b/functions.php @@ -329,49 +329,79 @@ if (!function_exists('action_item_blocks')) { function action_item_blocks( $atts ){ $out = ''; - extract(shortcode_atts( - array('category' => '-1'), $atts, 'glm-blocks') - ); + $atts = shortcode_atts(array('category' => '-1', "viewport" => "desktop"), $atts); + if(function_exists('fetch_blocks_by_slug')): $category = filter_var($atts['category'], FILTER_SANITIZE_STRING); fetch_blocks_by_slug($category); $blocks = fetch_blocks_by_slug($category); - $out .= "
"; + if($atts['viewport'] === "desktop"){ + $out .= "
"; + }else if($atts['viewport'] === "mobile"){ + $out .= "
"; + } $count = 0; + foreach ($blocks as $block): $post_image_id = get_post_thumbnail_id($block->ID); $thumbnail = wp_get_attachment_image_src( $post_image_id, 'large')[0]; $hover = ($block->url) ? "block-hover" : "block-no-hover"; - $out .= "
"; - if($category !== "quick-picks" && $block->url){ - $out .= 'externalUrl)? ' target="_blank"':'').'>'; - } - $out .= '
'; - $out .= '
'; - // if($block->url): - // $out .= 'externalUrl)? ' target="_blank"':'').'>'; - // endif; - $out .= '
'; - // if($block->url): - // $out .= '
'; - // endif; - $out .= '
'.$block->post_title.'
'; - if($category !== "quick-picks" && $block->url){ - $out .= ''; + // DESKTOP MARKUP + + if($atts['viewport'] === "desktop"){ + + $out .= "
"; + if($category !== "quick-picks" && $block->url){ + $out .= 'externalUrl)? ' target="_blank"':'').'>'; + } + $out .= '
'; + $out .= '
'; + // if($block->url): + // $out .= 'externalUrl)? ' target="_blank"':'').'>'; + // endif; + $out .= '
'; + // if($block->url): + // $out .= '
'; + // endif; + $out .= '
'.$block->post_title.'
'; + if($category !== "quick-picks" && $block->url){ + $out .= ''; + } + $out .= '
'; + $count++; + + // MOBILE MARKUP + }else if($atts['viewport'] === "mobile"){ + + $out .= "
+
+
+
+
+
+
+

$block->post_title

+
".text_excerpt($block->post_content) . "
+
+
+
+
"; + $count++; } - $out .= '
'; - $count++; + endforeach; $out .= '
'; endif; + + return $out; }; }; diff --git a/js/app.js b/js/app.js index cd8c2cd..28e88f2 100644 --- a/js/app.js +++ b/js/app.js @@ -328,8 +328,77 @@ $(document).ready(function () { let url = $(this).children('a').attr('href'); $(this).on("click", function(){ window.location = url; - }) - } + }); + }; }); - + + $.fn.isInViewport = function(offset) { + var elementTop = $(this).offset().top; + var elementBottom = elementTop + $(this).outerHeight(); + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + var center = (viewportBottom + viewportTop) / 2 + parseInt(offset); + return [elementBottom > viewportTop && elementTop < center,$(this)]; + }; + if( $(window).width() > 1023){ + $('.front-page-post-content-container').each(function(index, value){ + var title_height = $(this).find('h2').find('a').outerHeight(); + var height = $(this).outerHeight(); + var offset = height - (title_height + 10); + $(this).css("bottom", "-"+offset+"px"); + }) + + var image; + $('.home-feed-post').hover( + function(){ + var details = $(this).find('.front-page-post-content-container'); + var details_height = details.outerHeight(); + $(this).data("top", details_height); + image = $(this).find('.front-page-blog-image'); + image.animate({bottom:details_height}, 400, function() { + //callback + }); + }, function(){ + details_height = $(this).data("top"); + image.animate({bottom:0}, 400, function() { + //callback + }); + } + ); + } + var posts = $('.home-feed-post'); + var scrolled = 0; + $(window).on("scroll", function() { + var page_position = $(window).scrollTop(); + if( $(window).width() < 1024 ){ + $.each(posts, function(){ + if( $(this).length > 0){ + + var test_scroll = $(this).isInViewport(-75); + if( test_scroll[0]){ + $(this).find(".overlay").addClass('blog-overlay'); + $(this).find(".overlay").css("background-color", "rbga(0,0,0, .7)"); + }else{ + $(this).find(".overlay").removeClass('blog-overlay'); + $(this).find(".overlay").css("background-color", "rbga(0,0,0, 0)"); + } + } + }); + } + if($("#home-feed-posts").length ){ + if($("#home-feed-posts").isInViewport(100)[0]){ + $('#home-feed-posts').css("opacity", 1); + $('#home-feed-posts').addClass("fadeInUp"); + } + } + scrolled++; + // if ($(this).scrollTop() > 50 ) { + // $('.scrolltop:hidden').stop(true, true).fadeIn(); + // } else { + // $('.scrolltop').stop(true, true).fadeOut(); + // } + }); + $('.home-feed-post').on('click', function(){ + window.location = $(this).data('url'); + }) }); diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index dc96324..f27becb 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -319,8 +319,77 @@ $(document).ready(function () { let url = $(this).children('a').attr('href'); $(this).on("click", function(){ window.location = url; - }) - } + }); + }; }); - + + $.fn.isInViewport = function(offset) { + var elementTop = $(this).offset().top; + var elementBottom = elementTop + $(this).outerHeight(); + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + var center = (viewportBottom + viewportTop) / 2 + parseInt(offset); + return [elementBottom > viewportTop && elementTop < center,$(this)]; + }; + if( $(window).width() > 1023){ + $('.front-page-post-content-container').each(function(index, value){ + var title_height = $(this).find('h2').find('a').outerHeight(); + var height = $(this).outerHeight(); + var offset = height - (title_height + 10); + $(this).css("bottom", "-"+offset+"px"); + }) + + var image; + $('.home-feed-post').hover( + function(){ + var details = $(this).find('.front-page-post-content-container'); + var details_height = details.outerHeight(); + $(this).data("top", details_height); + image = $(this).find('.front-page-blog-image'); + image.animate({bottom:details_height}, 400, function() { + //callback + }); + }, function(){ + details_height = $(this).data("top"); + image.animate({bottom:0}, 400, function() { + //callback + }); + } + ); + } + var posts = $('.home-feed-post'); + var scrolled = 0; + $(window).on("scroll", function() { + var page_position = $(window).scrollTop(); + if( $(window).width() < 1024 ){ + $.each(posts, function(){ + if( $(this).length > 0){ + + var test_scroll = $(this).isInViewport(-75); + if( test_scroll[0]){ + $(this).find(".overlay").addClass('blog-overlay'); + $(this).find(".overlay").css("background-color", "rbga(0,0,0, .7)"); + }else{ + $(this).find(".overlay").removeClass('blog-overlay'); + $(this).find(".overlay").css("background-color", "rbga(0,0,0, 0)"); + } + } + }); + } + if($("#home-feed-posts").length ){ + if($("#home-feed-posts").isInViewport(100)[0]){ + $('#home-feed-posts').css("opacity", 1); + $('#home-feed-posts').addClass("fadeInUp"); + } + } + scrolled++; + // if ($(this).scrollTop() > 50 ) { + // $('.scrolltop:hidden').stop(true, true).fadeIn(); + // } else { + // $('.scrolltop').stop(true, true).fadeOut(); + // } + }); + $('.home-feed-post').on('click', function(){ + window.location = $(this).data('url'); + }) }); diff --git a/parts/quick-picks.php b/parts/quick-picks.php index e27af87..82b4821 100644 --- a/parts/quick-picks.php +++ b/parts/quick-picks.php @@ -1,3 +1,6 @@ -
+
+
+
+
\ No newline at end of file diff --git a/scss/_kzooStyleBlocks.scss b/scss/_kzooStyleBlocks.scss new file mode 100644 index 0000000..17f05a9 --- /dev/null +++ b/scss/_kzooStyleBlocks.scss @@ -0,0 +1,417 @@ + +.home-feed-post { + margin-bottom: 20px; + // padding-bottom: 25px; + // @media #{$small-only} { + // > * { + // text-align: center; + // } + // } + } + input[type="submit"].blogbutton { + border-radius: 3px; + color: $white; + border: 2px solid $white; + font-weight: bold; + font-size: 13px; + padding: 2px 5px; + margin-top: -10px; + text-transform: uppercase; + &:hover { + cursor: pointer; + background: $white; + border: 2px solid #035C84; + color: white; + } + } + + #blog-posts-over .entry-meta { + text-align: center; + color: #757575; + font-size: 12px; + } + #blog-posts-over > div { + margin: 25px 0; + } + #blog-side-info { + #searchform { + margin-bottom: 30px; + } + p { + margin-bottom: 0; + } + } + @media #{$small-only} { + #blog-side-info-wrapper { + float: none; + margin: 0 auto; + clear: both; + } + #blog-side-info { + padding-left: 0; + border-left: 0; + ul { + margin-left: 0; + margin-top:10px; + } + #searchform { + padding: 35px 0; + #s { + width: 100%; + } + } + } + } + #blog-side-info { + padding-right: 10px; + ul { + list-style-type: none; + } + } + .blog-archive, .blog-home { + .featured-image-wrap{ + display: none; + } + } + + body .home-feed-posts .front-page-blog-image, body #feed .front-page-event-image{ + padding: 33%; + @media #{$medium-only}{ + padding: 25%; + max-width: 600px; + margin: 0 auto; + } + @media #{$small-only}{ + padding: 38%; + max-width: 600px; + margin: 0 auto; + } + } + body .home-feed-posts .front-page-blog-image{ + position: relative; + } + @media #{$medium-down}{ + body .home-feed-posts .front-page-blog-image{ + margin-top: 15px; + + } + } + body .home-feed-posts .home-feed-post-content{ + float: none; + margin: 0 auto; + clear:both; + } + .blog-home-inner-row{ + position: relative; + height: 100%; + overflow: hidden; + } + body #home-feed-posts{ + opacity: 0; + margin-bottom: 25px; + } + body .home-feed-posts{ + .home-feed-post{ + &:hover{ + .front-page-post-content-container{ + bottom: 0 !important; + } + } + } + } + .blog-overlay{ + opacity: .7 !important; + background-color: rgba(0,0,0,.65); + .block-text{ + opacity: 1; + } + } + body .home-feed-posts{ + @media only screen and (min-width: 64.063em){ + h2{ + font-size: 24px; + } + .front-page-post-content-container{ + padding: 10px; + } + } + .home-feed-post{ + padding: 10px; + } + } + body .home-feed-posts .front-page-post-content-container{ + padding: 20px; + padding: 10px 20px; + position: absolute; + width: 100%; + bottom: 0; + background-color: #22CDEC; + transition: 350ms ease-in-out bottom; + @media #{$medium-down}{ + opacity: 0; + background-color: $black; + } + h2{ + a{ + color: white; + opacity: 1; + } + } + div{ + color: white; + } + } + + + // old blog styles + #blog-feed-front { + .blog-feed-img { + margin-bottom: 17px; + img { + box-shadow: 2px 2px 5px 0 rgba($black, 0.55); + -ms-box-shadow: 2px 2px 5px 0 rgba($black, 0.55); + -moz-box-shadow: 2px 2px 5px 0 rgba($black, 0.55); + -webkit-box-shadow: 2px 2px 5px 0 rgba($black, 0.55); + } + } + .blog-feed-content { + h4{ + margin-bottom: 0; + a { + color: $blue; + &:hover { + color: $green; + } + } + } + p.blog-feed-date { + font-size: rem-calc(14); + font-style: italic; + margin: -10px 0 15px; + } + a.read-more { + font-size: rem-calc(24); + font-family: "azo-sans"; + font-style: italic; + } + } + } + .home-feed-post { + padding: 0 0 25px 0; + @media #{$small-only} { + > * { + text-align: center; + } + } + } + input[type="submit"].blogbutton { + border-radius: 3px; + background: $green !important; + color: $white; + border: 2px solid $green; + font-weight: bold; + font-size: 13px; + padding: 2px 5px; + margin-top: -10px; + text-transform: uppercase; + &:hover { + cursor: pointer; + background: $white; + border: 2px solid $white; + color: white; + } + } + #blog-posts-over article { + // padding-top: 10px; + // margin-bottom: 15px; + display: inline-block; + width: 100%; + .entry-header { + background: transparent; + box-shadow: none; + font-size: 22px; + h2{ + font-size: 22px; + } + } + a.read-more { + color: $green; + font-weight: bold; + font-size: 13px; + padding: 0 3px; + border: 2px solid $white; + text-transform: uppercase; + &:hover { + background: $white; + border: 2px solid $green; + color: $green; + } + } + .entry-header { + margin-bottom: 10px; + .entry-title { + line-height: 1; + margin-bottom: 10px; + font-size: 26px; + } + .meta.date { + font-size: 13px; + font-weight: bold; + } + } + } + /*#searchform div input &[type="text"] { + width: 95%; + }*/ + #blog-posts-over .entry-meta { + text-align: center; + color: #757575; + font-size: 12px; + } + #blog-posts-over > div { + margin: 40px 0; + } + #blog-side-info { + background: $black; + #searchform { + margin-bottom: 30px; + padding-top: 30px; + padding-right: 12px; + } + p { + margin-bottom: 0; + } + } + @media #{$small-only} { + #blog-side-info-wrapper { + float: none; + margin: 0 auto; + clear: both; + } + #blog-side-info { + padding-left: 0; + border-left: 0; + ul { + margin-left: 0; + margin-top:10px; + } + #searchform { + padding: 35px 0; + #s { + width: 100%; + } + } + } + } + #blog-side-info-wrapper{ + margin-top: 20px; + ul.footer-social{ + margin: 0; + float: left; + li{ + span#blogShareThis{ + position: relative; + top: -8px; + } + a{ + margin: 0px 3px; + } + + } + } + } + #blog-side-info { + padding-right: 10px; + margin-top: 40px; + clear: both; + ul { + list-style-type: none; + } + a{ + color: $white; + } + p{ + color: $green; + } + li{ + padding: 6px 0px; + line-height: 1.1; + } + } + .blog-featured{ + height: 250px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + .blog-featured-home, .blog-featured-archive{ + height: 250px; + float: left; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + #blog-posts-over h2{ + font-size: 22px; + color: $blue !important; + & a{ + color: $blue !important; + &:hover{ + text-decoration: underline; + } + } + } + .pf-content p{ + margin-bottom: 0px; + // padding: 0 30px; + } + div.pf-content > h2 { + // padding: 0 30px; + } + #category-menu ul li { + background-color: white; + float: left; + padding: 3px 7px; + margin: 3px 4px; + list-style-type: none; + border: 2px solid black; + display: inline; + border-radius: 5px; + } + div#category-menu { + max-height: 110px; + min-height: 88px; + margin: 0; + } + #category-menu ul li a{ + color: white; + } + .categoryLinksHeader{ + padding: 0px 0px 0px; + color: black; + line-height: 1; + margin: 9px 0 0; + font-size: 20px; + } + //.blog-posts-container:nth-child(1){ + // background: rgb(158, 197, 60); + //} + //.blog-posts-container:nth-child(2){ + // background: #57B649; + //} + //article h2.entry-title a{ + // color: black; + //} + article { + line-height: 120%; + } + .blog-excerpt-date{ + text-align: center; + } + .meta{ + font-size: 14px; + } + .addthis_counter.addthis_pill_style{ + float: right; + } + \ No newline at end of file diff --git a/scss/app.scss b/scss/app.scss index 4f7ba9f..4c49551 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -17,6 +17,7 @@ @import "page.footer"; @import "copyright"; @import "structure"; +@import 'kzooStyleBlocks'; // @import "left-off-canvas"; @import 'off-canvas'; // @import "right-off-canvas"; \ No newline at end of file -- 2.17.1