@charset "utf-8"; /* CSS Document */ :root { --grid-width: 1032px; /* Base Width is Set Here */ --grid-gutter: 15px; /* Gutter Width is set here. Just put half the gutter width here. */ --header-height: 80px; --footer-height: 162px; --logo-width: 294px; --search-box: 48px; --dark-green: #257c47; --light-green: #9CD365; --orange: #E8A63D; --red: #d13737; --blue: #317696; --gray: #707070; --green: #257C47; --light-green: #9CD365; --light-blue: #2492BA; /* NEW COLORS */ --yellow: #F1B41B; --dark-gray: #323133; --purple: #565BA9; --light-gray: #F4F4F5; --primary-font: 'Gin', sans-serif; --secondary-font: 'Arpona', sans-serif; --amatic: 'amatic-sc',sans-serif; --standard-font-size: 15px; --line-height: 1.5; } /* Base Template Settings */ .cookie-message { top: auto; bottom: 0px; text-align: center; padding: 0 30px 0 30px;} .cookie-message p { display: inline-block; } .cookie-message a:not(.notit) { position: static; color: var(--dark-gray); text-decoration: none;font-family:var(--primary-font);font-size:13px;letter-spacing:0.05em;margin-left:15px;} .cookie-message a:not(.notit):hover { background: var(--yellow); } font { font-weight: inherit; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1; } body { font-family: var(--primary-font); color: var(--dark-gray); } #page-head container, #page-foot container, div container, section container { max-width: var(--grid-width); } .halves > .half > container { max-width: calc( var(--grid-width) / 2 ); } .halves > .half > container, .listed li, [class^="box-"], [class*=" box-"] { padding: var(--grid-gutter); } .cta { font-family: var(--primary-font); color: var(--dark-gray); font-size: 13px; text-transform: uppercase; font-weight: 700; border: 2px solid var(--yellow); padding-left: 15px; padding-right: 15px; height: 42px; text-align: center; } .cta:hover { color: #FFF; background: var(--yellow) } .cta-text { font-family: var(--primary-font); color: var(--dark-gray); font-size: 16px; letter-spacing: 0.1ex; text-transform: uppercase;text-align: center;position:relative;padding-bottom:5px;border-bottom:1px solid transparent;} .cta-text:after {content:">";margin-left:10px;} .cta-text:hover { border-bottom:1px solid var(--dark-gray);} .cta.red { border: 2px solid var(--red); color: var(--red) } .cta.red:hover { background: var(--red); color: #FFF; } .cta.blue { border: 2px solid var(--blue); color: var(--blue) } .cta.blue:hover { background: var(--blue); color: #FFF; } .cta.green { border: 2px solid var(--green); color: var(--green) } .cta.green:hover { background: var(--green); color: #FFF; } .cta.purple { border: 2px solid var(--purple); color: var(--purple) } .cta.purple:hover { background: var(--purple); color: #FFF; } .cta.ltblue { border: 2px solid var(--light-blue); color: var(--light-blue) } .cta.ltblue:hover { background: var(--light-blue); color: #FFF; } .cta.ltgreen { border: 2px solid var(--light-green); color: var(--light-green) } .cta.ltgreen:hover { background: var(--light-green); color: #FFF; } article p, .p { font-family: var(--secondary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: 1.9; color: var(--dark-gray); } article h1, .h1 { font-family: var(--primary-font); font-size: 38px; line-height: var(--line-height); margin-bottom: var(--standard-font-size); color: var(--dark-gray); letter-spacing: .06ex; text-transform: uppercase; font-weight: 300; } article h2, .h2 { font-family: var(--primary-font); font-size: 32px; line-height: var(--line-height); margin-bottom: var(--standard-font-size); color: var(--dark-gray); letter-spacing: .01ex; text-transform: uppercase; font-weight: 300; } article h3, .h3 { font-family: var(--primary-font); font-size: 22px; line-height: var(--line-height); margin-bottom: 5px; color: var(--dark-gray); letter-spacing: .04ex; text-transform: uppercase; font-weight: 500; } article h4, .h4 { font-family: var(--primary-font); font-size: 18px; line-height: var(--line-height); margin-bottom: var(--standard-font-size); color: var(--dark-gray); letter-spacing: .3ex; text-transform: uppercase; font-weight: 300; } article h5, .h5 { font-family: var(--primary-font); font-size: 13px; line-height: var(--line-height); margin-bottom: var(--standard-font-size); color: var(--dark-gray); letter-spacing: .3ex; text-transform: uppercase; font-weight: 300; } article blockquote, .blockquote { font-family: var(--primary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); font-size: 85px; color: #FFF; } article blockquote cite, .blockquote cite { font-family: var(--secondary-font); color: #FFF; font-size: 20px; line-height: var(--line-height) } article ul, article ol { padding-left: var(--standard-font-size); } article ul { list-style-type: none; } article ul li { font-family: var(--secondary-font); margin-bottom: 20px; position: relative; padding-left: 30px; font-size: 15px; } article ul li:before { content: ""; position: absolute; left: 0px; top: 6px; width: 8px; height: 8px; background: var(--blue) } article ul li ul { margin-top: 15px; } article ol { list-style-type: decimal; font-family: var(--secondary-font); margin-bottom: 15px; counter-reset: item; } details { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); } details summary { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); } .top-title { font-family: var(--secondary-font); font-size: 16px; } .slider-title { font-family: var(--primary-font); line-height: 1.2; margin-bottom: var(--standard-font-size); font-size: 37px; color: #FFF; letter-spacing: 0.15em; text-transform: uppercase; position: relative; top: -10px } .sub-title { font-family: var(--primary-font); color: var(--dark-gray); font-size: 20px; line-height: var(--line-height); margin-bottom: 0px; color: inherit; font-weight: 400;letter-spacing: .04ex; } .callout { font-size: 14px; font-family: var(--primary-font); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1ex; margin-bottom: 0px;color:var(--purple); } hr { border: none; width: 100%; height: 2px; background: var(--yellow); margin-bottom: 20px; } hr.blue {background:var(--blue);} .colored-text { border: none; color: var(--purple); } .swiper-button-next:after, .swiper-button-prev:after { font-size: 24px; } /* Header Settings */ #page-head { background: #FFF; height: var(--header-height); position: relative; left: 0px; top: 0px; z-index: 999; width: 100%; position: fixed; } .shadow { z-index: 998; position: fixed; width: 100%; height: var(--header-height); display: block; border-radius: 50%; box-shadow: 0px 1px 25px -9px rgba(0,0,0,0.54); top: 0px; left: 0px; opacity: 0; transition: all .25s ease-in; } .shadow.visible { opacity: 1; } #page-head container { height: var(--header-height); max-width: 1266px; padding: 0px 30px; } #page-head container .logo { width: var(--logo-width); } #page-head container .logo + div { width: calc( 100% - var(--logo-width) ); } #page-head container .logo > * {width:100%;} #page-head container #nav { text-align: right; width: calc( 100% - var(--search-box) ); max-width: 755px; } #page-head container #nav #main { width: 100%; font-size: 0px; float: right; } #page-head container #nav #main li { display: inline-block; } #page-head container #nav #main .menu-item-has-children ul li { display: block; } #page-head container #nav #main a { text-decoration: none; margin: 0px 15px; font-family: var(--primary-font); font-size: 14px; color: var(--dark-gray); display: inline-block; text-transform: uppercase; position: relative; } #page-head container #nav #main a.cta { color: var(--red) } #page-head container #nav #main a.cta:hover { color: #FFF; } #page-head container #nav #main > li { position: relative; } #page-head container #nav #main > li > a { padding-top: 12px; padding-bottom: 12px; letter-spacing: 0.05ex } #page-head container #nav #main .current-menu-item > a, #page-head container #nav #main .active > a { color: var(--purple); } #page-head container #nav #main a:hover { color: var(--yellow); opacity: 1; } /* This is the Hover/Active state for the menu item */ #page-head container #nav #main > li > ul { background: #FFF; min-width: 200px; text-align: left; } #page-head container #nav #main > li > ul li a { padding: 5px; } #page-head container #nav #main > li:last-child > a { margin-right: 0px; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; align-content: center; -webkit-align-items: center; align-items: center; font-family: var(--primary-font); color: var(--dark-gray); font-size: 14px; text-transform: uppercase; font-weight: 400; border: 2px solid var(--yellow); padding-left: 10px; padding-right: 10px; height: 42px; } #page-head container .search-box { display: inline-block; position: relative; height: 42px; float: right; margin-left: 10px; width: 42px; margin-top: 4px; } #page-head container .search-box form { width: 0px; overflow: hidden; position: absolute; right: 0px; top: 0px; height: 42px; transition: all .25s; background: var(--yellow); z-index: 1} #page-head container .search-box input[type=checkbox] { display: none; } #page-head container .search-box > label { width: 42px; color: var(--dark-gray); border-color: var(--dark-gray); font-size: 0px; border: none; float: right; } #page-head container .search-box > label:after { content: ""; font-size: 18px; font-family: var(--icon-font); font-weight: 800; } #page-head container .search-box > label:hover { background: var(--dark-gray); color: #FFF; } #page-head container .search-box input[type=checkbox]:checked ~ form { width: 200px; } #page-head container .search-box form label { display: block; text-indent: -300vw; width: 0px; height: 0px; position: absolute; left: -300vw; } #page-head container .search-box form input { height: 30px; margin: 6px 6px; width: calc( 100% - 20px - 30px ); float: left; border-radius: 15px; font-family: var(--secondary-font); font-size: 12px; color: var(--dark-gray); font-weight: 700; display: inline-block; text-transform: uppercase; } #page-head container .search-box > input[type=checkbox]:checked ~ label { color: #FFF; width: 42px; font-size: 0px; } #page-head container .search-box > input[type=checkbox]:checked ~ label:after { content: " "; font-family: var(--icon-font); font-weight: 800; font-size: 18px; position: relative; z-index: 2; width: 42px; background: url(../images/close.svg) center no-repeat; background-size: contain; height: 42px; } /* Translation Widget */ .weather-translate { position: absolute; top: 40vh; left: 25px; transform: translateY(-40%); z-index: 2;background:rgba(255,255,255,0.8);padding:5px;border-radius:20px; } .weather-translate #weatherwidget { width: 22px; height: 22px; display: block; background: url(../images/sun.svg) center no-repeat; background-size: contain; } .weather-translate #weatherwidget.rain { background: url(../images/rain.svg) center no-repeat; } .weather-translate #weatherwidget.cloud { background: url(../images/cloud.svg) center no-repeat; } .weather-translate #weatherwidget.wind { background: url(../images/wind.svg) center no-repeat; } .weather-translate #weatherwidget.snow { background: url(../images/snow.svg) center no-repeat; } .weather-translate #translation-widget a { display: block; color: var(--dark-gray); width: 22px; text-align: center; border-top: 2px solid var(--dark-gray); font-family: var(--secondary-font); font-size: 12px; padding-top: 10px; padding-bottom: 10px; } .weather-translate #translation-widget input { display: none; } .weather-translate #translation-widget .translation-drawer { max-height: 70px; overflow: hidden; transition: all .25s; } .weather-translate #translation-widget label { display: block; color: var(--dark-gray); width: 22px; text-align: center; font-family: var(--icon-font); font-size: 22px; padding-top: 0px; padding-bottom: 10px; font-weight: 800; transition: all .25s; } .weather-translate #translation-widget input:checked ~ .translation-drawer { max-height: 100vh; } .weather-translate #translation-widget input:checked ~ label { transform: rotate(180deg) } /* Header Scroller Block */ .header-scroller { position: relative; } .header-scroller container { width:100%; padding: 0px;max-width:none; } .header-scroller .slide .slidebg { width: 100%; height: 0px; padding-bottom: 55%; } .header-scroller .slide { padding-bottom: 20px; position: relative; } .header-scroller .coloredbox { color: #FFF; width: 400px; position: absolute; bottom: 30px; right: 58px; padding: 50px 40px;background:var(--yellow) } .header-scroller .coloredbox a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; display: block; } .header-scroller .coloredbox p {color:var(--dark-gray);} .header-scroller .coloredbox article .callout { margin-bottom: 10px; } .header-scroller .swiper-pagination { top: 50%; right: 25px; transform: translateY(-50%); } .header-scroller .swiper-pagination-bullet { display: block; margin: 20px auto; width: 3px; height: 3px; background-color: var(--dark-gray); } .header-scroller .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 9px; height: 9px; background-color: var(--dark-gray); } .header-prev { left: calc( 50vw - 125px - ( var(--grid-width) / 2 ) ) } .header-next { right: calc( 50vw - 125px - ( var(--grid-width) / 2 ) ) } .header-scroller .bg > picture img { width:100%; } .video-header { width:100%; } /* Welcome Section */ .welcome {margin:35px 0 75px;position:relative;text-align:center;} .welcome container {max-width:800px;} .welcome h1 {color:var(--dark-gray);font-size:48px;font-weight:normal;letter-spacing:0.1em;margin-bottom:60px;} .welcome h1 strong {font-family:var(--amatic);font-weight:normal;letter-spacing:0em;font-size:70px;margin:0 10px;position:relative;transform: rotate(357deg);display:inline-block;} .welcome h1 strong:after {background:url(../images/longhorn-icon-big.svg) no-repeat;content:"";width:210px;height:40px;bottom:-30px;left:-5px;background-size:contain;position:absolute;transform: rotate(3deg);} .welcome p {color:var(--dark-gray);margin-bottom:20px;line-height:2em;font-size:1.1em;font-family:var(--secondary-font)} /* Facts Slider Block */ .facts-slider container { padding: 15px 32px; margin-bottom: 75px; position: relative; } .facts-slider container .swiper-container { max-width: 980px;display:grid;grid-template-columns:repeat(3,28%);column-gap:8%;row-gap:60px;margin-top:50px;overflow:visible;} .facts-slider container .swiper-container .swiper-slide .slide { display: block; margin: auto;position:relative;height:100%;} .facts-slider container .swiper-container .swiper-slide .slide article { margin: auto;} .facts-slider container .swiper-container .swiper-slide .slide article h3 {line-height:1.3em;margin:20px 0;position:relative;padding-top:50px;} .facts-slider container .swiper-container .swiper-slide .slide article h3:before {content:"";background:url(../images/longhorn-icon.svg) no-repeat;width:105px;height:22px;top:0;left:0;position:absolute;background-size:contain;} .facts-slider container .swiper-container .swiper-slide .slide article .cta-text {position:absolute; bottom:0;left:0;} .wide-image {width:100%;} .wide-image img {object-fit:cover;object-position:bottom center;width:100%;height:60vh;} /* Newsletter/News */ .news-area {background:var(--light-gray);width:100%;margin-bottom:75px;} .news-area container {padding: 75px 30px;position:relative;} .blog {margin-bottom:70px;} /* This is also used for the Template Builder content/image block */ .title-box { display: block;position:relative;} .title-box a.cta-text { position:absolute;top:20px;right:0;} .blog .news-container {display:grid;grid-auto-flow:column;} .blog .news-container article {color:#fff;height:100%;} .blog .news-container article .blog-interior {background:var(--yellow);padding:30px 10% 50px 10%;height:100%;width:94%;margin:0 3%;position:relative;} .blog .news-container article .blog-interior .cta-text {border-bottom:1px solid var(--yellow);position:absolute;bottom:30px;left:10%;} .blog .news-container article .blog-interior .cta-text:hover {border-bottom:1px solid var(--dark-gray)} .blog .news-container article .blog-interior:nth-child(1) {margin-right:5%;} .blog .news-container h3 a {color:var(--dark-gray);} .blog .news-container .callout a {color:var(--purple);} .blog .swiper-button-prev { left: -30px; top: 390px; transform: translateY(-100%) } .blog .swiper-button-next { right: -30px; top: 390px; transform: translateY(-100%) } .newsletter legend { float: left; max-width: 340px; width: 100%;margin-top:15px;} .newsletter form { float: right; max-width: calc( 100% - 340px ); width: 100%;margin-top: 10px;} .newsletter form input, .newsletter form input[type=email] { width: 80%; float: left; border: none;background: #fff;border:2px solid #fff;font-family:var(--secondary-font);padding:30px 15px;margin:0;} .newsletter form input[type=submit] { border:2px solid var(--yellow); color:var(--dark-gray);background:none;padding:12px 15px;vertical-align:middle; font-family:var(--primary-font);font-size:15px;cursor:pointer;} .newsletter form input[type=submit]:hover {background:var(--yellow);} .newsletter div.wpcf7-mail-sent-ok { border: none!important; } /* Brand Slider */ .brand-slider container { padding: 35px 30px; position: relative; margin-bottom: 75px; } .brand-slider container .title-box { display: block;position:relative;margin-bottom:50px;} .brand-slider container .title-box a.cta-text { position:absolute;top:20px;right:0;} .brand-slider container .swiper-container { clear: both; } .brand-slider container .swiper-button-prev { left: -50px; bottom: 10px; top: auto; transform: translateY(-100%) } .brand-slider container .swiper-button-next { right: -50px; bottom: 10px; top: auto; transform: translateY(-100%) } .brand-slider container .swiper-container .swiper-slide { text-align: center; filter: grayscale(100%); } .brand-slider container .swiper-container .swiper-slide figure img { max-width: 100%; display: block; } .brand-slider container .swiper-container .swiper-slide a:hover figure { opacity: .5; } /* Page Header Settings */ .page-header container { padding: 12px 0; padding-top: 50px } .page-header container .callout { margin-bottom: 0px; } .page-header container .title-box { width: 100%; float: left; max-width: 440px; } .page-header container .title-box h1 { margin-bottom: 10px } .page-header container .title-box h2 { letter-spacing: 0.05ex; } .page-header container .header-quote { width: calc( 50% + 10px ); max-width: calc( 100% - 440px ); float: right;margin-top:65px; } .page-header container .header-quote blockquote { padding: 23px 10px; margin: auto; max-width: 560px; width: 100%; font-family: var(--secondary-font); line-height: 1.7; letter-spacing: -0.052ex; } .page-header container .header-quote blockquote cite { float: right; font-size: 12px; font-family: var(--secondary-font); font-style: italic; letter-spacing: 0.01ex; display: block; margin-top: 15px; } .page-header container .header-quote a.cta { margin-right: 15px; margin-bottom: 15px; } /* Content Intro */ .facts-stats-intro {text-align:center;margin-bottom:50px;} /* Rankings Section */ .rankings container { padding: 12px 32px; margin-top: 10px; } .rankings container .callout { color: var(--blue); } .rankings container .h2 { margin-bottom: 4px; } .rankings container ul { background: var(--light-gray); padding: 30px 37px 0px; } .rankings container ul:after { content: ""; clear: both; display: block; } .rankings container ul li { font-family: var(secondary-font); font-size: 15px; margin-bottom: 10px; } .rankings container ul li a { font-style: italic; } .rankings container ul li .colored-text { font-family: var(--primary-font); font-size: 30px; font-weight: 300; text-transform: uppercase; padding-right: 50px; line-height: 1.25 } .rankings container ul li .colored-text strong { font-size: 100px; float: left; font-weight: 400; line-height: 1; padding-right: 20px; position: relative; top: -10px;} /* Infographics */ .infographics container { padding: 12px 32px; margin-top: 30px; } .infographics container .callout { color: var(--blue); } .infographics container .h2 { margin-bottom: 8px; } .infographics container .topstats { max-width: 778px; width: 100%; margin: 43px auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .infographics.threestep container .topstats { max-width: 100%; padding: 38px; } .infographics container .topstats p.h3 { color: var(--blue); } .infographics container .topstats ul { list-style-type: none; width: 285px; padding-left: 40px; border-left: 15px solid var(--blue); } .infographics.threestep container .topstats ul { width: 100%; max-width: 420px; } .infographics container .birthrate { text-align: center; } .infographics container .birthrate p.h3 { font-size: 29px; margin-bottom: 20px; } .infographics container .birthrate p.h3 strong { color: var(--red); } .infographics container .birthrate ul { list-style-type: none; display: block; text-transform: uppercase; font-size: 20px; padding: 25px 0px; } .infographics container .birthrate ul li { display: inline-block; } .infographics container .birthrate ul li:before { content: ""; width: 10px; height: 10px; background: var(--red); display: inline-block; margin-bottom: 3px; margin-left: 20px; margin-right: 20px; } .infographics container .birthrate ul li:first-child:before { display: none; } .infographics container .flight { text-align: center; margin-top: 25px; margin-bottom: 25px; } .infographics container .flight .h3 { font-size: 50px; color: var(--purple); margin-bottom: 0px; } .infographics container .flight p { text-transform: uppercase; font-size: 29px; } .infographics container .gdp { max-width: 760px; margin: 40px auto 60px; text-align: center; } .infographics container .gdp .top-text { text-transform: uppercase; font-size: 20px; } .infographics container .gdp ul { list-style-type: none; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 20px; background: url(../images/star.png) center no-repeat; margin-bottom: 10px; } .infographics container .gdp ul li { width: 275px; } .infographics container .gdp ul li .gdp-details{ font-size: 29px; text-transform: uppercase; } .infographics container .gdp ul li .gdp-details strong { font-size: 50px; font-weight: 400; display: block; color: var(--green); line-height: 1; } .infographics container .gdp ul li .gdp-details strong sup { font-size: 30px; } .infographics container .gdp ul li .gdp-details span { font-size: 20px; } .infographics container .gdp ul li .gdp-details span:after { width: 10px; height: 10px; background: var(--green); display: inline-block; content: ""; margin-bottom: 5px; margin-left: 5px; } .infographics container .gdp ul li .gdp-details span:last-child:after { display: none; } .infographics container .gdp cite { font-size: 12px; font-family: var(--secondary-font); font-style: italic; } /* Linkbar */ .linkbar container { padding: 12px 32px; margin-top: 70px; margin-bottom: 35px; background: var(--light-gray); } .linkbar container .title { width: 210px; float: left; } .linkbar container ul { width: calc( 100% - 210px ); float: right; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 30px; list-style-type: none; } .linkbar container ul li a { margin: 0px 10px; } /* Blurb */ .blurbs container { padding: 30px 38px; text-align: center; } .blurbs container ul { list-style-type: none; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding:0px; } .blurbs container ul li { width: 100%; max-width: 270px; padding: 5px 15px; } .blurbs container ul li blockquote { font-family: var(--primary-font); text-transform: uppercase; font-size: 18px; letter-spacing: 0.03ex; } .blurbs container ul li blockquote cite { font-family: var(--secondary-font); font-size: 12px; font-weight: 800; display: block; margin-top: 10px; letter-spacing: 0.1ex; } /* Table */ .tablebox container { padding: 0px 34px 24px; } .tablebox container hr { } .table-container { background: var(--light-gray); padding: 10px 65px 35px; margin-top: 30px; } .table-container:after { content: ""; clear: both; display: block; } .table-container table { width: 100%; border-spacing: 0px; color: #707070; } .table-container table thead tr th { text-align: left; font-size: 25px; text-transform: uppercase; border-bottom: 2px solid #DDDDDD; padding: 15px 5px; } .table-container table thead tr th:last-child { text-align: right; } .table-container table tbody { margin-top: 10px; } .table-container table tbody tr td { padding: 12px 5px; font-family: var(--secondary-font); text-transform: uppercase; border-bottom: 1px solid #DDDDDD; } .table-container table tbody tr:first-child td { padding-top: 20px; } .table-container table tbody tr td:last-child { text-align: right; } .tablebox container cite { font-family: var(--secondary-font); font-size: 15px; display: block; text-align: right; font-style: italic; margin-top: 10px; } .table-container table tbody tr:last-child td { border-bottom: 0px; } .table-container table tbody td a { color: var(--blue); font-weight: 800; } /* Halfboxes */ .halfboxes container { padding: 38px 20px; } .halfboxes container .h2 { font-size: 25px; font-family: var(--primary-font); font-weight: 400; letter-spacing: 0.05ex; } .halfboxes container cite { text-align: right; font-family: var(--secondary-font); font-size: 12px; font-style: italic; text-align: right; display: block; } /* Half Stats */ .half-stats container { padding: 38px 20px; } .half-stats container .h2 { font-size: 25px; font-family: var(--primary-font); font-weight: 400; letter-spacing: 0.05ex; } .half-stats container .stat { width: 290px; margin: auto; margin-top: 30px; } .half-stats container cite { text-align: right; font-family: var(--secondary-font); font-size: 12px; font-style: italic; text-align: right; display: block; } /* Gray Bar */ .gray-bar container { padding: 38px 38px; } .gray-bar container .graybox { background: var(--light-gray); margin-top: 20px; padding: 20px 0px; } .gray-bar container .graybox:after { clear: both; display: block; content: ""; } .gray-bar container .graybox .h2 { font-size: 30px;text-align:center; } /* Single Blurb */ .single-blurb container { padding: 38px 38px; } .single-blurb container .blurb-single { text-align: center; font-size: 20px; font-family: var(--primary-font); text-transform: uppercase; } .single-blurb container .h1 { font-size: 50px; color: var(--blue); font-weight: 400; } .single-blurb container .h1:before, .single-blurb container .h1:after { content: ""; width: 55px; height: 55px; display: inline-block; margin: 0px 15px; } /* Listed */ .list container { padding: 38px 38px; } .list container blockquote h2 { display: inline; } .list container blockquote cite { display: inline-block; float: right; text-align: right; font-family: var(--secondary-font); font-size: 12px; font-style: italic; position: relative; margin-top: 25px; } .list container .list-tab { margin-top: 55px; } .list container .list-tab > .scroller { width: 100%; max-width: 380px; float: left; background: var(--light-gray); list-style-type: none; height: auto; padding: 30px 10px 30px 30px; position: relative; } .list container .list-tab > .scroller ul { overflow-y: scroll; list-style-type: none; padding: 0px; height: 385px; position: relative; padding-right: 20px; } .overview { width: 100%; } .list container .list-tab > .scroller:after { content: ''; clear: both; display: block; } .list container .list-tab > .scroller ul li { margin: 0px; } .list container .list-tab > .scroller ul li a { padding: 12px 5px; border-bottom: 1px solid #DDDDDD; display: block; font-family: var(--secondary-font); text-transform: uppercase; } .list container .list-tab > .scroller ul li.ui-state-active a { color: var(--blue); } .list container .attraction-details { max-width: 490px; float: right; width: calc( 100% - 380px - 70px ); } .list container .attraction-details h3 { margin-bottom: 20px; } .list container .attraction-details .buttonbox { margin-top: 30px; margin-bottom: 30px; } .list container .attraction-details .buttonbox a { margin-right: 15px; } .list container .attraction-details .scroller { width: 100%; height: auto; max-height: 235px; padding-right: 25px; overflow-y: scroll; position: relative; } /* Stories */ .storyslider-title container { padding: 30px; } .storyslider { max-width: 1200px; margin: auto; } .storyslider container { background: var(--light-gray); padding: 50px 50px; margin-bottom: 50px } .storyslider container > h3.h3 { font-size: 29px; margin-bottom: 40px; } .storyslider container article { column-gap: 80px; } .storyslider container article h4 { font-weight: 400; } /* Copy */ .copy container { padding: 38px 38px; } /* Four Boxes */ .fourboxes container { padding: 38px; } .fourboxes container h3.h3 { margin-bottom: 20px; } .fourboxes container .box-1-3 { text-align: center; } .fourboxes container .box-1-3 h4.h3 { margin-bottom: 20px; } .fourboxes container .box-1-3 p { font-family: var(--secondary-font); font-size: 15px; line-height: 2 } /* Infobox */ .gm-style-iw-d h4 { font-family: var(--secondary-font); font-size: 12px; line-height: var(--line-height); margin-bottom: 10px; color: var(--blue); letter-spacing: .03ex; text-transform: uppercase; font-weight: 600; } .gm-style-iw-d p { font-size: 12px; } .gm-style-iw-d a { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-family: var(--secondary-font); color: var(--red); font-size: 10px; letter-spacing: 0.03ex; text-transform: uppercase; font-weight: 700; border: 2px solid var(--red); border-radius: 26px; padding-left: 10px; padding-right: 10px; height: 20px; margin-bottom: 5px; } .gm-style-iw-d a:hover { background: var(--red); color: #FFF; } /* Stat Graph */ .statgraph container { padding: 38px; } .statgraph .stat { max-width: 290px; } .stat { min-width: 290px; float: left; margin-top: 30px; padding: 0px 15px; } .stat cite { text-align: right; font-family: var(--secondary-font); font-size: 12px; font-style: italic; text-align: right; display: block; } .stat.red { color: var(--red); } .stat.purple { color: var(--purple) } .stat.blue { color: var(--blue) } .stat.green { color: var(--green); } .stat .callout { font-family: var(--primary-font); font-size: 15px; text-transform: uppercase; } .stat .h1 { color: inherit; font-size: 100px; font-weight: 500; position: relative; line-height: 1; } .stat .h1 span { font-size: 15px; letter-spacing: 0.1ex; display: inline; position: relative; top: -100%; left: auto; white-space: nowrap; } .stat .undertext { font-family: var(--secondary-font); font-size: 14px; color: var(--dark-gray); } .statgraph container figure { max-width: 640px; float: right; } /* Multi Tabs*/ .multitabs container { padding: 38px; } .multitabs container .side { float: left; width: 200px; } .multitabs container .side > ul { list-style-type: none; padding: 0px; } .multitabs container .side > ul li a { margin-bottom: 20px; width: 100%; max-width: 180px; border-color: var(--blue); color: var(--blue) } .multitabs container .side > ul li.ui-state-active a { background: #FFF; color: var(--red); border-color: var(--red); } .multitabs container .side > ul li a:hover { border-color: var(--blue); color: #FFF; background-color: var(--blue); } .multitabs container .sidetab { float: right; width: 100%; max-width: calc( 100% - 220px ); } .multitabs container .sidetab .swiper-container { padding-left: 50px; padding-right: 50px; } .multitabs container .sidetab .swiper-container .ui-tabs-nav { padding: 0px; } .multitabs container .sidetab .swiper-container .swiper-slide { width: auto; margin: auto 15px; padding: 0px; list-style-type: none; padding: 0px; } .multitabs container .sidetab .swiper-container .swiper-slide a { color: var(--dark-gray) } .multitabs container .sidetab > ul { list-style-type: none; padding: 0px; padding-bottom: 20px; border-bottom: 1px solid var(--blue) } .multitabs container .sidetab > ul li { display: inline; } .multitabs container .sidetab > ul li a { font-family: var(--secondary-font); font-size: 12px; text-transform: uppercase; margin-right: 25px; margin-left: 15px; } .multitabs container .sidetab .swiper-container li.ui-state-active a { color: var(--red) } .multitabs container .sidetab .swiper-button-next, .multitabs container .sidetab .swiper-button-prev { background-color: #FFF; } .multitabs container .sidetab .swiper-button-next { right: 0px; } .multitabs container .sidetab .swiper-button-prev { left: 0px; } .subtab-body { padding-top: 30px; } .subtab-body figure iframe { width: 100%; } .subtab-body .acf-map { height: 450px; } .subtab-body article { width: 50%; float: left; margin-top: 20px; } .subtab-body > ul { float: right; width: 50%; text-align: right; list-style-type: none; margin-top: 20px; } .subtab-body > ul li { display: inline-block; margin-left: 15px; } .subtab-body > ul li a { min-width: 150px; margin-bottom: 15px; } /* Two Column */ .two-column container { padding: 38px 38px; } .two-column container article.copy, .two-column container article.bullets { width: 50%; float: left; } .two-column container article.bullets { padding-left: 80px; } .two-column container article.bullets figure{ margin-bottom: 40px; } /* Iframe */ .iframe container { padding: 0px 38px; overflow: hidden; position: relative; margin-bottom: 38px; font-size: 0px; } .iframe container iframe { border: none; width: 100%; height: 880px; } .iframe container:after { content: ""; z-index: 8; position: absolute; width: 100%; height: 150px; display: block; border-radius: 50%; box-shadow: 0px 1px 25px -9px rgba(0,0,0,0.54); bottom: -150px; left: 0px; } /* Stat Graphic */ .statgraphic container { padding: 38px; } .statgraphic .stat { width: 240px; min-width: 240px; } .statgraphic .stat .toptext, .statgraphic .stat .undertext { font-family: var(--primary-font); font-size: 15px; text-transform: uppercase; color: inherit; width: 180px; } .statgraphic .stat .h1 { line-height: 1; } .statgraphic figure { float: right; width: 100%; max-width: calc( 100% - 240px ); } /* Large Pic */ .largepic container { padding: 38px; } /* Industries slider */ .industry-selector { float: right; max-width: calc( 100% - 340px ); width: 100%; height: 42px; border: 2px solid var(--dark-gray); border-radius: 25px; overflow: hidden; margin-top: 50px; } .industry-selector label { width: 200px; float: left; height: 38px; text-align: center; font-family: var(--secondary-font); font-weight: 400; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1ex; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .industry-selector select { width: calc( 100% - 200px ); float: left; border: none; height: 38px; background: url(../images/select.png) center right no-repeat; background-color: #F8FFD5; } .industry { clear: both; height: 0px; overflow: hidden; } .industry.show { height: auto; } /* largestats */ .largestats container { padding: 38px; } .largestats .stats-container { text-align: center; } .largestats .stats-container:after { content: ""; clear: both; display: block; margin-bottom: 25px; } .largestats .stats-container .stat { display: inline-block; text-align: left; float: none; } /* Multi Columns */ .multicolumns container { padding: 38px; } .multicolumns.gray container { background: var(--light-gray); } .multicolumns container .box-1-2 { padding-left: 0px; } .multicolumns container .box-1-2 + .box-1-2 { padding-right: 0px; padding-left: 30px; } .multicolumns container a.cta { margin-left: 15px; } .multicolumns container .table-container { padding: 10px 25px 35px; } .multicolumns container .table-container table thead tr th:last-child { text-align: left; } /* Map */ .map container { padding: 38px; } /* Giant Map */ .largemap container { padding: 38px; } .largemap .tabbers ul.scrollee { background: var(--light-gray); overflow-y: scroll; list-style-type: none; padding: 30px; height: 385px; position: relative; z-index: 1; } .largemap .tabbers ul.scrollee li { margin: 0px; } .largemap .tabbers ul.scrollee li a { padding: 12px 5px; border-bottom: 1px solid #DDDDDD; display: block; font-family: var(--secondary-font); text-transform: uppercase; } .largemap .tabbers ul.scrollee li.ui-state-active a { color: var(--blue); } .largemap .tabbers .box-2-3.tabs { padding-top: 0px; padding-bottom: 0px; } .largemap:after { content: " "; clear: both; display: block; } .largemap .tabbers #types { position: relative; padding-left: 0px; } .largemap .tabbers #types:after { position: absolute; font-family: var(--icon-font); font-weight: 800; content: ""; top: 50%; right: -10px; transform: translateY(-50%); } .largemap .tabbers #names { position: relative; background: var(--light-gray); padding: 0px var(--grid-gutter); margin-bottom: var(--grid-gutter); } .largemap .tabbers #names:after { position: absolute; font-family: var(--icon-font); font-weight: 800; content: ""; top: 50%; right: -20px; transform: translateY(-50%); } .largemap .tabbers #names ul.scrollee { background: none; } .largemap .tabbers article { padding-left: 50px; } .largemap container .tabbers article a { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-family: var(--secondary-font); color: var(--blue); font-size: 12px; letter-spacing: 0.3ex; text-transform: uppercase; font-weight: 700; border: 2px solid var(--blue); border-radius: 26px; padding-left: 15px; padding-right: 15px; height: 42px; text-align: center; } .largemap container .tabbers article a:hover { background: var(--blue); color: #FFF; } .scrollable .scroll-bar { width: 12px; z-index: 1; } .scrollable .scroll-bar:before { position: absolute; top: 0px; right: 11px; z-index: 0; width: 2px; background: #DDD; content: ''; height: 100%; } .scrollable .scroll-bar .thumb { background: #9CD365; width: 12px; margin-left: -6px; z-index: 1; } /* Meet the Team */ .team container { max-width: 800px; padding: 38px; } .team container ul.teammates { padding: 0px; list-style-type: none; } .team container ul.teammates li { list-style-type: none; margin-bottom: 50px; } .team container ul.teammates li:after { content: ""; clear: both; display: block; } .team container ul.teammates li figure { position: relative; width: 240px; float: left; } .team container ul.teammates li figure picture { position: relative; width: 180px; height: 180px; overflow: hidden; z-index: 1; border-radius: 50%; } .team container ul.teammates li figure picture img { overflow: hidden; border-radius: 50%;max-width:179px; } .team container ul.teammates li figure:after { position: absolute; left: 8px; top: 16px; width: 180px; height: 180px; border-radius: 50%; content: ""; display: block; z-index: 0; } .team container ul.teammates li figure.blue:after { background: var(--blue) } .team container ul.teammates li figure.green:after { background: var(--green) } .team container ul.teammates li figure.red:after { background: var(--red) } .team container ul.teammates li figure.purple:after { background: var(--purple) } .team container ul.teammates li .bio { float: right; width: calc( 100% - 240px ); } .team container ul.teammates li .bio a.cta { margin-bottom: 50px; } .team container ul.teammates li .bio summary { font-family: var(--secondary-font); color: var(--blue); text-transform: uppercase; font-weight: 800; } /* Contact Form */ .contactform { padding:30px 0 50px 0; } .contactform container .gform_body input,.contactform container .gform_body select,.contactform container .gform_body textarea { width: 100%; height: 42px; border: 2px solid var(--dark-gray); overflow: hidden; } .contactform container .gform_body .gform_fields {grid-row-gap:25px;} .contactform container .gform_body p { clear: both; display: block; } .contactform container .gform_body select { background: url(../images/select.png) center right no-repeat; background-color: #F8FFD5; } .contactform container .gform_body .gchoice {margin-bottom:10px;} .contactform container input[type=radio] { border: 2px solid var(--dark-gray); width :25px; height: 25px; border-radius: 50%; display: inline-block;top:auto !important; } .contactform container input[type=radio]:checked:after { background-color: orange; } .contactform container .ginput_container_address label, .contactform container .ginput_container_name label, .contactform container .ginput_container_number .instruction {font-family:var(--secondary-font)} .contactform container .gchoice label {margin-left:40px;} .contactform container .gform_body .textarea, .contactform container .gform_body .textarea label, .contactform container .gform_body .textarea textarea { height: 112px; } .contactform container .gform_required_legend {margin-bottom:20px;} .contactform container .gform_footer input[type=submit] { height: 42px; border: 2px solid var(--yellow);font-family: var(--primary-font); font-weight: 700; text-transform: uppercase; font-size: 15px;width: auto; padding-left: 34px; padding-right: 34px; color: var(--dark-gray); cursor: pointer;background:none; } .contactform container .gform_footer input[type=submit]:hover { background: var(--yellow) } /* Archive */ #archive container {display:grid;grid-template-columns:1fr 30%;column-gap:3%;} #archive .twitter-feed-mobile { display:none; } #archive container .single-post { background: var(--light-gray); padding: 15px 45px 25px; margin-bottom: 25px;overflow:auto; } #archive container .single-post h3 { font-family: var(--primary-font); padding: 15px 20px 10px 0;font-size:22px;letter-spacing: .04ex; } #archive container .single-post h3 a { color:var(--dark-gray) } #archive container .single-post time { font-family: var(--primary-font); padding: 15px 0px 10px 0; font-size: 16px; text-transform: uppercase; display:inline;color: var(--purple);position:relative; } #archive container .single-post time:after {content: "/";position:absolute;margin-left:10px;color:var(--yellow)} #archive container .single-post .categories { font-family: var(--primary-font); padding: 15px 20px 10px; font-size: 16px; text-transform: uppercase;display:inline;color: var(--purple); } #archive container .single-post hr { width: 100%; height: 2px; background: #DDDDDD; margin: 20px 0 10px 0; clear: both; } #archive container .single-post figure { width: 250px; float: right;margin-top:20px; } #archive container .single-post figure img {height:auto;} #archive container .single-post .details {width:calc( 100% - 250px );float:left;padding-right:30px;} #archive container .single-post .details article a { font-family: var(--primary-font);color: var(--dark-gray);font-size: 16px;letter-spacing: 0.1ex;text-transform: uppercase;position:relative;padding-bottom:5px;} #archive container .single-post .details article a:hover {border-bottom: 1px solid var(--dark-gray);} #archive container .single-post .details article a:after {content: ">";margin-left: 10px;} .blocker { z-index: 9; } #lightbox { background: none; max-width: calc( 100vw - 40px ); } .lightbox-inner container { max-height: calc( 100vh - var(--header-height) ); background: #FFF; padding: 50px; text-align: center; max-width: 100%; min-height: 400px; } .lightbox-inner container figure { min-height: 400px; } #lightbox .close-modal { top: 50px; right: 75px; width: 75px; height: 35px; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-decoration: none; text-transform: uppercase; font-size: 14px; color: #FFF; background: #000; z-index: 9; } .lightbox-inner container img#lightbox-pix { max-height: calc( 100vh - var(--header-height) - calc( 100px ) ); max-width: 100%; } .modal a.close-modal:before { display: none; } .lightbox-button { position: relative; display: block; } .lightbox-button:after { position: absolute; bottom: 20px; right: 20px; background: #FFF; width: 50px; height: 50px; padding: 10px; color: #000; font-family: var(--icon-font); content: ""; font-weight: 800; text-align: center; font-size: 30px; border: 1px solid #000; } atta, /* Content Settings */ main { min-height: calc( 100vh - var(--footer-height) ); overflow: hidden; padding-top: var(--header-height); } main a { color: var(--blue); text-decoration: none; } /* Main Link Style */ main .content .boxcontainer div div { background: var(--secondary-color); color: #FFF; padding: 10px; min-height: 40px; font-size: 10px; } .content container { padding: 38px 38px; } article ul li.blocks-gallery-item:before { display: none!important; } .galleries .page-header .header-quote figure { display: none; } /* Form Settings */ ::-webkit-input-placeholder { color: var(--secondary-color); } :-moz-placeholder { color: var(--secondary-color); } ::-moz-placeholder { color: var(--secondary-color); } :-ms-input-placeholder { color: var(--secondary-color); } input[type=radio] { width: 20px; height: 20px; display: inline-block; border-width: 2px; border-style: solid; border-color: var(--primary-color); border-radius: 50%;position:relative; } input[type=radio]:checked:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 10px; display: block; height: 10px; background-color: var(--dark-gray); border-radius: 50%; } input[type=checkbox] { width: 20px; height: 20px; display: inline-block; border-width: 2px; border-style: solid; border-color: var(--primary-color); position: absolute; } input[type=checkbox]:checked:after { content: "✔"; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: var(--primary-color); } textarea, input[type=search], input[type=number], input[type=tel], input[type=email], select, input[type=date], input[type=text] { font-family: var(--secondary-font); width: 100%; height: 50px; padding-left: 15px; border-width: 1px; border-style: solid; border-color: var(--primary-color); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size) } .select-wrapper { position: relative; } .select-wrapper:after { position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; content: "\f0d7"; font-family: 'Font Awesome 5 Free'; font-weight: 900; } select { padding-right: 50px; } textarea { height: 100px; padding-top: 15px; } input[type=submit], button, input[type=button] { font-family: var(--primary-font);color: var(--dark-gray);font-size: 14px;text-transform: uppercase;font-weight: 400;border: 2px solid var(--yellow);padding-left: 10px;padding-right: 10px;height: 42px;cursor:pointer;background:none; } input[type=submit]:hover {} form[role=search] button { font-family: var(--icon-font); font-weight: 900; } /* Footer Settings */ #page-foot { background: #EFEFEF; padding: 23px 0px; height: var(--footer-height);position:relative; } #page-foot .footer-logo img { float: left; width: 135px; height: 56px; } #page-foot .logo-area vr { border-left: 1px solid #000; display: inline-block; width: 1px; height: 76px; float: left; } #page-foot .logo-area { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 335px; width: 100%; float: left; } #page-foot .logo-area a { padding-top: 10px; padding-bottom: 10px; } #page-foot .footer-menus { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; max-width: calc( 100% - 355px ); width: 100%; float: right; } #page-foot nav#footer-nav ul:first-child { display: block; width: 100%; } #page-foot .footer-menus address { font-family: var(--secondary-font); font-size: 12px; padding-top: 0px; color: var(--gray); } #page-foot .footer-menus address p { line-height: 1.5 } #page-foot nav#footer-nav ul:first-child li a, #page-foot .footer-menus address p.h5 { font-family: var(--primary-font); color: var(--purple); font-size: 14px; text-transform: uppercase; text-decoration: none; letter-spacing: 0.1ex; margin-bottom: 5px; } #page-foot nav#footer-nav ul:first-child li { width: 50%; float: left; } #page-foot nav#footer-nav ul:first-child li:last-child { text-align: right; } #page-foot nav#footer-nav ul:first-child:after { content: ""; clear: both; display: block; } #page-foot .footer-menus address p a { color: #333; text-decoration: none; } #page-foot .footer-menus address p { color: #333; } #page-foot nav#footer-nav { padding-top: 0px; float: left; } #page-foot container { max-width: 990px; } #page-foot .social { float: right; margin-top: 20px; } #page-foot .social li a { color: #333; margin-left: 15px } #page-foot a:hover { color: var(--blue)!important } select::-ms-expand { display: none; } select { -moz-appearance: none; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ #page-head container { position: absolute; top: 0px; left: 50%; transform: translateX(-50%) } } .ada { display: block; width: 0px; height: 0px; text-indent: -300vw; } /*GRID WIDTH TO IPAD LANDSCAPE*/ @media handheld, only screen and (max-width: 1349px) and (min-width: 1024px) { /* Under the grid width to iPad Landscape */ :root { --logo-width: 225px; --search-box: 75px; } .header-scroller .swiper-pagination { display: none; } .weather-translate { left: 5px; top: 200px; } .header-prev { left: 0px } .header-next { right: 0px; } .header-scroller container { padding: 0px 35px; } #page-head container .search-box { margin-left: 15px; } #page-head container .search-box > label { width: 42px; height: 42px; font-size: 0px; font-family: var(--icon-font); font-weight: 800; } #page-head container .search-box > label:after { content: ""; font-size: 15px; } #page-head container #nav #main a { margin: 0px 6px; } .brand-slider .swiper-button-prev, .bio-slider .swiper-button-prev, .facts-slider .swiper-button-prev { left: 0px; } .brand-slider .swiper-button-next, .bio-slider .swiper-button-next, .facts-slider .swiper-button-next { right: 0px; } } /* SMALLER TABLETS TO IPAD PORTRAIT */ @media handheld, only screen and (max-width: 1023px) and (min-width: 767px) { /* Smaller tablets to iPad portrait */ :root { --logo-width: 225px; --search-box: 75px; } #page-head container .logo { margin-left: 0px; } #page-head container #nav { display: block!important; width: 100%; height: 0px; overflow: hidden; transition: all 0.8s; position: absolute; z-index: 2; width: auto; top: 100%; right: 0px; width: 100%; overflow-y: hidden; background: var(--light-gray); max-width: 100%; width: 0px; height: 100vh; } #page-head container #nav #main { text-align: right; display: block!important; width: 270px; padding-top: 20px; } #page-head container #nav #main, #page-head container #nav #main li { display: block!important; height: auto!important; } #page-head container #nav #main li a { padding: 20px; display: block; margin: 0px!important; font-size: 14px; padding-right: 40px; position: relative; z-index: 1; } #page-head container #nav #main li.menu-item-has-children > a:after { content: ""; font-family: var(--icon-font); font-weight: 800; position: absolute; right: 15px; font-size: 20px; top: 50%; transform: translateY(-50%) } #page-head container #nav #main li.menu-item-has-children > a.plus { color: var(--red) } #page-head container #nav #main li.menu-item-has-children > a.plus:after { transform: rotate(180deg) translateY(50%) } #page-head container #nav #main > li:last-child > a { display: block; border: none; padding: 12px; padding-right: 40px; font-size: 14px; color: var(--dark-gray); letter-spacing: 0.03ex; } #page-head container #nav #main .menu-item-has-children ul { display: block!important; max-height: 0; position: relative; background: #4E4949; } #page-head container #nav #main .menu-item-has-children ul li { display: block; text-align: right; } #page-head container #nav #main .menu-item-has-children ul li:first-child { padding-top: 10px; } #page-head container #nav #main .menu-item-has-children ul li:last-child { padding-bottom: 10px; } #page-head container #nav #main .menu-item-has-children ul li.current-menu-item { background: #000; } #page-head container #nav #main .menu-item-has-children ul li.current-menu-item a { color: #FFF; } #page-head container #nav #main .menu-item-has-children ul li a { padding: 10px; padding-right: 20px; font-size: 14px; color: #FFF; padding-right: 40px; } #page-head container #nav #main .menu-item-has-children ul.expand { display: block!important; position: static; max-height: 50vh; } #page-head container .toggle { width: 22px; height: 15px; float: right; display: inline-block; color: #fff; text-decoration: none; z-index: 3; text-align: left; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; margin: 0px 15px 0px 0px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%) } #page-head container .toggle:before, #page-head container .toggle:after, #page-head container .toggle em:before, #page-head container .toggle em:after { display: block; position: absolute; height: 2px; width: 100%; background: var(--dark-gray); opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; content: " "; border-radius: 15px; } #page-head container .toggle:before { top: 0px; } #page-head container .toggle em:before, #page-head container .toggle em:after { top: 50%; } #page-head container .toggle:after { top: 100%; } #page-head container #toggle:checked ~ .toggle:before { top: 14px; width: 0%; left: 50%; } #page-head container #toggle:checked ~ .toggle em:before { transform: rotate(45deg); } #page-head container #toggle:checked ~ .toggle em:after { transform: rotate(-45deg); } #page-head container #toggle:checked ~ .toggle:after { top: 14px; width: 0%; left: 50%; } #page-head container #toggle:checked ~ #nav { display: block!important; height: 100vh; overflow: auto!important; width: 270px;} #page-head container .search-box { margin-left: 0px; margin-right: 30px; height: 30px; margin-top: -8px; } #page-head container .search-box > label { width: 36px; height: 36px; font-size: 0px; font-family: var(--icon-font); font-weight: 800; margin-left: 0px; margin-right: 0px; border: none; } #page-head container .search-box form { height: 36px; } #page-head container .search-box > label:after { content: ""; font-size: 15px; } #page-head container .search-box > input[type=checkbox]:checked ~ label { margin-right: 0px; height: 30px; color: #FFF; } #page-head container .search-box input[type=checkbox]:checked ~ form { height: 36px; } #page-head container .search-box form input { margin: 3px 3px; } .page-header container .title-box { max-width: 300px; } .page-header container .header-quote { max-width: calc( 100% - 300px ); } .header-scroller .swiper-pagination { z-index: 5; } .header-scroller .coloredbox { right: 0px;width:600px; } .header-scroller .slide .slidebg {padding-bottom:65%;} .sub-title { font-size: 16px; } .header-scroller .swiper-pagination { display: none; } .weather-translate { left: auto; right: 5px; top: 150px; transform: none; } .header-prev { left: 0px } .header-next { right: 0px; } .header-scroller container { padding: 0px 35px; } #page-head container .search-box { margin-left: 0px; } #page-head container .search-box > label { width: 36px; height: 36px; font-size: 0px; font-family: var(--icon-font); font-weight: 800; background: none!important; background: none!important } #page-head container .search-box > label:hover { color: var(--blue) } #page-head container .search-box > input[type=checkbox]:checked ~ label { color: #FFF; } #page-head container .search-box > label:after { content: ""; font-size: 15px; } .brand-slider .swiper-button-prev, .bio-slider .swiper-button-prev, .facts-slider .swiper-button-prev { left: 0px; } .brand-slider .swiper-button-next, .bio-slider .swiper-button-next, .facts-slider .swiper-button-next { right: 0px; } .facts-slider {margin-bottom:40px;} .slider-title { font-size: 50px; } .home-map .map-locations { max-width: 500px; padding-bottom: 10px; } .bio-slider container article .number span { margin: 10px 0px; display: block; } .largemap .tabbers > .box-2-3.tabs, .largemap .tabbers > ul { width: 50%; } .largemap .box-2-3.tabs > ul { width: 100%; } .largemap .box-2-3.tabs > ul + div { width: 200%; position: relative; left: -100%; } #page-foot .logo-area { max-width: 245px; } #page-foot .footer-logo svg { width: 115px; } #page-foot container { padding: 0px 15px; } #page-foot .footer-menus { max-width: calc( 100% - 245px ); padding-bottom: 0px; } .builder container,.page-header container {padding:0 30px;} } /*MOBILE VIEWS*/ @media handheld, only screen and (max-width: 766px) { /* Mobile - All Mobile */ :root { --header-height: 58px; --logo-width: 185px; --search-box: 75px; --footer-height: 310px } section container { padding: 15px 30px!important; } article h1, .h1, main h1 {line-height:1.5em;} article h2, .h2 { font-size: 26px; } article p, .p { line-height: 1.8; } /* Mobile Menu styles */ #page-head container { height: 58px; max-width: 1206px; position: absolute; top: 0px; padding: 0px 15px; } #page-head container .logo > * { max-height: var(--header-height); } #page-head container #nav { background: var(--secondary-color);} #page-head container #nav #main { } #page-head container #nav #main li a { padding: 20px; } #page-head container #nav #main li ul { } #page-head container #nav #main li ul li a { } #page-head container .logo { margin-left: 0px; } #page-head container #nav { display: block!important; width: 100%; height: 0px; overflow: hidden; transition: all 0.8s; position: absolute; z-index: 2; width: auto; top: 100%; right: 0px; width: 100%; overflow-y: hidden; background: var(--light-gray); max-width: 100%; width: 0px; height: 100vh; } #page-head container #nav #main { text-align: right; display: block!important; width: 100vw; padding-top: 20px; } #page-head container #nav #main, #page-head container #nav #main li { display: block!important; height: auto!important; } #page-head container #nav #main li a { padding: 20px; display: block; margin: 0px!important; font-size: 16px; padding-right: 40px; position: relative; z-index: 1; } #page-head container #nav #main li.menu-item-has-children > a:after { content: ""; font-family: var(--icon-font); font-weight: 800; position: absolute; right: 15px; font-size: 20px; top: 50%; transform: translateY(-50%) } #page-head container #nav #main li.menu-item-has-children > a.plus { color: var(--red) } #page-head container #nav #main li.menu-item-has-children > a.plus:after { transform: rotate(180deg) translateY(50%) } #page-head container #nav #main > li:last-child > a { display: block; border: none; padding: 12px; padding-right: 40px; font-size: 16px; color: var(--dark-gray); letter-spacing: 0.03ex; } #page-head container #nav #main .menu-item-has-children ul { display: block!important; max-height: 0; position: relative; background: #4E4949; } #page-head container #nav #main .menu-item-has-children ul li { display: block; text-align: right; } #page-head container #nav #main .menu-item-has-children ul li:first-child { padding-top: 10px; } #page-head container #nav #main .menu-item-has-children ul li:last-child { padding-bottom: 10px; } #page-head container #nav #main .menu-item-has-children ul li.current-menu-item { background: #000; } #page-head container #nav #main .menu-item-has-children ul li.current-menu-item a { color: #FFF; } #page-head container #nav #main .menu-item-has-children ul li a { padding: 10px; padding-right: 20px; font-size: 14px; color: #FFF; padding-right: 40px; } #page-head container #nav #main .menu-item-has-children ul.expand { display: block!important; position: static; max-height: 50vh; } #page-head container .toggle { width: 22px; height: 15px; float: right; display: inline-block; color: #fff; text-decoration: none; z-index: 3; text-align: left; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; margin: 0px 15px 0px 0px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%) } #page-head container .toggle:before, #page-head container .toggle:after, #page-head container .toggle em:before, #page-head container .toggle em:after { display: block; position: absolute; height: 2px; width: 100%; background: var(--dark-gray); opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; content: " "; border-radius: 15px; } #page-head container .toggle:before { top: 0px; } #page-head container .toggle em:before, #page-head container .toggle em:after { top: 50%; } #page-head container .toggle:after { top: 100%; } #page-head container #toggle:checked ~ .toggle:before { top: 14px; width: 0%; left: 50%; } #page-head container #toggle:checked ~ .toggle em:before { transform: rotate(45deg); } #page-head container #toggle:checked ~ .toggle em:after { transform: rotate(-45deg); } #page-head container #toggle:checked ~ .toggle:after { top: 14px; width: 0%; left: 50%; } #page-head container #toggle:checked ~ #nav { display: block!important; height: 100vh; overflow: auto!important; width: 100vw; } #page-head container .search-box { margin-left: 0px; margin-right: 30px; height: 36px; top: -1px; } #page-head container .search-box > label { width: 36px; height: 36px; font-size: 0px; font-family: var(--icon-font); font-weight: 800; margin-left: 0px; margin-right: 0px; border: none; background: none!important; float: right; } #page-head container .search-box > label:hover { color: var(--blue) } #page-head container .search-box > input[type=checkbox]:checked ~ label { color: #FFF; } #page-head container .search-box > label:after { content: ""; font-size: 15px; } #page-head container .search-box > input[type=checkbox]:checked ~ label { margin-right: 0px; height: 30px; } #page-head container .search-box > input[type=checkbox]:checked ~ label:after { top: 2px; } #page-head container .search-box input[type=checkbox]:checked ~ form { height: 36px; } #page-head container .search-box form { height: 36px; } #page-head container .search-box form input { margin: 3px 3px; } .slider-title {font-size:40px;} a.cta-text {font-size:14px;} .weather-translate { position: absolute; top: 68px; left: auto; right: 15px; z-index: 10; transform: none; } .weather-translate #weatherwidget { display: inline-block; float: left; padding-top: 3px; padding-right: 15px; margin-right: 5px; padding-top: 27px; height: 24px; } .weather-translate #translation-widget { display: inline-block; } .weather-translate #translation-widget a { display: inline-block; border: none; border-left: 1px solid var(--dark-gray); padding: 5px 8px; width: 35px; } .weather-translate #translation-widget .translation-drawer { display: inline-block; } .weather-translate #translation-widget label { display: none; } .header-scroller container { padding: 0px 30px; } .header-scroller .swiper-pagination { display: none; } .header-scroller .slide .slidebg { padding-bottom: 50%; } .header-scroller .coloredbox { position: static; padding: 30px; width: 100% } .header-scroller img { max-height: 100%; } .header-scroller .swiper-pagination { top: 100%; right: 50%; transform: translateX(-50%); } .welcome h1 {font-size:23px;} .welcome h1 strong {font-size:38px;margin:0 3px;} .welcome h1 strong:after {bottom:-30px;left:0;height:25px;width:110px;} .wide-image img {height:30vh;} .header-scroller .slide { padding-bottom: 0px; } .slider-title { font-size: 36px; margin-top: 8px; } .brand-slider .swiper-button-prev, .bio-slider .swiper-button-prev, .facts-slider .swiper-button-prev { left: 10px; } .brand-slider .swiper-button-next, .bio-slider .swiper-button-next, .facts-slider .swiper-button-next { right: 10px; } .facts-slider container p.callout { margin-top: 0px; } .facts-slider container .swiper-container {grid-template-columns:1fr;column-gap:normal;} .facts-slider {margin-bottom:40px;} .facts-slider container .swiper-container {row-gap:30px;} #map { clear: both; } .acf-map { height: 445px!important; } .brand-slider container .title-box + a.cta { margin: 5px auto; } .bio-slider container article .number { font-size: 80px; } .bio-slider container article { padding: 0px 15px; } .bio-slider container figure { width: 100%; } .newsletter container form { float: none; width: 100%; max-width: 100%; } .newsletter form input {float:none;width:100%;} .newsletter form input[type="submit"] {float:none;width:100%;} /* page settings */ main { padding-top: calc( var(--header-height) + 58px ) } .welcome {margin:50px 0;} .welcome p {font-size:1em;line-height:1.8em;} .page-header container { padding-top: 25px; } .page-header container .header-quote { float: none; width: 100%; max-width: 100%; } .page-header container .header-quote figure { height: auto; } .linkbar container ul { display: block; width: 100%; float: none; padding: 0px; } .linkbar container ul li { margin: 10px 0px; text-align: center; } .linkbar container ul li a.cta { width: 100%; max-width: 240px; margin: auto; } .infographics container { padding: 30px; margin-top: 0px; padding-top: 0px; } .infographics container .topstats { display: block; margin-bottom: 35px; } .infographics container .topstats figure { width: 100%; float: none!important; display: block; text-align: center; } .infographics container .topstats p.h3 { text-align: center; padding: 25px 0px; } .infographics container .topstats:after { content: ""; clear: both; display:block; margin-bottom: 25px; } .infographics.threestep container .topstats { padding-bottom: 0px; margin-bottom: 0px; } .infographics container .flight { background: none; } .infographics container .gdp ul { display: block; padding: 0px; } .infographics container .gdp ul li { width: auto; } .infographics container .gdp ul li .gdp-details { margin-bottom: 50px; } .blurbs container ul li { padding: 15px 0px; } .single-blurb container .h1:before, .single-blurb container .h1:after { display: block; margin: 15px auto; } .list container .list-tab > .scroller ul { clear: both; float: none; } .list container .attraction-details { width: 100%; float: none; padding: 30px 0px; clear: both; } .industry-selector { max-width: 100%; float: none!important; margin-bottom: 20px; } .industry-selector label { display: none; } .industry-selector select { width: 100%; max-width: 100%; } .list container .attraction-details .buttonbox a { width: 210px; margin-bottom: 15px; } .map .acf-map { height: 340px; } .tablebox container .table-container { padding: 15px; } main table tr td:before { width: 50%; float: left; text-align: left; font-size: 14px; } .tablebox container table tbody tr td:last-child { text-align: left; } .multitabs container .side { width: 100%; float: none; } .multitabs container .sidetab { width: 100%; float: none; max-width: 100%; } .subtab-body > ul { width: 100%; } .subtab-body > ul li { margin-bottom: 15px; } .statgraphic figure { width: 100%; float: none; clear: both; margin-top: 20px; max-width: 100%; } .largemap .tabbers ul.scrollee { margin-bottom: 0px; } .largemap .tabbers #names ul.scrollee { height: 250px; } .largemap .tabbers .box-2-3.tabs { padding: 0px; } .largemap .tabbers #types { padding-right: 0px; } .largemap .tabbers #types > ul { max-height: 170px; } .largemap .tabbers #types:after, .largemap .tabbers #names:after { display: none; } .largemap .tabbers article { padding-left: 0px; } .subtabs { padding: 0px; } #archive container {grid-template-columns:100%;} #archive container .twitter-feed {display:none;} #archive container .twitter-feed-mobile {display:block;} #archive container .single-post { padding: 15px; } #archive container .single-post .details {float:none;width:100%;} #archive container .single-post figure { width :100%;float:none; } #archive container .single-post figure img { width: 100%; height: auto; } .team container ul.teammates li figure { float: none; } .team container ul.teammates li .bio { float: none; width: 100%; margin-top: 25px; } .gm-style-iw-d { max-width: 200px!important; } .gm-style .gm-style-iw-c { max-width: 220px!important; } .two-column container article.bullets { padding-left: 0px; } .stat .h1 { font-size: 85px; } .table-container table tbody tr td img { display: block; clear: both; } .table-container table tbody tr td:first-child { background: var(--dark-gray); color: #FFF; border-top-width: 0px; border-bottom-width: 0px; } main table tr td:after { clear: both; display: block; content: ''; } .gray-bar container .graybox .h2 { font-size: 20px; } .multicolumns container .box-1-2 + .box-1-2 { padding: 0px; } .news-area {margin-bottom:40px;} .news-area container {padding:50px 30px !important;} .blog {margin-bottom:40px;} .blog .news-container {display:flex;} .blog .title-box a.cta-text {top:15px;} .newsletter legend { display: block; float: none; } .newsletter form {float:none;max-width:none;} .home-map .map-locations { padding-bottom: 10px; } .brand-slider container { margin-bottom: 0px; } .brand-slider h2 {display:block;width:55%;line-height:1.2em;} .brand-slider container .title-box a.cta-text {top:22px;} section container { margin-bottom: 0px!important; } .team container ul.teammates li .bio a.cta { margin-bottom: 20px; } .story-prev { left: 0px; } .story-next { right: 0px; } /* Theme footer */ #page-foot { padding: 15px 0px; } #page-foot .logo-area { float: none; margin: 0px; clear: both; } #page-foot .footer-menus { max-width: 100%; display: block; clear: both; } #page-foot .footer-menus address { padding: 0px; margin: 15px 0px; font-size: 13px; } #page-foot nav#footer-nav { padding: 0px; } #page-foot .social { float: right; margin-top: 20px; position: absolute; bottom: 55px; right: 65px; z-index: 2; } .social li { display: block; margin-bottom: 15px; } } /*** TEMPLATE BUILDER ***/ a.primary-btn { margin-right: 5px; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; font-family: var(--primary-font); color: var(--dark-gray); font-size: 14px; text-transform: uppercase; font-weight: 400; border: 2px solid var(--yellow); padding:15px 30px; letter-spacing:0.05em; } a.primary-btn:hover {background:var(--yellow);} /* Header */ .builder header { width:100%; min-height:300px; margin-bottom:50px; display:grid; align-items:center; grid-template-rows:auto; background:#F4F4F5; position:relative; } .builder header .header-text {width:50%;} .builder header h1 { font-family: var(--primary-font); font-size: 50px; line-height: 1.1; color: var(--dark-gray); letter-spacing: .06ex; text-transform: uppercase; font-weight: 300; margin-bottom:10px; } .builder header p.callout { font-size:1.1rem; margin-bottom:20px; } .builder .bg-overlay h1, .builder .bg-overlay p { color:#fff; z-index:2; } .builder header p:not(.callout) { font-weight:bold; } .builder .bg-overlay { background-repeat:none; background-position:center top; background-size:cover; min-height:450px; } .builder header .coloredbox { color: #FFF; width: 30%; position: absolute; bottom: -40px; right: 15%; padding: 30px 40px; background: var(--yellow); z-index:3; max-width:400px; } .builder header .coloredbox h2 { line-height: 1.2; margin-bottom: var(--standard-font-size); font-size: 1.8rem; color: #FFF; letter-spacing: 0.12em; text-transform: uppercase; position: relative; top: -10px; } .builder header .coloredbox .sub-title { font-family: var(--primary-font); color: var(--dark-gray) !important; font-size: 1.1rem; line-height: var(--line-height); margin-bottom: 0px; color: inherit; font-weight: 400; letter-spacing: .04ex; } .builder header .coloredbox p { margin-bottom:20px; color: var(--dark-gray); } .builder header .coloredbox cite { text-transform:none; color: var(--dark-gray); font-style:italic; font-family: var(--secondary-font); letter-spacing:0.01em; font-size:0.8rem; } .builder .bg-overlay:after { content:""; position:absolute; background:rgba(0,0,0,0.45); width:100%; height:100%; z-index:1; } .builder header p {margin-bottom:0;} .builder container {margin:0 auto;} .builder header container {z-index:2;margin:0 auto;} /* Content Block */ .builder p, .builder ul, .builder ol { font-family:var(--secondary-font);line-height: 1.7;letter-spacing: -0.052ex;margin-bottom:20px;} .builder ul, .builder ol {display:inline-block;} .builder .left ul, .builder .left ol {margin-left:25px;} .builder li {margin:3px 0;} .builder .content-block {margin:50px 0;} .builder .content-block h2 {margin-bottom:25px;} .builder .centered {text-align:center;} .builder .content-block-buttons {margin:40px auto 0 auto;text-align:center;} .builder .content-block a.primary-btn {margin:0 15px;} .builder .content-block a.primary-btn:first-of-type {margin-left:0;} .builder .content-block a.primary-btn:last-of-type {margin-right:0;} /*Content Image Block */ .builder .content-image-block {margin:50px 0;} .builder .content-image-block .content-wrapper {display:grid;column-gap:3%;} .builder .content-image-block .content-wrapper figure p {font-size:0.8rem;text-align:center;} .builder .right .content-wrapper {grid-template-columns:1fr 40%;} .builder .left .content-wrapper {grid-template-columns:40% 1fr;} /* Gallery Block */ .builder .gallery-block {margin:50px 0} .builder .gallery-block .gallery {display:grid;grid-template-columns:repeat(2, 1fr);column-gap:2%;row-gap:20px;;} .builder .gallery-block .gallery img {width:100%;object-fit:cover;height:40vh} /* Full Image */ .builder .full-image {margin:50px 0;} /* CTA Block */ .builder .cta-block {background:var(--light-gray);margin:50px 0;text-align:center;padding:30px 5%;} .builder .cta-block h3 {margin-bottom:20px;line-height:1.5em;} .builder .cta-block a.button {font-family: var(--primary-font);color: var(--dark-gray);font-size: 16px;text-transform: uppercase;font-weight: 400;border: 2px solid var(--yellow);padding: 15px 30px;display:inline-block;} .builder .cta-block a.button:hover {background:var(--yellow);} .builder .full-image {width:100%;margin:10px 0 25px 0} /* Features List */ .builder .features-list {margin:80px 0;} .builder .features-container {display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:50px;} .builder .features-container article h3{position:relative;line-height:1.3em;margin:20px 0;padding-top:50px;} .builder .features-container article h3:before {content:"";background:url(../images/longhorn-icon.svg) no-repeat;width:105px;height:22px;top:0;left:0;position:absolute;background-size:contain;} .builder .features-image article h3 {padding-top:0px;} .builder .features-image article h3:before {display:none !important;} .builder .features-image article img {width:100%;aspect-ratio:16 / 9;object-fit:contain} /* Video/Map Block */ .builder .video-block {text-align:center;margin:50px 0;} .builder .video-block p {margin-bottom:40px;} .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Chart Block */ .builder .chart-block {text-align:center;margin:50px 0;} .builder .chart-block p {margin-bottom:20px;} .wpDataTable td.wpdt-bold {background:#F4F4F5 !important;font-size:1.2rem;font-family:var(--primary-font) !important;text-transform:uppercase;} .wpDataTable td.wpdt-cell {font-family:var(--secondary-font);text-transform:none;padding:15px 20px !important;} /* Colored Block */ .builder .colored-block {background:var(--dark-gray);text-align:center;margin:50px 0;position:relative;width:100vw;height:375px;} .builder .yellow {background:var(--yellow) !important;} .builder .dark-gray {background:var(--dark-gray) !important;} .builder .blue {background:var(--purple) !important;} .builder .colored-block h2 {letter-spacing:0.06em;} .builder .colored-block h2.h2 {color:#fff;font-size:40px;letter-spacing:0.08em;} .builder .dark-gray h2, .builder .blue h2 {color:var(--yellow)} .builder .colored-block .colored-content {z-index:2;position:relative;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .builder .image-bg img {object-fit:cover;opacity:0.4;width:100%;height:100%;z-index:1;} .builder .image-bg h2 {color:#fff;} /* Testimonial Block */ .builder .testimonial-block {background:var(--dark-gray);text-align:center;display:flex;justify-content:center;align-items:center;width:100%;margin:50px 0;padding:75px 30px;} .builder .testimonial-content {width:90%;max-width:900px;margin:0 auto;position:relative;} .builder .testimonial-content:before {content:"“";position:absolute;top:-50px;left:-50px;font-size:12rem;color:rgba(255,255,255,0.3);width:100px;height:100px;font-family:'Georgia',sans-serif;z-index:0;} .builder .testimonial-content {color:#fff;font-size:1.2rem;} .builder .testimonial-content p {position:relative;z-index:1;} .builder .testimonial-author {font-size:1.2rem;color:#fff;} .builder .testimonial-author strong {display:block;margin-bottom:5px;} .builder .testimonial-author em {font-size:1rem;} .builder .yellow .testimonial-content, .builder .yellow .testimonial-author {color:var(--dark-gray)} /*TEMPLATE BUILDER - TABLET */ @media (max-width:1024px) { .builder header .coloredbox {right: 5%;} .builder .features-container {grid-template-columns:repeat(2,1fr);} } /* TEMPLATE BUILDER - MOBILE */ @media (max-width:767px) { .builder header .header-text {width:100%;} .builder header .coloredbox {position:relative;width:100%;bottom:0;right:auto;max-width:none;} .builder .content-image-block .content-wrapper{grid-template-columns:1fr;} .builder .content-image-block .content-wrapper img {margin-bottom:30px;} .builder .gallery-block .gallery {grid-template-columns:1fr;row-gap:20px;} .builder .gallery-block .gallery img {width:100%;object-fit:cover;height:auto} .builder .cta-block {background:var(--light-gray);margin:50px 0;text-align:center;padding:30px 5%;} .builder .features-container {grid-template-columns:1fr;row-gap:30px;} .title-box h2 {margin-bottom:40px;} .title-box a.cta-text {position:relative;top:-60px;} }