#component img{border: 5px solid rgb(134,151,145); padding: 5px;}


.component { margin: 0px auto; position: relative; margin-bottom: 160px; max-width: 100%; }

.component-small { width: 960px; height: 400px; }

.component-fullwidth { width: 100%; height: 620px; background: #333; }

.component-transparent { width: 600px; height: 600px; }

.component > ul { max-width: 100%; height: 100%; position: relative; list-style: none; padding: 0; margin: 0 auto; }

.component-small > ul { width: 825px;  /* $$$$  */}

.component-fullwidth > ul { overflow: hidden; }

.component-transparent > ul { width: 112px;}

.component li { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
		pointer-events: none; opacity: 0; z-index: 999; }

.component-fullwidth li { overflow: hidden; }

.component .current { opacity: 1; pointer-events: auto; z-index: 1000; }

.component li img { display: inline-block; max-width: 100%; }

.component-fullwidth li img { min-width: 100%; max-width: none; position: absolute; left: 50%;
			-webkit-transform: translateX(-50%); transform: translateX(-50%); }

.component nav a { position: absolute; width: 80px; color: rgb(134,151,145);   /* color fleches  */ outline: none;
	overflow: hidden; text-align: center; top: 142%; -webkit-transform: translateY(-50%);transform: translateY(-50%);}

.component-small nav a.prev, .component-transparent nav a.prev { left: 105px; }

.component-small nav a.next, .component-transparent nav a.next { right: 105px; }



.te-container{ width:940px;  ;margin:0px auto 00px auto;  position:relative;}

#hab img{ z-index: 0; width:940px; margin:0 auto; position:absolute; left:0; right:0; opacity: 0.4;}
#hab2 img{ z-index: 0; width:740px; margin:0 auto; position:absolute; left:0; right:0; opacity: 0.4;}
#hab3 img{ z-index: 0; width:610px; margin:0 auto; position:absolute; left:0; right:0; opacity: 0.4;}
#hab4 img{ z-index: 0; width:440px; margin:0 auto; position:absolute; left:0; right:0; opacity: 0.4;}

.te-controls{ width:60px; height:40px; position:absolute; left:0; right:0; bottom:-12px; margin:0 auto; }

a.te-next{
	display: inline-block;
	font-size: 15px;
	background: rgb(134,151,145); color: #fff;
	line-height: 18px;
	cursor: pointer;
	text-overflow: ellipsis;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: inherit;
	}
	
a.te-next{ margin:5px auto; padding:5px 10px 5px 14px; position:absolute; left:0; right:0; margin:0 auto;}

a.te-next:hover{  color: #444;}
a.te-next:active{  color: #fff;}

.te-shadow{
	position: absolute;
	top: 30px;
	left: 50%;
	width: 373px;
	height: 470px;
	margin-left: -186px;
	background: transparent url(../images/shadow.png) no-repeat center bottom;
	}
	
.te-wrapper{ position:absolute; width:900px; height:550px; left:0px; right:0; margin:0 auto;}

#te-wrapper img{width:auto; max-width: 900px; height:100%; position:absolute; left:0px; right:0; margin:0 auto;
		border:10px solid rgb(134,151,145); }
		
		
#deco2{ width:100%; height: 220px; margin:0 auto; }
#deco2 img{ width:200px; display: block;margin:0 auto;text-align: center; opacity: 0.8;}		

#presentation h3{ font-size: 22px; margin-bottom: 6px; color: #777; font-weight: 600;  }
#presentation p{ text-align: justify; font-size: 14px; font-weight: 400;  }









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

	.te-container{ width:100%; padding:0px;}

	}


@media only screen and (max-width: 800px) {
					
	.component {  position: relative; margin-bottom: 20px; }
	li img{ max-height: 400px; }
	.component-small nav a { top: 100%; margin-top: 0px; -webkit-transform: translateY(0%);transform: translateY(0%);}
	.component-small nav a.prev { left: 50%; margin-left: -80px;}
	.component-small nav a.next { margin-left: 20px; right: auto; left: 50%;}
	.component nav a::before { opacity: 1; color: rgb(85,92,102); }
	.component nav a:hover::before { opacity: 0.5; }
	
	#te-wrapper img{ max-width: 740px; height:auto;}
	
	.te-wrapper{ width:100%;height:600px;}
	.te-cover, .te-transition{ width:100%;height:600px; }
	.te-cube-face{ width:100%;height:600px;  }
	#hab3 img, #hab4 img{display:none;}
	
	}	
@media screen and (max-width: 700px){
	#hab2 img, #hab4 img{display:none;}
	#hab3 img{display: inline;}
	}


@media screen and (max-width: 500px){
	
	.te-container{/* height:430px;*/ padding:0px auto 00px auto;}
	.te-cover, .te-transition{ width:100%;  height:600px; }
	.te-cube-face{ width:100%;  height:600px; }
	#te-wrapper { width: 100%;  height:600px;}
	#te-wrapper img{max-width:440px; height:auto;}
	#hab2 img, #hab3 img{display:none;}
	#hab4 img{display: inline;}
	
	.component-small { height: 310px; }
	}
@media screen and (max-width: 420px){					
	.component-small { height: 260px; }
			}