@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Montserrat:wght@300;400;700;900&display=swap');

/**** Main ****/
body{
	background-color:#101010;
	font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5{
	font-family: 'Montserrat', sans-serif;
}

h1.subtle-title{
	font-size:125px;
	font-weight:700;
	opacity:5%;
}

h1.title{
	text-transform:uppercase;
	font-weight:700;
	margin-top:0px;
	margin-bottom:60px;
}

h2.mid-title, h2.agenda-title{
	text-transform:uppercase;
	font-weight:700;
	position:relative;
	margin-bottom:60px;
}

h2.mid-title::before{
	content: "";
	background-color:#FFC31E;
	height: 3px;
    	width: 125px;
    	display: block;
    	position:absolute;
	bottom:-15px;
}

h2.agenda-title::before{
	content: "";
	background-color:#cc2023;
	height: 3px;
    	width: 125px;
    	display: block;
    	position:absolute;
	bottom:-15px;
}

.btn-group-xl>.btn, .btn-xl {
	--bs-btn-padding-y: .75rem;
    	--bs-btn-padding-x: 1.25rem;
    	--bs-btn-font-size: 1.75rem;
    	--bs-btn-border-radius: var(--bs-border-radius-lg);
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	h1.title{
		margin-top:-60px;
	}
}



#posts{
	background-color:#F5F5F5 !important;
}

.li-post-content, .fb-post-content, .ig-post-content{
	font-size:14px;
	position:relative;
}

.li-post-content .metadata span{
	opacity:0.6;
}

.li-post-content .metadata img.avatar{
	width:50px;
}

.fb-post-content .metadata img.avatar{
	width:45px;
	border-radius: 55px;
	background-color: #E4E4E4;
}

.ig-post-content .metadata img.avatar{
	width:40px;
	border-radius: 65px;
	background-color: #E4E4E4;
}

.ig-post-content .ig-buttons .group-1 img{
	width:25px;
	margin-right:10px;
}

.ig-post-content .ig-buttons img{
	width:25px;
}

.post-overlay {
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	height: 100%;
  	width: 100%;
  	opacity: 0;
  	transition: .5s ease;
  	background-color: #cc2023;
}

.li-post-content:hover .post-overlay {
	opacity: .75;
	border-radius:5px;
}

.overlay-text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}































/**** Navigation ****/
nav.fixed-top{
	--bs-bg-opacity: 1;
	background-color: #ffbf16;
	transition: .5s;
}

nav.fixed-top ul.navbar-nav li a, nav.fixed-top.scrolled ul.navbar-nav li a{
	color: #000000;
	font-size:2rem;
	font-weight:700;
}

nav.fixed-top ul.navbar-nav li a:hover, nav.fixed-top.scrolled ul.navbar-nav li a:hover{
	font-size:2.25rem;
	border-bottom: 5px solid #cc2023;
}

nav.fixed-top.scrolled ul.navbar-nav li a img{
	filter: brightness(0.1);
}

nav.fixed-top.scrolled{
	opacity:100%;
	background-color:#ffbf16 !important;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	nav.fixed-top{
		opacity:75%;
   		background-color: transparent;
	}

	nav.fixed-top ul.navbar-nav li a{
		color:#ffffff;
		font-size:1rem;
		font-weight:400;
	}

	nav.fixed-top.scrolled ul.navbar-nav li a{
		color: #000000;
		font-size:1rem;
		font-weight:400;
	}

	nav.fixed-top ul.navbar-nav li a:hover, nav.fixed-top.scrolled ul.navbar-nav li a:hover{
		font-size:1rem;
		border-bottom: 0px;
	}


	nav.fixed-top.scrolled ul.navbar-nav li a img{
		filter: brightness(0.1);
	}

	nav.fixed-top.scrolled{
		opacity:100%;
		background-color:#ffbf16 !important;
}


}










/**** Hero ****/
.btn-relive{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform:uppercase;
}

header {
  	position: relative;
  	background-color: black;
  	height: 100vh;
  	min-height: 25rem;
  	width: 100%;
  	overflow: hidden;
}

