
.max {
    height: 800px;
    width: 100%;
    margin: 15px 0px 30px 0px;
    position: relative;
}

.ps-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-transform: uppercase;
    color: #555;
    background: #FFB602;
    border: 0px solid red;
}

@media (max-width:768px) {
    .ps-container {
        top: 60px;
    }

    .max {
    height: 550px;
    width: 100%;
    margin: -60px 0px 75px 0px;
    position: relative;
    border: 0px solid red;
    }
}

.ps-container > div {
    position: absolute;
    width: 50%;
}

    .ps-container > div > div,
    .ps-slidewrapper > nav,
    .ps-slides > div {
        position: absolute;
    }

.ps-header {
    top: 0px;
    left: 0px;
    height: 150px;
    z-index: 1001;
    background: #5fc6e6;
    /* background: #cccccc; */
}

    .ps-header h1 {
        color: #fff;
        line-height: 100px;
        margin: 0;
        padding: 0 50px;
        font-weight: 500;
        font-size: 24px;
        letter-spacing: 10px;
    }

.ps-contentwrapper {
    top: 150px;
    bottom: 0px;
    overflow: hidden;
    z-index: 1000;
}

.ps-content {
    background: #FFB602;
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 50px;
}

    .ps-content h2 {
        padding: 10px 15px;
        border-right: 1px solid #94cbdb;
        border-bottom: 1px solid #94cbdb;
        letter-spacing: 4px;
        margin: 10px 0 30px;
        text-align: right;
        font-weight: 700;
    }

    .ps-content p {
        line-height: 25px;
        font-size: 12px;
        letter-spacing: 2px;
        word-spacing: 10px;
        padding: 10px 15px;
        font-weight: 400;
        text-align: justify;
        border-left: 1px solid #94cbdb;
        border-top: 1px solid #94cbdb;
    }

    .ps-content span.ps-price {
        float: left;
        margin: 10px;
        width: 140px;
        height: 140px;
        line-height: 140px;
        text-align: center;
        color: #fff;
        background: #94cbdb;
        /*background: rgba(247,197,185,0.8);*/
        font-size: 50px;
        font-weight: 200;
    }

    .ps-content a:last-child {
        font-size: 14px;
        font-weight: 700;
        color: #555;
        letter-spacing: 4px;
        float: right;
        border: 1px solid #94cbdb;
        padding: 3px;
        text-indent: 4px;
    }

.no-touch .ps-content a:last-child:hover {
    color: #94cbdb;
    border-color: #94cbdb;
}

.ps-content a:last-child:before {
    content: '';
    font-family: 'icon';
    font-style: normal;
    font-weight: normal;
    speak: none;
    padding-right: 5px;
}

.ps-slidewrapper {
    right: 0px;
    top: 0px;
    height: 100%;
    overflow: hidden;
}

.ps-slides {
    top: 0px;
    bottom: 200px;
    width: 100%;
}

    .ps-slides > div {
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 0 9999px rgba(179,157,250,0.1);
    }

.ps-slidewrapper > nav {
    width: 100%;
    height: 200px;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
}

    .ps-slidewrapper > nav > a {
        width: 50%;
        height: 100%;
        position: relative;
        float: left;
        box-shadow: inset 0 0 0 9999px rgba(148, 209, 228, 0.5);
        outline: none;
    }

        .ps-slidewrapper > nav > a:first-child {
            box-shadow: inset 0 0 0 9999px rgba(206, 223, 227, 0.5);
        }

.no-touch .ps-slidewrapper > nav > a {
    -webkit-transition: box-shadow 0.4s ease-in-out;
    -moz-transition: box-shadow 0.4s ease-in-out;
    -ms-transition: box-shadow 0.4s ease-in-out;
    -o-transition: box-shadow 0.4s ease-in-out;
    transition: box-shadow 0.4s ease-in-out;
}

    .no-touch .ps-slidewrapper > nav > a:hover {
        box-shadow: inset 0 0 0 9999px rgba(97, 135, 146, 0.5);
    }

    .no-touch .ps-slidewrapper > nav > a:first-child:hover {
        box-shadow: inset 0 0 0 9999px rgba(148, 202, 219, 0.5);
    }

.ps-slidewrapper > nav > a:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}

.ps-slidewrapper > nav > a:first-child:after {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin: -80px 0 0 -50px;
}

.ps-slides > div,
.ps-slidewrapper > nav > a {
    background-color: #fff;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    background-size: auto 100%;
}

.ps-move {
    -webkit-transition: top 400ms ease-out;
    -moz-transition: top 400ms ease-out;
    -o-transition: top 400ms ease-out;
    -ms-transition: top 400ms ease-out;
    transition: top 400ms ease-out;
}

@media screen and (max-width: 860px) {

    .js .ps-container > div {
        width: 100%;
    }

    .js .ps-header {
        height: 50px;
    }

        .js .ps-header h1 {
            line-height: 50px;
            padding: 0px 20px;
            letter-spacing: 4px;
        }

    .js .ps-slides {
        bottom: 320px;
        top: 50px;
    }

    .js .ps-slidewrapper > nav {
        height: 100px;
    }

    .js .ps-contentwrapper {
        top: auto;
        height: 220px;
        bottom: 100px;
    }

    .js .ps-content {
        padding: 10px;
    }

        .js .ps-content h2 {
            border-right: none;
            font-size: 18px;
            margin: 10px 0;
            padding-top: 0;
        }

        .js .ps-content span.ps-price {
            font-size: 18px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-weight: 700;
            margin-bottom: 0;
        }

        .js .ps-content p {
            line-height: 20px;
            border: none;
            padding: 5px 10px;
            height: 80px;
            overflow-y: scroll;
        }

        .js .ps-content a:last-child {
            font-size: 13px;
            margin: 10px 20px 0 0;
        }
}
