:root {
	--header-height: 250px;
	--big-hamburger_width_container: 100px;
	--big-hamburger_height_container: 90px;
	--big-hamburger_width_line: 68px;
	--small-hamburger_width_container: 60px;
	--small-hamburger_height_container: 60px;
	--small-hamburger_width_line: 37px;
	--container-optional-width: 95%;
	--font-color-blue:#508FF7;
	--yellow-color-one: #C69749;
	--yellow-color-two: #EAC071;
	--green-color-two: #679E61; /*green2*/
	--green-color-one: #7BABAB;
	--palaute-lahde-vari: #555;
	--font-color-black: #000;
	--font-color-normal: #fff;
	--sidebar-background: #282A3A;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


html {
  /*font-size: 100%;*/
}

body {
	hyphens: auto;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	word-break: normal;
	overflow-wrap: break-word; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-family: 'Lora', serif;
  	font-size: 16px;    /* 16px - body text */
  	font-size: 1rem;    /* 16px - body text */
	line-height: 1.5; /* ~24px */
	color: #2d3748; /* optional text color */
	position: relative;
}

/* pienet laitteet */
@media (max-width: 360px) {
  body { font-size: 15px; }
}

/* isot puhelimet */
@media (min-width: 390px) {
  body { font-size: 17px; }
}

/* todella isot */
@media (min-width: 414px) {
  body { font-size: 18px; }
}


h1, h2, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}


h3 {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
}

h1 {
	margin-top: 0;
	color: #C69749;
}

h1 {
	color: var(--yellow-color-one);
}

section h1 {margin-top: 15px;}


.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
	font-size: 1.25rem;
	color: #000;
	text-decoration: none;
	text-align: left;
}


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}


p.uutislinkki {
	margin-bottom: 5px;
	line-height: 2rem;
	font-size: 1.25rem;
	/*text-align: center;*/
}


/*lataa kuvia linkit*/
@media (max-width: 1800px) { a.lataus { font-size: 18px; font-size: 1.3rem; } }
@media (max-width: 1400px) { a.lataus { font-size: 18px; font-size: 1.2rem; } }
@media (max-width: 1300px) { a.lataus { font-size: 18px; font-size: 1.2rem; } }
@media (max-width: 1100px) { a.lataus { font-size: 18px; font-size: 1.15rem; } }
@media (max-width: 1000px) { a.lataus { font-size: 18px; font-size: 1.1rem; } }
@media (max-width: 900px) { a.lataus { font-size: 16px; font-size: 1.1rem; } }
@media (max-width: 800px) { a.lataus { font-size: 16px; font-size: 1rem; } }
@media (max-width: 768px) { a.lataus { font-size: 16px; font-size: 1rem; } }
@media (max-width: 568px) { a.lataus { font-size: 14px; font-size: 0.85rem; } }

a:active, a:hover {
    outline: 0;
}

.no_decoration {text-decoration: none;}

a.page-link--external:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* Hoverissa ikoni liikkuu */
a.page-link--external.uutinen:hover::after {
/*    transform: translate(2px, -2px);*/
}

/* Ulkoinen linkki: ylös/oikealle nuoli, Unicode: ↗ */
a.page-link--external.uutinen::after {
  /*content: " \2197";  
  font-size: 0.85em;
  display: inline-block;
  opacity: 0.7;
  transition: transform 0.2s;*/
}

a.page-link--internal {color:var(--font-color-blue);}
a.page-link--internal.perusvari {color: var(--font-color-black);}
a.page-link--external.perusvari {color: var(--font-color-black);}
a.page-link--internal:hover {text-decoration: underline;}
a.OLDpage-link--internal:hover {color: var(--yellow-color-two);}


li {
    display: list-item;
    text-align: -webkit-match-parent;
}

main {
  z-index: 1;
  position: relative;
}

.main_link {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.container {
  display: flex;
}

.tekijatieto {
	text-align: right; display: block !important;
	font-size:0.7rem;
}
.some_space_1em {padding-top: 1em; display: block; width: 100%;}
.some_space_2em {padding-top: 2em; display: block; width: 100%;}
.some_space_3em {padding-top: 3em; display: block; width: 100%;}
.some_space_4em {padding-top: 4em; display: block; width: 100%;}
.some_space_5em {padding-top: 5em; display: block; width: 100%;}
.intend {text-indent: 50px; line-height:1.2em;}


.some_space_tahdet {
	text-align: center; 
	margin: 30px 0; 
	font-size: 1.4rem; 
	letter-spacing: 6px;
	padding-top: 3em;
	padding-bottom: 3em;
}

.sr-only {display: none;}

main.content {
	margin-left: var(--header-height);
	padding-top: 1em;
	/*width: 100%;*/
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	/*width: var(--header-height);*/
	/*background-color: rgb(32, 35, 37); OLD DARK */
	background-color: var(--sidebar-background);
	position: fixed;
	top: 0;
	bottom: 0;
	margin-right: 1em;
	z-index: 2;
}

aside.sidebar ul {
	list-style-type: none;
	padding: 0;

}

aside.sidebar a {
	text-decoration: none;
	color: var(--font-color-normal);
}

aside.sidebar li { /*margin-bottom: 10px;*/}
aside.sidebar a.active {font-weight: bold; }
aside.sidebar a {  /*cursor: default;*/}
aside ul {margin-block-start: 0;}
.main_left_pad {
	/*padding-left:2em;*/
}


li.main_link:hover {
  cursor: pointer !important; /* näyttää käden */
}

nav {z-index:100;}
nav .main_link a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px 0; /* Lisää tilaa linkkien ylä- ja alapuolelle */
}

.mobile-menu .main_link a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0; /* Lisää tilaa linkkien ylä- ja alapuolelle */

}

.hidden {
  	display: none !important;
}


.visuallyhidden {
	opacity: 0;
	-webkit-transition: all 0.05s ease-in-out;
	-moz-transition: all 0.05s ease-in-out;
	-o-transition: all 0.05s ease-in-out;
	-ms-transition: all 0.05s ease-in-out;
	transition: all 0.05s ease-in-out;
}

.showvisually {
	opacity: 1;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}

.gallery-wrapper {
  width: 80vw !important;
  height: 80vh !important;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}


figure div img {height: 100%; width: auto;   display: block;
  margin: 0 auto;
}

.section.planeetta, .section.linnut, .section.kirjailija {}
.section.nav-group-header { 
	padding-bottom: 2px;
}


.section {
	width: 100%;
	padding-bottom: 20px; /* Lisätty pystysuuntaista tyhjää tilaa, jotta scrollaus toimii */
	margin: 0 auto;
}


/* contact FORM */

textarea#message {
	font-size: 16px;
  	line-height: 24px;
  	height: calc(1.2em * 10 + 1em); /* 10 lines + some padding */
}


.contact-form {
  background-color: #f9f9f9;         /* Light gray background for subtle contrast */
  border: 1px solid #ddd;            /* Soft border */
  padding: 2rem;
  border-radius: 8px;
  max-width: 600px;
  max-width: 80%;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Gentle shadow for depth */
}

.formi {
  display: flex;
  flex-direction: column;
}

.formi input,
.formi textarea {
  font-family: 'Lora', serif;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
}

.palaute_lomakkeen_teksti {
  	font-size: 1rem;
	font-weight: 600;
  	margin-bottom: 0.5rem;
  	font-family: 'Montserrat', sans-serif;
}

