/*clear elements*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption,thead,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Oswald",sans-serif;
	vertical-align: baseline;
}

/* Apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 hmtl, body {
 	width:100%;
 	margin:0 auto;
 }
 
 body{
 background-color: #fff;
 }

 /* Start navigation bar */
 
/* Basic Styles */
#topnavbar{
	height: 54px;
	width:100%;
	background-color: #000006;
	position: relative;
}

#topnavbarimg img{
	margin-top:10px;
	position: absolute;
	float: left;
	width:10%;
	left:3%;
	height: auto;
}

h1 {
	font-size: 21px;
	margin-bottom: 10px;
	text-transform: uppercase;
	text-align: center;
	font-family: "Oswald",sans-serif;
}

h1 a {
	color:#000;
	text-decoration:none;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
    margin-top:-20px;
}

/* Basic Styles */
nav {
	height: 40px;
	width: 100%;
	font-size: 16px;
	font-family: 'Fjalla One', Arial, sans-serif;
	position: relative;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	text-transform:uppercase;
}
nav li a {
	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

#nav1{
    width: 70%;
	position: relative;
	float: left;
	padding: 7px 0 0 0;
}

#nav1 ul{
	padding: 0;
	margin: 0 auto;
	width: auto;
	height: 40px;
	float: right;
	font-family: "Oswald",sans-serif;

}

#nav1 li {
	display: inline;
	float: left;
}
#nav1 a {
	color: #f7ee4a;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

nav a {
	color: #f7ee4a;
}

#nav2{
	width: auto;
position: relative;
float: right;
font-size: 16px;
padding: 7px 0px 0px;
white-space: nowrap;
}

#nav2 ul{
	font-family: "Oswald",sans-serif;
	text-transform: uppercase;
	width: auto;
	float:right;
	white-space: nowrap;
}

#nav2 li {
	display: inline-block;
	float: left;
	width: auto;
	color: #fff;
	white-space: nowrap;
}

#nav2 a
{
	width: auto;
	color: #FFF;
	padding-right: 5px;
	padding-left: 5px;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

#nav2 li:nth-child(2){
	border-right: 1px solid #3b393d;
	border-left: 1px solid #3b393d;
	margin-right: 10px;
	margin-left: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

#nav2 li:nth-last-child(2){
	border-left: 1px solid #3b393d;
	margin-left: 10px;
	padding-left: 10px;
}

#wrapper {
    width: 100%;
	height: 100%;
    margin: 0 auto;
    position: relative;
	background-color: #000;
}
#wrapper img{
	position: relative;
	left: 50%;
	width: 220px;
	height: 53px;
	margin-top: -30px;
	margin-left: -110px;
	z-index: 1;
	top: 82px;
}

a.fill-div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 0; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

.editmode a.fill-div{
    display: none;
    
}

.editmode #middlecolumn{
    height: 10%;
	top: 150px;
}

#leftcolumn, #rightcolumn, #middlecolumn_wrapper,#middlecolumn{
    height: 100%;
    color: white;
}

#middlecolumn_topdiv{
	height: 40%;
}

#leftcolumn  h1, #rightcolumn  h1, #middlecolumn h1 {
	font-size: 36px;
	color: #ffffff;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-align: center;	
	margin-top: 65%;
}
	
#leftcolumn  p, #rightcolumn  p, #middlecolumn p{
	font-size: 16px;
	color: #ffffff;
	font-family: 'BenchNine', sans-serif;
	text-align: center;	
	margin-top: -15px;
	padding-right:23%;
	padding-left: 23%;
}

#leftcolumn {
	float: left;
    width: 33.333%;
    position: fixed;
	height: 100%;
	background:#81aa32;
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:1;
}

#leftcolumn img, #rightcolumn img, #middlecolumn img{
	position: relative;
	width: 10%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	left: 45%;
	top: 120px;
}
		
