* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin:0px;
}

body {
	color: #000;
	background-color: #f1f1f1;
	background-color:rgb(241, 241, 241);
	background-color:rgb(230, 230, 230);
	overflow: hidden;
}



.content-wrapper{
	height:100vh;
	height:100dvh;
	overflow:hidden;
}




.link-widget{
	background-color:white;
	cursor: pointer;
	background-clip: padding-box;
	position: fixed;
	width: 25%;
	z-index: 100;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: all .3s ease;
 	border-radius: 20px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


.link-widget:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	background-color: rgba(255,255,255,0.7);
}


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


	/* .link-widget:hover {
		top: 49.8%;
	} */


}

#image-dimensional{
	border-radius:18px;
	height: calc(100vh - 40px);
	width: calc(50vw - 40px);
	left: 20px;
	top:20px;
	position: fixed;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	display: none;
  }

#image-lomann{
	border-radius:18px;
	height: calc(100vh - 40px);
	width: calc(50vw - 40px);
	right: 20px;
	top:20px;
	position: fixed;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	display: none;
  }

  	  
  #lomann:hover ~ #image-lomann {
	display: block;
  }

  #dimensional:hover ~ #image-dimensional {
	display: block;
  }

	  

.dimensional-widget{
	left:12.5%;
}

.lomann-widget{
	right:12.5%;
}

@media only screen and (max-width: 1200px) {

	.link-widget {
		width: 35%;
	}

	.dimensional-widget {
		left: 7.5%;
	}
	
	.lomann-widget {
		right: 7.5%;
	}

}


  @media only screen and (max-width: 800px) {

	.body{
		background-color:#ff6101;
	}

	.mobile-background-top{
		height:50%;
		top:0;
		background-color:#ff6101;
	}

	.mobile-background-bottom{
		height:50%;
		bottom:0;
		background-color:#8162ff;
	}

	.link-widget{
		width: 90%;
		position: absolute;

		border-radius: 24px;
	}

	.dimensional-widget{
		top:25%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 5%;
	}
	
	.lomann-widget{
		top:75%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		right:5%;
	}

	#image-dimensional{
		display: none;
	  }
	
	#image-lomann{
		display: none;
	  }

	  #lomann:hover ~ #image-lomann {
		display: none;
	  }
	
	  #dimensional:hover ~ #image-dimensional {
		display: none;
	  }
	
  }