@charset "UTF-8";


body {
    background-color:#eee;
}

/* #app {

} */

nav.navbar {
  background:#fff;
  padding:10px;
  /* border-bottom: 2px solid #6c9235; */
  box-shadow: none!important;
}

.navbar-light .navbar-nav a.nav-link {
  color: #222;
  font-size:16px;
}

.navbar-light .navbar-nav a.nav-link:hover {
  color: #000;
}

.nav-item.search-icon {
  display: inline-block;
  cursor: pointer;
  border:none;
  border-radius:3px;
  border:1px solid #ddd;
  padding: 7px 11px;
  margin-right:20px;
  color:#222;
  -webkit-transition: all 0.2s ease-in-out;    
  -moz-transition: all 0.2s ease-in-out;    
  transition: all 0.2s ease-in-out;     
} 

.nav-item.search-icon:hover {
  border:1px solid #222;
}


article.herb {
  background:rgba(0,0,0,.025);
  border-radius:5px;
  padding:15px;
  margin:0 0 10px 0;

}

.logo a img {
    max-width: 400px;
    height: auto;
}

.container {
  max-width: 1500px;
}

.container.auth {
  padding:6em 0;
}

.hero {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2e5370+17,000000+50,2e5370+83,2e5370+83 */
  background: #2e5370; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #2e5370 17%, #000000 50%, #2e5370 83%, #2e5370 83%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #2e5370 17%,#000000 50%,#2e5370 83%,#2e5370 83%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #2e5370 17%,#000000 50%,#2e5370 83%,#2e5370 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e5370', endColorstr='#2e5370',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  border-bottom:1px solid #2e5370;
}



.hero .inner-content {
    padding:2em 4em;
    max-width:1480px;
    margin:0 auto;
    color:#fff;
    background: rgba(0,0,0,.2);
}

.hero .inner-content p {
  font-size:1.2em;
}

.hero .inner-content p a {
  color:#efefef;
}

.search-form {
  padding: 10px;
  border-top: 1px solid #efefef;
  background: #fff;
    
}

.search-form form {
  position:relative;
  display:table;
  display:block;
  margin:2px auto;
  text-align: center;
  max-width:600px;
  padding:2px;
  background:#fff;
  border:1px solid #ccc;
}

.search-form form input[type=text] {
  display: table-cell;
  position:relative;
  top:3px;
  width:87%;
  height:24px;
  font-size:22px;
  padding:5px;
  color:#444;
  border:none;
}

.search-form form input[type=text]:focus {
  outline: none;
}

.search-form .btn.search-button {
  display: table-cell;
  display:inline-block;
  border:1px solid #ccc;
  background:#efefef;
  padding:7px 10px;
  line-height:1;
  margin:2px 0 0 0;
}

.paginator nav {
  padding:15px 0 0 0;
  text-align: center;
}

.paginator nav ul.pagination {
  display:block;
  margin:0 auto;
}

.paginator nav ul.pagination li {
  display:inline-block;
}

.page-item.active span.page-link,
.page-item.disabled .page-link {
  border: 1px solid #dee2e6;
  background: #efefef;
  padding: 15px;
  font-size: 20px;
  color: #444;
}

.page-item.disabled span.page-link {
  color:#eee;
}

a.page-link {
  border: 1px solid #dee2e6;
  background: #fff;
  padding: 15px;
  font-size: 20px;
  color: #555;
  transition: background-color 0.25s ease;
}

a.page-link:hover {
  background-color:#888;
  color:#fff;
}

.row.featured div {
    text-align: center;
    padding:5px;
    margin:10px;
    background:#fff;
}

.content-body {
  padding: 20px;
}

.content-body .col-inner {
  padding:20px;
  border-radius:5px;
}

.content.profile .col-inner{
  background: rgba(255,255,255,.8);
}

.content-body .col-inner h1 {
  font-size:30px;
  font-weight: 600;;
  color:#222;
  margin-bottom:20px;
}

.content-body .col-inner h3 {
  font-size:22px;
  font-weight: 900;;
  color:#222;
  margin-bottom:3px;
}

.content-body .col-inner h6 {
  font-size:15px;
  font-style:italic;
  color:#555;
}

.content-body .col-inner p,
.content-body .col-inner ul li {
  font-size:18px;
  color:#555;
}

.content-body .col-inner ul {
  padding-left:25px;
}

.content-body .col-inner ul li {
  list-style: square;
}

.griddy {
  padding: 0
}

.griddy .card {
  border: 2px solid rgba(0,0,0,.15);
  -webkit-transition: all 0.2s ease-in-out;    
  -moz-transition: all 0.2s ease-in-out;    
  transition: all 0.2s ease-in-out;     
}

