/* 
	TEKSTU TREŚĆ: 265
	KAFELKI TYTUŁ: 834

*/


@font-face {
    font-family: 'Open Sans Condensed Light'; /*a name to be used later*/
    src: url('OpenSans-CondLight.ttf'); /*URL to font*/
}

body {

}

.clear {
	clear: both;
}



/* SECTION: TITLE _______________________________________________________ */

#title {
	height: 600px;
	min-height: 400px;
	overflow: hidden;
	position: relative;
}


#title #headerWrapper {
	/*background: blue;*/
	width: 100%;

	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}


#title #header{
	/*background: red;*/
	z-index: 99;
	width: 1100px;
	height: 300px;
	margin: 0 auto;
	transition: 300ms ease-out;
	position: relative;
}




#title #header #textLogo{
	position: absolute;
	left: 170px;
	top: 30px;
}

#title #header #safMotto {
	position: absolute;
	left: 210px;
	top: 170px;
}

#title #header #safImglogo {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
}


/* OUTED */


#title #header #textLogo.outed {
	transform: translate(0, -40px);
	-moz-transform: translate(0, -40px);
	/*transform: translate(-100px, 0);*/
	opacity: 0;
}

#title #header #safMotto.outed {
	transform: translate(0, +40px);	
	-moz-transform: translate(0, +40px);	
	/*transform: translate(+100px, 0);	*/
	opacity: 0;
}
#title #header #safImglogo.outed {
	/*transform: translate(0, +40px);	*/
	transform: translate(-50px, 0) rotate(-5deg);
	-moz-transform: translate(-50px, 0) rotate(-5deg);
	transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	opacity: 0;
}


#title #header.anim #textLogo {
	transition: 800ms;
}
#title #header.anim #safMotto {
	transition: 300ms ease-out;
}
#title #header.anim #safImglogo {
	transition: 300ms ease-out;
}



#floatingLogo {
	position: fixed;
	transition: 300ms ease-out;
	top: 0;
	margin: 10px;
}
#floatingLogo.hidden {
	top: -100px;
/* 	transform: rotate(25deg); */
}
#floatingLogo img{
	width: 300px;
}



/*   */




/* SECTION: CONTENT _______________________________________________________ */

#content {
	/*border-top: 1px dashed gray;*/
	padding: 0 0 0 0;
	margin-bottom: 50px;
	min-height: 1080px;
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
}




#content #pageContent{
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	overflow: visible;


	transition: 300ms ease-out;
}

#content #pageContent.outed{
	left: 100%;
	/*z-index: -1;*/
	/*opacity: 0;*/
	/*background: rgb(200, 200, 200);*/
}




#content #menuContent{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;

	transition: 300ms ease-out;
}

#content #menuContent.outed {
	left: -100%;
	/*opacity: 0;*/
	/*z-index: -1;*/
	/*transition: 400ms ease-out;*/
}






/* ___ CONTENT ______________________________________________________________________________ */

#content #pageContent #contentNavi {
	display: block;
	width: 100%;
	/*min-height: 100%;*/
	
	position: absolute;
	top: 5px;
	left: 0;
	height: 50px;

	/*float: left;*/
	transition: 300ms;
	overflow: visible;
	height: 64px;
}

#content #pageContent #contentNavi #contentNaviWrapper {
	position: relative;
	margin: 0 auto 0 auto;
	width: 1000px;
	overflow: visible;
	height: inherit;
}
#content #pageContent #contentNavi a {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	top: 0;
	left: 5px;

	transition: 200ms ease-in;
	cursor: pointer;
}
#content #pageContent #contentNavi #contentNaviWrapper a.goBack {
	background: url('../images/circle_back.png');
	float: left;
}
#content #pageContent #contentNavi #contentNaviWrapper a.goHome {
	background: url('../images/circle_home.png');
	float: right;
}
#content #pageContent #contentNavi a:hover {
	/*background: rgb(245, 245, 200);*/
	/*transform: rotate(360deg);*/
	transform: scale(1.1);
}



#content #pageContent #contentWrapper {
	/* usunąć, przenieść na podstrony */
	width: 1000px; 
	margin: 0 auto 0 auto;
}

#content .priceInformation {
	color: #de1679;
	font-size: 16px;
}


/* ___ Content Content ______________________________________________________________________________ */

#content {
	color: #555;
	font-size: 12pt;
	font-family: "Open Sans Condensed Light";
}

