@charset "UTF-8";
/* CSS Document */

.page { background-color:#CCC; }

.side-custom-menu h2 {
          background-color: #181818; 
          border-bottom: 3px solid #3e3e3e;
          color: #fff;
 }

.side-custom-menu {
    border: 1px solid #2c2c2c;
    border-radius: 7px;
    overflow: hidden;
    background-color: #2c2c2c;
}

.side-custom-menu ul li {
border-top: none;
}

.side-custom-menu ul li a {
color:#999;
}
 
	 @media only screen and (max-width: 1200px) {
    .hidemobilebox {
        display:none;
    }
    .showmobilebox {
        display:block;
    }
    }
	 
	@media only screen and (max-width: 3000px) {
   
    .showmobilebox {
        display:none;
    }
    }
	
	@media only screen and (max-width: 1199px) {
   
    .showmobilebox {
        display:block;
    }
    }
	
  
/* Modal window sample styles */
/* Vertical centering trick http://css-tricks.com/centering-in-the-unknown/ */
.modal::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin: 0;
}

.target {
  display: block;
  left: 0;
  position: fixed;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
 }

.modal {
  position: fixed;
  top: -550px;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
  display: none;
  z-index:9999;
  /* Fallback for legacy browsers */

}
.modal > .content {
   text-align: left;
   display: inline-block;
   background-color: #333;
   box-sizing: border-box;
   color: white;
   position: relative;
   width: 500px;
   padding: 20px;
     background-color: rgba(0,0,0,0.6);
      /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
 }

 .modal > .content .close-btn {
    position: absolute;
    top: -10px;
    right: 0px;
    width: 15px;
    height: 15px;
    color: white;
    font-size: 18px;
    text-decoration: none;
 }

 /* Behaviour on legacy browsers */
.target:target + .modal {
    display: block;
}

/* Fallback for IE8 */
.modal.is-expanded {
   display: block;
}
.modal.is-expanded > .content {
  top: 20%;
  margin-top: -45px;
}

/* Making main page blurred when modal window open */
:root .target:target ~ .page-container {
   filter: blur(5px);
  -webkit-filter: blur(5px);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='blur5'><feGaussianBlur in='SourceGraphic' stdDeviation='5' /></filter></svg>#blur5"); // for Firefox
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
}
:root span[id="start"]:target ~ .page-container {
 filter: none;
 -webkit-filter: none;
}

/* Behavior on modern browsers */
:root .modal {
  display: block;
  background-color: transparent;
  transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
  transform-origin: center center;
  transform: scale(0, 0);
}
:root .modal > .content {
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
:root .target:target + .modal {
  transform: scale(1, 1);
    background-color: rgba(0,0,0,0.6);
      /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}