html, body
{
	width: 100%;
	height: 100%;
	background: #000;
	font-family: 'verdana';
	line-height: 1.4em;
	color: #fff;
}

.social-icons
{
	position: fixed;
	top: 20px;
	right: 20px;
	width: 80px;
	float: left;
	z-index: 9999;
}

.dodgeroll-social-icon
{
	width: 88px;
	height: 16px;
	float: left;
	margin: 0px 0px 10px 0px;
	background: url("../images/social.png");
	background-position: 0px -64px;
}

.devolver-social-icon
{
	width: 88px;
	height: 16px;
	float: left;
	margin: 20px 0px 10px 0px;
	background: url("../images/social.png");
	background-position: 0px -80px;
}

.buystuff-icon
{
	background: url("../images/shotgun-money2.gif");
	width: 75px;
	height: 81px;
	float: right;
	margin-bottom: 10px;
	padding-right: 0px;
	background-repeat:no-repeat;
	background-size: 100%;

	image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
    image-rendering:pixelated;                 /* Chrome         */
    width
}

.gungeoneers-icon
{
	background: url("../images/gungeoneertalkicon.gif");
	width: 78px;
	height: 81px;
	float: right;
	margin-bottom: 10px;
	padding-right: 0px;
	background-repeat:no-repeat;
	background-size: 100%;

	image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
    image-rendering:pixelated;                 /* Chrome         */
    width
}

.social-twitter-icon
{
	background: url("../images/social.png");
	width: 64px;
	height: 64px;
	float: right;
	margin-bottom: 10px;
	padding-right: 0px;
}

.social-facebook-icon
{
	background: url("../images/social.png");
	background-position: -80px 0px;
	width: 64px;
	height: 64px;
	float: right;
	margin-bottom: 10px;
}

.social-wiki-icon
{
	background: url("../images/social.png");
	background-position: -80px 0px;
	width: 64px;
	height: 64px;
	float: right;
	margin-bottom: 10px;
}

.social-forum-icon
{
	background: url("../images/social.png");
	background-position: -160px 0px;
	width: 64px;
	height: 64px;
	float: right;
	margin-bottom: 10px;
}

.social-twitter-icon:hover, .gungeoneers-icon:hover, .social-wiki-icon:hover, .social-forum-icon:hover, .buystuff-icon:hover
{
	margin-right: 16px;
}


.wrapper
{
	width: 900px;
	margin: 0px auto;
}

.banner
{
	position: relative;
	width: 100%;
	height: 800px;
	height: 100vh;
	background: url("../images/banner.jpg") no-repeat center;
	background-size: cover;
	float: left;
	border-bottom: 1px solid #000;
	text-align: center;
}

.banner .wrapper
{
	width: 940px;
}

.logo
{
	width: 658px;
	position: absolute;
	text-align: center;
	bottom: 20px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right:0; /* Aligns horizontal center */
}

.platforms
{
	width: 940px;
	position: absolute;
	bottom: 10px;
	text-align: center;
	display:none;
}


.buystuff-header
{
	font-family: 'Fredoka One', cursive;
	color: #000000;
	font-size: 48px;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 40px;
}


