/*
    hemisferio.space
*/

@import url("gridlex.css");
@import url("f/font_style.css");

body {
    color: #FFF;
    background: #000;
	font: normal 300 16px/1 'Myriad pro', sans-serif;
}
h1,h2,h3,h4,h5,h6,
.product-cant{
    font-family: 'BebasNeue',sans-serif;
}
header, footer {
    color: #FFF;
    font-family: 'BebasNeue',sans-serif;
    text-align: center;
}
section {
    min-height: 100vh;
}
.content {
    margin: 0 auto;
    padding: 0 2%;
    max-width: 1440px;
}
img {
    -webkit-transition: -webkit-transform .33s ease-in;
    transition: -webkit-transform .33s ease-in;
    transition: transform .33s ease-in;
    transition: transform .33s ease-in, -webkit-transform .33s ease-in;
}
.hide {
    height: 0;
    overflow: hidden;
}
body.en .es {
    display: none !important;
}
body.es .en {
    display: none !important;
}
/*header*/
.narco {
    width: 144px;
    display: inline-block;
    vertical-align: middle;
    margin: .8em 0;
}
.narco a {
    display: block;
    height: 0;
    overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_1' x='0' y='0' version='1.1' viewBox='0 0 264 46' xml:space='preserve'%3E%3Cpath fill='%23EE0000' d='M13.5 16.9v19.8H9.4V9.3H15l4.7 16.4V9.3h4v27.4H19zM45.5 36.7H41l-.8-5h-5.5l-.8 5h-4.1l4.6-27.4H41l4.5 27.4zM35.3 28h4.3l-2.2-13.8L35.3 28zM61.1 36.7c-.2-.7-.4-1.1-.4-3.4V29c0-2.5-.9-3.5-2.9-3.5h-1.6v11.1h-4.5V9.3h6.8c4.7 0 6.7 2.1 6.7 6.3v2.2c0 2.8-.9 4.7-2.9 5.6 2.2.9 3 3 3 5.8v4.2a7 7 0 00.5 3.3h-4.7zm-4.9-23.5v8.4H58c1.7 0 2.7-.7 2.7-2.9V16c0-2-.7-2.8-2.3-2.8h-2.2zM85.2 26.5v3.6c0 4.4-2.3 6.9-6.7 6.9s-6.7-2.5-6.7-6.9V15.9c0-4.4 2.3-6.9 6.7-6.9s6.7 2.5 6.7 6.9v2.7H81v-2.9c0-2-.9-2.7-2.3-2.7s-2.3.7-2.3 2.7v14.8c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7v-3.9h4.2zM91.7 15.9c0-4.4 2.4-6.9 6.8-6.9s6.8 2.5 6.8 6.9v14.2c0 4.4-2.4 6.9-6.8 6.9s-6.8-2.5-6.8-6.9V15.9zm4.5 14.5c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7V15.6c0-2-.9-2.7-2.3-2.7s-2.3.7-2.3 2.7v14.8zM118.4 9c4.4 0 6.6 2.5 6.6 6.9v.9h-4.2v-1.1c0-2-.8-2.7-2.2-2.7-1.4 0-2.2.7-2.2 2.7 0 5.6 8.8 6.7 8.8 14.5 0 4.4-2.3 6.9-6.7 6.9s-6.7-2.5-6.7-6.9v-1.7h4.2v2c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7c0-5.6-8.8-6.7-8.8-14.5-.1-4.5 2.2-7 6.6-7M130.4 9.3h13.9v3.9h-4.7v23.5h-4.5V13.2h-4.7zM149.9 15.9c0-4.4 2.4-6.9 6.8-6.9s6.8 2.5 6.8 6.9v14.2c0 4.4-2.4 6.9-6.8 6.9s-6.8-2.5-6.8-6.9V15.9zm4.5 14.5c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7V15.6c0-2-.9-2.7-2.3-2.7s-2.3.7-2.3 2.7v14.8zM180 36.7c-.2-.7-.4-1.1-.4-3.4V29c0-2.5-.9-3.5-2.9-3.5h-1.6v11.1h-4.5V9.3h6.8c4.7 0 6.7 2.1 6.7 6.3v2.2c0 2.8-.9 4.7-2.9 5.6 2.2.9 3 3 3 5.8v4.2a7 7 0 00.5 3.3H180zm-4.9-23.5v8.4h1.8c1.7 0 2.7-.7 2.7-2.9V16c0-2-.7-2.8-2.3-2.8h-2.2zM195.6 20.8h6.1v4h-6.1v8h7.7v3.9h-12.2V9.3h12.2v3.9h-7.7zM210.2 32.5h4.3v4.1h-4.3zM234.5 26.5v3.6c0 4.4-2.3 6.9-6.7 6.9s-6.7-2.5-6.7-6.9V15.9c0-4.4 2.3-6.9 6.7-6.9s6.7 2.5 6.7 6.9v2.7h-4.2v-2.9c0-2-.9-2.7-2.3-2.7s-2.3.7-2.3 2.7v14.8c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7v-3.9h4.2zM240.9 15.9c0-4.4 2.4-6.9 6.8-6.9s6.8 2.5 6.8 6.9v14.2c0 4.4-2.4 6.9-6.8 6.9s-6.8-2.5-6.8-6.9V15.9zm4.5 14.5c0 2 .9 2.7 2.3 2.7s2.3-.7 2.3-2.7V15.6c0-2-.9-2.7-2.3-2.7s-2.3.7-2.3 2.7v14.8z' class='st0'/%3E%3C/svg%3E") no-repeat 50% 50%;
    background-size: contain;
    padding-top: 40px;
}
.narcostore {
    display: inline-block;
    width: 100%;
    max-width: 70%;
    height: 0;
    padding-top: 240px;
    background: url(img/narcostore-min.png) no-repeat 50% 50%;
    background-size: contain;
    overflow: hidden;
}
header {
    background: #181818;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    border-bottom: 4px solid #c10d19;
}
nav {
    font-size: 11px;
}
nav ul, nav li {
    display: inline-block;
    vertical-align: middle;
}
ul.nav {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 80%;
    width: calc(88% - 200px);
}
.nav li {
    width: 16.6%;
}
.nav li a {
    display: block;
    /*font-size: 1.875em;*/
    font-size: 1.35em;
    letter-spacing: .1em;
    color: #FFF;
    padding: 1.3em 1em;
}
.nav li a:hover,
.nav li a.activo {
    color: #b30613;
}

