@charset "UTF-8";
/*
Name:  allofly.com
Author: jamal Arbib
Author URI: 
Copyright: 2020, Monagence.com
Version: 0.1
*/
/**
 * Table of Contents:
 *
 * 1.0 - Mixins
 *   1.1 - Clearfix
 *   1.2 - Format-font
 * 2.0 - Variables
 * 3.0 - Layout
 *   3.1 - Global
 *   3.2 - Header
 *   3.3 - Footer
 * 4.0 - Pages
 *   4.1 - Index
 *   4.2 - Produit
 * 5.0 - Components
 *   5.1 - nav
 *   5.2 - navbar
 *   5.3 - cards
 *   5.4 - buttons
 * 6.0 - Fixes
 * -----------------------------------------------------------------------------
 */
/**
 * BEWARE :
 * If you want to modify some padding, colors etc, please take a look in global/_variables.scss
 * The property you want to modify may exists inside that file
 */
/** Reset */
/**
 * @template: mixins/_main.scss
 * @name: main
 * @description: Import all mixins
 */
/**
 * @name: clearfix
 * @description: http://nicolasgallagher.com/micro-clearfix-hack/
 * @param:
 */
/**
 * @name: format-font
 * @description: Define the line-height & the width of element by its font-size
 * @param: Float $font-size
 * @use  : @include format-font(30);
 */
/**
 * @template: global/_variables.scss
 * @name: variables
 * @description: here are all variables for the website
 */
/**
 * @template: global/fonts.scss
 * @name: fonts
 * @description: Import & define fonts for the application
 *
 * TTF fonts does not work on IE8-
 */
/** Open Sans fonts */
@font-face {
  font-family: openSansRegular;
  src: url(../../fonts/OpenSans-Regular.ttf);
  font-weight: 400; }
@font-face {
  font-family: openSansBold;
  src: url(../../fonts/OpenSans-Bold.ttf);
  font-weight: 700; }
@font-face {
  font-family: OpenSansItalic;
  src: url(/../../fonts/OpenSans-Italic.ttf);
  font-weight: 400;
  font-style: italic; }
/** Lato fonts */
@font-face {
  font-family: latoRegular;
  src: url(/../../fonts/Lato-Regular.ttf);
  font-weight: 400; }
@font-face {
  font-family: latoBold;
  src: url(/../../fonts/Lato-Bold.ttf);
  font-weight: 700; }
@font-face {
  font-family: latoBlack;
  src: url(/../../fonts/Lato-Black.ttf);
  font-weight: 900; }
@font-face {
  font-family: latoItalic;
  src: url(/../../fonts/Lato-Italic.ttf);
  font-weight: 400;
  font-style: italic; }
@font-face {
  font-family: latoBoldItalic;
  src: url(/../../fonts/Lato-BoldItalic.ttf);
  font-weight: 700;
  font-style: italic; }
/** Poire-One fonts */
@font-face {
  font-family: poiretOne;
  src: url(/../../fonts/PoiretOne-Regular.ttf);
  font-weight: 400; }
/** Component */
/*@import 'components/main';
@import 'components/seo-content';
@import 'components/carousel';*/
/** Core css */
/**
 * @template: global/_layout.scss
 * @name: layout
 * @description: Default style of elements
 */
html {
  min-height: 100%;
  font-size: 1rem; }

/*
@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

@media (max-width: 575.98px) {
  @include media-breakpoint-up(sm) ;
}

body {
  padding: 0;
  margin: 0;
  font-family: openSansRegular, sans-serif;
  min-height: 100%;
  position: relative;
  color: #666666; }

body * {
  border:0;
  border-radius: 0;

}

.container {
  /* border:1px solid red*/ }

section[role=main] {
  margin-top: 0px;
  padding-top: 0px; }

section[id=complementary] {
  margin-top: 30px;
  margin-bottom: 50px; }

ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block; }

a, a:hover, a:focus, a:visited {
  color: #666666;
  text-decoration: none; }

* {
  border-radius: 0px; }

h1, h2 {
  color: #666666;

  /* @media (max-width: 575.98px) {font-size: 1.1em; line-height: 1.1em;} 24px*/
}
select option:disabled {
  color:#999999; opacity:0.3; -moz-opacity:0.3; -webkit-opacity:0.3;
}

.container h1{margin-top: 20px;margin-bottom:30px;}

/* search engine (select = flexibilit├®) for custom-select*/
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 12px;
  padding-left: 2px; }

