.t8-glass {
	padding-top: 90px;
	padding-bottom: 200px;
	background: 50% 50%/cover no-repeat url('../images/section-t8-glass/bg.jpg');
	min-height: 100vh;
}

@media(max-width:767px){
	.t8-glass {
		padding-top: 70px;
	}
}

@media(max-width:576px){
	.t8-glass {
		padding-top: 70px;
	}
}

.t8-glass .t8-title, .t8-glass .t8-description {
	text-align: center;
	margin: auto;
	max-width: 100%;
	color: #0E3448;
}

.t8-glass .t8-phone-animation-block {
	margin-top: 100px;
	position: relative;
	width: 208px;
	height: 478px;
}

.t8-glass .t8-phone-middle-block {
	position: relative;
}

.t8-glass .t8-phone-middle-text-overflow {
	position: absolute;
	left: 100%;
	width: 220px;
	top: 30px;
	overflow: hidden;
}

.t8-glass .t8-phone-middle-text {
	color: #0E3448;
	font-size: 23px;
	text-transform: uppercase;
	font-weight: 700;
	-moz-text-align-last: left;
	     text-align-last: left;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
}

.t8-glass .t8-phone-back-block, .t8-phone-screen-block, .t8-glass .t8-phone-buttons-block {
	position: absolute;
}

.t8-glass .t8-phone-back-block {
	height: 100%;
	top: 0;
	left: 0;
	width: 207px;
}

.t8-glass .t8-phone-back-blur {
	opacity: 0;
}

.t8-glass .t8-phone-back-block img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.t8-glass .t8-phone-back-block img:last-child {
	width: 250px;
	max-width: 200%;
	left: -23px;
	top: -21px;
}

.t8-glass .t8-phone-buttons-block img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.t8-glass .t8-phone-buttons-blur {
	opacity: 0;
}

.t8-glass .t8-phone-screen-block {
	top: 14px;
	left: 14px;
	width: 181px;
	height: 244px;
}

.t8-glass .t8-phone-screen-block img {
	position: relative;
	left: 0;
	top: 0;
}

.t8-glass .t8-phone-screen-2, .t8-glass .t8-phone-screen-3, .t8-glass .t8-phone-screen-4, .t8-glass .t8-phone-screen-5, .t8-glass .t8-phone-screen-6, .t8-glass .t8-phone-screen-7, .t8-glass .t8-phone-screen-8, .t8-glass .t8-phone-screen-9 {
	display: none;
}

.t8-glass .t8-phone-screen-text {
	color: #0E3448;
	font-size: 23px;
	text-transform: uppercase;
	font-weight: 700;
	text-align: right;
	padding-right: 10px;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
}

.t8-glass .t8-phone-screen-text-overflow {
	width: 110%;
	left: -110%;
	top: 40px;
	position: absolute;
	overflow: hidden;
}

.t8-glass .t8-phone-buttons-block {
	bottom: 17px;
	left: 15px;
	width: 180px;
	height: 200px;
	position: absolute;
}

.t8-glass .t8-phone-screen-arrow-right-overvlow {
	position: absolute;
	width: 177px;
	height: 35px;
	top: 140px;
	left: -175px;
	overflow: hidden;
	text-align: center;
}

.t8-glass .t8-phone-screen-arrow-left-overvlow {
	position: absolute;
	width: 57px;
	height: 35px;
	top: 153px;
	left: 2px;
	overflow: hidden;
	text-align: center;
}

.t8-glass .t8-phone-screen-arrow-right-overvlow img {
	position: relative;
	margin-top: -18px;
	transform: translateX(-100%);
	height: auto !important;
}

.t8-glass .t8-phone-screen-arrow-right-overvlow span {
	display: block;
	transform: translateX(-100%);
}

.t8-glass .t8-phone-screen-arrow-left-overvlow img {
	transform: translateX(100%);
	height: auto !important;
}

