/* ==========================
   MENU FULLPAGE CSS
========================== */

.panel {
    position: fixed;
    right: -100%; /*left or right and the width of your navigation panel*/
    width: 100%; /*should match the above value*/
	border-radius:0px;
	
}

.menu-link i {
    text-decoration: none;
    font-size: 40px;
    color: #fff;
}

#menu{
    background:rgba(58,74,92,1); background-size:cover;
    z-index: 9999;
}

#menu .main-manu ul{
    margin: 8% 0px 0px 10%; padding:0px;
}
#menu .main-manu li.menu-services-group > ul.menu-services-list {
    margin: 0 0 0 40%;
}

#menu .main-manu li{
	position:relative;
    transition: all 0.4s ease;
	list-style:none;
	overflow:visible;
}

#menu .main-manu li a{
    color: #fff;
    font-size: 35px;
    text-decoration: none;
    font-family: 'robotobold';

    text-transform: uppercase;
    padding:10px 0;
	text-align:left;
	display:inline-block;
	 transition: all 0.4s ease;
}

#menu .main-manu li a:hover{
   /* background: rgba(33, 33, 33, 0.8);*/
   color:#2993d1;
   margin-left:20px;
}

/* Allow submenu to escape mCustomScrollbar's overflow:hidden containers */
#menu .mCustomScrollBox,
#menu .mCSB_container {
    overflow: visible !important;
}

/* Services hover group — inline flow, never clipped by mCustomScrollbar */
#menu .main-manu li.menu-services-group { position:relative; }

#menu .main-manu li.menu-services-group > ul.menu-services-list {
    max-height: 0 !important;
    overflow: hidden !important;
    list-style: none;
    margin: 0 0 0 40%;
    padding: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#menu .main-manu li.menu-services-group.open > ul.menu-services-list {
    max-height: 400px !important;
    overflow: visible !important;
    opacity: 1;
}
#menu .main-manu .menu-services-list li a {
    font-size: 18px;
    color: rgba(255,255,255,0.70);
    padding: 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    transition: all 400ms ease-in-out;
}
#menu .main-manu .menu-services-list li a:hover {
    color: #fff;
    margin-left: 15px;
}
#menu .main-manu li a.spanline { position:relative; }
#menu .main-manu li a.spanline:after { width:0px; height:1px; background:#fff; position:absolute; top:35px; right:0px; content:""; transform:translateX(0px); transition:all 500ms ease-in-out; }
#menu .main-manu li a:hover.spanline:after { transform:translateX(150px); width:150px; background:#2993d1; }