header video {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	min-width: 100%;
  	min-height: 100%;
  	width: auto;
  	height: auto;
  	z-index: 0;
  	-ms-transform: translateX(-50%) translateY(-50%);
  	-moz-transform: translateX(-50%) translateY(-50%);
  	-webkit-transform: translateX(-50%) translateY(-50%);
  	transform: translateX(-50%) translateY(-50%);
}

header .container {
  	position: relative;
  	z-index: 2;
}

header .overlay {
  	position: absolute;
  	top: 0;
  	left: 0;
  	height: 100%;
  	width: 100%;
  	background-color: black;
  	opacity: 0.75;
  	z-index: 1;
}

img.mobile-brand{
	max-width:88%;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	img.mobile-brand{
		max-width:75%;
	}
}











/**** Icon Boxes ****/
.icon-box{
	border-radius:10px;
	border:thin solid white;
	padding:10px;
	height:100%;
	position:relative;
	overflow:hidden;
}

.icon-box img{
	height:45px;
	position: relative;
  	color: #262626;
  	transition: .5s;
  	z-index: 3;
}

.icon-box h3{
	text-transform:uppercase;
	font-weight:700;
	font-size:16px;
	position:relative;
	z-index: 4;
	transition: .5s;
}

.icon-box p{
	z-index: 4;
	transition: .5s;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.icon-box{
		border-radius:10px;
		padding:20px;
		height:100%;
		position:relative;
		overflow:hidden;
	}

	.icon-box:before {
		content: "";
	  	position: absolute;
	  	top: 100%;
	  	left: 0;
	  	width: 100%;
	  	height: 100%;
	  	background: #f00;
	  	transition: .5s;
	  	z-index: 2;
	}
	
	.icon-box:hover:before {
	  	top: 0;
	}
	
	.icon-box:before{
	  	background: #ffffff;
	}

	.icon-box img {
		opacity:50%;
		height:45px;
		position: relative;
	  	color: #262626;
	  	transition: .5s;
	  	z-index: 3;
	}

	.icon-box:hover img {
		opacity:100%;
		filter: brightness(0.1);
	  	transform: rotateY(360deg);
	}

	

	.icon-box h3 {
		opacity:50%;
		text-transform:uppercase;
		font-weight:700;
		font-size:16px;
		position:relative;
		z-index: 4;
		transition: .5s;
	}

	.icon-box:hover h3 {
		opacity:100%;
		color: #000000;
	}
	
	.icon-box p {
		opacity:50%;
		position:relative;
		z-index: 4;
		transition: .5s;
	}

	.icon-box:hover p {
		opacity:100%;
		color: #000000;
	}

}










/**** Attend List ****/
ul.bigList{
	list-style: none;
	padding:0;
}

ul.bigList li{
	font-size: 2rem;
	font-weight:600;
	margin-bottom:2rem;
}

ul.bigList li:before{
	font-size: 3rem;
	border-radius: 5px;
	width: 3.5rem;
	min-width: 3.5rem;
	text-align: center;
	margin-right: 1rem;
	background-color: #cc2023;
	color: white;
	height: fit-content;
	display:block;
	margin-bottom:10px;
}

ul.bigList li h3{
	font-size: 1.5rem;
	text-transform:uppercase;
	font-weight:600;
}

ul.bigList li p{
	font-size: initial;
	font-weight:400;
}

ul.bigList li p.small{
	font-size: 14px;
	font-weight:400;
}

ul.bigList li.one:before {
	content:"1"; 
}

ul.bigList li.two:before {
	content:"2"; 
}

ul.bigList li.three:before {
	content:"3"; 
}

ul.bigList li.four:before {
	content:"4"; 
}

ul.bigList li.five:before {
	content:"5"; 
}











