html{
  background:#eeeeee;
  font-size:6.25%;
}
body{
  overflow:auto;
}
html, body{
  height:100%;
  margin:0;
}

body, input, select, textarea, button, #content, #footer{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size:16rem;
  color:#ffffff;
}

/*header#nutella-header{
  position:fixed;
  width:100%;
  height:35px;
  background:#d90210;
  z-index:100;
}
footer#nutella-footer{
  pposition:absolute;
  width:100%;
  height:405px;
  background:#d90210;
  bbottom:0;
} */

#header{
  z-index:101;
  min-height:0;
}

#w{
  position:absolute;
}
#w span{
  width:1px;
  height:1px;
  position:absolute;
  display:none;
}

#page{
  width:100%;
  min-width:320px;
  min-height:100%;
  position:relative;
  background:#ffffff;
}

#page{
  _width:1200px;
  background:url(images/kopa.jpg) no-repeat center 0;
  background-size:1200px auto;
  background-color:#ffffff;
  background:#ffffff;
  _background:#e2001a;
}
header#nutella-header,
footer#nutella-footer{
  _display:none;
  _visibility:hidden;
  _opacity:.3;
}
#onetrust-consent-sdk{
  _display:none;
}


.center{
  width:1200rem;
  margin:0 auto;
  position:relative;
}

#content{
  position:relative;
  _background:#e2001a;
}



#content{
  _padding-top:130rem;
  margin-top:-135rem;
}
#content .block{
  width:100%;
  position:relative;
}
#content .block{
  box-sizing:border-box;
  min-height:600rem;
}
#content .block .title{
  font-size:30rem;
  line-height:36rem;
  font-weight:800;
  text-align:center;
  color:#000000;
  margin:0 0 30rem 0;
  position:relative;
}



#content .block.home{
  background:url(images/banner.jpg) no-repeat top center;
  background-size:auto 970rem;
  height:970rem;
}


#content .block.products{
  background:#ffffff;
}
#content .block.products .center{
  padding:0 0 45rem 0;
}
#content .block.products .title{
  margin:-84rem 0 53rem 0;
}
#content .block.products ul{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#content .block.products li{
  display:inline-block;
  vertical-align:top;
  width:370rem;
  height:440rem;
  position:relative;
  margin:0 13rem 30rem 13rem;
  border-radius:50rem;
  box-shadow:5rem 5rem 10rem 0 rgba(0,0,0,.5);
  box-shadow:0 10rem 12rem 0 rgba(80,46,30,.25);
  overflow:hidden;
}
#content .block.products li img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transition:all .3s ease-in-out;
}
#content .block.products li:hover img{
  transform: scale(1.03);
}
#content .block.products li h4{
  font-size:19rem;
  line-height:24rem;
  font-weight:700;
  text-align:center;
  color:#502e1e;
  width:100%;
  top:0;
  margin:40rem 0 0 0;
  position:absolute;
}
#content .block.products li.red h4{
  color:#ffffff;
}


#content .block.bread{
  background:url(images/bread.jpg) no-repeat top center;
  background-size:100% auto;
}
#content .block.bread .center{
  _background:#ffffff;
  _background:rgba(0,0,0,.4);
  padding:90rem 0 53rem 0;
}
#content .block.bread .title{
}
#content .block.bread .title + h3{
  text-indent:-9999rem;
  background:url(images/nutella_loves_bread.png) no-repeat center;
  background-size:contain;
  margin:0 auto;
  margin-bottom:45rem;
  width:470rem;
  height:93rem;
}
#content .block.bread ul{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#content .block.bread li{
  display:inline-block;
  vertical-align:top;
  width:370rem;
  height:285rem;
  position:relative;
  margin:0 13rem 100rem 13rem;
  border-radius:50rem;
  box-shadow:0 10rem 12rem 0 rgba(80,46,30,.25);
  overflow:hidden;
  background:url(images/bread_hover.png) repeat-x top center;
  background-size:100% 100%;
}
#content .block.bread li,
#content .block.bread li *{
  transition:all .3s linear;
}
#content .block.bread li::before{
  content:'';
  width:100%;
  height:100%;
  background:#ffffff;
  position:absolute;
  top:0;
  left:0;
}
#content .block.bread li img{
  width:100%;
  height:285rem;
  display:block;
  position:absolute;
  object-fit: cover;
}
#content .block.bread li img + img{
  opacity:0;
  transform:translate(0,-30rem);
}
#content .block.bread li h4{
  font-size:19rem;
  line-height:23rem;
  font-weight:700;
  text-align:center;
  color:#502e1e;
  margin:0;
  padding:225rem 0 20rem 0;
  position:relative;
}
#content .block.bread li p{
  font-size:14rem;
  line-height:19rem;
  font-weight:500;
  text-align:center;
  color:#ffffff;
  margin:0 15rem;
  opacity:0;
  position:relative;
}
#content .block.bread li:hover{
  height:470rem;
}
#content .block.bread li:hover::before{
  opacity:0;
}
#content .block.bread li:hover img{
  opacity:0;
  transform:translate(0,30rem);
}
#content .block.bread li:hover img + img{
  opacity:1;
  transform:translate(0,0);
}
#content .block.bread li:hover h4{
  color:#ffffff;
}
#content .block.bread li:hover p{
  opacity:1;
}




form{
  margin:0;
}
.left{
  float:left;
}
.right{
  float:right;
}
.clear{
  clear:both;
  height:1px;
  overflow:hidden;
  display:block;
}

sup, sub{
	height: 0;
	line-height: 0;
	vertical-align: baseline;
	position: relative;
}
sup{
	bottom:1ex;
  font-size:65%;
}
sub{
	top: .5ex;
  font-size:65%;
}

input:focus, textarea:focus, select:focus{
  outline: none;
  outline-width:0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
  -webkit-user-modify: read-write-plaintext-only;
}
textarea{
  resize: none;
}
@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}
input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

