.oc-wrapper,
.oc-wrapper:before,
.oc-wrapper .oc-toggle,
.oc-wrapper .social_nav li a{
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.oc-wrapper{
    position: fixed; right: 0; left: 0; top: 0; bottom: 0;
    width: 100%; height: 100%; z-index: 10001; pointer-events:none;
    color: rgba(255,255,255,0); background-color: rgba(228,4,40,0);
}
.oc-wrapper.opened{ background-color: #E40428; color: #FFFFFF;  pointer-events: all; }

.oc-wrapper:before{
    position: absolute; background-image: url('../../../assets/img/logo.png'); content: '';
    opacity: 0; visibility: hidden; content: ''; top: .5rem; left: .625rem; width: 3.7rem; height: 3rem;
    background-position: top left; background-size: contain; background-repeat: no-repeat;
    background-size: auto 3.725rem;
}

.oc-wrapper.opened:before{opacity: 1; visibility: visible;}

.oc-toggle-wrapper .oc-toggle,
.oc-toggle-wrapper .oc-toggle:focus,
.oc-toggle-wrapper .oc-toggle:hover,
.oc-toggle-wrapper .oc-toggle:visited{
    position: absolute; left: 100%; top: .625rem; height: 3rem; line-height: 3rem;
    width: 3rem; font-size: 2rem; text-align: center; color: #FFFFFF; margin-left: -3rem; pointer-events: all;
}
.oc-toggle-wrapper .oc-toggle:after{ content: '\f0c9'; font-family: FontAwesome; }

.opened .oc-toggle-wrapper .oc-toggle{ color: #FFFFFF; }
.opened .oc-toggle-wrapper .oc-toggle:after{ content: '✕'; font-family: sans-serif;}

.oc-wrapper a,
.oc-wrapper a:visited,
.oc-wrapper a:hover,
.oc-wrapper a:focus{ color: inherit; display: inline-block; letter-spacing: .08em;}

.oc-wrapper.opened a:hover,
.oc-wrapper.opened a:focus{
    color: #0A0A0A;
}



.oc-toggle-wrapper{ position: relative; left: 0; right: 0; top: 0; height: 0; }

.oc-wrapper .menu-wrapper{ text-align: center; overflow-x: hidden; overflow-y: auto; padding: 5rem 0; height: 100%;}

.oc-wrapper .menu-wrapper ul{margin-left: 0; padding: 0 2rem;}

.oc-wrapper .menu-wrapper li{
    display: block; padding:.125rem 1rem .5rem; text-transform: uppercase;
    text-align: inherit; font-weight: 700; font-size: 1.125rem;
}
.oc-wrapper .menu-wrapper li ul{padding: 0 0 .125rem; }

.oc-wrapper .menu-wrapper li a{ padding: 0; border-bottom: 1px solid rgba(0,0,0,0); display: inline-block; }


.blog .oc-wrapper.opened  .menu-wrapper li.blog a,
.single-post .oc-wrapper.opened  .menu-wrapper li.blog a,
.oc-wrapper.opened  .menu-wrapper li.current-menu-item a{
    border-bottom: 1px solid #FFFFFF; 
}

.blog .oc-wrapper.opened  .menu-wrapper li.blog a:focus,
.blog .oc-wrapper.opened  .menu-wrapper li.blog a:hover,
.single-post .oc-wrapper.opened  .menu-wrapper li.blog a:focus,
.single-post .oc-wrapper.opened  .menu-wrapper li.blog a:hover,
.oc-wrapper.opened  .menu-wrapper li.current-menu-item a:focus,
.oc-wrapper.opened  .menu-wrapper li.current-menu-item a:hover{
    border-bottom: 1px solid #0A0A0A;
}

.oc-wrapper ul.social_nav{text-align: center; margin: 0; padding: 4rem 0 0; display: block;}
.oc-wrapper ul.social_nav li{display: inline-block; font-size: 1rem; margin: 0 .5rem; text-align: center; width: 2rem; height: 2rem; line-height: 2rem; padding: 0;}

.oc-wrapper .social_nav li a,
.oc-wrapper .social_nav li a:focus,
.oc-wrapper .social_nav li a:hover,
.oc-wrapper .social_nav li a:visited{
    background-color: rgba(255,255,255,0); 
    color: rgba(228,4,40,0); width: 2rem; height: 2rem; line-height: 2rem; font-size: 1rem;
}
.oc-wrapper.opened .social_nav li a,
.oc-wrapper.opened .social_nav li a:visited{
    background-color: #FFFFFF; color: #E40428;
}
.oc-wrapper.opened .social_nav li a:hover,
.oc-wrapper.opened .social_nav li a:visited{
    background-color: #FFFFFF; color: #E40428;
}
.oc-wrapper.opened .social_nav li a i { height: 2rem; line-height: 2rem; }


@media screen and (min-width: 40em) {
    .oc-wrapper .menu-wrapper ul{display: block; text-align: center; }
    .oc-wrapper .menu-wrapper li{display: block; text-align: center; font-size: 1.5rem; padding-bottom: 1rem;}
    .oc-wrapper .menu-wrapper li li{font-size: 1.25rem; }
    
    
    .oc-toggle-wrapper .oc-toggle,
    .oc-toggle-wrapper .oc-toggle:focus,
    .oc-toggle-wrapper .oc-toggle:hover,
    .oc-toggle-wrapper .oc-toggle:visited{ top: 2.5rem; }
    
    .scrolled .oc-toggle-wrapper .oc-toggle,
    .scrolled .oc-toggle-wrapper .oc-toggle:focus,
    .scrolled .oc-toggle-wrapper .oc-toggle:hover,
    .scrolled .oc-toggle-wrapper .oc-toggle:visited{ top: .625rem; }
    
    
    .oc-wrapper:before{
        height: 7.5rem; width: 8rem; left: .9375rem; background-size: auto 7.5rem;
    }
    
    .oc-wrapper .menu-wrapper{ padding: 10rem 0 4rem; }
    
    
    
    .oc-wrapper ul.social_nav li{display: inline-block; font-size: 1rem; margin: 0 .75rem; text-align: center; width: 3rem; height: 3rem; line-height: 3rem; padding: 0;}

    .oc-wrapper .social_nav li a,
    .oc-wrapper .social_nav li a:focus,
    .oc-wrapper .social_nav li a:hover,
    .oc-wrapper .social_nav li a:visited{
        background-color: rgba(255,255,255,0);
        color: rgba(228,4,40,0); width: 3rem; height: 3rem; line-height: 3rem; font-size: 1.5rem;
    }
    .oc-wrapper.opened .social_nav li a i { height: 3rem; line-height: 3rem; }
    
}


@media screen and (min-width: 64em) {
    .oc-wrapper,.oc-wrapper.opened{
        position: relative; left: 0; right: 0; background-color: transparent; width: auto;
        z-index: 9999; padding: 3.375rem 0 0; pointer-events: all;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        margin: 0 -0.9375rem;
    }
    .oc-wrapper:before,
    .oc-wrapper.opened:before{
        content: none;
    }
    
    .scrolled .oc-wrapper,
    .scrolled .oc-wrapper.opened{ padding: 1.5rem 0 0;}
    
    .oc-wrapper ul.social_nav{ display: none;}
    
    .oc-wrapper .menu-wrapper{ overflow: visible; padding: 0; height: auto; }
    .oc-wrapper .menu-wrapper ul{ margin: 0; padding: 0;}
    .oc-wrapper .menu-wrapper li{ margin: 0; padding: 0 .5rem; display: inline-block; font-size: .9rem; line-height: 1.75rem;  font-weight: 700;}
    
    .oc-wrapper .menu-wrapper li a,
    .oc-wrapper .menu-wrapper li a:visited{color: #FFFFFF; padding: .25rem 0;}
    
    .oc-wrapper .menu-wrapper li a:hover,
    .oc-wrapper .menu-wrapper li a:focus{color: #0A0A0A; padding: .25rem 0;}
    
    
    
    .blog .oc-wrapper  .menu-wrapper li.blog a,
    .single-post .oc-wrapper  .menu-wrapper li.blog a,
    .oc-wrapper  .menu-wrapper li.current-menu-item a{
        border-bottom: 1px solid #FFFFFF; 
    }
    
    .blog .oc-wrapper  .menu-wrapper li.blog a:focus,
    .blog .oc-wrapper  .menu-wrapper li.blog a:hover,
    .single-post .oc-wrapper  .menu-wrapper li.blog a:focus,
    .single-post .oc-wrapper  .menu-wrapper li.blog a:hover,
    .oc-wrapper  .menu-wrapper li.current-menu-item a:focus,
    .oc-wrapper  .menu-wrapper li.current-menu-item a:hover{
        border-bottom: 1px solid #0A0A0A;
    }
    
    
}