/***********************************************************************************
  
Responsive Helpers Under 1000px
  
************************************************************************************/

@media (max-width: 1000px) {

    /*******************************************************************************
      
    Sections
      
    ********************************************************************************/
    
    section.split .media {
        width: 25%;
    }
    
    section.split .copy {
        width: 75%;
        
        margin-left: 25%;
    }
    
    /*******************************************************************************
      
    Tickets Panel
      
    ********************************************************************************/
    
    #tickets .content {
        border-left: none;
        border-right: none;
        
        margin: 0;
    }

    /*******************************************************************************
      
    Camping Panel
      
    ********************************************************************************/
    
    #camping .content {
        border-left: none;
        border-right: none;
        
        margin: 0;
    }
    
    /*******************************************************************************
      
    FAQ Panel
      
    ********************************************************************************/
    
    #faq .content {
        border-left: none;
        border-right: none;
        
        margin: 0;
    }    
}




/***********************************************************************************
  
Responsive Helpers Under 800px
  
************************************************************************************/

@media (max-width: 800px) {    

    /*******************************************************************************
      
    Ticketing Panel
      
    ********************************************************************************/
    
    #tickets .content {
        border-left: 1px solid;
        border-right: 1px solid;
        
        margin: 0 100px;
    }
    
    #tickets .content::after {
        display: 100%;
        border: none;
    }
    
    
    #tickets .content .column {
        width: 100%;
        
        padding-top: 0;
    }
    
    #tickets .content .column:first-of-type {
        padding-top: 100px;
    }
    
    
    #tickets .content .column .menu {
        padding-bottom: 80px;
    }
    
/*******************************************************************************
      
    Camping Panel
      
    ********************************************************************************/
    
    #camping .content {
        border-left: 1px solid;
        border-right: 1px solid;
        
        margin: 0 100px;
    }
    
    #camping .content::after {
        display: 100%;
        border: none;
    }
    
    
    #camping .content .column {
        width: 100%;
        
        padding-top: 0;
    }
    
    #camping .content .column:first-of-type {
        padding-top: 100px;
    }
    
    
    #camping .content .column .menu {
        padding-bottom: 80px;
    }
    
/*******************************************************************************
      
    FAQ Panel
      
    ********************************************************************************/
    
    #faq .content {
        border-left: 1px solid;
        border-right: 1px solid;
        
        margin: 0 100px;
    }
    
    #faq .content::after {
        display: 100%;
        border: none;
    }
    
    
    #faq .content .column {
        width: 100%;
        
        padding-top: 0;
    }
    
    #faq .content .column:first-of-type {
        padding-top: 100px;
    }
    
    
    #faq .content .column .menu {
        padding-bottom: 80px;
    }

}


/***********************************************************************************
  
Responsive Helpers Under 600px
  
************************************************************************************/

@media (max-width: 600px) {    

    /*******************************************************************************
      
    Sections
      
    ********************************************************************************/
    
    section.split .media {
        display: none;
    }
    
    section.split .copy {
        width: 100%;
        
        margin-left: 0;
    }
}

/***********************************************************************************
  
Responsive Helpers Under 500px
  
************************************************************************************/

