@import url("mobile-menu/mm.css");

/*WebFont*/
@font-face {
    font-family: 'robotoregular';
    src: url('../css/fonts/roboto/Roboto-Regular-webfont.eot');
    src: url('../css/fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
         url('../css/fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../css/fonts/roboto/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('../css/fonts/roboto/Roboto-Medium-webfont.eot');
    src: url('../css/fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
         url('../css/fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../css/fonts/roboto/Roboto-Medium-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rajadhanibold';
    src: url('../css/fonts/rajadhani/rb/brajdhani-bold-webfont.eot');
    src: url('../css/fonts/rajadhani/rb/rajdhani-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/fonts/rajadhani/rb/rajdhani-bold-webfont.woff') format('woff'),
         url('../css/fonts/rajadhani/rb/rajdhani-bold-webfont.svg#rajdhanibold') format('svg');
    font-weight: normal;
    font-style: normal;
}



body{font-family: 'robotoregular'; color: #16171b; font-size: 1em/*.9em*/; line-height: 1.8;}

.header {
position: fixed;
z-index: 1000;
padding:15px 25px;
width: 100%; 
background: rgba(34,34,34,0);
padding: 18px;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
transition: all ease-out .5s;
}
      
.activeh {background-color: rgba(235,18,42,1); padding-top:13px; padding-bottom:13px;}

.headerb {
    position: fixed;
    z-index: 1000;
    padding:15px 25px;
    width: 100%; 
    background: rgba(255,255,255,1);
    padding: 18px;
    -webkit-transition: all ease-out .5s;
    -moz-transition: all ease-out .5s;
    -o-transition: all ease-out .5s;
    transition: all ease-out .5s;
    }
.activeb {background-color: rgba(255,255,255,1); padding-top:13px; padding-bottom:13px;}

nav{position:relative; z-index:10;}
nav .brand{float: left;}
nav .brand img{max-width: 100%;}
nav ul{margin:0; padding: 0; list-style-type: none; float: right;}
nav ul li{display:inline-block; font-family: 'robotomedium'; text-transform: uppercase; padding: 0 20px; font-size: 1.2em;}
nav ul li a{text-decoration: none; color:#FFF;}
nav ul li a:hover{text-decoration: none; color:#FFF;}
nav ul li a.selected {border-bottom: 2px solid #FFF; padding-bottom: 4px;}
/*nav ul li:last-child{padding-right: 0;}*/

nav ul li.gdc:hover::after{width: 0;}

nav ul li::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background:#FFF;
    transition: width .3s;
}

nav ul li:hover::after {
    width: 100%;
    transition: width .3s;
}

nav  ul#blog{margin: 4px 0 0 0; padding: 0; list-style-type: none; float: right;}
nav  ul#blog li{display:inline-block; font-family: 'robotomedium'; text-transform: uppercase; padding: 0 20px; font-size: 1.2em;}
nav  ul#blog li a{text-decoration: none; color:#16171b;}
nav  ul#blog li a:hover{text-decoration: none; color:#16171b;}
nav  ul#blog li a.selected {border-bottom: 2px solid #16171b; padding-bottom: 4px;}

nav  ul#blog li::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background:#16171b;
    transition: width .3s;
}

nav  ul#blog li:hover::after {
    width: 100%;
    transition: width .3s;
}


/*OwlSlider*/
/*MyStyles*/
/*.slide-coust{position:relative;top:0!important; height: 100%!important; z-index:0;}*/
#demos .item-b .b-text{position: absolute; z-index: 5; width: 100%; color: #FFF;
    top: 35%;
    /*top:50%; left: 50%;
    transform: translate(-50%, -50%);*/
}

#demos .owl-item.active .b-text{animation: 1s .2s fadeInUp both;}

#demos .item-b img{
    display: block;
    max-width: 100%;
    height: auto/*auto*/;
    position: relative;
}

#demos .item-b .b-text h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}
#demos .item-b .b-text span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
#demos .item-b .b-text h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#FFF;
    transition: width .3s;
}
#demos .item-b .b-text p{margin: 0 0 30px 0; text-align: justify;}
#demos .item-b .b-text .read-more{font-family: 'robotomedium'; font-size: 16px; text-transform: uppercase;}
#demos .item-b .b-text .read-more a{color: #ed2227; text-decoration: none; transition: .5s all ease;}
#demos .item-b .b-text .read-more  a span{ background: url(../images/arrow-red.png) no-repeat;
    height: 20px;
    width: 46px;
    margin-left: 15px;
    padding-top: 5px;
    display: inline-block;
    transition: .5s;
}

#demos .item-b .b-text .read-more  a:hover span{margin-left: 25px;}
#demos .item-b .b-text .read-more::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    margin-top: 5px;
    background:#FFF;
    transition: width .3s;
}

