/*Definierar variabler*/
:root {
    --color_opes_blue: #014878; /*opes fŠrgen*/
    --color_light_blue: #f1f7fb; /*ljusblΠbakgrund*/
    --color_box_shadow: #002f4f; /*skugga i navi*/
    --color_focus: #97b7cd; /*focus i kontaktform, kan anvŠnda pŒ fler stŠllen*/
    --color_text: #f1f7fb;
    --color_text_fade: #97b7cd;
    --font_one: georgia;
    --font_two: courier new;
}

/*de hŠr grejerna gŠller alla sidor*/

BODY
{

background-image: url("bilder/background.gif");
background-color:d5d7e3; 
background-attachment:fixed;

font-family:calibri, arial;

}



.header
{
    
    max-width:960px;
    margin:auto;
    margin-top:10px;
    background-color:white;
    padding-top:5px;
    z-index:2;
    border:none;
    border-radius:4px;
    box-shadow:2px 2px #ccc;
    
}

.logo
{
    
}

.content
{
margin:auto;

max-width:960px; /* max-width:xx; ?? */
margin-top:10px;

background-color: var(--color_opes_blue);
z-index:2;
border:none;
border-radius:4px;
box-shadow:2px 2px #ccc;
}

.footer
{
margin:auto;
margin-top:10px;
max-width:960px;
padding-top:10px;
padding-bottom:10px;
background-color:white;
z-index:2;
border:none;
border-radius:4px;
box-shadow:2px 2px #ccc;
}

.table
{
    display:table;
    margin:auto;
  
}

/*de hŠr grejerna Šr fšr index*/


 ul.noindent {
    
    margin-left: 0px; /*10px*/
    margin-right: 0px;
    padding-left: 0px; /*30px*/
    padding-right: 0px;
    
}


ul#navi
{
list-style:none;
text-align:center; /*hŠr kan jag skriva left, center, right*/
padding-top:20px;
max-width:100%;
}

ul#navi li
{
display:inline-block;
max-width:100%;
height:200px;
transition: transform .2s; /*animation*/
margin-left:10px;
margin-right:10px;
margin-bottom:20px;

font-family: calibri, arial;
font-style:;
font-size:12pt;
text-align:center;
color:#FFFFFF;
text-shadow:1px 1px #000000;
}

ul#navi li:hover
{
transform: scale(1.1);

}

p.navi
{
    
font-family: var(--font_one), arial;
padding-left:0px;
font-weight:lighter;
font-size:16pt; /*skulle vilja gšra denna stšrre. kanske kan hitta hur mŒnga pixlar hšga ett visst antal punkter Šr fšr att fŒ de att stŠmma med p.successtory, sŒ att 3*pnavi+k=3*psuccesstory alltsŒ att tre rader navi + konstant Šr lika med tre rader successtory?*/
text-align:center;


color:var(--color_text);
text-shadow:1px 1px #000000;
padding-top:0px;
padding-left:20px;
padding-right:20px;
}

p.successtory
{
font-family: var(--font_one), arial;
padding-left:0px;
font-weight:lighter;
font-size:16pt;
text-align:center;


color:var(--color_text);
text-shadow:1px 1px #000000;
padding-top:0px;
}

p.navi_text
{
    font-family: var(--font_one), arial;
    font-style:;
    font-size:12pt;
    text-align:center;
    color:var(--color_text);
    text-shadow:1px 1px #000000;
    

padding-top:0px;
margin-top:-15px;

}

p.navi_text_fade
{
    font-family: var(--font_one), arial;
    font-style:;
    font-size:12pt;
    text-align:center;
    color:var(--color_text_fade);
    text-shadow:1px 1px #000000;
    

padding-top:0px;
margin-top:-15px;

}

p.navi_namn
{
    font-family: var(--font_one), arial;
    font-style:;
    font-size:12pt;
    text-align:right;
    color:var(--color_text);
    text-shadow:1px 1px #000000;
    
    

padding-top:0px;
padding-right:50px;
margin-top:-15px;
}

p.foot
{
    font-family: var(--font_two), arial;
    font-style:;
    font-size:12pt;
    text-align:center;
    color:black;
    
}

