body{
    background-color: #000;
    font-family: 'Fanwood Text', 'Lora', 'Cormorant Garamond', serif;
    font-size: 1.3em;
    color: #fff;  
}


/*SCROLL TO THE TOP BTN*/

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 0.8em;
  border: none;
  outline: none;
  background-color: #9a2103;
  color: #fff;
  cursor: pointer;
  padding: 15px;  
}

#myBtn:hover {
  background-color: #555;
}


/* -------headings-------    */

h1{
    font-size: 1.7em;
    font-family: 'Quattrocento','Arvo', 'Cormorant Garamond',serif;
    color:#9a210e;
    text-transform: uppercase;   
}
    
h1 span{
    font-size: 0.6em;
    color:#fff;   
}

h2{
    font-family: 'Quicksand','Lato','Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    color: #9a210e;
}

h3{
    font-family: 'Quattrocento','Arvo', 'Cormorant Garamond',serif;
    font-size: 2em;
    font-weight: 500;
    color: #9a210e;
    text-align: center;
    margin-top: 1em; 
}



/* ----BEGGINING OF THE NAVIGATION----*/
nav{
    background: #000;
    width: 100%;
    position: fixed;
    height: 1.5em;
    font-size: 1.5em;
    z-index: 2;
}

nav ul{
    display: flex;
    height: 1.5em;
    list-style: none;
    justify-content: space-between;   
}


nav li{
    display: inline;
    height: 1.5em;
    padding-left: 2%;
    padding-right: 2%;
}


nav ul a{
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-family: 'Quicksand','Lato','Open Sans', sans-serif;
    text-transform: uppercase;
    padding: 0.2em;
    height: 1.5em;
}

nav ul a:focus, nav ul a:hover, nav ul a:active{
    background-color: #9a210e;
    
}





/* ----PRESENTATION OF THE FILM----*/

.container{
    position: relative;
    text-align: center;
    
}
.container img{
    margin-top: 5%;
    max-width: 100%;
}

.top-left{
    position: absolute;
    top:15%;
    left: 5%;   
}

.top-left h2{
    font-size: 0.7em;
    color: #fff;
}


.top-left img{
    top: -30em;
    left: -5em;
    max-width: 50%;
        margin-bottom: 0.5em;
    
}

.bottom-left{
    position: absolute;
    bottom:1%;
    left: 9%;
    text-align: left;
    animation: fadeIn 7s;
}

audio{
    position: absolute;
    bottom: 15%;
    left: 77%;
}

/* ----END OF PRESENTATION OF THE FILM----*/


/* ----QUOTE FROM THE FILM----*/

blockquote {
    font-style: italic;
    font-size: 1.2em;
    padding: 0.5em 0 0.5em 2em;
    margin-bottom: 2em;
    border-left: #9a210e 0.2em double;
}

blockquote span{
    display: block;
    font-style: normal;
    font-weight: 800; 
    font-size: 0.8em;
    padding-top: 1em;
}

/* ----EXHIBITION CINEMA----*/


.cinema{
    background-color: #fff;
    border: 0.3em double #9a210e;
    font-size: 1.15em;
    text-align: center;
    color: #000;
    margin-top: 1em;
    padding: 0% 2% 10% 2%;
    line-height: 1.6em;
    
}

.cinema img{
    padding: 1.5em;
    max-width: 30%;
}

.cinema p span{
    background: #9a210e;
    color:#fff;
    padding: 0.2em;
}

/* ----END OF EXHIBITION CINEMA----*/




/* ------SHORPRESENTATION OF THE CAST----- */

.cast{
    margin-top: 0.5em;
    margin-bottom: 2em;
    background-image: url(../backgroundfilm.jpg);
    border: 0.3em double #9a210e;
    text-align: center;
    color: #000;
    padding: 5% 2% 2% 2%;
    line-height: 1.5em;
    
}
.filmcontent {
    text-align: left;
}


figure {
    position: relative;
    padding-top: 3em;
    
    
}
figure img {
    display: block;
    max-width: 100%;
    
    
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    max-width: 300px;
}

/* ----END OF PRESENTATION OF THE CAST----*/



/* ----- Information of production -----*/


.production {
    text-transform: uppercase;
    font-size: 0.6em;
    margin-top: 2em;
    
}

.production p span{
    background-color: #fff;
    color: #000;
    font-size: 1.8em;
    font-weight: 400;
    
}
/* ---  End Information of production ---*/

/* -----END OF FILM PAGE-----*/




/*--------STORY PAGE--------*/


/* ---- THE STORY OF THE FILM---*/

