/* Acá pueden definir las reglas CSS */
*{
font-family: sans-serif;
}

.logo_home{
width:70px;

}

header {
width : 100%;
color: white;
height:70px;
background-color : black;

font-family: sans-serif;
padding: 15px;
}

nav {
background-color : darkslategrey;
color: white;
padding: 10px;
}

footer {
width : 100%;
background-color : gray;
color: white;
padding: 10px;
}
/*
table, th, td {
border-bottom: 1px solid #ddd;
}

th, td {
padding: 3px;
text-align: center;
}

tr:hover {background-color: #f5f5f5;}

th {
  background-color: black;
  color: white;
}
*/
.linea_menu {
    border-top: 0px solid red;
}

.example {
    position:relative;
    background: rgba(255, 255, 255, 0.9);
    width:100%;
    height:70px;
    border:0px #000 solid;
    margin:10px auto;
    padding:0px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
/* main menu styles */
.nav,.nav ul {
    list-style:none;
    margin: 0;
    padding:0;
}
.nav {
    position:relative;
}
.nav ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}
.nav li {
    float:left;
    position:relative;
}
.nav li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color: black;
    border:1px solid black;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:30px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.nav li:hover > a {
    background:red;
    border-color:black;
    color:#fff;
}
.nav li:hover ul.subs {
    height:auto;
    width:300px;
}
.nav ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
}
.nav li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
}
.nav li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}
.nav ul li a {
    background:black;
    border-color: black;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}
.nav li:hover ul li a {
    line-height:35px;
}
.nav ul li a:hover {
    background:red;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}

@media only screen and (min-width: 768px){
.container {
    display: grid;
    grid-template-columns: 220px 1fr 1fr 50px;
    grid-template-rows: 10px 1fr 1fr;
}

header {
    grid-column: 1 / span 4;
    grid-row: 2 / span 1;
}
.example {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
}
.section1 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
}

.section2 {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}

footer {
    grid-column: 1 / span 3;
    grid-row: 2 / span 2;
}

li {
    padding: 10px;
}

li.element {
    border: 1px solid black;
    border-radius: 5px;
    background-color: lightgreen;
    margin-bottom: 10px;

}

section {
    padding: 20px;
}

.button {
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}



}




@media only screen and (max-width: 768px){
.container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100 px 100px 80px 400px 150px 80px 150px 100px;
}

header {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}
nav {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;

}
.section1 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 2;
}

.section2 {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
}

footer {
    grid-column: 1 / span 1;
    grid-row: 5 / span 5;
}

li.menu {
    padding: 10px;
}

li.element {
    border: 1px solid black;
    border-radius: 5px;
    background-color: lightgreen;
    margin-bottom: 10px;
    padding: 2px;

}

section {
    padding: 20px;
}

.menu {
    display: inline;
}
}