@charset "utf-8";

/* CSS Document */

/* Fading Transition Effect */
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Zoom-In Transition Effect*/
@-webkit-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-moz-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-o-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}

body{font-family: 'Montserrat', sans-serif;color:#222121;}
p{font-family: 'archivoregular', sans-serif;color:#222121;}
footer {font-family: 'Montserrat', sans-serif;padding:40px; text-align:center;font-size:15px;line-height:1.75;color:#222121;}

.top-box{margin:0 auto;display:grid; grid-template-columns:auto;background-color:white; position: fixed;top: 0; width: 100%; right:5px; z-index: 1; float:right; padding-top:10px; justify-content: center;}

header{margin:0 auto;animation-name: fade; animation-duration: 3s; animation-fill-mode: forwards;}
nav{padding-top:5px;
	text-align:center;
	margin:0 auto;
	font-size:20px;
	height:50px;
	animation-name: fade;
 	animation-duration: 3s; 
 	animation-fill-mode: forwards;}


.menu a {
    clear:both;
    color:#222121;;
    margin:0 auto;
    line-height:50px;
    text-align:right;
  	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;}

nav a:hover, nav a:focus {
	background-color:#222121;
	color:white;
	padding: 20px;
}

.label {
     margin:0 auto;
     font-size: 30px;
     color:#292929;
     line-height:50px;
     display:none;
     width:25px;
     float:left;


}
#toggle
	{display:none;}

#middle-box
	{display:grid; grid-template-columns:auto; justify-content: center;margin:0 auto;}
#header-text
	{grid-column:1 / -1; margin-top:180px; border:dotted thick #222121; text-align: center; font-size:12px;}
#menu-section
	{display:flex; flex-direction:column; margin:0 auto;}
#section
	{margin:0 auto; padding-top:30px;}
#section a
	{-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
#section a:hover
	{background-color:white;border:groove thin #222121;color:#222121;}
.button
	{padding:10px; margin-left:20px; background-color:#222121; color:white;}
#store-menu
	{display:grid; grid-template-columns: auto; margin:0 auto;font-size: 20px;text-align: center;}
.box
	{display:grid; grid-template-columns: 10em 50em; margin:0 auto; padding-top:30px; justify-content: center;}
h1
	{font-weight:600;padding:10px 5px 10px 5px;}

@media screen and (max-width:1024px){
.vertical-line{display:none;}
.top-box
	{margin:0 auto;display:flex; flex-direction: row; width:100%; top:0px; right:5px; z-index: 1;float:left;padding-top:10px;justify-content: center;}
header
	{margin:0 auto;}
	
nav
	{font-size:20px;
    height:60px;
	margin-top:20px;}

.menu a 
	{clear:both;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus
	{background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	background-color: white;
	border:groove thin lightgray;
	width:fit-content;
	padding-left:15px;
	padding-right:15px;
	font-size:40px;}

	
.menu {
    width:100%;
    height:100%;
    display:none;
	margin-left:-125px;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align: center;
	width:200%;}
	
#toggle:checked + .menu {display:block;}
#middle-box{padding-top:0px;}
.box{display:flex;flex-direction:column;justify-content: center;padding-top:5px;}



h1{font-size:25px;text-align:center;}
}



@media screen and (min-width:769px) and (max-width:1024px)

{}



@media only screen

	and (max-width : 768px){}



@media only screen

and (min-width : 481px)

and (max-width : 768px) {

.box{display:flex;flex-direction:column; justify-content:center;padding-top:5px;margin:0 auto;}
#menu-section{display:flex;flex-direction:column;margin:0 auto;}


.button{border:solid thin;margin-left:10px;}
}



@media only screen

and (max-width : 480px) {


.box{display:flex;flex-direction:row;justify-content:center;padding-top:5px;margin:0 auto;}
#menu-section{display:flex;flex-direction:column;margin:0 auto;}

#section{display:flex;flex-direction:row;width:auto;text-align:center;;margin:0 auto;}

.button{border:solid thin;margin-left:10px;}



}



@media only screen

and (min-width : 321px)

and (max-width : 480px) {



.section{display:flex;flex-direction:column;}

.box{display:flex;flex-direction:column;justify-content: center;padding-top:0px;}


h1{font-size:20px;text-align:center;}

}



@media only screen

and (max-width : 320px) {


.menu a{
    clear:both;
    text-decoration:none;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus {
   	background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	width:fit-content;
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	font-size:20px;}
	
.menu {
    width:100%;
    height:100%;
    display:none;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align:center;
	width:200%;}
	
#toggle:checked + .menu {
     display:block;}

#section{display:flex;flex-direction:column;}

.box{display:flex;flex-direction:column;justify-content: center;padding-top:0px;}

h1{font-size:20px;text-align:center;}

}