//mobile
@media (min-width: 0px) and (max-width: 479px) {
  html {
    font-size: 16px;
  }
  div.panel-col-last {
    float: left;
    clear: both;
  }
  div.pane-portada-panel-pane-1 div.views-row,
  div.view-n-trailers div.views-row,
  div.view-trailers div.views-bootstrap-grid-plugin-style {
    .panel-col-first {
//      padding: 0 0 0 60px;
    }
    .panel-col-last {
      padding: 0 0 0 10px;
    }
    .col-xs-12 {
      width: 99%;
    }
    .panel-2col-bricks .panel-panel {
      width: 99%;
      .inside {
        margin: 0.5em 0;
      }
    }
  }
  .site-trigger {
    margin: 0 auto !important;
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    z-index: 1000000000;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    opacity: 1;
    padding: 1rem;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
    background-color: white;

    a {
        color: black;
    }

    .site-nav-trigger {
        margin: 0 auto;
    }

    span {
        background-color: rgb(37, 37, 37);
        height: 5px;

        &:before, &:after {
        background-color: rgb(37, 37, 37);
        height: 5px;
        }

        &:before{
        top:       -8px;
        }

        &:after{
        top:       8px;
        }
    }
  }
  form input {
      width: 50%;
  }
  #name-and-slogan {
    font-size: 12px;
  }
  #logo {
    display: none;
  }
  .btn-subscribe{
    width: 100%;
  }
}

//narrow
@media  all and (min-width: 480px) and (max-width: 959px) {
  .site-trigger{
    display: none;
  }
  div.pane-portada-panel-pane-1 div.views-row,
  div.view-n-trailers div.views-row,
  div.view-trailers div.views-bootstrap-grid-plugin-style {
    .panel-2col-bricks .panel-col-first {
      width: 49%;
    }
  }
  #logo {
    display: inline;
  }
  #navigation {
    pointer-events: none;
    height: 100%;
  }
  #main-menu {
    position: -webkit-sticky;  // required for Safari
    position: sticky;
    top: 0; // required as well.
    z-index: 11;
  }
  #content {
//    padding-top: 60px;
  }
  .btn-subscribe{
    width: 300px;
  }
}

//wide
@media all and (min-width: 960px) {
  .site-trigger{
    display: none;
  }
  div.pane-portada-panel-pane-1 div.views-row,
  div.view-n-trailers div.views-row,
  div.view-trailers div.views-bootstrap-grid-plugin-style {
    .panel-2col-bricks .panel-col-first {
      width: 49%;
    }
  }  
  #logo {
    display: inline;
  }
  #navigation {
    pointer-events: none;
    height: 100%;
  }
  #main-menu {
    pointer-events: all;
    position: -webkit-sticky;  // required for Safari
    position: sticky;
    top: 0; // required as well.
    z-index: 1;
  }
  #content {
//    padding-top: 60px;
  }
  .btn-subscribe{
    width: 300px;
  }
}

body {
  //background: url("http://6D27.http.cdn.softlayer.net/806D27/retosentrechicos.net/sites/all/themes/retosredesignd7/images/bg/body_bg.jpg") repeat-x scroll left top black;
}

@font-face
{
  font-family: DaysLater;
  src: url('/files/28 Days Later.ttf');
}

#header {
  background: url("/sites/all/themes/retosredesignd7/images/bg/body_bg.jpg") repeat-x scroll left top black;
}

.region-header { /* Wrapper for any blocks placed in the header region */
  float: right;
  clear: none;
}

#block-menu-menu-menu-registrados, #block-menu-menu-login-menu {
//  position: absolute;
//  right:30px;
//  top:0;
  ul {
    li {
      list-style: none;
      float: left;
      margin-left: 5px;
      a {
    background: lightgray;
      }
    }
  }
}

#site-name {
  a {
    span {
      font-family: DaysLater;
      font-size: 2em;
      color: #de0f68;
    }
  }
  a:focus,a:hover {
    text-decoration: none;
  }
}

//copiado
/* common and top level styles */
#navigation {
  padding-left: 0;
  padding-right: 0;
