/* HOMEPAGE ITEMS */
/* MURAL ITEMS */
.bg {
    -webkit-background-size:100% auto!important;
    -moz-background-size:100% auto!important;
    -o-background-size:100% auto!important;
    background-size:100% auto!important;
    background-attachment:scroll
}

#mural {
    -khtml-user-select:none;
    -o-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none
}

#mural div {
    position:absolute;
    width:100%;
    height:inherit
}

div.clouds {
    background:url(../img/HomepageMural/muralbg-clouds.png) repeat center top;
    z-index:6
}

div.background {
    position:relative;
    z-index:7;
    bottom:0
}

.background img {
    max-height:800px;
    position:absolute
}

#bgLand1,#bgLand2 {
    bottom:0;
    width:100%;
    height:auto;
    margin:0 auto
}

#bgSun {
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
    width:20%
}

#bgWaterfall {
    width:30%;
    max-width:600px;
    left:5px;
    bottom:20%
}

#bgForest {
    width:40%;
    max-width:600px;
    right:0;
    bottom:20%
}

.char img {
    position:absolute
}

#loader {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:9999;
    background:url(../img/loading2.gif) 50% 50% no-repeat #e8e8e0;
    background-size:66px 66px
}

/* NAVMENU ON HOMEPAGE */

#slogan {
    background:#d0d0c9;
    color:#898980;
    letter-spacing:2px
}

.fixed {
    position:fixed;
    top:0;
    z-index:100
}

#slogan h3 {
    margin:20px auto
}

#intro {
    background:#e8e8e0;
    padding-top:15px;
    color:#555
}

#intro .lead {
    margin-bottom:8px
}

.chapter-num {
    font-family:"Permanent Marker","Trebuchet MS",Helvetica,sans-serif;
    font-size:40px;
    color:rgba(0,0,0,0.3);
    letter-spacing:3px
}

.container {
    position:relative
}

section {
    padding-left:15px;
    padding-right:15px;
    border-bottom:8px solid #e8e8e0;
    padding-bottom:15px
}

.chapter-name {
    color:#fff;
    font-size:12px;
    margin-top:-10px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.8)
}

.chapter-sum {
    color:rgba(255,255,255,0.7);
    margin-left:-15px;
    margin-bottom:20px
}

.chapter-icon {
    margin-top:25px;
    text-align:right
}

.chapter-icon div {
    float:right
}

.chapter-btn {
    position:absolute;
    text-align:right;
    bottom:0
}

section .btn {
    background:rgba(0,0,0,0.3);
    color:#fff;
    min-width:200px;
    border:none;
    margin-bottom:15px;
    position:absolute;
    bottom:0;
    right:0
}

/* TEMPLATE STYLING */
#slogan.fixed {
    width:100%
}

.animSnail {
    background-image:url(../img/HomepageMural/sprites/snail-spritesheet2.png)
}

.animBlueSquid {
    background-image:url(../img/HomepageMural/sprites/ghost-spritesheet23.png)
}

.animPotato {
    background-image:url(../img/HomepageMural/sprites/potatosprites.png)
}

.animChicky {
    background-image:url(../img/HomepageMural/sprites/canarysprite.png)
}

.animOctopus {
    background-image:url(../img/HomepageMural/sprites/octosheet.png)
}

.animCaptain {
    background-image:url(../img/HomepageMural/sprites/captain-spritesheet.png)
}

#mural .animSnail {
    background-size:230px 2450px;
    height:175px;
    width:230px;
    right:30px;
    bottom:25%;
    z-index:12
}

#mural .animBlueSquid {
    background-size:260px 4370px;
    height:190px;
    width:260px;
    left:35%;
    bottom:35%;
    z-index:15
}

#mural .animBlueSquid img {
    width:80%;
    margin-left:-100%
}

#mural .animPotato {
    background-size:160px 7725px;
    height:309px;
    width:160px;
    left:7%;
    bottom:4%;
    height:309px;
    width:160px;
    z-index:18
}

#mural .animChicky {
    background-size:220px 2880px;
    height:180px;
    width:220px;
    z-index:18;
    left:25%;
    bottom:5%
}

#mural .animChicky img {
    width:80%;
    margin-left:100%
}

#mural .animOctopus {
    background-size:240px 6400px;
    height:200px;
    width:240px;
    z-index:18;
    right:25%;
    bottom:2%
}

#mural .animOctopus .capt {
    width:50%;
    margin-left:-30%;
    margin-top:-100%
}

#mural .animOctopus .arrow {
    width:120%;
    margin-left:110%
}

.chapter-icon .animCaptain {
    background-size:90px 2240px;
    height:112px;
    width:90px;
    margin-right:50px
}

.chapter-icon .animSnail {
    background-size:120px 1568px;
    height:112px;
    width:120px;
    margin-right:50px
}

.chapter-icon .animBlueSquid {
    background-size:130px 2576px;
    height:112px;
    width:130px;
    margin-right:50px
}

.chapter-icon .animPotato {
    background-size:90px 4250px;
    height:170px;
    width:90px;
    margin-right:50px
}

.chapter-icon .animOctopus {
    background-size:110px 3840px;
    height:120px;
    width:110px;
    margin-right:50px
}

.chapter-icon .animChicky {
    background-size:110px 1440px;
    height:90px;
    width:110px;
    margin-right:50px
	
}

/************************************************************************/
/**************************      MEDIA QUERIES     **********************/
/************************************************************************/
/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px) {
	.chapter-icon {
	    text-align:left;
	    margin-bottom:15px
	}
	
	.chapter-icon div {
	    float:left
	}
	
	.chapter-num h1 {
	    font-size:30px
	}
	
	.chapter-name h3 {
	    font-size:20px
	}
	
	section .btn {
	    min-width:140px
	}
}