@media(max-width: 1920px){
	#tech{
		padding-top: 150px;
	}
	.widthblock .logo-l{
		margin-top: 80px;
	}
	.forgirl{
		width: 680px;
	}
}
@media(max-width: 1830px){
	.circle{
	    height: 650px;
	    width: 380px;
	}
	.circle2{
	    bottom: -60px;
	    width: 466px;
	    height: 600px;
	}
	.design{
	    width: 1000px;
	    height: 785px;
	    left: -150px;
	}
	#numbers .container{
	    min-height: 890px;
	    padding-top: 180px;
	}
}
@media(max-width: 1600px){
	.forlines {
	    width: 280px;
	    height: 193.61px;
	    top: 100px;
	    right: -140px;
	}
	.notebook{
	    -webkit-background-size: 800px auto;
	    background-size: 800px auto;
	    height: 620px;
	    left: -200px;
	    top: 160px;
	}
	#tasks .container{
	    min-height: 800px;
	    padding-top: 180px;
	    padding-bottom: 50px;
	}
	.circle{
	    bottom: -180px;
	    height: 500px;
	    width: 300px;
	}
	.mobiles{
		width: 80%;
		left: 10%;
		height: 924px;
	}
	#adaptiv .container{
	    padding-top: 100px;
	    min-height: 924px;
	    padding-bottom: 500px;
	}
	.colors img{
		width: 700px;
	}
	#colors {
	    padding-top: 45px;
	    padding-bottom: 295px;
	}
	#tech{
		padding-top: 100px;
	}
	.widthblock .logo-l{
		margin-top: 50px;
	}
	.forgirl{
		width: 600px;
	}
}
@media(max-width: 1345px){
	.ovh h1{
		font-size: 50px;
	}
	h2{
		font-size: 40px;
	}
	h3{
		font-size: 26px;
	}
	p, li, .btn-brief{
		font-size: 16px;
	}
	body{
		font-size: 15px;
	}
	.btn-brief{
		width: 278px;
		margin-top: 30px;
	}
	.tech-block {
	    padding-top: 30px;
	    padding-bottom: 45px;
	    padding-left: 30px;
	    padding-right: 30px;
	}
	.widthblock{
		width: 370px;
	}
	#colors .container > p {
	    font-size: 15px;
	    max-width: 580px;
	}
	.number{
		margin-top: 40px;
	}
	.number b{
		font-size: 26px;
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.numbers{
		margin-top: 0;
		max-width: 400px;
	}
	.circle2{
	    bottom: -40px;
	    left: -30px;
	    width: 350px;
	    height: 450px;
	}
	.design{
	    width: 750px;
	    height: 589px;
	    left: -110px;
	}
	#numbers .container{
	    min-height: 700px;
	    padding-top: 100px;
	}
	.tasks ul{
		padding-top: 15px;
	}
	.tasks li{
		margin-top: 15px;
	}
	.btn-theme{
		font-size: 22px;
	}
	.logo-l {
	    width: 200px;
	    height: 63px;
	    margin-bottom: 30px;
	}
	.devices {
	    margin-left: 25px;
	    width: 140px;
	    height: 30px;
	}
	.white-block {
		width: 530px;
	    padding: 35px;
	    padding-bottom: 30px;
	}
	.white-block p{
		margin: 30px 0px;
	}
	#main{
		padding-top: 120px;
		height: 600px;
	}
	.notebook{
	    -webkit-background-size: 700px auto;
	    background-size: 700px auto;
	    height: 550px;
	    left: -230px;
	    top: 80px;
	}
	#tasks .container{
	    min-height: 670px;
	    padding-top: 150px;
	}
	.circle{
	    bottom: -120px;
	    height: 400px;
	    width: 250px;
	}
	.left-block{
		width: calc(50% - 25px);
	}
	#adaptiv .container{
	    padding-top: 60px;
	    min-height: 693px;
	    padding-bottom: 400px;
	}
	.mobiles {
	    width: 70%;
	    left: 15%;
	    height: 693px;
	}
	.marker{
		font-size: 15px;
	}
	.mobile:nth-child(2n-1) .marker:before, .mobile:nth-child(2n) .marker:after{
		width: 35px;
		height: 35px;
		-webkit-background-size: 18px;
		background-size: 18px;
	}
	.question-block {
	    width: 390px;
	}
	.tasks li:before, .question-block li:before{
		top: 8px;
	}
	.colors img{
		width: 600px;
	}
	#colors {
	    padding-bottom: 225px;
	}
	.forvideo{
		top: -170px;
	}
	#present{
		height: 640px;
	}
}

