/* CSS TABLE OF CONTENTS
=====================================
	#BASE CSS
	#SITE-SPECIFIC CSS
===================================== */ 


/* 
===================================== 
========== BEGIN BASE CSS ===========
=====================================
*/
/*
TWO LOGOS AND STICKY NAV BAR ETC.
These defines Logo on the page top and the logo on the nav.
The class stack of the header and logo.

header {
	padding: .5em 0;
	background: #000;
}

header.stuck {
	position: fixed;
	width: 100%;
	padding: .5em 0;
	background: #000;
}

header.stuck .logo {
	display: block;
}

header .logo {
	display: none;
}
 */


/* BASE CSS (Initital Base Setup)
Description: "Base" css is an initial set of core
styles that can be used (and reused) as a start 
for most sites. It should be placed at the top so
it can be over-written by site-specific styling
below. 
=====================================
	#RESET
	#HTML5
	#BASE TYPOGRAPHY
		#BODY
		#HEADINGS
		#PARAGRAPHS
		#LINKS
		#LISTS
	#IMAGES
	#CLEARFIX
===================================== */


/* #RESET
================================================== */  
* {
	margin: 0;
	padding: 0;
}

/* #HTML5
================================================== */
header, section, footer, aside, nav, article, figure {
	display: block;
}

/* #BASE TYPOGRAPH2

================================================== */

/* #BODY */
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%; /* 1em = 16px */
	line-height: 1.5em; /* 16px x 1.5em = 24px */
	color: #333;
	
/*phto in footer
    background-image: url("assets/images/DSCN3227-3.jpg");
    background-repeat: repeat;
    background-position: center bottom;
 */
	
}

/* #HEADINGS 
Based on a Traditional Typographic Scale: 
48, 36, 24, 21, 18, 16
================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: .5em;
}

h1 {
	font-size: 3em; /* 48px / 16px = 3em */
	line-height: 1em; 
}

h2 {
	font-size: 2.25em; /* 36px / 16px = 2.25em */
	line-height: 1.1em;
}

h3 {
	font-size: 1.5em; /* 24px / 16px = 1.5em */
	line-height: 1.2em;
}

h4 {
	font-size: 1.3125em; /* 21px / 16px = 1.3125em */
	line-height: 1.3em;
}

h5 {
	font-size: 1.125em; /* 18px / 16px = 1.125em */
	line-height: 1.4em;
}

h6 {
	font-size: 1em; /* 16px / 16px = 1em */
	line-height: 1.5em;
}


/* My R- and L- lines for each H1 title
==================================================
h1.lined {
	position: relative;
}

h1.lined span:after {
	position: absolute;
	top: .6em;
	left: 0;
	content: "";
	width: 100%;
	border-top: 1px solid #000;
  	z-index: 0;
}
h1.lined span {
 	background: #0a0;
  	padding: 0 80px;
  	text-align : center; 
}
Took about on 11/24 */
/*
h1+* {
  border-top: solid 2px #000;
  padding-top: 28px;
  margin-top: -28px;s

}
*/


/**
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 */

h1 {
    font: 33px sans-serif;
    margin-top: 30px;
	margin-bottom: 150px;
    text-align: center;
    text-transform: uppercase;
}

h1.background {
    position: relative;
    z-index: 1;
}
    
h1.background:before {
    border-top: 1px solid #000000;
    content:"";
    margin: 0 auto; 
    position: absolute; 
    top: 50%; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

h1.background span { 
    /* to hide the lines from behind the text, you have to set
     the background color the same as the container */ 
    background: #fff; 
    padding: 0 40px; 
}

#about_reiko p {
	text-align: left;
	color:#777; 
}


/*
h1.double:before { 
    border-top: none; 
}

h1.double:after {
    border-bottom: 1px solid blue;
    -webkit-box-shadow: 0 1px 0 0 red;
    -moz-box-shadow: 0 1px 0 0 red;
    box-shadow: 0 1px 0 0 red;
    content: "";
    margin: 0 auto; 
    position: absolute;
    top: 45%; left: 0; right: 0;
    width: 95%;
    z-index: -1;
}

h1.no-background {
    position: relative;
    overflow: hidden;
    
    span {
        display: inline-block;
        vertical-align: baseline;
        zoom: 1;
        *display: inline;
        *vertical-align: auto;
        position: relative;
        padding: 0 20px;

        &:before, &:after {
            content: '';
            display: block;
            width: 1000px;
            position: absolute;
            top: 0.73em;
            border-top: 1px solid red;
        }

        &:before { right: 100%; }
        &:after { left: 100%; }
    }
}

h1.no-span {
    display: table;
    white-space: nowrap;
    &:before, &:after {
      border-top: 1px solid green;
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 45%;
    }
    &:before { right: 1.5%; }
    &:after { left: 1.5%; }
} 
*/
/* #Paragraphs 
================================================== */
p { 
	margin-bottom: .5em; 
}


/* #Links
================================================== */
a { color: #39c; text-decoration: none; }
a:visited, a:hover, a:focus { color: #069; }


/* #Lists
================================================== */
ul, ol {
	margin-bottom: .5em;
}

ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}

li {
	margin-left: 1.875em;
}


/* #Images
================================================== */
#top img.scale-with-grid {
	max-width: 300em;
	/*max-width: 45%;*/
	height: auto; 
}

img.scale-with-grid {
	max-width: 100%;
	height: auto; 
}

img.scale-with-grid {
	max-width: 100%;
	height: auto; 
}


/*img.scale-with-grid {
	max-width: 359px;
	height: 479px; 
}*/


a img {
	border: none;
}


/* #CLEARFIX
================================================== */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/* 
===================================== 
=========== END BASE CSS ============  
===================================== 
*/


