/* gridded items */

.m-container {
    max-width: 1260px;
    /*width: 102%;*/
}
.m-item {
    margin: 7.5px 0.595238095% !important;
}
.m-item.grid12-1  { width: 7.142857143%; }
.m-item.grid12-2  { width: 15.47619048%; }
.m-item.grid12-3  { width: 23.80952381%; }
.m-item.grid12-4  { width: 32.14285714%; }
.m-item.grid12-5  { width: 40.47619048%; }
.m-item.grid12-6  { width: 48.80952381%; }
.m-item.grid12-7  { width: 57.14285714%; }
.m-item.grid12-8  { width: 65.47619048%; }
.m-item.grid12-9  { width: 73.80952381%; }
.m-item.grid12-10 { width: 82.14285714%; }
.m-item.grid12-11 { width: 90.47619048%; }
.m-item.grid12-12,
.m-item.grid12-full { width: 98.80952381%; }

.m-item img {
    height: auto;
}

/* breadcrumbs */
.breadcrumbs {
    display: none;
}

/* social buttons */

.social {
}
.social a {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 15px;
    font-size: 15px;
    color: #4fc7e7;
    line-height: 15px;
  -webkit-transition: color 0.5s ease;
     -moz-transition: color 0.5s ease;
       -o-transition: color 0.5s ease;
          transition: color 0.5s ease;
}
.social a:before {
    margin: 0;
}
.social a:hover {
    color: #000;
}

/* video wrapper */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* features and benefits */

.features-and-benefits {
    width: 100%;
    clear: both;
}
.features-and-benefits {
    
}
.features-and-benefits dl {
    text-transform: none;
}
.features-and-benefits dt,
.features-and-benefits dd {
    margin-bottom: 15px;
}
.features-and-benefits dt {
    float: left;
    width: 9%;
    clear: both;
    text-align: right;
}
.features-and-benefits dt span {
    display: none;
}
.features-and-benefits dt i {
    font-size: 50px;
}
.features-and-benefits dd {
    float: right;
    width: 90%;
}
.features-and-benefits dd .title {
    text-transform: uppercase;
}
.features-and-benefits dd .separator {
    color: #000;
}
.features-and-benefits dd .definition {
    color: #000;
}
.features-and-benefits .lens-feature {
    color: #4fc7e7;
}
.features-and-benefits .frame-feature {
    color: #f58026;
}

/* Message Boxes
-------------------------------------------------------------- */

.messages,
.messages ul {
    list-style:none !important; margin:0; padding:0; 
}
.messages {
    left: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: .09em;
    margin-bottom: 20px;
    background: #4fc7e7;
    clear: both;
}
.messages li {
    padding: 12px 0;
}
.messages li li {
    margin: 0;
    color: #fff;
}
.messages a {}

