/* 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: 4%;
        margin-right: 4%;
    }

    .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-flow: row wrap;
}

.topfive .frame {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100%;*/
    width: calc((100% / 5) - 15px);
    padding: 10px;
    box-sizing: border-box;
    float: left;
    margin-right: 15px;

    transition: transform 0.8s;

    border-radius: 8px;

    background: #fff;
    margin-bottom: 80px;
    /*
  -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);
  */
    -webkit-box-shadow: 0px 10px 10px -7px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 10px 10px -7px rgba(0, 0, 0, 1);
    box-shadow: 0px 10px 10px -7px rgba(0, 0, 0, 1);
}

.topfive .frame figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

}

.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 .frame img {
    max-width: 100%;
    max-height: 100%;
}