/* ------------------------------------------------------------ *\
	Intro
\* ------------------------------------------------------------ */

.intro {
	padding: 44px 0; 
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	font-family: 'Roboto Condensed', sans-serif; 
}

.intro + .container {
	position: relative; 	
}

.intro p {
	font-family: 'Roboto Condensed', sans-serif; 
	color: #fff;
}

.intro .intro-title {
	font-size: 35px; 
	margin-top: 0; 
	margin-bottom: 35px; 
	line-height: 1.2; 
}

.intro .intro-logo {
	position: relative; 
	display: inline-block; 
	vertical-align: middle; 
	border-radius: 50%;
	background: #fff;	
	text-align: center;  
	height: 105px; 
	width: 105px; 	
/* 	line-height: 105px; */
	overflow: hidden;
	color: #181f38;
	border-color: #fff;
}

.intro .intro-logo:hover,
.intro .intro-logo:focus {
	background: #fff; 
	border-color: #fff;
}

.intro .intro-logo img {
	max-width: 95px; 
	position: absolute; 
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);
}

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

.intro .button-transparent {
	background-color: rgba(255, 255, 255, .1); 
	border-color: rgba(255, 255, 255, 0);
	color: #fff;
}

.intro .intro-actions {
	display: flex; 
	align-content: center;
}

.intro .button-rounded {
 	padding: 7px 7px 7px 18px; 
 	line-height: 24px; 
	font-weight: 400; 
	color: rgba(255, 255, 255, .75);
	background: rgba( 255, 255, 255, .1 ); 
	border-color: transparent;
}
.intro .button-rounded:hover {
	background: rgba( 255, 255, 255, .1 );
	border-color: transparent;
}

.intro .button-rounded:hover i {
	transform: translateX(4px);
}

.intro .button-rounded i {
	transition: .2s;
	color: rgba(255, 255, 255, 1); 
}

.intro .button-transparent:hover {
	border-color: rgba(255, 255, 255, .6);
	background-color: rgba(255, 255, 255, .2);
}

.intro .intro-username {
	text-transform: uppercase; 
	font-size: 24px; 
	font-family: 'Roboto Condensed', sans-serif; 
	letter-spacing: .01em;
	font-weight: 700; 
}

.intro .stars {
	margin-left: 0; 
	margin-bottom: 3px; 
}

.intro .button-socials {
	overflow:visible;
}

.intro .button-socials:focus,
.intro .button-socials:hover {
	border-color: transparent;
}

.intro .button-socials.shown {
	background: rgba(0, 0, 0, .3); 
}

.intro .socials-icons-holder {
	display: block; 
	position: absolute;
	top: -100%; 
	font-size: 0; 
	left: 50%; 
	transform: translateX(-50%);
	min-width: 150px; 
}

.intro .button-socials.shown .socials-icons-holder a {
	visibility: visible; 
}

.intro .socials-icons-holder a {
	display: inline-block; 
	vertical-align: middle; 
	opacity: 0; 
	visibility: hidden;
	transition: .2s;
}

.intro .socials-icons-holder i {
	font-size: 30px; 
	transition: .2s;
}

.intro .socials-icons-holder a:focus i,
.intro .socials-icons-holder a:hover i {
	opacity: .8; 
}

.socials-icons-holder .icon-artboard-32-copy-5 {
	color: #3b5999;
}
.socials-icons-holder .icon-artboard-32-copy-6 {
	color: #55acee;
}
.socials-icons-holder .icon-artboard-32-copy-7 {
	color: #dd4b39;
}

.intro .socials-icons-holder.shown {
	display: block; 
}

@media(min-width: 1200px) {
	.intro .socials-icons-holder {
		top: 0; 
	}
	.intro .button-socials.shown > i {
		opacity: 0; 
	}
}
/* ------------------------------------------------------------ *\
	Intro Mobile
\* ------------------------------------------------------------ */

.intro-mobile .intro-logo,
.intro-mobile .intro-logo.button {
	max-width: 28vw;
	max-height: 28vw; 	
	line-height: 105px;
	margin-bottom: 30px; 
}

.intro-mobile .intro-aside {
	margin-bottom: 31px; 
}

.intro-mobile .intro-aside-inner {
	max-width: 700px;
	margin: 0 auto; 
}

.intro-mobile .intro-actions {
	margin: 0 -7px 22px; 
}

.intro-mobile .intro-actions .button {
	margin: 7px; 
}

