@charset "UTF-8";

/*
Theme Name: Kaakkois-Suomen Sähköpalvelu
Theme URI: https://www.selekti.fi
Author: Mainostoimisto Selekti
Author URI: https://www.selekti.fi
Description:
Version: 1.0
Text Domain: selekti_theme
*/

/* ==========================================================================
Table of Contents:

0. BASE STYLES
1. TEXT STYLING
2. IMAGE STYLING
3. MARGINS AND GRIDS
4. BUTTONS
5. MOBILE VS DESKTOP
6. HEADER
7. FRONT PAGE
8. CONTENT PAGE
9. FOOTER
10. MISCELLANEOUS
11. MODULES

========================================================================== */
:root{
/* texts */
--text: #000;
--text-dark: #f2fdfd;	
--title: #1f3e3e;
--title-dark: #f2fdfd;	
--link: #16acad;
--link-hover: #000;	
--meta: #91b5b5;	
/* buttons */	
--button: #fff;
--button-hover: #fff;
--button-bg: #16acad;
--button-bg-hover: #000;
/* lines */
--line: #c6dddd;
--line-dark: #125555;	
/* backgrounds */
--bg-primary: #fff;
/* brand colors */
--turkoosi: #16acad;	
--tumma: #1f3e3e;
--harmaa: #e5eded;
}

/* ===========
0. BASE STYLES
============= */

.clear{
	clear: both;
}

.group:after {
	content: "";
	display: table;
	clear: both;
}

*{
	margin: 0;
	padding: 0;
	border: 0;
}

body, html{
	height: 100%;
	width: 100%;
}

@media (min-width: 768px){

}

@media (min-width: 1200px){

}

/* ===========
1. TEXT STYLING 
============= */

h1, h2, h3, h4, .module-title-h2, .module-title-h3, .module-title-h4{
	display: block;
	margin-bottom: 25px;
	line-height: 1.2em;
	/*-webkit-hyphens: auto;
 	 -ms-hyphens: auto;
 	 hyphens: auto;*/
}

.otsikkopalkki .module-title-h2, .otsikkopalkki h2{
	margin-bottom: 40px;
	text-align: left;
}

.otsikkopalkki-1{
	text-align: center;
}

h1{
	font-size: 36px;
}	

h2, .module-title-h2{
	font-size: 28px;
}	

h3, .module-title-h3{
	font-size: 24px;
}

h4, .module-title-h4{
	font-size: 21px;
}

p{
    margin-bottom: 25px;
}

a{
	text-decoration: underline;
}

a:hover{
	text-decoration: underline;
}

.centered{
	text-align: center;
}

#breadcrumb{
	font-size: 14px;
}

#content ul, #content ol{
	margin-left: 25px;
	margin-bottom: 25px;
}

.centered ul, .centered ol{
	list-style-position: inside;
}

.tekstikorostus, blockquote{
	font-size: 21px;
	line-height: 1.6em;
	margin-top: 20px;
	display: block;
}

@media (min-width: 768px){
h1{
	font-size: 40px;
}
	
}

@media (min-width: 992px){
h1{
	font-size: 48px;
}
	
h2, .module-title-h2{
	font-size: 36px;
}
	
h3, .module-title-h3{
	font-size: 30px;
}	
	
.tekstikorostus, blockquote{
	font-size: 28px;
}	
}

@media (min-width: 1200px){
h1{
	font-size: 60px;
}
	
h2, .module-title-h2{
	font-size: 40px;
}	
}

/* ===========
2. IMAGE STYLING
============= */

#thumbnail img{
	display: block;
	width: 100%;
	height: auto;
}

#thumbnail{
	margin-bottom: 40px;
}

#contentarea .alignright.size-full, #contentarea .alignleft.size-full{
	width: 100%;
	height: auto;
	float: none;
}

#contentarea .wp-caption img.size-full, #contentarea img.size-full{
	display: block;
	width: 100%;
	height: auto;
	line-height: 0;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
	max-width: 100%;
	height: auto;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
	max-width: 100%;
	height: auto;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}

/* pikkukuvien koko ei skaalaudu */
#contentarea .wp-caption img.size-medium, #contentarea .wp-caption img.size-thumbnail, #contentarea .wp-caption img.size-large, #contentarea img.size-large, #contentarea img.size-medium, #contentarea img.size-thumbnail{
	display: block;
	max-width: 100%!important;
	height: auto!important;
	line-height: 0;
}


/* ===========
3. MARGINS AND GRIDS 
============= */

