@font-face {
    font-family: 'Dela Gothic One';
    src: url('../fonts/Dela_Gothic_One/DelaGothicOne-Regular.eot');
    src: local('Dela Gothic One'),
        url('../fonts/Dela_Gothic_One/DelaGothicOne-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Dela_Gothic_One/DelaGothicOne-Regular.woff2') format('woff2'),
        url('../fonts/Dela_Gothic_One/DelaGothicOne-Regular.woff') format('woff'),
        url('../fonts/Dela_Gothic_One/DelaGothicOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Regular.eot');
    src: local('Inter'),
        url('../fonts/Inter/Inter-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter/Inter-Regular.woff') format('woff'),
        url('../fonts/Inter/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*BANNER TOP*/

#bannerTop{
	width: 100vw;
	height: 52.778vw;/*760px*/
	background: linear-gradient(180deg, var(--main-color, #0066FF) -10.14%, #91BDFF 12.23%, #B8D5FF 36.9%, #93BEFF 63.86%, var(--main-color, #0066FF) 100%);
	margin: 0;
	padding: 0;
	text-align: left;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
}

.bannerimage{
	position: relative;
	width: 64.652vw;/*930px*/
	height: 33.68vw;/*485px*/
	margin: 2.43vw auto 0;/*35px*/
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}
.bannerimage h1{
	position: absolute;
	display: block;
	width: 24.3055vw;/*350px*/
	font-family: 'Dela Gothic One';
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 400;
	font-size: var(--h1-size, 50px);/*4.1667vw;/*60px*/
	line-height: 1.3em;/*75px*/
	top: 5.069444vw;/*73px*/
	left: 20.2083vw;/*291px*/
}
.bannerimage figure:nth-of-type(1){
	position: relative;
	width: 100%;
	height: 100%;
}
.bannerimage figure:nth-of-type(1) img{
	position: relative;
	width: 100%;
	height: 100%;
}
.bannerimage figure:nth-of-type(2){
	position: absolute;
	width: 42.2vw;/*<608px*/
	height: 22.49vw;/*<324px*/
	top: 1.6076vw;/*23px*/
	left: 11.1112vw;/*160px*/
	overflow: hidden;
}
.bannerimage figure:nth-of-type(2) img{
	position: relative;
	width: 100%;
	height: 140%;
	top: -20%;
	left: 0;
}
.bannerimage figure:nth-of-type(3){
	position: absolute;
	width: 32.5vw;/*468px*/
	height: 1.8vw;/*26px*/
	top: 2.56944vw;/*37px*/
	left: 16.11111vw;/*232px*/
}
.bannerimage figure:nth-of-type(3) img{
	position: relative;
	width: 100%;
	height: 100%;
}
.bannerimage span{
	position: absolute;
	font-family: 'Dela Gothic One';
	color: #000000;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 0.76388vw;/*11px*/
	line-height: 0.9722vw;/*14px*/
	top: 24.5833vw;/*354px*/
	left: 29.7vw;
	overflow: hidden;
}

#bannerbtn{
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 22.916vw;/*330px*/
	height: 4.166;/*60px*/
	background-color: var(--second-color, #FF0066);
	border-radius: 0.5555vw;/*8px;*/
	top: 2.778vw;/*40px*/
	box-sizing: border-box;
	box-shadow: none;
}
#bannerbtn a{
	display: block;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	font-weight: 600;
	font-size: var(--p-size, 16px);/*1.388vw;/*20px*/
	line-height: 4.166vw;/*60px*/
	cursor: pointer;
}
#bannerbtn:hover{
	box-shadow: 0 0 5px rgba(255,255,255,0.4);
}
#bannerbtn:active{
	box-shadow: inset 0 0 5px rgba(255,255,255,0.7);
	/*transform: scale(0.998);*/
}

/*WHY SITES*/
#whySites{
	width: 82vw;
	position: relative;
	padding: 6.94vw 9vw;/*100px 130px */
	color: #000;
	text-align: center;
	margin: 0 auto;
}
#whySites h2{
	font-family: 'Inter';
	font-size: var(--h2-size, 40px);/*2.778vw;/*40px*/
	font-weight: 700;
	line-height: 1em;/*48px;*/
	margin-bottom: var(--marg-h-bottom, 60px);/* 4.236vw;/*61px*/
}
#whySites p{
	text-align: left;
	font-weight: 400;
	font-size: var(--p-size, 16px);/*1.25vw;/*18px*/
	line-height: 1.5em;/*28px;*/
}

