@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,900;1,300&display=swap');
*{
	padding: 0;
	margin: 0;
}

header {
	grid-area: header;
}
nav {
	grid-area: nav;
}
section {
	grid-area: section;

}
article {
	grid-area: article;
}
aside {
	grid-area: aside;
}
footer {
	grid-area: footer;
}

.main {
		max-width: 1080px;
		display: grid;
    grid-template-columns: auto;
   	grid-template-rows: auto auto auto auto auto auto;
    gap: 30px;
    grid-template-areas: "header" "nav" "section" "article" "aside" "footer";
    margin: auto;

    }  
 

  


header, nav, section, article, aside, footer {
        grid-column: 1/6;
    }



h5 {
	color: grey;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
}

.telefonos{
	
    background-color: rgb(6, 0, 90);
    color: white;
    font-size: 18px;
    text-align: center;
  
    height: auto;
    padding: 10px;
}
.link{
	text-decoration: none;
	color: white;
}

.link:hover{
	color:rgb(187, 205, 255);
}

.telefonos-mob{
display: none;
}



h5 a {
	color: grey;
	float: left;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
}

h2 {
	font-family: 'Roboto', sans-serif;
	color: #000000;
	text-decoration: none;
	font-weight: 100;
	font-size: 30px;
	margin-top: 30px;

}
h3 {
	font-family: 'Roboto', sans-serif;
	color: grey;
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;

}

#imagen {
	width:150px; 
	height: 150px;
	display: block;
	margin: 30px auto;
	
}



#contacto {	
	height: 40px;
	background-color:#eaeaea;
	line-height: 40px;
	padding-top: 5px;


}

#contacto ul{	
	background-color:#eaeaea;
	line-height: 25px;

	}

#contacto img:hover {
		height: 30px;
		width: 30px;

}

#informacion {
	display: flex;
	flex-direction: column;
}

#informacion ul li{
	list-style-type: none;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;

}

nav{
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	height: 45px ;

}


nav ul {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	list-style:none;
	margin:0;
	padding:0;
   }
   
  
 
   
   /* enlaces del menu */
   
   nav ul li a {
	display:block;
	color: black;
	text-decoration:none;
	font-size:16px;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	line-height: 45px;
	
	
   }
   
   /* items del menu */
   
   nav ul li {
	position:relative;
	float:left;
	margin:0;
	padding:0;
   }
   
   /* efecto al pasar el ratón por los items del menu */
   
   nav ul li:hover {
	color:black;
   }

   nav ul ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	padding:0;
	
   }
   
   /* items del menu desplegable */
   
   nav ul ul li {
	float:none;
	width:150px
	
   }
   
   /* enlaces de los items del menu desplegable */
   
   nav ul ul a {
	width: 200px;
	border-bottom: 1px solid #999999;
	background-color: white;
	padding-left:10px;
   }
   
   /* items del menu desplegable al pasar el ratón */
   
   nav ul li:hover > ul {
	display:block;
   }



/*nav a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: #002849;
	text-align: center;
	font-size: 25px;
	
	

}

nav input {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: #002849;
	font-size: 25px;
	

}


nav .menu{
	display: none;
}


nav a:hover {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: black;
	
	
}

nav ul{
	list-style-type: none;	
	
}
nav a > li {
	float:left;
	
	
	
}
nav li a {
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color: DimGray;
	text-align: center;
	font-size: 24px;
	display:block;
	
}*/






article {
	display: flex;
	flex-direction: column;
	font-weight: normal;
	justify-content: center;
	margin-top: 50px;
	
}

article ul li {
	list-style: none;
}

.contenedorCards {
	display: flex;
	flex-direction: row;
	font-weight: normal;
	justify-content: center;
	margin-top: 50px;
	
}

.card{
	width: 100%;
}

.card img{
	width: 120px;
	height: 120px;
	margin:auto;
	
}

.descripcion{
	width: 100%;
	display: flex;
	margin-top: 30px;
	font-weight: normal;
}

