/*********************************************************************************************************
  CSS reset
**********************************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a{
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}


/*********************************************************************************************************
  HEADER
**********************************************************************************************************/

.inline{
  display:inline-block;
  vertical-align:top;
}

/*********************************************************************************************************
  Gallery styling
  Grid format
**********************************************************************************************************/

.grid-container{
  position:relative;
  text-align: center;
}
#focus {
  position: fixed;
  top :80px;
  width:100%;
  height:90%;
  background-color:#404040;
  opacity:1;
  z-index: 999;
  visibility:hidden;
}
#focus a.close{
  color:#FFFFFF;
  position:absolute;
  top:20px;
  right:20px;
  font-size:30px;
  padding:5px;
  z-index: 1999;
  cursor: pointer;
}
#focus .zoom{
  text-align:center;
  margin-top:20px;
}
#focus img{
  width: 700px;
}
.grid{
  position:relative;
  padding:7px;
}

.photo-item-grid{
  width: 300px;
  /*height: 300px;*/
  height:auto;
  border-style: solid;
  border-width: 1px;
  padding: 2px;
  background-color: white;
  border-color: #FFFFFF;
  margin:5px;
  display:inline-block;
  position:relative;
  text-align: center;
  vertical-align: middle;
  opacity:0.5;
  transition: all 0.3s ease-out;
}
.photo-item-grid-h{
  width: 300px;
  /*height: 300px;*/
  height:auto;
  background-color: white;
  border-color: #EFEFEF;
  margin:5px;
  position:relative;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
.photo-item-grid:hover {
  border: solid 1px #CCC;
  -moz-box-shadow: 1px 1px 5px #999;
  -webkit-box-shadow: 1px 1px 5px #999;
  box-shadow: 1px 1px 5px #999;
  opacity:1;
}
/*
Box shadow
1rst value: horizontal move to the right
2nd: vertical to the bottom
3nd: strengh of the shading
then color
example to enhance
  -moz-box-shadow: 4px 4px 7px #999;
  -webkit-box-shadow: 4px 4px 7px #999;
  box-shadow: 4px 4px 7px #999;
*/

.photo-item-grid a{
  display:block;
  width: 300px;
  height:auto;
  text-align:center;

}
.photo-item-grid-h a{
  display: table-cell;
  width: 300px;
  /*height: 300px;*/
  height:auto;
  vertical-align: middle;
  text-align: center;
  position:relative;
}
.itempic-grid{
  margin:2px;
  width: 296px;
  /*height: 300px;*/
  height:auto;
}

.itempic-grid-h{
  margin:  2px;
  width: 296px;
  height: auto;
  vertical-align: middle;
}

.itempic-grid-v{
  margin: 2px;
  /*width: auto;
  height: 296px;*/
  width: 296px;
  height:221px;
}

/*********************************************************************************************************
  Zoom styling
**********************************************************************************************************/


.hoverjstitle{
  position:  relative;
  bottom: 0px;
  height: 30px;
  width:296px;
  text-align:center;
  visibility:hidden;
  margin:2px;
  padding-top:15px;
  padding-bottom:5px;
  letter-spacing: 2px;
  background-color: #404040;
  line-height:100%;
  opacity:1;
}
.infopic{
  visibility:hidden;
  color: #FFFFFF;
  opacity:1;
  font-size: 12px;

}
/*********************************************************************************************************
  Common
**********************************************************************************************************/

body{
  font-family: sans-serif, futura;
}

h1{
  font-size: 36px;
  margin:10px;
}

p{
  font-size: 14px;
  margin: 10px;
}

.footerline, .footerline a{
  text-align: center;
  font-family: sans-serif, futura;
  font-size:12px;
  color: #2E2E2C;
}
.footerline {
  margin: 5px;
}
.footer{
  padding:25px 5px;
  padding-top:0px;
}

.header {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: fixed;
    display:block;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #FFFFFF;
    opacity: 0.95;
}
.from-top{
  margin-top:80px; /* To position vs the animated header */
}
.darkgrey{
  background-color: #545454;
}
.darkgreytext{
  color: #545454;
}
.about{
  padding:20px;
  padding-top:80px;
}
.about .title{
  color: #333333;
  font-size:20px;
  font-family: "Helvetica Neue",'Open Sans', sans-serif;
  padding-left:30px;
  font-weight: 500;
  padding-top:10px;
}
.about .text p{
  color: #545454;
  font-size:14px;
  padding-left:30px;
  margin-top:20px;
  line-height:24px;
}
.pres-icon{
  padding-left:40px;
}
.painter{
  height:150px;
  padding-left:60px;
}
.painter img{
  width:130px;
  height:130px;
}
.navblock{
 margin-left:80px;
 margin-top: 20px;
 width: 700px;
}
.navblock a{
  text-decoration: none;
  color: #000000;
}
.title{
  font-size:20px;
}
.nav{
  margin-left:20px;
  padding-right:2px;
  padding-left:2px;
  font-size:14px;
  text-transform: uppercase;
  line-height: 25px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
/*****
******/

.nav .selected{
  color: #000000;
}
.nav:hover {
  color: #000000;
}
/*****
******/
.pic-footer{
  color: #707070;
  margin-top:30px;
}
.pic-footer p{
  font-size:12px;
}
.pic-footer .title{
  color:#FFFFFF;
  letter-spacing: 2px;
  font-size:12px;
}
.twticon{
  width:24px;
  height:24px;
  background-image: url(./img/twt.png);
}

/*********************************************************************************************************
  Header
**********************************************************************************************************/


/*@media all and (max-width: 660px) {
}*/

@media only screen and (max-device-width:480px) {
  .header {
      height: 50px;
  }
  .header .navblock{
    margin-left:20px;
    margin-top: 20px;
  }
  .header .nav{
    margin-left:5px;
  }
  a.title{
    font-size:14px;
  }
  li.nav{
    font-size: 10px;
  }
  .center{
      text-align:center;
  }
  #focus{
    top :50px;
    margin-top:0px;
  }
  #focus img{
    width:300px;
  }
  .from-top{
    margin-top:50px; /* To initialize position vs the fixed header */
  }
}

/** ***************************************************************
    *************************************************************** **/