@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
@import url(https://fonts.googleapis.com/css?family=Arimo);

html, body{
	margin: 0;
	padding: 0;
	/*background-color: #0077BB;*/
}

body{
	background-image: url(images/site/gradient.png);
	background-position: 0% 0%;
	background-size: cover;
	background-repeat: repeat-x ;
	background-color: #0077BB;

}

header{
	display: inline-block;
	float: left;
	width: 100%;
	min-height: 220px;
	/*background-color: blue;*/
	color: #ffffff;
}


img.btn-whatsapp {
display: block !important;
position: fixed;
width: 64px !important;
height: 64px !important;
z-index: 9999999;
bottom: 30px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}

img.btn-whatsapp:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1); 
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
} 

img.btn-mercado {
display: block !important;
position: fixed;
width: 64px !important;
height: 64px !important;
z-index: 9999999;
bottom: 120px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}

img.btn-mercado:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1); 
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
} 

#contenedorheader{
	display: inline-block;
	float: left;
	width: 100%;
	height: 130px;
	margin-top: 60px;
	/*background-color: green;*/
}
#logo1{
	display: inline-block;
	float: left;
	width: 20%;
	margin-left: 10%;
	height: 130px;
	/*background-color: gray;*/
}
#llama{
	display: inline-block;
	float: left;
	width: 10%;
	min-width: 100px;
	height: 130px;
	margin-left: 25%;
	/*background-color: crimson;*/
}
#llamar{
	text-align: center;
	margin-top: 40px;
	padding: 10px;
	background-color: #0077BB;
	font-family: 'Open Sans', sans-serif;
}
#menucontainer{
	display: inline-block;
	float: left;
	width: 20%;
	height: 130px;
	margin-left: 5%;
	font-family: 'Open Sans', sans-serif;
	/*background-color: red;*/
	overflow: visible;
	position: absolute;
	z-index: 10000;
}
#men{
	text-align: center;
	margin-top: 60px;
}
section{
	display: inline-block;
	float: left;
	width: 100%;
	/*background-color: orange;*/
	padding-bottom: 80px;
}
#relojes{
	display: inline-block;
	float: left;
	width: 100%;
	height: 700px;
	/*background-color: rgba(10,10,10,.5);*/
}
#textosection{
	display: inline-block;
	float: left;
	width: 50%;
	max-width: 500px;
	min-width: 250px;
	/*background-color: red;*/
	background-image: url(images/site/mainbar.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 300;
	right: 5%;
	margin-top: 24px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	font-size: 1.5em;
	padding-left: 20px;
}
#textosection p{
	margin: 12px auto;
}
footer{
	display: inline-block;
	float: left;
	width: 100%;
	/*background-color: red;*/
	background-image: url(images/site/footer.png);
	background-size: cover;
	background-repeat: no-repeat;
	height: 240px;
	font-family: 'Arimo', sans-serif;
}
#contenedorfooter{
	display: inline-block;
	float: left;
	width: 90%;
	height: 75px;
	margin: 150px 5% 0 5%;
	/*background-color: blue;*/
}
#aviso{
	display: inline-block;
	float: left;
	width: 50%;
	/*background-color: gray;*/
	height: 75px;
}
#textofooter{
	text-align: center;
	margin-top: 40px;
}
#descarga{
	display: inline-block;
	float: left;
	width: 15%;
	margin-left: 7%;
	height: 75px;
	/*background-color: yellow;*/
	text-align: center;
}
#social{
	display: inline-block;
	float: left;
	width: 15%;
	margin-left: 7%;
	margin-top: 15px;
	height: 50px;
	/*background-color: green;*/
}
#face{
	display: inline-block;
	float: left;
	margin-left: 0;
	margin-top: 0;
	height: 40px;
	/*background-color: blue;*/
}
#tw{
	display: inline-block;
	float: left;
	margin-left: 20px;
	margin-top: 5px;
	height: 30px;
	/*background-color: blue;*/
}
#nos{
	display: inline-block;
	float: left;
	width: 15%;
	min-width: 100px;
	margin-left: 10%;
	text-align: right;
	margin-top: 5%;
	padding-right: 30px;
	padding-left: 20px;
	/*background-color: red;*/
	background-image: url(images/site/promobar.png);
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
}
#introduccion{
	display: inline-block;
	float: left;
	width: 70%;
	margin-left: 15%;
	margin-top: 2%;
	text-align: left;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	
} 
#introduccion h4{
	color: #F7941E;
	
}
#arriba{
	display: inline-block;
	float: left;
	width: 100%;
	/*background-color: gray;*/
}
#textrelojes{
	display: inline-block;
	float: left;
	width: 30%;
	min-width: 200px;
	margin-left: 10%;
	/*background-color: red;*/
	background-image: url(images/site/promobar.png);
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
}
#textrelojes p{
	margin-left: 35px;
}
.prod{
	display: inline-block;
	float: left;
	width: 20%;
	/*background-color: green;*/
	margin-left: 10%;
	margin-top: 30px;
	height: 260px;
}
.reloj{
	display: inline-block;
	float: left;
	width: 100%;
	height: 70%;
	/*background-color: red;*/
	overflow: hidden;
}
.reloj img{
	display: block;
	margin: 0 auto;
	height: 100%;
	max-width: 100%;
	vertical-align: text-top;
}
.nombre{
	display: inline-block;
	float: left;
	width: 100%;
	text-align: center;
	height: 5%;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
}
.nombre2{
	display: inline-block;
	float: left;
	width: 100%;
	margin-top:13%;
	text-align: center;
	font-family: 'Arimo', sans-serif;
}
.nombre2 p{
	width: 50%;
	margin-left: 25%;
	color: rgb(255, 255, 255);
	background-color: #231F20;
	border-radius: 20%;
	cursor: pointer;
}
#contenedorproductos{
	display: block;
	margin: 80px auto 0 auto;	
	width: 100%;
	max-width: 960px;
	background-color: purple;
}
#baterias{
	display: inline-block;
	float: left;
	width: 30%;
	/*background-color: blue;*/
	margin-left: 10%;
	margin-top: 5%;
	clear: both;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
}
.prodpuls{
	display: inline-block;
	float: left;
	width: 35%;
	/*background-color: green;*/
	margin-left: 10%;
	margin-top: 50px;
	height: 280px;
}
#contenedorpromocion{
	display: inline-block;
	float: left;
	width: 80%;
	margin-left: 10%;
	margin-top: 50px;
	height: auto;
	padding-bottom: 20px;
	/*background-color: red;*/
	border: 2px solid #BCBEC0;
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#promocion{
	display: inline-block;
	float: left;
	width: 100%;
	background-color: #BCBEC0;
	text-align: center;
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;

}
#letras{
	display: inline-block;
	float: left;
	width: 30%;
	/*background-color: gray;*/
	/*background-color: rgba(20,20,20,0.1);*/
	margin-left: 2%;
	margin-top: 2%;
	height: auto;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;

}
#relojito{
	display: inline-block;
	float: left;
	width: 30%;
	/*background-color: green;*/
	margin-left: 5%;
	margin-top: 2%;
	height: 200px;
}
#relojito img{
	display: block;
	height: 100%;
	margin: 0 auto;
}
#info{
	display: inline-block;
	float: left;
	width: 20%;
	/*background-color: purple;*/
	margin-top: 100px;
	margin-left: 5%;
	height: auto;
	text-align: center;
	font-family: 'Arimo', sans-serif;
	cursor: pointer;
}
#datos{
	display: inline-block;
	float: left;
	width: 20%;
	margin-left: 5%;
	margin-top: 5%;
	height: 250px;
	/*background-color: red;*/
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#direccion{
	display: inline-block;
	float: left;
	width: 25%;
	margin-left: 10%;
	margin-top: 5%;
	height: 450px;
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#mapa{
	display: inline-block;
	float: left;
	width: 20%;
	margin-left: 10%;
	margin-top: 5%;
	height: 400px;
	background-color: gray;
}
#paginatorcontainer{
	display: inline-block;
	float: left;
	width: 100%;
}

