/* Palette generated by Material Palette - materialpalette.com/green/light-green */

/*
.dark-primary-color    { background: #388E3C; }
.default-primary-color { background: #4CAF50; }
.light-primary-color   { background: #C8E6C9; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #8BC34A; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #727272; }
.divider-color         { border-color: #B6B6B6; }
*/

/* FONTS */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,700,900);

/* NAVBAR */

.navbar {
	font-weight: 800;
	font-size: 14px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #8BC34A;
	color: #FFFFFF;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	/* color: #ffffff; */
	/* background-color: #74cfae; */
	color: #727272;
	background-color: #8bc34a;
}

.navbar-brand {
	font-size: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Navbar Custom */

.navbar-custom {
  background-color: #388E3C;
  border-color: #8bc34a;
}
.navbar-custom .navbar-brand {
  color: #ffffff;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
  color: #8BC34A;
}
.navbar-custom .navbar-text {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
  color: #8BC34A;
}
.navbar-custom .navbar-nav > li > .dropdown-menu {
  background-color: #4caf50;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #727272;
  background-color: #8bc34a;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #4caf50;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
  color: #727272;
  background-color: #8bc34a;
}
.navbar-custom .navbar-nav > .open > a, .navbar-custom .navbar-nav > .open > a:hover, .navbar-custom .navbar-nav > .open > a:focus {
  color: #727272;
  background-color: #8bc34a;
}
.navbar-custom .navbar-toggle {
  border-color: #8bc34a;
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
  background-color: #8bc34a;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ffffff;
}
.navbar-custom .navbar-link {
  color: #ffffff;
}
.navbar-custom .navbar-link:hover {
  color: #727272;
}

.thumbnail {
    border: 0 none;
    box-shadow: none;
}

.jumbotron {
background: #4CAF50;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 14px;
padding-bottom: 14px; }
.jumbotron small {
color: #FFF;
}


/*
Ref:
Thanks to:
http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html
*/


#pinBoot {
  position: relative;
  max-width: 100%;
  width: 100%;
}

.white-panel {
  position: absolute;
  background: white;
  /* box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); */
  /* box-shadow: 1px 1px 1px 1px #669900; */
  box-shadow: 1px 1px 1px 1px #8BC34A;
  padding: 10px;
}
/*
stylize any heading tags withing white-panel below
*/

.white-panel h1 {
  font-size: 1em;
}
.white-panel h1 a {
  color: #A92733;
}
.white-panel:hover {
  /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); */
  /* box-shadow: 1px 1px 10px #669900; */
  box-shadow: 1px 1px 10px #8BC34A;
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

p.subcats {
   margin: 0px 0px 7px 0px;
   padding: 0px;
}

body {
  	padding-top: 70px;
  	/* background-color: #f2f2f2; */
    background-color: #dcdcdc;
  	font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color: #212121;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    
    margin-top: 70px;
}


.featured-thumb {
  margin-top: 35px;
  text-align: center;
}
.featured-thumb img {
  box-shadow: 0px 1px 2px #444;
  border-radius: 5px;
}

/*
Social
*/

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

.social .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

.social .fa-github:hover { /* round github icon*/
    background: #343434;
}

.social .fa-pinterest:hover { /* round pinterest icon*/
    background: #cb2027;
}

.social .fa-linkedin:hover { /* round linkedin icon*/
    background: #0094BC;
}

.social .fa-flickr:hover { /* round flickr icon*/
    background: #FF57AE;
}

.social .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

.social .fa-vimeo-square:hover { /* round vimeo square icon*/
    background: #83DAEB;
}

.social .fa-stack-overflow:hover { /* round stack overflow icon*/
    background: #FEA501;
}

.social .fa-dropbox:hover { /* round dropbox icon*/
    background: #017FE5;
}

.social .fa-tumblr:hover { /* round tumblr icon*/
    background: #3a5876;
}

.social .fa-dribbble:hover { /* round dribble icon*/
    background: #F46899;
}

