﻿@media screen and (min-width: 1921px) {

/* Business & psychology photo banner */

.div-business-psychology-banner-2-triangle-right-outer {
	display: none
	}

.div-business-psychology-banner-2-triangle-right {
	display: none
	}

}


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

/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 594px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 550px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 110px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 594px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -594px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 594px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -594px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 228px);						/* Same as beyond */
		width: 228px;									/* Same as above */
		height: 594px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 594px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -594px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}


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


/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 506px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 462px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 110px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 506px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -506px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 506px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -506px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 194px);						/* Same as beyond */
		width: 194px;									/* Same as above */
		height: 506px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 506px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -506px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}




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


/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 462px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 418px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 110px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 462px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -462px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 462px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -462px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 177px);						/* Same as beyond */
		width: 177px;									/* Same as above */
		height: 462px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 462px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -462px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}















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


/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 418px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 374px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 110px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 418px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -418px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 418px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -418px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 160px);						/* Same as beyond */
		width: 160px;									/* Same as above */
		height: 418px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 418px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -418px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}








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


/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 374px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 330px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 110px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 374px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -374px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 374px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -374px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 144px);						/* Same as beyond */
		width: 144px;									/* Same as above */
		height: 374px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 374px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -374px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}




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

/* Layout */

.content3 {
	width: 100%;
}



/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 330px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 286px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 88px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 330px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -330px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 330px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -330px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 127px);						/* Same as beyond */
		width: 127px;									/* Same as above */
		height: 330px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 330px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -330px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}





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


/* Business & psychology photo banner */

.div-business-psychology-banner-2 {
	height: 286px;
	background-size: cover;
	}

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 88px);
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 44px);
		top: -88px;
		}


	.div-business-psychology-banner-2-triangle-top {
		height: 286px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -286px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-bottom {
		height: 286px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -286px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

	.div-business-psychology-banner-2-triangle-right-outer {
		left: calc(100% - 109px);						/* Same as beyond */
		width: 109px;									/* Same as above */
		height: 286px;									/* Same as height in .div-business-psychology-banner-2 */
		}

	.div-business-psychology-banner-2-triangle-right {
		height: 286px;									/* Same as height in .div-business-psychology-banner-2 */
	    margin-top: -286px;								/* Same as height in .div-business-psychology-banner-2 */
	    }

}



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


/* Business & psychology photo banner */

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 110px);
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 968px;
		left: calc(70% + 0px);
		top: -88px;
		}
				
	.div-business-psychology-banner-2-triangle-right-outer {
		display: none
		}
		
	.div-business-psychology-banner-2-triangle-right {
		display: none
		}

}



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


/* Business & psychology photo banner */

	.div-business-psychology-banner-shopping {
		left: 156px;
		left: calc(30% - 110px);
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 70%;
		top: -88px;
		}

}






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


/* Business & psychology photo banner */

	.div-business-psychology-banner-shopping {
		left: 22px;
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 70%;
		top: -88px;
		}

}

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


/* Business & psychology photo banner */

	.div-business-psychology-banner-shopping {
		left: 22px;
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 60%;
		top: -88px;
		}

}


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


/* Business & psychology photo banner */

	.div-business-psychology-banner-shopping {
		left: 22px;
		top: 242px;
		}

	.div-business-psychology-banner-parties-table-talk {
		left: 50%;
		top: -88px;
		}

}


























































@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;
	qbackground-color: olive	
	}





}


@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
	}


}