@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=9cf91264-16ea-4445-bb68-981ae82be08c");

@font-face{
    font-family:"Helvetica Neue LT W05_45 Light";
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/cb0d1e8a-e111-4dbf-82c2-e948aba954c0.eot?#iefix");
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/cb0d1e8a-e111-4dbf-82c2-e948aba954c0.eot?#iefix") format("eot"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/f9c5199e-a996-4c08-9042-1eb845bb7495.woff2") format("woff2"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/2a34f1f8-d701-4949-b12d-133c1c2636eb.woff") format("woff"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/fdf10d5e-4ce0-45e5-a6c1-5eaff6cb1c11.ttf") format("truetype");
}
@font-face{
    font-family:"Helvetica Neue LT W05_65 Medium";
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/5640036d-d549-4f16-b31e-87da78d9e832.eot?#iefix");
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/5640036d-d549-4f16-b31e-87da78d9e832.eot?#iefix") format("eot"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/240c57a0-fdce-440d-9ce3-85e0cb56f470.woff2") format("woff2"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/7802e576-2ffa-4f22-a409-534355fbea79.woff") format("woff"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/14d824a2-2a5c-4692-8e30-74f6e177b675.ttf") format("truetype");
}
@font-face{
    font-family:"Helvetica Neue LT W01_75 Bold";
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/9697cfef-7816-47cc-81ed-c56c029d3bcf.eot?#iefix");
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/9697cfef-7816-47cc-81ed-c56c029d3bcf.eot?#iefix") format("eot"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/1f4274cd-2674-481e-9023-69e33ffca161.woff2") format("woff2"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/5e8d493c-be01-44b9-962e-504a5cf10dd8.woff") format("woff"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/ae36b4a0-aa2c-46cc-98d8-d8b7d22241dc.ttf") format("truetype");
}
@font-face{
    font-family:"Trade Gothic LT W00 Bd Cn No.20";
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/b56091df-0934-490f-8ba1-44ac7c71ac12.eot?#iefix");
    src:url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/b56091df-0934-490f-8ba1-44ac7c71ac12.eot?#iefix") format("eot"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/e4276c67-820d-46ce-b8e4-68d5b4734d69.woff2") format("woff2"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/c0a119b8-eafb-490d-8445-a9c16f425279.woff") format("woff"),url("https://cwsmgmt.corsair.com/fonts/10122018/Fonts/0790eb68-9916-43f6-9519-7c8f367464cb.ttf") format("truetype");
}

.main-content #domplat section .font-header-condensed{
    font-family:"Trade Gothic LT W00 Bd Cn No.20";
    letter-spacing:0em;
}

.font-header{
    font-family:'Gotham XNarrow A', 'Gotham XNarrow B';
    font-weight: 800 !important;
    letter-spacing: 0em !important;
    line-height:0.9em;
}

.font-subheader{
    font-family:'Gotham XNarrow A', 'Gotham XNarrow B';
    font-weight: 400 !important;
    letter-spacing: 0em !important;
    line-height:0.9em;
}

.font-header-body{
    font-family:'Gotham XNarrow A', 'Gotham XNarrow B';
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    line-height:1em;
}

.font-body{
    font-family:'Gotham SSm A', 'Gotham SSm B';
    font-size:12px;
}

.font-script{
    font-family: verveine, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
}


#domplat .cta.white{
    background:white;
    color:#000;
    display:inline-block;
    margin:4em auto 0em;
}

#domplat .cta.white:hover{
    color:#c5c5c5;
}

#pdp-corsair #domplat section p,
#domplat a,
#domplat a:active{
    font-size:14px;
}

.main-content #domplat section h1{
    font-size:2.5em;
}

.main-content #domplat section h2{
    font-size:23px;
}

.main-content #domplat section h3{
    font-size:20px;
}

/* ============================== 
SECTIONS
============================== */
#full-header{
    position:fixed;
    top:0;
    z-index:10;
    width:100%;
}

#domplat{
    font-size:12px;
}


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

#domplat .hero {
    background: url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/hero-bg.jpg)no-repeat center #000;
    background-size: cover;
    display: table;
    height: 692px;
    margin-top: 0px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index:0;
}


#domplat .hero video{
    height:auto;
    width:100%;
}

#domplat .hero video.toHeight{
    height:100%;
    width:auto;
}

#domplat .hero #hero-img {
    
    position:absolute;
    left: 0;
    top: 0;
    z-index:-1;

    max-width: 100%;
    max-height: 100%;
    height: auto;
}
    
#domplat .hero video {
    position:absolute;
    z-index:0;
    display:block;
}

#domplat  .hero .wrapper {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:100%;
    color:#fff;
    position: relative;
    width: 100%;
    padding: 0 5%;
    background: rgba(0,0,0,1);
}
    

#domplat .hero .content_wrapper {
    color: #fff;
    display:table-cell;
    max-width: 100%;
    padding: 9em 1em 0;
    position: relative;
    text-align: center;
    vertical-align:middle;
    width: 100%;
}

#domplat .hero p small {
    color:#fff;
    position: relative;
    font-size: 1.5em !important;
    font-weight: 400;
    display:block;
    margin: 0;
    max-width: 1200px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 auto 0em;
    z-index:1;
}

.main-content #domplat section.hero h1 {
    color:#fff;
    position: relative;
    font-size: 5em;
    font-weight: 400;
    display:block;
    margin: 0;
    max-width: 1200px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 auto 0em;
    z-index:1;
}

#domplat .hero h2{
    font-size: 4em;
}


#domplat .hero .content_wrapper h3 {
    position: relative;
    color: #fff;
    display: block;
    text-transform: uppercase;
    width: 90%;
    font-size: 1.4em;
    z-index: 1;
    font-weight: 400;
    letter-spacing: 0.3em;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    margin: .5em auto 0;
}

