@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');


body
{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
}

section
{
    padding: 50px 0 0;
    
}

.box
{
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    transition: .5s;
    margin-bottom: 15px;
}

.box:hover
{
    transform: translateY(-30px);
    box-shadow: 0 50px 50x rgba(0,0,0,.5);
}

.box .imgbox
{
    position: relative;
}

.box .imgbox img
{
    transition: .5s;
}

.box:hover .imgbox img
{
   opacity: .5;
    transform: translateY(-40px);
}

.box .content
{
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    transition: .5s;
    opacity: 0;
    
}

.box:hover .content
{
    opacity: 1;
    bottom: 0;
}

.box .content h3
{
    font-size: 44px;
    color: #fff;
    font-weight: 700;
}

.box .content p
{
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}

.box .content .btnD
{
    border: none;
    background: #ff0000;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    font-weight: 700;
    transition: .5s;
}

.box .content .btnD:hover
{
    background: #ff3232;
    
}
.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:5px; margin:12px; background:#f1f1f1; color:#666;}
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
    .MultiCarousel .leftLst { left:0; }
    .MultiCarousel .rightLst { right:0; }
    
        .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }