/* 
*********************************************************
CARDS CSS
********************************************************* 
*/



 
/*::::::::: cardBlock ::::::::::::*/




.cardBlock  { 
  display: block;
  -moz-animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  animation-name: fadeIn;	
  animation-timing-function: ease-in-out;
  /*background-color: lightyellow !important;*/
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

.xlr .cardBlock-item,
.xll .cardBlock-item {
	/*background-color: lightblue !important;*/
	/*padding: 10px 40px 20px 40px;	*/
}

.xlr .cardBlock-content,
.xll .cardBlock-content {
	/*background-color: lightpink !important;*/
	width: 70%;
}
.xl .cardBlock-item {
	padding: 0px;	
}


@media (max-width: 768px) /* navbar-expand-sm */ {
.xlr .cardBlock-item,
.xll .cardBlock-item {
	padding: 30px 0px;	
}
.xlr .cardBlock-content,
.xll .cardBlock-content {
	width: 70%;
}

.xl .cardBlock-item {
	padding: 30px 20px;	
}

}





/*CONTENT*/
#cardBlock .cardBlock.xl .cardBlock-content {
	width: 55%;
}
#cardBlock .cardBlock.lg .cardBlock-content,
#cardBlock .cardBlock.md .cardBlock-content,
#cardBlock .cardBlock.sm .cardBlock-content {
	width: 70%;
}
#cardBlock .cardBlock.xs .cardBlock-content {
	width: 80%;
}

@media (max-width: 768px) /* navbar-expand-sm */ {

#cardBlock .cardBlock.xl .cardBlock-content {
	width: 75%;
}
#cardBlock .cardBlock.lg .cardBlock-content,
#cardBlock .cardBlock.md .cardBlock-content,
#cardBlock .cardBlock.sm .cardBlock-content {
	width: 85%;
}
#cardBlock .cardBlock.xs .cardBlock-content {
	width: 90%;
}

}

@media (max-width: 576px) /* navbar-expand-xs */ {

#cardBlock .cardBlock.xl .cardBlock-content {
	width: 97%;
}
#cardBlock .cardBlock.lg .cardBlock-content,
#cardBlock .cardBlock.md .cardBlock-content {
	width: 85%;
}
#cardBlock .cardBlock.sm .cardBlock-content,
#cardBlock .cardBlock.xs .cardBlock-content {
	width: 80%;
}


}





@media (min-width: 1200px) /* navbar-expand-xs */ {
/*CONTENT*/
.xll .cardBlock .cardBlock-content .h1,
.xlr .cardBlock .cardBlock-content .h1 {font-size: 375%;}
.xll .cardBlock .cardBlock-content .h3,
.xlr .cardBlock .cardBlock-content .h3 {font-size: 190%;}

#cardBlock .cardBlock.xl .cardBlock-content .h1 {font-size: 400%;}
}

@media (min-width: 769px) /* navbar-expand-xs */ {
/*CONTENT*/
.xll .cardBlock .cardBlock-content .h1,
.xlr .cardBlock .cardBlock-content .h1 {font-size: 325%;}
.xll .cardBlock .cardBlock-content .h3,
.xlr .cardBlock .cardBlock-content .h3 {font-size: 175%;}
}

@media (max-width: 768px) /* navbar-expand-xs */ {

/*CONTENT*/
#cardBlock .cardBlock.xl .cardBlock-content .h1,
.xll .cardBlock .cardBlock-content .h1,
.xlr .cardBlock .cardBlock-content .h1 {font-size: 300%;}
#cardBlock .cardBlock.xl .cardBlock-content .h3,
.xll .cardBlock .cardBlock-content .h3,
.xlr .cardBlock .cardBlock-content .h3 {font-size: 160%;}

#cardBlock .cardBlock.lg .cardBlock-content .h2 {font-size: 260%;}
#cardBlock .cardBlock.lg .cardBlock-content .h4 {font-size: 160%;}

#cardBlock .cardBlock.md .cardBlock-content .h3 {font-size: 230%;}
#cardBlock .cardBlock.md .cardBlock-content .h5 {font-size: 130%;}

#cardBlock .cardBlock.sm .cardBlock-content .h4 {font-size: 210%;}
#cardBlock .cardBlock.sm .cardBlock-content .h6 {font-size: 120%;}

#cardBlock .cardBlock.xs .cardBlock-content .h6 {font-size: 130%;}

}








