/*##################### BOOTSTRAP OVERWRITES #####################*/
/*----------------------------------------------------------------*/
td{padding:0px !important;margin:0px !important;}
.active{box-shadow:none !important;}
.nav-center {
    text-align: center;
}
.nav-center ul.nav {
    display: inline-block;
}
.nav-center ul.nav li {
    display: inline a;
    display-float: left;
}
.clear{clear:both;}
.noGutter{padding:0px;}
html {scroll-behavior:smooth;}
body, html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#ffffff;
    position:relative;
    background-color:#000000;
    height:100%;
}
p {padding:8px;}
a, a:hover, a:active, a:focus{outline:none !important;}
.btn:focus,.btn:active {
    outline: none !important;
}
button:focus,button:active {
    outline: none !important;
}
.btn{
    font-family: 'Squada One', cursive;
    font-weight:400;
    letter-spacing:-1px;
    font-size:1.3em;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Squada One', cursive;
    font-weight:300;
    color:#e9e9e9;
    margin:0;
    text-align:center;
    padding:10px 0 3px 0;
}
h1{font-size:30px;}
h2{font-size:25px;}
h3{font-size:20px;}
h4{font-size:15px;}
h5{font-size:12px;}
h6{font-size:9px;}
h1.setRight, h2.setRight, h3.setRight, h4.setRight, h5.setRight, h6.setRight {
    text-align:right;
}
h1.setLeft, h2.setLeft, h3.setLeft, h4.setLeft, h5.setLeft, h6.setLeft {
    text-align:left;
}
h1.uLine, h2.uLine, h3.uLine, h4.uLine, h5.uLine, h6.uLine {
    width:100%;
    border-bottom:1px solid grey;
    margin-bottom:12px;
}
h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
    color:white;
    border-color:white;
}
h1.black, h2.black, h3.black, h4.black, h5.black, h6.black {
    color:black;
    border-color:black;
}
h1.bold, h2.bold, h3.bold, h4.bold, h5.bold, h6.bold {
    font-weight:bold;
}
h1.darkBG, h2.darkBG, h3.darkBG, h4.darkBG, h5.darkBG, h6.darkBG {
    background-color:rgba(0, 0, 0, 0.56);
    padding:6px;
    border-radius:6px;
    margin-bottom:12px;
}
h1.lightBG, h2.lightBG, h3.lightBG, h4.lightBG, h5.lightBG, h6.lightBG {
    background-color:rgba(255, 255, 255, 0.56);
    padding:6px;
    border-radius:6px;
    margin-bottom:12px;
}
/* start where are these used?  Need to depricate*/
h2.subtitle{padding:0px;font-size:24px;padding-bottom:10px;}
h3.listHeading{font-size:14px;border-bottom:1px solid #c3c3c3;margin:6px 0 0 0;padding:0 0 4px 0;}
/* end where are these used?  Need to depricate*/
input, textarea {
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
div.icon.inline{display:inline-block;}
label, label.light{display:inline-block;color:#232323;font-family:'Roboto';letter-spacing:3px;text-transform:uppercase;font-size:12px;font-weight:bold;margin-right:12px;}
label.dark{color:#dddddd;}
label div.icon{font-size:20px;position:relative;top:5px;opacity:.5;}
input, textarea, input.light, textarea.light{border-radius:3px;border:1px solid #dbdbdb !important;color:grey !important;background-color:#ececec !important;font-size:16px;padding:6px;}
input:focus, textarea:focus, input.light:focus, textarea.light:focus{border:1px solid #beea59 !important;color:black !important;background-color:white !important;}
input.dark, textarea.dark{
	border:1px solid #313131 !important;color:#d5d5d5 !important;background-color:#707070 !important;
}
input.dark:focus, textarea.dark:focus{border:1px solid #000000 !important;color:white !important;background-color:#9e9e9e !important;}
input:-webkit-autofill {
    -webkit-text-fill-color: black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
    -moz-text-fill-color: black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}
/* placeholder */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input.lignt::-webkit-input-placeholder, textarea.light::-webkit-input-placeholder{font-family:'Roboto';color:#888888 !important;font-style:italic;}
input::-moz-placeholder, input.light::-moz-placeholder{font-family:'Roboto';color:#888888 !important;font-style:italic;}
input:-ms-input-placeholder, input.light:-ms-input-placeholder{font-family:'Roboto';color:#888888 !important;font-style:italic;}
input:-moz-placeholder, input.light:-moz-placeholder{font-family:'Roboto';color:#888888 !important;font-style:italic;}

input.dark::-webkit-input-placeholder, textarea.dark::-webkit-input-placeholder{color:#c9c9c9 !important;}
input.dark::-moz-placeholder{color:#c9c9c9 !important;}
input.dark:-ms-input-placeholder{color:#c9c9c9 !important;}
input.dark:-moz-placeholder{color:#c9c9c9 !important;}

input[type=text]{}
input[type=password]{width:120px;}
input[type=number]{}

hr.gradient {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    opacity:.2;
    padding:0px !important;margin:0px !important;
}
.row{margin:0px !important;}
.nopad{padding:0px !important; margin-top:5px;}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
.right.carousel-control, .left.carousel-control {
    display: none;
}

/* @media queries */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6{
        padding:0 30px;
    }

}
@media (max-width: 568px) {
    h1{position:relative;top:-20px;}
    h1 {margin-top:20px;font-size:21px;text-align:left;padding-left:0px !important;margin-left:-10px;}
    h1 span.icon{width:32px;height:32px;top:8px;}
}


.partnerList {
  height: 230px;
  max-width: 100%;
  width:100%;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  margin-top:30px;
}
.partnerList .title{width:100%;text-align:center;margin-top:5px;}
.partnerList .title span{display:block;width:max-content;margin:0 auto;padding:0 8px;font-family:'Roboto';color:#000000;font-size:18px;border-radius:20px;background-color:rgba(255, 255, 255, .4);}
/* set logoSlider to 3x the pixel width of ONE logo set (we repeat logo sets 3 times in HTML to make sure we are covered for all widescreens) */
.logoSlider {
  height: 190px;
  width: 9216px;
  position: absolute;
  overflow:hidden;
  top: 40px;
  left: 0;
  border:1px solid rgba(0, 0, 0, 0.25);
  padding-top:40px;

  animation: moveSlideshow 30s linear infinite;
}

.logoSlider img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
  margin:8px 25px;
  border-radius:50%;
}
.logoSlider img:hover {
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.44);
}
/* set translateX to the pixel width of ONE logo set PLUS 4x[the number of logos]  12 3072*/
@keyframes moveSlideshow {
  100% {
    transform: translateX(-3120px);
  }
}
/* @media queries */
@media (max-width: 992px) {

}

/* Nav Bar */

/* Create a sticky/fixed navbar */
#navbar {
  position:relative;
  background-color: #2a2a2a;
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;height:135px;
  top: 0; /* At the top */
  z-index: 99;
  border-bottom:5px solid #ed8734;
}

/* Style the logo */
#navbar #logo {
  position:absolute;
  padding:18px 0 18px 20px;
  transition: 0.4s;
  width:400px;height:100%;
}
#navbar #logo a{
	background-image:url('/images/cng-ark.png');
	background-size:contain;
	background-position:left center;
	background-repeat:no-repeat;
	display:block;
	max-width:100%;height:100%;
	text-align:left;
}
#navbar #logo a img{height:100%;}

/* Style the navbar links */
#navbar #menuLinks {
  position:absolute;
  right:0px;top:0px;
  width:100%;height:100%;
  text-align:right;
  padding:50px 10px;
  transition: 0.4s;
}
#navbar #menuLinks a {
  text-align: center;
  display:inline-block;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 30px;
  font-size:18px;
  background-color:transparent;
}
#navbar #menuLinks a span{
	color: #989898;
	font-size:18px;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	text-transform:lowercase;
}
#navbar #menuLinks a img.navIcon {display:inline-block;width:26px;height:26px;}

#navbar #menuLinks{display:block;}

/* Links on mouse-over */
#navbar #menuLinks a:hover {
  background-color: black;
  color: white;
}

/* Style the active/current link */
#navbar #menuLinks a.active {
  background-color: black;
  color: white;
}

/* Display some links to the right */
#navbar-menu {
  float: right;
  padding: 40px 20px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s;
}


/* Mobile-Nav */


#navbar-mobile {
	display:none;
	position:relative;
	width: 100%;height:80px;
	position: fixed; /* Sticky/fixed navbar */
	z-index: 99;
}

#navbar-mobile #titleBar{
	position:absolute;
	top:0px;left:0px;
	background-color: #2b2b2b;
	width: 100%;height:80px;
	border-bottom:3px solid #ed8734;
	overflow:hidden;
}

#navbar-mobile #hamburger {
  position:absolute;
  top:0px;left:0px;
  width:80px;height:80px;
}
#navbar-mobile #hamburger span.icon{
	display:block;
	position:absolute;top:8px;left:15px;
	font-family:'standardicons';
	font-size:40px;
	text-shadow:0px 2px 2px 14px black;

}
#navbar-mobile #hamburger span.icon:after{
	content:'^';
	color:orange;
}

