root {
    --font-200: komet, sans-serif;
    font-weight: 200;
    font-style: normal;
    
    --font-400: komet, sans-serif;
    font-weight: 400;
    font-style: normal;

    --font-700: komet, sans-serif;
    font-weight: 700;
    font-style: normal;

    --font-900: komet, sans-serif;
    font-weight: 900;
    font-style: normal;
}

*,
*::before
*::after {
    box-sizing: border-box;

}

@font-face {
    font-family: 'PBS Sans';
    font-weight: 400;
    src: url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff2') format('woff2'),
      url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff') format('woff');
    font-display: swap;
  }
  
  @font-face {
    font-family: 'PBS Sans';
    font-weight: 400;
    font-style: italic;
    src: url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-It.woff2') format('woff2'),
      url('https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-It.woff') format('woff');
    font-display: swap;
  }
  


body {
    padding: 0;
    margin: 0;
    line-height: 1.6;
}

button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  
}

h1 {
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 2.1rem;
    color: white;
}

h2 {
    
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.3rem;
    color: rgb(255, 255, 255);
    margin: 0;
}

h3 {
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9375rem;
    color: white;
   }

.watch_link {
    color: rgb(56, 79, 255);
}

a {
    text-decoration: none;
}



p {
    padding-top: 0rem;
    padding-bottom: 0rem;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

a {
    color: white;
}

.nav-container {
    background-color:#1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    padding: 1.2rem;
    margin-bottom: 0;
  
  
   
}



.logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.logo-image {
    max-width: 15rem;
    align-self: center;
    
}

.logo-image.large {
    max-width: 25rem;
    width: 50vw;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "a"
    "b";
    background-image: url("images/impact-clean-horizontal-web-2025.jpg");
    background-position:center, bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vw;
    margin-top: 0;
   
   
}

/*.hero-container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
    "a"
    "b"
    "c";
    justify-content: center;
    align-content: center;
    background-image: url("images/impact-clean-horizontal-web-2025.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(60vh * (100vw / 1200));
    width: auto;
    margin-top: 0;
   
   
}*/

/*.hero-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "a"
    "b"
    ;
    justify-content: center;
    align-content: center;
    background-image: url("images/impact-clean-horizontal-web-2025.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 60vh;
    margin-top: 0;
    max-height: 80%;
   
}*/

.hero-item {
    grid-area: b;
    display: grid;
    align-self: center;
    justify-items: center;
    width: 100%;
  
}

.header {
    margin: 0;
   padding: 0;
}

.header.jonnie{
    display: grid;
   font-family: "baskerville-urw", serif;
   font-weight: 800;
   font-style: normal;
   font-size: 5.5rem;
   padding-bottom: 2rem;
   
 

}



/*.ivan-doig-logo {
    width: 90%;
    
    margin: auto auto;
    

}*/

.about-container {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    /*background-image: url("images/about-top-small.svg");
    background-position: top;
    background-repeat: repeat-x;
    background-size: auto 4rem, auto;*/
    margin-top: 0;
    padding: 3rem 0 0 0;
    background-color:#1a1a1a;
    margin-bottom: 0;
  
}



.subheader.airs {
    padding: 1rem 0;
    

}

.subheader.underline {
    text-decoration: underline;
    font-size: 2rem;

}



.about-item {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
    width: 90%;
    margin: auto auto auto auto;
    text-align: center;
   
}

.about-item.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.about-item.sponsors {
    border-bottom: .15rem solid white;
}

.about-item.contact {
    padding-top: 2rem;
}

.about-content {
    text-align: left;
}

.about-content.center {
    text-align: left;
    padding-top: 1rem;
    
}


.funder-link { 
    display: grid;
    justify-self: center;
}

.funder-logo-image {
    display: grid;
   justify-self: center;
    width: 10rem;
    padding: 1rem 0 1rem 0;
    
}

.funder-logo-image.large {
    display: grid;
   justify-self: center;
    width: 15rem;
    padding: 1rem 0 1rem 0;
    
}

.funder-logo-image.r-bar {
    height: 6rem;
}






.subheader.season {
    text-decoration: underline;
    font-size: 1rem;

}

h1.header.watch {
    color: #1e4078;

}

h2.subheader.preview {
    color: #1e4078;
}

.about-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    
    padding-top: 1rem;
    width: 100%;
    margin: auto auto auto auto;
    
   
}

.image-gridbox-one {
    display: grid;
    width: 100%;
    background-color: #1e4078;
    background-image: url("images/jonnie-bullriding.jpg");
    background-position: top, center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30rem;
    position: relative;
}

.image-gridbox-two {
    display: grid;
    width: 100%;
    background-color: #1e4078;
    background-image: url("images/jonnie-with-horse.jpg");
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 30rem;
    position: relative;
}

