@import "../css/kube.css";
@import "../css/fonts.css";
@import "mixins.less";
@import "../css/colorbox.css";
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/*---------------------------------------------------------------------------- 
Variables! (Keep all of them here /w description)
-----------------------------------------------------------------------------*/

@menu-breakpoint: 800px; //Breakpoint for when the Menu Button shows on mobile
@menu-font-color: #fff; // menu font color...
@container-width: 960px; //width of the secondary container
@images: "../images"; // default images
@hover-font-color: #E97C13; // hover font color...

/*---------------------------------------------------------------------------- 
Colors
-----------------------------------------------------------------------------*/

@header-footer:#e3d3b4;
@bgcolor: #f8eed0;
@orange-red:#bd4601;
@orange:#ffa409;
@brown:#693816;


/*---------------------------------------------------------------------------- 
Fonts
-----------------------------------------------------------------------------*/

@onramp: 'Myriad Pro';
@lavanderia:'lavanderia_sturdysturdy';

/*---------------------------------------------------------------------------- 
CUSTOM MIXIN Styles
-----------------------------------------------------------------------------*/

.coverBG(@bgurl) { 
	background-image:url('../images/@{bgurl}');
	background-size:cover;
	background-position:center;
}

.transition(@element, @time, @type){ //For CSS3 Transition animations. 
	transition: @element @time @type;
	-ms-transition: @element @time @type;
	-moz-transition: @element @time @type;
	-webkit-transition: @element @time @type;
}

.navigation(@type,@offset,@imgOffset){
	background-image:url('../images/@{type}');
	background-repeat:no-repeat;
    height:265px;
    width:130px;
    position:absolute;
    top:50%;
    margin-top:-132.5px;
    background-size:100%;
	
	padding-top:80px;

    h6{
    	color:#fff;
    	text-align:left;
    	margin-left:@offset;
    }

    img{
    	margin-left:@imgOffset;
    }
}

/*---------------------------------------------------------------------------- 
Custom Styles (Start Adding CSS Here / Feel free to delete any styles found here)
-----------------------------------------------------------------------------*/

.content{
	padding:15px;
}

h1{
	text-align:center;
	color:@orange;
	line-height:3em;
	font-family:@lavanderia;
	font-size:4em;
	font-weight:100 !important;
}

h6{
	text-align:center;
	color:@orange-red;
	font-family:@onramp;
	font-weight:100 !important;
	font-size:1.2em;
	margin-bottom:0;
	line-height:1em;
}

p{
	text-align:center;
	color:@orange-red;
	font-family:@onramp;
	font-weight:100;
	font-size:1.4em;
}

.centered-content{
	text-align:center;
}

.site-wrap{
	overflow:hidden;
}

.checkout h6{margin-top:24px;}

/*---------------------------------------------------------------------------- 
Header Styles
-----------------------------------------------------------------------------*/

header{
	width:100%;
	height:130px;
	background-color:@header-footer;
	border-bottom:3px solid @brown;
	text-align:center;
	position:relative;
	margin-bottom:280px;

	&:after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		bottom:-10px;
		height:1px;
		background-color:@brown;
		z-index:-1;
	}
}

.logo{
	width:400px;

}


/*---------------------------------------------------------------------------- 
MENU Styles
-----------------------------------------------------------------------------*/
#menu i , #store i{
	color:@brown;
}

#store i{
	font-size:1.2em;
	margin-top:10px;
	margin-bottom:10px;
	display:block;
}

.phone{
	width:50px;
}

.largeh6{
	font-size:2em;
}

#store h6{
	color:@brown;

}

#menu .unit-50{
	margin-left:0;
	min-height:525px;
	padding-top:25px;
	padding-bottom:25px;

	p{
		min-height:3.1em;
		width:325px;
		margin:0 auto;
	}
}

.filling{
	fill:#B16532;
}

.pie{
	width:230px;
	margin:0 auto;
}

h2{
	font-family:@onramp;
	color:@orange-red;
}

.prices{
	color:@brown;
	font-weight:100 !important;
	margin-left:15px;
	margin-bottom:0.3em !important;
}

