:root{
    --dropdownColor : white ;
    /* --freePhrase1: "free1"; */
}

.header{
    width: calc(100% - 0px);
    min-width: 175px;
    height:100px;
    padding: 0px 0px;
    background-color:var(--pmMainColor);
    position: sticky;
    top:0;
    box-shadow: transparent 0px 0px 5px;
    transition: all 0.3s ease-in-out;
    display:flex;
    justify-content: space-between;
    z-index: 2;
}

.header.fade {
    background-color:rgba(255,255,255,1);
    box-shadow: gray 0px 0px 5px;
}

.subHeader{
    margin: 0 auto;
    height:100%;
    width: calc(100% - 80px);
    max-width: var(--pmMaxWidth);
    display: flex;
    justify-content: space-between;
}

.subHeader.rtl{
    flex-direction: row-reverse;
}

.headerDiv{
    display:flex;
}

.headerDiv.rtl{
    flex-direction: row-reverse;
}

.headerDiv.left{
    width:250px;
}
.headerDiv.center{
    width:75%;
    column-gap: 5%;
    -webkit-column-gap: 5%;
}
.headerDiv.right{
    width:25%;
    column-gap: 5%;
    -webkit-column-gap: 5%;
    justify-content: flex-end;
}

.headerButton{
    background-color: transparent;
    border: 0px;
    font-size: 18px;
    font-family: var(--mainFont);
    color: white;
    transition: all 0.3s ease-in-out;
    cursor:pointer;
}

.headerButton.darkHeader{
    color: var(--pmMainColor);
}

s1{
    text-decoration:none;
    position:relative;
}
s1::before{
    top: 50%;
    background:red;
    opacity:.7;
    content: '';
    width: 110%;
    position: absolute;
    height:.1em;
    left: -5%;
    transform: rotate(-15deg); 
}

s1.inner::before{
    top: -90%;
    background: none;
    opacity: 1;
    content: attr(data-s1-before-content);
    text-shadow: 0 0 4px white; 
}

s1.rtl.inner::before{
    top: -120%;
}

#remasHeaderLogo{
    display: flex;
}

#remasHeaderLogo.rtl{
    justify-content: flex-end;
}

#moreHeaderButton{
    display:none;
    font-size: 35px;
}

@media only screen and (max-width: 900px) {
    .headerDiv.center, #loginHeaderButton, #signupHeaderButton{
        display:none;
    }
    #moreHeaderButton{
        display:inline-block;
    }
    #remasHeaderLogo{
        width:auto;
    }
}

@media only screen and (max-width: 320px) {
    #remasHeaderLogoText{
        display:none;
    }
}