@font-face {
    font-family: OpenSans;
    src: url('../fonts/IcoMoon.woff'), url('../fonts/OpenSans-Bold'), url('../fonts/OpenSans-BoldItalic.ttf'),
    url('../fonts/opensans-bold-webfont.eot'), url('../fonts/opensans-bold-webfont.ttf'),
    url('../fonts/opensans-bold-webfont.woff'), url('../fonts/OpenSans-ExtraBold.ttf'), 
    url('../fonts/OpenSans-ExtraBoldItalic.ttf'), url('../fonts/opensans-extrabold-webfont.eot'),
    url('../fonts/opensans-extrabold-webfont.ttf'), url('../fonts/opensans-extrabold-webfont.woff')
    url('../fonts/OpenSans-Italic.ttf'), url('../fonts/OpenSans-Light.ttf'),
    url('../fonts/OpenSans-LightItalic.ttf'), url('../fonts/opensans-light-webfont.eof'),
    url('../fonts/opensans-light-webfont.ttf'), url('../fonts/opensans-light-webfont.woff'),
    url('../fonts/OpenSans-Regular.ttf'), url('../fonts/opensans-regular-webfont.eot'),
    url('../fonts/opensans-regular-webfont.ttf'), url('../fonts/opensans-regular-webfont.woff'),
    url('../fonts/OpenSans-SemiBold.ttf'), url('../fonts/OpenSans-SemiBoldItalic.ttf');
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Open Sans';
    box-sizing: border-box;
}

body {
    width: 100%;
    /*background-color: #ccc;*/
    display: flex;
    flex-flow: column nowrap;
}



input {
    display: none;
}

.header-container {
    margin: auto;
    top: 0px;
    width: 100%;
    height: 650px;

    display: flex;
    flex-flow: column nowrap;
    
}

/*-----------------header label---------------*/

.header-container label {
    display: none;
    margin: auto ;
    width: 53px;
    height: 53px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 100%;
}



header label:hover {
    cursor: pointer;
    background: rgba(10, 124, 139, 0.3);
    transition: all 0.5s;
}



/*-----------------fin header label---------------*/

/*-----------------logo---------------*/


.logo {
    position: fixed;
    width: 210px;
    height: auto;
   /* line-height: 140px;*/
    margin: 10px;
    z-index: 6;
    /*border: 1px solid white;*/

}

.logo img {
    width: 200px;
}

/*-----------------fin logo---------------*/

/*-----------------HEADER NAV---------------*/

.header-nav {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
    margin-top: 0px;
    background-color:rgba(0,152,155,0.6);
    z-index: 3;
    
}

.header-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;

}

.header-nav ul li {
    display: block;
    width: 100%;
    height: 74px;
    padding: 10px;
    text-align: center;
    color: white;
    border-right: 1px solid white;
    line-height: 50px;
}

.header-nav ul li a {
    color:white;
}

.header-nav ul li a:hover {
    background-color: rgba(34, 34, 34, 0.3);
    color: white;
    transition: all 0.5s;
}

.header-nav ul li ul li {
    display: flex;
    justify-content: center;
    width: 230%;
    flex-flow: column nowrap;
    height: 74px;
    padding: 10px;
    top: 14px;
    left: 55%;
    text-align: center;
    color: white;
    border-bottom: 1px solid white;
    background-color:rgba(0,152,155,0.4);
    line-height: 30px;
}


.menu {
    min-width: 160px;
    height: auto;
    display: none;
    
    
}

.menu a {
    color: #fff;
}

.menu:hover {
    background: rgb(3, 74, 77);
    transition: all 0.3s ease;
}



.submenu {
        display: none;
        position: relative;
        line-height: 32px;
        background-color:rgba(0,152,155,0.4);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;

}


.submenu:hover {
    background: linear-gradient( #ccc, rgba(0,152,155,0.4));
    color: #fff;
    
    transition: all .5s ease;
}

.header-nav ul li ul {
    display: none;
}

.header-nav ul li:hover ul{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    transition: all 0.3s ease;
}

.select {
    background-color:rgb(28, 167, 170) ;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}

/*-----------------FIN HEADER NAV---------------*/

/*-----------------header SLIDE---------------*/

.slide {
    display: flex;
    position: absolute;
    width: 100%;
    top: 0px;
    height: 650px;
    overflow: hidden;
    z-index: 0;
}

#slider {
    position: absolute;
    width: 100%;
    height: auto;
    display: flex;
    top: 0px;
    left: 0px;
}

.slide img {
    width: 100%;
    height: auto;
    display: flex;
    top: 0px;
    left: 0px;
}

.slide-header {
    /*position: absolute;*/
    width:100%;
    height: 650px;
    top: 0px;
    overflow: hidden;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid black;*/
    transition: all 3s ease;

}

.slider-header {
    width: 100%;
    height: auto;
    display: flex;
    top: 0px;
    left: 0px;
}

.slider-header img {
    width:1920px;
    height: auto;
    display: flex;
    top: 0px;
    left: 0px;
    
}


