/* CSS Document */

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #414141; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

#hi{
	position: absolute;
	top:calc(100% - (100% - 80px));
	width: 100%;
	height:calc(100% - 80px);
	left:0;
	color:#FFFFFF;
	overflow:auto;
}
.mano { cursor:hand; cursor:pointer; }
#mi_menu, a_productos, #a_bongs, #a_grinders, #a_nosotros, #a_contacto, #a_galeria{ cursor:hand; cursor:pointer; }
#sec_contacto, #sec_quienes_somos { width:50%; margin:0 auto; }
#sec_quienes_somos { width:30%; }
#sec_contacto { display:none; }
#res_soc { position:fixed; width:200px; z-index:99999999; top:17px; right:-50px; }
#res_soc a:visited { border:0 none; }
.img_redes { width:40px; height:auto; border:0 none !important; }
.titulo{ font-size:26px; font-weight:bold;}
div#hi2 { position:relative; width:60%; margin:0 auto; }
.div_central { width:45%; margin:0 auto; float:left; overflow:hidden; }
.contenido { width:52%; overflow:auto; float:left; margin-left:3%; /*background-color:#DB3235;*/ }
.img_carousel { width:126px; height:126px; }
.img_second1 { width:10%; height:auto; margin-right:1%; margin-left:33%; }
.img_second2 { width:10%; height:auto; margin-right:1%; }
.img_second3 { width:10%; height:auto; margin-right:1%; }
.img_second4 { width:10%; height:auto; }
/*--------- 	FORMULARIO DE CONTACTO 		-----------*/
input[type=text], input[type=email], textarea{
  width: 98%;
  padding: 12px 20px;
  margin: 8px 1%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  color:#000000;
}
input[type=submit] {
  width: 98%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
    background-color: #45a049;
}
#email_enviado{
  display: none; 
  position: fixed; 
  padding-top:6px; 
  left: 50%; 
  top: 50%; 
  text-align:center; 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
  z-index:9999999999;  
  background-color:#FFFFFF; 
  padding:10px;	 
  border-radius:5px;
  -webkit-box-shadow: 10px -10px 7px -8px #FFFFFF;
  -moz-box-shadow: 10px -10px 7px -8px #FFFFFF;
  box-shadow: 10px -10px 7px -8px #FFFFFF;
}
.fadebox {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%; height: 100%;	
  background-color: black;
  z-index:9999999;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
/*--------- 	/FORMULARIO DE CONTACTO 		-----------*/
/*aviso cookies*/
 #overbox3 {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 999999;
	display: block;
 }
 #infobox3 {
	margin: auto;
	position: relative;
	top: 0px;
	width: 100%;
	text-align:center;
	background-color: #eeeeee;
 }
 #infobox3 p {
	font-size:12px;
	text-align:center;
	margin:-15px 0 0 0;
	font-family: "Droid Sans",sans-serif;
 }
 #infobox3 p a {
	margin-right:5px;
	text-decoration: underline;
 }
 .a_cookies{ color:#000000 !important; font-size:11px;}
 /*fin aviso cookies*/
@media screen and (max-width:1440px){
	div#hi2 { width:80%; }	
}
@media screen and (max-width:1366px){
	div#hi2 { width:85%; }	
	.div_central { width:35%; }
	.contenido { width:62%; }	
	#sec_contacto, #sec_quienes_somos { width:60%; }
}
@media screen and (max-width:1024px){
	div#hi2 { width:100%; }		
	.div_central { width:25%; }
	.contenido { width:72%; }
	.img_carousel { width:100px; height:100px; }
	#sec_contacto, #sec_quienes_somos { width:90%; }
}
@media screen and (max-width:991px){
  .img_redes { width:30px; }
  #res_soc { top:4px; margin-right:-34px; }
  #sec_contacto, #sec_quienes_somos { width:95%; }
  #hi { top:calc(100% - (100% - 43px)); height:calc(100% - 43px); }
}
@media screen and (max-width:400px){
	div#hi2 { width:100%; }		
	.div_central { width:60%; margin-left:20%; }
	.contenido { width:95%; }
	.img_carousel { width:100px; height:100px; }
	.titulo{ font-size:16px; }
	.img_second1 { margin-left:20%; }
	.img_second1, .img_second2, .img_second3, .img_second4 {  width:20%; }
	.img_carousel { width:64px; height:64px; } 
}
@font-face { font-family: supersmoker; src:url(fonts/supersmoker.ttf);	}