body{
	font-family: 'IBM Plex Sans Thai', 'roboto', sans-serif;
}

#wrapper{
	width: 100vw;
	padding: 0;
	text-align: center;
	font-size: 18px;
	font-family: 'roboto', sans-serif;
	margin: 0;
}
a{
	text-decoration: none;
	color: black;
}

/*HEADER*/
#header{
	position: relative;
	background-color:  rgba(0,102,255,0);
	width: 100%;
	height: 6.25vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.headerside{
	/*position: relative;*/
	width: 9vw;
	box-sizing: border-box;
}
#headerlogo{
	width: 6.944vw;/*100px*/
	height: 3.8361vw;/*55.24px*/
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
#headerlogo img{
	position: absolute;
	left: 0;
	width: 4.861vw;/*70px*/
	height: 3.8361vw;/*55.24px*/
}
.header-line{
	height: 73%;
	width: 1px;
	box-sizing: border-box;
	background-color: white;
}
#headertext{
	align-self: flex-start;
	position: relative;
	width: 70.27765vw;
	height: 100%;
	color: #FFFFFF;
}
#headertext p{	
	position: absolute;
	top:  2vw;/*29px*/
	right: 2.083vw;/*32px*/
	text-align: right;
	font-weight: 500;
	font-size: 1.3889vw;/*20px*/
	line-height: 2.2916vw;/*33px*/
	/*padding-right: 2.083vw;*/
	color: #FFFFFF;
}
#headertext p span{	
	font-weight: 500;
	font-size: 1.3889vw;/*20px*/
	line-height: 2.2916vw;/*33px*/
	color: #FFFFFF;
}
#headertext a{
	color: #FFFFFF;
}
#gamburger{
	position: relative;
	width: 4.5138vw;/*65px*/
	height: 100%;
	box-sizing: border-box;
	font-size: 0px;
	line-height: 0px;
	padding: 0;
	margin: 0;
}
#gamburger figure{
	position: absolute;
	width: 2.361vw;/*34px*/
	height: 1.667vw;/*24px*/
	cursor: pointer;
	right: 0;
	top: 2vw;/*29px*/
	box-sizing: border-box;
}
#gamburger img{
	width: 100%;
	height: 100%;
}


/*MENU*/
#mainmenu{	
	position: absolute;
	top: 0;
	right: 6.736vw;/*97px;*/
	text-align: left;
	width: 27vw;/*389px;*/
	padding: 3.8194vw 2.9861vw 0.5vw calc(4.3055vw - 1em);
	background: rgba(89, 89, 89, 0.91);
	backdrop-filter: blur(5px);
	border-radius: 0px 0px 16px 16px;
	z-index: 15;
	box-sizing: border-box;
}
.hidden{
	display: none;
}
.show{
	display: block;
}

#closemenubtn{
	position: absolute;
	width: 1.667vw;/*24px*/
	height: 1.667vw;/*24px*/
	cursor: pointer;
	top: 1.97vw;/*28.38px*/
	right: 2.7vw;/*36px*/
	box-sizing: border-box;
	font-size: 0px;
	line-height: 0px;
	padding: 0;
	margin: 0;
}
#closemenubtn img{
	width: 100%;
	height: 100%;

}
#mainmenu ul{
	position: relative;
	list-style: none;
	box-sizing: border-box;
	padding-top: 2vw;
}
#mainmenu ul li{
	width: 22vw;
}
#mainmenu ul li a{
	color: white;
	font-weight: 500;
	font-size: 1.5277vw;/*22px;*/
	line-height: 2; /*73px;*/
	margin-bottom: 2vw;/*51px*/
	width: 22vw;
	display: inline-block;
	padding-left: 1em;
	box-sizing: border-box;
	border-radius: 3px;
}
#mainmenu ul li a:hover{
	/*text-decoration: underline;*/
	background-color: rgba(200,200,200,0.3);
}


/*MAIN*/
#main{
	width: 100%;
	position: relative;
}

/*FOOTER*/
#footer{
	margin: 0 auto;
	width: 100%;
	background-color:  #303030;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
