/* FONTS (via fonts.com)


*/

/* VARIABLES */

:root { 
		
	--default-font: din-2014;
	--default-font-size: 18px;
	--default-input-font-size: 14px;

	--col-primary: #202945;
	--col-primary-rgb: 32,41,69;

	--col-accent: #000;
	--col-accent-rgb: 0,0,0;
	
	--col-text: #202945;
	--col-input: #202945;

	--col-button: #fff;
	--col-button-rgb: 255, 255, 255;

	--col-link: #202945;
	--col-link-rgb: 32,41,69;

	--col-link-hover: #000000;
	--col-link-hover-rgb: 0,0,0;

	--col-error: #ff6633;
	--col-error-rgb: 255,51,0;
	
	--col-attention: #ff6633;
	--col-attention-rgb: 255,51,0;

	--col-warning: #f5b00e;
	--col-warning-rgb: 245,176,14;

	--col-missing: #ff6633;
	--col-missing-rgb: 255,51,0;

	--col-burger: #fff;

	--col-border: #DEDEDE;
	--col-border-rgb: 215,215,215;

	--dim-site-width: 1440px;
	--dim-default-space: 70px;
	--dim-input-height: 40px;

	--col-orange: #d45e44;
	--col-orange-rgb: 212,94,68;
}

/* theme */

body { }
body.header-active { max-height: 100vh;  overflow: hidden;}
html.overlay-active body { max-height: 100vh; overflow: hidden;}

/*CORE HTML*/
p { line-height: 1.66; color: var(--col-text); font-weight: 300}
p.short  { max-width: 940px; margin-left: auto; margin-right: auto;}
p.shorter  { max-width: 760px; margin-left: auto; margin-right: auto;}
p.large { font-size: 24px;}
b,strong { font-weight: 700; }
p.larger { font-size: 24px;}

