﻿@media screen and (min-width: 681px) and (max-width: 1079px) {

    #tier-one-head-img {
        left: 5%;
        width: 45%;
        top: 50%;
        transform: translateY(-50%);
    }

    /*tasks*/

    #home-tasks {
        background-color: #f7f7f7;
    }

    .tiers {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: baseline;
    }

    .tier {
        width: 44%;
        margin: 10px 1% 10px 1%;
        padding: 30px 2% 30px 2%;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 1px 2px 6px 1px #eaeaea;
    }

    .tier-logo {
        width: 50%;
        max-width: 150px;
    }

    .tier-title {
        margin: 10px;
    }

    /*calc*/
    #home-calc {
        overflow: hidden;
        background-color: #fff;
        background-image: url("../../Content/Images/home/desk.png");
        background-repeat: repeat;
        padding-right: 0;
        padding-left: 0;
        width: 100%;
    }

    #home-calc-right {
        width: 46%;
        text-align: left;
        float: right;
        padding: 20px 0% 20px 8%;
        margin-left: 2%;
        background-image: url("../../Content/Images/home/calc-back.png");
        background-repeat: no-repeat;
        background-position: left;
        background-size: 100% 100%;
        overflow: hidden;
    }

    #home-calc-balance {
        width: 150px;
    }

    #home-calc-form label, #home-calc-form .form-input .slider-values .min, #home-calc-form .form-input .slider-values .max {
        color: #fff;
    }

    #home-calc-form .form-input input[type=range]::-webkit-slider-thumb {
        background: #52545D;
    }

    #home-calc-left {
        width: calc(44%);
        height: 100%;
        float: left;
        padding: 0px 0 0px 0;
        position: relative;
        order: 2;
        flex-shrink: 0;
    }

    #home-calc-monitor {
        width: 100%;
        padding-top: 73%;
        position: relative;
        margin: 5px;
        border-radius: 10px;
        display: inline-block;
        overflow: hidden;
        background-color: #f7f7f7;
    }

    #home-calc-frame {
        width: 100%;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

    #home-calc-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all ease 0.8s;
    }

    #home-calc-result {
        left: -100%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        height: 50%;
        width: 80%;
        transition: all ease 0.8s;
    }

    #home-calc-text {
        font-size: 12px;
        line-height: 14px;
        font-weight: 600;
        display: inline-block;
    }

    #home-calc-month {
        color: #00ADD2;
        font-weight: 600;
        font-size: 26px;
        display: inline-block;
    }

    #home-calc-offer {
    }

    /*Video*/

    #ways-to-pay {
        background-color: #f7f7f7;
    }

    #video {
        background-color: #fff;
        padding: 0;
        margin: 0;
        position: relative;
        width: 600px;
        display: inline-block;
        padding-top: 12px;
        padding-bottom: 17px;
    }

    #tablet {
        background-image: url("../../Content/Images/help-centre/tablet.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }

    #video-start {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        background: none;
        border: none;
    }

        #video-start i {
            font-size: 75px;
            color: #fe795c;
            cursor: pointer;
        }

            #video-start i:hover, #video-start i:focus {
                color: #f25b3b;
            }

    #video video {
        width: 500px;
        height: 95%;
        margin-top: 2%;
        display: inline-block;
    }

    #other-options {
        background-color: #f7f7f7;
    }


    /*help*/
    #home-help {
        overflow: hidden;
        background-color: #f7f7f7;
    }

    #home-help-left {
        width: 45%;
        text-align: left;
        float: left;
        padding: 70px 0 70px 5%;
    }

    #home-help-desc .button {
        float: left;
    }

    #home-help-right {
        width: 40%;
        text-align: left;
        float: left;
        padding: 20px 5% 70px 5%;
    }

        #home-help-right img {
            width: 100%;
        }
}
