@font-face {
    font-family:"OSWALD-LIGHT";
    src:url(../font/OSWALD-LIGHT.TTF);
    font-style:normal;
    font-weight:400
}
section {
    position: relative;
}
main{
    position: relative;
    overflow: hidden;
}
* {
    color: #676767;
    font-family: "OSWALD-LIGHT";
}
.case-wrapper {
  padding-left: 95px;
  position: relative;
  overflow: hidden;
}
.wide-img{
  width: 100%;
  max-width: 938px;
}
.one {
    text-align: center;
    z-index: 2;
}
/*.one::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/fon-zern.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
}*/
.one-fon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 80%;
}
.one .logo {
    /*display: block;*/
    text-align: center;
    padding-top: 10%;
    /*margin: 0 auto;*/
}
.task {
    font-size: 22px;
    text-transform: uppercase;
    display: block;
    margin: 35px 0 0;
}
.line {
    display: inline-block;
    width: 120px;
    height: 2px;
    background: #71bf44;
    margin: 30px 0;
}
.one p,
.five p {
    font-size: 21px;
    color: #999999;
    margin-bottom: 30px;
}
p {
    font-size: 15px;
}
.br,
.block-2 {
    box-sizing: border-box;
    transition: color 0.25s;
    border: 2px solid transparent;
    position: relative;
}
.br::before,
.br::after,
.block-2::before,
.block-2::after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    width: 0;
    height: 0;
}
.br::before,
.block-2::before {
    top: 0;
    left: 0;
}
.br::after,
.block-2::after {
    bottom: 0;
    right: 0;
}
.br.anima,
.block-2.anima {
    color: #84c85d;
}

