@font-face {
	font-family: 'Hot Sans';
	src: url('HotSans_VFExport.otf') format('opentype');
}
body {
	font-family: 'Hot Sans',sans-serif;
	font-weight:500;
	background-color:#F2F2F1;
}
a {
   color:black;
   text-decoration:none;
}
a:hover {
   text-decoration:none;
   opacity:50%;
	transition:all 200ms ease;
}
a:hover html {
	font-size: 16px;
}
.parent {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height:100vh;
	height:100%;
}
.div1 {
	grid-area: 1 / 1 / 2 / 8;
	font-weight: 500;
	font-family: 'Hot Sans',sans-serif;
	cursor: pointer;
}
.div2 {
	grid-area: 1 / 11 / 2 / 13;
}
.div3 {
	grid-area: 5 / 1 / 6 / 8;
	font-weight: 500;
}
.div4 {
	grid-area: 5 / 11 / 6 / 13;
	font-size:calc(100vw/80);
	font-size:calc(100vw/76);
	font-weight:500;
}
.head_1 {
	font-variation-settings: "slnt" 0;
	transition: font-variation-settings 200ms ease;
}
.head_2 {
	transition: font-variation-settings 200ms ease;
   /* add a transition effect */
	font-variation-settings: "slnt" 11;
	margin-left:calc(100vw/16);
}
.head_1:hover {
	font-variation-settings: "slnt" 11;
}
.head_2:hover {
	font-variation-settings: "slnt" 0;
   /* change the value on hover */
}
@media (min-width: 1001px){
	.div1 {
		font-size:calc(1rem + 13.5vw);
		line-height:calc(1rem + 10vw);
		margin-left:20px;
		margin-top:20px;
   }
	.div2 {
		font-size:calc(1rem + 0.3vw);
		margin-left:-20px;
		margin-top:20px;
   }
	.div3 {
		font-size:calc(1rem + 0.78vw);
		margin-left:20px;
		margin-bottom:20px;
   }
	.div4 {
		font-size:calc(1rem + 0.3vw);
		margin-left:-20px;
   }
}
@media (min-width: 960px) and (max-width: 1279px){
	.div1 {
		font-size:calc(1rem + 13.5vw);
		line-height:calc(1rem + 10vw);
		margin-left:20px;
		margin-top:15px;
   }
	.div2 {
		font-size:calc(1rem + 0.3vw);
		margin-left:-80px;
		margin-top:20px;
   }
	.div3 {
		font-size:calc(1rem + 0.75vw);
		margin-left:20px;
		margin-bottom:20px;
   }
	.div4 {
		font-size:calc(1rem + 0.3vw);
		margin-left:-80px;
   }
}
@media (min-width: 1280px) and (max-width: 1300px){
	.div2 {
	   margin-left:-50px;
   }
	.div4 {
	   margin-left:-50px;
   }
}
@media (max-width: 959px) {
	.parent {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(3, 1fr);
		overflow-x:hidden;
   }
	.div1 {
		grid-area: 1 / 1 / 2 / 13;
		margin-bottom:96px;
		font-size:calc(100vw/3.85);
		line-height:calc(100vw/4.75);
		padding-left:10px;
   }
	.head_2{
	   margin-left:calc(100vw/7.95);
	   ;
   }
	.div2 {
		grid-area: 2 / 1 / 3 / 7;
		font-size:16px;
		padding-top:0px;
		padding-left:10px;
   }
	.div3 {
		grid-area: 3 / 1 / 4 / 13;
		font-size:calc(1rem + 1.3vw);
		padding-left:10px;
	   padding-right:10px;
   }
	.div4 {
		grid-area: 2 / 7 / 3 / 13;
		font-size:16px;
		margin-bottom:80px;
		margin-right:-20px;
   }
}