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

.div-mid-14 {
	width: 100%
	}

}


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

.div-mid-10 {
	width: 100%
	}

}


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


	.div-navigation-bar {
		width: 100%;
		position: static	/* Dynamic navigation */
		}

		.div-navigation-menu {
			width: 100%;
			}

			.div-logo {
				padding: 14px 0 0 14px
				}
			
				.img-logo {
					padding: 14px 14px 14px 14px; /* Large clickable area */
					}

		



			.navigation li a:link {
				padding: 31px 21px 31px 21px /* c2a */
				}
	.footer {
		width: 100%;
		margin: 140px auto 0 auto;
		}


	.div-index-1 {
		width: 90%;
		padding: 56px 0 0 0;
		}

			
	.div-index-2 {
		width: 644px;
		margin: auto
		}



		.text-welcome {
			padding: 0 0 0 56px;
			width: 440px
			}



		.div-index-visual-perception-left {
			margin: 0 28px 56px 0;
			}



		.div-index-marketing-communication-psychology-left {
			margin: 0 0 56px 0;

			}



		.div-index-visual-in-depth-left {
			margin: 0 28px 56px 0;

			}



		.div-index-idea-precious-information-left {
			margin: 0 0 56px 0;

			}



		.div-index-sound-left {
			margin: 0 28px 56px 0
			}

			.div-index-sound-left-long-description {
				margin: 0 28px 56px 0
				}


		.div-index-common-questions {
			margin: 0 auto 0 auto
			}







	.div-wind {
			width: 100%;
			background-position: right -84px
			}
		.subnavigation-wind {
			padding-top: 308px;
			}

	.div-wind-without-background {
			width: 100%
			}




	


.div-blog {
	width: 100%
	}

	.div-blog-banner {
		height: auto
		}






.div-blog-h1-h2-space-4 {
	width: 90%;
	margin: -28px auto 0 auto; /* 28 Mar 2016 */
	}






.div-blog-h1-h2-space-3 {
	width: 90%;
	margin: -28px auto 0 auto; /* 28 Mar 2016 */
	}






.div-blog-h1-h2-space-2 {
	width: 90%;
	margin: -28px auto 0 auto; /* 28 Mar 2016 */
	}






.div-blog-h1-h2-space-1 {
	width: 90%;
	margin: -28px auto 0 auto; /* 28 Mar 2016 */
	}






.div-blog-h1-h2-space-0 {
	width: 90%;
	margin: -28px auto 0 auto; /* 28 Mar 2016 */
	}


h1 {
	margin: 0 14px 0 14px
	}




.div-wind-why-website-is-so-important {
	margin-bottom: 0
	}


.div-wind-banner-1 {
	margin: 0px 0 0 0 !important;
	}




.div-about {
	width: 100%;
	padding: 112px 0 0 0
	}

.about-graphics {
	background-image: url('../assets/graphics/bkg.gif') !important;
	background-attachment: initial;	/* Setting the full background "About" photo to grey background. Back to default value, as of 2016 some mobile browsers still don't support the "fixed" value. */
	background-repeat: repeat !important;
	background-size: initial
	}

.div-about-banner {
	margin: -56px auto 56px auto
	}








.div-pre-wind {
	width: 100%
	}

.div-pre-wind-h1-h2-space-4 {
	 margin: 84px auto 0 auto
	}


.div-pre-wind-h1-h2-space-3 {
	 margin: 84px auto 0 auto
	}


.div-pre-wind-h1-h2-space-2 {
	 margin: 84px auto 0 auto
	}


.div-pre-wind-h1-h2-space-1 {
	 margin: 84px auto 0 auto
	}


.div-pre-wind-h1-h2-space-0 {
	 margin: 84px auto 0 auto
	}



.div-mid-4 {
	width: 100%
	}


.div-mid-5 {
	width: 100%
	}









.div-wind-your-website-shine-all-levels-visual-perception {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	}

.div-wind-one-billion-websites-internet {
	float: none;
	padding-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 28px;
	}

	.img-wind-one-billion-websites-internet {
		padding: 0px 0 0 0
		}


.div-wind-small-pieces-of-perception {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 112px;
	}




.div-wind-in-depth-website-inspection-many-levels  {
	float: none;
	margin-left: auto;
	margin-right: auto;
	width: 588px;
	margin-bottom: 0px;
	}