#footergrid{
	background-color:  #303030;
	background-image: url("../img/footer/auto_sticker.svg");
	background-size: 22vw auto;/*317px*/
	background-position: 95% 40%;
	width: 100%;
	margin: 0 auto;
	padding: 2.4vw 1.6vw 2.4vw 8.5vw;
	box-sizing: border-box;
	display: grid;
	grid-template-areas: "logo txt1 txt2 plug"
						 "logo txt3 txt3 txt3";
	grid-template-columns: 29% 24% 24% 19%;
	grid-template-rows: 94% 4%;
}
.footertxt, #footergrid ul a{
	color: #ACACAC;
	text-align: left;
	font-size: 1vw;
	line-height: 1.56;
	font-weight: 400;	
}
#footergrid div h3{
	font-size: 1.67vw;
}
#footerlogo{
	grid-area:  logo;
	border-right: 1px solid #ACACAC;
	margin-right: 27%;
}
#footerlogo img{
	position: relative;
	width: 70%;
	margin: 8% 35% 15% 0;
}
#footergrid div:nth-of-type(1){
	grid-area:  txt1;
}
#footergrid div:nth-of-type(2){
	grid-area:  txt2;
}
#footergrid div:nth-of-type(3){
	grid-area:  plug;
}
#footergrid div:nth-of-type(4){
	grid-area:  txt3;
}
#footer div:nth-of-type(4) p{
	text-align: right;
}
#footergrid ul{
	list-style-type: disc;
}
#footergrid ul a:hover{
	text-decoration: underline;
}
#footergrid ul a:active{
	text-decoration: none;
	background-color: #464646;
}


/*** ADAPTIVE ***/

/** BIG DISPLAY **/
@media screen and (min-width: 1440px){

	/*HEADER*/
	#header{
		height: 90px;
	}
	.headerside{
		width: calc((100vw - 1180px)/2);
		height: 0;
	}
	#headerlogo{
		width: 100px;
		height: 55.24px;
	}
	#headerlogo img{
		width: 70px;
		height: 55.24px;
	}
	#headertext{
		width: 1012px;
	}
	#headertext p{	
		top:  29px;
		right: 32px;
		font-size: 20px;
		line-height: 33px;
	}
	#headertext p span{	
		font-size: 20px;
		line-height: 33px;
	}
	#gamburger{
		width: 65px;
	}
	#gamburger figure{
		width: 34px;
		height: 24px;
		top: 29px;
	}

	/*MENU*/
	#mainmenu{	
		right: calc(((100vw - 1440px)/2) + 97px);
		width: 389px;
		/*height: 668px;*/
		padding: 55px 43px 35px calc(62px - 1em);
		background: rgba(89, 89, 89, 0.91);
	}
	.hidden{
		display: none;
	}
	.show{
		display: block;
	}
	#closemenubtn{
		position: absolute;
		width: 24px;
		height:24px;
		top: 28.38px;
		right: 36px;
	}

	#mainmenu ul{
		padding-top: 29px;
	}
	#mainmenu ul li{
		width: 310px;
	}
	#mainmenu ul li a{
		font-size: 22px;
		line-height: 73px;
		width: 310px;
		margin-bottom: 0;/*51px*/
	}

	/*MAIN*/
	#main{
		width: 100%;
	}

	/*FOOTER*/
	#footergrid{
		width: 1440px;
		margin: 0 auto;
		background-size: 317px auto;/*317px*/
		background-position: 95% 40%;
		padding: 35px 23px 35px 122px;
	}
	.footertxt, #footergrid ul a{
		font-size: 15px;	
	}
	#footergrid div h3{
		font-size: 24px;
	}

}


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

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

	/*HEADER 540*/
	#header{
		width: 100%;/*375px*/
		height: 16vw;/* 60px;*/
		justify-content: space-between;
	}
	.headerside{
		width: 6vw;/*23px*/
	}
	#headerlogo{
		width: 11vw;/*41px*/
		height: 8.8vw;/*33px*/
	}
	#headerlogo img{
		left: 0;
		width: 100%;/*41px*/
		height: 100%;/*33px*/
	}
	.header-line{
		display: none;
	}
	#headertext{
		align-self: center;/*flex-start;*/
		position: relative;
		width: 70vw;/*262px*/
	}
	#headertext p{	
		position: relative;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	#headertext p span{	
		display: none;
	}
	#headertext a{
		position: relative;
		text-align: center;
		font-weight: 500;
		font-size: 4vw;/*11px*/
		line-height: 12.3vw;/* ? 60px;*/
		color: #FFFFFF;
	}
	#gamburger{

		width: 7.2vw;/*27px*/
		height:4.53vw;/*17px*/
	}
	#gamburger figure{
		position: relative;
		width: 7.2vw;/*27px*/
		height: 4.53vw;/*17px*/
		right: 0;
		top: 0;
	}
	#gamburger img{
		width: 100%;
		height: 100%;
	}

	/*MENU 540*/
	#mainmenu{	
		position: absolute;
		top: 0;
		right: 0; /*6.736vw;97px;*/
		text-align: left;
		width: 44vw;/* px;*/
		padding: 3.8194vw 2.9861vw 0.5vw calc(4.3055vw - 1em);
		background: rgba(89, 89, 89, 0.91);
		backdrop-filter: blur(5px);
		border-radius: 0px 0px 11px 11px;
		z-index: 10;
		box-sizing: border-box;
	}
	.hidden{
		display: none;
	}
	.show{
		display: block;
	}

	#closemenubtn{
		position: absolute;
		width: 4vw;/*15px*/
		height: 4vw;/*15px*/
		cursor: pointer;
		top: 6vw;/*11px*/
		right: 7vw;/*11px*/
