/* tips page (homepage tips) */

.tips-body {
    background-color: #E2F4DE;
}

.tips-section {
    /*padding: 5% 0;*/
    /*padding-bottom: 30% !important;*/
    /*margin-bottom: -20rem;*/
}

.section__general .subheader .tips-welcome p {
    margin-bottom: .4rem;
}

.section__general .subheader .tips-welcome span {
    display: inline-block;
    color: #1a9f2b;
}

.section__general .tips__logo {
    width: 10rem;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.tips__content {
    background-color: #eee;
    padding: 8% 8%;
    border-bottom: 1px solid #ddd;
    /*width: 100%;
    height: 100%;*/
    text-align: left;
    padding-right: 5rem;
    /*float: left;*/
    border-radius: 6px;
    margin-bottom: 4rem;
}

    .tips__content h2 {
        padding: 2rem 1rem;
    }

/* end tips page (homepage tips) */

.section__tips {
    padding-bottom: 5%;
}

.link__more__icon {
    font-size: 1.5rem;
    font-weight: 600;
    color: #888;
    line-height: 2rem;
}
    .link__more__icon:hover {
        color: #555;
        cursor: pointer;
    }

.tip-number {
    text-align: left;
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.3rem !important;
    line-height: 1.3rem;
    vertical-align: top;
    border: 1px solid #34c446;
    background-color: #34c446;
    margin-right: .5rem;
    margin-bottom: 1.5rem;
    padding: .3rem .6rem .3rem .3rem;
    color: #fff;
    width: 7rem !important;
    height: auto;
    min-height: 2.2rem;
    text-align: center;
    border-radius: .3rem;
}

.tip-header {
    font-family: Roboto;
    color: #1D1D1F;
    text-align: left;
    font-size: 3rem;
    font-weight: 600;
    line-height: 3.6rem;
    padding-bottom: 2rem;
}

.tip-normaltext p{
    font-family: Roboto;
    font-weight: 200;
    color: #1D1D1F;
    text-align: left;
    font-size: 1.7rem;
    line-height: 2.3rem;
    padding-bottom: 1rem;
}

    .tip-normaltext p.indent {
        padding-left: 2rem;
    }

    .tip-normaltext p.italic {
        font-style: italic;
    }

    .tip-normaltext p.image {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .tip-normaltext p img {
        width: 100%;
    }

    .tip-normaltext .highlight {
        font-weight: 500;
        color: #000;
    }

    .tip-normaltext .tip-end {
        width: 1.2rem;
        height: 1.2rem;
        background-color: #34c446;
        margin: 1.5rem 0;
    }

    .tip-normaltext p a {
        text-decoration: none;
        color: #34c446;
        font-weight: 400;
    }
        .tip-normaltext p a:hover {
            text-decoration: underline;
        }

    .tip-normaltext .green {
        color: #34c446;
    }

    @media only screen and (max-width: 1067px) {
        /*.tip-number {
            margin-top: 3rem;
            font-size: 1.8rem;
            width: 12rem;
        }*/
        .tip-header {
            font-size: 2.5rem;
            line-height: 3.1rem;
        }
    }

    @media only screen and (max-width: 735px) {
        /*.tip-number {
            margin-top: 2rem;
            font-size: 1.6rem;
            width: 10rem;
        }*/
        .tip-header {
            font-size: 2.2rem;
            line-height: 2.8rem;
        }
    }


.section__general .subheader {
    font-family: Roboto;
    color: #1D1D1F;
}

.section__general .hero__text {
    font-size: 2.6rem;
    line-height: 3.2rem;

}

.section__general .description__text {
    font-size: 2.2rem;
    line-height: 2.8rem;
}

.section__general .description__text li {
    padding-bottom: 1.2rem;
    margin-left: 2.5rem;
}

.section__general .subheader-bigger {
    font-size: 3rem;
    line-height: 3.4rem;
    font-weight: 500;
}

.page__menu-container {
    background-color: #FEFEFE;
    position: absolute;
    width: 100%;
    z-index: 9911;
    overflow: hidden;
    color: #000;
    opacity: 0.95;
    border-bottom: 1px solid #d9d8d8;
}
    .page__menu-container.op-full {
        opacity: 1;
    }

.page__menu-top-0 {
    position: fixed;
    top: 0;
}

.page__menu {
    height: 4.8rem;
    vertical-align: middle;
    padding: .7rem 1rem;
}

    .page__menu .product__symbol {
        float: left;
        /*margin-right: .1rem;*/
    }

    .page__menu .lamp-icon-style {
        font-size: 2.5rem;
        font-weight: 400;
        color: #34c446;
        float: left;
        line-height: 3.2rem;
        margin-right: .3rem;
    }

    .page__menu .product__name {
        float: left;
        font-size: 2rem;
        font-weight: 600;
    }
        
        @media only screen and (max-width: 470px) {
            .page__menu .product__name {
                font-size: 1.6rem;
                padding-top: .4rem;
            }
        }
        .page__menu .product__name .zoom {
            color: #2997FF;
            font-size: 1.5rem;
            padding-left: .5rem;
        }

    .page__menu .links {
        float: right;
        margin-top: .9rem;
        font-size: 1.2rem;
        font-weight: 400;
        color: #111;
    }
        @media only screen and (max-width: 470px) {
            .page__menu .link {
                display: none;
            }
        }
        .page__menu .links .active {
            cursor: default;
            color: #888;
        }

        .page__menu .link {
            padding-right: .5rem;
            color: #222;
            vertical-align: top;
        }

        /*.page__menu .link:hover {
            color: #40d553;
        }*/

    .page__menu .links .active:hover {
        color: #898989;
    }

    .page__menu .tips__home-link {
        float: right;
        margin-top: .8rem;
        margin-left: 2rem;
        background-color: #40d553;
        border-radius: 1rem;
        width: 6rem;
        font-size: 1.25rem;
        cursor: pointer;
        color: #fff;
        text-align: center;
    }

.xtra-padding {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
}

    @media only screen and (max-width: 850px) {
        .xtra-padding {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }


.top__margin-normal {
    margin-top: 6rem;
}

.tip-wide {
    padding-left: 10% !important;
    padding-right: 10% !important;
}
    @media only screen and (max-width: 735px) {
        .tip-wide {
            padding-left: 10% !important;
            padding-right: 10% !important;
        }
    }

.bigger {
    font-size: 7.5rem !important;
    line-height: 8rem !important;
    margin-top: 2.5rem !important;
    font-weight: 500 !important;
}
    @media screen and (max-width: 1067px) {
        .bigger {
            font-size: 4.5rem !important;
            line-height: 5rem !important;
        }
    }

    @media screen and (max-width: 735px) {
        .bigger {
            font-size: 4rem !important;
            line-height: 4.5rem !important;
        }
    }

.left-oriented {
    text-align: left !important;
    padding: 0 3% !important;
}

.right-oriented {
    padding-left: 30% !important;
}

.grey {
    color: #86868B !important;
}

.dark {
    color: #1D1D1F !important;
}

.white {
    color: #fff !important;
}

.header-wide {
    width: 70%;
}

@media screen and (max-width: 735px) {
    .header-wide, .right-oriented {
        padding-left: 3% !important;
        width: 100%;
    }
    .section__general .description__text {
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: #555 !important;
    }

}

.marketplace__image {
    width: 77% !important;
    height: auto;
    margin-top: 5%;
    margin-bottom: 1rem;
}


/* video player */
.player-container {
    margin-top: 3%;
    margin-bottom: 3%;
}

@media only screen and (min-width: 300px) {
    .player {
        width: 200px;
        height: 112px;
    }
}

@media only screen and (min-width: 400px) {
    .player {
        width: 300px;
        height: 169px;
    }
}

@media only screen and (min-width: 500px) {
    .player {
        width: 400px;
        height: 225px;
    }
}

@media only screen and (min-width: 600px) {
    .player {
        width: 500px;
        height: 281px;
    }
}

@media only screen and (min-width: 700px) {
    .player {
        width: 600px;
        height: 337px;
    }
}

@media only screen and (min-width: 750px) {
    .player {
        width: 650px;
        height: 365px;
    }
}

@media only screen and (min-width: 850px) {
    .player {
        width: 750px;
        height: 421px;
    }
}

@media only screen and (min-width: 1000px) {
    .player {
        width: 900px;
        height: 506px;
    }
}

@media only screen and (min-width: 1200px) {
    .player {
        width: 1000px;
        height: 562px;
    }
}

.section__1--forthheader {
    font-family: Oswald;
    color: #FFF;
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 6rem;
    padding: 0 1rem;
    padding-left: 0;
    margin-top: 3rem;
    width: 99.9%;
    /*text-align: center !important;*/
    /*margin-bottom: 2rem;*/
}

.pre--video--container {
    margin: 0 auto;
    text-align: center;
    padding-top: 5rem;
}

.video--controller {
    width: 9.2rem !important;
    height: auto;
}

    .video--controller:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.video--description {
    display: inline-block;
    font-family: 'Oswald';
    font-size: 2rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 2.6rem;
    padding: 0 .5rem 5rem .5rem;
    padding-left: 0;
    color: #FFF;
    width: 99.9%;
}

    .video--description span {
        color: #0095D9;
    }

.video--caption {
    font-family: Roboto;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    margin-top: 1rem;
    /*margin-left: 17.8%;*/
}

/*@media only screen and (max-width: 500px) {
    .video--controller { margin-left: 37%; }
    .video--caption { margin-left: 36%; }
}*/
@media only screen and (max-width: 850px) {
    .pre--video--container {
        margin-right: 0;
    }

    .section__1--forthheader {
        text-align: center;
    }

    .video--description {
        text-align: center;
    }
    /*.video--controller { margin-left: 0; margin: 0 auto; text-align: center !important; }
    .video--caption { margin-left: 0; text-align: center !important; }*/
}

/* end video player */

/* more tips */

.more__tips__content {
    display: none;
    background-color: #fff;
    padding: 2% 2%;
    border-bottom: 1px solid #ddd;
    width: 100%;
    text-align: left;
    height: 0vh;
    padding-right: 5rem;
    overflow-y: scroll;
} 

    .more__tips__content.show {
        display: block;
    }

    .more__tips__content.responsive {
        height: 100vh;
        opacity: 1 !important;
    }

    .more__tips__content .more__tips__header {
        font-family: Roboto;
        font-size: 1.8rem;
        font-weight: 600;
        padding-left: 5%;
        padding-bottom: 1rem;
        text-align: left;
    }
        .more__tips__content .more__tips__header span {
            width: 2rem;
            height: 2rem;
            background-color: #34c446;
            margin-right: 1rem;
        }

.no-border {
    border-bottom: none !important;
    height: 4.75rem;
}

/* new tips */

.tiplist_main_container {
    background-color: transparent;
    width: 100%;
    text-align: center;
    margin: auto;
    padding: 1rem 1rem;
}

.tiplist_container {
    display: inline-block;
    width: 45%;
    /*background-color: #e2ede3;*/
    border-radius: .6rem;
    overflow: hidden;
    padding: 1rem 1rem;
    margin: 1rem 1rem;
}

    @media screen and (max-width: 600px) {
        
        .tiplist_container {
            width: 97%;
            
        }
    }

.tiplist_number {
    text-align: left;
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.3rem;
    vertical-align: top;
    border: 1px solid #34c446;
    background-color: #34c446;
    margin-right: .5rem;
    margin-bottom: .5rem;
    padding: .3rem .6rem .3rem .3rem;
    color: #fff;
    width: 7rem;
    height: auto;
    min-height: 2.2rem;
    text-align: center;
    border-radius: .3rem;
}

.tiplist_title {
    text-align: left;
    font-family: Roboto;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 2.1rem;
    vertical-align: top;
    color: #000;
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.tiplist_intro {
    text-align: left;
    display: block;
    font-family: Roboto;
    font-weight: 200;
    font-size: 1.3rem;
    line-height: 1.5rem;
    color: #000;
    padding-left: 2.8rem;
    padding-left: 0;
    width: 98%;
    height: 2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.tiplist_read {
    text-align: right;
    font-family: Roboto;
    font-weight: 200;
    font-size: 1.2rem;
    color: #000;
    letter-spacing: .04em;
    line-height: 1.4rem;
    padding-top: 1rem;
    padding-right: 1rem;
}
    .tiplist_read:hover {
        cursor: pointer;
        color: #1a9f2b;
    }

    .tiplist_read:hover > #read_tips_icon {
        cursor: pointer;
        color: #1a9f2b;
    }

.read_tips_icon {
    padding-left: .5rem;
    font-size: 1rem;
    font-weight: 600;
    /*color: #1a9f2b;*/
    color: #333;
}

/* end new tips */



/* more tips */

/* tips breadcrumb */
/* Style the list */
ul.breadcrumb {
    display: block;
    padding: 0 4px;
    padding: 6rem 4px;
    list-style: none;
    text-align: left;
}

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-family: Roboto;
        font-size: 1.4rem;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }

        /* Add a color to all links inside the list */
        ul.breadcrumb li a {
            color: #1a9f2b;
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ul.breadcrumb li a:hover {
                color: #048b15;
                text-decoration: underline;
            } 


/* end tips breadcrumb */