/* ============================== 
COMMON TREATMENTS
============================== */
.yellow-outline{
    border:2px solid #E9E600;
}

.pill-btn-2.yellow-outline:before{
    opacity:0.25;
}

.pill-btn-2.brand-blue:before{
    opacity:0.25;
}


.pill-btn-2 .mobile-text{
    display:none;
}

.text-btn.yellow-outline:before{
    opacity:0.25;
}

.text-btn.brand-blue:before{
    opacity:0.25;
}


.text-btn .mobile-text{
    display:none;
}

h1,h2,h3,h4,h5 {
    font-weight: 400;
}


/* ============================== 
STYLES
============================== */
#main_wrapper{
    background:#161616;
    font:14px aktiv-grotesk, sans-serif;
    font-weight: 400;
    overflow:hidden;
    position: relative;
}

#main_wrapper .header-font{
    font-family: bebas-neue-pro-semiexpanded, sans-serif;
    font-weight:600;
    letter-spacing:0.01em;
}
body .mfp-bg{
    display:none;
}

.mfp-wrap{
    background:rgba(0,0,0,0.8);
    border:none;
    display:flex;
    height:calc(100% - 50px);
    left:0;
    outline:none;
    position: fixed;
    top:50px;
    width:100%;
    z-index:10;


}

.mfp-iframe-holder{
    padding-top:0;
    padding-bottom:0;
}

.mfp-wrap .mfp-container{
    align-items:center;
    display:flex;
    justify-content:center;
    width:100%;

    position: static;
    height:auto;
    left:auto;
    padding:0;
    top:auto;
}

.mfp-container:before{
    content:none;
}

.mfp-wrap .mfp-container .mfp-content{
    height:100%;
    max-width:1200px;
    width:calc(100% - 30px);
    line-height:normal;
    position:static;
    display:block;
    vertical-align:baseline;
    margin:auto;
}



.mfp-wrap .mfp-container .mfp-content .mfp-iframe-scaler{
    align-items:flex-end;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;

    width:auto;
    overflow:visible;
    padding-top:0;
}

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close{
    right:auto;
    top:auto;
    padding-right:0;
    line-height:normal;
    opacity:1;
    padding:0;
}

.mfp-wrap .mfp-container .mfp-content .mfp-iframe-scaler .mfp-iframe{
    height:calc(100% - 190px);
    margin-top:20px;
    width:100%;

    position:static;
    top:auto;
    left:auto;
    box-shadow:none;
}

.mfp-wrap .mfp-container .mfp-content .mfp-figure{
    align-items:flex-end;
    display:flex;
    flex-direction: column;
    height:calc(100% - 150px);
    padding-top:80px;
}

.mfp-figure:after{
    content:none;
}

.mfp-wrap .mfp-container .mfp-content .mfp-figure figure{
    align-items:center;
    display: flex;
    flex:1;
    justify-content:center;
    margin:auto;
    position: relative;
    width:100%;
}

.mfp-wrap .mfp-container .mfp-content .mfp-figure figure img{
    display:none;
    height:100%;
    max-width:100%;
    width:auto;
}

.mfp-wrap .mfp-container .mfp-content .mfp-figure figure figcaption{
    display:none;
}

.mfp-wrap .mfp-container .mfp-content .mfp-close{
    border:1px solid white;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    height:40px;
    position: relative;
    width:40px;
}

.mfp-wrap .mfp-container .mfp-content .mfp-close:before,
.mfp-wrap .mfp-container .mfp-content .mfp-close:after{
    background:white;
    content:'';
    height:2px;
    left:13px;
    position: absolute;
    top:50%;
    transform-origin:50%;
    transform:translate3d(0, -50%, 0) rotate(45deg);
    transition:500ms transform;
    width:14px;
}

.no-touchevents .mfp-wrap .mfp-container .mfp-content .mfp-close:hover:before,
.no-touchevents .mfp-wrap .mfp-container .mfp-content .mfp-close:hover:after{
    transform:translate3d(0, -50%, 0) rotate(45deg) scale(0.7);
}

.mfp-wrap .mfp-container .mfp-content .mfp-close:after{
    transform:translate3d(0, -50%, 0) rotate(-45deg);
}

.no-touchevents .mfp-wrap .mfp-container .mfp-content .mfp-close:hover:after{
    transform:translate3d(0, -50%, 0) rotate(-45deg) scale(0.8);
}

@media (max-width:1230px){
    .mfp-wrap .mfp-container .mfp-content .mfp-iframe-scaler .mfp-iframe{
        height:calc(58vw - 30px);
    }
}
*/


/* ============================== 
BACKGROUND TEXTURE LAYER
============================== */
#main_wrapper .background-texture{
    position: absolute;
}

#main_wrapper .background-texture .section-bg{
    /*outline:1px solid rgba(255,255,255, 0.2);*/
    position: relative;
    overflow:visible;
}

#main_wrapper .background-texture .section-bg .bg-lines{
    height:100%;
    left:0;
    overflow:hidden;
    position: absolute;
    top:0;
    width:100%;
}

#main_wrapper .background-texture .section-bg .bg-lines img{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate3d(-50%, -50%, 0);
    width:2876px;
}

#main_wrapper .background-texture .light{
    height:2116px;
    left:50%;
    position: absolute;
    top:0%;
    width:2116px;
}

#main_wrapper .background-texture .light:before{
    content:'';
    height:100%;
    left:-1058px;
    position: absolute;
    top:-1058px;
    width:100%;
}

#main_wrapper .background-texture .light.yellow:before{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c2ab00+0,c2ab00+100&1+0,0+68 */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(194,171,0,1) 0%, rgba(194,171,0,0) 68%, rgba(194,171,0,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(194,171,0,1) 0%,rgba(194,171,0,0) 68%,rgba(194,171,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(194,171,0,1) 0%,rgba(194,171,0,0) 68%,rgba(194,171,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ab00', endColorstr='#00c2ab00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    transform-origin:50%;
    opacity:0.12;
}

#main_wrapper .background-texture .light.blue:before{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#006dc2+0,006dc2+100&1+0,0+72 */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,109,194,1) 0%, rgba(0,109,194,0) 72%, rgba(0,109,194,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,109,194,1) 0%,rgba(0,109,194,0) 72%,rgba(0,109,194,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,109,194,1) 0%,rgba(0,109,194,0) 72%,rgba(0,109,194,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006dc2', endColorstr='#00006dc2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    opacity:0.2;
}

/* HERO */
#main_wrapper .background-texture #hero .light{
    top:50%;
    transform:translate3d(600px, 0, 0);
}

/* OVERVIEW */
#main_wrapper .background-texture #overview .section-width.fixed{
    margin-top:0;
    position: fixed;
    top:0;
    transition:500ms top;
}

#main_wrapper .background-texture #overview.overview-tablet .section-width.fixed{
    top:50px;
}

#main_wrapper .background-texture #overview .section-width.past{
    bottom:0;
    position: absolute;
    top:auto;
}

#main_wrapper .background-texture #overview.overview-tablet .section-width.past{
    height:calc(100vh - 50px);
}



.nav-menu-open #main_wrapper .background-texture #overview .section-width.fixed{
    top:50px;
}

#main_wrapper .background-texture #overview .section-width .overview-header{
    margin-top:6em;
}

#main_wrapper #overview #bg-canvas{
    opacity:0.2;
    transition:1500ms opacity 500ms;
}

#main_wrapper #overview.active #bg-canvas{
    opacity:1;
}

#main_wrapper .background-texture #overview .section-width{
    align-items:center;
    display: flex;
    flex-direction:column;
    justify-content:flex-start;
    height:calc(100vh - 60px);
    position: relative;
    width:100%;
}

#main_wrapper .background-texture #overview .section-width .overview-header img{
    left:50%;
    position: absolute;
    top:0;
    transform:translate3d(-50%, -40%, 0);
    width:2880px;
}

#main_wrapper .background-texture #overview .section-width .bg-triangles{
    left:50%;
    position: absolute;
    top:50%;
    transform:translate3d(-50%, -349px, 0);
}