#content h2 {
	font-size: 28pt;
	font-family: "Open Sans Condensed Light";
	font-weight: bold;
	color: #de1679;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	/*border-bottom: 1px solid #F59ECA;*/
	margin: 30px 0;
}

#content h3 {
	font-size: 22pt;
	font-family: "Open Sans Condensed Light";
	font-weight: bold;
	color: #de1679;
	width: 100%;
	margin: 20px 0 10px 0;
	text-align: center;
	text-transform: uppercase;
}
#content h5 {
	font-size: 18pt;
	font-family: "Open Sans Condensed Light";
	font-weight: bold;
	color: #de1679;
	width: 100%;
	text-align: left;
	margin: 30px 0 20px 0;
}

#content p {
	text-align: justify;
	font-family: Open Sans;
	color: #555;
	letter-spacing: 0.5px;
}

#content ul.tips {
	list-style-type: decimal;
}
#content li {
	text-align: justify;
	font-family: Open Sans;
	color: #555;
}

#content img.shadow {
	box-shadow: 4px 4px 3px lightgray;
}

/* ___ MENU ______________________________________________________________________________ */


	/* oferta indywidualna */
	#content .squareGrid .menuSquare#menu-ofeind .squareBox .square-background{
		background: url('../images/menu_ofeind.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: 270px;
		background-position: 0px -30px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-ofeind .squareBox:hover .square-description{
		height: 125px;
	}

	/* oferta dla firm */
	#content .squareGrid .menuSquare#menu-ofedlafir .squareBox .square-background {
		background: url('../images/menu_ofedlafir.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 100%;
		background-position: -30px 0px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-ofedlafir .squareBox:hover .square-description{
		height: 90px;
	}

	/* program partnerski */
	#content .squareGrid .menuSquare#menu-propar .squareBox .square-background {
		background: url('../images/menu_propar.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 100%;
		background-position: -110px 0px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-propar .squareBox:hover .square-description{
		height: 70px;
	}

	/* wskazowki treningowe */
	#content .squareGrid .menuSquare#menu-wsktre .squareBox .square-background {
		background: url('../images/menu_wsktre.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 107%;
		background-position: -20px 0px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-wsktre .squareBox:hover .square-description{
		height: 40px;
	}

	/* sklep */
	#content .squareGrid .menuSquare#menu-skl .squareBox .square-background {
		background: url('../images/menu_skl.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: 100% auto;
		background-position: 0px -30px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-skl .squareBox:hover .square-description{
		height: 100px;
	}

	/*o nas*/
	#content .squareGrid .menuSquare#menu-onas .squareBox:hover .square-description{
		height: 100px;
	}

	/*nasze marki*/
	#content .squareGrid .menuSquare#menu-nasmar .squareBox:hover .square-description{
		height: 40px;
	}


	/* nasi partnerzy */
	#content .squareGrid .menuSquare#menu-naspar .squareBox .square-background {
		background: url('../images/menu_naspar.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: 100% auto;
		background-position: 0 -45px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-naspar .squareBox:hover .square-description{
		height: 40px;
	}


	/* pytania i odpowiedzi */
	#content .squareGrid .menuSquare#menu-pytiodp .squareBox .square-background {
		background: url('../images/menu_pytiodp.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 100%;
		background-position: -80px 0px;
		opacity: 0.9;
	}
	#content .squareGrid .menuSquare#menu-pytiodp .squareBox:hover .square-description{
		height: 40px;
	}


/*=== MENU HOVER ======================================================================*/
	#content .squareGrid .menuSquare .squareBox:hover {
		/*transform:scale(1.06);
		-webkit-transform:scale(1.06); 
		-moz-transform:scale(1.06);*/
		box-shadow: none;
		z-index: 99;

		/*box-shadow: 0 0 30px white;*/
	}
	#content .squareGrid .menuSquare .squareBox:hover .square-background{
		opacity: 1 !important;

		-webkit-filter: brightness(50%) blur(1px)!important;
		/*background: #3c74ac;*/
	}
	#content .squareGrid .menuSquare .squareBox:hover .square-background.no-image{
		-webkit-filter: none !important;
	}

	#content .squareGrid .menuSquare .squareBox:hover .squareContent{
		/*padding-bottom: 60px;*/
	}

	#content .squareGrid .menuSquare .squareBox:hover .square-description{
		opacity: 1;
	}


	#content .squareGrid .menuSquare .squareBox:hover .square-description span{
		/*background: rgba(0, 0, 0, 0.4);*/
	}
	#content .squareGrid .menuSquare .squareBox:hover .square-line{
		width: 80%;
		margin-top: 8px;
		margin-bottom: 8px;
		transition: 400ms ease-out;
	}



