/*
-------------------------------------------
Skeppsbron Jkpg CSS
------------------------------------------- */

/*
-------------------------------------------
Testmeny
------------------------------------------- */
.dropbtn {
  background-color: #fff;
  border: none;
  cursor: pointer;
  height: 60px;
  width: 60px;
}
.dropbtn p {
  font-size: 110%;
  margin-top: -10px;
}
.dropdown {
  display: inline-block;
  position: relative;
}
.dropdown-content {
  background-color: #fff;
  border-bottom: 1px solid #3d7cc9;
  border-top: 1px solid #3d7cc9;
  display: none;
  min-width: 200px;
  position: absolute;
  right: 0;
  z-index: 1;
}

.dropdown-content a {
  color: #3d7cc9;
  display: block;
  padding-right: 1em;
  padding-top: 1em;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #fff;
}


/*
-------------------------------------------
Meny (ersätts av ny hamburgermeny)  
------------------------------------------- */

.menuButton {
  background-color: #fff;
  cursor: pointer;
  height: 60px;
  text-align: left;
  width: 60px;
}

.menuButton p {
  margin-top: -10px;
}

#menuButtonIcon {
  color: #3d7cc9;
  font-size: 48px;
}

#svid10_55cf5cf9161fa833284399b {
  display: none;
  text-align: left;
}


/*
-------------------------------------------
Puffar - Vänsterspalt  (Dekoration)
------------------------------------------- */

.puff-himmel,
.puff-vatten,
.puff-sand,
.puff-tegel {
  margin-bottom: 1.5em;
  padding: 1em;
}

.puff-himmel {
  background-color: #6aaae4;
  color: #000;
}

.puff-vatten {
  background-color: #3d7cc9;
  color: #fff;
}

.puff-sand {
  background-color: #d6d1ca;
  color: #000;
}

.puff-tegel {
  background-color: #f3be9a;
  color: #000;
}

.puff-himmel ul,
.puff-vatten ul,
.puff-sand ul,
.puff-tegel ul {
  padding-left: 1rem;
}

.puff-vatten a:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  text-decoration: none;
}

.puff-himmel  a:focus,
.puff-sand  a:focus,
.puff-tegel  a:focus {
  outline: 2px solid #2c2c2c;
  outline-offset: 1px;
  text-decoration: none;
}

.puff-himmel h2,
.puff-vatten h2,
.puff-sand h2,
.puff-tegel h2 {
  font-family: montserrat,sans-serif;
  font-size: 150%;
  font-style: normal;
  font-weight: 900;
  line-height: inherit;
  margin: 0;
}

.puff-vatten h2 {
  color: #fff;
}

.puff-himmel h2,
.puff-sand h2,
.puff-tegel h2 {
  color: #000;
}

.puff-vatten p {
  color: #fff!important;
}

.puff-himmel p,
.puff-sand p,
.puff-tegel p {
  color: #000!important;
}

.puff-himmel a,
.puff-sand a,
.puff-tegel a {
  color: #000!important;
}


/*
-------------------------------------------
Puffar - Startsida 
------------------------------------------- */

.leftpuff {
  padding-right: 1em;
}

.midpuff {
  padding-left: 1em;
  padding-right: 1em;
}

.rightpuff {
  padding-left: 1em;
}

.startpuff-himmel {
  background-color: #6aaae4;
  padding: 1em;
  position: relative;
}

.startpuff-himmel .subheading {
  color: #fff;
  font-family: montserrat,sans-serif;
  font-size: 300%;
  font-style: normal;
  font-weight: 900;
  line-height: inherit;

  overflow-wrap: break-word;
}

.startpuff-himmel .subheading a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

.startpuff-himmel img {
  margin-bottom: 2em;
  max-width: 250px;
  position: relative;
  right: 1em;
  top: 1em;
}

.startpuff-vatten {
  background-color: #3d7cc9;
  padding: 1em;
  position: relative;
}