@media(max-width: 1199.97px){
	#tech{
		padding-top: 60px;
	}
	.tech-block{
		box-shadow: 25px 25px 15px 0px rgba(0, 0, 0, 0.07);
	}
	.shares{
		margin-top: 50px;
	}
	.widthblock .logo-l{
		margin-top: 30px;
	}
	.forgirl{
		width: 480px;
	}
	.forlines {
	    width: 180px;
	    height: 124.46px;
	    top: 80px;
	    right: -90px;
	}
	.left-block{
		width: calc(50% + 65px);
	}
	.notebook{
	    -webkit-background-size: 640px auto;
	    background-size: 640px auto;
	    height: 520px;
	    left: -150px;
	    top: 60px;
	}
	#tasks .container{
	    min-height: 600px;
	    padding-top: 130px;
	}
	.circle{
		right: -20px;
	    bottom: -130px;
	    height: 350px;
	    width: 220px;
	}
	.color{
		margin-left: -10%;
		height: 302px;
	}
	.colors img {
	    width: 560px;
	    left: calc(100% - 302px);
	    top: 302px;
	}
	#colors{
		padding-bottom: 200px;
	}
	.video{
		height: 550px;
	}
	#present{
		height: 550px;
	}
	.forvideo{
		top: -160px;
	}
	.first-color {
	    left: 20px;
	    bottom: 18px;
	}
	.second-color {
	    right: 20px;
	    top: 18px;
	}
	.color:nth-child(2) .second-color {
	    right: 105px;
	}
	.txt-adaptiv{
		max-width: 400px;
	}
	#adaptiv .container{
		padding-top: 50px;
	}
	.tabs{
		margin-right: 0;
		width: 420px;

	}
	.tab{
		font-size: 24px;
		height: 50px;
	}
}

@media(max-width: 991.97px){
	.mobile:nth-child(1) {
	    left: -50%;
	}
	.mobile:nth-child(4) {
	    left: 80%;
	}
	.forgirl{
		right: -150px;
		width: 450px;
	}
	.circle4{
		left: -100px;
	}
	.btn-brief {
	    width: 244px;
	    height: 52px;
	}
	.btn-brief span:before{
		width: 23px;
		height: 23px;
		top: calc(50% - 11.5px);
	}
	.btn-brief span{
		padding-left: 30px;
	}
	.techs img{
		margin-top: 15px;
	}
	.tech-block{
		padding-bottom: 30px;
	}
	.widthblock{
		width: 330px;
	}
	.widthblock .logo-l {
	    width: 130px;
	    height: 41px;
	}
	.shares {
	    margin-top: 40px;
	}
	#tech {
	    padding-top: 45px;
	}
	.ovh h1{
		font-size: 40px;
	}
	h2{
		font-size: 36px;
	}
	h3{
		font-size: 24px;
	}
	p, li, .btn-brief{
		font-size: 15px;
	}
	#colors .container > p {
	    font-size: 14px;
	}
	.number b{
		font-size: 22px;
		padding-top: 15px;
		padding-bottom: 10px;
	}
	.numbers{
		max-width: 340px;
	}
	.circle2{
	    bottom: -30px;
	    left: -50px;
	    width: 272px;
	    height: 350px;
	}
	.design{
	    width: 550px;
	    height: 432px;
	    left: -20px;
	    top: 70px;
	}
	#numbers .container{
	    min-height: 500px;
	    padding-top: 80px;
	}
	.number img{
	    height: 45px;
	}
	.btn-theme{
		font-size: 20px;
		padding-left: 30px;
		padding-right: 72px;
		-webkit-background-size: 25px;
		background-size: 25px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.logo-l {
	    width: 170px;
	    height: 53.5px;
	}
	.devices {
	    margin-left: 20px;
	    width: 110px;
	    height: 23.5px;
	}
	.white-block {
		width: 460px;
	    padding: 30px;
	    padding-bottom: 25px;
	}
	#main{
		padding-top: 100px;
    	height: 540px;
	}
	.left-block{
		width: 48%;
	}
	.notebook{
	    -webkit-background-size: 500px auto;
	    background-size: 500px auto;
	    height: 420px;
	    left: -180px;
    	top: 110px;
	}
	#tasks .container{
	    min-height: 530px;
	    padding-top: 80px;
	}
	.circle{
		right: -40px;
	    bottom: -150px;
	    height: 320px;
	    width: 200px;
	}
	.color{
		height: 224px;
	}
	.colors img {
	    width: 358px;
	    left: calc(100% - 224px);
	    top: 320px;
	}
	#colors .container > p{
		max-width: 450px;
	}
	#colors{
		padding-bottom: 150px;
	}
	.video{
		height: 480px;
	}
	#present{
		height: 480px;
	}
	.forvideo{
		top: -120px;
	}
	.first-color {
	    left: 15px;
	    bottom: 12px;
	}
	.second-color {
	    right: 15px;
	    top: 12px;
	}
	.color:nth-child(2) .second-color {
	    right: 75px;
	}
	#adaptiv .container{
	    padding-top: 40px;
	    min-height: 462px;
	    padding-bottom: 350px;
	}
	.mobiles{
		top: 5%;
		height: 565px;
	}
	.txt-adaptiv {
	    max-width: 280px;
	}
	.txt-adaptiv p{
		margin-top: 30px;
	}
	.marker {
	    font-size: 14px;
	}
	.question-block {
	    width: 320px;
	    padding: 15px;
	    margin-right: -30px;
	}
	.question-block ul{
		padding-top: 5px;
	}
	.question-block li{
		font-size: 14px;
	}
	.tasks li:before, .question-block li:before{
		top: 7px;
	}
	.play {
	    width: 70px;
	    height: 70px;
	    left: calc(50% - 35px);
	    top: calc(50% - 35px);
	}
	.tabs{
		margin-right: 0;
		width: 350px;
	}
	.tab{
		font-size: 20px;
		height: 40px;
	}
	.vision, .forgirl{
		z-index: 0;
	}
}

