html{
	--light-grey: #f5f6f7;
	--dark-grey:#424242;
	font-size: 62.5%;
}
header{
	width:100%;
	height:auto;
}
main{
	width:100%;
	height:auto;
}
footer{
	width:100%;
	height:auto;
}
.header-container{
	background: url(../img/background-pexels-rodnae-productions-6646369.jpg) no-repeat center;
	background-size: cover;
	width:100%;
	height:90rem;
}
.tip-header-container{
	background: url(../img/stacked-spring-rolls.jpg) no-repeat center;
	background-size: cover;
	width:100%;
	height:90rem;
}
.header-container .top-nav, .tip-header-container .top-nav{
	display:flex;
	justify-content: space-between;
}
.header-container .top-nav .top-left a, .tip-header-container .top-nav .top-left a{
    cursor: pointer;
    text-decoration: none;
	color:white;
	font-size: 3rem;
	margin-top:2rem;
}
.top-nav > .top-right,.top-nav>.top-left{
	display:flex;
}
.top-left{
	margin-left: 3rem;
	margin-top: 1rem;
}
.top-left h3{

	font-weight: bold;
	text-transform: uppercase;
	margin-top:3rem;
	color: #f3f2f3;
	margin-left:1rem;
	font-size: 2rem;
}
.top-left h3:hover{
	color:grey;
	cursor: pointer;
}
.top-right{
	margin-right:3rem;
}
.top-right >li>a, .first-level>li>a{
	text-decoration: none;
	color:#f3f2f3;
}
.top-nav  > .top-right >li {
	margin-left:3rem;
	margin-top:4rem;
	color:#f3f2f3;
	font-weight: bold;
	font-size:1.8rem;
}
.top-nav  > .top-right >li:hover,.top-right >li>a:hover{
	color:grey;
	cursor: pointer;
}
.top-right li:nth-child(2){
	text-transform: uppercase;
}
.bottom-nav .first-level{
	margin-top:1rem;
	display:flex;
	background-color: black;
	opacity: 0.5;
	height:3rem;
	width:100%;
	position: relative;
	padding-top:2rem;
}
.first-level >li{
	padding-bottom:1rem;
	color:#ffffff;
	text-transform: uppercase;
	margin-right:2rem;
	font-size: 1.6rem;
}
.first-level >li:nth-child(1){
	margin-left: 3rem;
}
.first-level >li:hover{
	padding-bottom:2rem;
	border-bottom:6px solid white;
	cursor: pointer;
	font-weight: bolder;
	text-decoration: underline;
}
.first-level >li>.first-dropdown{
	position: absolute;
	top:100%;
	visibility: hidden;
	opacity:0;
}
.first-level >li:hover >.first-dropdown{
	background-color:black;
	color:var(--dark-blue);
	visibility: visible;
	opacity:1;
}
.first-level>li>.first-dropdown>li>ul{
	position: absolute;
	left:100%;
	visibility: hidden;
	opacity: 0;
	width:100%;
	padding-right:2rem;
}
.first-level>li>.first-dropdown>li>ul>li{
	margin-bottom:1rem;
}
.first-level>li>.first-dropdown>li:hover>ul{
	visibility: visible;
	opacity:1;
	background-color:black;
	color:var(--dark-blue);
}
.first-dropdown{
	padding-top:2rem;
	padding-left:3rem;
	padding-bottom:2rem;
}
.first-dropdown>li>ul{
	padding-top:1rem;
	padding-left:1rem;
	padding-bottom:1rem;
}
.first-dropdown>li{
	line-height: 1rem;
	text-transform:capitalize;
	font-family: 'Quicksand', sans-serif;
	padding-right:2rem;
	margin-bottom:1rem;
	font-size: 1.6rem;
}
.first-dropdown>li:hover{
	border-left: 3px solid var(black);
	padding-left:0.25rem;
}
.first-dropdown>li>ul>li:hover{
	border-left: 1px solid var(--dark-blue);
	padding-left:0.25rem;
}

.first-level li:nth-child(5) a {
	color: #ffffff;
	text-decoration: none;
}
.header-container h1, .tip-header-container h1{
	font-family: 'Quicksand', sans-serif;
	font-size: 7.2rem;
	font-weight: 300;
	color:white;
	margin-top:30%;
	margin-left:32%;
	text-transform: uppercase;
	font-weight: bolder;
}
.header-container h2, .tip-header-container h2{
	color:white;
	text-transform: uppercase;
	font-weight: bolder;
	font-size:3rem;
	margin-left:32%;
}

