/* ==============================================================

Template name : Sugan modern software landing page v1.0.0
Categorie : Landing page
Author : Nce18cex
Version : v1.0.0
Created : 06 July 2015
Last update : 20 July 2015

-----------------------------------------------------------------
CSS structure
-----------------------------------------------------------------

00. Base Css
01. Home
03. Intro
04. Description
05. Features
06. Pricing table
07. Contact
08. Blog
09. Aside
10. Footer
20. Social Link
28. Custom min top spacer
29. Custom top spacer
30. Custom bottom spacer
31. Custom left spacer
32. Custom right spacer
33. Custom responsive
	
============================================================== */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

/* 
Base Css
=========================== */
body {
	font-family: 'Roboto', sans-serif;

	font-size: 18px;
	color: #a2b0ba;
	line-height: 18px;
}
a {
	color: #17c4bb;
}
h1, h2, h3, h4, h5, h6 {
     color: #3a5062;
}
h3 {
	font-size: 30px;
}
ul {
	padding: 0
}
p {
	line-height: 1.5em;
}
.auto {
	margin-right: auto;
	margin-left: auto;
}
.w-50 {
	width: 50%;
}
.w-75 {
	width: 75%;
}
b, strong {
    font-weight: 500;
}
/*
Color
=========================== */
.static-nav-collapse .navbar-nav > li > a:hover,
.top-nav-collapse .navbar-nav > li > a:hover,
.static-nav-collapse .navbar-nav > li > a:active,
.top-nav-collapse .navbar-nav > li > a:active,
.static-nav-collapse .navbar-nav > li > a:focus,
.top-nav-collapse .navbar-nav > li > a:focus,
.static-nav-collapse  .navbar-nav li a.selected,
.static-nav-collapse .navbar-nav .active a,
.static-nav-collapse .navbar-nav .dropdown.active a,
.static-nav-collapse .navbar-nav .active a:hover,
.static-nav-collapse .navbar-nav .dropdown.active a:hover,
.static-nav-collapse .navbar-nav .active a:focus,
.static-nav-collapse .navbar-nav .dropdown.active a:focus,
.top-nav-collapse .navbar-nav li a.selected,
.top-nav-collapse .navbar-nav .active a,
.top-nav-collapse .navbar-nav .dropdown.active a,
.top-nav-collapse .navbar-nav .active a:hover,
.top-nav-collapse .navbar-nav .dropdown.active a:hover,
.top-nav-collapse .navbar-nav .active a:focus,
.top-nav-collapse .navbar-nav .dropdown.active a:focus
{
	color:#20c3c4;
}


.heading {
}
.heading span {
	background-color: #CDCDCD;
    display: block;
    margin: 40px 0;
    width: 100px;
    height: 3px;
}
.heading.text-center span {
	margin: 30px auto;
}
.dark-section {
    background: #f6f6f8;
}
.wrapper {
	padding: 70px 0;
}
.wrapper .wrapper-content {
	width: 80%;
	margin: auto;
}

/*
Navigation
=========================== */
.navbar-brand{
	position:relative;
	padding:5px 0 5px 0;;
}

.navbar-brand .scroller-logo{
	position:absolute;
	top:-5px;
	left:0;
	display:none;
}

.navbar-default{
	background: transparent;
	border:none;
	padding-top:40px;
	padding-bottom:40px;
	margin-bottom: 0;
	-webkit-transition: background .8s ease-in-out,padding .8s ease-in-out;
	-moz-transition: background .8s ease-in-out,padding .8s ease-in-out;
	transition: background .8s ease-in-out,padding .8s ease-in-out;

}

.static-nav-collapse,
.top-nav-collapse{
	background:#fff;
	padding-top:20px;
	padding-bottom:20px;
	opacity:0.96;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
          box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
}

.static-nav-collapse:hover,
.top-nav-collapse:hover{
	opacity:1;
}

.static-nav-collapse .navbar-brand .scroller-logo,
.top-nav-collapse .navbar-brand .scroller-logo{
	display:inline-block;
}

.static-nav-collapse .navbar-brand .default-logo,
.top-nav-collapse .navbar-brand .default-logo{
	display:none;
}

.navbar-default .navbar-nav{
	padding:5px 0 5px 0;
}