h1
{
font-family: calibri, arial;
padding-left:0px;
font-weight:lighter;
font-size:16pt;
text-align:center;
background-color:black;

color:#ffffff;
text-shadow:1px 1px #000000;
padding-top:20px;
}

h2
{
font-family: calibri, arial;
padding-left:0px;
font-style:normal;
font-size:10pt;
text-align:center;
}
/*har tagit bort h3 och h4, hŠmta frŒn backup om nŒgot krŒnglar*/




/*HŠr Šr bakgrundsbilderna fšr ul#navi li pŒ index*/
#one
{
    background-image: url("bilder/bild23.jpg"); /*ska ge dessa olika bakgrunder sen!*/
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#two
{
    background-image: url("bilder/bild25.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#three
{
    background-image: url("bilder/bild21.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#four
{
    background-image: url("bilder/bild24.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}
#five
{
    background-image: url("bilder/bild22.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#six
{
    background-image: url("bilder/bild20.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}

/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
    
    
   
  #one
  {
      width:220px;
     
  }
  #two
  {
      width:220px;
  }
  #three
  {
      width:220px;
  }
  #four
  {
      width:220px;
  }
  #five
  {
      width:220px;
  }
  #six
  {
      width:220px;
  }
}


/*hŠr gšr jag lŠnkarna i navi till utan bakgrund*/
a#menu
{
    background-color:transparent;
    height:100%;
    margin-top:0;
    padding-top:0; /*12.8%*/
    transition:transform .2s;
    color:#ffffff;
    text-shadow:1px 1px #000000;
}

a#menu:hover /*gšr texten stšrre i navi vid hover*/
{
    transform: scale(1.1);
}



ul#header
{
list-style:none;
text-align:center; /*hŠr kan jag skriva left, center, right*/
padding-top:0px;

}
ul#header li
{
display:inline-block;

margin-left:8px;
margin-right:8px;

margin-bottom:20px;
border:none;
border-radius:2px;


}

a:link,a:visited
{
display:block;
float:center;
font-family:calibri, arial;

color:#FFFFFF;
background-color:#006bb6;
text-align:center;
padding:1px;
text-decoration:none;
text-transform:none;
border:none;
border-radius:2px;
}
a:hover,a:active
{
background-color:#0096ff;
}

a#no

    {
    display:inline;
    background-color:transparent;
    font-family:calibri, arial;
    color:#006bb6;
    text-decoration:none;
    text-transform:none;
    }
 



/*P
{
font-family: calibri, arial;
padding-left:0px;
padding-top:0px;
margin-top:0%;
font-style:;
font-size:12pt;
text-align:center;
color:#FFFFFF;
text-shadow:1px 1px #000000;
}

P2
{
font-family: calibri, arial;
padding-left:0px;
font-style:italic;
font-size:12pt;
text-align:center;

}*/

/*de hŠr grejerna Šr fšr tjanster */

/*HŠr Šr bakgrundsbilderna fšr ul#navi li pŒ tjanster*/
#tjanster_one
{
    background-image: url("bilder/bild24.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#tjanster_two
{
    background-image: url("bilder/bild22.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}
#tjanster_three
{
    background-image: url("bilder/bild10.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}

/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
  #tjanster_one
  {
      width:220px;
  }
  #tjanster_two
  {
      width:220px;
  }
  #tjanster_three
  {
      width:220px;
  }
}

/*de hŠr grejerna Šr fšr butik */
ul#butik
{
list-style:none;
text-align:center; /*hŠr kan jag skriva left, center, right*/
padding-top:20px;
max-width:100%;

}

ul#butik li
{
display:inline-block;
max-width:100%;
height:200px;
transition: transform .2s; /*animation*/
margin-left:10px;
margin-right:10px;

margin-bottom:20px;

font-family: calibri, arial;
font-style:;
font-size:12pt;
text-align:center;
color:#FFFFFF;
text-shadow:1px 1px #000000;
}

ul#navi li:hover
{
transform: scale(1.1);

}
#butik_one
{
    background-image: url("bilder/bild20.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#butik_two
{
    background-image: url("bilder/bild21.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}
#butik_three
{
    background-image: url("bilder/bild23.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}

/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
  #butik_one
  {
      width:220px;
  }
  #butik_two
  {
      width:220px;
  }
  #butik_three
  {
      width:220px;
  }
}

/*de hŠr grejerna Šr fšr kontakt */
a#clear
{
    background-color:transparent;
  
}


/*de hŠr grejerna Šr fšr kontaktform */
#kontakt_one
{
    background-image: url("bilder/bild20.jpg"); /*ska ge dessa olika bakgrunder sen!*/
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#kontakt_two
{
    background-image: url("bilder/bild1.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}
#kontakt_three
{
    background-image: url("bilder/bild25.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}



/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
  #kontakt_one
  {
      width:220px;
  }
  #kontakt_two
  {
      width:220px;
  }
  #kontakt_three
  {
      width:220px;
  }
}


/*de hŠr grejerna Šr fšr kontakt_tack*/
.tack
{
    
    text-align:center;
}

/*de hŠr grejerna Šr fšr gdpr*/
.gdpr
{
    
    text-align:left;
}

/*de hŠr grejerna Šr fšr omoss */

#omoss_one
{
    background-image: url("bilder/bild25.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#omoss_two
{
    background-image: url("bilder/bild21.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}
#omoss_three
{
    background-image: url("bilder/bild23.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}

/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
  #omoss_one
  {
      width:220px;
  }
  #omoss_two
  {
      width:220px;
  }
  #omoss_three
  {
      width:220px;
  }
}


/*de hŠr grejerna Šr fšr kontakt_tack */

#tack_one
{
    background-image: url("bilder/bild20.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
    
}
#tack_two
{
    background-image: url("bilder/bild1.jpg");
    width:280px;
    border:none;
    border-radius:2px;
    box-shadow:2px 2px var(--color_box_shadow);
}


/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 350px) {
  #tack_one
  {
      width:220px;
  }
  #tack_two
  {
      width:220px;
  }
 
}


/*Detta Šr fšr kontaktform*/

form#contact-form
{
    background-color:#f1f7fb;
    max-width:50%;
    margin:auto;
    padding:10px;
    border:none;
    border-radius:4px;
    
    
}

select
{
    width:80%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing: border-box;
    margin-top:6px;
    margin bottom:16px;
    resize:vertical;
    
}



input[type=text]
{
    width:80%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing: border-box;
    margin-top:6px;
    margin bottom:16px;
    resize:vertical;
    
}

input[type=email]
{
    width:80%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing: border-box;
    margin-top:6px;
    margin bottom:16px;
    resize:vertical;
    
}

input[type=number]
{
    width:80%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing: border-box;
    margin-top:6px;
    margin bottom:16px;
    resize:vertical;
    
}

textarea
{
    width:80%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing: border-box;
    margin-top:6px;
    margin bottom:16px;
    resize:vertical;
    
}

input[type=checkbox]
{
    background-color:#97b7cd;
    color:black;
    padding:10px 10px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    
}

input[type=submit]
{
    background-color:#97b7cd;
    color:black;
    padding:12px 20px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    
}

input[type=submit]:hover
{
    background-color:var(--color_opes_blue);
    color:white;
    cursor:pointer;
    
}


input[type=text]:focus
{
    background-color:var(--color_opes_blue);
    color:#ffffff;
    
}

input[type=email]:focus
{
    background-color:var(--color_opes_blue);
    color:#ffffff;
}

input[type=number]:focus
{
    background-color:var(--color_opes_blue);
    color:#ffffff;
}

textarea:focus
{
    background-color:var(--color_opes_blue);
    color:#ffffff;
}

input[type=checkbox]:focus
{
    background-color:var(--color_opes_blue);
    color:#ffffff;
}

/*fšrsšker anpassa fšr smŒ skŠrmar hŠr*/
@media only screen and (max-width: 576px) {
    form#contact-form
    {
        background-color: var(--color_light_blue);
        max-width:90%;
        margin:auto;
        padding:10px;
        border:none;
        border-radius:4px;
        
        
    }


    select
    {
        width:100%;
    }



    input[type=text]
    {
        width:100%;
    }

    input[type=email]
    {
        width:100%;
    }

    input[type=number]
    {
        width:100%;
    }

    textarea
    {
        width:100%;
    }

}