html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

@font-face{
font-family: "Abel-Regular";
src:url(../fonts/Abel-Regular.ttf);
}

@font-face{
font-family: "BlackOpsOne-Regular";
src:url(../fonts/BlackOpsOne-Regular.ttf);
}


body{
width:100%;
text-align:center;
font-family: "Abel-Regular";
}

.navbar-default {
background-color: #0C0808;
border: none;
}

.navbar-inverse .navbar-nav>li>a {
color: #fff;
font-size:18px;
padding-top: 22px;
text-decoration: none;
}

.navbar-inverse .navbar-nav>li>a:hover {
color:yellow;
}

.banner{
background:url("../images/bg.jpg" ) 0px 0px no-repeat;
width:100%;
height:800px;
background-size:cover;
}

.banner-content{
width:570px;
padding-top:200px;
text-align:left;
color:#fff;
}

.banner-content h1{
font-family: "BlackOpsOne-Regular";
font-size:60px;
}

.banner-content h2{
font-family: "Abel-Regular";
font-size:32px;
}

.banner-content p{
font-family: "Abel-Regular";
font-size:20px;
padding-top:15px;
line-height:30px;
}

/* ----------Header Ends Here ---------- */

/* ----------About---------- */

.about{
padding:115px 0;
font-family: "Abel-Regular";
}

.about h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
}

.about span{
color:red;
}

.about h4{
padding:0px 125px;
font-size:20px;
line-height:30px;
}

.about p{
padding:0px 125px;
font-size:20px;
line-height:28px;
}

.about-image{
padding-top:35px;
display:block;
}

.about-image h5{
font-size:22px;
padding:15px 0 0 0;
font-weight:600;
}

.about-image p{
padding:15px 20px 0 20px;
font-size:18px;
line-height:28px;
}

.shadow
{
position: relative;
}
.shadow:before, .shadow:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 14px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #fff;
box-shadow: 0 15px 10px #000;
transform: rotate(-3deg);
}
.shadow:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}

/* ---------- About Ends here ---------- */

/* ---------- Requirements Starts ---------- */
.requirement{
background:url("../images/require.jpg" ) 0px 0px no-repeat;
width:100%;
background-size:cover;
font-family: "Abel-Regular";
}

.all-require{
padding:150px 0;
}

.heading{
margin:0 auto;
padding-bottom:50px;
color:#fff;
}

.heading h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
color:black;
}

.heading span{
color:black;
}

.grid{
background:rgba(41, 40, 40, 0.7);
padding:50px 0;
height:475px;
}

.grid i {
display: inline-block;
width: 64px;
height: 64px;
background: url("../images/icons.png") no-repeat 0px 0px;
padding-bottom: 75px;
text-decoration: none;
}

.grid i.pc {
    background-position: 0px 0px;
}
.grid i.xbox {
    background-position: -64px 0px;
}
.grid i.ps {
    background-position: -128px 0px;
}

.grid p{
color:#fff;
padding:5px 25px;
text-align:left;
font-size:20px;
}

.grid h5{
color:#fff;
font-size:22px;
text-align:left;
padding:5px 25px;
font-weight:600;
}

.grid-bottom{
padding-top:30px;
}

.grid span{
font-size:16px;
color:rgba(239, 239, 243, 0.83);
}
/* ---------- Requirements Ends here ---------- */

/* ---------- UP Coming Games Starts Here ---------- */
.background {
padding:15px 5px 15px 15px;
background:#212020;
}

.padding-upcoming{
padding:130px 0;
font-family: "Abel-Regular";
}	

.padding-upcoming h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
}

.padding-upcoming span{
color:red;
}
				
.trailer iframe {
width: 100%;
height: 387px;
}
.trailer {
padding-left: 0;
}

.sub-img {
width:34%;
float: left;
}

.sub-img img{
width:82%;
}

.sub-text {
padding-top:15px;
float:right;
width:60%;
margin:0px;
}

