.primary-overlay {
     background: rgba(0,0, 0,0); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;


  }


@keyframes animate {
    0%,100%{
        background-image:url(../img/banner/banner.jpg);
    }
    25%{
        background-image:url(../img/banner/banner.jpg);
    }
    50%{

        background-image:url(../img/banner/eat.jpg);
    }
    75%{
        background-image:url(../img/banner/eat.jpg);
    }
}
@-moz-keyframes animate  /* Firefox */
{
    0%,100%{
        background-image:url(../img/banner/banner.jpg);
    }
    25%{
        background-image:url(../img/banner/banner.jpg);
    }
    50%{

        background-image:url(../img/banner/eat.jpg);
    }
    75%{
        background-image:url(../img/banner/eat.jpg);
    }
}





@-webkit-keyframes logo  /* Safari and Chrome */
{
    0%,100%{
        background-image:url(../img/banner/banner.jpg);
    }
    25%{
        background-image:url(../img/banner/banner.jpg);
    }
    50%{

        background-image:url(../img/banner/eat.jpg);
    }
    75%{
        background-image:url(../img/banner/eat.jpg);
    }
}


@-o-keyframes logo  /* Opera */
{
    0%,100%{
        background-image:url(../img/banner/banner.jpg);
    }
    25%{
        background-image:url(../img/banner/banner.jpg);
    }
    50%{

        background-image:url(../img/banner/eat.jpg);
    }
    75%{
        background-image:url(../img/banner/eat.jpg);
    }


}


@-ms-keyframes logo  /* IE */
{
    0%,100%{
        background-image:url(../img/banner/banner.jpg);
    }
    25%{
        background-image:url(../img/banner/banner.jpg);
    }
    50%{

        background-image:url(../img/banner/eat.jpg);
    }
    75%{
        background-image:url(../img/banner/eat.jpg);
    }

}
  .main-header {
    /*background: url(../img/banner/banner.jpg);*/
    background-size: 100% 100%;
    background-position: center;
    height: 80vh;
    /*min-height: 400px;*/
    color: #fff;
    position: relative;

      animation: animate 16s ease-in-out infinite;

      -webkit-animation: animate 16s ease-in-out infinite;
      -moz-animation: animate 16s ease-in-out infinite;
      -ms-animation: animate 16s ease-in-out infinite;
      -o-animation: animate 16s ease-in-out infinite;
      background-size: cover;

  }
  
  .main-header .showcase {
    padding-top:10%;
    margin-left:25%;
  }
  
  .scroll-icon {
    position: absolute;
    bottom: 5%;
    left: 47%;
    opacity: 0.5;
  }
  .navbar-fixed{
    background: rgba(0,0,0,0.1)!important;
    height: 9%;
    position: fixed;
    
    
  } 
  #transparent-navar-main{
      z-index:1500;
  }
  .white{
    
      background-color:#ffffff!important;
      height:10vh;
      color:#000000!important;
      -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4), 0 1px 5px 0 rgba(0,0,0,0.3), 0 3px 1px -2px rgba(0,0,0,0)!important;
  }
  /*.transparent{*/
  /*    height:12%;*/
  /*    !* background: linear-gradient(to bottom, rgba(5, 6, 4, 0.5) 0%, rgba(0,0,0,0) 100%); *!*/
  /*  background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*/
  /*  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)));*/
  /*  !*background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*!*/
  /*  !*background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*!*/
  /*  background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*/
  /*  !*background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);*!*/
  /*  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );*/
  /*}*/
  .background-overlay{
      position:fixed;
      background: rgba(0,0,0,1);
  }
  
  nav ul a{
	font-size:1.3vw;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color:#fff;

}

nav{
    line-height: 10vh;
}

nav ul a:hover{
	color:green;
	background-color:inherit;
}
#home1 .section{
    padding-top:0!important
}

/* nav ul a.active{
	font-size:.9rem;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color:red;
    

} */

/* ************brand logo********* */


.white .brand-logo{
    width:10.5%;
    margin-top: 2.3vh;
}
.transparent .brand-logo{
    width:10vw;
    margin-top:2vh;
}
.main-logo-item{
    margin-top:0%;
}

.scard{
    margin-top:20px;
}
/* ****************top spacing on image of parallax item****************** */
.spacing-top{
    margin-top: 6.7%;
}
.spacing-top > .card{
    width:100%;
    margin:auto;
}
.spacing-top > .card .card-content{
    padding-top:8px!important;
    padding-bottom:4px!important;
  
}
.spacing-top > .card .card-content p{
    font-size:1rem!important;
  
}
.spacing-top > .card .card-content i{
  font-size:1rem!important;
  
}
/* ***************fixed icon on bottom left************* */
.fa-comments{
    font-size: 20px;
}