.para-open{
	display:flex;
}

.para-open .line{
	width: 77%;
	height: 4.7rem;
	left:13%;
	margin-top:5.25rem;
	margin-left:2rem;
}

.products-detail{
	margin-left: 25%;
	justify-content: center;
	margin-bottom: 10rem;
}
.products-detail .products-inner, .products-detail .products-inner-tips{
	justify-content: space-between;
	background-color: var(--light-grey);
	width:80rem;
	margin:0 3rem;
	padding-top: 1rem;
	/* padding:0rem 9rem; */
}
.products-detail .products-inner:nth-child(1){
	height:70rem;
} 
.products-detail .products-inner:nth-child(2){
	height:115rem;
} 
.products-detail .products-inner:nth-child(3){
	height:120rem;
} 
.products-detail .products-inner:nth-child(4){
	height:80rem;
} 
.products-detail .products-inner-tips:nth-child(1){
	height: 78rem;
}
.products-detail .products-inner-tips:nth-child(2){
	height: 85rem;
}
.products-detail .products-inner-tips:nth-child(3){
	height: 87rem;
}

.top-products-left,.top-products-no-colors{
	margin-top:2rem;
	margin-left:2rem;
}
.top-products-no-colors h2{
	font-weight: bolder;
	text-transform: uppercase;
}
.top-products-no-colors img{
	margin-left: 4rem;
	margin-top: 1rem;
}

.products-inner .top-products,.top-products-no-colors, .products-inner-tips .top-products{
	font-size: 1.6rem;
}

.top-products-no-colors h2{
	font-size: 24px;
	margin-left:5rem;
	margin-right:6rem;
	margin-top:3rem;
	text-align: left;
}/* } measure of the img */

.top-products-no-colors figcaption{
	font-style: italic;
	font-size: 17px;
	text-align: center;
}

.products-inner p, .products-inner .sauce, .products-inner-tips p, .products-inner-tips .sauce{
	font-size: 20px;
	margin-left:5rem;
	margin-right:6rem;
	margin-top:2rem;
	text-align: left;
	line-height: 3rem;
}
.products-inner .sauce, .products-inner-tips .sauce{
	margin-top:0rem;
	margin-left:7rem;
}
.products-inner .sauce li, .products-inner-tips .sauce li{
	list-style-type: disc;
}
.products-inner .sauce li em, .products-inner-tips .sauce li em{
	font-style: italic;
}
main a img{
	margin-left: 25%;
	margin-bottom: 3%;
}
section figure {
	display: flex;
}

section figure img{
	width: 40rem;
	margin-top: 2rem;
	margin-right: 2rem;
}
section h2{
font-weight: bolder;
}
aside, section{
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 3%;
}
 aside h2, section h2{
	font-size: 3rem;
 }
 aside p, section p {
	 margin-top: 2%;
	 font-size: 2rem;
	 line-height: 3rem;
 }

footer{
	display:flex;
	justify-content: space-between;
	background-color:var(--dark-grey);
}
footer .left h4{
	margin-top:10.8rem;
	text-transform: uppercase;
	color:var(--light-grey);
	text-align: left;
	margin-left:6rem;
	font-family: 'Quicksand', sans-serif;
	font-size:2rem;
	font-weight: bold;
	margin-bottom:1rem;
}
footer .right h4{
	margin-top:10.8rem;
	text-transform: uppercase;
	color:var(--light-grey);
	text-align: right;
	margin-left:6rem;
	font-family: 'Quicksand', sans-serif;
	font-size:2rem;
	font-weight: bold;
	margin-bottom:1rem;	
}
footer .left p{
	margin-left:6rem;
	margin-bottom:11.4rem;
	width:30rem;
	font-size:1.5rem;
	font-family: 'Quicksand', sans-serif;
	color:var(--light-grey);
	line-height: 1.5rem;
	line-height: 2rem;
}
footer .left p a{
	text-decoration: none;
	color:var(--light-grey);
}
footer .right{
	margin-right:6rem;
	text-align: right;
}
footer .right ul{
	display:flex;
}
footer .right ul li,footer .right ul li a{
	text-decoration: none;
	font-size: 1.4rem;
	color:var(--light-grey);
	text-transform: uppercase;
	font-family: 'Quicksand', sans-serif;
	margin:0.1rem;
}
footer .right ul li:hover{
	font-weight: bold;
}
footer .right p{
	font-family: 'Quicksand', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color:var(--light-grey);
	margin-top:1rem;
}