#button {
    display: inline-block;
    background-color: #4dc0b5;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#button:hover {
    cursor: pointer;
    background-color: #333;
}
#button:active {
    background-color: #555;
}
#button.show {
    opacity: 1;
    visibility: visible;
}

/* Styles for the content section */

.content {
    width: 77%;
    margin: 50px auto;
    font-family: 'Merriweather', serif;
    font-size: 17px;
    color: #6c767a;
    line-height: 1.9;
}
@media (min-width: 500px) {
    .content {
        width: 43%;
    }
    #button {
        margin: 30px;
    }
}
.content h1 {
    margin-bottom: -10px;
    color: #03a9f4;
    line-height: 1.5;
}
.content h3 {
    font-style: italic;
    color: #96a2a7;
}
/*sticky sidebar */
.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}


.make-me-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;

    padding: 0 15px;
}
/* Let's style the wrapper in such away that,
it should always be at the center of the browser */
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
}

/* Style the Un-order list by setting its list-style to none */
.wrapper ul {
    list-style: none;
}

/* Style the list items inside the UL list, by setting its width, height and line-height
  and float them to left and set its border and border-radius.
 */
.wrapper ul li {
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 5px solid #D8E2DC;
    transition: all 0.5s ease;
}

/* Style the icons by setting its color and margin-top value to 20px
to align it properly */
.wrapper ul li .fa {
    color: #D8E2DC;
    transition: all 0.5s ease;
}

/* Now target the specific li classes for styling and use box-shadow effect to border and text-shadow effect
  to icons for glowing effect and use transition property for smooth transition effect. */
/*facebook*/
.wrapper ul li:hover.facebook {
    border: 5px solid #3b5998;
    box-shadow: 0 0 15px #3b5998;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-facebook {
    color: #3b5998;
    text-shadow: 0 0 15px #3b5998;
    transition: all 0.5s ease;
}

/*twitter*/
.wrapper ul li:hover.twitter {
    border: 5px solid #00aced;
    box-shadow: 0 0 15px #00aced;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-twitter {
    color: #00aced;
    text-shadow: 0 0 15px #00aced;
    transition: all 0.5s ease;
}

/* instagram */
.wrapper ul li:hover.instagram {
    border: 5px solid #bc2a8d;
    box-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-instagram {
    color: #bc2a8d;
    text-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
}

/* google */
.wrapper ul li:hover.google {
    border: 5px solid #dd4b39;
    box-shadow: 0 0 15px #dd4b39;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-google {
    color: #dd4b39;
    text-shadow: 0 0 15px #dd4b39;
    transition: all 0.5s ease;
}

/* whatsapp */
.wrapper ul li:hover.whatsapp {
    border: 5px solid #4dc247;
    box-shadow: 0 0 15px #4dc247;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-whatsapp {
    color: #4dc247;
    text-shadow: 0 0 15px #4dc247;
    transition: all 0.5s ease;
}
/*

 */
.tablecenter {
    margin: auto;
    width: 50% !important;
}
.bgautocomplite:hover {
    background: #b3e8ca; /* Цвет фона под ссылкой */
}