#ham {
    display: none;
    width: 36px;
    height: 28px;
    padding: 0 !important;
    
    cursor: pointer;

}
#ham div {
    display: block;
    height: 100%;
    -webkit-transition:.22s linear all;-moz-transition:.22s linear all;-o-transition:.22s linear all;-ms-transition:.22s linear all;transition:.22s linear all;
}
#ham span {
    text-indent: -9999px;
    display: block;
    width: 26px;
    height: 3px;
    background: #FFF;
    
    -webkit-transition:.22s linear all;-moz-transition:.22s linear all;-o-transition:.22s linear all;-ms-transition:.22s linear all;transition:.22s linear all;
}
#ham.close div {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
} 
#ham.close span {
    opacity: 0;
}
#ham.close div:after {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    bottom: 14px;
}
#ham div:before,
#ham div:after {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    background: #FFF;
    position: absolute;
}
#ham div:before {
    top: 11px;
}
#ham div:after {
    bottom: 4px;
}

.actions li {
    padding: 0 9px;
    position: relative;
    border-right: 1px solid;
}
.actions li:first-child {
    border-right: none;
}
.actions li a {
    width: 25px;
    display: block;
    height: 0;
    padding-top: 25px;
    overflow: hidden;
    background: url(img/sprite_.png) no-repeat;
    background-size: 60px;
    font-size: .01em;
    color: transparent;
    
}
.actions li.question a {
    background-position: -28px -51px;
}
.actions li.question a:hover,
.actions li.question a:active {
    background-position: -28px -81px;
}
.actions li.shop a {
    background-position: 0 -51px;
}
.actions li.shop a:hover,
.actions li.shop a:active{
    background-position: 0 -81px;
}
.actions li.user a {
    background-position: -36px -23px;
}
.actions > li:last-child {
    padding: 0;
    border-right: none;
}
.actions li.question {
    /*display: none;*/
}
.lang li {
    padding: .6em 9px;
    cursor: pointer;
    border: none;
}
.drop {
    width: 200px;
    height: 0;
    overflow: hidden;
    background: #000;
    position: absolute;
    right: 0;
    -webkit-transition:.22s linear all;-moz-transition:.22s linear all;-o-transition:.22s linear all;-ms-transition:.22s linear all;transition:.22s linear all
}
.lang li:first-child {
    border-right: 1px solid;
}
input {
    width: 100%;
    padding: .65em;
    margin-bottom: .5em;
    border: none;
    font-size: 12px;
}
.actions li a.submit {
    padding: .6em;
    margin: .6em;
    display: inline-block;
    background: #c10d19;
    width: auto;
    height: auto;
    font-size: 15px;
    color: #fff;
    overflow: initial;
}
.actions li a.submit:hover {
    background: #7b0b12;
}
.user a:hover + .drop,
.drop:hover,
.user a:active + .drop,
.drop:active ,
.user a:focus + .drop,
.drop:focus {
    height: auto;
    padding: .5em;

}
footer {
    padding: 1.6em 0 2em;
    font-size: 12px;
    margin: 0 !important;
    text-align: right;
}
footer ul, footer li {
    display: inline-block;
    vertical-align: middle;
}
footer ul {
    padding: 1.2em 1.4em;
}
footer li a {
    padding: .5em;
}
footer ul:first-of-type {
    border-right: 1px solid;
}
footer ul.social a {
    display: block;
    width: 30px;
    height: 0;
    padding: 30px 0 0 0;
    overflow: hidden;
    background: url(img/sprite_.png) no-repeat;
    background-size: 55px;
}
footer ul.social a:hover {
    transform: scale(1.1);
}
footer ul.social li.ins a {
    background-position: 3px -93px;
}
footer ul.social li.fb a {
    background-position: -22px -93px;
}
footer ul.social li.tw a {
    background-position: -31px 5px;
}
footer a {
    color: #FFF;
}
footer .narco {
    display: block;
}
/**/
.top {
    height: 100%;
    height: 65vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 4vh;
    letter-spacing: 8vh;
    color: #FFF;
    background-size: 120%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    -webkit-animation: bganm .5s .1s ease-in-out forwards;
    animation: bganm .5s .1s ease-in-out forwards;
    color: #c10d19;
    transition: height .6s linear, opacity .45s linear;
}
#home .top {
    height: 100vh;
}
@-webkit-keyframes bganm {
    to {background-size: 100%;}
}
@keyframes bganm {
    to {background-size: 100%;}
}
.top h1 {
    font-size: 4.5em;
}
.top h1.let span {
    opacity: 0;
    min-width: 1em;
    animation: let .7s .6s ease-in-out forwards;
    transform: none;
}
@-webkit-keyframes let {
    to {opacity: 1; min-width: .6em; color: #FFF;}
}
@keyframes let {
    to {opacity: 1; min-width: .6em; color: #FFF;}
}
.fondo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 364px;
    width: 100px;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(450deg);
    background-image: url(img/n_2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    z-index: -1;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: opacity 2.1s .6s ease-in-out forwards;
    animation: opacity 2.1s .6s ease-in-out forwards;
}
.fondo:before,
.fondo:after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0;
}
.fondo:before {
    top: 100%;
    width: 133px;
    background-image: url(img/n_1.jpg);
    right: 100%;
    -webkit-animation: right 1.5s 1.2s ease-in-out forwards;
    animation: right 1.5s 1.2s ease-in-out forwards;
}
.fondo:after {
    width: 135px;
    background-image: url(img/n_3.jpg);
    left: 100%;
    -webkit-animation: left 1.5s 1.2s ease-in-out forwards;
    animation: left 1.5s 1.2s ease-in-out forwards;
    bottom: 100%;
}
@-webkit-keyframes opacity {
    to {opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(0deg);}
}
@keyframes opacity {
    to {opacity: 1; transform: translate(-50%, -50%) rotate(0deg);}
}
@-webkit-keyframes give {
    to {opacity: 1; -webkit-transform: scale(1);}
}
@keyframes give {
    to {opacity: 1; transform: scale(1);}
}
@-webkit-keyframes left {
    to {opacity: 1; left: 100%; bottom: 0;}
}
@keyframes left {
    to {opacity: 1; left: 100%; bottom: 0;}
}
@-webkit-keyframes right {
    to {opacity: 1; right: 100%; top: 0;}
}
@keyframes right {
    to {opacity: 1; right: 100%; top: 0;}
}
.fondo.on {
    animation: move 10.1s ease-in-out infinite alternate;
}
.fondo.on:before {
    top: 50%;
    animation: move 10.1s .5s ease-in-out infinite alternate;
}
.fondo.on:after {
    bottom: -50%;
    left: 210%;
    animation: move 10.1s .8s ease-in-out infinite alternate;
}
@keyframes move {
    from { opacity: 1; transform: translate(-50%, -46%) rotate(0deg);}
    to   { opacity: 1; transform: translate(-50%, -54%) rotate(0deg);}
}

/**/
.img-menu {
    padding-top: 3vh;
}
.img-menu li {
    height: 50vh;
    /*display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;*/
    position: relative;
}
.img-menu li a {
    display: block;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border: 4px solid transparent;
}
.img-menu li a.h {background-image: url(img/narcos_hombre.jpg);}
.img-menu li a.m {background-image: url(img/narcos_mujer.jpg);}
.img-menu li a.n {background-image: url(img/narcos_ninos.jpg);}
.img-menu li a.a {background-image: url(img/narcos_accesorios.jpg);}
.img-menu li a.c {background-image: url(img/narcos_hogar.jpg);}
.img-menu li a.j {background-image: url(img/narcos_juguetes.jpg);}

.img-menu li a:hover,
.img-menu li a:active {
    border-color: #d50000;
}
.img-menu li a:hover .cinta,
.img-menu li a:active .cinta {
    opacity: 1;
    -webkit-transform: scale(1) rotate(-25deg);
    transform: scale(1) rotate(-25deg);
}
.img-menu li a:hover .cinta span,
.img-menu li a:active .cinta span {
    min-width: .6em;
    opacity: 1;
}
.img-menu li .cinta {
    opacity: 0;
    font-size: 2.8em;
    letter-spacing: .15em;
    text-align: center;
    width: 140%;
    position: relative;
    background: #d50000;
    color: #FFF;
    font-family: 'BebasNeue',sans-serif;
    top: 39%;
    left: -23%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    padding: .1em;
    
    -webkit-transition: opacity .33s ease-in, -webkit-transform .33s ease-in;
    transition: transform .33s ease-in, opacity .33s ease-in;
    
    -webkit-transform: scale(1.2) rotate(-25deg);
    transform: scale(1.2) rotate(-25deg);
    opacity: 0;
}
.let span {
    -webkit-transition: min-width .33s ease-in, opacity .33s ease-in;
    transition: min-width .33s ease-in, opacity .33s ease-in;
    display: inline-block;
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);      
    min-width: 1em;
    padding: 0 .02em;
    opacity: 0;
}

