body{
  font-family: 'Gotham-Light',Helvetica;
  font-size:16px;
  letter-spacing:1px;
  line-height:1.5;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

html{
  overflow-x:hidden;
  width:100%;
  width:100vw;
  margin-right:calc(100%-100vw);
}

/*global*/
.container{
width:auto;
margin:auto;
padding:0;
overflow:hidden;
text-align:center;
}

@font-face{
  font-family:"Gotham-ThinItalic";
  src:url("../gotham-cufonfonts/Gotham-ThinItalic.otf");
}
@font-face {
font-family: "Gotham-Light";
src: url("../gotham-cufonfonts/Gotham-Light.otf");
}
@font-face {
font-family: "Gotham-Thin";
src: url("../gotham-cufonfonts/Gotham-Thin.otf");
}

h1{
  font-family: 'Gotham-Thin',Helvetica;
  letter-spacing:4px;
  border-bottom: 1px solid;
  text-decoration:none;
}

p{
}

/*header*/
header{
  height:140px;
}

#main-menu{
  height:250px;
  margin:0;
  padding:0;
}

.nav{
  margin:auto;
  display:block;
}
.nav ul{
  padding:0;
  margin:0;
}

.nav ul li{
  position:relative;
  color:darkgrey;
  text-transform:uppercase;
  text-decoration:none;
  padding:5px 10px 0px 10px;
  display:inline-block;
  vertical-align:middle;
}

.nav ul li a{
  color:black;
  text-transform:uppercase;
  text-decoration:none;
  vertical-align:middle;
}

.nav ul li a::after{
  content: "";
  width: 100%;
  height: 2px;
  display:block;
  opacity:0;
  background-color:dimgrey;

}

.nav ul li a:hover::after{
  opacity: 1;
  transition: all 1.5s;
}

 .nav ul li.logobox{
  width:100px;
  height:137.11px;
  content:"";
  padding:5px 40px 0 40px;
}

.logobox img{
  width:100px;
}

/*showcase*/
#showcase{
  height:auto;
  color:white;
  background-color:dimgrey;
}

.intro{
  max-width:1000px;
  height:auto;
  margin:auto;
  padding-left:20px;
  padding-right:25px;
  padding-bottom:25px;
}

.brand{
  max-width:700px;
  text-align:center;
  margin:auto;
  padding-left:20px;
  padding-right:30px;
}

.about{
  margin-top:30px;
  text-align:justify;
}

.doodad{
  text-align:center;
}

.green{
  margin-top:20px;
  text-align:justify;
  margin-bottom:40px;
}

.information{
  max-width:700px;
  text-align:center;
  padding-left:20px;
  padding-right:30px;
  margin:auto;
}

.information ul{
  list-style:circle;
}

.schedule{
  margin-top:30px;
  text-align:justify;
}

.customorder{
  margin-top:30px;
  text-align:justify;
}

.pickupandshipping{
  margin-top:30px;
  text-align:justify;
}

.storing{
  margin-top:30px;
  text-align:justify;
}

.damagedordefective{
  margin-top:30px;
  text-align:justify;
  margin-bottom:40px;
}

.prodcontainer{

}

.prodcontainer .griditem{
  width:150px;
  height:150px;
  display:inline-block;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:60px;
}

.griditem img{
  max-width:100%;
}

.griditem p{
  margin-top:3px;
}

.item .griditem{
  display:inline-block;
  width:300px;
}
.productdescription{
  vertical-align:top;
  text-align:justify;
}
.productdescription p{
  padding-left:10px;
}
.followus{
  margin-top:50px;
}

.followus img{
  text-align:center;
  width:100px;
}

.slider {
  display:block;
  width: 80vw;
  height: calc(80vw*.5625);
  margin:10px auto;
  position: relative;
  }

