/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.content {
  grid-area: content;
/* tumma theme    */
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
/* vaalea theme
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
  background-repeat: no-repeat;
  background-position: cover;
  background-size: 100% 100%;
  padding-left: 0px;
  width: 100%;
  height: 100%;
}

.sisennys1 {
   margin-left: 20px;
}

.sisennys2 {
   margin-left: 40px;
}

.sisennys3 {
   margin-left: 80px;
}

.samarivi {
    display: flow;
}

.label1 {
    grid-area: label1;
    place-self: center stretch;
}

.label2 {
    grid-area: label2;
    place-self: center stretch;
}

.label3 {
    grid-area: label3;
    place-self: center stretch;
}

.label4 {
    grid-area: label4;
    place-self: center stretch;
}

.arvo1 {
    grid-area: arvo1;
    place-self: center;
}

.arvo2 {
    grid-area: arvo2;
    place-self: center;
}

.arvo3 {
    grid-area: arvo3;
    place-self: center;
}

.arvo4 {
    grid-area: arvo4;
    place-self: center;
}

.dummy {
    grid-area: dummy;
    place-self: center;
}

.omasuoritus {
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 150px 100px 100px;
    grid-template-rows: 40px 24px 40px 40px;
    grid-gap: 10px 10px;
    grid-template-areas: 
        "label1 arvo1 ."
        "label2 arvo2 ."
        "label3 arvo3 arvo3"
        "label4 arvo4 dummy";
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black; /* 1 If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptexttop {
    visibility: hidden;
    width: 150px;
    top: -30px;
    right: 10%; 
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text */
    position: absolute;
    z-index: 4;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip .tooltiptextright {
    visibility: hidden;
    width: 150px;
    top: 20px;
    left: 110%; 
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text */
    position: absolute;
    z-index: 4;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip .tooltiptextwide {
    visibility: hidden;
    width: 300px;
    bottom: -30px;
    right: 10%; 
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text */
    position: absolute;
    z-index: 4;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip .tooltiptext {
    visibility: hidden;
    bottom: -30px;
    width: 220px;
    left: 10%; 
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 4;
    
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.5s;
}
/*
.tooltip-left {
    top: -50px;
    right: 30%; 
}

.tooltip-center {
    top: -50px;
    right: 50%; 
}

.tooltip-right {
    top: -70px;
    right: 30%; 
}*/

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextright, .tooltip:hover .tooltiptextwide, .tooltip:hover .tooltiptexttop {
    visibility: visible;
    opacity: 1;
}

/* Tooltip arrow */
.tooltip .tooltiptexttop::after {
    content: " ";
    position: absolute;
    bottom: -33%; /* At the top of the tooltip */
    left: 90%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip .tooltiptextwide::after {
    content: " ";
    position: absolute;
    top: -33%; /* At the bottom of the tooltip */
    left: 90%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip .tooltiptext::after  {
  content: "";
  position: absolute;
  top: -33%; /* At the bottom of the tooltip */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip .tooltiptextright::after  {
  content: "";
  position: absolute;
  top: 30%; /* At the bottom of the tooltip */
  right: 100%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}


a.nounderline {
    text-decoration: none; 
}

.muokkausalue {
  display: grid;
  padding-top: 5px;
  grid-gap: 10px;
  grid-template-columns: 160px 1fr; 
  grid-template-areas: "muokkausaika muokkausform";
}

.muokkausaika {
  grid-column: muokkausaika;
}

.muokkausbar {
  grid-column: muokkausform;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(1fr,16);    
}

.muokkausbaritem {
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 2px;
}

.contentKeskialue {
  grid-area: content;
/* tumma theme    */
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
/* vaalea theme
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
  background-repeat: no-repeat;
  background-position: cover;
  background-size: 100% 100%;
  padding-left: 0px; /*5*/
  width: 100%;
  
/*  display: grid;
    width: 200%;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "keskialue" */
}

.keskialue {
  padding-bottom: 40px;
  grid-area: keskialue;
  width: 100%;
  height: 1500px;
}

/*.scrollvaaka {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 100%;
}

.scrollvaaka::-webkit-scrollbar {
    display: touch;  none 
}*/

.uutisstrip {
    grid-area: uutisstrip;
    height: 40px;  
    overflow: hidden;
    white-space: nowrap;
    display: inline;
    position: relative; 
}
.uutisstrip > div {
    font-size: 2em;
    /*color: blue; */
    position: absolute; 
    /* width: 100%;*/
    height: 40px;
    margin: 0;
    line-height: 40px;
    /* text-align: center; */
    display: inline-block;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);    
    transform:translateX(100%);
    /* Apply animation to this element */  
    -moz-animation: uutisstrip 30s linear infinite;
    -webkit-animation: uutisstrip 30s linear infinite;
    animation: uutisstrip 30s linear infinite;
}
.uutisstrip a {
    padding-right: 200px;
    text-decoration: none;
}
/* Move it (define the animation) */
@-moz-keyframes uutisstrip {
    0%   { -moz-transform: translateX(20%); }
    100% { -moz-transform: translateX(-80%); }
}
@-webkit-keyframes uutisstrip {
    0%   { -webkit-transform: translateX(20%); }
    100% { -webkit-transform: translateX(-80%); }
}
@keyframes uutisstrip {
    0%   {
        -moz-transform: translateX(20%); /* Firefox bug fix */
        -webkit-transform: translateX(20%); /* Firefox bug fix */
        transform: translateX(20%);   
    }
    100% { 
        -moz-transform: translateX(-80%); /* Firefox bug fix */
        -webkit-transform: translateX(-80%); /* Firefox bug fix */
        transform: translateX(-80%);
    }
}

/* tämä sallii dropdown menut navigointi-menubarista (w3 asetus on hidden))*/
.w3-bar {
    overflow: visible
}

.w3-dropdown-content {
    min-width: 60px;
}

/* luodaan yksi sarake, jossa kaikki alueet */
.wrapper {
  width: 100%;
  display: grid;
  grid-gap: 0px;
  grid-template-rows: repeat(auto,7);
  grid-template-areas: 
    "header"
    "headnav"
    "sidebar"
    "uutisstrip"
    "content"
    "linkit"
    "footer";
}

.sponsorit {
    display: none;
}

.tekstiRASTI .tekstiKARHUT {
    font-size: 24px;
}

:root {
  --gutter: 20px;
}

.hs {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  grid-area: keskialue;
}

.hs1200 {
  width: 100%;
/*  height: 1200px; */
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  grid-area: keskialue;
}

.wrap {
    min-height: 100%;
/*        overflow-x: scroll;
	overflow-y: scroll;
  	-webkit-overflow-scrolling: touch;*/
/*width:100%;
height:3500px;
overflow:hidden;
position:relative;*/
}

.keskialueKisa {
  width: 300%;
  height: 3000px;
  	-webkit-overflow-scrolling: touch;
  overflow:auto;
/*  height: auto;
    overflow-x: hidden;
    overflow-y: hidden;*/
}

.keskialueInner {
  object-fit: none;
  object-position: left top;
  width: 100%;
  min-height: 100%;
  height: 2200px;
  	-webkit-overflow-scrolling: touch;
  overflow:auto;
/*    overflow-x: hidden;
    overflow-y: hidden;*/
}

.keskialueInner1800 {
  object-fit: none;
  object-position: left top;
  width: 100%;
  min-height: 100%;
  height: 1400px;
  	-webkit-overflow-scrolling: touch;
  overflow:auto;
/*    overflow-x: hidden;
    overflow-y: hidden;*/
}

#outerdiv
{
width:100%;
height:246px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:110%;
height:3500px;
  	-webkit-overflow-scrolling: touch;
  overflow:auto;
}

.keskialueKisatest {
  width: 300%;
  min-width: 100%;
  height: 300%; 
  min-height: 1000px; 
  	-webkit-overflow-scrolling: touch;
  overflow:auto;
/*    overflow-x: hidden;
    overflow-y: hidden;*/
}

.keskialueInnerRunko {
  width: 300%;
/*  height: 6500px; */
/*    overflow-x: hidden;
    overflow-y: hidden;*/
}

.keskialueInnerMankkuohjeet {
  width: 100%;
  height: 1000px;
/*  height: 3000px; */
/*    overflow-x: hidden;
    overflow-y: hidden;*/
}

.fluidMedia {
    position: relative;
 /*   padding-bottom: 56.25%;  proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-bottom: 95%;  
    padding-top: 30px;
      height: 2200px;
    
/*    overflow: hidden; */
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
/*    height: 100%; */
  	-webkit-overflow-scrolling: touch;
    overflow:auto;
}

.pdfwrapper {
    width: 100%;
    height: 2800px;
}

.fb-root {
    margin-left: 25px;
    margin-bottom: 25px;
}

.fbpagebox {
    width: 100%;
    height: 720px;
    padding: 5px;
  border: 1px solid #003865;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  margin: 10px;
}

.fbpage1 {
    grid-area: fbpage1;
}

.fbpage2 {
    grid-area: fbpage2;
}

.fbpage3 {
    grid-area: fbpage3;
}

.instagram {
    grid-area: instagram;
    height: 720px;
}

.twitter {
    grid-area: twitter;
    height: 720px;
}

.twitterpalkki {
    width: 220px;
    padding-top: 0px;
    padding-left: 5px;
    padding-right: 5px;

}

.sosialmedia {
    width: 100%;
    padding-right: 10px;
    display: grid;
    grid-gap: 0px 10px;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "fbpage1 fbpage3"
        "fbpage1 fbpage3"
        "fbpage2 twitter"
        "fbpage2 twitter"
        "instagram instagram"
        "instagram instagram";
}

@media (max-width: 1180px) {
    .sidebar-hide-narrow {
        display: none
    }
}


@media (max-width:480px) {
    .tekstiRASTI .tekstiKARHUT {
        display:none;
        visibility: hidden;
    }    

    .sosialmedia {
        width: 100%;
        display: grid;
        grid-row-gap: 10px;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "fbpage1"
            "fbpage2"
            "fbpage3"
            "twitter"
            "instagram";
    }
}

@media (max-width:640px) {
    .tekstiRASTI .tekstiKARHUT {
        display:none;
        visibility: hidden;
    }    

    .sosialmedia {
        width: 100%;
        display: grid;
        grid-row-gap: 10px;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "fbpage1"
            "fbpage2"
            "fbpage3"
            "twitter"
            "instagram";
    }
}

/* testataan näytön koko -> luodaan suuremmalle näytölle 2 saraketta */
@media (max-width:992px) and (min-width:641px) {
  .wrapper {
    width: 100%;
    grid-template-columns: 150px auto;
    grid-template-areas: 
      "header header"
      "headnav headnav"
      "uutisstrip uutisstrip"
      "sidebar content"
      "linkit linkit"
      "footer footer";
    }
/*    .wrapper > :nth-child(1) {
        max-width: 150px; 
    } */
    
    .sponsorit {
        display: none;
    }

    
    .tekstiRASTI .tekstiKARHUT {
        display:inline;
        font-size: 64px;
    }

/*    .keskialueInner {
        width: 150%;
    }*/

/*  sidenav ul {
    display: flex;
    justify-content: space-between;
  }*/
}

@media (max-width:992px) and (min-width:843px) {
/*    .keskialueInner {
        width: 130%;
    }*/
}
/* testataan näytön koko -> luodaan suuremmalle näytölle 3 saraketta */
@media (min-width: 993px) {
  .wrapper {
    width: 100%;
    grid-template-columns: 150px auto 150px;
/*    grid-template-rows: repeat(auto, 5); */
    grid-template-areas: 
      "header header header"
      "headnav headnav headnav"
      "uutisstrip uutisstrip uutisstrip"
      "sidebar content sponsorit"
      "linkit linkit linkit"
      "footer footer footer";
   }
/*   sidenav ul {
     flex-direction: row;
   }*/
/*    .wrapper > :nth-child(1) {
        width-max: 150px; 
    }

    .wrapper > :nth-child(3) {  jos käytössä niin headnav-nappulat menevät allekkain!? 
        width-max: 150px; 
    } */

    .sponsorit {
        display: block;
    }
   
    .tekstiRASTI .tekstiKARHUT {
        display: inline;
        font-size: 64px;
    }
    .mySidebar {
        display: none;
    }
    
/*    .keskialueInner {
        width: 110%;
    }*/

    /*    .hs {
        display: block;
        grid-gap: calc(var(--gutter) / 2);
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 1fr);
        grid-auto-flow: none;
        grid-auto-columns: 100%;
        overflow-x: scroll;
        scroll-snap-type: x proximity;
        padding-bottom: calc(.75 * var(--gutter));
        margin-bottom: calc(-.25 * var(--gutter));        
        grid-area: keskialue;
    }
    
    .keskialueInner {
        width: 100%;
        padding-bottom: 40px;
        width: 100%;
        height: 1500px;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: hidden;
        max-width: 100%;
    }       */
}

@media (max-width: 1350px) {
    .hide-labeltext-when_narrow {
        display: none !important
    }
}

@media (min-width: 1181px) {
  .wrapper {
    width: 100%;
    grid-template-columns: 220px auto 150px;
  }
  
/*    .keskialueInner {
        width: 100%;
        height: 100%;
    }*/
}

.arkistolista {
    padding: 20px;    
}

.padding_center {
    padding-left: 6px !important;
    padding-right: 6px !important
}

.divIframe {
    width: 100%;
    height: 0;
    min-height: 700px;
 /*   padding-bottom: 86%;  Change this till it fits the dimensions of your video */
    position: relative;
}

.divIframeInner {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}