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

/*START: GENERAL STYLES*/
#titlebox
{
    background: rgb(45,45,45,.9);
    color: #fff;
}
#secondary-one, #secondary-two, #secondary-three, #secondary-four
{
    margin-top: 50px;
}
#secondary-one, #secondary-three
{
    background: rgb(45,45,45,.9);
    color: #fff;
}
#secondary-five, #secondary-seven
{
    margin-top: 50px;
    background: #fe4900;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
}
#secondary-six
{
    margin-top: 30px;
    background: #fe4900;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
}
#ringnav
{
    position: relative;
    background: url(../image/ajElephantPrint_web.jpg);
    height: 350px;
    margin-top: 50px;
}
#ringnav h1
{
    background: #2d2d2d;
    color: #fff;
    margin-top: 50px;
}
#ringnav a
{
    text-decoration: none;
    color: #fff;
}
.hero #titlebox
{
    position: absolute;
}
.heroinner
{
    margin-top: 20px;
    margin-bottom: 20px;
    /* placeholder for layout where img will be */
/*    max-height: 600px;*/
}
    .heroinner, #secondary-two, #secondary-four
{
    /* placeholder for formatting */
/*    border: 1px solid black;*/
}



/*START: IPHONE LAYOUT STYLES*/
@media (max-width: 480px) {
    fieldset
    {
/*        margin-top: 30px;*/
        padding: 110px 0;
    }
    input
    {
        width: 90%;
    }
    button
    {
        margin-top: 20px;
        margin-left: 0;
    }
    #secondary-two, #secondary-four
    {
        /*placeholder for layout design */
/*        height: 300px;*/
    }
    #secondary-five
    {
        position: absolute;
        width: 20%
    }
    #secondary-six
    {
        position: absolute;
        width: 40%;
        margin-left: 24.5%;
    }
    #secondary-seven
    {
        float: right;
        width: 20%;
    }
    .hero #titlebox
    {
        margin-top: 20px;
        margin-left: 5%;
        margin-right: 5%;
        position: unset;
    }
}



/*START: NARROW LAYOUT STYLES*/
@media (min-width: 481px) and (max-width: 766px) {
    fieldset
    {
/*        margin-top: 180px;*/
        padding: 110px 0;
    }
    input
    {
        width: 90%;
    }
    button
    {
        margin-top: 20px;
        margin-left: 0;
    }
    #secondary-two, #secondary-four
    {
        /*placeholder for layout design */
/*        height: 300px;*/
    }
    #secondary-five
    {
        position: absolute;
        width: 20%
    }
    #secondary-six
    {
        position: absolute;
        width: 40%;
        margin-left: 24.5%;
    }
    #secondary-seven
    {
        float: right;
        width: 20%;
    }
    .hero #titlebox
    {
        margin-top: 20px;
        margin-left: 5%;
        margin-right: 5%;
        position: unset;
    }
}



/*START: MEDIUM LAYOUT STYLES*/
@media (min-width: 767px) and (max-width: 979px) {
    fieldset
    {
/*        margin-top: 1600px;*/
        padding: 110px 0;
    }
    input
    {
        width: 50%;
    }
    button
    {
        margin-top: 20px;
        margin-left: 20px;
    }
    #titlebox
    {
        width: 60%;
    }
    #secondary-one
    {
        width: 60%;
        position: absolute;
        margin-top: 300px;
    }
    #secondary-two, #secondary-four
    {
        width: 60%;
        float: right;
        /*placeholder for layout design */
/*        height: 600px;*/
    }
    #secondary-three
    {
        position: absolute;
        width: 60%;
        margin-top: 1000px;
    }
    #secondary-four
    {
        margin-top: 410px;
    }
    #secondary-five
    {
        position: absolute;
        width: 20%
    }
    #secondary-six
    {
        position: absolute;
        width: 40%;
        margin-left: 25.5%;
    }
    #secondary-seven
    {
        float: right;
        width: 20%;
    }
    #ringnav
    {
        margin-top: 1520px;
    }
    .hero #titlebox
    {
            margin-top: 300px;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: WIDE LAYOUT STYLES*/
@media (min-width: 980px) {
    fieldset
    {
/*        margin-top: 900px;*/
        padding: 110px 0;
    }
    input
    {
        width: 50%;
    }
    button
    {
        margin-top: 20px;
        margin-left: 20px;
    }
    #titlebox
    {
        width: 60%;
    }
    #secondary-one
    {
        width: 45%;
        position: absolute;
        margin-top: 290px;
        margin-left: 45%;
    }
    #secondary-two
    {
        width: 80%;
        max-width: 1024px;
        /*placeholder for layout design */
/*        height: 600px;*/
    }
    #secondary-three
    {
        width: 45%;
        position: absolute;
        margin-top: 300px;
    }
    #secondary-four
    {
        width: 80%;
        max-width: 1024px;
        float: right;
        margin-top: 550px;
        /*placeholder for layout design */
/*        height: 600px;*/
    }
    #secondary-five
    {
        position: absolute;
        width: 20%
    }
    #secondary-six
    {
        position: absolute;
        width: 40%;
        margin-left: 25.5%;
    }
    #secondary-seven
    {
        float: right;
        width: 20%;
    }
    #ringnav
    {
        margin-top: 1300px;
    }
    .hero #titlebox
    {
            margin-top: 400px;
            margin-left: 5%;
            margin-right: 5%;
    }
    .heroinner
    {
        margin-left: 10%;
    }
}