/**
 * @package Helix Framework
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2014 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

@import 'variables';
@import 'mixins';

body {
	color: @text_color;
}

// Anchor
a{
	color: @major_color;
	&:hover {
		color: darken(@major_color, 10%);
	}
}

// Megamenu 
.sp-megamenu-parent {
	>li {
		box-shadow: 0 -2px 0 0 transparent inset;
		-webkit-transition: all 400ms ease;
		transition: all 400ms ease;
		&.active,
		&:hover {
			box-shadow: 0 -2px 0 0 @major_color inset;
		}
		a {
			color: lighten(@text_color,35%);
		}
		&.active>a,
		&:hover>a {
			color: @major_color;
		}
	}

	.sp-dropdown {
		li.sp-menu-item {
			>a {
				color: lighten(@text_color,25%);
				border-radius: 5px;
				&:hover {
					background: @major_color;
				}
			}
			&.active>a {
				color: @major_color;
			}
		}
	}

}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.sp-group-title,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item span.sp-group-title {
	color: lighten(@text_color,45%);
	border-bottom: 1px solid lighten(@text_color,65%);
	border-radius: 0px;
	&:hover {
		color: @text_color;
		background: transparent;
	}
}

// Off Canvas
#offcanvas-toggler {
	>i {
		color: lighten(@text_color,35%);
		&:hover {
			color: @major_color;
		}
	}
}

.offcanvas-menu {
	background: @text_color;
}

//Button
.btn-primary,
.sppb-btn-primary {
	border-color: darken(@major_color, 6%);
	background-color: @major_color;

	&:hover,
	&:focus {
		border-color: darken(@major_color, 15%);
		background-color: darken(@major_color, 10%);
	}
}

// Toolbar
#sp-toolbar {
	color: #fff;
	background: @text_color;
}

ul.sp-contact-info,
ul.social-icons {
	>li {
		a {
			color: #fff;
			&:hover {
				color: @major_color;
			}
		}
	}
}

// Page Title
.sp-page-title {
	background: lighten(@text_color,65%);
    h2, h3 {
        color: lighten(@text_color,35%);
    }
    .breadcrumb {
        >.active {
            color: lighten(@text_color,25%);
        }
        >span, >li, >li+li:before, >li>a {
            color: lighten(@text_color,35%);
        }
    }
}

.sp-page-title .breadcrumb {
	float: right;
	margin: -23px 0 0 0;
}

// Feature Section
#sp-feature {
	background: lighten(@text_color,65%);
}

// Top Sections
#sp-top-b {
	color: #fff;
	background: @major_color;
	a {
		color: #fff;
		&:hover {
			color: @text_color;
		}
	}
	.sp-module.title1 .sp-module-title::after,
	.sp-module.title2 .sp-module-title::after {
		background: #fff;
	}
}

// User Section
#sp-user-section {
	background: lighten(@text_color,65%);
}

// Body Innerwrapper

.layout-boxed .body-innerwrapper {
	background: @bg_color;
}

// Module
.sp-module {
	ul {
		>li {
			>a {
				color: @text_color;
				&:hover {
					color: @major_color;
				}
			}
		}
	}

	.latestnews {
		>div {
			>a {
				color: @text_color;
				&:hover {
					color: @major_color;
				}
			}
		}
	}

	.tagscloud {
		.tag-name {
			&:hover {
				background: @major_color;
			}	
		}
	}
}

// Module Variations
.sp-module {
	&.title1 {
		.sp-module-title {
			&::after {
				content: "";
				background: @major_color;
				display: block;
				position: relative;
				width: 90px;
				height: 1px;
				z-index: 1;
				margin: 30px 0;
			}
		}
	}

	&.title2 {
		.sp-module-title {
			text-align:center;
			&::after {
				content: "";
				background: @major_color;
				display: block;
				position: relative;
				width: 90px;
				height: 1px;
				z-index: 1;
				margin: 30px auto;
			}
		}
	}

	&.title3 {
		.sp-module-title {
			&::after {
				content: "";
				background: @text_color;
				display: block;
				position: relative;
				width: 90px;
				height: 1px;
				z-index: 1;
				margin: 30px 0;
			}
		}
	}
	
	&.title4 {
		.sp-module-title {
			&::after {
				content: "";
				background: @major_color;
				display: block;
				position: relative;
				width: 100%;
				height: 1px;
				z-index: 1;
				margin: 30px 0;
			}
		}
	}

	&.title5 {
		.sp-module-title {
			&::after {
				content: "";
				background: lighten(@text_color,65%);
				display: block;
				position: relative;
				width: 100%;
				height: 1px;
				z-index: 1;
				margin: 30px 0;
			}
		}
	}
	
	&.title6 {
		.sp-module-title {
			color: #fff;
			background: @major_color;
			border-radius: 5px;
			padding: 20px;
		}
	}

	&.title7 {
		background: transparent;
		color: @text_color;
		border: 2px solid @text_color;
		padding: 35px;
		border-radius: 5px;
	}

	&.title8 {
		background: @major_color;
		color: #fff;
		padding: 35px;
		border-radius: 5px;
		.sp-module-title {
			color: #fff;
		}
		em,
		a {
			color: @text_color !important;
			&:hover {
				color: #fff !important;
			}
		}
	}

	&.title9 {
		background: @text_color;
		padding: 50px 0;
		color: #fff;
		padding: 35px;
		border-radius: 5px;
		.sp-module-title {
			color: #fff;
		}
		a {
			color: @major_color;
			&:hover {
				color: #fff;
			}
		}
	}
}

// sp Simple Portfolio
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
	background: @major_color;
}

// Search
.search {
	.btn-toolbar {
		button {
			background: @major_color;
		}
	}
}

.badge {
	background: @text_color;
	border: 0px;
}


// Blog
.post-format {
	background: @major_color;
}

.voting-symbol{
	span.star.active:before{
		color: @major_color;
	}
}

.sp-rating {
	span.star:hover:before,
	span.star:hover ~ span.star:before {
		color: darken(@major_color, 10%);
	}
}

.entry-header {
	.article-info > dd, h2, .h2 {
		color: @text_color;
	}
}

.article-info {
	margin: 10px 0;
	padding: 10px 0;
	border-top: 1px solid lighten(@text_color,55%);
	border-bottom: 1px solid lighten(@text_color,55%);
	 > dd {
		color: @text_color;
	}
}

.custom_date {
	color: #fff;
	display: inline-block;
	background: @major_color;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	float: left;
	margin-right: 10px;
	.day {
		font-size: 20px;
		font-weight: 700;
	}
	.month {
		margin-top: -5px;
	}
	.year {
		margin-top: -5px;
		letter-spacing: -1px;
	}
}

.readmore {
    .btn-default {
    	color: @text_color;
    	border-radius: 0px;
        &:hover {
            color: @major_color;
        }
    }
}

.pager li > a, .pager li > span {
	color: lighten(@text_color,45%);
	border: 0px;
	border-radius: 0px;
	padding: 0px;
	&:hover, &:focus {
		color: @major_color;
		background: transparent;
	}
}

.pager {
	.previous, .next {
		[class^="icon-"], [class*=" icon-"] {
			font-size: 10px;
		}
	}
	margin-bottom: 0px;
}

.entry-link,
.entry-quote {
	background: @major_color;
}

blockquote {
	border-color: @major_color;
}

.carousel-left,
.carousel-right {

	&:hover {
		background: @major_color;
	}
}

.pagination > li > a:hover {
    background: lighten(@text_color,65%);
}

// Position A
#sp-position-a {
	background: lighten(@text_color,65%);
}

// Position C
#sp-position-c {
	color: #fff;
	background: @major_color;
	a {
		color: #fff;
		&:hover {
			color: @text_color;
		}
	}
	.sp-module.title1 .sp-module-title::after,
	.sp-module.title2 .sp-module-title::after {
		background: #fff;
	}
}

// Bottom Sections
#sp-bottom {
	color: #fff;
	background: @major_color;
	a {
		color: #fff;
		&:hover {
			color: @text_color;
		}
	}
	.sp-module.title1 .sp-module-title::after,
	.sp-module.title2 .sp-module-title::after {
		background: #fff;
	}
}
#sp-bottom-b {
	&::after {
		content: "";
		display: block;
		position: relative;
		max-width: 1140px;
		margin: 70px auto -70px;
		height: 1px;
		background: darken(@text_color,5%);
		z-index: 99;
	}
}

#sp-bottom-b,
#sp-bottom-c {
	color: #fff;
	background: @text_color;
	a {
		color: #fff;
		&:hover {
			color: @major_color;
		}
	}
	.sp-module-title {
		font-size: 24px;
		font-weight: 400;
	}
	p {
		margin-bottom: 0px;
	}
	hr {
		border-color: darken(@text_color,5%);
	}
}

// Footer
#sp-footer {
	color: fade(#fff, 35%);
	background: darken(@text_color,5%);
	a {
		color: #fff;
		&:hover {
			color: @major_color;
		}
	}
}

// Comingsoon
.sp-comingsoon body {
	background-color: @major_color;
}

// Pagination 
.pagination>li>a,
.pagination>li>span {
	color: @text_color;
	&:hover,
	&:focus {
		color: @text_color;
	}
}

.pagination>.active>a,
.pagination>.active>span {
	border-color: @major_color;
	background-color: @major_color;
	&:hover,
	&:focus {
		border-color: @major_color;
		background-color: @major_color;
	}
}

//To Top
.scrollup {
	background: fade(@major_color,35%);
	border: 0px;
	border-radius: 50%;
	&:hover {
		background: @major_color;
	}
}

.scrollup::before {
	color: #fff;
}

//UIKit
.uk-block {
	border-radius: 5px;
}

.uk-block-secondary {
	background: darken(@text_color,5%);
}

.uk-button {
	color: #fff !important;
	font-size: 14px;
	padding: 5px 20px;
	background: @text_color;
	border-radius: 5px;
	border: 0px;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: all 0.4s ease-in-out 0s;
	&:hover,
	&:focus {
		background: lighten(@text_color,8%);
	}
}

.uk-badge-primary,
.uk-button-primary {
	background: @major_color;
	border: 0px;
	&:hover,
	&:focus {
		background: lighten(@major_color,8%);
	}
}

.uk-button-inverted {
  color: #fff !important;
  background: transparent;
  border: 1px solid #ffffff;
  &:hover,
  &:focus {
    color: @text_color !important;
    background: #fff;
    border: 1px solid #ffffff;
  }
}

.uk-button-mini {
  font-size: 10px;
}

.uk-button-large {
  font-size: 18px;
  padding: 15px 35px;
}

.uk-button-primary,
.uk-button-success,
.uk-button-danger {
  box-shadow: none;
  text-shadow: none;
}

.uk-badge-success,
.uk-button-success {
  color: #fff;
  background: #27ae60;
  border: 1px solid #27ae60;
  &:hover,
  &:focus {
    background: fade(#27ae60,80%);
    border: 1px solid #27ae60;
  }
}

.uk-badge-danger,
.uk-button-danger {
  color: #fff;
  background: #e74c3c;
  border: 1px solid #e74c3c;
  &:hover,
  &:focus {
    background: fade(#e74c3c,80%);
    border: 1px solid #e74c3c;
  }
}

.uk-badge-warning,
.uk-button-warning {
  color: #fff;
  background: #f39c12;
  border: 1px solid #f39c12;
  &:hover,
  &:focus {
    background: fade(#f39c12,80%);
    border: 1px solid #f39c12;
  }
}

.uk-icon-button {
  color: #fff;
  background: @major_color;
  border-radius: 5px;
  border: 0px;
  text-shadow: none !important;
  &:hover {
    color: #fff;
    background: @text_color;
  }
  &.uk-button-inverted {
    color: #fff !important;
    background: transparent;
    border: 1px solid #ffffff;
    &:hover,
    &:focus {
      color: @text_color !important;
      background: #fff;
      border: 1px solid #ffffff;
    }
  }
}

.uk-badge {
	padding: 5px 8px;
	border-radius: 5px;
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}

.uk-badge-notification {
	border-radius: 50%;
	padding: 5px 12px;
}

.uk-badge-percent {
	color: @text_color;
	background: transparent;
	border: 1px solid @text_color;
}

.uk-text-primary {
	color: @major_color !important;
}

.uk-text-default {
	color: @text_color;
}

.uk-progress-bar {
	background: @major_color;
}

.uk-progress-warning .uk-progress-bar {
	background: #f39c12;
}

.uk-progress-danger .uk-progress-bar {
	background: #e74c3c;
}

.uk-progress-success .uk-progress-bar {
	background: #27ae60;
}

.uk-modal, .uk-offcanvas {
	z-index: 10000;
}

.uk-offcanvas-bar {
	color: #fff;
	background: @text_color;
}

.uk-offcanvas .uk-panel {
	color: #fff;
	text-shadow: 0px;
}

.uk-lightbox-content {
	border-radius: 5px;
	img {
		border-radius: 5px;
	}
}

.uk-modal-dialog-lightbox {
	border-radius: 5px;
}

// RokSprocket
.sprocket-lists .sprocket-lists-title .indicator {
  color: lighten(@text_color,35%);
  border: 2px solid @major_color;
}

.sprocket-lists-title .indicator:before {
  background: lighten(@text_color,55%);
 }

.sprocket-lists-item {
	border: 0px !important;
	border-left: 2px dashed @major_color !important;
}

.active .sprocket-lists-title {
	color: @major_color !important;
	.indicator:before {
		background: @text_color;
	}
}

.sprocket-lists-title {
	color: lighten(@text_color,35%) !important;
	background: transparent !important;
	border: 0 !important;
}
.sprocket-lists-title:hover {
    color: @major_color !important;
    .indicator:before {
    	background: @text_color;
    }
}

.sprocket-lists-container li {
	margin-bottom: 10px !important;
}

.sprocket-lists {
  .readon {
      display: none;
  }
}

.sprocket-strips-item {
	background: darken(@text_color,5%);
	.sprocket-strips-text {
		color: lighten(@text_color,40%);
		margin-top: 10px;
	}
}

.strips-infos .date {
	background: @major_color;
	.day {
		font-size: 20px;
		font-weight: 700;
	}
	.month {
		margin-top: -5px;
	}
	.year {
		margin-top: -5px;
		letter-spacing: -1px;
	}
}

.sprocket-strips-title {
	margin-bottom: 0px;
}

.sprocket-strips-content {
	hr {
		margin-top: 10px;
		margin-bottom: 10px;
		border-color: lighten(@text_color,50%);
	}
}

.sprocket-quotes-item {
	.uk-grid > * {
		&:first-child {
			padding-left: 0px;
		}
	}
}

.sprocket-mosaic-g-overlay .css-loader-wrapper,
.sprocket-strips-overlay .css-loader-wrapper,
.sprocket-strips-s-overlay .css-loader-wrapper,
.sprocket-strips-p-overlay .css-loader-wrapper,
.sprocket-quotes-overlay .css-loader-wrapper,
.sprocket-mosaic-overlay .css-loader-wrapper  {
  background: fade(@major_color,50%) !important;
  border-radius: 50% !important;
}

.sprocket-lists-arrows .arrow,
.sprocket-strips-p-arrows .arrow,
.sprocket-strips-s-arrows .arrow,
.sprocket-strips-arrows .arrow,
.sprocket-quotes-arrows .arrow {
  color: #fff !important;
  background: @major_color !important;
  border-radius: 5px !important;
  border-color: transparent !important;
}

.sprocket-lists-pagination li,
.sprocket-strips-s-pagination li,
.sprocket-quotes-pagination li {
  border-radius: 50px !important;
  background: @major_color !important;
  padding: 6px !important;
}

.sprocket-tables-block .sprocket-tables-price {
  color: @text_color !important;
}
.sprocket-tables-block .sprocket-tables-title a {
  color: @text_color !important;
  [class*="uk-icon-"] {
    color: rgba(0,0,0,0.4) !important;
  }
}

.sprocket-tables-block:hover .sprocket-tables-title a {
  [class*="uk-icon-"] {
    color: @major_color !important;
  }
}

.sprocket-tables-block .readon {
  color: #fff !important;
  background: @major_color !important;
  border-radius: 5px !important;
  padding: 15px 25px !important;
  &:hover {
    background: lighten(@major_color,10%) !important;
  }
}

.sprocket-tables-image {
  padding: 25px 25px 0px 25px;
}

.sprocket-mosaic-item {
	border: 0px solid lighten(@text_color,67%);
}

.sprocket-mosaic-head {
	.sprocket-mosaic-title {
		margin-top: 15px;
	}
}

.sprocket-mosaic-image {
	border-radius: 5px;
}

.sprocket-mosaic .sprocket-mosaic-tags li, #main .sprocket-mosaic ul.sprocket-mosaic-tags li {
	color: @text_color !important;
	border: 1px solid lighten(@text_color,67%);
	background: transparent;
}

#main .sprocket-mosaic .sprocket-mosaic-filter ul li,
.sprocket-mosaic .sprocket-mosaic-filter li,
#main .sprocket-mosaic .sprocket-mosaic-order ul li,
.sprocket-mosaic .sprocket-mosaic-order li {
  color: #fff;
  font-size: 13px;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  border: 1px solid lighten(@text_color,55%) !important;
  transition: all 0.4s ease-in-out 0s;
  background: lighten(@text_color,55%) !important;
}

#main .sprocket-mosaic .sprocket-mosaic-filter ul li:hover,
.sprocket-mosaic .sprocket-mosaic-filter li:hover,
#main .sprocket-mosaic .sprocket-mosaic-filter ul li.active,
.sprocket-mosaic .sprocket-mosaic-filter li.active,
#main .sprocket-mosaic .sprocket-mosaic-order ul li:hover,
.sprocket-mosaic .sprocket-mosaic-order li:hover,
#main .sprocket-mosaic .sprocket-mosaic-filter ul li:focus,
.sprocket-mosaic .sprocket-mosaic-filter li:focus,
#main .sprocket-mosaic .sprocket-mosaic-order ul li:focus,
.sprocket-mosaic .sprocket-mosaic-order li:focus,
#main .sprocket-mosaic .sprocket-mosaic-order ul li.active,
.sprocket-mosaic .sprocket-mosaic-order li.active {
  color: #fff;
  background: @major_color !important;
  border-color: @major_color !important;
  transition: all 0.4s ease-in-out 0s;
}

#main .sprocket-mosaic .sprocket-mosaic-g-order ul li,
.sprocket-mosaic .sprocket-mosaic-g-order li,
#main .sprocket-mosaic .sprocket-mosaic-g-filter ul li,
.sprocket-mosaic .sprocket-mosaic-g-filter li {
  color: fade(@text_color,50%) !important;
  font-size: 13px  !important;
  padding: 5px 10px  !important;
  border-radius: 4px !important;
  background: transparent;
  transition: all 0.4s ease-in-out 0s;
}

.sprocket-mosaic-g-filter li.active, .sprocket-mosaic-g-order li.active {
  background: @major_color !important;
  color: #fff !important;
}

.sprocket-mosaic-hovercontent {
  transition: all 0.4s ease-in-out 0s !important;
}
.sprocket-mosaic .sprocket-mosaic-item .sprocket-mosaic-hovercontent:hover {
  background: fade(@major_color,50%) !important;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

// Typography
blockquote {
	border-color: @major_color;
}

.sp-dropcap{
	overflow:hidden;
	&:first-letter {
		color: #fff;
		background: @major_color;
		display:block;
		float:left;
		font-size:65px;
		line-height:50px;
		padding:20px;
                margin-right: 10px;
                margin-top: 5px;
		border-radius: 5px;

        }
}

b, strong {
  color: @major_color;
}

em {
	color: lighten(@text_color,35%);
}

strong {
  font-weight: 700;
}

.mark, mark {
	color: @text_color;
	background: fade(@text_color,15%);
}

.blockquote-pc {
  color: lighten(@text_color,35%);
  font-size: 24px;
  line-height: 36px;
  padding: 20px 0;
  font-family: Cabin,sans-serif;

  &::before {
    content: "\f10d";
    font-family: FontAwesome;
    font-size: 36px;
    display: inline-block;
    position: relative;
    margin-right: 15px;
    top: 5px !important;
  }
}

.blockquote-pc2 {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  padding: 25px;
  background: @major_color;
  border-radius: 5px;

  &::before {
    content: "\f0f6";
    font-family: FontAwesome;
    display:block;
    float:left;
    font-size:65px;
    font-weight: normal;
    line-height:50px;
    margin-right: 30px;
    margin-top: 5px;
    border-radius: 5px;
  }
}

// SP Page Builder
.sppb-text-center {
	h3.sppb-addon-title {
		&::after {
			content: "";
			background: @major_color;
			display: block;
			position: relative;
			width: 90px;
			height: 1px;
			z-index: 1;
			margin: 30px auto;
		}
	}
	&.invert-title {
		h3.sppb-addon-title {
			&::after {
				background: #fff;
			}
		}
	}
}

.sppb-text-left {
	h3.sppb-addon-title {
		&::after {
			content: "";
			background: @major_color;
			display: block;
			position: relative;
			width: 90px;
			height: 1px;
			z-index: 1;
			margin: 30px 0;
		}
	}
	&.invert-title {
		h3.sppb-addon-title {
			&::after {
				background: #fff;
			}
		}
	}
}

.sppb-progress-bar-primary {
	background: @major_color;
}

.sppb-btn-default {
	color: @text_color;
	border-radius: 5px;
	border: 1px solid @text_color;
	background: transparent;
	&:hover {
		color: #fff;
		background: @text_color;
	}
}

.sppb-pricing-box {
	border-radius: 5px;
}

.sppb-pricing-featured {
	.sppb-btn-primary {
		color: #fff;
		border-radius: 5px;
		border: 1px solid #fff;
		background: transparent;
		&:hover {
			color: @text_color;
			background: #fff;
		}
	}
}

.sppb-addon-image-overlay-icon {
	background: fade(@major_color,75%);
	&:hover {
		background: @major_color;
	}
}

.sppb-person-name {
	color: @major_color;
	margin-top: 20px;
}

.sppb-addon-persion .sppb-person-social li {
	a {
		color: lighten(@text_color,45%);
		&:hover {
			color: @major_color;
		}
	}
}

.mfp-bg {
	z-index: 10042;
}

.mfp-wrap {
	z-index: 10043
}