section#sectionContact {
	margin-top: 80px;
	/*border-top: 1px dashed gray;*/
	/*height: 400px;*/
	background: rgba(0, 0, 255, 0.02);
}

section#contact {
	/*height: 400px;*/
}

#contact {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 0;
}



#contactInformations {
	float: left;
	width: 50%;
}
#contactForm {
	float: right;
	width: 50%;
}

.contactOption {
	margin: 10px;
	padding: 0 0 0 48px;
	font: bold 22pt "Open Sans Condensed Light";
	color: #56a0ea;
	background-repeat: no-repeat;
	background-position: 4px center;
}

.contactOption.optionPhone {
	background-image: url('../images/contact_phone_small.png');
	background-position: 12px center;
	
}
.contactOption.optionMail {
	background-image: url('../images/contact_mail_small.png');
}


img.contact-logo {
	width: 280px;
	margin-bottom: 30px;
}
p.contact-phone {
	margin: 0;
	padding: 0;
	font: bold 28pt "Open Sans Condensed Light";
	color: #3E73A8;
}

a.contact-email {
	display: block;
	font: bold 28pt "Open Sans Condensed Light";
	color: #4C8DCF;
	margin-top: 40px;
	text-decoration: none;
	background: url('../images/email.png');
	background-repeat: no-repeat;
	padding: 8px 0 16px 70px;
}
a.contact-email:hover {
	/*color: #3E73A8;*/
	text-decoration: underline;
}

a.contact-facebook {
	display: block;
	font: bold 28pt "Open Sans Condensed Light";
	color: #4d68a1;
	margin-top: 20px;
	text-decoration: none;
	background: url('../images/facebook.png');
	background-repeat: no-repeat;
	padding: 8px 0 16px 70px;


}
a.contact-facebook:hover {
	/*color: #3E73A8;*/
	text-decoration: underline;

}



#contact #socialLinks {
	margin-top: 40px;
	width: 100%;
	padding-left: 20px;

}

#contact #socialLinks .socialLink {
	width: 32px;
	height: 32px;

	display: inline-block;
	background-repeat: no-repeat;
	margin-right: 10px;
}

#contact #socialLinks .socialLink:hover {
	-webkit-filter: drop-shadow(0 0 3px gray);
	filter: drop-shadow(0 0 3px gray);
}

#contact #socialLinks .socialLink.facebook {
	background-image: url('../images/social/facebook.png');
}
#contact #socialLinks .socialLink.twitter {
	background-image: url('../images/social/twitter.png');
}
#contact #socialLinks .socialLink.youtube {
	background-image: url('../images/social/youtube.png');
}
#contact #socialLinks .socialLink.instagram {
	background-image: url('../images/social/instagram.png');
}






#contactForm label{
	display: block;
	text-transform: uppercase;
	font: bold 14pt "Open Sans Condensed Light";
	color: #de1679;
}

#contactForm input {
	display: block;
	margin-bottom: 10px;
	width: 60%;
}

#contactForm textarea {
	display: block;
}

#contactForm input, #contactForm textarea {
	padding: 5px 8px;
	border: 1px solid #56a0ea;
	font: normal 12pt Arial;
}
#contactForm input:focus, #contactForm textarea:focus {
	box-shadow: 0 0 2px #56a0ea;
	outline: none;
}

#contactForm #contactFormMessage{
	width: 90%;
	height: 200px;
	resize: vertical;
}

#contactForm button {
	margin-top: 10px;
	padding: 5px 10px;
	font: normal 12pt Arial;
}













/*GRID*/
#page-ofeInd-grid {

}








#content .squareGrid {
	width: 800px;
	height: 800px;
	margin: 0 auto 0 auto;
	position: relative;
	top: 0; left: 0;
}

#content .squareGrid.grid-size-custom1 {
	width: 640px;
	height: 480px;
}


#content .squareGrid .menuSquare{
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border: 0 solid lightgray;
	position: absolute;
	
	padding: 5px;
	perspective: 3000px;
}


