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

/*FONTS*/




/* CSS */
 
body { background-color:#FFC526; font-family:"Roboto"; overflow:hidden !important; background-image:url(../img/fondo.png); background-attachment: fixed background-size: cover; background-position:left top; background-repeat:no-repeat; background-size:cover;-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s; position:absolute; width:100%; height:100%; margin:0; padding:0; display:block; -webkit-overflow:hidden}


header{
    display: block;
    background-color: #E7EBDA;
    width:100%;
}

header img{
  float: right;
    display:inline-block;
    width:10%;
}
header nav{
    text-align: right;
    display:inline-block;
    width:10%;
    height:10%;
}

header ul{
    display: inline-block;
    list-style-type: none;
    margin: 0.5em auto;
    text-align: center;
}

header ul li{
    display: inline-block;
}

header ul li a{
    text-decoration: none;
    border: solid;
    border-color: #7D8471;
    border-radius: 50px;
    background-color: #7D8471;
    color: white;
    padding: 0.3em;
}

header ul li a:hover{
    background-color: #B8B799;
    border-color: #B8B799;
}

header ul li a:active{
    padding: 0.2em;
}
table{
  position: absolute;
  border: #B5121B 1px solid;

}

table th{
  text-align: left;
  width:300px;
  margin: 15px;
  padding: 15px;
}

table td{
  margin: 15px;
  padding: 15px;
  border: #A09F9F 1px solid;

}
table a{
  font-weight: bold;
  color: #333333; 
}

table td:hover{

        background-color: #F9F9F9;
        color: green;
 
}






.imagebuy{left:10%;}

 
.content { position:absolute;top:0;left:0; width:100%; height:100%; display:block; overflow:hidden !important;}

/*LOGO*/
.logo { width:200px; position: absolute;top:12%; right:10%; height:56px;  background-position:center center; background-repeat:no-repeat; background-image:url(../img/logo.png); background-size:230px 56px;-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s;}

.etiqueta {  position: absolute; right:10%;  background-position:center center; background-repeat:no-repeat; background-image:url(../img/etiqueta.png); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;}



/*PAISES*/
.boxs { width:300px; position: absolute;top:19%; right:10%;-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s; }
.box-red { height:67px; width:100%; display:block;   background-position:right bottom; background-repeat:no-repeat; background-size:283px 217px; background-image:url(../img/red.png); margin:0 0 8px 0; position:relative}
.box-red p { width:90%; position:absolute;left:5%; display:block; color:white; font-size:50px; height:100%; line-height:40px;}
.box-red p span{ font-size:15px; width:80%; position:absolute;top:13px;right:10px; text-align:left; color:white; line-height:20px}


.box-white {height:500px; width:100%; display:block;  background-position:right top; background-repeat:no-repeat; background-size:283px 297px; background-image:url(../img/white.png); position:relative}
.box-white ul { width:90%; display:block; position:absolute;top:5px; left:10px}
.box-white li { height:34px; width:100%; text-indent:40px; text-align:left; color:#333333; margin:3px 0; background-position:left center; background-repeat:no-repeat; background-size: contain; line-height:34px; font-size:16px;}
.box-white li a { display:block; height:34px; width:100%; line-height:34px; color:#333333}
.box-white li a:hover { color:#999}
.box-white li.shop { background-image:url(../img/shopt.png)}



/*FOOTER*/
.foot{ height:3%; width:100%; background-color:#424242; top:97%;left:0; position:absolute; overflow:hidden}
.foot .texts { height:86px; line-height:86px; text-align:center; width:100%; display:block; margin:0 auto;-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s;}

.foot .texts p { width:100%; font-size:30px; color:white; height:40px; line-height:40px; display:block; float:left;-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s; }
.separador {
	border-left: 1px solid #f5bbc2;
  margin-left: 18px;
}
 

.foot .texts p.primero { text-align:center; background-position:right bottom; background-repeat:no-repeat; background-image:url(../img/separador.png); background-size:2px 86px; font-size: 16px;}
.foot .texts p.ultimo { text-align:left}
.foot .texts p span {padding:0 1px}
.foot .foot-texts { height:20px; line-height:20px; color:white; width:100%; text-align:center; position:absolute; left:0; bottom:15px; font-size:11px; font-weight:normal;
-webkit-transition: all .5s;	-moz-transition: all .5s;	-o-transition: all .5s;	transition: all .5s;}
.foot .foot-texts a { color:white; display:block; height:20px; width:49%; float:left}
.foot .foot-texts a:hover {color:#900;}
.foot .foot-texts a.primer-a { text-align:right; border-right:1px solid #f5bbc2; }
.foot .foot-texts a.segund-a { text-align:left; }
.foot .foot-texts a span { padding:0 10px;}


/*QUERY*/
@media only screen and (min-width: 1201px) {
  body { background-image:background-image:url(../img/fondo2x.jpg); background-size:1600px 711px}
 .foot .foot-texts a { font-size:13px}
 
}
@media only screen and (max-width: 1200px) {
 body {background-size:1200px 533px}
 
}

/*portrait*/
@media only screen and (max-width: 960px) {
 body {background-position:-100px top; }
 
 .foot .texts p {  font-size:22px; height:56px; line-height:56px;}
 .box-red p span{ font-size:15px; }
}
	
/*medium resolution, 481px to 1023px */
@media only screen and (max-width: 700px) {
  body {background-position:-125px top; }
  
   .foot .texts p {   font-size:18px}
   .foot .foot-texts { font-size:10px; }
   .foot .texts p span {padding:0 5px}
   .box-red p span{ font-size:15px; }
 
	}
@media only screen and (max-width: 700px) and (max-width:700) {
     .foot { top:85%; height:16%}
    .foot .foot-texts { display:none}
	}
/* low resolution, 480px and below*/
@media only screen and (max-width: 460px) { 
  body {background-position:-140px top; }
   body {  background-size:1100px 489px;}   
   .foot .texts p {   font-size:12px; line-height:45px;}
  
.logo { width:200px;  right:3%; background-size:cover; height:40px }
.boxs { width:200px;    right:3%}
.box-red p span{ font-size:14px; }

.box-white {height:270px; }
.box-white ul {  top:2px;  }
 .foot .foot-texts { display:none}
.foot{  top:91%; height:10%;   }
}
@media only screen and (max-width: 330px)   { 
 .foot .texts p {  height:41px; line-height:35px; font-size:12px; width: 100%;}
 .foot .texts p.primero {
   text-align: center; 
   background-position: right bottom; 
   background-repeat: no-repeat; 
   background-image: none; 
}
/*LANDSCAPE*/
 
 
 @media only screen and (orientation:landscape) and (max-height:540px) { 
    body {  background-size:901px 400px; background-position:0px top;}
.logo {  right:4%; background-size:cover; height:35px;top:4% ;width:200px;}
.boxs {   right:4%;top:15%; width:200px}
 
.box-white {height:210px; }
  .box-red p span{ font-size:19px; top:14px }
    .box-red p { line-height:42px}
 .box-white ul li { height:30px }
  .box-white ul li a{ line-height:30px }
 .foot .texts p {  height:46px; line-height:40px; font-size:16px}
  .foot .foot-texts { display:none}
   .foot{   line-height:46px; top:86%; height:15%;}
}
 @media only screen and (orientation:landscape) and (max-height:400px) { 
    body {  background-size:901px 400px;}
.logo {  right:4%; background-size:cover; height:35px;top:4% ;width:200px;}
.boxs {   right:4%;top:15%; width:200px}
 
.box-white {height:195px; }
  .box-red p span{ font-size:16px; top:8px }
    .box-red p { line-height:32px}
 .box-white ul li { height:30px }
  .box-white ul li a{ line-height:30px }
 .foot .texts p {  height:46px; line-height:40px; font-size:16px}
  .foot .foot-texts { display:none}
   .foot{   line-height:46px; top:86%; height:15%;}

}
 @media only screen and (orientation:landscape) and (max-height:330px) { 
   
.logo {  right:3%; background-size:contain; height:30px;top:3% }
.boxs {   right:3%;top:16%}
 .box-red {height:50px; }
.box-white {height:110px; }
  .foot .foot-texts { display:none}
 .box-white ul li,  .box-white ul li a{ height:20px; line-height:19px; font-size:18px }

}
 @media only screen and (orientation:landscape) and (max-height:300px) { 
   .foot .foot-texts { display:none}

 }
/* RETINA */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (   min--moz-device-pixel-ratio: 2), only screen and (     -o-min-device-pixel-ratio: 2/1), only screen and (        min-device-pixel-ratio: 2), only screen and (                min-resolution: 192dpi), only screen and (                min-resolution: 2dppx) ,only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (   min--moz-device-pixel-ratio: 3), only screen and (     -o-min-device-pixel-ratio: 3/1), only screen and (        min-device-pixel-ratio: 3), only screen and (                min-resolution: 192dpi), only screen and (                min-resolution: 3dppx) 

{
 
body { background-image:background-image:url(../img/fondo2x.jpg);}
.foot .texts p.primero {background-image:url(../img/separador2x.png)}
.logo { background-image:url(../img/logo2x.jpg)}
 .box-red {   background-image:url(../img/red2x.png)}
.box-white {  background-image:url(../img/white2x.png)}
.box-white li.arg { background-image:url(../img/Argentina.png)}
.box-white li.bra { background-image:url(../img/Brasil.png)}
.box-white li.chi { background-image:url(../img/Chile.png)}
.box-white li.col { background-image:url(../img/Colombia.png)}
.box-white li.per { background-image:url(../img/Peru.png)}
.box-white li.urg { background-image:url(../img/Uruguay.png)}
.box-white li.mex { background-image:url(../img/Mexico.png)}

}