.nav-social { text-align:left; }
.nav-social ul.social { margin:40px 0% 30px 10%; padding:0px; display:inline-block; }
.nav-social .social li { list-style:none; float:left; padding:0px 25px 0px 0px; margin-right:25px; border-right:1px solid #47596f; line-height:normal; }
.nav-social .social li a {width:30px; height:30px; display:block; text-align:center; transition:all 500ms ease-in-out  }
.nav-social .social li a i { font-size:25px; color:#fff;   transition:all 500ms ease-in-out }
.nav-social .social li:last-child { margin-left:0px;  }
.nav-social .social li a:hover i{ color:#2993d1 }


.menu-link {
  z-index: 99999;
  display: block;
  position: fixed;
  top:30px;
  right:13%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 70px;
  height:52px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
 background:rgba(255,255,255,0.30);
  transition:all 500ms ease-in-out;
}

.menu-link:focus {
  outline: none;
}

.menu-link span {
  display: block;
  position: absolute;
  top: 25px;
  left: 18px;
  right: 18px;
  height:2px;
  border-radius:0px;
  background:#252424;
  transition:all 400ms ease-in-out;
/*  -webkit-transition: background 0 0.3s;
          transition: background 0 0.3s;*/
}

.menu-link span::before,
.menu-link span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height:2px;
  border-radius:0px;
  background-color: #252424;
  content: "";
  /*-webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;*/
		  transition:all 400ms ease-in;
}

.menu-link span::before {
  top: -12px;
  /*-webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;*/
}

.menu-link span::after {
  bottom: -12px;
 /* -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;*/
}

a.menu-link:hover span::before {top: -15px;}
a.menu-link:hover span::after {bottom: -15px;}


/*a:hover.menu-link span {-webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);}

a:hover.menu-link span::before {

  left: 20px;
   -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
          transform: translateX(-40px);
}

a:hover.menu-link span::after {

  left: 20px;
  -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
          transform: translateX(-40px);
}*/


/* active state, i.e. menu open */
.menu-open {
  background-color: transparent;
}

.menu-open span {
  -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
          transform: translateX(10px);
background-color: #fff;
}

.menu-open span::before {
  /*top: 0;*/
  left: 20px;
   -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
          transform: translateX(-40px);
}

.menu-open span::after {
  /*bottom: 0;*/
  left: 20px;
  -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
          transform: translateX(-40px);
}

.menu-open span::before,
.menu-open span::after {
	background-color: #fff;
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
}


.main-manu {
	height:100%;

}

.main-manu {
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.main-manu a {
	display: block;

	-webkit-transform: translate3d(0,500px,0);
	transform: translate3d(0,500px,0);
}

.main-manu,
.main-manu li a {
	-webkit-transition: -webkit-transform 0s 0.4s;
	transition: transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.main-manu li a:nth-child(2), #menu .main-manu ul.dropdown-menu li a:nth-child(2) {
	-webkit-transform: translate3d(0,1000px,0);
	transform: translate3d(0,1000px,0);
}

.main-manu li a:nth-child(3) {
	-webkit-transform: translate3d(0,1500px,0);
	transform: translate3d(0,1500px,0);
}

.main-manu li a:nth-child(4) {
	-webkit-transform: translate3d(0,2000px,0);
	transform: translate3d(0,2000px,0);
}

.main-manu li a:nth-child(5) {
	-webkit-transform: translate3d(0,2500px,0);
	transform: translate3d(0,2500px,0);
}

.main-manu li a:nth-child(6) {
	-webkit-transform: translate3d(0,3000px,0);
	transform: translate3d(0,3000px,0);
}

.main-manu a span {
	margin-left: 10px;
	font-weight: 700;
}

/* Shown menu */
.show-menu .menu-wrap {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .main-manu,
.show-menu .main-manu li a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .main-manu li a {
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;
}

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

.menu-link { top:15px;
    right: 5%;
}

}


@media screen and (max-width:998px) {
	
	
	#menu .main-manu li.menu-services-group > ul.menu-services-list { margin-left:46%; }

.main-manu {
	-webkit-transform: none;
	transform: none;
}

.main-manu a {
	display: block;

	-webkit-transform: none;
	transform: none;
}


 }

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


 
.nav-social ul.social { margin: 3% 0 0 5%;}
#menu .main-manu ul {  margin: 3% 0 0 5%;  padding: 0;}
#menu .main-manu li a { font-size: 23px; }
#menu .main-manu li a.spanline::after { top:26px; }


 
}

@media screen and (max-width:640px) {
.main-manu {text-align: center;}
.nav-social {text-align: center;}
.menu-link { background:none }
#menu .main-manu li a {  text-align:center; font-size:20px; }
#menu .main-manu ul { margin: 10% 0 0 0%; }
.nav-social ul.social { margin:6% 0 50px 0%;}
.nav-social .social li a i {color: #fff;   font-size: 21px;}

.nav-social .social li { margin-right: 15px;
    padding: 0 15px 0 0;}

#menu .main-manu .menu-services-list { margin-left:0; text-align:center; }
#menu .main-manu .menu-services-list li a { font-size:14px; color:#dddddd; }
#menu .main-manu .menu-services-list li a:hover { color:#fff; margin-left:0; }
 

/*.menu-link span::before, .menu-link span::after, .menu-link span { background:#fff; } */

}