#paginator{
	display: block;
	clear: both;
	height: 20px;
	margin: 100px auto 0 auto;
	/*background-color: orange;*/
	max-width: 302px;
}

.pagboton{
	
	display: inline-block;
	float: left;
	background-color: #D7D7D7;
	line-height: 1px;
	font-family: 'Raleway', sans-serif;
	margin-left: 10px;
	min-width: 5px;
	padding:0 5px;
	color: #ffffff;
	text-decoration: none;
}


#menu, #menuprod, #menupared{
	display: none;
}

#menu{
	background-color: #206BB8;
	padding: 0 0 0 5px;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	text-decoration: none;

}
#menu a{
	color: inherit;
	text-decoration: none;

}
#menu li{
	width: 100%;
	text-align: left;

}
#menuprod li{
	width: 100%;
}

.is-hover{
	color: #206BB8;
	background-color: #fff;
}

.is-hover2{
	background-color: #206BB8 !important;
	color: #fff !important;
}




li:active{
	color: #DABD38;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#show-menu:checked ~ #menu{
    display: block;
}
#show-prod:checked ~ #menuprod{
    display: block;
}
#show-pared:checked ~ #menupared{
    display: block;
}

ul{
	list-style-type: none;
}


#list {
  width: 100%;
  height: 450px;
  position: absolute;
  z-index: 1;
}

