/* CSS Document */

#articleList{
	height:300px;
	overflow-y:scroll;
}
#thingsContent .tab-pane{
	margin-top:3%;
	background-color:#FFF !important;
	border-radius:10px !important;
	padding:3% 0;
	position:relative;
	z-index:0;
}
#thingsContent .tab-pane h2.main{
	font-family: 'Rye' !important;
	font-size:22px !important;
	color:#5FA3B3;
	margin-top:7px !important;
	margin-bottom:7px !important;
	line-height:1.2;
}
#thingsContent #cityMap{
	margin:15px 0;
}
.thingsImage{
	position:relative;
	height:175px;
	width:100%;
	margin-bottom:10px;
}
#thingsPrev, #thingsNext{
	position:absolute;
	top:18%;
	font-size:30px;
	color:#FFF;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
	z-index:999;
	cursor:pointer;
}
#thingsPrev{
	left:20px;
}
#thingsNext{
	right:20px;
}
#thingsPrev:hover, #thingsNext:hover{
	color:#5FA3B4;
	text-shadow:0px 0px 8px rgba(0,0,0,.5);
}
#btnThings{
	font-family: 'Rye' !important;	
	margin-bottom:15px !important;
}

/********************************************************** MEDIA QUERRIES ******************************************************************/

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
	#thingsContent .tab-pane h2.main{
		font-size:24px !important;
	}
	.thingsImage{
		height:325px;
	}
	#thingsPrev, #thingsNext{
		top:22.5%;
		font-size:40px;
	}
	#btnThings{	
		font-size:18px !important;
	}
	
}

/* Tablet (portrait) */
@media(min-width:768px){
	#articleList{
		height:400px;
	}
	#thingsContent .tab-pane{
		margin-top:2.3%;
		padding:1.5%;
	}
	#thingsContent .tab-pane h2.main{
		font-size:28px !important;
		margin-top:0 !important;
	}
	.thingsImage{
		height:225px;
	}
	#thingsPrev, #thingsNext{
		top:21%;
		font-size:34px;
	}
	#btnThings{	
		font-size:10px !important;
	}
	
}

/* Tablet (landscape) */
@media(min-width:992px){
	#articleList{
		height:450px;
	}
	#thingsContent .tab-pane h2.main{
		font-size:34px !important;
	}
	.thingsImage{
		height:275px;
	}
	#thingsPrev, #thingsNext{
		top:24%;
	}
	#btnThings{	
		padding:10px 0 !important;
		font-size:13px !important;
	}
	
}

/* Desktop */
@media(min-width:1200px){
	#articleList{
		height:450px;
	}
	#thingsContent .tab-pane h2.main{
		font-size:44px !important;
		margin-bottom:10px !important;
	}
	#thingsContent #cityMap{
		margin:20px 0;
	}
	.thingsImage{
		height:400px;
	}
	#thingsPrev, #thingsNext{
		font-size:44px;
		top:22%;
	}
	.thingsImage .viewMore{
		position:absolute;
		top:0; 
		bottom:0;
		left:0; 
		right:0;
		padding-top:30.5%;
		font-family: 'Open Sans Bold' !important;
		font-size:30px;
		color:#FFF;
		text-align:center;
		z-index:999;
		opacity:0;
		filter: alpha(opacity=0);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
		transition:all 0.3s ease;
	}
	.thingsImage:hover .viewMore{
		background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
		background: rgba(0, 0, 0, .6);
		opacity:100;
		filter: alpha(opacity=100);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	
		cursor:pointer;
	}
	#btnThings{	
		padding:15px 0 !important;
		font-size:18px !important;
		margin-bottom:20px !important;
	}
	
}