/* *******************green button******************** */
.green-button{
    background-color: #00c853;
}
/* **************modals************* */
#modals .modal{
    width:30%!important;
    height:100%!important;
  
}
.phone-login-button{
    margin-left:25%;
}
#signup-modal{
    z-index: 1005!important;
    width:90%!important;
}
.body-image img{
    width:10%;
}
**************login registration******************
.facebook-login{
    background-color: #00c853!important;
    color:red;
    
}
#modals  .phone-number-login{
    width: 100%;
    color: white;
}
.phone-number-login a{
    width: 100%;
    color: white;
}

#modals .facebook.login a{
    
    color: white!important;
}
#modals .btn{
    width:100%!important;
}

/* ************************daily meal card******************** */
.card .card-title {
    font-size: 1.4rem;
    font-weight: 300;
}

#test1 .card .card-content p {
    margin: 0;
    font-size:1rem;
   
    color:black!important;
    
  
 
}

#test1 .card .card-content{
   padding:12px 12px 0px 12px!important; 
 
}
#test1 .card .card-action{
   border-top:0px!important;
   padding:4px 0px!important;
 
}
#test1 .card .card-action a{
   font-size: 1rem!important;
  
 }

#test1 .card .card-content p {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    color:#333;
}
#test1 .card .card-content p:hover {
    margin: 0;
   
 
    color:black!important;
}
.card .card-content a{
    color:#ffffff!important;
    
}
#test1 .card .card-content a{
    color:#00c853!important;
    
}
#test1 .card .material-icons {
    font-size: 1rem!important;
    color:#00c853!important;
}
#test1 .card .card-content .card-title {
    margin-bottom: 0px!important;
}

#test1 .card .card-title {
    font-size: 1.6rem;
    font-weight: 300;
}

#test1 .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating){
    color: #333;
    padding:10px 25px;
    border-radius:5px;
    margin-right: 0px!important;
    font-weight: bold!important;
} 

#test1 .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover {
    color: #ffffff;
    background-color: #f44336;
    padding:10px 25px;
    border-radius:5px;
    margin-bottom: 50px!important;
}
#test1 .portion-custom{
    position: absolute;
    z-index: 1;
    right:5%;
    bottom:20%;
}
.price{
    font-weight: bold;
    color: #000000;
}
#test1 .card .card-image .card-title {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 100%;
    padding: 10px;

}

/* **************daily meal another section**************** */
#test2 .card .card-content {
    padding: 10px 14px 4px 14px;
    border-radius: 0 0 2px 2px;
    font-family: 'Poiret One', cursive;
    color:#333;
    font-weight: bold;

    
}
#test2 .card .card-content p {
    font-size: 1rem;

}

#test2 .card .card-content a {
    font-size: 1rem;

    

}
#test2 .card .card-content .starred p i{
    font-size:1rem;
    color:#ffb300;
}

.pricencart{
    background-color: #00c853;
    
}
#test2 .card .card-action{
    padding:4px 14px!important;
}
#test2 .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) {
    color: #00c853;
    font-size: .9rem;
}
.card-action-class a{
    font-size: .9rem;
    font-weight: bold;
}

.card-action-class {
    padding: 6px 14px;
}

.card .card-action {
    position: relative;
    background-color: inherit;
    border-top: 1px solid rgba(160,160,160,0.2);
    padding: 6px 14px;
}

/* *********************search section**************** */
#search{
    margin-top:5%;
 
}
#search-id p{
    font-size:1rem;
}
#search-id h4{
    font-size:1.7rem;
}
/* ******************tab menu************* */
.row .tab-menu{
    padding-left: 15%;
    margin-top:13px;
    margin-bottom:13px;
}
.tab-menu li:hover{
    background-color: #00c853;
    color:rgb(192, 13, 13);
}
.tab-menu li a:hover{
    color:#00c853!important;
}
.collapsible-header:hover{
   background-color: #00c853;
   color:#ffffff!important;
   /* border-top-left-radius:50px; */
  
}
.collapsible-header h5:hover{
    
    color:#ffffff!important;
   
 }
 .collapsible-header i{
     font-size:2.5rem!important;
 }
 .collapsible-icon img{
     width:100%;
 }
 .collapsible-icon{
     width:20%;
     margin-right:5%;
 }
 .collapsible-icon-3{
    width:25%;
    margin-right:5%;
}
.collapsible-icon-3 img{
    width:100%;

}
.collapsible-icon-2{
    width:18%;
    margin-right:5%;
    margin-top:2%;

}
.collapsible-icon-2 img{
    width:100%;

}

