.main-social {
position: absolute;
top: -50px;
left: 50px;
}
.main-social > * {
position: relative;
display: inline-block;
vertical-align: middle;
}
.main-social .social-btn {
width: 16px;
}
.main-social .svg-wrapper svg path {
fill: #fff;
}
.main-social .social-icon {
height: 20px;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.6s;
}
.main-social .social-icon:after {
content: "";
position: absolute;
width: 0;
height: 1px;
background-color: #fff;
opacity: 0.2;
top: 8px;
left: 27px;
transition: width 0.5s 0.3s;
}
.main-social .social-network {
overflow: hidden;
will-change: transform;
margin-left: 60px;
}
.main-social .social-network li {
opacity: 0;
visibility: hidden;
will-change: transform;
transform: translateY(50%) rotate(15deg) scale(0.8);
transform-origin: top left;
display: inline-block;
line-height: 30px;
margin-right: 30px;
font-size: 16px;
}
.main-social .social-network li:last-child {
margin-right: 0;
}
.main-social .social-network li:hover i {
color: #fff;
}
.main-social:hover .dsn-wrapper {
margin-right: 7px;
}
.main-social:hover .dsn-wrapper:last-child {
margin-right: 0;
}
.main-social:hover .social-network {
will-change: transform;
}
.main-social:hover .social-network li {
will-change: transform;
opacity: 1;
visibility: visible;
transform: none;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.main-social:hover .social-network li:nth-of-type(1) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 60ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 260ms, visibility 0.3s 45ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 60ms;
}
.main-social:hover .social-network li:nth-of-type(2) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 120ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 320ms, visibility 0.3s 90ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 120ms;
}
.main-social:hover .social-network li:nth-of-type(3) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 180ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 380ms, visibility 0.3s 135ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 180ms
}
.main-social:hover .social-network li:nth-of-type(4) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 240ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 440ms, visibility 0.3s 180ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 240ms
}
.main-social:hover .social-network li:nth-of-type(5) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 500ms, visibility 0.3s 225ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms
}
.main-social:hover .social-network li:nth-of-type(6) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 360ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 560ms, visibility 0.3s 270ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 360ms
}
.main-social:hover .social-network li:nth-of-type(7) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 420ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 620ms, visibility 0.3s 315ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 420ms
}
.main-social:hover .social-network li:nth-of-type(8) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 480ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 680ms, visibility 0.3s 360ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 480ms
}
.main-social:hover .social-network li:nth-of-type(9) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 540ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 740ms, visibility 0.3s 405ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 540ms
}
.main-social:hover .social-network li:nth-of-type(10) {
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 600ms, opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 800ms, visibility 0.3s 450ms, -webkit-transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 600ms
}
.main-social:hover .social-icon:after  {
width: 40px;
transition-delay: 0s;
}
.grecaptcha-badge {
display: none;
}
@media only screen and (max-width: 991px) {
.main-social {
top: -130px;
}
}
@media only screen and (max-width: 575px) {
.main-social {
left: 20px;
}
}