/*
Nombre: Abastecedora de Repuestos | 2017
Description: Web site 
Author: Eduardo Esparza
Author URI: http://www.cocolab.com
Git: git@bitbucket.org:carlos_eduardo_esparza_pinelo/abas.git
Version: 1.0
*/
.header-area {
    height: 90px;
    position: relative;
}

nav.collapse {
    padding: 0;
}

.logo a {
    padding: 5px 0;
}

.search-box {
    padding: 30px 0;
    position: relative;
    float: right;
    width: 100%;

}

.search-box input {
    background-color: transparent;
    border: 1px solid #636363;
    color: #3e3e3e;
    height: 30px;
    padding: 5px;
    width: 100%;
}

.search-btn {
    background-color: transparent;
    border-color: transparent;
    color: #3e3e3e;
    font-size: 12px;
    height: 100%;
    top: 0px;
    position: absolute;
    right: 0;
}

#sticker {
    position: fixed;
    width: 100%;
    z-index: 999999;
    left: auto;
    margin: auto;
    background: white;
}

.boxed-layout #sticker {

    width: 1240px;

}

.header-area.stick {

    height: 70px;

    background-color: #fff;

    border-bottom: 1px solid #efefef;

}

.stick .logo a {

    padding: 2px 0px;

}

.stick .logo a img {

  max-width: 80%;

}

.stick .mainmenu ul li a {

    padding-bottom: 25px;

    padding-top: 25px;

}

.stick .search-box {

    padding: 20px 0;

}

.stick .off-canvas-btn button {

    top: 20px;

}

.stick .slide-menu-bar span {

    line-height: 70px;

}



/*************************

mainmenu

*************************/



.mainmenu ul {

    text-align: right;

}

.mainmenu ul li {

    display: inline-block;

    position: relative;

    text-align: left;

}

.mainmenu ul li a,

.off-canvas nav ul li a {

    font-family: 'Raleway', sans-serif;

    font-weight: 600;

    font-size: 13px;

    color: #454545;

    text-transform: uppercase;

    display: block;

    padding: 35px 20px;

    position: relative;

    z-index: 1;

}

.mainmenu ul li a::after {

    content: "]";

    opacity: 0;

    position: absolute;

    right: 45%;

    transition: all 0.5s ease 0s;

    z-index: -1;

}

.mainmenu ul li a::before {

    content: "[";

    left: 45%;

    opacity: 0;

    position: absolute;

    transition: all 0.5s ease 0s;

    z-index: -1;

}

.mainmenu ul li:hover a::before,

.mainmenu ul li:hover a::after,

.mainmenu ul li.active a::before,

.mainmenu ul li.active a::after {

    opacity: 1;

}

.mainmenu ul li:hover a::before,

.mainmenu ul li.active a::before {

    left: 8%;

}

.mainmenu ul li:hover a::after,

.mainmenu ul li.active a::after {

    right: 8%;

}



/*************************

off-canvas

*************************/



.off-canvas {

    background-color: #eee;

    height: 100vh;

    position: fixed;

    right: -300px;

    width: 300px;

    z-index: 9999999;

}

.off-canvas nav {

    margin: 0;

    padding: 0px;

}

.off-canvas nav ul li:first-child a {

  border-top: 1px solid #ddd;

}

.off-canvas nav ul li a {

    border-bottom: 1px solid #ddd;

    padding: 12px 20px

}

.off-canvas-btn button {

    background-color: transparent;

    border-color: transparent;

    font-size: 20px;

    position: absolute;

    right: 0;

    top: 30px;

}

.off-canvas .cross {

    cursor: pointer;

    height: 40px;

    line-height: 40px;

    top: 20px;

    width: 40px;

    font-size: 20px;

}

.off-canvas-active {

    transform: translate3d(-300px, 0px, 0px);

    position: relative;

}



/*************************

scroll-menu

*************************/



.scroll-menu {

    position: fixed;

    right: 10px;

    z-index: 99;

    height: 100%;

}

.scroll-menu ul li {

    text-align: right;

}

.scroll-menu ul li a {

    padding: 0px;

    display: inline-block;

    color: #fff;

    font-family: "raleway";

    font-size: 12px;

    font-weight: 600;

    padding: 5px 20px;

    position: relative;

    text-align: right;

    text-transform: uppercase;

    margin-bottom: 1px;

}

.scroll-menu ul li a:before {

    border-radius: 50%;

    content: "";

    height: 10px;

    position: absolute;

    right: 5px;

    width: 10px;

    top: 9px;

}

.scroll-menu ul li a:after {

    border-radius: 15px 0 0 15px;

    content: "";

    height: 100%;

    position: absolute;

    right: 0;

    width: 0%;

    z-index: -1;

    top: 0px;

    transition: all 0.5s ease 0s;

}

.scroll-menu ul li a span {

    opacity: 0;

    transition: all 0.5s ease 0s;

}

.scroll-menu ul li.active a:after,

.scroll-menu ul li a:hover:after {

    width: 100%;

}

.scroll-menu ul li.active a:before,

.scroll-menu ul li a:hover:before {

    background-color: #fff;

}

.scroll-menu ul li.active a span,

.scroll-menu ul li a:hover span {

    opacity: 1;

}



/*************************

slide-menu

*************************/



.slide-menu {

    opacity: 0;

    position: relative;

    right: -100%;

    width: 100%;

}

.slide-menu-bar {

    text-align: right;

}

.slide-menu-bar span {

    cursor: pointer;

    font-size: 16px;

    line-height: 90px;

    padding: 10px 20px;

    position: relative;

}

.slide-menu-bar span i {

    left: 0;

    position: absolute;

    right: 0;

    text-align: center;

    top: 10px;

}

.slide-menu-bar span i.close-icon {

    opacity: 0;

    transform: scale(0);

}