/*----- credits -----*/
/* http://virtualredhead.com */

/*----- imports -----*/
@import url("reset.css"); /* meyer html5 reset */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); /* google web fonts */
@import url(http://fonts.googleapis.com/css?family=Felipa);
@import url(http://fonts.googleapis.com/css?family=Glegoo);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,100,600,700,200);





/*----- typography -----*/
html, body, text-area {
font-family: 'Raleway', 'Arial', 'Helvetica', sans-serif;
font-size:20px;
line-height: 1.4;
color:#555;
letter-spacing:0.05em;}

h1 {
display:block;
font:100 4em/1 'Raleway';
color:#ccc;

}

h2 {
font:600 .875em/1.5 'Arial';
letter-spacing:0.05em;
text-transform:uppercase;
}

a:link, a:visited {text-decoration: none; color:#fff;}
a:hover {color:#aaa;}
a:active {color:#000;}

.no-break {white-space: nowrap;}
p, ul {margin-bottom: 1em;}
ul {margin-bottom: 2em;}
footer {font-size:.875em; color:#A6A8AB;}
hr {display:none;}

.fa span{text-indent:-9999px; display:none;}

/*----- branding -----*/

#header {
background:#eee;
position:relative;
margin:auto;
text-align:center;
padding:3em;
}

.site-title {
display:block;
padding-bottom:.5em;
}

.tagline {
}

.tagline span {
color:#fff;
display:block;
}

/*----- structure -----*/

body {
background: #fff;
}

.wrapper {
max-width:;
margin:auto;
}

.section {
height:800px;
text-align:center;
border-bottom:1px solid #ddd;
}

.section-content{
}

.region > .inner {
max-width:600px;
margin:auto;
padding:0 2em;
}

.col-container {overflow:auto;}
.col {width:30%; display:block; float:left; border:1px solid; min-height:200px;}

img {
max-width:100%;
height:auto;
}

/*----- menu-----*/

#menu-buttons{
position:fixed;
top:0;
right:0;
text-align:right;
}

#menu {
display:block;
position:fixed;
right:0;
top:0;
height:500px;
width:100%;
height:100%;
background:#fff;
opacity:.9;
overflow:auto;
}

#menu ul{
padding:4em 2em 2em;
box-sizing:border-box;
text-align:center;
}

#menu li{
display:inline-block;
margin:.5em;
background-size:auto 100%;
text-align:center;
text-indent:-9999px;
}

#menu li a{
display:block;
height:60px;
width:60px;

background-size:100% auto;
text-align:center;
text-indent:-9999px;
border:1px solid #fff;
}

#menu li a:hover{
border:1px solid #ddd;
box-sizing:border-box;
}

#apple-link{
background:url(../img/Apple.png) right center no-repeat;
}

#avocado-link{
background:url(../img/Avocado.png) right center no-repeat;
}

#banana-link{
background:url(../img/Banana.png) right center no-repeat;
}

#burger-link{
background:url(../img/Burger.png) right center no-repeat;
}

#cake-link{
background:url(../img/Cake.png) right center no-repeat;
}

#carrots-link{
background:url(../img/Carrots.png) right center no-repeat;
}

#cuppa-joe-link{
background:url(../img/CuppaJoe.png) right center no-repeat;
}

#cantelope-link{
background:url(../img/Cantelope.png) right center no-repeat;
}

#egg-link{
background:url(../img/Egg.png) right center no-repeat;
}

#eggplant-link{
background:url(../img/Eggplant.png) right center no-repeat;
}

#grapes-link{
background:url(../img/Grapes.png) right center no-repeat;
}

#hotdog-link{
background:url(../img/Hotdog.png) right center no-repeat;
}

#ice-cream-link{
background:url(../img/IceCream.png) right center no-repeat;
}

#orange-link{
background:url(../img/Orange.png) right center no-repeat;
}

#pear-link{
background:url(../img/Pear.png) right center no-repeat;
}

#peach-link{
background:url(../img/Peach.png) right center no-repeat;
}

#peas-link{
background:url(../img/Peas.png) right center no-repeat;
}

#pepper-link{
background:url(../img/Pepper.png) right center no-repeat;
}

#pie-link{
background:url(../img/Pie.png) right center no-repeat;
}

#pizza-link{
background:url(../img/Pizza.png) right center no-repeat;
}

#pomegranate-link{
background:url(../img/Pomegranate.png) right center no-repeat;
}

#sriracha-link{
background:url(../img/Sriracha.png) right center no-repeat;
}

#sushi-link{
background:url(../img/Sushi.png) right center no-repeat;
}

#taco-link{
background:url(../img/Taco.png) right center no-repeat;
}

#watermelon-link{
background:url(../img/Watermelon.png) right center no-repeat;
}


#menu-buttons .button{
float:right;
clear:right;
display:block;
font-size:1.25em;
padding:.5em;
margin-bottom:2px;
background:#555;
border-radius:.25em 0 0 .25em;
color:#fff;
opacity:.5;
cursor:pointer;
z-index:4;
position:relative;
}

#menu-buttons .button:hover{
background:blue;
padding-right:1em;
transition:padding .25s;
}

#menu-buttons .open{
border-radius:0;
background:blue;
width:100%;
transition: width .5s, background .5s;

}

#next-button{
background:#ccc;
width:3em;
height:3em;
position:fixed;
bottom:1em;
left:50%;
}

/*----- footer -----*/


/*----- media queries -----*/

@media all and (max-width:520px){
	body {font-size:1.15em;}
}