/* 
Date: October 2020
Author: Celso Almeida
To: MMA2021
*/

/* ********************** RESET ********************** */
.hidden {opacity: inherit;}
.block-title {margin-top: 0px;}

/* ********************** FONTS ********************** */

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-ExtraBold.ttf);
    font-weight: 800;
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat/Montserrat-Black.ttf);
    font-weight: 900;
}

.icon_twitter {
	background-image: url(../img/icons/twitter.svg);
}


/* ********************** ANIMATIONS ********************** */

@keyframes overlay {
    0%   {background-color: rgba(0,0,0,0.0);   visibility: hidden;}
    1%   {background-color: rgba(0,0,0,0.0);   visibility: visible;}
    100% {background-color: rgba(0,0,0,0.6); visibility: visible;}
}


@keyframes overlay2 {
    0% {background-color: rgba(0,0,0,0.6); visibility: visible;}
    99%   {background-color: rgba(0,0,0,0.0);   visibility: visible;}
    100%   {background-color: rgba(0,0,0,0.0);   visibility: hidden;}
}

.transition-slowout {transition: 0.15s ease-out;}



/* ********************** LOADING SCREEN ********************** */

.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,1);
    transition: all 0.3s;
}

.loading-screen.hiding {
    opacity: 0;
    color: rgba(0,0,0,0);
}

.loading-screen.hide {
    display: none;
}



/* ********************** GENERAL ********************** */

