*{
  margin: 0;
  padding: 0;
}

header, nav, main, footer{
  padding: 2em 10px;
}

footer, nav{
  background: #CBA;
}
header{
  background: #633;
  color: #EEE;
}
nav{
  box-shadow: inset 0px -5px 40px 1px rgba(139, 99, 50, 0.41);
}

main{
  background: #F3F3F3;
  padding-left: 5%;
}

.ui-page{
  background: #333;
}

a{
  color: #7D1D1D !important;
  text-decoration: none;
  padding: 0 .5em;
}

footer{
  border-bottom: 1px solid black;
}

.thumb{
  margin: 1px auto;
  width: 90%;
  max-width: 1000px;
  display: block;
  /*-webkit-clip-path: polygon(0% 15%, 50% 0, 100% 15%, 100% 100%, 50% 85%, 0 100%);
  clip-path: polygon(0% 15%, 50% 0, 100% 15%, 100% 100%, 50% 85%, 0 100%);*/
}
.thumb img{
  display: block;
  width: 100%;
}


.thumb{
  border-left: 10px solid black;
  border-right: 10px solid black;
}


.thumb {
  margin-bottom: -62px;
  /*-webkit-clip-path: polygon(0 50px, 50% 0px, 100% 50px, 0 50px, 100% 50px);*/
}
.thumb img {
  /*-webkit-clip-path: polygon(0 50px, 50% 0, 100% 50px, 100% 100%, 50% 100%, 0 100%);*/
  -webkit-clip-path: polygon(0 0, 50% 60px, 100% 0, 100% 100%, 0 100%);
}
.thumb:nth-child(2n) img {
  -webkit-clip-path: polygon(0 50px, 50% 0, 100% 60px, 100% 100%, 50% 100%, 0 100%);
}
.thumb:first-of-type img{
  border-top: 10px solid black;
  -webkit-clip-path: none;
}
.thumb:last-of-type {
  border-bottom: 62px solid black;
}

.thumbs{
  padding-bottom: 50px;
}