.price{
	padding-left:5px;
	padding-right:25px;
}
.red{
	color:@orange-red !important;
}

.menu-header{
	width:100%;
	height:162px;
	background-color:@header-footer;
	border-bottom:3px solid @brown;
	text-align:center;
	position:relative;
	z-index:-1;

	&:after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		bottom:-10px;
		height:1px;
		background-color:@brown;
		z-index:-1;
	}
}

.menu-footer{
	background-color:@header-footer;
	width:100%;
	height:129px;
	border-top:3px solid @brown;
	text-align:center;
	margin-top:50px;
}

.menu-container{

	p{
		color:@brown;
	}
}

.store-container{

	p{
		color:@brown;
	}
}

.menu-circle{
	background-color:#f8eed0;
	border:3px solid @brown;
	width:200px;
	height:200px;
	border-radius:50%;
	margin:0 auto;
	margin-top:-50px;
	position:relative;

	h1{
		color:@orange-red;
		font-size:72px;
		text-align:center;
		margin-top:-10px;
	}

	&:after{
		position:absolute;
		content:"";
		top:5px; left:5px; right:5px; bottom:5px;
		border:1px solid @brown;
		border-radius:50%;
	}
}


.site-wrap{
	position:relative;
}

.menu-back{
	display:none;
	i{
		margin-left:25px;
		color:@orange;
	}
}

.store-back{
	display:none;
	i{
		margin-left:40px;
		color:@orange;
	}
}

.page-wrap{
	width:100%;
	position:relative;
	z-index:10;
	transition: transform 0.5s ease-in-out;
	transform:translate(0,0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden; 
	-webkit-transform-style:preserve-3d;
}

#menu{
	width:100%;
	zoom:1;
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	background-color:#111;
	z-index:1;
	background-image:url('../images/bgpattern-menu.svg');
	background-size:5%;
	transform:translate(-100%,0);
	transition: transform 0.5s ease-in-out;
	-webkit-transform-style:preserve-3d;
	-webkit-backface-visibility: hidden;
}

.menu-clicked{
	transform:translate(-130px,0) !important; 
	position:relative !important;
}



.menu-clicked-page{
	transform:translate(100%,0);
	height:100vh;
	position:absolute;
	top:0;bottom:0;

	.store-nav{
		right:-90%;

	}

	.menu-nav{
		left:-130px;
	}
	.menu-nav{
		transition:transform 0.5s ease-in-out;
	}
	.menu-back{
		display:block;
	}

	.menu-home{
		display:none;
	}

}

#store{
	width:100%;
	zoom:1;
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	background-color:#111;
	z-index:1;
	background-image:url('../images/bgpattern-menu.svg');
	background-size:5%;
	transform:translate(100%,0);
	transition:transform 0.5s ease-in-out;
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden; 
	-webkit-transform-style:preserve-3d;
	
}

.store-clicked{
	transform:translate(130px,0) !important;
	position:relative !important;

}

.store-clicked-page{
	transform:translate(-100%,0);

	height:100vh;
	position:absolute;
	top:0;left:0;

	.store-home{
		display:none;
	}

	.store-back{
		display:block;
	}

	.store-nav{
		right:-130px;
	}

	.menu-nav{
		left:-90%;
	}
}

.menu-back-s,.store-back-s{display:none;}

.notrans{
	transition:none !important;
}

.shopping_cart{
	background-color:rgba(227,211,180,0.2);
	text-align:center;
	border:2px solid @brown;

	a{
		font-family:@onramp;
		font-size:1.6em;
		color:@orange-red;
	}

	h2{
		font-family:@onramp;
		font-size:2.2em !important;
	}

	img{
		width:25px;
		margin-top:20px;
	}
}

.wpspsc_checkout_form td{
	text-align:center;
}

.divider{
	padding-left:10px; padding-right:10px;
}

.hide-button{
	display:none;
}
/*---------------------------------------------------------------------------- 
Store Styles
-----------------------------------------------------------------------------*/

.store-svg{
	width:450px;
	padding:20px;
}