#main_wrapper .background-texture #overview .section-width .bg-triangles img{
    width:2880px;
}

/* STATS */
#main_wrapper .background-texture #stats .light{
    top:0%;
    transform:translate3d(600px, 0,0);
}
#main_wrapper .background-texture #stats .bg-lines img{
    top:217px;
    transform:translate3d(-50%, 0, 0 );
}

/* FEATURES */

#main_wrapper .background-texture #features .section-width{
    margin:4em auto 10em;
    position: absolute;
    width:100%;
}
#main_wrapper .background-texture #features .light{
    top:50%;
    transform:translate3d(600px, 0, 0);
}

#main_wrapper .background-texture #features .section-width .bg-triangles:last-child .light{
    top:50%;
    transform:translate3d(-800px, 0, 0);
}

#main_wrapper .background-texture #features .section-width .bg-triangles{
    margin-bottom:8em;
    overflow:visible;
    position: relative;
}

#main_wrapper .background-texture #features .section-width .bg-triangles:last-child{
    margin-bottom:0;
}

#main_wrapper .background-texture #features .section-width .bg-triangles img{
    left:50%;
    position:absolute;
    top:50%;
    transform:translate3d(50%, 50%, 0);
    width:2880px;
}

/* COMMUNITY */
#main_wrapper .background-texture #community .light{
    top:100%;
    transform:translate3d(800px, 0, 0);
}

/* TIPS */
#main_wrapper .background-texture #tips{
    overflow:hidden;
    position: relative;
}

#main_wrapper .background-texture #tips img{
    left:50%;
    position: absolute;
    top:50%;
    transform:translate3d(-50%, -50%, 0);
    width:2880px;
}

/* SHOP COLLECTION */
#main_wrapper .background-texture #shop-collection{
    position: relative;
    overflow:hidden;
}

#main_wrapper .background-texture #shop-collection img{
    bottom:0;
    left:50%;
    position: absolute;
    transform:translate3d(-50%, 0, 0);
    width:2880px;
}

/* ============================== 
MAIN BACKGROUND
============================== */
#main_wrapper .main-background{
    left:0;
    height:calc(100% - 52px);
    position: fixed;
    top:52px;
    transition:800ms filter;
    width:100%;
}

#main_wrapper .main-background.dim{
    filter:brightness(0.8);
}

#main_wrapper .main-background.transparent{
    filter:brightness(0.4);
}

#main_wrapper .main-background.lit,
#main_wrapper .main-background.hidden{
    filter:brightness(1);
}
/* ============================== 
MAIN SECTIONS
============================== */
#main_wrapper section{
    display:flex;
    height:auto;
    justify-content:center;
    position: relative;
    width:100%;

}

#main_wrapper section h1{
    font-size:4.15em;
    line-height:1.1;
}

#main_wrapper section h1.extra-large{
    font-size:6.9em;
}

#main_wrapper section h2{
    font-size:3.15em;
    line-height:1.1;
}

#main_wrapper section h3{
    font-size:2.35em;
    line-height:1.1;
}

#main_wrapper section h4{
    font-size: 2.5em;
    font-family: 'bebas-neue-pro-semiexpanded';
    font-weight: 600;
    margin: 0;
}

#stats .subheader .subheader-block {
    display: none;
}

#main_wrapper section .full-width{
    width:100%;
}

#main_wrapper section .section-width{
    display:flex;
    justify-content:center;
    max-width:1200px;
    width:calc(100% - 30px);
}

#main_wrapper section .content-width{
    display:flex;
    justify-content:space-between;
    max-width:800px;
    width:calc(100% - 60px);
}

#main_wrapper .background-texture{
    pointer-events:none;
    position: absolute;
    width:100%;
}


/* ============================== 
HERO
============================== */
#hero{
    min-height:560px;
    position: relative;
    z-index:1;
}

#hero .logo{
    position: relative;
    opacity:0;
    transition:1200ms opacity 800ms;
    width:180px;
}

#hero.active .logo{
    opacity:1;
}

#hero .bg{
    background:url(http://cwsmgmt.corsair.com/landing/hydro-x/img/hydro-x-home/hero-bg.jpg)no-repeat center bottom;
    background-size:cover;
    filter:brightness(30%);
    height:100%;
    left:0;
    opacity:0;
    position: absolute;
    top:0;
    transition:1500ms opacity;
    /*-webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/
    width:100%;
}

#hero.active .bg{
    opacity:1;
}

#main_wrapper #hero .content-width{
    max-width:100%;
    width:100%;
}

#hero .title-holder{
    position: relative;
}

#hero .title-holder:before{
    background:rgba(0,0,0,0.3);
    content:'';
    height:80%;
    left:50%;
    opacity:0;
    position: absolute;
    top:50%;
    transform:translate3d(-50%, -50%, 0);
    width:80%;

    -webkit-box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.62);
    -moz-box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.62);
    box-shadow: 0px 0px 44px 0px rgba(0,0,0,0.62);

    transition:1200ms opacity 1000ms;
}

#hero.active .title-holder:before{
    opacity:1;
}

#hero .title-holder h1{
    color: white;
    position: relative;
    opacity:0;
    transform:translate3d(0, -20px, 0);
    transition:1200ms opacity 1000ms, 1200ms transform 1000ms;
}

#hero.active .title-holder h1{
    opacity:1;
    transform:translate3d(0, 0px, 0);
}

#hero .secondary-text{
    max-width:500px;
    opacity:0;
    transform:translate3d(20px, 0, 0);
    transition:1200ms opacity 1000ms, 1200ms transform 1000ms;
    background: -webkit-linear-gradient(#52becf, #76fbf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'aktiv-grotesk', sans-serif;
    font-size: 1.8em;
}

#hero.active .secondary-text{
    opacity:1;
    transform:translate3d(0px, 0, 0);
}

#hero .content-width{
    display:flex;
    align-items:center;
}

#hero .content-width .content-item-left,
#hero .content-width .content-item-right{
    width:50%;
}

#hero .content-width .spacer{
    display: none;
}

#hero .content-width .content-item-right{
    display: flex;
    position: relative;
}

#hero .content-width .content-item-right img{
    transform:translate3d(0, 60px, 0) scale(1.1);
    width:90%;
}

#hero .content-width .content-item-right .video-thumbnail{
    align-items:center;
    display: flex;
    flex-direction:column;
    height:100%;
    justify-content:center;
    width:100%;
    -webkit-box-shadow: 0px 0px 102px 0px rgba(112,205,245,0.35);
    -moz-box-shadow: 0px 0px 102px 0px rgba(112,205,245,0.35);
    box-shadow: 0px 0px 102px 0px rgba(112,205,245,0.35);
}

#hero .content-width .content-item-right .video-thumbnail .video-container{
    display:none;
}

#hero .content-width .content-item-right .video-thumbnail .video-play-thumbnail{
    opacity:0;
    transform-origin:50%;
    transform:rotate(-45deg);
    transition:250ms opacity 2400ms, 250ms transform 2400ms;
}

#hero.active .content-width .content-item-right .video-thumbnail .video-play-thumbnail{
    opacity:1;
    transform:rotate(0deg);
}

#hero .content-width .content-item-right .video-thumbnail h2{
    display: inline-block;
    font-size:1.85em;
    margin-top:1em;
    position: relative;
    opacity:0;
    transition:500ms opacity 2800ms;
}

#hero.active .content-width .content-item-right .video-thumbnail h2{
    opacity:1;
}

/* ============================== 
LEAD IN
============================== */
#main_wrapper section#lead-in{
    align-items:center;
    min-height:0;
    width:100%;
}


#main_wrapper section#lead-in .content-width{
    filter: grayscale(100%);
    justify-content:center;
    margin:4em auto;
    max-width:3000px;
    min-width:1200px;
    opacity:0.2;
    padding-bottom:4em;
    padding-top:4em;
    position: relative;
    transition:1200ms filter 400ms, 800ms opacity;
    width:calc(100% - 150px);
}