.slider-header-memorias img {
    width: 100%;
    height: auto;
    display: flex;
    top: 0px;
    left: 0px;
}

#slider-header-memorias {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-image: url(../img/MEMORIAS.png); 

    animation: miAnimacion 8s   infinite;
    -webkit-animation: miAnimacion 8s   infinite;
    -moz-animation: miAnimacion 5s  infinite;
    -o-animation: miAnimacion 8s  infinite;
}

#slider-header-ficcion {
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: url(../img/banners_ficcion/01-big.jpg); 
    background-repeat: no-repeat;

   
    animation: miAnimacionficcion 8s   infinite;
    -webkit-animation: miAnimacionficcion 8s   infinite;
    -moz-animation: miAnimacionficcion 5s  infinite;
    -o-animation: miAnimacionficcion 8s  infinite;
}

/*SLIDER AUDIOVISUAL*/
/*SLIDER HEADER AUDIOVISUAL*/
#slider-header-audiovisual {
    position: relative;
    max-width: 800px;
}

/*FIRST ELEMENT TO BE IN BLOCK MODE FOR RESPONSIVNES*/
#slide-first-element {
    display: block;
    width: 100%;
    height: auto;
}

#slide-first-element-2, #slide-first-element-3 {
    position: absolute;
    width:100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
}

/*STYLE IMAGE*/
.slide-audiovisual {
    width:100%;
    border-radius: 20px;
}
/*STYLE TEXT*/
.slide-text {
    position:absolute;
    bottom: 10px;
    background-color: #0042b1bb;
    color: white;
    width:100%;
    text-align:center;
    font-size:1.5rem;
    margin: auto;
}  

/*ANIMATION SETTINGS FOR INDIVIDUAL ELEMENTS*/
#slide-first-element {
    animation: fade-1 10s infinite;
    -webkit-animation:fade-1 10s infinite;
}
#slide-element-2 {
    animation: fade-2 10s infinite;
    -webkit-animation:fade-2 10s infinite;
}
#slide-element-3 {
    animation: fade-3 10s infinite;
    -webkit-animation:fade-3 10s infinite;
}
@keyframes fade-1 {
    0% {opacity: 1;}
    33% {opacity: 0;}
    66% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fade-2 {
    0% {opacity: 0;}
    33% {opacity: 1;}
    66% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade-3 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 0;}
}


/*----------------AUTO SLIDER FICCION--------------------*/


@keyframes miAnimacionficcion{

    0% { background-image:url(../img/banners_ficcion/01-big.jpg);
    }

    25% { background-image: url(../img/banners_ficcion/02-big.jpg);
    }

    50% { background-image: url(../img/banners_ficcion/03-big.jpg);
    }

    75% { background-image: url(../img/banners_ficcion/05-big.jpg);
    }

    100% { background-image: url(../img/banners_ficcion/01-big.jpg );
    }
}

@-webkit-keyframes miAnimacionficcion{

    0% { background-image:url(../img/banners_ficcion/01-big.jpg);
    }

    25% { background-image: url(../img/banners_ficcion/02-big.jpg);
    }

    50% { background-image: url(../img/banners_ficcion/03-big.jpg);
    }

    75% { background-image: url(../img/banners_ficcion/05-big.jpg);
    }

    100% { background-image: url(../img/banners_ficcion/01-big.jpg );
    }
}
@-moz-keyframes miAnimacionficcion{

    0% { background-image:url(../img/banners_ficcion/01-big.jpg);
    }

    25% { background-image: url(../img/banners_ficcion/02-big.jpg);
    }

    50% { background-image: url(../img/banners_ficcion/03-big.jpg);
    }

    75% { background-image: url(../img/banners_ficcion/05-big.jpg);
    }

    100% { background-image: url(../img/banners_ficcion/01-big.jpg );
    }
}
@-o-keyframes miAnimacionficcion{

    0% { background-image:url(../img/banners_ficcion/01-big.jpg);
    }

    25% { background-image: url(../img/banners_ficcion/02-big.jpg);
    }

    50% { background-image: url(../img/banners_ficcion/03-big.jpg);
    }

    75% { background-image: url(../img/banners_ficcion/05-big.jpg);
    }

    100% { background-image: url(../img/banners_ficcion/01-big.jpg );
    }
}

/*-----------------FIN header SLIDE---------------*/

/*----------------AUTO SLIDER CLASICOS--------------------*/


@keyframes miAnimacion{

    0% { background-image:url(../img/MEMORIAS.png);
    }

    25% { background-image: url(../img/memorias-gallery/memorias_big_02.jpg);
    }

    50% { background-image: url(../img/memorias-gallery/memorias_big_03.jpg);
    }

    75% { background-image: url(../img/memorias-gallery/memorias_big_06.jpg);
    }

    100% { background-image: url(../img/MEMORIAS.png );
    }
}

