* {
          box-sizing: border-box;
}

body{
    background-color:#ebebebff;
    margin:auto;
    padding:auto;
    font-family: 'linux_libertine_oregular';
}


/* TAUSTAPAPERIT */


        .whitepaper{
            width:100%;
            max-width:1000px;
            background-color:#fdfdfc;
            margin:auto;
            padding:auto;
        }

        .beigepaper{
            background-color:#f7f2eaff;
            margin:0px 10px;
            padding-bottom:40px;
        }

            @media (max-width: 768px) {
                .beigepaper{
                    margin:0px;
                }
            }

.bluepaper{
    background-color:#1c2b3eff;
    color:#f3e9daff;
    padding:40px 30px;
    margin:auto;
}



        .headerimg{
        background-image:url(liivipusero2.png);
        background-size: cover;
        width:100%;
        min-height:300px;
        border-radius:15px;
        margin:15px 0px;
                }


/* GRIDS */

        .grid2{
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

            @media (max-width: 768px) {
            .grid2 {
                display: block;
            }
            }

        .grid3{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

            @media (max-width: 768px) {
            .grid3 {
                display: block;
            }
            }

        .grid4{
            display: grid;
            grid-template-columns: 1fr 2fr 1.5fr 1.5fr;
        }

            @media (max-width: 768px) {
            .grid4 {
                display: block;
            }
            }


.contactcard{
    padding-bottom:25px;
    border-bottom:1px solid black;
}

.content{
    padding:40px 50px 0px 50px;
}

    @media (max-width: 768px) {
        .content{
            padding:40px 20px;
        }
    }






/* TEKSTIT */

        h1{
            margin:auto;
            font-weight:lighter;
            font-size:4rem;
        }
    
            @media screen and (max-width: 768px) {
                h1{
                    font-size:3rem
                }
              }

            .small-h1{
                font-size:2.2rem;
                font-family:'linux_libertine_oitalic';
                
            }

        h2{
            margin:auto;
            font-weight:lighter;
            font-size: 2rem;
            line-height:1.0;
        }

        h3{
            margin:auto;
            font-weight:lighter;
            font-size:1.3rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            border-top:1px solid black;
            border-bottom: 1px solid black;
            padding:10px 0px;
        }

        h4{
            margin:auto;
            font-weight:lighter;
            font-family:'linux_libertine_obold';
            font-size:1.3rem;
        }

        h5{
            margin:auto;
            font-weight:lighter;
        }

        h6{
            margin:auto;
            font-weight:lighter;
        }

        p{
            margin:auto;
            font-size:18px;
            letter-spacing: 0.3px;
        }

        .ingressi{
            font-size:22px;
            line-height:1.1;
            margin:7px 0px;
        }

        .kuvateksti{
            font-size:16px;
            font-family:'linux_libertine_oitalic';
            margin-bottom:15px;
        }


.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
    padding:0px 0px;
    margin:0px;
    font-family: 'linux_libertine_oregular';
}

.active, .accordion:hover {
  background-color: #fff; 
}

.panel {
  padding: 15px 0px;
  display: none;
  background-color: white;
  overflow: hidden;
    border-top:1px solid black;
}


/* PAINIKKEET */

.bluebutton{
    background-color:#1c2b3eff;
    color:#fdfdfcff;
    padding:10px;
    border-radius: 5px;
    margin-top:15px;
    display: inline-block;
}

.bluebutton a{
    color:#fdfdfcff;
    text-decoration: none;
}

.linebutton{
        margin-top:20px;
}

.linebutton a{
    color:#000;
    text-decoration: none;
    border-bottom:1px solid #000;
    padding-bottom:5px;
}

.linebutton-a{
    color:#8b4c2cff;
    text-decoration: none;
    border-bottom:none;
    padding-bottom:1px;
}


/* NAVIGAATIO */

            .topnav {
              overflow: hidden;
              background-color: none;
            border-bottom: 1px solid #000;
            }


            .topnav a {
              float: left;
              display: block;
              color: #000;
              text-align: center;
              padding: 10px 0px;
              margin:0px 10px;
              text-decoration: none;
              font-size: 18px;
            }

            .topnav a:hover {
              color: black;
            }


            .topnav .icon {
              display: none;
            }

            @media screen and (max-width: 3000px) {
              .topnav a:not(:first-child) {display: none;}
              .topnav a.icon {
                float: right;
                display: block;
              }
            }

            @media screen and (max-width:3000px) {
              .topnav.responsive {position: relative;}
              .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
              }
              .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
                font-size:18px
              }
            }


/* FONTIT LINUX LIBERTINE 0 */


        @font-face {
            font-family: 'linux_libertine_oregular';
            src: url('kpbespoker.woff2') format('woff2'),
                 url('kpbespoker.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }


        @font-face {
            font-family: 'linux_libertine_obold';
            src: url('kpbespokerb.woff2') format('woff2'),
                 url('kpbespokerb.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }


        @font-face {
            font-family: 'linux_libertine_obold_italic';
            src: url('kpbespokerbi.woff2') format('woff2'),
                 url('kpbespokerbi.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }


        @font-face {
            font-family: 'linux_libertine_oitalic';
            src: url('kpbespokeri.woff2') format('woff2'),
                 url('kpbespokeri.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }


        @font-face {
            font-family: 'linux_libertine_osemibold';
            src: url('kpbespokerz.woff2') format('woff2'),
                 url('kpbespokerz.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }


        @font-face {
            font-family: 'linux_libertine_oSBdIt';
            src: url('kpbespokerzi.woff2') format('woff2'),
                 url('kpbespokerzi.woff') format('woff');
            font-weight: normal;
            font-style: normal;

        }