/* outside toggle */
#mobileoutside{
	display:block;
	}
/* inside toggle */	
.mobileinside{
	float:right;
	width:30%;
	margin-left:70%;
	position:fixed;
	z-index:100;
	top:120px;

	}
		
.mobileright{
	float:right;
	width:340px;
	background-color: rgba(0,0,0,0.7);
	}
	
.mobilemenuall{
	display:block;
	float:left;
	width:100%;
	
	}

.mobiletopspace{
	display:block;
	float:left;
	width:100%;
	background-color:white;
	border-top:solid 30px #3e4e8c;
	position:fixed;
	z-index:100;
	}

	
#menu ul{
    margin:0;
    padding:0;
    padding-top:40px;
    padding-bottom:40px;
    list-style:none;
    float:left;
    width:100%;
  
   
   
}


nav li a {
	display: inline-block;
	width:100%;
	text-indent:0px;
	
}
	
/* overall menu button styleing */
#menu ul li{
    position: relative;
    width:85%;
	padding-left:15%;
	float:left;
	list-style:none;
	margin-bottom:0px;
	cursor:pointer;	
	line-height:25px;
	font-size:26px;
	padding-top:10px;
	padding-bottom:10px;
	display:block;	
	font-family: 'Helvetica Neue Bold';	
}


 
#menu ul li a{
	color:#ffffff;
	}
	
#menu ul li a:hover {
	color:#2880ff;
	}
	
	
	
	
/**** SHOW SECOND LEVEL MENU ****/

/* Hiding the second level menu until clicked*/
#menu ul li ul{
    position:relative;
    display:none;
    margin-top:20px;  
    margin-bottom:0px;
    border-bottom:none; 
    padding-top:0px;
    padding-bottom:0px; 
}

#menu ul li ul li{
	width:100%;
	padding-right:0%;
    text-indent:0px;
   font-family: 'HelveticaNeueCyr-Light';
    font-size:20px;
    line-height:25px;
        
}

/* When the menu item is clicked show the second level */
#menu ul li:hover ul, 
#menu ul li.iehover ul{
    display:block;
    }

/* We change the background color for the level 2 submenu when hovering the menu */
#menu ul li:hover ul li:hover,
#menu ul li.iehover ul li.iehover{
    background-image:none !important;
    
}


/**** THIRD LEVEL MENU ****/


#menu ul li ul li ul li{
	width:100%;
	padding-left:0px;
    text-indent:20px;
    border-bottom:none;     
}


/* We need to hide the 3rd menu, when hovering the first level menu */
#menu ul li:hover ul li ul,
#menu ul li.iehover ul li ul{
    position:relative;
    display:none;
    margin-top:0px;
}

/* We show the third level menu only when they hover the second level menu parent */
#menu ul li:hover ul li:hover ul,
#menu ul li.iehover ul li.iehover ul{
    display:block;
    left:0px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menu ul li:hover ul li:hover ul li,
#menu ul li.iehover ul li.iehover ul li{
background-color:#f5f5f5;   
}



/* End Teired Menu */


/* TOGGLE AND HAMBURGER STYLING 
How this works is the toggle action is used to open the toggle which has the menu embedded. At the same time the toggle happens the hamburger animation is triggered because the hamburger is embedded in the toggle div #mobileoutside */

/* defines the width of the toggle area which should match the wide the #mobile-icon2 */
#mobileoutside{
	float:right;
	width:30px;
	margin-right:35px;
	margin-top:30px;
	}
		
.mobileinside{
	float:left;
	margin-top:0px;
	display:none;
	}

* {
  margin: 0;
  padding: 0; 
}


/* Hamburger Icon */

/* This defines the width of the active touch area in unison with #mobileoutside */
#mob-icon2 {
  width: 30px;
  height: 40px;
  float:left;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;

  
}

/* this is the line width, color and height an placement*/
#mob-icon2 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 15px;
  background: #001870;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  margin-top:0px;
 
 
}

/* this postions the lines (6 total) in their correct configuration*/
#mob-icon2 span:nth-child(even) {
  left: 15px;
}

#mob-icon2 span:nth-child(odd) {
  left:0px;
}

/* this determines the space between the lines*/
#mob-icon2 span:nth-child(1), 
#mob-icon2 span:nth-child(2) {
  top: 0px;
}

#mob-icon2 span:nth-child(3), 
#mob-icon2 span:nth-child(4) {
  top: 10px;
}

#mob-icon2 span:nth-child(5), 
#mob-icon2 span:nth-child(6) {
  top: 20px;
}

/* this is the angle of rotation */
#mob-icon2.open span:nth-child(1),
#mob-icon2.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#mob-icon2.open span:nth-child(2),
#mob-icon2.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* this determines the postion of each line to make the x happen */

#mob-icon2.open span:nth-child(1) {
  left: 3px;
  top: 5px;
}

#mob-icon2.open span:nth-child(5) {
  left: 3px;
  top: 15px;
}

#mob-icon2.open span:nth-child(2) {
  left: 13px;
  top: 5px;
}

#mob-icon2.open span:nth-child(6) {
  left: 13px;
  top: 15px;
}

#mob-icon2.open span:nth-child(3) {
  left: 0px;
  opacity: 0;
}

#mob-icon2.open span:nth-child(4) {
  left: 0px;
  opacity: 0;
}


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


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@-ms-viewport {width: device-width;}
@viewport {width: device-width;}

/* for iphone 6 plus and the rest */ 
@media screen and (max-width: 736px) {
	
	
.mobiletopspace{
	border-top:solid 20px #3e4e8c;
	}

#mobileoutside{
	float:right;
	width:30px;
	margin-right:15px;
	margin-top:15px;
	}

#menu ul li{
    position: relative;
    width:88%;
	padding-left:12%;
	float:left;
	margin-bottom:0px;
	line-height:20px;
	font-size:18px;
	padding-top:7px;
	padding-bottom:7px;
	display:block;	
	font-family: 'Helvetica Neue Bold';	
}


.mobileright{
	float:right;
	width:100%;
	background-color: rgba(0,0,0,0.7);
	}


#menu ul{
    padding-top:15px;
    padding-bottom:15px;	
}


	
/* inside toggle */	
.mobileinside{
	float:right;
	width:50%;
	margin-left:50%;
	position:fixed;
	z-index:100;
	top:75px;

	}


}



/*for iphone 5*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 320px) { 
		
#menu ul li{
    position: relative;
    width:88%;
	padding-left:12%;
	float:left;
	margin-bottom:0px;
	line-height:21px;
	font-size:14px;
	padding-top:3px;
	padding-bottom:3px;
	display:block;	
	font-family: 'Helvetica Neue Bold';	
}
		
}