/*@import 'global/header';
@import 'global/search-engine';
@import 'global/footer';
@import 'global/complementary';

@import 'pages/index';
@import 'pages/product';
@import 'pages/informations';
@import 'pages/services';
@import 'pages/compte';

/*@import 'pages/404';*/
/** Fixes */
/*
@import 'pages/fixes';
@import 'global/responsive';*/
/*
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {  }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {  }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }

*/

/**
*  -------------header-------
*/

.logo-allofly{
  width:200px;
}

.navbar{
  background:#008dd7; color:white;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: white
}
.nav-link,.navbar-brand {
  color: white
}
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: white
}
.navbar-brand .fa, .navbar-brand .fas {
  color: white
}
.navbar-nav{/*width:80%;*/width:100%;height: 100%}
.nav-item{
  padding-left:3px; padding-right: 3px;
}
.navbar-expand-lg .navbar-nav li:hover {
  background: #f8b805;
  color:white;height: 100%;border-radius: 5px;
}
.navbar-brand a{margin-right:20px;}
.navbar-brand a:hover i{color:#f8b805;}
.navbar-light .navbar-toggler-icon {

}
.navbar-toggler-icon {
  color:white;
}

.navbar-light .navbar-toggler {
  border-color: #fff;
  border-radius: 0px
}
.nav-link {
    text-transform: uppercase ;
}

/**
*  search engine form
*  override some bootstrap's css
*/

#search{
  width:100%;
  height:300px;
  position:relative;
  overflow: hidden /*400*/}

#search .container{position:relative;}
#search .search-form {
  color:white;
  position:absolute;
  bottom:20px;
  border-radius:8px;
  padding:0px 15px 0px 15px;
  background-color: rgba(0, 0, 0, 0.6);

  width:97%
}