.border-bottom{
	padding-bottom:45px;
	border-bottom:2px solid @brown;
}

.baking-padding{
	padding-top:35px;
}

/*---------------------------------------------------------------------------- 
Home Styles
-----------------------------------------------------------------------------*/
#menu a{
	float:none;
}

.menu-nav{
	.navigation('nav-left.svg',38px,30px);
	left:0;
	transition:all 0.5s ease-in-out;
}

.store-nav{
	.navigation('nav-right.svg',50px,42px);
	right:0;
	transition:all 0.5s ease-in-out;
}

.nav-icon{
	width:60px;
}

.button-container{
	text-align:center;
}

input[type=submit]{
	border:0;
	padding:0;
	height:30px;
	margin:0 auto;
	position:relative;
	background-color:@orange-red;
	font-family:@onramp;
	color:@bgcolor;
	padding-left:5px;
	padding-right:5px;
	font-size:1em;
	-webkit-appearance: none;
}

.order-button , .wp_cart_button_wrapper{
	border:0;
	padding:0;
	width:220px;
	height:50px;
	margin:0 auto;
	position:relative;
	background-color:@orange-red;
	font-family:@onramp;
	color:@bgcolor;
	padding-top:13px;
	padding-left:5px;
	padding-right:5px;
	font-size:1.6em;
	
	i{
		font-size:.8em;
	}

	&:hover{
		color:#fff;
	}
	&:before{
		position:absolute;
		content:"";
		left:-14px; top:0; bottom:0;
		width: 0; 
		height: 0; 
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent; 
		border-right:14px solid @orange-red; 
	}

	&:after{
		position:absolute;
		content:"";
		right:-14px; top:0; bottom:0;
		width: 0; 
		height: 0; 
		border-top: 25px solid transparent;
		border-bottom: 25px solid transparent; 
		border-left:14px solid @orange-red; 
	}
}

.wp_cart_button_wrapper{
	padding-top:9px;
}

.cart{
	width:125px;
	height:30px;
	padding-top:6px;
	font-size:1.6em;
	margin-top:10px;
	margin-bottom:10px;

	&:before{
		left:-9.4px;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent; 
		border-right:10px solid @orange-red; 
	}

	&:after{
		right:-9.1px;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent; 
		border-left:10px solid @orange-red; 
	}
}

#store .map-button{
	background-color:@orange;
	color:@orange-red;
	font-size:2.2em;
	padding-top:10px;

	margin-top:15px; margin-bottom:15px;

	i{
		display:inline-block;
		font-size:.45em;
		color:@orange-red;
	}

	&:before{
		border-right:14px solid @orange;
	}

	&:after{
		border-left:14px solid @orange;
	}
}

.baking{
	margin-top:60px;
	width:80px;
	height:80px;
}

.baking-reverse{
	width:120px;
}

.blog-link{
	margin-top:40px;
	background-image:url('../images/blog.svg');
	background-repeat:no-repeat;
    width:265px;
    height:100px;
    background-size:100%;
	text-align:center;
	padding-top:30px;
	margin-left:~"calc(50% - 132.5px)";

    h6{
    	color:#fff;
    	text-align:left;
    	margin-left:60px;
    }

    i{color:@orange;}

}

#page .units-row{margin-bottom:0;}

/*---------------------------------------------------------------------------- 
Footer Styles
-----------------------------------------------------------------------------*/

#footer{
	background-color:@header-footer;
	width:100%;
	height:130px;
	border-top:3px solid @brown;
	text-align:center;

}

.social{
	width:60px;
	display:inline-block;
	margin-left:10px; margin-right:10px; margin-top:30px;
}

/* =Selection
-----------------------------------------------------------------------------*/
.selection(255,255,158);



/*---------------------------------------------------------------------------- 
Default Styles / Typography
-----------------------------------------------------------------------------*/


a{
	text-decoration:none;
}

a:hover{
	color:@hover-font-color;
}

.units-container{
	width:@container-width;
	margin: 0 auto;
}

body {
background-image:url('../images/bgpattern.svg');
background-size:5%;
background-color:@bgcolor;
}