.startpuff-vatten .subheading {
  color: #fff;
  font-family: montserrat,sans-serif;
  font-size: 300%;
  font-style: normal;
  font-weight: 900;
  line-height: inherit;

  overflow-wrap: break-word;
}

.startpuff-vatten .subheading a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
}

.startpuff-vatten img {
  margin-bottom: 2em;
  max-width: 250px;
  position: relative;
  right: 1em;
  top: 1em;
}

.startpuff-himmel a:focus,
.startpuff-vatten  a:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  text-decoration: none;
}


/*
-------------------------------------------
Eventpuffar
------------------------------------------- */

.event-box-water,
.event-box-sky {
  min-height: 460px;
  padding: 2em;
}

.event-box-water .sv-image-portlet,
.event-box-sky .sv-image-portlet {
  margin: -2em -2em 3em;
}

.event-box-water .subheading3,
.event-box-sky .subheading3,
.event-box-water p,
.event-box-sky p {
  text-align: center;
}

.event-box-sky .subheading3,
.event-box-sky .sv-font-brodtext-vit,
.event-box-sky .sv-font-brodtext-vit a {
  color: #000;
}

.event-box-water .subheading3,
.event-box-water .normal {
  color: #fff;
}

.event-box-water .subheading3,
.event-box-sky .subheading3 {
  font-size: 150%;
  font-weight: 900;
}


/*
-------------------------------------------
Tidplan startsidan  
------------------------------------------- */

.tidplan-vatten {
  background: #fff;
  border: 2px solid #3d7cc9;
  margin-top: 2em;
  padding: 1em;
  position: relative;
}

.tidplan-vatten:after,
.tidplan-vatten:before {
  border: solid transparent;
  bottom: 100%;
  content: ' ';
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;

  pointer-events: none;
}

.tidplan-vatten:after {
  border-bottom-color: #fff;
  border-color: rgba(241, 241, 241, 0);
  border-width: 12px;
  margin-left: -12px;
}

.tidplan-vatten:before {
  border-bottom-color: #3d7cc9;
  border-color: rgba(221, 221, 221, 0);
  border-width: 15px;
  margin-left: -15px;
}

.tidplan-himmel {
  background: #fff;
  border: 2px solid #6aaae4;
  margin-top: 2em;
  padding: 1em;
  position: relative;
}

.tidplan-himmel:after,
.tidplan-himmel:before {
  border: solid transparent;
  bottom: 100%;
  content: ' ';
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;

  pointer-events: none;
}

.tidplan-himmel:after {
  border-bottom-color: #fff;
  border-color: rgba(241, 241, 241, 0);
  border-width: 12px;
  margin-left: -12px;
}

.tidplan-himmel:before {
  border-bottom-color: #6aaae4;
  border-color: rgba(221, 221, 221, 0);
  border-width: 15px;
  margin-left: -15px;
}

.tidplan-tegel {
  background: #fff;
  border: 2px solid #f3be9a;
  margin-top: 2em;
  padding: 1em;
  position: relative;
}

.tidplan-tegel:after,
.tidplan-tegel:before {
  border: solid transparent;
  bottom: 100%;
  content: ' ';
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;

  pointer-events: none;
}

.tidplan-tegel:after {
  border-bottom-color: #fff;
  border-color: rgba(241, 241, 241, 0);
  border-width: 12px;
  margin-left: -12px;
}

.tidplan-tegel:before {
  border-bottom-color: #f3be9a;
  border-color: rgba(221, 221, 221, 0);
  border-width: 15px;
  margin-left: -15px;
}

.tidplan-sol {
  background: #fff;
  border: 2px solid #ffda00;
  margin-top: 2em;
  padding: 1em;
  position: relative;
}

.tidplan-sol:after,
.tidplan-sol:before {
  border: solid transparent;
  bottom: 100%;
  content: ' ';
  height: 0;
  left: 50%;
  position: absolute;
  width: 0;

  pointer-events: none;
}

.tidplan-sol:after {
  border-bottom-color: #fff;
  border-color: rgba(241, 241, 241, 0);
  border-width: 12px;
  margin-left: -12px;
}

