/**************** icons social floats *******************/
.float-social {
    position: fixed;
    width: 40px;
    height: 162.5px;
    right: 0;
    z-index: 40;
    top: 150px;
    background: rgba(255, 255, 255, 0);
    display: grid;
    overflow: hidden;
}


.float-social a .rotate {
position: relative;
border-left: 1px solid #e1e0e0;
border-right: 1px solid #e1e0e0;
border-top: 1px solid #e1e0e0;
padding: 5px;
background: rgba(255,255,255,1);
transform-style: preserve-3d;
transition: all .5s;
}


.float-social #facebook .rotate:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background-position: center;
background-size: 26px;
top: 0;
filter: invert(100%);
left: 0;
background-image: url(../assets/img/face-logo.png);
background-color: #00ffff;
background-repeat: no-repeat;
transform: translate3d(15px,0px,15px) rotateY(-90deg);
transition: all .5s;
perspective: 600;
transform-style: preserve-3d;
}

.float-social #insta .rotate:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background-position: center;
background-size: 26px;
top: 0;
left: 0;
background-image: url(../assets/img/instagram.png);
background-color: #00ffff;
filter: invert(100%);
background-repeat: no-repeat;
transform: translate3d(15px,0px,15px) rotateY(-90deg);
transition: all .5s;
perspective: 600;
transform-style: preserve-3d;
}

.float-social #linked .rotate:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background-position: center;
background-size: 26px;
top: 0;
left: 0;
background-image: url(../assets/img/linkedn.png);
background-repeat: no-repeat;
background-color:  #00ffff;
filter: invert(100%);
transform: translate3d(15px,0px,15px) rotateY(-90deg);
transition: all .5s;
perspective: 600;
transform-style: preserve-3d;
}

.float-social #pinte .rotate:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background-position: center;
background-size: 26px;
background-repeat: no-repeat;
top: 0;
left: 0;
background-image: url(../assets/img/pinter.png);
background-color:  #00ffff;
filter: invert(100%);
transform: translate3d(15px,0px,15px) rotateY(-90deg);
transition: all .5s;
perspective: 600;
transform-style: preserve-3d;
}


.float-social a:hover .rotate {
perspective: 600;
transform: translateX(-15px) rotateY(90deg);

}

.float-social a img {
width: 26px;
}

.float-social #pinte .rotate {
border-bottom: 1px solid #e1e0e0;
}

/****************** animation iconos *****************/

#facebook {
animation: runa 6s;
-webkit-animation: runa 6s;
}

@keyframes runa {
    0% {
    transform: translateX(100px);
    } 
    
    50% {
    transform: translateX(100px);
    } 
    
    70% {
    transform: translateX(0px);
    }
}

#insta {
animation: runb 6s;
-webkit-animation: runb 6s;
}

@keyframes runb {
    0% {
    transform: translateX(100px);
    } 
    
    55% {
    transform: translateX(100px);
    } 
    
    70% {
    transform: translateX(0px);
    }
}

#linked {
animation: runc 6s;
-webkit-animation: runc 6s;
}

@keyframes runc {
    0% {
    transform: translateX(100px);
    } 
    
    60% {
    transform: translateX(100px);
    } 
    
    70% {
    transform: translateX(0px);
    }
}

#pinte {
animation: rund 6s;
-webkit-animation: rund 6s;
}

@keyframes rund {
    0% {
    transform: translateX(100px);
    } 
    
    65% {
    transform: translateX(100px);
    } 
    
    70% {
    transform: translateX(0px);
    }
}


/**************** end icons social floats *******************/
#portada-y {
padding: 0;
width: 100%;
height: 800px;
overflow: hidden;
}

#slider-index {
width: 100%;
height: 87%;
border: 0;
}

#portada-y p {
width: 1300px;
margin: 0 auto;
font-size: 17px;
text-align: center;
font-family: 'PantonRegular';
font-weight: 100;
}


