/* reset browser styles */
*{
    box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */
header{
    height: 18.5vw;
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.header-top{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: rgb(231, 230, 230);
}
.uddevalla-komun-img{
    width: 9.5vw;
    height: 9.5vw;
    margin: 1.5vw 1vw;
}
.menu1{
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.help{
    flex: 2;
    justify-content: end;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-right: 1vw;
}
.searchbar{
    flex:5 ;
    display: flex;
    justify-content: end;
    align-items: flex-start;
}
.help-links{
    list-style: none;
    margin: right 2vw;
}
.help-links li{
   display: inline-block;
   margin: 0 0.3vw;
   
}
.help-links li a {
    text-decoration: none;
    color: rgb(62, 62, 62);
    font-size: 1.5vw;
    font-weight: 100;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.searchbar ::marker{
    content: "\1F4DD";
    font-size: 1.3rem;
    margin-right: 10px;
}
.searchbar ul{
    list-style:inside;
    list-style-type: none; 
}
.searchbar .add{
    background-color:   rgb(42, 100, 155);
    color: white;
    font-size: 1.4vw;
    padding: 1.1vw 2vw;
    border: none;
    margin-left: 1vw;
    
}
.searchbar .skrivruta{
    width: 33vw;
    height: 4vw;
    border: none;
    padding-left: 1vw;
    font-size: 1.5vw;
    margin-top: 2vw;
}
.searchbar input{
    height: auto;
}
.searchbar form
{
margin-right: 6vw;

}
.nav_sep
{
display: flex;
justify-content: center;
background-color:rgb(42, 100, 155) ;
}
nav
{  
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 97vw;
}
.navlink
{
    background-color: rgb(42, 100, 155);
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.4vw;
    font-weight: 100;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:  center;
    height: 5vw;
}
.navlink div
{

    text-align: center;
    width: 100%;
    height: 5vw;
    padding: 0.7vw 2vw 0 2vw;

}
.navlink :hover
{
    background-color: rgb(255, 255, 255);   
    color: rgb(62, 62, 62)
}
main{
    width: 97vw;
    display: flex;
    flex-direction: column;    
    background-color: rgb(231, 230, 230);
    align-items: center;
    margin-bottom: 4.5vw;
}
.main2{
    width: 100%;
    margin-bottom: 0;
}
.main_img1
{
    background-color: rgb(200, 198, 198);
    display: flex;
    justify-content: center;
    width: 100%;
}
.main_img1 img
{
    width: 97vw;
}
.hitta
{
    margin-top: 3vw;
    width: 97vw; 
    flex-direction: column;
    display: flex;

}
.hitta h1 
{    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(62, 62, 62);
    font-size: 3.2vw;
    font-weight: 100;
}
.hittaboxes
{
    display: flex;
    flex-wrap: wrap;
    gap: 1vw 1.5vw;
    margin: 1vw 0 2vw 0;
}
.hittabox
{
    background-color: rgb(42, 100, 155) ;
    padding: 0.8vw 1.6vw 0.8vw 1.6vw;
    font-size: 1.2vw;
    color: white;
}
.cards
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.card1, .card2, .card3
{   
    display: flex;
    flex-direction: column-reverse;
    background-size:contain;
    background-position: 0 0;
    width:30.7vw;
    height: 21vw;
}
.card_text
{   display: flex;
    align-items: center;
    color: rgb(42, 100, 155);
    height: 4vw;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.6vw;
    background-color:white ;
}
.card_text p
{
    margin-left: 2vw;
}
.card1
{
    background-image: url(https://www.uddevalla.se/images/200.6540faf218d876d3a4c165/1707381410756/krisberedskap-ny.webp);
}
.card2
{
    background-image: url(https://www.uddevalla.se/images/200.6540faf218d876d3a4c166/1707381435443/Ikon-dator-startsida-ny.webp);
}
.card3
{
    background-image: url(https://www.uddevalla.se/images/200.6540faf218d876d3a4c183/1707381471923/jobb-ny.webp);
}
.nyheter
{
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 5vw;
}
.nyheter h1
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(62, 62, 62);
    font-size: 3.2vw;
    font-weight: 100;
    background-color: rgb(231, 230, 230);
}
.nyheter h2
{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(62, 62, 62);
    font-size: 2.4vw;
    font-weight: 100;
    background-color: rgb(231, 230, 230);
}
.senaste
{
width: 63.85vw;
gap: 2vw 0;
display: flex;
flex-direction: column;
gap: 2vw;
}
.senaste_sep
{
width: 100%;
background-color: white; 
}
.senaste_nyhet
{   
    background-color: white; 
    display: flex;
    height: 18vw;
}
.senaste_nyhet_img1
{
    background-image: url(https://www.uddevalla.se/images/200.7a22cebb18e5fb3c04dbcc4/1712052805566/fo%CC%88rela%CC%88sning.jpg);
    width: 31vw;
    background-size: cover;
}
.senaste_nyhet_img2
{
    background-image: url(https://www.uddevalla.se/images/200.3f5eed9e18e5f8658c67145/1711620995586/havs%C3%B6ring%20750.jpg);
    width: 31vw;
    background-size: cover;
}
.nyhet_text
{
    background-color: white; 
    display: flex;
    gap: 1vw;
    flex-direction: column;
    padding: 1vw 1.5vw; 
    width: 31vw;
    color:rgb(62, 62, 62) ;
}
.nyhet_text h2{
    background-color: white; 
    font-size: 1.55vw;
    color: rgb(42, 100, 155);
}
.nyhet_text .hr
{
    background-color: rgb(231, 230, 230) ;
    height: 0.1vw;
}
.nyhet_text p
{
    font-size:1.3vw;
    background-color: white; 
}
.senaste_info
{   
    padding: 1vw 1.5vw; 
    display: flex;
    justify-content: space-between;
}
.info_text h2{
    background-color: white; 
    font-size: 1.55vw;
    color: rgb(42, 100, 155);
}
.info_text p{
    background-color: white; 
    font-size: 1.3vw;
    color: rgb(62, 62, 62);
}
.em
{
    font-weight: 600;
}
.flernyheter
{
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
}
.mernyheter
{
display: flex;
align-items: center;
justify-content: center;
height: 5vw;
width: 20vw;
background-color:rgb(42, 100, 155) ;
color: white;
font-size: 1.55vw;
}
.flernyheter h2
{
    font-size: 1.55vw;
    color: rgb(42, 100, 155);
} 
.nyheter_side
{
width:30.7vw;
display: flex;
flex-direction: column;
gap: 1.8vw 0;
}
.side_card
{
    display: flex;
    height: 8vw;
    width: 100%;
    background-color: white;
    gap: 0 0.6vw;
}
.side_card_img
{
flex:1;
display: flex; 
width: 1vw;
}
.side_card_img1, .side_card_img2, .side_card_img3
{
flex:1;
display: flex; 
background-repeat: no-repeat;
background-size:70% 60%;
background-position: center center;
}
.side_card_img1
{
    background-image: url(https://www.uddevalla.se/images/18.5f38a73c18b37ce0acc3674/1707318630625);
}
.side_card_img2
{
    background-image: url(https://www.uddevalla.se/images/18.5f38a73c18b37ce0acc366f/1707318667963);
}
.side_card_img3
{
    background-image: url(https://www.uddevalla.se/images/18.5f38a73c18b37ce0acc3671/1707318694037);
}
.side_card_text
{
   flex: 2; 
   display: flex;
   align-items: center;
   padding-right: 0.6vw;
}
.side_card_text a 
{
    text-decoration: none;
    color:rgb(42, 100, 155);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5vw;
}
.kalendarium
{
    padding: 1.7vw;
background-color: white;
}
.kalendarium h4
{
    font-weight: 100;
    color: rgb(62, 62, 62);
    margin-bottom:0.4vw;
    font-size: 1.4vw;
}
.kalendarium p
{
    font-size: 1.4vw;
    color: rgb(42, 100, 155) ;
}
.kalendarium hr
{
    background-color: rgb(231, 230, 230) ;
    border: none;
    height: 0.1vw;
}
.tavla
{
    background-color:rgb(42, 100, 155) ;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.55vw;
}
.fel
{
    display: flex;
    gap: 4vw;
    align-items: center;
    margin-top: 6vw;
    padding: 1.5vw;
    background-color: white;
    width: 97vw;
    font-size: 1.55vw;
}
.anm
{
    background-color:rgb(42, 100, 155) ;
    height: 5vw;
    width: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.55vw;
}
.fel i
{
    font-size: 2.5vw;
    color: rgb(42, 100, 155);
}
.fel p
{
    color: rgb(62, 62, 62) ;
    display: flex;
    align-items: center;
    gap: 0.5vw;
}
.fel p a
{
    font-weight: 600;
    text-decoration: none;
    color: rgb(42, 100, 155);
}
footer
{
    background-color: rgb(42, 100, 155);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 4vw 2.5vw 18vw 2.5vw; 
}
.footerrow
{   
    padding: 1vw;
    font-weight: 100;
    display: flex;
    width: 30vw;
    flex-direction: column;
    color: white;
    gap: 0.4vw;
}
.footerrow h1
{
    font-weight: 100;
    font-size: 2.3vw;
}
.footerrow h2
{
    font-weight: 100;
    font-size: 1.7vw;
}
.footerrow p
{
    font-size: 1.4vw;
}
.foot_spacer
{
    height: 1vw;
}
.foot_spacer_sm
{
    height: 0.1vw;
}
.footerrow i 
{
    font-size: 2.4vw;
}