/* 
Skapar egen klass "ek-flexbox" som läggs till som CSS-regel 
under Webbplatsinställningar / Dekorationer och som appliceras 
på layouten "Flexbox" på medarbetarsidan.
*/

/* Flexbox på behållaren */
.ek-flexbox {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   gap: 2em 1em;
}

/* Justerar rubriker till att likna h3 */
.ek-flexbox h2 {
   font-size: 0.9375em;
   margin-top: 1em;
   margin-bottom: 0.125em;
}

/* Justerar länkar */
.ek-flexbox p a {
	color: #fff !important;
   text-decoration: none !important;
}

/* Flexbox på underliggande behållare för att placera knappen i botten */
.ek-flexbox .sv-layout {
   display: flex;
   flex-direction: column;
}

.ek-flexbox .sv-text-portlet {
   margin-bottom: 0.5em;
}

.ek-flexbox .sv-marketplace-sitevision-button {
   margin-top: auto;
}


/* Mobile */
@media only screen and (max-width: 390px) {
   
   /* Justerar bredden på layouterna */
   .ek-flexbox .sv-vertical {
		width: 150px;
   }
}

@media only screen and (min-width: 391px) and (max-width: 640px) {
   
   /* Justerar bredden på layouterna */
   .ek-flexbox .sv-vertical {
		width: 170px;
   }
}

/* Tablet */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
   
   /* Justerar bredden på layouterna */
   .ek-flexbox .sv-vertical {
		width: 298px;
   }
}

/* Desktop */
@media only screen and (min-width: 1024px) {
   
   /* Ökar avståndet mellan raderna */
   .ek-flexbox {
      justify-content: space-between;
      row-gap: 3em;
   }
   
   /* Justerar bredden på layouterna */
   .ek-flexbox .sv-vertical {
		width: 316px;
   }
   
   /* Justerar rubriker till att likna h3 */
   .ek-flexbox h2 {
      font-size: 1.125em;
   }
}


/* 
Skapar egen klass "ek-top-area-employee" som läggs till som CSS-regel 
under Webbplatsinställningar / Dekorationer och som appliceras 
på layouten "Toppyta" i mallen Medarbetare.
*/
/* För exakt samma höjd som på andra sidor, använd margin: 11.5em 0 2.29em !important; */
.ek-top-area-employee .sv-column-12 {
   margin: 17em 0 3em !important; 
}

.ek-top-area-employee h1 {
   margin-bottom: 0 !important;
}

.ek-top-area-employee h2 {
   margin-top: 0 !important;
}

/* Desktop */
@media only screen and (min-width: 1024px) {
   
   .ek-top-area-employee .sv-column-12 {
      margin: 34vh 0 8vh !important;
   }
}


/* 
Skapar egen klass "ek-aside-employee" som läggs till som CSS-regel 
under Webbplatsinställningar / Dekorationer och som appliceras 
på layouten "Högerspalt" i mallen Medarbetare.
*/
/* Tablet & Desktop */
@media only screen and (min-width: 641px) {
   .ek-aside-employee {
      margin-left: 2em !important;
   }
   
   .ek-aside-employee h2 {
      margin-top: 0.25em !important;
   }
}