#sec-rojo {
width: 100%;
height: 600px;
padding: 0;
background-image: url(../assets/img/background-rojo.png);
background-size: cover;
}

#sec-rojo .conteiner-spacer {
width: 1300px;
height: 100%;
}

#sec-rojo .conteiner-spacer .li-title {
width: 100%;
height: 15%;
}

#sec-rojo .conteiner-spacer .li-title  h2 {
font-family: 'PantonRegular';
font-size: 30px;
color: white;
text-align: center;
width: 100%;
top: 30px;
position: relative;
}

#sec-rojo .conteiner-spacer .li-sectiones {
width: 100%;
height: 80%;
overflow: hidden;
}

#sec-rojo .conteiner-spacer .li-sectiones label {
cursor: pointer;
margin-top: 10px;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo {
width: 100%;
height: 50%;
display: flex;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in {
text-align: center;
font-family: 'PantonRegular';
color: white;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in h6 {
position: absolute;
top: 115px;
left: 0px;
width: 100%;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in img {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in:hover img {
transform: scale(1.09);
filter: drop-shadow(1px 3px 5px rgba(25,25,25,0.0));
}

/********************** moda *************/

#mo-a,
#ca-a,
#pu-a,
#au-a,
#sw-a,
#ac-a,
#ho-a,
#aw-a {
display: none;
}

.cristal {
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 100%;
background: rgba(25,25,25,0.6);
z-index: 30;
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
display: none;
}

.cristal #cristal-con #closes {
position: absolute;
width: 35px;
height: 35px;
right: 20px;
top: 7px;
z-index: 8;
color: white;
font-family: 'PantonRegular';
font-weight: 600;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
text-align: center;
line-height: 1.4;
padding-right: 0.4px;
}

.cristal #cristal-con #closes img {
position: relative;
transform: rotateY(0px);
}

.cristal #cristal-con #closes:hover img {
border-radius: 50%;

transform: rotateY(180deg);
text-decoration: none;
}

.cristal #cristal-con {
 width: 60%;
 height: 390px;
 margin: 0 auto;
 top: 20%;
 position: relative;
  border-radius: 10px;
  background-image: linear-gradient(to right,rgba(25,25,25,0.0) 0%,rgba(25,25,25,0.0) 100%), url(../assets/img/background-rojo.png);
 background-blend-mode:multiply;
 border: solid 0px rgba(25,25,25,.1);
 box-shadow: 3px 5px 7px rgba(25,25,25,0.5);
}

.cristal #cristal-con .img-rep {
width: 30%;
position: relative;
float: left;
height: 100%;
background: #000;
position: relative;
overflow: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

#xcl {
opacity: 1;
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 100%;
}

#acl {
animation: move-a 30s infinite;
transform: translateX(0);
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 6;
}

#bcl {
animation: move-b 30s infinite;
transform: translateX(0);
opacity: 0;
position: absolute;
right: 0;
width: 700px;
top: -20px;
z-index: 5;
}

#ccl {
animation: move-l 30s infinite;
transform: translateX(0);
opacity: 0;
position: absolute;
width: 600px;
left: 0;
top: 0;
z-index: 4;
}

@keyframes move-a {
    0% {
    transform: translateX(0);
    opacity: 1;
    }
    30% {
    opacity: 1;
    }
    34% {
    transform: translateX(-120px);
    opacity: 0;
    }
    
}

@keyframes move-b {
    
    30% {
    transform: translateX(0px);
    opacity: 0;
    }
    
    32% {
    transform: translateX(0px);
    opacity: 1;
    }
    63% {
    opacity: 1;
    }
    68% {
    transform: translateX(120px);
    opacity: 0;
    }
    
}

@keyframes move-l {
    
    64% {
    transform: translateX(0px);
    opacity: 1;
    }
    
    97% {
    opacity: 1;
    }
    
    100% {
    transform: translateX(-120px);
    opacity: 0;
    }
    
}

