@import url('https://fonts.googleapis.com/css2?family=Mulish&family=Shrikhand&family=Vollkorn+SC&display=swap');

body
{
    padding:0;
    margin:auto;
    background-color:#f7f6f2;
    color:#232C39;
}

img
{
    max-width: 100%;
    height: auto;
    display: block;  
    margin: auto; 
}

.homepage{
    background-image: url("images/headerimage2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    padding:4rem;
    padding-bottom: 2rem;
}

.homepage h1
{
text-align: center;
font-family:'Shrikhand', 'Hoefler Text', 'Big Caslon', 'Calisto MT', serif;
font-weight:normal;
font-size:clamp(3rem, 10vw, 5rem);
margin-bottom: 0;



}

.homepage h1 span{
    text-shadow: 2px 2px 1px #232C39;
}

.homepage h1 a
{
text-decoration:none;
color:#28331e;
}











.secondary h1
{

font-family:'Shrikhand', 'Hoefler Text', 'Big Caslon', 'Calisto MT', serif;
font-weight:normal;
font-size:clamp(2.6rem, 8vw, 3.5rem);
margin-bottom: 0;
padding:1rem;
text-align: center;



}


.secondary h1 span{
    text-shadow: none;
}


.secondary h1 a{
    text-decoration:none;
    color:#28331e;
}











h2
{
  font-family:'Vollkorn SC', 'Rockwell', Garamond, 'Baskerville', serif;
  letter-spacing:.1rem;
  color:#986029;
  text-transform: lowercase;
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2rem);
}

h3{
    font-family:'Vollkorn SC', 'Rockwell', Garamond, 'Baskerville', serif;
    letter-spacing:.1rem;
    text-align: center;
    color:#4C3C29;
   
    padding:.5rem;
    text-transform: lowercase;
    font-size: clamp(1.4rem, 5vw, 1.6rem);
    background: rgb(242,241,234);
background: radial-gradient(circle, rgba(242,241,234,1) 0%, rgba(242,241,234,0) 99%);
max-width: 600px;
margin: auto;
}



p{
    font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
    line-height:1.4rem;
    text-align:left;
    color:#232C39;
  }

  .whoarewe{
    background-color:#DCDCD5;
    
    max-width: 1000px;
    margin:auto;
    padding:1rem;
    margin-top:2rem;
  }

  .whoarewe h2{
    
    color:#28331e;
    max-width: 600px;
    margin: auto;
    background: rgb(242,241,234);
background: radial-gradient(circle, rgba(242,241,234,1) 0%, rgba(242,241,234,0) 99%);
  }


.whoarewe a{
    font-size:.9rem;
        padding:.5rem;
        border:none;
        font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
        font-weight:bold;
        font-style:italic;
        letter-spacing:.1rem;
        background-color:#986029;
        color:#f7f6f2;
        text-decoration: none;
        
    

}

.whoarewe:hover{
    transition-duration:.3s;
    background-color: #C9C9BB;
    

}

.whoarewe p{
    max-width: 800px;
    
    margin: auto;
    padding:1rem;
}




.getinvolved h3{
    padding:0;
}

.getinvolved h2{
    
    max-width: 600px;
  
    margin:2rem auto;
    margin-bottom:0;
}


  



.gridpractice{
    
    margin: auto;
    max-width: 400px;
    
    

}

.gridpractice h3{
    margin:0;
    background-color: #DCDCD5;
    padding:.5rem;
    text-align: center;
    font-size: clamp(1.7rem, 5vw, 2rem);
    font-family:'Shrikhand', 'Hoefler Text', 'Big Caslon', 'Calisto MT', serif;
    text-transform: capitalize;
    color:#7D4F21;
    font-weight: 100;
    border: none;
    
    
}

.gridpractice a{
    text-decoration: none;
    
}

.gridpractice a:hover{
    transform:scale(1.02);
    transition-duration: .3s;
}