.send_nappi {
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	border: none;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.send_nappi:hover {
  background-color: rgb(107,173,172);    
}

/* end of contact form */

@media (max-width: 1200px) {.buttonDownload-small { margin-left: 2em;} aside.sidebar {width:290px;}}
@media (max-width: 1000px) {.buttonDownload-small { margin-left: 2em;} aside.sidebar {width:260px;} textarea#message {height: 3em;}}
@media (max-width: 950px) {.buttonDownload-small { margin-left: 2em; }}
@media (max-width: 900px) {.buttonDownload-small { margin-left: 1.5em; }}
@media (max-width: 850px) {.buttonDownload-small { margin-left: 1.5em; }}
@media (max-width: 800px) {.buttonDownload-small { margin-left: 1.5em; }}


h2.yhteydenotto {margin-block-start: 0; font-size: 1.25rem; margin-bottom:1.5em;}

.lataus_container {
	margin: 0 auto; 
	width: 100%; 
	display: flex; 
	gap: 1em; 
	margin-top: 4em;
	flex-direction: row;
	align-items: end;
	justify-content: center;
	padding-right:0.5em;
}

/*emblad siirretty koodin loppuun */

.buttonDownload.c {
	display: inline-block;
	position: relative;
	padding: 3px 19px; 
	background-color: rgb(107,173,172); /*green*/
	background: rgba(0, 0, 0, 0.3); /*transparent */
	color: #fff;
	text-indent: 14px;
	border-radius: 6px;
}

a.lataus.buttonDownload {
	display: inline-block;
	position: relative;
	color: #fff;
    font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	text-align: center;
	text-indent: 14px;
	border-radius: 6px;
}


@media (max-width: 768px) {
	.buttonDownload.c {
		border: 0px solid rgba(255, 255, 255, 0.34)
	}
}

.buttonDownload.c:hover, .buttonDownload.c:focus {
	background: rgb(107,173,172); /*book green basic*/
	color: white !important;
}

.buttonDownload.c:before, .buttonDownload.c:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 14px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload.c:before {
	-webkit-box-sizing: unset; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: unset;    /* Firefox, other Gecko */
    box-sizing: unset;         /* Opera/IE 8+ */
	width: 15px;
	height: 3px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload.c:after {
	width: 0;
	height: 0;
	margin-left: 6px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload.c:hover:before {
	border-color: white;

}

.buttonDownload.c:hover:after {
	border-top-color: white;
	animation-play-state: running;
}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
}

/* main div */



.img_position3, .img_position1 {
	/*width: auto;*/
	/*height: 99vh !important;*/ /* overwrite height: auto */
}

.embla__slide__number img {
	max-width: 100%;
	height: auto;
	max-height: 80vh;
	display: block;
}


.empis {
	display: inline-block; 
	width: 100%; 
	margin: 0 auto;
	position: absolute;
	bottom: 5px;
	bottom: 1%;
	text-align:center;
	font-weight: normal;
}

@media (max-width: 768px) { 
	.embla__slide__number img {
		max-height: 100vh;
		width: auto;
	}
}

@media (min-width: 900px) {
		.empis.keronen {
			width: 100%;
			text-align: center; 
			padding-right: 0;
		}
		.empis.karkkis {
			bottom: 1%;
			width: 100%;
			text-align: center; 
			padding-right: 0;
		}
}

/* --------------------------------------------------------------------------------------------------------------- /*


/* Container behind hamburger */
.hamburger_wrapper {
	position: fixed;
	top: 1em;
	right: 1em;
	width: var(--small-hamburger_width_container);
	height: var(--small-hamburger_height_container);
	background-color: #5b80aa; /* Colored background */
	border-radius: 8px;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

}

/* media säännöt alempana */

/* Hamburger base styles */
.hamburger {
	position: relative;
	width: var(--small-hamburger_width_line);
	height: 21px;
	transform: translateY(-2px);
}

.hamburger .line {
	display: block;
	background: #ffffff;
	width: var(--small-hamburger_width_line);
	height: 3.5px;
	position: absolute;
	left: 0;
	border-radius: 1px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}


.line.line1 {
	top: 0;
}
.line.line2 {
	top: 50%;
}
.line.line3 {
	top: 100%;
}

.hamburger.checked:hover .line1, .hamburger.checked:focus .line1 {	}
.hamburger{}
.hamburger.checked:hover , .hamburger.checked:focus {}


.hamburger_wrapper:hover .line1, .hamburger:hover .line1, .hamburger:focus .line1 {
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	transform: translateY(-2px);
}

.hamburger_wrapper:hover .line3,.hamburger:hover .line3, .hamburger:focus .line3 {
	-webkit-transform: translateY(2px);
	-moz-transform: translateY(2px);
	-ms-transform: translateY(2px);
	-o-transform: translateY(2px);
	transform: translateY(2px);
}

.hamburger.active .line-1 {
	-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
	-moz-transform: translateY(10px) translateX(0) rotate(45deg);
	-ms-transform: translateY(10px) translateX(0) rotate(45deg);
	-o-transform: translateY(10px) translateX(0) rotate(45deg);
	transform: translateY(10px) translateX(0) rotate(45deg);
	background: #fff;
}

.hamburger.active .line-2 {
	opacity: 0;

}

.hamburger.active .line-3 {
	-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-o-transform: translateY(-10px) translateX(0) rotate(-45deg);
	transform: translateY(-10px) translateX(0) rotate(-45deg);
	background: #fff;
}



.hamburger.checked .line1 {
	-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
	-moz-transform: translateY(10px) translateX(0) rotate(45deg);
	-ms-transform: translateY(10px) translateX(0) rotate(45deg);
	-o-transform: translateY(10px) translateX(0) rotate(45deg);
	transform: translateY(10px) translateX(0) rotate(45deg);
	background: #fff;
	z-index: 999;
}

.hamburger.checked .line2 {
	opacity: 0;
}


.hamburger.checked .line3 {
	-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
	-o-transform: translateY(-10px) translateX(0) rotate(-45deg);
	transform: translateY(-10px) translateX(0) rotate(-45deg);
	background: #fff;
	z-index: 999;

}

/* Mobile menu: LINKS */
.mobile-menu {
/*	display: none;*/
	visibility: hidden;
	position: fixed;
	transform: translateZ(0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #282A3A;
	pointer-events: none;
	z-index: 999;
	opacity: 0;
	transition: opacity 0.1s ease, visibility 0.1s ease;
}

.mobile-menu.show {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.show ul li:hover {
	background: #444;
	border-radius: 5px;
	cursor: pointer;
}


.mobile-menu.show ul li.social_media:hover {
	background: unset;

}

.mobile-nav li {
	margin: 0 auto;
	line-height: 2em;
}


.mobile-nav {
	list-style: none;
	padding: 2em 2em;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	justify-items: center;
	/* place-items: unset; */
	margin: auto;
	align-self: center;
	height: 100vh;
}

.mobile-nav li {}

.mobile-nav a {
	color: white;
	text-decoration: none;
}

.mobile-menu ul li a {
	font-size: 1.2rem;
	color: #fff;
	text-decoration: none;
	padding: 0.15em;
}


/* start: INSTAGRAM/FACEBOOK - LOGO */

.mobile-menu .social_media {
	display: flex;
	justify-content: center;
	flex-direction: row;
	margin: 0 auto;
	width: 100%;
	gap: 0.8em;
	padding-top: 1em;
}

nav .social_media {
	display: flex;
	justify-content: left;
	flex-direction: row;
	margin: 0 auto;
	width: 100%;
	margin-left: 0.95em;
	gap: 0.5em;
	padding-top: 1em;
	margin-top: -0.4em;
}

.social_media .instagram-image {
	background-image: url("../kuvat/instagram-wh.svg");
}

.social_media .otava-image {
	background-image: url("../kuvat/otava5.png");
}

.social_media .fb-image {
	background-image: url("../kuvat/fb-wh.svg");
}

.social_media .logos{
	display: flex;
	position: relative;
	padding: 0;
	margin: 0;
	pointer-events: auto;
}

.some-nav {
	display: flex;
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-size: 60px;
	opacity: 1;
	transform: scale(0.40);
	margin: 0.05em 0 0 0;
}

.white_background .some-nav {
	filter: invert(90%);
}

.some-nav:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.insta_kohde:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}


.white_background .some-nav:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* Planeetta sivulle (DEPRICATED) ja teksteille yleisemminkin tyylejä */
.section_p_container {
	display: flex;
	width: 100%;
	align-items: center; 
	justify-content: center;
	flex-direction: column;
}

.section_p_container .div_bottom, .planeetta_container{
	gap: 20px; 
	margin-top: 3em; 
	align-items: center; 
	justify-content: center;
	margin: auto;
}

.section_p_container .div_top {
	padding-top: 0.5em;
	padding-bottom: 1em;
}

.book_image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.main-page-image {
	width: 100%;
	width: 100vw;
}

.book-cover-image {
	width: 100%;
	width: 100vw;
}

.section_p_container .teksti_punainen {
	line-height: 1.5em;
}
.section_p_container .teksti_punainen p {
	line-height: 1.5em;
}

	/* yhteinen laatikko: inline, koska isolla näytöllä muuten jää alle */
	/* END OF INSTAGRAM/FACEBOOK LOGO section */



/* 🔹 Yläotsikot: korostettu, ei-klikattava */

.mobile-nav .nav-header {
    padding: 2px 20px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    cursor: default;
    border-bottom: 1px solid #eee;
    margin: 12px 0 4px;
}

.mobile-menu .nav-group-header.third {
	position: relative;
	border-bottom: none;
	width: 95px; /*viivan pituus */
}

.mobile-menu .nav-group-header.third::after {
    content: '';
    position: absolute;
    bottom: 4px;          /* Säädä etäisyyttä tekstistä */
    left: 10px;              /* Vasemmasta reunasta */
	/*width: 40%;      */     /* 🔧 Säädä tämä: 40%-80% tarpeen mukaan */
	height: 1px;
	width: var(--line-width, 60%); /* Oletus 60%, jos muuttujaa ei ole */
    background: #ccc; /* Pehmeä häivytys */
    pointer-events: none; /* Estä viivan "klikattavuus" */
}


.mobile-nav .nav-group-header {padding-top: 2em;}
/* center bottom line */
.mobile-nav .nav-group-header.third {padding-top:1em; margin-bottom:1em;}

.nav-links .nav-header .header-text,
.mobile-nav .nav-header .header-text {
    display: block;
}

span.header-text {line-height: 0.8em;}

/* 🔹 Ryhmän ensimmäinen otsikko: isompi marginaali */
.nav-links .nav-header:first-child,
.mobile-nav .nav-header:first-child {
    margin-top: 0;
    padding-top: 8px;
}

/* 🔹 Custom-luokat: esim. .secondary muuttaa väriä */
.nav-header.secondary {
    color: #888;
    border-bottom-color: #ddd;
}

/* 🔹 Normaalit linkit: säilytä vanhat tyylit */
.main_link,
.main_link_mobile {
    /* ... vanhat tyylit ... */
}

/* 🔹 Estä hover-efektit yläotsikoille */
.nav-links .nav-header:hover,
.mobile-nav .nav-header:hover {
    background: none;
    padding-left: 0;
}


.sidebar .nav-links .nav-header.third {
	padding: 20px 20px 12px;
	margin-bottom:2px;
}


/* 🔹 Yläotsikon perustyylit */
.sidebar .nav-links .nav-header {
    position: relative; /* Tarvitaan ::after-positionointia varten */
    padding: 25px 20px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ccc;
    cursor: default;
    /* Poista vanha border-bottom jos sellainen oli */
    border-bottom: none;
}

/* 🔹 Lyhyt viiva: 60% leveä, vasemmalle tasattu */
.sidebar .nav-links .nav-header::after {
    content: '';
    position: absolute;
    bottom: 4px;          /* Säädä etäisyyttä tekstistä */
    left: 20px;              /* Vasemmasta reunasta */
	/*width: 40%;      */     /* 🔧 Säädä tämä: 40%-80% tarpeen mukaan */
	height: 1px;
	width: var(--line-width, 60%); /* Oletus 60%, jos muuttujaa ei ole */
    background: linear-gradient(to right, #ccc, transparent); /* Pehmeä häivytys */
    pointer-events: none; /* Estä viivan "klikattavuus" */
}


/* --------------------------------------------------------------------------------------------------------------- */

.container_palaute {
	width: var(--container-optional-width);
	padding-bottom: 10px;
}

@media (max-width: 1200px) {.container_palaute { width: 98%; }}
@media (max-width: 850px) { .container_palaute { width: 80%; }}
@media (max-width: 800px) { .container_palaute { width: 79%; }}
@media (max-width: 765px) { .container_palaute { width: 99%; }}
@media (max-width: 665px) { .container_palaute { width: 95%; }}

.container {
	display: block;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
}

.sidebar .em125 {font-size: 1.25rem;}

.space {
	margin-top: 2.5em;
}


.sidebar .nav_title {
	margin-bottom: 0.5em;
	margin-left: 0.59em;
}

.sidebar .nav_title p {
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 0.75rem;
	color: #eeeeee;
	text-transform: uppercase;
}

.content, .sidebar {
	padding-top: 20px;
}

/* main div */
.content_bottom {
	padding:0;
	margin-left:0;
}


.sidebar ul {
  	list-style-type: none;
	padding: 0;
}

/*.sidebar li.nav-item-intend {padding-left: 1em;}*/
.sidebar nav .header-text { color:#84848F;}

.sidebar .main_link {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.sidebar .left_pad {
	padding-left: 1em;
	padding-right: 1em;
}

.sidebar .main_link:hover {
	background: #444;
	border-radius: 5px;
	cursor: pointer;
}

.sidebar li {
  	padding-bottom: 6px;
	padding-top: 6px;
}

.sidebar a {
	text-decoration: none;
	color: #fff;
	font-weight: 600;
}

.sidebar a.active, .mobile-nav li a.active{
	/*color: #C69749;*/ /*orange*/
	color: var(--yellow-color-one); 
}

.sidebar a.active:hover {}

.sidebar a:hover {}

.footer {
	position: sticky;
	bottom: 0;
	z-index: -1;
	/*background-color: #282A3A;*/
	color: #fff;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.footer p {
	justify-content: center;
	align-items: center;
	padding-left: 250px;
	padding-top: 20px;
	display: block;
	margin: 0 auto;
	margin-block-start: 0;
	margin-block-end: 0;
}


footer {
	background: #282A39;
}

.footer_div {
	width: 100%;
	padding-bottom: 55px;
	padding-top: 55px;
	margin: 0 auto
}

.footer_p {
	font-size: 1rem;
	color: #fff;
	align-items: center;
	text-align: center;
}


.placeholder {
	z-index: 1;
	height: 50px; /* same as footer height */
}

/*https://stackoverflow.com/questions/32794495/css-transition-on-parent-div-causing-absolute-child-divs-to-jump*/

.top-bar, .mid-bar, .bot-bar {
	width: 22px;
	height: 3px;
	padding:1px;
	position: absolute;
  /*left: 11px;*/
	left:13px;
	background-color: #fff;
	transition: all 300ms ease; /* added this to prevent the jump */
}
.top-bar {
/*  top: 14px;*/
	top:15px;

}
.mid-bar {
 /* top: 21px;*/
	top:22px;
}
.bot-bar {
  /*top: 28px;*/
	top:29px;
}


@media (min-width: 899.9999px) and (min-height: 430.0001px) {.hamburger_wrapper {display:none;}}
@media (max-width: 900px) {.hamburger_wrapper {display: flex;}}
@media (max-width: 768px) { .hamburger_wrapper {transform: scale(-0.9); top:0.5em; right: 0.5em;}
	.footer_div {
		width: 100%;
		padding-bottom: 35px;
		padding-top: 35px;
		margin: 0 auto
	}
}
@media (max-width: 668px) { .hamburger_wrapper {transform: scale(0.95); top:0.9em; right: 0.9em;}}
@media (max-width: 410px) { .hamburger_wrapper {transform: scale(0.82); top:0.9em; right: 0.9em;}}

/* activate mobile menu, hide aside.sidebar */
@media (max-width: 900px) {
	.footer p, .footer {
		padding-left: 0;
		padding-bottom: 25px;
		padding-top: 25px;
	}

	aside.sidebar {
		display: none;
	}

	.hamburger {
		display: block;
	}

  	.hamburger div {}

	main.content {
        margin-left: 0;
	}
}

/* small landscape screen's also */

@media (min-height: 0px) and (max-height: 430.000001px) {
	aside.sidebar {
		display: none;
	}

	.hamburger {
		display: block;
	}
	main.content {
        margin-left: 0;
	}

}


.witdh_80 {
	margin: 0 auto;
	width: 80%;
}
.kuvalaatikko {} /* main images div */
.palautelaatikot {
	padding: 0 20px;
} /*palaute div main */


.gallery {
  	display: flex;
	flex-wrap: wrap; /* Allows items to wrap into rows */
	justify-content: center; /* Centers the images in the middle of the row */
	gap: 20px; /* Optional: Adds space between images */
}

.image-box {
	flex: 0 1 calc(50% - 20px); /* Two columns, subtracting the gap space */
	display: flex;
	justify-content: center; /* Centers image horizontally inside each box */
	align-items: center; /* Centers image vertically inside each box */
	padding: 10px;
}

.image-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.image-box img {
	max-width: 100%; /* Ensures the image scales properly */
	height: auto;
}


.links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 75%;
    margin-top: 10px;
}

.links a {
	color: #000;
	text-decoration: none;
	font-size: 0.90rem;
}
.links a:hover {
	text-decoration:underline;
}

.cut_text {
	width:45%;
	margin: 0 auto;
}

.image_container {
	position: relative;
	text-align: center;
	color: white;
}

.bottom-right {
	position: absolute;
	bottom:10px;
	right:5px;
	font-weight: bold;
}

@media (max-width: 900px) {
	.cut_text {
		width:88%;
		margin: 0 auto;
	}

	.image-box {
    	flex: 0 1 100%; /* On small screens, each image takes the full width */
  	}
	.image-box img {
		max-height: 100vh;
		max-height:100%;
	}
}

/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    /*font-size: 0.75em;
	color: #999;*/
    top: -15px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    width: 390px;
	width: 45%;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}



input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
	

a.uutinen {
	color: var(--font-color-black);
	text-decoration: none;
	text-align: justify;
}


.palaute p.uutinen {
	font-size: 1.5rem;
	color: #000;
	text-decoration: none;
	text-align: center;
}

span.sitaatti, p.sitaatti {
	font-style: italic;
	text-align: center;
	line-height: 1.5em;
}

.uutislinkki.kuvat { font-weight: unset; }

p.yellow2.tekijatieto {font-size: 1rem; margin-top:0.2em; padding-right:5px;}
p.yellow2.tekijatieto.empis {font-size: 1rem; padding-right:0;}
p.yellow2 {
	margin-block-start: 0;
	margin-block-end: 0;
	margin: 0;
	font-size: 1.20rem;
	display: inline-block;
	/*text-align: center;*/
}


.uutinen {
	display: block;
	margin: 0 auto;
}


.uutinen:hover > div .uutislinkki, .uutinen:focus > div .uutislinkki {
	text-decoration: underline;
	/*color:#C69749;*/
}

.uutisdiv:hover > .uutinen .uutislinkki {
	text-decoration: underline;
	/*color:#C69749;*/
}

.uutisdiv:hover > .yellow2 {
	text-decoration: none !important;
}


.uutinen:hover > div .yellow2, .uutinen:focus > div .yellow2 {
}


.green {color: var(--green-color-one);}
.yellow {color: #F1C675;}
.bold {font-weight: bold;}
.black {color: var(--font-color-black);}
.force_black {color: var(--font-color-black) !important;}
.green2 {color: var(--green-color-two);}
.yellow2 {color: var(--palaute-lahde-vari);}
.yellow2.empis {color: #fff;}

.force_gray_font {
	color: #343030
}

.force_red_font {
	color: rgb(236, 99, 89);
}

.uutinen:hover > div .yellow2, .uutinen:focus > div .yellow2 {}

.main_lehtijutut {
	display: block;
	position: relative;
}



.uutisdiv {
	display: block;
	margin: 0 auto;
}


.uutisdiv.feedback {
	display: block;
	padding-top:1.5em;
	/*padding: 5px; 0;*/
}

.uutisdiv.sitaatti-div {
	width: 70%;
	margin: 0 auto;
}

.section h1 {
	width: 100%;
	display: flex;
	font-size: 2.1rem;
	/*justify-content: center;
	text-align: center;*/
	text-align: left;
	hyphens: auto;
	margin: 0;
}


@media (max-width: 768px) {
	.uutisdiv {
		display: table;
		margin: 0 auto;
		/*padding: 5px; 0;*/
	}

	.section {
		padding-bottom: 20px;
	}

	.some_space_1em { padding-top: 0.65em;}
	.some_space_2em { padding-top: 1.50em;}
	.some_space_3em { padding-top: 2.50em;}

	.uutisdiv.sitaatti-div {width: 80%;}

	.mobile-menu ul li a {
		font-size: 2rem;
		line-height: 3.3rem;
		padding: 0.15em;
	}
}

@media (max-width: 658px) {.uutisdiv.sitaatti-div {width: 90%;}}
@media (max-width: 568px) {.uutisdiv.sitaatti-div {width: 95%;}}
@media (max-width: 900px) {.uutisdiv {width: 100%;}}
@media (max-width: 768px) {.uutisdiv {width: 100%;}}
@media (min-width: 500px) and (max-width: 568px) {
	.uutisdiv {
		width: 100%;

	}

	.section h1 {font-size: 1rem;}
	
}

@media (max-width: 4300px) { .section { width: 79%; }}
@media (max-width: 3000px) { .section { width: 75%; }}
@media (max-width: 1900px) { .section { width: 74%; }}
@media (max-width: 1600px) { .section { width: 76%; }}
@media (max-width: 1500px) { .section { width: 75%; }}
@media (max-width: 1400px) { .section { width: 80%; }}
@media (max-width: 1365px) { .section { width: 73%; padding-bottom: 15px; }}
@media (max-width: 1300px) { .section { width: 81%; }}
@media (max-width: 1200px) { .section { width: 82%; }}
@media (max-width: 1000px) { .section { width: 88%; }}
@media (max-width: 950px) {  .section { width: 89%; }}
@media (max-width: 900px) {  .section { width: 100%; }}
@media (min-width: 550px) and (max-width: 899.99999px) {  .section { width: 90%; }}
@media (min-width: 500px) and (max-width: 549.9999999999px) {  .section { width: 95%; }}
@media (max-width: 499.9999999999px) {  .uutisdiv { width: 95%; }}


@media (max-width: 768px) { 
	.section h1 { 
		font-size: 1.5rem;
		margin-block-end: 0;
		width: 80%;
		margin: 0;
	}
	
	.section h1 .yhteydenotto {}

	.section.kirjailija h1 {
		padding-top: 1em;
	}
}


.sidebar {
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
}




/*MOBILE */

@media (max-height: 800px) {
    .mobile-menu ul li a {
	 	font-size: 1.5rem;
		padding: 0.2em;
		line-height: 2rem;
	}
	.mobile-nav .nav-header { margin: 5px 8px;}
}

@media (max-height: 680px) {
    .mobile-menu ul li a {
	 	font-size: 1.1rem;
		padding: 0.2em;
		line-height: 1.6rem;
	}
	.mobile-nav .nav-header { margin: 4px 6px;}
}

@media (max-height: 600px) {
    .mobile-menu ul li a {
      font-size: 1rem;
      padding: 0.2em;
	}
	.mobile-nav .nav-header { margin: 2px 3px;}
}

@media (max-height: 540px) {
    .mobile-menu ul li a {
      font-size: 1rem;
	  padding: 0.3em;
	  line-height: 0.9em;
	}
	.mobile-nav li {line-height:1.5em;}
	.mobile-nav .nav-header { margin: 0px 2px;}
	.span.header-text {line-height: 0.8em; font-size: 0.2rem;}
}


@media (max-height: 420px) {
    .mobile-menu ul li a {
      font-size: 0.5rem;
	  padding: 0.2em;
	  line-height: 0.5em;
	}
	.mobile-nav li {line-height:1.2em;}
	.mobile-nav .nav-header { margin: 0;}
	.span.header-text {line-height: 0.8em; font-size: 0.2rem;}
}


@media (min-width: 769px) and (max-width: 1366px) {
	.some-nav {
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
	}
}

@media (min-width: 300px) and (max-width: 768px) {
	.some-nav {
		transform: scale(0.75);
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;

	}
}

@media (min-width: 150px) and (max-width: 480px) {}
@media (min-width: 0px) and (max-width: 299px) {}


/* end of mobile menu */

@media screen and (min-height: 700px) and (min-width: 2000.1px) and (max-width: 2500px) {
	.sidebar {width: 22%;} 
}

@media screen and (min-height: 700px) and (min-width: 1601px) and (max-width: 2000px) {
	.sidebar {width: 22%;} 
}
@media screen and (min-height: 700px) and (min-width: 1200.1px) and (max-width: 1600.99999999999px) {
	.sidebar {width: 25%;} 
}

@media screen and (min-height: 700px) and (min-width: 2401px) and (max-width: 3500px) {
	.section h1 { font-size: 2.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 2.2rem;
		line-height: 3rem;
	} /* leipäteksti */
	.sidebar .em125 {font-size: 1.8rem;} /*desktop linkit*/
	.some-nav {	transform: scale(0.65);}
	nav .social_media {gap: 0.5rem; margin-left:1rem; padding-top:1em;}

	.sidebar .nav-links .nav-header {padding: 1.5rem 1.6rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left:1.6rem;}

	a.lataus, p.footer_p, p.yellow2 {font-size: 2rem;}
	p.uutislinkki {font-size: 2.2rem; line-height: 2.9rem;}

	.some_space_tahdet {font-size: 3rem;}
	.contact-form {max-width: 80%;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1.8rem;}
	p.yellow2.tekijatieto  {font-size: 1.5rem;}
}


@media screen and (min-height: 1050px) and (min-width: 2401px) and (max-width: 3000px) {
	.section h1 { font-size: 3.5rem;} /*otsikko*/
	.sidebar .em125 {font-size: 2.8rem;} /*desktop linkit*/
	span.header-text {font-size:1.5rem;}
	.sidebar .nav-links .nav-header, .sidebar .nav-links .nav-header.third {padding: 1.5rem 2.5rem 20px;}
	.sidebar .nav-links .nav-header::after {left:2.5rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 2.2rem;
		line-height: 3rem;
	} /* leipäteksti */
	/* palautteet */
	p.uutislinkki {font-size: 2.2rem; line-height: 3rem;}
	p.footer_p, p.yellow2 {font-size: 2.2rem;}
	.footer { height:300px;}
	a.lataus, span.yellow2 {font-size: 2.1rem;}
	p.yellow2.tekijatieto  {font-size: 1.8rem;}
	
	.some_space_1em { padding-top: 2em;}
	.some_space_2em { padding-top: 4em;}
	.some_space_3em { padding-top: 3em;}
	.some_space_4em { padding-top: 8em;}
	.some_space_5em { padding-top: 10em;}
	/*sitaatit */
	.uutisdiv.sitaatti-div {width: 85%;}

	/*navigointi sosiaalinen media logot */
	.some-nav {	transform: scale(1);}
	nav .social_media {gap: 2rem; margin-left:2.3rem; padding-top:2em;}
	.some_space_tahdet {font-size: 3rem;}
	.contact-form {max-width: 80%;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:2rem;}
}

@media screen and (min-height: 700px) and (min-width: 1919.999px) and (max-width: 2400.999999999px) {
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.sidebar .em125 {font-size: 1.5rem;} /*desktop linkit*/
	.some-nav {	transform: scale(0.5);}
	 nav .social_media {gap: 1.5rem; margin-left: 0.6rem; padding-top:2em;}
}

/*hd tv 1080p*/
@media screen and (min-height: 870px) and (min-width: 1919.999px) and (max-width: 2400.999999999px) {
	.section h1 { font-size: 2.5rem;} /*otsikko*/
	.sidebar .em125 {font-size: 2rem;} /*desktop linkit*/
	span.header-text {font-size: 1rem;}
	.sidebar .nav-links .nav-header, .sidebar .nav-links .nav-header.third {padding: 2rem 1.5rem 20px;}
	.sidebar .nav-links .nav-header::after {left: 1.6rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.7rem;
		line-height: 2.5rem;
	} /* leipäteksti */
	/* palautteet */
	footer {height:400px;}
	p.uutislinkki {font-size: 1.6rem; line-height: 2rem;}
	.footer { height:140px;}
	p.yellow2, p.footer_p, a.lataus, span.yellow2 { font-size: 1.5rem;}
	p.yellow2.tekijatieto  { font-size: 1.4rem;}
	
	.sidebar .nav-links .nav-header {padding: 1.5rem 2rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left:2rem;}

	.some_space_1em { padding-top: 1.3em;}
	.some_space_2em { padding-top: 2.5em;}
	.some_space_3em { padding-top: 3.5em;}
	.some_space_4em { padding-top: 5em;}
	.some_space_5em { padding-top: 6em;}
	/*sitaatit */
	.uutisdiv.sitaatti-div {width: 80%;}

	/*navigointi sosiaalinen media logot */
	.some-nav {	transform: scale(0.7);}
	 nav .social_media {gap: 1.5rem; margin-left: 1.4rem; padding-top:1em;}
	.some_space_tahdet {font-size: 1.8rem;}
	.contact-form { max-width: 89%;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1.4rem;}
}



@media screen and (min-height: 600px) and (min-width: 901px) and (max-width: 1919.889px) {
	.sidebar .nav-links .nav-header {padding: 1.5rem 1.5rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left:1.5rem;}
	span.header-text {font-size: 0.75rem;}
}


@media screen and (min-height: 700px) and (min-width: 1820px) and (max-width: 1919.889px) {
	.sidebar .em125 {font-size: 2rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.5rem;
	}
	nav .social_media {margin-left: 0.5rem;}
}


/*1404x1404*/ /*ex min-width 1420px*/
@media screen and (min-height: 1000px) and (min-width: 1000px) and (max-width: 1919.889px) {
	.sidebar .em125 {font-size: 2rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 2.1rem;
	}
	p.uutislinkki {font-size: 1.8rem; line-height: 2.3rem;}
	p.footer_p, p.yellow2 {font-size: 1.8rem;}
	nav .social_media {margin-left: 0.5rem;}
	.some-nav {	transform: scale(0.7);}
	 nav .social_media {gap: 1.5rem; margin-left: 1.3rem; padding-top:1em;}
	.sidebar .nav-links .nav-header {padding: 1.5rem 1.8rem 0.5rem;}
	span.header-text {font-size:0.75rem; line-height:1.3rem;}
	.sidebar .nav-links .nav-header::after {left:1.8rem;}
	.uutisdiv.sitaatti-div { width: 82%;}
	a.lataus, .send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1.8rem;}

}


@media screen and (min-height: 699px) and (max-height:999.999px) and (min-width: 1501px) and (max-width: 1819.999px) {
	.sidebar .em125 {font-size: 1.5rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.3rem;
	}
	.some-nav {	transform: scale(0.6);}
	 nav .social_media {gap: 0.1rem; margin-left: 0.6rem; padding-top:1.5em;}
	.uutisdiv.sitaatti-div { width: 82%;}

}

/*M1 macbook?*/
@media screen and (min-height: 699.999px) and (max-height: 1100px) and (min-width: 1401px) and (max-width: 1919.999px) {
	.sidebar .em125 {font-size: 1.35rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.20rem; line-height: 1.85rem;
	}
	.some-nav {	transform: scale(0.6);}
	 nav .social_media {gap: 0.1rem; margin-left: 0.5rem; padding-top:1.5em;}
	.uutisdiv.sitaatti-div { width: 88%;}

	p.uutislinkki {font-size:1.15rem; line-height:1.5rem;}

	.sidebar .nav-links .nav-header {padding: 1.5rem 1.3rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left: 1.3rem;}
	span.header-text {font-size: 0.75rem; line-height: 1rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1rem;}

	.some_space_tahdet {font-size: 1.4rem;}
	.contact-form {max-width:80%; width:80%;}
	.formi input {margin-bottom:0.5rem;}
}

/*M1 macbook*/
@media screen and (min-height: 700px) and (max-height:1100px) and (min-width: 1201px) and (max-width: 1400.999px) {
	.sidebar .em125 {font-size: 1.30rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.20rem;
	}
	.some-nav {	transform: scale(0.6);}
	 nav .social_media {gap: 0.1rem; margin-left: 0.4rem; padding-top:1.5em;}
	.uutisdiv.sitaatti-div { width: 85%;}

	.sidebar .nav-links .nav-header {padding: 1.5rem 1.3rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left: 1.3rem;}
	span.header-text {font-size: 0.75rem; line-height:1rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1rem;}

	.some_space_tahdet {font-size: 1.4rem;}
	.contact-form {max-width:80%; width:80%;}
}




/* some ipad, example */
@media screen and (min-height: 700px) and (max-height:1500px) and (min-width: 1001px) and (max-width: 1200.999px) {
	.sidebar .em125 {font-size: 1.3rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.30rem;
	}
	.some-nav {	transform: scale(0.6);}
	 nav .social_media {gap: 0.1rem; margin-left: 0.5rem; padding-top:1.5em;}
	.uutisdiv.sitaatti-div { width: 88%;}

	p.uutislinkki {font-size:1.3rem; line-height:1.75rem;}  /*feedback */

	.sidebar .nav-links .nav-header {padding: 1.5rem 1.3rem 0.5rem;}
	.sidebar .nav-links .nav-header::after {left: 1.3rem;}
	span.header-text {font-size: 0.75rem; line-height: 1rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1rem;}

	.some_space_tahdet {font-size: 1.4rem;}
	.mobile-menu .social_media {padding-top:0;}

	.contact-form {max-width:100%; width:100%;}

}

@media screen and (min-height: 700px) and (max-height: 1100px) and (min-width: 900.0001px) and (max-width: 1000.999px) {
	.sidebar .em125 {font-size: 1.3rem; line-height:1.4rem;}
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.25rem;
	}
	.uutisdiv.sitaatti-div { width: 85%;}

	.some-nav {	transform: scale(0.6);}
	nav .social_media {gap: 0.1rem; margin-left: 0.5rem; padding-top:1.1em;}
	.sidebar .nav-links .nav-header {padding: 1.5rem 1.3rem 0.2rem;}
	.sidebar .nav-links .nav-header::after {left: 1.3rem;}
	
	span.header-text {font-size: 0.65rem; line-height:1rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size:1rem;}

	p.uutislinkki {font-size:1.2rem; line-height:1.55rem;}  /*feedback */
	.some_space_tahdet {font-size: 1.4rem;}
	.mobile-menu .social_media {padding-top:0;}

	.contact-form {max-width:100%; width:100%;}
}

/* tähän vaihdettu 1000>1200px*/
@media screen and (min-height: 640px) and (max-height: 699.9999px) and (min-width: 1200px) and (max-width: 2900px){
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.5rem;}
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.20rem; line-height:1.85rem;
	}
	p.uutislinkki, p.footer_p, p.yellow2, a.lataus, span.yellow2 {font-size: 1.1rem;}
	p.uutislinkki {font-size: 1.2rem; line-height:1.4rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size: 0.95rem;}
	.sidebar .nav-links .nav-header {padding: 2rem 1.2rem 0.6rem;}
	.sidebar .nav-links .nav-header::after {left:1.2rem;}
	 nav .social_media {gap: 0rem; margin-left: 0.3rem; padding-top:0.2em;}
	.some-nav {	transform: scale(0.5);}
	.contact-form {max-width:90%; width:90%;}
	.uutisdiv.sitaatti-div { width: 80%;}
}

/* no tässä nyt välimalli, edelliseen */
@media screen and (min-height: 640px) and (max-height: 699.9999px) and (min-width: 1000.00001px) and (max-width: 1199.999px){
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.5rem;}
	.sidebar .nav-links .nav-header {padding: 2rem 1.25rem 0.6rem;}
	.sidebar .nav-links .nav-header::after {left: 1.25rem;}
	 nav .social_media {gap: 0rem; margin-left: 0.3rem; padding-top:0.2em;}
	.some-nav {	transform: scale(0.5);}
	.contact-form {max-width:90%; width:90%;}
	.uutisdiv.sitaatti-div { width: 85%;}


}

@media screen and (min-height: 650px) and (max-height: 699.9999px) and (min-width: 900.0001px) and (max-width: 1000px){
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.5rem;}
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.20rem; line-height:1.75rem;
	}
	p.footer_p, p.yellow2, a.lataus, span.yellow2 {font-size: 1.1rem;}
	p.uutislinkki {font-size: 1.25rem; line-height:1.3rem;}

	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size: 0.95rem;}
	.sidebar .nav-links .nav-header {padding: 2rem 1.2rem 0.6rem;}
	.sidebar .nav-links .nav-header::after {left:1.2rem;}
	 nav .social_media {gap: 0rem; margin-left: 0.25rem; padding-top:0.2em;}
	.some-nav {	transform: scale(0.5);}
	.contact-form {max-width:90%; width:90%;}
	.uutisdiv.sitaatti-div { width: 85%;}
}

