/*
 Theme Name:   Pyrinto
 Template:     aate
 Text Domain:  pyrinto
*/

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


html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

/***********************
*       TYPOGRAFIA     *
***********************/

h1, h2, h3, h4, h5 {
    font-family: "Teko", sans-serif;
    color: #ff0000;
}

h1 {
    font-size: 4em;
    color: #ff0000;
}

h2 {
    font-size: 4em;
    line-height: 1em;
    margin-bottom: .4em;
}

.page-template-page-jaoston-etusivu h2,
.page-template-page-seuran-etusivu h2 {
    font-size: 4em;
}

a, a:visited {
    text-decoration: none;
    color: #E81623;
    text-decoration: underline;
}

a:hover, a:focus {
    color: #333;
}

/***********************
*       HEADER         *
***********************/


header .container {
    height: 100%;
    width: 100%;
    clear: both;
    position: relative;
}

header .row {
    position: absolute;
    top: calc(50% + 50px);
    transform: translateY(-50%);
}

header p.nosto {
    text-align: left;
}

.ylapalkki button.menu-plus, .ylapalkki button.menu-plus:focus, .ylapalkki button.menu-plus:hover {
    background-color: transparent;
    border: 0 solid transparent !important;
    color: #fff !important;
    height: 35px;
    width: 35px;
}


.header-kaari {
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
}

.logo {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
}


span.jaosto {
    color: #fff;
    text-transform: uppercase;
    font-size: 3em;
    line-height: 0;
    margin-bottom: 0;
    font-weight: 400;
    margin-top: .15em;
    margin-left: .3em;
    font-family: "Teko", sans-serif;
}

main.no-header-image {
    padding-top: 80px;
}

/***********************
*       NAV         *
***********************/
    
.menu-plus:before {
    content: '\002B';
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.menu-minus:before {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
       margin-left: 1px;
    margin-top: 0;
}

.jaosto-dropdown .menu-plus {
    display: block;
}

.jaosto-dropdown .menu-plus:before {
    content: "v";
}

#menu-jaostot {
    margin-left: 10px;
}

#menu-jaostot li:hover a {
    border-bottom: 2px solid transparent;
}

    
/***********************
*        RAKENNE       *
***********************/

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 25px;
    padding-left: 25px;
}

.container, .container-fluid {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
}

.overflow {
    overflow: inherit;
}

.row, .container {
    max-width: 1200px;
    margin: 0 auto;
}

.container-fluid.wide .row {
    max-width: 100%;
}
.text {
    padding-top: 50px;
    padding-bottom: 50px;
    order: 2;
}

.background {
    padding-left: 0;
    padding-right: 0;
    height: 300px;
    order: 1;
}

.kuva {
    order: 1;
}

.teksti {
    margin-top: 30px;
    order: 2;
}

