@charset "UTF-8";
/* CSS Document */

img{
	max-width:100%;
	margin-top:7%;
	}

body{
	background-image:url("images/lips.png");
	background-repeat:repeat;
	background-size:7%;
	margin:0;
	}

.page{
	width:70%;
	background-color:#FEF3F3;
	position:relative;
	margin-left:16vw;
	margin-right:auto;
	margin-top:0vw;
	bottom:0vw;
	float:left;
	}

.homebutton{
			width:90%;
			position:relative;
			margin-top:2vw;
			margin-left:auto;
			margin-right:auto;
			margin-bottom:2vw;
			padding:3pt;
			}

.navbar{
		width:16%;
		background-color:#D37A7A;
		font-family:'antonioregular', sans-serif;
		font-size:2vw;
		color:white;
		align-content:center;
		margin-left:0;
		margin-right:auto;
		top:0;
		bottom:0;
		position:fixed;
		text-align:center;
		}



li {
    text-align:center;
	}

li.skin {
    display: inline-block;
	text-align:center;
	}


ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#D37A7A;
	text-align:center;
	}

/*dropdown for skin*/

li a, .dropbtn-skin{
    			display:inline-block;
    			color: white;
    			text-align: center;
    			padding: 14px 16px;
    			text-decoration: none;
				background-color: #D37A7A;
    			cursor:pointer;
				font-family:'antonioregular', sans-serif;
				font-size:2vw;
				border:thin;
				border-style:solid;
				padding-top:3%;
				padding-bottom:3%;
				border-bottom:none;
				border-right:none;
				border-left:none;}

li a:hover, .skin:hover .dropbtn-skin {
										background-color:black;
										}

li.skin {
		display: inline-block;
		
		}

.dropdown-content-skin{
						display: none;
						position:relative;
						background-color:black;
						min-width: 160px;
						box-shadow: 0vw 2vw 4vw 0vw rgba(0,0,0,0.2);
						z-index: 1;
						}

.dropdown-content-skin a{
						color:white;
						background-color:black;
						padding: 1vw 2vw;
						text-decoration: none;
						display: block;
						text-align: center;
						line-height:2.2vw;
						font-size:1.5vw;
						}

.dropdown-content-skin a:hover{
							background-color:black;
							color:#D37A7A;
							}

.skin:hover .dropdown-content-skin{
    								display:block;
									}

	

/*dropdown for face*/
	li a, .dropbtn-face{
    			display:inline-block;
    			color: white;
    			text-align: center;
    			padding: 14px 16px;
    			text-decoration: none;
				background-color: #D37A7A;
    			cursor:pointer;
				font-family:'antonioregular', sans-serif;
				font-size:2vw;
				border:thin;
				border-style:solid;
				padding-top:3%;
				padding-bottom:3%;
				border-bottom:none;
				border-right:none;
				border-left:none;}

li a:hover, .face:hover .dropbtn-face {
										background-color:black;
										}

li.face {
		display: inline-block;
		}

.dropdown-content-face{
						display:none;
						position:relative;
						background-color:black;
						min-width: 160px;
						box-shadow: 0vw 2vw 4vw 0vw rgba(0,0,0,0.2);
						z-index: 1;
						}

.dropdown-content-face a{
						color:white;
						background-color:black;
						padding: 1vw 2vw;
						text-decoration: none;
						display: block;
						text-align: center;
						line-height:2.2vw;
						font-size:1.5vw;
						}

.dropdown-content-face a:hover{
							background-color:black;
							color:#D37A7A;
							}

.face:hover .dropdown-content-face{
    								display:block;
									}

	

								
/*dropdown for eyesbrows*/
	li a, .dropbtn-eyesbrows{
    			display:inline-block;
    			color: white;
    			text-align: center;
    			padding: 14px 16px;
    			text-decoration: none;
				background-color: #D37A7A;
    			cursor:pointer;
				font-family:'antonioregular', sans-serif;
				font-size:2vw;
				border:thin;
				border-style:solid;
				padding-top:3%;
				padding-bottom:3%;
				border-bottom:none;
				border-right:none;
				border-left:none;}

li a:hover, .eyesbrows:hover .dropbtn-eyesbrows {
										background-color:black;
										}

li.eyesbrows {
		display: inline-block;
		}

.dropdown-content-eyesbrows{
						display:none;
						position:relative;
						background-color:black;
						min-width: 160px;
						box-shadow: 0vw 2vw 4vw 0vw rgba(0,0,0,0.2);
						z-index: 1;
						}

.dropdown-content-eyesbrows a{
						color:white;
						background-color:black;
						padding: 1vw 2vw;
						text-decoration: none;
						display: block;
						text-align: center;
						line-height:2.2vw;
						font-size:1.5vw;
						}

.dropdown-content-eyesbrows a:hover{
							background-color:black;
							color:#D37A7A;
							}

.eyesbrows:hover .dropdown-content-eyesbrows{
    								display:block;
									}

	

								
/*dropdown for lips*/
	li a, .dropbtn-lips{
    			display:inline-block;
    			color: white;
    			text-align: center;
    			padding: 14px 16px;
    			text-decoration: none;
				background-color: #D37A7A;
    			cursor:pointer;
				font-family:'antonioregular', sans-serif;
				font-size:2vw;
				border:thin;
				border-style:solid;
				padding-top:3%;
				padding-bottom:3%;
				border-bottom:none;
				border-right:none;
				border-left:none;}

li a:hover, .lips:hover .dropbtn-lips {
										background-color:black;
										}

li.lips {
		display: inline-block;
		}

.dropdown-content-lips{
						display:none;
						position:relative;
						background-color:black;
						min-width: 160px;
						box-shadow: 0vw 2vw 4vw 0vw rgba(0,0,0,0.2);
						z-index: 1;
						}

.dropdown-content-lips a{
						color:white;
						background-color:black;
						padding: 1vw 2vw;
						text-decoration: none;
						display: block;
						text-align: center;
						line-height:2.2vw;
						font-size:1.5vw;
						}

.dropdown-content-lips a:hover{
							background-color:black;
							color:#D37A7A;
							}

.lips:hover .dropdown-content-lips{
    								display:block;
									}

	
/*images*/

#makeup_bag{
			width:90%;
			position:relative;
			margin-left:auto;
			margin-right:auto;
			}	

#primer{width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#foundation{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#concealer{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#blush{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#highlighter{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#bronzer{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#setting-spray{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#face-wash{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#face-masks{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#moisturizer{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#bb-cream{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#sunblock{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#makeup-remover{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#eyeliner{
		width:60%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#eye-shadow{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#mascara{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#eyebrow-pencil{
		width:60%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
		
#lip-liner{
		width:60%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}
		
#lipstick{
		width:33%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

#lip-gloss{
		width:44%;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		}

/*text*/

.bold{
	font-family:'antoniobold', sans-serif;
	}

h1{
	font-family:'antoniobold', sans-serif;
	font-size:4vw;
	margin-left:7%;
	margin-top:7%;
	margin-right:7%;
	}
	
#index-text{
			font-family:'antoniolight', sans-serif;
			font-size:2vw;
			margin-left:7%;
			}

.text{
	font-family:'antoniolight', sans-serif;
	font-size:1.5vw;
	margin-left:30%;
	margin-top:7%;
	margin-bottom:7%;
	float:left;
	width:45%;
	line-height:2.5vw;
	position:relative;
	}

.tagline{
		font-family:'antoniolight', sans-serif;
		font-size:2vw;
		margin-left:7%;
		}