.success { color: #fff;}
.error { color: #fff; }
.note { color: #ccc; }
.notice { color: #ccc; }

.error-msg,
.success-msg,
.note-msg,
.notice-msg {
    padding: 4px 12px;
    text-align: center;
}
.error-msg {}
.success-msg {}
.note-msg {}
.notice-msg {}




/* Sidebar Navigation
-------------------------------------------------------------- */

/* defaults */

.col-left.sidebar {
    font-family: 'spy mono', 'Lucida Console', Monaco, monospace;
}
.col-left.sidebar .block-title {
    display: none;
}
.col-left.sidebar ul {
    text-align: right;
    text-transform: uppercase;
}

.col-left.sidebar ul#leftnav {
    margin-right: 0px;
}
.col-left.sidebar ul#leftnav ul {
    margin-right: 0px;
}
.col-left.sidebar li {
    float: left;
    width: 100%;
    clear: both;
}
.col-left.sidebar a {
    border-bottom: none;
    text-align: right;
    padding: 0;
    float: right;
    clear: both;
    width: 100%;
    color: #000;
    font-weight: 400;
    letter-spacing: .1em;
}
.col-left.sidebar a span {
    width: 100%;
}

/* openers */

.col-left.sidebar .opener {
    width: 15px;
    height: 15px;
    float: right;
    display: none;    
    background: none;
}
.col-left.sidebar:hover .opener {
    display: block;
}
.col-left.sidebar .opener:before {
    content: 'H';
    float: left;
    margin-top: 3px;
    font-size: 9px;
    font-family: "spy-optic" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.col-left.sidebar .active > .opener:before {
    content: 'G';
}
.col-left.sidebar .opener:hover {

}

/* level 0 */

.col-left.sidebar ul.accordion > li {
    margin-bottom: 15px;
}
.col-left.sidebar ul.accordion > li > a {
    color: #fff;
    font: bold 14px 'spy sans', Helvetica, sans-serif;
    letter-spacing: .1em;
    padding: 10px 0;
    background: #f58026;
}
.col-left.sidebar ul.accordion > li > a > span {
    padding-right: 5px;
}
.col-left.sidebar ul.accordion > li > .opener {
    color: #fff;
    padding-top: 10px;
}
.col-left.sidebar:hover ul.accordion > li > a > span {
    padding-right: 20px;
}
.col-left.sidebar ul.accordion > li.current > a {
    background: #000;
    color: #fff !important;
}
.col-left.sidebar ul.accordion > li > a:hover {
    background: #000 !important;
    color: #fff !important;
}


/* level 1 */

.col-left.sidebar .block ul ul {
    margin-top: 10px;
}
.col-left.sidebar .block ul ul li .opener {
    margin-right: 0px;
    padding-top: 3px;
}
.col-left.sidebar .block ul ul li a {
    padding-right: 0px;
    color: #000;
    font-weight: normal;
    border-bottom: solid 1px #000;
}
.col-left.sidebar .block ul ul li:hover > a {
    background: #000;
    color: #fff;
}
.col-left.sidebar .block ul ul li:hover .opener,
.col-left.sidebar .block ul ul li.current .opener {
    color: #fff;
}
.col-left.sidebar:hover .block ul ul li a span {
    padding-right: 20px;
}
.col-left.sidebar .block ul ul li.current > a {
    background: #000;
    color: #fff;
}

.col-left.sidebar .vertnav .block-content > ul > li > a {
    pointer-events: none;
}
.col-left.sidebar .vertnav .block-content > ul > li:nth-child(3) > a {
    pointer-events: auto;
}


/* level 2 */

.col-left.sidebar .block ul ul ul {
    margin-top: 10px;
    margin-bottom: 10px;
}
.col-left.sidebar .block ul ul ul li a {
    font-size: 11px;
    padding-right: 0px;
    color: #4fc7e7;
    font-weight: bold;
    border-bottom: none;
}
.col-left.sidebar .block ul ul ul li a span {
    padding-right: 10px;
}
.col-left.sidebar .block ul ul ul li .opener {
    margin-right: 0px;
}

/* titles */


.col-left.sidebar .block ul li a:hover,
.col-left.sidebar #leftnav li a:hover {
    color: #404040;
    background-color: transparent;
}
.col-left.sidebar ul.level0 {
}
.col-left.sidebar #leftnav .level-0 ul {
    float: right;
    width: 100%;
    margin-bottom: 25px;
}

/* active */
.col-left.sidebar li.active > .opener {
    background-image: none;
}

.col-left.sidebar .block-account ul li.current strong {
    text-decoration: underline !important;
    color: #000;
}

.col-left .block-layered-nav { display: none;}
.col-left .filter-label { display: none;}
.col-left .filter { display: none; }
/* Spinner
-------------------------------------------------------------- */

/* MODAL BUTTON STYLES */

div#modalButtonText{
    /*display: none;
*/}

div.modal-body img{
    text-align: center;
}
/* Modal Loading image styles */
.no-cssanimations .css-spinner > div#circularG,
.cssanimations .img-spinner > img#loading-gif {
    display: none;
}