.form-control { border-radius: 0;border:0;}
.input-group > .input-group-prepend > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color:white;
  border-left:0px;
  padding: .375rem .75rem;
  border-radius: 0px;
  border:0px;

}
.custom-select {
  border-radius: 0;border:0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ----- selection pax -------- */

.pax-selection{
  margin-bottom: 5px;
}
.pax-selection input{
  color: #181d69;padding: 0px;
  text-align: center;
  font-weight: bold;
  border:0;
}
/*  +/- */
.pax-selection button {
  padding: 0px;
  width:20px;
  height:20px;
  border-radius: 50%;
  background: #fbbb18;
  color:#fff;
  border:0
}
.pax-btn-desabled {
  background: #CCCCCC;
  color:#fff;
}
.btn-pax {color:#333333; background: white;border-radius: 0;width:100%}
.pax-btn-menu {
  padding: 15px;
  color:#333333;
  font-size: 12px;
  background: white;
  position:absolute;
  width:250px;
  top:-160px;
  border:1px solid #cccccc;

}
#search .search-form button[type="submit"]  {
  background-color:#f7a502;
  color:white;
  border-radius: 30px;
  background: linear-gradient(#f7a502, #f8b805);

}

/* Autocomplete
----------------------------------*/
.ui-autocomplete { position: absolute; cursor: default; }
/*.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }*/
.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/* Menu
----------------------------------*/
.ui-menu {
  list-style:none;
  padding: 10px;
  margin: 0;
  display:block;
  width:200px;
  font-size: 14px;
}
.ui-menu .ui-menu {
  margin-top: -3px;
}
.ui-menu .ui-menu-item {
  margin:0;
  padding: 0;
  width: 180px;
}
.ui-menu .ui-menu-item a {
  text-decoration:none;
  display:block;
  padding:.2em .4em;
  line-height:1.5;
  zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
  margin: -1px;

}

/*  ---------------datepicker ------------------*/

#ui-datepicker-div{
  width:220px
}
.ui-datepicker th{
  color:gray;
  font-weight:bold
}
.ui-datepicker th{
  border:0 none;
  font-weight:bold;
  padding:0.3em 0.1em;
  text-align:center
}
.ui-datepicker td .ui-state-default{
  color:#666;
  filter:none;
  margin-bottom:0;
  padding:5px;
  text-align:center
}
.ui-corner-all{
  border-radius:0
}
.ui-datepicker .ui-datepicker-header{
  background-color:#181d69;
  font-weight:bold;
  color:#fff
}
.ui-datepicker td .ui-state-active{
  background-color:#181d69;
  border-radius:0px;
  color:#fff;
  border:0px
}
.ui-datepicker td .ui-state-highlight{
  background-color:#181d69;
  border-radius:0px;
  color:#fff;
  border:0px
}
.ui-datepicker td .ui-state-default{
  border-radius:0px
}
.ui-datepicker td .ui-state-default:hover{
  background-color:#181d69;
  color:white
}

.ui-widget-header .ui-icon {
  background-image: url("../../js/libs/jquery-ui-1-12-1/images/ui-icons_ffffff_256x240.png"); /*fond blanc*/

}
.ui-widget-header .ui-icon:hover {
  background-image: url("../../js/libs/jquery-ui-1-12-1/images/ui-icons_777777_256x240.png"); /*fond blanc*/

}


/**
*  -------------footer-------
*/

 footer{
   background: #008dd7;
   color:white;
   padding-top:20px;
   padding-bottom:20px;
   margin-top:0;
  /* margin-top:200px;*/
 }
.footer-info a,.footer-info a:hover {color:white}
.footer-info div{border-right:1px solid white;}
.footer-info div:last-child{border-right:0;}


/**
*  -------------index-------
*/
.page-index{margin-top:40px }
.b-fly .list-group {border-radius: 0px}
.b-fly h2 {background: #008dd7;padding-top:5px;padding-bottom: 5px;color: white }
.b-fly ul {margin-top:0px;padding-top: 0px; }
.list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.list-group-item:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.list-group-item + .list-group-item {
  border-top-width: 1px ;
}
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  background-color: #fff;
  /*border: 1px solid red*/
  margin-bottom:5px;
  margin-top :5px;
}
.list-group-item:hover {
  background-color: #f8b805;
  color:white;
  border:0px;
}
.list-group-item .price{
  position:absolute;
  top:0px;
  right: 10px;
  font-size: 1.5rem;
  color:#008dd7;
  /*color:#f7a502;*/
  font-weight: bold;
}
.list-group-item:hover .price {
  color:white;
}

.list-group-item .details{
  position:absolute;
  bottom:10px;
  right: 10px;
  font-size: 1rem;
  /*color:#181d69;*/
}
.fa-plane{ transform: rotate(330deg)}
.flight-hotel{
  background:#ffffff;
  margin-top:30px;
  margin-bottom:30px;
  padding-top:20px;
  padding-bottom:50px
}

.zoom {
  max-width:100%;
  overflow: hidden;
}
.zoom div  {
  overflow: hidden;
}
.zoom div img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.5);
}
.zoom div:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);

}
.why{
  background:#f8b805; width:50px;height:50px;border-radius:50%; color:white;
  margin-left:auto;
  margin-right: auto;
}
.why i{ margin-top:25%; margin-left:10%; font-size:24px }


/*
 -----------  breadcrumbStep---------------
*/


#breadcrumbStep {
  list-style-type: none;
  margin: 20px 0 40px 0 ;
  padding: 0;
  height: 70px;
  position: relative; }

#breadcrumbStep::before,
#breadcrumbStep li.selected::before {
  content: "";
  height: 2px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 14px; }

#breadcrumbStep::before {
  background-color: #e1e3e4;
  width: 100%; }
#breadcrumbStep li {
  float: left;
  width: 20%;
  position: relative;
  padding: 0; }

#breadcrumbStep li::before {
  background-color: #f8b805 /*#317bac*/;
  width: 100%; }

#breadcrumbStep li.selected span {
  background: #f8b805; }


#breadcrumbStep li a {
  font-style: normal;
  color: #e1e3e4 !important; }


#breadcrumbStep li h1,
#breadcrumbStep li strong {
  /*transition: color .2s, margin-top .2s, opacity .2s;*/
  font-weight: 300;
  font-size: 14px;
  text-align: center;
  margin-top: 45px;
  display: block;
  text-transform: uppercase;
  color: #e1e3e4;
  /*opacity: 0;*/ }
#breadcrumbStep li span {
  padding-top: 3px;
  transition: background .2s;
  font-size: 18px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0px;
  margin: 0 auto;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background-color: #e1e3e4;padding-left:2px; }

#breadcrumbStep li span:hover {
  border-radius: 0%;
}

#breadcrumbStep li.selected {
  font-size: 12px;
  color: #5e6568;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden; }

#breadcrumbStep li.selected h1,   #breadcrumbStep li.selected strong {
  color: #5e6568;
  font-weight: 700;
  margin-top: 35px;
  opacity: 1; }
