@font-face {
    font-family: 'GameMine'; /*a name to be used later*/
    src: url('fonts/gamemine.ttf'); /*URL to font*/
}

.gmine {
  position: fixed;
  width: 250px;
  height: 100%;
  top: 0;
  z-index: 9999;
  background: #101c2a;
  overflow: auto;
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
  /* enables momentum scrolling in iOS overflow elements */
}
.gmine a {
  display: block;
  color: #fff;
  padding: 10px 18px;
  outline: 0;
  font-size: medium;
  border-bottom: 1px solid #000;
}

.gmine-padding-none{
  padding: 0px !important;
}

.gmine-padding-rfnone{
  padding: 0px 10px 0px 10px;
}

.gmine-margin-none{
  margin: 0px !important;
}

.gmine-padding-hnone{
  padding: 20px 0px 0px 0px !important;
}

.gmine-padding-right{
  padding-right: 20px !important;
}

.gmine-padding-left{
  padding-left: 20px !important;
}

.gmine-margin-top{
  margin-top: 20px;
}

#topright img {
    position: absolute;
    top: 0px;
    right: 0px;
}

.rightimg div{
  width: 32px;
    height: 32px;
    display: inline-block;
    position: absolute;
    z-index: 5;
    top: 50%;
    margin-top: -10px;
    background-image:url(../img/right.png);
}

.rightimg div:hover{
   background-image:url(../img/fright.png); 
      -o-transition:color .1s ease-out, background 0.5s ease-in;
  -ms-transition:color .1s ease-out, background 0.5s ease-in;
  -moz-transition:color .1s ease-out, background 0.5s ease-in;
  -webkit-transition:color .1s ease-out, background 0.5s ease-in;
}

.leftimg div{
    width: 32px;
    height: 32px;
    display: inline-block;
    position: absolute;
    z-index: 5;
    top: 50%;
    margin-top: -10px;
    background-image:url(../img/left.png);
}

.leftimg div:hover{
   background-image:url(../img/fleft.png); 
      -o-transition:color .1s ease-out, background 0.5s ease-in;
  -ms-transition:color .1s ease-out, background 0.5s ease-in;
  -moz-transition:color .1s ease-out, background 0.5s ease-in;
  -webkit-transition:color .1s ease-out, background 0.5s ease-in;
}

.carousel{
  padding-top: 25px;
  padding-bottom: 25px;
  background:#E6E6E6;
}

.gmine a:hover{
   color:rgba(255,255,255, 1.5); /*where 0.5 stands for 50% opacity*/
   -o-transition:color .1s ease-out, background 0.5s ease-in;
  -ms-transition:color .1s ease-out, background 0.5s ease-in;
  -moz-transition:color .1s ease-out, background 0.5s ease-in;
  -webkit-transition:color .1s ease-out, background 0.5s ease-in;
}
.gmine a:focus{
   color:rgba(255,255,255, 1.5); 
    -o-transition:color .1s ease-out, background 0.5s ease-in;
  -ms-transition:color .1s ease-out, background 0.5s ease-in;
  -moz-transition:color .1s ease-out, background 0.5s ease-in;
  -webkit-transition:color .1s ease-out, background 0.5s ease-in;
}

.gmine a:link{
  text-decoration: none;
}

.gmine.gmine-left {
  left: 0;
}
.gmine.gmine-right {
  right: 0;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    line-height: 55px;
    background: #393939;
}

#gm-img {
    float: right;
    display: block;
    width: 40%;
    text-align: center;
    vertical-align: middle;
}

#gm-text {
    float: left;
    display: block;
    vertical-align: middle;
    color: #fff;
    padding-left: 10px;
    font-weight: 600;
    font-size: medium;
    width: 60%;
    text-align: center;
}

.gmine ul li a span{
  float: left;
}

.gmine ul li:hover{
  background: #080f17;
   -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.gmine ul li a:target { background-color:black; }

.gmine ul li a span .home-icon{
  background-image:url(../img/home.png);
  background-position:left;
}

.gmine ul li a span .about-icon{
  background-image:url(../img/about.png);
  background-position:left;
}


.gmine ul li a span .contact-icon{
  background-image:url(../img/contact.png);
  background-position:left;
}

.gmine ul li a span .project-icon{
  background-image:url(../img/service.png);
  background-position:left;
}

.gmine ul li a span .team-icon{
  background-image:url(../img/team.png);
  background-position:left;
}

.gmine ul li a span .career-icon{
  background-image:url(../img/career.png);
  background-position:left;
}

.gmine ul li a span .gmicons{
  width:16px;
  height:16px;
  display:block;
  margin-right: 10px;
  /*Pixelated issue арилгахын тулд*/
  image-rendering: -moz-crisp-edges;
  image-rendering:   -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor; 
}

/* Menu Movement */
.gmine-left {
  -webkit-transform: translate3d(-250px, 0, 0);
  -ms-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}

.gmine-open-left #container,
.gmine-open-left .push {
  -webkit-transform: translate3d(250px, 0, 0);
  -ms-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

.gmine-right {
  -webkit-transform: translate3d(250px, 0, 0);
  -ms-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

.gmine-open-right #container,
.gmine-open-right .push {
  -webkit-transform: translate3d(-250px, 0, 0);
  -ms-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}

.gmine-open-left .gmine,
.gmine-open-right .gmine {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  overflow-y:hidden;
}

/* Menu Transitions */
#container,
.gmine,
.push {
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* Site Overlay */
.site-overlay {
  display: none;
}

.gmine-open-left .site-overlay,
.gmine-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 500ms;
  animation: fade 500ms;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Submenu Appearance */
.gmine-submenu {
  /* Submenu Icon */
}
.gmine-submenu ul {
  padding-left: 15px;
  transition: max-height 0.2s ease-in-out;
}
.gmine-submenu ul .gmine-link {
  transition: opacity 0.2s ease-in-out;
}
.gmine-submenu > a {
  position: relative;
}
.gmine-submenu > a::after {
  content: '';
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  background: url("../img/arrow.svg") no-repeat;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: transform 0.2s;
}

/* Submenu Movement */
.gmine-submenu-closed ul {
  max-height: 0;
}
.gmine-submenu-closed .gmine-link {
  opacity: 0;
}

.gmine-submenu-open {
  /* Submenu Icon */
}
.gmine-submenu-open ul {
  max-height: 1000px;
}
.gmine-submenu-open .gmine-link {
  opacity: 1;
}
.gmine-submenu-open a::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

.no-csstransforms3d .gmine-submenu-closed ul {
  max-height: none;
  display: none;
}

.gmine-logo{
  position:absolute; 
  top:0; 
  right:0; 
  margin-right:120px;
  margin-top:15px;
}

.gmine-logo img{
  max-width:120px;
  max-height:120px; 
}

.gmine-logo img:hover{
  opacity: 0.7;
  cursor: crosshair;
}

@media (min-width: 0px) and (max-width: 450px) {
  .gmine-logo{
    position:absolute;
    top: 0px;
    right: 0px;
    margin-right:30px;
    margin-top:10px;
  }

  .gmine-logo img{
    max-width:100px;
    max-height:70px; 
  }
}
@media (min-width: 451px) and (max-width: 767px) {     
  .gmine-logo{
    position:absolute; 
    top:0; 
    right:0; 
    margin-right:30px;
    margin-top:10px;
  }

  .gmine-logo img{
    max-width:120px;
    max-height:90px; 
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .gmine-logo{
    position:absolute; 
    top:0; 
    right:0; 
    margin-right:30px;
    margin-top:10px;
  }

  .gmine-logo img{
    max-width:130px;
    max-height:100px; 
  }
}