/*
┌─┐┌─┐┬  ┬┬  ┬┬┌─┌─┐ ┌─┐┌─┐┌┬┐
├─┘├─┤└┐┌┘│  │├┴┐└─┐ │  │ ││││
┴  ┴ ┴ └┘ ┴─┘┴┴ ┴└─┘o└─┘└─┘┴ ┴
==============================
@project:DATA SCIENCE INTERNATIONAL.
@description: Responsive Menu Styles
@developer: Kasun Peiris.
@version: 1.0.
@date:2015/11/16- 2015/11/20.
*/





/*
MAIN & MOBILE NAVIGATION
========================
*/

#main-nav{
    text-align: left;
    margin-bottom:5px!important;
    border:none;
}
#main-nav li:first-of-type,
#main-nav li a:first-of-type{
    margin-left:0;
    padding-left:0;
}
#main-nav li{
    border:0!important;
}

#main-nav > li {
    display:inline-block;
    font-weight:bold;
    color:#fff;
    margin: 0 10px;
}
#main-nav li a{
    color:#fff;
    font-size: 0.9em!important;
    text-transform:uppercase;
    transition:0.5s all ease;
    }
#main-nav li a:hover,
#main-nav li a:focus {
    transition:0.5s all ease;
    color:#333;
    /*color:rgba(8, 143, 211, 1);*/
    
}
#main-nav li span {
    margin-left:5px;
}
.dropdown{
    background:#e5982e;
    border:none!important;
    padding: 10px!important;
}

#main-navigation a {
    font-size:14px!important;
    padding:0!important;
    padding:5px 0 5px 5px!important;
}

#wrap {
    overflow: hidden!important;
    position: relative!important;
    width: 100%!important;
    z-index: 10!important;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}
@media (max-width: 1024px) {
    #nav-toggle:checked~#wrap {
        position: fixed;
        -webkit-transform: translateX(-74%);
        -moz-transform: translateX(-74%);
        -o-transform: translateX(-74%);
        -ms-transform: translateX(-74%);
        transform: translateX(-74%);
    }
}
.ham {
    
    color: #fff;
    cursor: pointer;
    font: 700 14px "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 15px;
    margin: 0;
    padding: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ham>i {
    float: left;
    margin-top: 38px;
    margin-right: 8px;
    font-style: normal;
    width: 35px;
    color: #fff;
}
.ham span {
    background: #fff;
    display: block;
    height: 7px;
    margin: 3px 0;
    position: relative
}
.ham span:first-child {
    margin-top: 0
}
#mobile-nav {
    background: #e5982e;
    display: block;
    height: 100vh;
    right: -75%;
    overflow: hidden;
    overflow-y: scroll!important;
    position: fixed;
    width: 75%;
    z-index: 10000;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}
#mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}
#mobile-nav ul li {
    margin-bottom: 0
}
#mobile-nav ul a {
    color: #fff;
}
#mobile-nav ul a b {
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease
}
#mobile-nav ul a.open b {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}
#mobile-nav>ul {
    line-height: 1em
}
#mobile-nav>ul>li {
    border-bottom: 1px rgba(255, 255, 255, .1) solid;
    padding-bottom: 10px
}
#mobile-nav>ul>li>a {
    cursor: pointer;
    display: block;
    font-weight: 700;
    padding: 16px 14px 10px 14px
}
#mobile-nav>ul>li>a b {
    float: right;
    width: 35px!important;
}

#mobile-nav ul li li a b.open {
    transform:rotate(90deg);
}
#mobile-nav>ul>li>a b:before {
    font: 400 12px "FontAwesome";
    content: "\f078"
}
#mobile-nav>ul>li ul {
    display: none;
    font-size: 16px
}
#mobile-nav>ul>li ul>li>a {
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    display: block;
    font-size: 14px;
    line-height: 1em;
    padding: 8px 5px 8px 28px;
    position: relative
}
#mobile-nav>ul>li ul>li>a:before {
    background: #fff;
    content: "";
    height: 4px;
    left: 15px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 4px;
    z-index: 100;
    -webkit-border-radius: 100%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 100%;
    -moz-background-clip: padding;
    border-radius: 100%;
    background-clip: padding-box
}
#mobile-nav>ul>li ul>li>ul {
    display: none
}
@media (max-width: 1024px) {


    #masthead {
        padding:0!important;
    }
    #nav-toggle:checked~#mobile-nav {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
#nav-toggle:checked~#footer {
    display: none
}