/* === SCSS COLOUR VARIABLES === */
/* === SCSS COLOUR VARIABLES === */
/* SCSS RESPONSIVE TITLE TYPE @MIXIN */
/* =============================== */
body {
  background-image: url("../img/bg01.jpg");
  background-position: center center;
  background-repeat: no-repeat, repeat;
  background-size: cover;
  font-family: Ubuntu, 'Montserrat', Verdana;
}

/* === NAVIGATION === */
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #c22222;
  overflow: hidden;
  padding-left: 20px;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 4px;
  padding-top: 25px;
  padding-bottom: 20px;
  width:100%;
  float:right;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #0a5656;
  color: white;
}

.leftHeader{
	float:left;
}

#header{
	display:flex;
}
.logo{
	margin-top:-8px;
	margin-left:-8px;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

/* === RESPONSIVE NAVIGATION === */
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

/* === SITE CONTENT === */
#content{
	margin-left:auto;
	margin-right:auto;
	max-width:1024px;
	min-height: 1200px;
	background-color: #ffffff;
	padding-bottom:20px;
	height:100%;
}

.siteContent{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: -4px;
	margin-bottom: 20px;
	padding-top: 1px;
	padding-left: 10px;
	
}

.imageGallery{
	display:flex;
	width:100%;
}

.galleryImage{
	width:22%;
}

@media only screen and (max-width: 400px) {
  .galleryImage {
    width:100%;
  }
}

.responsiveImage {
  width: 90%;
  height: auto;
}

.mapPoints, ol{
	line-height: 2.0;
}

/* === MOBILE-FIRST GRID LAYOUT === */
.calendar-grid {
  display: grid;
  width: 96%;
  max-width: 900px;
  margin: 2% auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 15px;
  grid-template-areas: "title    title     title" "day23    day20     day12" "day2     day14     day4" "day5     day22     day16" "day1     day7      day9" "day10    day11     day18" "day13    day3      day15" "day6     day17     day8" "day19    day24     day21";
}

/* MEDIA QUERY -- DESKTOP LAYOUT */
@media only screen and (min-width: 520px) {
  body {
    background-image: url("../img/bg01.jpg");
    background-position: center top;
    background-repeat: no-repeat, repeat;
    background-size: cover;
  }

  .calendar-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "title      title     title     day2      day7      day8" "title      title     title     day4      day11     day12" "title      title     title     day19     day9      day13" "day6       day1      day24     day24     day21     day20" "day17      day18     day24     day24     day5      day22" "day3       day23     day16     day14     day10     day15";
  }
}
/* === INDIVIDUAL GRID ITEMS ===  */
.title {
  grid-area: title;
  text-align: center;
  color: #D8477C;
}

.title-lines-container {
  background-image: url("../img/silma2019_1920x751px.jpg");
  background-position: center top;
  background-repeat: no-repeat, repeat;
  background-size: cover;
  border-radius: 30px 0;
  border: 5px solid #c22222;
  transform: rotate(2deg);
  margin: 1.5% 0 0 0;
  text-shadow: #000 1px 2px 3px;
}

.title-line1 {
  font-family: 'Merienda', Courier;
  font-size: 45px;
  font-size: 4vw;
  margin: 0;
  padding: 10px 15px 0;
}
@media (max-width: 750px) {
  .title-line1 {
    font-size: 30px;
  }
}
@media (min-width: 1500px) {
  .title-line1 {
    font-size: 40px;
  }
}

.title-line2 {
  font-family: 'Great Vibes', Courier;
  font-size: 35px;
  font-size: 3vw;
  line-height: 1.1em;
  margin: 0;
  padding: 0 15px 15px;
  color: #fff;
}
@media (max-width: 700px) {
  .title-line2 {
    font-size: 21px;
  }
}
@media (min-width: 1466.6666666667px) {
  .title-line2 {
    font-size: 40px;
  }
}

.bigger-text {
  font-size: 40px;
  font-size: 3.5vw;
}
@media (max-width: 742.8571428571px) {
  .bigger-text {
    font-size: 26px;
  }
}
@media (min-width: 1428.5714285714px) {
  .bigger-text {
    font-size: 50px;
  }
}

.title-intro {
  background: #ffffff;
  padding: 20px 25px;
  border: 1px solid #0a5656;
  border-radius: 0 30px;
  line-height: 1.5em;
  transform: rotate(-1.5deg);
  margin: 5% 2% 2%;
}

/* 
Luukun kuvien suosituskoot: 
Pienet kuvat 305x250 px
Isot kuvat 555x450 px
Suhteutetaan kuvat näihin, jos ei osu
*/
.day1 {
  grid-area: day1;
}
.day1 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day2 {
  grid-area: day2;
}
.day2 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day3 {
  grid-area: day3;
}
.day3 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day4 {
  grid-area: day4;
}
.day4 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day5 {
  grid-area: day5;
}
.day5 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day6 {
  grid-area: day6;
}
.day6 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day7 {
  grid-area: day7;
}
.day7 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day8 {
  grid-area: day8;
}
.day8 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day9 {
  grid-area: day9;
}
.day9 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day10 {
  grid-area: day10;
}
.day10 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day11 {
  grid-area: day11;
}
.day11 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day12 {
  grid-area: day12;
}
.day12 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day13 {
  grid-area: day13;
}
.day13 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day14 {
  grid-area: day14;
}
.day14 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day15 {
  grid-area: day15;
}
.day15 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day16 {
  grid-area: day16;
}
.day16 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day17 {
  grid-area: day17;
}
.day17 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day18 {
  grid-area: day18;
}
.day18 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day19 {
  grid-area: day19;
}
.day19 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day20 {
  grid-area: day20;
}
.day20 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day21 {
  grid-area: day21;
}
.day21 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day22 {
  grid-area: day22;
}
.day22 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day23 {
  grid-area: day23;
}
.day23 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