#middlecolumn_wrapper{
	 float: left;
     width: 33.4%;
	 height: 100%;
	 left: 33.333%;
	 position: fixed;
	 background:#000;
}

#middlecolumn{
	float: left;
    width: 100%;
	position: absolute;
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index: 1;
}

.no-mobile {
	display: inline-block;
}

#middlecolumn_topdiv{
	float: left;
    width: 100%;
	position: relative;
	z-index: 100;
	overflow: auto;
}

		#middlecolumn_topdiv img {
			z-index:99999 !important;
		}

		#middlecolumn_topdiv p{
		background-image: none;
		text-align: justify;
		color: #FFF;
		font-family: 'BenchNine',sans-serif;
		padding-left: 10%;
		padding-right: 10%;
		margin-top: 20%;
		}

#rightcolumn {
	 float: left;
     width: 33.333%;
	 height: 100%;
	 left: 66.666%;
	 position: fixed;
	 background:#1d569d;
	 background-repeat:no-repeat;
	background-size:100% 100%;
	 z-index:1;
}

/* ALASIVU */

#full_wrap {
	margin:0 auto;
	margin-top:400px;
	width:60%;
	height:auto;
	font-family: 'News Cycle', sans-serif;;
	font-weight:400;
	font-size:14px;
}

#full_wrap p {
	margin-bottom:10px;
}

banneri {
	float:left;
	width:100%;
	height:auto;
}

banneri img {
	float:left;
	width:100%;
	background-color: #000;
}

#data_wrap {
	width:100%;
	height:auto;
	margin:0 auto;
	margin-top:30px;
	float:left;
}

.side_nav {
	float:left;
	width: 24%;
	min-height:420px;
	padding:3%;
	background:url('../../../../../themes/piippo/img/texture.png') repeat top left;
	background-color: #000;
	font-family: 'Fjalla One', sans-serif;
	margin-left: 10%;
	margin-right:20px;
	margin-bottom: 60px;
}

.side_nav_underpage {
	float:left;
	width: 24%;
	min-height:420px;
	padding:0;
	background:url('../../../../../themes/piippo/img/texture.png') repeat top left;
	background-color: none;
	font-family: 'Fjalla One', sans-serif;
	margin-left: 10%;
	margin-right:20px;
	margin-bottom: 60px;
}

.side_nav_underpage img {
	width: 100%;
	min-height: 420px;
}

.side_nav ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

.side_nav ul li a, .side_nav a {
	color: #f7ee4a;
	text-transform:uppercase;
	text-decoration:none;
	font-size:24px;
	line-height:200%;
	font-family: 'BenchNine', sans-serif;
	font-weight:400;
}

.side_nav ul ul a {
	color: #fff;
	text-transform:none;
	text-decoration:none;
	font-size:16px;
	font-weight:300;
	line-height:160%;
}

.item_wrap {
	float:left;
	width:55%;
	height:auto;
	margin-left:5%;
	font-size:14px;
	font-weight: 200;

}

 .item_wrap p {
 	margin-bottom:15px;
 }
  
 .item_wrap ul {
 	margin-left:50px;
 	margin-bottom:15px;
 }
 
 .item_wrap h2 {
 	font-weight:700;
 	font-size:15px;
 }

.left H1{
	text-align: left
}

.H1Fix h1{
	color: #7ea833; /*etsi väri tähän, maatalous title vihreä*/
	font-family: 'BenchNine', sans-serif;
	font-weight:400;
}

.H1Fix h1 a{
	color: #7ea833; /*etsi väri tähän, maatalous title vihreä*/
	font-family: 'BenchNine', sans-serif;
	font-weight:400;
}

.tuote_wrap{
	width: 33%;
	float:left;
	margin-left: 50px;
}

.tuote_wrap_navpage{
	width: 19%;
	float:left;
	margin-left: 0px;
	display: inline-block;
	overflow: visible;
}

