/*Lets use a better font for the numbers*/
@font-face {
    font-family: 'DS-digital';
    src: url('https://event.msi.com/desktop/2016/trident/font/DSDIGI.eot');
    /* IE9 Compat Modes */
    src: url('https://event.msi.com/desktop/2016/trident/font/DSDIGI.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://event.msi.com/desktop/2016/trident/font/DSDIGI.woff') format("woff"), /* Modern Browsers */
    url('https://event.msi.com/desktop/2016/trident/font/DSDIGI.ttf') format("truetype"), /* Safari, Android, iOS */
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}

a {
    border: none;
    color: #fff;
}

body img {
    max-width: 100%;
    max-height: 100%;
    width: expression(document.body.clientWidth>100?"100%": "auto");
    height: expression(document.body.clientHeight>100?"100%": "auto");
    overflow: hidden;
}

body {
    background: #000 url(https://asset.msi.com/event/desktop/2016/trident/images/bg.jpg) 0 0 no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    font-family: 'DIN Pro', Arial, sans-serif;
}

section {
    height: 100vh;
    width: 100vw; 
    /*border: #fff 1px solid;     */

}
section#page1 {
    height: 91vh;
    width: 100vw;  
    overflow: hidden;  

}
#page1 {
    position: relative;
    top: 0;
    left: 0px;
  /*  background: -moz-linear-gradient(top, rgba(0, 0, 0, .9) 80%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .9) 80%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 80%, rgba(0, 0, 0, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);*/
    background-size: 100%;
}

.video {
   
    height: 100%;
    width: 100%;
}

.ytb {
    position: relative;
    /*margin-top: 9vh;*/
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    padding-top: 25px;
}

.ytb iframe {
    
    position: absolute;
    width: 60% !important;
    height: 60% !important;
    right: 20%;
    left: 20%
}

#page2 {
    text-align: center;
}

#page2 .content {
    position: relative;
    max-height: 80%;
    top: 50%;
    transform: translateY(-50%);
}

#page2 .slogan {
    max-width: 70%;
    width: 100%;
    margin: 0 auto;
}

#page2 .kv {
    max-width: 45%;
    width: 100%;
    margin: 0 auto;
    /*background-color: #0f0;*/
}

#page2 .timer {
    max-width: 60%;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 8px #f00, 0 0 8px #f00;
    font-family: DS-digital, 'DIN Pro', Arial, sans-serif;
    line-height: 4vh;
}

#page2 .timer #note {
    color: #fff;
    font-size: 3vw;
}

#page2 .timer #note span {
    font-size: 1.8vw;
}

#page2 .timer p {
    font-size: 1.8vw;
}

#page3 {
    position: relative;
    padding-top: 20vh;
    text-align: center;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .9) 30%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .9) 30%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .9) 30%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    background-size: 100%;
}

#page3 .partimg div {
    position: relative;
    display: inline-block;
    width: 18%;
    height: 100%;
    margin-left: -4.6%;
    transition: 0.3s all ease-out 0s;
    cursor: pointer;
    -webkit-clip-path: polygon(31% 0%, 98% 0%, 67% 98%, 0% 98%);
    clip-path: polygon(31% 0%, 98% 0%, 67% 98%, 0% 98%);
}

#page3 .partimg div::before {
    position: absolute;
    z-index: 10;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 0, 0, .2);
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, .2)), color-stop(.75, rgba(0, 0, 0, .2)), color-stop(.75, transparent), to(transparent));
    -webkit-background-size: 4px 4px;
    transition: 0.3s all ease-out 0s;
    mask: url(../images/Trident-01.svg);
    mask-type: luminance;
}

#page3 .partimg div:hover::before {
    background-color: rgba(255, 0, 0, .0);
    background-image: none;
    transition: 0.3s all ease-out 0s;
}

#page3 .partimg div:hover {
    transform: scale(1.1, 1.1);
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .3));
    transition: 0.3s all ease-out 0s;
}

#page3 img {}

#page3 img:first-of-type {}

#page3 footer {
    width: 100%;
    height: auto;
    text-align: center;
    color: #333;
    position: absolute;
    bottom: 5vh;
}

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

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

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

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

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

}

@media screen and (max-width:769px) {
   section {
    height: 50vh !important;
    width: 100vw; 
    /*border: #fff 1px solid;     */

}
}

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

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

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