//  height: 100%;
  z-index: 11;
}
#main-menu {
  position: sticky;
  top: 0;
  z-index: 10;

  width: 100%;
  .menu-link {
    color: white;
  }
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
  background-image: linear-gradient(top, rgb(10,2,26) 26%, rgb(53,46,66) 63%, rgb(222,15,105) 82%);
  background-image: -o-linear-gradient(top, rgb(10,2,26) 26%, rgb(53,46,66) 63%, rgb(222,15,105) 82%);
  background-image: -moz-linear-gradient(top, rgb(10,2,26) 26%, rgb(53,46,66) 63%, rgb(222,15,105) 82%);
  background-image: -webkit-linear-gradient(top, rgb(10,2,26) 26%, rgb(53,46,66) 63%, rgb(222,15,105) 82%);
  background-image: -ms-linear-gradient(top, rgb(10,2,26) 26%, rgb(53,46,66) 63%, rgb(222,15,105) 82%);
  background-image: -webkit-gradient(
    linear,
    50% top,
    50% bottom,
    color-stop(0.26, rgb(10,2,26)),
    color-stop(0.63, rgb(53,46,66)),
    color-stop(0.82, rgb(222,15,105))
  );
  list-style: none outside none;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
//  border-bottom: 5px solid #333333;
  float: left;
  ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
  }
  li {
    position: relative;
    z-index: 0;
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    a {
      padding: 0.5em;
      color: white;
      display: block;
      text-decoration: none;
      -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
      white-space: normal;
    &:after {
      content: " | ";
      color: white;
      z-index: 1;
    }
    }
    &:hover li:hover, a:hover{
      background-color: #F55856;
      color: #FFFFFF;  
    }
    &.active a {
      background-color: #333333;
      color: #FFFFFF;
    }
  }
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    z-index: 11;
}

#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}
//fin copiado


#nav {
  ul li {
    background: url("/sites/all/themes/retosredesignd7/images/bg/main-menu_sep.png") no-repeat scroll right center transparent;
    text-align: center;
    width: 130px;
    margin: 0px 0px;
    padding: 0px 0px;
    a {
      color: white;
//      font-size: 18px;
      font-size: 1.2em;
      font-weight: bold;
      text-decoration: none;
    }
  }
}

.site-trigger{
    display: inline-block;
    margin-left: auto;
    ul.menu {
        position:absolute;
        bottom: 0;
        right: 0;
        width: 300px;
        list-style-type:none;
        li {
            opacity: 1;
            background: lightgrey;
            list-style-type:none;
        }
    }
}

.site-nav-trigger{  
  position:         relative;
  display:         block;
  width:           24px;
  height:         28px;
  overflow:         hidden;
  white-space:       nowrap;
  color:           transparent;
  z-index:         3;

  span{
    position:       absolute;
    top:         50%;
    right:         0;
    transition:     background 0.3s 0.3s;
    display:       inline-block;
    height:       3px;
    width:         24px;


    &:before, &:after{
      content:     '';
      height:     3px;
      width:       24px;
      position:     absolute;
      backface-visibility: hidden;
      right:       0;
      transition:   transform 0.3s 0.3s;
    }

    &:before{
      top:       -6px;
    }

    &:after{
      top:       6px;
    }
  }
}