/* 
===================================== 
===== BEGIN SITE- SPECIFIC CSS ======
===================================== 
*/
   
/* SITE-SPECIFIC CSS (Site-Specific Design)
Description: "Site-specific" css is where all
site-specific visual design styles. Site-specific
css should be placed on the bottom to 
override any base styling above it. 
=====================================
	#SITE-SPECIFIC BASE STYLING
	#SITE-SPECIFIC TYPOGRAPHY
	#LAYOUT/GRID
	#SECTIONS
	#MEDIA QUERIES
	#@FONT-FACE
===================================== */

/* SITE-SPECIFIC BASE STYLING
Description: Adjust general base settings above with 
site-specific styles here. 
(e.g. body background color)
===================================== */


/* SITE-SPECIFIC TYPOGRAPHY
Description: Adjust the base typography settings above 
with site-specific styles here. 
(e.g. headings, paragraphs, colors, etc.)
===================================== */



/* LAYOUT/GRID
Description: Place grid and visual layout styling here. 
(e.g. containers, rows, columns)
===================================== */
.container {
	/* Fixed width: 960px */
    width: 60em; /* 960px / 16px (base) = 60em  */
	margin: 0 auto;
}

section {
	padding: 6em 0;
}

.row { /* between rows of photos */
	margin: 0;
}

.column {
	float: left;
	margin: 0 1%;
}
.one-whole.column {	width: 96%; }
.one-half.column {	width: 48%; 
}
.one-half.column img {
	align:right;
/*	border: 1px solid red;*/ 
}
.one-third.column {	width: 29.3333%; }

.column.right {
	text-align: right;
}

/* SECTIONS
Description: Style major site sections here. 
(e.g. header, navs/navigation, site-specific content sections, 
asides, sidebars, footer, sub page-specific styling, etc.)
===================================== */

header {
	/*position: fixed;
	width: 100%;*/
	padding: .5em 0;
	background: #000;
}

header.stuck {
	position: fixed;
	width: 100%;
	top: 0; /* move to the top of page when it stucks */
	z-index: 100;
	}

header a,
header a:visited, 
header a:focus  {
	color: #fff;
}

header .logo a {
	float: left;
	display: none;
}

header.stuck .logo a {
	display: inline;
}

header .logo a img {
	display: block;
	margin-right: 10px;
}

header .logo h1 {
	font-size: 1em;
	line-height: 1.4em;
	margin: 0;
	padding-top: .2em;
	white-space: nowrap;
}

#head_logo {
	background: #fff;
	margin: 0;
	padding:0;
	}
	
#mainnav {
	float: right;
}

#mainnav ul {
	text-align: right;
	margin: 0;
}

#mainnav ul li {
	display: inline-block;
	margin: 0;
}

#mainnav ul li a {
	display: inline-block;
	padding: 0 1em;
}

#mainnav ul li a:hover {
	color: #ccc;
}

/*added for under line of selected on 1202*/
#mainnav ul li a:active {
	border-bottom:0.5em solid #fff;
}

#mainnav #menu {
    display: none;
    padding: .8em 1.5em;
    cursor: pointer;
}

section h1 {
	text-align: center;
}

section p {
	text-align: center;
	padding-bottom: 10em;
}

section#about {
	background: #fff;
}

section#gallery {
	background: #fff;
}

section#contact {
	background: #fff;
	padding-bottom: 0em;
	text- Centering
}

section#contact section {
	margin-bottom: 0em;
	padding-bottom: 0em;
}

section#contact img {
	margin-bottom: 0;
	padding: 0;
}

footer {
	position: fixed;
	bottom:0;
	width: 100%;
	text-align: center;
	font-size: .8em;
	color: #fff;
	padding: .5em 0;
	background: #000;
	z-index: 100;
}

footer a,
footer a:visited, 
footer a:focus  {
	color: #fff;
}


#footernav ul {
	text-align: center;
	margin: 0;
}

#footernav ul li {
	display: inline-block;
	margin: 0;
}

#footernav ul li a {
	display: inline-block;
	padding: 0 1em;
}

#footernav ul li a:hover {
	color: #ccc;
}

/* MEDIA QUERIES
Description: Define screen-size breakpoints here.
(e.g. Desktop, Tablet, Mobile)
===================================== */

/* Tablet (Between 768px - 992px)*/
@media all and (min-width: 48em) and (max-width: 62em) {
	
	body {
		font-size: 93.75%; /* 15px */
	}
	
	.container {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	/* Logo max-width goes 100% */
	#top img {
		max-width: 100%;
		height: auto; 
	}
	
	/* Centering Gallery */
	#gallery img {
	}
}

/* MOBILE (Smaller than 768px)*/
@media all and (max-width: 47.9999em) {
	
	body {
		font-size: 87.5%; /* 14px */
	}
	
	.container {
		width: 96%;
		margin: 0;
		padding: 0 2%;
	}
	
	
	.column {
		float: none;
		margin: 0;
	}
	
	.one-whole.column,
	.one-half.column,
	.one-third.column {	width: 100%; }

	.column.right {
		text-align: left;
	}
    #mainnav #menu {
        display: block;
		color: #fff;

    }

    #mainnav ul {
        display: none;
        background: #666;
        padding: 1em;
        text-align: right;
    }
	
    #mainnav ul li {
        display: block;
    }

    #mainnav ul li a {
        display: block;
        padding: 0;
    }

	/* Logo max-width goes 100% */	
	#top img.scale-with-grid {
	max-width: 100%;
	height: auto; 
	}
}


/* @FONT-FACE (Webfonts)
===================================== */


/* 
===================================== 
====== END SITE- SPECIFIC CSS =======
===================================== 
*/