.box{
    border:2px solid #986029;
    margin-top:1rem;
    
}



.horsesgrid{
    margin: auto;
    max-width: 400px;

}

.horsesgrid h3{
    margin:0;
    background-color: #DCDCD5;
    padding:.5rem;
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 1.8rem);
    font-family:'Shrikhand', 'Hoefler Text', 'Big Caslon', 'Calisto MT', serif;
    text-transform: capitalize;
    color:#7D4F21;
    font-weight: 100;
    border: none;
}



.horsesgrid .box:hover{
    transform:scale(1.02);
    transition-duration: .3s;
    
}





    
    .homepage nav ul{
        list-style-type: none;
        margin:0;
        padding:0;
        padding-top:0.5rem;
        text-align: center;     

        
    }

    nav ul{
        list-style-type: none;
        margin:0;
        padding:0;
        padding-top:1rem;
        text-align: right;
    }

  
    
    nav a{
        
        font-size:1rem;
        padding:.5rem;
        border:none;
        font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
        font-weight:bold;
        font-style:italic;
        letter-spacing:.1rem;
        background-color:#986029;
        color:#f7f6f2;
        text-decoration: none;
        font-size:clamp(.6rem, 3vw, .7rem);
        
        
    }

    .homepage nav a{
        padding:.5rem;
        font-size:clamp(.6rem, 3vw, .8rem);
    }

    .secondary nav a{
        border:none;
    }
    
    nav a:hover{
        transition-duration:.3s;
        background-color:#5e4730;
    }
    
    nav li{
        padding:0.68rem;
    }

    .highlight{
        background-color:#5e4730;
    }





    footer p{
        padding-top:1.5rem;
        text-align: center;
    }





    .secondarybox1{
        max-width: 800px;
        margin: auto;
        padding:0rem 1rem 0rem 1rem;
        
    }
.secondarybox1 h2{
    margin-bottom: 0;
    
}


    .secondarybox2{
        background-color: #DCDCD5;
        max-width: 1200px;
        margin: 2rem auto;
      padding:1rem 0;
    }

    .secondarybox2text{
        max-width: 600px;
       margin:auto;
       padding:1rem;
    }

    .secondarybox2text2{
        max-width: 600px;
       margin:auto;
       padding:1rem;
    }
    

    .secondarybox2 img{
        max-width: 320px;
    }


    main a{
        text-decoration: none;
    }

  .secondarypagehover .secondarybox2:hover{
    background-color: #C9C9BB;
    transition: .5s;
    
  }


.missionquote{
    text-align: center;
    
}


.educationquote{
    text-align: center;
}







  .tertiarypage{
    text-align: center;
  }


.tertiarypage .secondarybox1 p{

    padding-bottom:1rem;
}

  .tertiarygrid{
    margin: auto;
    max-width: 400px;
    padding-bottom: 2rem;
    
    
}

.tertiarygrid p{
    padding:1rem;

}

.tertiarygrid h3{
    margin:0;
    background-color: #DCDCD5;
    font-family:'Vollkorn SC', 'Rockwell', Garamond, 'Baskerville', serif;
    letter-spacing:.1rem;
    color:#986029;
    text-transform: lowercase;
    text-align: center;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    color:#4C3C29;
    margin:1rem;
}

.tertiarygrid .box{
    border: none;
    background-color: #DCDCD5;
   
}



.tertiarypage a{
    
        padding:.6rem 2rem .6rem 2rem;
        border:none;
        font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
        font-weight:bold;
        font-style:italic;
        letter-spacing:.1rem;
        background-color:#986029;
        color:#f7f6f2;
        text-decoration: none;
        font-size:clamp(.9rem, 3vw, 1.2rem);
       
}

.tertiarypage a:hover{
    transition-duration:.3s;
    background-color:#5e4730;
}


.secondarybox1{
    text-align: center;
}










