#grandParentWrapper {
    width: 100%;
    height: 100%;
    background: #213e48;

}

#parentWrapper {
    font-family: sans-serif;
    background-size: cover;
    font-weight: 200;
    width: 100vw;
    min-height: 100vh;
    box-sizing: initial;
    -webkit-font-smoothing: unset;
    line-height: 0.9;
    /* font-size: 1em; */
    /* max-width: 68vh; */
    max-width: 80vh;
    margin: auto;
    position: relative;
    background-color: #4f6875;
    background-image: url("../images/bg_sulka.jpg"); 
    padding-bottom: 0vh;
}

#parentWrapper .fas {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

#parentWrapper .pieni {
    font-size: 0.8em;
}

#parentWrapper #tekijat .pieni {
    font-size: 0.85em;
    margin: 1vh 1em 0.5em;
    font-family: sans-serif;
    text-align: center;
    line-height: 1.1;
    font-weight: 400;
    display: block;
}

#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 a {
    color: unset;
    text-decoration: underline;
}

#parentWrapper .otsikko {
    color: white;
    font-family: 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;
    z-index: 20;
    padding: 2vh;
    flex-direction: row-reverse;
    padding-bottom: 1vh;
}

#mainWrapper {
    font-family: sans-serif;
    /* margin: 0.5vh 1vh; */
}

#mainWrapper #ingressiWrapper{
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.5) 90%, rgba(0,0,0,0) 100%);
    display: flow-root;
}

#mainWrapper #ingressiWrapper div{
  margin: 0;
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#mainWrapper.text #ingressiWrapper div{
    margin: 1vh;
  }

#mainWrapper .circle .teksti {
    font-family: sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    color: black;
    background-color: #e3eff4;
    hyphens: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-top: 0.3em;
    line-height: normal;
}

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

#teksti .giffi {
    padding-top: 4vh;
    text-align: center;
    padding-bottom: 2vh;
}

#teksti .giffi img {
    width: 90%;
    max-width: 300px;
}

#mainWrapper #button .button{
    margin: 1vh auto;
}

#bingoGrid .item.active.suora .teksti {
    background-color: #ffd21f;
    color: black;
}



#mainWrapper .circle .checkbox {
    text-align: left;
    top: 0%;
    /* transform: translate(-50%, -50%); */
    position: absolute;
    font-size: 1em;
    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: #e3eff4;
    background-size: contain;
    border: 4px solid #e3eff4;
    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: #ffd21f;
}

.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: #c4e8f4;
    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: #c4e8f4;
}

.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: 0.8vh;
}

#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.8em;
    color: white;
    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: white;
    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: 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 {
    display: none;
    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;
}

#parentWrapper #tekijat {
    color: white;
    font-size: 1.2em;
}

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

    #mainWrapper .circle .teksti {
        font-size: 0.8em;
        line-height: 1;
    }

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

    #bingoGrid .item.nelja {
        width: 23%;
    }

    #bingoGrid .item.viisi {
        width: 20%;
    }

    #bingoGrid .item {
        margin: 1%;
        border: 2px solid;
        border-color: #e3eff4;
    }

    #mainWrapper .circle .checkbox {
        font-size: 0.7em;
    }

    /* #mainWrapper .circle .teksti {
    font-size: 0.25em;
} */
}



/* 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;
}