.contenedor{
    display: flex;
  justify-content: center;
    background-color: #404040;
    
}




.cabeza{
    position: absolute;
    display: block;
   /*align-items: center;*/
    
    
    width: 100%;
    
    max-width: 800px;
    //*height: 33.33333%;*/
    height: 16.66666%;
    top: 0px;
    /*para que el usuario no pueda seleccioner el texto del botón */
     user-select: none;
     -webkit-user-select: none;
    -moz-user-select: -moz-none;
    
    /*background-color: #404040;*/
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
    /*line-height: 0px;*/
    
}

.tituloArriba{
    position: relative;
	display: block;
    
    
   
    height: 100%;
    margin-top: 5%;
   left: 7%;
    width: 80%;
    
    max-width: 800px;
    
	
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////*/
.tituloOBJETO{
     position: relative;
    display: flex;
   align-items: center;
    /*background-color: #404040;*/
    /*
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
    */
    
    
    width: 100%;
    
    max-width: 800px;
    height: 8.33333%;
    top: 16.66666%;
    /*para que el usuario no pueda seleccioner el texto del botón */
     user-select: none;
     -webkit-user-select: none;
    -moz-user-select: -moz-none;
    
    
    font-family: 'Roboto Condensed' , cursive , "Courier New", "Courier", "monospace";
    
}

.tituloOBJETOArriba{
    position: relative;
	display: block;
    width: 80%;
    max-width: 800px;
    /*margin-top: 1%;*/
    /*top: -22%;*/
   left: 7%;
    margin-bottom: 5%;
	font-size: 140%;
    
  text-align: left;
  font-weight: bold;
  /*font-style: italic;*/
	color: darkorange;
    /*background-color: #404040;*/
}


/*///////////////////////////////////////////////////////////////////////////*/
.infoVisor{
     position: absolute;
    display: flex;
   align-items: center;
    background-color: #404040;
    /*
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
    */
    /*line-height: 0px;*/
    
    width: 100%;
    
    max-width: 800px;
    height: 8.33333%;
    top: 91.66667%;
    /*para que el usuario no pueda seleccioner el texto del botón */
     user-select: none;
     -webkit-user-select: none;
    -moz-user-select: -moz-none;
     font-family: 'Roboto Condensed' , cursive , "Courier New", "Courier", "monospace";
    
}

.textoInfoVisor{
    position: relative;
	display: block;
    
    width: 70%;
    max-width: 800px;
    
    /*margin-top: 8%;*/
   left: 7%;
	font-size: 100%;
    
  text-align: left;
  font-weight: normal;
  /*font-style: italic;*/
	color: #ffffff;
    background-color: #404040;
}
.flecha{
          position: absolute;
    float: right;
   bottom: 18px;
	right: 15px;
   width: 35px;
    
    
}

.altavoces{
    
        position: absolute;
   
   
    right: 7%;
    
    width: 35px;
   
    
   
}
.altavoces2{
    
        position: absolute;
   bottom: 18px;
	left: 18px;
   
    
    width: 35px;
   
    
   
}
/*//////////////////////////////////////////////////////////////////*/



.tituloTextoAbajo{
    
	font-size: 140%;
    
  font-family: 'Roboto Condensed' , cursive , "Courier New", "Courier", "monospace";
  font-weight: bold;
  /*font-style: italic;*/
	color: darkorange;
}


.Abajo{
        position: absolute;
    display: flex;
   align-items: center;
    
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
    
    width: 100%;
    
    max-width: 800px;
    /*
    height: 25%;
    top: 75%;
    */
    
    height: 33.4%;
    top: 66.6%;
    
    /*para que el usuario no pueda seleccioner el texto del botón */
     user-select: none;
     -webkit-user-select: none;
    -moz-user-select: -moz-none;

    font-family: 'Roboto Condensed' , cursive , "Courier New", "Courier", "monospace";
    overflow-y:scroll;
}

.textoAbajo{
    font-family: 'Roboto Condensed' , cursive , "Courier New", "Courier", "monospace";
    width: 86%;
    
    max-width: 800px;
    
    margin-left:auto;
    margin-right:auto;
    margin-top: auto;
    padding-top: 5%;
    
	font-size: 90%; 
    text-align:left;
    
    
    /*font-weight: bold;*/
  /*font-style: italic;*/
	color: #ffffff;
    /*
    overflow-y:scroll;
    overflow-x: hidden;*/
    
  /*white-space: nowrap;*/
  text-overflow: ellipsis;
}


/*//////////////////////////////////////////////////////////////////////*/
.visor3D{
    position: absolute;
    display: block;
    
    line-height: 0px;
    width: 100%;
    max-width: 800px;
    /*
    top: 41.66666%;
    height: 50%;
    */
    /*top: 31.66666%;*/
    top: 25%;
    height: 66.66666%;
background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
}
.fotitoVisor3d{
    display: flex;
	
	
	flex-direction: row;
    justify-content: center;
    
    
    /*position: absolute;*/
    /*left: 0px;*/
    width: 100%;
    /*height: 100%;*/
    max-width: 800px;
    height: auto;
    /*top: 0px;*/
    /*width: auto;*/
  
   /*
    --escala: 1;
    
    --wkescala: scale(0, 0);
    position: absolute;
    display: block;
    left: 0px;
    width: 100%;
    max-width: 800px;
    height: 100%;
    top: 0px;
    transform: scale(var(--escala));
    -webkit-transform: scale(var(--escala));
    transform-origin: center center;
    overflow: hidden;
    */
}



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.all-models-container {
    
    max-width: 800px;
    
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
     height: 100%;
    
    background-color: #000000; 
    
}

.all-models-container,
.model-viewer-wrapper {
   
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
    
    
    
}

.model-viewer-wrapper {
    
	/*margin-top: 1rem;*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    /*
	height: 300px;
	min-height: 300px;
    */
    height: 100%;
    min-height: 80px;
	/*padding: 0 1.5rem*/
     
}

@media screen and (min-width:550px) {
    
	.model-viewer-wrapper {
        /*
		width: 400px;
		height: 400px
         */
        width: 100%;
        height: 100%;
        
	}
    
}

@media screen and (min-width:860px) {
	.model-viewer-wrapper {
        /*
		width: 600px;
		height: 500px
         */   
        width: 100%;
        height: 100%;    
	}
}

model-viewer#pickMateriall {
    --poster-color: transparent;
    
  }

