body { margin: 0 0 0 0; font-size: 100%; font-family: Arial, sans-serif; color: black; }

#header h1 { margin-top: 2px; text-align: center; font-size: 230%; color: black; padding-bottom: 10px; }

#header { background-color: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; width: 100%; z-index: 1; }
#footer { text-align: center; background-color: rgba(0, 0, 0, 0.7); width: 100%; position: fixed; bottom: 0; left: 0; }
#footer p { margin-top: 6px; margin-bottom: 6px; color: #FFFFFF; font-size: 150%; }
#footer a { color: #FFFFFF; text-decoration: none; }
#footer a:hover { color: #FFFFFF; cursor: pointer; }
#links { color: black; padding-bottom: 8px; margin-top: -24px; width: 100%; text-align: center; }
#links a { text-decoration: none; color: black; margin-left: 1%; margin-right: 1%; font-size: 160%; }
#links a:hover { color: blue; cursor: pointer; }
a:hover { color: blue; cursor: pointer; }

#content { width: 100%; height: auto; overflow-x: hidden; overflow-y: auto; margin-top: 140px; }
h1 { margin-top: 1%; margin-left: 3%; margin-right: 9%; text-align: left; font-size: 230%; }
h2 { margin-top: 1%; margin-left: 3%; margin-right: 9%; font-size: 200%; color: #000000; }
h3 { margin-top: 1%; margin-left: 3%; margin-right: 9%; text-align: left; }
h4 { margin-top: 1%; margin-left: 3%; margin-right: 9%; text-align: left; }
p { margin-top: 1%; margin-left: 3%; margin-right: 9%; font-size: 150%; color: #000000; }

img { max-width: 640px; width: 100%; height: auto; border: 12px solid #FFFFFF; 
-webkit-box-shadow:     -7px -7px 14px rgba(0,0,0,0.9);
-moz-box-shadow:        -7px -7px 14px rgba(0,0,0,0.9);
-ms-box-shadow:         -7px -7px 14px rgba(0,0,0,0.9);
-s-box-shadow:          -7px -7px 14px rgba(0,0,0,0.9);
-o-box-shadow:          -7px -7px 14px rgba(0,0,0,0.9);
box-shadow:             -7px -7px 14px rgba(0,0,0,0.9);
}

#c1 { display: block; }
#c2 { display: none; }
#c3 { display: none; }
#c4 { display: none; }
#c5 { display: none; }
#c6 { display: none; }
#c7 { display: none; }

  body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("background.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -10;
}

.bt01 { text-align: center; font-size: 150%; font-weight: 700; margin-top: 150px; }

.rund1 {
width: 100%;
height: 100%;
text-align: center;
margin-top: 30px;
}
.pers1 {
margin-left: 3%;
margin-right: 3%;
margin-top: 20px;
font-size: 75%;
display: inline-block;
background-color: #FFFFFF;
color: #000000;
width: 150px; 
height: 150px;
border: solid 0;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
-ms-border-radius: 75px;
-s-border-radius: 75px;
-o-border-radius: 75px;
border-radius: 75px; 
background: url("/uploads/pelle.jpg");
background-size: 251px auto;
background-position: top center; 
background-repeat: no-repeat;
-webkit-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-moz-box-shadow: -7px -7px 14px rgba(0,0,0,0.7); 
-ms-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-s-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-o-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
}

.pers2 {
margin-left: 3%;
margin-right: 3%;
margin-top: 20px;
font-size: 75%;
display: inline-block;
background-color: #FFFFFF;
color: #000000;  
width: 150px; 
height: 150px;
border: solid 0;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
-ms-border-radius: 75px;
-s-border-radius: 75px;
-o-border-radius: 75px;
border-radius: 75px; 
background: url("/uploads/kerstin.jpg");
background-size: 251px auto;
background-position: center center; 
background-repeat: no-repeat;
-webkit-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-moz-box-shadow: -7px -7px 14px rgba(0,0,0,0.7); 
-ms-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-s-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-o-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
}

.pers3 {
margin-left: 3%;
margin-right: 3%;
margin-top: 20px;
font-size: 75%;
display: inline-block;
background-color: #FFFFFF;
color: #000000;  
width: 150px; 
height: 150px;
border: solid 0;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
-ms-border-radius: 75px;
-s-border-radius: 75px;
-o-border-radius: 75px;
border-radius: 75px; 
background: url("/uploads/");
background-size: 151px auto;
background-position: center center; 
background-repeat: no-repeat;
-webkit-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-moz-box-shadow: -7px -7px 14px rgba(0,0,0,0.7); 
-ms-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-s-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-o-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
}

.pers4 {
margin-left: 3%;
margin-right: 3%;
margin-top: 20px;
font-size: 75%;
display: inline-block;
background-color: #FFFFFF;
color: #000000;  
width: 150px; 
height: 150px;
border: solid 0;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
-ms-border-radius: 75px;
-s-border-radius: 75px;
-o-border-radius: 75px;
border-radius: 75px; 
background: url("/uploads/jane.jpg");
background-size: 149px auto;
background-position: center center; 
background-repeat: no-repeat;
-webkit-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-moz-box-shadow: -7px -7px 14px rgba(0,0,0,0.7); 
-ms-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-s-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
-o-box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
box-shadow: -7px -7px 14px rgba(0,0,0,0.7);
}

#bg { background-color: rgba(255, 255, 255, 0.7); width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -5; }

@media (min-width: 501px) and (max-width: 1000px) {
#header { background-color: rgba(255, 255, 255, 0.8); position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
}

@media (max-width: 500px) { 
#header { background-color: rgba(255, 255, 255, 0.8); position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#header h1 { font-size: 170%; } 
#links a { font-size: 130%; } 
}