/* =============================
*
*	GALLERY CSS ONLY
*
* =========================== */



/* =====================
*
*	FONTS STYLE FOR GALLERY
*
* - Cursive for headers (font-family: 'Great Vibes', Helvetica, sans-serif;)	
*
* ======================= */



/* FONTS ONLY */

h2 {
font: 200 65px/0.8 'Great Vibes', Helvetica, sans-serif;
color: rgb(255, 255, 255);
text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
text-align: center;
margin-bottom: 2%;
}

.lead {
margin: 0.4em auto;
font-size: 1em;
color: rgb(90, 90, 90);
letter-spacing: 0.015em;
width: 61%;
line-height: 1.5em;
text-align: center;
}

/* ======== END OF FONTS */

section {
background: rgba(0, 0, 0, 0.87);
overflow: auto;
padding-bottom: 5%;
}


/* start of page title and center underline / text */

span.underline {
height: 3px;
background: rgb(48, 48, 48);
display: inline-block;
width: 20%;
margin: 0;
padding: 0;
}


/* FANCY PAGE BREAK */
img#page_break_pic {
    text-align: center;
    width: 50%;
    margin-bottom: 5%;
}
div#page_break {
    text-align: center;
    padding-top: 7%;
    padding-bottom: 1%;
    clear: left;
}

/* =========END OF PAGE BREAK */





/* Filter and search options */
#price-range {
	width: 370px;
	margin: 10px auto 30px auto;
	text-align: center;
	font-weight: bold;}
#value-min, #value-max {width: 100px;}
#slider {margin: 30px 0px 30px 0px;}
input[type="number"] {margin: 0px 10px 0px 10px;}
/* Filter and search options */
#buttons, #search {
	text-align: center;
	margin-bottom: 30px;}

/* Filter buttons */
button {
background-color: rgb(10, 6, 6);
border: none;
padding: 3px 10px 4px 10px;
border-radius: 4px;
color: rgb(51, 51, 51);
font-family: 'Karla', sans-serif;
font-size: 100%;
margin-right: 14px;
margin-top: 4%;
height: 54px;
width: 125px;
}

button:hover, button.active {
	background-color: rgb(0, 113, 140);
	color: #fff;
	cursor: pointer;}


/* Search input */
input {
	font-size: 120%;
	border: 1px solid #999;
	padding: 5px;}
input:hover {
	border: 1px solid #666;}
input:focus {
	border: 1px solid #00cccc;
	outline: none;}


/* Gallery of images */
#gallery {
text-align: center;
max-width: 1020px;
margin-left: 20%;
}

#gallery img {
width: 200px;
height: 221px;
border-radius: 3px;
border: 1px solid rgb(255, 255, 255);
margin: 6px;
float: left;
}


/* Table styles */
table {
	margin: 0px auto;
	width: 780px;}
table#rates	{width: 380px;}
th, td {
	border-radius: 3px;
	color: #333;
	padding: 7px 10px 5px 10px;
	min-width: 9em;
	text-align: left;}
th {
	background-color: #d7d7d7;
	font-weight: bold;
	text-transform: uppercase;}
td {
	background-color: #fff;}
table.sortable th:hover {
	cursor: pointer;}
th.ascending, th.descending, table.sortable th:hover {
	background-color: #00cccc;
	color: #fff;}

/* Arrows for table sorting */
th.ascending:after {
	font-size: 60%;
    content: '\25B2';
    float: left;
	padding: 4px 5px 0px 0px;}
th.descending:after {
	font-size: 60%;
    content: '\25BC';
    float: left;
	padding: 4px 5px 0px 0px;}

.about {
	width: 780px;
	margin: 0px auto 40px auto;}
.about:after {
  content: "";
  display: table;
  clear: both;}
.about h2 {text-align: left; float: left;}

.bio {
	float: right;
	width: 195px;}
.bio img {
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 10px;}

.location {
	padding-left: 74px;
	background-image: url('../img/pointer.png');
	background-repeat: no-repeat;
	background-position: 60px 1px;
	font-size: 90%;}