/*nav*/
*{margin: 0;
padding: 0;}
body{background: #f6f6f6;}
h3 a {
color: #FFF;
}

a {
color: #FFF;
}

#container {
margin: 0 auto;
max-width: 890px;
}
.working
{
margin-top:1em;
}
/*slider*/
header{margin-top: 5em;height: 1em;}
header .item {
height: 100%;
position: relative;
}
header .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
header .item .cover {
padding: 75px 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
}
header .item .cover .header-content {
position: relative;
padding: 56px;
overflow: hidden;
}
header .item .cover .header-content .line {
content: "";
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 9px solid #fff;
-webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
header .item .cover .header-content h2 {
font-weight: 300;
font-size: 35px;
color: #fff;
}
header .item .cover .header-content h1 {
font-size: 56px;
font-weight: 600;
margin: 5px 0 20px;
word-spacing: 3px;
color: #fff;
}
header .item .cover .header-content h4 {
font-size: 24px;
font-weight: 300;
line-height: 36px;
color: #fff;
}
header .owl-item.active h1 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
header .owl-item.active h2 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
header .owl-item.active h4 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInUp;
animation-delay: 0.3s;
}
header .owl-item.active .line {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInLeft;
animation-delay: 0.3s;
}
header .owl-nav .owl-prev {
position: absolute;
left: 15px;
top: 43%;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 40px;
cursor: pointer;
height: 40px;
position: absolute;
display: block;
z-index: 1000;
border-radius: 0;
}
header .owl-nav .owl-prev span {
font-size: 1.6875rem;
color: #fff;
}
header .owl-nav .owl-prev:focus {
outline: 0;
}
header .owl-nav .owl-prev:hover {
background: #000 !important;
}
header .owl-nav .owl-next {
position: absolute;
right: 15px;
top: 43%;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 40px;
cursor: pointer;
height: 40px;
position: absolute;
display: block;
z-index: 1000;
border-radius: 0;
}
header .owl-nav .owl-next span {
font-size: 1.6875rem;
color: #fff;
}
header .owl-nav .owl-next:focus {
outline: 0;
}
header .owl-nav .owl-next:hover {
background: #000 !important;
}
header:hover .owl-prev {
left: 0px;
opacity: 1;
}
header:hover .owl-next {
right: 0px;
opacity: 1;
}
.backgr1{text-align: center;}

.food-menu {
padding-bottom: 40px;
text-align: center;
}

.food-menu h2 {
color: #666;
margin: 30px auto 30px auto;
}

.menu-item {
position: relative;
margin: 15px auto 15px auto;
text-align: center;
width: 280px;
height: 280px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}


.menu-logo {
position: absolute;
display: inline-block;
width: 16%;
top: 14%;
left: 42%;
}

.menu span {
position: absolute;
top: 30%;
left: 30%;
color: #d9d9d9;
}

.fruits span {
transition: transform 900ms ease-in-out;
}

.fruits:hover span {
transform: scale(1.5, 1.5) translateY(20px);
}

.fruits:hover .first-frame {
opacity: 1;
}

.second-frame {
position: absolute;
top: 51%;
left: 9%;
border-left: 1px #f6bbbb solid;
height: 40%;
z-index: 1;
opacity: 0;
}

.second-frame p {
color: #f6bbbb;
font-size: 20px;
padding-left: 6%;
padding-bottom: 20%;
}

.pasta:hover .second-frame {
opacity: 1;
}

.pasta span {
transition: transform 900ms ease-in-out;
}

.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-12%) translateY(395%);
}

.pasta:hover {
opacity: 0.7;
}


@keyframes mydecor {
from {
width: 1%;
}
to {
width: 85%;
}
}