#main_wrapper section#lead-in.active .content-width{
    filter: grayscale(0%);
    opacity:1;
}

#main_wrapper section#lead-in .content-width .background{
    background:url(http://cwsmgmt.corsair.com/landing/hydro-x/img/hydro-x-home/lead-in-bg.jpg)no-repeat center;
    background-size:cover;
    height:100%;
    left:0;
    position: absolute;
    top:0;
    width:100%;
}

#main_wrapper section#lead-in .text{
    max-width:800px;
    position: relative;
    text-align:center;
    transition:1200ms height;
    width:calc(100% - 30px);
}

#main_wrapper section#lead-in .slide{
    align-items:center;
    display: flex;
    opacity:0;
    position: absolute;
    pointer-events:none;
    top:50%;
    transform:translate3d(0, -50%, 0);
    transition:1200ms opacity;
}

#main_wrapper section#lead-in .slide.show{
    opacity:1;
    position: relative;
    pointer-events:auto;
}

#main_wrapper section#lead-in .slide .slide-img{
    border-radius:200px;
    margin-right:30px;
    overflow:hidden;
    position: relative;
    width:20%;
}

#main_wrapper section#lead-in .slide .slide-img img{
    width:100%;
}

#main_wrapper section#lead-in .slide .slide-text{
    width:calc(80% - 30px);
}

#main_wrapper section#lead-in h3{
    color:#eee;
    line-height:1.25;
    margin-bottom: 0.5em;
}

#main_wrapper section#lead-in h3.emphasize{
    background: -webkit-linear-gradient(left,  #3fa2af 0%,#68509a 50%,#7a1a77 100%); /* Chrome10-25,Safari5.1-6 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0em;
    transition:5200ms ease-out 2800ms;
}

/* ============================== 
OVERVIEW
============================== */
#main_wrapper section#overview{
    /*height:calc(100vh - 100px);*/
    height:860px;
    margin-top:8em;
    position: relative;
    margin-bottom:4em;
}

#main_wrapper section#overview.overview-tablet{
    height:auto;
}

#main_wrapper section#overview .overview-canvas{
    bottom:0;
    display:inline-block;
    height:calc(100% - 80px);
    position: absolute;
    width:100%;
}

#main_wrapper section#overview .section-width{
    align-items:center;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    position: relative;
}

#main_wrapper section#overview.overview-tablet .section-width{
    height:auto;
    max-width:100vw;
    width:100vw;
}

#main_wrapper section#overview.overview-tablet .section-width.past{
    top:auto;
}

#main_wrapper section#overview .section-width .overview-header{
    /*margin-top:6em;*/
    left:50%;
    opacity:0;
    position: absolute;
    transform:translate3d(-50%, 50%, 0);
}

#main_wrapper section#overview.overview-tablet .section-width .overview-header{
    transform:translate3d(-50%, 0, 0);
    transition:500ms top;
    width:100%;
}

#main_wrapper section#overview.overview-tablet .section-width .overview-header h2{
    text-align:center;
}

#main_wrapper section#overview .section-width h1{
}

#main_wrapper section#overview .overview-container{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    height:calc(100%);
    justify-content:center;
    position: relative;
    width:100%;
}

#main_wrapper section#overview.overview-tablet .overview-container{
    height:100%;
    margin-top:80px;
}

#main_wrapper section#overview.short-height .overview-container{
    justify-content:flex-end;
}

#main_wrapper section#overview .overview-container .overlay{
    align-items:flex-start;
    display: flex;
    height:100%;
}

#main_wrapper section#overview .overview-container .overlay .item-list{
    align-items:center;
    display: flex !important;
    height:100%;
    justify-content: space-between;
    opacity:0;
    pointer-events:none;
    position:absolute;
    transition:800ms opacity;
    width:100%;
}

#main_wrapper section#overview .overview-container .overlay .item-list.show{
    opacity:1;
    pointer-events:auto;
    position:static;
}

#main_wrapper section#overview.short-height .overview-container .overlay .item-list{
    margin-bottom:2em;
}

#main_wrapper section#overview .overview-container .overlay .list-item{
    align-items:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:2em auto;
    max-width:280px;
    opacity:0.2;
    text-align:center;
    transition:1200ms opacity;
    width:100%;
}

#main_wrapper section#overview.active .overview-container .overlay .list-item{
    opacity:1;
}

#main_wrapper section#overview .overview-container .overlay .list-item h3{
    font-size:2em;
    letter-spacing:0.03em;
    margin-bottom:0.25em;
}

#main_wrapper section#overview .overview-container .overlay .list-item .text-btn{
    box-sizing:border-box;
    opacity:0;
    transform:500ms opacity;
}

#main_wrapper section#overview.active .overview-container .overlay .list-item .text-btn{
    opacity:1;
}

/* TABLET */
#main_wrapper section#overview.overview-tablet .overlay .item-list{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    margin-left:30px;
    width:auto;
}

#main_wrapper section#overview.overview-tablet .overlay .item-list .list{
    width:100%;
}

#main_wrapper section#overview.overview-tablet .overlay .item-list .list .list-item,
#main_wrapper section#overview.overview-tablet.active .overlay .item-list .list .list-item{
    width:auto;
}

#main_wrapper section#overview.overview-tablet .overlay .item-list .list .list-item:nth-child(1),
#main_wrapper section#overview.overview-tablet.active .overlay .item-list .list .list-item:nth-child(1){
    margin:0 auto 2em;
    width:auto;
}

#main_wrapper section#overview .overview-nav{
    align-items:center;
    bottom: 4em;
    display: flex;
    flex-direction:column;
    justify-content: center;
    right:0;
    pointer-events:none;
    position: absolute;
    width:100%;
}

#main_wrapper section#overview.overview-tablet .overview-nav{
    max-width:100%;
    right:0;
}

#main_wrapper section#overview .overview-nav ul{
    display: flex;
}

#main_wrapper section#overview .overview-nav ul li{
    margin-left:10px;
}

#main_wrapper section#overview .overview-nav ul li:nth-child(1){
    margin-left:0px;
}

#main_wrapper section#overview .overview-nav ul li a{
    background:#E9E600;
    border-radius:50%;
    display:inline-block;
    height:10px;
    pointer-events:auto;
    width:10px;
}

#main_wrapper section#overview.overview-tablet .section-width h1{
    font-size:2.5em;
    margin-top:3.5em;
    transform:translate3d(0%, 0, 0);
}

/* ============================== 
STATS
============================== */

.active .subheader .subheader-block{
    animation:500ms blink3;
    opacity:1;
}

.subheader .subheader-block{
    opacity:0;
}

.subheader h4{
    opacity:0;
    transform:translate3d(20px, 0px, 0);
    transition:500ms opacity 500ms, 500ms transform 500ms;
}

#main_wrapper .subheader.small  .subheader-block{
    height:15px;
    width:15px;
}

#main_wrapper .subheader.small h4{
    font-size:1.3em;
}

#main_wrapper .active .subheader h4{
    opacity:1;
    transform:translate3d(0px, 0px, 0);
}

@keyframes blink3{
    0%{
        opacity:0;
    }
    20%{
        opacity:1;
    }
    40%{
        opacity:0;
    }
    60%{
        opacity:1;
    }
    80%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

#main_wrapper section#stats{
    min-height:0;
}

#main_wrapper section#stats .section-width{
    align-items:flex-start;
    display: flex;
    flex-direction: column;
    margin-bottom:8em;
    margin-top:8em;

}

#main_wrapper section#stats .section-width .all-stats{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    margin-bottom:4em;
    margin-top:4em;
    width:calc(100% - 30px);
}

