html, body{
    margin:0;
    padding:0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing;
    padding-left: 10px;
    padding-right: 10px;
}

body {
	padding-top: 37px;
	font-family: sans-serif;
	/*background: url("images2/bgr.gif") #75B2CC;
	background-repeat: repeat-x;*/
	background:lightgray;
}

/* align text vertically in middle in div */
.middle:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

a:link {

	text-decoration: none;
}

a:visited {

	text-decoration: none;
}

a:hover {

	text-decoration: none;
}

a:active {
	text-decoration: none;
}


h1 {
	font-family: Georgia, Tahoma, Arial, Verdana;
	color: #D6223B;
	font-size: 1.3em;
}

p {
	font-family: Tahoma, Arial, Verdana;
	color: Black;
	font-size: 0.9em;
}

input.includeform, textarea.includeform {
    width:100%;
    max-width: 300px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.login
{
	border: 1px solid;
	font-size: 0.9em;
	width: 100px;
}

.loginText
{
	font-size: 0.9em;
	font-family: sans-serif;
	color: Black;
}

#langmenu
{
	font-size: 9pt;
	float: right;
}

input.loginSubmit
{
	border: 1px solid;
	font-size: 9pt;
	width: 75px;
}

#searchform {
  margin-left: 20px;
  display: inline;
}

#searchform2 {
  margin-top: 50px;
  display: none;
}

.search
{
  border-radius: 3px;
  border: 1px #000 solid;
  padding: 3px 3px 3px 3px;
	font-size: 12pt;
	width: 150px;
}

input.searchSubmit
{
	/*border: 1px solid;*/
	font-size: 12pt;
  border-radius: 3px;
  border: 1px #000 solid;
  padding: 5px 5px 5px 5px;
  font-size: 10pt;
  color: white;
  background-color: #20b6af;
}

div.content100p
{
 text-align: center;
 width: 100%;
}

#container {
	margin: auto;
  width: 100%;
	max-width: 1024px;
	background-color: transparent;
	margin-top: 0px;
	margin-bottom: 0px;
}

#header {
	max-width: 1024px;
	height: 96px;
	background-color: transparent;
	background: url("images2/mairue_logo2.png");
  background-repeat:no-repeat;
}

#ieclear { /* tan hack */
	font-size: 15px;
}

* html #ieclear { /* tan hack */
	line-height: 1px;
	font-size: 1pt;
}

#langmenu {
	font-size: 0.9em;
	margin-top: 25px;
	float: right;
	margin-right: 25px;
}

#area {
  height: auto;
  width: 100%;
  max-width: 1024px;
	background-color: whitesmoke;
  display: table;
  table-layout: fixed
}


img {
	height: auto;
	max-width: 100%;
}

.row {
  display: table-row;
}

#mainarea {
  display: table-cell;
	background-color: transparent;
	text-align: left;
	line-height: 1.5;
	/* border: 1px solid; */
	font-size: 0.9em;
  margin-top: 10px;
  padding-left: 25px;
  padding-right: 10px;
  height: 400px !important;
}

#responsivenav {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 15px;
  padding-bottom: 5px;
  background-color: #333;
  color: white;
  width: 100%;
}

/* Default is not to show selected category as a header in the navi */
#topnavheader { display: none; }

.responsivecatSelected li a {
  color: yellow;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Selected category link is yellow */
.responsivecatSelected a:link {color:yellow;}      /* unvisited link */
.responsivecatSelected a:visited {color:yellow;}  /* visited link */
.responsivecatSelected a:hover {color:yellow;}  /* mouse over link */
.responsivecatSelected a:active {color:yellow;}  /* selected link */

/* Selected category link is yellow also in the responsive menu header */
a#topnavheader {color:yellow;}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* Default: hide subcats */
.subcat {display: none;}

#mainnav {
  display: table-cell;
	font-size: 9pt;
	background-color: #DBDBDB;
	width: 180px;
	padding-top: 10px;
	padding-left: 25px;
	padding-right: 25px;
}

#mainnav a:link {
/*color: white;*/
}

.cat a:link {
/*color: white;*/
}

#mainnav form {
	margin-left: 0px;
	color: 000;
}

* html #mainnav { /* tan hack + box model hack for IE */
	width: 180px;
}

#infot {
float: right;
padding-right: 63px;
}