/**/
.detalle-v .top,
.detalle-v .product-menu.content {
    height: 0 !important;
    opacity: 0;
    overflow: hidden;
}
/**/
.product-menu {
    padding-top: 3vh;
    transition: height .6s linear, opacity .45s linear;
}
.product-menu a {
    display: block;
    overflow: hidden;
    color: #FFF;
    position: relative;
    text-align: center;
    border: 4px solid transparent;
    font-family: 'BebasNeue',sans-serif;
    cursor: pointer;
    background: #181818;
}
.product-menu a:hover img,
.product-menu a:active img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.product-menu .sign {
    display: block;
    position: absolute;
    font-size: 1.288em;

    padding: .52em .6em;
    top: 49%;
    left: -10%;
    background: #b30613;
    margin: -13px -33px;
    -webkit-transform: scale(1.2) rotate(-25deg);
    transform: scale(1.2) rotate(-25deg);
    opacity: 0;
    -webkit-transition: opacity .66s linear, -webkit-transform .66s linear;
    transition: opacity .66s linear, transform .66s linear;
    width: 140%;
}
.product-menu a:hover,
.product-menu a:active{
    border-color: #b30613;
}
.product-menu a:hover .sign,
.product-menu a:active .sign{
    opacity: 1;
    -webkit-transform: scale(1) rotate(-25deg);
    transform: scale(1) rotate(-25deg);
}
.product-menu a:hover .sign span,
.product-menu a:active .sign span{
    opacity: 1;
    min-width: .6em;
}
.product-menu .det {
    position: relative;
    z-index: 3;
    padding: .7em;
}
.product-menu .det span {
    display: block;
}
.product-menu .det .product-price {
    color: #b30613;
}
.product-menu .product-descp {
    display: none;
}
/**/
.product {
    padding: 8vh 0 0;
    /*padding: 15vh 0 2em;*/
    letter-spacing: .1em;
    background: #181818;
}
.p-name {
    font-size: 2em;
    letter-spacing: .1em;
    padding-top: 2rem;
}
.p-price {
    font-family: 'BebasNeue',sans-serif;
    font-size: 1.3em;
    color: #b30613;
}
.img-product {
    margin-top: -15vh;
    margin-bottom: -15vh;
}
/**/
.porduct-det {
    font-family: 'BebasNeue',sans-serif;
    padding: 2em 0;
}
.porduct-det li {
    display: inline-block;
    font-size: 3em;
    padding: 0 .15em;
}
.porduct-det li:hover,
.porduct-det li.active{
    color: #b30613;
}
.product-size span {
    font-size: 1.3em;
}
.product-size li {
    cursor: pointer;
}
/**/
.product-descp h3 {
    font-size: 1.3em;
}
.product-descp p {
    font-size: 13px;
}
/**/
.product-cant {
    margin-top: 2rem;
}
.quantity {
    background: #FFF;
    padding: .9em .4em;
    display: inline-block;
    vertical-align: top;
}
.quantity span {
    color: #4d4d4d;
    display: inline-block;
    padding: 0 .7em;
    font-size: .8em;
}
.buy, .btn {
    display: inline-block;
    padding: .95rem 3.4rem;
    background: #b30613;
    color: #FFF;
    font-size: 1.313em;
    margin-left: 0.3rem;
    font-family: 'BebasNeue',sans-serif;
}
.buy:hover, .btn:hover {
    background: #6d050d;
}
.actiongive {
    margin-top: 2em;
    text-align: center;
    opacity: 0;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-animation: give 1.1s 2.5s ease-in-out forwards;
    animation: give 1.1s 2.5s ease-in-out forwards;
}
.exit {
    display: block;
    padding: .5em;
    position: absolute;
    top: -2em;
    right: -2em;
    font-size: 1.3em;
    cursor: pointer;
}
.exit:hover {
    transform: scale(1.1);
    color: #b30613;
}
#donation {
    display: none;
}
.video, #donation.on {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    z-index: 10;
}
.video .content {
    position: relative;
}
.related h4 {    
    font-size: 2.5em;
    color: #c10d19;
    text-align: center;
    letter-spacing: .3em;
    padding: .5em 0 1rem;
}
#customer-register-form {
    max-width: 900px;
    margin: 0 auto;
}
#customer-register-form h1 {
    font-size: 2em;
    margin: -3em 0 1em;
}
.formdonation {
    
}
#amount-options {
    max-width: 600px;
}
#amount-options .titulo {
    font-size: 1.5em;
    padding-bottom: 1em;
}
.datos-texto {
    padding-bottom: 1em;
}
#amount-options .valores {
    text-align: center;
} 
#amount-options .valores li {
    display: inline-block;
    width: calc((33% - 0.75rem) - 8px);
    margin: 0px .5rem 1rem;
    vertical-align: top;
}
label {
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    position: relative;
    line-height: 1;
    
    font-size: 1rem;
    
    background-color: #b1b1b1;
    color: rgb(77, 86, 102);
    
    padding: 1rem;
    
    transition: background-color 0.25s ease 0s;
    
    cursor: pointer
}
label[for|="amountOther"] {
    padding: 1rem .5rem;
}
label.checked{
    background-color: #b30613;
    color: rgb(255, 255, 255);
}
input[type="radio"],
input[type="checkbox"] {
    width: 0px;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
}
input[type="text"],
input[type="number"]{
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
    color: rgb(77, 86, 102);
}
input[type="email"] {
    color: #fff;

    border: 1px solid;
    background: transparent;
    font-size: 21px;
}