.cristal #cristal-con .cont-selec {
width: 70%;
height: 100%;
position: relative;
float: left;
}

.cristal #cristal-con .cont-selec h2 {
width: 90%;
margin: 0 auto;
color: white;
font-family: 'PantonRegular';
position: relative;
margin-top: 20px;
}

.cristal #cristal-con .cont-selec p {
width: 90%;
margin: 0 auto;
font-family: 'PantonRegular';
color: white;
font-size: 17px;
text-align: justify;
position: relative;
margin-top: 25px;
}

/********************** funtion modal ***************/
.termo a {
text-decoration: none;
}

#mo-a:checked ~ .conteiner-spacer .li-sectiones #moda {
display: block;    
}

#ca-a:checked ~ .conteiner-spacer .li-sectiones #calzado {
display: block;    
}

#pu-a:checked ~ .conteiner-spacer .li-sectiones #publicidad {
display: block;    
}

#au-a:checked ~ .conteiner-spacer .li-sectiones #automotriz {
display: block;    
}

#sw-a:checked ~ .conteiner-spacer .li-sectiones #swimwear {
display: block;    
}

#ac-a:checked ~ .conteiner-spacer .li-sectiones #accesorio {
display: block;    
}


#ho-a:checked ~ .conteiner-spacer .li-sectiones #hogar {
display: block;    
}

#aw-a:checked ~ .conteiner-spacer .li-sectiones #active {
display: block;    
}

/********************** end  modal *************/

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in h6 {
font-size: 16px;
font-weight: 600;
}

#contact-other {
width: 100%;
height: 400px;
padding: 0;
}

#contact-other .atenderemos {
width: 1300px;
height: 100%;
}

#contact-other .atenderemos #necesitas {
width: 50%;
height: 80%;
position: relative;
top: 30px;
font-family: PantonRegular;
float: left;
text-align: center;
}

#contact-other .atenderemos #necesitas h5 {
font-size: 18px;
font-weight: 500;
}

#contact-other .atenderemos #necesitas #elcorreo {
position: relative;
top: 50px;
width: 90%;
height: 70px;
display: flex;
}

 #contact-other .atenderemos #necesitas #elcorreo a {
text-decoration: none;
color: #4c4b4b;   
}

#contact-other .atenderemos #necesitas #elcorreo a:hover .soc-ted img {
transform: scale(1.09);
filter: drop-shadow(1px 1px 1px rgba(78, 78, 78, 0.5));
}

#contact-other .conta-mail {
width: 50%;
height: 90%;
background: #eaeaea;
position: relative;
float: right;
top: 30px; 
}


#contact-other .conta-mail h4 {
width: 100%;
text-align: center;
font-family: PantonRegular;
font-size: 17px;
}

#contact-other .conta-mail form {
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
top: 20px;
}

#contact-other .conta-mail form .grid {
width: 50%;
float: left;
}

#contact-other .conta-mail form .grid label {
width: 70px;
font-size: 15px;
font-family: PantonRegular;
font-weight: 100;
}

#contact-other .conta-mail form .grid input {
width: 70%;
height: 25px;
transition: all .4s;
-webkit-transition: all .4s;
border: 1px solid #ccc;
}

#contact-other .conta-mail form .grid input:focus {
outline: inherit;
border-bottom: 1px solid red;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
background: transparent;
}

#contact-other .conta-mail form .grid select:focus {
outline: inherit;

border-bottom: 1px solid red;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
background: transparent;
}

#contact-other .conta-mail form .grid select {
width: 70%;
height: 25px;
border: 1px solid #ccc;
}

#otro {
display: none;
}

#otro:checked ~ #otro-text {
display: block;
}

#otro-text {
display: none;
left: 73px;
position: relative;
transition: all .4s;
-webkit-transition: all .4s;
}

#contact-other .conta-mail form .row {
width: 50%;
float: left;
display: flex;
}