#domplat .hero .content_wrapper h3 span{
    font-size:0.6em;
}

#domplat .hero span {
    line-height:2em;
    font-size:1em;
    letter-spacing:0.3em;
}

/* ============================== 
CULMINATION
============================== */
#domplat #culmination{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8e8e8+0,c8c8c8+100 */
    background: #e8e8e8; /* Old browsers */
    background: -moz-linear-gradient(top, #e8e8e8 0%, #c8c8c8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e8e8e8 0%,#c8c8c8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e8e8e8 0%,#c8c8c8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */

    color:#181818;
    height:30vw;
    min-height:543px;
    padding:12em 0;
    position: relative;
}

#domplat #culmination .wrapper{
    pointer-events:none;
}

#domplat #culmination .crop-container{
    margin-left:50%;
    opacity:0;
    position:absolute;
    width:50%;
}

#domplat #culmination.activated .crop-container{
    opacity:1;
    transition:1200ms opacity;
}

#domplat #culmination .items{
    margin:auto ;
    pointer-events:none;
    transform:translateX(-25%);
    width:150%;
}

#domplat #culmination .items .item{
    position: relative;
}

#domplat #culmination .items img{
    margin:0 auto;
    width:100%;
}

#domplat #culmination .items .item .brackets{
    /*background:red;*/
    height:90%;
    left:50%;
    position:absolute;
    top:0;
    transform:translateY(-15%)  translateX(-50%);
    width:120%;
}
#domplat #culmination .items .item .brackets:before{
    background:rgba(255,255,255,0.15);
    content:'';
    height:100%;
    opacity:0;
    position:absolute;
    transform:scaleX(0.90) scaleY(0.8);
    width:100%;
}

#domplat #culmination .items .item.slick-current .brackets:before{
    opacity:1;
    transform:scaleX(0.97) scaleY(0.95);
    transition:250ms transform 2000ms, 250ms opacity 2000ms;
}

#domplat #culmination .items .item .brackets .bracket{
    /*background:green;*/
    height:10px;
    opacity:0;
    position: absolute;
    width:10px;
}

#domplat #culmination .items .item .brackets .bracket:before,
#domplat #culmination .items .item .brackets .bracket:after{
    background:#8d8d8d;
    content:'';
    height:1px;
    position: absolute;
    width:10px;
}

#domplat #culmination .items .item .brackets .bracket.tl{
    left:0;
    top:0;
    transform:translateX(50px) translateY(50px);
}

#domplat #culmination .items .item .brackets .bracket.tl:before,
#domplat #culmination .items .item .brackets .bracket.tl:after{
    left:0;
    transform-origin:0 0;
}

#domplat #culmination .items .item .brackets .bracket.tl:before{
    transform:rotate(90deg);
}

#domplat #culmination .items .item .brackets .bracket.tr{
    right:0;
    top:0;
    transform:translateX(-50px) translateY(50px);
}

#domplat #culmination .items .item .brackets .bracket.tr:before,
#domplat #culmination .items .item .brackets .bracket.tr:after{
    right:0;
    transform-origin:100% 100%;
}

#domplat #culmination .items .item .brackets .bracket.tr:after{
    transform:rotate(-90deg);
}

#domplat #culmination .items .item .brackets .bracket.bl{
    left:0;
    bottom:0;
    transform:translateX(50px) translateY(-50px);
}

#domplat #culmination .items .item .brackets .bracket.bl:before,
#domplat #culmination .items .item .brackets .bracket.bl:after{
    bottom:0;
    left:0;
    transform-origin:0% 0;
}

#domplat #culmination .items .item .brackets .bracket.bl:after{
    transform:rotate(-90deg);
}

#domplat #culmination .items .item .brackets .bracket.br{
    right:0;
    bottom:0;
    transform:translateX(-50px) translateY(-50px);
}

#domplat #culmination .items .item .brackets .bracket.br:before,
#domplat #culmination .items .item .brackets .bracket.br:after{
    bottom:0;
    right:0;
    transform-origin:100% 100%;
}

#domplat #culmination .items .item .brackets .bracket.br:after{
    transform:rotate(90deg);
}

#domplat #culmination .items .item.slick-current .brackets .bracket{
    opacity:1;
    transform:translateX(0) translateY(0);
    transition:250ms transform 2000ms, 250ms opacity 2000ms;
}

#domplat #culmination .items .item .overnote{
    height:71px;
    left:0;
    position: absolute;
    top:-70px;
    width:100%;
}

#domplat #culmination .items .item .overnote .note{
    border-left:1px solid #8d8d8d;
    display: inline-block;
    left:25%;
    padding-left:10px;
    position: absolute;
    bottom:47%;
}

#domplat #culmination .items .item .overnote p{
    font-size:0.9em;
    line-height:1em;
    margin:0;
}

#domplat #culmination .items .item .overnote p.black{
    color:#000;
    display: inline-block;
}

#domplat #culmination .items .item .overnote p.gray{
    color:#acacac;
    display: inline-block;
}

#domplat #culmination .items .item .overnote p.red{
    color:#e54348;
    display:inline-block;
}

#domplat #culmination .items .item .overnote p small{
    font-size:0.6em;
}

#domplat #culmination .items .item .overnote .dotted{
    border-bottom:1px dashed #8c8c8c;
    display: inline-block;
    height:0.5em;
    margin-right:8px;
    position: relative;
    transform:translateY(-2px);
    width:calc(20% - 8px);
}

#domplat #culmination .slick-slide .lines{
    height:100%;
    margin-left:25%;
    position: relative;
    transform:translateX(-18px);
    width:30px;
}

#domplat #culmination .slick-slide .line1,
#domplat #culmination .slick-slide .line2{
    background:#8d8d8d;
    position: absolute;
    width:1px;
}

