/*
 Theme Name:     Triplan -teema
 Theme URI:      https://wordpress.org/themes/wp-bootstrap-starter/
 Description:    A child theme of WPBS Theme made by MAK Media
 Author:         MAK Media Oy
 Author URI:     https://makmedia.fi/
 Template:       wp-bootstrap-starter
 Version:        1.4
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/****************************************
*** Theme customization starts below ***
*****************************************/

:root {
    --color-blue: #4576bf; /* Alkuperäinen väri #0086FA */
    --color-green: #5a822b; /* Alkuperäinen väri #39b54a */
}

html {font-size: 100% !important; font-size: 1em !important; font-size: 17px !important;}
.container {max-width: 1280px;}
.no-padding {padding: 0px !important;}
body {font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 300 !important;   line-height: 30px;}
strong {font-weight: 700;}
h1, h2, h3, h4, h5, h6, h7, h8 {font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 300 !important;}
h1:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 0 0 4px; /* This will center the border. */
    width: 150px; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid #FFFFFF; /* This creates the border. Replace black with whatever color you want. */
}

h2 {}
.entry-header {margin-top: 15px !important;}
.entry-title {font-size: 40px !important; line-height: 50px !important; border: none !important; padding: 0;}
.entry-meta {padding-top: 10px; padding-bottom:10px; color: #999999 !important;}
.ajankohtaista.entry-content {margin-top: 30px !important; margin-bottom: 30px !important; padding: 0px !important}
.entry-footer {padding: 0px !important; margin: 0px !important;}

h2.osio-otsikko, section h2:first-of-type {font-size: 45px;}

h2 {font-size: 40px;}
h3 {font-size: 35px;}
h4 {font-size: 30px;}
h5 {font-size: 25px;}
h6 {font-size: 20px; font-weight:600;}

a {color: var(--color-blue);}

.osio-otsikko:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 0 0 0; /* This will center the border. */
    width: 100px; /* Change this to whatever width you want. */
    padding-top: 15px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid; /* This creates the border. Replace black with whatever color you want. */
	border-bottom-color: var(--color-blue);
}

#masthead {padding: 0px !important; background-color: #FFFFFF !important; box-shadow: 0 0 0 0 transparent !important;}

.site-content {padding-top: 50px; padding-bottom: 50px;}
.content-area {margin-top:0px;}
.entry-content {margin-top: 0px; margin-bottom: 0px; padding-bottom: 40px;}

.piilota {display:none !important;}

/************************
 * TAUSTAVÄRIT BORDERIT *
 ************************/
