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

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

label { display:block; font-weight:bold; }
input[type=text] { width:80%; 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 */

#logo{ float:left; padding-left: 0; padding-right:0; width: 30%; }
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:11px;}
div#right_col { float:left; width:60%; height: auto; padding:0px 0px 0px 0px; margin-left: 20px; color: #686868; font-size: 12px; }

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

/* 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; }
.descr { padding:0 20px; text-align:left; font-size:13px; }

.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:left; }
#logos img { vertical-align:middle; margin:0 10px; }
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 */
div.extra_info { padding:0 0 15px 0; font-size:16px; }
div.reservationform { padding-top:20px; padding-left:10px; }
div.reservationform hr { margin-left:-10px; }
.width25percent { float:left; width:25%; }
.width20percentmiddle { float:left; width:15%; padding-left:3%; }
.width25percentmiddle { float:left; width:20%; padding-left:3%; }
.width25percentright { float:left; width:19%; padding-left:5%; }
.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],
.width25percentright 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.column { float:none; width:99%; padding:32px 0; margin:0; text-align:center; color:#686868; }
	nav#reservationMenu { background-image:none; width:100%; float:none; }
	nav#reservationMenu ul { display:block; text-align:center; }
	nav#reservationMenu ul li a { font-size:1.5em; }
	div#left_col, div#right_col, .width30percent, .width30percentmiddle, .width30percentright, .width25percent, .width25percent, .width45percent, .width10percent, .width20percentmiddle, .width25percentmiddle, .width25percentright { float:none; width: 90%; margin-left:auto; margin-right:auto; }

}