Uecko_Web/css/estanterias.css

body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}

body, .onepage-wrapper, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
}

.onepage-wrapper .section {
  width: 100%;
  height: 100%;
}

.onepage-pagination {
  position: absolute;
  right: 10px;
  top: 30%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onepage-pagination li {
  padding: 0;
  text-align: center;
}
.onepage-pagination li a{
  padding: 10px;
  width: 4px;
  height: 4px;
  display: block;
  
}
.onepage-pagination li a:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.onepage-pagination li a.active:before{
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid black;
  margin-top: -4px;
  left: 8px;
}

.categorias {width: 100%; height: 100%; margin: 10%; text-align: center;}

.categorias h1 {
  margin-top: 10%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
  font-size: 260%;
  display: block;
}

.main {
  margin-top: 40px;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.menu, .header, .nav-top {
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}



.main section.page1 {
  background-image: url(http://uecko.com/img/estanterias/page1.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page1.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page1.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page2 {
  background-image: url(http://uecko.com/img/estanterias/page2.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page2.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page2.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page3 {
  background-image: url(http://uecko.com/img/estanterias/page3.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page3.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page3.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page4 {
  background-image: url(http://uecko.com/img/estanterias/page4.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page4.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page4.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page5 {
  background-image: url(http://uecko.com/img/estanterias/page5.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page5.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page5.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page6 {
  background-image: url(http://uecko.com/img/estanterias/page6.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page6.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page6.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page7 {
  background-image: url(http://uecko.com/img/estanterias/page7.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page7.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page7.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page8 {
  background-image: url(http://uecko.com/img/estanterias/page8.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page8.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page8.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}
.main section.page9 {
  background-image: url(http://uecko.com/img/estanterias/page9.jpg) !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page9.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page9.jpg', sizingMethod='scale')";
  position: fixed;
  background-position: center center;
  background-height: 100%;
}

body .header h1 {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

body .nav-top span.right a {
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

body.viewing-page-2 .header h1, body.viewing-page-2 .nav-top span.right a {color: black;}

.main section .page_container h1 {font-size: 260%;}
.main section .page_container p  {line-height: 1.6;font-size: 160%;}
.main section .page_container.blanco h1 {color: #fff;}
.main section .page_container.negro h1 { color: #000;}
@media (max-width: 480px){
  .main section .page_container.negro h1 {color:#fff;}
}
.main section .page_container.blanco p {color: #fff;}
.main section .page_container.negro p {color: #000;}
@media (max-width: 480px){
  .main section .page_container.negro p {color:#fff;}
}



 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

      .main section.page1 {
          background-image: url(http://uecko.com/img/estanterias/page1@2x.jpg) !important; 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page1@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page1@2x.jpg', sizingMethod='scale')";
        }
      .main section.page2 {
          background-image: url(http://uecko.com/img/estanterias/page2@2x.jpg) !important; 
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page2@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page2@2x.jpg', sizingMethod='scale')";
        }
      .main section.page3 {
          background-image: url(http://uecko.com/img/estanterias/page3@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page3@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page3@2x.jpg', sizingMethod='scale')";
          
        }
      .main section.page4 {
          background-image: url(http://uecko.com/img/estanterias/page4@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page4@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page4@2x.jpg', sizingMethod='scale')";
         
        }
        .main section.page5 {
          background-image: url(http://uecko.com/img/estanterias/page5@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page5@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page5@2x.jpg', sizingMethod='scale')";
         
        }
        .main section.page6 {
          background-image: url(http://uecko.com/img/estanterias/page6@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page6@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page6@2x.jpg', sizingMethod='scale')";
          
        }
        .main section.page7 {
          background-image: url(http://uecko.com/img/estanterias/page7@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page7@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page7@2x.jpg', sizingMethod='scale')";
          
        }
        .main section.page8 {
          background-image: url(http://uecko.com/img/estanterias/page8@2x.jpg) !important; 
          
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page8@2x.jpg', sizingMethod='scale');
          -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://uecko.com/img/estanterias/page8@2x.jpg', sizingMethod='scale')";
          
        }
  }

 /* Media Queries */
@media (max-width: 480px) {
   .onepage-pagination {position: absolute;right: 6px;top: 12%;z-index: 5;list-style: none;margin: 0;padding: 0;}
   .main section .page_container {position: relative;bottom: 0;left: 0;margin-bottom: 50px;max-width: 320px;}
   .main section .page_container h1 {font-size: 80%;}
   .main section .page_container p  {line-height: 1.2;font-size: 80%;}
   .main section.page1 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page2 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page3 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page4 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page5 .page_container {top: 5%;left: 0%;max-width: 200px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page6 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page7 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page8 .page_container {top: 5%;left: 0%;max-width: 240px;background-color: rgba(0,0,0, .3); padding: 5px;}
}
@media (min-width: 480px) {
   .onepage-pagination {position: absolute;right: 6px;top: 12%;z-index: 5;list-style: none;margin: 0;padding: 0;}
   .main section .page_container {position: relative;bottom: 0;left: 0;max-width: 320px;}
   .main section .page_container h1 {font-size: 90%;}
   .main section .page_container p  {line-height: 1.2;font-size: 101%;}
   .main section.page1 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page2 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page3 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page4 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page5 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page6 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page7 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page8 .page_container {top: 5%;left: 0%;max-width: 400px;background-color: rgba(0,0,0, .3); padding: 5px;}
}
@media (min-width: 768px) {
   .onepage-pagination {position: absolute;right: 6px;top: 14%;z-index: 5;list-style: none;margin: 0;padding: 0;}
   .main section .page_container {position: relative;bottom: 0;left: 0;max-width: 720px;}
   .main section .page_container h1 {font-size: 110%;}
   .main section .page_container p  {line-height: 1.2;font-size: 140%;}
   .main section.page1 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page2 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page3 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page4 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page5 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page6 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page7 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page8 .page_container {top: 6%;left: 0%;max-width: 640px;background-color: rgba(0,0,0, .3); padding: 5px;}
}
@media (min-width: 992px) {
   .onepage-pagination {position: absolute;right: 6px;top: 14%;z-index: 5;list-style: none;margin: 0;padding: 0;}
   .main section .page_container {position: relative;bottom: 0;left: 0;max-width: 920px;}
   .main section .page_container h1 {font-size: 140%;}
   .main section .page_container p  {line-height: 1.2;font-size: 140%;}
   .main section.page1 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page2 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page3 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page4 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page5 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page6 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page7 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page8 .page_container {top: 8%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
}
@media (min-width: 1600px) { 
   .onepage-pagination {position: absolute;right: 6px;top: 14%;z-index: 5;list-style: none;margin: 0;padding: 0;}
   .main section .page_container {position: relative;bottom: 0;left: 0;max-width: 1120px;}
   .main section .page_container h1 {font-size: 150%;}
   .main section .page_container p  {line-height: 1.4;font-size: 160%;}
   .main section.page1 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page2 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page3 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page4 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page5 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page6 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page7 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
   .main section.page8 .page_container {top: 10%;left: 0%;max-width: 800px;background-color: rgba(0,0,0, .3); padding: 5px;}
}