@charset "UTF-8";
/* CSS Document */

.valikko {
	display: inline-flex;
    justify-content: center;
    position: relative;
	float: left;
    width: 100%;
    margin: 0;
    padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight:800;
    text-align: center;
	text-transform: uppercase;
	color:#000;
    border: 0;
	z-index:1010;
}

.valikko li {
    text-align: center;
}

.valikko .paanavi {
    height: 55px;
    padding-top: 23px;
	margin: 0;
    text-decoration: none;
	text-transform: uppercase;
    -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
}


ul.valikko a:hover, ul.valikko a:active, ul.valikko a:target, ul .paanavi a:hover, ul .paanavi a:active, ul .paanavi a:target, .alanavi:hover, .alanavi:target, .alanavi:active {
	color: #FFFFFF !important;
}

.paanavi.paasivu {
    width: 25%;
}

ul.valikko a, .paavalikko a, .paanavi a, .alanavi a {
	text-decoration: none;
}



/* NAVIVÄRIT */
.paanavi.etusivu, .alanavi.etusivu {
    background-color: #FFC602;
}

.paanavi.ohjelmisto, .alanavi.ohjelmisto {
    background-color: #49b0c3;
}

.paanavi.keikkakalenteri, .alanavi.keikkakalenteri {
    background-color: #d6579c;
}

.paanavi.rollo, .alanavi.rollo {
    background-color: #90bf6b;
}

.paanavi.viisikymppiset, .alanavi.viisikymppiset {
    background-color: #d6579c;
}

.paanavi.arkisto, .alanavi.arkisto {
    background-color: #f18003;
}




/*–––– MOBILEBVALIKKO ––––*/
.mobilevalikko, .paanavi.mobile {
    visibility: hidden;
    display: none;
}

.mobilevalikko:hover .pudotusvalikko, .mobilevalikko:active .pudotusvalikko, .mobilevalikko:target .pudotusvalikko {
    visibility: visible;
	display:block;
    max-height: 40vh;
    max-width: 100vw;
	height: auto;
}

.paanavi:hover .pudotusvalikko, .paanavi:active .pudotusvalikko, .paanavi:target .pudotusvalikko, .paanavi:hover .alanavi, .paanavi:active .alanavi, .paanavi:target .alanavi {
    color: #000000;
}


/* PUDOTUSVALIKKO */
.pudotusvalikko {
	visibility: hidden;
    max-height: 0;
    max-width: 0;
    /* transitions */
    -webkit-transition: all .4s ease;
       -moz-transition: all .4s ease;
        -ms-transition: all .4s ease;
         -o-transition: all .4s ease;
            transition: all .4s ease;
	padding: 0;
	list-style:none;
	position:relative;
    top: 1vh;
	z-index:1000;
	border: 0;
    background-color: inherit;
    box-shadow: 0 10px 10px rgb(0, 0, 0, .4);
}

.pudotusvalikko li {
    width: 100%;
}

.alanavi.mobile {
    float: left;
	margin: 0;
    padding: 5px 0;
	text-transform: uppercase;
}

.alanavi {
	font-size: 1.1vw;
	visibility: hidden;
    display: block;
	position: relative;
	clear: left;
	padding-bottom: 10px;
}

.alanavi a:link, .alanavi a:visited {
	clear:left;
	line-height:1.5em;
	border:none;
	position:relative;
	z-index:1500;
}

.alanavi:hover a, .alanavi a:active, .alanavi a:hover {
	clear:left;
	border:none;
	position:relative;
	z-index:1000;
}

.alanavi:hover ul.navigation-3 {
	display:block;
}

.alanavi ul.navigation-3 {
	display:none;
	margin:0;
	list-style:none;
	position:absolute;
	top:-2px;
	padding:1px 1px 0 1px;
	z-index:1100;
}