/* https://fonts.googleapis.com/css?family=Gloria%20Hallelujah */
@font-face {

    font-family: 'Gloria Hallelujah';
    font-style: normal;
    font-weight: 400;
    src: url(GloriaHallelujah_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* https://fonts.googleapis.com/css?family=Cairo */
@font-face {

    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url(Cairo_arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {

    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url(Cairo_latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {

    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url(Cairo_latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

    --pohja-vari: #ffffff;
  
    --osa-leveys: 95vmin;
    --osa-leveys-2: 95vmax;
}
  
* {
    
    box-sizing: border-box;
}
  
div {
  
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

body {
        
    background-color: var(--pohja-vari);
    background-image: url('vektorit/www_tausta%20Logo%20Fe%20Programming.svg');
    background-repeat: repeat-y;
    background-size: 100%;
    color: #000000;
}
  
#sivusto {
  
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 4.8vmin;
}
  
div.osasivusto {

    width: 100%;
    margin-bottom: 5vmin;
    display: flex;
    flex-direction: column;
}
  
div.osasivusto .otsikkosivusto {
  
}
  
#fe {

  position: relative;
}

#valikkonappi {

  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: auto;
}

div.osasivusto .sisussivusto {
  
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.tuotetuotteelle {
  
    height: auto;
    /*box-shadow: 0 0.76vmin 1.52vmin 0 rgba(0, 0, 0, 0.2), 0 1.14vmin 3.8vmin 0 rgba(0, 0, 0, 0.19);*/
    margin-left: auto;
    margin-right: auto;
    /*margin-bottom: 4.75vmin;
    padding-left: 1.9vmin;
    padding-right: 1.9vmin;
    padding-top: 2.425vmin;
    padding-bottom: 2.875vmin;
    font-size: 4.8vmin;*/
    font-family: 'Gloria Hallelujah';
    background-color: #f9fbff;
    color: black;
}
  
  .nimituotteelle {
  
    margin-top: 0.9vw;
    margin-bottom: 2.8vw;
  }
  
  .nimituotteelle img {
  
    display: block;
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .nimituotteelle p {
  
    font-size: 9.6vw;
    font-weight: bold;
  }
  
  .videokuviatekstituotteelle {
  
    display: flex;
    flex-direction: column;
  }
  
  .videokuviatekstituotteelle p {
  
    margin: 0;
    padding-top: 0;
    padding-bottom: 0.8vw;
  }
  
  .videokuviatekstituotteelle .tekstituotteelle {
  
    padding-bottom: 0;
  }
  
  .videokuviatekstituotteelle .kuvatuotteelle {
  
    width: 43.225vw;
    max-width: 100%;
    border-style: solid;
    border-color: transparent;
    border-top-width: 1vw;
    border-bottom-width: 1vw;
    border-left-width: 1.9vw;
    border-right-width: 0.5vw;
    float: right;
  }
  
  .videokuviatekstituotteelle .videotuotteelle {
  
    width: 80vmin;
    height: auto;
    border-style: solid;
    border-color: transparent;
    margin: 0;
  }
  
  .linkittuotteelle {
  
    display: flex;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }
  
  .linkittuotteelle img {
  
    height: auto;
    max-width: 100%;
  }
  
  p.eiloytynyttuotteelle {
    
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    font-family: monospace;
    font-size: smaller;
  }
  
  .osa5VKTtuotteelle .kuvatuotteelle {
  
    border-top-width: 1vw;
    border-bottom-width: 1vw;
    border-left-width: 0.5vw;
    border-right-width: 1.9vw;
    float: left;
  }


  

#henkilothenkilolle {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.henkilohenkilolle {

    background-image: url('henkilot/Sivustopohjahenkilolle.svg');
    background-position: right top;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-origin: padding-box;
    border-style: solid;
    border-color: var(--pohja-vari);
}

.henkilohenkilolle p {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-family: 'Cairo';
    font-weight: bold;
}

img.naamahenkilolle {

    width: 33.33%;
    height: auto;
    float: left;
}

img.tietohenkilolle {

    width: 66.67%;
    height: auto;
    float: right;
}

#lukumaarahenkilolle {

}