File: front/css/index.css

.w3-bar .w3-btn{
    transition: .5s;
}
.w3-bar .w3-btn:first-child{
    border-left:1px solid #dddddd;
}
.w3-bar .w3-btn:not(:first-child){
    border-left:1px solid #dddddd;
}
.w3-bar .w3-btn:last-child{
    border-right:1px solid #dddddd;
}

.w3-bar .w3-btn:hover{
    background:#000;
}

.w3-bar .w3-center{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.homenu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sidemenu a{
    position: relative;
    margin-bottom:5px;
}
.sidemenu .w3-btn:not(:first-child)::before{
    content:"";
    position: absolute;
    left:0;
    top:0;
    background: #2196F3;
    width:1px;
    height: 100%;
    transition: .5s;
    z-index:-1;
}
.activeMenu{    
    background: rgba(33, 149, 243, 0.658)!important;
}
.sidemenu .w3-btn:hover:not(:first-child)::before{    
    width:50px;
}
/* carret section */
.boxCarret {
    /* width: 600px;
    display: block;
    flex: row;
    justify-content: space-around; */
}

.carret{
    width: 100px;
    height: 100px;
    border:solid 1x #ddd;
    text-align: center;
    margin:15px;
    border-radius:50%;
}

.rearch{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    justify-content: space-between;
    width:600px; 
}
.rearch input[type="search"],
.rearch input[type="number"],
.rearch input[type="text"]{
    padding:8px;
    display:block;
    border:none;
    width:100%; 
    text-align: center;
    color:#969696;
}
.rearch button{
    border:none;
    background: #fff;
    color:#000;
    cursor:pointer;
}
.center{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%)
}
.centerObject{
    width:600px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%)
}
.w3row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media(width:450px){
    .center{
        position: relative;
    }
}