/*
.container-header {
  background-color: #005BAE;
  background-image: none;
} */

root {
--cassiopeia-color-primary: #005BAE;
/*  
--cassiopeia-color-link:  #00dd00;
--cassiopeia-color-hover: #800000; */
}

.own {
  --cassiopeia-color-primary: #005BAE;
/*
  --cassiopeia-color-hover: #174F4B;
  --cassiopeia-color-link: #1C5E5A; */
}

h2 {
    font-size: clamp(0.9rem, 2vw + 1rem, 1.3rem) !important;
}

ol.com-content-blog__links {
  /* list-style: inside "▶" !important; */
}

ol li.com-content-blog__link {
  list-style-type: lower-alpha !important;
  color: blue !important;
  list-style: inside "▶ " !important;
}

/* Base style for mobile devices */
.my-beautiful-image {
    /* width: 35% !important; */
    max-width: 90vw !important;
    margin-top: 40px !important;
    margin-bottom: 15px !important;
    margin-left: auto;
    margin-right: auto;
    /* box-shadow: 3px 3px 5px rgb(0 0 0 / 0.5) !important; */
    box-shadow: 5px 5px 8px rgb(0 0 0 / 0.5) !important;
    /* box-shadow: 5px 10px 40px 5px rgba(0,0,0,0.5) !important; */
    /* border-radius: 30px !important; */
    border-radius: 2vw !important;
    outline: 1px solid white !important;
    /* outline-offset: -0.8vw !important; */ 
    outline-offset: clamp(-10px, -15px, -20px) !important;
    /* outline-offset: calc(100% - 115%) !important; */
    /* padding: 5px; */
}

.my-beautiful-image-centered {
    margin-left: auto;
    margin-right: auto;
    /* min-width: 350px !important; */
    max-width: 90vw !important;
}

/* For devices with a minimum width of 992px (Large) */
@media screen and (min-width: 992px) {
  .my-beautiful-image  {
    /* min-width: 350px !important; */
    border-radius: 1vw !important;
    max-width: 20vw !important;
    max-height: 11vw !important; 
    outline-offset: clamp(-10px, -11px, -12px) !important;
  }
  .my-beautiful-image-centered {
    margin-left: auto;
    margin-right: auto;
    max-width: 20vw !important;
    max-height: 11vw !important; 
    /* padding: 5px; */
}
  
}

.readmore .btn {
    margin-left: auto !important;
    margin-right: auto !important;
    /* background-color: #007bff; */
    /* color: #cccccc; */ 
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
}

.my-beautiful-image-no-outline {
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 8px rgb(0 0 0 / 0.5) !important;
    border-radius: 30px !important;
    /* padding: 5px; */
}

.my-span{
        position: absolute;
        z-index: 2;
        top: calc(150px - 20px);
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.7);
        padding: 10px 50px;
        margin: 0 45px;
        text-align: center;
        font-size: 24px;
        color: white;
        font-weight: 300;
        font-family: $font;
        letter-spacing: 0.2px;
        /* transition: all 0.3s ease-out; */
}