#main_wrapper section#stats .section-width .all-stats .stats-75{
    display:flex;
    justify-content:space-between;
    width:calc(75% - 30px);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter{
    width:calc(33% - 20px);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail{
    background:black;
    padding:15px;
    width:calc(25% - 30px);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter p{
    line-height:1.5;
    width:calc(100% - 30px);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter:hover svg .circle{
    transform:scale(0.9);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter:hover svg .triangle{
    transform:scale(1.5);
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter h1{
    background: -webkit-linear-gradient(#3899a7, #63e6e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 9em;
    margin-bottom: 0;
    line-height: 1;
    opacity:0;
    transform:translate3d(20px, 0, 0);
    transition:500ms opacity, 500ms transform;
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter h2{
    opacity:0;
    transition:500ms opacity, 500ms transform;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(1) h1{
    opacity:1;
    transform:translate3d(0px, 0, 0);
    transition:250ms opacity, 500ms transform;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(1) h2{
    opacity:1;
    transform:translate3d(0px, 0, 0);
    transition:500ms opacity 500ms, 500ms transform 500ms;
}


#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(2) h1{
    opacity:1;
    transform:translateX(0px);
    transition:250ms opacity 500ms, 500ms transform 500ms;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(2) h2{
    opacity:1;
    transform:translateX(0px);
    transition:500ms opacity 1000ms, 500ms transform 1000ms;
}


#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(3) h1{
    opacity:1;
    transform:translateX(0px);
    transition:250ms opacity 1000ms, 500ms transform 1000ms;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter:nth-child(3) h2{
    opacity:1;
    transform:translateX(0px);
    transition:500ms opacity 1500ms, 500ms transform 1500ms;
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail{
    opacity:0;
}
#main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail{
    opacity:1;
    transition:250ms opacity 1500ms;
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail .video-play-thumbnail{
    opacity:0;
    transform:rotate(-45deg);
    transition:500ms opacity 1700ms, 500ms transform 1700ms;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail .video-play-thumbnail{
    opacity:1;
    transform:rotate(0deg);
    width: 100%;
    justify-content: center;
}

#main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail p{
    opacity:0;
    transform:translateX(20px);
    transition:500ms opacity 2300ms, 500ms transform 2300ms;
}

#main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail p{
    opacity:1;
    transform:translateX(0px);
}

#main_wrapper section#stats .pill-btn-2 .arrow:before,
#main_wrapper section#stats .pill-btn-2 .arrow:after{
    background:#151515;
}

#main_wrapper section#stats .pill-btn-2{
    opacity:0;
    transition:500ms opacity 2800ms;
}

#main_wrapper section#stats.active .pill-btn-2{
    opacity:1;
}

/* ============================== 
FEATURES
============================== */
#main_wrapper section#features{
    min-height:0;
}

#main_wrapper section#features .section-width{
    align-items:center;
    display: flex;
    flex-direction: column;
    margin:0 auto;

}

#main_wrapper section#features .content-item{
    align-items:center;
    display:flex;
    justify-content:space-between;
    margin-bottom:8em;
    width:100%;
}

#main_wrapper section#features .content-item .text-container{
    width:40%;
}

#main_wrapper section#features .content-item .text-block{
    margin-top:2em;
    width:100%;
}

#main_wrapper section#features .content-item .text-block:first-child{
    margin-left:auto;
}

#main_wrapper section#features .content-item .text-block h2{
    line-height:1.15;
    margin-bottom:0.25em;
}

#main_wrapper section#features .content-item .text-block p{
    line-height:1.7;
}

#main_wrapper section#features .content-item .graph{
    
    width:50%;
}

#main_wrapper section#features .content-item .graph img.graph-img{
    width:100%;
}

#main_wrapper section#features .content-item .graph:last-child{
    align-items:center;
    display: flex;
    justify-content: space-between;
}

#main_wrapper section#features .content-item.with-graph .graph{
    flex-direction:column;
}

#main_wrapper section#features .content-item.with-graph .graph p{
    margin-top:2em;
    width:calc(100% - 120px);
}

#main_wrapper section#features .content-item .graph .graph-container{
    align-items:center;
    display:flex;
    flex-direction:column;
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container{
    display:flex;
    flex-direction:column;
    margin-top:30px;
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container .bar{
    border:1px solid #757575;
    display:flex;
    height:40px;
    margin-bottom: 0.35em;
    justify-content:flex-start;
    position: relative;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(1) .bar{
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(2) .bar{
    width:80%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(3) .bar{
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container .bar .bar-fill{
    height:100%;
    left:0;
    position: absolute;
    top:0;
    width:50%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#36a1aa+0,5ac2c7+54,5ac2c7+54,9cf1f4+100 */
    background: #36a1aa; /* Old browsers */
    background: -moz-linear-gradient(left,  #36a1aa 0%, #5ac2c7 54%, #5ac2c7 54%, #9cf1f4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #36a1aa 0%,#5ac2c7 54%,#5ac2c7 54%,#9cf1f4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #36a1aa 0%,#5ac2c7 54%,#5ac2c7 54%,#9cf1f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36a1aa', endColorstr='#9cf1f4',GradientType=1 ); /* IE6-9 */

}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(1) .bar .bar-fill{
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(2) .bar .bar-fill{
    width:100%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(3) .bar .bar-fill{
    width:100%;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(1) .bar .bar-fill{
    transition:1200ms width;
    width:70%;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(2) .bar .bar-fill{
    transition:1200ms width 500ms;
    width:60%;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(3) .bar .bar-fill{
    transition:1200ms width 1000ms;
    width:65%;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container .bar h3{
    position: absolute;
    right:0;
    top:0;
    transform:translateY(-102%);
    white-space:nowrap;
}

#main_wrapper section#features .content-item .graph .graph-container .data-container .bar .bar-fill h3{
    opacity:0;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(1) .bar .bar-fill h3{
    transition:1200ms opacity 300ms;
    opacity:1;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(2) .bar .bar-fill h3{
    transition:1200ms opacity 800ms;
    opacity:1;
}

#main_wrapper section#features.active .content-item .graph .graph-container .data-container:nth-child(3) .bar .bar-fill h3{
    transition:1200ms opacity 1300ms;
    opacity:1;
}

#main_wrapper section#features .content-item .graph .arrow{
    align-items:center;
    border:2px solid white;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    height:40px;
    justify-content:center;
    transform-origin:50%;
    transition:250ms transform;
    width:40px;
}

.no-touchevents #main_wrapper section#features .content-item .graph .arrow.next:hover{
    transform:scale(0.9);
}

#main_wrapper section#features .content-item .graph .arrow.prev{
    transform:scaleX(-1);
}

.no-touchevents #main_wrapper section#features .content-item .graph .arrow.prev:hover{
    transform:scaleX(-0.9) scaleY(0.9);
}

#main_wrapper section#features .content-item .graph .arrow .icon-arrow{
    height:50%;
    position: relative;
    transition:250ms transform;
    width:50%;
}

.no-touchevents #main_wrapper section#features .content-item .graph .arrow:hover .icon-arrow{
    transform:scale(1.25);
}

#main_wrapper section#features .content-item .graph .arrow .icon-arrow:before,
#main_wrapper section#features .content-item .graph .arrow .icon-arrow:after{
    background:white;
    content:'';
    height:2px;
    left:25%;
    position: absolute;
    top:50%;
    transform-origin:100% 50%;
    width:50%;
}

#main_wrapper section#features .content-item .graph .arrow .icon-arrow:before{
    transform:rotate(45deg);
}

#main_wrapper section#features .content-item .graph .arrow .icon-arrow:after{
    transform:rotate(-45deg);
}

#main_wrapper section#features .content-item .graph .graph-gallery{
    height:100%;
    position: relative;
    width:calc(100% - 120px);
}

#main_wrapper section#features .content-item .graph .img-collection{
    display:flex;
    flex-wrap:wrap;
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    transition:800ms opacity;
    top:0;
    width:100%;
}

#main_wrapper section#features .content-item .graph .img-collection.show{
    opacity:1;
    position: relative;
}

#main_wrapper section#features .content-item .graph .img-block{
    margin-bottom:20px;
    width:calc(50% - 10px);
}

#main_wrapper section#features .content-item .graph .img-block img{
    width:100%;
}

#main_wrapper section#features .content-item .graph .img-block:nth-child(odd){
    margin-right:10px;
}

