* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h2 {
  text-align: center;
  margin-bottom: 10px;
}

h3 {
  margin-bottom: 10px;
}

p {
	margin-bottom: 10px;
}

a {
	text-decoration: none;
	color: black;
  font-weight: bold;
}



/******************MENU**************/


.menu {
  grid-area: menu;
  padding: 10px;
  position: sticky;
  top: 0;
  left:0;
  z-index: 1;
  background-color: #f9f9f9;
  height: 40px;
}

#logo {
	font-family: 'Montserrat';
	font-weight: 300;
	text-transform: uppercase;
	display: inline-block;
	font-size: 16px;
	text-align: left;
}


li {
	list-style: none;
	padding: 2.5px;
	font-weight: 200;
}

a {
	text-decoration: none;
	color: #000;
}

.dropbtn {
    cursor: pointer;
    width: 40px;

}

.dropdown {
  display: inline-block;
	float:right;
}


.dropdown-content {
    display: none;
    min-width: 200px;
    z-index: 1;
    padding: 0;
    margin: 0;
    text-align: center;
    margin-top: -1px;
    background-color: #fff;

}

.dropdown-content li {
    font-family: 'Montserrat';
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    margin-left: 7px;
    padding: 7px;
}

.dropdown-content a:active {
  font-weight: 400;
}

.show {
  display: block;
}


/*********************TOP IMAGE***********************/
.topimg {
  grid-area: topimg;
}

.topimg figure {
  position: relative;
}
.topimg img {
  width: 100%;
  display: block;
}

.topimg figcaption {
  position: absolute;
  width: 300px;
  height: 100px;
  top: 50%;
  left: 50%;
  text-align: center;
  margin-left: -150px;
  margin-top: -50px;
}

.topimg h1 {
  display: inline;

  z-index: 1;
  color: white;
}

.info {
  grid-area: info;
  padding: 10px;
  background-color: #fcfcfc;
}

.info h2 {
}

.info h3 {
  margin-top: 20px;
}

.info img {
  display: none;
}

.infobild {
  grid-area: infobild;
  text-align: right;
}

.infote {
  grid-area: infote;
}


.styrelsen {
  grid-area: styrelsen;
  padding: 10px;
}

/***********STADGAR OCH REGLER************/
.stadgarregler {
  grid-area: stadgarregler;
  padding: 10px;
  background-color: #fcfcfc;
}
.stadgarreglerbild {
  grid-area: stadgarreglerbild;
}

.stadgarreglerbild img {
  display: block;
  width: 100%;
}

#citat {
	margin: 0px 30px;
	margin-bottom: 11px;
	font-style: italic;
}

/*GRID*/
.styrelsetext {
  grid-area: styrelsetext;
  text-align: center;
}
.ordforande {
  grid-area: ordforande;
  background-color: #152918;
  color: white;
  padding: 10px;
  margin-bottom: 15px;
}
.ledamot1 {
  grid-area: ledamot1;
  background-color: #152918;
  color: white;
  padding: 10px;
  margin-bottom: 15px;
}
.ledamot2 {
  grid-area: ledamot2;
  background-color: #152918;
  color: white;
  padding: 10px;
  margin-bottom: 15px;
}
.kassor {
  grid-area: kassor;
  background-color: #152918;
  color: white;
  padding: 10px;
  margin-bottom: 15px;
}
.sekreterare {
  grid-area: sekreterare;
  background-color: #152918;
  color: white;
  padding: 10px;
  margin-bottom: 15px;
}

.ovriga {
  grid-area: ovriga;
  margin-top: 20px;
}


/**************ÅRSMÖTEN***************/
.arsmotenbild {
  grid-area: arsmotenbild;
}

.arsmotenbild img {
  display: block;
  width: 100%;
}

.arsmoten {
  grid-area: arsmoten;
  padding: 10px;
}

.tidigarearsmoten {
  margin-bottom: 20px;
  text-align: center;
}

.tidigarearsmoten p {
  background-color: #152918;
  display: inline-block;
  padding: 7px;
  color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}


/*****************KARTOR OCH LISTOR*****************/
.kartor {
  grid-area: kartor;
  padding: 10px;
  background-color: #f9f9f9;
}
.listor {
  grid-area: listor;
  padding: 10px;
  background-color: #fcfcfc;
}

.listor .tidigarearsmoten {
  margin-top: 20px;
}