.div-wind-shaping-your-customers-visual-perception {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: 28px;
	text-align: center
	}

	.img-wind-shaping-your-customers-visual-perception {
			padding: 0px 0 0 0px;
			}

.div-wind-order {
	width: 90%;
	margin: 56px auto 112px auto
	}









.div-sound-banner {
	height: 252px;
	background-position: center 37px;
	background-size: 61.8%;
	}

.div-sound-acouste {
	float: none;
	margin: 0 auto 0 auto;

	width: 560px;			/* Narrower width for better typography: 560 + 28 = 588 */
	padding-right: 28px;
	}

		.div-sound-acouste-title {
			height: 84px
			}


.div-sound-natund {
	float: none;
	margin: 84px auto 112px auto;


	width: 564px;			/* Narrower width for better typography: 564 + 24 = 588 */
	padding-right: 24px;

	}

		.div-sound-natund-title {
			height: 84px
			}







.div-about-who-is-percaption {
	float: none;
	width: 100%;
	margin: 0 auto 0 auto
	}

	.div-about-who-is-percaption p {
		margin-bottom: 0px				/* (exception) */
		}



.div-about-percaption-blend-websites-marketing-psychology {
	float: none;
	width: 259px;
	height: 252px;	/* 224px + 1 grid */
	background-size: 259px 224px;
	margin: 0 auto 0 auto;
	}



}



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

video {
	width: 100%;
	height: auto
	}
}







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

		.subnavigation-wind {
			padding-top: 336px;
			}


		.text-welcome {
			padding: 0 28px 0 28px;
			margin: 0 auto 84px auto;
			text-align: center;
			height: initial
			}


.div-wind-small-pieces-of-perception {
	margin-bottom: 56px
	}




.div-pre-wind-h1-h2-space-4 {
	 width: 90%;
	 margin: 56px auto 0 auto
	}




.div-pre-wind-h1-h2-space-3 {
	 width: 90%;
	 margin: 56px auto 0 auto
	}




.div-pre-wind-h1-h2-space-2 {
	 width: 90%;
	 margin: 56px auto 0 auto
	}




.div-pre-wind-h1-h2-space-1 {
	 width: 90%;
	 margin: 56px auto 0 auto
	}




.div-pre-wind-h1-h2-space-0 {
	 width: 90%;
	 margin: 56px auto 0 auto
	}




.div-sound-banner {
	height: 224px
	}






.div-about-banner {
	width: 55.64%;
	height: 168px;
	background-size: 100% auto;
	qbackground-color: silver
	}


.div-white-transparent {
	width: 90% !important;
	}


	.div-about-perception-meaning-graphics {
		background-size: 145% !important;
		background-position: center -100px !important
		}


/* Reseting fixed contect height */

	.div-content-84 {
		height: auto !important
		}


	.div-content-112 {
		height: auto !important
		}

	.div-content-140 {
		height: auto !important
		}


	.div-content-168 {
		height: auto !important
		}

	.div-content-196 {
		height: auto !important
		}

	.div-content-224 {
		height: auto !important
		}

	.div-content-252 {
		height: auto !important
		}


	.div-content-280 {
		height: auto !important
		}


	.div-content-308 {
		height: auto !important
		}


	.div-content-588 {
		height: auto !important
		}

	.div-content-616 {
		height: auto !important
		}

	.div-content-644 {
		height: auto !important
		}


	.div-content-672 {
		height: auto !important
		}

	.div-content-700 {
		height: auto !important
		}






}







@media screen and (max-width: 780px) {				/*  c8 ! */



		.div-menu {
			padding: 0 0 0 50px /* c1 + c4 */
			}

				





.div-sound-banner {
	height: 196px
	}






	


.div-about {
	padding-top: 84px
	}



	.div-about-perception-meaning-graphics {
		background-position: center -100px !important
		}




.div-mid-15 {
	width: 100%
	}


.div-mid-11 {
	width: 100%
	}


}









