@charset "utf-8";
/* CSS Document */
html, body { background-color:#fff; }
.clear { display:block; clear:both; height:0; }
.left { float:left; }
.right { float:right; }
.hidden { display:none; }
.inner { min-width:320px; max-width:900px; margin:0 auto; }

h1, h2, h3 { padding:15px 0 12px; font-family:"Fredoka One", cursive; font-weight:400; line-height:1.1em; color:#3390dd; }
h1 { font-size:30px; }
h2 { font-size:26px; }

p { padding-bottom:12px; line-height:1.2em; }

#container {
	width:100%;
	min-width:320px;
	font:14px "Open Sans", sans-serif;
	font-weight:400;
	color:#666;
}
#container a { cursor:pointer; }
#container img { vertical-align:bottom; }

#header { background:url(../img/bg-header.png) top repeat-x; }
#header .inner { padding-bottom:16px; }
#header .left { padding-top:14px; }
#header .right { padding-top:23px; }
#header a.logo { display:inline-block; margin-bottom:12px; padding-left:72px; background:url(../img/bg-logo.png) left center no-repeat; font:30px "Fredoka One", cursive; text-transform:uppercase; text-decoration:none; color:#47a7e1; }

#banner { position:relative; height:249px; margin:21px 0; padding:60px 480px 0 0; background: center top no-repeat; box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2); text-align:center; }

#banner{background-image:url(../img/bg-banner.png)}
#banner.two{background-image:url(../img/bg-banner2.png) !important}
#banner.three{background-image:url(../img/bg-banner3.png)}
#banner.four{background-image:url(../img/bg-banner4.png)}
#banner.five{background-image:url(../img/bg-banner5.png)}


#banner img.main { position:absolute; right:0; bottom:0; }
#banner img.pill { float:right; }
#banner .padder { width:400px; margin:0 auto; padding:6px 0 16px; }
#banner .padder p { padding:20px 0 0; }
#banner p.title { font:24px "Fredoka One", cursive; text-transform:uppercase; text-shadow:0 5px 5px rgba(0, 0, 0, 0.5); text-align:center; color:#fff; }
#banner p { font-size:13px; text-shadow:0 5px 5px rgba(0, 0, 0, 0.5); text-align:left; color:#fff; }
#banner a.buy { display:inline-block; height:58px; padding:10px 22px 0; border-radius:4px; background:url(../img/bt-buy.png) top repeat-x; box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.3); font:40px "Fredoka One", cursive; text-transform:uppercase; text-decoration:none; color:#fefefe; }

#menuMain { }
#menuMain a.menu { display:none; width:48px; height:48px; margin:0 auto; background:url(../img/bt-menu.png) no-repeat; }
#menuMain ul li { display:inline-block; padding:4px 8px 0; border-left:1px solid #b7e2fc; }
#menuMain ul li:first-child { border:none; }
#menuMain ul li a { font:16px "Fredoka One", cursive; text-decoration:none; color:#7ccafa; }
#menuMain ul li a:hover, #menuMain ul li a.active { color:#47a7e1; }

#wrapper { border:1px #c4eaff; border-style:solid none; background:url(../img/bg-wrapper.png) repeat; }
#content { background:url(../img/bg-content.png) top repeat-x; }
#content .inner { padding-bottom:30px; }
#content .border { background:url(../img/bg-border.png) bottom repeat-x; }
#content .ribbon { position:relative; left:0; top:-5px; float:left; width:41px; height:48px; margin-right:28px; background:url(../img/bg-ribbon.png) no-repeat; }

#footer { min-height:70px; background:url(../img/bg-footer.png) bottom repeat-x; }
#footer .inner { padding:16px 0 4px; }
#footer a.logo { display:inline-block; margin-bottom:12px; padding-left:72px; background:url(../img/bg-logo.png) left center no-repeat; font:30px "Fredoka One", cursive; text-transform:uppercase; text-decoration:none; color:#47a7e1; opacity:.5; }
#footer p { font-size:12px; color:#3390dd; }

@media screen and (max-width: 900px) {
	
	#header .left { float:none; text-align:center; }
	#header .right { float:none; padding:0; text-align:center; }
	
	#menuMain a.menu { display:block; }
	#menuMain ul { display:none; margin-bottom:20px; }
	#menuMain ul li { display:block; padding:0; border-bottom:1px solid #47a7e1; }
	#menuMain ul li a { display:block; padding:6px 0; background-color:#7ccafa; color:#fff; }
	#menuMain ul li a:hover, #menuMain ul li a.active { background-color:#47a7e1; color:#fff; }
	
	#banner { height:269px; padding:40px 0 0; }
	#banner img.main { display:none; }
	
	#content .inner { min-width:auto; padding:0 20px; }
	
	#footer { text-align:center; }
  
}

@media screen and (max-width: 420px) {
	
	#banner .padder { width:auto; padding:6px 10px 16px; }
	
}