/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	.speaker-container img {
    	max-width: 60%;
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.dropdown-menu {
		left: initial;
		right: 0px;
		margin: -0.4rem 0 0;
	}

	.speaker-container img {
    	max-width: 80%;
    	margin-bottom:0;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

	body {
    	padding-top: 85px;

	}

	.navbar-expand-lg .navbar-nav .nav-link {
	    padding: 2rem 1.2rem;
	}

	.navbar.navbar-shrink .navbar-nav>li>a {
	    padding: 1.5rem 1.2rem;
	}

	.navbar.navbar-shrink .navbar-brand:first-child img {
    	height: 44px;
	}

	.navbar.navbar-shrink .navbar-brand:nth-child(2) img {
    	height: 20px;
	}

	.title-container {
	    max-width: 500px;
	}

	.header-image-2026 {
    	background: url('../img/header-image-2026.jpg') no-repeat bottom right;
	    -webkit-background-size: 600px;
	    -moz-background-size: 600px;
	    -o-background-size: 600px;
	    background-size: 600px;
	}

	.speaker-container img {
    	max-width: 100%;
    	margin-bottom:0;
	}

	.title-container h1 {
		font-size: 2.8rem;
		line-height: 3rem;
	}

 }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	.nav-container {
	    max-width: 1140px;
	}

	.title-container {
	    max-width: 800px;
	}

	.header-image-2024 {
    	background: url('../img/header-image-2024.jpg') no-repeat bottom right;
	    -webkit-background-size: 600px;
	    -moz-background-size: 600px;
	    -o-background-size: 600px;
	    background-size: 600px;
	}

}