@charset "UTF-8";
/*!
* Start Bootstrap - Agency v7.0.12 (https://startbootstrap.com/theme/agency)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-agency/blob/master/LICENSE)
*//**
* Template Name: Mod-Laura - v4.3.0
*/
:root,
[data-bs-theme=light] {
--bs-emphasis-color: #b19569;
--bs-emphasis-color-rgb: 177, 149, 105;
--bs-link-color: #333;
--bs-link-color-rgb: 51, 51, 51;
--bs-link-hover-color: #b19569;
--bs-link-hover-color-rgb: 177, 149, 105;
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,500,700');
html, body { 
  margin: 0;
  padding: 0;
	font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased;  font-smoothing: antialiased; font-size:18px; color:#616161; font-weight: 400;line-height: 24px;
}
h1, h2, h3, h4, h5, h6 { font-family: "Lato", sans-serif; }

.fotograf { font-size: 13px; color: #999; } /* fotografens namn */ 
.page-section { padding: 1rem 0 1rem 0; }
.section-title { text-align: center; padding: 30px 0; position: relative; }
.newspaper { padding-top: 30px; column-count: 2; column-gap: 30px;}

.btn-egen { background-color: #fff; border-color: #b19569; }
.btn-egen .nav-link { font-size: 0.95rem; color: #666; letter-spacing: 0.0625em;}
.btn-egen .nav-link:hover { color: #b19569;}

.covered {
  position: relative;
  /* make a new "render context", so absolute positioning is relative to this parent container */
  padding: 130px;
}

.covered-img {
  background: url('../img/top-om-ocean-studio.jpg');
  x-opacity: .25;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}

.covered-img-bakgrund {
  background: url('../img/bakgrund/bakgrund.jpg');
  x-opacity: .25;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}

.covered-img-ljudmeditation {
  background: url('../img/kurser/ljudmed-arbetsplatsen.jpg');
  x-opacity: .25;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}



.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #3b434a;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 30px;
  color: #eef0f2;
  left: 0;
  right: 0;
  z-index: 1;
  font-size: 52px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0;
}

.subHeader { 
  text-transform: uppercase; font-size:1.6rem; font-weight: 300; text-align: center;
}
.subHeader-small { 
  text-transform: uppercase; font-size: 1.2rem; font-weight: 500;
}

.subHeader-text { 
  padding-bottom: 1.0rem;
}

@media (max-width: 575px) {
  .newspaper { padding-top: 30px; column-count: 1; }
  .section-title h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  .section-title span {
    font-size: 34px;
  }
  .subHeader { 
    font-size:1.5rem; font-weight: 300; text-align: center; padding-top: 1rem; padding-bottom: 0.5rem;
  }
}
/*--------------------------------------------------------------
# Main Nav color: #b19569; /* #ffc800;
--------------------------------------------------------------*/
#mainNav {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  /* background-color: #212529; */

  border: none;
  background: rgba(255, 255, 255, 0.90);
  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}
#mainNav .navbar-toggler {
  padding: 0.25rem;
  font-size: 1.75rem;
  x-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  x-text-transform: uppercase;
  x-font-weight: 300; 
  color: #b19569;


}
#mainNav .navbar-brand {
  color: #b19569;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 300;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
#mainNav .navbar-brand img {
  height: 1.5rem;
}
#mainNav .navbar-nav .nav-item .nav-link {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.95rem;
  color: #666;
  letter-spacing: 0.0625em;
  box-shadow: none !important;
}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #b19569; /* #ffc800; */
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border: none;
    /* background-color: transparent; */
    background: rgba(255, 255, 255, 0.75);
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }
  #mainNav .navbar-brand img {
    height: 2rem;
    transition: height 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* background-color: #212529; */
    background: rgba(255, 255, 255, 0.75); /* === NY === */
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
  }
  #mainNav.navbar-shrink .navbar-brand svg,
  #mainNav.navbar-shrink .navbar-brand img {
    height: 1.5rem;
  }
  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }
  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
} 

