@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400');
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,inputinput,img,ins,kbd,label,legend,li,main,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0px;margin:0px;padding:0px;font-size:100%;font-variant-ligatures:no-common-ligatures no-discretionary-ligatures no-historical-ligatures}html{height:100%}body{min-height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}b,strong{font-weight:700}img{color:transparent;font-size:0px;vertical-align:middle}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;border-spacing:0px}caption,td,th{font-weight:400;vertical-align:top;text-align:left}q{quotes:none}q::after,q::before{content:none}small,sub,sup{font-size:60%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.45em;margin-left:0.1875em}svg{overflow:hidden}*,::after,::before{box-sizing:border-box}.clearfix::after,.clearfix::before{content:" ";display:table}.clearfix::after{clear:both}img{max-width:100%}html,body{width:100%;height:100%;margin:0px;letter-spacing:0.75px}
html {
margin: 0;
padding: 0;
border: 0;
font-size: 62.5%;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
text-rendering: optimizeLegibility;
font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures;
vertical-align: baseline;
letter-spacing:.05rem;
color: #000;
}
body {
font-size:1.6rem;
line-height:1.5;
}
.cssPTWP {
background-image: url(../images/paper.png);
background-color: #f3f4f5;
width: 100vw;
margin-left: calc(-1 *((100vw - 100%)/ 2));
margin-bottom: 128px;
padding: 64px 0;
border-top: 1px solid #232a30;
border-bottom: 1px solid #232a30;
}
.debossing {
color: #EBF6FF;
text-shadow: -1px -1px 3px rgba(0,0,0,.58);
font-size: 145%;
position: relative;
top:.4rem;
}
.debossingAlt {
color: #FFF6FF;
text-shadow: -1px -1px 3px rgba(0,0,0,.63);
font-size: 145%;
position: relative;
top:.4rem;
}
.cssSwitch {
background-image: url(../images/paper.png);
background-color: #f3f4f5;
width: 100vw;
margin-left: calc(-1 *((100vw - 100%)/ 2));
margin-bottom: 128px;
padding: 64px 0;
border-top: 1px solid #232a30;
}
.cssSwitchHeader {
font-size: 2.4rem;
}
.rowMinusBottom {
margin-bottom:0px;
}
.breath {
margin-top: 3.2rem;
}
.fakeFlexMD {
height: 36px;
}
.fakeFlexLG {
height: 72px;
}
.wayfinderH2 {
}
.wayfinderP {
font-size:1.6rem;
}
.wayfinderLink {
color: #000;
font-size: 1.8rem;
text-transform: uppercase;
text-decoration: underline;
}
.wayfinderLink:hover {
color: #333;
text-decoration: none;
}
/* float toggle */
.floaterSwitch {
position: fixed;
z-index: 1000;
top: 170px;
right: 0px;
background: #fff;
border-radius: 16px 0 0 16px;
box-shadow: 0px 0px 12px rgba(0,0,0,.25);
}
.pinkOn {
margin:10px 8px 16px 14px;
width:26px;
height:26px;
border-radius: 13px;
background:rgba(204,0,153,1);
}
.pinkOff {
margin: 10px 6px 14px 12px;
width:30px;
height:30px;
border-radius: 15px;
background:rgba(204,0,153,1);
}
.blueOn {
margin:16px 8px 0 14px;
width:26px;
height:26px;
border-radius: 13px;
background:rgba(0,153,204,1);
}
.blueOff {
margin:14px 6px 0 12px;
width:30px;
height:30px;
border-radius: 15px;
background:rgba(0,153,204,1);
}
/* float toggle */
/* type Styles */
p {
font-size: 1.8rem;
margin: 0 0 1.6rem 0;
}
h1, h2, h3, h4, h5, h6, .allEyesOnMe {
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.33;
}
h1 {
font-size: 3.6rem;
margin-bottom: 2.7rem;
}
h2 {
font-size: 3rem;
margin-bottom: 2.25rem;
}
h3 {
font-size: 2.4rem;
margin-bottom: 1.8rem;
}
h4 {
font-size: 1.8rem;
margin-bottom: 1.35rem;
}
h5 {
font-size: 1.6rem;
margin-bottom: 1.2rem;
}
h6 {
font-size: 1.4rem;
margin-bottom: 1.05rem;
}
.letMeBreath {
		color: #0077BA;
	margin-bottom: 7.5rem;
}
.letMeBreathII {
		color: #BC0099;
	margin-bottom: 7.5rem;
}
.letMeBreathBit {
	margin-top: 2rem;
}
.allEyesOnMe {
	font-size: 4.5rem;
	margin-bottom: .5rem;
}
.preDotz {
		margin-right: .3rem;
}
.dotzNspace {
	color:#ebf6ff;
	text-shadow: -1px -1px 3px rgba(0,0,0,.58);
	font-size: 105%;
	position: relative;
	margin-right: .55rem;
}
.dotzNspaceII {
	color:#ffedff;
	text-shadow: -1px -1px 3px rgba(0,0,0,.63);
	font-size: 105%;
	position: relative;
	margin-right: .55rem;
}
.twoTimes {
margin: 0 0 3.2rem 0;
}
/* type Styles */
.rowHalf {
margin-top: 16px ;
}
.row {
margin-bottom: 64px ;
}
.rowII {
margin-bottom: 80px ;
}
.rowIInegative {
margin-bottom: 0px ;
}
/* fullbleed */
.sectionWide {
/*background:	#45535E;*/
background: #2e393e;
width: 100vw;
margin-left: calc(-1 *((100vw - 100%)/ 2));
margin-bottom: 72px;
padding: 16px 0 32px 0;
}
.rowIIfull > h4, .rowIIfull > h5 {
color: #FFF;
}
/* end fullBleed */
/* CTAs */
.CTA {
display: inline-block;
border-radius:12px;
color: #FFF;
font-size: 1.6rem;
letter-spacing:.0625rem;
cursor: pointer;
background-color: #0077BA;
padding:1rem 2rem;
margin: .8rem 0;
}
.CTA:hover {
background-color:#c09;
box-shadow: 0 0 12px rgba(0,0,0,.45);
color: #FFF;
text-decoration: none;
}
.CTA:focus{
background-color: #0077BA;
color: #FFF;
text-decoration: none;
}
.CTA:active {
background-color: #0077BA;
color: #FFF;
text-decoration: none;
}
/* CTAs */
/* logo/mast */
.logo {
top:36px;
width:300px;
font-size:4.5rem;
margin:0 auto;
position: relative;
z-index: 998;
}
#lockedHeaderWrapper {
left: 0;
right: 0;
top: 0;
width: 100%;
position: fixed;
z-index: 988;
}
#lockedHeader {
margin: 0 auto;
height: 5.25rem;
background: url(../images/whiteStripes.png) repeat rgb(253 253 253 / 70%);
}
.shadow11 {
margin: 0 auto;
height: 1.4rem;
width: 98%;
border-radius: 209rem/4.8rem;
background-color:#fff;
box-shadow: 0 0 1rem rgba(34 56 101 / 20%);
position: relative;
top: -9.59rem;
}
.shadow12 {
margin: 0 auto;
height: 1.4rem;
width: 98%;
border-radius: 209rem/4.8rem;
background-color:#fff;
box-shadow: 0 0 1rem rgb(34 56 101 / 30%);
position: relative;
top: -6.3rem;
}
.shadow1 {
margin: 0 auto;
height: 1.4rem;
width: 98%;
border-radius: 209rem/4.8rem;
background-color: #FFF;
box-shadow: 0 0 1.2rem rgb(0 0 0 / 45%);
position: relative;
top: 1.4rem;
}
.shadow {
margin: 0 auto;
height: 1.4rem;
width: 98%;
border-radius: 209rem/4.8rem;
background-color: #FFF;
box-shadow: 0 0 1.2rem rgb(0 0 0 / 55%);
position: relative;
top: -2.05rem;
}
.mask11 {
height: 6rem;
width: 100%;
margin: 0;
background-color: #FAFAFA;
position: relative;
top: -3.5rem;
z-index: 970;
background-image: url(../images/paper.png);
border-top: 1px solid rgba(255,255,255,.55);
border-bottom: 2px solid rgba(255,255,255,.65);
}
/* logo/mast */
.imgPhoneOffset {
margin-bottom: 48px;
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 250px;
}
.iframePhoneOffset {
margin-bottom: 48px;
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 250px;
}
iframe {
border: 0;
}
.bottomOffset {
margin-bottom: 18px;
}
/* twoTone BG */
.backgroundPulse {
position:absolute;
z-index: 1;
top:0px;
width: 100%;
height:100%;
/*background:#242e37;*/
background:#001724;
}
.backgroundPulse:before {
content: '';
position: absolute;
z-index: 0;
width: 100%;
height: 1400px;
background: #fff;
}
.backgroundPulse:after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
background: rgb(255 255 255 / 100%);
}
.backgroundPulseAlt {
position:absolute;
z-index: 1;
top:0px;
width: 100%;
height:100%;
background:#FFF;
}
.backgroundPulseAlt:before {
content: '';
position: absolute;
z-index: 0;
width: 100%;
height: 530px;
/*background: #333F47;*/
background: #2e393e;
-webkit-clip-path:polygon(100% 0, 100% 70%, 0 100%, 0 0);
clip-path:polygon(100% 0, 100% 70%, 0 100%, 0 0);
}
.backgroundPulseAltx {
position:absolute;
z-index: 1;
top:0px;
width: 100%;
height:100%;
background:#FFF;
}
.backgroundPulseAltx:before {
content: '';
position: absolute;
z-index: 0;
width: 100%;
height: 930px;
background: #2e393e;
-webkit-clip-path:polygon(100% 0, 100% 70%, 0 100%, 0 0);
clip-path:polygon(100% 0, 100% 70%, 0 100%, 0 0);
}
/* twoTone BG */
.funkyAngles {
background: linear-gradient(8deg, #2e393e 44.875%, #FFF 45%);
}
.phoneType {
font-size:1.6rem;
}
.callOutCyan {
z-index: 18;
background-color: rgba(0,13,30,.85);
margin-top: -22.5rem;
margin-left: -.4rem;
color: #FFF;
padding: 1.6rem;
border-left: 2px solid rgba(0,0,0,.5);
}
.callOutCyanAlt {
z-index: 18;
background-color: rgba(0,13,30,.85);
margin-top: -22.5rem;
margin-left: -.4rem;
color: #FFF;
padding: 1.6rem;
border-left: 2px solid rgb(0,0,0);
}
.inline-svg-container{display:inline-block;width:100%;position:relative;user-select:none}
.inline-svg-canvas{display:block;width:100%;visibility:hidden}
.inline-svg-image{width:100%;left:0;position:absolute;top:0;height:100%}
.smokeHolder {
display: block;
margin-top: 64px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 250px;
}
.noLeftPad{margin:0px -15px;}
.noRightPad{padding:0px 0px 0px 15px;}
img {margin-bottom: 32px; box-shadow:0px 8px 12px -8px rgb(34 56 101/35%);}
.imgDarkerShadow { box-shadow:0px 8px 12px -8px rgb(34 56 101/70%);}
.imgDarkerShadow:hover { box-shadow:0px 8px 12px -8px rgb(34 56 101/60%);}
img:hover{box-shadow:0px 8px 12px -8px rgb(34 56 101/25%);border-radius:32px 8px;}
.ptwp:hover{box-shadow:0px 8px 12px -8px rgb(34 56 101/25%);border-radius:32px 8px;}
@keyframes smoothScaleUp {
100% {transform:scale(1.046875);}
}
.thumbsDat {
cursor: pointer;
}
.thumbsDat:hover {
animation: smoothScaleUp .375s forwards;
}
.callOutBox {
background-image: url(../images/paper.png);
background-color:#F4F4F4;
padding:40px 32px;
border-top:1px solid #7D8E9E;
border-bottom:0px;
border-right:0px;
border-left:0px;
border-radius:0px;
box-shadow: 0px 0px 0px 0px rgb(34 56 101 / 0%);
}
#mapid {
display:inline-block;
width: 100%;
height: 40rem;
position: relative;
z-index: 15;
background-color: #FFF;
}
.marker {
background-image: url('images/tStop.svg');
background-size: cover;
width: 78px;
height: 57px;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
}
.heyU, .heyU:active, .heyU:focus {
color: #BC0099;
font-size: 103.75%;
font-weight: 600;
}
.heyU:hover {
color: rgba(187, 0, 153, 0.8);
}
.heyUcallout0a {
padding: 0rem .4rem;
color: #0077BA;
font-size: 93%;
font-weight: 500;
}
.heyUcallout00a {
color:#0077BA;
}
.heyUcallout0 {
padding: 0rem .4rem;
color: #BC0099;
font-size: 93%;
font-weight: 500;
}
.heyUcallout00 {
color: #BC0099;
}
.introCopy {
font-size:2rem;
}
.getVerticalDude {
margin-top: 112px;
}
sup {
top: -0.5em;
font-size: 60%;
font-weight: 400;
}
.svgRoom {
margin-top: 32px;
}
.pixPushMatch {color:#0077BA;}
.cutBack {color:#FFF;font-size:80%;}
.knockout {color:#FFF;}
.knockout:hover {color:#FFF;}
.knockout:focus {color:#FFF;}
@media screen and (min-width: 480px) {
.backgroundPulseAlt:before {
height:600px;
}
.backgroundPulseAltx:before {
height:900px;
}
}
@media screen and (min-width: 680px) {
.backgroundPulse:before {
height:1335px;
}
.backgroundPulseAlt:before {
height:680px;
}
.backgroundPulseAltx:before {
height:780px;
}
}
@media screen and (min-width: 768px) {
.sectionWide {
padding: 64px 0;
}
.rowII {
margin-bottom: 128px ;
}
.callOutBox {
border-radius: 32px 8px;
border: 3px solid rgb(255 255 255 / 65%);
box-shadow: 0px 3px 12px 0px rgb(34 56 101 / 35%);
}
.cssSwitchHeader {
font-size: 3.6rem;
}
.wayfinderP {
font-size: 2rem;
}
.smokeHolder {
margin-top: 96px;
height:400px;
}
.backgroundPulse:before {
-webkit-clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
clip-path:polygon(0 0,100% 0,100% 82%,0 100%);
}
.backgroundPulse:after {
height: 2520px;
top: 2000px;
-webkit-clip-path:polygon(0 0,100% 15%,100% 100%, 0 100%);
clip-path:polygon(0 0,100% 15%,100% 100%, 0 100%);
}
.backgroundPulseAlt:before {
height: 700px;
}
.backgroundPulseAltx:before {
height: 900px;
}
.getVerticalDude {
margin-top: 18.5rem;
}
.mask11 {
height: 10rem;
top: -6.5rem;
}
.shadow11 {
top: -16.52rem;
}
.shadow12 {
top: -9.3rem;
}
.logo {
font-size: 7.75rem;
top: 50px;
width: 450px;
}
.callOutCyan {
margin-top: -300px;
}
.callOutCyanAlt {
margin-top: -300px;
}
h1 {
font-size: 4.4rem;
}
h2 {
font-size: 3.6rem;
}
h3 {
font-size: 3.0rem;
}
h4 {
font-size: 2.4rem;
}
h5 {
font-size: 1.8rem;
}
h6 {
font-size: 1.6rem;
}
.allEyesOnMe {
	font-size: 5rem;
	margin-bottom: 1rem;
}
}
/*@media screen and (min-width: 895px) {
.backgroundPulse:before {
height: 1030px;
}
}*/
@media screen and (min-width: 992px) {
.backgroundPulse:after {
top: 1950px;
height: 1780px;
-webkit-clip-path:polygon(0 0, 100% 20%,100% 100%, 0 100%);
clip-path:polygon(0 0, 100% 20%,100% 100%, 0 100%);
}
}
@media screen and (min-width: 1023px) {
.backgroundPulse:before {
height: 1100px;
}
.backgroundPulseAlt:before {
height: 910px;
-webkit-clip-path:polygon(100% 0, 100% 60%, 0 100%, 0 0);
clip-path:polygon(100% 0, 100% 60%, 0 100%, 0 0);
}
.backgroundPulseAltx:before {
height: 1010px;
-webkit-clip-path:polygon(0 0,100% 0,100% 50%, 0 100%);
clip-path:polygon(0 0,100% 0,100% 50%, 0 100%);
}
.callOutBox {
padding: 40px 48px;
}
}
@media screen and (min-width: 1200px) {
.backgroundPulse:after {
top: 2020px;
height: 1720px;
}
}
@media screen and (min-width: 1280px) {
.backgroundPulse:after {
top: 2100px;
height: 1760px;
}
}
@media (max-width: 666px) {
.hidden-widePhone {
display:none !important
}
}
@media (max-width: 767px) {
.backgroundPulse:after {
height: 0px;
}
}
@media (min-width: 667px) and (max-width:767px)  {
.hidden-verticalPhone {
display:none !important
}
}
@media (max-width: 1023px) {
.hidden-widePad {
display:none !important
}
}
@media (min-width: 1024px) and (max-width:1199px)  {
.backgroundPulse:after {
top: 1600px;
}
.hidden-verticalPad {
display:none !important
}
}
/* SVG devices flips
@media (min-width: 768px) and(max-width: 991px) {
.hidden-widePhone {
display:none !important
}
}
@media (min-width: 992px) and(max-width: 1199px) {
.hidden-widePhone {
display:none !important
}
}
@media (min-width: 1200px) {
.hidden-widePhone {
display:none !important
}
}
@media (max-width: 767px) {
.hidden-xs {
display:none !important
}
}
@media (min-width: 768px) and(max-width: 991px) {
.hidden-sm {
display:none !important
}
}
@media (min-width: 992px) and(max-width: 1199px) {
.hidden-md {
display:none !important
}
}
@media (min-width: 1200px) {
.hidden-lg {
display:none !important
}
}