.contenedor-icono{
	flex: 1 2 120px;
	font-size: 20px;
	margin: 0 50px 0 50px;
}

aside{
	max-width: 1080px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}


.foro{
	background-color: #EFEFEF;
	margin: 30px;
	padding-bottom: 20px;
	margin: auto;


}

p {
	font-family: 'Roboto', sans-serif;
	font-size: 16px ;
	color: black;

}

.iconos{
	width: 150px;
	height: 150px;	
	border-bottom: solid 5px #E5E5E5;
	text-align: center;
}


.iconos2{
	height: 150px;
	width: 150px;
	float: left;
	margin: 10px 0 0 60px;
}

.texto-noticias{
	width: 80%;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
}

.img-foro{
	width: 50%;
}


header li {
	display: inline-block;
	width: 25px;
	height: 25px;
	float:right;
	margin: 0 5px 0 5px;


	
}

.renglon{
	
	display: flex;
	
}





.mapa{
  overflow:hidden;
  position:relative;
  height:300px;

}

.mapa iframe{
	left:0;
	top:0;
	height:300px;
	width:100%;
	position:absolute;

}


.box1 {
	width: 100%;
	display: flex;
	justify-content: center;
	}

.box1-mobile{
	display: none;

}


.boxpenal1 {
	width: 100%;
	height: 200px;
	display: flex;
	background-image: url(../img/asesoria-penal1080.jpg);
	background-size: inherit;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position-x:center ;


	}

.boxpenal1-mobile{
	display: none;

}

.boxlaboral {
	width: 100%;
	height: 200px;
	display: flex;
	margin-top: 30px;
	color:white;
	justify-content: center;
	font-size: 1.5rem;
	align-items: center;
	text-align: center;
	line-height:22px ;
	text-decoration: none;
	background-image: url(../img/laboral-1080.png);
	background-size: inherit;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position-x:center ;

	}
.boxlaboral a{
	text-decoration: none;!important
}

.boxlaboral-mobile{
	display: none;

}

.boxlaboral-mobile600{
	display: none;
}

.boxcivil1 {
	width: 100%;
	height: 200px;
	display: flex;
	background-image: url(../img/asesoria-civil1080.jpg);
	background-size: inherit;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position-x:center ;


	}

.boxcivil1-mobile{
	display: none;

}



form{
	display: flex;
	flex-direction: column;
}

.mb-3{
	font-family: 'Roboto', sans-serif;
}

.divboton{
	width: 100%;
	height: 35px;
	margin-top: 10px;
}



.botones { 
  width: 100px;
  height: 35px;
  

}

.botones:hover {
	-webkit-animation: 1s dobleclick 1;
}

@-webkit-keyframes dobleclick {
  40% {
    -webkit-transform: scale(1.1);
  }
  20%, 60% {
    -webkit-transform: scale(0.8);
  }
}

.btn {
	width: 100%;
	height: 40px;
	border: solid 1px lightgray;
	font-family: 'Roboto', sans-serif; !important

}

.btn:hover{
	background-color:lightgray;
}

article img{
	width: 200px;
	height: 200px;
	margin: auto;
}

article div img{
	width: 100%;
	height: 200px;
	
}


.check{
	width: 25px;
	height: 25px;
	background-color: #ababab;
	color: grey;
	border: solid #ababab 1px;
	margin-top: 10px;
}

.check :focus{
	background-color: #ababab;
	outline: none;
}

.form-check{
	margin: 5px 0 0 5px;
}
.form-check-input{
	margin-top: 0.5em;
}


.spantext{
	width: 100px;
	height: 35px;
	margin-left: 20px;
	margin-bottom: 70px;
	font-size: 15px;
	line-height: 35px;
	font-family: 'Roboto', sans-serif; ;

}
.topnav{
	display: none;
}

.iconos-pages {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin: -280px 50px 50px 50px;
	justify-content: space-between;
	
}


.input-penal{
	flex-direction: column;

}

