@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
@import url(http://fonts.googleapis.com/css?family=Playball);
@import url(http://fonts.googleapis.com/css?family=Lora);
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {  
  color: #555555;
  font-family: 'Lora', serif;
  font-weight:400;
  font-size:14px;
  background:#fff;
}


h2{ font-size:16px; 
	font-family: 'Roboto', sans-serif;
	
	}
h2 a { color: #fc2221; font-size:16px;}	
h2 a:hover { color: #9d9d9d;}
h3{ font-size:18px; 
	font-family: 'Roboto', sans-serif;
	}
	a{ color:#555555; }
	a:hover{ color:#9d9d9d; text-decoration:none;}
	
.jumbotron{ background:#fff; margin:0 0 0 0; border-radius:0px !important; min-height:400px; padding:0px !important;}

.jumbotron p{ font-size:14px;}

.jumbotron h1{ font-size:36px; 
	font-family: 'Roboto', sans-serif;
	}
	
/*Side Bar*/

/* make sidebar nav vertical */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
  
}
.navbar-wrapper .navbar .container {
  width: auto;
  
}

.navbar-inverse{
	background:#ececec;
	border:#cccbcb;
	}

.navbar-inverse .navbar-nav>li>a {
	
	font-weight:500;
	font-size:15px;
	border-right:  1px solid #CECECE;
	text-transform:uppercase;
	color:#272727;	  	
	}
.navbar-inverse .navbar-nav>li>a:hover { color:#737373;  }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 350px;
  
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 350px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 350px;
}

.carousel-control:hover {
  color:#4f8263;
}

.carousel-indicators .active { background-color:#4f8263;}

.slider-wrap{
	padding:10px;
	background:#e4e4e4;
	border-radius:4px;
	}

/* MARKETING CONTENT
-------------------------------------------------- */

.thumbnail1 {
    width: 225px;
    height: 265px;
    overflow: hidden;
    position: relative;
    
    background:#f3f3f3;
    display: inline-block;
    margin: 5px;
}
img1 {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}


.top-nav{ background:#4F8263; min-height:50px; color:#fff; font-family: 'Open Sans', serif; font-size:14px; font-weight:500;}
.top-nav a{ color:#fff !important;}
.top-nav a:hover{ color:#eee !important;}
.top-account{ text-transform:uppercase; font-size:16px; }
.top-account a{ color:#555555 !important;}
.social-slide {
	height: 32px;
	width: 32px;
	margin:0 10px 10px 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -32px;
	/*box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);*/
}
.twitter-hover {
	background-image: url('../img/twitter-hover.png');
}
.facebook-hover {
	background-image: url('../img/facebook-hover.png');
}
.google-hover {
	background-image: url('../img/google-hover.png');
}
.pinterest-hover {
	background-image: url('../img/pinterest-hover.png');
}
.linkedin-hover {
	background-image: url('../img/linkedin-hover.png');
}
.yelp-hover {
	background-image: url('../img/yelp-hover.png');
}
.instagram-hover {
	background-image: url('../img/instagram-hover.png');
}


.testimonials{
	padding:50px 50px;
	color:#fff;
	background:#3fc1e5;}

.black-circle {
	padding:50px;
	border-radius:100px;
	background:#262626;
	width:100px;
	height:100px;}

#search-form .form-control{ padding: 6px 1px; }
#search-form label {font-size:12px;}

.header-top{
	min-height:40px;
	background:#ededed;
	color:#fff;
	font-size:12px;
	padding-top:12px;
	text-transform:uppercase;}
.header-top a{ color:#5e5e5e; }

.header-logo{
	min-height:120px;
	background:#fff;
	color:#fff;
	font-size:14px;
	padding-top:2px;
	padding-bottom:12px;
	text-transform:uppercase;}

.header-logo a{ color:#5e5e5e; }

.main-heading{
	font-family:'Roboto', sans-serif;
	font-weight:700 !important;
	color:#555555 !important;
	}
	.panel-heads{
	color: #555555;
    font-size: 18px;
    text-transform: uppercase;
	}
	.sub-heading{
	color:#4f8263;
	font-size:36px;
	font-family: 'Playball', cursive;
	font-weight:500 !important;
	}
.blue-txt{
	color:#4bc7e9;
	font-size:24px !important;
	font-weight:500 !important;
	}
	.green-circle {
	height: 78px;
	width: 78px;
	background: transparent;
	background-color: rgb(140,197,84);	
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 150px 150px 150px 150px;
	-moz-border-radius: 150px 150px 150px 150px;
	-ms-border-radius: 150px 150px 150px 150px;
	border-radius: 150px 150px 150px 150px;
	}	
	.green-cicle-img1 {
		background-image: url('../img/page1_img2.png');
		}
	.green-cicle-img2 {
		background-image: url('../img/page1_img3.png');
		}
	.green-cicle-img3 {
		background-image: url('../img/page1_img4.png');
		}
	.green-cicle-img4 {
		background-image: url('../img/page1_img5.png');
		}
	


/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}

	.product-box{
	color:#d4d4d4;
	font-size:14px;
	min-height: 375px;
	}
.product-box h2{ font-size:18px; }
.product-box p{ font-size:14px; }

.product-title{ 
	font-family:"MS Serif", "New York", serif;
	font-size:18px;
	color:#3f3c3c;
	font-weight:500;
	}

.product-price{
	font-family: 'Playball', sans-serif;	
	font-size:18px !important;
	color:#6d9f02;
	font-weight:500;} 


.custombtn{
	border: 1px solid rgba(0,0,0,0.1); 
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); 
	background-color:#6d9f02;}
	
.btn-square{
	border-radius:0px;}
	
	.quote_content {	
	background: url(../img/quotes.png) no-repeat 0 0;
	text-indent: 30px;
	padding: 5px 0 0 0;
	}

	.elegance{
		font-family: 'Playball', cursive;
		font-size:36px;
		color:#fff;
		font-weight:500;
	}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 10px 0; /* Space out the Bootstrap <hr> more */
  background:#333;
  height:1px;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.footer-bg{ 
	
	background:#f6f6f6;
	font-size:14px;
	padding-top:15px;}
.footer-bg ul>li>a{
	color:#555555;}
	
	.footer-bg h2{
		color:#555555;
		font-size:18px;
		text-transform:uppercase;}
	.email-link a{
		color:#f0585a;}
	.tele-text{
		font-size:30px;
		color:#fff;
		background:url(../img/tel-icon.png) no-repeat;
		padding-left:50px;
		}
	.tel-link{
		font-size:16px;
		font-weight:700;}
	.tel-link a{
		font-size:24px;}

 .event-list {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: rgb(197, 44, 102);
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list > li:nth-child(even) > time {
		background-color: rgb(165, 82, 167);
	}
	.event-list > li > time > span {
		display: none;
	}
	.event-list > li > time > .day {
		display: block;
		font-size: 56pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list > li time > .month {
		display: block;
		font-size: 24pt;
		font-weight: 900;
		line-height: 1;
	}
	.event-list > li > img {
		width: 100%;
	}
	.event-list > li > .info {
		padding-top: 5px;
		text-align: center;
	}
	.event-list > li > .info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
	}
	.event-list > li > .info > .desc {
		font-size: 13pt;
		font-weight: 300;
		margin: 0px;
	}
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 50%;
		text-align: center;
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
        padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 50%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list > li > .social > ul > li {    
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: rgb(79, 213, 248) !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(79, 213, 248) !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}

	@media (min-width: 768px) {
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			min-height: 150px;
			padding: 0px;
		}
		.event-list > li > time,
		.event-list > li > img  {
			display: inline-block;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			float: left;
		}
		.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
		}
		.event-list > li > .info {
			position: relative;
			/*min-height: 150px;*/
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title, 
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
	}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }
  
    The navbar becomes detached from the top, so we round the corners 
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }
  
 
 /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (max-width: 525px) {
	
	.carousel {
  		height: 120px !important;
	}

/* Declare heights because of positioning of img element */
	.carousel .item {
	  height: 120px !important;
	}
	
	.carousel-inner > .item > img {  
  		height: 120px !important;
	}
	#img-cont{
		min-height:100px !important;}
		
		.top-nav{ font-size:10px; zoom:.8; }
		
	.tel-link{
		font-size:11px; padding-right:100px !important;}
	.tel-link a{
		font-size:11px;}
		
		.cart-items{ margin-top:2px !important;}
	#top-list { padding-left:1px !important;}
	
	#right-logo{ margin-top:1px !important;}
	
	}
	
.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: auto;
    height: auto;
    background: #E8E8E8;
	padding:10px 18px 10px 18px;
	font-size:18px;
    color: #4F8263;
    text-align: center;
    display: inline-block;
}
	
	
	
	/*.navbar-inverse {
		
		50px;}*/

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}