body{

    background: #f2f2f2;

}

.c-img{

    width: 100%;

    height: auto;

}



.p-border{

    border: 2px solid #e6e6e6;

}



.p-menu{

    height: 120px;

    border-bottom:2px solid #e6e6e6;

}



.f-carousel{

  height: 400px;

}



.f-pos{

  margin-bottom: 20px;

}

.fotter{

background:#394660; /*#1A202C;*/

padding:2em 10px;

}

.left-2 h3,.middle h3, .left-1 h3 {

color:#E0E1E3;

font-size:1.2em;

margin:1.2em 0;

text-transform:uppercase;

}

.left-2 p{

color:#fff; /*#435059;*/

font-size:0.83em;

margin:1em 0;

width:87%;

line-height:1.5em;

font-family: 'Droid Serif', serif;

}

.left-2 a{

background: #D13F31;

color:#fff;

font-size:0.8em;

display:inline-block;

margin-top:1.7em;

padding:0.5em 0.85em ;

}

.left-2 a:hover{

background:#1F7872;

color:#fff;

}



.left-1 ul li{

   display:block;

   width: 87%;

}

.left-1 ul li a{

   color:#fff; /* #435059;*/

   padding:0.7em 0;

   border-bottom:1px solid #435059;

   text-decoration:none;

   font-size:0.8em;

   display:block;

   font-family: 'Droid Serif', serif;

}

.left-1 ul li a:hover{

   color:yellow; /*#D13F31;*/

}

.left-1 ul li a span{

   width:13px;

   height:10px;

   display:inline-block;

   background:url(https://p.w3layouts.com/demos/career/web/images/arrow.png) no-repeat 0px 0px;

   margin-right:10px;

}

.left-1 ul li a.mid{

   border-bottom:none;

}





.middle ul li{

   display:block;

   width: 87%;

}

.middle ul li a{

   color:#fff; /* #435059;*/

   padding:0.7em 0;

   border-bottom:1px solid #435059;

   text-decoration:none;

   font-size:0.8em;

   display:block;

   font-family: 'Droid Serif', serif;

}

.middle ul li a:hover{

   color:yellow; /*#D13F31;*/

}

.middle ul li a span{

   width:13px;

   height:10px;

   display:inline-block;

   background:url(https://p.w3layouts.com/demos/career/web/images/arrow.png) no-repeat 0px 0px;

   margin-right:10px;

}

.middle ul li a.mid{

   border-bottom:none;

}

.copywrite{

background:#1A202C; /*#1F7872;*/

padding:2em 0;

}

.copywrite p{

word-spacing:1px;

color:#fff;

font-family: 'Droid Serif', serif;

}

.copywrite p a{

color:#fff; /* #1A202C;*/

}

.copywrite p a:hover{

color:#D13F31;

}



.card{

    border: 2px solid #e6e6e6;

    /*min-height: 350px;*/

    margin: 10px 0px;

    background: #fff;

}



.card .card-img{

    width: 100%;

    padding: 10px;

    text-align: center;

    height: auto;

    object-fit: cover;

}

.card .card-body{

    padding: 5px 10px;

}



.card .available{

    top:5px;

    right:5px;

    border: 90px;

    border: 1px solid #e6e6e6;

    z-index: 910; 

}



.card .cart{

    border-top: 2px solid #e6e6e6;

    padding: 10px;

    text-align: center;

}

.checked {

  color: orange;

}



.rate-disable{

    color: gray;

}



.p-padding{

    padding: 20px 20px;

}

#mobile-view{

    display: none;

}

#desktop-view{

    display: block;

}





/* Menu */



.carousel-control.left {

    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    background-image: -o-linear-gradient(left, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .0)), to(rgba(255, 255, 255, .0)));

    background-image: linear-gradient(to right, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);

    background-repeat: repeat-x;

}



.carousel-control.right {

    right: 0;

    left: auto;

    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    background-image: -o-linear-gradient(left, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, .0)), to(rgba(255, 255, 255, .0)));

    background-image: linear-gradient(to right, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .0) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);

    background-repeat: repeat-x;

}



@media only screen and (max-width: 600px) {

  #mobile-view{

    display: block;

  }

  #desktop-view{

    display: none;

  }

  

}



@media (max-width: 992px){

  .f-carousel{

    top:80px;

  }

}

@media  (max-width: 600px){

  .f-carousel{

    top:200px;

  }

}



/* Vertical Navbar */



.v-navbar {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 100%;

} 



.v-menu {

  display: block;

  padding: 10px;

  text-decoration: none;

  color: #000;

  /*background-color: #dddddd;*/

}



.v-menu:hover{

  background: #e6e6e6;

  color: #000;

  text-decoration: none;

}



.rotate{

  -webkit-transform: rotate(90deg);  /* Chrome, Safari, Opera */

  -moz-transform: rotate(90deg);  /* Firefox */

  -ms-transform: rotate(90deg);  /* IE 9 */

  transform: rotate(90deg);  /* Standard syntax */    

}



/* Price Sider */



.slidecontainer {

  width: 100%; /* Width of the outside container */

}



/* The slider itself */

.slider {

  -webkit-appearance: none;  /* Override default CSS styles */

  appearance: none;

  width: 100%; /* Full-width */

  height: 25px; /* Specified height */

  background: #d3d3d3; /* Grey background */

  outline: none; /* Remove outline */

  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */

  -webkit-transition: .2s; /* 0.2 seconds transition on hover */

  transition: opacity .2s;

}



/* Mouse-over effects */

.slider:hover {

  opacity: 1; /* Fully shown on mouse-over */

}



/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

.slider::-webkit-slider-thumb {

  -webkit-appearance: none; /* Override default look */

  appearance: none;

  width: 25px; /* Set a specific slider handle width */

  height: 25px; /* Slider handle height */

  background: #4CAF50; /* Green background */

  cursor: pointer; /* Cursor on hover */

}



.slider::-moz-range-thumb {

  width: 25px; /* Set a specific slider handle width */

  height: 25px; /* Slider handle height */

  background: #4CAF50; /* Green background */

  cursor: pointer; /* Cursor on hover */

}





 #p1, #p2, #p3{

  display: none; 

 }

 li div{

  padding-left: 30px; 

 }



 .panel-default > .panel-heading {

  border-color: transparent !important;

}