@media /* medium */ (min-width: 451px) {
.food-menu {
padding-bottom: 50px;
text-align: center;
}
.food-menu h2 {
margin: 60px auto 40px auto;
}
.menu-item {
width: 200px;
height: 180px !important;
margin: 50px auto 50px auto;
}
.menu span {
left: 36%;
}
.second-frame p {
font-size: 24px;
padding-left: 20%;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-14%) translateY(550%);
}
.second-frame {
left: 8%;
border-left: 2px #f6bbbb solid;
}
}
@media /* large */ (min-width: 768px) {
nav ul {
float: right;
margin: 0;
list-style: none;
position: relative;
list-style-type: none;
}
.food-menu {
padding-bottom: 80px;
text-align: center;
}
.food-menu h2 {
margin: 80px auto 40px auto;
}
.menu-wrapper {
display: flex;
justify-content: space-around;
}
.menu-item {
width: 250px;
height: 250px;
}
.menu span {
left: 30%;
}
.second-frame p {
font-size: 16px;
padding-left: 17%;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-4%) translateY(350%);
}
}
@media /* extra-large */ (min-width: 1025px) {
.food-menu {
padding-bottom: 100px;
}
.food-menu h2 {
margin: 60px auto 40px auto;
}
.menu-item {
width: 300px;
height: 300px;
}
.menu-wrapper {
max-width: 1200px;
margin: 0 auto;
}
.menu span {
left: 32%;
}
.second-frame p {
font-size: 17px;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-12%) translateY(450%);
}
}
/*slick*/
.slick-carousel {
margin: 0 auto;
width: 95%;
}

/* The width of each slide */
.slick-slide {
width: 350px;
}

/* Color of the arrows */
.slick-next::before, .slick-prev::before {
color: blue;
}

li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */

@media screen and (min-width : 320px) and (max-width : 420px){
html {
margin:0;
height:100%;
overflow:hidden;
}
           
.menu-item {
height:140px;}
header
{
margin-top:0em !important;
}
.bca{
background-image: url(../images/working-bg.jpg);
position: relative;
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: 1;
height: 42em !important;
background-color: grey;
margin-top:3em;

}
.smalleff
{
font-size:1rem;
}
.font1
{
font-size:0.9rem;
}
.fontsize{
font-size:0.8rem !important;
}
.bottom
{
bottom:1.6em;
}
.denounce
{
font-size:0.9rem;
}
.food-menu {
clear:both;

}
.slickcont {
clear:both;
}
}
        
.experi
{
height: 70%; 
width: 100%;
}
.font
{
font-size:13px !important;
color:black;
text-align:start;
}
       
/*nav*/
/*slider*/
header{margin-top: 5em;height: 1em;}
header .item {
height: 100%;
position: relative;
}
header .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
header .item .cover {
padding: 75px 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
}
header .item .cover .header-content {
position: relative;
padding: 56px;
overflow: hidden;
}
header .item .cover .header-content .line {
content: "";
display: inline-block;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 9px solid #fff;
-webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
header .item .cover .header-content h2 {
font-weight: 300;
font-size: 35px;
color: #fff;
}
header .item .cover .header-content h1 {
font-size: 56px;
font-weight: 600;
margin: 5px 0 20px;
word-spacing: 3px;
color: #fff;
}
header .item .cover .header-content h4 {
font-size: 24px;
font-weight: 300;
line-height: 36px;
color: #fff;
}
header .owl-item.active h1 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
header .owl-item.active h2 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInDown;
animation-delay: 0.3s;
}
header .owl-item.active h4 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInUp;
animation-delay: 0.3s;
}
header .owl-item.active .line {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-name: fadeInLeft;
animation-delay: 0.3s;
}
header .owl-nav .owl-prev {
position: absolute;
left: 15px;
top: 43%;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 40px;
cursor: pointer;
height: 40px;
position: absolute;
display: block;
z-index: 1000;
border-radius: 0;
}
header .owl-nav .owl-prev span {
font-size: 1.6875rem;
color: #fff;
}
header .owl-nav .owl-prev:focus {
outline: 0;
}
header .owl-nav .owl-prev:hover {
background: #000 !important;
}
header .owl-nav .owl-next {
position: absolute;
right: 15px;
top: 43%;
opacity: 0;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: rgba(0, 0, 0, 0.5) !important;
width: 40px;
cursor: pointer;
height: 40px;
position: absolute;
display: block;
z-index: 1000;
border-radius: 0;
}
header .owl-nav .owl-next span {
font-size: 1.6875rem;
color: #fff;
}
header .owl-nav .owl-next:focus {
outline: 0;
}
header .owl-nav .owl-next:hover {
background: #000 !important;
}
header:hover .owl-prev {
left: 0px;
opacity: 1;
}
header:hover .owl-next {
right: 0px;
opacity: 1;
}