.intro-mobile .intro-actions .button {
	display: block; 
	font-size: 14px; 
	min-height: auto;
	min-height: 46px; 
	/* line-height: 34px;  */
	line-height: 1.25; 
	display: flex;
	align-items: center;
	justify-content: space-around; 
	padding: 6px 0px; 
}

.intro-mobile .intro-actions .button-danger {
	/* line-height: 1.25; 
	display: flex; 
	align-items: center;
	justify-content: space-around; */
}
.intro-mobile .intro-actions .button-danger br {
	display: none;
}

.intro-mobile .feature {
	margin-top: 5px; 
}

.intro-mobile .features .feature span {
	display: inline-block; 
	vertical-align: middle; 
}

.intro-mobile .socials-icons-holder i {
	line-height: 45px; 
}

.intro-mobile .socials-icons-holder {
	left: 75%;  
}

@media ( min-width: 480px ) {
	.intro-mobile .intro-actions .button-danger br {
		display: block; 
	}

	.intro-mobile .socials-icons-holder {
		left: 50%;  
		top: 0; 
	}
	.intro-mobile .button-socials.shown > i {
		opacity: 0; 
	}
}

/* ------------------------------------------------------------ *\
	Intro Descktop
\* ------------------------------------------------------------ */

.intro-desktop > .container {
	display: flex;
	align-items: stretch; 
}

.intro-desktop .button {
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
}

.intro-desktop .intro-logo {
	width: 187px; 
	height: 187px; 
	/* line-height: 187px;  */
	margin-bottom: 43px; 
}

.intro-desktop .intro-logo img {
	max-width: 167px;
}

.intro-desktop .intro-aside {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 29px; 
}

.intro-desktop .intro-actions {
	margin: 0 -10px; 
}

.intro-desktop .intro-actions .button {
	margin: 10px; 
}

.intro-desktop .button i {
	/* margin-top: 10px;  */
	line-height: 48px; 
}

.intro-desktop .intro-aside .button-rounded {
	min-width: 204px;
	margin-bottom: 10px; 
}

.intro-desktop .intro-content {
	display: flex; 
	flex-wrap: wrap;
	align-items: flex-end;
}

.intro-desktop .intro-content > * {
	width: 100%; 
}

.intro-desktop .intro-content > .intro-actions {
	width: calc(100% + 20px); 
}

.intro-desktop .features {
	margin-bottom: 43px; 
}

.intro-desktop .features strong {
	font-size: 31px; 
}

@media ( max-width: 1200px ) {
	/* .intro-desktop .features {
		margin-bottom: 30px; 
	} */
	
	.intro-desktop .intro-title br { 
		display: none; 
	}
}

@media ( max-width: 992px ) {
	.intro-desktop .feature strong {
		font-size: 25px; 
	}

	.intro-desktop .intro-logo {
		margin-bottom: 85px; 
	}
}

/* ------------------------------------------------------------ *\
	Intro Profile
\* ------------------------------------------------------------ */

.intro-profile {
	position: relative; 
	padding: 90px 0;
	text-align: center; 
	background-image: url(/wp-content/themes/ministrap-child/assets/images/pattern1-min.png);
	background-position: center;
	background-repeat: no-repeat;
}

.intro-profile .intro-inner {
	position: relative; 
	display: inline-block; 
	padding: 0 75px; 
	margin-bottom: 4px; 
}

.intro-profile .feature {
	min-width: 33.33%;
}

.intro-profile .feature span {
	font-size: 37px; 
}

.intro-profile .intro-logo {
	width: 130px; 
	height: 130px;
	line-height: 130px;  
	overflow: visible; 
	font-size: 3.8em; 
	font-weight: 700; 
	text-transform: uppercase; 
}

.intro-profile .intro-logo img {
	border-radius: 50%;
	overflow: hidden;
}

.intro-profile .intro-settings i {
	position: absolute; 
	top: 50%; 
	right: 0; 
	transform: translateY(-50%);
	font-weight: 400; 
	transition: .2s;
}

.intro-profile .intro-settings:focus {
	color: #fff;
}

.intro-profile .intro-settings:hover {
	color: #2a7dfb
}
.intro .avatar-pro {
	position: relative; 
}

.intro .avatar-pro:after {
	content: attr(data-status);
	position: absolute;
	top: 0; 
	right: 0; 
	width: 43px; 
	height: 43px; 
	border-radius: 50%;
	overflow: hidden;
	background-color: #2a7dfb;
	font-size: 12px; 
	color: #fff;
	line-height: 43px; 
	text-transform: uppercase;
	text-align: center; 
}
