.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: all .3s ease-out
}

.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, .2);
    transition: all .7s ease-out;
    transition-property: transform, opacity;
    transform: scale(0);
    pointer-events: none
}

.waves-effect.waves-light .waves-ripple {
    background-color: hsla(0, 0%, 100%, .45)
}

.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, .7)
}

.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, .7)
}

.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, .7)
}

.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, .7)
}

.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, .7)
}

.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, .7)
}

.waves-effect input[type=button],
.waves-effect input[type=reset],
.waves-effect input[type=submit] {
    border: 0;
    font-style: normal;
    font-size: inherit;
    text-transform: inherit;
    background: none
}

a.waves-effect .waves-ripple {
    z-index: -1
}


.amber.lighten-5 {
    background-color: #fff8e1!important
}

.amber-text.text-lighten-5 {
    color: #fff8e1!important
}

.amber.lighten-4 {
    background-color: #ffecb3!important
}

.amber-text.text-lighten-4 {
    color: #ffecb3!important
}

.amber.lighten-3 {
    background-color: #ffe082!important
}

.amber-text.text-lighten-3 {
    color: #ffe082!important
}

.amber.lighten-2 {
    background-color: #ffd54f!important
}

.amber-text.text-lighten-2 {
    color: #ffd54f!important
}

.amber.lighten-1 {
    background-color: #ffca28!important
}

.amber-text.text-lighten-1 {
    color: #ffca28!important
}

.amber {
    background-color: #0D0D0D !important;
}

.amber-text {
    color: #ffc107!important
}

.amber.darken-1 {
    background-color: #0D0D0D!important
}

.amber-text.text-darken-1 {
    color: #ffb300!important
}

.amber.darken-2 {
    background-color: #ffa000!important
}

.amber-text.text-darken-2 {
    color: #ffa000!important
}

.amber.darken-3 {
    background-color: #ff8f00!important
}

.amber-text.text-darken-3 {
    color: #ff8f00!important
}

.amber.darken-4 {
    background-color: #ff6f00!important
}

.amber-text.text-darken-4 {
    color: #ff6f00!important
}

.amber.accent-1 {
    background-color: #ffe57f!important
}

.amber-text.text-accent-1 {
    color: #ffe57f!important
}

.amber.accent-2 {
    background-color: #ffd740!important
}

.amber-text.text-accent-2 {
    color: #ffd740!important
}

.amber.accent-3 {
    background-color: #ffc400!important
}

.amber-text.text-accent-3 {
    color: #ffc400!important
}

.amber.accent-4 {
    background-color: #ffab00!important
}

.amber-text.text-accent-4 {
    color: #ffab00!important
}

.amber.transparent {
    background-color: rgba(255, 255, 255, 0)!important;
}

.card,
.card-panel,
.z-depth-1 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}


.card-panel {
    padding: 20px
}

.card,
.card-panel {
    transition: box-shadow .25s;
    margin: 0;/*.5rem 0 1rem;*/
    border-radius: 2px;
    background-color: #fff
}

.card {
    position: relative
}

.card .card-title {
    font-size: 24px;
    font-weight: 300
}

.card .card-title.activator {
    cursor: pointer
}

.card.large,
.card.medium,
.card.small {
    position: relative
}

.card.large .card-image,
.card.medium .card-image,
.card.small .card-image {
    max-height: 60%;
    overflow: hidden
}

.card.large .card-content,
.card.medium .card-content,
.card.small .card-content {
    max-height: 40%;
    overflow: hidden
}

.card.large .card-action,
.card.medium .card-action,
.card.small .card-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: inherit
}

.card.small {
    height: 300px
}

.card.medium {
    height: 400px
}

.card.large {
    height: 500px
}

.card .card-image {
    position: relative
}

.card .card-image img {
    display: block;
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%
}

.card .card-image .card-title {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px
}

.card .card-content {
    padding: 20px;
    border-radius: 0 0 2px 2px
}

.card .card-content p {
    margin: 0;
    color: inherit
}

.card .card-content .card-title {
    line-height: 48px
}

.card .card-action {
    border-top: 1px solid hsla(0, 0%, 63%, .2);
    padding: 20px
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
    color: #ffab40;
    margin-right: 20px;
    transition: color .3s ease;
    text-transform: uppercase
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
    color: #ffd8a6
}

.card .card-reveal {
    padding: 20px;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    top: 100%;
    height: 100%;
    z-index: 1;
    display: none
}

.card .card-reveal .card-title {
    cursor: pointer;
    display: block
}


.section {
   /*padding: 4em;*/ 
    overflow: hidden
}

@media only screen and (max-width:480px) {
    /*.section {
        padding: 1em
    }*/
}

.section .center>.border-small {
    margin-bottom: 2em
}
.section .card {
    float: left;
    width: 100%;
    padding: 0;
    transform: scale(0);
    opacity: 0
}

.section .card.show {
    opacity: 1;
    transform: scale(1)
}

.section .card.no-border-radius {
    border-radius: 0
}

.section .card .wrapper {
    background-color: #fff;
    min-height: 165px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .2)
}

.section .card .wrapper:hover .data {
    transform: translateY(0)
}

.section .card .data {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(70px + 1em));
    transition: transform .3s
}

.section .card .data .content {
    padding: 1em 1em 2em;
    position: relative;
    background-color: transparent;
    background-image: linear-gradient(transparent, #000);
    z-index: 1
}

.section .card .author {
    font-size: 12px
}

.section .card .title {
    margin-top: 10px;
    line-height: 1
}

.section .card .title a {
    font-weight: 400;
    padding: 0px !important;
}

.section .card .text {
    margin-top: 20px;
    height: 70px;
    line-height: normal;
    margin: 0;    
    font-size: small !important;

}

.section .card input[type=checkbox] {
    display: none
}

.section .card input[type=checkbox]:checked+.menu-content {
    transform: translateY(-60px)
}

.section .example-2 .wrapper:hover .menu-content span {
    transform: translate(-50%, -10px);
    opacity: 1
}

.section .example-2 .menu-content {
    float: right
}

.section .example-2 .menu-content li {
    margin: 0 5px;
    position: relative
}

.section .example-2 .menu-content span {
    transition: all .3s;
    opacity: 0
}

.section .example-2 .data {
    color: #fff;
    transform: translateY(calc(70px + 2em))
}

.section .example-2 .title a {
    color: #fff
}

.section .example-2 .button {
    display: block;
    width: 100px;
    margin: 2em auto 1em;
    text-align: center;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    position: relative;
    font-weight: 700
}

.section .example-2 .button:after {
    content: "\2192";
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s
}

.section .example-2 .button:hover:after {
    transform: translate(5px, -50%);
    opacity: 1
}

.section .card.no-border-radius {
    border-radius: 0
}

.hoverable {
    transition: box-shadow .25s;
    box-shadow: 0
}

.hoverable:hover {
    transition: box-shadow .25s;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}

.section .card.show {
    opacity: 1;
    transform: scale(1)
}

.fadeInUp {
    animation-name: k;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}