.wrapper{ max-width: 810px; margin: 0 auto; }

hr { height:1px; border:0; background-color:#cccccc; color:#cccccc; }
table td {vertical-align:top;}
h3 { margin-bottom:0.5em; }

label { display:block; font-weight:bold; }
input[type=text], input[type=email] { width:50%; border:1px solid #a0a0a0; vertical-align:middle; padding:2px 5px; }
textarea { width:80%; border:1px solid #a0a0a0; height:150px; padding:2px 5px; }

.clear { clear:both;line-height:0; }

/* Rakenne */

nav ul{ list-style: none; width: 70%; float:right; padding: 0; margin: 0; }
div#left_col { width:30%; height: auto; float:left; text-align: center; color: #686868; font-size:12px;}
div#right_col { float:left; width:60%; height: auto; padding:0px 0px 0px 0px; margin-left: 20px; color: #686868; font-size: 14px; }

.wrapper { max-width:1024px; text-align:center; }
.greyBarDark{ background: #333333; position: relative; z-index: 99998; bottom: 0; width: 100%; height: 65px; overflow:hidden; }

.form{ max-width: 618px; padding: 1em; background: #fff; display: none; }
.form h1{ padding-left:25px; }
.popup-close{ position: absolute; top: 15px; left: 5px; background: url('../graf/btnClosePink.png') no-repeat; width: 25px; height: 20px; background-size: cover; cursor: pointer; }		

div#left_col, div#right_col { text-align:left; }

.row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:10px; }
.row_product { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:10px; border-bottom: solid 1px grey; }
.headerrow { font-weight:bold; background:#e6e6e6; margin-bottom:10px; }
.order_amount, .order_value, .prod_name, .prod_description { box-sizing:border-box; }

.order_amount { width:20%; padding:5px 10px; }
.order_value { width:20%; padding:5px 10px; }
.prod_name { font-size: 16px; font-weight:bold; width:60%; padding:5px 10px; }
.prod_description { width:100%; padding:5px 10px; font-style:italic; font-size: 14px; }
label { width:40%; }

footer { padding:30px 0; margin-top:20px; background:#e6e6e6; }

/* Aloitusnäkymä */
div.column { display:inline-block; vertical-align:top; width:32%; padding:32px 0; margin:0; text-align:center; color:#686868; }
.column a{ border: 1px solid #4d4d4d; padding: 4px 16.7741935483871%; font-style: italic; color: #4d4d4d; margin-top: 1em; display: inline-block; font-weight: 300; }
.column a:hover { background: #e6e6e6; }
.bg_narrow { position:relative; height:270px; margin-bottom:20px; text-align:center; font-size:20px; text-transform:uppercase; color:#ffffff; }
.column .bg { position:relative; height:140px; margin-bottom:20px; padding-top:110px; text-align:center; font-size:20px; text-transform:uppercase; color:#ffffff; }
.column .bg b, .column .bg strong { font-size:31px; }
.hidden{ opacity: 1;  z-index: 2; position: relative; padding: 0; text-transform: uppercase; } 
/*.overlay{ opacity: 0; z-index: 1; position: absolute; top: 0; left: 0; background: #000; width: 100%; height: 100%; }*/
/*.column:hover .bg */
.overlay{ opacity: 0.50; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out;-o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; }
/*.column:hover .bg .hidden{  opacity: 1; }*/  

img.name { padding-bottom:20px; }
img.separator { line-height:0; margin: 0 0 10px 0; }

#logos { width:100%; text-align:center; }
#logos img { vertical-align:middle; margin:0 20px; }
nav#reservationMenu ul { list-style: none; width: 100%; float:none; padding: 0; margin: 0.8em 0 0 0; }
nav#reservationMenu ul li { display:inline-block; float:none; text-transform: uppercase; padding: 0 0 0 3%; text-align: right; }

/* Varauslomake */
.total { text-align:right; font-weight:bold; }
input#total_amount { border:0; width:60px; padding:0; vertical-align:top; text-align:right; font-family:inherit; font-color:inherit; font-size:inherit; }
#delivery_address_wrapper { display:none; }
div.reservationform { padding-top:20px; padding-left:10px; }
div.reservationform hr { margin-left:-10px; }
.width30percent { float:left; width:33%; }
.width30percentmiddle { float:left; width:20%; padding-left:10%; }
.width30percentright { float:left; width:19%; padding-left:10%; }
.width30percentright input[type=text] { width:98%; }
.width10percent { float:left; width:10%; }
.width45percent { float:left; width:45%; }

.width30percent img { vertical-align:middle; }
.info { font-size:11px; font-style:italic; font-weight:normal; color:#4f4f4f; line-height:normal !important; }

textarea#billing_address { height:50px; margin-bottom:10px; }
input.reserver_phone, input.reserver_company, input.event_nature, input.schedule { margin-bottom:10px; }

input.submit { font-size: 10px; border:1px solid #666666; margin-top:10px; background-color:#cccccc; color:#ffffff; font-weight:bold; vertical-align:middle; text-transform:uppercase; padding:5px 10px;}

.error { color:#ff0000; }
.infobox { padding:10px 15px; border:1px solid #bacbd4; }

@media all and ( max-width:767px ) {
	div#left_col, div#right_col { float:none; width:90%; margin:0 auto 20px auto; }
}
@media all and ( max-width:580px ) {
	div.prod_name { width:100%; }
	.order_value, .order_amount { width:48%; }
	label { width:100%; }
	input[type=text], input[type=email] { width:100%; }
}