.navElement{
    float:right;
}

.navElement--left{
    float:left;
}

@media(max-width:767px){
    .float-left-xs{
        float:left
    }
}

.navElement--border{
    width: 2px;
    float: right;
    background-color: var(--nav-color);
    margin: 0.325em 0;/*2+0.325*2 = 2.65 = nav height*/
    height: 2em;
}

.navElement__button{
    display: inline-block;
    cursor: pointer;
    padding: 0 0.35em;
    line-height: 1.9em;
    height: 2em;
    color:var(--nav-color);
}

@media(min-width:768px){
    .navElement__button{
        padding: 0 1em;
        line-height: 2.5em;
        height: 2.65em;
    }

}

.navElement__button:hover{
    background:var(--nav-bg-color-hover);
}

.actionButton, .mainActionButton{
    display: inline-block;
    padding: 0.5em 1em;
}

.mainActionButton--big{
    border-radius: 0;
    display: inline-block;
    padding:0.85em 1.9em;
}

.actionButton{
    border:1px solid #ddd;
}

.actionButton:hover{
    background:#ddd;
}

.mainActionButton, .mainActionButton--big{
    background-color: var(--main-action-background-color);
    color: var(--main-action-color);
}

.mainActionButton:hover, .mainActionButton--big:hover{
    background-color: var(--main-action-background-color-hover);
    color:var(--main-action-color-hover);
}

.brad-1{
    border-radius:0.12em;
}

.brad-2{
    border-radius:0.25em;
}

.b-top{
    border-top: 1px solid #ddd;
}

.zoom--tile {
    position: relative;
    float: left;
    overflow: hidden;
}
  
.zoom--photo {
    width: 100%;
    height: 100%;
    transition: transform .5s ease-out;
}

.underline--hover {
    opacity: 0;
    padding-top: 3px;
    border-bottom: 2px solid var(--main-action-color);
}

.underline-triger:hover .underline--hover{
    opacity: 1;
}