@media (max-width: 1199px) {
  .t8-glass .t8-phone-animation-block {
		-webkit-transform: translateX(-50px);
		    -ms-transform: translateX(-50px);
		        transform: translateX(-50px);
		width: 150px;
	}

	.t8-glass .t8-phone-back-block {
		width: 150px;
	}

	.t8-glass .t8-phone-screen-block {
		top: 10px;
    left: 10px;
		width: 131px;
		height: 176px;
	}

	.t8-glass .t8-phone-screen-block img {
		height: 176px;
	}

	.t8-glass .t8-phone-buttons-block {
		bottom: -41px;
	}

	.t8-glass .t8-phone-screen-text, .t8-glass .t8-phone-middle-text {
		font-size: 16px;
	}

	.t8-glass .t8-phone-buttons-block {
		left: 10px;
		width: 130px;
		height: 145px;
		bottom: 145px;
	}

	.t8-glass {
		padding-bottom: 0;
	}

	.t8-glass .t8-phone-animation-block {
		margin-top: 80px;
	}

	.t8-glass .t8-phone-back-block img:last-child {
    width: 179px;
    max-width: 200%;
    left: -14px;
    top: -15px;
	}
}

@media (max-width: 767px) {
  .t8-glass .t8-phone-animation-block {
		margin-top: 100px;
	}

  .t8-glass .t8-phone-animation-block {
		left: calc(50% - 20px);
		-webkit-transform: translateX(-50%px);
		    -ms-transform: translateX(-50%px);
		        transform: translateX(-50%px);
	}

	.t8-glass .t8-phone-animation-block {
		width: 100px;
	}

	.t8-glass .t8-phone-back-block {
		width: 100px;
	}

	.t8-glass .t8-phone-screen-block {
		width: 86px;
		top: 7px;
		left: 7px;
		height: 116px;
	}

	.t8-glass .t8-phone-screen-block img {
		height: 116px;
	}

	.t8-glass .t8-phone-buttons-block {
		left: 7px;
    width: 86px;
    height: 96px;
    bottom: 18px;
	}

	.t8-glass .t8-phone-animation-block {
		height: 240px;
	}

	.t8-glass {
		padding-bottom: 150px;
	}

	.t8-glass .t8-phone-screen-text-overflow {
		width: 160%;
    left: -160%;
	}

	.t8-glass .t8-phone-middle-text-overflow {
		left: -176%;
    width: 174px;
	}

	.t8-glass .t8-phone-middle-text {
		letter-spacing: 1.5px;
		-moz-text-align-last: right;
		     text-align-last: right;
		     text-shadow: 1px 1px 0px white;
		padding-right: 11px;
		-webkit-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		        transform: translateX(100%);
	}

	.t8-glass .t8-phone-back-block img:last-child {
    width: 119px;
    max-width: 200%;
    left: -9px;
    top: -12px;
}
}


@media (min-width: 992px) and (max-height: 850px) {
	.t8-glass .t8-phone-animation-block {
		width: 158px;
		height: 364px;
		margin-top: 80px;
	}

	.t8-glass .t8-phone-screen-block img {
		height: 186px;
	}

	.t8-glass .t8-phone-back-block img {
		width: 158px;
	}

	.t8-glass .t8-phone-back-block img:last-child {
		width: 191px;
    max-width: 200%;
    left: -17px;
    top: -19px;
	}

	.t8-glass .t8-phone-buttons-block {
		bottom: 14px;
    left: 11px;
    width: 136px;
    height: 152px;
    position: absolute;
	}

	.t8-glass .t8-phone-screen-block {
		width: 137px;
		top: 10px;
		left: 10px;
		height: 186px;
	}

	.t8-phone-screen-text-overflow {
		width: 150% !important;
    left: -150% !important;
	}
}

@media (min-width: 992px) and (max-height: 700px) {
	.t8-glass {
		padding-top: 10px;
		padding-bottom: 100px;
	}

	.t8-title {
		font-size: 30px;
	}

	.t8-description {
		font-size: 16px;
	}
}