.heightfix h1{
	font-size: 21px;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	font-weight:400;
}

.heightfix p{
	text-align: center;
	margin-bottom: -20px;
}

.heightfix{
	height: 300px;
	width: 30%;
	float:left;
	margin-left: 0px;
	display: inline-block;
	text-align: center;
}

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

.tuote_image_wrap{
	float: left;
	width: 15%;
	position: relative;
}


.tuote_image_wrap img{
	height: auto;
	width: 100%;
	float: right;
	position: relative;
	left: 20px;
	max-width: 200px;
}

.tuote_wrap h1{
	font-size: 21px;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-weight: bold;
}

.tuote_wrap h2{
	font-size: 18px;
	font-weight: bold;
}


/* Search bar styling */
.ccm-search-block-form{
	width: 155px;
	position:relative;
	left:0px;
	float: right;
	left: -30px;
	padding: 8px 0px 0px;
	
}

.item_wrap .ccm-search-block-form{
	width: 100%;
	float: left;
	padding: 8px 0px 0px;	
}

.ccm-search-block-text{
	border-style:solid;
	border-width:1px;
	border-color: #3b393d;
	background-color: #000006;
	color: #fff;
	width: 115px;
}

.ccm-search-block-submit{
	background-color: #000006;
	color: #fff;
	font-size: 16px;
	font-family: 'News Cycle', sans-serif;
	border: 0;
	text-transform: uppercase;
	font-style:normal;
}

#btobnav{
	background-color: #22589e;
}

#maatalousnav{
	background-color: #7fa930;
		font-family: "Oswald",sans-serif;
}

#sijoittajatnav{
	background-color: #395988;
}


/* End search bar styling*/

/*==================================================
 * Effect 5
 * ===============================================*/

.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 40px #777;
  -moz-box-shadow: 0 35px 40px #777;
  box-shadow: 0 35px 40px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

#ccm-SlideshowBlock-display{
	float:left;
	display:block;
	position: relative;
}


/* Start product area */

#box a:link, #box_productnav a, .heightfix a {color:#000;}      /* unvisited link */
#box a:visited, #box_productnav a, .heightfix a {color:#000;}  /* visited link */
#box a:hover, #box_productnav a, .heightfix a {color:#000;}  /* mouse over link */
#box a:active, #box_productnav a, .heightfix a{color:#000;}  /* selected link */ 

#box a:link, #box_productnav a, .heightfix a{text-decoration:none;}
#box a:visited, #box_productnav a, .heightfix a{text-decoration:none;}
#box a:hover, #box_productnav a, .heightfix a{text-decoration:none;}
#box a:active, #box_productnav a, .heightfix a  {text-decoration:none;}

#box_productnav{
	width: 30%;
	position: relative;
	float: left;
	min-height: 100px;
	margin-bottom: 50px;
	margin-right: 25px;
}

#box_productnav .title{
	font-size: 21px;
	text-transform: uppercase;
	font-weight: bold;
	padding-bottom: 15px;
	
}

#box{
	width: 30%;
	position: relative;
	float: left;
	min-height: 410px;
	margin-bottom: 50px;
	margin-right: 25px;
}

#box .title{
	font-size: 21px;
	text-transform: uppercase;
	font-weight: bold;
	padding-bottom: 15px;
	
}

.ccm-spacer{
	margin-top: 20px;
}

.dataimg {
	text-align:center;
}

.dataimg img{
	width: 65%;
	max-width:250px;
	height: auto;
}

.wraplist{
	margin-top:20px;
}

.wraplist img{
	width: 100%;
	height: auto;
}


/* BACKGROUND ANIMATION MAATALOUS */
.cb-slideshow-1 li{
	color:transparent;
}

.cb-slideshow-1 li span {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left: 0;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: -100;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 14s linear infinite 0s;
    -moz-animation: imageAnimation 14s linear infinite 0s;
    -o-animation: imageAnimation 14s linear infinite 0s;
    -ms-animation: imageAnimation 14s linear infinite 0s;
    animation: imageAnimation 14s linear infinite 0s;
}

