/*Global Styling*/
* {
	box-sizing: border-box;
	margin: 0px;
	padding:0px;
}

html, body {
	height: 100%;
	min-height: 100%;
	width: 100%;
	min-width: 100%;
	background-color: #eee;
}

/*Navbar Styling*/
.navbar {
	height: 8%;
	padding: 0;
	background-color: #2196F3;
	display: flex;
	align-items: center;
	margin: 0;
	box-shadow: 0px 6px 6px -4px grey;
	border: none;
	color: white;
	font-family:'Product Sans',Helvetica,sans-serif;
	border-radius: 0;
}

.navbar-toggle {
	float: left;
	margin-left: 15px;
	border: none;
	background-color: #2196F3;
}

.navbar-toggle:hover, .navbar-toggle:focus {
	background-color: #E3F2FD !important;
}

.navbar-toggle:hover .icon-bar, .navbar-toggle:focus .icon-bar  {
	background-color: #2196F3 !important;
}

.icon-bar {
	background-color: #E3F2FD !important;
}

.navbar h1 {
	font-size: 25px;
	margin: 0;
}

.navmenu {
	font-family:'Product Sans',Helvetica,sans-serif;
	padding: 10px;
	background-color: #E3F2FD;
	box-shadow: 6px 6px 6px -4px grey;
}

.navmenu h2 {
	margin-top: 10px;
}

form button {
	background-color: #2196F3;
	color: white;
	width: 49.4%;
}

/*Main Content Styling*/
.container {
	height: 87%;
	width: 100%;
	padding: 1%;
}

.row, .col-sm-3, .col-sm-9 {
	height: 100%;
	min-height: 100%;
}

.row {
	margin: 0;
	width: 100%;
}

.col-sm-3, .col-sm-9 {
	padding: 0 5px;
}

/*My Events Styling*/
.panel {
	height: 100%;
	border-color: #F44336; 
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
}

.panel-heading {
	background-color: #F44336;
	color: white;
	font-family: 'Product Sans',Helvetica,sans-serif;
	padding: 5px;
}

.panel-body {
	position: absolute;
	right: 5px;
	left: 5px;
	top: 31px;
	bottom: 0px;
	overflow: auto;
	padding: 10px;
	color: #6f6f6f;
}

#myEvent p {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#clearMyEvents {
	font-size: 10px;
	padding: 0 2px;
	position: absolute;
	top: 8px;
	right: 10px;
	border: 1px solid white;
}

#clearMyEvents:hover {
	border: 1px solid #F44336;
	color: #F44336;
	background-color: white;
}

 /*Map Styling*/
#map {
	height: 100%;
	width: 100%;
	border: 1px solid #F44336;
}

.map-control {
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
	font-family: 'Roboto','sans-serif';
	margin: 10px;
	/* Hide the control initially, to prevent it from appearing
	   before the map loads. */
	display: none;
}

/* Display the control once it is inside the map. */
#map .map-control { display: block; }

.gm-iv-address {
	height: 56px !important;
}

.selector-control {
	font-size: 14px;
	line-height: 30px;
	padding-left: 5px;
	padding-right: 5px;
}

/*Events Styling*/
.stuff img {
	margin-right: 5px;
}

.stuff:hover {
	background:#E0E0E0;
}

.movies_info {
	height: auto;
	line-height: 1.3;
	.vertical-align: center;
	overflow:auto;
}

.movie_poster {
	width: 100px;
	float: left;
	margin-right: 5px;
}

.movies_info:hover {
	background: #E0E0E0;
}

.weather {
	 border: #40C0FF solid 1px;
	 text-align: center;
	 margin-bottom: -15px;
	 margin-top: 10px;
}

.mEvnt {
	border:black solid 1px;
	padding: 0.5em;
	font-size: 12px;
	margin-bottom: 1em;
}

.mEvnt hr {
	margin: 5px 0px;
}

.mEvnt a {
	width: 100%;
	display: inline-block;
	text-align: center;
}

.close {
	float: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 0.12;
    color: #fd0500;
    opacity: .5;
    position: absolute;
    right: 15px;
}

/*Footer Styling*/
footer {
	height: 5%;
	width: 100%;
	background-color: #2196F3;
}

footer .container {
	height: 100%;
	margin-bottom: 0px;
	display: flex;
	align-items: center;
	padding: 0;
}

footer p {
	margin: auto;
	color: white;
	font-family: 'Product Sans',Helvetica,sans-serif;
	font-size: 10px;
}


/*Carousel Styling*/
.carousel-control{

	width:10%;
	opacity: .005;

}

 .left a, .right a {
   outline: none !important; /* this will remove the outline when we click the anchor tag */
 }

 .carousel-control:hover, .carousel-control:focus {
   opacity: 0.2; /* this will remove the darker color on focus and hover */
 }


/*Media Queries*/
@media screen and (max-width: 767px) {

	.navbar h1 {
		font-size: 19px;
	}

	.navbar-toggle {
		margin-left: 5px;
		margin-right: 5px;
	}

	.col-sm-3 {
		height: 33.3%;
		min-height: 33.3%;
		padding-top: 1.5px;
		padding-bottom: 1.5px;
	}
	.col-sm-9 {
		height: 66.6%;
		min-height: 66.6%;
		padding-top: 1.5px;
		padding-bottom: 1.5px;
	}

	#myEvent{
		top:32.5px;
		bottom:1.5px;
	}

	.mEvnt {
		height: auto;
		overflow: auto;
	}

	#myEvent .mEvnt .movie_poster {
		width: 120px !important;
		margin-right: 5px !important;
		margin-left: 0px !important;
	}

	#myEvent .mEvnt h4{
		margin: 0;
	}

	#myEvent .mEvnt h6 {
		margin-top: 0; 
	}

	#myEvent .mEvnt a {
		display: inherit;
	}

	#clearMyEvents {
		top: 10px;
		right: 12px;
	}
}

@media screen and (min-width: 768px) {

	.navbar-toggle {
		display: inline-block;
	}
}