@keyframes ccpulse {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  100% {
    color: red;
  }
}
#navbar-mobile #hamburger span.icon.open{
	animation: ccpulse .5s forwards;
}
#navbar-mobile #hamburger span.icon.open:after{
	content:'\e071';
	animation: ccpulse .5s forwards;
}

#navbar-mobile .menuPanel{
	position:absolute;
	top:80px;left:0px;
	height:0px;
	background-color: rgba(0, 0, 0, 0.89);
	border-bottom-right-radius:10px;border-bottom-left-radius:10px;
	transition: ease-in-out .3s;
	width:100%;
	overflow:hidden;
}

#navbar-mobile .menuPanel.open{
	height:300px !important;
}

#navbar-mobile .menuPanel ul{list-style:none;padding:0;margin:0;}
#navbar-mobile .menuPanel ul li{width:33%;padding:0;margin:20px 0 0 0;display:inline-block;}
#navbar-mobile .menuPanel ul li a{
display:block;
margin:0 auto;
text-decoration:none;
width:80%;height:80%;
border:1px solid orange;
}

/* Style the logo */
#navbar-mobile #logo {
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:80px;
  text-align:center;
}
#navbar-mobile #logo a{
	background-image:url('/images/cng-ark.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	display:block;
	width:160px;height:80px;
	margin:0 auto;
}
#navbar-mobile #logo a img{height:100%;}