a {text-decoration-color: #0000EE;}

.sm-section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

#sponsorship, 
.sponsorship-packs {
	background-color: rgba(0,0,0,0.05);
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.sponsorship-packs {
	padding-top: 4rem;
	padding-bottom: 1rem;
}

.back-link {
	display: flex;
	align-items: center;
	margin-bottom: 0.25rem;
	font-size: 0.77rem;
}

.back-link::before {
  content: "";
  background-image: url(../tool/img/nav-previous_dark.svg);
  height: 0.77rem;
  width: 0.77rem;
  position: relative;
  display: flex;
  background-size: contain;
  line-break: normal;
  background-repeat: no-repeat;
  margin-left: -0.25rem;
}

.spons-pack-list {
	font-size: .77rem;
	list-style: none;
	padding-left: 0px;
	line-height: 1.45;
	width: 90%;
}

.card-bordered li {
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
	border-left: 4px solid #00e;
}

.spons-hours {
	list-style: none;
	padding-left: 0px;
	margin-top: 0px;
}


.spons-hours li {
	margin-bottom: 1rem;
}

	.spons-hours-head {
		font-size: 1rem;
		margin-bottom: 0.2rem;
		line-height: 1.15;
	}

	.spons-hours-time,
	.spons-hours-info {display: block;}

	.spons-hours-time {
		font-size: 0.769rem;
		margin-bottom: 0.25rem;
	}

	.spons-hours-info {
		opacity: 0.4;
		font-size: 0.769rem;
		line-height: 1.3;
	}

	.sponsorship-intro {padding-top: 8rem;}

.spons-pack-title {margin-bottom: 1rem;}

.subsection {margin-bottom: 2rem;}

.subsection-title {
	margin-bottom: 1rem;
}

.text-right {text-align: left;}

.text-right hr {margin-right: 50%;}


hr {
	border: 0px;
	height: 0.125rem;
	background-color: #0000EE;
	margin: 1rem 0rem;
}

code {
	padding: 0.1rem 0.25rem;
	background-color: rgba(0,0,0,1);
	font-family: inherit;
	display: inline-block;
	box-sizing: border-box;
}

.detail {
	opacity: 0.6;
	font-weight: 400;
	margin-top: 0px;
}

html {
    font-size: 4.259265vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

html.sr reveal, html.sr reveal-s,  html.sr reveal-x, {visibility: hidden;}

h1, h2, h3, h4, h5, h6 {line-height: 1;}

h1 {font-weight: 1000;}
h2, h3, h4 {font-weight: 900;}
h5, h6 {font-weight: 800;}

h1, h2, h3 {text-transform: uppercase;}

h1 {font-size: 2.07rem;}
h2 {font-size: 1.73rem;}
h3 {font-size: 1.44rem;}
h4, .textbox {font-size: 1.2rem;} 
h5 {font-size: 1rem;}
h6 {font-size: 0.76rem;}

.text-sm,
.text-sm p,
.text-sm{font-size: 1rem;}

p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75rem;
}

li h3, li h4, li h5, li h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.container {
    max-width: 1400px;
}

.container, 
.fw-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.row {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

    .row > .column, 
    .row > .block,
	.row > .col {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

sup {font-size: 0.4rem;}

section {
	padding-top: 4rem;
	padding-bottom: 3rem;
}

a {text-decoration: underline;}

body {
    width: 100%;
    right: 0;
    left: 0;
    font-weight: 500;
}

.navbar .row, .header-slip {height: 4rem;}

/* ********************** PROPS ********************** */

.collapse-box {
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: visible;
}

.arrow {
    height: 0.75rem;
    transform: rotate(90deg) translateX(0.05rem);
    margin-left: 0.5rem;
    margin-top: 0px;
    transition: 0.3s;
}

    .sm-collapse-global:hover .arrow {transform: rotate(270deg) translateX(0.05rem);}

.page-bg-wrapper {
    width: 100%;
    overflow: hidden;
    height: 200vh;
    position: absolute;
    z-index: -500;
}

#mob-hero-bg, #gen-hero-bg {transition: 0.2s ease-out;}

#mob-hero-bg {
    background-color: #0000EE;
    opacity: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    position: absolute;
    z-index: -500;
}

    #gen-hero-bg{opacity: 0; display: none;}
    #mob-hero-bg.scroll-show{opacity: 1;}

.page-background {
    display: inline;
    box-sizing: border-box;
    position: relative;
    width: 50vh;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 0px;
}

.bg-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 10vh;
}

.bg-wrapper .prop-1-1 {
    margin-top: -50%; 
}

.circle {
    background-color: #0000EE;
    transform: scale(20);
    border-radius: 300vh;
}

    .scroll-hide#bg-circle {
        background-color: #0000EE;
        opacity: 0;
    }

header.scroll-hide {opacity: 0;}

/* ********************** GRID ********************** */

.grid {
    display: grid;
    grid-gap: 1rem;
}

.gen-grid-1 {grid-auto-columns: minmax(auto, 100%);}
.gen-grid-2 {grid-auto-columns: minmax(auto, 50%);}
.gen-grid-2 {grid-auto-columns: minmax(auto, 33.332%);}
.gen-grid-4 {grid-auto-columns: minmax(auto, 25%);}
.gen-grid-8 {grid-auto-columns: minmax(auto, 12.5%);}

.grid-block {grid-area: auto;}

.grid-block1 .img-cover {height: 100%;}


/* ********************** OVERLAY ********************** */

.overlay {
    background-color: #000;
    opacity: 0.4;
}

    .overlay.hidden {
        animation-name: overlay2;
        animation-duration: 0.3s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: backwards;
    }

    .overlay.active {
        animation-name: overlay;
        animation-duration: 0.3s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }



/* ********************** CARDS ********************** */

.card {
    background-color: #fff;
    color: #000;
}

.card-bordered {
    border: 4px solid #000;
}

    .card .card-header, 
    .card .card-content, 
    .card .card-footer {
        padding: 0.8rem;
        margin: 0px;
    }

        .card .card-header {padding-bottom: 8px;}
        .card .card-header.regpackage-title {padding-bottom: 0px;}

        .card .card-content {padding-top: 0px;}

        .card.card-cta {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 1.75rem;
            font-weight: 700;
            text-decoration: underline;
        }

        .card-title {margin-top: 0px;}



/* ********************** CARDS ********************** */

.block-info {}

    .block-title,
    .regpackage-title {
        font-weight: 1000;
        text-transform: uppercase;
        margin-top: 0px;
    }

    .block-info .block-content li {padding-bottom: 0.15rem;}



/* ********************** DRAWER ********************** */
    
.drawer .navbar-footer {padding-bottom: 1rem;}


/***********************************************************/
/************************* SECTION *************************/
/***********************************************************/



section {overflow: auto;}

    section .section-title {
        margin-bottom: 32px;
        margin-top: 0px;
        color: #0000EE;
    }

        section .section-title small {
            text-transform: initial;
            color: #000;
            display: block;
            font-size: 66%;
        }

    section .section-cta {
        font-size: 2rem;
        margin-right: 10%;
        font-weight: 400;
        margin-bottom: 24px;
        text-decoration: underline;
        font-weight: 500;
    }

    footer,
    .award {
        background-color: #000;
        color: #fff;
    }

	.submission {background-color: #eee;}



/************************ GREETINGS ************************/

.greetings {padding-top: 0px;}



/************************** AWARD **************************/

.award {
    background-image: url("../../assets/img/trophy_bg-01.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}



/*********************** REGISTRATION ***********************/

.registration  {
    background-color: #0000ee;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 3rem;
}    
    
    .reg-info-list li h6,
    .reg-info-list {
        font-size: 0.8rem;
        list-style: none;
    }

    .registration .column {margin-bottom: 2rem;}

    .reg-info-list {padding-left: 0px;}

        .registration .block-info .block-title {margin-top: -0.15rem;}

        .reg-info-list li {
            padding-bottom: 0px;
            margin-bottom: 0.75rem;
        }

        .reg-info-list li h6 {font-weight: 700;}


    .registration .section-title {color: #fff;}

    .registration .regpackage-title {margin-bottom: 0.5rem;}

    .registration .regpackage-price {
        margin-top: 0.25rem;
        font-weight: 800;
        font-size: 1rem;
    }

    .regpackage-list {
		font-size: 0.59rem;
        list-style: none;
        padding-left: 0px;
    }

.regpackage-list li {
	line-height: inherit;
	margin-bottom: 0.5rem;
}

    .registration .regpackage-footer {
        display: block;
        border-top: dashed 2px #000;
    }

        .registration .regpackage-footer:hover {
            background-color: #0000EE;
            color: #fff;
        }



/************************* SPEAKERS *************************/

.speakers {}

    .speakers .speakers-list {
        float: left;
        list-style: none;
        padding-left: 0px;
    }

        .speakers .speakers-list li {
            list-style: none;
            float: left;
            padding-bottom: 0.5rem;
            padding-right: 0.75rem;
        }

        .speakers .speakers-list li h4 {
            display: inline;
            padding-right: 4px;
        }



/************************* PROGRAM *************************/

.program {
	transition: 0.4s ease-out;
	overflow: hidden;
}

.program-overlay {display: none;}

@media (max-width: 759px) {
	
	.program-overlay {
		display: flex;
		z-index: 1000;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
		align-items: flex-end;
		justify-content: center;
		padding: 2rem;
		box-sizing: border-box;
		font-weight: 800;
		color: #000;
		text-decoration: underline;
	}
	
	@keyframes program-overlay {
		0% {
			opacity: 1;
			color: inherit;
		}
		70% {		
			color: rgba(0,0,0,0);
		}
		99% {
			opacity: 0;
			z-index: inherit;
		}
		100% {
			opacity: 0;
			color: rgba(0,0,0,0);
			z-index: -500;
		}
	}
	
	.program-overlay.hide {
		animation: program-overlay 0.3s ease-out;
		animation-fill-mode: forwards;  
	}
}

    .program .program-entry-speaker {
        display: block;
        text-transform: uppercase;
        opacity: 0.4;
        font-size: 0.8rem;
    }

    .program .program-row {height: auto !important;}

    .program .entry-time:first-child {margin-top: 0px;}

    .program .program-entry .entry-time {line-height: 1;}

    .program .program-entry .entry-time,
    .program .program-entry .program-entry-title {
        margin-bottom: 0.35rem;
        display: block;
    }





/************************* TOPICS *************************/

.topics {}

    .topics .alert-topic {
        font-size: 0.5rem;
        border-radius: 0.25rem;
        background-color: #0000ee;
        align-items: center;
        padding: 0.25rem 0.4rem;
        margin-top: 0.2rem;
        color: #fff;
        display: table;
    }

    .topics .card-topic ul {
        list-style: none;
        padding-left: 0rem; 
        margin-right: 5%
    }

    .card-topic {
        margin-left: -1rem;
        margin-right: -1rem;
        background-color: #eee;
        overflow: hidden;
        padding-top: 0px;
        margin-top: 2px;
    }

    .topics .card-topic .card-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
        display: flex;
    }

    .topics .card-topic .card-id {
        color: #0000EE;
        font-size: 2rem;
    }

    .topics .card-topic .card-id,
    .topics .card-topic .card-title {
        margin: 0px;
        text-transform: uppercase;
    }

    .topics .card-topic .card-title {width: 70%;}

    .topics .card-topic .card-id {
        float: left;
        margin-right: 0.5rem;
    }

    .topics .card-topic .card-content {
        padding-bottom: 0px;
        overflow: hidden;
        max-height: 0px;
        transition: 0.3s;
        background-color: #fff;
        float: left;
        width: 100%;
        box-sizing: border-box;
        padding-right: 10%;
    }

    .topics .card-topic:hover .card-content {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        height: inherit;
        max-height: 500px;
    }

    .topics .card-topic:hover {padding-bottom: 0px;}


/******************** COLLAPSE ELEMENT *********************/

.collapse-global .collapse-content {
    max-height: 0vh;
    overflow: hidden;
    transition: 0.2s 0.05s ease-in-out;
}

.collapse-global {overflow: hidden;}
.collapse-global:hover .collapse-content {max-height: 100vh;}

@media (max-width: 459px) {
    .gen-collapse-global .collapse-content {
        max-height: 0vh;
        overflow: hidden;
        transition: 0.2s 0.05s ease-in-out;
    }

    .gen-collapse-global {overflow: hidden;}
    .gen-collapse-global:hover .collapse-content {max-height: 100vh;}
}

@media (max-width: 759px) {
    .sm-collapse-global .collapse-content {
        max-height: 0vh;
        overflow: hidden;
        transition: 0.2s 0.05s ease-in-out;
    }

    .sm-collapse-global {overflow: hidden;}
    .sm-collapse-global:hover .collapse-content {max-height: 100vh;}
}

/*********************** ENDORSMENTS ***********************/

.endorsments {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

    .endorsment {
        background-color: #eee;
        border: none;
        height: 0px;
    }

    .endorsment .content {
        display: flex;
        align-items: center;
    }

    .endorsment img {
        padding: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }



/* ********************** VENUE ********************** */

.venue {}

    .venue-map {grid-row-start: 2;}

    .marker {
        background-image: url('../img/point.svg');
        background-size: cover;
        width: 2rem;
        height: 2rem;
        border-radius: 0px;
        cursor: pointer;
        margin-top: -1rem;
    }    

    .marker::after {
        margin-left: 2rem;
        content: ""
    }

    .mapboxgl-popup {max-width: 200px;}

    .mapboxgl-popup-content {
      text-align: center;
      font-family: 'Open Sans', sans-serif;
    }

.venue .content {
    margin-bottom: 1rem;
}



/* ********************** PROGRAM ********************** */

.program .row .row {flex-flow: column wrap;}

.main-navbar {background-color: #0000EE;}

.main-navbar .row {
    justify-content: space-between;
    align-content: center;
}

.main-navbar.hos-pagenottop {
	-webkit-box-shadow: 
		0 2px 4px -1px rgba(0,0,0,.2), 
		0 4px 5px 0 rgba(0,0,0,.14), 
		0 1px 10px 0 rgba(0,0,0,.12);
	box-shadow: 
		0 2px 4px -1px rgba(0,0,0,.2), 
		0 4px 5px 0 rgba(0,0,0,.14), 
		0 1px 10px 0 rgba(0,0,0,.12);
}

img.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ********************** FOOTER ********************** */

footer {
    padding-top: 48px;
    padding-bottom: 48px;
    background-image: url("../../assets/img/noise_texture.png");
    font-size: 0.8rem;
}

    .footer-title {font-weight: 800;}

    footer .column {margin-bottom: 0.5rem;}

    footer .footer-title {
        text-transform: uppercase;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    footer .footer-list {padding-left: 0px;}

    footer .orgcom-list li {margin-bottom: 0.3rem;}

        footer .footer-list li {
            list-style: none;
            padding-bottom: 3px;
        }
        
        .footer-list .name {
            opacity: 0.6;
            display: block;
        }

        .footer-list .office {
            opacity: initial;
            text-transform: uppercase;
            font-weight: 700;
            display: block;
        }

        .footer-list .institution {opacity: 0.2;}

        .footer-list .institution::before {content: " ";}

    footer .footer-title {display: inline;}

    footer .footer-list {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    footer .footer-content {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    footer .footer-content-inline {
        text-transform: uppercase;
        opacity: 0.4;
        margin-left: 1rem;
        text-decoration: none;
    }


.post-category {
    font-size: 3.19444875vw;
    margin-top: auto;
    font-weight: 700;
    text-transform: uppercase;
}



/***********************************************************/
/************************ HEADER ***************************/
/***********************************************************/

.header-title {padding: 0px;}

#bg-circle {transition: 0.20s ease-out;}

.header-title img,
.icon img {
    display: block;
    height: 4.795vw;
    max-height: 24px;
}

.nav-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    background-clip: content-box;
    background-origin: content-box;
    background-repeat: no-repeat;
}


.header-logo {
    background-size: contain;
    background-repeat: no-repeat;
}

.main-navbar.hideonscroll-hide {transform: inherit;}

/* ********************** HERO ********************** */

.hero {
    padding-top: 0rem;
    padding-bottom: 2rem;
    color: #fff;
}

    .hero .hero-footer {padding-top: 0.5rem;}

    .hero .container {display: flex;}

    .hero .hero-content {margin-right: 0%;}

    .hero .hero-logo {
        height: 1.3rem;
        object-fit: contain;
        object-position: left;
        margin-bottom: 24px;
        display: none;
    }

        .hero .text {
            margin-bottom: 16px;
            margin-top: 16px;
            line-height: 1.4;
        }
            
    .hero-cta {
        text-transform: uppercase;
        text-decoration: none;
        display: block;
    }

        .hero-title {line-height: 1.15;}

    .hero-date {    
        opacity: 1;
        color: #000;
        text-transform: uppercase;
        line-height: 1;
    }

    .hero-date, 
    .hero-cta {font-size: 1rem;}


/* ********************** NAVBAR ********************** */

.main-nav {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.navbar .row {justify-content: space-between;}

    .navbar .row  {
        margin-right: -16px;
        margin-left: -16px;
    }

    .navbar .row .block {
        padding-right: 16px;
        padding-left: 16px;
    }

.navbar-side {
    width: 100vw;
    z-index: 800;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    position: fixed;
    right: 0;
    background-color: rgba(0,0,0,0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
}

    .navbar-side .nav-list-ver li {
        padding-top: 8px;
        padding-bottom: 8px;
        text-transform: uppercase;
    }

    .navbar-side.hidden {transform: translateX(100%);}

    nav.hor-nav {
        margin-right: -8px;
        margin-left: -8px;
    }

    .navbar-mobile nav {display: flex;}

    .navbar-mobile nav .nav-item {
        padding: 0px;
        padding-bottom: 2px;
        padding-top: 2px;
    }
    nav .nav-item {padding: 0px 8px 0px 8px;}

    .navbar-mobile {
        position: fixed;
        display: flex;
        flex-direction: column;
        z-index: 1025;
        background-color: inherit;
        padding-bottom: 0px;
        height: 100vh;
    }

        .navbar-mobile .navbar-mobile-secundary {transition: 0.3s ease-in;}

        .navbar-mobile.hidden .navbar-mobile-secundary {transform: translate(0px, -100%);}

        .navbar-mobile.active .navbar-mobile-secundary {
            transition: 0.20s 0.12s ease-out;
            transform: translate(0px, 0%);
        }

        .navbar-mobile nav {
            padding-bottom: 32px;
            padding-top: 32px;
        }

        .navbar-mobile .navbar-mobile-primary {
            flex-grow: 0;
            background-color: #fff;
            z-index: 50;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

        .navbar-mobile .navbar-mobile-secundary {
            flex-grow: 1;
            background-color: #DBE9E7;
            z-index: 25;     
        }



/* ********************** MAIN-NAVBAR ********************** */

.main-navbar {
    background-color: #0000EE;
    width: 100%;
    transition: 0.15s ease-out;
}
    
    .header-logo img {
        height: 1rem;
    }

    .main-navbar .menu-icon {
        height: 1rem;
        background-image: url(../img/icon_menu.svg);
        background-position: center;
        background-size: contain;
        box-sizing: border-box;
        padding: 0px;

    }

.itm-sticky {top: 144px;}

.icon {float: right;}

.page-header nav a {opacity: 0.4;}

nav a:hover {opacity: 1;}

nav a {transition: 0.15s ease;}

.block-nav {margin-right: -16px;}

.prop-featured {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

.img-link {
    text-decoration: none;
    border-bottom: none;
}

.header-st1 {background-color: #fff;}





/* ********************** CARD ********************** */

.card-greetings {
    background-color: #fff;
    
    box-sizing: border-box;
    border: 2px solid #000;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 400;
}

.card-greetings .card-content {padding: 2rem;}

.card-greetings .card-footer {
    padding-top: 0px;
    display: flex;
    justify-content: flex-end;
    text-align: end;
}



/* ********************** LIST ********************** */

ul.list {
    list-style: none;
    padding-left: 0px; 
    
    margin-left: -32px;
    padding-left: 32px;
    background-color: #fff;
    margin-right: calc(-24px + -32px);
    padding-top: 32px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    padding-right: 25%;
}

ul.list li.bullet-item {
    list-style: disc;
    margin-left: 16px;
    margin-bottom: 0.5rem;
}

.list-heading {margin-top: 8px;}


    
/* ############################################################## */
/* ############################# XS ############################# */
/* ############################################################## */

@media (min-width: 460px) {
    
    html {font-size: 3vw;}
    
    h1 {font-size: 1.73rem;}
    h1.hero-title {font-size: 1.5rem;}
    h2 {font-size: 1.73rem;}
    h3 {font-size: 1.44rem; margin-top: -0.28rem;}
    h4 {font-size: 1.2rem; margin-top: -0.2rem;}
    h5 {font-size: 1rem; margin-top: -0.2rem}
    h6 {font-size: 0.76rem; margin-top: -0.15rem}
    
    .xs-grid-1 {grid-auto-columns: minmax(auto, 100%);}
    .xs-grid-2 {grid-auto-columns: minmax(auto, 50%);}
    .xs-grid-2 {grid-auto-columns: minmax(auto, 33.332%);}
    .xs-grid-4 {grid-auto-columns: minmax(auto, 25%);}
    .xs-grid-8 {grid-auto-columns: minmax(auto, 12.5%);}
    
    .hero {
        padding-top: 0rem;
        padding-bottom: 2rem;   
    }
    
    .navbar .row, .header-slip {
        height: 3.25rem;
    }
    
    .venue {margin-top: 2rem;}
    
    /* FOOTER */
    
    footer {padding: 32px 0px;} 

    
    .topics .card-topic .card-title {width: 70%;}
    
    .topics .card-topic .card-content {padding-right: 30%;}
    
    .card .card-header, .card .card-content, .card .card-footer {
        padding-left: 1rem; 
        padding-right: 1rem;
    }
    
    .endorsment img {padding: 0.75rem;}
    
    /* ********************** BG ********************** */
    
    .bg-wrapper {margin-top: -200vh;}
    
    .circle {transform: scale(60);}
}

@media (max-width: 760px) { 
	.main-navbar.hos-pagenottop {
		-webkit-box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
		box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
	}
}

@media (min-width: 760px) {
    
/* ############################################################## */
/* ############################# SM ############################# */
/* ############################################################## */
	
	.text-sm,
	.text-sm p,
	.text-sm {font-size: 0.769rem;}
	
	.sponsorship-packs {
		padding-top: 4rem;
		padding-bottom: 3rem;
	}
	
	.text-right {text-align: right;}

	.text-right hr {
		margin-left: 50%;
		margin-right: 0%;
	}
	
	.subsection {margin-bottom: inherit;}
	
    .sm-grid-1 {grid-auto-columns: minmax(auto, 100%);}
    .sm-grid-2 {grid-auto-columns: minmax(auto, 50%);}
    .sm-grid-2 {grid-auto-columns: minmax(auto, 33.332%);}
    .sm-grid-4 {grid-auto-columns: minmax(auto, 25%);}
    .sm-grid-8 {grid-auto-columns: minmax(auto, 12.5%);}
    .sm-grid-block-2 {grid-area: span 2 / span 2;}
    
    .grid-block2 {grid-area: 1 / 3 / 2 / 4;}
    .grid-block3 {grid-area: 1 / 4 / 2 / 5;}
    .grid-block4 {grid-area: 1 / 3 / 3 / 5;}
    
    .grid-block1 .img-cover {
        right: 0 !important;
        width: calc(50vw - 16px) !important;
        left: auto !important;
        height: 100%;
    }
    
    .main-navbar {
		-webkit-box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
		box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
    }
    
    /**** PROPS ****/
    
    #mob-hero-bg.scroll-show{opacity: 0; display: none;}
    #gen-hero-bg.scroll-show{opacity: 1; display: block;}
    #gen-hero-bg.scroll-hide{opacity: 0; display: block;} 
    
    .arrow {display: none;}
    
    .collapse-box {
        display: block;
    }
    
    /**** TEXT ****/
    
    html {font-size: 2vw;}
    
    h1, h1.hero-title {font-size: 2.43rem;}    
    h2 {font-size: 1.9531rem;}
    h3 {font-size: 1.5625rem;}
    h4 {font-size: 1.25rem;}
    h5 {font-size: 1rem;}
    h6 {font-size: 0.8rem;}
    
    .hero-date, .hero-cta {
        font-size: 1.3rem;
    }
    
    .container,
    .fw-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .hero .hero-logo {display: block;}
    
    footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .reg-info-list li h6, .reg-info-list {
        font-size: 0.65rem;
        list-style: none;
    }
    
    .topics .card-topic {
        margin-left: -2rem;
        margin-right: -2rem;
    }
   
    .topics .card-topic .card-title {width: 35%;}

    
    .circle {display: block;}

/* ********************** HEADER ********************** */
    
    .navbar-side {width: 50vw;}
    
    .navbar .main-nav a:hover {opacity: 1;}
    
    .header-logo img,
    .icon img,
    .hero .hero-logo {
        height: 1rem;
        max-height: inherit;
    }
    
        .hero .hero-logo {
            object-position: left;
        }
    
    .program .program-row {
        flex-direction: column;
        height: inherit !important;
    }
    
    .bg-wrapper {
        margin-right: 0px;
        margin-left: 0% !important;
        margin-top: 50vh !important;
        width: 10vw;
    }
    
    .bg-wrapper .prop-1-1 {
        margin-left: -5vw !important;
        margin-top: -5vw !important;
    }
    
    .circle {
        transform: scale(18.5);
        margin-left: 0px;
        margin-top: 0px;
        width: auto !important;
        height: auto !important;
    }
    
/* ********************** VENUE ********************** */

    .venue-map {grid-row-start: auto;}
    
    
    
/* ******************* REGISTRATION ****************** */
    
    .registration  {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }    
    
    .endorsment img {padding: 1.4rem;}
    
	
	
/* ******************* PROGRAM ****************** */
	
    .collapse-overlay {display: none;}

}

@media (max-width: 992px) {

	.card-topic {border: none;}
	
}

/* ############################################################## */
/* ############################## MD  ########################### */
/* ############################################################## */

@media (min-width: 992px) {
    
	.sponsorship-intro {padding-top: 8rem;}
	.spons-pack-list {font-size: .5rem;}
	.spons-hours {
		list-style: none;
		padding-left: 0px;
		margin-bottom: inherit;
	}
	
    .main-navbar.hideonscroll-hide {transform: translateY(-100%);}
    
    .navbar .row,
    .header-slip {height: 2.5rem;}
    
    html {font-size: 2vw;}
    
    h1, h1.hero-title {font-size: 1.5625rem;}
    h2 {font-size: 1.5625rem;}
    h3 {font-size: 1.25rem;}
    h4, p {font-size: 1rem;}
    h5 {font-size: 0.76rem;}
    
    h1, h2, h3, h4, h5, h6 {margin-bottom: 0.5rem;}
    
    .md-grid-1 {grid-auto-columns: minmax(auto, 100%);}
    .md-grid-2 {grid-auto-columns: minmax(auto, 50%);}
    .md-grid-2 {grid-auto-columns: minmax(auto, 33.332%);}
    .md-grid-4 {grid-auto-columns: minmax(auto, 25%);}
    .md-grid-8 {grid-auto-columns: minmax(auto, 12.5%);}
    .md-grid-block-2 {grid-area: span 2 / span 2;}

    .main-navbar.hos-pagenottop {
		-webkit-box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
		box-shadow: 
			0 2px 4px -1px rgba(0,0,0,.2), 
			0 4px 5px 0 rgba(0,0,0,.14), 
			0 1px 10px 0 rgba(0,0,0,.12);
    }    

    .main-navbar {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .card {font-size: 0.5rem;}

    .card-topic {
        background-color: #fff;
        padding-bottom: 0px;
    }
    
    .card .card-header, 
    .card .card-content, 
    .card .card-footer {padding: 0.8rem;}
    
    .card.regpackage-off .card-content {padding-top: 0px;}
    
        .topics .card-topic .card-id {font-size: 2.2rem;}
    
        .topics .card-topic .card-content {
            max-height: inherit;
            padding-bottom: 1rem;
        }

    .topics .card-topic .card-content {
        padding-right: 10%;
        padding-top: 0rem;
    }
    
    .topics .card-topic .card-header {padding-bottom: 0.5rem;}
    
    .topics .card-topic .card-title {width: auto;}
    
            .topics .card-topic:hover .card-content {
                max-height: inherit;
                padding-top: 0px;
                margin-top: 0px;
            }
    

    /* ********************** HEADER ********************** */

    header {box-shadow: none;}

        .main-nav .header-logo img {height: 24px;}

    .icon img {
        height: 0.75rem;
        box-sizing: border-box;
        padding: 0px;
    }

    .content-heading {max-width: 60vw;}

    .post-category {font-size: 1.19791828125vw;}

    .card-greetings{font-size: 1.5rem;}
    
        .card-greetings .card-content {padding: 8%;}

        .card-greetings .card-footer {
            padding: 8%;
            padding-top: 0px;
        }

    .navbar-side {width: 45vw;}

    footer {font-size: 0.5rem;}

        .footer-list .name {display: inline;}
    
    .block-info {text-align: right;}
    
    .mobile-nav {font-size: 0.75rem;}
    
    .topics .card-topic .card-header {flex-direction: column;}
    
    .topics .card-topic {
        margin-left: inherit;
        margin-right: inherit;
    }
    
    
    /***** PROPS *****/
    
    .bg-wrapper {
        margin-right: 0px;
        margin-left: 0% !important;
        margin-top: 50vh !important;
        width: 10vw;
    }
    
    .bg-wrapper .prop-1-1 {
        margin-left: -5vw !important;
        margin-top: -5vw !important;
    }
    
    .hero {
        padding-bottom: 4rem;
        padding-top: 4rem;
    }
    
    .circle {
        transform: scale(18);
        margin-left: 0px;
        margin-top: 0px;
        width: auto !important;
        height: auto !important;
    }
    
    .topics .card-topic:hover .card-content {padding-bottom: 1rem;}
}



/* ############################################################## */
/* ############################## LG  ########################### */
/* ############################################################## */    

@media (min-width: 1248px) {
    
    h1, h1.hero-title {font-size: 1.953125rem;}
    h2 {font-size: 1.5625rem;}    
    h3 {font-size: 1.25rem;}
    h4, p {font-size: 1rem;}
    h5 {font-size: 0.76rem;}
    
    .card,
    .card p {font-size: 0.4rem;}
    
	.endorsment img {padding: 1.8rem;}
    
    
    /* ********************** HEADER ********************** */
    
    .navbar-side {width: 30vw;}
    
    .reg-info-list li h6,
    .reg-info-list {
        font-size: 0.65rem;
        list-style: none;
        line-height: normal;
    }
    
    
    .endorsment img {
        width: 100%;
        object-fit: scale-down;
    }
    
    /***** HEROs *****/

    .hero {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
        .hero .hero-footer {
            padding-top: 0.5rem;
            padding-bottom: 0rem;
        }
    
    .hero-date, .hero-cta {
        font-size: 0.7692rem;
    }
    
    .hero .hero-title {    
        margin-top: 0.5rem;
        line-height: 1;
    }
}

/* ############################################################## */
/* ############################## XL  ########################### */
/* ############################################################## */   

@media (min-width: 1500px) {
    .container {max-width: 48rem;}
    

}

.fw-container {max-width: 100%;}

.textbox {margin-bottom: -1rem;}

.regpackage-off .regpackage-footer:hover {background-color: #ccc;}

.regpackage-cta {
    font-size: 1rem;
    font-weight: 800;
}
.text-sm {
	  line-height: 1.4;
}

.popup {
    box-sizing: border-box;
    width:100%;
    z-index:99999;
    bottom:0;
    left:0;
    position:fixed;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    background-color:#000;
    color:#FFF;
    text-align: left;
}

.popup-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.41;
    font-size: 0.55rem;
    flex-wrap: wrap;
}

.popup-title { 
    font-size: 0.77rem;
    font-weight: 700;
    text-transform: uppercase;
}

.popup-button {
    display: block;
    flex-shrink: 0;
    color:#CCCCCC;
}

@media (max-width: 760px) {
    .popup-body { 
        font-size: 0.76rem;
        display: inline-block;
        line-height: 1.2;
    }

    .popup-title { 
        font-size: 1rem;
        line-height: 1.2;
    }
    
    .popup-button {
        margin-top: 0.5rem;
    }
}