.buystuff
{
	width: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;

	background: rgba(255,59,173,1);
background: -moz-linear-gradient(left, rgba(255,59,173,1) 0%, rgba(255,62,62,1) 86%, rgba(255,62,62,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,59,173,1)), color-stop(86%, rgba(255,62,62,1)), color-stop(100%, rgba(255,62,62,1)));
background: -webkit-linear-gradient(left, rgba(255,59,173,1) 0%, rgba(255,62,62,1) 86%, rgba(255,62,62,1) 100%);
background: -o-linear-gradient(left, rgba(255,59,173,1) 0%, rgba(255,62,62,1) 86%, rgba(255,62,62,1) 100%);
background: -ms-linear-gradient(left, rgba(255,59,173,1) 0%, rgba(255,62,62,1) 86%, rgba(255,62,62,1) 100%);
background: linear-gradient(to right, rgba(255,59,173,1) 0%, rgba(255,62,62,1) 86%, rgba(255,62,62,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3bad', endColorstr='#ff3e3e', GradientType=1 );

	-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

}

.merchspot{
		width: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
		width: 100%;
	height: 350px;
	background: url("../images/merchbg.jpg") no-repeat 0 0;

	display: block;

		-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.merchspot img:hover {
	margin-bottom: 10px;
}

.buystuff img {
	text-align: center;
	margin: 0 auto;
}

.shops-row
{
	
	width: 100%;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 8px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;

	background-color: #333333;

	background: rgba(76,76,76,1);
background: -moz-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(71,71,71,1) 0%, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 49%, rgba(76,76,76,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(0%, rgba(71,71,71,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(49%, rgba(17,17,17,1)), color-stop(100%, rgba(76,76,76,1)));
background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(71,71,71,1) 0%, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 49%, rgba(76,76,76,1) 100%);
background: -o-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(71,71,71,1) 0%, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 49%, rgba(76,76,76,1) 100%);
background: -ms-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(71,71,71,1) 0%, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 49%, rgba(76,76,76,1) 100%);
background: linear-gradient(to right, rgba(76,76,76,1) 0%, rgba(71,71,71,1) 0%, rgba(102,102,102,1) 0%, rgba(17,17,17,1) 49%, rgba(76,76,76,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#4c4c4c', GradientType=1 );

	   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}




.shopbuttonboxer{

}

.shop-button
{
	height: 100px;
	width: 216px;
	/*margin-bottom: 5px;*/
	float: left;
	display: block;
	background: url("../images/shops.png");	
}



.ps4-button{
	background-position: 0px 0px;
}

.humble-button
{
	background-position: 216px 0px;
}

.gog-button
{
	background-position: 432px 0px;
}

.steam-button
{
	background-position: 648px 0px;
}

.buttonpad 
{
margin-right: 11px

}
.ps4-button:hover{
	background-position: 0px -100px;
}
.humble-button:hover{
	background-position: 216px -100px;
}
.gog-button:hover{
	background-position: 432px -100px;
}
.steam-button:hover{
	background-position: 648px -100px;
}

.media
{
	width: 100%;
	float: left;
	overflow: hidden;
	position: relative;

	background: #000 url("../images/screenshots/screenshot6.png") no-repeat;
	background-attachment: fixed;
	background-position: center; 
	background-size: cover;
}

.media .wrapper
{
	position: relative;
	z-index: 1;
}

.video
{
	width: 100%;
	float: left;
	display: inline;
	margin-top: 40px;
}

.screenshots
{
	width: 100%;
	float: left;
	margin-top: 40px;
	margin-bottom: 40px;
}

.screenshots img
{
	width: 290px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	margin: 0;
	margin-right: 5px;
}

.screenshots a:nth-child(3) img, .screenshots a:last-child img
{
	margin-right: 0;
}

.content
{
	width: 100%;
	font-size: 1.2em;
	color: #ffffff;
	line-height: 1.6em;
	padding-top: 40px;
	padding-bottom: 40px;
	background: #000000;
	float: left;
	border-top: 1px solid #222222);
	border-bottom: 1px solid #222222);

	background-image: url("../images/lv-pattern-bg-web.png");
    background-repeat: repeat-both;
    text-shadow: 1px 1px 2px #000000;

}

.features
{
	width: 100%;
	float: left;
}

.feature
{
	width: 100%;
	float: left;
	margin-top: 40px;
	padding-top: 40px;
	border-top: 4px solid #4e4f5b;
}

.feature span
{
	width: 440px;
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
}

.feature h1
{
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
	font-size: 1.3em;
}

.feature img
{
	float: right;
	display: inline;
}

.right-freature img
{
	float: left;
}

.right-freature span
{
	float: right; 
}

.footer
{
	position: relative;
	width: 100%;
	height: 400px;
	float: left;
	overflow: hidden;
	text-align: center;
}

.footer-inner
{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	background: #000 url("../images/screenshots/beholster.jpg") no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}

.footer .wrapper { position: relative; margin-top: 140px; z-index: 1; }
.footer a { color: #fff; font-weight: bold; text-transform: uppercase; font-size: 1.4em; text-decoration: none; }
.footer a:hover  { color: #ff0000; }

@media (max-width: 920px) {

	.banner
	{
		height: 600px;
	}

	.banner .wrapper
	{
		width: 100%;
	}

	.banner .logo
	{
		width: 50%;
		left: 5%;
	}

	.platforms
	{
		width: 100%;
	}

	.wrapper
	{
		width: 95%;
	}

	.video
	{
		width: 100%;
	}

	.screenshots
	{
		width: 100%;
	}

	.screenshots img
	{
		width: calc(33% - 10px);
		margin-right: 8px;
	}

	.screenshots a:last-child img
	{
		margin-right: 0px;
	}

	.description
	{
		width: 100%;
	}

	.description, .features, .feature
	{
		width: 100%;
		float: left;
		overflow: hidden;
	}

	.feature span
	{
		float: left;
		width: 100%;
	}

	.feature .gif
	{
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 20px;
	}

	.feature img
	{
		float: none;
	}

	.media, .footer-inner
	{
		background-attachment: scroll;
	}

}

@media (max-width: 605px) {

	.guns
	{
		width: 100%;
	}

}



#circleG{
	width:67px;
	margin:auto;
}

.circleG{
	background-color:rgb(0,0,0);
	float:left;
	height:14px;
	margin-left:8px;
	width:14px;
	animation-name:bounce_circleG;
		-o-animation-name:bounce_circleG;
		-ms-animation-name:bounce_circleG;
		-webkit-animation-name:bounce_circleG;
		-moz-animation-name:bounce_circleG;
	animation-duration:1.6575s;
		-o-animation-duration:1.6575s;
		-ms-animation-duration:1.6575s;
		-webkit-animation-duration:1.6575s;
		-moz-animation-duration:1.6575s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	border-radius:9px;
		-o-border-radius:9px;
		-ms-border-radius:9px;
		-webkit-border-radius:9px;
		-moz-border-radius:9px;
}

#circleG_1{
	animation-delay:0.3295s;
		-o-animation-delay:0.3295s;
		-ms-animation-delay:0.3295s;
		-webkit-animation-delay:0.3295s;
		-moz-animation-delay:0.3295s;
}

#circleG_2{
	animation-delay:0.7755s;
		-o-animation-delay:0.7755s;
		-ms-animation-delay:0.7755s;
		-webkit-animation-delay:0.7755s;
		-moz-animation-delay:0.7755s;
}

#circleG_3{
	animation-delay:0.9985s;
		-o-animation-delay:0.9985s;
		-ms-animation-delay:0.9985s;
		-webkit-animation-delay:0.9985s;
		-moz-animation-delay:0.9985s;
}



@keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,59,177);
	}

	100%{}
}