.social .fa-skype:hover { /* round skype icon*/
    background: #00C6FF;
}

.social .fa-stack-exchange:hover { /* round stack exchange icon*/
    background: #4D86C9;    
}

.social .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

.social .fa-xing:hover { /* round xing icon*/
    background: #005C5E;
}

.social .fa-rss:hover { /* round rss icon*/
    background: #e88845;
}

.social .fa-foursquare:hover { /* round foursquare icon*/
    background: #09B9E0;
}

.social .fa-whatsapp:hover { /* round whatsapp icon*/
    background: #37b546;
}

.social .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

.social .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

.social .fa-email:hover { /* round email button icon*/
    background: #09B9E0;
}

.well {
    background: #ffffff;
}

/*change breadcrumb background color*/
.breadcrumb {
     background-color: #ffffff;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -o-border-radius: 0;
}

/*change breadcrumb links color*/
/* .breadcrumb a {
     color: #666;
}

.breadcrumb a:hover {
     text-decoration: none;
}

/*change active color*/
.breadcrumb > .active {
     color: #9CD05F;
}
*/
/*change breadcrumb separator to raquo symbol*/
.breadcrumb > li + li:before {
     content: "\00BB";
     color: #aaa;
}

.pagination>li>a, .pagination>li>span {
	border-radius: 50% !important;margin: 0 5px;
}

/* Footer */

#footer {
	background-color: #388E3C;
	padding-top: 50px;
	padding-bottom: 50px;
}

#footer a {
	color: #f5f5f5;
	text-decoration: none;
}

#footer a:hover {
	color: #ffffff;
}

#footer p {
	color: white;
}

#footer h4 {
	color: white;
	text-transform: uppercase;
	padding-bottom: 20px;
}

.footer-basic-centered{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	/* font: normal 18px sans-serif; */

	padding: 45px;
	/* margin-top: 80px; */
}

.footer-basic-centered .footer-company-motto{
	color:  #8d9093;
	font-size: 24px;
	margin: 0;
}

.footer-basic-centered .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	margin: 0;
}

.footer-basic-centered .footer-links{
	list-style: none;
	font-weight: bold;
	color:  #ffffff;
	padding: 35px 0 23px;
	margin: 0;
}

.footer-basic-centered .footer-links a{
	display:inline-block;
	text-decoration: none;
	color: inherit;
}

/* Box For About Us Page */


.box {
  background:#fff;
  transition:all 0.2s ease;
  border:2px dashed #dadada;
  margin-top: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  background-clip: padding-box;
  padding:0 20px 20px 20px;
  min-height:340px;
}

.box:hover {
  border:2px solid #525C7A;
}

.box span.box-title {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
}

.box .box-content {
  padding: 16px;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  box-sizing: border-box;
}
.box .box-content p {
  color:#515c66;
  text-transform:none;
}

/* Grid */

#posts { margin: 30px auto 0; }
.post {
	margin: 0 0 50px;
	text-align: center;
	width: 100%;
}
.post img { padding: 0 15px; width: 100%; }

#grid.container .post img { padding: 0; }


/* Medium devices */

@media (min-width: 768px) {
	#grid > #posts .post { width: 335px; }
	#grid > #posts .post.cs2 { width: 100%; }
	.post img { padding: 0; }
}



/* Medium devices */

@media (min-width: 992px) {
	#grid > #posts .post { width: 445px; }
	#grid > #posts .post.cs2 { width: 100%; }
}



/* Large devices */

@media (min-width: 1200px) {
	#grid > #posts .post { width: 346px; }
	#grid > #posts .post.cs2 { width: 742px; }
}



/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */

@media (min-width: 1300px) {
	#grid {
		left: -50px;
		padding-left: 50px;
		padding-right: 50px;
		position: relative;
    	}
	#grid.container {
		left: auto;
		padding-left: 15px;
		padding-right: 15px;
	}
}