@media (orientation: landscape)
	{
		body
			{
				background-image: url(wall-l.jpg);
				background-size: 100%;
			}
			
		.sqr
			{
				display: inline-block;
				width: 150px;
				height: 150px;
				margin: 18.4% 8% 0% 8%;
				border-radius: 100px;
				background-color: #121212;
				font-size: 20px;
				position: relative;
			}
			
		.crcl
			{
				border-radius: 1000px;
				position: relative;
				z-index: 1;
				bottom: 300px;
				right: 155px;
				width: 455px;
				height: 455px;
				/*border: 1px solid black;*/
			}	
	}
	
@media (orientation: portrait)
	{
		body
			{
				background-image: url(wall-p.png);
				background-size: 100%;
			}
			
		.sqr
			{
				display: inline-block;
				width: 150px;
				height: 150px;
				margin: 40% 40% 0% 40%;
				border-radius: 100px;
				background-color: #121212;
				font-size: 20px;
				position: relative;
			}
			
		.crcl
			{
				border-radius: 1000px;
				position: relative;
				z-index: 1;
				bottom: 300px;
				right: 155px;
				width: 455px;
				height: 455px;
				/*border: 1px solid black;*/
			}	
	}
	
	
body
	{
		overflow: hidden;
		font-family: "Segoe UI";
		font-weight: "Light";
		color: #999999;
	}

a
	{
		text-decoration: none;
		color: #999999;
		line-height: 25px;
	}

#bgimg
	{
		z-index: -10;
		position: fixed;
		background-size: cover;
		background-repeat: no-repeat;
	}

#container
	{
		width: 100%;
		display: table;
	}

span
	{
		width: inherit;
		height: inherit;
		line-height: 145px;
		font-size: 30px;
		color: #999999;
	}
	
#cell
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	

	
.crcl [class^='linq']
	{
		position: absolute;
		width: 150px;
		height: 150px;
		top: 155px;
		left: 155px;
		border-radius: 100px;
		background-color: #121212;
		visibility: hidden;
		transition: all 0.5s;
		/*border: solid 1px #00ff00;*/
	}


/*==================Top Left==============*/
	
.crcl:hover .linq1
	{
		visibility: visible;
		transform: translate(-160px, 0px);
	}
	
/*==================Top Right==============*/

.crcl:hover .linq2
	{
		Visibility: visible;
		transform: translate(160px ,0px)
	}

/*==================Bottom Left==============*/

.crcl:hover .linq3
	{
		visibility: visible;
		transform: translate(-85px, 165px);
	}

/*==================Bottom right==============*/	
		
.crcl:hover .linq4
	{
		visibility: visible;
		transform: translate(85px, 165px);
	}
	
/*==================Top Center==============*/

		
.crcl:hover .linq5
	{
		visibility: visible;
		transform: translate(0px, -165px);
	}

/*==================Bottom Center==============*/

.crcl:hover .linq6
	{
		visibility: visible;
		transform: translate(0px, 165px);
	}