/* Responsive Specific Changes */
.footer #first_row {
	margin-top: 40px;
}

#map_canvas {
	width: auto;
}

#subscriptions_btn,.well {
	margin-top: 5px;
}

/* Overide default styles for btn default */
.btn-default {
	color: #fff !important;
}

@media screen and (min-width: 767px) {
	.only-small{
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.only-big{
		display: none;
	}
}

@media ( max-width : 991px) {
	.slider {
		float: none;
		margin: 0px auto;
	}
	#displays {
		float: none;
		margin: 40px auto 0px;
	}
	#globug_home img {
		margin-bottom: 20px;
	}
	.btn {
		margin-top: 5px;
	}
}

/* Anything bigger than 1190px */
@media screen and (min-width: 1190px) {
	.join-navigation-container {
		min-height: 50px;
	}
	.hidden-big {
		display: none;
	}

	/* Forces max-width and margins auto to center the containers on smaller screens */
	.desktop-width {
		max-width: 1190px !important;
		margin: 0 auto !important;
	}
	#simpleSignup {
		display: none;
	}
	
	#signup {
		display: block;
	}
	#home-mobile-app{
		display:none;
	}
}

/* Anything smaller than 1190px */
@media screen and (max-width: 1190px) {
	.btn{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.join-navigation-container {
		min-height: 70px;
	}
	.navbar {
		padding-left: 0px;
		padding-right: 0px;
	}
	.navbar-nav {
		margin-left: -5px;
		margin-right: -5px;
	}
	.navbar .nav>li>a {
		padding-left: 20px;
	}
	#button-logout {
		padding-right: 20px;
	}
	#homeCarousel {
		display: none;
	}
	#signup {
		display: none;
	}
	
	#simpleSignup {
		display: none;
	}
	.phone {
		display: none;
	}
	#home-mobile-app{
		display:block;
	}
}

.panel-heading {
	background-color: #ddd;
	padding: 0.1em 2em;
	border-radius: 5px;
	margin: 0.1em 0;
}

/*
	This line in bootstrap3.css 
	@media screen and (min-width: 768px) {

	needs to change to:
	@media screen and (min-width: 1190px) {

	if the file gets updated. Can't seem to force the change in my own css file at this point. 
*/