@import url('https://fonts.googleapis.com/css?family=Lobster+Two|Yanone+Kaffeesatz&display=swap');
@import url('https://fonts.googleapis.com/css?family=Chewy|Courgette|Kaushan+Script&display=swap');
body {
	font-size: 16px;
	color: #3D4145;
	background-color:#fff;
	transition: all 0.5s ease 0s;
}

h2 {
	border-bottom-right-radius:20px;
	border-bottom-left-radius:20px;
	display:table;
	font-family: 'Chewy', cursive;
	margin-top:0;
	padding:4px 40px 10px;
	letter-spacing: 1px;
	}

@media (max-width:640px) {
	h2 {text-align:center}
}
.topStruc {
	/*background:url(../img/top-bg.png) #15c1e5;*/
	background-color:#ec9600;
	border-bottom:4px solid #12a7c2;
	padding-top:7px;
	-webkit-box-shadow: 0 6px 6px -6px black;
	   -moz-box-shadow: 0 6px 6px -6px black;
	        box-shadow: 0 6px 6px -6px black;
}
.menuStruc {
	color:#FFFFFF;
	min-height:1px;
	margin-bottom:-4px;
}
.logoStruc {
	overflow:hidden
}

.introRow {
	background-image:url(../img/intro-bg.jpg);
	background-color:#d9f1fd
	}
.introWrapMain {
	background-color:#7488ba;
	background:url(../img/fables-and-fairytales.jpg) center center no-repeat;
	background-size: cover;
	overflow:hidden;
	padding:0;
	}

.rhtImg, .introLft {
	padding:0
	}
.introWrap {
	background: rgba(255, 255, 255, .70);
	border-bottom-left-radius:20px;
	border-top-right-radius:20px;
	margin:20px 0;
	width:92%;
	float:right;
	font-size:25px;
	border:6px double #fff;
	font-family: 'Courgette', cursive;
	transition: all 0.5s ease 0s;
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
	}
@media (max-width:768px) {
	.introWrap {
		width:auto
		}
	.introLft {
		padding:20px
		}
}
.introWrap:hover {
	background: rgba(255, 250, 119, .70);
	border:6px double #fff600;
	}
.introWrap h1 {
	background-image:url(../img/intro-head.png);
	color:#FFFFFF;
	background-repeat: repeat-x;
	margin:0; 
	padding: 4px 0 13px;
	text-align:center;
	transition: all 0.5s ease 0s;
	border-top-right-radius:15px;
	text-shadow: 1px 1px #64002a;
	font-family: 'Lobster Two', cursive;	
	}
.introWrap p {
	padding:10px;
	text-shadow: 1px 1px #fff;
	}
.rhtImg img {
	position:absolute;
	margin-left:-35px;
	z-index:100;
	transition: all 0.5s ease 0s;
	}
.rhtImg img:hover {
	margin-top:20px;
	margin-left:-45px;
	}
.floating{
    float: left;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}
@media (max-width:728px) {
	.introWrap {
	font-size:16px;
	}
.introWrap h1 {
	font-size:18px;
	padding-bottom:18px
	}
}

#famousFairyWrap {
	background-image:url(../img/icon-body-bg.jpg);
	background-color:#ffedb9;
	border-top:6px solid #c8003d;
	border-bottom:6px solid #e54600;
	padding:0 0 40px;
	}
