@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Asap');

*{
	font-family: "Futura";
	margin: 0;
	padding:0;
}

/* UNIVERSAL CSS */


background-image{
	opacity: 60%;
}


nav{
	font-size: 1.5vw;
	padding-top: 
	margin-top:25vw;
}

ul {
	list-style-type: none;
	text-align: right;
}


li {
		display: inline-block;
		font-size:1.5vw;
		padding: 9px;
		margin:20px;
		border: 3px solid black;
		border-color: lightcoral;
		border-radius: 10%;
		box-shadow: 1px 1px 1px black;
	}

p{
	font-size:2;
	text-align: left;
}


li:hover{
	cursor: pointer;
}

.image1{
	
	margin-bottom: 10px;
	padding-left: 10vw;
	float: left;

}

.image1:hover{
	transform: rotate(10deg);

}

.boxed{
	border:1px;
	background-color: lightcoral;
	height: 30px;
}


.top-container-left{
	color: white;
	float:left; 
	width:40%;
	margin-top: 3px;
	margin-left: 38px;

}

.top-container-center{
	color:white;
	float:left; 
	width:40%; 
	margin-top: 3px;
	

}	

.top-container-right{
	color: white;
	float: left;
	margin-top:3px;
	

}




li#menu:hover{
	background-color: lightcoral;
	color: white;
	transform: scale(1.2);
}

li#order:hover{
	background-color: lightcoral;
	color: white;
	transform: scale(1.2);
}

li#about:hover{
	background-color: lightcoral;
	color: white;
	transform: scale(1.2);
}

li#news:hover{
	background-color: lightcoral;
	color: white;
	transform: scale(1.2);
}

.fa {
    padding: 7px;
    font-size: 10px;
    width: 10px;
    text-decoration: none;
    text-align: center;
}

.fa-facebook {
    background: #3B5998;
    color: white;
    
}

.fa-twitter {
    background: #55ACEE;
    color: white;
    text-align: right;
}

.fa-instagram {
    background: blue;
    color: white;
    text-align: right;
}


footer{
	display:block;
	width:100%;
	text-align:center;
	background-color: lightcoral;
	color:white;
	overflow:auto;
	
}



/* HERE ARE CSS3 ANIMATIONS */

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

	.fade-in{
		animation-name: fade-in;
		animation-duration: 1s;
		animation-fill-mode: backwards;
		

}
	.fade-one{
		animation-delay: 1s;
		animation-name: fade-in;
		animation-fill-mode: backwards;

	}

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




/* COLOR CLASSES */

.lightcoral {
	background-color: purple;

}

.image{
	margin-top: 10px;

}


.boxed1{
	text-align: center;
}

.about{
	text-align: left;
	font-size: 2vw;
	color: black;
	font-family: "helvetica";
	margin-left: 10%;
}


section{
	margin-left: 5%;
	margin-right: 5%;
}




/*HOMEPAGE SECTION*/

/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
    /*font-size: 2vw;*/
    }

 /* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 90px;
    font-size: 50px;
    
    
}

.centered:hover{
	color: turquoise;
	cursor: pointer;
}

.centered2 {
    position: absolute;
    top: 60%;
    left: 150px;
    font-size: 50px;
    padding-top: 20px;
    
}

.centered2:hover{
	color: turquoise;
	cursor: pointer;
}

/* Bottom right text */
.bottom-right {
	font-size: 2vw;
    position: absolute;
    bottom: 28px;
    right: 35px;

    }

.bottom-right:hover{
	transform: scale(1.2);
	color: white;
}





/*MENU SECTION*/

h1{
	text-align: center;
	font-size: 1vw;
	font-family:"futura";
	color: lightcoral;
	cursor: pointer;

}

h2{
	text-align: center;
	font-size: 2vw;
	font-family:"futura";
	color: lightcoral;
	cursor: pointer;

}

.titles{
	color: lightcoral;
	text-align: center;
	font-size: 2vw;
}

