@charset "utf-8";
/* CSS Document */
#header{
	position:fixed;
	width:100%;
	z-index:100;
}

.logo-SEI{
	display:inline-block;
	padding:5px 20px;
	height:60px;
	width:300px;
	overflow:hidden;	
	}
	
#header > ul{
	margin:0 30px 0 0;
	padding:0;
	position:relative;
	display:inline-block;
	list-style:none;
	float:right;
}

#header > ul > li{
	display:inline-block;
	color:#354660;
}

.item{
	cursor:hand;
	cursor:pointer;
	color:#354660 !important;
	font-family: 'Archivo Narrow', sans-serif !important;
	font-size:12px;
	display:inline-block;
	padding:5px 20px;
	height:65px;
	margin:0px;
	line-height:70px;
	margin-top:0px;	
	border-top:2px solid #fff;
}

.item:hover{
	background-color:#d5d7e6;
	border-top:2px solid #004785;
	transform:rotateX(10deg);
	text-decoration: none !important;
}

.sub-items{
	padding:0 !important;
	margin:0 !important;
	font-family: 'Archivo Narrow', sans-serif !important;	
	position:absolute;
	top:100%;
	overflow:hidden;
	background:rgba(210,212,226,0.85) !important;	
	opacity:0;
	max-height:0px;
	transform:rotateY(90deg);
	        transition:all 0.4s ease-out;
	   -moz-transition:all 0.4s ease-out;
	-webkit-transition:all 0.4s ease-out;
	-o-transition:all 0.4s ease-out;
	width:220px !important;
}

.sub-items ul{
	font-family: 'Archivo Narrow', sans-serif !important;
	font-size:12px;
	list-style-type:none;
	display:inline-block;
	margin:0px;
	padding:0px;
	width:100%;
	text-decoration:none !important;
}

.sub-items ul li{
	padding:15px;
	width:100%;
	margin-left:0px;
	margin-right:0px;
	text-decoration:none !important;
	border-left:2px solid rgba(210,212,226,0);
	-webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
}

.sub-items ul li:hover {
	width:100%;
	cursor:hand;
	text-decoration:none !important;
	cursor:pointer;
	background:#d5d7e5;
    color:#fff !important;
    border-left: 2px solid #1154A0;
	background-color: #8C97A4;
	
	-webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
}

.item:focus{ 
	background-color:#d5d7e5;
	border-top:2px solid #004785;
	text-decoration:none !important;
}

.item:focus ~ .sub-items{ /* This one is for :focus only not meant for :hover */
	opacity:1;
	display:block;
	z-index:5;
	max-height:2000px;
	position:absolute;
	transform:rotateY(0deg);
	transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-webkit-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
}


/* Responsive Nav */

@media screen and (max-width:645px){
	#header > ul{
		display:none;
	}
}

@media screen and (max-width:555px){
	#content{
		margin:10px;
	}
}

@media screen and (max-width:370px){
	#content{
		margin:0px;
	}
}

@media screen and (max-width:300px){
	.mob-nav .bar1{
		width:15px;
	}
	.mob-nav .bar2{
		width:15px;
	}
	.mob-nav .bar3{
		width:15px;
	}
}

@media screen and (max-width:335px){
	.mob-nav{
		margin-left:-20px;
	}
	.sub-sub{
		margin-left:85% !important;
	}
}

@media screen and (max-width:263px){
	.title{
		display:none;
	}
	.mob-nav{
		margin-left:10%;
	}
}

.mob-nav{
	z-index:99;
    padding:5px 8px;
    background-color:#d5d7e5;
	border-radius:5px;
	position:relative;
	right:10px;
	float:right;
	display:inline-block;
	margin-top:10px;
	cursor:hand;
	cursor:pointer;
	transition:all 0.4s ease;
	width:42px;
}

.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: #004785;
    margin: 6px 0;
    transition: 0.4s ease;
}

.mob-nav:hover .bar1{
	transform:rotate(45deg);
	margin-top:20px;
}

.mob-nav:hover .bar3{
	transform:rotate(-45deg);
	margin-top:-18px;
}

.mob-nav:hover .bar2{
	margin-left:50px;
	opacity:0;
 	visibility:hidden;
}

@media screen and (min-width:646px){
	#header .mob-nav{
		display:none;
	}
}

@media screen and (max-width:616px){
	.title{
		font-size:1.3em;
	}
}

@media screen and (max-width:300px){
	#content{
		margin:0px;
	}
}
	/* Mob-nav Working */
.mob-nav:hover{		
		border-radius:5px;	
	}

.sub{
	padding:0 !important;
	position:absolute;
	top:0%;
	right:0px;
	width:150px;
	background:rgba(211,213,227,0.9) !important;	
	margin-right:-8px;
	display:block;
	visibility:hidden;
	opacity:0;
	max-height:0;
	border-radius:30px;
	transition:all 0.2s linear;
	text-decoration:none !important;
}

.sub ul{
	margin:0;
	padding:0;
	font-family: 'Archivo Narrow', sans-serif !important;
	font-size:12px;
	text-decoration:none !important;
}

.sub ul li{
	list-style:none;
	margin:0;
	padding:10px;
	display:block;
	border-left:2px solid rgba(210,212,226,0);
	text-decoration:none !important;
}

.sub ul li:hover{
	background:rgba(211,213,227,0.9) !important;
	border-left:2px solid #004785;
	text-decoration:none !important;	
}

.mob-nav:hover .sub{
	visibility:visible;
	opacity:1;
	max-height:500px;
	transition:all 0.2s ease;
	border-radius:0px;
	top:100%;
	text-decoration:none !important;	
}

.sub-sub{
	z-index:1;
	position:absolute;
	top:180px;
	width:150px;
	right:150px;
	float:right;
	margin-left:75px;
	margin-top:20px;
	visibility:hidden;
	opacity:0;
	transform: skewY(50deg);
	background:rgba(211,213,227,0.85) !important;	
	transition:all 0.2s ease;
}

.sub-sub ul li:hover{
	background:rgba(211,213,227,0.85) !important;
	text-decoration:none !important;
	border-left:2px solid #004785;
}

.sub ul li:hover .sub-sub{
	display:block;
	visibility:visible;
	opacity:1;
	top:11%;
	transform: skewY(0deg);
	text-decoration:none !important;
	
}