@media print {
  .new-page {
    page-break-before: always;
  }
}

@font-face {
  font-family: "Agency-fb-bold";
  src: url("../fonts/agency-fb-bold.woff");
}

@font-face {
  font-family: "Barlow-cond-EL";
  src: url("../fonts/BarlowCondensed-ExtraLight.ttf");
}

@font-face {
  font-family: "SmoochSans";
  src: url("../fonts/SmoochSans-SemiBold.woff");
}

.catag {font-family: "Arial Narrow";}

.menu-indicac {
position: absolute;
width: 280px;
height: 130px;
top: 250px;
left: calc( 50% + 300px);
background-image: url(../../catonline/elementos/Boton-Sucursal-Verde.png);
background-position: 50% 50%;
background-repeat:no-repeat;
background-size: contain;
}

.menu-indicac a {width: 100%;
		height: 100%;
		display: inline-block;
		}

.menu-btn {
display: inline-block; 
width: 80px; 
height: 80px; 
vertical-align: middle; 
background-image: url('../../catonline/elementos/menu-btn.png'); 
background-position: 50% 50%; 
background-repeat:no-repeat; 
background-size: contain;
cursor: pointer;
border: 3px solid black;
border-radius: 50% 50%;
}

.menu-btn:hover {
background-color: rgba(155, 217, 210, 0.66);
box-shadow: 0px 0px 3px 2px #444444 inset;
}


.menu-btn2 {
display: inline-block; 
width: 80px; 
height: 80px; 
vertical-align: middle; 
background-image: url('../../catonline/elementos/menu-btn2.png'); 
background-position: 50% 50%; 
background-repeat:no-repeat; 
background-size: contain;
cursor: pointer;
border: 3px solid black;
border-radius: 50% 50%;
}

.menu-btn2:hover {
background-color: rgba(155, 217, 210, 0.66);
box-shadow: 0px 0px 3px 2px #444444 inset;
}

.activar {
display: inline-block;
font-family: SmoochSans;
font-size: 35px;
cursor:pointer;
padding: 3px;
margin: 3px;
box-shadow: 0px  -1px 1px #cccccc, 0px 1px 1px 1px #444444;
}

.menuitem-off{
// box-shadow: inset 0px 0px 14px -3px #f2fadc;
// background: linear-gradient(to bottom, #bababa 5%, #666666 100%);
 background-color: #777777;
 border-radius: 12px;
//  border: 1px solid #b2b8ad;
 display: inline-block;
 cursor: pointer;
 color: #fff;
 font-family: Arial;
 font-size: 15px;
 font-weight: bold;
 padding: 6px 24px;
 text-decoration: none;
 text-shadow: 0px 1px 0px #333333;
}

.menuitem-on{
 background-color: #777777;
 border-radius: 12px;
//  border: 1px solid #b2b8ad;
 display: inline-block;
 cursor: pointer;
 color: #ccc;
 font-family: Arial;
 font-size: 15px;
 font-weight: bold;
 padding: 6px 24px;
 text-decoration: none;
 text-shadow: 0px 1px 0px #333333;
}



