/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Oxygen');

body{
	font-family: 'Lato', sans-serif;
	font-size:17px;
	    background-color: #000;
}

img{
	max-width:100%;
	height:auto;
}


#frase{
	color:#94ce55;
	text-align:center;
	font-size:25px;
	font-weight:bold;
}

.blanco{
	background-color:#fff;
	display: block;
    align-items: center;
	width: 100%;
}

.navbar-inverse .navbar-nav>li>a.selected {
    background-color: #337ab7;
	color: #fff;
}

h3,
h2{
	color:#004588;	
}

.link1{
	color: #339eb7;
	text-decoration:none;
}


.link1:hover{
	color: #ccc;
	text-decoration:none;
}


#presentacion{
	width:100%;
	padding:5% 15%;
	text-align:center;
}

.bg-imagen{
	padding: 6% 0%;
	background:url(../imagenes/bg10.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*position: relative;*/
    overflow-x: hidden;
    width: 100%;
	margin-top:15px;

}


.bg-imagen-sol{
	padding: 6% 0%;
	background:url(../imagenes/bg4.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    /*position: relative;*/
    overflow-x: hidden;
    width: 100%;
	margin-top:15px;
	background-position: top center;

}



.bg-imagen-receta{
	padding: 6% 0%;
	background:url(../imagenes/receta2.jpg) no-repeat;
    background-attachment: fixed;
    background-size:cover;
    /*position: relative;*/
    overflow-x: hidden;
    width: 100%;
	margin-top:15px;
	background-position: top center;

}

.frase-blanca{
	width:100%;
	text-align:center;
	padding:3% 1%;
	color:#fff;
	font-size:55px;
	 font-weight: bold;
	 font-family: 'Oxygen', sans-serif;
	 text-shadow: 3px 3px 10px #545454;
}

.right{
	text-align:right;
}


.round{
-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}	
	
	

#contacto-info,
#consultas{
	width:50%;
	float:left;
	padding:2%;
}	

#catalogos{
float: left;
    padding: 2% 15%;
    width: 100%;
}


#empresa{
	max-width:100%;
	float:left;
	padding: 5% 20%;
	overflow: hidden;
}	



#enviado-ok{
	width:100%;
	float:left;
	padding:10%;
	text-align:center
}	

#contacto{
background-color: #194590;
color:#fff;
}


.ver-gafas{
    width: 70%;
    float: left;
    text-align: right;
    height: 200px;
}

.gafas-titulo{
	    padding: 3%;
    background-color: rgba(2,2,2,0.1);
    text-align: left;
    top: -50px;
    position: relative;
    z-index: 5;
    width: 60%;
    float: left;
}
.gafas-bot{
	 margin-top: -40px;
    float: right;
}

.domicilio,
.telefono,
.email,
.facebook{
	margin-bottom:0.5em;
  	text-indent:0.4em;
  	height: 30px;
	}

.domicilio{  list-style-image:url(../imagenes/location.png); 	}
.telefono{  list-style-image:url(../imagenes/phone.png); }
.email{    list-style-image:url(../imagenes/email.png); 	}
.facebook{   list-style-image:url(../imagenes/facebook.png);	}
.instagram{   list-style-image:url(../imagenes/instagram.png); }
	
.destaca {
    background-color: rgba(3,3,3,0.5);
    color: #00ACDE;
    padding: 5px;
    font-size: 24px;
    line-height: 24px;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 5px;
	margin-top: 5px;
}

.encabezado{
	    padding: 1%;
		overflow:hidden;
		background-color: #000;
}


.navbar-inverse {
   /* height: 100px;
    margin-top: -55px;*/
	background: #fff;
}

.navbar-inverse ul{
	/*margin-top: 33px;*/
	 margin-bottom: 9px;
	}  
	
#logo{
	width:50%;
	float:left;
	text-align:left;
	padding:2%;
}

.linea{
	width:100%;
	height:2px;
	background-image:url(../imagenes/linea.jpg);
	background-position:center;
	}

#frase-focus{
	width:50%;
	float:left;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	color: #004588;
	line-height:34px;
}
	
	.texto1{
		font-size:18px;
		color: #000;
	}
	
	
	#anteojos,
	#anteojos2{
		padding:50px 0px;
	}
	
	.producto-anteojo{
	width:23%;
	height:auto;
	margin: 8px 1px;
	float:left;
	padding:0%;
	text-align:center;

}

.temporada{
	width: 100%;
    text-align: center;
    font-size: 30px;
    color: #004588;
    padding: 2%;
}

	
	/*=========  Image Overlay ==================*/

