body {
	height: 100%;
	min-height:100%;
	overflow-x:hidden;
}

/*---------------- Top Navbar ----------------*/
.navbar{
	border: none;
	position:relative;
	z-index:3;
}

a.navbar-brand {
	font-family: 'Lobster', cursive;
	color:white !important;
	font-size:22px;
	margin-top: 13px;
    margin-right: -0px;
    margin-left: 40px;
    padding-right:20px;
}

div#bs-example-navbar-collapse-1 {
	margin-top: 15px;
}

nav.navbar-inner.navbar-inverse {
	min-height:90px;
	background-color:#323232;
}

.navbar-toggle {
	margin-top: 22px;
}

.navbar-link{
	font-size:14px;
	
}

ul.nav.navbar-nav{

}

ul.nav.nav-stacked.hidden-xs.hidden-sm.affix{
	margin-bottom:50px;
}

/*---------------- Headings ----------------*/
.h1, .h2, .h3, h1, h2, h3{
	margin-top: 40px;
	margin-bottom: 10px;
	color: #4B4B4B;
	position: relative;
}


h1, h2, h3 {
	font-family: 'Avenir Next';
}

/*---------------- Jumbotron ----------------*/
h1#main{
	margin-top:0px;
}

.jumbotron {
	background-color:#33BDB9;
	background-size:cover;
	height:650px;
		-webkit-box-shadow: 0 4px 6px 2px #ccc;
	   -moz-box-shadow: 0 4px 6px 2px #ccc;
	        box-shadow: 0 4px 6px 2px #ccc;

	background: -webkit-radial-gradient(#66D8D4, #33BDB9); /* Safari 5.1 to 6.0 */
  	background: -o-radial-gradient( #66D8D4, #33BDB9); /* For Opera 11.6 to 12.0 */
  	background: -moz-radial-gradient(#66D8D4, #33BDB9); /* For Firefox 3.6 to 15 */
  	background: radial-gradient(#66D8D4, #33BDB9); /* Standard syntax */
}

div#mainJumbo-xs {
	top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 2;
	position:absolute;
	margin-bottom:0;
}


h1#main {
	color:white;
	font-family: 'Lobster', cursive;
	font-size:90px;
}

h1#main-xs {
	margin-top:250px;
	color:white;
	font-family: 'Lobster', cursive;
	font-size:70px;
}

p#main-sub, p#main-sub-xs, p#main-secondary, p#main-secondary-xs {
	color:white;
	font-family: 'Avenir Next';
}

p#main-sub {
	margin-left:40px;
	margin-bottom:40px;
	margin-top:-30px;
}


p#main-sub-xs {
	margin-left:0px;
}

p#main-secondary {
	margin-left:280px;
	font-size:14px;
	line-height:2px;
	margin-bottom:40px;
}

p#main-secondary-xs {
	font-size:14px;
}

#main-secondary-link {
	color:white;
	text-decoration:none;
}

#main-secondary-link:hover {
	color:#2D3142;
	text-decoration:none;
}

p#sub-main{
	font-family:'Avenir Next';
	font-size:18px;
	color:gray;
	margin-top:-50px;
}

a#main {
	background: none; 
	border: 1px solid white;
    color: white;
    font-family:'Avenir Next';
}

p.text-center.fade-in.one.hidden-xs {
	margin-bottom: 40px;
}

#inspiredBy{
	font-family:'Avenir Next';
	color:gray;
}

/*---------------- Code Snippets ----------------*/
code {
	background-color:#F5F5F5;
}

.codered {
		color: red !important;
		display:inline;
	}
	
.codeblue {
		color: blue !important;
		display:inline;
}


/*---------------- Side Navbar ----------------*/
ul.nav.navbar-nav {
	font-family: 'Avenir Next';
	font-size:15px;
}

.affix-top {	
	position:relative;
	top: 0px;
}

.affix {	
	top: 20px;
}

.affix-bottom{
	position: absolute
}

.col-md-3.scrollspy {
	padding-top: 20px;	
}

.sidebar {
    padding-left: 20px;
    padding-top:20px;
    margin-top: 20px;
    margin-bottom: 40px;    
}

.sidebar > ul{
    width: 200px;
    overflow-y:auto; 
}

/* all links */
.sidebar .nav>li>a {
    color: #999;
    border-left: 2px solid transparent;
    padding: 4px 20px;
    font-size: 13px;
    font-weight: 400;
}

/* nested links */
.sidebar .nav .nav>li>a {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 30px;
    font-size: 12px;
}

.sidebar .nav>li>a:hover{
	color: #1F716F;
	text-decoration: none;
	 background-color: transparent;  
}

/* active & hover links */
.sidebar .nav>.active>a, 
.sidebar .nav>li>a:focus {
    color: #33BDB9;                 
    text-decoration: none;          
    background-color: transparent;  
    border-left-color: #33BDB9; 
}
/* all active links */
.sidebar .nav>.active>a, 
.sidebar .nav>.active:hover>a,
.sidebar .nav>.active:focus>a {
    font-weight: 700;
}
/* nested active links */
.sidebar .nav .nav>.active>a, 
.sidebar .nav .nav>.active:hover>a,
.sidebar .nav .nav>.active:focus>a {
    font-weight: 500;
}

/* hide inactive nested list */
.sidebar .nav ul.nav {
    display:none;         
}
/* show active nested list */
.sidebar .nav>.active>ul.nav {
    display: block;           
}

li.list-group-item.active > a,
li.list-group-item.active > a:hover,
li.list-group-item.active > a:focus {
  color: #fff;
  background-color: #33BDB9;
}



/*---------------- Front Page Circles ----------------*/
.small-circle-1 {
    width: 80px;
  	height: 80px;
  	background-image: linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -o-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -moz-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -webkit-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -ms-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    z-index:-1;
    position:relative;
}

