/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
/*#cboxWrapper {background-color:#474747;overflow: auto;}*/
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0; }
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0;}


#colorbox{
    background: #333;
    width: 100% !important;
    left: 0 !important;
}

#cboxWrapper {
    width: 100% !important;
}

#cboxContent {
    background-color: #333;
    border: 0;
    width: 100%;
}

#cboxClose {
    position:absolute; 
    top:20px; 
    right:20px; 
    background:url(http://www.subzero-wolf.com/Content/images/framework/icon/ui-icons/big-close.png) no-repeat -25px 0; 
    width:25px; 
    height:25px; 
    text-indent:-9999px;
}


/* .product_name {
  background: #262626;
  color: #fff;
  font-family: sans-serif;
  font-size: 11px;
  font-size: 0.6875rem;
  letter-spacing: 0.23em;
  margin: 0;
  min-height: 15px;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
}
*/
#cboxContent,
#cboxLoadedContent {
    width: 100% !important;
} 




/* MODAL STYLES TO MATCH SITE */

.modal-header *,
.modal-content *,
.modal-footer * {
    font-family: sans-serif;
    font-size: 14px;
}



.modal-header {
  background: #262626;
  padding: 1.25em;
}

.modal-header .modal-close {
  outline: 0;
  position: absolute;
  right: 1.5em;
  top: 1em;
}

button.icon {
  border: none;
  background-color: transparent;
}

.icon {
  background-repeat: no-repeat;
}

.big-close, .js .wistia-fancybox .fancybox-close {
  background-image: url(http://subzero-wolf.com/Content/images/framework/icon/ui-icons/big-close.png);
  background-image: url(http://subzero-wolf.com/Content/images/framework/icon/ui-icons/big-close.svg), none;
  width: 24px;
  height: 24px;
}

.modal-title {
  color: #fff;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.23em;
  padding: 0 3em;
  text-align: center;
  text-transform: uppercase;
  min-height: 15px;
}

.modal-body {
  color: #fff;
  font-size: 14px;
  margin: 0 auto;
  max-width: 60em;
  position: relative;
  padding-top: 5em;
  padding-bottom: 5em;
  padding-left: 1em;
  padding-right: 1em;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  padding-bottom: 5em;
  text-align: center;
}

.modal-footer button {
  margin-bottom: 1em;
}

.btn, .marketo-form .mktoButton, .dialog-marketo-form .mktoButton, .skiplink {
  background: #f9f9f9;
  background-image: none;
  border: 1px solid #d2d2d2;
  display: inline-block;
  color: #4c4d4f;
  cursor: pointer;
  font-family: sans-serif;
  letter-spacing: 0.15em;
  margin-bottom: 1em;
  outline: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  -webkit-appearance: none;
  padding: 0 24px;
  font-size: 12px;
  font-size: 0.75rem;
  height: 36px;
  line-height: 34px;
  -moz-transition-property: background-color, border;
  -o-transition-property: background-color, border;
  -webkit-transition-property: background-color, border;
  transition-property: background-color, border;
  -moz-transition-duration: 0.15s;
  -o-transition-duration: 0.15s;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
}

.btn.btn--solid-branded {
  color: white;
  background-color: #5b5378;
  border-color: #494260;
  outline: 0;
}

.btn.btn--solid-branded:hover {
  background-color: #4c4d4f;
}

.btn.btn--solid-branded:before {
  border-bottom: 1px solid #494260;
}

ul {
  /* list-style: none outside; */
  padding: 0;
  margin: 1em 0;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  font-family: sans-serif;
  line-height: 1.5;
  text-align: left;
}

li:nth-child(n+11) {
  display: none;
}


.flag {
  display: table;
  margin: 0 auto;
  width: auto;
}

.flag__image {
  padding-right: 48px;
  width: 100%;
}

@media only screen and (min-width: 768px) {
    .flag__image {
        width: 150px;
    }
}

.flag__image, 
.flag__body {
  display: table-cell;
  vertical-align: middle;
}

.flag__body {
  width: auto;
}

.flag--collapsible {
  /* margin: 1.25em 0; */
}

@media only screen and (max-width: 768px) {
    .flag--collapsible .flag__image {
      display: block;
      margin: 0 auto 1em auto;
      text-align: center;
      padding-right: 0;
    }

    .flag--collapsible .flag__body {
      display: block;
      text-align: center;
    }
}

@media only screen and (min-width: 768px) {
    .modal-header,
    .modal-content *,
    .modal-footer  {
        font-size: 16px;
    }
}



/* Force colorbox sizing */
#colorbox {
    height: 100% !important;
    top: 0 !important;
    min-height: 560px; 
}

#cboxWrapper {
    height: auto !important;
}

