@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&family=Roboto:wght@300;400;500;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
    color: #f5f4f0;
    background-color: #1b1b1b;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight:300
}

/* video-header*/

.video-header {
	border-left-width: 50px; border-left-style: solid; border-image: linear-gradient(to bottom, #f5f4ef, #1b1b1b 99%) 1 100%;
                    border-right-width: 50px; border-right-style: solid; background-color: #1b1b1b
}


p {
    font-weight: 300;
}

  .kinema {
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: .66rem;
        text-shadow: 0px 0px 20px rgba(27,27,27,0.8);
    }


.runner {
    font-size: 14px;
    font-weight: 500;
    margin-top: 48px
}

    .main-headline {
        font-size: 60px;
        font-weight: 700;
        line-height: 60px;
        text-shadow: 0px 0px 20px rgba(27,27,27,0.8);
    }



.headline {
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
}

.subheadline {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
}

.paragraph {
    font-size: 17px;
    font-weight: 300;
    line-height: 28px;
}

.testimonio {
	 font-family: 'Roboto Condensed', sans-serif;
	font-size: 19px; line-height: 27px;font-weight: 300; letter-spacing: .08rem;
}

.testimonial {
	 font-family: 'Roboto Condensed', sans-serif;
	font-size: 19px; line-height: 27px;font-weight: 300; letter-spacing: .08rem;
	color: #c5a47e;
    margin-bottom: 16px
}

.marron {
    color: #c5a47e;
}

.rojo {
    color: #ff4142;
}

.fotos {
    mix-blend-mode: lighten;
}

.covid {
    background-image: url(../images/covid.jpg);
    background-size: 66%;
    background-repeat: no-repeat;


}


.films {
    background-image: url(../stills/films-head.jpg);

    background-size: cover;
    background-size: 66%;
    background-repeat: no-repeat;
margin-bottom: 96px

}

.work {
    background-image: url(../stills/work-head.jpg);

    background-size: cover;
    background-size: 66%;
    background-repeat: no-repeat;
margin-bottom: 96px

}

.work-head {
 background-image: url(../stills/work-head.jpg);
 background-size: cover;
margin-bottom: 96px
}

.tvshows {
    background-image: url(../stills/tvshows-head.jpg);
background-position: center left;
    margin-bottom: 96px;
    background-size: cover;
    background-size: 66%;
    background-repeat: no-repeat;
margin-bottom: 96px

}

.tvshows-head {
 background-image: url(../stills/tvshows-head.jpg);
 background-size: cover;
margin-bottom: 96px
}


.outline {
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 2px;
    color: #1b1b1b;
    -webkit-text-stroke: 1px #f5f4f0;
    text-stroke: 1px #f5f4f0;
    -webkit-background-clip: text;
}

a:hover {
    color: #c5a47e;
}

li {
    text-transform: uppercase;
}

.barra {
    border-left: 1px solid #c5a47e;
    padding-left: 17px;
    text-transform: uppercase;
}

.vlt-stroke-text {
	font-size: 40px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    -webkit-text-stroke-color: currentColor;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
}

.vlt-stroke-text a {
    -webkit-transition: background-position .5s;
    transition: background-position .5s;
    color: inherit;
    background-image: -webkit-gradient(linear,right top,left top,from(currentColor),color-stop(50%,currentColor),color-stop(50%,transparent));
    background-image: -webkit-linear-gradient(right,currentColor 0,currentColor 50%,transparent 50%);
    background-image: linear-gradient(to left,currentColor 0,currentColor 50%,transparent 50%);
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200%;
}

.vlt-stroke-text a:hover {
    color: rgba(255, 65, 66,.7);
    background-position: -100% 0;
}

/* video btn 

.animated-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    background: #ff3f3f;
    position: relative;
}

.animated-btn::before, .animated-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(255, 63, 63, 0.8);
    animation: ripple-1 2s infinite ease-in-out;
    z-index: -1;
}

.animated-btn::after {
    background: rgba(255, 63, 63, 0.6);
    animation: ripple-2 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes ripple-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}
*/

    /*
grid-bloque
*/

    .grid-bloque {
        /*  min-height: 100vh;*/
        background-size: cover;
        background-position: 50%;
        padding: 24px;
        padding-bottom: 0px;
        position: relative;
        overflow: hidden;
        background: #1a1a1a;
        color: #fff;
        width: 100%
    }

    .grid-bloque__image {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: 50%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        transform: scale(1);
        transition: transform 1s, opacity 0.35s;
        opacity: 0;
    }

    .grid-bloque__image_active {
        opacity: 1;
        transform: scale(1.03);
    }

    .grid-bloque__content {
        position: relative;
        z-index: 2;
    }

    .grid-bloque__column {
        margin-bottom: 30px;
        display: -ms-flexbox;
        display: flex;
    }

    .grid-bloque__column a:hover {
        text-decoration: none;
        color: #fff; 
    }

    .grid-bloque__item {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: end;
        align-items: flex-end;
        border: 1px solid rgba(255, 255, 255, 0.5);
        width: 100%;
        text-decoration: none;
        color: currentColor;
        padding: 80px 30px 32px;
        transition: all 0.3s;
        background: rgba(242, 74, 0, 0);
        min-height: 256px;
        position: relative;
    }

    .grid-bloque__item_active,
    .grid-bloque__item:hover {
        background: rgba(255, 65, 66,.7);
        border-color: rgba(255, 65, 66,.9);

    }

    .grid-bloque__year {

        font-size: 30px;
        line-height: 1;
        position: absolute;
        right: 30px;
        top: 27px;
    }

    .grid-bloque__subtitle {
        display: block;
        margin-bottom: 4px;
    }

    .grid-bloque__title {
        display: block;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
    }

 header {
        position: relative;
        background-color: #f5f4ef;
        height: 75vh;
        min-height: 25rem;
        width: 100%;
        overflow: hidden;
        max-height: 720px;
    }

    header video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    header .container {
        position: relative;
        z-index: 2;
    }

    header .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0;
        z-index: 1;
    }

    .navbar-light .navbar-brand {
        color: #282828;
    }

    @media (pointer: coarse) and (hover: none) {
        header {
            background: url('../images/911.png') black no-repeat center center scroll;
border: none;
        }

        .video-header {
        	border: none;
        }

        header video {
            display: none;

        }
    }

        hr {
        border-top: 1px solid #f5f4f0;
    }


    .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #1a1a1a;
    background-clip: padding-box;
    border: 1px solid #c5a47e;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.btn-outline-light {
    color:  #c5a47e;
    border-color:  #c5a47e;
}

