@import url('font-awesome.min.css');
/*----- global styles  -----*/
body, html {margin:0;padding:0;font-family:'Roboto', sans-serif;text-align:center;}
div {position:relative;margin:0;}
img {border:0;outline:none;}
h1,h2,h3,h4,h5,h6 {margin:0;}
p,ul {margin:0;} 
a {text-decoration:none;}
ul {padding:0;list-style-type:none;}
fieldset, input, textarea {margin:0;padding:0;outline:none;border:none;background:none;}
input[type="button"] {-webkit-appearance:none;-webkit-border-radius:0;border-radius:0;}
header,main,section,nav,article,aside,footer {display:block;}
main {width:100%;float:left;}

/*----- styles for global elements -----*/
.pWrapper {width:100%;text-align:center;float:left;}
.pWrapper .cWrapper {margin:0 auto;max-width:1024px;text-align:left;}

/*----- styles for header elements -----*/
.header {height:100vh;background:url(../img/bg-header.jpg) repeat-x top left;}
.header .cWrapper .hContent {margin:50px 0 0 0;width:60%;float:left;}
.header .cWrapper .hContent ul {margin:40px 0 0 0;width:350px;}
.header .cWrapper .hContent ul li {display:inline-block;margin:10px 10px 0 0;height:45px;font-size:18px;font-weight:400;text-transform:uppercase;line-height:45px;cursor:pointer;text-align:center;float:left;background:#FFF;}
.header .cWrapper .hContent ul li:hover {color:#FFF;background:#000;}
.header .cWrapper .hContent ul li:first-child, .header .cWrapper .hContent ul li:nth-child(3) {width:145px;}
.header .cWrapper .hContent ul li:last-child, .header .cWrapper .hContent ul li:nth-child(2) {width:175px;}
.header .cWrapper .hContent p {margin:80px 0 20px 0;width:100%;font-size:20px;font-weight:300;float:left;}
.header .cWrapper .hContent small {width:100%;font-size:12px;font-weight:300;float:left;}
.header .cWrapper .hImg {margin:20px 0 0 0;padding:0;width:40%;float:left;} 

/*----- styles for intro elements -----*/
.intro {padding:130px 0 120px 0;color:#FFF;background:#231F20;}
.intro .cWrapper .lColumn {width:60%;float:left;}
.intro .cWrapper .lColumn h1 {margin:0 0 20px 0;padding:0 0 5px 0;font-size:22px;color:#FFF;text-transform:uppercase;border-bottom:2px solid #FFF;}
.intro .cWrapper .lColumn p {margin:10px 0 10px 0;font-size:13px;color:#FFF;font-weight:300;}
.intro .cWrapper .lColumn strong {margin:20px 0 20px 0;padding:0 0 5px 0;width:100%;font-size:18px;color:#FFF;text-transform:uppercase;font-style:italic;border-bottom:2px solid #FFF;float:left;}
.intro .cWrapper .lColumn ul {width:100%;float:left;}
.intro .cWrapper .lColumn ul li {margin:0 0 5px 0;width:100%;font-size:13px;color:#FFF;font-weight:300;float:left;}
.intro .cWrapper .rColumn {width:40%;text-align:center;float:left;} 

/*----- styles for ingredients elements -----*/
.ingredients {padding:60px 0 60px 0;background:#FFF;}
.gray {padding:40px 0 60px 0;background:#DDDDDC;}
.ingredients .cWrapper .fColumn {width:100%;float:left;}
.ingredients .cWrapper .fColumn h2 {margin:0 0 20px 0;padding:0 0 5px 0;font-size:22px;text-transform:uppercase;border-bottom:2px solid #000;}
.ingredients .cWrapper .iList {margin:20px 0 0 0;width:100%;float:left;}
.ingredients .cWrapper .iList strong {padding:0 0 4px 0;width:78%;float:right;border-bottom:2px solid #DDDDDC;}
.gray .cWrapper .iList strong {border-bottom:2px solid #FFF;}
.ingredients .cWrapper .iList ul {width:100%;float:left;}
.ingredients .cWrapper .iList ul li {display:inline-block;margin:10px 0 0 0;float:left;}
.ingredients .cWrapper .iList ul li:first-child {width:22%;font-size:14px;font-weight:300;text-transform:uppercase;}
.ingredients .cWrapper .iList ul li:last-child {width:78%;font-size:13px;font-weight:300;}

/*----- styles for products elements -----*/
.products {padding:40px 0 60px 0;background:#FFF;}
.products .cWrapper .fColumn {margin:20px 0 0 0;width:100%;float:left;}
.products .cWrapper .fColumn h3 {margin:0 0 10px 0;padding:0 0 5px 0;font-size:22px;text-transform:uppercase;border-bottom:2px solid #000;}
.products .cWrapper .fColumn strong {padding:10px 0 10px 20px;width:calc(100% - 20px);font-size:22px;color:#FFF;text-transform:uppercase;float:left;background:#DDDDDC;}
.products .cWrapper .product {margin:40px 0 20px 0;width:100%;float:left;}
.products .cWrapper .product .pImg {width:30%;text-align:center;}
.products .cWrapper .product .pContent {width:70%;}
.products .cWrapper .product div {float:left;}
.products .cWrapper .product div strong {padding:0 0 5px 0;font-size:22px;border-bottom:1px solid #DDDDDC;float:left;}
.products .cWrapper .product div strong span {margin:0 0 0 10px;font-size:16px;font-weight:normal;font-style:italic;}
.products .cWrapper .product div p {margin:20px 0 0 0;font-size:14px;font-weight:300;line-height:20px;font-style:italic;float:left;}

/*----- styles for footer elements -----*/
.footer {padding:140px 0 100px 0;color:#FFF;background:#020202; }
.footer .cWrapper {text-align:center;}
.footer .cWrapper strong {font-size:22px;}
.footer .cWrapper p {margin:40px 0 40px 0;font-size:20px;font-weight:300;line-height:42px;}
.footer .cWrapper p b:first-child {margin:0 0 0 20px;}
.footer .cWrapper p a {color:#FFF;}

/* responsive CSS */
@media only screen and (min-width : 240px) and (max-width : 750px) {
.pWrapper .cWrapper {margin:0 10px 0 10px;}
.header .cWrapper .hContent {width:100%;}
.intro .cWrapper .lColumn {width:100%;}
.ingredients .cWrapper .iList strong {width:100%;}
.ingredients .cWrapper .iList ul {margin:10px 0 10px 0;}
.ingredients .cWrapper .iList ul li:first-child {width:100%;}
.ingredients .cWrapper .iList ul li:last-child {width:100%;}
.intro .cWrapper .rColumn {width:100%;}
.header .cWrapper .hImg {margin:0;width:100%;}
}