.page {

margin : 0 auto;

width : 98%;

}

.logo {

float : left;

width : 100%;

height : 100px;

text-align : center;

margin-bottom : 40px;

}

.logo img {

width : 100%;

height : 100px;

}

nav {

display : block;

float : right;

width : 100%;

height : 60px;

background : url(/img/sheet/bg.png);

}

.navigation li {

float : left;

width : 96%;

padding : 2%;

}

.navigation li ul {

display:none;

} 

.navigation li:hover ul {

position : relative;

z-index : 5;

display : block;

} 

.main_nav li {

background : url(/img/sheet/bg.png) #fff;

border-bottom : 1px solid #000;

}

.sub_menue, .sub_link {

display : none;

}

.content {

float : left;

margin-top : 40px;

margin-bottom : 40px;

width : 100%;

background : url(/img/sheet/bg.png);

}

article {

display : block;

float : left;

width : 100%;

}

.left_col {

float : left;

width : 100%;

}

.right_col {

float : right;

width : 100%;

}

.news_img, article img, img {

max-width : 400px;

height : 20%;

}

aside {

display : block;

float : right;

width : 100%;

}

.resize {

max-width : 400px;

height : 20%;

}

.center {

text-align : center;

}

footer {

display : block;

margin : 0 auto;

width : 100%;

clear : both;

background : url(/img/sheet/bg.png);

}

.footer {

float : left;

width : 100%;

padding : 1%;

text-align : center;

}

.photos {

    width: 100%;

    height: 25%;

    margin: 100px auto;

    position:relative;

}

.photos > div {

    background-color: rgba(128, 128, 128, 0.5);

    border: 2px solid #444;

    float: left;

    height: 20%;

    margin: 5px;

    overflow: hidden;

    position: relative;

    width: 23%;

    z-index: 1;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -ms-border-radius: 10px;

    -o-border-radius: 10px;

    border-radius: 10px;

    -webkit-transform:scale(1.0);

    -moz-transform:scale(1.0);

    -ms-transform:scale(1.0);

    -o-transform:scale(1.0);

    transform:scale(1.0);

    -webkit-transition-duration: 0.5s;

    -moz-transition-duration: 0.5s;

    -ms-transition-duration: 0.5s;

    -o-transition-duration: 0.5s;

    transition-duration: 0.5s;

}

.photos > div img{

    width: 100%;

}

.photos > div:hover{

    z-index: 10;

    -webkit-transform:scale(2.0);

    -moz-transform:scale(2.0);

    -ms-transform:scale(2.0);

    -o-transform:scale(2.0);

    transform:scale(2.0);

}

.photos > div div {

    background: url(../images/hover.gif) repeat scroll 0 0 transparent;

    cursor: pointer;

    height: 100%;

    left: 0;

    opacity: 0.5;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 15;

    -webkit-transition-duration: 0.5s;

    -moz-transition-duration: 0.5s;

    -ms-transition-duration: 0.5s;

    -o-transition-duration: 0.5s;

    transition-duration: 0.5s;

}

.photos > div:nth-child(1):hover div {

    height: 0%;

}

.photos > div:nth-child(2):hover div {

    height: 0%;

    margin-top: 100px;

}

.photos > div:nth-child(3):hover div {

    width: 0%;

}

.photos > div:nth-child(4):hover div {

    margin-left: 300px;

    width: 0%;

}

.photos > div:nth-child(5):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

}

.photos > div:nth-child(6):hover div {

    margin-left: 150px;

    width: 0%;

}

.photos > div:nth-child(7):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

    -webkit-transform: rotateX(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(-360deg);

    transform: rotate(-360deg);

}

.photos > div:nth-child(8):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

    -webkit-transform: rotateZ(600deg);

    -moz-transform: rotateZ(600deg);

    -ms-transform: rotateZ(600deg);

    -o-transform: rotateZ(600deg);

    transform: rotateZ(600deg);

}

.photos > div.pair div {

    width: 50%;

}

.photos > div.pair div:nth-child(odd) {

    margin-left: 150px;

}

.photos > div.pair:hover div {

    width: 0%;

}

.photos > div.pair:hover div:nth-child(odd) {

    margin-left: 300px;

}