/*		box-sizing: border-box;
		font-size: 0px;
		line-height: 0px;*/
/*		padding: 0;
		margin: 0;*/
		z-index: 11;
	}
	#closemenubtn img{
		width: 100%;
		height: 100%;

	}
	#mainmenu ul{
		position: relative;
		list-style: none;
		box-sizing: border-box;
		padding-top: 8vw;
	}
	#mainmenu ul li{
		width: 95%;
	}
	#mainmenu ul li a{
		color: white;
		font-weight: 500;
		font-size: 3vw;/*22px;*/
		line-height: 2; /*73px;*/
		margin-bottom: 2vw;/*51px*/
		width: 100%;
		display: inline-block;
		padding-left: 1em;
		box-sizing: border-box;
		border-radius: 3px;
	}
	#mainmenu ul li a:hover{
		/*text-decoration: underline;*/
		background-color: rgba(200,200,200,0.3);
	}


	/*MAIN 440*/
	#main{
		width: 100%;
		position: relative;
	}

	/*FOOTER 440*/
	#footer{
		margin: 0 auto;
		width: 100%;
		height: 78vw;/*214px*/
		background-color:  #303030;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	#footergrid{
		background-color:  #303030;
		background-image: none;/* url("../img/footer/auto_sticker.svg");*/
	/*	background-size: 22vw auto;317px
		background-position: 95% 40%;*/
		width: 100%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		display: grid;
		grid-template-areas: "logo logo"
							 "txt1 txt2"
							 "txt3 txt3";
		grid-template-columns: 50% 50%;
		grid-template-rows: 30% 60% 10%;/*93px 99px 21px*/
/*		grid-template-areas: "logo txt1 txt2 plug"
							 "logo txt3 txt3 txt3";
		grid-template-columns: 29% 24% 24% 19%;
		grid-template-rows: 94% 4%;
*/	}
	.footertxt, #footergrid ul a{
		color: #ACACAC;
		text-align: left;
		font-weight: 400;
		font-size: 1.283vw;/*4.811px;*/
		line-height: 2.134vw;/* 8px */

	
	}
	#footergrid div h3{
		color: #ACACAC;
		font-weight: 400;
		font-size: 2.2vw;/*8.24742px;*/
		line-height: 2.667vw;/* or 10px */
		margin-bottom: 0.5em;
	}
	#footerlogo{
		grid-area:  logo;
		border-right: none;/*1px solid #ACACAC;*/
		margin: 0 auto;
		padding: 4vw 0;/*15px*/
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #474747;
	}
	#footerlogo img{
		position: relative;
		width: 20%;
		margin: 0 auto;
	}
	#footergrid div:nth-of-type(1){
		grid-area:  txt1;
		padding: 4vw 0 0 16vw;/*15px 60px*/
	}
	#footergrid div:nth-of-type(2){
		grid-area:  txt2;
		padding: 4vw 20vw 0 10vw;/*15px 0 0 37.5px*/

	}
	#footergrid div:nth-of-type(3){
		grid-area:  plug;
	}
	#footergrid div:nth-of-type(4){
		grid-area:  txt3;
	}
	#footer div:nth-of-type(4) p{
		text-align: center;
		font-weight: 500;
		font-size: 1vw;/*3.75px;*/
		line-height: 1.6vw;/*6px;*/
	}
	#footergrid ul{
		list-style-type: disc;
	}
	#footergrid ul a:hover{
		text-decoration: underline;
	}
	#footergrid ul a:active{
		text-decoration: none;
		background-color: #464646;
	}
}


/* COOKs банер*/
#coocksbaner{
    z-index: 5;
    background-color: #ecf1fb;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    display: flex;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 6px 10px #00000012,0 1px 18px #0000000f,0 3px 5px #0000001a;
}
#coocksbaner a{
	text-decoration: underline;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0!important;
    text-transform: none!important;
    font-family: Inter,NotoSansGeorgian,NotoSansArmenian,Arial,sans-serif!important;
    font-size: 14px!important;
}
#coocksbaner.hidden{
	display: none;
}

#coockstext{
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0!important;
    text-transform: none!important;
    font-family: Inter,NotoSansGeorgian,NotoSansArmenian,Arial,sans-serif!important;
    font-size: 14px!important;
}

#coocksbtn{
	color: #fff;
    background-color: #1a5dd0;
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);


    box-sizing: border-box;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 12px;
    outline: 0;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 0 21.3333px;
    text-decoration: none;
    display: flex;
	margin-left: 1rem;
}
#coocksbtn span{
	font-weight: 500;
    line-height: 1.35em;
    letter-spacing: 0!important;
    text-transform: none!important;
    font-family: Inter,NotoSansGeorgian,NotoSansArmenian,Arial,sans-serif!important;
    font-size: 16px!important;
}