/* css reset */
*{

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



/*laptop */
@media screen and (min-width: 1366px){

/* canvas */
	main#canvas {
		width: 1366px;
		height: auto;
		font-family: "Comic Sans MS";
		background-color: lightblue;
	}
	
	
	/* Header starts here */
	
	header#header {
	
		height: 25%;
		width: 100%;
	
	}
	
	article#logo {
	
		height: 100%;
		width: 30%;
		float: left;
	
	}
	
	article#list {
	
		height: 100%;
		width: 70%;
		float: left;
	}
	
	
	/* html tags for header section*/
	
	ul.horizontal-list {
	
		display: inline;
		
	} 
	
	ul.horizontal-list li {
	
		display: inline;
		font-size: 250%;
	
		
	}
	
	nav.wrapper {
	
		height: 100%;
		width: 100%;
		padding-top: 3%;
		padding-left: 10%;
		
	}
	
	a.horizontalList {
	
		text-decoration: none;
		color: red;
	
	
	}
	
	img#restLogo {
	
		height: 100%;
		width: 60%;
	}
	
	
	
	/* Header ends here */
	
	
	
	
	/* content starts here */
	
	section#content{
	
		height: 90%;
		width: 100%;
		
	
	}
	
	h2#title {
	
		padding-top: 3%;
		text-align: center;
		font-size: 250%;
	}
	
	article#picOfOwner{
	
		width: 20%;
		
		float: left;
	
	}
	
	
	article#paragraph{
	
		width: 70%;
		padding-top: 3%;
		float: left;
	
	}
	
	img#owned {
	
		padding: 5%;
		padding-left: 13%;
		height: 60%;
		width: 70%;
	
	}
	
	p#whoWeAre {
	
		font-size: 150%;
		text-align: justify;
		padding-top: 5%;
	
	}
	
	/* content ends here */
	
	
	
	/* info starts here */
	
	
	footer#info {
	
		height: 25%;
		width: 100%;
		background-color: black;
	
	}
	
	article#location {
	
		width: 50%;
		height: 100%;
		float: left;
	
	}
	
	
	article#socialMedia{
	
		width: 50%;
		height: 100%;
		float: left;
	
	}
	
	
	
	.white{
	
		color: white;
	}
	
	
	h2#addressWord {
	
		padding-top: 5%;
		padding-left: 30%;
		font-size: 180%;
	}
	
	p#address {
	
		padding-left: 35%;
		font-size: 150%;
	}
	
	a {
	
		text-decoration: none;
	}
	
	img#ig{
	
		width: 10%;
		height: 20%;
	}	


	#hamburger-button {
		display: none;
	}

	.tabletPhone {

		display: none;
	}

}

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



	/* 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: 40%;
		padding-left: 25%;
		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 */
	
	section#content{
	
		height: 70%;
		width: 100%;
		
	
	}
	
	h2#title {
	
		padding-top: 3%;
		text-align: center;
		font-size: 250%;
	}
	
	article#picOfOwner{
	
		width: 40%;
		
		float: left;
	
	}
	
	
	article#paragraph{
	
		width: 60%;
		padding-top: 3%;
		float: left;
	
	}
	
	img#owned {
	
		padding: 5%;
		padding-left: 13%;
		height: 60%;
		width: 70%;
	
	}
	
	p#whoWeAre {
	
		font-size: 100%;
		text-align: justify;
		padding-top: 5%;
		padding-right: 3%;
	
	}
	
	/* content ends here */



	/* pc list setisplay to none; */

	.horizontal-list {

		display: none;
	}

	.wrapper{

		display: none;
	}

	article#list {

		display: none;
	}


	footer#info {
		display: none;
	}
}




/* 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: 40%;
		padding-left: 25%;
		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 */
	
	section#content{
	
		height: auto;
		width: 100%;
		
	
	}
	
	h2#title {
	
		padding-top: 3%;
		text-align: center;
		font-size: 150%;
	}
	
	article#picOfOwner{
	
		width: 100%;
		
		
	
	}
	
	
	article#paragraph{
	
		width: 100%;
		padding-top: 3%;
		
	
	}
	
	img#owned {
	
		padding: 5%;
		padding-left: 13%;
		height: 60%;
		width: 50%;
		text-align: center;
	
	}
	
	p#whoWeAre {
	
		font-size: 100%;
		text-align: justify;
		padding-top: 5%;
		padding-left: 3%;
		padding-right: 3%;
	
	}
	
	/* content ends here */



	/* pc list setisplay to none; */

	.horizontal-list {

		display: none;
	}

	.wrapper{

		display: none;
	}

	article#list {

		display: none;
	}


	footer#info {
		display: none;
	}


}