nav{
    width: 100%;
    position: fixed;
    top: 0px;
    background-color: #fff;
    box-shadow: 2px 0px 7px #000;
	z-index: 50;

}


.text-navbar{
    color: #fff;
    font-size: 19px;
    float: left;
    margin-left: 2%;
    margin-top: 15px;
}

.text-navbar img {
width: 100%;
}

.contenedor-tr {
  display: table-row;
  width: 100%;
  text-align: right;
  position: relative;
}


.contenedor-tr .mres a {
   text-decoration: none;
   color: #787878;
   padding: 18px 10px;
   margin-right: 5px;
   transition: all .6s;
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -ms-transition: all .6s; 
   -o-transition: all .6s;
}

 .mres #pars {
background: #a81717;
}

.mres .tostito {
background: #f30001;
color: white;
}

.mres #rabit {
position: relative;
overflow: hidden;
}

.mres #rabit #cosar {
z-index: 10;

position: absolute;
top: 5px;
width: 65%;
text-align: center;
color: white;
font-size: 12px;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;

}

 .mres #rabit:hover #cosar {
transform: translateY(14px);
-webkit-transform: translateY(14px);
-moz-transform: translateY(14px);
-ms-transform: translateY(14px);
}

.mres #rabit:hover .cartx img {
transform: translateX(50px);
-webkit-transform: translateX(50px);
-moz-transform: translateX(50px);
-ms-transform: translateX(50px); 
-o-transform: translateX(50px);
}

.mres a .cartx {
background: #a81717 !important;
padding:15px 10px;

}

 .mres a .cartx img {
filter: invert(1%);
width: 20px;
position: relative;
top: 5px;
transform: translateX(0px);
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
}

 .mres a:hover{
    color: #bc0033;
    transition: background-color .4s ease-in;
    -moz-transition: background-color .4s ease-in;
    -webkit-transition: background-color .4s ease-in;
    -ms-transition: background-color .4s ease-in;
    -o-transition: background-color .4s ease-in;
}
 .mres a:last-child{
	border-right: 0px solid rgba(149, 165, 166,0.8);
}




.mres {
top: -30px;
width: 100%;
position: relative;
float: right;
display: flex;
text-align: center;
}

.mres li {
list-style: none;
-webkit-list-style: none; 
float: right;
position: relative
}

.mres li a {
color: #666666;
font-size: 16px;
}

.dropdown {
position: relative;
padding: 30px 0;
}

.dropdown a {
color: #666666; 
}

.dropdown a:hover {
color: #bc0033;
text-decoration: none; 
}


.dropdown:hover  #subcategory {
display: block
}


#subcategory {
z-index: 20;
text-align: center;
width: 600px;
height: auto;
display: none;
position: absolute;
top: 80px;
left: -245px;
padding: 0px 0px;
line-height: ;
background: rgba(255,255,255,0.8);
}

#subcategory #triangle {
     width: 0;
     height: 0;
     border-right: 10px solid transparent;
     border-top: 10px solid transparent;
     border-left: 10px solid transparent;
     border-bottom: 10px solid rgba(255,255,255,0.8);
     position: relative;
     top: -20px;
}

#subcategory a {
color: #666666;
margin: 0px 0px;
margin-bottom: 5px;
top: -15px;
line-height: 3;
padding-bottom: 8px;
position: relative;
transition: all .6s;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-ms-transition: all .6s;

}

#subcategory a:hover {
color: #bc0033;
text-decoration: none;
}
/********************* button open close **************/

#past {
position: absolute;
width: 80px;
height: 40px;
right: 10px;
bottom: -20px;
z-index: 50;
margin-left: 65px;
cursor: pointer;
display: none;
}

#past:hover .sico,
#past:hover .sico:after,
#past:hover .sico:before {
background: rgba(182, 20, 20, 0.8);
}

#close-up:checked ~ .contenedor-tr #past {
bottom: -10px;
}

#close-up:checked ~ .contenedor-tr #past .sico {
height: 0;
}

#close-up:checked ~ .contenedor-tr #past .sico:after {
top: 0px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

#close-up:checked ~ .contenedor-tr #past .sico:before {
top: 0px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}


#past .sico {
position: relative;
width: 30px;
height: 3px;
background: rgba(25,25,25,0.7);
top: 20px;
transition: all .6s;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
}

