/* css reset */
*{

	margin: 0;
	padding: 0;
	color: #000;
}


/*tablet */
@media screen and (min-width: 767px)  {



	/* canvas */
	main#canvas {
		width: 768px;
		height: 1024px;
		font-family: "Comic Sans MS";
		background-color: lightblue;
	}
	

	/* Header starts here */
	
	header#header {
	
		height: 25%;
		width: 100%;
	
	}

	article#logo {
	
		height: 100%;
		width: 100%;
		
	
	}





	img#restLogo {
	
		height: 80%;
		width: 50%;
		padding-left: 20%;
		padding-top: 5%;
		
	}
	


	
	button#hamburger-button {

	position: fixed;
	font-size: 4em;
	z-index: 1;
	line-height: 1em;
	padding: 0.1em 0.2em 0.2em 0.2em;
	border: 0.1em solid black;
	border-radius: 10%;
	margin: 0.2em;


	}
	

	button#hamburger-button:hover {

		color: black;
		background-color: rgba(0,0,0,0.5);
		border-color: rgba(255,255,255,0.5);

	}

	
	nav.tabletPhone {
		position: fixed;
		top: 0;
		font-size: 3em;
		padding: 20vh 5vw 0 5vw;
		background-color: rgba(255,255,255,0.9);
			left: -60vw;
			transition: transform 1s;
	}
		
		
		.slide-the-drawer {
	
			transform: translateX(60vw);
		}
			

			nav.tabletPhone ul {
		
				list-style-type: none;
		
			}
		
				nav.tabletPhone ul li a {
		
					text-decoration: none;
					color: black;
		
				}
		
					nav.tabletPhone ul li a:hover {
		
						text-decoration: none;
					} 

	/* content starts here */


	article#location {
	
		width: 100%;
		height: 15%;
		
	
	}
	
	
	article#socialMedia{
	
		width: 100%;
		height: 15%;
		
	
	}
	
	
	
	.white{
	
		color: black;
	}
	
	
	h2#addressWord {
	
		padding-top: 5%;
		padding-left: 10%;
		font-size: 180%;
	}
	
	p#address {
	
		padding-left: 10%;
		font-size: 150%;
	}
	
	a {
	
		text-decoration: none;
	}
	
	img.ig{
	
		width: 50px;
		height: 50px;
	}

}




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

	/* canvas */
	main#canvas {
		width: 480px;
		height: auto;
		font-family: "Comic Sans MS";
		background-color: lightblue;
	}
	

	/* Header starts here */
	
	header#header {
	
		height: 25%;
		width: 100%;
	
	}

	article#logo {
	
		height: 100%;
		width: 100%;
		
	
	}





	img#restLogo {
	
		height: 80%;
		width: 50%;
		padding-left: 20%;
		padding-top: 5%;
		
	}
	


	
	button#hamburger-button {

	position: fixed;
	font-size: 2em;
	z-index: 1;
	line-height: 1em;
	padding: 0.1em 0.2em 0.2em 0.2em;
	border: 0.1em solid black;
	border-radius: 10%;
	margin: 0.2em;


	}
	

	button#hamburger-button:hover {

		color: black;
		background-color: rgba(0,0,0,0.5);
		border-color: rgba(255,255,255,0.5);

	}

	
	nav.tabletPhone {
		position: fixed;
		top: 0;
		font-size: 2em;
		padding: 20vh 5vw 0 5vw;
		background-color: rgba(255,255,255,0.9);
			left: -80vw;
			transition: transform 1s;
	}
		
		
		.slide-the-drawer {
	
			transform: translateX(80vw);
		}
			

			nav.tabletPhone ul {
		
				list-style-type: none;
		
			}
		
				nav.tabletPhone ul li a {
		
					text-decoration: none;
					color: black;
		
				}
		
					nav.tabletPhone ul li a:hover {
		
						text-decoration: none;
					} 



	/* content starts here */

	article#location {
	
		width: 100%;
		height: 15%;
		
	
	}
	
	
	article#socialMedia{
	
		width: 100%;
		height: 15%;
		
	
	}
	
	
	
	.white{
	
		color: black;
	}
	
	
	h2#addressWord {
	
		padding-top: 5%;
		padding-left: 10%;
		font-size: 180%;
	}
	
	p#address {
	
		padding-left: 10%;
		font-size: 150%;
	}
	
	a {
	
		text-decoration: none;
	}
	
	img.ig{
	
		width: 50px;
		height: 50px;
	}

}