/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }


a { color: #6C6A68; text-decoration:none;  }
a:visited { color: #6C6A68; }
a:hover { color: #000; text-decoration:none; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0; padding: 0 0 0 15px; list-style:none; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #fff; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{ 
/*    font:16px/26px Helvetica, Helvetica Neue, Arial; */
    font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 1024px;
}

.wrapper{
	width:90%;
	margin:0 5%;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
/* ===================
    ALL: Orange Theme
   =================== */

header{ border-bottom: 2px solid #6C6A68; }
footer{ border-top:    2px solid #6C6A68; }
#main article header{ border:none; }
#title{  width:146px; height:62px; margin-top:5px;}


/* ==============
    MOBILE: Menu
   ============== */

nav a{
	display:block;
	margin-bottom:10px;
	padding:15px 0;

	color:#6C6A68;

	text-align:center;
	text-decoration:none;
	font-weight:bold;
        font: 400 18px/1.3 'Bree Serif',Georgia,serif
}

nav a:visited{
	color:#6C6A68;
}

nav a:hover{
	text-decoration:none;
	color:#000;
}

.links{
    font: 400 16px/1.6 'Bree Serif',Georgia,serif;
}
/* ==============
    MOBILE: Main
   ============== */

#main{
	padding:10px 0;
}

#main article h1{
	font-size:2em;
}

#main article h2{
	font-size:1.5em;
        margin: 1.3em 0;
}

#footer-container footer{
	color:#6C6A68;
	padding:20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }


/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */

h1 {
  font: 400 60px/1.3 'Bree Serif', Georgia, serif;
  letter-spacing: 4px;
}
 
h2 {
  font: 400 48px/1.3 'Bree Serif', Georgia, serif;
  letter-spacing: 4px;
}

p {
  font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
}
.style-italics{
    font-style: italic;
    padding-right: 2px;
}

.projects li a  { text-decoration: none;}
.projects { padding: 0; font: 400 14px/3.0 'Open Sans', Verdana, Helvetica, sans-serif;}
.projects-coffee { font: 400 14px/2.5 'Open Sans', Verdana, Helvetica, sans-serif;}

.reveal { color: #6C6A68; cursor:pointer; }
ul ul { display: none; }

.rslides_container {
    float: left;
    margin-bottom: 50px;
    position: relative;
    width: 100%;
}
   
#slides { border-radius: 5px 5px 5px 5px; margin-bottom: 40px; }
#slides1 { border-radius: 5px 5px 5px 5px; margin-bottom: 40px; }

/* SLIDESHOW
--------------------------------------------- */
  
  .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides img {
  display: block;
  height: auto;
  width: 100%;
  border: 0;
  }

  
/* PAGINATION (you can edit/remove this part)
--------------------------------------------- */

.rslides_tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  }

.rslides_tabs li {
  float: left;
  }

.rslides_tabs a {
  -webkit-tap-highlight-color: rgba(0,0,0,.01);
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  background: #fff;
  cursor: pointer;
  display: block;
  color: #6C6A68;
  width: 44px;
  }

.rslides_here a {
  color: #000;
  }
 
  .callbacks_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  }

.callbacks li:first-child {
  position: relative;
  display: block;
  float: left;
  }
  
.callbacks img {
  display: block;
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  border: 0;
  }

.callbacks .caption {
  display: block;
/*  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);*/
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 0px;
  margin: 0;
  max-width: none;
  }

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0px;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  margin-top: -45px;
  background: transparent url("http://www.folajuo.com/images/themes.gif") no-repeat left top;
  }

.callbacks_nav:active {
  opacity: 1.0;
  }

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0px;
  }
 
.callbacks_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
  margin-top: 10px;
  text-align: center;
  }

.callbacks_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 10px;
  }

.callbacks_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.callbacks_here a,
.transparent-btns_here a,
.large-btns_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }
  
 
  
  
.projects {display: block; border: none;width:100%;}

.clear { clear: both; }
.slidetip {
  
  height: 100%;
  width: 100%;
  line-height: 23px;
  display: none;
  padding: 5px 0 0;
}

#tip{
    text-align: center;
    margin: 30px 0;
}
.click-close{
    font: 400 21px/1.3 'Bree Serif',Georgia,serif;
    text-align: center;
}
.tip{
    background-color: black;
    border: 3px solid #6C6A68;
    color: #FFFFFF !important;
    padding: 15px;
    text-align: center;
}

a.tip:hover{
/*    background-color: #6C6A68;*/
    border: 3px solid #000;
}
.content-contact{
    padding: 0 0 10px;
}
div#content-contact form div.left {
    float: left;
    width: 300px;
}
div#content-contact form div.right {
    float: right;
    width: 610px;
}
div#content-contact form span {
    float: left;
    padding: 0 0 10px;
}
div#content-contact form div.left input {
    border: 1px solid #6C6A68;
    height: 30px;
    margin-bottom: 30px;
	padding-left:10px;
    width: 320px;
}
div#content-contact form div.right textarea {
    border: 1px solid #6C6A68;
    height: 225px;
    overflow: auto;
    padding: 20px;
    width: 500px;
	margin-bottom: 10px;
}

