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

/*START: GENERAL STYLES*/
#titlebox
{
    background: rgb(45,45,45,.08);
}
#secondary-one, #secondary-two, #secondary-three, #secondary-four
{
    margin-top: 50px;
}
#secondary-one, #secondary-three
{
    background: rgb(45,45,45,.08);
}
#secondary-five, #secondary-seven
{
    margin-top: 50px;
    background: #fe4900;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 5px 10px 8px #2d2d2d;
}
#secondary-six
{
    margin-top: 30px;
    background: #2d2d2d;
    color: #fff;
    padding: 5px;
}
#ringnav
{
    position: relative;
    background: url(../image/ajElephantPrint_web.jpg);
    height: 400px;
    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;
    max-height: 600px;
}
/* placeholder for layout where img will be */
.heroinner, #secondary-two, #secondary-four
{
    border: 1px solid black;
}



/*START: IPHONE LAYOUT STYLES*/
@media (max-width: 480px) {
    fieldset
    {
/*        margin-top: 30px;*/
        padding: 110px 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: 80px;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: NARROW LAYOUT STYLES*/
@media (min-width: 481px) and (max-width: 766px) {
    fieldset
    {
/*        margin-top: 180px;*/
        padding: 110px 0;
    }
    #titlebox
    {
        width: 80%;
    }
    #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: 200px;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: MEDIUM LAYOUT STYLES*/
@media (min-width: 767px) and (max-width: 979px) {
    fieldset
    {
/*        margin-top: 1600px;*/
        padding: 110px 0;
    }
    #titlebox
    {
        width: 80%;
    }
    #secondary-one
    {
        width: 60%;
        position: absolute;
        margin-top: 200px;
    }
    #secondary-two
    {
        width: 60%;
        float: right;
        /*placeholder for layout design */
        height: 600px;
    }
    #secondary-three
    {
        position: absolute;
        width: 60%;
        margin-top:910px;
    }
   #secondary-four
    {
        width: 60%;
        float: right;
        /*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: 1350px;
    }
    .hero #titlebox
    {
            margin-top: 350px;
            margin-left: 5%;
            margin-right: 5%;
    }
}



/*START: WIDE LAYOUT STYLES*/
@media (min-width: 980px) {
    fieldset
    {
/*        margin-top: 900px;*/
        padding: 110px 0;
    }
    #titlebox
    {
        width: 80%;
    }
    #secondary-one
    {
        width: 60%;
        position: absolute;
        margin-top: 170px;
        margin-left: 30%;
    }
    #secondary-two
    {
        width: 80%;
        /*placeholder for layout design */
        height: 600px;
    }
    #secondary-three
    {
        width: 60%;
        position: absolute;
        margin-top: 260px;
    }
    #secondary-four
    {
        width: 80%;
        float: right;
        /*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: 730px;
    }
    .hero #titlebox
    {
            margin-top: 350px;
            margin-left: 5%;
            margin-right: 5%;
    }
    .heroinner
    {
        margin: 0;
        margin-left: 10%;
    }
}