/*bak*/
.bca::before{background: rgba(40, 41, 46, 0.97) none repeat scroll 0 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: "";
z-index: -1;}
.bca{
background-image: url(../images/working-bg.jpg);
position: relative;
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: 1;
height: 24em;
background-color: grey;
margin-top:0em;

}
.backgr1{text-align: center;margin-top:0em;}
.expe
{
margin-top: 4em;
}
.no-js .owl-carousel, .owl-carousel.owl-loaded {
display: block;
clear: both;
float: left;
}
.food-menu {
padding-bottom: 40px;
text-align: center;
}

.food-menu h2 {
color: #666;
margin: 30px auto 30px auto;
}

.menu-item {
position: relative;
margin: 15px auto 15px auto;
text-align: center;
width: 12em;
height: 8em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.res {
background-image: url("../images/working-1.jpg")!important;
}

.pasta {
background-image: url("../images/working-2.jpg");
}

.comm {
background-image: url("../images/working-3.jpg");
}

.menu span {
position: absolute;
top: 10%;
left: 30%;
color: #d9d9d9;
}

.fruits span {
transition: transform 900ms ease-in-out;
}

.fruits:hover span {
transform: scale(1.5, 1.5) translateY(20px);
}

.fruits:hover .first-frame {
opacity: 1;
}
.second-frame {
position: absolute;
top: 51%;
left: 9%;
border-left: 1px #f6bbbb solid;
height: 40%;
z-index: 1;
opacity: 0;
}

.second-frame p {
color: red;
font-size: 20px;
font-weight:700;
padding-left: 6%;
padding-bottom: 20%;
}

.pasta:hover .second-frame {
opacity: 1;
}

.pasta span {
transition: transform 900ms ease-in-out;
}

.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-12%) translateY(395%);
}

.pasta:hover {
opacity: 0.7;
}

@keyframes mydecor {
from {
width: 1%;
}
to {
width: 85%;
}
}

@media /* medium */ (min-width: 360x) {
.food-menu {
padding-bottom: 50px;
text-align: center;
}
.food-menu h2 {
margin: 60px auto 40px auto;
}
.menu-item {
width: 400px;
height: 400px;
margin: 50px auto 50px auto;
}
.menu span {
left: 36%;
}
.second-frame p {
font-size: 24px;
padding-left: 20%;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-14%) translateY(550%);
}
.second-frame {
left: 8%;
border-left: 2px #f6bbbb solid;
}
}
@media screen and (min-width: 768px) {
       
.food-menu {
padding-bottom: 80px;
text-align: center;
}
.food-menu h2 {
margin: 80px auto 40px auto;
}
.menu-wrapper {
display: flex;
justify-content: space-around;
}
.menu-item {
width: 250px;
height: 250px;
}
.menu span {
left: 30%;
}
.second-frame p {
font-size: 16px;
padding-left: 17%;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-4%) translateY(350%);
}
}
@media /* extra-large */ (min-width: 1025px) {
.food-menu {
padding-bottom: 100px;
}
.food-menu h2 {
margin: 60px auto 40px auto;
}
.menu-item {
width: 300px;
height: 300px;
}
.menu-wrapper {
max-width: 1200px;
margin: 0 auto;
}
.menu span {
left: 32%;
}
.second-frame p {
font-size: 17px;
}
.pasta:hover span {
transform: scale(1.5, 1.5) translateX(-12%) translateY(450%);
}
}
/*slick*/
.slick-carousel {
margin: 0 auto;
width: 85%;
}
.slick-slide {
width: 350px;
}

.slick-next::before, .slick-prev::before {
color: blue;
}
@media only screen and (max-width:720px) and (min-width: 540px)
{
.bca
{
height: 100%;
}
}

@media screen and (max-width: 812px) and (min-width: 320px)
{
header .item .cover .header-content h1
{
font-size: 25px;
font-weight: 600;
margin: 5px 0 20px;
word-spacing: 3px;
color: #fff;
}

header .item .cover .header-content .line
{
content: "";
display: inline-block;
width: 100%;
height: 63%;
left: 0;
top: 30px;
position: absolute;
border: 6px solid #fff;
-webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
}
@media screen and (min-width : 280px) and (max-width : 653px)
{
br.responsive
{
display:none;
}
header .item .cover .header-content h1 {
font-size: 22px;
font-weight: 600;
margin: 5px 0 20px;
word-spacing: 3px;
color: #fff;
}
header .item .cover .header-content .line {
content: "";
display: inline-block;
width: 100%;
height: 60%;
left: 0;
top: 2.6em;
position: absolute;
border: 6px solid #fff;
-webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
}
.expe
{
margin-top:1em;
}
}