#famousFairyWrap h2 {
	background: -webkit-linear-gradient(#c8003d, #6f0022); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#c8003d, #6f0022); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#c8003d, #6f0022); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#c8003d, #6f0022); /* Standard syntax */
	color:#fffeb5;	
	text-shadow: 1px 1px #64001f;	
	-webkit-box-shadow: 0 6px 6px -6px #5d4b13;
	   -moz-box-shadow: 0 6px 6px -6px #5d4b13;
	        box-shadow: 0 6px 6px -6px #5d4b13;
	} 
	.iconBody {
		font-family: 'Kaushan Script', cursive;
		color:#a40036;
		font-size:25px;
		min-height:356px;
		background: rgba(255, 244, 212, .70);
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		padding:15px 0;
		margin:20px 0;
		text-align:center;
		box-shadow: 1px 1px 0px rgba(103, 102, 102, 0.2);
		transition: margin 0.5s ease-out,box-shadow 0.5s ease-out;
		transition-property: margin, box-shadow;
		transition-duration: 0.5s, 0.5s;
		transition-timing-function: ease-out, ease-out;
		transition-delay: 0s, 0s;
		}
	.iconBody:hover {
		box-shadow: 6px 6px 0px rgba(103, 102, 102, 0.2);
		/*margin-top:-14px;*/
		}
	.iconNav {
		background-image:url(../img/iconnav-bg.png);
		background-repeat:no-repeat;
		width:245px;
		height:253px;
		margin:0 auto;
		text-align:center ;
		transition: all 0.5s ease 0s;
		}
	.iconNav img {
		transition: all 0.5s ease 0s;
		border-radius: 30px;
		border:5px solid #629b65;
		box-shadow: 1px 1px 0px rgba(103, 102, 102, 0.2);
		width:155px;
		text-align:center;
		margin-top:49px
		}
	
	.iconBody:hover .iconNav {
		-webkit-transform: rotate(30deg);
	  -moz-transform: rotate(30deg);
	  -ms-transform: rotate(30deg);
	  -o-transform: rotate(30deg);
	  transform: rotate(30deg);
	  }
	.iconBody:hover .iconNav img {
			border:1px solid #629b65;
		box-shadow: 5px 5px 0px rgba(27, 67, 29, 0.2);
		}
#newStoryWrap {
	overflow:hidden;
	margin:0 0;
	background-image:url(../img/new-fairy-bg.jpg);
	border-bottom:6px solid #7a8e36;
	padding:0 0 40px;
	}
	#newStoryWrap h2 {
		background: -webkit-linear-gradient(#e54600, #6f0022); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#e54600, #6f0022); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#e54600, #6f0022); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#e54600, #6f0022); /* Standard syntax */
		color:#fffeb5;
		margin-bottom:20px;
		text-shadow: 1px 1px #64001f;	
		-webkit-box-shadow: 0 6px 6px -6px #5d4b13;
		   -moz-box-shadow: 0 6px 6px -6px #5d4b13;
				box-shadow: 0 6px 6px -6px #5d4b13;
		} 
	#newStoryWrap ul li {
		list-style:none;
		display:block;
		margin:10px 0
		}
	#newStoryWrap ul {
		padding-left:0;
		}
	#newStoryWrap ul li a{
		transition: all 0.5s ease 0s;
		display:block;
		font-family: 'Yanone Kaffeesatz', sans-serif;
		font-size:25px;
		text-align:center;
		text-transform:uppercase;
		padding:8px 6px;
		line-height:110%;
		border-radius: 5px;
		color:#fff;
		text-shadow: 1px 1px #566f76;
		transition: all 0.5s ease 0s;
		background: rgba(125, 182, 59, .80);
		border : solid 4px rgba(72,116,21,0.5);
		box-shadow: 0 5px 6px -6px black;
		}
	#newStoryWrap ul li a:hover{
		color:#e6ff41;
		text-shadow: 1px 1px #566f76;
		transition: all 0.5s ease 0s;
		background: rgba(125, 182, 59, .90);
		border : double 4px rgba(255,254,133,0.5);
		}
	#newStoryWrap img {
		border:10px solid #fff;
		-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .55);
		-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .55);
		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .55);
		}
	.newStoryCol {
		padding:4px;
		}
	.newStoryCol img{
		border: none !important;
    	box-shadow: unset !important;
		}
#moreFairyWrap {
	overflow:hidden;
	margin:0 0;
	background-image:url(../img/128-57.jpg)
	}
#moreFairyWrap h2 {
	background: -webkit-linear-gradient(#7a8e36, #4a5819); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#7a8e36, #4a5819); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#7a8e36, #4a5819); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#7a8e36, #4a5819); /* Standard syntax */
	margin-bottom:30px;
	color:#fffeb5;
	text-shadow: 1px 1px #50601a;
	-webkit-box-shadow: 0 6px 6px -6px #32000a;
	   -moz-box-shadow: 0 6px 6px -6px #32000a;
	        box-shadow: 0 6px 6px -6px #32000a;
	}