/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/
.icon-10 { font-size: 10px; }
.icon-20 { font-size: 20px; }
.icon-30 { font-size: 30px; }
.icon-36 { font-size: 2.0rem; } /* Size social icons */

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header.masthead {
  padding-top: 10.5rem;
  padding-bottom: 6rem;
  text-align: left;
  color: #333;
  background-image: url("../img/top-header.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}
header.masthead .masthead-subheading {
  font-size: 2.0rem;
  font-style: normal;
  line-height: 1.5rem;
  margin-bottom: 25px;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .masthead-heading {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2.25rem;
  margin-bottom: 4rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (min-width: 768px) {
  section { padding: 9rem 0;
  }
  header.masthead {
    padding-top: 17rem;
    padding-bottom: 12.5rem;
  }
  header.masthead .masthead-subheading {
    font-size: 2.5rem;
    font-style: normal;
    line-height: 1.5rem;
    margin-bottom: 2rem;

  }
  header.masthead .masthead-heading {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.25rem;
    margin-bottom: 4rem;
  }

}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
 
/*
header.masthead .intro-text {
  padding-top: 150px;
  padding-bottom: 100px;
  z-index: 100;
  position: relative;
  color: #fff;
}
.senaste-nytt {
  z-index: 100;
  position: relative;
  color: #fff;
} */

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.btn-lg {
  width: 40px;
  height: 40px;
  padding: 0; // changed
  font-size: 18px;
  line-height: 1.0;
  border-radius: 25px;
  color: #fff;
  border: none;
}
#btn-back-to-top {
  background: #dbba86;
  position: fixed;
  bottom: 20px;
  right: 15px;
  display: none;
}

#btnPlayPause {
  background: #86b5db; /* #dbba86;  playPauseBTN btn-bgmusic*/
  position: fixed;
  bottom: 100px;
  right: 15px;
}
/*--------------------------------------------------------------
# Right Side Icon
--------------------------------------------------------------*/
.icon-swish { width: 40px; height: 40px; }


.icon-se {
  position: fixed; visibility: visible; opacity: 1;
  right: 15px; bottom: 130px; z-index: 999;
  width: 40px; height: 40px; border-radius: 4px;
  transition: all 0.4s; color: #fff; }
.icon-se i { font-size: 28px; color: #fff; line-height: 0; }
.icon-se:hover { background: #ddd; color: #fff; }
.icon-se.active { visibility: visible; opacity: 1; }



.icon-en {
  position: fixed; visibility: visible; opacity: 1;
  right: 15px; bottom: 75px; z-index: 999;
  width: 40px; height: 40px; border-radius: 4px;
  transition: all 0.4s; color: #fff; }
.icon-en i { font-size: 28px; color: #fff; line-height: 0; }
.icon-en:hover { background: #ddd; color: #fff; }
.icon-en.active { visibility: visible; opacity: 1; }



.icon-print-cv {
  position: fixed; visibility: visible; opacity: 1;
  right: 15px; bottom: 185px; z-index: 999;
  width: 40px; height: 40px; border-radius: 4px;
  border: 1px solid #b19569; background: transparent;
  transition: all 0.4s; color: #fff; }
.icon-print-cv i { font-size: 28px; color: #b19569; line-height: 0;}
.icon-print-cv:hover { background: #eee; color: #fff; }
.icon-print-cv.active { visibility: visible; opacity: 1; }


.icon-three-dots-vertical {
  position: fixed; visibility: visible; opacity: 1;
  right: 15px; bottom: 250px; z-index: 999;
  width: 40px; height: 40px; border-radius: 4px;
  border: 1px solid #b19569;
  transition: all 0.4s; color: #fff; }
.icon-three-dots-vertical i { font-size: 28px; color: #b19569; line-height: 0; }
.icon-three-dots-vertical:hover { background: #eee; color: #fff; }
.icon-three-dots-vertical.active { visibility: visible; opacity: 1; }


.map {
  height: 30rem;
}
.map iframe {
  pointer-events: none;
  height: 100%;
  width: 100%;
  border: 0;
}

@media (max-width: 992px) {
  .map {
    height: 75%;
  }
}


.modal-open {
  overflow: inherit;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { 
  line-height: 2rem;
  text-align: center;
  font-size: 0.9rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.footer ul a { color: #666; xdisplay: inline-block; box-shadow: none !important; }
.footer ul a:hover { color: #b19569; text-decoration: none; }


/*--------------------------------------------------------------
# Karta
--------------------------------------------------------------*/
.map-container-9,
.map-container-10,
.map-container-11 {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.map-container-9 iframe,
.map-container-10 iframe,
.map-container-11 iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}


 /* Section
 #privat { background-color: #d1b276; }
 */