.articleclick{
    text-align: center;
    font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
    font-weight:bold;
    font-style:italic;
    padding-top:.5rem;
    font-size: clamp(1rem, 5vw, 1.3rem);
}

.educationgrid a{
    text-decoration: none;
    background-color: #DCDCD5;
}

.educationgrid a:hover{
    transform:scale(1.02);
    transition-duration: .3s;
}

.educationpage{
    text-align: center;
  }


.educationpage .secondarybox1 p{

    padding-bottom:1rem;
}

  .educationgrid{
    margin: auto;
    max-width: 400px;
    padding-bottom: 2rem;
    
    
}

.educationgrid p{
    padding:1rem;

}

.educationgrid h3{
    margin:0;
    background-color: #DCDCD5;
    font-family:'Vollkorn SC', 'Rockwell', Garamond, 'Baskerville', serif;
    letter-spacing:.1rem;
    color:#986029;
    text-transform: lowercase;
    text-align: center;
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    color:#4C3C29;
    margin:1rem;
    
}

.educationgrid .box{
    border: none;
    background-color: #DCDCD5;
   
}






.articlegrid{
    padding:1rem;
}











.individualgrid{
    background-color: #DCDCD5;
    padding:1rem;
}

.individualgrid a{

    padding:.8rem 2rem .8rem 2rem;
    border:none;
    font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
    font-weight:bold;
    font-style:italic;
    letter-spacing:.1rem;
    background-color:#986029;
    color:#f7f6f2;
    text-decoration: none;
    font-size:clamp(.9rem, 3vw, 1.2rem);

    display:block;
    text-align: center;
    max-width: 600px;
    margin: 1.4rem auto;
}

.individualgrid a:hover{
    transition-duration:.3s;
    background-color:#5e4730;
}



.horseinformation p{
    text-align: center;
}



.allhorsesbutton a{
    padding:.4rem;
    border:none;
    font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
    font-weight:bold;
    font-style:italic;
    letter-spacing:.1rem;
    background-color:#5e4730;
    color:#f7f6f2;
    text-decoration: none;
    font-size:clamp(.7rem, 3vw, .9rem);

    display:block;
    text-align: center;
    max-width: 200px;
    margin:1.5rem auto;
}

.allhorsesbutton a:hover{
    background-color: #986029;
transition-duration: .3s;}






.contacttext{
    text-align: center;
}


.contact{
    background-color: #DCDCD5;
   margin: auto;
    max-width: 1200px;
    padding:2rem;
  }
  
  .contact h2{
    margin:0;
    padding:1rem;
    color:#4C3C29;
   
  }
  
  
  .contact form{
    text-align: center;
    padding:1rem;
    padding-bottom: 2rem;
  }
  
  .contact label{
    display:block;
    padding:.5rem;
    font-family:'Vollkorn SC', 'Rockwell', Garamond, 'Baskerville', serif;
    font-weight: bold;
    text-transform: lowercase;
    
    color:#4C3C29;
    font-size: 1.1rem;
  }
  
  .contact input{
    padding:.3rem;
    font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
    font-weight: bold;
    color:#5D272A;
    
    border:1px solid #986029;
  }
  
  .contact fieldset{
  border:none;
  }
  
  .question{
    font-weight: bold;
  }
  
  .contact button{
    display: block;
    margin:auto;
    margin-top:1rem;
    padding:.6rem 1rem .6rem 1rem;
        border:none;
        font-family:'Mulish', 'Trebuchet MS', 'Optima', 'Century Gothic', Helvetica, sans-serif; 
        font-weight:bold;
        font-style:italic;
        letter-spacing:.1rem;
        background-color:#986029;
        color:#f7f6f2;
        text-decoration: none;
        font-size:clamp(1rem, 3vw, 1.2rem);
  }
  
  .contact button:hover{
    background-color: #5e4730;
    color:#f7f6f2;
    transition-duration: .3s;
  }
  
  
  .contact p{
    padding:0;
    margin:0;
    text-align: center;
  }
  
  textarea{
    padding: 1.5rem;
    
    padding-top:0.5rem;
  }


  .confirm p{
    text-align: center;
    padding-bottom:1rem;
  }

 

 .confirmgridpractice{
    
    margin: auto;
    max-width: 250px;
  
    

}

