@font-face {
  font-family: 'AutoReg';
  src:  url('font/Auto-Regular.ttf')  format('truetype')
}

@font-face {
  font-family: 'AutoLight';
  src:  url('font/Auto-Light.ttf')  format('truetype')
}

@font-face {
  font-family: 'AutoLightItalic';
  src:  url('font/Auto-Regular.ttf')  format('truetype')
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: url(img/blueback.png);
  margin: 0;
  padding: 0;
  color: #333;
  font-family: 'AutoLight', sans-serif;
  letter-spacing: 1pt;
  font-size: 12pt;
}

a {
  color: #000;
}

li, ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h2,h3 {
    text-align: center;
}

h2 {
  font-size: 4vw;
}

img {
  display:block;
  width: 100%;
  heightL auto;
}

p {
  margin-top: 0;
}

/*--- Sections Start ---*/

#maincontent {
  margin: 0 2%;
}

header {
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding: 20px 0 0 0;
  font-weight: 400;
}

.topitems {

  text-align: center;
}

.topitems li {
  display: inline-block;
  margin: 0 3%;
}

.topitems i {
  margin: 0 4px 0;
  line-height: 30px;
}

#logo {
  display: block;
  width: 20%;
 /* border: 1px solid #ccc; */
  padding: 10px;
  margin: 80px auto;
}

.statement {
  text-align: center;
  font-size: 1.4vw;
  margin: 0 14% 4vw 14%;
}

.getintouch {
  margin: 80px auto 120px auto;
}

.getintouchlink {
  display: table;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px 40px;
    font-size: 20pt;
}

.disclaimer {
  margin:20px 33%;
  font-style: italic;
  color: #999;
}

.cataloglist {
  display: flex; 
-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
justify-content: flex-start
}

.catitem {
  width: 33.2%;
  margin: 0 .1% 6vw 0;
}

.metaarea {
  padding: 40px 20px;
}

.itemtitle {
  font-weight: bold;
}

.soldout {
  margin: 6px 0 0 0;
  vertical-align: top;
  line-height: 14px;
}

.soldbadge {
  height: 14px;
  width: 14px;
  float: left;
  margin: 0 6px 0 0;
  background: #cc0000;
  border-radius: 20px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

.firstimg {
  position: relative;
  z-index: 2;
  height: 0;
  overflow:visible;
  transition: opacity .5s;
}

.imgarea:hover .firstimg {
  opacity: 0;
}

footer {
  padding: 40px 0;
}


@media only screen and (max-width: 1024px) {
  #logo {
    width: 50%;
  }
  
  #subtitle {
    display: none;
  }
  
  h2 {
    font-size: 20pt;
  }
  
  .catitem {
  width: 100%;
  margin: 0 0 60px 0;
 
}
  .metaarea {
  padding: 10px 0 10px 20px;
}
  
  .statement {
    font-size: 20pt;
    margin: 0;
  }
  
  .disclaimer {
    margin: 20px 0;
  }
}