#etuinfo {
float: right;
color: White;
font-size: 0.7em;
padding-top: 10px;
padding-right: 20px;

}

#etuinfo2 {
float: right;
color: White;
font-size: 0.7em;
padding-top: 10px;

}

.sitemap {
margin-left: 17px;
}

#spacer2 {
	clear:both;
	background: #FFFFFF;
	height: 13px;
	max-width: 1024px;
	font-size: 1px;
}

#spacer3 {
	clear:both;
	background: #FFFFFF;
	height: 15px;
	width: 1px;
	font-size: 1px;
}

#projenu {
	background-color: blue;
	height: 50px;
	font-size: 10pt;
	margin: 100px;
	padding: 100px;
}

#right-holder-webshop {
	float: right;
	font-size: 10pt;
	width: 180px;
	padding: 5px;
	padding-bottom: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	display: inline;
}

#right-holder {
	/* float: right; */
  display: table-cell;
	font-size: 10pt;
	width: 180px;
}

#right-banner-1 {
	position: relative;
	width: 132px;
	margin: 0;
	padding: 0;
}

#right-banner-2 {
	position: relative;
	width: 132px;
	margin: 0;
	padding: 30px 0 0 0;
}

#right-banner-1, #right banner-2 img {
	margin: 0;
	padding: 0;
}

.card {
	font-family: Tahoma, Arial, Verdana;
	color: Black;
	font-size: 0.7em;
	background-image: url(images2/kortti.gif);
	background-repeat: no-repeat;
	width: 276px;
	margin-left: 2px;
	margin-top: 2px;
	height: 137px;
	float: left;
}

.cardtext {
	width: 241px;
	margin-left: 16px;
	margin-top: 17px;
	height: 125px;
}

.korttiteksti img {
	margin-top: 4px;
}

.footerdata {
	max-width: 1024px;
	text-align: left;
	border: 1px solid #D4D7D9;
	/*height: 90px; */
}

.footerdata_left {
	max-width: 150px;
	float: left;
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 3px;
	font-size: 0.7em;
}

.footerdata_right {
	max-width: 735px;
	float: right;
	padding-left: 10px;
	padding-top: 4px;
	padding-bottom: 3px;
	padding-right: 4px;
	font-size: 0.7em;
}

.footerdata_left a:link, .footerdata_left a:visited, .footerdata_left a {
	font-size: 0.7em;
	color: gray;
	text-decoration: none;
}

.footerdata_right a:link, .footerdata_right a:visited, .footerdata_right a {
	font-size: 0.7em;
	color: gray;
	text-decoration: none;

}

#bottom {
  background-color: whitesmoke;
	/*background: url("images2/bottom.gif");*/
	max-width: 1024px;
	/*text-align: center;*/
	clear:both;
	margin: auto;
  margin-bottom: 0px;
}

.slick {
  background-color: white;
  max-width: 1024px;

}

.slickheader {
  position: absolute;
  width: 100%;
  height: 25%;
  background-color:rgba(0,85,156,0.9);
  left: 0;
  bottom: 0;
  z-index: 10;
  text-align: left;
  padding-left: 10%;
  font-size: 35px;
  font-family: 'Lato', sans-serif;
  line-height: 100%;
  color: white;
  display: table-cell;
  vertical-align: middle;
}

#googlemap {
  width: 550px;
  height: 350px;
}

@media screen and (max-width:1000px) {
  .slick-prev, .slick-next {
    margin-left: 5px;
    margin-right: 5px;
  }
  #googlemap {
    width: 450px;
    height: 350px;
  }
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:770px) {
  .slick-arrow {
    display: none !important;
  }
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  /* Also show selected category as a header in the navi */
  #topnavheader { display: inline-block; }
  .subcat { display: inline-block;}
  #mainnav { display: none;}
  #right-holder-webshop { width: 100%; }
  #searchform { display: none;}
  #searchform2 { display: inline-block;}
  #header { background-size: 800px; }
  .slickheader { font-size: 24px; width: 100%; }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:770px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  #responsiveheader li a {display: none;}
}

@media screen and (max-width:480px) {
  html, body{
      padding-left: 0px;
      padding-right: 0px;
  }
  .slickheader { font-size: 16px; width: 100%; }
  #responsivenav {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  #header {
    background-size: 700px;
    height: 80px;
  }
  #googlemap {
    width: 270px;
    height: 300px;
  }
}