/* onko turhan leveä 2900px? sille oma sääntö?*/
@media screen and (min-height: 500px) and (max-height: 649.9999px) and (min-width: 900.0001px) and (max-width: 2900px){
	.sidebar .em125, .sidebar a {font-size: 1.3rem; line-height:1.5rem;}
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.25rem; line-height:1.8rem;
	}
	p.footer_p, p.yellow2, a.lataus, span.yellow2 {font-size: 1.05rem;}
	p.uutislinkki {font-size:1.1rem; line-height:1.2rem;}
	.send_nappi, .palaute_lomakkeen_teksti, h2.yhteydenotto {font-size: 0.95rem;}
	
	.sidebar .nav-links .nav-header {padding: 2rem 1.2rem 0.6rem;}
	.sidebar .nav-links .nav-header::after {left:1.2rem;}
	 nav .social_media {gap: 0rem; margin-left: 0.3rem; padding-top:0.2em;}
	.some-nav {	transform: scale(0.5);}

	.contact-form {max-width:100%; width:100%;}
	.uutisdiv.sitaatti-div { width: 85%;}
	nav .nav-group-header {display:none;}
}


@media only screen and (max-width: 768px){
    .styled-input {width:100%;}
	.witdh_80 {width:100%;}
}
@media only screen and (min-width: 900.0001px) and (max-width: 1000px){.witdh_80 {width:85%;}}
@media only screen and (min-width: 1000.0001px) and (max-width: 1200px){.witdh_80 {width:80%;}}