#demos .item-b .b-text .read-more:hover::after {
    width: 160px;
    transition: width .3s;
}
#demos .owl-carousel .item-c img{max-width:100%;}

#demos .owl-carousel .item-p{background:#FFF; transition:.5s all ease; margin-bottom:10px;}
#demos .owl-carousel .item-p img{width:auto;}
#demos .owl-carousel .item-p h2{font-family: 'rajadhanibold'; font-size: 25px; margin:20px 0;
    padding-bottom: 20px; transition: .5s all;}
#demos .owl-carousel .item-p a:hover h2{padding-left: 20px;}
#demos .owl-carousel .item-p a:hover h2::before{
        font-family: FontAwesome;
        content: "\f101";
        position: absolute; left: 16px;
        width: 72px;
        height: 3px;
        margin-top: 0px;
        transition: width .3s;}
#demos .owl-carousel .item-p a{color: #16171b; text-decoration: none;}
#demos .owl-carousel .item-p:hover{-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); 
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);}
#demos .owl-carousel .item-p:hover h2{margin-left:20px;}



#demos .item-t{margin-right: 30px;}
#demos .item-t .inn{background:#eaeaea url(../images/bg-testi.png) scroll 25px 35px no-repeat; border-top:5px solid #f14e52; padding: 25px;}
#demos .item-t .name{text-align: right; background: url(../images/arrow-teti.jpg) top right no-repeat; padding-right:40px; padding-top: 10px;}

.scroll-down{position:relative; bottom:0px; z-index: 2; text-align: center; width: 100px; margin: 0 auto; font-size: 14px;}