/*=== MENU GRID ======================================================================*/

	#content .squareGrid.grid-width-1 .menuSquare{ width: 100%; }
	#content .squareGrid.grid-width-2 .menuSquare{ width: 50%; }
	#content .squareGrid.grid-width-3 .menuSquare{ width: 33.333%; }
	#content .squareGrid.grid-width-4 .menuSquare{ width: 25%; }
	#content .squareGrid.grid-width-5 .menuSquare{ width: 20%; }

	#content .squareGrid.grid-height-1 .menuSquare{ height: 100%; }
	#content .squareGrid.grid-height-2 .menuSquare{ height: 50%; }
	#content .squareGrid.grid-height-3 .menuSquare{ height: 33.333%; }
	#content .squareGrid.grid-height-4 .menuSquare{ height: 25%; }
	#content .squareGrid.grid-height-5 .menuSquare{ height: 20%; }


	/* WIDTH: 1 */
	#content .squareGrid.grid-width-1 .menuSquare.width-1{ width: 100%; }

	#content .squareGrid.grid-width-1 .menuSquare.left-1{ left: 0; }

	/* WIDTH: 2 */
	#content .squareGrid.grid-width-2 .menuSquare.width-1{ width: 50%; }
	#content .squareGrid.grid-width-2 .menuSquare.width-2{ width: 100%; }

	#content .squareGrid.grid-width-2 .menuSquare.left-1{ left: 0; }
	#content .squareGrid.grid-width-2 .menuSquare.left-2{ left: 50%; }

	/* WIDTH: 3 */
	#content .squareGrid.grid-width-3 .menuSquare.width-1{ width: 33.333%; }
	#content .squareGrid.grid-width-3 .menuSquare.width-2{ width: 66.666%; }
	#content .squareGrid.grid-width-3 .menuSquare.width-3{ width: 100%; }

	#content .squareGrid.grid-width-3 .menuSquare.left-1{ left: 0; }
	#content .squareGrid.grid-width-3 .menuSquare.left-2{ left: 33.333%; }
	#content .squareGrid.grid-width-3 .menuSquare.left-3{ left: 66.666%; }


	/* WIDTH: 4 */
	#content .squareGrid.grid-width-4 .menuSquare.width-1{ width: 25%; }
	#content .squareGrid.grid-width-4 .menuSquare.width-2{ width: 50%; }
	#content .squareGrid.grid-width-4 .menuSquare.width-3{ width: 75%; }
	#content .squareGrid.grid-width-4 .menuSquare.width-4{ width: 100%; }

	#content .squareGrid.grid-width-4 .menuSquare.left-1{ left: 0; }
	#content .squareGrid.grid-width-4 .menuSquare.left-2{ left: 25%; }
	#content .squareGrid.grid-width-4 .menuSquare.left-3{ left: 50%; }
	#content .squareGrid.grid-width-4 .menuSquare.left-4{ left: 75%; }

	/* WIDTH: 5 */
	#content .squareGrid.grid-width-5 .menuSquare.width-1{ width: 20%; }
	#content .squareGrid.grid-width-5 .menuSquare.width-2{ width: 40%; }
	#content .squareGrid.grid-width-5 .menuSquare.width-3{ width: 60%; }
	#content .squareGrid.grid-width-5 .menuSquare.width-4{ width: 80%; }
	#content .squareGrid.grid-width-5 .menuSquare.width-5{ width: 100%; }

	#content .squareGrid.grid-width-5 .menuSquare.left-1{ left: 0; }
	#content .squareGrid.grid-width-5 .menuSquare.left-2{ left: 20%; }
	#content .squareGrid.grid-width-5 .menuSquare.left-3{ left: 40%; }
	#content .squareGrid.grid-width-5 .menuSquare.left-4{ left: 60%; }
	#content .squareGrid.grid-width-5 .menuSquare.left-5{ left: 80%; }



	/* HEIGHT: 1 */
	#content .squareGrid.grid-height-1 .menuSquare.height-1{ height: 100%; }

	#content .squareGrid.grid-height-1 .menuSquare.top-1{ top: 0; }

	/* HEIGHT: 2 */
	#content .squareGrid.grid-height-2 .menuSquare.height-1{ height: 50%; }
	#content .squareGrid.grid-height-2 .menuSquare.height-2{ height: 100%; }

	#content .squareGrid.grid-height-2 .menuSquare.top-1{ top: 0; }
	#content .squareGrid.grid-height-2 .menuSquare.top-2{ top: 50%; }

	/* HEIGHT: 3 */
	#content .squareGrid.grid-height-3 .menuSquare.height-1{ height: 33.333%; }
	#content .squareGrid.grid-height-3 .menuSquare.height-2{ height: 66.666%; }
	#content .squareGrid.grid-height-3 .menuSquare.height-3{ height: 100%; }

	#content .squareGrid.grid-height-3 .menuSquare.top-1{ top: 0; }
	#content .squareGrid.grid-height-3 .menuSquare.top-2{ top: 33.333%; }
	#content .squareGrid.grid-height-3 .menuSquare.top-3{ top: 66.666%; }

	/* HEIGHT: 4 */
	#content .squareGrid.grid-height-4 .menuSquare.height-1{ height: 25%; }
	#content .squareGrid.grid-height-4 .menuSquare.height-2{ height: 50%; }
	#content .squareGrid.grid-height-4 .menuSquare.height-3{ height: 75%; }
	#content .squareGrid.grid-height-4 .menuSquare.height-4{ height: 100%; }

	#content .squareGrid.grid-height-4 .menuSquare.top-1{ top: 0; }
	#content .squareGrid.grid-height-4 .menuSquare.top-2{ top: 25%; }
	#content .squareGrid.grid-height-4 .menuSquare.top-3{ top: 50%; }
	#content .squareGrid.grid-height-4 .menuSquare.top-4{ top: 75%; }

	/* HEIGHT: 5 */
	#content .squareGrid.grid-height-5 .menuSquare.height-1{ height: 20%; }
	#content .squareGrid.grid-height-5 .menuSquare.height-2{ height: 40%; }
	#content .squareGrid.grid-height-5 .menuSquare.height-3{ height: 60%; }
	#content .squareGrid.grid-height-5 .menuSquare.height-4{ height: 80%; }
	#content .squareGrid.grid-height-5 .menuSquare.height-5{ height: 100%; }

	#content .squareGrid.grid-height-5 .menuSquare.top-1{ top: 0; }
	#content .squareGrid.grid-height-5 .menuSquare.top-2{ top: 20%; }
	#content .squareGrid.grid-height-5 .menuSquare.top-3{ top: 40%; }
	#content .squareGrid.grid-height-5 .menuSquare.top-4{ top: 60%; }
	#content .squareGrid.grid-height-5 .menuSquare.top-5{ top: 80%; }







