@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Dynalight');

/* Perusmuotoilut */
body {
	background: #ffffff;
}
body, p, .teksti, td, ul, li {
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	line-height: 140%;
}
p {
	color:#343434;
	font-weight:300;
	font-size:1.125em;
	}
body, p {
	margin: 0;
	padding: 0;
}
.kuva {
	cursor : pointer;
}
a {
	color: #df2626;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* Classit */
.center-col {
	width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.content-col {
	clear: both;
	display: inline-block;
	height: auto;
	width: 100%;
}
.elmcenter {
	text-align:center;
	}
.padding {
	padding:100px 0px;
	}
.col-33, .col-25, .col-50, .col-66, .col-75 {
	display: table;
	float: left;
}
.col-33 {
	width: 33%;
}
.col-66 {
	width: 66%;
}
.col-25 {
	width: 25%;
}
.col-50 {
	width: 50%;
}
.col-75 {
	width: 75%;
}

/*Copyright*/
#semiowebio {
	text-align: center;
	border-top:1px solid #e88686;
	clear:both;
	padding-top:40px;
	margin-top:80px;
}
#semiowebio img {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
#semiowebio img:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
}
/* Paavalikko */
ul.main-navi {
	clear: both;
	width: 100%;
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
ul.main-navi li {
	display: inline-block;
	float: right;
}
ul.main-navi li a {
	font-size: 1.45em;
	font-family: 'Roboto Slab', serif;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 25px 58px;
	float: left;
	font-weight: 700;
}
ul.main-navi li a#last {
	padding: 25px 0px 25px 58px;
	}
ul.main-navi li a:hover {
	color:#999;
	text-decoration: none;
}

#link-sel-1-2, #link-sel-2-3, .link-sel-3-4, #link-sel-2-3, #link-sel-1-9,#link-sel-2-10,#link-sel-1-6,#link-sel-2-7,#link-sel-3-30,#link-sel-4-15, .link-sel-3-11,#link-sel-1-21,#link-sel-2-22,#link-sel-3-31,#link-sel-4-24 {background: #fff;color:#ca3430 !important}   

/* Otsikkotyylit */

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
	font-family: 'Roboto Slab', serif;
	margin: 0;
	line-height: 105%;
}
h1, h1 a {
	color: #fff;
	font-size: 3.438em;
	font-weight: 700;
	padding: 0px 0px 30px 0px;
}
h2, h2 a {
	color: #343434;
	font-size: 2.813em;
	font-weight: 700;
	padding: 0px 0px 15px 0px;
}
h3, h3 a {
	color: #vari1;
	font-size: 2.35em;
	font-weight: 400;
	padding: 0px 0px 15px 0px;
}
h4, h4 a {
	color: #vari2;
	font-size: 2em;
	font-weight: 400;
	padding: 0px 0px 15px 0px;
}
h5, h5 a {
	color: #vari1;
	font-size: 1.8em;
	font-weight: 700;
	padding: 0px 0px 15px 0px;
}
h6, h6 a {
	color: #vari2;
	font-size: 1.5em;
	font-weight: 700;
	padding: 0px 0px 10px 0px;
}
/* Tapahtumakalenteri */
.tapahtumat {
	font-weight: bold;
}
.tapahtumakalenteri_otsikko {
	color: #vari1;
	font-weight: bold;
}
.tapahtumakalenteri_valiotsikko {
	font-weight: bold;
}
/* Uutiset */
.uutis_otsikko {
	color: #vari1;
	font-size: 1.8em;
	font-weight: normal;
}
.uutispaivays {
	display: block;
	font-size: 1em;
	font-weight: normal;
	padding-bottom: 10px;
}
.uutis_paivays {
	font-size: 0.75em;
	color: #000000;
}
a.nostouutis_otsikko {
	color: #vari1;
	display: block;
	font-size: 1em;
	padding-bottom: 20px;
}
.nostouutis_paivays {
	font-size: 0.875em;
}
.uutispaivaysetusivu {
	font-size: 0.75em;
}
.nostettumoduli {
	color: #vari1;
}
/* Lomakeotsikot */

