/*************************************************************************************************************************
Screen smaller than 680px
*************************************************************************************************************************/
@media screen and (max-width: 680px) {

/*Filter & Quicksand CSS*/
.options-container { overflow: hidden; width: 90%;}
ul.filterOptions { margin: 40px 30px; width: auto; text-align: center; height: auto; }
ul.filterOptions li { height: 40px; margin: 3px; display: block; border-radius: 5px; font-size: medium; font-family: serif;}
ul.filterOptions li a {height: 40px; height: 40px; font-weight: bold; line-height: 35px; text-decoration: none; display: block; border-radius: 5px; padding: 0px 5px;}
ul.ourHolder {width: 100%; height: auto; overflow: hidden; }
ul.ourHolder li#item { list-style:none; display: inline-block; }
.caption { text-align: left; font-size: small; margin: 0 30px;}
.title { font-size: 1.3em; border-bottom: 1px solid #e2e2e2;}
.date {	color: #96939d;}
.author {font-style: italic;}

/*Pagination Menu*/
.navigation {float: right;margin: 60px 0px;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {color: #fff;text-decoration:none;}	
.navigation li {display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { background: #cfd5d9; border-radius: 3px; cursor: pointer; padding: 10px; padding: 0.5rem;	}
.navigation li a:hover, .navigation li.active a { background: #a4b0b7; }

}

/*************************************************************************************************************************
Screen between 681px and 980px
*************************************************************************************************************************/
@media screen and (min-width: 681px) and (max-width: 980px) {

/*Filter & Quicksand CSS*/
.options-container { overflow: hidden; width: 90%;}
ul.filterOptions { margin: 40px 30px; width: auto; text-align: center; height: auto; }
ul.filterOptions li { height: 40px; margin: 3px; display: inline-block; border-radius: 5px; font-size:large; font-family: serif; }
ul.filterOptions li a {height: 40px; height: 40px; font-weight: bold; line-height: 35px; text-decoration: none; display: block; border-radius: 5px; padding: 5px 10px;}
ul.ourHolder {width: 100%; height: auto; overflow: hidden; }
ul.ourHolder li#item { list-style:none; display: inline-block; }
.caption { text-align: left; font-size: medium; margin: 0 30px;}
.title { font-size: 1.5em; border-bottom: 1px solid #e2e2e2;}
.date {	color: #96939d;}
.author {font-style: italic;}

/*Pagination Menu*/
.navigation {float: right;margin: 60px 0px;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {color: #fff;text-decoration:none;}	
.navigation li {display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { background: #cfd5d9; border-radius: 3px; cursor: pointer; padding: 10px; padding: 0.8rem;	}
.navigation li a:hover, .navigation li.active a { background: #a4b0b7; }

}


/*************************************************************************************************************************
Screen larger than 981px
*************************************************************************************************************************/
@media screen and (min-width: 981px) {

/*Filter & Quicksand CSS*/
.options-container { overflow: hidden; width: 90%;}
ul.filterOptions { margin: 40px 30px; width: auto; text-align: center; height: auto; }
ul.filterOptions li { height: 40px; margin: 3px; display: inline-block; border-radius: 5px; font-size: medium; font-family: serif; }
ul.filterOptions li a {height: 40px; height: 40px; font-weight: bold; line-height: 35px; text-decoration: none; display: block; border-radius: 5px; padding: 0px 10px;}
ul.ourHolder {width: 100%; height: auto; overflow: hidden; }
ul.ourHolder li#item { list-style:none; display: inline-block; }
.caption { text-align: left; font-size: small; margin: 0 30px;}
.title { font-size: 1.3em; border-bottom: 1px solid #e2e2e2;}
.date {	color: #96939d;}
.author {font-style: italic;}

/*Pagination Menu*/
.navigation {float: right;margin: 60px 0px;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {color: #fff;text-decoration:none;}	
.navigation li {display: inline;}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { background: #cfd5d9; border-radius: 3px; cursor: pointer; padding: 10px; padding: 0.5rem; font-size: medium;	}
.navigation li a:hover, .navigation li.active a { background: #a4b0b7; }

}


/*************************************************************************************************************************
Thumbnail CSS
*************************************************************************************************************************/
/* The View */
.view {
   margin: 10px;
   width: 300px;
   height: 200px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
   border-radius: 5px;
  
}
.view .mask,.view .content {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;  
   width: 300px;
   height: 200px;

}
.view img {
   display: block;
   position: relative;

}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
   font-family: serif;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}