@media screen and (min-width: 750px) and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 1.6rem;
		padding: 0.15em;
	}
}

/* ipad */
@media (min-height: 900px) and  (max-height: 1300px) and (min-width:700px) and (max-width: 900px) {
	.section h1 { font-size: 1.7rem;} /*otsikko*/

	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.30rem; line-height:2.1rem;
	}	

	.intend {
	  text-indent: 15px;
	}
	.send_nappi, .palaute_lomakkeen_teksti { font-size: 1.35rem;}
	a.lataus, p.yellow2.tekijatieto {font-size: 1.2rem; padding-right:10px;}
	p.footer_p, p.yellow2, span.yellow2 {font-size: 1.35rem;}	
	h2.yhteydenotto {font-size:1.4rem; padding-bottom:1em;}
	p.uutislinkki {
		line-height: 1.7rem;
		font-size: 1.25rem;
	}
	.contact-form {max-width:100%; width:100%; line-height:1.25rem; padding:1.35rem;}
	.formi, input, input#name, input#email, input#phone, textarea#message { font-size: 18px;}

}

@media screen and (min-height: 800px) and (max-height: 900px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 2rem;
		line-height: 3.2rem;
		padding: 0.15em;
	}

}

/*500(width) × 721 example AND 886(width) × 721*/
@media screen and (min-height: 700px) and (max-height: 799.99px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 2rem;
		line-height: 3rem;
		padding: 0.15em;
	}

	.contact-form {max-width:100%; width:100%; line-height:1.25rem; padding:1.35rem;}
	.formi, input, input#name, input#email, input#phone, textarea#message { font-size: 18px;}
	p.footer_p, p.yellow2, a.lataus, span.yellow2 {font-size: 1.15rem;}	

	p.uutislinkki {
		line-height: 1.5rem;
		font-size: 1.25rem;
	}	
	.some-nav {	transform: scale(0.6);}

}