.no-bg{
	background-image:none !important;
}
#page {
	width: 100%;
	margin: 16px auto 0 auto;
}

/*---------------------------------------------------------------------------- 
Blog Page
-----------------------------------------------------------------------------*/
.search-form{
	float:right; 
	clear:both; 
	margin-top:10px;

	input[type="search"]{
		width:160px;
		height:26px;
		padding-bottom:3px;
		margin-bottom:0;
	}

	input[type="submit"]{
		margin-left:-4px;
		height:26px;
	}

}

.search .blog-post{
	margin-top:30px;
}
.screen-reader-text{display:none;}


.units-container.blog-container{
	width:1100px;
	margin:0 auto;
	background-color:@bgcolor;
	box-shadow: #333 1px 0px 10px 1px;
}

.logo-blog{
	width:300px;
	position:absolute;
	top:-125%;
	left:50%;
	margin-left:-150px;
}


.blog-social{
	height:125px;
	width:100%;

	.social{
		float:right;
		width:40px;
		margin-left:5px;
		margin-right:5px;
		margin-top:15px;
	}

	padding-right:20px;
}

.header-blog-wrap{
	position:relative;
	width:100%;
}

header.blog-header{
	background-color:@orange-red;
	width:105%;
	height:85px;
	position:absolute;
	margin-left:-2.5%;
	border:0px;

	&:after{content:none;}
}

.ribbon-wrap{
	width:100%;
	position:relative;
	height:85px;

	&:before,&:after{
		content:'';
		position:absolute;
		height:85px;
		width:50px;
		background-color:darken(@orange-red,10%);
		transform: rotate(45deg);
		z-index:-1;	
	}

	&:before{left:2%; top:35%;}
	&:after{right:2%; top:65%;}
}

nav h6{
	color:@bgcolor;
	float:left;
	margin-left:20px;
	margin-right:20px;
	text-align:left;
}

.blog-tagline-right h6{
	color:@bgcolor;
	float:left;
	margin-left:25px;
	margin-right:25px;
}

.blog-tagline-right{
	position:absolute;
	top:50%;
	right:10%;
	margin-top:-.5em;
}

header.blog-header nav{
	position:absolute;
	top:50%;
	left:2%;
	margin-top:-.5em;	
	width:500px;
}

.blog-row{
	margin-top:250px;
	padding-left:40px;
	padding-right:40px;

	li{list-style-type:none;}
	img{
		box-shadow:#222 1px 1px 1px 1px;
		width:100%;
	}

	h2{
		margin-bottom:0;
	}

	h6,p{
		text-align:left;
	}

	p{
		font-size:1.1em;
		color:@brown;
	}

	a{color:@orange-red;}

}

.blog-feed{
	border-right:2px solid @brown;
	padding-right:20px;
}

.blog-single .blog-feed{
	border-right:0;
}

.blog-sidebar{
	padding-left:20px;
}

.blog-post{
	margin-top:75px;
	padding-bottom:10px;
	border-bottom:3px solid @orange-red;
}

.blog-post:first-child{
	margin-top:0px;
}

.social-blog-post{

	h2{
		color:@bgcolor;
		background-color:@orange-red;
		padding:3px 15px 3px 15px;
		width:105px;
		float:right;
		font-size:1.5em;
		font-weight:100 !important;
	}
}

.catagories{
	width:100%;
	min-height:150px;
	border:1px solid lighten(@brown,5%);
	margin-bottom:35px;

	li{
		font-size:1.6em;
		text-align:center;
		font-family:@onramp;
		font-weight:100;
	}
}

.catagory-header{
	width:100%;
	height:55px;
	background-color:@brown;
	padding-top:10px;
	text-align:center;
	margin-bottom:15px;

	h2{
		color:@bgcolor;
	}
}

.email-signup{
	width:100%;
	min-height:205px;
	border:1px solid lighten(@brown,5%);
	text-align:center;

	p{
		color:@orange-red;
		font-size:1.6em;
		padding-left:40px !important;
		padding-right:40px !important;
		padding-top:20px;
		line-height:1em;
	}

}