#domplat #culmination .slick-slide .line1{
    bottom:0;
    height:24px;
}

#domplat #culmination .slick-slide .line2{
    bottom:24px;
    height:48px;
    transform-origin:100% 100%;
    transform:rotate(45deg);
}

/* Inactive */
#domplat #culmination .slick-slide .overnote p.black{
    opacity:0;
    transform:translateX(20px);
}

#domplat #culmination .slick-slide .overnote p.gray{
    opacity:0;
    transform:translateX(40px);
}

#domplat #culmination .slick-slide .overnote p.red{
    opacity:0;
    transform:translateX(100px);
}

#domplat #culmination .slick-slide .overnote .dotted{
    width:0;
}

#domplat #culmination .slick-slide .overnote .note{
    transform:scaleY(0);
}

#domplat #culmination .slick-slide .line1,
#domplat #culmination .slick-slide .line2{
    background:#8d8d8d;
    height:0px;
    position: absolute;
    width:1px;
}

/* PRE ANIMATE */
#domplat #culmination .slick-slide.slick-current .overnote p.black{
    opacity:0;
    transform:translateX(20px);
}

#domplat #culmination .slick-slide.slick-current .overnote p.gray{
    opacity:0;
    transform:translateX(40px);
}

#domplat #culmination .slick-slide.slick-current .overnote p.red{
    opacity:0;
    transform:translateX(100px);
}

#domplat #culmination .slick-slide.slick-current .overnote .dotted{
    width:0;
}

#domplat #culmination .slick-slide.slick-current .overnote .note{
    transform:scaleY(0);
}

#domplat #culmination .slick-slide.slick-current .line1,
#domplat #culmination .slick-slide.slick-current .line2{
    background:#8d8d8d;
    height:0px;
    position: absolute;
    width:1px;
}


/* Animate */
#domplat #culmination .slick-slide.slick-current .overnote .dotted{
    opacity:1;
    transition:500ms width 1500ms;
    width:calc(20% - 8px);
}

#domplat #culmination .slick-slide.slick-current .overnote p.black{
    opacity:1;
    transform:translateX(0px);
    transition:500ms opacity 1500ms, 500ms transform 1500ms;
}

#domplat #culmination .slick-slide.slick-current .overnote p.gray{
    opacity:1;
    transform:translateX(0px);
    transition:500ms opacity 1500ms, 500ms transform 1500ms;
}

#domplat #culmination .slick-slide.slick-current .overnote p.red{
    opacity:1;
    transform:translateX(0px);
    transition:500ms opacity 1500ms, 500ms transform 1500ms;
}

#domplat #culmination .slick-slide.slick-current .overnote .note{
    transform:scaleY(1);
    transition:250ms transform 1250ms;
}

#domplat #culmination .slick-slide.slick-current .line1{
    height:24px;
    transition:250ms height 750ms;
}

#domplat #culmination .slick-slide.slick-current .line2{
    bottom:24px;
    height:25px;
    transition:250ms height 1000ms;
}





/* Slide Styles */
#domplat #culmination .slick-slide{
    margin-top:73px;
    opacity:0.2;
    transition:500ms;
}

#domplat #culmination .slick-slide img{
    transform:scale(0.8);
}

#domplat #culmination .slick-slide.slick-current{
    opacity:1;
}

#domplat #culmination .slick-slide.slick-current img{
    transform:scale(1);
    -webkit-transition: transform 350ms 400ms cubic-bezier(0.000, 1, 0.790, 1); /* older webkit */
    -webkit-transition: transform 350ms 400ms cubic-bezier(0.000, 1.185, 0.790, 1.450); 
       -moz-transition: transform 350ms 400ms cubic-bezier(0.000, 1.185, 0.790, 1.450); 
         -o-transition: transform 350ms 400ms cubic-bezier(0.000, 1.185, 0.790, 1.450); 
            transition: transform 350ms 400ms cubic-bezier(0.000, 1.185, 0.790, 1.450); /* custom */
}

#domplat #culmination .slick-slide.onLeft{
    opacity:0;
    transition:400ms opacity;
}

#domplat #culmination .slick-list{
    padding:0 !important;
}

#domplat #culmination .half{
    max-width:600px;
    width:100%;
}

#domplat #culmination h1{
    margin-bottom:1.5em;
    font-size:2.5em;
}

#domplat #culmination p{
    color:#656565;
    display: block;
    max-width:440px;
}

#domplat #culmination .tag-year{
    text-align:center;
}

/* ============================== 
SCROLLABLE
============================== */
#domplat #scrollable{
    background:url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/scrollable-bg.jpg);
    height:400vh;
    min-height:calc(500px * 4);
}

#domplat #scrollable .sticky{
    bottom:auto;
    height:calc(100vh - 65px);
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    width:100vw;
}

#domplat #scrollable.activated .sticky{
    opacity:1;
}

#domplat #scrollable .sticky.end{
    bottom:0;
    top:auto;
}

#domplat #scrollable .sticky.fixed{
    position:fixed;
    top:65px;
}

#domplat #scrollable .sticky .half{
    width:50%;
}

#domplat #scrollable .sticky .page{
    height:calc(100vh - 65px);
    left:0;
    opacity:0;
    position: absolute;
    top:0;
}

#domplat #scrollable .sticky .page .body-text{
    color:#fff;
    left:130px;
    position: absolute;
    top:calc(50% + 17px);
    transform:translateY(-50%) translateX(10px);
    width:calc( 80% - 130px);
}

#domplat #scrollable .sticky .page .body-text p{
    font-size:16px;
}

#domplat #scrollable .sticky .page .body-text span.main{
    opacity:0;
}