.scroll-down a{color: #FFF; text-decoration: none; text-transform: uppercase; transition: .5s all ease-in;}
.scroll-down a:hover{color:#ed2227;}

.scroll-down .d-arrows{margin-top:5px;}
.scroll-down .d-arrows i{padding-left: 5px; font-size: 25px; display: block;
    -moz-animation: fadeInDown 3s infinite;
    -webkit-animation: fadeInDown 3s infinite;
    animation: fadeInDown 3s infinite;
}
.scroll-down .d-arrows i.two{margin-top: -17px; font-size: 22px;
    -moz-animation: fadeInDown 3s infinite;
    -webkit-animation: fadeInDown 3s infinite;
    animation: fadeInDown 3s infinite;
}


/*--MySTyles*/



/*HomeAbout*/
.home-about{padding-top: 100px; padding-bottom: 100px;}
.home-about h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.home-about h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.home-about h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.home-about p{margin: 0 0 30px 0; text-align: justify;}
.home-about .read-more{font-family: 'robotomedium'; font-size: 16px; text-transform: uppercase;}
.home-about .read-more a{color: #16171b; text-decoration: none; transition: .5s all ease;}
.home-about .read-more  a span{ background: url(../images/arrow-red.png) no-repeat;
    height: 20px;
    width: 46px;
    margin-left: 15px;
    padding-top: 5px;
    display: inline-block;
    transition: .5s;
}

.home-about .read-more  a:hover span{margin-left: 25px;}
.home-about .read-more::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    margin-top: 5px;
    background:#ed2227;
    transition: width .3s;
}

.home-about .read-more:hover::after {
    width: 160px;
    transition: width .3s;
}


/*HomeClients*/
.c-bg{border-bottom: 1px solid #f1f1f1;
    /*background-image: linear-gradient(to bottom, #ffffff, #f9f6f6, #fbfcfb, #fafafa, #f8f8f8);*/
background: #FFF;}
.home-clients{padding-bottom:40px; padding-top:60px;}
.home-clients h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.home-clients h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.home-clients h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.home-clients ul{margin: 0; padding: 0; list-style-type: none;}
.home-clients ul li{display: inline-block;}


/*HomePort*/
/*.home-portfolio{padding-top: 100px; padding-bottom: 80px; background: url(../images/bg-portfolio.jpg) repeat top left;}*/
.home-portfolio{padding-top: 0; padding-bottom: 40px; background:#FFF repeat top left; border-bottom: 1px solid #f1f1f1;}
.home-portfolio h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.home-portfolio h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.home-portfolio h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}


/*HomeTesti*/
.home-testi{padding-top: 100px; padding-bottom: 100px;}
.home-testi h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.home-testi h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.home-testi h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}



/*Footer*/
.footer{padding-top: 50px; padding-bottom: 50px; background: #16171b; color: #FFF;}
.footer li a{text-decoration: none; color: #fff; transition: .5s all ease-in;}
.footer li a:hover{text-decoration: none; color: #ed2227;}
.footer ul.social{width: 100; margin: 0; padding: 0; list-style-type: none; margin-bottom: 20px;}
.footer ul.social li{display: inline-block; font-size: 20px; padding: 0 10px;}
.footer ul.social li.disable{color:#747474!important; padding: 0 10px;}
.footer ul.links{width: 100; margin: 0; padding: 0; list-style-type: none; margin-bottom: 20px;}
.footer ul.links li{display: inline-block; color:#404040; }
.footer ul.links li.disable{color:#747474!important; padding: 0 10px;}
.footer ul.links li span{letter-spacing: -1px;}
.footer ul.links li a{padding:0 10px;}
.footer .copy{text-decoration: none;}
.footer .copy span{color:#ed2227;}


/*ArtServices*/
.img-desktop.mobile {display: none;}
.innerpage{}
.innerpage .text{position: absolute; z-index: 5;
    /*left: 17%; top: 32%; transform: translate(-17%, -32%);*/
    top: calc(50% - 180px);
    left: calc(50% - 550px);}
.innerpage h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px; color: #FFF;	
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}
.innerpage h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#FFF;
    transition: width .3s;
}
.innerpage p{color: #FFF;}
.innerpage img{width:100%; position: relative;}
.innerpage p span{background: rgba(0, 0, 0, 0.25); padding: 5px 10px; margin-right: 10px; transition: .5s all;}
.innerpage p span:hover{background: rgba(236, 34, 38,.7);}
.innerpage p a{color: #FFF; text-decoration: none;}



/*Services*/
.service-main{padding-top: 60px; padding-bottom: 60px;}
.service-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.service-main .h2{font-size:30px; font-family: 'rajadhanibold'; margin-bottom: 15px; margin-top: 30px;}
.service-main h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.service-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.service-main p{margin: 0; text-align: justify;}

.service-main h2{font-family: 'rajadhanibold'; font-size: 20px; margin:20px 0;}
.service-main ul{margin: 0; padding: 0 0 10px 17px; list-style-type: disc; list-style-position: outside;}
.service-main ul li{margin-bottom: 10px;}

.art-img{padding-bottom: 60px;}
.art-img .set{background:#e7e7e7;
    transform: skew(-0deg);
    -webkit-transform: skew(-0deg);
    -moz-transform: skew(-0deg);}
.art-img .set img{max-width: 100%;}


/*AboutUs*/
.about-main{padding-top: 100px; padding-bottom: 100px;}
.about-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.about-main h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.about-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.about-main p{margin: 0; text-align: justify;}

.client-bg{
    height: auto;
    background-image: url(../images/bg-clients.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.client-main{padding-top: 100px; padding-bottom: 70px; color: #FFF;}
.client-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.client-main h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.client-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#FFF;
    transition: width .3s;
}
.client-main img{max-width: 100%; margin-bottom: 30px;}


/*career*/
.career-main{padding-top: 100px; padding-bottom: 70px;}
.career-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 30px;}
.career-main h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.career-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}

.career-main .c-box{border:5px solid #333637; padding:20px; transition: .5s all; margin-bottom: 30px;}
.career-main .c-box:hover{border:10px solid #ec2226;padding:15px;}
.career-main .c-box h2{font-size:20px; font-family: 'rajadhanibold'; margin-bottom: 15px;}
.career-main .c-box p{margin-bottom: 15px;}
.career-main .c-box p i{margin-right: 10px; font-size: 20px; color: #494b54;}
.career-main .c-box .read-more{font-family: 'robotomedium'; font-size: 16px; text-transform: uppercase; text-align: right; margin-top: 5px; cursor: pointer;}
.career-main .c-box .read-more a{color: #16171b; text-decoration: none; transition: .5s all ease;}
.career-main .c-box .read-more  a span{ background: url(../images/arrow-red.png) no-repeat;
    height: 20px;
    width: 46px;
    margin-left: 15px;
    padding-top: 5px;
    display: inline-block;
    transition: .5s;
}


.career-main .contact-box{padding:20px; margin-bottom: 30px; background: #f5f5f5;}

.career-main .contact-box h2{font-size:45px; font-family: 'rajadhanibold'; margin-bottom: 15px;}
.career-main .contact-box h2::after{
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.career-main .contact-box h3{font-size:16px; font-family: 'rajadhanibold'; background: #dfdfdf; padding:10px 0; text-align: center;}
.career-main .contact-box p{margin-bottom: 15px;}
.career-main .contact-box p i{margin-right: 10px; font-size: 20px; color: #494b54;}

/*Modal*/
.modal-header{padding: .8em 1em;}
.modal-content h5{font-size:30px; font-family: 'rajadhanibold';}
.modal-content p{font-size: 14px;}
.modal-content p a{color: #ee2024; text-decoration: none; transition: .5s all ease;}
.modal-content p a:hover{color: #212529;}


.contact-box-t{padding:20px; margin-bottom: 30px; background: #222327; color: #FFF;}
.contact-box-t h2{font-size:45px; font-family: 'rajadhanibold'; margin-bottom: 15px;}
.contact-box-t h2::after{
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#FFF;
    transition: width .3s;
}
.contact-box-t h3{font-size:19px; font-family: 'rajadhanibold'; background: rgba(235, 18, 42, .8); 
    line-height: 34px; text-align: center; margin-bottom: 20px;}


.contact-box-t .info{padding: 10px; background: #27282c; margin-bottom: 20px;}
.contact-box-t .info i{margin-right: 20px; font-size: 20px; float: left;
    padding: 10px 12px; background: #303134;}
.contact-box-t .info p{float: left; font-family: 'rajadhanibold'; margin: 0;}
.contact-box-t .info p a{color: #FFF; text-decoration: none; transition: .5s;}
.contact-box-t .info p a:hover{color: #eb122a;}
.contact-box-t .info:last-child{margin-bottom: 0;}


/*GetInTouch*/
.career-bg{
    height: auto;
    background-image: url(../images/bg-career.jpg)!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-position: center!important;
}
.git{padding-top: 100px; padding-bottom: 100px; background: #111216; color: #FFF; z-index: 2; position: relative;}
.git h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px;}
.git h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.git h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#FFF;
    transition: width .3s;
}
.git p{margin: 0 0 30px 0; text-align: justify;}
.git .form-control{background: transparent; border: 0; border-bottom: 3px solid #767678; border-radius: 0; padding: 0.375rem 0rem; color: #dadada; font-size: 14px; margin-bottom: 10px;}
.git .form-control::placeholder{color: #dadada;}
.git .form-control:focus{box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25);}

.git .btn-primary.read-more{font-family: 'robotomedium'; font-size: 16px; text-transform: uppercase; border-radius: 0; border: 0; outline: 0; background: transparent; padding-left:0;}
.git .btn-primary.read-more span{ background: url(../images/arrow-red.png) no-repeat;
    height: 20px;
    width: 46px;
    margin-left: 15px;
    padding-top: 5px;
    display: inline-block;
    transition: .5s;
}
.git .btn-primary.read-more:hover span{margin-left: 25px;}

.git .btn-primary.read-more:not(:disabled):not(.disabled):active{background: none;
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none;}

.btn-primary.read-more:focus, .btn-primary.read-more.focus{background-image: none;
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none;}



/*Portfolio*/
.port-main{padding-top: 100px; padding-bottom: 100px;}
.port-main .row{margin-bottom: 30px;}
.port-main .row:last-child{margin-bottom: 0;}

.port-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 30px;}
.port-main h1 span{font-family: 'robotoregular'; font-size: 14px; display: block; padding-bottom: 5px;}
.port-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}

.port-sect img{max-width: 100%;}
.port-sect h2{font-family: 'rajadhanibold'; font-size: 18px; margin:20px 0px; transition: .5s all ease;}
.port-sect a{color:#16171b; text-decoration: none; transition: .5s all ease;}
.port-sect a:hover{color:#eb122a;}
.port-sect a:hover h2{padding-left: 20px;}
.port-sect a:hover h2::before{
    font-family: FontAwesome;
    content: "\f101";
    position: absolute; left: 16px;
    width: 72px;
    height: 3px;
    transition: width .3s;}


.game-main{padding-top: 100px; padding-bottom: 100px;}
.game-main h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom:0px;}
.game-main h1::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}

.game-main img{max-width: 100%;}

.game-main .leftt{font-family: 'robotoregular'; text-transform: uppercase;}
.game-main .leftt{position: relative;}
.game-main .leftt p{text-align: right;}
.game-main .leftt p::before{
    font-family: arial;
    content: "\2190";
    font-size: 26px; height: 0;
    margin-right: 20px;
    transition: .5s all ease;
}
.game-main .leftt p a{color:#16171b; text-decoration:none; transition: .5s all ease;}
.game-main .leftt p a:hover{color:#eb122a;}
.game-main .leftt p:hover::before{margin-right: 30px; color:#eb122a;}
.game-main .leftt ul{list-style-type: none; margin: 0; padding: 0; text-align: right;}
.game-main .leftt ul li{padding:5px 10px; display: block;}
.game-main .leftt ul li a{color:#16171b; text-decoration: none;}

.game-main .leftt ul li:hover {background:#f2f2f2;color:#16171b;transition: .5s all ease;}
.game-main .leftt ul li:hover a{color: #ed2227;display:inline-block;}

.activeee{color:#ed2227!important; text-decoration: none;}

.activeee a::after{
    font-family: arial;
    content: "\2192"; color: #ed2227; line-height: 1;
    font-size: 26px; padding-top: 10px;
    margin-left: 20px;}
.activeee a{color:#ed2227!important; text-decoration: none;}

.game-main .leftt ul li:hover::after{color: #FFF; margin-left: 30px;}/**/

.fixedd {
    width:19%;
	position: fixed;
	top:200px;
    height:200px;
	z-index: 0;}

.game-main .right{}
.game-main .right .col-xl-4, .game-main .right .col-lg-4, .game-main .right .col-md-4, .game-main .right .col-12{margin-bottom: 30px;}
.art-device{height: 100px;}


/*Development*/
.development{padding: 0;}
.development ul{margin:0; padding: 0; list-style-type: none;font-family: 'robotoregular';font-size: 16px; text-transform: uppercase;}
.development ul li{width: 25%;background: #222327; line-height: 50px; float: left; text-align: center; transition: .5s all ease;}
.development ul li a{  display: block; color: #FFF; text-decoration: none;}
.development ul li:nth-child(even) { background: #16171b; }
.development ul li:hover { background: #ed2227;}
.development ul li.selected { background: #ed2227!important;}


/*Art*/
.arts{padding: 0;}
.arts ul{margin:0; padding: 0; list-style-type: none;
    font-family: 'robotoregular';font-size: 16px; text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;}
.arts ul li{background: #222327; line-height: 50px;
    flex: 1 0 0;box-sizing: border-box;
    text-align: center; transition: .5s all ease;}
.arts ul li a{  display: block; color: #FFF; text-decoration: none;}
.arts ul li:nth-child(2), .arts ul li:nth-child(4), .arts ul li:nth-child(6){ background: #16171b;}
.arts ul li:hover { background: #ed2227;}
.arts ul li.selected { background: #ed2227!important;}


/*Blog*/
.innerpage-blog{color: #16171b;padding:150px 0 60px 0; }
.innerpage-blog h1{font-family: 'rajadhanibold'; font-size: 45px; margin-bottom: 20px; color: #ed2227;}
.innerpage-blog h1::after {
    content: '';
    display: block;
    margin-top: 20px;
    width: 150px; margin-left: auto; margin-right: auto;
    height: 4px;
    background:#ed2227;
    transition: width .3s;
}
.innerpage-blog p{font-size: 18px;}
.innerpage-blog p.da{font-size: 14px;}
.innerpage-blog p.da span{color: #ed2227;}
.innerpage-blog p.s-menu{font-size: 14px;}
.innerpage-blog p.s-menu span{color: #505050; text-decoration: underline;}
.innerpage-blog p.s-menu a{color: #16171b; text-decoration: none;}
.innerpage-blog p.s-menu i{padding:0 8px 0 5px;}
.innerpage-blog img{width:100%; position: relative;}

.blog-main{padding-bottom: 100px;}
.blog-main h2{font-family: 'rajadhanibold'; font-size: 20px; margin-bottom: 20px;}
.blog-main h2::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.blog-main h3{font-family: 'rajadhanibold'; font-size: 16px; margin-bottom: 20px;}

.blog-box{
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 0px 13px 0px #ccc;
    -moz-box-shadow:0px 0px 13px 0px #ccc;
    box-shadow:0px 0px 13px 0px #ccc;}
.blog-box img{max-width: 100%;}
.blog-box .content{padding: 20px}
.blog-box .content p{font-size: 14px;}
.blog-box .more{padding-top: 10px;padding-bottom: 30px;}
.blog-box .more .link{background: url(../images/arrow-red.png) no-repeat; float: left; }
.blog-box .more .link a{display:inline-block; padding-right:50px; text-decoration: none;}
.blog-box .more .date{float: right; font-size: 12px;}
.blog-box .more .date span{color:#ed2227;}

.viewmore{width: 145px; height: 50px; line-height: 50px; text-align: center; margin:30px auto 0 auto; border:2px solid #16171b; font-size: 16px; text-transform: uppercase;}
.viewmore a{color: #16171b; text-decoration: none; transition: .5s all ease;}
.viewmore a i{padding-left:5px; color:#ed2227; font-size: 14px;}
.viewmore a:hover{color:#ed2227;}



.blog-right{background: #E0E0E0; padding: 10px; height: fit-content;}
.blog-right .confe{margin-bottom: 30px;}
.blog-right .confe img{max-width: 100%;}
.blog-right .confe:last-child{margin-bottom: 0px;}


.blog-right .social{margin-bottom: 30px; background: #FFF; padding: 20px;
border:1px solid #FFF;}/*#ebebeb*/
.blog-right .social h3{font-family: 'rajadhanibold'; font-size: 20px; margin-bottom: 20px;}
.blog-right .social h3::after {
    content: '';
    display: block;
    margin-top: 10px;
    width: 72px;
    height: 3px;
    background:#16171b;
    transition: width .3s;
}
.blog-right .social ul{margin: 0; padding: 0; list-style-type:none;}
.blog-right .social ul li{display:inline-block; margin-right:3px;}
.blog-right .social ul li:last-child{margin-right: 0;}
.blog-right .social ul li img{max-width: 100%;}

.blog-right .s-tabs{margin-bottom: 30px; background: #FFF; padding: 18px;
    border:1px solid #ebebeb;}
.blog-right .s-tabs ul{margin: 0; padding: 0; list-style-type:none;}
.blog-right .s-tabs ul li{display:inline-block; font-size: 12px; text-transform: uppercase; margin-bottom: 3px;}
.blog-right .s-tabs ul li a{color: #FFF; background: #16171b; text-decoration: none; padding:4px;
transition: .5s all ease;}
.blog-right .s-tabs ul li a:hover{background: #ed2227;}


/*HomeEvent*/
.qa-h{position: absolute;  z-index: 9; display: inline-grid;
    top:10%; right: 0%;text-align: left; height: 40px;}
.qa-h .boxi i{line-height: 40px; color: #FFF; font-size: 24px; padding-left: 12px; padding-top: 0px;
    -moz-animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;}
@keyframes pulse {
        0% {transform: scale(1);}
        50% {transform: scale(1.5);}
        100% {transform: scale(1);}
}

.qicon{width:42px; margin: 0; background:rgba(237, 34, 39,.9); cursor: pointer;}


.gdc{ padding:0px 10px; margin-right: 10px; 
    background: linear-gradient(-45deg, #f62f45, #e67e22, #eb122a, #f62f45);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;}

    @-webkit-keyframes Gradient {
        0% {background-position: 0% 50%}
        50% {background-position: 100% 50%}
        100% {background-position: 0% 50%}
    }
    
    @-moz-keyframes Gradient {
        0% {background-position: 0% 50%}
        50% {background-position: 100% 50%}
        100% {background-position: 0% 50%}
    }
    
    @keyframes Gradient {
        0% {background-position: 0% 50%}
        50% {background-position: 100% 50%}
        100% {background-position: 0% 50%}
    }

.event {
    width: 290px!important;
    background: #222327;
    position: absolute;
    right:28px;
    top: 54px;
    z-index: 100;
}

.event h1 {
    font-family: 'rajadhanibold';
    font-size: 20px;
    padding: 15px 10px;
    background: #16171b;
    color: #d4d4d4;
    line-height: 18px;
}

.event h2 {
    font-family: 'robotoregular';
    font-size: 14px; font-weight: 500; text-align: center;
    padding: 10px;
    background: rgba(237, 34, 39, .8);
    color: #ffe9ea;
    margin: 0 10px;
}


.event h3 {
    font-family: 'robotoregular';
    font-size: 15px;
    padding: 0 0 10px 0;
    line-height: 20px;
    margin-bottom: 10px;
    color: #d4d4d4;
    border-bottom: 1px solid #36373b;
}

.event .frame {padding:10px;margin:10px;background: #16171b; color: #FFF;}
.event .frame .info{padding: 10px; background: #27282c; margin-bottom: 20px;}
.event .frame .info i{margin-right: 18px; font-size: 20px; float: left;
    padding: 10px 12px; background: #303134;}
.event .frame .info p{float: left; font-family: 'rajadhanibold'; margin: 0;}
.event .frame .info p a{color: #FFF; text-decoration: none; transition: .5s;}
.event .frame .info p a:hover{color: #eb122a;}
.event .frame .info:last-child{margin-bottom: 0;}



.event-contact {background: #222327;}

.event-contact h1 {
    font-family: 'rajadhanibold';
    font-size: 20px;
    padding: 15px 10px;
    background: #16171b;
    color: #d4d4d4;
    line-height: 18px;
}

.event-contact h2 {
    font-family: 'robotoregular';
    font-size: 14px; font-weight: 500; text-align: center;
    padding: 10px;
    background: rgba(237, 34, 39, .8);
    color: #ffe9ea;
    margin: 0 10px;
}


.event-contact h3 {
    font-family: 'robotoregular';
    font-size: 15px;
    padding: 0 0 10px 0;
    line-height: 20px;
    margin-bottom: 10px;
    color: #d4d4d4;
    border-bottom: 1px solid #36373b;
}

.event-contact .frame {padding:10px;margin:10px;background: #16171b;}
.event-contact .frame p {padding: 0 10px 0 10px;color: #d4d4d4; background: none; width: 100%;}
.event-contact .frame p:last-child {margin-bottom: 5px;}
.event-contact .frame p strong {font-weight: 500;}
.event-contact .frame p a {color: #d4d4d4;text-decoration: none;transition: .5s all ease-in;}
.event-contact .frame p a:hover {color: red;}


.op-color{color: #16171b!important;}
.des{display: unset;}
.mob{display: none;}

/*ScrollTop*/
#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #16171b;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    transition: .5s all;
    
}
#back2Top:hover {background-color: #eb122a;color: #FFF;}





/*@media*/
@media (max-width: 1366px) {
    .innerpage .text{top: calc(50% - 140px);}
}
@media (max-width: 1280px) {
    .innerpage .text{top: calc(50% - 230px);}
}

@media (max-width: 1024px) {
    #demos .item-b .b-text h1{font-size: 45px;}
    .innerpage .text {top: calc(50% - 560px);left: calc(50% - 460px);}
    .innerpage h1, .blog h1{font-size: 40px;}
    .arts ul li a{font-size: 15px;}
}

@media (max-width: 800px) {
    .header{background:rgba(22,23,27,.5); padding: 10px 15px;}
    .activeh{background: rgba(235,18,42,1);}
 
    .headerb {padding:10px 15px;background: rgba(255,255,255,1);}
    .activeb {background-color: rgba(255,255,255,1);}
 
     nav .button{display:block;}
     nav .brand{margin-top: 4px;}
     nav ul{display: none;}
     #demos .item-b .b-text h1{font-size: 40px;}
     .home-about h1, .about-main h1{margin-top: 30px;}
     .innerpage h1, .innerpage-blog h1{font-size: 35px;}
     .innerpage .text {
         top: calc(50% - 530px);
         left: calc(50% - 363px);
     }
     .innerpage p{display: none;}

     .qa-h{top:64px;}

     .des{display: none;}
     .mob{display:block;}

 }

@media (max-width: 768px) {
    
    .header{background:rgba(22,23,27,1);}
    .activeh{background: rgba(235,18,42,1);}
    nav ul{display: none;}
    #demos .item-b .b-text h1{font-size: 35px;}
    .home-about h1{margin-top: 30px;}
    .home-about, .home-portfolio, .home-testi, .service-main, .about-main, .client-main, .career-main, .port-main, .git{padding-top: 60px; padding-bottom: 60px;}
    .innerpage .text {
        top: calc(50% - 345px);
        left: calc(50% - 340px);}
    .innerpage h1, .innerpage-blog h1{font-size: 35px;}
    .innerpage p{display: none;}

    .about-main h1{margin-top: 30px;}

    .career-main .contact-box{margin-bottom: 0;}

    .git p{margin-bottom: 50px;}

    .arts ul li{flex:50% 0 0;}
    .arts ul li:nth-child(1), .arts ul li:nth-child(4){ background: #222327;}
    .arts ul li:nth-child(3){ background: #16171b;}
    .arts ul li:hover{background: #ed2227;}
    .arts ul li:nth-child(5){flex:100% 0 0; background: #2b2c32;}
    
    #back2Top{width: 30px; line-height: 30px; font-size: 24px;}

}

@media (max-width: 600px) {
    #demos .item-b .b-text h1{font-size: 34px;}
    #demos .item-b .b-text p{display: none;}
    .innerpage h1, .innerpage-blog h1{font-size: 30px;}
    .innerpage .text {top: calc(50% - 422px);left: calc(50% - 266px);}
    .art-img{text-align: center;padding-bottom: 30px;}
    .art-img .set{background: none;}
    .art-img .set img{margin-bottom: 30px;}
    
    .game-main .leftt{position:static;}
    .game-main .leftt p{text-align: center;}
    .game-main .leftt ul {
        text-align: left;
        margin-bottom: 30px;
    }
    .game-main .leftt ul li{width: 48%;
        display: inline-block;
        padding: 0;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #CCC;}

    .game-main{padding-top: 30px; padding-bottom: 60px;}
    .fixedd{position: relative; top: 0; width: 100%;}

    .viewmore{margin-bottom: 50px;}
    .blog-right .confe img{width: 100%;}
    .career-main .contact-box{margin-bottom: 30px;}
    #demos .owl-carousel .item-p img{width: 100%;}

    .qa-h{top:70px;}

}

@media (max-width: 576px) {
    nav ul{display: none;}

    #demos .item-b{margin-top: 62px;}
    #demos .item-t{margin-right: 0px;}
    #demos .item-b .b-text h1{font-size: 22px;}
    #demos .item-b .b-text p{display: none;}

    .qa-h{display: none;}



    .home-about{padding-top:60px; padding-bottom:60px;}
    .home-about h1{margin-top: 30px;}
    .home-clients{padding-bottom: 0!important;}
    .home-portfolio{padding-top: 0px; padding-bottom: 30px;}
    .home-testi{padding-top: 60px; padding-bottom: 50px;}
    
    .git{padding-top:60px; padding-bottom:50px;}

    /*InnerPages*/
    .innerpage{padding-top: 62px; background: #16171b;}
    .innerpage .text{left: 17%; top: 16%; transform: translate(-17%, -25%);}
    .innerpage h1, .innerpage-blog h1{font-size: 22px;}
    .innerpage p{display: none;}

    
    .innerpage-blog h1::after {
        content: '';
        display: block;
        margin-top: 20px;
        width: 100px; margin-left: auto; margin-right: auto;
        height: 4px;
        background:#ed2227;
        transition: width .3s;
    }

    .service-main{padding-top:60px; padding-bottom:60px;}
    .service-main h1{margin-top: 0px;}
    .art-img{padding-bottom:20px;}
    .art-img .set{margin-bottom: 30px;}

    .about-main{padding-top:60px; padding-bottom:60px;}
    .about-main h1 span{margin-top: 30px;}
    .client-main{padding-top: 60px; padding-bottom: 30px;}

    .career-main{padding-top:60px; padding-bottom:30px;}

    .game-main{padding-top:30px; padding-bottom:60px; text-align: center;}
    .game-main h1{text-align: left;}
    .game-main .leftt p{text-align: left;}
    .game-main .leftt ul{text-align: left; margin-bottom: 30px;}
    .game-main .leftt ul li{width: 48%; display: inline-block; padding: 0; height: 40px; line-height: 40px; 
        border-bottom: 1px solid #CCC;}
    .fixedd{position: relative; top: 0; width: 100%;}
    .game-main .leftt ul li:hover{background: transparent;}
    .game-main .leftt ul li:hover::after{display: none;}

    .port-main{padding-top:60px; padding-bottom:60px;}
    .port-sect h2{text-align: left;}
    .port-main .row{text-align: center;}
    .port-sect a:hover h2::before{left: 18px;}
    .port-sect img{width: 100%;}
    

    .img-desktop{display: none;}
    .img-desktop.mobile {display: block;}

    .development ul{font-size: 14px;}
    .development ul li{width: 50%; float: left; line-height:44px;}

    .development ul li:nth-child(1), .development ul li:nth-child(4){background: #222327;}
    .development ul li:nth-child(2), .development ul li:nth-child(3){background:#16171b;}
    .development ul li:hover{background: #ed2227;}

    .arts ul{font-size: 14px;}
    .arts ul li{flex:50% 0 0; line-height:44px;}
    .arts ul li:nth-child(1), .arts ul li:nth-child(4){ background: #222327;}
    .arts ul li:nth-child(3){ background: #16171b;}
    .arts ul li:hover{background: #ed2227;}
    .arts ul li:nth-child(5){flex:100% 0 0; background: #2b2c32;}

    .scroll-down{display: none;}

    .blog-main{padding-bottom: 60px;}
    .viewmore{margin-bottom: 50px;}

    .home-about h1, .home-portfolio h1, .home-clients h1, .home-testi h1, .git h1,
    .service-main h1, .port-main h1, .game-main h1, .about-main h1, .client-main h1,
    .career-main h1, .career-main .contact-box h2, .contact-box-t h2{font-size: 40px;}
}

@media (max-width: 412px) {
    .innerpage .text{top: 20%;}
}

@media (max-width: 384px) {
    .innerpage .text{top: 19%;}
}

@media (max-width: 375px) {
    .innerpage .text{top: 15%;}
}

@media (max-width: 360px) {
    .innerpage .text{left:20px;top: 20%;transform: translate(0%, -25%);}
}

@media (max-width: 320px) {
    nav .brand{display: contents;}
    nav .brand img{max-width: 80%;}
    #demos .item-b .b-text h1{font-size: 18px;}
    .innerpage .text {transform: translate(-17%, -52%);}
    .home-about h1, .home-portfolio h1, .home-testi h1, .service-main h1, .about-main h1, .client-main h1, .git h1, .career-main h1, .career-main .contact-box h2, .contact-box-t h2{font-size: 40px;}
}


@media (min-width: 1900px) and (max-width: 1920px) {
    .fixedd{width: 13.5%!important;}
    .innerpage .text{
        top: calc(50% - 230px);
        left: calc(50% - 700px);}
    
        #demos .item-b .b-text h1, .innerpage h1{font-size: 60px;}
        #demos .item-b .b-text p{font-size: 18px;}

  } 