.signup-header{
	width:100%;
	height:55px;
	background-color:@orange;
	text-align:center;
	padding-top:10px;
}

.map-sidebar{
	width:100%;
	height:390px;
	border:1px solid lighten(@brown,5%);
	margin-top:35px;
	background-color:#fff;
	text-align:center;
}

.map-header{
	width:100%;
	height:55px;
	background-color:@brown;
	text-align:center;
	padding-top:10px;

	h2{color:@bgcolor;}
}

.map{width:100%; height:280px; padding-right:1px; margin-bottom:17px;}

.map-button{
	width:150px;
	padding:10px 15px 10px 15px;
	background-color:@orange;
	color:@orange-red;
	margin:0 auto;
	font-family:@onramp;
	font-size:1.4em;
	text-align:center;
	margin-top:20px;
}

input[type="email"]{
	height:25px;
	width:60%;
	background-color:#c6ae8f;
	border:none;
	padding:0;
	padding-left:10px;
	color:@brown;
	font-family:@onramp;
	font-size:1.2em;
	margin-bottom:10px;	
}

input[type="search"]{
	height:25px;
	width:60%;
	background-color:#c6ae8f;
	border:none;
	padding:0;
	padding-left:10px;
	color:@brown;
	font-family:@onramp;
	font-size:1.2em;
	border-radius:0;
	margin-bottom:10px;	
}

button[type="submit"]{
	height:25px;
	border:none;
	background-color:@orange-red;
	color:@bgcolor;
	font-family:@onramp;
	font-size:1.2em;
	padding:0;
	padding-left:5px; padding-right:5px;
}

::-webkit-input-placeholder {
   color: @brown;
   font-family:@onramp;
   font-size:1em;
}

:-moz-placeholder { /* Firefox 18- */
   color: @brown;
   font-family:@onramp;
   font-size:1em;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: @brown;
   font-family:@onramp;
   font-size:1em;  
}

:-ms-input-placeholder {  
   color: @brown;
   font-family:@onramp;
   font-size:1em;  
}

.share{
	float:left;
}

.blog-single p{
	font-size:1.3em;
	font-weight:100;
}

//COMMENTS SECTION

.comments-section{
	clear:both;
	display:block;
	margin-top:60px;

	textarea{width:100%; display:block; margin-bottom:8px;}
	input[type="text"],input[type="email"],input[type="url"]{width:100%; display:block; margin-bottom:8px;}
}

.vcard img{display:none;}

.form-allowed-tags{display:none;}

.comment-reply-title{color:@orange-red; font-family:@onramp; font-weight:100; margin-bottom:0;}

.vcard{
	color:@orange-red;
	font-family:@onramp;
	font-size:1.6em;
}

.comment-metadata{
	font-size:1.1em;
	font-family:@onramp;
}

.comment-reply-link{
	font-family:@onramp;
}

.comments-section p{
	margin-bottom:0;
}

.comment-body{
	margin:10px;
}

.comment.parent , .comment.depth-1{
	border-bottom:2px solid @orange;
}

ol{margin:0 0 0 0;}

.children{margin-left:3em;}

.comment-respond{
	margin-top:20px;
}

body.page-id-95{background-image:url('../images/bgpattern-menu.svg');}

/*---------------------------------------------------------------------------- 
Media Queries
-----------------------------------------------------------------------------*/


@media screen and(max-width:1200px){
	#menu{
		padding-left:130px;
	}

	#menu .units-container{
		width:100%;
	}
}

@media screen and(max-width:1190px){
	.page-wrap p{
		padding-left:135px;
		padding-right:135px;
	}

	.blog-container p{
		padding-left:0; padding-right:0;
	}
}

@media screen and (max-width:1160px){
	.ribbon-wrap:before , .ribbon-wrap:after{content:none;}
	header.blog-header{width:100%; margin-left:0;}
}
@media screen and(max-width:960px){
	#store .units-container{
		width:80%;
		margin:0;
		padding:20px;
	}
}

@media screen and (max-width:880px){
	nav h6{
		float:none;
		text-align:left;
		margin-left:5px;
	}

	header.blog-header nav{top:20px;}

	.blog-tagline-right{display:none;}
}