.padding{
    padding-top:1.5%;
  margin-left:auto;
    background-color: #ffffff;
    border-radius: 2%;
    height:30%;
    z-index: 333;

}

/* ***********************collapsible-body*********************** */
.collapsible-body img{
    width:50%;
    float:left;
    margin-right:5%;
}
.collapsible-container{
    /* background-color:#ffffff; */
    border-radius:21px 21px 0px 0px; ;
    position: absolute;
    z-index:9;
    margin-left:0%;
    /*margin-right:9.1%;*/
    top:68%;
    /* width:auto; */
    /* height: auto; */
    /* border:1px solid rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: 0px -3px 6px 2px rgba(0,0,0,0.17);
    -moz-box-shadow: 0px -3px 6px 2px rgba(0,0,0,0.17);
    box-shadow: 0px -3px 6px 2px rgba(0,0,0,0.17); */
}
.collapsible {
    border-top:0px!important;
  
}
.collapsible-header {
    border-bottom:0px!important;
    /* border-top-left-radius:50px;
    border-bottom-left-radius: 50px; */

}
.collapsible-body {
    /* display: none;
    border-bottom: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2rem; */
    background-color: red;
}


/* ***************right side small image************************** */
/* .right-image img{
    width:60%;
}
.right-image{
    position:absolute;
    top:250px;
    right:150px
} */
/********details Page*******/

.carousel{
    height:30vh;
}
.fixed-col{
    position: fixed;
    left:100px;
}
div.col.l4.z-depth-4.fixed-col{
    right:0;
    height:100%;
}
/*************transparent navbar***********/
.small-parallax{
    height:250px;
    background-color: rgba(0,0,0,0.6);
}
.transparent-nav{
    background-color: rgba(0,0,0,0)!important;
    position: fixed;
}

.small-parallax li a {
	display: block;
	color: #ffffff;
	
	
}
.small-parallax a:hover {

    color: #00c853;
    text-align: center;
    
}
.small-parallax li {
    display: inline-block;
    margin-right:15%;
}
.small-parallax ul{
    list-style: none;
    margin-left:36%;
    margin-top:4%;
}
.small-parallax i {
    font-size: 5rem;
    margin-left:20%;
}
.small-parallax ul i {
    font-size: 5rem;
    margin-right:20%;
}
.small-parallax-header{
    margin-top:30px;
}
/* .navbar-fixed{
    background-color: rgba(0,0,0,0)!important;
} */
/* 
.modal{
    width:33%;
    height:60%;
}
.modal-header{
    padding-bottom: 15px;
}
.modal-content{
    padding-bottom:0px !important;
} */
.card-side-content{
    padding:20px 30px;
}

#modal1 .modal-image-container img{
    width:100%;
}
.modal-side-image-container img{
    width:100%;
}

/* ********************galery ********************* */
#gallery{
    margin-top:2%;
}
.gallery-header{
    margin-bottom:5%;
}

/* ************************main meal section******************************** */
.sec-main-meal{
    /* padding-top: 3.2%; */
    /* padding-bottom: 50px; */
}
.main-meal-header{
    font-family: 'Rubik', sans-serif;
}
.tabs .indicator{
    background-color: #00c853!important;
}
.tabs .tab a{
    color:#00c853!important;
}
.tabs .tab a:hover{
    color:#ffffff!important;
}

/* #test1 .card{
    width:95%;
    height:20%;
} */
#card-custom-id .card{
    width:100%;
    height:20%;
    padding-left: auto;
}
#card-custom-id{
    margin-top:3%;
}
#card-custom-id-column:hover {
    transform: scale(1.25) translatex(10px);
    z-index: 10;
  }

/* #main-meal .fa-chevron-left{
    font-size: 5rem;
    background-color: #ffffff;
} */

#main-meal .fa-chevron-right{
    color: #333;
}

