@import url("//hello.myfonts.net/count/4a61eb");

@font-face {
  font-family: "Gilroy-Heavy";
  src: url('../fonts/GilroyHeavy.woff') format('woff2'),
  	   url('../fonts/GilroyHeavy.woff2') format('woff');
}

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

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

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

h1{
	font-family:"Gilroy-Heavy", arial, sans-serif;
	font-size: 4em;
	color: #000;
	text-transform: uppercase;
}

h2{
	font-family:"Gilroy-Heavy", arial, sans-serif;
	font-size: 2.5em;
	color: #000;
	text-transform: uppercase;
}

h3{
    font-family:"Gilroy-Heavy", arial, sans-serif;
	font-size: 1.1em;
	color: #000;
    text-transform: none;
}

h4 {
    color: #787a7d;;
    font-size: .9em;
}

h5 {
    font-family: 'Gilroy-Heavy', arial, sans-serif;
    font-size: 1.6em;
    color: #000;
}

h6{
	font-family: ;
	font-size: ;
	color: ;
}

strong{
	font-family:"Gilroy-Heavy", arial, sans-serif;
}

em {
    font-style: normal;
    color: #f48400;
    font-family: "Gilroy-Heavy", arial, sans-serif;
}

body{
	font-family:"gilroylight", arial, sans-serif;;
	font-size: 1em;
	color: #000;
    margin:0px;
}

a, a:visited{
	color: #f48400;
}
	
a:hover{
	text-decoration:underline;
}

b {
    color: #f48400;
    font-family: "Gilroy-Heavy", arial, sans-serif;
    font-weight: 700;
    font-size: 1.1em;
}


.btn{
	border-radius:0;
	font-size:.9em;
	padding: 6px 25px;
	
}

a.btn, input#submit, .btn{
	-webkit-transition: background-color .5s ease;
	-o-transition: background-color .5s ease;
	transition: background-color .5s ease;
}

a.btn.btn-default, a.btn.btn-default:visited{
	color: #f48400;
    background-color: transparent;
    border-color: #f48400;
}

a.btn.btn-default:hover{
	background-color: #f48400;
	color:white;
}

a.btn.btn-warning, a.btn.btn-warning:visited, .btn.btn-warning{
    background: #f48400;
    color:white;
}

a.btn.btn-warning:hover, .btn.btn-warning:hover{
	color: #f48400;
	background:white;
}

.space-margin {
    margin: 50px auto;
}

.card-margin{
	margin-bottom:100px;
}

.card-margin-top{
	margin-top:100px;
}

.margin-bottom{
	margin-bottom:50px
}	

.margin-top{
	margin-top:50px
}

.mobile-margin, .tablet-margin{
	margin-bottom:50px;
}

.mobilePadding{
	padding-left:15px;
	padding-right:15px;
}

.text-center{
	text-align:center;
}

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

.page-grid{
	padding-bottom: 50px;
}

.page-grid.grid-nopad{
	padding-bottom:0;
}

.gridWhite{
	background:white;
}

/* Footer */
footer {
    padding: 40px 15px 40px;
    background: #403F3F;
    color:#787a7d;
}

footer.footerSmall {
    padding: 30px 0;
}

footer.footerSmall .footer-contact {
    margin:0;
}

.footer-contact {
    margin-top:30px
}



.footer-logo {
    margin: 0 auto 10px;
    display: block;
    width:250px;
}

ul.contact-info li {
    display: inline-block;
    font-weight: 100;
    font-family:"gilroylight", arial, sans-serif;
    color:#787a7d;
    font-size: 1em;
}

ul.contact-info li::after {
    content: "|";
    padding: 0 10px 0 15px;
}

ul.contact-info li:last-child::after {
    display:none;
}

ul.contact-info {
	margin: 14px 0 0 15px;
}

footer label, ul.contact-info a{
	color: #ADADAD;
}

footer label{
	text-transform:uppercase;
	margin-top:3px;
	text-align:left;
	font-size:.8em;
	display:block;
}


/* Image styles */
img, video, canvas, iframe {
    max-width: 100% !important;
}
    
img {
    max-width: 100% !important;
    height:auto !important;
}

img.glow {
    -webkit-box-shadow: 0 0 10px 2px #ababab;
            box-shadow: 0 0 10px 2px #ababab;
    border:2px solid #fff;
}

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

img.polaroid {
    border:1px solid #fff;
	-webkit-box-shadow: 0 0 5px 5px #8C8C8C;
	        box-shadow: 0 0 5px 5px #8C8C8C;
	margin:15px 10px;
}

img.rounded {
    width:100%;
    height:auto;
	border-radius: 50%;
}

img.coupon {
    width:100% !important;
    height:auto !important;
	border:3px dashed #ee3a43;
	border-radius: 5px;
}

/* tinyMCE styles */
.ui-dialog {
    z-index:5000;
}

