@charset "UTF-8";

body{
	font-family:'Amiko',sans-serif !important;
}
a{
	color: inherit !important;
}
a:link{
	text-decoration: none !important;
}
.row{
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.header{
	height: auto;
	z-index: 999999 !important;
}

.navbar-light{
	border-bottom: 3px solid #81d8ce ;

}
.navbar-light .navbar-nav .nav-link {
    color: black !important;
	text-transform: uppercase !important;
}
.navbar-light .navbar-nav .nav-link:hover {
    color:#81d8ce !important;
	text-transform: uppercase !important;
}
.bono{
	height:auto;
	background-color:#555555;
	border-bottom:2px solid black;
	text-align: center;
	color:white;
	font-size:18px;
	display:block !important;
	padding: 10px !important;
}
.social-media{
	height:auto;
	border-bottom:1px solid #c7c7c7;
	text-align: center;
	color:#81d8ce;
	font-size:14px;
	display:flex;
	padding: 5px
}
.social-media >p{
	margin:auto 0;
    margin-bottom: auto !important;
}
.social-media >a>img{
	width: auto;
	height: 30px;
	margin: 2px;
}
.pauta{
	height:auto;
	background-color:#3a3a3a;
	text-align: center;
	color:white;
	font-size:14px;
	display:block !important;
	padding: 5px 10px 5px 10px;
}
.pauta> p{
	margin: 5px 10px;
}
.prueba-lentes{
	font-size: 25px;
	display: block;
	text-align: center;
	padding: 0 !important;
}
.prueba-lentes > h1{
	margin:12px;
	font-weight: bold;
}
.pasos{
	margin:10px;
	background-color: #81d8ce;
	width: 100%;
	font-size: 22px;
	height: 50%;

}

.camera{
	width: 600px;
	height: 300px;
	background: gray;
}

.gafas{
	overflow: auto;
	display: flex;
	width:90vw;
	padding: 20px;
	margin:0px auto;
	 z-index: 999999 !important;
}
.gafas::-webkit-scrollbar {
	width: 60px;
  }
  
  .gafas::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px #81d8ce; 
	border-radius: 10px;
  }

  .gafas::-webkit-scrollbar-thumb {
	background:#81d8ce; 
	border-radius: 10px;
  }
 
  .gafas::-webkit-scrollbar-thumb:hover {
	background:#81d8ce; 
  }
.linea{
	border-bottom:10px solid rgba(25,118,118,0.7);
	padding-top: 34px !important;
	text-align: center;
	display: block !important;
}
.footer{
	border-top:10px solid rgba(25,118,118,0.7);
	padding-top: 34px;
	padding-bottom: 34px;
	background:#3a3a3a;
	color: white;
}
.footer > .faq > ul{
		display: block;
		list-style-type: none;
		font-size: 14px;
		padding: 0 0 0 40px  !important;
}
.footer > .faq > ul>li:hover{
	color: rgba(25,118,118,0.7) ;
}
.footer > .contact{
	display: block;
	text-align: center;
}
.footer > .contact > ul{
	display: block;
	text-align: center;
	list-style-type: none;
	font-size: 14px;
	padding: 0 !important;
}
.footer > .contact > ul > li> img{
	width: auto;
	height: 30px;
}
.card-img-top{
	border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
}
button.probar{
	color: #ffffff;
    border-color:1px solid #81d8ce;
    background-color:#81d8ce;
	padding: 8px 26px;
	z-index: 1000;
	border-radius: 2px;
	position: relative;

}
.card{
	margin: 2px;
	border: none !important;
    border-radius: none !important;
}
.card-body> h4{
	position: absolute;
	top:0 !important;
}
.card-img-top:hover{
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1)
}
.efecto-espejo {
	 -webkit-box-reflect: below -25px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
   }
.dropdown-menu {
	border: none !important;
    border-radius: none !important
}
.navbar{
	padding:15px 10px 15px 50px !important;
}

button:focus {
    outline: none !important;
}

#jeeFaceFilterCanvas {
  position: absolute; 
  max-height: 100%;
  max-width: 100%;
  left: 50%;
  top: 50%;
  width: 100vmin;
  transform: translate(-50%, -50%) rotateY(180deg);
} 

