#photosphere {
	  min-height: 568px;
	  width: 100%;
	  height:100%;
	  margin:0;
	  overflow: hidden;
	  padding:0;
	  z-index:-1; 
	  background:#1c1c1c;
	  position: fixed;

	}

	#menu{
		width:100%;
		height:60px;
		background: #1c1c1c;
		position:fixed;
		bottom:0;
		left:0%;
		z-index:1;
	}

	#info{
		width:25px;
		height:25px;
		position:fixed;
		border-radius: 50%;
		background:#fff;
		bottom:13%;
		left:5%;
		z-index:1;
		opacity: 1;
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#i-info{
		opacity: 1;
		width:25px;
	}
	#info.abrinfo{

		width:65%;
		height:20%;
		background: #fff;
		position:fixed;
		bottom:13%;
		left:5%;
		z-index:1;	
		border-radius:0;	
	  -webkit-transition: .55s ease-in-out;
	  -moz-transition: .55s ease-in-out;
	  -o-transition: .55s ease-in-out;
	  transition: .55s ease-in-out;
	}

	.logo{

		max-width:100%;
		height:15px;
		left:8%;
		top:5%;
		position:fixed;
	}

	#cont{
		position:fixed;
		z-index:1;
		top:2%;
		right:5%;
		width:65px;
		height: 50px;
		background:#1c1c1c;
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#cont.abr{
		height:85%;
	}

	
	#botonera{
		width:100%;
		height:50px;
		background:#1c1c1c;
		top:0;
		left:0;
		position: absolute;
	}

	.ico{
		margin-left:15px;
		margin-top:18px;
		max-width:19px;
	}

	#botonera span{
		display:block;
		border-radius:2px;
		width:20px;
		background:#fff;
		height:2px;
		position: absolute;
		left:22.5px;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#botonera span:nth-child(1) {
  		top: 17px;
	}

	#botonera span:nth-child(2) {
  		top: 25px;
	}

	#botonera span:nth-child(3) {
  		top: 33px;
	}	

	#botonera.open span:nth-child(1){
		top:24px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);	
	  width:25px;	
	  left:18px;
	}

	#botonera.open span:nth-child(2){
	  opacity: 0;		
	}

	#botonera.open span:nth-child(3) {
	  top: 24px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	  width:25px;
	  left:18px;
	} 

	.titulos{
		font-family: Montserrat-SemiBold;
		color:#fff;
		font-size:0.63em;
		top:10%;
		position: absolute;
		width:65px;
		text-align: center;
		display:none;
	}

	.btns{
		position: absolute;
		top:16%;
		width:50%;
		height:auto;
		left:25%;
		display:none;
		opacity:0.4;
	}

	.active{
		opacity:1;
	}

	.linea{
		position: absolute;
		top:35%;
		height:0px;
		width:70%;
		left:15%;
		background:#fff;
		border-top:1px dotted #fff;
		display:none;
	}

	.shw{
	  -webkit-transition: .55s ease-in-out;
	  -moz-transition: .55s ease-in-out;
	  -o-transition: .55s ease-in-out;
	  transition: .55s ease-in-out;
	}

	.flechas{
		position: absolute;
		left:0;
		top:0;
		width:18%;
		height:60px;
		background:#1c1c1c;
		z-index:3;
	}

	.flechas img{

		width:34%;
		height:auto;
		position: absolute;
		top:22.5px;
		left:31%;

	}

	.flechas:active{
		background:#000;
	}

	#texturas{
		position: absolute;
		left:18%;
		width:64%;
		background:#1c1c1c;
		height:60px;
		top:0;
		margin:0;
		padding:0;
		list-style: none;
		display:inline-flex;
		z-index:2;
		overflow-x: scroll;
		overflow-y:hidden;
		padding-bottom:17px;
		box-sizing: content-box;
	}

	#texturas li{
		margin-left:20px;
		height:40px;
		width:40px;
		top:10px;
		position: relative;
		border-radius:5px;
		opacity:1;
		border:1px solid #000;
	}

	.t-activo{
		border:2px solid #ededed!important;
		top:8px!important;
		opacity:1!important;
	}

	/*INFO*/

	.i-img{
		position: absolute;
		left:5%;
		top:35%;
		border:1px solid #1c1c1c;
		width:22%;
	}

	.i-x{

		right:4%;
		top:0%;
		font-size:1.1em;
		color:#000;
		font-family: Montserrat-ExtraLight;
		position: absolute;

	}

	.i-nombre{
		font-family:Montserrat;
		position: absolute;
		text-align: left;
		font-size:1.2em;
		color:#1c1c1c;
		top:10%;
		left:5%;
	}

	.i-tipo{
		font-family:Montserrat-ExtraLight;
		position: absolute;
		text-align: left;
		font-size:1.1em;
		color:#1c1c1c;
		top:32%;
		left:32%;		
	}

	.i-sustrato{
		font-family:Montserrat-Bold;
		position: absolute;
		text-align: left;
		font-size:0.7em;
		color:#1c1c1c;
		top:52%;
		left:32%;		
	}	

	.i-codigo{
		font-family:Montserrat-Bold;
		position: absolute;
		text-align: left;
		font-size:0.7em;
		color:#1c1c1c;
		top:67%;
		left:32%;		
	}

	.i-dim{
		font-family:Montserrat;
		position: absolute;
		text-align: left;
		font-size:0.7em;
		color:#1c1c1c;
		top:85%;
		left:5%;		
	}