.cardBlock-wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: 0;
    border: 0px solid #fff;
    background: transparent;
    overflow: hidden;
}
.cardBlock-viewport, 
.cardBlock-wrapper{
    position:relative;
    width:100%;
    top:0;
    left:0;
}
.cardBlock-wrapper .cardBlock-viewport {
    border: none !important;
	/*background-color: black !important;*/

}

.cardBlock .bgHolder.parallax {
	/* background-attachment: fixed !important; /* sticky bg, parallax */
}
.cover.Center {background-position: center center;}
.cover.Left {background-position: left center;}
.cover.Right {background-position: right center;}
.cover.Top {background-position: center top;}
.cover.Bottom {background-position: center bottom;}
.cover.Left-Top  {background-position: left top;}
.cover.Left-Bottom  {background-position: left bottom;}
.cover.Right-Top  {background-position: right top;}
.cover.Right-Bottom {background-position: right bottom;}










/* COVER (image) */
.cardBlock .cover.bgHolder {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	-webkit-transition: -webkit-transform 500ms  ease-in-out;
	transition: transform 500ms  ease-in-out;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

/* CONTAIN (logo) */
.cardBlock .contain.bgHolder {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-repeat: no-repeat;
	-webkit-background-size: contain !important;
	-moz-background-size: contain !important;
	-o-background-size: contain !important;
	background-size: contain !important;
	max-width: 100%;
}



/* Ken Burns simulate */
.cardBlock .cover.bgHolder.kenburns,
.cardBlock .contain.bgHolder.kenburns{
	-webkit-transition: -webkit-transform 500ms  ease-in-out;
	transition: transform 500ms  ease-in-out;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

}

.cardBlock:hover .cover.bgHolder.kenburns,
.cardBlock:hover .contain.bgHolder.kenburns{
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

/*.cardBlock .cardItem img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	-webkit-transition: -webkit-transform 10s;
	transition: transform 10s;
}*/



.cardBlock-item {
	padding: 20px;
	overflow: hidden;
	display: block;
	position: relative;
}


.cardBlock-item:hover .overlay {
  opacity: .5 !important;
}
.cardBlock-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.25;
  transition: .5s ease;
  background-color: black;
}





.card-color1 .list-hit a:hover div .h1, .list-hit a:hover div .h1, 
.card-color1 .list-hit a:hover div .h2, .list-hit a:hover div .h2,
.card-color1 .list-hit a:hover div .h3, .list-hit a:hover div .h3,
.card-color1 .list-hit a:hover div .h4, .list-hit a:hover div .h4,
.card-color1 .list-hit a:hover div .h4, .list-hit a:hover div .h5,
.card-color1 .list-hit a:hover div .h4, .list-hit a:hover div .h6,
.card-color1 .list-hit a .h1:hover, .list-hit a .h1:hover, 
.card-color1 .list-hit a .h2:hover, .list-hit a .h2:hover, 
.card-color1 .list-hit a .h3:hover, .list-hit a .h3:hover, 
.card-color1 .list-hit a .h4:hover, .list-hit a .h4:hover, 
.card-color1 .list-hit a .h5:hover, .list-hit a .h5:hover, 
.card-color1 .list-hit a .h6:hover, .list-hit a .h6:hover, 
.card-color1 .list-hit a:hover div h1, .list-hit a:hover div h1, 
.card-color1 .list-hit a:hover div h2, .list-hit a:hover div h2,
.card-color1 .list-hit a:hover div h3, .list-hit a:hover div h3,
.card-color1 .list-hit a:hover div h4, .list-hit a:hover div h4,
.card-color1 .list-hit a:hover div h4, .list-hit a:hover div h5,
.card-color1 .list-hit a:hover div h4, .list-hit a:hover div h6 {
	color: var(--color1xl, #787878) !important;
}

.card-color2 .list-hit a:hover div .h1, 
.card-color2 .list-hit a:hover div .h2,
.card-color2 .list-hit a:hover div .h3,
.card-color2 .list-hit a:hover div .h4,
.card-color2 .list-hit a:hover div .h5,
.card-color2 .list-hit a:hover div .h6,
.card-color2 .list-hit a:hover div h1, 
.card-color2 .list-hit a:hover div h2,
.card-color2 .list-hit a:hover div h3,
.card-color2 .list-hit a:hover div h4,
.card-color2 .list-hit a:hover div h5,
.card-color2 .list-hit a:hover div h6 {
	color: var(--color2xl, #c1c1c1) !important;
}

.card-color3 .list-hit a:hover div .h1, .list-hit a:hover div .h1, 
.card-color3 .list-hit a:hover div .h2, .list-hit a:hover div .h2,
.card-color3 .list-hit a:hover div .h3, .list-hit a:hover div .h3,
.card-color3 .list-hit a:hover div .h4, .list-hit a:hover div .h4,
.card-color3 .list-hit a:hover div .h4, .list-hit a:hover div .h5,
.card-color3 .list-hit a:hover div .h4, .list-hit a:hover div .h6,
.card-color3 .list-hit a:hover div h1, .list-hit a:hover div h1, 
.card-color3 .list-hit a:hover div h2, .list-hit a:hover div h2,
.card-color3 .list-hit a:hover div h3, .list-hit a:hover div h3,
.card-color3 .list-hit a:hover div h4, .list-hit a:hover div h4,
.card-color3 .list-hit a:hover div h4, .list-hit a:hover div h5,
.card-color3 .list-hit a:hover div h4, .list-hit a:hover div h6 {
	color: var(--color1, #424242) !important;
}



#cardBlock .card-color1 .list-hit a div .h1, #cardBlock .list-hit a div .h1, 
#cardBlock .card-color1 .list-hit a div .h2, #cardBlock .list-hit a div .h2,
#cardBlock .card-color1 .list-hit a div .h3, #cardBlock .list-hit a div .h3,
#cardBlock .card-color1 .list-hit a div .h4, #cardBlock .list-hit a div .h4,
#cardBlock .card-color1 .list-hit a div .h4, #cardBlock .list-hit a div .h5,
#cardBlock .card-color1 .list-hit a div .h4, #cardBlock .list-hit a div .h6 {
	color: white !important;
}
#cardBlock .card-color1 .list-hit a:hover div .h1, #cardBlock .list-hit a:hover div .h1, 
#cardBlock .card-color1 .list-hit a:hover div .h2, #cardBlock .list-hit a:hover div .h2,
#cardBlock .card-color1 .list-hit a:hover div .h3, #cardBlock .list-hit a:hover div .h3,
#cardBlock .card-color1 .list-hit a:hover div .h4, #cardBlock .list-hit a:hover div .h4,
#cardBlock .card-color1 .list-hit a:hover div .h4, #cardBlock .list-hit a:hover div .h5,
#cardBlock .card-color1 .list-hit a:hover div .h4, #cardBlock .list-hit a:hover div .h6 {
	color: var(--color1xl, #787878) !important;
}



.h6.subclass.nolink a:hover {
	color: var(--color1xl, #787878) !important;
}






.cardContain {
  position: relative;
  width: 100%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.2;
  transition: .5s ease;
  background-color: black;
}

.cardContain:hover .overlay {
  opacity: .65;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardText-inner {
  color: white;
  font-size: 120%;
  position: absolute;
  bottom: 5%;
  left: 5%;
  text-align: left;
}

.cardText-inner:hover {
  opacity: 1;
}

/*.overlay::after {
	display: block;
	position: absolute;
	background-image: linear-gradient(to bottom, transparent 50%, black 100%);
	margin-top: 0;
	height: 100%;
	width: 100%;
	content: '';
}*/





.ImgDesc-top-lt,
.ImgDesc-top-drk {
	color: #424242;
	font-size: 110%;
	line-height: 105%;
	margin-top: 0px;
	text-transform: uppercase;
	background-color: rgb(255,255,255,0.4);
	padding: 15px 3px 13px 3px;
	margin: 0px;
}
.ImgDesc-top-drk {
	color: #EEEEEE;
	background-color: rgb(0,0,0,0.4);
}


/* EXTRA SMALL devices (iPhone Horizontal and smaller) */
@media (max-width: 568px) {
.ImgDesc-top-lt,
.ImgDesc-top-drk {
	font-size: 80%;
}

}