#main_wrapper section#features .content-item .graph .img-block:nth-child(even){
    margin-left:10px;
}

#main_wrapper section#features .content-item .graph .img-block:nth-child(3),
#main_wrapper section#features .content-item .graph .img-block:nth-child(4){
    margin-bottom:auto;
}

#main_wrapper section#features .content-item .graph .img-block{
    opacity:0;
}

#main_wrapper section#features .content-item .graph .img-collection.show .img-block{
    opacity:1;
}

#main_wrapper section#features .content-item .graph .img-collection .img-block:nth-child(1){
    transition:300ms opacity;
}

#main_wrapper section#features .content-item .graph .img-collection .img-block:nth-child(2){
    transition:300ms opacity 150ms;
}

#main_wrapper section#features .content-item .graph .img-collection .img-block:nth-child(3){
    transition:300ms opacity 300ms;
}

#main_wrapper section#features .content-item .graph .img-collection .img-block:nth-child(4){
    transition:300ms opacity 350ms;
}

#main_wrapper section#features .content-item .graph img.gallery-img{
    margin-bottom:20px;
    width:100%
}

/* ============================== 
COMMUNITY
============================== */

#main_wrapper section#community{
    filter:grayscale(100%);
    transition:1200ms filter;
}
#main_wrapper section#community.active{
    filter:grayscale(0%);
}

#main_wrapper section#community .section-width{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1d1d1d+1,0c1115+100 */
    background: #4f9fc8; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #0c1115 1%, #0c0c0c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #0c1115 1%,#0c0c0c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #0c1115 1%,#0c0c0c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c1115', endColorstr='#0c0c0c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    align-items:center;
    display: flex;
    margin:10em auto;
    max-width:1440px;
    width:100%;
}

#main_wrapper section#community .left{
    filter:grayscale(100%);
    width:40%;
    transition:500ms filter 1000ms;
}

#main_wrapper section#community.active .left{
    filter:grayscale(0%);
}

#main_wrapper section#community .left .img,
#main_wrapper section#community .left .img img{
    width:100%;
}

#main_wrapper section#community .left .img{
    margin-left:auto;
    margin-right:10%;
    transform:scale(1.2);
    transition:500ms transform 1000ms;
    width:75%;
}

#main_wrapper section#community .right{
    margin-left:20px;
    max-width:580px;
    padding:3em 0;
    width:calc(60% - 60px);
}

#main_wrapper section#community .right .subheader h4{
    opacity:0;
    transform:translateX(20px) translateY(0px);
    transition:500ms opacity 500ms, 500ms transform 500ms;
    font-family: 'aktiv-grotesk', sans-serif;
    font-weight: 400;
    color: #E9E600;
    font-size: 1em;
}

#main_wrapper section#community .right .subheader h4{
    opacity:1;
    transform:translateX(0px) translateY(0px);
}

#main_wrapper section#community .right h1{
    margin:0 auto;
    opacity:0;
    transform:translateX(20px);
    transition:500ms transform 1000ms, 500ms opacity 1000ms;
    margin-bottom: 0.25em;
}

#main_wrapper section#community.active .right h1{
    opacity:1;
    transform:translateX(0px);
}

#main_wrapper section#community .right p{
    line-height:2;
    opacity:0;
    transform:translateX(20px);
    transition:500ms transform 1300ms, 500ms opacity 1300ms;
}

#main_wrapper section#community.active .right p{

    opacity:1;
    transform:translateX(0px);
}

#main_wrapper section#community .right .pill-btn-2{
    margin-top:2em;
    opacity:0;
    transform:translateX(20px);
    transition:500ms transform 1500ms, 500ms opacity 1500ms;
}

#main_wrapper section#community.active .right .pill-btn-2{
    opacity:1;
    transform:translateX(0px);
}

#main_wrapper section#community .right .pill-btn-2:before{
    opacity:0.25s;
}

/* ============================== 
TIPS
============================== */
#main_wrapper section#tips .section-width{
    flex-direction:column;
    justify-content:flex-start;
    margin:8em auto 10em;
}

#main_wrapper section#tips .section-width .top-subheader{
    align-items:center;
    display:flex;
    justify-content:space-between;
    margin-bottom:2em;
}

#main_wrapper section#tips .all-collections{
    margin-bottom:20px;
    position: relative;
    word-spacing: -1em;
}

#main_wrapper section#tips .all-collections .video-thumbnail{
    opacity:0;
    transform-origin:50%;
    word-spacing: normal;
}

#main_wrapper section#tips.active .all-collections .video-thumbnail{
    opacity:1;
}

#main_wrapper section#tips .all-collections .video-thumbnail:nth-child(1){
    float:left;
    margin-right:2px;
    padding-top:326px;
    width:580px;
}

#main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width{
    display:inline-block;
    margin-left:0;
    margin-top:17px;
    padding-top:151px;
    position: relative;
    width:281px;
}

#main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.set{
    margin-left:19px;
}

#main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row{
    margin-left:20px;
    margin-top:0;
}

#main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-col,
#main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.set.first-col{
    margin-left:0;
}

#main_wrapper section#tips .pill-btn-2{
    align-self:center;
}

#main_wrapper section#tips .pill-btn-2 .plus:after{
    display:none;
}

#main_wrapper section#tips .pill-btn-2.more .plus:after{
    display:block;
}

#main_wrapper section#tips .pill-btn-2 .less{
    display:inline;
}

#main_wrapper section#tips .pill-btn-2.more .less{
    display:none;
}

#main_wrapper section#tips .pill-btn-2 .more{
    display:none;
}

#main_wrapper section#tips .pill-btn-2.more .more{
    display:inline;
}

#main_wrapper section#tips .dropdown{
    margin-left:16px;
    min-width:180px;
}

#main_wrapper section#tips .dropdown a{
    width:100%;
    font-family: 'aktiv-grotesk';
    font-size: .9em;
    font-weight: 400;
}

#main_wrapper section#tips .dropdown .options-list li{
    background:rgba(0,0,0,0.8);
}

#main_wrapper section#tips .dropdown .text-btn:before{
    content:none;
}

#main_wrapper section#tips .dropdown .text-btn .text-btn-text{
    display:block;
    padding:0 25px 0 0;
    text-align:right;
    white-space:nowrap;
    width:100%;
}

#main_wrapper section#tips .dropdown .text-btn .arrow:before,
#main_wrapper section#tips .dropdown .text-btn .arrow:after{
    background:#E9E600;
}

@keyframes blink3video{
    0%{
        opacity:0;
    }
    20%{
        opacity:1;
    }
    40%{
        opacity:0;
    }
    60%{
        opacity:1;
    }
    80%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/* ============================== 
GALLERY
============================== */
#main_wrapper section#gallery{
    align-items:center;
    display: flex;
    flex-direction:column;
    
}

#main_wrapper section#gallery .subheader{
    margin-bottom:2em;
}

#main_wrapper section#gallery .section-width{
    justify-content:flex-start;
    margin-top:8em;
}

#main_wrapper section#gallery .section-width.disclaimer{
    margin-top:1em;
    opacity: 0.35;
}

#main_wrapper section#gallery .section-width.disclaimer p {
    font-weight: 400;
}

#main_wrapper section#gallery .section-width.disclaimer a:link,
#main_wrapper section#gallery .section-width.disclaimer a:active,
#main_wrapper section#gallery .section-width.disclaimer a:visited{
    color:white;
    text-decoration:underline;
}

#main_wrapper section#gallery .full-width{
    max-width:2880px;
    position: relative;
}

#main_wrapper section#gallery .gallery-items{
    opacity:0;
    transition:500ms opacity 800ms;
}

#main_wrapper section#gallery.active .gallery-items{
    opacity:1;
}

#main_wrapper section#gallery .gallery-items .img-container{
    height:300px;
    margin:auto;
    width:500px;
}

#main_wrapper section#gallery .gallery-items .img{
    height:300px;
    margin:auto;
    width:485px;
}

#main_wrapper section#gallery .gallery-items .img-container .img{
    display:flex;
    transition:500ms transform;
}

