#tapahtumat { }

.tapahtumakortti {
    box-sizing: border-box;
    display: block;
    float: left;
    width: 50%;
    position: relative;
    margin: 0 1% 1% 0;
}
.home .tapahtumakortti:nth-of-type(10) {
	display: none;
}

a.tapahtumalinkki {
    position: absolute;
    z-index: 90;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tapahtumakortti-kuva {
    width: 100%;
    height: auto;
    float: left;
    display: block;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tapahtumakortti-teksti {
    box-sizing: border-box;
    background-color: rgba(0, 158, 226, 0.9);
    color: #ffffff;
    position: absolute;
    z-index: 20;
    bottom: 0;
    left: 0;
    min-width: 55%;
    max-width: 100%;
    height: auto;
    padding: 25px;
    font-size: 14px;
    overflow: hidden;
}
.tapahtumakortti.mainos .tapahtumakortti-teksti{
	background-color: rgba(230, 0, 126, 0.9);
}

.tapahtumakortti-teksti h3 {
    text-transform: uppercase;
    font-weight: normal;
    font-family: CoreSansDS35Regular, sans-serif;
    font-size:1.7em;
    line-height: 1em;
    margin: 0.3em 0 0.5em 0;
    color: #ffffff;
}

.tapahtumakortti-teksti p {
    font-size: 1em;
    display: none;
    color: #ffffff;
	margin: 0px;
}

.tapahtuman-pvm {
    display: inline;
    width: 100%;
    float: left;
    font-size: 1.2em;
    line-height: 1.2em;
    text-transform: uppercase;
    margin-bottom: 0.3em;
    font-weight: bold;
}

.sivut-2x2 {
    padding-bottom: 100%;
    display: none;
}

.sivut-2x1 {
    padding-bottom: 49%;
    display: none;
}

/*  deskari */
@media (min-width: 1001px) {
	.tapahtumakortti { width: 24%; }
    .tapahtumakortti .sivut-2x2 { display: block; }
    .tapahtumakortti:first-of-type { width: 49%; clear: left; }
    .tapahtumakortti:first-of-type .sivut-2x2 { display: block; }
    .tapahtumakortti:first-of-type .tapahtumakortti-teksti p { display: block; }
	
	.tapahtumakortti:nth-of-type(6) {clear:left;}
}

/* tapahtumakorttien otsikot ... tämän lisäksi paddingiä pienemmäksi kapeilla näytöillä? */
@media (max-width: 1200px) and (min-width: 600px) {
    .tapahtumakortti-teksti h3 { font-size: 1.3em;}
	.tapahtuman-pvm {font-size: 1em;}
	.tapahtumakortti-teksti {padding: 10px;}
}
@media (max-width: 1315px) and (min-width: 600px) {.sisaNostoKortti .tapahtumakortti-teksti h3 { font-size: 1.1em;}}

/* tabletti */
@media (min-width: 600px) and (max-width: 1000px) {
	.tapahtumakortti { width: 32.2000%; }
    .tapahtumakortti .sivut-2x2 { display: block; }
    .tapahtumakortti:first-of-type  { width: 65.6000%; }
    .tapahtumakortti:first-of-type .sivut-2x2 { display: block; }
    .tapahtumakortti:first-of-type .tapahtumakortti-teksti p { display: block; }
	.tapahtumakortti:first-of-type  {clear: left;}
	.tapahtumakortti:nth-of-type(4) {clear:left;}
}

/* mobi */
@media (max-width: 600px) {
	.tapahtumakortti { width: calc(100% - 0px); margin: 8px 0; clear: both; }
    .tapahtumakortti .sivut-2x2 { display: block; }
    .tapahtumakortti .tapahtumakortti-teksti p { display: block; }
	.tapahtumakortti:first-of-type { top: -8px; }
	.tapahtumakortti-teksti {padding: 4%;}
	.tapahtumakortti-teksti p {display: block;}	
}


#hakuJaJarjestys {
    font-size: 14px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 36px;
    float: left;
}

#hakuJaJarjestys.tapahtumaHaku {}
#hakuJaJarjestys.naytteilleasettajaHaku {}

.jarjestaTapahtumat {
    float: left;
    margin-right: 1.5em;
    padding-bottom: 1em;
}

#hakuJaJarjestys .otsikko {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    margin-right: 10px;
}

