@media screen and (min-width: 481px){
    .mobile {
        display: none;
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    body{
        color: #000;
    }
}

@media only screen and (min-width: 481px) {
    nav li {
        display: inline-block;
    }
}

/* Media Query for Tablet Viewport */
@media screen and (min-width: 630px), print {
    /* Tablet viewport: Show Tablet-desktop class, hide mobile class */

.tablet-desktop{
    display: block;
   }

   .mobile{
    display: none;
}

/* Tablet Viewport: Style rule for header */
header{
    position: static;
    padding-bottom: 2%;
}
}

/* Tablet Viewport: Style rules for nav area */
nav li{
    border-top: none;
    display: inline-block;
    border-right: 1px solid #ff8000;
}

nav li:last-child{
    border-right: none;
}

nav li a{
    padding: 0.1em 0.75em;
}

/* Tablet Viewport: Style rules for main content area */
main ul{
    margin: 0 0 4% 10%;
}

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
}

.pic-text{
    font-size: 1em;
    padding: 10px;
}

aside {
    text-align: center;
    font-size: 1.25em;
    font-style: italic;
    font-weight: bold;
    padding: 2%;
    background-color: rgba(204, 204, 204, 0.5);
    box-shadow: 5px 5px 8px #000;
    text-shadow: 5px 5px 5px #b3b3b3;
    border-radius: 0 15px;
}

#Racoons{
    background: linear-gradient(to right, #ff8000, #fbff00);
}

.tel-num {
    font-size: 1.25em;
}

.map {
    width: 600px;
    height: 450px;
  }
/* Media Query for Desktop Viewort */
@media screen and (min-width: 1015px), print{
    /* Desktop Viewport: Style rule for header*/
    header{
        width: 25%;
        float: left;
        padding-bottom: 0;
    }

    /* Desktop viewport: Style rules for nav area */
    nav{
        float: right;
        width: 70%;
        margin: 4em 1em 0 0;
    }

    nav ul{
        text-align: right;
    }

    nav li{
        border: none;
    }

    nav li a{
        padding: 0.5em 1 em;
    }

    nav li a:hover{
        color:#fbff00;
        background-color: #ff9100;
    }
    /* Desktop Viewport: Style Rules for main content */
    main{
        clear: left;
    }
    main h1 {
        font-size: 1.8em;
    }

    article h3{

    font-size: 1.75em;
}

    #Raccoons {
        width: 29%;
        float: left;
        margin: 0 2%;
    }
    #tablet-desktop{
        clear: left;
    }

}

/* Media Query for Large Desktop Viewports */
@media screen and (min-width: 1921px){
    #container{
        width: 1920px;
        margin: 0 auto;
    }

}