#contact-other .conta-mail form .row label {
width: 70px;
font-size: 15px;
font-family: PantonRegular;
font-weight: 100;
position: ;
top: 0;
margin: 0;
margin-left: 20px;
}

#contact-other .conta-mail form .row #message {
width: 70%;
height: 155px;
transition: all .4s;
-webkit-transition: all .4s;
border: 1px solid #ccc;
}

#contact-other .conta-mail form .row #message:focus { 
outline: inherit;
border: 1px solid red;
}


#contact-other .conta-mail form #button {
position: relative;
float: right;
top: 42px;
right: 15px;
padding: 6px 25px;
font-family: PantonRegular;
font-size: 15px;
background: #757575;
color: white;
border: 0;
transition: all .4s;
-webkit-transition: all .4s;
}

#contact-other .conta-mail form #button:hover {
background: red;
}


#loultimo {
width: 100%;
height: 700px;
overflow: hidden;
padding: 0;
}

#loultimo h2 {
width: 100%;
text-align: center;
font-family: PantonRegular;

}

#loultimo .container-ultimo {
width: 1300px;
height: 60%;
margin: 0 auto;
display: flex;
}

#loultimo .container-ultimo .noti-a {
width: 350px;
height: 350px;

}

#loultimo .container-ultimo .noti-a .noti-intro {
width: 350px;
height: 210px;
background: black;
}

#loultimo .container-ultimo .noti-a .noti-intro img {
width: 100%;
}

#loultimo .container-ultimo .noti-a p {
font-family: PantonRegular;
font-size: 12.3px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {
color: red;
position: relative;
font-style: italic;
overflow: hidden;
}

#loultimo .container-ultimo .noti-a a:after {
position: absolute;
width: 100%;
height: 1px;
background: rgba(201, 21, 21, 0.78);
content: '';
left: 0;
bottom: 0;
transform: translateX(-60px);
opacity: 0;
transition: all .4s;
-webkit-transition: all .4s;
}

#loultimo .container-ultimo .noti-a a:hover:after {
transform: translateX(0);
opacity: 1;
}

#loultimo .container-ultimo .noti-a a:hover {
color: #713030;
text-decoration: none;
transition: all .4s;
-webkit-transition: all .4s;
}

/************************* boton flotante *******************/

#messenger-flotante {
position: fixed;
    bottom: 15px;
    left: 15px;
    cursor: pointer;
z-index:10000;
}

#messenger-flotante a{
position: relative;
overflow: hidden;
}

#messenger-flotante a:after {
position: absolute;
width: 0px;
height: 30px;
background: #00ceff;
content: 'Chat with us';
color: white;
font-family: PantonRegular;
font-weight: 800;
line-height: 2.3;
text-align: center;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
left: 60px;
top: -7px;
opacity: 0;
animation: oculta 25s infinite;
transition: all .4s;
-webkit-transition: all .4s;
}

@keyframes oculta {
    0% {
    width: 0px;
    opacity: 0;
    content: '';
    }
    6% {
    width: 150px;
    opacity: 1;
    content: '';
    }
    
    12% {
    width: 150px;
    opacity: 1;
    content: 'Chat with us';
    }
    
    36% {
    width: 150px;
    opacity: 1;
    content: 'Chat with us';
    }
    
    40% {
    width: 150px;
    opacity: 1;
    content: '';
    }
    
    46% {
    width: 0px;
    opacity: 0;
    content: '';
    }
}

#messenger-flotante a img {
width: 70px;
position: relative;
z-index: 20;
filter: drop-shadow(1px 2px 4px rgba(25,25,25,0.7))
}



footer .social .nav {
width: 60%;
float: left;
text-align: center;
padding: 10px 0px;
}

footer .social .nav a {
color: black;
font-size: 18px;
margin: 0 10px;
font-weight: 100;
padding: 0px 10px;
}

footer .social .social-ni {
position: relative;
float: right;
margin: 10px 0px;
width: 13%;
text-align: center;
}

footer .social .social-ni a{
margin: 0px 5px;
}

