/*-----------------------------------------*/
/*******************************************/
/* 
    Styles
    Created on : 15-12-2020, 08:30:00
    Author: www.intexel.com
    Client: PALMAR SA.
    Version: 1.0.0
    Last Change: 14/07/2020
*/
/*******************************************/
/*-----------------------------------------*/

/*Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

/*VARIABLES*/

:root{
    --main-color: #173e72;
    --secondary-color: #df1a20;
    --title-color: #46464c;
    --paragraph-color: #949494;
    --links-text-color: #ffffff;
    --vertical-blue-gradient: linear-gradient(180deg, rgba(23,62,114,1) 0%, rgba(13,40,74,1) 100%);
    --vertical-orange-gradient: linear-gradient(180deg, rgba(252,97,0,1) 0%, rgba(189,97,39,1) 100%);
    --main-font: "Open Sans", Arial, Helvetica, sans-serif;
    --secondary-font: "Poppins", Arial, Helbetica, sans-serif;
    --letter-spacing: 0.05rem;
    --border-radius: 0.3125rem;
    --trasparent-black: rgba(0, 0, 0, 0.2);
    --trasparent-blue: rgba(23, 62, 114, 0.15);
    --box-shadow-items: 3px 3px 6px #949494, -3px -3px 6px #f0f0f0;
}

/*COMMMON FORMATS*/

body{
    background-color: #ffffff;
    margin: 0 auto;
    font-size: 16px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-family: var(--main-font, "Open Sans", sans-serif);
}

.center-content{
    width: 100%;
    max-width: 1300px;
    padding: 0 1%;
    margin: 0 auto;
    box-sizing: border-box;
}

.half-center-content-right,
.half-center-content-left{
    width: 100%;
    max-width: 650px;
    padding: 0 1%;
    box-sizing: border-box;
}

.half-center-content-left{
    float: left;
}

.half-center-content-right{
    float: right;
}

/*-----------------------------------------*/
/*HEADER*/
/*-----------------------------------------*/

header{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 103;
    transition: all .3s ease-in-out;
}

.after-fixed{
    position: fixed;
    top: -100px;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.75);
    backdrop-filter:  saturate(180%) blur(5px);
    background-color: rgba(255, 255, 255, 0.75);
    transition: all .3s ease-in-out;
}

header.after-fixed.scroll-up{
    top: 0;
}

.header-content{
    padding: 0.875rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .3s ease-in-out;
}

header.after-fixed .header-content{
    padding: 0.5rem 0;
}

.head-logo{
    width: 200px;
    transition: all .3s ease-in-out;
}

header.after-fixed .head-logo{
    width: 150px;
}

.head-logo img{
    width: 100%;
    display: block;
}

.nav-bar{
    width: 57.7%;
    margin-left: 6%;
    transition: all .3s ease-in-out;
}

header.after-fixed .nav-bar{
    margin-left: 4%;
}

