@font-face{font-family:"Univers57Condense";src:url("../../../../etc/designs/msi-occ/assets/fonts/global/adc492fa-2e18-46e7-a334-19977a077ec2.eot");src:url("../../../../etc/designs/msi-occ/assets/fonts/global/adc492fa-2e18-46e7-a334-19977a077ec2.eot?#iefix") format("embedded-opentype"),url("../../../../etc/designs/msi-occ/assets/fonts/global/14f0370a-8385-437e-b5b8-5cb89e20e2ff.woff") format("woff"),url("../../../../etc/designs/msi-occ/assets/fonts/global/8c1d24ab-e7f8-4c29-a419-f87180fdf410.ttf") format("truetype"),url("../../../../etc/designs/msi-occ/assets/fonts/global/9baaf87b-982d-45c0-9518-8f5aec7c1292.svg#9baaf87b-982d-45c0-9518-8f5aec7c1292") format("svg");font-weight:normal;font-style:normal}
.touch-ui{background-color:#111}
.touch-ui.section-padding{padding-top:64px;padding-bottom:64px}
.touch-ui h2,.touch-ui h3,.touch-ui h4{font-family:"Univers",Arial,san-serif,serif !important;color:rgba(255,255,255,0.95)}
.touch-ui h2{font-size:28px;line-height:1.5;letter-spacing:normal}
@media(min-width:992px){.touch-ui h2{font-size:32px;line-height:1.41;letter-spacing:-0.5px}
}
.touch-ui h3{font-size:23px;line-height:1.52}
.touch-ui .mb-3{margin-bottom:26px !important}
.touch-ui p{font-size:16px;line-height:1.63;color:rgba(255,255,255,0.6)}
.touch-ui p.title-description{font-size:19px;line-height:1.42;margin-bottom:40px}
@media(min-width:992px){.touch-ui p.title-description{line-height:1.58}
}
.touch-ui p.lead{font:normal 19px/1.58 arial}
.touch-ui p.lead-white{color:rgba(255,255,255,0.95)}
.touch-ui .p-small{font:normal 14px/1.5 arial;letter-spacing:.2px}
.touch-ui .nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
.touch-ui .nav-link-description{font-size:14px;line-height:1.5;display:none}
.touch-ui .nav-link-description.active{display:block}
.touch-ui .better-basics a{font-size:19px;line-height:1.58;color:rgba(255,255,255,0.95);opacity:.45;transition:opacity .3s ease-out;margin-bottom:13px;letter-spacing:.7px;display:block}
.touch-ui .better-basics a p{color:rgba(255,255,255,0.6)}
.touch-ui .better-basics a:hover,.touch-ui .better-basics a:focus{color:rgba(255,255,255,0.95);cursor:pointer;opacity:.9}
.touch-ui .better-basics a.active{opacity:1}
.touch-ui .better-basics a.active p{color:rgba(255,255,255,0.95)}
.touch-ui .better-basics a:before{content:"";border-color:white;border-left:2px solid rgba(255,255,255,0.1);display:block;height:100%;left:-17px;position:absolute;padding:0;margin:0;border-left:2px solid rgba(255,255,255,0.1)}
.touch-ui .better-basics a.active:before{border-left:2px solid white}
.touch-ui .description-container{text-align:center;margin:40px auto 32px;max-width:345px}
.touch-ui .radio-nav-item{position:relative;z-index:2}
.touch-ui .nav-pills{display:none}
.touch-ui .nav-pills .nav-link{position:relative;border-radius:0;padding:0;outline:0;margin-bottom:32px}
.touch-ui .nav-pills .nav-link:hover:before,.touch-ui .nav-pills .nav-link:focus:before{opacity:1;box-shadow:0 10px 20px 0 rgba(0,0,0,0.5)}
.touch-ui .nav-pills .nav-link.active,.touch-ui .nav-pills .nav-link.show{position:relative;border-radius:0;background-color:transparent}
.touch-ui .nav-pills .nav-link.active:before,.touch-ui .nav-pills .nav-link.show:before{box-shadow:0 10px 20px 0 rgba(0,0,0,0.5);opacity:1}
.touch-ui .nav-pills .nav-link.active:after,.touch-ui .nav-pills .nav-link.show:after{opacity:1}
.touch-ui .dropdown{max-width:345px;margin:0 auto}
.touch-ui .touch-mobile{height:540px}
.touch-ui .touch-replay{position:absolute;cursor:pointer;bottom:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);justify-content:center;display:flex}
.touch-ui .touch-gif{width:168px;height:280px;position:relative;left:50%;top:358px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.touch-ui .touch-mobile::before{position:absolute;display:inline-block;width:290px;height:520px;left:50%;top:0;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);content:"";background:url("../../../../etc/designs/msi-occ/assets/images/apx-next/xe-skeleton-gradient-clipped.png") no-repeat 0 0;background-size:100%;z-index:0}
.touch-ui .dropdown-toggle{height:50px;border-radius:3px;border:solid 1px #767676;background-color:#111;padding-left:20px;padding-right:9px;text-align:left;font-size:16px;font-weight:normal;font-style:normal;font-stretch:normal;line-height:1.63;letter-spacing:normal;color:#f2f2f2}
.touch-ui .dropdown-toggle:after{content:"";display:block;position:absolute;width:14px;height:14px;right:18px;top:14px;border:0;border-bottom:1px solid rgba(255,255,255,0.4);border-right:1px solid rgba(255,255,255,0.4);transform:rotate(45deg)}
.touch-ui .dropdown-toggle .show [data-toggle="dropdown"]:after{transform:rotate(-135deg);top:22px}
.touch-ui .dropdown-menu{padding:0}
.touch-ui .dropdown-item{line-height:1.86;background-color:#f2f2f2;height:50px;padding-top:12px;border-radius:5px;font-size:14px;letter-spacing:.2px;color:#343434}
.touch-ui .dropdown-item .list-check-active{visibility:hidden}
.touch-ui .dropdown-item.active,.touch-ui .dropdown-item:active{color:#111;background-color:#fff}
.touch-ui .dropdown-item.active .list-check-active{visibility:visible}
.touch-ui .dropdown-item:hover,.touch-ui .dropdown-item:focus{cursor:pointer;color:#111;background-color:#f6f9fc}
.touch-ui a.text-white:hover,.touch-ui a.text-white:focus,.touch-ui a.text-white:hover,.touch-ui a.text-white:focus{color:#e6e6e6 !important}
@media(min-width:576px){.touch-ui .dropdown{max-width:510px}
.touch-ui .description-container{max-width:510px}
}
@media(min-width:768px){.touch-ui.section-padding{padding-top:80px;padding-bottom:80px}
.touch-ui .touch-mobile{height:1090px}
.touch-ui .touch-gif{position:relative;width:348px;height:580px;left:50%;top:728px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.touch-ui .touch-mobile::before{width:581px;height:1040px;content:url("../../../../etc/designs/msi-occ/assets/images/apx-next/xe-skeleton-gradient-clipped.png");background:0;-webkit-transform:translate(-50%,0) scale(1.03);transform:translate(-50%,0) scale(1.03)}
}
@media(min-width:992px){.touch-ui .touch-dropdown{display:none}
.touch-ui .nav-pills{display:block}
.touch-ui .content-column{min-height:416px !important}
.touch-ui .touch-ui{overflow:hidden}
.touch-ui .touch-gif{top:21px;left:101px;-webkit-transform:none;transform:none}
.touch-ui .touch-before{height:680px}
.touch-ui .touch-before::before{top:-590px;right:-101px;display:block;content:url("../../../../etc/designs/msi-occ/assets/images/apx-next/xe-skeleton-gradient.png");position:absolute;z-index:0;transform:scale(1.03);-webkit-transform:scale(1.03)}
.touch-ui .touch-replay{left:calc(50% + 55px)}
}
@media(min-width:1200px){.touch-ui.section-padding{padding-top:104px;padding-bottom:104px}
.touch-ui .touch-gif{top:-20px;left:191px}
.touch-ui .touch-before::before{display:block;content:url("../../../../etc/designs/msi-occ/assets/images/apx-next/xe-skeleton-gradient.png");position:absolute;z-index:0;top:-630px;right:-101px}
.touch-ui .touch-replay{left:calc(50% + 100px)}
}
.deviceSkeleton{background-color:#111;margin-bottom:0 !important;margin-top:0 !important;padding-bottom:0 !important;padding-top:0 !important}
section#touch{overflow:hidden}
.touch-ui--gray{background-color:#343434 !important}