/*
	Web Page: Assembling It
	File Name: C:\xampp\htdocs\www.assemblingit.com\css\hoops.css
	Autor:Fabio Velasquez
	Date: 12/09/2023, 10/16/2023, 9/11/2023
*/
* {padding:0; margin:0px;box-sizing:border-box; font-family:Verdana, Tahoma, Arial;}
.answers {color:darkgreen;
}
#avisoimg{
	width:100vw;
	position:absolute;
	opacity:.1;
	left:0;
	z-index:-1;
}
#baner img{
	width:100%;
	height:20%;
}
body{
	background-image:linear-gradient(to right, #777 , #eee);
	}
#contact{  /* active */
	text-align:center;
	clear:both;
	margin:20px;
}
#contact a{  /* active */
	text-decoration:none;
	font:bold 2em 'Comic Sans MS';
 }
#Container1{/*Container de las marcas*/
	width:100%;
	position:relative;
}
#faqs{color:teal;
	font-family:verdana;
	padding:20px;
	border:2px solid green;
	border-radius:20px;
	background-color:#ccc;
	margin:auto;
	padding:30px;
}
#faqs h2{color:darkblue;
	font-family:'Comic Sans MS';
	font-size:2em;
	font-weight: bolder;
	text-align:center;
}
figcaption{
	background-color:#000;
	color:#fff;
	font-size:10px;
	height:60px;
    padding:3px 10px; 
}
figure img{
	width:100%;
} 
figure{
	width:45%;
	height:70%;
	margin:5px;
	float:left;
	display:block;
	border-radius:10px;
	margin-bottom:5px;
	overflow:hidden;
}
footer {background-color:#333; 
	position:relative;
    color:#eee; 
	display:block;
    font: italic 12px 'Comic Sans MS';
    padding:5px; 
    text-align:center;
    width:100%;
}
#footerfix{
	position:fixed;
	display:block;
	bottom:0;
	left:0;
	width:100%;
}
#formulario{
	padding:0px 15px;
}
#galeria figure{	height:55vw;
}
h1{
	font-family:'Comic Sans MS';
	text-align:center;
	color:teal;
	font-size:1.5em;
}
h2{
	font-size:1.2em;
	font-family:'Comic Sans MS', Verdana, 'Trebuchet MS', sans-serif;
}
h3{
	color:teal;
    font-family:'Comic Sans MS', Verdana, sans-serif;
}
img{
	text-align:center;
	margin:auto;
}
/* #images_container{ */
	/* display:grid; */
	/* grid-template-columns: auto; */
/* } */
#imagenes{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:center;
	margin:auto;
	padding:5px;
	height:100%;
	text-align:center;
	width:100vw;
	max-width:1400px;
}
#initial{ /* Aviso que va en el Banner */
	padding: 3px 10px;
	font:1.2em verdana; 
	text-align:center;
}
#loginform{	
	padding:0px 15px;
}

main{
	/* background-image: url("images/hoops/bkground_02.jpg"); */
	background-repeat: no-repeat;
	margin:auto;
	position:relative;
	
	/*Remove later	*/
	border-radius:10px;
}
main p{
    font-family:tahoma;
    font-size:1em;
}
nav{
    font:1.2em verdana;
    text-decoration:none;	
	z-index:0;
}
nav a{
	color:#aaa;
	text-decoration:none;
}
nav h2{
	text-align:center;
}
nav ul{		
	width:100%;
	text-align:center;
	background-color:#333;
}
nav ul li{	
	border:1px solid #888;
	background-color:#333;
	color:#ccc;
	display:block;
	padding: 10px 0px;
	position:relative;
	text-align:center;
	width:100%;
}    
nav ul li:hover{ /*Working with the first level*/
    background-color:#999; 
    text-align:center;   	
	color:#333;
} 
nav ul li:hover ul{ /*Working with the first level*/
    background-color:red; 
	display:inline-block;
    text-align:left;   
	position:relative;
	position:absolute;
	width:45%;
	left:50%;
} 
nav ul li:hover a{ /*Working with the first level*/
	color:#333;
}
nav ul li:hover ul li a{ /*Working with the first level*/
color:#aaa;}
nav ul li ul li{		
	position:relative;
	left:0;
	float:left;
	width:100%;
	}
nav ul li ul li :hover{		
color:#333;
	}
nav ul li ul li a{color:#888;
}
nav ul ul{		
	background-color:#777;/*background-color:#e5e;*/
	position:absolute;/*position:static; relative absolute */
	position:relative;
	top:35px;
	width:100%; /* Determina el ancho del ul dersplegado */
	z-index:1;
	display:none;
}
.nonessential{
	display:none;
	visibility: hidden;
}
.questions {color:darkred;
margin-bottom:5px;
}
.tumb {width:23%;}
/* *************** Tablet rules ***************** */
@media only screen and (min-width:601px) and (max-width:1023px){
 #galeria figure{		
	height:35vw;
	}
	 #galeria figure figcaption{		
		height:35vw;
	}
	 figure{
		width:31%;
		height:50vw;
		margin:5px;
		float:left;
		display:block;
		border-radius:10px;
	}
	figcaption{
		font-size:10px;
		height:75px;
	}
	footer{
		position:fixed;
		bottom:0;
		width:100%;
	}
	#imagenes{
		margin:auto;
		padding:5px;
		height:100%;
		text-align:center;
	}
	main p{
		font-family:tahoma;
		font-size:1em;
	}
	nav ul li{
		color:#ccc;
		border:none;
		display:inline-block;/*Applied*/    
		margin:auto;
		padding: 10px 0px;
		text-align:center;
		width:18%;
	} 
}
/* *************** Desktop rules ***************** */
@media only screen and (min-width:1024px){
	
	#initial{
		font-size:1.5em;
	}
	h1{
		font-size:2em
	}
	figure{
		width:24%;
		margin:5px;
		float:left;
	}
	#galeria figure{
		height:30vw;
	}
	#galeria figurecaption{
		font-size:2em;
		height:80vw;
	}
	#imagenes{
		position:relative;
		margin:5px;
		padding:5px;
		height:100%;
	}
	main{
		position:relative;
		display:block;
		max-width:1400px;
		margin:auto;
	}
	main p{
		font-family:tahoma;
		font-size:1em;
	}
  	nav{
		font:1em verdana;
	}
	nav ul li{
		border:none;
		color:#ccc;
		display:inline-block;
		margin:auto;
		padding: 10px 0px;
		text-align:center;
		width:18%;
	}    
	.nonessential{
		display:inline;
		visibility:visible;
	}
	nav ul li:hover ul{ /*Working with the first level*/
		background-color:#666;  
		display:inline-block;
		color:#222;      
		width:60%;
		left:20%;
	} 
	.tumb {width:12%;
	}
}