.confirmgridpractice h3{
    margin:0;
    background-color: #DCDCD5;
    padding:.5rem;
    text-align: center;
    font-size: clamp(1.3rem, 5vw, 1.5rem);
    font-family:'Shrikhand', 'Hoefler Text', 'Big Caslon', 'Calisto MT', serif;
    text-transform: capitalize;
    color:#7D4F21;
    font-weight: 100;
    border: none;
    
    
}

.confirmgridpractice a{
    text-decoration: none;
    
    
}

.confirmgridpractice a:hover{
    transform:scale(1.02);
    transition-duration: .3s;
}

.confirmh3{
    background: none;

}





    @media (min-width:440px)
    {

        .homepage nav li{
            padding:0.8rem;
        }

        .secondary h1{
            text-align: left;
        }

        .confirmgridpractice{
    
            margin: auto;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap:1rem;
            
        
        }
        
        .individualgrid img{
            max-width: 400px;
        }
    }



    @media (min-width:600px){
        .homepage nav ul{
            display: flex;
            flex-wrap: wrap;
            justify-content:center;
            padding-top:1rem;
         }


      
      
        
    }


  
    @media (min-width:700px)
    {

        .gridpractice{
            display: grid;
            gap:1rem;
            grid-template-columns: 1fr 1fr;
            grid-template-rows:1fr 1fr;
            padding:0 1rem 0 1rem;
            max-width: 800px;
        }

        .horsesgrid{
            display: grid;
            gap:1rem;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows:1fr 1fr 1fr;
            padding:0 1rem 0 1rem;
            max-width: 1200px;
        }

      


        nav ul{
            display: flex;
         }

         .secondary h1{
            text-align: center;
        }

        .secondary nav ul{
           
            justify-content: center;
            
        }


        .secondarybox2 img{
            max-width: 350px;
        }

        .confirmgridpractice{
    
            margin: auto;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap:1rem;
            
        
        }
        

    
        
        
    }

    @media (min-width:800px){
        .individualgrid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
            max-width: 1200px;
            margin: auto;
            gap:1rem;
            padding:2rem;

        }
    
      .buttons{
        padding-top:2.5rem;
        max-width: 300px;
      }

      .horseinformation p{
        text-align: left;
    }

    .articlegrid{
    
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top:2rem;
        max-width: 1200px;
    }
    
    .articletext{
        margin: auto;
        max-width: 600px;
        padding:1rem;
    }
    
    .articletext2{
      
        max-width: 600px;
        padding:1rem;
    }
    
    .articleimage{
       max-width: 500px;
        margin: auto;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    
    
    .articleimage2{
        max-width: 500px;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        margin:auto;
    }
    
    }

    @media (min-width:900px){
    .secondarybox2{
        background-color: #DCDCD5;
        display: flex;
    }

    .secondarybox2text2{
        order:2;
    }


    .tertiarygrid{
        display: grid;
        gap:1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows:1fr;
        
        max-width: 1200px;
        
    }

    .educationgrid{
        display: grid;
        gap:1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows:1fr;
        
        max-width: 1200px;
        
    }
    
   
}


    @media (min-width:1100px)
    {
        .secondary{
            display: flex;
            justify-content: space-between;
         }

         .secondary h1{
            margin-top:0;
            text-align: left;
         }
         
         .secondary nav ul{
            padding-right:1rem;
            justify-content:end;
         }


    
         .secondary
         {
             position: sticky; 
             top: 0;
             background-color: #f7f6f2;
         }


         .secondary h1
        {
            font-size:clamp(2rem, 4vw, 2.2rem);
        }

    
      

    }