.css3notes {

position:relative;

z-index:100;

-webkit-touch-callout:none;

-webkit-user-select:none;

-khtml-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

zoom:1;

margin:10px 0

}



.ao-item {

width:24.9%;

float:left;

cursor:pointer;

zoom:1

}



.ao-item-in {

    margin: 0 auto;

    padding: 0;

    position: relative;

    width: 222px;

    z-index: 2;

	-webkit-transition: all 0.2s ease-out 0.1s;

	-moz-transition: all 0.2s ease-out 0.1s;

	-ms-transition: all 0.2s ease-out 0.1s;

	-o-transition: all 0.2s ease-out 0.1s;

	transition: all 0.2s ease-out 0.1s;

}

.ao-item span{

    color: #878787;

    display: block;

    font-size: 14px;

    line-height: 27px;

    margin: 8px auto 0;

    width: 220px;	

}

.ao-preview {
	visibility:hidden;
	position:absolute;
	top:0;
	left:160px;
	float:none;
	width:620px;
	max-width:620px;
	height:auto;
	z-index:150;
	display:none;
}
.open .ao-preview{
	display:block;
}


.ao-item img {

display:block;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

/*filter:alpha(opacity=80);

opacity:0.8;*/

-webkit-transition:all .3s ease-in-out;

-moz-transition:all .3s ease-in-out;

-o-transition:all .3s ease-in-out;

-ms-transition:all .3s ease-in-out;

transition:all .3s ease-in-out;

margin:0;

}



.ao-item img.ao-small {
    border: 1px solid #e7e7e7;
    height: 223px;
    position: relative;
    width: 196px;
    z-index: 3;
}

.ao-item-in:after{
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e7e7e7;
    bottom: -2px;
    content: "";
    height: 223px;
    position: absolute;
    right: 22px;
    width: 196px;
    z-index: 1;
	-webkit-transition: all 0.2s ease-out 0.1s;

	-moz-transition: all 0.2s ease-out 0.1s;

	-ms-transition: all 0.2s ease-out 0.1s;

	-o-transition: all 0.2s ease-out 0.1s;

	transition: all 0.2s ease-out 0.1s;

}

.ao-item .ao-item-in:before{

    background: url("../images/zoom.png") no-repeat scroll center center rgba(0, 0, 0, 0);

    bottom: 0;

    content: "";

    height: 90px;

    left: 0;

    position: absolute;

    right: 0;

    top: 80px;

    width: 100%;

    z-index: 4;	

	-webkit-transition: all 0.2s ease-out 0.1s;

	-moz-transition: all 0.2s ease-out 0.1s;

	-ms-transition: all 0.2s ease-out 0.1s;

	-o-transition: all 0.2s ease-out 0.1s;

	transition: all 0.2s ease-out 0.1s;

	opacity:0;

	filter: alpha(opacity = 0);

}

.ao-item .ao-item-in:hover:before{

	top:70px;

	opacity:1;

	filter: alpha(opacity = 100);

	-webkit-transition: all 0.2s ease-out 0.1s;

	-moz-transition: all 0.2s ease-out 0.1s;

	-ms-transition: all 0.2s ease-out 0.1s;

	-o-transition: all 0.2s ease-out 0.1s;

	transition: all 0.2s ease-out 0.1s;

}

.ao-annotations {

width:100%;

height:100%;

position:absolute;

top:0;

left:0;

outline:none;

background:rgba(66,66,66,0.3);

box-shadow:1px 1px 3px rgba(0,0,0,0.05);

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

filter:alpha(opacity=0);

opacity:0;

z-index:5;

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-ms-transform:scale(0.8);

transform:scale(0.8);

-webkit-transition:all .3s ease-in-out;

-moz-transition:all .3s ease-in-out;

-o-transition:all .3s ease-in-out;

-ms-transition:all .3s ease-in-out;

transition:all .3s ease-in-out

}
.ao-item.open .ao-annotations{
	background:none;
}