#navbar-mobile #login {
  position:absolute;
  top:0px;right:0px;
  width:80px;height:80px;
}
#navbar-mobile #login a{
	text-align:center;
	display:block;
	padding:8px 16px;
	width:100%;
	font-family:'standardicons';
	font-size:40px;
	text-shadow:0px 0px 1px 14px black;
}
#navbar-mobile #login a:after{
	content:'M';
	color:#0096ff;
}

#navbar-mobile #login a:active:after{
	content:'M';
	color:#cf56ea;
	padding:11px;
}



/* Style the navbar links */
#navbar-mobile #slidingMenu a {
  text-align:center;
  display:block;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 30px;
  font-size:18px;
  border:none;
  background-color:rgba(0, 0, 0, 0.93);
}
#navbar-mobile #slidingMenu a:active {background-color:orange;}
#navbar-mobile #slidingMenu a span{
	color: #989898;
	font-size:14px;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	text-transform:lowercase;
}
#navbar-mobile #slidingMenu a img.navIcon {display:inline-block;width:50px;height:50px;}


@media screen and (max-width: 1250px) {
	#navbar #logo {width:320px;height:100%;}
	#navbar #menuLinks a  {font-size:15px;}
	#navbar #menuLinks a img.navIcon  {width:20px;height:20px;}
}

@media screen and (max-width: 1050px) {
	#navbar #logo {width:220px;height:100%;}
	#navbar #menuLinks a  {font-size:12px;}
	#navbar #menuLinks a img.navIcon  {width:16px;height:16px;}
}
/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 768px) {
  #navbar {display:none;}
  #navbar-mobile {display:block;}
}