@media(max-width: 767.97px){
	#tech{
		padding-bottom: 50px;
	}
	.iconshare{
		margin-right: 5px;
	}
	.shares a{
		padding-left: 11px;
		padding-right: 11px;
	}
	.forgirl{
		height: 60%;
		width: 320px;
		right: -70px;
	}
	.vision {
	    top: -10%;
	    left: -40%;
	}
	.bgdesc{
		height: 55%;
	}
	.txt-desk p{
		padding-right: 0;
	}
	.txt-desk{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.tabs{
		width: 100%;
		margin-top: 25px;
	}
	.left-block{
		width: 36%;
	}
	.notebook{
	    height: 420px;
	    left: -240px;
	}
	#tasks .container{
	    padding-top: 70px;
	}
	.circle2{
	    bottom: -50px;
	    left: -80px;
	    width: 194.5px;
	    height: 250px;
	}
	.design{
	    width: 500px;
	    height: 393px;
	    left: 170px;
	    top: 80px;
	}
	#numbers .container{
	    min-height: 400px;
	    padding-top: 70px;
	    padding-bottom: 70px;
	}
	.number img{
	    height: 40px;
	}
	.color{
		height: 165px;
	}
	.color:nth-child(2n) {
	    margin-top: 60px;
	}
	.colors img {
	    width: 300px;
	    left: calc(100% - 165px);
	    top: 225px;
	}
	#colors .container > p{
		max-width: 330px;
	}
	.video{
		height: 380px;
	}
	/*#present{
		height: 520px;
	}*/
	#present{
		height: 400px;
	}
	.color p{
		font-size: 13px;
	}
	.first-color {
	    left: 12px;
	    bottom: 6px;
	}
	.second-color {
	    right: 12px;
	    top: 6px;
	}
	.color:nth-child(2) .second-color {
	    right: 57px;
	}
	#adaptiv .container{
	    padding-top: 40px;
	    min-height: 500px;
	    padding-bottom: 680px;
	}
	.mobiles{
		top: auto;
		bottom: 100px;
		height: 550px;
		width: 100%;
	}
	.txt-adaptiv {
	    max-width: 100%;
	}
	.txt-adaptiv p{
		margin-top: 30px;
	}
	.marker {
	    font-size: 14px;
	}
	.mobile:nth-child(1){
		left: -28%;
		top: 10%;
	}
	.mobile:nth-child(2) {
	    left: -26%;
	    top: 60%;
	}
	.mobile:nth-child(4) {
	    left: 29%;
	    top: 58%;
	}
	.mobile:nth-child(1) .marker {
	    top: -2%;
	    left: 25%;
	}
	.mobile:nth-child(2) .marker {
	    top: 0%;
	    left: 10%;
	}
	.mobile:nth-child(3) .marker {
	    top: 5%;
	    left: 20%;
	}
	.mobile:nth-child(4) .marker {
	    top: 10%;
	    left: 30%;
	}
	#adaptiv {
	    -webkit-background-size: auto 50%;
	    background-size: auto 50%;
	}
	.video{
		-ms-align-items: flex-end !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}
	.question-block {
	    margin-right: 0px;
	    margin-bottom: -150px;
	}
}