#buttonarea{
	position:absolute;
	width:15vw;
	height:15vh;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	z-index:20;
	overflow:hidden;
}
	#takepic,
	#takevideo,
	#stopvideo{
		display:block;
		width:40px;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		height:40px;
		border:0;
		text-indent:-999px;
		overflow:hidden;
		background-color: black;
		z-index: 999999 !important;
	}
	#takepic{
		background:url(../images/btn_startvideo.png) center center/contain no-repeat;
	}
	#takevideo{
		background:url(../images/btn_startvideo.png) center center/contain no-repeat;
	}
	#stopvideo{
		background:url(../images/btn_stopvideo.png) center center/contain no-repeat;
	}
/* boton por defecto de la camara*/
.a-enter-vr,
.a-enter-vr-button{
	hidden:true;
}
.a-enter-vr-button {
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20245.82%20141.73%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Emask%3C%2Ftitle%3E%3Cpath%20class%3D%22a%22%20d%3D%22M175.56%2C111.37c-22.52%2C0-40.77-18.84-40.77-42.07S153%2C27.24%2C175.56%2C27.24s40.77%2C18.84%2C40.77%2C42.07S198.08%2C111.37%2C175.56%2C111.37ZM26.84%2C69.31c0-23.23%2C18.25-42.07%2C40.77-42.07s40.77%2C18.84%2C40.77%2C42.07-18.26%2C42.07-40.77%2C42.07S26.84%2C92.54%2C26.84%2C69.31ZM27.27%2C0C11.54%2C0%2C0%2C12.34%2C0%2C28.58V110.9c0%2C16.24%2C11.54%2C30.83%2C27.27%2C30.83H99.57c2.17%2C0%2C4.19-1.83%2C5.4-3.7L116.47%2C118a8%2C8%2C0%2C0%2C1%2C12.52-.18l11.51%2C20.34c1.2%2C1.86%2C3.22%2C3.61%2C5.39%2C3.61h72.29c15.74%2C0%2C27.63-14.6%2C27.63-30.83V28.58C245.82%2C12.34%2C233.93%2C0%2C218.19%2C0H27.27Z%22%2F%3E%3C%2Fsvg%3E) 50% 50%/70% 70% no-repeat rgba(0,0,0,.35);
    border: 0;
    bottom: 0;
    cursor: pointer;
	position: fixed;
    top: 0;
    width: 80px;
    height: 80px;
    transition: background-color .05s ease;
    -webkit-transition: background-color .05s ease;
    z-index: 9999;
}
/* media queries*/
@media only screen and (max-width: 766px) and (min-width: 200px) {
	.nav-item{
		border:1px solid #eaeaea !important;
		padding:10px;
		background:#f9f9f9;
	}
	.navbar{
		padding: 0 !important;
	}
	.dropdown-menu{
		background:#f9f9f9 !important;
		border: none !important
	}
	.navbar > img{
		margin:12px 20px 12px 5px;
	}
	.dropdown-item {
		display: block;
		width: 100%;
		padding: 15px !important;
		clear: both;
		font-weight: 400;
		color: #212529;
		text-align: inherit;
		white-space: nowrap;
		background-color: transparent;
		border-top: 1px solid #eaeaea !important;
	}
	.dropdown-item:hover {
		display: block;
		width: 100%;
		padding: 15px !important;
		clear: both;
		font-weight: 400;
		color: #81d8ce !important;
		text-align: inherit;
		white-space: nowrap;
		background-color: transparent;
		border-top: 1px solid #eaeaea !important;
	}
	.dropdown-item:focus {
		display: block;
		width: 100%;
		padding: 15px !important;
		clear: both;
		font-weight: 400;
		color: #81d8ce !important;
		text-align: inherit;
		white-space: nowrap;
		background-color: transparent;
		border-top: 1px solid #eaeaea !important;
	}
	.footer > .faq > ul{
		display: block;
		list-style-type: none;
		font-size: 14px;
		padding: 0 !important;
		text-align: center;
}

}
@media only screen and (min-width: 767px){
	.nav-item{
		border:none !important;
		padding:10px;
		background:none !important;
	}
	.navbar{
		padding: 0 !important;
	}
	.dropdown-item{
		background:white !important;
		border:1px solid #eaeaea !important;
		border-radius: 0 !important

	}
	.dropdown-menu{
		border-radius:none !important;
		padding: 0 !important;
	}

}