@media screen and(max-width:800px){
	
	.blog-feed{border-right:none; padding-right:0;}
	.blog-sidebar{padding-left:0; margin-top:65px;}

	.menu-back-s{
		position:absolute;
		top:70px;
		right:15px;
		text-align:center;
		display:block;

		i{color:@orange !important; font-size:32px !important;}

		h6{color:@brown !important; font-size:18px !important;}
	}

	.store-back-s{
		position:absolute;
		top:70px;
		left:15px;
		text-align:center;
		display:block;

		i{color:@orange !important; font-size:32px !important;}

		h6{color:@brown !important; font-size:18px !important;}
	}

	#menu{
		padding-left:0;
	}


	#store .units-container{
		margin:0 auto;
	}
	.page-wrap p{
		padding-left:15px;
		padding-right:15px;
	}

	.page-wrap .blog-container p{
		padding-left:0; padding-right:0;
	}
	
	.logo{
		width:200px;
		margin-top:30px;
	}

	header{
		margin-bottom:125px;
	}

	.menu-nav{
		top:180px;
		height:65px;
		width:65px;
		padding-top:20px;
		background-image:none;
		transition:none;
		.menu-home{
			padding-left:15px;
		}

		img{
			margin-left:1px;
			width:45px;
		}

		h6{
			margin-left:6px;
			color:@orange-red;
			font-size:1.2em;
		}

		i.fa-5x{
			font-size: 2.5em;
			margin-top:10px; margin-left:7px;
		}	
	}

	.store-nav{
		top:180px;
		height:65px;
		width:65px;
		padding-top:20px;
		background-image:none;
		transition:none;
		img{
			margin-left:20px;
			width:45px;
		}
	
		.store-home h6{
			margin-left:23px;
		}

		.store-home{
			padding-right:25px;
		}
		h6{
			margin-left:28px;
			color:@orange-red;
			font-size:1.2em;
		}

		i.fa-5x{
			font-size: 2.5em;
			margin-top:10px; margin-left:29px;
		}	
	}

	.page-wrap{
		overflow:visible;
	}
	


	.menu-clicked{
		transform:translate(0,0) !important;
		opacity: 1 !important;
	}


	.store-clicked{
		transform:translate(0,0) !important;
		opacity: 1 !important;
	}

	.store-clicked-page{
		.store-nav{
			display:none;
		}
	}

	.menu-clicked-page{
		.menu-nav{
			display:none;
		}
	}
}

@media screen and(max-width:550px){
	.logo-blog{
		width:150px;
		top:-50%;
		margin-left:-75px;
	}

	.blog-row{margin-top:150px;}
}

@media screen and(max-width:405px){
	.logo-blog{width:125px; margin-left:-62.5px;}
}
@media screen and(max-width:400px){
	.social{
		width:30px;
	}
}

/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: @container-width) {
    .units-container{
    	width: 100%;
    }
}

@media only screen and (max-width: 600px){
	.units-container.blog-container{
		width:100%;
	}
}


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

	.testhead{
		height:250px;
	}

	.menu-nav h6 {
	  margin-left: 33px!important;
	}

	.store-nav h6 {
	  margin-left: 40px!important;
	}

	.blog-link h6 {
	  margin-left: 41px!important;
	}


	.social-blog-post h2 {
	  width: 135px !important;
	}


	h6 {
	  margin-top: 0!important;
	}

}




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

	.testhead{
		height:250px;
	}

	.menu-nav h6 {
	  margin-left: 0px!important;
	}


	.store-nav h6 {
	  margin-left: 0px!important;
	}

	.blog-link h6 {
	  margin-left: 31px!important;
	}


	.social-blog-post h2 {
	  width: 135px !important;
	}

	.search-form{
		display:none;
	}


	h6 {
	  margin-top: 0!important;
	}



}





html .search-form input[type="search"] {
  padding-bottom: 0!important;
  margin-top:2px;
}

html .blog-link h6 {
  margin-left: 64px !important;
}
html .blog-link h6 {
  font-size: 1em !important;
}