/* --------------------------------------------------

    GLOBAL

-------------------------------------------------- */

html, body.lyt-ho {
    height: 100%;
}
body.lyt-mo {
    width: 100%;
    overflow-x: hidden;
}

body.lyt-mo.mobile-menu-opened {
    overflow: hidden;
}


.lyt-mo #wrap {
    border-top: 50px solid #555;
}


/* --------------------------------------------------
    HEAD
-------------------------------------------------- */

.lyt-mo #head {
    width: 270px;

    z-index: 2;
    overflow: auto;
    position: fixed;
    top: 50px;
    left: -270px;
    bottom: 0;

    color: #fff;
    background-color: #000;

    -webkit-overflow-scrolling: touch;

    -webkit-transition: right 300ms ease-in-out;
       -moz-transition: right 300ms ease-in-out;
         -o-transition: right 300ms ease-in-out;
            transition: right 300ms ease-in-out;
}

.lyt-mo #head h1 {
    display: none;
}

.lyt-mo #head .menu {
    border-top: 1px solid #222;
}
.lyt-mo #head .menu li {
    border-bottom-color: #222;
}

.lyt-mo.mobile-menu-opened #head {
    /*display: block;*/
/* BK    right: 0;*/
	left: 0;
/* KB */
    -webkit-transition: left 300ms ease-in-out;
       -moz-transition: left 300ms ease-in-out;
         -o-transition: left 300ms ease-in-out;
            transition: left 300ms ease-in-out;
}


/* --------------------------------------------------
    MEAD
-------------------------------------------------- */

.lyt-mo #mead {
    width: 100%;
    height: 50px;
    display: block;
    z-index: 2;
    position: fixed;
    top: 0;
/* BK    right: 0;*/
	left: 0;
/* KB */
	
    background-color: #000;
    -webkit-backface-visibility: hidden;
}

.lyt-mo.mobile-menu-opened #mead {
/* BK    width: 270px;
    right: 0;*/
	width: 270px;
	left: 0;
/* KB

    -webkit-transition: width 300ms ease-in-out;
       -moz-transition: width 300ms ease-in-out;
         -o-transition: width 300ms ease-in-out;
            transition: width 300ms ease-in-out;
 */
}

.lyt-mo #mead .back,
.lyt-mo #mead .icon,
.lyt-mo #mead .logo,
.lyt-mo #mead .toggle {
    display: block;
    height: 50px;
    line-height: 50px;
    position: relative;

    white-space: nowrap;
    overflow: hidden;
    text-indent: 110%;
}

.lyt-mo #mead .back:after,
.lyt-mo #mead .icon:after,
.lyt-mo #mead .logo:after,
.lyt-mo #mead .toggle:after {
    content: ' ';
    display: block;
    background-image: url(oj-img/sprites.svg);
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    left: 50%;
}
/* BK*/

.lyt-mo.mobile-menu-opened #mead .icon,
.lyt-mo.mobile-menu-opened #mead .logo {
	display:none;
}
/* -------------------------
    BACK
------------------------- */

.lyt-mo #mead .back {
    width: 50px;
    float: left;
    display: none;
}
.lyt-mo #mead .back:after {
    width: 14px;
    height: 28px;
    margin-top: -14px;
    margin-left: -7px;

    background-position: -95px -52px;
}

/* -------------------------
    ICON
------------------------- */

.lyt-mo #mead .icon {
    width: 50px;
    
/* BK     float: left;*/
	float:right;
}
.lyt-mo #mead .icon:after {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    background-image: url(oj-img/logo.png) !important;
    background-position: 0 0;
}

/* -------------------------
    LOGO
------------------------- */

.lyt-mo #mead .logo {
    width: 100px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
}
.lyt-mo #mead .logo:after {
    width: 98px;
    height: 20px;
    margin-top: -9px;
    margin-left: -49px;
    /*background-image: url(oj-img/logo.png) !important;*/
    background-position: -36px -173px;
}

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

.lyt-mo #mead .toggle {
    width: 50px;
    
/* BK    float: right;*/
	float: left;
/* KB */
}

.lyt-mo.mobile-menu-opened #mead .toggle{
	float:right;
    -webkit-transition: right 300ms ease-in-out;
       -moz-transition: right 300ms ease-in-out;
         -o-transition: right 300ms ease-in-out;
            transition: right 300ms ease-in-out;
}

.lyt-mo #mead .toggle:before,
.lyt-mo #mead .toggle:after {
    content: ' ';
    display: block;
    width: 18px;
    margin-top: -7px;

    position: absolute;
    left: 15px;
    top: 50%;

    border-style: solid;
    border-color: #f2f2f2;
}
.lyt-mo #mead .toggle:before {
    height: 11px;
    border-width: 1px 0;
}
.lyt-mo #mead .toggle:after {
    height: 6px;
    border-width: 0 0 1px;
}

.lyt-mo.mobile-menu-opened #mead .toggle{
	border:none;
}
.lyt-mo.mobile-menu-opened #mead .toggle:before{
	border:none;
}
.lyt-mo.mobile-menu-opened #mead .toggle:after{
	border:none;
	width: 14px;
    height: 28px;
    margin-top: -12px;
    margin-left: -7px;
    background-position: -580px -51px;
    content: ' ';
    display: block;
    background-image: url(oj-img/sprites.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
}