.cb-slideshow-1 li:nth-child(1) span {
    background-image: url('../../../../../themes/piippo/img/home_maatalous.jpg');
}
.cb-slideshow-1 li:nth-child(2) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_agri_2.jpg');
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.cb-slideshow-1 li:nth-child(3) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_agri_3.jpg');
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}

/* BACKGROUND ANIMATION KULUTTAJA */
.cb-slideshow-2 li{
	color:transparent;
}

.cb-slideshow-2 li span {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left: 0;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: -100;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 16s linear infinite 0s;
    -moz-animation: imageAnimation 16s linear infinite 0s;
    -o-animation: imageAnimation 16s linear infinite 0s;
    -ms-animation: imageAnimation 16s linear infinite 0s;
    animation: imageAnimation 16s linear infinite 0s;
}

.cb-slideshow-2 li:nth-child(1) span {
    background-image: url('../../../../../themes/piippo/img/home_kuluttaja.jpg');
}
.cb-slideshow-2 li:nth-child(2) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_kuluttaja_2.jpg');
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}

.cb-slideshow-2 li:nth-child(3) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_kuluttaja_3.jpg');
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

/* BACKGROUND ANIMATION B2B */
.cb-slideshow-3 li{
	color:transparent;
}

.cb-slideshow-3 li span {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left: 0;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat:no-repeat;
    opacity: 0;
    z-index: -100;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 18s linear infinite 0s;
    -moz-animation: imageAnimation 18s linear infinite 0s;
    -o-animation: imageAnimation 18s linear infinite 0s;
    -ms-animation: imageAnimation 18s linear infinite 0s;
    animation: imageAnimation 18s linear infinite 0s;
}

.cb-slideshow-3 li:nth-child(1) span {
    background-image: url('../../../../../themes/piippo/img/home_btob.jpg');
}
.cb-slideshow-3 li:nth-child(2) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_btob_2.jpg');
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}

.cb-slideshow-3 li:nth-child(3) span {
    background-image: url('../../../../../themes/piippo/img/etusivu/Piippo_btob_3.jpg');
    -webkit-animation-delay: 14s;
    -moz-animation-delay: 14s;
    -o-animation-delay: 14s;
    -ms-animation-delay: 14s;
    animation-delay: 14s;
}



@-webkit-keyframes imageAnimation {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
    16% { opacity: 1; -webkit-animation-timing-function: ease-out; }
    37% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
    0% { opacity: 0; -moz-animation-timing-function: ease-in; }
    16% { opacity: 1; -moz-animation-timing-function: ease-out; }
    37% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
    0% { opacity: 0; -o-animation-timing-function: ease-in; }
    16% { opacity: 1; -o-animation-timing-function: ease-out; }
    37% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}

@-mskeyframes imageAnimation {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; }
    16% { opacity: 1; -ms-animation-timing-function: ease-out; }
    37% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    16% { opacity: 1; animation-timing-function: ease-out; }
    37% { opacity: 1 }
    50% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow-1 li span{
    opacity: 1;
}

.no-cssanimations .cb-slideshow-2 li span{
    opacity: 1;
}

.no-cssanimations .cb-slideshow-3 li span{
    opacity: 1;
}

/* POPUP */

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 15px;
  text-align: center;
}
#boxes #dialog {
  width:870px; 
  height:auto;
  padding:10px;
  background-color:#ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}
.maintext{
	text-align: center;
  text-decoration: none;
}

#lorem{
	font-size: 12pt;
  text-align: left;
}
#popupfoot{
	font-size: 16pt;
  padding: 10px 20px;
}
#popupfoot a{
	text-decoration: none;
}
.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
	background-color:#D1D1D1;
	color: green;
}
.popupoption2:hover{
	
	color: red;
}