.br.anima::before,
.br.anima::after,
.block-2.anima::before,
.block-2.anima::after {
    width: 100%;
    height: 100%;
}
.br.anima::before,
.block-2.anima::before {
    border-top-color: #84c85d;
    border-right-color: #84c85d;
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.br.anima::after,
.block-2.anima::after {
    border-bottom-color: #84c85d;
    border-left-color: #84c85d;
    -webkit-transition:transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.two .br {
    padding: 145px 45px 40px;
    margin-top: -110px;
}
.blockquote {
    position: relative;
    padding-left: 15px;
    line-height: 27px;
    font-size: 17px;
    color: #999999;
}
.blockquote::before {
    content: "";
    position: absolute;
    background: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: -15px;
    width: 16px;
    height: 23px;
}
.blockquote .last-letter {
    position: relative;
}
.blockquote .last-letter::after {
    content: "";
    position: absolute;
    background: url(../img/arrow.png);
    background-repeat: no-repeat;
    transform: rotate(180deg);
    background-size: 100% 100%;
    bottom: 0;
    right: -40px;
    width: 16px;
    height: 23px;
}
.blockquote-author {
    color: #84c85d;
    padding-left: 15px;
    text-transform: uppercase;
}
.mbl-img {
    position: absolute;
    right: 26%;
    bottom: -153px;
}
.bg-g {
    background: #71bf44;
    padding: 85px 35px 60px 25px;
    margin-top: -40px;
}
.bg-g p ,
.bg-g li {
    color: #fff;
}
.bg-g li {
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 55px;
}
.title {
    font-size: 22px;
    padding-left: 40px;
    text-transform: uppercase;
}
.ipad {
    z-index: 2;
    margin-top: 65px;
}
.zx {
    z-index: 2;
}
.title.mt {
    margin-top: 200px;
}
.title-g {
    font-size: 22px;
    text-transform: uppercase;
    color: #71bf44;
    margin-top: 40px;
}
.two-seg {
    font-size: 14px;
}
.flex-block span {
    font-size: 17px;
}
.flex-block img {
    margin-right: 40px;
}
.flex-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 75px;
}
.baseline {
    position: relative;
}
.baseline::before {
    content: "";
    width: calc(100% + 30px);
    height: 2px;
    background: #71bf44;
    display: block;
    margin: 10px 0 10px 15px;
}
.ttu {
    text-transform: uppercase;
}
.three .ttu {
    font-size: 17px;
}
.forth {
    background: #edf1ef;
    padding: 80px 0;
    display: flex;
    justify-content: space-around;
     align-items: center;
}
.forth .title-g {
    margin: 0;
}
.block-1,
.block-3 {
    width: 25%;
}
.block-1 {
    text-align: right;
}
.block-1 ul {
    margin-top: 25px;
    direction: rtl;
    padding-right: 20px;
}
.block-1 ul li,
.block-3 ul li {
    font-size: 17px;
}
.block-2 {
    text-align: center;
    padding: 65px 45px;
    border: 2px solid transparent;
    margin: 0 10px;
}
.block-2 span {
    font-size: 22px;
    display: block;
    color: #71bf44;
    text-transform: uppercase;
    line-height: 15px;
}
.min-line {
    display: inline-block!important;
    margin: 15px;
    width: 60px;
    height: 2px;
    background: #71bf44;
}
.block-3 ul {
    margin-top: 25px;
    padding-left: 20px;
}
.five .bg-g {
    margin-top: 0;
}
.hand-mob {
    position: absolute;
    margin-top: -85px;
    margin-left: -15px;
    width: 55%;
}
.info-block {
    text-align: center;
}
.five .info-block {
    margin-top: 400px;
}
.axur-img {
    margin-top: 50px;
    margin-bottom: -220px;
    width: 100%;
}
.six {
    background: #edf1ef;
    padding-top: 300px;
    z-index: -1;
}
.six p{
    font-size: 21px;
}
.count {
    position: absolute;
    font-size: 90px;
    color: #71bf44;
}
.count span::before {
    content: "";
    position: absolute;
    top: 22px;
    right: calc(-100% - 15px);
    width: 120px;
    height: 2px;
    background: #71bf44;
}
.count span::after {
    content: "";
    position: absolute;
    top: 64px;
    right: calc(-100% - 117px);
    width: 120px;
    height: 2px;
    background: #71bf44;
    transform: rotate(45deg);
}
.count span {
    position: relative;
    font-size: 35px;
    color: #71bf44;
    text-transform: uppercase;
    margin-left: 25px;
}
.count-img {
    width: calc(100% + 30px);
    margin-left: -15px;
}
.seven .br {
    padding: 110px 45px 160px 85px;
    margin-top: -35px;
    text-align: center;
}
.seven p{
    font-size: 21px;
}
.ipad-low {
     z-index: 2;
    margin-top: -100px;
    margin-left: 140px;
    position: absolute;
}
.mt50 {
    margin-top: 50px;
}
ul.mt50 span {
    width: 49%;
    text-align: left;
    list-style-type: none;
    display: inline-block;
    margin-bottom: 0;
}
ul.mt50 li {
    margin-bottom: 0;
}
ul.mt50 img {
    margin-bottom: 40px;
}
.eight {
    z-index: 2;
}
.nine .br {
    padding: 110px 45px 0 85px;
    margin-top: -35px;
    text-align: center;
}
.nine ul li {
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
}
.nine img {
    margin: -70px 0 -80px;
}
.ten .bg-g li {
    margin-bottom: 0;
}
.ten .ulpl ul {
    padding-left: 0;
    font-size: 15px;
}
.ten .ulpl ul li {
    line-height: 26px;
}
.ten img{
    padding-top: 100px;
}
.eleven {
    background: #edf1ef;
    padding-top: 120px;
}
.eleven img {
    margin: 40px 0 60px;
}
.eleven p{
    font-size: 21px;
}
.twelve .bg-g {
    margin-top: 0;
    padding-bottom: 115px;
}
.twelve ul li {
    margin: 0;
}
.twelve img {
    margin-top: 80px;
    margin-left: -180px;
}
.thirteen {
    z-index: -1;
}
.thirteen p{
    font-size: 21px;
    text-align: left;
}
.thirteen .br {
    padding: 110px 45px 0 85px;
    margin-top: -30px;
    text-align: center;
}
.thirteen ul li {
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
}
.thirteen img {
    margin: -70px 0 -50px;
}
.forthteen .br {
    padding: 110px 45px 0 85px;
    margin-top: -30px;
    text-align: center;
}
.forthteen ul li {
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
}
.forthteen{
    padding-bottom: 100px;
}
.forthteen p{
    font-size: 21px;
    text-align: left;
    margin-top: 20px;
}
.forthteen .container {
    text-align: center;
}
.hand-mob2 {
    position: absolute;
    right: 0;
    z-index: 10;
    margin: 25px 0 -50px;
}
.fifteen p{
    font-size: 21px;
    text-align: left;
}
.fifteen p:first-child{
    padding-top: 46px;
}
.fifteen li{
    font-size: 21px;
    text-align: left;
    line-height: 40px;
}
.fifteen img{
    padding-left: 150px;
    padding-top: 50px;
    margin: 0;
    position: relative;
    z-index: 10;
}
.footer__green-text{
    margin-top: -100px;
    background: #fff;
    height: 205px;
    line-height: 255px;
    color: #69b23e;
    font-size: 21px;
}
.mt120{
    margin-top: 120px;
}
@media (max-width: 1600px) {
   .mbl-img{
        right: 21%;
    }
}
@media (max-width: 1366px) {
    .fifteen img{
        padding-left: 50px;
    }
    .five .info-block{
        margin-top: 100px;
    }
    .ipad-low{
        margin-left: 0;
    }
}
@media (max-width: 1200px) {
  .ipad{
      margin-top: 125px;
  }
}
@media (max-width: 1024px) {
  .case-wrapper {
    padding-left: 75px;
  }
}
@media (max-width: 992px) {
    .mbl-img {
        right: 6%;
        bottom: -185px;
    }
}
@media (max-width: 767px) {
  .case-wrapper {
    padding-left: 0;
  }
  .one .logo {
		padding-top: 36%;
		width: 100%;
	}
	.one p, .five p {
		font-size: 14px;
		color: #000;
		font-weight: 600;
		margin-bottom: 30px;
	}
	.serf {
		width: 100%;
	}
	.mbl-img {
		bottom: -60px;
		width: 20%;
	}
	.two .br {
		padding: 145px 20px 40px;
		margin-top: -110px;
		text-align: justify;
	}
	.ipad {
		margin-top: 50px;
		width: 100%;
	}
	.flex-block {
		margin-top: 30px;
	}
	.baseline::before {
		width: 100%;
		margin: 10px 0;
	}
	.bg-g {
		padding: 25px 10px 60px 10px;
		margin-top: 0;
	}
	.bg-g ul {
		padding: 0 0 0 15px;
	}
	.title.mt {
		margin-top: 50px;
	}
	.forth {
		flex-direction: column;
	}
	.block-1,
	.block-3 {
		text-align: center;
		width: 100%;
	}
	.block-1 ul {
		direction: ltr;
	}
	.hand-mob {
		display: none;
	}
	.five .info-block {
		margin-top: 35px;
	}
	.axur-img {
		margin-top: 0px;
		margin-bottom: -85px;
	}
	.six {
		padding-top: 100px;
	}
	.six p {
		font-size: 17px;
	}
	.count {
		font-size: 45px;
	}
	.count-img {
		margin-top: 50px;
	}
	.seven .br {
		padding: 30px 20px 160px;
		margin-top: -35px;
	}
	.ipad-low {
		width: 100%;
		margin-top: -110px;
		margin-left: -20px;
	}
	.eight .bg-g {
		margin-top: 130px;
	}
	ul.mt50 span {
		text-align: center;
	}
	.nine .br {
		padding: 0px 15px 0 15px;
		margin-top: 0px;
	}
	.nine .col-sm-8 ul {
		padding: 0 0 25px 15px;
	}
	.nine .col-sm-8 ul li {
		font-size: 16px;
	}
	.nine img {
		margin: 0;
		width: 100%;
	}
	.ten img {
		padding-top: 25px;
		width: 100%;
	}
	.ten.first .bg-g {
		padding: 25px 10px 60px 10px;
		margin-top: 22px;
	}
	.mt120 {
		margin-top: 60px;
	}
	.title-g {
		font-size: 18px;
	}
	.eleven img {
		width: 100%;
	}
	.twelve img {
		margin-top: -85px;
		margin-left: 0;
		width: 100%;
	}
	.thirteen .br {
		padding: 30px 15px 0 15px;
	}
	.thirteen  .col-sm-8 ul {
		padding: 0 0 0 15px;
	}
	.thirteen  .col-sm-8 ul li {
		font-size: 16px;
	}
	.thirteen img {
		margin: -15px 0 0;
		width: 100%;
	}
	.hand-mob2 {
		top: 5%;
		margin: 0;
		width: 33%;
	}
	.forthteen p {
		font-size: 17px;
	}
	.forthteen {
		padding-bottom: 30px;
	}
	.eleven {
		padding-top: 0px;
	}
	.fifteen p {
		font-size: 18px;
	}
	.fifteen li {
		font-size: 17px;
	}
	.fifteen ol {
		padding-left: 15px;
	}
	.footer__green-text {
		margin-top: 0;
	}
	.block-3 ul {
		padding-left: 40px;
	}

}