/*
Theme Name: City of Karlstad v3
Text Domain: Keegan Krantz
Version: 3.0
Description: City of Karlstad Theme
Author: Keegan Krantz
Author URI: https://keegankrantz.com
*/

@media (max-width: 1000px) {

#header-space {
display: none;
}

@keyframes expand {
0%   {width: 0;}
100% {width:  100%;}
}

#header-space-mobile {
display: block;
background-color: #2a284e;
width: 100%;
margin: 0;
padding: 0 0 4% 0;
}

#header-space-mobile #mobilelogo {
width: 30%;
height: auto;
border: 0;
padding: 0;
margin: -7% 0 0 35%;
}

#header-space-mobile #mobile-icon-menu {
width: 9%;
height: auto;
border: 0;
margin: 3% 0 0 3%;
color: #ffffff;
text-decoration: none;
transition: color .3s;
}

#header-space-mobile #mobile-icon-menu .material-symbols-rounded {
display: block;
margin: -2px 2% 0 0;
padding: 0;
font-size: 50px;
color: inherit;
text-align: right;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#header-space-mobile #mobilelinkzone {
display: none;
background-color: #2a284e;
width: 100%;
min-height: 175vw;
position: fixed;
top: 0;
left: 0;
padding: 0 0 15% 0;
animation-name: expand;
animation-duration: .25s;
overflow: hidden;
z-index: 100;
}

#header-space-mobile #mobilelinkzone #mobile-icon-menu-close {
width: 9%;
height: auto;
border: 0;
margin: 3% 0 0 3%;
color: #ffffff;
text-decoration: none;
transition: color .3s;
}

#header-space-mobile #mobilelinkzone #mobile-icon-menu-close:hover {
color: #7e7bb4;
text-decoration: none;
transition: color .3s;
}

#header-space-mobile #mobilelinkzone #mobile-icon-menu-close .material-symbols-rounded {
display: block;
margin: -2px 2% 0 0;
padding: 0;
font-size: 50px;
color: inherit;
text-align: right;
vertical-align: middle;
font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#header-space-mobile #mobilelinkzone #mobilelink-main {
color: #ffffff;
font-family: "LML";
margin: 0 0 7% 9%;
padding: 0;
text-decoration: none;
font-size: 29px;
display: block;
}

#recent-updates {
width: 100%;
margin: 0;
padding: 8% 0 8% 0;
background-color: #f2f2f2;
vertical-align: top;
text-align: center;
}

#recent-updates #update-chip {
width: 85%;
background-color: #ffffff;
border-radius: 15px;
margin: 0 auto 7% auto;
padding: 0 0 7% 0;
display: inline-block;
vertical-align: top;
}

#recent-updates #update-chip h2 {
color: #7d5ba6;
font-family: "LMBold";
padding: 0;
margin: 3% 6% 5% 5%;
text-decoration: none;
font-size: 29px;
line-height: 39px;
text-align: left;
min-height: 78px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all .3s;
}

#recent-updates #update-chip #update-cta {
background-color: #f2f2f2;
color: #2a284b;
font-family: "LMR";
padding: 1.5% 5%;
margin: 6% 0 8% 0;
text-decoration: none;
font-size: 20px;
text-align: left;
border-radius: 10px;
transition: all .3s;
}

#recent-updates #update-button-zone {
width: 100%;
margin: 3% 0 2% 0;
padding: 0;
}

#recent-updates #update-button-zone #update-cta-button {
background-color: #7d5ba6;
color: #f2f2f2;
font-family: "LMR";
padding: 1.5% 5%;
margin: 0;
text-decoration: none;
font-size: 25px;
text-align: center;
border-radius: 10px;
transition: all .3s;
display: inline-block;
}

#recent-updates #update-button-zone #update-cta-button:hover {
background-color: #2a294b;
color: #ffffff;
transition: all .3s;
cursor: pointer;
}

#homepage-chamber-zone {
width: 100%;
margin: 0;
padding: 6% 0 7% 0;
background-color: #35292d;
vertical-align: top;
}

#homepage-chamber-zone #inner-chamber-zone {
width: 90%;
margin: 0 auto 0 auto;
vertical-align: top;
text-align: center;
}

#homepage-chamber-zone #inner-chamber-zone img {
width: 15%;
height: auto;
margin: 0 auto 2% auto;
text-align: center;
}