.listor h3 {
  margin-top: 20px;
}
/***********************BIDER***************/
.bilder {
  grid-area: bilder;
  padding: 10px;
  text-align: center;
}
.bilder h4 {
  background-color: #152918;
  display: inline-block;
  padding: 7px;
  color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}

.treirad {
	display: flex;
	justify-content: space-around;
	height: 130px;
}

.maxwidth {
	margin: 0 auto;
	max-width: 800px;
	padding: 5px;
}
/************LÄNKAR*************/
 .lankar {
   grid-area: lankar;
   padding: 10px;
   background-color: #f9f9f9;
}

  .lankarbild {
  grid-area: lankarbild;
}

.lankarbild img {
  width: 100%;
  display: block;
}

/************DEBATT*************/
.debatt {
  grid-area: debatt;
  background-color: #fcfcfc;
  padding: 10px;
}

.debatt h4 {
  margin-bottom: 10px;
  margin-top: 20px;
}
/************FOOTER*************/
.footer {
  grid-area: footer;
  padding: 10px;
  background-color: #152918;
  color: white;
}

.footer p {
  text-align: center;
  font-family: Montserrat;
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
}



@media (min-width: 736px) {

  .info {
    padding:30px;
  }

  .styrelsen {
    padding: 30px;
  }
  .stadgarregler {
    padding: 30px 30px 0px 30px;
  }
  .arsmoten {
    padding: 30px;
  }
  .kartor {
    padding: 30px;
  }
  .listor {
    padding: 30px;
  }
  .bilder {
    padding: 30px;
  }
  .footer {
    padding: 30px;
  }
  .lankar {
    padding: 30px;
 }
 .debatt {
   padding: 30px;
}

}

@media (min-width: 865px) {
  .dropdown {
    display: none;
  }

  header {
    position: relative;
  }

  .dropdown-content {
    background-color: transparent;
    display: inline;
    text-align: right;
    position: absolute;
    top: 10px;
    right: 0;
    margin-top: 0;
  }

  .dropdown-content li {
    display: inline;
  }
}


@media (min-width: 960px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "menu menu menu menu menu menu menu menu menu menu menu menu"
      "topimg topimg topimg topimg topimg topimg topimg topimg topimg topimg topimg topimg"
      "info info info info info info info info info info info info"
      "styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen styrelsen"
      "stadgarregler stadgarregler stadgarregler stadgarregler stadgarregler stadgarregler stadgarreglerbild stadgarreglerbild stadgarreglerbild stadgarreglerbild stadgarreglerbild stadgarreglerbild"
      "arsmotenbild arsmotenbild arsmotenbild arsmotenbild arsmotenbild arsmotenbild arsmoten arsmoten arsmoten  arsmoten arsmoten arsmoten"
      "kartor kartor kartor kartor kartor kartor listor listor listor listor listor listor"
      "bilder bilder bilder bilder bilder bilder bilder bilder bilder bilder bilder bilder"
      "lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild lankarbild"
      "debatt debatt debatt debatt debatt debatt lankar lankar lankar lankar lankar lankar"
      "footer footer footer footer footer footer footer footer footer footer footer footer"
    ;
  }

  .grid2 {
    display: grid;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    ". styrelsetext styrelsetext styrelsetext ."
    ". ordforande ledamot1 ledamot2 ."
    ". kassor sekreterare . ."
    ". ovriga ovriga ovriga ."
    ;
  }

  .grid3 {
    display: grid;
    grid-column-gap: 15px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "infote infobild"
    ;
  }

  .info img {
    display: inline-block;
    max-width: 450px;
  }


  .ordforande {
    margin-bottom: 0;
  }
  .ledamot1 {
    margin-bottom: 0;
  }
  .ledamot2 {
    margin-bottom: 0;
  }
  .kassor {
    margin-bottom: 0;
  }
  .sekreterare {
    margin-bottom: 0;
  }


}

@media (min-width: 1200px) {
  .info {
    padding: 30px 100px 30px 100px;
  }

  .styrelsen {
    padding: 0 100px 30px 100px;
  }

  .stadgarregler {
    padding: 100px 100px 0px 100px;
  }

  .arsmoten {
    padding: 100px;
  }

  .kartor {
    padding: 100px;
  }

  .listor {
    padding: 100px;
  }

  .bilder {
    padding: 30px 100px;
  }

  .debatt {
    padding: 30px 30px 30px 100px;
 }
}

/************BACK TO TOP*************/
#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #555; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

#backToTopBtn:hover {
  background-color: #333; /* Add a dark-grey background on hover */
}