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


@font-face {
    font-family: 'special_eliteregular';
    src: url('SpecialElite-webfont.eot');
    src: url('SpecialElite-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/specialelite-webfont.ttf') format('woff2'),
         url('./fonts/specialelite-webfont.woff') format('woff'),
         url('SpecialElite-webfont.ttf') format('truetype'),
         url('SpecialElite-webfont.svg#special_eliteregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media all and (max-width: 480px){}
@media all and (min-width: 481px) and (max-width: 768px){}
@media all and (min-width: 769px) and (max-width: 1024px){}
@media all and (min-width: 1025px) and (max-width: 1200px){}
@media all and (min-width: 1201px) {}


/*Overall Styleguide in order of appearance*/

#mobile-only {
display: none;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Open Sans Condensed', sans-serif;
}

/*Frontpage*/

.frontpage-wrapper {
    width: 100vw;
    height: 100vh;
    padding-top: 8vh;
}

nav {
    width: 100vw;
    display: flex;
    justify-content: flex-end;
}

#contact {
    margin-right: 5vw;
}

a {
    color: white;
    text-decoration: none;
}

.frontpage-flex {
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

h3 {
    margin-left: 5vw;
}

.logo {
    font-family: 'special_eliteregular';
    font-style: normal;
    font-weight: 400;
}

/*intro*/
.text-grid {
    display: grid;
    width: 90vw;
    grid-template-columns: 3fr 1fr;
}

/*big number*/
#nineteenseventysix {
    font-size: calc(17.942rem + 0.7vw);
    text-align: right;
    margin-right: 5vw;
}

/*Muppet-show-dialog*/
.dialog-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: calc(1.618rem + 0.7vw);
}

.speaker {
    text-align: right;
}

.speech {
    text-align: left;
}

/*Tom, Dick & Harriet*/

h2 {
    text-align: left;
    margin-left: 5vw;
}


/*Movie showcases*/

.flex-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

 /*film-section*/

 .film-section-grid {
    width: 90vw;
    display: grid;
 }

 .icons-flex { 
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
 }

#info {
    width: calc(1.618rem + 0.7vw);
    height: calc(1.818rem + 0.7vw);
    padding: 0.5rem;
    }
    
#play {
    width: calc(1.618rem + 0.7vw);
    height: calc(1.618rem + 0.7vw);
    padding: 0.5rem;
    }
    
#cart{
    width: calc(1.618rem + 0.7vw);
    height: calc(1.618rem + 0.7vw);
    padding: 0.5rem;
    }

.still-container {
    display: flex;
    justify-content: flex-end;
}

#synopsis-phase-two {
    padding-top: 0;
}

.name-tag-wrapper {
    display: none;
 }
 

hr {
    width: 25vw;
}


#mobile-only {
    display: none;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 3vw;
}

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-style: normal;
    font-weight: 700;
}

#say-hi {
    grid-column: 1/8;
    text-align: right;
}

#address {
    grid-column: 8/13;
    font-size: calc(1rem);
    align-self: center;
}

.impressum-flex {
    display: flex;
    flex-direction: row;
   justify-content: space-around;
}

#copyright {
    font-size: 1rem;
    line-height: 1rem;
    padding-top: calc(2.618rem + 0.7vw);
}

#impressum {
    font-size: 1rem;
    line-height: 1rem;
    padding-top: calc(2.618rem + 0.7vw);
}

.to-top {
    height: calc(2.618rem + 0.5vw);
}

/* impressum*/

.parent {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
  }
  
  .child {
    text-align: center;
  }


/* mobile first*/

@media all and (orientation: portrait) and (max-width: 480px){

    #mobile-only {
        display: contents;
    }
        
    #hide-for-mobile {
        display: none; 
    }


    h2 {
        font-size: 25vw; 
        line-height: 27vw;
        margin-right: 5vw;
        text-align: right;
    }
    
    h3 {
        font-size: 25vw; 
        line-height: 27vw;
    }
    
    .convenient {
        font-size: calc(1.1rem + 1vw);
    }

    #nineteenseventysix {
        font-size: 62vw;
        margin-left: -30px;
    }

    .dialog-grid {
        grid-column-gap: calc(1rem + 0.7vw);
    }

    #kermit {
        padding-top: 0.5rem;
    }

    #louder {
        font-size: calc(1.618rem + 0.5vw);
    }

    .divider-six {
        height: calc(1rem + 0.7vw);
    }

    #tdharriet {
        font-size: 27vw;
        margin-right: 5vw; 
    }

    /*film-section*/
    .film-section-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .poster {
        grid-column: 1/3;
        width: 67.5vw; 
    }
    
    img {
        width: inherit;
    }
    
    .icons-flex { 
            grid-column: 4/5; 
            height: 101.25vw;
        }  
    
.synopsis { 
    grid-column: 1 / 5; 
    padding-top: calc(4.236rem + 1vw);
    }

.still-container {
    width: 100vw;
   height: 67.5vw; 
}

hr {
    width: 35vw;
}

