/* ---------------------------
MEDIA QUERY - BREAKPOINTS
--------------------------- */

/* ---------------------------
style from a certain size up = use (min-width: )
style from a certain size down = use (max-width: )
--------------------------- */



@media (max-width: 543px) 
{
    .navbar-toggler
    {
            margin: 0;
    }
    .jumbotron
    {
        border-radius: 0;
    }
    .video-container
    {
        margin: 54px 0 0;
    }
    .video-container .caption 
    {
        padding: 200px 50px;
    }
    h1
    {
        font-size: 1.5em;
        margin: 0;
    }
    h3
    {
        font-size: 1.3em;
    }
    p
    {
        font-size: 1em;
    }
    .hpseasontile h4
    {
        font-size: 1em;
        color: #fff;
        border-style: double;
        padding: 3px;
        margin: 60px 30px 0;
    }
     .hpnewsletterbg h3
    {
        margin: 90px 0 30px;
    }
    .hpnewsletterbg form
    {
        margin: 0 0 60px;
    }
    .jumbotron
    {
        margin: 54px 0 0;
        padding: 100px 0;
    }
}



@media (min-width: 544px)
{
    .navbar-toggler
    {
            margin: 0;
    }
    .jumbotron
    {
        border-radius: 0;
    }
    .video-container
    {
        margin: 54px 0 0;
    }
    .video-container .caption 
    {
        padding: 250px 50px;
    }
    h1
    {
        font-size: 2em;
        margin: 0;
    }
    h3
    {
        font-size: 1.5em;
    }
    p
    {
        font-size: 1.1em;
    }
    .hpseasontile h4
    {
        font-size: 1.2em;
        color: #fff;
        border-style: double;
        padding: 3px;
        margin: 60px 30px 0;
    }
    .hpnewsletterbg h3
    {
        margin: 120px 0 30px;
    }
    .hpnewsletterbg form
    {
        margin: 0 0 90px;
    }
    .jumbotron
    {
        margin: 54px 0 0;
        padding: 120px 0;
    }
}



@media (min-width: 768px)
{
    .navbar
    {
            padding: 20px;
    }
    .jumbotron
    {
        border-radius: 0;
    }
    .video-container
    {
        margin: 80px 0 0;
    }
    .video-container .caption 
    {
        padding: 300px 50px;
    }
    h1
    {
        font-size: 2.5em;
        margin: 0;
    }
    h3
    {
        font-size: 2em;
    }
    .hpseasontile h4
    {
        font-size: 1em;
        color: #fff;
        border-style: double;
        padding: 3px;
        margin: 15px 10px;
    }
    .jumbotron
    {
        margin: 79px 0 0;
        padding: 140px 0;
    }
}



@media (min-width: 992px)
{
    
}



@media (min-width: 1200px)
{
    h1
    {
        font-size: 3em;
        margin: 0;
    }
    h3
    {
        font-size: 2.5em;
    }
    .hpseasontile h4
    {
        font-size: 1.3em;
    }
}