/**
 * Sidebars and Widgets
 * ========================================================
 */


/************* Sidebars *************/

.sidebar { }


/************* Primary Sidebar *************/

#sidebar-primary {
	margin-top: @widgetMargin;
	line-height: @baseLineHeight; // reset line height for custom font size via admin panel
	.widget { margin: 0 0 @sidebarWidgetMargin; }
	.widget-title {
		font-size: @baseFontSize;
		font-family: inherit;
		font-weight: bold;
		font-weight: 800;
		text-transform: uppercase;
		margin-bottom: @verticalMargin;
	}
	.topborder-line, .bottomborder-line, .topborder-shadow, .bottomborder-shadow {
		margin-top: 0;
		margin-bottom: 0;
	}
}


/************* Widgets *************/

.widget { margin: @widgetMargin 0; }
.widget-title {
	font-size: @h6FontSize;
	margin-top: 0;
}


/************* Widget Borders *************/

.topborder-none {
	border-top: none;
	margin-top: 0;
}
.bottomborder-none {
	border-bottom: none;
	margin-bottom: 0;
}
.topborder-line {
	border-top: solid 1px @bgHighlightToneColor;
	// margin-top: -@widgetMargin;
}
.bottomborder-line {
	border-bottom: solid 1px @bgHighlightToneColor;
	// margin-bottom: -@widgetMargin;
}
.topborder-shadow:before,
.bottomborder-shadow:after {
	content: "\00a0";
	background: @contrastColor;
	display: block;
	width: 70px;
	font: 0/0 a;
	height: 3px;
	margin: 0 auto;
}


/************* WordPress Widgets *************/

/* Text */
.textwidget p:first-child { margin-top: 0; }


/************* CTA Widget *************/

.cta-widget {
	margin: 55px 0 45px;
	text-align: center;
}
.cta-headine {
	text-transform: uppercase;
	margin: 0 0 20px;
}
.cta-description {
	margin-top: 5px;
	font-size: @baseFontSizeBig;
	line-height: @baseLineHeight; // reset line height for custom font size for sidebar via admin panel
}
.cta-widget-button {
	width: 315px;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: @h6FontSize;
	text-transform: uppercase;
}


/************* Content Blocks Widget *************/

.content-blocks-widget { margin: @widgetMargin 0; }
.content-block-column { margin: 1em 0; }
.content-block-column.column-1-1 { padding-left: 0; padding-right: 0; }
.content-block { }
.content-block-visual { }
.content-block-icon {
	width: 55px;
	height: 55px;
	max-width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 30px;
	line-height: 55px;
	.transition( color 0.3s ease-in, background-color 0.3s linear; );
	a {
		color: inherit;
		display: block;
	}
}
.icon-style-none {
	line-height: 1em;
	width: auto;
	height: auto;
}
.icon-style-circle { .border-radius( 30px ); }
.icon-style-square { }
.content-block-icon .fa { }
.content-block-image { }
.content-block-content {
	padding-top: 15px;
	&.no-visual { padding-top: 0; }
	h4 {
		font-size: @h6FontSize;
		margin: 0;
		a { color: inherit; }
	}
	h4, p { margin: 0 0 5px; }
	.content-block-text { }
}

/*** Content Block Styles ***/

.content-block-style1, .content-block-style2, .content-block-style3 { text-align: center; }
/* Style1 */
/* Style2 */
.content-block-style2 {
	.content-block-column { margin-bottom: @widgetMargin / 2; }
	.content-block.no-highlight { text-align: left; }
	.content-block.contrast-typo { padding: 20px 20px 10px; }
	.content-block-icon { background: transparent; }
	.content-block-image { margin: -20px -20px 0 -20px; }
	.content-block-content h4 { font-weight: normal; }
	.content-block.contrast-typo .content-block-text { .opacity(60); }
}
/* Style3 */
.content-block-style3 {
	.content-block-column { margin-bottom: @widgetMargin / 2; }
	.content-block {
		border: solid 1px @bgHighlightToneColor;
		padding: 35px 12px 20px;
		position: relative;
		margin-top: 27px;
	}
	.content-block-icon {
		position: absolute;
		top: -27px;
		left: 50%;
		margin-left: -27px;
	}
	.content-block-content.no-visual { margin-top: -8px; }
}
/* Style4 */
.content-block-style4 {
	.content-block-icon {
		font-size: 25px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		float: left;
	}
	.content-block-icon.icon-style-none { font-size: 45px; }
	.content-block-icon .fa { left: 0; }
	.content-block-icon {
		width: 50px;
		float: left;
	}
	.content-block-image {
		width: 45%;
		float: left;
	}
	.content-block-content { padding-top: 0; }
	.content-block-content-hasicon { margin-left: 65px; }
	.content-block-content-hasimage { margin-left: 50%; }
	.content-block-content.no-visual { margin-left: 0; }
}