.checked input {color: #FFF;}
.checked ::-webkit-input-placeholder {color: #fff;}
.checked ::-moz-placeholder {color: #fff;}
.checked :-ms-input-placeholder {color: #fff;}
.checked :-moz-placeholder {color: #fff;}

::-webkit-input-placeholder {color: rgb(77, 86, 102);}
::-moz-placeholder {color: rgb(77, 86, 102);}
:-ms-input-placeholder {color: rgb(77, 86, 102);}
:-moz-placeholder {color: rgb(77, 86, 102);}

.actioncontinue, .actionmakeit {
    text-align: center;
    position: relative;
}
#submit {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.aclaracion {
    text-align: right;
    font-size: .8em;
    margin-bottom: .2em;
}
.secure{
    color: #5b5b5b;
    font-size: .8em;
    margin-top: .5em;
}
.datos {
    display: none;
}
.fcc {
    width: 320px;
    margin: 0 auto;
}
.fcc a {
    display: block;
    height: 0;
    padding-top: 160px;
    background: url(img/fundacion-colombia-con-memoria.jpg) no-repeat 50% 50%;
    background-size: contain;
    overflow: hidden;
    font-size: .05em;
}
.video-list {
    text-align: center;
    padding-top: 3em;
}
.video-list li {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.video-list span:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px;
    width: 70px;
    height: 70px;
    background: url(img/play.png) no-repeat 50% 50%;
    background-size: contain;
    opacity: 1;
}
.video-list li:hover span:before {
    transform: scale(1.3);
}
.video-list li {
    margin: 0 1rem;
}
.final-links {
    padding-top: 3em;
}
.final-links li{
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 1em;
}
.texto-def {
    width: 90%;
    max-width: 800px;
    padding-top: 3em;
    text-align: center;
    margin: 0 auto;
}
.texto-def p {
    display: block;
    padding-bottom: 1.5em;
}
.infotext .texto-def {
    padding-top: 1em;
}
.eltiempo {
    display: inline-block;
    width: 230px;
    height: 0;
    padding-top: 60px;
    background: url(img/eltiempo.png) no-repeat 50% 50%;
    background-size: contain;
    overflow: hidden;
}
a.pdf {
    display: inline-block;
    padding: .95rem 1.2rem;
    font-size: 1.313em;
    margin-left: 0.3rem;

    color: #FFF;
    -webkit-box-shadow: inset 0 0 0 1px #FFF;
    -moz-box-shadow: inset 0 0 0 1px #FFF;
    box-shadow: inset 0 0 0 1px #FFF;
    font-family: 'BebasNeue',sans-serif;
}
a.pdf:hover {
    background: rgba(255,255,255,.5);
}
.video .content.infotext {
    background: #030303;
    padding: .5em 0 1em;
}
.respuesta {
    width: 90%;
    max-width: 980px;
    text-align: center;
    font-size: 1.3em;
}
@media screen and (orientation: portrait) {
}
/*480*/
@media screen and (min-width: 30em){
	body {text-rendering: optimizeSpeed;}	
}
/*768*/
@media screen and (min-width: 48em){	
}
/*960*/
@media screen and (min-width: 60em){
}
/*1240*/
@media screen and (min-width: 76em){
    .product-descp p {
        max-width: 75%;
    }
}
/*1440*/
@media screen and (min-width: 90em){
    .content {
        max-width: 1480px;
    }
    .nav {
        width: 70%;
    }
    .top {
        /*height: 62vh;*/
    }
    .img-menu li .cinta {
        padding: .23em;
    }
    .narco a {
        width: 164px;
    }
    .top h1:before {
        height: 10px;
        margin-top: -14px;
    }
    #product-content .product.grid {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .video-list span:before{
        width: 120px;
        height: 120px;
        margin: -60px;
    }
}
/*1800*/
@media screen and (min-width: 112em){
    .content {
        max-width: 1680px;
    }
    label {
        font-size: 1.375rem;
    }
    #amount-options {
        max-width: initial;
    }
}
/*1280*/
@media screen and (max-width: 80em){	
}
/*1216*/
@media screen and (max-width: 76em){
    ul.nav {
        width: 100%;
    }
    .actions {
        position: absolute;
        right: 6px;
        top: 14px;
    }
}
/*960*/
@media screen and (max-width: 60em){
    .nav {
        width: 100%;
    }
    .top h1 {
        font-size: 2.5em;
        letter-spacing: .15em;
    }
    .fondo { width: 80px;}
    .fondo:before { width: 83px;}
    .fondo:after {width: 80px;}
    .img-menu li .cinta {
        font-size: 2.5em;
    }
    #amount-options .valores li {
        width: 40%;
    }
}
/*640*/
@media screen and (max-width: 40em){
    header {
        text-align: left;
    }
    ul.nav {
        display: none;
        position: absolute;
        left: 0;
        text-align: center;
        padding-top: 2em;
    }
    #ham {
        display: inline-block;
    }
    ul.nav.active {
        display: block;
    }
    .nav:before {
        content: '';
        display: block;
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 4px;
        left: 0;
        z-index: -1;
        background: #000;      
    }
    .nav li {
        width: 100%;
    }
    .actions li {
        padding: 0 7px;
        border: none;
    }
    .top {
        height: 45vh !important;
        background-size: cover !important;
    }
    .fondo { width: 50px;}
    .fondo:before { width: 63px;}
    .fondo:after {width: 60px;}
    
    .img-menu li .cinta {
        font-size: 1.5em;
    }
    .porduct-det li {
        font-size: 1em;
    }
    .product {
        padding-top: 15vh;
    }
    .p-descp {
        position: relative;
        width: 180%;
        left: -100%;
        font-size: 0.8em;
    }
    .product-cant {
        position: relative;
        width: 200%;
        left: -100%;
    }
    .exit {
        top: -2.5em;
        right: 45%;
        font-size: 2.3em;
    }
    .actiongive {
        margin-top: .3em;
    }
    #amount-options .valores li {
        margin-bottom: 1.2rem;
    }
    .video .content {
        width: 70%;
        padding: 0;
    }
    .ifvid {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    .ifvid iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media screen and (max-width: 40em) and (orientation: portrait){
     .video .content {
        width: 92%;
    }
    .exit {
        right: 38%;
    }
    .actions li.user, .actions li.shop{
        display: none;
    }
}
@media screen and (max-height: 40em) and (orientation: landscape){
    #amount-options .titulo {
        font-size: 1em;
        padding-bottom: .4em;
    }
}
@media screen and (max-width: 30em){
    /*.nav li a { font-size: 1em;}*/
}