/* Template - Avant-Garde Solutions */

/* Reset Default values */

html, body {
	width:100%;
	height:100%;
}

body {
	background: #f9f9f9;
	color:#5e033b;
	font-size:20px;
	font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4 {
	color:#5e033b;
	font-weight: bold;
	font-size:1.1rem;
}
h1 {font-size:3rem;font-family: 'Cookie', cursive;}
h2 {font-size:2rem;}
h3 {font-size:1.5rem;}
h4 {font-size:0.75rem;color: #4a4b4c;}
p  {font-size: 1rem; color: #4a4b4c;line-height: initial;}

a {color:#4a4b4c;}
a:hover {color:#5e033b;}
a, a:hover {text-decoration: none;}
section { position:relative; padding: 2rem;}
input:focus  { outline:none; }

header {margin: 1rem auto;padding: 2rem;}
header a {margin: 0 0 0 1rem;}
header img {width:50px;vertical-align: middle;margin-top: -10px;margin-right: 10px;}
header .centered {border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 1rem;}

.transition.s0-1{-o-transition:.1s;-ms-transition:.1s;-moz-transition:.1s;-webkit-transition:.1s;transition:.1s;}
.transition.s0-3{-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.transition.s0-4{-o-transition:.4s;-ms-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s;transition:.4s;}
.transition.s0-5{-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}
.transition.s0-6{-o-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;-webkit-transition:.6s;transition:.6s;}
.transition.s0-75{-o-transition:.75s;-ms-transition:.75s;-moz-transition:.75s;-webkit-transition:.75s;transition:.75s;}
.transition.s0-8{-o-transition:.8s;-ms-transition:.8s;-moz-transition:.8s;-webkit-transition:.8s;transition:.8s;}
.transition.s1{-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;transition:1s;}
.transition.s1-5{-o-transition:1.5s;-ms-transition:1.5s;-moz-transition:1.5s;-webkit-transition:1.5s;transition:1.5s;}
.transition.s2{-o-transition:2s;-ms-transition:2s;-moz-transition:2s;-webkit-transition:2s;transition:2s;}
.transition.s2-5{-o-transition:2.5s;-ms-transition:2.5s;-moz-transition:2.5s;-webkit-transition:2.5s;transition:2.5s;}
.transition.s3{-o-transition:3s;-ms-transition:3s;-moz-transition:3s;-webkit-transition:3s;transition:3s;}


/* General classes */

.debug {visibility: hidden;}

.mapper{width:100%;height:100%;position:relative;}
.mapper.centered{position:absolute;top:50%;left:50%;}
.mapper.origin{position:absolute;top:0;left:0;}
.mapper.tabler{display:table;}
.mapper.celler{display:table-cell;vertical-align:middle;text-align:center;}
.mapper.cropper{overflow:hidden;}

.clearfix{clear:both;height:0;overflow:hidden;}
.nulist{margin:0;padding:0;list-style-type:none;}

.centered {margin:0 auto;width:1000px; height:100%;}
.visible {z-index:10;opacity:1;}
.hidden {z-index:-10;opacity:0;}

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

.half-width, .third-width {
	display:inline-block;
	/*outline:1px solid red;*/
    vertical-align: middle
}

.half-width  {width:50%;}
.third-width {width:33.333333%;}
.row {margin : 3rem auto;}
.row .half-width, .row .third-width {vertical-align: top;}
.row p {padding: 1rem 4rem 1rem 0rem;}

.screenshot {width:100%;display: block;margin: 0 auto;}


/*SECTIONS*/

#hero p {font-size: 2rem;color:#f9f9f9;}
#hero {
	background: url("../images/background-food.jpg") no-repeat center center fixed; 
  	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
}
.overlay {position:absolute;top:0;left: 0;width:100%;height:100%;background-color: rgba(1, 1, 1, 0.5);z-index: 1;}
#hero .centered {position: relative;z-index: 100;}

@media screen and (max-width: 1000px) {.centered {width:100%;} header, section {padding: 1rem;} .row {margin : 2rem auto;}}
@media screen and (max-width: 600px)  {.half-width, .third-width {width:100%;}}

/* View-models - Week */

ol.week {list-style-position: inside;margin-left: 0;}
.day {
	list-style-type: none;
	border: 1px solid #bbb;
	padding: 1rem;
	list-style-position: inside;
	margin: 0.3rem 0;
	border-radius: 2px;
	position: relative;
}
div.day-section {display: inline-block;}
div.day-number {width:100px;}
div.day-title {width: calc(100% - 200px- 2rem);word-wrap: break-word;}
div.day-title.day-empty { color: #ccc; font-style: italic;}
div.day-link {width:100px;}
div.day-image {
	height: 150px;
	width: 150px;
	background-size:contain;
}

div.day-image img {max-width: 100%;max-height: 100%; overflow: hidden;}

/* View-models - Groceries */
.controls {margin: 0.5rem 0;}
.controls button {margin-right: 0.5rem;}

ol.groceries {list-style-position: inside;margin-left: 0;}
.grocery-item {
	list-style-type: none;
	border: 1px solid #bbb;
	padding: 0.5rem 1rem;
	list-style-position: inside;
	margin: 0.3rem 0;
	border-radius: 2px;
	position: relative;
	cursor: pointer;
}
.grocery-item.completed {text-decoration: line-through;color:#ccc;}
.grocery-item:hover {background-color: #eee;}