/*..Side_Nav..*/

#main-nav{z-index:1; width:275px; height:70px; position:fixed; -webkit-transition:background 0.2s ease-in-out; transition:background 0.2s ease-in-out; text-align:center; overflow-y:overlay; top:0px;}

#main-nav.show{background:#013bd2; display:block; box-shadow:5px 0px 100px 5px #333333b8; height:100%;}



#nav-button{background:#013bd1; height:40px; width:40px; border-radius:50%; top:15px; left:10px; position:absolute; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; color:#fff; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; overflow:hidden; z-index:999;}

#nav-button:hover{cursor:pointer;}

#nav-button .fa{position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; display:block; width:1em; height:1em; font-size:1em; opacity:1; -webkit-transition:opacity 0.4s ease-in-out; transition:opacity 0.4s ease-in-out;}

#nav-button.width{background:#fff; color:#013bd1; box-shadow:0 7px 15px 0 rgba(0, 0, 0, 0.3);}

#nav-button.width:before{content:''; display:block; width:0.4em; height:0.4em; border-radius:50%; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; -webkit-animation:color 0.3s linear; animation:color 0.3s linear;}

#nav-button .width .fa{color:#333;}

#nav-list{position:absolute; top:0px; display:none; -webkit-transition:opacity 0.2s ease-in-out; transition:opacity 0.2s ease-in-out; width:100%; padding:20px 0px; overflow-y:overlay;}

#nav-list.nav-show{display:block;}



@-moz-document url-prefix(){

    #nav-list{height:100vh;}

}

@-moz-document url-prefix(){

	.mobile_top_nav li{border-top:1px solid #ffffff;}

}



.profile-img{margin:0px 0px 20px 0px}

.profile_image{position:relative; width:120px; height:120px; display:inline-block;}

.profile_image:after{content:''; width:130px; height:130px; background:#003bd1; position:absolute; top:0; left:0; border-radius:100px; z-index:-1;transform:rotate(-160deg);}

.profile-img img{width:120px; height:120px; padding:5px; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -o-border-radius:100px; -ms-border-radius:100px; box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.5); -ms-box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.5);}

.profile-img h1{color:#fff; font:normal 20px Poppins_regular;}

.profile-img h2{font-size:14px; font-weight:normal; color:#bdd6f5;}



.menu-bar{list-style:none; margin:0px; padding:0px; text-align:center;}

.menu-bar li{display:block; border-bottom:1px solid #ffffff40;}

@-moz-document url-prefix(){

	.menu-bar li{border-bottom:1px solid #ffffff;}

}

.menu-bar li:last-child{border-bottom:none;}

.menu-bar i{font-size:28px; display:block; margin:0 0 0px 0; position:relative;}

.menu-bar li a{color:#fff; font-size:14px; font-family:Poppins_light; display:block; padding:22px 0; letter-spacing:0.5px; text-decoration:none;}

.menu-bar li a:hover{background-color:rgba(134, 225, 189, 0.102); text-decoration:none; color:#9effd9;}



.show{

	animation:animationFrames linear 1s;

	animation-iteration-count:1;

	transform-origin:50% 50%;

	-webkit-animation:animationFrames linear 1s;

	-webkit-animation-iteration-count:1;

	-webkit-transform-origin:50% 50%;

	-moz-animation:animationFrames linear 1s;

	-moz-animation-iteration-count:1;

	-moz-transform-origin:50% 50%;

	-o-animation:animationFrames linear 1s;

	-o-animation-iteration-count:1;

	-o-transform-origin:50% 50%;

	-ms-animation:animationFrames linear 1s;

	-ms-animation-iteration-count:1;

	-ms-transform-origin:50% 50%;

}

@keyframes animationFrames{

	0%{

		opacity:1;

		-ms-transform:translate(-350px,0px);

	}

	50% {

		opacity:;

		-ms-transform:translate(0px,0px);

	}

	100% {

		opacity:;

		-ms-transform:translate(-50px,0px);

	}

}



@-moz-keyframes animationFrames{

	0%{

		opacity:1;

		-ms-transform:translate(-350px,0px);

	}

	50%{

		opacity:;

		-ms-transform:translate(0px,0px);

	}

	100%{

		opacity:;

		-ms-transform:translate(-50px,0px);

	}

}



@-webkit-keyframes animationFrames{

	0%{

		opacity:1;

		-ms-transform:translate(-350px,0px);

	}

	50%{

		opacity:;

		-ms-transform:translate(0px,0px);

	}

	100%{

		opacity:;

		-ms-transform:translate(-50px,0px);

	}

}



@-o-keyframes animationFrames{

	0%{

		opacity:1;

		-ms-transform:translate(-350px,0px);

	}

	50%{

		opacity:;

		-ms-transform:translate(0px,0px);

	}

	100%{

		opacity:;

		-ms-transform:translate(-50px,0px);

	}

}



@-ms-keyframes animationFrames{

  	0%{

		opacity:1;

		-ms-transform:translate(-350px,0px);

	}

	50%{

		opacity:;

		-ms-transform:translate(0px,0px);

	}

	100%{

		opacity:;

		-ms-transform:translate(-50px,0px);

	}

}



/* General styles for all menus */

.top_nav{list-style:none; margin:0px; padding:0px; float:right;}

.top_nav li{float:left; display:block; border-right:1px solid #d9d9d9; line-height:60px;}

.top_nav i{font-size:20px; vertical-align:middle; margin:0px 10px 0 0; position:relative; top:-2px;}

.top_nav li a{color:#273346; font-size:14px; font-family:'Poppins_regular'; display:block; padding:5px 15px; text-decoration:none; position: relative;}

.top_nav li a:hover{text-decoration:none; background:#ffffff7a; color:#86e1bd;}

.logout{background:#86e1bd;}

.main{display:none;}

.buttonset i{font-size:50px; color:#013bd1;}

.buttonset button:focus{outline:none;}

.logout i{transform:rotate(-90deg); display:inline-block;}



.mobile_nav{display:none;}

.mobile_top_nav{list-style:none; margin:0px; padding:0px;}

.mobile_top_nav li{display:block; border-bottom:1px solid #ffffff40;}

.mobile_top_nav li:first-child{border-top:1px solid #ffffff40;}

.mobile_top_nav li:last-child{border-bottom:none;}

.mobile_top_nav i{font-size:28px; display:block; margin:0 0 0px 0; position:relative;}

.mobile_top_nav li a{color:#fff; font-size:14px; font-family:Poppins_light; display:block; padding:22px 0; letter-spacing:0.5px; text-decoration:none;}

.mobile_top_nav li a:hover{background-color:rgba(134, 225, 189, 0.102); text-decoration:none; color:#9effd9;}

.mobile_logo{display:none;}



.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f1f1f1;

    min-width: 200px;

    overflow: auto;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}

.dropdown-content a {

    color: black;

    padding:0px 16px 0px 16px !important;

    text-decoration: none;

    display: block;

}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}



@media (max-width:1023px){

	.top_nav li a{font-size:12px; padding:5px 10px;}

}

@media (max-width:767px){

	.mobile_nav{display:block;}

	.top_nav{display:none;}

	.mobile_logo{display:block; position:absolute; top:18px; z-index:1; text-align:center; width:100%;}

	.mobile_logo img{width:180px; height:auto;}

	#nav-button{background:#fff; color:#fff;}

}