body {
	margin: auto;
	font-family: Lato;
}

#page-container {
  position: relative;
  min-height: 99vh;
}

#mainbody {
	margin-top: 30px;
	padding: 15px 0px 0px 0px;
}

#content-wrap {
	padding-bottom: 60px;  
}

@font-face {
    font-family: Nanocatsammy;
    src: url("fonts/Nanocatsammy-Regular.otf") format("opentype");
}

/*Nano Cat Sammy Header Title*/
#maintitle {
	font-family:Nanocatsammy;
	font-size:60px;
	color:#777777;
	text-align: center;
	font-weight: 300;
	text-transform: uppercase;
	text-decoration: none;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Social Links Left*/
.socialtop {
	position:absolute;	
	left: 10px;
	top: 5px;
    z-index: 1001;
}

.sociallogo {
	width:35px;
}

/*Cart top right*/
.carttop {
	position:absolute;	
	right: 10px;
	top: 5px;
  z-index: 1001;
}

.cartlogo {
	width: 35px;
}
 
/* Search bar*/
.searchbar {
	overflow: hidden;
	margin:auto;
	width: 200px;
}

/* Style the search box inside the navigation bar */
.searchbar input[type=text] {
	float: right;
	padding: 6px;
	border: 1px solid #353535;
	margin-right: auto;
	margin-bottom: 15px;
	font-size: 10px;
	text-align: center;
}

/*Header character image*/
#charlogo {
	width: 170px;
	height: auto;
}

/* Border*/
#line {
	width: 90%;
	margin: auto;
	border-top: 1px solid #353535;
}

a,
a:visited {
	color: #777777;
	font-weight: 300;
	text-decoration: none;
}

/*Navigation menu*/
@charset "UTF-8";
.navigation {
	width: 100%;
	margin: auto;
	background-color: #FFFFFF;
	position: absolute;
	z-index: 1000;
}

nav {
	display: inline-block;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li {
	float: left;
	position: relative;
	text-transform: uppercase;
}

nav ul li a,
nav ul li a:visited {
	display: block;
	padding: 0 30px;
	line-height: 40px;
	background: #ffffff;
	color: #353535;
	font-size:14px;  
}

nav ul li a:hover,
nav ul li a:visited:hover {
	background: #ffffff;
	color: #999999;  
}

/*DON'T KNOW WHAT THIS IS*/
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
	padding-left: 10px;
	font-family: fontawesome;
	content: "\f0d7";
}

nav ul li ul li {
	min-width: 190px;
}

nav ul li ul li a {
	padding: 10px;
	line-height: 20px;
}

/*Three column page display*/
.threecolumns {
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.nanoship {
	margin: 5px;
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width:850px;
}

.nanoship img {
	width: 100%;
}

.gallery {
	margin: 5px;
}

.gallery img {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*thank you message on form submit*/
#thankyou {
	margin-top: 20px;
}

.pink {
  color: #F4A2DA;
}

/*DROPDOWN BOX GALLERY*/
.myDiv{
	display:none;
  text-align:center;
}  
.myDiv img{
  margin: 0 auto;
}
.myDiv span{
	text-align: center;
  background: #F39AD8;
  padding: 6px 10px;
  display: block;
  width: 100px;
  margin: 8px auto;
  border-radius: 25px;
}
#dropdown{
	width: 300px;
	margin: auto;
}

.desc {
	padding: 15px;
	font-weight: 300;
	text-transform: uppercase;
	font-size:12px;
	color: #353535;
	line-height: 1.8;
	text-align: center;
	font-family: Lato;
}

.alwaystwocolumns {
	padding: 10px;
	max-width: 800px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin:auto;
}

/* Individual Post Pages */
.twocolumns {
	padding: 10px;
	max-width: 800px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin:auto;
}

/* Kliff Con */
.kliffconcolumns {
	padding: 10px;
	max-width: 1000px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin:auto;
}

.kliffgallery {
	margin: 5px;
}

.kliffgallery img {
	max-width: 650px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#kliff-content-wrap {
	padding-bottom: 10px;  
}

#kliffmainbody {
	margin-top: 5px;
	padding: 25px 0px 0px 0px;
}

/*Centering elements*/
.centered {
	text-align: center;
}