/*VITRINA*/
#vitrina{
	padding: 0 9vw 4vw;/*0 130px 157px */
}
#vitrina h2{
	font-family: 'Inter';
	font-size: var(--h2-size, 40px);/*40px*/
	font-weight: 700;
	line-height: 1em;/*48px;*/
	margin-bottom: var(--marg-h-bottom, 60px);/*72px*/
}
#portfolio{
	width: 82vw;/*1180px*/
	height: 113.75vw;/*1638px*/
	margin: 0 auto;
	display: grid;
	grid-template-columns: 26.3888vw 26.3888vw 26.3888vw;/*380px*/
	grid-template-rows: repeat(18, 1fr);
	gap: 1.389vw;/*20px*/
	grid-template-areas: "c1 c2 c3"
						 "c1 c2 c3"
						 "c1 c2 c3"
						 "c1 c2 c3"
						 "c1 c2 c3"
						 "c4 c2 c3"
						 "c4 c2 c6"
						 "c4 c5 c6"
						 "c4 c5 c6"
						 "c4 c5 c6"
						 "c4 c5 c6"
						 "c7 c5 c9"
						 "c7 c5 c9"
						 "c7 c8 c9"
						 "c7 c8 c9"
						 "c7 c8 c9"
						 "c7 c8 c9"
						 "c7 c8 c9";
}
#portfolio .cell{
	position: relative;
	width: 26.3888vw;/*380px*/
	background-position: 0 0;
	background-size: 100% 100%;
	border-radius: 1.1111vw;/*16px;*/
	text-align: center;
	box-sizing: border-box;
}
#portfolio .cell span{
	display: block;
	position: relative;
	font-style: normal;
	font-weight: bold;
	font-size:  var(--h3-size, 36px);/*2.08vw;/*30px;*/
	line-height: 1em;/*46px */
	color: #FFFFFF;
	margin: 0 auto;
}
#portfolio .cell:nth-of-type(1){
	grid-area: c1;
	/*height: 30.416vw;438px*/
	background-image: url("../img/sites/turagenstvo_full.jpg");
}
#portfolio .cell:nth-of-type(1) span{
	width: 20.2084vw;/*291px*/
	top: 23.542vw;/*340px*/
}
#portfolio .cell:nth-of-type(2){
	grid-area: c2;
	/*height: 43.75vw;630px*/
	background-image: url("../img/sites/prokat_avto_full.jpg");
	background-position: 50% 0;
	background-size: 250% 100%;
}
#portfolio .cell:nth-of-type(2) span{
	width: 15.3473vw;/*221px*/
	top: 33.125vw;/*477px*/
}
#portfolio .cell:nth-of-type(3){
	grid-area: c3;
	/*height: 36.805vw;530px*/
	background-image: url("../img/sites/welcome_crimea_full.jpg");
	background-position: 50% 0;
	background-size: 250% 100%;
}
#portfolio .cell:nth-of-type(3) span{
	width: 15.3472vw;/*221px*/
	top: 26.73611vw;/*385px*/
}
#portfolio .cell:nth-of-type(4){
	grid-area: c4;
	/*height: 36.805vw;530px*/
	background-image: url("../img/sites/sistema_bronirovania_fullsize.jpg");
	background-position: 0 0;
	background-size: 100% 100%;
}
#portfolio .cell:nth-of-type(4) span{
	width: 17.0139vw;/*245px*/
	top: 23.0555vw;/*332px*/
}
#portfolio .cell:nth-of-type(5){
	grid-area: c5;
	/*height: 36.805vw;530px*/
	background-image: url("../img/sites/sistema_bronirovania_cheapspace_fullsize.jpg");
	background-position: 50% 0;
	background-size: 200% 100%;
}
#portfolio .cell:nth-of-type(5) span{
	width: 17.0139vw;/*245px*/
	top: 22.3611vw;/*322px*/
}
#portfolio .cell:nth-of-type(6){
	grid-area: c6;
	/*height: 30.4167vw;438px*/
	background-image: url("../img/sites/sistema_bronirovania_cheaptrip_fullsize.jpg");
	background-position: 0 50%;
	background-size: 100% 130%;
}
#portfolio .cell:nth-of-type(6) span{
	width: 17.0139vw;/*245px*/
	top: 15.694vw;/*226px*/
}
#portfolio .cell:nth-of-type(7){
	grid-area: c7;
	/*height: 43.68vw;629px*/
	background-image: url("../img/sites/avtomatizirovanaya_zapravka_fullsize.jpg");
	background-position: 85% 30%;
	background-size: 130% 120%;
}
#portfolio .cell:nth-of-type(7) span{
	width: 25.972vw;/*374px*/
	top: 29.375vw;/*423px*/
}
#portfolio .cell:nth-of-type(8){
	grid-area: c8;
	/*height: 30.4167vw;438px*/
	background-image: url("../img/sites/razmen_deneg_fullsize.jpg");
	background-position: 0 50%;
	background-size: 100% 180%;
}
#portfolio .cell:nth-of-type(8) span{
	width: 18.1945vw;/*262px*/
	top: 17.70833vw;/*255px*/
}
#portfolio .cell:nth-of-type(9){
	grid-area: c9;
	/*height: 43.6805vw;629px*/
	background-image: url("../img/sites/cabrio_service_fullsize.jpg");
	background-position: 0 0;
	background-size: 100% 100%;
}
#portfolio .cell:nth-of-type(9) span{
	width: 18.1945vw;/*262px*/
	top: 32.56944vw;/*469px*/
}