#list img { float: left; }

#buttons {
  position: absolute;
  height: 10px;
  width: 100px;
  z-index: 2;
  bottom: 20px;
  left: 250px;
}

#buttons span {
  cursor: pointer;
  float: left;
  border: 1px solid #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  margin-right: 5px;
}

#buttons .on { background: orangered; }

.arrow {
  cursor: pointer;
  display: none;
  line-height: 39px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 180px;
  background-color: RGBA(0,0,0,.3);
  color: #fff;
}

.arrow:hover { background-color: RGBA(0,0,0,.7); }

#container:hover .arrow { display: block; }

#prev { left: 20px; }

#next { right: 20px; }

.fa-sort-desc{
	color: #DABD38;
}

.infomodal{
	margin-left: 10px !important;
}

@media screen and (max-width: 1080px){
	#datos{
	display: inline-block;
	float: left;
	width: 40%;
	margin-left: 5%;
	margin-top: 5%;
	height: 250px;
	/*background-color: red;*/
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#direccion{
	display: inline-block;
	float: left;
	width: 40%;
	margin-left: 5%;
	margin-top: 5%;
	height: auto;
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#mapa{
	display: block;
	float: unset;
	clear: both;
	width: 80%;
	margin: 5% auto 0 auto;
	height: 400px;
	background-color: gray;
}
#info{
		margin-top: 80px;
	}
}

@media screen and (max-width : 860px){
	#aviso{
		width: 100%;
		height: 40px;
	}
	footer{
		height: 280px;
	}
	#textofooter{
		margin-top: 10px;
	}
	#descarga{
		width: 40%;
		margin-left: 10%;
		height: 35px;
	}
	#social{
		width: 15%;
		height: 35px;
		margin-left: 10%;
	}
	#face{
		margin-top: 5%;
	}
	#tw{
		margin-top: 5%;
	}
	#info{
		margin-top: 80px;
	}
}
@media screen and (max-width : 750px){
	#aviso{
		height: 30%;
	}
	#textofooter{
		margin-top: 5px;
	}
	#descarga{
		height: 53px;
	}
	#social{
		height: 53px;
		width: 20%;
	}
	#face{
		margin-top: 8%;
	}
	#tw{
		margin-top: 8%;
	}
	#datos{
	display: inline-block;
	float: left;
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
	height: 250px;
	/*background-color: red;*/
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#direccion{
	display: inline-block;
	float: left;
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
	height: auto;
	color: #fff;
	font-family: 'Arimo', sans-serif;
}
#mapa{
	display: block;
	float: unset;
	clear: both;
	width: 80%;
	margin: 5% auto 0 auto;
	height: 400px;
	background-color: gray;
}

}
@media screen and (max-width : 1010px){
	#textrelojes{
		width: 40%;
	}
}
@media screen and (max-width : 760px){
	#textrelojes{
		width: 50%;
	}
	.prod{
		width: 35%;
		margin-left: 10%;
	}
	#contenedorpromocion{
		width: 80%;
		margin-left: 10%;
	}
}
@media screen and (max-width : 690px){
	#textofooter{
		margin-top: 0;
	}
	#aviso{
		height: 40px;
	}
	#descarga{
		/*display: none;*/
		width: 50%;
		margin-left:25%;
		clear: both;
	}
	/*#contenedorfooter{
		height: 300px;
	}*/
	footer{
		height: 300px;
	}
	#social{
		height: auto;
		margin-left: 45%;
		width: 30%;
		margin-top: 10px;
	}
	#face{
		margin-top: 0;
	}
	#tw{
		margin-top: 5px;
	}
	#textrelojes{
		width: 30%;
	}
	#contenedorpromocion{
		width: 80%;
		margin-left: 10%;
	}
}
@media screen and (max-width : 580px){
	#relojito{
		width: 80%;
		margin-left: 10%;
	}
	#info{
		width: 80%;
		margin-left: 10%;
		margin-top: 0;
	}
	#contenedorpromocion{
		/*height: 550px;*/
	}
	#letras{
	width: 80%;
	margin-left: 10%;
	}

	#llama{
	/*display: none;*/
	display: inline-block;
	float: left;
	width: 50%;
	min-width: 100px;
	height: 130px;
	margin-left: 25%;
	/*background-color: crimson;*/
	}

