/* template.css overwrites -- use only when absolutely necessary
================================*/
body { background-color: #000; color: #fff; }
a { color: #fff; }

* { -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; }

/* custom CSS on a per project basis
================================*/

.page-btn { width: 100%; }
#heroimg { background-image: url(../images/hero.jpg); background-repeat: no-repeat; height: 750px; background-position: center -40px;   }

.cells img { padding: 20px; background: #fff; }

.main-title-text { background: #000; color: #fff; }
.main-title:after { border-top: 1px solid #fff; }
.items-grid:after {  background: none; }

.logos1 { padding: 25px 0; width: 90%; margin-right: auto; margin-left: auto; }
.logos1 img { margin-left: auto; margin-left: auto; }
.logos2 { padding: 25px 0;  width: 95%; margin-left: auto; }
.logos2	.col-lg-6 { width: 42%; padding-left: 0; }

.hvr-bounce-in {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s; }

.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);  }

/* ---- calendar --- */
.calendar .table { color: #000; font-size: 16px;}
.calendar .table thead th { font-size: 20px; font-weight: bolder; text-transform: uppercase;}
.calendar .table .hrs { font-weight: bolder; color: #006cac;}
.calendar .hours td {text-align: right; font-weight: bold;}
.panel-default>.panel-heading { background-color: #000000; border-color: #ddd; }
.panel-title {  text-align: center; font-weight: bold; font-size: 20px;color: #f37a26; }

#blizzbanner { background-color: #e2c6d5;}
#blizzbanner img {margin-right: auto; margin-left: auto;}

.shopblizz { text-align: center; font-family: 'Open Sans Condensed','Helvetica Narrow',arial,helvetica,sans-serif;}

.gap50 { padding: 50px 0;}
/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
       #heroimg { background-size: 150%; height: 750px;  }  
}

@media only screen and (min-width: 320px) {
	/* insert responsive CSS for screens above 320px */
	.logos1 { padding: 25px 0; width: 100%;  }
	.logos2 { padding: 25px 0; width: 100%; margin: auto;  }	
  #heroimg { background-size: 300%; height: 520px;  }
  .page-btn { font-size: 12px; width: 100%; }

}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
    #heroimg { background-size: 280%; height: 600px;  }
        .page-btn { font-size: 1.3em; width: 100%; }

}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}	
    #heroimg { background-size: 200%; height: 650px;  } 
    .page-btn { font-size: 1.3em; width: 100%; }
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
      #heroimg { background-size: 150%; height: 700px;  } 
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
	.cells { -webkit-box-sizing: content-box;
    		-moz-box-sizing: content-box;
    		box-sizing: content-box; } 

	.logos1 { padding: 25px 0; width: 90%; margin-right: auto; margin-left: auto; }
	.logos2 { padding: 25px 0; width: 80%; margin-left: auto; margin-right: auto; }
    #heroimg { background-image: url(../images/hero.jpg); background-repeat: no-repeat; height: 750px; background-position: center -40px;background-size: initial;   }



}