#content .squareGrid .menuSquare .squareBox {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: block;
	
	text-decoration: none;
	border-radius: 5px;
	padding: 30px 0;
	transition: 300ms;
	color: white;
	/*box-shadow: 0 0 1px lightgray;*/
	
	position: relative;
	overflow: hidden;
	z-index: 1;
	/*backface-visibility: hidden;*/
	 /*-webkit-backface-visibility: hidden;*/
}

#content .squareGrid .menuSquare .square-background {
	border-radius: inherit;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	/*background: red;*/
	z-index: 1;
	transition: inherit;
	background: #56a0ea;
	opacity: 1;
}


	/* MENU TITLE */
	#content .squareGrid .menuSquare .menu-title{
		font: bold 30px "Open Sans Condensed Light";
		font-weight: 900;
		line-height: 38px;
		text-transform: uppercase;
		letter-spacing: 2.5px;
		text-shadow: 0 0 15px black, 0 0 10px black, 0 0 5px black, 0 0 3px black;
	}


	#content .squareGrid .menuSquare .squareBox .squareContent {
		position: relative;
		z-index: 2;
		display: table;
		width: 100%;
		height: 100%;
		transition: inherit;
	}
	#content .squareGrid .menuSquare .squareBox .squareContent .squareTitle {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		transition: inherit;
	}

	/*square description*/
	#content .squareGrid .menuSquare .square-description{
		transition: inherit;
		height: 0;
		/*border-top: 1px solid white;*/
		overflow: hidden;
		opacity: 0;

		font: bold 16px "Open Sans Condensed Light";
		line-height: 18px;
		/*text-shadow: 0 0 10px black, 0 0 5px black, 0 0 3px black;*/
		width: 94%;
		margin: 0 auto 0 auto;

		text-transform: uppercase;
	}
	#content .squareGrid .menuSquare .square-description span{
		display: block;
		transition: inherit;
		padding: 10px 3px;
	}

	#content .squareGrid .menuSquare .square-line{
		/*border-top: 1px solid white;*/
		height: 1px;
		width: 0%;
		margin: 0 auto 0 auto;
		background: white;
		box-shadow: 0 0 3px black;
		transition: 600ms ease-out;
	}

	#content .squareGrid .menuSquare .squareBox .squareContent .squareTitle.text-top { vertical-align: top; }
	#content .squareGrid .menuSquare .squareBox .squareContent .squareTitle.text-middle { vertical-align: middle; }
	#content .squareGrid .menuSquare .squareBox .squareContent .squareTitle.text-bottom { vertical-align: bottom; }






	#content .squareGrid .menuSquare#typ_orbitreki .squareBox .square-background{
		background: url('../images/content/typ_orbitreki.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 102%;
		background-position: 0 0;
		opacity: 0.9;
	}

	#content .squareGrid .menuSquare#typ_rowery .squareBox .square-background{
		background: url('../images/content/typ_rowery.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 102%;
		background-position: 0px 0;
		opacity: 0.9;
	}

	#content .squareGrid .menuSquare#typ_wioslarskie .squareBox .square-background{
		background: url('../images/content/typ_wioslarskie.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 102%;
		background-position: 0px 0;
		opacity: 0.9;
	}

	#content .squareGrid .menuSquare#typ_bieznie .squareBox .square-background{
		background: url('../images/content/typ_bieznie.jpg');
		-webkit-filter: brightness(100%) blur(0);
		background-size: auto 102%;
		background-position: 0px 0;
		opacity: 0.9;
	}


