html {	scroll-behavior: smooth; }

body {	font-family: 'Red Hat Text', sans-serif;
		background: url(../images/canvas.jpg) fixed;
		background-color: #e6f9ff;
		background-size: contain; 
		text-align: center;	}

h1 {	color: #5b98ff;
		margin: 0 auto;
		font-size: 250%;
		padding: 5px 0 5px 0;	}
	
h2 {	font-size: 150%;	}

li {	display: inline-block;	
		padding-right: 30px;	
		font-size: 125%;	}

p {		padding: 0 0 20px 0;
		line-height: 1.5em;
		font-size: 120%;	}

a {		text-decoration: none;
		color: #5b98ff;	}

a:hover {	text-decoration: none;
			color: #00ff00;	}
	
#content {	width: 90%;
			overflow: hidden;
			margin: 0 auto 0 auto;
			padding-bottom: 10px;
			padding: 20px;
			background: #fff;
			border: 5px outset #990099;
			border-bottom: 5px solid #00ff00;
			border-right: 5px solid #00ff00;	}
	
#logo {
	width: 30%; }
	
#kidzinfo {
	width: 100%; 
	margin: 0 auto;	}
	
#kidzpic {
	width: 16.6666%;	}
	
#kidzpic img {
	width: ; }
	
#kidzdesc {
	width: 16.6666%;
	font-size: 90%;	}
	
#gallerytable {
	width: 100%; 
	margin: 0 auto;	}
	
#gallerytable td {
	width: 24.99999%; }
	
#gallerytable img {
	width: 60%; }
	
/* Blink Code */
.blinking{
	font-size: 200%;
	color: #00ff00;
	animation:blinkingText 3s infinite;
}

@keyframes blinkingText{
	50%{	color: #990099;	}
}

/* --Slideshow Styles-- */
.slideshow-container
{	max-width: 1250px;
	text-align: center;
    position: relative;
    margin: auto;	}
	
.shop-slideshow-container
{	max-width: 700px;
	text-align: center;
    position: relative;
    margin: auto;
	float: right;	}
	
.fade
{	-webkit-animation-name: fade;
	-webkit-animation-duration: 0.5s;
	animation-name: fade;
	animation-duration: 0.5s;	}
	
@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

.mySlides
{	display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 10px;	}
	
.mySlides img
{	width: 50%;	}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #222428;
    font-weight: bold;
    font-size: 30px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0
}

.next {
    right: -50px;
    border-radius: 3px 3px 3px 3px
}

.prev {
    left: -50px;
    border-radius: 3px 3px 3px 3px
}

.prev:hover,
.next:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8)
}

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding-top: 12px;
	padding-bottom: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222428
}

.numbertext {
    color: #000000;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease
}

.active,
.dot:hover {
    background-color: #717171;
}

#shop	{
	width: 80%;
	float: right; }
	
#shop-float {
	width: 15%;
	float: left;
	text-align: center;}