#main_wrapper section#gallery .arrows{
    display:flex;
    left:30px;
    justify-content:space-between;
    pointer-events:none;
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    width:calc(100% - 60px);

}

#main_wrapper section#gallery .arrows .arrow{
    align-items:center;
    border:1px solid white;
    border-radius:50%;
    cursor:pointer;
    display: flex;
    height:50px;
    justify-content:center;
    pointer-events: auto;
    transform-origin:50% 50%;
    transition:250ms transform;
    width:50px;
}

.no-touchevents #main_wrapper section#gallery .arrows .arrow:hover{
    transform:scale(0.9);
}

#main_wrapper section#gallery .arrows .arrow .arrow-elements{
    height:30px;
    position: relative;
    transform-origin: 50% 50%;
    transition:250ms transform;
    width:30px;
}

#main_wrapper section#gallery .arrows .arrow-next .arrow-elements{
    transform:scaleX(-1);
}

#main_wrapper section#gallery .arrows .arrow .arrow-elements:before,
#main_wrapper section#gallery .arrows .arrow .arrow-elements:after{
    background: white;
    content:'';
    height:1px;
    left:7px;
    position: absolute;
    top:50%;
    transform-origin:0 50%;
    width:50%;
}

#main_wrapper section#gallery .arrows .arrow .arrow-elements:before{
    transform:rotate(45deg);
}

#main_wrapper section#gallery .arrows .arrow .arrow-elements:after{
    transform:rotate(-45deg);
}

/* ============================== 
NEXT PAGE
============================== */
#main_wrapper section#next-page{
    display: flex;
    justify-content: center;
}

#main_wrapper section#next-page .content-width{
    display:flex;
    justify-content:flex-end;
    margin-top:4em;
    max-width:1200px;
}

#main_wrapper section#next-page .text-btn .text-btn-icon.arrow:before,
#main_wrapper section#next-page .text-btn .text-btn-icon.arrow:after{
    background:#E9E600;
}

#main_wrapper section#next-page .text-btn .text-btn-text{
    padding:0;
    font-family: 'aktiv-grotesk';
    font-size: .9em;
    font-weight: 400;
}

#main_wrapper section#next-page .text-btn .text-btn-icon{
    right:-12px;
}

/* ============================== 
SHOP COLLECTION
============================== */
#main_wrapper section#shop-collection .content-width{
    align-items:center;
    display: flex;
    flex-direction:column;
    margin:8em auto;
    max-width:860px;
}

#main_wrapper section#shop-collection .header{
    align-items:center;
    display: flex;
    flex-direction:column;
}

#main_wrapper section#shop-collection .header h4{
    font-size: 1.28em;
    margin-top:1em;
    font-family: 'aktiv-grotesk';
    font-weight: 400;
}


#main_wrapper section#shop-collection .grid{
    display: flex;
    flex-direction:column;
    margin-top:4em;
    width:100%;
}

#main_wrapper section#shop-collection .grid-row{
    display: flex;
    margin-bottom:20px;
}

#main_wrapper section#shop-collection .grid-row.tablet-only{
    display:none;
}

#main_wrapper section#shop-collection .grid-row.mobile-only{
    display:none;
}

#main_wrapper section#shop-collection .grid-unit{
    align-items:center;
    background:#0e0e0e;
    display:flex;
    font-size:2em;
    height:120px;
    justify-content:center;
    margin:auto 10px;
    position: relative;
    width:calc(20% - 20px);
}

#main_wrapper section#shop-collection .grid-unit .grid-unit-bg{
    filter:grayscale(100%);
    height:100%;
    left:0;
    opacity:0.2;
    position: absolute;
    top:0;
    transition: 500ms opacity, 500ms filter;
    width:100%;
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit:hover .grid-unit-bg{
    filter:grayscale(0%);
    opacity:1;
}

#main_wrapper section#shop-collection .grid-unit.unit-double{
    width:calc(40% - 20px);
}

#main_wrapper section#shop-collection .grid-unit h3{
    font-size:0.8em;
    position: relative;
    text-align:center;
    transition:500ms color;
    width:calc(100% - 30px);
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit:hover h3{
    color:#E9E600;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs{
    background:transparent;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .rounded-btn{
    border:2px dashed #E9E600;
    display:flex;
    justify-content:center;
    padding:20px 10px;
    transition:250ms border;
    width:calc(100% - 80px);
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover .rounded-btn{
    border:2px solid #ffffff;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs h3{
    color:#E9E600;
    font-size:0.6em;
    transition:250ms color;
    width:calc(100% - 20px);
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover h3{
    color:#ffffff;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner{
    height:20px;
    position: absolute;
    transition:250ms left, 250ms top, 250ms right, 250ms bottom;
    width:20px;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.tl{
    left:0;
    top:0;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.tr{
    right:0;
    top:0;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.bl{
    left:0;
    bottom:0;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.br{
    right:0;
    bottom:0;
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover .corner.tl{
    left:10px;
    top:10px;
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover .corner.tr{
    right:10px;
    top:10px;
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover .corner.bl{
    left:10px;
    bottom:10px;
}

.no-touchevents #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs:hover .corner.br{
    right:10px;
    bottom:10px;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner:before,
#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner:after{
    background:#E9E600;
    content:'';
    height:1px;
    position: absolute;
    transform-origin: 0;
    width:100%;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner:after{
    transform: rotate(90deg);
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.tr:after,
#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.br:after{
    right:-100%;
}

#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.bl:before,
#main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs .corner.br:before{
    bottom:calc(0% - 1px);
}

#main_wrapper section#shop-collection .pill-btn-2{
    margin-top:2em;
}

#main_wrapper .fadeouts{
    height:100%;
    left:50%;
    max-width:2900px;
    pointer-events:none;
    position: absolute;
    top:0;
    transform:translateX(-50%);
    width:100%;
}

#main_wrapper .fadeouts:before,
#main_wrapper .fadeouts:after{
    content: '';
    height:100%;
    position:absolute;
    width:150px;
}

#main_wrapper .fadeouts:before{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#161616+0,161616+100&1+0,0+100 */
    background: -moz-linear-gradient(left,  rgba(22,22,22,1) 0%, rgba(22,22,22,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(22,22,22,1) 0%,rgba(22,22,22,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(22,22,22,1) 0%,rgba(22,22,22,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161616', endColorstr='#00161616',GradientType=1 ); /* IE6-9 */

    left:0px;
    position: absolute;
    top:0;

}

#main_wrapper .fadeouts:after{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#161616+0,161616+100&0+0,1+100 */
    background: -moz-linear-gradient(left,  rgba(22,22,22,0) 0%, rgba(22,22,22,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(22,22,22,0) 0%,rgba(22,22,22,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(22,22,22,0) 0%,rgba(22,22,22,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00161616', endColorstr='#161616',GradientType=1 ); /* IE6-9 */

    right:0px;
    position: absolute;
    top:0;

}

#main_wrapper .fadeouts .cover-left,
#main_wrapper .fadeouts .cover-right{
    background:rgba(22,22,22,1);
    height:100%;
    position: absolute;
    top:0;
    width:100vw;
}

#main_wrapper .fadeouts .cover-left{
    left:100%;
}

#main_wrapper .fadeouts .cover-right{
    right:100%;
}

@media (max-width: 2880px){

    #main_wrapper .fadeouts{
        display:none;
    }
}

@media (max-width: 1440px){
    /* ============================== 
    COMMUNITY
    ============================== */
    #main_wrapper section#community .left{
        display:flex;
    }

    #main_wrapper section#community.active .left .img{
        width:600px;
    }
}


@media (max-width: 1230px){
    /* ============================== 
    LEAD IN
    ============================== */
    #main_wrapper section#lead-in .content-width{
        min-width:100%;
        padding-bottom: 4em;
        padding-top: 4em;
    }

    #main_wrapper section#lead-in .text{
        width:calc(100% - 60px);
    }

    #main_wrapper section#lead-in h3{
        font-size:2.35em;
    }

    #main_wrapper section#lead-in h2.emphasize{
        font-size:2.45em;
    }

    /* ============================== 
    STATS
    ============================== */
    #main_wrapper section#stats .section-width .all-stats div.stat-quarter,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter{
        width:calc(33% - 5px);
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h1,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h1{
        font-size:11vw;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h3,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h3{
        font-size:2.2vw;
    }

    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail,
    #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail{
        width:25%;
    }

    /* ============================== 
    COMMUNITY
    ============================== */
    #main_wrapper section#community .section-width{
        justify-content:flex-end;
    }

    #main_wrapper section#community .left{
        width:auto;
    }

    #main_wrapper section#community .right{
        margin-right:30px;
        min-width:560px;
        padding:2em 0;
    }

    /* ============================== 
    TIPS
    ============================== */
    #main_wrapper section#tips .all-collections{
        align-self:center;
        width:100%;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail:nth-child(1){
        margin-right:0;
        width:calc(50% - 10px);
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width{
        width:calc(25% - 15px);
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row{
        margin-left:0;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row.set,
    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.set{
        margin-left:20px;
    }
}

@media (max-width: 1230px) and (max-height:690px){
    #main_wrapper section#overview:not(.overview-tablet) .section-width .overview-header h2{
        font-size:2em;
        transform:translateY(0.5em);
    }
}

@media (max-width: 1100px){

    #main_wrapper section h2{
        font-size:2em;
    }

    /* ============================== 
    STATS
    ============================== */
    #main_wrapper section h1.extra-large{
        font-size:7em;
    }

    /* ============================== 
    COMMUNITY
    ============================== */
    #main_wrapper section#community.active .right h1{
        font-size:44px;
    }

}