/**** What's New List ****/
.playingcard{
	height:425px;
	width:300px;
	border-radius:10px;
	background-color:white;
	filter: drop-shadow(3px 4px 4px #b3b3b3);
	transition: transform .5s;
}

.playingcard.a, .playingcard.b, .playingcard.c, .playingcard.d, .playingcard.e, .playingcard.f{
	background-size:cover;
	background-position:center;
}

.playingcard.a{
	background-image:url('../images/carda-bg.jpg');
	transform: rotate(-5deg);
}

.playingcard.a:hover{
	transform: scale(1.25) rotate(-1deg);
}

.playingcard.b{
	background-image:url('../images/cardb-bg.jpg');
	transform: rotate(2deg);
}

.playingcard.b:hover{
	transform: scale(1.25) rotate(-1deg);
}

.playingcard.c{
	background-image:url('../images/cardc-bg.jpg');
	transform: rotate(-3deg);
}

.playingcard.c:hover{
	transform: scale(1.25) rotate(4deg);
}

.playingcard.d{
	background-image:url('../images/cardd-bg.jpg');
	transform: rotate(3deg);
}

.playingcard.d:hover{
	transform: scale(1.25) rotate(0deg);
}

.playingcard.e{
	background-image:url('../images/carde-bg.jpg');
	transform: rotate(8deg);
}

.playingcard.e:hover{
	transform: scale(1.25) rotate(3deg);
}

.playingcard.f{
	background-image:url('../images/cardf-bg.jpg');
	transform: rotate(-7deg);
}

.playingcard.f:hover{
	transform: scale(1.25) rotate(-2deg);
}

.wn-pane{
	background-image:url('../images/cards.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

.wn-nav h5 a{
	opacity:0.5;
	padding:15px 10px;
}

.wn-nav a i{
	color:#cc2023;
	width:40px;
}

.wn-nav h5 a.active{
	opacity:1;
}

.wn-nav h5 a.active{
	border-radius:10px;
	background-color:#212529;
	padding:15px 10px;
}

.wn-nav h5 a.active span{
	color: #f5f5f5;
	/*color: #ffbf16;*/
}

.wn-nav h5 a.active i{
	color:#ffbf16;
	/*color:#cc2023;*/
}

ul.navbar-nav{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	text-transform:uppercase;
}

ul.navbar-nav li{
	margin:0 25px;
}

ul.navbar-nav li img{
	height:25px;
}











/**** Concert ****/
#concert{
	background-image:url('../images/concert-bg.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

@media only screen and (max-width: 600px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:18%;
		bottom:4%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:200%;
		position:relative;
		top:-16%;
		right:50%;
		margin-bottom:-100%;
	}
	img.artist-fog{
		height:50%;
		width:370%;
		position:absolute;
		bottom:-7%;
		right:-55%
	}
}

@media only screen and (min-width: 601px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:26%;
		bottom:4%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:200%;
		position:relative;
		top:-16%;
		right:50%;
		margin-bottom:-100%;
	}
	img.artist-fog{
		height:50%;
		width:370%;
		position:absolute;
		bottom:-7%;
		right:-55%
	}
}

@media only screen and (min-width: 991px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:25%;
		bottom:5%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:200%;
		position:relative;
		top:-16%;
		right:50%;
		margin-bottom:-100%;
	}
	img.artist-fog{
		height:100%;
		width:400%;
		position:absolute;
		bottom:-25%;
		right:-60%
	}
}

@media only screen and (min-width: 768px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:33.3333%;
		bottom:5%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	/*.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:230%;
		position:relative;
		top:-16%;
		right:60%;
		margin-bottom:-35%;
	}
	img.artist-fog{
		height:100%;
		width:200%;
		position:absolute;
		bottom:-1%;
		right:-50%;
	}*/
}

@media only screen and (min-width: 992px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:5%;
		bottom:10%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:230%;
		position:relative;
		top:-16%;
		right:60%;
		margin-bottom:-35%;
	}
	img.artist-fog{
		height:100%;
		width:200%;
		position:absolute;
		bottom:-1%;
		right:-50%;
	}
}