.background-image {
    background-size: cover;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.laatikko {
    height: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}

.laatikkokuva {
    height: 200px;
    width: 100%;
    background-position: center;
    background-size: cover;
}

.laatikkoteksti {
    padding: 20px;
}

.alamargin {
    margin-bottom: 20px;
}

.logot img {
    margin: 0 auto;
    width: 100%;
    max-width: 250px;
}

ul.nav {
    padding-top: 20px;
}

a:focus {
    color: #E81623;
    text-decoration: underline !important;
}

a.button:focus, nav a:focus {
    text-decoration: none !important;
}

img {
    width: 100%;
}

iframe {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

table {
    max-width: 100% !important;
}

.tab {
    display: flex;
    flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 40px;
}

    .tab button {
        display: block;
        background-color: inherit;
        padding: 22px 16px;
        width: auto;
        border-bottom: 2px solid #e81623;
        border-color: #e81623;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 1.1em;
        color: #ffffff;
        font-weight: 700;
        padding: 6px 15px 1px 15px;
        margin: 5px 5px;
        background: #e81623;
        font-family: "Teko", sans-serif;
        font-size: 1.3em;
        font-weight: 500;
        border-style: solid;
    }
    

    
.tab button {
        display: flex;
        align-items: center;
    }
    


.tab button.active,
.tab button:hover {
                color: #e81623;
                background-color: #fff;
    }


.desktop-only,
.show-992 {
    display: none;
}

/*********************
*   KUVA-LINKKI      *
*********************/

.kuva-linkki-elementti {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.kuva-linkki .col-md-12 {
    padding-left: 15px;
    padding-right: 15px;
}

/*********************
*   KUVAGALLERIA     *
*********************/

.wrapper.galleria {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.kuvagalleriakuva {
    height: 300px;
    background-size: cover;
    background-position: center;
    transition: .3s all;
    cursor: pointer;
    margin-bottom: 15px;
}

.kuvagalleriakuva:last-child{
    margin-bottom: 0;
}

.kuvagalleriakuva:hover {
    opacity: .7;
}

.light-box {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 999;
    top: 0;
    left: 0;
    cursor: pointer;
}

.light-box img {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    width: auto;
}
 
.light-box p {
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}
 
 .light-box img:hover {
    cursor: pointer;
}

/*********************
*  yleiset luokat  *
*********************/

.nosto p, p.nosto {
    font-size: 1.1em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

.no-paddings {
    padding-top: 0;
    padding-bottom: 0;
}

.padding-bottom-0 {
    padding-bottom: 0;
}

.padding-top-0 {
    padding-top: 0;
}

.padding-top-puolikas {
    padding-top: 40px;
}

.center img {
    margin-left: auto;
    margin-right: auto;
}

.kapea {
    max-width: 900px;
}

/**** LOMAKE ****/

.lomake-shortcode {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}

.wpforms-submit-container button {
    font-family: "Teko", sans-serif !important;
    font-size: 1.4em !important;
    background: #e81623 !important;
    padding: 4px 20px 0 20px !important;
    border-radius: 0 !important;
    border: 2px solid #e81623 !important;
    color: #fff !important;
}

.wpforms-submit-container button:hover, .wpforms-submit-container button:focus {
    border-color: #e81623 !important;
    background: #fff !important;
    color: #e81623 !important;
}

.wpforms-container input, .wpforms-container select {
    border-radius: 0 !important;
}

/*********************
*    KALENTERI       *
*********************/


table.calendar {
    width: 100%;
    margin-bottom: 2em;
    border-bottom: 1px solid #dfdfdf;
}

table.taulu {
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
}

.calendar tr:nth-child(odd), .taulu tr:nth-child(odd) {
    background: #EFEFEF;
}

.calendar tr.heading, .taulu tr.heading {
    background: #e81623;
    color: #fff;
    font-weight: 700;
}


.calendar tr td, .taulu tr td {
    padding: 7px 10px;
    width: 50%;
    vertical-align: baseline;
}

.taulu tr td.info-2:nth-child(1) {
     width: 60%;
}

.taulu tr td.info-2:nth-child(2) {
     width: 40%;
}

.taulu tr td.info-3:nth-child(1) {
     width: 37%;
}

.taulu tr td.info-3:nth-child(2) {
     width: 37%;
}

.taulu tr td.info-3:nth-child(3) {
     width: 26%;
}

.taulu-outer {
    position: inherit;
    overflow-x: scroll;
    padding-bottom: 20px;
}


/* Tapahtumat */

.single .tapahtuma h1 {
    margin-bottom: .4em;
}

.tapahtuma .main-img {
    margin-bottom: 50px;
}


.cta-alasivu {
    margin-top: 90px;
    margin-bottom: -90px;
}
/*********************
*   SEURAN ETUSIVU   *
*********************/

main.seuran-etusivu {
    background-color: #F0EFEC;
}

.abs-bottom-left {
    position: absolute;
    height: auto;
    width: 40%;
}

.artikkeli,
.ala-alueet .col-md-12.col-lg-3,
.somekanavat .col-md-12.col-lg-3 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.jaoston-etusivu .otsikko-ingressi {
    padding-top: 30px;
}

.seuran-etusivu .otsikko-ingressi {
    padding-top: 30px;
}

.jaostot-etusivunosto {
    background: #e81623;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 25px;
      transition: 0.5s;
      margin-top: -12px;
}

.jaostot-etusivunosto a {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 50px 5px 40px 5px;
    text-decoration: none !important;
}

.jaostot-etusivunosto a:nth-child(8) {
    border-bottom-color: #e81623;
}

.jaosto-laatikko h3 {
    color: #fff;
    font-size: 1.8em;
    text-align: center;
     transition: 0.5s;
     margin-bottom: -10px;
}

.jaosto-laatikko {
    height: 100%;
    display: inline-block;
    width: 100%;
}

.jaosto-tutustu {
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
    opacity: 0;
     transition: 0.5s;
}

.jaostot-etusivunosto a:hover .jaosto-tutustu {
	 /* animation: hover_anim 0.4s ease-in-out;
	 animation-delay: 0.2s;
	 animation-fill-mode: forwards;*/
	 opacity: 1;
	 margin-bottom: -20px;
}

.jaostot-etusivunosto a:hover h3 {
	/* animation: hover_anim2 0.4s ease-in-out;
	 animation-delay: 0.2s;
	 animation-fill-mode: forwards;*/
	   /* margin-top: -12px; */
    margin-top: -10px;
    margin-bottom: 0;
}


 /* @keyframes hover_anim {
	 0% {
		 transform: translateY(-8px);
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 100%;
	}
}

 @keyframes hover_anim2 {
	 0% {
		 transform: translateY(5px);
	}
	 100% {
	     transform: translateY(-5px);
		 
	}
}*/

.abs-bottom-right {
    position: absolute;
    right: 0;
    height: 105%;
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}

.uutiskuva {
      heighT: 370px;
    background-size: cover;
    background-position: center;
	position: relative;
}

.uutiskuva .paivays p {
	color: #fff;
	margin-left: 10px;
    margin-right: 10px;
    text-align: center;
}
.uutiskuva .paivays p.numero {
    margin-top: 8px;
    margin-bottom: 0;
	font-weight: 900;
	font-size: 26px;
	    text-align: center;
}
.uutiskuva .paivays p.kuukausi {
    margin-top: 0;
    margin-bottom: 8px;
	font-size: 12px;
}

.iso-uutinen {
    background-color: #fff;
	widtH: calc(100% - 30px);
	float: left;
	margin-right: 15px;
	margin-left: 15px;
	    margin-bottom: 20px;
}
.pienet-uutiset {
	widtH: calc(100% - 30px);
	margin-left: 15px;
	margin-right: 15px;
	float: left;
}

.pieni-uutinen {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
	margin-bottom: 20px;
	align-items: center;
}

.pieni-uutinen:last-child {
	margin-bottom: 0;
}
.pieni-uutinen .uutiskuva {
    widtH: 50%;
    float: left;
    height: 193px;
}

.pieni-uutinen .uutisteksti {
    width: 40%;
    float: left;
}

.pieni-uutinen h3 {
    min-height: 60px;
    margin-top: 1em;
}

.uutisteksti {
    padding: 0 25px;
}

.iso-uutinen .uutisteksti {
    padding: 10px 25px;
}

.uutisteksti h3 {
    margin-top: 1em;
    font-size: 1.5em;
}

.uutisteksti a.buttoni {
    display: inline-block;
}

.uutiskuva .paivays {
    position: absolute;
    background-color: #292525;
}

.uutisteksti a.button {
    font-size: 1.3em;
    padding: 5px 10px 3px 10px;
    margin-top: 4px;
}

.uutisteksti a.button:focus {
    color: #e81623 !important;
}




.list-bullet {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f27100;
    border-radius: 50%;
    left: -35px;
    top: 35px;
}

.tapahtumalista span {
    display: block;
}

.tapahtumalista-otsikko h3 {
    margin-top: 10px;
}

.tapahtumalista-sivu h2 {
    padding: 0 25px;
}

.tapahtumalista-otsikko h3 a {
    font-weight: 300;
    color: #ffcc00;
    text-decoration: none;
    
}

.tapahtumalista h3 a {
    text-decoration: none;
    font-size: 1.2em;
}

.tapahtumalista-otsikko h3 a:hover,
.tapahtumalista-otsikko h3 a:focus {
    text-decoration: underline !important;
}

span.tapahtumalista-pvm {
        font-family: roc-grotesk, sans-serif;
         font-weight: 300;
}

.row.tapahtumat {
    justify-content: center;
}


.menneet-tapahtumat {
    margin-top: 90px;
}
.tapahtuma-listalla {
    position: relative;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.puolikas-eka {
    width: 100%;
    float: left;
        padding: 0 25px;
}

.puolikas-toka {
    width: 40%;
    float: left;
        padding: 0 25px;
}

.tapahtumalista .col-md-12.col-lg-12 {
    padding: 0 0;
}

.tapahtuma-koriste {
    margin-top: -70px;
}



.tapahtumalista {
    max-width: 760px;
    margin-left: auto;
    text-align: left;
}

.tapahtumat h2 {
max-width: 735px;
    margin-left: auto;
    text-align: left;
}


.seuran-etusivu .tapahtumalista,
.seuran-etusivu .tapahtumat h2,
.seuran-etusivu .tapahtuma-listalla {
max-width: 100%;
}


/*************************
*    TAPAHTUMAKALENTERI  *
**************************/

.tapahtuma-listalla {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.tapahtuma-pvm {
    width: 100px;
    order: 2;
}

.tapahtumakuvaus {
    width: calc(100% - 100px);
    padding: 0 30px;
    order: 3;
}

.tapahtumakuva {
    display: none;
    width: 100%;
    order: 1;
    margin-bottom: 30px;
}

.tapahtuman-kuva {
    height: 160px;
    width: 100%;
    background-size: cover;
    background-position: center;
}


.tapahtuma-listalla h2 {
    color: #ffcc00;
    text-transform: uppercase;
    font-family: roc-grotesk, sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 0;
    font-size: 1.5em;
}

.tapahtuma-listalla h2 a {
    color: #ffcc00;
    text-decoration: none;
}

.tapahtuma-pvm-ympyra {
    background: #292525;
    height: 120px;
    width: 100px;
    border-radius: 0;
    position: relative;
}

.tapahtumat .tapahtuma-pvm-ympyra {
    width: 120px;
}

.page-template-page-seuran-etusivu .tapahtumat .tapahtuma-pvm-ympyra {
    width: 90px;
}

.seuran-etusivu .row.tapahtumat {
    padding-bottom: 50px;
}

.tapahtuma-ympyra-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
        font-family: "Teko", sans-serif;
    font-style: normal;
    text-transform: none;
    font-weight: 500;
    text-align: center;
    width: calc(100% - 10px);
}

.tapahtuma-ympyra-inner.yksi-paiva {
    top: calc(50% - 5px);
}

.tapahtuma-ympyra-inner p {
    margin-bottom: 0;
    text-align: center;
}

.tapahtumakuvaus p.teksti {
    margin-bottom: 0;
}

span.viikonpaiva, span.paiva-numero, span.viikonpaiva-2, span.paiva-numero-2 {
    display: block;
}

.paiva-numero {
    margin-top: .2em;
    font-size: 2.5em;
}

.paiva-numero-2 {
    margin-top: .1em;
    font-size: 1.6em;
}

span.viikonpaiva, span.viikonpaiva-2 {
    font-family: "Open Sans", sans-serif;
    margin-bottom: .6em;
}

p.tapahtumapaiva {
    color: #292525;
    font-style: normal;
    text-transform: none;
    font-weight: 500;
    margin-bottom: 0.3em;
}


.tapahtumakuvaus {
        width: calc(100% - 100px);
        padding: 0 30px;
        order: 2;
    }
    
    .tapahtumakuva {
        width: calc(35% - 50px);
        order: 3;
    }

    .tapahtuma-pvm {
        order: 1;
    }
    
/*********************
* JAOSTOJEN ETUSIVUT *
**********************/

.otsikko-ingressi a.button {
    margin-top: .7em;
}

.cta {
    background-color: #E81623;
}

.cta h2, .cta h3, .cta p, .cta a {
    color: #fff;
}

.cta p {
    font-size: 1.1em;
}

.harmaa {
    background-color: #EFEFEF;
}

.valkoinen-tausta {
    background-color: #fff;
}

.ajankohtaista .artikkelikirjoitus, .tapahtumat .artikkelikirjoitus {
    background-color: #EFEFEF;
}

.ajankohtaista.harmaa .artikkelikirjoitus, .harmaa .tapahtumat .artikkelikirjoitus {
    background-color: #fff;
}

.ajankohtaista .artikkelit {
    margin-top: .5em;
    max-width: 1180px;
    justify-content: center;
}


.kumppanit .fade-oikea.valkoinen {
    background: linear-gradient(to top, #fff 1%, transparent 35%);
    height: 100%;
    width: 100%;
    position: absolute;
}

.kumppanit .fade-oikea.harmaa {
    background: linear-gradient(to top, #EFEFEF 1%, transparent 35%);
    height: 100%;
    width: 100%;
    position: absolute;
}

.logorivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.logorivi a, .logorivi img {
    width: 100%;
}

.logo-1, .logo-2, .logo-3, .logo-4, .logo-5 {
    padding:10px;
}

.logo-1 {
    width: 100%;
    max-width: 260px;
}

.logo-2 {
    width: 50%;
    max-width: 160px;
}

.logo-3 {
    width: 33.3333%;
    max-width: 160px;
}

.logo-4 {
    width: 25%;
    max-width: 160px;
}

.logo-5 {
    width: 20%;
    max-width: 160px;
}

.logorivi {
    max-width: 560px;
    margin-left: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

h2.abs-otsikko {
    text-align: center;
    padding-top: .5em;
        color: #fff;
}


.page-template-default .cta .teksti-vasemmalla h2, .page-template-default .cta .teksti-vasemmalla p, .page-template-default .cta .teksti-vasemmalla ul, .page-template-default .cta .teksti-vasemmalla h3 {
    max-width: 560px;
    margin-left: auto;
    text-align: left;
}

.cta .fade-vasen {
    background: linear-gradient(to top, #E81623 1%, transparent 35%);
    height: 100%;
    width: 100%;
    position: absolute;
}


.cta .button, .cta .button:visited, .cta a.button, .cta a.button:visited {
    background-color: #fff;
    border: 2px solid #fff;
    color: #e61a26;
}

.cta .button:hover, .cta .button:visited:hover, .cta a.button:hover, .cta a.button:visited:hover,
.cta .button:focus, .cta .button:visited:focus, .cta a.button:focus, .cta a.button:visited:focus{
    background-color: #e61a26;
    color: #fff !important;
    border-color: #fff;
}

.cta a.button {
    margin-top: .5em;
}





.ala-alue-kortti {
    height: 400px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

.ala-alue-kortti h3 {
    font-size: 2.1em;
    margin-bottom: .5em;
}

.ala-alue-kortti p, .ala-alue-kortti h3 {
    color: #fff;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.ala-alue-kortti .button, .ala-alue-kortti .button:visited, .ala-alue-kortti a.button {
    background-color: #fff;
    border-color: #fff;
    color: #e81623;
    padding: 4px 20px 1px 20px;
    font-size: 1.4em;
}
.palvelulista {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
	     width: 100%;
}

.palvelulista .padding-min {
    padding-left: 15px;
    padding-right: 15px;
}
 .ala-alue-kortti {
	 position: relative;
	 overflow: hidden;
}
 .ala-alue-kuvaus {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 /*top: 75%;
	 padding: 1em;*/
	 color: #fff;
	 transition: top 0.2s ease-out;
	 box-sizing: border-box;
	 top: 80%;
        padding: 20px;
}


.ala-alue-fade {
    background: linear-gradient(to top, #e81623 2%, transparent 75%);
    height: 100%;
    width: 100%;
    position: absolute;
}
 
.ala-alue-kortti .palveluteksti {
	 top: 74%;
 }



 .ala-alue-kuvaus > p {
	 transform: translateY(-3em);
	 opacity: 0;
}
 .ala-alue-kortti:hover .ala-alue-kuvaus {
	 top: 0;
	 background: rgb(232,22,35,0.85);
}
 .ala-alue-kortti:hover .ala-alue-kuvaus > p {
	 animation: slide_ltr 0.4s;
	 animation-delay: 0.2s;
	 animation-fill-mode: forwards;
}

.ala-alue.button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.ala-alue-kortti:hover .ala-alue-button {
    background-color: transparent !important;
}

.ala-alueet .col-md-12.col-lg-3 {
    padding-left: 15px;
    padding-right: 15px;
}

.somekanavat .col-md-12.col-lg-3 {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
}

.somekanavat {
    margin-top: .5em;
}

 @keyframes slide_ltr {
	 0% {
		 transform: translateY(-3em);
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 100%;
	}
}

.somekortti h3 {
    color: #fff;
    font-size: 2em;
    margin-top: 1em;
}


.somekortti .laatikko {
    background: #e81623;
    text-align: center;
}

.somekortti i.fa-brands {
    color: #fff;
    font-size: 5em;
    padding-top: .1em;
}

.somekortti .laatikkoteksti {
    padding: 2em 2em 1.5em 2em;
}

.somekortti p {
    text-align: center;
}
.somekortti a {
    color: #fff;
    text-decoration: none;
}

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

.somekortti a:hover .laatikko {
    background: #292525;
}

/*
.somekortti a:hover h3, .somekortti a:hover i.fa-brands, .somekortti a:hover p {
    color: #333;
}*/

/*********************
*    ARTIKKELIT      *
*********************/

.single h1 {
    font-size: 3em;
}

.single h2, .tekstiblock h2 {
    font-size: 2rem;
    margin-top: 1.5em;
}

.single h3, .tekstiblock h3 {
    font-size: 1.6em;
    margin-top: 1em;
}

.tekstiblock h3 {
    margin-top: 1.5em;
}

img.artikkelikuva-single {
    margin-bottom: 1.5em;
}

.artikkeli, .tapahtuma {
    margin-bottom: 30px;
}

.artikkelikirjoitus {
    height: 100%;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: flex;
    flex-direction: column;
}

.artikkelikuva {
    height: 200px;
    background-size: cover;
    background-position: center;
    transition: all .5s;
}

.artikkeliteksti {
    padding: 30px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.artikkeliteksti h3 {
    margin-bottom: .5em;
    font-size: 1.7em;
    line-height: 1.1em;
}

.artikkeliteksti a {
    text-decoration: none;
}

.artikkeliteksti a.button {
    font-size: 1.3em;
    padding: 4px 17px 2px 17px;
}


.artikkelisivu .artikkelikirjoitus {
    background: #EFEFEF;
}


p.julkaistu {
    font-size: .9em;
    text-align: left;
    margin-top: 0;
    margin-bottom: .5em;
}

p.teksti {
    margin-bottom: 1.2rem;
}

p.alin {
    display: flex;
    margin-top: auto;
    border: 0;
    outline: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0;
}

.single h1 {
    margin-bottom: 0;
}

.pieni-kuva img {
    width: auto;
    max-width: auto;
}

.single p.paivays {
    margin-top: -.2em;
    margin-bottom: 1.5em;
}

/*********************
*    YHTEYSTIEDOT    *
*********************/

.row.henkilot {
    padding-left: 10px;
    padding-right: 10px;
}


.henkilokuva, .henkilotekstit p, .henkilotekstit h2, .henkilotekstit h3 {
    width: 100%;
    text-align: center;
}

.henkilokuva img {
    width: 100%;
    /*border-radius: 50%;*/

    margin: 0 auto;
}

.henkilo {
    margin-bottom: 0;
    justify-content: center;
    background-color: #EFEFEF;
    height: 100%;
}

.henkilot .col-md-12.col-lg-3 {
    margin-bottom: 30px;
}

.henkilotekstit h3, .henkilotekstit h2 {
    font-size: 2em;
}

.henkilotekstit {
    padding: 1.5em;
}

.yhteys-otsikko h2 {
    font-size: 3em;
    margin-bottom: .6em;
}

.yhteystieto {
    margin-bottom: 40px;
}

.yhteys a, .yhteys a:visited {
    text-decoration: none;
}

.yhteystiedot-yla .row,
.yhteystiedot-ala .row {
    max-width: 1000px;    
}

.yhteystiedot-yla iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.yhteystiedot-yla .teksti-vasemmalla {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-right: 40px;
}

.yhteystiedot-yla h2 {
    font-size: 2.5em;
}

.yhteystiedot-yla h3 {
    margin-top: 1.3em;
    margin-bottom: .2em;
        color: #292525;
}

.yhteystiedot-ala h3 {
    color: #292525;
    margin-bottom: .1em;
    
}

/*********************
*  VAIN MALLIULKASSA *
*********************/

.text h2, .text p {
    max-width: 700px;
}

.page-header {
    max-height: 400px;
    position: relative;
}

.jaosto-header, .home .header-image, .page-header.jaosto-header {
    max-height: 1200px;
    position: relative;
    height: calc(100vh - 155px);
        min-height: 600px;
}



.ylapalkki {
    background-color: #E81623;
    box-shadow: 0 0 6px rgba(0, 0, 0, .3);
}

a.nav-link, a.ylabutton, ul.dropdown-menu a  {
    font-family: "Teko", sans-serif;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 100;
}

ul.dropdown-menu a  {
    font-size: 1.2em;
}

.dropdown-menu li {
    background-color: #E81623;
}

.dropdown-item {
    padding: 5px .65em;
}

.dropdown-menu a {
    border-bottom: 0 solid transparent !important;
}

.dropdown-menu li:hover a, .dropdown-menu li:focus a, .navbar a:hover {
    color: #fff !important;
}

.dropdown-menu li:hover, .dropdown-menu li:focus {
    background-color: #fff !important;
    color: #E81623 !important;
}

.dropdown-menu li:hover .dropdown-menu, .dropdown-menu li:focus .dropdown-menu,
.dropdown-menu li:hover .dropdown-menu a, .dropdown-menu li:focus .dropdown-menu a{
    background-color: #E81623 !important;
    color: #fff !important;
}

.dropdown-menu li .dropdown-menu li:hover {
       background-color: #fff !important;
    color: #E81623 !important; 
}
.dropdown-menu li .dropdown-menu li:hover a {
       background-color: #fff !important;
    color: #E81623 !important; 
}


.dropdown-menu li:hover a, .dropdown-menu li:focus a {
    color: #E81623 !important;
}

a.ylabutton {
    background: #292525;
    padding: 2px 17px;
    margin-left: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar a.ylabutton:hover, .navbar a.ylabutton:focus, .navbar a.ylabutton:visited:hover, .navbar a.ylabutton:visited:focus {
    background: #fff;
    color: #292525 !important;
}
.ylabutton .fa-external-link-alt {
    font-size: .7em;
    margin-right: .3em;
}

a.nav-link, .navbar a, a.nav-link:visited, .navbar a:visited {
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 0;
}

a.nav-link:hover, a.nav-link:focus {
    color: #fff !important;
}

.button, .button:visited, a.button, a.button:visited {
    background-color: #e61a26;
    border: 2px solid #e81623;
    padding: 11px 25px 7px 25px;
    color: #fff;
    display: inline-block;
    font-size: 1.6em;
    font-weight: 500;
    font-family: "Teko", sans-serif;
    letter-spacing: 0;
    text-transform: none;
    width: auto;
    text-decoration: none;
    text-align: center;
    text-indent: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    transition: all .2s ease-in-out;
    border-radius: 0;
}

.button:hover, .button:visited:hover, a.button:hover, a.button:visited:hover,
.button:focus, .button:visited:focus, a.button:focus, a.button:visited:focus {
    text-decoration: none;
    background-color: #fff;
    color: #e61a26 !important;
    border-color: #e61a26;
}

.page-template-default footer, .page-template-page-sivukopio footer {
    background-color: #292525;
    margin-top: 90px;
}

footer {
    background-color: #292525;
}

footer h2,
.page-template-page-jaoston-etusivu footer h2,
.page-template-page-seuran-etusivu footer h2{
    font-size: 1.6em;
}

#footer-palsta-5 h2:nth-of-type(2) {
    margin-top: 40px;
}

footer a, footer a:visited,
footer p, footer ul {
    color: #fff;
}

footer ul {
text-align: center;
}

footer a:hover, footer a:focus {
    color: #E81623;
}


footer ul {
    list-style: none;
    padding-inline-start: 0;
        line-height: 140%;
}

footer li {
    margin-bottom: .5em;
}



    
.footer-col, .footer-col-first {
     width: 100%;
     padding: 25px 25px;
}
    
footer img {
    max-width: 100px !important;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.copy-container {
    background: #1d1b1b;
    padding: 10px 0;
}

p.copyright {
    font-size: .8em;
    margin-bottom: 5px;
    text-align: center;
}
footer .container {
    padding-top: 50px;
    padding-bottom: 40px;
}


@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 576px) {
    .jaostot-etusivunosto a {
        width: 50%;
    }
    .jaostot-etusivunosto a:nth-child(7) {
        border-bottom-color: #e81623;
    }
}

@media only screen and (min-width: 768px) {
    
    h1 {
        font-size: 5em;
    }
    
    .page-template-page-jaoston-etusivu h1,
    .page-template-page-seuran-etusivu h1 {
        font-size: 6em;
    }
    
    .page-header {
    max-height: 500px;
}

    .page-template-page-jaoston-etusivu h2,
    .page-template-page-seuran-etusivu h2 {
        font-size: 5em;
    }

.seuran-etusivu .otsikko-ingressi {
    padding-top: 20px;
}

    .kuvagalleriakuva, .kuvagalleriakuva:last-child {
        height: 250px;
        margin-bottom: 0;
    }
    
    .henkilotekstit p, .henkilotekstit h2, .henkilotekstit h3 {
        text-align: left;
    }

.tapahtumakuva {
    display: block;
}
.tapahtumakuvaus {
        width: calc(65% - 50px);
    }

}

@media only screen and (min-width: 992px) {
    ul.nav {
        padding-top: 0;
    }
    
    a.nav-link, .navbar a, a.nav-link:visited, .navbar a:visited {
        border-bottom: 2px solid #E81623;
    }
    
    a.nav-link:hover, a.nav-link:focus {
        border-color: #fff;
    }

    
        .no-image main {
        padding-top: 80px;
    }
    
    ul.dropdown-menu ul.dropdown-menu {
        left: 100%;
        margin-top: -41px;
    }
    
    main.no-header-image {
        padding-top: 70px;
    }
    
    .artikkeli,
    .ala-alueet .col-md-12.col-lg-3,
    .somekanavat .col-md-12.col-lg-3 {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    div#navbar-collapse-1 {
    position: absolute;
    width: 100%;
    margin-left: -1rem;
    top: 50px;
    background: #e81623;;
    /* margin: 0 0 !important; */
}
    
    
#navbar-collapse-1 .nav {
    /* align-items: center; */
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding: 10px 1rem 0 1rem;
}
    
.ylapalkki .navbar-expand-lg {
        justify-content: space-between;
    }
    

     /* Dropdown menu */
    nav ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
    #navbar-collapse-1 {
        float: right;
        text-align: right;
        display: block !important;
    }
    nav ul {
        float: right;
        text-align: right;
    }
    
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .9rem;
        padding-left: .9rem;
    }
    
    .jaosto-dropdown .menu-plus {
        display: block;
    }
    
    .logo img, .shrink .logo img {
        height: 60px
    }

    .ylapalkki, .ylapalkki.shrink {
        padding: .3em 0;
    }
    
    .text {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .background {
        height: auto;
    }
    .background, .text, .kuva, .teksti {
        order: inherit;
    }
    .teksti {
        margin-top: 0;
    }
	.laatikko {
	    margin-bottom: 0;
	}
	.artikkelit .col-lg-4, .col-lg-3.tapahtuma, .col-lg-6.tapahtuma, .col-lg-4.tapahtuma, .henkilot .col-md-12.col-lg-3 {
        padding-right: 15px;
        padding-left: 15px;
    }
    .kuvagalleriakuva, .kuvagalleriakuva:last-child {
        height: 350px;
    }

.show-992 {
    display: block;
}

.seuran-etusivu .row.tapahtumat {
    padding-bottom: 0;
}

.seuran-etusivu .tapahtumalista{
    max-width: 735px;
}

.seuran-etusivu .tapahtumat h2 {
        max-width: 735px;
}

.seuran-etusivu .tapahtuma-listalla {
        max-width: 800px;
}

.seuran-etusivu .tapahtumakuvaus {
    width: calc(100% - 100px);
}

.puolikas-eka {
    width: 60%;
    float: left;
        padding: 0 25px;
}

.puolikas-toka {
    width: 40%;
    float: left;
    padding: 0 25px;
}

.jaostot-etusivunosto a {
    border: 1px solid #fff;
}

.jaostot-etusivunosto a:first-child, .jaostot-etusivunosto a:nth-child(2), .jaostot-etusivunosto a:nth-child(3), .jaostot-etusivunosto a:nth-child(4) {
    border-top-color: #e81623;
}

.jaostot-etusivunosto a:nth-child(5), .jaostot-etusivunosto a:nth-child(6), .jaostot-etusivunosto a:nth-child(7), .jaostot-etusivunosto a:nth-child(8) {
    border-bottom-color: #e81623;
}

.jaostot-etusivunosto a:first-child, .jaostot-etusivunosto a:nth-child(5) {
    border-left-color: #e81623;
}

.jaostot-etusivunosto a:nth-child(4), .jaostot-etusivunosto a:nth-child(8) {
    border-right-color: #e81623;
}

.jaostot-etusivunosto a {
    width: 25%;
}


.iso-uutinen {
	widtH: calc(50% - 30px);
	    margin-bottom: 0;
}
.pienet-uutiset {
	widtH: calc(50% - 30px);
}

.pieni-uutinen .uutiskuva {
    widtH: 55%;
}

.pieni-uutinen .uutisteksti {
    width: 45%;
}

.tab {
    padding-right: 20px;
}

p.kilpailusivu-pvm {
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 0;
}

.kilpailusivu h2 {
    font-size: 3.5em;
}

.logorivi {
    text-align: left;
}

.tab {
    display: block;
}

.tab button {
    width: 100%;
    margin: 15px 0;
}

.tab button:first-child {
        margin-top: 0;
    }
    
    .tab .tabcontent {
        float: left;
        padding: 0px 12px;
        padding-left: 50px;
        width: 100%;
        border-left: none;
        height: auto;
    }
    
    .tabcontent {
        animation: fadeEffect 1s; /* Fading effect takes 1 second */
    }
    
    .tab .tabcontent h2  {
        text-align: left;
    }
    
    .tab .tabcontent h2:after {
        margin-left: 0;
    }
    
    @keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    
    
    .cta .fade-vasen {
        background: linear-gradient(to right, #E81623 1%, transparent 35%);
    }
    
    .cta .teksti-vasemmalla h2, .cta .teksti-vasemmalla p, .cta .teksti-vasemmalla ul, .cta .teksti-vasemmalla h3 {
        max-width: 560px;
        margin-left: auto;
        text-align: left;
    }

.kumppanit .fade-oikea.valkoinen {
    background: linear-gradient(to left, #fff 1%, transparent 35%);
}

.kumppanit .fade-oikea.harmaa {
    background: linear-gradient(to left, #EFEFEF 1%, transparent 35%);
}

    h2.abs-otsikko {
        max-width: 580px;
        margin-left: auto;
        text-align: left;
    }

.somekanavat .col-md-12.col-lg-3 {
    margin-bottom: 20px;
}

     footer h1, footer h2, footer h3, footer h4, footer p, footer ul {
        text-align: center;
    }
    
}

@media only screen and (min-width: 1200px) {
	  .ylapalkki .navbar-expand-lg {
        justify-content: flex-start;
    }
        div#navbar-collapse-1 {
        position: static;
        width: auto;
        margin-left: 0;
        top: 0;
        background: transparent;
    }
    #navbar-collapse-1 .nav {
        justify-content: flex-end;
                padding: 0 1rem 0 1rem;
    }
    
        span.jaosto {
        font-size: 3.5em;
    }
    a.nav-link, a.ylabutton, ul.dropdown-menu a {
        font-size: 1.5em;
    }
    
        .page-template-page-jaoston-etusivu h2,
        .page-template-page-seuran-etusivu h2 {
        font-size: 5.5em;
    }
    .page-template-page-jaoston-etusivu h1,
    .page-template-page-seuran-etusivu h1 {
        font-size: 6.5em;
    }

    
    .footer-col {
         width: 18%;
    }
    
    .footer-col-first {
         width: 28%;
    }
        footer h1, footer h2, footer h3, footer h4, footer p, footer ul {
        text-align: left;
    }
    
    footer img {
    margin-left: 0;
}
}


@media only screen and (min-width: 1400px) {  
.desktop-only {
    display: block;
}
.seuran-etusivu .otsikko-ingressi {
    padding-top: 0;
}

.home .header-image {
    max-height: 1200px;
    position: relative;
    height: calc(100vh - 55px);
            background-position: center calc(50% - 40px);
}

}

@media only screen and (min-width: 1800px) {
    .container-fluid.wide .kuvagalleriakuva {
        height: 450px;
    }

}


@media only screen and (max-width: 991.9999px) {
    /* Valikko */
    a.ylabutton {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 0;
    text-align: center;
    padding: 5px;
}
.ylapalkki {
    margin-top: 40px;
}

.jaosto-dropdown #navbar-collapse-2 {
    display: block;
}

#menu-jaostot {
    margin-left: 30px;
    padding-top: 0;
}

#menu-jaostot ul.dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


span.icon-bar {
    color: #fff;
    border: 0 solid transparent;
}

}

@media only screen and (max-width: 480px) {
        .ylapalkki {
        margin-top: 40px;
    }
}