body {
    padding:200px 0 0 0;
    margin:0;
    font-family: Verdana, Arial, Tahoma, Serif;
}


.container{
    justify-content: space-between;
    display:flex;
    max-width:1200px;
    margin: 0px auto;
  
}
.fixed{
    top:0;
    right:0;
    width:100%;
    position:fixed;
    z-index:2;
}

/* ________________ HEADER _________________*/

.header{
    background:#2d2d2d;
    padding:0px 0px;
    color:white;
    height:150px;
    overflow: hidden;
    
}
.logo{
    transform: rotate(30deg);
    width:200px;
    transition: 1s;
    margin-top: 15px;
    
}
.logo:hover{
    transform: rotate(390deg);    
}

.search_input{
    padding: 10px;
    margin-top: 30px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    font-size: 32px;
    border: none;
    outline: 0;
}
.search_button{
    height: 50px;
    width:50px;
    background-color: #067655;
    border: none;
    outline: 0;
    cursor:pointer;
}

/* ________________ COLLECTION _________________*/

.collection{
    display:flex;
    width:100%;
}
.collection_left{
    background: url("../image/matcha.jpg");
    background-size: cover;
    background-repeat:no-repeat;
    min-height:850px;
    width:50%;
    animation: 1s ease-out 300ms 1 collection_left_animation;
}
@keyframes collection_left_animation {
    from { transform: translate(-100%, 0); } 
    to {   transform: translate(0%, 0); }  
}

.collection_right{
    background: url("../image/coffe.jpg");
    background-size: cover;
    background-repeat:no-repeat;
    width:50%;
    animation: 1s ease-out 300ms 1 collection_right_animation;
}

@keyframes collection_right_animation {
    from { transform: translate(200%, 0); } 
    to {   transform: translate(0%, 0); }  
}

.collection_heading{
    display: block;
    text-align:center;
    background: rgba(0,0,0,0.5);
    color:#ffeee6;
    padding:50px 0;
    font-size:60px;
    margin:0;
    font-weight:500;
    transition: 500ms ease-out;
}
.collection_heading:hover{
    padding: 100px 0;
    text-decoration: none;
    color:#fff;
    font-size:70px;
}

/* ________________ MENU _________________*/

.menu_item{
    font-size:25px;
    text-transform:uppercase;
    color:white;
    font-weight:bold;
    margin:10px;
    text-decoration:none;
}
.menu_item:hover{
    color:black; 
    text-decoration:underline;
}
.menu{
    background:#067655;
}

/* ________________ SEPARATION _________________*/

.separation{
    background: url("../image/greenleaves.jpg");
    min-height:200px;
    width:100%;
    background-size:cover;
}


/* ________________ FOOTER _________________*/

.instagram_icon svg:hover path {
    fill: #f75150;
}
.facebook_icon svg:hover path{
    fill: #1041a5;
}
.footer{
    background-color:#067655;
}
.footer a{
    font-size:20px;
    color:white;
    
}
.footer_right a{
    text-decoration:none;
}
.footer .container {
    align-items:center;
}

/* ________________ CONCRETE _________________*/

.concrete{
    background: url("../image/concrete1.jpg");
    min-height:700px;
    width:100%;
    background-size: cover;
    box-shadow: 0px -30px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    border: 3px solid rgba(255, 195, 195, 0.1);
    padding-top:20px;
}
.concrete h1{
    font-size:60px;
}
.concrete p{
    max-width: 30%;
    margin:5%;
    padding: 5%;
    background: rgba(255,255,255,0.5);
}
.concrete_right .container {
    flex-wrap: wrap;
}

/* ________________ FOODLIST  _________________*/
.foodlist .container{
    display:block;
}
#tab_desserts{
    display:none;
}
#tab_maincourse{
    display:none;
}

/* ________________ FOODLIST NAV _________________*/

.foodlist_nav{
    display:flex;
    width:100%;
    margin:50px 0;
}    
.foodlist_nav_item{
    width:33.333%;
    min-height:400px;
    background-size:cover;
    position:relative;
    overflow:hidden;
    border-radius: 50% 0 50% 0;
    cursor:pointer;
    margin-top:0px;
}