/*=== MENU HOVER ======================================================================*/
	#content .squareGrid .menuSquare .squareBox:hover {
		box-shadow: none;
		z-index: 99;
	}
	#content .squareGrid .menuSquare .squareBox:hover .square-background{
		opacity: 1 !important;

		-webkit-filter: brightness(50%) blur(1px)!important;
		/*background: #3c74ac;*/
	}
	#content .squareGrid .menuSquare .squareBox:hover .square-background.no-image{
		-webkit-filter: none !important;
	}


	#content .squareGrid .menuSquare .squareBox:hover .square-description{
		opacity: 1;
	}


	#content .squareGrid .menuSquare .squareBox:hover .square-description span{
		/*background: rgba(0, 0, 0, 0.4);*/
	}

	#content .squareGrid .menuSquare .squareBox:hover .square-line{
		width: 80%;
		margin-top: 8px;
		margin-bottom: 8px;
		transition: 400ms ease-out;
	}








/* PRODUCTS */

.productList {
	margin-top: 50px;
}
.productList .productItem {
	/*background: blue;*/
	overflow: hidden;
	margin-bottom: 80px;
}

.productList .productItem h4{
	font-size: 26px;
	margin: 0;
}

.productList .productItem .productImages {
	float: left;
	width: 35%;
	/*background: red;*/
}
.productList .productItem .productImages .productImageFrame{
	/*background: green;*/
	text-align: center;
	height: 250px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;

	box-sizing: border-box;
	width: 80%;
	margin: 0 auto;
	border: 1px solid lightgray;
	margin-bottom: 10px;
}

.productList .productItem .productImages .productImagesList{
	width: 80%;
	margin: 0 auto;
	/*background: pink;*/
}
.productList .productItem .productImages .productImagesList img{
	width: 50px;
	padding: 5px;
	border: 2px solid transparent;
}
.productList .productItem .productImages .productImagesList img:hover{
	border: 2px solid #de1679;
}

.productList .productItem .productDescription{
	float: right;
	width: 65%;
	/*background: red;*/
}

.productList .productItem .productDescription p {
	font-size: 12pt !important;
}




/* SCROLL ARROW */
#scrollPlease {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left:-32px;
	
	/*background: red;*/
	width: 64px;
	height: 128px;
}


@keyframes arrow1 {
    0%   {top: 10px;}
    50%  {top: 30px;}
    100% {top: 10px;}
}
@keyframes arrow2 {
    0%   {top: 35px;}
    50%  {top: 55px;}
    100% {top: 35px;}
}

#scrollPlease .scrollArrow {
	width: 64px;
	height: 64px;
	position: absolute;
	background: url("../images/arrow_scroll.png");
}

#scrollPlease .scrollArrow#scrollArrow1{
	top: 20px;
	animation-name: arrow1;
	animation-duration: 2s;
	animation-delay:200ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#scrollPlease .scrollArrow#scrollArrow2{
	top: 35px;
	animation-name: arrow2;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}