@media screen and (max-width: 733px) {				/*  c8 ! */



	.div-index-2 {
		width: 308px
		}


		.div-index-visual-perception-left {
			margin: 0 0 56px 0;
			background-position: center 32px;
			float: none
			}

		.div-index-marketing-communication-psychology-left {
			margin: 0 0 56px 0;
			background-position: center -322px;
			float: none
			}


		.div-index-visual-in-depth-left {
			margin: 0 0 56px 0;
			background-position: 69px -969px;
			float: none
			}



		.div-index-idea-precious-information-left {
			margin: 0 0 56px 0;
			background-size: 176px auto;
			background-position: center -1338px;
			float: none
			}



		.div-index-sound-left {
			margin: 0 0 56px 0;
			background-position: center -1575px;
			background-size: 153px auto;
			float: none
			}


			.div-index-sound-left-long-description {
				margin: 0 0 56px 0;
				float: none
				}





		.div-index-common-questions {
			margin: 0 0 56px 0;
			float: none
			}




		.titles-index {
			text-align: center
			}

		.text-index {
			text-align: center
			}




	.div-wind {
			background-position: center -84px	
			}

		.subnavigation-wind {
			padding-top: 308px;
			}




		.spacer-wind-1 {
			width: 100%;
			height: 616px
			}


.shaping-your-1 {
	width: 579px;
	height: auto
	}

.div-wind-in-depth-website-inspection-many-levels  {
	padding-top: 28px
	}

.div-wind-your-website-shine-all-levels-visual-perception {
	padding-top: 28px
	}


.div-sound-banner {
	background-size: 90%;
	height: 252px
	}


.div-white-transparent {
	padding: 28px 0 0 0 !important;
	qbackground-color: olive !important
	}










.div-mid-1 {
	width: 90%;
	}

.div-mid-3 {
	width: 90%
	}



.image-left-1 {
	padding: 0 7px 84px 0px
	}

.image-right-1 {
	padding: 0 0px 7px 7px
	}



}



@media screen and (max-width: 650px) {				/*  c9 ! */





.div-contact {
	width: 90%;
	}



.shaping-your-1 {
	width: 530px;
	height: auto
	}









.div-wind-why-website-is-so-important {
	width: 90%
}

.div-wind-our-customers-visual-perception {
	width: 94%;
	height: 392px
	}








.div-wind-your-website-shine-all-levels-visual-perception {
	width: 90%
	}

.div-wind-one-billion-websites-internet {
	width: 100%
}

	.img-wind-one-billion-websites-internet {
		width: 40%;
		height: auto
		}

.div-wind-small-pieces-of-perception {
	width: 90%;
	margin-bottom: 0px
	}

.div-wind-banner-2 {
	margin: 28px 0 0 0 !important;
}



.div-wind-in-depth-website-inspection-many-levels  {
	width: 90%;
	margin-bottom: 0px;
	}


.div-wind-shaping-your-customers-visual-perception {
	width: 90%;
	margin-top: 0px;
}

.div-wind-order {
	margin: 28px auto 196px auto
	}




.div-sound-acouste {
	width: 90%;
	padding-right: 0
	}

.div-sound-natund {
	width: 90%;
	padding-right: 0
	}

		.div-blog-link-post {
			padding-top: 31px;
			padding-bottom: 81px    /* 31 + 81 = 112 = 4 grid */
			}





.div-about-banner {
	margin: -28px auto 28px auto;
	height: 140px;
	}





}


@media screen and (max-width: 610px) {				/*  c9 ! */




.div-navigation-menu {
	max-width: 610px;
	height: 147px
	}

.div-navigation-bar {
	height: 147px
	}



		.div-logo {
			padding: 0 0 0 0;
			width: 100%;
			text-align: center
			}


		.div-menu {
			margin-top: 0px;
			/* background: orange; */
			padding-left: 0;
			width: 100%
			}
		




		.spacer-wind-1 {
			width: 100%;
			height: 476px
			}




.shaping-your-1 {
	width: 490px;
	height: auto;
	}


.div-wind-our-customers-visual-perception {
	height: 364px;
	margin: 0px auto 0 auto

	}







.div-about {
	padding-top: 56px
	}


	.div-about-perception-meaning-graphics {
		background-position: center -200px !important
		}





	.footer {
		margin: 84px auto 0 auto;
		}





}


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

	.text-welcome {
		width: initial
		}



.shaping-your-1 {
	width: 440px;
	height: auto;
	}
	
.div-wind-our-customers-visual-perception {
	height: 336px
	}


.div-sound-banner {
	height: 224px
	}






}




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



.shaping-your-1 {
	display: none
	}

.shaping-your-2 {
	display: block;
	padding: 0 4% 0 4%
	}