@media screen and (min-height: 600px) and (max-height: 699.99px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 1.7rem;
		line-height: 2.4rem;
		padding: 0.15em;
	}

}


@media screen and (min-height: 500px) and (max-height: 599.99px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 1.3rem;
		line-height: 1.8rem;
		padding: 0.15em;
	}

}


@media screen and (min-height: 450px) and (max-height: 499.99px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 1.4rem;
		line-height: 2.3rem;
		padding: 0.15em;
	}
	.nav-group-header { display:none;}

}

@media screen and (min-height: 400px) and (max-height: 449.99px) and (min-width: 300px )and (max-width: 900px){
	.mobile-menu ul li a {
		font-size: 1.2rem;
		line-height: 1.95rem;
		padding: 0.1em;
	}
	.some-nav {	transform: scale(0.56);}
	.nav-group-header { display:none;}
	.mobile-menu .social_media {padding-top:0;}
	
	.intend {text-indent: 20px;}
	.contact-form { max-width: 95%;}
}

@media screen and (min-height: 360px) and (max-height: 399.99px) and (min-width: 300px )and (max-width: 900px){
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.send_nappi, .palaute_lomakkeen_teksti { font-size: 1.25rem;}
	a.lataus, .linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.35rem; 
		line-height: 2.15rem;
	}	
	
	.mobile-menu ul li a {
		font-size: 1.25rem;
		line-height: 1.8rem;
		padding: 0.1em;
	}
	p.footer, p.yellow2 {font-size: 1.25rem;}
	p.uutislinkki {font-size: 1.30rem; line-height:1.6rem;}
	.some-nav {	transform: scale(0.56);}
	.nav-group-header { display:none;}
	.mobile-menu .social_media {padding-top:0;}

	.intend {text-indent: 20px;}
	.contact-form { max-width: 95%;}

}

