/* diseño,montaje html y front-end UX/UI por Rafael Olea contacto@rafelolea.cl www.rafaelolea.cl */
@import url("font-awesome/css/font-awesome.min.css"); /* icons FontAwesome 4 */
body {color: #555;}
.btn {font-size: 15px; font-weight: 200;}
.form-check {margin: .5em 0;}
a {color: #009894;}
a:hover {color: #444; text-decoration: none;}
/* >> HEADER << */
header {border-bottom: 1px solid #ccc;}
/* >> BODY << */
.titulo {margin: 2em 0;}
.titulo h1 {font-size: 2em; font-weight: 300;}
.titulo h2 {font-size: 2em; font-weight: 200;}
.titulo h2 strong {color: #009894;}

/* PAGINADOR */
.breadcrumb {background: #fff; border: 1px solid #eee; padding: .5em; font-size: .8em; font-weight: 300; margin: 1em 0;}

/* >> MENU-LEFT << */


/* >> PROYECTOS << */
.proyectos-items h2 {font-size: 1.2em; color: #009894;}
.proyectos-items p {font-size: .9em;}
.proyectos-items-info {overflow: hidden; max-height: 240px; margin-top: 10px;}

/* >> FORM << */

    /* contacto */
    .r-form-contacto, .r-contacto-info {padding: 1em 0 4em 0;}
    .r-form-contacto, .r-contacto-info  p {margin: 0;}
    .r-form-contacto h2 {margin: 1em 0; font-size: 1.5em;}
    .r-contacto-info h2 {margin: 1em 0; font-size: 1.5em;}

/* >> SHOP << */

    /* CARRO.PHP */
    .r-carro h3 {font-size: 1em; font-weight: 300; margin-bottom: 1em; color: #6c757d;}
    .r-carro-total { -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    .r-carro-total ul {list-style: none; padding: 1em; font-weight: 200; color: #6c757d; font-size: .9em;}
    .r-carro-total h2 {font-size: 1.1em; margin-bottom: 1em; color: #000;}
    .r-carro-productos { padding-bottom: 1em; margin-bottom: 1em; padding: 1em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    .r-carro-productos:hover {-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.15); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.15); }
    .r-carro-productos img {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    .r-carro-productos p {font-size: .9em; margin: .5em 0; text-transform: uppercase; font-weight: 200; color: #6c757d;}
    .r-carro-productos h2 {font-size: 1.1em;}
    .cupon-dcto {padding: 1em;}
    .cupon-dcto span {color: #6c757d;}
    .carro-vacio {padding: 4em 2em; margin: 6em auto; text-align: center; -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.12); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
    .carro-vacio i {font-size: 4em; margin: 20px 0;}
/* >> VARIOS << */


    /* CARD */
    .card a:hover {text-decoration: none;}
    .card .icon-control {float: right; } /* color: #ddd; */
    .card .checkbox-btn input:checked ~ .btn { border-color: #3167eb; background-color: #3167eb; color: #fff;}
    .card .checkbox-btn {position: relative; }
    .card .checkbox-btn input {position: absolute; z-index: -1; opacity: 0;}
    .card .filter-group .card-header {border-bottom: 0;}
    .card .filter-group {border-bottom: 1px solid #e4e4e4;}
    .card .btn-light { background-color: #fff; border-color: #e4e4e4;}
    .card .title {color: #444444; text-decoration: none;}

/* >> FOOTER << */
.f-logo img {max-width: 200px; margin: 0 auto; display: inline-block;}
.f-logo a {font-size: .8em;}

/*cambio menu */
    .navigation-item:not(.navigation-brand-text):hover .navigation-link,
    .navigation-item:not(.navigation-brand-text):focus .navigation-link,
    .navigation-item:not(.navigation-brand-text).is-active .navigation-link {
        color: #009894;
    }
    .navigation-avatar-item .navigation-link img {
        border: solid 2px #009894;
    }
    .navigation-item:hover > .navigation-link > .submenu-indicator:after,
    .navigation-item:focus > .navigation-link > .submenu-indicator:after,
    .navigation-item.is-active > .navigation-link > .submenu-indicator:after {
        border-color: transparent #009894 #009894 transparent;
    }
    .navigation-btn {
        border-color: #009894;
        background-color: #009894;
    }
    .navigation-btn:hover,
    .navigation-btn:focus {
        background-color: #008480;
    }
    .navigation-badge {
        background-color: #009894;
    }
    .navigation-input:hover,
    .navigation-input:focus {
        border-color: #009894;
    }
    .navigation-btn:hover .navigation-search-icon {
        color: #009894;
    }
    .navigation-dropdown-item:hover > .navigation-dropdown-link,
    .navigation-dropdown-item:focus > .navigation-dropdown-link,
    .navigation-dropdown-item.is-active > .navigation-dropdown-link {
        color: #009894;
    }
    .navigation-dropdown-item:hover > .navigation-dropdown-link > .submenu-indicator:after,
    .navigation-dropdown-item:focus > .navigation-dropdown-link > .submenu-indicator:after,
    .navigation-dropdown-item.is-active > .navigation-dropdown-link > .submenu-indicator:after {
        border-color: transparent #009894 #009894 transparent;
    }
    .navigation-list > li > a:hover {
        color: #009894;
    }
    @media (min-width: 992px) {
        .navigation-item:not(.navigation-brand-text):hover .navigation-link,
        .navigation-item:not(.navigation-brand-text):focus .navigation-link,
        .navigation-item:not(.navigation-brand-text).is-active .navigation-link {
            border-bottom-color: #009894 !important;
        }
    } 
/* Cambio menú */

.portfolio-menu {
    text-align: center;
    margin: 30px auto;
}
.portfolio-menu ul li {
    display: inline-block;
    margin: 0;
    list-style: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: all .5 ease;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.portfolio-menu ul {
    padding:0;
}
.portfolio-menu ul li:hover {
    background: #009894;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.portfolio-menu ul li.active {
    background:  #009894;
    color: #fff;
}
.portfolio-item {
    max-width: 1000px;
    margin: 30px auto;
}
.portfolio-item .item {
    width: 33.3%;
    display: inline-block;
    margin-bottom: 0;
    padding: 0;
}
.portfolio-item .item div {
    height: 280px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  .portfolio-item .item {
    width: 50%;
    padding:0 15px;
}
}
@media screen and (max-width: 640px) {
  .portfolio-item .item {
    width: 100%;
}
}

/* >>> >>> MEDIA QUERIES <<< <<< */
@media (max-width: 576px) { ... }
@media (max-width: 768px) {
    .proyectos-box {text-align: center;}

}
@media (max-width: 992px) { ... }
@media (max-width: 1200px) { ... }

/* Efectos animación imágenes Hover */
/* Grow */
.hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.04); transform: scale(1.04); }
/* Shrink */
.hvr-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active { -webkit-transform: scale(0.97); transform: scale(0.97); }