.photo-caption {
    position: absolute;
    top: 87%;
    font-family: ropa-mix-pro,sans-serif;
    font-weight: 200;
    font-style: normal;
   
    font-size: .9375rem;
    color: white;
    padding-bottom: 2rem;
    padding-left: 2rem;
    
}



.watch-container{
    background-color: #1a1a1a;
    
   
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 1rem;
    
    /*background-image: url("images/about-top-small.svg");
    background-position: top;
    background-repeat: repeat-x;
    background-size: auto 4rem, auto;*/
   
}

.watch-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto ;
    justify-content: center;
    align-items: center;
    padding: 0rem 0 0rem 0;
    width: 90%;
    margin: auto auto auto auto;
    text-align: center;

}


.video-container {
    display: grid;
    position: relative;
    width: 100%;
    margin: 3rem auto 8rem auto;
    padding-bottom: 56.25%; 
    height: 0;

  }

  .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.watch-passport {
    display: grid;
    background-color: #1e4078;
    padding: 1.5rem 3rem 1.5rem 3rem;
    margin: 1rem auto 1rem auto;
    min-width: 18rem;
    
  

    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: normal;
   
    font-size: 1.5rem;
    color: white;

}


.subheader.film {
    padding-bottom: 1rem;
}

.film-maker-container {
    display: grid;
    grid-template-columns: 1fr;
   
    background-image: url("images/about-top-small.svg");
    background-position: top;
    background-repeat: repeat-x;
    background-size: auto 4rem, auto;
    margin-top: 0;
   
    background-color: black;
    margin-bottom: 0;
    padding-bottom: 5rem;
   

}



.film-maker-grid {
    padding-top: 0rem;
    

}

.film-maker-header {
    padding-top: 5rem;
    text-align: center;
}

.film-maker-item {
    display: grid;
    max-width: 90%;
    margin: auto auto;
    padding-top: 4rem;
   

}


/*Staff Section*/


.title {
    font-family:PBS Sans, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.1rem;
    color: white;
    padding: 1rem 0 0 0;
}


.title-italic {
    font-family:PBS Sans, sans-serif;
    font-weight: 400;
    font-style: italic;
  
    font-size: 1.3rem;
    color: #384fff;
    
}
.staff-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    padding: 0 0 4rem 0;
}

.staff-image {
    max-width: 20rem;
    border-radius: 0 0 0 30%;
}


.portrait-image {
    width: 100%;
    padding-bottom: 2rem;
}


.sub-footer-container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    
    /*background-image: url("images/doig-paper-background.jpg");*/
    background-color: #1e4078;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.sub-footer-text {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    max-width: 840px;
    padding: 3rem 1rem 1rem 1rem;
    margin: auto auto auto auto;
    text-align: center;
}

.divider-graphic {
    max-width: 20rem;
    padding: 2rem 0;
}

h1.vicky-name {
    font-size: 2.1rem;
}

h1.sub-footer-name-two {
    font-size: 1.1rem;
}

.sub-footer-images{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    
    max-width: 840px;
    padding: 3rem 1rem 1rem 1rem;
    margin: auto auto auto auto;
    text-align: center;
}

.divider-graphic {

    margin: auto auto;
}
.production-logo{
    max-width: 20rem;
    padding: .5rem 0;
}

.sub-footer-paragraphs {
    padding-top: 1rem;
}

p.provided-text {
    padding: 1rem;

}
.footer-container {
    display: grid;
    grid-template-columns: 1fr;
   grid-auto-rows: auto;
    background-color:#1a1a1a;
    padding: 0rem 0 7rem 0;
   
}

/*.footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}*/

.nav-link {
    font-family: ropa-mix-pro,sans-serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    font-size: .9375rem;
    color: white;
    padding: .75rem;

}

.floating-nav {
    
    position: fixed;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    animation: fadeInAnimate ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
    
}

nav {
    display: grid;
    grid-template-columns: 1fr;
    background-color: white;
    /*border: .15rem solid white;*/
    padding: 0.5rem 2rem 0.5rem 2rem;
    border-radius: 100vh;
    align-items: center;
    justify-content: center;
   
    grid-gap: 0.25rem;
}

.floating-nav-link {
    font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: black;
   
    padding: .75rem;

}



/*.logo-image.footer {
    grid-area: b;
    align-self: center;
    justify-self: center;
    max-width: 15rem;
    padding-bottom: 1rem;}
    */

    

.logo-image.social-link {
    grid-area: b;
    align-self: center;
    justify-self: center;
    max-width: 3rem;
    padding-bottom: 1rem;
}

.home-footer-link {
    grid-area: e;
    align-self: center;
    justify-self: center;
}

.subheader.center {
    margin: 0;
    padding: 1rem 0 0 0 ;
    color: #384fff ;
    text-align: center;
    
    
    
}


/* Footer Section */