#homepage-chamber-zone #inner-chamber-zone h2 {
font-family: "LMBlack";
color: #ffffff;
font-size: 30px;
text-align: center;
margin: 0 0 4% 0;
}

#homepage-chamber-zone #inner-chamber-zone a {
font-family: "LMR-Italic";
color: #d9dcd5;
font-size: 20px;
text-align: center;
text-decoration: none;
margin: 0;
}

#homepage-chamber-zone #inner-chamber-zone a:hover {
text-decoration: underline;
}

#front-page-chips {
width: 100%;
margin: 9% 0 6% 0;
padding: 0;
text-align: center;
}

#front-page-chips #city-chip-link {
text-align: center;
text-decoration: none;
}

#front-page-chips #city-chip {
width: 70%;
background-color: #f8f8f8;
border-radius: 15px;
margin: 0 auto 8% auto;
padding: 5% 5% 6% 5%;
display: inline-block;
vertical-align: top;
transition: all .3s;
}

#front-page-chips #city-chip:hover {
background-color: #7d5ba6;
transition: all .3s;
}

#front-page-chips #city-chip h1 {
color: #2b284d;
font-family: "LMBold";
padding: 0;
margin: 0;
text-decoration: none;
font-size: 30px;
text-align: left;
transition: all .3s;
}

#front-page-chips #city-chip:hover h1 {
color: #ffffff;
transition: all .3s;
}

#front-page-chips #city-chip h6 {
color: #785ca1;
font-family: "LML";
padding: 0;
margin: 2% 0 0 0;
text-decoration: none;
font-size: 17px;
text-align: left;
transition: all .3s;
}

#footer {
background-color: #ededed;
width: 100%;
margin: 0;
padding: 11% 0 9% 0;
}

#footer #footer-content-zone {
width: 80%;
margin: 0 auto;
padding: 0;
vertical-align: top;
}

#footer #footer-content-zone #left-zone {
width: 100%;
display: inline-block;
text-align: center;
vertical-align: top;
padding: 15% 0 15% 0;
margin: 0 auto 0 auto;
}

#footer #footer-content-zone #left-zone #social-img {
width: 40%;
height: auto;
margin: 10% auto 0 auto;
display: block;
}

img {
width: 50%;
height: auto;
margin: 0;
}

#footer #footer-content-zone #center-zone {
width: 80%;
display: block;
text-align: left;
vertical-align: top;
padding: 1% 0 15% 0;
margin: 0 auto;
}

#footer #footer-content-zone #right-zone {
width: 80%;
display: block;
text-align: left;
vertical-align: top;
padding: 1% 0 0 0;
margin: 0 auto;
}

#footer #footer-content-zone #section-text {
color: #242424;
font-family: "LMBold";
margin: 0 0 20px 0;
padding: 0;
text-decoration: none;
font-size: 15px;
display: block;
}

#footer #footer-content-zone #section-link {
color: #393939;
font-family: "LMR";
margin: 0 0 20px 0;
padding: 0;
text-decoration: none;
font-size: 15px;
display: block;
}

#footer #footer-content-zone #section-link:hover {
color: #2a284e;
text-decoration: underline;
cursor: pointer;
}

#footer #footer-attributions {
width: 90%;
padding: 5% 0 2% 0;
margin: 0 auto;
text-align: center;
}

#footer #footer-attributions #text {
color: #393939;
font-family: "LMR";
margin: 0 7px 0 7px;
padding: 0;
text-decoration: none;
font-size: 15px;
line-height: 30px;
display: inline-block;
text-align: center;
}

#footer #footer-attributions #link {
color: #3b8cc9;
font-family: "LMR";
margin: 0 7px 0 7px;
padding: 0;
text-decoration: none;
font-size: 15px;
line-height: 30px;
display: inline-block;
text-align: center;
}

#footer #footer-attributions #link:hover {
text-decoration: underline;
color: #2a284e;
cursor: pointer;
}

#footer #footer-attributions #designedby {
color: #393939;
font-family: "LMR";
margin: 7% 0 4% 0;
padding: 0;
text-decoration: none;
font-size: 15px;
display: inline-block;
text-align: center;
}

#footer #footer-attributions #designedby a {
color: #3b8cc9;
font-family: "LMR";
padding: 0;
margin: 0;
text-decoration: none;
font-size: 13px;
display: inline-block;
text-align: center;
}

#footer #footer-attributions #designedby a:hover {
text-decoration: underline;
color: #2a284e;
cursor: pointer;
}


}