.sub-text h4 {
font-size:20px;
color: #5bb2fc;
line-height: 28px;
text-decoration:none;
display: block;
text-align:left;
}

.sub-text p {
font-size: 14px;
line-height: 20px;
color: #888;
margin-top: 8px;
}

.sub-trailer {
background: #212020;
}

.shadow1
{
position: relative;
}
.shadow1:before, .shadow1:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 14px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #fff;
box-shadow: 0 15px 10px #000;
transform: rotate(-3deg);
}
.shadow1:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
/* ---------- UP Coming Games Ends Here ---------- */

/* ---------- Our Team Starts Here ---------- */
.our-team{
background:#D6D3D3;
}

.team{
padding:125px 0;
font-family: "Abel-Regular";
}

.team h3{
padding:25px 0;
font-size:38px;
font-family: "Abel-Regular";
font-weight:800;
}

.team h4{
font-size:22px;
padding-top:6px;
font-weight:600;
}

.team p{
font-size:18px;
padding-top:3px;
}

.team-img img{
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
border:7px solid #dddbdb;
}

.team-bottom{
padding-top:40px;
}
/* ---------- Our Team Ends Here ---------- */

/* ----------  Contact Starts From Here ---------- */
.contact{
background:#1d1d1c;
}

.padding-contact{
padding:100px 0;
font-family: "Abel-Regular";
}

.padding-contact h3{
font-family: "BlackOpsOne-Regular";
font-size:24px;
padding-bottom:20px;
color:#5bb2fc;
letter-spacing: 3px;
text-align:left;
}

.padding-contact span{
color:yellow;
display:block;
padding-top:10px;
}

address{
font-size:16px;
color:#fff;
text-align:left;
line-height:24px;
}

.social{
padding-top:45px;
}

.social-icons h3{
text-align:center;
}

ul.social li {
    display: inline-block;
}
ul.social li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
text-decoration: none;
}

ul.social li a.facebook {
    background-position: 0px 0px;
}
ul.social li a.facebook:hover {
    background-position: 0px -50px;
}
ul.social li a.twitter {
    background-position: -50px 0px;
}
ul.social li a.twitter:hover {
    background-position: -50px -50px;
}
ul.social li a.googleplus {
    background-position: -100px 0px;
}
ul.social li a.googleplus:hover {
    background-position: -100px -50px;
}
ul.social li a.instagram {
    background-position: -150px 0px;
}
ul.social li a.instagram:hover {
    background-position: -150px -50px;
}
ul.social li a.youtube {
    background-position: -200px 0px;
}
ul.social li a.youtube:hover {
    background-position: -200px -50px;
}

.newsletter h3{
text-align:right;
}

.newsletter input[type="text"]{
	outline: none;
    font-size:16px;
	color: #fff;
	font-family: "Abel-Regular";
	padding: 15px 10px;
	border:none;
	border-bottom:2px solid #fff;
	width: 67%;
   	background:#1d1d1c;
}

