/* ---------------------------
SCREEN STYLE CSS - RWD
--------------------------- */

/*START: GENERAL STYLES*/
#titlebox
{
    background: #2d2d2d;
    color: #fff;
}
.hero
{
    position: relative;
}



/*START: IPHONE LAYOUT STYLES*/
@media (max-width: 480px) {
    fieldset
    {
        margin-top: 130px;
        padding: 110px 0;
    }
    #titlebox
    {
        width: 80%;
        position: absolute;
        margin-top: -7%;
        margin-left: 10%;
    }
    #hp
    {
        margin-top: 100px;
    }
    #secondary-one
    {
        display: none;
    }
    #secondary-two
    {
        margin-top: 50px;
    }
    #secondary-three
    {
        display: none;
    }
    #secondary-four
    {
        display: none;
    }
    #secondary-five
    {
        margin-top: 50px;
    }
    #secondary-six
    {
        margin-top: 50px;
    }
}



/*START: NARROW LAYOUT STYLES*/
@media (min-width: 481px) and (max-width: 766px) {
    fieldset
    {
        margin-top: 120px;
        padding: 110px 0;
    }
    #titlebox
    {
        width: 80%;
        position: absolute;
        margin-top: -7%;
        margin-left: 10%;
    }
    #hp
    {
        margin-top: 100px;
    }
    #secondary-one
    {
        display: none;
    }
    #secondary-two
    {
        margin-top: 50px;
    }
    #secondary-three
    {
        display: none;
    }
    #secondary-four
    {
        display: none;
    }
    #secondary-five
    {
        margin-top: 50px;
    }
    #secondary-six
    {
        margin-top: 50px;
    }
}



/*START: MEDIUM LAYOUT STYLES*/
@media (min-width: 767px) and (max-width: 979px) {
    
    fieldset
    {
        margin-top: 1000px;
        padding: 110px 0;
    }#titlebox
    {
        width: 60%;
        position: absolute;
        margin-top: -30%;
        margin-left: 3%;
        background: transparent;
    }
    #hp
    {
        margin-top: 50px;
    }
    #secondary-one
    {
        display: none;
    }
    #secondary-two
    {
        width: 45%;
        height: auto;
        position: absolute;
        margin-top: 50px;
    }
    #secondary-three
    {
        width: 45%;
        height: auto;
        float: right;
        margin-top: 50px;
    }
    #secondary-four
    {
        display: none;
    }
    #secondary-five
    {
        position: absolute;
        width: 45%;
        height: auto;
        margin-top: 450px;
    }
    #secondary-six
    {
        width: 45%;
        height: auto;
        margin-top: 50px;
        margin-left: 50%;
        float: right;
    }
}



/*START: WIDE LAYOUT STYLES*/
@media (min-width: 980px) {
    fieldset
    {
        margin-top: 930px;
        padding: 110px 0;
    }
    #titlebox
    {
        width: 60%;
        position: absolute;
        margin-top: -30%;
        margin-left: 3%;
        background: transparent;
    }
    #hp
    {
        margin-top: 50px;
    }
    #secondary-one
    {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    #secondary-two
    {
        width: 35%;
        height: auto;
        position: absolute;
    }
    #secondary-three
    {
        width: 35%;
        height: auto;
        float: left;
        margin-left: 42%;
    }
    #secondary-four
    {
        width: 20%;
        height: auto;
        float: right;
    }
    #secondary-five
    {
        position: absolute;
        margin-top: 400px;
        width: 35%;
        height: auto;
    }
    #secondary-six
    {
        width: 35%;
        height: auto;
        float: right;
        margin-top: 50px;
        margin-right: 28px;
    }
}



/*START: EXTRA-WIDE LAYOUT STYLES*/
@media (min-width: 1440px) 
{
    fieldset
    {
        margin-top: 1000px;
        padding: 110px 0;
    }
    #ftitlebox
    {
        width: 80%;
        position: absolute;
        margin-top: -4%;
        margin-left: 9%;
    }
}