/* 
Custom CSS for...
'Modern Business' HTML Theme by Start Bootstrap

All Start Bootstrap themes are licensed under Apache 2.0. 
For more info and more free Bootstrap 3 HTML themes, visit http://startbootstrap.com!
*/

/* Global Styles */

html, body {
  height: 100%;
}

body {
  padding-top: 0px;
 /* body padding for fixed top nav */
}

.img-home-portfolio,
.img-customer,
.portfolio-item {
  margin-bottom: 30px;
}

.tab-pane {
  margin-top: 15px;
}

/* Page Sections */
.section,
.section-colored {
	padding-top: 20px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 20px;
}

.section-colored {
  background-color: #e1e1e1;
 /* change this to change the background color of a colored section */
}

.sidebar {
  margin-top: 40px;
}

.sidebar ul {
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
}

/* Half Page Height Carousel Customization */
.carousel {
  height: 50%;
}

.item,
.active,
.carousel-inner {
  height: 100%;
}

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* Social Icons Styles */
.list-social-icons {
  margin-bottom: 45px;
}

.tooltip-social a {
  text-decoration: none;
  color: inherit;
}

.facebook-link a:hover {
  color: #3b5998;
}

.linkedin-link a:hover {
  color: #007fb1;
}

.twitter-link a:hover {
  color: #39a9e0;
}

.google-plus-link a:hover {
  color: #d14836;
}

/* Service Page Styles */
.service-icon {
  font-size: 50px;
}

/* 404 Page Styles */
.error-404 {
  font-size: 8em;
}

/* Pricing Page Styles */
.price {
  font-size: 4em;
}

.price-cents {
  vertical-align: super;
  font-size: 50%;
}

.price-month {
  font-size: 35%;
  font-style: italic;
}

/* Footer Styles */
footer {
	margin-top: 0px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0px;
	background-color: #000000;
	color: #FFFFFF;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
}
.editbar {
	width: 100%;
	height: auto;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	text-align: right;
	background-color: #E8FFE6;
}
/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}

/* Responsive Styles */
@media (max-width: 767px) {

  .carousel {
    height: 60%;
 /* increases the carousel height so it looks good on phones */
  }
}
/* menu styes */
.list-unstyled,
.list-unstyled ul { width: auto }
@media ( min-width: 767px ) {
  .panel-group { width: auto; }
  .thumbnail { margin: 0; }
}
/* Grid demo styles */
.grid-demo {
  padding: 10px 30px;
}

  .grid-demo [class*="col-"] {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 2;
    background-color: #e5e1ea;
    border: 1px solid #d1d1d1;
  }
.wrapper{
	max-width:100%;
	margin:10px auto;
}
.element {
}
.element .well{
	
	margin-top: 5px;
	margin-bottom: 5px;
}

.coheader {
	height: auto;
	background-repeat: no-repeat;
	color: #fff;
	font-size: 18px;
	text-align: right;
	background-color: #000000;
	font-weight: 100;
	padding-BOTTOM: 20px;
	padding-top: 20px;
	padding-left: 35px;
	padding-right: 40px;
	background-position: 100% 0%;
	background-size: auto 100%;
}
.coheader h2 {
	font-size: 30px;
	font-weight: 300;
	text-align: right;
	line-height: 90px;
	margin-top: 0px;
	padding-top: 0px;
	background-position: 100% 0%;
	background-size: auto 100%;
}
.qass {
display: inline-block;
}
.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/intro-bg.jpg) no-repeat center center;
    background-size: cover;
}



.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
	text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
	font-weight: 300;
}

@media (max-width: 550px) {
.intro-message > h1 {
	font-family: 'Open Sans', serif;
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}
.qass {
visibility: hidden;
}
}
#recent-works {
	color: #636363;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 50px;
	background-size: auto auto;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
	width: 90%;
	padding-left: 20px;
}
#recent-works .links>a {
	background: #fff;
	color: #939393;
	text-shadow: none;
	width: 0%;
}
ul.gallery {
	display: block;
	margin: -15px;
	font-weight: 300;
	width: 0%;
}
ul.gallery.col-1 li {
	width: 100%
}
ul.gallery.col-2 li {
	width: 50%
}
ul.gallery.col-3 li {
	width: 33.3333%
}
ul.gallery.col-4 li {
	width: 25%
}
ul.gallery li {
	display: block;
	padding: 0;
	margin: 0;
	float: left
}
ul.gallery li .desc {
	margin: 15px;
	font-weight: bold;
	font-size: small;
	color: #000000;
}
desc {
	
}
ul.gallery li .preview {
	margin: 15px;
	display: block;
	position: relative
}
ul.gallery li .preview .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	-o-transition: opacity 300ms;
	transition: opacity 300ms
}
ul.gallery li .preview .links {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: translate(0, -50px);
	-moz-transform: translate(0, -50px);
	-ms-transform: translate(0, -50px);
	-o-transform: translate(0, -50px);
	transform: translate(0, -50px);
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms
}
ul.gallery li .preview .links>a {
	width: 50px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	text-align: center;
	background-color: #868887;
	color: #fff;
	text-shadow: 0 1px rgba(0,0,0,0.3);
	font-size: 18px;
	margin: 0 1px
}
ul.gallery li .preview:hover .overlay, ul.gallery li .preview:hover .links {
	opacity: 1;
	filter: alpha(opacity=100)
}
ul.gallery li .preview:hover .links {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0)
}
  .fbtmargins {
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	max-width: 200px;
}
#stockists {
	margin-bottom: 10px;
}
#stockists .well {
	color: #666666;
	background-color: #FFFFFF;
	padding-top: 10px;
	margin-top: 10px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-bottom: 0px;
	min-height: 210px;
}
@media (max-width: 800px) {
.coheader h2 {
display: none;
}
}