#breadcrumbStep li.step4 {
  margin-right: 0; }
@media screen and (max-width: 768px) {
  #breadcrumbStep li {
    display: none;
    float: none;
    margin: 0 auto;
    width: 20%;
    position: relative; }
  #breadcrumbStep li.selected {
    display: block;
    width: 100%; } }
#breadcrumbStep li:not(.selected):hover {
  font-size: 12px;
  color: #5e6568;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden; }
#breadcrumbStep li:not(.selected):hover span {
  background: #f8b805; }
#breadcrumbStep li:not(.selected):hover h1,   #breadcrumbStep li:not(.selected):hover strong {
  color: #90989c;
  font-weight: 700;
  margin-top: 35px;
  opacity: 1; }

/*-----------  list vols---------------*/
/* ---- recap ----------*/
.page-search{
  color:#666666
}
.search-user {
  background: #f5f4f4;
  margin-bottom:30px;
  padding:20px;
  box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  -moz-box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  justify-content: space-between;
  border-radius: 10px;
  color:#666666
}
.search-user .fa-globe-africa{font-size: 36px;}
.search-user .selection {
  border-bottom:1px solid #666666;
  padding-bottom: 10px;
  font-weight: bold;

}

.product-item {
  border:1px solid #ccc;
  padding-top:10px ;padding-bottom: 10px;
  margin-bottom:20px;
  box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  -moz-box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(117, 117, 117, 0.64);
  justify-content: space-between;
  border-radius: 5px;
}

.product-item .item-duration{
  margin-left: 10px;margin-right: 10px;
}
.product-item .item-duration span:first-child{
  font-size: 18px;font-weight: bold;
}


.item-luggage .fa-suitcase {
  color:#008dd7;
  font-size: 24px;font-weight: bold;
 margin-right:5px;
}
.item-luggage span {
  font-size: 18px;font-weight: bold;
}

.product-item .btn-detail {
 /* background: #f8b805;*/

  border-radius: 30px;
  margin-bottom: 3px;
  font-size: 0.8rem;
 /* padding-left: 30px;
  padding-right:25px;*/
  margin-left: 10px;

  border:1px solid #008dd7;
  color:#008dd7;
}
.product-item .btn-detail:hover {
  background: #008dd7;
  border:1px solid white;
  color:white;
}
.product-item .item-price span:last-child{
  font-size: 24px;
  color: #008dd7;
}
.product-item .btn-cart {
  background: #eda707;
  color:white;
  border-radius: 30px;

}

.product-item:hover {
  background: #f5f4f4;
  border:1px solid white;
}



.item-detail{
  border-top:1px solid #ccc;
  display:none;
  padding-top:50px;
  padding-bottom:50px
}

.item-selected__ {
  -webkit-animation-name: colorChange; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: colorChange;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.item-selected {
  background-color:  #f5f4f4;
  border:3px solid #008dd7;

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes colorChange {
  from {background-color:  #f5f4f4;}
  to {background-color: #fff;}
}

/* Standard syntax */
@keyframes colorChange {
  from {background-color: #f5f4f4;}
  to {background-color: white;}
}

#cart-total{
  font-size: 1.3rem;
  font-weight: 400;
  width:150px;

}
.search-user .btn-book{

  padding-left:20px;
  padding-right:20px;

  background: #eda707;
  color:white;
  border-radius: 30px;

}
.search-user .h3{margin-bottom: 40px}

/*
 -----------  step booking > personnal info---------------
*/
.booking-cart{
  min-height: 200px;
  background-color:#faf6f6;
  padding-top: 20px;
  font-size: .8rem
}
.booking select, .booking input{
  border:1px solid #ccc ;
}
.booking h3{
  color:#666666;
}
.booking i{
  margin-right: 10px;
}
.booking .form-connexion{
  border-bottom:1px solid #ccc;
  padding-bottom:50px;
  margin-bottom:50px;

}
.forget-pwd{text-decoration: underline;}
.booking select, .booking input{
  border:1px solid #ccc ;
}
.booking  .btn-primary {
  color: #fff;
  background-color:#f8b805;
  border-color:#f8b805;
  border-radius: 30px;
  width: 100%

}
.booking  .btn-primary:hover {
  color: #fff;
  background-color:#f8b805;
  border-color:#f8b805;
  border-radius: 30px;
  width: 100%

}
.booking .custom-select {
  padding: 0px;
  font-size: 0.9rem;
}
.booking input#password  {


}


.booking #validationTooltipUsernamePrepend{background-color:#ccc;}
.booking #add-user-book{font-size: .9rem;
  border-radius: 30px;
  padding-top: 7px;
  padding-bottom: 7px
}

/*
.booking [required] {
  border: 2px dotted orange;
}

.booking :required {
  border: 2px dotted orange;
}
*/
/*
 -----------  step booking > passengers ---------------
*/

.booking-passengers{
  /* padding-top: 20px;*/
}
.booking-passengers h2{
  margin-bottom: 40px
}
.booking-passengers .form-row{
  margin-bottom: 20px
}
.booking-cart{
  min-height: 200px;
  background-color:#faf6f6;
  padding-top: 20px;
  font-size: .8rem
}

/*
 -----------  step booking > quote ---------------
*/

.booking{
  border:1px solid #f8b805;
  /* margin : 20px 0 20px 0 ;*/
  padding:20px;
}
.traveler div:first-child{width:25%}
.traveler div:last-child{width:10%}
#form-discount #code{

}

#form-paiment .btn-primary {
  color: #fff;
  background-color:#181d69;
  border-color:#181d69;
  border-radius: 0;
}