@media (max-width: 910px){
    /* ============================== 
    TIPS
    ============================== */
    #main_wrapper section#tips .section-width .top-subheader{
        justify-content:space-between;
    }

    #main_wrapper section#tips .section-width .top-subheader .dropdown{
        align-self:center;
    }

    #main_wrapper section#tips .all-collections{
        align-self:center;
        max-width:740px;
        width:100%;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail:nth-child(1){
        margin-right:0;
        padding-top:30%;
        width:calc(66% - 20px);
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row{
        margin-left:auto;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row.set,
    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.set{
        margin-left:20px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width{
        margin-top:16px;
        padding-top:13.5%;
        width:calc(34% - 27px);
    }


    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .video-play-thumbnail{
        height:30px;
        width:30px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .info{
        align-items:flex-end;
        flex-direction:row;
        height:calc(100% - 30px);
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width p{
        margin-left:15px;
    }
}

@media (max-width: 850px){

    /* ============================== 
    STATS
    ============================== */
    #main_wrapper section#stats .section-width .all-stats{
        flex-wrap:wrap;
        width:100%;
    }

    #main_wrapper section#stats .section-width .all-stats .stats-75{
        width:100%;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter{
        width:auto;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h1,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h1{
        font-size:7em;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h3,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h3{
        font-size:2.35em;
    }


    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail,
    #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail{
        align-items:center;
        background:black !important;
        display:flex;
        margin-top:3em;
        max-width:500px;
        overflow:hidden;
        padding:10px;
        width:50%;
    }
    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail .info,
    #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail .info{
        align-items:center;
        bottom:auto;
        height:auto;
        flex-direction:row;
        justify-content:flex-start;
        left:auto;
        position: relative;
        width:auto;
    }

    .no-touchevents #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail:hover .info,
    .no-touchevents #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail:hover .info{
        opacity:1;
    }

    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail .video-play-thumbnail{
        height:40px;
        width:40px;
    }

    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail svg{
        height:100%;
    }

    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail p{
        margin-left:10px;
    }

    #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail p{
        display:inline-block;
        margin-bottom:auto;
        margin-left:10px;
        margin-top:auto;
        width:auto;
    }
}

@media (max-width: 768px){

    /* ============================== 
    HERO
    ============================== */
    #main_wrapper section#hero .content-width{
        flex-direction:column;
        justify-content:center;
    }

    #hero .content-width .content-item-left, 
    #hero .content-width .content-item-right{
        max-width:500px;
        width:calc(100% - 30px);
    }

    #hero .content-width .content-item-left{
        align-items:center;
        display: flex;
        flex-direction: column;
        margin-top:60px;
    }

    #hero .title-holder{
        align-items:center;
        display:flex;
        flex-direction:column;
    }

    #hero.active .title-holder h1{
        text-align:center;
    }

    #hero .secondary-text{
        max-width:350px;
        text-align:center;
        width:calc(100% - 30px);
    }

    #hero .content-width .spacer{
        display: inline-flex;
        width:100%;
    }

    #hero .content-width .content-item-right img{
        transform:none;
    }

    #hero.active .content-width .content-item-right{
        justify-content:center;
        margin-bottom:8em;
    }

    /* ============================== 
    LEAD-IN
    ============================== */
    

    #main_wrapper section#lead-in .slide{
        flex-direction:column;
    }

    #main_wrapper section#lead-in .slide .slide-img{
        margin-bottom:2em;
        margin-left:auto;
        margin-right:auto;
        width:200px;
    }

    #main_wrapper section#lead-in .slide .slide-text{
        width:100%;
    }

    /* ============================== 
    FEATURES
    ============================== */
    #main_wrapper section#features .section-width{
        margin:0 auto 4em;
    }

    #main_wrapper section#features .content-item{
        flex-direction:column-reverse;
        margin-bottom:auto;
    }

    #main_wrapper section#features .content-item#graph-carousel{
        margin-top:4em;
    }

    #main_wrapper section#features .content-item .graph{
        max-width:600px;
        width:calc(100% - 30px);
    }

    #main_wrapper section#features .content-item .text-container{
        max-width:600px;
        width:calc(100% - 30px);
    }

    /* ============================== 
    COMMUNITY
    ============================== */
    #main_wrapper section#community .section-width{
        margin-bottom:4em;
    }

    #main_wrapper section#community.active .left .img{
        width:450px;
    }

    /* ============================== 
    SHOP COLLECTION
    ============================== */
    #main_wrapper section#shop-collection .header h4{
        text-align:center;
    }

    #main_wrapper section#shop-collection .grid-row.tablet-only{
        display:flex;
    }

    #main_wrapper section#shop-collection .grid-unit.unit-double.desktop-only{
        display:none;
    }

    #main_wrapper section#shop-collection .grid-unit{
        width:calc(33% - 20px);
    }

    #main_wrapper section#shop-collection .grid-unit.unit-double{
        width:calc(50% - 25px);
    }
}

@media (max-width: 630px){
    /* ============================== 
    TIPS
    ============================== */
    #main_wrapper section#tips .all-collections{
        align-self:center;
        width:100%;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width{
        padding-top:60%;
        width:100%;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .info{
        align-items:flex-start;
        flex-direction:column;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .video-play-thumbnail{
        height:70px;
        width:70px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.hide{
        display:block !important;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail p,
    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width p{
        margin-left:0;
        margin-top:10px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail:nth-child(1){
        padding-top:60%;
        width:100%;
    }

    /* ============================== 
    COMMUNITY
    ============================== */
    #main_wrapper section#community .section-width{
        flex-direction:column;
    }

    #main_wrapper section#community.active .left{
        width:70%;
    }

    #main_wrapper section#community .left .img{
        transform:scale(1.1);
    }

    #main_wrapper section#community.active .left .img{
        margin-right:auto;
        transform-origin: bottom center;
        width:100%;
    }

    #main_wrapper section#community .right{
        min-width:0;
        padding-bottom:4em;
        width:calc(100% - 30px);
    }

    /* ============================== 
    SHOP COLLECTION
    ============================== */
    #main_wrapper section#shop-collection .content-width{
        margin:4em auto;
    }

    #main_wrapper section#shop-collection .header .header-font{
        font-size:3em;
    }

    #main_wrapper section#shop-collection .header h4{
        font-size:1.3em;
    }

    #main_wrapper section#shop-collection .grid-row.mobile-only{
        display:flex;
    }

    #main_wrapper section#shop-collection .grid-row .grid-unit{
        width:calc(50% - 25px);
    }

    #main_wrapper section#shop-collection .grid-row .grid-unit.unit-double{
        margin-bottom:20px;
        width:calc(100% - 29px);
    }

    #main_wrapper section#shop-collection .grid-row .grid-unit.desktop-only.tablet-only{
        display:none;
    }

    #main_wrapper section#shop-collection .grid-row.double-btns{
        flex-direction:column;
    }

    #main_wrapper section#shop-collection .grid-unit.unit-double.crosshairs h3{
        font-size:0.5em;
    }


}

