m/* CSS file generated by Responsify */
/* Columns: 6, Gutter Width: 1.5, Breakpoints: 480 */ 

html, php, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body { overflow-x: hidden; } 

section {padding:0px 10px 0px 10px;}

#pagetitle {padding:20px 0px 10px 0px;}
/*h3 {position: absolute; bottom: 5px; left: 5px; width: 100%; font-size:80%; font-weight: 200; color:#e5e5e5; text-align: left; font-family: 'arial'; text-shadow: 1px 1px 2px black;}*/
h3 {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align:center; width: 100%; font-size:4vw; font-weight: 720; color:#fff; font-family: 'arial'; /*text-shadow: 1px 1px 1px black;*/}
h4 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center; width: 100%;  font-size:1.7vw; font-weight: 600; color:#fff; font-family: 'arial'; /*text-shadow: 1px 1px 1px black;*/}
h5 {font-size:180%; color:#000; /*text-transform: uppercase;*/ letter-spacing: 1px; font-weight: 600;/* text-align:center;*/ text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/ display: inline;upper}
h7 {font-size:120%; color:#e14a00; letter-spacing: 2px; font-family: 'arialbold';}
h8 {font-size:110%; color:#e14a00; letter-spacing: 1px; text-decoration: none; font-family: 'arialbold';}
h9 {font-size:90%; color:#000; letter-spacing: 1px; text-decoration: none; /*font-style: italic;*/}
h10 {font-weight: 600; color:#000; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h11 {font-size:100%; color:#e14a00; letter-spacing: 1px; text-decoration: none; font-style: italic; display: inline;}
h12 {font-size:90%; color:#000; text-decoration: none; /*font-style: italic;*/}
h13 {font-size:130%; color:#000; letter-spacing: 2px; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h14 {font-size:200%; color:#000; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h15 {font-size:120%; color:#fff; text-decoration: none; line-height: 150%; /*font-weight:bold;*/ /*font-style: italic;*/}
h16 {font-size:130%; color:#000; text-transform: uppercase; margin-left: 1%; letter-spacing: 2px; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h17 {font-size:130%; color:#000; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h18 {font-size:130%; color:#000; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;/*font-style: italic;*/}
h19 {font-size:150%; color:#fff; text-decoration: none; line-height: 150%; font-weight:bold; font-style: italic; padding: 80px 10% 0px 10%;}


h4 img {width: 15%;}

h12 a:link {text-decoration: none; }
h12 a:visited {text-decoration: none;}
h12 a:active {text-decoration: none;}
h12 a:hover {text-decoration: none;}


section a:link {text-decoration: none; color:#ff8c1c;}
section a:visited {text-decoration: none; color:#ff8c1c;}
section a:active {text-decoration: none; color:#ff8c1c;}
section a:hover {text-decoration: none; color:#000;}


a.two:link {color:#e14a00;text-decoration: none; letter-spacing: 0px;}
a.two:visited {color:#e14a00;text-decoration: none; letter-spacing: 0px;}
a.two:active {color:#e14a00;text-decoration: none; letter-spacing: 0px;}
a.two:hover {color:#000;text-decoration: none; letter-spacing: 0px;}

h11 a:link {color:#e14a00;}
h11 a:visited {color:#e14a00;}
h11 a:active {color:#e14a00;}
h11 a:hover {color:#000;}

.logo {filter: drop-shadow(0px 0px 4px #302420);}

.toppad {padding:20px 0px 10px 0px;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

.cf .icon {
  display: none;
}


nav ul, nav li { margin: 0; }
nav ul, ul { list-style:none; }
ul.bulleted { list-style:disc; list-style-position: inside;  }

.span1, .span2, .span2logo, .span2n4, .span3, .span4, .span5, .span6 {
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.button{border-radius: 25px;}
input[type=submit] {border-radius: 4px;}

.button, input[type=submit] {
    background-color: #4CAF50;
    border: none;

    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: none;
}

.button:hover, input[type=submit]:hover {
    background-color: #6ec071; /* Green */
    color: white;
    -webkit-appearance: none;
}

/* Ian added background begin  

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: -1;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  z-index: -1;
}

 Ian added background end */ 

.col{
  margin-left: 0; /* USED TO BE 1.5% */ 
}

.col:first-child {
  margin-left:0;
}

.span1{/* USED TO BE 15.4166666667%; */
  width: 16.6666666666%;
  padding:10px 5px 10px 5px;  
  
}
.span2{
  width: 33.3333333333%; /* USED TO BE 32.3333333333% */
}
.span2logo{
  width: 33.3333333333%; /* USED TO BE 32.3333333333% */
}
.span2n4{/* SPAN 2 NEXT TO SPAN 4 (NOT GALLERY) */
  width: 33.3333333333%; 
}
.span3{/* USED TO BE 49.25% */
  width: 50%;
  
}
.span4{
  width: 66.1666666667%;
}
.span5{
  width: 83.0833333333%;
  
}
.span6{
  width: 100%;
  margin-left: 0;
}

.span2 img {
   /* max-width: 225px;*/
    width: 100%;
}
.span2logo img {
   /* max-width: 225px;*/
    width: 100%;
}

.span3 object {
   /* max-width: 225px;*/
    width: 100%;
}

.span2logo img.logo {
    max-width: 225px;
    width: 100%;
    margin: 5px 10% 0px 10%;
}

body{
  font-size: 87.5%;
  color: #252e35;
  font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5em;
  background: #fff;
}

footer{
     /* background-image:url('../image/barklo2btall.jpg');*/
    /*background: #533e35;
       background: #3E5E37;*/
           margin: 25px 0 0px 0;
           
}

h1{
    font-size: 1.714285714em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
}

h2{
  font-size: 1.5em; /* 21 / 14 */
  line-height: 1.5em; /* 21 / 14 */
}

p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
}

#container, .inner, .inner2{
  margin: 0 auto;
  padding: 0 20% 0 20%;
}
/*
#imgcontainer{
    margin: 0 auto;
    padding-top: 4px;
}*/


/* HOME IMAGE BEGIN */
.crossfade {  width: calc(100% + 66.66%);
  position: relative;
  left: -33.333%;
  top: -0px;
  margin: 0 -66.66% -0px 0;
  margin-right: -66.66%;
  /*background-color: #000;*/
  height: auto;
}

img.homeslide1{
    width: 100%;
    margin: -6% auto -15.7%;
}

img.homeslide2{
    width: 100%;
    margin: -12% auto -9.7%;
}

img.homeslide3{
    width: 100%;
    margin: -10% auto -11.7%;
}

img.homeslide4{
    width: 100%;
}

header{
  background-image:url('../image/barklo2btall.jpg');
  background-color: #553C35;
  padding: 0 0% 0 0%;
     /* border-bottom: solid #553C35;
      border-bottom-width: 1px;*/
}

header h1{
  margin: 0px 0 0 0;
}

#container{
  clear: both;
  padding-top: 0px; /* 4px gap from head on MPG */
}

.alt{ /* nav colors */
  color: #fff;
  /*font-weight: bold;*/
  font-size:125%;
  /*color: rgba(0,0,0, 0.9);*/
  /*letter-spacing: 0.05em;*/
}

.altsub{ /* nav colors */
  color: #000;
  color: rgba(0,0,0, 0.9);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.artist {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 12px;
}

/* NAVIGATION */

nav{
  margin: 0px 0 0px 0;
  background-color: #3E5E37;
  /*filter: drop-shadow(0px -3px 3px #553C35);
    border-top: solid #553C35;
  border-top-width: 1px;*/
}

nav ul.cf{
  margin-top: 0px;
  text-align: right;
  overflow: visible; /* adjust per media query? */
      width: 100%; /* part of table code */
      box-sizing: border-box; /*part of table code */
  display: table; /*part of table code */
}

nav > ul > li {
   /*    display: inline-block; /* Move to media query? */
   /*    position: relative;  /* Move to media query?? */
   /*    margin: 0 0 0 0;
   /*    text-align: center;
   /*    overflow: visible; /* adjust per media query? */
   /*    float: left;
   /*    width: calc(100% / 6); /*adjust quantity of buttons! */
   display: table-cell; /*part of table code */
  width: auto; /*part of table code */
  text-align: center; /*part of table code */
}

nav a.alt{
  text-decoration: none;
  display: block;
  padding: 10px 0 10px 0%;
  margin: 0 0% 0 0%;
  /*background-color: rgba(255,255,255,.15);*/
  /*background-color: rgba(172,32,45,1);*/
}


 nav > ul > li.open .alt, body.notouch nav ul > li:hover .alt, body.notouch nav ul > li:active .alt {
    /*background-color: rgba(245,245,245,1);
    background-color: rgba(255,255,255,.10);
    background-color: rgba(255,126,0,.0);*/
    color:  #FF8c1c;
    /*color: #b5a696;*/
    /*color:  #553C35;*/
    /*background-color: #FF9833;*/
}



nav > ul > li > ul 
    {
        position: absolute;
        top: 100%;
        z-index: -100;
        max-height: 0px;
        width: 100%;
        text-align: center;
        filter:alpha(opacity=0);
        overflow: hidden;
                    -webkit-transition: max-height 0.35s ease-in;
            -moz-transition: max-height 0.35s ease-in;
            -o-transition: max-height 0.35s ease-in;
            -ms-transition: max-height 0.35s ease-in;
            transition: max-height 0.35s ease-in;
    }
 

nav > ul > li.open > ul, nav > ul > li:focus > ul
    {
              /*  border-style: solid;
        border-top: 4px;
        border-top-color:red;  DOESNT WORK!! */
            display: block;
            position: absolute;
            top: 100%;
            z-index: 100;
            height: auto;
            visibility: visible;
            overflow: hidden;
            opacity:1;
            filter:alpha(opacity=100);
            max-height: 300px;
            -webkit-transition: max-height 0.5s ease-in;
            -moz-transition: max-height 0.5s ease-in;
            -o-transition: max-height 0.5s ease-in;
            -ms-transition: max-height 0.5s ease-in;
            transition: max-height 0.5s ease-in;
        }

nav a.altsub{
  text-decoration: none;
  margin: 0;
  display: block;
  padding: 10px 0% 10px 0%;
  margin: 4px 2% 4px 2%;
  background-color: rgba(245,245,245,1);
}

nav a.altsubvoid {
        text-decoration: none;
        margin: 0;
        display: block;
        padding: 10px 0 10px 0%;
        margin: 4px 2% 4px 2%;
        cursor:default;
        /*background-color: rgba(172,32,45,1);*/
}

nav > ul > li > ul > li:hover .altsub, nav > ul > li > ul > li:focus .altsub {background-color: rgba(233,233,233,1)
}

.third
{
    left: 100%;
    z-index: 100;
            background: #fff;
}
.second
{
    z-index: 101;
            background: #fff;
}

.first
{
        left: -100%;
        z-index: 100;
        background: #fff;
        padding-right: 10px;   /*  backup to make sure no white in between dropdown columns as seen on ipad*/
        margin-right: -10px;   /*  backup to make sure no white in between dropdown columns as seen on ipad*/
}

.firstonly
{
        z-index: 100;
        background: #fff;

}

/* MEDIA QUERIES */

/* Responsify Defaults */

@media screen and (max-width: 1550px) {
      #container, .inner, .inner2{
    width: 60%;
    padding: 0px 10% 0 10%;
  }


.span2logo img.logo {
    max-width: 225px;
    width: 100%;
    margin: 5px 0 0px 0;
}

}

@media screen and (max-width: 1250px) {
      #container, .inner{
    width: 90%;
    padding: 0px 5% 0 5%;
  }
.inner2{
    width: 100%;
    padding: 0px 0% 0 0%;
  }

.crossfade {  width: calc(100% + 11.11%);
  position: relative;
  left: -5.555%;
  top: -0px;
  margin: 0 -11.11% -0px 0;
  margin-right: -11.11%;
  height: auto;
}
h3 {font-size: 4vw;}
h4 {font-size: 2vw;}
}

@media screen and (max-width: 1000px){

h3 {font-size: 4vw;}
h4 {font-size: 2.5vw;}
h4 img {width: 20%;}
    
        nav a.alt {
        margin: 0;
        padding: 10px 0 10px 0;
    } 
    
    nav > ul.cf{
        margin-top: 0px;
    }

.span1{
  padding:10px 0px 10px 0px; 
  text-align: center;  
} 

  .span2{ /*previously "nav .span2"*/
    padding:10px 0px 10px 0px;       
    width: 100%;
  }
  .span2logo{ /*previously "nav .span2"*/
    padding:10px 0px 10px 0px;       
    width: 100%;
  }

  .span4, article{
    width: 100%;
  }

  i .span2, i .span2logo/*needed?*/, #container .span1, aside{
    width: 50%;
    margin-left: 0;
  }

  #container .span2n4, aside{
    width: 100%;
    margin-left: 0;
  }

  #container, .inner{
    width: 90%;
    padding: 0px 5% 0 5%;
  }

.inner2{
    width: 100%;
    padding: 0px 0% 0 0%;
  }

.crossfade {  width: calc(100% + 11.11%);
  position: relative;
  left: -5.555%;
  top: -0px;
  margin: 0 -11.11% -0px 0;
  margin-right: -11.11%;
  height: auto;
}

.span1 > .photobox, .span1 > .photoboxon, .span1 .persname, .span1 .persnameon {width: 90%;  -webkit-backface-visibility: hidden;}
.span2 > .photobox, .span2 > .photoboxon, .span2 .persname, .span2 .persnameon {width: 90%;  -webkit-backface-visibility: hidden;}

h11 {font-size:110%; color:#AC202D; letter-spacing: 1px; text-decoration: none; font-family: 'arialbold';}

#colorbutton1 img, #colorbutton2 img, #colorbutton3 img, #colorbutton4 img, #woodbutton1 img, #woodbutton2 img{
    max-width: 75px;
height: 15%;
width: 15%;
min-width: 55px;
}

}

@media screen and (max-width: 875px) {
    h3 {font-size: 5vw}  
    h4 {font-size: 3vw; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    h4 img {width: 22%;}
}

@media screen and (max-width: 650px) { 

    h3 {font-size: 6vw}  
    h4 {font-size: 3.5vw; top: 50%; left: 50%; transform: translate(-50%, -50%);}
h4 img {width: 25%;}

    nav{
  margin: 0px 0 0px 0;
}
    
 #container .span2, #container .span3, #container .span1, aside{
    width: 100%;
    margin-left: 0;
  }

.span2logo{width: 100%; /*make 79 for nav bump*/
       margin-left:  0;
         padding:0px 0px 0px 0px; 
}

/*.span4 {
    width: 20%;
  }
    GOTTA FIGURE THIS OUT!!
    */  

.icon {
        width: 100%;
        margin: 0 0 0px 0;
        position: static;
        display: inline;
}

img.homeslide1, img.homeslide2, img.homeslide3{
    width: 100%;
    margin: 0% auto 0%;
}


.span1, .span2 {
  padding:15px 0px 15px 0px;  
}


/*ICON CODE BELOW*/
/*  .cf li.main {display: none;}
  .cf li.icon {
    float: right;
    display: block;
  }

  .cf.responsive li:not(.icon) {position: relative;}

  .cf.responsive li:not(.icon) {
    display: inline;
  }
/*END ICON CODE*/


    nav > ul.cf {
        margin-top: 0px;
    }

    nav > ul > li {
        width: 100%;
        margin: 0 0 5px 0;
        position: static;
        display: inline;
    }

    nav a.alt {
        margin: 0;
        padding: 10px 0 10px 0;
    }


nav > ul > li > ul 
    {
    display: block;    
    position: static;
        top: 0;
        z-index: -100;
        max-height: 0px;
        width: 100%;
        text-align: center;
        filter:alpha(opacity=0);
        overflow: hidden;
            -webkit-transition: max-height 0.35s ease-in;
            -moz-transition: max-height 0.35s ease-in;
            -o-transition: max-height 0.35s ease-in;
            -ms-transition: max-height 0.35s ease-in;
            transition: max-height 0.35s ease-in;
    }
 

    nav > ul > li.open > ul, nav > ul > li:focus > ul {
        display: block;
        position: static;
        top: 0;
        z-index: 100;
        text-align: center;
        width: 100%;
        overflow: hidden;
            visibility: visible;
            opacity:1;
            filter:alpha(opacity=100);
            max-height: 300px;
            -webkit-transition: max-height 0.5s ease-in;
            -moz-transition: max-height 0.5s ease-in;
            -o-transition: max-height 0.5s ease-in;
            -ms-transition: max-height 0.5s ease-in;
            transition: max-height 0.5s ease-in;
    }

    nav a.altsub {
        text-decoration: none;
        margin: 0;
        display: block;
        padding: 12px 0 12px 0%;
        margin: 4px 0% 4px 0%;
        /*background-color: rgba(172,32,45,1);*/
    }

    nav a.altsubvoid {
visibility: hidden;
        display: none;
    }


    .first {
        padding: 0 0; /*  trick from css-tricks comments */
        margin: 0 0; /* trick from css-tricks comments */
        left: 0%;
    }

    .firstonly {
        padding: 0 0; /*  trick from css-tricks comments */
        margin: 0 0; /* trick from css-tricks comments */
    }

    .third {
        left: 0%;
    }

/*  .third > li:nth-last-child(1) {
    visibility: hidden;
        display: none;
}   This code i used to hide an empty category filler when in mobile view  */

#colorbutton1 img, #colorbutton2 img, #colorbutton3 img, #colorbutton4 img, #woodbutton1 img, #woodbutton2 img{
    max-width: 55px;
height: 15%;
width: 15%;
min-width: 35px;
}

}
/* Custom Breakpoints */

@media screen and (max-width: 560px) {
    
.toppad {padding:5px 0px 5px 0px;}
    h3 {font-size: 8vw}  
    h4 {font-size: 4vw; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    h4 span {}
h4 img {width: 35%;}    

    .span1 > .photobox, .span1 > .photoboxon, .span1 .persname, .span1 .persnameon {width: 100%;  -webkit-backface-visibility: hidden;}
.span2 > .photobox, .span2 > .photoboxon, .span2 .persname, .span2 .persnameon {width: 100%;  -webkit-backface-visibility: hidden;}
 /* Add your styles for devices with a maximum width of 480 */

.span2logo{width: 100%; /*make 79 for nav bump*/
       margin-left:  0;
}

.span2logo img.logo {
    max-width: 300px;
    width: 100%;
    margin: 5px 0 0px 0;
}

#colorpick {
    position:  absolute;
  left: -25%;
    width: 150%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

#colorpickleft {
    position:  absolute;
  left: -25%;
    width: 150%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#rotatebox {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 50% 0 100% 0;
}

}


/* Micro Clearfix */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}


.pic a:link {text-decoration: none;}
.pic a:visited {text-decoration: none;}
.pic a:active {text-decoration: none;}
.pic a:hover {text-decoration: none;}


#thumbnails .pic {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    text-align: center;
    padding-bottom: 10px;
    line-height: 110%;
}

#thumbnails .pic img {
    vertical-align: top;
    display: inline-block;
    width: 98%;
        -webkit-transition: opacity 400ms ease-out;
    -moz-transition: opacity 400ms ease-out;
    -o-transition: opacity 400ms ease-out;
    -ms-transition: opacity 400ms ease-out;
    transition: opacity 400ms ease-out;
    left: 0;
    opacity: 1;
    -webkit-backface-visibility: hidden;
}

#thumbnails:hover img {
    opacity: .5;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 98%;
  opacity: 0;
  transition: .5s ease;
}

.overtext {
font-size:3vw; color:#000; font-weight: 600; text-decoration: none; font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#thumbnails:hover .overlay {
  opacity: 1;
}

    
.caption {
    display: inline-block; 
    width: 98%; 
    background-color: #e5e5e5; 
    padding-top: 1.5%;   
    padding-bottom: 1.5%;
            -webkit-transition: background-color 400ms ease-out;
    -moz-transition: background-color 400ms ease-out;
    -o-transition: background-color 400ms ease-out;
    -ms-transition: background-color 400ms ease-out;
    transition: background-color 400ms ease-out;
}

#thumbnails .pic:hover .caption {
    background-color: #efefef; 
}



#box{position:relative; padding-bottom: .5%;  -webkit-backface-visibility: hidden;}


#contact
{
    position:absolute;
    display: none;
    background: #efefef;
    color: black;
    width:100%;
    bottom:0;
    }

a.footer:link {color:#000;text-decoration: none; letter-spacing: 0px;}
a.footer:visited {color:#000;text-decoration: none; letter-spacing: 0px;}
a.footer:active {color:#000;text-decoration: none; letter-spacing: 0px;}
a.footer:hover {color:#3E5E37;text-decoration: none; letter-spacing: 0px;}

.span3 img.single{
    position: relative;
    display: block;
        max-width: 90%;
    max-height: 90%;
    margin: 0 auto 10px auto;        
}

.color_selector{padding-bottom: 0px;
                border-bottom: solid 3px;
                border-color: #bdbdbd;
}

.wood_selector{padding-bottom: 0px;
                border-bottom: solid 3px;
                border-color: #bdbdbd;
}

#fb2 {width: 147px;}

#fb {width: 42px;}

#fb:hover {
  -webkit-filter: opacity(60%);
  -webkit-transition: .25s ease-in-out;
  -moz-filter: opacity(60%);
  -moz-transition: .25s ease-in-out;
  -o-filter: opacity(60%);
  -o-transition: .25s ease-in-out;
  filter: opacity(60%);
} 

#fb {
  -webkit-filter: opacity(100%);
  -webkit-transition: .25s ease-in-out;
  -moz-filter: opacity(100%); 
  -moz-transition: .25s ease-in-out;
  -o-filter: opacity(100%); 
  -o-transition: .25s ease-in-out;
  filter: opacity(100%);
}

#fb2:hover {
  -webkit-filter: opacity(60%);
  -webkit-transition: .25s ease-in-out;
  -moz-filter: opacity(60%);
  -moz-transition: .25s ease-in-out;
  -o-filter: opacity(60%);
  -o-transition: .25s ease-in-out;
  filter: opacity(60%);
} 

#fb2 {
  -webkit-filter: opacity(100%);
  -webkit-transition: .25s ease-in-out;
  -moz-filter: opacity(100%); 
  -moz-transition: .25s ease-in-out;
  -o-filter: opacity(100%); 
  -o-transition: .25s ease-in-out;
  filter: opacity(100%);
}

#colorbutton1, #colorbutton2, #colorbutton3, #colorbutton4, #woodbutton1, #woodbutton2 {cursor: pointer;}
                
#footermenu{padding:10px 0 10px 0;}

/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup form {/*text-align:center;*/ padding:5px 0 5px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #4CAF50; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#6ec071; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}

input[type=text], select {
    width: 100%;
    padding: 10px 6px;
    margin: 0px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f8f8f8;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
    font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.gallerylink {
    padding: 12px;
    background-color: #404040;
    color: #fff;
    font-family: 'arialregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:120%;
}

.gallerylink:hover {
    background-color: #606060;
}