#past .sico:after {
position: absolute;
content: '';
left: 0px;
top: -10px;
transform: rotate(0);
width: 100%;
height: 3px;
background: rgba(25,25,25,0.7);
transition: all .6s;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
}

#past .sico:before {
position: absolute;
content: '';
right: 0px;
top: 10px;
transform: rotate(0);
width: 100%;
height: 3px;
background: rgba(25,25,25,0.7);
transition: all .6s;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
}

#close-up {
display: none;
}

#close-up:checked ~ .contenedor-tr .mres {
height: 500px;
}

#idioms {
position: ;
display: grid;
height: 0px;
}

#idioms a {
padding: 2px;
text-align: center;
width: 25px;

}

#idioms p {
color: #656565;
}

#idioms a:hover {
color: white;
background: red;

}

/********************** newsletter ******************/

.newsletter {
width: 100%;
height: 325px;
position: fixed;
background: white;
background-image: url(../assets/home/background.jpg);
background-size: 100%;
z-index: 100;
top: 0;
border-bottom: 2px solid rgba(88, 88, 88, 0.8);
transform: translateY(-234px);
transition: all .5s ease-in-out;
animation: topdown 8s;
}

/******************* animation *********************/
@keyframes topdown {
    0% {
    transform: translateY(-390px);
    }
    
     80% {
    transform: translateY(-390px);
    }
}

/******************* animation *********************/


.newsletter #clorets { 
position: absolute;
right: 20px;
top: 5px;
font-size: 20px;
z-index: 10;
font-size: 15px;
cursor: pointer;
transition: all .5s;
-webkit-transition: all .5s;
}

.newsletter #clorets:hover {
color: red;
}


.newsletter .new-cont-all {
width: 1500px;
height: 72%;
background: rgba(255,25,25,0.5); 
margin: 0 auto;
position: relative;
}

#logo-more-info {
width: 40%;
height: 100%;
float: left;
background: #fff;
text-align: center;
}

#logo-more-info img {
margin-top: 20px;
width: 63%;
}

#logo-more-info p {
width: 80%;
margin: 0 auto;
position:  relative;
top: 30px;
font-size: 16px;
text-align: center;
}

#contenedor-formulario {
width: 60%;
height: 100%;
overflow: hidden;
float: right;
background: white;
}



#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */


#butters {
position: relative;
float: right;
background: #909090;
right: 12px;
transition: all .5s;
-webkit-transition: all .5s;
padding: 7px 10px;
color: white;
}

#butters:hover {
border: 1px solid red;
color: red;
background: white;
}

.newsletter .tostitacos {
width: 1500px;
height: 28%;
margin: 0 auto;
position: relative;
background: rgba(255,255,255,0.9);
}

.newsletter .tostitacos .clarita {
width: 50%;
display: flex;
position: relative;
top: 30px;
} 



.newsletter .tostitacos #clositoses {
position: relative;
float: right;
right: 40px;
top: 10px;
cursor: pointer;
transition: all .5s;
-webkit-transition: all .5s;
}

.newsletter .tostitacos #clositoses:hover {
color: red;
}

.newsletter .tostitacos .clarita p {
text-align: center;
font-size: 15px;
height: 0px;
top: 5px;
position: relative;
}

.newsletter .tostitacos .clarita #tapia {
position: relative;
cursor: pointer;
border: 1.4px solid #ccc;
padding: 5px 10px;
color: #636262;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}

.newsletter .tostitacos .clarita #tapia:hover {
border: 1.4px solid red;
color: #922e2e;
}

.newsletter .tostitacos .claritas {
width: 50%;
display: none;
position: relative;
top: 30px;
text-align: center;
} 

.newsletter .tostitacos .claritas p {
text-align: center;
font-size: 15px;
height: 0px;
top: 5px;
position: relative;
width: 100%;

}


/*************** function input newsletter **************/

#tester,
#close-door {
display: none;
}

#tester:checked ~ .newsletter {
transform: translateY(0)
}

#tester:checked ~ .newsletter .tostitacos .clarita {
display: none;
}

#tester:checked ~ .newsletter .tostitacos #clositoses {
display: none;
}

#tester:checked ~ .newsletter .tostitacos .claritas {
display: block;
} 

#close-door:checked ~ .newsletter {
display: none;
}


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