#domplat #scrollable .sticky .page .body-text span.emphasized{
    color:#fff;
    font-weight:600;
    opacity:0;

}

#domplat #scrollable .sticky .page .body-text .gray{
    color:#b0b0b0;
}

#domplat #scrollable .sticky .page .page-relative{
    height:100%;
    position: relative;
    width:100%;
}

#domplat #scrollable .sticky.end .page{
    bottom:0;
    top:auto;
}

#domplat #scrollable .sticky .page.displayed{
    opacity:1;
    z-index:1;
}

#domplat #scrollable .sticky .page.displayed .body-text{
    opacity:1;
    transform:translateY(-50%) translateX(0);
    transition:1200ms transform;
}

#domplat #scrollable .sticky .page.displayed .body-text span.main{
    opacity:1;
    transition:1200ms opacity 300ms;
}

#domplat #scrollable .sticky .page.displayed .body-text span.emphasized{
    opacity:1;
    transition:1200ms opacity;
}

/* VIDEO */


#domplat #scrollable .sticky .vid{
    background:black;
    height:calc(100vh - 65px);
    margin-left:50vw;
    opacity:1;
    position: relative;
}

#domplat #scrollable .sticky .vid .overflow-container{
    height:100%;
    position:relative;
    overflow:hidden;
}

#domplat #scrollable .sticky .vid #scrollable-canvas{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
}

#domplat #scrollable .sticky .vid .vid-frame{
    height:100%;
    position:absolute;
    transform:none;
    width:100%;
}

#domplat #scrollable .sticky .subnav{
    color:white;
    left:20px;
    position: absolute;
    top:40px;
    width:60px;
    z-index:2;
}

#domplat #scrollable .sticky .subnav ul{
    list-style-type: none;
    padding:0;
}

#domplat #scrollable .sticky .subnav ul li{
    padding:0;
}

#domplat #scrollable .sticky .subnav ul li a:link,
#domplat #scrollable .sticky .subnav ul li a:active,
#domplat #scrollable .sticky .subnav ul li a:visited{
    color:#909090;
}

#domplat #scrollable .sticky .subnav ul li.selected a:link,
#domplat #scrollable .sticky .subnav ul li.selected a:active,
#domplat #scrollable .sticky .subnav ul li.selected a:visited{
    color:#fff;
}

#domplat #scrollable .sticky .subnav .subnav-number{
    display:inline-block;
    font-size:8px;
    transform:translateY(-1px);
    width:18px;
}

#domplat #scrollable .sticky .subnav .square{
    display: inline-block;
    height:10px;
    outline:1px solid #909090;
    position: relative;
    width:10px;
}

#domplat #scrollable .sticky .subnav .square:before{
    background:#fff;
    content:'';
    height:100%;
    left:0;
    opacity:0;
    position: absolute;
    top:0;
    transform:scale(0.7);
    width:100%;

}

#domplat #scrollable .sticky .subnav li.selected .square:before{
    opacity:1;
}

#domplat #scrollable .sticky .subnav li.selected .square{
    outline:1px solid #fff;
}

#domplat #scrollable .sticky .next-btn{
    cursor:pointer;
    left:100px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    z-index:1;
}

#domplat #scrollable .sticky .next-btn .plus{
    height:10px;
    position: relative;
    width:11px;
}

#domplat #scrollable .sticky .next-btn .plus .line{
    background:rgba(255,255,255,0.8);
    height:100%;
    position: absolute;
    left:calc(50% - 1px);
    width:1px;
}

#domplat #scrollable .sticky .next-btn .plus:before,
#domplat #scrollable .sticky .next-btn .plus:after{
    background:rgba(255,255,255,0.8);
    content:'';
    height:1px;
    left:50%;
    position: absolute;
    bottom:0%;
    width:5px;
}

#domplat #scrollable .sticky .next-btn .plus:before{
    left:calc(50% + 0px);
    transform:rotate(-135deg);
    transform-origin:0% 100%;
}

#domplat #scrollable .sticky .next-btn .plus:after{
    left:calc(50% + 0px);
    transform:rotate(-44deg);
    transform-origin:0% 100%;
}

#domplat #scrollable .sticky .next-btn .pulse{
    margin-bottom:5px;
    margin-left:5px;
    margin-top:5px;
}

#domplat #scrollable .sticky .next-btn .text{
    font-size:8px;
    letter-spacing:0.1em;
    color:rgba(255,255,255,0.5);
    transform-origin: 0 0;
    transform:rotate(-90deg) translateX(-100%);
    transition:250ms color;
}

#domplat #scrollable .sticky .next-btn:hover .text{
    color:#fff;
}

#domplat #scrollable .sticky .next-btn .next-btn-relative{
    position: relative;
}

/* ============================== 
OVERCLOCKING
============================== */
#domplat #overclocking{
    background:black url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/clocking-bg.jpg)no-repeat center;
    background-size:cover;
    color:#fff;
    padding:8em 0;
    text-align:center;
}

#domplat #overclocking .clock{
    height:300px;
    margin:0 auto 2em;
    position: relative;
    width:300px;
}

#domplat #overclocking .clock img{
    width:100%;
}

#domplat #overclocking .clock .rim{
    border:8px solid #fff;
    border-top-left-radius:150px;
    border-right:0;
    border-bottom:0;
    height:50%;
    left:0;
    position: absolute;
    top:0;
    transform:rotate(45deg);
    transform-origin:100% 100%;
    width:50%;
}

#pdp-corsair #domplat #overclocking .clock h2{
    color:#eeeeee;
    font-size:4em;
    line-height:0.75em;
    position: absolute;
    text-align:center;
    top:32%;
    width:100%;
}

#pdp-corsair #domplat #overclocking .clock h2 span{
    font-size:0.5em;
}