.jarjestys {
    color: rgba(0,158,226,1.0);
    background-color: rgba(255,255,255,1.0);
    display: inline-block;
    width: auto;
    height: auto;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1em;
    padding:0.5em 0.3em 0.3em 0.3em;
    cursor: pointer;
    transition: all, .3s;
}

.jarjestys.valittu {
    color: #ffffff;
    background-color: rgba(0,158,226,1.0);
}


.tapahtumatVuosittain {
    float: left;
    font-size: 1em;
    margin-right: 1.2em;
    padding-bottom: 1em;
}

.tapahtumatVuosittain select {
    background-color: white;
    height: 36px;
}

#vuosiAlasveto {
    font-size: 1em;
    border-radius: 0;
}

.haeTapahtumat,
.haeNaytteilleasettajat {
    float: left;
    padding-bottom: 1em;
}

#hakukentta {
    font-size: 1em;
    height: 32px;
    padding: 0.5em;
    line-height: 1em;
}
#hakuNappi {
    display: inline-block;
    font-size: 1em;
    width:2.3em;
    height: 2.3em;
	font-weight: bold;
    color: transparent;
    cursor: pointer;
    line-height: 2.3em;
    text-align: center;
    transition: all, .3s;
    margin-right: 1em;
    background:  rgba(0,158,226,1.0) url("../kuvat/ikonit-yms/search_icon.png") center center no-repeat;
    background-size: 80% 80%;
}

#nollaaHaku {
    display: inline-block;
    float: left;
    width: auto;
    height: 2.3em;
    color: white;
	font-weight: bold;
	text-transform:uppercase;
    background-color: rgba(0,158,226,1.0);
    cursor: pointer;
    line-height: 1em;
    padding: 0.8em;
    text-align: center;
    clear: right;
    transition: all, .3s;
	margin-top: 0.1em;
}


#nollaaHaku::selection,
#hakuNappi::selection,
.jarjestys::selection {
    background-color: transparent;
    color: inherit;
}


/*   */
#tapahtumat { }

.tapahtumakortti {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
}

#tapahtumat.siirtyma .tapahtumakortti {
    opacity: 0;
}

/* MUILLA SIVUILLA TEHTÄVÄT YLIAJOT TAPAHTUMAKORTEILLE  */
/* HUOM BODY:N LUOKKA JULKKARISTA */
body.naytteilleasettajalle-templaten-luokka { }

body.naytteilleasettajalle-templaten-luokka #tapahtumat { }

body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti { width: 49%; !important; }

body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x2 { display: block; !important; }

body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x1 { display: none; !important; }

body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .tapahtumakortti-teksti p { display: none; }

/* deskari */
@media (min-width: 1001px) {
    /* HUOM BODY:N LUOKKA JULKKARISTA */
    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti { width: 49%; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x2 { display: block; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x1 { display: none; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .tapahtumakortti-teksti p { display: none; }
}

/* tabletti */
@media (min-width: 600px) and (max-width: 1000px) {
    /* HUOM BODY:N LUOKKA JULKKARISTA */
    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti { width: 100%; !important; margin:0 0 20px 0;}

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x2 { display: block; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x1 { display: none; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .tapahtumakortti-teksti p { display: none; }
}

/* mobi */
@media (max-width: 600px) {
    /* HUOM BODY:N LUOKKA JULKKARISTA */
    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti { width: 100%; !important;  margin:0 0 20px 0;}

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x2 { display: block; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .sivut-2x1 { display: none; !important; }

    body.naytteilleasettajalle-templaten-luokka #tapahtumat .tapahtumakortti .tapahtumakortti-teksti p { display: none; }
}