body {background: #eee;}


/* fadein */
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/* fadein */

.inner {max-width:700px;}

p.logo_area {
	text-align: center;
}
p.logo_area img {
	width: 20%;
}


#demo {width:100%; margin:0; text-align:center;}
/*#demo ul {width:100%; margin:0; padding:0; margin:0 0 40px 0; list-style:none; line-height:1;}*/
#demo ul {
    width: 100%;
    margin: 0;
    padding: 3%;
    margin: 0 0 40px 0;
    list-style: none;
    line-height: 1;
    background: #C9CACA;
}
#demo ul:after {content:""; clear:both; display:block;}
#demo ul li {background:#ccc; padding:0; margin:0 0 2% 0; float:left; overflow:hidden; position:relative;}
#demo ul li img {width:100%; max-width:100%; height:auto;}


/*#demo ul li {width:23.5%;}
#demo ul li {width:20%;}
#demo ul li:nth-child(4n) {float:right;}
#demo ul li:nth-child(4n+1) {clear:both; margin-right:2%;}
#demo ul li:nth-child(4n+2) {margin-right:2%;}
#demo ul li:nth-child(4n+3) {}
*/

#demo ul li {width:18.5%;}
#demo ul li:nth-child(5n) {float:right;}
#demo ul li:nth-child(5n+1) {clear:both; margin-right:1.8%;}
#demo ul li:nth-child(5n+2) {margin-right:1.8%;}
#demo ul li:nth-child(5n+3) {margin-right:1.8%;}
#demo ul li:nth-child(5n+4) {margin-right:1.8%;}


/*@media screen and (max-width:640px) {
	#demo ul li {width:32%;}
	#demo ul li:nth-child(3n) {float:right; clear:none; margin-right:0}
	#demo ul li:nth-child(3n+1) {float:left; clear:both; margin-right:2%;}
	#demo ul li:nth-child(3n+2) {float:left; clear:none; margin-right:0;}
}
*/


/******************/
/******************/


.invisible {
transition:opacity 1.5s ease;
opacity:0.0;
}

.visible {
transition:opacity 1.5s ease;
opacity:1.0;
}


/******************/
/******************/
/* Animations *****/

.fromTopIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,0);
opacity:1.0;
}

.fromTopOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,-10px);
opacity:0.0;
}

.fromBottomIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,0);
opacity:1.0;
}

.fromBottomOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,10px);
opacity:0.0;
}

.fromLeftIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,0);
opacity:1.0;
}

.fromLeftOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(-10px,0);
opacity:0.0;
}

.fromRightIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(0,0);
opacity:1.0;
}

.fromRightOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:translate(10px, 0);
opacity:0.0;
}

.scaleUpIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:scale(1.0,1.0);
opacity:1.0;
}

.scaleUpOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:scale(1.3,1.3);
opacity:0.0;
}

.scaleDownIn {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:scale(1.0,1.0);
opacity:1.0;
}

.scaleDownOut {
transition:transform 1.0s ease, opacity 1.0s ease;
transform:scale(0.7,0.7);
opacity:0.0;
}


/******************/
/******************/