.griddy .card:hover {
  border: 2px solid #aaa;
}


.griddy-inner {
  padding:5px 0;
}

.griddy-inner .col {
  margin-bottom:20px;
}

.griddy .card-body {
  padding:3px;
}


.griddy a h3.card-title {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #000;
  font-size: 17px;
  background-color:rgba(0,0,0,.025);
  padding:3px;
}

.griddy a  {
  display: block;
  text-decoration: none;
}

.griddy .card-footer {
  padding:10px;
}

.griddy .card-footer a h5 {
  text-align: center;
  color: #000;
  font-size: 17px;
  background:#eee;
  padding:10px 0;
}

.griddy .card-footer h5 {
  color:#aaa;
  font-size:12px;
  text-align:right;
  margin: 0;
}

.griddy .card-body img {
  max-width:100%;
}

.no-results {
  min-height: 300px;
}

.column-buttons {
  margin:0 0 20px 0;
}

.column-buttons .action-button {
  display:block;
  text-align: center;
  text-decoration: none;
  padding:10px;
  margin-bottom:3px;
  border:1px solid #222;
  font-size:18px;
  background:#9bcc64;
  color:#fff;
  cursor:pointer;
}


.column-stats {
  margin:0 0 20px 0;
}

.progress-box {
  margin-top: 30px;
}

.progress-box .step {
  display:inline-block;
  padding:10px;
  font-size:22px;
  line-height: 22px;
  margin-right: 5px;
  color:#aaa;
  border-radius:3px 3px 0 0;
}

.progress-box .step a {
  color:#000;
  text-decoration: none;
}

.progress-box .step.active {
  background-color: #fff;
  color:#000;
}

.upload-button {
  padding:20px;
  text-align:center;
  max-width: 600px;
  border: 1px solid #ccc;
  margin: 15px auto;
}

.profile-image img {
  max-width: 100%;
}

.form-wrap {
  margin:0 auto;
  padding: 15px;
  background:#fff;
}

.form-wrap .input {
  padding:10px;
  margin-bottom:10px;
  background-color:#fff;
}

.form-wrap .input.submit {
  border:none;
  padding:10px;
  margin-bottom:10px;
  background:none;
  text-align: center;
}

.form-wrap .input.submit button,
.form-wrap a.btn {
  font-size: 22px;
} 

.form-wrap .input label {
  display:block;
  font-weight: 600;
  font-size:20px;
}

.form-wrap .input input {
  display:block;
  width:100%;
  font-size:20px;
  padding:5px;
}

.form-wrap .input .cur {
  display: inline-block;
  width:8%;
  font-size:18px;
  padding:0 5px 10px 5px;
}

.form-wrap .input input.price {
  display:inline-block;
  width:90%;
  padding:2px 5px;
}

.form-wrap .input select {
  display:block;
  width:100%;
  font-size:20px;
  padding:5px;
  color:#777;
}

.form-wrap .input textarea {
  display:block;
  width:100%;
  font-size:20px;
  padding:5px;
}

#cke_description {
  font-size:24px;
}

#modal img {
  display: block;
  max-width: 550px;
}
  
#modal .modal-med {
  max-width: 670px !important;
}
#modal .cropper-container {
  max-width:620px!important;
}


.modal .row.controls {
  padding-top:15px;
}
.modal .row.controls .col {
  text-align: center;
}

.modal a.action-button {
  display:block;
  text-align: center;
  text-decoration: none;
  padding:10px;
  margin-bottom:3px;
  border:1px solid #222;
  font-size:18px;
  background:#9bcc64;
  color:#fff;
}

.modal-footer {
  font-size:12px;
  color:#999;
}

.options-wrap:hover {
  display:block;
  position:relative;
  width:100%;
  opacity:.75;
}

.options-wrap .image-tools {
  display:none;
  background:rgba(0,0,0,.8);
  position:absolute;
  bottom:0px;
  width:100%;
}

.options-wrap:hover .image-tools {
  display:block;
}

.options-wrap .image-tools .image-tool {
  color:#fff;
  cursor:pointer;
}

.photo-box {
  margin:0 auto;
  text-align: center;
}

.photo-grid {
  padding:100px 10px 10px 10px;
  background:rgba(100,100,100,.03);
  /* border:1px solid rgba(100,100,100,.1); */
  padding: 15px;
  border-radius: 5px;
  margin:10px 0 30px 0;
}

.photo-grid.photos-stage {
  background:none;
  border:none;
}

.photo-grid .row {
  padding-bottom:10px;
}