/*portrait iphone 5*/
@media only screen and (min-width: 360px){
	
	#photosphere{
		min-height:640px;
	}
}

@media only screen and (min-height: 800px){
	#info.abrinfo{
		height: 15%;
	}
}

@media only screen and (min-height: 1000px){
	#info.abrinfo{
		height: 12%;
	}
}

/*ORIENTACIÓN LANDSCAPE*/
@media screen and (orientation: landscape) and (max-height: 600px){
	
	.flechas{
		width:60px;
	}

	#texturas{
		left:60px;
		width:80%;
	}

	#info{
		bottom:25%;
		left:3%;
	}

	#info.abrinfo{

		width:40%;
		height:40%;
		bottom:25%;
		left:3%;

	}	

	#cont.abr{
		width:180px;
		height:75%;
	}

	#botonera.open{
		width:60px;
		left:auto;
		right:0;
	}

	#botonera span{
		left:auto;
		right:22.5px;
	}

	#botonera.open span:nth-child(1){	
	  left:auto;
	  right:18px;

	}

	#botonera.open span:nth-child(3) {
	  left:auto;
	  right:18px;
	} 

	.linea{
		display:none!important;
	}

	.titulos{
		text-align:left;
		left:10%;
	}

	#tit-vistas{
		top:41%!important;
	}

	#tit-combina{
		top:70%!important;
	}

	.btns{

		width:40px!important;
		left:12%;
		top:20%;
	}

	#btn-closet{

		top:21%!important;
		left:50%!important;
	}

	#btn-vistaA{
		top:50%!important;
		width:32px!important;
		left:10%!important;
	}

	#btn-vistaB{
		top:50%!important;
		width:32px!important;
		left:50%!important;
	}

	#btn-muebles{
		top:80%!important;
		left:10.5%!important;
		width:35px!important;
	}

	#btn-cubierta{
		top:80%!important;
		left:43%!important;
	}

	#btn-bicolor{
		top:80%!important;
		left:73%!important;
		width:35px!important;
	}
} 

@media only screen and (min-width: 375px){
	
	#photosphere{
		min-height:812px;
	}

	.logo{
		top:4%;
	}
}

/*landscape iphone X*/
@media only screen and (min-width: 375px) and (max-width:850px) and (orientation:landscape){
	
	#photosphere{
		min-height:640px;
	}

	.logo{
		left:3%;
	}
}

/*portrait iphone X*/
@media only screen and (min-height: 700px){

	#info{
		bottom:80px;
		left:30px;
		width:30px;
		height:30px;
	}

	#i-info{
		width:30px;
	}


	#info.abrinfo{
		bottom:80px;
		left:30px;

	}
}

@media only screen and (min-width: 411px){
	
	#photosphere{
		min-height:731px;
	}
}

@media only screen and (min-width: 414px){
	
	#photosphere{
		min-height:736px;
	}
}

