.c4nter{
background: #FFFF00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.c3nter p {
  text-align:center;
}

  body{
    background-color:#f1edec;
  }
  #esittely,.twocols{
    padding-bottom:1rem;
    column-count: 2;
    column-width: 400px;
  }

.tags{
  font-style:oblique;
}
#saatavuus{
  background-color:#cfc;
  width:300px;
  margin:1em 0;
  padding:1em;
}

.emph{
  font-weight:bold;
}
.smallprint{
  font-size:10pt;
  line-height:11pt;
}

#gmap_canvas{width:100%;}


    @font-face {
      font-family: Amiri;
      src: url(fonts/Amiri-Bold.ttf);
      src: url(fonts/Amiri-BoldItalic.ttf);
      src: url(fonts/Amiri-Italic.ttf);
      src: url(fonts/Amiri-Regular.ttf);
    }

    @font-face {
      font-family: Halimun;
      src: url(fonts/Halimun-W7jn.ttf);
    }
    @font-face {
      font-family: Aldhabi;
      src: url(fonts/aldhabi.ttf);
    }
    @font-face {
      font-family: Kelarisan;
      src: url(fonts/Kelarisan.ttf);
    }
    @font-face {
      font-family: Vibes-Regular;
      src: url(fonts/Vibes-Regular.ttf);
    }
    @font-face {
      font-family: mySecondFont;
      src: url(fonts/CooperHewitt-Light.otf);
    }

    @font-face {
      font-family: mySecondFont;
      src: url(fonts/CooperHewitt-Book.otf);
      font-weight:bold;
    }

    @font-face {
      font-family: mySecondFont;
      src: url(fonts/CooperHewitt-Semibold.otf);
      font-weight:900;
    }

    @font-face {
      font-family: mySecondFont;
      src: url(fonts/CooperHewitt-Semibold.otf);
      font-weight:900;
    }

    @font-face {
      font-family: mySecondFont;
      src: url(fonts/CooperHewitt-LightItalic.otf);
      font-style:oblique;
    }

    @font-face {
      font-family: myThirdFont;
      src: url("fonts/Anjelika Rose Thin.ttf");
    }

    @font-face {
      font-family: myThirdFont;
      src: url("fonts/Anjelika Rose.ttf");
      font-weight:bold;
    }

    #container h1 { margin-top:3rem; margin-bottom:1rem; font-family: 'Kelarisan', 'Aldhabi'; font-size:3.5rem; line-height:3.5rem; font-weight:500; }

    #container h2{ margin-top:1em; margin-bottom:.5em; padding-top:1em; font-family: mySecondFont; font-weight:900; }
    #container h3{ font-size:24px; font-weight:900; }

    #container #changelang{ font-family: mySecondFont; font-size:10pt; text-align: right; }


    #container p{ font-family:mySecondFont, Amiri, sans-serif; font-size: 14pt; margin:0; margin-bottom:.5em;}
    #container dd{ font-family:mySecondFont, sans-serif; font-size: 14pt; }

    #container p {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }







@media only screen and (min-width: 320px)  { body{ font-size: 12px; } }
@media only screen and (min-width: 768px)  { body{ font-size: 14px; } }
@media only screen and (min-width: 1024px) {
    #container img#main {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:50%;
      border-radius: 50%;
      padding:2em;
      padding-top:0px;
    }
}
@media only screen and (min-width: 1900px) { body{ font-size: 18px; } }


    #container img#main {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width:50%;
      border-radius: 50%;
      padding:2em;
      padding-top:0px;
    }

    #container img {
      padding:2em;
    }

    #container #ingressi{ font-weight:bold; }
    #container b{ font-weight:bold; }

    #container #dots, #container .small{ font-size:12pt; }



div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 300px;
}
div.item span{
    font-size:24px;
    padding:.2em;
}
img.cool {
    width: 300px;
    height: 213px;
    background-color: #ccc;
    border:2px solid black;
}
.caption {
    display: block;
}


    #container p{ margin-bottom:.5em; }



/* unvisited link */
#container a:link { color:#6889ac; }

/* visited link */
#container a:visited { color:#523e25; }

/* mouse over link */
#container a:hover { color: hotpink; }

/* selected link */
#container a:active { color: blue; }


/* unvisited link */
#events a:link { color:black; }

/* visited link */
#events a:visited { color:black; }

/* mouse over link */
#events a:hover { color:#6889ac; }

/* selected link */
#events a:active { color: blue; }



#table_basket{

  border:0;
  width:80%;

}
#table_basket td{
  border: 1px solid #ccc;
  padding:3px;
}
#table_basket th{
  text-align:left;
  font-weight:bold;
}
input[type=submit]{
  margin:1em;
  font-size:12pt;
}

    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 5px;
    }
    .column2 {
      float: left;
      width: 25%;
      padding: 5px;
    }
    .column3 {
      float: left;
      width: 20%;
      padding: 5px;
    }

    /* Clearfix (clear floats) */
    .row::after {
      content: "";
      clear: both;
      display: table;
    }



#container {
  max-width: 1200px;
  text-align: left;
  margin: 0px auto;
  padding-left:1rem;
  padding-right:1rem;
  padding-bottom:2rem;
}


@media (min-width: 1224px) {
  #container .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}




#container p {
    text-align:justify;  
    text-justify:inter-word;
}




#container #more {display: none;}


#container #box2{
  margin-top:2rem;
  margin-bottom:2rem;
}


.some img { margin:0; padding:0; }

p > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}



img.imgl{
  height:auto;
  max-width:200px;
  padding:0 1rem 0.5rem 0;
  margin:0;
  display:block;
}










  #events ul{
    margin:0;padding:0;
  }
  #events li{
    max-width:370px;
    border:1px solid black;
    margin:1em;
    padding:1em;
    margin-left:0;
    padding-bottom:0.5em;
    margin-bottom:1em;
    list-style-type:none;
    float:left;
  }
  #events div.info {
    height:260px; overflow:hidden;
  }


  #events div.info {
      width: 340px;
      margin-bottom: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #777;
      overflow:hidden;
      text-overflow: ellipsis;
      content: "";
      position:relative;
  }
  #events div.info:before {
      content:'';
      width:100%;
      height:100%;    
      position:absolute;
      left:0;
      top:0;
      background:linear-gradient(transparent 150px, #f1edec);
  }

  #events div.status p{
    height:2em;
    font-size:14px;
    font-weight:900;
    color:#A9A9A9;
  }
  #eventpage div.status p{
    font-size:14px;
    font-weight:900;
    color:#A9A9A9;
    text-align: left;
  }
  #events img{ 
    width:200px;
    float:left;
    padding:0px;
    margin:0px;
    margin-right:1em;
    border:1px solid black;
  }
  #events p{
     margin-bottom:0.5em;
     margin-top:0.5em;
  }














.2palstaa {
  column-count:1;
  column-gap:100px;
}










.yale td{
vertical-align:middle;
border: 1px solid black;
margin:1em;
padding:1em;
}








/* help from https://codepen.io/andybelldesign/pen/MPLzay */

.qbox {
max-width:100%;
    padding: 3rem 6rem;
    display: block;
    width:35rem;
    border: 3px solid #333333;
    font-size: 1rem;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
    text-transform: uppercase;
    letter-spacing: 0.3ch;
    background: #ffffff;

    margin-right:auto;
    margin-left:auto;
    margin-top:2rem;
}

.qbox{ font-family:myThirdFont, sans-serif; font-size: 16px; }
h1.qtitle { margin-bottom:2rem; font-family:myThirdFont, sans-serif;  font-size:23px; font-weight:bold; }



*/