#form-discount  label{margin-right: 10px;}
#btn-discount{
  color: #fff;
  background-color:#f8b805;
  border-color:#f8b805;
  border-radius: 0;
  width:50px;border-radius: 30px;

}

.btn-quote-validate{
display:block;
  background:#008dd7;
  color:white;
  padding:10px;
border-radius: 30px;}

/*
 -----------  step booking > paiement ---------------
*/

#form-paiment #btn-paiement {
  color: #fff;
  width: 100%;
  background:#008dd7;
  padding:10px;
  border-radius: 30px;}



/*
 -----------  header   ---------------
*/
.header-shopping{
  font-size: 20px;
  color:#181d69;
  margin-top:20px;
  border:1px solid #f7a502;
  padding: 5px 8px;
  border-radius: 10px;
}
.header-user{
  font-size: 20px;
  color:#181d69;
  margin-top:20px;
  border:1px solid #f7a502;
  padding: 5px 10px;
  border-radius: 10px;"
}
.header-user:hover,
.header-shopping:hover{
  color:white;
  background:#f7a502 ;
}



/*
 -----------  User enregistration /update/  ---------------
*/
/**
    *
    *  style for personnal info step
    *
    */
.page-user{
  margin-top:40px;
}
/*
.booking-cart{
  min-height: 200px;
  background-color:#faf6f6;
  padding-top: 20px;
  font-size: .8rem
}
*/

.user select, .user input{
  border:1px solid #ccc ;
}

.user i{
  margin-right: 10px;
}

.user .form-connexion{
  border-bottom:1px solid #ccc; padding-bottom:50px;margin-bottom:50px;
}

.forget-pwd{text-decoration: underline;}

.btn:hover {
  color: #212529;
  text-decoration: none;
}
.user  .btn-primary {
  color: #fff;
  background-color:#f8b805;
  border-color:#f8b805;
  border-radius: 0;
  width: 100%
}

.user  .btn-primary:hover {
  color: #fff;
  background-color:#f8b805;
  border-color:#f8b805;
}

.user #validationTooltipUsernamePrepend{background-color:#ccc;}
.user #add-user{font-size: .9rem}


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

  /*logo*/
  .d-flex div{
    text-align: center;
  }
  .logo-allofly{width: 150px}

  #search  {
    height:420px;
    /*overflow: hidden*/
  }
  #search .search-form {
    top:20px;
    width: 90%;
    border-radius: 10px;
    padding-bottom: 15px;
  }

 .li-dep-date{
   font-size: 12px;
 }

  .list-group-item .details{
    position:absolute;
   /* bottom:0px;
    right: 0px;*/
    font-size: 13px;
  }
  /*title bonsplosn*/
  .b-fly h2 {
    margin-top: 15px;
  }
  .product-item div{
    text-align: center;
    margin-bottom: 10px;
  }

}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
  #search  {
    height:420px;
    /*overflow: hidden*/
  }
  #search .search-form {
    top:20px;width: 90%;
    border-radius: 10px;
    padding-bottom: 15px;
  }


  .list-group-item .details{
    position:relative;
   /* bottom:10px;
    right: 10px;*/
    font-size: 0.8rem;
    /*color:#181d69;*/
  }


}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}