div#content-contact form #submit-button {  
    width: 100px;  
    background-color:#333;  
    color:#FFF;  
    border:none;  
    display:block;  
    float:rightright;  
    margin-bottom:0px;  
    margin-right:6px;  
    background-color:#6C6A68;
	height:30px; 
}  
  
div#content-contact form #submit-button:hover {  
    background-color: #000;  
}  
  
div#content-contact form #submit-button:active {  
    position:relative;  
    top:1px;  
} 

#errors {  
    border:solid 1px #E58E8E;  
    padding:10px;  
    margin:25px 0px;  
    display:block;  
    width:437px;  
    -webkit-border-radius:8px;  
    -moz-border-radius:8px;  
    border-radius:8px;  
    background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;  
    display:none;  
}  
  
#errors li {  
    padding:2px;  
    list-style:none;  
}  
  
#errors li:before {  
    content: ' - ';  
}  
  
#errors #info {  
    font-weight:bold;  
}  
  
#errors #info:before {  
    content: '';  
}  
  
#success {  
    border:solid 1px #83D186;  
    padding:25px 10px;  
    margin:25px 0px;  
    display:block;  
    width:437px;  
    -webkit-border-radius:8px;  
    -moz-border-radius:8px;  
    border-radius:8px;  
    background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;  
    font-weight:bold;  
    display:none;  
}  
  
#errors.visible, #success.visible {  
    display:block;  
}  
.coffee-with{

}

.column-2{
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    font-size: 14px;
    margin: 0 0 14px;
    clear: both;
 }
.intro-title{
  float: left;
    width: 350px;
}
.intro{
  margin:0 0 5px;
}
.intro-img{
  margin:0 0 14px;
}
.coffee-text{
  margin: 0 0 14px;
}
.column-2 p, .coffee-text p{
  font-family: 'Lato', sans-serif;
   margin: 0;
}
.intro-text p{
  font-family: 'Lustria', serif;
  font-size: 200%;
    line-height: 9px;
}
/*.two-column-img{
  //width: 1024px;
  //height: 333px;
}*/
.left{
  float: left;
}
.right{
  float: right;
}
.clear{
  clear: both;
}
/* =============================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
nav ul{ display: none !important; }
header .select-menu   { display: block; }
#title {
    margin: 5px auto 0;
}
.coffee-with .left, .coffee-with .right{
    float: none;
    padding: 0 0 14px;
  }

  .coffee-with .column-2{
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-gap: 0px;
    column-gap: 0px;
    font-size: 14px;
    margin: 0 0 14px;
 }
}
@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */
	
	nav a{
		float:left;
		width:13%;
		margin:0 1.7%;
		padding:25px 2%;
		margin-bottom:0;
	}
	
	nav li:first-child a{ margin-left:0;  }
	nav li:last-child  a{ margin-right:0; }

.coffee-with .left, .coffee-with .right{
    float: none;
    margin: 0 0 5px 0;
  }

/*  .coffee-with .column-2{
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-gap: 0px;
    column-gap: 0px;
    font-size: 14px;
    margin: 2% auto;
 }*/
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li{
		display:inline;
	}	
	.oldie nav a{
		margin:0 0.7%;		
	}

}

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

/* ====================
    WIDE: CSS3 Effects
   ==================== */



/* ============
    WIDE: Menu
   ============ */
	
	#title{
		float:left;
	}

	nav{
		float:right;
		width:61%;
	}
  header .select-menu   { display: none; }

/* ============
    WIDE: Main
   ============ */

	#main article{
/*		float:left;*/
		width:100%;
		position: relative;
		width: 100%;
                margin: 0 0 10px;
	}
  .coffee-with .left, .coffee-with .right{
    float: none;
    padding: 0 0 14px;
  }
/*      .coffee-with .left{
    float: left;
    /*width: 50%;
  }
  .coffee-with .right{
    float: right;
    /*width: 50%;
  }*/
		.coffee-with .left img, .coffee-with .right img {
    height: auto;
    max-width: 100%;
}
.column-2{
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    font-size: 14px;
    margin: 0 0 14px;
 }
  .two-column-img{
  min-width: 690px;
}
}

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

/* ===============
    Maximal Width
   =============== */
   header .select-menu   { display: none; }
	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
		margin:0 auto;
	}
    .coffee-with .left{
    float: left;
  }
  .coffee-with .right{
    float: right;
  }
      .coffee-with .left img, .coffee-with .right img {
    height: auto;
    max-width: 100%;
    }
    .column-2{
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    font-size: 14px;
    margin: 0 0 14px;
 }
 .two-column-img{
  width: 1024px;
  height: 333px;
}
.width50{
  width: 49.3%
}

}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}