@media (max-width: 570px){
    /* ============================== 
    STATS
    ============================== */
    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h1,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h1{
        font-size:6em;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h3,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h3{
        font-size:1.8em;
    }
}


@media (max-width: 501px){

    /* ============================== 
    HERO
    ============================== */

    #hero .content-width .content-item-left{
        margin-top:170px;
    }

    /* ============================== 
    OVERVIEW
    ============================== */

    #main_wrapper section#overview.overview-tablet .section-width{
        /*height:calc(100vh - 50px);*/
        height:auto;
    }

    html.orientation #main_wrapper section#overview.overview-tablet .section-width{
        height:calc(100vh - 90px);
    }

    #main_wrapper section#overview .overview-container{
        justify-content:flex-start;
    }

    #main_wrapper section#overview .section-width .overview-header{
        text-align:center;
        width:calc(100% - 30px);
    }

    #main_wrapper section#overview .overview-container .overlay{
        height:calc(100vh - 115px);
        justify-content:center;
        position: relative;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list{
        height:100%;
        justify-content:space-between;
        margin-left:0;
        top:0;
        transform:none;
        width:calc(100% - 30px);
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list{
        display: flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list.list-left{
        transition:500ms margin-top;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list.list-right{
        margin-bottom:2em;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list .list-item{
        margin:0.5em auto;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list .list-item:nth-child(1), 
    #main_wrapper section#overview.overview-tablet.active .overlay .item-list .list .list-item:nth-child(1){
        margin:auto;
    }

    #main_wrapper section#overview.active .overview-container .overlay .list-item .text-btn{
        width:100%;
    }

    #main_wrapper section#overview .overview-container .overlay .list-item h3{
        display:none;
    }

    /* OVERVIEW SUBNAV  */
    #main_wrapper section#overview.overview-tablet .overview-nav{
        bottom:7em;
        max-width:100%;
        right:auto;
    }

    .text-btn .mobile-text{
        display:block;
    }

    .text-btn .desktop-text{
        display:none;
    }

    /* ============================== 
    STATS
    ============================== */
    #main_wrapper section#stats .section-width .all-stats .stats-75{
        align-items:center;
        flex-direction: column;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter{
        align-items:center;
        display: flex;
        justify-content:space-between;
        margin-bottom:2em;
        width:100%;
    }
    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h1,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h1{
        font-size:6em;
        width:45%;
    }

    #main_wrapper section#stats .section-width .all-stats div.stat-quarter h3,
    #main_wrapper section#stats.active .section-width .all-stats div.stat-quarter h3{
        font-size:1.8em;

        width:calc(55% - 20px);
    }

    #main_wrapper section#stats .section-width .all-stats .stat-quarter.video-thumbnail, 
    #main_wrapper section#stats.active .section-width .all-stats .stat-quarter.video-thumbnail{
        width:100%;
    }   

    /* ============================== 
    FEATURES
    ============================== */
    #main_wrapper section#features .content-item .graph .graph-container{
        width:100%;
    }

    #main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(1) .bar{
        width:100%;
    }

    #main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(2) .bar{
        width:85%;
    }

    #main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(3) .bar{
        width:100%;
    }

    /* ============================== 
    TIPS
    ============================== */
    #main_wrapper section#tips .section-width{
        margin-top:0;
    }

    #main_wrapper section#tips .section-width .top-subheader{
        align-items:flex-start;
        flex-direction:column;
    }

    #main_wrapper section#tips .section-width .top-subheader .subheader{
        margin-bottom:2em;
    }

    #main_wrapper section#tips .section-width .top-subheader .dropdown{
        margin-left:0;
        margin-right:auto;
        min-width:0;
    }

    #main_wrapper section#tips .dropdown a{
        justify-content:flex-start;
        width:auto;
    }

    #main_wrapper section#tips .dropdown .text-btn .text-btn-text{
        text-align:left;
        width:auto;
    }

    #main_wrapper section#tips .dropdown .options-list li .dropdown-btn .dropdown-btn-text{
        padding:0 24px 0 10px;
    }

    #main_wrapper section#tips .section-width .top-subheader .dropdown .options-list li{
        justify-content:flex-start;
    }

    #main_wrapper section#tips .all-collections{
        display:flex;
        flex-wrap:wrap;
    }

    /* ============================== 
    GALLERY
    ============================== */
    #main_wrapper section#gallery .section-width{
        margin-top:0;
    }


}

@media (max-width: 450px){
    #main_wrapper section .section-width{
        width:100%;
    }

    #hero .logo{
        display:block;
        margin:0 auto;
    }

    #hero .title-holder h1{
        line-height:0.9;
    }

    #hero .content-width .content-item-left, 
    #hero .content-width .content-item-right{
        align-items:flex-start;
        width:100%;
    }

    #main_wrapper section#overview.overview-tablet .overview-container{
        margin-top:0;
    }

    #main_wrapper section#overview .overview-canvas{
        bottom:auto;
        top:0;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list{
        width:100%;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list.list-left{
        margin-top:50px !important;
    }

    #main_wrapper section#overview.overview-tablet .overlay .item-list .list.list-right{
        margin-bottom:3em;
    }

    #main_wrapper section#overview .overview-canvas{
        margin-bottom:6em;
    }

    #main_wrapper section#stats .section-width{
        align-items:center;
    }

    #main_wrapper section#stats .section-width .subheader,
    #main_wrapper section#stats .section-width .all-stats{
        width:calc(100% - 20px);
    }

    #main_wrapper section#features .content-item .graph .graph-container .data-container,
    #main_wrapper section#features .content-item.with-graph .graph p{
        width:100%;
    }

    #main_wrapper section#features .content-item .graph .graph-container .data-container:nth-child(1) .bar{
        width:100%;
    }

    #main_wrapper section#features .content-item .text-block{
        margin-top:4em;
    }

    #main_wrapper section#community .section-width{
        margin-top:2em;
    }

    #main_wrapper section#community .left .img{
        margin-left:auto;
        margin-right:auto;
    }

    #main_wrapper section#community.active .left .img{
        width:100%;
    }

    #main_wrapper section#tips .section-width{
        align-items:center;
    }

    #main_wrapper section#tips .section-width .top-subheader{
        width:calc(100% - 20px);
    }

    #main_wrapper section#tips .all-collections{
        width:calc(100% - 30px);
    }

    #main_wrapper section#tips .all-collections .video-thumbnail{
        margin-top:10px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .video-play-thumbnail{
        height:70px;
        width:70px;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width{
        padding-top:60%;
        width:100%;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width .info{
        align-items:stretch;
        flex-direction:column;
    }

    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.first-row.set, 
    #main_wrapper section#tips .all-collections .video-thumbnail.thumb-quarter-width.set{
        margin-left:auto;
    }

    #main_wrapper section#gallery .section-width.disclaimer{
        width:calc(100% - 30px);
    }

    #main_wrapper section#shop-collection .content-width{
        width:100%;
    }

    #main_wrapper section#shop-collection .header{
        width:calc(100% - 20px);
    }

    #main_wrapper section#shop-collection .grid-row{
        justify-content:space-between;
    }

    #main_wrapper section#shop-collection .grid-row .grid-unit{
        width:calc(50% - 20px);
    }

    #main_wrapper section#shop-collection .grid-row .grid-unit.unit-double{
        width:calc(100% - 20px);
    }
}