.buscar-penal{
	width: 100%;
	height: 40px;
	margin: 20px auto;
	border: solid #ababab 1px;
	line-height: 35px;
	padding-left: 10px;
	font-family: 'Roboto', sans-serif;
	color: grey;
	border-radius: 3px;
}

.card-body {
	margin-top:10px;
	overflow: hidden;
}

.card-text{
	max-height: 90px;
	height: 100px;
	overflow: hidden;

}


.col-md-2 img{
	margin: 20px 0 0 10px;
}
 
.carousel-control-next-icon{
	background-color: red;

}
	
#slider{
	width: 100%;
	height: 160px;
	background-image: url(../img/tira-agosto.png);
	
	animation: slider 80s infinite linear;
	overflow: hidden;
}

@keyframes slider {
	to {
		background-position: 4337px;
	}
	
}
 /*-----comienza media query------*/

@media all and (max-width:700px){
	.card-body, .card {
		flex-direction: column;	
		
	}

	





	.main {
		width: 700px;
		
		
	}
	




/*.box1-mobile{
	display: block;
	width: 400px;
	
	
}*/

section{
	margin-top: 20px;
}

.boxpenal1 {
	display: none;


	}

.boxpenal1-mobile{
	height: 200px;
	display: block;
	width: 400px;
	background-image: url(../img/asesoria-penal400.jpg);
	background-size: contain;
	background-attachment: fixed;
	



}
.boxlaboral {
	display: none;
	}

.boxlaboral-mobile{
	height: 200px;
	display: block;
	background-image: url(../img/laboral-400.png);
	background-attachment: fixed;
}


.boxcivil1 {
	display: none;


	}

.boxcivil1-mobile{
	height: 200px;
	display: block;
	background-image: url(../img/asesoria-civil400.jpg);
	background-attachment: fixed;

	



}



nav li {
	display: none;

}
nav {
	border-top: none;
	position: relative;
	z-index: 100;

}




article{
	flex-direction: column;
	padding-left: 10px;
	padding-right: 10px;


}

.contenedorCards{
	flex-direction: column;
	padding-left: 10px;
	padding-right: 10px;

}
.contenedor-icono{
	align-self: center;
	font-size: 20px;
	flex-direction: column;
	margin-top: 30px;
	
}



.renglon{
	width:340px;
	margin-left: 10px;	
	flex-direction: column;
	padding: 10px 10px;
	
}


.legal{
		margin-top:10px;
	}


section ul {
	max-width:400px;
}
section li {
	width:350px;
}
section input select {
	height:40px;
	margin: 30px auto 30px;
	
}
section select{
	width:362px;
}

.texto-noticias{
	width: 100%;
	
}
/* Style the navigation menu */
.topnav {
  /*overflow: hidden;*/
  font-family: 'Roboto', sans-serif;
  border-bottom: solid 1px DarkGray;
  border-top: solid 1px DarkGray;
  display: block;
  z-index: 100;
  margin-top: 60px;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

#myLinks{
	background-color: white;
	
}

/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 7px 16px;
  text-decoration: none;
  font-size: 18px;
  list-style: none;
  
  display: block;
  border-top: solid 1px lightgray;
  text-align: left;
  text-transform: uppercase;

}

/* Style the hamburger menu */
.topnav a.icon {
  background: white;
  display: block;
  color: grey;
  position: absolute;
  top: 1px;
  
}
nav a{
	text-align: center;
	font-size: 35px;
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color:white;
  color: black;
}

/* Style the active link (or home/logo) */
.activenav {
  background-color: white;
  color: #eaeaea;
  text-align: left;
  margin-left: 50px;
  
}

.iconos-pages {
	flex-direction: column;
	margin-top: -235px;
		
}

aside {
	padding-left: 10px;
	padding-right: 10px;
	flex-direction: column;
}



.card-text{
	height: 100px;
	overflow: hidden;

}

.card-body{
		margin-top: 5px;
}

.active {
	margin-left:0px!important; 
}
.telefonos-mob{
	display: block;
	text-align: center;
	background-color: #000544;
	padding:10px;
	color: white;
}
.telefonos{
	display: none;
}




}