#domplat #overclocking p{
    display: block;
    margin:0 auto;
    width:600px;
}

/* ============================== 
COLOR BAND
============================== */
#color-band{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7d729+0,77e24f+20,01fff9+39,0005ff+59,9b01cd+79,fe00ae+100 */
    background: rgb(247,215,41); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(247,215,41,1) 0%, rgba(119,226,79,1) 20%, rgba(1,255,249,1) 39%, rgba(0,5,255,1) 59%, rgba(155,1,205,1) 79%, rgba(254,0,174,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(247,215,41,1) 0%,rgba(119,226,79,1) 20%,rgba(1,255,249,1) 39%,rgba(0,5,255,1) 59%,rgba(155,1,205,1) 79%,rgba(254,0,174,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(247,215,41,1) 0%,rgba(119,226,79,1) 20%,rgba(1,255,249,1) 39%,rgba(0,5,255,1) 59%,rgba(155,1,205,1) 79%,rgba(254,0,174,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d729', endColorstr='#fe00ae',GradientType=1 ); /* IE6-9 */
    height:4px;
    position:relative;
    z-index:8;
}

/* ============================== 
ICUE
============================== */
#domplat #icue{
    background:black url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/gifs/1-banner.gif)no-repeat center;
    background-size:cover;
    color:#fff;
    display:table;
    height:56vw;
    padding:0;
    text-align:center;
    width:100%;
}

#domplat #icue:after{
    content:'';
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0+30,0+41,0.3+53,0.8+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 41%, rgba(0,0,0,0.3) 53%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 41%,rgba(0,0,0,0.3) 53%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 41%,rgba(0,0,0,0.3) 53%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */


    left:0;
    height:calc(100% + 1px);
    position: absolute;
    top:0;
    width:100%;


}

#domplat #icue .wrapper{
    display:table-cell;
    vertical-align:middle;
    z-index:1;
}

#domplat #icue .wrapper .description{
    margin-bottom:5em;

}
    
#domplat #icue video {
    left:50%;
    position:absolute;
    top:0;
    transform:translateX(-50%);
    min-width:100vw;
    width:100vw;
    z-index:0;
}

#domplat #icue .logo{
    margin:4em auto 3em;
    position: relative;
    width:240px;
}

#domplat #icue .logo img{
    width:100%;
}


#domplat #icue p{
    display: block;
    margin:0 auto;
    width:600px;
}

#domplat #icue .subnav{
    margin:0 auto 4em;
    width:600px;
}

#domplat #icue .subnav .subnav-item{
    display:inline-block;
}

#domplat #icue .subnav .subnav-item.square{
    border:1px solid #fff;
    height:12px;
    position:relative;
    width:12px;
}

#domplat #icue .subnav .subnav-item.square:before{
    background:#fff;
    content:'';
    height:10px;
    left:0;
    opacity:0;
    position: absolute;
    top:0;
    transform:scale(0.7);
    width:10px;
}

#domplat #icue .subnav .subnav-item.square,
#domplat #icue .subnav .subnav-item.square:link,
#domplat #icue .subnav .subnav-item.square:visited,
#domplat #icue .subnav .subnav-item.square:active,
#domplat #icue .subnav .subnav-item.square:focus{
    color:#fff;
    transform:scale(1) !important;
}

#domplat #icue .subnav .subnav-item.square p{
    color:#fff;
    display:inline-block;
    font-size:0.6em;
    left:50%;
    opacity:0;
    padding:0;
    position: absolute;
    transform:translateX(-50%) translateY(15px);
    transition:500ms opacity;
    width:auto;
}

#domplat #icue .subnav .subnav-item.square:hover p,
#domplat #icue .subnav .subnav-item.square.selected p{
    opacity:1;
}

#domplat #icue .subnav .subnav-item.square:hover:before,
#domplat #icue .subnav .subnav-item.square.selected:before{
    opacity:1;
}

#domplat #icue .subnav .subnav-item.line{
    background:#6f6f6f;
    height:1px;
    margin-left:5px;
    margin-right:5px;
    position: relative;
    transform:translateY(-3px);
    vertical-align:middle;
    width:54px;
}

#domplat #icue .cta{
    margin-top:10em;
    margin-bottom:3em;
}

/* ============================== 
COMPATIBLE
============================== */
#domplat #compatible{
    background:#141414;
    background-size:cover;
    color:#fff;
    padding:8em 0;
    position: relative;
}

#domplat #compatible .bg-item{
    height:calc(100% - 2em);
    position: absolute;
    top:0;
}

#domplat #compatible .bg-item.first{
    left:150px;
    opacity:0;
    transform:translateX(-15%);
}

#domplat #compatible.triggered .bg-item.first{
    opacity:1;
    transform:translateX(0%);
    transition:1200ms transform 600ms, 400ms opacity 600ms;
}

#domplat #compatible .bg-item.second{
    left:0%;
    opacity:0;
    transform:translateX(-15%);
}

#domplat #compatible.triggered .bg-item.second{
    left:0%;
    opacity:1;
    transform:translateX(0%);
    transition:1200ms transform, 1200ms opacity;
}

#domplat #compatible .half{
    max-width:600px;
    width:100%;
}

#domplat #compatible .half.right{
    margin:9em 50%;
}

#domplat #compatible p{
    color:#c5c5c5;
    display: block;
    max-width:440px;
}

/* ============================== 
SETUP
============================== */
#domplat #setup{
    background:black url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/setup-bg.jpg)no-repeat center;
    background-size:cover;
    color:#fff;
    padding:8em 0;
    position: relative;
}

#domplat #setup .half{
    max-width:600px;
    width:100%;
}

#domplat #setup h1{
    margin-bottom:1.5em;
}

#domplat #setup p{
    color:#c5c5c5;
    display: block;
    max-width:440px;
}

