/*

  html, body

*/

/* Html, Body */
html, body {
  width: 100%;
  height: 100%;
  
  margin: 0;
  padding: 0;
  
  overflow-x: hidden;
  
  font-family: 'Cabin', sans-serif;
  color: white;
  
  background: #181926;
  background: -moz-radial-gradient(center, ellipse cover, #181926 0%, #0e0f17 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #181926 0%,#0e0f17 100%);
  background: radial-gradient(ellipse at center, #181926 0%,#0e0f17 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181926', endColorstr='#0e0f17',GradientType=1 );
}

/* No Select */
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/*

  Wrapper

*/

/* Wrapper */
.wrapper {  
  display: flex;
  flex-direction: column;
  
  overflow: hidden;
}



/*

  Responsive View

*/

/* Smartphones */
@media only screen and (max-width:768px) {
  .topfive { margin-left: 10%; margin-right: 10%; }
  .topfive .frame { margin-right: 15px; }
  .topfive .frame {
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
  }
}

/* Tablets (potrait) */
@media only screen and (min-width:768px) and (max-width:1024px) {
  .topfive { margin-left: 5%; margin-right: 5%; }
  .topfive .frame { margin-right: 20px; }
  .topfive .frame {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
  }
}

/* Tablets (landscape) */
@media only screen and (min-width:1024px) and (max-width:1440px) {
  .topfive { margin-left: 5%; margin-right: 5%; }
  .topfive .frame { margin-right: 20px; }
  .topfive .frame {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
  }
}

/* Desktop and above */
@media only screen and (min-width:1440px) {
  .topfive { margin-left: 5%; margin-right: 5%; }
  .topfive .frame { margin-right: 20px; }
  .topfive .frame {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
    box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.1), 0px 10px 10px -7px rgba(0,0,0,1);
  }
}



/*

  Top Five

*/

.topfive {
  min-height: 50%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*
  align-items: stretch;
  justify-content: center;
  */

  margin-top: 50px;
  margin-bottom: 50px;
}

.topfive .frame {
  height: 100%;

  padding: 0;

  transition: transform 0.8s;

  border-radius: 8px;

  background: #292a36;
  background: -moz-linear-gradient(top,  #292a36 0%, #1b1c25 100%);
  background: -webkit-linear-gradient(top,  #292a36 0%,#1b1c25 100%);
  background: linear-gradient(to bottom,  #292a36 0%,#1b1c25 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292a36', endColorstr='#1b1c25',GradientType=0 );
}

.topfive .frame:hover {
  transform: scale(1.04);

  /*
  border: 0;
  background: transparent;
  -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  */

  cursor: pointer;
}

.topfive a, .topfive a:visited, .topfive a:focus, .topfive a:hover, .topfive a:link {
  display: block;
  position: relative;
}

.topfive .frame img {
  display: inline-block;
  position: absolute;

  border-style: none;
  border: 0;

  z-index: 99;
}

video {
  object-fit: cover;
}

video.bgvideo {
  display: none;
  position: absolute;

  border-radius: 8px;

  -webkit-box-shadow:  0px 0px 0px 3px rgba(255,255,255,0.5), 0px 10px 10px -7px rgba(0,0,0,1);
  -moz-box-shadow:  0px 0px 0px 3px rgba(255,255,255,0.5), 0px 10px 10px -7px rgba(0,0,0,1);
  box-shadow:  0px 0px 0px 3px rgba(255,255,255,0.5), 0px 10px 10px -7px rgba(0,0,0,1);

  z-index: 1;
}