.lomakeotsikko {
	color: #vari1;
	font-weight: bold;
}
.lomaketekstiotsikko {
	color: #vari1;
	font-weight: bold;
}
/* Lomakekentat */
input, .lkentta. select, .lpainike, textarea {
 color: #vari2;
 border: 1px solid #b0b0b0;
 padding-left: 3px;
 border-radius: 3px;
}
input {
}
.lkentta {
}
select {
}
.lpainike {
	padding-left: 0;
}
textarea {
}
/* Webio alavalikon linkit */
.valikkolinkki-sel, .valikkolinkki, .valikkomodulilinkki, .valikkomodulilinkki-sel {
	text-decoration: none;
   display: block;
    padding: 6px 0;
    	font-family: 'Roboto Slab', serif;
}
.valikkolinkki {
}
.valikkolinkki-sel {
	font-weight: bold;
}
.valikkomodulilinkki {
	color: #vari1;
}
.valikkomodulilinkki-sel {
	color: #vari1;
	font-weight: bold;
}
/* Piilosivun tyyli */

.valikkolinkki_piilosivu {
	color: #005600;
}
/* Muut */
a.takaisinuutisiin, a.webiolinkkipainike {
	background:#df2626;
    color: #fff;
    display: inline-block;
	font-family: 'Roboto Slab', serif;
	font-weight:700;
    font-size: 1.15em;
    margin-top: 30px;
    padding: 15px 60px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out 0s;
}
a.takaisinuutisiin:hover, a.webiolinkkipainike:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

#header-wrapper {
	background:url(../img/header/header01-2021-1.jpg) right top no-repeat;
  background-position-x: right -80px;
	background-size:cover;
	}
#header-wrapper-alasivu {
	background-size:cover;
  height:400px;
	}
#menu-wrapper {
	background:rgba(0,0,0,0.65);
	box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.25);
  z-index:20;
	}
#language, #putkentaivutuslink {
	float:right;
	}
#language {
	background:rgba(0,0,0,0.5);
	padding:10px 15px;
	color:#fff;
  white-space: nowrap;
	}
#language a {
	color:#fff;
	font-family: 'Roboto Slab', serif;
	font-weight:700;
	padding:0 5px;
	}
#putkentaivutuslink a {
	display:block;
	background:rgba(223,38,38,0.7);
	color:#fff;
	font-family: 'Roboto Slab', serif;
	font-weight:700;
	padding:10px 25px;
	}
#putkentaivutuslink a:hover {
	background:rgba(223,38,38,1.0);
	text-decoration:none;
	}
#tunnus {
	padding:65px 0px;
	}
#headerteksti {
	padding:195px 0px;
	}
	#headerteksti p, #headerteksti h1 {
		text-shadow:3px 3px 11px rgba(0,0,0,0.9);
		}
#headerteksti p {
	color:#fff;
	font-weight:400;
	}
#yritys-wrapper {
	width:70%;
	padding:0 15%;
	}
#palvelut-wrapper {
	background: url(../img/header/bg-palvelu.jpg) center top no-repeat;
	background-size: cover;
	padding:140px 0px;
}
.palvelulinkki {
	display: block;
	color: #fff;
	border-bottom: 1px solid #fff;
	float: left;
	width: 27%;
	margin: 30px 2% 0 2%;
	padding: 15px 0px;
	font-weight: 700;
	font-size: 1.1em;
	text-align:center;
}
.palvelulinkki:hover {
	background: rgba(0,0,0,0.3);
	text-decoration:none;
}
.item {
	width:100%;
	background-size:cover !important;
	}
.headerteksti {
	padding:150px 10%;
	background:rgba(0,0,0,0.7);
	display: inline-block;
    margin-left: 50%;
    width:30%;
	height:330px;
	}
#owl-demo {
	margin:80px 0px;
	}

p.asiakascase, p.lainaus, p.allekirjoitus, #owl-demo p {
	color:#fff;
	font-size:1.5em;
	}
p.asiakascase {
	background:#df2626;
	display:block;
	font-family: 'Roboto Slab', serif;
	font-weight:700;
	padding:5px 0px;
	width:80%;
	margin:0 10%;
	}
