/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
:root {
	font-size: 16px;
	line-height: 20px;
}
body, html {
	background: #333333;
}
.area {
	width: 100%;
}
.title, .title_print {
	display: none;
}
p, a, h1, h2, h3, span, hr {
	padding: 0;
	margin: 0;
	font-weight: normal;
}
a:hover, a:focus, a:active {
	text-decoration: none;
}
.container-fluid {
	max-width: 1024px;
}
.hero {
	height: 180px;
}
.hero .left-box {
	background: #e20074 url(../img/tm-logo.png) 10px 10px no-repeat;
	background-size: 40px 20px;
	padding: 10px;
	height: 180px;
}
.hero .left-box .hero-title {
	font-family: 'tele-groteskultregular';
	font-size: 1.7em;
	line-height: 1.03em;
	color: #000000;
	margin-top: 35px;
	text-transform: uppercase;
}
.hero .left-box .hero-title span {
	color: #FFFFFF;
}
.hero .right-box {
	background: #e20074 url(../img/hero-img.png) center center no-repeat;
	background-size: cover;
	height: 180px;
}
.content .item {
	background: #FFFFFF url(../img/pink-arrow.png) 95% center no-repeat;
	background-size: 5%;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
.content .item.dark {
	background: #4d4d4d url(../img/pink-arrow.png) 95% center no-repeat;
	background-size: 5%;
}
.content .item:hover {
	background-position: 94% center;
}
.content .item .inner-item {
	width: 210px;
	margin: 20px 0 20px 20px;
}
.content .item .inner-item.m-tm {
	background: transparent url(../img/ico-tm.png) left center no-repeat;
	background-size: contain;
}
.content .item .inner-item.avat {
	background: transparent url(../img/ico-avatar.png) left center no-repeat;
	background-size: contain;
}
.content .item .inner-item.prc {
	background: transparent url(../img/ico-prc.png) left center no-repeat;
	background-size: contain;
}
.content .item .inner-item .item-title {
	font-family: 'tele-groteskultregular';
	font-size: 1.25em;
	line-height: 1.08em;
	color: #000000;
	text-transform: uppercase;
	padding-left: 70px;
}
.content .item .inner-item .item-title .smaltxt {
	font-family: 'tele-groteskhalregular';
	font-size: 0.9em;
	text-transform: none;
	display: block;
	margin-top: -2px;
}
.content .item.dark .inner-item .item-title {
	color: #FFFFFF;
}
.footer {
	background: #e6e6e6;
	text-align: center;
	padding: 30px 0;
}
.footer .help-title {
	font-family: 'tele-groteskhalregular';
	font-size: 1.1em;
	line-height: 1.2em;
	color: #000000;
	margin-bottom: 5px;
}
.footer .help-phone {
	font-family: 'tele-groteskultregular';
	font-size: 1.5em;
	line-height: 1.1em;
	color: #e20074;
}
.footer .help-small-info {
	font-family: 'tele-grotesknorregular';
	font-size: 0.95em;
	line-height: 1.1em;
	color: #666666;
	margin-top: 1px;
	margin-bottom: 10px;
}
.my-android {
	width: 100%;
	height: 100%;
	display: block;
}
.my-ios {
	width: 100%;
	height: 100%;
	display: block;
}
.my-win {
	width: 100%;
	height: 100%;
	display: block;
}

@media (min-width: 320px) {
		.hero {
	height: 180px;
}
.hero .left-box {
	height: 180px;
}
.hero .right-box {
	background: #e20074 url(../img/hero-img.png)  center right no-repeat;
	height: 180px;
}
}

@media (min-width: 480px) {
	.hero {
	height: 270px;
}
.hero .left-box {
	height: 270px;
	background-size: 80px 40px;
	font-size: 23px;

}
.hero .left-box .hero-title {
	margin-top:50px;
}
.hero .right-box {
	background: #e20074 url(../img/hero-img-480.jpg) center right no-repeat;
	height: 270px;
}

}

@media (min-width: 640px) {
.hero {
	height: 360px;
}
.hero .left-box {
	height: 360px;
	  font-size: 29px;
	  padding:0 30px;

    background: #e20074 url(../img/tm-logo.png) 30px 10px no-repeat;
	background-size: 120px 60px;
}
.hero .right-box {
	background: #e20074 url(../img/hero-img-640.jpg) center right no-repeat;
	height: 360px;

}

.hero .left-box .hero-title {

    margin-top: 90px;
}
.content .item {
    height: 180px;
}
.content .item .inner-item {
    margin: 50px 0 50px 40px;
	width:auto;
	max-width: 800px;
	font-size: 31px;
}
.content .item .inner-item .item-title {
    padding-left: 3em;
}
.footer {
    font-size: 24px;
}
}

@media (min-width: 720px) {
	.hero {
	height: 440px;
}
.hero .right-box {
	background: #e20074 url(../img/hero-img-720.jpg) center right no-repeat;
	height: 440px;
}
.hero .left-box {
    font-size: 33px;
	height: 440px;

}
.hero .left-box .hero-title {

    margin-top: 100px;
}
}
@media (min-width: 960px) {
.hero .right-box {
	background: #e20074 url(../img/hero-img-960.jpg) center right no-repeat;
}
	.hero .left-box {
    font-size: 36px;

}
.hero .left-box .hero-title .bigbr{
display:none;
}
}
@media (min-width: 1024px) {
	.hero .right-box {
	background: #e20074 url(../img/hero-img-1024.jpg) center right no-repeat;
}
	.hero .left-box {
    font-size: 35px;
}
.hero .left-box .hero-title {

    margin-top: 110px;
}

}
