@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
# Profiles
--------------------------------------------------------------*/


.profile {
  position: relative;
  display: block;
  padding: 80px 0 80px; 
}
.profile .profile-area{
	position: relative;
	overflow: hidden;
	transition: all .5s;
	border-radius: 10px;
}
.profile .profile-area:hover .profile-img .profile-overlay{
	width: 100%;
  	height: 100%;
  	transform: skew(0deg, 0deg) translateY(0px);
    -webkit-transform: skew(0deg, 0deg) translateY(0px);
    -moz-transform: skew(0deg, 0deg) translateY(0px);
    opacity: .8;
	padding-bottom: 0;
}

@media(min-width: 768px) and (max-width: 991px) {
	.profile .profile-area:hover .profile-img .profile-overlay {
		opacity: 1;
	}
	.profile .profile-area:hover .profile-img .fix {
		padding-bottom: 50px;
	}
}

/*for home profile start*/
.profile .profile-area:hover .profile-img .profile-overlays{
	width: 100%;
  	height: 100%;
  	transform: skew(0deg, 0deg) translateY(0px);
    -webkit-transform: skew(0deg, 0deg) translateY(0px);
    -moz-transform: skew(0deg, 0deg) translateY(0px);
    opacity: 1;
}
/*for home profile end*/

.profile .profile-area:hover .profile-img .profile-info{
	margin-top: 129px; 				*/*80px*/ 
	transform: skew(0deg, 0deg) translateY(0px);
    -webkit-transform: skew(0deg, 0deg) translateY(0px);
    -moz-transform: skew(0deg, 0deg) translateY(0px);
}
.profile .profile-area:hover .profile-img .profile-info .btn{
	margin-top: 26px;
	display: inline-block;
}
.profile ..profile-area .profile-img {
	position: relative;
	overflow: hidden;
}
.profile .profile-area .profile-img img{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
}
.profile .profile-img .profile-overlay{
	position: absolute;
	background-color: var(--color-secondary);
	bottom: 0;
	left: 0;
	width: 100%;
  	height: 135px;
  	transform: skew(0deg, -4deg) translateY(40px);
    -webkit-transform: skew(0deg, -4deg) translateY(40px);
    -moz-transform: skew(0deg, -4deg) translateY(40px);
    transition: all .5s;
	border-top: 2px solid white;

}

/*for home profile start*/
.profile .profile-img .profile-overlays{
	position: absolute;
	background-color: var(--color-secondary);
	bottom: 0;
	left: 0;
	width: 100%;
  	height: 135px;
  	transform: skew(0deg, -4deg) translateY(40px);
    -webkit-transform: skew(0deg, -4deg) translateY(40px);
    -moz-transform: skew(0deg, -4deg) translateY(40px);
    transition: all .5s;
	border-top: 2px solid white;
}
/*for home profile end*/

.profile .profile-img .profile-info {
	text-align: center;
	transform: skew(0deg, 4deg) translateY(25px);
    -webkit-transform: skew(0deg, 4deg) translateY(25px);
    -moz-transform: skew(0deg, 4deg) translateY(25px);
    transition: all .5s;
}
.profile .profile-img .profile-info h4 {
	font-size: 19px;
	color: #fff;
	font-weight: bold;
	line-height: 1;
}
.profile .profile-img .profile-info p {
	color: var(--color-primary);
	font-size: 21px;
	font-family: var(--font-script);
	line-height: 1;
}

.profile .btn-box {
  position: relative;
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
  -webkit-transition-delay: 1000ms;
  transition-delay: 1000ms;
  -webkit-transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: opacity 2000ms ease, -webkit-transform 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease;
  transition: transform 2000ms ease, opacity 2000ms ease, -webkit-transform 2000ms ease;
}
.profile .btn {
  position: relative;
  display: none;
  vertical-align: middle;
  -webkit-appearance: none;
  outline: none !important;
  background-color: var(--color-white);
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  border-radius: 30px;
  padding: 10px 25px 10px;
  transition: all 0.5s linear;
  overflow: hidden;
  z-index: 1;
}
.profile .btn:before {
  transition-duration: 600ms;
  position: absolute;
  width: 200%;
  height: 200%;
  content: "";
  top: -230%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background-color: var(--color-primary);
  font-weight: 700;
}

.profile .btn:hover {
  color: var(--color-black);
  font-weight: 700;
}

.profile .btn:hover:before {
  top: -40%;
}

/*profile Responsive*/


@media only screen and (min-width: 768px) and (max-width: 991px) {
   .profile .profile-area {
    	margin-bottom: 0px;
    }
}

@media only screen and (max-width: 767px) {   
    .profile .profile-area {
    	margin-bottom: 0px;
    }
}

@media only screen and (max-width: 350px) {
	
    .profile .profile-area {
    	margin-bottom: 150px;
    }
}

@media only screen (min-width: 480px) and (max-width: 575px) {	
	.profile .profile-area:hover .profile-img .profile-info{
		margin-top: 130px;
	}
}

@media only screen (max-width: 767px) {	
	.profile .profile-area:hover .profile-img .profile-info {
		margin-top: 50px;
	}
}

@media (min-width: 676px) and (max-width: 768px){
	.profile .profile-area:hover .profile-img .profile-info {
		margin-top: 180px;
	}	
}

@media (min-width: 769px) and (max-width: 991px){
	.profile .profile-area:hover .profile-img .profile-info {
		margin-top: 100px;
	}	
}

/*masonry grid*/

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

figure > img {
  grid-row: 1 / -1;
  grid-column: 1;
}

figure a {
  color: black;
  text-decoration: none;
}

figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255,255,255,.5);
  padding: .2em .5em;
  justify-self: start;
}

.container-photos {
  column-count: 3;
  column-gap: 10px;
  margin-top: 1em;
}

/*modal styles*/

.modal-title { 
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	padding-left: 20px;
	color: var(--color-default);
} 

.modal-body h4 { 
	font-weight: 900;	
}

.modal-body h6 { 
	color: var(--color-primary);
	font-family:var(--font-script); 
	font-size: 24px;
	font-weight: 900;
}

.modal p {
	font-size: 16px;
	color: var(--color-default);
	font-family:var(--font-default); 
	line-height: 24px;
	margin-bottom: 1em;
}

.modal-img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	shape-outside: circle(50%);
	margin-right: 2em;
	margin-bottom: 1em;
	float: left;
	border: 2px solid var(--color-primary); 
	
}