@media(max-width: 575.97px){
	.forgirl{
		display: none;
	}
	.btn-brief {
	    width: 212px;
	    height: 45px;
	}
	.widthblock{
		width: 290px;
		margin: 0 auto;
	}
	.tech-block{
		padding: 25px;
	}
	.tech-block h2{
		margin: 0 auto;
	}
	.ovh h1{
		font-size: 36px;
	}
	h2{
		font-size: 32px;
	}
	h3{
		font-size: 20px;
	}
	p, .btn-brief{
		font-size: 14px;
	}
	.question-block{
		margin-bottom: -120px;
		width: 300px;
	}
	.question-block li{
		font-size: 13px;
		margin-top: 10px;
	}
	.design{
	    left: calc(50% - 250px);
	    top: 30px;
	}
	#numbers .container{
	    min-height: auto;
	    padding-top: 50px;
	    padding-bottom: 500px;
	}
	#numbers .left-block{
		height: auto;
	}
	.right-block{
		height: 460px;
	}
	.numbers{
		width: auto;
		max-width: calc(100% + 30px);
	}
	.btn-brief, .widthblock .btn-theme{
		margin: 0 auto;
	}
	.btn-brief{
		margin-top: 25px;
		margin-bottom: 20px;
	}
	.btn-theme{
		font-size: 18px;
		padding-left: 25px;
		padding-right: 60px;
		-webkit-background-size: 20px;
		background-size: 20px;
		padding-top: 11px;
		padding-bottom: 11px;
		background-position: right 25px center;
	}
	.logo-l {
	    width: 140px;
	    height: 44.1px;
	}
	.devices {
	    margin-left: 20px;
	    width: 90px;
	    height: 19.23px;
	}
	.white-block {
		width: 380px;
	    padding: 25px;
	}
	#main{
		padding-top: 100px;
		height: 470px;
	}
	.left-block{
		width: 100%;
	}
	#tasks .left-block{
		height: 420px;
		top: auto;
		bottom: 0;
	}
	.notebook{
	    -webkit-background-size: 430px auto;
	    background-size: 430px auto;
	    height: 350px;
	    top: auto;
	    bottom: 30px;
	    left: 0px;
	}
	#tasks .container{
	    min-height: auto;
	    padding-top: 80px;
	    padding-bottom: 460px;
	}
	.circle{
		display: none;
	}
	.allblocks{
	    -webkit-flex-wrap: wrap !important;
	    -moz-flex-wrap: wrap !important;
	    -ms-flex-wrap: wrap !important;
	    -o-flex-wrap: wrap !important;
	    flex-wrap: wrap !important;
	    height: calc(100% + 500px);
	}
	.colors{
		justify-content: center;
		margin-top: 10px;
	}
	.color{
		height: 230px;
		width: 48.650%;
		margin-left: 0%;
		margin-top: 30px;
	}
	.color:nth-child(2n) {
	    margin-left: -15%;
	    margin-top: 110px;
	}
	.colors img {
	    display: none;
	}
	#colors .container > p{
		max-width: 100%;
	}
	.video{
		height: 320px;
	}
	/*#present{
		height: 440px;
	}*/
	#present{
		height: 320px;
	}
	.color p{
		font-size: 14px;
	}
	.first-color {
	    left: 12px;
	    bottom: 9px;
	}
	.second-color {
	    right: 12px;
	    top: 9px;
	}
	.color:nth-child(2) .second-color {
	    right: 12px;
	}
	#adaptiv .container{
	    padding-top: 40px;
	    min-height: auto;
	    padding-bottom: 580px;
	}
	.mobiles{
		top: auto;
		bottom: 100px;
		height: 450px;
		width: 80%;
		left: 10%;
	}
	.marker {
	    font-size: 13px;
	}
	.mobile:nth-child(3) {
	    left: 50%;
	    top: -2%;
	}
	.mobile:nth-child(4) {
	    left: 38%;
	    top: 58%;
	}
	.mobile:nth-child(1) .marker {
	    left: 24%;
	}
	.mobile:nth-child(2) .marker {
	    top: 70%;
	    left: 25%;
	}
	.mobile:nth-child(3) .marker {
	    top: 10%;
	    left: 7%;
	}
	.mobile:nth-child(4) .marker {
	    top: 10%;
	    left: 28%;
	}
}