.address-grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     grid-column-gap: 5vw;
 }
 
 #say {
     grid-column: 1/7;
     font-family: 'Open Sans Condensed', sans-serif;
     font-weight: 700;
     font-size: calc(6.854rem);
 }

 #hi{
     grid-column: 1/2;
     font-family: 'Open Sans Condensed', sans-serif;
     font-weight: 700;
     font-size: calc(6.854rem);
 }
 
 #address {
    grid-column: 2/9;
    font-size: calc(0.7rem + 1vw);
    padding-top: calc(0.7rem + 1vw);
    word-spacing: 0.2em;
 }


.to-top {
    grid-column: 7/8;
    height: calc(2.618rem + 2vw);
    padding-top: calc(2.618rem + 2vw);
}

.impressum-flex {
   margin: 0 12vw;
}

.impressum-p {
    font-size: 0.8rem;  
    word-spacing: 0.1em;
    margin: 0;
}

}

@media all and (orientation: portrait) and (min-width: 481px) and (max-width: 767px){

    #mobile-only {
        display: none;
    }

    .landscape {
        display: none;
    }


    #tdharriet {
        font-size: calc(6.854rem + 1vw);
        text-align: left;
        margin-left: 5vw;
    }

    .film-section-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .poster {
        grid-column: 1/5;
        width: 45vw; 
    }
    
    img {
        width: inherit;
    }

    .icons-flex { 
            grid-column: 5/9; 
            height: 67.5vw;
        }
    
      
.synopsis { 
    grid-column: 1 / 8; 
    padding-top: calc(4.236rem + 1vw);
    }

.still-for-landscape {
    display: none;
}

.still-container {
    width: 100vw;
}
}

@media all and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){

.film-section-grid {
    grid-template-columns: repeat(12, 1fr);
}

.poster {
    grid-column: 1/5;
    width: 30vw; 
}

img {
    width: inherit;
}

.icons-flex { 
        grid-column: 5/6; 
        height: 45vw;
    }

  
.synopsis { 
grid-column: 6/13; 

}
.still-for-portrait {
    display: none;
   }
   
.still-container {
    width: 100vw;
   }

}



@media all and (orientation: landscape) {
/*
    .portrait {
        display: none;
    }

    .landscape {
        display: contents;
    }*/

    #contact {
        margin-right: 3vw;
    }

    .frontpage-flex {
        height: 100vh;
        margin-left: 3vw;
       flex-direction: column;
       justify-content: center;
        flex-wrap: nowrap;
    }

    .text-grid {
        width: 90vw;
    }

    h3 {
        font-size: calc(4.236rem + 0.7vw); 
    }

    .convenient {
        font-size: calc(1rem + 0.7vw);
    }

    .film-section-grid {
        width: 90vw;
        grid-template-columns: repeat(12, 1fr);
    }
    
    .poster {
        grid-column: 1/4;
        width: 22.5vw; 
    }
    
    img {
        width: inherit;
    }
    
    .icons-flex { 
            grid-column: 4/5; 
            height: 33.75vw;
        }
    
      
    .synopsis { 
    grid-column: 5/13; 
    
    }

    .still-for-portrait {
        display: none;
    }
    
    .still-for-landscape {
        height: 22.5vw;
       
    }

    #say-hi {
        font-size: calc(4.236rem + 5.5vw); 
    }
    
    #impressum {
        color: #FF2627;
    }

        
}

@media all and (orientation: landscape) and (min-width: 1024px) and (max-width: 1440px){


    #contact {
        margin-right: 3vw;
    }

    .frontpage-flex {
        height: 85vh;
       flex-direction: column;
       justify-content: flex-end;  
    }
    
    #intro {
        margin-left: 3vw;
    }

    h3 {
        font-size: calc(4.236rem + 3vw); 
        margin: 0;
        margin-left: 3vw;
    }

.name-tag-wrapper {
    display: none;
}

#say-hi {
    font-size: calc(4.236rem + 4vw); 
}

}

@media all and (orientation: landscape) and (min-width: 1440px){

    /*.convenient {
        font-size: 3.125rem;
    }

    .average {
        font-size: 1.75rem
    }*/


    #contact {
        margin-right: 3vw;
    }

    .frontpage-flex {
        height: 85vh;
       flex-direction: column;
       justify-content: flex-end;  
    }
    
    #intro {
        margin-left: 3vw;
    }

    h3 {
        font-size: calc(4.236rem + 3vw); 
        margin: 0;
        margin-left: 3vw;
    }

   #nineteenseventysix {
    margin-right: 3vw;
   }

   h2 {
        margin-left: 3vw;
    }

.text-grid {
        width: 94vw;
    }


.film-section-grid {
    width: 94vw;
    grid-template-columns: repeat(12, 1fr);
}

.poster {
    grid-column: 1 / 3;
    width: 15.67vw;
}

img {
    width:inherit;
}

.icons-flex {
    grid-column: 3 / 4; 
    height: 23.5vw;
    }
 
.synopsis { 
    grid-column: 4 / 8; 
    font-size: calc(1rem + 2vw); 
}

.name-tag-wrapper {
    display: contents;
    grid-column: 12 / 13;
    display: grid;
    place-items: center;
}

.name-tag {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    font-size: calc(1.1rem + 0.5vw);
}

.still-for-portrait {
    display: none;
}

.still-for-landscape {
    height: 15.67vw;
    align-self: right;
}

#say-hi {
    font-size: calc(4.236rem + 3vw); 
}

#impressum {
    color: #FF2627;
}

}