a {
  color: #1d9eda;
}
a:hover {
  color: #008fa1;
}
.sp-megamenu-parent >li.active>a,
.sp-megamenu-parent >li:hover>a {
  color: #1d9eda;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
  color: #1d9eda !important;
}
#offcanvas-toggler >i {
  color: #222;
}
#offcanvas-toggler >i:hover {
  color: #e6e6e6;
}
.btn-primary,
.sppb-btn-primary {
  background-color: #1d9eda;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.sppb-btn-primary:hover,
.sppb-btn-primary:focus,
.sppb-btn-primary:active {
  color: #fff;
  background-color: #008fa1;
  border-color: #00343b;
}
.btn-secondary,
.sppb-btn-secondary {
  background-color: #0088CC;
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.sppb-btn-secondary:hover,
.sppb-btn-secondary:focus,
.sppb-btn-secondary:active {
  color: #fff;
  background-color: #006699;
  border-color: #002233;
}
.btn-danger,
.sppb-btn-danger {
  background-color: #E98D2B;
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.sppb-btn-danger:hover,
.sppb-btn-danger:focus,
.sppb-btn-danger:active {
  color: #fff;
  background-color: #cc7315;
  border-color: #6f3f0c;
}
.btn-info,
.sppb-btn-info {
  background-color: #00a4b0;
  color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.sppb-btn-info:hover,
.sppb-btn-info:focus,
.sppb-btn-info:active {
  background-color: #00747d;
}
ul.social-icons >li a:hover {
  color: #1d9eda;
}
.sp-page-title {
  background: #f3f3f3;
}
.layout-boxed .body-innerwrapper {
  background: #ffffff;
}
.sp-module ul >li >a {
  color: #727272;
}
.sp-module ul >li >a:hover {
  color: #1d9eda;
}
.sp-module .latestnews >div >a {
  color: #727272;
}
.sp-module .latestnews >div >a:hover {
  color: #1d9eda;
}
.sp-module .tagscloud .tag-name:hover {
  background: #1d9eda;
}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
  background: #1d9eda;
  color: #fff;
}
.search .btn-toolbar button {
  background: #1d9eda;
}
.post-format {
  background: #1d9eda;
  display: none;
}
.voting-symbol span.star.active:before {
  color: #1d9eda;
}
.sp-rating span.star:hover:before,
.sp-rating span.star:hover ~ span.star:before {
  color: #008fa1;
}
.entry-link,
.entry-quote {
  background: #1d9eda;
}
blockquote {
  border-color: #1d9eda;
}
.carousel-left:hover,
.carousel-right:hover {
  background: #1d9eda;
}
#sp-footer {
  background: #1d9eda;
}
.sp-comingsoon body {
  background-color: #1d9eda;
}
.pagination>li>a,
.pagination>li>span {
  color: #727272;
}
.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
  color: #727272;
}
.pagination>.active>a,
.pagination>.active>span {
  border-color: #1d9eda;
  background-color: #1d9eda;
}
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
  border-color: #1d9eda;
  background-color: #1d9eda;
}





$color-one: #2c3e50;
$btn-colors: (
	"green": "#2ecc71",
	"blue": "#3498db",
	"purple": "#9b59b6",
	"navy": "#34495e",
	"orange": "#e67e22",
	"red": "#e74c3c"
);

// extenders
.animate {
	transition: all 0.3s;
}

/* Main Styles */
.main-container {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 0 15px;
}

h1 {
	line-height: 1;
	padding: 25px 0;
	border-bottom: 1px solid $color-one;
	font-size: 35px;
	color: $color-one;
	text-align: center;
}

section {
	padding: 60px 0 61px;
	text-align: center;
	position: relative;

	h2 {
		margin-bottom: 15px;
		font-weight: normal;
		font-size: 17px;
		color: #D2D2D2;
		text-align: center;
	}

	&:not(:last-child):after {
		content: '';
		width: 70%;
		height: 1px;
		border-bottom: 1px dashed $color-one;
		opacity: .5;
		position: absolute;
		bottom: -1px;
		left: 15%;
	}
}
.bottom3 {
	padding: 60px 0 61px;
	position: relative;
	font-size: 14px;
	vertical-align: middle;
   }
.btn {
	display: inline-block;
	line-height: 35px;
	margin: 8px;
	padding: 0 15px;
	font-size: 15px;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	@extend .animate;
}

.btn-border-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;

	&:before, &:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}

	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		left: 0;
		transition-delay: 0.05s;
	}

	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		top: 0;
		left: -1px;
	}

	&:hover {
		&:before {
			width: 100%;
		}

		&:after {
			height: 100%;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				border-color: #{$hex};
			}

			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;

	&:before, &:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}

	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		left: 0;
		transition-delay: 0.05s;
	}

	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		top: 0;
		left: -1px;
	}

	&:hover {
		background-color: transparent;

		&:before {
			width: 100%;
		}

		&:after {
			height: 100%;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				border-color: #{$hex};
			}

			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border-rev-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;

	&:before, &:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}

	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		right: 0;
		transition-delay: 0.05s;
	}

	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		bottom: 0;
		left: -1px;
	}

	&:hover {
		&:before {
			width: 100%;
		}

		&:after {
			height: 100%;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				border-color: #{$hex};
			}

			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border-rev {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;

	&:before, &:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}

	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		right: 0;
	}

	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		bottom: 0;
		left: -1px;
		transition-delay: 0.05s;
	}

	&:hover {
		background-color: transparent;

		&:before {
			width: 100%;
		}

		&:after {
			height: 100%;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				border-color: #{$hex};
			}

			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-fill-vert-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	overflow: hidden;

	&:before, &:after {
		content: '';
		width: 100%;
		height: 0;
		opacity: 0;
		position: absolute;
		left: 0;
		z-index: -1;
		@extend .animate;
	}

	&:before {
		top: 50%;
	}

	&:after {
		bottom: 50%;
	}

	&:hover {
		color: #fff;

		&:before, &:after {
			height: 50%;
			opacity: 1;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				background-color: #{$hex};
			}

			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-vert {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	overflow: hidden;

	&:before, &:after {
		content: '';
		width: 100%;
		height: 0;
		opacity: 0;
		position: absolute;
		left: 0;
		z-index: -1;
		@extend .animate;
	}

	&:before {
		top: 50%;
	}

	&:after {
		bottom: 50%;
	}

	&:hover {
		color: #fff;

		&:before, &:after {
			height: 50%;
			opacity: 1;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				background-color: #{$hex};
			}

			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-horz-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	overflow: hidden;

	&:before, &:after {
		content: '';
		width: 0;
		height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: -1;
		@extend .animate;
	}

	&:before {
		left: 50%;
	}

	&:after {
		right: 50%;
	}

	&:hover {
		color: #fff;

		&:before, &:after {
			width: 50%;
			opacity: 1;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				background-color: #{$hex};
			}

			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-horz {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	overflow: hidden;

	&:before, &:after {
		content: '';
		width: 0;
		height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: -1;
		@extend .animate;
	}

	&:before {
		left: 50%;
	}

	&:after {
		right: 50%;
	}

	&:hover {
		color: #fff;

		&:before, &:after {
			width: 50%;
			opacity: 1;
		}
	}

	@each $name, $hex in $btn-colors {
		&.btn-#{$name} {
			&:before, &:after {
				background-color: #{$hex};
			}

			&:hover {
				border-color: #{$hex};
			}
		}
	}
}