/* landscape */

@media (min-width: 900.00009px) and (max-width: 2600.99999999999999px) and (min-height: 549.999px) and (max-height: 599.999px) {
	span.header-text {display:none !important;}
	.sidebar .em125, .sidebar a {font-size: 1rem; line-height:1rem;}

	.some-nav {	transform: scale(0.5);}
	 nav .social_media {gap: 0; padding-left:0; margin-left: 0; padding-top:0.5rem;}

	.sidebar .nav-links .nav-header::after {left:1rem;}
	 aside.sidebar { width: 20%;}
}

@media (min-width: 900.00009px) and (max-width: 1900.99999999999999px) and (min-height: 450px) and (max-height: 550px) {
	.nav-group-header { display:none;}
	span.header-text {display:none !important;}
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.5rem;}

	.some-nav {	transform: scale(0.45);}
	 nav .social_media {gap: 0; padding-left:0; margin-left: 0.1rem; padding-top:0.5rem;}

	nav .main_link a {padding:0;} 
	aside.sidebar { width: 18%;}
	aside.sidebar {padding-top:0.5rem;}
}

@media (min-width: 900.00009px) and (max-width: 1300.99999999999999px) and (min-height: 450px) and (max-height: 550px) {
	aside.sidebar { width: 21%;}
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.3rem;}
}


