/*!
 *
 *	fabrik.grid
 *
**/


@import 'base.css';
@import 'grid.css';

@import url(http://fonts.googleapis.com/css?family=Rosarivo:400,400italic);

@font-face {
  font-family: "delichina";
  src:url("../fonts/delichina.eot");
  src:url("../fonts/delichina.eot?#iefix") format("embedded-opentype"),
    url("../fonts/delichina.woff") format("woff"),
    url("../fonts/delichina.ttf") format("truetype"),
    url("../fonts/delichina.svg#delichina") format("svg");
  font-weight: normal;
  font-style: normal;

}

[class^="icon-"]:before,
[class*=" icon-"]:before,
.owl-prev:before,
.owl-next:before {
  font-family: "delichina" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-right:before,
.owl-prev:before {
  content: "a";
}
.icon-left:before,
.owl-next:before {
  content: "b";
}


body 															{ color: #333; font: 100%/1.5em 'Rosarivo', serif; background: #e5dec7; background-image: url('../images/bg-body.jpg'); background-size: cover; background-attachment: fixed; margin: 0; padding: 0; }



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

	h1, .h1 													{ font-size: 2em; line-height: 1em; }
	h2, .h2 													{ font-size: 1.7em; line-height: 1em; }
	h3, .h3 													{ font-size: 1.2em; margin-bottom: 0; }
	h4, .h4 													{ font-size: 1em; margin: 1em 0 0 0; }
	h5, .h5 													{  }
	h6, .h6 													{  }

	.header-varjolla											{ color: #fff;text-shadow: 0px 2px 2px rgba(0,0,0,.5); }

	h1, .h1,
	h2, .h2,
	h3, .h3,
	h4, .h4,
	h5, .h5,
	h6, .h6 													{  }

	a 															{ color: #602076; text-decoration: underline; }

	p 															{ margin: 0 0 1em; }
	.white														{ color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,.5); }
	.black 														{ background-color: #000 !important; }


	/*
		Clear löytyy base.css fileestä

		Käytä esim. wrappavassa elementissä
		jonka sisällä floattaa tavaraa ->

		<div class="cf"><!-- 1-2-3 clear! --> 
			<div class="float-left"></div>
			<div class="float-right"></div>
		</div>
	*/

/* ==========================================================================
   	Structure
   ========================================================================== */

   	#nav														{ background-color: rgba(157,33,50,.9); height: 50px; text-align: center; }
   		#navbar													{ height: 100%; display: none; text-align: center; margin: 0 auto; }

   		#nav ul {
   			margin: 0;
   			padding: 0;
   		}
   			#nav li {
   				display: inline-block;
   			}
   			#nav a 											{ color: #fff; display: inline-block; font-size: 1.2em; text-shadow: 1px 1px 1px #000; margin: .5em .5em 0 0; font-weight: 600; text-decoration: none; }
   		#nav a:hover 										{ color: rgba(255,255,255,.5); }
   			


   	#mobilenav													{ width: 100%; height: auto; position: relative; background: rgba(0,0,0,.9); color: #fff; display: none; padding: 2em; }
   		#mobilenav a 											{ color: #fff; display: block; margin: 0 0 1em 0; padding: .5em; font-weight: 600; text-decoration: none; background: rgba(45,45,45,1);  }

   		#mobilenav ul {
   			list-style: none;
   			padding: 6em 0 0;
   			margin: 0;
   		}

   	a.menu-tab													{ display: inline-block; font-size: .9em; color: #333; background: rgba(255,255,255,.9); text-decoration: none; margin: 0 .1em .5em 0; padding: .3em; }
   		.aktiivinen-menu, a:hover.menu-tab						{ background: rgba(35,35,35,1) !important; color: #fff !important; }

   	#mobile-logo												{ display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 10em; z-index: 2000; }
   	#desktop-logo												{ display: none; }

   	#mobile-toggle												{ display: block; position: absolute; right: .5em; top: .5em; color: #fff; }
   	
	.wrapper 													{ margin: 0 auto; padding: 1em 3em 5em 2em; } /* Täysleveä */
		
		.alert {
			background: white;
		}

			.alert p {
				margin-bottom: 0;
			}

		.alert > .wrapper {
			padding: 1em;
		}
	.wrapper.narrow 											{ max-width: 998px; } /* Katkolla */

		#slice1													{ position: relative; }

			#slice1.wrapper {
				padding: 0;
			}

			#slider {
				
			}

				.owl-buttons {
					position: absolute;
					top: 50%;
					width: 100%;
					margin-top: -40px;
				}

					.owl-buttons > div {
						background: none !important;
						position: absolute;
					}
						
					.owl-buttons > div:before {
						font-size: 80px;
					}

					.owl-next {
						right: 15px;
					}

					.owl-prev {
						left: 15px;
					}
		#slice2													{ color: #fff; background: #942e3c url('../images/demo-kuosi.png') no-repeat center bottom; background-size: 300%; text-align: center; }
		#slice3													{ color: #333; background: #e5dec7 url('../images/kuosi-vaalea.png') no-repeat center bottom; background-size: 300%; text-align: center; }
		#slice4													{ color: #fff; background: #942e3c url('../images/demo-kuosi.png') no-repeat center bottom; background-size: 300%; text-align: center; }
		#slice-menu												{ color: #fff; padding-top: 4em; background: #942e3c url('../images/demo-kuosi.png') no-repeat center bottom; background-size: 300%; text-align: center; } 
		#slice-menupohja										{ color: #333; padding-left: .5em; padding-right: .5em; background: #e5dec7 url('../images/kuosi-vaalea-flip.png') no-repeat center bottom; background-size: 300%; text-align: center; } 
		#footer													{ color: #fff; background: #272727; text-align: center; }
			a.footer											{ color: #fff; }
			a:hover.footer										{ color: rgba(157,33,50,.9); }  

		.wrapper img 											{ height: auto; max-width: 100%; vertical-align: middle; }

		hr.varjo	 											{ border: 0;
																height: 1px;
																background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.55), rgba(0,0,0,0)); 
																background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.55), rgba(0,0,0,0)); 
																background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.55), rgba(0,0,0,0)); 
																background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.55), rgba(0,0,0,0)); 
																margin: 2em 0 2em 0;
																}

		.lounasmenu												{ background: #fff; padding: 1em; text-align: center; box-shadow: 0px 5px 10px #918e85; }
		.menutausta												{ background: #fff; padding: .5em; text-align: center; box-shadow: 0px 5px 10px #918e85; }
			.lounasmenu p 										{ font-size: .8em; }

			.menu-en {
				text-align: left;
			}

		.contact h3 {
			margin-bottom: 1em;
		}

		input[type="text"], input[type="email"], textarea 							{ border-radius: 8px; border: 0; background: white; color: #272727; padding: .4em; width: 90%; margin: 0 0 1em 0; }			
		input:focus[type="text"], input:focus[type="email"], textarea:focus				{ background-color: rgba(157,33,50,.9); color: #fff; outline: none; }		
			textarea											{ height: 100px; }

			.contact input[type=submit] {
				background: rgba(157,33,50,.9);
				border: none;
			}

		table.ruokalista{
			width: 100%;
			border: 0;
			margin: 0 0 1em 0;
			}


			table.ruokalista td { border-bottom: 1px solid #c6afb1; padding: 10px; text-align: left; }
			table.ruokalista td.nro { color: #ccc; border-right: 1px solid #c6afb1; text-shadow: none; }
			table.ruokalista td.ruoka i { display: block; font-size: .9em; font-style: italic; }
			table.ruokalista td.hinta { font-style: italic; font-size: 1.4em; }

		p.menu-selite{ text-align: left; color: #333; font-size: .8em; }



		.logo  												{ /* Muista retinalogo tämän filun lopussa olevaan hi-res mediaan! */ }

		.news-section {
			text-align: left;
			padding: 3em;
		}

			.news-section a {
				color: #333;
				text-decoration: none;
			}

			.news-section article {
				margin-bottom: 2em;
			}

			.news-section article h2 {
				margin-top: .2em;
			}

			.back-to-list {
				color: white;
				text-decoration: none;
			}

	/* 480px */
	@media only screen and (min-width: 30em) {
		
		/* Home */
		/* --------------------- */
			.home 												{  }

		/* Default */
		/* --------------------- */
			.default 											{  }
			.wrapper											{ width: 95%; }
			h1													{  }


	}

	/* 568px */
	@media only screen and (min-width: 35.5em) {
		
		/* Home */
		/* --------------------- */
			.home 												{  }

		/* Default */
		/* --------------------- */
			.default 											{  }
			#slice2, #slice3, #slice4, #slice-menu, #slice-menupohja							{ background-size: 200%; }
			#mobilenav											{ display: none; }
		
	}

	/* 768px */
	@media only screen and (min-width: 48em) {
		
		html, body 												{ }

			.page 												{ }

		/* Home */
		/* --------------------- */
			.home 												{  }

		/* Default */
		/* --------------------- */
			.default 											{  }
			#slice1 											{  }
			#slice2, #slice3, #slice4, #slice-menu, #slice-menupohja							{ background-size: 150%; }
			#navbar												{ display: block; margin: 0 auto; }
			#mobile-logo										{ display: none; }
			#mobile-toggle										{ display: none; }
			#desktop-logo										{ display: block; width: 13em; position: absolute; z-index: 10000; top: 0; left: 5em; }
			
		
	}

	/* 992px */
	@media only screen and (min-width: 62em) {

		/* Home */
		/* --------------------- */
			.home 												{  }

		/* Default */
		/* --------------------- */
			.default 											{  }
			#slice1 											{  }
			h1													{ font-size: 2.5em; }
			#slice2, #slice3, #slice4							{ background-size: 120%; }

	}
	/* 1200px */
	@media only screen and (min-width: 75em) {
		
		/* Home */
		/* --------------------- */
			.home 												{  }

		/* Default */
		/* --------------------- */
			.default 											{  }
			.wrapper											{ width: 1200px; }
			#slice1 											{  }
			h1													{ font-size: 3em; }
			#slice2, #slice3, #slice4, #slice-menu, #slice-menupohja { background-size: 100%; }



	}

	/* Hi-res! */
	@media print,
	       (-o-min-device-pixel-ratio: 5/4),
	       (-webkit-min-device-pixel-ratio: 1.25),
	       (min-resolution: 120dpi) {
		
		.logo 													{  }

	}
	
	/* Print styles */
	@media print {
	    * {
	        background: transparent !important;
	        color: #000 !important; /* Black prints faster: h5bp.com/s */
	        box-shadow: none !important;
	        text-shadow: none !important;
	    }

	    a,
	    a:visited {
	        text-decoration: underline;
	    }

	    a[href]:after {
	        content: " (" attr(href) ")";
	    }

	    abbr[title]:after {
	        content: " (" attr(title) ")";
	    }

	    /*
	     * Don't show links that are fragment identifiers,
	     * or use the `javascript:` pseudo protocol
	     */

	    a[href^="#"]:after,
	    a[href^="javascript:"]:after {
	        content: "";
	    }

	    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;
	    }

	    p,
	    h2,
	    h3 {
	        orphans: 3;
	        widows: 3;
	    }

	    h2,
	    h3 {
	        page-break-after: avoid;
	    }
	}