.day24 {
  grid-area: day24;
}
.day24 .back {
  background: url(../img/luukut2025/luukku_blue.jpg);
}

/* ===  DOOR STYLES ===  */
.calendar-grid input {
  display: none;
}

.door {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 1.5px dashed #344f63;
  border-radius: 10px;
  cursor: pointer;
  min-height: 110px;
  font-family: 'BioRhyme', serif;
  font-size: 58px;
  color: #ffffff;
}
.door.no-hover {
  border-color: #344f63;
}
.door:not(.no-hover):hover {
  border: 1.5px dashed #ffffff;
}

.door div {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.door .front {
  background: rgba(29, 101, 135, 0.1);
  text-shadow: 2px 2px 0 #344f63, 2px -2px 0 #344f63, -2px 2px 0 #344f63, -2px -2px 0 #344f63, 2px 0px 0 #344f63, 0px 2px 0 #344f63, -2px 0px 0 #344f63, 0px -2px 0 #344f63;
}

.door .back {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #135270;
  transform: rotateY(180deg);
  
}

.backText p{
   
   
   font-size: 16pt;
  color: #ffffff;
  text-shadow: 2px 2px 0 #344f63, 2px -2px 0 #344f63, -2px 2px 0 #344f63, -2px -2px 0 #344f63, 2px 0px 0 #344f63, 0px 2px 0 #344f63, -2px 0px 0 #344f63, 0px -2px 0 #344f63;
}

.open {
  transform: rotateY(180deg);
}

footer {
  background-color: #c22222;
  height: 200px;
  width:100%;
  padding: 15px 15px 10px;
  text-align: none;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: -7px;
}
footer p {
  margin-top: 0px;
  color: #000000;
  font-size: 8pt;
  padding-right:0px;
  margin-left:0px;
  text-align:center;
}

footerLeft{
	float:left;
}

footerRight{
	float:right;
}

/* ===  MODAL (BACKGROUND) ===  */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
 
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* === MODAL CONTENT + BOX ===  */
.modalContent {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 20px 20px 30px;
  border: 4px solid #C22222;
  border-radius: 6px;
  width: 76%;
  max-width: 600px;
  min-height: 200px;
  letter-spacing: 0.5px;
  line-height: 1.4em;
 
  
}
.modalContent p {
  font-size: 0.9em;
}

@media only screen and (max-width: 1280px){
.modalLeft{
	
	
	
}
modalRight{
	
}
}

.dailyTitle {
  font-family: 'Ubuntu', Courier;
  color: #26B4E2;
}

.dailyDate {
  color: #D8477C;
}

.highlight {
  font-weight: bold;
  color: #D8477C;
}

.dailyLink {
  background-color: #26B4E2;
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  line-height: 2.3em;
}
.dailyLink:hover {
  background-color: #D8477C;
}

.dailyImage img {
  color: #f50cf7;
	max-width:300px;
	max-height:189px;
  margin-top:0px;
  margin-left:0px;
}

/*<!-- @media only screen and (max-width: 450px) {
	.dailyImage img {
  color: #f50cf7;
  max-width:200px;
  height:100%;
   display: flex;
  flex-wrap: wrap;
  margin-top:0px;
  margin-left:20px;
} 
}*/

/* ===  MODAL CLOSE BUTTON (X) ===  */
.close {
  color: #aaa;
  float: right;
  font-size: 48px;
  line-height: 26px;
  font-weight: bold;
}
.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 519px) {
  .title-line1 {
    font-size: 38px;
    font-size: 10vw;
  }
}
@media only screen and (max-width: 519px) and (max-width: 340px) {
  .title-line1 {
    font-size: 34px;
  }
}
@media only screen and (max-width: 519px) and (min-width: 520px) {
  .title-line1 {
    font-size: 52px;
  }
}

@media only screen and (max-width: 519px) {
  .title-line2 {
    font-size: 35px;
    font-size: 8vw;
  }
}
@media only screen and (max-width: 519px) and (max-width: 337.5px) {
  .title-line2 {
    font-size: 27px;
  }
}
@media only screen and (max-width: 519px) and (min-width: 600px) {
  .title-line2 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 519px) {
  .bigger-text {
    font-size: 40px;
    font-size: 10vw;
  }
}
@media only screen and (max-width: 519px) and (max-width: 320px) {
  .bigger-text {
    font-size: 32px;
  }
}
@media only screen and (max-width: 519px) and (min-width: 520px) {
  .bigger-text {
    font-size: 52px;
  }
}

@media only screen and (max-width: 519px) {
  .title-intro {
    padding: 18px 18px;
  }
}
@media only screen and (max-width: 690px) {
  .door {
    font-size: 46px;
  }
}

//* === YOUTUBE EMBED RESPONSIVE === */
.container {
    display: flex;
    justify-content: center;
}
    
iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

//* === FONTS === */

.ubuntu-light {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

.great-vibes-regular {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}

// <weight>: Use a value from 300 to 900
// <uniquifier>: Use a unique and descriptive class name

.merienda-<uniquifier> {
  font-family: "Merienda", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}