/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

body {
    background-color: rgba(0, 181, 245, 0.05);
}
.social-container {
    width: 400px;
    margin: 40vh auto;
    text-align: center;
}
.social-icons-new {
    padding: 0;
    list-style: none;
    margin: 1em;
    padding-bottom: 100;
}
.social-icons-new li {
    display: inline-block;
    margin: 0.15em;
    position: relative;
    font-size: 1.1em;
}
.social-icons-new i {
    color: #fff;
    position: absolute;
    top: 9px;
    left: 10px;
    -webkit-transition: all 265ms ease-out;
    -o-transition: all 265ms ease-out;
    transition: all 265ms ease-out;
}
.social-icons-new a {
    display: inline-block;
}
.social-icons-new a:before {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    content: " ";
    width: 35px;
    height: 35px;
    border-radius: 100%;
    display: block;
    background: -o-linear-gradient(45deg, #00f587, #008f26);
    background: linear-gradient(45deg, #00f587, #008f26);
    -webkit-transition: all 265ms ease-out;
    -o-transition: all 265ms ease-out;
    transition: all 265ms ease-out;
}
.social-icons-new a:hover:before {
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-transition: all 265ms ease-in;
    -o-transition: all 265ms ease-in;
    transition: all 265ms ease-in;
}
.social-icons-new a:hover i {
    transform: scale(2.2);
    -ms-transform: scale(2.2);
    -webkit-transform: scale(2.2);
    color: #00f587;
    background: -webkit-linear-gradient(45deg, #00f587, #008f26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: all 265ms ease-in;
    -o-transition: all 265ms ease-in;
    transition: all 265ms ease-in;
}



.social-icons-new-header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: end;
   padding: 0;
   list-style: none;
   margin-bottom: 0;
   margin-right: 10px;
}
.social-icons-new-header li {
   display: inline-block;
   margin: 0 0.1em;
   position: relative;
   font-size: 1.3em;
}
.social-icons-new-header i {
   color: #fff;
   position: absolute !important;
   top: 8px !important;
   left: 3px;
   -webkit-transition: all 265ms ease-out;
   -o-transition: all 265ms ease-out;
   transition: all 265ms ease-out;
}
.social-icons-new-header a {
   display: inline-block;
}
.social-icons-new-header a:before {
   transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   content: " ";
   width: 30px;
   height: 30px;
   border-radius: 100%;
   display: block;
   /* background: linear-gradient(45deg, #00f587, #008f26); */
   -webkit-transition: all 265ms ease-out;
   -o-transition: all 265ms ease-out;
   transition: all 265ms ease-out;
}
.social-icons-new-header a:hover:before {
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
   -webkit-transition: all 265ms ease-in;
   -o-transition: all 265ms ease-in;
   transition: all 265ms ease-in;
}
.social-icons-new-header a:hover i {
   transform: scale(1.8);
   -ms-transform: scale(1.8);
   -webkit-transform: scale(1.8);
   color: #e9ece9 !important;
   background: -webkit-linear-gradient(45deg, #e9ece9, #e9ece9);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-transition: all 265ms ease-in;
   -o-transition: all 265ms ease-in;
   transition: all 265ms ease-in;
}