.model-viewer barry-model{
    
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
}


.model-viewer,
.model-viewer canvas,
.model-viewer html {
	width: 100%;
    
	margin: 0;
	padding: 0;
	/*border: 4px solid #f2f2f2;*/
	border-radius: 0px;
    background-color: #0000FF; 
	/*background: radial-gradient(circle, hsla(0, 0%, 100%, .38) 0, hsla(0, 0%, 99.2%, .4) 62.62%, #ededed 99.94%);*/
    /*background: #DDDDDD;*/
    background: linear-gradient(top, #000000, #4b4b4b);
    background: -moz-linear-gradient(top, #000000, #4b4b4b);
    background: -webkit-linear-gradient(top, #000000, #4b4b4b);
    background: -o-linear-gradient(top, #000000, #4b4b4b);
}

model-viewer {
	-ms-flex-item-align: center;
	align-self: center;
	width: 100%;
	height: 100%;
    background-color: #0000FF;
    background: #0000FF; 
}

.model-viewer canvas{
    background-color: #0000FF;
    background: #0000FF; 
}

.ar-error,
model-viewer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.ar-error {
	opacity: 0;
	visibility: hidden;
	border-radius: 18px;
	background-color: #131415;
	padding: 24px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	text-align: center;
	font-family: europa;
	font-weight: 300;
	font-style: normal;
	line-height: 2.1em;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	transition: all .3s
}

.ar-error,
.ar-error.show {
	-webkit-transition: all .3s
}

.ar-error.show {
	opacity: .9;
	visibility: visible;
	transition: all .3s
}

.ar-error__text,
.ar-error__text-link {
	font-size: 1rem;
	color: #ecf0f4;
	width: 150px;
	text-align: left;
	letter-spacing: 0;
	line-height: 19px
}

.ar-error__text-link {
	text-decoration: underline
}

.ar-error__text-link:active,
.ar-error__text-link:link,
.ar-error__text-link:visited {
	color: #ecf0f4
}

.ar-error__close-btn {
	font-size: 1.5rem;
	color: #ecf0f4;
	letter-spacing: 0;
	line-height: 19px;
	background: none;
	border: none;
	height: 32px;
	width: 32px;
	margin-left: 50px;
	padding: 8px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer
}

.ar-error__close-btn:focus {
	outline: none
}

.ar-progress {
	position: absolute;
	width: 33.33333%;
	height: 7px;
    /*
	color: #ff1abe;
	border: 1px solid #ff1abe;404040
    */
    color: #555555;
	border: 1px solid #000000;
	border-radius: 40px;
	top: calc(50% - 5px);
	left: 33.33333%;
	opacity: 0;
	-webkit-transition: opacity .3s .3s;
	transition: opacity .3s .3s
}

.ar-progress.show {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	opacity: 1
}

.ar-progress__bar {
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-transform-origin: top left;
	transform-origin: top left;
	-webkit-transform: scaleX(0);
	transform: scaleX(0)
}

.ar-desktop-info {
	opacity: 0;
	visibility: hidden;
	border-radius: 18px;
	background-color: #131415;
	padding: 24px;
	position: absolute;
	bottom: 12px;
	right: 12px;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	text-align: center;
	font-family: europa;
	font-weight: 300;
	font-style: normal;
	line-height: 2.1em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: all .3s;
	transition: all .3s;
	z-index: 1
}

.ar-desktop-info.show {
	opacity: .9;
	visibility: visible;
	-webkit-transition: all .3s;
	transition: all .3s
}

.ar-desktop-info__header {
	margin-bottom: 1rem
}

.ar-desktop-info__header,
.ar-desktop-info__text {
	max-width: 220px;
	color: #ecf0f4;
	letter-spacing: 0;
	line-height: 19px;
	text-align: center
}

.ar-desktop-info__text {
	margin-bottom: .5rem
}

.ar-desktop-info__close-btn {
	position: absolute;
	bottom: 8px;
	right: 8px;
	font-size: 1.5rem;
	color: #ecf0f4;
	background: none;
	border: none;
	height: 32px;
	width: 32px;
	padding: 8px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer
}

.ar-desktop-info__close-btn:focus {
	outline: none
}

.ar-desktop-btn {
	position: absolute;
	display: block;
	visibility: hidden;
	bottom: 16px;
	right: 16px;
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
	box-shadow: 0 0 4px rgba(0, 0, 0, .15);
	border: 1px solid #d9d8d8;
	border-radius: 100px
}

.ar-desktop-btn.show {
	visibility: visible
}

.ar-desktop-btn:focus {
	outline: none
}

.infoVISIBLE {
	position: absolute;
	display: block;
	visibility: visible;
	top: 16px;
	left: 16px;
    width: 95%;
	
    
    
    line-height: normal;
    
   
    text-overflow: ellipsis;
    
    user-select: none;
     -webkit-user-select: none;
    -moz-user-select: -moz-none;
    
    font-family: 'Roboto', sans-serif, "Courier New", "Courier", "monospace;
  font-weight: bold;
  font-style: italic;
	color: #ffffff;
    /*
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
	box-shadow: 0 0 4px rgba(0, 0, 0, .15);
	border: 1px solid #d9d8d8;
	border-radius: 100px
    */    
}









html,body {
  scrollbar-color:  transparent transparent;
}




     body {
		  /*border-top: 55px solid #009eca;*/
        
		width: 100%;
		max-width: 800px;
        margin: 0 auto;
        /*background-color: #ebeff9;*/
        background-color: #AA00AA;  

      }
html {
        /*font-family: "Courier New", "Courier", "monospace";*/
    font-family: 'Barlow Condensed', sans-serif;
        background-color: #404040;
        
		width: 100%;
    max-width: 100%;
	height: auto;

      }