/* -- Responsive Helper -- */
body:before {
    content: "Z";
    display: none;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    text-align: center;
    font-family: "Courier New";
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    pointer-events: none;
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: #000000;
    background-color: #FF00FF;
    text-shadow: 1px 1px 1px #000000;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
body.debug:before {
    display: block;
}

/* -- Viewport Styles ( Media Query $7 / Default 1161px ) -- */
@media (min-width: $7){
    body.debug:before {
        content: "7";
        background-image: none;
        background-color: #FF00FF;
    }

}


/* -- Viewport Styles ( Media Query $6 / Default 1160px ) -- */
@media (max-width: $6){
    body.debug:before {
        content: "6";
        background-image: none;
        background-color: #FF00FF;
    }

}


/* -- Viewport Styles ( Media Query $5 / Default 1024px ) -- */
@media (max-width: $5){
    body.debug:before {
        content: "5";
        background-image: none;
        background-color: #FF00FF;
    }

}


/* -- Viewport Styles ( Media Query $4 / Default 900px ) -- */
@media (max-width: $4){
    body.debug:before {
        content: "4";
        background-image: none;
        background-color: #FF00FF;
    }

}


/* -- Viewport Styles ( Media Query $3 / Default 800px ) -- */
@media (max-width: $3){
    body.debug:before {
        content: "3";
        background-image: none;
        background-color: #FF00FF;
    }


}


/* -- Viewport Styles ( Media Query $2 / Default 640px ) -- */
@media (max-width: $2){
    body.debug:before {
        content: "2";
        background: -moz-linear-gradient(45deg,  #05abe0 0%, #05abe0 49%, #ff00ff 50%, #ff00ff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg,  #05abe0 0%,#05abe0 49%,#ff00ff 50%,#ff00ff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg,  #05abe0 0%,#05abe0 49%,#ff00ff 50%,#ff00ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#ff00ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        background-color: #9001d9;
    }

}


/* -- Viewport Styles ( Media Query $1 / Default 420px ) -- */
@media (max-width: $1){
    body.debug:before {
        content: "1";
        background-image: none;
        background-color: #05ABE0;
    }

}


/* -- Viewport Styles ( Media Query $0 / Default 320px ) -- */
@media (max-width: $0){
    body.debug:before {
        content: "0";
        background-image: none;
        background-color: #05ABE0;
    }


}



/* iPad Portrait and Landscape */
@media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    .page,
    .page .page_banner {
        background-attachment:scroll !important;
        background-size:cover;
    }
}
/* iPhone 4 and 4S Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .page,
    .page .page_banner {
        background-attachment:scroll !important;
        background-size:cover;
    }
}
/* iPhone 5 and 5S Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .page,
    .page .page_banner {
        background-attachment:scroll !important;
        background-size:cover;
    }
}
/* iPhone 6 Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .page,
    .page .page_banner {
        background-attachment:scroll !important;
        background-size:cover;
    }
}
/* iPhone 6+ Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .page,
    .page .page_banner {
        background-attachment:scroll !important;
        background-size:cover;
    }
}