/* CSS Document */
body, header, nav, main, div, footer, h1, img, ul, figure, figcaption, section, article, aside {
	margin: 0;
	padding: 0;
	border: 0;
}

#submit {
	border: 4px #303C4B solid;
	border-radius: 4px;
	font-size: 20px;
	width: 30%;
	margin-top: 20px;
	margin-left: 50px;
	margin-bottom: 20px;
}

#reset {
	border: 4px #303C4B solid;
	border-radius: 4px;
	font-size: 20px;
	width: 30%;
}
#tet {
	font-size: 14px;
}

#tet:hover {
	font-size: 20px;
}

#email {
max-width: 70px;
}

form {
	background-color:#85BED0;
	color:#153C50;
	border: 5px #303C4B dashed;
	margin: 40px;
	
}

#option {
	color:#990C0E;
}
label:hover {
	color:#AE181B; 
}


input {
	color: #620000;
}

input:hover {
	color: #980000;
	background-color: #628BA0;
}
#blan {
	font-size: 3em;
	text-align: right;
	float: right;
	color: white;
}

/* Add a black background color to the top navigation bar */
.topnav {
  overflow: hidden;
}



/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

table {
	border: 5px #303C4B solid;
	background-color:#506B73;
	display: block;
	
}

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

	.test {
		display:inline-block;
		width: 40%;
	}

#gla {
	width:50%;
	display: inline-block;
}

.gall {
	display: inline-grid;
	grid-template-columns: auto auto auto;
	width: 100%;
}
.galpic {
	border: #256579 solid 7px;
	margin: 10px;
	width: 90%;
	max-width: 400px;
	display: inline-block;
}

.galpic:hover {
	border: #3C92AC solid 9px;
	margin: 10px;
	width: 95%;
}
.shop {
	border: solid 5px  #2C2C2C;
	margin: 10px;
	background-color:#EDF0F4;
}

.blue {
	color:#486B7B;
}
.price {
	color:#0C3243;
}
.hide {
		display: none;
	}


.staf {
	display: inline;
	border: double 20px white;
	margin-right: 30px;
	float: left;
	height: 20%;
}
.staf2 {
	display: inline;
	border: double 5px #858585;
	margin-right: 30px;
	float: left;
	height: 20%;
}
#headtext {
	display: block;
	font-size: 2em;
	float: right;
	text-align: center;
	color:#700608;
	padding-right: 1.5em;
}
		.see {
	display: none;
}

.gone {
	display: inherit;
}
.blah {
	display:none;
}

.blah2 {
	display:none;
}
.clipimg {
	float:right;
}

#right {
	text-align: left;
}
article article {
	background-color: white;
	border: double 10px #959595;
	color: #AB0002;
}
footer {
	background-color: #AB0002;
	color: white;
	text-align: center;
}


header {
	background-image: url('../images/headerbanner.png');
	background-repeat:repeat-x;
	width: 100%;
		padding: 3px;
}

header img {
	margin: 3px;
	
}

ul li {
	text-decoration: none;
	margin: 0.5em;
	background-color: white;
	color: #620000;
}



 nav li {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed",  "sans-serif";
    text-align: center;
    padding: 1em;
   margin: 0.5em;
	display: inline-grid;
	background-color: #f2f2f1;
	width: 10%;
	 grid-template-columns: auto auto auto auto;
	 
}

nav ul li:hover > ul {
	display:inline-block;
	width:inherit;
	background-color: #9A0406;
	
	
}

nav li:hover {
	background-color: #FFBCBE; 
    border:#620000;
	}

nav ul ul {
	margin-top: 35px;
	text-align: center;
	display:none;
	position: absolute;
	
}

nav ul ul li {
	width: auto;
}
nav a {
color:#CB373A;
     text-decoration: none;
	
}
nav {
    padding: 10px;
    background-color:  #9A0406;
}



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

body {
	border: solid #C40608 10px;
}

.grid {
	 display:grid;
    grid-template-columns: auto  auto auto auto auto auto auto auto;
}

.grid2 {
	 display:inline-flex;
    grid-template-columns: auto auto;
	padding: 30px;
}

.grid3 {
	 display:inline-flex;
    grid-template-columns: auto auto;
	padding: 30px;
	
}

article {
	border: solid 6px #959595;
	padding: 12px;
	margin: 12px;
	color: #620000;
	background: #DEDEDE;
	
}

article img {
	height: 250px;
}

#img3 {
	height: 500px;
}
.link {
	color: #AB0002;
}

.link:hover {
	color: #7CADC3;
}

.link2 {
	color: #FF0002;
}

.link2:hover {
	color: #7CADC3;
}


/* mobile */
@media screen and (max-width:480px) {
	
	.gall {
	display: block;
	width: 100%;
}
	
	.staf {
	float:none;
}
	
	.gone {
	display: none;
}
	
		.see {
	display:inherit;
}
			.blah2 {
		display: none;
	}
	
	.blah {
		display:inline-block;
		border: solid #AB0002 5px;
		margin: 20px;
		width: 500px;
	}

	
	
	.mobile-nav a {
    text-align: center;  
    font-size: 1.5em;
    display: block;
}

.mobile-nav a.menu-icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
} 
	
	.clipimg {
	display: none;
}
	
	
	
	nav li {
		width: 100%;
		display:grid;
		 grid-template-columns: auto;
		
		
		
	}
	
			nav {
		display:grid; 

		
	}
	
		nav ul{
		display:grid;
			
			
	}
	
	
	#full {
		width: 100%;
	}
	
	#grid {
		display: block;
		
	}
	
}

/* tablet */
@media screen and (max-width: 768px) {
	
	.test {
		display:none;
	}
	
	table {
		display: none;
	}
	
.gall {
	display: inline-grid;
	grid-template-columns: auto auto;
	width: 100%;
}
	
	#headtext {
	display: none;
}
	
	.gone {
	display: none;
}
	
		.see {
	display:inherit;
}
	
	.blah {
		display:inline-block;
		border: solid #AB0002 5px;
		margin: 20px;
		width: 500px;
	}
	
		.blah2 {
		display:inline-block;
		border: solid #AB0002 5px;
		margin: 20px;
		height: 200px;
	}
	
	
	.mobile-nav a {
    text-align: center;  
    font-size: 1.5em;
    display: block;
}

.mobile-nav a.menu-icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
	margin-right: 40px;
} 
	
	.clipimg {
	display: none;
}
	
	
	
	nav li {
		width: 100%;
		display:grid;
		 grid-template-columns: auto;
		
		
	}
	
			nav {
		display:grid;

		
	}
	
		nav ul{
		display:grid;
			
	}
	
	
	
	#full {
		width: 100%;
	}
	
	
	
	article {
		width: 100%;
	}
}
@media screen and (max-width: 1002px) {
	#headtext {
	display: none;
}
	
	.grid3 {
	 display: none;
}
	
	.hide {
		display: block;
	}
}