/*Hide Title*/
#page-title {
    /*display: none !important;*/
}

#page-header {
    font-family: 'Montserrat', sans-serif !important;
}

    #page-header h1{
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        margin-bottom: 10px;
        font-size: 40px;
    }

    #page-header h1 span {
        color: #E02B26;
    }

    #page-header p {
        color: #424242;
        font-size: 16px;
    }

.header-line {
    background-color: #E02B26;
    width: 45px;
    height: 2px;
    margin-bottom: 10px;
}

#page-body {
    font-family: 'Montserrat', sans-serif !important;
    color: #424242;
}

#page-body h2{
    font-family: 'Montserrat', sans-serif !important;
}

/* Hover animation */
.grow {
    transition: all .2s ease-in-out;
}

    .grow:hover {
        transform: scale(1.1);
        cursor: pointer;
    }

/*General*/
.step-number {
    display: inline-block;
    color: #E02B26;
    font-size: 36px;
    font-weight: 600;
    margin-right: 10px;
}

h2 {
    display: inline-block;
}

    h2 span {
        color: #E02B26 !important;
        font-weight: 800;
    }

p {
    font-size: 16px;
    display: inline-block
}

    p span {
        font-weight: 700;
    }

.play-dot {
    width: 15px;
    display: inline-block;
}

.add-channel div {
    margin: 0 auto 0;
    display: block;
    width: 52%;
}

.welcome-step1 {
    margin-top: 15px;
}

    .welcome-step1 .row {
        padding-left: 3.5em;
    }

.add-channel .play-dot {
    margin: 0 0 0 20px;
}

/* --- STEP 2 ---*/
.community-icons {
    width: 50%;
    margin: 0 auto;
    margin: 15px auto 15px;
}

    .community-icons img {
        width: 11%;
        margin: 0 5px;
    }

    .community-icons img:hover {
        cursor: pointer;
    }

/* --- STEP 3 ---*/

.five-things {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
}

/* --- STEP 5 ---*/
.support {
    padding-left: 3.5em;
}

    .support a {
        color: #E02B26 !important;
    }

.support-page {
    width: 90%;
    margin: 0 auto 0;
}

    .support-page img {
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
        border-radius: 5px;
    }

/*Media queries*/
@media only screen and (max-width: 1200px) {
    /* --- STEP 1 ---*/
    .sign-in p {
        width: 95%;
    }

    .sign-in .play-dot {
        position: relative;
        top: -26px;
    }

    .add-channel div {
        margin: 27px auto 0;
    }

    .add-channel .play-dot {
        margin: 0 0 0 0px;
    }
    /* --- STEP 2 ---*/
    /* --- STEP 3 ---*/
    .onboard-series p {
        width: 93%;
    }

    .five-things {
        width: 80%;
    }

    .tb-101 {
        margin-top: 0px;
    }

        .tb-101 p {
            width: 93%;
        }

        .tb-101 .play-dot {
            position: relative;
            top: -30px;
        }
}

@media only screen and (max-width: 992px) {
    /* --- STEP 1 ---*/
    .welcome-step1 .row {
        padding-left: 0px;
    }

    .sign-in {
        padding-left: 3.5em;
    }

        .sign-in .play-dot {
            position: relative;
            top: -26px;
        }

        .sign-in p {
            width: 90%;
        }

    .add-channel {
        padding-left: 3.5em;
    }

        .add-channel div {
            margin: 0px auto 0;
        }

        .add-channel p {
            width: 90%;
        }

        .add-channel .play-dot {
            position: relative;
            top: -26px;
        }

    /* --- STEP 2 ---*/
    .welcome-step2 p {
        width: 95%;
    }

    .welcome-step2 .play-dot {
        position: relative;
        top: -2px;
    }

    .community-icons {
        width: 60%;
        margin: 5px auto 5px;
    }
    /* --- STEP 3 ---*/
    .onboard-series {
    }

        .onboard-series p {
            width: 93%;
        }

        .onboard-series .play-dot {
            position: relative;
            top: -2px;
        }


    .tb-101 {
        margin-top: 0px;
    }

        .tb-101 p {
            width: 93%;
        }

        .tb-101 .play-dot {
            position: relative;
            top: -30px;
        }
    /* --- STEP 5 ---*/
    .support-page {
        width: 95%;
        margin: 0 auto 0;
    }
}
@media only screen and (max-width: 768px) and (min-width: 575px) {
    .container, #header.full-header .container, .container-fullwidth {
        width: 570px !important;
    }

    #page-title .container {
        max-width: 570px !important;
    }
}

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

    .step-number {
        font-size: 32px;
    }

    #page-body h2, #page-body h2 span {
        font-size: 26px;
    }

    /* --- STEP 1 ---*/
    .sign-in .play-dot {
        position: relative;
        /*top: -3px;*/
    }

    .add-channel {
        margin-top: 55px;
    }

        .add-channel .play-dot {
            position: relative;
            top: -2px;
        }

    /* --- STEP 2 ---*/
    .welcome-step2 p {
        width: 95%;
    }

    .welcome-step2 .play-dot {
        position: relative;
        top: -27px;
    }

    .community-icons {
        width: 87%;
        margin: 5px auto 5px;
    }
    /* --- STEP 3 ---*/
    .onboard-series {
    }

        .onboard-series p {
            width: 95%;
        }

        .onboard-series .play-dot {
            position: relative;
            top: -1px;
        }


    .tb-101 {
        margin-left: 3em;
        margin-top: 55px;
    }

        .tb-101 p {
            width: 95%;
        }

        .tb-101 .play-dot {
            position: relative;
            top: -28px;
        }
    /* --- STEP 4 ---*/
    .welcome-step4 .play-dot {
        position: relative;
        top: -28px;
    }

    .welcome-step4 p {
        width: 95%;
    }
    /* --- STEP 5 ---*/
    /*.questions span {
        position: relative;
        top: -37px;
    }*/

    .questions h2 span {
        top: 0px;
    }

    /*.questions h2{
        width: 90%;
    }*/

    .support {
    }

        .support .play-dot {
            position: relative;
            top: -28px;
        }

        .support p {
            width: 95%;
        }

    .support-page {
        width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    #page-body h2, #page-body h2 span {
        font-size: 22px;
    }

    .step-number {
        font-size: 30px;
    }

    .community-icons {
        width: 75%;
        text-align: center;
    }

        .community-icons img {
            width: 11%;
            margin: 0px 2px;
        }
}

@media only screen and (max-width: 480px) {
    #page-body h2, #page-body h2 span {
        font-size: 22px;
    }

    p {
        font-size: 14px;
    }

    .step-number {
        font-size: 30px;
    }

    .sign-in .play-dot, .add-channel .play-dot, .onboard-series .play-dot, .welcome-step4 .play-dot, .support .play-dot {
        top: -23px;
    }


    .welcome-step2 p, .onboard-series p, .welcome-step4 p, .support p {
        width: 90%;
    }

    .welcome-step2 .play-dot {
        top: -44px;
    }

    .community-icons {
        width: 85%;
    }

        .community-icons img {
            width: 11%;
            margin: 0px 2px;
        }

    .questions h2 {
        width: 88%;
    }

    .questions .step-number {
        position: relative;
        top: -23px;
    }

}