@-webkit-keyframes miAnimacion{

    0% { background-image:url(../img/MEMORIAS.png);
    }

    25% { background-image: url(../img/memorias-gallery/memorias_big_02.jpg);
    }

    50% { background-image: url(../img/memorias-gallery/memorias_big_03.jpg);
    }

    75% { background-image: url(../img/memorias-gallery/memorias_big_06.jpg);
    }

    100% { background-image: url(../img/MEMORIAS.png );
    }
}
@-moz-keyframes miAnimacion{

    0% { background-image:url(../img/MEMORIAS.png);
    }

    25% { background-image: url(../img/memorias-gallery/memorias_big_02.jpg);
    }

    50% { background-image: url(../img/memorias-gallery/memorias_big_03.jpg);
    }

    75% { background-image: url(../img/memorias-gallery/memorias_big_06.jpg);
    }

    100% { background-image: url(../img/MEMORIAS.png );
    }
}
@-o-keyframes miAnimacion{

    0% { background-image:url(../img/MEMORIAS.png);
    }

    25% { background-image: url(../img/memorias-gallery/memorias_big_02.jpg);
    }

    50% { background-image: url(../img/memorias-gallery/memorias_big_03.jpg);
    }

    75% { background-image: url(../img/memorias-gallery/memorias_big_06.jpg);
    }

    100% { background-image: url(../img/MEMORIAS.png );
    }
}

/*-----------------FIN header SLIDE---------------*/

/*-----------------HOME-------------------*/


.nav-section {
    margin: 0px;
    padding: 0px;
    width: 100%;
    /*background-color:rgba(34, 34, 34, 0.3);*/

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    
}
.nav-section-menu {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}

.nav-section ul {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    
}

.nav-section ul li  {
    padding: 50px;
    width: 33.3%;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
    /*border: 1px solid black;*/
    /*background-color: rgba(10, 124, 139, 0.3);*/

    
}

.nav-section ul li h1 {
    text-align: center;
    padding: 5px;
    color: rgb(0, 170, 192);
    font-family: 'Open Sans';
    font-size: 24px;

    }

