/********************************************************************
 * General
********************************************************************/

@font-face {
    font-family: passionOneBold;
    src: url(passionone-bold.ttf);
}

@font-face {
    font-family: passionOneRegular;
    src: url(passionone-regular.ttf);
    font-weight: 100;
}

html {
	overflow-x: hidden;
}

body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	font-family: passionOneBold;
	color: #fff;
	font-weight: 100;
}

html, body {
	/*height: 100%;*/
}

h1, h2, h3 {
	font-weight: 100;
}

#wrapper {
	position: relative;
    margin: 0 auto;
    height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
}

/********************************************************************
 * Header
********************************************************************/

.header {
	width: 1480px;
	height: 300px;
	margin: 0 auto;
}

.logo {
	position: relative;
	float: left;
	top: 20px;
	left: 100px;
	max-width: 520px;
	z-index: 1;
}

.logo img {
}

.socialtop {
	position: relative;
	float: right;
	top: 190px;
	right: 100px;
	width: auto;
	height: auto;
	padding: 5px;
	z-index: 2;
}

.fb-like {
	float: left;
}

.twitter-share-button {
	float: left;
	margin-left: 30px;
}

.socials_google {
	float: left;
	margin-left: 30px;
}

.menu {
	position: relative;
	top: 190px;
	left: 0px;
	width: 100%;
	height: 115px;
	font-family: passionOneRegular;
	color: #ffffff;
	font-size: 32px;
}

.menu ul {
	position: relative;
	float: left;
	width: 100%;
	padding-top: 18px;
	padding-left: 100px;
	display:block;
	z-index: 2;
}

.menu ul li {
	list-style:none;
	float: left;
	width: auto;
	position:relative;
	padding-right: 30px;
}

