/* GLOBALS
====================== */
.text-mask{
	overflow: hidden;
	position: relative;
}
.city-shout h3 span:nth-child(1){
	font-size: 3rem;
	display: inline-block;
}
.city-shout h3 span:nth-child(3){
	font-size: 7rem;
	display: inline-block;
}
.city-shout h3{
	margin: 0px;
	font-family: 'Berkshire Swash', cursive;
	text-transform: uppercase;
	color: #ffffff;
    font-weight: 900;
    font-size: 7rem;
    line-height: 5rem;
    padding: 0rem 2rem 2rem 2rem;
    text-shadow: 1px 2px 21px #0000008c;
}
.city-shout{
    z-index: 1;
    position: fixed;
    display: flex;
    align-items: flex-start;
    top: -1rem;
    height: 100%;
    left: 0;
    justify-content: flex-end;
}
.ice-bg{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../assets/ice-bg.jpg') center;
	background-size: cover;
	z-index: 0;
}
.blue-tint{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
    mix-blend-mode: color-burn;
	background: rgb(168,255,253);
	background: -moz-radial-gradient(circle, rgba(168,255,253,1) 0%, rgba(40,170,209,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(168,255,253,1) 0%, rgba(40,170,209,1) 100%);
	background: radial-gradient(circle, rgba(168,255,253,1) 0%, rgba(40,170,209,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a8fffd",endColorstr="#28aad1",GradientType=1);
}
.full{
	height: 100vh;
	width: 100%;
	position: relative;
	/* overflow: hidden; */
}

/* HERO
====================== */
.hb-logo{
	-webkit-transform: translateY(10rem);
	   -moz-transform: translateY(10rem);
	    -ms-transform: translateY(10rem);
	     -o-transform: translateY(10rem);
	        transform: translateY(10rem);
}
.bokeh{
	background: url('../assets/bokeh4.png');
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-size: cover;
	z-index: 1;
	mix-blend-mode: hard-light;
	pointer-events: none;
}
.video-skip span{
	font-size: 1.5rem;
}
.video-skip{
    position: absolute;
    bottom: 2%;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Charm', cursive;
    font-size: 2.5rem;
    max-width: 75px;
    line-height: 48px;
    text-align: center;
}
.hb-monogram{
	position: absolute;
	bottom: 11%;
	width: 70px;
}
.purple-ornament-btn .ornament-img, .ornament-btn .ornament-img{
	height: 100%;
}
.purple-ornament-btn{
	left: 47%;
	top: -20%;
	height: 50%;
	position: absolute;
}
.ornament-btn{
	left: 5%;
	top: 0%;
	height: 100%;
	position: absolute;
}
.component-4{
	width: 310px;
	bottom: -200px;
	transform: rotate(-75deg);
	right: -20px;
}
.component-3{
	width: auto;
	height: 100%;
}
.component-2{
	max-width: 860px;
}
.component-1{
	height: 100%;
	width: auto;
}
.hb-ornaments .ornament{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.hb-ornaments{
	position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.hb-holly .hero-component{
	position: absolute;
	right: 0;
}
.hb-holly{
	position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
.hero{
	/* background: url('../assets/hero.jpg') center;
	background-size: cover; */
	display: grid;
	grid-template-columns: 2fr 1fr;
	justify-content: center;
	align-items: center;

}
.hb-heading h4{
	font-family: 'Charm', cursive;
	font-size: 2rem;
	color: #0244bf;
    max-width: 550px;
    margin: auto;
    margin-bottom: 2rem;
    left: 0;
    right: 0;
}
.hb-heading h2{
	color: #44004c;
    font-size: 6rem;
	font-family: cinque-donne, serif;
}
.hb-heading{
	justify-self: center;
	text-align: center;
	z-index: 2;
}

/* AUSTIN
====================== */
.bulb-btn{
    background: url('../assets/light-bulb.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    padding: 1rem 2rem 1rem 3rem;
    width: max-content;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Charm', cursive;
    text-align: center;
    font-size: 20px;
    position: absolute;
    bottom: 0;
    right: -40px;
    transform: rotate(32deg);
}
.austin-text{
    color: #ffffff;
    z-index: 1;
    width: calc(100% - 10rem);
    height: auto;
    position: absolute;
    display: grid;
    font-size: 20px;
    line-height: normal;
    top: 5rem;
    justify-self: center;
    align-self: flex-start;
    font-family: 'Charm', cursive;
}
.red-note{
	max-width: 550px;
}
.austin-copy-wrap{
	position: absolute;
    left: 10%;
    top: 26%;
    justify-content: center;
    display: grid;
    align-items: center;
    max-width: 530px;
    -webkit-transform: rotate(-11deg);
    -moz-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    -o-transform: rotate(-11deg);
    transform: rotate(-11deg);
}
.austin-video-wrap img{
	width: 100%;
}
.austin-video-wrap{
    position: absolute;
    right: 24%;
    top: 24%;
    max-width: 650px;
    justify-content: center;
    display: grid;
    align-items: center;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(9deg);
}
#hb-austin-clip{
    z-index: 1;
    width: calc(100% - 4rem);
    height: auto;
    position: absolute;
    display: grid;
    justify-self: center;
    align-self: center;
    -webkit-transform: translateY(3rem);
       -moz-transform: translateY(3rem);
        -ms-transform: translateY(3rem);
         -o-transform: translateY(3rem);
            transform: translateY(3rem);
}
.austin-2 h3 span:nth-child(1){
	font-size: 2.5rem;
}
.austin-2 h3{
    margin: 0px;
    font-family: 'Berkshire Swash', cursive;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 11;
    font-weight: 900;
    font-size: 6.5rem;
    position: absolute;
    line-height: 5rem;
    top: 20%;
    padding: 0rem 2rem 2rem 2rem;
    text-shadow: 1px 2px 21px #0000008c;
    left: 0%;
}
.lights-2{
	position: absolute;
	left:0%;
	z-index: 0;
	top: 31%;
}
.lights-1{
    position: absolute;
    top: 5%;
    left: 3%;
    transform: scale(1.2);
    z-index: 1;
}
.austin-hb-clip{
	max-width: 800px;
	background: gray;
}
.austin-2{
	/* background: blue !important; */
}
.austin{
    background: none;
    display: grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
}
#austin-canvas{
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.austin-clip{
    position: absolute;
    width: calc(100% - 15rem);
    height: calc(100% - 15rem);
    overflow: hidden;
}
.austin-2{
	background: none;
	display: grid;
	justify-content: center;
	align-items: center;
}