/* ============================== 
WARRANTY
============================== */
#domplat #warranty{
    background:black url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/warranty-bg.jpg)no-repeat center;
    background-size:cover;
    color:#fff;
    padding:14em 0;
    position: relative;
}

#domplat #warranty .content{
    background:none !important;
    margin:0 auto;
    max-width:600px;
    padding:2em;
    position: relative;
    text-align:center;
    width:100%;
}

#domplat #warranty .content .square{
    border:1px solid #b1b1b1;
    position: absolute;
    height:8px;
    width:8px;
}

#domplat #warranty .content .square:before{
    background:#b1b1b1;
    content: '';
    left:0;
    height:100%;
    position: absolute;
    top:0;
    transform:scale(0.65);
    width:100%;
}

#domplat #warranty .content .square.tl{
    left:0;
    top:0;

}

#domplat #warranty .content .square.tc{
    left:50%;
    top:0;
    transform:translateX(-50%);
}

#domplat #warranty .content .square.tr{
    right:0;
    top:0;
}

#domplat #warranty .content .square.bl{
    left:0;
    bottom:0;
}

#domplat #warranty .content .square.bc{
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}

#domplat #warranty .content .square.br{
    right:0;
    bottom:0;
}

#domplat #warranty .content .line{
    background:#b1b1b1;
    height:1px;
    width:calc(50% - 45px);
    position: absolute;
}

#domplat #warranty .content .line.tl{
    top:4px;
    left:23px;
}

#domplat #warranty .content .line.tr{
    top:4px;
    right:23px;
}

#domplat #warranty .content .line.bl{
    bottom:4px;
    left:23px;
}

#domplat #warranty .content .line.br{
    bottom:4px;
    right:23px;
}

#domplat #warranty h1{
    font-size:2.5em;
}

#domplat #warranty h1.white{
    color:#fff;
}

#domplat #warranty h1.gray{
    color:#b1b1b1;
}




/* ============================== 
BETTER TOGETHER 
============================== */
#domplat .better_together{
    background:#fff;
    width:100%;
}

#domplat .better_together .content_wrapper_1200{
    margin:0 auto;
    max-width:1200px;
    overflow:auto;
    padding:0 0 12em;
    width:100%;
}

#domplat .better_together .content_wrapper_1200 h1{
    padding:1em 0 1em;
    text-align:center;
    width:100%;
    margin:3em 0 1em;
}


#domplat .better_together .content_wrapper_1200 h1 {
    font-weight:600;
    font-size:2.5em;
}

#domplat .better_together .content_wrapper_1200 h2.item_name {
    font-weight:400;
}

#domplat .better_together .content_wrapper_1200 .sell_item{
    background:#fafafa;
    display:inline-block;
    margin-right:2.25%;
    position:relative;
    text-align:center;
    vertical-align:top;
    width:23%;
}

#domplat .better_together .content_wrapper_1200 .sell_item:last-child{
    margin-right:0;
}


#pdp-corsair #domplat .better_together .content_wrapper_1200 .sell_item .item_name{
    color:#000;
    margin-bottom: 0;
    margin-top: 1em;
    min-height: 3em;
    padding-bottom:0.25em;
    font-size: 2em;
}

#domplat .better_together .content_wrapper_1200 .sell_item .item_image{
    background:#eeeeee;
    padding:2em 0;
    width:100%;
}

#domplat .better_together .content_wrapper_1200 .sell_item .item_image img{
    transform:scale(1);
    width:82%;

    transition:250ms transform;
}

#domplat .better_together .content_wrapper_1200 .sell_item:hover .item_image img{
    transform:scale(1.1);
}

#pdp-corsair #domplat .better_together .content_wrapper_1200 .sell_item .item_subheader{
    color:#9a9a9a;
    font-size:0.9em;
    letter-spacing:0.1em;
    margin-left:7.5px;
    margin-top:0.5em;
    min-height: 35px;
    width:calc(100% - 15px);
}

#domplat .better_together .content_wrapper_1200 .sell_item .item_description,
#domplat .better_together .content_wrapper_1200 .sell_item .item_price{
    color:#959595;
    margin-left:7.5%;
    width:85%;
}

#domplat .better_together .content_wrapper_1200 .sell_item .item_price{
    margin-bottom:7%;
    margin-top:7%;
}

#domplat .better_together .content_wrapper_1200 .sell_item .item_description{
    min-height: 9em;
    line-height: 1.5em;
    letter-spacing: 0em;
}


#domplat .better_together .content_wrapper_1200 .sell_item .cta{
    background:#000;
    color:#fff;
    display:block;
    letter-spacing:0.3em;
    padding:2em 0;
    text-align:center;
    width:100%;

    transition:500ms background;
}

#domplat .better_together .content_wrapper_1200 .sell_item:hover .cta{
    background:#333;
}

@media only screen and (min-width: 2500px) {}


@media only screen and (max-width: 1523px) {
    #domplat #compatible .bg-item.first{
        left:auto;
        right:55%;
    }

    #domplat #compatible .bg-item.second{
        left:auto;
        right:80%;
    }
}

@media only screen and (max-width: 1200px) {
    /* ============================== 
    HERO
    ============================== */
    #domplat .hero {
        background-position:bottom center;
        background-size:cover;
    }

    #domplat .hero h1 {
        max-width:93%;
    }

    #domplat .hero p:first-child{
        margin-top:0;
    }


    /* ============================== 
    BETTER TOGETHER 
    ============================== */
    #domplat .better_together .compare .product,
    #domplat .better_together .compare .product:last-child{
        width:47%;
        margin-left:2%;
        margin-right:0;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item{
        margin-left:1.8%;
        margin-right:0;
        width:22.5%;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_name{
        font-size:2em;
        min-height: 71px
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_description{
        min-height:9em;
    }

}

@media only screen and (max-width: 1160px) {
    #domplat .better_together .content_wrapper_1200 .sell_item .item_description{
        min-height:12em;
    }
}