@media screen and (max-width: 1500px) {
.newsletter .new-cont-all {
width: 100%;
}

.newsletter .tostitacos {
width: 100%;
}

}

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

#logo-more-info {
width: 50%;
height: 100%;
float: left;
background: #fff;
text-align: center;
}
    
#contenedor-formulario {
width: 50%;
height: 100%;
overflow: hidden;
float: right;
background: white;
}
    
.newsletter .tostitacos .clarita {
width: 70%;
display: flex;
position: relative;
top: 30px;
}     
    

.text-navbar{
    width: 100%;
    color: #fff;
    font-size: 19px;
    float: left;
    margin-left: 2%;
    margin-top: 15px;
}

.contenedor-tr {
  display: flex;
  width: 100%;
 
}

.contenedor-tr .mres a {
   text-decoration: none;
   padding: 8px 0px;
   margin-right: 0px;
  
}
    
.mres #rabit {
position: relative;
overflow: hidden;
padding: 15px 10px;
}

}

@media screen and (max-width: 720px) {
    
#logo-more-info {
width: 60%;
height: 100%;
float: left;
}
    
#logo-more-info p {
width: 80%;
margin: 0 auto;
top: 20px;
font-size: 12px;

}
    
#contenedor-formulario {
width: 40%;
height: 100%;
overflow: hidden;
float: right;
background: white;
}
    
    
.newsletter .tostitacos .clarita {
width: 90%;
display: flex;
position: relative;
top: 30px;
} 
    
.contenedor-tr {
  display: flex;
  width: 100%;
 background: #fff;

}

.mres {
top: -0px;
width: 80%;
height: 0px;
position: relative;
float: left;
overflow: hidden;
display: grid;
display: grid;
text-align: center;
transition: all .6s;
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
}
    
nav{
    width: 100%;
    height: 90px;
    position: fixed;
}

.mres li {
list-style: none;
position: relative;
margin: 0 auto;
float: none;
padding: 10px;

}
    
    .mres #thetocale #tocale {
     top: -30px !important;
     position: relative;
    }
    
.mres li a {
color: #666666;
font-size: 18px;

}

#past {
display: block;
}

.mres .tostito {
background: #f30001;
color: white !important;
padding: 10px 15px !important;
}
    
#subcategory {
z-index: 50;
text-align: center;
width: 100%;
height: auto;
display: ;
position: absolute;
top: 50px;
left: 0px;
padding: 0px 0px;
background: rgb(239, 239, 239);
}

#subcategory #triangle {
     width: 0;
     height: 0;
     border-right: 10px solid transparent;
     border-top: 10px solid transparent;
     border-left: 10px solid transparent;
     border-bottom: 10px solid rgb(220, 220, 220);
     position: relative;
     top: -20px;
}

#subcategory a {
color: #666666;
margin: 0px 0px;
top: -10px;
padding: 0;
font-size: 11px;
position: relative;
display: grid;
}    


}

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

nav{
    width: 100%;
    height:90px;
    position: fixed;
}
    
.text-navbar{
    width: 200px;
    color: #fff;
    font-size: 19px;
    float: left;
    margin-left: 2%;
    margin-top: 15px;
}
    
.newsletter {
width: 100%;
height: 450px;
position: fixed;
background: white;
background-size: 100%;
z-index: 100;
top: 0;
transform: translateY(-360px);
} 
    
/******************* animation *********************/
@keyframes topdown {
    0% {
    transform: translateY(-590px);
    }
    
     80% {
    transform: translateY(-590px);
    }
}

/******************* animation *********************/
    
.newsletter .new-cont-all {
height: 80%;
margin: 0 auto;
position: relative;
display: grid;
}
    
#logo-more-info {
width: 90%;
height: 100%;
float: left;
background: #fff;
text-align: center;
}

#contenedor-formulario {
width: 90%;
height: 100%;
overflow: hidden;
float: right;
background: white;
}
    
.newsletter .tostitacos {

height: 20%;
margin: 0 auto;
position: relative;
background: rgba(255,255,255,0.9);
}
    
.newsletter .tostitacos .clarita p {
font-size: 12px;
height: 0px;
top: 5px;

}

.newsletter .tostitacos .clarita #tapia {
position: relative;
cursor: pointer;
border: 1.4px solid #ccc;
font-size: 11px;
font-weight: 100;
text-align: center;
}

}