#questions{
	margin-bottom: 6.945vw;/*100px*/
}
#questions p a{
	color: rgba(0, 102, 255, 1);
}


/*POST FORM*/
#formcontainer{
	/*display: block;*/
	position: fixed;
	left: 32vw;
	top: 5vw;
	width: 36.67vw;/*528px*/
	height: 49.02vw;/*562px*/
	background: rgba(217, 232, 255, 0.64);
	backdrop-filter: blur(30px);
	border-radius: 1.1111vw;/*16px;*/
	z-index: 12;
}
#sitesform{
	position: relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
/*close button*/
.closebtn{
	position: absolute;
	top: 5%;
	left: 90%;
	width: 1.95vw;
	height: 1.95vw;
	cursor: pointer;
	z-index: 13;
	background-image: url("../img/pechati/close_buton_black.png");
	background-size: 100%;
	background-repeat: no-repeat;
}
.closebtn:hover{
	top: calc(5% - 1px);
	filter: drop-shadow(0px 3px 3px rgba(99, 99, 99, 0.3));
}
.closebtn:active{
	top: 5%;
	filter: drop-shadow(0px 1px 1px rgba(99, 99, 99, 0.3));
}
#sitesform h3{
	position: relative;
	width: 23.1944vw;/*334px;*/
	top: 2.152777vw;/*31px;*/
	left: 6.9444vw;/*100px*/
	/*font-family: 'IBM Plex Sans Thai';*/
	font-style: normal;
	font-weight: 500;
	font-size: var(--form-text-size, 20px);/* 1.25vw;/*18px;*/
	line-height: 1em;/* 23px */
	text-align: center;
	color: #000000;
}
#sitesform textarea{
	position: absolute;
	width: 30.4167vw;/*438px;*/
	height: 6.9445vw;/* 100px;*/
	top: 6.3889vw;/*92px*/
	left: 3.0555vw;/*44px*/
	background: #FFFFFF;
	font-weight: 500;
	font-size: var(--form-text-size, 20px);/*14px;*/
	line-height:  1em;/*18px */
	text-align: left;
	color: #B3B3B3;
}

#sitesform input{
	position: absolute;
	display: block;
	width: 19.0972vw;/*275px;*/
	height: 3.2639vw;/*47px;*/
	left: 8.68vw;/*125px*/
	border-radius: 0.55555vw;/*8px;*/
	font-weight: 600;
	font-size:  var(--form-text-size, 20px);/*17px;*/
	line-height: 1em;/*20px;*/
	border: 0;
	color: #FFF;
	transition: all 0.2s;
	cursor: pointer;
	margin: 0;
}

