/*------@@@@@@@@@@@----------- @MEDIA 1100px -----------@@@@@@@@@@@------*/
@media screen and (max-width: 1099px) {
/* Main CSS */
.max {
display: none;
}
    
/*** Header ***/
#header {
height: 44px;
}
    
    .barCap {
    width: 28px;
    height: 44px;
    }
    
    .links {
    margin: 34px 0 0px auto;
    }
    
        .links a, .links a:visited {
        margin: 0 4px;
        padding: 36px 0 0 36px;
        }
    
            .links a.shifted, .links a:visited.shited {
            margin: 0 0;
            }
    
        .links .pl a, .links .pl a:visited{
        padding-left: 64px;
        }
    
        .links .dv a, .links .dv a:visited{
        padding-left: 90px;
        }
    
        .links .ps a, .links .ps a:visited{
        padding-left: 106px;
        }
    
        .logoIn {
        padding-left: 172px;
        }
    
    #logoHeader {
    width: 180px;
    -ms-transform: translate(-316px, 0);
    -webkit-transform: translate(-316px, 0);
    transform: translate(-316px, 0);
    }
    
        .scrolled {
        padding-top: 114px;
        }

/*** Main ***/
#main {
max-width: 600px;
}
    
/** Container **/
    
/* Structural */
#brandingSpace {
height: 490px;
}
    
    #trailer-box {
    width: 580px;
    margin: 48px auto 26px auto;
    }
    
        #trailer-box p {
        font-size: 32px;
        letter-spacing: 1px;
        padding-top: 14px;
        }
    
    #trailer-block {
    width: 540px;
    padding: 12px 0 30px 0;
    }
    
#spaceGap {
height: 200px;
}
    
    #playstore, #playstore:visited {
        padding: 60px 60px;
        margin: -60px -60px;
        left: 21.6%;
    }
    
    #steam, #steam:visited {
        padding: 60px 108px;
        margin: -60px -108px;
    }
    
    #apple, #apple:visited {
        padding: 60px 60px;
        margin: -60px -60px;
        left: 78.5%;
    }
    
#shipFull {
padding: 160px 120px;
top: 600px;
}
    
.textBox {
width: 72%;
padding: 36px 32px;
margin: 30px auto;
}
    
    .textBox h1 {
    font-size: 40px;
    letter-spacing: 1px;
    line-height: 1.3;
    }
    
    .textBox h2 {
    font-size: 40px;
    }
    
    .textBox h3 {
    font-size: 22px;
    line-height: 1.2;
    margin: 2px auto 10px auto;
    }
    
    .textBox h4 {
    font-size: 18px;
    line-height: 1.4;
    margin: 10px 0;
    }
    
    .textBox p {
    display: block;
    width: 100%;
    font-size: 16px;
    }
    
    .textBox p:last-child {
    padding: 0;
    }
    
.screens {
padding: 4px 0;
}
    
    .screen {
    width: 44%;
    padding-top: 25%;
    margin: 8px 10px;
    }
#parallaxBlock {
top: 320px;
}
    .surface.mini {
    display:block;
    height: 200px;
    }
    
    .surfaceTile.mini {
    display:block;
    height: 120px;
    }
    
    .surfaceTile h1 {
    font-size: 48px;
    }
    
    .surfaceTile p {
    font-size: 24px;
    line-height: 0.8;
    }
    
    .surfaceText {
    padding-top: 82px;
    }
    
    .barSurface {
    margin-top: 16px;
    }

.columnViking {
width: 60px;
}
    
    .colLeft {
    left: -50px;
    }
    
    .colRight {
    right: -50px;
    }
    
    .colVikingCap{
    height: 386px;
    }
    
/* Branding */
#branding {
top: 0;
height: 1200px;
}

.parallax {
position: absolute;
}

#viking01 {
top: 220px;
height: 240px;
-ms-transform: translate(-240px, 0); /* IE 9 */
-webkit-transform: translate(-240px, 0); /* Chrome, Safari, Opera */
transform: translate(-240px, 0);
}

#logoBranding {
top: 40px;
width: 536px;
height: 260px;
}
    
#planet01 {
height: 146px;
-ms-transform: translate(-280px, 0); /* IE 9 */
-webkit-transform: translate(-280px, 0); /* Chrome, Safari, Opera */
transform: translate(-280px, 0);
}

#planet02 {
height: 180px;
-ms-transform: translate(-100px, 0); /* IE 9 */
-webkit-transform: translate(-100px, 0); /* Chrome, Safari, Opera */
transform: translate(-100px, 0);
}

#planet03 {
height: 154px;
-ms-transform: translate(110px, 0); /* IE 9 */
-webkit-transform: translate(110px, 0); /* Chrome, Safari, Opera */
transform: translate(110px, 0);
}
    
#viking02 {
top: 240px;
height: 256px;
-ms-transform: translate(-10px, 0); /* IE 9 */
-webkit-transform: translate(-10px, 0); /* Chrome, Safari, Opera */
transform: translate(-10px, 0);
}

