.fa-size{font-size:1.5rem;}

.bg-grey{background-color: var(--blue);}
	  
    .owl-carousel .owl-item img {
        transform-style: initial;
        height: 100%;
        object-fit: cover;
    }

    .owl-thumb-item img {
        width: 150px;
        height: auto;
        border: 1px solid var(--light-blue);
        background-color:var(--white);
    }

    .owl-thumbs {

        width: 100%;
        text-align: center;
        padding: 5%;
    }

    .owl-thumb-item {
        display: table-cell;
        border: none;
        background: none;
        padding: 0;
        opacity: .4;
        padding: .25rem;
    }

    .owl-thumb-item.active {
        opacity: 1;
    }
    .modal-content {border: none;
  border-radius: .5rem;
	backdrop-filter: blur(5.5px);
-webkit-backdrop-filter:blur(5.5px);
box-shadow: 0 8px 12px 0 rgba( 31, 38, 135, 0.37 );
background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0));
border: 1px solid rgba( 255, 255, 255, 0.2 );
	background-color: transparent;}
	
	.modal-backdrop {background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 51% 33%, hsla(189,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 34% 65%, hsla(333,100%,87%,1) 0px, transparent 50%),
radial-gradient(at 100% 48%, hsla(0,0%,100%,0.73) 0px, transparent 50%),
radial-gradient(at 71% 59%, hsla(229,87%,81%,1) 0px, transparent 50%),
radial-gradient(at 38% 44%, hsla(333,100%,87%,1) 0px, transparent 50%),
radial-gradient(at 69% 45%, hsla(229,87%,81%,1) 0px, transparent 50%),
radial-gradient(at 74% 0%, hsla(228,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 44% 100%, hsla(69,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 99% 97%, hsla(69,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(72,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 32% 0%, hsla(189,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(354,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(20,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(240,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(342,0%,100%,1) 0px, transparent 50%);
	background-position: center;
	background-size: 1920px;
	background-repeat: no-repeat;
/*background-image:url(../images/background-modal-min.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;*/}
	
	.modal-backdrop.show {
  opacity: .8;
}

.modal-body {padding:0;}
.modal-dialog-scrollable .modal-body {
  overflow-x: hidden;
}

.card-footer:last-child {
  border-radius: 0 0 .5rem .5rem;
}

.card-footer{border-top:none;}

 /* Hide scrollbar for Chrome, Safari and Opera */
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal-dialog-scrollable .modal-body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 
.card-header{border-bottom:none;background-color:unset;}
.card-header:first-child {
  border-radius: .5rem .5rem 0 0;
}
.link-card{cursor:pointer; color:white;}
.link-card:hover{text-decoration: 2px underline var(--red) !important;}

.bg-caption{background-color: rgba(255, 255, 255,.2);
    border-radius: .5rem .5rem 0 0;
}


.grid {
	position: relative;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	width: 100%;
	height: auto;
	background: var(--blue);
	text-align: center;
	cursor: pointer;
	margin:auto;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.6;
}

.grid figure figcaption {
	padding: 2em;
	color: var(--blue);
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-modal {
	background: transparent;
}

figure.effect-modal img {
	max-width: none;
	width: -webkit-calc(100% + 20px);
	width: calc(100% + 20px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-modal:hover img {
	opacity: 0.1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-modal figcaption {
	text-align: left;
}

figure.effect-modal h2 {
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
	text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: .8rem;
text-underline-offset: -0.2em;
text-decoration-color: var(--red-light);
text-decoration-skip-ink: none;
text-decoration-skip: none;

}


figure.effect-modal h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--blue);
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

figure.effect-modal:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-modal p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-modal:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



.link-modal {
	color: var(--blue);
	text-decoration: none;
	position: relative;
	padding-left:0 !important;
}

.link-modal:hover:after { 
  width: 100%; 
  left: 0; 
}

.link-modal:hover{color:var(--blue);}

.link-modal:after{background: none repeat scroll 0 0 transparent;
bottom: 15%;
content: "";
display: block;
height: 30%;
left: 0;
position: absolute;
background: var(--red);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
margin-left: 5%;
transform: skew(-0.06turn);
z-index: -1;
}