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

html {
margin:0;
padding:0;
font-family: "Arial";
height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-height: 100%;
}

body {
background-color: #ededed;
padding: 0px;
margin: 0px;
height: 100%;
min-height: 100%;
}

table, tr, td {
padding: 0px;
margin: 0px;
border-collapse: collapse;
}

@font-face
{
font-family: "LMW";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-regular.ttf');
text-rendering: optimizeLegibility;
}

@font-face
{
font-family: "LMBlack";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-black.ttf');
text-rendering: optimizeLegibility;
}

@font-face
{
font-family: "LMBold";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-bold.ttf');
text-rendering: optimizeLegibility;
}

@font-face
{
font-family: "LML";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-light.ttf');
text-rendering: optimizeLegibility;
}

@font-face
{
font-family: "LMR";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-regular.ttf');
text-rendering: optimizeLegibility;
}

@font-face
{
font-family: "LMR-Italic";
src: url('https://kkfilecdn.s3.us-east-2.amazonaws.com/CityofKarlstad/fonts/LMW-Italic.ttf');
text-rendering: optimizeLegibility;
}

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

#header-space-mobile {
display: none;
}

#header-space #header-content {
width: 60%;
margin: 0 auto 0 auto;
padding: 0;
vertical-align: middle;
}

#header-space #header-content #logo-space {
width: 20%;
display: inline-block;
text-align: center;
margin: 0;
padding: 0;
vertical-align: middle;
}

#header-space #header-content #logo-space img {
width: 95%;
height: auto;
vertical-align: middle;
}

#header-space #header-content #link-space {
width: 79%;
display: inline-block;
text-align: right;
margin: 0;
padding: 0;
vertical-align: middle;
}

#header-space #header-content #link-space a {
color: #ffffff;
font-family: "LML";
margin: 0 0 0 4%;
padding: 0;
text-decoration: none;
font-size: 22px;
}

#header-space #header-content #link-space a:hover {
color: #a5d8ff;
text-decoration: underline;
cursor: pointer;
}

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

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

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

#footer #footer-content-zone #left-zone #social-img {
width: 70%;
height: auto;
margin: 15% 0 0 0;
}

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

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

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

#footer #footer-content-zone #section-text {
color: #242424;
font-family: "LMBold";
margin: 0 0 15px 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 15px 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: 60%;
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: 13px;
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: 13px;
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: 1% 0 2% 0;
padding: 0;
text-decoration: none;
font-size: 13px;
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;
}

#page-content {
background-color: #ffffff;
width: 100%;
margin: 0;
padding: 5% 0 6% 0;
}

#home-video {
margin: 0 0 -4px 0;
width: 100%;
height: 60%;
overflow: hidden;
object-fit: cover;
padding: 0;
}

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

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

#recent-updates #update-chip .thumbnail {
width: 100%;
border-radius: 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
}

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

#recent-updates #update-chip:hover h2 {
color: #2a294b;
transition: all .3s;
}

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

#recent-updates #update-chip:hover #update-cta {
background-color: #7d5ba6;
color: #ffffff;
transition: all .3s;
}

#recent-updates a {
border: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
}

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

#recent-updates #update-button-zone #update-cta-button {
background-color: #7d5ba6;
color: #f2f2f2;
font-family: "LMR";
padding: .5% 1.5%;
margin: 0;
text-decoration: none;
font-size: 30px;
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: 3% 0 3.25% 0;
background-color: #35292d;
vertical-align: top;
}

#homepage-chamber-zone #inner-chamber-zone {
width: 50%;
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 2% 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: 0;
padding: 0;
text-align: center;
}

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

#front-page-chips #city-chip {
width: 20%;
background-color: #f8f8f8;
border-radius: 15px;
margin: 0 1%;
padding: 2%;
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 .material-symbols-rounded {
display: block;
margin: 0 0 10px 0;
padding: 0;
font-size: 75px;
color: #2a5d5e;
text-align: left;
transition: all .3s;
font-variation-settings:
'FILL' 0,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#front-page-chips #city-chip:hover .material-symbols-rounded {
color: #2a284b;
transition: all .3s;
font-variation-settings:
'FILL' 0,
'wght' 500,
'GRAD' -25,
'opsz' 40
}

#front-page-chips #city-chip h1 {
color: #2b284d;
font-family: "LMBold";
padding: 0;
margin: 0;
text-decoration: none;
font-size: 35px;
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: 20px;
text-align: left;
transition: all .3s;
}

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