.nav-section ul li h2 {
    text-align: center;
    padding: 5px;
    color: rgb(92, 92, 92);
    font-family: 'Open Sans';
    font-size: 24px;
    font-weight: lighter;
    
    }

    .nav-section ul li h2 a {
        text-align: center;
        padding: 5px;
        color: rgb(151, 151, 151);
        font-family: 'Open Sans';
        font-size: 24px;
        font-weight: lighter;
        
        }

    .Btn-produccion {
        margin: auto;
        margin-top: 10px;
        width: 150px;
        height: 150px;
        border-radius: 100%;
        border: 10px solid rgb(0, 96, 109);
        background-color: slateblue;
        overflow: hidden;
        

        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        text-align: center;
    }
    .Btn-produccion a:hover  {
        border:8px solid rgb(9, 177, 199);
        background-color: rgb(3, 74, 77);
        transform:scale(1.1);
        transition: all 0.3s;
    }
    .Btn-produccion:hover  {
         border:8px solid rgb(9, 177, 199);
         background-color: rgb(3, 74, 77);
         transform:scale(1.1);
         transition: all 0.3s;
    }
    .Btn-produccion:hover img {
        -webkit-transform:scale(1.3);
         transform:scale(1.3);
         opacity: 0.5;
         filter: sepia(80%);
         /*filter: blur(5px);*/
         transition: all 1s;
    }

    
    .line {
        width: 100%;
        height: 100px;
        align-items: center;
        position: relative;
        top: 50%;
    }

    .Btn-produccion a  {
        justify-content: center;
        align-items: center;
        margin-top: 0px;
    }
    .Btn-produccion img  {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
    }

    .Btn-up {
        position: fixed;
        width: 60px;
        height:60px;
        border-radius: 10px;
        /*top: 50%;*/
        bottom: 0px;
        background-color: rgba(0,152,155,0.4);
        right: 0px;
        /*border: 1px solid black;*/
    }

    /*----------------FOOTER--------------------*/

    .footer-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: start;
        background-color: rgb(3, 74, 77);
    }

    .footer-column {
        width:33.3%;
        height: auto;
        padding: 20px;
        /*border: 1px solid black;*/
        box-sizing: border-box;
        color: whitesmoke;

        display: flex;
        justify-content: left;
        align-items: flex-start;
    }

    .footer-credits {
        width: 100%;
        height: 100px;
        color: whitesmoke;
        border-top: 1px solid rgb(255, 255, 255);
        text-align: center;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-column ul {
        margin: auto;
    text-align: center;
    color: white;
    font-size: 12px;
    list-style: none;
    display: inline-block;
    
    }

    .footer-column ul li{
        list-style: none;
        color: white;
        margin: 10px;
        justify-content: center;
    align-items: center;
    }

    .footer-column ul li a{
        list-style: none;
        color: white;
        
    }

    .footer-column ul li img{
        width: 30px;
        height: 30px;
        margin-left: 10px;
        border-radius: 100%;
    }

    .footer-column p {
        width: 100%;
        text-align: center;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    }


    /*----------------CATALOGO--------------------------*/
    .catalogo-container {
        width: 100%;
        height: auto;
        margin-top: 185px;
        margin-bottom: 50px;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
    }

    .catalogo-container-box {
        width: 100%;

        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    .container-items {
        position: relative;
        top: -172px;
        width: 30%;
        height: auto;
        margin: 5px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid rgb(0, 170, 192);
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: rgb(0, 170, 192);
    }

     
    .container-Btn {
        position: relative;
        top: -145px;
        width: 145px;
        height: 145px;
        border-radius: 100%;
        border: 8px solid rgb(0, 94, 110);
        z-index: 2;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;

    }

    .container-Btn img{
        width: 100%;
        height: auto;

    }

    .container-Btn:hover  {
        border:8px solid rgb(9, 177, 199);
        background-color: rgb(3, 74, 77);
        transform:scale(1.1);
        transition: all 0.3s;
   }
   .container-Btn:hover img {
       -webkit-transform:scale(1.3);
        transform:scale(1.3);
        opacity: 0.5;
        filter: sepia(80%);
        /*filter: blur(5px);*/
        transition: all 1s;
   }

    /*.container-title {
        width: 100%;
        height: 100px;
        margin-top: -40px;
        font-family: 'Open Sans', sans-serif;
        font-size: 4vh;
        font-weight: lighter;
        color: white;
        text-align:center;
        background-color: rgba(0, 97, 98, 0.4);

        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }*/


    .container-img {
        position: absolute;
        width: 100%;
        height: 300px;
        z-index: 0;
       
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .container-img img{
        position: absolute;
        top: -100px;
        width: 100%;
        height: auto;
        z-index: 0;
       
        
    }
    

    /*------------------Section Clasicos------------*/
    
    .clasicos-Btn {
        position: relative;
        top: -65px;
        width: 130px;
        height: 130px;
        border-radius: 100%;
        border:8px solid rgb(0, 96, 109);
        overflow: hidden;

    }

    .clasicos-Btn:hover img {
        opacity: 0.5;
        -webkit-transform:scale(1.1);
         transform:scale(1.1);
         filter: sepia(80%);
        transition: all 0.8s;
    }
    .clasicos-Btn:hover  {
        border:8px solid rgb(9, 177, 199);
        background-color: rgb(3, 74, 77);
        transform:scale(1.1);
        transition: all 0.3s;
    }
    
    .title_clasicos {
        width: 100%;
        height: auto;
        /*border: 1px solid black;*/
        display: flex;
        flex-flow: column nowrap ;
        justify-content: center;
        align-items: center;
    }

    .clasicos-Btn-title {
        margin-top: 0px;
        top: -55px;
        height: 2px;
        position: relative;
        color: rgb(0, 170, 192);
        text-align: center;

    }

    .clasicos-box {
        display: flex;
        flex-flow:row wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }


    .clasicos {
        margin: 20px;
        width: 265px;
        height: 494px;
        overflow: hidden;
        display: flex;
        flex-flow:row wrap;
    }
    .clasicos:hover  {
        -webkit-transform:scale(1.1);
         transform:scale(1.1);
         transition: all 0.8s;
         font-weight: bold;
         color:rgb(0, 94, 110);
         
    }
    .clasicos:hover img {
        
         filter:sepia(80%);
         transition: all 0.8s;
        
    }

    .clasicos img {
        height: 375px;
        width: auto;
        justify-content: center;
        align-items:center;
        border: 1px solid rgb(3, 74, 77);
        border-radius: 5px;
        background-color:rgb(9, 96, 107);
    }

    .clasicos h2 {
        font-family: 'Open Sans', sans-serif;
        font-size: 24px;
        font-weight: lighter;
        color: darkslategrey;
        width: 100%;
        text-align: left;
        
        display:flex;
        flex-flow: row nowrap;
    }

    .titulo-clasicos {
        text-align: left;
        width: 100%;
        height:75px;
        margin-top: 0px;
        margin-left: 0px;
        padding-left: 10px;
        border-left: 1px solid rgb(0, 94, 110);
        color:rgb(0, 94, 110);
    
        display:flex;
        flex-flow: row wrap;
    }

    .titulo-clasicos:hover h2 {
        font-weight: bold;
        transition: all 0.3s;
    }
    
    
/*-----------------------fin section clasicos------------------*/


/*--------------------CATALOGO DETALLES FICHA TECNICA--------*/

.film-box {
    width: 100%;
    margin: auto;
    max-width: 870px;
    padding: 20px;
    padding-top: 0px;
    height: auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: start;

}



.Cartel-Ficha {
    width: 100%;
    height: auto;
    display: inline-flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items: start;
}

.cartel {
    position: relative;
    width: 100%;
    height: auto;
    /*border: 1px solid black;*/
    text-align:right;
    padding-right:10px;
}

.cartel img{
    width: 400px;
    height: auto;

    flex-flow:row nowrap;
    border: 1px solid black;
    
}

.ficha-tecnica {
    width: 100%;
    height: auto;
    padding: 10px;
    /*border: 1px solid black;*/
    font-size: 24px;
    font-weight: lighter;
    border-left: 2px solid rgb(0, 170, 192);
    align-self: stretch;

}
.ficha-tecnica strong, em {
    color: rgb(0, 170, 192);
}

.ficha-tecnica p {
    font-size: 18px;
}


.divisor {
    width: 5px;
    height: 100%;
    color: rgb(0, 170, 192);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.sinopsis-box {
    width: 100%;
    max-width: 870px;
    height: auto;
    padding: 20px;
    margin: auto;
    margin-top: 20px;
    /*border: 1px solid black;*/
    border-top: 2px solid rgb(0, 170, 192);
    text-align:justify;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;

}

.sinopsis-esp {
    width: 100%;
    max-width: 870px;
    height: auto;
    padding: 20px;
    margin: auto;
    /*border: 1px solid black;*/
    text-align:justify;
    border-bottom: 1px solid rgb(0, 170, 192);

    display: flex;
    flex-flow: column wrap;
    justify-content: center;

}

.sinopsis-esp strong {
    font-size: 28px;
    border-bottom: 5px solid rgb(0, 170, 192);
}

.sinopsis-ing strong {
    font-size: 28px;
    border-bottom: 5px solid rgb(0, 170, 192);
}

.sinopsis-ing {
    width: 100%;
    max-width: 870px;
    height: auto;
    padding: 20px;
    margin: auto;
    /*border: 1px solid black;*/
    text-align:justify;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;

}

.premios-box {
    width: 100%;
    max-width: 870px;
    height: auto;
    padding: 40px;
    margin: auto;
    margin-top: 20px;
    text-align:justify;
    border-top: 2px solid rgb(0, 170, 192);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.premios-title {
    font-size: 28px;
    border-bottom: 5px solid rgb(0, 170, 192);
}


.contactos {
    width: 100%;
    max-width: 870px;
    height: auto;
   /* border: 1px solid black;*/
    padding: 20px 40px 20px 40px;
    margin: auto;
    text-align:justify;
    border-top: 2px solid rgb(0, 170, 192);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.contactos p {
    text-align:left;
    display: inline-block;
    flex-flow: row wrap;
    justify-content: center;
    align-items: left;
}


.redes-box {

    width: 100%;
    max-width: 870px;
    height: auto;
    /*border: 1px solid black;*/
    padding: 20px 40px 20px 40px;
    margin: auto;
    text-align:justify;
    border-top: 2px solid rgb(0, 170, 192);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.redes-box img{

    width: 50px;
    height: auto;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.redes {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    /*border: 1px solid black;*/
    background-color: white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}

.sitios-interes {
    width: 100%;
    height: auto;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}


.logos-sitios-interes {
    
    width: 120px;
    height: auto;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
   justify-content:center ;
   align-items: center;
   /*border: 1px solid black;*/

}

.sitios-interes img {
width: 120px;
height:auto;
/*border: 1px solid black;*/
}

.sitios-interes p {
    font-size: 15px;
    height:auto;
    text-align: center;
    margin: auto;
    color:white;
    display: flex;
    flex-flow: column nowrap;
    /*border: 1px solid black;*/
    }


/*--------------------FIN CATALOGO DETALLES FICHA TECNICA--------*/




/*---------------------MEDIAS QUERYS-----------------------------*/

/*-------------------@media max-width: 997px---------------------*/

@media all and (max-width: 997px) {

    .header-container {
        /*position: relative;*/
       height: auto;
        margin-top: 0px;

    }

    .logo {
        position: fixed;
        top: 5px;
        width: 80px;
        height: 80px;
        margin-left: 45%;
        border-radius: 100%;
        border: 1px solid white;
        overflow: hidden;
        transition: all ease-in 0.5s;
        text-align: center;  
        z-index: 6;  
    }
    
    .header-container label {
            display: flex;
            position: fixed;
            margin-top: 107px;
            margin-left: 47%;
            z-index: 6;
            justify-content: center;
            align-items: center;
        }

        
        .header-nav {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 182px;
            z-index: 3;
            background-color: rgba(9, 96, 107, 0.6);
            transition: all .5s;
        }
    

    .header-nav ul {
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -862px;
        width: 100%;
    }


    .header-nav ul li {
        display: block;
        border-top: 1px solid white;
        background-color: rgba(9, 96, 107, 0.6);
        transition: all .5s;
        }
    
    #menu-nav-icon:checked ~ .header-nav ul {
        margin-top: 480px;
        transition: all 1s;
    }

    .header-nav ul li ul li {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        flex-flow: column nowrap;
        height: 74px;
        padding: 10px;
        top: 0px;
        left: 0px;
        text-align: center;
        color: white;
        border-bottom: 1px solid white;
        background-color:rgba(0,152,155,0.4);
        line-height: 30px;
    }

    .submenu {
        display: none;
        position: relative;
        line-height: 32px;
        background-color:rgba(0,152,155,0.4);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;

}


.submenu:hover {
    background: linear-gradient( #ccc, rgba(0,152,155,0.4));
    color: #fff;
    
    transition: all .5s ease;
}

.header-nav ul li ul {
    display: none;
}

.header-nav ul li:hover ul{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    transition: all 0.3s ease;
}


    /*-----------------------------------------*/

    .logo img {
        width: 260px;
    }

    .slide {
        display: flex;
        position: absolute;
        width:100%;
        top: 0px;
        height: 500px;
         overflow: hidden;
         z-index: 0;
    }
    
    
    
    #slider img {
        position: absolute;
        width: 150%;
        top: -20%;
        margin-left: -250px;
        transition: all 1s;
    }

    .nav-section {
        width: 100%;
        flex-direction:column wrap;
        justify-content: center;
        top: 0px;

    }

    .nav-section-menu {
        width: 100%;
        flex-direction:column wrap;
        justify-content: center;

    }

    .nav-section ul {
        width: 100%;
        flex-direction:column ;
        justify-content: center;
        
    }

    .nav-section ul li {
        width: 100%;
        text-align: center;
    }

    .clasicos-box {
        display: flex;
        flex-flow:column wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        /*border: 1px solid black;*/
    }


    .container-img img{
        position: absolute;
        top: 0px;
        width: 100%;
        height: auto;
        z-index: 0;
       
        
    }

    #slider-header-ficcion img{
        position: absolute;
        width: 100%;
        height: auto;

}



/*-------------------@media max-width: 768px---------------------*/

@media all and (max-width: 768px) {

    .header-container {
        /*position: relative;*/
        height: auto;
        margin-top: 0px;

    }

    .logo {
        position: fixed;
        top: 5px;
        width: 80px;
        height: 80px;
        margin-left: 44.1%;
        border-radius: 100%;
        border: 1px solid white;
        overflow: hidden;
        transition: all ease-in 0.5s;
        text-align: center;  
        z-index: 6;  
    }
    
    .header-container label {
            display: flex;
            position: fixed;
            margin-top: 107px;
            margin-left: 47%;
            z-index: 6;
            justify-content: center;
            align-items: center;
        }

        

        .header-nav {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 182px;
            z-index: 3;
            background-color: rgba(9, 96, 107, 0.6);
            transition: all .5s;
        }
    

    .header-nav ul {
        position: absolute;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -862px;
        width: 100%;
    }


    .header-nav ul li {
        display: block;
        border-top: 1px solid white;
        background-color: rgba(9, 96, 107, 0.6);
        }

       

        .slide-header {
            margin-top: 0px;
        }
    
        #slider-header-memorias {
            position: absolute;
            width: 100%;
            height: 95vh;
        }


    #menu-nav-icon:checked ~ .header-nav ul {
        margin-top: 380px;
        transition: all 1s;
    }

    .Cartel-Ficha {
        width: 100%;
        height: auto;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: start;
    }
    
    .cartel {
        position: relative;
        margin: auto;
        width: 100%;
        display: flex;
        margin-top: 0px;
        justify-content: center;
        align-items: center;
        height: auto;
        text-align: right;
        padding-bottom: 10px;
        flex-flow: row wrap;
}
    
    .cartel img {
        width: 100%;
        height: auto;
    }
    
    .ficha-tecnica {
        width: 60%;
        /* max-width: 510px; */
        height: auto;
        padding: 10px;
        /*display: flex;*/
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        /* border: 1px solid black; */
        font-size: 24px;
        font-weight: lighter;
        border-left: 2px solid rgb(0, 170, 192);
        align-self: stretch;
        margin: auto;
    }



       /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    width: 100%;
    background-color: white;
    max-height:400px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

    /*---------------------------------------*/
    
    .logo img {
        width: 260px;
    }


    .slide {
        display: flex;
        position: relative;
        width:100%;
        top: 0px;
        height: 500px;
         overflow: hidden;
         z-index: 0;
    }
    
    #slider {
        position:absolute;
    }
    
    #slider img {
        position: absolute;
        width: 200%;
        top: -20%;
        margin-left: -250px;
        transition: all 1s;
    }

    .nav-section {
        /*position: relative;*/
        flex-flow:column wrap ;
        margin-top: 0px;
    }

    .nav-section-menu {
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-flow: column wrap;
    }
    .nav-section ul {
        flex-direction:column ;
        
    }

    .nav-section ul li {
        width: 100%;
    }

    .container-img img{
        position: absolute;
        top: 0px;
        width: 150%;
        height: auto;
        z-index: 0;
       
        
    }
}
/*-------------------@media max-width: 600px---------------------*/

@media all and (max-width: 600px) {

    .header-container {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 0px;

    }

    .logo {
        position: fixed;
        top: 5px;
        width: 80px;
        height: 80px;
        margin-left: 42.9%;
        border-radius: 100%;
        border: 1px solid white;
        overflow: hidden;
        transition: all ease-in 0.5s;
        text-align: center;  
        z-index: 6;  
    }
    
    .header-container label {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            margin-top: 107px;
            margin-left: 45%;
            z-index: 6;
        }

        
        .header-nav {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 182px;
            z-index: 3;
            background-color: rgba(9, 96, 107, 0.6);
            transition: all .5s;
        }
    

        .header-nav ul {
            /*position: absolute;*/
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            /*margin-top: -862px;*/
            width: 100%;
        }


        .header-nav ul li {
            display: block;
            border-top: 1px solid white;
            background-color: rgba(9, 96, 107, 0.6);
    
            }

           
                
        
        #menu-nav-icon:checked ~ .header-nav ul {
            margin-top: 380px;
            transition: all 1s;
        }
    
                
        .logo img {
            width: 260px;
        }
    

        .slide {
            display: flex;
            /*position: relative;*/
            width:100%;
            top: 0px;
            height: 500px;
            overflow: hidden;
            z-index: 0;
        }
        
        #slider {
            position:absolute;
        }
        
        #slider img {
            position: absolute;
            width: 400%;
            height:auto;
            margin-top: 0px;
            margin-left: -200px;
            transition: all 1s;
        }

        .nav-section {
            /*position: relative;*/
            display: flex;
            flex-flow:column wrap;
        }
    
        .nav-section ul {
            /*position: absolute;*/
            flex-flow:column wrap;
            
        }
    
        .nav-section ul li {
            width: 100%;
        }

        .container-img img{
            position: absolute;
            top: 0px;
            width: auto;
            height: 100%;
            z-index: 0;
                          
        }

        .container-img {
            position: absolute;
            width: 100%;
            height: 360px;
            z-index: 0;
           
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

.Cartel-Ficha {
width: 100%;
height: auto;
display: inline-flex;
flex-flow: column wrap;
justify-content: center;
align-items: start;
}

.cartel {
margin: 20px;
position: relative;
margin: auto;
width: 60%;
display: flex;
justify-content: center;
align-items: center;
height: auto;
text-align: right;
padding-bottom: 10px;
}

.cartel img {
width: 100%;
height: auto;
}

    .footer-box {
        width:100%;
        height: auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        background-color: rgb(3, 74, 77);
}

.footer-column {
    width: 100%;
    height: auto;
    padding: 20px;
    border: 1px solid black;
    box-sizing: border-box;
    color: whitesmoke;
    display: flex;
    justify-content: left;
    align-items: flex-start;
}

}


/*-------------------@media max-width: 320px---------------------*/

    @media all and (max-width: 320px) {

        .header-container {
            position: relative;
            width: 100%;
           height: auto;
            margin-top: 0px;
    
        }
    
        .logo {
            position: fixed;
            top: 5px;
            width: 80px;
            height: 80px;
            margin-left: 33.9%;
            border-radius: 100%;
            border: 1px solid white;
            overflow: hidden;
            transition: all ease-in 0.5s;
            text-align: center;  
            z-index: 6;  
        }
        
        .header-container label {
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                margin-top: 107px;
                margin-left: 40%;
                z-index: 6;
            }
    
            
            .header-nav {
                position: fixed;
                top: 0px;
                width: 100%;
                height: 182px;
                z-index: 3;
                background-color: rgba(9, 96, 107, 0.6);
                transition: all .5s;
            }
        
    
            .header-nav ul {
                /*position: absolute;*/
                flex-flow: column wrap;
                justify-content: center;
                align-items: center;
                /*margin-top: -862px;*/
                width: 100%;
            }
    
    
            .header-nav ul li {
                display: block;
                border-top: 1px solid white;
                background-color: rgba(9, 96, 107, 0.6);
        
                }
            
            #menu-nav-icon:checked ~ .header-nav ul {
                margin-top: 380px;
                transition: all 1s;
            }
        
                    
            .logo img {
                width: 260px;
            }
        
    
            .slide {
                display: flex;
                /*position: relative;*/
                width:100%;
                top: 0px;
                height: 200px;
                overflow: hidden;
                z-index: 0;
            }
            
            #slider {
                position:absolute;
            }
            
            #slider img {
                position: absolute;
                width: 400%;
                height:auto;
                margin-top: 0px;
                margin-left: -200px;
                transition: all 1s;
            }

            .nav-section {
                /*position: relative;*/
                display: flex;
                flex-flow:column wrap;
            }
        
            .nav-section ul {
                /*position: absolute;*/
                flex-flow:column wrap;
                
            }
        
            .nav-section ul li {
                width: 100%;
            }

            .container-img img{
                position: absolute;
                top: 0px;
                width: auto;
                height: 100%;
                z-index: 0;
                              
            }

            .container-img {
                position: absolute;
                width: 100%;
                height: 360px;
                z-index: 0;
               
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

.Cartel-Ficha {
    width: 100%;
    height: auto;
    display: inline-flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: start;
}

.cartel {
    margin: 20px;
    position: relative;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    text-align: right;
    padding-bottom: 10px;
}

.cartel img {
    width: 100%;
    height: auto;
}

        .footer-box {
            width: 100%;
            height: auto;
            display: block;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            background-color: rgb(3, 74, 77);
    }

    .footer-column {
        width: 100%;
        height: auto;
        padding: 20px;
        border: 1px solid black;
        box-sizing: border-box;
        color: whitesmoke;
        display: flex;
        justify-content: left;
        align-items: flex-start;
    }

    .ficha-tecnica {
        width: 100%;
        /* max-width: 510px; */
        height: auto;
        padding: 22px;
        /*display: flex;*/
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        /* border: 1px solid black; */
        font-size: 24px;
        font-weight: lighter;
        border-left: 2px solid rgb(0, 170, 192);
        align-self: stretch;
        margin: auto;
    }
    
    .sinopsis-esp, .sinopsis-ing  {
        
        padding: 0px;
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
        
    }
    
    .premios-box  {
        padding: 5px;
    
    }
    
    .header-container {
        width: 100%;
    }
    .film-box {
        width: 100%;
    }
    
    .footer-box {
        width:100%;
    }
    .slide-header img {
        width: 100%;
        height: auto;
    }

}

