/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{font-family: "Inter", sans-serif; line-height: 1.5; height: 100%; width: 100%; color: #333;}
html{scroll-behavior: smooth;}
hr{display: block; width: 91%; margin: auto; border: none; border-top: 1px #eee solid;}

.main{padding: 50px 0;}
.wrap{max-width: 1440px; margin: 0 auto; padding: 0 20px;}

.flex-row{display: flex; align-items: center; flex-wrap: wrap; gap: 20px 50px;}
.flex-col{flex: 1;}
.flex-col.col-3{max-width: 33.3333%;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-weight: 900; line-height: 1.25; color: #000;}
p{display: block; line-height: 1.75;}
p strong{display: inline-block; line-height: 1.5;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}
strong, .bold{font-weight: 700;}

.booth{display: block;}
.booth span{display: inline-block; background: #E9671C; padding: 6px 18px; font-weight: 800; color: #fff; border-radius: 0 0 10px 0;}

.bullet-list li{margin-left: 15px; padding: 2px 0; list-style: disc;}

.btn-container{display: flex; gap: 5px; flex-wrap: wrap; margin-top: 25px;}

.btn{display: flex; align-items: center; justify-content: center; gap: 10px; background: #B12A1C; padding: 14px 30px; font-size: 15px; font-weight: 600; text-align: center; color: #fff; border-radius: 3px;}
.btn:hover{color: #fff; opacity: .9;}
.btn img{max-height: 14px;}

/* NAVIGATION */

.page-flex{display: flex; flex-wrap: wrap; position: relative;}
.page-left{flex: 1;}
.page-right{width: 300px; transition: all .2s ease-in-out; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}

.navigation{position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh;}
.navigation strong{position: sticky; top: 0; display: block; width: 100%; background: #fff; padding: 15px 25px;}
.navigation > ul{flex: 1; padding-bottom: 20px; overflow: auto;}
.navigation ul li a{display: block; padding: 7px 5px 7px 25px; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.5; border-left: 2px transparent solid;}
.navigation ul li a:hover{color: #000; border-left: 2px #ddd solid;}
.navigation ul li a.active{color: #B12A1C; border-left: 2px #B12A1C solid;}
.navigation ul ul{margin: 0;}
.navigation ul ul li a{padding-left: 35px; font-weight: 400;}
.navigation ul ul li a.active{font-weight: 600;}

.navigation .scroll-top a{display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; font-size: 13px; font-weight: 700; text-align: center; border-radius: 10px 10px 0 0; box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.035);}
.navigation .scroll-top a:hover{box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.065);}

.section-selector{display: none; width: 100%; margin: 5px 0; padding: 10px; font-family: "Inter", sans-serif; font-size: 12px; border: 1px #eee solid; border-radius: 5px;}

/* HEADER */

.header{display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; padding: 20px 5%; text-align: center;}
.header .booth{font-size: 20px;}

.header .logo a:hover{opacity: .75;}
.header .logo img{display: block; max-height: 55px; margin: auto;}

.header .conexpo{margin-left: auto;}
.header .conexpo img{display: block; max-height: 40px; margin: auto;}

.header .cta .btn{font-weight: 900; transform: skew(-15deg);}
.header .cta img, .header .cta span{transform: skew(15deg);}

/* HERO */

.hero{position: relative; background: #97190b; padding: 0 5%; text-align: center; color: #fff;}
.hero h1{margin-bottom: 10px; font-size: 48px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff;}
.hero p{display: block; max-width: 1000px; margin: auto; font-size: 20px;}

.hero .hero-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .15; overflow: hidden; z-index: 0;}
.hero .hero-bg img{display: block; width: 100%; height: 100%; object-fit: cover;}
.hero .hero-bg video{display: block; width: 100%; height: 100%; object-fit: cover;}

.hero .flex-row{position: relative; max-width: 1200px; margin: auto; padding: 8% 0 6%; z-index: 9;}
.hero .btn-container{justify-content: center;}
.hero .btn{background: #fff; padding: 16px 40px; font-size: 16px; font-weight: 800; color: #B12A1C; transform: skew(-15deg);}
.hero .btn img, .hero .btn i, .hero .btn span{transform: skew(15deg);}
.hero .btn.conexpo-btn{background: #E9671C; color: #fff;}

.hero .special-edition{display: flex; justify-content: center; margin-top: 25px;}
.hero .special-edition img{display: block; max-height: 300px; margin: 8px auto; border: 1px #fff solid;}
.hero .special-edition a{font-weight: 600; text-decoration: underline;}
.hero .special-edition a:hover{text-decoration: none;}

.hero .explore-btn{display: inline-block; position: relative; margin: 10px auto; font-size: 14px; font-weight: 600; font-style: italic; z-index: 9;}
.hero .explore-btn i{display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.25); width: 40px; height: 40px; margin: 10px auto; border-radius: 50px; transition: all .2s ease-in-out; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.hero .explore-btn:hover > i{background: rgba(255, 255, 255, 0.35);}

.visit-container{padding: 30px 5%; text-align: center;}
.visit-container ul{display: flex; align-items: center; justify-content: center; gap: 35px 50px;}
.visit-container ul li img{display: block; max-height: 45px; margin: 0 auto 15px;}

/* BODY */

.section{padding: 5%;}
.section h2{font-size: 28px; font-weight: 300; text-transform: uppercase; letter-spacing: 3px;}
.section h3{margin-bottom: 5px; font-size: 24px;}
.section img{display: block; width: 350px; max-width: 100%; margin: auto;}

.section.title{background: #fafafa; padding: 2% 5%;}
.section.title p{margin-top: 15px;}

#activate .btn{background: #FB5E0F;}
#vip .btn{background: #E9CD46; color: #000;}
#im .btn{background: #363F49;}
#ft .btn{background: #2D9649;}
#tt .btn{background: #3B885E;}
#ct .btn{background: #F9B600; color: #000;}
#lt .btn{background: #F6B300; color: #000;}
#mbk .btn{background: #AA2815;}
#mdt .btn{background: #174C87;}
#trk .btn{background: #174C87;}
#tho .btn{background: #AA2815;}
#ry .btn{background: #3B95D4;}
#fti .btn{background: #174C87;}
#pre-at .btn{background: #B12A1C;}
#at .btn{background: #B12A1C;}
#ef .btn{background: #FFCC01; color: #000;}
#av .btn{background: #1E3A82;}
#fr8 .btn{background: #D6AC07; color: #000;}
#currency .btn{background: #0F3A5E;}
#cloud .btn{background: #426F90;}

/* LIGHTBOX */

#pre-at img, #at img{margin: 0 0 25px; width: 250px;}

.video-btn{display: block; width: 100%; margin: auto; cursor: pointer;}

.video-img{display: flex; align-items: center; justify-content: center; position: relative; border-radius: 10px; transition: all .2s ease-in-out; overflow: hidden; z-index: 0;}
.video-img:before{position: absolute; font-family: "Font Awesome 5 Brands"; font-size: 48px; font-weight: 900; color: #fff; content: "\f167"; z-index: 9999; opacity: .95; transition: all .2s ease-in-out;}
.video-img:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); z-index: 999; pointer-events: none; transition: all .2s ease-in-out;}
.video-img:hover{transform: scale(1.01); box-shadow: 0px 10px 35px 0px rgb(0 0 0 / 50%);}
.video-img:hover:before{opacity: 0;}
.video-img:hover:after{background: rgba(0, 0, 0, 0);}
.video-img img{display: block; width: 100% !important; margin: 0 !important;}

.modal-video{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video; transition: opacity 0.3s ease-out; opacity: 1; z-index: 1000000;}
.modal-video-body{display: flex; justify-content: center; max-width: 960px; width: 100%; height: 100%; margin: 0 auto; padding: 0 10px;}
.modal-video-inner{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}

.modal-video-movie-wrap{position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background: #333; animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video-inner; transform: translate(0, 0); transition: transform 0.3s ease-out;}
.modal-video-movie-wrap iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0px 10px 35px 0px rgb(0 0 0 / 50%);}

.modal-video-close{opacity: 0;}
.modal-video-close .modal-video-movie-wrap{transform: translate(0, 100px);}
.modal-video-close-btn{position: absolute; top: -45px; right: 0; display: inline-block; background: transparent; width: 35px; height: 35px; border: none; overflow: hidden; z-index: 2; cursor: pointer; transition: all .2s ease-in-out; opacity: .5;}
.modal-video-close-btn:hover{opacity: 1;}
.modal-video-close-btn:before{transform: rotate(45deg);}
.modal-video-close-btn:after{transform: rotate(-45deg);}
.modal-video-close-btn:before, .modal-video-close-btn:after{content: ''; position: absolute; top: 50%; left: 0; background: #fff; width: 100%; height: 2px; margin-top: -6px; border-radius: 5px;}

/* ANIMATIONS */

@keyframes modal-video{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes modal-video-inner{
	from{transform: translate(0, 100px);}
	to{transform: translate(0, 0);}
}

/* FOOTER */

.footer{background: #426F90 url(/siteart/footer.png) center center no-repeat; position: relative; padding: 10% 5%; text-align: center; color: #fff; box-shadow: inset 0px 5px 15px 0px rgba(0, 0, 0, 0.025); z-index: 999;}
.footer h2{display: block; max-width: 600px; margin: auto; font-size: 30px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; color: #fff;}
.footer h2 strong{font-weight: 900; letter-spacing: 1px;}
.footer p{display: block; max-width: 600px; margin: 15px auto;}
.footer .btn-container{justify-content: center;}
.footer .btn{background: #fff; color: #426F90;}

.social{margin: 15px 0 35px;}
.social ul{display: flex; align-items: center; justify-content: center; gap: 5px;}
.social ul li a{display: flex; align-items: center; justify-content: center; background: #fff; width: 50px; height: 50px; padding: 0; text-align: center; color: #426F90; border: none; border-radius: 50px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.social ul li a:hover{opacity: 1; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);}

.mobile-top{display: none; position: fixed; bottom: 15px; right: 15px; z-index: 999;}
.mobile-top .scroll-top{display: none;}
.mobile-top .scroll-top a{display: block; background: rgba(255, 255, 255, 0.9); padding: 10px 15px 10px; font-size: 14px; font-weight: 700; text-align: center; border-radius: 5px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.mobile-top .scroll-top a:hover{box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);}
.mobile-top .scroll-top a i{display: block;}

/* RESPONSIVE */

@media screen and (max-height: 1000px) and (min-width: 1200px){
	.hero h1{font-size: 36px;}
	.hero .flex-row{padding: 4% 0 3%;}
}

@media screen and (max-width: 1200px){
	.page-left{flex: none; width: 100%;}
	.page-right{position: sticky; top: 0; background: #fff; width: 100%; padding: 10px 5%; order: -1; z-index: 999;}
	.booth span{display: block;}

	.navigation{display: none;}

	.header{justify-content: center; gap: 20px; padding: 20px 1px 1px;}
	.header .conexpo{margin: 0;}
	.header .cta{width: 100%; order: 4;}
	.header .cta .btn{background: #E9671C; padding: 10px; transform: none; border-radius: 0;}
	.header .cta .btn img, .header .cta .btn span{transform: none;}

	.hero h1{font-size: 32px;}
	.hero p{font-size: 16px;}

	.section-selector{display: block;}
	.section{scroll-margin-top: 60px;}
	.section h2{font-size: 24px;}
	.section h3{font-size: 18px;}
	.section p{font-size: 14px;}
	.bullet-list li{font-size: 14px;}

	.footer{background-size: contain;}
	.footer h2{font-size: 24px;}
	
	.mobile-top{display: block;}
}
@media screen and (max-width: 768px){
	.flex-row .flex-col{flex: none; width: 100%;}
	.flex-row .flex-col.col-3{order: -1; max-width: 100%;}
	
	.header .logo{width: 100%;}
	.header .logo img{height: 50px;}
	.header .conexpo img{height: 30px;}
	.header .booth{order: 2;}
	.header .booth span{font-size: 16px;}

	.visit-container ul{flex-direction: column;}
	.visit-container ul li{flex: none; width: 100%;}
	
	.section img{width: 250px; margin: 0;}

	#pre-at .flex-row .flex-col.col-3, #at .flex-row .flex-col.col-3{order: 2;}
}
@media screen and (max-width: 480px){
	.btn{width: 100%; padding: 14px; font-size: 14px;}
	
	.hero h1{font-size: 26px;}
	.hero .flex-row{padding: 10% 0 5%;}
	.hero .btn{padding: 14px; font-size: 14px; transform: none;}
	.hero .btn span{transform: none;}
	.hero .btn img{display: none;}

	.section{padding: 10% 5%;}
	.section.title{padding: 5%;}
}