p.lainaus {
	font-family: 'Roboto Slab', serif;
	font-weight:300;
	padding:30px 0px;
	}
p.allekirjoitus {
	font-family: 'Dynalight', cursive;
	font-size:2.5em !important;
	}
#footer-wrapper {
	background:url(../img/header/bg_footer.jpg) repeat-x top #df2626;
	}
img#alalogo {
padding-bottom:40px;
}
#footer-wrapper p, #footer-wrapper h6 {
line-height:160%;
}
#copiraitti {
width:29%;
}
#facebook {
padding-left:4%;
}
#footer-wrapper a {
color:#fff !important;
}
#alavalikko {
   
    width: 19%;
}
#sisalto-oikea {
 border-left: 2px dotted #ccc;
  padding-left:5%;
}
#video-wrapper {
padding-bottom:100px;
}
#video-wrapper iframe {
width:100%;
  height:700px;
}

.closeme {
    display: block;
    color: #fff !important;
    background: #ca3430;
    font-size: 20px;
  padding:10px 0
}

#close-x {
    background: #000;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

.vbox-close::before {content: "Sulje ikkuna"; display: block;padding-right: 10px;}


#main-navi, #top-navi{margin: 0 auto;padding: 0;list-style: none;z-index: 2;position: relative;flex-direction: row;justify-content:space-around;width:100%}
#main-navi{background:#c6332f}

.mainnavi-link,.topnavi-link{font-size: min(max(1rem, 1.3vw), 1.4rem);font-weight: 700;padding:25px 1vw;text-decoration: none;color: #fff;display: block; font-family: 'Roboto Slab', serif !important;}
.topnavi-link {color:#fff; font-family: 'Roboto', sans-serif !important;font-size: 14px;text-transform: uppercase;padding:10px}

.mainnavi-link:hover {color: #c6c6c6;}
#main-navi {transform: skew(-16.5deg);}#main-navi li {transform: skew(16.5deg);}#main-navi .naviblock a {transform: skew(-16.5deg);}.naviblock a span {transform: skew(16.5deg);display: block;}
.dflex {display: flex;flex-wrap: wrap;flex-direction: column;} 
.center-elements {align-items: center;justify-content: center}
.vwrapper-nw {padding-bottom:1em;display: flex;justify-content: center;align-items: center;max-width: max-content;float: right;}

#footer-wrapper .center-col {display:grid;grid-template-columns: 1fr 1fr; grid-gap:3em}
#footer-wrapper .center-col > div {width:100%}
#footer-wrapper #semiowebio {grid-column:1/-1;padding-top: 20px;margin-top: 0;}
#footer-wrapper #facebook {display:none;}

 @media only screen and (max-width: 1440px) {.mainnavi-link, .topnavi-link {padding: 18px 10px;}.vwrapper-nw {padding-bottom:0em;}}
 @media only screen and (max-width: 1280px) {#menu-wrapper .center-col {width: 94%;}}
 @media only screen and (max-width: 1024px) {#menu-wrapper #valikko-wrapper.col-75 {width: 100%;} #tunnus {position:absolute; padding: 30px 0 0 0;top: -1em;}#footer-wrapper .center-col {grid-template-columns: 1fr;grid-gap: 0;}}
 @media only screen and (max-width: 768px) {#main-navi, .vwrapper-nw {display: none;}}
 @media only screen and (max-width: 568px) {#footer-wrapper img {max-width: 100%;height: auto;margin: 0 auto;display: block;}#copiraitti td {width: 100% !important;}}

#refertable, #refertable tbody,#refertable tr, #refertable td{width:100% !important; height:auto !important;padding: 0 !important;} #refertable tr {display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); grid-gap:1em;} 

@media only screen and (max-width: 768px) {#refertable .kuva {max-width: 120px;height: auto;padding:0 !important}#refertable tr {grid-template-columns: repeat(4,1fr);}}
@media screen and (max-width:575px) {#refertable tr {display:grid; grid-template-columns:1fr; grid-gap:1em;}#refertable tr {grid-template-columns: repeat(3,1fr);}} 
@media screen and (max-width:480px) {#refertable tr {grid-template-columns: repeat(2,1fr);}}