/* STRUCTURE */
body {
  font-family: 'Montserrat', sans-serif;
  color:#222;
  margin-top: 70px;
}



/* TYPOGRAPHY
   ------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
}

p {
  line-height: 24px;
}
@media only screen and (max-width : 767px) {
p {
  font-weight: 400;
}
}



/* GLOBAL
   ------------------------- */
ul {
	list-style-type: none;
	padding:0;
	margin:0;
}

/* BTN */
.btn {
  border-radius: 4px;
}

.bt-custom {
  color: white;
  border: none;
  text-transform: uppercase;
  padding: 14px 30px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff8000+0,f81a16+100 */
  background: #ff8000; /* Old browsers */
  background: -moz-linear-gradient(45deg, #ff8000 0%, #f81a16 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#f81a16',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bt-custom:hover,
.bt-custom:focus,
.bt-custom.focus,
.bt-custom:active,
.bt-custom:active:focus,
.bt-custom.active:focus {
  background-color:#eb472e;
  color:white;
}



/* NAV
   ------------------------- */
.navbar-custom {
  background-color: white;
  border:none;
  min-height: 70px;
  text-transform:uppercase;
}

.navbar-custom .btn {
	color: white !important;
	padding: 10px 20px !important;
	margin-top: 4px!important; 
	margin-left: 15px!important;
}
.navbar-custom .btn:hover,
.navbar-custom .btn:focus,
.navbar-custom .btn.focus,
.navbar-custom .btn:active,
.navbar-custom .btn:active:focus,
.navbar-custom .btn.active:focus {
  background-color:#eb472e;
  color:white;
}

.navbar-custom img {
	height:46px;
	width:auto;
}
@media only screen and (max-width : 767px) {
.navbar-custom img {
	height:42px;
	width:auto;
}
}

.navbar-brand {
	padding-top: 12px;
}
@media only screen and (max-width : 767px) {
.navbar-brand {
	padding-top: 15px;
}
}

.navbar-nav-right {
  padding-top:10px;
}
@media only screen and (max-width : 767px) {
.navbar-nav-right {
  padding-top:0;
}
}

.navbar-default .navbar-nav-right > li > a {
  color:#999;
}
@media (max-width: 992px) {	
.navbar-default .navbar-nav-right > li > a {
  font-size: 12px;
  padding-left: 7px;
  padding-right: 7px;
}
}
@media (max-width: 767px) {	
.navbar-default .navbar-nav-right > li > a {
  font-size: 16px;
  padding-left: 15px;
}
}

.navbar-default .navbar-nav-right > li > a:hover {
  color:#000;
}

.navbar-nav-right > .active > a {
  background-color:transparent !important;
  color:#000 !important;
  border-bottom: 2px solid orange;
  padding-bottom: 5px;
}
@media only screen and (max-width : 767px) {
.navbar-nav-right > .active > a {
  border-bottom: none;
}
}

/* Toggle dropdown mobile */
@media only screen and (max-width : 767px) {
.navbar-collapse { 
	background-color: #f6f6f6;
	margin-top:10px;
}
}

/* Toggle nav icon */
.navbar-default .navbar-toggle {
  border-color: transparent;
  background-color: transparent;
  margin-top: 18px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #eee;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #999;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: transparent;
}



body {

  background-image: 
    
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(../img/hero.jpg);

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.hero-box {
	text-align:center;
	color:white;
	padding-top: 200px;
	padding-bottom: 200px;
}
@media (max-width: 767px) {	
.hero-box {
	padding-top: 50px;
	padding-bottom: 50px;
}
}

.hero-box h1 {
	font-size: 50px;
}
@media (max-width: 767px) {	
.hero-box h1 {
	font-size: 30px;
}
}

.hero-box p {
	font-size: 28px;
	padding-top: 5px;
	padding-bottom: 40px;
}
@media (max-width: 767px) {	
.hero-box p {
	font-size: 18px;
	padding-bottom: 20px;
}
}

@media (max-width: 767px) {	
.hero-box .btn {
	font-size: 14px;
}
}



/* SECTION */
.section {
	padding-top: 90px;
	padding-bottom: 90px;
}
@media (max-width: 767px) {	
.section {
	padding-top: 50px;
	padding-bottom: 50px;
}
}



/* VIDEO SECTION */
.video-section {
	text-align: center;
}

@media (max-width: 767px) {	
.video-section h2 {
	font-size: 24px;
}
}

.video-section p {
	padding-bottom: 30px;
	font-size: 18px;
	font-weight: 300;
}
@media (max-width: 767px) {	
.video-section p {
	padding-bottom: 20px;
	font-size: 16px;
	line-height: 22px;
}
}



/* BLURBS */
.blurbs {
	background-color: #edebeb;
}

@media (max-width: 767px) {	
.blurb {
	padding-bottom:60px;
}
}

.blurb h4 {
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 16px;
	text-transform:uppercase;
}

.blurb p {
	margin-bottom: 0;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
}
@media (max-width: 992px) {	
.blurb p {
	font-size: 12px;
	line-height: 22px;
}
}
@media (max-width: 767px) {	
.blurb p {
	font-size: 14px;
	line-height: 24px;
}
}

.blurb img {
	height:50px;
}



/* ADVANTAGE */
.advantage-section h2 {
	padding-bottom: 20px;
}
@media (max-width: 767px) {	
.advantage-section h2 {
	font-size: 24px;
}
}

.advantage-section p {
	font-size: 14px;
	line-height: 26px;
	font-weight: 300;
}

.advantage-section .btn {
	margin-top: 20px;
}

@media (max-width: 767px) {	
.advantage-section img {
	margin-bottom: 50px;
	padding-left: 50px;
	padding-right: 50px;
}
}



/* CTA */
.cta {
  color: white;
  text-align: center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff8000+0,f81a16+100 */
background: #ff8000; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff8000 0%, #f81a16 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#f81a16',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.cta h2 {
  font-size: 28px;
}
@media (max-width: 767px) {	
.cta h2 {
  font-size: 24px;
}
}

.cta p {
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 30px;
}
@media (max-width: 767px) {	
.cta p {
  font-size: 16px;
  padding-bottom: 10px;
}
}

.cta .btn {
	color: white;
	background-color:#262626;
	text-transform:uppercase;
	border-radius: 0;
	padding-left: 40px;
	padding-right: 40px;
}

.cta .btn:hover,
.cta .btn:focus,
.cta .btn.focus,
.cta .btn:active,
.cta .btn:active:focus,
.cta .btn.active:focus {
  color: white;
  background-color:#8473e6;
}

.cta input:not([type=submit]) {
	border-radius: 0;
	font-weight: 300;
	font-size: 14px;
}



/* FOOTER
   ------------------------- */
.footer-custom {
	padding-top:40px;
	padding-bottom:40px;
	background-color: #262626;
	color: #ccc;
}
@media only screen and (max-width : 767px) {
.footer-custom {
	padding-top:20px;
	padding-bottom:20px;
}
}

.footer-custom h4 {
	padding-bottom:10px;
	text-transform: uppercase;
}

.footer-custom p {
	font-weight: 300;
}

.footer-custom a {
	color: #ccc;
	font-weight: 500;
}
.footer-custom a:hover {
	color: white;
}

.footer-left img {
	width: 200px;
}

/* Right */
.footer-social {
	font-size:20px;
	padding-top:10px;
}
@media only screen and (max-width : 767px) {
.footer-social {
	font-size:28px;
	padding-top:0;
}
}

.footer-social li {
	padding-left:30px;
}
@media only screen and (max-width : 992px) {
.footer-social li {
	padding-left:20px;
}
}

.footer-right {
	text-align: right;
}
@media only screen and (max-width : 767px) {
.footer-right {
	text-align: center;
}
}

.footer-right p {
	padding-top: 20px;
}


/* ---------------------------
INTERNAL PAGES 
------------------------------ */
.section-page {
	padding-top: 50px;
	padding-bottom: 50px;
}

.section-page h3 {
	padding-bottom: 5px;
	font-size: 22px;
}

.section-page p {
	font-weight: 300;
}

.section-page-ttl {
	  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff8000+0,f81a16+100 */
background: #ff8000; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff8000 0%, #f81a16 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#f81a16',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: white;
padding-top: 30px;
padding-bottom: 20px;
}

.section-page {
	padding-top: 50px;
	padding-bottom: 50px;
}

/* PRODUCT PAGE */
.blurb-advantage {
	padding:0 30px;
	height:200px;
	text-align: left;
}
@media only screen and (max-width : 992px) {
.blurb-advantage {
	padding:0 20px;
}
}
/* IPAD */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.blurb-advantage {
	padding:0 20px;
}
}
@media only screen and (max-width : 767px) {
.blurb-advantage {
	padding:0 15px 40px 15px;
	height:auto;
}
}

.blurb-advantage h4 {
	color:#222;
	padding-bottom:5px;
	margin-top:0;
	text-transform:uppercase;
	font-size:16px;
}
@media only screen and (max-width : 992px) {
.blurb-advantage h4 {
	font-size:15px;
}
}

.blurb-advantage p {
	font-size:14px;
	line-height:24px;
	color: #666;
}
@media only screen and (max-width : 992px) {
.blurb-advantage p {
	font-size:12px;
	line-height:20px;
}
}
@media only screen and (max-width : 767px) {
.blurb-advantage p {
	font-size:14px;
	line-height:24px;
}
}

.blurb-advantage img {
	width:80px;
	padding-right:30px;
	margin-top:-5px;
}
@media only screen and (max-width : 992px) {
.blurb-advantage img {
	width:55px;
	padding-right:15px;
}
}

.product-advantage {
	text-align: center;
}

.product-advantage h3 {
	padding-bottom:60px;
}

.product-whatis {
	background: #f1f1f1;
}

@media only screen and (max-width : 767px) {
.product-whatis-video {
	padding-top: 20px;
}
}

/* FORM
   ------------------------- */
.section-form textarea {
	font-weight: 300;
	font-size: 15px;
	border-radius: 4px;
}

.section-form input {
	font-weight: 300;
	font-size: 15px;
	border-radius: 4px;
}

.section-form .btn {
	background-color: #336699;
	border-color: #336699;
	color: white;
	text-transform:uppercase;
}
.section-form .btn:hover,
.section-form .btn:focus,
.section-form .btn.focus,
.section-form .btn:active,
.section-form .btn.active {
	background-color: #336699;
	border-color: #336699;
	color: white;
}

.half-width-form-control {
    display: inline-block;
    width: 49%;
	margin-right:1%;
    /*width: calc(50% - 2px);*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-weight: 300;
}

.half-width-form-control-right {
    display: inline-block;
    width: 49%;
	margin-left:1%;
    /*width: calc(50% - 2px);*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-weight: 300;
}

.third-width-form-control {
    display: inline-block;
    width: 32%;
	margin-right:1%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-weight: 300;
}

.third-width-form-control-middle {
    display: inline-block;
    width: 32%;
	margin-right:1%;
	margin-left:1%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-weight: 300;
}

.third-width-form-control-right {
    display: inline-block;
    width: 32%;
	margin-left:1%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-weight: 300;
}

.form-supermodule h4 {
	text-transform: uppercase;
	color: #666;
	padding-bottom:15px;
	font-size: 16px;
}




/* BLOG
   ------------------------- */
.body-dark {
	background-color: #300032;
	color: white;
}

.blog-post-footer {
	color: #fd6006;
	text-transform: uppercase;
	margin-top: 20px;
}
.blog-post-footer a {
	color: #fd6006;
	text-transform: uppercase;
	font-size: 14px;
}
@media only screen and (max-width : 992px) {
.blog-post-footer a {
	font-size: 12px;
}
}
.blog-post-footer a:hover {
	text-decoration: none;
}

.blog-post-footer i {
	font-size: 24px;
	margin-right: 2px;
}
@media only screen and (max-width : 992px) {
.blog-post-footer i {
	font-size: 20px;
	margin-right: 2px;
}
}

.blog-post-footer li {
	margin-right: 4px;
}
.blog-post-footer li:last-child {
	margin-right: 0;
}

.blog-post-footer-lg {
	margin-top: 30px;
}

.blog-post-category {
	text-transform: uppercase;
	border-bottom: 2px solid #fd6006;
	padding-bottom: 5px;
	margin-bottom: 20px;
}

/* main */
.blog-post-main {
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #947896;
}

.blog-post-main h1 {
	padding-bottom: 15px;
	line-height: 1.2em;
}
@media only screen and (max-width : 992px) {
.blog-post-main h1 {
	font-size: 24px;
	padding-bottom: 5px;
}
}

@media only screen and (max-width : 767px) {
.blog-post-main {
	padding-bottom: 15px;
}
.blog-post-main img {
	padding-bottom: 10px;
}
.blog-post-main h1 {
	font-size: 28px;
}
}

.blog-post-main p {
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
}

/* blog posts */
.section-blog-posts {
	padding-top: 40px;
	padding-bottom: 10px;
}

.blog-post-module {
	background-color: #e9d8ea;
	color: #300032;
	border: 10px solid #692260;
	height: 400px;
	margin-bottom: 30px;
}
@media only screen and (max-width : 767px) {
.blog-post-module {
	height: auto;
}
}

.blog-post-module h4 {
	line-height: 1.2em;
}

.blog-post-module p {
	font-size: 13px;
	line-height: 16px;
	font-weight: 300;
}

.blog-post-module i {
	font-size: 18px;
	margin-right: 4px;
}

.blog-post-module a {
	font-size: 11px;
}

.blog-post-module-content {
	padding: 10px;
}

/* blog detail */
.blog-detail-col ul {
	padding: 0 10px;
}

.blog-detail-col {
	font-size: 12px;
}
@media only screen and (max-width : 767px) {
.blog-detail-col {
	padding-top: 20px;
}
}

.blog-detail-col h3 {
	padding: 10px;
	border-radius: 4px;
	  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff8000+0,f81a16+100 */
background: #ff8000; /* Old browsers */
background: -moz-linear-gradient(45deg, #ff8000 0%, #f81a16 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #ff8000 0%,#f81a16 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8000', endColorstr='#f81a16',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.blog-detail-col li  {
	padding: 10px 0;
	border-bottom: 1px solid #fd6006;
}

.blog-detail-col a  {
	color: white;
}

.blog-detail-col-module {
	padding-bottom: 30px;
}

.blog-post-detail {
	border-bottom: none;
}

@media only screen and (max-width : 992px) {
.blog-post-detail p {
	font-size: 14px;
}
}

.blog-post-detail input {
	background-color: transparent;
	font-size: 14px;
	border-radius: 0;
	border-color: #999;
}

.blog-post-detail textarea {
	background-color: transparent;
	font-size: 14px;
	border-radius: 0;
	border-color: #999;
}

.blog-detail-comments-section {
	padding-top: 50px;
}
@media only screen and (max-width : 992px) {
.blog-detail-comments-section {
	font-size: 12px;
}
}

.blog-detail-comments-section .badge {
	background-color: #fd6006;
	margin-right: 5px;
}

.blog-detail-comment {
	padding: 20px;
	background-color: #e9d8ea;
	color: #300032;
	margin-bottom: 10px;
	font-size: 13px;
}

.blog-detail-comment-name {
	font-size: 16px;
}

.blog-detail-comments {
	padding-bottom: 20px;
}