@media(max-width: 450px){
	.btn-brief{
		width: 205px;
		height: 44px;
	}
	.ovh h1{
		font-size: 30px;
	}
	h2{
		font-size: 26px;
	}
	p, li{
		font-size: 14px;
	}
	.number b{
		font-size: 20px;
	}
	.btn-theme{
		font-size: 17px;
		margin-right: 30px;
	}
	.devices {
	    margin-top: 15px;
	    margin-left: 0;
	}
	.white-block {
		width: 340px;
	}
	#main{
		height: 500px;
	}
	#tasks .left-block{
		height: 300px;
		top: auto;
		bottom: 0;
	}
	.notebook{
	    -webkit-background-size: 300px auto;
	    background-size: 300px auto;
	    height: 250px;
	    top: auto;
	    bottom: 20px;
	    left: 0px;
	}
	#tasks .container{
	    padding-bottom: 330px;
	}
	.design{
	    width: 400px;
	    height: 314px;
	    left: calc(50% - 200px);
	}
	#numbers .container{
	    padding-bottom: 390px;
	}
	.right-block{
		height: 380px;
	}
	.color{
		height: 180px;
	}
	.color:nth-child(2n) {
	    margin-top: 80px;
	}
	.video{
		height: 280px;
	}
	/*#present{
		height: 380px;
	}*/
	#present{
		height: 280px;
	}
	.color p{
		font-size: 13px;
	}
	#colors{
		padding-top: 65px;
	}
	#adaptiv .container{
    	padding-bottom: 980px;
	}
	.mobiles{
		bottom: 500px;
	}
	.mobile:nth-child(1) {
	    left: -10%;
	    top: 50%;
	}
	.mobile:nth-child(2) {
	    left: -5%;
	    top: 100%;
	}
	.mobile:nth-child(3) {
	    left: 4%;
	    top: 0%;
	}
	.mobile:nth-child(4) {
	    left: -9%;
	    top: 150%;
	}
	.mobile:nth-child(1) .marker {
	    left: 45%;
	    top: 20%;
	}
	.mobile:nth-child(2) .marker {
	    top: 45%;
	    left: 10%;
	}
	.mobile:nth-child(3) .marker {
	    top: 10%;
	    left: 40%;
	}
	.mobile:nth-child(4) .marker {
	    top: 50%;
	    left: 10%;
	}
}

@media(max-width: 400px){
	.tab{
		font-size: 18px;
		height: 37px;
	}
	.mobiles{
		left: 0;
	}
	.white-block {
		width: 290px;
	}
	p, #colors .container > p {
		font-size: 13px;
	}
	.design{
	    width: 300px;
	    height: 236px;
	    left: calc(50% - 150px);
	}
	#numbers .container{
	    padding-bottom: 330px;
	}
	.right-block{
		height: 300px;
	}
	.color{
		height: 190px;
		width: 60%;
	}
	.color:nth-child(2n) {
	    margin-left: -20%;
	    margin-top: 90px;
	}
	#colors {
	    padding-top: 55px;
	}
	.logo.works-post span p{
		font-size: 12px;
	}
}

@media(max-width: 360px){
	.mobiles{
		width: 100%;
		height: 380px;
		bottom: 440px;
	}
	.mobile:nth-child(3) .marker {
	    top: 8%;
	    left: 36%;
	}
	.mobile:nth-child(1) .marker {
	    left: 42%;
	    top: 18%;
	}
	#adaptiv .container{
		padding-bottom: 850px;
	}
}