/**********************************************/
/************** Social Buttons ****************/
/**********************************************/

.social {
    width: auto;
    float: right;
    height: 46px;
}

.social ul {
    width: auto;
    float: right;
    height: 46px;
    padding: 0;
    margin: 0;
}

.social ul li {
    width: 46px;
    float: left;
    display: inline-block;
    height: 46px;
    border: 0;
    list-style-type: none;
    background-color: grey;
    margin-left: -1px;
}

.socialfooter {
    width: auto;
    float: right;
    height: 46px;
}

.socialfooter ul {
    width: auto;
    float: right;
    height: 46px;
    padding: 0;
    margin: 0;
}

.socialfooter ul li {
    width: 46px;
    float: left;
    display: inline-block;
    height: 46px;
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
    list-style-type: none;
    background-color: white;
    margin-left: -1px;
}

.social ul li a {
    border: 0;
}

/* background slide transition */
.social ul li a,
.socialfooter ul li a {
    transition: background 0.3s;
    -moz-transition: background 0.3s; /* Firefox 4 */
    -webkit-transition: background 0.3s; /* Safari and Chrome */
    -o-transition: background 0.3s; /* Opera */
}

/* font color transition */
#logo a,
#navi ul li a,
#navi ul li a:visited {
    transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
}

/* text shadow transition */
#navi ul li a,
#navi ul li a:visited {
    transition: text-shadow 0.3s;
    -moz-transition: text-shadow 0.3s;
    -webkit-transition: text-shadow 0.3s;
    -o-transition: text-shadow 0.3s;
}

/* background color transition */
#logo a,
button.commentbutton {
    -webkit-transition: background-color 0.3s ease-in;
    -moz-transition: background-color 0.3s ease-in;
    -o-transition: background-color 0.3s ease-in;
    transition: background-color 0.3s ease-in;
}

/* width transition */
#logo,
#navi,
#conteactinfo,
.split2 {
    -webkit-transition: width 0.3s ease-in;
    -moz-transition: width 0.3s ease-in;
    -o-transition: width 0.3s ease-in;
    transition: width 0.3s ease-in;
}
.social-icons, .payment-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}
/* margins and padding transition */
#logo,
.social,
#navi,
#navi ul,
#navi ul li,
#navi ul li ul,
#conteactinfo,
.socialfooter ul {
    -webkit-transition: margin-left 0.3s ease-in;
    -moz-transition: margin-left 0.3s ease-in;
    -o-transition: margin-left 0.3s ease-in;
    transition: margin-left 0.3s ease-in;
    -webkit-transition: margin-right 0.3s ease-in;
    -moz-transition: margin-right 0.3s ease-in;
    -o-transition: margin-right 0.3s ease-in;
    transition: margin-right 0.3s ease-in;
    -webkit-transition: padding 0.3s ease-in;
    -moz-transition: padding 0.3s ease-in;
    -o-transition: padding 0.3s ease-in;
    transition: padding 0.3s ease-in;
}