.slider p{
  font-family: 'Gotham-ThinItalic',Helvetica;
  text-align:center;
  margin-top:-25px;

}
.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7,.slide8,.slide9,.slide10{
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url("../img/slides/panel1.jpg");
  background-size:cover;
  animation: fade 50s infinite;
  -webkit-animation:fade 50s infinite;
}
.slide2 {
  background: url("../img/slides/richardwebb1.jpg");
  background-size: cover;
  animation: fade2 50s infinite;
  -webkit-animation:fade2 50s infinite;
}
.slide3 {
  background: url("../img/slides/panel2.jpg");
  background-size: cover;
  animation: fade3 50s infinite;
  -webkit-animation:fade3 50s infinite;
}
.slide4 {
  background: url("../img/slides/helenderamus1.jpg");
  background-size: cover;
  animation: fade4 50s infinite;
  -webkit-animation:fade4 50s infinite;
}
.slide5 {
  background: url("../img/slides/panel3.jpg");
  background-size: cover;
  animation: fade5 50s infinite;
  -webkit-animation:fade5 50s infinite;
}
.slide6 {
  background: url("../img/slides/danielbyrd1.jpg");
  background-size: cover;
  animation: fade6 50s infinite;
  -webkit-animation:fade6 50s infinite;
}
.slide7 {
  background: url("../img/slides/panel4.jpg");
  background-size: cover;
  animation: fade7 50s infinite;
  -webkit-animation:fade7 50s infinite;
}
.slide8 {
  background: url("../img/slides/jeremybrown1.jpg");
  background-size: cover;
  animation: fade8 50s infinite;
  -webkit-animation:fade8 50s infinite;
}
.slide9 {
  background: url("../img/slides/panel5.jpg");
  background-size: cover;
  animation: fade9 50s infinite;
  -webkit-animation:fade9 50s infinite;
}.slide10 {
  background: url("../img/slides/pennytreese1.jpg");
  background-size: cover;
  animation: fade10 50s infinite;
  -webkit-animation:fade10 50s infinite;
}



@keyframes fade
{
  0% {opacity:1}
  10% {opacity:0}
  20% {opacity:0}
  30% {opacity:0}
  40% {opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:1}
}
@keyframes fade2
{
  0% {opacity:0}
  10% {opacity:1}
  20% {opacity:0}
  30% {opacity:0}
  40% {opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade3
{
  0% {opacity:0}
  10% {opacity:0}
  20% {opacity:1}
  30% {opacity:0}
  40% {opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade4
{
  0% {opacity:0}
  10% {opacity:0}
  20% {opacity: 0}
  30% {opacity: 1}
  40% {opacity: 0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade5
{
  0% {opacity:0}
  10% {opacity:0}
  20% {opacity:0}
  30% {opacity:0}
  40% {opacity:1}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade6
{
  0% {opacity:0}
  10% {opacity:0}
  20% { opacity:0}
  30% { opacity:0}
  40% { opacity:0}
  50% {opacity:1}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade7
{
  0% {opacity:0}
  10% {opacity:0}
  20% { opacity:0}
  30% { opacity:0}
  40% { opacity:0}
  50% {opacity:0}
  60% {opacity:1}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade8
{
  0% {opacity:0}
  10% {opacity:0}
  20% { opacity:0}
  30% { opacity:0}
  40% { opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:1}
  80% {opacity:0}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade9
{
  0% {opacity:0}
  10% {opacity:0}
  20% { opacity:0}
  30% { opacity:0}
  40% { opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:1}
  90% {opacity:0}
  100% {opacity:0}
}
@keyframes fade10
{
  0% {opacity:0}
  10% {opacity:0}
  20% { opacity:0}
  30% { opacity:0}
  40% { opacity:0}
  50% {opacity:0}
  60% {opacity:0}
  70% {opacity:0}
  80% {opacity:0}
  90% {opacity:1}
  100% {opacity:0}
}
footer{
  height: 83px;
  margin:0;
  padding:0;
}

.salutation{
  font-size:15px;
  letter-spacing:0px;
  display:inline-block;
  vertical-align:middle;
  margin:auto;
}

.leader{
  padding-left:20px;
}

.insta{
  width:80px;
}

.insta img{
  margin-top:5px;
  padding:0px 0px;
}

.trailer{
  padding-right:30px;
}

.contactus{
  padding-left:20px;
  padding-right:20px;

}
.contactus a{
  text-decoration:none;
  color:white;
}

.designedby{
  margin-top:0;
  margin-bottom:0;
  font-size:.7em;
  color:dimgrey;
  opacity:.5;
  text-align:center;
}


@media(max-width: 800px){
  .salutation{
    display:block;
  }
  .leader{
    padding-left:0px;
  }
  .trailer{
    padding-right:0px;
  }
  .salutation p{
    margin-top:3px;
    margin-bottom:3px;
  }

  #main-menu{
    width:200px;
    margin-left:auto;
    padding-top:10px;
  }

  .nav{
    width:80%;
    text-align:right;
  }

  .nav ul li.logobox{
    position:absolute;
    left:30px;
    top:0px;
    padding-left:10px;
    padding-right:10px;
    /*margin-left:-400px;*/
  }