.newsletter input[type="submit"] {
    background:rgba(2, 2, 2, 0.60);
    color: #fff;
	border: 2px solid #fff;
    font-size: 18px;
	font-family: "Abel-Regular";
    padding: 15px 10px 15px 15px;
    cursor: pointer;
    outline: none;
    display: inline-block;
    margin-top:24px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.newsletter input[type="submit"]:hover{
	color:#000;
    background:#d8cc52;
	font-weight:600;
}

/* ---------- Contact Ends here ---------- */

.footer{
padding:0px 20px 50px 20px;
}

.footer p{
font-size:18px;
font-family: "Abel-Regular";
color:#fff;
}

.footer a{
text-decoration:none;
color:#5bb2fc;
}

.footer a:hover{
color:yellow;
}


/*---------- responsive media queries ----------*/

@media screen and (max-width:1920px){
.banner-content{
width:500px;
}
}

@media screen and (max-width:1680px){
.banner-content{

}
}

@media screen and (max-width:1440px){
.banner-content{
width:470px;

}
}

@media screen and (max-width:1366px){
.banner-content{
width:470px;
padding-top:150px;
}
.newsletter input[type="text"] {
width: 60%
}
}

@media screen and (max-width:1280px){
.banner-content{
padding-top:125px;
}
}


@media screen and (max-width:1080px){
.banner{
height:500px;
}
.banner-content h1 {
font-size: 56px;
}
.banner-content h2 {
font-size: 30px;
}
.banner-content p {
font-size: 19px;
}

.about {
padding:50px 0 70px;
}
   
.all-require {
padding: 100px 0;
}

.padding-upcoming {
padding: 75px 0;
}

.about h4 {
padding: 0px 100px;
}

.trailer-text{
padding-top:37px;
}

.sub-text {
width: 64%;
}
.sub-text p {
text-align:left;
}

form{
padding-top:10px;
}

.about-image p {
padding: 10px 0px 0;
}

}


@media screen and (max-width:991px){
.navbar-inverse .navbar-nav>li>a {
padding: 0px 10px;
padding-top: 22px;
}

.about h4 {
padding: 0px 40px;
}

.about-size{
width:33.3%;
float:left;
}

.about-image p {
font-size: 16px;
line-height: 24px;
}

.require-size{
width:33.3%;
float:left;
margin: 0px;
padding: 5px;
}

.grid p {
padding: 5px 20px;
}
.game-video {
width: 60%;
float: left;
}

.game-image{
width:40%;
float:left;
}

.trailer-text {
padding-top: 15px;
}

.sub-trailer {
   padding:10px 0;
}

.sub-img {
width: 38%;
}

.sub-img img {
width: 100%;
}

.sub-text {
padding-top: 5px;
width:60%;
}

.sub-text h4 {
font-size:19px;
line-height: 24px;
}

.sub-text p {
font-size: 14px;
line-height: 18px;
}
.team-size{
width:25%;
float:left;
}

.team h4 {
font-size: 20px;
}

.team p {
font-size: 16px;
}

.address{
width:25%;
float:left;
margin:0;
padding:0px;
}

.social-icons{
width:40%;
float:left;
margin:0;
padding:0px;
}
ul.social li a {
width: 40px;
height: 40px;
background-size: 250px;
}
ul.social li a.facebook {
background-position: 0px 0px;
}
ul.social li a.facebook:hover {
    background-position: 0px -40px;
}
ul.social li a.twitter {
    background-position: -40px 0px;
}
ul.social li a.twitter:hover {
    background-position: -40px -40px;
}
ul.social li a.googleplus {
    background-position: -83px 0px;
}
ul.social li a.googleplus:hover {
    background-position: -83px -40px;
}
ul.social li a.instagram {
    background-position: -126px 0px;
}
ul.social li a.instagram:hover {
    background-position: -126px -40px;
}
ul.social li a.youtube {
    background-position: -167px 0px;
}
ul.social li a.youtube:hover {
    background-position: -167px -40px;
}

.newsletter{
width:35%;
float:left;
margin:0;
padding:0px;
}
.newsletter input[type="text"] {
padding:10px;
}

.newsletter input[type="submit"] {
font-size: 16px;
padding: 10px;
}
}


@media screen and (max-width:800px){
.navbar-brand>img {
width:90%;
}

}


@media screen and (max-width:768px){

.banner-content {
width: 380px;
padding-top: 125px;
}

.banner-content h1 {
font-size: 46px;
}
.banner-content h2 {
font-size: 26px;
}
.banner-content p {
font-size: 17px;
}

.about {
padding: 50px 0;
}
.about h3 {
font-size: 30px;
}
.about h4 {
font-size:17px;
line-height: 24px;
padding: 0px 10px;
}

.all-require {
padding:75px 0;
}
.heading h3 {
font-size: 30px;
}
.require-size {
padding: 2px;
}
.grid {
height: 485px;
}
.grid i {
width: 57px;
background-size: 175px;
}
.grid i.xbox {
background-position: -55px 0px;
}
grid i.ps {
background-position: -111px 0px;
}

.padding-upcoming h3 {
font-size: 34px;
}
.game-video {
width:100%;
}
.sub-trailer {
padding:0;
}
.sub-img {
width: 20%;
}
.sub-text {
padding-top: 40px;
width: 70%;
}
.sub-text h4 {
font-size: 24px;
}
.team {
padding: 75px 0;
}
.padding-contact h3 {
font-size: 22px;
}

}

@media screen and (max-width:736px){
.grid-bottom {
padding-top: 15px;
}
.padding-contact {
padding: 70px 0;
}
.footer p {
font-size: 16px;
}
}

@media screen and (max-width:667px){
.banner {
height: 400px;
}
.banner-content {
padding-top:75px;
}
.shadow:before, .shadow:after {
bottom: 18px;
}

.require-size {
padding: 10px;
width: 50%;
}
.grid:nth-child(3) {
height: 430px;
}
.require-size:nth-child(3) {
padding: 10px;
width: 50%;
margin-left:25%;
}
.grid i.xbox {
    background-position: -56px 0px;
}
.grid i.ps {
    background-position: -113px 0px;
}
.team h3 {
font-size: 32px;
}
.about-image p {
font-size: 14px;
line-height: 22px;
}
.padding-contact span {
font-size:15px;
}

}


@media screen and (max-width:640px){
.newsletter input[type="text"] {
width: 80%;
text-align: center;
}
.newsletter input[type="submit"] {
margin-top:5px;
}

}

@media screen and (max-width:600px){
.team h4 {
font-size: 18px;
}
.team p {
font-size: 14px;
}
.padding-contact span {
font-size: 13px;
}

}

@media screen and (max-width:480px){
.banner {
height: 350px;
}
.banner-content h1 {
font-size: 40px;
}
.banner-content h2 {
font-size: 22px;
}
.banner-content p {
font-size: 15px;
}
.about {
padding: 40px 0;
}

.about-size {
width:100%;
}

.about-size:nth-child(2) {
padding:40px 0px;
}
.about-image h5 {
padding-top:5px;
}
.about-image p {
padding-top:5px;
line-height: 20px;
}

.require-size {
width: 100%;
}

.grid{
height: 435px;
}

.grid p {
padding-left:50px;
}
.grid h5 {
padding-left:50px;
}
.require-size:nth-child(3) {
width: 100%;
margin-left:0%;
}
.sub-text {
padding-top: 10px;

}
.sub-text h4 {
font-size: 20px;
}

.team-size {
width: 50%;
float: left;
padding:10px 0;
}
.team-bottom {
padding-top: 0px;
}

.address {
width: 44%;
padding: 10px;
}
.social-icons {
width: 56%;
padding:10px;
}

.newsletter {
width: 80%;
float:none;
display: inline-block;
}

.newsletter input[type="text"] {
width: 60%;
}

}


@media screen and (max-width:414px){

.about {
padding: 25px 0;
}
.about h3 {
padding: 10px 0;
}
.about-image {
padding-top: 20px;
}

.all-require {
padding: 25px 0;
}

.heading {
padding-bottom: 20px;
}
.padding-upcoming {
padding: 25px 0;
}

.sub-text {
padding: 2px;
width: 74%;
}

.padding-contact h3{
text-align:center;
font-size:20px;
padding-bottom:10px;
}

.address {
width: 100%;
}
address {
font-size: 16px;
line-height: 20px;
text-align:center;
}

.social-icons {
width: 100%;
padding:30px 0;
}

.social {
padding: 0px;
}

form {
padding:0px;
}

}


@media screen and (max-width:384px){
.banner-content {
width: 280px;
}
.grid p {
padding-left: 40px;
}
.grid h5 {
padding-left: 40px;
}
}

@media screen and (max-width:320px){

.navbar-brand {
width: 80%;
}

.grid h5 {
padding-left: 32px;
font-size: 20px;
}

.grid p {
padding-left: 32px;
font-size:16px;
}

.newsletter {
width: 94%;
}

}