/**
 * Description: Mac Usato - Home
 * Version: 1.0.1
 * Last update: 2019-12-10
 * Copyright (C) 2018 Mac Usato
 */

 body{padding-top: 74px;}

nav#top-bar{background-color: #333;}
nav#top-bar .nav-link.dropdown-link{color: #CCC;}

main.container{margin-top: 1rem;}

.navbar-toggler-icon img{filter: invert(70%);}

.jumbotron-search{height: 54px;margin-bottom: 1rem;background-color: transparent;border: 2px solid;border-color: rgb(233, 236, 239);padding: 0;border-radius: .3rem;}
.jumbotron-search .list-group{list-style:none;}
.jumbotron-search .list-group li{display: none;height:23px;line-height:23px;padding-left:2rem;}
.jumbotron.home-publish{padding-top: 1.5rem; padding-bottom: 1rem;}

footer{background:#FFFFFF;}

#search-form-home .input-group{width: 70%;}
#search-form-home .input-group input[name='q']{
  width: 29%!important;
  height: 30px;
  font-size: 1.2rem;
  padding: 0 0 0 15px;
  border: 0;
  border-top-left-radius: 3px!important;
  border-bottom-left-radius: 3px!important;
  border-top-right-radius: 0px!important;
  border-bottom-right-radius: 0px!important;
  border-left: 1px solid #CCC;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  -webkit-appearance: none;
  line-height: 1.20;
  margin-top: 1px;
}
#search-form-home .form-control:focus{border-color:#d9d9d9;}
#search-form-home .input-group-prepend{
  border-right:2px solid #cfd9e0;
  margin-right: 2px;
  background: url('../../../images/layouts/responsive-4/feather/chevron-down.svg') no-repeat 90% 7px;
  background-size: 20px 20px;
  opacity: 0.5;
}

#search-form-home select[name=cat]{
  background-color: transparent;
  font-size: 1.0rem;
  width: 200px;
  height: 100%;
  border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;border-left:none;border-right:none;
  margin: 0 0 0 1rem;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
  color:#000000;outline:none;display: inline-block;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
}

#search-form-home button{
  width: 8%;
  border-right:2px solid rgb(233, 236, 239)!important;
  border-radius:0!important;
  background-color: transparent;
  text-align: center;
}

#search-form-home .glyphicon-search{color: #6a757c;cursor: pointer; font-size: 1.2rem;margin-top: 4px;}

.home-publish{background-color: #F8F8F8;}
.home-publish h1{font-size: 1.5rem; margin-bottom: 20px; color: #666666;}
.home-publish .glyphicon {margin-right: 5px;}

.list-group .list-group-item {color: #000000;}
.list-group .list-group-item img{width: 150px; height: 150px;}

.suggested img{width: 97px!important;height: 97px!important;}

/* CAROUSEL
----------------------------------------------------------------------------- */

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom:auto;
  left: 15%;
  right: 15%;
}

.carousel-caption a.btn {color: #FFFFFF!important;border: 2px solid #FFFFFF;}
.carousel-caption a.btn:hover{background-color: #0056b3!important;}

/* Declare heights because of positioning of img element */
.carousel-item {
  /*height: 16rem;*/
  background-color: #777;
  /*border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;*/
  overflow: hidden;
}
.carousel-item > img {
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
/*.carousel-inner {height: 200px;}*/
.carousel-inner .background-link{display: block;width: 890px; height: 200px;margin: 0 110px;position:absolute;z-index:1;}

/* MARKETING CONTENT */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

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

a.bg-primary:hover{background-color: #007bff!important;}
a.bg-warning:hover{background-color: #ffc107!important;}
a.bg-info:hover{background-color: #17a2b8!important;}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption h2 {font-size: 2rem;}
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.4;
  }

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

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
/* CAROUSEL - END
----------------------------------------------------------------------------- */


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .jumbotron-search{padding: 0; background-color: transparent;}
  #search-form-home .input-group input[name='q']{font-size: 17px!important;}
  #search-form-home button{width: 15%!important;}
  #search-form-home .input-group-prepend{background-position: 45% 8px!important;}
  #search-form-home .input-group-prepend #search-category{width:40px;color: transparent;margin-left: 0;}
  .carousel-caption h1{font-size: 1.5rem!important;}
  .carousel-caption p{font-size: 1.0rem!important;}
  .col-sm.text-center{margin-bottom: 2rem;}
  .col-sm.text-center .h4{color: #666666;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
  ul.navbar-nav li.nav-item a.nav-link.dropdown-link{color: #0069d9!important;}
  .jumbotron.home-publish .btn{width: 100%;}
  #search-form-home button{width: 10%;}
  main.container{margin-top: 11px;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
  #search-form-home .input-group{width: 100%;}
  .carousel-caption h1{font-size: 1.5rem;}
  .carousel-caption p{font-size: 1.1rem;}
  .carousel-inner .background-link{width: 470px;}
  #search-form-home .input-group-prepend{background-position: 90% 8px;background-size: 18px 18px;}
  #search-form-home select[name=cat]{font-size: 0.9rem;}
  #search-form-home button{border-right:none!important;}
  .carousel-caption h2 {font-size: 1.5rem;}
  .list-group .list-group-item img{width: 121px; height: 121px;}
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199px) {
  #search-form-home .input-group input[name='q'], #search-form-home select[name=cat]{font-size: 1rem;}
  .carousel-inner .background-link{width: 700px;}
}