.footer-links {
    color: white;
    text-decoration: none;
    list-style-type: none;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    font-size: .9rem;
    color: white;
    padding: .5rem 0;
    
   
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr;
   grid-auto-rows: auto;
    background-color:#1a1a1a;
    padding: 5rem 0;
    border-top: 2px solid #3e3e3e ;
   
}


.subheader {
    margin: 0;
    padding: 0;
    color: #384fff ;
    
    
}

.footer-grid-item {
    justify-self: center;
    align-items: center;
    padding: 0 3rem;
    width: 80%;
   
   

}

ul.link-list {
   list-style: none;
   padding: 0;
    margin: 0;
    text-align: left;
}

.subheader.footer {
    margin: 0;
    padding: 1rem 0 0 0 ;
    color: #384fff ;
    text-align: left;
    font-size: 1.18rem;
    
    
    
}

a:hover {
    text-decoration: underline;
}

.logo-image.footer {
    align-self: center;
    
}











@media (min-width: 1200px) {
    
   
    
    .hero-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        "a"
        "b"
        ;
        justify-content: center;
        align-content: center;
        background-image: url("images/impact-clean-horizontal-web-2025.jpg");
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 60vh;
        margin-top: 0;
        height: 100%;
       
    }

   .hero-item {
    grid-area: b;
    padding-bottom: 2rem;
    align-self: center;
  
    }
    
    .header.jonnie {
        display: grid;
       font-family: "baskerville-urw", serif;
       font-weight: 800;
       font-style: normal;
       font-size: 10rem;
       
     
    
    }

    
  

    .logo-image.large {
        max-width: 30rem;
        
    }

    .about-item {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
        padding-top: 2rem;
        padding-bottom: 3rem;
        width: 900px;
        margin: auto auto auto auto;
        text-align: center;
        
    }

    .about-item.grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
   


    .film-maker-item {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
        padding-top: 5rem;
        width: 900px;
        margin: auto auto auto auto;
        text-align: center;
    
    }

    .film-maker-grid {
        padding-bottom: 5rem;
    }

    h1 {
        font-family: montserrat, sans-serif;
    font-weight: 700;
    font-style: normal;
        text-transform: uppercase;
        font-size: 6rem;
        color: white;
    }

    p {
        padding-top: 0rem;
        padding-bottom: 0rem;
        font-family: montserrat, sans-serif;
    font-weight: 100;
    font-style: normal;
       
        font-size: 1.1rem;
        color: white;
    }

    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0;
        padding: 0;
        width: 100%;
        margin: 0;
        text-align: center;
        background-color: black;
        
    }

 
   
    .photo-caption {
        position: absolute;
        top: 87%;
        font-family: ropa-mix-pro,sans-serif;
        font-weight: 200;
        font-style: normal;
       
        font-size: .9375rem;
        color: white;
        padding: 2rem;
    }


    .video-container {
        display: grid;
        position: relative;
        width: 90%;
        margin: 5rem auto 5rem auto;
        padding-bottom: 56.25%; 
        height: 0;
    
      }
    
      .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .film-maker-grid {
        padding: 3rem 0 0 0;
        display: grid;
        grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
        grid-gap: 1rem;
       
        
    
     
    
    }

    .film-maker-header {
        display: grid;
        text-align: center;
        margin-top: 7rem;
        padding-bottom: 0rem;
        margin: 7rem auto auto auto;
        width: 60%;
    }

    .film-maker-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
       
        width: auto;
        text-align: left;
    
    }

    .film-maker-content {
        grid-area: text;
        font-size: 1rem;
        
    }

    .filmmaker-subheader {
        text-align: center;
    }

    .portrait-image {
        width: 500px;
        margin: auto auto auto auto;
       
    }


    .sub-footer-container {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        margin-top: 17rem;
        background-image: url("images/doig-paper-background.jpg");
        background-color: #1e4078;
        background-size: cover;
        background-position: center;
        width: 100%;
    }

    .divider-graphic {
        max-width: 60rem;
        padding: 3rem 0;
    }

    .sub-footer-images{
        display: grid;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
        align-items: center;
        
        max-width: 840px;
        padding: 3rem 1rem 1rem 1rem;
        margin: auto auto auto auto;
        text-align: center;
    }



        .logo-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .footer-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
           grid-auto-rows: auto;
            background-color:#1a1a1a;
            padding: 0rem 0 7rem 0;
           
        }
  

    /*Staff Section*/

    .staff-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .staff-content {
        text-align: left;
      }



/* Footer Section */

.footer-links {
    color: white;
    text-decoration: none;
    list-style-type: none;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    font-size: .98rem;
    color: white;
    padding: .5em 0;
   
}

.footer-container {
    display: grid;
    padding: 4rem 8rem 10rem 8rem;
    
   
}




.subheader {
    margin: 0;
    padding: 1rem 0 0 0 ;
    color: #384fff ;
    text-align: left;
    
    
    
}

.footer-grid-item {
    padding: 0 .7rem;
   
   

}

}