
@media screen and (min-width: 508px){

.larger{
    max-width: 50%;
}

h1, h2, h3, .plain-strong {
    font-size: 1.3rem;
}

p{
    font-size: 1rem;
}

.strong-silver{
    font-size: 1.5rem;
}

.increase-font{
    font-size: 1.2rem;
}

}

/* ++++++++END 508px SIZE SCREEN  MEDIA QUERY+++++++++*/

@media (min-width: 768px){

#wrapper{
    max-width: 1200px;
    grid-template-columns: 1fr 140px;
    grid-gap: 0.5rem;
    grid-template-areas: 
    "header header"
    "main aside"
    "bottom-logos bottom-logos"   
    "footer footer ";
}
    
aside {
    grid-area: aside;
    display: grid;
}
 
#bottom-logos {
    grid-area: bottom-logos;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: space-around;
    padding-top: 1rem;
} 

main{
    grid-template-columns: 3fr 1fr;
    padding-left: 1rem;
    grid-template-areas: 
    "article-left article-right";
}

nav{
    grid-template-columns: 90px minmax(200px, auto) 1fr;
    grid-template-rows: 90px;
    justify-items: end;
    grid-template-areas:
    "logo . menu";
}

img{
    width: 80%;
}

#important{
    border-top: black 1px solid;
    border-bottom: black 1px solid;
}

section{
    padding-top: 0.5rem;
}

.strong-plain{
    padding: 0;
}

header li{
    display: inline-block;
}
header li a{
    padding: 1rem 0.8rem;
}

header li a:hover,
header .menu-btn:hover {
  background-color: gray;
  border-bottom: 10px solid black;
}

header .menu{
    max-height: none;
    background-color: white;
}

header .menu-icon, #space{
    display: none;
}

.larger{
    max-width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

aside img, #bottom-logos img{
    border: solid black 1px;
    border-radius: 1rem;
       /* box-shadow: 1px 5px 4px 0 rgba(0,0,0,.1);*/
}
    
.right img{
    margin-bottom: 2rem; 
}

main li{
    line-height: 2.5rem;
}


p{
    font-size:0.8rem ;
}

}

@media (max-width: 1000px){

#wrapper{
    grid-template-areas: 
    "header header"
    "main main"
    "bottom-logos bottom-logos"   
    "footer footer ";
}

aside{
    display: none;
}

}