.ao-annotations span {

display:block;

position:absolute;

width:33%;

min-width:140px;

text-align:center;

background:rgba(255,255,255,1);

color:rgba(20,40,47,0.9);

font-size:16px;

font-style:italic;

text-shadow:1px 1px 1px rgba(255,255,255,0.9);

box-shadow:0 1px 4px rgba(0,0,0,0.2);

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

filter:alpha(opacity=0);

opacity:0;

-webkit-transform:scale(1.3);

-moz-transform:scale(1.3);

-o-transform:scale(1.3);

-ms-transform:scale(1.3);

transform:scale(1.3);

-webkit-transition:all .3s ease-in-out;

-moz-transition:all .3s ease-in-out;

-o-transition:all .3s ease-in-out;

-ms-transition:all .3s ease-in-out;

transition:all .3s ease-in-out;

padding:10px 25px

}



.ao-annotations span:after {

position:absolute;

background:transparent url(../images/css3notes/arrow.png) no-repeat center center;

width:32px;

height:33px;

top:50%;

left:100%;

content:'';

margin:-16px 0 0 -16px

}



.ao-annotations span.left-note:after {

left:auto;

right:100%;

background-image:url(../images/css3notes/arrow_left.png);

margin:-16px -16px 0 0

}



.ao-item.open .ao-preview {

visibility:visible

}



.ao-item div.ao-bg {

position:fixed;

top:0;

left:0;

background:#000;

width:100%;

height:100%;

visibility:hidden;

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

filter:alpha(opacity=0);

opacity:0;

-webkit-transition:all .3s ease-in-out;

-moz-transition:all .3s ease-in-out;

-o-transition:all .3s ease-in-out;

-ms-transition:all .3s ease-in-out;

transition:all .3s ease-in-out

}



.ao-item.open div.ao-bg {
visibility:visible;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
filter:alpha(opacity=60);
opacity:0.6;
z-index:100;
}



.ao-item img.ao-large {

width:100%;

-webkit-transform:scale(0);

-moz-transform:scale(0);

-o-transform:scale(0);

-ms-transform:scale(0);

transform:scale(0)

}



.ao-item.open img.ao-large {

box-shadow:1px 1px 10px rgba(0,0,0,0.2);

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=99);

filter:alpha(opacity=99);

opacity:1;

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1)

}



.ao-item:hover img.ao-small {

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=99);

filter:alpha(opacity=99);

opacity:1



}



.ao-item.open .ao-annotations span:nth-child(1) {

-webkit-transition-delay:.3s;

-moz-transition-delay:.3s;

-o-transition-delay:.3s;

-ms-transition-delay:.3s;

transition-delay:.3s

}



.ao-item.open .ao-annotations span:nth-child(2) {

-webkit-transition-delay:.4s;

-moz-transition-delay:.4s;

-o-transition-delay:.4s;

-ms-transition-delay:.4s;

transition-delay:.4s

}



.ao-item.open .ao-annotations span:nth-child(3) {

-webkit-transition-delay:.5s;

-moz-transition-delay:.5s;

-o-transition-delay:.5s;

-ms-transition-delay:.5s;

transition-delay:.5s

}



.ao-item.open .ao-annotations span:nth-child(4) {

-webkit-transition-delay:.6s;

-moz-transition-delay:.6s;

-o-transition-delay:.6s;

-ms-transition-delay:.6s;

transition-delay:.6s

}



.ao-item.open .ao-annotations span:nth-child(5) {

-webkit-transition-delay:.7s;

-moz-transition-delay:.7s;

-o-transition-delay:.7s;

-ms-transition-delay:.7s;

transition-delay:.7s

}



.ao-item.open .ao-annotations span:nth-child(6) {

-webkit-transition-delay:.8s;

-moz-transition-delay:.8s;

-o-transition-delay:.8s;

-ms-transition-delay:.8s;

transition-delay:.8s

}



.ao-item.open .ao-annotations span:nth-child(7) {

-webkit-transition-delay:.9s;

-moz-transition-delay:.9s;

-o-transition-delay:.9s;

-ms-transition-delay:.9s;

transition-delay:.9s

}



.ao-item.open .ao-annotations span:nth-child(8) {

-webkit-transition-delay:1s;

-moz-transition-delay:1s;

-o-transition-delay:1s;

-ms-transition-delay:1s;

transition-delay:1s

}



.css3notes:before,.css3notes:after,.ao-item:before,.ao-item:after {

content:"";

display:table

}



.css3notes:after,.ao-item:after {

clear:both

}



.ao-item.open .ao-annotations,.ao-item.open .ao-annotations span {

-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=99);

filter:alpha(opacity=99);

opacity:1;

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1)

}



@media screen and max-width 730px {

.ao-annotations span {

font-size:11px

}

}