body { font-family:"Open Sans", sans-serif; margin:0; padding:0; border:0; background:white; } a { text-decoration:none; color:black; } a:hover { text-decoration:underline; } header, #frontpage { background:white; height:120px; width:70%; left:50%; position:absolute; z-index:2; transform:translateX(-50%); -webkit-transform:translateX(-50%); } #frontpage { background:transparent; height:auto; position:relative; overflow:hidden; } header img { height:80%; margin:10px 0 0 20px; position:relative; z-index:2; } header::after { position:absolute; top:0; left:0; display:inline-block; width:98%; height:100%; content:''; background-image:url(https://assets.pnt.fi/kruunuverkko/logo_slogan.png); background-size:auto 70%; background-repeat:no-repeat; background-position:right center; } header .mobile { display:none; } main { position:relative; max-width:1400px; margin:0 auto; padding-bottom:150px; background:rgb(243,239,235); } main #banner { margin-bottom:20px; } main #banner.subpage { height:200px; overflow:hidden; } main #banner img { max-width:100%; } .slick-arrow::before { display:none; } .slick-arrow { width:50px !important; height:90px !important; background-size:contain !important; } .slick-next { right: 0px !important; background-image:url(https://assets.pnt.fi/kruunuverkko/arrow_slidertransp_right.png) !important; } .slick-prev { left: 0px !important; z-index:2; background-image:url(https://assets.pnt.fi/kruunuverkko/arrow_slidertransp_left.png) !important; } #left { width:65%; float:left; padding: 0 20px 0 0; box-sizing: border-box; } #left > section { width:100%; } #right { width:35%; float:right; } #left > section > ul { list-style-type:none; padding:0; margin:0; border:0; } #left > section > ul > li { margin-bottom:20px; } section > ul > li.hidden { display:none; } .showhidden section > ul > li.hidden { display:block; } section > ul > li.events { background-image:url(https://assets.pnt.fi/kruunuverkko/kuva_uuttahelsinkia_placer_color2b.jpg); background-color:rgb(239,178,66); background-position:bottom right; background-repeat:no-repeat; background-size: auto 80%; min-height: 230px; padding:20px; box-sizing:border-box; } section > ul > li.news { background-image:url(https://assets.pnt.fi/kruunuverkko/box_tiedote.png); background-color:rgb(61,178,198); background-position:bottom right; background-repeat:no-repeat; background-size: auto 80%; min-height: 230px; padding:20px; box-sizing:border-box; } section > ul > li.osakas { background-image:url(https://assets.pnt.fi/kruunuverkko/kuva_uuttahelsinkia_placer_color2.jpg); background-color:rgb(46,167,162); background-position:bottom right; background-repeat:no-repeat; background-size: auto 80%; min-height: 230px; padding:20px; box-sizing:border-box; } #readmore { width:100%; text-align:center; background:rgb(61,178,198); cursor:pointer; color:white; border-radius:2px; line-height:40px; text-transform:uppercase; font-size:12px; font-weight:bold; } #readmore:hover { text-decoration:underline; } #readmore:after { content:"Lue vanhempia"; } .showhidden #readmore:after { content:"Sulje"; } #frontpage .news date, #frontpage .news h4, #frontpage #newsitem h4 { font-weight:bold; font-size:26px; text-transform:uppercase; font-family:'Anton',sans-serif; letter-spacing:2px; font-weight:normal; } #frontpage #newsitem img { padding-bottom:30px; border-bottom:1px solid #ccc; margin-bottom:20px; width:100%; height:auto; } #frontpage .news h4 { margin:0.3rem 0; } #frontpage .news .ingress { width: 60%; } #frontpage .news a { display:inline-block; background:white; padding:5px 10px; border-radius:3px; font-weight:bold; margin-top:20px; } #frontpage .news .description a { display:inline; background:none; padding:0; } #frontpage .back { display:inline-block; background:white; padding:5px 10px; border-radius:3px; font-weight:bold; margin-top:20px; } #frontpage .share { margin-top:20px; font-weight:bold; } #newshel { margin-bottom:30px; } #newshel .title { border-bottom:1px solid rgb(184,177,172); } #newshel li { overflow:hidden; text-overflow:ellipsis; margin-top:2px !important; margin-bottom:2px !important; } #newshel a { font-weight:normal !important; background:transparent !important; white-space:nowrap; padding:0 !important; margin:0 !important; overflow: hidden; width: 100%; text-overflow: ellipsis; } #pntmobile { margin-bottom:15px; } #pntmobile img, #tips img { width:100%; display:block } #tips #links { background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(243,240,235,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(25%, rgba(255,255,255,1)), color-stop(100%, rgba(243,240,235,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(243,240,235,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(243,240,235,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(243,240,235,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(243,240,235,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f0eb', GradientType=0 ); } #tips #links > ul { list-style-type:none; margin:0; border:0; padding:10px 10px 25px 25px; } #tips #links > ul > li { margin-bottom:5px; font-weight: bold; letter-spacing: 0.3px; } #reittihaku { margin-top:20px; } footer { background:rgb(80,81,82); max-width:1400px; margin:0 auto; } footer.mobile { display:none; } footer::before { content:''; display:block; background-color:rgb(61,178,198); height:10px; width: 70%; left: 50%; position: relative; z-index: 2; transform:translateX(-50%); -webkit-transform:translateX(-50%); top:-10px; } footer > ul { list-style-type:none; margin:0; padding:0; border:0; overflow:hidden; width: 70%; left: 50%; position: relative; z-index: 2; transform:translateX(-50%); -webkit-transform:translateX(-50%); padding:20px 0; border-bottom:1px solid rgb(106,107,108); margin-bottom:0px; } footer > ul.bdy { padding:10px 0 40px 0; } footer > ul > li { float:left; width:33.3%; } footer > ul > li, footer > ul > li a { color:rgb(170,171,172); } footer .head * { color:white; text-transform:uppercase; font-size:18px; } .jssocials-share-label { display:none !important; } .jssocials-share > * { background: rgb(50,55,59) !important; border: 1px solid rgb(50,55,59) !important; } aside.mobile { display:none; } @media screen and (max-width: 1024px) { header, #frontpage, footer > ul, footer::before { width:90%; } } @media screen and (max-width: 768px) { header, #frontpage, footer > ul, footer::before { width:100%; } header { position:static; -webkit-transform:none; transform:none; height:90px; } header::after { display:none; } header .mobile { display:block; height:100%; float:right; } header .mobile * { height:100%; } header .mobile .pntmobile img { height:60%; padding-top:8px; } header .mobile .pntmobile, header .mobile .menu { float:left; } header .mobile .menu { display:table; cursor:pointer; } header .mobile .menu i { font-size: 30px; padding-right: 20px; vertical-align: middle; display: table-cell; } #right, .slick-arrow { display:none !important; } #left { width:100%; padding: 0; } #newshel { padding:0 20px; box-sizing: border-box; } footer { padding: 0 20px; } footer > ul > li { width: 50%; } #newsitem { padding:0 20px; } aside.mobile { border-top:1px solid #ccc; display:block; position: absolute; z-index: -1; top: 0; width: 100%; background: white; opacity:0; -webkit-transition:opacity 0.2s; transition:opacity 0.2s; } aside.mobile ul { list-style-type:none; padding:0; } aside.mobile ul li { padding:5px 20px; } aside.mobile a { display:block; } aside.mobile.open { opacity:1; z-index:2; } } @media screen and (max-width: 500px) { main #banner.subpage { height: auto; } } @media screen and (max-width: 420px) { header { height:60px; } header .mobile .pntmobile img { padding-top:2px; } header img { height: 68%; margin: 10px 0 0 10px; } main { padding-bottom: 50px; } #news > ul > li, #events > ul > li { padding:10px; min-height:180px; } #frontpage .news date, #frontpage .news h4, #frontpage #newsitem h4 { font-size:18px; } #newshel { padding:0 10px; box-sizing: border-box; } footer.mobile { display:block; padding-bottom:50px; padding:0 10px; } footer.main { display:none; } footer > ul { border-bottom:0; padding:0; padding-bottom:20px; } footer > ul > li { width: 100%; margin-top:20px; } footer .head { padding:5px 0; border-bottom:1px solid rgb(106,107,108); } }