.navbar-default .navbar-nav > li > a{
	font-size:18px;
	color:#fff;
	padding:8px 12px 8px 12px;
	border-top:2px solid transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active {
    color: #fff;
    border-top: 2px solid #fff;
}

.static-nav-collapse .navbar-nav > li > a,
.top-nav-collapse .navbar-nav > li > a {
	color:#333;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active{
	color:#fff;
	border-top:2px solid #fff;
}
.top-nav-collapse .navbar-nav > li > a:hover, 
.top-nav-collapse .navbar-nav > li > a:active, 
.top-nav-collapse .navbar-nav > li > a:focus { 
	color: #20c3c4;
	border-top:2px solid #20c3c4;
}


.navbar-default .navbar-nav > li > a.login{
	border:1px solid #fff;
	border-radius:2px;
	padding:8px 25px 8px 25px;
	margin-left:5px;
}

.navbar-default .navbar-nav > li > a.login:hover{
	background:#fff;
	color:#333;
}
.top-nav-collapse .navbar-nav > li > a.login {
    border: 1px solid #333;
}
.top-nav-collapse .navbar-nav > li > a.login:hover, 
.top-nav-collapse .navbar-nav > li > a.login:active, 
.top-nav-collapse .navbar-nav > li > a.login:focus { 
	background-color: #20c3c4;
	border-color: #20c3c4;
	color: #fff;
}

.dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  color:#3b3b3b;
  border: none;
  right:auto;
  font-size:13px;
  border-radius:4px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.navbar .nav > li > .dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 10px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.98);
  content: '';
}

.dropdown-menu li a{
  color:#3b3b3b;
  padding-top:8px;
  padding-bottom:8px;
}

.dropdown-menu li a:hover{
  background:none;
}

.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:hover,
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:focus,
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:active{
  background:none;
}
.dropdown-menu .sub-menu{left:100%;position:absolute;top:0;visibility:hidden;margin-top:-1px;margin-left:7px;}
.dropdown-menu li:hover .sub-menu{visibility:visible;}

li.dropdown .sub-menu:before,
li.dropdown  .sub-menu:after {
  position: absolute;
  top: 10px;
  left: -7px;
  display: inline-block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right-color: rgba(255, 255, 255, 0.98);
  content: '';
  border-right: 7px solid rgba(255, 255, 255, 0.98);
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus{
	border:2px solid #333;
	background:none;
	margin:5px 15px 0 0;
}

.navbar-default .navbar-toggle:hover{
	background:none;
}

.navbar-default .navbar-toggle .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #333;
}

@media (max-width: 767px) {	
	.navbar-default{
		padding-top:20px;
		padding-bottom:20px;
	}
	.navbar-brand{
		padding:5px 15px 5px 15px;
	}
	.navbar-default .navbar-collapse {
		background-color: #fff;
	}
	.navbar-default .navbar-nav > li > a {
		color: #333;
	}
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus,
	.navbar-default .navbar-nav > li > a:active {
		color: #20c3c4;
	}
	.navbar-brand .default-logo, 
	.navbar-brand .scroller-logo {
		position:absolute;
		top:-8px;
	}
	.navbar-default .navbar-nav > li > a.login {
	   border: 1px solid #333;
	}
}