.foodlist_nav_item_text{
   background: rgba(0,0,0,0.5); 
   color: white;
    font-size: 50px;
    text-align: center;
    padding: 70px 0;
    transition:500ms ease-out;
}
.foodlist_nav_item:hover .foodlist_nav_item_text{
    margin-top:-200px;
}
.foodlist_nav_item_bg{
    min-width:100%;
    min-height:100%;
    background-size:cover;
    position: absolute;
    left:0;
    top:0;
    z-index:0;
    transition: 5000ms ease-out;
    transform: scale(1);
}
.foodlist_nav_item_bg:hover{
    transform: scale(2);
} 

.foodlist_nav_item_text{
    z-index:1;
    position:relative;
}

#nav_drinks .foodlist_nav_item_bg{
    background-image: url("../image/menu/tea.jpg");
}
#nav_desserts .foodlist_nav_item_bg{
    background-image: url("../image/menu/brownie.JPG");
}
#nav_maincourse .foodlist_nav_item_bg{
    background-image: url("../image/menu/pizza.JPG");
}

.grayscale{
    filter: grayscale(100%);
}

/* ________________ FOODLIST ITEM  _________________*/
.foodlist_item {
    justify-content: space-between;
    display:flex;
    align-items:center;
}
.foodlist_item_pic {
    min-width:200px;
    max-width:300px;
    min-height:200px;
    max-height:300px;
    border-radius: 0 50% 0 50%;
}
.foodlist_item_pic img{
    width: 300px;
    height: 300px;
    border-radius: 0 50% 0 50%;
}
.foodlist_item_name {
    font-size:50px;
}
.foodlist_item_price {
    font-size:60px;
    margin:0 50px 0 50px;
}

.foodlist_item:nth-child(odd){
    border-radius: 0 150px 0 150px;
    background-color:#ddd;
}
.foodlist_item:nth-child(even){
    border-radius: 150px 0 150px 0;
    background-color:#eee;
    flex-direction:row-reverse;
}
.foodlist_item:nth-child(even) .foodlist_item_pic img{
    border-radius: 50% 0 50% 0;
    
}


/* ________________ WORKERS _________________*/

.workers{
    display: flex;
    flex-wrap: wrap;
    margin: 50px 0 50px 0;
    
    
}
.workers_item{
    max-width: calc(48% - 18px);
    min-width: calc(48% - 18px);
    border: 9px double #d4d4d4;
    display: flex;
    margin: 0% 0% 50px 0%;
    background: #f9f9f9;
    
   
}
.workers_item:nth-child(odd){
    margin-right:4%;
}
.workers_item img{
    max-width:250px;
    min-width:250px;
    max-height:250px;
    min-height:250px;
}

.workers_item_left{
    flex-grow:2;
    padding:0px 20px 0px 20px;
    
}
.workers_item_left img{
    min-width:0px;
    min-height:0px;
    border-radius: 50% 50% 50% 50%;
    background-color: #d4d4d4;
    padding: 5px;
    margin: 0 0 -10px 4px;
}


/* ________________ ABOUT _________________*/
.about {
    margin: 50px 0;
    display: flex;
    align-items: center;
    background: #eee;
}
.about_left {
    flex-grow:1;
}
.about_right {
    height:320px;
    overflow:hidden;
    min-width: 480px;
    margin-right:50px;
}
.about_frame {
    margin: 50px;
    padding: 50px;
    border: 9px double #d4d4d4;
    background: #f9f9f9;
}
.about_galery {
    height:320px;
    overflow:hidden;
    font-size:0;
}
.about_galery img {
    width: 480px;
    height: 320px;
    position: relative;
    animation: 9s infinite galery-animation;
}
@keyframes galery-animation {
    0% { top: 0px; } 
    30% { top: 0px; }
    35% { top: -320px; }
    65% { top: -320px; } 
    70% { top: -640px;}
    95% { top: -640px; } 
    100% { top: 0px; } 
}

/* ________________ LOCATION _________________*/
.location h1 {
    text-align: center;
    margin: 50px 0;
}