@media only screen and (min-width: 720px){
	
	#photosphere{
		min-height:1560px;
	}
}

@media only screen and (min-width: 768px) and (orientation:portrait){
	
	#photosphere{
		min-height:1080px;
	}

	.logo{
		height:20px;
		left:7%;
		top:4%;
	}

	.flechas{
		display:none;
	}

	#texturas{
		left:2%!important;
	}

	#info.abrinfo{
		width:35%;
	}

}

@media only screen and (min-width: 768px) and (orientation:landscape){
	
	#photosphere{
		min-height:1080px;
	}

	.logo{
		height:20px;
		left:7%;
		top:4%;
	}

	.flechas{
		display:none;
	}

	#texturas{
		left:2%!important;
	}

	#info.abrinfo{
		width:35%;
		height:20%;

	}

}

@media only screen and (min-width: 812px) and (orientation:landscape) and (max-height:600px){
	
	#photosphere{
		min-height:375px;
	}

	.logo{
		height:15px;
		left:4%;
		top:4%;
	}

	.flechas{
		display:none;
	}

	#texturas{
		left:2%!important;
	}

	#info.abrinfo{
		width:35%;
		height:40%;
		bottom:20%;
	}

	#info{
		bottom:20%;
	}

	#cont.abr{
		width:180px;
		height:75%;
	}

	#botonera.open{
		width:60px;
		left:auto;
		right:0;
	}

	#botonera span{
		left:auto;
		right:22.5px;
	}

	#botonera.open span:nth-child(1){	
	  left:auto;
	  right:18px;

	}

	#botonera.open span:nth-child(3) {
	  left:auto;
	  right:18px;
	} 

	.linea{
		display:none!important;
	}

	.titulos{
		text-align:left;
		left:10%;
	}

	#tit-vistas{
		top:41%!important;
	}

	#tit-combina{
		top:70%!important;
	}

	.btns{

		width:40px!important;
		left:12%;
		top:20%;
	}

	#btn-closet{

		top:21%!important;
		left:50%!important;
	}

	#btn-vistaA{
		top:50%!important;
		width:32px!important;
		left:10%!important;
	}

	#btn-vistaB{
		top:50%!important;
		width:32px!important;
		left:50%!important;
	}

	#btn-muebles{
		top:80%!important;
		left:10.5%!important;
		width:35px!important;
	}

	#btn-cubierta{
		top:80%!important;
		left:43%!important;
	}

	#btn-bicolor{
		top:80%!important;
		left:73%!important;
		width:35px!important;
	}	
}



@media only screen and  (min-width:1024px){
	
	#photosphere{
		min-height:800px;
	}

	.logo{
		left:5%;
	}

	.flechas{
		display:none;
	}

	#texturas{
		left:2%;
	}

	#info.abrinfo{
		width:25%;

	}

	#cont{
		top:4%;
	}
}

@media only screen and  (min-width:1024px) and (max-height:768px) {
	
	#photosphere{
		min-height:720px;
	}


	.flechas{
		display:none;
	}

	#texturas{
		left:2%;
	}

	#info.abrinfo{
		width:25%;
		height: 17%;
		bottom:10%;
	}

	#info{
		bottom:10%;
	}

	#cont{
		top:4%;
	}

	.i-img{
		width:16%;
	}
}

@media only screen and  (min-width:768px){

	#texturas{
		overflow:hidden;
		width:95%;
	}

}

@media only screen and  (min-width:1366px) and (max-width:1900px){
	
	#photosphere{
		min-height:768px;
	}


	.flechas{
		display:none;
	}


	#info.abrinfo{
		width:20%;
		height: 17%;
	}


	#cont{
		top:4%;
	}

	#texturas{
		overflow:hidden;
	}	
}

@media only screen and  (min-width:1440px) and (max-width:1900px){
	
	.logo{
		left:4%;
		height:22px;
	}

	#info.abrinfo{

		height:17%;
		width:20%;
	}

	#texturas{
		overflow:hidden;
	}
}