@media only screen and (max-width: 990px) {
    /* ============================== 
    HERO
    ============================== */

    #domplat .hero p:first-child{
        margin-top:0;
    }
    
    #domplat .hero .shop .content_wrapper {
        padding-bottom:50px;   
    }

    /* ============================== 
    CULMINATION
    ============================== */
    #domplat #culmination .half{
        max-width:50%;
    }

    /* ============================== 
    ICUE
    ============================== */
    #domplat #icue video{
        height:100%;
        width:auto;
    }

    /* ============================== 
    BETTER TOGETHER
    ============================== */
    #domplat .hero .better_together .content_wrapper_1200 {
        padding-bottom:50px;   
    }

    #domplat .better_together .content_wrapper_1200 .sell_item{
        margin-left:2%;
        margin-right:0;
        margin-top:2%;
        width:47%;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_name{
        font-size:2.8em;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item:nth-child(2),
    #domplat .better_together .content_wrapper_1200 .sell_item:nth-child(3){
        margin-top:0;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_description{
        min-height:8em;
    }

}

@media only screen and (max-width: 865px) {
    /* ============================== 
    CULMINATION
    ============================== */
    #domplat #culmination .items .item .overnote p{
        font-size:0.75em;
    }
}

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

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

    #domplat .hero {
        background: url(https://cwsmgmt.corsair.com/pdp/dominator-platinum-rgb/img/hero-bg-mobile.jpg) center no-repeat;
        background-size: cover;
    }

    #domplat .hero .content_wrapper{
        padding:0 15px;
    }

    #domplat .hero h1{
        font-size:11em;
    }

   
    #domplat .hero p {
        padding-top:0.5em;
    }

    #domplat .hero .bg_product{
        margin: 0 auto 2%;
    }

    #domplat .cta {
        margin-top: 2em;
    }
    
    #domplat .hero video {
        display:none !important;        
    }

    #domplat .hero .cta{
        margin:4em auto 0;
    }

    /* ============================== 
    CULMINATION
    ============================== */
    #domplat #culmination{
        height:auto;
        padding:6em 0;
    }

    #domplat #culmination h1{
        margin-top:2em;
        max-width:500px;
        text-align:center;
    }

    #domplat #culmination p{
        display: block;
        margin:0 auto;
        max-width:500px;
        text-align:center;
    }

    #domplat #culmination .crop-container{
        margin-left:0;
        position: relative;
        width:100%;
    }

    #domplat #culmination .items{
        transform:translateX(-16%);
        /*width:100%;*/
    }

    #domplat #culmination .half{
        max-width:100%;
    }

    #domplat #culmination .slick-slide .line1,
    #domplat #culmination .slick-slide .line2,
    #domplat #culmination .slick-slide .overnote .dotted,
    #domplat #culmination .slick-slide .overnote p.red,
    #domplat #culmination .slick-slide.slick-current .overnote .dotted,
    #domplat #culmination .slick-slide.slick-current .overnote p.red{
        display:none;
    }

    #domplat #culmination .slick-slide.slick-current .overnote .note{
        border-left:none;
    }

    #domplat #culmination .items .item .overnote .note{
        left:0;
        padding-left:0;

        width:100%;
    }

    #domplat #culmination .items .item .overnote p.black,
    #domplat #culmination .items .item .overnote p.gray{
        text-align:center;
        transform:none;
        width:100%;
    }

    #domplat #culmination .items .item .overnote p.gray{
        font-size:0.75em;
    }

    #domplat #culmination .items .item.slick-current .overnote p.black,
    #domplat #culmination .items .item.slick-current .overnote p.gray{
        opacity:1;
    }


    /* Animate */
    #domplat #culmination .slick-slide.slick-current .overnote .dotted{
        opacity:1;
        transition:500ms width 750ms;
        width:calc(20% - 8px);
    }

    #domplat #culmination .slick-slide.slick-current .overnote p.black{
        opacity:1;
        transform:translateX(0px);
        transition:500ms opacity 750ms, 500ms transform 750ms;
    }

    #domplat #culmination .slick-slide.slick-current: .overnote p.gray{
        opacity:1;
        transform:translateX(0px);
        transition:500ms opacity 750ms, 500ms transform 750ms;
    }

    #domplat #culmination .slick-slide.slick-current .overnote p.red{
        opacity:1;
        transform:translateX(0px);
        transition:500ms opacity 750ms, 500ms transform 750ms;
    }

    #domplat #culmination .slick-slide.slick-current .overnote .note{
        transform:scaleY(1);
        transition:250ms transform 500ms;
    }

    #domplat #culmination .slick-slide.slick-current .line1{
        height:2vw;
        transition:250ms height;
    }

    #domplat #culmination .slick-slide.slick-current .line2{
        bottom:1.9vw;
        height:2vw;
        transition:250ms height 250ms;
    }

    #domplat #culmination .items .item .overnote p{
        font-size:0.9em;
    }

    /* ============================== 
    SCROLLABLE
    ============================== */
    #scrollable{
        min-height:0;
    }

    #domplat #scrollable .sticky .subnav{
        background:#000;
        left:0;
        top:0;
        width:100vw;
    }

    #domplat #scrollable .sticky .subnav ul li{
        display:inline-block;
        margin-left:calc(20% - 30px);
        margin-top:1em;
    }

    #domplat #scrollable .sticky .half{
        width:100vw;
    }

    #domplat #scrollable .sticky .vid{
        margin-left:0;
        padding-bottom:0;
    }

    #domplat #scrollable .sticky .vid:after{
        content:'';
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
        background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

        bottom:0;
        height:140px;
        position: absolute;
        transform:translateY(100%);
        width:100%;
    }

    #domplat #scrollable .sticky .vid #scrollable-canvas{
        display:block;
        margin:41px auto 0;
        position: relative;
        transform:none;
        width:60vh;
        max-width:calc(100vw - 30px);
    }

    #domplat #scrollable .sticky .page{
        top:60vh;
    }

    #domplat #scrollable .sticky .page .body-text{
        left:auto;
        margin-left:15px;
        position: relative;
        text-align:center;
        top:auto;
        transform:none;
        width:calc(100% - 30px);
    }

    #domplat #scrollable .sticky .page.displayed .body-text{
        top:calc(50% + 17px);
        transform:none;
    }

    #domplat #scrollable .sticky.end .page.displayed .body-text{
        top:1em;
    }

    #domplat #scrollable .sticky.end .page .body-text{
        top:1em;
    }

    #domplat #scrollable .sticky .next-btn{
        left:10px;
        top:calc(60vh / 2 + 21px);
    }

    /* ============================== 
    ICUE
    ============================== */
    #domplat #icue .wrapper{
        width:100%;
    }

    #domplat #icue:after{
        /*content:none;*/
    }

    #domplat #icue video{
        display:none !important;
    }

    #domplat #icue .logo{
        margin:3em auto 2vw;
        width:24vw;
    }

    #domplat #icue p{
        width:600px;
    }

    /* ============================== 
    SETUP
    ============================== */
    #domplat #setup:before{
        background:rgba(0,0,0,0.75);
        content:'';
        height:100%;
        left:0;
        position: absolute;
        top:0;
        width:100%;
    }

    /* ============================== 
    COMPATIBLE
    ============================== */
    #domplat #compatible{
        padding:100vw 0 0;
    }

    #domplat #compatible .bg-item{
        height:100vw;
    }

    #domplat #compatible .bg-item.first{
        right:10%;
    }

    #domplat #compatible .bg-item.second{
        right:50%;
    }

    #domplat #compatible .wrapper{
        width:100%;
    }

    #domplat #compatible .half.right{
        margin:0;
        width:100%;
    }

    #domplat #compatible h1{
        margin-bottom:0;
    }

    #domplat #compatible p{
        max-width:100%;
    }


    /* ============================== 
    BETTER TOGETHER 
    ============================== */
    #domplat .better_together .compare .product .product_title img{
        width:55%;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item{
    }

    #domplat .content_wrapper_1200 .sell_item .item_description{
        min-height:8em;
    }

}