.menu ul li a {
	color: #ffffff;
	text-decoration: none;
	padding: 7px 10px 7px 10px;
	border-left: solid transparent 2px;
	border-right: solid transparent 2px;
	-webkit-transition:all 0.5 ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition: all 0.5s ease;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.menu ul li a:hover {
	background: rgba(44,54,75,0.6);
	border-left: solid #000 2px;
	border-right: solid #000 2px;
	padding: 7px 10px 7px 10px;
}

.menu ul li.active a {
	background: rgba(44,54,75,0.6);
	border-left: solid #000 2px;
	border-right: solid #000 2px;
	padding: 7px 10px 7px 10px;
}

.menuleft {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 290px;
	height: 115px;
	background: url(../images/menu_left.png) no-repeat;
}

.menucenter {
	position: absolute;
	top: 0px;
	left: 290px;
	width: 900px;
	height: 115px;
	background: url(../images/menu_center.png) repeat-x;
}


.menuright {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 290px;
	height: 115px;
	background: url(../images/menu_right.png) no-repeat;
}

.menuicon {
	display: none;
}

/********************************************************************
 * Socials Side
********************************************************************/

.socialbar {
	position:fixed;
	right: 0px;
	top: 300px;
	top: calc(50% - 158px);
	top: -moz-calc(50% - 158px); /* Firefox */
	top: -webkit-calc(50% - 158px); /* WebKit */
	top: -o-calc(50% - 158px); /* Opera */
	width:60px;
	height:317px;
	z-index: 9999;
	background:url(../images/socials_side_bg.png) no-repeat;
}

.facebook, .twitter, .youtube, .discord, .forum, .presskit {
	float:left;
	width:48px;
	height:48px;
	margin:2px 6px;
	border-radius:50%;
	background:url(../images/socials_side_new.png) no-repeat;
	-webkit-transition:opacity 0.5 ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
	opacity: 0.65;
}

.facebook:hover, .twitter:hover, .youtube:hover, .discord:hover, .forum:hover, .presskit:hover {
	opacity: 1.0;
}

.facebook {
	margin-top: 5px;
	background-position:0 0px;
}

.twitter {
	background-position:0 -48px;
}

.youtube {
	background-position:0 -96px;
}

.discord {
	background-position:0 -144px;
}

.forum {
	background-position:0 -192px;
}

.presskit {
	background-position:0 -240px;
}


/********************************************************************
 * Main
********************************************************************/

.mainframe {
	position: relative;
	width: 1280px;
	margin: 0 auto;
}

.content {
	margin: 20px;
}

.box {
	margin-bottom: 10px;
}

.boxheader {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 36px;
	background: rgba(255,255,255,0.8);
}

.boxheader h1 {
	font-family: passionOneRegular;
	font-size: 26px;
	color: #2f6184;
	text-transform: uppercase;
	padding: 5px 0 0 10px;
	margin: 0;
}

.boxbody {
	position: relative;
	top: 6px;
	width: 100%;
	height: 95%;
	height: calc(100% - 42px);
	height: -moz-calc(100% - 42px); /* Firefox */
	height: -webkit-calc(100% - 42px); /* WebKit */
	height: -o-calc(100% - 42px); /* Opera */
	background: rgba(0,0,0,0.4);
}

.boxcontent {
	padding: 10px;
	overflow: hidden;
	font-family: passionOneRegular;
	font-size: 20px;
	color: #fff;
	line-height: 1.2em;
	letter-spacing: 0.6px;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.boxcontent p {
	margin-top: 0px;
	margin-bottom: 16px;
}

.boxcontent a {
	text-decoration: none;
	color: #2c364b;
	text-shadow: none;
}

.boxcontent a:hover {
	text-decoration: underline;
}

.boxcontent h2 {
	font-size: 26px;
	color: #2c364b;
	text-transform: none;
	margin: 5px 0 5px 0;
	text-shadow: none;
}

/********************************************************************
 * Home
********************************************************************/

.box.trailer {
	width: 100%;
	height: 500px;
}

.intro {
	position: relative;
	float: left;
	width: 50%;
}

.trailerpreview {
	width: 600px;
	height: 338px;
	margin: 0;
	padding: 0;
}

.trailerimage {
	position: relative;
	top: 0px;
	left: 0px;
}

.trailerimage img {
	border: solid #fff 1px;
}

.trailerplay {
	position: absolute;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	margin: auto;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: url(../images/video_play.png) no-repeat center center;
	background-size: contain;
	-webkit-transition:all 0.5 ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.trailerplay:hover {
	background: url(../images/video_play_over.png) no-repeat center center;
	background-size: contain;
	-webkit-transition:all 0.5 ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.groupimage {
	position: absolute;
	top: -60px;
	right: -20px;
}

.homerow2, .homerow3 {
	position: relative;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 100%;
}

.homerow2 {
	margin-bottom: 70px;
}

.homerow3 {
	/*height: 600px;*/
}

.box.homescreenshots {
	position: relative;
	top: 0px;
	left: 0px;
	height: 400px;
	width: 49%;
	width: calc(50% - 10px);
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
	overflow: hidden; /*legacy fix*/
}

.box.homescreenshots .boxcontent {
	margin-left: 2px;
}

.box.homescreenshots img {
	float: left;
	width: 188px;
	margin: 0 6px 6px 0;
	border: solid #fff 1px;
	-webkit-transition: opacity 0.5 ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.box.homescreenshots img:hover {
	border: solid #000 1px;
	opacity: 0.7;
	cursor: zoom-in;
}

.box.homelatestnews {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 400px;
	width: 49%;
	width: calc(50% - 10px);
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
}

.headlines {
	width: 100%;
	height: 240px;
}

.headlines table {
	width: 100%;
	border-collapse: collapse;
}

.headlines table tr {
	border-bottom: #fff solid 1px;
}

.headlines table td {
	vertical-align: middle;
}

.headlines table img {
	vertical-align: middle;
	margin-top: 8px;
	margin-bottom: 8px;
}

.headlinesmore {
	position: absolute;
	bottom: 10px;
	height: 30px;
}

.headlinesmore img {
	float: left;
	margin-right: 10px;
}

.headlinesmore a {
	position: relative;
	top: 3px;
}

.newschest {
	position: absolute;
	right: 20px;
	bottom: -46px;
}

.box.newsletter {
	position: relative;
	top: 0px;
	left: 0px;
	width: 54%;
	width: calc(55% - 10px);
	width: -moz-calc(55% - 10px);
	width: -webkit-calc(55% - 10px);
	width: -o-calc(55% - 10px);
	height: auto;
}

.newslettertable td {
	color: #2c364b;
	text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}

.newsletterresponse {
	min-height: 50px;
	margin-top: 10px;
	max-width: 58%;
}

.airship {
	position: relative;
	float: right;
	top: -100px;
}

.box.twittertimeline {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 44%;
	width: calc(45% - 10px);
	width: -moz-calc(45% - 10px);
	width: -webkit-calc(45% - 10px);
	width: -o-calc(45% - 10px);
	height: auto;
}

.box.twitertimeline .boxcontent {
	text-align: center;
}



/********************************************************************
 * About
********************************************************************/

.aboutrow1 {
	position: relative;
	width: 100%;
}

.box.aboutgame {
	position: relative;
	top: 0px;
	left: 0px;
	height: 400px;
	width: 49%;
	width: calc(50% - 10px);
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
}

.box.aboutstory {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 400px;
	width: 49%;
	width: calc(50% - 10px);
	width: -moz-calc(50% - 10px);
	width: -webkit-calc(50% - 10px);
	width: -o-calc(50% - 10px);
}

.aboutimage {
	position: relative;
	float: left;
	width: 25%;
}

.abouttext {
	position: relative;
	float: right;
	width: 70%;
	border-left: solid 2px #fff;
	padding-left: 16px;
}

.aboutimage, .abouttext {
	height: 330px;
}

.aboutimage img {
	display: block;
	margin: auto;
	padding-top: 100px;
	padding-bottom: 100px;
}

.characters {
	position: relative;
	width: 100%;
	height: 270px;
	margin-top: 30px;
}

.box.aboutcharacters {
	width: 100%;
}

.charthumb {
	position: absolute;
	top: 44px;
	width: 400px;
	height: 226px;
	background: rgba(0,0,0,0.2);
}

.charthumb.left {
	left: 0px;
}

.charthumb.middle {
	left: 420px;
}

.charthumb.right {
	right: 0px;
}

.damion, .layne, .ashly {
	width: 100%;
	height: 100%;
}

.damion {
	background: url(../images/character_tab_damion.png) no-repeat right top;
}

.layne {
	background: url(../images/character_tab_layne.png) no-repeat right top;
}

.ashly {
	background: url(../images/character_tab_ashly.png) no-repeat right top;
}

.damion.active, .damion:hover {
	background: url(../images/character_tab_damion_selected.png) no-repeat right top;
}

.layne.active, .layne:hover {
	background: url(../images/character_tab_layne_selected.png) no-repeat right top;
}

.ashly.active, .ashly:hover {
	background: url(../images/character_tab_ashly_selected.png) no-repeat right top;
}

.damion:hover, .layne:hover, .ashly:hover {
	webkit-transition:all 0.5 ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.boxcontent.profile {
	position: relative;
	width: 100%;
	height: 670px;
	margin-top: 30px;
	margin-bottom: 50px;
	background: rgba(0,0,0,0.2);
	overflow: visible;
	padding: 0px;
}

.boxcontent.profile h1, h2 {
	font-family: passionOneRegular;
	color: #2c364b;
	text-transform: uppercase;
	margin: 0;
}

.boxcontent.profile h1 {
	font-size: 32px;
	padding: 10px 0 20px 0;
	text-shadow: none;
}

.boxcontent.profile h2 {
	font-size: 26px;
	padding: 10px 0 10px 0;
}

.boxcontent.profile hr {
	border: white solid 1px;
}

.boxcontent.profile ul {
	list-style-type: none;
	margin: 0;
	padding-left: 15px;
}

.boxcontent.profile li {
	background-image: url(../images/character_bullet.png);
	background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 32px; 
}

.pdamion, .playne, .pashly {
	width: 50%;
	padding: 10px;
}

.pdamion {
	display: block;
}

.playne, .pashly {
	display: none;
}

.imgdamion, .imglayne, .imgashly {
	position: absolute;
	right: -1000px;
	top: -20px;
	overflow: hidden;
	visibility: hidden;
	z-index: 9990;
}

.imgdamion.active, .imglayne.active, .imgashly.active {
	right: -20px;
	visibility: visible;
	-webkit-transition: right 0.5 ease-in-out;
	-moz-transition: right 0.5s ease-in-out;
	-o-transition: right 0.5s ease-in-out;
	transition: right 0.5s ease-in-out;
}


/********************************************************************
 * Media
********************************************************************/

.box.media {
	width: 100%;
	height: auto;
	min-height: 800px;
}

.box.media a {
	text-decoration: none;
}

.box.media .boxheader {
	background: none;
}

.box.media .boxheaderclear {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: calc(100% - 320px);
	width: -moz-calc(100% - 320px);
	width: -webkit-calc(100% - 320px);
	width: -o-calc(100% - 320px);

	height: 36px;
	margin-left: 10px;
	background: rgba(255,255,255,0.8);
}

.mediatab1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 168px;
	height: 36px;
	opacity: 0.8;
	background: url(../images/mediatab1.jpg) no-repeat top left;
}

.mediatab1.active {
	background: url(../images/mediatab1_active.jpg) no-repeat top left;
}

.mediatab2 {
	position: absolute;
	left: 168px;
	top: 0px;
	width: 142px;
	height: 36px;
	opacity: 0.8;
	background: url(../images/mediatab2.jpg) no-repeat top left;
}

.mediatab2.active {
	background: url(../images/mediatab2_active.jpg) no-repeat top left;
}

.mediatab1 h1, .mediatab2 h1 {
	color: #2f6184;
}

.mediatab1.active h1, .mediatab2.active h1 {
	color: #fff;
}

.mediatab1.active h1:hover, .mediatab2.active:hover h1 {
	color: #fff;
}

.mediatab1 h1:hover, .mediatab2 h1:hover {
	color: #2c364b;
}

.media.char {
	position: absolute;
	right: 20px;
	top: 50px;
}

.media.screenshots, .media.videos {
	width: 70%;
	min-height: 700px;
}

.media.videos {
	display: none;
}

.media.screenshot {
	position: relative;
	float: left;
	margin: 10px 20px 0px 0;
}

.media.thumb {
	position: absolute;
	left: 5px;
	bottom: 5px;
	opacity: 1.0;
}

.media.thumb:hover {
	opacity: 0.7;
	-webkit-transition:all 0.5 ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition: all 0.5s ease;
}

.media.thumb a:hover {
	cursor: zoom-in;
}

.media.video {
	position: relative;
	height: 262px;
	float: left;
	margin: 0px 20px 20px 0;
}

.videothumb {
	position: relative;
}

.media.video img {
	width: 400px;
	border: solid 1px #fff;
}

.media.youtubesub {
	position: relative;
	margin-top: 20px;
	width: 300px;
	height: 100px;
	padding: 10px;
	color: #2c364b;
	background: rgba(255,255,255,0.4);
	border: #2c364b solid 1px;
	text-shadow: none;
}

.media.video .trailerplay {
	width: 140px;
	height: 140px;
	background: url(../images/video_play.png) no-repeat center center;
	background-size: contain;
}

.media.video .trailerplay:hover {
	width: 140px;
	height: 140px;
	background: url(../images/video_play_over.png) no-repeat center center;
	background-size: contain;
}

/********************************************************************
 * News
********************************************************************/

.nowrapper {
	white-space: nowrap;
  	overflow: hidden;
	text-overflow: ellipsis;
}

.box.news {
	width: 100%;
	margin-bottom: 30px;
}

.box.news .boxheader a {
	text-decoration: none;
	color: #2f6184;
}

.box.news .boxheader a:hover {
	text-decoration: underline;
}

.box.news .boxcontent .newsimage {
	margin: 3px;
	border: solid 1px #fff;
}

.box.news .boxcontent .newsimage:hover{
	border: solid 1px #000;
	cursor: zoom-in;
}

.commentlink {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 5px 10px 0 0;
	font-family: passionOneRegular;
	font-size: 26px;
}

.commentlink:hover {
	text-decoration: underline;
}

.newsshareoutter {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 400px;
	height: 40px;
}

.newssharecorner {
	position: relative;
	left: 0px;
	top: 0px;
	width: 0; 
	height: 0; 
	border-top: 1px solid #2c364b;
	border-bottom: 39px solid transparent;
	border-right: 30px solid #2c364b; 
}

.newsshare {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 370px;
	height: 40px;
	background-color: #2c364b;
}

.newstext {
	position: absolute;
	top: 10px;
	left: 10px;
	line-height: 1em;
}

.newstweet {
	position: absolute;
	top: 10px;
	left: 80px;
}

.newssharefb {
	position: absolute;
	top: 6px;
	left: 240px;
}

.newsinner {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
}

.newspreview {
	position: relative;
	float: left;
	width: 240px;
	height: 240px;
	margin: 0 20px 20px 0;
	background: url(../images/news_frame.png);
	background-size: cover;
}

.newspreview img {
	margin: 9px;
	width: 220px;
	height: 220px;
	border: 1px solid #000;
}

.newsteaser {
	position: relative;
	top: 0px;
	right: 0px;
	float: none;
	display: block;
	width: 100%;
	height: auto;
	min-height: 200px;
}

.newsteaser h2, .newsdate h2 {
	margin-bottom: 20px;
}

.readmore {
	position: relative;
	margin-top: 10px;
	width: 100%;
	height: auto;
	text-align: right;
}

.box.comments .boxbody {
	background: rgba(0,0,0,0.5);
}

.box.comments {
	margin-bottom: 30px;
}

.boxheader.loadnews {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 30px;
}

.boxheader.loadnews a, .boxheader.loadnews h1 {
	text-decoration: none;
	color: #2c364b;
}

.boxheader.loadnews a:hover {
	text-decoration: underline;
}

.newsclear {
	content: '';
	display: block;
	clear: both;
}

.box.newsletter.newsblog {
	width: 100%;
	margin-bottom: 30px;
}

.box.newsletter.newsblog .details {
	display: inline;
	color: #2c364b;
	text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}

.box.newsletter.newsblog .details span {
	padding: 0 10px 0 0;
}

.box.newsletter.newsblog .newsletterresponse {
	max-width: 100%;
	min-height: 0px;
}

/********************************************************************
 * System
********************************************************************/

.box.systemmenu {
	position: relative;
	top: 0px;
	left: 0px;
	width: 24%;
	width: calc(25% - 10px);
	width: -moz-calc(25% - 10px);
	width: -webkit-calc(25% - 10px);
	width: -o-calc(25% - 10px);
	height: auto;
}

.box.systemmenu .boxheader img {
	float: left;
	margin: 7px 10px 7px 10px;
}

.box.systemmenu .boxcontent {
	padding: 0;
}

.menubox {
	max-width: 100%;
	width: auto;
	height: auto;
}

.menubox .menuheader {
	height: 32px;
	margin: 0;
	padding: 0;
	line-height: 1em;
}

.menubox .menuheader h3 {
	font-size: 20px;
	line-height: 1em;
	margin: 0;
	padding: 6px 0 0 10px;
}

.menubox .menuheader img {
	float: left;
	margin: 4px 8px 4px 10px;

}

.menubox .boxcontent {
	margin: 10px 0 10px 50px;
	width: auto;
}

.menubox .boxcontent ul {
	margin: 0;
	padding: 0;
}

.box.systemarticle {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 74%;
	width: calc(75% - 10px);
	width: -moz-calc(75% - 10px);
	width: -webkit-calc(75% - 10px);
	width: -o-calc(75% - 10px);
	height: auto;
}

.backtosystem {
	display: none;
}

/********************************************************************
 * Newsletter page
********************************************************************/

.box.newsletterfull .airship {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	text-align: center;
}

.box.newsletterfull img {
	margin: 20px 0 0 0;
}

/********************************************************************
 * System / Ranking (coming soon placeholders)
********************************************************************/

.box.system {
	width: 100%;
	height: 850px;
	margin-bottom: 40px;
}

.box.system img {
	margin: 20px 0 20px;
}

.box.system .boxcontent h1 {
	font-size: 72px;
}

.box.system .boxcontent {
	text-align: center;
}

/********************************************************************
 * Footer
********************************************************************/

.footer {
	position: relative;
	width: 100%;
	background: rgba(255,255,255,1);
}

.footerinner {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.footer img {
	margin: 10px 30px 20px 30px;
}

.footer p {
	font-family: helvetica;
	font-size: 11px;
	color: #747375;
}

.footer p a {
	color: #000;
	text-decoration: none;
}

.footer p a:hover {
	text-decoration: underline;
}

.footerlegal img {
	margin: 0;
	padding: 0;
}

/********************************************************************
 * Offline
********************************************************************/

.offline {
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: 50px;
}

.offline img {
	margin-bottom: 40px;
}

.offlinesocials {
	margin-top: 30px;
}

.offlinesocials img {
	margin: 0 10px 0 10px;
}

/********************************************************************
 * 404 - Page not found
********************************************************************/

.box.pagenotfound .boxcontent {
	text-align: center;
}

.box.pagenotfound .boxcontent p {
	text-align: left;
}

.box.pagenotfound img {
	margin-top: 20px;
}


/********************************************************************
 * Back to top link
********************************************************************/

.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1;
}

.cd-top.cd-fade-out {
  opacity: .5;
}

.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.cd-container::after {
  content: '';
  display: table;
  clear: both;
}

.cd-top {
  display: inline-block;
  height: 112px;
  width: 190px;
  position: fixed;
  bottom: -112px;
  right: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../images/top.png) no-repeat;
  visibility: hidden;
  z-index: 9999;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .7s, bottom 0.7s;
  -moz-transition: opacity .3s 0s, visibility 0s .7s, bottom 0.7s;
  transition: opacity .3s 0s, visibility 0s .7s, bottom 0.7s;
}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .7s 0s, visibility 0s 0s, bottom 0.7s;
  -moz-transition: opacity .7s 0s, visibility 0s 0s, bottom 0.7s;
  transition: opacity .7s 0s, visibility 0s 0s, bottom 0.7s;
}

.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1;
  bottom: 0px;
}

.cd-top.cd-fade-out {
  opacity: .5;
}