.sisennys {
padding: 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.border-box{ 
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;}

.padding-small{
	padding-top: 25px;
	padding-bottom: 25px;
}

.padding-medium{
	padding-top: 60px;
	padding-bottom: 60px;
}

.padding-large{
	padding-top: 90px;
	padding-bottom: 90px;
}

@media (min-width: 768px){
.wrapper{
	margin: 0 25px;
}	

.grid4{
	width: 50%;
	float: left;
}	
	
}

@media (min-width: 992px){
.grid2{
	width: 50%;
	float: left;	
}
	
.grid3{
	width: 33.333333%;
	float: left;
}	
		
.grid66{
	width: 66.666666%;
	float: left;
}
	
.grid75{
	width: 75%;
	float: left;
}	
	
.grid4{
	width: 25%;
}
	
.flexboxwrap{
	display: flex;
	flex-wrap: wrap;
}	
	
.flexbox{
	display: flex;
}	
	
.flexmiddle{
	/*vertically*/
	align-items: center;
}	
	
.flexcenter{
	/*horizontally*/
	justify-content: center;
}	
	
.narrow{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
	
.padding-small{
	padding-top: 40px;
	padding-bottom: 40px;
}

.padding-medium{
	padding-top: 80px;
	padding-bottom: 80px;
}

.padding-large{
	padding-top: 120px;
	padding-bottom: 120px;
}	
	
}

@media (min-width: 1200px){		
.wrapper{
	margin: 0 6.25%;
} 
	
.narrow{
	width: 60%;
}		

}

@media (min-width: 1440px){		
.wrapper{
	margin: 0 8.3332%;
} 	
		
}

@media (min-width: 1680px){	
.wrapper{
	width: 1440px;
	margin: 0 auto;
} 
	
}

/* ===========
4. BUTTONS 
============= */

a.painike, a .painike, .painike a{
	display: inline-block;
	text-decoration: none;
	padding: 10px 20px 12px 20px;
	-webkit-transition: background 300ms ease;
	transition:         background 300ms ease;
}

a.painike:hover, a .painike:hover, .painike a:hover{
	text-decoration: none;
}


/* ===========
5. MOBILE VS DESKTOP
============= */

.desktop{
	display: none;
}

.mobile{
	display: block;
}	

@media (min-width: 992px){	
.desktop{
	display: block;
}

.mobile{
	display: none;
}	
}

/* ===========
6. HEADER
============= */

header{
	background: #fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.headerwrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
}	

#logo{
	width: 180px;
	/*height: 60px;*/
	float: left;
	margin: 20px 0;
	padding-right: 20px;
}

#logo img{
	width: 100%;
	height: auto;
	display: block;
}

#paavalikko{
	width: calc(100% - 180px);
	float: right;
	position: relative;
	text-align: right;
	display: inline-block;
}	
#paavalikko #mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu{
top: 94px;
box-shadow: 0px 10px 10px 1px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 10px 10px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 10px 1px rgba(0,0,0,0.2);		
}
	
@media (max-width: 1023px){
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link{
	padding-left: 20px;
	padding-right: 20px;
}
		
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
	padding-left: 20px;
	padding-right: 20px;
	background: var(--tumma);
	color: #fff;
	}
	
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
	padding-left: 30px;
	background: var(--turkoosi);
	color: #fff;
	}	
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu{
	border-bottom: 1px solid var(--line-dark);
	}	
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link, #paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link{
	background: var(--turkoosi);
	color: var(--text);
}
}
@media (min-width: 1400px){
#paavalikko #mega-menu-wrap-header-menu .mega-menu-toggle + #mega-menu-header-menu{
	top: 0;
	border-top: 0;
	box-shadow: none;
}	
	
#paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link, #paavalikko #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-current-menu-item a.mega-menu-link{
	background: var(--turkoosi);
	color: var(--text);
}
		
}

@media (min-width: 1680px){
#logo{
	width: 220px;
}
#paavalikko{
	width: calc(100% - 220px);
}		
}
	
/* ===========
7. FRONT PAGE
============= */

#intro{
	/*min-height: 50%;*/
    width: 100%;
    position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}	

#intro-empty{
    width: 100%;
    position: relative;
	background: var(--turkoosi);
}	

#intro-content{
	color: #fff;
	z-index: 3;
	width: 100%;
	height: 100%;
	/*position: absolute;
	top: 0;*/
	padding-top: 80px;
	padding-bottom: 80px;	
	background: rgba(26,171,171,0.3);
	/*display: flex;
	align-items: center;*/
	text-align: center;
	margin: 0 auto;
}

#intro-empty #intro-content{
	position: relative;
	background: none;
}