.tidplan-sol:before {
  border-bottom-color: #ffda00;
  border-color: rgba(221, 221, 221, 0);
  border-width: 15px;
  margin-left: -15px;
}

.ball-holder {
  margin-left: 34%;
}

.scrolling-wrapper-flexbox {
  display: flex;
  margin-top: -2.5em;
  overflow-x: auto;

  flex-wrap: nowrap;
}

.card {
  margin-right: 5em;
  width: 232px !important;

  flex: 0 0 auto;
}

.blue-line {
  border-bottom: 2px solid #3d7cc9;
  margin-bottom: -2.5em;
  margin-left: 95px;
  margin-right: 135px;
}


/*
-------------------------------------------
Bollar
------------------------------------------- */

.boll-vatten {
  background: #3d7cc9;
  border-radius: 50%;
  display: table-cell;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.boll-himmel {
  background: #6aaae4;
  border-radius: 50%;
  display: table-cell;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.boll-tegel {
  background: #f3be9a;
  border-radius: 50%;
  display: table-cell;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.boll-sol {
  background: #ffda00;
  border-radius: 50%;
  display: table-cell;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.boll-vatten h3,
.boll-himmel h3,
.boll-tegel h3,
.boll-sol h3 {
  font-family: montserrat,sans-serif;
  font-size: 150%;
  font-style: normal;
  font-weight: 900;
  line-height: inherit;
  margin: 0;
}

.boll-vatten h3 {
  color: #fff;
}

.boll-himmel h3 {
  color: #000;
}

.boll-tegel h3 {
  color: #000;
}

.boll-sol h3 {
  color: #000;
}

.tidplan-boll-vatten {
  background: #3d7cc9;
  border-radius: 50%;
  display: inline-grid;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.tidplan-boll-tegel {
  background: #f3be9a;
  border-radius: 50%;
  display: inline-grid;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.tidplan-boll-himmel {
  background: #3d7cc9;
  border-radius: 50%;
  display: inline-grid;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}

.tidplan-boll-sol {
  background: #ffda00;
  border-radius: 50%;
  display: inline-grid;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  width: 80px;
}


/*
-------------------------------------------
Knappar
------------------------------------------- */

.newsLinkArrow {
  text-align: right;
}

.newsLinkArrow img {
  height: 40px;
  width: 40px;
}


/*
-------------------------------------------
Sitevision overrides (specials) 
------------------------------------------- */

p.sv-portlet-image-caption {
  font-size: 80%;
}

.sv-carousel__navbtn-prev {
  background-color: transparent;
  background-image: url(/images/18.55cf5cf9161fa8332844a30/1522064733685/prev-arrow2.png);
  border: none;
  color: transparent;
  height: 45px;
  margin: -14px auto 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transition: all 0.5s ease 0s;
  width: 45px;
}

.sv-carousel__navbtn-next {
  background-color: transparent;
  background-image: url(/images/18.55cf5cf9161fa8332844a31/1522064754554/next-arrow2.png);
  border: none;
  color: transparent;
  height: 45px;
  margin: -14px auto 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transition: all 0.5s ease 0s;
  width: 45px;
}

.sv-carousel__navbtn-next:after {
  border-left-color: transparent;
  left: 11px;
}

.sv-carousel__navbtn-prev:after {
  border-right-color: transparent;
  right: 11px;
}
.sv-carousel__dot {
  background-color: #3d7cc9;
  border: none;
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin: 0 6px;
  transition: all 0.25s;
  width: 10px;
}

.sv-carousel__dot.sv-carousel__dot--active,
.sv-carousel__dot:hover {
  background-color: #6aaae4;
}

.sv-carousel__stage {
  transition: 0.55s;
}

.sv-defaultFormTheme input[type=button],
.sv-defaultFormTheme input[type=submit],
.sv-defaultFormTheme input[type=reset] {
  background: #3d7cc9;
  border: none;
  color: #fff;
  font-family: montserrat;
}

a.sv-font-menu {
  margin-bottom: 1.5em;
}

#svid10_55cf5cf9161fa8332843479 img {
  margin-bottom: 2em;
  margin-top: 0;
  padding: 0;
}


/*
-------------------------------------------
Dragspel
------------------------------------------- */

.accordion {
  color: #fff;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: 0.4s;
}

.accordion:after {
  color: #fff;
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  float: right;
  font-size: 13px;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: '\2796'; /* Unicode character for "minus" sign (-) */
  margin-top: -30px;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: 0.6s ease-in-out;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
.show {
  max-height: 5000px;
  opacity: 1;
}


/*
-------------------------------------------
Högerpilar
------------------------------------------- */

.tidplanvatten_r_box {
  background: #fff;
  border: 2px solid #3d7cc9;
  padding: 1em;
  position: relative;
}
.tidplanvatten_r_box:after,
.tidplanvatten_r_box:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;

  pointer-events: none;
}

.tidplanvatten_r_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.tidplanvatten_r_box:before {
  border-color: rgba(61, 124, 201, 0);
  border-right-color: #3d7cc9;
  border-width: 13px;
  margin-top: -13px;
}

.tidplanhimmel_r_box {
  background: #fff;
  border: 2px solid #6aaae4;
  padding: 1em;
  position: relative;
}

.tidplanhimmel_r_box:after,
.tidplanhimmel_r_box:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;

  pointer-events: none;
}

.tidplanhimmel_r_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.tidplanhimmel_r_box:before {
  border-color: rgba(106, 170, 228, 0);
  border-right-color: #6aaae4;
  border-width: 13px;
  margin-top: -13px;
}

.tidplantegel_r_box {
  background: #fff;
  border: 2px solid #f3be9a;
  padding: 1em;
  position: relative;
}

.tidplantegel_r_box:after,
.tidplantegel_r_box:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;

  pointer-events: none;
}

.tidplantegel_r_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.tidplantegel_r_box:before {
  border-color: rgba(106, 170, 228, 0);
  border-right-color: #f3be9a;
  border-width: 13px;
  margin-top: -13px;
}

.tidplansol_r_box {
  background: #fff;
  border: 2px solid #ffda00;
  padding: 1em;
  position: relative;
}

.tidplansol_r_box:after,
.tidplansol_r_box:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0;

  pointer-events: none;
}

.tidplansol_r_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.tidplansol_r_box:before {
  border-color: rgba(106, 170, 228, 0);
  border-right-color: #ffda00;
  border-width: 13px;
  margin-top: -13px;
}


/*
-------------------------------------------
Block Bakgrundsfärg Tegel  
------------------------------------------- */

.block-bg-tegel .sv-text-portlet-content p.sv-font-jattestor-bla {
  color: #3370B9;
}

.block-bg-tegel .heading,
.block-bg-tegel .sv-text-portlet-content p:nth-child(4).sv-font-jattestor-bla {
  color: #000;
}

.block-bg-tegel .sv-font-ingress {
  color: #000;
  font-family: montserrat,sans-serif;
  font-size: 150%;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.responsive-div {
  height: 0;
  overflow: hidden;
  padding-bottom: 59.2%;
  position: relative;
}

iframe {
  border: none;
  height: 100%;
  left: 0;
  width: 100%;
}


/*
-------------------------------------------
Dold men uppläsbar text
------------------------------------------- */
.user-hidden-text {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}


/*
-------------------------------------------
Kampanjyta Startsidan
------------------------------------------- */

.start-campaign {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F9B233;
  position: relative;
  height: 500px;
  margin-bottom: 1em;
}

.start-campaign > .sv-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.start-campaign > .sv-image-portlet:first-child img,
.start-campaign > .sv-image-portlet:last-child img {
  position: absolute;
  bottom: 0;
}

.start-campaign > .sv-image-portlet:first-child img {
  left: 0;
}

.start-campaign > .sv-image-portlet:last-child img {
  right: 0;
}

.start-campaign .subheading,
.start-campaign .normal,
.start-campaign .env-button{
   font-family: 'Montserrat';
 }

.start-campaign .subheading {
  color: #0a2a35;
  font-size: 360%;
  font-weight: 900;
  margin: 0.2em 0;  
  text-align: center;
}

.start-campaign .normal {
  font-size: 170%;
  margin: 0 0 1em;
  text-align: center;   
  max-width: 640px;
}

.start-campaign .env-button {
  font-size: clamp(100%, 2vw, 112%);
  color: #fff;
  background-color: #124c66;
  border: 1px solid #124c66;
  padding: 1rem 1.6rem 1.1rem;
  border-radius: 20px;
  z-index: 1;
  transition: all .3s ease-in-out;
}

.start-campaign .env-button:hover {
  background-color: #0c3b4c;
  border-color: #f9b233;
  box-shadow: 0 0 4px #fff;
}


/* Specifikt för Vinter */
.start-campaign-winter {
  height: 400px;
  background-color: #cde7ec;
  margin-bottom: 0;
}

.start-campaign-winter .env-button {
  background-color: #fab434;
  border-color: #fab434;
  color: inherit;
}

.start-campaign-winter .env-button:hover {
  background-color: #fabb47;
  border-color: #fff;
}


/*
-------------------------------------------
Kampanjyta Startsidan - Tvådelad
------------------------------------------- */

.start-split-campaign {
  background: linear-gradient(104deg, #f9b233 0 50%, #8fbcce 50% 100%);
}

.start-split-campaign > .sv-layout {
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
}

.start-split-campaign > .sv-layout > .sv-layout {
  align-items: center;
  display: flex; /* för samma höjd */
  position: relative;
  width: 49%;
}

.start-split-campaign > .sv-layout > .sv-layout:last-child {
  margin-left: 2%;
}

/* Dekorationsbilder */
.start-split-campaign > .sv-layout > .sv-layout > .sv-image-portlet {
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 2;
}

.start-split-campaign > .sv-layout > .sv-layout > .sv-image-portlet:first-child {
  top: 0;
  z-index: 1;
}


/* Text */
.start-split-campaign > .sv-layout > .sv-layout > .sv-layout:nth-child(2) {
  padding: 6rem;
  position: relative;
  z-index: 3;
}

.start-split-campaign .subheading {
  color: #0a2a35;
  font-size: 262%;
  font-weight: bold;
  margin: 0 0 0.5em;
}

.start-split-campaign .normal {
  color: #0a2a35;
  font-size: 120%;
  font-weight: 500;
  margin: 0 0 0.5em;
}

.start-split-campaign .normal a {
  background-color: #124c66;
  border: 1px solid #124c66;
  border-radius: 22px;
  color: #fff;
  display: inline-block;
  font-size: 80%;
  font-weight: 500;
  margin-top: 1em;
  padding: 1rem 1.6rem;
  text-decoration: none;
}

.start-split-campaign .normal a:hover {
  background-color: #0c3b4c;
  border-color: #f9b233;
  box-shadow: 0 0 4px #fff;
  transition: all 0.3s ease;
}

.start-split-campaign > .sv-layout > .sv-layout:last-child .normal a:hover {
  border-color: #8fbcce;
}


/* Envision */
p.env-text {
   line-height: 1.5;
}

.env-link {
   text-decoration: underline;
}

.env-link:hover {
   text-decoration: none;
}


/* Inför lansering */
.env-button::after {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.175%2013.5H4v-2h12.175l-5.6-5.6L12%204.5l8%208-8%208-1.425-1.4%205.6-5.6Z%22%20fill%3D%22%23274a72%22/%3E%0A%3C/svg%3E');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 1em;
    margin-left: 0.25em;
    margin-top: 0.1em;
    width: 1em;
}

.start-campaign .env-button::after {
   display: none;
}


.env-button {
  animation: growThenShrink 1.5s ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes growThenShrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}