#adminEditDialog {
    width:100% !important;
}

.page-grid{
	-ms-grid-columns: (1fr)[12];
	grid-template-columns: repeat(12, 1fr);
	display:-ms-grid;
	display:grid;
	width:auto;
	grid-template-rows: auto;
	-ms-grid-rows:auto;
}

.gridDisplay{
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: (1fr)[12];
	grid-template-columns: repeat(12, 1fr);
}

.align-center{
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
}

.mobileWide {
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1 / 13;
}

/* Card Landing Page */
.cardherobg {
    background: url(../images/cardbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -350px 0;
}

.bgimage.bigfoot{
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1/13;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    align-items: baseline; 
}

.bgimage.dog{
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    grid-column: 2/12;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    align-items: baseline; 
}

.logo {
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    grid-column: 1/13;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    padding: 20px;
    
    /* FIX: Turn the item into a flex container to center its child */
    display: flex;
    justify-content: center; /* Horizontally centers the logo */
    align-items: center;     /* Vertically centers the logo */
}

.logo img {
    width:180px;
    height: auto;
}

.copy {
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    grid-column: 2/12;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    padding:20px 0;
}
 
.cardherobg h1 {
    color: #000;
    font-family: "Gilroy-Heavy", arial, sans-serif;
    font-size: 2em;
}

.cardherobg h1 b {
    color: #f48400;
}

.points {
    text-align: center;
    margin: 20px auto;
}

.ball {
    background: #F26724;
    font-family: "Gilroy-Heavy", arial, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: #fff;
    width:50px;
    height:50px;
    border-radius: 50%;
    text-align: center;
    padding: 7px 0 0;
    margin: 10px auto;
    display: block;
}

.vs .ball {
    margin:40px auto;
} 

.grey.dots {
    padding:30px 0;
    background: url(../images/dots.png) no-repeat left center / contain, 
    linear-gradient(0deg, rgba(203, 203, 203, 1) 0%, rgba(217, 217, 217, 1) 100%) no-repeat,  #CBCBCB;
}

.grey.dots h1 {
    color: #000;
    font-family: "Gilroy-Heavy", arial, sans-serif;
    font-size: 4em;
    text-transform: uppercase;
}

.grey.dots h1 b {
    color: #f48400;
}

.grey.dots ul {
    list-style: none;
    margin: 0 40px 20px;
    padding:0;
}

.grey.dots ul li {
     font-family: "Gilroy-Heavy", arial, sans-serif;
    font-weight: 700;
    font-size:1.1em;
    margin: 10px 0;
}

.grey.dots ul li img, .grey.dots ul li i {
    margin:0 8px 0 0;
}


.orangebg {
    background: #F26724;
    border-radius: 8px;
    padding:12px;
    color: #fff;
}

.orangebg h2 {
    color: #fff;
}

ul li {
    font-family: "Gilroy-Heavy", arial, sans-serif;
    font-weight: 700;
    font-size:1.1em;
}


.bars {
    border-top:1px solid #F26724;
    border-bottom:1px solid #F26724;
    padding:30px 20px;
}

.bars h3 {
    text-align: center;
}

.contact {
   border: 1px solid #DFDFDF;
    border-radius: 8px;
    padding:12px;
}



/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {


.cardherobg {
    background: url(../images/cardbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.bgimage.bigfoot{
    -ms-grid-column: 6;
    -ms-grid-column-span: 7;
    grid-column: 6/13;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    align-items: baseline; 
}

.bgimage.dog{
    -ms-grid-column: 7;
    -ms-grid-column-span: 6;
    grid-column: 7/13;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    align-items: baseline; 
}


.feature-img {
    max-width: 100%;
  height: auto;
    align-self: baseline; 
}

.logo {
     -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
    padding: 20px;

    align-items: start;     /* Vertically centers the logo */
}

.logo img {
    width:180px;
}

.vs .ball {
    margin:0;
} 

.copy {
    -ms-grid-column: 4;
    -ms-grid-column-span: 6;
    grid-column: 4/10;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
    display: grid;
    align-items: center;
}
 
.cardherobg h1 {
    font-size: 4em;
}

.bars h3 {
    text-align: right;
}


}

@media (min-width: 576px) and (max-width:991px) {



}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {


.copy {
    -ms-grid-column: 4;
    -ms-grid-column-span: 5;
    grid-column: 4/9;
}
 

}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {


.copy {
    -ms-grid-column: 4;
    -ms-grid-column-span: 4;
    grid-column: 4/8;
    align-items: center;
}
 

.bgimage.bigfoot{
    -ms-grid-column: 6;
    -ms-grid-column-span: 6;
    grid-column: 6/12;
}

.bgimage.dog{
    -ms-grid-column: 8;
    -ms-grid-column-span: 4;
    grid-column: 8/12;
}

}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}

/* XX-Large devices (larger desktops, 1600px and up)*/
@media (min-width: 1600px) {

}