.test-box {
    max-width: 1200px;
    margin: auto;
}

.relpol-product {
    width: 100%;
    font-family: 'Roboto';
    
}
.relpol-logo {
    width: 100%; 
}
.relpol-logobox {
    width: 30%;
}
.relpol-mainsection {
    background-image: url("https://xmc-mobile.pl/RC/Relpol/2024/Przekaźniki-bistabilne/Przekazniki - tło99.png") ;
    background-size: cover;
    margin-bottom: 1vw;
    padding-bottom: 2vw;
}
.relpol-mainsectionproductname {
    color: #575759;
    font-weight: 1000;
    font-size: 3.0em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.relpol-mainsectionproductnamebox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3vw;
    padding-top: 2vw;

}
.relpol-mainsectionphotobox {
    width: 50%;
    margin-right: 4%;
    display: flex;
    justify-content: flex-start;


}
.relpol-mainsectionphoto {
    width: 80%;
    text-align: center;
}
.relpol-mainsectionrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin-left: auto;
    margin-right: 5%;
    
}
.relpol-mainsectiondecor {
    color: #da251c;
    font-size: 1.7em;
    padding-right: 1vw;
    font-weight: 1000;
    

}
.relpol-mainsectiondecor2 {
    
    color: #da251c;
    padding-right: 1vw;
    font-weight: 600;
    font-size: 4em;

}
.relpol-mainsectionfeature {
    display: flex;
    align-items: center;
    font-size: 1.4em;
    font-weight: 500;
    color: #575759;
    padding-bottom: 1vw;
}
.relpol-mainsectionfeaturesbox {
    width: 50%;
}
.relpol-descriptionsectiontitle {
    color: #444444;
    font-weight: 1000;
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    
}
.relpol-descriptionsectiontitlebox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5vw;
    padding-top: 1vw;

}
.relpol-descriptionsectiontextrow {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1vw;
    padding-bottom: 0vw;
}
.relpol-descriptionsectiontextbox {
    width: 47%;
    margin-left: auto;
    margin-right: auto;

}
.relpol-descriptionsectiontextboxtitle {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding-bottom: 1vw;
}
.relpol-descriptionsectionphotobox {
    padding-top: 7vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: auto;
    
}
.relpol-descriptionsectionphoto {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.relpol-descriptionsectionphoto:hover {
    transform: scale(1.01);
    transition: ease-in-out 0.3s;
}

.relpol-descriptionsectiontextboxcontainer {
    color: #000000;
    font-size: 0.9vw;
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
    padding: 1vw;
    background: #ffffff;
    box-shadow: 1px 5px 15px #3e3e3e;
}



.relpol-descriptionsectiontextbox:hover .relpol-descriptionsectiontextboxcontainer {

    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;

}

.relpol-descriptionsectiondecor {
    color: #da251c;
    padding-right: 1vw;
    font-weight: 600;
    font-size: 4vw;
}
.relpol-descriptionsection {
    background-image: url("https://xmc-mobile.pl/RC/Relpol/2024/Przekaźniki-bistabilne/Przekazniki - background6.png") ;
    background-size:cover;
    margin-bottom: 2vw;
    padding-bottom: 5vw;
   

}
.relpol-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    box-shadow: 0vw 0vw 3vw 1vw #a9a9a9;

}
.relpol-videosectionbox {
    width: 80%;
    margin: auto;

}
.relpol-videosection {
    background: #ffffff;
    padding-bottom: 5vw;
    padding-top: 5vw;
    margin-bottom: 3vw;
}
.relpol-test {
    background-image: url("https://xmc-mobile.pl/RC/Relpol/2024/Przekaźniki-bistabilne/Przekazniki bistabilne - tło5.jpeg");
    background-size: cover;
    padding-top: 2vw;
    padding-bottom: 6vw;
    margin-bottom: 3vw;
}
.relpol-diagramssectionheader {
    color: #575759;
    font-weight: 1000;
    font-size: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2vw;
    
}
.relpol-diagramssection {
    width: 100%;
    margin: auto;
    background: #ffffff; ;
    padding-bottom: 5vw;
    border-radius: 24px;
    overflow: hidden;
    
    
    
}
.relpol-diagramssection2 {
    width: 80%;
    margin: auto;
    background: #ffffff;
    padding-bottom: 1vw;
    margin-top: 1vw;
    margin-bottom: 0vw;
    overflow: hidden;

    
    
}
.relpol-diagramssectiondecor {

    color: #da251c;
    padding-right: 1vw;
    font-weight: 600;
    font-size: 4vw;
    
}
.relpol-diagramssectionphoto {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    
}
.relpol-dimensionssectionrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background-size: cover;

}
.relpol-dimensionssectionbox {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.7s;
    /*border-right: 3px solid #000000; */
    margin-right: 3px;
    opacity: 0.8;
    
    
    
}
.relpol-dimensionssectionbox2 {
    width: 24.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.7s;
}
.relpol-dimensionssectionbox3 {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.7s;
    opacity: 0.8;
}
.relpol-dimensionssectionboxphoto {
    width: 100%;


}
.relpol-dimensionssectionbox2photo {
    width: 100%;

}
.relpol-dimensionssectionbox3photo {
    width: 100%;
 
}
.relpol-dimensionssectionbox:hover {
    width: 50%;
    transition: ease-in-out 0.7s;
    opacity: 1;
}