#moreFairyWrap .bannWrap a, #moreFairyWrap .bannWrap a:link{
	color:#FFFFCC;
	}
.moreWrap ul li {
	list-style:none;
	display:block;
	line-height: 190%;
	margin:10px 0
	}
.moreWrap ul {
	padding-left:0;
	}
.moreWrap ul li a{
	transition: all 0.5s ease 0s;
	display:block;
	background: -webkit-linear-gradient(#faa71c, #e36d11); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#faa71c, #e36d11); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#faa71c, #e36d11); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#faa71c, #e36d11); /* Standard syntax */
	color:#FFFFFF;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:32px;
	text-align:center;
	padding:10px 6px;
	min-height:108px;
	text-shadow: 1px 1px #9f4600;
	border : double 10px rgba(255,255,255,0.5);
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
	-webkit-box-shadow: 0 6px 6px -6px black;
	   -moz-box-shadow: 0 6px 6px -6px black;
	        box-shadow: 0 6px 6px -6px black;
	}
.moreWrap ul li a:hover{
	transition: all 0.5s ease 0s;
	background: -webkit-linear-gradient(#e36d11, #faa71c); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#e36d11, #faa71c); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#e36d11, #faa71c); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#e36d11, #faa71c); /* Standard syntax */
	border : outset 10px rgba(255,222,0,0.5);
	}
.toggle {padding-left:0}
.toggle li { list-style:none; list-style-type:none}
.moreImg {
	transition: all 0.5s ease 0s;
	margin-top:10px;
	z-index:200
	}
.moreImg:hover {
	margin-top:-5px;
	opacity: 0.3;
    filter: alpha(opacity=80); /* For IE8 and earlier */
	}
.fairytale-wrap {
	background: rgba(255, 244, 192, .90);
	border : solid 6px rgba(228,80,0,0.6);
	padding:6px;
	margin-bottom:10px;
	-webkit-box-shadow: 0 6px 6px -6px black;
	   -moz-box-shadow: 0 6px 6px -6px black;
	        box-shadow: 0 6px 6px -6px black;
	}
.fairytale-wrap h3 {
	background:#e45000;
	color:#fff4c0;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	margin-top:0;
	text-align:center;
	padding: 2px 0;
	}
.fairytale-wrap p {
	font-size:15px;
	}
.fairytale-wrap span {display:block; text-align:right}

.fairytale-wrap span a, .fairytale-wrap span a:link, .fairytale-wrap span a:active {
	display:table;
	padding:3px 6px 3px 10px;
	background:#8F4005;
	color:#fff;
	float: right;
    margin-right: -11px;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	-webkit-box-shadow: 0 3px 9px -6px black;
	   -moz-box-shadow: 0 3px 9px -6px black;
	        box-shadow: 0 3px 9px -6px black;
	transition: all 0.5s ease 0s;
}
.fairytale-wrap span a:hover {
	background:#4a5819;
	color:#e4f4c0;
	padding:3px 8px 3px 14px;
	transition: all 0.5s ease 0s;
}
@media (max-width:767px) {
	.fairytale-wrap p {
		margin-top: 6px;
		margin-bottom: 6px;
		}
}
.bannWrap {
	width:90%;
	overflow:hidden;
	/*float:left;
	padding:10px;*/
	text-align:center;
	min-height:90px;
	margin:6px 15px;
}
.otherStories {
	overflow:hidden;
	margin-top:10px 0 0;
	background: rgba(0, 0, 0, .50);
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	padding:10px 0;
	}
	.otherStories ul {
		padding-left:0;
		text-align:center
		}
	.otherStories ul li {
		display:inline-block;
		list-style:none;
		list-style-type:none;
		margin:10px 4px;
		text-align:center
		}
		.otherStories ul li a {
			transition: all 0.5s ease 0s;
			background: rgba(239, 135, 0, .90);
			padding:4px 7px;
			border:3px solid #bb6100;
			text-align:center;
			font-weight:bold;
			color:#633800;
			text-shadow: 1px 1px #ffad43;
			text-transform:uppercase;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			}
			.otherStories ul li a:hover {
				background: rgba(143, 57, 198, .80);
				border:4px solid #622887;
				text-shadow: 1px 1px #622887;
				color:#fff;
				}
			@media (max-width:640px) {
				.otherStories ul li a {
					display:block;
					}
				}
.foot-bann {
	background: rgba(255, 255, 255, .90);
	overflow:hidden
}
#footer {
	padding:6px 0;
	background-color:#414F17;
	color:#dcedaf;
}
#footer a {
	color:#dcedaf;
	}