.activar:hover {
 background: linear-gradient(to bottom, #666666 5%, #bababa 100%);
 background-color: #666666;
 color: #fafafa;
//background-color: rgba(155, 217, 210, 0.66);
//box-shadow: 0px  1px 1px #cccccc, 0px -1px 1px 1px #444444;
}


.portada {
max-height: 822px;
height: 826px;
width: 1168px;
background-image: url(portada.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}

.hoja {
max-height: 822px;
height: 826px;
width: 1168px;
background-image: url(fondo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
counter-increment: myIndex;
}

.plantilla {
position: relative;
top: 80px;
margin-bottom: 60px;
width: 100%;
height: 680px;

}

div.fecha {
position:relative;
float: right;
display: block;
right: 15px;
top:15px;
font-weight: normal;
font-size: 15px;
}

.fecha::after {
float: right;
content: ". Página " counter(myIndex);
}



div.artcompleto {
position:relative;
margin: auto auto;
height:90%;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
max-width: 95%;
max-height: calc(98%  - 40px);




}

div.outlet {
position: absolute;
float:right;
top: -5px;
right: -10px;
width: 90px;
height: 70px;
background-image: url(../elementos/outlet.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
transform: rotate(20deg);
}

div.prox {
position: absolute;
left: -10px;
bottom: 25%;
width: calc(100% + 20px);
background-image: url(../elementos/banda.png);
background-repeat: repeat;
transform: rotate(-10deg);
text-align: center;
color: white;
text-shadow: 0px 0px 3px black;
}

div.agotado {
position:absolute;
background-image: url(../elementos/agotado.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
width: 100%;
height:100%;
top: 0px;
}

div.oportunidad {
position:absolute;
background-image: url(../elementos/oportunidad.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 0 50%;
width: 40px;
height: 150px;
top: -10px;
}

div.desc {
font-family: "Arial Narrow";
font-size: 14px;
font-weight: ;
position:absolute;
width: 78%;
left: 3px;
bottom: -15px;
background-color: rgba(243,250,250,0.7);
padding: 5px;
padding-right: 15px;
box-shadow: 0px 0px  3px  -1px black;
border-radius: 3px;
border-top-right-radius: 50px;
color: #3f3f3f;
}

div.nombre {
display: inline-block;
top: -25px;
font-size: 24px;
font-weight: 500;
position:relative;
width: calc(100% - 115px);
left: 37px;
color: rgba(53, 75, 100, 1);
text-shadow: -1px 0px 0px #aaaaab, 1px 0px 0px #aaaaab, 0px -1px 0px #aaaaab, 0px 1px 0px #aaaaab;

}

div.art {
display: inline-block;
top: -25px;
font-size: 18px;
font-weight: normal;
position:relative;
width: 130px;
left: 37px;
color: rgba(243,250,250,0.8);
background: rgba(53, 75, 100, 1);
// background: rgb(3,6,6);
// background: linear-gradient(90deg, rgba(3,6,6,1) 0%, rgba(75,116,117,1) 19%, rgba(75,116,117,0) 88%);

}

div.precio1 {
padding-left: 40px;
padding-right: 3px;
font-size: 32px;
position:absolute;
right:0px;
top: calc(50% + 84px);
color: #ffffff;
background-color: #0b5b65;
background: rgb(75,116,117);
background: linear-gradient(273deg, rgba(53, 75, 100, 1) 56%, rgba(53, 75, 100, 0) 89%);
}

div.precio2 {
padding-left: 40px;
padding-right: 3px;
font-size: 32px;
position:absolute;
right: 0px;
top: calc(50% + 42px);
background-color: #0b5b65;
background: rgb(75,116,117);
background: linear-gradient(273deg, rgba(53, 75, 100, 1) 56%, rgba(53, 75, 100, 0) 89%);
}

div.precio3 {
padding-left: 40px;
padding-right: 3px;
font-size: 32px;
position:absolute;
right: 0px;
top: 50%;
background-color: #0b5b65;
background: rgb(75,116,117);
background: linear-gradient(273deg, rgba(53, 75, 100, 1) 56%, rgba(53, 75, 100, 0) 89%);
}

div.precio4 {
padding-left: 40px;
padding-right: 3px;
font-size: 32px;
position:absolute;
right: 0px;
top: calc(50%  - 42px);
background-color: #0b5b65;
background: rgb(75,116,117);
background: linear-gradient(273deg, rgba(53, 75, 100, 1) 56%, rgba(53, 75, 100, 0) 89%);
}

div.precioin {
font-size: 22px;
display: inline-block;
color: #ffffff;

}

div.sinstock {
font-size: 24px;
width: 150px;
color: #ffffff;
position:absolute;
right: 0px;
text-align:right;
bottom: -15px;
background: rgb(171,0,0);
background: linear-gradient(90deg, rgba(171,0,0,0) 0%, rgba(251, 54, 64, 1) 50%, rgba(82,0,0,1) 100%);
}

div.anexo {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: white;
opacity: 0.7;
background-image: url(img/anexo.png);
background-repeat: repeat;
margin: auto auto;
background-size: 30% auto;
}

.dir {
position: relative;
width: 545px;
height: 61px;
display: block;
left: 115px;
cursor: pointer;
border: 1px solid transparent;
}

.compartir {width:100%; border-collapse:collapse}
.compartir td {vertical-align: middle}
.compartir a {display: inline-block}

#parque {top: 220px}
#lafe {top:222px}
#norte {top:224px}
#quil {top:227px}
#mg {top:228px}
#caba {top:233px}

@media (max-width: 1000px) {
.menu-indicac {left: calc( 50% + 700px);}
}