@-o-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,59,177);
	}

	100%{}
}

@-ms-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,59,177);
	}

	100%{}
}

@-webkit-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,59,177);
	}

	100%{}
}

@-moz-keyframes bounce_circleG{
	0%{}

	50%{
		background-color:rgb(255,59,177);
	}

	100%{}
}




*, *:after, *:before{
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
}
body{
	margin: 0;
	font-family: "Open Sans",sans-serif;
}
.loader-wrap{
	//background: #333 url("back.png") repeat center center fixed;
	background-color: #000000;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 99999;
}
#circleG, .loader{
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	    -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
	width: 120px;
	height: 20px;
}
.loader:after{
	color: rgba(0,183,229,0.9);
	content: "Loading...";
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
	position: absolute;
	width: 120px;
	top: 40px;
	left: 5px;
	text-align: center;
}
[class*='box-']{
	display: inline-block;
	font-size: 15px;
	line-height: 20px;
	margin-right: 5px;
	height: 20px;
	width: 20px;
	border: 5px solid rgba(0,183,229,0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	box-shadow: 0 0 10px #2187e7;
	border-radius: 50%;
	-webkit-transform: scale(0.7);
	    -ms-transform: scale(0.7);
	        transform: scale(0.7);
	-webkit-animation: loader 1s infinite linear;
	        animation: loader 1s infinite linear;
}
[class*='box-']:last-child{
	margin-right: 0;
}
.box-1{
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}
.box-2{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.box-3{
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
}
.box-4{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.box-5{
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}
@-webkit-keyframes loader{
    0% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7) rotate(10deg);
                transform: scale(0.7) rotate(10deg);
        opacity: 0.1;
    }
}
@keyframes loader{
    0% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7) rotate(10deg);
                transform: scale(0.7) rotate(10deg);
        opacity: 0.1;
    }
}