.btn-outline-light:hover {
    color: #1a1a1a;
    background-color: #c5a47e;
    border-color: #c5a47e;
}


    /* --- hopefully this is in your framework --- */
    * {
        box-sizing: border-box;
    }

    .promo__button {
        display: inline-block;
        overflow: hidden;
        position: relative;
        width: 220px;
        height: 50px;
        background: transparent;
        color: #ff4142;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 18px
    }

    .series_reel {
        width: 190px;
    }

    .play_icon {
        height: 20px!important; margin-top: -4px; margin-right: 4px
    }

    /* --- text --- */

    .promo__button span {
        position: absolute;
        display: inline-block;
        white-space: nowrap;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: TEXT-IN 0.5s forwards;
    }

    .promo__button:hover span {
        animation: TEXT-OUT 0.5s forwards;
    }

    /* --- arrow --- */

    .promo__button::before {
        position: absolute;
        display: inline-block;
        height: 2px;
        background: #fff;
        content: " ";
        top: 50%;
        animation: LINE-OUT 1s forwards;
    }

    .promo__button::after {
        position: absolute;
        display: inline-block;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        content: " ";
        top: 50%;
        right: 30%;
        margin-right: -5px;
        margin-top: 1px;
        transform-origin: center;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg);
        animation: ARROWHEAD-OUT 1s forwards;
    }

    .promo__button:hover::before {
        animation: LINE-IN 1s forwards;
    }

    .promo__button:hover::after {
        animation: ARROWHEAD-IN 1s forwards;
    }

    /* --- animations --- */

    @-webkit-keyframes TEXT-IN {
        0% {
            margin-left: -30px;
            opacity: 0;
        }

        100% {
            margin-left: 0;
            opacity: 1;
        }
    }

    @-webkit-keyframes TEXT-OUT {
        0% {
            margin-left: 0;
            opacity: 1;
        }

        100% {
            margin-left: 30px;
            opacity: 0;
        }
    }

    @-webkit-keyframes LINE-IN {
        0% {
            left: 0;
            right: 100%;
        }

        50% {
            left: 0;
            right: 30%;
        }

        100% {
            left: 30%;
            right: 30%;
        }
    }

    @-webkit-keyframes LINE-OUT {
        0% {
            width: 40%;
            transform: translateX(-50%);
            left: 50%;
        }

        100% {
            width: 40%;
            transform: translateX(100%);
            left: 100%;
        }
    }

    @-webkit-keyframes ARROWHEAD-IN {
        60% {
            width: 0;
            height: 0;
            opacity: 0;
        }

        65% {
            width: 0;
            height: 0;
            opacity: 1;
        }

        100% {
            height: 10px;
            width: 10px;
            opacity: 1;
        }
    }

    @-webkit-keyframes ARROWHEAD-OUT {
        0% {
            right: 30%;
            height: 10px;
            width: 10px;
            opacity: 1;
        }

        100% {
            right: -100%;
            height: 10px;
            width: 10px;
            opacity: 1;
        }
    }


