/* body {
background: whitesmoke;
color: black;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
} */


#parentWrapper {
font-family: 'Secular One', sans-serif;
background-size: cover;
font-weight: 200;
width: 100vw;
height: 100vh;
box-sizing: initial;
-webkit-font-smoothing: unset;
line-height: 0.9;
font-size: 1em;
max-width: 500px;
max-width: 68vh;
margin: auto;
position: relative;
background-color: #4ce4d7;
}

#parentWrapper .fas {
    margin-left: 0.3em;
    margin-right: 0.3em;
}
#parentWrapper .pieni {
   font-size: 0.8em;
}
#parentWrapper #tekijat .pieni {
    font-size: 0.85em;
    margin: 4vh 1em 0.5em;
    font-family: sans-serif;
    text-align: center;
    line-height: 1.1;
    font-weight: 400;
 }

#parentWrapper.level0 {
background: #4ce4d7;
}

#parentWrapper.level1 {
background: rgb(239,234,221,1);
background: linear-gradient(-60deg, rgba(239,234,221,1) 0%, rgba(239,195,7,1) 70%);
}
#parentWrapper.level2 {
background: rgb(222,210,200,1);
background: linear-gradient(-60deg, rgba(222,210,200,1) 0%, rgba(217,138,93,1) 70%);
}
#parentWrapper a {
color: unset;
    text-decoration: underline;
}

#parentWrapper .otsikko {
color: white;
font-family: 'Secular One', sans-serif;
text-transform: uppercase;
font-size: 2.2em;

}

#parentWrapper .otsikko img{
height: 6vh;
}
#headerWrapper {
position: relative; 
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
/*background: rgba(255, 255, 255, 0.5);
border-bottom: rgba(74, 84, 100,0.4);*/
z-index: 20;
padding: 2vh;
flex-direction: column;
padding-bottom: 1vh;
}

#mainWrapper  {
font-family: 'Secular One', sans-serif;
margin: 0.5vh;
}
#mainWrapper .circle .teksti {
    font-family: 'Secular One', sans-serif;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    color: black;
    background-color: whitesmoke;
    hyphens: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-top: 0.3em;
}

#teksti .ingressi {
    font-size: 1.1em;
    margin: 1.5em 0.5em 1em;
    color: black;
    text-align: center;
    line-height: 1.2;
    font-weight: 500;
}

#teksti .giffi {
    padding-top: 4vh;
    text-align: center;
    }
#teksti .giffi img{
height: 20vh;
    width: auto;
}

#button {
    margin: 1em;
}
#bingoGrid .item.active.suora .teksti {
background-color: #ffd939;
}

.level1 #bingoGrid .item.active.suora .teksti {
background-color: #bb9109;
}

.level2 #bingoGrid .item.active.suora .teksti {
background-color: #aa6b4c;
}

#mainWrapper .circle .checkbox {
    text-align: left;
    top: 0%;
    /* transform: translate(-50%, -50%); */
    position: absolute;
    font-size: 0.7em;
    color: #000;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    right: 0%;
    pointer-events:none;

}

#mainWrapper .circle .checkbox .fa-square {  
opacity: 0.8;
}
#mainWrapper .circle .checkbox .fa-check-square {  
opacity: 1;
}

#backgroundImage {
background-size: cover;
background-position:center;
height: 100vh;
width: 100vw;   
position: absolute; 
top: 0;
z-index: 0;
}

#bingoGrid.container {
display: flex; 
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
align-content: stretch; 
box-sizing: border-box;
}

#bingoGrid .item {
box-sizing: border-box;
margin: 2%;
background: whitesmoke;
background-size: contain;
border: 4px solid whitesmoke;
cursor: pointer;
}

#bingoGrid .item.active.suora  {
/*border: 4px solid white;*/
border-color:  #83a01c;
}
.level0 #bingoGrid .item.active.suora {
color: white;

}


.level0 #bingoGrid .item.active.suora {
border-color: #ffd939;
}

.level1 #bingoGrid .item.active.suora {
border-color: #bb9109;
}

.level2 #bingoGrid .item.active.suora {
border-color: #aa6b4c;
}
#bingoGrid .item.active {
filter: brightness(1.1);
}   

#bingoGrid .item.kolme {
width: 29%;
}

#bingoGrid .item.nelja {
width: 21%;
}
#bingoGrid .item.viisi {
width: 16%;
}

#parentWrapper .button {
    box-sizing: border-box;
    margin: 2%;
    background: #ffd939;
    background-size: contain;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 1.2em;
    width: fit-content;
    margin: auto;
    cursor: pointer;
    padding: 0.6em;
    color: black;
    line-height: 1.2;
    font-weight: bold;
}


