/* ##  Left Nav  ## */

.portfolio-navigation {
    float: left;
    display: block;
    position: relative;
    width: 100%;
    margin: 0px 0px 0px 0px;
}

/* 16px baseline (180px - 767px) */
@media only screen and (min-width:11.25em) and (max-width:47.938em) {
 
     .portfolio-navigation.desktop {
         display: none;
     }   
    
    .railNav { 
        margin: 0px 0px 25px 0px !important; 
        padding: 0px 0px 0px 0px; 
        border-top: 1px solid #d7d6d6;
        list-style-type: none;
        letter-spacing: 0px;  
    }

    .railNav li {
        text-align: center;
        position: relative;
        border-bottom: 1px solid #d7d6d6;
    }

    .railNav li:before {
        display: none;
    }

    .railNav ul li {
        border-bottom: none;
    }    

    .railNav li a, 
    .railNav li a:visited {
        display: block;         
        padding: 12px 25px 12px 25px; 
        text-decoration: none; 
        font-size: 16px; 
        line-height: 22px; 
        border-top: none; 
        color: #1E3151;         
    }

    .railNav li a.on, .railNav li a:hover, 
    .railNav li a:focus, 
    .railNav li a:active {
        text-decoration: none; 
        color: #788aa8;
    } 

    .railNav ul {
        margin: -5px 0px 0px 0px; 
        padding: 0px 25px 0px 25px;
        list-style-type: none; 
        background: #ededed;
    }

    .railNav li ul li { 
        padding: 0px;
        border: none;
    }

    .railNav li ul {
        display: none;
    }

    .railNav li li a, 
    .railNav li li a:visited {
        display: block; 
        padding: 12px 15px 12px 15px; 
        font-size: 15px; 
        line-height: 22px;
        color: #414344; 
        text-decoration: none; 
        border-top: none; 
        font-weight: normal;
        border-top: 1px solid #d5d8de;
    }

    .railNav li li a.on, 
    .railNav li li a:hover, 
    .railNav li li a:focus, 
    .railNav li li a:active {
        text-decoration: none; 
        background: none;
    }
 
     .fl-rgt .railNav li a span {
        padding-bottom:2px; 
		border-bottom:2px solid #fff;
    }

	.fl-rgt .railNav li a.on span, .fl-rgt .railNav li a:hover span, 
    .fl-rgt .railNav li a:focus span, 
    .fl-rgt .railNav li a:active span{
        border-color:#788aa8;
    } 	
    
}

/* 16px baseline (768px +) */
@media only screen and (min-width:48em) {
 
    .fl-rgt .railNav { 
        margin: 0px 0px 25px 0px !important; 
        padding: 0px 0px 0px 0px; 
        border-top: 1px solid #d7d6d6;
        list-style-type: none;
        letter-spacing: 0px;  
        /*word-break: break-all;*/
    }

    .fl-rgt .railNav li {
        text-align: left;
        position: relative;
        border-bottom: 1px solid #d7d6d6;
    }

    .fl-rgt .railNav li:before {
        display: none;
    }

    .fl-rgt .railNav ul li {
        border-bottom: none;
    }    

    .fl-rgt .railNav li a, 
    .fl-rgt .railNav li a:visited {
        display: block;         
        padding: 12px 12px 12px 12px; 
        text-decoration: none; 
        font-size: 14px; 
        line-height: 20px; 
        border-top: none; 
        color: #1E3151;         
    }

    .fl-rgt .railNav li a.on, .fl-rgt .railNav li a:hover, 
    .fl-rgt .railNav li a:focus, 
    .fl-rgt .railNav li a:active {
        text-decoration: none; 
        color: #788aa8;
    }
	
    .fl-rgt .railNav li a span {
        padding-bottom:2px; 
		border-bottom:2px solid #fff;
    }

	.fl-rgt .railNav li a.on span, .fl-rgt .railNav li a:hover span, 
    .fl-rgt .railNav li a:focus span, 
    .fl-rgt .railNav li a:active span{
        border-color:#788aa8;
    } 	

    .fl-rgt .railNav ul {
        margin: -5px 0px 0px 0px; 
        padding: 0px 25px 0px 25px;
        list-style-type: none; 
        background: #ededed;
    }

    .fl-rgt .railNav li ul li { 
        padding: 0px;
        border: none;
    }

    .fl-rgt .railNav li li a, 
    .fl-rgt .railNav li li a:visited {
        display: block; 
        padding: 12px 15px 12px 15px; 
        font-size: 15px; 
        line-height: 22px;
        color: #414344; 
        text-decoration: none; 
        border-top: none; 
        font-weight: normal;
        border-top: 1px solid #d5d8de;
    }

    .fl-rgt .railNav li li a.on, 
    .fl-rgt .railNav li li a:hover, 
    .fl-rgt .railNav li li a:focus, 
    .fl-rgt .railNav li li a:active {
        text-decoration: none; 
        background: none;
    }    
    
     .portfolio-navigation.mobile {
         display: none;
     } 
    
    .portfolio-navigation .railNav { 
        display: table;
        margin: 0px 0px 10px -15px; 
        padding: 0px 0px 0px 0px; 
        list-style-type: none;
        letter-spacing: 0px;  
    }

    .portfolio-navigation .railNav li {
        display: inline-block;
        text-align: left;
        margin: 0px 0px 10px 0px;
        padding: 5px 12px;
        position: relative;
        border-right: 1px solid #d5d8de;
    }    

    .portfolio-navigation .railNav li:last-child {
        padding-right: 0px;
        border-right: none;
    }
    
    .portfolio-navigation .railNav li a {
        font-size: 14px;
        font-weight: 500;
        color: #1e3151;
        text-transform: uppercase;
        text-decoration: none;
    }
    
    .portfolio-navigation .railNav li a.on,
    .portfolio-navigation .railNav li a:hover {
        color: #788aa8;
    }    
    
    .portfolio-navigation .railNav li ul {
        display: none;
    }
    
}