@media (min-width: 900.00009px) and (max-width: 1900.99999999999999px) and (min-height: 428px) and (max-height: 449.99999999999px) {
	.nav-group-header { display:none;}
	span.header-text {display:none !important;}
	.sidebar .em125, .sidebar a {font-size: 1.2rem; line-height:1.30rem;}

	.some-nav {	transform: scale(0.42);}
	 nav .social_media {gap: 0; padding-left:0; margin-left: 0.1rem; padding-top:0.5rem;}
	nav .main_link a {padding:0;} 

	aside.sidebar {padding-top:0.5rem;}
}

@media (min-width: 900.00009px) and (max-width: 1900.99999999999999px) and (min-height: 428px) and (max-height: 449.9999999999px) {
	aside.sidebar { width: 25%;}
}




@media (min-width: 900.00009px) and (max-width: 1100.99999999999999px) and (min-height: 428px) and (max-height: 449.99999999999px) {
	aside.sidebar { width: 22%;}
}

@media (min-width: 900.00009px) and (max-width: 2500.99999999999999px) and (min-height: 361px) and (max-height: 427.99999999999px) {
	.nav-group-header { display:none;}
	span.header-text {display: none !important;}
	.sidebar .em125 , nav .sidebar a {font-size: 1rem; line-height:1.21rem;}
	nav .main_link a {padding:0;} 
	.some-nav {	transform: scale(0.4);}
	nav .social_media {gap: 0; padding-left:0; margin-left: -0.2rem; padding-top:0;}
	.mobile-menu .social_media {padding-top:0;}
	aside.sidebar { width: 18%;}
	aside.sidebar {padding-top:0.5rem;}
}

@media (min-width: 900.00009px) and (max-width: 1100.99999999999999px) and (min-height: 361px) and (max-height: 427.99999999999px) {
	aside.sidebar { width: 21%;}
}

@media (min-width: 400px) and (max-width:1200px) and (min-height:339.999px) and (max-height:360.9999px) {
	.nav-group-header { display:none;}
	.section h1 { font-size: 1.25rem;} /*otsikko*/
	.mobile-menu ul li a {
		line-height: 1.65rem;
		font-size: 1.24rem;
	}
	.some-nav {	transform: scale(0.5);}
	 nav .social_media {gap: 0; margin:0; padding:0;}
	.mobile-menu .social_media {padding-top:0;}
}