.bg-harmaa {background-color: #F1F1F1;}
.border-top-1px-harmaa {border-top: 1px solid #E5E5E5 !important;}
.border-bottom-1px-harmaa {border-bottom: 1px solid #E5E5E5 !important;}


/************
 * BUTTONIT *
 ************/
.btn { font-weight: 600 !important; font-size: 16px !important; border: 2px solid !important; border-radius: 25px !important; padding: 15px 25px !important; line-height: 13px !important; max-height: 50px !important; }
.btn-valkoinen { background-color: #FFFFFF !important; border-color: #FFFFFF!important; color: var(--color-blue) !important; }
.btn-valkoinen:hover { background-color: transparent !important; color:#FFFFFF !important; }
.btn-harmaa { background-color: #EFF0F1 !important; border-color: #EFF0F1 !important; }
.btn-harmaa:hover { background-color: #999999 !important; border-color: #999999 !important; color: #EFF0F1; }
.btn-sininen-viiva { color: var(--color-blue) !important; border-color: var(--color-blue) !important; }
.btn-sininen-viiva:hover { color:#FFFFFF !important; background-color: var(--color-blue) !important; }
.btn-sininen { background-color: var(--color-blue) !important; border-color: var(--color-blue) !important; color: #FFFFFF; }
.btn-sininen:hover { background-color: transparent!important; border-color: var(--color-blue) !important; color: var(--color-blue) }

.helpdesk_button {
	background-color: var(--color-green);
	width:50px;
	right: -4px;
    cursor: pointer;
    overflow: hidden;
    position: fixed;
    display: block;
    top: 40%;   
    z-index: 2147000000;
    margin: 0px;
    padding: 10px 13px 10px 10px;
    border-collapse: collapse;
    border-spacing: 0px;
    border: medium none;
    outline: medium none;
    font-size: 0px;
    line-height: 0px;
	
	text-align:right;
}

.helpdesk_button:hover {right:0px;}

/**************
 * NAVIGAATIO *
 **************/
.site-header { background-color: transparent !important; padding: 0px !important; margin: 0px !important; box-shadow: 0 0 0 0 !important; }  
.site-header a { font-weight: 400; font-size: 16px; line-height: 15px; }
 
/* Max Mega Menu fork alkaa */
div#mega-menu-wrap-primary { /* border-bottom: 1px solid #FFFFFF; */}
ul#mega-menu-primary, ul#mega-menu-asiakkaat { padding-left: 10px !important; padding-right: 10px !important; }
 
/** Set a red background for the whole menu when it is sticky **/
/* div#mega-menu-wrap-primary.mega-stuck, div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary { background: rgba(255,255,255,1.0); transition: background 0.9s; border-bottom: 0.5px solid #E5E5E5; } */
div#mega-menu-wrap-primary, div#mega-menu-wrap-primary ul#mega-menu-primary { background: rgba(255,255,255,1.0); transition: background 0.9s; border-bottom: 0.5px solid #E5E5E5; }


/** Sticky menu item hover styling **/
div#mega-menu-wrap-primary ul#mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover { color: var(--color-blue) !important; text-decoration: underline !important; }
/* div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover { color: #333333 !important; text-decoration: underline !important; } */
/* div#mega-menu-wrap-primary ul#mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover { color: #333333 !important; text-decoration: underline !important; } */
div#mega-menu-wrap-primary ul#mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link, div#mega-menu-wrap-asiakkaat ul#mega-menu-asiakkaat > li.mega-current-menu-item > a.mega-menu-link {color: var(--color-blue) !important; font-weight:700 !important; text-decoration: underline !important; }
 
/** Make the top level links black when the menu is sticky **/
/* div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.mega-menu-item > a.mega-menu-link { color: #000000 !important; } */

/** Valikon buttonit **/
.btnn a.mega-menu-link, div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.btnn  >  a.mega-menu-link { font-weight: 400 !important; font-size: 16px !important; border: 2px solid !important; border-radius: 25px !important; padding: 12px 25px !important; line-height: 14px !important; max-height: 45px !important; display: inline-block !important; margin-top: 5px !important; margin-bottom: auto !important; margin-left: 20px !important;}
.btnn-valikko a.mega-menu-link { border-color: #ffffff !important; background-color: #ffffff !important; color:#000000 !important;}
.btnn-valikko a.mega-menu-link:hover { background-color: transparent !important; color:#FFFFFF !important; }

.btnn-valikko-sininen a.mega-menu-link { border-color: var(--color-blue) !important; background-color: var(--color-blue) !important; color:#FFFFFF !important;}
.btnn-valikko-sininen a.mega-menu-link:hover { background-color: #FFFFFF !important; color:var(--color-blue) !important; }

div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.btnn-valikko  >  a.mega-menu-link { border-color: var(--color-blue) !important; background-color: var(--color-blue) !important;  color: #FFFFFF !important; }
div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.btnn-valikko  >  a.mega-menu-link:hover { border-color: var(--color-blue) !important; background-color: #FFFFFF !important; color: var(--color-blue) !important; }

div#mega-menu-wrap-primary ul#mega-menu-primary > li.btnn.mega-current-menu-item > a.mega-menu-link, div#mega-menu-wrap-primary.mega-stuck ul#mega-menu-primary > li.btnn.mega-current-menu-item > a.mega-menu-link { font-weight:700 !important; text-decoration: none !important; }

li.mega-menu-item.lang-item {float: none !important; margin-right: 0px !important; margin-left:0px !important;} 
div#mega-menu-wrap-primary ul#mega-menu-primary > li.mega-menu-item.lang-item-fi > a.mega-menu-link::after {content: " | " !important; display: inline-block !important; margin-left: 7px !important; margin-right: 7px !important;} 

.dashicons.dashicons-search.search-icon { color: #000000 !important; }


/**********
 * HEADER *
 **********/
#hero { width: 100%; /*position: relative;*/ }
div.hero-wrap .min-korkeus { /* padding-bottom: 24.26%; */ min-height: 400px;} 
div.hero-wrap-asiakkaat .min-korkeus { /* padding-bottom: 14.26%; */ min-height: 250px; }
div.stretchy-wrapper-etus .min-korkeus { /* padding-bottom: 42.26%;*/ min-height: 610px;}
div.stretchy-wrapper-etus, div.hero-wrap, div.hero-wrap-asiakkaat { background-size: cover; background-repeat: no-repeat; background-position: center center; }
div.stretchy-wrapper-etus > div.overlay,
div.hero-wrap > div.overlay, div.hero-wrap-asiakkaat > div.overlay {
	/* position: absolute; top: 0; bottom: 0; left: 0; right: 0; */
	background: rgb(0,134,250);
	background: -moz-linear-gradient(-45deg, rgba(0,134,250,0.75) 0%, rgba(57,180,74,0.75) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(0,134,250,0.75) 0%, rgba(57,180,74,0.75) 100%);
	background: linear-gradient(-45deg, rgba(0,134,250,0.75) 0%, rgba(57,180,74,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0086fa",endColorstr="#39b44a",GradientType=1);
}

/* #hero .overlay { height: 100%; width: 100%; position: relative; } */
 
/* #hero .overlay .hero-teksti, #hero .overlay .etusivu-karuselli { position: relative; top: 55%; -webkit-transform: translateY(-57%); -ms-transform: translateY(-57%); transform: translateY(-57%); width: 100%; margin: 0 auto; } */

#hero .overlay .etusivu-karuselli {text-align: left; z-index: 10;}
#hero .overlay .etusivu-karuselli p.slide-ylaotsikko {color: #FFFFFF; font-weight: 600 !important;}
#hero .overlay .etusivu-karuselli h1 {font-size: 50px !important; font-weight: 300 !important; color: #FFFFFF; line-height: 60px !important;}
#hero .overlay .etusivu-karuselli .karuselli-teksti p {color: #FFFFFF !important; font-weight: 400; }
#hero .overlay .etusivu-karuselli .lappari {margin-right: -200px !important;}


#hero .overlay .hero-teksti {text-align: left;}
#hero .overlay .hero-teksti h1 {font-size: 50px !important; font-weight: 300 !important; color: #FFFFFF; line-height: 55px !important;}


/* Etusivun karuselli */
.valkoinen-palkki-karuselli {position: absolute; bottom: 0px; background-color: #FFFFFF; height: 25px; width: 100%;}

ol.carousel-indicators {/* bottom: -25px; */ bottom: 0px;}
.carousel-indicators li { width: 10px; height: 10px; border-radius: 100% !important; background-color: transparent; border: 2px solid #333333; opacity: 1;}
.carousel-indicators li.active { width: 10px; height: 10px; border-radius: 100% !important; background-color: #333333;	border: 2px solid #333333; opacity: 1}

.breadcrumbs, .breadcrumbs a {padding-top: 15px; padding-bottom: 15px; color: #666666 !important;}

.search-form {margin-top: 6px;}
.search-form .search-field {border: 1px solid #cccccc; border-top-left-radius: 25px; border-bottom-left-radius: 25px; height: 45px; margin-right: 0px !important; padding:15px 20px;}
.search-form .search-submit {border: none; background-color: #333;  width: 50px; height: 45px; border-bottom-right-radius: 25px; border-top-right-radius: 25px; margin-left:-5px!important;}
.search-form .search-submit .fa-search {color: #FFFFFF;}
.search-form .search-submit { }

.hakekentta { /* text-align: right !important; */ } 

/***********
 * ETUSIVU *
 ***********/
 .entry-content.etusivu {text-align: center; font-size: 28px;}

/* Uutisnostot */
 .news {padding-top: 50px; padding-bottom: 50px;}
 .latest-news article {display: flex;  flex-flow: column;}
 .article-image {position: relative;}
 .article-meta {padding: 9px; margin: 0; font-size: 16px; line-height: 12px; font-weight: 500; text-transform: uppercase; color: #FFFFFF; position: absolute; bottom: 0px; right: 0px; display: inline-block; background-color: #333333;}
 .tiedote .article-meta, .nyheter .article-meta {background-color: #39B44A;}
 .paivitykset .article-meta, .uppdatering .article-meta {background-color: var(--color-blue);}
 .tapahtumat .article-meta, .handelser .article-meta {background-color: #F6921E; color: #000000;}

 .article-info {background-color: #FFFFFF; padding: 10px; position: relative; flex-grow : 1;}
 .article-info h3 {font-size: 24px;}
 .article-info p {font-size: 16px; font-weight: 600;}
 .article-info h3:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 0 0 0; /* This will center the border. */
    width: 50px; /* Change this to whatever width you want. */
    padding-top: 7px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid; /* This creates the border. Replace black with whatever color you want. */
 }

 .tiedote .article-info h3:after, .frisattning .article-info h3:after {border-bottom-color: #39B44A;}
 .paivitykset .article-info h3:after, .uppdatering .article-info h3:after {border-bottom-color: var(--color-blue);}
 .tapahtumat .article-info h3:after, .handelser .article-info h3:after {border-bottom-color: #F6921E;}


/* Nostot */
 .nostot {padding-top:50px;}
 .nostot h2 {line-height: 50px;}
 .nosto h3 {font-size: 20px; font-weight: 500 !important; margin-top: 30px;}
 .nosto p{}


/****************
 * SISÄLTÖSIVUT *
 ****************/
.rivit, .tuote {padding: 50px 0px;}
.rivit {border-top: 7px solid #F1F1F1;}
.rivit h2 {font-size: 40px;}
/* .tuote h2 {font-size: 35px;} */ 


.palsta .btn {margin-bottom: 15px;}
.palstavali {display: block; width: 40px; height: 30px;}

/* ratkaisut */
span.sert-otsikko {font-size: 16px !important; font-weight: 600 !important;}
.tuote ul, .li_int ul {list-style: none; padding-left: 40px;}
.tuote ul li::before, .li_int ul li::before {
	font-family: "FontAwesome";
	font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased; 
    display: inline-block;
    margin: 0 10px 0px -30px;
    font-size: 19px;
    content: '\f00c';
    color: var(--color-blue);
}


.li_int {border-top: 7px solid #F1F1F1 !important; padding-top: 50px;}
.li_int h2 {font-size: 40px; font-weight: 300 !important;}
.li_int h2:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 0 0 0; /* This will center the border. */
    width: 150px; /* Change this to whatever width you want. */
    padding-top: 7px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid; /* This creates the border. Replace black with whatever color you want. */
	border-bottom-color: var(--color-blue);
}

.li_int h3 {font-size: 35px; color: #000000;} 


/****************
 * ASIAKASSIVUT *
 ****************/
 /* Etusivu */
 .tapahtuma-meta {margin-bottom: 5px; font-size: 18px; font-weight: 700;}
 .tapahtuma-otsikko {font-size:25px;}
 .tapahtuma-meta a, .tapahtuma-otsikko a {color: #000000;}
 .tapahtuma-meta a:hover, .tapahtuma-otsikko a:hover {color: var(--color-blue)}
 .tapahtuma-lue-lisaa {font-size: 16px; font-weight: 700;}

 /* Tuotteet */
 #tuoteryhma, #palvelu {padding-top: 50px; padding-bottom: 50px;}
 #tuoteryhma .tuote:nth-child(even), .ohjelista:nth-child(even), #palvelu:nth-child(even) {background-color: #F5F5F5;}
 .tuote .tuoteryhmalista span::after {content: ' | '}
 .tuote .tuoteryhmalista span:last-child:after {content: ' '}
 .rivi {border-bottom: 0px solid #CCCCCC; padding-bottom: 30px; margin-bottom: 0px; padding-top: 30px;}
 .rivi:last-child {border-bottom: none; padding-bottom: 0px; margin-bottom: 0px;}
 h2.tuote-title {font-size: 40px !important; line-height: 55px !important; border: none !important; padding: 0px; margin:0px;}

/* UKK */
.helpie-faq.accordions .search {width:100% !important;}

/**********
 * FOOTER *
 **********/

.footer-ota-yhteytta {padding-top:30px; padding-bottom: 30px;}

/* Sertifikaatit */
.sertifikaatit {padding-top: 40px; padding-bottom: 40px;}
.sertifikaatti-logot {text-align: center;}
.sertifikaatti-logot img {max-height: 150px !important;}

body:not(.theme-preset-active) footer#colophon {
/* height: 115px !important; */
padding-bottom:0px;
padding-top:0px;
color:#FFFFFF !important; 
text-align: left;
background-color: #666666 !important; 
font-size: 17px !important;} 

body:not(.theme-preset-active) footer#colophon h2 {font-weight: 700 !important; text-transform: uppercase; font-size: 17px !important; color: #FFFFFF !important;}
.footer-teksti {padding-left:55px; padding-bottom: 40px;}
.footer-info {padding-top:40px; padding-bottom: 40px;}
.footer-info ul {list-style: none;}
.footer-info ul li a{font-weight: 700 !important; text-transform: uppercase;}
.footer-some a {font-size: 30px !important; margin-right: 10px;}

.site-info {background-color: #FFFFFF; color:#808080; padding-top: 20px !important; padding-bottom: 0px !important; font-size: 17px !important;}
.site-info .footer-left {text-align: left;}
.site-info .footer-right {text-align:right;}
.site-info .footer-left ul {list-style: none; padding: 0px;}
.site-info .footer-left ul li {display: inline;}


/***************
 * BACK TO TOP *
 ***************/
 #back-to-top-btn { display: none; position: fixed; bottom: 20px; right: 20px; font-size: 26px; width: 50px; height: 50px; background-color: #fff; color: #333; cursor: pointer; outline: none; border: 3px solid #333; border-radius: 50%; transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-property: background-color, color; z-index:999999;}
 #back-to-top-btn:hover, #back-to-top-btn:focus { background-color: #333; color: #fff; }

/*
############################
# M E D I A  Q U E R I E S #
############################
*/
 
/* :: Bootstrap 4 breakpoints ::::::::::::::::::::*/
/* Extra small devices (portrait phones, less than 576px). No media query since this is the default in Bootstrap because it is "mobile first" */
@media (min-width: 176px) and (max-width: 575px) { 
    /* YLEISET */
    body { line-height: 25px; }
    .container { max-width:none; }
    /* section {padding-top: 55px; padding-bottom: 55px;} */
    div.hero-wrap .min-korkeus, div.hero-wrap-asiakkaat .min-korkeus { /* padding-bottom: 45.25%; */ min-height: 300px;  } 
    div.hero-wrap .min-korkeus, div.stretchy-wrapper-etus .min-korkeus {margin-top: 0px !important;}
    div.stretchy-wrapper-etus { /* padding-bottom: 110.25%; */ min-height: 500px; } 
    /* .overlay { padding-top: 90px; } */
    .etusivu-karuselli { text-align: center !important; }
    .karuselli-teksti { text-align: center; }
    .hero-teksti { padding-left: 10px !important; }
    #hero .overlay .karuselli-teksti .slider-kuva img { max-height: 300px !important; margin-top: 20px; }
    #hero .overlay .etusivu-karuselli h1 { font-size: 35px !important; font-weight: 300 !important; line-height: 40px !important; text-align: center; }
    #hero .overlay .etusivu-karuselli p.ylaotsikko { font-size: 17px; font-weight: 600 !important; line-height: 22px !important; text-align: center; }
    #hero .overlay .karuselli-teksti p { font-size: 16px; line-height: 26px !important; }
    #hero .overlay .hero-teksti h1 { font-size:35px !important; line-height: 40px !important; margin-bottom: 0px; text-align: center; }
    
    /* Typografia */
    h1 {font-size: 35px;}
    h1:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto 0 auto; /* This will center the border. */
    width: 150px; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid #FFFFFF; /* This creates the border. Replace black with whatever color you want. */
}
    
    h2.suuri {font-size: 30px;}
    h2 {font-size: 25px;}
    .li_int h2 {font-size: 25px;}
    
    .murupolku, .hakukentta {text-align: center !important;}
    .hakukentta div {margin-left: auto; margin-right: auto;}
    
 	/* FOOTER */
     footer.site-footer { text-align: center !important; } 
    .site-info .footer-left, .site-info .footer-right {text-align: center;}
    .footer-logo img {max-height: 50px;}
    .footer-teksti {padding-left: 0px; padding-right: 0px; padding-bottom: 10px;}
    
    /* Ratkaisut */
    img.tuoteikoni {max-width: 80px !important; text-align: center;}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) { 
    .container { max-width: 99% !important; }
    div.hero-wrap .min-korkeus, div.hero-wrap-asiakkaat .min-korkeus { /* padding-bottom: 45.25%; */ min-height: 300px; } 
    div.stretchy-wrapper-etus { /* padding-bottom: 110.25%; */ min-height: 400px; } 
    div.hero-wrap .min-korkeus, div.stretchy-wrapper-etus .min-korkeus {margin-top: 0px !important;}
    #hero .overlay .etusivu-karuselli h1 { font-size: 35px !important; font-weight: 300 !important; line-height: 40px !important; text-align: center; }
    #hero .overlay .etusivu-karuselli p.ylaotsikko { font-size: 17px; font-weight: 600 !important; line-height: 22px !important; text-align: center; }
    #hero .overlay .karuselli-teksti p { font-size: 16px; line-height: 26px !important; }
    #hero .overlay .hero-teksti h1 { font-size:35px !important; line-height: 40px !important; margin-bottom: 0px; text-align: center; }
    
    h1:after {
	content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto 0 auto; /* This will center the border. */
    width: 150px; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 4px solid #FFFFFF; /* This creates the border. Replace black with whatever color you want. */
}
    
    #back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; } 
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) and (max-width: 991px) {  
    .container { max-width: 99% !important; }
    div.hero-wrap .min-korkeus, div.hero-wrap-asiakkaat .min-korkeus { /* padding-bottom: 45.25%; */ min-height: 300px; } 
    div.stretchy-wrapper-etus .min-korkeus { /* padding-bottom: 80.25%; */ min-height: 600px; } 
    div.hero-wrap .min-korkeus, div.stretchy-wrapper-etus .min-korkeus {margin-top: 0px !important;}
    div.hero-wrap-asiakkaat .overlay { padding-top: 0px !important; }
    #hero .overlay .karuselli-teksti .slider-kuva img {max-height: 300px !important; margin-top: 20px;}
    #hero .overlay .etusivu-karuselli h1 {font-size: 40px; line-height: 50px !important;}
    #hero .overlay .karuselli-teksti p {font-size: 16px; line-height: 26px !important;}
    #back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; }
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1239px) {
	.site-info .left { text-align: left; }
	.site-info .right { text-align: right; }
    div.hero-wrap .min-korkeus { /* padding-bottom: 45.25%; */ min-height: 400px !important; }
    div.hero-wrap-asiakkaat .min-korkeus { /* padding-bottom: 45.25%; */ min-height: 250px !important; }
    div.stretchy-wrapper-etus .min-korkeus { /* padding-bottom: 45.26%; */ min-height: 600px; }
    #hero .overlay .karuselli-teksti .slider-kuva img { max-height: 400px !important; margin-top: 20px; }
    #hero .overlay .etusivu-karuselli h1 { font-size: 50px; line-height: 60px !important; }
    #hero .overlay .karuselli-teksti p { font-size: 18px; line-height: 28px !important; }
    #hero .overlay .etusivu-karuselli .lappari img { max-height: 520px; }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1240px) { #hero .overlay .etusivu-karuselli .lappari img {max-height: 1500px; } }

 a { -webkit-transition: 0.2s ease-out !important; -moz-transition: 0.2s ease-out !important;  -o-transition: 0.2s ease-out !important;  transition: 0.2s ease-out !important; } /* Linkkien hover fade-in */

/* Animations */
.btnEntrance { animation-duration: 0.5s; animation-fill-mode: both; animation-name: btnEntrance; }
/* zoomIn */
/* @keyframes btnEntrance { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 1; } } */

/* fadeInUp */
@keyframes btnEntrance { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.btnExit { animation-duration: 0.25s; animation-fill-mode: both; animation-name: btnExit; }

/* zoomOut */
/* @keyframes btnExit { from { opacity: 1; } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } */

/* fadeOutDown */
@keyframes btnExit { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } }


.piereg_login_wrapper p#nav a {display:none !important;}

.piereg_entry-content.pieregForgotPassword.pieregWrapper {padding-left:0px !important; margin-left: 0px; float: none;}

.pieregWrapper #pie_register .fields .fieldset label {
 width: 100% !important;
 padding: 0% 0% 0px 0%;
 font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 300 !important;
 color: #262626;
 font-size: 17px !important;
 position: relative;
 margin-top: 9px;
 margin-bottom: 8px;
 clear: both;
 overflow: hidden;
 list-style: none;
}
.pieregWrapper #pie_register .fields .input_fields, 
.pieregWrapper #piereg_login .input_fields, 
.piereg_login_container .piereg_login_wrapper .piereg_resetpassform .input_fields, 
.kirjaudu .fieldset input { 
 border-radius: 0px; border: 1px solid #333333;
 padding: 5px 8px;
 margin-top: 0px;
 margin-bottom: 0;
 width: 100% !important;
 display: inline-block;
 color: #848484;
 box-sizing: border-box;
 line-height: 24px;
 font-size: 16px;
}
                             
.piereg_login_wrapper {margin: 0px !important;}
                                
.piereg_login_wrapper .fieldset, .pie_register_reg_form .fieldset {padding: 0px !important;}
                                
.kirjaudu p.forgetmenot, .kirjaudu p.submit, .piereg_forgotpassword p {margin: 10px 0px 10px 0px !important; padding: 0px !important;}
                                                                
#pie_register_reg_form, .piereg_container { padding: 0px; clear: both; }


                                
.kirjaudu p.submit input, .rekisteroidy .pie_wrap_buttons input, input#lwa_wp-submit, input#wp-reset-submit {
 font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 700 !important;    
 padding: 10px 10px;
 float: none !important;
 width: 100% !important;
 font-size: 17px;
 color: #fff;
 border-bottom: 4px solid #1d8118;
 display: block;
 background: #229f1c;
 cursor: pointer;
 border-radius: 0px;
 margin: 0px;
}
.pieregWrapper #pie_register .fields .legend.error {display: none;} 
                                
.kirjaudu p.piereg_login_error a {color: #FFFFFF; text-decoration: underline;}

.pieregWrapper #pie_register .fields.label_top .pie_wrap_buttons { width: 100% !important; margin-top:15px !important} 

#pie_register .fields .fieldset span.show-hide-password-innerbtn.pass-eye-reg { right: 2%; bottom: 54%; }

#pie_register .fields .fieldset span.show-hide-password-innerbtn.pass-eye-login { right: 2%; bottom: 10%; }