::-webkit-scrollbar-track{
	background-color: var(--color6);
}

::-webkit-scrollbar{
	width: 0.25em;
	background-color: var(--color6);
}

::-webkit-scrollbar-thumb{
	border-radius: 0.5em;
	background-color: var(--color5);
}


body.p-relative {
    position: relative;
}

/* NOTIFICACION ------------------------------------------------------------ */

.notification_body {
    max-width: 40em;
}

/* CURSOR ------------------------------------------------------------ */

#cursor {
    position: absolute;
    width: 2em;
    height: 2em;
    box-sizing: border-box;
    transition: 0.1s;
    border-radius: 50%;
    pointer-events: none;
    background-color: var(--color1);
    z-index: 100;
    top: -2em;
    left: -2em;
    text-align: center;
}

.p-relative #cursor {
    top: -10em;
}

#cursor img {
    width: 1.5em;
    height: 1.5em;
}

#cursor span {
    display: none;
    font-size: .9em;
    font-weight: 700;
    color: #000;
}

#cursor.available {
    width: 6em;
    height: 6em;
    top: -5em;
    left: -5em;
    opacity: .7;
    background-color: var(--color3);
}

#cursor.available img {
    display: none;
}

#cursor.available.click span#click,
#cursor.available.ver span#ver {
    display: inline;
}

/* NAVBAR ----------------------------------------------------------------------- */

#navbar .navbar-responsive {
    display: none;
}

/* INDEX ------------------------------------------------------------------- */

#inicio .mobile {
    display: none;
}

.tab-content-wrapper {
	flex: 1;
}

#sobre-nosotros > aside {
    width: 40%;
}

#metricas > ul.threeLi {
    justify-content: center;
}

#reviews > ul.threeLi {
    justify-content: center;
}

#servicios .tabs a {
    font-size: 1.125em;
}

.gradient {
    height: 100vh;
}

.gradient.modified {
    height: 100%;
    margin-top: -8em;
}

#proyectos {
    height: 80vh;
}

/* CONTACTO ------------------------------------------------------------------- */

#contacto > header span {
    display: none;
}

#contacto > article > form {
    flex: 1;
    margin: 0 2em;
}

#contacto .bg-gradient.mail > div > ul > li {
    font-size: 0.8em;
}
#contacto .bg-gradient.mail i.argentina, #contacto .bg-gradient.mail i.mexico {
    font-size: 1.25em;
}

/* SERVICIO ---------------------------------------------------------------------- */

#servicio > aside {
    margin: auto;
}

.proyectosImg .phone {
    height: 26em;
    min-height: 26em;
    width: 19em;
    min-width: 19em;
}

.proyectosImg .tablet {
    width: 36em;
    min-width: 36em;
    height: 28em;
    min-height: 28em;
}

/* PORTAFOLIO ---------------------------------------------------------------------- */

#portafolio .destacados ul li:nth-child(2n) a{
    flex-direction: row-reverse;
}

.listado ul li:nth-child(2n) {
    transform: translateY(75px);
}

.listado ul li {
    min-height: 25em;
    height: 25em;
}

#portafolio .destacados .proyecto {
    width: 45%;
    height: 25em;
    min-height: 25em;
}

#portafolio .destacados ul li a img {
    border-radius: .25em 0 0 .25em;
}

.listado ul li .prod {
    opacity: 0;
    visibility: hidden;
}

.listado .index li a div {
    min-height: 100%;
    height: 100%;
    width: 100%;
    position: relative;
}

.listado > footer {
    margin-top: 7em;
}

.nosotros > article {
    width: 50%;
}

/* NOSOTROS ---------------------------------------------------------------------- */

#valores > ul li div {
    margin-left: 1em;
}

#valores > ul li.right div {
    margin-right: 1em;
}

/* AGENDAR ---------------------------------------------------------------------- */

#agendar .popup div label i {
    width: 2em;
    min-width: 2em;
    height: 2em;
    min-height: 2em;
    background-color: white;
}

#agendar  .popup {
    width: 100%;
    height: 100vh;
}  

#agendar .popup .imagenes {
    height: 70%;
}

#agendar .ul-form .input-dia div label {
    display: none;
}

/* FAQ ---------------------------------------------------------------------- */

#faq .item .image.cotizacion {
    width: 30%;
}

#faq .item .image {
    width: 40%;
}

#faq .item .text {
    flex: 1;
}

#faq .item:nth-child(2n) {
    flex-direction: row-reverse;
    justify-content: end;
}

#faq > article + div {
    width: 100%;
    height: 10em;
    background-color: var(--color2);
}

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

#footer > header > div {
    margin: 0 5em;
}

.chat-box { 
    width: 18em;
    height: 19em;
}

#floating-footer .whatsapp label:hover > .chat-box {
    top: -18em;
}

#floating-footer .agendar a {
    width: 3.6em;
}

#floating-footer > ul > li > a img,
#floating-footer .whatsapp > label > i {
    width: 2em;
    min-width: 2em;
    height: 2em;
    min-height: 2em;
}

.chat-text a i {
    width: 1.5em;
    height: 1.5em;
}