@charset "UTF-8";
/* CSS Document */



/********* footer pages  *********/

/**** elements ***/

.foot_pages {max-width: 900px; margin: 0 auto; color: #444}
.foot_pages h1 {font-size: 2em; font-weight: 450; color: var(--secondary); margin: 35px 0px 10px}
.foot_pages h2 {font-size: 1.2em; font-weight: 600; color: var(--secondary); margin: 30px 0px 10px}
.foot_pages .updated {color: #777; font-size: 0.85em; margin-bottom: 25px}
.foot_pages .lead {font-size: 1.1em; line-height: 1.55em; margin-bottom: 25px}
.foot_pages .cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0px}
.foot_pages .card {border: 1px solid #e3e3e3; border-top: 3px solid var(--main); padding: 22px; background: #fff}
.foot_pages .card h2 {margin-top: 0px}
.foot_pages .card p:last-child {margin-bottom: 0px}
.foot_pages .callout {background: #f4f8fa; border-left: 3px solid var(--main); padding: 20px; margin: 25px 0px}
.foot_pages .button {display: inline-block; color: #fff; background: var(--main); border-radius: 300px; padding: 9px 24px; margin-top: 10px}
.foot_pages .button:hover {text-decoration: none; opacity: 0.9}


.foot_pages .intro {margin: 30px 0px 0px 0px; font-weight: 500; font-size: 1.05em}


.foot_pages .section {margin: 30px 0px 15px 0px; font-weight: 600; font-size: 1.15em}

.foot_pages p {margin: 0px 0px 10px 0px; font-weight: 350; font-size: 1.0em}
.foot_pages .section span { font-weight: 600; font-size: 1.0em; color: var(--main)}

.foot_pages a {color: #000}

.foot_pages ul {padding-left: 1em}
.foot_pages li {padding-left: 0.2em; color: var(--main); margin: 0px 0px 5px 0px}
.foot_pages li span {color: #444}
.foot_pages li span b {color: #000; font-weight: 500}


.foot_pages .sublist {padding-left: 0.5em; list-style-type: disc;}
.foot_pages .sublist li {color: #777; font-size: 0.4em}
.foot_pages .sublist li span {color: #444; font-size: 2.5em}

/*** accordion ****/

.collapse-content {
  width: 100%;
    padding: 0px; margin: 30px 0px;
}

.collapse-content .section {border-bottom: 1px solid #ddd}
.collapse-content .num {color: var(--main); font-size: 1.05em; font-weight: 500; width: 1.2em; display: inline-block} 
.collapse-content a {color: #111; font-size: 1.05em; font-weight: 500} 
.collapse-content a:hover {text-decoration: none} 

.inner-content {
  padding: 0px 0px 20px 0px;
}

.content {
  max-height: 0em;
  transition: 0.6s linear 0s;
  overflow: hidden;
margin: 10px 0px 0px 0px
}

.collapse + .collapse a {
  border-top: 1px solid rgba(0, 0, 0, 0.7);
}


.collapse:target .content {
  max-height: 30vh;
}





/********************************************bigger screen settings**********************************************************/
@media screen and (min-width: 1800px) {
.wrapperfooter {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 0px;
  margin: 20px 320px;
  width: calc(100% - 660px);
}

}

/********************************************smaller screen settings**********************************************************/
@media screen and (max-width: 1400px) {
.wrapperfooter {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 25% 25% 25% 25%;
  padding: 0px;
  margin: 20px 160px;
  width: calc(100% - 380px);
}

}


/********************************************general mobile settings**********************************************************/
@media all and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  .foot_pages h1 {font-size: 1.65em; margin-top: 20px}
  .foot_pages .cards {grid-template-columns: 1fr}
}