/*Social media icons resize*/
.social {
	width: 45px;
	margin: 10px;
}

/* Pagination links */

.pagination {
	text-align: center;
  padding-top: 40px;
  padding-bottom: 20px;
}

.pagination a {
	color: #353535;
	padding: 8px 16px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 12px;
}

/* Style the active/current link */
.pagination a.active {
	border-color: #ebebeb;
	border-style: solid;
	border-radius: 5px;
	border-width: 1.5px;
	color: #353535;
}

/* footer code here */
.footer {
	font-weight: 300;
	padding: 10px 5px 5px 5px;
	text-align: center;
	line-height: 22px;
	text-transform: uppercase;
	font-size:12px;
	color: #353535;
  background: #ffffff;
  overflow: hidden;
 	position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;            
}

#content-wrap {
  padding-bottom: 60px;  
}

.footer a {
	color: #353535;
	padding: 10px 16px;
	text-decoration: none;
}
/*GALLERY SLIDESHOW*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  padding: 25px 0px 0px 0px;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px 60px 0px 60px;
  color: #F4A2DA;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 	color: rgba(0,0,0,0.2);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/*Contact Form*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=password], select, textarea {
	width: 350px; /* Full width */
	max-width: 100%;
	padding: 5px; /* Some padding */ 
	font-weight: 300;
	text-transform: uppercase;
	text-align-last: center;
	background-color: white;
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 5px; /* Add a top margin */
	margin-bottom: 5px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Contact form submit button style */
input[type=submit] {
	font-family: Lato;
	font-weight: 300;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

#submitbutton {
 height: 42px; 
}

/* Contact from hover colour */
input[type=submit]:hover {
	background-color: #353535;
}

/* Add a background color and some padding around the contact form */
.contactcontainer {
	margin: auto;
	max-width: 500px;
	border-radius: 5px;
	background-color: #ffffff;
	text-align: center;
	padding: 5px 20px 0px 20px;
	font-family: Lato;
	font-weight: 300;
}

/* Shop Character portrait dropdown menu */
#charselect {
	max-width: 300px;
}

#charselecttable {
	width: 100%;
}

/*Buttons for contact and buy*/
#buybutton {
 width: 200px; 
}

.imagefilethumb {
	display: inline;
	margin: 10px;
}

.imagefilethumb img {
	width: 70px;
	height: auto;
}

.postimagethumb {
	display: inline;
	margin: 5px;
}

.postimagethumb img {
	width: 100%;
	height: auto;
}

.imagethumbnails {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#postImages {
	width: 500px;
}

.imagethumbnail img {
	padding: 8px;
	width: 60px;
	max-width: 60px;
	display: inline;
}

#fileSize {
	display: inline;
}

/* Responsive */

.nav-list {
	display: block !important;
}

/*MOBILE*/

@media only screen and (max-width: 640px) {
	body {
	}
	#maintitle {
	margin-top: 5px;
	margin-bottom: 5px;
}

.socialtop {
	position:relative;	
	left: 10px;
	top: 5px;
    z-index: 1001;
}
	.sociallogo {
	width:30px;
	margin-top: 5px;
	padding-right: 5px;
	}

.carttop {
	right: 10px;
	top: 5px;
  z-index: 1001;
}
	.cartlogo {
	width:30px;
	margin-top: 5px;
	padding-left: 5px;
	}

	.searchbar a, .topnav input[type=text] {
	float: none;
	display: block;
	text-align: left;
	max-width: 100%;
	margin: 0;
	padding: 14px;
	}
	.searchbar input[type=text] {
	}    
	nav {
		padding: 5px 0 5px;
	}
	nav ul {
		display: none;
	}
	nav ul {
		float: none;
	}
	nav ul li a {
		padding: 15px;
		line-height: 20px;
	}
	nav ul li ul li a {
		padding-left: 0px;
	}
	.nav-dropdown {
		position: static;
	}
	.topnav a:not(:first-child), .dropdown .dropbtn {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnavsub {
		width: 100%;
		display: block;
	}
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
	.threecolumns {
		grid-template-columns: auto;
	}
	.twocolumns {
		grid-template-columns: auto;
  }
	.nav-dropdown {
		text-align: center;
		margin-left: 15px;
	}
	.desc {
		padding: 15px 0px 0px 0px;
	}
}