/******************* send formulario **************/
#prometeo {
width: 100%;
height: 100%;
overflow: hidden;
background-image: url(../assets/home/background.jpg);
}

.p-message {
width: 100%;
height: 30px;
text-align: center;
position: relative;
top: 240px;
}

.p-message p {
font-size: 25px;
font-family: 'PantonRegular', sans-serif;
color: #373737;
}

.p-message a {
text-decoration: none;
color: black;
font-family: 'PantonRegular', sans-serif;
font-size: 20px;
border-bottom: 1px solid #ccc;
padding: 7px 10px;
transition: all .6s;
-webkit-transition: all .5s;
}

.p-message a:hover {
border: 1px solid red;
}


/******************* end send formulario **************/


/******************** media queries ****************/

@media screen and (max-width: 1500px) {
footer .social .nav {
width: 100%;
float: left;
text-align: center;
padding: 10px 0px;
top: 47px;
position: relative;
}

footer .social .nav a {
color: black;
font-size: 18px;
margin: 0 10px;
font-weight: 100;
padding: 0px 10px;
}

footer .social .social-ni {
position: relative;
float: right;
margin: 10px 0px;
width: 13%;
text-align: center;
}

footer .social .social-ni a{
margin: 0px 5px;
}
}

@media screen and (max-width: 1400px) {
footer .social .logo-foot {
position: relative;
float: left;
margin-right: 0px;
width: 100%;
text-align: center;
}

footer .social .logo-foot img {
width: 250px;
}  
 
}


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

footer .social .logo-foot {
position: relative;
float: left;
margin-right: 0px;
width: 100%;
text-align: center;
}

footer .social .logo-foot img {
width: 200px;
}  
    
footer .social .nav {
width: 100%;
float: left;
text-align: center;
padding: 10px 0px;
top: 47px;
position: relative;
}

footer .social .nav a {
color: black;
font-size: 18px;
margin: 0 10px;
font-weight: 100;
padding: 0px 10px;
}

footer .social .social-ni {
position: relative;
float: right;
margin: 10px 0px;
width: 100%;
top: 70px;
text-align: center;
}

footer .social .social-ni a{
margin: 0px 5px;
}

    
#portada-y p {
width: 90%;
}
#sec-rojo .conteiner-spacer {
width: 90%;
}
    
#contact-other .atenderemos {
width: 100%;
}
    
#loultimo .container-ultimo {
width: 100%;
}
        
}

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

#contact-other .conta-mail form .grid label {
width: 70px;
font-size: 13px;
font-family: PantonRegular;
font-weight: 100;
}

#contact-other .conta-mail form .grid input {
width: 50%;
height: 25px;
transition: all .4s;
-webkit-transition: all .4s;
border: 1px solid #ccc;
}

#contact-other .conta-mail form .grid select {
width: 50%;
height: 25px;
border: 1px solid #ccc;
}
    
#contact-other .conta-mail form .row label {
width: 70px;
font-size: 13px;
font-family: PantonRegular;
font-weight: 100;
position: ;
top: 0;
margin: 0;
margin-left: 20px;
}

#contact-other .conta-mail form .row #message {
width: 70%;
height: 155px;
transition: all .4s;
-webkit-transition: all .4s;
border: 1px solid #ccc;
}
    
#loultimo .container-ultimo .noti-a {
width: 300px;
height: 350px;

}

#loultimo .container-ultimo .noti-a .noti-intro {
width: 300px;
height: 180px;
background: black;
}

#loultimo .container-ultimo .noti-a .noti-intro img {
width: 100%;
}

#loultimo .container-ultimo .noti-a p {
font-family: PantonRegular;
font-size: 12.3px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {
color: red;
position: relative;
font-style: italic;
overflow: hidden;
}

#loultimo .container-ultimo .noti-a p {
font-family: PantonRegular;
font-size: 12.3px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {
color: red;
position: relative;
font-style: italic;
overflow: hidden;
}
    
}