/* AJAX LOADING EFFECT BEGIN */
#circularG{
    position:relative;
    width:20px;
    height:20px;
}
.circularG{
    position:absolute;
    background-color:#000000;
    width:5px;
    height:5px;
    -moz-border-radius:3px;
    -moz-animation-name:bounce_circularG;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:3px;
    -webkit-animation-name:bounce_circularG;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:3px;
    -ms-animation-name:bounce_circularG;
    -ms-animation-duration:1.04s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:3px;
    -o-animation-name:bounce_circularG;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:3px;
    animation-name:bounce_circularG;
    animation-duration:1.04s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
#circularG_1{
    left:0;
    top:8px;
    -moz-animation-delay:0.39s;
    -webkit-animation-delay:0.39s;
    -ms-animation-delay:0.39s;
    -o-animation-delay:0.39s;
    animation-delay:0.39s;
}
#circularG_2{
    left:2px;
    top:2px;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}
#circularG_3{
    top:0;
    left:8px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}
#circularG_4{
    right:2px;
    top:2px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}
#circularG_5{
    right:0;
    top:8px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}
#circularG_6{
    right:2px;
    bottom:2px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}
#circularG_7{
    left:8px;
    bottom:0;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}
#circularG_8{
    left:2px;
    bottom:2px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}