.filmstory {
    
    background-image: url(../backgroundfilm.jpg);
    background-attachment: fixed;
    background-size: 100%;
    padding-top: 3em;
    padding-bottom: 3em;
   
}
.filmstory p{
    color: #000;
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 3em;
}

.filmstory a{
    margin: 3em;
    
}

.filmstory h1 span{
    padding-top: 1.2em;
    padding-left: 0.5em;
    color: #000;
}
.filmstory a{
    text-decoration: none;
    color: #000;
    
}

.filmstory a:hover{
    text-decoration: underline;
}

.storyboard{
    margin:2em 3em 2em 3em;
}

.storyboard img{
    max-width: 100%;
}

/* ----TRAILER----*/


.iframecontainer{
    position: relative;
    height: 0;
    padding-top: 25em;
    margin-bottom: 2em;
   
}

.iframecontainer iframe{
    position: absolute;
    top:1em;
    left:10%;
    width:80%;
    height:100%;
    z-index: 1;
    
}

/* -----END OF TRAILER-----*/



		
/*------ END STORY PAGE------*/

/*  --- TICKETS PAGE ----*/



.prices, .timetable{
    align-content: center;
    margin: 2em 1em 2em 0.5em;
    border: 0.1em double #000;
}

.prices p, .timetable p{
    padding: 2em; 
}
table{
    font-size: 0.9em;
    text-align: center;
    width: 90%;
    margin-top: 2em;
    margin-left: 1em;
    
}
    

th. td{
    padding: 2%;
    
}

th{
    font-weight: bold;
    
}

td{
    font-family: 'Quicksand','Lato','Open Sans', sans-serif;
}

.timetable td{
    padding: 0.6em;
    
}

.byticketBtN{
    clear: both;
    margin:5em;
}



/* ------- footer -------*/

footer {
    text-align: left;
    line-height: 2em;
    position: relative;
    margin-bottom: 1.5em;
}

.column1, .column2{
    margin-left: 1.5em;
}
footer h2{
    margin-top: 1em;
    margin-bottom: 0.5em;
}


footer-list dt{
    font-weight: 500;
    
}



footer address a{
    text-decoration: none;
    color: #fff;
}

footer address a:hover{
    text-decoration: underline;
}

footer .copyright{
   clear: both;
    padding-top: 1.5em;
    font-size: 0.8em;
    width: 100%;
    display: block;
    text-align: center;
   
}

footer .map{
    float: left;
    align-content: center;
    max-width: 100%;
    margin: 1em;
}

.map iframe{
    max-width: 100%;
    
}


/*ANIMATION KEYFRAMES, H1 opacity effect*/

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    
    100% {
        opacity: 1;
        
    }
    
}

/*MEDIA QUERIES*/

@media (min-width:400px){
    
    .container img {
        margin-top: 2%;}


h1 {
    font-size: 1.9em;}
}

@media (min-width:500px){
    .top-left img {
        max-width: 100%;
        top:-7em;
    }

    h1 {
        font-size: 2.5em;

}
    
}

@media (min-width:650px){
    
   .top-left h2 {
        font-size: 1.1em;margin-left: 0.5em;

}
    
    .top-left img {
        max-width: 100%;
        top: -5em;
        margin-right: 42%;
}
    .bottom-left{
        bottom:13%;
    }
    
    
    
    
    
    #actors {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .prices {
        float: left;
    }
    .timetable{
        float: right;
    }
    .byticketBTN{
        clear: both;
    }
    
}

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

@media (min-width:850px){
    
    h1 {
        font-size: 3em;
    }
    
    .filmcontent p {
        font-size: 1.2em;
        line-height: 2;}
        
    .footer-list{
            vertical-align: top;
            float: left;
            margin-left: 12em;
            
            
        }
        
        .column2{
            vertical-align: top;
            float: right;
            margin-right: 5em;
            
        }
}
        
    
/*    ----------------------------------*/
    

    @media (min-width:1200px){
        
        body{
            font-size: 1.5em;}
        
        
        nav{
            line-height: 1.5em;}
        
        nav ul{
            display:inline;
            
        }
        

        .top-left{
           top:10%;
        left: 10%;}

        
        .top-left h2 {
            font-size: 1.5em;
            margin-left: -3em;}
        
        h1 {
        font-size: 2.8em;
            line-height: 0.8em;
        }
        .bottom-left{
            bottom:20%;
            left: 7%;}
        
        .buyticket{
    margin:15em;

}
        
        .prices, .timetable{
            margin-left: 4.9em;
            margin-right: 4.9em;}
        
        .footer-list{
            vertical-align: top;
            float: left;
            margin-left: 12em;
               
        }
        
        .column2{
            vertical-align: top;
            float: right;
            margin-right: 10em;
            
        }
        
                
        
}