/*-------------------@media max-width: 218px---------------------*/

@media all and (max-width: 218px) {

    .header-container {
        position: relative;
        width: 100%;
        height: 500px;
        margin-top: 0px;

    }

    .logo {
        position: absolute;
        top: 5px;
        width: 80px;
        height: 80px;
        margin-left: 33.9%;
        border-radius: 100%;
        border: 1px solid white;
        overflow: hidden;
        transition: all ease-in 0.5s;
        text-align: center;  
        z-index: 6;  
    }
    
    .header-container label {
            display: flex;
            justify-content: center;
            align-items: center;
            /*position: absolute;*/
            margin-top: 107px;
            margin-left: 40%;
            z-index: 6;
        }

        
        .header-nav {
            position: absolute;
            top: 0px;
            width: 100%;
            height: 182px;
            z-index: 3;
            background-color: rgba(9, 96, 107, 0.6);
            transition: all .5s;
        }
    

        .header-nav ul {
            /*position: absolute;*/
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            /*margin-top: -862px;*/
            width: 100%;
        }


        .header-nav ul li {
            display: block;
            border-top: 1px solid white;
            background-color: rgba(9, 96, 107, 0.6);
    
            }
        
        #menu-nav-icon:checked ~ .header-nav ul {
            margin-top: 380px;
            transition: all 1s;
        }
    
                
        .logo img {
            width: 260px;
        }
    

        .slide {
            display: flex;
            /*position: relative;*/
            width:100%;
            top: 0px;
            height: 500px;
            overflow: hidden;
            z-index: 0;
        }
        
        #slider {
            position:absolute;
        }
        
        #slider img {
            position: absolute;
            width: 400%;
            height:auto;
            margin-top: 0px;
            margin-left: -200px;
            transition: all 1s;
        }

        .nav-section {
            /*position: relative;*/
            display: flex;
            flex-flow:column wrap;
        }
    
        .nav-section ul {
            /*position: absolute;*/
            flex-flow:column wrap;
            
        }
    
        .nav-section ul li {
            width: 100%;
        }

        .container-img img{
            position: absolute;
            top: 0px;
            width: auto;
            height: 100%;
            z-index: 0;
                          
        }

        .container-img {
            position: absolute;
            width: 100%;
            height: 360px;
            z-index: 0;
           
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .Cartel-Ficha {
        width: 100%;
        height: auto;
        display: inline-flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: start;
        }

        .cartel {
        margin: 20px;
        position: relative;
        margin: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        text-align: right;
        padding-bottom: 10px;
        }

        .cartel img {
        width: 100%;
        height: auto;
        }

        .footer-box {
            width: 100%;
            height: auto;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
            background-color: rgb(3, 74, 77);
        }

        .footer-column {
            width: 100%;
            height: auto;
            padding: 20px;
            border: 1px solid black;
            box-sizing: border-box;
            color: whitesmoke;
            display: flex;
            justify-content: left;
            align-items: flex-start;
        }

        .ficha-tecnica {
            width: 100%;
            /* max-width: 510px; */
            height: auto;
            padding: 22px;
            /*display: flex;*/
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
            /* border: 1px solid black; */
            font-size: 24px;
            font-weight: lighter;
            border-left: 2px solid rgb(0, 170, 192);
            align-self: stretch;
            margin: auto;
        }

        .sinopsis-esp, .sinopsis-ing  {
            
            padding: 0px;
            display: flex;
            flex-flow: column wrap;
            width: 106%;
            height: auto;
            justify-content: center;
            align-items: center;
            
        }

        .premios-box  {
            padding: 5px;

        }

        .header-container {
            width: 133%;
        }
        .film-box {
            width: 137%;
        }

        .footer-box {
            width:133%;
        }
        .slide-header img {
            width: 100%;
            height: auto;
        }
    } 
}