*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
	list-style: none;
}

@font-face{
		font-family: quantify-bold;
		src: url('../fonts/quantify-bold.ttf');
	}
	@font-face{
		font-family: WAR;
		src: url('../fonts/WAR.ttf');
	}

body{
	width: 100vw;
	height: 100vh;
	
	</* background-color: green */>
}


/* THIS IS HEADER */



header {
	width: 100%;
	height: 15%;
	
 
}
header section{
	float: left;
}

button{
 
	 line-height: 1.5em;
	font-size: 2vw;
	border: 0.1vw solid black;
	margin: 2vw 0 0 4vw;
	padding: 0 1vw 0.5vw 1vw;
	border-radius: 10%;
	box-shadow: 0.2vw 0.2vw 0.2vw black;
 
	 }

	 button:hover{
	color: white;
	background-color: black;
	border-color: white;
}
li.hamburger {
	float: left;
	padding: 4%;
}



nav#hamburger  {
	width: 100vw;
	background-color: black;
	font-family: Arial, sans-serif;
	 position: fixed;
	font-size: 3vw; 
	
	top:-40vh; 
	padding: 2vw;
	transition: transform 0.8s;
	 

} 
nav#hamburger li{
	padding-bottom: 3vh;
}
nav#hamburger a{
	color: white;
}


.slide-the-drawer{
	transform: translateY(50vh);
}



 @media screen and (min-width:480px) and (max-width: 767px) {
  

 	li.nav{
 		font-size: 35px;
 	}



 	nav#regular {
 		display: none;
 	}


 }


  @media screen and (min-width:768px) and (max-width:1365px) {
 
 	li.nav{
 		font-size: 35px;
 	}

 	nav#regular {
 		display: none;
 	}


 }


 @media screen and (min-width: 1366px) and (max-width: 1919px) {
  
 	button{
 		display: none;
 	}

 	nav#hamburger{
 		display: none;
 	}

 }


img.logo{
	width: 30%;
	
	margin: 4% 0% 0% 7%;
}
 
section.logo{
	width: 45%;
	height: 100%;
	 
}

 

section.account{
	width: 45%;
	height: 100%;
	 
}

section.button{
	width: 10%;
	height: 100%;
}

li.header{
	float: right;
	font-family:cooper;
	display: block;
	 border-radius:35%;
	padding:1%;
	margin: 10% 20% 0% 0%;
	text-decoration: none;
	list-style-type: none;
	 
}

 .header a{
 	color: black;
}

li.header a:hover{
	color: red;
}

/* HERE IS NAV BAR */



nav#regular  ul {
 
 
	margin-top: 3%;
    padding: 0;
	background-color: black;
	overflow: hidden;
	text-decoration: none;


}
nav#regular li{ 
	list-style: none;
	font-family: cooper;

	float: left;
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 1%;
	margin-left: 15%;
	 

	
}

#regular a {
	color: white;
}

nav li:hover{
	background-color: red;
}



h2{margin:2% 0% 0% 2%;
	font-family: War;
}

/*here is animation*/
section.animation {
	width: 70%;
	height: 5%;
	margin-top: 3%;
	background: ;
	margin-left: 15%;
}
article.animation{
	width: 33.333%;
	height: 100%;
	float: left;
	font-family:  quantify-bold;
	font-size: 19px;
	background-color: red;
	text-align: center;
	padding-top: 2%;
	

}

article.red{
	background-color:  ;
 
}
article.yellow{
	background-color: ;
 
}
article.black{
	background-color:  ;

} 



@keyframes fade-in{
	0% { opacity: 0; }
	100% {opacity: 1;}
}

@keyframes blink{
	0% {opacity: 0.5;}
	100% {opacity: 1;}
}	
 
.blink{
		animation-name: blink;
		animation-duration: 5s;

	}
.fade-in{
		animation-name: fade-in;
		animation-duration: 2s;
		animation-fill-mode: backwards;
	}
 .fade-two{
		animation-delay: 1s;
	}
.fade-three{
		animation-delay: 2s;
	}	


/* fotorama*/
.fotorama {

	width: 100vw;
	margin:3% 0% 3% 10%;
}




/* HERE ARE DEALS*/

h3.deal{
	margin: 2%;
}

section.deal {
	width: 100%;
	height: 58%;
	margin-bottom: 10%;
	margin-top: 5%;
	 
		
}

article.deal{
	width: 50%;
	height: 100%;
	
	float: left;
}

figure.deal{
	width: 60%;
	height: 100%;
	background-color: white;
	
	margin-left: 20%;
}
img.deal{
	width: 100%;
	height: 50%;
}

figcaption.deal{
	width: 100%;
	 float: left;
}
ul.deal{
 
	list-style-type: none;
	margin: 0%;
	padding: 0%;

}


li{
	display: block;
	padding: 7% 0% 0% 4%;
	font-family: helvetica;
	font-size: 16px;
}

li.red{
	color: red;
}

li.button{
	font-size: 18px;
 	text-align: center;
	margin: 5% 0% 0% 0%;
	padding-bottom: 2%;
	border: solid red;
	background-color: red;

}
li.button:hover{
	transform: scale(1.1);
}

 
 

/* HERE IS MENU*/

.menu a{
	color: red;
}
.menu a:hover{
	color: black;
}



h3.menu{
	margin: 2%;
}

 
.content-wrapper{
	position: relative;
 
	width: 28%;

	float: left;
	color:black;
	 
	margin:2%;
 
}
.content-wrapper img{
	width: 100%;
	
}
.text-wrapper{
	font-size: 18px;
	font-family: quantify-bold;
	position: absolute;
	top:3%;
	left: 3%;
} 

footer{
	width: 100%;
	height: 30%;
	background-color:#d4d5d6;
	margin-top: 40%;

}

footer section {
	width: 28%;
	height: 100%;
 
	float: left;
	 margin-top: 3%;
}
.social-media img{

width: 100%;
}

footer img.logo {
	 
	width: 50%;
}
 
footer li.header{
	 
	 
 
	padding:1%;
	margin: 12% 20% 0% 0%;
	text-decoration: none;
	list-style-type: none;
	 
}