.left-button-container{
 height:50px;
 width:50px;
 border-radius:50%;
 background-color: #ffffff;
 padding-top:13px;
 padding-left:13px;
 position: absolute;
 margin-top:13%;
 margin-left:8%;
 border: 0px;
 z-index:1;
}
.left-button-container i{
    color:#000000;
}
.right-button-container{
    height:50px;
    width:50px;
    border-radius:50%;
    background-color: #ffffff;
    padding-top:13px;
    padding-left:13px;
    position: absolute;
    margin-top:13%;
    margin-left:88.3%;
    border: 0px;
    z-index:1;
   }
   .right-button-container i{
    color:#000000;
}

#test1 .fa-shopping-bag{
    font-size:25px;
}

span.badge{
    margin-left:0px!important;
}
/* ********************card animation********************* */



/* *********************big card carousel******************** */

/* .trending-main-header h4{
    padding-bottom: 20px;
} */
.sec-big-card-carousel{
    padding-top: 20px;
    padding-bottom: 2%;
}
.trending-main-header h4{
margin-top:50px;
}
.small-parallax .svg-inline--fa {
    font-size: 3rem;
}
#big-card-carousel .card .card-content .card-title {
    display: block;
    line-height: 32px;
    margin-bottom: 0px!important;
}
#big-card-carousel .card .card-action {
    position: relative;
    background-color: inherit;
    border-top: 1px solid rgba(160,160,160,0.2);
    padding: 10px 20px;
}
/* ***********************blog*********************** */
/* .center-align{
    padding-bottom: 30px;
} */
.blog-image{
    
    border-radius: 20px;
    width:95%;
}
.blog-image img{

    border-radius: 15px;
}
.blog-main-image{

}
.blog-content{
    margin-top:3%;
    height: 60%;;
  
}
.back-color{
    height:10%;
}
.article-right h4{
    font-size:1.5rem;
    margin-top: 0px;
}
.article-right p{
    font-size:1rem;
}
.article-right span{
    color:#f44336;
}

.description{
    margin-top:10px;
    margin-bottom:10px;
    font-size:1rem;
}
.pagination-container{
    margin-left:330px;
    margin-top:30px;
}
/********************customized*********************** */
.green-text{
    margin-top: 0px;
}
.custom-card{
    margin-top:10%;
}
#foryou .card .card-content p {
    margin: 0;
    font-size:1.3rem;
    color:#333!important;
    font-weight: 100;
 
}
#foryou .card .card-content a {
    margin: 0;
    font-size:1.3rem;
    color:#333!important;
    font-weight: 100;
 
}

/* *************************custom parallax*********************** */
.custom-parallax{
    height:85vh;
    background-color: rgba(0,0,0,0.3)
}


/* ***********************top trending*********************** */
.trending-main-header{
    font-family: 'Rubik', sans-serif;
    margin-bottom:1.7%;
}
.blog-main-title{
    font-family: 'Rubik', sans-serif;
}

/* .white-cus{
    background-color: #ffffff;
} */

/* ********************colored boxes section****************** */

.colored-box{
    margin-top:5%;
    margin-bottom:5%;
}

/* 
.fa-facebook-f{
    font-size: 35px;
    color: rgb(91, 91, 206);
}
.fb-icon{
    font-size: 1.3rem;
    color:blue;
} */



@media only screen and (min-width: 601px){
.container {
    width: 80%;
}
}





/******************details page**************/

.small-parallax-details{
    height:130vh;
}
/* ******************main image************************** */
.main-details{
    margin-top:50px;
    padding: 20px;
}
/* *******************main header*************** */
.fa-chevron-left{
    font-size:1.5rem;
   
}
.back-button{
    margin-top:1.5% ;
}
.button-text{
    margin:1.5%; 
}
.logo-details{
    padding-left:1%;
    margin:.8%;
}
.logo-details img{
    max-width: 10vw;
}
.details-header{
    display: flex;

    width:100%;
    background-color: #ffffff;
   
}
.sign-button{
    margin:1%;
    padding-left:47%;
}
.icon-shopping-cart{
    font-size: 2rem;
    margin:.7%;
}
/* ***********right side of main image******************** */
 .first-tag{
    height:20px;
    width:60px;
    background-color: blue;
    color:black;
}
.second-tag{
    height:20px;
    width:60px;
    background-color: green;
    color: black;
} 
.main-tag{
    display: flex;
}

/* ************************navbar**************** */
/* .details-nav{
    background-color: #ffffff;
    color:black;
    height:9%;
    padding-right: 25px;
} */