/* -------------------------
    HAS BACK ?
------------------------- */
/* lorsqu'on n'est pas au 1er niveau */

.lyt-mo #mead.has-back .back {
    display: block;
    
    -webkit-transition: left 300ms ease-in-out;
       -moz-transition: left 300ms ease-in-out;
         -o-transition: left 300ms ease-in-out;
            transition: left 300ms ease-in-out;

}
.lyt-mo #mead.has-back .icon {
/*    display: none;*/
}


/* --------------------------------------------------
    MAIN
-------------------------------------------------- */

.lyt-mo #main {
    width: 100%;

    z-index: 1;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;

    -webkit-transition: margin-left 300ms ease-in-out;
       -moz-transition: margin-left 300ms ease-in-out;
         -o-transition: margin-left 300ms ease-in-out;
            transition: margin-left 300ms ease-in-out;
}
.lyt-mo.mobile-menu-opened #main {
/*BK     margin-left: -270px;*/
	margin-left: 270px;
}

.lyt-mo #main:after {
    content: ' ';
    display: block;

    z-index: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;

    background: rgba(0, 0, 0, 0);

    -webkit-transition: background 300ms ease-in-out;
       -moz-transition: background 300ms ease-in-out;
         -o-transition: background 300ms ease-in-out;
            transition: background 300ms ease-in-out;
}
.lyt-mo.mobile-menu-opened #main:after {
    width: auto;
    height: auto;

    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.5);
}


/* --------------------------------------------------
    PAGE
-------------------------------------------------- */

.lyt-mo .page {
    position: relative;
    height: 100%;
}
.lyt-mo .page.is-mobile-hidden {
    display: none;
}


/* --------------------------------------------------
    SECTION
-------------------------------------------------- */

.lyt-mo .section.full-height {
    position: relative;
    min-height: 100%;
}













/* --------------------------------------------------

    GLOBAL

-------------------------------------------------- */

.lyt-mo .menu li {
    border-bottom: 1px solid #d9d9d9;
}
.lyt-mo .menu a {
    position: relative;
    padding-top: 16px;
    padding-right: 40px;
    padding-bottom: 16px;
}
.lyt-mo .menu a:after {
    content: ' ';
    width: 22px;
    height: 16px;
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -8px;

    vertical-align: middle;
    
    opacity: 0.4;
    background-image: url(oj-img/sprites.svg);
    background-repeat: no-repeat;
    background-position: -123px -87px;
}
.lyt-mo .menu a:active {
    background-color: #f6f6f6;
    background-position: -132px -87px;
}
.lyt-mo .menu a:active:after {
    opacity: 1;
    background-position: -132px -27px;
}


.lyt-mo .menu a:after {

}
.lyt-mo .menu a[href="#"]:after {
    background-position: -147px -87px;
}


















/* --------------------------------------------------

    DGT MENU

-------------------------------------------------- */

.lyt-mo .dgt-menuwrap {
    white-space: nowrap;
    font-size: 0;
    line-height: 0;
}
.lyt-mo .dgt-menuwrap .section {
    width: 100%;
    display: inline-block;
    vertical-align: top;

    white-space: normal;
    font-size: 1rem;
    line-height: 1.4;
    text-indent: 0;
}

.lyt-mo .dgt-menuwrap .dgt-rootmenu {
    transition: margin-left 300ms ease-in-out;
}
.lyt-mo .dgt-menuwrap-at-0 .dgt-rootmenu { margin-left:    0%; }
.lyt-mo .dgt-menuwrap-at-1 .dgt-rootmenu { margin-left: -100%; }
.lyt-mo .dgt-menuwrap-at-2 .dgt-rootmenu { margin-left: -200%; }
.lyt-mo .dgt-menuwrap-at-3 .dgt-rootmenu { margin-left: -300%; }
.lyt-mo .dgt-menuwrap-at-4 .dgt-rootmenu { margin-left: -400%; }
.lyt-mo .dgt-menuwrap-at-5 .dgt-rootmenu { margin-left: -500%; }
.lyt-mo .dgt-menuwrap-at-6 .dgt-rootmenu { margin-left: -600%; }
.lyt-mo .dgt-menuwrap-at-7 .dgt-rootmenu { margin-left: -700%; }

/* .section.dgt-rootmenu,
.lyt-mo .section.dgt-submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    transition: margin-left 300ms ease-in-out;
}

.lyt-mo .section.dgt-rootmenu {
    margin-left: 0;
}
.lyt-mo .section.dgt-submenu {
    margin-left: 100%;
}

.lyt-mo .dgt-menu-at-1 .section.dgt-rootmenu {
    margin-left: -100%;
}
.lyt-mo .dgt-menu-at-1 .section.dgt-submenu {
    margin-left: 0;
} */







/* --------------------------------------------------
    
    ORANGE A DEPLACER
    
-------------------------------------------------- */

/* #mead {
    height: 60px;
}
.lyt-mo #mead .logo {
    padding: 15px;
    width: auto;
    background-color: transparent;
}
.lyt-mo #mead .logo:after {
    content: ' ';
    width: 150px;
    height: 35px;
    display: block;
    text-decoration: none;
    text-indent: 105%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(img/logo.png);
    background-position: 0 0;
    background-repeat: no-repeat;
} */