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

/*START: GENERAL STYLES*/
#titlebox
{
    background: rgb(45,45,45,.9);
    color: #fff;
}
.hero
{
    position: inherit;
}



/*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;
    }
    .subscript
    {
        display: none;
    }
}



/*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;
    }
    .subscript
    {
        display: none;
    }
}



/*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%;
    }
    #hp
    {
        margin-top: 50px;
    }
    #secondary-one
    {
        display: none;
    }
    #secondary-two
    {
        width: 45%;
        height: auto;
        position: absolute;
        margin-top: 50px;
    }
    #secondary-three
    {
        /* original design formatting */
        width: 45%;
        height: auto;
        float: right;
        margin-top: 50px;
        background: #fff;
        /* enlarge image transition */
/*        width: 100px;*/
/*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;
    }
    #secondary-three:hover
    {
        /* enlarge image transition */
        width: 450px;
        box-shadow: 5px 10px 8px #2d2d2d;
    }
    #secondary-four
    {
        display: none;
    }
    #secondary-five
    {
        /* original design formatting */
        position: absolute;
        width: 45%;
        height: auto;
        margin-top: 450px;
        background: #fff;
        /* enlarge image transition */
        /*        width: 100px;*/
/*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;
    }
    #secondary-five:hover
    {
        /* enlarge image transition */
        width: 450px;
        box-shadow: 5px 10px 8px #2d2d2d;
    }
    #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: 990px;
        padding: 110px 0;
    }
    #titlebox
    {
        width: 60%;
        position: absolute;
        margin-top: -30%;
        margin-left: 3%;
    }
    #hp
    {
        margin-top: 50px;
    }
    #secondary-one
    {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    #secondary-two
    {
        width: 35%;
        height: auto;
        position: absolute;
    }
    #secondary-three
    {
        /* original design formatting */
        width: 35%;
        height: auto;
        float: left;
        margin-left: 42%;
        background: #fff;
        /* enlarge image transition */
        /*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;
    }
    #secondary-three:hover
    {
        /* enlarge image transition */
        width: 510px;
        box-shadow: 5px 10px 8px #2d2d2d;
    }
    #secondary-four
    {
        width: 20%;
        height: auto;
        float: right;
    }
    #secondary-five
    {
        /* original design formatting */
        position: absolute;
        margin-top: 400px;
        width: 35%;
        height: auto;
        background: #fff;
        /* enlarge image transition */
        /*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;
    }
    #secondary-five:hover
    {
        /* enlarge image transition */
        width: 510px;
        box-shadow: 5px 10px 8px #2d2d2d;
    }
    #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: 1180px;
        padding: 110px 0;
    }
    #ftitlebox
    {
        width: 80%;
        position: absolute;
        margin-top: -4%;
        margin-left: 9%;
    }
    #secondary-three
    {
        /* enlarge image transition */
        /*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;
    }
    #secondary-three:hover
    {
        /* enlarge image transition */
        width: 750px;
    }
    #secondary-five
    {
        /* enlarge image transition */
        /*        height: 100px;*/
/*        background: #cff;*/
/*        margin: 0 auto;*/
/*        border: 1px solid black;*/
        -webkit-transition: width 2s;
        -webkit-transform: translateZ(0);
        -moz-transition: width 2s; 
        -o-transition: width 2s; 
        transition: width 2s;

    }
    #secondary-five:hover
    {
        /* enlarge image transition */
        width: 750px;

    }
}