@font-face {
  font-family: "SketchHeavy Regular";
  src: url("fonts/SketchHeavy Regular.eot"); /* IE9*/
  src: url("fonts/SketchHeavy Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/SketchHeavy Regular.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/SketchHeavy Regular.woff") format("woff"), /* chrome、firefox */
  url("fonts/SketchHeavy Regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/SketchHeavy Regular.svg#SketchHeavy Regular") format("svg"); /* iOS 4.1- */
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

/* Container holding the image and the text */
.text-image-container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.text-image-left {
  position: relative;
  padding-left: 25%;
  transform: translate(0%, -300%);
  text-align: left;
  font-size: 24px;
  text-outline: #000;
}

/* Top left text */
.text-image-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.text-image-top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.text-image-bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.text-image-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Conteneur */
.BlackContainer {
	width: 100%;
	max-width: 1920px;
	min-width: 960px;
	background-color: #000;
	margin: 0 auto;
}


.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


	
/* Image Style full width */
.ImageWrapper {
	width: 100%;
	height: auto;
}


/* ----- Text ----- */

/* Page title orange */
.TextTitle {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #000000;
	padding: 18px;
	text-align: center;
	margin-top: 1%;
	margin-right: 0%;
}


.TextCenter {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #000000;
	padding: 18px;
	text-align: center;
	/*margin-left: 33%;
	margin-right: 33%;*/
}

.TextColor {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #000000;
	padding: 12px;
	text-align: center;
	font-weight: lighter;
}

/* Text style */
.TextContent {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-weight: normal;
	font-size: 14px;
	color: #999999;
}

/* Black Text */
.BlackText {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-weight: normal;
	font-size: 18px;
	color: #000;
}

/* centered */
.div-center {
	position:relative;
	bottom: 15%;
	left: 50%;
}

/* button-scale */
.button-scale {
	transform:scale(0.9,0.9);
}

.button-scale:hover {
	transform:scale(1,1);
}

/* ---------- */

/* Back to top */
#back2Top {
	width: 64px;
	height: 64px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    position: fixed;
    text-align: center;
    text-decoration: none;
	right: 5%;
	bottom: 5%;
	-moz-transform: scale(0.9);
}
#back2Top:hover {
	-moz-transform: scale(1);
}

/*Black div*/
.BlackDiv {
	background-color: #000000;
}


/*Responsive image*/
.ResponsiveImage {
	width: 100%;
	height: auto;
	position: relative;
}

/*Layered image*/
.LayeredImage {
	width: 100%;
	height: auto;
	position: absolute;
}


/*Responsive Youtube Video*/
.video-responsive { 
	overflow:hidden; 
	padding-bottom:56.25%; 
	position:relative; 
	height:0;
}

.video-responsive iframe {
	left:0; 
	top:0; 
	height:100%;
	width:100%;
	position:absolute;
	pointer-events:none;
}

/*Steam button*/
.steam-button { 
  position: absolute;
  top: 25%;
  right: 25%;
  font-family: 'SketchHeavy Regular';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  outline: #FFF;
  outline-style: solid;
  outline-width:medium;
  background-color: #FFF;
  color: #FFF;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

.steam-image { 
  position: absolute;
  top: 1%;
  right: 33%;
  /*transform: scale(0.9,0.9);*/
}

.gog-image { 
  position: absolute;
  top: 1%;
  left: 33%;
  /*transform: scale(0.9,0.9);*/
}

.store-image { 
  position: absolute;
  bottom: 30%;
  left: 44%;
  /*transform: scale(0.9,0.9);*/
}

.steam-image:hover {
	/*transform: scale(1,1);*/
}

.steam-text { 
  position: absolute;
  bottom: 40%;
  right: 9%;
  color: #FFF;
}

.layer-container {
  position: relative;
  top: 0;
  left: 0;
}

.padded {
	padding: 10%;
}


/*-----END Responsive Youtube Video------*/

/*back button*/
#donatebutton {
  position: fixed;
  bottom: 40px;
  left: 60px;
  z-index: 99;
  font-family: 'SketchHeavy Regular';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  outline: #FFF;
  outline-style: solid;
  outline-width:thin;
  background-color: #000;
  color: white;
  cursor: pointer;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
  padding-right: 15px;
}