@-moz-keyframes bounce_circularG{
    0% {-moz-transform:scale(1)}
    100% {-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circularG{
    0% {-webkit-transform:scale(1)}
    100% {-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circularG{
    0% {-ms-transform:scale(1)}
    100% {-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circularG{
    0% {-o-transform:scale(1)}
    100% {-o-transform:scale(.3)}
}
@keyframes bounce_circularG{
    0% {transform:scale(1)}
    100% {transform:scale(.3)}
}
/* AJAX LOADING EFFECT END */


/* Modal
-------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15040;
    background-color: #000000;
}
.modal-backdrop.fade {
    opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 15050;
    width: 600px;
    margin-left: -300px;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}
.no-cssanimations .modal .loading #circularG,
.cssanimations .modal .loading #loading-gif {
    display: none;
}
.modal.fade {
    top: -30%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
    top: 10%;
}
.modal-header {
    padding: 0;
    height: 25px;
    background: #fff;
    border-bottom: solid 1px #000;
    text-transform: uppercase;
}
.modal-header .close {
    display:inline-block;
    z-index:3200;
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
    text-indent: -9999em;
    width: 25px;
    height: 25px;
    border: none;
    background: transparent;
}
.modal-header .close:before {
    content: 'F';
    float: left;
    text-indent: 0;
    font-size: 15px;
    padding: 4px;
    color: #4fc7e7;
    font-family: "spy-optic" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    -ms-transition: color .3s ease;
    transition: color .3s ease;
}
.modal-header .close:hover:before {
    color: #000;
}
.modal-header h3 {
    color: #595959;
}
.modal-body {
    position: relative;
    max-height: 400px;
    padding: 15px;
    overflow-y: auto;
}
.modal-form {
    margin-bottom: 0;
}
.modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    *zoom: 1;
}
.modal-footer:before,
.modal-footer:after {
    display: table;
    line-height: 0;
    content: "";
}
.modal-footer:after {
    clear: both;
}
.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
    margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
    margin-left: 0;
}

.modal-body .loading {
    text-align: center;
    padding: 150px 0 180px;
    font-size: 10px;
    color: #9C9C9C; 
}
.modal-body #circularG {
    display: inline-block;
    float: none !important;
}
.modal-body .circularG {
    background-color: #9b9b9b;
}

.modal.fade-in {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}


.protected-image .cover {
    display: none;
}


/* Modal - Newsletter
-------------------------------------------------------------- */

.modal.newsletter {
    width: 615px;   
    padding: 0;
    height: auto;
}
.modal.newsletter .modal-header h3 {
    display: none;
}
.modal.newsletter .modal-body {
    padding: 0;
    max-height: none;
    height: auto;
    min-height: 0;
}
.newsletter-signup-image {
    display: none;
}
.newsletter-signup-form {
    float: left;
    width: 100%;
    letter-spacing: .1em;
    margin-top: 30px;
}
.newsletter-signup-form h2 {
    padding: 0;
    font: bold 26px/1 'spy sans', Helvetica, sans-serif;
    color: #4fc7e7;
    text-align: center;
    clear: both;
    width: 100%;
    float: left;
    margin-bottom: 15px;
}
.newsletter-signup-form p {
    color: #000;
    font-size: 14px;
    letter-spacing: .05em;
    margin: 0 auto;
    width: 575px;
    padding: 30px 0;
    text-transform: none;
    text-align: center;
}

.modal.newsletter .newsletter-signup-form .container {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;   
}
.modal.newsletter .field_block {
    width: 100%;
    clear: both;
    margin-bottom: 10px;
}
.newsletter-signup-form .caption {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .09em;
    width: 100%;
    float: left;
    clear: both;
    display: none;
}
.newsletter-signup-form .caption.visible {
    display: block;
}
.newsletter-signup-form .field input.text.field {
    border: solid 1px #000;
    text-transform: uppercase;
    letter-spacing: .09em;
    text-align: center;
    color: #808080;
    margin: 0 auto;
    display: block;
    width: 400px;
    font-weight: normal;
}
.newsletter-signup-form .field ::-webkit-input-placeholder,
.newsletter-signup-form .field :-moz-placeholder,
.newsletter-signup-form .field ::-moz-placeholder,
.newsletter-signup-form .field :-ms-input-placeholder {  
   color: #000;  
}
.modal.newsletter .newsletter-signup-form .field input[type=submit] {
    display: block;
    float: none;
    margin: 0 auto;
    width: 200px;
}
.modal.newsletter .newsletter-signup-form .field input[type=submit]:hover {
    background: #000;
}
.modal.newsletter .subscribe-icon img {
    display: none;
}
.modal.newsletter p#error-message {
    font-size: 10px !important;
    font-family: 'spy sans', Helvetica, sans-serif;
    color: #ee0000 !important;
}

.placeholder-inputs {
    display: none;
}
.newsletter-signup-form .placeholder-inputs.visible {
    display: block;
    text-align: center;
    text-transform: uppercase;
}
/* Bronto Form Styles */


.modal.newsletter.subscribe-complete {
    color: #fff;
}
.modal.newsletter.subscribe-complete .main.container {
    padding: 5%;
    margin: 0;
    width: 90%;
    min-height: 100px;
}
.modal.newsletter.subscribe-complete .actions {
    display:none;
    
}
.modal.newsletter.subscribe-complete h1 {
    margin: 3%;
}
.modal.newsletter.subscribe-complete {}
.modal.newsletter.subscribe-complete button.close span {
    color: #ccc;
}
.modal.newsletter.subscribe-complete button span span:after {
    background-position: 0px -188px;
}


/* Responsive
-------------------------------------------------------------- */

/* Widescreen [[ Blue ]] */
@media only screen and (min-width: 1280px)  {
}
/* Small Desktops [[ Brown ]] */
@media only screen and (min-width: 960px) and (max-width: 1279px) {
}
/* Tablet (Portrait) [[ Yellow ]] */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* Mobile Universal [[ Orange Border ]] */
@media only screen and (max-width: 767px) { 
    .m-item {
        width: 96% !important;
        margin: 15px 2%;
    }
    .m-item img {
        text-align: center;
        display: block;
        margin: 0 auto;
    }

    .page-title h1 {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .modal.newsletter {
        left: 4%;
        right: 4%;
        width: 92%;
        margin-left: 0;
    }
    .modal.newsletter .newsletter-signup-form p {
        width: 90%;
    }
    .modal.video-modal {
        margin-left: 0;
        left: 5%;
        right: 5%;
        width: auto;
    }
    .newsletter-signup-form .field input.text.field {
        width: 90%;
    }
}
/* Mobile (Landscape) [[ Pink ]] */
@media only screen and (min-width: 480px) and (max-width: 639px) {
}
/* Mobile (Landscape - Large Mobile, iPhone 5, etc.) [[ Purple ]] */
@media only screen and (min-width: 640px) and (max-width: 767px) {    
}
/* Mobile (Portrait) [[ Gray ]] */
@media only screen and (min-width: 320px) and (max-width: 479px) {
}