.nav-bar ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-bar ul li a{
    color: #ffffff;
    color: var(--links-text-color, #ffffff);
    font-family: var(--secondary-font, "Poppins", sans-serif);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

header.after-fixed .nav-bar ul li a{
    color: #46464c;
}

.nav-bar ul li a:hover,
header.after-fixed .nav-bar ul li a:hover{
    color: #406ba2;
}

.head-social{
    margin-top: -55px;
    transition: all .3s ease-in-out;
}

header.after-fixed .head-social{
    margin-top: 0;
}

.head-social ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.head-social ul li{
    margin-left: 1.5rem;
}

.head-social ul li:first-child a{
    width: 106px;
    height: 30px;
    color: var(--links-text-color, #ffffff);
    font-size: 0.75rem;
    font-family: var(--main-font, "open Sans", sans-serif);
    line-height: 1;
    letter-spacing: 0.025rem;
    text-decoration: none;
    text-align: center;
    background: var(--main-color, #173e72);
    border: none;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.head-social ul li a svg{
    height: 1.25rem;
    fill: var(--links-text-color,#ffffff);
    transition: all .5s ease-in-out;
}

header.after-fixed .head-social ul li a svg{
    fill: var(--title-color, #46464c);
}

.head-social ul li a svg:hover,
header.after-fixed .head-social ul li a svg:hover{
    fill: #406ba2;
}

/* Pop UP */
.pop-up{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.75);
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.625rem 0;
}

.pop-up div{
    position: relative;
    background-color: #ffffff;
    padding: 0.625rem;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pop-up div video{
    max-height: 500px;  
    height: 100%;
    margin-bottom: 0.625rem;
    border-radius: 5px;
}

.pop-up div iframe{
    height: 500px; 
    width: 888px;
    margin-bottom: 0.625rem;
    border-radius: 5px;
    display: block;
}

.pop-up div a{
    padding: 0.875rem 1.25rem;
    background-color: #439447;
    color: #ffffff;
    font-family: var(--main-font);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 1.875rem;
}

/*Comentar cuando se ponga el video - Estos estilo son solo para imagenes por ejemplo para el sorteo*/
.pop-up div a{  
    width: 100%;
    max-width: 860px;
    padding: 0;
    display: block;
    background-color: transparent;
}

.pop-up div a img{
    width: 100%;
    display: block;
    border-radius: 5px;
}
/*-----*/

.pop-up div button{
    background-color: transparent;
    border: none;
    padding: 5px;
    position: absolute;
    top: -35px;
    right: -35px;
}

.pop-up div button:hover{
    cursor: pointer;
}

.pop-up div button svg{
    display: block;
    fill: #ffffff;
}

/*-----------------------------------------*/
/*FINISH HEADER*/
/*-----------------------------------------*/

/*-----------------------------------------*/
/*CONTENT PAGES BEGIN*/
/*-----------------------------------------*/

/*Titles*/

h1{
    width: 100%;
    color: var(--title-color, #46464c);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
    text-transform: uppercase;
    display: block;
}

h2{
    width: 100%;
    color: var(--title-color, #46464c);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-transform: uppercase;
    display: block;
}

/*Buttons*/

.blue-btn, 
.orange-btn{
    width: 200px;
    height: 50px;
    color: var(--links-text-color, #ffffff);
    font-family: var(--secondary-font, "Poppins", sans-serif);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1;
    text-decoration: none;
    border-radius: 25px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--vertical-blue-gradient, #173e72);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.55), -1px -1px 2px rgba(0, 0, 0, 0.2);
    transition: all .3s ease-in-out;
}

.orange-btn{
    background: var(--vertical-orange-gradient, #fc6100);
}

.blue-btn:hover, 
.orange-btn:hover{
    box-shadow: 2px 2px 4px rgba(0,0,0,0.70), -1px -1px 3px rgba(0, 0, 0, 0.35);
}

/*Slider*/

.home-slider{
    width: 100%;
    height: 100vh;
    position: relative;
}

.slide-img .slide{ 
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 99;
}

.slide-mask{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--trasparent-black);
    z-index: 100;
}

/*Slide Captions*/

.slide-captions{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
}

.slide-captions .caption{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.slide-captions .caption p{
    margin-bottom: 1.6rem;
    color: var(--links-text-color);
    font-family: var(--secondary-font, "Poppins", sans-serif);
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
}

.slide-captions .caption p:first-child{
    font-size: 2.25rem;
}

/*Cover Pages*/

.cover-page .cover-img{
    position: relative;
}

.cover-page .cover-img img{
    width: 100%;
    display: block;
}

.page-title{
    padding: 1.25rem 0;
    background: var(--vertical-blue-gradient);
}

.page-title h1{
    color: #ffffff;
    color: var(--links-text-color, #ffffff);
    text-transform: capitalize;
    font-family: var(--secondary-font, "Poppins", sans-serif);
    font-weight: 400;
    text-align: left;
}

/*Mains Containers*/

.row-content{
    padding: 2.5rem 0;
}

.row-content p{
    color: #46464c;
    color: var(--title-color, #46464c);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing, 0,05rem);
}

.row-content p a{
    color: var(--main-color);
    text-decoration: none;
}

.row-content p strong{
    font-weight: 600;
}

.row-content-flexbox{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.col-content{
    width: 50%;
    padding: 2.5rem 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.row-mask{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--trasparent-black);
}

.items-flexbox{
    padding: 2.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.items-flexbox .item{
    width: 24.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.items-flexbox .item img{
    height: 70px;
    margin-bottom: 1rem;;
    display: block;
}

.items-flexbox .item p{
    color: var(--title-color, #46464c);
    font-size: 1rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.4rem;
    text-align: center;
}

/*Home Products*/

.home-products{
    margin: 1.875rem 0;
}

.home-products-item{
    /* height: 165px; */
    padding: 1.25rem;
    margin: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-radius: var(--border-radius, 0.3125rem);
    box-sizing: border-box;
    box-shadow: var(--box-shadow-items);
    text-decoration: none;
}

.home-products-item picture{
    width: 105px;
    height: 100px;
}

.home-products-item picture img{
    width: 100%;
    height: 100%;
    display: block;
}

.home-products-item div{
    width: 60%;
    margin-left: 1rem;
}

.home-products-item div h3{
    margin-bottom: 1rem;
    color: var(--secondary-color, #df1a20);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.2em;
    text-transform: uppercase;
}

.home-products-item ul li{
    text-align: center;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.home-products-item ul li span{
    width: 33.33%;
    color: var(--title-color, #46464c);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4rem;
}

.home-products-item ul li:last-child span{
    color: var(--paragraph-color, #949494);
    font-size: 0.75rem;
    display: block;
}

/*Home Links*/

.home-link{
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.home-link h2{
    margin-bottom: 1rem;
    color: var(--links-text-color, #ffffff);
    text-align: center;
}

.home-link p{
    margin-bottom: 1rem;
    color: var(--links-text-color, #ffffff);
    font-size: 1rem;
    line-height: 1.4rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
}

/*Home Posts*/

.home-posts{
    margin: 1.875rem 0;
    display: flex;
    justify-content: space-between;
}

.home-posts .item-post{
    margin: 0.625rem;
    padding: 1.25rem;
    background-color: #ffffff;
    border-radius: var(--border-radius, 0.3125rem);
    box-shadow: var(--box-shadow-items);
    box-sizing: border-box;
    overflow: hidden;
}

.home-posts .item-post .cover-img{
    height: 180px;
    margin-bottom: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius, 0.3125rem);
}

.home-posts .item-post h3{
    height: 3.125rem;
    margin-bottom: 1rem;
    color: var(--main-color, #173e72);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.4em;
}

.home-posts .item-post p{
    height: 3.5625rem;
    margin-bottom: 1rem;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.4em;
}

.home-posts .item-post a{
    width: 150px;
    height: 40px;
    color: var(--links-text-color, #ffffff);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background: var(--vertical-blue-gradient);
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.45);
    border-radius: var(--border-radius, 0.3125rem);
    float: right;
}

/*PAGES CONTENT*/

.alert{
    margin: 0 auto;
    padding: 1.25rem;
    background-color: rgba(223, 26, 32, 0.4);
    border: 2px #df1a20 solid;
    border-radius: var(--border-radius, 0.3125rem);
}

.alert p{
    color: #df1a20;
    color: var(--secondary-color, #df1a20);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}

.alert p a{
    color: #df1a20;
    text-decoration: underline;
}

/*COMAPNY PAGE*/

.company{
    display: flex;
    justify-content: space-between;
}

.company h2{
    margin-bottom: 1.5rem;
}

.company article{
    width: 49%;
}

.company article p{
    margin-bottom: 1.5rem;
    line-height: 1.6rem;
}

.company article p:last-child{
    margin-bottom: 0;
}

.company article a{
    width: 300px;
    padding: 1.25rem 0;
    margin: 0 auto;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing, 0.05);
    background: var(--vertical-blue-gradient);
    border-radius: var(--border-radius, 0.3125);
    display: block; 
    box-shadow: 2px 2px 3px rgba(0,0,0,0.55), -1px -1px 2px rgba(0, 0, 0, 0.2);
    transition: all .3s ease-in-out;
}

.company article a:hover{
    box-shadow: 2px 2px 4px rgba(0,0,0,0.70), -1px -1px 3px rgba(0, 0, 0, 0.35);
}

.company aside{
    width: 49%;
}

.company aside video,
.company article video{
    width: 100%;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background-color: #212121;
    border-radius: var(--border-radius, 0.3125);
    box-sizing: border-box;
}

.company article video{
    display: none;
}

.company aside .gallery{
    padding: 1.25rem;
    background-color: #212121;
    border-radius: var(--border-radius, 0.3125);
    box-sizing: border-box;
}

.company aside .gallery img{
    border-radius: 5px !important;
    margin-bottom: 0.625rem !important;
}

/*PRODUCTS CATALOG PAGE*/

/*Breadcrumbs*/

.breadcrumbs{
    margin: 0 0 1rem 0.25rem;
}

.breadcrumbs p{
    font-size: 0.75rem;
    color: var(--main-color, #173e72);
    display: flex;
    align-items: center;
}

.products{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.products aside{
    width: 24%;
}

/*Categories menu*/

.products aside .categories{
    padding: 1.25rem 0 3rem 0;
    margin-bottom: 2.5rem;
    background-color: #ffffff;
    box-shadow: var(--box-shadow-items);
    border-radius: var(--border-radius, 0.3125rem);
}

.products aside .categories h2{
    padding: 0 1.25rem 1.25rem 1.25rem;
    font-size: 1.125rem;
    border-bottom: 1px #f0f0f0 solid;
    box-sizing: border-box;
}

.products aside .categories ul li{
    padding: 1.25rem;
    border-bottom: 1px #f0f0f0 solid;
    box-sizing: border-box;
}

.products aside .categories ul li a{
    color: #173e72;
    color: var(--main-color, #173e72);
    font-size: 0.875rem;
    text-transform: capitalize;
    text-decoration: none;
    transition: all .5s ease-in-out;
}

.products aside .categories ul li a:hover{
    color: #406ba2;
    cursor: pointer;
}

/*Aside Banner*/

.products aside .aside-banner{
    padding: 0 1.25rem;
    position: relative;
    box-sizing: border-box;    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius, 0.3125rem);
    box-shadow: var(--box-shadow-items);
}

.products aside .aside-banner div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: var(--border-radius, 0.3125rem);
    background: var(--trasparent-blue);
}

.products aside .aside-banner div p{
    margin-bottom: 1.5rem;
    color: var(--links-text-color, #ffffff);
    font-size: 1rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
    line-height: 1.4rem;
}

.products aside .aside-banner div p:first-child{
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
}

/*Products Grid*/

.products-grid{
    width: 76%;
}

.products-grid .grid{
    margin-bottom: 1.875rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.products-grid .item-grid{
    width: 31%;
    margin-left: 2.25%;
    margin-bottom: 2.25%;
    padding: 1.25rem;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: var(--box-shadow-items);
    box-sizing: border-box;
    border-radius: var(--border-radius, 0.3125rem);
}

.products-grid .item-grid img{
    height: 10rem;
    margin-bottom: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.products-grid .item-grid h3{
    width: 100%;
    margin-bottom: 1.5rem;
    color: var(--secondary-color, #df1a20);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.products-grid .item-grid ul{
    width: 100%;
    margin-bottom: 4.6875rem;
}

.products-grid .item-grid ul li{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.products-grid .item-grid ul li span{
    width: 100%;
    color: var(--title-color, #46464c);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.4;
    text-align: center;
    display: block;
}

.products-grid .item-grid ul li:last-child span{
    font-size: 0.625rem;
    color: var(--paragraph-color, #949494);
}

.products-grid .item-grid a{
    position: absolute;
    bottom: 1.25rem;
}

.products-grid .product-video{
    margin-left: 2.25%;
}

/*PRODUCT PAGE*/

.product{
    width: 74%;
}

.product h1{
    margin-bottom: 0.625rem;
    color: var(--secondary-color, #df1a20);
    text-align: left;
}

.product h2{
    font-size: 1.25rem; 
    text-transform: inherit;
}

.product .product-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product .product-row .product-gallery{
    width: 49%;
    padding: 1.25rem;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: var(--box-shadow-items);
    border-radius: var(--border-radius);
}

.product .product-row .product-description{
    width: 49%;
}

.product .product-row .product-description div{
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: var(--box-shadow-items);
    border-radius: var(--border-radius);
}

.product .product-row .product-gallery img{
    border-radius: 5px !important;
    margin-bottom: 0.625rem !important;
}

.fotorama__thumb {
    border-radius: 5px !important;
}

.product .product-row .product-description p{
    margin-bottom: 1.6em;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    line-height: 1.6em;
    letter-spacing: var(--letter-spacing, 0.05rem);
}

.product .product-row .product-description p:last-child{
    margin-bottom: 0;
}

.product .product-row .product-description p strong{
    font-weight: 600;
}

/*Product Adventajes*/

.product .product-adv{
    padding-top: 2.5rem;
}

.product .product-adv ul{
    margin-left: -1%;
    display: flex;
    flex-wrap: wrap;
}

.product .product-adv ul li{
    width: 48%;
    margin: 1.5rem 1% 0 1%;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    line-height: 1.6em;
    display: flex;
    justify-content: flex-start;
}

.product .product-adv ul li span{
    margin-right: 0.3125rem;
    color: var(--secondary-color, #df1a20);
    font-size: 1.125rem;
    font-weight: 700;
    display: block;
}

/*Product Versions*/

.product .product-versions{
    padding-top: 2.5rem;
}

.product .product-versions .versions{
    margin-top: 1.5rem;    
    box-shadow: var(--box-shadow-items);
    border-radius: var(--border-radius, 5px);
}

.product .product-versions .versions ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.product .product-versions .versions ul li{
    width: 12%;
    padding: 0.625rem 0.5rem;
    color: var(--paragraph-color, #949494);
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.25em;
    box-sizing: border-box;
}

.product .product-versions .versions ul li:first-child{
    width: 16%;
}

.product .product-versions .versions ul li h3{
    color: var(--secondary-color, #df1a20);
    font-weight: 600;
    text-transform: uppercase;
}

.product .product-versions .versions ul li h3 span{
    color: var(--paragraph-color, #949494);
    font-size: 0.625rem;
    text-transform: none;
    text-align: center;
    display: block;
}

.product .product-versions .versions ul li img{
    height: 70px;
    margin: 0 auto;
    display: block;
}

.product .product-versions .versions ul li span{
    display: block;
    font-size: 0.625rem;
}

.product .product-versions .versions ul:first-child{
    background-color: var(--main-color, #173e72);
    border-radius: 5px 5px 0 0;
}

.product .product-versions .versions ul:first-child li{
    color: var(--links-text-color, #ffffff);    
}

.product .product-versions .versions ul:nth-child(even){
    background-color: #f6f6f6;
}

/*Similar Products*/

.similar-products{
    padding-top: 2.5rem;
} 

.similar-products ul li a{   
    padding: 1.25rem;
    margin: 0.625rem;
    display: flex;
    align-items: center;
    text-decoration: none; 
    background-color: #ffffff;
    border-radius: var(--border-radius, 0.3125rem);
    box-sizing: border-box;
    box-shadow: var(--box-shadow-items);
}

.similar-products ul li h3{
    color: var(--secondary-color, #df1a20);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing, 0.05rem);
}

.similar-products ul li picture{
    width: 105px;
    height: 100px;
    margin-right: 1rem;
}

.similar-products ul li picture img{
    width: 100%;
    height: 100%;
    display: block;
}

/*Product Video*/

.product-video > h2{
    margin-bottom: 1.875rem;
    text-transform: inherit;
    text-align: left;
}

.product-video video{
    width: 100%;
    padding: 1.25rem;
    background-color: #212121;
    border-radius: var(--border-radius, 0.3125);
    box-sizing: border-box;
}

.product-video iframe{
    width: 100%;
    height: 548px;
    padding: 1.25rem;
    background-color: #212121;
    border-radius: var(--border-radius, 0.3125);
    box-sizing: border-box;
}

/*BLOG PAGE (NOVEDADES)*/

.novedades .posts-list{
    width: 70%;
}

.novedades .posts-list .item-blog{
    width: 100%;
    margin-bottom: 2.5rem;
    background-color: #ffffff;
    box-shadow: var(--box-shadow-items);
    border-radius: var(--border-radius, 0.3125rem);
    transition: all.3s ease;
}

.novedades .posts-list .item-blog:last-child{
    margin-bottom: 0;
}

.novedades .posts-list .item-blog:hover{
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

.novedades .posts-list .item-blog a{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}

.novedades .posts-list .item-blog:last-child{
    margin-bottom: 0;
}

.novedades .posts-list .item-blog .cover-img{
    width: 40%;
    min-height: 240px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 0 0 5px;
}

.novedades .posts-list .item-blog .item-body{
    width: 60%;
    padding: 1.25rem;
    box-sizing: border-box
}

.novedades .posts-list .item-blog .item-body h2{
    margin-bottom: 1.25rem;
    color: var(--main-color, #173e72);
    font-size: 1.25rem;
    letter-spacing: var(--letter-spacing, 0.3125rem);
    line-height: 1.4rem; 
    text-transform: none;   
    text-align: left;
}

.novedades .posts-list .item-blog .item-body p{
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.3125rem);
    line-height: 1.5rem;    
}

.novedades .separator{
    display: none;
}

/*Paginador*/

#load-more{
    margin-top: 2.5rem;
}

#load-more a{
    margin: 0 auto;
    cursor: pointer;
}

#load-more img{
    width: 45px;
    margin: 0 auto;
    display: block;
}

#load-more span{
    color: var(--title-color, #46464c);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: center;
    display: block;
}

/*Post Blog*/

.novedades section{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.novedades section h2{
    width: 65%;
    margin: 0 0 1.5rem 0;
    color: var(--title-color, #46464c);
    font-size: 1.5rem;
    font-family: var(--main-font, "Open Sans");
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.25;
}

.novedades section article{
    width: 65%;
}

.novedades section article picture{
    width: 100%;
    margin: 0 0 1.5rem 0;
    display: block;
}

.novedades section article picture img{
    width: 100%;
    border-radius: 5px;
    display: block;
}

.novedades section article p{
    margin: 0 0 1.5rem 0;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    font-family: var(--main-font, "Open Sans");
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.5;
}

.novedades section article p img{
    width: 98%;
    margin: 0 auto;
    padding: 1rem 0;
    border-radius: var(--border-radius);
    display: block;
}

.novedades section article ul{
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    font-family: var(--main-font, "Open Sans");
    letter-spacing: 0.05rem;
    line-height: 2.125rem;
    list-style-type: disc;
}

.novedades section article p strong, 
.novedades section article ul li strong{
    font-family: 600;
}

.novedades section article a{
    color: var(--main-color, #173e72);
    text-decoration: none;
}

.novedades section article a:hover{
    color: #0070a1
}

.novedades section article iframe{
    width: 80%;
    height: 280px;
    margin: 0 auto 1.5rem auto;
    border-radius: var(--border-radius, 0.3125);
    display: block;
}

/*Aside Post Blog*/

.novedades section aside{
    width: 30%;
}

.novedades section aside h3{
    margin: 0 0 1.5rem 0;
    color: var(--title-color, #46464c);
    font-size: 1.5rem;
    font-family: var(--main-font, "Open Sans");
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.5rem;
    text-transform: uppercase;
}

.novedades section aside a{
    margin-bottom: 3.125rem;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
    display: block;
    transition: all .5s ease;
}

.novedades section aside a:last-child{
    margin-bottom: 0;
}

.novedades section aside a:hover{
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.5);
}

.novedades section aside a .cover-img{
    width: 100%;
    height: 200px;
    margin-bottom: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}

.novedades section aside a .item-body{
    width: 100%;
    padding: 0 1.25rem 1.25rem 1.25rem;
    box-sizing: border-box;
}

.novedades section aside a .item-body h4{
    color: var(--main-color, #173e72);
    font-size: 1.125rem;
    font-family: var(--main-font, "Open Sans");
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.5;
}

.novedades section aside a .item-body h5{
    /* margin-bottom: 1.25rem; */
    color: #938e8e;
    font-size: 0.75rem;
    font-family: "Segoe Semi Bold", Arial, Helvetica, sans-serif;
    letter-spacing: 0.05rem;
    line-height: 1;
    text-transform: uppercase;
}

.novedades section aside a .item-body p{ 
    color: #626363;
    font-size: 0.875rem;
    font-family: "Segoe Regular", Arial, Helvetica, sans-serif;
    letter-spacing: 0.05rem;
    line-height: 1.5rem;
}

/*FAQ PAGE*/

.faq-list{
    width: 70%;
}

.faq-list ul li{
    margin-bottom: 0.875rem;
}

.faq-list ul li:last-child,
.faq-list ul li.open{
    margin-bottom: 0;
}

.faq-list ul li.open h3 i{
    transform: rotate(45deg);
    transition: all .5s ease-in-out;
}

.faq-list ul li h3{
    padding: 0.875rem;
    color: var(--links-text-color, #ffffff);
    font-size: 0.875rem;
    font-family: var(--main-font, "Open Sans");
    font-weight: 400;
    letter-spacing: var(--letter-spacing, 0.05rem);
    background: var(--vertical-blue-gradient);
    border-radius: var(--border-radius, 0.3125rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-list ul li div{
    padding: 0.875rem;
    display: none;
}

.faq-list ul li:last-child div{
    padding-bottom: 0;
}

.faq-list ul li:first-child div{
    display: block;
}

.faq-list ul li div p{
    margin-bottom: 1.4rem;
    color: var(--paragraph-color, #949494);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.3125rem);
    line-height: 1.4rem;
}

.faq-list ul li div p:last-child{
    margin-bottom: 0;
}

.faq-list ul li div p strong{
    font-weight: 600;
}

/*REQUISITIS PAGE*/

.req{
    width: 70%;
}

.req-items{
    width: 100%;
    margin: 2rem 0;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.req-items a{
    width: 32%;
    margin: 0.5%;
    padding: 2.5rem 0.875rem;
    color:  var(--links-text-color, #ffffff);
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius, 0.3125rem);
    background-color: var(--main-color, #173e72);
    display: block;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
}

.req-items a:hover{
    box-shadow: var(--box-shadow-items);
}

.req-items a img{
    width: 200px;
    margin: 0 auto 2rem auto;
    display: block;
}

.req-items a h3{
    margin-bottom: 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.4rem;
}

.req-items a i{
    font-size: 2.5rem;
} 

/*CONTACT PAGE*/

.contact{
    width: 90%;
    margin: 0 auto;
}

/*Form*/

.contact-form{
    margin: 2.5rem 0 0 0;
}

.contact-form form{
    margin-top: 1.5rem;
}

.contact-form form ul{
    display: flex;
    justify-content: space-between;
}

.contact-form form ul div{
    width: 49%;
}

.contact-form form ul div li{
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
}

.contact-form form ul div li input,
.contact-form form ul div li select,
.contact-form form ul div li textarea{
    width: 100%;
    height: 50px;
    padding: 1rem;
    color: var(--paragraph-color, #949494);
    font-family: var(--main-font, "Open Sans", sans-serif);
    font-size: 0.875rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    box-sizing: border-box;
    border-radius: var(--border-radius, 0.3125rem);
    border: none;
    box-shadow:  2.5px 2.5px 3px #9c9c9c, -1px -1px 2px #e4e4e4;
}

.contact-form form ul div li textarea{
    height: 122px;
}

.contact-form form button{
    cursor: pointer;
}

/*Form Validations*/

.contact-form form ul div li label span.error img{
    width: 25px;
    height: 25px;
    display: block;
}

.contact-form form ul div li label span.error{
    position: absolute;
    right: 10px;
    top: 14px;
}

.contact-ok{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.contact-ok div{
    padding: 1.25rem;
    margin: 0 5%;
    background-color: #ffffff;
    border-radius: 0.3125rem;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
}

.contact-ok div p{
    color: #000000;
    font-size: 1rem;
    font-family: var(--main-font, 1.6); 
    text-align: center;
    line-height: 1.6;
}

.contact-ok div p i{
    margin-bottom: 1.25rem;
    font-size: 2.5rem;
    color: green;
}

.contact-ok div p svg{
    width: 2.5rem;
    height: 2.5rem;
    fill: green;
}

/*Map*/

.contact-map{
    display: flex;
    justify-content: space-between;
    flex-direction: row;    
}

#map{
    width: 70%;
    height: inherit;
}

#map iframe{
    width: 100%;
    height: 100%;
}

.contact-data{
    width: 30%;
    padding: 1.25rem;
    background: var(--main-color, #173e72);
    box-sizing: border-box;
}

.contact-data h2{
    margin-bottom: 1.5rem;
    color: var(--links-text-color, #ffffff);
    font-size: 1.5rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    text-align: left;
    text-transform: uppercase;
    line-height: 1;
}

.contact-data p{
    margin-bottom: 1.5rem;
    color: var(--links-text-color, #ffffff);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing, 0.05rem);
    line-height: 1.6em;
    text-align: left;
}

.contact-data span{
    margin: 5px 0 -2px 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: var(--letter-spacing, 0.05rem);
    display: block;
}

.contact-data p strong{
    font-weight: 600;
}

.contact-data p:last-child{
    margin-bottom: 0;
}

.contact-data p a{
    color: #ffffff;
    display: flex;
    text-decoration: none;
}

.contact-data p svg{
    height: 1.125rem;
    margin-right: 5px;
    fill: #ffffff;
}

/*DISTRIBUIDORES PAGE*/

.dist{
    width: 70%;
}

.dist p{
    margin-bottom: 1.5rem;
}

.dist p:last-child{
    margin-bottom: 0;
}

.dist a.blue-btn{
    margin: 0 auto;
}

/*-----------------------------------------*/
/*CONTENT FINISH*/
/*-----------------------------------------*/

/*-----------------------------------------*/
/*FOOTER BEGIN*/
/*-----------------------------------------*/

footer{
    padding: 2.5rem 0 0.625rem 0;
    background: var(--vertical-blue-gradient);
}

.footer-logo{
    width: 200px;
    margin: 0 auto 2.5rem auto;
}

.footer-logo img{
    width: 100%;
    display: block;
}

.footer-content{
    margin: 0 0 2.5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.footer-content .footer-data{
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.footer-content .footer-data ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.footer-content .footer-data ul li h3{
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.6rem;
}

.footer-content .footer-data ul li p,
.footer-content .footer-data ul li a{
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.6rem;
    text-decoration: none;
}

.footer-content .footer-data ul li p span,
.footer-content .footer-data ul li a span{
    margin: 5px 0 -2px 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: var(--letter-spacing, 0.05rem);
    display: block;
}

.footer-content .footer-data ul li a{
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-content .footer-data ul li a svg{    
    height: 1.5rem;
    margin-right: 5px;
    fill: #ffffff;
}

.footer-content .footer-social{
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.footer-social ul{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-social ul li{
    margin: 0 2%;
}

.footer-social ul li a{
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--main-color, #173e72);
    box-shadow: 2.5px 2.5px 3px #0d1621, -1px -1px 2px #406ba2;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-social ul li a svg{
    height: 1.5rem;
    fill: #ffffff;
}

.footer-social img{
    width: 6.25rem;
    display: block;

}

/*Sub Footer*/

.sub-footer .copyright{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-footer .copyright p{
    color: var(--links-text-color, #ffffff);
    font-size: 0.75rem;
    letter-spacing: 0.025rem;
}

.sub-footer .copyright p a{
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease;
}

.sub-footer .copyright p a:hover{
    color: #949494;
}

/*RRHH - FORM*/

.rrhh-form{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.85);
    z-index: 199;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

.rrhh-form.open{
    visibility: visible;
}

.rrhh-form form{
    min-width: 425px;
    margin-top: -10rem;
    position: relative;
    padding: 1.25rem;
    background-color: #ffffff;
    border-radius: var(--border-radius, 0.3125rem);
    box-sizing: border-box;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.rrhh-form.open form{
    margin-top: 0;
    opacity: 1;
}

.rrhh-form form span i{
    position: absolute;
    top: 0.4rem;
    right: 0.625rem;
    color: #938e8e;
    font-size: 1rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.rrhh-form form span i:hover{
    color: #46464c;
}

.rrhh-form form h5{
    margin: 1rem 0 1.4rem 0;
    color: var(--title-color);
    font-family: var(--main-font);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    line-height: 1.4;
}

.rrhh-form form p{
    color: #46464c;
    font-size: 0.75rem;
    font-family: var(--main-font);
    line-height: 1.4rem;
    letter-spacing: var(--main-font);
}

.rrhh-form form p strong{
    font-weight: 700;
}

.rrhh-form form ul li{
    margin-top: 1rem;
}

.rrhh-form form ul li label{
    margin-bottom: 3px;
    color: #46464c;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: var(--letter-spacing);
    display: block;
}

.rrhh-form form ul li label span{
    color: #df1a20;
}

.rrhh-form form ul li label span.error{
    font-size: 0.625rem;
    text-align: right;
}

.rrhh-form form ul li input{
    width: 100%;
    padding: 0.625rem;
    color: #46464c;
    font-size: 0.875rem;
    font-family: var(--main-font);
    letter-spacing: var(--letter-spacing);
    line-height: 1;
    box-sizing: border-box;
    border: none;
    border-radius: var(--border-radius, 0.3125rem);
    box-shadow: 2.5px 2.5px 3px #9c9c9c, -1px -1px 2px #e4e4e4;
    -webkit-appearance: none;
}

.rrhh-form form ul li button{
    margin-bottom: 1rem;
    padding: 8px 30px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: var(--main-font);
    text-align: center;
    letter-spacing: var(--letter-spacing);
    border: none;
    border-radius: 5px;
    background-color: var(--main-color);
    transition: all .3s ease-in-out;
}

.rrhh-form form ul li button:hover{
    cursor: pointer;
    background-color: #406ba2;
}

/*ERROR 404*/

.error404{
    margin: 0 auto;
    padding: 120px 0px;
    text-align: center;
}

.error404 h1{
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-family: var(--main-font);
    line-height: 1.5em;
    letter-spacing: 0.05em;
}

.error404 p{
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0.05em;
}

#contador{
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-family: var(--main-font);
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.05em;
}

.error404 img{
    width: 220px;
    margin: 2.5rem auto 2.5rem auto;
    display: block;
}

.error404 a{    
    width: 150px;
    padding: 15px 20px;
    margin: 0 auto;
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-family: var(--main-font);
    letter-spacing: 0.05em;
    line-height: 1em;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    background: var(--main-color); 
    transition: all .3s ease;
}

.error404 a:hover{
    background: rgba(23,62,114,0.9);
    cursor: pointer;
}

/*-----------------------------------------*/
/*FOOTER FINISH*/
/*-----------------------------------------*/

/*-----------------------------------------*/
/*MEDIA QUERYS BEGIN*/
/*-----------------------------------------*/

@media screen and (max-width: 1279px){    

    /*HEADER*/

    .head-logo{
        width: 150px;
    }

    /*Nav Bar*/

    .nav-bar {
        width: 60%;
        margin-left: 3%;
    }

    .nav-bar ul li a{
        font-size: 0.8rem;
    }

    .head-social ul li {
        margin-left: 0.75rem;
    }

    /*CONTENT PAGES*/

    /*Slider*/

    .slide-captions .caption p:first-child{
        font-size: 2rem;
    }

    /*Home Products*/

    .home-products-item picture{
        width: 30%;
        height: auto;
    }

    .home-products-item div{
        width: 65%;
        margin-left: 5%;
    }

    .home-products-item div h3{
        margin-bottom: 1rem;
        font-size: 1rem;
        letter-spacing: var(--letter-spacing, 0.05rem);
    }
    
    .home-products-item ul li{
        font-size: 1rem;
    }

    /*PRODUCT PAGE*/

    /*Similar Products*/

    .similar-products ul li a{   
        padding: 0.625rem;
    }

    .similar-products ul li picture{
        width: 80px;
        height: 76px;
    }

}

@media screen and (min-width: 1024px){

    .mobile-mask, .nav-bar-mobile{
        display: none;
    }

}

@media screen and (max-width: 1023px){

    :root{
        --letter-spacing: 0.025rem;
    }

    /*COMMON FORMATS*/

    .center-content{
        max-width: 768px;
    }

    /*HEADER*/

    .nav-bar, .head-social{
        display: none;
    }

    header{
        width: 100%;
        position: fixed;
        background-color: #f0f0f0;
    }

    .header-content,
    header.after-fixed .header-content{
        padding: 0.3125rem 0;
    }

    /*Begin Navicon*/

    #xbtn {
        display: inline-block;
        border: none;
        background: none;
    }

    .afterFixed #xbtn {
        margin: 8px 0 0 0;
    }

    #xbtn:focus{
        outline: none;
    }

    #xbtn span {
        display: block;
    }

    /*Begin Lines Navicon*/

    .lines-button {
        padding: 1rem 1rem;
        transition: .3s;
        cursor: pointer;
        user-select: none;
        border-radius: 0.1428575rem;
    }

    .lines-button:hover {
        opacity: 1;
    }

    .lines-button:active {
        transition: 0;
    }

    .lines {
        display: inline-block;
        width: 2rem;
        height: 0.285715rem;
        background: var(--main-color, #173e72);
        border-radius: 0.1428575rem;
        transition: 0.3s;
        position: relative;
    }

    .lines:before, .lines:after {
        display: inline-block;
        width: 2rem;
        height: 0.285715rem;
        background: var(--main-color, #173e72);
        border-radius: 0.1428575rem;
        transition: 0.3s;
        position: absolute;
        left: 0;
        content: '';
        -webkit-transform-origin: 0.1428575rem center;
        transform-origin: 0.1428575rem center;
    }

    .lines:before {
        top: 0.5rem;
    }

    .lines:after {
        top: -0.5rem;
    }

    .lines-button:hover .lines:before {
        top: 0.6rem;
    }

    .lines-button:hover .lines:after {
        top: -0.6rem;
    }

    .lines-button.x.close .lines {
        background: transparent;
    }

    .lines-button.x.close .lines:before, 
    .lines-button.x.close .lines:after {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        top: 0;
        width: 2rem;
        background: var(--main-color, #173e72);
    }

    .lines-button.x.close .lines:before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .lines-button.x.close .lines:after {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
    }

    /* Pop UP */

    /* .pop-up a{   
        margin: 0.625rem; 
        max-height: 640px;
    } */

    .pop-up div{
        width: 94%;
    }

    .pop-up div iframe{
        height: 400px; 
        width: 712px;
        margin-bottom: 0.625rem;
        border-radius: 5px;
        display: block;
    }

    /* .pop-up div video{
        max-height: 500px;  
        height: 100%;
        width: 100%;
        margin-bottom: 0.625rem;
        border-radius: 5px;
    } */

    .pop-up div button{
        background-color: transparent;
        border: none;
        padding: 5px;
        position: absolute;
        top: -35px;
        right: 0px;
    }
    

    /*Mobile nav menu*/

    #mobile-menu{
        width: 100%;
        padding: 1rem;
        margin: 0 auto;
        position: fixed;
        left: 105%;
        bottom: 0;
        top: 4.5768rem;
        background: #f0f0f0;
        border-top: 1px #949494 solid;
        border-left: 1px #949494 solid;    
        box-shadow: -3px 10px 6px rgba(0,0,0,0.75);
        overflow-y: scroll;
        z-index: 101;
        transition: all .3s ease-out;
        float: none;       
        display: block;
    }

    #mobile-menu.after-fixed{
        margin: 0 auto;
        top: 5.625rem
    }

    #mobile-menu.show-mobile-menu{
        right: 0;
        left: 50%;
        transition: all .6s ease-in;
    }

    #mobile-menu li{
        margin: 1.5rem 0;
        float: none;
    }

    #mobile-menu li:first-child{
        margin: 0;
    }

    #mobile-menu li a{
        color: var(--title-color, #46464c);
        font-family: var(--secondary-font, "Poppins", sans-serif);
        text-decoration: none;font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: var(--letter-spacing, 0.05rem);
        line-height: 1;
        text-decoration: none;
        text-transform: uppercase;
    }

    #mobile-menu li:nth-last-child(2) a{
        width: 140px;
        height: 40px;
        color: var(--links-text-color, #ffffff);
        font-size: 0.75rem;
        font-family: var(--main-font, "open Sans", sans-serif);
        line-height: 1;
        letter-spacing: 0.025rem;
        text-decoration: none;
        text-align: center;
        background: var(--main-color, #173e72);
        border: none;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #mobile-menu li:last-child{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #mobile-menu li:last-child a{
        margin-right: 0.625rem;
        width: 2.5rem;
        height: 2.5rem;
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow:  2.5px 2.5px 3px #b5b5b5, -1px -1px 2px #ffffff;
    }

    #mobile-menu li:last-child a svg{
        height: 1.5625rem;
        fill: #173e72;
    }

    #mobile-menu li.current a{
        background-color: var(--main-color, #173e72);
        color: #ffffff;
    }

    .hidden-scroll{
        overflow: hidden;
    }

    .after-fixed{
        box-shadow: 3px 3px 6px rgba(0,0,0,0.75);
        transition: all .3s ease-in-out;
        backdrop-filter: none;
        background-color: #f0f0f0;
    }

    /*Mobile Mask*/

    .mobile-mask{
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: transparent;
        transition: all .3s linear;
        visibility: hidden;
    }

    .mobile-mask.show{
        background-color: rgba(0,0,0,0.75);
        z-index: 102;
        transition: all .6s linear;
        visibility: visible;
    }

    /*CONTENT PAGES BEGIN*/

    /*Slider*/

    .home-slider{
        height: calc(100vh - 73px);
    }
    
    .slide-img .slide{ 
        height: calc(100vh - 73px);
    }

    /*Slide Captions*/

    .slide-captions .caption p{
        margin-bottom: 1.4rem;
        font-size: 1.125rem;
        line-height: 1.6;
    }

    .slide-captions .caption p:first-child{
        font-size: 1.875rem;
    }

    /*Cover Pages*/

    .cover-page{
        margin-top: 4.5758rem;
    }

    /*Titles*/

    h1, h2{
        font-size: 1.25rem;
    }

    /*Buttons*/

    .blue-btn, 
    .orange-btn{
        width: 166px;
        height: 45px;
        font-size: 0.75rem;
        border-radius: 25px;
    }

    /*Mains Containers*/

    .row-content p{
        font-size: 0.875rem;
    }

    .items-flexbox{
        padding: 2.5rem 0 0 0;
    }

    .items-flexbox .item img{
        height: 60px;
    }

    .items-flexbox .item p{
        font-size: 0.875rem;
        letter-spacing: var(--letter-spacing, 0.025rem);
        line-height: 1.4em;
        text-align: center;
    }

    /*Home Links*/

    .home-link{
        height: 250px;
    }

    .home-link p{
        font-size: 0.875rem;
    }

    /*PAGES CONTENT*/

    .alert p{
        font-size: 0.875rem;
        line-height: 1.4;
    }

    /*COMAPNY PAGE*/

    .company{
        flex-direction: column;
    }

    .company article{
        margin-bottom: 1.5rem;
    }

    .company article,
    .company aside{
        width: 100%;
    }

    .company aside h2:first-child,
    .company aside video{
        display: none;
    }

    .company article video{
        display: block;
        padding: 0.625rem;
    }

    .company aside .gallery{
        padding: 0.625rem;
    }

    /*PRODUCTS CATALOG PAGE*/

    /*Breadcrumbs*/

    .breadcrumbs p{
        font-size: 0.75rem;
    }

    .products aside {
        width: 35%;
    }

    /*Products Grid*/

    .products-grid {
        width: 65%;
    }

    .products-grid .item-grid {
        width: 47.5%;
    }

    .products-grid .item-grid img {
        height: 8rem;
        margin-bottom: 1.5rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .products-grid .product-video {
        margin-left: 0;
    }

    /*PRODUCT PAGE*/

    .product{
        width: 63%;
    }

    .product h2{
        font-size: 1.125rem; 
        text-align: left;
    }

    .product .product-row{
        flex-direction: column;
    }

    .product .product-row .product-gallery{
        width: 100%;
        padding: 0.625rem;
        margin-bottom: 1.5rem;
    }

    .product .product-row .product-description{
        width: 100%;
    }

    .product .product-row .product-description div{
        margin-bottom: 2.5rem;
    }

    .product .product-row .product-description a{
        margin: 0 auto;
    }

    /*Product Adventajes*/

    .product .product-adv ul li{
        width: 100%;
        margin: 1rem 0 0 0;
        line-height: 1.4;
    }

    /*Product Versions*/

    .product .product-versions .versions{
        overflow-x: scroll;
    }

    .product .product-versions .versions ul{
        width: fit-content;
        flex-wrap: nowrap;
    }

    .product .product-versions .versions ul li{
        width: 12%;
        min-width: 130px;
        padding: 0.625rem 0.5rem;
    }

    .product .product-versions .versions ul li:first-child{
        width: 16%;
        min-width: 160px;
    }

    .product-video iframe{
        height: 295px;
    }

    /*BLOG PAGE (NOVEDADES)*/

    .novedades .posts-list{
        width: 63%;
    }

    .novedades .posts-list .item-blog {
        margin-bottom: 2rem;
    }

    .novedades .posts-list .item-blog:last-child{
        margin-bottom: 0;
    }

    .novedades .posts-list .item-blog a {
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .novedades .posts-list .item-blog .cover-img {
        width: 100%;
        min-height: 200px;
        border-radius: 5px 5px 0 0;
    }

    .novedades .posts-list .item-blog .item-body {
        width: 100%;
        padding: 1.25rem;
        box-sizing: border-box;
    }

    /*Post Blog*/

    .novedades section h2{
        font-size: 1.25rem;
    }
    
    .novedades section article iframe{
        width: 100%;
    }

    /*Aside Post Blog*/

    .novedades section aside{
        width: 32%;
    }

    .novedades section aside h3{
        font-size: 1.25rem;
    }

    .novedades section aside a{
        margin-bottom: 2.5rem;
    }

    .novedades section aside a .cover-img{
        width: 100%;
        height: 160px;
    }

    .novedades section aside a .item-body h4{
        font-size: 1rem;
    }

    /*FAQ PAGE*/

    .faq-list{
        width: 63%;
    }

    .faq-list ul li h3{
        padding: 0.75rem;
        line-height: 1.4rem;
    }

    .faq-list ul li h3 i{
        margin-left: 5px;
    }

    /*REQUISITS PAGE*/

    .req{
        width: 63%;
    }

    .req-items a{
        width: 49%;
    }

    .req-items a img{
        width: 180px;
        margin: 0 auto 2rem auto;
        display: block;
    }

    .req-items a h3{
        margin-bottom: 2rem;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: var(--letter-spacing, 0.05rem);
        line-height: 1.4rem;
    }

    .req-items a i{
        font-size: 1.75rem;
    } 
    
      
    /*CONTACT PAGE*/

    .contact{
        width: 100%;
        margin: 0 auto;
    }

    /*FOOTER*/

    .footer-content{
        margin: 0 0 2.5rem 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
    }

    .footer-content .footer-data{
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .footer-social ul li{
        margin: 0 0.5rem;
    }
    
    .footer-content .footer-social{
        gap: 2.5rem;
    }

    /*DISTRIBUIDORES PAGE*/

    .dist{
        width: 63%;
    }

    .dist .contact-form form ul{
        flex-direction: column;
    }

    .dist .contact-form form ul div{
        width: 100%;
    } 

}

@media screen and (max-width: 767px){

    /*COMMON FORMATS*/

    .center-content{
        max-width: 425px;
        padding: 0 2%;
    }

    /*Mobile nav menu*/

    #mobile-menu.show-mobile-menu{
        left: 30%;
    }

    /*Slide Captions*/

    .slide-captions .caption{
        padding: 0 1%;
        box-sizing: border-box;
    }

    .slide-captions .caption p{
        font-size: 0.875rem;
    }

    .slide-captions .caption p:first-child{
        font-size: 1.375rem;
    }

    /*Titles*/

    h1, h2{
        text-align: center;
    }

    /*Main Containers*/
    
    .row-content-flexbox{
        flex-direction: column;
    }

    .col-content{
        width: 100%;
        padding: 2.5rem 0;
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .items-flexbox{
        flex-wrap: wrap;
    }

    .items-flexbox .item{
        width: 49.5%;
        margin-bottom: 1.25rem;
    }

    /* Pop UP */

    .pop-up div{
        padding: 0.3125rem;
    }

    /* .pop-up div video{
        margin-bottom: 0.3125rem;
    } */

    .pop-up div iframe{
        height: 220px; 
        width: 390px;
    }

    .pop-up div a{
        /* padding: 0.875rem 1.25rem; */
        padding: 0px;
        font-size: 0.875rem;
    }

    /*Home Posts*/

    .home-posts{
        margin: 1.875rem 0 0 0;
    }

    .home-posts .item-post{
        padding: 0.625rem;
    }

    .home-posts .item-post .cover-img{
        height: 150px;
        margin-bottom: 0.625remrem;
    }

    .home-posts .item-post h3{
        height: 2.5rem;
        margin-bottom: 0.625rem;
        font-size: 0.875rem;
        line-height: 1.4em;
    }

    .home-posts .item-post p{
        height: 2.8125rem;
        margin-bottom: 0.625rem;
        font-size: 0.75rem;
    }

    .home-posts .item-post a{
        width: 140px;
        height: 2.5rem;
        font-size: 0.75rem;
    }

    /*PRODUCTS CATALOG PAGE*/

    /*Breadcrumbs*/

    .breadcrumbs p{
        font-size: 0.6255rem;
    }

    .products{
        flex-direction: column-reverse;
    }

    .products aside{
        width: 100%;
    }

    /*Categories menu*/

    .products aside .categories{
        display: none;
    }

    /*Products Grid*/

    .products-grid{
        width: 100%;
    }

    .products-grid .grid{
        justify-content: space-between;
    }

    .products-grid .item-grid{
        width: 48%;
        margin-left: 0;
        margin-bottom: 4.25%;
        padding: 0.625rem;
    }

    .products-grid .item-grid img{
        height: 7rem;
        margin-bottom: 0.625rem;
    }

    .products-grid .item-grid h3{
        width: 100%;
        margin-bottom: 0.625rem;
        font-size: 1rem;
    }

    .products-grid .item-grid ul{
        margin-bottom: 4.0675rem;
    }

    .products-grid .item-grid ul li{
        width: 100%;
    }

    .products-grid .item-grid ul li span{
        font-size: 0.75rem;
    }

    /*PRODUCTS PAGE*/

    .product{
        width: 100%;
    }

    /*BLOG PAGE (NOVEDADES)*/

    .novedades{
        flex-direction: column;
    }

    .novedades .posts-list{
        width: 100%;
        margin-bottom: 2.5rem;
    }    

    .novedades .separator{
        width: 100%;
        height: 100px;
        margin-bottom: 1.875rem;
        background-color: #f0f0f0;
        display: block;
    }

    /*Product Video*/


    .product-video h2{
        margin-bottom: 1.875rem;
    }

    .product-video video{
        margin-bottom: 1.875rem;
        padding: 0.5rem;
    }

    .product-video iframe{
        height: 247px;
    }

    /*BLOG PAGE (NOVEDADES)*/

    .novedades section h2,
    .novedades section article{
        width: 100%;
    }

    .novedades section article .product-gallery{
        margin-bottom: 1.5rem;
    }

    /*Aside Post Blog*/

    .novedades section aside{
        width: 100%;
    }

    .novedades section aside a .cover-img{
        height: 200px;
    }

    /*FAQ PAGE*/

    .faq{
        flex-direction: column;
    }

    .faq-list{
        width: 100%;
        margin-bottom: 2.5rem;
    }

    /*REQUISITS PAGE*/

    .req{
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .req-items a{
        padding: 1rem 0.5rem;
    }

    .req-items a img{
        width: 150px;
        margin: 0 auto 1.25rem auto;
    }

    .req-items a h3{
        margin-bottom: 1.25rem;
        font-weight: 500;
    }

    .req-items a i{
        font-size: 1.75rem;
    }

    /*CONTACT PAGE*/

    .contact-form form ul{
        flex-direction: column;
    }

    .contact-form form ul div{
        width: 100%;
    }

    /*Map*/

    .contact-map{
        flex-direction: column-reverse;    
    }

    #map{
        width: 100%;
        height: 300px;
    }

    .contact-data{
        width: 100%;
    }

    .contact-data h2{
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .contact-data p{
        margin-bottom: 1.25rem;
    }

    /*DISTRIBUIDORES PAGE*/

    .dist{
        width: 100%;
        margin-bottom: 2.5rem;
    }

    /*FOOTER*/

    .footer-content .footer-data ul{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .footer-content .footer-data ul li{
        margin-bottom: 2.5rem;
    }

    .footer-content .footer-data ul li:last-child{
        margin-bottom: 0;
    }

    .footer-content .footer-data ul li a{
        justify-content: center;
    }

    /*Sub Footer*/

    .sub-footer .copyright{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .sub-footer .copyright p{
        margin-bottom: 0.625rem;
        text-align: center;
    }

    .sub-footer .copyright p:last-child{
        margin-bottom: 0;
    }

    /*RRHH - FORM*/

    .rrhh-form form{
        min-width: 300px;
        width: 96%;
    }

    .rrhh-form form span i{
        font-size: 1.5rem;
    }

    .rrhh-form form p{
        text-align: center;
    }

    .rrhh-form form ul li label{
        margin-bottom: 5px;
    }

    .rrhh-form form ul li button{
        margin: 0 auto 1.25rem auto;
        padding: 12px 50px;
        display: block;
    }

}

@media screen and (max-width: 424px){

    /*HEADER*/

    .head-logo,
    header.after-fixed .head-logo{
        width: 125px;
    }

    /*Mobile nav menu*/

    #mobile-menu{
        top: 3.9375rem;
    }

    /*Cover Pages*/

    .cover-page{
        margin-top: 3.9375rem;
    }

    /*Buttons*/

    .blue-btn, 
    .orange-btn{
        width: 140px;
        height: 40px;
        font-size: 0.75rem;
        border-radius: 25px;
    }

    .pop-up div div{
        max-width: 375px;
        max-height: none;  
        position: relative;
    }

    .pop-up div iframe{
        height: 197px; 
        width: 350px;
    }
    
    .pop-up div a{ 
        height: auto;  
    }

    .pop-up div button{
        background-color: transparent;
        border: none;
        padding: 5px;
        position: absolute;
        top: -35px;
        right: 0px;
    }

    .pop-up div a img{
        height: auto;
        width: 100%;
        display: block;
    }

    .product-video iframe{
        height: 212px;
        padding: 10px;
    }


}

@media screen and (max-width: 374px){

    .pop-up div div{
        max-width: 320px;
    }

    .pop-up div iframe{
        height: 168px; 
        width: 300px;
    }

    .product-video iframe{
        height: 168px;
    }
}

/*-----------------------------------------*/
/*MEDIA QUERYS FINISH*/
/*-----------------------------------------*/