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

}

#submenu li a
{
    color: #640E0E;
}

#wrapper
{
	background: url("../../images/events/apr/bg_eb2.png") no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,#9AD7F6;
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top, no-repeat center 100%,-webk1it-gradient(radial, center center, 0, center center, 100%, from(#ffffff), to(#9ad7f6));
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,-moz-radial-gradient(center, ellipse cover, #ffffff 0%, #9ad7f6 100%);
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,-webk1it-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#9ad7f6));
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,-webk1it-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,-o-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,-ms-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background: url('../../images/events/apr/bg_eb2.png') no-repeat center bottom, url("../../images/events/apr/bg_eb1.png") no-repeat center top,radial-gradient(ellipse at center, #ffffff 0%,#9ad7f6 100%);
	/*background-size*/
	-webkit-background-size:100% auto,100% auto,cover;
	        background-size:100% auto,100% auto,cover;
	position:relative;
	/*overflow: hidden;
    min-height: 667px;*/ /* min height for this page only so there's no overlapping with the trees */
}

div#title h1
{
	padding-top: 1.2em;
	font-family: 'boowas_handwritingregular';
	color: #640E0E; 
	text-align: center;
	font-size: 2.5em;
}

/* buttons */
.ribbon:before
{
	content:'';
	background:url(../../images/events/apr/ribbon.png) no-repeat center center;
	background-size: 100% auto;
	width: 100px;
    height: 85px;
    position: absolute;
    z-index: 2;
    left: -5px;
    top: -42px;
}



.ribbon 
{
	position:relative;
	
}

#section
{
	margin: 3em auto auto;
	position:relative;
}

#section ul
{
	list-style: none;
    text-align: center;	
}

#section ul li
{
	display: inline-block;
	width: 180px;
	margin:0 0.5%;
	vertical-align: top;
}

#section ul li span , #section ul li a
{
	display: block;
	text-align: center;
}

#section ul li a
{
	text-decoration: none;
}

#section ul li span.thumbnail
{
	height: 160px; 
	position: relative;
}

#section ul li span.t-title
{
	
	font-family: 'boowas_handwritingregular';
	color: #640E0E; 
	font-size: 1.4em;
}

#section .thumbnail img
{
    width: 150px;
    -webkit-transition: width 0.2s ease-in;
    -o-transition: width 0.2s ease-in;
    transition: width 0.2s ease-in;
}


#section ul li:hover img
{
	width: 160px;
}

/* Footer */
#back_btn 
{
	position: absolute;
	bottom: 50px;
	left: 50px;
	-webkit-backface-visibility: hidden
}

#back_btn a img
{
	max-width: 100%;
}

@media all and (max-width : 1300px){

    #section ul li 
    {
        width: 140px;
        margin:0 1%;
    }

    #section .thumbnail img
    {
        width: 130px; 
    }

    #section ul li:hover img
    {
        width: 140px; 
    }

    #section ul li span.thumbnail
    {
        height : 140px; 
    }
}

@media all and (min-width : 1500px){
    
    div#wrapper
    {
        min-height: 780px;
    }

    #section ul li 
    {
        width: 200px;
        margin: 0 1%;
    }

    #section .thumbnail img
    {
        width: 190px; 
    }

    #section ul li:hover img
    {
        width: 200px; 
    }

    #section ul li span.thumbnail
    {
        height : 200px; 
    }
}

@media all and (min-width : 1900px){

    #section ul li 
    {
        width: 220px;
        margin: 0 2%;
    }

    #section .thumbnail img
    {
        width: 210px; 
    }

    #section ul li:hover img
    {
        width: 220px; 
    }

    #section ul li span.thumbnail
    {
        height : 220px; 
    }
}