/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 14, 2015 */

@font-face {
    font-family: 'latoblack';
    src: url('../fonts/lato-bla-webfont.eot');
    src: url('../fonts/lato-bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bla-webfont.woff2') format('woff2'),
         url('../fonts/lato-bla-webfont.woff') format('woff'),
         url('../fonts/lato-bla-webfont.ttf') format('truetype'),
         url('../fonts/lato-bla-webfont.svg#latoblack') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bol-webfont.eot');
    src: url('../fonts/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bol-webfont.woff2') format('woff2'),
         url('../fonts/lato-bol-webfont.woff') format('woff'),
         url('../fonts/lato-bol-webfont.ttf') format('truetype'),
         url('../fonts/lato-bol-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-lig-webfont.eot');
    src: url('../fonts/lato-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-lig-webfont.woff2') format('woff2'),
         url('../fonts/lato-lig-webfont.woff') format('woff'),
         url('../fonts/lato-lig-webfont.ttf') format('truetype'),
         url('../fonts/lato-lig-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-reg-webfont.eot');
    src: url('../fonts/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-reg-webfont.woff2') format('woff2'),
         url('../fonts/lato-reg-webfont.woff') format('woff'),
         url('../fonts/lato-reg-webfont.ttf') format('truetype'),
         url('../fonts/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*----------------------End Fonts-----------------------------------*/

img, embed, object, video { max-width: 100%; }
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }


/* CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
    font-family: latolight, sans-serif;
    font-size: 1em;
    line-height: 1.618em;
    background: rgba(55,55,55,1);
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.809em;
  line-height: 1em;
  }

p, ul, ol, dl, blockquote {
    font-size: 1em;
    line-height: 1.618em;
    margin-bottom: 1.618em; 

    letter-spacing: .08em;
  }
    
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 80%; }

html {
    height: 100%;
    min-height: 100%;
}

body{
    height: 100%;
    min-height: 100%;
}

a{ text-decoration: none; color: black; }

header {
    padding: 1em;
    overflow: hidden;
    text-align: center;
    background-image: url(../images/canvas.jpg);
    width: 100%;
    display: table;
    caption-side: top;
}

header #logo img {
    margin: 1em auto .1em auto;
    display: block;
    padding-bottom: .5em;
    
}

    header > div#logo {
        position: relative;
    }
    
    
    header > div#logo > h1{
        font-family: latoblack;
        font-size: 1em;
        padding: 1em 0 1em 0;
        text-align: center;
        letter-spacing: .1em;
        text-transform: uppercase;
        border-top: 1px solid #BBB;
        border-bottom: 1px solid #BBB;
        margin-top: .75em;
}
        
        header > div#logo > div#navToggle {
            position: absolute;
            right: 0;
            top: -1em;
            transition: 300ms all ease;
        }
           
            header > div#logo > div#navToggle > a {
                width: 30px;
                height: 30px;
                background-image: url(../images/dropMenu.png);
                text-indent: -9999px;
                display: block;
                text-decoration: none;
                transition: 300ms all ease;
            }
            
                header > div#logo > div#navToggle:hover > a {
                    background-image: url(../images/dropMenuHover.png);
                }
                
                 header > div#logo.menuDown div#navToggle > a {background-image: url(../images/closeMenu.png);} 

header nav {
    
    transform: 300ms all ease;
    display: none;
    background-image: url(../images/canvas.jpg);
}

header nav  #navLinks{
    display: block;
    border-bottom: 1px solid #BBB;
    padding-bottom: 1em;
    width: 100%;
    margin: 0 auto;
}

header nav  #navLinks  li {
    position: relative;
    display: block;
    font-family: latoregular;
    font-size: 1em;
    height: 2em;
    line-height: 2em;
    text-align: center;
}
            

header nav  #navLinks  li  a {
    display: block;
    transition: 550ms all ease;
    color: black;
}

header  nav #navLinks li:hover a {
    color: #FFF;
    background-image: url(../images/navLiBG2.png);
    opacity: .75;
}

.active{
    color: #FFF !important;
    background-image: url(../images/navLiBG3.png);
    opacity: 1;
}

ul#socialBar {
    display: block;
    margin: 1em auto 1em auto;
    height: 45px;
    text-align: center;
    
}

ul#socialBar  li{
    display: inline;
    margin: .5em;
    
}

ul#socialBar li a{
    display: inline-block;
    height: 45px;
    width: 45px;
    background-image: url(../images/socialIcons45x45.png);
    
    
}

ul#socialBar li a#facebook{
    background-position: 0px -45px; 
}

ul#socialBar li a#facebook:hover{
    background-position: -45px 45px;
}

ul#socialBar li a#instagram{
    background-position: 0px 0; 
}
ul#socialBar li a#instagram:hover{
    background-position: 45px 0px; 
}

#main{
    border-top: 1px solid #333;
    width: 100%;
}

#main .grid{
   margin: 0 auto;
   padding-top: 20px;
   width: 100%;
   
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 100%;
  
}

.gutter-sizer {
  width: 0%;
}

.grid-item {
  margin-bottom: 0em;
  padding: 0 10px 20px 10px;
}


.grid-item img {
    width: 100%;
    -webkit-transition: all .5s; /* Safari */
    transition: all .5s;
     
}

