/* reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, sub, tt, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, button, textarea, input, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, footer, header {margin:0; padding:0; border:0; vertical-align:baseline;}
*, :after, :before {-webkit-box-sizing:border-box; box-sizing:border-box;}
a, button, div, input, label, select, textarea, :focus, :active {outline:none;}
ol, ul {list-style:none;}
caption, th, td {text-align:left; font-weight:normal; vertical-align:middle;}
img {border:none; display:inline-block;}

/* grid */
html, body {width:100%; height:100%;}
.wrap {max-width:1140px; min-width:960px; position:relative; margin:0 auto;}
.content {position: relative;}
.text-box {position: relative; z-index: 10; background: #fff;}

/* typography */
body {font:normal 16px/20px 'DINPro-Medium', Helvetica, sans-serif; color:#090e12;}

h1 {font-weight:normal; font-size:36px; line-height:40px; color:#e9504b; text-align:center; position: relative; left: 0; top: 880px; z-index: 3; margin-bottom:35px; padding-top:30px;}
h2 {font-weight:normal; font-size:28px; line-height:30px; color:#e9504b; margin-bottom:26px; padding-top:5px;}

a, a:hover {text-decoration:none;}
p {line-height:26px; margin-bottom:26px;}

.btn {width:180px; height:50px; display:inline-block; font-size:16px; line-height:48px; color:#fff; text-align:center; text-decoration:none; -webkit-border-radius:24px; -moz-border-radius:24px; border-radius:24px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; background:#e74e49;}
.btn:hover {background:#ff5d52;}

.site-list .description div:before, .site-list .rating-box .star {background:url('../img/sprite.png') no-repeat;}

/* left, right, position, clearfix */
.text-center {text-align:center;}

.clearfix:before, .clearfix:after, .site-list li:before, .site-list li:after {display:table; content:'';}
.clearfix:after, .site-list li:after {clear:both;}


/*--- CONTENT ---*/

.header {height:200px; padding-top:103px; position: relative; overflow: hidden; background: #000;}
	.header .wrap img {width:295px; height:39px; display:block; position: relative; z-index: 10; margin-left:10px;}
.photos {width: 1920px; height: 200px; position: absolute; left: 0; top: 0; z-index: 1;}
.photos img {width: 173px; height: 200px; float: left; margin-right: 1px; opacity: 0;}

.site-list {height: 990px; position: relative; margin-bottom:29px;}
.site-list li {width:100%; height:160px; display:table; position:absolute; left: 0; opacity: 0; z-index: 5; border-top:solid 2px #7097e5; background:#f7f9ff;
	background:-moz-linear-gradient(left, #deeaff 0%, #ffffff 100%);
	background:-webkit-linear-gradient(left, #deeaff 0%, #ffffff 100%);
	background:linear-gradient(to right, #deeaff 0%, #ffffff 100%);}
	.site-list li > div {display:table-cell; vertical-align:middle; text-align:center;}
.site-list .logo-box {width:25%;} /* 285 */
	.site-list .logo-box a {display:inline-block;}
.site-list .description {width:15.49122%; text-align:left; padding-left:28px;} /* 188 */
	.site-list .description div {position:relative;}
	.site-list .description div + div {margin-top:10px;}
	.site-list .description div:before {width:13px; height:10px; display:block; content:''; position:absolute; left:-20px; top:6px; background-position:0 -120px;}
.site-list .type {width:12.28070%;} /* 140 */
.site-list .number-users {width:15.29824%;} /* 163 */
.site-list .rating-box {width:128px;} /* 125 */
	.site-list .rating-box .num-rate {font-size:36px; line-height:40px; margin-bottom:3px;}
	.site-list .rating-box .rate {width:110px; display:inline-block; overflow:hidden;}
	.site-list .rating-box .star {width:22px; height:21px; float:left;}
	.site-list .rating-box .star-full {background-position:0 0;}
	.site-list .rating-box .star-empty {background-position:0 -30px;}
.site-list .btn-box {width:20.96491%;} /* 239 */

.site-list .position {width:25px; height:35px; font-size:24px; line-height:34px; font-family:'DINPro-Regular', Helvetica, sans-serif; color:#fff; text-align:center;  position:absolute; left:0; top:-2px; background:#7097e5;}
.site-list .position-best {width:180px; font-size:18px; font-family:'DINPro-Medium', Helvetica, sans-serif; text-transform:uppercase; left:-14px; top:-12px; background:#f74855;}
	.site-list .position-best:before {content:''; position:absolute; left:0; bottom:-24px; border-style:solid; border-width:12px 7px; border-color:#d93441 #d93441 transparent transparent;}
	.site-list .position-best:after {content:''; position:absolute; right:-6px; top:0; border-style:solid; border-width:35px 6px; border-color:#f74855 transparent transparent transparent;}
.site-list .position-orange {background:#ff9f60;}

.site-list .item-lp {height: 190px; top:880px; border-top-color:#ed554f; background:#fff5e6;
	background:-moz-linear-gradient(left, #ffeaca 0%, #ffffff 100%);
	background:-webkit-linear-gradient(left, #ffeaca 0%, #ffffff 100%);
	background:linear-gradient(to right, #ffeaca 0%, #ffffff 100%);
}
	.site-list .item-lp .logo-box {background:url('../img/bg_logo_lp.png') no-repeat right 11px;}
.site-list .item-charm {top:1070px; border-top-color:#ff9f60; background:#fff2e2;
	background:-moz-linear-gradient(left, #fff2e2 0%, #ffffff 100%);
	background:-webkit-linear-gradient(left  #fff2e2 0%, #ffffff 100%);
	background:linear-gradient(to right, #fff2e2 0%, #ffffff 100%);
}
.site-list .item-dom2 {top:1230px; border-top-color:#ff9f60; background:#fffaf2;
	background:-moz-linear-gradient(left, #fffaf2 0%, #ffffff 100%);
	background:-webkit-linear-gradient(left, #fffaf2 0%, #ffffff 100%);
	background:linear-gradient(to right, #fffaf2 0%, #ffffff 100%);
}
.site-list .item-rambler {top: 1390px;}
.site-list .item-chocolate {top: 1550px;}
.site-list .item-hipler {top: 1710px;}

.item-lp .logo-box img {width:163px; height:114px;}
.item-charm .logo-box img {width:193px; height:54px;}
.item-rambler .logo-box img {width:242px; height:28px;}
.item-chocolate .logo-box img {width:178px; height:100px;}

.img-box-left {width:40.614035%; float:left;}
	.img-box-left + div {margin-left:40.614035%; padding:0 25px;}
.img-box-right {width:40.789473%; float:right;}
	.img-box-right + div {margin-right:40.789473%; padding-right:25px;}
.img-box-left img, .img-box-right img {width:100%; height:auto;}

.footer {width:100%; height:72px; display:table; border-top:solid 2px #7097e5;}
	.footer div {display:table-cell; color:#848688; text-align:center; text-transform:uppercase; vertical-align:middle;}

/* animate */
@keyframes showPhoto {
	from {opacity: 0;}
	to {opacity: 1;}
}
.photos .show-photo {animation:showPhoto 0.3s ease; opacity: 1;}

@media screen and (max-width:1170px) {
	.site-list .position-best {left:0;}
	.site-list .position-best:before {display:none;}
}

@keyframes showTitle {
	from {top:880px; opacity: 0;}
	to {top: 0; opacity: 1;}
}
.show-title {animation:showTitle 0.5s ease-out; top:0; opacity: 1;}

@keyframes showItems1 {
	from {top:880px; opacity: 0;}
	to {top: 0; opacity: 1;}
}
.site-list .item1 {animation:showItems1 0.5s ease-out; top:0; opacity: 1;}

@keyframes showItems2 {
	from {top:1070px; opacity: 0;}
	to {top: 190px; opacity: 1;}
}
.site-list .item2 {animation:showItems2 0.5s ease-out; top:190px; opacity: 1;}

@keyframes showItems3 {
	from {top:1230px; opacity: 0;}
	to {top: 350px; opacity: 1;}
}
.site-list .item3 {animation:showItems3 0.5s ease-out; top:350px; opacity: 1;}

@keyframes showItems4 {
	from {top:1390px; opacity: 0;}
	to {top: 510px; opacity: 1;}
}
.site-list .item4 {animation:showItems4 0.5s ease-out; top:510px; opacity: 1;}

@keyframes showItems5 {
	from {top:1550px; opacity: 0;}
	to {top: 670px; opacity: 1;}
}
.site-list .item5 {animation:showItems5 0.5s ease-out; top:670px; opacity: 1;}

@keyframes showItems6 {
	from {top:1710px; opacity: 0;}
	to {top: 830px; opacity: 1;}
}
.site-list .item6 {animation:showItems6 0.5s ease-out; top:830px; opacity: 1;}

/* responsive */

@media screen and (max-width:1160px) {
	h2 {padding:1px 0 0 20px;}
	.site-list {margin-bottom:33px;}
	.img-box-left {margin-left:20px;}
		.img-box-left + div {padding-left:45px;}
	.img-box-right {margin-right:20px;}
		.img-box-right + div {padding:0 45px 0 20px;}
}

@media screen and (max-width:1140px) {
	.header .wrap img {margin-left:30px;}
}

@media screen and (max-width:1040px) {
	.item-rambler .logo-box img {width:222px; height:auto;}
}