.breadcr,
.wrap,
nav {
    width: 100%
}

.wrap100,
nav {
    min-height: 20px
}

.breadcr ol,
.rslides,
ol,
ul {
    list-style: none
}

.input-box:focus,
.search-box:focus {
    outline: 0
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

.bold,
ul.abt li a {
    font-weight: 700
}

.italic,
.rec-comment, .art-comment {
    font-style: italic
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

strong { font-weight: bold;}
body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 14px;
    line-height: 17px;
    color: #333;
    word-wrap: break-word
}
.header-fx{width:100%; position: fixed; top:0; left:0; z-index: 500; background: #fff;}


.ft-dum,
h3.artlisth {
    text-align: center
}
.ft-dum{padding-top:20px;}
blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a {
    
    text-decoration: none;
    color:#00838F;
    font-weight: bold;
}
p.item-names{font-size:80%;}

.left{float: left;}
.right{float: right;}
.clear{clear: both;}
.no-display{display: none;}
.mg-auto{display:block; margin:auto;}
.p80{width:80%;}
.p60{width: 60%;}
.p40{width: 40%;}
.pos-rel{position: relative;}
.mg-t-5{margin-top: 5%;}
.pd-5{padding:3%;}
.sticky-top{position: sticky; position: -webkit-sticky; top: 0; left:0; z-index:200;}
.sticky-bottom{position: sticky; position: -webkit-sticky; bottom: 0; left:0; z-index:20;}
.sticky-pos{position: sticky; position: -webkit-sticky; top: 0; left:0;}
.fix-top{position: fixed; top:0; left: 0;}
img{max-width: 100%;}
video{max-width: 100%;}
h2{font-size: 120%; font-weight: bold; margin:5% 0 1% 0; line-height: 150%; clear: both;}
p{line-height: 1.7em;}
table{width:100%; max-width: 500px;}
td{padding:2% 0;}
ul li{padding-top: 1.7em;}
/*general classes*/
.color-white{color:white;}
.bg-white{background: white;}
.bg-light{background: #A4B4BA;}
.bg-lt-grey{background: #FAFCFC;}
.bg-white{background: #fff;}
.bg-blue{background: #009688;}
.bg-cyan-lt{background: #009688;}
.bg-method{background: #006978;}
.bg-ingred-main{background: #CC4ACC;}
.top-shadow{box-shadow: 0 3px 3px rgba(164, 180, 186, 0.75);}
.screen{height:100%; width:100%; position: absolute; top: 0; left: 0; z-index: 10;}
.bottom{position: absolute; bottom: 0;}
/*basic layout*/

.wrap{width:100%; max-width: 800px; position:relative; margin: auto; background: white;} 
.helpers{width:60px; height:100%; position: absolute; top:0; left: 0;}
.helper{width: 50px; margin:10px auto; padding:15px; text-align: center; border:2px solid #999;}

.tip-top{width:100%;  padding:3% 5% 0 5%;  position:relative; margin:0 auto; background: white;}
.inside-top{width:100%;  padding:3% 5% 0 5%; height:10vw; position:relative; margin:0 auto;}
.inside-title{width:90%; height:100%; float: left; padding-left:10%;}

.back-arrow{width:5%; height:100%; float: left;}
.confirm{width:5%; height:100%; float: right;}
.main-menu{width:70vw;  padding:3% 5% 0 5%; height:100vh;position: fixed; top: 0; right:0; z-index:200; display: none;}
.main-menu-close{position: absolute; top:2%; left:2%;}
.main-menu-list{width:40vw; height:100%; float:right; margin-top:5%; text-align: left;}
.main-menu-list li{margin:5% 0;}
#sticky-nav{width:100%; max-width: 800px; z-index: 100; position: sticky; position: -webkit-sticky; top: 0;}

.sidenav {
  height: 100vh;
  width: 0;
  position: absolute;
  z-index: 220;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;

}

.sidenav a {
  padding: 8px 8px 16px 80px;
  text-decoration: none;
  font-size: 150%;
  color: #5a4f5e;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.logo{width:120px; float: left;}
.menu-icon{width:35px; float: right;}
.icon-line {
  width: 25px;
  height: 2px;
  background-color: #5a4f5e;
  margin: 6px 0;
}
.item-video {
  width: 320px; height: 180px;float: left; margin:15px;
}
.carousel-container{padding:3% 0;}
.video-container{width:100%; max-width: 800px;  margin:0 auto; padding:3%; }

.item{
width:1280px;
}
@media(max-width:1000px){
  .item{margin:0; transform:scale(.9)}
}
.active .item{
  opacity:1;
  transform:scale(1);
} 




.owl-controls{position:absolute; margin-top:300px;}


@media only screen and (min-width:500px) {
  body{background-color: #2a2e33;}
  .icon-line {
  width: 25px;
  height: 3px;
  background-color: #5a4f5e;
  margin: 6px 0;
}

}