body 
    {margin: 0px;
    padding:0px;}

#parent 
    {width: auto;
    height: auto; 
    background-color: #875d51; 
    color: white; }

#header 
    {width: auto; 
    height:250px; 
    background-color: #573d36;
    display: flex;}

#logo 
    {width: 300px; 
    height: 250px; 
    margin-left: 280px;}

#logo img 
    {width: 100%; 
    height: 100%;}

#banner 
    {width: 600px; 
    height: 250px; 
    margin-left: 80px;}

#banner h1 
    {font-size: 85px; 
    font-family: 'Satisfy', cursive; 
    text-align: center; 
    margin: 20px 0px 0px;}

#banner h2 
    {font-size: 40px; 
    font-family: 'Lobster Two', cursive; 
    text-align: center; 
    margin: 25px 0px 0px;}

#navbar 
    {width: auto; 
    height:80px; 
    background-color: #573d36;
    display: flex;
    justify-content: space-evenly;}

.nav 
    {width: 370px; 
    height: 50px;}

.nav h2 
    {font-size: 25px; 
    font-family: 'Lora', serif; 
    text-align: center;}

a:link, a:visited, a:active 
    {text-decoration: none; 
    color:white;}

#slider 
    {width: auto; 
    height: 400px; 
    animation: slides 10s infinite;}

@keyframes slides
{
    20% {background-image: url(images/slide1.jpg); background-size: 100% 100%; }
    40% {background-image: url(images/slide2.jpg); background-size: 100% 100%; }
    80% {background-image: url(images/slide3.jpeg); background-size: 100% 100%; }
    100% {background-image: url(images/slide4.jpg); background-size: 100% 100%; }
}

#content 
    {width: 700px; 
    height: auto;  
    margin: auto;}

#content h1 
    {font-size: 50px;  
    text-align: center; 
    font-family: 'Lobster Two', cursive;}

#content p 
    {font-size: 30px; 
    text-align: center; 
    font-family: 'Lora', serif;}

#product 
    {width: auto;; 
    height: auto; 
    margin: auto;}

#product h1 
    {font-size: 50px;  
    text-align: center; 
    font-family: 'Lobster Two', cursive;}

.row 
    {width: auto; 
    height: auto; 
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;}

.cont 
    {width: 350px; 
    height: 700px;}

.img 
    {width: 350px; 
    height: 350px;}

.img img 
    {width: 100%; 
    height: 100%;}

.name 
    {width: 350px; 
    height: 45px;}

.name h2 
    {font-size: 37px; 
    font-family: 'Lobster Two', cursive; 
    text-align: center; 
    margin: 5px 0px 1px;}

.desc 
    {width: 350px; 
    height: 300px;}

.desc p 
    {font-size: 25px; 
    font-family: 'Lora', serif; 
    text-align: center; 
    margin: 5px 0px 0px;}

#footer 
    {width: auto; 
    height: 120px; 
    background-color: #573d36;}

#contact 
    {width: 240px; 
    height: 120px; 
    margin: auto;}

#contact h2 
    {font-size: 30px; 
    font-family: 'Lobster Two', cursive; 
    text-align: center; 
    margin: 0px 0px 10px;}

.smlcont 
    {width: 60px; 
    height: 60px; 
    float: left; 
    margin-left: 20px;}

.smlcont img 
    {width: 50px;
    height: 50px;}

@media (max-width: 1024px)
{
    #logo {
        margin-left: 60px;
        width: 450px; }

    #banner {
        overflow: hidden;
        margin-left: 50px; }

    #banner h1 {
        font-size: 70px; }

    #content {
        width: 450px; }
    
    #content h1 {
        font-size: 42px; }
    
    #content p {
        font-size: 25px; }
    
    #product h1 {
        font-size: 42px; }
    
    .row {
        flex-direction: column;
        align-items: center; }

}