#intro-content h1{
	color: #fff;
}

@media (min-width: 992px){
	
#intro{
	min-height: 50%;
    width: 100%;
    position: relative;
	display: flex;
	align-content: center;
	align-items: center;
}	
}

/* ===========
8. CONTENT PAGE
============= 
*/
#breadcrumb{
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	color: var(--meta);
	border-bottom: 1px solid var(--line);
}

ul#breadcrumbs li{
	list-style: none;
	display: inline-block;	
	margin-left: 0;
}

ul#breadcrumbs{
	margin: 0;	
}

#breadcrumbs li.separator{
	padding: 0 10px;	
}

#subhero{
	padding-top: 40px;
	padding-bottom: 20px;
}

#content ul.kategorialistaus{
	margin-left: 0;
	margin-top: 25px;
}

.kategorialistaus li{
	list-style-type: none;
	display: inline-block;
	background: var(--harmaa);
	padding: 12px 20px 12px 20px;
	margin-bottom: 5px;
	margin-right: 2px;
}

.kategorialistaus a{
	display: inline-block;
	font-weight: 700;
}

.julkaisudata{
	margin-bottom: 45px;
	padding-top: 15px;
	font-size: 14px;
	border-top: 1px solid var(--line);
}

.julkaisudata .separator{
	padding: 0 10px;	
	color: var(--turkoosi);
}

.julkaisudata .categorylinks a{
    margin-right: 5px;
}

.ekabloginosto{
	padding-bottom: 25px;
	margin-bottom: 40px;
}

.ekabloginosto-kuva{
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.ekabloginosto-kuva img, .artikkelinosto img{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 25px;
}

.artikkelinosto{
	padding-top: 20px;
    padding-bottom: 20px;
	margin-bottom: 40px;
	position: relative;
}

.artikkelinosto h3{
	margin-bottom: 10px;
}

.artikkelinosto .julkaisudata, .ekabloginosto-sisalto .julkaisudata{
	margin-bottom: 15px;
}

#sivutus{
	display: block;
}

#sivutus .page-numbers{
margin: 0 10px;	
}

@media (min-width: 992px){
#subhero{
	padding-top: 60px;
	padding-bottom: 40px;
}
	
.ekabloginosto{
	display: flex;
	align-items: center;	
}
	
.padding-large .ekabloginosto{
	padding-top: 60px;
	padding-bottom: 60px;
}
	
.ekabloginosto-kuva{
	width: 50%;
	margin-bottom: 0;
}
	
.ekabloginosto-sisalto{
	width: 50%;	
}	

}

@media (min-width: 1200px){		
.kategorialistaus li{
	display: table;
}
}

/* ===========
9. FOOTER
============= */

footer ul{
	list-style: none;
}

#footer-apupalkki{
	padding-top: 15px;
	padding-bottom: 13px;
}

.footer-linkit a{
	font-weight: 400;
	font-size: 16px;
	margin-right: 20px;
}

.footerpalstat a{
	font-weight: 400;
	font-size: 18px;
}

.footerpalstat .grid3{
	padding-bottom: 20px;
}

.somelinkit{
	margin-bottom: 20px;
	margin-top: 20px;
	line-height: 0;
}

.somelinkit a{
	width: 35px;
	height: 35px;
	margin-right: 10px;
	display: inline-block;
}

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

#selekti{
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	padding: 20px;
}

#selekti p{
	margin-bottom: 0;
}

#selekti a{
	font-weight: 400;
	color: #c1c1c1;
}

@media (min-width: 992px){
.footerpalstat .grid4{
	padding-bottom: 0px;
}

.somelinkit{
	float: right;
}	

.somelinkit{
	margin-bottom: 0;
	margin-top: 0;
}	
.footer-linkit{
	float: left;
	display: inline-block;
}	
	
.footer-linkit a{
	line-height: 35px;
}		
}

/* ===========
10. MISCELLANEOUS
============= */

.alaraita{
	border-bottom: 1px solid var(--line);
}

footer .alaraita{
	border-bottom: 1px solid var(--line-dark);
}

/* ===========
11. MODULES
============= */

/*
11.1 PERUSSISÄLTÖ
*/
.perussisalto-palsta{
	padding-bottom: 20px;
}

@media (min-width: 768px){
.perussisalto-1 .perussisalto-palsta{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}		
}

