/*
* CSS file for showcase page only
*/

.showcase {
    text-align: center;
    padding: 35px 0;
}
.showcase h1 {
    font-size: 30px;
    font-weight: 300;
    margin-top: 30px;
}
.showcase h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: #666666;
}


.showcase-devices-view {
    width: 1045px;
    margin: 0 auto;
    position: relative;
}

.showcase-devices-view .tomato-bg {
    width: 667px;
    height: 495px;
    background: url("tomato-bg.jpg") no-repeat;
    background-size: contain;
    position: absolute;
    right: -270px;
    bottom: -30px;
    z-index: 5;
}

.showcase-devices-view .laptop {
    width: 1042px;
    max-width: 100%;
    height: 616px;
    position: relative;
    background: url("laptop.png") no-repeat;
    background-size: contain;
    z-index: 30;
}

.showcase-devices-view .laptop .site {
    width: 783px;
    height: 491px;
    background: url("laptop-site-small.jpg") no-repeat;
    background-size: cover;
    position: absolute;
    top: 44px;
    left: 131px;
    -webkit-transition: 1.5s all ease-in-out;
    -moz-transition: 1.5s all ease-in-out;
    -ms-transition: 1.5s all ease-in-out;
    -o-transition: 1.5s all ease-in-out;
    transition: 1.5s all ease-in-out;
}

.showcase-devices-view .laptop .site:hover {
    -webkit-transition: 7s all ease-in-out;
    -moz-transition: 7s all ease-in-out;
    -ms-transition: 7s all ease-in-out;
    -o-transition: 7s all ease-in-out;
    transition: 7s all ease-in-out;
    background-position-y: -1724px;
}

.showcase-devices-view .phone {
    width: 196px;
    height: 414px;
    background: url("phone.png") no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -30px;
    left: -75px;
    z-index: 35;
}

.showcase-devices-view .phone .site {
    width: 173px;
    height: 312px;
    background: url("phone-site-small.jpg") no-repeat;
    background-size: cover;
    position: absolute;
    top: 33px;
    left: 12px;
    -webkit-transition: 1.5s all linear;
    -moz-transition: 1.5s all linear;
    -ms-transition: 1.5s all linear;
    -o-transition: 1.5s all linear;
    transition: 1.5s all linear;
}

.showcase-devices-view .phone .site:hover {
    -webkit-transition: 15s all linear;
    -moz-transition: 15s all linear;
    -ms-transition: 15s all linear;
    -o-transition: 15s all linear;
    transition: 15s all linear;
    background-position-y: -4246px;
}

.showcase-devices-view .laptop .site a,
.showcase-devices-view .phone .site a {
    display: block;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

.showcase-contents {
    padding: 75px 0;
    text-align: center;
}

.showcase-contents h2 {
    font-size: 30px;
    font-weight: 300;
}

.showcase-contents h4 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
    color: #666666;
    margin: 20px 0 45px;
}

.showcase-contents .sc-content {
    margin-bottom: 30px;
}

.showcase-contents .sc-content a {
    display: block;
    padding: 15px;
    margin-bottom: 0;
    border: 1px solid #000000;
    overflow: hidden;
    -webkit-box-shadow: 0 0 50px #ffffff;
    -moz-box-shadow: 0 0 50px #ffffff;
    box-shadow: 0 0 50px #ffffff;
    -webkit-transition: 0.6s all ease-in-out;
    -moz-transition: 0.6s all ease-in-out;
    -ms-transition: 0.6s all ease-in-out;
    -o-transition: 0.6s all ease-in-out;
    transition: 0.6s all ease-in-out;
}

.showcase-contents .sc-content a:hover {
    -webkit-box-shadow: 0 0 15px #666666;
    -moz-box-shadow: 0 0 15px #666666;
    box-shadow: 0 0 15px #666666;
}

.showcase-contents .sc-content img {
    width: 100%;
    display: block;
}

.showcase-contents .sc-content h5 {
    margin: 0;
    padding: 15px 0 0;
    font: 14px "Lato" sans-serif;
    font-weight: 600;
}

.showcase-footer {
    background-color: #000000;
    color: #ffffff;
}

.showcase-footer .footer-copyright {
    padding: 15px 0;
    margin: 0;
}

.showcase-footer .footer-inner {
    padding: 0;
    background: none;
}

@media(max-width: 1240px){

    .showcase-devices-view {
        width: 745px;
    }

    .showcase-devices-view .tomato-bg {
        width: 320px;
        height: 238px;
        right: -118px;
        bottom: -22px;
    }

    .showcase-devices-view .laptop {
        width: 745px;
        height: 440px;
        margin: 0 auto;
    }

    .showcase-devices-view .laptop .site {
        width: 560px;
        height: 350px;
        top: 32px;
        left: 94px;
    }

    .showcase-devices-view .laptop .site:hover {
        background-position-y: -1233px;
    }

    .showcase-devices-view .phone {
        width: 145px;
        height: 306px;
        left: -17px;
    }

    .showcase-devices-view .phone .site {
        width: 128px;
        height: 230px;
        top: 25px;
        left: 9px;
    }

    .showcase-devices-view .phone .site:hover {
        background-position-y: -3182px;
    }
}

@media(max-width: 991px){
    .showcase {
        padding: 35px 0 30px;
    }

    .showcase h1,
    .showcase h3,
    .showcase-devices-view {
        display: none;
    }

    .showcase-contents {
        padding: 0 0 42px;
    }

    .showcase-contents h2 {
        margin-top: 0;
    }
}

@media(max-width: 750px){

    /*.showcase-devices-view {*/
        /*width: 450px;*/
    /*}*/

    /*.showcase-devices-view .tomato-bg {*/
        /*display: none;*/
    /*}*/

    /*.showcase-devices-view .laptop {*/
        /*width: 450px;*/
        /*height: 266px;*/
        /*margin: 0 auto 50px;*/
    /*}*/

    /*.showcase-devices-view .laptop .site {*/
        /*width: 337px;*/
        /*height: 211px;*/
        /*top: 19px;*/
        /*left: 57px;*/
    /*}*/

    /*.showcase-devices-view .laptop .site:hover {*/
        /*background-position-y: -744px;*/
    /*}*/

    /*.showcase-devices-view .phone {*/
        /*position: relative;*/
        /*width: 250px;*/
        /*height: 528px;*/
        /*left: auto;*/
        /*top: auto;*/
        /*margin: 0 auto;*/
    /*}*/

    /*.showcase-devices-view .phone .site {*/
        /*width: 221px;*/
        /*height: 397px;*/
        /*top: 43px;*/
        /*left: 15px;*/
    /*}*/

    /*.showcase-devices-view .phone .site:hover {*/
        /*background-position-y: -5467px;*/
    /*}*/

}

@media(max-width: 450px){

    .showcase {
        padding: 35px 0 0;
    }

    .showcase h3,
    .showcase-contents h2,
    .showcase-devices-view {
        display: none;
    }

    .showcase-contents {
        padding: 0 0 42px;
    }
}