/**
 * About Me Widget
 */
.oceanwp-about-me {
    position: relative;
    text-align: center;

    .oceanwp-about-me-avatar,
    .oceanwp-about-me-social {
	    margin-top: 20px;
	}

    .oceanwp-about-me-avatar img {
	    position: relative;
	    border-radius: 50%;
	}

	.oceanwp-about-me-name {
	    display: block;
	    font-size: 13px;
	    font-weight: 600;
	    margin: 16px 0 10px;
	    text-transform: uppercase;
	    clear: none;
	}

	.oceanwp-about-me-social {
	   	li {
		    display: inline-block;
		    margin-left: 6px;

		    &:first-child {
			    margin-left: 0;
			}

			a {
			    display: inline-block;
			    font-size: 14px;
			    text-align: center;
			    width: 40px;
			    height: 40px;
			    line-height: 40px;
	    		border-radius: 50%;
			}
		}

		&.style-color li a, &.style-color li a:hover {
		    color: #fff;
		}

		&.style-color li {
			&.facebook a {
			    background-color: #37589b;

			    &:hover {
				    background-color: #4e7ddd;
				}
			}

			&.twitter a {
			    background-color: #46d4fe;

			    &:hover {
				    background-color: #7ee1fe;
				}
			}

			&.google-plus a {
			    background-color: #de5a49;

			    &:hover {
				    background-color: #fc7a69;
				}
			}

			&.instagram a {
			    background-color: #5996c7;

			    &:hover {
				    background-color: #69b4f0;
				}
			}

			&.linkedin a {
			    background-color: #419cca;

			    &:hover {
				    background-color: #52c3fc;
				}
			}

			&.pinterest a {
			    background-color: #cb2027;

			    &:hover {
				    background-color: #f7555c;
				}
			}

			&.youtube a {
			    background-color: #dd4646;

			    &:hover {
				    background-color: #ff6262;
				}
			}
		}

		&.style-light li a {
		    color: #aaa;
    		border: 1px solid $border-color;
		}

		&.style-dark li a {
		    color: $color-4;
    		border: 1px solid $color-11;
		}

		&.style-light li, &.style-dark li {
			&.facebook a:hover {
			    color: #37589b;
    			border-color: #37589b;
			}

			&.twitter a:hover {
			    color: #46d4fe;
    			border-color: #46d4fe;
			}

			&.google-plus a:hover {
			    color: #de5a49;
    			border-color: #de5a49;
			}

			&.instagram a:hover {
			    color: #5996c7;
    			border-color: #5996c7;
			}

			&.linkedin a:hover {
			    color: #419cca;
    			border-color: #419cca;
			}

			&.pinterest a:hover {
			    color: #cb2027;
    			border-color: #cb2027;
			}

			&.youtube a:hover {
			    color: #dd4646;
    			border-color: #dd4646;
			}
		}
	}
}