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

article, aside, footer, header, main, nav, section {
display: block;}

html, body, h1, h2, h3, ul, li, a, p, 
article, aside, footer, header, main, nav, section{
padding: 0;
margin: 0;}


/* GENERAL */
@font-face {font-family: Superclarendon; src: url(“../fonts/Superclarendon.ttf”);}
@font-face {font-family: Georgia; src: url(“../fonts/Georgia.ttf”);}
@font-face {font-family: Georgia-Bold; src: url(“../fonts/Georgia-Bold.ttf”);}
@font-face {font-family: Georgia-Italic; src: url(“../fonts/Georgia-Italic.ttf”);}


h1 {font-family: 'Superclarendon'; font-size: 24px;}
h2 {font-family: 'Superclarendon'; font-size: 24px; ;}
body {font-family: Arial;}
nav { 
	background-color: black;
	width: 100%; 
	padding: 2%; 
	text-align: center; 
	font-family: 'Georgia';
	font-size: 18px; 
	height: 13%;
	transition: transform 1s; 
	transform: translateX(520px);}

.after-click{
transform: translateY(100%);}

li {margin-left: 1%;}

nav ul { 
 list-style-type: none;}

 nav ul li a { 
 text-decoration: none; 
 color: white;}

 nav ul li a:hover { 
 color: yellow;}

footer {font-family: 'Georgia'; font-size: 15px; background-color: black; padding: 1%; text-align: center;}

 footer ul li a { 
 text-decoration: none; 
 color: white;}

 footer ul li a:hover { 
 color: yellow;}

section.top {
padding: 2%;
text-align: center;}

section.home-photo {
background-color: white;
text-align: center;
margin-bottom: 2%;
padding-top: 1.5%;}



/* MOBILE */
.logo{
float: left;
margin-left: 1.5%;
width: 35%;}

body {
width: 100%;}

button#hamburger-icon{
float: right;
margin-right: 2%;
font-size: 300%;
background-color: transparent;
border: none;
color: white;}

button#hamburger-icon:hover {
color: yellow;}


img {
width: 100%;}


/* HOME */
article {
margin-top: 1%;}

figure.home {  
width: 100%;
padding: 0;
margin: 0;}

figure.home-2 {  
display: none;}

figcaption.home {
font-family: 'Superclarendon'; 
text-align: center; 
background: white; 
padding: 1%;}


/* MENU */
article.menu {
margin-top: 1%;}

figure.menu{
margin: 2%;
width: 43%;
display: inline-block;}

figcaption.menu {
font-family: 'Superclarendon'; 
text-align: center; 
background: white; 
padding: 1%;}


/* PIZZA */
figure.pizza {
margin: 2%;
width: 25%;
display: inline-block;
background-size: cover;}

figure#one {
background-image: url("../img/pizza-1.jpg");}
figure#one {
background-image: url("../img/pizza-2.jpg");}
figure#one {
background-image: url("../img/pizza-3.jpg");}


/* ABOUT */
article.form {
margin-left: 2%;
margin-top: 1%}



/*TABLET AND DESKTOP*/
@media screen and (min-width: 768px) and (max-width: 1365px) {

        figure#tablet {
            width: 768px;
            height: 1024px;
        }

        nav {margin-left: auto; 
			margin-right: auto; 
			background-color: black; 
			padding: 1.5%; 
			text-align: center; 
			font-family: 'Georgia'; 
			height: 3%;
	 		transition: none; 
	 		transform: none;}

		li a {color: white;}

		li {display: inline; text-decoration: none;}
		a:link {text-decoration: none; color: white;}
		a:visited {text-decoration: none; color: white;}
		a:hover {text-decoration: none; color: yellow;}
		a:active {text-decoration: underline; color: yellow;}

		footer {text-align: center;}

		button#hamburger-icon{
		display: none;}

		.logo {
		float: left;
		margin-left: 1.5%;
		width: 15%;}

		.logo:hover{
		transform: scale(1.1);}


		/* HOME */
		figure.home {  
		display: none;}

		figure.home-2 {  
		width: 30%; 
		margin: 1%;
		display: inline-block;}

		.home-2:hover {
		opacity: 0.2;
		transition: 1.5s;}

		.menu:hover {
		opacity: 0.2;
		transition: 1.5s;}

		/* MENU */
		figure.menu{
		width: 25%;
		display: inline-block;}

		.menu:hover {
		opacity: 0.2;
		transition: 1.5s;}


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

        figure#desktop {
            width: 1920px;
            height: 1080px;
        }


	}