@media screen and (max-width: 580px) {

}

/* Main Content */
#pageContent{background-position:center center;background-size:cover;background-attachment:fixed;background-color:#202020;}
.zBigHeroBlock{position:relative;width:100%;height:800px;overflow:hidden;}
.zBigHeroBlock .bgContainer{position:absolute;z-index:1;top:0;left:0;width:100%;}
.zBigHeroBlock .fgContainer{display:table;position:absolute;z-index:2;top:0;left:0;width:100%;height:100%;padding:0;padding-top:140px;text-align:center;}
.zBigHeroBlock .textContainer{display:table-row;width:100%;height:40%;background-color:rgba(0, 0, 0, 0.82);}
.zBigHeroBlock .fgText{max-width:1200px;margin:0 auto;z-index:3;}
.zBigHeroBlock .mainImage{display:table-row;width:100%;height:60%;margin:20px auto;}
.zBigHeroBlock .mainImage img{max-width:1000px;margin:auto;}
.zBigHeroBlock h1{text-align:center;font-family: 'Squada One', sans-serif;color:white;font-size:42px;text-shadow:1px 1px 3px black;margin:0;padding:0;}
.zBigHeroBlock h2{text-align:center;margin-top:20px;font-family: 'Roboto', sans-serif;color:white;font-size:26px;line-height:26px;text-shadow:1px 1px 1px black;margin:10px 0 0 0;padding:0;}
.zBigHeroBlock img.sample{width:100%;padding:0;}
/* @media queries */
@media (max-width: 992px) {
.zBigHeroBlock{height:700px;}
.zBigHeroBlock h1{font-size:30px;}
.zBigHeroBlock h2{font-size:20px;}
}
@media (max-width: 768px) {
.zBigHeroBlock{height:600px;}
.zBigHeroBlock .textContainer{height:50%;}
.zBigHeroBlock .mainImage{height:50%;}
.zBigHeroBlock .mainImage img{max-width:500px;}
}
@media (max-width: 576px) {
.zBigHeroBlock h1{font-size:28px;margin:0;}
.zBigHeroBlock h2{font-size:22px;margin:0;}
.zBigHeroBlock .textContainer{height:70%;}
.zBigHeroBlock .mainImage{height:30%;}
.zBigHeroBlock .mainImage img{max-width:300px;}
}


.ctaButton{width:100%;height:60px;text-align:center;margin-top:40px;padding:0 20px;}
.ctaButton a{display:block;text-decoration:none;background-color:#626262;padding:10px 15px;border-radius:25px;font-family: 'Squada One', sans-serif;font-size:20px;color:white;width:100%;max-width:500px;border:none;cursor:pointer;margin: 0 auto;}
.ctaButton a:hover{background-color:#838383;}
/* @media queries */
@media (max-width: 992px) {
.ctaButton a{font-size:18px;}
}
@media (max-width: 576px) {
.ctaButton a{font-size:16px;}
}


/* Block Types */
.zHeroBlock{position:relative;background-repeat:no-repeat;background-position:center bottom;background-size:cover;height:560px;overflow:hidden;}
.zHeroBlock .bg{height:570px;width:100%;position:absolute;background-repeat:no-repeat;background-position:center bottom;background-size:cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);}
.zHeroBlock .bg.noblur{
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
}
.zHeroBlock .fg{height:560px;width:100%;position:absolute;}
.zHeroBlock .fg .container{max-width:1200px;max-height:500px;margin:20 auto 0 auto;padding-top:140px;}
.zHeroBlock h1{text-align:left;font-family: 'Squada One', sans-serif;color:white;font-size:40px;text-shadow:1px 1px 3px black;}
.zHeroBlock h2{margin-top:20px;text-align:left;font-family: 'Roboto', sans-serif;color:white;font-size:26px;line-height:26px;text-shadow:1px 1px 1px black;}
.zHeroBlock img.sample{width:100%;padding:0;}
/* @media queries */
@media (max-width: 992px) {
.zHeroBlock{height:700px;}
.zHeroBlock h1{font-size:30px;}
.zHeroBlock h2{font-size:20px;}
}
@media (max-width: 576px) {
.zHeroBlock{height:700px;}
.zHeroBlock h1{font-size:28px;margin:0;}
.zHeroBlock h2{font-size:22px;margin:0;}
}

.zStandardBlock{position:relative; min-height:100px;height:max-content;padding:40px 0}
.zStandardBlock.morePadding, .zBoldBlock.morePadding{padding:80px 0;}
.zStandardBlock.lessPadding, .zBoldBlock.lessPadding{padding:20px 0;}

.zBoldBlock{position:relative; min-height:100px;height:max-content;padding:40px 0;}
.zBoldBlock h1{font-family: 'Squada One', sans-serif;color:white;font-size:50px;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.47);}
.zBoldBlock h2{margin-top:20px;font-family: 'Roboto', sans-serif;color:white;font-size:28px;line-height:26px;}
/* @media queries */
@media (max-width: 992px) {
.zBoldBlock h1{font-size:30px;}
.zBoldBlock h2{font-size:20px;}
}
@media (max-width: 576px) {
.zBoldBlock h1{font-size:28px;margin:0;}
.zBoldBlock h2{font-size:22px;margin:0;}
}