#cboxLoadedContent {
    height: auto !important;
}

#cboxContent {
    height: auto !important;
}

@media only screen and (min-width: 768px) {
    #colorbox {
        height: auto !important;
        top: 50% !important;
        -ms-transform: translate(0, -50%) !important; /* IE 9 */
        -webkit-transform: translate(0, -50%) !important; /* Safari */
        transform: translate(0, -50%) !important;

    }
}


/* Leftovers from colorbox that don't seem to be affecting anything with the modal */
html {margin: 0;padding: 0;height: 100%;overflow: hidden;}
body {background-color: #fff;margin: 0;padding: 0;height: 100%;overflow: hidden;}
#applicationContainer {height: 100%;}
#application {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;float: left;padding: 0;margin: 0;z-index: 1;}        
/* .blue {color: #0084C9;}
.red {color: #BF311A;} */
/* .left {float:left;width:220px;text-align:center;}
.right {float:left; width:350px; padding-left: 20px; padding-bottom: 15px; font-size: 15px;line-height:19px;border-left: 1px solid #e3e3e3;} */
.models_heading {font-size: 15px; margin-top:20px;margin-bottom:3px;}
/* .product_image {padding-bottom: 15px;} */
.models {font-size: 11px;list-style-type: none;margin-left:0;padding-left:0;padding-top:0;margin-top:0;margin-bottom:0;} 
.models li {padding-bottom:3px;}
.details_btn {position:relative;font-family:sans-serif;font-size:15px; color:#fff;text-decoration:none;border:none;padding:5px 10px;background-color: #87980e; 
              background: -webkit-gradient(linear, 0 0, 0 top, from(#acbc3d), to(#87980e));
              background: -webkit-linear-gradient(#acbc3d, #87980e);
              background: -moz-linear-gradient(#acbc3d, #87980e);
              background: -ms-linear-gradient(#acbc3d, #87980e);
              background: -o-linear-gradient(#acbc3d, #87980e);
              background: linear-gradient(#acbc3d, #87980e);
              -pie-background: linear-gradient(#acbc3d, #87980e);
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
              behavior: url(/scripts/PIE.htc);}     
.details_btn:hover{text-decoration:none;} 
.heading{font-family:sans-serif;color:#333;border-bottom:1px solid #ccc;background: -webkit-gradient(linear, 0 0, 0 top, from(#F3F4F6), to(#E9EAEC));
         background: -webkit-linear-gradient(#F3F4F6, #E9EAEC);
         background: -moz-linear-gradient(#F3F4F6, #E9EAEC);
         background: -ms-linear-gradient(#F3F4F6, #E9EAEC);
         background: -o-linear-gradient(#F3F4F6, #E9EAEC);
         background: linear-gradient(#F3F4F6, #E9EAEC);
         -pie-background: linear-gradient(#F3F4F6, #E9EAEC);
         behavior: url(/scripts/PIE.htc); }
.heading img {border:none;}                               
.heading .submit{background-image: url(/content/zmags/bullet-callout.png);background-repeat: no-repeat;width: 14px;height: 13px;cursor: pointer;background-color: transparent;vertical-align:middle;border:none;}
.clearing{ height:0; clear:both }
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
/* #cboxLoadedContent{margin-bottom:5px;background-color:#ffffff;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;behavior: url(/common/scripts/PIE.htc);} */
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../images/zmags/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../../images/zmags/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(../../images/zmags/colorbox/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../../images/zmags/colorbox/ajax-loader_sm.gif) no-repeat center center;}
#cboxClose:hover{background-position:-25px -25px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}