/* CSS RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, 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
{ margin: 0; padding: 0; border: 0;	outline: 0; font-size: 100%; font-family: inherit; vertical-align: baseline; }


/* EMBEDDED FONTS */

/* open-sans-300 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'),
       local('OpenSans-Light'),
       url('../fonts/open-sans-latin-300.woff') format('woff');
}

/* open-sans-regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'),
       local('OpenSans-Regular'),
       url('../fonts/open-sans-latin-regular.woff') format('woff');
}

/* open-sans-300-italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'),
       local('OpenSans-LightItalic'),
       url('../fonts/open-sans-latin-300italic.woff') format('woff');
}

/* open-sans-regular-italic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'),
       local('OpenSans-Italic'),
       url('../fonts/open-sans-latin-italic.woff') format('woff');
}

/* open-sans-condensed-300 */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Condensed Light'),
       local('OpenSansCondensed-Light'),
       url('../fonts/open-sans-condensed-latin-300.woff') format('woff');
}


/* LAYOUT */

html { height: 100%; }
body { height: 100%; background-color: #f8f8f8; font-family: 'Open Sans', sans-serif; font-size: 16px; }
table { border-collapse: collapse; border-spacing: 0; }

#canvas { position: relative; width: 100%; max-width: 960px; min-height: 100%; box-sizing: border-box; margin: auto; padding: 3em 0 2em; border: 1px solid #ddd; border-top: 0; border-bottom: 0; background: #fff url('../images/bg.png') 0 2em no-repeat; background-size: 50%; overflow: hidden; }
#content { display: flex; gap: 2em; padding: 0 2em; }
#text { flex: 1; }
#footer { position: relative; clear: both; margin: 1em 2em; border-top: 1px solid #ddd; }

img { float: right; width: 40%; box-sizing: border-box; margin: 0 0 1em 1em; padding: 0.5em; border: 1px solid #ddd; background-color: #fff; }
img.no-border { border: 0; }
img.wide { width: 100%; float: none !important; margin: 0 0 0.5em 0 !important; }


/* TEXT */

strong { font-weight: 400; color: #000; }
em { font-style: italic; }

ul { list-style: circle; margin: 0 0 1em 1em; }
ol { margin: 0 0 1em 2em; }

p { margin-bottom: 1em; font-size: 1em; line-height: 1.8; font-weight: 300; color: #666; }
li { margin-bottom: 0.25em; font-size: 1em; line-height: 1.8; font-weight: 300; color: #666; }

a:link, a:visited { text-decoration: none; }
a:focus { outline: #666 dotted 1px; }
a:hover { outline: none; }
a:focus, a:hover { text-decoration: underline; }
a:link, a:visited, a:active { color: #ff8c00; }

h1, h2, h3, h4, h5 { font-family: 'Open Sans Condensed', sans-serif; line-height: 1; font-weight: 300; color: #34b6e4; }
h1 { margin: 0 0 0.25em 0.43em; font-size: 4em; letter-spacing: -0.02em; }
h1 a { text-decoration: none !important; color: #888 !important; }
h2 { margin: 0em 2em 0.6em 0; font-size: 2.5em; }
h3 { margin: 1em 0 0.5em; font-size: 2em; }
h4 { margin: 1em 0 0.5em; font-size: 1.5em; line-height: 1.2; }
h5 { margin: 1em 0 0.25em; font-size: 1.25em; line-height: 1.25; }

p.small { font-size: 0.8em; line-height: 1.4; }
p.byline { margin: -1em 0 1.5em; line-height: 1.5; font-style: italic; }
p.tight-bottom { margin-bottom: 0.25em; }
p.source { font-style: italic; }

li.tight-bottom { margin-bottom: 0; }

#footer p { margin-right: 8em; margin-bottom: -0.6em; padding-top: 1em; font-size: 0.75em; line-height: 1.2; }
#footer p a { color: #666; }


/* NAVIGATION */

#nav { width: 25%; margin: 0 0 2em; list-style: none; z-index: 5; }
#nav li { margin: 0; border-top: 1px solid #eee; }
#nav li:first-child { border-top: 0; }
#nav li:last-child { border-bottom: 1px solid #eee; }
#nav li:focus, #nav li:hover, #nav li:focus + li, #nav li:hover + li { border-top-color: transparent; }
#nav li.selected { border-top-color: #eee; }
#nav li.selected:focus + li, #nav li.selected:hover + li { border-top-color: #eee; }
#nav a { display: inline-block; width: 100%; margin-left: -2em; padding: 0.5em 0 0.5em 2em; background-color: transparent; font-size: 1em; line-height: 1.5; font-weight: 400; text-decoration: none; text-transform: uppercase; color: #34b6e4; }
#nav a:focus, #nav a:hover { background-color: #34b6e4; color: #fff; outline: 0; transition: 0.25s; }

#nav a.submenu-header { position: relative; }
#nav a.submenu-header::after { content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%2334b6e4' d='M4.29 9.29C4.10069 9.47777 3.9942 9.73336 3.9942 10C3.9942 10.2666 4.10069 10.5222 4.29 10.71L11.29 17.71C11.4778 17.8993 11.7334 18.0058 12 18.0058C12.2666 18.0058 12.5222 17.8993 12.71 17.71L19.71 10.71C19.9637 10.4563 20.0627 10.0866 19.9699 9.74012C19.877 9.39362 19.6064 9.12297 19.2599 9.03012C18.9134 8.93728 18.5437 9.03634 18.29 9.29L12 15.59L5.71 9.29C5.52223 9.10069 5.26664 8.9942 5 8.9942C4.73336 8.9942 4.47777 9.10069 4.29 9.29Z'/></svg>"); position: absolute; top: 6px; right: 4px; transition-duration: .15s; transform: scale(85%); }
#nav a:focus.submenu-header::after, #nav a:hover.submenu-header::after {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23fff' d='M4.29 9.29C4.10069 9.47777 3.9942 9.73336 3.9942 10C3.9942 10.2666 4.10069 10.5222 4.29 10.71L11.29 17.71C11.4778 17.8993 11.7334 18.0058 12 18.0058C12.2666 18.0058 12.5222 17.8993 12.71 17.71L19.71 10.71C19.9637 10.4563 20.0627 10.0866 19.9699 9.74012C19.877 9.39362 19.6064 9.12297 19.2599 9.03012C18.9134 8.93728 18.5437 9.03634 18.29 9.29L12 15.59L5.71 9.29C5.52223 9.10069 5.26664 8.9942 5 8.9942C4.73336 8.9942 4.47777 9.10069 4.29 9.29Z'/></svg>");
 }
#nav li.selected a.submenu-header::after { top: 2px; transform: scale(85%) rotate(180deg); }

#nav ul { display: none; margin: 0; list-style: none; }
#nav ul li { margin: 0; border-top: 0; }
#nav ul li:last-child { margin-bottom: 0.5em; border-bottom: 0; }
#nav ul a { padding-right: 1em; line-height: 1.25; font-weight: 300; text-transform: none; }

#nav .selected ul { display: block; }


/* MISC */

#login-link { position: absolute; top: 4em; right: 0; }
#login-link a { display: block; padding: 0.5em 1.25em 0.5em 0.75em; font-size: 1.5em; line-height: 1; font-weight: 300; text-decoration: none; text-transform: uppercase; color: #34b6e4; }
#login-link a:focus, #login-link a:hover { background-color: #34b6e4; color: #fff; outline: 0; transition: 0.25s; }

#print-link { position: absolute; top: 8.25em; right: 2em; width: 2.25em; height: 2em; background-image: url('../images/print.png'); background-size: 2.25em; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#print-link:focus, #print-link:hover { background-position: bottom; outline: 0; }

#footer #region-stockholm-link { position: absolute; top: 1em; right: 0; width: 6em; }
#footer #region-stockholm-link img { display: block; width: 100%; margin: 0; padding: 0; border: 0; }

#menu-switch { display: none; }
#footer #tillganglighetsredogorelse { display: none; }

.cutout { margin: 2em 0 3em; padding: 0 1.5em 1em; border: 2px dashed #34b6e4; border-radius: 1em; }
.cutout h4 { position: relative; top: -0.7em; display: inline-block; margin: 0 -0.5em; padding: 0 0.5em; background: #fff; font-weight: 600; }
.cutout p { margin-bottom: 0.8em; line-height: 1.4; }

.info-box { margin: 1.5em 0; padding: 1em 1.5em 0 1.5em; border: 1px solid #ddd; border-radius: 8px; background-color: #fefbdd; }
.info-box h3 { margin-top: 0.2em; font-size: 1.8em; color: #000; }
.info-box p, .info-box li { font-size: .9em; color: #444; }

.image-box { width: 50%; float: left; box-sizing: border-box; }
.image-box#morgon { padding-right: 0.5em; }
.image-box#kvall { padding-left: 0.5em; }
.image-box h4 { margin: 0.5em 0 0; }
.image-box img { float: none; width: 100%; margin: 1em 0 !important; }
.image-box.english h4 { font-size: 1.3em; }
.image-box.english p.small { margin: 0.5em 0 0; }




/* PODCAST BOX */

#podcast-box { min-height: 4em; margin: 1.5em 0 1em; padding: 0.5em; border: 1px solid #ddd; border-radius: 0.5em; }
#podcast-box h5 { margin: 0.25em 0 0.25em 0.38em; }
#podcast-box h5.tight-top { margin-top: -0.1em; }
#podcast-box p { margin: 0px 0 0.15em 5.6em; font-size: 0.85em; line-height: 1.2; }
#podcast-box img { float: left; width: 4em; height: 4em; margin: 0 0.75em 0 0; padding: 0; border: 0; border-radius: 0.25em; }


/* LANGUAGE SWITCHER */

#language-nav { display: block; float: right; list-style: none; margin: -2em 2em 0 0; }
#language-nav::before {content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%2334b6e4' fill-rule='evenodd' clip-rule='evenodd' d='M7.99998 1.33334C4.31808 1.33334 1.33331 4.31811 1.33331 8.00001C1.33331 11.6819 4.31808 14.6667 7.99998 14.6667C11.6819 14.6667 14.6666 11.6819 14.6666 8.00001C14.6666 6.2319 13.9643 4.53621 12.714 3.28596C11.4638 2.03572 9.76809 1.33334 7.99998 1.33334ZM13.2866 7.33334H12C11.9384 6.02894 11.6021 4.75224 11.0133 3.58668C12.2729 4.45217 13.1007 5.81642 13.2866 7.33334ZM7.33331 7.33334V2.87334C6.38665 3.44001 5.50665 5.13334 5.33331 7.33334H7.33331ZM7.33331 8.66668V13.1267C6.38665 12.56 5.50665 10.8667 5.33331 8.66668H7.33331ZM8.66665 8.66668V13.1267C9.61331 12.56 10.4933 10.8667 10.6666 8.66668H8.66665ZM8.66665 7.33334V2.87334C9.61331 3.44001 10.4933 5.13334 10.6666 7.33334H8.66665ZM3.99998 7.33334C4.06782 6.02748 4.41087 4.75069 5.00665 3.58668C3.7218 4.43867 2.86848 5.80495 2.66665 7.33334H3.99998ZM2.71331 8.66668H3.99998C4.0616 9.97108 4.39781 11.2478 4.98665 12.4133C3.72706 11.5479 2.89928 10.1836 2.71331 8.66668ZM12 8.66668C11.9321 9.97254 11.5891 11.2493 10.9933 12.4133C12.2782 11.5614 13.1315 10.1951 13.3333 8.66668H12Z'/></svg>"); float: left; position: relative; top: 6px; left: 2px; }
#language-nav li { display: inline-block; float: left; margin-left: 8px; }
#language-nav li::after { content: " / "; padding: 0 0 0 4px; }
#language-nav li:last-child::after { content: none; }

#till-professionen #language-nav { display: none; }

#page-18-manadersbesoket #language-nav { display: none; }
#page-18-manadersbesoket #language-nav li::after { display: none; }
#page-18-manadersbesoket #language-nav li:last-child { display: none; }


/* START PAGE LINKS */

#visit-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 2%; margin: 32px 0; }
#visit-links a { display: block; width: 32%; min-width: 160px; padding: 24px; border: 2px solid #ddd; border-radius: 8px; background: #fff; box-sizing: border-box; }
#visit-links a:hover, #visit-links a:active { border-color: #34b6e4; text-decoration: none; color: #34b6e4; }
#visit-links a img { display: block; width: 100%; height: auto; margin: 0 0 16px; padding: 0; object-fit: contain; }
#visit-links a p { margin: 0; line-height: 1.4; text-align: center; }


/* CUSTOM PAGE CONTENT */

#default #content { display: block; padding-top: 2em; }
#default #footer #tillganglighetsredogorelse { display: block; }

#tillganglighetsredogorelse #language-nav { display: none !important; }
#tillganglighetsredogorelse #content { padding-top: 2em; }

#vad-hander-under-3-arsbesoket img, #vad-hander-under-4-arsbesoket img { width: 100%; float: none; margin: 0 0 0.5em 0; }
#forberedelse-for-barnet img { display: block; width: 100%; float: none; margin: 0 0 0.5em 0; }
#foraldraseparation-med-sma-barn table { width: 100%; margin-top: 1.5em; border-top: 2px solid #34b6e4; border-bottom: 2px solid #34b6e4; }
#foraldraseparation-med-sma-barn td, #foraldraseparation-med-sma-barn th { padding: 0.5em 1em 0.5em 0; font-size: 1em; line-height: 1; font-weight: 300; color: #666; white-space: nowrap; }
#foraldraseparation-med-sma-barn th { font-weight: 400; text-align: left; color: #000; white-space: normal; }
#foraldraseparation-med-sma-barn tr:first-child td, #foraldraseparation-med-sma-barn tr:first-child th { padding: 0.75em 1em 0.75em 0; border-bottom: 1px solid #ddd; }
#foraldraseparation-med-sma-barn tr:last-child td { padding-bottom: 0.75em; }
#foraldraseparation-med-sma-barn tr:nth-child(4) td, #foraldraseparation-med-sma-barn tr:nth-child(6) td, #foraldraseparation-med-sma-barn tr:nth-child(7) td, #foraldraseparation-med-sma-barn tr:nth-child(9) td { border-top: 1px solid #ddd; }
#foraldraseparation-med-sma-barn tr:nth-child(4) th, #foraldraseparation-med-sma-barn tr:nth-child(6) th, #foraldraseparation-med-sma-barn tr:nth-child(7) th, #foraldraseparation-med-sma-barn tr:nth-child(9) th { border-top: 1px solid #ddd; }

#page-18-manadersbesoket em { font-size: 1.2em; line-height: 1.25; font-style: normal; color: #000; }
#page-18-manadersbesoket .italic { font-style: italic; }


/* RTL */

.rtl { direction: rtl; }

.rtl #canvas { background-image: url('../images/bg-rtl.png'); background-position: right 2em; }

.rtl #language-nav { float: left; margin-right: 0; margin-left: 2em; }
.rtl #language-nav::before { float: right; right: 2px; left: auto; }
.rtl #language-nav li { float: right; margin-right: 8px; margin-left: 0; }
.rtl #language-nav li::after { padding: 0 4px 0 0; }
.rtl #print-link { right: auto; left: 2em; }
.rtl #login-link { right: auto; left: 0; }
.rtl #login-link a { padding: 0.5em 0.75em 0.5em 1.25em; }

.rtl #nav a { margin-left: 0; margin-right: -2em; padding: 0.5em 2em 0.5em 0; }
.rtl #nav a.submenu-header::after { right: auto; left: 4px; }
.rtl #nav ul li { margin: 0; }

.rtl h1 { margin: 0 0.43em 0.25em 0; direction: ltr; text-align: right; }
.rtl h2 { margin: 0 0 0.6em 2em; font-size: 2.2em; line-height: 1.2; }
.rtl h3 { font-size: 1.8em; line-height: 1.2; }
.rtl img { float: left; margin: 0 1em 1em 0; }
.rtl ul { margin: 0 2em 1em 0; }

.rtl #footer p { margin-right: 0; margin-left: 8em; direction: ltr; text-align: right; }
.rtl #footer #region-stockholm-link { right: auto; left: 0; }

.rtl#foraldraseparation-med-sma-barn td, .rtl#foraldraseparation-med-sma-barn th { padding: 0.5em 0 0.5em 1em; text-align: right; }
.rtl#foraldraseparation-med-sma-barn tr:first-child td, .rtl#foraldraseparation-med-sma-barn tr:first-child th { padding: 0.75em 0 0.75em 1em; }

.rtl .image-box#morgon { padding-right: 0; padding-left: 0.5em; }
.rtl .image-box#kvall { padding-right: 0.5em; padding-left: 0; }

/* RESPONSIVE */

@media only screen and (max-width: 800px) {
    html { background-color: #fff; }
    body { background-color: #fff; }
    #canvas { border: 0; padding-bottom: 1em; background-size: 90%; }
    #content { padding: 3em 1.5em 1em; }
    #footer { margin: 0 1.5em; padding-bottom: 2em; }
    img { display: none; }
    img.wide { display: block; }

    #menu-switch { display: block; z-index: 10; position: absolute; top: 1em; left: 1.5em; }
    #menu-switch span { display: block; padding: 0.5em 0; font-size: 1.5em; line-height: 1; font-weight: 300; text-transform: uppercase; color: #34b6e4; }
    #menu-switch span::before { content: "\2630"; position: relative; top: -0.1em; display: inline-block; width: 1em; margin-right: 0.2em; cursor: pointer; }
    #menu-switch.on span::before { content: "\2715"; top: 0; }
    #login-link { top: 1em; }
    #login-link a { padding-right: 1em; }
    #print-link { display: none; }

    h1 { display: none; }
    h2 { margin-right: 0; }

    #nav { display: none; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; margin: 0; padding: 5em 0 4em; background-color: #fff; }
    #nav.show { display: block; }
    #nav li { margin: 0 1em 0 3.5em; }
    #nav a { margin-left: -3.5em; padding-right: 1.75em; padding-left: 3.5em; }
    #nav a.submenu-header::after { right: 2em; }

    #language-nav { display: none; position: relative; margin: -1.5em 1.5em 0 0; z-index: 20; }
    #language-nav::before { top: 4px; }
    #language-nav.show { display: block; }
    #language-nav li { display: block; margin-bottom: 0; font-size: 0.9em; line-height: 1em; text-align: right; }
    #language-nav a { display: inline-block; padding: 0.4em 0 0.2em; }

    #podcast-box img { display: block; }
    #podcast-box h5 { margin-top: -0.1em; }


    #default h2 { text-align: center; }
    #default #content { padding-top: 3em;}
    #default #menu-switch { display: none; }
    #default #language-nav { display: block; float: left; margin: -1.25em 0 0 1.5em; }

    #tillganglighetsredogorelse #canvas { padding-top: 3em; }
    #tillganglighetsredogorelse #content { padding-top: 4em;}

    #vad-hander-under-3-arsbesoket img, #vad-hander-under-4-arsbesoket img { display: block; }
    #forberedelse-for-barnet img { display: block; }
    #foraldraseparation-med-sma-barn table { margin-top: 1em; }
    #foraldraseparation-med-sma-barn td, #foraldraseparation-med-sma-barn th { font-size: 0.75em; }

    #visit-links { gap: 16px; margin-bottom: 16px; }
    #visit-links a { padding-bottom: 12px; }

    .image-box img { display: block !important; }
    .image-box p { font-size: 0.8em; }


    .rtl #menu-switch { right: 1.5em; left: auto; }
    .rtl #menu-switch span::before { margin-right: 0; margin-left: 0.2em; }
    .rtl #login-link a { padding-left: 1em; }
    .rtl #nav li { margin: 0 3.5em 0 1em; }
    .rtl #nav a { margin-right: -3.5em; padding-right: 3.5em; padding-left: 1.75em; }
    .rtl #nav a.submenu-header::after { right: auto; left: 2em; }
    .rtl #language-nav { margin: -1.5em 0 0 1.5em; }
    .rtl #language-nav li { text-align: left; }
    .rtl h2 { margin-left: 0; }

    .rtl#default #language-nav { float: right; margin: -1.25em 1.5em 0 0; }
}

@media only screen and (max-width: 600px) {
    #visit-links a p { font-size: 0.8em; }

    #foraldraseparation-med-sma-barn td, #foraldraseparation-med-sma-barn th { font-size: 0.5em; }
    .rtl#foraldraseparation-med-sma-barn td, .rtl#foraldraseparation-med-sma-barn th { font-size: 0.6em; }
}

@media only screen and (max-width: 370px) {
    #language-nav li { font-size: 0.8em; }
    #foraldraseparation-med-sma-barn td, #foraldraseparation-med-sma-barn th { font-size: 0.4em; }
    .rtl#foraldraseparation-med-sma-barn td, .rtl#foraldraseparation-med-sma-barn th { font-size: 0.5em; }

    .image-box h4 { font-size: 1.2em !important; }
    .image-box p { font-size: 0.7em; }
    .image-box.english p.small { font-size: 0.6em; }
}