/* Style */
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
 
 /*
          *****Nav_Escritorio***
*/
.inicio{
   
    color: white  ;
    width: 100%;
    border-radius: 5%;
    opacity: 0.7;
    font-size: 20px;
   }

.menu {
  display: flex;
  color: white!important;
 
}
.menu a span:first-child {
  display: inline-block;
  padding: 45px;
}
.menu a {
  display: block;
  position: relative;
  overflow: hidden;

}
 
.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}
.menu a span {
  transition: transform 0.2s ease-out;
  color: white;
}
 
.menu a:hover span:first-child {
  transform: translateY(100%);
  color: white;
}
 
.menu a:hover span:last-child {
  transform: none;
   color: white;
}
.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}
 
.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}
 
.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}
 
.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}
/*
          *****Nav_Escritorio***
*/
 .fondo_principal{
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
}
.fondo_principal_responsive{
 display: none;
}
::selection {
    background: black;
    color: #FFF;
}
 
::-webkit-scrollbar {
    width: 9px;
}
 
::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1) inset;
}
 
::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
}
 
/* --------------------------
    Body
----------------------------- */
 
body {
    font-family: 'Open Sans', sans-serif;
    background: black;
    padding: 0;
    margin: 0;
    border-top: 10px solid black;
}
 
/* --------------------------
    Container
----------------------------- */
 
.container {
    width: 960px;
    margin: 10px auto;
    -webkit-transform: translateZ(0);
}
 
a {
    text-decoration: none;
}
 
/* --------------------------
    Header
----------------------------- */
 
header {
    text-align: center;
    font-weight: 300;
    font-size: 700%;
}
 
/* --------------------------
    Footer
----------------------------- */
 
footer {
    text-align: center;
    height: 100px;
    line-height: 100px;
    color: gray;
    clear: both;
}
 

 
/* --------------------------
    Main Image Box
----------------------------- */
 
.work {
    margin: 20px 0;
}
 
.work figure {
    float: left;
    margin: 20px;
    width: 200px;
    height: 200px;
    background: #9d2e2c;
    line-height: 200px;
    -webkit-filter: sepia(0.4);
    position: relative;
    padding: 0 !important;
     
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);   
 
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}
 
.work figure a img {
    height: 100%;
    width: 100%;
}
 
.work figure dl {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 20px;
    margin: 0;
    line-height: 2.5; 
    background: rgba(0, 0, 0, 0.8);
    color: white;
 
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}
 
.work figure:hover dl {
    opacity: 1;
    border: solid green 4px;
    padding: 30px;
    width: + 10px;
}
 
.work figure dl dt {
    text-transform: uppercase;
    font-family: 'PT Sans Narrow';
    font-size: 12px;
    margin-bottom: -16px;
}
 
.work figure dl dd {
    margin-left: 0;
}
 
.current-li {
    color: #000;
}
 
.current {
    -webkit-filter: sepia(0) !important;
 
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
 
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
.not-current {
    -webkit-transform: scale(0.75); 
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
 
    -webkit-filter: grayscale(1) !important;
}
 
.not-current:hover dl {
    opacity: 0 !important;
}

/*
Responsive
*/
@media only screen and (max-width: 965px) {
    .fondo_principal{
        display: none;
    }
    .fondo_principal_responsive{
  display: block;
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
    }
    .container {
        width: 840px;
    }
    .work figure {
        width: 170px;
        height: 170px;
    }
}
@media only screen and (max-width: 860px) {
    .fondo_principal_responsive{
  display: block;
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
    }
    .container {
        width: 720px;
    }
    .work figure {
        width: 200px;
        height: 200px;
    }
}
 
@media only screen and (max-width: 740px) {
    .fondo_principal_responsive{
  display: block;
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
    }
    .container {
        width: 600px;
    }
    .work figure {
        width: 160px;
        height: 160px;
    }
    .not-current {
        opacity: 0.5;
    }
}

@media only screen and (max-width: 910px) {
    .fondo_principal_responsive{
  display: block;
  opacity: 0.1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2000px;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
    }
    .container {
        width: 460px;
    }
    header {
        font-size: 400%;
    }
    nav ul li {
    }
    .work figure {
        margin-left: 40px;
        margin-bottom: 60px;
    }
    .work figure dl {
        height: 40px;
        top: 200px;
        bottom: 0px;
    }
}
.work figure dl {
    opacity: 0.8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 20px;
    margin: 0;
    line-height: 2.5; 
    background: rgba(0, 0, 0, 0.8);
    color: white;
 
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}


@media only screen and (max-width: 480px) {
        .fondo_principal_responsive{
  display: block;
  opacity: 0.1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2000px;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
    }
    .container {
        width: 460px;
    }
    header {
        font-size: 400%;
    }
    nav ul li {
    }
    .work figure {
        margin-left: 40px;
        margin-bottom: 60px;
    }
    .work figure dl {
        height: 40px;
        top: 200px;
        bottom: 0px;
    }
}
.work figure dl {
    opacity: 0.8;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 20px;
    margin: 0;
    line-height: 2.5; 
    background: rgba(0, 0, 0, 0.8);
    color: white;
 
    transition: 0.6s;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
}