.div-wind-our-customers-visual-perception {
	height: 308px
	}


.div-sound-banner {
	height: 168px
	}

.div-sound-natund {
	margin: 56px auto 0 auto
	}




.splitter-horizontal-1 {
	width: 90% !important;
	}

}





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

		
		.spacer-wind-1 {
			width: 100%;
			height: 420px
			}
			

	.div-wind {
			background-size: 784px auto /* 80% */
			}

		.subnavigation-wind {
			padding-top: 224px
			}



	.div-wind-text2 {
		padding-top: 0px
		}





.div-sound-natund {
	margin: 28px auto 0 auto
	}




	.div-blog-h1-h2-space-4 {
		 margin: -56px auto 0 auto;
		}






	.div-blog-h1-h2-space-3 {
		 margin: -56px auto 0 auto;
		}






	.div-blog-h1-h2-space-2 {
		 margin: -56px auto 0 auto;
		}






	.div-blog-h1-h2-space-1 {
		 margin: -56px auto 0 auto;
		}






	.div-blog-h1-h2-space-0 {
		 margin: -56px auto 0 auto;
		}



	.div-about-perception-meaning-graphics {
		background-position: center -100px !important
		}





.footer {
	margin: 56px auto 0 auto;
	}




}




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

		
		.spacer-wind-1 {
			width: 100%;
			height: 364px
			}
			

	.div-wind {
			background-size: 686px auto /* 70% */
			}


		.subnavigation-wind {
			padding-top: 196px
			}

		.div-wind-our-customers-visual-perception {
			height: 252px
			}



		.img-wind-shaping-your-customers-visual-perception {
			width: 100%;
			height: auto
		}



	.img-wind-one-billion-websites-internet {
	width: 60%;
	height: auto
	}







.div-about {
	padding-top: 28px
	}





}




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




.div-mid-2 {
	width: 90%;
	}

	
	
	
	
	.div-index-2 {
		width: 100%
		}



		.div-index-visual-perception-left {
			width: 100%;
			background-position: center 32px;
			background-size: 160px auto

			}

		.div-index-marketing-communication-psychology-left {
			width: 100%
			}


		.div-index-visual-in-depth-left {
			width: 100%
			}



		.div-index-idea-precious-information-left {
			width: 100%
			}



		.div-index-sound-left {
			width: 100%
			}

			.div-index-sound-left-long-description {
				width: 100%
				}



		.div-index-common-questions {
			width: 100%
			}


}





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

.div-navigation-menu {
	height: 399px	/* c10 */
	}

.div-navigation-bar {
	height: 399px	/* c10 */
	}


		
			ul.navigation li {
				float: none;
				text-align: center;
				height: 84px
				}
			
			li.selected {
				background-image: none
				}
		.div-line {
			background-position: 0 399px	/* Newly added rule Maj 2016 because of the new non-stop available navigation bar. Set-off 399 px = height of parent div */
		}














.footer {
	height: 196px;
	margin: 28px auto 0 auto;
	}
.footer .navigation {
	padding-left: 0px		/* Bringing footer navigation to center */
	}

			






		.spacer-wind-1 {
			width: 100%;
			height: 280px
			}
			
	.div-wind {
			background-size: 588px auto; /* 60% */
			background-position: center -56px
			}

		.div-about-percaption-blend-websites-marketing-psychology {
			width: 173px;
			height: 177px;	/* 149px + 1 grid */
			background-size: 173px 149px;
			margin: 0 auto 0 auto;
			}



.div-about-why-percaption-a-win-win {
	margin: 0 auto 0 auto;
	width: 149px;
	height: 224px;
	background-size: 149px 215px
	}



	.div-about-perception-meaning-graphics {
		background-position: center 0px !important
		}





		.div-wind-our-customers-visual-perception {
			height: 196px;
			background-image: url('../assets/graphics/websites-are-new-reality.png');
		
			background-image: -webkit-image-set(
		        url(../assets/graphics/websites-are-new-reality.png) 1x,
		        url(../assets/graphics/websites-are-new-reality-2x.png) 2x
		      );
			background-image: image-set(
		        url(../assets/graphics/websites-are-new-reality.png) 1x,
		        url(../assets/graphics/websites-are-new-reality-2x.png) 2x
		      );

			}


.div-about-banner {
	margin: 0px auto 28px auto;
	height: 112px
	}


}