HOME

/**
 * 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 a .owp-icon use, &.style-color li a:hover .owp-icon use {
		    stroke: #fff;
		}

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

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

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

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

			&.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;
				}
			}

			&.telegram a {
			    background-color: #0088cc;

			    &:hover {
				    background-color: #0da4f0;
				}
			}

			&.twitch a {
			    background-color: #6441a5;

			    &:hover {
				    background-color: #702cee;
				}
			}

			&.line a {
			    background-color: #00c300;

			    &:hover {
				    background-color: #09f309;
				}
			}

			&.xing a {
			    background-color: #006464;

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

			&.vine a {
			    background-color: #00bf8f;

			    &:hover {
				    background-color: #01906c;
				}
			}

			&.vimeo a {
			    background-color: #1ab7ea;

			    &:hover {
				    background-color: #1494bd;
				}
			}

			&.github a {
			    background-color: #60b044;

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

			&.flickr a {
			    background-color: #fa4086;

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

			&.yelp a {
			    background-color: #C41200;

			    &:hover {
				    background-color: #940f01;
				}
			}

			&.tripadvisor a {
			    background-color: #589442;

			    &:hover {
				    background-color: #426f32;
				}
			}

			&.rss a {
			    background-color: #ff7900;

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

			&.medium a {
			    background-color: #00ab6c;

			    &:hover {
				    background-color: #03945f;
				}
			}

			&.vk a {
			    background-color: #597BA5;

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

			&.dribbble a {
			    background-color: #ea4c89;

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

			&.tumblr a {
			    background-color: #2C4762;

			    &:hover {
				    background-color: #1d3042;
				}
			}

			&.tiktok a {
			    background-color: #000000;

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

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

			.owp-icon use {
				stroke: #aaa;
			}
		}

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

			.owp-icon use {
				stroke: $color-4;
			}
		}

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

				.owp-icon use {
					stroke: #37589b;
				}
			}

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

				.owp-icon use {
					stroke: #46d4fe;
				}
			}

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

				.owp-icon use {
					stroke: #5996c7;
				}
			}

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

				.owp-icon use {
					stroke: #419cca;
				}
			}

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

				.owp-icon use {
					stroke: #cb2027;
				}
			}

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

				.owp-icon use {
					stroke: #dd4646;
				}
			}

			&.telegram a:hover {
			    color: #0088cc;
				border-color: #0088cc;

				.owp-icon use {
					stroke: #0088cc;
				}
			}

			&.twitch a:hover {
				color: #6441a5;
				border-color: #6441a5;

				.owp-icon use {
					stroke: #6441a5;
				}
			}

			&.line a:hover{
			    color: #00c300;
				border-color: #00c300;

				.owp-icon use {
					stroke: #00c300;
				}
			}

			&.xing a:hover {
			    color: #006464;
				border-color: #006464;

				.owp-icon use {
					stroke: #006464;
				}
			}

			&.vine a:hover {
			    color: #00bf8f;
				border-color: #00bf8f;

				.owp-icon use {
					stroke: #00bf8f;
				}
			}

			&.vimeo a:hover {
			    color: #1ab7ea;
				border-color: #1ab7ea;

				.owp-icon use {
					stroke: #1ab7ea;
				}
			}

			&.github a:hover {
			    color: #60b044;
				border-color: #60b044;

			    .owp-icon use {
					stroke: #60b044;
				}
			}

			&.flickr a:hover {
			    color: #fa4086;
				border-color: #fa4086;

				.owp-icon use {
					stroke: #fa4086;
				}
			}

			&.yelp a:hover {
			    color: #C41200;
				border-color: #C41200;

				.owp-icon use {
					stroke: #C41200;
				}
			}

			&.tripadvisor a:hover {
			    color: #589442;
				border-color: #589442;

				.owp-icon use {
					stroke: #589442;
				}
			}

			&.rss a:hover {
			    color: #ff7900;
				border-color: #ff7900;

			    .owp-icon use {
					stroke: #ff7900;
				}
			}

			&.medium a:hover {
			    color: #00ab6c;
				border-color: #00ab6c;

				.owp-icon use {
					stroke: #00ab6c;
				}
			}

			&.vk a:hover {
			    color: #597BA5;
				border-color: #597BA5;

			    .owp-icon use {
					stroke: #597BA5;
				}
			}

			&.dribbble a:hover {
			    color: #ea4c89;
				border-color: #ea4c89;

				.owp-icon use {
					stroke: #ea4c89;
				}
			}

			&.tumblr a:hover {
			    color: #2C4762;
				border-color: #2C4762;

				.owp-icon use {
					stroke: #2C4762;
				}
			}

			&.tiktok a:hover {
			    color: #000000;
				border-color: #000000;

			    .owp-icon use {
				    stroke: #000000;
				}
			}
		}
	}
}