@charset "UTF-8";

@import "https://fonts.googleapis.com/css?family=Permanent+Marker";

@import "https://fonts.googleapis.com/css?family=Concert+One|Fredoka+One|Comfortaa";

@font-face {
    font-family:'CubanoRegular';
    src:url(fonts/cubano-regular-webfont.eot);
    src:url(fonts/cubano-regular-webfont.eot?#iefix) format("embedded-opentype"),url(fonts/cubano-regular-webfont.woff) format("woff"),url(fonts/cubano-regular-webfont.ttf) format("truetype"),url(fonts/cubano-regular-webfont.svg#CubanoRegular) format("svg");
    font-weight:400;
    font-style:normal
}


/************************************************************************/
/************************************************************************/
/**************************     EDITABLE CONTENT    *********************/
/************************************************************************/
/************************************************************************/
#chapter1 {
    background-color:#00aacd
}

#chapter2 {
    background-color:#29a890
}

#chapter3 {
    background-color:#eeca57
}

#chapter4 {
    background-color:#f4995c
}

#chapter5 {
    background-color:#f45269
}

#chapter6 {
    background-color:#00aa55
}


/************************************/
/******            *           ******/
/************************************/
* {
    box-sizing:border-box
}

.accent-font {
    font-family:"CubanoRegular","Concert One","Trebuchet MS",Helvetica,sans-serif;
    letter-spacing:2px;
    text-transform:uppercase
}

.primary-font {
    font-family:"Permanent Marker","Trebuchet MS",Helvetica,sans-serif
}

.toggler {
	z-index: 50;
}

/************************************/
/******         HEADER         ******/
/************************************/
#heading {
    text-align:center;
    z-index:5;
    width:100%;
    color:#fff;
    line-height:40px;
    vertical-align:middle;
    padding:5px 0;
    margin-bottom:20px;
    background-color:#034043;
    font-size:30px
}

/************************************/
/******         MURAL          ******/
/************************************/
#logo {
    text-align:center;
    position:absolute;
    z-index:50;
    width:35%;
    min-width:200px;
    margin:0 auto;
    left:0;
    right:0;
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
    padding-top:15px;
    max-width:350px
}

#logo:hover {
    padding-top:10px
}

#mural {
    background:url(../img/HomepageMural/bg.png) no-repeat bottom center;
    background-color:#F4D9BE;
    position:relative;
    -webkit-background-size:100% auto!important;
    -moz-background-size:100% auto!important;
    -o-background-size:100% auto!important;
    background-size:100% auto!important;
    height:768px
}

#mural .navmenu,#mural.static .navmenu {
    position:absolute;
    text-align:right;
    width:100%;
    height:auto;
    padding:0 25px 0 3px;
    margin-top:15px;
    font-size:18px;
    z-index:49
}

#mural.static .navmenu a {
    color:#fff;
    text-shadow:1px 1px 1px grey
}

#mural .navmenu a {
    color:grey
}

#mural .navmenu a:hover {
    text-decoration:none;
    color:#f45269
}

/************************************/
/******          BODY          ******/
/************************************/
body {
    background:#e8e8e0;
    font-family:Helvetica
}

html,body {
    overflow-x:hidden
}

/************************************/
/******         FOOTER         ******/
/************************************/
#footer {
    background:#e0e0d6;
    padding-top:15px;
    padding-bottom:30px;
    text-align:center;
    z-index:1!important
}

#footer.main {
    background:#e8e8e0
}

#footer h4 {
    text-align:justify
}

#footer .itrc a {
    text-align:left;
    color:#999
}

#footer .itrc a:hover {
    color:#00aacd;
    text-decoration:none
}

#footer .itrc img {
    text-align:right;
    width:35%;
    max-width:150px;
    margin-left:-20px
}

#backtotop {
    height:50px;
    font-size:30px;
    color:#898980;
    text-align:center;
    cursor:pointer;
    z-index:60;
    margin-top: -15px;
    margin-bottom: 15px;
}

/************************************************************************/
/**************************      MEDIA QUERIES     **********************/
/************************************************************************/
/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px) {
	.navmenu {
	    font-size:11px
	}
	
	#slogan h3 {
	    font-size:16px;
	    margin:10px
	}
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 971px) {
	#mural .navmenu,#mural.static .navmenu {
	    text-align:center!important;
	    padding:0!important;
	}
	
	#mural.static #logo.min {
	    padding-top:30px
	}
	
	#mural.static .navmenu a {
	    color:grey!important;
	    text-shadow:1px 1px 1px #fff
	}
	
	#mural.static .navmenu {
	    z-index:51;
	    color:grey!important
	}
	
	#mural.static .navmenu a:hover {
	    text-decoration:none;
	    color:#f45269!important
	}
	
	#mural #logo {
	    margin-top:50px
	}
}