@charset "UTF-8";

body { background: url('bgbg.jpg') no-repeat center bottom; min-width: 320px; }
div.top { background-position: 0px 0px; padding: 0; position: relative; background-repeat: no-repeat; }
div.top div.header { height: 540px; position: relative; box-shadow: 0 3px 5px #dddddd; }

div.top div.header h3 { margin: 0 auto; text-align: center; line-height: 45px; font-size: 30px; color: #E63517; }
div.top div.header h3 span { font-size: 40px; font-weight: 500; }
div.top div.header h3 span i { font-size: 40px; font-weight: 500; font-style: italic; }
div.top div.header table { position: absolute; bottom: 0; height: 140px; border: 0; border-collapse: collapse; }
div.top div.header table tr td { padding: 0; margin: auto; vertical-align: middle; text-align: center; height: 140px; }
div.top div.header table tr td div { display: inline-block; text-align: left; padding: 0 0 0 77px; background: center left no-repeat; background-size: 57px 51px; }
div.top div.header table tr td div.icon1 { background-image: url('icon1.svg'); }
div.top div.header table tr td div.icon2 { background-image: url('icon2.svg'); }
div.top div.header table tr td div.icon3 { background-image: url('icon3.svg'); }
div.top div.header table tr td div a { padding: 0 0 0 20px; border-left: 1px solid #E63517; display: block; font-size: 18px; color: #3C3C3B; }
div.top div.header table tr td div a span { font-size: 28px; font-weight: 500; color: #3C3C3B; white-space: nowrap; }
div.top div.header table tr td > a { display: inline-block; width: 214px; height: 72px; cursor: pointer; background: no-repeat center center; }
div.top div.header table tr td > a.android-ru { background-image: url('gplay-ru.png'); }
div.top div.header table tr td > a.android-fr { background-image: url('gplay-fr.png'); }

@media only screen and (min-width:1200px) {
	div.top { background-image: url('bg-1920.jpg'); padding: 70px 0 0 0; background-position: 0px 70px;  }

	div.top div.header h3 { width: 760px; padding: 75px 230px 0 0; }
	
	div.top div.header table { width: 1200px; margin-left: -600px; left: 50%; }
	div.top div.header table tr td { width: 290px; }
	div.top div.header h3 span:after { content:' - '; font-size: 30px; }	
}

@media only screen and (min-width:1024px) and (max-width:1199px) {
	div.top { background-image: url('bg-1024.jpg'); }
	div.top:after { content:''; display: block; position:absolute; background: url('platforms.png') no-repeat center center; width: 336px; height: 248px; right: 37px; bottom: 95px; }
	
	div.top div.header { text-align: center; }
	div.top div.header h3 { display: inline-block; margin: 64px 0 0 0; padding: 20px 0 20px 260px; background: url('logo-name.svg') left center no-repeat; background-size: 252px 86px; line-height: 23px; font-size: 23px; font-weight: 500; }
	div.top div.header h3 span { display: none; }

	div.top div.header table { left: 0; right: 0; width: 100%; }
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	div.top { background-image: url('bg-1024.jpg'); }
	div.top:after { content:''; display: block; position:absolute; background: url('platforms.png') no-repeat center center; width: 336px; height: 248px; right: 37px; bottom: 95px; }
	div.top div.header { height: 610px; text-align: center; }
	
	div.top div.header h3 { display: inline-block; margin: 64px 0 0 0; padding: 20px 0 20px 260px; background: url('logo-name.svg') left center no-repeat; background-size: 252px 86px; line-height: 23px; font-size: 23px; font-weight: 500; }
	div.top div.header h3 span { display: none; }
	
	div.top div.header table { left: 0; right: 0; width: 100%; }
	div.top div.header table tr td { width: 33%; }
	div.top div.header table tr td:last-child { display: block; position: absolute; left: 90px; bottom: 125px; width: 242px; height: 70px; }
}

@media only screen and (min-width:576px) and (max-width:767px) {
	div.top { background-image: url('bg-768.jpg'); }
	div.top:before { content:''; display: block; position:absolute; top: 0; width: 100%; height: 410px; background: linear-gradient(175.9deg, rgba(255, 255, 255, 0) 32.17%, rgba(255, 255, 255, 0.34) 52.58%, rgba(255, 255, 255, 0.87) 73.28%, #FFFFFF 86.83%); }
	div.top div.header { height: 610px; text-align: center; }
	
	div.top div.header h3 { display: inline-block; margin: 64px 0 0 0; padding: 20px 0 20px 260px; background: url('logo-name.svg') left center no-repeat; background-size: 252px 86px; line-height: 23px; font-size: 23px; font-weight: 500; }
	div.top div.header h3 span { display: none; }
	
	div.top div.header table { left: 0; right: 0; width: 100%;  height: 140px; bottom: 200px; }
	div.top div.header table tr td { width: 50%; }
	div.top div.header table tr td:nth-child(3) { display: block; position: absolute; left: 0; right: 0; top: 140px; }
	div.top div.header table tr td:nth-child(4) { display: block; position: absolute; left: 0; right: 0; top: 240px; height: 70px; }
}

@media only screen and (max-width:575px) {
	div.top { background-image: url('bg-768.jpg'); }
	div.top:before { content:''; display: block; position:absolute; top: 0; width: 100%; height: 410px; background: linear-gradient(175.9deg, rgba(255, 255, 255, 0) 32.17%, rgba(255, 255, 255, 0.34) 52.58%, rgba(255, 255, 255, 0.87) 73.28%, #FFFFFF 86.83%); }
	div.top div.header { height: 670px; box-shadow: none; text-align: center; }
	
	div.top div.header h3 { display: inline-block; margin: 64px 0 0 0; padding: 95px 0 0 0; background: url('logo-name.svg') center top no-repeat; background-size: 220px 75px; line-height: 23px; font-size: 23px; font-weight: 500; }
	div.top div.header h3 span { display: none; }
	
	div.top div.header table { display: block; left: 0; right: 0; bottom: 0; width: 100%; height: 400px; }
	div.top div.header table tbody { display: block; }
	div.top div.header table tr { display: block; }
	div.top div.header table tr td { display: block; width: 100%; height: 80px; margin-bottom: 20px; }
	div.top div.header table tr td > div { display: block; width: 165px; margin: 0 auto; }
	div.top div.header table tr td:nth-child(4) { height: 70px; margin-top: 40px; }
}