#page-title {

}
.H1, .H2, .H3, .H4, .H5, .H6, .H7, .H8, .H9, .H10 {
  font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

.H2 {
//  font-size: 16px;
  font-size: 1.2em;
}

h1 {
  font-size: 1.5em;
  line-height: 1.3em;
}

div.view-lista-actores li, div.view-clone-of-lista-actores-para-p-gina-de-videos li {
  text-align: center;
  #height: 141px;
  div.views-field-title span {
    a {
      width: 71px;
      display: block;
      text-decoration: none;
      color: black;
      font-weight: bold;
      font-size: 0.8em;
    }
  }
}

div.pane-portada-panel-pane-1 div.views-row,
div.view-Castings div.views-row,
div.view-trailers div.col-xs-12,
div.view-n-trailers div.views-row,
div.view-webcamshows div.views-row,
div.view-Fotos div.views-row,
div.field-name-field-otros-videos  div.views-row {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -khtml-border-radius: 7px;
  border-radius: 7px;
  margin-top: 5px;
  background: url("/sites/all/themes/retosredesignd7/images/bg/content-dark_bg.jpg") no-repeat scroll left bottom #F9F4D3;
  overflow: visible;
  div.field-name-title {
      h2, h3, h4 {
        font-size: 1.1em;
        padding-top: 0px;
        margin-top: 0px;
        vertical-align: top;
        overflow: hidden;
        max-width: 800;
        max-height: 35;
        a {
        text-decoration: none;
        -moz-border-bottom-left-radius: 17px;
        -moz-border-bottom-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
        -webkit-border-bottom-right-radius: 17px;
        -khtml-border-bottom-left-radius: 17px;
        -khtml-border-bottom-right-radius: 17px;
        border-bottom-left-radius: 17px;
        border-bottom-right-radius: 17px;
        background-color: black;
        padding: 5px 10px;
        color: white;
        margin-left: 17px;
        display: inline-block;
        }
      }
  }
  h3.views-field-title, h5.views-field-title {
      font-size: 0.9em;
      padding: 0em;
      margin: 0em;
      a {
          text-decoration: none;
          -moz-border-bottom-left-radius: 17px;
          -moz-border-bottom-right-radius: 17px;
          -webkit-border-bottom-left-radius: 17px;
          -webkit-border-bottom-right-radius: 17px;
          -khtml-border-bottom-left-radius: 17px;
          -khtml-border-bottom-right-radius: 17px;
          border-bottom-left-radius: 17px;
          border-bottom-right-radius: 17px;
          background-color: black;
          padding: 5px 10px;
          color: white;
          display: inline-block;
        }
  }
  div.casting {
    overflow: visible;
    background-repeat: no-repeat;
    background-position: -5% 50%;
    background-image: url("/sites/all/themes/retosredesignd7/images/bg/fotos-porno-gay-logo.png");
  }
}

div.pane-portada-historia-panel-pane-1 {
  table {
    margin: 0px;
    width: 100%;
    p {
      padding: 0px 0px 0px 20px;
      margin: 0px;
      background: -webkit-linear-gradient(-45deg, #888, #000); 
      background: -moz-linear-gradient(-45deg, #888, #000);
      background: -o-linear-gradient(-45deg, #888, #000);
      background: -ms-linear-gradient(-45deg, #888, #000);
      background: linear-gradient(-45deg, #888, #000);
      color: white;
      font-size: 14px;
      min-height: 40px;
      line-height: 14px;
      padding: 12px 57px 12px 98px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 15px;
      z-index: 1;
      position: relative;
    }
    p:after {
      content: url("/sites/all/themes/retosredesignd7/images/bg/news-60.png");
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }
  }
}

body.node-type-casting, 
body.node-type-trailer, 
body.node-type-fotos, 
body.node-type-showdifformpago, 
body.node-type-actor {
  div.pane-content {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
    background: url("/sites/all/themes/retosredesignd7/images/bg/content-dark_bg.jpg") no-repeat scroll left bottom #F9F4D3;
    overflow: visible;  
    padding: 5px;
  } 
}


.field.field-name-field-fullhd-logo.field-type-image.field-label-hidden > img {
    float: left;
    width: 3em;
}

body.node-type-actor {
  div.inline {
      div.field-label{
        display: inline;
      }
    div.field-items {
      display: inline;
      div.field-item {
        display: inline;
      }
    }
  }
}

div.pane-chicos-ficha-panel-pane-1 ul.views-fluid-grid-list li {
  width: 49%;
  float: left;
}

//estilo para la splash page de aviso

.pane-rounded-shadow-temporary-8a13c3f759e1af8512ace925fae6ed0f .panel-pane {
    height: 14em;
    overflow: scroll;
    position: relative;
    top: -6px;
}

#colorbox {
  .panel-panel.panel-col-first {
  float: left;
  width: 24%;
  }
  .panel-panel.panel-col {
  float: left;
  width: 49%;
  }
  .panel-panel.panel-col-last {
  float: right;
  width: 24%;
  }
  .panel-panel.panel-col-bottom {
  clear: both;
  }
}

//background sprites
.corner-bits, .image-placeholder, .rounded-shadow-bottom-left-corner, .rounded-shadow-bottom-right-corner, .rounded-shadow-top-left-corner, 
.rounded-shadow-top-right-corner, .rounded-shadow-right-edge, .rounded-shadow-bottom-edge, .rounded-shadow-left-edge, .shadow-b, 
.shadow-t, .menu-collapsed, .shadow-l, .shadow-r
{ display: inline-block; background: url('../images/retos-sprite-sheet.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.corner-bits { background-position: -1px -0px; width: 22px; height: 22px; }
.image-placeholder { background-position: -1px -23px; width: 20px; height: 20px; }
.rounded-shadow-bottom-left-corner { background-position: -1px -44px; width: 19px; height: 19px; }
.rounded-shadow-bottom-right-corner { background-position: -1px -64px; width: 19px; height: 19px; }
.rounded-shadow-top-left-corner { background-position: -1px -84px; width: 19px; height: 19px; }
.rounded-shadow-top-right-corner { background-position: -1px -104px; width: 19px; height: 19px; }
.rounded-shadow-right-edge { background-position: -1px -124px; width: 18px; height: 10px; }
.rounded-shadow-bottom-edge { background-position: -1px -135px; width: 10px; height: 18px; }
.rounded-shadow-left-edge { background-position: -12px -135px; width: 10px; height: 10px; }
.shadow-b { background-position: -12px -146px; width: 10px; height: 3px; }
.shadow-t { background-position: -12px -150px; width: 10px; height: 3px; }
.menu-collapsed { background-position: -1px -154px; width: 7px; height: 7px; }
.shadow-l { background-position: -9px -154px; width: 3px; height: 10px; }
.shadow-r { background-position: -13px -154px; width: 3px; height: 10px; }

//menu flashing

@mixin fade-transition($element) {
	-webkit-transition: $element 0.15s ease-in-out;
	-moz-transition: $element 0.15s ease-in-out;
	-ms-transition: $element 0.15s ease-in-out;
	-o-transition: $element 0.15s ease-in-out;
	transition: $element 0.15s ease-in-out;
}

li.flashing a {
//    background: rgba(0,0,0,0.5);
    @include fade-transition(background);

    &:hover {
        background: rgba(8,97,76,0.6);
    }
}


li.flashing a:after {
/*   positioning */
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
  
/*   gradient   */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
/*  forming the shine element
    play around with the width, skew and gradient to get different effects
  */
    width: 15%;
    height: 100%;
    transform: skew(-10deg,0deg);
    -webkit-transform: skew(-10deg,0deg);
    -moz-transform: skew(-10deg,0deg);
    -ms-transform: skew(-10deg,0deg);
    -o-transform: skew(-10deg,0deg);
  
/*  animating it  */
    animation: move 2s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    -webkit-animation: move 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    -moz-transform: skew(-10deg,0deg);
    -moz-animation: move 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 1s;
    -ms-transform: skew(-10deg,0deg);
    -ms-animation: move 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-delay: 1s;
    -o-transform: skew(-10deg,0deg);
    -o-animation: move 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 1s;
    }

/*  */
@keyframes move {
    0%  { left: 0; opacity: 0; }
    5% {opacity: 0.0}
    48% {opacity: 0.2}
    80% {opacity: 0.0}
    100% { left: 82%}
}

@-webkit-keyframes move {
    0%  { left: 0; opacity: 0; }
    5% {opacity: 0.0}
    48% {opacity: 0.2}
    80% {opacity: 0.0}
    100% { left: 82%}
}

@-moz-keyframes move {
    0%  { left: 0; opacity: 0; }
    5% {opacity: 0.0}
    48% {opacity: 0.2}
    80% {opacity: 0.0}
    100% { left: 88%}
}

@-ms-keyframes move {
    0%  { left: 0; opacity: 0; }
    5% {opacity: 0.0}
    48% {opacity: 0.2}
    80% {opacity: 0.0}
    100% { left: 82%}
}

@-o-keyframes move {
    0%  { left: 0; opacity: 0; }
    5% {opacity: 0.0}
    48% {opacity: 0.2}
    80% {opacity: 0.0}
    100% { left: 82%}
}

fieldset.collapsed {
  margin-bottom: 1.5rem;
}

div.password-strength {
    float: none;
    width: 10em;
}

#edit-pass-pass1, #edit-pass-pass2 {
    width: 100%;
}

// call to action subscription button in contents
.btn-container-subscribe{
  position: inline;
}

.btn-subscribe{
    height: 50px;
    line-height: 50px;  
    background-color: #FF6138;
    border-radius: 8px;
    color: #fff;
    font-family: 'Indie Flower', cursive;
    font-size: 22px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-name: hover;
    animation-name: hover;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    &:before{
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: -webkit-transform, opacity;
        transition-property: transform, opacity;
        opacity: .4;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-name: hover-shadow;
        animation-name: hover-shadow;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    &:hover{
        background-color: #e16e50;
    }
}

@keyframes hover {
50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}
}

@-webkit-keyframes hover-shadow {
0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
}

50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
}

100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
}
}

@keyframes hover-shadow {
0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
}

50% {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
}

100% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
}
}

@-webkit-keyframes hover {
50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}
}

@keyframes hover {
50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
}
}