/************* Social Icons Widget *************/

.social-icons-widget {}
.social-icons-icon {
	display: inline-block;
	text-align: center;
	background: @bgHighlightToneColor;
	background: rgba(255,255,255,0.2);
	color: @baseFontColor + #222222;
	border: solid 1px @bgHighlightToneColor;
	vertical-align: top;
}
#footer a.social-icons-icon, #footer a.social-icons-icon:hover { color: inherit; }
.social-icons-small .social-icons-icon {
	width: 40px;
	height: 25px;
	font-size: 15px;
	line-height: 25px;
}
.social-icons-medium .social-icons-icon {
	width: 50px;
	height: 40px;
	font-size: 25px;
	line-height: 40px;
}
.social-icons-large .social-icons-icon {
	width: 70px;
	height: 60px;
	font-size: 40px;
	line-height: 60px;
}
.social-icons-huge .social-icons-icon {
	width: 85px;
	height: 75px;
	font-size: 50px;
	line-height: 75px;
}
.social-icons-widget {
	.social-icons-icon:hover { color: #ffffff; }
	.fa-behance-block:hover { background: #4176fa; border-color: #4176fa; }
	.fa-bitbucket-block:hover { background: #183f73; border-color: #183f73; }
	.fa-btc-block:hover { background: #f7931a; border-color: #f7931a; }
	.fa-codepen-block:hover { background: #000000; border-color: #000000; }
	.fa-delicious-block:hover { background: #0002f5; border-color: #0002f5; }
	.fa-deviantart-block:hover { background: #5e7163; border-color: #5e7163; }
	.fa-digg-block:hover { background: #1b5791; border-color: #1b5791; }
	.fa-dribbble-block:hover { background: #c6356b; border-color: #c6356b; }
	.fa-dropbox-block:hover { background: #0089d1; border-color: #0089d1; }
	.fa-envelope-block:hover { background: #e44321; border-color: #e44321; }
	.fa-facebook-block:hover { background: #3c5a98; border-color: #3c5a98; }
	.fa-flickr-block:hover { background: #0062dd; border-color: #0062dd; }
	.fa-foursquare-block:hover { background: #3ab6e8; border-color: #3ab6e8; }
	.fa-github-block:hover { background: #000000; border-color: #000000; }
	.fa-google-plus-block:hover { background: #e44321; border-color: #e44321; }
	.fa-instagram-block:hover { background: #3f729b; border-color: #3f729b; }
	.fa-lastfm-block:hover { background: #d2013b; border-color: #d2013b; }
	.fa-linkedin-block:hover { background: #00659b; border-color: #00659b; }
	.fa-pinterest-block:hover { background: #cf1d25; border-color: #cf1d25; }
	.fa-reddit-block:hover { background: #ff4500; border-color: #ff4500; }
	.fa-rss-block:hover { background: #ff6501; border-color: #ff6501; }
	.fa-skype-block:hover { background: #00aff0; border-color: #00aff0; }
	.fa-slack-block:hover { background: #352931; border-color: #352931; }
	.fa-slideshare-block:hover { background: #0ca8aa; border-color: #0ca8aa; }
	.fa-soundcloud-block:hover { background: #ff6600; border-color: #ff6600; }
	.fa-stack-exchange-block:hover { background: #205297; border-color: #205297; }
	.fa-stack-overflow-block:hover { background: #f47c23; border-color: #f47c23; }
	.fa-steam-block:hover { background: #000000; border-color: #000000; }
	.fa-stumbleupon-block:hover { background: #ee4723; border-color: #ee4723; }
	.fa-tumblr-block:hover { background: #3e5976; border-color: #3e5976; }
	.fa-twitch-block:hover { background: #6542a6; border-color: #6542a6; }
	.fa-twitter-block:hover { background: #32ccfe; border-color: #32ccfe; }
	.fa-vimeo-square-block:hover { background: #1bb6ec; border-color: #1bb6ec; }
	.fa-wordpress-block:hover { background: #3378b0; border-color: #3378b0; }
	.fa-yelp-block:hover { background: #c41200; border-color: #c41200; }
	.fa-youtube-block:hover { background: #d4231e; border-color: #d4231e; }
}



/*** Responsive Sidebar and Widgets ***/

@media only screen and (max-width: @breakPoint) {
	.content-block-style2 .content-block-image { margin: 0; }
}