/* iphone 13 mini landscape */
@media (min-width: 400px) and (max-width:1200px) and (min-height:313px) and (max-height:340px) {
	.nav-group-header { display:none;}
	.section h1 { font-size: 1.35rem;} /*otsikko*/
	.mobile-menu ul li a {
		line-height: 1.32rem;
		font-size: 1.10rem;
	}
	.mobile-nav {padding:0;}
	.some-nav {	transform: scale(0.4);}
	 nav .social_media {gap: 0; margin:0; padding:0;}
	.mobile-menu .social_media {padding-top:0;}

	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.25rem; line-height:1.80rem;
	}
	p.uutislinkki {line-height:1.25rem; line-height:1.45rem;} /*tiukempaan*/

}


@media (min-width: 300px) and (max-width:1200px) and (min-height:272px) and (max-height:312.999999px) {
	.nav-group-header { display:none;}
	.section h1 { font-size: 1.25rem;} /*otsikko*/
	.mobile-menu ul li a {
		line-height: 1.15rem;
		font-size: 0.90rem;
	}
	.mobile-nav {padding:0;}
	.some-nav {	transform: scale(0.40);}
	 nav .social_media {gap: 0; margin-bottom: 8px; padding:0;}
	.mobile-menu .social_media {padding-top:0; gap:0;}
}


@media (min-width: 300px) and (max-width: 1200px) and (min-height:250px) and (max-height:271.999999px) {
	.nav-group-header { display:none;}
	.section h1 { font-size: 1.4rem;} /*otsikko*/
	.mobile-menu ul li a {
		line-height: 1.1rem;
		font-size: 0.85rem;
	}
	.some-nav {	transform: scale(0.35);}
	 nav .social_media {gap: 0; margin:0; padding:0;}
	.mobile-menu .social_media {padding-top:0; gap:0;}
}

/*
@media screen and (max-height: 660px) and (min-width: 901px) and (max-width: 1141.9999px){
	.sidebar a {font-size: 0.85rem;}
	.sidebar .nav-links .nav-header {padding: 20px 19px 10px}
}

@media screen and (max-height: 570px) and (min-width: 901px) and (max-width: 1441px){
	.sidebar a {font-size: 0.7rem;}
	.sidebar .nav-links .nav-header {padding: 15px 19px 10px}
}

@media screen and (max-height: 520px) and (min-width: 901px) and (max-width: 1441px){
	.sidebar a {font-size: 0.65rem;}
	.sidebar .nav-links .nav-header {padding: 20px 19px 10px}
}

*/


/* pienet laitteet, iphone 13 yms. */
@media (max-width: 360.99999999999999px) {
	.uutisdiv {width:95%;}
	.section h1 { font-size: 1.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.25rem; line-height:1.80rem;
	}
	.intend {
	  text-indent: 25px;
	}
	.palaute_lomakkeen_teksti {font-size:1.2rem;}
	p.uutislinkki, p.footer_p, p.yellow2, a.lataus, span.yellow2 {font-size: 1.20rem;}
	p.uutislinkki {line-height:1.25rem; line-height: 1.45rem;} /*tiukempaan*/
	.contact-form {max-width:100%; width:100%; line-height:1.25rem; padding:1rem;}
	.formi, input, input#name, input#email, input#phone, textarea#message { font-size:20px;}
    .section h1 {padding-bottom:0;}
	.nav-group-header { display:none;}
}

/* isot puhelimet */
@media (min-width: 361px) and (max-width: 413.999999999999999999px){
	.section h1 { font-size: 1.5rem; line-height:2.5rem;} /*otsikko*/
	.linnut p.uutinen, .naytelmat p.uutinen, .hotelli p.uutinen, .roikkuva p.uutinen, .planeetta p.uutinen, .kirjailija p.uutinen {
		font-size: 1.35rem; line-height:2.2rem;
	}
	.intend {
	  text-indent: 20px;
	}
	p.uutislinkki, p.footer_p, p.yellow2, span.yellow2 {font-size: 1.35rem;}
	a.lataus {font-size: 1.1rem;}
	p.uutislinkki {line-height:1.64rem;} /*tiukempaan*/
	.contact-form {max-width:100%; width:100%; line-height:1.25rem; padding:1rem;}
	.formi, input, input#name, input#email, input#phone, textarea#message { font-size:20px;}
	.palaute_lomakkeen_teksti {font-size:1.2rem;}
	h2.yhteydenotto {line-height: 2rem;}	
	.uutisdiv { width:94%;}
	.section h1 {padding-bottom:0;}
	.nav-group-header { display:none;}
}

/* todella isot */
@media (min-width: 414px) and (max-width:510px) {
  .section h1 {padding-bottom:0;}
	.nav-group-header { display:none;}
}

.screen_size{
	display: block;
	width: 50%;
	margin: 0 auto;
}

.styled-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 15px;
    left: -5px;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.styled-input.wide { 
    width: 850px;
    max-width: 100%;
}

input.old, textarea.old {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    background-color: #282A3A;
    color: white;
    border-radius: 4px;
}


input, textarea {
	padding: 20px;
	border: 1px solid #ccc;
	width: 100%;
	font-size: 1rem;
	/* background-color: #282A3A; */
	/* color: black; */
	border-radius: 5px;
	border-color: #000;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    max-width: 100%;
    width: 850px;
    margin: 20px auto 25px auto;
}

.submit-btn {
    float: right;
    padding: 7px 35px;
    border-radius: 60px;
    display: inline-block;
    background-color: #4b8cfb;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
              0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
              0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
    .submit-btn {
        width:100%;
        float: none;
        text-align:center;
    }

	.intend {
		text-indent: 1em;
  }
}


.move {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.embla__button.embla__button--prev:hover, .embla__button.embla__button--prev:active,
.embla__button.embla__button--next:hover, .embla__button.embla__button--next:active  {
	color: #C69749;
}

.embla__button:disabled {
  color: var(--detail-high-contrast);
}
.embla__button__svg {
  width: 35%;
  height: 35%;
}

.embla__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
  	margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
	position: absolute; 
	bottom:-5%;
	justify-content: center;
	width: 100%;
}

@media (max-width: 768px) {
	.embla__dots {
		/*bottom: 0%;*/
	}
}

.embla__dot {
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	touch-action: manipulation;
	display: inline-flex;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	padding: 0;
	margin: 0;
	/*width: 2.6rem;
	height: 2.6rem;*/
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.embla__dot:after {
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  content: '';
}


.embla__dot--selected:after {
  box-shadow: inset 0 0 0 0.2rem var(--text-body);
}


.embla__dot {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.3rem;
  cursor: pointer;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}

.embla__dot:after {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background-color: rgba(24, 26, 27, 0.5);
  background-color: gray; /* 👈 normal state color */
  transition: background-color 0.3s ease;
}

/* Selected dot */
.embla__dot--selected:after {
  	background-color: #C69749; /* 👈 active dot color */
}

/* Hover color */
.embla__dot:hover:after {}

.embla {
	overflow: hidden;
}

.embla__container {
	display: flex;
}

.embla__slide {
  	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	place-items: center;
}

.embla {
  max-width: 50rem;
  margin: auto;
  --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 100%;
}

.embla__viewport {
  	overflow: hidden;
}

.embla__container {
	display: flex;
	touch-action: pan-y pinch-zoom;
	margin-left: calc(var(--slide-spacing) * -1);
}

.embla__slide {
	transform: translate3d(0, 0, 0);
	flex: 0 0 var(--slide-size);
	min-width: 0;
	padding-left: var(--slide-spacing);
	background-color: #fff;
}

.embla__slide__number {
	box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
	border-radius: 1.8rem;
	font-size: 4rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	/*  height: var(--slide-height);*/
	user-select: none;
}

.embla__controls {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.embla__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  align-items: center;
}

.embla__button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  width: 3.6rem;
  height: 3.6rem;
  z-index: 1;
  border-radius: 50%;
  color: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: center;
}