/*
Tutorial Name: Off Canvas Sliding Navigation
Author: Samuel Dalusung
*/


/* GENERAL STYLES
-------------------------------------------------*/


/* CONTAINERS
-------------------------------------------------*/

#container {
    width: 100%;
    height:auto;
    position: relative;
    overflow: hidden;
}

#canvas {
    width: 100%;
    height: auto;
    position: relative;
    padding : 0; 
    /*-webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0);*/
    -webkit-transition:.5s ease all;
    -moz-transition:.5s ease all;
    -o-transition:.5s ease all;
    transition:.5s ease all;
}


/* UTILITIES
-------------------------------------------------*/
#logo {
    position: relative; 
    text-align:center;

}

#logo a {
    position : relative; 
    display : inline-block; 
    vertical-align : top;
}

#logo > a:nth-child(1) {float : left; width: 5%; }
#logo > a:nth-child(2) {display:inline-block; position:relative; width:100%; margin:0 auto; text-align:left;}
#logo > a:nth-child(3) {float :right; width: 5%; }



#bars, #search, #ctl00_LoginMenuMobile1_btnLoginOrLogout{
	font-size: 23px;
	color: #4c8dce;
    padding-top:3px;
}

#bars {
    float:left;    
}

#ctl00_LoginMenuMobile1_btnLoginOrLogout{
	float:right;
}

.fa-lock, .fa-unlock-alt {
    float: right;
    display : none !important;
}

.fa-bars {
    float: left !important;
    display : none !important;
    text-align:left !important;
}

#bars:hover, #ctl00_LoginMenuMobile1_btnLoginOrLogout:hover, #search:hover{
       color: #0071cf;
}

#title{
	margin: 0;
	padding: 1em;
	color: rgba(0,0,0,0.4);
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
	font-weight: 300;
	font-family: Oswald, sans-serif;
}

.border{
    border-top: 1px solid rgba(0,0,0,0.2);
}

a.back {
   color: #38935f; 
   text-decoration: none; 
   text-align: left; 
   font-family: 'Open Sans', sans-serif; 
   font-size: 20px;
   font-weight: 600;
   display: block;
   border: 2px solid #38935f;
   padding: 10px;
   z-index : 999;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
}


/* TOGGLE NAV
-------------------------------------------------*/

#toggle {
    list-style: none;
    float : right;
    width : 100%;
    z-index : 999;
    font-size: 0; 
}

#toggle div:hover a {
    color:#4c8dce;
    text-decoration: none;
}

 span.menu-icons {
    font-size: 15px;
    height: 20px;
    width: 22px;
    /*height: 0px; width: 0px;*/ 
    float: left;
    /*margin: 11px 0px 10px 37px;*/
    color: #fff;
    margin: 0px;
}

span.fa-home {
    display: none;
}

span.the-btn {
    float: right;
    font-size: 20px;
    /*height: 30px;
    width: 43px;*/
    margin-top: 10px;
	margin-right: 8px;
    padding:0;
    color: #fff;
    display:none;
}

#toggle ul {
    list-style: disc;
    display: none;    
}

#toggle li a {
    display : block ;
    width : 100%;
    color: #6d6e71;
    list-style: circle;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size:16px;
    text-transform:capitalize;
    padding-top:9px;
    padding-bottom:7px;
    z-index:999;
    text-align:center;
 }

#toggle li a:first-child {
    font-weight:300;
    font-family:'Open Sans', sans-serif;
    font-size:13px;
 }

#toggle ul li {
       margin-left  : 1em;  
       width:160px;   
       z-index : 999;
       position :relative; 
       display:block ; 
       /*background-color:#4c8dce;*/
       background: #424245;
       border-bottom:solid 1px rgba(0,0,0,0.4);
       opacity:0.95;
}
#toggle ul li:last-child {
       border-bottom:none;
}

#toggle ul li a:hover
{
	/*background: #0071cf;*/  
    background: #282829;
    /*background: #6c6c71;*/
    z-index : 999;
}

#toggle ul li a { 
     z-index : 999;
     color:#ffffff;
}

.fa-bars::before {
    content: "\f0c9";
}

ul {
    margin-left: 0px;
}

a:hover {
    text-decoration: none;
}

/*#searchholder {display: inline-block;}*/
/*#bars {display :none;}*/
/*#toggle div:hover {color:#414042;}*/	
#toggle > li {cursor:pointer; display:inline-block; margin:0em; width:16.66%; font-family:'Oswald', Sans-Serif; font-weight:300; padding-right:0px; margin-right:0px; text-decoration:none !important;}

#toggle > li > ul {position:absolute; width:auto; padding-left:0px; padding-right:0px; }
#toggle li a {text-align:left; text-decoration:none !important;}
#toggle > li > a {list-style:none; margin:0;}
#toggle > li > ul > li {padding-left:0; padding-right:0; }
#toggle > li > ul >  li > a {padding-left:5%; padding-right:5%; margin-left:0; width:90%; display:inline-block ;}
#toggle > li:hover > ul {display:block;}

.display-nav #toggle > li > ul
{
 width : 100%;	
}

.display-nav #toggle > li:hover > ul {display:none;}

.display-nav #toggle  li a:hover
{
	
	 z-index : -1;
     
}

.display-nav #toggle > li > div > a
{
  	 position: relative;
	 z-index : -1;
}


.display-nav #toggle > li > div.nosubmenu > a
{
 
     display : inline-block;	 
	 z-index : 999;
	 width :   90%;
	 margin-left: 1em;
}

.display-nav #toggle ul a:hover
{
	background: #e6e7e8;  
	 z-index : -1;
}







#toggle ul {z-index : 999; /*border:solid 1px #bcbec0;*/}
#toggle ul li ul li a {display:block ; width:100%; list-style:none; padding:0; margin-left:0; }
#title {position:relative; width:auto; float:left; margin:0; }
#title{margin: 0; padding: 1em; color: rgba(0,0,0,0.4); text-shadow: 0 0 1px rgba(0,0,0,0.1); font-weight: 300; font-size: 1em; font-family: 'Oswald', sans-serif; }
#searchmodilediv{ display:none;}
.mobileonly {display:none !important;}


/*************************************************************************************************************************/
@media only screen and (max-width: 1024px) {

#logo {text-align: center; width: 100%;}
#bars {/*float:left; width:10%;*/ display:inline-block;}
#ctl00_LoginMenuMobile1_btnLoginOrLogout {float:right; width:10%;}
/*.fa-bars {float: left;}*/
#toggle span.the-btn, #toggle span.menu-icons {display : block;}
/*.fa {display : block !important;}*/
#logo img {margin-left:auto; margin-right:auto;}
#logo > a:nth-child(2) {width:90%; text-align:center;}
#searchmodilediv{ display:block;}

#toggle > li {cursor:pointer; display:inline-block; margin:0em; width:100%; font-family:'Oswald', Sans-Serif; font-weight:300; padding-right:0px; margin-right:0px;}
.fa-lock, .fa-unlock-alt, .fa-bars {float: right; display : block!important;}
span.the-btn {display:block;}
.mobileonly {display:block !important;}
}

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

/*.divFamilyDesc {width:100%;}*/
}
/* **************************************************** SCREEN 480 *******************************************************/


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

}