/* 
Helpers Css
=========================== */
.btn-group-lg>.btn, .btn-lg {
    font-size: 14px;
    border-radius: 2px;
    font-weight: 700;
    padding: 14px 35px;
}
.btn-info {
	background-color: #A05EE8;
	border-color: #A05EE8;
}
.btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info {
	background-color: #8B3CE3;
	border-color: #8B3CE3;
}
.btn-primary {
	background-color: #20c3c4;
	border-color: #20c3c4;
}
.bg-success {
	padding: 15px;
	margin-bottom: 50px;
}
.c-white {
    color: white;
}
.c-light {
	color: #a2b0ba;
	font-weight: 100;
}
.c-primary {
	color: #17c4bb;
}
.f-18 {
	font-size: 18px;
	
	 24px;
}
.f-20 {
	font-size: 20px;
}
.f-24 {
    font-size: 24px;
}
.p-t-60 {
	padding-top: 60px;
}
.m-t-30 {
	margin-top: 30px;
}
.m-b-30 {
	margin-bottom: 30px !important;
}
.mt-0 {
	margin-top: 0;
}
.pt-0 {
	padding-top: 0;
}
.pb-0 {
	padding-bottom: 0;
}
.pr-0 {
	padding-right: 0;
}
.pl-0 {
	padding-left: 0;
}
.border-top {
    border-top: 1px solid #dee2e6!important;
}
.border-right {
    border-right: 1px solid #dee2e6!important;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}
.border-left {
    border-left: 1px solid #dee2e6!important;
}


.text-upper {
	text-transform: uppercase;
}


/* 
Header Section
=========================== */
.navbar-default {
    padding-top: 20px;
    padding-bottom: 85px;
}
header h1.logo {
	margin: 0;
}
/* 
Home Section
=========================== */
.bg-header {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ed9e6+41,3f6fe0+100 */
	background: url('../img/bg-header.png') right bottom no-repeat #1ed9e6; /* Old browsers */
}
.home-section {
	padding:20px 0 0 0;
	font-size:16px;
	line-height:28px;
	color:#fff;
	margin-bottom: 30px;
}
.home-section .header-text {
    font-size: 36px;
    font-weight: 500;
    line-height: 45px;
    margin-bottom: 20px;
    font-weight: 100;
    padding-top: 75px;
}
.home-section .browser-container img {
	margin: auto;
	margin-bottom: -100px;
	margin-left: 50px;
}
.home-section .headline {
	margin-bottom: 60px;
}
.home-section .btn-default {
	background-color: transparent;
	padding: 18px 30px;
	font-size: 24px;
	border-radius: 50px;
	border: 2px solid;
	color: #fff;
}

/* 
Intro Section
=========================== */
.about-section {
	border-bottom: solid 1px #e0ecf2;
    margin-bottom: 50px;
}
.about-section h3 {
	font-weight: 100;
}
.about-section .title {
	font-weight: bold;
	color: #3a5062;
}
.about-section img {
	max-width: 64px;
}
.media-left {
	padding-right: 20px;
}


/* 
Intro Section
=========================== */
.features-section h3 {
	font-weight: 100;
}
.widget-feature {
	text-align: center;
	padding: 25px 0;
}
.widget-feature h4 {
	font-weight: 600;
	margin: 15px;
	font-size: 18px;
}
.widget-feature i {
	color: #17C4BB;
	font-size: 48px;
	display: block;
	padding: 10px 0;
}

/* 
Description Section
=========================== */
.description-section {
	overflow: hidden;
}
.description-section h3 {
	font-weight: 100;
}
.description-section img {
	margin-bottom: -15px;
}

/* 
Princing Section
=========================== */
.princing-section h3 {
	font-weight: 100;
}
.pricing-wrapper {
	margin: 0 -15px;
}
.pricing-wrapper .pricing-head {
	background-color: #17C4BB;
}
.pricing-wrapper.second .pricing-head {
	background-color: #344765;
}
.pricing-wrapper.third .pricing-head {
	background-color: #3B5072;
}
.pricing-wrapper .pricing-head h3 {
	margin: 0;
	padding: 30px 0;
	text-align: center;
	color: #fff;
}
.pricing-wrapper .pricing-content {
	background-color: #EFEFEF;
	padding: 27px;
	padding-bottom: 10px;
	text-align: center;
}
.pricing-wrapper.second .pricing-content {
	background-color: #F5F5F5;
}
.pricing-wrapper .pricing-content .pricing-price {
	font-size: 72px;
	color: #666666;
} 
.pricing-wrapper .pricing-content sup {
	font-size: 36px;
	color: #666666;
}
.pricing-wrapper .pricing-content li {
	color: #8e8e8e;
	border-bottom: 1px #C9C9C9 solid;
	font-size: 16px;
	padding: 18px 0;
	list-style: none;
}
.pricing-wrapper .pricing-content li:last-child {
	border-bottom: none;
}
.pricing-wrapper .btn.btn-primary {
	background-color: #20c3c4;
	border: 1px solid transparent;
    border-radius: 2px;
    margin-top: 10px;
}

.newsletter-section h2 {
	font-weight: 100;
}

/* 
Contact Section
=========================== */
.contact-section .icon {
	float: left;
}

.contact-section strong > i {
	color: #17C4BB;
	font-size: 28px;
	width: 28px;
    padding-right: 11px;
    vertical-align: middle;
}
.contact-section .text p {
	margin-bottom: 15px;
}
.contact-section .ninja-forms-required-items {
	font-size: 12px;
	color: #8e8e8e;
	margin-bottom: 5px;
}
.contact-section form {
	margin-bottom: 50px;
}
.form-control {
    border: 1px solid;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    padding: 18px 24px;
    height: 55px;
    border-radius: 0;
    background-color: transparent;
    letter-spacing: 1px;
    box-shadow: none;
    border-color: #e7e7e7;
}

/* 
Footer
=========================== */
footer {
	border-top: solid 1px #e0ecf2;
	padding: 20px 0 10px;
}
footer ul {
	list-style: none outside;
    margin-left: 7px;
}
footer li:first-child {
    border: none;
}
footer li {
    float: left;
    display: block;
    padding: 0 10px;
    border-left-style: solid;
}
footer a:hover {
	color: #444;
}