.photo-grid .row .col {
  padding: 10px;
  text-align: center;
}

.photo-grid .row .col img {
  max-width: 100px;
}

.photo-grid img.zoom {
  border:1px solid #222;
  height: auto!important;
  max-width: 100%;
  -webkit-transition: all 0.35s ease-in-out;    
  -moz-transition: all 0.35s ease-in-out;    
  transition: all 0.35s ease-in-out;     
  cursor: -webkit-zoom-in;      
  cursor: -moz-zoom-in;      
  cursor: zoom-in;
}
  
.photo-grid img.zoom:hover,  
.photo-grid img.zoom:active,   
.photo-grid img.zoom:focus {
  /* -ms-transform: scale(3);    
  -moz-transform: scale(3);  
  -webkit-transform: scale(3);  
  -o-transform: scale(3);  
  transform: scale(3);     */
  position:relative;      
  z-index:100;  
  box-shadow:0 0 4px #000;
}

.profile-image {
  margin-bottom:15px;
}

.profile-image img {
  border:1px solid #ccc;
  border-radius: 5px;
  height: auto!important;
  max-width: 100%;
  -webkit-transition: all 0.35s ease-in-out;    
  -moz-transition: all 0.35s ease-in-out;    
  transition: all 0.35s ease-in-out;         
}
  
.profile-image img:hover,  
.profile-image img:active,   
.profile-image img:focus {
  -ms-transform: scale(1.05);    
  -moz-transform: scale(1.05);  
  -webkit-transform: scale(1.05);  
  -o-transform: scale(1.05);  
  transform: scale(1.05);    
  position:relative;      
  z-index:100;  
}


.tag-cloud a.tag {
  display:inline-block;
  color:#333;
  padding:2px 5px;
  margin:2px;
  background:rgba(0,0,0,.05);
  border-radius:3px;
  text-decoration: none;
  -webkit-transition: all 0.15s ease-in-out;    
  -moz-transition: all 0.15s ease-in-out;    
  transition: all 0.15s ease-in-out;  
}

.tag-cloud a.tag:hover {
  background:#aaa;
  color:#fff;
}


.flash-message,
.flash-message-ajax {
  position: fixed;
  bottom:10px;
  right:0px;
  padding:15px;
  background: rgba(21,32,43,.9);
  color:#efefef;
  padding: 15px 25px;
  font-size:15px;
  font-weight:600;
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-radius: 3px;
  border-radius:10px 0 0 10px;
}

.flash-message-ajax {
  display:none;
}

#footer {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2e5370+0,192d3d+50,192d3d+54,2e5370+100 */
background: #2e5370; /* Old browsers */
background: -moz-linear-gradient(left,  #2e5370 0%, #192d3d 50%, #192d3d 54%, #2e5370 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #2e5370 0%,#192d3d 50%,#192d3d 54%,#2e5370 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #2e5370 0%,#192d3d 50%,#192d3d 54%,#2e5370 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e5370', endColorstr='#2e5370',GradientType=1 ); /* IE6-9 */

    padding:50px 0;
    border-top:1px solid #777;
  }
  
  #footer .footer-inner {
    max-width:1500px;
    margin:0 auto;
    padding:50px 0;
  }
  
  #footer .footer-inner .footer-box {
    background-color:rgba(200,200,200,.1);
    padding:40px 20px;
    min-height: 300px;
    text-align: center;
    border-radius:8px;

  }
  
  #footer .footer-bottom {
    padding-bottom:20px;
  }
  
  #footer .footer-bottom  p,
  #footer .footer-bottom a {
    color: #fff;
    text-align: center;
  }
  
  #footer ul.footer-nav {
    padding:0;
    margin:0;
    text-align: left;
    list-style: none;
  }
  
  #footer ul.footer-nav li a {
    display:block;
    color:#efefef;
    font-weight: 600;
    font-size:18px;
    padding:10px;
    background-color:rgba(200,200,200,.1);
    border-radius:5px;
    margin-bottom:3px;
  }
  

  .container.admin .btn-success {
    float:right;
  }

  .container.admin a.btn-success a {
    color:#fff!important;
  }


  @media (max-width: 768px) {
    .navbar-nav {
      margin:20px 0;
    }

    .nav-item.search-icon {
      text-align: center;
      margin: 0 auto;
      padding: 10px;

    }

    .navbar-nav .nav-item .nav-link {
      display:block;
      text-align: center;
      font-weight:600;
      border:2px solid #fff;
      border-radius:5px;
      color:#fff;
      margin:3px;
    }

    nav.navbar {
      padding: 0 10px;
    }



  }