.grid-item a:hover img {
    opacity: .25;
    box-shadow: none;
    width: 440px;
}

.grid-item img{
    margin: 0 auto;
    display: block;
   
}

#main #bio{
    text-align: left;
    width: 100%;
    height: 100%;
    color: white;
    padding: 0 20px 40px 20px;
}

#main #bio img {
        max-width: 45em;
        width: 100%;
        display: block;
        margin: 0 auto;
        border: 1px solid rgba(255,255,255, .25);
        margin-bottom: 40px;
    }
    
h3 {
    font-size: 1.5em;
    padding: 40px 20px 0 20px;
}
    
#main #bio p {
        padding-bottom: 20px;
}

#main #bio p:last-child {
    font-size: .9em;
}

#artInfo {display: none;}

/*-------Individual Paintings---------------------*/

#main #artWrapper, #main #bioWrap {
    background-image: url(../images/wallBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    overflow: hidden;
}

#main #artWrapper #artWall{
    margin: 3em auto 4em auto;
}

#main #artWall #artFrame{
    display: block;
    float: none;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

#main #artWall #artFrame img{
    display: block;
    width: 100%;
    box-shadow: 5px 7px 5px rgba(0,0,0, .75);
}

#main #artWall #artDescription{
    float: none;
    margin: 0 auto;
    max-width: 400px;
    padding: 0 20px;
}

#main #artWall #artDescription h4{
    display: block;
    font-size: 2em;
    font-family: latolight;
    margin-top: 0em;
    padding: .5em 0;
    color: white;
    letter-spacing: .1em;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
    text-align: center;
    background: rgba(0,0,0, .10);
}

#main #artWall #artDescription p{
    font-size: 1em;
    font-family: latolight;
    margin-top: 1em;
    color: white;
    letter-spacing: .05em;
    line-height: 1em;
    line-height: 1.5em;
}

span.price{
    color: white;
    font-family: latobold;
    font-size: 1.1em;
    letter-spacing: .03em;
    border-bottom: 1px solid #555;
    display: block;
    padding-bottom: 1.5em;
}

span.sold{
    color: white;
    font-family: latobold;
    font-size: 1.1em;
    letter-spacing: .03em;
    border-bottom: 1px solid #555;
    display: block;
    padding-bottom: 1.5em;
    text-transform: capitalize;
}

#main #artWall #artDescription a{
    
    color: white;
}

a.purchase_btn{
    display: block;
    text-transform: uppercase;
    padding: .5em 1em;
    background-color: rgba(255,255,255, .75);
    font-size: 1.2em;
    text-align: center;
    margin: 2em auto 1em;
    color: black !important;
}

a.purchase_btn:hover{
    background-color: rgba(255,255,255, .25);
    color: #ffffff !important;
}



ul.pagination{
    display: block;
    text-align: center;
    line-height: 3em;
    margin: 40px auto;
}

ul.pagination li{
    display: inline-block;
    margin: 0 1em;
}

#previous {
    background-image: url(../images/leftArrow.svg);
    width: 31px;
    height: 31px;
}

#previous:hover {
    background-image: url(../images/leftArrowFill.svg);
}

#galleryBtn {
    background-image: url(../images/galleryButton.svg);
    width: 31px;
    height: 31px;
}

#galleryBtn:hover {
    background-image: url(../images/galleryButtonFill.svg);
}

#next {
    background-image: url(../images/rightArrow.svg);
    width: 31px;
    height: 31px;
}

#next:hover {
    background-image: url(../images/rightArrowFill.svg);
}

a.pag_btn{
    display: block
}


/*------------------------------------------------*/

@media screen and (min-width: 425px) {
    
    header{
        display: table;
        caption-side: top;
        
    }
    
    nav {
        display: table-caption;
        background-image: url(../images/canvas.jpg);
    }
    
    ul#navLinks {
        display: block;
        padding-top: 30px;
    }
    
    
    
    .grid-sizer, .grid-item {
        width: 50%;
    }
    
    
}



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

header > div#logo > div#navToggle {
        display: none;    
}

header {
    display: block;
    width: 30%;
    height: 100%;
    min-height: 600px; 
    float: left;
    overflow: hidden;
    position: fixed;
}

header #logo img {
    margin: 2em auto .3em auto;
    display: block;
    padding-bottom: 1em;
}

