:root {
  --elektrom-green: #8ed081;
  --elektrom-graphite: #383c44;
  --elektrom-blue: rgb(173, 216, 230);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html {
    overflow‑x: hidden;   
    height: 100%;         
}

body {
  display: flex;
  flex-direction: column;
}


main {
  flex: 1 0 auto; 
}

footer {
  flex-shrink: 0;
  background: var(--elektrom-graphite);
  color: wheat;
  text-align: center;
}
.header-image {
    width: 125px;
    height: 125px;
    border-radius: 10%;
    margin-left: 10px;
}

.image-fill {
  width: 100%;
  height: auto; 
  display: block;
  transition: opacity 0.4s ease-out;
}

.logo-image {
  width: 100%;
  height: 100%;
  max-width: 100px;
}

.content-image {
    width: 100%;
    height: auto;
    border-radius: 50%;
    max-width: 200px;
}

.navbar-toggler{
    float: right;
}

.navbar-brand{
    float: left;
    text-align: left;
    height: 75px;
    width: 75px;
}

footer{
    background-color: #383c44;
    text-align: center;
    color: wheat;
}

.background-blue {
  background: var(--elektrom-blue);
}


.content-text{
  
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;

}

.content-header{
  
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
  }


.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 500%;
  -webkit-text-stroke: 1px var(--elektrom-graphite);
}


.strokeless{
    -webkit-text-stroke-width: 0px;
}

.container_picture {
  position: relative;
  text-align: center;
  color: white;
  background-color: #383c44;
}


.wave-text span {
    display: inline-block;
    font-size: 9vw;
    animation: wave 3.5s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
    animation-delay: 0s;
}
.wave-text span:nth-child(2) {
    animation-delay: 0.2s;
}
.wave-text span:nth-child(3) {
    animation-delay: 0.4s;
}
.wave-text span:nth-child(4) {
    animation-delay: 0.6s;
}
.wave-text span:nth-child(5) {
    animation-delay: 0.8s;
}
.wave-text span:nth-child(6) {
    animation-delay: 1.01s;
}
.wave-text span:nth-child(7) {
    animation-delay: 1.2s;
}
.wave-text span:nth-child(8) {
    animation-delay: 1.4s;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.inline{
    display: inline-block;
}

.image-fill[style*="opacity: 0"] {
    pointer-events: none;
}


a {
  box-shadow: inset 0 0 0 0 #A71D31;
  color: #54b3d6;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 #A71D31;
  color: white;
}
a:active{
    color: #A71D31;
}
a:link{
    color: #8ed081;
}

a1{
    padding: 0;
    margin:0;
}

.text-big{
    font-size: 175%;
}

.text-small{
    font-size: 100%;
}

.outlined{
    outline: dotted;
    outline-color: #383c44;
    outline-width: 1px;
}


@media (max-width: 767.98px) {
  
  .container_picture {
    height: 80vh;
  }

  .image-fill {
    height: 100%;   
    object-fit: cover;
  }
}


.archive-shadow{
    box-shadow: inset 90px 0 0 0 rgb(173, 216, 230);
}

.categories-shadow{
    box-shadow: inset 110px 0 0 0 lightblue;
}

.text-green-active{
    font-size: 100%;
    color: #54b3d6;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #383c44;
    /*background-color: rgba(56,60,68,0.3);*/
}

.text-green{
    font-size: 100%;
    color: whitesmoke;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #383c44;
}

.navbar.bg-transparent {
  background: rgba(0,0,0,.4) !important;
  transition: background-color 0.3s ease;
}

.navbar.nav-open {
  background: rgba(0,0,0,.85) !important;    

}

.color-red{
    color: #A71D31;
}


.color-black{
  color:white;
  text-shadow: 4px 4px 4px black;
  outline-color: #A71D31;
  
}

.text-massive{
  font-size: 500%;
}

.spacer {
  height: 100vh;
}

.fade-on-scroll {
  opacity: 0;
  transition: opacity 0.1s linear;
  will-change: opacity;
}


@media (max-width: 767.98px) {

 
  .text-massive {
    font-size: 180%;
  }

  .centered {
    font-size: 180%;
  }


  .content-header {
    font-size: 1.05rem;
  }


  .content-text,
  address {
    font-size: 0.85rem;
    line-height: 1.4;
  }


  .navbar-nav .nav-link {
    font-size: 0.85rem;
  }


  .text-small {
    font-size: 0.75rem;
  }

}


.background-coloring{
  background-color:rgba(173, 216, 230, 0.733);
}