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

/*START: GENERAL STYLES*/
#titlebox
{
    background: rgb(45,45,45,.08);
}
#secondary-one, #secondary-two, #secondary-three
{
    margin-top: 50px;
}
.hero #titlebox
{
    position: absolute;
}
.heroinner
{
    margin-top: 20px;
    margin-bottom: 20px;
    max-height: 600px;
    /* placeholder for layout where img will be */
    border: 1px solid black;
}



/*START: IPHONE LAYOUT STYLES*/
@media (max-width: 480px) {
    fieldset
    {
        margin-top: 150px;
        padding: 110px 0;
    }
    .hero #titlebox
    {
            margin-top: 200px;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: NARROW LAYOUT STYLES*/
@media (min-width: 481px) and (max-width: 766px) {
    fieldset
    {
        margin-top: 150px;
        padding: 110px 0;
    }
    .hero #titlebox
    {
            margin-top: 250px;;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: MEDIUM LAYOUT STYLES*/
@media (min-width: 767px) and (max-width: 979px) {
    fieldset
    {
        margin-top: 120px;
        padding: 110px 0;
    }
    .hero #titlebox
    {
            margin-top: 350px;;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: WIDE LAYOUT STYLES*/
@media (min-width: 980px) {
    fieldset
    {
        margin-top: 630px;
        padding: 110px 0;
    }
    .hero #titlebox
    {
            margin-top: 350px;;
            margin-left: 5%;
            margin-right: 5%;
    }
    #secondary-one
    {
        width: 45%;
        position: absolute;
    }
    #secondary-two
    {
        width: 45%;
        float: right;
    }
}