/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}



    .modal-dialog {
        max-width: 1440px;
        margin: 30px auto;
    }



    .modal-body {
        position: relative;
        padding: 0px;
    }

    .close {
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 999;
        font-size: 2rem;
        font-weight: normal;
        color: #fff;
        opacity: 1;
    }

    .modal {
        background-color: black !important;
    }

    .modal-body {
        background-color: #000 !important;
        color: white
    }



    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
        background: #ff4142;
        border: 0;

    }

    .active {
        border: none !important;

    }

    label {
        color: #c5a47e;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 300;
        margin-bottom: 4px
    }

    .btn-outline-light {
        color: #c5a47e;
        border-color: #c5a47e;
        font-weight: 300;
    }


    a {
        color: #ff4142
    }



    .btn-danger.focus,
    .btn-danger:focus {
        color: #fff;
        background-color: #1b1b1b;
        border-color: #1b1b1b;
        box-shadow: none;
    }

    .modal-dialog {
        max-width: 1440px;
        margin: 30px auto;
    }



    .modal-body {
        position: relative;
        padding: 0px;
    }

    .close {
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 999;
        font-size: 2rem;
        font-weight: normal;
        color: #fff;
        opacity: 1;
    }

    .modal {
        background-color: black !important;
    }

    .modal-body {
        background-color: #000 !important;
        color: white
    }



    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
        background: #ff4142;
        border: 0;

    }

    .active {
        border: none !important;

    }

    label {
        color: #c5a47e;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 300;
        margin-bottom: 4px
    }

    .btn-outline-light {
        color: #c5a47e;
        border-color: #c5a47e;
        font-weight: 300;
    }

    .card-play:hover {
        background: rgba(255, 65, 66, .9);
    }

    .card-play {
        background: #1b1b1b;
        border: none;
    }

    .card-videos {
        background-color: #1b1b1b;
        margin-bottom: 24px
    }



    .card-videos:hover {
        background: #1b1b1b;
        /*border-color: rgba(255, 65, 66,.9);*/

        border-color: #1b1b1b;
    }

    .zoom {
        padding: 50px;
        background-color: green;
        transition: transform .2s;
        /* Animation */
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .zoom:hover {
        transform: scale(1.5);
        /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

    a:hover {
        text-decoration: none;
    }

    .btn-danger {
        background-color: #1b1b1b;
        border-color: #1b1b1b;
    }

    .btn-danger:hover {
        background-color: #ff4142;
        border-color: #ff4142;
        color: #f5f4f0
    }

    .ico-play {
        height: 17px;
    }


    .negro {
        color: #1b1b1b;
    }

    .w100 {
        width: 100%
    }

   




.card-body{
     transform: scale(1);
    -webkit-transition: all .3s;   
    -moz-transition: all .3s;
    transition: all .3s;
}
    .card-body:hover {
    transform: scale(1.025);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    }