/**
 * FHUNG artistmade CSS 
 responsive Stylesheet
 *
 */

@import url('http://fonts.googleapis.com/css?family=Satisfy');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, bigtext, cite, code, del, dfn, em, img, ins, kbd, navi, 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, title, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, navi, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { overflow-y: scroll; }

body {
  font-size: 62.5%;
  line-height: 1.6;
  font-family: Avenir, Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #734020;
  padding: 45px 25px;
  padding-bottom: 100px;
}


br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }


h1 {
  font-family: 'Satisfy', Avenir, Avenir Next, Tahoma, sans-serif;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.55em;
  margin-bottom: 18px;
  text-align: center;
  color: #44696F;
  letter-spacing: 2;
}


h2 {
  font-family: 'Satisfy', Avenir, Avenir Next, Tahoma, sans-serif;
  font-size: 2em;
  line-height: 1.55em;
  margin-bottom: 10px;
  text-align: center;
  color: #44696F;
  letter-spacing: 2;
}


p {
  margin: 2em;
  font-family: Avenir, Avenir Next, Tahoma, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.5em;
  text-align: justify;
  color: #886633;
  margin-bottom: 10px;
}


.center {
  text-align: center;
  }


.title1satisfy {
	font-size: 1.8em;
	font-family: 'Satisfy', cursive;
	font-weight: normal;
	color:  #44696F;
	letter-spacing: 2;
	}


.bigtext {
  font-family: Avenir, Avenir Next, Tahoma, sans-serif;
  font-size: 1.7em;
  font-weight: normal;
  line-height: 1.55em;
  text-align: center;
  color: #886633;
}


/** header navigation **/

#header {
  display: block;
  max-width: 800px;
  float: center;
  margin-bottom: 30px;
}


.navi {
  font-family: Avenir, Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 2em;
  font-weight: light;
  line-height: 1.5; 
  letter-spacing: 2; 
  color: #886633;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


.navi2 {
  font-family: Avenir, Avenir Next, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.80em;
  font-weight: light;
  line-height: 1.5; 
  letter-spacing: 3; 
  color: #af9e82;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


.small {
	font-family: Avenir Next, Avenir, Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	}
	
.tiny {
	font-family: Avenir Next, Avenir, Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.5em;
	color:  #A6A893;
	}
	
.teal {
	 color: #276370;
	 }	
	
.fam {
	 font-family: Avenir Next, Avenir, Tahoma, Arial, Verdana, sans-serif;
	 font-size: 1.3em;
	 color: #276370;
	 }	



a img {border: none; }

a:link, ul li a {
	color: #A6A893;
	font-weight: normal;
	font-style: regular;
	text-decoration: none;
	}
 
a:visited {
	color: #A6A893;
	font-weight: normal;
	font-style: regular;
	text-decoration: none;
	}

a:hover, ul li a:hover {
	color: #800000;
	}

a:active {
	color: #BC8F8F;
	}




/** page structure **/
#wrapper {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}


#plate {
  display: block;
  max-width: 770px;
  margin: 0 auto;
}


#portfolio {
  display: block;
}

#portfolio li {
  display: block;
  float: left;
  width: 30%;
  max-width: 400px;
  margin-left: 20px;
  margin-bottom: 20px;
}

#portfolio li a {
  display: block;
  padding: 8px;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}

#portfomini li {
  display: block;
  float: left;
  width: 25%;
  max-width: 150px;
  margin-left: 20px;
  margin-bottom: 10px;
}

#portfomini li a {
  display: block;
  padding: 3px;
  background: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}



.mfp-title {
  font-size: 1.5em;
  color: #ddd !important;
  font-weight: 700;
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


/** media queries **/
@media screen and (max-width: 780px) {
  #portfolio li {
    width: 45%;
  }
}

@media screen and (max-width: 550px) {
  #portfolio { 
    text-align: center;
  }
  
  #portfolio li {
    float: none;
    display: inline-block;
    width: 80%;
    margin-bottom: 30px;
  }
}