#ss-addons {
	.ss-row {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: stretch;
	}

	.ss-col-4 {
		display: flex;
		margin-bottom: 30px;
	}

	.ss-col-4 {
		display: flex;
		margin-bottom: 30px;
	}

	.notice {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.notice:first-child {
		margin-top: 0 !important;
	}
	
	.ss-addon {
		@extend %flex;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 6px;
		overflow: hidden;
		box-sizing: border-box;
		border: $border_standard;
		background-color: #fff;
		position: relative;
	}

	.ss-addon-header {
		@extend %flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		margin-top: 0;

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.ss-addon-description {
		padding: 25px 35px;

		p {
			margin-bottom: 0;
		}
	}

	h5 {
		font-size: 16px;
		margin: 0;
	}

	.ss-addon-footer {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: auto;
		background-color: #f8f8f9;
		padding: 10px 25px;
		font-size: 12px;

		strong {
			padding-right: 3px;
		}

		&.ss-upgrade {
			.ss-addon-action {
				.spinner {
					display: none;
				}

				.ss-button:hover,
				.ss-button:focus {
					background-color: $upgrade_color;
					border-color: $upgrade_color;
				}
			}
		}

		.ss-addon-action {
			display: inline-block;
			float: right;
			margin-left: auto;

			.spinner {
				float: none;
				margin: 0 10px 0;

				&.visible {
					visibility: visible;
					opacity: 1;
				}
			}
		}

		.ss-button {
			padding: 10px 15px;
			font-size: 13px;
			border-color: #ddd;
			color: #666;

			&:hover,
			&:focus,
			&:active {
				color: #FFF;
				border-color: $primary_color;
			}
		}

		&.active-addon {
			.ss-addon-status {
				color: $upgrade_color;
			}

			.ss-button {
				border-color: $primary_gradient;
				color: $primary_gradient;

				&:hover {
					background-color: $primary_gradient_hover;
					border-color: $primary_gradient_hover;
					color: #FFF;
				}
			}
		}

		&.inactive-addon {
			.ss-addon-status {
				color: $primary_gradient;
			}

			.ss-button {
				background-color: $primary_color;
				border-color: $primary_color;
				color: #FFF;

				&:hover {
					background-color: $primary_color_hover;
					border-color: $primary_color_hover;
				}
			}
		}

		.ss-addon-status {
			color: #999;
		}

	}
}

#upgrade-to-enable-addons,
.socialsnap-addons-notice {

	border-left-color: $upgrade_color;

	strong {
		display: block;
		margin-bottom: 8px;
	}

	.ss-button {
		margin-top: 16px;
		color: #FFF;
		padding: 12px 20px;
		font-size: 13px;
	}
}

/*****************************************/
/* Media queries
/*****************************************/

@media screen and (max-width: 1660px) {
	#ss-addons {
		.ss-col-4 {
			width: 33.33%;
		}
	}
}

@media screen and (max-width: 1200px) {
	#ss-addons {
		.ss-col-4 {
			width: 50%;
		}
	}
}

@media screen and (max-width: 960px) {
	#ss-addons {
		.ss-col-4 {
			width: 100%;
		}
	}

	.heading-title > a {
		line-height: 1.2;
		padding: 12px;
		text-align: center;
	}
}

@media screen and (max-width: 783px) {

	.auto-fold #wpcontent {
		padding-left: 0;
	}

}

@media screen and (max-width: 600px) {
	#socialsnap-header {
		top: 46px;
	}
}

@media screen and (max-width: 520px) {
	#ss-addons {
		.ss-addon {
			.ss-addon-header {
				flex-direction: column;

				.ss-addon-description {
					text-align: center;
					border: none;
					padding-left: 0;
					margin-left: 0;
				}

				h5 {
					margin-top: 2em;
				}
			}

			.ss-addon-footer .ss-addon-action {
				float: none;
				margin: 0 auto;
			}

			.ss-addon-status,
			.spinner,
			.ss-addon-footer strong {
				display: none;
			}
		}
	}
}