*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body { font-family: 'Nunito', sans-serif; color: #384047; }

.wrapper {max-width: 90%; margin: 10px auto; padding: 10px 20px; background: #fff; }

h1 {font-family: 'Merienda One', cursive; margin: 30px 0;  text-align: center;}

h2, h3 {font-family: 'Nunito', sans-serif; text-align: center;}

/*.main-nav ul {list-style: none; margin:0; padding:10px;}
.main-nav ul li {font-size: 1.2em;}*/
.heading    { background-color: #FFF; z-index:1; }
/*.main-nav {margin-right: 20px; }
.main-nav a { background-color: #6230AC; }*/
.footer     { background-color: #b7c0c7; }
.logo img   {float: left; max-width: 220px; margin-left: 20px; border: none; padding: 0; box-shadow: none;}
.title    {background: #dfe2e4; text-align: center; display: block;}
.heading, .col {padding: 10px;}
/*.main-nav a {display: block; color: white; text-decoration: none; text-align: center; padding: 8px 15px; border-radius: 5px; position: relative; overflow: hidden;}
*/a {color: #553e72; text-decoration: none;}

nav a {position: relative;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}
ul {list-style: none;}

nav a:hover,
nav a:focus {outline: none;}

img {width: 100%; margin: 0; }
header {margin: 0 auto; text-align: center; color: #89867e; }
.globalNav img {max-width: 250px; float: left; margin-left: 20px;}

.slide-color {background: #77658E;padding:20px;}
.slide-color li {width: 47%; float: left; margin: 10px; }
.slide-color a {display: block; color: white; text-decoration: none; text-align: center; margin: 0 15px; border-radius: 5px;}

.audio-natter {font-size: 1.4em;
	text-align: left;
	margin-bottom: 1em;
	padding:0; }
.globalNav {text-decoration: none; font-size: 1.2em; color: #553e72; }

.globalNav img {max-width: 20%; padding-right: 10px; margin-top:-20px; }

.slide-effect  {position: relative; z-index: 1; }

.slide-effect a {	overflow: hidden; margin: 0 15px;}

.slide-effect a span {display: block; padding: 30px; background: #44325B; 	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;}

.slide-effect a::before {position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 5px;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #44325B;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);}

.slide-effect a:hover span,
.slide-effect a:focus span {-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);}

.slide-effect a:hover::before,
.slide-effect a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* MEDIA QUERIES*/

@media screen and (max-width: 768px) {
.globalNav img {display: block; max-width: 100%; }
.slide-color {padding: 5px;}
.audio-natter {font-size: 1.1em; padding:10px; }
.globalNav { display: block;}
nav a {	max-width: 100%;
	font-size: 1.2em;
	margin-bottom: 5px;
	vertical-align: middle;}
.slide-effect a span {padding: 30px;
	width: 100%;
	margin-bottom: 5px;}
.container {width: initial; height: initial; float: initial;}
.slide-color li {width: 100%;}}

/* MEDIA QUERIES*/

@media screen and (max-width: 768px) {

.audio-natter {font-size: 1.1em; padding:10px; }

.container { width: initial; height: initial; 	float: initial;}}

@media screen and (max-width: 480px) {
	h1 {font-size: 2em;}.wrapper {max-width: 100%;}}