.title-left{
	color: lightcoral;
	font-size: 1.5vw;
	float: left;
}

.title-right{
	color: lightcoral;
	font-size: 1.5vw;
	float:right;
	margin-right: 250px;
	
}

.title-drink-right{
	float: right;
	color:lightcoral;
	margin-right: 15vw;
}

.title-drink-left{
	float: left;
	margin-left: 80px;
	color: lightcoral;
}

.toppings-left{
	color: black;
	text-align: left;
	margin-left: 180;

}

.toppings-right{
	color: black;
	text-align:right;
	margin-right: 215px;
}

.toppings-center{
	color: black;
	text-align: center;
	font-size: 1vw;
}

.menu-salad-left{
	float:  left;
	color: black;
	font-size: 1vw;
	margin-left: 70px;

}

.menu-salad-right{
	float:right;
	color: black;
	font-size: 1vw;
	margin-right: -3vw;

}

.menu-pizza-left{
	float:  left;
	color: black;
	font-size: 1vw;
	margin-left: 75px;
}

.menu-pizza-right{
	float:right;
	color: black;
	font-size: 1vw;
	margin-right: -5vw;
}


.knotts{

	color: lightcoral;
	font-size: 1.5vw;
	text-align: center;
}

.fotorama{
		width: 50%;
		height: 40%;
		margin: auto;
}





/*ORDER SECTION*/

.button-left{
		
		display: inline-block;
		font-size:1vw;
		padding: 3px;
		margin:10px;
		border: 1px solid black;
		border-color: lightcoral;
		border-radius: 10%;
		box-shadow: 1px 1px 1px black;
		align-content: left;

}


.button-right{
	margin-right: 215px;
}

.button-center{
	float: center;
	margin-left: 60%;
}






/*ABOUT SECTION*/

.start-hidden{
				display: none;
			}

.boxed3{
	height: 50vh;
	
}

		h1#city{
			font-size: 1.5vw;
			color: black;
		}

		h1#address{
			font-size: 1.5vw;
			color: black;
		}

		h1#phone{
			font-size: 1.5vw;
		}



section#santamonica{
	float: left;
	margin-left: 5px;
	margin-right: 20%;
	margin-top: 2.5%;

	
	
}


section#westhollywood{
	float: left;
	margin-left:50%;
	margin-top: 2.5%;
	
}

section#losangeles{
	float: left;
	margin-left: 5%;
	margin-top: 2.5%;

	

}


.boxed4{
	float: 

}

.image3a{
	float: left;
	margin-left: 5%;	
	margin-right: 5%;	
	margin-bottom: 5%;
	margin-top: 2.5%;
	border: 2px solid lightcoral;
}

.image3b{
	float: left;
	margin-right: 5%;	
	margin-bottom: 5%;
	margin-top: 2.5%;
	border: 2px solid lightcoral;
}

.image3c{
	float: left;
	margin-right: 4%;	
	margin-bottom: 5%;
	margin-top: 2.5%;
	border: 2px solid lightcoral;
}





/*NEWS SECTION*/

h3{
	text-align: center;
	font-size: 2vw;
	color: lightcoral;
	cursor:pointer;
}





/* HERE IS MY STYLES FOR MOBILE DEVICES */

	@media screen and (max-width: 479px){

		section#mobile-screen{
			width: 375px;
			height: 627px;
			

		}
	}






/* HERE ARE MY STYLES FOR LAPTOP DEVICES */

	@media screen and (min-width: 1366px) and (max-width: 1920px){

		section#laptop-screen{
			width: 1366px;
			height:768px;
			
		}
	}

/*HERE ARE MY STYLES FOR TABLET DEVICES */

	@media screen and (min-width: 1366px) and (max-width: 1919px){

		section#tablet-screen{
			width: 1366px;
			height:768px;
			
		}
	}


/*HERE ARE MY STYLES FOR PHABLET DEVICES */

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

		section#phablet-screen{
			width: 480px;
			height:768px;
			
		}
	}