@media screen and (max-width: 1080px){
    
#loultimo .container-ultimo .noti-a {
width: 250px;
height: 300px;

}

#loultimo .container-ultimo .noti-a .noti-intro {
width: 250px;
height: 180px;
background: black;
}

#loultimo .container-ultimo .noti-a .noti-intro img {
width: 100%;
}
    
    #loultimo .container-ultimo .noti-a h2 {
    font-size: 24px;
    }

#loultimo .container-ultimo .noti-a p {
font-size: 11px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {
color: red;
font-size: 13px;
position: relative;
font-style: italic;
overflow: hidden;
}


#contact-other .atenderemos #necesitas #elcorreo {
position: relative;
top: 50px;
width: 100%;
height: 70px;
display: flex;
}


#contact-other .atenderemos #necesitas #elcorreo .soc-ted img {
width: 60px;    
}
    
#contact-other .atenderemos #necesitas #elcorreo .soc-ted p {
font-size: 12px;

}
    
}


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

#portada-y {
padding: 0;
width: 100%;
height: 500px;
overflow: hidden;
}

#slider-index {
width: 100%;
height: 550px;
border: 0;
position: relative;
top: 90px;
padding: 0;
}
    
#portada-y p {
position: relative;
top: -140px;
margin: 0 auto;
font-size: 15px;
text-align: center;
font-family: 'PantonRegular';
font-weight: 100;
}
    
.cristal #cristal-con {
 width: 90%;
 height: 400px;
 margin: 0 auto;
 top: 20%;

}
 
#loultimo .container-ultimo .noti-a {
width: 200px;
height: 270px;

}

#loultimo .container-ultimo .noti-a .noti-intro {
width: 200px;
height: 120px;
background: black;
}

    
#loultimo .container-ultimo .noti-a h2 {
font-size: 20px;
}

#loultimo .container-ultimo .noti-a p {
font-size: 10px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {

font-size: 12px;
overflow: hidden;
}
    
#contact-other .atenderemos #necesitas h5 {
font-size: 17px;
font-weight: 500;
}

#contact-other .atenderemos #necesitas #nete {
font-size: 12px;   
}
    
footer .social .nav {
width: 100%;
float: left;
text-align: center;
padding: 10px 0px;
top: 47px;
position: relative;
}

footer .social .nav a {
color: black;
font-size: 15px;
margin: 0 10px;
font-weight: 100;
padding: 0px 10px;
}

footer .social .social-ni {
position: relative;
float: right;
margin: 10px 0px;
width: 100%;
top: 70px;
text-align: center;
}

footer .social .social-ni a{
margin: 0px 5px;
}

}

@media screen and (max-width: 420px ) {
    
#portada-y p {
position: relative;
top: -150px;
margin: 0 auto;
font-size: 12px;
text-align: center;
font-weight: 100;
}
    
#portada-y p img {
width: 20px;
}

#sec-rojo {
width: 100%;
height: 400px;
padding: 0;
background-image: url(../assets/img/background-rojo.png);
background-size: cover;
}

#sec-rojo .conteiner-spacer {
width: 100%;
height: 100%;
}

#sec-rojo .conteiner-spacer .li-title {
width: 90%;
height: 15%;
}

#sec-rojo .conteiner-spacer .li-title  h2 {
font-family: 'PantonRegular';
font-size: 20px;
color: white;
text-align: center;
width: 100%;
top: 30px;
position: relative;
}


#sec-rojo .conteiner-spacer .li-sectiones .termo {
width: 100%;
height: 50%;
display: flex;
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in {
text-align: center;
font-family: 'PantonRegular';
color: white;

}
    
 #sec-rojo .conteiner-spacer .li-sectiones label {
cursor: pointer;
margin-top: 55px;
}
#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in h6 {
position: absolute;
top: 55px;
left: 0px;
width: 100%;
font-size: 12px
}