#sitesform input[type=button][name=max]{
	background-color: #7360F2;
	top: 15.7vw;/*221px*/
}
#sitesform input[type=button][name=whatsapp]{
	background-color: #32BB46;
	top: 20.6vw;/*292px*/
}
#sitesform input[type=button][name=telegram]{
	background-color: #3F8FFE;
	top: 25.6vw;/*363px*/
}
#sitesform input[type=button][name=email]{
	background-color: #0059C1;
	top: 30.5vw;/*434px*/
}
#sitesform input[type=button][name=max]:hover{
	background-color: rgb(135,126,255);
}
#sitesform input[type=button][name=whatsapp]:hover{
	background-color: rgb(70,207,90);
}
#sitesform input[type=button][name=telegram]:hover{
	background-color: rgb(83,163,255);
}
#sitesform input[type=button][name=email]:hover{
	background-color: rgb(20,110,213);
}
#sitesform input[type=button]:active{
	box-shadow: inset 0px 0px 9px rgba(199,199,199,1);
}
#sitesform p.sitesformtel{
	position: absolute;
	top: 35.4167vw;/*510px*/
	left: 8.055vw;/*116px*/
	width: 20.625vw;/*297px*/
	font-weight: 500;
	font-size:  var(--form-text-size, 20px);/*18px */
	line-height: 1em;/* 23px */
	text-align: center;
	color: #000000;
}

#sitesform p.sitesformtel.politics_note{
	top: 40vw;/*510px*/
	font-size: 12px;
}
#sitesform p.sitesformtel.politics_note a{
	text-decoration: underline;
}

/*form order OK*/
/*#orderok{
	text-align: center;
}
#orderok img{
	position: relative;
	margin: 12% auto;
}
#orderok p{
	font-size: 2.08333vw;
	margin-bottom: 5%;
}

#shirmforall{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 11;
	box-sizing: border-box;
	background: rgba(255,255,255,0.1);
}*/

/* ADAPTIVE BIG SCREENS */

@media screen and (min-width: 1440px){

	/*BANNER TOP*/
	#bannerTop{
		height: 760px;
	}

	.bannerimage{
		width: 930px;
		height: 485px;
		margin: 35px auto 0;/**/
	}
	.bannerimage h1{
		width: 350px;
		font-size: var(--h1-size, 50px);
		line-height: 1.3em;
		top: 73px;
		left: 291px;
	}
	.bannerimage figure:nth-of-type(2){
		width: 608px;
		height: 324px;
		top: 23px;
		left: 160px;
	}
	.bannerimage figure:nth-of-type(3){
		width: 468px;
		height: 26px;
		top: 37px;
		left: 232px;
	}
	.bannerimage span{
		font-size: 11px;
		line-height: 14px;
		top: 354px;
		left: 425px;
	}

	.bannerbtn{
		width: 330px;
		height: 60px;
		border-radius: 8px;
		top: 40px;
	}
	.bannerbtn span{
		font-size:  var(--p-size, 16px);
		line-height: 60px;
	}

	/*WHY SITES*/
	#whySites{
		width: 1180px;
		padding: 100px 130px;
	}
	#whySites h2{
		font-size: var(--h2-size, 40px);
		font-weight: 700;
		line-height: 1em;
		margin-bottom: var(--marg-h-bottom, 60px);
	}
	#whySites p{
		font-size:  var(--p-size, 16px);
		line-height: 1.5em;
	}

	/*VITRINA*/
	#vitrina{
		padding: 0 130px 60px;
	}
	#vitrina h2{
		font-size: var(--h2-size, 40px);
		line-height: 1em;
		margin-bottom: var(--marg-h-bottom, 60px);
	}
	#portfolio{
		width: 1180px;
		height: 1638px;
		grid-template-columns: 380px 380px 380px;
		gap: 20px;
	}
	#portfolio .cell{
		width: 380px;
		border-radius: 16px;
	}
	#portfolio .cell span{
		font-size: var(--h3-size, 36px);
		line-height: 1em;
	}

	#portfolio .cell:nth-of-type(1) span{
		width: 291px;
		top: 340px;
	}
	#portfolio .cell:nth-of-type(2) span{
		width: 221px;
		top: 477px;
	}
	#portfolio .cell:nth-of-type(3) span{
		width: 221px;
		top: 385px;
	}
	#portfolio .cell:nth-of-type(4) span{
		width: 245px;
		top: 332px;
	}
	#portfolio .cell:nth-of-type(5) span{
		width: 245px;
		top: 322px;
	}
	#portfolio .cell:nth-of-type(6) span{
		width:245px;
		top: 226px;
	}
	#portfolio .cell:nth-of-type(7) span{
		width: 374px;
		top: 423px;
	}
	#portfolio .cell:nth-of-type(8) span{
		width: 262px;
		top: 255px;
	}
	#portfolio .cell:nth-of-type(9) span{
		width: 262px;
		top: 469px;
	}

	#questions{
		margin-bottom: 100px;
	}

	/*POST FORM*/

	#formcontainer{
		left: calc((100vw - 528px)/2);
		top: 70px;
		width: 528px;
		height: 562px;
		border-radius: 16px;
	}
	.closebtn{
		width: 28px;
		height: 28px;
	}
	#sitesform h3{
		width: 334px;
		top: 31px;
		left: 100px;
		font-size: var(--form-text-size, 20px);
		line-height: 1em;
	}
	#sitesform textarea{
		width: 438px;
		height: 100px;
		top: 92px;
		left: 44px;
		font-size: var(--form-text-size, 20px);
		line-height: 1em;
	}

	#sitesform input{
		width: 275px;
		height: 47px;
		left: 125px;
		border-radius: 8px;
		font-size: var(--form-text-size, 20px);
		line-height: 1em;
	}

	#sitesform input[type=button][name=viber]{
		top: 225px;
	}
	#sitesform input[type=button][name=whatsapp]{
		top: 296px;
	}
	#sitesform input[type=button][name=telegram]{
		top: 367px;
	}
	#sitesform input[type=button][name=email]{
		top: 438px;
	}
	#sitesform p.sitesformtel{
		top: 514px;
		left: 116px;
		width: 297px;
		font-size: var(--form-text-size, 20px);
		line-height: 1em;
	}
}