@media (min-width: 992px){
.perussisalto-palsta{
	padding-bottom: 0px;
}

.perussisalto-1 .perussisalto-palsta{
	width: 80%;	
}	
	
.perussisalto-2 .perussisalto-palsta{
	width: 50%;	
}
	
.perussisalto-3 .perussisalto-palsta{
	width: 33.3332%;	
}
	
.perussisalto-4 .perussisalto-palsta{
	width: 25%;	
}	
}

@media (min-width: 1200px){
.perussisalto-1 .perussisalto-palsta{
	width: 60%;
}		
}

/*
11.3 KUVALLISET NOSTOT PALSTOISSA
*/

.kuvallinennosto-palsta{
	padding-top: 20px;
	padding-bottom: 20px;
}

.kuvallinennosto-palsta img{
	width: 100%;
	height: auto;
	margin-bottom: 25px;
}

@media (min-width: 768px){
	
.kuvallisetnostot .flexbox{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	
.kuvallinennosto-2 .kuvallinennosto-palsta{
	width: 50%;	
}
	
.kuvallinennosto-3 .kuvallinennosto-palsta{
	width: 50%;	
}
	
.kuvallinennosto-4 .kuvallinennosto-palsta{
	width: 50%;	
}	
}

@media (min-width: 992px){
	
.kuvallinennosto-palsta{
	padding-top: 0px;
	padding-bottom: 0px;
}	
	
.kuvallinennosto-2 .kuvallinennosto-palsta{
	width: 50%;	
}
	
.kuvallinennosto-3 .kuvallinennosto-palsta{
	width: 33.3332%;	
}
	
.kuvallinennosto-4 .kuvallinennosto-palsta{
	width: 25%;	
}	
}

/*
11.4 KUVANOSTOT
*/

.kuvanosto-kuva{
	margin-bottom: 50px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.kuvanosto-kuva img{
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 992px){
		
.kuvanosto{
	display: flex;
	align-items: center;
}

.kuvanosto-kuva{
	width: 66.666666%;
	margin-bottom: 0;
}
	
.kuvanosto-sisalto{
	width: 33.333333%;	
}	
	
.kuvanosto:nth-child(even){
	flex-direction: row-reverse;
}	
}


/*
11.5 TOIMINTAKEHOITE
*/

.toimintakehoitesisalto{
	padding-top: 40px;
	padding-bottom: 15px;
}

@media (min-width: 768px){
.toimintakehoitesisalto{	
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}	
}

@media (min-width: 1200px){
.toimintakehoitesisalto{	
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding: 60px 60px 35px 60px;
}	
}

/* LOMAKE */

.wpcf7{
	width: 100%;
	padding-top: 20px;
	font-size: 14px;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
	text-align: left;
}
.wpcf7 input, .wpcf7 textarea{
background-color: #fff;
width: calc(100% - 20px);
padding: 5px 10px;	
border: 1px solid var(--tumma);
/*box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2);	*/
}

.wpcf7 textarea{
height: 120px;	
}

.wpcf7 input{
height: 32px;
line-height: 32px;
}

.wpcf7 input.wpcf7-submit{	
	display: inline-block;
	text-decoration: none;
	padding: 10px 30px 10px 30px;
	-webkit-transition: background 300ms ease;
	transition:         background 300ms ease;
	font-size: 18px;
	border: 0;
	/*display: inline-block;
	text-decoration: none;
	padding: 10px 30px 10px 30px;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	border-shadow: none;*/
	width: auto;
	height: auto;
}

.wpcf7 input.wpcf7-submit:hover{
	text-decoration: none;
}

.wpcf7 .wpcf7-checkbox input{
	width: auto;
	height: auto;
	display: inherit;
	margin-right: 10px;
}

.wpcf7 span.wpcf7-list-item{ 
display: block;
}
.wpcf7 span.wpcf7-list-item label{
	display: flex;
	align-items: center;
}

.wpcf7 span.wpcf7-list-item input { 
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

@media (min-width: 992px){
	.wpcf7 .clear .grid2:first-child{
		margin-right: 10px;		
		width: calc(50% - 10px);
	}
	.wpcf7 .clear .grid2:last-child{
		margin-left: 10px;		
		width: calc(50% - 10px);
	}
}

/* SAAVUTETTAVUUS */

/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	/* many screen reader and browser combinations announce broken words as they would appear visually */
	word-wrap: normal !important;
}

/* must have higher specificity than alternative color schemes inline styles */
.skip-link {
	background-color: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	color: #21759b;
	display: block;
	font-size: 16px;
	font-weight: 700;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: none;
	top: -9999em;
}

.skip-link:focus {
	clip: auto;
	height: auto;
	left: 6px;
	top: 7px;
	width: auto;
	z-index: 100000;
}