#sec-rojo .conteiner-spacer .li-sectiones .termo .termo-in img {
width: 50px;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
    
.cristal #cristal-con {
 width: 100%;
 height: 300px;
 margin: 0 auto;
 top: 20%;
}
    
.cristal #cristal-con #closes {
position: absolute;
width: 35px;
height: 35px;
right: 20px;
top: -40px;
z-index: 8;
color: white;
font-family: 'PantonRegular';
font-weight: 600;
text-align: center;
line-height: 1.4;
padding-right: 0.4px;
}
    
.cristal #cristal-con .cont-selec h2 {
width: 90%;
margin: 0 auto;
font-size: 16px;
margin-top: 20px;
}

.cristal #cristal-con .cont-selec p {
width: 90%;
margin: 0 auto;
font-size: 13px;
text-align: justify;
position: relative;
margin-top: 25px;
}
    
    
/************************* el correo  ***********************/
    
#contact-other {
width: 100%;
height: 800px;
padding: 0;
}

#contact-other .atenderemos {
width: 100%;
height: 100%;
}

#contact-other .atenderemos #necesitas {
width: 95%;
height: 50%;
position: relative;
top: 30px;
float: none;
text-align: center;
}

#contact-other .atenderemos #necesitas h5 {
font-size: 18px;
font-weight: 500;
}

#contact-other .atenderemos #necesitas #elcorreo {
position: relative;
top: 50px;
width: 95%;
height: 70px;
display: flex;
}
    
#contact-other .atenderemos #necesitas #elcorreo .soc-ted p {
font-size: 11px;
}

#contact-other .conta-mail {
width: 100%;
height: 50%;
background: #eaeaea;
position: relative;
float: right;
top: 30px; 
}   

#loultimo {
width: 100%;
height: 970px;
margin-top: 70px;
overflow: hidden;
padding: 0;
}
    
#loultimo .container-ultimo {
height: 60%;
margin: 0 auto;
display: grid;
}
    
#loultimo #tedes {
top: 0px;
position: relative;
}
    
#loultimo .container-ultimo .noti-a {
width: 80%;
height: 270px;

}

#loultimo .container-ultimo .noti-a .noti-intro {
width: 200px;
height: 120px;
background: black;
}

    
#loultimo .container-ultimo .noti-a h2 {
font-size: 20px;
}

#loultimo .container-ultimo .noti-a p {
font-size: 10px;
text-align: justify;
}

#loultimo .container-ultimo .noti-a a {

font-size: 12px;
overflow: hidden;
}
    
#contact-other .atenderemos #necesitas h5 {
font-size: 17px;
font-weight: 500;
}

#contact-other .atenderemos #necesitas #nete {
font-size: 12px;   
}
    
    #messenger-flotante a img {
    width: 55px;
    }
    
#messenger-flotante a:after {
position: absolute;
width: 0px;
height: 30px;
content: 'Chatea con nosotros';
font-weight: 800;
line-height: 2.4;
text-align: center;
font-size: 13px;
left: 40px;
top: -7px;
opacity: 0;
animation: oculta 25s infinite;

}


}

@media screen and (max-width: 340px) {
    
#contact-other .conta-mail form .grid label {
width: 60px;
font-size: 11px;
font-family: PantonRegular;
font-weight: 100;
}

#contact-other .conta-mail form .grid input {
width: 40%;
height: 25px;
transition: all .4s;
-webkit-transition: all .4s;
border: 1px solid #ccc;
}

#contact-other .conta-mail form .grid select {
width: 40%;
height: 25px;
border: 1px solid #ccc;
}
    
    #contact-other .conta-mail form .row {
    display: grid;
    width: 50%;
    float: right;
    }
    
#contact-other .conta-mail form .row label {
width: 70px;
font-size: 11px;
font-family: PantonRegular;
font-weight: 100;
position: ;
top: 0;
margin: 0;
margin-left: 20px;
}

    #contact-other .conta-mail form .row textarea {
    width: 80%;
    }

}