/********************************STYLES DE PAGINA*******************************
*******************************************************************************/
/**TITULOS DE LA LANDING PAGE**/
.titles{
    text-align: justify;
}

.titles-r{
    text-align: right;
}

.text-r-c{
    text-align: right;
}

/*******************************************************************************
*********************NUEVOS FONTS PARA ELEMENTOS DE PAGINA*********************/
/*font Anton*/
.fo-anton{
    font-family: 'Anton', sans-serif;
}

.fo-federo{
    font-family: 'Federo', sans-serif;
}

.fo-tenor{
    font-family: 'Tenor Sans', sans-serif;
}

/*font Tenor Sans*/
h1,h2,h3,h4,h5,h6{
    font-family: 'Tenor Sans', sans-serif;
}

/*******************************************************************************
********************************TAMAÑOS DE TEXTO*******************************/
.txt-4e{
    font-size: 4em;
}

/******************************************************************************
*******************************BOTONES EN PAGINA******************************/
/**Botones del header**/
.btn-header{
    padding:15px;
    text-align:center;
    transition:all .5s;
    -o-transition:all .5s;
    -webkit-transition:all .5s;
    color: white !important;
    border-radius: 20px;
}

.btn-header:visited{
    text-decoration:none;
    color: white !important;
}

.btn-header:hover{
    background-color: white;
    color:black !important;
    border: 1px solid black;
    text-decoration:none;
}

/*******************************************************************************
********************************JUMBOTRON CUSTOM*******************************/
.jumbotron-c{
    height: 300px;
    background-color: transparent;
}

.jumbotron-c h1 {
    font-size: 4em;
    color: white;
}

.jumbotron-c p{
    font-size: 2em;
    color: white;
}

/*******************************************************************************
************************BLOQUE DE CARACTERISTICAS CUSTOM***********************/
.blk-feature{
    text-align: center;
}

/*******************************************************************************
*******************************CATEGORIAS NABYTEK******************************/
.over-h{
    overflow: hidden;
}

.content-img{
    overflow: hidden;
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
}

.img-category{
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
}

.txt-slideup{
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
    transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
}

.txt-slideup h4{
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
}

.txt-hidden{
    width: 100%;
    height: 0px;
    padding: 0px 5px;
    position: absolute;
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
    transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
}

.content-img:hover{
    box-shadow: 0px 2px 20px 0px #363636;
    -webkit-box-shadow: 0px 2px 20px 0px #363636;
    -moz-box-shadow: 0px 2px 20px 0px #363636;
}

.content-img:hover img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.content-img:hover .txt-slideup{
    width: 100%;
    background-color: rgba(12, 19, 72, .5);
    transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    -moz-transform: translate(0px, -100px);
    -webkit-transform: translate(0px, -100px);
    -o-transform: translate(0px, -100px);
}

.content-img:hover .txt-slideup h4{
    color: white;
}

.content-img:hover .txt-hidden{
    width: 100%;
    height: 100px;
    transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    -moz-transform: translate(0px, -100px);
    -webkit-transform: translate(0px, -100px);
    -o-transform: translate(0px, -100px);
}

.btn-seemore{
    color: white !important;
    background-color: transparent;
    text-decoration: none;
    border-radius: 10px;
    transition: all .3s;
    -moz-transition:all .3s;
    -o-transition: all .3;
    -webkit-transition:all .3s;
}

.btn-seemore:hover{
    color:black !important;
    background-color: white;
    border: 1px solid white;
    text-decoration: none;
    border-radius: 10px;
}

/*******************************************************************************
**********************************MEDIA QUERYS*********************************/
@media (max-width: 800px){
    .titles{
        text-align: center;
    }

    .titles-r{
        text-align: center;
    }
    
    .text-r-c{
        text-align: center;
    }

    .txt-responsive-1{
        font-size: 35px;
    }

    .jumbotron-c h1 {
        margin-top: 80px;
        font-size: 2em;
        color: white;
    }
    
    .jumbotron-c p{
        font-size: 1em;
        color: white;
    }

    .blk-feature{
        text-align: left;
    }

    .blk-feature span{
        text-align: center;
        display: block;
        float: left;
    }

    .blk-feature h4{
        display: block;
        text-align: left;
    }

}

@media (max-width: 640px){
    .txt-responsive-1{
        font-size: 30px;
    }
}

@media (max-width: 480px){
    .txt-responsive-1{
        font-size: 25px;
    }
}

@media (max-width: 360px){
    .txt-responsive-1{
        font-size: 20px;
    }
}

@media (max-width: 320px){
    .txt-responsive-1{
        font-size: 15px;
    }
}