h1, h2 { font-size: 60px; font-weight: 300; color: var(--col-primary); text-transform: uppercase; line-height: 1.1; letter-spacing: 2px; margin-bottom: 30px; padding-bottom: 0px;}
h1:after, h2:after { content: ""; display: block; width: 90px; height: 1px; background-color: #888B8D; margin: 30px auto 0; }
h1.left:after, h2.left:after { margin: 30px auto 0 0; }
h1.noline, h2.noline { margin-bottom: 40px}
h1.noline:after, h2.noline:after { display: none; }
h1 small, h2 small { font-size: 0.3em; display: block; margin-top: 0px; font-weight: 400; letter-spacing: 1px}
h2.small { font-size: 40px}
h3 { font-size: 40px; font-weight: 700; color: #000; text-transform: uppercase; line-height: 1.5;}
h4 { font-size: 40px; font-weight: 300; color: #000; text-transform: uppercase; line-height: 1.1; margin-bottom: 30px;}
h5 { font-size: 24px; color: #000; font-weight: 500; line-height: 1.66; margin-bottom: 15px;}
h5.light { font-weight: 300; }
h6 { font-size: 24px; color: #000; font-weight: 700; line-height: 1.25; margin-bottom: 20px;}
h2:empty, h3:empty { display: none;}
h3 + p { margin-top: 15px}

/*CONTAINERS*/
article > section { margin: 60px auto;}
section.content { max-width: 1440px; padding: 0}
article > section.masthead  { max-width: 100%; margin-top: 0}
div.masthead img  { display: block;}
div.masthead > img  { display: block; width: 100%;}
article { padding-top: 180px;}
article#home { padding-top: 0px;}

div.content { display: block; margin: 0 auto;}
body.content { display: block; margin: 0 auto;}

article.no-masthead { padding-top: 60px;}

/* ALIGNMENTS */


/*BUTTONS*/
a.btn { background-color: var(--col-primary); color: #fff; font-size: 18px; font-weight: 600; line-height: 46px; border-radius: 10px; padding: 0 15px;}
a.btn:hover { background-color: #000}

/*COLOURS*/
.white { color: #fff !important}
.red { color: var(--col-primary) !important}
.black { color: #000 !important}
.bg-red { background-color: var(--col-primary) !important}
/* CONTENT BLOCKS */

/*CAPTIONS*/
div.caption.white * { color:#fff;}

/*FORMS*/

/*HEADER*/
header { height: 180px; background-color: #fff;  width: 100%; left: 0; max-width: 100%;  position: fixed;}
header > div.logo { display: block; position: absolute; left: 80px; top: 80px; padding-top: 30px; z-index: 2;}
header > div.logo img { display: block; height: 40px; margin: 0 auto}
body.article-home header { background-color: transparent;  }
body.article-home header > div.logo, header.active > div.logo {display: none;}

header.attached {position: fixed; background-color: #fff; top: 0; left: 0}

header div.fixed-nav { position: absolute; top: 100px; right: 80px; background-color: #fff; box-shadow:  0px 0px 10px 0px rgba(0,0,0,0.16)}
header.attached { top: -200px; overflow: hidden;}
header.attached.visible { top: 0; overflow: visible;}
body.article-home header div.fixed-nav { box-shadow:  none}
header div.fixed-nav ul { display: block; font-size: 0}
header div.fixed-nav ul li { display: inline-block; vertical-align: top; padding: 10px 0;}
header div.fixed-nav ul li a { display: block; line-height: 40px; font-size: 14px; color: var(--col-primary); text-align: center; padding: 0 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400}
header div.fixed-nav ul li:first-child a { border-right: 1px solid #888B8D}
div.burger { left: auto; right: 20px; top: 100px; background-color: var(--col-primary); display: block; box-shadow:  0px 0px 10px 0px rgba(0,0,0,0.16); position: absolute}

header nav { display: none; width: 100%; padding-top: 0px; padding-right: 0px; position: relative}
header nav ul { display: block; width: 100%; text-align: right; font-size: 0}
header nav ul > li { display: block; vertical-align: middle; text-align: center; position: relative; margin-bottom: 3.6vh;}
header nav ul > li.mobile a { display: none !important}
header nav ul > li > a { display: block; width: 100%; text-align: center; line-height: 1.33; color: var(--col-text); font-size: 2.7vh; font-weight: 300; padding: 0 20px; text-transform: uppercase;}
header nav ul > li > a.active { background-color: var(--col-primary)}
header nav ul > li:hover > a { font-weight: 400}
header nav ul > li > ul { display: block; opacity: 0; position: absolute; left: -9990px; top: 60px; transition: opacity .3s ease-out; background: var(--col-primary); width: 380px}
header nav ul > li > ul li { display: block; width: 100%}
header nav ul > li > ul li a { display: block; width: 100%; line-height: 40px; color: #000; padding-left: 20px; text-align: left; color: #fff;}
header nav ul > li > ul li a.active { background-color: #BE131A;}
header nav ul > li > ul li a:hover { background-color: #BE131A; color: #fff;}
header nav ul > li:hover > ul { opacity: 1; position: absolute; left: 0px; transition: opacity .3s ease-out; padding: 0px 0}

header.active { width: 100vw; height: 100vh; background-color: rgba(255,255,255,1) !important}
header.active nav { width: 100%; display: block !important; top: 50%; transform: translateY(-50%); }
div.nav-logo {  display: block; width: 100%; margin: 0 auto 7.5vh; padding-top: 3.6vh;}
div.nav-logo img { width: auto; display: block; height: 7.6vh; margin: 0 auto; max-width: 80%}

div.covid { display: block; width: 100%; background: var(--col-primary); text-align: center; padding: 20px; }
div.covid p, div.covid a { display: inline-block; vertical-align: middle; color: #fff}
div.covid p { line-height: 30px;font-size: 18px; margin: 0 auto; padding-left: 50px; background: url(../img/icons/info.svg) no-repeat left center; background-size: 30px auto; font-weight: 300}
div.covid a { line-height: 38px; border: 1px solid #fff; padding: 0 15px; margin-left: 80px; font-size: 12px; font-weight: 400}
/*FOOTER*/
footer { background: url(../img/bg-footer.jpg) no-repeat center center; background-size: cover; width: 100%; margin: 60px auto 0; padding: 0 20px;}
footer div.footer-row { display: block; width: 100%; margin: 0 auto; font-size: 0; padding: 0 50px; margin-bottom: 100px; max-width: 1440px;}
footer div.footer-row:last-child { margin-bottom: 0; padding-bottom: 35px}
footer div.footer-row  > div { display: inline-block; vertical-align: top; padding: 0 20px}
footer div.address { width: 25%; text-align: left;}
footer div#register { width: 35%; }
div#register > p  { display: none;}
footer div.logo { width: 40%; }
footer div.logo img { display: block; width: 100%; margin: 0 auto 50px; max-width: 416px;}
footer div.tagline { display: block; width: 100%; text-align: center; font-size: 16px; color: var(--col-primary); font-weight: 400; margin-bottom: 35px; text-transform: uppercase; letter-spacing: 2px}

footer div.checkbox label { font-weight: 200}

footer div.social { display: block; text-align: center; }
footer div.social ul { display: block; width: 100%; font-size: 0; text-align: center;}
footer div.social ul li { display: inline-block; vertical-align: middle;}
footer div.social ul li a { display: block; margin: 0 14px; width: 20px; height: 20px; font-size: 20px; line-height: 20px; color: var(--col-primary);}

footer div.title { font-size: 18px; font-weight: 400; text-transform: uppercase; margin-bottom: 20px;}
div.address p, div.address a { font-size: 14px; font-weight: 400; text-transform:  uppercase; display: block; text-align: left; color: var(--col-primary); line-height: 1.5;}
div.address p { margin-bottom: 20px}
div.navigation { display: block; margin-top: 30px;}
div.navigation a { display: block; width: 100%; padding-left: 50px; border: 1px solid #DEDEDE; font-size: 12px; text-align: left; position: relative; margin-bottom: 10px; background: #fff; line-height: 40px !important; max-width: 200px;}
div.navigation a:hover { border-color: var(--col-primary)}
div.navigation a:before { content: ""; display: block; width: 50px; position: absolute; left: 0; top: 5px; height: 30px; background: url(../img/map/waze.svg) no-repeat center center; background-size: contain;}
div.navigation a.google:before { top: 7px; height: 25px; background: url(../img/map/google.svg) no-repeat center center; background-size: contain;}

footer div.disclaimer { color: #888B8D; font-size: 14px; font-weight: 300; display: inline-block; width: calc(100% - 400px); text-align: left; }
footer div.disclaimer p { color: #888B8D; font-size: 14px; font-weight: 300; display: block; width: 100%; text-align: left; margin: 0 auto}
footer div.disclaimer a { color: #888B8D; font-size: 14px; font-weight: 300;}
footer div.disclaimer a:hover { color: #000}
footer div.logos { display: inline-block; width: 400px; text-align: right; font-size: 0; vertical-align: top}
footer div.logos a { display: inline-block; vertical-align: top; margin-left: 22px; }
footer div.logos a img { display: block; height: 21px; }

div.popup-mode { position: fixed; width: 100vw; height: 100vh; z-index: 99; display: block; top: 0; left: 0; background: url(../img/contact/bg-contact.jpg) no-repeat center center; background-size: cover; }
div.popup-mode:before { content:""; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0, .62); }
div.popup-mode footer { display: block; width: 80%; height: auto; max-width: 780px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) ; padding: 70px 180px; text-align: center;}
div.popup-mode footer div.disclaimer, div.popup-mode footer div.logos, div.popup-mode footer div.footer-row:last-child, div.popup-mode div.address { display: none;}
div.popup-mode div.footer-row { margin-bottom: 0}
div.popup-mode div.logo { display: block; width: 100%}
div.popup-mode div#register { display: block; width: 100%; margin-top: 50px; padding: 0}
div.popup-mode div#register > p { display: block; width: 100%; font-size: 16px; text-align: center; margin-bottom: 20px}
div.popup-mode div#register div.field {padding-right: 0}
div.popup-mode a.popup-close { display: block; position: absolute; width: 23px; height: 23px; right: 23px; top: 23px; background: url(../img/icons/close.svg) no-repeat center center; background-size: contain; cursor: pointer; opacity: .9; z-index: 101;}
div.popup-mode a.popup-close:hover { opacity: 1}
div.popup-mode div.tagline, div.popup-mode div.social { display: none !important}
div.popup-mode footer div.title { font-size: 20px; margin-bottom: 10px}
div.popup-mode  .select2-selection__rendered {text-align: left; }
div.grecaptcha-badge { opacity: 0 !important; height: 0 !important; width: 0 !important}

/*CONTENT*/

#welcome { font-size: 24px; text-align: center; padding: 100px 20px; width: 100%; display: block}

.js-slide-up { top: 350px; position: relative;}
.js-slide-up.in-view { top: 0px; transition: top .6s cubic-bezier(0.39, 0.575, 0.565, 1)}

div.masthead div.iframe { display: block; position: relative; width: 100vw; height: 100vh;}
div.masthead iframe { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0}
div.masthead.taller iframe { height: 100vh; width: 177.77vh; top: 0 !important;}
div.masthead.wider iframe { width: 100vw; height: 56.25vw; left: 0 !important}


div.caption-bg { width: 800px; max-width: 72%; background: rgba(255, 255, 255, .8); padding: 70px 20px;}
div.caption-bg img { width: 100%; max-width: 655px; margin: 0 auto}
div.masthead div.tagline { color: #fff; font-size: 30px; font-weight: 300; text-transform: uppercase; left: 50%; margin-left: -200px; width: 400px; text-align: center; top: calc(50% + 200px); position: absolute; display: block; letter-spacing: 2px;}

ul.slideshow { max-width: 1350px; margin: 0 auto 0px}
div.slideshow ul.slideshow div.slick-track li { padding: 40px; transform: scale(1); transition: transform .3s ease-out .3s}
div.js-slideshow { max-width: 1280px; margin-left: auto; margin-right: auto}
div.slideshow ul.slideshow div.slick-track li.slick-active, div.slideshow  ul.slideshow div.slick-track li.slick-current { transform: scale(1.28)}
ul.slideshow div.slick-track li > a { width: 100%; display: block; color: var(--col-primary); text-align: center; padding-bottom: 20px; font-size: 18px; letter-spacing: 2px}
ul.slideshow div.slick-track li > a > img, ul.slideshow div.slick-track li > img { width: 100%; display: block; margin-bottom: 16px; }
ul.slideshow div.slick-track li label { width: 100%; display: block; text-align: center; font-size: 18px; color: var(--col-primary); text-transform: uppercase; letter-spacing: 2px; color: #888B8D}
ul.slideshow div.slick-track li.slick-current label { color: var(--col-primary)}
ul.slick-dots { text-align: center; display: block; font-size: 0 ; margin-top: 30px; padding-bottom: 5px}
ul.slick-dots > li { display: inline-block;  width: 10px; height: 10px; margin: 0 5px; }
ul.slick-dots > li button { display: block; width: 10px; height: 10px; border-radius: 10px; background-color: var(--col-border); border: 0; font-size: 0; line-height: 0; padding: 0}
ul.slick-dots > li.slick-active button { background-color: var(--col-primary);}
button.slick-arrow { padding: 0; background: transparent; font-size: 0;width: 10px; height: 20px; line-height: 0; display: block; background: url(../img/icons/arrow-left.svg) no-repeat center center; background-size: contain; bottom: 0px; position: absolute; z-index: 3; left: 50%; border: 0; cursor: pointer;}
button.slick-arrow:hover { background-color: transparent;}
button.slick-arrow.slick-next { transform: rotate(180deg); margin-left: 320px;}
button.slick-arrow.slick-prev { margin-left: -320px}

div.tall-buildings-wrapper { width: 100%; display: block; max-width: 1920px;}
div.tall-buildings { width: 100%; display: block; font-size: 0}
div.tall-buildings div.building { display: inline-block; vertical-align: bottom; }
div.tall-buildings div.thumb { display: block; width: 100%; margin-bottom: 20px; padding: 0px; }
div.tall-buildings div.info{ display: block; width: 100%; padding: 0 10px; text-align: center; }
div.tall-buildings div.name { display: block; width: 100%; font-size: 20px; font-weight: 400; text-transform: uppercase; margin-bottom: 10px; }
div.tall-buildings div.city { display: block; width: 100%; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.5;}
div.tall-buildings div.thumb > img { display: block; width: 100%}
div.tall-buildings div.building:nth-child(1) {width: 12%; }
div.tall-buildings div.building:nth-child(1) div.thumb {max-width: 72%}
div.tall-buildings div.building:nth-child(2) {width: 9.9%; }
div.tall-buildings div.building:nth-child(2) div.thumb {max-width: 63%}
div.tall-buildings div.building:nth-child(3) {width: 11.4%; }
div.tall-buildings div.building:nth-child(3) div.thumb {max-width: 68%}
div.tall-buildings div.building:nth-child(4) {width: 9.9%; }
div.tall-buildings div.building:nth-child(4) div.thumb {max-width: 62%}
div.tall-buildings div.building:nth-child(5) {width: 11.8%; }
div.tall-buildings div.building:nth-child(5) div.thumb {max-width: 69%}
div.tall-buildings div.building:nth-child(6) {width: 17%; }
div.tall-buildings div.building:nth-child(6) div.thumb {max-width: 77%}
div.tall-buildings div.building:nth-child(7) {width: 14%; }
div.tall-buildings div.building:nth-child(7) div.thumb {max-width: 73%}
div.tall-buildings div.building:nth-child(8) {width: 14%; }
div.tall-buildings div.building:nth-child(8) div.thumb {max-width: 74%}

div.views ul.slick-dots { margin-top: 0px; padding-bottom: 0px; max-width: 800px; font-size: 0; display: block; margin: 20px auto 0}
div.views ul.slick-dots > li { display: inline-block;  width: 25%; height: auto; vertical-align: top; margin: 0}
div.views ul.slick-dots > li button { display: block; width: 100%; height: auto; border-radius: 0px; background-color: #fff; border: 0; font-size: 0px; line-height: 48px; color: #888B8D; text-align: center;}
div.views ul.slick-dots > li button:after { content: ""; text-align: center; display: inline; font-size: 18px;}
div.views ul.slick-dots > li:nth-child(1) button:after { content: "NORTH VIEW"; }
div.views ul.slick-dots > li:nth-child(2) button:after { content: "EAST VIEW"; }
div.views ul.slick-dots > li:nth-child(3) button:after { content: "SOUTH VIEW"; }
div.views ul.slick-dots > li:nth-child(4) button:after { content: "WEST VIEW"; }
div.views ul.slick-dots > li.slick-active button { background-color: #fff; color: #000; }
div.views ul.slick-dots > li.slick-active button:after {  font-size: 24px; }

div.views-index { margin-top: 0px; padding-bottom: 0px; width: 100%; font-size: 0; display: block; margin: 20px auto 0; text-align: center;}
div.views-index > div { display: inline-block;  width: 160px; height: auto; vertical-align: top; margin: 0}
div.views-index > div { line-height: 48px; color: #888B8D; text-align: center; font-size: 18px;}
div.views-index > div.active { font-size: 24px;; color: #000;}


div.luxury-amenities, div.lobby { display: block; font-size: 0; padding: 0 80px;}
div.luxury-amenities > div, div.lobby > div { display: inline-block; vertical-align: middle; }
div.luxury-amenities > div.info, div.lobby > div.info { padding-right: 30px; text-align: left;}
div.lobby> div:first-child { width: 28%;}
div.lobby > div:last-child { width: 72%;}

div.luxury-amenities > div:first-child { width: 42.5%;}
div.luxury-amenities > div:last-child { width: 57.5%;}

ol.legend { display: block; text-align: left; list-style-position: outside; margin-left: 24px; margin-top: 150px}
div.lobby ol.legend { margin-top: 110px}
ol.legend li { margin-bottom: 25px; line-height: 1.2; font-size: 24px; color: var(--col-primary); text-transform: uppercase; padding-left: 10px; letter-spacing: 3px}

div.ice-district {display: block; width: 100%;  padding-left: 0px; position: relative;}
div.ice-district > div.content > div.thumb {width: 420px; top: 370px; right: 80px; display: block; position: absolute;  transition: top .9s cubic-bezier(0.39, 0.575, 0.565, 1); padding: 0!important}
div.ice-district.in-view > div.content  > div.thumb { top: 70px;}
div.ice-district > div.content > div.thumb img {width: 100%; display: block; }
div.ice-district > div.content { width: 100%; text-align: left; }
div.ice-district > div.content > div { padding-left: 80px;padding-right: 550px; }
div.ice-district > div.content > div.bg-gray { margin: 90px auto 0; padding: 90px 640px 420px 80px; background-color: #DEDEDE;}

div.rogers-centre { display: block; width: 100%; background-color: #000; padding: 0; position: relative;}
div.rogers-centre img { display: block; width: 100%; }
div.rogers-centre p { display: block; width: 1180px;; max-width: 80%; margin: 0px auto; padding-top: 180px; color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 300; text-align: center; letter-spacing: 2px;}
div.move-up { position: absolute; width: 100%; top: -440px; left: 80px;   transition: top .9s cubic-bezier(0.39, 0.575, 0.565, 1)}
div.move-up img { max-width: 1280px;}
.in-view div.move-up  { top: -340px;}

div.grid-2 { display: block; width: 100%; font-size: 0; }
div.grid-2 > div { display: inline-block; width: 50%; vertical-align: middle; background: #fff;}
div.grid-2 > div.image img { display: block; width: 100%; }
div.grid-2 > div.text { padding: 20px 100px; font-size: 18px; font-weight: 300; text-align: center;}

div.featured-image { display: block; width: 100%; position: relative;}
div.featured-image > img { display: block; width: 100%; }
div.featured-image > label { display: block; position: absolute; left: 80px; bottom: 30px; text-align: left; color: #fff; font-size: 18px; font-weight: 300; text-transform: uppercase;}

div.bg-pink { background: rgba(255, 0, 226, 0); padding-bottom: 50px}

div.transit { background-color: var(--col-primary); padding: 50px 70px;}
div.transit * { color: #fff !important;}
div.transit p { line-height: 1.66; font-weight: 300}
div.transit-map { display: block; width: 100%; font-size: 0}
div.transit-map > div { display: inline-block; vertical-align: top; width: calc(100% - 900px)}
div.transit-map > div.map { width: 900px; }
div.transit-map > div.map img { display: block; width: 100%}
div.transit-map div.legend{ text-align: left; padding-right: 50px;}
div.transit-map div.legend ol { margin-top: 80px;}
div.transit-map div.legend ol li { font-size: 18px; font-weight: 400; letter-spacing: 0}

div.bullets { display: block;}
div.bullets > div { display: block; width: 100%; text-align: left; padding-left: 40px; position: relative; font-size: 18px; font-weight: 400; line-height: 24px; text-transform: uppercase; margin-bottom: 27px;}
div.bullets > div:before { content: ""; display: block; width: 20px; height: 20px; border-radius: 20px; border: 1px solid transparent; position: absolute; top: 2px; left: 0; }
div.bullets > div.yellow:before { background-color: #FFB830}
div.bullets > div.pink:before { background-color: #FF3459}
div.bullets > div.green:before { background-color: #76C75F}
div.bullets > div.orange:before { background-color: #FF7D23}
div.bullets > div.purple:before { background-color: #553194}
div.bullets > div.teal:before { background-color: #5BC5CC}
div.bullets > div.blue:before { background-color: #47758F}
div.bullets > div.lblue:before { background-color: #B5CCDD}
div.bullets > div.dblue:before { background-color: var(--col-primary); border-color: #fff;}
div.bullets > div.lgreen:before { background-color: #7BC45A}

div.transit-nav { display: block; margin: 60px auto; text-align: center;}
div.transit-nav a { display: inline-block; vertical-align: top; line-height: 100px; width: 310px; background: none; border: 1px solid #fff; text-align: center; margin: auto 8px; text-transform: uppercase; font-size: 24px; font-weight: 300; }
div.transit-nav a.active { color: var(--col-primary) !important; background-color: #fff; }

div.art-gallery { display: block; position: relative;}
div.art-gallery img { display: block; width: 100%}
div.art-gallery p { display: block; width: 100%; position: absolute; top: 0; left: 0; padding: 80px 100px; text-align: center; text-transform: uppercase; font-size: 24px; font-weight: 300; line-height: 1.75; letter-spacing: 2px; color: #fff; }
div.art-gallery label { display: block; width: 100%; position: absolute; bottom: 30px; left: 80px; text-align: left; text-transform: uppercase; font-size: 18px; font-weight: 300; line-height: 1.66; letter-spacing: 0; color: #fff; }

div.featured-image2 { display: block; width: 100%; position: relative; padding: 0 80px;}
div.featured-image2 > img { display: block; width: 100%; }
div.caption-ballet { padding: 100px 0 0 180px; text-align: left; color: #fff; max-width: 800px;}
div.caption-ballet p { max-width: 500px; margin: 0 auto 0 0; line-height: 1.66; font-weight: 300; }
div.caption-ballet * { color: #fff;}
div.featured-image2 > label { display: block; position: relative; left: 0px; bottom: 0px; text-align: left; color: var(--col-primary); font-size: 18px; font-weight: 300; text-transform: uppercase; margin-top: 20px; line-height: 1.5; }
div.caption-legislature { padding: 100px 0 0 180px; text-align: left; color: #fff; max-width: 420px;}
div.caption-legislature h4 { line-height: 1.5}
div.caption-edmonton { top: 0; left: 0; text-align: center; padding-top: 40px; width: 100%; }

div.max-1280 {max-width: 1280px; margin-left: auto; margin-right: auto;} 
div.grid-gallery { padding: 0 40px;}
div.grid-gallery > div { padding: 0 40px; text-align: left; vertical-align: middle}
div.grid-gallery > div.thumbnail img { width: 100%; }
div.grid-gallery > div.text  { padding: 0 40px;}
div.grid-gallery > div.thumbnail label { display: block; position: relative; left: 0px; bottom: 0px; text-align: left; color: var(--col-primary); font-size: 18px; font-weight: 300; text-transform: uppercase; margin-top: 20px; line-height: 1.5; }

div.numbers { display: block; width: 100%; text-align: center; font-size: 0; max-width: 1280px; padding: 10px 44px; margin: 0 auto}
div.number { display: inline-block; vertical-align: top; width: 33.33%; margin-bottom: 35px; font-size: 44px; font-weight: 700; letter-spacing: 3px; text-align: center; text-transform: uppercase;}
div.number small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; letter-spacing: 2px;;}

div.team { padding: 0 50px;  text-align: center; vertical-align: top !important}  
div.team div.logo { width: 100%; display: block; margin-bottom: 30px; min-height: 80px; border: 1px solid #fff;} 
div.team div.logo img { display: block; margin: 0 auto; max-width: 80%;} 
div.team:first-child div.logo img { width: 226px; margin-top: 20px } 
div.team:last-child div.logo img { width: 153px; } 
div.team div.info p { font-size: 18px; font-weight: 300; line-height: 1.66}
div.team div.info a { font-size: 18px; font-weight: 400; text-transform: uppercase; color: var(--col-primary)}

div.quote { display: block; width: 100%; text-align: center; max-width: 1080px; margin: 0 auto; padding: 0 10px}
div.quote p { display: block; width: 100%; text-align: center;}
div.quote p.quote { font-size: 40px; font-weight: 300; letter-spacing: 5px; line-height: 50px; margin-bottom: 30px;text-transform: uppercase;}
div.quote p.author { font-size: 18px; font-weight: 400; text-transform: uppercase;}

article#contact-us div.address { width: 440px; margin: 0 auto 50px; text-align: center;}
article#contact-us div.address div.title { padding: 20px 0 }
article#contact-us div.address p, article#contact-us div.address a { text-align: center;}
article#contact-us div.address div.navigation { font-size: 0}
article#contact-us div.address div.navigation a { display: inline-block; width: calc(50% - 10px); margin: 0 5px;}

article.legals h6 { font-size: 18px; text-transform: uppercase; font-weight: 300; margin-bottom: 10px;}
article.legals p { line-height: 1.5; font-weight: 300}
article.legals div.content a { text-decoration: underline}

div.suites { display: block; font-size: 0; width: 100%;}
div.suites > a { display: block; width: 100%;}
div.suites div.tr { display: block; font-size: 0; width: 100%; border-bottom: 1px solid #888B8D; padding: 20px 0; text-align: center;}
div.suites a:hover div.tr { background-color: var(--col-primary);}
div.suites div.tr > div { display: inline-block; vertical-align: middle; text-align: center; width: 16.66%; font-size: 18px; font-weight: 300; color: var(--col-primary)}
div.suites a:hover div.tr > div { color: #fff;}
div.suites div.tr > div:first-child { text-align: center; }

div.suite {display: block; width: 100%; font-size: 0}
div.return {display: block; width: 100%; font-size: 18px; margin-bottom: 30px}
div.return a {display: table; margin: 0 0 0 auto; padding-left: 30px; background: url(../img/icons/arrow-back.svg) no-repeat left center; background-size: 10px 15px; text-transform: uppercase; letter-spacing: 1px;}
div.suite-info, div.suite-plan { display: inline-block; vertical-align: top; width: 430px; position: relative}
div.suite-plan { width: calc(100% - 430px); }
div.suite-plan img { width: 100%; display: block; max-height: 80vh;}
div.suite-info { padding-right: 40px; min-height: 800px}
div.suite-details div.title { width: 100%; font-size: 60px; color: var(--col-primary); text-transform: uppercase; text-align: left; border-bottom: 1px solid #888B8D; padding-bottom: 20px; line-height: 1.25;; letter-spacing: 1px;}
div.suite-details div.bedroom { width: 100%; font-size: 18px; color: var(--col-primary); text-transform: uppercase; text-align: left; margin-top: 25px; line-height: 1.5;; letter-spacing: 1px;}
div.suite-details div.bedroom span { text-transform: lowercase;}
div.suite-details a.download { width: 100%; display: block;  font-size: 18px; color: var(--col-primary); text-transform: uppercase; text-align: left; margin-top: 50px; line-height: 1.5; padding-left: 30px; background: url(../img/icons/download.svg) no-repeat left center; background-size: 15px 17px;; letter-spacing: 1px;}
div.suite-keyplate  { width: 100%; display: block; position: absolute; bottom: 0; left: 0; width: 100%;}
div.suite-keyplate.mobile { width: 100%; display: none; width: 100%;}
div.keyplate  { width: 100%; display: block; margin-bottom: 100px; }
div.keyplate  img { width: auto; height: 300px; display: block;  margin: 0 auto 0 0}
div.suite-keyplate  div.disclaimer  { color:#888B8D; font-size: 12px; text-align: left;}

div.suite-view { display: block; width: 100%}
div.suite-view img { display: block; width: 100%}
div.suite-view label  { display: block; position: relative; left: 0px; bottom: 0px; text-align: center; color: var(--col-primary); font-size: 18px; font-weight: 300; text-transform: uppercase; margin-top: 20px; line-height: 1.5; }


/* PLACEHOLDERS */
*::-webkit-input-placeholder {  text-transform: uppercase; color: #888B8D; font-weight: 300}
*::-moz-placeholder {  text-transform: uppercase; color: #888B8D; font-weight: 300}
*:-ms-input-placeholder {  text-transform: uppercase; color: #888B8D; font-weight: 300}

textarea::-webkit-input-placeholder {  color: #888B8D; font-weight: 300}
textarea::-moz-placeholder {  color: #888B8D; font-weight: 300}
textarea:-ms-input-placeholder {  color: #888B8D; font-weight: 300}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #888B8D}
.select2-container--default .select2-selection--single .select2-selection__arrow {background-size: 10px 5px; background: url(../img/icons/arrow-down.svg) no-repeat center center;}

#register div.splitter.split-2 > div:first-child { width: calc(100% - 100px); }
#register div.splitter.split-2 > div:last-child { width: 100px; }
form button[type="submit"], form button[type="button"] { width: 80px; background: var(--col-primary); color: #fff; font-size: 12px; text-transform: uppercase; padding: 0; text-align: center; margin: 0 0 0 auto}
.select2-container--default .select2-selection--single .select2-selection__rendered { text-align: left;}
div.reveal-response p { font-size: 18px;}

@media only screen and (max-width: 1720px) {
/*	div.tall-buildings { width: 100vw; margin-left: calc(720px - 50vw); padding: 0 5px}*/
}
@media only screen and (max-width: 1440px) {

	header > div.logo { left: 20px}


	div.slideshow ul.slideshow div.slick-track li { padding: 3vw; }
	div.content { padding-left: 10px; padding-right: 10px}

/*	div.tall-buildings { margin-left: 0; }*/
	div.tall-buildings div.name { font-size: 14px; }
	div.tall-buildings div.city { font-size: 12px}
/*	div.tall-buildings div.thumb { padding: 0 50px;}*/

	div.luxury-amenities, div.lobby { padding: 0 20px;}

	div.featured-image2 { padding: 0 40px }
	div.grid-gallery { padding: 0 20px}
	div.grid-gallery > div { padding: 0 20px;}

	div.js-slideshow  { max-width: 1320px;}

	div.move-up { width: calc(100% - 160px);}
	div.ice-district > div.content { padding: 0}
	div.rogers-centre p  { padding-top: 130px}

	div.transit { padding: 50px 20px}

	div.suites { padding: 0 40px}
	div.suite { padding: 0 40px}
}

@media only screen and (max-width: 1280px) {
		div.number { font-size: 40px; letter-spacing: 3px}
		div.number small { font-size: 16px; letter-spacing: 0px}

		div.ice-district > div.content > div.thumb { right: 20px}
		div.ice-district > div.content > div { padding-right: 480px}
		div.ice-district > div.content > div.bg-gray { padding-right: 510px; padding-bottom: 320px}
		div.move-up { width: calc(100% - 40px); left: 20px}
		.in-view div.move-up { top: -280px}
		div.rogers-centre p { padding-top: 18vw; }

	div.grid-2 > div.text { padding: 20px 40px}

div.transit-map { padding-bottom: 650px; position: relative;}
div.transit-map.transit-map-pedway { padding-bottom: 540px;}
div.transit p { line-height: 1.5; }
div.transit-map > div.map { width: 900px; display: block; max-width: 94%; margin: 0 auto}
div.transit-map div.legend { width: 900px; display: block; position: absolute; left: calc(50vw - 450px); bottom: 0; max-width: 100%;}
div.transit-map div.legend{ padding-right: 20px;}
div.transit-map div.legend ol { margin-top: 40px;}
div.transit-map div.legend ol li { font-size: 16px; margin-bottom: 15px;}
div.bullets > div { padding-left: 30px; font-size: 16px; line-height: 22px; margin-bottom: 15px;}
div.bullets > div:before { width: 15px; height: 15px; border-radius: 15px; top: 3px; }

div.transit-nav { margin: 50px auto; }
div.transit-nav a { line-height: 60px; max-width: 45%; margin: auto 5px; font-size: 20px; }

	div.caption-edmonton { display: block; position: relative;}
	div.caption-edmonton h5 { font-size: 28px; margin-bottom: 40px}
	div.numbers { padding: 0 20px}
	div.number {  padding: 0 10px;}
	div.number { font-size: 28px; letter-spacing: 1px; padding: 0 10px;}
	div.number small { font-size: 16px; letter-spacing: 0}


}
@media only screen and (max-width: 1080px) {

		h1, h2 { font-size: 42px; letter-spacing: 2px; }
		h2.small { font-size: 32px; }
		h1.noline, h2.noline { margin-bottom: 30px}
		h1 small, h2 small { font-size: 16px; }
		h3 { font-size: 32px; }
		h4 { font-size: 32px; }
		h5 { font-size: 20px; }
		h6 { font-size: 20px; }
		p { font-size: 16px;}
		p.larger { font-size: 20px;}

	ul.slideshow div.slick-track li > a > img, ul.slideshow div.slick-track li > img { margin-bottom: 10px;}
	ul.slideshow div.slick-track li label { font-size: 14px}


	footer div.footer-row { text-align: center; padding: 0 10px; position: relative;}
	footer div.logo { display: block; width: 100%; margin-bottom: 50px}
	footer div.address { width: 50%; padding: 0 25px; max-width: 300px;}
	footer div#register { width: 50%; padding: 0 25px; max-width: 400px;}

/*	div.tall-buildings div.thumb { padding: 0 30px;}*/

	ol.legend, div.lobby ol.legend { margin-top: 50px;}
	ol.legend li { font-size: 18px; letter-spacing: 1px; padding-left: 5px;}

	div.art-gallery p { padding: 40px; font-size: 20px; line-height: 1.5; letter-spacing: 1px}

	div.team { padding: 0 20px}	
	div.team div.info p { font-size: 16px;}

	div.quote p.quote { font-size: 32px; letter-spacing: 3px; line-height: 1.4}
	div.quote p.author { font-size: 16px;}

	div.rogers-centre p { padding-top: 12vw; font-size: 18px;}
	div.ice-district > div.content > div.thumb { width: 320px}
	div.ice-district > div.content > div { padding-left: 20px; padding-right: 380px; }
	div.ice-district > div.content > div.bg-gray { padding-left: 20px; padding-right: 380px; padding-top: 50px}
	div.ice-district > div.content > div.bg-gray { margin: 50px auto 0}

	div.popup-mode footer { padding: 70px 20px}
	div.popup-mode div#register { max-width: 400px; margin: 0 auto;}

	div.suites div.tr > div { font-size: 16px;}

	div.tall-buildings-wrapper {width: 100vw; position: relative; overflow: auto;}
	div.tall-buildings {width: 1100px; position: relative; }
	div.building {position: relative; z-index: 2;}
	div.tall-buildings:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 3; background: transparent}

}

@media only screen and (max-width: 980px) {

	div.tall-buildings div.thumb { margin-bottom: 10px}
	div.tall-buildings div.name { font-size: 11px; margin-bottom: 5px;}
	div.tall-buildings div.city { font-size: 10px}
/*	div.tall-buildings div.thumb { padding: 0 20px;}*/

	div.featured-image2 { padding: 0 20px }
	div.grid-gallery { padding: 0 10px}
	div.grid-gallery > div { padding: 0 10px;}

	div.js-slideshow  { max-width: 1320px;}

	div.grid-gallery > div.thumbnail label { font-size: 14px; margin-top: 10px}
	div.art-gallery p { font-size: 18px; line-height: 1.5; letter-spacing: 1px}
	div.caption-ballet { padding: 40px 0 0 60px}
	div.caption-legislature { padding: 40px 0 0 60px}

	section.masthead div.masthead { position: relative;}
	section.masthead div.masthead > img { max-width: 9999px; height: 340px; width: auto; position: relative; left: calc(50vw - 490px)}
	article#contact-us section.masthead div.masthead > img { height: 410px; }

	div.grid-2 > div.text { padding: 10px 20px; vertical-align: top}


}

@media only screen and (max-width: 900px) {
	div.transit-map div.legend { left: 0; padding-left: 20px; }

	.margin-top-100 { margin-top: 50px !important}
	.margin-bottom-100 { margin-bottom: 50px !important}

	div.suite-info, div.suite-plan { width: 240px;}
	div.suite-plan { width: calc(100% - 240px);}
	div.suite-details div.title {font-size: 48px;}
	div.suite-details div.bedroom { font-size: 16px;}
	div.suite-details a.download  { font-size: 16px;}
	div.keyplate { margin-bottom: 50px}
	div.suite-keyplate { position: relative; margin-top: 40px}
	div.suite-details { height: auto !important}
	div.suite-info { min-height: 0}
	div.return { margin-bottom: 25px}
}
@media only screen and (max-width: 767px) {

	header > div.logo { padding-top: 38px; left: 10px}
	header > div.logo img { height: 25px;}

	footer div.address { padding: 0 15px; }
	footer div#register {padding: 0 15px; }
	footer div.logos { position: absolute; width: 100%; display: block; top: 0; left: 0; text-align: center;}
	footer div.logos a { margin: 0 10px;}
	footer div.disclaimer { width: 100%; display: block !important; padding-top: 50px !important; max-width: 400px; margin: 0 auto; text-align: center;} 
	footer div.disclaimer p { text-align: center; }

/*	div.tall-buildings div.name { font-size: 14px; }*/
/*	div.tall-buildings div.city { font-size: 12px}*/
/*	div.tall-buildings div.thumb { padding: 0 10px;}*/
	div.tall-buildings div.info { padding: 0}

	div.views ul.slick-dots { margin-top: 5px}
	div.views ul.slick-dots > li button { line-height: 32px;}
	div.views ul.slick-dots > li button:after { font-size: 14px; }
	div.views ul.slick-dots > li.slick-active button:after { font-size: 18px; }


		h1, h2 { font-size: 36px; letter-spacing: 1px; }
		h2.small { font-size: 28px;}
		h1.noline, h2.noline { margin-bottom: 25px}
		h3 { font-size: 28px; }
		h4 { font-size: 28px; }
		h5 { font-size: 18px; }
		h6 { font-size: 18px; }
		p { font-size: 16px;}
		p.larger { font-size: 20px;}

	div.luxury-amenities, div.lobby { position: relative; padding-bottom: 500px; }
	div.lobby { padding-bottom: 250px; }
	div.luxury-amenities div.info, div.lobby div.info { display: block; width: 100%; position: absolute; bottom: 0; left: 0; padding-left: 20px}
	div.luxury-amenities div.image, div.lobby div.image { display: block; width: 100%;}
	ol.legend, div.lobby ol.legend { margin-top: 30px;}
	ol.legend li { font-size: 14px; letter-spacing: 0px; padding-left: 2px;}

	div.art-gallery p { padding: 20px; font-size: 16px; letter-spacing: 0px}
	div.caption-ballet { padding: 20px 0 0 30px}
	div.caption-legislature { padding: 20px 0 0 30px}

	div.featured-image2 { padding: 0 10px}
	div.featured-image2 > label { margin-top: 10px; font-size: 14px;}
	div.grid-gallery > div.text { padding: 0 10px}
	div.caption-edmonton { padding-top: 20px}
	div.art-gallery label { left: 10px; bottom: 10px}


	div.quote p.quote { font-size: 28px; letter-spacing: 2px; }
	div.quote p.author { font-size: 14px;}

	div.teams > div.team { display: block; padding: 0 10px; text-align: center; width: 100%; max-width: 700px; margin: 0 auto 50px}
	div.team div.logo { min-height: 0}

	div.ice-district > div.content > div.thumb { position: relative !important; top: 0 !important; right: 0!important; display: block; width: 480px; max-width: 90%; margin: 20px auto; }
	div.ice-district > div.content > div { padding: 0 10px; text-align: center;}
	div.ice-district > div.content > div.bg-gray { padding: 30px 10px 30vw;}
	div.ice-district h1.left { text-align: center !important;}
	div.ice-district h1.left:after { margin: 30px auto 0}
	.in-view div.move-up { top: -26vw}
	div.rogers-centre p { font-size: 16px; max-width: 90%}

	div.number { font-size: 20px; letter-spacing: 0; padding: 0 10px; width: 50%;}
	div.number small { font-size: 12px; letter-spacing: 0}

	div.covid { padding: 20px 10px; }
	div.covid p { line-height: 30px;font-size: 14px; padding-left: 30px; background-size: 20px auto; }
	div.covid a { margin-left: 30px; }

}

@media only screen and (max-width: 600px) {
	header { height: 170px; }
	header > div.logo { padding-top: 18px; left: 10px; top: 110px}
	header > div.logo img { height: 24px;}
	
	article { padding-top: 170px;}
	article#home { padding-top: 0px;}
	article.no-masthead { padding-top: 40px;}
	article > section { margin: 50px auto}

	div.burger { top: 120px; right: 10px; width: 40px; height: 40px}
	div.burger ul { left: 10px; top: 13px}

	header div.fixed-nav { display: none;}
	div.slideshow ul.slideshow div.slick-track li { padding: 5vw; }
	header nav ul > li.mobile a { display: block !important}

	div.nav-logo { margin-bottom: 4vh; padding-top: 0}

	footer div.footer-row > div { padding: 0}
	footer div.address { width: 100%; padding: 0; max-width: 100%; display: block; text-align: center; margin-bottom: 50px}
	div.address p, div.address a { text-align: center;}
	footer div#register { width: 100%; padding: 0px; max-width: 400px; display: block; text-align: center; margin: 0 auto}
	div.navigation a { display: inline-block; width: calc(50% - 10px); margin: 0 5px;}

	footer div.footer-row { margin-bottom: 50px}

	div.content { padding-left: 20px; padding-right: 20px}

	ul.slideshow div.slick-track li label { font-size: 11px; opacity: 0}
	ul.slideshow div.slick-track li.slick-current label { opacity: 1}

	div.tall-buildings div.name { font-size: 12px; }
	div.tall-buildings div.city { font-size: 11px}
	div.tall-buildings div.thumb { padding: 0 5px;}

	ul.slick-dots { margin-top: 15px; }

	div.views ul.slick-dots { margin-top: 5px; display: block !important;}
	div.views ul.slick-dots > li button { line-height: 32px;}
	div.views ul.slick-dots > li button:after { font-size: 12px; letter-spacing: 0}
	div.views ul.slick-dots > li.slick-active button:after { font-size: 12px; }

	div.grid-gallery > div { display: block; width: 100%; margin-bottom: 20px; padding: 0 5px;}
	div.grid-gallery { margin-bottom: 20px !important; padding: 0 5px}

	div.art-gallery p { padding: 20px 5px; font-size: 14px;}
	div.art-gallery label { font-size: 14px}

	div.rogers-centre p { font-size: 14px; line-height: 1.5;}
 
 	div.grid-2 > div{ display: block; width: 100%; }
 	div.grid-2 > div.text { padding: 25px 10px}

	div.transit-nav { margin: 50px auto; }
	div.transit-nav a { line-height: 40px; max-width: 45%; margin: auto 5px; font-size: 16px; }

	div.transit-map { padding-bottom: 650px; position: relative;}
	div.transit-map.transit-map-pedway { padding-bottom: 550px; position: relative;}
	div.transit-map div.legend ol li { font-size: 14px; line-height: 18px}
	div.bullets > div { font-size: 14px; }

	div.popup-mode footer { width: 100vw; height: 100vh; top: 0; left: 0; transform: none;}

	div.suites div.tr > div { font-size: 14px; width: 16.66% !important}
	div.suite-info, div.suite-plan { width: 100%; display: block; padding: 20px 0px}
/*	div.suite-details, div.suite-keyplate { display: inline-block; width: 50%; vertical-align: top; margin-top: 0}*/
	div.suite-keyplate { display: none;}
	div.suite-keyplate.mobile { display: block; max-width: 400px; margin: 50px auto}
	div.keyplate { margin-bottom: 30px; }
	div.keyplate img { height: 200px; margin: 0 auto}
	div.suite-keyplate div.disclaimer { font-size: 12px; text-align: center;}
	div.suite-details div.bedroom { display: inline-block; vertical-align: top; width: 50%}
	div.suite-details a.download { margin-top: 25px}

/*	div.suite-details div.title { font-size: 32px; border: 0; padding-bottom: 0}*/


	div.suite { padding: 0 20px}
	div.return a { font-size: 14px; padding-left: 20px; margin: 0 auto}
	div.suite-details div.title { text-align: center;}
	div.suite-details a.download { margin: 25px auto 0; display: table; width: auto}

	div.featured-image > label { color: #000; position: static; padding: 10px 0; text-align: center; font-size: 14px;}
	div.bullets > div, div.transit-map div.legend ol li { font-size: 12px; }

	article#contact-us-us section div.content { padding: 0}
	article#contact-us-us section div.navigation { font-size: 0; margin-bottom: 40px;}

	div.map-image img { width: calc(100vw + 200px); position: relative; left: -100px; max-width: 9999px;}

	div.art-gallery p { display: block; position: relative; color: var(--col-primary); padding: 0 20px; font-size: 14px; margin-top: 30px}
	div.art-gallery label { position: relative; bottom: 0; color: var(--col-primary); padding-top: 10px; text-align: center;}
	div.edmonton-ballet label  { position: relative; bottom: 0; text-align: center; margin-bottom: 10px}
	div.grid-gallery > div.thumbnail label, div.featured-image2 > label { text-align: center;}

	div.caption-ballet { position: relative !important; padding: 20px 0}
	div.caption-ballet h4 { margin-bottom: 10px; text-align: center;}
	div.caption-ballet p { text-align: center;}
	div.caption-ballet * { color: var(--col-primary)}

	div.grid-gallery div.left { text-align: center !important;}
}

@media only screen and (max-width: 480px) {
	
	footer { padding: 0}
	footer div.logo img { max-width: 80%}
	footer div.field { padding-right: 0}
	footer div.logos a img { height: 18px;}
	div.navigation a { padding-left: 40px !important; line-height: 36px !important; text-align: left !important; width: calc(45% - 10px) !important;}
	div.navigation a:before { width: 40px !important; top: 7px !important; height: 25px !important; }
	div.navigation a.google { width: calc(55% - 10px) !important;}
	div.navigation a.google:before { top: 6px !important; height: 20px !important; }

	article#contact-us div.address { width: 100%;}

	div.tall-buildings div.thumb { padding: 0 2px;}
	div.tall-buildings div.name { font-size: 12px; }
	div.tall-buildings div.city { font-size: 10px}

		h1, h2 { font-size: 28px; letter-spacing: 1px; }
		h2.small { font-size: 24px; }
		h1.noline, h2.noline { margin-bottom: 20px}
		h3 { font-size: 22px; }
		h4 { font-size: 22px; }
		h5 { font-size: 16px; }
		h6 { font-size: 16px; }
		p { font-size: 15px;}
		p.larger { font-size: 18px;}

	div.quote p.quote { font-size: 24px; letter-spacing: 1px; }
	div.quote p.author { font-size: 14px;}

	div.suites div.tr > div { font-size: 14px; width: 25% !important}
	div.suites div.tr > div:nth-child(2), div.suites div.tr > div:nth-child(3) { display: none}

	div.caption-bg { padding: 40px 20px}
	div.masthead div.tagline { font-size: 20px;}

	ul.slideshow div.slick-track li label { letter-spacing: 0}

	div.covid p { background: none; font-size: 12px; padding-left: 0; line-height: 1.25; margin-bottom: 10px;}
	div.covid a  { display: table; margin: 0px auto; line-height: 26px;}
}


@media only screen and (max-height: 600px) {
	div.popup-mode footer div.tagline { display: none;}
} 

@media only screen and (max-height: 400px) {
	div.popup-mode footer { padding: 20px 10px}
	div.popup-mode footer div.social { display: none;}
	div.popup-mode footer div.logo { display: none;}
	div.popup-mode input[type="text"], div.popup-mode input[type="email"] { line-height: 30px; min-height: 30px}
	.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; min-height: 30px}
}

@media only screen and (max-width: 340px) {
	
	div.navigation a { width: calc(48% - 6px) !important; margin: 0 3px; font-size: 11px;}

	div.navigation a.google { width: calc(52% - 6px) !important;}
}









@media only screen and (max-width: 60px) {
	
	header { height: 80px; overflow: hidden;}
	header.attached { background-color: #fff; top: 0}
	header.active { height: 100vh; overflow: auto;}
	article { padding-top: 80px;}
	header div.burger { display: block; height: 80px; }
	div.burger ul { top: 32px;}
	header div.logo { padding: 0; left: 60px; top: 20px; height: 40px; width: 164px;}
	header div.logo a { display: block; width: 100%; height: 100%; background: url(../img/logo2.svg) no-repeat center center; background-size: contain;}
	header div.logo img { display: none;}

	header nav { display: block; width: 100%; left: -120vw; margin-top: 120px; position: relative; padding: 20px; }
	header nav ul li { display: block; width: 100%; text-align: left;}
	header nav ul > li.mobile { display: block}
	header nav ul li a { display: block; width: 100%; text-align: left; line-height: 40px; font-size: 18px}

	header nav ul > li > ul { display: block; opacity: 0; position: relative; left: 0; top: 0px; transition: opacity .3s ease-out; background: #fff; width: 100%; padding-left: 20px; }
	header nav ul > li { max-height: 40px; overflow: hidden; }
	header nav ul > li > a { position: relative; padding-right: 20px;}
	header nav ul > li.subnav > a:after { content: ""; display: block; position: absolute; right: 10px; top: 0; height: 100%; width: 12px; background: url(../img/icons/red/plus.svg) no-repeat center center; background-size: contain;}
	header nav ul > li:hover { background: #fff; color: var(--col-primary)}
	header nav ul > li:hover > a { background: #fff; color: var(--col-primary)}
	header nav ul > li > ul > li { display: block; width: 100%; text-align: left;}
	header nav ul > li > ul > li { display: block; width: 100%; text-align: left; }
	header nav ul > li > ul > li > a { display: block; width: 100%; text-align: left; line-height: 22px; font-size: 14px; background: #fff; color: var(--col-text); padding:0 }
	header nav ul > li > ul > li > a:hover { background: #fff; color: var(--col-primary)}
	header nav ul > li:hover > ul { opacity: 1; position: relative; left: 0px; transition: opacity .3s ease-out; padding: 0px 0 0px 20px}
	header nav ul > li.active { max-height: 250px; }
	header nav ul > li.active > ul { opacity: 1; position: relative; left: 0px; transition: opacity .3s ease-out; padding: 0px 0 0px 20px}

}