#donatebutton:hover {
  background-color: #FFF;
  color: black;
}

/* ----- Spacer ----- */
/*Spacer*/
.Spacer {
	padding: 5%;
	background-color: #000;	
}

.SpacerMedium {
	padding: 3%;
	background-color: #000;	
}

/*Small Spacer*/
.SpacerSmall {
	padding: 1%;
	background-color: #000;	
}

/*SpacerExtraSmall*/
.SpacerExtraSmall {
	padding: 0.5%;
	background-color: #000;	
}

/*Spacer White*/
.SpacerWhite {
	padding: 1%;
	background-color:#FFF;
}

/*Spacer White*/
.SpacerSmallWhite {
	padding: 0.5%;
	background-color:#FFF;
}

/*Spacer White*/
.SpacerPix {
	padding: 100px;
	background-color:#000;
}
/*Spacer White*/
.SpacerWhite {
	padding: 1%;
	background-color:#FFF;
}

/*WhiteLine*/
.WhiteLine {
	padding: 0.01%;
	background-color:#FFF;
}


/* ---------- TEXT ON TOP OF IMAGE ----------*/
/* Container holding the image and the text */
.text-image-container {
  position: absolute;
  text-align: center;
  color: white;
}

/* left text */
.text-image-left {
  position: relative;
  bottom: 50%;
  left: 0%;

/* Bottom left text */
.text-image-bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.text-image-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.text-image-top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.text-image-bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.text-image-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  /*transform: translate(-50%, -50%);*/
}



/* ------------- HOVER IMAGE STYLE ----------------- */

/*Image view container*/
.ImageViewContainer {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #FFFFFF;
}

.view {
	width: 100%;
	height: auto;
	overflow: visible;
	text-align: center;
	cursor: default;
}

.view .mask, .view .content, .view .TextMask {
	width: 100%;
	height: auto;
	position: absolute;
	overflow: visible;
	top: 0px;
	left: 0px;
}

/*Title background*/
.view .mask {
	opacity: 1;
	background-color: rgba(0,0,0,1);
}

/*Text background*/
.view .TextMask {
	opacity: 1;
	background-color: rgba(0,0,0,0); /*---DISABLED----*/
	max-height: 100%;
	margin-top: 10%;
	width: 100%;
}

/*Image*/
.view img {
	width: 100%;
	height: auto;
    display: block;
    position: relative;
}

/*Text Title*/
.view h2 {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	color: #fff;
	text-align: center;
	font-size: 18px;
	padding: 10px;
	background: rgba(0, 0, 0, 1);
	margin: 40px 0 0 0;
	opacity: 1;
	margin-top: 0px;
}

/*Text Description*/
.view p {
	font-family: 'SketchHeavy Regular';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 18px;
	color: #FFF;
	padding: 1%;
	text-align: left;
	margin-left: 10%;
	opacity: 1;
}

/* ----- END Hover image style ----- */


/*Scale font size*/
@media all and (max-width: 1920px){
    .view p { font-size: 13px;}
	.view h2 { font-size: 14px;}
	.view .TextMask { margin-top: 6%;}

@media all and (max-width: 1440px){
    .view p { font-size: 12px;}
	.view h2 { font-size: 13px;}
	.view .TextMask { margin-top: 8%;}
}

@media all and (max-width: 1280px){
    .view p {
	font-size: 18px;
}
	.view h2 {
	font-size: 18px;
}
	.view .TextMask { margin-top: 10%;}
}

@media all and (max-width: 1024px){
    .view p { font-size: 10px;}
	.view h2 { font-size: 11px;}
	.view .TextMask { margin-top: 11%;}
}