/*@font-face {
    font-family: 'grange-heavycond-webfont';
    src: url('_assets/fonts/grange-heavycond-webfont.woff2') format('woff2'),
         url('_assets/fonts/grange-heavycond-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/

/* NOTE: even though the font-family is specified as grange-hevvycond-webfont,
 * we are actually using Oswald Bold.
 * This was done to avoid updating grange-heavycond-webfont values in the prod DB.
 */
@font-face {
  font-family: 'grange-heavycond-webfont';
  src: url('_assets/fonts/Oswald-Bold.woff') format('woff'),
    url('_assets/fonts/Oswald-Bold.woff2') format('woff2'),
    url('_assets/fonts/Oswald-Bold.eot') format('eot'),
    url('_assets/fonts/Oswald-Bold.otf') format('otf'),
    url('_assets/fonts/Oswald-Bold.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'eds_market_narrow_slant-webfont';
    src: url('_assets/fonts/eds_market_narrow_slant-webfont.woff2') format('woff2'),
         url('_assets/fonts/eds_market_narrow_slant-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'COPRGTB';
    src: url('_assets/fonts/COPRGTB.woff2') format('woff2'),
         url('_assets/fonts/COPRGTB.woff') format('woff'),
         url('_assets/fonts/COPRGTB.TTF') format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ClarendonBTRoman';
    src: url('_assets/fonts/ClarendonBTRoman.woff2') format('woff2'),
         url('_assets/fonts/ClarendonBTRoman.woff') format('woff'),
         url('_assets/fonts/Clarendon_BT_Roman.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MSACairnsSerif";
    src: url('_assets/fonts/CairnsTest/MSACairnsSerif.eot') format('eot'),
         url('_assets/fonts/MSACairnsSerif.woff') format('woff'),
         url('_assets/fonts/MSACairnsSerif.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MSACairnsSans";
    src: url('_assets/fonts/MSACairnsSans.woff') format('woff'),
         url('_assets/fonts/MSACairnsSans.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'csl75';
    src: url('_assets/fonts/csl75-webfont.woff2') format('woff2'),
         url('_assets/fonts/csl75-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html{
    height: 100%;
    background-color: #000000;
}

body{
	font-family: 'Lato', sans-serif;
	height: 100%;
}

h3{
  font-weight: 500;
  color: #000000;
}

.space{
    height: 25px;
}

.space.lg{
    height: 50px;
}

body {
  background-color: #000000;
    font-family: "Open Sans", sans-serif;
}

heading, h1, h2, h3, h4, h5, .heading, .title{
    font-family: "Titillium Web", sans-serif;
}

#outerContainer {
  height: 84%; 
  max-height: none;
}

#innerContainer {
  min-height: 500px; 
  max-height: none;
}

@media (min-width: 768px) {
  #outerContainer {
    max-height: 84vh;
  }

  #innerContainer {
    max-height: 81vh;
  }
}

.navigation_buttons{
  background-color: #ddd;
  padding-bottom: 15px;
  padding-top: 15px;
}

@media (min-width: 1325px){
  .navigation_buttons{
    position: sticky;
    bottom: 0;
  }
}

.navigation_buttons.locked{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.navigation_buttons a.start_over{
  display: block;  
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

.navigation_buttons a.start_over:active,
.navigation_buttons a.start_over:hover{
  text-decoration: none;
}

.navigation_buttons a>button{
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  height: 3.125rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0rem 1.25rem;
  line-height: 1;
  font: 600 1.25rem 'Titillium Web', sans-serif;
  color: #00a94e;
  background-color: #fff;
  vertical-align: middle;
  border: 1px solid;
  border-width: 0.1875rem;
  text-shadow: none;
}

.navigation_buttons a:hover>button{
  background-color: #00a94e;
  color: #fff;
}

.content-area{
  background-color: #ffffff;
}

.main-content-row{
  min-height: 500px;
}

.space.lg{
  height: 75px;
}

.btn{
    background-image: none;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 30px;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    font-weight: bold;
}

.btn-primary{
    background-color: #00A94E;
    color: #fff;
}

.btn-primary.disabled, .btn-primary:disabled{
   background-color: #b0b0b0;
   border: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background-color: #64b78c;
    border: none;
}

.btn-primary:hover:not(:disabled):not(.disabled){
    background-color: #64b78c;
    border: none;
}

.left-btn{
    float: left;
}

.right-btn{
    float: right;
}

a, a:hover, a:visited, a:focus,a:not([href]):not([tabindex]), .final-page-link{
    color: #00A94E;
    cursor: pointer;
}

 .quantity-btn{
    cursor: pointer;
    margin: 5px;
    color: rgb(128, 128, 128);
    font-size: 18px;
}
.clickable{
  cursor: pointer;
}

/* Rules across multiple pages: Header, nav, footer */
.header.row{
  background-color: #000000;
  color: #FFFFFF;
}

.header.row .heading{
  float: right;
}

.top_logo{
  height: 46px;
  max-height: none;
  position: absolute;
}

@media screen and (max-width: 500px) {
  .top_logo {
    position: inherit;
    margin-bottom: 30px;
  }
}

.footer.row{
  background-color: #000000;
  padding-top: 35px;
}

.gray-bg{
  background-color: #e0e0e0;
}

.choices-col{
  background-color: #e9e9e9;
  color: rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px){
  .choices-col{
    overflow-y: scroll;
    max-height: 81vh;
  }
}

.view-area{
  padding-top: 25px;
  height: 100%;
}

.view-area>.row, .view-area>.row>.col{
  height: 100%;
}

.choices-col>div:nth-child(2),
.choices-col>div:nth-child(2)>div{
  /*position: relative;
  min-height: 100%;*/
}

.choices-col>div:nth-child(2)>div{
  /*margin-left: 0px;
  position: absolute;
  overflow-y: scroll;
  width: 100%;*/
}

.choices-col summary-pane>.row:last-child{
	margin-bottom: 70px;
}

canvas.preview_pane{
  cursor: default !important;
}

.icon canvas.preview_pane{
  cursor: pointer !important;
}

.preview_pane_container, .preview_pane_container .canvas-container {
  width: 100%;
  min-height: 500px;
  margin-left: auto;
  margin-right: auto;
}

.icon .preview_pane_container, .icon .canvas-container {
  min-height: 50px;
}
/* End Rules across multiple pages */



/*Configurator Rules*/
#content-row{
  min-height: 691px;
}

#cart-pane{
  max-height: 691px;
  overflow-y: scroll;
}

/* Provided by MSA */
.select-headline {
  font-size: 1.25rem;
  line-height: 1.375rem;
  color: #00a94e;
  font-weight: bold;
}

.selection-box{
  width: 80px;
  height: 80px;
  background-color: rgb(235, 235, 235);
  border: 2px solid #8d8d8f;
  color: #FFFFFF;
}

.selection-box-container{
  margin-left: 15px;
  margin-right: 15px;
}

.selection-box-container label{
  font-size: 13px;
}

.selection-box-container.selected{
  color: #17a648;
  font-weight: bold;
}

.selection-box-container.selected .selection-box{
  background-color: #17a648;
  color: #FFFFFF;
  border: 4px solid #17a648;
}

#preview-image{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-height: 450px;
}

#description2{
  color: #787c7f;
}

.img-responsive{
  width: 100%;
  height: 100%;
}

.thumbnail{
  max-width: 100px;
}

.fa-times-circle{
  color: #dc3545;
  font-size: 12px;
}

/* Absolute Center CSS Spinner */
.loading {
  position: absolute;
  z-index: 999;
  height: 2em;
  width: 2em;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,100,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}