@media only screen and  (min-width:1920px) and (max-height: 1080px) and (orientation:landscape){
	#photosphere {
	  min-height: 568px;
	  width: 100%;
	  height:100%;
	  margin:0;
	  overflow: hidden;
	  padding:0;
	  z-index:-1; 
	  background:#1c1c1c;
	  position: fixed;

	}

	#menu{
		width:100%;
		height:60px;
		background: #1c1c1c;
		position:fixed;
		bottom:0;
		left:0%;
		z-index:1;
	}

	#info{
		width:25px;
		height:25px;
		position:fixed;
		border-radius: 50%;
		background:#fff;
		bottom:10%;
		left:2%;
		z-index:1;
		opacity: 1;
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#i-info{
		opacity: 1;
		width:25px;
	}
	#info.abrinfo{

		width:15%;
		height:15%;
		background: #fff;
		position:fixed;
		bottom:10%;
		left:2%;
		z-index:1;	
		border-radius:0;	
	  -webkit-transition: .55s ease-in-out;
	  -moz-transition: .55s ease-in-out;
	  -o-transition: .55s ease-in-out;
	  transition: .55s ease-in-out;
	}

	.logo{

		max-width:100%;
		height:20px;
		left:2%;
		top:5%;
		position:fixed;
	}

	#cont{
		position:fixed;
		z-index:1;
		top:2%;
		right:5%;
		width:65px;
		height: 50px;
		background:#1c1c1c;
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#cont.abr{
		height:85%;
	}

	
	#botonera{
		width:100%;
		height:50px;
		background:#1c1c1c;
		top:0;
		left:0;
		position: absolute;
	}

	.ico{
		margin-left:15px;
		margin-top:18px;
		max-width:19px;
	}

	#botonera span{
		display:block;
		border-radius:2px;
		width:20px;
		background:#fff;
		height:2px;
		position: absolute;
		left:22.5px;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}

	#botonera span:nth-child(1) {
  		top: 17px;
	}

	#botonera span:nth-child(2) {
  		top: 25px;
	}

	#botonera span:nth-child(3) {
  		top: 33px;
	}	

	#botonera.open span:nth-child(1){
		top:24px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);	
	  width:25px;	
	  left:18px;
	}

	#botonera.open span:nth-child(2){
	  opacity: 0;		
	}

	#botonera.open span:nth-child(3) {
	  top: 24px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	  width:25px;
	  left:18px;
	} 

	.titulos{
		font-family: Montserrat-SemiBold;
		color:#fff;
		font-size:0.63em;
		top:10%;
		position: absolute;
		width:65px;
		text-align: center;
		display:none;
	}

	.btns{
		position: absolute;
		top:16%;
		width:50%;
		height:auto;
		left:25%;
		display:none;
		opacity:0.4;
	}

	.active{
		opacity:1;
	}

	.linea{
		position: absolute;
		top:35%;
		height:0px;
		width:70%;
		left:15%;
		background:#fff;
		border-top:1px dotted #fff;
		display:none;
	}

	.shw{
	  -webkit-transition: .55s ease-in-out;
	  -moz-transition: .55s ease-in-out;
	  -o-transition: .55s ease-in-out;
	  transition: .55s ease-in-out;
	}

	.flechas{
		position: absolute;
		left:0;
		top:0;
		width:18%;
		height:60px;
		background:#1c1c1c;
		z-index:3;
	}

	.flechas img{

		width:34%;
		height:auto;
		position: absolute;
		top:22.5px;
		left:31%;

	}

	.flechas:active{
		background:#000;
	}

	#texturas{
		position: absolute;
		left:18%;
		width:64%;
		background:#1c1c1c;
		height:60px;
		top:0;
		margin:0;
		padding:0;
		list-style: none;
		overflow:hidden;
		display:inline-flex;
		z-index:2;
	}

	#texturas li{
		margin-left:20px;
		height:40px;
		width:40px;
		top:10px;
		position: relative;
		border-radius:5px;
		opacity:0.5;
		border:1px solid #1c1c1c;

	}

	.t-activo{
		border:2px solid #ededed;
		top:8px!important;
		opacity:1!important;
	}

}

@media only screen and  (min-width:1921px) and (min-height: 1080px){

	#info.abrinfo{

		height:150px;
		width:280px;
	}

}

@media only screen and (min-height:1081px){

	#info{
		left:50px;
		bottom:80px;

	}

}