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

:root {
    --default-font-size: 1rem;
    --line-height: 1.5;
    --main-background: rgb(247, 247, 247);
    --main-font: rgb(153, 153, 153);
    --accent-color_1: #000;
    --accent-color_2: rgb(255, 0, 191);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--main-background);
    margin: 0 auto;
}

header.hero {
    margin: 0 auto;
    text-align: center;
    padding: 2em;
}

.mainlogo {
    margin: 0 auto;
    max-width: 100%;
}

h1 {
    font-family: 'Architects Daughter', cursive;
    font-weight: 500;
    font-size: 2rem;
    color:var(--accent-color_2);
    line-height: 0.75;
}

em {
    color: #000;
    font-style: normal;
    font-weight: 200;
    font-size: 1.5rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

h2, h3 {
    font-family: 'Architects Daughter', cursive;
    font-weight: strong;
}

h2 {
    color:var(--accent-color_2);
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 0 auto;
	text-align: center;
}

h3 {
    color:var(--accent-color_1);
    font-size: 1.5rem;
    text-align: center;
    margin: 2em 0 1em 0;
}

h4 {
    text-align: center;
    font-size: clamp(1.15rem, 1.2vw, 1.5rem);
    font-weight: 600;
    margin-top: 2em;
    color:var(--accent-color_2);
}

p {
    line-height: 1.8;
    font-weight: 300;
    font-size:1.15rem;
    padding: .5em;
    text-align: center;
}

.no-margin {
    margin: 0;
}

.emphasize {
      outline: 2px solid rgb(255, 0, 191); 
      padding: .5em;
      color: black !important ;
}

h5 {
    font-size: 1rem;
	text-align: center;
}


.ohjeet {
    margin: 0;
    line-height: 1.5;
    font-weight: 300;
    text-align: center;
    font-size: 1rem;
}

.hero_image {    
    height: 40vh; 
}

.img-index {
    background-image: url(img/bg-image5.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.img-about {
    background-image: url(img/bg-image3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    height: 40vh; 
}

.img-liity {
    background-image: url(img/bg-image9.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    height: 40vh; 
}

.img-historia {
    background-image: url(img/bg-image11.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 40vh; 
}

.img-palvelut {
    background-image: url(img/bg-image2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 40vh;
}

.img-news {
    background-image: url(img/news.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 40vh;
}

.img-hhuk {
    background-image: url(img/hhuk_small.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 40vh;
}

.img-board {
    background-image: url(img/bg-hallitus_bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    height: 40vh;
}

.news_img {
    width: 100%;   
    max-width: 350px;
    margin: 0 auto;
}

.boardimg {
    outline: 1px solid lightgrey;
    box-shadow: 2px 2px 5px lightgrey;
    border-radius: 5px;
    width: 100%;
    display:block;
    margin: 0 auto;
}

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

.history-horse {
    max-width: 100%;
    padding: 1em;
}

.saannot > p {
    line-height: 1.5;
    font-size: clamp(1.1rem, 2vw, 1.65rem);
}


/*    --------------------------  NAV */

.topnav {
    position:sticky;
    position:-webkit-sticky;
    top:0;
    z-index: 99;
    margin: 0;
    background-color:var(--accent-color_2);
    color: var(--bg-color--dark);
    box-shadow: 3px 3px 25px #000;
    padding: 1.25em;
}

.navlist {
    position: relative;
    list-style-type: none;
    flex-direction: column;
    display: none;
    margin: 0 auto;
    padding: 0;
    width: 70%;
}

.navlist li {
    width: 100%;
    padding-block: .5em;
}

.current {
    color:var(--main-background);
}

.menu__sub {
    position: relative;
    display: block;
    list-style-type: none;
    padding: 1em;
}

.inset {
    padding-left: 2em;
}

/*Mobiilivalikon kuvake*/
#menu {
    padding: 1em;
    background-color:var(--main-background);
    border-radius: 50%;
    opacity: 0.85;
    color:var(--accent-color_2);
}

li > a {
    text-decoration: none;
    color:var(--bg-color--dark);
}

li > a:hover {
    color: rgb(55, 192, 251);
}

.current:hover {
    outline: none;
}

a {
    color:var(--accent-color_2);
}

a:hover {
	color: rgb(55, 192, 251);
}	

 
#check {
    display: none;
}

.checkbtn {
    right: 0;
    top: 00px;
    display: block;
    cursor: pointer;
    float: right;
    z-index: 99;
}

#check:checked ~ ul{
    left: 0;
    display: block;
}

#check:checked >* i#menu {
    background-color: var(--accent-color_1);
}



/* ------------------------------- MAIN CONTENT */

.main {
    width: 100%;
    padding: 1em;
}

.content-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1em;
}

.style1 {
    background-color:var(--main-background);
}

.style3 {
    background-color:var(--accent-color_1);
    color:rgb(255, 0, 191);
}

.style4 {
    background-color:rgb(252, 249, 251);
}

.span > h2 {
    color: #fff;
    text-align: center;
}

.join_btn {
    background-color:var(--main-background);
    text-align: center;
    border-radius: 75px;
    box-shadow: 2px 2px 5px grey;
    padding: .75em .5em;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.btn_bill {
    background-color:var(--accent-color_1);
}

.join_btn > a {
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.join_btn:hover {
    cursor: pointer;
    background-color:#fff;
}

.row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.col {
    width: 100%;
    padding: 1.5em;
    text-align: center;
}

.member > h5{
    color:rgb(255, 0, 191);
}

.non-member > h5 {
    color:rgb(55, 192, 251);
}

/*.content-sidebar {
    display: flex;
    flex-direction:column;
}*/

.content-sidebar__right {
    width: 100%;
    text-align: center;
}

.content-sidebar__left > p {
    text-align: left;
    font-size: clamp(1.1rem, 1.6vw, 1.2rem);
    padding-inline: 1em;
}


.viisu > p {
    font-style: italic;
    font-size: clamp(1rem, 1vw, 1.1rem);
    width: 90%;
    margin: 0 auto;
}

ul.links {
    list-style: none;
    text-align: left;
    padding: 0;
}

.palvelut_links {
    text-align: center;
    line-height: 1.3;
    font-size: 1rem;
    padding: 0;
}

.maksut > ul {
    list-style: square;
    text-align: left;
}

.kentan__saannot > p {
    line-height: 1.2;
    margin: 0;
}

.map {
    box-shadow: 3px 3px 10px grey;
    border-radius: 5px;
    width: 100%;
    max-width: 450px;
}

.map-holder {
    margin: 0 auto;
    text-align: center;
}


/* -------------------------------- collapsibles */

.collapsible {
	background-color:var(--accent-color_2);
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 2px 5px grey;
    max-width: 100%;
    outline: none;
    padding:.75em;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 auto;
  }

  .active, .collapsible:hover {
	opacity: 0.8;
    cursor: pointer;
  }

  .collapsible:after {
	content: '\276F';
	font-weight: bold;
	float: right;
	padding: .25em;
    transform:rotate(90deg);
    transition: transform 200ms ease-in;
  }

  .active:after {
	content: "\276F";
    transform:rotate(270deg);
    transition: transform 200ms ease-out;
    float: right;
	padding: .25em;
  }

  .content {
    background-color: rgb(248, 238, 246);
    border-radius: 10px 10px 0 0;
	max-height: 0;
    max-width: 100%;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
    margin: 0 auto;
  }

  .content > p {
      padding: .5em;
  }


/* ---------------------------------- kuvien muotoilut */

.oldpics {
    max-width: 90%;
    outline: 1px solid lightgrey;
    box-shadow: 2px 2px 5px lightgrey;
    border-radius: 5px;
}

figure {
    margin: 0 auto;
}

.thumb {
    border-radius: 5px;
    box-shadow: 2px 2px 5px lightgrey;
    border: 2px solid lightgrey;
}

.sidebar_img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 5px;
}

footer {
    margin: 0 auto;
}


.fb-kuvat {
    width: 100%;
    max-width: 500px;
    box-shadow: 3px 3px 10px grey;
    height:min-content;
    border-radius: 5px;
}

.img-section {
    width: 100%;
    max-width: 500px;
    border-radius: 5px;
}

/* ---------------------------------------- MEDIA QUERIES */

@media screen and (min-width:800px) {

  .hero_image {
      height: 50vh;
      background-position: center;
  }

  .img-hhuk {
    background-image: url(img/hhuk.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 40vh;
}

  #check {
      display: none;
  }

 .checkbtn {
     display: none;
 }

 .topnav > ul{
     display: flex;
     flex-direction: row;
     justify-content: center;
 }

.navlist {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

.navlist li {    
    text-align: center; 
    padding-inline: 1em;   
}


.menu__sub {
    position:absolute;
    display: none;
    background-color:rgb(55, 192, 251);
    border-radius: 2px;
    box-shadow: 2px 2px 10px #000;
    margin-top: .5em;
    padding: .5em .75em;
}

.menu__sub_title:hover .menu__sub{
    display:block;
}

.row {
    flex-direction: row;
    align-items: flex-start;
}

.content-button {
    flex-direction: row;
    align-items: center;
}

.content-sidebar {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.content-sidebar > *:nth-child(1) {
    width: 70%;
    padding: 1em;
}

.content-sidebar > *:nth-child(2) {
    width: 30%;
    padding: .5em;
}

.content-sidebar__right {
    text-align: center;
}

.footer-row {
    display: flex;
    flex-direction:row;
    align-items: flex-start;
}

.col > h3 {
    text-align: center;
}

p {
    text-align: center;
}

.boardimg {
   
    width: 65%;
    display:block;
    margin: 0 auto;    
}

}

@media screen and (max-width:950px) {

    .content-sidebar__left, .content-sidebar__right {
        width: 100%;
    }

}