.zSpacerBlock{height:100px;width:100%;background-color:transparent !important;}

/* Block Backgrounds */
.solidBg h1{font-family: 'Squada One', sans-serif;font-size:40px;}
.solidBg h1.loud, .gradientBg h1.loud{font-family: 'Squada One', sans-serif;color:white;font-size:50px;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.47);}
.solidBg h2{font-family: 'Roboto', sans-serif;font-size:20px;}
.solidBg h2.loud, .gradientBg h2.loud{font-family: 'Squada One', sans-serif;color:white;font-size:30px;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.47);}
/* @media queries */
@media (max-width: 992px) {
.solidBg h1{font-size:30px;}
.solidBg h2{font-size:20px;}
}
@media (max-width: 576px) {
.solidBg h1{font-size:28px;margin:0;text-align:center;margin-bottom:15px;}
.solidBg h2{font-size:22px;margin:0;text-align:center;}
}

/* Block Background Varients */
.whiteBg{background-color:#ffffff !important;}
.brightBg{background-color:rgba(255, 255, 255, 0.2) !important;}
.clearBg{background-color:transparent !important;}
.darkBg{background-color:rgba(0, 0, 0, 0.8) !important;}
.dimBg{background-color:rgba(0, 0, 0, 0.48) !important;}
.lightBg{background-color:#f9f9f9 !important;}
.greyBg{background-color:#cbcbcb !important;}
.dkgreyBg{background-color:#3d3d3d !important;}
.stripeBg{background-color:#000000 !important;background-image:url('../images/stripes1.jpg') !important;}

.orangeBg{background-color:#ed8734 !important;}
.blueBg{background-color:#2f84da !important;}
.goldBg{background-color:#f7c61b !important;}
.greenBg{background-color:#63cd4e !important;}
.purpleBg{background-color:#c04ed4 !important;}

.orangeBgHover{background-color:#ed8734 !important;}
.blueBgHover{background-color:#2f84da !important;}
.goldBgHover{background-color:#f7c61b !important;}
.greenBgHover{background-color:#63cd4e !important;}
.purpleBgHover{background-color:#c04ed4 !important;}
.orangeBgHover:hover{background-color:#ffa459 !important;}
.blueBgHover:hover{background-color:#53a5f5 !important;}
.goldBgHover:hover{background-color:#ffdd5e !important;}
.greenBgHover:hover{background-color:#89f873 !important;}
.purpleBgHover:hover{background-color:#de6bf2 !important;}

.orangeText{color:#ed8734 !important;}
.blueText{color:#2f84da !important;}
.goldText{color:#f7c61b !important;}
.greenText{color:#63cd4e !important;}
.purpleText{color:#c04ed4 !important;}
.shadowText{text-shadow:0px 1px 4px black !important;}

.orangeBorder{border-color:#ed8734 !important;}
.blueBorder{border-color:#2f84da !important;}
.goldBorder{border-color:#f7c61b !important;}
.greenBorder{border-color:#63cd4e !important;}
.purpleBorder{border-color:#c04ed4 !important;}

.orangeBorderHover:hover{border-color:#ed8734 !important;}
.blueBorderHover:hover{border-color:#2f84da !important;}
.goldBorderHover:hover{border-color:#f7c61b !important;}
.greenBorderHover:hover{border-color:#63cd4e !important;}
.purpleBorderHover:hover{border-color:#c04ed4 !important;}

.dkorangeBg{background-color:#b55e16;}
.dkblueBg{background-color:#0f5aa6;}
.dkgoldBg{background-color:#c7a00f;}
.dkgreenBg{background-color:#3ea629;}
.dkpurpleBg{background-color:#9226a5;}

.whiteBg h1, .lightBg h1, .greyBg h1, .brightBg h1{color:black !important;}
.whiteBg h2, .lightBg h2, .greyBg h2, .brightBg h2{color:black !important;}
.whiteBg p, .lightBg p, .greyBg p, brightBg p{color:rgba(0, 0, 0, 0.74) !important;}
.stripeBg h1, .goldBg h1, .blueBg h1, .greenBg h1, .dkblueBg h1, .dkgreenBg h1, .orangeBg h1, .purpleBg h1, .dkorangeBg h1, .dkpurpleBg h1, .dkgreyBg h1, .darkBg h1, .clearBg h1{color:white;}
.stripeBg h2, .goldBg h2, .blueBg h2, .greenBg h2, .dkblueBg h2, .dkgreenBg h2, .orangeBg h2, .purpleBg h2, .dkorangeBg h2, .dkpurpleBg h2, .dkgreyBg h2, .darkBg h2, .clearBg h1{color:white;}
.stripeBg p, .goldBg p, .blueBg p, .greenBg p, .dkblueBg p, .dkgreenBg p, .orangeBg p, .purpleBg p, .dkorangeBg p, .dkpurpleBg p, .dkgreyBg p{color:rgba(255, 255, 255, 0.68);}

.gradientBg.dl-blue{background: #315c7f; /* Old browsers */
background: -moz-linear-gradient(top,  #315c7f 0%, #62acc9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #315c7f 0%,#62acc9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #315c7f 0%,#62acc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#315c7f', endColorstr='#62acc9',GradientType=0 ); /* IE6-9 */}
.gradientBg.dl-blue h1{color:#bcd0ff;}
.gradientBg.dl-blue h2{color:#192757;}
.gradientBg.dl-blue h2.loud{color:#ffffff;}

.gradientBg.dl-green{background: #628231; /* Old browsers */
background: -moz-linear-gradient(top,  #628231 0%, #bcc946 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #628231 0%,#bcc946 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #628231 0%,#bcc946 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#628231', endColorstr='#bcc946',GradientType=0 ); /* IE6-9 */}
.gradientBg.dl-green h1{color:#ddffc2;}
.gradientBg.dl-green h2{color:#2d6724;}
.gradientBg.dl-green h2.loud{color:#ffffff;}

.gradientBg.dl-orange{background: #dd6e00; /* Old browsers */
background: -moz-linear-gradient(top,  #dd6e00 0%, #ffbe47 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #dd6e00 0%,#ffbe47 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #dd6e00 0%,#ffbe47 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd6e00', endColorstr='#ffbe47',GradientType=0 ); /* IE6-9 */}
.gradientBg.dl-orange h1{color:#ffe3b9;}
.gradientBg.dl-orange h2{color:#5c3b1c;}
.gradientBg.dl-orange h2.loud{color:#ffffff;}

.gradientBg.dl-silver{background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(top,  #cccccc 0%, #fcfcfc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #cccccc 0%,#fcfcfc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #cccccc 0%,#fcfcfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */}
.gradientBg.dl-silver h1{color:#2f3030;}
.gradientBg.dl-silver h2{color:#65666a;}
.gradientBg.dl-silver h2.loud{color:#c4c4c4;}
.gradientBg.dl-silver p {color:#4c4c4d;}

/* imageCard */
a.imageCard{position:relative;display:block;width:100%;max-width:300px;min-width:200px;background-repeat:no-repeat;background-position:center center;background-size:100%;height:320px;margin:20px auto;background-color:#393939;text-decoration:none;cursor:pointer;overflow:hidden;border-top-left-radius:10px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
-webkit-filter: brightness(.8);filter: brightness(.8);
}
a.imageCard.wide{max-width:500px;min-width:200px;}
a.imageCard span.title{position:absolute;top:0px;padding:12px;width:100%;font-family: 'Squada One', sans-serif;color:rgba(255, 255, 255, 0.65);font-size:22px;text-align:center;}
a.imageCard span.description{position:absolute;bottom:0px;padding:12px 12px 20px 12px;width:100%;font-family: 'Roboto', sans-serif;color:white;font-size:14px;}
a.imageCard:hover{box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.7);background-size:120%;-webkit-filter: brightness(1);filter: brightness(1);}
a.imageCard:hover span.title{color:white;}

/* Video Modal */
.modal.videopopup{background-color:rgba(0, 0, 0, 0.63);padding:0 !important;}
.modal.videopopup .modal-dialog{background-color:transparent !important;}
.modal.videopopup .modal-dialog .modal-content{background: rgb(92,92,92);
background: linear-gradient(0deg, rgba(92,92,92,1) 0%, rgba(31,31,31,1) 100%);box-shadow:0px 0px 29px black;}
.modal.videopopup .modal-header{position:relative;background-color:transparent !important;height:40px;border:none;}
.modal.videopopup .modal-header .titleContainer{width:96%;position:absolute;top:10px;text-align:center;}
.modal.videopopup .modal-header .titleContainer span{font-family: 'Roboto', sans-serif;color:white;font-size:26px;}
.modal.videopopup .modal-header button{position:absolute;top:6px;right:10px;}
.modal.videopopup .modal-header button span{color:red;font-size:35px;}
.modal.videopopup .modal-body{min-height:500px;}
.modal.videopopup .modal-body iframe{height:500px;width:100%;}
/* @media queries */
@media (max-width: 992px) {
.modal.videopopup .modal-body iframe{height:400px;}
.modal.videopopup .modal-body{min-height:400px;}
}
@media (max-width: 576px) {
.modal.videopopup .modal-body iframe{height:300px;}
.modal.videopopup .modal-body{min-height:300px;}
}

.coordinates{font-family: 'Squada One', sans-serif;background-color:rgba(0, 0, 0, 0.62);width:max-content;position:absolute;top:68px;right:10px;border-radius:4px;padding:2px 7px 5px 7px;}
.coordinates span{font-family: 'Roboto', sans-serif;color:orange;}

.clickdetail{font-family: 'Roboto', sans-serif;font-size:10px;background-color:black;width:max-content;position:absolute;bottom:0px;right:0px;border-top-left-radius:8px;padding:1px 4px 2px 4px;}

/* Footer */
#scrollingFooterBg {
  width: 100%;
  height: 340px;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto 100%;
/*adjust s value for speed*/
  animation: scrollingFooter 300s linear infinite;
}

@keyframes scrollingFooter {
  from {
    background-position: 0 0;
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    background-position: -10000px 0;
  }
}

.contentFooter{position:relative;height:340px;width:100%;overflow:hidden;border-bottom:20px solid #ffb700;border-top:2px solid black;box-shadow:inset 0px 1px 4px black}
.contentFooter .copyright{position:absolute;bottom:0px;color:orange;background-color:rgba(0, 0, 0, 0.62);font-size:12px;padding:4px 8px;border-top-left-radius:8px;border-top-right-radius:8px;}
/* @media queries */
@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {
}
@media (max-width: 576px) {

}
@media (max-width: 374px) {

}