.relpol-dimensionssectionbox2:hover {
    width: 50%;
    transition: ease-in-out 0.7s;
}
.relpol-dimensionssectionbox3:hover {
    width: 50%;
    transition: ease-in-out 0.7s;
    opacity: 1;
}
.relpol-dimensionssectionbox3:hover .relpol-dimensionssectionbox {
    opacity: 0.4;
}

.relpol-aboutlogobox {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.relpol-aboutlogo {
    width: 100%;
}
.relpol-abouttext {
    width: 80%;
    margin: auto;
    padding-top: 5vw;
    padding-bottom: 5vw;
    font-size: 1.4em;
    color: #ffffff;
    font-weight: 400;
    text-align: justify;
}
.relpol-abouttextbox {
    background-size: contain;
    width: 100%;
    margin: auto;
    background-image: url("https://xmc-mobile.pl/RC/Relpol/2024/AboutBackground.png");
    background-size: cover;
}
.relpol-aboutsectionphoto {
    width: 100%;
}
.relpol-aboutsection {
    margin-top: 2vw;
}

  
  .relpol-marker {
      width: 4.5vw;
      height: 4.5vw;
      background: linear-gradient(135deg, rgb(218, 27, 28) 35%, rgb(47, 57, 47) 100%);
      border-radius: 64px;
      border: 3px solid #fff;
      cursor: pointer;
      animation: relpol-pulse 1.3s infinite;
      z-index: 0;
      padding: 0.1vw;
  }
  
  .relpol-marker-inner {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .relpol-marker-inner::before,
  .relpol-marker-inner::after {
      content: '';
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
    
  
  .relpol-marker-inner::before {
      width: 2.5vw;
      height: 0.5vw;
  }
  
  .relpol-marker-inner::after {
      width: 0.5vw;
      height: 2.5vw;
  }
  

  

  
 
  @keyframes relpol-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
    100% {
        box-shadow: 0 0 0 32px rgba(255, 255, 255, 0), 0 1px 1px 32px rgba(0, 0, 0, 0);
    }
}

    @keyframes relpol-textshow {
        0% {
            display:none ;
            opacity: 0;
        }
        1% {
             display: block ;
             opacity: 0;
        }
        100% {
             display: block ;
             opacity: 1;
    }
}
@keyframes relpol-textshow2 {
    0% {
        display:none ;
        opacity: 0;
    }
    50% {
         display: block ;
         opacity: 0;
    }
    100% {
         display: block ;
         opacity: 1;
}
}

@media  screen and (max-width:768px) {
    .relpol-mainsectionproductname {
        font-size: 2em;
    }
    .relpol-mainsectiondecor2 {
        font-size: 2.5em;
    }
    .relpol-mainsectionfeature {
        font-size: 1em;
    }
    .relpol-mainsectionrow {
        width: 100%;
        margin: 0;
        flex-wrap: wrap;
    }
    .relpol-mainsectionfeaturesbox {
        width: 100%;
        margin-top: 5vw;
    }
    .relpol-descriptionsectiontitle {
        font-size: 2em;
    }
    .relpol-descriptionsectiontextrow {
        flex-wrap: wrap;
    }
    .relpol-descriptionsectiontextbox {
        width: 100%;
    }
    .relpol-descriptionsectiontextboxcontainer {
        width: 70%;
        margin: auto;
        font-size: 1em;
        margin-bottom: 4vw;
    }
    .relpol-videosectionbox {
        width: 100%;
    }
    .relpol-abouttext {
        font-size: 1.2em
    }
    .relpol-dimensionssectionbox {
        width: 100%;
    }
    .relpol-dimensionssectionbox3 {
        width: 100%;
    }
    .relpol-dimensionssectionrow {
        flex-wrap: wrap;
    }
    .relpol-test {
        background-size: auto;
    }

}
@media  screen and (min-width:1200px) {
      .relpol-marker {
      width: 3.5vw;
      height: 3.5vw;
    }
      .relpol-marker-inner::before {
      width: 2vw;
      height: 0.4vw;
  }
  
  .relpol-marker-inner::after {
      width: 0.4vw;
      height: 2vw;
  }
    .relpol-descriptionsectiontextboxcontainer {
        font-size: 0.7vw;
    }
}