@media only screen and (max-width: 678px) {
    #domplat .better_together .content_wrapper .sell_item .item_description{
        min-height:7em;
    }
}


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

    /* ============================== 
    CLOCKING
    ============================== */
    #domplat #overclocking p{
        margin-left:15px;
        width:calc(100% - 30px);
    }

    /* ============================== 
    ICUE
    ============================== */

    #domplat #icue p{
        width:calc(100% - 30px);
    }

    #domplat #icue .subnav{
        width:90vw;
    }

    #domplat #icue .subnav .subnav-item.line{
        display:none;
    }

    #domplat #icue .subnav .subnav-item.square{
        margin:0 2.5vw;
    }

    /* ============================== 
    BETTER TOGETHER
    ============================== */
    #domplat .better_together .content_wrapper_1200 .sell_item,
    #domplat .better_together .content_wrapper_1200 .sell_item:last-child{
        display:block;
        margin:6% auto 0;
        max-width:345px;
        width:96%;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item:nth-child(2),
    #domplat .better_together .content_wrapper_1200 .sell_item:nth-child(3){
        margin:6% auto 0;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_name{
        min-height:0;
    }

    #domplat .better_together .content_wrapper_1200 .sell_item .item_description{
        min-height:0;
    }
}

@media only screen and (max-width: 610px){
    #domplat #icue{
        background-size:contain;
    }
}

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

    #domplat .hero .cta{
        margin-top:2em;
    }

    #domplat .hero h1{
        font-size:10em;
    }

    #domplat .hero h2{
        font-size:3em;
    }

    /* ============================== 
    ICUE
    ============================== */
    #domplat #icue{
        height:auto;
        padding:0;
    }

    #domplat #icue .subnav{
        margin:5em auto 4em;
    }

    /* ============================== 
    SCROLLABLE
    ============================== */
    #scrollable .sticky .page .body-text{
        left:15px;
        text-align:center;
        width:calc(100% - 30px);
    }
}


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

    /* ============================== 
    HERO
    ============================== */
    
    #domplat .hero {
        min-height: 140vw;
        margin-top: 16px;
    }
    
    #domplat .hero .content_wrapper {
        overflow:hidden;
        padding-bottom:40px;
        text-align: center;
    }

    #domplat #hero .ces{
        left:20px;
        transform:none;
        width:calc(100vw - 40px);
    }

    #domplat .hero .ces p{
        bottom:74%;
        font-size:0.8em;
        left:0%;
        width:calc(100% - 70px);
    }

    #domplat .hero .content_wrapper h3{
        top:69%;
    }

    #domplat .hero .content_wrapper .bg_name{
        margin: 4% auto;
    }

    #domplat .hero .content_wrapper .hero_mouse{
        margin: 19% auto 0;
    }

    /* ============================== 
    COMPATIBLE
    ============================== */
    #domplat #compatible .wrapper{
        width:calc(100% - 30px);
    }

    /* ============================== 
    BETTER TOGETHER 
    ============================== */

    #domplat .better_together .compare .product,
    #domplat .better_together .compare .product:last-child{
        width:90%;
        margin-left:5%;
    }

    #domplat .better_together .compare .product:last-child{
        margin-top:10%;
    }

}


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

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