/********** ADAPTIVE MOBILE SCREEN **********/

@media handheld and (orientation: portrait) and (min-resolution: 1.2dppx), all and (max-width: 540px){

	#wrapper{
		background-color: #CDCDCD;
		width: 100vw;
	}
	section{
		background-color: #FFFFFF;
		margin-bottom: 1.0667vw;/*4px*/
	}
	
	#bannerTop{
		height: 77vw;
	}

	.bannerimage{
		width: 80vw;
		height: 42vw;
		margin: 0 auto 0;
	}
	.bannerimage h1{
		width: 46vw;
		font-size: var(--h1-size, 29px);
		line-height: 1.1em;
		top: 3vw;
		left: 17.5vw;
	}
	.bannerimage figure:nth-of-type(2){
		width: 52.3vw;
		height: 27vw;
		top: 1.5vw;
		left: 13.77vw;
	}
	.bannerimage figure:nth-of-type(3){
		position: absolute;
		width: 42.5vw;
		height: 2.2vw;
		top: 1.4vw;
		left: 18vw;
	}
	.bannerimage span{
		font-size: 2.93vw;
		line-height: 1em;
		top: 29vw;
		left: 30vw;
	}

	#bannerbtn{
		width: 50vw;
		height: 7vw;
		border-radius: 1vw;
		top: 5.5vw;
	}
	#bannerbtn a{
		font-size: var(--p-size, 16px);
		line-height: 7vw;
	}

	/*WHY SITES*/
	#whySites{
		width: 88vw;
		padding: var(--marg-h-top, 26px) 6vw;
		margin-bottom: 1.0667vw;/*4px*/
	}
	#whySites h2{
		font-family: 'Inter';
		font-size: var(--h2-size, 23px);
		font-weight: 700;
		line-height: 1.2em;
		margin-bottom: var(--marg-h-bottom, 16px);
	}
	#whySites p{
		font-size: var(--p-size, 16px);
		line-height: 1.5em;
	}

	/*VITRINA*/
	#vitrina{
		padding: var(--marg-h-top, 26px) 6vw var(--marg-h-top, 26px);
		--cel-width: 28.3vw;
	}
	#vitrina h2{
		font-family: 'Inter';
		font-size: var(--h2-size, 23px);
		font-weight: 700;
		line-height: 1.2em;
		margin-bottom: var(--marg-h-bottom, 16px);
	}
	#portfolio{
		width: 88vw;
		height: 113.75vw;
		margin: 0 auto;
		display: grid;
		grid-template-columns: var(--cel-width)  var(--cel-width) var(--cel-width);/* 26.3888vw 26.3888vw 26.3888vw;/*380px*/
		grid-template-rows: repeat(18, 1fr);
		gap: 1.389vw;/*20px*/
		grid-template-areas: "c1 c2 c3"
							 "c1 c2 c3"
							 "c1 c2 c3"
							 "c1 c2 c3"
							 "c1 c2 c3"
							 "c4 c2 c3"
							 "c4 c2 c6"
							 "c4 c5 c6"
							 "c4 c5 c6"
							 "c4 c5 c6"
							 "c4 c5 c6"
							 "c7 c5 c9"
							 "c7 c5 c9"
							 "c7 c8 c9"
							 "c7 c8 c9"
							 "c7 c8 c9"
							 "c7 c8 c9"
							 "c7 c8 c9";
	}
	#portfolio .cell{
		width:  var(--cel-width);
		background-position: 0 0;
		background-size: 100% 100%;
		border-radius: 1.1111vw;/*16px;*/
	}
	#portfolio .cell span{
		font-size:  calc(var(--p-size, 16px) - 1px);
		line-height: 1em;
		width: var(--cel-width, 28px);
	}

	#portfolio .cell:nth-of-type(1) span{
		width: var(--cel-width, 28px);
		top: 20.5vw;
	}
	#portfolio .cell:nth-of-type(2) span{
		width: var(--cel-width, 28px);
		top: 33vw;
	}
	#portfolio .cell:nth-of-type(3) span{
		width: var(--cel-width, 28px);
		top: 27vw;
	}
	#portfolio .cell:nth-of-type(4) span{
		width: var(--cel-width, 28px);
		top: 22.2vw;
	}
	#portfolio .cell:nth-of-type(5) span{
		width: var(--cel-width, 28px);
		top: 22.3611vw;
	}
	#portfolio .cell:nth-of-type(6) span{
		width: var(--cel-width, 28px);
		top: 15.694vw;
	}
	#portfolio .cell:nth-of-type(7) span{
		width: var(--cel-width, 28px);
		top: 29.375vw;
	}
	#portfolio .cell:nth-of-type(8) span{
		width: 20vw;
		top: 16.5vw;
	}
	#portfolio .cell:nth-of-type(9) span{
		width: 16vw;
		top: 29.5vw;
	}

	#questions{
		margin-bottom: var(--marg-h-top, 26px);
	}
	#questions p a{
		color: rgba(0, 102, 255, 1);
	}


	/*POST FORM*/
	#formcontainer{
		position: fixed;
		left: 32vw;
		top: 5vw;
		width: 36.67vw;
		height: 39.02vw;
		background: rgba(217, 232, 255, 0.64);
		backdrop-filter: blur(30px);
		border-radius: 1.1111vw;
		z-index: 12;
	}
	#sitesform{
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	/*close button*/
	.closebtn{
		top: 5%;
		left: 90%;
		width: 1.95vw;
		height: 1.95vw;
	}
	.closebtn:hover{
		top: calc(5% - 1px);
	}
	.closebtn:active{
		top: 5%;
	}
	#sitesform h3{
		width: 23.1944vw;
		top: 2.152777vw;
		left: 6.9444vw;
		/*font-family: 'IBM Plex Sans Thai';*/
		font-weight: 500;
		font-size: var(--form-text-size, 20px);
		line-height: 1em;
	}
	#sitesform textarea{
		width: 30.4167vw;
		height: 6.9445vw;
		top: 6.3889vw;
		left: 3.0555vw;
		font-size: var(--form-text-size, 20px);
		line-height:  1em;
	}

	#sitesform input{
		width: 19.0972vw;
		height: 3.2639vw;
		left: 8.68vw;
		border-radius: 0.55555vw;
		font-weight: 600;
		font-size:  var(--form-text-size, 20px);
		line-height: 1em;
	}

	#sitesform input[type=button][name=viber]{
		background-color: #7360F2;
		top: 15.7vw;
	}
	#sitesform input[type=button][name=whatsapp]{
		background-color: #32BB46;
		top: 20.6vw;
	}
	#sitesform input[type=button][name=telegram]{
		background-color: #3F8FFE;
		top: 25.6vw;
	}
	#sitesform input[type=button][name=email]{
		background-color: #0059C1;
		top: 30.5vw;
	}
	#sitesform input[type=button]:active{
		box-shadow: inset 0px 0px 9px rgba(199,199,199,1);
	}
	#sitesform p.sitesformtel{
		top: 35.4167vw;
		left: 8.055vw;/
		width: 20.625vw;
		font-size:  var(--form-text-size, 20px);/*18px */
		line-height: 1em;
	}

}