@media only screen and (min-width:1px) and (max-width: 700px){

/* WIDTH 500.css */

body {
    
}

#wrapperOuter {
	max-width: 534px;
    width: 100%;
    margin: 43px auto;
	background: url(../images/content-500.png) no-repeat 0 0;
    background-size: 100%;
    padding: 4.5% 0 0 0;
}

#wrapperInner {
    margin: 0 3% 0 3%;
}

#headerMain{
    height: 0;
    padding-bottom: 44%;
    overflow: hidden;
    position: relative;
}

#headerMask {
	background: url(../images/header-500.png) no-repeat 0 0;
    background-size: 100%;
}

#featureImage1{
    max-width: 500px;
    background-image: url(../images/editable_images/header_500.png);
}

#content {
}

.thumbnail-wrap {
	margin: 0px 10px 20px 10px;
}

#centerNav {
    text-align: center;
}

#nav li a {
    padding: 0px 16px 9px 14px;
    margin-top: 10px;
}

#nav {
    max-width: 514px;
    width: 96%;
    height: auto;
    }


/* Responsive Nav Menu (Dropdown) ----------------------------------------------*/

/* Hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

#nav ul.topnav li:not(:nth-child(2)) {
    display: none;
}
#nav ul.topnav li{
    width: 50%;
}


#nav ul.topnav li.icon {
    width: 50%;
    float: left;
    display: inline-block;
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

#nav ul.topnav.responsive {
    position: relative;
    height: auto;
}

#nav ul.topnav.responsive li.icon {
    position: relative;
    left: 0;
    top: 0;
}

#nav ul.topnav.responsive li {
    width: 50%;
    float: left;
    display: inline;
}

#nav ul.topnav.responsive li a {
    display: block;
    text-align: center;
}
/* End responsive NavBar code----------------------------------------------------*/

a.phonecall {
    
}

img.contactLink {
    width: 15%;
    padding: 10px 0 0px 0;
}

/* Responsive DIVs 500px */

#twoThirds {
    width: 100%;
    clear: both;
    float: none;
}

#oneThird {
    width: 100%
    clear: both;
    float: none;
}

#halfWidth {
    width: 100%;
    clear: both;
    float: none;
}

#fullWidth {
    width: 100%;
    padding: 10px 0 20px 0;
    clear: both;
    float: none;
}

#userLogin {
    width: 96%;
    padding: 2%;
    clear: both;
    float: none;
}

div .VIP {
    width: 100%;
    padding: 0 0 10px 0;
    margin-bottom: 10px;
    clear: both;
    float: none;
}

div .TWEET {
    width: 100%;
    clear: both;
    float: none;
}

/* MOBILE VIDEOS PAGE */

.play_video{
    display: none;
}

.yt_thumb{
    display: none;
}


}/* end 500px CSS --*/


@media only screen and (min-width:701px) and (max-width: 799px){
    
/* WIDTH 800.css */

#wrapperOuter {
    max-width: 834px;
    width: 100%;
    background: url(../images/content-800.png) no-repeat 0 0;
    background-size: 100%;
    padding: 2.4% 0 0 0;
}

#wrapperInner {
    margin: 0 2.1% 0 1.9%;
}

#headerMain{
    height: 0;
    padding-bottom: 27.5%;
    overflow: hidden;
    position: relative;
}

#headerMask {
    background: url(../images/header-800.png) no-repeat 0 0;
    background-size: 100%;
}

#featureImage1{
    max-width: 800px;
    background-image: url(../images/editable_images/header_800.png);
}

#content {
}

.thumbnail-wrap {
    margin: 0px 10px 20px 10px;
}

#nav li a {
    padding: 30px 14px 30px 13px;
}


/* Responsive DIVs 800px */

#twoThirds {
    width: 100%;
    clear: both;
    float: none;
}

#oneThird {
    width: 100%
    clear: both;
    float: none;
}

#halfWidth {
}

#fullWidth {
    clear: both;
    float: none;
}

#userLogin {
    width: 100%;
    padding: 0 2%;
}

div .VIP {
    width: 46%;
    margin: 0 2%;
}

div .TWEET {
    width: 46%;
    margin: 0 2%;
}

}


@media only screen and (min-width:800px) and (max-width: 899px){

/* WIDTH 900.css */

#wrapperOuter {
    max-width: 934px;
    width: 100%;
    background: url(../images/content-900.png) no-repeat 0 0;
    background-size: 100%;
    padding: 2.2% 0 0 0;
}

#wrapperInner {
    margin: 0 2.1% 0 1.8%;
}

#headerMain{
    height: 0;
    padding-bottom: 24.5%;
    overflow: hidden;
    position: relative;
}

#headerMask {
    background: url(../images/header-900.png) no-repeat 0 0;
    background-size: 100%;
}

#featureImage1{
    max-width: 900px;
    background-image: url(../images/editable_images/header_900.png);
}

#content {
}

.thumbnail-wrap {
    margin: 0px 4px 10px 4px;
}

}


@media only screen and (min-width:900px) {
    
/* WIDTH 1000.css */

#wrapperOuter {
    max-width: 1034px;
    width: 100%;
    background: url(../images/content-1000.png) no-repeat 0 0;
    background-size: 100%;
    padding: 2.4% 0 0 0;
}

#wrapperInner {
    margin: 0 2% 0 1.8%;
}

#headerMain{
    height: 0;
    padding-bottom: 22%;
    overflow: hidden;
    position: relative;
}

#headerMask {
    background: url(../images/header-1000.png) no-repeat 0 0;
    background-size: 100%;
}

#featureImage1{
    max-width: 1000px;
    background-image: url(../images/editable_images/header_1000.png);
}

#content {
}

.thumbnail-wrap {
    margin: 0px 10px 20px 10px;
}

a.phonecall {
    
}

}