.small-circle-2 {
    width: 80px;
  	height: 80px;
    background-image: linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -o-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -moz-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -webkit-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -ms-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    z-index:-1;
    position:relative;
}

.small-circle-3 {
    width: 80px;
  	height: 80px;
    background-image: linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -o-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -moz-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -webkit-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -ms-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    z-index:-1;
    position:relative;
}

.small-circle-4 {
    width: 80px;
    height: 80px;
    background-image: linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -o-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -moz-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -webkit-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
	background-image: -ms-linear-gradient(left, #2FC6C1 50%, #29B0AB 50%);
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    z-index:-1;
    position:relative;
}

.circle-1 {
    width: 180px;
  	height: 180px;
  	margin:10px;
    background-color:#F87561;
    border: 2px solid #F87561;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    z-index:-1;
    position:relative;
    opacity:.89;
    margin-right:-40px;
}

.circle-2 {
    width: 210px;
  	height: 210px;
    background-color:#E46350;
    border: 2px solid #E46350;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    position:relative;
    opacity:.89;
    z-index:1;
   
}

.circle-3 {
    width: 180px;
  	height: 180px;
    background-color:#F87561;
    border: 2px solid #F87561;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    z-index:-1;
    opacity:.89;
    position:relative;
    margin-left:-40px;
}

/*---------------- Features Front Page ----------------*/
.container #featuresSection{
	padding-bottom:10px;
}

#featuresHeader{
	color: #4B4B4B;
}

/*---------------- Front Page Icons ----------------*/
.icon-wrapper {
	padding-top:1000px;
}

#icon-wrapper {
	margin: 80px auto;
	width: 600px;
  	height: 200px;
  	padding:0;
}

i.fa.fa-caret-down.fa-3x.secondCaret{
	color:gray;
	font-size: 5em;
	padding-top:100px;
}

.fa-caret-down {
	color:white;
}

.fa-caret-down {
	color:white;
}


.fa-trophy, .fa-usd, .fa-birthday-cake, .fa-mobile, .fa-desktop, .fa-magic, .fa-bolt, .fa-envelope{
	line-height: inherit;
	color:white;
}

i.fa.fa-envelope.fa-3x {
	padding-top: 15px;
	
}

i.fa.fa-mobile.fa-4x {
	padding-top:11px;
	padding-bottom:0px;
}

i.fa.fa-magic.fa-5x, i.fa.fa-bolt.fa-5x {
	padding-top:40px;
	padding-bottom:0px;
	font-size:7em;
}

i.fa.fa-desktop.fa-5x {
	padding-top:55px;
	padding-bottom:0px;
	font-size:7em;
}

i.fa.fa-birthday-cake.fa-3x {
	padding-top: 15px;
}

i.fa.fa-trophy.fa-3x  {
	padding-top: 20px;
}

#icon-text {
	font-family:'Avenir Next';
	color:white;
	margin-top:-50px;
	text-align:center;
	font-size:16px;
}

#icon-grid ul {
	display: inline;
	width: 100% ;
	margin-left: auto ;
	margin-right: auto ;
}

.icon-text {
	font-family:'Avenir Next';
}


/*---------------- Front Page Circle Fade Animation ----------------*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes pound { 50% { transform: scale(1.4); }}
@-moz-keyframes pound { 50% { transform: scale(1.4);  }}
@keyframes pound { 50% { transform: scale(1.4); }}

.pound {
	-webkit-animation:pound ease-in 3;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:pound ease-in 3;
	animation:pound ease-in 3;
	-webkit-animation-delay: .5s; /* Chrome, Safari, Opera */
	animation-delay: .5s;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.fade-in.two {
	-webkit-animation-delay: 1.0s;
	-moz-animation-delay: 1.0s;
	animation-delay: 1.0s;
}

.fade-in.three {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.fade-in.four {
	-webkit-animation-delay: 2.0s;
	-moz-animation-delay: 2.0s;
	animation-delay: 2.0s;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.4); }


/*---------------- Footer ----------------*/
.footer{
	background-color:#323232;
	height:150px;
}

.footer p{
	color:white;
}


.col-md-8 {
	margin-bottom:100px;
}



.container { 
	margin-bottom:20px;
}

.bs-example {
	margin-right: 0;
	margin-left: 0;
	background-color: #fff;
	border-color: #ddd;
	border-width: 1px;
	border-radius: 4px 4px 4px 4px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-style:solid;
	padding-top:7px;
	padding-bottom: 7px;

}

/* sidebar */

div#accordion4 section {
	margin-top: 5px;
}


/*---------------- Radio Select Example ----------------*/
.radio-example {
	margin-left:20px;
}


label.radio{
	font-weight:400;
}

code {
	font-size:12px !important;
}

pre {
  word-break: keep-all;
  tab-size: 2;
}


/*---------------- Printer Media Query ----------------*/

@media print {
    .h1, .h2, .h3, h1, h2, h3{
	margin-top: 40px;
	margin-bottom: 10px;
	color: #4B4B4B;
	position: relative;
	-webkit-print-color-adjust: exact;
	}


	h1, h2, h3 {
		font-family: 'Avenir Next';
	}
	
	p#main-sub, p#main-sub-xs, p#main-secondary, p#main-secondary-xs {
		color:white;
		-webkit-print-color-adjust: exact;
		font-family: 'Avenir Next';
	}
	
	code {
		font-size:12px !important;
	}
	
	.codered {
		color: red !important;
		-webkit-print-color-adjust: exact;
		display:inline;
	}
	
	.codeblue {
		color: blue !important;
		-webkit-print-color-adjust: exact;
		display:inline;
	}
}