#viking03 {
top: 360px;
height: 222px;
-ms-transform: translate(-120px, 0); /* IE 9 */
-webkit-transform: translate(-120px, 0); /* Chrome, Safari, Opera */
transform: translate(-120px, 0);
}

.lightWidth {
width: 94%;
}
    
.lightPre a, .lightNex a {
position: absolute;
top: 0;
left: initial;
right: initial;
bottom: 0;
margin: auto;
padding: 0;
height: 70px;
width: 45px;
background: url( assets/prev00.png) no-repeat -10px center;
background-size: cover;
}

.lightPre a {
left: 16px;
}

.lightPre a:active, .lightPre a:hover, .lightPre a:focus,
.lightNex a:active, .lightNex a:hover, .lightNex a:focus {
background: url( assets/prev01.png) no-repeat -10px center;
background-size: cover;
}

.lightNex a {
right: 16px;
}
    
/** Footer **/
#footer {
height: 60px;
}
    
    #linkRogue {
    margin: 16px 0;
    }
    
        #linkRogue a {
        padding: 16px 52px;
        }

    #linkVisdev {
    font-size: 8px;
    }
    
}
    
@media screen and (max-width: 599px) {
    #headContainer {
        max-width: 300px;
    }
    
    #logoHeader {
    width: 120px;
    -ms-transform: translate(-60px, 0); /* IE 9 */
    -webkit-transform: translate(-60px, 0); /* Chrome, Safari, Opera */
    transform: translate(-60px, 0);
    pointer-events: none;
    }
    
        #headerSpace {
        padding-left: 0;
        }
    
        .links {
        margin-top: 28px;
        }
        
        .links a, .links a:visited, .links a.shifted, .links a.shifted:visited {
        margin: 0 -2px;
        padding: 24px 0 0 24px;
        }
    
            .links .pl a, .links .pl a:visited{
            padding-left: 46px;
            }
    
            .links .dv a, .links .dv a:visited{
            padding-left: 66px;
            }
    
            .links .ps a, .links .ps a:visited{
            padding-left: 78px;
            }
    
#main {
width: 100%;
}
    
    #villainsOverlay {
        height: 192px;
        background-size: contain;
    }
    
    #shipFull {
        top: 480px;
        width: 100px;
        padding: 80px 92px;
    }
    
#brandingSpace {
height: 390px;
}
   
    #trailer-box {
    width: 290px;
    margin: 52px auto 26px auto;
    }
        
    #trailer-box p {
        font-size: 16px;
        padding-top: 6px;
    }
    
    #trailer-block {
        width: 272px;
        padding: 6px 0 30px 0;
    }
    
    .textBox {
        width: 82%;
        padding: 24px 26px;
    }
    
        .textBox h1, .textBox h2 {
            font-size: 22px;
        }
    
        .textBox h3, .textBox h4 {
            font-size: 15px;
        }
    
        .textBox p {
            font-size: 14px;
            line-height: 1.4;
        }
    
    .tileSurface {
        height: 912%;
    }
    
    .screen {
        width: 82%;
        padding-top: 44%;
    }
    
.columnViking {
display: none;
}
    
    .colVikingCap {
    height: 220px;
    }

.colLeft {
left: -10px;
}

.colRight {
right: -10px;
}
    
#parallaxBlock {
top: 210px;
}
    
#viking01 {
top: 198px;
height: 120px;
-ms-transform: translate(-200px, 0); /* IE 9 */
-webkit-transform: translate(-200px, 0); /* Chrome, Safari, Opera */
transform: translate(-200px, 0);
}

#logoBranding {
top: 60px;
width: 288px;
height: 140px;
}
    
#planet01 {
height: 73px;
-ms-transform: translate(-192px, 0); /* IE 9 */
-webkit-transform: translate(-192px, 0); /* Chrome, Safari, Opera */
transform: translate(-192px, 0);
}

#planet02 {
height: 90px;
-ms-transform: translate(-120px, 30px); /* IE 9 */
-webkit-transform: translate(-120px, 30px); /* Chrome, Safari, Opera */
transform: translate(-120px, 30px);
}

#planet03 {
height: 77px;
-ms-transform: translate(10px, -30px); /* IE 9 */
-webkit-transform: translate(10px, -30px); /* Chrome, Safari, Opera */
transform: translate(10px, -30px);
}
    
#viking02 {
top: 196px;
height: 128px;
-ms-transform: translate(-32px, 0); /* IE 9 */
-webkit-transform: translate(-32px, 0); /* Chrome, Safari, Opera */
transform: translate(-32px, 0);
}

#viking03 {
top: 290px;
height: 111px;
-ms-transform: translate(-130px, 0); /* IE 9 */
-webkit-transform: translate(-130px, 0); /* Chrome, Safari, Opera */
transform: translate(-130px, 0);
}
    
.lightPre a {
left: 24px;
}

.lightNex a {
right: 24px;
}
    
.tileRock {
padding-bottom: 46px;
}

#footer {
height: 48px;
}

#linkRogue {
    margin: 12px 0;
}
    
#linkRogue a {
padding: 12px 38px;
}

#linkVisdev {
font-size: 7px;
}
}