/* .image-container{

    height:40vh;
    background: url(../img/dish1.jpg);
    background-repeat: no-repeat;
} */
.main-image{
    height:60vh;
}
/* *************side card**************** */
.card-custom{
    width:50%;
}
.parallax-card{
    max-width: 25%;
    margin-top:60px;
    margin-left:50px;
}
li{
    float: left;
    /* margin-right:10px; */
}
li a{
    display: block;
}

/* *************main item card*********** */
.parallax-card h3{
    margin-top:10px!important;
    font-size:1.2rem!important;
}

span .badge{
    margin-left:0px!important;
}

/* *********heading under main image************ */

/*.heading-2{
    border-bottom: 1px solid blanchedalmond;
    height:8.5vh;
  
  
}*/
/* .heading-2 ul li a{
    padding-left:10px;
} */

/* ********************comments******************** */
.comment-box{
    padding: 5px!important;
    font-size:1rem;
}
.comment-picture img{
    max-width: 30%!important;
}
.row .comment-picture{
    width:20%!important;
}

/* *****************section details*************** */
.details-heading{
     margin-top:5%;
    margin-bottom:2%;
}
.details-heading h4{
    font-size: 1.7rem;
}
.details-subheading{
    margin-top:2%;
    margin-bottom:2%;
    color:#00c853;
}
.details-details{
    margin-top:2%;
    /* margin-bottom:2%;  */
}

/* **********************section comments***************************** */



/* ***************************suggestion card******************** */
.custom-suggest-card{
    max-width: 5vw;
}





/* **********************details page main *************** */
body{
    /* background-image: url("../img/salmon-baked.jpg"); */
    
}
.details-header{
     /* border:1px solid rgb(224, 197, 197) ;  */
    z-index: 100;
}
.main-image-container{
  
  
    position: fixed;
    width:32vw;
    top:10%;
    border-radius: 25px;
    
  
    
}
.main-image-container img{
    width:95%;
  
   height:40%;
   
  
}
.main-container-content{
  width:85%;
  
}

.image-top-details{
    z-index: 10;
    position: fixed;
    background-color: rgba(0,0,0,0.1);
    top:10%;
    margin:0% 8%;
}
.image-top-details h4{
    color:#ffffff;
}

/* *******************menu icon***************** */
.menu-icon-details i{
    margin-top:1.2%;
    font-size:4rem;
}


/* ***************main-content section************ */
.main-content-details-page{
    margin-top:2%;
}

/* ************badge*********** */
.main-tag{
    margin-bottom:1%;
}
.main-details-content .main-tag  .badge{
    margin-left:1px!important;
}
.rate-star i{
    font-size:1rem;
    color: #ffb300;
}
/* *************button to cart*********** */
.button-to-cart{
    margin-top:2%;
    margin-bottom:4%;
}
/* .button-to-cart {
    width:200px;
} */
.custom-cart{
    width:200px;
    border-radius: 7px;
}

/* ************custom container************** */
.container-custom{
    width:70%;
    margin:0 auto;
}
.details-header{
    position: relative;
}
/* .col .l6 .s12{
    width:80%;
} */
.main-details-content{
    font-family: 'PT Sans', sans-serif;
    margin-top:12%;
}
.fixed-details-menu{
    position:fixed;
    top:2%;
    margin-bottom:150px;
    background-color: #ffffff;
    z-index: 999;
}
.pinned-top{
    top:0px!important;
    position: fixed;
    /* left:100px; */
}

/* **************************table hover color*************** */
/* .custom-hover-color tr td :hover{
    background-color: #00c853;

} */
/* ****************ingredients lists*************************** */
#details,#ingredients,#comments,#aboutchef,#suggestion{
    font-family: 'PT Sans', sans-serif;
}
.ingredients-heading h4{
    font-size: 1.8rem;
}


.ingredients-lists li i{
    list-style-type: circle;
    margin-right:5%;
}

.ingredients-subtitle{
    color:#00c853;
}

/* *******************comments ****************** */
.comments-title h4{
    font-size: 1.8rem!important;
}
.comment-subtitle{
    color:#00c853;
}

.btn-small{
    color:#ffffff;
    padding:4px;
    margin-top:17px;
}



/* **************about chef ************** */
.about-chef-heading h4{
    font-size:1.8rem;
}
.about-chef-subtitle{
    color:#00c853;
}
.chef-image img{
    border-radius:15px;
    float: left;
    width:40%;
    margin:2%;
}

/* **************sugestion******************* */
.suggestion-title h4{
    font-size:1.8rem;
}
.suggestion-subtitle{
    color:#00c853;
}