/***** Css for Foodie app******/
*,
*:after,
*:before
{
    box-sizing: border-box;
}

/***** Css for body of the app ******/
body
{
    background-color: #F3F3E8;
    font-family: Helvetica, Arial, sans-serif;
}

.hero
{
    background-image: url('https://anandipaliwal.files.wordpress.com/2015/06/food-table-relisted.jpg');
    background-size: cover;
    min-height: 300px;
    border-radius: 4px;
    color: white;
    font-size: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#app .navbar
{
    color: white;
    background-color: #cb202d;
}

#app .navbar a
{
    color: white;
}

.hidden
{
    display: none;
}

/***** Css for login page of the app******/
#app .login
{
    background-image: url("https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/10/106/106396/keih4mm9pyv3kpq8scymlnub2aecxzs9iscdane82nvbmfcc3leqqh7pjk0adoki-o.jpg?1399222056") ;
    height: 100vh;
    min-height: 500px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/***** Css for login form in the app ******/
#app .login-form
{
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    padding: 30px;
    padding-top: 0;
    border-radius: 15% 0% ;
    border: 1px solid black;
}
#app .head
{
   font-family: Matura MT Script Capitals;
   text-align: center;
   color: black;
   font-size: 80px;
}
.hero
{
    margin-bottom: 2rem;
}

/***** Css for restaurant ******/
.restaurants
{
    position: relative;
    border-radius: 4px;
    background: white;
    margin: 1px;
    margin-top: 10px;
}
.restaurant
{
  background-color: white;
  position: relative;
  width:700px;
  margin-left:auto;
  margin-right: auto;
  padding-top: 20px;
   border-radius:6px;
  margin-bottom: 20px;
margin-top:30px;
}

/***** Css for details of restaurant******/
.rest-wrapper
{
    display: flex;
    font-family: sans-serif;
}

.rest-wrapper .image
{
    margin-right: 1rem;
}

.rest-wrapper .image img
{
    border-radius: 4px;
}

.rest-wrapper .rest-name
{
    font-size: 24px;
    color: #cb202d;
}

.rest-wrapper .rest-category
{
    color: #89959B;
    text-transform: uppercase;
}

.rest-wrapper .rest-address
{
    color: #89959B;
}

.rest-extra
{
    display: flex;
    margin-top: 1rem;
    border-top: 1px solid #e7e7e7;
    padding: 1rem;
}

.rest-extra .type
{
    text-transform: uppercase;
     color: #89959B;
     flex: none;
     margin-right: 2rem;
}

.restaurants .rating, .restaurant .rating
{
    color: white;
    background-color: #5BA829;
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    font-size: 18px;
    border-radius: 4px;
    letter-spacing: 2px;
}

/***** Css for search bar ******/
.search-bar
 {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.search-bar form
{
    display: flex;
    align-items: center;
}

.search-bar form .input-wrapper
{
   flex: 1;
   margin-right: 1rem;
}
.order
{
  border-top: 1px solid #e7e7e7;
  height:40px;
  text-align:right;
  padding-top:10px;
  padding-right:10px;
  color:green;
  cursor:pointer;
}
.order:hover
{
  background-color:#2EAF65  ;
  color:white;
}


/***** Css for Footer ******/
#main-footer
{
  margin-top: 50px;
  border-top: 10px solid green;
  background: #282C35;
  padding-bottom: 30px;
}
#main-footer ul li
{
  font-size: 13px;
}

ul li.nav-item a,
ul li.nav-item a:link
{
  color: #cdcdcd;
}
ul li.nav-item a
{
  padding-top: 3px;
  padding-bottom: 5px;
}
.footer-headers
 {
  font-size: 15px;
  font-weight: bold;
}

.footer-separator
{
  height: 1px;
  background: #3C3F46;
  margin-bottom: 20px;
}
#second-footer ul li
{
  display: inline-block;
}
#copyright
{
  color: #9a9a9a;
  font-size: 10px;
}
/***** Css for best dish ******/
.bestDish .button
{
    display: inline-block;
    background-color:#cb202d;
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

/***** Css for about page ******/
.ui[class*="center aligned"].segment
{
   text-align: center;
}

.ui.basic.segment
{
   box-shadow: none;
   border-radius: 0;
}

.first
{
   padding-bottom: 10px;
}
h1
{
   min-height: 1rem;
   font-size: 2rem;
}
.bold
{
   font-weight: 700;
}

.second
{
   margin-bottom: 0!important;
}

p
{
   margin: 0 0 1em;
   line-height: 1.4285em;
}
.wrappers
{
   padding-left: 10px;
   padding-right: 10px;
   margin-right: auto;
   margin-left: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-width: 1160px;
}
.row
{
   margin-left: -10px;
   margin-right: -10px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.third
{
   margin-bottom: 20px;
}

.fourth
{
   margin-top: 40px;
}
.ui.segment
{
   position: relative;
   background: #FFF;
   box-shadow: none;
   margin: 1rem 0;
   padding: 1em;
   border-radius: .28571429rem;
   border: 1px solid #e7e7e7;
}
.fontsize2
{
   font-size: 18px;
}
.fifth
{
   padding-bottom: 20px;
}

/***** Css for displaying team members in a grid ******/
.ui.grid
{
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: stretch;
   -moz-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   padding: 0;
   margin: -1rem;
}
.ui.grid>.column:not(.row)
{
   padding-top: 1rem;
   padding-bottom: 1rem;
}

.ui.grid>.column:not(.row), .ui.grid>.row>.column
{
   position: relative;
   display: inline-block;
   padding-left: 1rem;
   padding-right: 1rem;
   vertical-align: top;
}

.ui.card
{
   margin: 1em 0;
}
.sixth
{
   padding-right: 10px;
}

.seven
{
   padding-left: 10px;
}
.row
{
   margin-left: -10px;
   margin-right: -10px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.eight
{
   padding-left: 0;
   padding-right: 0;
}
.ui.red.button
{
   box-shadow: 0 0 0 0 #e7e7e7 inset;
}

.ui.red.button, .ui.red.buttons .button
{
   background-color: #CB202D;
   color: #FFF;
   text-shadow: none;
   background-image: none;
}

/***** Css for the order page ******/
.get-the-app
{
    text-align: center;
}

 .order1
 {
    margin-bottom: 40px;
}

 .tac
 {
    text-align: center;
}


.get-the-app .header
{
    font-weight: 400;
}

.order2
 {
    margin-top: 20px;
}

/***** Css to check for the dish whether it is veg/non-veg ******/
.vegnonveg
{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 350px;

}