body{
    margin: 0;
    padding: 0;
    background: var(--color-lightbrown);
  }
  
.header{
    position: sticky;
    top: 0;
}

.header i{
    font-size: 2em;
    margin: 1.5em;
    color: var(--color-brown);
}

.header img{
    margin: 1em ;
}


/*begin slider*/

.picturessales{
    height: 100vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -5em;
}

.picturessales h1{
    margin-bottom: 1em;
}

  .slider{
    width: 800px;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
    
  }
  
  .slides{
    width: 500%;
    height: 500px;
    display: flex;
  }
  
  .slides input{
    display: none;
  }
  
  .slide{
    width: 20%;
    transition: 0.5s;
  }
  
  .slide img{
    width: 800px;
    height: 500px;
    object-fit: cover;
  }
  
  /*css for manual slide navigation*/
  
  .navigation-manual{
    position: absolute;
    width: 800px;
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  
  .manual-btn{
    border: 2px solid var(--color-brown);
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
  }
  
  .manual-btn:not(:last-child){
    margin-right: 40px;
  }
  
  .manual-btn:hover{
    background: var(--color-brown);
  }
  
  #radio1:checked ~ .first{
    margin-left: 0;
  }
  
  #radio2:checked ~ .first{
    margin-left: -20%;
  }
  
  #radio3:checked ~ .first{
    margin-left: -40%;
  }
  
  #radio4:checked ~ .first{
    margin-left: -60%;
  }
  
  /*css for automatic navigation*/
  
  .navigation-auto{
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 540px;
  }
  
  .navigation-auto div{
    border: 2px solid var(--color-brown);
    padding: 5px;
    border-radius: 10px;
    transition: 0.5s;
  }
  
  .navigation-auto div:not(:last-child){
    margin-right: 40px;
  }
  
  #radio1:checked ~ .navigation-auto .auto-btn1{
    background: var(--color-brown);
  }
  
  #radio2:checked ~ .navigation-auto .auto-btn2{
    background: var(--color-brown);
  }
  
  #radio3:checked ~ .navigation-auto .auto-btn3{
    background: var(--color-brown);
  }
  
  #radio4:checked ~ .navigation-auto .auto-btn4{
    background: var(--color-brown);
  }
        
  /*END slider*/


  .salesbox{
    position: relative;
  }

.textandspecs{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    color: var(--color-brown);
    line-height: 1.5em;
    margin: auto;
    width: 1100px;
}

.textandspecs div{
    margin: auto;
}

.specs{
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0 auto;
    width: 900px;
    line-height: 2em;
    margin-top: 2em;
}

.specs div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: left;
    gap: 1em;
}

.specs h2{
    color: var(--color-blue);
    text-align: left;
}

.specsdesktop table tr{
  vertical-align: top;
  line-height: 1.5em;
}

.specsmobile{
    display: none;
}


.blue{
    color: var(--color-blue);
    padding-right: 1em;
}

.extraspecs .blue{
    width: 10em;
}


.salesbook{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3em 0;
    margin-bottom: 5em;

}
.salesbutton{
    margin-top: 2em;
}

.disclaimer{
  width: 100vw;
  text-align: center;
  padding-top: 2em;
}

.disclaimer h2{
  color: var(--color-blue);
}

.disclaimer p{
  margin: auto;
}

@media screen and (max-width: 800px) {
    .slider{
        width: 600px;
        height: 375px;
      }
      
      .slides{
        height: 375px;
        display: flex;
      }
      .slide img{
        width: 600px;
        height: 375px;
      }

      .navigation-manual{
        position: absolute;
        width: 600px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }

      .navigation-auto{
        position: absolute;
        display: flex;
        width: 600px;
        justify-content: center;
        margin-top: 395px;
      }
      .textandspecs{
        display: block;
        line-height: 1.5em;
        width: 100vw;
        text-align: center;
    }

    .specsdesktop{
        display: none;
    }

    .specsmobile{
        display: flex;
    }

    .specs{
        display: flex;
        flex-direction: column;
        text-align: left;
        margin: 0 auto;
        width: 100vw;
        line-height: 2em;
        padding: 0.5em 1em;
    }
    
    .specs div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .specsmobile div{
        grid-template-columns: 1fr;
    }


    .textandspecs div{
        margin: 1em;
        padding: 0;
    }
}

@media screen and (max-width: 675px) {

    .picturessales{
        height: 60vh;
        top: 0em;
    }
    .slider{
        width: 380px;
        height: 240px;
      }
      
      .slides{
        height: 240px;
      }
      .slide img{
        width: 380px;
        height: 240px;
      }

      .navigation-manual{
        width: 380px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }

      .navigation-auto{
        width: 380px;
        margin-top: 250px;
        display: flex;
        justify-content: center;
      } 


      .textandspecs{
        display: block;
        line-height: 1.5em;
        width: 100vw;
        text-align: left;
    }

    .specsdesktop{
        display: none;
    }

    .specsmobile{
        display: flex;
    }

    .specs{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        width: 100vw;
        line-height: 2em;
        padding: 0.5em 1em;
    }
    
    .specs div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .specsmobile div{
        grid-template-columns: 1fr;
    }


    .textandspecs div{
        margin: 1em;
        padding: 0;
    }
}