@charset "UTF-8";
/* CSS Document */

@import url("https://use.typekit.net/tse0jrn.css");

@font-face {
  font-family:'Grenette Pro Light';
  src: url('fonts/GrenetteProLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Rubik-Light.ttf';
  src: url('fonts/Rubik-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{ background:rgba(2,55,221,1.00); margin:0;}

h1{font-family:"stratos"; color:rgba(2,55,221,1.00); font-size:6.0em; font-weight: 800; text-align:left; margin: auto; }
h2{font-family: "stratos", sans-serif; font-weight: 800; font-style: normal; color:rgba(2,55,221,1.00); font-size:1.7em;  }
h3{font-family: "Grenette Pro Light", serif; color:rgba(2,55,221,1.00); font-size:1.8em; font-weight:400; }
p{font-family: "Grenette Pro Light"; color: rgba(2,55,221,1.00); font-size:1.0em; font-weight: 400; line-height: 125%; }
p.wh {font-family: "Grenette Pro Light"; color: rgba(255,255,255,1.00); font-size:1.45em; font-weight: 400; line-height: 125%; }
p.subtitle{font-family:"stratos"; color:rgba(255,129,58,1.00); font-size:2.45em; margin:0px; font-weight:bolder; line-height: 100%; }
p.article{font-family: "Grenette Pro Light"; color: rgba(2,55,221,1.00); font-size:1.5em; font-weight: 400; line-height: 125%; }
p.description{font-family:"Rubik-Light.ttf"; color: rgba(2,55,221,1.00); font-size:1.0em; font-weight: 400; line-height: 125%; }
p.sudestada{font-family: "sudestada", sans-serif; font-weight: 400; font-style: normal;}
p.tenlist_number{font-family:'sudestada', sans-serif; font-size:8.8em; margin:0px; transform: rotate(-9.87deg);}
p.tenlist_title{font-family:'stratos'; font-size:3.3em; color:rgba(2,55,221,1.00); font-weight:bolder; max-width:65%; line-height:120%}
p.tenlist_description{font-size:1.9em;}

/* TOP LIST */
h1.toplist{font-family:'stratos'; font-size:4.8em; letter-spacing:0px;}
h1.toplistcategory{font-family:'sudestada', sans-serif; font-size:6.0em; font-weight:normal;}
span.toplist{font-size:2.0em; letter-spacing:-5px; margin:5px 0px -5px;}
img.toplist{height:275px;}
#toplisttitle{float:left; padding-top:70px;}
#titlebox{width:76.88%; margin:35px 11.56% 5px;}

legend{font-family:"stratos"; color:rgba(255,129,58,1.00); font-size:2.4em; font-weight:bolder; margin-top:50px;  }

ul li{font-family: "Grenette Pro Light"; color: rgba(126,126,126,1.00); font-size:1em; line-height: 165%; }
ol li{font-family: "Grenette Pro Light"; color: rgba(126,126,126,1.00); font-size:1em; line-height: 165%; }

a:link, a:active, a:visited{font-family: "Grenette Pro Light"; color:rgba(0,0,0,1.00); text-decoration: none; }
a:hover{color: rgba(226,101,20,1.00); }

input, textarea, select{background:rgba(2,55,221,1.00); color:rgb(255,255,255); font-family: "Grenette Pro Light"; font-size:1.3em; padding:10px; margin:7px 0px; border:rgba(255,124,51,1.00) solid 2px; width:100%; max-width:560px; }
button{background:rgba(233,125,157,1.00); color:rgb(0,0,0); padding:10px 5px; border:none; margin:5px 10px; font-family:'Grenette Pro Light'; font-size:1.5em; }
input.boton{padding:10px 5px; font-size:1.5em;}
input.boton:hover{background:rgba(255,113,45,1.00); color:rgb(255,255,255); padding:10px 5px;}

/* TABLAS */
table{overflow-x:auto; width:100%;}
table thead th{font-family: "Grenette Pro Light"; font-size:1.2em; font-weight:300; color:rgba(255,255,255,1.00); background:rgba(233,125,157,1.00); border:none; padding:10px 20px; text-align:center; }
table tr td{font-family: "Grenette Pro Light"; font-size:1.0em; font-weight:300; color:rgba(255,255,255,1.00); border:none; vertical-align:top; padding:10px; text-align:left; }
table tfoot td{font-family: "Grenette Pro Light"; background:rgba(25,75,200,1.00); border:none; color:rgba(255,255,255,1.00); font-weight:300; font-size:1em; padding:5px; }
tr:nth-child(even) {background:rgba(255,255,255,0.0);}
tr:nth-child(odd) {background:rgba(255,255,255,0.20);}

/* MENU RESPONSIVO */
ul.topnav li {font-family:'Grenette Pro Light'; font-weight:300;  }
ul.topnav li.icon {display: none;}
ul.topnav li a {display:inline-block; padding:10px; text-decoration:none; background:rgba(235,135,166,1.00);}
ul.topnav li a:hover {padding:10px;}

/* MENU DESPLEGABLE */
ul.menu{height:38px; width:95%; padding:17px 2.5% 9px; list-style: none; margin:0px; text-align: left;}
ul li.menu{display:inline-block; margin:0px 1.6%; position:relative; font-family:'Grenette Pro Light'; font-weight:regular; font-size:1.5em; text-align:left; }
ul li.menu a{display:block; text-decoration:none; margin:0px; padding:0px; transition: all 0.5s ease-in 0s; color:rgba(0,0,0,1.00); border:rgba(1,1,1,0.0) solid 1px; }
ul li.menu a:hover{color:rgba(2,55,221,1.00); }

ul li.menu ul.dropdown{min-width:185px; /*Set width of the dropdown*/ margin:0px; padding:0px; display:none; position: absolute; z-index: 999; left: 0; text-align:left; color:rgba(1,1,1,1.00); background:rgba(255,255,255,1.00); box-shadow:rgba(0,0,0,0.45) 1px 1px 3px;}
ul li.menu:hover ul.dropdown{display: block; /* Display the dropdown */ border:rgba(100,100,100,0.35);}
ul li.menu ul.dropdown li{display: block; color:rgba(1,1,1,1.00); border:rgba(255,255,255,1.00) solid 1px; font-size: 1.0em; padding:0px; margin:5px; }
ul li.menu ul.dropdown li a {padding:5px; text-align:left; background:rgba(255,255,255,1.00);} 
ul li.menu ul.dropdown li a:hover{display: block; color:rgba(1,1,1,0.80); background:rgba(230,230,230,1.00); border:rgba(1,1,1,0.10) solid 1px;}

/* HEADER CHANGING */
header{width:100%; position:fixed; z-index:10; margin:0px;}

header.large{background:rgba(233,125,157,1.00); transition:1.2s; }
header.large ul.topnav{list-style-type:none; padding:5px; margin-top:0px; overflow:hidden; z-index:1000; float:left; transition:1.2s;}
header.large ul.topnav li a {color:rgba(255,255,255,1.00); border:rgba(1,1,1,0.0) solid 1px; transition:1.2s;}
header.large ul.topnav li a:hover {color:rgba(1,1,1,1.00); background:rgba(255,255,255,1.00); border:rgba(1,1,1,1.00) solid 1px; transition:1.2s;}

header.small{background:rgba(233,125,157,1.00); transition:1.2s; box-shadow:rgba(0,0,0,0.5) 2px 2px 5px; }
header.small ul.topnav{list-style-type:none; padding:5px; margin-top:5px; overflow:hidden; z-index:1000; float:left; transition:1.2s;}
header.small ul.topnav li a {color:rgba(1,1,1,0.85); border:rgba(1,1,1,0.0) solid 1px; transition:1.2s;}
header.small ul.topnav li a:hover {color:rgba(1,1,1,1.00); background:rgba(255,255,255,1.00); border:rgba(1,1,1,1.00) solid 1px; transition:1.2s;}

/* CLASS */
.top-list{width:24.85%; float:left; margin:0px; display:block; padding-top:35px; border:rgb(2,55,221) solid 1px; border-top:rgb(2,55,221) solid 2px; border-bottom:none; position: relative; display: inline-block; }
.top-list img {display: block; transition: opacity 0.3s ease; }
.top-list img.hover { position: absolute; top: 35px; left: 0; opacity: 0;  }
.top-list:hover img.hover { opacity: 1; }
.top-list:hover img.normal { opacity: 0; }
.tenlist_img{float:left; width:40%; margin-right:8%;}

/* ID */
#contenido{margin-top:0px; padding-top:85px; }
#banner{background:url(http://najeramontiel.com.mx/images/teaser.jpg) 50% 50%; background-size:cover; padding:110px 28px 1px; text-align: left;}
#texto{width:100%; max-width:1080px; text-align: justify; padding: 0px; }
#footer{width:90%; padding:30px 5%; margin-top:0px; background:rgba(2,55,221,1.00); text-align:center;}

#portadaescritorio{display:block;}
#portadamovil{display:none;}

/* IMAGEN POP UP*/
    /* Fondo semitransparente */
    .popup-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    /* Contenedor centrado del popup */
    .popup-box {
      position: relative;
      width: 400px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      overflow: hidden;
    }

    .popup-box img {
      display: block;
      width: 100%;
      height: auto;
      cursor: pointer;
    }

    /* Botón de cerrar (X) */
    .popup-close {
      position: absolute;
      top: -10px;
      right: -10px;
      background: rgb(255,119,51);
      color: white;
      border: none;
      border-radius: 50%;
      width: 26px;
      height: 26px;
      font-size: 25px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      z-index: 10000;
    }
/* FIN IMAGEN POP UP*/

/* Imagen de home con link */
.contenedor-imagenes {position:relative; display:inline-block; width:76%; margin:50px 12% }
.fondo {display: block; }
.superior {position: absolute; top:0; left:0; cursor:pointer; }

#responsive{ display:none; }
#scrolldown{ display:block; width:100%; }

@media screen and (max-width:1920px) {
    h2.article{color:rgba(2,55,221,1.00); font-family: "stratos"; font-weight: 800; font-size:4.3em; font-style: normal; text-transform:uppercase; margin:10px 0px 5px 0px; line-height:100%; }
    h2.article_inside{color:rgba(2,55,221,1.00); font-family: "stratos"; font-weight: 800; font-size:4.0em; font-style: normal; text-transform:none; margin:0px; line-height:100%; }
    .attributes{float:left; margin:0.5%; width:22.4%; padding:0px 0.5%; min-height:89px;}
    img.axolotl{height:76px; margin:8px 0px 0px;}
    img.price{height:51px; padding:20px 0px 12px;}
    img.pq{height:79px; padding:5px 0px 0px;}
    .desc_txt{margin:5px; text-align:justify; padding:25px; min-height:196px; width:-moz-available;}
    .desc_txt_large{margin:5px; text-align:justify; padding:25px; min-height:297px; width:-moz-available;}
}

@media screen and (max-width:1880px) {
    img.price{height:38px; padding:20px 0px 12px;}
}

@media screen and (max-width:1600px) {
    h2.article{font-size:3.6em; }
    .attributes{float:left; margin:0.48%; width:22.4%; padding:0px 0.5%; min-height:85px;}
    img.axolotl{height:70px; margin:6px 0px 0px;}
    .desc_txt{margin:5px; text-align:justify; padding:7px 25px; min-height:189px; width:-moz-available;}
    img.pq{height:74px; padding:5px 0px 0px;}
    .desc_txt{margin:5px; text-align:justify; padding:25px; min-height:196px; width:-moz-available;}
    .desc_txt_large{margin:5px; text-align:justify; padding:25px; min-height:248px; width:-moz-available;}
}

@media screen and (max-width:1440px) {
    h1{font-size:5.5em; line-height:110%; }
    h2.article{font-size:3.2em;}
    .attributes{float:left; margin:0.5%; width:22.2%; padding:0px 0.5%; min-height:79px;;}
    h2.article_inside{color:rgba(2,55,221,1.00); font-family: "stratos"; font-weight: 800; font-size:4.0em; font-style: normal; text-transform:none; margin:0px; line-height:100%; }
    p.description{font-size:0.95em; font-weight: 400; line-height: 110%; }
    img.price{height:32px; padding:26px 0px 16px;}
    img.pq{height:69px; padding:5px 0px 0px;}
    .desc_txt{margin:5px; text-align:justify; padding:5px 25px; min-height: 171px; width:-moz-available;}
    .desc_txt_large{margin:5px; text-align:justify; padding:25px; min-height:223px; width:-moz-available;}
    
    /* TOP LIST */
    h1.toplist{font-family:'stratos'; font-size:4.5em; letter-spacing:0px;}
    h1.toplistcategory{font-family:'sudestada', sans-serif; font-size:5.8em; font-weight:normal;}
    span.toplist{font-size:2.0em; letter-spacing:-5px; margin:5px 0px -5px;}
    img.toplist{height:230px; margin-top:-60px;}
    #toplisttitle{float:left; padding-top:30px;}
    #titlebox{width:76.88%; margin:100px 11.56% 5px;}
}


@media screen and (max-width:1280px) {
    h2.article{font-size:3.2em;}
	.attributes{float:left; margin:0.5%; width:21.8%; padding:0px 0.5%; min-height:79px;;}
    img.price{height:22px; padding:26px 0px 16px;}
    img.pq{height:69px; padding:5px 0px 0px;}
    .desc_txt{margin:5px; text-align:justify; padding:10px 25px; min-height: 164px; width:-moz-available;}
    .desc_txt_large{margin:5px; text-align:justify; padding:25px; min-height:196px; width:-moz-available;}
    
    /* TOP LIST */
    h1.toplist{font-family:'stratos'; font-size:3.6em; letter-spacing:0px;}
    h1.toplistcategory{font-family:'sudestada', sans-serif; font-size:3.8em; font-weight:normal;}
    span.toplist{font-size:2.0em; letter-spacing:-5px; margin:5px 0px -5px;}
    img.toplist{height:150px; margin-top:-40px;}
    #toplisttitle{float:left; padding-top:30px;}
    #titlebox{width:76.88%; margin:70px 11.56% 5px;}
}

@media screen and (max-width:900px) {
    h2.article{font-size:3.2em;}
	#responsive{ display:block; }
	#scrolldown{ display:none; }
	#portadaescritorio{display:none;}
	#portadamovil{display:block;}
	#contenido{padding-top:125px;}	
	
	ul.topnav li:not(:first-child) {display: none;}
	ul.topnav li{display: none;}
	ul.topnav li.icon {float:right; display: inline-block;}
	
	header.large ul.topnav{list-style-type:none; padding:0px; margin:0px; overflow:hidden; z-index:1000; float:right; width:180px;}
	
	header.small{height:60px;}
	header.small ul.topnav{list-style-type:none; padding:0px; margin-top:0px; overflow:hidden; z-index:1000; float: right; width:177px;}
		
	ul.topnav.responsive{position:relative;  top:5;}
	ul.topnav.responsive li.icon{/*position: absolute; right:0; top:0;*/ display: block; }
	ul.topnav.responsive li{float:none; display: inline; font-size:1em;}
	ul.topnav.responsive li a{display:block; text-align:left; margin:0px; border: none; }	
	ul.topnav.responsive li a:hover{display: block; text-align: left; background:rgba(255,255,255,1.00); margin: 0px; border:none; }
	
    /* TOP LIST */
    h1.toplist{font-family:'stratos'; font-size:4.6em; letter-spacing:0px;}
    h1.toplistcategory{font-family:'sudestada', sans-serif; font-size:5.6em; font-weight:normal;}
    span.toplist{font-size:2.0em; letter-spacing:-5px; margin:5px 0px -5px;}
    img.toplist{height:230px; margin-top:-30px;}
    #toplisttitle{float:left; padding-top:0px;}
    #titlebox{width:76.88%; margin:35px 11.56% 5px;}
}

@media screen and (max-width:720px) {
	h1{font-size:2.2em;}
	p.subtitle{font-size:1.8em; }
    p.tenlist_number{font-size:6.5em; }
    p.tenlist_title{font-size:1.6em;}
    p.tenlist_description{font-size:1.3em;}
	
	#contenido{padding-top:70px;}
	#texto{text-align: justify;}
	
	.top-list{width:49%; max-width:340px; float:left; margin:0px auto; display:block; }
	
	header.large, header.small {background:none; transition:1.2s; }
	header.large ul.topnav, header.small ul.topnav{list-style-type:none; padding:0px; overflow:hidden; z-index:1000; float: right; }
	
    /* TOP LIST */
    h1.toplist{font-family:'stratos'; font-size:4.6em; letter-spacing:0px;}
    h1.toplistcategory{font-family:'sudestada', sans-serif; font-size:5.6em; font-weight:normal;}
    span.toplist{font-size:2.0em; letter-spacing:-5px; margin:5px 0px -5px;}
    img.toplist{height:230px; margin-top:0px;}
    #toplisttitle{float:left; padding-top:0px;}
    #titlebox{width:76.88%; margin:0px 11.56% 5px;}
}

@media screen and (max-width:480px) {
    h2.article{font-size:1.0em;}
    p.subtitle{font-size:0.9em;}
    p.article{font-size:0.9em;}
    p.description{font-size:0.9em;}
    p.tenlist_number{font-size:3.5em; }
    p.tenlist_title{font-size:2.3em;}
    p.tenlist_description{font-size:1.3em;}
}