@media only screen and (min-width: 1200px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:5%;
		bottom:10%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:200%;
		position:relative;
		top:-20%;
		right:40%;
		margin-bottom:-45%;
	}
	img.artist-fog{
		height:100%;
		width:150%;
		position:absolute;
		bottom:-1%;
		right:-30%;
	}
}

@media only screen and (min-width: 1400px) {
	.artist-social{
		position:absolute;
		z-index:9999;
		right:0;
		bottom:10%;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		text-transform:uppercase;

	}
	.artist-text-col{

	}
	.artist-img-col{
		position:relative;
	}
	.artist-img-col img{
		width:200%;
		position:relative;
		top:-20%;
		right:55%;
		margin-bottom:-75%;
	}
	img.artist-fog{
		height:105%;
		width:120%;
		position:absolute;
		bottom:-1%;
		right:-15%;
	}
}

/**** Location and Venue ****/
.map-text-box{
	background-color:#cc2023;
	border-radius:10px;
	padding:20px;
}

.map-text-box h3{
	font-weight:700;
	text-transform:uppercase;
	font-size:24px;
}

iframe.gmaps{
	border-radius:10px;
	border:0;
	width: 100%;
	height: 100%;
}










/**** Social Media ****/
#social i.fa-square-facebook{
	color:#4267B2;
	transition: .2s;
}

#social i.fa-square-facebook:hover{
	color:#738cbe;
}

#social i.fa-square-instagram{
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
        /* Also define standard property for compatibility */
        background-clip: text;
  	-webkit-text-fill-color: transparent;
	transition: .2s;
}

#social i.fa-square-instagram:hover{
	background: radial-gradient(circle at 30% 107%, #fefefb 0%, #fefefb 5%, #f4aba4 45%, #d464b2 60%, #7591e3 90%);
	-webkit-background-clip: text;
        /* Also define standard property for compatibility */
        background-clip: text;
  	-webkit-text-fill-color: transparent;

}

#social i.fa-linkedin{
	color:#0e76a8;
	transition: .2s;
}

#social i.fa-linkedin:hover{
	color:#258dbf;
}

#social i.fa-square-youtube{
	color:#ff0000;
	transition: .2s;
}

#social i.fa-square-youtube:hover{
	color:#ec5353;
}










/**** Section Backgrounds ****/
#experience.defaultBg{
	background-image:url('../images/cards-bg.jpg');
	background-repeat:no-repeat;
    	background-position: -70px bottom;
	transition:.5s;
}

#experience.agendaBg{
	background-image:url('../images/mbest-agenda-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#experience.networkingBg{
	background-image:url('../images/group-networking-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#experience.poslabBg{
	background-image:url('../images/poslab-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#experience.vipBg{
	background-image:url('../images/vip-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#experience.scheduleBg{
	background-image:url('../images/schedule-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#experience.trainingBg{
	background-image:url('../images/training-bg.jpg');
	background-repeat:no-repeat;
    	background-position: right bottom;
	transition:.5s;
}

#agenda{
    	background-color:#ffbf16;
}

#sponsors{
    	background-color:#356BF7;
}

#social{
	background-color:#F5F5F5 !important;
}

#venue{
	background-image:url('../images/chips-bg.jpg');
	background-repeat:no-repeat;
    	background-size: cover;
	background-position:center;
}

#training{
	background-image:url('../images/dice-bg.jpg');
	background-color:#F5F5F5 !important;
	background-repeat:no-repeat;
    	background-size: cover;
	background-position:center;
}

#new, #attend, #relive{
	background-color:#F5F5F5 !important;
}

footer, #registration{
	background-color:#cc2023;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	#experience.defaultBg{
		background-image:url('../images/cards-bg.jpg');
		background-repeat:no-repeat;
	    	background-position: right bottom;
		transition:.5s;
	}
}








.dateTime{
	margin-top:210px;
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.dateTime{
		margin-top:550px;
	}
}

/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  	header {
    		background-image: url('../images/hero-bg.jpg');
		background-size: cover;
  	}

  	header video {
    		display: none;
  	}
}