html, body {font-family:Comfortaa, Roboto, Verdana, helvetica;margin:0;padding:0;}
#wrap {width:100%;}
#header {background-color:#fff;height:65px;width:100%;position:fixed;top:0;z-index:1;border-bottom: 0px solid #f00;opacity:0.99;box-shadow: 0px 1px 1px #eee;margin-left:auto;margin-right:auto;}
#main {width:85%;margin-left: auto;margin-right: auto;}
#footer {width:100%;background-color:#FFFFFF;color: #FFFFFF;}
#footerlink {width:100%;background-color:#999999;color: #FFFFFF; text-align:center;}
#footerbase {width:100%;background-color:#282828;min-height:50px;color: #FFFFFF;}
#clear {clear:both;}

h1 {font-size:1.4em;color:#990099;font-weight:bold;text-align:center;}
h2 {font-size:1.3em;color:#990099;font-weight:bold;text-align:left;}
h3 {font-size:1.3em;color:#000000;font-weight:bold;text-align:center;}
h4 {font-size:1.4em;color:#990099;font-weight:bold;text-align:center;}

.logo{margin-top:2px;display: block;margin-left: auto;margin-right: auto;}
.footlogo {display: block;margin-left: auto;margin-right: auto;}

.logo-f {position:fixed;margin-top:20px;margin-left:10px;}
.logo-m {position:fixed;top: 0;left: 0;margin-top:19px;margin-left:5px;width:50%;max-width:250px;}

.headimg {background:url("../images/haro-wine-fight.jpg");background-size:contain;background-repeat:no-repeat;display: block;margin-left: auto;margin-right: auto;width:100%;height:0px;margin-top:55px;padding-top:33.33%;} /* padding-top height/width*100 */

h1.head {font-size:1.3em;color:#FFFFFF;font-weight:bold;text-align:left;position:absolute;margin-top:-10%;margin-left:1%;text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;}

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

}

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

}

.videoWrapper {position: relative; padding-bottom: 56.25%; padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.pp-book-button {
    background-color: #00FF00; /* OR Green */
	width:100%;
    border: none;
    color: #000000;
	padding: 20px 20px;
	border-radius:10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.3em;
	font-weight:bold;
	cursor:pointer;
 }
.pp-book-button:hover {
	background-color: #eee;
	color: #00f;
 }

.boxh {background-color:#FFFFFF;padding:10px;border:#000000 1px solid;margin-top:20px;text-align:left;font-size:14px;color:#000000;font-weight:bold;line-height:130%;font-size:1em;margin-left: auto;margin-right: auto;}
.boxtour {width:90%;background-color:#FFFFFF;border: #990099 0.2em solid;margin-top:30px;margin-bottom:30px;margin-left: auto;margin-right: auto;padding:1em;line-height:180%;}
.boxtg {width:95%;background-color:#330033;border:#990099 0.1em solid;margin-top:30px;margin-bottom:30px;margin-left: auto;margin-right: auto;padding:1em;line-height:130%;text-align:center;font-weight:bold;color:#FFFFFF;border-radius: 15px;font-size:1.1em;}
a.boxlwhite {color:#FFFFFF;}
.boxl {padding:15px;text-align:center;}
.fb-like {}
.smbar {width:320px;padding-top:1.5em;padding-bottom:1.5em;text-align:center;margin-left:auto;margin-right:auto;}
.sml {margin-left:5px;margin-right:5px;}
.grape {margin-bottom:-7px;padding:0 5px 0 5px;}

#os {list-style-type:none;padding:0px;line-height:160%;font-size:1.05em;}
#os li {background-image: url(../images/gtick.gif);background-repeat: no-repeat;background-position: 0px 5px 0px 0px;padding-left: 25px;}

.enqs {display: block;margin-left: auto;margin-right: auto;}

#gadcontfoot {width:50%;margin-left: auto;margin-right: auto;margin-top:10px;}

label{font-weight:bold;}
span{display: block;overflow: hidden;padding-left: 0px;padding-bottom: 10px;}
span > input {width:99%;}
span > textarea {width: 99%;}

p {font-size:1.1em;color:#000000;font-weight:normal;text-align:left;line-height:150%;}
ul {font-size:1.1em;color:#000000;font-weight:normal;text-align:left;line-height:150%;}
p.SO {font-size:25px;color:#990099;font-weight:bold;text-align:center;line-height:150%;}
ul.clist {font-size:1.1em;color:#000000;font-weight:bold;text-align:left;line-height:160%;}
p.footer {font-size:0.75em;color:#000000;font-weight:normal;text-align:left;line-height:100%;}
select,input,textarea {line-height:150%;font-size:0.9375em;color:black}

a.c:link {font-size:1em;color:blue;font-weight:bold;text-decoration:none}
a.c:visited {font-size:1em;color:blue;font-weight:bold;text-decoration:none}
a.c:hover {font-size:1em;color:blue;font-weight:bold;text-decoration:underline}
a.c:active {font-size:1em;color:gray;font-weight:bold;text-decoration:underline}

a.t:link {font-size:1em;color:#FFFFFF;font-weight:bold;text-decoration:none}
a.t:visited {font-size:1em;color:#FFFFFF;font-weight:bold;text-decoration:none}
a.t:hover {font-size:1em;color:#0000FF;font-weight:bold;text-decoration:underline}
a.t:active {font-size:1em;color:#990099;font-weight:bold;text-decoration:underline}

/* Start Navigation */
.hamburger-icon {
    margin: 0;
    padding: 10px 12px;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
	cursor: pointer; cursor: hand;
}
.hamburger-icon span {
    width: 35px;
    background-color: #000;
    height: 1px;
    display: block;
    margin-bottom: 6px;
}
.hamburger-icon span:last-child {
    margin-bottom:0px;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0; /* Change to right for other side */
    background-color: #fff;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 12px 8px 32px;
    text-decoration: none;
    font-size: 1.2em;
	font-weight: bold;
    color: #000;
    display: block;
    transition: 0.3s;
	border-right: solid 0px #000;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	background-color: #000;
    color: #fff;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px;
    margin: 0px;
	border-bottom: none;
}

/* No bottom border for social links */
.sidenav .sml {
	border-bottom: none;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/* Finnish Navigation */

/* S New Collapsible 08-03-2018 */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-bottom:10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  transition: max-height 0.2s ease-out;
}
/* E New Collapsible 08-03-2018 */