#logo h1{
    
}

header nav {
    display: block;
    margin: 0px auto;
    padding-top: 1em;
}

nav #navLinks {
    padding-top: 0px;
}

nav #navLinks li {
    font-family: latoregular;
    font-size: 1em;
    height: 2em;
    line-height: 2em;
    text-align: center;
}

nav #navLinks li a{
    display: block;
    color: #000000;
}

nav #navLinks li:hover a {
    color: white;
    background-image: url(../images/navLiBG2.png) !important;
    opacity: .75; 
}

.active{
    color: white;
    background-image: url(../images/navLiBG3.png);
    opacity: 1;
}

#main{
    min-width: 70%;
    width: 70%;
    float: right;
    height: 100%;
}

/*-- Masonry Grid Gallery--------*/

/* ---- grid ---- */

#grid-wrapper{
    padding: 30px;
}

.grid{
    width: 99%;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer, .grid-item {
  width: 50%;
}

.gutter-sizer {
  width: 0;
}

.grid-item {
    text-align: center;
    padding:  0 15px 30px 15px;
}

.grid-item img{
    display: block;
    width: 100%;
    -webkit-box-shadow: 5px 10px 14px 2px rgba(0,0,0,0.6);
    -moz-box-shadow: 5px 10px 14px 2px rgba(0,0,0,0.6);
    box-shadow: 5px 10px 14px 2px rgba(0,0,0,0.6);
}

#artInfo {
    display: block;
    width: calc(100% - 60px);
    opacity: 0;
    position: absolute;
    top: 10%;
    left:30px;
    -webkit-transition: opacity .9s; /* Safari */
    transition: opacity .9s;
}

a:hover #artInfo { opacity: 1; }

.more_btn{
    display: block;
    width: 59px;
    height: 59px;
    background-image: url(../images/moreBtn.png);
    margin: 0 auto;
}

h2 {
    padding: 1em 1.5em;
    color: white;
    font-size: 1.1em;
    letter-spacing: .1em;
    line-height: 1.5em;
    
    
}

#main #bio{
    overflow: hidden;
    padding-top: 2em;
    min-height: 100%;
    width: 100%;
}

#bio h3 {
    text-align: center;
    font-family: latolight;
    font-size: 3em;
    font-weight: 100;
    text-transform: uppercase;
    color: white;
    margin: 0 auto;
    padding-bottom: 40px;
    
}

#bio p {
    margin: 0 auto 0 auto;
    text-align: left;
    font-size: large;
    max-width: 770px;
    padding: 0 1em;
    color: white;
}

#tag{
    text-indent: -99999px;
    background-image: url(../images/natsTag.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    width: 184px;
    height: 137px;
}




} /*-----end media quiry---------*/




@media screen and (min-width: 900px) {
    
    header{ width: 30%}
    
    #main{
        min-width: 70%;
        width: 70%;
        float: right;
    }
    
    .grid-sizer, .grid-item {
        width: 33%;
    }
    
} /*-----end media quiry---------*/


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

    /*-------Individual Painting Pages------------*/

#main #artWrapper{
    background-image: url(../images/wallBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    overflow: hidden;
}

#main #artWrapper #artWall{
    width: 900px;
    margin: 3em auto 0 auto;
    overflow: hidden;
}

#main #artWall #artFrame{
    display: block;
    float: left;
    text-align: center;
    margin-bottom: 30px;
}

#main #artWall #artFrame img{
    display: block;
    width: 100%;
    box-shadow: 5px 7px 5px rgba(0,0,0, .75);
}

#main #artWall #artDescription{
    float: right;
    margin: 0em 0 0 0em;
    width: 400px;
}

#main #artWall #artDescription h4{
    display: block;
    font-size: 2em;
    font-family: latolight;
    margin-top: 0em;
    padding: .5em 0;
    color: white;
    letter-spacing: .1em;
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
}

#main #artWall #artDescription p{
    font-size: 1em;
    font-family: latolight;
    margin-top: 1em;
    color: white;
    letter-spacing: .05em;
    line-height: 1em;
    line-height: 1.5em;
}

ul.pagination{
    display: block;
    text-align: center;
    line-height: 3em;
    margin: 40px auto;
}

ul.pagination li{
    display: inline-block;
    margin: 0 1em;
}







} /*-----end media quiry---------*/




@media screen and (min-width: 1200px) {
    
    header{ width: 25%}
    
    #main{
        min-width: 75%;
    }
    
    .grid-sizer, .grid-item {
        width: 25%;
    }
    
} /*-----end media quiry---------*/

@media screen and (min-width: 1500px) {
    
    header{ width: 20%}
    
    #main{
        min-width: 80%;
    }
    
    .grid-sizer, .grid-item {
        width: 20%;
    }
    
} /*-----end media quiry---------*/