/******************************************************************** * General ********************************************************************/ #wrapper { max-width: 767px; width: 100%; } /******************************************************************** * Header ********************************************************************/ .header { max-width: 767px; width: 100%; height: 270px; } .logo { top: 0px; left: 0px; width: 100%; height: auto; } .logo img { width: 320px; padding: 20px 0 5px 10px; } .socialtop { display: none; } .menuleft, .menuright { display: none; } .menu { position: relative; top: 0px; left: 0px; width: 100%; height: 180px; font-family: passionOneRegular; color: #ffffff; font-size: 32px; } .menucenter { position: absolute; top: 170px; left: 0px; width: 100%; height: auto; background: none; z-index: 1; } .menu ul { background: rgba(47, 97, 132,0.8); padding: 0; margin: 0; z-index: 8; } .menu ul li { width: 100%; overflow: hidden; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .menu ul li a { display: block; padding: 10px 20px; width: 100%; border: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .menu ul li a:hover { background: none; border: none; padding: 10px 20px; } .menu ul li.active a { background: none; border: none; padding: 10px 20px; } .menu li.active { background: rgba(44,54,75,0.9); border: none; padding: 0; } .menu li:hover { background: rgba(44,54,75,0.9); border: none; padding: 0; } .menuicon { display: block; position: absolute; margin-right: 20px; right: 0; top: -130px; width: 160px; height: 160px; z-index:9; } .menuicon img { width: 160px; height: 160px; } .menuicon a { display: block; } .toggle { width: 100%; height: 0; overflow: hidden; -webkit-transition: all 1.0 ease-in-out; -moz-transition: all 1.0s ease-in-out; -o-transition: all 1.0s ease-in-out; transition: all 1.0s ease-in-out; } .toggle.active{ height: 280px; visibility: visible; -webkit-transition: all 1.0 ease-in-out; -moz-transition: all 1.0s ease-in-out; -o-transition: all 1.0s ease-in-out; transition: all 1.0s ease-in-out; } /******************************************************************** * Socials Side / Top (for mobile view) ********************************************************************/ .socialbar { position:relative; left:0px; top: 15px; height: auto; width: 100%; z-index: 0; margin-top: 0px; margin-bottom: 0px; background: none; text-align: center; } .facebook, .twitter, .youtube, .discord, .forum, .presskit { position: relative; float: none; width:64px; height:64px; margin: 2px 6px; display: inline-table; opacity: 1.0; background:url(../images/socials_side_new.64.png) no-repeat; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .facebook:hover, .twitter:hover, .youtube:hover, .discord:hover, .forum:hover, .presskit:hover { opacity: 1.0; } .facebook { margin-top: 2px; background-position:0 0px; } .twitter { background-position:0 -64px; } .youtube { background-position:0 -128px; } .discord { background-position:0 -192px; } .forum { background-position:0 -256px; } .presskit { background-position:0 -320px; } /******************************************************************** * Main ********************************************************************/ .mainframe { max-width: 767px; width: 100%; } .content { margin: 10px; } .boxcontent img { max-width: 610px; } /******************************************************************** * Home ********************************************************************/ .box.trailer { height: 500px; margin-top: 430px; } .box.trailer .boxcontent { text-align: center; } .intro { position: relative; float: left; width: 100%; } .trailerpreview { position: relative; width: 100%; height: auto; } .groupimage { position: absolute; top: -460px; left: 0px; width: 100%; text-align: center; } .groupimage img { width: 500px; } .box.homescreenshots, .box.homelatestnews, .box.twittertimeline, .box.newsletter { position: relative; top: 0px; left: 0px; width: 100%; height: auto; } .box.homelatestnews, .box.newsletter { margin-top: 30px; } .box.homescreenshots .boxcontent { text-align: center; } .box.twittertimeline .boxcontent { padding: 10px; text-align: center; } .box.twittertimeline { top: -80px; margin-bottom: -80px; } .box.homescreenshots img { position: relative; float: none; width: 210px; margin: 0 10px 4px 0; } .headlines { width: 100%; height: auto; } .headlinesmore { position: relative; top: 20px; height: auto; margin: 0px 0 30px 0; } .newschest { right: 20px; bottom: -70px; } .newschest img { width: 140px; } /******************************************************************** * About ********************************************************************/ .box.aboutgame, .box.aboutstory { position: relative; top: 0px; left: 0px; height: auto; width: 100%; } .box.aboutstory { margin-top: 30px; } .aboutimage { float: left; top: 0; width: auto; } .abouttext { float: none; width: 100%; border: none; padding: 0px; margin-top: 10px; } .aboutimage, .abouttext { height: auto; } .aboutimage img { float: left; padding: 0; margin: 10px 10px 5px 0; } .characters { height: 230px; } .charthumb { width: 32%; height: 180px; } .charthumb.left { left: 0%; } .charthumb.middle { left: 34%; } .charthumb.right { right: 0%; } .damion { background: url(../images/character_tab_damion.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .layne { background: url(../images/character_tab_layne.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .ashly { background: url(../images/character_tab_ashly.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .damion.active, .damion:hover { background: url(../images/character_tab_damion_selected.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .layne.active, .layne:hover { background: url(../images/character_tab_layne_selected.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .ashly.active, .ashly:hover { background: url(../images/character_tab_ashly_selected.200.png) no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .boxcontent.profile { height: auto; overflow: hidden; } .profileinner { width: 95%; } .pdamion, .playne, .pashly { width: 100%; padding-top: 660px; } .imgdamion, .imglayne, .imgashly { top: 0px; } .imgdamion.active, .imglayne.active, .imgashly.active { top: 0px; right: 0px; width: 100%; text-align: center; } /******************************************************************** * Media ********************************************************************/ .box.media { margin-bottom: 30px; } .media.char { display: none; } .media.screenshots, .media.videos { width: 100%; min-height: 700px; } .media.video { height: auto; } .media.video img { width: 320px; } .media.video .trailerplay { width: 120px; height: 120px; background: url(../images/video_play.png) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .media.video .trailerplay:hover { width: 120px; height: 120px; background: url(../images/video_play_over.png) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } /******************************************************************** * News ********************************************************************/ .commentlink { display:none; } .newspreview { width: 180px; height: 180px; } .newspreview img { width: 160px; height: 160px; } .newsteaser { position: relative; float: none; display: block; width: 100%; height: auto; min-height: 140px; } /******************************************************************** * System ********************************************************************/ .box.systemmenu { display: none; } .box.systemmenu.overview { display: block; max-width: 100%; width: 100%; } .box.systemarticle { display: block; position: relative; max-width: 100%; width: 100%; } .box.systemarticle.overview { display: none; } .backtosystem { display: block } /******************************************************************** * System / Ranking (coming soon placeholders) ********************************************************************/ .box.system { height: auto; } .box.system .boxcontent h1 { font-size: 64px; } /******************************************************************** * Footer ********************************************************************/ .footer img { margin: 10px 30px 20px 30px; } .footerlegal img { margin: 0; padding: 0; } /******************************************************************** * Offline ********************************************************************/ .offline img { width: 80%; } .offlinesocials img { width: auto; } /******************************************************************** * 404 - Page not found ********************************************************************/ .box.pagenotfound { margin-bottom: 30px; } /******************************************************************** * Back to top link ********************************************************************/ .cd-container { max-width: 480px; } .cd-top.cd-is-visible, .cd-top { display: none; }