/* Space out content a bit */


body {
padding-top: 129px;
background-position: top; background-repeat: repeat;
background-image: url("../images/background-chalk.jpg"); background-size: cover; background-attachment: fixed;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 300px;
}

@font-face { font-family: "Amatic"; src:url(../Amatic.ttf);
 font-style: normal; }
 
@font-face { font-family:"Amatic Bold"; src:url(../AmaticBold.ttf) format('truetype');
 font-style: normal;}

.page-headings { margin-top: 20px;}

h1 { font-family: "Amatic"; font-size: 30px; margin-top: 10px; margin-bottom: 20px; color: #FFF }

h2 {  font-family: "Amatic Bold"; font-size: 34px; text-transform:  uppercase; color: #FFFFFF; text-align: center; margin-top: 10px; letter-spacing: 2px; border-bottom: thin solid #ffffff; padding-bottom: 5px; }


h2.heading-home { margin-top: 50px;}

h2.heading-pages { margin-top: 20px;}

h3 { font-size: 18px; color: #333333; text-align: center; margin-top: 10px; font-weight: 500; margin-bottom: 20px; background-color: #FFFFFF; padding: 5px 15px; width: auto}


h6 { color: #FFFFFF; margin-top: 20px}

p { color: #FFFFFF; font-weight: 200; font-size: 16px; letter-spacing: .5px; line-height: 1.3em}

ul li { color: #FFFFFF; font-weight: 200; font-size: 16px; letter-spacing: .5px; margin-bottom: 5px; line-height: 1.3em}



.download_form {text-align: center; margin-bottom: 20px}
.download_form img { max-height: 70px}
.download_form a { color:#FFF; text-decoration:none;}
.download_form a:link { text-decoration:none}
.download_form a:hover { color:#333333; text-decoration:underline #FFFFFF; }
.download_form a:active { text-decoration:none}

.email-form-style {background-image: none; border: 1px solid #ccc;border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; display: block; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;}
.form-style {font-size:12px; width:100%; color: #333; background-color: #fff;}

.submit-style {background-color: #9B9B9B; width:110px; color:white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size:15px; min-height: 30px; border: thin solid #FFFFFF; margin: 10px auto 20px}
.submit-style:hover {background-color: #FFFFFF; width:110px; color: black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size:15px; min-height: 30px; cursor: pointer; border: thin solid #000000}

.contact-details { margin-top: 35px; margin-left: 10px;}
.contact-icon { float:left; height:30px; width:30px; margin-right: 20px; margin-bottom:35px; }

label { margin-top: 10px }

/* Store Box */
.buynow { text-align: center; margin-top: 10px;}
.buynow input { height: 35px; }
.buynow-button { background-image: url(../images/store-buynow-static-w.png); height: 35px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 25px; }
.buynow-button:hover { background-image: url(../images/store-buynow-hover.png); height: 35px; cursor: pointer}
.product_description img { height: 35px; margin: 0 auto}
.payment form  { text-align: center}
.payment form table { width: 100%}
.store button { background-color: #BA1E21;}
.product_description p { text-align: center }
.modal-storePopup { text-align: center}
.modal-header h2 { border: none; }
.storePopup h2 { color: #333333; margin-top: 30px;}
/* The Modal (background) */
.storePopup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */ 
    left: 0;
    top: 0; 
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal { z-index: 99999; }
.modal-storePopup {  width: 80%; height: auto; margin: 0 auto; margin-top: 30px; padding: 15px 0px; }
.modal-storePopup p { color: #333333}
.modal-dialog { max-width: 500px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.modal-body { background-color:  rgba(104,104,109,0.95)}
.modal-header, .modal-footer  { background-color: #333333;}
.modal-header .close { color: #ffffff; padding: 10px; }
.modal-header { padding: 0px;}
.modal-header img { max-width: 500px; width: 100%; image-rendering: pixelated; }

.teamlineheight { margin-bottom: 10px; margin-top: 0px;}
.thumbnail { border: none; background-color: transparent}
.thumbnail img { max-width: 200px;}
.our-team-sub-head { font-weight: bold; margin-top: 10px;}
.panel-title a { background-color: #9B9B9B; color: #FFF; padding: 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid thin #FFF; font-size: 14px; border-radius: 5px;}
.panel-title a:hover { background-color: #FFF; color: #000; padding: 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px; border: solid thin #000; font-size: 14px; text-decoration: none}

.row page-headings { margin-bottom: 20px !important;}

.navbar-default {
	background-color: rgba(104,104,109,0.95);
}
.navbar-nav { margin-top: 10px; }


.col-lg-12 { padding-left: 0px; padding-right: 0px;}

a { color: #FFFFFF}
a:hover, a:focus { color: #FFFFFF; text-decoration: underline 2px; cursor: pointer !important }

.button:hover { cursor: pointer}
.store-button img { width: 100%}
.services-bar a:hover { text-decoration: none; cursor: pointer !important}
.services-banner { margin-bottom: 20px;}

.float-left { float: left}
.float-right { float: right}
.clear-both { clear: both}

.dropdown-menu > li > a { color: #FFFFFF}

/* Everything but the jumbotron gets side spacing for mobile first views */
html {
    position: relative;
    min-height: 100%;
}

.feature-column {background-color: rgba(104,104,109,0.95); padding: 5px; border: thin solid #fff; }

.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}
.footer {	position: absolute;
	bottom: 0px; 

}

/* Hover Navigation */

#navbar ul li img { height: 26px; width: auto}


.nav li a { padding: 30px 8px; }

.navbar-toggle { margin-top: 28px;}

.navbar-fixed-top .navbar-collapse { max-height: 400px;}

.services-bar { width: 100%; height: 40px; background-color: rgba(255,255,255,0.9); margin: 0px; padding: 0px; }
.services-bar > div > div { padding: 0px;}
.services-bar h2 { color: #333; font-size: 20px; padding: 0px; margin-top: 6px; margin-bottom: 4px; border-bottom: none}

.carousel-banner { height: 40px; text-align: center; margin-top: 40px; z-index: 10; margin-bottom: -5px; position: relative; }
.carousel-banner img { width: 40%; }

.banner-headings { text-align: center; width: 100%; align-content: center}
.banner-headings img { width: 100%; padding-left: 20px; padding-right: 20px;     
}

.services-headings {  position: absolute;
top: 50%;
  left: 50%;  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	background-color: white;
	text-align: center;
  }

.services-headings h1 { color: #333333; padding: 5px 10px; border: 2px solid #333333; margin: 0px; font-size: 48px }



.carousel { margin-bottom: 30px; border-bottom: thin solid #ffffff }
.carousel-indicators { bottom: 5px;}
.carousel-caption { padding-bottom: 30px;}



iframe.youtube { min-height: 220px; margin-bottom: 10px}

.instagram-box { background-color: rgba(255,255,255,0.20); padding: 5px 5px 0px 5px !important; margin: auto 15px;}



.navbar-brand { padding: 20px 10px 5px; height: 90px }

.navbar-brand img { height: 100%;}

#navbar ul ul { display:none; z-index:1000; width:170px; height: auto; position:absolute; background-color: #333; text-indent:10px; padding: 5px 0px 0px; margin-top: -10px; margin-left: 15px;}

#navbar ul ul li { line-height:24px; margin-bottom: 10px; font-family: "Amatic"; font-size: 26px; }

#navbar ul li:hover > ul
{
	display:block
}

@media (min-width:768px){
#navbar ul {  float: right }
#navbar ul ul { margin-left: 10px;}
}

@media (max-width:767px){
#navbar ul { text-align: center}
#navbar ul ul { text-align: center; margin-left: calc(50% - 80px);}
.banner-headings img { image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
	-ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */}

}

#navbar { width:inherit; max-width: 900px; height:auto; }

#navbar ul ul li a { text-decoration:none; padding-left: 0px; padding-top: 4px; padding-bottom: 4px;}
#navbar ul ul li a:hover > h2 { color:#FFFFFF; text-decoration: underline; background-color:#fff; line-height:28px}
a .cta-button { background-image: url('../images/phone-bg.png'); background-size: contain; width: 160px; height: 40px; padding: 2px 5px; margin-bottom: 10px; margin-top: 20px; image-rendering: auto; image-rendering: -moz-auto; image-rendering: -o-auto; image-rendering: -webkit-optimize-auto; cursor: pointer; }
a .cta-button h2 { padding: 0px; margin: 0px; color: #333333; font-size: 30px; cursor: pointer; }
a .cta-button h2:hover { padding: 0px; margin: 0px; color: #333333; font-size: 30px; text-decoration: underline; cursor: pointer; }


/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}


.welcome-header { width: 60%; height: auto; min-width: 500px; background-color: white; z-index: 2; }

.content-images img { margin-top: 15px; margin-bottom: 15px; border: thin solid #fff; }

.content-images, .content-images-element { text-align: center}
ul { color: #FFFFFF; line-height: 24px;}


/* Client container */

.clients img { padding: 30px; opacity: .7; }
.col-md-4.testimonials { text-align: center}
.testimonials img { width: 100%;}
.clients .carousel { border-bottom: none; }

@media (min-width: 768px) and (max-width: 991px) {
#navbar ul li img { height: 22px; width: auto; }
.navbar-nav li a.buttons { padding: 25px 8px;}
	.testimonials img { width: 50%}
}


.phone-desktop { z-index: 888888; top: 5px; position: fixed; margin:0px; float: right;}
.phone-desktop img { float: right; }
.phone-mobile { display: none}
@media (max-width:767px) { 
		.phone-mobile {display: block; width: 100%; height: 40px; background-color: #fff; text-align: center; }
	.phone-mobile img { padding: 5px; height: 40px}
	.phone-desktop {display: none}
	.clients img { padding: 10px ; margin-bottom: 15px;}
body:before {
	  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url('../images/background-chalk.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
}

/* Custom page footer */
.footer {
	padding: 20px;
  	color: #777;
  	border-top: 1px solid #FFFFFF;
	width: 100%;
	background-color: rgba(104,104,109,0.85);
}


.footer-left {text-align: left; padding-left: 0px;}
.footer-left img { width: 100%; max-width: 280px}


.footer-right {text-align: right; padding-right: 0px;}
.footer-right h5 { margin-top: 0px; margin-bottom: 10px; color: #FFF}


.icons { color: #FFFFFF; text-align: center;
}
.icons img { max-width: 70px; max-height: 70px; }

.icons a { text-decoration: none; }

.social-icons { margin-top: 20px; width: 114px; float: right}

.facebook-icon { background-image: url(../images/facebook-static.png); background-size: contain;  width: 28px; height: 28px;}
.facebook-icon:hover { background-image: url(../images/facebook-hover.png)}

.instagram-icon { background-image: url(../images/instagram-static.png); background-size: contain; width: 28px; height: 28px; margin: auto 15px;}
.instagram-icon:hover { background-image: url(../images/instagram-hover.png)}

.twitter-icon { background-image: url(../images/twitter-static.png); background-size: contain; width: 28px; height: 28px; }
.twitter-icon:hover { background-image: url(../images/twitter-hover.png)}

.section-heading { text-align: center; border-bottom: 1px solid #FFFFFF;margin-bottom: 20px; margin-left: 15px; margin-right: 15px }

.copyright { float: right; }

@media (max-width: 767px) {
	.carousel-banner img { width: 55%; }
	.carousel-caption { padding-bottom: 10px !important;}
	.carousel-caption h3 { font-size: 22px;}
	body { margin-bottom: 500px; padding-top: 130px; }
	.carousel-banner { margin-top: 36px;}
	h2.heading-pages { margin-top: 50px;}
	.services-bar { display: none}
	.services-headings h1 { color: #333333; padding: 10px; border: 2px solid #333333; margin: 0px; font-size: 32px }
	.testimonials img { width: 75%}
.footer-right {text-align: center; padding-right: 0px; padding-left: 0px;}
	.social-icons { margin-left: calc(50% - 57px); float: none}
	.footer-left {text-align: center; padding-right: 0px;}
	.copyright { text-align: center; float: none; margin-left: calc(50% - (!parent(attr(value-50%)))); width: auto}
}

@media (max-width: 500px) {
	.carousel-banner img { width: 65%; }
}

@media (max-width: 991px) {
.navbar-brand { height: 80px; padding-top: 15px; margin-bottom: 10px; }
	.phone-desktop { padding-right: 0px; }
}





/* Customize container */
.container {
    max-width: 920px;
  }
@media (min-width: 768px) {
  .container {
    max-width: 920px;
  }
}
	
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}