.level0#parentWrapper .button {
background: #ffd939;
}
.level1#parentWrapper .button{
background:#bb9109
}
.level2#parentWrapper .button{
background:#c47c58
}


/*https://codepen.io/tchaflich/pen/LKyxqY*/
.sizer {
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
overflow: visible;
width: 20%;
margin: 0 auto;
position: relative;
}
.vino.rotate0 {
transform: rotate(1deg);
}
.vino.rotate1 {
transform: rotate(3deg);
}
.vino.rotate2 {
transform: rotate(4deg);
}
.vino.rotate3 {
transform: rotate(5deg);
}

.vino.rotate-1 {
transform: rotate(-1deg);
}
.vino.rotate-2 {
transform: rotate(-3deg);
}
.vino.rotate-3 {
transform: rotate(-4.5deg);
}

#mutedContainer {
position: absolute;
top: 0;
right: 0;
}
.muteControl {
padding: 2vh 2vh 2vh 1vh;
}
#headerWrapper #logo {
    position: absolute;
    top: 0;
    left: 0;

    }
    #headerWrapper #logo img{
        height: 1.4em;
        width: auto;
        padding: 2.6vh 0 0 1vh;
        opacity: 1;

    }
  


.muteControl::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f028";
    font-size: 1.2em;
    color: black;
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
    line-height: 1.8;
}
.muteControl.muted::after {
content: "\f6a9";
}

#teksti {
color: white;
font-family: sans-serif;
text-align: center;
font-size: 1.2em;
line-height: 1.1;
}
#teksti .teksticontainer{
    margin: 0 1em;
    color: black;
    font-weight: 400;
    }

#teksti .badge img {
width: 40%;
padding: 0 2% 4%;
}

/*
.sizer::before {
position: absolute;
top: 0;
right: 0;
text-align: right;
color: white;
z-index: 2;
margin: 4px;
background-image: url("info-48.png");
background-size: 20px 20px;
display: inline-block;
width: 20px; 
height: 20px;
content:"";
}
*/
.square {
width: 100%;
padding-bottom: 100%;
position: relative;
}

.circle {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}

.kuvalaatikko {
position: relative;
border: solid 1px rgba(0, 0, 0, 0.3);
margin-bottom: 2.5em;
}

.kuvateksti {
position: absolute;
font-family: 'Secular One', sans-serif;
font-size: 1.5em;
font-weight: 900;
text-transform: uppercase;
text-align: center;
bottom: 0;
transform: translate(-50%, 50%);
color: black;
background-color: white;
border: solid 1px black;
/* margin: 0 5%; */
left: 50%;
padding: 1% 5%;
width: 75%;
hyphens: auto;
}


.modal__content .teksti {
font-size: 1.1em;
}

.modal__container img{
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;

}

/* SHARE-NAPIT */

#parentWrapper  #shareWrapper {
overflow: hidden;

}
#shareWrapper a {
text-decoration: none;
}

#parentWrapper  #shareButtons {
display: flex;
justify-content: center;
flex-direction: row;
margin: 0;
padding-top: 0.3em;
text-shadow: none;

}

#shareButtons a {
text-decoration: none;
}

#shareButtons div {
border: none;
border-radius: 999px;
background-color: #315b7d;
outline: none;
font-size: 1.4em;
height: 2.2em;
width: 2.2em;
text-decoration: none;
margin: 0.2em 0.5em;
color: #fff;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
flex-direction: column;
text-align: -webkit-center;
text-align: center;
padding: 0;
}

#shareText {
font-size: 16px;
text-align: center;
width: 70%;
margin: 0 auto 0.2em;
border-top: rgba(255, 255, 255, 1) solid 1px; 
color: white;
text-transform: uppercase;
padding-top: 1em;


}

#shareButtons div {
color: white;
}

#shareButtons #linkShare {
    background: #545454;
    }

#shareButtons #fbShare {
background: #3b5998;
}
#shareButtons #waShare {
background: #4dc247;
}
#shareButtons #twShare {
background: #00aced;
}

#headerWrapper .plyr--audio .plyr__control:hover{
background: rgba(0, 0, 0, 1)!important;
}

@media only screen and (max-height: 600px) {
#parentWrapper {
    font-size: 0.85em
}
}



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

}

/* FYNDIN PALKIT PIILOON */ 
.node__status, ul.tabs, ul.tabs--primary, .element-invisible , #navbar-administration, #ylefifooter, .yle-header-ad,  .l-region.l-region--header{
display:none!important;
}
.node-unpublished {
background-color: unset;
}

.empty {
position: absolute;
bottom: 5px;
right: 5px;
}