/******************************/
/*  Copyright MK / 30.11.2022 */
/*                            */
/******************************/


@charset "UTF-8";

/* HEADER */

.header{
    position: relative;
    display: flex;
    width:50%;
    margin-left:25%;
    margin-right:25%;

    border:solid; 
    border-color:blue
}

/* COLUMN */

.main-col{
    /*position: relative;
     display: flex;*/
    width:70%;
    margin-left:15%;
    margin-right:15%;
    font-size: 20px;
}

.column {
    float: left;
}

/* Left and right column */
.column.left {
    width: 30%;
    margin-right: 5%;
  }

.column.right {
    /*margin-left: 5%;*/
    width: 65%;
  }

.column.middle {
    width: 100%;
  }




/* CONTAINER */

/*.container-md,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg {
    width: 100%;
    padding-right: 0.75rem;
    padding-left:0.75rem;
    margin-right: auto;
    margin-left: auto; 
  }*/

.container-header {
    /*max-width: 80%;
    min-width: 80%;*/
    margin-left:25%;
    margin-right:25%;
    
  }


.container-left {
    /*flex: 50%;*/
    /*margin-right:5%;
    
    min-width: 10%;
    max-width: 25%;*/
    position: relative;
    width: 25%;
}

.container-right {
    /*flex: 50%;
    min-width: 50%;    
    max-width: 70%;*/
    position: relative;
    width: 70%;
    
}


/* TEXT */

.header-text {
    text-align: left;
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10px;
    width: auto;
    font-size: 20px;
}

.basic-text {
    text-align: left;
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10px;
    width: auto;
    font-size: 18px;
}

.lead-header-text {
    align-items: left;
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10%;
    width: auto;
    font-size: 20px;
  }

.lead-basic-text {
    align-items: left;
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10px;
    width: auto;
    font-size: 18px;
  }

.nav-text {

    font-family: 'Avenir Next LT Pro', sans-serif;
    font-size: 18px;
    text-decoration: None;
    color:rgb(41, 41, 41);

    margin-left: 5%;
    margin-top: 50%;
}

.link-text{
    text-decoration: underline;
}

.th-text {
    position: relative;
    text-align: left;
    
    font-family: 'Avenir Next LT Pro', sans-serif;
    font-size: 18px;
    
    color:rgb(41, 41, 41);
    margin-top: 10px;
   
}

.th-text_II {
    position: relative;
    text-align: left;

    font-family: 'Avenir Next LT Pro', sans-serif;
    font-size: 16px;
    color:rgb(41, 41, 41);

    padding-top: 20px;
    padding-bottom: 10px;
    
}

.td-text {
    position: relative;
    
    font-family: 'Avenir Next LT Pro', sans-serif;
    font-size: 16px;
    
    color:rgb(41, 41, 41);
    margin-top: 10px;
    
}

.pad {
    padding-left: 10px;
    padding-right: 10px;
}

.footer-header-text {
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10px;
    width: auto;
    font-size: 20px;
}

.footer-text {
    position: relative;
    font-family: 'Avenir Next LT Pro', sans-serif;
    color:rgb(41, 41, 41);
    margin-top: 10px;
    width: auto;
    font-size: 18px;
}

/* NAVBAR */

.nav-bar {
    border: none;
    height: 5vh;

    text-align: right;
    position: relative;

  }


/* FOOTER */

.footer {
    position: relative;
    display: flex;

}

/* TABLE */

.table-col-left {
    min-width: 30%;
    margin-right: 5%;
    
}

.table-col-right {  
    min-width: 65%;
    
}


tr:nth-child(even) {
    background-color: #f1f1f1;
  }

.figure{
    margin-left: 0px; 
}

/* IMAGE */

.image{
    margin:auto;
}

.map-image {
    max-width:300px;
    max-height:280px;
    width: 100%;
    height: auto;
}

.image_piirros{
    margin: auto;
    width: 100%;
    height: auto;
    max-width: 300px;
    max-height: 400px;
}

.image_portrait{
    max-width: 250px;
    max-height: 300px;
    width: 100%;
    height: auto;
    
}

.image_koulutus{
    margin:auto;
    max-width: 490px;
    max-height: 326px;
    width: 100%;
    height: auto;
}

.image_puheterapia{
    margin:auto;
    max-width: 447px;
    max-height: 298px;
    width: 100%;
    height: auto;
}

.image_yhteystiedot{
    margin:auto;
    max-width: 338px;
    max-height: 338px;
    width: 100%;
    height: auto;
}

/* GRID */

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
    column-gap: 50px;
    row-gap: 50px;
  }


@media screen and (max-width: 900px) {
    .grid-container {
      margin-right: 50vw;
      grid-template-columns: 0%;
      align-content: center;
      }
    }


/* MEDIA */


@media screen and (max-width: 1000px) {
    .nav-text, .nav-bar {
      width: auto;
      height: auto;
    }
  }

@media screen and (max-width: 900px) {
    .column.left, .column.right {
      width: 100%;
    }
  }



@media screen and (max-width: 900px) {
    .image_piirros {
      width: auto;
      height: auto;
    }
  }