@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,700|Poppins:400,400i,700,900');


/* BACKGROUND-VIDEO ----------*/
/*#clouds-video { position: fixed; top: 70px; left: 0; min-width: 100%; z-index: 1;}*/
#clouds-video { position: absolute; top: 0; left: 0; min-width: 100%; /*min-height: 100%;*/ z-index: 1;}
/* w3 fix--------- ----------*/
.w3-sidebar{height:100%;width:200px; background-color:#fff; z-index:1000; visibility: hidden!important; }
.w3-btn,.w3-button {visibility: hidden!important;}

body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.6em; color: #000; background-color: #fff; }

div.top-address {display:block; background-color: #3c62ad; color: #fff; height: 65px; padding: 22px 3% 10px 0; width: 100%; text-align: right; position:relative; }
div.top-address img  { height: 35px; padding: 0 5px;   }
img.logo-ppr { position: absolute!important; top: 6px!important; left: 2%!important; width: 193px!important; height:auto!important;}


div.top-navi { display:block; float:left; width:92%; margin:  0; height: 65px;  padding: 15px 3%; } 
a.navi-top:link, a.navi-top:visited {font-size: 1em; text-decoration: none; padding: 4px 15px; color: #555; border-right: 1px solid #888; }
a.navi-top:hover { color: #3c62ad; font-weight: 500; }
div.top-navi a:last-of-type { border: none!important; }

/* ETUSIVU--------- ----------*/
.container-top-etu { position: relative;  display:block; clear:both;  width: 100%; height: 500px; padding: 0; z-index:2;  overflow: hidden;}
.container-top-etu-bg { background-image:url("images/white.png"); background-repeat: no-repeat; background-position: center top;  display:block; clear:both;  width: 100%; height: 500px; padding: 0; z-index:2; position: absolute; top: 0;  }
div.top-etu-logo { position: absolute; top: 35px; left: 10%; width: 60%; display:block;  padding: 0; z-index: 100; }
div.top-etu-logo img { border: 0; width: 450px; padding: 0 0 15px 0; margin:  0 0 0 -15px;  z-index: 10;}
div.top-etu-logo h1 { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 3.2em;  line-height: 1.15em; text-shadow: 1px 1px 1px #3a5c6c;}	

div.obs { display:block; clear:both;  width: 100%; height: auto; padding: 15px 3%; /*color: #E50000;*/ font-family: 'Poppins', sans-serif;  font-weight: 700; font-size: 1.2em; line-height: 1.2em; /*background-color:#FFFF00; border-radius: 12px; border: 5px solid #E7FF38;*/	 }
div.obs img.etu-right { float:left; display:block;  width: 80%; height: auto; padding: 0 ; margin: 15px 10%;} 
div.obs h2 {color: green; font-size: 1.3em; line-height:1.2em; }

.container-white { display:block; position:relative; background-color: #fff; width: 100%; padding: 0; z-index: 3;}
div.content{  color: #222; width: 70%; height: 100%;  margin: 0 15%; padding: 45px 0; display: block; }
div.content:after  {  clear: both;   content: "";  display: block;}

div.content-logot {  color: #222; width: 80%; height: 100%;  margin: 0 10%; padding: 25px 0; display: block; text-align: center; }
img.footer-logo {width:16%!important; max-width: 180px; margin: 0 1.5%!important; padding: 10px 0!important;}


div.content-left { width: 50%; margin: 0 3% 0 0; padding: 0; float:left; display:block;}
div.content-right { width: 44%; margin: 0 0 0 3%; padding: 0; float:left; display:block;}

/*--kamppis etu + kamppis sivu---------------------------*/
div.content-right-campaign { width: 44%; margin: 0 0 0 3%;  padding: 0; float:left; display:block;}
img.campaign-etu { width: 48%; margin: 0 1%; padding: 5px 0;  float:left; display: block;}
img.campaign-etu-wide { width: 98%; margin: 0 1%; padding: 5px 0;  float:left; display: block;}
img.campaign-wide{ width: 80%; margin: 0 10% 15px 10%; padding: 0;  float:left; display: block;}


img.wide { width: 100%; padding: 5px 0; }
div.content-wide { width: 100%;  position: relative; margin: 0 0 -25px 0; padding: 5px 5% 0 5%; float:left; display:block; color: #222;}
div.content-wide-img { width: 100%;  position: relative; margin: 0; padding: 0; float:left; display:block; }
img.campaign-wide{ width: 80%; margin: 0 10% 15px 10%; padding: 0;  float:left; display: block;}

div.container-lira { width: 100%;  position: relative; background-color: #bec1be; padding: 45px 15% 45px 15%; background-image: url("images/bg-lira.png"); background-repeat: no-repeat; background-position: right top; }
div.container-lira:after  {  clear: both;   content: "";  display: block;}
div.content-lira { width: 100%;  position: relative; margin: 0; padding: 45px 15% 45px 0; float:left; display:block; color: #222;}
img.lira { float:right; padding: 15px 0 10px 5%; width: 28%; min-width: 280px;}
img.content-right { float:right; padding: 15px 0 10px 3%; width: 50%; }


/* T O I M I T T A J I E N   L O G O T ------------------------------------------------------------- */
div.toimittaja {width: 17%; display:block; float:left; text-align: center;  border: 1px solid #ddd; box-sizing: border-box; vertical-align: center; margin: 12px 1.5%;}
div.toimittaja:hover { border: 1px solid #ccc;}
img.toim-logo {width: 80%; padding: 5% 2.5%; max-height: 90%;}

/* T U O T E K A T E G O R I A T --------------------------------------------------------------------*/
div.tuote-category { width: 100%; margin: 0 0 15px 0; padding: 20px 10%;  float:left; display: block; background-color: #b2e2f8; 
 border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px;}
div.left-50 { width: 50%; margin: 0; padding: 10px 2% 10px 0; float:left; display:block;}
div.right-50 { width: 50%; margin: 0; padding: 10px 0 10px 2%; float:left; display:block;}



/* T U O T E R Y H M A T  ------------------------------------------------------------- */
div.breadcrump { display:block; font-size: 1.1em!important; border-bottom: 1px solid #ddd; padding: 10px 0; }
ul li {list-style-type: none; margin-left: -20px;}

div.group-list { display: block; float:left; width:32.33%; padding: 15px 0; margin: 0 .5% 5px .5%; height: 55px;  text-align: center; 
	border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; background-color: #2196f3;}

div.group-list a {   position: relative; font-size: .85em; line-height: 2em; text-decoration: none; text-transform: uppercase; color: #fff;}
div.group-list a::before {     content: '';    position: absolute;    width: 100%;    height: 4px;    border-radius: 4px;    background-color: #fff;
    bottom: -4px;     left: 0;    transform-origin: right;     transform: scaleX(0);     transition: transform .3s ease-in-out;  }
div.group-list a:hover::before {   transform-origin: left;   transform: scaleX(1);}



 
div.yhteystieto { display: block; width: 100%; float:left; padding: 10px 0;}
div.yhteystieto-img { float:left; width: 35%; padding: 0;}
div.yhteystieto-img img { float:left; width: 100%; padding: 15px 0 0 0; border-top-left-radius: 30px!important; border-top-right-radius: 30px!important; border-bottom-right-radius: 30px!important;}
div.yhteystieto-txt {float:left; width: 60%; padding: 0 0 0 5%;}
div.yhteystieto-txt h3 {  font-size: 1.3em;  }


div.clr {clear:both; width: 100%; display:block; margin: 15px 0; padding: 10px 0; }
p {margin: 8px 0!important;}

div.footer {  width: 100%;  position: relative; background-color: #2196f3; padding: 25px 15%; display: block; clear: both; height: auto;  margin: 0; color: #fff;  font-size: 1.1em;}
div.footer:after  {  clear: both;   content: "";  display: block;}
div.footer-left { display: block; float:left; width:60%; padding: 10px 0; }

div.footer-right { display: block; float:left; width:40%; padding: 10px 0 ;  }


h1 { color: #333; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.4em; line-height: 1.6; }	
h2 {  color: #333; font-family: 'Poppins', sans-serif;  font-weight: 400; font-size: 1.8em; line-height: 1.3em;}	
h2.white {  color: #fff; font-family: 'Poppins', sans-serif;  font-weight: 400; font-size: 1.8em; line-height: 1.3em;}	
h3 {  color: #333; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1.4em; line-height: 1.3em;}	
h3.white {  color: #fff; font-family: 'Poppins', sans-serif;font-weight: 400; font-size: 1.4em; line-height: 1.3em;}	
h4 {  color: #2196f3; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1.2em; margin: 0;  line-height: 1.2em;}	
h4.center {  color: #2196f3; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1.5em; margin: 0; line-height: 1.2em; text-align: center;}	


a.telephone:link, a.telephone:visited {font-size: 1.1em;  text-decoration: none; margin: 0 10px; padding: 3px 10px 0 28px; color: #fff; display: inline-block; }
a.telephone:hover { color:#fff; text-decoration: underline;}

a.mail:link, a.mail:visited {font-size: 1.1em;  text-decoration: none;  margin: 0 10px; padding: 3px 10px 0 28px;  color: #fff; display: inline-block;}
a.mail:hover { color:#fff;  text-decoration: underline;}

a.more:link, a.more:visited {font-size: .85em; line-height: 2em; text-decoration: none; text-transform: uppercase; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; padding: 9px 15px; margin: 5px 15px 5px 0; color: #FFF; background-color: #2196f3; display: inline-block;}
a.more:hover { color:#fff; background-color: #3c62ad; }

a.phone:link, a.phone:visited {font-size: 1em; line-height: 2em;  text-decoration: none; padding: 9px 15px 9px 45px; margin: 5px 15px 5px 0;  background-image:url(images/phone.png); background-repeat: no-repeat; color: #fff; display: inline-block; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; background-color: #3c62ad; }
a.phone:hover { color:#fff; background-color: #6fb7f1; }

a.footer:link, a.footer:visited {font-size: .95em!important; line-height: 1.5em; text-decoration: none;  margin:0; color: #fff; }
a.footer:hover { text-decoration: underline; }

a.footer-link:link, a.footer-link:visited {font-size: .85em; line-height: 2em; text-decoration: none; text-transform: uppercase; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; padding: 9px 15px; margin: 5px 15px 5px 0; color: #fff; background-color: #3c62ad; display: inline-block;}
a.footer-link:hover { color:#fff; background-color: #6fb7f1; }

a.body:link, a.body:visited {font-size: 1em; text-decoration: underline; color:#2196f3; }
a.body:hover { color:#3c62ad; text-decoration: none; }

a.list:link,a.list:visited { line-height: 2em; text-decoration: underline;  }
a.list:hover { text-decoration: none; color:#2196f3;}


h2#plj-2 { display: none;}


section#terms {
   width: 100%;
   line-height: 1.5em;
   -webkit-column-count: 2;
   -webkit-column-gap:   4%;
   -moz-column-count:    2;
   -moz-column-gap:      4%;
   column-count:         2;
   column-gap:           4%;
}