section{
	margin-top: 100px;
}
#logo1{
	display: block;
	float: unset;
	width:236px;
	margin: 0 auto;
	height: 130px;
	/*background-color: gray;*/
}
	#menucontainer{
	display: inline-block;
	float: right;
	width: 90%;
	height: auto;
	right: 5%;
	font-family: 'Open Sans', sans-serif;
	/*background-color: red;*/
	overflow: visible;
	position: absolute;
	z-index: 10000;
}
#men{
	text-align: center;
	margin-top: 0;
}

img.btn-whatsapp {
display: block !important;
position: fixed;
width: 54px !important;
height: 54px !important;
z-index: 9999999;
bottom: 30px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}

img.btn-whatsapp:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1); 
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
} 

img.btn-mercado {
display: block !important;
position: fixed;
width: 54px !important;
height: 54px !important;
z-index: 9999999;
bottom: 100px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}

img.btn-mercado:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1); 
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
} 
}
@media screen and (max-width : 540px){
	#textrelojes{
		width: 40%;
	}
	.prod{
		width: 50%;
		margin-left: 25%;
		height: 280px;
	}
	.prodpuls{
		width:50%;
		margin-left: 25%;
	}
}
/*@media screen and (max-width : 490px){
	#llama{
		width: 25%;
		margin-left: 10%;
	}
}*/
@media screen and (max-width : 440px){
	#social{
		width: 40%;
		margin-left: 30%;
	}
	#face{
		margin-top: 3%;
	}
	#tw{
		margin-top: 3%;
	}
	#nos{
		width: 30%;
	}
	#textrelojes{
		text-align: center;
	}
	.prod{
		width: 60%;
		margin-left: 20%;
	}
}
@media screen and (max-width : 420px){
	#relojito{
		width: 80%;
		margin-left: 10%;
	}
	#info{
		width: 80%;
		margin-left: 10%;
	}
	#contenedorpromocion{
		height: 550px;
	}
	footer{
		height: 350px;
	}
	#descarga{
		margin-top: 20px;
	}
	#textofooter{
		margin-top: 30px;
	}
	#social{
		margin-top: 20px;
		margin-left: 35%;
	}

}
@media screen and (max-width : 370px){
	/*footer{
		height: 120px;
	}*/
	/*#contenedorfooter{
		height: 100px;
	}*/
	#aviso{
		height: 60px;
	}
	#textrelojes{
		width: 60%;
	}
	.prodpuls{
		width: 60%;
		margin-left: 20%;
	}
}

@media screen and (max-width : 370px){
	footer{
		height: 430px;
	}
	#contenedorfooter{
		margin-top: 190px;
	}
	#social{
		margin-top: 50px;
	}
	
}