.searchWrap {
	margin-top:6px;
	text-align:center
}
.searchWrap input[type='submit'] {
	transition: all 0.8s ease 0s;
	background-color:#9bba1f;
	padding:6px 10px;
	border:1px solid #85a117;
	color:#FFFFFF;
	text-transform:uppercase
}
.searchWrap input[type='submit']:hover {
	transition: all 0.8s ease 0s;
	background-color:#15c1e5;
	border:1px solid #0c90ac;
}
.searchWrap input[type='text'] {
	height:38px;
	background-color:#fff5c5 !important;
	border:2px solid #637632 !important;
	width:75%
}

/**** NAV MENU **/

#cssmenu {
  font-family: 'Courgette', cursive;
  font-size: 14px;
  line-height: 15px;
  text-align: left;
  z-index:1000
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin:5px 0;  
  /*background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;*/
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  margin:0 2px;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #669a00;
  border: 1px solid #537d00;
  border-bottom: 3px solid #537d00;
  border-top: 0 none;
  z-index:1000
}
#cssmenu > ul {
	z-index:1000
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('/images/caret2.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #ec5e00 url('/images/caret2.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 16px 11px;
  text-decoration: none;
  color: #fff;
  text-shadow: 0px 1px 0px #4b7100;
  font-size:2em;
  margin:0 2px;
  line-height: 100%;
  transition: all 0.5s ease 0s;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #ec5e00;
  color: #fff;
  text-shadow: 0px 1px 0px #000;
  transition: all 0.5s ease 0s;
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
	background-color:#0c8ba6	
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('/images/menu.png') no-repeat;
    background-position: 95% -150%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #ec5e00;
    background-position: 95% 250%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    /*background: #ec5e00;*/
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}
/**** END OF NAV MENU ***/
	
/***** MISC ***/
.paddTop0 {padding-top:0}
.paddBott0 {padding-bottom:0}
.colorBgOrng {
	background-color:#ffa200
}
.colorBgGreen {
	background-color:#9bba1f
}
.colorBgRed {
	background-color:#c70000
}
.colorBgBlue {
	background-color:#12a7c2
}
.colorBgPurple {
	background-color:#7b0099
}
/***** **/
.contMain {
	overflow:hidden;
	margin:15px 0px;
}

.bannerFoot {
	padding:6px;
	text-align:center;
	margin:15px 0px;
}
.bannerFoot2 {
	min-height:1px; max-width:735px; margin:10px auto
}


.toggle-btn { 
	text-decoration:none; 
	display:block;
	font-size: 17px;
	outline: none;
	background:none !important;
	border:none !important;
	box-shadow:none !important;
}

.toggle-btn span{
	float: right;
}

.toggle-content{ 
	display:none;
}

.toggle-content.active{
	display: block;
}
/*** GOOGLE TRANSLATOR **/
.google-translator {
	display:table;
	position: fixed;
	bottom: 0;
	top:auto;
	left:50%;
	right:auto;
	transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	background: rgba(255, 255, 255, .95);
    z-index: 2;
    padding: 15px;
	-webkit-box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .15);
	-moz-box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .15);
	box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .15);
}
	
#close {
    float:right;
    display:inline-block;
    padding:0 5px;
	z-index:3;
	color:#9e9e9e;
	margin:-14px;
	cursor:pointer
}

#close:hover {
    color:#fff;
    }
/*** end of GOOGLE TRANSLATOR **/