@media (max-width: 500px) {    

    /*******************************************************************************
      
    Header Logo
      
    ********************************************************************************/
    
    #header #logo {
        background: center center no-repeat;
        background-size: auto 60px;
        
        width: 100%;
        
        left: 0px;
    }

    /*******************************************************************************
      
    Header Menu
      
    ********************************************************************************/
    
    #header ul {
        display: 100%;
    }
    
    /*******************************************************************************
      
    Sections
      
    ********************************************************************************/
    
    section.full h1 {
        font-size: 48px;
        line-height: 34px;
        
        padding: 0 40px;
    }
    
    section.full .copy blockquote {
        font-size: 18px;
        line-height: 24px;
        
        padding: 0 40px;
    }
    
    section.split .copy .content {
        padding: 40px;
    }
    
    section h2 {
        font-size: 34px;
        line-height: 30px;
    }
    
    section.split .copy .content h2 {
        padding-bottom: 30px;
        margin-bottom: 20px;
    }
    
    section.split .copy .content h3,
    section.split .copy .content blockquote {
        font-size: 18px;
        line-height: 24px;
        
        margin-bottom: 17px;
    }
    
    section.split .copy .content p {
        font-size: 14px;
        line-height: 18px;
        
        margin-bottom: 10px;
    }
    
    /*******************************************************************************
      
    Intro Panel Text
      
    ********************************************************************************/
    
    #intro .copy .social {
        height: 30px;
        
        margin: 33px 0 25px;
    }
    
    #intro .copy .social a {
        font-size: 18px;
        line-height: 30px;
        
        width: 30px;
        height: 30px;
        
        margin: 0 10px;
    }
    
    /*******************************************************************************
      
    About Panel
      
    ********************************************************************************/
    
    #about .copy p:last-of-type {
        padding-bottom: 25px;
        margin-bottom: 30px;
    }
    
    /*******************************************************************************
      
    Ticketing Panel
      
    ********************************************************************************/
    
    #tickets .content {
        border: none;
        
        margin: 0;
    }
    
    #tickets .content .column {
        width: 100%;
    }
    
    #tickets .content .column:first-of-type {
        padding-top: 40px;
    }
    
    #tickets .content .column .menu {
        border-bottom: 1px dashed;
        
        padding: 0 40px 18px;
        margin-bottom: 50px;
    }
    
    #tickets .content .column:last-of-type .menu:last-of-type {
        border-bottom: none;
        
        margin-bottom: 0;
    }
    
    #tickets .content .column .menu h2 {
        font-size: 24px;
        line-height: 24px;
        
        padding-bottom: 30px;
        margin-bottom: 21px;
    }
    
    /*******************************************************************************
      
    Camping Panel
      
    ********************************************************************************/
    
    #camping .content {
        border: none;
        
        margin: 0;
    }
    
    #camping .content .column {
        width: 100%;
    }
    
    #camping .content .column:first-of-type {
        padding-top: 40px;
    }
    
    #camping .content .column .menu {
        border-bottom: 1px dashed;
        
        padding: 0 40px 18px;
        margin-bottom: 50px;
    }
    
    #camping .content .column:last-of-type .menu:last-of-type {
        border-bottom: none;
        
        margin-bottom: 0;
    }
    
    #camping .content .column .menu h2 {
        font-size: 24px;
        line-height: 24px;
        
        padding-bottom: 30px;
        margin-bottom: 21px;
    }
   
/*******************************************************************************
      
    FAQ Panel
      
    ********************************************************************************/
    
    #faq .content {
        border: none;
        
        margin: 0;
    }
    
    #faq .content .column {
        width: 100%;
    }
    
    #faq .content .column:first-of-type {
        padding-top: 40px;
    }
    
    #faq .content .column .menu {
        border-bottom: 1px dashed;
        
        padding: 0 40px 18px;
        margin-bottom: 50px;
    }
    
    #faq .content .column:last-of-type .menu:last-of-type {
        border-bottom: none;
        
        margin-bottom: 0;
    }
    
    #faq .content .column .menu h2 {
        font-size: 24px;
        line-height: 24px;
        
        padding-bottom: 30px;
        margin-bottom: 21px;
    }
   /*******************************************************************************
      
    Contact Form
      
    ********************************************************************************/
    
    #locations form {
        border-radius: 10px;
        
        padding: 30px 30px 45px;
        margin-top: 8px;
    }
    
    #locations form .form-message.success,
    #locations form .form-message.error {
        font-size: 12px;
        
        margin-bottom: 20px;
    }
    
    /*******************************************************************************
      
    News Panel
      
    ********************************************************************************/
    
    #news .divider {
        margin: 6px 0 12px;
    }
    
    #news h2 {
        margin-bottom: 22px;
    }
    
    #news p {
        font-size: 18px;
        line-height: 24px;
        
        padding: 0 40px;
    }
    
    /*******************************************************************************
      
    Loading Overlay
      
    ********************************************************************************/
    
    #overlay img {
        width: 100px;
        
        top: 75px;
        
        margin-left: -50px;
    }
}