.producto{
	width: 40%;
    height: auto;
    margin: 5%;
    float: left;
    /* padding: 1%; */
    text-align: center;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
 }

.image-overlay-content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0; }

.overlay-fade-in p {
  letter-spacing: 0.15em;
  color: #f4f4f4;
  font-size: 28px;
  opacity: 0;
  transition: all 0.2s linear; }
.overlay-fade-in img {
  transition: all 0.2s linear; }
.overlay-fade-in .image-overlay-content {
  opacity: 0;
  /*background-color: rgba(0, 0, 0, 0.4);*/
  transition: all 0.4s ease-in-out; }
.overlay-fade-in h2 {
  color: #f2f2f2;
  font-size: 1.8rem;
  margin-top: 40%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.7); }
  
.overlay-fade-in .button {
 display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    /*background: #FFF;
    color: #666;
     box-shadow: 0 0 1px #000; */
    position: relative;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    top: 35%;
  }

  .overlay-fade-in .button:hover {
    /*box-shadow: 0 0 5px #000; */}
.overlay-fade-in:hover img {
  transform: scale(1.2); }
.overlay-fade-in:hover .image-overlay-content {
  opacity: 1; }
.overlay-fade-in:hover h2, .overlay-fade-in p, .overlay-fade-in .button {
  opacity: 1; }
.overlay-fade-in:hover p {
  transition-delay: 0.1s; }
.overlay-fade-in:hover .button {
  transition-delay: 0.2s; }
  
  
  

	/*===================  footer  =======*/

footer {
	background-color: #000;
	color: #fff;
	font-size: 16px;
	padding: 1% 2%;

}

footer p {
	margin-top: 10px;
}

footer p.credit {
	text-align: right;
}

.bloque{
	margin-bottom:30px;
}

#footer-left,
#footer-right{
	padding:10px 0px;
	}

#footer-right{
		text-align:right;
		}

/*SLIDER*/
 
        ul li {padding: 10px 0;}
        header {display:block;padding:60px 0 20px;text-align:center;position:absolute;top:8%;left:8%;z-index:4;}
        header a {
            font-family: sans-serif;
            font-size: 24px;
            line-height: 24px;
            padding: 8px 13px 7px;
            color: #fff;
            text-decoration:none;
            transition: color 0.7s;
        }
        header a.active {
            font-weight:bold;
            width: 24px;
            height: 24px;
            padding: 4px;
            text-align: center;
            display:inline-block;
            border-radius: 50%;
            background: #C00;
            color: #fff;
        }














/*========================================  media query  =============================*/

@media (max-width: 500px) {
	
	#enviado-ok {
    width: 100%;
    float: left;
    padding: 40% 10%;
    text-align: center;
}
	
	.well {
		text-align: center;
	}
	
	footer {
		text-align:center;
	}
	#footer-left,
	#footer-right{
		text-align:center;
		}
		
	#footer-right{	
		border-top: 1px solid #666;
	}
	
	footer p.credit {
    text-align: center; 
	}
	
	.page-header {
    text-align: center;
	}
	

		#datos-contacto{
			text-align:center;
		}

		
	.destaca {
    width: 90%;

}

#contacto-info,
	#catalogos,
	#consultas,
	#empresa{
		width:100%;
		padding:5%;
	}
	
	#footer-left,
	#footer-right{
		width:100%;
		text-align:center;
		padding:2%;
	}
	
	#footer-right{
		margin-bottom:10px;
	}
	
	.producto{
		width:100%;
		margin-top:10px;
	}
		
		
		.frase-blanca{
	padding:10% 5%;
	font-size:40px;

	}
	
	.temporada{
	    padding: 5%;
	}
	
	.producto-anteojo{
	width:99.5%;
	

	}
	
	
		
}

@media (min-width: 501px) and (max-width: 950px){

	#contacto-info,
	#catalogos,
	#consultas,
	#empresa{
		width:100%;
		padding:5%;
	}
	
	#footer-left,
	#footer-right{
		width:100%;
		text-align:center;
		padding:2%;
	}
	
	#footer-right{
		margin-bottom:10px;
	}
	
	.frase-blanca{
		padding:8% 0%;
		font-size:50px;

	}
	
	.producto-anteojo{
		width:49.5%;
		

	}
		
}


@media (min-width: 951px) and (max-width: 1400px){
	.producto-anteojo{
		width:24.7%;
	

	}
		
}
	
@media (min-width: 1401px){
	
	.producto-anteojo{
		width: 19.8%;
 


	}
		
}